/* =====================================================================
   SCOLAVI – Formulaire d'inscription d'une école (scolavi.com/inscription)
   S'appuie sur css/vitrine.css (couleurs Scolavi : pétrole #0F4C5C, turquoise #2BB39A)
   ===================================================================== */
.ins-page{background:var(--fond)}
.ins-retour{font-weight:700;color:var(--p);padding:10px 4px}
.ins{max-width:760px;padding:28px 0 60px}
.ins-tete{text-align:center;margin-bottom:22px}
.ins-tete h1{font-size:clamp(1.8rem,5vw,2.5rem);color:var(--p);margin:6px 0 8px}
.ins-tete p{color:var(--gris);max-width:560px;margin:0 auto}

/* Étapes */
.ins-etapes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;list-style:none;margin:0 0 18px;position:sticky;top:70px;z-index:5;background:var(--fond);padding:8px 0}
.ins-etapes li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;font-weight:700;color:var(--gris);cursor:pointer;text-align:center}
.ins-etapes b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--ligne);color:var(--gris);font-size:.85rem}
.ins-etapes li.on b{background:var(--p);border-color:var(--p);color:#fff}
.ins-etapes li.fait b{background:var(--t);border-color:var(--t);color:var(--sur-t)}
.ins-etapes li.on{color:var(--p)}
@media(max-width:420px){.ins-etapes span{font-size:.62rem}}

/* Carte de l'étape */
.ins-pas{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:clamp(18px,4vw,30px);box-shadow:var(--ombre)}
.ins-pas h2{font-size:1.35rem;color:var(--texte);margin-bottom:6px}
.ins-sous{font-size:1.05rem;margin:26px 0 4px;padding-top:18px;border-top:1px solid var(--ligne)}
.ins-sous small,.ins label small{font-weight:600;color:var(--gris)}
.ins label{display:block;font-weight:700;font-size:.88rem;margin:16px 0 6px}
.ins input,.ins select,.ins textarea{width:100%;min-height:48px;padding:11px 13px;border:1.5px solid var(--ligne);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--texte)}
.ins textarea{min-height:0;line-height:1.5;resize:vertical}
.ins input:focus,.ins select:focus,.ins textarea:focus{outline:none;border-color:var(--t);box-shadow:0 0 0 4px rgba(43,179,154,.18)}
.ins input[type=color]{padding:4px;height:50px;cursor:pointer}
.ins-aide{color:var(--gris);font-size:.85rem;margin:2px 0 6px}
.ins-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:600px){.ins-2{grid-template-columns:1fr}}

