/* =============================================
   TCM RIVERY — Inscription Form Styles
   ============================================= */

/* --- NAV OVERRIDE FOR INSCRIPTION PAGE --- */
.main-nav--inscription {
  background: rgba(250,248,245,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.mobile-back-link {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--texte-mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .main-nav--inscription .nav-links { display: none; }
  .mobile-back-link { display: flex; }
}

/* --- MAIN LAYOUT --- */
.inscription-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}

/* --- HEADER --- */
.inscription-header {
  margin-bottom: 48px;
}

.inscription-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texte-mid);
  margin-bottom: 24px;
  transition: color 0.3s;
}

.inscription-back:hover {
  color: var(--orange-vif);
}

.inscription-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.95;
  margin-bottom: 12px;
}

.inscription-desc {
  max-width: 600px;
}

/* --- PROGRAMME SELECTOR --- */
.programme-selector {
  margin-bottom: 48px;
}

.programme-selector-title {
  font-family: var(--font-titre);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--noir);
  margin-bottom: 24px;
  text-align: center;
}

.programme-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.programme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  text-align: center;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
  cursor: pointer;
}

.programme-card:hover {
  border-color: var(--orange-vif);
  box-shadow: 0 0 0 1px var(--orange-vif), 0 8px 24px rgba(230,81,0,0.1);
  transform: translateY(-2px);
}

.programme-card-icon {
  font-size: 28px;
  color: var(--orange-vif);
  transition: transform 0.3s;
}

.programme-card:hover .programme-card-icon {
  transform: scale(1.15);
}

.programme-card-type {
  font-family: var(--font-titre);
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--noir);
}

.programme-card-desc {
  font-size: 13px;
  color: var(--texte-mid);
  line-height: 1.4;
}

/* --- CARTE PROGRAMME VERROUILLEE (Centre d'entrainement) --- */
/* La carte reste visible et cliquable mais le contenu est desature pour
   signaler qu'une action prealable est necessaire. Le clic ouvre le modal
   de saisie de code (au lieu de naviguer vers le formulaire).
   Background opaque (rgba 0.88) + couleurs texte foncees pour respecter
   WCAG 2.1 AA (contraste >= 4.5:1). */
.programme-card.is-locked {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  filter: grayscale(25%);
  border-style: dashed;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.programme-card.is-locked .programme-card-icon { opacity: 0.75; }
.programme-card.is-locked .programme-card-type { color: var(--noir); }
.programme-card.is-locked .programme-card-desc { color: #4a4a4a; }
.programme-card.is-locked:hover {
  filter: grayscale(0%);
  border-style: solid;
  border-color: var(--orange-vif);
  box-shadow: 0 0 0 1px var(--orange-vif), 0 8px 24px rgba(230, 81, 0, 0.12);
  transform: translateY(-2px);
}
.programme-card.is-locked:focus-visible {
  outline: 2px solid var(--orange-vif);
  outline-offset: 3px;
}
.programme-card-lock {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: var(--texte-mid);
  font-size: 14px;
}
.programme-card.is-locked:hover .programme-card-lock {
  background: var(--orange-vif);
  color: #fff;
}

/* --- NOTE D'AIDE SOUS LES FORMULES (foyer fiscal / famille) --- */
.formule-card-note {
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--texte-light, var(--texte-mid));
  line-height: 1.4;
}

/* --- MODAL DEVERROUILLAGE PROGRAMME --- */
.unlock-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.unlock-modal.is-open { display: flex; }
.unlock-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 25, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.unlock-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 36px 28px 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  text-align: center;
  animation: unlock-modal-in 0.18s ease-out both;
}
@keyframes unlock-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.unlock-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  /* WCAG AA : #424242 sur fond blanc = ratio 9.7:1, OK pour icone et texte. */
  color: #424242;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.unlock-modal-close:hover { background: rgba(0, 0, 0, 0.08); color: var(--noir); }
