/* esvl-form.v1.css — parcours de signature des actes.
 *
 * Le suffixe .v1 n'est pas décoratif : Pages sert ses assets avec
 * s-maxage=604800, donc un correctif dans un fichier non versionné mettrait
 * sept jours à atteindre les visiteurs. Incrémenter à chaque modification.
 *
 * Ce fichier duplique volontairement le sous-ensemble du design system dont il
 * a besoin (variables, @font-face, .btn-cta). index.html fait 831 lignes et
 * fonctionne : on ne le refactorise pas pour économiser 120 lignes de CSS.
 */

/* ===== Polices auto-hébergées (aucun appel à Google) ===== */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-neue-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-neue-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#1B2D45;--secondary:#D4A843;--accent:#C8382E;--bg-light:#F5F0EB;--bg-dark:#0F1923;--text:#2C2C2C;--text-light:#F5F0EB}
body{font-family:'DM Sans',sans-serif;background:var(--bg-dark);color:rgba(245,240,235,.82);line-height:1.7;font-size:16px;-webkit-text-size-adjust:100%}
.font-display{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em}
a{color:var(--secondary)}
img{display:block;max-width:100%}

/* BANDEAU — pas la navbar de l'accueil : ses boutons data-target sont
   inopérants hors page d'accueil, et un formulaire n'a pas besoin d'un menu. */
