/* ═══════════════════════════════════════════════════════════════════════════
   LES FORMULAIRES DU SITE (5 octobre 2026)
   Va avec js/formulaires.js ; le balisage est décrit en tête du script.

   La DA de l'accueil : carte de verre, champs arrondis de 48 px, libellés
   au-dessus, focus rose, choix courts en pastilles, bouton plein, merci avec
   la Seli qui fait coucou. Au téléphone, chaque cible fait 44 px au moins
   et les champs sont en 16 px (sinon iOS zoome à la saisie).

   Les couleurs viennent de css/v4.css quand la page la charge ; chaque
   variable a sa valeur de secours pour que la feuille tienne seule.
   ═══════════════════════════════════════════════════════════════════════════ */

.fs, .fs-merci {
  --fs-encre:   var(--ink, #241B22);
  --fs-encre-2: var(--ink-2, #5C4A57);
  --fs-encre-3: var(--ink-3, #8E7D88);
  --fs-rose:    var(--accent, var(--rose));
  --fs-rose-fort: var(--accent-ink, var(--rose-encre));
  --fs-rose-voile: var(--accent-tint, #FDF0F6);
  --fs-faux:    var(--rouge);
  --fs-trait:   rgba(36, 27, 34, .13);
  --fs-champ-fond: rgba(255, 255, 255, .84);
  --fs-ease:    var(--ease, cubic-bezier(.22, .68, .24, 1));

  position: relative;
  box-sizing: border-box;
  /* `container-type` ôte à la carte sa largeur propre : elle prend donc
     toute la place qu'on lui donne (une colonne de grille, un bloc). */
  container-type: inline-size;
  width: 100%;
  display: flex; flex-direction: column; gap: 18px;
  padding: 30px;
  border-radius: 28px;
  background: var(--glass, rgba(251, 252, 254, .8));
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-bord, rgba(255, 255, 255, .72));
  box-shadow: var(--glass-ombre, 0 18px 44px -22px rgba(60, 80, 120, .34), inset 0 1px 0 rgba(255, 255, 255, .85));
  color: var(--fs-encre);
  text-align: left;
}
@supports not (backdrop-filter: blur(1px)) {
  .fs, .fs-merci { background: rgba(252, 253, 255, .96); }
}
@media (max-width: 480px) {
  .fs, .fs-merci { padding: 22px 18px; border-radius: 24px; }
}
/* Déjà dans une carte : pas de seconde carte. */
.fs.fs-nu, .fs-merci.fs-nu {
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.fs[hidden], .fs-merci[hidden] { display: none; }

/* ── En-tête facultatif de la carte ── */
.fs-titre { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.fs-intro { margin-top: -10px; font-size: 15px; line-height: 1.55; color: var(--fs-encre-2); max-width: 56ch; }

/* ── La grille : une colonne au téléphone, deux dès que la carte est large ── */
.fs-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 560px) {
  .fs-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .fs-grille > .fs-large { grid-column: 1 / -1; }
}

/* ── Un champ : le libellé au-dessus ── */
.fs-champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fs-champ > label, .fs-champ > legend, .fs-libelle {
  padding: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fs-encre);
}
.fs-champ > label em, .fs-champ > legend em, .fs-libelle em {
  font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--fs-encre-3); margin-left: 6px;
}
.fs-aide { font-size: 13px; line-height: 1.45; color: var(--fs-encre-3); }

.fs input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.fs select,
.fs textarea {
  display: block; width: 100%; min-height: 48px; margin: 0;
  padding: 0 16px;
  border: 1px solid var(--fs-trait); border-radius: 16px;
  background: var(--fs-champ-fond);
  font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--fs-encre);
  -webkit-appearance: none; appearance: none;
  transition: border-color 180ms var(--fs-ease), box-shadow 180ms var(--fs-ease), background 180ms var(--fs-ease);
}
.fs textarea { min-height: 132px; padding: 13px 16px; line-height: 1.55; resize: vertical; }
.fs select {
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E7D88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 15px 15px;
}
.fs ::placeholder { color: var(--fs-encre-3); opacity: 1; }
.fs input:not([type="radio"]):not([type="checkbox"]):hover,
.fs select:hover, .fs textarea:hover { border-color: rgba(36, 27, 34, .22); }
.fs input:not([type="radio"]):not([type="checkbox"]):focus,
.fs select:focus, .fs textarea:focus {
  outline: none; background: #fff;
  border-color: var(--fs-rose);
  box-shadow: 0 0 0 4px rgba(232, 68, 127, .16);
}
/* Plus spécifique que la règle de base des champs, sinon le rouge se perd. */
.fs input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"])[aria-invalid="true"],
.fs select[aria-invalid="true"],
.fs textarea[aria-invalid="true"] {
  border-color: var(--fs-faux);
  box-shadow: 0 0 0 4px rgba(194, 51, 74, .10);
}
.fs-erreur { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--fs-faux); }

