/*
Theme Name: IMP 2026
Description: Thème sur mesure pour IMP Formation — scroll storytelling, sans page builder.
Author: IMP Formation
Version: 1.0
Text Domain: imp-2026
*/

/* ============================================================
   IMP FORMATION — landing "tour de piste"
   Direction : monde sombre assumé (thème unique), asphalte + bleu IMP.
   ============================================================ */
:root{
  --ink:      #0B0D10;   /* asphalte nuit — neutre biaisé bleu */
  --ink-2:    #12161C;
  --panel:    #171C24;
  --line:     #262E39;
  --line-2:   #38434F;
  --craie:    #F2F4F7;
  --asphalte: #8D96A3;
  --asphalte-2:#5E6773;
  --bleu:     #0040A0;   /* bleu IMP */
  --bleu-clair:#2E7BE8;
  --fluo:     #F01030;   /* rouge IMP — l'unique éclat */
  --vert:     #35C27A;

  --w: 1240px;
  --gut: clamp(20px, 4.2vw, 68px);

  --f-disp: 'Barlow Condensed', 'Oswald', Impact, sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --smoke: 0;      /* 0 → 1 : voile de fumée piloté par le scroll */
  --tourp: 0;      /* progression du tour pinné */
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--craie);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--fluo);outline-offset:3px;}

h1,h2,h3{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;text-wrap:balance;margin:0;letter-spacing:.4px;}
h1{font-size:clamp(44px,7.4vw,92px);line-height:.94;}
h2{font-size:clamp(30px,4.4vw,54px);line-height:1.0;}
h3{font-size:clamp(19px,2vw,24px);line-height:1.1;}
p{margin:0;text-wrap:pretty;}

/* ---------- utilitaires ---------- */
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut);}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--fluo);font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--fluo);flex:none;}
.lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--asphalte);max-width:62ch;line-height:1.65;font-weight:300;}

/* ============================================================
   DÉCOR FIXE : vidéo circuit « fumée » + sol en grille + grain
   ============================================================ */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink);pointer-events:none;}
.backdrop video{
  position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;
  transform:translate(-50%,-50%) scale(calc(1.06 + var(--smoke) * 0.16));
  object-fit:cover;
  filter:
    saturate(calc(0.64 - var(--smoke) * 0.34))
    brightness(calc(0.54 - var(--smoke) * 0.26))
    contrast(1.08)
    blur(calc(var(--smoke) * 3px));
  will-change:transform,filter;
}
/* la fumée : deux nappes qui dérivent + voile directionnel */
.smoke{position:fixed;inset:-14%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(46% 34% at 22% 62%, rgba(150,170,200,.16), transparent 70%),
    radial-gradient(38% 30% at 74% 34%, rgba(120,145,185,.13), transparent 72%);
  filter:blur(28px);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-2.5%,1.5%,0) scale(1.02);}
  to  {transform:translate3d(3%,-2%,0)   scale(1.13);}
}
.veil{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,13,16,.62) 0%, rgba(11,13,16,.34) 34%, rgba(11,13,16,.86) 82%, var(--ink) 100%),
    radial-gradient(120% 78% at 50% 42%, transparent 30%, rgba(11,13,16,.72) 100%);
  opacity:calc(0.64 + var(--smoke) * 0.24);
}
.halo{position:fixed;z-index:3;top:-16vh;right:-14vw;width:70vw;height:70vw;max-width:900px;max-height:900px;
  border-radius:50%;pointer-events:none;filter:blur(30px);
  background:radial-gradient(circle, rgba(0,64,160,.30), transparent 64%);}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:var(--noise);background-size:180px 180px;}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:18px var(--gut);
  border-bottom:1px solid transparent;transition:background .35s, backdrop-filter .35s, border-color .35s, padding .35s;}
.nav.stuck{background:rgba(11,13,16,.86);backdrop-filter:blur(12px);border-bottom-color:var(--line);padding-block:11px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand .chip{background:#FFFFFF;border-radius:5px;padding:8px 14px;box-shadow:0 6px 20px rgba(0,0,0,.4);}
.brand .chip img{height:30px;width:auto;}
.navlinks{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);}
.navlinks a{position:relative;font-size:13.5px;font-weight:600;letter-spacing:.4px;color:var(--asphalte);transition:color .2s;}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;height:1.5px;width:0;background:var(--fluo);transition:width .25s;}
.navlinks a:hover{color:var(--craie);}
.navlinks a:hover::after{width:100%;}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-body);font-weight:700;
  font-size:13px;letter-spacing:1.2px;text-transform:uppercase;padding:15px 26px;border-radius:2px;
  border:1.5px solid transparent;cursor:pointer;transition:transform .16s, background .2s, box-shadow .22s, color .2s;}
.btn:active{transform:translateY(0) scale(.985);}
.btn-fluo{background:var(--fluo);color:#fff;box-shadow:0 10px 30px rgba(240,16,48,.28);}
.btn-fluo:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(240,16,48,.4);}
.btn-ghost{border-color:var(--craie);color:var(--craie);}
.btn-ghost:hover{background:var(--craie);color:var(--ink);transform:translateY(-2px);}
.btn-line{border-color:var(--fluo);color:var(--craie);padding:11px 20px;}
.btn-line:hover{background:var(--fluo);}
@media (max-width:900px){ .navlinks{display:none;} }
body.admin-bar .nav{top:32px;}
@media screen and (max-width:782px){ body.admin-bar .nav{top:46px;} }

/* ============================================================
   HERO
   ============================================================ */
main{position:relative;z-index:5;}
.hero{min-height:92svh;display:flex;align-items:flex-end;padding:150px 0 46px;position:relative;}
.hero-in{display:grid;gap:34px;}
.hero h1{max-width:16ch;}
.hero h1 em{font-style:normal;color:var(--bleu-clair);}
.hero .lead{max-width:52ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;
  border-top:1px solid var(--line);padding-top:22px;margin-top:8px;}
.stats{display:flex;gap:clamp(24px,4vw,54px);}
.stat b{display:block;font-family:var(--f-disp);font-size:clamp(30px,3.6vw,42px);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;}
.stat span{display:block;color:var(--asphalte-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;margin-top:7px;}
.scrollcue{display:flex;align-items:center;gap:10px;color:var(--asphalte-2);font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;}
.scrollcue i{display:block;width:1.5px;height:34px;background:linear-gradient(var(--fluo),transparent);
  animation:cue 1.9s ease-in-out infinite;transform-origin:top;}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.5;}50%{transform:scaleY(1);opacity:1;}}

/* ============================================================
   LE TOUR — scène épinglée : piste fixe en fond, orbite de la 208
   Les blocs alternent gauche / droite sur un tiers ; la voiture
   occupe les deux tiers restants et bascule avec eux.
   ============================================================ */
.tour{position:relative;height:460vh;}
.tour-stick{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);}
.tbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.12) translate3d(var(--bgx,0px), var(--bgy,0px), 0);
  filter:saturate(.78) brightness(.68) contrast(1.04);will-change:transform;}
#carc{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;}
.tscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,13,16,.80) 0%, rgba(11,13,16,.12) 22%, rgba(11,13,16,.16) 64%, rgba(11,13,16,.78) 100%),
    radial-gradient(140% 96% at 50% 56%, transparent 42%, rgba(11,13,16,.44) 100%);}
/* voile latéral : il suit le côté où le texte se trouve */
.tveil{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .55s ease;}
.tveil-l{background:linear-gradient(90deg, rgba(11,13,16,.94) 0%, rgba(11,13,16,.80) 26%, transparent 52%);}
.tveil-r{background:linear-gradient(270deg, rgba(11,13,16,.94) 0%, rgba(11,13,16,.80) 26%, transparent 52%);}
.tveil.on{opacity:1;}

