/* Page « Le jeu » (/jeu.html et /en/game.html), chargée après site.css : l'ouverture, le storyboard, puis le jeu en
   quatre scènes (prépare, dirige, tourne, repars) suivies par la frise de montage, chacune avec sa phrase clé, ses
   pastilles et une interaction (moniteur des décors, styles, plans de la caméra, format de la vidéo) ; enfin « Joue à ta
   façon » en onglets, Discord, téléchargement, questions. Couleurs : le thème « jeu » de site.css (or et braise sur
   noir chaud, variables --accent, --fond…) ; toute la page est sombre, comme une salle de cinéma. Sans JavaScript,
   tout reste visible (les onglets s'affichent l'un sous l'autre). */

.page-jeu { --entete-h: 68px; --ombre-nuit: 0 0 0 1px var(--ligne-forte), 0 34px 80px -34px rgba(var(--accent-rgb), 0.4); }

/* ------------------------------------------------------------------------------------------------ ouverture */
.jeu-ouverture { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: calc(100svh - 68px); padding: clamp(40px, 7vh, 80px) 0 clamp(70px, 10vh, 110px); background: var(--fond); color: var(--texte-clair); }
.jo-fond { position: absolute; inset: 0; z-index: -2; }
.jo-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
/* l'affiche reste lisible derrière le texte : voile sombre à gauche et en bas, l'image respire à droite */
.jo-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--fond-rgb), 0.94) 0%, rgba(var(--fond-rgb), 0.72) 38%, rgba(var(--fond-rgb), 0.12) 75%), linear-gradient(0deg, var(--fond) 0%, rgba(var(--fond-rgb), 0.6) 22%, transparent 50%); }
/* le texte à gauche ; à droite, l'affiche du jeu (rendue par son moteur) sous le viseur de la caméra */
.jo-dedans { display: grid; grid-template-columns: minmax(0, 38rem); align-items: center; }
.jeu-ouverture .titre-geant { font-size: clamp(3.2rem, 7.4vw, 6.8rem); color: #fff; }
.jeu-ouverture .accroche { color: #fff; }
.jeu-ouverture .lien-clair { color: #fff; }
.jo-viseur { position: absolute; z-index: 0; top: clamp(28px, 6vh, 64px); bottom: clamp(84px, 14vh, 150px); left: 54%; right: max(var(--marge), calc((100vw - var(--largeur)) / 2)); pointer-events: none; }
.jo-viseur i { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255, 255, 255, 0.8); }
.jo-viseur i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.jo-viseur i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.jo-viseur i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.jo-viseur i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.jo-viseur b { position: absolute; top: 4px; right: 40px; display: flex; align-items: center; gap: 7px; color: #fff; font: 600 0.75rem/1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: 0.1em; }
.jo-viseur b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: jo-rec 1.2s steps(2, start) infinite; }
@keyframes jo-rec { to { visibility: hidden; } }
/* entrée de l'ouverture : courte, jouée une fois, et rien n'est caché sans elle */
html.anime:not(.reduit) .jo-texte > * { animation: jo-entre 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.anime:not(.reduit) .jo-texte > :nth-child(2) { animation-delay: 0.08s; }
html.anime:not(.reduit) .jo-texte > :nth-child(3) { animation-delay: 0.16s; }
html.anime:not(.reduit) .jo-texte > :nth-child(4) { animation-delay: 0.24s; }
html.anime:not(.reduit) .jo-texte > :nth-child(5) { animation-delay: 0.32s; }
html.anime:not(.reduit) .jo-fond img { animation: jo-fond 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.anime:not(.reduit) .jo-viseur { animation: jo-entre 0.8s 0.5s ease-out both; }
@keyframes jo-entre { from { opacity: 0; transform: translateY(16px); } }
@keyframes jo-fond { from { opacity: 0.2; transform: scale(1.08); } }

/* ------------------------------------------------------------------------------------------------ boutons et liens */
.page-jeu .bouton { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.page-jeu .bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.page-jeu .bouton-principal::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 48%, transparent 62%) 160% 0 / 250% 100% no-repeat, var(--accent);
  transition: background-position 0.6s ease;
}
.page-jeu .bouton-principal:hover::after { background-position: -60% 0, 0 0; }
.page-jeu .bouton-discord:active, .page-jeu .bouton-clair:active { transform: translateY(1px) scale(0.98); box-shadow: none; }
.page-jeu .bouton-clair:focus-visible { outline-color: var(--accent); }
.page-jeu .bouton-petit { min-height: 44px; }
.page-jeu .langue { height: 44px; }
.page-jeu .menu a { display: inline-flex; align-items: center; min-height: 44px; }
.page-jeu .menu a:active { background: rgba(255, 255, 255, 0.12); }
.page-jeu .lien-fleche { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; border-bottom: 0; background: linear-gradient(var(--accent), var(--accent)) 0 calc(100% - 8px) / 100% 2px no-repeat; transition: background-size 0.25s ease, color 0.2s; }
.page-jeu .lien-fleche::after { content: "→"; transition: transform 0.2s ease; }
.page-jeu .lien-fleche:hover::after { transform: translateX(4px); }
.page-jeu .lien-fleche:hover { background-image: linear-gradient(var(--texte-fort), var(--texte-fort)); }
.page-jeu .pied a { display: inline-flex; align-items: center; min-height: 44px; }
.page-jeu .bandeau-fermer { width: 44px; height: 44px; }
.page-jeu .marque { min-height: 44px; }

/* écrans du jeu (captures cliquables) */
.ecran { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: inherit; background: var(--fond-3); color: inherit; cursor: zoom-in; overflow: hidden; }
.ecran img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ecran::after {
  content: ""; position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(20, 18, 22, 0.72) url("/img/accueil/agrandir.svg") center / 20px no-repeat;
  opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.2s;
}
.ecran:hover img { transform: scale(1.03); }
.ecran:hover::after, .ecran:focus-visible::after { opacity: 1; transform: scale(1); }
.ecran:active img { transform: scale(1.01); }
.ecran:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }


.page-jeu .chiffres { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--ligne-forte); border-bottom: 1px solid var(--ligne-forte); }
.page-jeu .chiffres li { display: flex; flex-direction: column; gap: 6px; padding: 24px 18px 22px; font-weight: 600; color: var(--texte-moyen); }
.page-jeu .chiffres li + li { border-left: 1px solid var(--ligne); }
.page-jeu .chiffres strong { font-family: var(--police-titre); font-weight: 900; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); }

