/* ==========================================================
   Doussou Formation : formulaire.css
   Formulaires : inscription, soumission (et page paiement)
   Règles reprises telles quelles de style.css, dans le même ordre.
   ========================================================== */


/* Formulaire */
.form-page{padding-top:0}
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;padding-top:10px;padding-bottom:60px}
.page-title{font-weight:400;font-size:30px;text-transform:uppercase;letter-spacing:.05em}
.page-intro{font-size:14px;margin:6px 0 18px}
.type-switch{display:inline-flex;border:2px solid var(--navy-2);border-radius:6px;overflow:hidden;margin-bottom:22px}
.type-switch a{padding:8px 16px;font-size:13px;font-weight:500;color:var(--navy-2)}
.type-switch a.on{background:var(--navy-2);color:#fff}
.alert{background:#fff1ec;border-left:6px solid var(--orange);padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:18px}
.form{display:flex;flex-direction:column;gap:18px}
.form fieldset{border:1px solid var(--blue-med);border-radius:15px;padding:16px 18px 18px;background:#fff}
.form legend{padding:4px 12px;background:rgba(177,217,255,.35);border-radius:5px;font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500}
.field.full{width:100%}
.field.narrow{max-width:220px;margin-top:14px}
.field input,.field select,.field textarea{font:inherit;font-weight:400;font-size:14px;padding:10px 12px;border:1px solid rgba(39,146,250,.5);border-radius:8px;background:var(--blue-bg);color:#000;width:100%}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue-med);outline-offset:1px;border-color:var(--blue-med)}
[aria-invalid=true] input,input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--orange);background:#fff8f5}
.field-error{color:#c43d00;font-size:12px;font-weight:500}
.radios{display:flex;flex-direction:column;gap:8px}
.radio,.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;cursor:pointer}
.radio{border:1px solid rgba(39,146,250,.3);border-radius:10px;padding:10px 12px}
.radio:has(input:checked){border-color:var(--blue-med);background:rgba(177,217,255,.2)}
.radio input,.check input{margin-top:3px;accent-color:var(--blue-btn);width:16px;height:16px;flex:none}
.check a{color:var(--blue-btn);text-decoration:underline}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:6px}
.form-actions button:disabled{opacity:.7;cursor:wait}
.form-note{font-size:12px;color:#444}
.summary{position:sticky;top:20px}
.summary h2{font-family:'Poppins';font-weight:500;font-size:18px;color:var(--navy)}
@media (max-width:900px){
  .form-layout{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .page-title{font-size:24px}
  .type-switch{display:flex}
  .type-switch a{flex:1;text-align:center;padding:8px}
  .form-actions .btn{width:100%}
}