/* ===========================================================
   MealGen — shared design system (site-wide)
   Loaded on every page via head.php / full-header-home.php.
   Defines global tokens + nav, footer, blog/SEO content, and
   the shared .mg-btn button. Page-specific styles live in
   generator.css (index) and styles.css (legacy / recherche-plat).
   =========================================================== */

:root{
  --brand:#40b0bf;
  --brand-dark:#389ca4;
  --brand-soft:#e6f6f8;
  --ink:#1f2d2f;
  --muted:#5b6b6e;
  --line:#d7e2e3;
  --line-strong:#c2d2d4;
  --bg:#f2fcfc;
  --white:#ffffff;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgb(15 40 45 / 6%);
  --shadow:0 6px 24px rgb(15 40 45 / 8%);
  --shadow-lg:0 16px 48px rgb(15 40 45 / 12%);
  --focus:0 0 0 3px rgb(64 176 191 / 28%);
  --maxw:1120px;
}

/* ---------- Shared button (used across all pages) ---------- */
.mg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background-color .18s ease, box-shadow .18s ease, transform .05s ease;
}
.mg-btn:active{ transform:translateY(1px); }
.mg-btn--lg{ padding:16px 30px; font-size:1.125rem; }
.mg-btn--block{ width:100%; }
.mg-btn--primary{
  background-color:var(--brand);
  color:#fff !important;
  box-shadow:var(--shadow-sm);
}
.mg-btn--primary:hover,
.mg-btn--primary:focus{
  background-color:var(--brand-dark);
  color:#fff !important;
  box-shadow:var(--shadow);
}
.mg-btn--primary:focus-visible{ outline:none; box-shadow:var(--focus); }

/* ===========================================================
   NAV  (header.php + full-header-home.php share .menu-container)
   Layered on top of the legacy .u-header markup.
   =========================================================== */
.u-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgb(255 255 255 / 92%) !important;
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.u-header .u-sheet-1{ max-width:var(--maxw); margin:0 auto; }

.menu-container{ padding:14px 20px !important; }

/* Brand / logo */
.menu-left .u-text-1{
  font-weight:800 !important;
  font-size:1.6rem !important;
  margin:0 !important;
}
.menu-left .u-text-1 a{ color:var(--brand-dark) !important; text-decoration:none; }
.menu-left .u-text-1 a:hover{ color:var(--brand) !important; }

/* Nav links */
.menu-right .u-custom-font a{
  font-size:1rem !important;
  font-weight:600;
  color:var(--ink) !important;
  padding:8px 4px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.menu-right .u-custom-font a:hover,
.menu-right .u-custom-font a:focus{
  color:var(--brand-dark) !important;
  border-bottom-color:var(--brand);
}

.bar{ background-color:var(--ink); border-radius:2px; }

@media (max-width:768px){
  .menu-right{
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow) !important;
    padding:8px !important;
  }
  .menu-right .u-custom-font a{ display:block; padding:10px 12px; border-bottom:0; }
}

/* ===========================================================
   FOOTER
   =========================================================== */
.u-footer{
  background:#1f2d2f !important;
  color:#c8d6d8 !important;
  margin-top:0;
}
.u-footer .u-sheet-1{ max-width:var(--maxw); margin:0 auto; padding:32px 20px !important; }
.u-footer .disclaimer{
  font-size:.85rem !important;
  line-height:1.6;
  color:#9fb2b4 !important;
  max-width:820px;
  margin:0 auto 12px !important;
}
.u-footer p:not(.disclaimer){
  color:#e6f0f1 !important;
  font-weight:700;
  margin-top:16px !important;
}
.u-footer a{ color:var(--brand) !important; }

/* ===========================================================
   BLOG / SEO CONTENT PAGES  (.blog-post)
   Readable measure, modern typography, styled post links.
   =========================================================== */
.blog-post{
  max-width:760px;
  margin:0 auto;
  padding:48px 20px 72px;
}
.blog-post > h1,
.blog-post p,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post ul,
.blog-post ol{
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left;
}
.blog-post > h1{
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  font-weight:800;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 24px !important;
}
.blog-post h2{
  font-size:1.5rem;
  font-weight:800;
  color:var(--ink);
  margin:40px 0 12px !important;
  padding-top:8px;
}
.blog-post h3{
  font-size:1.2rem;
  font-weight:700;
  color:var(--ink);
  margin:28px 0 8px !important;
}
.blog-post p{
  font-size:1.05rem;
  line-height:1.7;
  color:#33484b;
  margin:0 0 18px !important;
}
.blog-post ul,
.blog-post ol{
  padding-left:22px;
  margin:0 0 20px !important;
}
.blog-post li{
  font-size:1.05rem;
  line-height:1.7;
  color:#33484b;
  margin-bottom:8px;
}
.blog-post li strong{ color:var(--ink); }
.blog-post a:not(.mg-btn):not(.post-link){
  color:var(--brand-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Post index links (blog.php / utilisation.php) as cards */
.div-post-link{
  margin:0 0 14px !important;
}
.post-link{
  display:block;
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  padding:18px 20px;
  font-size:1.1rem;
  font-weight:700;
  color:var(--ink) !important;
  text-decoration:none !important;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.post-link:hover,
.post-link:focus{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
  border-left-color:var(--brand-dark);
  color:var(--brand-dark) !important;
}

/* CTA button on blog/SEO pages — override legacy u-btn styling */
#btn-mealgen{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin:28px 0 !important;
  padding:16px 30px !important;
  font-size:1.05rem !important;
  font-weight:700 !important;
  background:var(--brand) !important;
  background-image:none !important;
  color:#fff !important;
  border:0 !important;
  border-radius:var(--radius-sm) !important;
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:background-color .18s ease, box-shadow .18s ease;
}
#btn-mealgen:hover,
#btn-mealgen:focus{
  background:var(--brand-dark) !important;
  box-shadow:var(--shadow);
  color:#fff !important;
}