/* ==========================================================================
   BE IA — pages secondaires (liste d'attente, mentions légales, confidentialité, 404)
   Le socle (jetons, en-tête, pied, boutons, ruban, cotes) est dans commun.css.
   ========================================================================== */

[hidden]{display:none!important}
html:not(.js) .js-seul{display:none!important}
html.js .sans-js{display:none!important}

/* ---------- bandeau de page ---------- */
.page-hero{overflow:hidden}
.page-hero-in{padding-block:clamp(30px,4.4vw,60px) clamp(26px,3.6vw,46px)}
.page-hero h1{font-size:clamp(2.6rem,6.4vw,5rem);line-height:.95}
.page-hero .lead{max-width:680px;margin-top:18px}
.page-hero .cote{margin-top:clamp(22px,3vw,34px);max-width:520px}
.page-hero--doc .page-hero-in{padding-block:clamp(34px,5vw,64px) clamp(28px,4vw,48px)}
.page-hero--doc h1{max-width:none}
.page-hero .maj{margin-top:18px;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px}

/* ======================================================================
   LISTE D'ATTENTE
   ====================================================================== */
.liste-sec{padding-block:clamp(30px,4.6vw,70px) clamp(56px,8vw,110px)}
.container--form{max-width:1020px}
.carte-form{background:var(--blanc);border:1px solid var(--trait);border-top:5px solid var(--encre);box-shadow:8px 8px 0 rgba(23,51,122,.1);padding:clamp(18px,3.6vw,44px)}

/* --- ruban de mètre gradué : la progression --- */
.ruban-bloc{margin-bottom:clamp(24px,3.6vw,38px)}
.ruban{position:relative;height:46px;padding-left:14px}
.ruban-hook{position:absolute;left:0;top:-5px;bottom:-5px;width:14px;z-index:2;background:linear-gradient(90deg,#d3d9e0,#8b95a3 60%,#626c7a);border:2px solid var(--nuit-0);border-radius:2px 0 0 2px}
.ruban-hook::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#26303f}
.ruban-piste{position:relative;height:100%;border:2px solid var(--nuit-0);border-left:0;background:var(--encre-douce);overflow:hidden}
.ruban-couche{position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(23,51,122,.75) 0 2px,transparent 2px 100px),repeating-linear-gradient(90deg,rgba(23,51,122,.6) 0 1.5px,transparent 1.5px 50px),repeating-linear-gradient(90deg,rgba(23,51,122,.5) 0 1px,transparent 1px 10px);
  background-size:100% 24px,100% 16px,100% 9px;background-repeat:no-repeat}
.ruban-couche--on{background-color:var(--encre);
  background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 100px),repeating-linear-gradient(90deg,#fff 0 1.5px,transparent 1.5px 50px),repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 10px);
  clip-path:inset(0 calc(100% - var(--rempli,20%)) 0 0);transition:clip-path .55s cubic-bezier(.2,.7,.2,1)}
.ruban-num{display:flex;position:absolute;left:0;right:0;bottom:3px;margin:0;padding:0;list-style:none}
.ruban-num li{flex:1 1 0;padding-left:10px;font:800 24px/1 var(--f-titre);letter-spacing:.01em;color:var(--encre)}
.ruban-couche--on .ruban-num li{color:#fff}
.ruban-lib{margin-top:12px;font:500 12.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-doux)}
@media (prefers-reduced-motion:reduce){.ruban-couche--on{transition:none}}

/* --- une question par écran --- */
fieldset.etape{border:0;margin:0;padding:0;min-width:0}
.etape legend{display:block;width:100%;padding:0;margin-bottom:14px;font:800 clamp(2rem,4.4vw,3rem)/1 var(--f-titre);text-transform:uppercase;letter-spacing:.005em;color:var(--texte);text-wrap:balance}
.q-n{display:block;margin-bottom:10px;font:500 12.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--encre)}
.q-aide{margin:0 0 20px;font:500 13px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--texte-doux)}
.etape legend+.tuiles,.etape legend+.champs,.etape legend+.champ{margin-top:22px}
.etape+.etape{margin-top:46px;padding-top:34px;border-top:1px solid var(--trait)}
.par-etapes .etape+.etape{margin-top:0;padding-top:0;border-top:0}
@keyframes etapeIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.entre{animation:etapeIn .38s ease-out}
@media (prefers-reduced-motion:reduce){.entre{animation:none}}

