/* ------------------------------------------------------ Montserrat, embarquée
   La typographie voyage avec le site : plus de dépendance à Google Fonts,
   donc un rendu identique partout, y compris hors ligne et derrière un
   réseau d'entreprise filtrant. Licence SIL OFL 1.1 (assets/fonts/).  */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/montserrat-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/montserrat-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/montserrat-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/montserrat-latin-ext-800-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/montserrat-latin-800-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:Montserrat;font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/montserrat-latin-ext-900-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-style:normal;font-weight:900;font-display:swap;
  src:url(fonts/montserrat-latin-900-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}

/* EIGSI Formula Team — feuille de style
   Direction : blanc technique. Fond clair, encre anthracite, filets fins,
   beaucoup d'air. Le rose EIGSI sert d'accent, jamais d'aplat décoratif. */

/* La charte de l'équipe : bleu 182249, rose FF0055. */
:root{
  --nuit:#182249;   /* le bleu de l'équipe, pour les fonds sombres */
  --paper:#FFFFFF;
  --paper-2:#F6F7FB;
  --paper-3:#EDEFF5;
  --ink:#182249;         /* 15,4:1 sur blanc */
  --body:#474F68;        /* 7,6:1 */
  --muted:#676F93;       /* 4,9:1 sur blanc, AA tenu */
  --line:#E2E5EE;
  --line-2:#C9CEDD;
  /* UN SEUL ROSE SUR TOUT LE SITE : #FF0055, celui de la charte de l'équipe.
     Les variantes assourdies qui vivaient ici — un rose pour le petit texte,
     un autre pour les aplats, un troisième pour le bleu nuit — donnaient
     trois roses differents d'une page a l'autre. L'equipe a tranche : c'est
     celui-la, et lui seul.
     A savoir : FF0055 donne 3,9:1 sur blanc et 4,0:1 sur le bleu nuit. Pour
     un aplat, un filet ou un grand caractere, c'est largement suffisant ;
     pour un libelle de onze pixels, c'est sous le seuil AA de 4,5. */
  --accent:#FF0055;      /* le rose de la charte */
  --accent-vif:#FF0055;
  --accent-dark:#D40046;  /* le meme, assombri, pour le survol d'un aplat */
  --pale-trait:#9AA3BC;  /* tirets de liste : un gris-bleu, et non du rose */
  /* Sur bleu nuit, le meme rose : l'equipe veut une seule couleur. */
  --accent-nuit:#FF0055;
  --indigo:#182249;
  --maxw:1240px;
  /* UNE SEULE echelle de titres pour tout le site. Avant, chaque bloc avait
     sa propre clamp() : le hero montait a 48 px, une banniere a 61, un titre
     de page a 54, le titre de la methode a 58. Rien ne se repondait d'une
     page a l'autre. Deux tailles suffisent : une pour ce qui ouvre une page,
     une pour ce qui ouvre une section. */
  /* Le titre d'accueil, seul de son rang. Sa taille est bornee par la HAUTEUR
     autant que par la largeur : cale par le bas, il remonte quand il grossit,
     et sur un ecran large mais peu haut il venait toucher la barre de menu. */
  /* Saira est plus large qu'une condensee : a corps egal, le titre tient
     plus de place. Les bornes sont donc plus basses, et la troisieme — la
     largeur — evite qu'il se casse en deux lignes. */
  --titre-0:clamp(2.6rem,min(7.6vw,13vh),7.4rem);
  --titre-1:clamp(2.3rem,5.2vw,4.1rem);   /* ouverture de page */
  --titre-2:clamp(1.8rem,3.5vw,2.8rem);   /* ouverture de section */
  --titre-ligne:22ch;                     /* longueur de ligne des titres */
  --pad:clamp(20px,5vw,60px);
  --rythme:clamp(76px,9vw,140px);
}

/* La police de titre : Saira, graisse 700, choisie par l'equipe parmi huit
   essais rendus sur la vraie page d'accueil. Anton, qui servait jusqu'ici,
   est une grasse de poster — lettres epaisses, contreformes fermees, mots qui
   se touchent ; de la force, pas de tenue. Saira est une geometrique large,
   de la meme famille de dessin que le logo de l'equipe : lettres ouvertes,
   fûts reguliers, pas d'effet. Elle est posee plutot que criarde, et c'est
   ce qu'on demande a un titre qu'on lit en grand. */
@font-face{font-family:Saira;font-weight:700;font-style:normal;font-display:swap;
  src:url(fonts/saira-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Saira;font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
  src:url(fonts/saira-latin-ext-700-normal.woff2) format('woff2')}
/* Anton reste declaree : le dossier de partenariat s'en sert encore. */
@font-face{font-family:Anton;font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/anton-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Anton;font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
  src:url(fonts/anton-latin-ext-400-normal.woff2) format('woff2')}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Ce reglage coupe toute animation — c'est ce qu'on veut d'une apparition
     qui saute aux yeux. Le ruban des partenaires fait exception : il defile
     lentement et sans a-coup, il ne surprend personne, et l'arreter revient
     a cacher la moitie des logos. Il est ralenti ailleurs, pas supprime. */
  *:not(.marquee-track),*::before,*::after{
    animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:Montserrat,"Segoe UI",system-ui,sans-serif;
  font-size:16.5px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* height:auto est indispensable depuis que chaque image porte ses attributs
   width et height : sans lui, une image contrainte en largeur garderait la
   hauteur déclarée et serait déformée. Avec lui, le navigateur connaît le
   rapport avant le chargement et réserve la place — la page ne sursaute plus. */
picture{display:contents}
img{max-width:100%;display:block;height:auto}

/* Un titre lu par les lecteurs d'écran et par les moteurs, invisible à l'œil.
   Il sert à rétablir la hiérarchie des titres là où la maquette n'en affiche
   pas : une section qui passe de h1 à h3 fait trébucher la navigation au
   clavier, qui saute de titre en titre. */
/* Une photo qui n'est jamais agrandie au-delà de sa définition.
   Sert aux images dont nous n'avons pas de fichier plus défini : plutôt que
   de les étirer sur toute la largeur, on les pose à leur taille, centrées. */
.photo-nette{margin:0 auto clamp(28px,4vw,48px);max-width:1202px}
.photo-nette img{width:100%;border-radius:2px}
.photo-nette figcaption{margin-top:10px;font-size:.84rem;color:var(--muted)}

.titre-structure{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.lede{max-width:62ch}
.narrow{max-width:70ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ------------------------------------------------------------ typographie */
h1,h2,h3,h4{color:var(--ink);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0}
h1{font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem);margin-bottom:.55em}
h3{font-size:clamp(1.05rem,1.6vw,1.2rem);letter-spacing:-.012em;line-height:1.35}
h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)}
p{margin:0 0 1.15em}
b,strong{color:var(--ink);font-weight:600}
.big{font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.55;font-weight:400;color:var(--ink)}

/* libellé de section */
.ref{
  display:block;margin-bottom:1.15rem;
  font-size:.67rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-variant-numeric:tabular-nums;
}

/* ----------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:14px 26px;font-size:.73rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost,.btn.light-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover,.btn.light-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.lg{padding:17px 32px;font-size:.76rem}
.btn.full{width:100%;justify-content:center}
.actions,.pagehead-actions,.hero-cta,.form-actions{display:flex;flex-wrap:wrap;gap:12px}

/* -------------------------------------------------------------- navigation */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:74px;display:flex;align-items:center;gap:24px;
}
.brand-logo img{height:34px;width:auto}
.burger{
  margin-left:auto;background:transparent;border:1px solid var(--line-2);
  color:var(--ink);font-size:18px;width:44px;height:44px;cursor:pointer;display:none;
}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,1.5vw,24px)}
/* sept rubriques : aucun intitulé ne doit passer à la ligne */
.nav-links>a{
  font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);transition:color .2s ease;white-space:nowrap;
}
.nav-links>a:hover{color:var(--ink)}
.nav-links>a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:3px}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:8px}
.nav-support,.nav-cta{padding:11px 16px;font-size:.66rem;letter-spacing:.1em;white-space:nowrap}
.nav-cta{background:var(--accent);border-color:var(--accent)}
.nav-cta:hover{background:var(--ink);border-color:var(--ink)}

@media (max-width:1279px){
  .burger{display:block}
  .nav-links{
    position:absolute;left:0;right:0;top:74px;display:none;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:14px var(--pad) 24px;box-shadow:0 18px 40px rgba(17,21,26,.08);
  }
  .nav-links.open{display:flex}
  .nav-links>a{padding:14px 0;width:100%;border-bottom:1px solid var(--line);font-size:.84rem}
  .nav-actions{flex-direction:column;align-items:stretch;width:100%;margin:18px 0 0;gap:10px}
  .nav-actions .btn{justify-content:center}
}

/* --------------------------------------------------------------------- hero */
.hero{padding:clamp(44px,6vw,86px) 0 clamp(52px,7vw,96px);background:var(--paper)}
.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.hero-cta{margin-top:32px}
.hero-media{margin:0;position:relative}
.hero-media video,.hero-media img{
  width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--paper-3);
}
.hero-media figcaption{
  margin-top:14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-media video,.hero-media img{aspect-ratio:4/3}
}

/* plaque de chiffres */
.plate,.stats,.car-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.car-kpis,.plate.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.car-kpis>div:nth-child(3n){border-right:0}
.car-kpis>div:nth-child(-n+3){border-bottom:1px solid var(--line)}
@media (min-width:861px){.car-kpis b{white-space:nowrap}}
@media (max-width:860px){
  .car-kpis{grid-template-columns:minmax(0,1fr)}
  .car-kpis>div{border-right:0;border-bottom:1px solid var(--line)}
  .car-kpis>div:last-child{border-bottom:0}
}
.plate>div,.stats>div,.stat,.car-kpis>div{
  padding:30px 24px 32px;border-right:1px solid var(--line);text-align:center;
}
.plate>div:last-child,.stats>div:last-child,.car-kpis>div:last-child{border-right:0}
.plate b,.stats b,.stat b,.car-kpis b{
  display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;
  letter-spacing:-.035em;color:var(--ink);
}
.plate span,.stats span,.stat span,.car-kpis span{
  display:block;margin-top:8px;font-size:.65rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);
}

/* ----------------------------------------------------------------- sections */
section{padding:var(--rythme) 0}
section.tint{background:var(--paper-2)}
section.dark{background:var(--ink);color:rgba(255,255,255,.76)}
section.dark h1,section.dark h2,section.dark h3,section.dark h4,section.dark b,section.dark strong{color:#fff}
section.dark p{color:rgba(255,255,255,.72)}
section.dark .ref{color:var(--accent-nuit)}
.head{max-width:66ch;margin-bottom:clamp(36px,4.5vw,60px)}
.head h2{max-width:var(--titre-ligne)}
.head p{font-size:clamp(1rem,1.4vw,1.1rem);margin-bottom:0}
.head p+p{margin-top:.9em}
.pagehead{padding:clamp(66px,8vw,110px) 0 clamp(44px,5vw,72px);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:var(--titre-1);margin-bottom:.38em;max-width:var(--titre-ligne)}
.pagehead p{max-width:58ch;font-size:clamp(1rem,1.5vw,1.14rem)}
.pagehead-actions{margin-top:28px}
.system-head,.recruit-head{max-width:60ch;margin-bottom:clamp(30px,4vw,52px)}

.split,.recruit-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
.split.wide{grid-template-columns:1.2fr .8fr}
.split img,.recruit-split img{width:100%;height:100%;object-fit:cover;min-height:330px}
.split figure,.recruit-split figure{margin:0}
.split figcaption,.recruit-split figcaption{margin-top:12px;font-size:.78rem;color:var(--muted)}
.flow{display:grid;gap:18px}

/* ------------------------------------- une photo debout, montree en entier
   Le format portrait est le piege du gabarit : glisse dans une colonne, il se
   fait rogner par object-fit:cover et l'on perd justement ce qu'il montrait.
   Ici la photo garde ses proportions et sa largeur est bornee. */
.photo-debout{margin:0;max-width:430px}
.photo-debout img{width:100%;height:auto;display:block;border-radius:2px}
.photo-debout figcaption{margin-top:11px;font-size:.82rem;color:var(--muted)}
.split .photo-debout img,.recruit-split .photo-debout img{
  height:auto;min-height:0;object-fit:contain;
}
.innov-atelier{margin-top:clamp(34px,4.4vw,58px);grid-template-columns:.8fr 1.2fr}
.innov-atelier h3{margin-bottom:.5em}
.innov-atelier .note{margin-top:1.1em}
@media (max-width:860px){
  .innov-atelier{grid-template-columns:1fr}
  .photo-debout{max-width:380px}
}

/* ------------------------------------------------------------------- cartes */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card{
  background:var(--paper);border:1px solid var(--line);
  padding:28px 26px 32px;transition:border-color .3s ease,box-shadow .3s ease;
}
.card:hover{border-color:var(--line-2);box-shadow:0 14px 34px rgba(17,21,26,.07)}
.card h3{margin-bottom:12px}
.card p{font-size:.94rem}
.card p:last-child{margin-bottom:0}
.card img{margin:-28px -26px 22px;width:calc(100% + 52px);max-width:none;height:200px;object-fit:cover}
.tint .card{background:var(--paper)}
.dark .card{background:transparent;border-color:rgba(255,255,255,.2)}

.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.role-card{background:var(--paper);border:1px solid var(--line);padding:28px 26px 32px;display:flex;gap:22px}
.role-no{
  flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.13em;color:var(--accent);
  font-variant-numeric:tabular-nums;padding-top:5px;
}
.role-card h3{margin-bottom:10px}
.role-card p{font-size:.94rem}
.role-card p:last-child{margin-bottom:0}

.nc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.nc-card{background:var(--paper);border:1px solid var(--line);padding:26px 24px 28px}
.nc-card p{font-size:.92rem}
.nc-type{display:block;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}

.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mosaic img{width:100%;height:270px;object-fit:cover}
.mosaic figure{margin:0}
.mosaic figcaption{padding:12px 2px 0;font-size:.76rem;color:var(--muted)}

.story{border-top:1px solid var(--line);padding-top:34px;margin-top:34px}
.story h3{margin-bottom:14px}
.chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.chain>div,.chain>article{border-top:2px solid var(--ink);padding-top:20px}
.chain h3{margin:8px 0 10px;font-size:1rem}
.chain p{font-size:.88rem;margin-bottom:0}

.pill-list{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.pill-list li{border:1px solid var(--line);padding:10px 16px;font-size:.78rem;color:var(--ink)}
.checks,.checks-3{display:grid;gap:12px;padding:0;margin:0 0 26px;list-style:none}
.checks-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.checks li,.checks-3 li{position:relative;padding-left:26px;font-size:.94rem}
.checks li::before,.checks-3 li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--pale-trait);
}
.note,.source-note,.optional{font-size:.82rem;color:var(--muted)}
.notice{border-left:2px solid var(--ink);background:var(--paper-2);padding:20px 24px;margin:26px 0}
.notice p:last-child{margin-bottom:0}

