/* inscription.css — formulaire d'inscription au lancement + pages confirmation, mes données, avis.
   Reprend la maquette validée (maquette-inscription, 05/10), adaptée aux jetons de site.css : le thème vient de
   html[data-theme], comme le reste du site. Toutes les classes sont préfixées « ins- » (site.css a déjà
   .apres, .retour…). Copié tel quel dans assets/inscription.css par _build/build.py. */

/* ── Section de lancement avec formulaire ── */
.ins-lance{position:relative;overflow:hidden;border-top:1px solid var(--trait);padding:104px 0 112px}
.ins-motif{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 50% -10%,color-mix(in srgb,var(--menthe) 16%,transparent),transparent 70%),
  linear-gradient(var(--trait) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--trait) 1px,transparent 1px) 0 0/44px 44px;
  opacity:.55;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.ins-tete{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;margin-bottom:34px}
.ins-carte{width:100%;max-width:620px;margin:0 auto;text-align:left;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--cadre);border-radius:20px;padding:28px;box-shadow:var(--ombre);backdrop-filter:blur(6px)}
.ins-pile{display:flex;flex-direction:column;gap:20px}
.ins-champ{display:flex;flex-direction:column;gap:7px}
.ins-champ>label,.ins-groupe>legend{padding:0;font-size:14px;font-weight:600;color:var(--texte)}
.ins-fac{font-weight:400;color:var(--discret)}
.ins-champ input,.ins-champ textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:12px;border:1px solid var(--champ);background:var(--fond2);color:var(--texte);font:inherit;font-size:16px;box-sizing:border-box}
.ins-champ textarea{min-height:92px;resize:vertical;line-height:1.5}
.ins-champ input:focus,.ins-champ textarea:focus{border-color:var(--menthe-texte);outline:none;box-shadow:0 0 0 3px rgba(46,230,166,.25)}
.ins-champ.ko input{border-color:var(--rouge)}
.ins-msg{font-size:14px;color:var(--rouge)}
.ins-ligne2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.ins-groupe{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.ins-puces3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ins-choix{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:1px solid var(--cadre);border-radius:12px;background:var(--fond2);cursor:pointer;font-size:15px;color:var(--texte);transition:border-color .15s ease-out,background-color .15s ease-out}
.ins-choix:hover{border-color:var(--champ)}
.ins-choix:has(input:checked){border-color:var(--menthe-texte);background:color-mix(in srgb,var(--menthe) 12%,var(--fond2))}
.ins-choix input{position:absolute;opacity:0;pointer-events:none}
.ins-rond{width:18px;height:18px;border-radius:50%;border:2px solid var(--champ);flex:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.ins-choix:has(input:checked) .ins-rond{border-color:var(--menthe-texte)}
.ins-choix:has(input:checked) .ins-rond::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--menthe-texte)}
.ins-choix:has(input:focus-visible){outline:2px solid var(--menthe-texte);outline-offset:2px}
.ins-consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--doux);cursor:pointer}
.ins-consent input{width:22px;height:22px;margin:1px 0 0;accent-color:#2EE6A6;flex:none}
.ins-consent.ko{color:var(--rouge)}
.ins-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ins-robot{min-height:0}
/* Vérification anti-robot (Turnstile, « interaction-only ») : invisible pour la plupart des visiteurs. Quand
   Cloudflare doit demander une action, la bande s'affiche DANS un cadre à la charte (rappels
   before/after-interactive-callback de inscription.js). [06/10, demande d'Amin] */
.ins-verif{display:flex;flex-direction:column;gap:0}
.ins-verif-titre{display:none;margin:0;font-size:14px;line-height:1.5;color:var(--doux)}
.ins-verif.est-visible{gap:10px;padding:14px 16px;border:1px solid var(--cadre);border-radius:12px;background:var(--fond2)}
.ins-verif.est-visible .ins-verif-titre{display:block}
.ins-robot iframe{max-width:100%}
/* Turnstile exige ≥ 300 px de large : sur petit écran, le cadre rend ses marges à la bande (phrase au-dessus). */
@media (max-width:480px){.ins-verif.est-visible{padding:0;border:0;background:none;gap:8px}}
.ins-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ins-actions .btn{min-width:220px}
.btn[disabled]{opacity:.75;cursor:progress}
.ins-roue{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ins-roue .8s linear infinite;box-sizing:border-box}
@keyframes ins-roue{to{transform:rotate(360deg)}}
.ins-bandeau{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.5}
.ins-bandeau.err{background:color-mix(in srgb,var(--corail) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--corail) 55%,transparent);color:var(--texte)}
.ins-bandeau svg{flex:none;margin-top:2px;color:var(--corail)}
.ins-boite{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:12px 6px 4px}
.ins-enveloppe{width:84px;height:84px;border-radius:24px;background:var(--vert-fond);border:1px solid rgba(46,230,166,.5);display:flex;align-items:center;justify-content:center;color:var(--menthe-texte)}
.ins-enveloppe svg{animation:ins-flotte 3.2s ease-in-out infinite}
@keyframes ins-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ins-etapes{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--discret)}
.ins-etapes b{display:inline-flex;align-items:center;gap:6px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--trait)}
.ins-etapes b.fait{color:var(--menthe-texte);border-color:rgba(46,230,166,.5)}
.ins-etapes b.ici{color:var(--texte);border-color:var(--champ)}
.ins-apres{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:15px;color:var(--discret)}
.ins-repli{display:flex;flex-direction:column;gap:18px;align-items:center}
@media (max-width:620px){
  .ins-lance{padding:72px 0 80px}
  .ins-ligne2{grid-template-columns:1fr}
  .ins-carte{padding:20px;border-radius:16px}
  .ins-puces3{grid-template-columns:1fr}
  .ins-actions .btn{width:100%;min-width:0}
  .ins-apres .ins-sep{display:none}
  .ins-apres{flex-direction:column;align-items:center;gap:8px}
}