/* ------------------------------------------------------------------------------------------------ le jeu en quatre scènes */
.decouvrir { padding-top: clamp(80px, 11vw, 140px); }
.decouvrir-tete { max-width: 60rem; }

/* le storyboard : quatre plans du film, un par scène */
.storyboard { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); counter-reset: case; }
.storyboard li { --c: var(--accent); }
.sb-case {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 0 16px 18px; height: 100%; overflow: hidden;
  background: var(--fond-2); color: var(--texte-fort); text-decoration: none; border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--ligne), 0 24px 40px -28px rgba(0, 0, 0, 0.9);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.35s;
}
.sb-image { grid-column: 1 / -1; display: block; overflow: hidden; margin: 0 -16px 14px; background: var(--fond-3); }
.sb-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s; }
.sb-num { grid-row: 2 / span 2; font: 900 clamp(2.4rem, 3.6vw, 3.2rem)/0.85 var(--police-titre); color: transparent; -webkit-text-stroke: 1.5px var(--c); transition: color 0.3s; }
.sb-case strong { font: 900 1.35rem/1 var(--police-titre); text-transform: uppercase; letter-spacing: -0.01em; }
.sb-texte { color: var(--texte-moyen); font-size: 0.9rem; line-height: 1.3; }
.sb-case:hover, .sb-case:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--c), 0 34px 60px -30px rgba(var(--accent-rgb), 0.45); }
.sb-case:hover .sb-image img, .sb-case:focus-visible .sb-image img { transform: scale(1.06); }
.sb-case:hover .sb-num, .sb-case:focus-visible .sb-num { color: var(--c); }
.sb-case:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
/* les cases tombent sur la table l'une après l'autre */
html.anime:not(.reduit) .storyboard.vu li { animation: sb-pose 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
html.anime:not(.reduit) .storyboard.vu li:nth-child(2) { animation-delay: 0.1s; }
html.anime:not(.reduit) .storyboard.vu li:nth-child(3) { animation-delay: 0.2s; }
html.anime:not(.reduit) .storyboard.vu li:nth-child(4) { animation-delay: 0.3s; }
@keyframes sb-pose { from { opacity: 0; transform: translateY(28px) scale(0.97); } }

/* ------------------------------------------------------------------------------------------------ la frise de montage */
.scenes { position: relative; }
.frise {
  --p: 0; position: sticky; top: var(--entete-h); z-index: 40; color: var(--texte-clair);
  background: rgba(var(--fond-rgb), 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}
.frise-dedans { display: flex; align-items: center; gap: 18px; min-height: 52px; }
.frise-tc { display: inline-flex; align-items: center; gap: 8px; font: 600 0.8rem/1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: 0.06em; color: var(--texte-clair-doux); font-variant-numeric: tabular-nums; }
.frise-tc i { width: 9px; height: 9px; border-radius: 50%; background: #5a5560; transition: background-color 0.3s, box-shadow 0.3s; }
.frise.enregistre .frise-tc i { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: jo-rec 1.2s steps(2, start) infinite; }
.frise.enregistre .frise-tc { color: #fff; }
.frise-piste { position: relative; flex: 1; }
.frise-piste ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.frise-piste a {
  --f: 0; position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 6px; overflow: hidden;
  color: var(--texte-clair-doux); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; background: rgba(255, 255, 255, 0.05);
  transition: color 0.25s, background-color 0.25s;
}
/* chaque scène se remplit pendant la lecture, comme un clip sur la frise du jeu */
.frise-piste a::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--f)); }
.frise-piste b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 900 0.78rem/1 var(--police-titre); background: rgba(255, 255, 255, 0.1); color: #fff; transition: background-color 0.25s, color 0.25s; }
.frise-piste a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.frise-piste a[aria-current] { color: #fff; background: rgba(255, 255, 255, 0.12); }
.frise-piste a[aria-current] b { background: var(--accent); color: var(--accent-encre); }
.frise-piste a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.frise-tete { position: absolute; top: -4px; bottom: -4px; left: calc(var(--p) * 100%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); pointer-events: none; }
.frise-tete::before { content: ""; position: absolute; top: -2px; left: -5px; border: 6px solid transparent; border-top: 7px solid #fff; }

/* ------------------------------------------------------------------------------------------------ une scène */
.scene { --c: var(--accent); scroll-margin-top: calc(var(--entete-h) + 52px); }
.scene-dedans { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.scene-tete { position: sticky; top: calc(var(--entete-h) + 52px + 28px); }
.scene-num { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-faible); }
.scene-num span { font: 900 clamp(4rem, 7vw, 6.4rem)/0.8 var(--police-titre); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px var(--c); }
@supports not (-webkit-text-stroke: 1px black) { .scene-num span { color: var(--c); } }
.scene-phrase { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; font-weight: 500; max-width: 34rem; text-wrap: pretty; }
.pilules { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pilules li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--ligne-forte); color: var(--texte-fort); }
.pilules li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.coulisses { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.a-toi { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-fort); }
.a-toi span { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.a-toi span::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c); animation: onde 1.8s ease-out infinite; }
@keyframes onde { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2); opacity: 0; } }
/* le numéro de la scène entre comme une ardoise qu'on présente à la caméra */
html.anime:not(.reduit) .scene-tete.vu .scene-num span { display: inline-block; animation: scene-num 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
html.anime:not(.reduit) .scene-tete.vu .pilules li { animation: pilule 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
html.anime:not(.reduit) .scene-tete.vu .pilules li:nth-child(1) { animation-delay: 0.25s; }
html.anime:not(.reduit) .scene-tete.vu .pilules li:nth-child(2) { animation-delay: 0.35s; }
html.anime:not(.reduit) .scene-tete.vu .pilules li:nth-child(3) { animation-delay: 0.45s; }
@keyframes scene-num { from { opacity: 0; transform: translateY(45%) rotate(-12deg); } }
@keyframes pilule { from { opacity: 0; transform: scale(0.6); } }

/* sous les projecteurs (scènes 2 à 4) : de grandes lueurs chaudes, comme la lumière d'un plateau hors champ */
.nuit { position: relative; isolation: isolate; color: var(--texte-clair); }
.nuit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50vw 40vh at 6% 10%, rgba(var(--accent-rgb), 0.1), transparent 70%),
    radial-gradient(45vw 40vh at 96% 48%, rgba(var(--accent-2-rgb), 0.07), transparent 70%),
    radial-gradient(45vw 35vh at 15% 88%, rgba(var(--accent-rgb), 0.06), transparent 70%);
}
.nuit .section { padding: clamp(56px, 8vw, 100px) 0; }
.nuit .scene-num { color: var(--texte-faible); }
.nuit .scene-num span { text-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); }
.nuit .scene-phrase, .nuit .a-toi { color: var(--texte-clair); }
.nuit .pilules li { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--texte-clair); }
.titre-neon { color: #fff; text-shadow: 0 0 3px rgba(255, 255, 255, 0.35), 0 0 22px rgba(var(--accent-rgb), 0.5), 0 0 60px rgba(var(--accent-rgb), 0.25); }
.vignette { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; min-height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--texte-fort); cursor: zoom-in; font-weight: 600; font-size: 0.9rem; box-shadow: inset 0 0 0 1px var(--ligne-forte); transition: box-shadow 0.2s, transform 0.2s; }
.vignette img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.vignette:hover { box-shadow: inset 0 0 0 1.5px var(--accent); transform: translateY(-1px); }
.vignette:active { transform: translateY(1px); }
.vignette:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------------------------------------------ scène 1 : le moniteur */
.moniteur { position: relative; border-radius: 12px; background: var(--fond-3); box-shadow: 0 0 0 8px var(--fond-3), 0 0 0 9px var(--ligne-forte), 0 40px 80px -36px rgba(0, 0, 0, 0.95); }
.moniteur .ecran { border-radius: 10px; }
.moniteur-viseur { position: absolute; inset: 14px; pointer-events: none; }
.moniteur-viseur i, .plans-viseur i { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255, 255, 255, 0.85); }
.moniteur-viseur i:nth-child(1), .plans-viseur i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.moniteur-viseur i:nth-child(2), .plans-viseur i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.moniteur-viseur i:nth-child(3), .plans-viseur i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.moniteur-viseur i:nth-child(4), .plans-viseur i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.moniteur-nom {
  position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 40px 18px 14px; border-radius: 0 0 8px 8px; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--fond-rgb), 0.9), transparent); color: #fff; font: 900 clamp(1.2rem, 2.2vw, 1.8rem)/1 var(--police-titre); text-transform: uppercase; letter-spacing: -0.01em;
}
.moniteur-nom small { display: block; margin-bottom: 6px; font: 600 0.72rem/1 var(--police); letter-spacing: 0.2em; color: var(--accent); }
/* au changement de décor : un balayage lumineux traverse le moniteur */
.moniteur::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, rgba(var(--accent-rgb), 0.35) 52%, transparent 70%) -100% 0 / 250% 100% no-repeat; }
.moniteur.coupe::after { animation: balayage 0.55s cubic-bezier(0.5, 0, 0.3, 1); }
.moniteur.coupe .ecran img { animation: moniteur-coupe 0.55s ease-out; }
@keyframes balayage { from { background-position: 160% 0; } to { background-position: -100% 0; } }
@keyframes moniteur-coupe { from { filter: brightness(1.7) saturate(0.4); transform: scale(1.04); } }
/* le moniteur s'allume quand la scène arrive */
html.anime:not(.reduit) .scene-jeu.vu .moniteur .ecran img { animation: allume 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes allume { 0% { transform: scaleY(0.01) scaleX(0.6); filter: brightness(3); } 45% { transform: scaleY(0.01) scaleX(1); filter: brightness(3); } 100% { transform: none; filter: none; } }
.scene-preparer .decors { grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 22px; }
.scene-preparer .decor { border-radius: 6px; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.8); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.scene-preparer .decor span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene-preparer .decor:hover, .scene-preparer .decor:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 22px -12px rgba(0, 0, 0, 0.9), 0 0 0 2px var(--texte-moyen); }
.scene-preparer .decor:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.scene-preparer .decor.a-l-ecran { box-shadow: 0 0 0 3px var(--accent), 0 14px 22px -12px rgba(0, 0, 0, 0.9); }
.scene-preparer .decor:active { transform: scale(0.97); }