/* --- tuiles cliquables (radio / cases) --- */
.tuiles{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.tuiles--equipe{grid-template-columns:repeat(4,minmax(0,1fr))}
.tuiles--temps{grid-template-columns:repeat(3,minmax(0,1fr))}
.tuile{position:relative;display:block;cursor:pointer;min-width:0}
.tuile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.tuile-face{position:relative;display:flex;align-items:flex-end;height:100%;min-height:96px;padding:40px 14px 14px;border:2px solid var(--trait-2);background:var(--papier);color:var(--texte);
  font:600 17px/1.2 var(--f-texte);transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;overflow-wrap:anywhere}
.tuiles--gros .tuile-face{font:800 clamp(1.35rem,2.4vw,1.75rem)/1 var(--f-titre);text-transform:uppercase;letter-spacing:.01em}
.tuiles--equipe .tuile-face{min-height:110px}
.tuile-face::before{content:"";position:absolute;top:13px;left:14px;width:18px;height:18px;border:2px solid var(--trait-2);background:var(--blanc);transition:background .15s,border-color .15s}
.tuile:hover .tuile-face{border-color:var(--encre);background:var(--blanc)}
.tuile input:checked+.tuile-face{border-color:var(--encre);background:var(--encre-douce);box-shadow:inset 0 0 0 1px var(--encre),3px 3px 0 rgba(23,51,122,.22)}
.tuile input:checked+.tuile-face::before{border-color:var(--encre);background:var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.tuile input:focus-visible+.tuile-face{outline:3px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tuile-face{transition:none}}

/* --- champs --- */
.champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.champ{display:block;min-width:0}
.champ>label{display:block;margin-bottom:8px;font:600 15px/1.3 var(--f-texte);color:var(--texte)}
.champ .opt{font-weight:400;color:var(--texte-doux)}
.champ input[type=text],.champ input[type=email],.champ input[type=tel]{display:block;width:100%;min-height:54px;padding:12px 14px;font:400 17px/1.3 var(--f-texte);color:var(--texte);background:var(--blanc);border:2px solid var(--trait-2);border-radius:3px;appearance:none;-webkit-appearance:none}
.champ input::placeholder{color:#6b7a90;opacity:1}
.champ input:hover{border-color:var(--encre)}
.champ input:focus{border-color:var(--encre);outline:3px solid rgba(23,51,122,.25);outline-offset:0}
.champ input[aria-invalid="true"],.tuiles.invalide .tuile-face{border-color:var(--attente)}
.champ-autre{margin-top:20px;max-width:560px}
.etape legend+.q-aide{margin-top:-4px}

/* message de validation douce */
.msg{margin:0;min-height:0;font:500 14px/1.4 var(--f-texte);color:var(--attente)}
.msg:not(:empty){margin-top:10px;padding-left:24px;position:relative}
.msg:not(:empty)::before{content:"!";position:absolute;left:0;top:1px;width:17px;height:17px;display:grid;place-items:center;background:var(--attente);color:#fff;font:700 12px/1 var(--f-mono)}

/* --- boutons d'étapes --- */
.form-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(26px,3.4vw,38px);padding-top:clamp(18px,2.6vw,26px);border-top:1px solid var(--trait)}
.form-nav .btn{min-width:150px}
.form-nav #btn-suite{margin-left:auto}

/* --- récapitulatif --- */
.recap-zone h2,.merci h2{font-size:clamp(2rem,4.4vw,3rem);line-height:1}
.recap-zone h2:focus,.merci h2:focus{outline:none}
.recap{margin:22px 0 0;border-top:2px solid var(--texte)}
.recap>div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--trait)}
.recap dt{font:500 12px/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--texte-doux)}
.recap dd{margin:0;min-width:0;font-weight:500;overflow-wrap:anywhere}
.recap dd.vide{font-weight:400;color:var(--texte-doux)}
.recap .modif{justify-self:end;background:none;border:0;padding:8px 2px;font:500 14px/1 var(--f-texte);color:var(--encre);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.recap .modif:hover{color:var(--encre-2)}
.envoi{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:30px}
.rassure{margin-top:18px;max-width:60ch;font:500 14px/1.5 var(--f-texte);color:var(--texte-doux)}
.final-sans-js{margin-top:40px;padding-top:28px;border-top:2px solid var(--texte)}
.final-sans-js .envoi{margin-top:0}

/* --- remerciement --- */
.merci{padding-block:clamp(10px,3vw,30px)}
.merci-pic{width:64px;height:64px;display:grid;place-items:center;background:var(--encre);margin-bottom:22px;box-shadow:5px 5px 0 rgba(23,51,122,.22)}
.merci-pic svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:square}
.merci .lead{margin-top:16px;max-width:560px;color:var(--texte-doux)}
.merci .lien{color:var(--encre)}
.merci-actions{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:30px}