.rail{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:6;
  display:flex;gap:22px;}
.rail-item{display:flex;align-items:center;gap:9px;color:var(--asphalte-2);
  font-family:var(--f-mono);font-size:10px;letter-spacing:1.5px;transition:color .3s;}
.rail-item i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line-2);
  flex:none;transition:background .3s, border-color .3s, box-shadow .3s;}
.rail-item.on{color:var(--craie);}
.rail-item.on i{background:var(--fluo);border-color:var(--fluo);box-shadow:0 0 0 5px rgba(240,16,48,.16);}
@media (max-width:860px){ .rail{display:none;} }

.chaps{position:absolute;inset:0;z-index:5;pointer-events:none;}
.chap{position:absolute;top:0;bottom:0;width:min(36ch,32vw);
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(72px);pointer-events:none;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);}
.chap.l{left:var(--gut);}
.chap.r{right:var(--gut);}
.chap.on{opacity:1;transform:none;pointer-events:auto;}
.chap.past{opacity:0;transform:translateY(-62px);}
.chap .num{font-family:var(--f-mono);font-size:11.5px;letter-spacing:2.6px;color:var(--fluo);}
.chap h2{margin:16px 0 18px;font-size:clamp(28px,3.3vw,44px);}
.chap p{color:var(--craie);font-weight:300;line-height:1.62;font-size:clamp(15.5px,1.35vw,17.5px);
  text-shadow:0 1px 14px rgba(11,13,16,.9);}
.chap .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.chap .tags span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--asphalte);padding:6px 11px;border-radius:2px;
  background:rgba(11,13,16,.45);}
/* rémanence de vitesse sur les titres */
.smear{position:relative;}
.chap.on .smear::after{content:attr(data-t);position:absolute;inset:0;color:var(--bleu-clair);
  filter:blur(9px);opacity:0;animation:smear .9s ease-out forwards;pointer-events:none;}
@keyframes smear{0%{opacity:.85;transform:translateX(22px);}100%{opacity:0;transform:none;}}

/* la 208 miniature qui suit le curseur */
.cursor-car{position:fixed;left:0;top:0;z-index:44;width:104px;pointer-events:none;opacity:0;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));transition:opacity .6s ease;will-change:transform;}
@media (hover:none){ .cursor-car{display:none;} }

@media (max-width:1040px){
  .tour{height:330vh;}
  .chap{width:auto;left:var(--gut);right:var(--gut);top:auto;bottom:5svh;height:auto;justify-content:flex-end;}
  .chap.l,.chap.r{left:var(--gut);right:var(--gut);}
  .tveil-l,.tveil-r{background:linear-gradient(180deg, transparent 30%, rgba(11,13,16,.90) 72%);}
}

/* ============================================================
   BLOCS DE CONTENU — fond opaque, plus aucun « trou »
   ============================================================ */
.sheet{position:relative;z-index:5;background:var(--ink);border-top:1px solid var(--line);}
.sec{padding:clamp(64px,8vw,108px) 0;border-bottom:1px solid var(--line);}
.sec:last-child{border-bottom:0;}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(34px,4.4vw,56px);}
.sec-head .lead{margin-top:4px;}

/* parcours : 6 étapes, vraie séquence → la numérotation dit quelque chose */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);}
.step{background:var(--ink);padding:26px 22px 30px;display:grid;gap:10px;align-content:start;
  transition:background .3s;}
.step:hover{background:var(--ink-2);}
.step b{font-family:var(--f-mono);font-size:11px;letter-spacing:2px;color:var(--fluo);}
.step h3{font-size:19px;}
.step p{color:var(--asphalte);font-size:14.5px;line-height:1.6;font-weight:300;}

/* centres */
.centres{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;}
.centre{position:relative;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;
  padding:32px 28px 28px;display:grid;gap:14px;align-content:start;isolation:isolate;
  transition:border-color .3s, transform .3s;}
.centre::before{content:"";position:absolute;inset:auto -20% -46% -20%;height:70%;z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%, rgba(0,64,160,.34), transparent 72%);
  transform:translateY(24%);transition:transform .5s;}
.centre:hover{border-color:var(--line-2);transform:translateY(-4px);}
.centre:hover::before{transform:translateY(0);}
.centre .loc{font-family:var(--f-mono);font-size:10.5px;letter-spacing:2px;color:var(--asphalte-2);text-transform:uppercase;}
.centre h3{font-size:clamp(22px,2.6vw,30px);}
.centre p{color:var(--asphalte);font-weight:300;font-size:15px;}
.centre ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px;}
.centre li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;color:var(--asphalte);}
.centre li::before{content:"";width:5px;height:5px;background:var(--fluo);flex:none;transform:translateY(-2px);}
.centre .countdown{font-family:var(--f-mono);font-size:11.5px;letter-spacing:1px;color:var(--fluo);
  border:1px solid rgba(240,16,48,.35);background:rgba(240,16,48,.08);padding:8px 12px;border-radius:2px;
  margin-top:4px;width:fit-content;}
.centre .countdown span{color:var(--asphalte-2);font-weight:400;}
.centre a.more{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;border-bottom:1.5px solid var(--fluo);padding-bottom:4px;width:fit-content;}

/* ============================================================
   OPTIONS DE FORMATION — ce qui se pratique sur chaque centre
   Un seul jeu de styles, réutilisé dans le hero et dans les cartes
   de la section « Nos centres ».
   ============================================================ */
.optlist{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.optlist li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:13.5px;line-height:1.42;color:var(--craie);font-weight:300;}
.optlist li i{font-style:normal;font-family:var(--f-disp);font-weight:800;font-size:11.5px;
  letter-spacing:.6px;color:var(--ink);background:var(--craie);border-radius:2px;
  padding:3px 7px;line-height:1.2;margin-top:1px;white-space:nowrap;}

/* — les deux encarts sous les boutons du hero — */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:790px;margin-top:2px;}
.opt{border:1px solid var(--line-2);border-top:2px solid var(--fluo);border-radius:2px;
  background:rgba(11,13,16,.62);backdrop-filter:blur(7px);padding:15px 18px 17px;
  display:grid;gap:12px;align-content:start;}
.opt header{display:grid;gap:3px;}
.opt .loc{font-family:var(--f-mono);font-size:9.5px;letter-spacing:1.9px;
  color:var(--asphalte-2);text-transform:uppercase;}
.opt b{font-family:var(--f-disp);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
@media (max-width:760px){ .opts{grid-template-columns:1fr;} }

/* — le même bloc, dans les cartes de la section Nos centres — */
.centre .optlist{margin:0;padding:0;display:grid;gap:9px;}
.centre .optlist li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:13.5px;line-height:1.42;color:var(--craie);font-weight:300;}
.centre .optlist li::before{content:none;display:none;}
.c-opts{margin-top:2px;padding-top:17px;border-top:1px solid var(--line);display:grid;gap:12px;}
.c-opts .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:1.9px;
  color:var(--fluo);text-transform:uppercase;}

/* pourquoi / atouts */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 30px;}
.atout{display:grid;gap:9px;align-content:start;border-top:1px solid var(--line);padding-top:18px;}
.atout h3{font-size:18px;}
.atout p{color:var(--asphalte);font-size:14.5px;font-weight:300;line-height:1.62;}

/* chiffres */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);}
.band div{background:var(--ink-2);padding:30px 24px;display:grid;gap:8px;}
.band b{font-family:var(--f-disp);font-weight:800;font-size:clamp(38px,5vw,58px);line-height:.9;
  font-variant-numeric:tabular-nums;}
