/* bf-site-maj.css — mise à jour du design de billfighters.fr (novembre 2026) : les changements M1 à M27 de
   designs/2026-11-site-maj/rapport-critique.md, maquettés dans designs/2026-11-site-maj/maquettes/ et validés par le PO sur la
   planche (designs/2026-11-site-maj/planche.html). Aucun texte, aucune police, aucune ressource distante ; la charte (violet,
   cyan, orange, or ; Fredoka, Inter, Cairo ; fond violacé) reste. Toute durée garde le multiplicateur « réduire les animations »
   (--bf-rm). Les décisions V1 à V10 du rapport ne sont pas appliquées.
   PORTÉE : FEUILLE À PART, chargée après bf-site.css et après les <style> de la page (balise <link> juste avant </head>), par les
   seules pages maquettées : accueil, Secret Santa, Événements et Qui paie l'addition en français (public/), et leurs versions
   anglaise et arabe générées par scripts/site/build-i18n.js, soit 12 pages. Elle n'est JAMAIS fusionnée dans bf-site.css, que
   chargent aussi les 4 pages des liens de l'app (invite, referral, e, auth/reset-password), Prono, 404, les pages légales, la
   suppression de compte et les Démos : leur rendu ne change pas (garde : __tests__/siteMajDesign.garde.test.ts).
   Empreinte ?v= : contrôlée par build-i18n.js comme celle des autres feuilles. Les jetons de mouvement de :root (--bf-ease*,
   --bf-t-*, --bf-stagger) ne sont pas redéfinis ici (M18).
   Passage au code (note de la planche) : les accents posés carte par carte dans le HTML ont été retirés des pages plutôt que
   forcés ici par !important (M3) ; les couleurs des 8 jeux et du bandeau sont posées dans le HTML de l'accueil (M6). */

/* ============================================================ Jetons (M1, M2, M12, M14) */
:root{
  /* M1 : le poussoir garde son talon, sans halo cyan */
  --bf-shadow-push:0 5px 0 var(--bf-cyan-deep);
  --bf-shadow-push-hi:0 5px 0 var(--bf-cyan-deep);
  --bf-shadow-push-down:0 1px 0 var(--bf-cyan-deep);
  /* M2 : filet des cartes plus discret ; M12 : un seul arrondi de carte (16 px) */
  --bf-line:rgba(141,91,255,.14);
  --bf-r-lg:16px;
  /* M14 : textes de tuile à 16 px, chapeau sans demi-pixel */
  --bf-fs-desc:16px;
  --bf-fs-lead-1:clamp(17px,1.5vw,20px);
}

