/* =====================================================================
   forms.css — formulaire d'inscription en 5 étapes
   ===================================================================== */

.inscription {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-l);
  overflow: hidden;
}

.inscription__grille { display: grid; }

@media (min-width: 900px) {
  .inscription__grille { grid-template-columns: minmax(0, 1fr) 320px; }
}

.inscription__corps { padding: var(--e-5); }

@media (min-width: 768px) {
  .inscription__corps { padding: var(--e-6); }
}

/* ---------------------------------------------------------------------
   Progression
   --------------------------------------------------------------------- */
.progression { margin-bottom: var(--e-5); }

.progression__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-4);
  margin-bottom: var(--e-3);
}

.progression__etape {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: 600;
}

.progression__compteur {
  font-size: var(--t-petit);
  color: var(--texte-faible);
  flex: none;
}

.progression__piste {
  height: 4px;
  background: var(--surface-douce);
  border-radius: var(--rayon-rond);
  overflow: hidden;
}

.progression__jauge {
  height: 100%;
  width: 20%;
  background: var(--or);
  border-radius: var(--rayon-rond);
  transition: width var(--duree) var(--courbe);
}

/* ---------------------------------------------------------------------
   Étapes
   --------------------------------------------------------------------- */
.etape { border: 0; padding: 0; margin: 0; }
.etape[hidden] { display: none; }

.etape__legende {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--e-2);
}

.etape__aide {
  color: var(--texte-doux);
  font-size: var(--t-petit);
  margin-bottom: var(--e-5);
  max-width: var(--largeur-texte);
}

/* ---------------------------------------------------------------------
   Choix en cartes (doyenné, paroisse)
   --------------------------------------------------------------------- */
.choix { display: grid; gap: var(--e-3); }

.choix--defilant {
  max-height: 52vh;
  overflow-y: auto;
  padding-right: var(--e-1);
}

.choix__option { position: relative; display: block; }

.choix__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choix__contenu {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  background: var(--surface);
  transition: border-color var(--duree-courte), background-color var(--duree-courte);
}

.choix__marque {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--filet-fort);
  display: grid;
  place-items: center;
}
.choix__marque::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--duree-courte);
}

.choix__texte { display: grid; gap: 2px; }
.choix__titre { font-weight: 600; line-height: 1.3; }
.choix__detail { font-size: var(--t-petit); color: var(--texte-faible); }

.choix__option input:checked + .choix__contenu {
  border-color: var(--or);
  background: #FDF8EC;
}
.choix__option input:checked + .choix__contenu .choix__marque {
  border-color: var(--or);
}
.choix__option input:checked + .choix__contenu .choix__marque::after {
  background: var(--or);
}
.choix__option input:focus-visible + .choix__contenu {
  outline: 3px solid var(--or);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Champs
   --------------------------------------------------------------------- */
.champ { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }

.champ__intitule { font-weight: 600; font-size: var(--t-petit); }

.champ__saisie {
  width: 100%;
  min-height: var(--hauteur-champ);
  padding: 0 var(--e-4);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-m);
  background: var(--surface);
  transition: border-color var(--duree-courte);
}
.champ__saisie:hover { border-color: var(--texte-faible); }
.champ__saisie[aria-invalid="true"] { border-color: var(--erreur); }

.champ__indice { font-size: var(--t-micro); color: var(--texte-faible); }

.champ__erreur {
  display: none;
  font-size: var(--t-micro);
  color: var(--erreur);
  font-weight: 600;
}
.champ__erreur[data-visible="true"] { display: block; }

.recherche { margin-bottom: var(--e-4); }

/* Compteur d'effectif */
.compteur {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  gap: var(--e-2);
  max-width: 280px;
}

.compteur__bouton {
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-m);
  height: var(--hauteur-champ);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bleu);
  transition: border-color var(--duree-courte);
}
.compteur__bouton:hover { border-color: var(--bleu); }

.compteur .champ__saisie {
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
  padding-inline: var(--e-2);
}

