/* bf-site.css — socle commun de billfighters.fr (lot 1 ; docs/site/PLAN_LOT1_SOCLE.md, valeurs de la maquette validée
   designs/2026-10-site/directions/direction-arcade-c.html). Inerte : seulement :root (jetons --bf-) et des classes bf- ;
   jamais bf-ico, bf-shot, bf-phone, bfv, ni bf-ios ou bf-android en cible, ni règle de boutique. Un seul interrupteur de
   mouvement, --bf-rm. Dans <head>, AVANT le <style> de la page. */

/* ===== 1. Jetons ===== */
:root{
  --bf-ink-0:#07031A;--bf-ink-1:#0E0628;--bf-ink-2:#150A35; /* page ; sections ; cartes, tuiles */
  --bf-line:rgba(141,91,255,.22);
  --bf-text:#F4F1FF;--bf-text-2:#C9C1E6;--bf-text-3:#A99FD0;
  --bf-cyan:#30D6C8;--bf-cyan-deep:#138A80;
  --bf-violet:#8D5BFF;--bf-violet-t:#B9A0FF; /* marque, jamais en texte ; violet en texte */
  --bf-orange:#FF8C42;--bf-orange-t:#FFB078;--bf-gold:#FFD700;--bf-red:#FF4D6D;--bf-red-t:#FF8FA3; /* rouge en texte (puces de Santa) */
  --bf-on-acc:#0B0617; /* texte sur un fond d'accent */
  --bf-outline:rgba(244,241,255,.38); /* contour des commandes : 3,2:1 */
  --bf-f-disp:'Fredoka','Fredoka Fallback','Segoe UI',system-ui,sans-serif;
  --bf-f-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bf-fs-1:clamp(36px,4.8vw,62px);--bf-fs-2:clamp(36px,4.6vw,60px); /* titres de page, de section */
  --bf-fs-lead-1:clamp(17px,1.5vw,19.5px);--bf-fs-lead:clamp(18px,1.65vw,21px);
  --bf-fs-card:24px;--bf-fs-name:22px;--bf-fs-tile:20px;--bf-fs-chip:15px;
  --bf-fs-body:16px;--bf-fs-desc:15px;--bf-fs-note:14px;
  --bf-wrap:1200px;--bf-gutter:20px;
  --bf-sec-y:112px;--bf-sec-y-tight:96px;--bf-cut:56px;
  --bf-sh-gap:14px;--bf-sh-mb:52px;--bf-sh-colgap:56px;
  --bf-gap:18px;
  --bf-r-pill:999px;--bf-r-lg:18px;--bf-r-md:16px;--bf-r-btn:14px;--bf-r-sm:12px;--bf-r-xs:10px;
  --bf-shadow-push:0 5px 0 var(--bf-cyan-deep),0 16px 30px -10px rgba(48,214,200,.6);
  --bf-shadow-push-hi:0 5px 0 var(--bf-cyan-deep),0 18px 38px -10px rgba(48,214,200,.75);
  --bf-shadow-push-down:0 1px 0 var(--bf-cyan-deep),0 6px 14px -8px rgba(48,214,200,.5);
  --bf-shadow-card:0 22px 40px -14px rgba(0,0,0,.75);
  --bf-slant:12deg;--bf-dir:1;
  --bf-ico-1:1.15em;--bf-ico-2:44px;--bf-ico-3:70px;
  --bf-rm:0; /* toute durée et toute distance × (1 − --bf-rm) */
  --bf-ease:cubic-bezier(.2,.7,.2,1);
  --bf-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --bf-ease-reveal:cubic-bezier(.65,0,.35,1);
  --bf-t-state:calc(180ms * (1 - var(--bf-rm)));
  --bf-t-enter:calc(600ms * (1 - var(--bf-rm)));
  --bf-t-sign:calc(900ms * (1 - var(--bf-rm)));
  --bf-stagger:calc(70ms * (1 - var(--bf-rm)));
  --bf-stagger-word:calc(40ms * (1 - var(--bf-rm)));
  --bf-d-text:calc(16px * (1 - var(--bf-rm)));
  --bf-d-card:calc(28px * (1 - var(--bf-rm)));
}
:root[dir="rtl"]{--bf-dir:-1}
:root:lang(ar){--bf-f-disp:'Cairo','Cairo Fallback','Segoe UI','Noto Sans Arabic',Tahoma,sans-serif;--bf-f-text:var(--bf-f-disp)}
@media (prefers-reduced-motion: reduce), print{:root{--bf-rm:1}}
@media (max-width: 719px){
  :root{--bf-sec-y:64px;--bf-sec-y-tight:64px;--bf-cut:28px;--bf-sh-mb:32px;--bf-fs-card:22px;--bf-fs-name:23px;--bf-fs-tile:19px;--bf-ico-3:78px}
}

/* ===== 2. Polices de repli calibrées de l'accueil (local() seulement) ===== */
@font-face{font-family:'Fredoka Fallback';src:local('Tahoma');font-weight:600;unicode-range:U+0020-00FF;size-adjust:100.5%;ascent-override:96.9%;descent-override:23.5%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma');font-weight:100 500;unicode-range:U+0600-06FF,U+0750-077F;size-adjust:100%;ascent-override:130.3%;descent-override:57.1%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma Bold'),local('Tahoma-Bold');font-weight:600 700;unicode-range:U+0600-06FF,U+0750-077F;size-adjust:95%;ascent-override:137.2%;descent-override:60.1%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma Bold'),local('Tahoma-Bold');font-weight:800 900;unicode-range:U+0600-06FF,U+0750-077F;size-adjust:100%;ascent-override:130.3%;descent-override:57.1%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma');font-weight:100 500;unicode-range:U+0021-00FF;size-adjust:97%;ascent-override:134.3%;descent-override:58.9%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma Bold'),local('Tahoma-Bold');font-weight:600 700;unicode-range:U+0021-00FF;size-adjust:87%;ascent-override:149.8%;descent-override:65.6%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma Bold'),local('Tahoma-Bold');font-weight:800 900;unicode-range:U+0021-00FF;size-adjust:90%;ascent-override:144.8%;descent-override:63.4%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma');font-weight:100 500;unicode-range:U+0020;size-adjust:70.4%;ascent-override:185.1%;descent-override:81.1%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma Bold'),local('Tahoma-Bold');font-weight:600 700;unicode-range:U+0020;size-adjust:74.4%;ascent-override:175.1%;descent-override:76.7%;line-gap-override:0%}
@font-face{font-family:'Cairo Fallback';src:local('Tahoma Bold'),local('Tahoma-Bold');font-weight:800 900;unicode-range:U+0020;size-adjust:74.1%;ascent-override:175.8%;descent-override:77.1%;line-gap-override:0%}

/* ===== 3. Portée : un bloc du socle remet à zéro ce qu'il hérite de la page ===== */
.bf-sec,.bf-hdr,.bf-ftr,.bf-hero{font:400 var(--bf-fs-body)/1.55 var(--bf-f-text);color:var(--bf-text);text-align:start;font-feature-settings:normal;letter-spacing:normal;-webkit-font-smoothing:antialiased}
/* 0,1,0 : passe devant h2{…}, p{…}, a{…} des pages, cède aux composants plus bas */
:is(.bf-sec,.bf-hdr,.bf-ftr,.bf-hero) :where(h1,h2,h3,h4,p,figure,ul,ol){margin:0}
:is(.bf-sec,.bf-hdr,.bf-ftr,.bf-hero) :where(a){color:inherit}
:is(.bf-sec,.bf-hdr,.bf-ftr,.bf-hero) :where(img){max-width:100%}
:is(.bf-sec,.bf-hdr,.bf-ftr,.bf-hero) :focus-visible{outline:3px solid var(--bf-cyan);outline-offset:3px;border-radius:6px;scroll-margin-block:12px} /* anneau jamais coupé au bord de l'écran */
/* « :root » passe devant html[dir="rtl"] ul{…} (0,1,2) injectée par i18n.js ; à 0,2,0, une liste qui pose un retrait
   l'écrit précédée de :root, plus bas (« .bf-ftr ul » à part : dans :is(), il porterait toute la règle à 0,2,1) */