.band b sup{font-size:.42em;vertical-align:super;color:var(--asphalte);}
.band span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.6px;color:var(--asphalte-2);text-transform:uppercase;}

/* financement */
.fin{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.fin article{border:1px solid var(--line);padding:24px 22px;display:grid;gap:10px;align-content:start;background:var(--ink-2);}
.fin b{font-family:var(--f-disp);font-size:22px;font-weight:800;text-transform:uppercase;}
.fin p{color:var(--asphalte);font-size:14.5px;font-weight:300;line-height:1.6;}

/* débouchés */
.jobs{display:flex;flex-wrap:wrap;gap:10px;}
.jobs span{border:1px solid var(--line-2);padding:11px 17px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--asphalte);transition:color .25s, border-color .25s;}
.jobs span:hover{color:var(--craie);border-color:var(--fluo);}

/* FAQ — de vrais blocs qui se déroulent */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:21px 46px 21px 0;position:relative;
  font-family:var(--f-disp);font-weight:700;font-size:clamp(17px,2vw,21px);text-transform:uppercase;
  letter-spacing:.3px;transition:color .2s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--fluo);border-bottom:2px solid var(--fluo);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.faq summary:hover{color:var(--bleu-clair);}
.faq .ans{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
.faq details[open] .ans{grid-template-rows:1fr;}
.faq .ans > div{min-height:0;}
.faq .ans p{color:var(--asphalte);font-weight:300;padding-bottom:22px;max-width:74ch;}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;}
@media (max-width:820px){ .contact{grid-template-columns:1fr;} }
.form{display:grid;gap:14px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:grid;gap:7px;}
.field label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.6px;color:var(--asphalte-2);text-transform:uppercase;}
.field input,.field textarea,.field select{background:var(--ink-2);border:1px solid var(--line);color:var(--craie);
  font-family:var(--f-body);font-size:15px;padding:13px 14px;border-radius:2px;transition:border-color .2s;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--bleu-clair);outline:none;}
.field textarea{resize:vertical;min-height:112px;}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C7CDD6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.field select:invalid{color:var(--asphalte-2);}
.field select.err{border-color:#F01030;}
.note{font-size:12.5px;color:var(--asphalte-2);line-height:1.55;}
.formstatus{font-family:var(--f-mono);font-size:11.5px;letter-spacing:1.2px;color:var(--vert);min-height:1.2em;}
.coords{display:grid;gap:20px;}
.coord{border-left:2px solid var(--fluo);padding-left:18px;display:grid;gap:5px;}
.coord b{font-family:var(--f-disp);font-size:20px;font-weight:800;text-transform:uppercase;}
.coord span{color:var(--asphalte);font-size:14.5px;}
.field-trap{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* CTA final */
.final{text-align:center;display:grid;gap:22px;justify-items:center;
  padding:clamp(70px,9vw,120px) 0;}
.final h2{font-size:clamp(34px,5.4vw,68px);}
.final .lead{margin-inline:auto;text-align:center;}

/* footer */
footer{background:var(--ink-2);border-top:1px solid var(--line);padding:56px 0 30px;}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;}
@media (max-width:820px){ .fgrid{grid-template-columns:1fr 1fr;} }
.fgrid h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.8px;color:var(--asphalte-2);
  text-transform:uppercase;margin:0 0 14px;font-weight:500;}
.fgrid p, .fgrid a{color:var(--asphalte);font-size:14.5px;line-height:1.75;font-weight:300;}
.fgrid a:hover{color:var(--craie);}
.fgrid ul{list-style:none;margin:0;padding:0;}
.fbot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--line);color:var(--asphalte-2);font-size:12.5px;}
.fbot nav{display:flex;gap:18px;flex-wrap:wrap;}

/* CTA flottant */
.floatcta{position:fixed;right:22px;bottom:22px;z-index:55;background:var(--craie);color:var(--ink);
  font-weight:700;font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;padding:15px 22px;
  border-radius:40px;display:flex;align-items:center;gap:9px;box-shadow:0 12px 34px rgba(0,0,0,.5);
  transition:transform .18s, box-shadow .2s;}
.floatcta:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(0,0,0,.6);}

/* révélation au scroll — état de repos visible tant que JS n'a pas pris la main */
.js .rv{opacity:0;transform:translateY(30px);clip-path:inset(0 0 14% 0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1), clip-path .8s cubic-bezier(.22,.61,.36,1);}
.js .rv.in{opacity:1;transform:none;clip-path:inset(0 0 0 0);}
.js .rv-s > *{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.js .rv-s.in > *{opacity:1;transform:none;}
.js .rv-s.in > *:nth-child(2){transition-delay:.07s;}
.js .rv-s.in > *:nth-child(3){transition-delay:.14s;}
.js .rv-s.in > *:nth-child(4){transition-delay:.21s;}
.js .rv-s.in > *:nth-child(5){transition-delay:.28s;}
.js .rv-s.in > *:nth-child(6){transition-delay:.35s;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .js .rv,.js .rv-s > *{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}
  .smoke,.scrollcue i{animation:none;}
  .chap{position:static;opacity:1;transform:none;pointer-events:auto;}
  .chaps{display:grid;gap:48px;min-height:0;}
  .tour{height:auto;}
  .tour-stick{position:static;height:auto;padding:60px 0;display:block;}
  .car{position:relative;transform:none;opacity:1;width:70%;margin:0 auto 40px;}
  .backdrop video{filter:saturate(.6) brightness(.42) contrast(1.1);transform:translate(-50%,-50%) scale(1.06);}
}

/* ============================================================
   PARCOURS EN RUBAN — le tracé serpente comme sur une piste
   ============================================================ */
.snake{position:relative;padding:14px 0 6px;}
.snake-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3vw,44px) clamp(20px,3vw,40px);}
.snake-step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;}
.snake-step .badge{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ink);border:2px solid var(--craie);font-family:var(--f-disp);font-weight:800;
  font-size:23px;color:var(--craie);box-shadow:0 0 0 6px var(--ink);}
.snake-step.done .badge{border-color:var(--fluo);color:var(--fluo);}
.snake-step h3{font-size:19px;margin-bottom:7px;}
.snake-step p{color:var(--asphalte);font-size:14.5px;line-height:1.58;font-weight:300;}
.snake-step .when{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.6px;color:var(--fluo);
  text-transform:uppercase;margin-bottom:6px;display:block;}
/* le ruban : deux lignes + un coude à droite, en CSS pur pour rester responsive */
.rib{position:absolute;inset:0;z-index:1;pointer-events:none;}
.rib span{position:absolute;background:var(--craie);}
.rib .r-top{left:6%;right:11%;top:26px;height:3px;}
.rib .r-bot{left:6%;right:11%;bottom:calc(50% - 26px);height:3px;display:none;}
.rib .r-dash{height:3px;}
.rib .d-blue{background:var(--bleu-clair);}
.rib .d-red{background:var(--fluo);}
@media (min-width:861px){
  .snake-grid{grid-template-rows:auto auto;}
  /* rangée 2 lue de droite à gauche : le ruban continue au lieu de repartir */
  .snake-step:nth-child(4){grid-column:3;grid-row:2;}
  .snake-step:nth-child(5){grid-column:2;grid-row:2;}
  .snake-step:nth-child(6){grid-column:1;grid-row:2;}
  .rib .r-top{top:26px;}
  .rib .r-bot{display:block;top:auto;bottom:26px;height:3px;}
  .rib .r-turn{right:11%;top:26px;width:3px;height:calc(100% - 52px);}
  .rib .r-c1{right:11%;top:26px;width:44px;height:44px;background:none;
    border-top:3px solid var(--craie);border-right:3px solid var(--craie);
    border-top-right-radius:22px;transform:translateX(3px);}
  .rib .r-c2{right:11%;bottom:26px;width:44px;height:44px;background:none;
    border-bottom:3px solid var(--craie);border-right:3px solid var(--craie);
    border-bottom-right-radius:22px;transform:translateX(3px);}
  .rib .d1{left:14%;width:9%;top:16px;}
  .rib .d2{left:24%;width:7%;top:16px;}
  .rib .d3{right:28%;width:9%;bottom:16px;}
  .rib .d4{right:38%;width:7%;bottom:16px;}
}
@media (max-width:860px){
  .snake-grid{grid-template-columns:1fr;gap:24px;}
  .rib{display:none;}
}

