/* ============================================================
   PRÉ-INSCRIPTION cours collectifs — annesoeapas.fr
   Extras au-dessus de contact.css : <select>, fieldset checkboxes, bloc RGPD.
   a11y : cibles ≥ 44px, contraste (tokens), focus global (base.css).
   ============================================================ */

.preinscription-why {
  max-width: 40rem;
  color: var(--text);
}

/* Disposition globale en grille de zones (grid-template-areas) : permet de placer le planning
   EN HAUT sur mobile (avant l'intro) MAIS en colonne DROITE en desktop, sans dupliquer l'image.
   Mobile : 1 colonne, ordre crumb→title→planning→intro→form→rgpd.
   Desktop (≥60em) : retour à l'original — titre/intro pleine largeur, puis form | planning (Sébastien 2026-06-07). */
.preinscription-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  grid-template-areas:
    "crumb"
    "title"
    "planning"
    "intro"
    "form"
    "rgpd";
}
@media (min-width: 60em) {
  .preinscription-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    column-gap: var(--space-5);
    grid-template-areas:
      "crumb    crumb"
      "title    title"
      "intro    intro"
      "form     planning"
      "rgpd     rgpd";
  }
}
.preinscription-layout > .breadcrumb { grid-area: crumb; }
.preinscription-layout > h1 { grid-area: title; }
.preinscription-intro { grid-area: intro; }
.preinscription-form { grid-area: form; }
.preinscription-rgpd { grid-area: rgpd; }
.preinscription-planning {
  grid-area: planning;
  margin: 0;
}
.preinscription-planning img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.preinscription-planning figcaption {
  margin-top: var(--space-2);
  font-size: 0.9rem;
}

/* Planning cliquable → agrandissement. Le bouton = la miniature, pleine largeur. */
.planning-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  border-radius: var(--radius);
  cursor: zoom-in;
}
.planning-zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.planning-zoom__hint {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  background: rgb(26 26 26 / 0.78);
  color: var(--color-blanc-casse);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px var(--space-2);
  border-radius: 999px;
  pointer-events: none; /* le clic passe au bouton */
}

/* Lightbox planning — <dialog> natif (focus-trap + Escape gratuits). */
.planning-dialog {
  max-width: 96vw;
  max-height: 94vh;
  margin: auto;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  overflow: auto;
}
.planning-dialog::backdrop { background: rgb(26 26 26 / 0.72); }
.planning-dialog__bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-1); }
.planning-dialog__close {
  min-width: var(--target-comfort);
  min-height: var(--target-comfort);
  border: 0;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.planning-dialog img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  max-height: 84vh;   /* planning haut → tient dans l'écran, lisible */
  width: auto;
  height: auto;
  border-radius: calc(var(--radius) - 2px);
}

/* <select> aligné sur les inputs de contact.css */
.form-row select {
  width: 100%;
  min-height: var(--target-comfort); /* 44px confort mobile */
  padding: var(--space-2);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--accent); /* bordure UI ≥ 3:1 */
  border-radius: var(--radius);
}

/* Groupe « cours souhaités » (multi-checkbox) */
.form-fieldset {
  max-width: 40rem;
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
}
.form-fieldset legend {
  font-weight: 600;
  padding-inline: var(--space-1);
}
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
/* Case + zone de label confortables au tap (≥ 24px case, ligne ≥ 44px) */
.form-check input {
  min-width: var(--target-min);
  min-height: var(--target-min);
}
.form-check label {
  min-height: var(--target-comfort);
  display: inline-flex;
  align-items: center;
  font-weight: 400;
}

/* Message d'erreur (validation « au moins 1 cours ») — brun fort, jamais rouge pâle */
.form-error {
  display: block;
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--heading);
}
.form-error[hidden] { display: none; }

/* Bloc RGPD — discret mais lisible (contraste plein, pas de gris pâle) */
.preinscription-rgpd {
  max-width: 40rem;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-menthe);
  border-radius: var(--radius);
}
.preinscription-rgpd h2 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}
.preinscription-rgpd ul {
  margin: 0;
  padding-left: var(--space-4);
}
.preinscription-rgpd li { margin-bottom: var(--space-1); }