/* layout.css — socle commun à toutes les pages publiques :
   jetons de couleur, base de page, en-tête et pied de page.
   Le CSS propre à chaque page vit dans /assets/pages/<page>.css */

:root {
  --primary: #005224; --primary-container: #006d32; --primary-bright: #00d166;
  --primary-fixed-dim: #7fda92; --primary-fixed: #e3f7ea;
  --secondary: #006399; --secondary-container: #67bafd; --secondary-light: #e3f2fc;
  --tertiary: #7e2739; --tertiary-container: #f6d9de;
  --success-light: #e3f9ec;
  --surface: #ffffff; --surface-card: #ffffff; --surface-lowest: #ffffff;
  --surface-low: #eff4ff; --surface-mid: #e5eeff; --surface-high: #d3e4fe; --surface-container-low: #f2f3f9;
  --on-surface: #0b1c30; --on-surface-variant: #434654; --on-surface-muted: #6f7a6e;
  --ghost-outline: rgba(111,122,110,0.18); --ghost-outline-solid: #dde1e6;
  --error: #ba1a1a; --error-light: #ffdad6;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-data: 'IBM Plex Sans', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); background: #dde2ea; color: var(--on-surface);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}

/* Colonne centrale : toutes les pages occupent la pleine hauteur, le pied de
   page reste donc en bas même quand le contenu est court. */
.page-frame { max-width: 1160px; width: 100%; margin: 0 auto; background: var(--surface); box-shadow: 0 0 60px rgba(11,28,48,0.1); flex: 1; display: flex; flex-direction: column; }
.page-main { flex: 1; display: flex; flex-direction: column; }
/* En contexte flex, un enfant en `margin: 0 auto` se réduirait à son contenu :
   on rétablit la largeur pleine, le max-width de la page continuant de borner. */
.page-main > * { width: 100%; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }
.ambient-shadow { box-shadow: 0 20px 40px rgba(11,28,48,0.06); }

/* En-tête */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(233,245,238,0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav-in { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav-brand img { height: 24px; width: auto; }
.nav-brand span { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--on-surface); }
.nav-links { display: flex; gap: 32px; align-items: center; justify-self: center; }
.nav-links a { font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: var(--on-surface-variant); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-links a.active { font-weight: 700; border-bottom: 2px solid var(--primary); padding-bottom: 4px; }
.nav-actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.btn-ghost-pill { font-size: 13px; font-weight: 600; color: var(--primary); background: transparent; border: 1px solid var(--ghost-outline); padding: 10px 20px; border-radius: 999px; text-decoration: none; transition: background 0.15s; white-space: nowrap; }
.btn-ghost-pill:hover { background: var(--surface-low); }
.btn-glow { font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(90deg, var(--primary-container), var(--primary-bright)); padding: 11px 24px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: box-shadow 0.2s, transform 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.btn-glow:hover { box-shadow: 0 0 20px rgba(0,209,102,0.4); transform: scale(0.98); }
/* Sur grand écran le conteneur s'efface : .nav-links et .nav-actions
   redeviennent des cellules directes de la grille du .nav-in */
.nav-menu { display: contents; }
.nav-burger { display: none; }

/* Menu mobile */
@media (max-width: 860px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px; cursor: pointer;
    background: transparent; border: 1px solid var(--ghost-outline); border-radius: 0.6rem;
  }
  .nav-burger span { display: block; height: 2px; width: 100%; background: var(--on-surface); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 18px; padding: 20px;
    /* opaque : le contenu de la page ne doit pas transparaître sous le menu */
    background: #eef7f1;
    border-top: 1px solid var(--ghost-outline); box-shadow: 0 18px 36px rgba(11,28,48,0.12);
  }
  .nav.open .nav-menu { display: flex; }
  .nav-menu .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-menu .nav-links a { padding: 11px 12px; border-radius: 0.6rem; font-size: 15px; font-weight: 600; text-align: left; }
  .nav-menu .nav-links a:hover { background: var(--surface-low); }
  .nav-menu .nav-links a.active { border-bottom: none; background: var(--surface-low); padding-bottom: 11px; }
  .nav-menu .nav-actions { justify-self: stretch; flex-direction: column; align-items: stretch; gap: 10px; }
  .nav-menu .nav-actions .btn-ghost-pill,
  .nav-menu .nav-actions .btn-glow { text-align: center; justify-content: center; padding: 13px 20px; font-size: 14px; }
}
@media (max-width: 480px) {
  .nav-in { padding: 0 16px; gap: 10px; }
  .nav-brand span { font-size: 17px; }
}

/* Pied de page */
.footer { background: #00210B; padding: 64px 0; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.footer p { color: rgba(255,255,255,0.78); font-size: 13.5px; }
.footer-col span.col-title { display: block; font-size: 12px; font-weight: 700; margin-bottom: 12px; color: #fff; }
.footer-col a { display: block; font-size: 13.5px; color: rgba(255,255,255,0.78); text-decoration: none; margin-bottom: 8px; transition: color 0.15s; }
.footer-col a:hover { color: #fff; }