/* TRADUCTORE, feuille commune du site.
   Couleurs et polices : identite/tokens/tokens.css. Aucun dégradé, un seul accent. */

@font-face{font-family:"Archivo Black";src:url(/polices/ArchivoBlack-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Archivo";font-weight:700;src:url(/polices/Archivo-700.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;src:url(/polices/AtkinsonHyperlegible-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;src:url(/polices/AtkinsonHyperlegible-Bold.ttf) format("truetype");font-display:swap}

:root{
  --encre:#121212;--panneau:#1C1D1A;--ligne:#2E2F2A;
  --surligneur:#C8F135;--olive:#5E7A00;
  --papier:#FAFAF7;--brume:#E9EAE4;--graphite:#5F5F5A;--cendre:#A3A39C;
  --f-titre:"Archivo Black","Archivo",system-ui,sans-serif;
  --f-ui:"Archivo",system-ui,sans-serif;
  --f-texte:"Atkinson Hyperlegible",system-ui,sans-serif;
  --maxw:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font:400 17px/1.6 var(--f-texte)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--surligneur);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* Le surligneur : un mot, pas plus. */
.sur{background:var(--surligneur);color:var(--encre);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Labels : Archivo Bold, casse normale. Jamais de majuscules espacées ni de monospace. */
.label{font:700 16px/1.3 var(--f-ui);letter-spacing:0}

/* Navigation fixe, verre dépoli au défilement. */
.nav{position:fixed;inset:0 0 auto;z-index:20;padding:18px 0;transition:background .25s,padding .25s,border-color .25s;border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:56px;width:auto;margin:-15px 0 -15px -15px}  /* le SVG du kit garde sa zone de protection */
.nav-liens{display:flex;gap:26px}
.nav-liens a{text-decoration:none;color:var(--papier);opacity:.8}
.nav-liens a:hover{opacity:1}
.nav.scr{background:rgba(18,18,18,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:12px 0;border-color:var(--ligne)}
.nav.clair{background:rgba(250,250,247,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--brume);padding:12px 0}
.nav.clair .nav-liens a{color:var(--encre)}

/* Hero, sur encre. */
.hero{background:var(--encre);color:var(--papier);padding:128px 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:32px}
.hero-texte{padding-bottom:88px}
.hero .label{color:var(--surligneur)}
h1{font:400 clamp(40px,6vw,72px)/1.02 var(--f-titre);letter-spacing:-.02em;margin:18px 0 22px;text-wrap:balance}
.hero p{font-size:clamp(17px,1.6vw,20px);color:var(--brume);max-width:34ch;margin:0 0 14px}
.hero p.discret{color:var(--cendre);font-size:15px}
.hero-perso{align-self:end;justify-self:center;max-width:340px}

/* Sections. */
section{padding:88px 0;border-top:1px solid var(--brume)}
h2{font:400 clamp(28px,3.8vw,42px)/1.08 var(--f-titre);letter-spacing:-.015em;margin:12px 0 18px;text-wrap:balance}
.section-tete{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.section-tete .label,.olive{color:var(--olive)}
.chapo{max-width:52ch;color:var(--graphite);margin:0}

/* Méthode, trois étapes. */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--encre)}
.etape{padding:26px 26px 6px 0}
.etape+.etape{padding-left:26px;border-left:1px dashed var(--cendre)}
.etape .num{font:400 44px/1 var(--f-titre);color:var(--encre)}
.etape h3{font:700 19px/1.3 var(--f-ui);margin:14px 0 8px}
.etape p{margin:0;color:var(--graphite)}

/* Grille à cellules collées : le gap de 1px dessine les séparateurs. */
.cellules{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--brume);border:1px solid var(--brume);border-radius:16px;overflow:hidden}
.cellule{background:var(--papier);padding:28px 26px}
.cellule h3{font:700 18px/1.3 var(--f-ui);margin:10px 0 8px}
.cellule p{margin:0;color:var(--graphite);font-size:16px}
.cellule .label{color:var(--olive)}
.cellule.large{grid-column:span 2}

/* Émissions, sur encre. */
.sombre{background:var(--encre);color:var(--papier);border-top:0}
.sombre .section-tete .label{color:var(--surligneur)}
.sombre .chapo{color:var(--cendre)}
.emissions{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne);border-radius:16px;overflow:hidden}
.emission{background:var(--panneau);padding:26px 22px 30px}
.emission .label{color:var(--cendre)}
.emission h3{font:400 22px/1.15 var(--f-titre);margin:14px 0 0}

/* Pages de contenu. */
.page-tete{background:var(--encre);color:var(--papier);padding:132px 0 56px}
.page-tete h1{font-size:clamp(34px,5vw,56px)}
.page-tete p{color:var(--cendre);margin:0}
.contenu{padding:56px 0 88px;border:0}
.contenu .wrap{max-width:780px}
.contenu h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 10px}
.contenu h2:first-child{margin-top:0}
.contenu p,.contenu address{margin:0 0 12px;font-style:normal}

/* Pied de page. */
.pied{background:var(--encre);color:var(--cendre);padding:44px 0;font-size:15px}
.pied .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.pied img{height:48px;width:auto;margin:-13px 0 -13px -13px}
.pied nav{display:flex;flex-wrap:wrap;gap:22px}
.pied a{color:var(--papier);text-decoration:none}
.pied a:hover{text-decoration:underline}

/* Apparition douce au défilement. */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:880px){
  .nav-liens{display:none}
  .hero .wrap{grid-template-columns:1fr}
  .hero-texte{padding-bottom:12px}
  .hero-perso{max-width:240px}
  .etapes,.cellules{grid-template-columns:1fr}
  .cellule.large{grid-column:auto}
  .etape+.etape{padding-left:0;border-left:0;border-top:1px dashed var(--cendre)}
  .emissions{grid-template-columns:1fr 1fr}
  .section-tete{display:block}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}