/* ------------------------------------------------------------------------------------------------ scène 2 : les styles */
.styles-faisceaux { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 12px; pointer-events: none; mix-blend-mode: screen; }
.styles-faisceaux i {
  --teinte: rgba(var(--accent-2-rgb), 0.5); position: absolute; top: -30%; left: var(--x, 20%); width: 34%; height: 150%; transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--teinte), transparent 75%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(6px);
  transition: background 0.6s; animation: faisceau 3.2s ease-in-out infinite alternate;
}
.styles-faisceaux i:nth-child(2) { --x: 50%; --teinte: rgba(var(--accent-rgb), 0.45); animation-delay: -1.1s; animation-duration: 2.6s; }
.styles-faisceaux i:nth-child(3) { --x: 78%; animation-delay: -2.2s; }
.styles-demo[data-style-actif="studio"] .styles-faisceaux i { --teinte: rgba(255, 238, 210, 0.3); animation-duration: 9s; }
.styles-demo[data-style-actif="nocturne"] .styles-faisceaux i { --teinte: rgba(130, 160, 255, 0.36); animation-duration: 6s; }
.styles-demo[data-style-actif="nocturne"] .styles-faisceaux i:nth-child(2) { --teinte: rgba(90, 110, 220, 0.42); }
@keyframes faisceau { from { transform: translateX(-50%) rotate(-14deg); } to { transform: translateX(-50%) rotate(14deg); } }
html.reduit .styles-faisceaux i { animation: none; transform: translateX(-50%); }
.styles-demo.change .ecran img { animation: style-flash 0.6s ease-out; }
@keyframes style-flash { from { filter: brightness(1.8) contrast(0.8); } }
.style-textes { min-height: 3em; margin-top: 12px; color: var(--texte-moyen); }
.style-texte { margin: 0; }