/* ── Le compteur, sous le message ── */
.fs-compteur {
  align-self: flex-end; margin-top: -2px;
  font-size: 12px; color: var(--fs-encre-3); font-variant-numeric: tabular-nums;
}
.fs-compteur-presque { color: var(--fs-rose-fort); font-weight: 600; }

/* ── Les pastilles : des radios ou des cases, en ronds cliquables ──
   Le vrai bouton reste là, transparent, posé sur la pastille : le clavier,
   le lecteur d'écran et le formulaire le voient comme n'importe quel choix. */
.fs-pastilles { display: flex; flex-flow: row wrap; gap: 8px; }
.fs-pastilles > legend { float: left; width: 100%; margin-bottom: 1px; }
.fs-pastilles > legend + * { clear: left; }
.fs-pastilles > .fs-erreur, .fs-pastilles > .fs-aide { flex-basis: 100%; }
.fs-pastilles > label { position: relative; display: inline-flex; margin: 0; }
.fs-pastilles > label > input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.fs-pastilles > label > span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 17px;
  border-radius: 999px; border: 1px solid var(--fs-trait);
  background: var(--fs-champ-fond);
  font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--fs-encre-2);
  transition: background 180ms var(--fs-ease), border-color 180ms var(--fs-ease), color 180ms var(--fs-ease), transform 120ms var(--fs-ease);
  -webkit-user-select: none; user-select: none;
}
@media (hover: hover) {
  .fs-pastilles > label:hover > span { border-color: rgba(232, 68, 127, .45); color: var(--fs-encre); }
}
.fs-pastilles > label > input:active + span { transform: scale(.97); }
.fs-pastilles > label > input:checked + span {
  background: var(--fs-rose); border-color: var(--fs-rose); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(232, 68, 127, .7);
}
.fs-pastilles > label > input[type="checkbox"]:checked + span::before {
  content: ""; width: 12px; height: 7px; margin: -3px 1px 0 -2px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.fs-pastilles > label > input:focus-visible + span { box-shadow: 0 0 0 4px rgba(232, 68, 127, .24); }
.fs-pastilles[aria-invalid="true"] > label > span,
.fs-pastilles.fs-faux > label > span { border-color: rgba(194, 51, 74, .55); }

/* ── Le pied : l'état, le bouton, la mention ── */
.fs-etat { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fs-encre-2); }
.fs-etat:empty { margin-top: -18px; }
.fs-etat-erreur { color: var(--fs-faux); font-weight: 500; }
.fs-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fs-mention { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fs-encre-3); flex: 1 1 200px; }

.fs .fs-envoi {
  min-height: 52px; padding: 0 30px; font-size: 15.5px;
  align-self: flex-start;
}
@container (max-width: 559px) {
  .fs .fs-envoi { width: 100%; }
  .fs-pied { flex-direction: column; align-items: stretch; }
  .fs-mention { text-align: center; flex-basis: auto; }
}
.fs .fs-envoi[aria-busy="true"] { cursor: progress; opacity: .86; }
.fs .fs-envoi[aria-busy="true"]::after {
  content: ""; width: 15px; height: 15px; flex: none;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: fs-tourne 700ms linear infinite;
}
@keyframes fs-tourne { to { transform: rotate(360deg); } }

