/* Vitrine Shift. Jetons repris de DESIGN.md (dépôt shift) : registre « aplat plein »,
   bleu #1B1AF5 seul, Archivo seule. Contrastes mesurés dans le prototype. */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
:root{
  --champ:#1B1AF5;
  --champ-clair:#C2C1FF;   /* texte secondaire sur le bleu : 4,92:1 */
  --encre:#0E0F14;
  --papier:#F7F7F4;
  --bande:#EEEEFE;          /* bleu très pâle de la seconde bande */
  --blanc:#FFFFFF;
  --gris:#5B6170;           /* texte secondaire sur papier : 5,9:1 */
  --trait:#D9D9E6;
  --marge:clamp(16px,2.8vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--papier); color:var(--encre); line-height:1.45;
  -webkit-font-smoothing:antialiased;
  /* pied de page collé en bas de l'écran sur les pages courtes (merci, confirmé) */
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
}
body > main{flex:1 0 auto}
a{color:inherit; text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--champ); outline-offset:2px}
.cadre{max-width:1440px; margin:0 auto; padding:0 var(--marge)}

/* barre : le logo seul */
.nav{background:var(--champ); color:var(--blanc); padding:14px var(--marge) 0}
.marque{display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none}
.marque span{font-weight:800; font-size:19px; letter-spacing:-.04em}
.pastille{width:38px; height:38px}
.pastille .boitier{fill:var(--blanc)}
.pastille .grille{stroke:var(--champ); stroke-opacity:.3; stroke-width:3; stroke-linecap:round; fill:none}
.pastille .trajet{stroke:var(--champ); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; fill:none}
.pastille .bille{fill:var(--champ)}

.oeil{font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px}
.source{font-size:.75rem; color:var(--champ-clair); margin-top:10px; max-width:62ch}
.source a{color:inherit}

/* 1. le prix, puis trois chiffres */
.heros{background:var(--champ); color:var(--blanc); padding:clamp(40px,6vw,80px) 0 clamp(40px,5vw,64px)}
.titre{
  font-weight:900; text-transform:uppercase; letter-spacing:-.045em;
  font-size:clamp(2.6rem,7.4vw,6.4rem); line-height:.9; max-width:17ch;
}
.titre-chiffre{display:block; color:var(--champ-clair)}
.chapeau{font-size:clamp(1.05rem,1.6vw,1.3rem); margin-top:24px}
.chiffres{list-style:none; display:grid; gap:28px; margin-top:clamp(36px,5vw,64px)}
.chiffre{border-top:1px solid rgba(255,255,255,.55); padding-top:18px}
.montant{font-weight:900; font-size:clamp(3rem,6vw,4.6rem); line-height:1; letter-spacing:-.04em; margin-bottom:12px}
.chiffre-mot{font-weight:600; max-width:44ch}
.avertissement{font-weight:600; font-size:.875rem; margin-top:32px}

/* 2. la Région, le formulaire, les auto-écoles */
.suite{background:var(--bande); padding:clamp(48px,7vw,96px) 0}
.suite-grille{display:grid; gap:40px; align-items:start}
.badge{
  display:inline-block; background:var(--blanc); border-radius:999px; padding:5px 10px;
  font-size:.6875rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;
}
.oeil-bleu{color:var(--champ)}
.h2{font-weight:900; text-transform:uppercase; letter-spacing:-.04em; line-height:.95; font-size:clamp(2rem,4.4vw,3.6rem); max-width:14ch}
.region-mot{color:var(--gris); margin-top:18px; max-width:46ch}
.region-appel{font-weight:700; font-size:1.2rem; margin-top:20px; max-width:40ch}
.avertissement-petit{font-size:.8125rem; font-weight:600; margin-top:16px}
.source-sombre{color:var(--gris); margin-top:2px}
.ecoles{margin-top:8px}
.ecoles-mot{font-weight:700; font-size:1.1rem; max-width:44ch}

