/* bf-demo.css — page commune des huit démos jouables de billfighters.fr (lot 6 ; maquette validée par le PO le 06/10,
   designs/2026-10-site/lots/lot6/demos-jeux.html, sources lots/lot6/outils/lot6.css, parties G et H, et le bloc « le jeu dans
   la page » de lots/lot6/outils/build.js). Chargée après le socle (bf-site.css) et avant le style propre du jeu, qui reste dans
   sa page. Classes dj- ; une règle qui vise le jeu passe par son conteneur .dj-game. Toute durée × (1 − --bf-rm) ; aucune
   animation sans fin autour du jeu ; ?v= = empreinte contrôlée par scripts/site/build-i18n.js.
   1. Base de la page (comme Santa et Prono). 2. La page autour du jeu. 3. Fin de partie, sortie vers l'app.
   4. Le jeu dans la page (décisions 3 et 6). 5. Une colonne, téléphone, visionneuse de l'accueil, téléphone tenu à l'horizontale
   (page et visionneuse), survol. */

/* ===== 1. Base de la page ===== */
*,*::before,*::after{box-sizing:border-box}
/* Repli d'Inter calé sur Arial (repris de Santa et Prono) : moins de sauts à l'arrivée des polices */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT');size-adjust:106.5%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:102%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}
:root:not(:lang(ar)){--bf-f-text:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body{margin:0;background:var(--bf-ink-0);color:var(--bf-text);font:400 16px/1.55 var(--bf-f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* sans sélecteur de langue (les démos restent en français), « Télécharger » reste au bout de l'en-tête du téléphone */
@media (max-width: 719px){.bf-hdr>.bf-btn{margin-inline-start:auto}}

/* ===== 2. La page autour du jeu ===== */
/* Couleur du jeu : --dj-acc (fond, trait, halo), --dj-acc-t (texte : le rouge, l'orange et le violet s'éclaircissent), posées par
   la page sur <main> ; --dj-hdr : hauteur de l'en-tête commun au téléphone (14 px + bouton de 44 px + 14 px) */
.dj-main{--dj-acc:var(--bf-cyan);--dj-acc-t:var(--dj-acc);--dj-vh:100svh;--dj-hdr:72px;position:relative;isolation:isolate;overflow-x:clip}
/* sans svh (iOS < 15.4, Chrome < 108), --dj-vh serait invalide et les hauteurs du jeu tomberaient à auto : le jeu, tout en position
   absolue, s'écraserait à 0 px */
@supports not (height:1svh){.dj-main{--dj-vh:100vh}}
.dj-main:focus{outline:none} /* cible du lien d'évitement */
/* Fond : halos et trame des pages filles, le halo du jeu à sa couleur ; rien ne peut élargir la page */
.dj-main::before{content:"";position:absolute;inset:-76px 0 0;z-index:-2;pointer-events:none;background:radial-gradient(520px 640px at 79% 340px,color-mix(in srgb,var(--dj-acc) 15%,transparent),transparent 70%),radial-gradient(680px 560px at 14% 180px,rgba(141,91,255,.22),transparent 70%)}
.dj-main::after{content:"";position:absolute;inset:-76px 0 0;z-index:-2;pointer-events:none;background:repeating-linear-gradient(-72deg,rgba(185,160,255,.07) 0 1px,transparent 1px 26px);-webkit-mask:linear-gradient(90deg,#000,transparent 58%);mask:linear-gradient(90deg,#000,transparent 58%)}
[dir="rtl"] .dj-main::before{background:radial-gradient(520px 640px at 21% 340px,color-mix(in srgb,var(--dj-acc) 15%,transparent),transparent 70%),radial-gradient(680px 560px at 86% 180px,rgba(141,91,255,.22),transparent 70%)}
[dir="rtl"] .dj-main::after{background:repeating-linear-gradient(72deg,rgba(185,160,255,.07) 0 1px,transparent 1px 26px);-webkit-mask:linear-gradient(-90deg,#000,transparent 58%);mask:linear-gradient(-90deg,#000,transparent 58%)}
.dj-main :where(h1,h2,h3,p,ul,ol){margin:0}
/* anneau de focus de la page ; le jeu garde le sien (celui du navigateur, comme avant) */
.dj-main :focus-visible:not(.phone *){outline:3px solid var(--bf-cyan);outline-offset:3px;border-radius:6px}
:root .dj-more{list-style:none;margin:0;padding:0}

/* Scène : contexte et sortie au début, le jeu au bout (il reste à l'écran pendant qu'on lit). La phrase « sans argent ni mise »
   (.dj-note) est un enfant direct de la scène : à l'ordinateur à la fin du contexte ; en une colonne et au téléphone, juste sous
   le nom du jeu. */
.dj-stage{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"intro game" "ctx game" "note game" "exit game" ". game";column-gap:56px;align-items:start;max-width:1280px;margin-inline:auto;padding:20px 20px 72px;font:400 var(--bf-fs-body)/1.55 var(--bf-f-text);color:var(--bf-text)}
.dj-intro{grid-area:intro;display:flex;flex-direction:column;align-items:flex-start}
.dj-ctx{grid-area:ctx}
.dj-note{grid-area:note}
/* Le jeu : l'écran moins 128 px, entre 620 et 860 px ; sous 736 px de haut (portables 1366×768 ou 1280×720 : 600 à 660 px utiles),
   le plancher cède à l'écran moins 116 px : le jeu tient entier au premier écran (haut à 96 px, 20 px de marge en bas) comme une
   fois collé, « Lancer » et la fenêtre de résultat compris. Rien ne change à partir de 748 px de haut. Jamais moins de 440 px
   (écran de moins de 556 px) : plus bas, le téléphone dessiné (94 % du jeu) devient trop étroit pour l'accueil du jeu, « Lancer »
   passe sur deux lignes et sort du téléphone, qui ne défile pas (mesuré : 426 px suffisent juste dans les 8 démos, Rush en
   dernier ; 440 px laissent de la marge aux polices). Le jeu tient alors entier une fois collé jusqu'à 480 px de haut. */
.dj-game{grid-area:game;position:sticky;top:20px;height:clamp(min(620px,max(440px,calc(var(--dj-vh) - 116px))),calc(var(--dj-vh) - 128px),860px);border-radius:var(--bf-r-lg)}
.dj-exit{grid-area:exit}

/* Haut : puce, pictogramme du jeu et nom (h1, capitales par le style comme les cartes du hub) */
.dj-chip{--bf-acc:var(--dj-acc);--bf-acc-t:var(--dj-acc-t);font-size:14px}
.dj-head{display:flex;align-items:center;gap:16px;margin-top:16px}
.dj-head .bf-pict{width:56px;height:56px;color:var(--dj-acc)}
.dj-title{font:700 var(--bf-fs-1)/1.02 var(--bf-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--bf-text);text-wrap:balance}
:lang(ar) .dj-title{letter-spacing:0;line-height:1.3}
.dj-lead{margin-top:18px;max-width:36em;font-size:var(--bf-fs-lead-1);line-height:1.6;color:var(--bf-text-2);text-wrap:pretty}
:lang(ar) .dj-lead{line-height:1.8}

/* Contexte : « Dans l'app » et « Ici », puis la phrase « sans argent ni mise » (validée au lot 4) */
.dj-app{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start;margin-top:22px;padding:18px 22px 19px;border-radius:var(--bf-r-lg);background:radial-gradient(90% 90% at var(--bf-gx,0%) 0%,color-mix(in srgb,var(--dj-acc) 11%,transparent),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--bf-ink-2);border:1px solid var(--bf-line)}
[dir="rtl"] .dj-app{--bf-gx:100%}
.dj-app::after{content:"";position:absolute;top:-1px;inset-inline-start:22px;width:40px;height:3px;background:var(--dj-acc);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.dj-app .bf-pict{--bf-acc:var(--dj-acc)}
.dj-app__txt{font-size:16px;line-height:1.6;color:var(--bf-text-2);text-wrap:pretty}
.dj-app__ici{margin-top:8px!important;font-size:15px;line-height:1.55;color:var(--bf-text);text-wrap:pretty}
:lang(ar) .dj-app__txt{font-size:16.5px;line-height:1.8}
:lang(ar) .dj-app__ici{font-size:16px;line-height:1.75}
.dj-note{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:start;margin-top:14px!important;font-size:14.5px;line-height:1.55;color:var(--bf-text-2);max-width:62ch}
.dj-note .bf-pict{width:22px;height:22px;margin-top:1px;--bf-acc:var(--bf-gold)}
:lang(ar) .dj-note{font-size:15.5px;line-height:1.75}

/* ===== 3. Fin de partie, sortie vers l'app ===== */
/* Fin de partie, posée sur <html> par bf-demo.js quand le jeu montre son résultat (#result.on) ; sans script, jamais. La sortie
   garde sa place : une languette « Partie terminée » se pose sur son bord (la lame s'ouvre une fois), son liseré passe à l'or, un
   reflet la parcourt, « Rejouer » rejoint les boutiques ; une colonne et téléphone : « Télécharger » de l'en-tête s'allume une
   fois (5). « Rejouer », absent avant la fin, ouvre une ligne de boutons de plus là où il ne tient pas à côté des boutiques
   (téléphone, et à l'ordinateur de 1 000 à 1 085 px de large avec les badges des boutiques, mesuré le 08/10) : la sortie grandit alors
   de 64 px et ce qui la suit descend d'autant, le plus souvent hors de l'écran. Aucune bande collante : sur un petit écran, elle
   couvrirait les boutons du jeu (décision 4). */
.dj-exit__over{display:none}
.dj-exit .dj-replay{display:none}
.dj-replay svg{width:18px;height:18px;flex:none}
.dj-fin .dj-exit{border-color:color-mix(in srgb,var(--bf-gold) 58%,transparent)}
.dj-fin .dj-exit::after{opacity:0}
.dj-fin .dj-exit::before{animation:dj-glint var(--bf-t-sign) var(--bf-ease-reveal) both}
.dj-fin .dj-exit__over{position:absolute;top:0;inset-inline-start:20px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:5px 14px;translate:0 -50%;border-radius:var(--bf-r-pill);background:color-mix(in srgb,var(--bf-gold) 17%,var(--bf-ink-2));border:1px solid color-mix(in srgb,var(--bf-gold) 72%,transparent);font:600 13px/1.2 var(--bf-f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--bf-gold);animation:dj-lame var(--bf-t-enter) var(--bf-ease-reveal) both}
:lang(ar) .dj-exit__over{letter-spacing:0;font-size:14px}
.dj-exit__over i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--bf-gold);box-shadow:0 0 8px var(--bf-gold)}
@keyframes dj-lame{from{clip-path:inset(0 calc(100% * (1 - var(--bf-rm))) 0 0)}}
[dir="rtl"] .dj-fin .dj-exit__over{animation-name:dj-lame-rtl}
@keyframes dj-lame-rtl{from{clip-path:inset(0 0 0 calc(100% * (1 - var(--bf-rm))))}}
.dj-fin .dj-exit .dj-replay{display:inline-flex;animation:dj-entre var(--bf-t-enter) var(--bf-ease) calc(180ms * (1 - var(--bf-rm))) both}
@keyframes dj-entre{from{opacity:var(--bf-rm);translate:calc(-14px * var(--bf-dir) * (1 - var(--bf-rm))) 0}}
@keyframes dj-appel{0%{box-shadow:0 4px 0 var(--bf-cyan-deep),0 0 0 0 rgba(48,214,200,calc(.75 * (1 - var(--bf-rm))))}100%{box-shadow:0 4px 0 var(--bf-cyan-deep),0 0 0 16px rgba(48,214,200,0)}}

/* Sortie vers l'app (id="download", visée par « Télécharger » de l'en-tête à l'ordinateur) : titre, chapeau, les deux boutiques
   avec leurs rôles du lot 0, trois autres démos (les suivantes de la liste du hub, en boucle), toutes les démos */
.dj-exit{position:relative;margin-top:22px;padding:22px 24px 16px;border-radius:var(--bf-r-lg);background:radial-gradient(70% 120% at var(--bf-gx,0%) 0%,rgba(48,214,200,.12),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),var(--bf-ink-2);border:1px solid var(--bf-line)}
[dir="rtl"] .dj-exit{--bf-gx:100%}
.dj-exit::after{content:"";position:absolute;top:-1px;inset-inline-start:24px;width:40px;height:3px;background:var(--bf-cyan);transform:skewX(calc(var(--bf-slant) * -1 * var(--bf-dir)))}
.dj-exit::before{content:"";position:absolute;top:-1px;inset-inline:0;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#fff 50%,transparent) no-repeat;background-size:160px 2px;background-position:-160px 0;opacity:0}
@keyframes dj-glint{0%{opacity:calc(1 - var(--bf-rm));background-position:-160px 0}85%{opacity:calc(1 - var(--bf-rm))}100%{opacity:0;background-position:calc(100% + 160px) 0}}
.dj-exit__title{font:700 clamp(24px,2.1vw,30px)/1.15 var(--bf-f-disp);letter-spacing:-.01em;color:var(--bf-text);text-wrap:balance}
:lang(ar) .dj-exit__title{letter-spacing:0;line-height:1.45}
.dj-exit__sub{margin-top:8px!important;max-width:48ch;font-size:16px;line-height:1.55;color:var(--bf-text-2);text-wrap:pretty}
:lang(ar) .dj-exit__sub{line-height:1.8}
.dj-exit__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.dj-exit__h{margin-top:22px!important;font:600 14px/1.3 var(--bf-f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--bf-text)}
:lang(ar) .dj-exit__h{letter-spacing:0;font-size:15px}
.dj-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px!important}
.dj-mini{--bf-acc:var(--bf-cyan);position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;align-items:center;min-height:62px;padding:10px 12px;border-radius:var(--bf-r-md);border:1px solid var(--bf-line);background:radial-gradient(90% 90% at var(--bf-gx,0%) 0%,color-mix(in srgb,var(--bf-acc) 13%,transparent),transparent 70%),var(--bf-ink-1);transition:transform var(--bf-t-state) var(--bf-ease),border-color var(--bf-t-state) var(--bf-ease)}
[dir="rtl"] .dj-mini{--bf-gx:100%}
.dj-mini .bf-pict{width:34px;height:34px;grid-row:1/span 2}
.dj-mini__name{font:600 17px/1.2 var(--bf-f-disp);letter-spacing:.02em;text-transform:uppercase}
:lang(ar) .dj-mini__name{letter-spacing:0;line-height:1.45}
.dj-mini__link{color:var(--bf-text);text-decoration:none}
.dj-mini__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--bf-r-md)}
/* .dj-main : même poids que l'anneau de la page (2), qu'elle doit battre ; il ne reste que l'anneau de la carte */
@supports selector(:has(a)){.dj-main .dj-mini__link:focus-visible{outline:none}}
.dj-mini:has(.dj-mini__link:focus-visible){outline:3px solid var(--bf-cyan);outline-offset:3px}
.dj-mini__go{display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1.3 var(--bf-f-text);color:var(--bf-acc-t,var(--bf-acc))}
.dj-mini__go svg{width:13px;height:13px;flex:none;scale:var(--bf-dir) 1}
.dj-hub{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.dj-hub svg{width:16px;height:16px;flex:none;scale:var(--bf-dir) 1}
/* Annonce de fin de partie aux lecteurs d'écran (texte masqué mais lu) */
.dj-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== 4. Le jeu dans la page (décision 3) ===== */
/* Le jeu garde son balisage et son script ; son style, dans sa page, a sa remise à zéro limitée au jeu, ses règles de page (ex-body :
   centrage, marge, défilement bloqué) portées par .dj-game et la hauteur du téléphone dessiné relative à .dj-game (cqh). Ici : le
   conteneur (requêtes sur sa hauteur), ce que le document neuf d'aujourd'hui lui donnait (interligne et lissage par défaut), le fond
   de la page derrière le jeu (comme la maquette). */
.dj-game{container:dj-jeu/size;font-size:16px;font-weight:400;line-height:normal;-webkit-font-smoothing:auto}
/* Écrans inactifs du jeu (opacité 0) : hors du parcours clavier et de ce que lit un lecteur d'écran, maintenant que le jeu est dans
   la page. Ils gardent leur place (mesures du canvas inchangées) et ne disparaissent qu'au bout de leur fondu de sortie (celui du
   jeu, 0,35 s, ici sous l'interrupteur --bf-rm ; le repli « réduire les animations » le ramène à 1 ms). */
.dj-game .screen:not(.active){visibility:hidden;transition:opacity calc(.35s * (1 - var(--bf-rm))) ease,visibility 0s linear calc(.35s * (1 - var(--bf-rm)))}
/* Fenêtre de résultat plus haute que le téléphone : elle défile dans son voile plutôt que d'être coupée en haut et en bas (règle du
   téléphone de la maquette, partie 09, étendue au téléphone dessiné : selon le jeu, elle n'y tient plus sous 760 à 850 px de haut
   d'écran). Quand elle tient, rien ne change (safe center = centrée). */
.dj-game .overlay{overflow-y:auto;align-items:safe center}
/* Boutons de la fenêtre de résultat dans le téléphone dessiné (720 px de large et plus) : jeu de 540 px de haut ou moins, le
   téléphone est trop étroit pour « Rejouer » et « Valider le résultat » côte à côte (« Valider » débordait à droite, coupé par le
   bord du téléphone) ; ils passent l'un sous l'autre, entiers. Mesuré dans les 8 démos : côte à côte, ils tiennent à partir de
   522 px de jeu (Fredoka) et de 526 px (police de repli) ; 540 px gardent de la marge. Plein cadre (téléphone, téléphone tenu à
   l'horizontale), ils restent côte à côte. */
@media (min-width: 720px){@container dj-jeu (max-height: 540px){.dj-game .rbtns{flex-direction:column}}}
/* Téléphone : plein cadre, sans téléphone dessiné (audit § 3.8). Sous 640 px de haut, la fenêtre de résultat se resserre pour rester
   entière : voile, marges, pictogramme et lignes du classement plus serrés, contenu identique (mesuré dans la maquette, partie 09). */
@media (max-width: 719px){
  .dj-game .phone{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .dj-game .notch{display:none}
  .dj-game .hdr{padding-top:18px}
  .dj-game .ghud{padding-top:12px}
  @container dj-jeu (max-height: 640px){
    .dj-game .overlay{padding:10px 12px}
    .dj-game .modal{padding:18px}
    .dj-game .wav{width:50px;height:50px}
    .dj-game .ranklist{margin:8px 0 10px}
    .dj-game .rankrow{padding:5px 4px}
  }
}
/* Réduire les animations (décision 6) : fondus et rebonds instantanés, indicateur « saute » de Rush fixe, flash de coup atténué ;
   tremblement, flash plein cadre et confettis : dans le script du jeu (BF_RM). Règles, vitesses et durées de partie inchangées. */
@media (prefers-reduced-motion: reduce){
  .dj-game .phone *,.dj-game .phone *::before,.dj-game .phone *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important}
  .dj-game .actbtn.cue{box-shadow:0 0 42px rgba(141,91,255,.9),0 0 16px rgba(48,214,200,.55),0 8px 22px rgba(0,0,0,.45)!important}
  .dj-game .hurt.on{box-shadow:inset 0 0 40px rgba(255,77,109,.35)}
}

/* ===== 5. Une colonne, téléphone, visionneuse de l'accueil, survol ===== */
@media (max-width: 999px){
  .dj-stage{display:flex;flex-direction:column;align-items:stretch;padding:18px 20px 56px}
  .dj-intro{order:0}
  .dj-note{order:1}
  /* même hauteur qu'à l'ordinateur, mais le plancher cède sous 636 px de haut (fenêtre basse, zoom à 200 %) : le jeu, sous le nom
     et la phrase, tient entier dans l'écran une fois atteint (16 px de marge), commandes comprises, jusqu'à 456 px de haut. Plus
     bas, plancher de 440 px comme à l'ordinateur : « Lancer » reste entier dans le téléphone dessiné et la page défile un peu ;
     à 440 px de haut et moins (téléphone tenu à l'horizontale), le jeu passe plein cadre, comme au téléphone (fin de la section 5) */
  .dj-game{order:2;position:relative;top:auto;align-self:center;width:min(100%,520px);height:clamp(min(620px,max(440px,calc(var(--dj-vh) - 16px))),calc(var(--dj-vh) - 128px),860px);margin-top:20px}
  .dj-exit{order:3;margin-top:30px}
  .dj-ctx{order:4;margin-top:30px}
  /* la sortie peut être sous le pli : le bouton de l'en-tête s'allume une fois */
  .dj-fin .bf-hdr .bf-btn--push{animation:dj-appel calc(1100ms * (1 - var(--bf-rm))) var(--bf-ease) 1 both}
}
@media (max-width: 719px){
  .dj-stage{padding:0 0 48px}
  /* Le jeu d'abord, juste sous l'en-tête, à la hauteur exacte de ce qui reste de l'écran (100svh moins l'en-tête), sans plancher :
     « Lancer » et la fenêtre de résultat restent dans le premier écran, de 664 px (Safari, barres affichées) à 844 px. Puis le nom
     du jeu (h1, toujours le premier titre de la page) et la phrase « sans argent ni mise ». */
  .dj-game{order:0;width:100%;margin-top:0;height:calc(var(--dj-vh) - var(--dj-hdr));border-radius:0;box-shadow:0 -1px 0 var(--bf-line)}
  .dj-intro{order:1;padding:22px 20px 0}
  .dj-note{order:2;margin:12px 20px 0!important}
  .dj-exit{order:3}
  .dj-ctx{order:4}
  .dj-head{gap:12px;margin-top:10px}
  .dj-head .bf-pict{width:42px;height:42px}
  .dj-exit{margin:30px 12px 0;padding:24px 18px 14px}
  .dj-exit::after{inset-inline-start:18px}
  .dj-fin .dj-exit__over{inset-inline-start:16px}
  .dj-exit__cta .bf-btn{flex:1 1 100%}
  .dj-more{grid-template-columns:minmax(0,1fr);gap:6px}
  .dj-mini{min-height:56px}
  .dj-ctx{padding-inline:20px;margin-top:28px}
  .dj-lead{margin-top:0}
  .dj-app{grid-template-columns:minmax(0,1fr);row-gap:12px;padding:18px 18px 19px}
  .dj-app::after{inset-inline-start:18px}
  .dj-app .bf-pict{width:38px;height:38px}
  .dj-mini:active{transform:scale(.985)}
}
/* Visionneuse de l'accueil (la page chargée dans la fenêtre plein écran des façades « clic pour jouer ») : le jeu seul, comme
   aujourd'hui. Classe dj-vue posée par le script de trois lignes de la tête quand la page est dans un cadre (décision 5). Avec le
   téléphone dessiné (720 px de large et plus), même plancher de 440 px que dans la page : dans un cadre plus bas, le cadre défile
   plutôt que de couper « Lancer » ; sauf à l'horizontale (cadre de 720 à 999 px de large), plein cadre sans plancher (bloc suivant). */
.dj-vue .bf-hdr,.dj-vue .bf-ftr,.dj-vue .bf-skip,.dj-vue .dj-intro,.dj-vue .dj-ctx,.dj-vue .dj-note,.dj-vue .dj-exit,.dj-vue .dj-main::before,.dj-vue .dj-main::after{display:none!important}
.dj-vue .dj-stage{display:block;max-width:none;padding:0}
.dj-vue .dj-game{position:relative;top:auto;width:100%;height:var(--dj-vh);border-radius:0}
@media (min-width: 720px){.dj-vue .dj-game{height:max(440px,var(--dj-vh))}}
/* Téléphone tenu à l'horizontale (une colonne, 440 px de haut au plus ; mesuré de 740×300 à 932×379), page et visionneuse : comme
   au téléphone en portrait, le jeu plein cadre, sans téléphone dessiné (dessiné, il était plus étroit que son accueil, coupé en
   haut et en bas, commandes serrées). Page : le jeu d'abord, à la hauteur de l'écran sous l'en-tête (76 px à cette largeur), puis
   le nom et la phrase ; la sortie et le contexte gardent leurs marges. Visionneuse : le cadre entier, sans plancher (il ne défile
   plus). Fenêtre de résultat resserrée comme au téléphone, boutons côte à côte (le cadre est large). Après la règle de la
   visionneuse, qu'il doit battre (même poids). */
@media (min-width: 720px) and (max-width: 999px) and (max-height: 440px){
  .dj-main{--dj-hdr:76px}
  .dj-stage{padding:0 0 48px}
  .dj-game{order:0;width:100%;margin-top:0;height:calc(var(--dj-vh) - var(--dj-hdr));border-radius:0;box-shadow:0 -1px 0 var(--bf-line)}
  .dj-intro{order:1;padding:22px 20px 0}
  .dj-note{order:2;margin:12px 20px 0!important}
  .dj-exit{margin-inline:20px}
  .dj-ctx{padding-inline:20px}
  .dj-game .phone{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .dj-game .notch{display:none}
  .dj-game .hdr{padding-top:18px}
  .dj-game .ghud{padding-top:12px}
  .dj-game .overlay{padding:10px 12px}
  .dj-game .modal{padding:18px}
  .dj-game .wav{width:50px;height:50px}
  .dj-game .ranklist{margin:8px 0 10px}
  .dj-game .rankrow{padding:5px 4px}
  .dj-game .rbtns{flex-direction:row}
  .dj-vue .dj-game{height:var(--dj-vh)}
}
@media (min-width: 720px) and (hover: hover) and (pointer: fine){
  .dj-mini:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--bf-acc) 60%,transparent)}
  .dj-mini:hover .dj-mini__go svg{translate:calc(3px * var(--bf-dir)) 0}
}