/* OnCallSim : mobile d'abord. Les couleurs viennent du thème (variables --fond, --accent…, posées par commun.js). */
:root { --fond:#0B1020; --fondCarte:#141B34; --texte:#EAF0FF; --accent:#00E5FF; --accent2:#B65CFF; --juste:#2EE59D; --faux:#FF4D6D; --alerte:#FFC857; --halo1: rgba(0,229,255,.18); --halo2: rgba(182,92,255,.18); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--fond); color: var(--texte); font: 17px/1.4 Inter, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { background-image: radial-gradient(circle at 20% -10%, var(--halo1), transparent 45%), radial-gradient(circle at 100% 0%, var(--halo2), transparent 40%); }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 90px; }
h1, h2, h3 { font-family: Orbitron, Inter, system-ui, sans-serif; letter-spacing: .02em; margin: .2em 0 .5em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; }
.carte { background: var(--fondCarte); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px; margin: 12px 0; }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
input, select, textarea { width: 100%; font: inherit; color: var(--texte); background: var(--fond); border: 2px solid rgba(255,255,255,.18); border-radius: 12px; padding: 14px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 120px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
button { font: inherit; font-weight: 700; color: var(--texte); background: var(--fondCarte); border: 2px solid rgba(255,255,255,.2); border-radius: 14px; padding: 14px 18px; min-height: 52px; cursor: pointer; }
button.primaire { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #06101f; border: 0; }
button:disabled { opacity: .45; cursor: default; }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix { min-height: 96px; font-size: 1.1rem; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.choix .forme { font-size: 1.7rem; width: 2rem; text-align: center; flex: none; }
.c0 { background: var(--c0, #3a1e57); border-color: var(--b0, #b65cff); }
.c1 { background: var(--c1, #0f3c52); border-color: var(--b1, #00e5ff); }
.c2 { background: var(--c2, #5a4410); border-color: var(--b2, #ffc857); }
.c3 { background: var(--c3, #0f4a36); border-color: var(--b3, #2ee59d); }
.c4 { background: var(--c4, #5a1f33); border-color: var(--b4, #ff4d6d); }
.c5 { background: var(--c5, #2d3a5a); border-color: var(--b5, #9fb4ff); }
.choix.bonne { outline: 4px solid var(--juste); } .choix.fausse { opacity: .4; } .choix.choisi { outline: 4px solid var(--accent); }
.barre { height: 12px; background: rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; margin: 10px 0; }
.barre > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); width: 100%; transition: width .15s linear; }
.barre.fin > div { background: var(--faux); }
.pouvoirs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pouvoirs button { min-height: 44px; padding: 8px 12px; font-size: .9rem; }
.gros { font-size: 3.2rem; font-weight: 800; letter-spacing: .15em; text-align: center; color: var(--accent); font-family: Orbitron, system-ui, sans-serif; }
.centre { text-align: center; }
.juste { color: var(--juste); } .faux { color: var(--faux); } .discret { opacity: .75; font-size: .9rem; }
.ligne { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ligne:first-child { border-top: 0; }
.podium { display: flex; gap: 8px; align-items: flex-end; justify-content: center; margin: 16px 0; }
.podium > div { flex: 1; min-width: 0; background: var(--fondCarte); border: 1px solid rgba(255,255,255,.15); border-radius: 12px 12px 0 0; text-align: center; padding: 10px 4px; }
.podium .p1 { min-height: 150px; border-color: var(--alerte); } .podium .p2 { min-height: 115px; } .podium .p3 { min-height: 90px; }
#logos { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 14px; background: rgba(255,255,255,.92); border-radius: 14px; margin-top: 24px; }
#logos img { height: 38px; object-fit: contain; }
#bandeau { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: #5a1f33; text-align: center; display: none; z-index: 9; }
#bandeau.visible { display: block; }
#qr svg { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 12px; }
.question-texte { font-size: 1.35rem; font-weight: 700; margin: 8px 0 14px; }
.question-image { max-width: 100%; max-height: 220px; border-radius: 12px; display: block; margin: 0 auto 12px; }
@media (min-width: 900px) { main { max-width: 980px; } .choix { min-height: 120px; font-size: 1.3rem; } .question-texte { font-size: 1.9rem; } }

.perso { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--fondCarte), var(--fond)); border: 2px solid rgba(255,255,255,.18); flex: none; }
.perso img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.perso-initiale { font-weight: 800; color: var(--accent); font-size: 1.3rem; }
.choix-perso { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px; margin: 6px 0; }
.choix-perso button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; min-height: 0; font-size: .7rem; line-height: 1.1; text-align: center; }
.choix-perso button .perso { width: 56px; height: 56px; }
.choix-perso button.actif { outline: 3px solid var(--accent); background: var(--fondCarte); }

/* Écran de question de l'animateur : image de la question en plein écran derrière le texte et les réponses (esprit « scène »). */
.scene { position: relative; min-height: 78vh; border-radius: 16px; overflow: hidden; background: #10182c center/cover no-repeat; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 14px; }
.scene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,28,.35), rgba(8,12,28,.15) 45%, rgba(8,12,28,.55)); pointer-events: none; }
.scene > * { position: relative; }
.scene .scene-haut { background: rgba(255,255,255,.94); color: #14192b; border-radius: 12px; padding: 14px 18px; font-weight: 800; font-size: 1.5rem; text-align: center; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.scene .scene-milieu { display: flex; justify-content: space-between; align-items: flex-end; flex: 1; }
.scene .rond { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.95); color: #14192b; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 1.8rem; box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.scene .rond small { font-size: .62rem; font-weight: 600; opacity: .7; }
.scene .grille .choix { box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.histo { display: flex; align-items: flex-end; justify-content: center; gap: 14px; min-height: 120px; padding: 6px 4px 0; }
.histo .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 56px; }
.histo .col .tige { width: 56px; border-radius: 8px 8px 0 0; min-height: 6px; transition: height .5s ease; }
.histo .col b { font-size: 1.1rem; }
.histo .col.juste-col .marque { color: var(--juste); }
.histo .col .marque { font-size: 1.2rem; min-height: 1.4rem; }
.bandeau-points { margin: 10px auto; max-width: 420px; padding: 12px 18px; border-radius: 12px; font-size: 2rem; font-weight: 800; text-align: center; background: var(--juste); color: #06210f; }
.bandeau-points.zero { background: var(--faux); color: #fff; }
.scene .decompte { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9rem; font-weight: 900; color: #fff; background: rgba(8,12,28,.55); text-shadow: 0 6px 30px rgba(0,0,0,.6); z-index: 2; }

/* Podium animé : les marches montent l'une après l'autre (3e, 2e, puis 1re) ; confettis qui tombent. */
@keyframes monte { from { transform: scaleY(.05); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
.podium > div { transform-origin: bottom center; animation: monte .8s ease-out both; }
.podium .p3 { animation-delay: .2s; } .podium .p2 { animation-delay: 1s; } .podium .p1 { animation-delay: 1.8s; }
.confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confettis i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: tombe linear forwards; }
@keyframes tombe { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .podium > div { animation: none; } }

/* Réponses plus compactes dans la scène (textes médicaux longs) : plus petites sur téléphone comme sur ordinateur. */
.scene .grille { gap: 8px; }
.scene .choix { min-height: 56px; font-size: .95rem; line-height: 1.25; padding: 8px 10px; gap: 8px; }
.scene .choix .forme { font-size: 1.15rem; width: 1.4rem; }
@media (min-width: 900px) { .scene .choix { min-height: 68px; font-size: 1.05rem; } .scene { min-height: 64vh; } }
.scene { min-height: 56vh; }

/* Téléphone : les deux colonnes de réponses ne dépassent jamais de la scène ; l'en-tête reste sur une ligne propre. */
.scene { box-sizing: border-box; max-width: 100%; }
.scene .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scene .choix { min-width: 0; overflow-wrap: anywhere; hyphens: auto; box-sizing: border-box; }
.scene .scene-haut { overflow-wrap: anywhere; }

/* Scores en fête : le gain « saute » à l'écran, les lignes du classement entrent une à une, le joueur pulse, le podium se dévoile. */
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes glisse { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes saute { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(0); } 85% { transform: translateY(-5px); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,63,.0); } 50% { box-shadow: 0 0 0 8px rgba(255,210,63,.35); } }
.bandeau-points.fete { animation: pop .6s ease-out both; }
.mascotte { display: flex; justify-content: center; margin: 4px 0; }
.mascotte .perso { animation: saute 1s ease-in-out 2; }
.score-ligne { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin: 6px 0; border-radius: 12px; background: rgba(255,255,255,.07); animation: glisse .5s ease-out both; }
.score-ligne.moi { background: rgba(255,210,63,.18); border: 2px solid var(--alerte, #ffd23f); animation: glisse .5s ease-out both, pulse 1.4s ease-in-out 1s 2; }
.score-ligne .rang { width: 2rem; font-weight: 800; font-size: 1.3rem; }
.score-ligne .monte { color: var(--juste); font-weight: 800; margin-left: 6px; }
.score-ligne b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.podium .nom-podium { font-weight: 700; margin-top: 4px; }
.podium b.pts-podium { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .bandeau-points.fete, .score-ligne, .mascotte .perso { animation: none; } }

/* Écrans du joueur : pastille du numéro et capsule du type en haut, barre permanente avatar + pseudo + score en bas. */
.entete-q { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.entete-q .pastille { min-width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: #14192b; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.entete-q .pastille.vide { visibility: hidden; }
.entete-q .capsule { padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: #14192b; font-weight: 700; font-size: .9rem; }
.barre-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(90deg, rgba(10,20,60,.97), rgba(8,12,28,.97)); border-top: 1px solid rgba(255,255,255,.14); }
.barre-bas .score-bas { margin-left: auto; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Hôte : barre permanente (adresse, code, QR, joueurs, son, plein écran) et bouton « Ignorer le chrono » en haut à droite de la question. */
.barre-hote { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: -4px -4px 10px; border-radius: 12px; background: rgba(8,12,28,.92); border: 1px solid rgba(255,255,255,.14); font-size: .95rem; }
.barre-hote .adresse { flex: 1; min-width: 0; }
.barre-hote .code-haut { letter-spacing: .08em; font-size: 1.1em; }
.barre-hote .ico { width: auto; min-height: 0; padding: 4px 10px; font-size: 1.1rem; }
.barre-hote .compte-joueurs { font-weight: 700; white-space: nowrap; }
.scene .ignorer { position: absolute; top: 12px; right: 12px; z-index: 3; width: auto; min-height: 0; padding: 6px 12px; font-size: .9rem; background: rgba(8,12,28,.75); }
.scene .scene-haut { margin-top: 38px; }
.voile-qr { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(8,12,28,.92); cursor: pointer; }

/* Podium en scène : projecteurs, blocs de hauteurs différentes (1er au centre et le plus haut), personnages debout dessus. */
.scene-podium { position: relative; margin: 14px -4px; padding: 56px 8px 0; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(80,110,255,.35), rgba(8,12,28,.96) 62%); min-height: 470px; display: flex; align-items: flex-end; }
.scene-podium .projecteurs { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; background: conic-gradient(from 200deg at 20% -10%, transparent 0 8%, rgba(255,255,255,.14) 10% 14%, transparent 16% 100%), conic-gradient(from 150deg at 80% -10%, transparent 0 8%, rgba(255,255,255,.14) 10% 14%, transparent 16% 100%), conic-gradient(from 175deg at 50% -14%, transparent 0 7%, rgba(255,210,63,.22) 9% 14%, transparent 16% 100%); }
.scene-podium.lumiere .projecteurs { opacity: 1; }
.scene-podium .marches { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.scene-podium .col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(40px) scale(.85); transition: opacity .5s ease, transform .6s cubic-bezier(.2,1.4,.4,1); }
.scene-podium .col.visible { opacity: 1; transform: none; }
.scene-podium .col.vide { visibility: hidden; }
.scene-podium .perso-podium { margin-bottom: 6px; z-index: 2; }
.scene-podium .col.visible .perso-podium { animation: saute 1.1s ease-in-out 3; }
.scene-podium .nom-podium { font-weight: 800; text-align: center; font-size: .95rem; line-height: 1.15; padding: 0 4px 6px; min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; overflow-wrap: anywhere; }
.scene-podium .bloc { width: 100%; box-sizing: border-box; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 8px; color: #14192b; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 -4px 18px rgba(255,210,63,.15); }
.scene-podium .r1 .bloc { height: 190px; background: linear-gradient(180deg, #ffe27a, #e0a800); }
.scene-podium .r2 .bloc { height: 140px; background: linear-gradient(180deg, #eef1f6, #aab2c0); }
.scene-podium .r3 .bloc { height: 100px; background: linear-gradient(180deg, #f0b27a, #b9692b); }
.scene-podium .medaille { font-size: 1.6rem; line-height: 1; }
.scene-podium .numero { font-size: 2.2rem; font-weight: 900; line-height: 1; }
.scene-podium .pts-podium { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.eclats { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.eclats i { position: absolute; width: 9px; height: 9px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .scene-podium .col { transition: none; opacity: 1; transform: none; } .scene-podium .projecteurs { opacity: 1; } .scene-podium .col.visible .perso-podium { animation: none; } }

/* Questions à points doubles (les deux dernières) : badge doré affiché avant et pendant la question. */
@keyframes brille { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,210,63,.6); } 50% { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(255,210,63,0); } }
.scene .badge-double { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 6px 14px; border-radius: 999px; background: linear-gradient(180deg, #ffe27a, #e0a800); color: #14192b; font-weight: 900; letter-spacing: .04em; animation: brille 1.4s ease-in-out infinite; }
.scene .decompte { flex-direction: column; }
.scene .decompte .double-annonce { font-size: 2rem; font-weight: 900; color: #ffd23f; margin-bottom: 6px; text-shadow: 0 4px 18px rgba(0,0,0,.6); }

/* Écran de fin : podium à gauche, trois blocs de menu à droite (sous le podium sur téléphone) ; marque et titre du quiz au-dessus du podium. */
.fin-grille { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .fin-grille { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); align-items: start; } }
.marque-podium { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.logo-mq { font-weight: 900; font-size: 1.5rem; letter-spacing: .02em; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.titre-podium { padding: 4px 14px; border-radius: 10px; background: rgba(255,255,255,.92); color: #14192b; font-weight: 800; font-size: .95rem; }
.menu-fin { display: flex; flex-direction: column; gap: 12px; }
.menu-fin-bloc { padding: 0 !important; overflow: hidden; }
.menu-fin-lien { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: inherit; text-align: left; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.menu-fin-lien:last-child { border-bottom: 0; }
.menu-fin-lien:hover { background: rgba(255,255,255,.08); }
.menu-fin-icone { font-size: 1.3rem; width: 1.8rem; text-align: center; }
.resume-chiffres { display: flex; justify-content: space-around; text-align: center; gap: 10px; margin: 8px 0 12px; }
.etoiles { display: flex; gap: 6px; margin: 8px 0; }
.etoile { width: auto; min-height: 0; padding: 4px 10px; font-size: 1.8rem; background: transparent; border: 0; color: rgba(255,255,255,.35); cursor: pointer; }
.etoile.on { color: #ffd23f; }

.entete-q .capsule.double { background: linear-gradient(180deg, #ffe27a, #e0a800); }

/* Compte à rebours 3-2-1 : petit bandeau au-dessus de la question (la question reste lisible, rien ne la recouvre). */
.bandeau-decompte { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 10px; font-size: 1.1rem; }
.rond-decompte { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #14192b; font-weight: 900; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.4); animation: pop .5s ease-out; }

/* Créateur de quiz */
main.large { max-width: 1280px; }
.creer-colonnes { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 4px; }
@media (min-width: 1000px) { .creer-colonnes { grid-template-columns: 230px minmax(0, 1fr) 300px; align-items: start; } }
.creer-rangee { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.creer-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 520px; overflow-y: auto; }
.creer-vignette { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 0; padding: 8px 10px; text-align: left; border-radius: 10px; background: rgba(255,255,255,.06); border: 2px solid transparent; color: inherit; font: inherit; cursor: pointer; flex-wrap: wrap; }
.creer-vignette.actif { border-color: var(--accent); background: rgba(255,255,255,.12); }
.creer-num { min-width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); color: #14192b; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.creer-resume { flex: 1; min-width: 0; font-size: .9rem; }
.creer-scene { min-height: 420px; }
.creer-question { width: 100%; box-sizing: border-box; resize: vertical; font-size: 1.25rem !important; text-align: center; margin-top: 38px; }
.creer-reponse { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 2px solid rgba(255,255,255,.5); color: inherit; font: inherit; padding: 4px; }
.creer-juste, .creer-x { width: auto; min-height: 0; padding: 2px 8px; font-size: 1.3rem; background: rgba(255,255,255,.18); border: 0; border-radius: 8px; color: inherit; cursor: pointer; }
.creer-juste[aria-pressed="true"] { background: var(--juste); color: #06210f; }
.creer-champ { margin: 10px 0; }
.creer-titre-champ { font-weight: 700; margin-bottom: 4px; }
.creer-grille-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 8px 0; }
.creer-lien { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.creer-lien a { color: var(--accent); word-break: break-all; }
button.lien { background: transparent; border: 0; color: var(--accent); text-decoration: underline; width: auto; min-height: 0; padding: 2px 0; cursor: pointer; }

.rond-decompte { animation: none; }
.rond-decompte.pop { animation: pop .5s ease-out; }

/* Réactions des joueurs, logo OnCallSim dans la scène, plateau d'emojis du téléphone. */
@keyframes monte-emoji { from { transform: translateY(0) scale(.7); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-85vh) scale(1.5); opacity: 0; } }
.emoji-flottant { position: fixed; bottom: 6vh; font-size: 2.6rem; z-index: 80; pointer-events: none; animation: monte-emoji 3s ease-out forwards; }
.scene .logo-scene { position: absolute; top: 12px; left: 12px; z-index: 3; font-weight: 900; font-size: 1.05rem; padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.92); color: #14192b; }
.scene .badge-double { left: 50%; margin-left: -62px; top: 10px; }
.btn-reagir { width: auto; min-height: 0; padding: 6px 12px; font-size: .95rem; border-radius: 999px; }
.plateau-reactions { position: absolute; right: 10px; bottom: calc(100% + 6px); display: flex; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(8,12,28,.97); border: 1px solid rgba(255,255,255,.2); }
.plateau-reactions button { width: auto; min-height: 0; padding: 4px 8px; font-size: 1.7rem; background: transparent; border: 0; cursor: pointer; }

/* Contraste renforcé : texte blanc pur, bordures épaisses, textes discrets pleinement lisibles. */
html.contraste { --texte: #ffffff; --fond: #000000; --fondCarte: #0b0b0b; }
html.contraste body { background: #000; background-image: none; }
html.contraste .carte, html.contraste .barre-hote, html.contraste .barre-bas { border: 2px solid #fff; background: #000; }
html.contraste .choix { border-width: 4px; border-style: solid; border-color: #fff; font-weight: 800; }
html.contraste .discret { opacity: 1; }
html.contraste .scene::before { background: rgba(0,0,0,.55); }

.etiquette-voix { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 90; padding: 6px 14px; border-radius: 999px; background: rgba(8,12,28,.95); color: #fff; border: 1px solid rgba(255,255,255,.3); font-size: .9rem; pointer-events: none; }

/* Types de question spéciaux : nombre, zone sur image, TCS. */
.widget-nombre { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; align-items: stretch; }
.ligne-nombre { display: flex; gap: 10px; align-items: center; }
.champ-nombre { flex: 1; font-size: 2rem; text-align: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.95); color: #14192b; border: 3px solid var(--accent); font-weight: 800; }
.unite-nombre { font-size: 1.4rem; font-weight: 800; }
.widget-zone { margin: 10px 0; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.cadre-zone { position: relative; width: 100%; line-height: 0; border-radius: 12px; overflow: hidden; touch-action: manipulation; cursor: crosshair; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.cadre-zone img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.repere-zone { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,60,90,.55); box-shadow: 0 0 0 3px rgba(0,0,0,.6); pointer-events: none; }
.ellipse-zone { position: absolute; border: 4px solid #3ddc97; background: rgba(61,220,151,.22); border-radius: 50%; pointer-events: none; }
.point-classe { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255,92,122,.85); border: 2px solid #fff; pointer-events: none; }
.point-classe.juste-point, .puce-nombre.juste-point { background: #3ddc97; color: #06210f; }
.puces-nombres { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-nombre { padding: 4px 10px; border-radius: 999px; background: rgba(255,92,122,.8); font-weight: 800; }
.solution-nombre { font-size: 1.15rem; }
.panel-tcs { display: flex; gap: 10px; align-items: flex-end; justify-content: center; min-height: 100px; }
.col-panel { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.tige-panel { width: 36px; background: linear-gradient(180deg, var(--accent), var(--accent2)); border-radius: 6px 6px 0 0; }
.consigne-speciale { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.92); color: #14192b; font-weight: 800; text-align: center; margin-top: auto; }

/* Police lisible (dyslexie) : même contenu, lettres et lignes plus aérées, italiques évités. */
html.dyslexie body, html.dyslexie button, html.dyslexie input, html.dyslexie select, html.dyslexie textarea { font-family: Verdana, 'Trebuchet MS', Tahoma, sans-serif; letter-spacing: .04em; word-spacing: .12em; line-height: 1.6; }
html.dyslexie em, html.dyslexie i { font-style: normal; }
.panneau-participants .ligne-part { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.1); }
.panneau-participants .ligne-part .nom { flex: 1 1 140px; font-weight: 700; }
.panneau-participants .alerte-triche { color: #ffb84f; font-weight: 700; }
.analyse-rapport ul { margin: 6px 0 6px 18px; padding: 0; }
.analyse-rapport .barre-objectif { height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.analyse-rapport .barre-objectif > div { height: 100%; background: var(--accent, #F2C14E); }

/* Types à suite : ordre, appariement, étiquettes ; patient coopératif ; mur de questions ; diapo ; récit de mission */
.liste-ordre { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.item-ordre, .item-appar { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 3px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: inherit; font-weight: 700; }
.item-ordre.pris, .item-appar.pris { background: rgba(61,220,151,.18); border-color: #3ddc97; }
.item-appar.actif { outline: 3px solid var(--accent, #F2C14E); }
.rang-ordre { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #14192b; font-weight: 800; flex: none; }
.widget-appariement { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.col-appar { display: flex; flex-direction: column; gap: 8px; }
.liste-etiquettes { display: grid; gap: 8px; margin: 10px 0; }
.ligne-etiquette { display: flex; align-items: center; gap: 10px; }
.ligne-etiquette select { flex: 1; }
.repere-zone[data-n]::after { content: attr(data-n); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 .8rem/1 system-ui; color: #fff; text-shadow: 0 0 3px #000; }
.etiquette-solution { position: absolute; transform: translate(-50%, -50%); background: #3ddc97; color: #06210f; font: 800 .8rem/1.2 system-ui; padding: 3px 8px; border-radius: 8px; border: 2px solid #fff; white-space: nowrap; pointer-events: none; }
.liste-solution { text-align: left; margin: 6px 0 6px 20px; }
.liste-solution li.ok { color: #3ddc97; }
.liste-solution li.ko { color: #ff8a9d; }
.barre-patient { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.35); font-weight: 700; flex-wrap: wrap; }
.jauge-patient { flex: 1 1 140px; height: 14px; border-radius: 8px; background: rgba(255,255,255,.18); overflow: hidden; }
.jauge-patient > div { height: 100%; transition: width .6s; }
.recit { padding: 10px 14px; margin: 8px 0; border-left: 5px solid var(--accent, #F2C14E); background: rgba(255,255,255,.08); border-radius: 8px; font-style: italic; }
.diapo-scene { text-align: center; padding: 18px; }
.diapo-scene img { max-width: 100%; max-height: 52vh; border-radius: 12px; }
.diapo-scene .diapo-texte { font-size: 1.6rem; font-weight: 800; margin: 12px 0; white-space: pre-line; }
.mur-question { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.1); }
.mur-question .texte { flex: 1 1 200px; }
.certitude { display: flex; gap: 6px; justify-content: center; margin: 8px 0; flex-wrap: wrap; }
.certitude button { width: auto; padding: 8px 12px; border-radius: 999px; }
.certitude button[aria-pressed="true"] { background: var(--accent, #F2C14E); color: #14192b; }
.item-ordre.faute { background: rgba(255,92,122,.22); border-color: #ff5c7a; }
.conflit { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.bulle-conflit { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.14); }
.bulle-conflit p { margin: 4px 0; }
.moi-conflit { align-self: flex-end; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: rgba(79,195,247,.28); margin: 6px 0 4px auto; max-width: 90%; }
.menu-conflit, .decision-conflit { display: flex; flex-direction: column; gap: 8px; }
.menu-conflit button { text-align: left; }

.carte-revision { cursor: pointer; min-height: 220px; display: flex; flex-direction: column; justify-content: center; }
.carte-revision.retournee { cursor: default; }
.carte-revision .gros-verso { font-size: 1.4rem; font-weight: 800; }
.resultat-calc .gros-verso { font-size: 1.25rem; font-weight: 800; margin: 8px 0 2px; }
.etapes-protocole { list-style: none; padding: 0; margin: 8px 0; }
.etapes-protocole li { padding: 10px 6px; border-top: 1px solid rgba(255,255,255,.1); }
.etapes-protocole li.faite { opacity: .55; text-decoration: line-through; }
.avis-carte { border: 2px solid rgba(242,193,78,.5); }
.avis-accueil { max-width: 720px; margin: 10px auto 24px; padding: 0 14px; }

.grille-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.perso-collection { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 3px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; font-size: .75rem; }
.perso-collection.favori { border-color: var(--accent, #F2C14E); background: rgba(242,193,78,.18); }
.perso-collection.verrou { opacity: .45; }
.perso-collection .cadenas { font-size: 2rem; height: 64px; display: flex; align-items: center; }
.image-nette { display: block; width: 100%; max-height: 42vh; object-fit: contain; background: #fff; border-radius: 12px; margin: 8px auto; }

/* Image qui se dévoile (revelation) : floue puis nette sur la durée de la question ; le décalage négatif reprend l'animation là où elle en est. */
@keyframes reveler { from { filter: blur(22px) saturate(0.7); } to { filter: blur(0) saturate(1); } }
.image-nette.revelation { animation: reveler var(--duree, 20s) linear both; }
@media (prefers-reduced-motion: reduce) { .image-nette.revelation { animation: none; filter: none; } }

/* Réponse en image */
.choix-image { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.choix-image img { max-width: 100%; max-height: 110px; object-fit: contain; background: #fff; border-radius: 8px; }

/* « Corriger » : compte rendu rédigé sur une feuille à en-tête d'hôpital, phrases surlignées au marqueur, cachet du médecin */
.cr-feuille { background: #fdfcf8; color: #1b1b1b; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: 24px 26px 18px; margin: 12px auto; max-width: 780px; font-family: Georgia, 'Times New Roman', serif; text-align: left; }
.cr-entete { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; border-bottom: 3px double #1b3a5f; padding-bottom: 12px; }
.cr-logo { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #1b3a5f; color: #1b3a5f; display: grid; place-items: center; font-size: 1.9rem; line-height: 1; }
.cr-hopital-nom { font-weight: 700; letter-spacing: .1em; color: #1b3a5f; font-size: 1.05rem; }
.cr-hopital-service { font-size: .9rem; color: #1b3a5f; }
.cr-hopital-ligne { font-size: .72rem; color: #666; margin-top: 2px; }
.cr-dossier { text-align: right; font: .74rem 'Courier New', monospace; color: #555; line-height: 1.5; }
.cr-titre { text-align: center; margin: 16px 0 12px; font-size: 1.15rem; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 5px; color: #1b1b1b; }
.cr-texte { display: block; }
.cr-par { margin: 0 0 12px; font-size: 1.06rem; line-height: 1.65; text-align: justify; hyphens: auto; }
.cr-rubrique { font-variant: small-caps; letter-spacing: .04em; font-weight: 700; color: inherit; }
.cr-seg { cursor: pointer; border-radius: 3px; padding: 1px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cr-seg:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.cr-erreur { background: #ffe14d; text-decoration: underline wavy #c62828; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.cr-pied { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-top: 14px; border-top: 1px solid #bbb; padding-top: 12px; font-size: .8rem; color: #666; flex-wrap: wrap; }
.cr-cachet { position: relative; min-width: 250px; min-height: 96px; transform: rotate(-3deg); color: #1d3a8a; }
.cr-cachet-cadre { display: flex; flex-direction: column; gap: 1px; border: 2px solid #1d3a8a; border-radius: 6px; padding: 6px 10px; font: .72rem 'Courier New', monospace; opacity: .85; box-shadow: inset 0 0 0 2px rgba(255, 253, 248, 1), inset 0 0 0 3px #1d3a8a; }
.cr-cachet-cadre b { font-size: .86rem; letter-spacing: .06em; }
.cr-paraphe { position: absolute; left: 70px; top: 34px; font: italic 1.9rem 'Brush Script MT', 'Segoe Script', 'Bradley Hand', cursive; color: #17399c; transform: rotate(-6deg); opacity: .9; pointer-events: none; }
@media (max-width: 560px) { .cr-feuille { padding: 16px 14px 12px; } .cr-entete { grid-template-columns: auto 1fr; } .cr-dossier { grid-column: 1 / -1; text-align: left; } .cr-par { text-align: left; } .cr-cachet { min-width: 0; width: 100%; } }

/* Quiz à partir d'un cours (qc-) et rapport combiné (rc-) */
.qc-depot { border: 2px dashed rgba(255,255,255,.3); border-radius: 14px; padding: 14px; margin: 12px 0; text-align: center; }
.qc-depot.survol, .qc-depot:focus-within { border-color: var(--accent); background: rgba(255,255,255,.06); }
.qc-depot input[type=file] { width: 100%; max-width: 420px; padding: 8px; }
.qc-avertissement { background: rgba(255,200,60,.14); border: 1px solid rgba(255,200,60,.55); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.qc-etiquette { display: block; margin: 10px 0 4px; font-weight: 700; font-size: .9rem; opacity: .85; }
.qc-question.qc-ecartee { opacity: .5; }
.qc-reponse { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.qc-reponse input[type=radio], .qc-question input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.qc-reponse input[type=text] { padding: 8px 10px; }
.rc-courbe { width: 100%; height: auto; max-height: 300px; color: var(--texte); margin: 8px 0; }
.rc-defile { overflow-x: auto; }
.rc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rc-table caption { text-align: left; padding: 6px 0; }
.rc-table th, .rc-table td { text-align: left; padding: 6px 8px; border-top: 1px solid rgba(255,255,255,.1); vertical-align: top; }
.rc-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rc-chiffre { display: flex; flex-direction: column; background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; }
.rc-chiffre b { font-size: 1.6rem; }

/* ---------- Parcours ordonnés et mode Apprendre ---------- */
.liste-parcours { list-style: none; padding: 0; margin: 12px 0; }
.etape-parcours { display: flex; gap: 12px; align-items: flex-start; background: var(--fondCarte); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 14px; margin: 10px 0; }
.etape-parcours.verrou { opacity: .6; }
.etape-parcours.encours { border-color: var(--accent); }
.etape-parcours.faite { border-color: var(--juste); }
.etape-parcours p { margin: 4px 0; }
.etape-icone { font-size: 1.5rem; min-width: 2rem; text-align: center; }
.etape-parcours.faite .etape-icone { color: var(--juste); }
.etape-corps { flex: 1; min-width: 0; }
a.bouton-lien { display: inline-block; padding: 10px 18px; border-radius: 14px; text-decoration: none; font-weight: 700; color: var(--texte); border: 2px solid rgba(255,255,255,.2); background: var(--fondCarte); }
a.bouton-lien.primaire { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #06101f; border: 0; }
a.bouton-lien:focus-visible, button:focus-visible { outline: 3px solid var(--alerte); outline-offset: 2px; }
.badge-brouillon { display: inline-block; margin: 4px 0; padding: 2px 10px; border-radius: 999px; background: rgba(255,200,87,.18); color: var(--alerte); font-size: .85rem; font-weight: 700; }
.carte-recit { min-height: 45vh; display: flex; flex-direction: column; justify-content: center; }
.carte-recit.anime { animation: entree-recit .25s ease-out; }
.texte-recit { font-size: 1.3rem; line-height: 1.5; margin: 8px 0; }
.mini-qcm { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.choix-recit.bon { border-color: var(--juste); }
.choix-recit.mauvais { border-color: var(--faux); }
@keyframes entree-recit { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .carte-recit.anime { animation: none; } }

/* Question ouverte courte, nuage de mots. */
.champ-ouverte { font-size: 1.4rem; text-align: center; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.95); color: #14192b; border: 3px solid var(--accent); font-weight: 700; }
.a-valider-ligne { gap: 10px; flex-wrap: wrap; align-items: center; }
.nuage-mots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; padding: 18px 8px; line-height: 1.1; font-weight: 800; }
.mot-nuage { position: relative; display: inline-block; padding: 2px 4px; }
.mot-nuage sup { font-size: .35em; opacity: .7; margin-left: 2px; }
.masquer-mot { position: absolute; top: -8px; right: -10px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; font-size: .75rem; line-height: 1; opacity: .35; }
.mot-nuage:hover .masquer-mot, .masquer-mot:focus { opacity: 1; }

/* Thermomètre de l'amphi (écran de l'animateur) et réactions de rythme (téléphone). */
.thermo-rythme { position: relative; }
.thermo-rythme .thermo-bouton { width: auto; min-height: 0; padding: 4px 12px; border-radius: 999px; font-weight: 800; border: 2px solid transparent; }
.thermo-rythme.vert .thermo-bouton { background: #1f7a4f; color: #fff; }
.thermo-rythme.orange .thermo-bouton { background: #c77d0a; color: #fff; }
.thermo-rythme.rouge .thermo-bouton { background: #c0334d; color: #fff; }
.thermo-panneau { position: fixed; top: 58px; right: 12px; z-index: 40; width: min(340px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px; background: rgba(8,12,28,.97); border: 1px solid rgba(255,255,255,.25); }
.thermo-jauge { height: 16px; border-radius: 8px; background: rgba(255,255,255,.14); overflow: hidden; margin: 8px 0; }
.thermo-jauge > div { height: 100%; transition: width .4s; }
.thermo-panneau.vert .thermo-jauge > div { background: #2EE59D; }
.thermo-panneau.orange .thermo-jauge > div { background: #FFC857; }
.thermo-panneau.rouge .thermo-jauge > div { background: #FF4D6D; }
.plateau-rythme { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.2); }
.plateau-rythme .titre-rythme { width: 100%; font-size: .8rem; opacity: .8; }
.plateau-rythme button { width: auto; min-height: 0; padding: 6px 10px; font-size: .9rem; border-radius: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); }
.plateau-reactions { flex-direction: column; }
.plateau-reactions .rangee-emojis { display: flex; gap: 6px; }

/* Équipe de garde en direct : discussion d'équipe avant de répondre. */
.discussion-equipe { margin: 10px 0; }
.discussion-equipe .fil { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; margin: 8px 0; border-radius: 12px; background: rgba(255,255,255,.06); }
.message-equipe { padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.12); align-self: flex-start; max-width: 90%; word-break: break-word; }
.message-equipe.moi { align-self: flex-end; background: rgba(0,229,255,.22); }
.message-equipe b { font-size: .8rem; opacity: .8; display: block; }
.ligne-message { display: flex; gap: 8px; }
.ligne-message input { flex: 1; }
.propositions-equipe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.propositions-equipe button { width: auto; min-height: 0; padding: 6px 12px; }
.propositions-equipe button[aria-pressed="true"] { outline: 3px solid var(--accent); }
.compte-discussion { font-size: 2rem; font-weight: 800; text-align: center; color: var(--accent); }
.plateau-reactions { max-width: calc(100vw - 20px); box-sizing: border-box; }
.plateau-rythme { max-width: 100%; }
.plateau-rythme .titre-rythme { white-space: normal; }

/* Quiz solo : choix du mode, conditions d'examen */
.modes-depart { display: grid; gap: 10px; margin: 12px 0; }
.choix-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; min-height: 0; }
.choix-mode.actif { outline: 3px solid var(--accent); }
.puces-examen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.puce-examen { width: auto; min-height: 0; min-width: 40px; padding: 6px 8px; font-size: .85rem; opacity: .7; }
.puce-examen.repondue { opacity: 1; border: 2px solid var(--juste); }
.puce-examen.marquee { border-color: #f5a623; }
.puce-examen.courante { outline: 3px solid var(--accent); opacity: 1; }
.ligne-recap { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; min-height: 0; padding: 10px 12px; margin: 4px 0; }

/* Cartes de révision : quatre réponses, texte à trous */
.reponses-carte { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.reponses-carte button { display: flex; flex-direction: column; align-items: center; width: auto; min-height: 0; padding: 8px 14px; }
.reponses-carte button small { opacity: .75; font-weight: 400; }
.trou { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.12); letter-spacing: .1em; }
.trou-rempli { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--juste); color: #04120a; font-weight: 800; }

/* Autopsie d erreur (Mes erreurs) */
.autopsie { max-width: 720px; margin: 0 auto; }
.autopsie-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 8px 0; }
.autopsie-cause { min-height: 44px; padding: 8px 12px; text-align: left; }
.autopsie-cause.actif { outline: 3px solid var(--accent); }
.autopsie-pieges { padding-left: 20px; }
.autopsie-pieges li { margin: 10px 0; }

/* Remue-méninges avec vote (idées anonymes regroupées, vote sur téléphone, classement sans point) */
.remue-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0; }
.remue-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.14); font-size: 1.1rem; }
.remue-carte.juste, .remue-rang.juste { border-color: var(--juste); }
.remue-carte.discuter, .remue-rang.discuter { border-color: var(--alerte); }
.remue-texte { flex: 1 1 140px; font-weight: 700; overflow-wrap: anywhere; }
.remue-fois { font-size: .8rem; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.14); }
.remue-actions { display: inline-flex; gap: 4px; }
.remue-bouton { width: auto; min-width: 34px; min-height: 32px; padding: 0 8px; }
.remue-bouton.actif { outline: 3px solid var(--accent); }
.remue-marque { display: inline-block; font-size: .8rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.remue-marque.juste { background: var(--juste); color: #04120a; }
.remue-marque.discuter { background: var(--alerte); color: #1b1200; }
.remue-rang { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 8px 0; border-radius: 14px; border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.remue-numero { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 2.2em; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #06101f; font-weight: 800; }
.remue-corps { flex: 1 1 auto; min-width: 0; }
.remue-barre { height: 10px; margin-top: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.remue-barre > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.remue-votes { min-width: 2ch; font-size: 1.4rem; text-align: right; }
.remue-reference { border-left: 4px solid var(--juste); }
.remue-ligne-prepa { flex-wrap: wrap; align-items: center; }
.remue-liste { display: grid; gap: 8px; margin: 8px 0; }
.remue-choix { text-align: left; min-height: 48px; padding: 12px; font-size: 1.05rem; overflow-wrap: anywhere; }
.remue-choix.choisi { outline: 3px solid var(--accent); background: var(--fondCarte); }
.compte-remue { font-size: 1.4rem; font-weight: 800; margin: 6px 0; }
/* Équipe à informations partagées et sondage de zones (carte de chaleur) */
.carte-indices { border-left: 4px solid var(--accent); }
.liste-indices { margin: 6px 0; padding-left: 1.2em; }
.indice { margin: 6px 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.cadre-chaleur { cursor: default; }
.cadre-chaleur .chaleur-toile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chaleur-points .point-classe { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-width: 1px; background: rgba(255,255,255,.9); }
/* Texte riche : indices et exposants (CO_{2}, 10^{9}) */
.question-texte sub, .question-texte sup, .scene-haut sub, .scene-haut sup, .choix sub, .choix sup, .carte sub, .carte sup, .notation-apercu sub, .notation-apercu sup { font-size: .72em; line-height: 0; }
.notation-bouton { width: auto; padding: 6px 14px; font-size: 1.1rem; }
.notation-apercu { min-height: 1.4em; margin-top: 6px; white-space: pre-line; overflow-wrap: anywhere; }

/* Images à toucher (anomalies, zones) : le plus grand possible, bord à bord de l'écran sur téléphone (demande d'Hicham 28/10). */
.widget-zone .cadre-zone { width: min(100vw, 1100px); max-width: none; position: relative; left: 50%; transform: translateX(-50%); border-radius: 6px; }

/* Contrôle qualité 28/10 : liens lisibles sur le fond sombre (le bleu par défaut du navigateur n'a qu'un contraste d'environ 2:1). Règle d'élément seule : toute règle de classe plus précise (boutons-liens, navigation) garde la priorité. */
a { color: var(--accent); }
a:visited { color: #C9B4FF; }
a:hover, a:focus-visible { color: #FFFFFF; }

/* Zone de toucher des liens isolés (« ← Retour », navigation) : au moins 44 px de haut sur téléphone (audit mobile 28/10). */
p > a:only-child, nav a, li > a:only-child, .retour a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; box-sizing: border-box; }

/* Contrôle qualité 28/10 (Hicham : « beaucoup de jeux, il n'y a pas où cliquer, comme le néphron ») : sur les jeux à grand schéma à toucher (néphron, tube digestif, planches du cœur), le schéma mesure jusqu'à 2000 px de haut ; la consigne était tout en haut et le retour + « Suivant » tout en bas, sous le schéma, donc hors de l'écran après un toucher. La consigne reste maintenant collée en haut, le retour et « Suivant » collés en bas de l'écran. Règle limitée à ces pages (présence du canevas #schema ou #planche) ; aucun code de jeu modifié. */
main:has(canvas#schema) #consigne, main:has(canvas#planche) #consigne { position: sticky; top: 0; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-bottom: 1px solid rgba(255,255,255,.18); }
main:has(canvas#schema) #retour, main:has(canvas#planche) #retour { position: sticky; bottom: 0; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(canvas#schema) #retour:empty, main:has(canvas#planche) #retour:empty { display: none; }
main:has(canvas#schema):has(#suite:not([hidden])) #retour, main:has(canvas#planche):has(#suite:not([hidden])) #retour { bottom: 54px; }
main:has(canvas#schema) p:has(> #suite), main:has(canvas#planche) p:has(> #suite) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }
main:has(canvas#schema) p:has(> #suite[hidden]):has(> #rejouer[hidden]), main:has(canvas#planche) p:has(> #suite[hidden]):has(> #rejouer[hidden]) { display: none; }

/* Aperçu (appareil d Hicham seulement) : liseré pointillé discret sur les jeux non validés, aucun texte */
.affiche.apercu-lisere{outline:2px dotted rgba(255,255,255,.55);outline-offset:-4px}

/* Contrôle qualité 28/10 : en-tête compact sur les jeux à grand schéma à toucher (planche du cœur, néphron, tube digestif). Sur téléphone, le schéma de la planche du cœur ne commençait qu'à 903 px de haut, donc sous le bord de l'écran (812 px) : photo bandeau, titre, six onglets, cinq modes et une longue consigne passaient avant. Style seul, limité à ces pages ; aucun code de jeu modifié. */
main:has(canvas#schema) .bandeau-jeu, main:has(canvas#planche) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(canvas#schema) h1, main:has(canvas#planche) h1 { font-size: 1.15rem; margin: 4px 0; }
main:has(canvas#schema) #choix-planches, main:has(canvas#planche) #choix-planches, main:has(canvas#planche) #modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
main:has(canvas#planche) #choix-planches button, main:has(canvas#planche) #modes button { min-height: 40px; padding: 4px 10px; font-size: .88rem; width: auto; flex: 1 1 auto; }
main:has(canvas#schema) #consigne, main:has(canvas#planche) #consigne { font-size: .97rem; line-height: 1.3; }
main:has(canvas#schema) #progression, main:has(canvas#planche) #progression { margin: 4px 0; }

/* Contrôle qualité 28/10 : spirométrie (boucle débit-volume). Sur téléphone, la question et les réponses commençaient à 819 px, sous le bord de l'écran (812 px), et le retour à 1130 px. En-tête compact, boucle limitée en hauteur, retour collé en bas. Style seul, limité à cette page (présence de svg#boucle) ; aucun code de jeu modifié. */
main:has(svg#boucle) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(svg#boucle) h1 { font-size: 1.15rem; margin: 4px 0; }
main:has(svg#boucle) #titre { font-size: 1.05rem; margin: 4px 0; }
main:has(svg#boucle) #progression { margin: 4px 0; }
main:has(svg#boucle) svg#boucle { max-height: 26vh; width: 100%; }
main:has(svg#boucle) #legende, main:has(svg#boucle) #chiffres { margin: 4px 0; font-size: .92rem; }
main:has(svg#boucle) #retour { position: sticky; bottom: 0; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(svg#boucle) #retour:empty { display: none; }

/* Contrôle qualité 28/10 : ponction sous échographie à deux mains. Sur téléphone, la coupe d'échographie (607-950 px) et la carte du bras où se posent les deux doigts (1048-1322 px) ne tenaient pas ensemble à l'écran, et « Piquer » était à 1622 px : on ne pouvait pas voir l'effet de ses doigts. En-tête compact, coupe et carte réduites (mêmes proportions : la position du doigt est calculée à partir de la taille affichée), consigne/retour collés en haut, « Piquer » collé en bas. Style seul, limité à cette page (présence de canvas#carte). */
main:has(canvas#carte) .bandeau-jeu { aspect-ratio: 16 / 2 !important; margin-bottom: 4px !important; }
main:has(canvas#carte) h1 { font-size: 1.1rem; margin: 2px 0; }
main:has(canvas#carte) #titre { margin: 2px 0; }
main:has(canvas#carte) #retour { position: sticky; top: 0; z-index: 20; margin: 0; padding: 6px 10px; font-size: .95rem; line-height: 1.25; background: rgba(11,16,32,.97); border-bottom: 1px solid rgba(255,255,255,.18); }
main:has(canvas#carte) #retour:empty { display: none; }
main:has(canvas#carte) #aide { font-size: .88rem; margin: 4px 0; }
main:has(canvas#carte) #toile { width: min(100%, 22vh) !important; margin: 0 auto; }
main:has(canvas#carte) #carte { width: min(100%, 26vh) !important; margin: 4px auto 0; }
main:has(canvas#carte) p.legende { display: none; }
main:has(canvas#carte) p:has(> #piquer) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }

/* Contrôle qualité 28/10 : acide-base. Sur téléphone, la photo-bandeau, le titre et deux gros onglets occupaient 326 px avant tout contenu : la première décision d'un cas commençait à 819 px (sous le bord de l'écran) et, dans l'explorateur, le résultat (pH, trou anionique) était à 1312 px, loin des curseurs. En-tête compact ; le « ticket » (pH, PaCO2, HCO3) reste collé en haut pendant qu'on déplace les curseurs. Style seul, limité à cette page (présence de #onglets et #scene). */
main:has(#onglets):has(#scene) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#onglets):has(#scene) h1 { font-size: 1.15rem; margin: 4px 0; }
main:has(#onglets):has(#scene) #onglets { display: flex; gap: 6px; margin: 4px 0; }
main:has(#onglets):has(#scene) #onglets button { flex: 1 1 0; min-height: 44px; padding: 4px 8px; font-size: .92rem; }
main:has(#onglets):has(#scene) .ticket { position: sticky; top: 0; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-bottom: 2px solid var(--accent); }
main:has(#onglets):has(#scene) .curseur { margin: 2px 0; }
/* Contrôle qualité 28/10 : acide-base, cas pas à pas. Après un choix, l'explication et « Décision suivante » arrivaient à 937-1100 px (hors écran de 812 px) à chaque décision. Ils restent maintenant collés en bas de l'écran. Style seul. */
main:has(#onglets):has(#scene) #decision .reponse { position: sticky; bottom: 58px; z-index: 20; margin: 6px 0 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(#onglets):has(#scene) #decision button.primaire { position: sticky; bottom: 6px; z-index: 21; }

/* Contrôle qualité 28/10 : carte anatomique à toucher. Sur téléphone, la silhouette (609 px de haut) commençait à 591 px : les régions de l'abdomen étaient sous le bord de l'écran et la question sortait de l'écran dès qu'on défilait pour toucher. En-tête compact, silhouette limitée à 52 % de la hauteur de l'écran (mêmes proportions), question collée en haut, nom de la région collé en bas. Style seul, limité à cette page (présence de #app.carte et .ca-nom). */
main:has(.ca-nom) .bandeau-jeu, body:has(.ca-nom) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
body:has(.ca-nom) #titre { font-size: 1.15rem; margin: 4px 0; }
body:has(.ca-nom) #app > p.discret { display: none; }
body:has(.ca-nom) #titre-q { position: sticky; top: 0; z-index: 20; margin: 0; padding: 6px 10px; font-size: 1.02rem; line-height: 1.25; background: rgba(11,16,32,.97); border-bottom: 1px solid rgba(255,255,255,.18); }
body:has(.ca-nom) section svg { max-height: 52vh; width: auto; max-width: 100%; display: block; margin: 0 auto; }
body:has(.ca-nom) .ca-nom { position: sticky; bottom: 0; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
body:has(.ca-nom) .ca-nom:empty { display: none; }

/* Contrôle qualité 28/10 : lire un ECG en 6 étapes. Sur téléphone, le tracé (la chose à lire) commençait à 761 px de haut, sous deux gros boutons de mode et deux listes empilées. En-tête compact, modes et listes sur une ligne ; le tracé se voit dès le premier écran. Style seul, limité à cette page (présence de #mode-guide). */
main:has(#mode-guide) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#mode-guide) h1 { font-size: 1.15rem; margin: 4px 0; }
main:has(#mode-guide) .rang { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
main:has(#mode-guide) .rang button { flex: 1 1 0; min-height: 44px; padding: 4px 8px; font-size: .88rem; }
main:has(#mode-guide) .rang label { flex: 1 1 45%; font-size: .88rem; }
main:has(#mode-guide) .rang select { width: 100%; min-height: 44px; }
/* ECG en 6 étapes : le retour (« ✓ Juste » / « Pas tout à fait ») et le bouton d'étape suivante étaient à 920-1060 px, sous le bord de l'écran ; ils restent collés en bas. */
main:has(#mode-guide) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 6px 0 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(#mode-guide) #retour:empty { display: none; }
main:has(#mode-guide) .rang:has(> #suite) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }
main:has(#mode-guide) .rang:has(> #suite[hidden]) { display: none; }

/* Contrôle qualité 28/10 : axes endocriniens. « Valider ma prédiction » (896 px) et le retour étaient sous le bord de l'écran de 812 px. Retour et boutons collés en bas. Style seul, limité à cette page (présence de #axe et #valider). */
main:has(#axe):has(#valider) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(#axe):has(#valider) #retour:empty { display: none; }
main:has(#axe):has(#valider) p:has(> #valider) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }
main:has(#axe):has(#valider) p:has(> #valider):has(> #valider[hidden]):has(> #suite[hidden]):has(> #rejouer[hidden]) { display: none; }

/* Boutons de validation collés en bas de l écran (dose-ou-danger, qui-appeler) : visibles sans défilement. */
.collant { position: sticky; bottom: 10px; z-index: 30; box-shadow: 0 0 0 8px var(--fondCarte, #141B34); }


/* Contrôle qualité 28/10 : quand ne pas traiter. Après la décision, le retour et « Cas suivant » arrivaient à 877-926 px (hors écran de 812 px). En-tête compact ; retour et bouton suivant collés en bas. Style seul, limité à cette page (présence de #plus-tard). */
main:has(#plus-tard) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#plus-tard) h1 { font-size: 1.15rem; margin: 4px 0; }
main:has(#plus-tard) #progression, main:has(#plus-tard) #compteurs { margin: 4px 0; }
main:has(#plus-tard) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(#plus-tard) #retour:empty { display: none; }
main:has(#plus-tard) p:has(> button[id*="suite"], > button.primaire) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }

/* Contrôle qualité 28/10 : mur des erreurs évitées. Le 5e choix (« Surveillance après administration ») était à 843 px, sous le bord de l'écran de 812 px. En-tête compact. Style seul, limité à cette page. */
body:has(script[src*="mur-erreurs"]) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
body:has(script[src*="mur-erreurs"]) h1 { font-size: 1.15rem; margin: 4px 0; }

/* Bureau d epidemie : bandeau reduit pour que la question apparaisse plus haut (controle qualite 28/10). */
main:has(#courbe):has(#liste) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }

/* Contrôle qualité 28/10 : tour de conduction (ECG). Après la réponse, l'explication et « Question suivante » arrivaient à 1584 px (page de 1840 px), hors de l'écran. Le bloc de retour reste collé en bas de l'écran. Style seul. */
#retour:has(> .tc-retour) { position: sticky; bottom: 0; z-index: 20; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }

/* Contrôle qualité 28/10 : chasse à l'artefact (ECG). Après le choix de la cause, le retour (778 px) et « Tracé suivant » (914 px) étaient sous le bord de l'écran. En-tête compact ; retour et bouton suivant collés en bas. Style seul, limité à cette page (présence de #touches). */
main:has(#touches) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#touches) h1 { font-size: 1.15rem; margin: 4px 0; }
main:has(#touches) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(#touches) #retour:empty { display: none; }
main:has(#touches) p:has(> #suite) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }
main:has(#touches) p:has(> #suite[hidden]) { display: none; }

/* Contrôle qualité 28/10 : alarme ou artefact. « Situation suivante » arrivait à 858 px (page de 1014 px), sous le bord de l'écran. En-tête compact ; retour et bouton collés en bas. Style seul, limité à cette page (présence de #zone et #vrai). */
main:has(#zone):has(#vrai) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#zone):has(#vrai) h1 { font-size: 1.15rem; margin: 4px 0; }
main:has(#zone):has(#vrai) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(#zone):has(#vrai) #retour:empty { display: none; }
main:has(#zone):has(#vrai) p:has(> #suite) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }
main:has(#zone):has(#vrai) p:has(> #suite[hidden]) { display: none; }

/* Contrôle qualité 28/10 : examen clinique par zones. Après avoir touché une zone du corps, le panneau des gestes (Inspection, Palpation, Percussion, Auscultation) arrivait à 885-1038 px, sous le bord de l'écran. En-tête compact ; panneau collé en bas. Style seul, limité à cette page (présence de .examen-corps). */
main:has(.examen-corps) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(.examen-corps) #cas { margin: 4px 0; font-size: .9rem; }
main:has(.examen-corps) .ec-panneau { position: sticky; bottom: 0; z-index: 20; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }

/* Contrôle qualité 28/10 : métronome de massage. « Démarrer » était à 1383 px, sous la zone à taper (725-1005 px) : on ne pouvait pas lancer le métronome puis taper sans défiler. Les boutons Démarrer / Remettre à zéro restent collés en bas. Style seul, limité à cette page (présence de #b-start). */
main:has(#b-start) .actions { position: sticky; bottom: 0; z-index: 21; padding: 6px 10px; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }

/* Contrôle qualité 28/10 : urgence et gravité (matrice de triage). Sur téléphone, les 9 patients occupaient 800 px et les 4 cases où les placer étaient à 1393-1900 px : il fallait défiler dans les deux sens pour chaque patient. Liste des patients dans une zone à défilement (38 % de l'écran) ; les 4 cases en 2×2 collées en bas de l'écran. Style seul, limité à cette page (présence de .ou-grille2). */
main:has(.ou-grille2) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(.ou-grille2) > .carte:first-of-type p { margin: 4px 0; font-size: .9rem; }
main:has(.ou-grille2) .carte:has(> .ou-carte-patient) { max-height: 36vh; overflow-y: auto; }
main:has(.ou-grille2) .ou-grille2 { position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }
main:has(.ou-grille2) .ou-case { min-height: 0; padding: 6px 8px; font-size: .82rem; line-height: 1.2; }
main:has(.ou-grille2) h1 { font-size: 1.1rem; margin: 2px 0; }
main:has(.ou-grille2) > .carte:first-of-type { padding: 8px 12px; margin: 4px 0; }
main:has(.ou-grille2) .ou-case > p, main:has(.ou-grille2) .ou-case > small, main:has(.ou-grille2) .ou-case > .discret { display: none; }
main:has(.ou-grille2) .ou-case button { min-height: 40px; padding: 2px 8px; }
main:has(.ou-grille2) .carte:has(> .ou-carte-patient) { max-height: 44vh; }

/* Contrôle qualité 28/10 : répartir 100 points. Le bouton « Voir la réponse » (867 px) et le compteur de points restants (826 px) étaient sous le bord de l'écran quand on règle les curseurs. Ils restent collés en bas. Style seul, limité à cette page (présence de .ou-barre et #reste). */
main:has(.ou-barre) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(.ou-barre) #reste { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }
main:has(.ou-barre) p:has(> #valider) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.98); }

/* Contrôle qualité 28/10 : paires express. Le chronomètre de 60 s tourne dès le départ et les 12 tuiles montaient jusqu'à 913 px : les deux dernières lignes étaient sous le bord de l'écran (il fallait défiler pendant le chrono). Bandeau en bande, tuiles plus basses. Style seul, limité aux pages à plateau de tuiles (#plateau.l3-tuiles). */
main:has(#plateau.l3-tuiles) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#plateau.l3-tuiles) h1 { font-size: 1.1rem; margin: 2px 0; }
main:has(#plateau.l3-tuiles) .l3-tuile { min-height: 56px; padding: 4px 8px; font-size: .9rem; line-height: 1.15; }

/* Contrôle qualité 28/10 : séance sans appareils (outil de l'enseignant). Le bouton « Révéler la réponse » était à 1007 px sous les quatre compteurs de mains levées (756-997 px). Il reste collé en bas. Style seul, limité à cette page (présence de #reveler et .l3-compte). */
main:has(#reveler):has(.l3-compte) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#reveler):has(.l3-compte) .ou-ligne:has(> #reveler) { position: sticky; bottom: 0; z-index: 21; padding: 6px 10px; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }

/* Contrôle qualité 28/10 : coup de pouce gradué. Après la réponse, l'explication et « Question suivante » arrivaient à 752-970 px, sous le bord de l'écran. Ce bloc reste collé en bas. Style seul, limité à cette page (présence de #pouce). */
main:has(#enonce.l3-grosse-question) div:has(> #suivante) { position: sticky; bottom: 0; z-index: 20; padding: 8px 10px; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }

/* Contrôle qualité 28/10 : modes à décor. Le menu faisait 2363 px : la banque de questions (2043 px) et « Commencer » (2177 px) étaient après la liste des décors (1635 px). Sur téléphone : banque et nombre de questions d'abord, liste des décors dans une zone à défilement (40 % de l'écran), « Commencer » collé en bas. Style seul, limité à cette page (présence de .carte > #demarrer et du champ de décors). */
.carte:has(> fieldset.ou-champ):has(> #demarrer) { display: flex; flex-direction: column; }
.carte:has(> fieldset.ou-champ):has(> #demarrer) > label { order: 1; }
.carte:has(> fieldset.ou-champ):has(> #demarrer) > fieldset.ou-champ { order: 2; max-height: 40vh; overflow-y: auto; }
.carte:has(> fieldset.ou-champ):has(> #demarrer) > #demarrer { order: 3; position: sticky; bottom: 6px; z-index: 21; }
.carte:has(> fieldset.ou-champ):has(> #demarrer) > #message { order: 4; }
main:has(#demarrer):has(fieldset.ou-champ) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }

/* Contrôle qualité 28/10 : arbre décisionnel. Le 4e choix de l'étape 1 était à 885-965 px (sous le bord de 812 px). Bandeau en bande. Style seul, limité à cette page. */
body:has(script[src*="arbre-decisionnel"]) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }

/* Contrôle qualité 28/10 : chaînes causales. Après la réponse, l'explication (800 px) et « Maillon suivant » (888 px) étaient sous le bord de l'écran. Ils restent collés en bas. Style seul, limité à cette page (présence de #retourliste et #depart). */
main:has(#retourliste):has(#depart) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#retourliste):has(#depart) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(#retourliste):has(#depart) #retour:empty { display: none; }
main:has(#retourliste):has(#depart) p:has(> #suite) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }
main:has(#retourliste):has(#depart) p:has(> #suite[hidden]) { display: none; }

/* Contrôle qualité 28/10 : la courbe et son témoin. Après la lecture, le retour (1079 px, 160 px de haut) et « Jeu suivant » (1239 px) étaient sous le bord de l'écran. Ils restent collés en bas. Style seul, limité à cette page (présence de #zone, #retour et canvas#p). */
main:has(canvas#p):has(#retour) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.97); border-top: 2px solid var(--accent); }
main:has(canvas#p):has(#retour) #retour:empty { display: none; }
main:has(canvas#p):has(#retour) p:has(> #suite) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.97); }
main:has(canvas#p):has(#retour) p:has(> #suite[hidden]) { display: none; }

/* Contrôle qualité 28/10 : gestes, le rythme des compressions. La zone de glissé (canvas#corps) mesurait 656 px de haut (441 à 1097 px) : le geste « glisse vers le bas jusqu'en bas de la zone » obligeait à défiler en plein geste. Zone limitée à 52 % de l'écran ; « Terminer » collé en bas. Style seul, limité à cette page. */
main:has(canvas#corps):has(#terminer) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(canvas#corps):has(#terminer) canvas#corps { max-height: 44vh; width: 100%; touch-action: none; }
main:has(canvas#corps):has(#terminer) p:has(> #terminer) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.98); }

/* Contrôle qualité 28/10 : gaz du sang en 30 secondes. Avec le compte à rebours qui tourne, l'étape 2 (compensation) s'étendait de 648 à 982 px et l'étape 3 (cause) à 801-985 px : il fallait défiler pendant le chrono. Bandeau en bande, choix plus compacts. Style seul, limité à cette page. */
body:has(script[src*="gaz-du-sang"]) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 4px !important; }
body:has(script[src*="gaz-du-sang"]) main h1 { font-size: 1.1rem; margin: 2px 0; }
body:has(script[src*="gaz-du-sang"]) main button:not(#gds-demarrer):not(#gds-animateur) { min-height: 44px; padding: 4px 10px; font-size: .9rem; line-height: 1.15; margin: 3px 0; }

/* Contrôle qualité 28/10 : le patient piégeux. « Corriger » était à 1000 px (page de 1157 px) sous le tableau de 12 listes. Il reste collé en bas. Style seul, limité à cette page (présence de #valider et d'un tableau). */
main:has(table):has(#valider) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(table):has(#valider) p:has(> #valider), main:has(table):has(#valider) div:has(> #valider) { position: sticky; bottom: 0; z-index: 21; margin: 0; padding: 6px 10px; background: rgba(11,16,32,.98); border-top: 2px solid var(--accent); }
main:has(table):has(#valider) #retour { position: sticky; bottom: 58px; z-index: 20; margin: 0; padding: 8px 10px; background: rgba(11,16,32,.98); }
main:has(table):has(#valider) #retour:empty { display: none; }

/* Contrôle qualité 28/10 : le second avis. Les 8 rythmes à choisir s'empilaient de 516 à 1018 px : la moitié était sous le bord de l'écran. Deux colonnes. Style seul, limité à cette page (présence de canvas#toile + #choix + #zone-preuve). */
main:has(canvas#toile):has(#zone-preuve) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(canvas#toile):has(#zone-preuve) #choix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
main:has(canvas#toile):has(#zone-preuve) #choix button { min-height: 52px; padding: 4px 6px; font-size: .88rem; line-height: 1.15; margin: 0; }


/* Contrôle qualité 28/10 : outils de lecture d'ECG. Les choix « Compas » et « Règle de fréquence » étaient de petites pastilles de 22 px : zone de toucher de 44 px minimum. Style seul, limité à cette page (présence de input[name="outil"]). */
label:has(> input[type="radio"][name="outil"]) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; }
input[type="radio"][name="outil"] { width: 22px; height: 22px; }

/* Gaz du sang : bandeau reduit pour que les trois etapes tiennent dans l ecran (controle qualite 29/10). */
main:has(#gds-etapes) .bandeau-jeu { aspect-ratio: 16 / 3 !important; margin-bottom: 6px !important; }
main:has(#gds-etapes) .gds-valeurs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 0; margin: 4px 0; list-style: none; }
main:has(#gds-etapes) #gds-temps, main:has(#gds-etapes) .gds-note { margin: 2px 0; }
main:has(#gds-etapes) h1 { font-size: 1.3rem; margin: 2px 0; }
main:has(#gds-etapes) .gds-choix button { min-height: 44px; margin: 3px 0; }

/* ECG en situation : le moniteur (trace + constantes) reste visible en haut pendant les gestes (controle qualite 29/10). */
@media (max-width: 900px) { .es-grille > div:first-child { display: contents; } main .es-carte.es-trace-cadre { position: sticky !important; top: 0; z-index: 15; max-height: 42vh; overflow: auto; } }

/* Modes a decor : sur telephone, le decor reste compact pour que la question et les reponses tiennent dans l ecran (controle qualite 29/10). */
@media (max-width: 600px) {
  .carte .l7-piste { font-size: 1.05rem !important; margin: 4px 0 !important; min-height: 0 !important; gap: 2px !important; }
  .carte .l7-piste.l7-tour, .carte .l7-piste.l7-sousmarin { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; }
  .carte .l7-globe { width: 56px !important; height: 56px !important; margin: 4px auto !important; }
  .carte .l7-glyphe-grand { font-size: 1.3rem !important; }
  .carte .l7-art { max-width: 160px !important; aspect-ratio: 16 / 6 !important; margin: 4px auto !important; }
}

/* Grand écran (PC, écran interactif de classe) : page plus large ; sur les pages à dessin (néphron, tube digestif, planches), texte à gauche et dessin à droite, dessin limité à la hauteur de l'écran. */
@media (min-width: 1100px) {
  body main { max-width: 1180px; }
  body main:is(:has(> #zone > #schema), :has(> #planche)) { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.3fr); column-gap: 28px; align-content: start; }
  body main:is(:has(> #zone > #schema), :has(> #planche)) > * { grid-column: 1; }
  body main:has(> #zone > #schema) > #zone { display: contents; }
  body main:is(:has(> #zone > #schema), :has(> #planche)) #consigne { font-size: 1.25rem; }
  body main:is(:has(> #zone > #schema), :has(> #planche)) :is(#schema, #planche) { grid-column: 2; grid-row: 1 / span 30; max-width: 100%; max-height: calc(100vh - 40px); width: auto; margin: 0 auto; position: sticky; top: 12px; }
}

/* Écran de classe (≥ 1500 px) : texte plus gros, lisible de loin. */
@media (min-width: 1500px) { html, body { font-size: 21px; } }