/* les trois styles (boutons, teinte) */
.masque { position: relative; border-radius: 12px; box-shadow: var(--ombre-nuit); }
.masque .ecran { border-radius: 12px; }
.styles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.style-puce {
  --puce: var(--texte-clair); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--texte-clair); font-weight: 600; font-size: 0.92rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.style-puce::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--puce); box-shadow: 0 0 10px var(--puce); }
.style-puce[data-style="studio"] { --puce: #ffe4c2; }
.style-puce[data-style="nocturne"] { --puce: #9aa8ff; }
.style-puce[data-style="energique"] { --puce: var(--accent-2); }
.style-puce:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.style-puce:active { transform: scale(0.96); }
.style-puce:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.style-puce[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); box-shadow: 0 0 24px -6px rgba(var(--accent-rgb), 0.8); }
.style-puce[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--accent-encre); }
.styles-teinte { position: absolute; inset: 0; z-index: 1; border-radius: 12px; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.5s, background 0.5s; }
.styles-demo[data-style-actif="studio"] .styles-teinte { opacity: 0.85; background: radial-gradient(circle at 50% 35%, #fff8ec, #ffd9a8 70%); }
.styles-demo[data-style-actif="nocturne"] .styles-teinte { opacity: 0.9; background: linear-gradient(135deg, #1f2a6b, #6f8cff); } /* le style « Clip nocturne » : seule touche froide de la page, c'est ce qu'il montre */
.styles-demo { transition: box-shadow 0.5s; }
.styles-demo[data-style-actif="studio"] { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 80px -30px rgba(255, 210, 150, 0.7); }
.styles-demo[data-style-actif="nocturne"] { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 80px -30px rgba(154, 168, 255, 0.5); }
.styles-demo[data-style-actif="energique"] { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 80px -30px rgba(var(--accent-2-rgb), 0.7); }

/* ------------------------------------------------------------------------------------------------ scène 3 : les plans */
.plans-ecran { position: relative; overflow: hidden; border-radius: 12px; background: var(--fond-3); box-shadow: var(--ombre-nuit); }
.plans-ecran img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform-origin: 50% 40%; transition: transform 1s cubic-bezier(0.65, 0, 0.25, 1), transform-origin 1s cubic-bezier(0.65, 0, 0.25, 1); }
/* la caméra se resserre sur l'artiste : le point fixe est son visage */
.plans[data-plan="moyen"] .plans-ecran img { transform: scale(1.6); transform-origin: 50% 33%; }
.plans[data-plan="rapproche"] .plans-ecran img { transform: scale(2.2); transform-origin: 50% 27%; }
.plans[data-plan="gros"] .plans-ecran img { transform: scale(3); transform-origin: 50% 24%; }
.plans-viseur {
  position: absolute; inset: 14px; pointer-events: none; color: #fff; font: 600 0.75rem/1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: 0.1em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.28) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent 0, transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.28) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent 0),
    linear-gradient(0deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.28) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent 0, transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.28) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent 0);
}
.plans-viseur i { border-color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); transition: inset 0.6s; }
.plans-viseur b { position: absolute; top: 6px; right: 40px; display: flex; align-items: center; gap: 7px; }
.plans-viseur b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: jo-rec 1.2s steps(2, start) infinite; }
.plans-viseur em { position: absolute; left: 12px; bottom: 10px; font-style: normal; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; background: rgba(var(--fond-rgb), 0.65); }
.plans-viseur em small { color: var(--accent); font-size: 1em; }
.plans-ecran::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.plans.coupe .plans-ecran::after { animation: coupe 0.35s ease-out; }
.plans.coupe .plans-viseur em { animation: pilule 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes coupe { from { opacity: 0.35; } to { opacity: 0; } }
.plans-choix, .format-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plans-choix button, .format-choix button {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.28); background: transparent; color: var(--texte-clair); font: 600 0.92rem/1 var(--police);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.plans-choix button:hover, .format-choix button:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.plans-choix button:active, .format-choix button:active { transform: scale(0.96); }
.plans-choix button:focus-visible, .format-choix button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.plans-choix button[aria-pressed="true"], .format-choix button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); box-shadow: 0 0 24px -6px rgba(var(--accent-rgb), 0.8); }