/* ── Le piège : invisible et hors d'atteinte pour un humain ── */
.fs-piege, .fs input.fs-piege {
  position: absolute !important; left: -10000px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* ── Le merci, à la place du formulaire ── */
.fs-merci {
  align-items: center; text-align: center; gap: 6px;
  padding: 34px 26px 36px;
  outline: none;
  animation: fs-entre 520ms var(--fs-ease) both;
}
.fs-merci-seli {
  width: 150px; height: auto; margin-bottom: 4px;
  transform-origin: 54% 92%;
  animation: fs-coucou 1700ms var(--fs-ease) 120ms both;
  filter: drop-shadow(0 14px 18px rgba(232, 68, 127, .18));
}
.fs-merci-titre { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.fs-merci-texte { margin: 2px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--fs-encre-2); max-width: 44ch; text-wrap: pretty; }

@keyframes fs-entre { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* Elle monte, puis salue : trois balancements qui s'amortissent. */
@keyframes fs-coucou {
  0%   { opacity: 0; transform: translateY(16px) scale(.86); }
  30%  { opacity: 1; transform: translateY(0) scale(1.02); }
  44%  { transform: rotate(-7deg); }
  58%  { transform: rotate(6deg); }
  72%  { transform: rotate(-3.5deg); }
  86%  { transform: rotate(1.5deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-merci, .fs-merci-seli { animation: none; }
  .fs .fs-envoi[aria-busy="true"]::after { animation-duration: 2s; }
  .fs input, .fs select, .fs textarea, .fs-pastilles > label > span { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE FORMULAIRE PARTENAIRE (js/partenaire.js), le même sur /partenaires,
   /bde et /ecoles depuis le 06/10. Les libellés gardent la classe « champ »
   que lit le script : on leur retire le dessin du champ de v4.
   Les profils et les rangées suivent la largeur du formulaire (requêtes de
   conteneur sur .fs), pas celle de l'écran : sur /bde et /ecoles il vit dans
   une colonne, sur /partenaires il a toute la largeur.
   ═══════════════════════════════════════════════════════════════════════════ */
.carte-form { max-width: 820px; margin: 24px auto 0; padding: clamp(22px, 4vw, 36px); border-radius: 28px; }
.form-duo > .carte-form { max-width: none; margin: 0; }
/* min-width : un fieldset prend la largeur de son contenu par défaut (débord à 320 px). */
.etapes-form fieldset { border: 0; display: block; min-width: 0; margin-bottom: 30px; }
.etapes-form legend { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.etapes-form legend i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; font-weight: 700; font-style: normal; color: #fff; background: var(--ink); }
.etapes-form label.champ { display: grid; gap: 7px; width: auto; min-height: 0; margin-bottom: 14px; padding: 0; flex: none;
  background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font-size: 14.5px; font-weight: 600; color: var(--ink); }
.etapes-form label.champ > span em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.etapes-form input.champ, .etapes-form select.champ, .etapes-form textarea.champ { background-color: #fff; border: 1px solid rgba(36,27,34,.16); }
.etapes-form textarea.champ { min-height: 120px; padding-top: 12px; line-height: 1.55; resize: vertical; font-family: inherit; }
.etapes-form .rangee { display: grid; gap: 0 14px; }
@container (min-width: 440px) { .etapes-form .rangee { grid-template-columns: 1fr 1fr; } }
.etapes-form .aide { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* Étroit : chaque profil est une ligne (icône, puis mot). Large : cinq tuiles. */
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.type { position: relative; min-width: 0; }
.type input { position: absolute; width: 0; height: 0; opacity: 0; }
.type span { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px 6px 8px; border-radius: 20px;
  text-align: left; font-size: 14.5px; font-weight: 700; cursor: pointer; background: #fff; border: 1.5px solid rgba(36,27,34,.08);
  box-shadow: 0 10px 22px -16px rgba(90,50,80,.5); transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.type span u { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; text-decoration: none; background: var(--accent-tint); }
@container (min-width: 480px) { .types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 680px) {
  .types { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .type span { flex-direction: column; justify-content: flex-start; min-height: 104px; padding: 16px 8px 14px; text-align: center; }
  .type span u { width: 44px; height: 44px; }
}
.type span svg { width: 22px; height: 22px; fill: none; stroke: #B79FAC; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.type input:checked + span { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(232,68,127,.13), 0 14px 28px -14px rgba(232,68,127,.55); }
.type input:checked + span u { background: linear-gradient(180deg, var(--rose-clair), var(--rose-fonce)); }
.type input:checked + span svg { stroke: #fff; }
.type input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .type input:hover + span { border-color: rgba(232,68,127,.3); } }

.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.envoi .btn { min-height: 52px; padding: 0 26px; font-size: 15.5px; }
.envoi p { max-width: 44ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.erreur { margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--rouge); }
.erreur:empty { display: none; }
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.off { display: none; }
#merci.on { display: block; }
#merci { padding: 20px 8px 8px; text-align: center; }
#merci img { width: 160px; height: auto; margin: 0 auto 4px; display: block; }
#merci h2 { margin: 0 auto; max-width: none; }
#merci p { margin: 10px auto 0; max-width: 46ch; font-size: 16.5px; color: var(--ink-2); }
@media (max-width: 759px) {
  .carte-form { margin-top: 18px; padding: 22px 16px; border-radius: 22px; }
  .etapes-form fieldset { margin-bottom: 24px; }
  .envoi .btn { width: 100%; }
}