:root :is(.bf-cards,.bf-tiles,.bf-snap,.bf-accs,.bf-steps,.bf-board__rows,.bf-reasons){list-style:none;margin:0;padding:0}
:root .bf-ftr ul{list-style:none;margin:0;padding:0}
/* « 1<sup>er</sup> » : exposant qui n'agrandit pas la ligne, en minuscules même dans un texte en capitales (lot 8) */
sup{font-size:75%;line-height:0;text-transform:none}

/* ===== 4. Mise en page ===== */
.bf-wrap{max-width:var(--bf-wrap);margin-inline:auto;padding-inline:var(--bf-gutter)}
/* Section : coupe en biais, trait d'accent (--bf-acc posé par la page), reflet ; un halo ne peut pas élargir la page */
.bf-sec{position:relative;isolation:isolate;padding-block:var(--bf-sec-y);background:var(--bf-ink-1);overflow-x:clip}
.bf-sec--tight{padding-block:var(--bf-sec-y-tight)}
.bf-sec--cut{clip-path:polygon(0 var(--bf-cut),100% 0,100% 100%,0 100%)}
:root[dir="rtl"] .bf-sec--cut{clip-path:polygon(0 0,100% var(--bf-cut),100% 100%,0 100%)}
.bf-sec--follow{margin-top:calc(var(--bf-cut) * -1);padding-block:calc(24px + var(--bf-cut)) var(--bf-sec-y)}
.bf-sec__edge{position:absolute;inset:0 0 auto;height:var(--bf-cut);pointer-events:none;z-index:1}
.bf-sec__edge svg{display:block;width:100%;height:100%;overflow:visible;scale:var(--bf-dir) 1}
.bf-sec__line{stroke:color-mix(in srgb,var(--bf-acc) 70%,transparent);stroke-width:3;vector-effect:non-scaling-stroke}
.bf-sec__glint{stroke:#fff;stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:180px 100000px;stroke-dashoffset:180px;opacity:0}
/* En-tête de section ; --split : chapeau sur le côté (7 / 5) ; __mark : trois barres */
.bf-sh{display:grid;gap:var(--bf-sh-gap);justify-items:start;align-content:start;text-align:start;margin:0 0 var(--bf-sh-mb)}
.bf-sh__lead{display:grid;gap:var(--bf-sh-gap);justify-items:start;min-width:0}
.bf-sh--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:var(--bf-sh-colgap)}
.bf-sh--split .bf-sh__sub{padding-bottom:.3em}
.bf-sh__title{font:700 var(--bf-fs-2)/1.02 var(--bf-f-disp);letter-spacing:-.018em;color:var(--bf-text);text-wrap:balance;max-width:15ch}
:root:lang(ar) .bf-sh__title{letter-spacing:0;line-height:1.25}
.bf-sh__sub{font-size:var(--bf-fs-lead);line-height:1.45;color:var(--bf-text-2);max-width:38ch;text-wrap:pretty}
:root:lang(ar) .bf-sh__sub{line-height:1.7}
.bf-sh__mark{display:flex;gap:7px;height:22px}
.bf-sh__mark i{width:9px;height:100%;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)));transform-origin:50% 100%;transition:scale var(--bf-t-state) var(--bf-ease-spring) calc(var(--bf-n,0) * 50ms * (1 - var(--bf-rm)))}
.bf-sh__mark i:nth-child(2){opacity:.6;--bf-n:1}
.bf-sh__mark i:nth-child(3){opacity:.3;--bf-n:2}

/* ===== 5. Composants ===== */
/* Puce (texte dans un span) ; --bf-acc et --bf-acc-t par emploi (violet : --bf-acc-t: var(--bf-violet-t)) */
.bf-chip{--bf-acc:var(--bf-cyan);--bf-acc-t:var(--bf-acc);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:6px 16px;font:600 var(--bf-fs-chip)/1.3 var(--bf-f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--bf-acc-t)}
.bf-chip::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bf-acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--bf-acc) 72%,transparent);transform-origin:var(--bf-from,left) 50%;transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)));transition:transform var(--bf-t-enter) var(--bf-ease-reveal) var(--bf-cdl,0ms)}
:root[dir="rtl"] .bf-chip::before{--bf-from:right}
.bf-chip>span{text-wrap:balance;transition:opacity var(--bf-t-state) var(--bf-ease) calc(var(--bf-cdl,0ms) + 160ms * (1 - var(--bf-rm)))}
:root:lang(ar) .bf-chip{letter-spacing:0}
.bf-chip--soft{text-transform:none;letter-spacing:0;font:600 14px/1.25 var(--bf-f-text)}

/* Boutons : poussoir, secondaire ; la boutique se choisit par les rôles du lot 0, jamais ici */
.bf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--bf-r-btn);border:0;font:600 17px/1.1 var(--bf-f-disp);text-decoration:none;text-align:center;cursor:pointer;transition:translate var(--bf-t-state) var(--bf-ease),box-shadow var(--bf-t-state) var(--bf-ease),background-color var(--bf-t-state) var(--bf-ease),border-color var(--bf-t-state) var(--bf-ease),filter var(--bf-t-state) var(--bf-ease)}
.bf-btn--push{background:var(--bf-cyan);color:var(--bf-on-acc);box-shadow:var(--bf-shadow-push)}
.bf-btn--push:active{translate:0 4px;box-shadow:var(--bf-shadow-push-down)}
.bf-btn--ghost{background:transparent;color:var(--bf-text);box-shadow:inset 0 0 0 1.5px var(--bf-outline)}
.bf-btn--ghost:active{translate:0 2px}
.bf-btn--sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:var(--bf-r-sm)}
.bf-btn--sm.bf-btn--push{box-shadow:0 4px 0 var(--bf-cyan-deep)}
.bf-btn--sm.bf-btn--push:active{translate:0 3px;box-shadow:0 1px 0 var(--bf-cyan-deep)}

.bf-store{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:7px 20px 7px 14px;border-radius:12px;background:#000;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(244,241,255,.42);transition:box-shadow var(--bf-t-state) var(--bf-ease),translate var(--bf-t-state) var(--bf-ease)}
.bf-store svg{display:block;flex:none;width:26px;height:26px}
.bf-store small{display:block;font:600 12px/1.25 var(--bf-f-text);color:#DAD5EE;text-align:start}
.bf-store b{display:block;font:600 19px/1.15 'Fredoka','Fredoka Fallback','Segoe UI',system-ui,sans-serif;letter-spacing:.01em;text-align:start}
:root:lang(ar) .bf-store small{font-size:13px}
.bf-store:active{translate:0 2px}
:root a.bf-store:focus-visible{outline:3px solid var(--bf-cyan);outline-offset:3px;border-radius:12px}

/* Lien souligné (cible de 44 px) ; note, dont les liens portent .bf-lnk */
.bf-lnk{align-self:flex-start;font:600 16px/1.4 var(--bf-f-text);color:var(--bf-cyan);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--bf-cyan) 50%,transparent);padding-block:11px;transition:text-decoration-color var(--bf-t-state) var(--bf-ease),color var(--bf-t-state)}
.bf-note{margin-top:20px;text-align:center;font-size:var(--bf-fs-note);line-height:1.5;color:var(--bf-text-3)}

