/* =====================================================================
   NOYAU COMMUN — « Apple design » — identique pour les 6 boutons
   • Réponse : le bouton s'enfonce dès l'appui (pointerdown), pas au relâchement ; annulable en glissant hors du bouton.
   • Ressorts : amortissement critique, tout part de la valeur affichée et garde sa vitesse → interruptible à tout instant.
   • Matières : pastilles en verre (backdrop-filter), liseré fin éclairé par le haut, ombre de profondeur au lieu du néon.
   • Typographie : police système (SF Pro sur Apple), approche légèrement négative, casse de phrase.
   • Retenue : ni scanlines, ni viseur, ni poussière, ni onde « Material ». La caméra suit le curseur ; rien ne se
     balance tout seul. Le clic s'épanouit depuis le point touché.
   • Un seul bouton vivant : au repos, aucune animation ; au survol, les autres boutons s'estompent (.is-dimmed).
   • Clic → la carte devient la page (.bd-page, View Transitions) — voir la fin de ce noyau.
   • Accessibilité : prefers-reduced-motion (fondus), prefers-reduced-transparency, prefers-contrast.
   • Dimensions : largeur du conteneur (max 420 px), ratio 297,5 / 57, tout en unités cqw. Le cadre découpe tout.
   Variables à définir par bouton : --accent --accent-rgb --icon --glow --glow-rgb --deep --ink --fx-x --fx-y
   Variables pilotées par le JS   : --pop --press --px --py --kick --flash --gx --gy --camx --camz --rotx --roty
   ===================================================================== */