.unlock-modal-close:focus-visible {
  outline: 2px solid var(--orange-vif);
  outline-offset: 2px;
}
.unlock-modal-icon {
  font-size: 32px;
  color: var(--orange-vif);
  margin-bottom: 8px;
  display: inline-block;
}
.unlock-modal-title {
  font-family: var(--font-titre);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--noir);
  margin: 0 0 12px;
}
.unlock-modal-text {
  font-size: 14px;
  color: var(--texte-mid);
  line-height: 1.6;
  margin: 0 0 20px;
}
.unlock-modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.unlock-modal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--noir);
}
.unlock-modal-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-align: center;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
}
.unlock-modal-input:focus {
  outline: none;
  border-color: var(--orange-vif);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.15);
}
.unlock-modal-error {
  min-height: 18px;
  font-size: 13px;
  color: #c62828;
  line-height: 1.4;
}
.unlock-modal-submit {
  padding: 14px 16px;
  font-family: var(--font-titre);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange-vif);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.unlock-modal-submit:hover:not([disabled]) { background: #cc5b00; }
.unlock-modal-submit:active:not([disabled]) { transform: scale(0.98); }
.unlock-modal-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
.unlock-modal-submit.is-loading {
  position: relative;
  color: transparent;
}
.unlock-modal-submit.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: unlock-spin 0.6s linear infinite;
}
@keyframes unlock-spin { to { transform: rotate(360deg); } }

/* Empeche le scroll en arriere-plan quand le modal est ouvert */
body.unlock-modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .unlock-modal-card { padding: 30px 18px 22px; }
  .unlock-modal-title { font-size: 20px; }
  .unlock-modal-input { font-size: 20px; }
}

/* --- MODAL ELIGIBILITE (justificatifs a presenter) --- */
.eligibility-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.eligibility-modal.is-open { display: flex; }
.eligibility-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 25, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.eligibility-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 32px 28px 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  text-align: left;
  animation: eligibility-card-in 0.2s ease-out both;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
@keyframes eligibility-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.eligibility-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #424242;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.eligibility-close:hover { background: rgba(0, 0, 0, 0.08); color: var(--noir, #111); }
.eligibility-close:focus-visible {
  outline: 2px solid var(--orange-vif, #e65100);
  outline-offset: 2px;
}
.eligibility-icon {
  display: inline-block;
  font-size: 28px;
  color: var(--orange-vif, #e65100);
  margin-bottom: 8px;
}
.eligibility-title {
  font-family: var(--font-titre, system-ui);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--noir, #1c1917);
  margin: 0 0 14px;
  line-height: 1.25;
}
.eligibility-body {
  font-size: 14px;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0 0 22px;
}
.eligibility-body p { margin: 0 0 12px; }
.eligibility-body p:last-child { margin-bottom: 0; }
.eligibility-body ul {
  margin: 8px 0 12px;
  padding-left: 0;
  list-style: none;
}
.eligibility-body ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  list-style: none;
}
.eligibility-body ul li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--orange-vif, #e65100);
  font-weight: 700;
}
.eligibility-body .eligibility-note {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(230, 81, 0, 0.07);
  border-left: 3px solid var(--orange-vif, #e65100);
  border-radius: 4px;
  font-size: 13px;
}
.eligibility-body strong {
  color: var(--noir, #1c1917);
  font-weight: 700;
}
/* Séparateur "OU" entre deux puces alternatives (popup étudiant) :
   "OU" centré avec une fine ligne horizontale de chaque côté, en orange. */
.eligibility-body .eligibility-or {
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--orange-vif, #e65100);
  margin: 2px 0;
}
.eligibility-body .eligibility-or::before,
.eligibility-body .eligibility-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(230, 81, 0, 0.22);
  margin: 0 12px;
}
.eligibility-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  font-family: var(--font-titre, system-ui);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange-vif, #e65100);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.eligibility-submit:hover { background: #cc5b00; }
.eligibility-submit:active { transform: scale(0.98); }
.eligibility-submit i { font-size: 16px; }

/* Bloque le scroll de fond quand le modal est ouvert */
body.eligibility-modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .eligibility-card { padding: 28px 18px 18px; }
  .eligibility-title { font-size: 19px; }
  .eligibility-body { font-size: 13px; }
}

