/**
 * @file
 * Les dix formulaires du site.
 *
 * Webform rend ses champs par le noyau de Drupal, SANS une seule classe
 * utilitaire : Tailwind ne peut rien pour eux, il ne met en forme que ce qu'il
 * lit dans les gabarits. Les formulaires sortaient donc bruts — libellés collés
 * aux champs, bordures du navigateur, boutons gris, fil de progression sans
 * couleur.
 *
 * Tout ce qui suit est borné à « .webform-submission-form ».
 */

/* LA COLONNE.
 *
 * Un formulaire ne se remplit pas sur 1 280 px : l'œil perd la ligne entre
 * l'étiquette et le champ, et un champ large invite à écrire une phrase là où
 * on attend un mot. 48 rem tient un libellé long sans étaler les champs. */
.webform-submission-form {
  max-width: 48rem;
  margin-inline: auto;
  padding: 2rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 2px 24px rgba(11, 37, 69, 0.07);
}

/* LA CARTE EST PORTEE PAR LE FORMULAIRE, et non par l'etape.
 *
 * Webform ne rend AUCUN conteneur autour des champs de l'etape courante : il
 * sort les champs a plat. Une regle sur « .webform-wizard-page » - qui semble
 * evidente a la lecture du module - ne s'applique donc jamais. Verifie sur le
 * HTML rendu, pas sur la documentation. */

/* ---------------------------------------------------------------------------
 * LE FIL DES ÉTAPES
 *
 * Webform le dessine en chevrons de largeur égale, avec une largeur déclarée
 * pour deux à dix étapes — et rien au-delà. C'est pour cela qu'il le masquait
 * sur le formulaire de partenariat, qui en compte onze : les chevrons se
 * seraient chevauchés.
 *
 * Deux défauts de cette forme, visibles dès sept étapes : les titres sont
 * tronqués à trois lettres (« Organisati… », « Enjeu à trai… »), et le fil
 * disparaît là où il sert le plus.
 *
 * Il est donc refait : des PASTILLES qui passent à la ligne. Onze titres
 * tiennent sur deux lignes et se lisent ; quatre tiennent sur une. La même
 * règle vaut pour les dix formulaires, quel que soit leur nombre d'étapes.
 * ------------------------------------------------------------------------- */
.webform-submission-form .webform-progress {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(197, 198, 206, 0.6);
}

.webform-submission-form .webform-progress-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  counter-reset: etape;
  overflow: visible;
  font-size: inherit;
}

/* Les largeurs de Webform sont déclarées par « [data-steps="N"] li » : il faut
 * les neutraliser pour toutes les valeurs à la fois, d'où le sélecteur sur
 * l'attribut seul, de même spécificité mais placé après. */
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border-radius: 999px;
  background-color: #eff4ff;
  line-height: 1.3;
}

/* Les chevrons sont dessinés par des bordures en ::before et ::after sur le
 * titre. Ils n'ont plus lieu d'être. */
.webform-submission-form .webform-progress-bar__page > b::before,
.webform-submission-form .webform-progress-bar__page > b::after,
.webform-submission-form .webform-progress-bar__page > span {
  display: none;
}

/* Le numéro. Le gabarit de Webform ne le rend pas : il est posé par un
 * compteur CSS, ce que permet le <ol> qu'il emploie déjà. */
.webform-submission-form .webform-progress-bar__page::before {
  counter-increment: etape;
  content: counter(etape);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background-color: #dce9ff;
  color: #44474d;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* Le titre de l'étape.
 *
 * Borné à 10 rem et à DEUX lignes : « Résultats attendus et valeur du
 * partenariat » fait quarante-trois caractères, et onze titres de cette
 * longueur étalés sur toute la largeur donneraient plus de fil que de
 * formulaire.
 *
 * « -webkit-line-clamp » ne rapporte pas sa hauteur au parent — la leçon des
 * méga-menus — d'où la hauteur maximale explicite, sans laquelle les pastilles
 * se chevaucheraient d'une ligne à l'autre. */
.webform-submission-form .webform-progress-bar__page > b {
  display: -webkit-box;
  overflow: hidden;
  max-width: 10rem;
  max-height: 2.6em;
  padding: 0;
  background: none;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #44474d;
}

/* LES TROIS ÉTATS.
 *
 * Ces sélecteurs répètent « .webform-progress-bar[data-steps] li » : c'est
 * nécessaire, et c'est le défaut qui rendait l'étape courante illisible.
 *
 * La règle qui neutralise les largeurs de Webform, plus haut, porte cinq
 * composants (classe + classe + attribut + élément + classe). Une règle d'état
 * écrite simplement — « .webform-submission-form .…__page--current » — n'en
 * porte que deux : elle perdait donc sur « background-color », la pastille
 * restait bleu très clair, et le libellé passait en blanc par-dessus. Texte
 * blanc sur fond presque blanc : invisible.
 *
 * La spécificité ne se devine pas à la lecture ; elle se compte. */
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page--done {
  background-color: #dce9ff;
}
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page--done::before {
  background-color: #0c1b33;
  color: #ffffff;
}
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page--done > b {
  color: #0b1c30;
}
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page--done > b[role="link"] {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* L'ÉTAPE COURANTE. Elle doit se voir d'un coup d'œil parmi onze : fond bleu
 * plein, texte blanc, et un liseré qui la détache des pastilles voisines. */
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page--current {
  background-color: #2258c3;
  box-shadow: 0 0 0 2px rgba(34, 88, 195, 0.25);
}
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page--current::before {
  background-color: #ffffff;
  color: #2258c3;
}
.webform-submission-form .webform-progress-bar[data-steps] li.webform-progress-bar__page--current > b {
  color: #ffffff;
  font-weight: 700;
}

/* Le compteur « 3 sur 11 ». Il double le fil sur les formulaires longs, et le
 * remplace dans les navigateurs qui ne rendraient pas les pastilles. */
.webform-submission-form .webform-progress__status {
  margin-top: 0.875rem;
  text-align: left;
}
.webform-submission-form .webform-progress__summary {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #44474d;
}

/* ---------------------------------------------------------------------------
 * LES TEXTES QUE LE CLIENT A ÉCRITS
 * ------------------------------------------------------------------------- */
.webform-submission-form .iircf-formulaire-accroche {
  margin-bottom: 1rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 19px;
  line-height: 28px;
  color: #0b1c30;
}
.webform-submission-form .iircf-formulaire-accroche strong {
  font-weight: 600;
}

/* L'intention d'une étape : un filet ambre, l'un des emplois isolés que la
 * charte réserve à l'accent. Il distingue ce que l'Institut explique de ce
 * qu'il demande. */
.webform-submission-form .iircf-formulaire-intention {
  margin-bottom: 1.5rem;
  padding-left: 0.875rem;
  border-left: 2px solid #d28811;
  font-size: 15px;
  line-height: 23px;
  color: #44474d;
}
.webform-submission-form .iircf-formulaire-traitement {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: #eff4ff;
  font-size: 14px;
  line-height: 22px;
  color: #44474d;
}

/* ---------------------------------------------------------------------------
 * LES CHAMPS
 * ------------------------------------------------------------------------- */
.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
  margin-top: 1.5rem;
}
.webform-submission-form label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #0b1c30;
}