/* ============================================================
   INFO-BULLES au survol des étiquettes
   ============================================================ */
.infochip{cursor:help;position:relative;}
.infochip:hover,.infochip:focus-visible{color:var(--craie);border-color:var(--fluo);}
#tip{position:fixed;z-index:90;max-width:320px;background:var(--ink-2);border:1px solid var(--line-2);
  border-left:3px solid var(--fluo);padding:14px 16px;border-radius:3px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;}
#tip.on{opacity:1;transform:none;}
#tip b{display:block;font-family:var(--f-disp);font-size:16px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:6px;color:var(--craie);}
#tip span{display:block;font-size:14px;line-height:1.55;color:var(--asphalte);font-weight:300;}
@media (prefers-reduced-motion: reduce){ #tip{transition:none;} }

/* ============================================================
   TARIFS
   ============================================================ */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.tcard{border:1px solid var(--line);background:var(--ink-2);padding:26px 24px;display:grid;gap:14px;align-content:start;}
.tcard h3{font-size:20px;}
.tcard dl{margin:0;display:grid;gap:0;}
.tcard .li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px dashed var(--line);}
.tcard .li:last-child{border-bottom:0;}
.tcard dt{color:var(--asphalte);font-size:14.5px;font-weight:300;}
.tcard dd{margin:0;font-family:var(--f-disp);font-weight:800;font-size:19px;white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.tcard dd small{font-family:var(--f-body);font-weight:500;font-size:12.5px;color:var(--asphalte-2);}
.session{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  border:1px solid var(--fluo);padding:22px 26px;margin-top:24px;background:rgba(240,16,48,.06);}
.session b{font-family:var(--f-disp);font-size:clamp(20px,2.4vw,28px);font-weight:800;text-transform:uppercase;}
.session span{color:var(--asphalte);font-size:14.5px;}
.qualiopi{display:flex;align-items:center;gap:18px;margin-top:26px;}
.qualiopi img{height:64px;width:auto;background:#fff;padding:8px 12px;border-radius:3px;}
.qualiopi p{font-size:13.5px;color:var(--asphalte);line-height:1.55;max-width:52ch;}
.qualiopi a{border-bottom:1.5px solid var(--fluo);padding-bottom:2px;font-weight:600;}

/* ============================================================
   PAGES CENTRES — version page autonome (plus d'overlay plein écran)
   ============================================================ */
.cp-hero{position:relative;min-height:56svh;display:flex;align-items:flex-end;overflow:hidden;margin-top:0;}
.cp-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.52) saturate(.85);}
.cp-hero .wrap{position:relative;z-index:1;padding-top:150px;padding-bottom:44px;}
.cp-hero .loc{font-family:var(--f-mono);font-size:11px;letter-spacing:2.4px;color:var(--fluo);text-transform:uppercase;}
.cp-hero h1{margin:14px 0 0;font-size:clamp(34px,5.6vw,70px);}
.cp-body{padding:clamp(44px,6vw,80px) 0;background:var(--ink);}
.cp-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;}
@media (max-width:860px){ .cp-cols{grid-template-columns:1fr;} }
.cp-cols p{color:var(--asphalte);font-weight:300;line-height:1.7;margin-bottom:16px;}
.cp-facts{border:1px solid var(--line);background:var(--ink-2);}
.cp-facts .li{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);}
.cp-facts .li:last-child{border-bottom:0;}
.cp-facts dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.5px;color:var(--asphalte-2);text-transform:uppercase;}
.cp-facts dd{margin:0;font-size:14.5px;text-align:right;}
.cp-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px;}
.cp-gal img{width:100%;height:220px;object-fit:cover;border:1px solid var(--line);}
.cp-note{margin-top:30px;padding:16px 18px;border-left:3px solid var(--line-2);background:var(--ink-2);
  font-size:13px;color:var(--asphalte-2);line-height:1.6;}
.cp-note a{border-bottom:1px solid var(--line-2);}

/* ============================================================
   BANDEAU RGPD
   ============================================================ */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;max-width:640px;margin-inline:auto;
  background:var(--ink-2);border:1px solid var(--line-2);border-left:3px solid var(--fluo);
  padding:18px 20px;border-radius:4px;box-shadow:0 18px 44px rgba(0,0,0,.6);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  transform:translateY(140%);transition:transform .4s cubic-bezier(.16,.84,.44,1);}
.cookiebar.show{transform:none;}
.cookiebar p{font-size:13px;color:var(--asphalte);line-height:1.55;max-width:60ch;}
.cookiebar p a{border-bottom:1px solid var(--line-2);}
.cookiebar .cb-actions{display:flex;gap:10px;flex:none;}
.cookiebar .btn{padding:10px 18px;font-size:11.5px;}

/* ============================================================
   ANIMATIONS AU SCROLL — une écriture par bloc
   Chaque section entre différemment, selon ce qu'elle raconte.
   Tout part d'un état de repos VISIBLE : les états masqués ne sont
   posés que si JS tourne et que le visiteur n'a pas demandé moins
   de mouvement. Si le script tombe, la page reste lisible.
   ============================================================ */
.sec{position:relative;}
.js .sec::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--fluo),var(--bleu-clair) 32%,transparent 78%);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,.84,.44,1);}
.js .sec.seen::before{transform:scaleX(1);}

/* — en-tête de section : le filet se trace, le titre monte sous un masque — */
.js [data-anim="head"] .eyebrow::before{transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.16,.84,.44,1) .1s;}
.js [data-anim="head"].in .eyebrow::before{transform:scaleX(1);}
.js [data-anim="head"] h2{clip-path:inset(0 0 110% 0);transform:translateY(24px);
  transition:clip-path .85s cubic-bezier(.16,.84,.44,1) .12s, transform .85s cubic-bezier(.16,.84,.44,1) .12s;}
.js [data-anim="head"].in h2{clip-path:inset(0 0 -20% 0);transform:none;}
.js [data-anim="head"] .lead{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease .30s, transform .7s cubic-bezier(.16,.84,.44,1) .30s;}
.js [data-anim="head"].in .lead{opacity:1;transform:none;}