/* --- FORM SECTIONS --- */
.inscription-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-section {
  border: none;
  padding: 0;
  margin: 0 0 40px;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-titre);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--noir);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Texte d'aide juste sous le titre d'une section du formulaire.
   Renforce visuellement (border-left + background) pour ne pas reposer
   uniquement sur l'italique + le gris -- WCAG AA. */
.form-section-hint {
  margin-top: -8px;
  margin-bottom: 18px;
  padding: 10px 14px;
  font-size: 14px;
  color: #3a3a3a;
  background: rgba(230, 81, 0, 0.06);
  border-left: 3px solid var(--orange-vif);
  border-radius: 4px;
  line-height: 1.5;
}

.form-section-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange-vif);
  color: var(--blanc);
  font-family: var(--font-titre);
  font-size: 16px;
  flex-shrink: 0;
}

/* --- FORM ROWS --- */
.form-row {
  margin-bottom: 0;
}

.form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 520px) {
  .form-row--2col {
    grid-template-columns: 1fr;
  }
}

/* --- FORM GROUP OVERRIDES --- */
.inscription-form .form-group {
  margin-bottom: 16px;
}

/* --- CHAMP DATE DE NAISSANCE : saisie manuelle JJ/MM/AAAA + bouton calendrier --- */
/* Sur Android, l'input type="date" force un picker qui rend la saisie d'une
   date ancienne (annee 1985 etc.) penible. On laisse la saisie manuelle au
   clavier comme mode principal, et on garde un bouton qui ouvre le picker
   natif pour ceux qui preferent (via showPicker()). */
.inscription-form .form-group--date { position: relative; }
.inscription-form .form-group--date input[type="text"] {
  /* Reserve la place du bouton a droite */
  padding-right: 50px;
  /* Police monospace-friendly pour la saisie de chiffres + slashes */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.inscription-form .date-picker-btn {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #424242;
  font-size: 20px;
  transition: background 0.18s, color 0.18s;
}
.inscription-form .date-picker-btn:hover,
.inscription-form .date-picker-btn:focus-visible {
  background: rgba(230, 81, 0, 0.08);
  color: var(--orange-vif);
  outline: none;
}
.inscription-form .date-picker-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(230, 81, 0, 0.35);
}
/* Input date natif HORS VIEWPORT.
   IMPORTANT : opacity:0 + position:absolute ne suffit PAS sur Samsung
   Internet, qui rend le widget date natif a sa taille reelle malgre les
   contraintes CSS. On sort completement de l'ecran (left/top -10000px)
   et on garde 1x1 px : showPicker() reste appelable, et l'element est
   100% invisible. */
.inscription-form .date-field__native {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

.inscription-form .form-group input,
.inscription-form .form-group textarea,
.inscription-form .form-group select {
  width: 100%;
  padding: 20px 16px 8px;
  background: var(--blanc);
  border: 1px solid var(--border);
  color: var(--texte);
  font-family: var(--font-corps);
  font-size: 14px;
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
  appearance: none;
  -webkit-appearance: none;
}

.inscription-form .form-group select {
  padding: 14px 16px;
  color: var(--texte-mid);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23A8A29E' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.inscription-form .form-group label {
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--texte-light);
  font-size: 13px;
  transition: all 0.3s;
  pointer-events: none;
}

.inscription-form .form-group input:focus ~ label,
.inscription-form .form-group input:not(:placeholder-shown) ~ label,
.inscription-form .form-group textarea:focus ~ label,
.inscription-form .form-group textarea:not(:placeholder-shown) ~ label {
  top: 4px;
  font-size: 10px;
  color: var(--orange-vif);
  letter-spacing: 0.05em;
}