.carte{background:var(--blanc); border-radius:16px; padding:clamp(20px,2.4vw,28px); display:grid; gap:10px}
.carte-titre{font-weight:900; text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(1.4rem,2.2vw,1.75rem); line-height:1}
.carte-mot{font-size:.8125rem; color:var(--gris); margin-bottom:10px}
.etiquette{font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:6px}
.champ{
  font:inherit; font-size:1rem; min-height:48px; padding:0 14px; width:100%;
  border:1px solid var(--trait); border-radius:10px; background:var(--blanc); color:var(--encre);
}
.champ::placeholder{color:var(--gris)}
.champ:user-invalid{border-color:#C0262D}
.profil{border:0; display:grid; gap:10px}
.profil-choix{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.option{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; cursor:pointer;
  border:1px solid var(--trait); border-radius:10px; font-weight:600; font-size:.9375rem;
}
.option:has(input:checked){border:2px solid var(--champ); background:#F4F4FF}
.option input,.accord input{width:20px; height:20px; accent-color:var(--champ); flex:0 0 auto}
.accord{display:flex; gap:12px; align-items:flex-start; font-size:.875rem; margin-top:10px; cursor:pointer}
.accord a{display:inline-block; color:var(--champ); font-weight:600; margin-top:2px}
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.action{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; margin-top:12px;
  font:inherit; font-weight:700; font-size:1rem; color:var(--blanc); background:var(--champ);
  border:0; border-radius:999px; cursor:pointer;
}
.action:hover{background:#1514C9}

/* pied */
.pied{background:var(--papier); padding:32px 0 20px; font-size:.875rem}
.pied-haut{display:grid; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--trait)}
.pied-haut a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none}
.pied-haut a:hover{text-decoration:underline}
.pied-marque{font-weight:800; font-size:1.15rem; letter-spacing:-.04em; margin-bottom:6px}
.pied-promesse,.pied-mot{color:var(--gris)}
.pied-mot{font-size:.8125rem; padding-top:16px}

/* page de texte (mentions légales, merci) */
.texte{max-width:72ch; padding-top:48px; padding-bottom:64px}
.texte h1{font-weight:900; text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; margin-bottom:24px}
.texte h2{font-size:1.15rem; font-weight:800; margin:32px 0 8px}
.texte p,.texte li{margin-bottom:10px}
.texte ul{padding-left:20px}
.texte .champ-lien{color:var(--champ); font-weight:600}

@media (min-width:860px){
  .chiffres{grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
  .suite-grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:64px; row-gap:48px}
  .region{grid-row:1}
  .carte{grid-column:2; grid-row:1 / span 2}
  .ecoles{grid-column:1; grid-row:2; margin-top:0}
  .pied-haut{grid-template-columns:5fr 7fr; align-items:center}
}

/* ───────────── Mouvement : une affiche de campagne qui s'anime ─────────────
   CSS d'abord ; motion.js ne fait que poser .vu au défilement et faire compter
   les chiffres. Sans lui, tout est visible et immobile. */
:root{--courbe:cubic-bezier(.16,1,.3,1)}

/* 1. le titre monte ligne par ligne, avec une légère bascule */
.ligne{display:block; overflow:hidden; padding:.14em 0 .12em; margin:-.14em 0 -.12em}
.ligne i{display:block; font-style:normal; transform:translateY(105%) rotate(2.5deg); animation:monter 1.1s var(--courbe) forwards}
.ligne:nth-child(1) i{animation-delay:.05s}
.ligne:nth-child(2) i{animation-delay:.17s}
.ligne:nth-child(3) i{animation-delay:.29s}
@keyframes monter{to{transform:none}}
.titre-chiffre i{font-variant-numeric:tabular-nums}

/* le titre s'éloigne doucement quand on défile (navigateurs qui savent le faire) */
@supports (animation-timeline:scroll()){
  .titre{animation:eloigner linear both; animation-timeline:scroll(root); animation-range:0 70vh}
  @keyframes eloigner{to{transform:translateY(-6vh) scale(.94)}}
}

/* 2. le reste du héros entre après le titre */
.entre{opacity:0; transform:translateY(16px); animation:apparaitre .9s var(--courbe) forwards}
.entre[data-d="1"]{animation-delay:.55s}
.entre[data-d="2"]{animation-delay:.8s}
.entre[data-d="3"]{animation-delay:.95s}
@keyframes apparaitre{to{opacity:1; transform:none}}

/* l'appel du héros : la flèche descend vers le formulaire */
.appel{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; margin-top:24px; padding:0 26px;
  background:var(--blanc); color:var(--champ); border-radius:999px; font-weight:800; text-decoration:none;
  transition:transform .25s var(--courbe);
}
.appel:hover{transform:translateY(-2px)}
.appel svg{animation:descendre 1.6s ease-in-out infinite}
@keyframes descendre{0%,100%{transform:none}50%{transform:translateY(4px)}}
.appel:focus-visible{outline-color:var(--blanc)}

/* 3. les blocs montent à leur arrivée à l'écran */
.anime .monte{opacity:0; transform:translateY(40px)}
.anime .monte.vu{opacity:1; transform:none; transition:opacity .9s var(--courbe), transform 1s var(--courbe)}
.anime .chiffres .monte:nth-child(2).vu{transition-delay:.12s}
.anime .chiffres .monte:nth-child(3).vu{transition-delay:.24s}
.anime .monte[data-d="1"].vu{transition-delay:.15s}
.montant{font-variant-numeric:tabular-nums}
/* le filet du haut de chaque chiffre se trace de gauche à droite */
.anime .chiffre{border-top-color:transparent; position:relative}
.anime .chiffre::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:rgba(255,255,255,.55); transform:scaleX(0); transform-origin:left}
.anime .chiffre.vu::before{transform:none; transition:transform 1.2s var(--courbe) .2s}

/* 4. deux rubans croisés entre les deux parties, et un sceau qui tourne */
.ruban{position:relative; background:var(--bande); padding:clamp(28px,4vw,48px) 0 0; overflow:hidden}
.ruban-ligne{overflow:hidden; white-space:nowrap; padding:14px 0; font-weight:900; text-transform:uppercase; letter-spacing:-.02em}
.ruban-ligne div{display:inline-flex; gap:40px; padding-right:40px; animation:defiler 30s linear infinite}
.ruban-ligne span::after{content:"✦"; margin-left:40px; font-size:.7em; vertical-align:.15em}
.ruban-a{background:var(--champ); color:var(--blanc); font-size:clamp(1.1rem,2.4vw,1.8rem); transform:rotate(-2deg); margin:0 -20px}
.ruban-b{background:var(--blanc); color:var(--champ); font-size:clamp(1.6rem,4vw,3rem); transform:rotate(1.5deg); margin:10px -20px 0; border-block:2px solid var(--champ)}
.ruban-b div{animation-direction:reverse; animation-duration:38s}
@keyframes defiler{to{transform:translateX(-50%)}}
.sceau{position:absolute; right:clamp(16px,6vw,96px); top:6px; width:clamp(104px,13vw,168px); height:auto; z-index:2; animation:tourner 18s linear infinite}
.sceau circle{fill:var(--blanc); stroke:var(--champ); stroke-width:3}
.sceau text{font-weight:800; font-size:15.5px; letter-spacing:.12em; fill:var(--champ)}
.sceau-fleche{stroke:var(--champ); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; fill:none; transform-origin:100px 100px; animation:tourner 18s linear infinite reverse}
@keyframes tourner{to{transform:rotate(360deg)}}

/* 5. le badge « annoncée » bat comme un signal */
.badge{display:inline-flex; align-items:center; gap:8px}
.pouls{width:8px; height:8px; border-radius:50%; background:var(--champ); position:relative}
.pouls::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--champ); animation:battre 1.8s ease-out infinite}
@keyframes battre{to{transform:scale(3.2); opacity:0}}