/* Pictogramme teinté : emplacement de taille réservée, rempli par bf-icons.js ; --txt dans le texte */
.bf-pict{display:block;flex:none;width:var(--bf-ico-2);height:var(--bf-ico-2);color:var(--bf-acc,var(--bf-cyan))}
.bf-pict>svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 12px color-mix(in srgb,currentColor 42%,transparent))}
.bf-pict--txt{display:inline-block;width:var(--bf-ico-1);height:var(--bf-ico-1);vertical-align:-.18em}

/* Carte de contenu ; grille de deux colonnes */
.bf-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bf-gap)}
.bf-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bf-card{--bf-acc:var(--bf-cyan);position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:30px 30px 32px;border-radius:var(--bf-r-lg);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 55%),var(--bf-ink-2);border:1px solid var(--bf-line)}
.bf-card::after{content:"";position:absolute;top:-1px;inset-inline-start:30px;width:40px;height:3px;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.bf-card__pict{margin-bottom:18px}
.bf-card__title{font:600 var(--bf-fs-card)/1.2 var(--bf-f-disp);margin-bottom:10px}
.bf-card__desc{font-size:15.5px;line-height:1.6;color:var(--bf-text-2);margin-bottom:20px;text-wrap:pretty}
:root:lang(ar) .bf-card__title{line-height:1.4}
:root:lang(ar) .bf-card__desc{font-size:16.5px;line-height:1.75}
.bf-card__badge{margin-top:auto;--bf-cdl:calc(var(--bf-dl,0ms) + 240ms * (1 - var(--bf-rm)))}

/* Tuile (entrée cliquable : le lien du titre la couvre) ; grille de deux colonnes, --lead sur toute la largeur */
.bf-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.bf-tile{--bf-acc:var(--bf-cyan);position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;align-items:start;padding:16px 18px 18px;border-radius:var(--bf-r-md);border:1px solid var(--bf-line);background:radial-gradient(90% 70% at var(--bf-gx,0%) 0%,color-mix(in srgb,var(--bf-acc) 13%,transparent),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 60%),var(--bf-ink-2)}
/* .bf-rv.bf-tile (0,2,0) : passe devant la transition de .bf-rv (§ 7) */
.bf-tile,.bf-rv.bf-tile{transition:opacity var(--bf-t-enter) var(--bf-ease) var(--bf-dl,0ms),translate var(--bf-t-enter) var(--bf-ease) var(--bf-dl,0ms),transform var(--bf-t-state) var(--bf-ease),border-color var(--bf-t-state) var(--bf-ease)}
:root[dir="rtl"] .bf-tile{--bf-gx:100%}
.bf-tile--lead{grid-column:1/-1;grid-template-columns:52px minmax(0,1fr);column-gap:20px;padding-block:20px 22px}
.bf-tile::after{content:"";position:absolute;top:-1px;inset-inline-start:18px;width:40px;height:3px;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.bf-tile__pict{grid-column:1;grid-row:1/span 2}
.bf-tile--lead .bf-tile__pict{width:52px;height:52px}
.bf-tile__go{position:absolute;top:16px;inset-inline-end:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--bf-r-xs);color:var(--bf-acc);background:color-mix(in srgb,var(--bf-acc) 13%,transparent);transition:translate var(--bf-t-state) var(--bf-ease)}
.bf-tile__go svg{width:16px;height:16px;scale:var(--bf-dir) 1}
.bf-tile__title{grid-column:2;grid-row:1;margin:2px 0 6px;padding-inline-end:44px;font:600 var(--bf-fs-tile)/1.25 var(--bf-f-disp)}
.bf-tile--lead .bf-tile__title{font-size:24px}
.bf-tile__link{color:var(--bf-text);text-decoration:none}
.bf-tile__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--bf-r-md)}
@supports selector(:has(a)){.bf-tile__link{padding-block:11px}.bf-tile__link:focus-visible{outline:none}} /* cible de 44 px au moins (lot 8) ; lien en ligne : rien ne bouge */
.bf-tile:has(.bf-tile__link:focus-visible){outline:3px solid var(--bf-cyan);outline-offset:4px}
.bf-tile__link:focus-visible{scroll-margin-block:30px} /* l'anneau de la tuile entier au bord de l'écran */
.bf-tile__desc{grid-column:2;grid-row:2;font-size:var(--bf-fs-desc);line-height:1.55;color:var(--bf-text-2);text-wrap:pretty}
.bf-tile--lead .bf-tile__desc{font-size:16px;max-width:52ch}
:root:lang(ar) .bf-tile__title{line-height:1.4}
:root:lang(ar) .bf-tile__desc{font-size:16px;line-height:1.7}

/* Sélection : quatre crochets, sur ce qui se clique seulement */
.bf-sel::before{content:"";position:absolute;inset:-7px;z-index:2;pointer-events:none;--bf-sl:16px;--bf-sw:2.5px;--bf-sk:var(--bf-acc,var(--bf-cyan));
  background:linear-gradient(var(--bf-sk),var(--bf-sk)) 0 0/var(--bf-sl) var(--bf-sw),linear-gradient(var(--bf-sk),var(--bf-sk)) 0 0/var(--bf-sw) var(--bf-sl),linear-gradient(var(--bf-sk),var(--bf-sk)) 100% 0/var(--bf-sl) var(--bf-sw),linear-gradient(var(--bf-sk),var(--bf-sk)) 100% 0/var(--bf-sw) var(--bf-sl),linear-gradient(var(--bf-sk),var(--bf-sk)) 0 100%/var(--bf-sl) var(--bf-sw),linear-gradient(var(--bf-sk),var(--bf-sk)) 0 100%/var(--bf-sw) var(--bf-sl),linear-gradient(var(--bf-sk),var(--bf-sk)) 100% 100%/var(--bf-sl) var(--bf-sw),linear-gradient(var(--bf-sk),var(--bf-sk)) 100% 100%/var(--bf-sw) var(--bf-sl);
  background-repeat:no-repeat;opacity:0;scale:1.04;transition:opacity var(--bf-t-state) var(--bf-ease),scale var(--bf-t-state) var(--bf-ease)}
.bf-sel:has(:focus-visible)::before{opacity:1;scale:1;inset:-13px}

/* Jauge : 10 crans, allumés en .bf-on */
.bf-meter{display:grid;grid-template-columns:repeat(10,5px);gap:3px;height:15px;margin-top:6px}
.bf-meter i{display:block;border-radius:1px;background:rgba(244,241,255,.15);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)));transform-origin:50% 100%;transition:scale var(--bf-t-state) var(--bf-ease-spring) calc(var(--bf-i,0) * var(--bf-stagger) + (300ms + var(--bf-k,0) * 20ms) * (1 - var(--bf-rm)))}
.bf-meter i.bf-on{background:var(--bf-acc);box-shadow:0 0 8px color-mix(in srgb,var(--bf-acc) 55%,transparent)}
:is(.bf-meter,.bf-step__rail) i:nth-child(2){--bf-k:1}:is(.bf-meter,.bf-step__rail) i:nth-child(3){--bf-k:2}:is(.bf-meter,.bf-step__rail) i:nth-child(4){--bf-k:3}:is(.bf-meter,.bf-step__rail) i:nth-child(5){--bf-k:4}:is(.bf-meter,.bf-step__rail) i:nth-child(6){--bf-k:5}
:is(.bf-meter,.bf-step__rail) i:nth-child(7){--bf-k:6}:is(.bf-meter,.bf-step__rail) i:nth-child(8){--bf-k:7}:is(.bf-meter,.bf-step__rail) i:nth-child(9){--bf-k:8}:is(.bf-meter,.bf-step__rail) i:nth-child(10){--bf-k:9}

/* Rangée à aimantation et crans : au téléphone seulement (§ 8) */
.bf-snap:focus-visible{outline-offset:-3px}
.bf-dots{display:none}