/* L'astérisque de l'obligatoire en ambre : c'est la seule marque qui doit se
 * voir au premier coup d'œil dans un formulaire de quarante champs. */
.webform-submission-form .form-required::after {
  content: " *";
  color: #d28811;
  font-weight: 700;
}

.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="url"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="date"],
.webform-submission-form select,
.webform-submission-form textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid #c5c6ce;
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  color: #0b1c30;
}
.webform-submission-form textarea {
  min-height: 7rem;
  line-height: 24px;
}
.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  outline: 2px solid #d28811;
  outline-offset: 1px;
  border-color: #2258c3;
}
.webform-submission-form .description,
.webform-submission-form .form-item__description {
  margin-top: 0.375rem;
  font-size: 13px;
  line-height: 19px;
  color: #44474d;
}

/* ---------------------------------------------------------------------------
 * LES CHOIX
 *
 * Une case et son libellé sur la MÊME ligne. La règle « label { display: block } »
 * ci-dessus les empilerait, et une liste de huit choix deviendrait seize lignes
 * sans rapport apparent entre elles.
 * ------------------------------------------------------------------------- */
.webform-submission-form .form-type-radio,
.webform-submission-form .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: background-color 0.12s;
}
.webform-submission-form .form-type-radio:hover,
.webform-submission-form .form-type-checkbox:hover {
  background: #eff4ff;
}
.webform-submission-form .form-type-radio input,
.webform-submission-form .form-type-checkbox input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: #2258c3;
}
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: #0b1c30;
}

/* L'intitulé d'un groupe de choix se lit comme une étiquette de champ, pas
 * comme un titre de section : il annonce une question, au même rang que les
 * champs qui l'entourent. */
.webform-submission-form fieldset {
  margin-top: 1.75rem;
  padding: 0;
  border: 0;
}
.webform-submission-form fieldset > legend {
  display: block;
  float: none;
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0b1c30;
}

/* ---------------------------------------------------------------------------
 * LE DÉPÔT DE FICHIER, LE CAPTCHA
 * ------------------------------------------------------------------------- */
.webform-submission-form .js-form-managed-file,
.webform-submission-form .form-managed-file {
  padding: 1rem;
  border: 1px dashed #c5c6ce;
  border-radius: 0.5rem;
  background: #f8f9ff;
}
.webform-submission-form .captcha {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: #eff4ff;
}
.webform-submission-form .captcha input[type="text"] {
  max-width: 10rem;
}

/* ---------------------------------------------------------------------------
 * LES BOUTONS
 * ------------------------------------------------------------------------- */
.webform-submission-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.webform-submission-form .form-actions input[type="submit"],
.webform-submission-form .form-actions button {
  border: 0;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0b1c30;
  background: #e5eeff;
  cursor: pointer;
  transition: background-color 0.15s;
}
.webform-submission-form .form-actions input[type="submit"]:hover,
.webform-submission-form .form-actions button:hover {
  background: #dce9ff;
}

/* UN SEUL BOUTON PLEIN : celui qui fait avancer.
 *
 * « Étape suivante » et « Envoyer ». Les autres — revenir en arrière,
 * enregistrer un brouillon — sont des sorties de secours, pas la marche à
 * suivre. Trois boutons de même poids laissent le visiteur choisir au hasard. */
.webform-submission-form .form-actions .webform-button--next,
.webform-submission-form .form-actions .webform-button--submit,
.webform-submission-form .form-actions .button--primary {
  background: #2258c3;
  color: #ffffff;
}
.webform-submission-form .form-actions .webform-button--next:hover,
.webform-submission-form .form-actions .webform-button--submit:hover,
.webform-submission-form .form-actions .button--primary:hover {
  background: #0c1b33;
}

/* ---------------------------------------------------------------------------
 * LES ERREURS
 * ------------------------------------------------------------------------- */
.webform-submission-form input.error,
.webform-submission-form select.error,
.webform-submission-form textarea.error {
  border-color: #ba1a1a;
  border-width: 2px;
}