/* le bouton du formulaire : la flèche avance au survol */
.action svg{transition:transform .3s var(--courbe)}
.action:hover svg{transform:translateX(4px)}

/* texte lu par les lecteurs d'écran, invisible à l'écran */
.lu{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* moins d'animations demandées : tout est posé, rien ne bouge */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .ligne i,.entre,.anime .monte{opacity:1!important; transform:none!important}
  .anime .chiffre::before{transform:none}
}

/* page de vente : chiffres courts, notes vers les sources */
.note{font-size:.5em; font-weight:700; vertical-align:super; line-height:0; margin-left:.06em; text-decoration:none; color:inherit; opacity:.85; position:relative; white-space:nowrap}
/* zone de toucher de 24 px autour du petit numéro, sans pousser le texte */
.note::before{content:""; position:absolute; inset:-12px -8px}
.titre .note,.montant .note{font-size:.32em}
.note:hover{text-decoration:underline}
.chiffre-mot{font-weight:800; font-size:clamp(1.15rem,1.8vw,1.45rem); line-height:1.2; max-width:22ch}
.chiffre-cond{font-size:.875rem; color:var(--champ-clair); margin-top:6px}
.avertissement a{color:inherit; text-underline-offset:3px}
.promesse{background:var(--bande); padding:clamp(40px,6vw,72px) 0 0}
.region-appel{font-size:clamp(1.15rem,1.8vw,1.4rem)}
.notes{padding-left:22px}
.notes li{margin-bottom:14px}
.notes li:target{background:var(--bande); outline:6px solid var(--bande)}


