/* ═══════════════════════════════════════════════════════════════════════════
   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:disabled{opacity:.65;cursor:wait;transform:none}
.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}

/* LES DEUX PORTES DE LA DÉCOUVERTE (CDC découverte, lot D1, 11/09) : l'accueil,
   la page Albedo et l'exemple. Une bande sombre, deux actions, une note. */
.decouverte{padding:76px 0;background:var(--evergreen);color:var(--eggshell)}
.decouverte-grille{display:grid;gap:24px 56px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.decouverte h2{max-width:18ch;margin:0 0 16px;font-size:clamp(2rem,4.2vw,3.5rem);line-height:1;letter-spacing:-.05em;text-wrap:balance}
.decouverte-texte p{max-width:56ch;margin:0;font-size:1.05rem;line-height:1.6;color:rgba(245,242,225,.84)}
.decouverte-texte p+p{margin-top:12px;font-size:.95rem;color:rgba(245,242,225,.7)}
.decouverte-actions{display:flex;flex-wrap:wrap;gap:12px}
.decouverte-note{grid-column:1/-1;margin:0;padding-top:18px;border-top:1px solid rgba(245,242,225,.14);font-size:.84rem;line-height:1.55;color:rgba(245,242,225,.66)}
@media(max-width:860px){.decouverte{padding:56px 0}.decouverte-grille{grid-template-columns:1fr}}

/* ── 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)}
/* Le hero porte desormais deux boutons : l'action, puis l'invitation a lire.
   Sans regle, ils se collaient -- il n'y en avait qu'un jusqu'au 23/08. */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.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:.7rem;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:.75rem}
.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-header.nav-open{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  .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:16px;border:1px solid var(--line-light);border-radius:6px;text-align:center;padding:13px 16px}
  .site-nav .language-select{order:1;margin-top:18px;align-self:flex-start;min-height:44px;padding:0 30px 0 12px;font-size:.8rem}
  .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}

/* --- LA ZONE D'ACCÈS ------------------------------------------------------
   La barre n'offrait que « Se connecter » — une entrée qui s'adresse à ceux
   qui ONT déjà un compte. La création n'existait qu'au bas de la page Albedo.
   Un visiteur qui découvre le site n'avait aucun chemin visible vers le
   produit.

   Deux chemins désormais, et UN SEUL mis en avant : créer un compte est
   l'entrée, se connecter est un retour. Le trait vertical les détache des
   pages de contenu — on lit « voici le site », puis « voici comment entrer ».

   Contrastes mesurés sur la barre sombre : l'action principale (evergreen sur
   pollen) tient 11,76:1, le lien de retour 8,10:1. Le retrait se joue sur la
   graisse et la forme, pas sur un gris qui deviendrait illisible.          */
.nav-acces{display:flex;align-items:center;gap:14px;margin-left:6px;padding-left:24px;
  border-left:1px solid rgba(245,242,225,.18)}
.site-nav a.nav-retour{color:rgba(245,242,225,.7);font-weight:650}
.site-nav a.nav-retour:hover{color:var(--pollen)}
/* L'action principale se remplit : sur une barre sombre, un contour ne se
   distingue pas assez d'un lien pour être lu comme une action. */
.site-nav a.nav-cta{background:var(--pollen);border-color:var(--pollen);color:var(--evergreen);font-weight:800}
.site-nav a.nav-cta:hover{background:var(--eggshell);border-color:var(--eggshell);color:var(--evergreen)}

@media(max-width:900px){
  /* Le menu déplié passe en colonne : le trait vertical n'a plus de sens, et
     l'action principale prend toute la largeur pour rester la cible évidente. */
  .nav-acces{flex-direction:column;align-items:stretch;gap:10px;margin-left:0;
    padding-left:0;padding-top:16px;border-left:0;border-top:1px solid rgba(245,242,225,.18)}
  .site-nav a.nav-cta{text-align:center}
}

/* Les pages d'audience (bâtiments, industrie, recherche, presse) et la
   confidentialité ne vivent que dans le pied de page : la barre ne les
   mentionne pas. Rien n'indiquait donc où l'on se trouvait en y arrivant.
   Le pied marque désormais la page courante — c'est le seul repère dont
   ces pages disposent. */
.footer-link--actif{color:var(--pollen);font-weight:800}

/* Le chemin de côté du bloc contact.
   Cette section a déjà son action : le formulaire. Un second bouton principal
   à côté de lui détournerait de ce qu'on demande — c'était le cas, et il
   menait en plus à une page qui n'estime rien. Reste un lien de texte, pour
   qui préfère se servir seul. */
.contact-alternative{margin:18px 0 0;font-size:.9rem;line-height:1.6}
.contact-alternative a{color:var(--pollen);font-weight:750;text-decoration:none}
.contact-alternative a:hover{text-decoration:underline}