/* — parcours : le ruban se trace comme un tour de piste, les jalons tombent après — */
.js [data-anim="ribbon"] .r-top,
.js [data-anim="ribbon"] .r-bot{transform:scaleX(0);transition:transform 1s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="ribbon"] .r-top{transform-origin:left;}
.js [data-anim="ribbon"] .r-bot{transform-origin:right;transition-delay:.5s;}
.js [data-anim="ribbon"] .r-c1,
.js [data-anim="ribbon"] .r-c2{opacity:0;transition:opacity .4s ease .42s;}
.js [data-anim="ribbon"] .r-dash{transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,.84,.44,1) .55s;}
.js [data-anim="ribbon"].in .r-top,
.js [data-anim="ribbon"].in .r-bot,
.js [data-anim="ribbon"].in .r-dash{transform:scaleX(1);}
.js [data-anim="ribbon"].in .r-c1,
.js [data-anim="ribbon"].in .r-c2{opacity:1;}
.js [data-anim="ribbon"] .snake-step{opacity:0;transform:translateY(26px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="ribbon"] .snake-step .badge{transform:scale(.4);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.js [data-anim="ribbon"].in .snake-step{opacity:1;transform:none;}
.js [data-anim="ribbon"].in .snake-step .badge{transform:none;}
.js [data-anim="ribbon"].in .snake-step:nth-child(1),.js [data-anim="ribbon"].in .snake-step:nth-child(1) .badge{transition-delay:.16s;}
.js [data-anim="ribbon"].in .snake-step:nth-child(2),.js [data-anim="ribbon"].in .snake-step:nth-child(2) .badge{transition-delay:.30s;}
.js [data-anim="ribbon"].in .snake-step:nth-child(3),.js [data-anim="ribbon"].in .snake-step:nth-child(3) .badge{transition-delay:.44s;}
.js [data-anim="ribbon"].in .snake-step:nth-child(4),.js [data-anim="ribbon"].in .snake-step:nth-child(4) .badge{transition-delay:.72s;}
.js [data-anim="ribbon"].in .snake-step:nth-child(5),.js [data-anim="ribbon"].in .snake-step:nth-child(5) .badge{transition-delay:.86s;}
.js [data-anim="ribbon"].in .snake-step:nth-child(6),.js [data-anim="ribbon"].in .snake-step:nth-child(6) .badge{transition-delay:1.00s;}

/* — nos centres : les deux cartes arrivent des deux bords et se rejoignent — */
.js [data-anim="split"] > *{opacity:0;transition:opacity .8s ease, transform .9s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="split"] > *:nth-child(odd){transform:translateX(-56px);}
.js [data-anim="split"] > *:nth-child(even){transform:translateX(56px);transition-delay:.12s;}
.js [data-anim="split"].in > *{opacity:1;transform:none;}

/* — pourquoi IMP : chaque filet se trace, puis le texte monte — */
.js [data-anim="rules"] > *{border-top-color:transparent;}
.js [data-anim="rules"] > *::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="rules"] > *{position:relative;}
.js [data-anim="rules"] > * h3,
.js [data-anim="rules"] > * p{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="rules"].in > *::before{transform:scaleX(1);}
.js [data-anim="rules"].in > * h3,
.js [data-anim="rules"].in > * p{opacity:1;transform:none;}
.js [data-anim="rules"].in > *:nth-child(n)::before{transition-delay:calc((var(--i,0)) * 70ms);}
.js [data-anim="rules"].in > * h3{transition-delay:calc(180ms + var(--i,0) * 70ms);}
.js [data-anim="rules"].in > * p{transition-delay:calc(240ms + var(--i,0) * 70ms);}

/* — chiffres : les cellules se dévoilent par un balayage, les nombres montent — */
.js [data-anim="count"] > div{clip-path:inset(0 100% 0 0);
  transition:clip-path .75s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="count"].in > div{clip-path:inset(0 0 0 0);}
.js [data-anim="count"].in > div:nth-child(2){transition-delay:.1s;}
.js [data-anim="count"].in > div:nth-child(3){transition-delay:.2s;}
.js [data-anim="count"].in > div:nth-child(4){transition-delay:.3s;}

/* — financement : léger basculement, comme des fiches qu'on pose — */
.js [data-anim="tilt"] > *{opacity:0;transform:perspective(900px) rotateX(12deg) translateY(30px);
  transform-origin:50% 0;transition:opacity .6s ease, transform .7s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="tilt"].in > *{opacity:1;transform:none;}
.js [data-anim="tilt"].in > *:nth-child(2){transition-delay:.09s;}
.js [data-anim="tilt"].in > *:nth-child(3){transition-delay:.18s;}
.js [data-anim="tilt"].in > *:nth-child(4){transition-delay:.27s;}

/* — tarifs : les lignes s'impriment une à une — */
.js [data-anim="receipt"] .tcard{opacity:0;transform:translateY(26px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="receipt"].in .tcard{opacity:1;transform:none;}
.js [data-anim="receipt"].in .tcard:nth-child(2){transition-delay:.1s;}
.js [data-anim="receipt"].in .tcard:nth-child(3){transition-delay:.2s;}
.js [data-anim="receipt"] .li{opacity:0;transform:translateX(-14px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="receipt"].in .li{opacity:1;transform:none;
  transition-delay:calc(260ms + var(--i,0) * 60ms);}

/* — débouchés : les métiers apparaissent par à-coups — */
.js [data-anim="pop"] > *{opacity:0;transform:scale(.86);
  transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1);}
.js [data-anim="pop"].in > *{opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 55ms);}

/* — FAQ : chaque question se dévoile par la gauche — */
.js [data-anim="wipe"] details{opacity:0;clip-path:inset(0 0 0 100%);
  transition:opacity .5s ease, clip-path .65s cubic-bezier(.16,.84,.44,1);}
.js [data-anim="wipe"].in details{opacity:1;clip-path:inset(0 0 0 0);
  transition-delay:calc(var(--i,0) * 80ms);}

/* — parallaxe douce sur les en-têtes : la page respire entre les blocs — */
.js .sec-head{will-change:transform;}
.js .sec-head[style*="--py"]{transform:translateY(var(--py,0px));}

@media (prefers-reduced-motion: reduce){
  .js [data-anim] *,.js [data-anim]{transition:none !important;opacity:1 !important;
    transform:none !important;clip-path:none !important;}
  .js .sec::before{transform:scaleX(1) !important;transition:none !important;}
  .js [data-anim="rules"] > *::before{transform:scaleX(1) !important;}
  .js .sec-head{transform:none !important;}
}

/* ============================================================
   PRÉSENTATION DU DIPLÔME — texte long, pensé pour la lecture
   ET pour le référencement : titres hiérarchisés, liens internes.
   ============================================================ */
.prose{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,66px);align-items:start;}
@media (max-width:900px){ .prose{grid-template-columns:1fr;} }
.prose-main > * + *{margin-top:18px;}
.prose-main p{color:var(--asphalte);font-weight:300;line-height:1.75;font-size:16.5px;max-width:70ch;}
.prose-main h3{margin-top:34px;font-size:21px;}
.prose-main a{color:var(--craie);border-bottom:1px solid var(--fluo);padding-bottom:1px;}
.prose-main a:hover{color:var(--bleu-clair);}
.prose-main strong{color:var(--craie);font-weight:600;}
.aside{border:1px solid var(--line);background:var(--ink-2);padding:26px 24px;display:grid;gap:16px;
  position:sticky;top:96px;}
@media (max-width:900px){ .aside{position:static;} }
.aside h3{font-size:17px;}
.aside dl{margin:0;display:grid;gap:0;}
.aside .li{display:grid;gap:3px;padding:12px 0;border-bottom:1px dashed var(--line);}
.aside .li:last-child{border-bottom:0;}
.aside dt{font-family:var(--f-mono);font-size:10px;letter-spacing:1.6px;color:var(--asphalte-2);text-transform:uppercase;}
.aside dd{margin:0;font-size:14.5px;color:var(--craie);line-height:1.5;}

/* les 3 options du diplôme */
.opt3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:26px;}
.opt3 article{border:1px solid var(--line);border-left:3px solid var(--fluo);background:var(--ink-2);
  padding:22px 20px;display:grid;gap:9px;align-content:start;}
.opt3 .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:2px;color:var(--fluo);text-transform:uppercase;}
.opt3 h3{font-size:18px;}
.opt3 p{color:var(--asphalte);font-size:14.5px;line-height:1.6;font-weight:300;}

/* ============================================================
   CONDITIONS D'ACCÈS — pictogrammes au trait
   ============================================================ */