.musique-bloc { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 8vw, 96px); scroll-margin-top: calc(var(--entete-h) + 72px); }
.musique-texte h3 { font: 900 clamp(1.7rem, 3vw, 2.5rem)/0.95 var(--police-titre); text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 14px; }
.musique-texte p { color: var(--texte-moyen); }

/* ------------------------------------------------------------------------------------------------ scène 4 : le format */
.scene-repartir .scene-dedans { grid-template-columns: 1fr; }
.scene-repartir .scene-tete { position: static; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 0 clamp(28px, 5vw, 72px); align-items: end; }
.scene-repartir .scene-tete > :nth-child(-n + 2) { grid-column: 1; }
.scene-repartir .scene-phrase, .scene-repartir .pilules { grid-column: 2; }
.scene-repartir .scene-phrase { grid-row: 1 / span 2; align-self: end; margin-bottom: 0.6em; }
.scene-repartir .pilules { grid-row: 3; margin-top: 0; }
.scene-repartir .scene-jeu { text-align: center; }
.format { --h: min(calc((100vw - 2 * var(--marge) - 20px) * 0.5625), 540px); }
.format-choix { justify-content: center; margin: 0 0 22px; }
.format-choix i { width: 18px; height: 11px; border: 2px solid currentColor; border-radius: 2px; }
.format-choix [data-format-choix="portrait"] i { width: 11px; height: 18px; }
.page-jeu .format-cadre {
  width: calc(var(--h) * 16 / 9 + 20px); height: calc(var(--h) + 20px); max-width: 100%; margin-inline: auto; transform: none; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--ligne-forte), 0 40px 100px -34px rgba(0, 0, 0, 0.95), 0 0 70px -30px rgba(var(--accent-rgb), 0.5);
  transition: width 0.8s cubic-bezier(0.65, 0, 0.25, 1), height 0.8s cubic-bezier(0.65, 0, 0.25, 1);
}
.page-jeu .format-cadre::before { display: none; }
.page-jeu .format-cadre video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 6px; }
.format[data-format="portrait"] .format-cadre { width: calc(var(--h) * 9 / 16 + 20px); }
.partage { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 8vw, 96px); }
.export h3 { font: 900 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--police-titre); text-transform: uppercase; margin-bottom: 12px; }
.export p { color: var(--texte-moyen); margin: 0; }
.export code { color: var(--accent-vif); background: rgba(var(--accent-rgb), 0.14); padding: 0 0.3em; border-radius: 4px; }
.page-jeu .pont-clip { margin: 0; }