/* Accordéon : replié à la spécificité la plus basse, pour que le repli <noscript> de la page (.bf-acc .bf-acc__a) passe */
.bf-accs{display:grid;gap:12px}
.bf-acc{border-radius:var(--bf-r-btn);background:var(--bf-ink-2);border:1px solid var(--bf-line)}
.bf-acc__h{margin:0;font:inherit}
.bf-acc__q{appearance:none;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:12px 16px;border-radius:var(--bf-r-btn);text-align:start;font:600 16px/1.35 var(--bf-f-disp);color:var(--bf-text)}
.bf-acc__ico{position:relative;flex:none;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--bf-cyan) 14%,transparent)}
.bf-acc__ico::before,.bf-acc__ico::after{content:"";position:absolute;inset-inline:9px;top:14px;height:2px;border-radius:2px;background:var(--bf-cyan);transition:rotate var(--bf-t-state) var(--bf-ease-spring)}
.bf-acc__ico::after{rotate:90deg}
.bf-acc.bf-open .bf-acc__ico::after{rotate:0deg}
/* région masquée tant que repliée : aucun repère vide pour les lecteurs d'écran */
.bf-acc__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--bf-t-enter) var(--bf-ease),visibility 0s linear var(--bf-t-enter)}
.bf-acc__a>div{overflow:hidden}
.bf-acc.bf-open .bf-acc__a{grid-template-rows:1fr}
.bf-acc.bf-open .bf-acc__a,:root:not(.bf-js) .bf-acc__a{visibility:visible;transition-delay:0s}
/* bf-js : posée par la tête de la page (replié dès le premier rendu), retirée si bf-site.js échoue ; sans elle, tout ouvert (plan, § 3.3) */
:root:not(.bf-js) .bf-acc__a{grid-template-rows:1fr}
:root:not(.bf-js) .bf-acc__a>div{visibility:visible}
:root:not(.bf-js) .bf-acc__ico::after{rotate:0deg}
.bf-acc__a p{padding:0 16px 16px;font-size:15px;line-height:1.6;color:var(--bf-text-2)}
:root:lang(ar) .bf-acc__q{line-height:1.6}
:root:lang(ar) .bf-acc__a p{font-size:16px;line-height:1.75}

/* Pages filles (lot 5, maquette validée designs/2026-10-site/lots/lot5/santa.html) */
/* Haut de page : le texte au début, l'objet (compte à rebours) au bout ; halos et trame en miroir en arabe, halo de l'objet à la
   couleur de la page (--bf-glow) ; ce qui déborde à l'horizontale (flocons du bord) est coupé, comme dans les sections */
