/* ============================================================
   DAHLIA — BRICKS FORM STYLE KIT · MODULE LAYOUT
   Switch : [data-bf-layout="grid"]

   Remplace le flex-wrap sans gouttière de Bricks par une grille de
   12 colonnes. Rappel de ce qu'on écrase (frontend.min.css, tout en
   :where(), donc spécificité 0) :

     :where(.brxe-form)             { display:flex; flex-wrap:wrap }
     :where(.brxe-form) .form-group { display:flex; flex-direction:column;
                                      padding:0 0 20px; width:100% }
     :where(.brxe-form) .submit-button-wrapper { width:auto }
   ============================================================ */


/* ===========================================================
   1. La grille
   =========================================================== */
.bf-dahlia[data-bf-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(var(--bf-cols), minmax(0, 1fr));
  column-gap: var(--bf-col-gap);
  row-gap: var(--bf-row-gap);

  /* Un champ court à côté d'un textarea ne doit pas s'étirer sur toute
     la hauteur de la ligne. */
  align-items: start;
}


/* ===========================================================
   2. Les champs
   =========================================================== */
.bf-dahlia[data-bf-layout="grid"] > .form-group {
  grid-column: span var(--bf-span);

  /* Sans ça, un champ dont le contenu déborde (un long placeholder,
     une pièce jointe) élargit sa colonne au lieu de se contenter de sa
     part : minmax(0,1fr) ne suffit pas côté item. */
  min-width: 0;

  /* La gouttière verticale remplace le padding-bottom de 20px.
     Spécificité (0,3,0) : bat le défaut de Bricks (0,1,0), perd contre
     un réglage explicite « Content → Fields → Spacing » (1,2,0) —
     c'est voulu, le panneau garde le dernier mot. */
  padding-bottom: 0;
}


/* ⚠ NEUTRALISATION DU « WIDTH (%) » NATIF.
   Le contrôle natif écrit « #brxe-ID .form-group:nth-child(N){width:48%} » :
   spécificité d'ID, aucune feuille ne peut passer devant. Dans une grille,
   cette largeur s'appliquerait À L'INTÉRIEUR de la cellule — un champ 1/2
   réglé jadis à 48 % ferait 48 % de la moitié. !important est ici le seul
   levier, et il est sans perte : en mode grille la largeur, c'est la
   cellule, et le réglage se fait par « Column width (Dahlia) ».

   Le honeypot n'est pas concerné : Bricks le sort du flux en
   position:absolute !important, il n'est donc pas un item de la grille. */
.bf-dahlia[data-bf-layout="grid"] > .form-group:not(.submit-button-wrapper) {
  width: 100% !important;
}


/* ===========================================================
   3. Cas particuliers du markup Bricks
   =========================================================== */

/* Bouton d'envoi : largeur au contenu par défaut, aligné à gauche.
   « Align » (justify-self) écrit par le panneau en (1,1,0) passe devant. */
.bf-dahlia[data-bf-layout="grid"] > .submit-button-wrapper {
  width: auto !important;
  justify-self: start;
}

/* Messages, captcha, erreur reCAPTCHA : toujours toute la ligne.
   (0,4,0) — au-dessus de la règle de span ci-dessus. */
.bf-dahlia[data-bf-layout="grid"] > :is(.message, .captcha, .recaptcha-error, .form-group.message, .form-group.captcha, .form-group.recaptcha-error) {
  grid-column: 1 / -1;
}

/* Un champ « Hidden » rend quand même son .form-group : en flex il ne
   coûtait qu'un padding, en grille il occuperait une cellule vide.
   Les deux :not() sont la garantie qu'on ne masque pas un champ visible
   qui trimballerait un input caché (le champ Files, par exemple) : un
   champ hidden est le seul à ne rendre NI <label> NI .label. */
.bf-dahlia[data-bf-layout="grid"] > .form-group:has(> input[type="hidden"]):not(:has(label)):not(:has(.label)) {
  display: none;
}