/* Savoira — site-chrome.css : styles du composant partagé nav + footer.
   SOURCE UNIQUE du chrome, chargée sur TOUTES les pages (v2 et héritées).
   Le markup correspondant est généré par site-chrome.js.
   Les tokens sont scopés au chrome pour ne pas toucher aux pages héritées. */

.nav, .footer {
  --pine: #0E3B2C;
  --pine-hover: #0C3225;
  --moss: #DFEBE3;
  --cream: #FAF8F2;
  --white: #FFFFFF;
  --line: #E7E3D9;
  --ink: #101613;
  --muted: rgba(16, 22, 19, .64);
  --cream-72: rgba(250, 248, 242, .72);
  --shadow: 0 1px 2px rgba(16, 22, 19, .04), 0 8px 24px rgba(16, 22, 19, .06);
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);
}
.nav .container, .footer .container {
  width: min(100% - 48px, 1160px);
  margin-inline: auto;
  padding: 0;
  max-width: none;
}
.nav :focus-visible, .footer :focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 2px; }

/* Fond de page unique pour tout le site — le cream de la home. */
body { background-color: #FAF8F2; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 64px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease, height .2s ease, box-shadow .2s ease;
}
.nav.scrolled {
  height: 56px;
  background: rgba(250, 248, 242, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
/* Trois colonnes égales (nav v1.2) : le groupe de liens est centré sur le
   viewport quel que soit le nombre de liens. */
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; gap: 24px; }
.nav .brand { justify-self: start; }
.nav-links { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; justify-self: center; }
.nav-links a {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 12px; border-radius: 12px;
  color: var(--muted); font-size: 15px; font-weight: 500;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.nav-links a:hover { color: var(--pine); }
/* État actif en pilule sur la page courante (système — revue CCM §2) */
.nav-links a.active, .nav-links a[aria-current="page"] { background: var(--moss); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 16px; justify-self: end; }
.nav-actions .login { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-actions .login:hover { color: var(--pine); }
.nav .brand { display: inline-flex; align-items: center; }

/* Boutons du chrome (scopés — ne restylent pas les boutons des pages) */
.nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: 12px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.nav .btn-primary { background: var(--pine); color: var(--cream); }
.nav .btn-primary:hover { background: var(--pine-hover); color: var(--cream); }
.nav .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.nav .btn-secondary:hover { background: rgba(16, 22, 19, .05); color: var(--ink); }
.nav .btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }

.burger {
  display: none;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 12px; color: var(--ink); cursor: pointer;
}
.burger:hover { background: rgba(16, 22, 19, .05); }
/* Icône hamburger → X en morph (brief v2.6) : trois traits qui pivotent */
.burger-box { position: relative; display: block; width: 22px; height: 14px; }
.burger-bar {
  position: absolute; left: 0; right: 0; height: 1.8px; border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease-out, opacity .2s ease-out;
}
.burger-bar:nth-child(1) { top: 0; }
.burger-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-bar:nth-child(3) { bottom: 0; }
.burger.open .burger-bar:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.burger.open .burger-bar:nth-child(2) { opacity: 0; }
.burger.open .burger-bar:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

/* Menu mobile plein écran sur cream */
.mobile-menu {
  display: none;
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  z-index: 49;
  background: var(--cream);
  padding: 8px 24px 32px;
  overflow-y: auto;
  flex-direction: column;
}
.nav.scrolled .mobile-menu { top: 56px; }
.mobile-menu.open { display: flex; }
body.menu-open { overflow: hidden; }
/* Le backdrop-filter de .nav.scrolled crée un bloc contenant pour les
   descendants position:fixed : le menu plein écran se retrouve alors calé
   sur la boîte de 56 px de la nav au lieu du viewport, et le contenu de la
   page transparaît une fois scrollé. On neutralise le filtre tant que le
   menu est ouvert — il est de toute façon entièrement masqué. */
body.menu-open .nav,
body.menu-open .nav.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cream); }
.mm-links { display: flex; flex-direction: column; }
.mm-links a {
  display: flex; align-items: center;
  min-height: 56px;
  font-size: 22px; line-height: 28px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mm-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 32px; }
.mm-actions .btn { width: 100%; }

/* ---- Transition d'ouverture/fermeture (brief v2.6) ----
   Réutilise l'entrée fondu + flou du système, accélérée. Ouverture ≈ 360 ms
   avec cascade ; fermeture 160 ms, tout ensemble (jamais de cascade inverse).
   Uniquement opacity / transform / filter. */