.bf-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:32px;padding:56px max(20px,calc((100% - 1240px) / 2)) 104px;overflow-x:clip}
.bf-hero::before{content:"";position:absolute;inset:-76px 0 0;z-index:-2;background:radial-gradient(520px 520px at 77% 50%,var(--bf-glow,rgba(255,77,109,.17)),transparent 70%),radial-gradient(680px 560px at 18% 26%,rgba(141,91,255,.24),transparent 70%)}
.bf-hero::after{content:"";position:absolute;inset:-76px 0 0;z-index:-2;background:repeating-linear-gradient(-72deg,rgba(185,160,255,.07) 0 1px,transparent 1px 26px);-webkit-mask:linear-gradient(90deg,#000,transparent 62%);mask:linear-gradient(90deg,#000,transparent 62%)}
:root[dir="rtl"] .bf-hero::before{background:radial-gradient(520px 520px at 23% 50%,var(--bf-glow,rgba(255,77,109,.17)),transparent 70%),radial-gradient(680px 560px at 82% 26%,rgba(141,91,255,.24),transparent 70%)}
:root[dir="rtl"] .bf-hero::after{-webkit-mask:linear-gradient(-90deg,#000,transparent 62%);mask:linear-gradient(-90deg,#000,transparent 62%);background:repeating-linear-gradient(72deg,rgba(185,160,255,.07) 0 1px,transparent 1px 26px)}
.bf-hero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.bf-hero__chip{font-size:14px}
/* titre et chapeau : largeurs en em, égales aux 20ch et 44ch de la maquette une fois les polices chargées (11,3em et 27,75em en
   Fredoka et Inter, 11,12em et 24,6em en Cairo) ; le « 0 » qui mesure le ch vient d'un fichier de police qui peut arriver après les
   autres : en em, aucune ligne ne change pendant l'arrivée des polices */
.bf-hero__title{margin-top:18px;font:700 var(--bf-fs-1)/1.02 var(--bf-f-disp);letter-spacing:-.022em;text-wrap:balance;max-width:11.3em}
:root:lang(ar) .bf-hero__title{letter-spacing:0;line-height:1.3;max-width:11.12em}
.bf-hero__lead{margin-top:20px;max-width:27.75em;font-size:var(--bf-fs-lead-1);line-height:1.6;color:var(--bf-text-2);text-wrap:pretty}
:root:lang(ar) .bf-hero__lead{line-height:1.8;max-width:24.6em}
.bf-hero__lead b{color:var(--bf-text);font-weight:700}
.bf-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bf-hero__under{margin-top:14px;font-size:14px;line-height:1.6;color:var(--bf-text-3)}
.bf-hero__vis{position:relative;justify-self:center;width:100%;max-width:470px}
/* .bf-season-open : posée par le script de la page le jour de l'ouverture (aucun redéploiement) ; la puce datée disparaît */
.bf-season-open .bf-hero__chip{display:none}
.bf-season-open .bf-hero__title{margin-top:0}
/* Compte à rebours : panneau, trois cases, chiffres en rouleaux (.bf-odo) posés par le script de la page */
.bf-count{--bf-acc:var(--bf-red);position:relative;padding:58px 26px 26px;border-radius:var(--bf-r-lg);background:radial-gradient(120% 80% at 50% 0%,rgba(255,77,109,.15),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%),var(--bf-ink-2);border:1px solid var(--bf-line);box-shadow:var(--bf-shadow-card)}
.bf-count::after{content:"";position:absolute;top:-1px;inset-inline-start:26px;width:40px;height:3px;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.bf-count__pict{position:absolute;top:calc(var(--bf-ico-3) / -2);left:50%;width:var(--bf-ico-3);height:var(--bf-ico-3);translate:-50% 0;color:var(--bf-red)}
.bf-count__cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bf-count__cell{--bf-acc:var(--bf-cyan);position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 6px 16px;border-radius:var(--bf-r-md);background:linear-gradient(180deg,color-mix(in srgb,var(--bf-acc) 16%,transparent),transparent 75%),var(--bf-ink-1);border:1px solid color-mix(in srgb,var(--bf-acc) 42%,transparent)}
.bf-count__cell::after{content:"";position:absolute;top:-1px;inset-inline-start:14px;width:28px;height:3px;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.bf-count__num{display:block;min-height:1em;font:700 70px/1 var(--bf-f-disp);letter-spacing:-.01em;color:var(--bf-text);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--bf-acc) 60%,transparent));direction:ltr;unicode-bidi:isolate}
.bf-count__num .bf-odo__strip>span{text-align:center}
:root:lang(ar) .bf-count__num{letter-spacing:0}
.bf-count__lab{font:600 14px/1.2 var(--bf-f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--bf-text-2)}
:root:lang(ar) .bf-count__lab{letter-spacing:0;font-size:15px}
.bf-count__sub{margin-top:20px;font-size:15.5px;line-height:1.55;color:var(--bf-text-2);text-align:center;text-wrap:balance}
:root:lang(ar) .bf-count__sub{font-size:16px;line-height:1.75}
.bf-count__sub b{color:var(--bf-gold);font-weight:700}
.bf-count__open{display:none;font:600 26px/1.3 var(--bf-f-disp);color:var(--bf-text);text-align:center;text-wrap:balance}
:root:lang(ar) .bf-count__open{line-height:1.6}
.bf-season-open .bf-count__cells,.bf-season-open .bf-count__sub{display:none}
.bf-season-open .bf-count__open{display:block}
.bf-season-open .bf-count{padding-block:78px 52px;background:radial-gradient(120% 80% at 50% 0%,rgba(255,215,0,.14),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%),var(--bf-ink-2)}
.bf-season-open .bf-count::after{background:var(--bf-gold)}
/* Frise d'étapes à gros numéros : hexagone du registre, rail de crans en biais (motif de la jauge) ; verticale au téléphone */
.bf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--bf-gap);row-gap:28px}
.bf-step{--bf-acc:var(--bf-cyan);position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"n rail" "t t" "d d";column-gap:10px;align-content:start;align-items:center}
.bf-step__n{grid-area:n;position:relative;display:grid;place-items:center;width:56px;height:62px;filter:drop-shadow(0 6px 16px color-mix(in srgb,var(--bf-acc) 45%,transparent))}
.bf-step__n::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:radial-gradient(100% 100% at 50% 42%,var(--bf-acc) 0 58%,color-mix(in srgb,var(--bf-acc) 66%,var(--bf-ink-0)) 100%)}
.bf-step__n b{position:relative;font:700 27px/1 var(--bf-f-disp);color:var(--bf-on-acc)}
.bf-step__rail{grid-area:rail;display:flex;align-items:center;justify-content:space-between;height:16px;margin-inline-end:calc(var(--bf-gap) * -1 - 4px);padding-inline:6px 10px}
.bf-step__rail i{display:block;flex:0 0 6px;height:14px;border-radius:1px;background:var(--bf-acc);opacity:calc(1 - var(--bf-k,0) * .065);box-shadow:0 0 8px color-mix(in srgb,var(--bf-acc) 55%,transparent);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)));transform-origin:50% 100%;transition:scale var(--bf-t-state) var(--bf-ease-spring) calc(var(--bf-i,0) * var(--bf-stagger) + (280ms + var(--bf-k,0) * 28ms) * (1 - var(--bf-rm)))}
.bf-step__title{grid-area:t;margin-top:20px;font:600 var(--bf-fs-tile)/1.25 var(--bf-f-disp);color:var(--bf-text);text-wrap:balance}
.bf-step__desc{grid-area:d;margin-top:8px;font-size:15px;line-height:1.55;color:var(--bf-text-2);text-wrap:pretty}
:root:lang(ar) .bf-step__title{line-height:1.4}
:root:lang(ar) .bf-step__desc{font-size:16px;line-height:1.7}
/* FAQ : titre au début, questions sur le côté à l'ordinateur (4 / 8) */
.bf-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:52px;align-items:start}
.bf-faq>.bf-sh{margin-bottom:0}
/* Appel final commun : pictogramme, rappel, les deux boutiques (rôles du lot 0 dans le HTML) */
.bf-final{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:32px;padding:30px 36px;border-radius:var(--bf-r-lg);background:radial-gradient(60% 160% at 0% 50%,color-mix(in srgb,var(--bf-acc) 14%,transparent),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--bf-ink-2);border:1px solid var(--bf-line)}
:root[dir="rtl"] .bf-final{background:radial-gradient(60% 160% at 100% 50%,color-mix(in srgb,var(--bf-acc) 14%,transparent),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--bf-ink-2)}
.bf-final::after{content:"";position:absolute;top:-1px;inset-inline-start:36px;width:40px;height:3px;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.bf-final__pict{width:var(--bf-ico-3);height:var(--bf-ico-3);color:var(--bf-gold)}
.bf-final__under{font-size:var(--bf-fs-lead-1);line-height:1.55;color:var(--bf-text-2);max-width:42ch;text-wrap:pretty}
:root:lang(ar) .bf-final__under{line-height:1.8}
.bf-final__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
/* Classement « final » (maquette Prono du lot 5) : page Prono et section Prono de l'accueil ; balisage : plan, § 2.12 */
.bf-board{--bf-acc:var(--bf-gold);position:relative;isolation:isolate;padding:56px 22px 22px;border-radius:var(--bf-r-lg);background:radial-gradient(120% 80% at 50% 0%,rgba(255,215,0,.13),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%),var(--bf-ink-2);border:1px solid var(--bf-line);box-shadow:var(--bf-shadow-card)}
.bf-board::after{content:"";position:absolute;top:-1px;inset-inline-start:26px;width:40px;height:3px;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.bf-board__pict{position:absolute;top:calc(var(--bf-ico-3) / -2);left:50%;width:var(--bf-ico-3);height:var(--bf-ico-3);translate:-50% 0;color:var(--bf-gold)}
.bf-board__pitch{position:absolute;inset:14px;z-index:-1;width:calc(100% - 28px);height:calc(100% - 28px);color:rgba(244,241,255,.07);pointer-events:none}
.bf-board__title{margin:0 0 18px;text-align:center;font:600 14px/1.3 var(--bf-f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--bf-text-2)}
:root:lang(ar) .bf-board__title{letter-spacing:0;font-size:15px}
.bf-board__rows{display:grid;gap:12px}
.bf-board__row{--bf-acc:var(--bf-gold);--bf-rank:var(--bf-gold);position:relative;isolation:isolate;display:grid;grid-template-columns:34px 40px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:11px 14px;border-radius:var(--bf-r-md);background:linear-gradient(90deg,color-mix(in srgb,var(--bf-acc) 13%,transparent),transparent 72%),var(--bf-ink-1);border:1px solid color-mix(in srgb,var(--bf-acc) 34%,transparent)}
/* argent, bronze ; --bf-i : rang, qui décale l'entrée en CSS seul */
.bf-board__row:nth-child(2){--bf-acc:var(--bf-cyan);--bf-rank:#C8D2E0;--bf-i:1}
.bf-board__row:nth-child(3){--bf-acc:var(--bf-violet-t);--bf-rank:#D08A4A;--bf-i:2}
:root[dir="rtl"] .bf-board__row{background:linear-gradient(-90deg,color-mix(in srgb,var(--bf-acc) 13%,transparent),transparent 72%),var(--bf-ink-1)}
.bf-board__pos{position:relative;display:grid;place-items:center;width:34px;height:38px;font:700 18px/1 var(--bf-f-disp);color:var(--bf-on-acc)}
.bf-board__pos::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--bf-rank)}
.bf-board__ava{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:700 17px/1 var(--bf-f-disp);color:var(--bf-on-acc);background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--bf-acc) 72%,#fff),var(--bf-acc) 62%);box-shadow:0 0 0 2px var(--bf-ink-1),0 0 16px -2px color-mix(in srgb,var(--bf-acc) 70%,transparent)}
.bf-board__crown{position:absolute;top:-19px;left:50%;width:24px;height:24px;translate:-50% 0;color:var(--bf-gold)}
.bf-meter.bf-board__meter{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;height:20px;margin-top:0}
.bf-board__pts{display:inline-flex;align-items:baseline;gap:5px;font:700 18px/1 var(--bf-f-disp);color:var(--bf-text);white-space:nowrap;unicode-bidi:isolate}
.bf-board__unit{font:600 13px/1 var(--bf-f-text);color:var(--bf-text-2)}

/* Pages vidéo (maquettes Événements et Qui paie du lot 5) : haut de page vidéo (titre et chapeau centrés sur le lecteur, colonne du
   lecteur jamais plus étroite que lui ; en une colonne, la vidéo juste après le titre ; le lecteur .bfv reste dans chaque page),
   appel final titré, encadré, phrase de clôture, raisons en 2 × 2 sans rail, pictogrammes allumés un à un */
.bf-hero--video{grid-template-columns:minmax(0,7fr) minmax(min-content,5fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". vid" "head vid" "body vid" ". vid";align-items:start;row-gap:0}
.bf-hero--video::before{background:radial-gradient(520px 560px at 75% 44%,rgba(48,214,200,.2),transparent 70%),radial-gradient(680px 560px at 18% 26%,rgba(141,91,255,.24),transparent 70%)}
:root[dir="rtl"] .bf-hero--video::before{background:radial-gradient(520px 560px at 25% 44%,rgba(48,214,200,.2),transparent 70%),radial-gradient(680px 560px at 82% 26%,rgba(141,91,255,.24),transparent 70%)}
.bf-hero__head,.bf-hero__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.bf-hero__head{grid-area:head}
.bf-hero__body{grid-area:body}
.bf-hero__vid{grid-area:vid;justify-self:center;align-self:center}
.bf-final--title{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pict text cta" ". note note";row-gap:22px;padding:36px 40px 30px}
.bf-final--title .bf-final__pict{grid-area:pict;align-self:start}
.bf-final__text{grid-area:text;display:grid;gap:12px;min-width:0}
.bf-final--title .bf-final__cta{grid-area:cta}
.bf-final__title{font:700 clamp(30px,2.9vw,40px)/1.08 var(--bf-f-disp);letter-spacing:-.015em;color:var(--bf-text);text-wrap:balance;max-width:22ch}
:root:lang(ar) .bf-final__title{letter-spacing:0;line-height:1.35}
.bf-final__note{grid-area:note;padding-top:18px;border-top:1px solid var(--bf-line);font-size:var(--bf-fs-note);line-height:1.55;color:var(--bf-text-3);text-wrap:pretty}
.bf-callout{--bf-acc:var(--bf-cyan);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;padding:22px 26px;border-radius:var(--bf-r-lg);background:radial-gradient(70% 140% at 0% 0%,color-mix(in srgb,var(--bf-acc) 13%,transparent),transparent 70%),var(--bf-ink-2);border:1px solid color-mix(in srgb,var(--bf-acc) 45%,transparent)}
:root[dir="rtl"] .bf-callout{background:radial-gradient(70% 140% at 100% 0%,color-mix(in srgb,var(--bf-acc) 13%,transparent),transparent 70%),var(--bf-ink-2)}
.bf-callout p{font-size:var(--bf-fs-lead-1);line-height:1.6;color:var(--bf-text);text-wrap:pretty}
:root:lang(ar) .bf-callout p{line-height:1.8}
.bf-callout b{color:var(--bf-acc-t,var(--bf-acc));font-weight:700}
.bf-close{display:flex;gap:14px;align-items:flex-start;margin-top:44px;max-width:60ch;font:600 22px/1.4 var(--bf-f-disp);color:var(--bf-text);text-wrap:pretty}
.bf-close::before{content:"";flex:none;width:9px;height:1.15em;margin-top:.12em;background:var(--bf-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
:root:lang(ar) .bf-close{line-height:1.7}
.bf-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bf-gap)}
.bf-reason{--bf-acc:var(--bf-cyan);position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"n t" "n d";column-gap:22px;row-gap:8px;align-content:start;padding:28px 30px 30px;border-radius:var(--bf-r-lg);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 55%),var(--bf-ink-2);border:1px solid var(--bf-line)}
.bf-reason .bf-step__n{align-self:start}
.bf-reason__title{grid-area:t;align-self:end;font:600 var(--bf-fs-tile)/1.25 var(--bf-f-disp);color:var(--bf-text);text-wrap:balance}
.bf-reason__desc{grid-area:d;font-size:15.5px;line-height:1.6;color:var(--bf-text-2);text-wrap:pretty}
:root:lang(ar) .bf-reason__title{line-height:1.45}
:root:lang(ar) .bf-reason__desc{font-size:16.5px;line-height:1.75}
.bf-picts{display:flex;flex-wrap:wrap;gap:10px}
.bf-picts .bf-pict{width:40px;height:40px;transition:scale var(--bf-t-state) var(--bf-ease-spring) calc((200ms + var(--bf-k,0) * 70ms) * (1 - var(--bf-rm)))}
.bf-picts .bf-pict:nth-child(2){--bf-k:1}.bf-picts .bf-pict:nth-child(3){--bf-k:2}.bf-picts .bf-pict:nth-child(4){--bf-k:3}.bf-picts .bf-pict:nth-child(5){--bf-k:4}
.bf-armed:not(.bf-in) .bf-picts .bf-pict{scale:var(--bf-rm)}

/* Texte masqué mais lu ; lien d'évitement (maquette du lot 3, barre-telephone.html : hors de l'écran jusqu'au premier Tab,
   au-dessus de la barre) */
.bf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bf-skip{position:absolute;top:12px;inset-inline-start:12px;z-index:40;padding:13px 16px;border-radius:var(--bf-r-xs);background:var(--bf-text);color:var(--bf-ink-0);font:700 15px/1.2 var(--bf-f-text);text-decoration:none;translate:0 -220%;transition:translate var(--bf-t-state) var(--bf-ease)}
.bf-skip:focus{translate:0 0}
.bf-skip:focus-visible{outline:3px solid var(--bf-cyan);outline-offset:3px}

/* ===== 6. En-tête et pied de page (jamais dans .nav) ===== */
/* .lang-btn : règles injectées par i18n.js après cette feuille, remises à la mesure de la maquette ; états à 0,3,0 */
.bf-hdr{position:relative;z-index:3;display:flex;align-items:center;gap:20px;max-width:1280px;margin-inline:auto;padding:16px 20px}
.bf-hdr__brand{display:flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;text-decoration:none;font:700 20px/1 var(--bf-f-disp);color:var(--bf-text);border-radius:var(--bf-r-xs)}
.bf-hdr__brand img{display:block;width:30px;height:30px;border-radius:9px}
.bf-hdr__back{margin-inline:20px auto;padding:14.5px 6px;border-radius:8px;text-decoration:none;font:500 15px/1 var(--bf-f-text);color:var(--bf-text-2)} /* 44 px de cible (maquette : 12 px, 39 px) */
.bf-hdr .lang-switcher{display:flex;gap:4px;margin:0}
.bf-hdr .lang-btn{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:var(--bf-r-xs);background:none;text-decoration:none;font:600 13px/1 var(--bf-f-text);letter-spacing:normal;color:var(--bf-text-2);box-shadow:inset 0 0 0 1px var(--bf-outline);transition:none}
.bf-hdr .lang-btn:hover{color:var(--bf-text-2);background:none}
.bf-hdr .lang-btn.active{color:var(--bf-cyan);background:rgba(48,214,200,.12);box-shadow:inset 0 0 0 1px rgba(48,214,200,.6)}
/* Pied de page commun des pages filles (maquette Santa du lot 5) : marque, accroche et retour à l'accueil, Découvrir, Légal et
   contact, Suivez-nous, copyright ; le lien de la page en cours porte aria-current */
.bf-ftr{background:var(--bf-ink-0);border-top:1px solid var(--bf-line)}
.bf-ftr__in{max-width:var(--bf-wrap);margin-inline:auto;padding:56px var(--bf-gutter) 28px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.35fr) minmax(0,1fr) minmax(0,.8fr);gap:28px 40px;align-items:start}
.bf-ftr__brand{display:grid;justify-items:start;gap:8px}
.bf-ftr__logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:700 20px/1 var(--bf-f-disp);color:var(--bf-text)}
.bf-ftr__logo img{width:30px;height:30px;border-radius:9px}
.bf-ftr__tag{font-size:14px;line-height:1.55;color:var(--bf-text-3);max-width:34ch}
.bf-ftr__h{margin-bottom:4px;font:600 14px/1.3 var(--bf-f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--bf-text)}
:root:lang(ar) .bf-ftr__h{letter-spacing:0}
.bf-ftr__link{display:inline-flex;align-items:center;min-height:44px;padding-block:7px;font-size:15px;line-height:1.35;color:var(--bf-text-2);text-decoration:none}
.bf-ftr__link[aria-current]{color:var(--bf-cyan)}
.bf-ftr__soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.bf-ftr__soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--bf-r-xs);color:var(--bf-text-2);box-shadow:inset 0 0 0 1px var(--bf-outline)}
.bf-ftr__soc svg{width:20px;height:20px}
.bf-ftr__bas{grid-column:1 / -1;padding-top:18px;border-top:1px solid var(--bf-line);font-size:14px;color:var(--bf-text-3)}