/* ── Pages autonomes : barre minimale ── */
.ins-mini{border-bottom:1px solid var(--trait);background:var(--fond)}
.ins-mini .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.ins-logo{display:flex;align-items:center;gap:10px;color:var(--texte);font-weight:700;font-size:19px;text-decoration:none;letter-spacing:-.02em}
.ins-logo span{width:32px;height:32px;border-radius:9px;background:var(--menthe);color:var(--sur-menthe);display:flex;align-items:center;justify-content:center;font-size:16px}
.ins-esp{flex:1}
.ins-mini a.ins-retour{font-size:15px;color:var(--doux);text-decoration:none}
.ins-mini a.ins-retour:hover{color:var(--texte)}
.ins-mini .theme-bascule{margin-left:4px}

/* ── Pages autonomes : contenu ── */
.ins-page{padding:72px 0 96px;min-height:60vh}
.ins-page .wrap{max-width:760px}
.ins-carte-p{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:22px 24px}
.ins-kv{display:grid;grid-template-columns:200px 1fr;gap:10px 18px;font-size:15px;margin:0}
.ins-kv dt{color:var(--discret)}
.ins-kv dd{margin:0;color:var(--texte);overflow-wrap:anywhere}
.ins-act{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--trait)}
.ins-act:first-child{border-top:0}
.ins-txt{flex:1;min-width:0}
.ins-txt b{display:block;font-size:16px}
.ins-txt span{font-size:14px;color:var(--discret)}
.btn.ins-danger{border-color:color-mix(in srgb,var(--corail) 70%,transparent);color:var(--corail)}
.btn.ins-danger:hover{background:color-mix(in srgb,var(--corail) 12%,transparent);color:var(--corail);border-color:var(--corail)}
.btn.ins-danger.plein{background:var(--corail);color:#fff;border-color:var(--corail)}
.ins-pastille{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--trait);color:var(--doux);white-space:nowrap}
.ins-pastille.ok{color:var(--menthe-texte);border-color:rgba(46,230,166,.5);background:var(--vert-fond)}
.ins-pastille.off{color:var(--discret)}
.ins-pastille i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.ins-dlg{border:1px solid var(--cadre);border-radius:18px;padding:26px;max-width:460px;width:calc(100% - 32px);background:var(--surface);color:var(--texte);box-shadow:var(--ombre)}
.ins-dlg::backdrop{background:color-mix(in srgb,var(--fond) 70%,transparent)}
.ins-dlg h2{font-size:21px;margin:0 0 10px}
.ins-dlg p{color:var(--doux);font-size:15px;margin:0 0 16px}
.ins-dlg-act{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ins-suite{counter-reset:s;display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.ins-suite li{display:flex;gap:14px;align-items:flex-start}
.ins-suite li::before{counter-increment:s;content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--vert-fond);color:var(--menthe-texte);border:1px solid rgba(46,230,166,.5);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.ins-suite .ins-doux{color:var(--doux)}
.ins-ok-rond{width:76px;height:76px;border-radius:50%;background:var(--vert-fond);border:1px solid rgba(46,230,166,.55);display:flex;align-items:center;justify-content:center;color:var(--menthe-texte)}
.ins-ok-rond path{stroke-dasharray:30;stroke-dashoffset:30;animation:ins-trace .6s .2s cubic-bezier(.23,1,.32,1) forwards}
@keyframes ins-trace{to{stroke-dashoffset:0}}
.ins-decouvrir{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ins-decouvrir a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--trait);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--texte);transition:border-color .15s ease-out}
.ins-decouvrir a:hover{border-color:var(--menthe-texte)}
.ins-decouvrir a span{font-size:14px;color:var(--discret)}
.ins-json{font-family:ui-monospace,"Geist Mono",monospace;font-size:13px;line-height:1.55;background:var(--fond2);border:1px solid var(--trait);border-radius:12px;padding:14px 16px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--doux);margin:12px 0 0;max-height:320px;overflow:auto}
.ins-centre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:30px 10px}
.ins-prose h2{font-size:22px;margin:30px 0 8px}
.ins-prose p,.ins-prose li{color:var(--doux);font-size:16px}
.ins-prose ul{padding-left:20px;margin:6px 0}
.ins-tableau{width:100%;border-collapse:collapse;font-size:15px}
.ins-tableau th,.ins-tableau td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--trait);vertical-align:top}
.ins-tableau th{color:var(--discret);font-weight:600;font-size:13px}
@media (max-width:620px){
  .ins-kv{grid-template-columns:1fr;gap:2px}
  .ins-kv dd{margin-bottom:10px}
  .ins-act{flex-direction:column}
  .ins-act .btn{width:100%}
  .ins-decouvrir{grid-template-columns:1fr}
  .ins-tableau thead{display:none}
  .ins-tableau tr{display:block;border-bottom:1px solid var(--trait);padding:8px 0}
  .ins-tableau td{display:block;border:0;padding:3px 0}
}
@media (prefers-reduced-motion: reduce){
  .ins-roue,.ins-enveloppe svg{animation:none}
  .ins-ok-rond path{animation:none;stroke-dashoffset:0}
}

/* Le focus est déplacé par le script sur le titre de l'état affiché (lecteurs d'écran) : pas de cadre visible
   pour ce focus programmatique, qui n'est pas une navigation au clavier. */
.ins-page [tabindex="-1"]:focus,.ins-boite [tabindex="-1"]:focus{outline:none}