/* Labels qui restent toujours en haut (date, etc.) */
.label--always-up {
  top: 4px !important;
  font-size: 10px !important;
  color: var(--orange-vif) !important;
  letter-spacing: 0.05em !important;
}

.inscription-form .form-group input:focus,
.inscription-form .form-group textarea:focus,
.inscription-form .form-group select:focus {
  border-color: var(--orange-vif);
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,81,0,0.08);
}

/* --- VALIDATION STATES --- */
.form-group--error input,
.form-group--error textarea,
.form-group--error select {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.08) !important;
}

.form-group--error label {
  color: #DC2626 !important;
}

.form-error {
  display: block;
  font-size: 12px;
  color: #DC2626;
  margin-top: 4px;
  min-height: 0;
  transition: min-height 0.2s;
}

.form-error:empty {
  display: none;
}

/* --- RADIO CARDS --- */
.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.radio-group--vertical {
  grid-template-columns: 1fr;
}

@media (max-width: 520px) {
  .radio-group {
    grid-template-columns: 1fr;
  }
}

.radio-card {
  cursor: pointer;
}

.radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  font-size: 14px;
  color: var(--texte-mid);
}

.radio-card-inner i {
  font-size: 20px;
  color: var(--texte-light);
  transition: color 0.3s;
  flex-shrink: 0;
}

.radio-card input:checked ~ .radio-card-inner {
  border-color: var(--orange-vif);
  box-shadow: 0 0 0 1px var(--orange-vif);
  background: rgba(230,81,0,0.03);
  color: var(--noir);
}

.radio-card input:checked ~ .radio-card-inner i {
  color: var(--orange-vif);
}

.radio-card input:focus-visible ~ .radio-card-inner {
  box-shadow: 0 0 0 3px rgba(230,81,0,0.15);
}

.radio-card--compact .radio-card-inner {
  padding: 14px 16px;
}

/* --- FORMULE CARDS (tarif options) --- */
.formule-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formule-card {
  cursor: pointer;
}

.formule-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.formule-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.formule-card-inner:hover {
  border-color: var(--gris-mid);
}

.formule-card input:checked ~ .formule-card-inner {
  border-color: var(--orange-vif);
  box-shadow: 0 0 0 1px var(--orange-vif);
  background: rgba(230,81,0,0.03);
}

.formule-card input:focus-visible ~ .formule-card-inner {
  box-shadow: 0 0 0 3px rgba(230,81,0,0.15);
}

.formule-card-label {
  font-size: 14px;
  color: var(--texte);
  font-weight: 500;
}

.formule-card-detail {
  font-size: 12px;
  color: var(--texte-light);
  margin-top: 2px;
}

.formule-card-price {
  font-family: var(--font-titre);
  font-size: 28px;
  color: var(--orange-vif);
  flex-shrink: 0;
  white-space: nowrap;
}

.formule-card-price small {
  font-size: 14px;
  color: var(--texte-light);
}

/* --- TARIF TOTAL --- */
.tarif-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  margin-top: 16px;
  background: var(--fond-alt);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.tarif-total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--texte-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tarif-total-amount {
  font-family: var(--font-titre);
  font-size: 36px;
  color: var(--orange-vif);
}

/* --- SEPA FIELDS --- */
.sepa-fields {
  margin-top: 16px;
  padding: 20px;
  background: var(--fond-alt);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.sepa-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--texte-light);
  line-height: 1.5;
  margin-top: 8px;
}

.sepa-info i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- CHECKBOX GROUP --- */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

/* Inherits .consent-label from style.css */

/* --- RGPD NOTICE (mentions d'information art. 13 et 14 RGPD) --- */
.form-rgpd-notice {
  padding: 18px 22px;
  background: rgba(25,118,210,0.04);
  border: 1px solid rgba(25,118,210,0.15);
  border-radius: 10px;
  margin: 8px 0 4px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--texte-mid);
}