/* ============================================================ M1. Lueurs retirées */
.bf-pict>svg,.cj-art .bf-pict>svg,.pr-perk .bf-pict>svg{filter:none}
.st-num{text-shadow:none}
.bf-step__n{filter:none}
.bf-step__n::before,.av-ava::before{background:var(--bf-acc)}
.hw-step.is-on .hw-go{filter:none}
.bf-meter i.bf-on,.bf-step__rail i{box-shadow:none}
.bf-count__num{filter:none}
.bf-board__ava{background:var(--bf-acc);box-shadow:0 0 0 2px var(--bf-ink-1)}
.hero-knight img,.dl-knight img{box-shadow:none}
.cj-emb{box-shadow:none}
/* Premium : ni halo ni rayon tournant ; le bouton doré prend la forme du poussoir (talon seul) */
.pr-plan--prem{box-shadow:none}
.pr-beam{display:none}
.pr-ribbon::before{box-shadow:none}
.pr-gold{box-shadow:0 5px 0 #A68A00}
.pr-gold:active{box-shadow:0 1px 0 #A68A00}
@media (hover:hover) and (pointer:fine) and (min-width:720px){.pr-gold:hover{box-shadow:0 5px 0 #A68A00}}

/* ============================================================ M2. Fonds calmés */
/* un seul halo derrière l'objet du haut de page ; plus de trame rayée. Le halo des pages filles garde la couleur posée par la
   page (--bf-glow : or de Prono, cyan des Démos) ; à défaut, le rouge de Santa, ramené de 17 à 13 % */
.hero::before,:root[dir="rtl"] .hero::before{background:radial-gradient(560px 520px at 24% 46%,rgba(141,91,255,.13),transparent 70%)}
.bf-hero::before{background:radial-gradient(520px 520px at 77% 50%,var(--bf-glow,rgba(255,77,109,.13)),transparent 70%)}
:root[dir="rtl"] .bf-hero::before{background:radial-gradient(520px 520px at 23% 50%,var(--bf-glow,rgba(255,77,109,.13)),transparent 70%)}
.bf-hero--video::before{background:radial-gradient(520px 560px at 75% 44%,rgba(48,214,200,.13),transparent 70%)}
:root[dir="rtl"] .bf-hero--video::before{background:radial-gradient(520px 560px at 25% 44%,rgba(48,214,200,.13),transparent 70%)}
.bf-hero::after{display:none}
/* plus de halos ailleurs : sous l'éventail des cartes, derrière le téléphone des étapes, dans l'appel final */
.cj-hand::before,.hw-glow{display:none}
.dl,:root[dir="rtl"] .dl{background:var(--bf-ink-1)}
/* ombres des téléphones et des vidéos en noir */
.bfv__shell{box-shadow:inset 0 0 0 1.5px rgba(185,160,255,.35),0 30px 60px rgba(0,0,0,.6)}
.hw-phone{box-shadow:inset 0 0 0 1.5px rgba(185,160,255,.35),0 30px 60px rgba(0,0,0,.6)}
.ev-phone{box-shadow:inset 0 0 0 1.5px rgba(185,160,255,.35),0 30px 70px rgba(0,0,0,.55)}
/* plus de taches de couleur dans les cartes et les panneaux : fond plein */
.bf-card,.bf-tile,.gm-card,.pr-plan,.pr-plan--prem,.qp-game,.av-card--agg,.bf-count,.bf-season-open .bf-count,.bf-board,
.bf-final,:root[dir="rtl"] .bf-final,.bf-callout,:root[dir="rtl"] .bf-callout{background:var(--bf-ink-2)}
.gm-poster{background:linear-gradient(180deg,#120a2e,#0a0620)}
.bf-count__cell{background:var(--bf-ink-1);border-color:var(--bf-line)}
.bf-board__row,:root[dir="rtl"] .bf-board__row{background:var(--bf-ink-1);border-color:var(--bf-line)}
/* trames de points et de rayures retirées (biais, hexagones et crochets gardés) */
.cj-art::before{display:none}
.cj-back{background:#1A0B45}
/* couleur pleine : ruban Santa, encadré de Qui paie, bandeau des jeux, séparateurs des chiffres */
.santa-strip{background:color-mix(in srgb,var(--bf-red) 12%,var(--bf-ink-0))}
.qp-hi{background:var(--bf-ink-2);border:1.5px solid color-mix(in srgb,var(--bf-violet) 55%,transparent)}
.gm-band{background:var(--bf-ink-2)}
.st-item+.st-item::before{background:var(--bf-line)}
@media (max-width:719px){
  .bf-hero::before,:root[dir="rtl"] .bf-hero::before{background:radial-gradient(420px 460px at 50% 84%,var(--bf-glow,rgba(255,77,109,.13)),transparent 70%)}
  .bf-hero--video::before,:root[dir="rtl"] .bf-hero--video::before{background:radial-gradient(420px 520px at 50% 82%,rgba(48,214,200,.13),transparent 70%)}
}
@media (max-width:999px){
  .hero::before,:root[dir="rtl"] .hero::before{background:radial-gradient(420px 420px at 50% 22%,rgba(141,91,255,.13),transparent 70%)}
}

/* ============================================================ M3. Une couleur d'accent par section */
/* la section porte l'accent (style du HTML) ; sa version « texte » en découle, sous un nom propre à la maquette (--maj-acc-t),
   pour que rien d'autre n'en hérite : seuls les éléments listés ici la reprennent (cartes, tuiles, frises .bf-step, raisons,
   cases du compte à rebours, écrans d'Événements, étiquettes, encadrés), plus les numéros de la FAQ. Gardent leur couleur :
   les 8 jeux, les 5 cartes à jouer, les deux formules (Gratuit, Premium), les mots colorés des règles, et, depuis la relecture
   du 6 novembre, la frise « En 4 étapes » (hexagones, étiquettes, bulles du téléphone) et les chiffres des deux bandes
   (8, 3, 5 en haut de l'accueil ; 8, Auto, 0 € dans la section Événements de l'accueil). */
.bf-sec{--maj-acc-t:var(--bf-acc)}
.bf-sec[style*="--bf-acc:var(--bf-violet)"]{--maj-acc-t:var(--bf-violet-t)}
.bf-sec[style*="--bf-acc:var(--bf-orange)"]{--maj-acc-t:var(--bf-orange-t)}
.bf-sec[style*="--bf-acc:var(--bf-red)"]{--maj-acc-t:var(--bf-red-t)}
/* sauf à l'intérieur de ce qui garde sa couleur (formules, cartes de jeu, règles de Qui paie, cartes à jouer) : l'étiquette
   « FREE PLAY MODE » de la formule Gratuit reste cyan, cadre et texte. Les éléments visés n'ont plus d'accent propre dans le HTML
   (retiré au passage au code) : la règle n'a pas besoin de !important ; elle l'emporte sur l'accent de classe du socle (.bf-chip) */
.bf-sec :is(.bf-card,.bf-tile,.bf-step,.bf-reason,.bf-count__cell,.ev-shot,.bf-chip,.bf-callout):not(:is(.pr-plan,.gm-card,.qp-game,.cj-card) *){--bf-acc:inherit;--bf-acc-t:var(--maj-acc-t)}
/* classement de l'accueil : chaque rangée à la couleur de son rang (or, argent, bronze) au lieu de or, cyan, violet */
.bf-board__row{--bf-acc:var(--bf-gold)}
.bf-board__row:nth-child(2){--bf-acc:#C8D2E0}
.bf-board__row:nth-child(3){--bf-acc:#D08A4A}
.fq-n{color:var(--maj-acc-t)}
.qp-hi b{color:var(--bf-violet-t)}

/* ============================================================ M4. Titre de l'accueil et étape active en couleur pleine */
.hh-l2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--bf-cyan)}
.hw-step.is-on .hw-title>span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--bf-acc-t,var(--bf-acc))}

/* ============================================================ M5. Hiérarchie des titres */
/* titre de page inchangé : clamp(36px,4.8vw,62px) sur les pages filles, clamp(38px,4.3vw,62px) sur l'accueil (40 px au téléphone).
   Les titres de section suivent la même pente, à 1/1,3 au plus du plus petit des deux, pour que le rapport titre de page / titre
   de section reste d'au moins 1,3 à toute largeur : phares clamp(27px,3.3vw,46px), appui clamp(23px,2.75vw,38px) ; le titre de
   l'appel final suit les sections d'appui ; les titres de troisième niveau restent sous les titres de section (20 à 32 px).
   Lignes d'environ 20 caractères. */
.bf-sh__title{font-size:clamp(23px,2.75vw,38px);max-width:20ch}
:is(#modes,#evenements,#santa,#cartes,#premium) .bf-sh__title,
.bf-sec--follow:has(.bf-cards) .bf-sh__title,.bf-sec:has(.qp-groups) .bf-sh__title{font-size:clamp(27px,3.3vw,46px)}
.bf-final__title{font-size:clamp(23px,2.75vw,38px)}
.dl-copy .bf-sh__title{max-width:16ch}
.hw-title,.ev-how__t{font-size:clamp(20px,2.3vw,32px)}
@media (max-width:719px){
  .bf-final__title{font-size:23px}
  .hw-title,:lang(ar) .hw-title,.ev-how__t{font-size:20px}
}

/* ============================================================ M6. Chaque jeu prend la couleur de l'app (accueil) */
/* Éclair or, Sprint orange, Natation cyan, Laser rouge, Zombie vert, LAST STAND violet, RUSH or, GÂCHETTE cyan : posées dans le
   HTML de l'accueil (style des 8 cartes .gm-card et de leur étiquette, --c des noms du bandeau .gm-track) ; aucune règle ici */

/* ============================================================ M7. Sous 1 000 px, texte et badges avant la vidéo */
/* le HTML d'Événements et de Qui paie place la figure après le corps (ordre de lecture et de tabulation) ; à l'ordinateur, rien ne
   change */
@media (max-width:999px){.bf-hero--video{grid-template-areas:"head" "body" "vid"}}

/* ============================================================ M8. Un seul bord (largeur des sections : 1 200 px, 20 px de marge) */
.nav-inner{max-width:var(--bf-wrap)}
.hero{padding-inline:max(20px,calc((100% - 1160px) / 2))}
.bf-hero{padding-inline:max(20px,calc((100% - 1160px) / 2))}
.bf-hdr{max-width:var(--bf-wrap)}

/* ============================================================ M9. Barre du haut qui suit le défilement, opaque, sans verre */
.nav{background:var(--bf-ink-0);-webkit-backdrop-filter:none;backdrop-filter:none}
/* pages filles : la barre colle en haut ; fond plein et filet sur toute la largeur (border-image), contenu inchangé */
.bf-hdr{position:sticky;top:0;z-index:20;background:var(--bf-ink-0);
  border-image:linear-gradient(to top,var(--bf-line) 1px,var(--bf-ink-0) 1px) fill 0 / 0 / 0 100vmax}
html:has(.bf-hdr){scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}

/* ============================================================ M10. Étiquettes de section : même biais, même taille, même couleur */
.bf-chip{min-height:28px;padding:5px 14px}
.bf-sh__mark{height:28px;gap:6px}
.bf-sh__mark i{width:8px}

/* ============================================================ M11. Trois rôles de bouton */
/* principal : le poussoir cyan (talon, sans halo, M1) ; Premium : même forme en or (M1) ; secondaire : un seul contour de
   1,5 px et un seul arrondi de 12 px, réseaux compris ; badges des boutiques et pilules du lecteur vidéo inchangés */
.bf-btn,.bf-btn--sm{border-radius:var(--bf-r-sm)}
.bf-ftr__soc a{border-radius:var(--bf-r-sm);box-shadow:inset 0 0 0 1.5px var(--bf-outline)}
@media (hover:hover) and (pointer:fine) and (min-width:720px){.bf-ftr__soc a:hover{box-shadow:inset 0 0 0 1.5px var(--bf-cyan)}}

/* ============================================================ M12. Une seule recette de carte */
/* fond plein (M2), filet fin, arrondi de 16 px, barre d'accent en haut ; marges intérieures 24 (cartes), 16 (tuiles, corps des
   cartes de jeu), 32 (panneaux) ; arrondis imbriqués justes */
.bf-card{padding:24px}
.bf-card::after{inset-inline-start:24px}
.bf-card__desc:last-child{margin-bottom:0}
.bf-tile,.bf-tile--lead{padding:16px}
.bf-tile::after{inset-inline-start:16px}
.gm-body{padding:16px}
.gm-card::after{inset-inline-start:16px}
.gm-poster{margin:8px 8px 0;border-radius:8px}
.pr-plan{padding:32px}
.pr-plan::after{inset-inline-start:32px}
.qp-game,.qp-game--lead{padding:24px}
.qp-game::after{inset-inline-start:24px}
.bf-callout{padding:24px;border-color:var(--bf-line)}
.qp-hi{padding:32px}
.bf-count{padding:56px 32px 32px}
.bf-count::after,.bf-board::after{inset-inline-start:32px}
.bf-board{padding:56px 32px 32px}
.bf-final,.bf-final--title{padding:32px}
.bf-final::after{inset-inline-start:32px}
.bf-count__cell,.bf-board__row{border-radius:10px}
.av-card--agg{border:1px solid var(--bf-line)}
/* boîtes dans des boîtes : le cadre part, la barre d'accent reste */
.qp-rule,.ev-note{padding:0;padding-inline-start:18px;border-radius:0;background:none}
.qp-rule::before,.ev-note::before{inset-inline-start:0;top:4px}
.st-list--panel{padding:24px 0 0;border:0;border-top:1px solid var(--bf-line);border-radius:0;background:none}
/* appel final de Santa (sans titre) : fondu dans sa section, la barre d'accent posée sur un filet */
.bf-final:not(.bf-final--title){padding:32px 0 0;border:0;border-top:1px solid var(--bf-line);border-radius:0;background:none}
.bf-final:not(.bf-final--title)::after{inset-inline-start:0}
@media (max-width:719px){
  .bf-card{padding:20px}
  .bf-card::after{inset-inline-start:20px}
  .bf-tile,.bf-tile--lead{padding:14px}
  .bf-tile::after{inset-inline-start:14px}
  .pr-plan{padding:24px 20px}
  .pr-plan::after{inset-inline-start:20px}
  .qp-game,.qp-game--lead{padding:20px}
  .qp-game::after{inset-inline-start:20px}
  .bf-callout{padding:20px}
  .qp-hi{padding:20px}
  .bf-count{padding:52px 20px 20px}
  .bf-board{padding:50px 16px 16px}
  .bf-count::after,.bf-board::after{inset-inline-start:20px}
  .bf-final,.bf-final--title{padding:24px 20px}
  .bf-final:not(.bf-final--title){padding:24px 0 0}
}

/* ============================================================ M13. Étiquettes au pied des cartes : texte calme et barre biaise */
.bf-card__badge,.gm-badge{align-items:flex-start;min-height:0;margin-top:0;padding:0;gap:8px;font:600 14px/1.45 var(--bf-f-text);letter-spacing:0;text-transform:none;color:var(--bf-text-2)}
.gm-badge{text-transform:none}
.bf-card__badge::before,.gm-badge::before{position:static;inset:auto;z-index:auto;flex:none;width:6px;height:14px;margin-top:.2em;background:var(--bf-acc);border:0}
:root:lang(ar) .bf-card__badge,:root:lang(ar) .gm-badge{font-size:15px;line-height:1.7}
.bf-card__desc{margin-bottom:12px}
.ev-foot{margin-top:0}
.gm-foot{margin-top:0;padding-top:12px}

/* ============================================================ M14. Tailles de texte */
.bf-card__desc,.bf-step__desc,.bf-acc__a p,.bf-reason__desc,.qp-game__desc,.gm-desc,.pr-desc,.pr-list li,.bf-count__sub{font-size:16px}
:root:lang(ar) :is(.bf-card__desc,.bf-step__desc,.bf-acc__a p,.bf-reason__desc,.qp-game__desc,.gm-desc,.pr-desc,.pr-list li,.bf-tile__desc,.bf-count__sub){font-size:17px}
:root:lang(ar) .bf-tile--lead .bf-tile__desc{font-size:17px}
sup{font-size:max(.75em,12px)}
.bf-count__num,.bf-board__pts,.bf-board__pos{font-variant-numeric:tabular-nums}
/* demi-pixels ramenés sur l'échelle */
.hw-float{font-size:14px}
.hw-float b{font-size:15px}
.hw-float .hf-txt>.hf-app{font-size:12px}
.gm-play,.hf-chip{font-size:14px}
.qp-rule,.ev-note{font-size:15px}
:root:lang(ar) .qp-rule,:root:lang(ar) .ev-note{font-size:16px}
.st-list--panel .st-lab{font-size:16px}
@media (max-width:719px){
  .pr-list li{font-size:16px}
  .bf-count__sub{font-size:16px}
  .santa-strip{font-size:14px}
  .tr-lead,.hw-desc,.ev-how__s{font-size:16px}
  .st-list--panel .st-lab{font-size:14px}
  :lang(ar) .st-list--panel .st-lab{font-size:15px}
}

/* ============================================================ M15. Petits libellés en capitales */
/* espacement 0,04 em au plus ; casse normale là où le texte est écrit en minuscules (pied de page, compte à rebours, classement,
   mentions Premium) ; les étiquettes au-dessus des titres, les capitales écrites et les noms des jeux gardent leur casse */
.bf-chip{letter-spacing:.04em}
.bf-chip--soft{letter-spacing:0}
.bf-count__lab,.bf-board__title,.bf-ftr__h,.pr-per{text-transform:none;letter-spacing:0}
.pr-ribbon,.hero-scroll,.nav-more-h,.hw-kick,.dl-players,.ft-coin{letter-spacing:.04em}
:root:lang(ar) :is(.bf-chip,.pr-ribbon,.hero-scroll,.nav-more-h,.hw-kick,.dl-players,.ft-coin){letter-spacing:0}

/* ============================================================ M16. Contraste en haut d'Événements et de Qui paie */
.bf-hero--video .bf-hero__under{color:var(--bf-text-2)}
.bf-hero--video .bf-hero__chip::before{background:color-mix(in srgb,var(--bf-acc) 22%,var(--bf-ink-1))}

/* ============================================================ M17. Panneau « C'est ouvert » de Santa */
/* ramené à la hauteur de son texte, aligné sur le titre, sans halo coloré propre (M2) ; les flocons de la page Santa tombent
   en 500 ms au lieu de 900 (ceux de l'accueil ne changent pas) */
#santaHero.bf-season-open .bf-count{padding-block:52px 28px}
#santaHero.bf-season-open .bf-count__open{font-size:22px}
#santaHero .sa-snow i{animation-duration:calc(500ms * (1 - var(--bf-rm)))}
@media (min-width:1000px){
  #santaHero.bf-season-open .bf-hero__vis{align-self:start;margin-top:calc(var(--bf-ico-3) / 2)}
  #santaHero.bf-season-open::before{background:radial-gradient(520px 420px at 77% 28%,var(--bf-glow,rgba(255,77,109,.13)),transparent 70%)}
  :root[dir="rtl"] #santaHero.bf-season-open::before{background:radial-gradient(520px 420px at 23% 28%,var(--bf-glow,rgba(255,77,109,.13)),transparent 70%)}
}
@media (max-width:719px){#santaHero.bf-season-open .bf-count{padding-block:48px 24px}#santaHero.bf-season-open .bf-count__open{font-size:20px}}

/* ============================================================ M18. Entrées plus courtes ; au survol, seul ce qui se clique réagit */
/* Seules les entrées génériques changent : les éléments .bf-rv (textes, cartes, étapes, tuiles, cartes de jeu qui montent),
   600 → 450 ms, courbe (.2,.7,.2,1) → (.22,1,.36,1), toutes deux sans rebond ; la cascade (70 ms, six éléments au plus,
   bf-site.js) et les délais propres (--bf-dl) ne changent pas. Les jetons de :root restent ceux du socle : les effets validés
   gardent leur durée et leur courbe (titres mot à mot, reflet des coupes, éventail des écrans, téléphone et bulles des 4 étapes,
   gestes des affiches, donne et retournement des cartes, compteur, vidéos, étoiles des avis, barres et lames des étiquettes,
   flocons de l'accueil) : V3. Sur les pages des maquettes, tous les .bf-rv ont la transition générique (relevé du 6 novembre),
   sauf tuiles et cartes de jeu, qui y ajoutent leur survol (gardé ci-dessous). Invisible sur une capture fixe. */
.bf-rv{--maj-t:calc(450ms * (1 - var(--bf-rm)));--maj-ease:cubic-bezier(.22,1,.36,1);transition:opacity var(--maj-t) var(--maj-ease) var(--bf-dl),translate var(--maj-t) var(--maj-ease) var(--bf-dl)}
.bf-rv.bf-tile,.bf-rv.gm-card{transition:opacity var(--maj-t) var(--maj-ease) var(--bf-dl,0ms),translate var(--maj-t) var(--maj-ease) var(--bf-dl,0ms),transform var(--bf-t-state) var(--bf-ease),border-color var(--bf-t-state) var(--bf-ease)}
@media (hover:hover) and (pointer:fine) and (min-width:720px){
  .bf-tile:hover{transform:translateY(-2px)}
  .bf-tile:hover .bf-tile__go{translate:calc(2px * var(--bf-dir)) -2px}
  .gm-card:hover{transform:translateY(-2px)}
  /* la carte à jouer se redresse toujours pour être lue (décision du lot 2), sans se soulever de plus de 2 px */
  .cj-hand:not(.bf-dealing) .cj-card:hover{translate:0 calc(var(--cj-y,0px) - 2px)}
}

/* ============================================================ M19 : dans le HTML (repli du chevalier dès l'échec de three.js) */

/* ============================================================ M20. Bande des chiffres compacte, rattachée au haut de page */
.hero{padding-bottom:48px}
.st-band{clip-path:none;padding-block:4px 44px;background:var(--bf-ink-0)}
:root[dir="rtl"] .st-band{clip-path:none}
.st-band .bf-sec__edge{display:none}
.st-band .st-num{font-size:44px}
@media (max-width:719px){
  .hero{padding-bottom:32px}
  .st-band{padding-block:0 32px}
  .st-band .st-num{font-size:34px}
}

/* ============================================================ M21. Tablette (720 à 999 px) : cartes en deux colonnes */
@media (min-width:720px) and (max-width:999px){
  .bf-cards--3,.av-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* une carte seule en fin de rangée prend toute la largeur */
  :is(.bf-cards--3,.av-grid)>:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ============================================================ M22. Première carte en grand (Santa et Prono de l'accueil) */
/* motif de la tuile large du socle (.bf-tile--lead) : la première carte prend toute la rangée, pictogramme au début et texte à
   côté ; les deux autres se partagent la rangée suivante. Événements (six cartes) : essayé en 2 × 2, abandonné (carte presque
   vide, la rangée s'alourdit) ; ses six cartes restent égales. */
@media (min-width:720px){
  :is(#santa,#prono) .bf-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#santa,#prono) .bf-cards--3>:first-child{grid-column:1 / -1;display:grid;grid-template-columns:var(--bf-ico-3) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:28px;align-items:start;padding:32px}
  :is(#santa,#prono) .bf-cards--3>:first-child::after{inset-inline-start:32px}
  :is(#santa,#prono) .bf-cards--3>:first-child .bf-card__pict{grid-row:1 / span 3;width:var(--bf-ico-3);height:var(--bf-ico-3);margin:0}
  :is(#santa,#prono) .bf-cards--3>:first-child .bf-card__title{font-size:28px}
  :is(#santa,#prono) .bf-cards--3>:first-child .bf-card__desc{max-width:62ch;font-size:18px}
  :root:lang(ar) :is(#santa,#prono) .bf-cards--3>:first-child .bf-card__desc{font-size:18px}
  :is(#santa,#prono) .bf-cards--3>:last-child:nth-child(odd){grid-column:auto}
}

/* ============================================================ M23. En-têtes partagés : un texte court passe sous le titre */
/* textes de droite de 75 caractères au plus (français) : règles et Premium de l'accueil ; quatre en-têtes d'Événements */
.bf-sh--split:has(>.bf-sh__sub:is([data-i18n="i_rulesSubtitle"],[data-i18n="i_premSubtitle"],[data-i18n="v_featSub"],[data-i18n="v_shotsSub"],[data-i18n="v_howSub"],[data-i18n="v_specSub"])){grid-template-columns:minmax(0,1fr)}
.bf-sh--split>.bf-sh__sub:is([data-i18n="i_rulesSubtitle"],[data-i18n="i_premSubtitle"],[data-i18n="v_featSub"],[data-i18n="v_shotsSub"],[data-i18n="v_howSub"],[data-i18n="v_specSub"]){padding-bottom:0}

/* ============================================================ M24. Une seule numérotation, l'hexagone */
/* les raisons de Qui paie gardent leur numéro, sans boîte de carte ; la frise « En 4 étapes » garde ses hexagones, ses quatre
   couleurs et son mouvement (ce qui la touche est déclaré ailleurs : lueur de l'hexagone actif M1, titre actif en couleur pleine
   M4, taille des titres d'étape M5, demi-pixels des bulles M14, espacement de l'étiquette M15) */
.bf-reason{padding:0;border:0;border-radius:0;background:none}
.bf-reasons{gap:36px 48px}
@media (max-width:719px){.bf-reasons{gap:28px}.bf-reason{padding:0}}

/* ============================================================ M25. Pastille « sans son » dans le sens de lecture */
:root[dir="rtl"] .bfv__chip{right:auto;left:14px}

/* ============================================================ M26. Étiquette du haut d'Événements sur une ligne au téléphone */
@media (max-width:719px){.bf-hero--video .bf-hero__chip{font-size:12px;letter-spacing:0;padding-inline:10px}}

/* ============================================================ M27 : vérifié en défilant (planche) ; aucune règle */