/* ------------------------------------------------------------------------------------------------ joue à ta façon : onglets */
.joue .section-tete { text-align: center; }
.joue .chapeau { margin-inline: auto; }
.onglets-jeu { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); padding: 6px; border-radius: 16px; background: var(--fond-3); box-shadow: inset 0 0 0 1px var(--ligne); }
.onglets-jeu[hidden] { display: none; }
.onglets-jeu [role="tab"] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 8px 10px; border: 0; border-radius: 11px;
  background: transparent; color: var(--texte-moyen); cursor: pointer; text-align: center; transition: color 0.3s;
}
.onglets-jeu [role="tab"] strong { font: 900 1.05rem/1.05 var(--police-titre); text-transform: uppercase; letter-spacing: 0.01em; }
.onglets-jeu [role="tab"] small { font-size: 0.8rem; }
.onglets-jeu [role="tab"]:hover { color: #fff; }
.onglets-jeu [role="tab"][aria-selected="true"] { color: var(--accent-encre); }
.onglets-jeu [role="tab"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.onglets-curseur {
  position: absolute; z-index: -1; left: 0; top: 0; width: var(--l, 0); height: var(--h, 0); border-radius: 11px; pointer-events: none;
  background: var(--accent); transform: translate(var(--x, 0), var(--y, 0));
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), 0.7); transition: transform 0.45s cubic-bezier(0.3, 1.2, 0.4, 1), width 0.45s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.panneau { scroll-margin-top: calc(var(--entete-h) + 24px); }
.panneau:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; border-radius: 6px; }
html:not(.onglets-prets) .panneau + .panneau { margin-top: clamp(56px, 8vw, 88px); }
.panneau-titre { font: 900 clamp(1.6rem, 3vw, 2.4rem)/1 var(--police-titre); text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 10px; }
html.anime:not(.reduit) .panneau.entre { animation: panneau 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes panneau { from { opacity: 0; transform: translateY(14px); } }
.joue .defis-tete { margin-bottom: 26px; }
.joue .defis code, .joue .chapeau code { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); padding: 0 0.3em; border-radius: 4px; }
.libre { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.libre .carte h4 { font: 900 1.35rem/1 var(--police-titre); text-transform: uppercase; margin-bottom: 10px; }
.campagne-tete { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }

/* les morceaux */
.nuit .piste { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background-color 0.2s, box-shadow 0.2s; }
.nuit .piste:hover { background: rgba(255, 255, 255, 0.1); }
.piste-bouton { transition: transform 0.15s, box-shadow 0.2s; }
.piste-bouton:hover { transform: scale(1.06); }
.piste-bouton:active { transform: scale(0.94); }
.piste-bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.piste:has(.piste-bouton[aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 30px -10px rgba(var(--accent-rgb), 0.7); }
.piste-bouton[aria-pressed="true"] { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.3); }

/* campagne (dans l'onglet) */
.campagne-tete .section-tete { margin-bottom: 0; }
.ecran-incline { padding: 8px; background: var(--fond-3); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ligne-forte), 0 30px 60px -24px rgba(0, 0, 0, 0.9); }
.ecran-incline img { border-radius: 8px; }
.ecran-incline::after { right: 22px; bottom: 22px; }
.regles { list-style: none; margin: 0 0 clamp(36px, 5vw, 56px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.regles li { position: relative; padding: 20px 20px 20px 74px; border-radius: 12px; background: var(--fond-3); box-shadow: inset 0 0 0 1px var(--ligne); color: var(--texte-moyen); font-size: 0.95rem; }
.regles strong { display: block; color: var(--texte-clair); font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; font-size: 1.1rem; line-height: 1.15; margin-bottom: 4px; }
.regles li::before { position: absolute; left: 18px; top: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 900; font-size: 1.15rem; line-height: 1; }
.regles li::before { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4); }
.regles li:nth-child(1)::before { content: "◎"; }
.regles li:nth-child(2)::before { content: "✓"; }
.regles li:nth-child(3)::before { content: "★"; }
.page-jeu .chapitre { transition: transform 0.25s ease; }
.page-jeu .chapitre:hover { transform: translateY(-4px); }


/* téléchargement, questions */
.page-jeu .telecharger { padding-top: clamp(80px, 11vw, 140px); }
.page-jeu .faq-section { padding-top: clamp(48px, 7vw, 88px); }
.page-jeu .faq { margin-top: 0; }
.page-jeu .faq summary { min-height: 44px; align-items: center; border-radius: 4px; transition: color 0.2s; }
.page-jeu .faq summary:hover { color: var(--accent); }
.page-jeu .faq summary:focus-visible { outline-offset: 4px; }
.page-jeu .faq details[open] summary { color: var(--accent); }
.page-jeu .faq summary::after { transition: transform 0.25s ease; }
.page-jeu .faq details[open] summary::after { transform: rotate(180deg); }


/* ------------------------------------------------------------------------------------------------ le jeu et Discord */
.statut-ligne span [data-statut-temps], .statut-ligne [data-statut-temps] { display: inline; font-variant-numeric: tabular-nums; }
.jeu-discord code { color: var(--accent-vif); background: rgba(var(--accent-rgb), 0.12); padding: 0 0.3em; border-radius: 4px; }
.jeu-discord .discord-dedans { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.jeu-discord .discord-points p, .jeu-discord .commandes li { color: var(--texte-moyen); }
.jeu-discord .commandes code { background: var(--fond-4); color: var(--accent); }

/* ------------------------------------------------------------------------------------------------ fin : télécharger | le serveur */
.jeu-fin { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(80px, 10vw, 128px); }
.fin-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); }
.fin-carte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 4vw, 40px); border-radius: 16px; overflow: hidden; text-decoration: none; }
.fin-carte p { margin: 0; }
.fin-carte .bouton { margin-top: auto; }
.fin-jeu { background: radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgb), 0.2), transparent 60%), var(--fond-2); color: var(--texte-fort); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 40px 80px -40px rgba(var(--accent-rgb), 0.4); }
.fin-jeu p { color: var(--texte-moyen); }
.fin-jeu .titre-section { font-size: clamp(2rem, 4vw, 3.2rem); }
.clap-fin-image { position: relative; aspect-ratio: 300 / 230; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6)); }
.clap-fin-image img { width: 100%; height: auto; }
.clap-barre { position: absolute; left: 0; top: 0.87%; transform-origin: 5.33% 83.3%; }
.fin-carte .clap-fin-image { width: 120px; transform: rotate(-6deg); }
/* le clap claque quand la carte arrive à l'écran (la barre finit toujours fermée) */
html.anime:not(.reduit) .fin-jeu.vu .clap-barre { animation: clap 0.5s 0.45s cubic-bezier(0.6, 0, 0.9, 0.4) both; }
@keyframes clap { 0% { transform: rotate(-32deg); } 70% { transform: rotate(0); } 85% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
.fin-serveur { padding: 0; background: var(--fond-2); color: #fff; box-shadow: inset 0 0 0 1px var(--ligne), 0 30px 70px -36px rgba(0, 0, 0, 0.9); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s; }
.fin-serveur img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fin-serveur-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 3vw, 32px); }
.fin-serveur-texte strong { font: 900 clamp(1.6rem, 2.8vw, 2.3rem)/0.95 var(--police-titre); text-transform: uppercase; letter-spacing: -0.02em; }
.fin-serveur-texte > span:not(.bouton) { color: var(--texte-moyen); }
.fin-serveur-texte code { color: var(--accent-vif); background: rgba(var(--accent-rgb), 0.12); padding: 0 0.3em; border-radius: 4px; }
.fin-serveur:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ligne-forte), 0 50px 110px -40px rgba(0, 0, 0, 0.95); }
.fin-serveur:hover img { transform: scale(1.04); }