@media (max-width:900px){
  .tuiles,.tuiles--equipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tuiles--temps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .champs{grid-template-columns:minmax(0,1fr)}
  .tuile-face{min-height:84px;padding:38px 12px 12px;font-size:16px}
  .tuiles--gros .tuile-face{font-size:1.3rem}
  .tuiles--equipe .tuile-face{min-height:96px}
  .ruban-num li{padding-left:6px;font-size:20px}
  .recap>div{grid-template-columns:minmax(0,1fr) auto}
  .recap dt{grid-column:1/-1}
  .form-nav{flex-wrap:wrap}
  .form-nav .btn{flex:1 1 140px}
  .envoi .btn{width:100%}
  .btn-grand{padding:18px 22px}
}
@media (max-width:380px){
  .tuiles,.tuiles--temps{grid-template-columns:minmax(0,1fr)}
  .tuiles--equipe{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ======================================================================
   PAGES DE TEXTE (mentions légales, confidentialité)
   ====================================================================== */
.doc-sec{padding-block:clamp(34px,5vw,76px) clamp(56px,8vw,112px)}
.doc-grid{display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.sommaire{position:sticky;top:calc(var(--header-h) + 24px);border-top:3px solid var(--encre);padding-top:14px}
.sommaire-t{margin:0 0 6px;font:500 12px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--encre)}
.sommaire ol{list-style:none;margin:0;padding:0;counter-reset:som}
.sommaire li{counter-increment:som}
.sommaire a{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--trait);color:var(--texte);text-decoration:none;font-size:15px;line-height:1.35}
.sommaire a::before{content:counter(som,decimal-leading-zero);flex:none;font:500 12px/1 var(--f-mono);color:var(--encre)}
.sommaire a:hover{color:var(--encre);background:rgba(23,51,122,.05)}

.doc{max-width:68ch;min-width:0}
.doc section{margin-bottom:clamp(34px,4.6vw,52px)}
.doc section:last-child{margin-bottom:0}
.doc h2{font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1;margin-bottom:16px;padding-top:18px;border-top:1px solid var(--trait-2)}
.doc h2 .n{display:block;margin-bottom:10px;font:500 12.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--encre)}
.doc p{margin-bottom:1em;font-size:1.0625rem;line-height:1.72;color:var(--texte)}
.doc p:last-child{margin-bottom:0}
.doc .lien{color:var(--encre);text-decoration-thickness:1px}
.doc a[href^="mailto"],.doc a[href^="tel"]{white-space:nowrap}
.doc .lien:hover{color:var(--encre-2);text-decoration-thickness:2px}
.puces{list-style:none;margin:0 0 1em;padding:0}
.puces li{position:relative;padding:3px 0 3px 26px;font-size:1.0625rem;line-height:1.65}
.puces li::before{content:"";position:absolute;left:2px;top:.78em;width:9px;height:9px;background:var(--encre)}
.fiche{margin:22px 0 0;border-top:2px solid var(--texte)}
.fiche>div{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--trait)}
.fiche dt{font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux)}
.fiche dd{margin:0;overflow-wrap:anywhere}
@media (max-width:900px){
  .doc-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .sommaire{position:static}
}
@media (max-width:560px){
  .fiche>div{grid-template-columns:minmax(0,1fr)}
}

/* ======================================================================
   404
   ====================================================================== */
.p404{min-height:clamp(420px,calc(100svh - var(--header-h) - 260px),760px);display:flex;align-items:center}
.p404 .container{width:100%}
.p404-num{margin:0 0 4px;font:800 clamp(110px,24vw,280px)/.8 var(--f-titre);letter-spacing:.02em;color:transparent;-webkit-text-stroke:2px var(--signal)}
.p404-cote{margin-block:clamp(20px,3vw,34px) clamp(22px,3vw,34px)!important;max-width:none!important}
.p404 h1{max-width:18ch}
.p404 .cta-row{display:flex;flex-wrap:wrap;gap:16px 18px;margin-top:32px}
@media (max-width:640px){.p404 .cta-row .btn{width:100%}}