/* ------------------------------------------------------- bandeau d'appel */
.cta-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--rythme) 0}
.cta-band h2{margin-bottom:.35em}
.cta-band p{max-width:58ch}
.recruit-strip{background:var(--indigo);color:rgba(255,255,255,.78);padding:var(--rythme) 0}
.recruit-strip h2,.recruit-strip h3,.recruit-strip b{color:#fff}
.recruit-strip .ref{color:#fff}
.recruit-strip p{color:rgba(255,255,255,.74)}
.recruit-strip .btn{background:#fff;border-color:#fff;color:var(--indigo)}
.recruit-strip .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.recruit-strip .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.recruit-strip .btn.ghost:hover{background:#fff;color:var(--indigo);border-color:#fff}

/* --------------------------------------------------- explorateur de systèmes */
.explore{position:relative;background:var(--paper-2);border:1px solid var(--line)}
.explore img{width:100%;display:block}
.hot{
  position:absolute;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line-2);color:var(--ink);
  font-size:.7rem;font-weight:700;cursor:pointer;display:grid;place-items:center;
  transform:translate(-50%,-50%);transition:background .2s ease,border-color .2s ease,transform .2s ease;
  box-shadow:0 2px 10px rgba(17,21,26,.18);
}
.hot:hover{border-color:var(--accent);transform:translate(-50%,-50%) scale(1.12)}
.hot[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sys-panel{background:var(--paper-2);border:1px solid var(--line);padding:28px 26px 32px}
.sys-panel h3{margin-bottom:18px}
.sys-panel dl{margin:0 0 22px}
.sys-panel dt{font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.sys-panel dd{margin:6px 0 0;color:var(--ink);font-size:.94rem}
.sys-specs,.sys-validation{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.sys-specs b,.sys-validation b{display:block;font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}
.sys-specs ul{margin:0;padding-left:18px;font-size:.9rem}
.sys-validation p{margin:0;font-size:.9rem}

.table-scroll{overflow-x:auto;border:1px solid var(--line)}
.spec-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.spec-table th,.spec-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
.spec-table th{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600}
.spec-table tr:last-child td{border-bottom:0}
.spec-table .num{text-align:right;font-variant-numeric:tabular-nums}
.spec-table caption{
  caption-side:top;text-align:left;padding:14px 18px;font-size:.64rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.spec-table tfoot th,.spec-table tfoot td{
  border-top:1px solid var(--line-2);border-bottom:0;font-weight:700;color:var(--ink);
}
.spec-table tfoot th{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase}
.scrut-section{border-top:1px solid var(--line);padding-top:32px;margin-top:32px}

/* ---------------------------------------------------------------- formulaire */
.form-shell{background:var(--paper-2);border:1px solid var(--line);padding:clamp(26px,4vw,42px)}
.email-form{display:grid;gap:18px}
.email-form label{display:block;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.email-form input,.email-form select,.email-form textarea{
  display:block;width:100%;margin-top:8px;padding:13px 15px;
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
  font-family:inherit;font-size:.96rem;
}
.email-form input:focus,.email-form select:focus,.email-form textarea:focus{outline:none;border-color:var(--accent)}
.email-form textarea{resize:vertical}
.contact-alt{margin-top:26px;font-size:.9rem}
.contact-alt a{color:var(--accent);border-bottom:1px solid rgba(216,35,47,.3)}

/* ------------------------------------------------- composants page d'accueil */
.heritage-years{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;padding:0;list-style:none}
.heritage-years button{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:11px 18px;font-family:inherit;font-size:.74rem;font-weight:600;letter-spacing:.09em;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.heritage-years button:hover{color:var(--ink);border-color:var(--line-2)}
.heritage-years button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.heritage-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,54px);align-items:center}
.heritage-panel img{width:100%;height:clamp(280px,38vw,470px);object-fit:cover}
.heritage-tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.heritage-panel h3{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;margin:14px 0 18px}

.rail{position:relative}
.rail-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:10px;scrollbar-width:none;
}
.rail-track::-webkit-scrollbar{display:none}
.rail-card{scroll-snap-align:start;background:var(--paper);border:1px solid var(--line)}
.rail-card img{width:100%;height:210px;object-fit:cover}
.rail-body{padding:22px 22px 26px}
.rail-body h3{margin-bottom:10px}
.rail-body p{font-size:.88rem;margin-bottom:0}
.rail-tag{display:block;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.rail-nav{display:flex;gap:8px;margin-top:22px}
.rail-nav button{
  width:46px;height:46px;background:transparent;border:1px solid var(--line-2);
  color:var(--ink);font-size:18px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.rail-nav button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rail-nav button[disabled]{opacity:.3;cursor:default}
.rail-nav button[disabled]:hover{background:transparent;color:var(--ink);border-color:var(--line-2)}

.feature{position:relative;min-height:clamp(400px,48vw,560px);display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.feature>img,.feature> picture >img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,21,26,.92),rgba(17,21,26,.55) 62%,rgba(17,21,26,.3))}
.feature-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.feature-in h2,.feature-in h3{color:#fff}
.feature-in .ref{color:var(--accent-nuit)}
.feature-in p{max-width:46ch;color:rgba(255,255,255,.78)}
.feature-in .btn{background:#fff;border-color:#fff;color:var(--ink)}
.feature-in .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.feature-in .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.feature-in .btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

.rotator{color:var(--accent);display:inline-block;min-width:9ch}
.join-line{font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;margin:0 0 30px;color:var(--ink)}

.contact-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,54px);align-items:center}
.contact-card img{width:100%;height:clamp(260px,32vw,400px);object-fit:cover}
.contact-card a{color:var(--accent)}

/* ------------------------------------------------------------------- footer */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:clamp(54px,7vw,82px) 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr .9fr .9fr .9fr;gap:44px}
.foot-logo{height:32px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:.86rem;max-width:34ch}
.foot-grid h4{margin-bottom:16px}
/* Le pied de page vient après des h2 : ses intertitres sont donc des h3, et
   non des h4 — sauter un niveau casse la navigation par titres. Ils gardent
   l'allure discrète qu'ils avaient. */
.plan-texte h3,.foot-grid h3{font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--muted)}
.foot-grid h3{margin-bottom:16px}
.foot-grid div>a{display:block;padding:7px 0;font-size:.88rem;color:var(--body);transition:color .2s ease}
.foot-grid div>a:hover{color:var(--accent)}
.foot-end{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:42px;padding-top:24px;
  font-size:.76rem;color:var(--muted);
}

/* ------------------------------------------------------------- adaptations */
@media (max-width:1080px){
  .g4,.nc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:860px){
  .split,.recruit-split,.heritage-panel,.contact-card{grid-template-columns:1fr}
  .split img,.recruit-split img{min-height:250px}
  .g2,.g3,.mosaic,.role-grid,.checks-3{grid-template-columns:1fr}
  .plate,.stats,.car-kpis{grid-template-columns:1fr 1fr}
  .plate>div,.stats>div,.stat,.car-kpis>div{border-bottom:1px solid var(--line)}
  .plate>div:nth-child(2n),.stats>div:nth-child(2n),.car-kpis>div:nth-child(2n){border-right:0}
  .plate>div:nth-last-child(-n+2),.stats>div:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:560px){
  .g4,.nc-grid,.chain,.foot-grid{grid-template-columns:1fr}
  .role-card{flex-direction:column;gap:12px}
  .mosaic img{height:220px}
  .card img{height:180px}
}

/* deux classes héritées des pages existantes */
.brand{display:inline-flex;align-items:center}
.recruit-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,46px)}
.recruit-flow>div,.recruit-flow>article{border-top:2px solid var(--ink);padding-top:20px}
.recruit-flow h3{margin:8px 0 10px;font-size:1rem}
.recruit-flow p{font-size:.88rem;margin-bottom:0}
@media (max-width:1080px){.recruit-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.recruit-flow{grid-template-columns:1fr}}
.recruit-flow b,.chain b{display:block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.recruit-strip .recruit-flow>div,.recruit-strip .recruit-flow>article{border-top-color:rgba(255,255,255,.5)}
.recruit-strip .recruit-flow b{color:#fff}

/* ------------------------------------------------------------------ vidéos */
.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.films.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.film{margin:0;background:var(--paper-3);border:1px solid var(--line);display:flex;flex-direction:column}
.film-media{position:relative;line-height:0}
.film video{width:100%;display:block;object-fit:cover;aspect-ratio:3/4;background:var(--paper-3)}
.film.large video{aspect-ratio:16/9}
.film figcaption{
  padding:16px 18px 20px;background:var(--paper);border-top:1px solid var(--line);
  line-height:1.6;flex:1 1 auto;
}
.film figcaption b{display:block;font-size:.95rem;margin-bottom:5px;font-weight:600}
.film figcaption span{display:block;font-size:.82rem;color:var(--muted);line-height:1.55}
.film-play{
  position:absolute;top:0;left:0;right:0;bottom:0;width:100%;
  background:transparent;border:0;cursor:pointer;padding:0;
  display:grid;place-items:center;
}
.film-play::after{
  content:"";width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.93);
  box-shadow:0 4px 20px rgba(17,21,26,.22);
  transition:transform .25s ease,background-color .25s ease,opacity .25s ease;
}
.film-play span{
  position:absolute;width:0;height:0;
  border-left:15px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;
  margin-left:4px;transition:border-left-color .25s ease,opacity .25s ease;
}
.film-play:hover::after{transform:scale(1.08);background-color:var(--accent)}
.film-play:hover span{border-left-color:#fff}
.film.joue .film-play::after,.film.joue .film-play span{opacity:0}
.film.joue .film-play{background:transparent}
@media (max-width:860px){
  .films,.films.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .films,.films.deux{grid-template-columns:1fr}
}

/* vidéo en pleine largeur dans une section */
.film-bande{margin:0;border:1px solid var(--line);background:var(--paper-3)}
.film-bande video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.film-bande figcaption{padding:14px 2px 0;font-size:.78rem;color:var(--muted)}

/* ------------------------------------------------- blocs texte + image */
.duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,76px);align-items:center;
}
.duo-txt{max-width:52ch}
.duo-txt h2{margin-bottom:.45em;max-width:15ch}
.duo-txt .actions{margin-top:28px}
.duo figure{margin:0}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duo figure.portrait img,.duo img[src*='team-principal']{aspect-ratio:3/4;max-height:600px}
.duo figcaption{margin-top:12px;font-size:.78rem;color:var(--muted)}
.duo.inverse .duo-txt{order:2}
.duo.inverse figure{order:1}
.duo + .duo{margin-top:var(--rythme)}
@media (max-width:860px){
  .duo,.duo.inverse{grid-template-columns:1fr;gap:28px}
  .duo.inverse .duo-txt,.duo.inverse figure{order:initial}
  .duo-txt{max-width:none}
  .duo + .duo{margin-top:clamp(52px,7vw,84px)}
}

/* déclaration pleine largeur, sans image */
.claim{max-width:none}
.claim h2{font-size:var(--titre-2);letter-spacing:-.035em;margin-bottom:0;max-width:18ch}
.claim-txt{max-width:56ch;margin-top:clamp(22px,3vw,34px)}
.claim-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,68px);align-items:start}
@media (max-width:860px){.claim-grid{grid-template-columns:1fr;gap:22px}.claim{max-width:none}}

/* trois images en ligne */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(30px,4vw,48px)}
.trio figure{margin:0}
.trio img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trio figcaption{margin-top:11px;font-size:.78rem;color:var(--muted)}
@media (max-width:760px){.trio{grid-template-columns:1fr}}

/* deux images en vis-à-vis — le dessin et la pièce réelle, même cadrage.
   Les deux sources sont recadrées en 16:9 pour que la comparaison tienne
   sur la voiture et non sur la forme des images. */
.paire{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px);margin-top:clamp(34px,4.6vw,58px);
}
.paire figure{margin:0}
.paire img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--paper-2);
}
.paire figcaption{margin-top:15px}
.paire figcaption b{
  display:block;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:7px;
}
.paire figcaption span{display:block;font-size:.84rem;color:var(--muted);line-height:1.6}
@media (max-width:760px){.paire{grid-template-columns:1fr;gap:28px}}

/* questions fréquentes */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(1rem,1.5vw,1.12rem);font-weight:600;color:var(--ink);
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease,border-color .２s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--accent)}
.faq .faq-rep{padding:0 clamp(40px,8vw,120px) 26px 0;margin:0}
.faq .faq-rep p:last-child{margin-bottom:0}

/* bandeau final avec vidéo */
.closing{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.closing .film{background:var(--paper-2)}
@media (max-width:860px){.closing{grid-template-columns:1fr;gap:28px}}

/* ===================================================== hero plein écran */
.hero-plein{
  position:relative;min-height:100svh;padding:0;overflow:hidden;
  background:var(--nuit);display:flex;flex-direction:column;justify-content:flex-start;
  isolation:isolate;
}
.hero-fond{
  /* photo élargie en amont (etendre_hero.py) : ses côtés et son haut
     prolongent l'image elle-même et se dissolvent progressivement. Une seule
     image, affichée en cover à toutes les largeurs : plus de marge vide sur
     les écrans larges, plus de couture entre la photo et son remplissage. */
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  z-index:-2;
}
.hero-plein::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,18,48,.60) 0%,rgba(11,18,48,.38) 26%,
                    rgba(11,18,48,.10) 50%,rgba(11,18,48,.16) 72%,
                    rgba(11,18,48,.38) 100%);
}
/* Sur téléphone, le titre tombe sur le bardage clair du stand, et le contraste
   mesuré y descendait à 2,74:1 — sous le seuil de 3:1 d'un grand texte. Le
   voile est donc renforcé dans le seul tiers haut, là où se pose le titre :
   les visages, plus bas, ne sont pas assombris. */
