/* -----------------------------------------------------------------------------
 * Mise en page des formulaires « flexible-form » du socle.
 *
 * Règles extraites de `addons.css`, qui n'est plus chargé : le site de référence
 * ne le charge pas, et sa règle globale `.main-wrapper > section{margin-top:80px}`
 * décalait tout le contenu sous la navbar (logo blanc invisible sur fond blanc).
 * Mais `addons.css` portait AUSSI la mise en page du formulaire — son retrait
 * réduisait `.flexible-form__title-wrapper` de 933 px à 327 px.
 *
 * Ce fichier ne contient que des sélecteurs préfixés `.flexible-form` ou
 * `.form-page` : AUCUNE règle globale, aucun effet hors formulaire.
 * Même principe que `article-details.css`.
 * -------------------------------------------------------------------------- */

/* --- Mise en page du conteneur -------------------------------------------
 * `style.css` ET `style.min.css` posent tous deux `display:flex` sur
 * `.flexible-form__container` (l. 7232 / 7242) : les `grid-template-areas`
 * qu'`addons.css` déclarait étaient donc **inertes**. Résultat, les trois
 * enfants — étapes (14 px), formulaire (495 px) et titre (328 px) — se
 * plaçaient côte à côte, et le bandeau de titre se retrouvait comprimé en
 * colonne de droite au lieu d'occuper toute la largeur au-dessus du formulaire.
 *
 * Défaut PRÉ-EXISTANT : vérifié en réinjectant `addons.css`, la largeur reste
 * 328 px. Il n'a pas été introduit par le retrait de ce fichier.
 *
 * Correctif : on reste en flex (ne pas contredire le thème) et on force le
 * titre sur sa propre ligne, en tête — mise en page du site de référence.
 * -------------------------------------------------------------------------- */
.flexible-form__container {
  flex-wrap: wrap;
}

.flexible-form__title-wrapper {
  flex: 1 0 100%;
  order: -1;
}

/* Étapes et formulaire partagent la rangée sous le titre : la colonne
   d'étapes garde sa largeur propre, le formulaire occupe le reste. */
.flexible-form__steps {
  flex: 0 0 auto;
}

.flexible-form__wrapper {
  flex: 1 1 0;
  min-width: 0;
}

.flexible-form__title-wrapper .container {
  max-width: unset !important;
}

@media (min-width: 768px) {
  .form-page .flexible-form__title-wrapper .container {
    max-width: clamp(
      var(--ev-grid-min-width, 20rem),
      var(--ev-grid-preferred-width, 80%),
      var(--ev-grid-max-width, 62rem)
    ) !important;
  }
}

/* --- Bandeau de titre ---------------------------------------------------- */
.form-page .flexible-form__title-wrapper {
  --bg-color: var(--ev-primary);
  min-height: 22vh;
  display: grid;
  align-items: center;
}

.form-page .flexible-form__title-wrapper > * {
  color: #fff !important;
}

/* `addons.css` forçait `text-align: start` ici — non repris : le site de
   référence centre le titre du formulaire. */

/* --- Champs et cases à cocher -------------------------------------------- */
.flexible-form .form-check-label {
  background-color: var(--ev-banner);
  place-content: center;
}

.flexible-form .form-check-input[type="radio"]:checked + .form-check-label *,
.flexible-form .form-check-input[type="checkbox"]:checked + .form-check-label * {
  color: #fff !important;
}

.flexible-form .form-check-description {
  font-weight: var(--ev-heading-font-weight);
}

.flexible-form .form-check-figure {
  height: 150px;
  width: auto;
  place-self: center;
}

.flexible-form .filepond--root .filepond--drop-label {
  background: var(--ev-banner);
}

.flexible-form__recaptcha-info .link-primary {
  --link-primary: #435e6d;
}

/* --- Récapitulatif ------------------------------------------------------- */
.flexible-form #recapCard {
  flex-grow: 0;
}