/* ═══════════════════════════════════════════════════════════════════════════
   KELVEEN — fondation graphique partagee. Chargee par les SEPT pages.
   Source unique pour : jetons de couleur, en-tete, pied de page, boutons,
   eyebrow, echelle typographique. Une page ne redefinit JAMAIS ces regles ;
   elle n'ajoute que ce qui lui est propre.

   Echelle des titres — les seules valeurs autorisees sur le site :
     couverture        clamp(2.5rem,5.5vw,5.4rem)  lh .95  ls -.06em   fw 750
     titre de section  clamp(2.4rem,5vw,5rem)      lh .98  ls -.06em
     titre secondaire  clamp(2rem,4vw,3.6rem)      lh 1    ls -.05em
     sous-titre        clamp(1.5rem,2.4vw,2.35rem) lh 1    ls -.045em
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-variable.woff2") format("woff2"),url("../fonts/dm-sans-variable.ttf") format("truetype");font-style:normal;font-weight:100 1000;font-display:swap}

:root{
  /* Jetons canoniques */
  --evergreen:#0c1d15;
  --evergreen-soft:#173329;
  --evergreen-deep:#0a1811;
  --eggshell:#f5f2e1;
  --eggshell-deep:#e9e4cd;
  --pollen:#ffce3b;
  --teal:#97af9a;
  --tangerine:#d64933;
  --tangerine-ink:#a52f20;
  --white:#fffdf4;
  --line:rgba(12,29,21,.18);
  --line-light:rgba(245,242,225,.2);
  --shadow:0 24px 70px rgba(12,29,21,.14);
  --font-body:"DM Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-display:var(--font-body);
  --page:min(1240px,calc(100vw - 48px));

  /* Alias historiques — simulation.css et d'anciens styles les utilisent.
     Ils POINTENT vers les canoniques : ne jamais leur donner une autre valeur. */
  --ink:var(--evergreen);
  --paper:var(--eggshell);
  --yellow:var(--pollen);
  --sage:var(--teal);
  --red:var(--tangerine);
  --accent:var(--pollen);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--eggshell);color:var(--evergreen);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::selection{background:var(--pollen);color:var(--evergreen)}
img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit}
.shell{width:var(--page);margin-inline:auto}

.skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-150%);background:var(--pollen);color:var(--evergreen);padding:10px 16px;border-radius:999px;font-weight:800;text-decoration:none}
.skip-link:focus{transform:none}

.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 24px;font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.eyebrow::before{content:"";width:24px;height:3px;background:currentColor;border-radius:99px}
.eyebrow--light{color:var(--pollen)}

.button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border:1px solid transparent;border-radius:6px;font-weight:800;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;cursor:pointer}
.button:hover{transform:translateY(-2px)}
.button--pollen{background:var(--pollen);color:var(--evergreen)}
.button--pollen:hover{background:var(--white)}
.button--ghost{border-color:rgba(245,242,225,.4);background:transparent;color:var(--eggshell)}
.button--ghost:hover{border-color:var(--eggshell);background:rgba(245,242,225,.1)}
.button:focus-visible{outline:3px solid var(--pollen);outline-offset:4px}

/* ── En-tete unique ────────────────────────────────────────────────────────── */
.site-header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(12,29,21,.88);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(245,242,225,.1);color:var(--eggshell);transition:transform .34s cubic-bezier(.22,.72,.2,1)}
.site-header.is-hidden{transform:translateY(calc(-100% - 2px))}
.nav-shell{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid var(--line-light)}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{width:142px;height:auto}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{font-size:.88rem;font-weight:700;text-decoration:none;white-space:nowrap}
.site-nav a:not(.nav-cta){color:rgba(245,242,225,.7)}
.site-nav a:not(.nav-cta):hover{color:var(--pollen)}
.site-nav a.active{color:var(--pollen)}
.site-nav a:focus-visible,.brand:focus-visible{outline:3px solid var(--pollen);outline-offset:4px}
.nav-cta{padding:10px 16px;border:1px solid var(--line-light);border-radius:5px}
.nav-cta:hover{background:var(--eggshell);color:var(--evergreen)}