@media (max-width:640px){
  .hero-plein::after{
    background:
      linear-gradient(180deg,rgba(11,18,48,.74) 0%,rgba(11,18,48,.62) 30%,
                      rgba(11,18,48,.18) 52%,rgba(11,18,48,.16) 72%,
                      rgba(11,18,48,.38) 100%);
  }
}
.hero-centre{
  /* calé sur la hauteur du HERO, pas sur celle de la fenêtre : si le hero
     dépasse la fenêtre, les visages descendent avec lui et l'écart resterait
     faux. En position absolue, le pourcentage se lit sur le hero. */
  position:absolute;left:0;right:0;top:0;height:34.4%;
  z-index:2;text-align:center;
  /* la photo occupe toute la hauteur du hero ; élargie vers le haut, ses
     visages commencent désormais à 35,1 % de cette hauteur (valeur donnée
     par etendre_hero.py). Le bloc est calé PAR LE BAS à 34,4 svh : quelle
     que soit la fenêtre, il reste la même bande de 0,7 svh entre le
     sous-titre et la première tête. Le padding haut ne sert plus qu'à
     garantir le dégagement sous la barre de navigation. */
  padding:clamp(62px,8vh,94px) var(--pad) 0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  max-width:min(1500px,94vw);margin:0 auto;box-sizing:border-box;
}
.hero-centre>*{width:100%}
.hero-centre h1{
  color:#fff;text-transform:uppercase;
  font-size:var(--titre-0);font-weight:700;
  letter-spacing:-.02em;line-height:1.3;margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
.hero-sous{
  margin:clamp(12px,1.6vw,18px) 0 0;color:rgba(255,255,255,.82);
  font-size:clamp(.7rem,1.1vw,.82rem);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  line-height:1.3;   /* l'interligne du corps (1,7) ajoutait du vide sous les lettres */
}
.hero-centre .actions{justify-content:center;margin-top:clamp(20px,2.6vw,30px)}

/* bouton pilule clair, avec sa pastille fléchée */
.btn-pilule{
  display:inline-flex;align-items:center;gap:16px;
  background:#fff;color:var(--ink);border:1px solid #fff;border-radius:999px;
  padding:9px 9px 9px 30px;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-pilule i{
  width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:.95rem;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.btn-pilule:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-pilule:hover i{background:#fff;color:var(--accent);transform:translate(2px,-2px)}

/* bandeau partenaires posé au bas du hero */
.hero-sponsors{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(22px,3.6vh,40px) 0 clamp(18px,2.6vh,28px);
  /* la photo se fond dans une bande pleine : la limite avec la section
     claire suivante devient un bord net, et non une coupure accidentelle */
  background:linear-gradient(180deg,
    rgba(11,18,48,0) 0%, rgba(11,18,48,.62) 18%,
    rgba(11,18,48,.90) 40%, var(--nuit) 62%, var(--nuit) 100%);
}
.hero-sponsors-label{
  display:block;text-align:center;margin-bottom:clamp(10px,1.4vh,15px);
  font-size:.64rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.marquee.sombre{
  background:transparent;border:0;padding:0;
}
.marquee.sombre .marquee-track{gap:clamp(14px,1.6vw,24px);animation-duration:74s;align-items:center}
/* Chaque partenaire garde SON logo, dans ses couleurs. Posees telles quelles
   sur le bleu nuit, la moitie d'entre elles disparaitraient (encre noire) et
   l'autre moitie trainerait son propre aplat blanc : la plaque claire, egale
   pour tous, les rend lisibles sans toucher au dessin. */
.logo-blanc{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:clamp(54px,5.6vw,74px);width:clamp(136px,14vw,186px);
  padding:11px 17px;background:#fff;border-radius:3px;
  box-shadow:0 2px 12px rgba(0,0,0,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.logo-blanc img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.logo-blanc:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(0,0,0,.36)}
@media (max-width:760px){
  .hero-sous{letter-spacing:.16em}
  .logo-blanc{height:46px;width:118px;padding:8px 12px}
}

/* navigation posée sur la photo d'ouverture — accueil et toute page qui
   s'ouvre sur une bannière photo (classe sur-photo sur <body>). Le menu
   prend la couleur de l'image, puis passe en fond clair au défilement. */
body.sur-photo .nav{
  position:fixed;left:0;right:0;top:0;
  /* voile sombre : le menu blanc reste lisible même si la photo ne charge pas */
  /* Mesuré sur les pixels : au-dessus d'un ciel clair, les liens blancs
     tombaient à 3,13:1. Le voile est renforcé — il reste un dégradé, la photo
     continue de se voir dessous, mais le menu se lit partout. */
  background:linear-gradient(180deg,rgba(11,18,48,.80) 0%,rgba(11,18,48,.52) 58%,rgba(11,18,48,0) 100%);
  /* le dégradé couvre aussi la bordure : sans cela il se répète dans ce
     pixel transparent et dessine un trait sombre sous le menu */
  background-origin:border-box;background-repeat:no-repeat;
  backdrop-filter:none;border-bottom-color:transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
body.sur-photo .nav .nav-links>a{color:#fff}
body.sur-photo .nav .nav-links>a:hover{color:#fff}
body.sur-photo .nav .nav-links>a[aria-current="page"]{color:#fff}
/* Le bouton au contour clair n'avait pas de fond : son libellé blanc se
   mesurait contre le ciel. Un fond sombre translucide le pose, sans masquer
   la photo. */
body.sur-photo .nav .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55);
  background:rgba(11,18,48,.46)}
body.sur-photo .nav .btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
body.sur-photo .nav .burger{color:#fff;border-color:rgba(255,255,255,.45)}
body.sur-photo .nav.fige{
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
body.sur-photo .nav.fige .nav-links>a{color:var(--muted)}
body.sur-photo .nav.fige .nav-links>a:hover,
body.sur-photo .nav.fige .nav-links>a[aria-current="page"]{color:var(--ink)}
body.sur-photo .nav.fige .btn.ghost{color:var(--ink);border-color:var(--line-2);background:transparent}
body.sur-photo .nav.fige .burger{color:var(--ink);border-color:var(--line-2)}
@media (max-width:1279px){
  body.sur-photo .nav .nav-links{background:var(--paper)}
  body.sur-photo .nav .nav-links>a{color:var(--muted)}
  body.sur-photo .nav .nav-links>a:hover{color:var(--ink)}
  /* le lien de la page courante était resté BLANC, hérité du menu posé sur la
     photo : déroulé sur téléphone, il devenait blanc sur blanc, donc invisible */
  body.sur-photo .nav .nav-links>a[aria-current="page"]{color:var(--ink)}
  body.sur-photo .nav .nav-links .btn.ghost{color:var(--ink);border-color:var(--line-2);background:transparent}
}

/* galerie légendée */
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.galerie figure{margin:0;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.galerie img{width:100%;aspect-ratio:3/2;object-fit:cover}
.galerie figcaption{padding:16px 18px 20px;flex:1 1 auto}
.galerie figcaption b{display:block;font-size:.95rem;margin-bottom:5px;font-weight:600}
.galerie figcaption span{display:block;font-size:.82rem;color:var(--muted);line-height:1.6}
@media (max-width:860px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.galerie{grid-template-columns:1fr}}

/* photo pleine largeur, légendée */
.photo-large{margin:0}
.photo-large img{width:100%;height:auto;display:block}
.photo-large figcaption{margin-top:13px;font-size:.8rem;color:var(--muted)}
.photo-large + .photo-large{margin-top:clamp(20px,3vw,36px)}
.duo-photos{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,36px)}

/* ===================================== bannière : titre posé sur l'image */
.banniere{
  position:relative;padding:0;overflow:hidden;background:var(--nuit);
  min-height:clamp(430px,54vw,700px);display:flex;align-items:flex-end;isolation:isolate;
}
.banniere.courte{min-height:clamp(340px,42vw,540px)}
/* bannière d'ouverture : elle occupe tout l'écran, la photo va jusqu'en bas */
.banniere:not(.courte):not(.piste){min-height:100svh}
.banniere>img,.banniere> picture >img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center bottom;z-index:-2}   /* on garde le sol : le texte s'y pose */
.banniere::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* voile concentré en bas : le texte s'y pose sans masquer les visages */
  background:linear-gradient(180deg,
    rgba(11,18,48,.44) 0%, rgba(11,18,48,.20) 32%,
    rgba(11,18,48,.76) 62%, rgba(11,18,48,.94) 100%);
}
.banniere-in{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(120px,16vw,200px) var(--pad) clamp(34px,4.5vw,56px);text-align:center;
}
/* Voile local, derriere la colonne de texte seulement. Le degrade general
   ci-dessus laisse le haut de la photo clair pour ne pas masquer les visages ;
   quand le texte y remonte, le libelle passe sous le seuil de lisibilite.
   Celui-ci assombrit juste ce qu'il faut, et s'eteint avant les bords. */
.banniere-in::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);
  top:clamp(84px,12vw,150px);width:min(100%,960px);
  height:calc(100% - clamp(84px,12vw,150px));
  background:radial-gradient(ellipse 72% 74% at 50% 44%,
    rgba(11,18,48,.56) 0%, rgba(11,18,48,.40) 48%, rgba(11,18,48,0) 80%);
}
@media (max-width:640px){.banniere-in::before{display:none}}
/* Le libelle d'une banniere se presente comme celui de la page « la voiture » :
   le rose de la charte, en lettres espacees, et rien autour. Les deux traits
   qui l'encadraient en faisaient un libelle a part sur la moitie du site. */
.banniere-in .ref{
  display:block;color:var(--accent);
  text-shadow:0 1px 12px rgba(11,18,48,.75);
}
.banniere-in .ref::before,.banniere-in .ref::after{content:none}
.banniere-in h1,.banniere-in h2{color:#fff;margin:0 auto;max-width:var(--titre-ligne)}
.banniere-in h1{font-size:var(--titre-1)}
.banniere-in p{
  color:rgba(255,255,255,.82);margin:clamp(16px,2vw,22px) auto 0;max-width:56ch;
  font-size:clamp(1rem,1.4vw,1.12rem);
}

/* épreuves dynamiques : la donnée d'abord */
.epreuves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.epreuve{background:var(--paper);border:1px solid var(--line);padding:26px 24px 30px;
  display:flex;flex-direction:column;transition:border-color .3s ease,box-shadow .3s ease}
.epreuve:hover{border-color:var(--line-2);box-shadow:0 12px 30px rgba(17,21,26,.07)}
.tint .epreuve{background:var(--paper)}
.epreuve-val{display:block;font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:700;
  letter-spacing:-.04em;color:var(--ink);line-height:1.05}
.epreuve-unite{display:block;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}
.epreuve h3{margin:20px 0 10px;padding-top:18px;border-top:1px solid var(--line);font-size:1.05rem}
.epreuve p{font-size:.88rem;margin:0}
@media (max-width:860px){.epreuves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.epreuves{grid-template-columns:1fr}}

/* coordonnées, pour un partenaire sans site */
.p-contact{
  margin:4px 0 0;font-size:.82rem;color:var(--muted);font-style:normal;
  border-left:2px solid var(--line-2);padding-left:12px;
}

/* le bouton d'appel se pose sur la carrosserie, sous le bloc de titre */
.hero-action{
  /* ancré par le bas : il se pose sur la carrosserie tout en restant
     au-dessus du bandeau partenaires, quelle que soit la hauteur d'écran */
  position:absolute;left:0;right:0;bottom:20%;z-index:3;
  display:flex;justify-content:center;padding:0 var(--pad);
}

/* ===================================================== page compétition */
/* Deux teintes seulement, et elles encodent une identité, pas une valeur :
   rose = épreuve statique, bleu = épreuve dynamique. Le couple a été vérifié
   (écart perceptuel, daltonisme protan/deutan, contraste sur le fond clair) ;
   il porte du texte blanc à 4,9:1 et 7,6:1. Le bleu est celui du logo
   (#002395), éclairci d'un cran pour rester lisible comme trait de
   graphique ; le rose est celui de l'EIGSI. Voir README.txt. */
:root{ --sta:#D40044; --dyn:#3A2299; }

/* bandeau d'ouverture : la photo, puis quatre chiffres posés dessus */
.banniere.piste{min-height:clamp(520px,64vw,820px)}
.banniere.piste > img,.banniere.piste > picture > img{object-position:center 42%}
/* cette photo est claire en son centre (la foule en plein soleil) : le voile
   par défaut, creusé au milieu, n'y suffit pas pour porter du texte */
.banniere.piste::after{
  background:
    radial-gradient(112% 76% at 50% 66%, rgba(11,18,48,.72) 0%,
                    rgba(11,18,48,.40) 48%, rgba(11,18,48,0) 100%),
    linear-gradient(180deg, rgba(11,18,48,.50) 0%, rgba(11,18,48,.26) 30%,
                    rgba(11,18,48,.58) 70%, rgba(11,18,48,.92) 100%);
}
.banniere-chiffres{
  list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.6vw,20px);
  border-top:1px solid rgba(255,255,255,.22);padding-top:clamp(20px,2.6vw,30px);
}
.banniere-chiffres b{
  display:block;color:#fff;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1;
}
.banniere-chiffres span{
  display:block;margin-top:9px;font-size:.62rem;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
@media (max-width:620px){
  .banniere-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
}

/* ---- le barème -------------------------------------------------------- */
.bareme{margin-top:clamp(8px,1.4vw,18px)}

/* part-à-tout : deux segments séparés par 2 px de fond, jamais par un trait */
.part{display:flex;gap:2px;height:clamp(92px,11vw,124px)}
.part-seg{
  flex:0 0 var(--part);display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(16px,2vw,26px);min-width:0;color:#fff;
}
.part-seg.sta{background:var(--sta)}
.part-seg.dyn{background:var(--dyn);border-radius:0 4px 4px 0}
/* b hérite de l'encre sombre par défaut : on la reprend, le segment est plein */
.part-seg b{
  color:#fff;font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;
  letter-spacing:-.035em;line-height:1;
}
.part-seg i{
  display:block;margin-top:8px;font-style:normal;font-size:.62rem;
  /* blanc plein : à 88 % d'opacité le libellé tombait à 3,98:1 sur le rose */
  letter-spacing:.17em;text-transform:uppercase;color:#fff;
}

.legende{
  display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,32px);
  margin-top:clamp(18px,2.2vw,26px);font-size:.8rem;color:var(--body);
}
.legende span{display:flex;align-items:center;gap:9px}
.pastille{width:11px;height:11px;flex:0 0 11px;border-radius:50%;display:inline-block}
.pastille.sta{background:var(--sta)}
.pastille.dyn{background:var(--dyn)}

/* barres par épreuve : la longueur dit la valeur, la teinte dit la famille */
.barres{margin-top:clamp(26px,3.4vw,40px);border-top:1px solid var(--line)}
.bar-ligne{
  display:grid;grid-template-columns:minmax(0,20ch) minmax(0,1fr) 5ch;
  align-items:center;gap:clamp(12px,2vw,24px);
  padding:clamp(11px,1.5vw,15px) 0;border-bottom:1px solid var(--line);
}
.bar-nom{font-size:.9rem;color:var(--ink);font-weight:500}
.bar-piste{display:block;height:14px;background:var(--line);min-width:0}
.bar-trait{
  display:block;height:100%;width:var(--part);position:relative;
  border-radius:0 4px 4px 0;transition:filter .2s ease;
}
.bar-trait.sta{background:var(--sta)}
.bar-trait.dyn{background:var(--dyn)}
.bar-trait:hover{filter:brightness(1.12)}
.bar-trait:hover::after{
  content:attr(data-info);position:absolute;left:0;top:calc(100% + 9px);z-index:6;
  background:var(--ink);color:#fff;font-size:.75rem;line-height:1.5;font-weight:400;
  padding:10px 13px;width:max-content;max-width:min(340px,72vw);
  box-shadow:0 12px 30px rgba(17,21,26,.2);pointer-events:none;
}
.bar-val{
  text-align:right;font-size:.95rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .bar-ligne{grid-template-columns:minmax(0,1fr) 5ch;gap:6px 14px}
  .bar-nom{grid-column:1;font-size:.84rem}
  .bar-val{grid-column:2;grid-row:1}
  .bar-piste{grid-column:1 / -1}
}

.tableau-brut{margin-top:clamp(24px,3vw,34px)}
.tableau-brut summary{
  cursor:pointer;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:12px 0;
}
.tableau-brut summary:hover{color:var(--ink)}
.tableau-brut .table-scroll{margin-top:6px}

/* ---- le déroulé de la semaine ----------------------------------------- */
.etapes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.etapes li{
  background:var(--paper);padding:clamp(22px,2.6vw,30px) clamp(18px,2vw,26px) clamp(26px,3vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.etape-n{
  font-size:.66rem;letter-spacing:.17em;color:var(--accent);font-weight:700;
}
.etapes h3{margin:0;font-size:1rem;letter-spacing:-.01em}
.etapes p{margin:0;font-size:.85rem;color:var(--body);line-height:1.6}
@media (max-width:1000px){.etapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.etapes{grid-template-columns:1fr}}

/* ---- cartes des épreuves dynamiques ----------------------------------- */
.epreuve-pts{
  align-self:flex-start;margin-top:14px;padding:5px 10px;background:var(--dyn);
  color:#fff;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}

/* ---- relevé de scrutineering ------------------------------------------ */
.releve{margin-top:clamp(46px,6vw,80px)}
.releve-head{max-width:62ch;margin-bottom:clamp(22px,2.8vw,32px)}
.releve-head h3{margin:.5em 0 .45em;font-size:clamp(1.25rem,2.1vw,1.6rem);letter-spacing:-.02em}
.releve-head p{margin:0;color:var(--body)}

/* ===================================================== fiches membres */
/* grille : la carte vedette est plus large et plus haute, les autres
   s'alignent en haut à côté d'elle */
/* quatre colonnes égales : la carte mise en avant en occupe deux. Avec une
   première colonne plus large, la fiche qui retombait dessus à la ligne
   suivante prenait la taille de la carte vedette. */
.membres{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);align-items:start;
}
.membre.vedette{grid-column:span 2}
.membre{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(17,21,26,.04);
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.membre:hover{box-shadow:0 16px 38px rgba(17,21,26,.09);transform:translateY(-3px);border-color:var(--line-2)}
.membre-photo{aspect-ratio:4/5;background:var(--paper-3);overflow:hidden}
/* la carte vedette est deux fois plus large : à format de photo égal, elle
   serait deux fois plus haute et laisserait un vide sous les deux fiches
   posées à côté d'elle. Un cadrage panoramique lui donne la hauteur des
   autres, et la ligne se referme. */
/* Le portrait disponible ne fait que 528 px de large. Étalé sur toute la
   largeur d'une carte double, il était agrandi d'un facteur deux sur un écran
   haute densité — et cela se voyait. La carte garde sa place, la photo garde
   sa taille. Dès qu'un portrait plus défini sera fourni, cette limite saute. */
.membre.vedette .membre-photo{aspect-ratio:16/9;max-width:528px}
.membre-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.membre.vedette .membre-photo img{object-position:center 12%}
/* une seule colonne : la pastille de fonction est posée AU-DESSUS du nom.
   Côte à côte, une fonction longue laissait au nom une colonne si étroite
   qu'il débordait et passait sous la pastille. */
.membre-corps{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:clamp(18px,1.8vw,24px) clamp(18px,1.8vw,26px) clamp(20px,2vw,28px);
}
.membre-nom{
  margin:0;font-size:clamp(1.05rem,1.35vw,1.28rem);font-weight:600;
  letter-spacing:-.015em;line-height:1.2;color:var(--ink);
}
.membre.vedette .membre-nom{font-size:clamp(1.2rem,1.7vw,1.55rem)}
.membre-badge{
  order:-1;                      /* la fonction d'abord, le nom ensuite */
  background:var(--ink);color:#fff;border-radius:999px;
  padding:4px 11px;font-size:.68rem;font-weight:600;letter-spacing:.02em;line-height:1.35;
  max-width:100%;
}
.membre-mission{margin:0;font-size:.84rem;line-height:1.55;color:var(--body)}
.membre-mail{
  max-width:100%;font-size:.84rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.membre-mail:hover{color:var(--accent)}
.membre-pole{
  margin-top:4px;
  background:var(--accent);color:#fff;border-radius:999px;
  padding:6px 14px;font-size:.76rem;font-weight:600;line-height:1.3;
}
/* carte d'appel : pas de portrait, un panneau bleu nuit sur deux colonnes.
   Six fiches dont une double font sept colonnes sur une grille de quatre :
   la septième laissait une case vide en bout de deuxième ligne. En faisant
   de l'appel à candidatures un panneau double, la grille tombe juste — et
   l'invitation à rejoindre l'équipe gagne la place qu'elle mérite. */
.membre.appel{
  grid-column:span 2;align-self:stretch;color:inherit;border-color:transparent;
  background:linear-gradient(140deg,var(--nuit) 0%,#1B2A6B 100%);
  justify-content:center;
}
.membre.appel .membre-photo{display:none}
.membre.appel .membre-corps{justify-content:center;gap:14px;padding:clamp(26px,3vw,40px)}
.membre.appel .membre-nom{color:#fff;font-size:clamp(1.25rem,1.9vw,1.7rem)}
.membre.appel .membre-mission{color:#DDE3F2;font-size:.92rem;max-width:36ch}
.membre.appel .membre-pole{background:var(--accent);color:#fff}
.membre.appel:hover .membre-pole{background:#fff;color:var(--nuit)}
@media (max-width:1000px){
  .membres{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* la carte vedette passe en largeur : photo à gauche, texte à droite */
  .membre.vedette{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  /* carré plutôt que le format d'origine du fichier : la fiche reste large
     sans devenir un pavé, et le texte n'a plus à flotter dans le vide */
  .membre.vedette .membre-photo{aspect-ratio:1/1;min-height:100%}
  .membre.vedette .membre-corps{justify-content:center}
}
@media (max-width:680px){
  .membres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .membres{grid-template-columns:minmax(0,1fr)}
  .membre.appel{grid-column:auto}
  .membre.vedette{display:flex}
  .membre.vedette .membre-photo{aspect-ratio:4/5;min-height:0}
  /* sur téléphone, les autres fiches passent à l'horizontale : la
     silhouette ne prend plus tout l'écran */
  .membres:not(.pilotes) .membre:not(.vedette){display:grid;grid-template-columns:34% minmax(0,1fr)}
  .membres:not(.pilotes) .membre:not(.vedette) .membre-photo{aspect-ratio:auto;min-height:100%}
  .membres:not(.pilotes) .membre:not(.vedette) .membre-corps{padding:16px 16px 18px;justify-content:center}
}

/* ===================================================== page pilotes */
.membres.pilotes{grid-template-columns:repeat(5,minmax(0,1fr))}
.membre.pilote .membre-photo{aspect-ratio:3/4}
.membre.pilote .membre-photo img{object-position:center top}
@media (max-width:1000px){.membres.pilotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.membres.pilotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* sur téléphone, les fiches pilotes restent verticales : la photo est leur
   seul trait distinctif tant que les noms ne sont pas renseignés */
@media (max-width:460px){
  .membres.pilotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .membres.pilotes .membre{display:flex}
  .membres.pilotes .membre-photo{aspect-ratio:3/4;min-height:0}
  .membres.pilotes .membre-corps{padding:14px 14px 16px}
}

/* quatre conditions : même gabarit que le déroulé de la semaine */
.etapes.quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.etapes.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.etapes.quatre{grid-template-columns:1fr}}
#conditions .source-note,#evacuation .source-note{margin:18px 0 0}

/* fiche technique en liste de définitions */
.fiche{margin:26px 0 0;border-top:1px solid var(--line)}
.fiche>div{
  display:grid;grid-template-columns:minmax(0,13ch) minmax(0,1fr);gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.fiche dt{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:3px}
.fiche dd{margin:0;color:var(--ink);font-size:.92rem}
#cockpit .source-note{margin:14px 0 0}

/* appel final */
.cta-simple{
  display:grid;grid-template-columns:minmax(0,1.3fr) auto;align-items:end;
  gap:clamp(24px,4vw,56px);padding-top:clamp(30px,4vw,48px);border-top:1px solid var(--line);
}
.cta-simple h2{max-width:18ch}
.cta-simple p{margin:0;max-width:56ch}
@media (max-width:760px){.cta-simple{grid-template-columns:1fr}}

/* bandeau de renvoi vers une autre page */
.banniere.renvoi .actions{justify-content:center;margin-top:clamp(20px,2.4vw,28px)}

/* ===================================================== scrutineering reformulé */
.plate.scrut-plate{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-bottom:clamp(40px,5vw,64px)}
@media (max-width:860px){
  .plate.scrut-plate{grid-template-columns:1fr 1fr}
  .plate.scrut-plate>div:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
}
.scrut-contexte{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px);align-items:start;margin-bottom:clamp(40px,5vw,64px);
}
.scrut-texte h3{margin:0 0 .7em;font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.02em}
.scrut-texte p{color:var(--body)}
.graphe-titre{
  margin:0 0 4px;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.scrut-graphe .barres{margin-top:12px}
.scrut-graphe .bar-ligne{grid-template-columns:minmax(0,11ch) minmax(0,1fr) 4ch}
/* une seule série : une seule teinte, neutre, pour ne pas se confondre avec
   le rose et le bleu du barème qui ont un sens sur cette même page */
.bar-trait.champ{background:var(--ink)}
@media (max-width:860px){.scrut-contexte{grid-template-columns:1fr}}
@media (max-width:640px){.scrut-graphe .bar-ligne{grid-template-columns:minmax(0,1fr) 4ch}}

.nc-table td{vertical-align:top}
.nc-table td b{display:block;margin-bottom:5px}
.nc-constat{display:block;font-size:.84rem;color:var(--muted);line-height:1.55}
.nc-nature{
  display:table;margin:0 0 8px;padding:3px 9px;border-radius:999px;
  background:var(--paper-3);color:var(--ink);font-size:.64rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.nc-table td:last-child{min-width:22ch}
.scrut-section .source-note,.releve .source-note{margin:16px 0 0}

.scrut-suite{margin:22px 0 0}
.lien-fleche{
  display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line-2);padding-bottom:6px;transition:color .2s ease,border-color .2s ease;
}
.lien-fleche:hover{color:var(--accent);border-color:var(--accent)}
.lien-fleche i{font-style:normal}
.releve{margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}

/* bannières sur téléphone : la photo d'abord, le texte dessous. Posé sur
   une photo aussi étroite, le titre recouvrait les visages et le libellé
   passait sur des zones trop claires pour rester lisible. */
@media (max-width:640px){
  .banniere,.banniere.courte,.banniere.piste{display:block;min-height:0}
  .banniere>img,.banniere> picture >img{
    position:relative;inset:auto;z-index:0;height:auto;aspect-ratio:5/4;
    object-position:center 72%;
  }
  .banniere::after{display:none}
  .banniere-in{padding:clamp(24px,7vw,34px) var(--pad) clamp(34px,9vw,46px)}
  .banniere-in h1{font-size:clamp(1.8rem,8.4vw,2.3rem)}
}

/* ===================================================== accueil : pièce par pièce */
/* la vidéo de l'éclaté en grand, la voiture assemblée posée en médaillon
   dans l'angle : on lit l'avant et l'après d'un seul regard */
.assemblage{position:relative}
.assemblage figure{margin:0}
.assemblage-video video{
  display:block;width:100%;aspect-ratio:1180/698;object-fit:cover;background:#ECECEC;
}
.assemblage-video figcaption{
  margin-top:12px;font-size:.78rem;color:var(--muted);
}
/* La vue où l'on lit les logos des partenaires sur la carrosserie était un
   médaillon de 252 px, puis de 314 : dans les deux cas on ne lisait rien. Or
   c'est la seule image du site qui montre ce qu'une entreprise vient y
   chercher. Elle quitte donc l'incrustation et prend toute la largeur du
   bloc, sous la vue éclatée — quatre fois plus grande. */
.photo-large{margin:clamp(34px,4.4vw,58px) 0 0}
.photo-large img{width:100%}
/* la voiture de profil n'a pas besoin de toute la largeur : a cette taille on
   lit deja les logos sur les flancs, et elle n'ecrase plus le texte voisin */
.photo-large.moyenne{max-width:860px;margin-left:auto;margin-right:auto}
.photo-large figcaption{
  margin-top:12px;font-size:.84rem;line-height:1.5;color:var(--muted);max-width:68ch;
}
@media (max-width:900px){
  .assemblage{padding-bottom:0;display:grid;gap:22px}
  .assemblage-video figcaption{padding-left:0;text-align:left}
}

/* photo d'équipe au complet : on la montre en large, personne n'est coupé */
.duo figure.panoramique img{aspect-ratio:16/9}

/* ===================================================== nos saisons */
.heritage-panel[hidden]{display:none}
.heritage-panel figure{margin:0}
.heritage-panel figcaption{margin-top:10px;font-size:.78rem;color:var(--muted)}
.saison-chiffres{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0 0;
  border-top:1px solid var(--line-2);
}
.saison-chiffres>div{padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.saison-chiffres>div:nth-child(odd){border-right:1px solid var(--line);padding-right:14px}
.saison-chiffres>div:nth-child(even){padding-left:16px}
.saison-chiffres dt{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600}
.saison-chiffres dd{margin:6px 0 0;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.heritage-panel .source-note{margin:14px 0 0;font-size:.76rem;line-height:1.55}
.heritage-panel .actions{margin-top:22px}

/* ===================================================== la voiture : ouverture */
/* titre de page centré et maquette numérique sur le même écran */
.explorer-ouverture{padding-top:clamp(34px,4.4vw,64px);padding-bottom:clamp(56px,7vw,100px)}
.titre-page{text-align:center;max-width:860px;margin:0 auto clamp(24px,3vw,40px)}
.titre-page .ref{margin-bottom:.9rem}
.titre-page h1{font-size:var(--titre-1);margin:0 auto .32em;max-width:var(--titre-ligne)}
.titre-page p{margin:0 auto;max-width:62ch;color:var(--body);font-size:clamp(.95rem,1.25vw,1.05rem)}
/* la maquette se cale en haut, juste sous le titre, et prend la plus large
   colonne : c'est elle qu'on regarde en premier */
.explorer-ouverture .split.wide{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.explorer-ouverture .split.wide{grid-template-columns:1fr}}

/* l'équipe au complet : photo pleine largeur, pour que chacun reste visible */
.equipe-large{padding-bottom:0}
.equipe-texte{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,5vw,72px);align-items:start;margin-bottom:clamp(32px,4vw,52px);
}
.equipe-texte h2{margin-bottom:0;max-width:14ch}
.equipe-texte p{max-width:60ch}
.equipe-photo{margin:0}
.equipe-photo img{display:block;width:100%;height:clamp(300px,46vw,720px);object-fit:cover;object-position:center 58%}
.equipe-photo figcaption{padding-top:12px;padding-bottom:clamp(56px,7vw,100px);font-size:.78rem;color:var(--muted)}
@media (max-width:860px){.equipe-texte{grid-template-columns:1fr}}

/* ===================================================== ingénierie : la méthode */
/* titre au centre, posé sur une photo d'atelier, les cinq étapes dessous :
   la démarche tient sur un seul écran */
.methode{
  position:relative;padding:0;overflow:hidden;background:var(--nuit);
  min-height:100svh;display:flex;align-items:center;isolation:isolate;
}
.methode>img,.methode> picture >img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;z-index:-2;
}
.methode::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(11,18,48,.52) 0%, rgba(11,18,48,.82) 62%, rgba(11,18,48,.94) 100%),
    linear-gradient(180deg, rgba(11,18,48,.72) 0%, rgba(11,18,48,.55) 30%, rgba(11,18,48,.9) 100%);
}
.methode-in{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(96px,12vh,150px);padding-bottom:clamp(44px,6vh,80px);
}
.methode-titre{text-align:center;max-width:none;margin:0 auto clamp(34px,5vh,64px)}
/* la phrase fait presque exactement la largeur du bloc : on lui rend la
   moitie de la gouttiere, sinon elle se casse en deux juste avant 1280px. */
@media (min-width:1000px){
  .methode-titre{width:96vw;max-width:1700px;margin-inline:auto;
    position:relative;left:50%;transform:translateX(-50%)}
  /* trente-huit caracteres : c'est le titre le plus long du site. Il garde
     sa ligne unique, au prix d'un corps un peu moindre que les autres. */
  .methode-titre h1{font-size:min(var(--titre-1),4.6vw)}
}
/* « La methode, pas seulement le resultat. » tient sur UNE ligne : c'est une
   phrase, elle se lit d'un trait. La bride de 17ch la cassait en trois. */
.methode-titre h1{max-width:none;margin-inline:auto;text-wrap:balance}
.methode-titre .ref{color:var(--accent-nuit)}
.methode-titre h1{color:#fff;font-size:var(--titre-1)}
.methode-titre p{
  color:rgba(255,255,255,.84);margin:clamp(16px,2vh,24px) auto 0;max-width:46ch;
  font-size:clamp(.98rem,1.35vw,1.1rem);
}
.methode-etapes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);
}
.methode-etapes li{
  background:rgba(11,18,48,.66);backdrop-filter:blur(6px);
  padding:clamp(20px,2.4vw,28px) clamp(16px,1.8vw,24px) clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:12px;
}
.methode-etapes .etape-n{color:#9FC0FF;font-size:.68rem;letter-spacing:.18em;font-weight:700}
.methode-etapes h2{color:#fff;font-size:clamp(1rem,1.5vw,1.2rem);margin:0}
.methode-etapes p{color:rgba(255,255,255,.82);font-size:.85rem;line-height:1.6;margin:0}
@media (max-width:1000px){
  .methode{min-height:0;padding:0 0 clamp(40px,6vw,60px)}
  .methode-etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.methode-etapes{grid-template-columns:1fr}}

/* ===================================================== organigrammes */
.orga{border-top:1px solid var(--line-2);padding-top:clamp(26px,3vw,38px);margin-top:clamp(34px,4vw,54px)}
.orga:first-of-type{margin-top:0}
.orga-tete{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);
  align-items:start;margin-bottom:clamp(24px,3vw,36px);
}
.orga-tete h3{font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em;margin:0 0 .5em}
.orga-tete p{margin:0;max-width:62ch;color:var(--body);font-size:.92rem}
.orga-chef{display:flex;align-items:center;gap:14px;white-space:nowrap}
.orga-chef b{display:block;color:var(--ink);font-size:.98rem;font-weight:600}
/* ce libellé ne vise QUE la fonction, pas la pastille d'initiales : en
   visant span, l'encre rose passait aussi sur la pastille rose */
.orga-chef>div span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-top:3px}
.jeton{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;background:var(--nuit);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.03em;
}
.jeton.grand{width:54px;height:54px;font-size:1rem;background:var(--accent)}
/* Les cinq branches n'ont pas le même nombre de pôles : sept pour la technique,
   un seul pour le Business Plan. Une grille à six colonnes fixes laissait donc
   de grands pavés gris — le fond du conteneur, qui servait à dessiner les
   filets. Les colonnes s'ajustent désormais au nombre de pôles, et le filet est
   porté par chaque case : une cellule vide n'existe plus. */
.orga-poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:transparent}
.orga-pole{background:var(--paper);padding:20px 18px 24px;
  box-shadow:0 0 0 1px var(--line)}
.tint .orga-pole{background:var(--paper-2)}
.orga-pole h4{color:var(--ink);font-size:.68rem;letter-spacing:.15em;margin-bottom:16px}
.orga-pole ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.orga-pole li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--ink);line-height:1.35}
.orga-pole li.vide{color:var(--muted)}
.orga-pole li.vide .jeton{background:var(--paper-3);color:var(--muted)}
@media (max-width:1100px){.orga-poles{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}}
@media (max-width:760px){
  .orga-tete{grid-template-columns:1fr}
  .orga-poles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:460px){.orga-poles{grid-template-columns:1fr}}

/* ===================================================== page partenaires */
.partenaires-ouverture{min-height:clamp(480px,58vw,760px)}
.partenaires-ouverture>img,.partenaires-ouverture> picture >img{object-position:center 38%}
/* mur de logos : des plaques plus grandes, qui réagissent au survol */
.wall{gap:14px}
.wall .tuile{padding:22px 20px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.wall .tuile:hover{border-color:var(--line-2);box-shadow:0 14px 30px rgba(17,21,26,.09);transform:translateY(-2px)}
.wall .tuile img{max-height:64px}
@media (max-width:760px){.wall .tuile img{max-height:48px}}

/* ===================================================== page nous soutenir */
.soutien-ouverture{min-height:clamp(460px,54vw,700px)}
.soutien-ouverture>img,.soutien-ouverture> picture >img{object-position:center 46%}
.head.centre{max-width:62ch;margin-left:auto;margin-right:auto;text-align:center}
.head.centre h2{max-width:31ch;margin-left:auto;margin-right:auto}
.head.centre p{margin-left:auto;margin-right:auto}

/* les deux entrées : entreprise ou particulier */
.choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.choix-carte{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;color:inherit;
  box-shadow:0 1px 2px rgba(17,21,26,.04);
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;
}
.choix-carte:hover{box-shadow:0 20px 44px rgba(17,21,26,.11);transform:translateY(-3px);border-color:var(--line-2)}
.choix-carte img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.choix-corps{padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px) clamp(26px,3vw,34px)}
.choix-tag{
  display:inline-block;background:var(--nuit);color:#fff;border-radius:999px;
  padding:5px 13px;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.choix-corps h3{margin:14px 0 10px;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em}
.choix-corps p{margin:0;color:var(--body);font-size:.92rem}
.choix-lien{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.choix-carte:hover .choix-lien{gap:14px}
.choix-lien i{font-style:normal;transition:transform .25s ease}
@media (max-width:760px){.choix{grid-template-columns:1fr}}

/* ce que finance un don */
.liste-points{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:10px}
.liste-points li{position:relative;padding-left:24px;font-size:.92rem;color:var(--body)}
.liste-points li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  background:var(--accent);border-radius:50%;
}
/* QR de la collecte */
.duo figure.qr{display:flex;flex-direction:column;align-items:center;justify-content:center}
.duo figure.qr img{
  width:min(300px,100%);aspect-ratio:1;object-fit:contain;background:#fff;
  border:1px solid var(--line);padding:14px;border-radius:12px;
}
.duo figure.qr figcaption{margin-top:14px;text-align:center;max-width:34ch;font-size:.82rem;color:var(--muted)}

/* dossier de partenariat à télécharger */
.dossier{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(22px,3.4vw,52px);align-items:center;
  margin-top:clamp(34px,4.4vw,58px);padding-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--line);
}
.dossier-vue{display:block;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.dossier-vue img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .4s ease;
}
.dossier-vue:hover img{transform:scale(1.03)}
.dossier-txt h3{margin:0 0 .5em;font-size:clamp(1.25rem,2.1vw,1.7rem);letter-spacing:-.02em}
.dossier-txt p{margin:0 0 1em;color:var(--body)}
.dossier-txt .actions{margin-top:22px}
.dossier-txt .note{margin:14px 0 0}
@media (max-width:760px){.dossier{grid-template-columns:1fr}}

/* ------------------------------------------------- logo détouré, deux fonds
   Le fichier d'origine porte un aplat blanc à l'intérieur de l'écusson : posé
   sur une photo, il formait une pastille claire. Deux versions détourées le
   remplacent, et le menu prend celle qui convient au fond qu'il a derrière. */
.brand-logo img{height:34px;width:auto;display:block}
/* La bascule doit peser plus lourd que la regle ci-dessus : sinon display:block
   l'emporte sur display:none et les DEUX marques s'affichent cote a cote. */
.brand-logo img.logo-claire{display:none}
body.sur-photo .nav .brand-logo img.logo-sombre{display:none}
body.sur-photo .nav .brand-logo img.logo-claire{display:block}
body.sur-photo .nav.fige .brand-logo img.logo-sombre{display:block}
body.sur-photo .nav.fige .brand-logo img.logo-claire{display:none}

/* ------------------------------------------------- l'adresse en pied de page
   On cherche un contact en bas de page, pas au fond d'un formulaire. */
.foot-contact{margin-top:22px}
.foot-contact span{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.foot-contact a{
  /* une adresse est un seul mot très long : sans coupure autorisée, elle
     élargit la page entière sur un petit téléphone */
  display:inline-block;max-width:100%;overflow-wrap:anywhere;
  font-size:clamp(.9rem,3.4vw,1.02rem);font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--accent);padding-bottom:2px;
  transition:color .2s ease;
}
.foot-contact a:hover{color:var(--accent)}

/* une adresse électronique est un seul mot, parfois plus large qu'un petit
   téléphone : on l'autorise à se couper partout plutôt qu'à élargir la page */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}

/* ===================================================== packs de dons (atelier)
   Une carte par équipement : le prix se lit avant le texte, parce que c'est
   la première question qu'on se pose. */
.packs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,3vw,36px);
}
.pack{
  display:flex;flex-direction:column;gap:10px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:22px 24px 24px;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.pack:hover{border-color:var(--line-2);box-shadow:0 12px 30px rgba(17,21,26,.08);transform:translateY(-2px)}
.pack-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pack-ref{
  font-size:.64rem;font-weight:700;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.pack-prix{
  font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pack-prix.nature{font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);white-space:normal;text-align:right}
.pack h3{margin:0;font-size:1.02rem;line-height:1.3}
.pack p{margin:0;font-size:.88rem;line-height:1.55;color:var(--body);flex:1}
.pack .actions{margin-top:6px}
.pack .btn{width:100%;justify-content:center}

/* la phrase d'accroche partenariat, sous chaque liste */
.notice.accroche{margin-top:clamp(22px,2.6vw,30px);font-size:.95rem}

/* les quatre niveaux d'urgence */
.legende-prio{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(22px,2.6vw,30px);
}
.legende-prio>div{border-top:2px solid var(--accent);padding-top:16px}
.legende-prio b{
  display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.02em;
  line-height:1;color:var(--accent);
}
.legende-prio span{
  display:block;margin-top:8px;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.legende-prio p{margin:8px 0 0;font-size:.86rem;line-height:1.5;color:var(--body)}

/* le don libre, à côté du principe */
.don-libre{
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px;
  align-items:flex-start;height:100%;justify-content:center;
}
.don-libre h3{margin:0;font-size:1.3rem}
.don-libre p{margin:0;font-size:.92rem;line-height:1.55;color:var(--body)}
.don-libre img{width:118px;height:auto;margin-top:6px;border-radius:8px}

/* ---- grille des formules de partenariat -------------------------------- */
/* Le même tableau que la page 08 du dossier de partenariat. Les deux supports
   lisent offres_data.py : si un montant change, il change ici aussi. */
.formules{min-width:720px}
.formules thead th{
  text-align:center;padding:18px 14px;font-size:1.05rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:800;color:var(--ink);
  border-bottom:2px solid var(--line-2);vertical-align:top;
}
.formules thead th span{
  display:block;margin-top:5px;font-size:1rem;font-weight:800;letter-spacing:0;
  text-transform:none;color:var(--accent);
}
.formules thead th em{
  display:block;margin-top:7px;font-size:.66rem;font-style:normal;font-weight:500;
  letter-spacing:.02em;text-transform:none;color:var(--muted);line-height:1.35;
}
.formules tbody th{
  text-align:left;padding:15px 18px;font-size:.94rem;font-weight:700;color:var(--ink);
  letter-spacing:0;text-transform:none;
}
.formules tbody td{text-align:center;padding:15px 14px}
.formules .oui{color:var(--accent);font-size:1.25rem;font-weight:800;line-height:1}
.formules .non{color:var(--muted);font-size:1.05rem;line-height:1}
.formules .val{font-weight:800;color:var(--ink)}
.formules tbody tr:nth-child(even){background:var(--paper-2)}

/* ---- trois étapes ------------------------------------------------------ */
.etapes.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.etapes.trois{grid-template-columns:1fr}}

/* ---- les trois bénéfices, mêmes termes que le dossier ------------------ */
.benef-site .etape-n{display:block;margin-bottom:10px}
ul.puces-site{list-style:none;margin:16px 0 0;padding:0}
ul.puces-site li{
  position:relative;padding-left:18px;margin-bottom:8px;
  font-size:.86rem;line-height:1.5;color:var(--muted);
}
ul.puces-site li:last-child{margin-bottom:0}
ul.puces-site li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  background:var(--accent);
}
.formules thead td{border-bottom:2px solid var(--line-2)}

/* ---- la charte appliquée aux titres ------------------------------------ */
/* Anton pour h1 et h2 : ce sont les titres que l'on voit de loin. h3 et h4
   restent en Montserrat — ils accompagnent du texte courant, et une capitale
   condensée y serait plus bruyante que lisible. Anton n'a qu'une graisse et
   une chasse étroite : d'où font-weight 400, un interlettrage rendu à zéro
   (le resserrage de Montserrat l'écraserait) et des tailles relevées. */
/* L'interligne était à 1,02. Sur un titre d'une seule ligne, c'est juste
   serré ; sur deux lignes, et en français, c'est faux : l'accent du É, celui
   du À et la cédille du Ç sortent de la boîte de la capitale et viennent
   toucher la ligne du dessus. Mesuré sur les pixels rendus, il ne restait
   aucun blanc entre les lignes de huit titres de page. 1,30 suffit à rendre
   leur place aux accents sans délier le bloc. */
h1,h2{
  font-family:Saira,Montserrat,sans-serif;font-weight:700;
  letter-spacing:-.022em;line-height:1.16;text-transform:uppercase;
}
h1{font-size:var(--titre-1)}
h2{font-size:var(--titre-2);margin-bottom:.5em}
.pagehead h1,.banniere h1,.hero-centre h1{letter-spacing:-.024em}
/* le filet et les pastilles reprennent l'inclinaison du logo */
.ref::after,.etape-n::after{content:none}
.btn{letter-spacing:.12em}

/* ---- accueil : les neuf étapes en frise -------------------------------- */
/* Neuf colonnes égales : le centre de chaque mot tombe au 1/18e près, ce qui
   permet à la flèche de retour de partir sous « Recommencer » et d'arriver
   pile sous « Besoin ». */
.frise{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));max-width:none;
  font-size:clamp(.74rem,1.1vw,1.1rem);letter-spacing:.01em;line-height:1.15;
  text-align:center;margin:clamp(16px,2vw,24px) 0 0;
}
.frise>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 6px}
.frise i{
  font-style:normal;font-family:Montserrat,sans-serif;font-size:.64rem;
  letter-spacing:.18em;color:var(--accent);font-weight:700;
}
/* un chevron entre deux étapes */
.frise>span+span::before{
  content:"";position:absolute;left:0;bottom:.38em;width:7px;height:7px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:translateX(-50%) rotate(45deg);
}
/* la flèche de retour : un U qui part sous la 9e étape et remonte sous la 1re */
.frise-retour{
  position:relative;margin:16px calc(100% / 18) 0;height:30px;max-width:none;
  border:2px solid var(--accent);border-top:0;border-radius:0 0 16px 16px;
}
.frise-retour::before{
  content:"";position:absolute;left:-1px;top:-11px;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:11px solid var(--accent);
}
.frise-retour span{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  background:var(--paper-2);padding:0 14px;white-space:nowrap;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.mission-duo{margin-top:clamp(40px,5vw,64px)}
/* la frise déborde un peu de la colonne de texte : neuf mots en capitales
   ont besoin de toute la largeur de l'écran pour respirer */
@media (min-width:901px){
  .frise-bloc{width:min(1500px,96vw);position:relative;left:50%;transform:translateX(-50%)}
}
@media (max-width:900px){
  .frise{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px;font-size:clamp(.72rem,3.3vw,.98rem)}
  .frise>span{padding:0 2px}
  .frise>span:nth-child(3n+1)::before{content:none}
  .frise-retour{margin:22px 0 0;height:auto;border:0;text-align:center}
  .frise-retour::before{content:none}
  .frise-retour span{position:static;transform:none;padding:0;white-space:normal}
  .frise-retour span::before{content:"\21BA\00a0";font-size:1.1em}
}

/* ---- deux images en vis-à-vis : jamais rognées ------------------------- */
/* Les deux images sont en 3:2 : la photo l'est d'origine, et le fond du
   rendu a été prolongé pour qu'il le soit aussi. Rien n'est coupé, le nez
   de la voiture compris. */
.paire img{aspect-ratio:3/2;object-fit:contain}

/* ---- ingénierie : les histoires ----------------------------------------- */
.story-texte h3{font-size:1rem;letter-spacing:-.005em;margin:26px 0 8px}
.story-texte h3:first-child{margin-top:0}
/* l'histoire sans image prend toute la largeur, en deux colonnes de texte
   pour garder une longueur de ligne lisible */
.story-plein{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,60px)}
.story-plein p{max-width:none}
@media (max-width:860px){.story-plein{grid-template-columns:1fr}}

/* ---- ingénierie : neuf étapes dans l'ouverture -------------------------- */
.methode-etapes.neuf{grid-template-columns:repeat(3,minmax(0,1fr))}
.methode-etapes.neuf li{padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,24px);gap:8px}
@media (max-width:1000px){.methode-etapes.neuf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.methode-etapes.neuf{grid-template-columns:1fr}}
.innov-atelier p + h3{margin-top:1.4em}

/* ---- scrutineering : les six contrôles ---------------------------------- */
.nc-table .nc-point{display:block;margin-bottom:5px;color:var(--ink);font-weight:500}
.six-controles{margin-top:clamp(40px,5vw,64px)}
.six-controles .etapes{margin-bottom:clamp(40px,5vw,64px)}
.six-controles .etapes h4{margin:0;font-size:1rem;letter-spacing:-.01em}
.six-controles .etapes p{margin:0;font-size:.85rem;color:var(--body);line-height:1.6}
.galerie figcaption .galerie-titre{font-size:.95rem;margin-bottom:5px;font-weight:600;color:var(--ink)}

/* ---- la direction de la saison : les six fiches d'un seul coup d'œil ---- */
/* Une seule rangée de six fiches plus petites, le Team Principal au même
   format que les autres. Son portrait est en 4:5, comme le cadre : il n'est
   plus recadré en bandeau. L'appel à candidatures passe en bande dessous. */
#membres .membres{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
#membres .membre.vedette{grid-column:auto;display:flex}
#membres .membre.vedette .membre-photo{aspect-ratio:4/5;max-width:none;min-height:0}
#membres .membre-photo img,#membres .membre.vedette .membre-photo img{object-position:center}
#membres .membre-nom,#membres .membre.vedette .membre-nom{font-size:clamp(.95rem,1.05vw,1.08rem)}
#membres .membre-corps{padding:14px 14px 16px;gap:8px}
#membres .membre-mission{font-size:.78rem;line-height:1.5}
#membres .membre-badge{font-size:.62rem;padding:3px 9px}
#membres .membre-pole{font-size:.68rem;padding:5px 11px}
#membres .membre.appel{grid-column:1 / -1}
#membres .membre.appel .membre-corps{
  flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 28px;padding:22px clamp(22px,3vw,36px);
}
#membres .membre.appel .membre-nom{font-size:clamp(1.1rem,1.5vw,1.35rem)}
#membres .membre.appel .membre-mission{max-width:62ch;font-size:.88rem}
#membres .membre.appel .membre-pole{margin-top:0}
@media (max-width:1100px){#membres .membres{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){#membres .membres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){#membres .membres{grid-template-columns:minmax(0,1fr)}}

/* « Vous êtes une entreprise ou un particulier ? » : un peu plus petit, en
   deux lignes équilibrées, et le point d'interrogation jamais seul à la ligne
   (espace insécable dans le texte) */
.head.centre h2.titre-choix{font-size:clamp(1.6rem,2.9vw,2.35rem);max-width:26ch;text-wrap:balance}
.formules .non{font-size:.78rem}

/* ---- photos montrées entières ------------------------------------------- */
/* Règle de l'équipe : aucune photo rognée, nez de la voiture et photos de
   groupe compris. Les cadres à format imposé (object-fit:cover) cèdent la
   place au format de chaque photo. Seuls les fonds sous un titre (héros,
   bannières, ouverture de la méthode) restent recadrés : leur format suit
   celui de l'écran. */
.rangees{display:flex;flex-direction:column;gap:14px}
.rangee{display:flex;gap:14px;align-items:flex-start}
.rangee figure{flex:var(--r) 1 0%;min-width:0;margin:0}
.rangee img{display:block;width:100%;height:auto;aspect-ratio:var(--r)}
.rangee figcaption{padding:12px 2px 0;font-size:.76rem;color:var(--muted);line-height:1.5}
.rangees.cartes .rangee{align-items:stretch}
.rangees.cartes figure{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.rangees.cartes figcaption{padding:16px 18px 20px;font-size:inherit}
.rangees.cartes figcaption span{display:block;font-size:.82rem;color:var(--muted);line-height:1.6}
.rangees.cartes figcaption .galerie-titre{font-size:.95rem;margin-bottom:5px;font-weight:600;color:var(--ink)}
@media (max-width:700px){.rangee{flex-direction:column}.rangee figure{flex:none;width:100%}}

/* duo : la photo garde son format ; une photo en hauteur est bornée en
   hauteur et centrée dans sa colonne, sans être coupée */
.duo figure img,.duo img{
  width:auto;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
  max-height:min(72vh,640px);display:block;margin-inline:auto;
}
.duo figure.portrait img,.duo img[src*='team-principal']{aspect-ratio:auto;max-height:min(72vh,640px)}
/* trois photos en ligne : toutes en 3:2, comme les photos elles-mêmes */
.trio img{aspect-ratio:3/2}
/* la photo de groupe de l'accueil, en entier */
.equipe-photo img{height:auto;aspect-ratio:auto;object-fit:initial}
/* les saisons : chaque photo à son format */
.heritage-panel img{height:auto;aspect-ratio:auto;object-fit:initial;max-height:min(70vh,640px);width:auto;max-width:100%}
/* entreprise ou particulier : deux photos en 3:2 */
.choix-carte img{aspect-ratio:3/2}
/* le QR code de la collecte, jamais coupé */
.don-libre img{aspect-ratio:1/1;object-fit:contain}
/* split : même règle que le duo, la photo à son format */
.split figure img,.recruit-split figure img{
  width:auto;max-width:100%;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;
  max-height:min(72vh,640px);display:block;margin-inline:auto;
}
/* les six maillons d'une histoire tiennent sur une ligne, puis le texte */
@media (min-width:901px){.story .chain{grid-template-columns:repeat(6,minmax(0,1fr))}}
.story .split,.story .story-plein{margin-top:clamp(26px,3vw,40px)}
/* la chaîne de la CAO à la piste : cadres en 3:2, le format de la plupart
   des photos ; les autres y sont contenues, jamais coupées */
.etape-cadre{aspect-ratio:3/2}
@media (max-width:900px){.frise>span+span::before{content:none}}
#membres .membres .membre.appel{display:flex}
@media (max-width:680px){
  #membres .membre.appel .membre-corps{flex-direction:column;align-items:flex-start}
}

/* accueil : la photo sous « De la salle de cours à la piste », entière */
.claim-photo{margin:clamp(24px,3vw,40px) 0 0}
.claim-photo img{display:block;width:100%;height:auto}
.claim-photo figcaption{margin-top:12px;font-size:.78rem;color:var(--muted)}

/* ===================================================== page Ingénierie */
/* Ingénierie = comment la #17 est faite ; La voiture = ce qu'elle est.
   Un bandeau le dit dès l'ouverture, un autre renvoie à la voiture à la fin. */
.ing-renvoi{padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.ing-renvoi-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.ing-renvoi p{margin:0;max-width:70ch;font-size:clamp(.98rem,1.3vw,1.08rem);color:var(--ink)}
.ing-renvoi p a{color:var(--accent);border-bottom:1px solid currentColor}
.ing-sous-head{margin-top:clamp(64px,8vw,110px)}

/* les pôles : huit cartes, l'effectif en pied de carte */
.poles-tech{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pole-tech{background:var(--paper);padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;min-height:220px}
.pole-n{font-size:.68rem;letter-spacing:.17em;color:var(--accent);font-weight:700}
.pole-tech h3{margin:0;font-family:Saira,Montserrat,sans-serif;text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em}
.pole-tech p{margin:0;font-size:.88rem;color:var(--body);line-height:1.6;flex:1 1 auto}
.pole-eff{align-self:flex-start;background:var(--ink);color:#fff;border-radius:999px;padding:4px 12px;font-size:.7rem;font-weight:600;letter-spacing:.03em}
.pole-tech.pole-cp{background:var(--nuit)}
.pole-tech.pole-cp h3{color:#fff}
.pole-tech.pole-cp p{color:rgba(255,255,255,.82)}
.pole-tech.pole-cp .pole-eff{background:var(--accent)}
@media (max-width:1000px){.poles-tech{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.poles-tech{grid-template-columns:minmax(0,1fr)}.pole-tech{min-height:0}}

/* outils et savoir-faire : cartes à étiquette */
.outils{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(12px,1.4vw,18px)}
.outil{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:12px}
.tint .outil{background:var(--paper)}
section:not(.tint) .outil{background:var(--paper-2);border-color:transparent}
.outil-tag{align-self:flex-start;font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);font-weight:700}
.outil h3{margin:0;font-size:clamp(1.02rem,1.35vw,1.18rem);letter-spacing:-.01em;line-height:1.3}
.outil p{margin:0;font-size:.88rem;color:var(--body);line-height:1.6}

/* la traçabilité : quatre lignes numérotées */
.trace-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.trace-liste li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:4px 14px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.trace-liste .etape-n{grid-row:span 2;padding-top:3px}
.trace-liste .trace-titre{font-size:1rem;color:var(--ink);font-weight:600}
.trace-liste span:last-child{font-size:.88rem;color:var(--body);line-height:1.6}

/* bandeau de renvoi entre les deux pages */
.ing-resultat-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.ing-resultat-in>div:first-child{max-width:60ch}
.ing-resultat h2{margin-bottom:.4em}
.ing-resultat p{margin:0}

/* ---- pilotes : le test d'évacuation, mis en contexte -------------------- */
#evacuation .etapes{margin-bottom:clamp(44px,5.5vw,72px)}
.egress-contexte{margin-bottom:clamp(36px,4.5vw,56px)}
.egress-contexte .scrut-texte p+p{margin-top:1em}
.egress-contexte .bar-ligne{grid-template-columns:minmax(0,24ch) minmax(0,1fr) 7ch}
.egress-limite{margin:10px 0 0;text-align:right;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
@media (max-width:640px){.egress-contexte .bar-ligne{grid-template-columns:minmax(0,1fr) 7ch}}

/* ---- dix étapes : la frise s'adapte à leur nombre ----------------------- */
.frise{
  grid-template-columns:repeat(var(--n,10),minmax(0,1fr));
  font-size:min(1.05rem,calc((min(1500px,96vw) / var(--n,10) - 16px) / 9));
}
.frise-retour{margin:16px calc(100% / (2 * var(--n,10))) 0}
/* sous 1200 px, dix mots ne tiennent plus sur une ligne : deux rangées de
   cinq, et la boucle se dit en toutes lettres */
@media (max-width:1200px){
  .frise{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:22px;font-size:clamp(.74rem,1.5vw,1rem)}
  .frise>span:nth-child(5n+1)::before{content:none}
  .frise-retour{margin:22px 0 0;height:auto;border:0;text-align:center}
  .frise-retour::before{content:none}
  .frise-retour span{position:static;transform:none;padding:0;white-space:normal}
  .frise-retour span::before{content:"\21BA\00a0";font-size:1.1em}
}
@media (max-width:700px){
  .frise{grid-template-columns:repeat(2,minmax(0,1fr));font-size:clamp(.8rem,3.6vw,1rem)}
  .frise>span::before{content:none !important}
}

/* méthode : dix étapes en deux rangées de cinq */
.methode-etapes.dix{grid-template-columns:repeat(5,minmax(0,1fr))}
.methode-etapes.dix li{padding:clamp(16px,1.6vw,22px) clamp(14px,1.4vw,20px);gap:8px}
@media (max-width:1100px){.methode-etapes.dix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.methode-etapes.dix{grid-template-columns:1fr}}

/* ---- pilotes : le test d'évacuation, mis en contexte -------------------- */
#evacuation .etapes{margin-bottom:clamp(44px,5.5vw,72px)}
.egress-contexte{margin-bottom:clamp(36px,4.5vw,56px)}
.egress-contexte .scrut-texte p+p{margin-top:1em}
.egress-contexte .bar-ligne{grid-template-columns:minmax(0,24ch) minmax(0,1fr) 7ch}
.egress-limite{margin:10px 0 0;text-align:right;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
@media (max-width:640px){.egress-contexte .bar-ligne{grid-template-columns:minmax(0,1fr) 7ch}}

/* ---- dix étapes : la frise s'adapte à leur nombre ----------------------- */
.frise{
  grid-template-columns:repeat(var(--n,10),minmax(0,1fr));
  font-size:min(1.05rem,calc((min(1500px,96vw) / var(--n,10) - 16px) / 9));
}
.frise-retour{margin:16px calc(100% / (2 * var(--n,10))) 0}
/* sous 1200 px, dix mots ne tiennent plus sur une ligne : deux rangées de
   cinq, et la boucle se dit en toutes lettres */
@media (max-width:1200px){
  .frise{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:22px;font-size:clamp(.74rem,1.5vw,1rem)}
  .frise>span:nth-child(5n+1)::before{content:none}
  .frise-retour{margin:22px 0 0;height:auto;border:0;text-align:center}
  .frise-retour::before{content:none}
  .frise-retour span{position:static;transform:none;padding:0;white-space:normal}
  .frise-retour span::before{content:"\21BA\00a0";font-size:1.1em}
}
@media (max-width:700px){
  .frise{grid-template-columns:repeat(2,minmax(0,1fr));font-size:clamp(.8rem,3.6vw,1rem)}
  .frise>span::before{content:none !important}
}

/* méthode : dix étapes en deux rangées de cinq */
.methode-etapes.dix{grid-template-columns:repeat(5,minmax(0,1fr))}
.methode-etapes.dix li{padding:clamp(16px,1.6vw,22px) clamp(14px,1.4vw,20px);gap:8px}
@media (max-width:1100px){.methode-etapes.dix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.methode-etapes.dix{grid-template-columns:1fr}}

/* ---- partenaires : Haute-Saintonge -------------------------------------- */
.hs-circuit{margin-top:clamp(64px,8vw,110px);align-items:stretch}
.hs-chiffres{list-style:none;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hs-chiffres li{padding:16px 12px 14px 0;display:flex;flex-direction:column;gap:4px}
.hs-chiffres li+li{padding-left:16px;border-left:1px solid var(--line)}
.hs-chiffres b{font-family:Saira,Montserrat,sans-serif;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--ink);line-height:1.1}
.hs-chiffres span{font-size:.78rem;color:var(--muted);line-height:1.4}
.hs-adresse{font-size:.92rem;color:var(--ink);margin:0 0 18px}
.plan-carte.carte-circuit{aspect-ratio:4/3;min-height:320px}

/* ---- devenir membre ----------------------------------------------------- */
.banniere-in .actions{justify-content:center;margin:clamp(20px,2.6vw,30px) 0 0}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill-list span{border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;font-size:.78rem;color:var(--ink);background:var(--paper)}

/* ---- relecture d'octobre 2026 ------------------------------------------- */
/* la légende d'une photo de duo ou de split commence sous la photo, et non
   au bord de la colonne : la figure prend la largeur de l'image, la légende
   ne compte pas dans ce calcul (width:0) puis s'étend à toute la figure */
.duo figure,.split figure,.recruit-split figure{width:fit-content;max-width:100%;margin-inline:auto}
.duo figcaption,.split figcaption,.recruit-split figcaption{width:0;min-width:100%}
/* organigramme : un poste précisé sous le nom */
.orga-pole li > span:last-child{display:flex;flex-direction:column}
.orga-pole li small{font-size:.7rem;letter-spacing:.06em;color:var(--muted);margin-top:2px}
/* le partenariat sur mesure, mis en avant sous la grille */
.sur-mesure{margin-top:clamp(26px,3vw,38px);background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--accent,#FF0055);padding:clamp(22px,2.6vw,32px) clamp(22px,3vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,48px)}
.sur-mesure h3{font-size:clamp(1.2rem,1.6vw,1.45rem);margin:6px 0 10px}
.sur-mesure p{margin:0;max-width:62ch;color:var(--muted)}
.sur-mesure .btn{flex:none}
@media (max-width:760px){.sur-mesure{flex-direction:column;align-items:flex-start}}
/* le budget de la saison (page Nous soutenir), comme dans le dossier */
.budget{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,64px);margin-top:clamp(36px,4vw,56px)}
.budget h3{font-size:clamp(1.15rem,1.5vw,1.35rem);margin:0 0 10px}
.budget h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:30px 0 14px}
.budget p{color:var(--muted)}
.budget-barre{display:flex;gap:2px;height:22px;margin:18px 0 12px}
.budget-barre span{border-radius:4px}
.b-voiture{background:#182249}.b-voyage{background:#FF0055}.b-inscription{background:#6E7FB5}
.budget-legende{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.86rem;color:var(--ink)}
.budget-legende li{display:flex;align-items:center;gap:8px}
.budget-legende i{width:10px;height:10px;border-radius:2px;display:inline-block}
.budget-legende .budget-val{margin-left:4px;font-weight:700}
.budget-poles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.budget-poles li{display:grid;grid-template-columns:minmax(150px,1.1fr) 2fr 84px;align-items:center;gap:12px;font-size:.86rem;color:var(--ink)}
.budget-poles .budget-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.budget-piste{height:10px}
.budget-piste i{display:block;height:100%;background:#182249;border-radius:0 4px 4px 0}
.budget-poles li.provision .budget-piste i{background:#6E7FB5}
.budget-besoins{list-style:none;margin:16px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.92rem;color:var(--ink)}
.budget-besoins li{padding-left:18px;position:relative}
.budget-besoins li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--accent)}
.budget-calendrier{margin-top:clamp(32px,4vw,48px);background:var(--paper);border:1px solid var(--line);padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,32px)}
.budget-calendrier ol{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.budget-calendrier .cal-mois{display:block;font-size:.88rem;color:var(--ink);font-weight:700}
.budget-calendrier li span{font-size:.8rem;color:var(--muted)}
@media (max-width:900px){.budget{grid-template-columns:1fr}.budget-calendrier ol{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.budget-calendrier ol{grid-template-columns:repeat(2,1fr)}.budget-poles li{grid-template-columns:1fr 1fr 74px}}
.budget .note{margin-top:16px}

/* les packs de dons, annoncés sur l'accueil et sur Nous soutenir */
.bande-packs{background:var(--nuit,#182249);color:#fff;padding:clamp(40px,5vw,64px) 0}
.bande-packs-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.bande-packs .ref{color:var(--accent)}
.bande-packs h2{color:#fff;margin:8px 0 12px}
.bande-packs p{color:rgba(255,255,255,.82);max-width:64ch;margin:0}
.bande-packs .btn{flex:none;background:var(--accent);border-color:var(--accent);color:#fff}
.bande-packs .btn:hover{background:#fff;border-color:#fff;color:var(--nuit,#182249)}
@media (max-width:800px){.bande-packs-in{flex-direction:column;align-items:flex-start}}

/* sélecteur de langue : FR · EN · DE · ES, à droite du menu. Replié, il ne
   prend que la place d'un bouton ; déplié, il donne le nom de chaque langue
   dans cette langue. Sur téléphone, il reste visible à côté du menu. */
.langue{position:relative;flex:none;margin-left:2px}
.langue summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  height:40px;padding:0 9px;border:1px solid var(--line-2);color:var(--ink);
  font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  user-select:none;transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.langue summary::-webkit-details-marker{display:none}
.langue summary::after{
  content:"";width:5px;height:5px;margin-left:1px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.langue[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.langue summary:hover{border-color:var(--ink)}
.langue ul{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;margin:0;padding:6px 0;
  list-style:none;min-width:172px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(17,21,26,.12);
}
.langue li a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 16px;font-size:.86rem;color:var(--ink);border-left:2px solid transparent;
}
.langue li a span{font-size:.64rem;letter-spacing:.12em;color:var(--muted)}
.langue li a:hover{background:var(--paper-2)}
.langue li a[aria-current]{border-left-color:var(--accent);background:var(--paper-2)}
body.sur-photo .nav .langue summary{color:#fff;border-color:rgba(255,255,255,.55);
  background:rgba(11,18,48,.46)}
body.sur-photo .nav .langue summary:hover{border-color:#fff}
body.sur-photo .nav.fige .langue summary{color:var(--ink);border-color:var(--line-2);background:transparent}
@media (max-width:1279px){
  .langue{margin-left:auto;order:1}
  .burger{order:2;margin-left:10px}
  .langue summary{height:44px}
}

/* Le menu complet tient à partir de 1280 px, dans les quatre langues : huit
   rubriques, deux boutons, le logo et le sélecteur de langue. En dessous, il
   se replie derrière le bouton ☰. Sur grand écran, c'est le logo qui ramène à
   l'accueil : la rubrique « Accueil » n'y est pas répétée, elle reste dans le
   menu replié. Le logo ne se réduit jamais pour faire de la place. */
.brand,.nav-links>a,.nav-actions{flex:none}
@media (min-width:1280px){
  .nav-in{max-width:1480px;padding:0 clamp(20px,3vw,48px);gap:18px}
  .nav-links{gap:clamp(14px,1.3vw,22px)}
  .nav-links>a:first-child{display:none}
}

/* l'allemand assemble de longs mots composés (Fahrzeugintegration) : on
   autorise la césure, sans quoi un titre de carte sort de sa boîte. Et dans
   toutes les langues, un mot trop long pour sa colonne passe à la ligne
   plutôt que de déborder. */
html:lang(de) body{-webkit-hyphens:auto;hyphens:auto}
h1,h2,h3,h4{overflow-wrap:break-word}

/* la collecte HelloAsso : un lien, et non un QR code. Sur un écran, un QR
   oblige à sortir un téléphone pour aller sur une page qu'un clic ouvre. */
.lien-collecte{
  display:flex;flex-direction:column;gap:10px;align-self:center;justify-self:center;
  width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:28px 30px;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease;
}
.lien-collecte:hover{border-color:var(--accent);box-shadow:0 14px 34px rgba(17,21,26,.08)}
.lien-collecte .ref{margin:0}
.lien-collecte-titre{font-size:1.3rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lien-collecte-url{
  font-size:.95rem;font-weight:500;color:var(--ink);overflow-wrap:break-word;
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;
  text-underline-offset:4px;
}
.lien-collecte-note{font-size:.85rem;color:var(--muted)}
.don-libre .lien-collecte-url{display:inline-block;margin-top:4px}
.lien-collecte-url i{white-space:nowrap}
@media (max-width:480px){.lien-collecte{padding:24px 22px}.lien-collecte-url{font-size:.84rem}}

/* ===================================================== adaptation à tous les écrans
   Relecture d'octobre 2026, testée de 320 px (petit téléphone) à 2560 px
   (grand écran), en portrait et en paysage, dans les quatre langues. */

/* 1. Menu déroulé (en dessous de 1280 px) : l'en-tête devient plein, la
   photo ne transparaît plus derrière le logo, et le menu défile s'il est
   plus haut que l'écran (téléphone tenu en paysage). */
@media (max-width:1279px){
  .nav:has(.nav-links.open){background:#fff;backdrop-filter:none}
  body.sur-photo .nav:has(.nav-links.open){background:var(--nuit);border-bottom-color:transparent}
  body.sur-photo .nav.fige:has(.nav-links.open){background:#fff;border-bottom-color:var(--line)}
  .nav-links{max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain}
}

/* 2. Titre de l'accueil : il ne passe plus sous la barre de navigation.
   Le bloc garde sa hauteur de référence (34,4 % du hero) mais peut grandir
   vers le bas quand le titre tient sur plusieurs lignes (petit téléphone). */
.hero-centre{height:auto;min-height:34.4%;padding-top:clamp(92px,10vh,108px)}
/* téléphone en paysage : la fenêtre fait 320 à 430 px de haut, le hero
   garde une hauteur minimale pour que titre, bouton et partenaires ne se
   marchent pas dessus */
@media (orientation:landscape) and (max-height:560px){
  .hero-plein{min-height:600px}
}

/* 3. Chiffres clés : sur petit écran, un libellé long (« patrocinadores »,
   « scrutineering ») ne pousse plus la colonne hors de l'écran. */
.plate>div,.stats>div,.stat,.car-kpis>div{min-width:0}
.plate span,.stats span,.stat span,.car-kpis span{overflow-wrap:break-word;hyphens:auto}
@media (max-width:480px){
  .plate span,.stats span,.stat span,.car-kpis span{letter-spacing:.08em}
}
@media (max-width:640px){
  .plate.scrut-plate{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plate.scrut-plate>div{border-right:1px solid var(--line)}
  .plate.scrut-plate>div:nth-child(2n){border-right:0}
}

/* 4. Drapeaux du sélecteur de langue */
.langue .drapeau{width:21px;height:14px;flex:none;display:block;object-fit:cover;
  border-radius:2px;box-shadow:0 0 0 1px rgba(17,21,26,.18)}
.langue li a{justify-content:flex-start}
.langue li a span{margin-left:auto}
/* entre 1280 et 1499 px, le menu complet est serré : le drapeau seul désigne
   la langue (le code reste lu par les lecteurs d'écran via aria-label) */
@media (min-width:1280px) and (max-width:1499px){
  .langue summary>span{display:none}
}

/* ===== composants partenaires ===== */
/* plaque claire : traitement homogène des 25 identités */
.tile{
  background:#fff;border:1px solid var(--line);
  aspect-ratio:16/10;overflow:hidden;padding:20px 24px;
  display:grid;place-items:center;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.tile img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.tile:hover{border-color:var(--line-2);box-shadow:0 10px 26px rgba(17,21,26,.09)}
.tile-txt{font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);text-align:center}

.wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.wall.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1080px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.wall,.wall.four{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:460px){.wall,.wall.four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* bandeau défilant */
.marquee{
  overflow:hidden;position:relative;padding:28px 0;background:var(--paper);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex;gap:10px;width:max-content;animation:defile 78s linear infinite}
/* La pause au survol existait pour laisser le temps de cliquer un logo. Mais
   le ruban occupe toute la largeur au bas de l'ecran d'accueil : la souris y
   passe sans arret, et le ruban paraissait fige. Seul le focus clavier
   l'arrete desormais — c'est la seule situation ou il faut vraiment pouvoir
   viser une cible. */
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 5px))}}
.marquee .tile{width:180px;aspect-ratio:16/9;flex:0 0 auto;padding:14px 18px;border-color:var(--line)}
/* « Animations reduites », coche dans Windows et dans macOS, coupait le ruban
   net : sur un poste ou ce reglage est actif — et il l'est souvent sans qu'on
   le sache — les logos restaient immobiles. Un defilement lent et regulier n'a
   pas le caractere agressif d'une animation ; on le ralentit quatre fois
   plutot que de l'arreter, et le ruban reste poussable a la main. */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-duration:150s}
  .marquee.sombre .marquee-track{animation-duration:145s}
  .marquee{overflow-x:auto}
}

/* « De la CAO à la piste » — quatre étapes, quatre cadres identiques.
   Les photos d'origine étaient de formats très différents : une CAO
   panoramique à côté d'un portrait d'atelier, alignées par le haut, et les
   légendes retombaient à quatre hauteurs. Ici le cadre impose le format,
   object-fit:cover recadre la photo dedans, et la légende part d'une ligne
   commune parce que chaque figure est une grille à deux rangées. */
.chaine-cao{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}
.etape-cao{display:grid;grid-template-rows:auto 1fr;gap:14px;margin:0}
.etape-cadre{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);
}
/* contain, pas cover : la photo est montrée entière, jamais recadrée */
.etape-cadre img{width:100%;height:100%;object-fit:contain;display:block}
.etape-cadre.sans-photo{background:var(--nuit);display:grid;place-items:center}
.etape-domaines{
  color:#fff;font-family:Saira,Montserrat,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.45;text-align:center;
  font-size:clamp(.78rem,1.05vw,.98rem);
}
.etape-num{
  position:absolute;left:0;bottom:0;padding:7px 12px;
  background:var(--ink);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
.etape-cadre.sans-photo .etape-num{background:var(--accent)}
.etape-cao figcaption{display:block;font-size:.86rem;line-height:1.6;color:var(--muted)}
.etape-cao figcaption .etape-titre{
  display:block;margin-bottom:5px;color:var(--ink);
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
}
@media (max-width:1100px){.chaine-cao{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.chaine-cao{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.chaine-cao{grid-template-columns:minmax(0,1fr)}}

/* plan d'accès, en tête du pied de page */
.plan-acces{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(22px,3vw,44px);align-items:stretch;
  padding-bottom:clamp(36px,4.5vw,54px);margin-bottom:clamp(36px,4.5vw,54px);
  border-bottom:1px solid var(--line);
}
.plan-texte h4{margin-bottom:12px}
.plan-texte p{font-size:.88rem;line-height:1.7;color:var(--body);margin-bottom:18px}
.plan-liens{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.plan-liens a:not(.btn){font-size:.85rem;color:var(--muted);border-bottom:1px solid var(--line-2)}
.plan-liens a:not(.btn):hover{color:var(--accent);border-bottom-color:var(--accent)}
/* width:100% d'abord : sans lui, aspect-ratio déduit la largeur de la
   min-height et la carte débordait de 28 px de sa colonne à 360 px. Ici la
   largeur vient de la grille, la hauteur suit le rapport, et la min-height
   ne fait que l'empêcher de devenir une bande illisible sur téléphone. */
.plan-carte{
  position:relative;width:100%;min-width:0;min-height:230px;aspect-ratio:16/7;
  border:1px solid var(--line);background:var(--paper);overflow:hidden;
}
.plan-carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.plan-bouton{
  position:absolute;inset:0;width:100%;height:100%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px;text-align:center;border:0;background:
    repeating-linear-gradient(45deg,var(--paper),var(--paper) 14px,var(--paper-2) 14px,var(--paper-2) 28px);
  transition:background-color .2s ease;font-family:inherit;
}
.plan-bouton b{font-size:.92rem;color:var(--ink)}
.plan-bouton span:last-child{font-size:.78rem;color:var(--muted);max-width:36ch}
.plan-bouton:hover b{color:var(--accent)}
.plan-pin{
  width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--accent);box-shadow:0 0 0 4px rgba(216,35,47,.14);margin-bottom:6px;
}
@media (max-width:760px){
  .plan-acces{grid-template-columns:minmax(0,1fr)}
  .plan-carte{aspect-ratio:16/10}
}

/* scrutineering : le tableau des points relevés a son propre titre, pour
   qu'on trouve tout de suite « sur quoi on s'est fait reprendre » */
.scrut-titre-table{
  margin:0 0 .5em;font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.02em;
}
.scrut-chapo{max-width:78ch;color:var(--body);margin:0 0 clamp(18px,2.2vw,26px)}
.plate.scrut-plate>div b{font-variant-numeric:tabular-nums}
@media (max-width:1080px){
  .plate.scrut-plate{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* repères de niveau */
.tiers{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,4vw,44px);padding:0;list-style:none}
.tiers a{
  border:1px solid var(--line);padding:10px 16px;
  font-size:.67rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.tiers a:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.tiers a:hover b{color:#fff}
.tiers b{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700}

/* fiches détaillées */
.p-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.p-grid.lead-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-detail{
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start;
  background:var(--paper);border:1px solid var(--line);padding:24px;
  scroll-margin-top:100px;transition:border-color .3s ease,box-shadow .3s ease;
}
.p-detail:hover{border-color:var(--line-2);box-shadow:0 12px 30px rgba(17,21,26,.07)}
.p-detail.lead{grid-template-columns:minmax(0,1fr);gap:22px}
/* Le cadre d'un logo ne le rogne JAMAIS : quelle que soit la proportion du
   fichier — la pastille Mercedes est plus haute que large, le bandeau
   Haulotte quatre fois plus large que haut — l'image entière doit tenir
   dedans. D'où les deux pistes minmax(0,1fr) : sans elles, la piste
   implicite vaut auto, donc s'ajuste au CONTENU, le cadre garde sa hauteur
   fixe, et overflow:hidden coupe la différence en silence. C'est ce qui
   décapitait l'étoile Mercedes et l'étoile de Strigi-Form. */
.p-logo{
  background:var(--paper-2);border:1px solid var(--line);
  display:grid;place-items:center;padding:16px;height:104px;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
}
.p-detail.lead .p-logo{height:144px;padding:22px}
.p-logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.p-sector{
  display:block;font-size:.62rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px;
}
.p-body h3{margin-bottom:11px;font-size:1.14rem}
.p-body p{font-size:.9rem;margin-bottom:.85em;line-height:1.65}
.p-apport{
  border-left:2px solid var(--accent);padding-left:14px;color:var(--ink);
}
.p-link{
  display:inline-block;margin-top:4px;font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.p-link:hover{border-bottom-color:var(--accent)}
@media (max-width:1080px){.p-grid.lead-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .p-grid{grid-template-columns:minmax(0,1fr)}
  .p-detail{grid-template-columns:minmax(0,1fr);gap:18px}
  .p-logo{height:116px}
}

/* ===== sous chaque formulaire : ce que deviennent les informations */
.rgpd-form{margin-top:18px;padding:14px 18px;border-left:3px solid var(--line-2);background:var(--paper-2);font-size:.88rem;color:var(--body)}
.rgpd-form p{margin:0 0 .5em}
.rgpd-form p:last-child{margin-bottom:0}
.rgpd-form a{text-decoration:underline;text-underline-offset:2px;color:var(--ink)}
.mentions-corps h3{font-size:1.02rem;margin:1.4em 0 .4em}
/* ===== pages de texte sans bannière (mentions légales) */
.page-texte{padding-top:clamp(120px,14vw,170px)}
.page-texte .head{margin-bottom:24px}
.page-texte{padding-bottom:clamp(24px,3vw,40px)}
.page-texte+section{padding-top:clamp(24px,3vw,40px)}
/* ===== menu : avec Galerie, dix entrées. Entre 1280 et 1399 px on resserre
   espacements et interlettrage pour que le sélecteur de langue reste visible
   dans les quatre langues (l'espagnol est le plus long). */
@media (min-width:1280px) and (max-width:1399px){
  .nav-in{padding:0 20px;gap:12px}
  .nav-links{gap:11px}
  .nav-links>a{letter-spacing:.06em}
  .nav-support,.nav-cta{padding:11px 12px;letter-spacing:.06em}
  .nav-actions{gap:8px;margin-left:4px}
}
/* ===== page Nos réseaux : sans photo, sur le bleu de l'équipe */
.reseaux-hero{position:relative;overflow:hidden;background:var(--nuit);color:rgba(255,255,255,.78);
  padding:clamp(150px,17vw,220px) 0 0}
.reseaux-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 85% 10%,rgba(255,0,85,.28),transparent 60%),
  repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.035) 46px 47px)}
.reseaux-hero .wrap{position:relative}
.hero-mots{position:absolute;right:clamp(16px,4vw,64px);top:50%;transform:translateY(-58%);display:flex;
  flex-direction:column;align-items:flex-end;pointer-events:none}
.hero-mots span{font-family:Anton,Montserrat,sans-serif;text-transform:uppercase;line-height:.92;
  font-size:clamp(3rem,7.5vw,7rem);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);
  animation:allume 6s infinite}
.hero-mots span:nth-child(2){animation-delay:2s}
.hero-mots span:nth-child(3){animation-delay:4s}
@keyframes allume{0%,8%{color:transparent;-webkit-text-stroke-color:rgba(255,255,255,.22)}
  12%,30%{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
  36%,100%{color:transparent;-webkit-text-stroke-color:rgba(255,255,255,.22)}}
@media (max-width:1279px){.hero-mots{display:none}}
.reseaux-tous{margin:26px 0 0;font-weight:600;color:var(--ink)}
.reseaux-tous a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.reseaux-hero h1{color:#fff;font-family:Anton,Montserrat,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;line-height:.95;font-size:clamp(3rem,9vw,7.5rem);margin:.25em 0 .3em;max-width:12ch}
.reseaux-hero h1 em{font-style:normal;color:var(--accent);display:inline-block;animation:monte .9s .15s both}
.reseaux-hero .big{color:rgba(255,255,255,.8);max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.25rem)}
.direct{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 14px;border-radius:999px}
.direct-point{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(255,0,85,.7);
  animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,0,85,0)}100%{box-shadow:0 0 0 0 rgba(255,0,85,0)}}
@keyframes monte{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
.reseaux-boutons{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.btn-reseau{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border:1.5px solid rgba(255,255,255,.55);
  color:#fff;text-decoration:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.92rem;
  border-radius:999px;transition:background .2s,border-color .2s,transform .2s}
.btn-reseau i{font-style:normal;transition:transform .2s}
.btn-reseau:hover,.btn-reseau:focus-visible{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.btn-reseau:hover i{transform:translate(3px,-3px)}
.ruban{margin-top:clamp(56px,7vw,90px);border-top:1px solid rgba(255,255,255,.14);overflow:hidden;
  padding:18px 0;background:rgba(255,255,255,.03)}
.ruban-piste{display:flex;align-items:center;gap:28px;width:max-content;animation:defile 40s linear infinite}
.ruban-piste span{font-family:Anton,Montserrat,sans-serif;text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);
  color:rgba(255,255,255,.9);letter-spacing:.03em;white-space:nowrap}
.ruban-piste .point{width:10px;height:10px;background:var(--accent);transform:rotate(45deg)}
.reseaux-lignes{border-top:1px solid var(--line-2)}
.reseau-ligne{position:relative;display:grid;grid-template-columns:70px minmax(0,1.2fr) minmax(0,1fr) auto;
  align-items:center;gap:24px;padding:clamp(26px,3.4vw,44px) 20px;border-bottom:1px solid var(--line-2);
  color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate}
.reseau-ligne::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nuit);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.reseau-ligne:hover::before,.reseau-ligne:focus-visible::before{transform:scaleX(1)}
.reseau-ligne:hover,.reseau-ligne:focus-visible{color:#fff}
.reseau-num{font-family:Anton,Montserrat,sans-serif;font-size:1.3rem;color:var(--accent)}
.reseau-corps{display:flex;flex-direction:column;gap:4px;min-width:0}
.reseau-grand{font-family:Anton,Montserrat,sans-serif;text-transform:uppercase;line-height:.95;
  font-size:clamp(2.6rem,7vw,5.6rem);transition:transform .45s}
.reseau-ligne:hover .reseau-grand{transform:translateX(10px)}
.reseau-compte{font-weight:600;color:var(--muted);transition:color .3s;overflow-wrap:anywhere}
.reseau-ligne:hover .reseau-compte,.reseau-ligne:hover .reseau-txt{color:rgba(255,255,255,.8)}
.reseau-txt{display:block;color:var(--body);transition:color .3s}
.reseau-sujets{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:12px 0 0;padding:0}
.reseau-sujets li{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border:1px solid currentColor;border-radius:999px;opacity:.75}
.reseau-suivre{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;font-size:.85rem;padding:14px 22px;border-radius:999px;background:var(--accent);color:#fff;
  transition:transform .3s}
.reseau-suivre i{font-style:normal;transition:transform .3s}
.reseau-ligne:hover .reseau-suivre i{transform:translate(3px,-3px)}
.saison-etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;
  counter-reset:e;position:relative}
.saison-etapes li{padding:28px 24px 8px 0;border-top:3px solid var(--line-2);position:relative}
.saison-etapes li::before{content:"";position:absolute;left:0;top:-3px;height:3px;width:0;background:var(--accent);
  transition:width .9s cubic-bezier(.7,0,.2,1)}
.saison-etapes li.vu::before{width:100%}
.saison-etapes li:nth-child(2)::before{transition-delay:.15s}
.saison-etapes li:nth-child(3)::before{transition-delay:.3s}
.saison-etapes li:nth-child(4)::before{transition-delay:.45s}
.saison-etapes .etape-n{font-family:Anton,Montserrat,sans-serif;color:var(--accent);font-size:1.1rem}
.saison-etapes h3{font-family:Anton,Montserrat,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:.01em;margin:.3em 0 .35em}
.reseaux-fin .reseaux-boutons{margin-top:8px}
.reseaux-fin .actions{margin-top:28px}
.reseaux-ancres{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px}
.reseaux-ancres a{color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.reseaux-ancres a:hover{color:var(--accent)}
/* podcast : une onde qui bat derrière l'en-tête, des épisodes en lignes */
.podcast{position:relative;overflow:hidden;background:var(--nuit)}
.podcast-onde{position:absolute;left:55%;right:0;top:clamp(40px,6vw,80px);height:120px;display:flex;
  align-items:center;justify-content:space-between;gap:4px;padding:0 2vw;opacity:.16;pointer-events:none}
.podcast-onde i{flex:1;max-width:14px;background:var(--accent);border-radius:3px;height:30%;
  animation:onde 1.6s ease-in-out infinite alternate}
.podcast-onde i:nth-child(3n){animation-delay:-.4s;animation-duration:1.2s}
.podcast-onde i:nth-child(4n+1){animation-delay:-.9s;animation-duration:1.9s}
.podcast-onde i:nth-child(5n+2){animation-delay:-1.3s;animation-duration:1.4s}
@keyframes onde{from{height:12%}to{height:100%}}
.podcast .wrap{position:relative}
.podcast-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:34px}
.podcast-tete .head{margin:0;max-width:62ch}
.podcast h2{font-family:Anton,Montserrat,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95}
.episodes{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.episode{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:20px;
  padding:20px 8px;border-bottom:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;
  transition:background .25s,padding .25s}
.episode:hover,.episode:focus-visible{background:rgba(255,255,255,.06);padding-left:18px}
.ep-play{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;
  transition:background .25s,border-color .25s}
.episode:hover .ep-play{background:var(--accent);border-color:var(--accent)}
.ep-barres{display:flex;align-items:flex-end;gap:3px;height:18px}
.ep-barres i{width:3px;height:35%;background:#fff;border-radius:2px}
.episode:hover .ep-barres i{animation:onde .5s ease-in-out infinite alternate}
.episode:hover .ep-barres i:nth-child(2){animation-delay:-.2s}
.episode:hover .ep-barres i:nth-child(3){animation-delay:-.35s}
.episode:hover .ep-barres i:nth-child(4){animation-delay:-.1s}
.ep-corps{display:flex;flex-direction:column;gap:3px;min-width:0}
.ep-num{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ep-titre{font-weight:700;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.35}
.ep-meta{font-size:.85rem;color:rgba(255,255,255,.6)}
.ep-ecouter{font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;gap:8px}
.ep-ecouter i{font-style:normal;transition:transform .25s}
.episode:hover .ep-ecouter i{transform:translate(3px,-3px)}
/* presse */
.presse-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.presse-carte{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;background:#fff;
  border:1px solid var(--line-2);color:var(--ink);text-decoration:none;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.presse-carte::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s}
.presse-carte:hover,.presse-carte:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px rgba(24,34,73,.12);border-color:var(--ink)}
.presse-carte:hover::after,.presse-carte:focus-visible::after{transform:scaleX(1)}
.presse-tete{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.presse-source{color:var(--accent)}
.presse-date{color:var(--muted)}
.presse-titre{font-weight:700;font-size:1.08rem;line-height:1.4;flex:1}
.presse-lien{font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.presse-carte.video{background:var(--nuit);border-color:var(--nuit);color:#fff}
.presse-carte.video .presse-date{color:rgba(255,255,255,.65)}
@media (max-width:900px){.podcast-onde{display:none}}
@media (max-width:640px){
  .episode{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .ep-play{width:44px;height:44px}
  .ep-ecouter{grid-column:2}
}
/* apparition au défilement : seulement si le script tourne (sinon tout est visible) */
.js-anim [data-apparait]{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.js-anim [data-apparait].vu{opacity:1;transform:none}
@media (max-width:900px){
  .reseau-ligne{grid-template-columns:44px minmax(0,1fr);gap:14px 16px}
  .reseau-detail,.reseau-suivre{grid-column:2}
  .reseau-suivre{justify-self:start}
  .saison-etapes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
}
@media (max-width:520px){
  .saison-etapes{grid-template-columns:1fr}
  .btn-reseau{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ruban-piste{animation:none;flex-wrap:wrap;width:auto;padding:0 16px}
  .js-anim [data-apparait]{opacity:1;transform:none}
  .hero-mots span{animation:none}
  .podcast-onde i{animation:none;height:50%}
}
.choix-packs{text-align:center;margin-top:28px}
/* ===== mentions légales : une page de texte, sans bannière photo */
.mentions{padding-top:clamp(120px,14vw,170px)}
.mentions-corps{max-width:72ch}
.mentions-corps h2{font-size:clamp(1.2rem,2vw,1.45rem);margin:2.2em 0 .6em}
.mentions-corps h2:first-child{margin-top:0}
.mentions-corps ul{margin:.4em 0 1em;padding-left:1.2em}
.mentions-corps li{margin:.25em 0}
.mentions-corps a{overflow-wrap:anywhere}