/* barre « Télécharger » du téléphone (en bas d'écran, voir les écrans petits) */
.barre-mobile { display: none; }

/* ------------------------------------------------------------------------------------------------ écrans moyens et petits */
@media (max-width: 1080px) {
  .page-jeu .chiffres { grid-template-columns: repeat(3, 1fr); }
  .page-jeu .chiffres li:nth-child(4) { border-left: 0; }
  .page-jeu .chiffres li:nth-child(n + 4) { border-top: 1px solid var(--ligne); }
  .scene-dedans, .musique-bloc, .partage { grid-template-columns: 1fr; }
  .scene-tete { position: static; }
  .scene-repartir .scene-tete { display: block; }
  .regles { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .page-jeu { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .jo-dedans { grid-template-columns: 1fr; }
  .jeu-ouverture { min-height: 0; padding-top: calc(min(66vw, 460px) - 36px); }
  /* sur téléphone, l'affiche en bandeau en haut, le texte dessous sur le noir */
  .jo-fond { bottom: auto; height: min(66vw, 460px); }
  .jo-fond img { object-position: 62% 40%; }
  .jo-fond::after { background: linear-gradient(0deg, var(--fond) 0%, rgba(var(--fond-rgb), 0.55) 26%, transparent 60%); }
  .jo-viseur { display: none; }
  .storyboard { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .campagne-tete, .libre, .fin-duo, .jeu-discord .discord-dedans { grid-template-columns: 1fr; }
  .ecran-incline { max-width: 520px; }
  .frise-tc { display: none; }
  /* en 9:16 sur téléphone, le cadre gagne en hauteur plutôt que de rétrécir */
  .format[data-format="portrait"] { --h: min(68svh, 520px); }
  .barre-mobile {
    display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    padding: 8px; border-radius: 16px; background: rgba(var(--fond-rgb), 0.94); box-shadow: inset 0 0 0 1px var(--ligne-forte), 0 16px 40px -10px rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s, visibility 0.35s;
  }
  .barre-mobile .bouton-principal { flex: 1; justify-content: center; }
  .barre-mobile .bouton-principal::before { transform: translate(4px, 4px); }
  .bouton-icone { width: 56px; padding: 0; justify-content: center; flex: none; }
  .barre-mobile.cachee { transform: translateY(150%); opacity: 0; visibility: hidden; }
}
@media (max-width: 560px) {
  .jeu-ouverture .titre-geant { font-size: clamp(3rem, 15vw, 4.4rem); }
  .page-jeu .chiffres { grid-template-columns: repeat(2, 1fr); }
  .page-jeu .chiffres li { padding: 16px 12px; }
  .page-jeu .chiffres li:nth-child(n) { border-left: 0; border-top: 1px solid var(--ligne); }
  .page-jeu .chiffres li:nth-child(even) { border-left: 1px solid var(--ligne); }
  .page-jeu .chiffres li:nth-child(-n + 2) { border-top: 0; }
  .storyboard { gap: 26px 12px; }
  .sb-case { grid-template-columns: 1fr; padding: 0 10px 12px; }
  .sb-image { margin: 0 -10px 10px; }
  .sb-num { grid-row: auto; font-size: 2rem; }
  .sb-case strong { font-size: 1.1rem; }
  .sb-texte { font-size: 0.82rem; }
  .frise-dedans { gap: 0; }
  .frise-piste ol { gap: 3px; }
  .frise-piste a { flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px 6px; font-size: 0.72rem; }
  .frise-piste b { width: 18px; height: 18px; font-size: 0.68rem; }
  .scene-preparer .decors { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .moniteur-nom { padding: 28px 12px 10px; }
  .plans-choix button, .format-choix button { padding: 0 14px; font-size: 0.86rem; }
  .onglets-jeu [role="tab"] small { display: none; }
  .onglets-jeu [role="tab"] strong { font-size: 0.86rem; }
  .fin-carte .bouton { width: 100%; justify-content: center; }
}
@media print {
  .barre-mobile, .jo-viseur, .frise, .styles-faisceaux, .onglets-jeu { display: none !important; }
  .nuit { background: none; color: var(--texte); }
  .panneau[hidden] { display: block !important; }
}