.mobile-menu { opacity: 0; transition: opacity .2s ease-out; }
.mobile-menu.open { opacity: 1; }
.mobile-menu.closing { opacity: 0; transition: opacity .16s ease-in; }

.mm-links a, .mm-actions .btn {
  opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity .25s ease-out, transform .25s ease-out, filter .25s ease-out;
}
.mobile-menu.open .mm-links a,
.mobile-menu.open .mm-actions .btn { opacity: 1; transform: none; filter: none; }
.mobile-menu.open .mm-links a:nth-child(1) { transition-delay: 60ms; }
.mobile-menu.open .mm-links a:nth-child(2) { transition-delay: 100ms; }
.mobile-menu.open .mm-links a:nth-child(3) { transition-delay: 140ms; }
.mobile-menu.open .mm-actions .btn:nth-child(1) { transition-delay: 200ms; }
.mobile-menu.open .mm-actions .btn:nth-child(2) { transition-delay: 240ms; }
/* Fermeture : tout ensemble, plus court, sans cascade */
.mobile-menu.closing .mm-links a,
.mobile-menu.closing .mm-actions .btn {
  opacity: 0; transform: none; filter: blur(4px);
  transition: opacity .16s ease-in, filter .16s ease-in;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu.open, .mobile-menu.closing,
  .mm-links a, .mm-actions .btn, .burger-bar { transition: none !important; }
  .mobile-menu { opacity: 1; }
  .mm-links a, .mm-actions .btn { opacity: 1; transform: none; filter: none; }
}

/* ---------- Footer ---------- */
.footer { background: var(--pine); color: var(--cream); padding: 64px 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px 32px;
}
.footer .brand { display: inline-flex; align-items: center; }
.footer-mission { margin-top: 20px; color: var(--cream-72); max-width: 30ch; }
.footer-note { margin-top: 16px; color: var(--cream-72); font-size: 13px; line-height: 18px; font-weight: 500; }
.footer-col h4 {
  margin: 0;
  font-size: 13px; line-height: 18px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream-72);
}
.footer-col ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--cream); opacity: .85; font-size: 15px; text-decoration: none; transition: opacity .18s ease; }
.footer-col a:hover { opacity: 1; color: var(--cream); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(250, 248, 242, .16);
  color: var(--cream-72); font-size: 13px;
}
.footer-bottom nav { display: flex; gap: 20px; }
.footer-bottom a { color: var(--cream-72); text-decoration: none; }
.footer-bottom a:hover { color: var(--cream); }
.socials { display: flex; gap: 14px; margin-top: 20px; }
.socials a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -5px; border-radius: 12px;
  border: 0;
  color: var(--cream); opacity: .85;
  transition: opacity .18s ease;
}
.socials a svg { border: 1px solid rgba(250, 248, 242, .2); border-radius: 12px; padding: 10px; width: 36px; height: 36px; box-sizing: border-box; transition: border-color .18s ease; }
.socials a:hover { opacity: 1; color: var(--cream); }
.socials a:hover svg { border-color: rgba(250, 248, 242, .5); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions .login { display: none; }
  .nav-actions { gap: 8px; }
  .burger { display: flex; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: block; padding: 10px 0; }
}

/* ---------- Sélecteur de langue (nav + menu mobile) ---------- */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 12px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink); cursor: pointer;
  transition: background-color .18s ease;
}
.lang-btn:hover { background: rgba(16, 22, 19, .05); }
.lang-btn .lang-caret { color: var(--muted); transition: transform .18s ease; }
.lang-switch.open .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 184px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(15, 61, 43, .35);
  padding: 6px; display: none; z-index: 70;
}
.lang-switch.open .lang-menu { display: block; }
.lang-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: transparent;
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--ink);
  cursor: pointer; text-align: left;
}
.lang-opt:hover { background: var(--moss); }
.lang-opt.on { font-weight: 600; }
.lang-opt .lang-check { margin-left: auto; color: var(--pine); flex: none; }
.lang-flag { font-size: 16px; line-height: 1; }

/* Menu mobile : pastilles de langue au-dessus des actions */
.mm-lang { display: flex; gap: 10px; padding-top: 28px; }
.mm-lang-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.mm-lang-opt.on { border-color: var(--ink); background: rgba(16, 22, 19, .04); }

@media (max-width: 768px) {
  /* En mobile, le choix de langue vit dans le menu plein écran */
  .lang-switch { display: none; }
}