.cond{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;}
.cond article{border:1px solid var(--line);background:var(--ink-2);padding:26px 22px 24px;
  display:grid;gap:12px;align-content:start;transition:border-color .3s, transform .3s;}
.cond article:hover{border-color:var(--line-2);transform:translateY(-3px);}
.cond .ico{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--fluo);}
.cond .ico svg{width:22px;height:22px;}
.cond h3{font-size:17.5px;}
.cond p{color:var(--asphalte);font-size:14.5px;line-height:1.6;font-weight:300;}
.cond .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:1.6px;color:var(--asphalte-2);
  text-transform:uppercase;}

/* numéro d'ordre des conditions : le texte d'introduction y renvoie (1,2,3 pour
   les tests d'entrée, 4,5,6 pour l'entrée en formation), il doit se lire */
.cond .tag b{color:var(--fluo);font-size:13px;font-weight:700;letter-spacing:.5px;}

/* ============================================================
   GALERIE — les vraies photos de formation
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,.84,.44,1);}
.gal figure:hover img{transform:scale(1.05);}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--craie);
  background:linear-gradient(transparent,rgba(11,13,16,.92));}
.gal .big{grid-column:span 2;grid-row:span 2;}
.gal figure{aspect-ratio:3/2;}
.gal .big{aspect-ratio:auto;}
@media (max-width:900px){ .gal{grid-template-columns:repeat(2,1fr);} .gal .big{grid-column:span 2;grid-row:auto;aspect-ratio:3/2;} }

/* les 3 options détaillées sur les pages centres */
.cp-opt{display:grid;gap:16px;margin-top:34px;}
.cp-opt > article{border:1px solid var(--line);border-top:2px solid var(--fluo);background:var(--ink-2);padding:24px 22px;}
.cp-opt h4{font-family:var(--f-disp);font-weight:800;font-size:19px;text-transform:uppercase;margin:0 0 6px;}
.cp-opt .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:2px;color:var(--fluo);text-transform:uppercase;}
.cp-opt p{color:var(--asphalte);font-weight:300;line-height:1.68;font-size:15px;margin:10px 0 0;}
.cp-opt ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;}
.cp-opt li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;color:var(--asphalte);line-height:1.5;}
.cp-opt li::before{content:"";width:5px;height:5px;background:var(--fluo);margin-top:7px;}

/* lien vers une page pilier — l'ancre porte le mot-clé, pas un « en savoir plus » */
.pillar{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:600;
  font-size:14.5px;letter-spacing:.2px;color:var(--craie);border-bottom:1.5px solid var(--fluo);
  padding-bottom:4px;transition:color .2s, gap .2s;}
.pillar:hover{color:var(--bleu-clair);gap:13px;}
.pillar svg{width:13px;height:13px;flex:none;}

/* consentement RGPD — cases de collecte */
.consents{display:grid;gap:12px;margin-top:4px;}
.consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;cursor:pointer;}
.consent input{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:none;margin:2px 0 0;
  border:1.5px solid var(--line-2);border-radius:2px;background:var(--ink-2);cursor:pointer;
  display:grid;place-content:center;transition:border-color .2s, background .2s;}
.consent input::before{content:"";width:10px;height:6px;border-left:2px solid var(--ink);
  border-bottom:2px solid var(--ink);transform:rotate(-45deg) scale(0);transition:transform .15s ease;
  margin-top:-2px;}
.consent input:checked{background:var(--fluo);border-color:var(--fluo);}
.consent input:checked::before{transform:rotate(-45deg) scale(1);border-color:#fff;}
.consent input:focus-visible{outline:2px solid var(--fluo);outline-offset:2px;}
.consent span{font-size:13.5px;line-height:1.5;color:var(--asphalte);font-weight:300;}
.consent b{color:var(--craie);font-weight:600;}
.consent em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--asphalte-2);margin-left:6px;}
.consent a{color:var(--craie);border-bottom:1px solid var(--fluo);}
.consent.err input{border-color:var(--fluo);box-shadow:0 0 0 4px rgba(240,16,48,.16);}

/* ============================================================================
   PASSE MOBILE — v28
   Les règles responsive précédentes s'étaient accumulées section par section,
   sur plusieurs points de rupture différents et rien en dessous de 760 px. Ce
   bloc reprend le mobile de façon cohérente, en trois paliers :
     ≤ 900 px  tablette et téléphone  — la navigation bascule en menu
     ≤ 640 px  téléphone              — densité, cibles tactiles, allègement
     ≤ 380 px  petit téléphone        — derniers ajustements de typographie
   Il est placé en fin de feuille pour primer sur les règles antérieures.
   ============================================================================ */

html{-webkit-text-size-adjust:100%;}
a,button,summary,label,.infochip{-webkit-tap-highlight-color:rgba(240,16,48,.18);}

/* ---------- le bouton menu ---------- */
.burger{display:none;width:46px;height:46px;flex:none;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-2);border-radius:3px;cursor:pointer;padding:0;
  transition:border-color .2s, background .2s;}
.burger:hover{border-color:var(--fluo);}
.burger i{display:block;position:relative;width:19px;height:1.5px;background:var(--craie);
  transition:background .2s;}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:1.5px;
  background:var(--craie);transition:transform .3s cubic-bezier(.16,.84,.44,1), top .2s;}
.burger i::before{top:-6px;} .burger i::after{top:6px;}
.nav.open .burger i{background:transparent;}
.nav.open .burger i::before{top:0;transform:rotate(45deg);}
.nav.open .burger i::after{top:0;transform:rotate(-45deg);}

/* ---------- le panneau de navigation ---------- */
.navpanel{position:fixed;inset:0;z-index:49;background:rgba(11,13,16,.97);
  backdrop-filter:blur(14px);display:grid;align-content:center;gap:4px;
  padding:90px var(--gut) 40px;opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s;overflow-y:auto;}
.nav.open ~ .navpanel,.navpanel.open{opacity:1;visibility:visible;}
.navpanel a{display:block;font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,7vw,38px);line-height:1.1;letter-spacing:.4px;color:var(--craie);
  padding:11px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(14px);transition:opacity .4s ease, transform .4s cubic-bezier(.16,.84,.44,1);}
.navpanel.open a{opacity:1;transform:none;}
.navpanel.open a:nth-child(1){transition-delay:.06s;}
.navpanel.open a:nth-child(2){transition-delay:.11s;}
.navpanel.open a:nth-child(3){transition-delay:.16s;}
.navpanel.open a:nth-child(4){transition-delay:.21s;}
.navpanel.open a:nth-child(5){transition-delay:.26s;}
.navpanel.open a:nth-child(6){transition-delay:.31s;}
.navpanel .np-cta{margin-top:22px;border-bottom:0;background:var(--fluo);color:#fff;
  text-align:center;border-radius:3px;padding:18px;font-size:16px;letter-spacing:1.2px;}
.navpanel .np-tel{border-bottom:0;font-family:var(--f-body);font-weight:600;text-transform:none;
  font-size:17px;color:var(--asphalte);padding-top:18px;}

@media (max-width:900px){
  .burger{display:flex;}
  .nav .btn-line{display:none;}          /* le CTA passe dans le panneau */
  body.navopen{overflow:hidden;}
}
@media (min-width:901px){ .navpanel{display:none;} }

/* ============================================================================
   ≤ 640 px — téléphone
   ============================================================================ */