/* ===== 7. Motion : bf-site.js arme (bf-armed) un groupe .bf-rvg sous le pli, puis bf-in à son arrivée ===== */
/* Armement sans fondu : bf-tr0, posée avec bf-armed puis retirée deux images plus tard (0,3,0 : devant toutes les transitions) */
:root .bf-rvg.bf-tr0,:root .bf-rvg.bf-tr0 *,:root .bf-rvg.bf-tr0 *::before,:root .bf-rvg.bf-tr0 *::after{transition:none}
.bf-rv{--bf-dl:calc(var(--bf-i,0) * var(--bf-stagger));transition:opacity var(--bf-t-enter) var(--bf-ease) var(--bf-dl),translate var(--bf-t-enter) var(--bf-ease) var(--bf-dl)}
.bf-armed:not(.bf-in) .bf-rv{opacity:var(--bf-rm);translate:0 var(--bf-d-text)}
.bf-armed:not(.bf-in) .bf-rv--card{translate:0 var(--bf-d-card)}
.bf-armed:not(.bf-in) .bf-chip::before{transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir))) scaleX(var(--bf-rm))}
.bf-armed:not(.bf-in) .bf-chip>span{opacity:var(--bf-rm)}
.bf-armed:not(.bf-in) :is(.bf-sh__mark i,.bf-meter i,.bf-step__rail i){scale:1 var(--bf-rm)}
.bf-sh .bf-sh__sub{--bf-dl:calc(220ms * (1 - var(--bf-rm)))}
/* Titres mot à mot */
.bf-ws{display:inline}
.bf-w{display:inline-block;--bf-wd:calc(var(--bf-w0,0ms) + var(--bf-wi,0) * var(--bf-stagger-word));transition:opacity var(--bf-t-enter) var(--bf-ease) var(--bf-wd),translate var(--bf-t-enter) var(--bf-ease) var(--bf-wd)}
.bf-sh__title{--bf-w0:calc(60ms * (1 - var(--bf-rm)))}
.bf-armed:not(.bf-in) .bf-w{opacity:var(--bf-rm);translate:0 calc(var(--bf-d-text) * 1.25)}
/* Compteur */
.bf-odo{display:inline-flex;direction:ltr;unicode-bidi:isolate}
.bf-odo__win{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.bf-odo__strip{display:flex;flex-direction:column;translate:0 calc(var(--bf-to) * -1em);transition:translate var(--bf-t-sign) var(--bf-ease) calc(var(--bf-i,0) * var(--bf-stagger) + 120ms * (1 - var(--bf-rm)))}
.bf-odo__strip>span{display:block;height:1em;line-height:1}
.bf-armed:not(.bf-in) .bf-odo__strip{translate:0 calc(var(--bf-to) * -1em * var(--bf-rm))}
/* Donne : armé = paquet face cachée ; .bf-deal repère les positions du paquet (offsetLeft) */
.bf-deal{position:relative}
.bf-deal.bf-armed:not(.bf-in) .bf-deal__item{translate:calc(var(--bf-x0,0px) * (1 - var(--bf-rm))) calc(var(--bf-y0,0px) * (1 - var(--bf-rm)));rotate:calc(var(--bf-r0,0deg) * (1 - var(--bf-rm)));z-index:calc(10 - var(--bf-i,0))}
.bf-deal.bf-armed:not(.bf-in) .bf-deal__flip{rotate:y calc(180deg * (1 - var(--bf-rm)))}
.bf-dealing .bf-deal__item{z-index:calc(10 - var(--bf-i,0));transition:translate var(--bf-t-enter) var(--bf-ease) calc(var(--bf-i,0) * var(--bf-stagger)),rotate var(--bf-t-enter) var(--bf-ease-spring) calc(var(--bf-i,0) * var(--bf-stagger))}
.bf-dealing .bf-deal__flip{transition:rotate calc(var(--bf-t-enter) * .85) var(--bf-ease) calc(var(--bf-i,0) * var(--bf-stagger) + 140ms * (1 - var(--bf-rm)))}
/* Reflet de la coupe, quand l'en-tête arrive */
.bf-sec:has(.bf-sh.bf-in) .bf-sec__glint{animation:bf-glint var(--bf-t-sign) var(--bf-ease-reveal) both}
@keyframes bf-glint{0%{stroke-dashoffset:180px;opacity:1}85%{opacity:1}100%{stroke-dashoffset:calc(var(--bf-len,1500px) * -1);opacity:0}}
/* Puce du haut de page des pages filles : s'ouvre comme une lame, son texte la suit (titre, chapeau, boutons et objet immobiles) */
@keyframes bf-blade{from{transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir))) scaleX(var(--bf-rm))}}
@keyframes bf-fade{from{opacity:var(--bf-rm)}}
.bf-hero__chip::before{animation:bf-blade var(--bf-t-enter) var(--bf-ease-reveal) both}
.bf-hero__chip>span{animation:bf-fade var(--bf-t-state) var(--bf-ease) calc(160ms * (1 - var(--bf-rm))) both}
/* Classement non armé (premier écran) : crans allumés une fois en CSS seul ; armé, l'entrée de la jauge */
@keyframes bf-notch{from{scale:1 var(--bf-rm)}}
.bf-board:not(.bf-armed) .bf-board__meter i{animation:bf-notch var(--bf-t-state) var(--bf-ease-spring) calc((340ms + var(--bf-i,0) * 110ms + var(--bf-k,0) * 22ms) * (1 - var(--bf-rm))) both}