.bd-btn-wrap{width:min(100%,420px);container-type:inline-size;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bd-btn-wrap *{box-sizing:border-box}

.bd-btn{
  --px:0;--py:0;--pop:0;--press:0;--gx:50%;--gy:50%;--kick:0;--flash:0;--camx:0;--camz:0;--rotx:0;--roty:0;
  position:relative;display:block;aspect-ratio:297.5/57;border-radius:5.6cqw;
  color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transform:scale(calc(1 + var(--pop)*.012 - var(--press)*.03));
  /* profondeur : ombre portée qui s'allonge quand le bouton se soulève + lumière émise discrète */
  box-shadow:0 calc(.6cqw + var(--pop)*1.2cqw) calc(2cqw + var(--pop)*3cqw) -.6cqw rgba(0,0,0,.7),
             0 0 calc(2.2cqw + var(--pop)*2.6cqw) rgba(var(--accent-rgb),calc(.24 + var(--pop)*.22))}
.bd-btn{transition:filter .45s cubic-bezier(.2,.8,.2,1)}
.bd-btn.is-dimmed{filter:brightness(.6) saturate(.75)}
/* au repos tout est immobile : les animations CSS ne tournent que quand le bouton est vivant */
.bd-btn:not(.is-live) *,.bd-btn:not(.is-live) *::before,.bd-btn:not(.is-live) *::after{animation:none!important}
.bd-btn:focus-visible{outline:max(2px,.6cqw) solid color-mix(in srgb,var(--accent) 75%,#fff);outline-offset:max(3px,.9cqw)}
.bd-btn__body{position:absolute;inset:0;overflow:hidden;border-radius:inherit;isolation:isolate;background:var(--deep)}

/* ---------- Scène 3D (plans à des profondeurs différentes ; la caméra ne bouge que si tu bouges) ---------- */
.bd-stage{position:absolute;inset:0;perspective:90cqw;perspective-origin:var(--fx-x) 45%;overflow:hidden;pointer-events:none}
.bd-drift{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:var(--fx-x) 50%}
.bd-scene{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:var(--fx-x) 50%;
  transform:translate3d(calc(var(--camx)*1cqw),0,calc(var(--camz)*1cqw)) rotateX(calc(var(--rotx)*1deg)) rotateY(calc(var(--roty)*1deg))}
.bd-plane{position:absolute;inset:0;pointer-events:none;transform-origin:var(--fx-x) 45%}
.bd-plane img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.bd-plane--far::before{content:"";position:absolute;inset:-10%;background:var(--bgimg) center/cover no-repeat;filter:blur(7px)}
.bd-plane--pad img{inset:auto;left:-12%;top:-12%;width:124%;height:124%}

/* ---------- Couches de lumière et de matière (créées par le JS) ---------- */
.bd-fx{position:absolute;pointer-events:none}
/* voile de lisibilité derrière l'icône et le titre (comme un « scroll edge effect ») */
.bd-fx-scrim{inset:0;z-index:4;background:linear-gradient(90deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.5) 34%,rgba(0,0,0,.18) 50%,transparent 62%)}
/* reflet spéculaire doux qui suit le curseur */
.bd-fx-spot{inset:0;z-index:3;opacity:var(--pop);mix-blend-mode:screen;
  background:radial-gradient(circle 28cqw at var(--gx) var(--gy),rgba(var(--glow-rgb),.16),transparent 70%)}
.bd-fx-flash{inset:0;z-index:4;opacity:calc(var(--flash)*.22);mix-blend-mode:screen;
  background:radial-gradient(circle at var(--fx-x) var(--fx-y),rgba(255,255,255,.9),rgba(var(--glow-rgb),.5) 40%,transparent 78%)}
/* liseré : hairline teinté, plus clair en haut (la lumière accroche le bord), qui s'intensifie au survol */
.bd-fx-rim{inset:0;z-index:6;border-radius:inherit;padding:max(1px,.32cqw);
  background:linear-gradient(180deg,rgba(255,255,255,calc(.32 + var(--pop)*.28)),rgba(var(--accent-rgb),calc(.5 + var(--pop)*.5)) 40%,rgba(var(--accent-rgb),calc(.3 + var(--pop)*.5)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* clic : la lumière s'épanouit depuis le point touché (pas d'anneaux durs) */
.bd-fx-burst{left:var(--bx,var(--fx-x));top:var(--by,var(--fx-y));width:34cqw;aspect-ratio:1;z-index:3;border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.3);mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(var(--glow-rgb),.32) 45%,transparent)}
.bd-fx-burst.is-on{animation:bdBurst .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes bdBurst{0%{opacity:.85;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.bd-fx-pop{z-index:3;width:.6cqw;height:.6cqw;border-radius:50%;background:#fff;box-shadow:0 0 .9cqw .15cqw var(--glow);
  animation:bdPop .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes bdPop{from{transform:translate(0,0) scale(1);opacity:.9}to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}

/* ---------- Icône, titre, flèche : même gabarit partout, rayons concentriques avec le cadre ---------- */
.bd-btn__icon{position:absolute;z-index:7;left:2.9cqw;top:50%;width:13.4cqw;height:13.4cqw;display:grid;place-items:center;
  border-radius:2.7cqw;color:var(--icon);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(1.8cqw) saturate(180%);backdrop-filter:blur(1.8cqw) saturate(180%);
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(255,255,255,.14),inset 0 max(1px,.25cqw) 0 rgba(255,255,255,.2),0 .8cqw 2cqw rgba(0,0,0,.35);
  transform:translateY(-50%)}
.bd-btn__icon svg{width:58%;height:58%;overflow:visible;filter:drop-shadow(0 0 .8cqw rgba(var(--glow-rgb),.45))}
.bd-btn__title{position:absolute;z-index:7;left:21.2cqw;top:50%;font-weight:600;font-size:var(--title-size,4cqw);line-height:1;white-space:nowrap;
  letter-spacing:-.012em;text-shadow:0 .15cqw .8cqw rgba(0,0,0,.6);transform:translateY(-50%)}
.bd-btn__sub{position:absolute;z-index:7;left:21.2cqw;top:50%;font-weight:500;font-size:2.55cqw;line-height:1;white-space:nowrap;
  letter-spacing:0;opacity:.72;text-shadow:0 .15cqw .8cqw rgba(0,0,0,.6);transform:translateY(calc(-50% + 3cqw))}
.bd-btn__body:has(.bd-btn__sub) .bd-btn__title{transform:translateY(calc(-50% - 1.7cqw))}
.bd-btn__arrow{position:absolute;z-index:7;right:3.4cqw;top:50%;width:12.4cqw;height:12.4cqw;display:grid;place-items:center;border-radius:50%;
  color:color-mix(in srgb,var(--arrow-ink,#fff) calc(var(--pop)*100%),#fff);
  background:color-mix(in srgb,var(--accent) calc(var(--pop)*100%),rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(1.8cqw) saturate(180%);backdrop-filter:blur(1.8cqw) saturate(180%);
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(255,255,255,.14),inset 0 max(1px,.25cqw) 0 rgba(255,255,255,.22),
             0 .8cqw 2cqw rgba(0,0,0,.35),0 0 calc(var(--pop)*2.4cqw) rgba(var(--accent-rgb),.6);
  transform:translate(calc(var(--pop)*.6cqw),-50%)}
/* la flèche pointe vers la destination : elle avance un peu plus au survol */
.bd-btn__arrow svg{width:46%;height:46%;transform:translateX(calc(var(--pop)*.35cqw))}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .bd-btn{transform:none;transition:transform .1s ease-out,box-shadow .25s ease,filter .25s ease}
  .bd-btn:active{transform:scale(.98)}
  .bd-btn__arrow{transition:background-color .25s ease,color .25s ease}
  .bd-btn:is(:hover,:focus-visible) .bd-btn__arrow{background:var(--accent);color:var(--arrow-ink,#fff)}
  .bd-fx-burst,.bd-fx-pop{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .bd-btn__icon,.bd-btn__arrow{-webkit-backdrop-filter:none;backdrop-filter:none}
  .bd-btn__icon{background:rgb(20,20,24)}
  .bd-btn__arrow{background:color-mix(in srgb,var(--accent) calc(var(--pop)*100%),rgb(20,20,24))}
}
@media (prefers-contrast:more){
  .bd-btn__icon{background:#000;box-shadow:inset 0 0 0 2px #fff}
  .bd-btn__arrow{box-shadow:inset 0 0 0 2px #fff}
  .bd-fx-scrim{background:linear-gradient(90deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.6) 45%,transparent 65%)}
}

/* ---------- Page : la carte devient la page (clic) ---------- */
html.bd-page-open{overflow:hidden}
.bd-page.bd-btn-wrap{position:fixed;inset:0;z-index:1000;width:auto;container-type:normal;color:var(--ink);
  background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.2),transparent 62%),var(--deep)}
.bd-page__scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.bd-page__hero{padding:76px 16px 0}
.bd-page__frame.bd-btn-wrap{width:min(100%,1100px);margin:0 auto}
.bd-page__frame .bd-btn{cursor:default;pointer-events:none;transform:none}
.bd-page__frame .bd-btn__arrow{opacity:0}
.bd-page__content{max-width:720px;margin:0 auto;padding:44px 20px 96px;animation:bdRise .55s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes bdRise{from{opacity:0;transform:translateY(18px)}}
.bd-page__title{margin:0;font-size:clamp(2rem,6vw,3.25rem);font-weight:700;line-height:1.05;letter-spacing:-.022em}
.bd-page__lead{margin:.7rem 0 0;font-size:1.125rem;line-height:1.5;opacity:.72}
.bd-page__body{display:grid;gap:14px;margin-top:2.2rem}
.bd-page__card{padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bd-page__card h2{margin:0 0 .35rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--icon)}
.bd-page__card p{margin:0;font-size:.98rem;line-height:1.6;opacity:.78}
.bd-page__close{position:fixed;top:16px;right:16px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  color:#fff;cursor:pointer;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 20px rgba(0,0,0,.35);transition:transform .1s ease-out,background-color .2s ease}
.bd-page__close:hover{background:rgba(255,255,255,.2)}
.bd-page__close:active{transform:scale(.94)}
.bd-page__close:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 75%,#fff);outline-offset:3px}
.bd-page__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.bd-page.is-fading-in{animation:bdFade .25s ease both}
.bd-page.is-fading-out{animation:bdFade .2s ease reverse both}
@keyframes bdFade{from{opacity:0}}
/* la morphose bouton ↔ page : courbe « ressort » sans rebond */
::view-transition-group(bd-hero){animation-duration:.52s;animation-timing-function:cubic-bezier(.2,.85,.25,1)}
::view-transition-old(bd-hero),::view-transition-new(bd-hero){height:100%;animation-duration:.52s}
/* grand écran : l'en-tête porte déjà le titre — le titre texte reste pour les lecteurs d'écran, sans doublon visuel */
@media (min-width:700px){
  .bd-page__title,.bd-page__lead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .bd-page__body{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.bd-page__content{animation:none}}
@media (prefers-reduced-transparency:reduce){.bd-page__close{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(30,30,34)}}
/* ===================== FIN DU NOYAU COMMUN — ci-dessous : ce qui est propre à ce bouton ===================== */

.bd-btn-wrap{--accent:#dfe2ea;--accent-rgb:223,226,234;--icon:#f1f3f8;--glow:#ffffff;--glow-rgb:255,255,255;--deep:#050507;--ink:#fff;--fx-x:76%;--fx-y:50%;--arrow-ink:#000}
.bd-btn{--lines:0;--sv:0;--pw:0}

/* fond : ville de gauche (z = -12cqw, agrandi pour garder la taille d'origine) */
.bd-plane--far{--bgimg:url(assets/bd-bg-HD.webp);transform:translateZ(-12cqw) scale(1.1333);overflow:hidden;background:#050507}
.bd-plane--far .bd-bg{filter:brightness(calc(1 + var(--pop)*.12))}
.bd-flare{position:absolute;width:3.4cqw;height:3.4cqw;margin:-1.7cqw 0 0 -1.7cqw;border-radius:50%;opacity:.55;
  background:radial-gradient(circle,#fff 0 9%,rgba(255,255,255,.55) 14%,transparent 60%);animation:bdFlare var(--d,2.4s) ease-in-out var(--dl,0s) infinite alternate}
.bd-flare::before,.bd-flare::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate(-50%,-50%)}
.bd-flare::before{width:240%;height:max(1px,.18cqw)}
.bd-flare::after{width:max(1px,.18cqw);height:240%;background:linear-gradient(180deg,transparent,#fff,transparent)}
@keyframes bdFlare{from{opacity:.25;transform:scale(.6)}to{opacity:calc(.6 + var(--pop)*.4);transform:scale(1.2)}}

/* les 4 cases : chacune à sa profondeur ; chacune défile VERTICALEMENT (haut → bas) et se « reboucle » par le haut */
.bd-plane--p1{transform:translateZ(6cqw) scale(.9333)}
.bd-plane--p2{transform:translateZ(3cqw) scale(.9667)}
.bd-plane--p3{transform:translateZ(8cqw) scale(.9111)}
.bd-plane--p4{transform:translateZ(5cqw) scale(.9444)}
.bd-panel{--sy:1;--mb:0;--hit:0;position:absolute;inset:0;transform:scaleY(var(--sy));filter:blur(calc(var(--mb)*.22cqw)) brightness(calc(1 + var(--hit)*.5))}
.bd-plane--p1 .bd-panel{transform-origin:65.4% 38.9%}
.bd-plane--p2 .bd-panel{transform-origin:87.5% 14.9%}
.bd-plane--p3 .bd-panel{transform-origin:73.7% 82.2%}
.bd-plane--p4 .bd-panel{transform-origin:92.1% 70.2%}
/* une « page » = une image recadrée à la case ; les pages d'une case forment une bande verticale (comme un journal) que le JS fait défiler */
.bd-page{--ty:0;position:absolute;inset:auto;max-width:none;transform:translateY(calc(var(--ty)*1cqw));visibility:hidden;will-change:transform}
.bd-page:first-child{visibility:visible}

/* ---------- Effets BD ---------- */
.bd-fxl{position:absolute;pointer-events:none}
/* trame de points (demi-teinte) */
.bd-halftone{inset:0;z-index:2;opacity:calc(var(--pop)*.2);mix-blend-mode:overlay;
  background:radial-gradient(circle,rgba(0,0,0,.9) 0 28%,transparent 32%) 0 0/1.15cqw 1.15cqw,radial-gradient(circle,rgba(255,255,255,.8) 0 26%,transparent 30%) .57cqw .57cqw/1.15cqw 1.15cqw}
/* lignes de vitesse VERTICALES qui tombent pendant le défilement */
.bd-speed{inset:0 0 0 48%;z-index:2;opacity:calc(var(--sv)*.8);mix-blend-mode:screen;
  background:repeating-linear-gradient(90deg,transparent 0 1.1cqw,rgba(255,255,255,.6) 1.1cqw 1.25cqw,transparent 1.25cqw 3.1cqw,rgba(255,255,255,.35) 3.1cqw 3.2cqw,transparent 3.2cqw 4.6cqw);
  -webkit-mask-image:linear-gradient(180deg,#000 0 42%,transparent 42% 100%);mask-image:linear-gradient(180deg,#000 0 42%,transparent 42% 100%);
  -webkit-mask-size:100% 6.2cqw;mask-size:100% 6.2cqw;-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
  -webkit-mask-position:0 calc(var(--sy2,0)*1cqw);mask-position:0 calc(var(--sy2,0)*1cqw)}
/* lignes d'action au moment de l'impact */
.bd-rays{inset:-30%;z-index:3;opacity:calc(var(--lines)*.7);mix-blend-mode:screen;
  background:repeating-conic-gradient(from 3deg at 76% 50%,#fff 0 1.6deg,transparent 1.6deg 7deg);
  -webkit-mask-image:radial-gradient(circle 30cqw at 76% 50%,transparent 6%,#000 28%,transparent 100%);mask-image:radial-gradient(circle 30cqw at 76% 50%,transparent 6%,#000 28%,transparent 100%);
  transform:scale(calc(.8 + var(--lines)*.35))}
@media (prefers-reduced-motion:reduce){.bd-flare{animation:none!important}.bd-halftone,.bd-speed,.bd-rays{display:none}}

/* ===================== MODE JOUR + LANGUES (commun aux 6 boutons) =====================
   Mode jour (html[data-theme="light"], activé par la lampe du hero) : carte blanche, la scène s'éclaire et se fond
   dans la lumière à gauche, texte foncé, icône et flèche en verre blanc. Les animations ne changent pas.
   ===================================================================================== */
:root[data-theme="light"] .bd-btn-wrap{--ink:#141a2e}
:root[data-theme="light"] .bd-btn{
  box-shadow:0 calc(.6cqw + var(--pop)*1.2cqw) calc(2.4cqw + var(--pop)*3cqw) -.6cqw rgba(13,19,48,.18),
             0 0 calc(1.6cqw + var(--pop)*2.4cqw) rgba(var(--accent-rgb),calc(.14 + var(--pop)*.18))}
:root[data-theme="light"] .bd-btn.is-dimmed{filter:saturate(.75) opacity(.62)}
:root[data-theme="light"] .bd-btn__body{background:linear-gradient(180deg,#fff,#f4f6fb)}
/* la scène : plus lumineuse, et fondue vers le blanc côté texte */
:root[data-theme="light"] .bd-btn__body:not([data-day]) > :not(.bd-btn__icon,.bd-btn__title,.bd-btn__sub,.bd-btn__arrow,.bd-fx){
  filter:brightness(1.18) saturate(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.5) 50%,#000 68%);mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.5) 50%,#000 68%)}
:root[data-theme="light"] .bd-fx-scrim{background:linear-gradient(90deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.8) 42%,transparent 66%)}
:root[data-theme="light"] .bd-fx-spot{mix-blend-mode:normal;opacity:calc(var(--pop)*.5)}
:root[data-theme="light"] .bd-fx-rim{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(var(--accent-rgb),calc(.35 + var(--pop)*.45)) 40%,rgba(var(--accent-rgb),calc(.25 + var(--pop)*.45)))}
:root[data-theme="light"] .bd-btn__title{color:var(--ink);text-shadow:none}
:root[data-theme="light"] .bd-btn__sub{color:var(--ink);opacity:.62;text-shadow:none}
:root[data-theme="light"] .bd-btn__icon{color:color-mix(in srgb,var(--accent) 78%,#000);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(var(--accent-rgb),.32),0 .6cqw 1.6cqw rgba(13,19,48,.10)}
:root[data-theme="light"] .bd-btn__icon svg{filter:none}
:root[data-theme="light"] .bd-btn__arrow{color:color-mix(in srgb,var(--arrow-ink,#fff) calc(var(--pop)*100%),#141a2e);
  background:color-mix(in srgb,var(--accent) calc(var(--pop)*100%),rgba(255,255,255,.88));
  box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(var(--accent-rgb),.32),0 .6cqw 1.6cqw rgba(13,19,48,.12),0 0 calc(var(--pop)*2.4cqw) rgba(var(--accent-rgb),.45)}
/* la page ouverte au clic, en version jour */
:root[data-theme="light"] .bd-page.bd-btn-wrap{background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.14),transparent 62%),#f4f6fb}
:root[data-theme="light"] .bd-page__card{background:#fff;box-shadow:inset 0 0 0 1px rgba(13,19,48,.08),0 6px 18px rgba(13,19,48,.06)}
:root[data-theme="light"] .bd-page__card h2{color:color-mix(in srgb,var(--accent) 75%,#000)}
:root[data-theme="light"] .bd-page__close{color:#141a2e;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(13,19,48,.1),0 6px 20px rgba(13,19,48,.12)}
@media (prefers-reduced-transparency:reduce){ :root[data-theme="light"] .bd-btn__icon,:root[data-theme="light"] .bd-btn__arrow{background:#fff} }
@media (prefers-contrast:more){ :root[data-theme="light"] .bd-btn__icon,:root[data-theme="light"] .bd-btn__arrow{box-shadow:inset 0 0 0 2px #141a2e} }
/* boutons qui ont leurs images de jour (data-day) : le fond devient blanc, la scène garde ses couleurs */
:root[data-theme="light"] .bd-btn__body[data-day]{background:#fff}
:root[data-theme="light"] .bd-btn__body[data-day] .bd-fx-scrim{background:linear-gradient(90deg,rgba(255,255,255,.9) 0,rgba(255,255,255,.66) 34%,rgba(255,255,255,.2) 50%,transparent 62%)}
:root[data-theme="light"] .bd-btn__body[data-day] .bd-fx-flash,:root[data-theme="light"] .bd-btn__body[data-day] .bd-fx-burst{mix-blend-mode:multiply;opacity:calc(var(--flash)*.12)}
/* arabe : la flèche pointe dans le sens de lecture */
.bd-btn:dir(rtl) .bd-btn__arrow svg{transform:scaleX(-1) translateX(calc(var(--pop)*.35cqw))}
/* bande dessinée, mode jour : couleur « encre » (icône, liseré, flèche au survol) assortie au papier */
:root[data-theme="light"] .bd-btn-wrap{--accent:#1b1f2e;--accent-rgb:27,31,46;--icon:#1b1f2e;--glow:#3a3f52;--glow-rgb:58,63,82;--arrow-ink:#fff}
:root[data-theme="light"] .bd-btn__icon{color:#1b1f2e}
/* bande dessinée : encre noire sur papier ; lignes de vitesse et d'action en encre (multiply) */
:root[data-theme="light"] .bd-plane--far{background:#f6f4ef;--bgimg:url(assets/bd-bg-HD-day.webp)}
:root[data-theme="light"] .bd-speed,:root[data-theme="light"] .bd-rays{mix-blend-mode:multiply;filter:invert(1)}
:root[data-theme="light"] .bd-halftone{mix-blend-mode:multiply;opacity:calc(var(--pop)*.12)}
:root[data-theme="light"] .bd-flare{opacity:.18}