/* ============================================================
   DAHLIA — BRICKS FORM STYLE KIT · TOKENS
   ------------------------------------------------------------
   Chargé dès qu'un module est actif. C'est le contrat commun :
   toute valeur des autres feuilles vient d'ici.

   Tout est posé en :where() — spécificité ZÉRO. Conséquences :
   - un réglage fait dans Bricks (#brxe-xxx, ou .brxe-xxx dans une
     boucle / un composant) gagne toujours, sans dépendre de l'ordre
     de chargement des feuilles ;
   - aucun token n'est jamais indéfini, même si le kit est utilisé
     hors de son design system d'origine.

   Les var(--x, fallback) se branchent sur le design system du site
   quand il existe (Advanced Themer, variables Bricks…), sinon la
   valeur de repli s'applique.

   ⚠ Les REPLIS SONT EN PIXELS, jamais en rem. Une valeur comme 1.4rem
   ne vaut 14px que sur un site en html{font-size:62.5%} ; ailleurs elle
   en fait 22. Le repli doit tenir sur n'importe quel site — quand le
   design system est là, c'est lui qui parle de toute façon.
   ============================================================ */

:where(.bf-dahlia) {

  /* ── Marque ─────────────────────────────────────────────── */
  --bf-primary:      var(--primary, #1d74ba);
  --bf-primary-dark: var(--primary-d-1, #16578c);
  --bf-primary-soft: color-mix(in srgb, var(--bf-primary) 8%, transparent);
  --bf-on-primary:   #ffffff;

  /* ── Texte & surfaces ───────────────────────────────────── */
  --bf-text:         var(--neutral-l-2, #0d1b2a);
  --bf-muted:        var(--neutral-l-4, #656e77);
  --bf-surface:      color-mix(in srgb, var(--bf-text) 4%, white);
  --bf-border-color: var(--neutral-l-9, #e9eaec);

  /* ── Formes ─────────────────────────────────────────────── */
  --bf-border-width: 1.5px;
  --bf-radius:       var(--radius-xs, 6px);
  --bf-radius-pill:  9999px;
  --bf-radius-check: 4px;
  --bf-ring-w:       3px;
  --bf-ring:         color-mix(in srgb, var(--bf-primary) 22%, transparent);

  /* ── Mouvement ──────────────────────────────────────────── */
  --bf-transition:   .25s cubic-bezier(.4, 0, .2, 1);


  /* ═══ Module « layout » ═══════════════════════════════════
     12 colonnes : c'est le seul nombre où moitiés, tiers ET quarts
     tombent juste. Les gouttières valent pour les deux axes ;
     --bf-row-gap remplace le padding-bottom de 20px que Bricks pose
     sous chaque champ (layout.css §2 l'annule). */
  --bf-cols:    12;
  --bf-col-gap: var(--space-s, 16px);
  --bf-row-gap: var(--space-s, 16px);


  /* ═══ Module « options » (checkbox / radio) ═══════════════ */
  --bf-opt-gap:     10px;
  --bf-opt-cols:    3;
  --bf-opt-h:       44px;
  --bf-opt-pad-y:   10px;
  --bf-opt-pad-x:   14px;
  --bf-opt-ind-gap: 10px;

  /* Typographie des options. Elle DOIT être déclarée : Bricks habille
     tout <label> du formulaire en 12px / 600 / uppercase / .4px.
     Sans ces tokens, une pilule hériterait du style d'un libellé de
     champ. */
  --bf-opt-fs: var(--text-s, 15px);
  --bf-opt-fw: 500;
  --bf-opt-lh: 1.3;
  --bf-opt-tt: none;
  --bf-opt-ls: 0;

  /* Palette propre aux options — indépendante du reste du formulaire,
     pour pouvoir styliser les pilules sans toucher aux champs. */
  --bf-opt-text:           var(--bf-text);
  --bf-opt-bg:             var(--bf-surface);
  --bf-opt-border:         var(--bf-border-color);
  --bf-opt-hover-bg:       var(--bf-opt-bg);
  --bf-opt-hover-border:   var(--bf-primary);
  --bf-opt-checked-text:   var(--bf-primary-dark);
  --bf-opt-checked-bg:     var(--bf-primary-soft);
  --bf-opt-checked-border: var(--bf-primary);

  /* Indicateur (la case / le rond) */
  --bf-check-size:             18px;
  --bf-opt-ind-bg:             #ffffff;
  --bf-opt-ind-border:         var(--bf-border-color);
  --bf-opt-ind-checked-bg:     var(--bf-primary);
  --bf-opt-ind-checked-border: var(--bf-primary);
  --bf-opt-tick:               "✓";
  --bf-opt-tick-color:         var(--bf-on-primary);

  /* Épaisseur de l'anneau blanc au centre d'un radio coché. Posée en em
     pour suivre --bf-check-size sans second réglage. */
  --bf-opt-dot-inset: .28em;

  /* Consentement — case unique. Volontairement dissocié du reste des
     options : c'est une mention légale, pas un choix de formulaire.
     Pas de token de lien ici : Bricks passe les libellés d'options par
     esc_html(), la case ne peut donc pas en contenir. */
  --bf-opt-consent-text:  var(--bf-muted);
  --bf-opt-consent-fs:    var(--text-s, 14px);
  --bf-opt-consent-fw:    400;
  --bf-opt-consent-lh:    1.5;
  --bf-opt-consent-gap:   var(--bf-opt-ind-gap);
  --bf-opt-consent-ind:   var(--bf-check-size);
  --bf-opt-consent-nudge: .15em;
  --bf-opt-consent-max-w: none;
}


/* ⚠ Neutralise l'agrandissement automatique du texte de WebKit.
   Sur iOS, `-webkit-text-size-adjust` vaut `auto` par défaut : le moteur
   gonfle la police BLOC PAR BLOC selon la largeur, même avec un
   `<meta viewport>` correct. Deux options côte à côte peuvent donc recevoir
   deux tailles différentes, et les boîtes cessent d'être à hauteur égale —
   uniquement sur iPhone / iPad, jamais sur desktop, et dans Safari comme
   dans les navigateurs tiers d'iOS, qui utilisent tous WebKit.
   Mesuré le 2026-09-04 sur staging5.mediaedge.cm : html et body y sont bien
   sur `auto`, le thème ne le neutralise pas.
   Volontairement hors :where() — cette règle doit s'appliquer. */
.bf-dahlia {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* Largeur par défaut d'un champ dans la grille : toute la ligne.
   Spécificité (0,1,0) — le réglage par champ que Bricks écrit en
   « #brxe-ID .form-group:nth-child(N) » (1,2,0) passe toujours devant. */
:where(.bf-dahlia[data-bf-layout="grid"]) .form-group {
  --bf-span: var(--bf-cols);
}


/* Defaults propres à certains presets — en :where(), donc toujours
   surchargeables depuis le panneau Bricks. */
:where(.bf-dahlia[data-bf-opt="tag"]) {
  --bf-opt-checked-bg:   var(--bf-primary);
  --bf-opt-checked-text: var(--bf-on-primary);
}


/* Confort : neutralise tout le mouvement du kit d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .bf-dahlia *,
  .bf-dahlia *::before,
  .bf-dahlia *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}