/* ===== 8. Une colonne (≤ 999 px) et téléphone (≤ 719 px) ===== */
@media (max-width: 999px){
  .bf-sh--split{grid-template-columns:minmax(0,1fr)}
  .bf-sh--split .bf-sh__sub{padding-bottom:0}
  .bf-hero{grid-template-columns:minmax(0,1fr);gap:36px}
  .bf-cards--3{grid-template-columns:minmax(0,1fr)}
  .bf-faq{grid-template-columns:minmax(0,1fr)}
  .bf-faq>.bf-sh{margin-bottom:var(--bf-sh-mb)}
  .bf-hero--video{grid-template-rows:auto;grid-template-areas:"head" "vid" "body";row-gap:22px}
  .bf-hero--video .bf-hero__lead{margin-top:0}
  .bf-final--title{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pict text" ". cta" ". note"}
  .bf-final--title .bf-final__cta{justify-content:flex-start}
}
@media (max-width: 719px){
  .bf-sec--follow{padding-block:calc(24px + var(--bf-cut)) 72px}
  .bf-sec--follow .bf-sh{margin-bottom:36px}
  .bf-note{margin-top:16px;text-align:start}
  /* liste qui pose un retrait : précédée de :root, elle passe devant la remise à zéro des listes (§ 3) */
  :root .bf-snap{display:flex;gap:14px;margin-inline:calc(var(--bf-gutter) * -1);padding:6px var(--bf-gutter) 16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bf-gutter);scrollbar-width:none}
  .bf-snap::-webkit-scrollbar{display:none}
  .bf-snap::after{content:"";flex:0 0 6px}
  .bf-snap>*{scroll-snap-align:start}
  .bf-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
  .bf-dots i{display:block;width:22px;height:4px;background:rgba(244,241,255,.22);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)));transition:background-color var(--bf-t-state) var(--bf-ease)}
  .bf-dots i.bf-on{background:var(--bf-cyan)}
  .bf-card{padding:24px 22px 26px}
  .bf-card::after{inset-inline-start:22px}
  .bf-snap>.bf-card{flex:0 0 298px}
  .bf-tiles{grid-template-columns:minmax(0,1fr);gap:5px}
  .bf-tile,.bf-tile--lead{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:6px;padding:13px 12px 14px}
  .bf-tile__pict,.bf-tile--lead .bf-tile__pict{grid-row:1;width:34px;height:34px}
  .bf-tile__title,.bf-tile--lead .bf-tile__title{grid-column:2;grid-row:1;align-self:center;margin:0;padding-inline-end:38px;font-size:var(--bf-fs-tile)}
  .bf-tile__desc,.bf-tile--lead .bf-tile__desc{grid-column:1/-1;grid-row:2;font-size:var(--bf-fs-desc);max-width:none}
  .bf-tile::after{inset-inline-start:12px;width:28px}
  .bf-tile__go{top:14px;inset-inline-end:12px;width:28px;height:28px}
  .bf-tile:active{transform:scale(.985)}
  .bf-sel:active::before{opacity:1;scale:1}
  /* en-tête : de 370 à 320 px, marges, écarts et marges du bouton se resserrent (sans point de rupture : clamp) pour que tout tienne
     jusqu'à 320 px, « Télécharger » compris (relecture du 06/10 : coupé sous 341 px en français) ; plus étroit, il passe à la ligne */
  .bf-hdr{flex-wrap:wrap;padding:14px clamp(12px,calc(16vw - 39.2px),20px);gap:10px clamp(6px,calc(8vw - 19.6px),10px)}
  .bf-hdr__brand span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bf-hdr__back{display:none}
  .bf-hdr .lang-switcher{margin-inline-start:auto;gap:clamp(2px,calc(4vw - 10.8px),4px)}
  .bf-hdr .bf-btn{padding-inline:clamp(10px,calc(16vw - 41.2px),18px)}
  .bf-store{gap:10px;padding:7px 14px 7px 12px}
  /* pages filles (lot 5) : boutons avant le compte à rebours, cartes empilées, frise verticale, appel final centré, pied en deux colonnes */
  .bf-hero{padding:28px 20px 64px}
  .bf-hero::before{background:radial-gradient(420px 460px at 50% 84%,var(--bf-glow,rgba(255,77,109,.17)),transparent 70%),radial-gradient(560px 520px at 18% 14%,rgba(141,91,255,.24),transparent 70%)}
  :root[dir="rtl"] .bf-hero::before{background:radial-gradient(420px 460px at 50% 84%,var(--bf-glow,rgba(255,77,109,.17)),transparent 70%),radial-gradient(560px 520px at 82% 14%,rgba(141,91,255,.24),transparent 70%)}
  .bf-hero--video::before{background:radial-gradient(420px 520px at 50% 62%,rgba(48,214,200,.2),transparent 70%),radial-gradient(560px 460px at 18% 10%,rgba(141,91,255,.24),transparent 70%)}
  :root[dir="rtl"] .bf-hero--video::before{background:radial-gradient(420px 520px at 50% 62%,rgba(48,214,200,.2),transparent 70%),radial-gradient(560px 460px at 82% 10%,rgba(141,91,255,.24),transparent 70%)}
  .bf-hero__vis{max-width:none;margin-top:40px}
  .bf-count{padding:52px 14px 20px}
  .bf-count__cells{gap:8px}
  .bf-count__cell{padding:16px 4px 12px;gap:8px}
  .bf-count__num{font-size:48px}
  .bf-count__lab{font-size:13px}
  .bf-count__sub{margin-top:16px;font-size:15px}
  .bf-count__open{font-size:21px}
  .bf-season-open .bf-count{padding-block:64px 36px}
  .bf-board{padding:50px 14px 16px}
  .bf-board__row{grid-template-columns:30px 36px minmax(0,1fr) auto;column-gap:10px;padding:10px 12px}
  .bf-board__pos{width:30px;height:34px;font-size:16px}
  .bf-board__ava{width:36px;height:36px;font-size:15px}
  .bf-board__crown{top:-17px;width:22px;height:22px}
  .bf-meter.bf-board__meter{gap:3px;height:18px}
  .bf-board__pts{font-size:16px}
  .bf-cards{gap:14px;grid-template-columns:minmax(0,1fr)}
  .bf-steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .bf-step{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"n t" "rail d";column-gap:16px;padding-bottom:24px}
  .bf-step:last-child{padding-bottom:0}
  .bf-step__title{margin-top:0;align-self:center}
  .bf-step__rail{flex-direction:column;width:56px;height:auto;align-self:stretch;margin:10px 0 -24px;padding:2px 0 12px}
  .bf-step__rail i{flex:0 0 4px;width:14px;height:4px;transform:skewY(calc(var(--bf-slant) * var(--bf-dir)))}
  .bf-armed:not(.bf-in) .bf-step__rail i{scale:var(--bf-rm) 1}
  .bf-final{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:18px;padding:30px 22px 28px;text-align:center}
  .bf-final::after{inset-inline-start:22px}
  .bf-final__cta{justify-content:center}
  .bf-final--title{grid-template-columns:minmax(0,1fr);grid-template-areas:"pict" "text" "cta" "note";padding:32px 22px 26px}
  .bf-final--title .bf-final__pict{align-self:center}
  .bf-final--title .bf-final__cta{justify-content:center}
  .bf-final__title{font-size:30px;margin-inline:auto}
  .bf-final__note{padding-top:16px}
  .bf-callout{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:20px}
  .bf-close{margin-top:36px;font-size:19px}
  .bf-reasons{grid-template-columns:minmax(0,1fr);gap:14px}
  .bf-reason{column-gap:16px;padding:22px 20px 24px}
  .bf-picts{gap:8px}
  .bf-picts .bf-pict{width:34px;height:34px}
  .bf-ftr__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:44px var(--bf-gutter) 24px;gap:24px 20px}
  .bf-ftr__brand,.bf-ftr__col--wide{grid-column:1 / -1}
}
/* pliable fermé (sous 318 px) : la carte d'une rangée tient dans l'écran, marges comprises (lot 8) */
@media (max-width: 317px){:root .bf-snap>*{max-width:100%}}