.form-rgpd-notice p {
  margin-bottom: 10px;
}

.form-rgpd-notice p:last-child {
  margin-bottom: 0;
}

.form-rgpd-notice p strong {
  color: var(--noir);
}

.form-rgpd-notice a {
  color: var(--bleu-vif);
  text-decoration: underline;
}

.form-rgpd-notice a:hover {
  text-decoration: none;
}

/* --- CAUTION INFO --- */
.caution-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(25,118,210,0.05);
  border: 1px solid rgba(25,118,210,0.15);
  border-radius: 8px;
  font-size: 13px;
  color: var(--bleu-vif);
  margin-top: 8px;
}

.caution-info i {
  font-size: 20px;
  flex-shrink: 0;
}

/* --- RECAP --- */
.form-section--recap {
  padding: 28px;
  background: var(--fond-alt);
  border-radius: 16px;
  border: 1px solid var(--border);
}

.recap-content {
  margin-bottom: 24px;
}

.recap-block {
  margin-bottom: 16px;
}

.recap-block-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-light);
  margin-bottom: 6px;
}

.recap-block-content {
  font-size: 14px;
  color: var(--texte);
  line-height: 1.7;
}

.recap-block-content strong {
  color: var(--noir);
}

.recap-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* --- ACTIONS --- */
.form-row--actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-row--actions .cta-btn--ghost {
  flex-shrink: 0;
  border-color: var(--border);
  color: var(--texte-mid);
  background: var(--fond-alt);
}

.form-row--actions .cta-btn--ghost:hover {
  color: var(--noir);
  border-color: var(--texte-mid);
  background: var(--fond);
}

.form-row--actions .cta-btn--full {
  flex: 1;
}

.cta-btn--disabled {
  opacity: 0.45;
  cursor: default;
}

.cta-btn--disabled::after {
  display: none;
}

/* --- BOUTON "TRANSFERT EN COURS" (submit pendant l'envoi) --- */
.cta-btn--loading {
  opacity: 0.9;
  cursor: progress;
  pointer-events: none;
}
.cta-btn--loading i {
  display: inline-block;
  animation: cta-spin 0.7s linear infinite;
}
@keyframes cta-spin {
  to { transform: rotate(360deg); }
}

/* --- OVERLAY PLEIN ÉCRAN "ENVOI EN COURS" --- */
.upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 25, 23, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.upload-overlay.is-visible {
  display: flex;
  animation: upload-overlay-in 0.2s ease;
}
@keyframes upload-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.upload-overlay-card {
  background: #ffffff;
  border: 1px solid rgba(230, 81, 0, 0.12);
  border-radius: 20px;
  padding: 40px 44px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
}
.upload-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 4px solid #f3ece8;
  border-top-color: #e65100;
  border-radius: 50%;
  animation: cta-spin 0.7s linear infinite;
}
.upload-overlay-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #1c1917;
}
.upload-overlay-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #78716c;
}

/* --- BARRE DE PROGRESSION dans l'overlay d'envoi --- */
/* Anime 0->95% en ~6s avec ease-out, puis 100% a la reception. Donne du
   feedback visuel pendant le cold start (jusqu'a 8s la 1ere fois) + les
   appels Sheets/Drive (~2-5s). Pourcentage affiche pour rassurer. */