.language-select{height:38px;padding:0 25px 0 9px;border:1px solid rgba(245,242,225,.25);border-radius:5px;background:var(--evergreen-soft);color:var(--eggshell);font:800 .72rem/1 var(--font-body);cursor:pointer}
.language-select:focus-visible{outline:3px solid var(--pollen);outline-offset:3px}

/* ── Pied de page unique ───────────────────────────────────────────────────── */
.site-footer{padding:34px 0;background:var(--evergreen);color:var(--eggshell)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.footer-brand img{width:116px}
.footer-meta{display:grid;grid-template-columns:1fr;justify-items:end;gap:0;color:rgba(245,242,225,.52);font-size:.75rem}
.footer-contact,.footer-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
.footer-contact{padding-bottom:12px}
.footer-contact-group{display:flex;align-items:center;gap:10px}
.footer-contact-group>span{color:rgba(245,242,225,.62);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.footer-legal{padding-top:12px;border-top:1px solid rgba(245,242,225,.14);font-size:.68rem}
.footer-social{display:inline-flex;min-height:34px;align-items:center;gap:8px;padding:0 11px;border:1px solid rgba(245,242,225,.2);border-radius:999px;color:var(--pollen);text-decoration:none}
.footer-social svg{width:15px;height:15px;fill:currentColor}
.footer-link{color:var(--pollen);text-decoration:none}
.footer-link:focus-visible{outline:3px solid var(--pollen);outline-offset:4px}

@media(max-width:1000px){
  :root{--page:min(100% - 36px,1240px)}
}
/* ── Menu mobile ──────────────────────────────────────────────────────────── */
/* Sous 860px, le menu devient un panneau deroule sous la barre, ouvert par le
   bouton .nav-toggle. Avant : les liens disparaissaient purement — un mobile
   n'avait AUCUNE navigation. */
.nav-toggle{display:none;width:44px;height:44px;padding:10px;border:0;border-radius:6px;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.nav-toggle span{display:block;height:2px;width:100%;border-radius:2px;background:var(--eggshell);transition:transform .25s ease,opacity .2s ease}
.nav-toggle:focus-visible{outline:3px solid var(--pollen);outline-offset:3px}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  :root{--page:calc(100% - 30px)}
  html{scroll-padding-top:72px}
  .nav-shell{min-height:74px;flex-wrap:wrap}
  /* Menu ouvert, la nav passe sur sa propre ligne : sans hauteur posee, la
     premiere ligne s'ecrase a la taille du bouton et le logo remonte. */
  .brand{min-height:74px}
  .nav-toggle{align-self:center}
  .brand img{width:118px}
  .nav-toggle{display:flex;order:2}
  .site-nav{order:3;display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 18px}
  .site-header.nav-open .site-nav{display:flex}
  .site-nav a{padding:13px 4px;border-top:1px solid rgba(245,242,225,.12);font-size:1rem}
  .site-nav a.nav-cta{margin-top:10px;border:1px solid var(--line-light);border-radius:6px;text-align:center;padding:13px 16px}
  .language-select{order:1}
  .footer-grid{grid-template-columns:1fr}
  .footer-meta{grid-template-columns:1fr;justify-items:start;width:100%}
  .footer-contact,.footer-legal{justify-content:flex-start}
}
/* ── Apparition au defilement (reveal.js, pages interieures) ─────────────── */
.reveal-pret{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.72,.2,1)}
.reveal-vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button,.site-header{transition:none}
  .reveal-pret{opacity:1;transform:none;transition:none}
}

/* Regle de sanite pour TOUT le site : l'attribut hidden perd contre tout
   display explicite (flex, grid...). Deux fois pris au piege le 18/08 -
   le formulaire fantome de l'espace, puis le chiffre carbone qui restait
   affiche sous l'onglet Europe. Une fois pour toutes, ici. */
[hidden]{display:none !important}