/* ===== 9. Survol : souris seulement, sur ce qui se clique ===== */
@media (hover: hover) and (pointer: fine) and (min-width: 720px){
  .bf-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--bf-acc) 60%,transparent)}
  .bf-tile:hover .bf-tile__go{translate:calc(3px * var(--bf-dir)) -3px}
  .bf-sel:hover::before{opacity:1;scale:1}
  .bf-btn--push:hover{filter:brightness(1.07);box-shadow:var(--bf-shadow-push-hi)}
  .bf-btn--sm.bf-btn--push:hover:not(:active){box-shadow:0 4px 0 var(--bf-cyan-deep)}
  .bf-btn--push:active{translate:0 4px;box-shadow:var(--bf-shadow-push-down)}
  .bf-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--bf-cyan);background:rgba(48,214,200,.08)}
  .bf-store:hover{box-shadow:inset 0 0 0 1.5px var(--bf-cyan);translate:0 -2px}
  .bf-lnk:hover{text-decoration-color:var(--bf-cyan);color:#7FF0E6}
  .bf-hdr__back:hover,.bf-hdr .lang-btn:hover{color:var(--bf-text)}
  .bf-acc__q:hover{background:rgba(255,255,255,.03)}
  .bf-ftr__link:hover{color:var(--bf-text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
  .bf-ftr__soc a:hover{color:var(--bf-text);box-shadow:inset 0 0 0 1px var(--bf-cyan)}
}