@media (max-width:640px){

  /* --- cibles tactiles : rien en dessous de 44 px de haut --- */
  .infochip{padding:11px 14px;font-size:11.5px;}
  .faq summary{padding:20px 42px 20px 0;}
  .pillar{padding:12px 0;}
  .centre a.more{padding:12px 0 8px;}
  .jobs{gap:9px;}

  /* --- hero : on respire moins, on garde tout à l'écran --- */
  .hero{min-height:auto;padding:96px 0 34px;}
  .hero h1{font-size:clamp(31px,9vw,44px);max-width:none;}
  .hero .lead{font-size:15.5px;}
  .hero-cta{gap:10px;}
  .hero-cta .btn{flex:1 1 100%;justify-content:center;}
  .hero-foot{flex-direction:column;align-items:stretch;gap:16px;}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .stat b{font-size:26px;}
  .stat span{font-size:9.5px;letter-spacing:1px;}
  .scrollcue{display:none;}
  .opts{gap:10px;}
  .opt{padding:13px 15px 15px;}
  .opt b{font-size:15.5px;}
  .optlist li{font-size:13px;}

  /* --- la scène animée : plus courte, texte lisible par-dessus --- */
  .tour{height:250vh;}
  .chap{bottom:4svh;}
  .chap h2{font-size:clamp(21px,6.4vw,28px);margin:10px 0 12px;}
  .chap p{font-size:14.5px;line-height:1.55;}
  .chap .tags{margin-top:14px;gap:6px;}
  .chap .tags span{padding:5px 9px;font-size:9.5px;}
  .tveil-l,.tveil-r{background:linear-gradient(180deg, transparent 22%, rgba(11,13,16,.94) 66%);}

  /* --- contenu : marges et titres resserrés --- */
  .sec{padding:52px 0;}
  h2{font-size:clamp(23px,6.6vw,30px);}
  .sec-head{gap:12px;margin-bottom:26px;}
  .lead{font-size:15.5px;}
  .prose-main p{font-size:15.5px;line-height:1.68;}
  .prose-main h3{margin-top:26px;font-size:19px;}
  .snake-step .badge{width:44px;height:44px;font-size:20px;}
  .cond article{padding:20px 18px;}
  .centre{padding:24px 20px 22px;}
  .tcard{padding:20px 18px;}
  .tcard dd{font-size:17px;}
  .session{padding:18px 20px;gap:16px;}
  .band div{padding:22px 18px;}
  .qualiopi{flex-direction:column;align-items:flex-start;gap:13px;}

  /* --- galerie : une seule colonne, l'image large en premier --- */
  .gal{grid-template-columns:1fr;gap:9px;}
  .gal .big{grid-column:auto;}

  /* --- formulaire : champs pleine largeur, 16 px pour éviter le zoom iOS --- */
  .row2{grid-template-columns:1fr;}
  .field input,.field textarea,.field select{font-size:16px;padding:14px;}
  .consent input{width:22px;height:22px;}
  .consent span{font-size:13px;}
  .form .btn{width:100%;justify-content:center;}

  /* --- pages centres --- */
  .cp-hero{min-height:46svh;}
  .cp-hero .wrap{padding-top:96px;padding-bottom:30px;}
  .cp-facts .li{flex-direction:column;gap:3px;}
  .cp-facts dd{text-align:left;}
  .cp-gal img{height:190px;}
  .cp-close{top:14px;right:14px;width:42px;height:42px;}

  /* --- pied de page et bouton flottant --- */
  .fgrid{grid-template-columns:1fr;gap:26px;}
  .fbot{flex-direction:column;gap:12px;}
  .floatcta{right:14px;bottom:14px;padding:13px 18px;font-size:11.5px;}

  /* --- info-bulle : pleine largeur en bas d'écran, refermable au doigt --- */
  #tip{left:12px !important;right:12px;max-width:none;width:auto;
    top:auto !important;bottom:14px;padding:16px 18px;}
  #tip::after{content:"Toucher pour fermer";display:block;margin-top:10px;
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--asphalte-2);}
}

/* ============================================================================
   ≤ 380 px — petit téléphone
   ============================================================================ */
@media (max-width:380px){
  :root{--gut:16px;}
  .hero h1{font-size:29px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:last-child{grid-column:span 2;}
  .brand .chip{padding:6px 10px;}
  .brand .chip img{height:24px;}
  .navpanel a{font-size:24px;padding:9px 0;}
}

/* ============================================================================
   Téléphone couché — la hauteur devient la ressource rare
   ============================================================================ */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:82px 0 26px;}
  .hero h1{font-size:30px;}
  .hero-foot{flex-direction:row;}
  .stats{display:flex;}
  .navpanel{align-content:start;padding-top:76px;}
  .navpanel a{font-size:19px;padding:7px 0;}
  .cp-hero{min-height:78svh;}
}

/* ============================================================================
   v29 — RÉÉQUILIBRAGE DE LA SCÈNE SUR MOBILE
   Sur téléphone, le fond de piste et la voiture occupaient tout l'écran et le
   texte, qui porte pourtant l'information, se retrouvait tassé en bas sur un
   fond chargé. On sépare franchement l'écran en deux : la voiture vit dans la
   moitié haute, le texte possède la moitié basse sur un fond qui lui appartient.
   ============================================================================ */
@media (max-width:1040px){
  /* Le bloc texte occupe le tiers bas de l'écran et reste DÉCOLLÉ du bord :
     collé en bas, il se lisait mal et paraissait secondaire alors qu'il porte
     l'information. Il commence donc vers la moitié de la hauteur et s'arrête
     bien avant le bas. */
  .chap{top:auto;bottom:15svh;left:0;right:0;height:auto;min-height:33svh;
    padding:0 var(--gut);justify-content:flex-end;}
  .chap.l,.chap.r{left:0;right:0;}

  /* le voile devient un vrai fond de lecture : dégradé franc, opaque sous la
     ligne de flottaison, pour que le texte n'ait plus la piste derrière lui */
  .tveil-l,.tveil-r{
    background:linear-gradient(180deg,
      transparent 22%,
      rgba(11,13,16,.40) 36%,
      rgba(11,13,16,.90) 48%,
      rgba(11,13,16,.97) 60%,
      var(--ink) 74%);}

  /* le fond de piste s'efface davantage : il est décor, pas sujet */
  .tbg{filter:saturate(.62) brightness(.50) contrast(1.05);}
}

@media (max-width:640px){
  .chap{min-height:34svh;bottom:16svh;}
  .chap .num{font-size:10.5px;letter-spacing:2.2px;}
  .chap h2{font-size:clamp(23px,7vw,30px);margin:11px 0 13px;line-height:1.08;}
  .chap p{font-size:15px;line-height:1.62;color:var(--craie);}
  .chap .tags{margin-top:16px;}
  .chap .tags span{background:rgba(11,13,16,.55);}
}

/* les trois premiers jalons du parcours passaient derrière le ruban blanc :
   on décale leur colonne de texte sous la ligne */
@media (min-width:861px){
  .snake-step:nth-child(-n+3) > div:not(.badge){padding-top:30px;}
}

/* ============================================================================
   PAGE « CONDUITE & SÉCURITÉ » — gabarit template-conduite.php
   Réutilise les variables, boutons, champs et révélations du thème ; tout ce qui
   est propre à cette page porte le préfixe .cs- pour ne rien affecter ailleurs.
   ============================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.cs-sec{scroll-margin-top:70px;}
.navlinks a[aria-current="page"]{color:var(--craie);}
.navlinks a[aria-current="page"]::after{width:100%;}
.navlinks a{white-space:nowrap;}
/* 7 entrées de menu : on resserre entre 901 et 1180 px pour qu'elles tiennent sur une ligne */
@media (min-width:901px) and (max-width:1180px){
  .navlinks{gap:clamp(11px,1.5vw,18px);}
  .navlinks a{font-size:12.5px;letter-spacing:.2px;}
  .nav > .btn{padding-left:16px;padding-right:16px;}
}