/* Formules */
.ins-rythme{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--fond);border:1px solid var(--ligne);border-radius:14px;padding:5px;margin:14px 0}
.ins-rythme label{margin:0;cursor:pointer}
.ins-rythme input{position:absolute;opacity:0;width:1px;height:1px}
.ins-rythme span{display:block;text-align:center;padding:10px 4px;border-radius:10px;font-size:.85rem;font-weight:700;color:var(--gris)}
.ins-rythme em{display:block;font-style:normal;font-size:.7rem;color:var(--t)}
.ins-rythme input:checked+span{background:#fff;color:var(--p);box-shadow:0 2px 8px rgba(15,23,42,.1)}
.ins-rythme input:focus-visible+span{outline:2px solid var(--t)}
.ins-formules{display:grid;gap:12px}
.ins-formule{position:relative;display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;margin:0!important;padding:16px 18px;border:2px solid var(--ligne);border-radius:16px;cursor:pointer;background:#fff;transition:border-color .2s,box-shadow .2s}
.ins-formule input{position:absolute;opacity:0;width:1px;height:1px}
.ins-formule:has(input:checked){border-color:var(--t);box-shadow:0 0 0 4px rgba(43,179,154,.15)}
.ins-formule:has(input:focus-visible){outline:2px solid var(--p)}
.f-nom{font-size:1.1rem;font-weight:800;color:var(--texte)}
.f-cible{grid-column:1;font-size:.85rem;color:var(--gris);font-weight:600}
.f-prix{grid-column:2;grid-row:1/span 2;text-align:right;font-size:.8rem;color:var(--gris);font-weight:600}
.f-prix b{display:block;font-size:1.15rem;color:var(--p)}
.f-badge{position:absolute;top:-11px;left:16px;background:var(--t);color:var(--sur-t);font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:999px}

/* Adresse du site */
.ins-adresse{display:flex;align-items:center;border:1.5px solid var(--ligne);border-radius:12px;background:#fff;overflow:hidden}
.ins-adresse:focus-within{border-color:var(--t);box-shadow:0 0 0 4px rgba(43,179,154,.18)}
.ins-adresse input{border:0!important;box-shadow:none!important;min-width:0}
.ins-adresse span{padding:0 13px;color:var(--gris);font-weight:700;white-space:nowrap}
.ins-dispo{font-size:.85rem;font-weight:700;min-height:1.3em;margin-top:6px}
.ins-dispo.oui{color:#15803D}.ins-dispo.non{color:#B91C1C}

/* Images */
.ins-image{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ins-image img{width:200px;max-width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid var(--ligne)}
.ins-image img.carre{width:84px;height:84px;aspect-ratio:1;object-fit:contain}
.ins-image img.rond{width:84px;height:84px;aspect-ratio:1;border-radius:50%}
.ins-image .vide{display:grid;place-items:center;width:140px;aspect-ratio:16/10;border:1.5px dashed var(--ligne);border-radius:12px;color:var(--gris);font-size:.8rem}
.ins-image.envoi{opacity:.5;pointer-events:none}
.ins-image label{margin:0}
.petit-bt{min-height:42px!important;padding:8px 14px!important;font-size:.88rem!important}

/* Couleurs */
.ins-palettes{display:flex;flex-wrap:wrap;gap:8px}
.ins-palettes button{display:flex;height:40px;border:1px solid var(--ligne);border-radius:12px;overflow:hidden;padding:0;cursor:pointer;background:#fff}
.ins-palettes i{display:block;width:26px;height:100%}
.ins-palettes button:hover,.ins-palettes button:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.ins-apercu{margin-top:14px;border:1px solid var(--ligne);border-radius:16px;overflow:hidden}
.ap-hero{display:flex;align-items:center;gap:12px;padding:16px;color:#fff;font-size:1rem}
.ap-hero img,.ap-hero i{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:contain;flex:none}
.ap-hero i{display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem;color:#fff}
.ap-corps{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px;background:#fff}
.ap-corps span{padding:9px 14px;border-radius:10px;font-weight:700;font-size:.85rem}
.ap-corps .ct{border:1.5px solid;background:#fff}

/* Chiffres clés, frais */
.ins-chiffres{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px}
.ins-frais{display:grid;gap:10px}
.ins-frais-ligne{display:grid;grid-template-columns:60px 1fr 1fr;gap:10px;align-items:end;padding:12px;border:1px solid var(--ligne);border-radius:14px;background:var(--fond)}
.ins-frais-ligne b{align-self:center;color:var(--p)}
.ins-frais-ligne label{margin:0;font-size:.75rem;color:var(--gris)}
.ins-frais-ligne label span{display:block;margin-bottom:4px}

/* Récapitulatif */
.ins-recap ul{list-style:none;border:1px solid var(--ligne);border-radius:14px;overflow:hidden;margin:10px 0}
.ins-recap li{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--ligne);font-size:.9rem}
.ins-recap li:last-child{border-bottom:0}
.ins-recap li span{color:var(--gris)}.ins-recap li b{text-align:right}
.ins-ok{display:flex!important;gap:10px;align-items:flex-start;font-weight:600!important;font-size:.88rem!important;line-height:1.5}
.ins-ok input{width:22px;min-height:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--t)}
.ins-ok a{color:var(--p);text-decoration:underline}
.ins-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Navigation */
.ins-msg{color:#B91C1C;font-weight:700;font-size:.9rem;min-height:1.2em;margin:14px 0 0;text-align:center}
.ins-nav{display:flex;gap:10px;justify-content:space-between;margin-top:14px;position:sticky;bottom:0;padding:12px 0;background:linear-gradient(transparent,var(--fond) 30%)}
.ins-nav .bt{flex:1}
.ins-nav [hidden]{display:none}

/* Fin */
.ins-fin{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);padding:34px 22px;text-align:center;box-shadow:var(--ombre);display:flex;flex-direction:column;align-items:center;gap:12px}
.ins-fin[hidden]{display:none}
.ins-fin-ic{width:72px;height:72px;border-radius:50%;background:var(--t);color:var(--sur-t);display:grid;place-items:center;font-size:2.2rem;font-weight:800}
.ins-fin h2{color:var(--p);font-size:1.6rem}
.ins-fin p{color:var(--gris);max-width:520px}
.ins-fin .bt{width:100%;max-width:380px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}