.upload-progress {
  position: relative;
  margin: 4px auto 14px;
  width: 100%;
  max-width: 280px;
  height: 8px;
  background: #f5f5f4;
  border-radius: 999px;
  overflow: hidden;
}
.upload-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  /* min-width pour voir un petit liseret orange meme a 0% (premier feedback) */
  min-width: 3px;
  background: linear-gradient(90deg, var(--orange-vif, #e65100) 0%, #ff7a18 100%);
  border-radius: 999px;
  /* AUCUNE transition par defaut : sinon elle se "verouille" au moment du
     reflow et la transition de 6s definie ci-dessous n'est jamais utilisee.
     Chaque classe d'etat (is-running/is-complete) embarque sa propre duree. */
  transition: none;
}
.upload-progress-fill.is-running {
  /* Anime vers 95% sur 6s avec ease-out (rapide au debut, ralentit a la fin) */
  width: 95%;
  transition: width 6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.upload-progress-fill.is-stalled {
  /* Reste a 95% avec un leger pulse pour montrer qu'on attend toujours */
  animation: upload-progress-pulse 1.4s ease-in-out infinite;
}
.upload-progress-fill.is-complete {
  width: 100%;
  transition: width 0.35s ease-out;
}
@keyframes upload-progress-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.upload-progress-pct {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--orange-vif, #e65100);
  font-variant-numeric: tabular-nums;
}

/* --- DISPONIBILITÉS : composeur de créneaux --- */
.dispo-hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #57534e;
}
.dispo-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 18px;
  padding: 18px;
  background: #faf6f2;
  border: 1px solid #ece7e2;
  border-radius: 14px;
}
.dispo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dispo-field--heure {
  min-width: 190px;
}
.dispo-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8a29e;
}
.dispo-days {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dispo-day {
  min-width: 46px;
  padding: 9px 12px;
  border: 1px solid #e0dbd5;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #57534e;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.dispo-day:hover { border-color: #e65100; color: #e65100; }
.dispo-day:active { transform: scale(0.96); }
.dispo-day.is-active {
  background: #e65100;
  border-color: #e65100;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(230, 81, 0, 0.6);
}
.dispo-heure {
  padding: 10px 12px;
  border: 1px solid #e0dbd5;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #292524;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dispo-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  background: #292524;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.dispo-add:hover { background: #1c1917; }
.dispo-add:active { transform: translateY(1px); }
.dispo-add i { font-size: 18px; }
.dispo-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}
.dispo-empty {
  font-size: 13px;
  font-style: italic;
  color: #a8a29e;
}
.dispo-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 8px;
  background: #fff;
  border: 1px solid #fed7aa;
  border-left: 3px solid #e65100;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #44403c;
  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.3);
  animation: dispo-chip-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dispo-chip--dragging {
  opacity: 0.92;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.35);
  cursor: grabbing;
  animation: none;
}
.dispo-chip-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #a8a29e;
  cursor: grab;
  touch-action: none; /* indispensable pour le glisser tactile (sinon la page scrolle) */
}
.dispo-chip-handle i { font-size: 16px; }
.dispo-chip-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e65100;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.dispo-chip-label { flex: 1 1 auto; }
@keyframes dispo-chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dispo-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #f5f5f4;
  color: #78716c;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dispo-chip-remove:hover { background: #fee2e2; color: #dc2626; }