/* --- 1. hero --- */
.cs-hero{position:relative;min-height:min(88svh,860px);display:flex;align-items:flex-end;overflow:hidden;}
.cs-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:brightness(.56) saturate(.92);}
.cs-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,13,16,.58) 0%, rgba(11,13,16,.08) 36%, rgba(11,13,16,.9) 100%),
    linear-gradient(90deg, rgba(11,13,16,.72) 0%, transparent 64%);}
.cs-hero .wrap{position:relative;z-index:1;padding-top:150px;padding-bottom:clamp(38px,6vw,78px);display:grid;gap:18px;justify-items:start;}
.cs-hero .loc{font-family:var(--f-mono);font-size:11px;letter-spacing:2.4px;color:var(--fluo);text-transform:uppercase;}
.cs-hero h1{margin:0;font-size:clamp(34px,5.4vw,68px);max-width:17ch;}
.cs-accroche{font-size:clamp(18px,1.9vw,23px);font-weight:500;line-height:1.4;max-width:44ch;color:var(--craie);}
.cs-intro{color:#C3CAD4;font-weight:300;max-width:64ch;font-size:clamp(15px,1.3vw,17px);line-height:1.7;}
.cs-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}

/* --- blocs de texte et photos --- */
.cs-split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
@media (max-width:900px){ .cs-split{grid-template-columns:1fr;} }
.cs-text > * + *{margin-top:18px;}
.cs-text p{color:var(--asphalte);font-weight:300;line-height:1.75;font-size:16.5px;max-width:68ch;}
.cs-text strong{color:var(--craie);font-weight:600;}
.cs-wide{margin-top:34px;}
.cs-photo{margin:0;position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);aspect-ratio:3/2;}
.cs-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,.84,.44,1);}
.cs-photo:hover img{transform:scale(1.04);}
.cs-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--craie);background:linear-gradient(transparent,rgba(11,13,16,.92));}
.cs-ico{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--fluo);flex:none;}
.cs-ico svg{width:22px;height:22px;}

/* --- 2. éléments de réassurance --- */
.cs-proofs{list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);}
.cs-proofs li{background:var(--ink-2);padding:24px 22px;display:grid;gap:14px;align-content:start;font-family:var(--f-disp);
  font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.15;letter-spacing:.3px;}

@media (max-width:900px){ .cs-proofs{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .cs-proofs{grid-template-columns:1fr;} }

/* --- 3. infrastructures --- */
.cs-mosaic{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:12px;}
.cs-mosaic .cs-big{grid-row:span 2;aspect-ratio:auto;min-height:320px;}
@media (max-width:760px){
  .cs-mosaic{grid-template-columns:1fr;grid-template-rows:auto;}
  .cs-mosaic .cs-big{grid-row:auto;aspect-ratio:3/2;min-height:0;}
}
.cs-tiles{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);}
.cs-tiles li{background:var(--ink-2);padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  color:var(--craie);font-size:15.5px;line-height:1.45;}
.cs-tiles b{font-family:var(--f-mono);font-size:11px;letter-spacing:2px;color:var(--fluo);font-weight:500;}
@media (max-width:900px){ .cs-tiles{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cs-tiles{grid-template-columns:1fr;} }
.cs-after{margin-top:26px;color:var(--asphalte);font-weight:300;max-width:68ch;line-height:1.7;}

/* --- 4. domaines de formation --- */
.cs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;}
.cs-card{border:1px solid var(--line);background:var(--ink-2);padding:26px 22px 24px;display:grid;gap:12px;align-content:start;
  transition:border-color .3s, transform .3s;}
.cs-card:hover{border-color:var(--line-2);transform:translateY(-3px);}
.cs-card h3{font-size:18.5px;}
.cs-card p{color:var(--asphalte);font-size:14.5px;line-height:1.62;font-weight:300;}

/* --- 5. sur mesure --- */
.cs-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.cs-checks li{display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--craie);font-size:15.5px;line-height:1.5;}
.cs-checks li::before{content:"";width:6px;height:6px;background:var(--fluo);margin-top:8px;}
.cs-cta-box{margin-top:clamp(34px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;
  padding:26px 28px;border:1px solid var(--line);border-left:3px solid var(--fluo);background:var(--ink-2);}
.cs-cta-box p{font-size:18px;color:var(--craie);max-width:52ch;line-height:1.5;}

/* --- 6. parcours pédagogique en 5 étapes (horizontal en bureau, vertical en mobile) --- */
.cs-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);}
.cs-path li{position:relative;padding-right:16px;display:grid;gap:14px;align-content:start;}
.cs-path .n{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--fluo);color:var(--fluo);display:grid;place-items:center;
  font-family:var(--f-mono);font-weight:500;background:var(--ink);position:relative;z-index:1;}
.cs-path li:not(:last-child)::after{content:"";position:absolute;left:48px;top:21px;right:6px;height:1.5px;background:var(--line-2);}
.cs-path h3{font-size:16.5px;line-height:1.2;}
@media (max-width:900px){
  .cs-path{grid-template-columns:1fr;}
  .cs-path li{grid-template-columns:42px 1fr;gap:0 16px;padding:0 0 26px;align-items:start;}
  .cs-path li:last-child{padding-bottom:0;}
  .cs-path li:not(:last-child)::after{left:20.25px;top:48px;right:auto;bottom:6px;width:1.5px;height:auto;}
  .cs-path h3{padding-top:9px;font-size:17.5px;}
}
.cs-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(34px,4vw,52px);}
@media (max-width:640px){ .cs-duo{grid-template-columns:1fr;} }

/* --- 7. publics --- */
.cs-publics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);}
.cs-publics li{background:var(--ink-2);padding:24px 20px;display:grid;gap:14px;align-content:start;color:var(--craie);
  font-size:15.5px;line-height:1.45;font-weight:500;}

@media (max-width:1000px){ .cs-publics{grid-template-columns:repeat(2,1fr);} .cs-publics li:last-child:nth-child(odd){grid-column:1 / -1;} }
@media (max-width:480px){ .cs-publics{grid-template-columns:1fr;} }
/* --- 8. marchés publics --- */
.cs-public{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;padding:clamp(26px,4vw,52px);
  border:1px solid var(--line-2);background:linear-gradient(140deg, rgba(0,64,160,.28), var(--ink-2) 62%);}
.cs-public .eyebrow{margin-bottom:14px;}
.cs-public h2{margin-bottom:22px;font-size:clamp(28px,3.8vw,46px);}
.cs-public p{color:#C3CAD4;font-weight:300;line-height:1.72;max-width:62ch;margin-bottom:16px;}
.cs-public .btn{margin-top:12px;}
.cs-public aside{border:1px solid var(--line);background:rgba(11,13,16,.55);padding:24px 22px;display:grid;gap:16px;}
.cs-public aside h3{font-size:17px;}
@media (max-width:900px){ .cs-public{grid-template-columns:1fr;} }

/* --- 9. formulaire --- */
.cs-form .btn{justify-self:start;}
.field label .req,.note .req{color:var(--fluo);}
.field-err{font-size:12.5px;line-height:1.4;color:#FF6B7E;}
.field [aria-invalid="true"]{border-color:var(--fluo);}
.cs-prefill{font-size:13px;color:var(--bleu-clair);border-left:2px solid var(--bleu-clair);padding:6px 12px;}
.cs-prefill[hidden]{display:none;}

@media (max-width:640px){
  .cs-hero{min-height:0;}
  .cs-hero .wrap{padding-top:124px;}
  .cs-cta .btn,.cs-cta-box .btn,.cs-public .btn,.cs-form .btn{width:100%;justify-content:center;text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  .cs-card,.cs-photo img{transition:none;}
  .cs-card:hover{transform:none;}
  .cs-photo:hover img{transform:none;}
}