/* Cache les flèches natives du champ number */
.compteur .champ__saisie::-webkit-outer-spin-button,
.compteur .champ__saisie::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.compteur .champ__saisie { -moz-appearance: textfield; appearance: textfield; }

/* Case à cocher de confirmation */
.confirmation {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  background: var(--fond);
  margin-top: var(--e-5);
  cursor: pointer;
}
.confirmation input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--bleu);
}
.confirmation span { font-size: var(--t-petit); }

/* ---------------------------------------------------------------------
   Récapitulatif
   --------------------------------------------------------------------- */
.recap {
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  overflow: hidden;
}

.recap__ligne {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-petit);
}
.recap__ligne + .recap__ligne { border-top: 1px solid var(--filet); }
.recap__intitule { color: var(--texte-faible); }
.recap__valeur { font-weight: 600; overflow-wrap: anywhere; }

.recap__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--bleu);
  color: var(--texte-invers);
}
.recap__total-montant {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--or-clair);
}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
.navigation {
  display: flex;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* Sur mobile, l'action principale passe au-dessus et prend toute la
   largeur : « Continuer vers le paiement » ne tient pas sur une
   demi-largeur à 360px. */
@media (max-width: 559px) {
  .navigation { flex-direction: column-reverse; }
  .navigation .bouton { width: 100%; }
}

@media (min-width: 560px) {
  .navigation { justify-content: flex-end; }
  .navigation .bouton { flex: none; min-width: 150px; }
  .navigation .bouton--retour { margin-right: auto; }
}

/* ---------------------------------------------------------------------
   Total : bandeau collant sur mobile, résumé latéral sur desktop
   --------------------------------------------------------------------- */
.total-collant {
  position: sticky;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--marge-laterale);
  background: var(--bleu);
  color: var(--texte-invers);
  border-top: 1px solid var(--filet-or-faible);
  font-size: var(--t-petit);
}
.total-collant__montant {
  font-family: var(--police-titre);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--or-clair);
}

.resume { display: none; }

@media (min-width: 900px) {
  .total-collant { display: none; }
  .resume {
    display: block;
    background: var(--fond);
    border-left: 1px solid var(--filet);
    padding: var(--e-5);
  }
  .resume__contenu { position: sticky; top: 88px; display: grid; gap: var(--e-3); }
  .resume__titre {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    font-weight: 600;
  }
  .resume__ligne {
    display: flex;
    justify-content: space-between;
    gap: var(--e-3);
    font-size: var(--t-petit);
    color: var(--texte-doux);
  }
  .resume__ligne span:last-child { font-weight: 600; color: var(--texte); text-align: right; }
  .resume__total {
    display: flex;
    justify-content: space-between;
    gap: var(--e-3);
    padding-top: var(--e-3);
    border-top: 1px solid var(--filet-fort);
    font-weight: 700;
  }
  .resume__total span:last-child {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    color: var(--bleu);
  }
}

/* ---------------------------------------------------------------------
   Panneau de paiement
   --------------------------------------------------------------------- */
.paiement {
  margin-top: var(--e-4);
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
}

.paiement__resume {
  display: grid;
  gap: 2px;
}

.paiement__intitule {
  font-size: var(--t-petit);
  color: var(--texte-faible);
}

.paiement__reference {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-md);
}

.paiement__montant {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--bleu);
}

/* ---------------------------------------------------------------------
   États
   --------------------------------------------------------------------- */
.chargement {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-5);
  color: var(--texte-faible);
  font-size: var(--t-petit);
}

.rotateur {
  width: 18px;
  height: 18px;
  border: 2px solid var(--filet-fort);
  border-top-color: var(--bleu);
  border-radius: 50%;
  animation: tourner 700ms linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rotateur { animation-duration: 2s; }
}

.vide {
  padding: var(--e-5);
  border: 1px dashed var(--filet-fort);
  border-radius: var(--rayon-m);
  color: var(--texte-doux);
  font-size: var(--t-petit);
}