/* comment ça marche : trois étapes courtes */
.promesse-titre{margin-bottom:28px}
.etapes{list-style:none; display:grid; gap:16px}
.etape{background:var(--blanc); border-radius:16px; padding:22px 22px 24px}
.etape-n{display:block; font-weight:900; font-size:2.6rem; line-height:1; color:var(--champ); letter-spacing:-.04em; margin-bottom:12px}
.etape h3{font-weight:900; font-size:1.3rem; letter-spacing:-.02em; margin-bottom:6px}
.etape p{color:var(--gris); max-width:40ch}

/* questions rapides : ouvertes au clic, sans script */
.faq{background:var(--bande); padding:clamp(56px,7vw,96px) 0}
.faq-grille{display:grid; gap:24px}
.faq details{border-top:1px solid var(--trait); padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer; list-style:none; font-weight:800; font-size:1.15rem; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.6rem; font-weight:500; color:var(--champ); transition:transform .3s var(--courbe)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--gris); padding:0 0 18px; max-width:60ch}

/* dernier appel, plein bleu */
.final{background:var(--champ); color:var(--blanc); padding:clamp(56px,8vw,112px) 0; text-align:center}
.final-titre{font-weight:900; text-transform:uppercase; letter-spacing:-.04em; line-height:.95; font-size:clamp(2rem,5vw,4.2rem); max-width:18ch; margin:0 auto}
.final .appel{margin-top:32px}

@media (min-width:860px){
  .etapes{grid-template-columns:repeat(3,1fr); gap:24px}
  .faq-grille{grid-template-columns:5fr 7fr; gap:64px}
}
.insec{white-space:nowrap}

/* le logo : la bille passe les rapports sur le trajet du S, comme dans le prototype */
@keyframes passer-les-rapports{
  0%,10%   {offset-distance:0%}
  18%,28%  {offset-distance:33%}
  36%,46%  {offset-distance:50%}
  54%,64%  {offset-distance:83%}
  72%,100% {offset-distance:100%}
}
.pastille .bille{
  offset-path:path('M36 12H12V24H36V36H12');
  offset-rotate:0deg;
  animation:passer-les-rapports 8s var(--courbe) infinite;
}
/* à l'arrivée, le S se trace avant que la bille parte */
.pastille .trajet{stroke-dasharray:96; stroke-dashoffset:96; animation:tracer 1.1s var(--courbe) .2s forwards}
@keyframes tracer{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.pastille .trajet{stroke-dashoffset:0}}

/* ───────────── Réglages d'affichage : la pastille ───────────── */
.reglages{position:fixed; right:16px; bottom:16px; z-index:20}
.reglages summary{
  list-style:none; cursor:pointer; position:relative; width:76px; height:76px; border-radius:50%;
  background:var(--blanc); color:var(--champ); display:grid; place-items:center;
  box-shadow:0 8px 28px rgba(14,15,20,.22);
}
.reglages summary::-webkit-details-marker{display:none}
.reglages summary:focus-visible{outline:3px solid var(--encre); outline-offset:3px}
.anneau{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.anneau circle{fill:none; stroke-width:3.5}
.anneau-fond{stroke:var(--bande)}
.anneau-avance{stroke:var(--champ); stroke-dasharray:100; stroke-dashoffset:100; stroke-linecap:round}
/* l'anneau suit l'avance de la lecture (navigateurs qui le savent ; ailleurs il reste vide) */
@supports (animation-timeline:scroll()){
  .anneau-avance{animation:avancer linear both; animation-timeline:scroll(root)}
  @keyframes avancer{to{stroke-dashoffset:0}}
}
.reglages-panneau{
  position:absolute; right:0; bottom:88px; width:min(300px,calc(100vw - 32px));
  background:var(--blanc); color:var(--encre); border:0; border-radius:16px; padding:16px 18px 10px;
  box-shadow:0 16px 44px rgba(14,15,20,.25);
}
.reglages-panneau legend{float:left; width:100%; font-weight:800; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--champ); margin-bottom:6px}
.reglages-panneau label{display:flex; align-items:center; gap:10px; min-height:44px; font-weight:600; font-size:.95rem; cursor:pointer; clear:both}
.reglages-panneau input{width:20px; height:20px; accent-color:var(--champ); flex:0 0 auto}