.acte-top{border-bottom:1px solid rgba(245,240,235,.08);padding:16px 0}
.acte-top-inner{max-width:760px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.acte-retour{display:inline-flex;align-items:center;gap:10px;color:rgba(245,240,235,.65);text-decoration:none;font-size:14px;transition:color .3s}
.acte-retour:hover{color:var(--secondary)}
.acte-top img{height:44px}

/* CORPS */
.acte{max-width:760px;margin:0 auto;padding:44px 24px 96px}
.acte h1{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;font-size:clamp(30px,6vw,46px);line-height:1.05;color:var(--text-light);margin-bottom:8px}
.acte-saison{color:rgba(245,240,235,.4);font-size:14px;margin-bottom:30px}

/* Le texte de l'acte, tel qu'il sera signé. Fond distinct pour qu'on voie
   d'un coup d'œil ce qui relève du document et ce qui relève du formulaire. */
.acte-texte{background:rgba(245,240,235,.04);border:1px solid rgba(245,240,235,.1);border-radius:12px;padding:26px 28px;margin-bottom:32px}
.acte-texte p{margin-bottom:14px}
.acte-texte p:last-child{margin-bottom:0}
.acte-texte h2{font-size:16px;font-weight:700;color:var(--text-light);margin:22px 0 10px}
.acte-texte ul{margin:0 0 14px 20px}
.acte-texte li{margin-bottom:7px}
.acte-texte .gras{font-weight:700;color:var(--text-light)}

/* FORMULAIRE */
.acte-section{margin-bottom:30px}
.acte-section > h2{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;font-size:22px;color:var(--secondary);margin-bottom:14px;padding-top:20px;border-top:1px solid rgba(245,240,235,.08)}
.champ{margin-bottom:16px}
.champ label{display:block;font-size:14px;color:rgba(245,240,235,.65);margin-bottom:6px}
.champ input,.champ select{width:100%;padding:13px 16px;border-radius:8px;border:2px solid rgba(245,240,235,.2);background:rgba(245,240,235,.06);color:var(--text-light);font-size:16px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .3s}
.champ input:focus,.champ select:focus{border-color:var(--secondary)}
.champ select option{background:var(--primary);color:var(--text-light)}
.champ-erreur input,.champ-erreur select{border-color:var(--accent)}
.champ-message{color:#ff9a90;font-size:13px;margin-top:5px}
.grille2{display:grid;grid-template-columns:1fr;gap:0 16px}

/* CHOIX BINAIRE — deux blocs cliquables plutôt que deux radios minuscules :
   c'est la décision la plus lourde de la page, elle doit se voir. */
.choix{display:flex;flex-direction:column;gap:12px}
.choix label{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:2px solid rgba(245,240,235,.18);border-radius:10px;cursor:pointer;transition:border-color .25s,background .25s}
.choix label:hover{border-color:rgba(212,168,67,.5)}
.choix input{margin-top:4px;accent-color:var(--secondary);width:18px;height:18px;flex:0 0 auto}
.choix input:checked ~ span{color:var(--text-light)}
.choix label:has(input:checked){border-color:var(--secondary);background:rgba(212,168,67,.08)}
.choix span{font-size:15px;line-height:1.55}

/* SIGNATURE */
.signature-zone{border-radius:10px;overflow:hidden;background:#fff;border:2px solid rgba(245,240,235,.2)}
.signature-barre{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn-mini{padding:9px 16px;border-radius:6px;border:1px solid rgba(245,240,235,.25);background:transparent;color:rgba(245,240,235,.75);font-family:'DM Sans',sans-serif;font-size:14px;cursor:pointer;transition:border-color .3s,color .3s}
.btn-mini:hover{border-color:var(--secondary);color:var(--secondary)}
.signature-aide{font-size:13px;color:rgba(245,240,235,.45);margin-top:10px}

/* BOUTON D'ENVOI — mêmes conventions que l'accueil : .btn-cta ne porte ni
   padding ni taille, chaque usage les passe en style inline. */
.btn-cta{position:relative;overflow:hidden;background:var(--accent);color:#fff;font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;border:none;cursor:pointer;z-index:1;transition:color .4s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.btn-cta::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:var(--secondary);z-index:-1;transition:width .4s cubic-bezier(.16,1,.3,1)}
.btn-cta:hover::before{width:100%}
.btn-cta:hover{color:var(--primary)}
.btn-cta[disabled]{opacity:.45;cursor:not-allowed}
.btn-cta[disabled]:hover::before{width:0}
.btn-cta[disabled]:hover{color:#fff}

/* PIÈCES JUSTIFICATIVES */
.piece{border:1px solid rgba(245,240,235,.14);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.piece-sensible{border-color:rgba(212,168,67,.4);background:rgba(212,168,67,.05)}
.piece-entete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.piece-libelle{font-weight:600;color:var(--text-light);font-size:15px;line-height:1.45}
.piece-etiquette{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(245,240,235,.4);white-space:nowrap}
.piece-note,.piece-pourquoi{font-size:13px;color:rgba(245,240,235,.5);line-height:1.55;margin-top:6px}
.piece-sensible .piece-pourquoi{color:rgba(240,215,154,.85)}

/* L'input natif est masqué mais reste focusable au clavier : le label sert de
   bouton, et un input display:none sortirait de l'ordre de tabulation. */
.piece-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.piece-bouton{display:inline-block;margin-top:12px}
.piece-input:focus-visible + .piece-bouton{border-color:var(--secondary);color:var(--secondary)}
.piece-bouton.occupe{opacity:.5;pointer-events:none}

.piece-fichiers{list-style:none;margin:10px 0 0;padding:0}
.piece-fichier{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:9px 0;border-top:1px solid rgba(245,240,235,.08);font-size:14px}
.piece-nom{color:rgba(245,240,235,.75);word-break:break-all}
.piece-etat{color:rgba(245,240,235,.45);font-size:13px;white-space:nowrap}
.piece-jauge{grid-column:1 / -1;height:3px;border-radius:2px;background:rgba(245,240,235,.12);overflow:hidden}
.piece-barre{height:100%;width:0;background:var(--secondary);transition:width .25s ease}
.piece-ok .piece-etat{color:#8fd08f}
.piece-ok .piece-barre{background:#8fd08f}
.piece-echec .piece-etat{color:#ff9a90}
.piece-echec .piece-barre{background:var(--accent);width:100%}
.piece-message{font-size:13px;margin-top:10px;color:rgba(245,240,235,.5)}
.piece-message.erreur{color:#ff9a90}

@media (prefers-reduced-motion: reduce){ .piece-barre{transition:none} }

/* ATTENTE PENDANT L'ENVOI
   L'opération dure plusieurs secondes — génération du PDF, dépôt sécurisé,
   deux e-mails. Sans signal fort, on revient en arrière ou on recharge, et on
   perd sa saisie. Le voile bloque l'interaction et raconte ce qui se passe. */
.voile{position:fixed;inset:0;z-index:200;background:rgba(15,25,35,.94);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.voile.visible{display:flex}
.voile-boite{max-width:400px;text-align:center}
.voile-anneau{width:64px;height:64px;margin:0 auto 26px;border-radius:50%;border:3px solid rgba(245,240,235,.12);border-top-color:var(--secondary);animation:voile-tourne 1s linear infinite}
@keyframes voile-tourne{to{transform:rotate(360deg)}}
.voile h2{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;font-size:26px;color:var(--text-light);margin-bottom:10px}
.voile-etape{color:rgba(245,240,235,.6);font-size:15px;min-height:24px;transition:opacity .3s}
.voile-patience{color:rgba(245,240,235,.35);font-size:13px;margin-top:22px;line-height:1.6}
/* Le mouvement est décoratif : on le coupe pour qui l'a demandé au système. */
@media (prefers-reduced-motion: reduce){
  .voile-anneau{animation:none;border-top-color:var(--secondary)}
  .voile-etape{transition:none}
}

/* ÉTATS */
.acte-message{border-radius:10px;padding:16px 18px;margin:18px 0;font-size:15px;display:none}
.acte-message.visible{display:block}
.acte-message.erreur{background:rgba(200,56,46,.14);border:1px solid rgba(200,56,46,.45);color:#ffb3ab}
.acte-message.info{background:rgba(212,168,67,.1);border:1px solid rgba(212,168,67,.35);color:#f0d79a}
.acte-fini{display:none;text-align:center;padding:40px 20px}
.acte-fini h2{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--secondary);margin-bottom:14px}
.acte-fini .empreinte{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:rgba(245,240,235,.45);word-break:break-all;margin-top:16px}

.acte-mention-legale{font-size:13px;color:rgba(245,240,235,.4);margin-top:26px;line-height:1.6}

/* PIED */
.acte-foot{border-top:1px solid rgba(245,240,235,.08);padding:26px 24px 40px;text-align:center}
.acte-foot p,.acte-foot a{color:rgba(245,240,235,.35);font-size:13px;text-decoration:none}
.acte-foot a:hover{color:var(--secondary)}

@media(min-width:640px){
  .grille2{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .acte{padding:32px 20px 72px}
  .acte-top-inner{padding:0 20px}
  .acte-texte{padding:20px 18px}
}

/* ===========================================================================
   PARCOURS D'INSCRIPTION (v2)
   Sept étapes affichées une à une. La page ne défile jamais sur sept
   formulaires empilés : sur un téléphone, un formulaire long est abandonné.
   =========================================================================== */

/* FIL D'AVANCEMENT — non cliquable, volontairement : on ne saute pas une
   étape, chacune enregistre auprès du club avant de passer à la suivante. */
.fil{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 30px;padding:0}
.fil-pas{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:20px;border:1px solid rgba(245,240,235,.12);white-space:nowrap;flex:0 0 auto}
.fil-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(245,240,235,.12);color:rgba(245,240,235,.55);font-size:12px;font-weight:600}
.fil-nom{font-size:13px;color:rgba(245,240,235,.4)}
.fil-pas.ici{border-color:var(--secondary);background:rgba(212,168,67,.1)}
.fil-pas.ici .fil-num{background:var(--secondary);color:var(--primary)}
.fil-pas.ici .fil-nom{color:var(--secondary)}
.fil-pas.fait .fil-num{background:rgba(143,208,143,.25);color:#8fd08f}
.fil-pas.fait .fil-nom{color:rgba(245,240,235,.55)}

/* UNE ÉTAPE */
.pas[hidden]{display:none}
.pas-titre{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;font-size:26px;color:var(--secondary);margin-bottom:12px}
.pas-sous{font-size:15px;font-weight:700;color:var(--text-light);margin:26px 0 12px}
.pas-intro{font-size:15px;line-height:1.65;margin-bottom:24px;color:rgba(245,240,235,.7)}
.pas-intro b{color:var(--text-light)}
.pas-aide{font-size:13px;color:rgba(245,240,235,.45);line-height:1.6;margin-bottom:14px}
.champ-large{grid-column:1 / -1}
/* RATTRAPAGE. Deux boutons voisins sur la page d'accueil -- essai gratuit et
   inscription en ligne -- menent a deux choses tres differentes. Celui qui
   se trompe atterrit ici devant un formulaire de quinze minutes : cette
   ligne lui rend la main tout de suite, avant qu'il ne commence a saisir. */
.pas-essai{font-size:13.5px;line-height:1.6;color:rgba(245,240,235,.6);background:rgba(245,240,235,.05);border:1px solid rgba(245,240,235,.12);border-radius:10px;padding:13px 16px;margin-bottom:22px}
.pas-essai b{color:var(--text-light)}

/* BARRE DE NAVIGATION — collée en bas de l'écran sur mobile : le bouton
   « continuer » doit être atteignable sans remonter le formulaire. */
.pas-barre{display:flex;gap:12px;align-items:center;margin-top:34px;padding-top:22px;border-top:1px solid rgba(245,240,235,.1)}
.pas-barre .btn-mini{flex:0 0 auto}
.pas-barre button[hidden]{display:none}

/* ENCARTS ET CASES À COCHER — une case doit avoir une grande zone cliquable :
   un carré de 13 px au doigt, c'est une case qu'on rate. */
.encart{border:1px solid rgba(245,240,235,.14);border-radius:12px;padding:16px 18px;margin-bottom:14px}
.encart p{font-size:15px}
.case{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.case input{margin-top:4px;accent-color:var(--secondary);width:19px;height:19px;flex:0 0 auto}
.case span{font-size:14.5px;line-height:1.6;color:rgba(245,240,235,.72)}
.case b{color:var(--text-light)}
.champ-erreur.encart,.champ-erreur .case span{color:#ffb3ab}

/* LES CARTES D'ACTES — une seule ouverte à la fois. Sept documents dépliés
   d'un coup donnent une page de six écrans qu'on ne lit pas. */
.acte-carte{border:1px solid rgba(245,240,235,.14);border-radius:12px;margin-bottom:12px;overflow:hidden}
.acte-carte-entete{display:flex;align-items:baseline;gap:10px;padding:15px 18px;flex-wrap:wrap}
.acte-carte-entete h3{font-size:15px;font-weight:600;color:rgba(245,240,235,.6);line-height:1.4;flex:1 1 auto}
.acte-carte-num{font-size:12px;color:rgba(245,240,235,.35);flex:0 0 auto}
.acte-carte-etat{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(245,240,235,.35);flex:0 0 auto}
.acte-carte-corps{display:none;padding:0 18px 20px}
.acte-carte.ouverte{border-color:var(--secondary)}
.acte-carte.ouverte .acte-carte-entete h3{color:var(--text-light)}
.acte-carte.ouverte .acte-carte-corps{display:block}
.acte-carte.signee{border-color:rgba(143,208,143,.4);background:rgba(143,208,143,.05)}
.acte-carte.signee .acte-carte-etat{color:#8fd08f}
.acte-carte.signee .acte-carte-corps{display:block;padding-bottom:14px}
.acte-carte-recu{font-size:13px;color:rgba(143,208,143,.85)}
.acte-carte .acte-texte{margin-bottom:20px}
.acte-section{margin-top:22px}
.acte-section h4{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;font-size:19px;color:var(--secondary);margin-bottom:11px}
/* Un consentement n'est libre que s'il peut être refusé sans conséquence :
   on l'écrit là où la décision se prend, pas dans une politique. */
.acte-libre{font-size:13.5px;color:#f0d79a;background:rgba(212,168,67,.1);border:1px solid rgba(212,168,67,.3);border-radius:8px;padding:11px 14px;margin-bottom:4px;line-height:1.55}

@media(max-width:640px){
  /* Sur telephone, seule l'etape en cours porte son nom : sept pastilles
     nommees prendraient trois lignes avant meme le premier champ. */
  .fil-pas:not(.ici) .fil-nom{display:none}
  .fil-pas{padding:6px 9px}
  .acte-carte-corps{padding:0 14px 18px}
  .pas-barre{position:sticky;bottom:0;background:var(--bg-dark);padding-bottom:16px;z-index:5}
}

/* Encart d'alerte : sert quand l'envoi du courriel a échoué. Le dossier est
   arrivé, c'est la copie du parent qui manque — le ton doit rassurer sans
   masquer le problème. */
.encart-alerte{border-color:rgba(212,168,67,.45);background:rgba(212,168,67,.08)}
.encart-alerte b{color:#f0d79a}

/* CE QUI MANQUE, DIT AVANT ET APRÈS LE CLIC
   Un bouton grisé se lit comme une panne : on signe, on appuie, rien ne bouge,
   et on s'en va. Le bouton reste actif et répond ; l'état s'affiche en continu
   juste en dessous, et la secousse dit OÙ ça coince quand le message seul
   n'aurait pas encore été lu. */
.acte-attente{font-size:13px;color:rgba(245,240,235,.45);margin-top:10px;line-height:1.5}
.champ-message.champ-alerte{color:#ffb3ab;font-size:14px;margin-top:10px;line-height:1.5}
.btn-cta.pret{box-shadow:0 0 0 1px rgba(212,168,67,.45)}

@keyframes esvl-secousse{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)}
  80%{transform:translateX(-2px)}
}
.secoue{animation:esvl-secousse .42s ease}
.signature-zone.secoue{border-color:var(--accent)}
/* Le mouvement est un renfort, jamais le message : pour qui a demandé moins
   d'animation au système, la bordure rouge suffit et le texte reste. */
@media (prefers-reduced-motion: reduce){
  .secoue{animation:none}
  .signature-zone.secoue{border-color:var(--accent)}
}