.dispo-chip-remove i { font-size: 14px; }
.dispo-counter {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
}
.dispo-counter--ok { color: #15803d; }
.dispo-comment { margin-top: 18px; }
.dispo-comment .dispo-comment-opt { font-weight: 400; color: #a8a29e; }
.dispo-comment-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: #44403c;
  resize: vertical;
  box-sizing: border-box;
}
.dispo-comment-input:focus {
  outline: none;
  border-color: #e65100;
  box-shadow: 0 0 0 3px rgba(230,81,0,0.12);
}

@media (max-width: 560px) {
  .dispo-builder { flex-direction: column; align-items: stretch; }
  .dispo-field--heure { min-width: 0; }
  .dispo-heure { width: 100%; }
  .dispo-add { justify-content: center; }
}

/* --- AVERTISSEMENT D'ÂGE (non bloquant, sous la date de naissance) --- */
.age-warning {
  margin-top: 8px;
  padding: 10px 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 3px solid #e65100;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #9a3412;
}

/* Espace entre les boutons d'action et le message de retour (succès/erreur),
   seulement quand un message est affiché. */
.submit-feedback:not(:empty) {
  margin-top: 24px;
}

/* --- CARTE DE CONFIRMATION (après envoi réussi) --- */
.success-card {
  text-align: center;
  padding: 34px 28px;
  background: #ffffff;
  border: 1px solid rgba(230, 81, 0, 0.18);
  border-radius: 18px;
  box-shadow: 0 18px 44px -22px rgba(230, 81, 0, 0.35);
  animation: success-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes success-pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.success-card-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(230, 81, 0, 0.10);
  color: var(--orange-vif, #e65100);
  font-size: 40px;
  line-height: 1;
}
.success-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #1c1917;
}
.success-card-lead {
  margin: 0 0 20px;
  font-size: 14px;
  color: #78716c;
}
.success-ref {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 auto 22px;
  padding: 12px 26px;
  background: var(--bg-clair, #faf6f2);
  border: 1px dashed rgba(230, 81, 0, 0.4);
  border-radius: 12px;
}
.success-ref-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a29e;
}
.success-ref-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--orange-vif, #e65100);
  font-variant-numeric: tabular-nums;
}
.success-ref-amount {
  margin-top: 2px;
  font-size: 13px;
  color: #57534e;
}
.success-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 360px;
  text-align: left;
  display: grid;
  gap: 11px;
}
.success-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #44403c;
}
.success-steps li i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 18px;
  color: var(--orange-vif, #e65100);
}

@media (max-width: 520px) {
  .form-row--actions {
    flex-direction: column;
  }
  .form-row--actions .cta-btn--ghost {
    width: 100%;
    justify-content: center;
  }
}

/* --- MISSING FIELDS MESSAGE --- */
.missing-fields-msg {
  margin-top: 16px;
  padding: 16px 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.6;
  animation: shake 0.4s ease;
}

.missing-fields-msg strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #7f1d1d;
}

.missing-fields-msg ul {
  margin: 0;
  padding-left: 18px;
}

.missing-fields-msg li {
  margin-bottom: 4px;
  list-style: disc;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* --- TOAST NOTIFICATION --- */
.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  font-size: 14px;
  color: var(--texte);
  z-index: 9000;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.toast i {
  font-size: 22px;
  color: #16A34A;
  flex-shrink: 0;
}

.toast--error i {
  color: #DC2626;
}

@media (max-width: 520px) {
  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}

/* --- RGPD BAS DE PAGE --- */
.rgpd-footer-notice {
  background: #f4f4f5;
  border-top: 1px solid #e4e4e7;
  padding: 20px 0;
}

.rgpd-footer-notice__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  font-size: 11px;
  line-height: 1.7;
  color: #71717a;
}

.rgpd-footer-notice__inner strong {
  color: #3f3f46;
}

.rgpd-footer-notice__inner a {
  color: #3f3f46;
  text-decoration: underline;
}

.rgpd-footer-notice__inner a:hover {
  color: var(--bleu-vif, #1976d2);
}

/* --- RESPONSIVE TWEAKS --- */
@media (max-width: 768px) {
  .inscription-main {
    padding: 100px 16px 60px;
  }
  .form-section--recap {
    padding: 20px;
  }
}

/* =============================================
   Bandeau d'information préinscription
   Affiché en tête de chaque fiche programme : rassure le visiteur sur
   le fait que l'envoi du formulaire n'est pas une inscription définitive,
   et que le club prendra contact pour finaliser le dossier.
   ============================================= */
.preinscription-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 32px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-left: 3px solid var(--orange-vif);
  border-radius: 8px;
  color: var(--texte);
}

.preinscription-notice i {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.4;
  color: var(--orange-vif);
}

.preinscription-notice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.preinscription-notice strong {
  font-weight: 600;
}

@media (max-width: 640px) {
  .preinscription-notice {
    padding: 12px 14px;
    margin-bottom: 24px;
  }
  .preinscription-notice p {
    font-size: 13px;
  }
}