/**
 * Formulus : le formulaire public.
 *
 * TOUT EST EN :where(), donc de specificite nulle : le template gagne
 * toujours. Corpus dessine lui-meme .section--alt et .section--tint ; ces
 * regles ne sont qu'un repli pour un template qui ne les connait pas
 * (Cassiopeia). Couleurs : les jetons de Bootstrap, jamais une valeur.
 */
:where(.formulus) :where(.formulus-rangee-fond) {
  padding-block: 1rem;
  margin-block-end: 1rem;
  border-radius: var(--bs-border-radius);
}

:where(.formulus) :where(.section--tint) {
  background-color: var(--bs-tertiary-bg);
}

:where(.formulus) :where(.section--alt) {
  background-color: var(--bs-secondary-bg);
}

/* Les marges de bord : une colonne ne pousse pas le fond de sa rangee. */
:where(.formulus-colonne) > :where(:last-child) {
  margin-block-end: 0;
}

/* LE GROUPE D'UNE RANGEE TITREE. Le fieldset perd son cadre de navigateur, la
   legende prend la taille d'un intertitre. PAS DE FILET entre deux groupes
   (retire en 1.0.213 a la demande de Cyrille) : le titre et l'espace
   suffisent a separer, un trait reste possible dans le template.

   ICI UNE CLASSE, PAS :where(). Mesure le 29 septembre : `fieldset` et
   `legend` ont deja leurs regles dans le reboot de Bootstrap (une balise,
   specificite 0,0,1), qui battaient nos :where() a 0 : aucune marge. Une
   classe (0,1,0) suffit, et le template garde la main avec la sienne. */
.formulus-groupe {
  min-inline-size: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

/* La legende reste FLOTTANTE, comme le reboot la pose : une legende non
   flottante se dessine DANS le bord du fieldset. Sans bord ni retrait non
   plus : certains templates en donnent un aux legendes de leurs formulaires. */
.formulus-groupe-titre {
  float: left;
  inline-size: 100%;
  padding: 0;
  border: 0;
  margin-block-end: .75rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

/* LES ZONES D'ALERTE HORS CORPUS : pictogramme a gauche, intitule ecrit
   en tete, puis le message. Avec Corpus, c'est Corpus qui dessine (motif
   .message) : aucune de ces regles ne s'applique. */
:where(.formulus-alerte.alert) {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

:where(.formulus-alerte__picto) {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: .1rem;
}

:where(.formulus-alerte__corps) {
  flex: 1 1 auto;
  min-inline-size: 0;
}

:where(.formulus-alerte__titre) {
  margin-block-end: .25rem;
  font-weight: 700;
}

:where(.formulus-alerte__corps) > :where(:last-child) {
  margin-block-end: 0;
}

/* Le message d'un champ : le meme pictogramme, a la taille du texte. */
:where(.formulus-erreur__picto) {
  inline-size: 1em;
  block-size: 1em;
  margin-inline-end: .3em;
  vertical-align: -.125em;
}

/* LES BORDURES DES CHAMPS SE VOIENT, comme celle des listes. Mesure le 29
   septembre sous Corpus : liste et case a cocher en --bord-fort (#7f8578),
   mais saisie et zone de texte en --bord (#dde0d8), a peine visibles (RGAA
   3.3 : 3:1 pour le contour d'un champ). On prend le trait fort du template
   quand il le declare (Corpus), sinon la couleur du texte, eclaircie juste
   assez pour rester au-dessus de 3:1. Une classe, pas :where() : il faut
   battre la regle .form-control de Bootstrap. */
.formulus-formulaire .form-control,
.formulus-formulaire .form-select,
.formulus-formulaire .form-check-input {
  border-color: var(--bord-fort, color-mix(in srgb, currentColor 55%, transparent));
}

/* LA CASE ET LE BOUTON RADIO PRENNENT LA COULEUR DU TEXTE (1.0.406). Un
   input n'herite pas de `color` : son `currentColor` restait noir. Releve le
   5 octobre 2026 chez un client (Cassiopeia Extended, fond noir) : case au
   fond noir, bordure noire, invisible sur telephone et tablette. Avec la
   couleur du texte, la bordure suit le template, clair ou sombre. Trait de
   2 px : la case reste reperable sur tous les fonds. */
.formulus-formulaire .form-check-input {
  color: inherit;
  border-width: 2px;
}

.formulus-formulaire .form-control:focus,
.formulus-formulaire .form-select:focus {
  border-color: var(--bs-primary, currentColor);
}

/* L'ANNONCE (confirmation, resume des erreurs) recoit le focus par script
   pour etre lue aussitot ; elle n'est pas une commande, elle n'a pas a
   porter le contour de focus (remarque de Cyrille, 29 septembre : le cadre
   bleu autour de « Message envoye »). */
[data-formulus-annonce]:focus,
[data-formulus-annonce]:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* LE TITRE DE RANGEE A UN NIVEAU CHOISI (H2 a H6, 1.0.231) : le titre est
   dans la legende, qui reste le libelle du groupe. Sa taille vient du
   template ; seules ses marges sont retirees, la legende porte deja les
   siennes. */
.formulus-groupe-niveau {
  margin: 0;
}

/* La description sous le titre d'une rangee : la legende flotte, la
   description repart dessous. */
.formulus-groupe-description {
  clear: both;
  margin-block: 0 .75rem;
}

/* ============================================================================
   LES CIBLES DE 44 PX (1.0.237)

   Une zone qu'on touche du doigt doit faire au moins 44 px de haut (WCAG 2.5.5,
   critere que la specification de Formulus s'est donne). Mesure sur le banc le
   30 septembre 2026 : sous Corpus, les saisies et le bouton faisaient 38 px, et
   une case a cocher 18 px pour un libelle de 26 px. Cassiopeia est deja a 45.

   UNE HAUTEUR MINIMALE, PAS UNE HAUTEUR : un template qui fait plus grand garde
   sa mesure. Les couleurs, bordures et rayons restent ceux du template.

   LA CASE ET LE BOUTON RADIO : la case passe a 24 px (1,5 rem), et c'est la
   LIGNE entiere, case et libelle, qui prend 44 px : cliquer le libelle coche
   la case, c'est donc lui la vraie cible. La case reste a sa place, centree
   sur la premiere ligne du libelle.
   ========================================================================== */
.formulus .formulus-formulaire :is(input.form-control, select.form-select, select.form-control),
.formulus .formulus-formulaire .formulus-envoyer {
  min-height: 2.75rem;
}

.formulus .formulus-formulaire .form-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-height: 2.75rem;
  padding-inline-start: 0;
  margin-block-end: 0;
}

.formulus .formulus-formulaire .form-check .form-check-input {
  flex: none;
  float: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: .625rem 0 0;
}

.formulus .formulus-formulaire .form-check .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: .65rem;
  line-height: 1.5;
  cursor: pointer;
}