/* ============ CapChauffeur — « Bitume & Or » (système de design) ============ */
:root{
  --encre:#15181E;--craie:#FAF9F6;--panneau:#FFFFFF;
  --or:#FFC400;--or-d:#8A6300;--or-soft:#FFF6D6;
  --route:#0B7A4B;--route-soft:#E7F3EC;
  --brume:#666B73;--trait:#E7E3DB;
  --radius:16px;--wrap:1120px;
  --sans:'General Sans','Satoshi','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --disp:'Clash Display','Archivo','Segoe UI',system-ui,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--craie)}
body{font-family:var(--sans);color:var(--encre);background:var(--craie);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.center{text-align:center}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;color:var(--encre)}
h1{font-size:clamp(2.4rem,6vw,4.6rem);text-transform:uppercase}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);text-transform:uppercase;letter-spacing:-.02em}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{color:#33373E}
.lead{font-size:1.18rem;color:var(--brume)}
.hl{color:var(--or-d)}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:800;font-size:.76rem;color:var(--or-d);display:block;margin-bottom:.6rem}

/* motif ligne jaune */
.roadline{height:6px;border:0;margin:0;background:repeating-linear-gradient(90deg,var(--or) 0 34px,transparent 34px 60px)}

/* accessibilité RGAA */
.skip{position:absolute;left:8px;top:-48px;background:var(--encre);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:200;font-weight:700;transition:top .15s}
.skip:focus{top:8px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--or-d);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.stars{color:var(--or);letter-spacing:2px}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--or);color:var(--encre);font-family:var(--sans);font-weight:800;
  padding:.9rem 1.6rem;border-radius:12px;text-decoration:none;border:2px solid var(--or);cursor:pointer;font-size:1rem;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,196,0,.4)}
