/* ══════════════════════════════════════════════════════════════
   IF3 — Formulaire d'inscription
   Complète le design-system.css sans le modifier.
   ══════════════════════════════════════════════════════════════ */

/* ── Grille de la page inscription — INDÉPENDANTE de .contact-grid ──
   Avant : cette page réutilisait .contact-grid (défini dans contact.css),
   ce qui la rendait vulnérable à tout changement fait pour la page
   Contact (c'est exactement ce qui a cassé l'inscription aujourd'hui).
   Maintenant : sa propre classe, ses propres règles, ici et nulle part
   ailleurs. Un futur changement sur Contact ne pourra plus jamais
   affecter cette page, et inversement. */
.reg-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s24);
  align-items: start;
}
@media (max-width: 768px) {
  .reg-grid {
    grid-template-columns: 1fr;
    gap: var(--s10);
  }
}

/* ── Grille 2 colonnes pour les champs du formulaire ────────── */
#registration-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s6);
  margin-bottom: var(--s6);
}

/* Champs pleine largeur (textarea, checkboxes) */
#registration-fields .form-group--full,
#registration-fields .form-group--checkbox
{
  grid-column: 1 / -1;
  padding-top: var(--s8);
}

/* Un peu d'air entre deux cases à cocher empilées l'une sous l'autre */
#registration-fields .form-group--checkbox + .form-group--checkbox {
  padding-top: 0;
}

/* ── Séparateur 1 : entre les cases à cocher et "Questions ou précisions" ── */
#registration-fields .form-group--full + .form-group--checkbox {
  margin-top: var(--s6);
  padding-top: var(--s8);
  border-top: 1.5px solid var(--border);
}

@media (max-width: 600px) {
  #registration-fields {
    grid-template-columns: 1fr;
  }
  #registration-fields .form-group--full,
  #registration-fields .form-group--checkbox {
    grid-column: 1;
  }
}

/* ── Séparateur visuel entre les selects de formation/séance ── */
.reg-selects-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s4) var(--s6);
  margin-bottom: var(--s8);
  padding-bottom: var(--s8);
  border-bottom: 1.5px solid var(--border);
}
/* Teinte légère pour montrer que ces deux champs sont déjà pré-remplis */
.reg-selects-block .form-select {
  background-color: var(--accent-subtle);
}

@media (max-width: 600px) {
  .reg-selects-block {
    grid-template-columns: 1fr;
  }
}

/* ── Wrapper select avec chevron ─────────────────────────────── */
.form-select-wrapper {
  position: relative;
}

.form-select-wrapper::after {
  content: '';
  position: absolute;
  right: 1.1em;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: var(--text-primary);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

.form-select-wrapper .form-select {
  padding-right: 2.5em;
}

/* ── Champs désactivés (aucune séance) ───────────────────────── */
.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Champ requis — astérisque ───────────────────────────────── */
.form-required {
  color: var(--red);
  margin-left: 2px;
}

/* ── Checkbox custom ─────────────────────────────────────────── */
.form-checkbox-label {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  cursor: pointer;
}

.form-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--violet);
  cursor: pointer;
}

.form-checkbox-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-base);
}

/* ── Résumé séance — badges ──────────────────────────────────── */
.reg-formation-title {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, var(--text-2xl));
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
  
}

.reg-session-meta {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-top: var(--s4);
}

.reg-date,
.reg-time {
  display: block;
}

.reg-mode-badge {
  display: inline-block;
  margin-top: var(--s1);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reg-mode-badge--online {
  background: var(--accent-subtle);
  color: var(--violet);
}

.reg-mode-badge--onsite {
  background: rgba(0, 196, 106, 0.12);
  color: #007a42;
}

[data-theme="dark"] .reg-mode-badge--onsite {
  color: var(--green);
}

.reg-location {
  
  color: var(--text-muted);
}

.reg-formation-link {
  color: var(--violet);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: color var(--t-fast);
}

.reg-formation-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ── Message aucune séance ───────────────────────────────────── */
.reg-no-session {
  padding: var(--s3) var(--s4);
  background: rgba(245, 227, 45, 0.15);
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--lh-base);
}

/* ── Titre section formulaire ────────────────────────────────── */
.contact-form__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, var(--text-3xl));
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: var(--s6);
}

/* ── Bouton submit ───────────────────────────────────────────── */
.contact-form__submit {
  width: 100%;
  margin-top: var(--s2);
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Message d'erreur ────────────────────────────────────────── */
[data-form-error]:not(:empty) {
  display: block;
  padding: var(--s3) var(--s4);
  background: var(--red-subtle);
  border: 1px solid var(--red);
  border-radius: var(--r-md);
  color: var(--red);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--s4);
}

/* ── Message de succès ───────────────────────────────────────── */
.reg-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s12) var(--s8);
  gap: var(--s4);
}

.reg-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}

.reg-success__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
}

.reg-success__msg {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 400px;
  line-height: var(--lh-base);
}

/* ── Mention légale ──────────────────────────────────────────── */
/* Séparateur 2 (plus aéré que le séparateur 1) : avant la mention
   RGPD et le bouton d'envoi, tout en bas du formulaire. */
.contact-form__legal {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--s10);
  margin-bottom: var(--s4);
  padding-top: var(--s8);
  border-top: 1.5px solid var(--border);
}