/* 1. arrêter les animations */
html:has(#pause:checked) *,html:has(#pause:checked) *::before,html:has(#pause:checked) *::after{animation-play-state:paused!important; transition:none!important}
html:has(#pause:checked) .ligne i,html:has(#pause:checked) .entre,html:has(#pause:checked) .anime .monte{animation:none!important; opacity:1!important; transform:none!important}
html:has(#pause:checked) .pastille .trajet{animation:none; stroke-dashoffset:0}
/* l'anneau de lecture n'est pas une animation décorative : il continue */
html:has(#pause:checked) .anneau-avance{animation-play-state:running!important}
/* 2. texte plus grand */
html:has(#grand:checked){font-size:125%}
/* 3. lecture facilitée : police système sans empattement, espacements de WCAG 1.4.12 */
html:has(#lecture:checked) body,html:has(#lecture:checked) .champ,html:has(#lecture:checked) .action{font-family:Verdana,Tahoma,'Segoe UI',system-ui,sans-serif}
html:has(#lecture:checked) main p,html:has(#lecture:checked) main li,html:has(#lecture:checked) main summary,html:has(#lecture:checked) main label{letter-spacing:.12em; word-spacing:.16em; line-height:1.6}
html:has(#lecture:checked) .titre,html:has(#lecture:checked) .h2,html:has(#lecture:checked) .final-titre,html:has(#lecture:checked) .carte-titre{text-transform:none; letter-spacing:0; line-height:1.15}
/* 4. contraste renforcé */
html:has(#contraste:checked){--champ-clair:#FFFFFF; --gris:#0E0F14; --trait:#0E0F14}
html:has(#contraste:checked) .source,html:has(#contraste:checked) .chiffre-cond{color:#FFFFFF}
/* 5. souligner les liens */
html:has(#liens:checked) a{text-decoration:underline!important; text-underline-offset:3px}

/* le pictogramme accessibilité, et « ACCESSIBILITÉ » qui tourne autour comme le sceau */
.acces{position:absolute; inset:0; width:100%; height:100%}
.acces-texte{font-weight:800; font-size:6.4px; letter-spacing:.04em; fill:var(--champ); transform-origin:38px 38px; animation:tourner 14s linear infinite}
.acces-picto circle{fill:var(--champ)}
.acces-picto path{stroke:var(--champ); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; fill:none}
html{scroll-padding-bottom:6rem}
html:has(#contraste:checked) .note{opacity:1}

/* audit d'accessibilité du 11/11/2026 */
/* lien d'évitement : visible dès qu'il reçoit le focus (RGAA 12.7) */
.evitement{position:absolute; left:16px; top:-100px; z-index:30; background:var(--blanc); color:var(--champ); font-weight:800; padding:12px 18px; border-radius:999px; text-decoration:none}
.evitement:focus{top:12px}
main:focus{outline:none}
/* la pastille ne cache jamais le bas de la page (WCAG 2.4.11) */
.pied{padding-bottom:112px}
/* rien ne déborde à 320 px, même en « texte plus grand » (WCAG 1.4.10) */
.suite-grille > *,.chiffres > *,.etapes > *{min-width:0}
.h2,.titre,.final-titre,.carte-titre{overflow-wrap:break-word; hyphens:manual}
.carte-oblig{font-size:.8125rem; color:var(--gris); margin:-6px 0 4px}
/* à l'impression, tout est visible et immobile */
@media print{.anime .monte{opacity:1!important; transform:none!important} .reglages,.ruban,.evitement{display:none}}
/* en mode contraste élevé de Windows, une bordure transparente devient visible : les boutons gardent leur forme */
.action,.appel,.reglages summary,.etape,.carte,.reglages-panneau{border:2px solid transparent}
.form-erreur{background:#FFEDED; color:#661D1D; border-radius:10px; padding:12px 14px; font-weight:600; font-size:.9rem}