.btn--lg{padding:1.05rem 2rem;font-size:1.06rem}
.btn--sm{padding:.55rem 1.1rem;font-size:.9rem}
.btn--block{display:flex;width:100%}
.btn--ghost{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn--ghost:hover{background:var(--encre);color:#fff;box-shadow:none}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--disp);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;text-decoration:none;color:var(--encre);text-transform:uppercase}
.brand__mark{width:34px;height:34px;flex-shrink:0;display:block}
.brand--light{color:#fff}
.nav__links{display:flex;align-items:center;gap:1.5rem}
.nav__links a{text-decoration:none;color:var(--encre);font-weight:600;font-size:.95rem}
.nav__links a:not(.btn):hover{color:var(--or-d)}
.nav__burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;background:none;border:0;border-radius:10px;cursor:pointer;color:var(--encre)}

/* hero */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.hero h1{margin:.4rem 0 .9rem}
.hero__sub{font-size:1.2rem;color:var(--brume);max-width:520px;margin-bottom:1.6rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero__proof{display:flex;align-items:center;gap:.7rem;margin-top:1.5rem;font-size:.92rem;color:var(--brume)}
.hero__proof .stars{font-size:1rem}
.hero__panel{background:var(--encre);border-radius:22px;padding:1.5rem;color:#fff;position:relative;overflow:hidden}
.hero__panel::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,var(--or) 0 26px,transparent 26px 48px)}
.hpitem{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid #262B33}
.hpitem:last-child{border-bottom:0}
.hpitem .ic{width:22px;height:22px;color:var(--or);flex-shrink:0}
.hpitem b{font-family:var(--disp);font-size:1.02rem}
.hpitem small{color:#AEB4BC;font-size:.85rem;display:block}

/* sections */
.section{padding:clamp(3rem,6vw,5rem) 0}
.section--alt{background:var(--panneau);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.section--dark{background:var(--encre);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:#C4C9D0}
.section--dark .eyebrow{color:var(--or)}
.section--cta{background:var(--encre);color:#fff;text-align:center}
.section--cta h2{color:#fff}
.section--cta p{color:#C4C9D0}
.sec__head{max-width:640px;margin-bottom:2rem}

/* page interne (légal / checkout / géo) */
.page-hero{padding:clamp(2.4rem,5vw,3.4rem) 0;border-bottom:1px solid var(--trait)}
.page-hero h1{font-size:clamp(1.9rem,4vw,3rem)}
.page-hero p{color:var(--brume);margin-top:.5rem}
.crumb{font-size:.85rem;color:var(--brume);padding:.9rem 0}
.crumb a{color:var(--or-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* bloc aversion à la perte */
.loss{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.loss__card{background:#1D222B;border:1px solid #2A303A;border-radius:16px;padding:1.4rem}
.loss__card b{font-family:var(--disp);font-size:1.9rem;color:var(--or);display:block}
.loss__card span{color:#C4C9D0;font-size:.95rem}

/* problème / pains */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.pain{background:var(--panneau);border:1px solid var(--trait);border-radius:var(--radius);padding:1.5rem;text-align:center}
.pain__ic{width:52px;height:52px;border-radius:14px;background:var(--or-soft);border:1px solid #F0E3B0;color:var(--encre);display:flex;align-items:center;justify-content:center;margin:0 auto .8rem}
.pain__ic .ic{width:26px;height:26px}
.pain p{font-weight:600;color:var(--encre)}

/* cartes / features */
.grid{display:grid;gap:1rem;margin-top:2rem}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panneau);border:1px solid var(--trait);border-radius:var(--radius);padding:1.4rem}
.feature{display:flex;gap:1rem}
.feature__ic{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--or-soft);color:var(--encre);display:flex;align-items:center;justify-content:center}
.feature__ic .ic{width:26px;height:26px}
.feature p{color:var(--brume);font-size:.95rem;margin-top:.2rem}

/* avis */
.avis .stars{display:block;margin-bottom:.6rem}
.avis p{font-style:italic;color:#33373E}
.avis cite{display:block;margin-top:.8rem;font-weight:700;font-style:normal;font-size:.9rem;color:var(--encre)}
.tag{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--or-soft);color:var(--or-d);padding:.15rem .45rem;border-radius:5px;margin-left:.3rem}

/* offres */
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--panneau);border:1px solid var(--trait);border-radius:18px;padding:1.5rem;position:relative}
.plan--featured{border:2px solid var(--encre);box-shadow:0 18px 40px rgba(21,24,30,.1)}
.plan__name{font-family:var(--disp)}
.plan__price{font-family:var(--disp);font-size:2.1rem;font-weight:800;margin:.4rem 0 .1rem}
.plan__old{font-size:1rem;color:var(--brume);text-decoration:line-through;margin-right:.35rem}
.plan__sub{color:var(--brume);font-size:.88rem;margin-bottom:1rem}
.plan__3fois{color:var(--brume);font-size:.88rem;font-weight:600;margin:-.1rem 0 .3rem}
.offre__note{margin-top:1rem;font-size:.88rem;color:var(--brume)}
.plan__list{list-style:none;display:grid;gap:.45rem;margin:0 0 1.3rem;font-size:.9rem}
.plan__list li{padding-left:1.5rem;position:relative}
.plan__list li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:2px solid var(--route);border-bottom:2px solid var(--route);transform:rotate(-45deg)}
.plan .btn{margin-top:auto}
.plan__badge{position:absolute;top:-12px;left:1.4rem;background:var(--encre);color:#fff;font-family:var(--sans);font-weight:800;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;padding:.28rem .7rem;border-radius:7px}

/* garantie */
.guar{display:flex;gap:1.2rem;align-items:center;background:var(--route-soft);border:1px solid #CBE7D6;border-radius:18px;padding:1.5rem 1.7rem;margin-top:1.4rem}
.guar__ic{width:54px;height:54px;flex-shrink:0;border-radius:14px;background:var(--route);color:#fff;display:flex;align-items:center;justify-content:center}
.guar__ic .ic{width:28px;height:28px;stroke:#fff}
.guar h3{color:var(--route)}
.guar p{color:#245c42;margin-top:.2rem}
.badge-guarantee{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;background:var(--route);color:#fff;margin-bottom:1rem}
.badge-guarantee .ic{width:30px;height:30px;stroke:#fff}

/* capture e-mail */
.capture{background:var(--encre);color:#fff;text-align:center}
.capture h2{color:#fff}
.capture .lead{color:#C4C9D0}
.capture__form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;max-width:520px;margin:1.5rem auto 0}
.capture__form input[type=email]{flex:1;min-width:220px;padding:.9rem 1.1rem;border-radius:12px;border:1px solid #2A303A;background:#1D222B;color:#fff;font-size:1rem;font-family:inherit}
.capture__mini{font-size:.8rem;color:#AEB4BC;margin-top:.9rem}
.capture__mini a{color:var(--or)}

/* faq */
.faq{display:grid;gap:.7rem;margin-top:2rem}
.faq__item{background:var(--panneau);border:1px solid var(--trait);border-radius:14px;padding:1.1rem 1.4rem}
.faq__item summary{font-family:var(--disp);font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:1.5rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:0;top:-3px;font-size:1.4rem;color:var(--or-d)}
.faq__item[open] summary::after{content:"–"}
.faq__item p{margin-top:.6rem;color:var(--brume)}
.faq__item a{color:var(--or-d)}

/* footer */
.footer{background:var(--encre);color:#AEB4BC;padding:3rem 0 1.5rem}
.footer__inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer .brand{color:#fff}
.footer__note{font-size:.85rem;color:#8B929B;max-width:460px;margin-top:.8rem}
.footer__links{display:flex;flex-direction:column;gap:.5rem}
.footer__links a{color:#C4C9D0;text-decoration:none;font-size:.9rem}
.footer__links a:hover{color:var(--or)}
.footer__copy{text-align:center;color:#8B929B;font-size:.8rem;margin-top:2rem;border-top:1px solid #262B33;padding-top:1.2rem}

/* légal / checkout */
.legal{padding:2.5rem 0 4rem}
.legal h2{font-size:1.25rem;margin:2rem 0 .6rem}
.legal h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.legal p,.legal li{color:#33373E;font-size:.98rem}
.legal ul{margin:.4rem 0 1rem 1.2rem}
.legal a{color:var(--or-d)}
.legal a.btn{color:var(--encre)}
.legal .updated{color:var(--brume);font-size:.85rem;margin-bottom:1.5rem}
.ph{background:var(--or-soft);padding:.05rem .35rem;border-radius:4px;font-weight:600}
.checkout{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;margin-top:2.5rem;align-items:start}
.checkout__summary{background:var(--panneau);border:1px solid var(--trait);border-radius:var(--radius);padding:1.6rem;position:sticky;top:86px}
.checkout__summary h3{margin-bottom:1rem}
.checkout__line{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:1rem;row-gap:.15rem;padding:.5rem 0;border-bottom:1px solid var(--trait);font-size:.95rem}
.checkout__total{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:800;font-size:1.3rem;padding-top:.9rem}
.checkout__list{list-style:none;margin:1rem 0 0;display:grid;gap:.4rem;font-size:.9rem}
.form-row{margin-bottom:1rem}
.form-row label{display:block;font-weight:600;margin-bottom:.3rem;font-size:.9rem}
.form-row input[type=text],.form-row input[type=email]{width:100%;padding:.8rem 1rem;border:1px solid var(--trait);border-radius:10px;font-size:1rem;font-family:inherit;background:#fff}
.checkbox{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:#33373E;margin:1rem 0}
.checkbox input{margin-top:.25rem;flex-shrink:0}
.pay-note{background:var(--or-soft);border:1px solid #F0E3B0;border-radius:10px;padding:.85rem 1rem;font-size:.85rem;margin:1.2rem 0}

/* pages géo */
.city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem}
.city-fact{background:var(--panneau);border:1px solid var(--trait);border-radius:var(--radius);padding:1.1rem 1.2rem}
.city-fact strong{display:block;color:var(--or-d);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}
.city-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;list-style:none;padding:0}
.city-links a{display:inline-block;background:var(--panneau);border:1px solid var(--trait);border-radius:999px;padding:.4rem .9rem;text-decoration:none;color:var(--encre);font-weight:600;font-size:.9rem}
.city-links a:hover{border-color:var(--or);background:var(--or-soft)}

/* barre CTA collante (mobile) */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:1rem;background:var(--encre);color:#fff;padding:.7rem 1rem;border-top:3px solid var(--or)}
.sticky b{font-family:var(--disp);font-size:1.05rem;display:block}
.sticky small{font-size:.78rem;color:#AEB4BC;display:block}

/* responsive */
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr}.hero__panel{order:-1}
  .loss{grid-template-columns:1fr}.pains{grid-template-columns:1fr}
  .grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}
  .pricing{grid-template-columns:repeat(2,1fr)}
  .checkout{grid-template-columns:1fr}.checkout__summary{position:static}
  .nav__links{position:fixed;inset:69px 0 auto 0;background:var(--craie);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 24px 1.5rem;border-bottom:1px solid var(--trait);box-shadow:0 24px 32px -20px rgba(21,24,30,.28);display:none}
  .nav__links.open{display:flex}
  .nav__links a{padding:.9rem 0;border-bottom:1px solid var(--trait)}
  .nav__burger{display:flex}

  /* ---- Bas d'ecran : un seul appel a l'action sous le pouce ----
     La barre d'achat, le bouton d'Hellene et le bandeau cookies visaient tous les trois
     le meme coin. Le bandeau (z-index 200) recouvrait le bouton d'achat (z-index 60) au
     moment precis du choix, et Hellene se posait a l'interieur de la barre.
     Une hauteur de reference unique les empile. :has() ne vise que les pages qui portent
     reellement la barre (3 sur 137) : ailleurs, et sur un navigateur sans :has(), on
     retrouve exactement le comportement d'avant. */
  /* Repli seulement : main.js mesure la barre et republie sa hauteur reelle ici.
     Devinee, elle etait fausse de 37 px (le texte passe a la ligne sous 375 px). */
  :root{--barre-cta:112px}
  .sticky{display:flex}
  body:has(.sticky){padding-bottom:var(--barre-cta)}
  body:has(.sticky) .hll-launch{bottom:calc(var(--barre-cta) + 14px)}
  body.cc-open .sticky,body.cc-open .hll-launch{display:none}
}
@media(max-width:520px){.pricing{grid-template-columns:1fr}.hero__cta{flex-direction:column}}
/* Refus du mouvement : on NEUTRALISE sans casser. `animation:none` rendrait l'élément
   à son état d'AVANT animation — donc invisible si l'animation le révélait. Une durée
   quasi nulle saute à l'état final : rien ne bouge, rien ne disparaît. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* tableau calendrier d'examen */
.caltable-wrap{overflow-x:auto;margin-top:1.5rem}
.caltable-wrap:focus-visible{outline:3px solid var(--or-d);outline-offset:2px}
.caltable{width:100%;border-collapse:collapse;min-width:520px;background:var(--panneau);border:1px solid var(--trait);border-radius:12px;overflow:hidden;font-size:.95rem}
.caltable caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.caltable thead tr{background:var(--encre);color:#fff;text-align:left}
.caltable th{padding:12px 14px;font-family:var(--disp);font-weight:700}
.caltable td{padding:11px 14px;border-bottom:1px solid var(--trait)}
.caltable tbody tr:nth-child(even){background:#FBFAF5}
.caltable tbody tr:last-child td{border-bottom:0}
.caltable strong{font-variant-numeric:tabular-nums}
.caltable .sess{color:var(--route);font-weight:600}
.calnote{font-size:.85rem;color:var(--brume);margin-top:.9rem}

/* ---- Bandeau cookies (RGPD / CNIL) ---- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--encre);color:#fff;border-top:3px solid var(--or);padding:1rem 1.1rem;box-shadow:0 -10px 34px rgba(0,0,0,.28);display:none}
.cookie.show{display:block}
.cookie__in{max-width:var(--wrap);margin:0 auto;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.cookie__txt{flex:1;min-width:260px;font-size:.9rem;color:#C4C9D0;margin:0}
.cookie__txt strong{color:#fff}
.cookie__txt a{color:var(--or)}
.cookie__btns{display:flex;gap:.55rem;flex-wrap:wrap}
.cookie .btn{padding:.6rem 1.15rem;font-size:.9rem}
.cookie .btn--refuse{background:transparent;color:#fff;border-color:#3a434f}
.cookie .btn--refuse:hover{background:#1D222B;color:#fff;box-shadow:none}
.cookie .btn--perso{background:transparent;color:#C4C9D0;border-color:transparent;text-decoration:underline;padding-left:.4rem;padding-right:.4rem}
.cookie__cats{max-width:var(--wrap);margin:1rem auto 0;display:none;gap:.7rem;flex-wrap:wrap}
.cookie.perso .cookie__cats{display:flex}
.cookie__cat{background:#1D222B;border:1px solid #2A303A;border-radius:12px;padding:.8rem 1rem;flex:1;min-width:210px}
.cookie__cat label{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:#fff}
.cookie__cat p{color:#9AA5B1;font-size:.82rem;margin:.3rem 0 0}
.cookie__cat input{width:16px;height:16px;flex-shrink:0}

/* ============ Widget Hellène (chat IA) ============ */
.hll-launch{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:.5rem;background:var(--or);color:var(--encre);border:none;border-radius:999px;padding:.7rem 1.05rem;font-family:var(--body);font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 10px 28px rgba(21,24,30,.22);transition:transform .15s,box-shadow .15s}
.hll-launch:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(21,24,30,.28)}
.hll-launch:focus-visible{outline:3px solid var(--or-d);outline-offset:2px}
.hll-launch__ic{display:inline-flex}
.hll-hide{display:none}
@media(max-width:480px){.hll-launch__txt{display:none}.hll-launch{padding:.8rem}}

.hll-panel{position:fixed;right:18px;bottom:18px;z-index:61;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 36px));background:var(--panneau);border:1px solid var(--trait);border-radius:18px;box-shadow:0 24px 60px rgba(21,24,30,.28);display:none;flex-direction:column;overflow:hidden}
.hll-panel.open{display:flex;animation:hllin .18s ease}
@keyframes hllin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hll-head{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;background:var(--encre);color:var(--craie)}
.hll-head__id{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}
.hll-av{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--or);color:var(--encre);font-family:var(--disp);font-weight:800}
.hll-head__id b{display:block;font-family:var(--disp);font-size:1rem;line-height:1.15}
.hll-head__id small{color:#B9C0C9;font-size:.72rem}
.hll-close{background:transparent;border:none;color:var(--craie);font-size:1.05rem;line-height:1;cursor:pointer;padding:.3rem .5rem;border-radius:8px}
.hll-close:hover{background:rgba(255,255,255,.12)}
.hll-close:focus-visible{outline:2px solid var(--or);outline-offset:2px}

.hll-msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.55rem;background:var(--craie)}
.hll-msg{max-width:82%;padding:.6rem .8rem;border-radius:14px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:break-word}
.hll-bot{align-self:flex-start;background:var(--panneau);border:1px solid var(--trait);color:var(--encre);border-bottom-left-radius:5px}
.hll-me{align-self:flex-end;background:var(--encre);color:var(--craie);border-bottom-right-radius:5px}
.hll-typing{display:inline-flex;gap:4px;align-items:center}
.hll-typing span{width:7px;height:7px;border-radius:50%;background:var(--brume);animation:hllblink 1s infinite}
.hll-typing span:nth-child(2){animation-delay:.2s}.hll-typing span:nth-child(3){animation-delay:.4s}
@keyframes hllblink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.hll-form{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--trait);background:var(--panneau)}
.hll-input{flex:1;min-width:0;border:1px solid var(--trait);border-radius:999px;padding:.6rem .9rem;font-family:var(--body);font-size:.92rem;color:var(--encre);background:#fff}
.hll-input:focus-visible{outline:2px solid var(--or-d);outline-offset:1px;border-color:var(--or-d)}
.hll-send{background:var(--or);color:var(--encre);border:none;border-radius:999px;padding:.6rem 1rem;font-family:var(--body);font-weight:700;font-size:.9rem;cursor:pointer}
.hll-send:hover{background:var(--or-d);color:#fff}
.hll-send:focus-visible{outline:2px solid var(--or-d);outline-offset:2px}

@media(prefers-reduced-motion:reduce){.hll-panel.open{animation:none}.hll-launch{transition:none}.hll-typing span{animation:none;opacity:.5}}

/* page programme (épreuves / passerelles) */
.prog-note{font-size:.85rem;color:var(--brume);margin-top:.4rem}
.prog-done{list-style:none;margin:.5rem 0 0;display:grid;gap:.4rem;font-size:.92rem}
.prog-done li{padding-left:1.6rem;position:relative;color:var(--brume)}
.prog-done li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--route);border-bottom:2px solid var(--route);transform:rotate(-45deg)}
.prog-done b{color:var(--encre);font-weight:600}
.prog-flag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--or-d);background:var(--or-soft);padding:.2rem .5rem;border-radius:6px}

/* ============ Motion au scroll — timelines CSS natives (0 Ko de JS) ============
   Trois garde-fous, dans cet ordre :
   • @media screen  → à l'impression et en rendu headless, rien n'est masqué ;
   • no-preference  → qui refuse le mouvement ne déclenche même pas la règle ;
   • @supports      → sans support navigateur, la page s'affiche terminée, jamais blanche.
   Chaque famille reçoit un mouvement DIFFÉRENT : une entrée unique répétée partout
   est le tell d'un site généré. */
@media screen and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){

    /* La ligne de route se trace de gauche à droite — le motif signature de la marque. */
    @keyframes cc-trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .roadline{transform-origin:left center;animation:cc-trace linear both;
      animation-timeline:view();animation-range:cover 0% cover 22%}

    /* Aversion à la perte : les 3 cartes tombent en cascade, pas en bloc. */
    @keyframes cc-monte{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
    .loss__card{animation:cc-monte linear both;animation-timeline:view();animation-range:entry 8% cover 26%}
    .loss__card:nth-child(2){animation-range:entry 14% cover 32%}
    .loss__card:nth-child(3){animation-range:entry 20% cover 38%}

    /* Offres : le moment de décision. La formule mise en avant arrive légèrement avant
       les autres et depuis un peu plus loin — elle s'impose sans clignoter. */
    @keyframes cc-offre{from{opacity:.001;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
    .plan{animation:cc-offre linear both;animation-timeline:view();animation-range:entry 6% cover 28%}
    .plan--featured{animation-range:entry 2% cover 30%}
  }
}

/* ============ Séquence « parcours de l'examen » (page Programme) ============
   Épinglage = position:sticky (natif). Scrub = animation-timeline branchée sur la
   view-timeline du conteneur haut. Zéro JavaScript, zéro bitmap, zéro requête :
   la matière est du SVG, ce qui coûte ~1 Ko là où une séquence d'images coûterait
   plusieurs Mo — et reste fidèle à l'identité « icônes sur-mesure, aucune image ».

   ÉTAT PAR DÉFAUT = ÉTAT FINI : route tracée, stations allumées, étapes lisibles.
   L'animation ne fait que RETARDER un contenu déjà visible. */
.parcours{margin-top:2rem}
.parcours__stage{background:var(--craie);border:1px solid var(--trait);border-radius:var(--radius);padding:1.6rem 1.4rem 1.4rem}
.parcours__svg{display:block;width:100%;height:auto}
.parcours__halo{fill:none;stroke:var(--trait);stroke-width:24;stroke-linecap:round}
.parcours__road{fill:none;stroke:var(--encre);stroke-width:13;stroke-linecap:round}
.parcours__stop{fill:var(--or);stroke:var(--encre);stroke-width:3.5}
.parcours__pin{visibility:hidden}
.parcours__pin-halo{fill:var(--or);opacity:.3}
.parcours__pin-dot{fill:var(--or);stroke:var(--encre);stroke-width:3}
.parcours__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.5rem 0 0}
.parcours__step b{display:block;font-family:var(--disp);font-size:1.05rem;letter-spacing:-.01em;color:var(--encre)}
.parcours__step span{display:block;color:var(--brume);font-size:.92rem;margin-top:.25rem}
.parcours__step strong{color:var(--encre);font-weight:700}
@media(max-width:900px){
  /* Mobile : pas d'épinglage, pas de scrub. Illustration fixe + liste — priorité à la vitesse. */
  .parcours__steps{grid-template-columns:1fr;gap:.9rem}
  .parcours__stage{padding:1.2rem 1rem}
}

@media screen and (min-width:901px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* 260vh de course : c'est la durée du scrub. Le stage reste collé pendant ce temps. */
    .parcours{height:260vh;view-timeline:--parcours block}
    .parcours__stage{position:sticky;top:84px}

    /* La route se trace. pathLength=1 rend le tracé indépendant de la longueur réelle. */
    @keyframes cc-route{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
    .parcours__road{stroke-dasharray:1;stroke-dashoffset:1;
      animation:cc-route linear both;animation-timeline:--parcours;animation-range:contain 0% contain 92%}

    /* Les 3 stations s'allument au passage. */
    @keyframes cc-station{from{opacity:.2;transform:scale(.55)}to{opacity:1;transform:none}}
    .parcours__stop{transform-box:fill-box;transform-origin:center;opacity:.2;
      animation:cc-station linear both;animation-timeline:--parcours}
    .parcours__stop--1{animation-range:contain 1% contain 12%}
    .parcours__stop--2{animation-range:contain 43% contain 55%}
    .parcours__stop--3{animation-range:contain 84% contain 95%}

    /* Le texte suit la position sur la route : on lit l'étape où l'on se trouve. */
    /* Le texte reste TOUJOURS pleinement lisible : on n'atteint jamais l'étape
       active en baissant l'opacité des autres — à .3, du gris sur craie tombe
       sous 3:1 et échoue le RGAA. C'est la COULEUR du titre qui s'active. */
    @keyframes cc-etape{from{color:var(--brume)}to{color:var(--encre)}}
    .parcours__step b{color:var(--brume);animation:cc-etape linear both;animation-timeline:--parcours}
    .parcours__step:nth-child(1) b{animation-range:contain 1% contain 14%}
    .parcours__step:nth-child(2) b{animation-range:contain 41% contain 57%}
    .parcours__step:nth-child(3) b{animation-range:contain 82% contain 96%}

    /* Le repère roule le long du tracé (CSS motion path). offset-rotate:0deg le garde
       droit : un repère de carte qui bascule dans les virages fait jouet. */
    @supports (offset-path:path("M0 0L1 1")){
      @keyframes cc-roule{from{offset-distance:0%}to{offset-distance:100%}}
      .parcours__pin{visibility:visible;offset-rotate:0deg;
        offset-path:path("M 60 180 C 260 180 260 60 480 60 C 700 60 700 180 900 180");
        animation:cc-roule linear both;animation-timeline:--parcours;animation-range:contain 0% contain 92%}
    }
  }
}


/* ============ Pied de page « Plein phare » (25/09/2026) : le même que celui de l'accueil, sur toutes les pages ============
   Balisage : gabarit_site.pied() (pages générées, commande, pages fixes). Polices servies par le site, comme l'accueil. */
@font-face{font-family:"Sora";src:url(../fonts/sora.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
.pied-pp{background:#17191D;color:#C9CDD6;padding:56px 0 100px;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:1rem;line-height:1.55;text-align:left}
.pied-pp__in{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,32px);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.pied-pp__marque{display:inline-flex;align-items:center;gap:9px;font-family:'Sora','Segoe UI',system-ui,sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none;color:#fff}
.pied-pp__marque svg{width:30px;height:30px;flex:none}
.pied-pp p{margin:12px 0 0;font-size:.92rem;max-width:44ch;color:#C9CDD6}
.pied-pp h3{color:#fff;font-family:'Sora','Segoe UI',system-ui,sans-serif;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.pied-pp ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}
.pied-pp li{margin:0}
.pied-pp a{color:#C9CDD6;text-decoration:none}
.pied-pp a:hover{color:#fff}
.pied-pp :focus-visible{outline:3px solid #FFC400;outline-offset:2px}
.pied-pp .pied-pp__mail{margin-top:10px}
.pied-pp .pied-pp__mail a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.pied-pp .pied-pp__mail a:hover{text-decoration-color:currentColor}
.pied-pp .pied-pp__fin{grid-column:1/-1;border-top:1px solid #2A2E36;padding-top:18px;font-size:.82rem;color:#8E94A0}
@media (max-width:760px){.pied-pp__in{grid-template-columns:1fr}}
@media (max-width:380px){.pied-pp__marque{font-size:1.05rem}}