/* LASIK or not LASIK : page autonome plein écran, pensée d'abord pour le téléphone.
   Console « brick game » : barre d'état, dossier du patient (tomographie des deux yeux) et couloir vertical vers le bloc. */
body.page-nue { margin: 0; background: #0f2a30; }
.tj { --coque: #1d5560; --coque-fonce: #143e46; --nuit: #0f2a30; --lcd: #b4bea3; --papier: #eef1e6; --pix: #232a1e; --bouton: #f0cf4a; --rouge: #a32d2d;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; color: #fff; font-family: var(--police, sans-serif); }
.tj-console { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 64rem; margin: 0 auto; box-sizing: border-box;
  padding: max(0.4rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right)) 0.3rem max(0.4rem, env(safe-area-inset-left)); }
.tj-ecran { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem; border: 0.4rem solid #1b2226; border-radius: 0.6rem;
  background-color: var(--lcd); color: var(--pix); font-family: ui-monospace, Menlo, Consolas, monospace;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cg fill='none' stroke='%23232a1e' stroke-opacity='.08' stroke-width='1.5'%3E%3Crect x='1' y='1' width='12' height='12'/%3E%3C/g%3E%3Crect x='4' y='4' width='6' height='6' fill='%23232a1e' fill-opacity='.07'/%3E%3C/svg%3E"); }

/* Barre d'état */
.tj-hud { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.2rem 0.7rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--pix); }
.tj-hud > div { display: flex; flex-direction: column; line-height: 1.1; }
.tj-hud span:first-child { font-family: var(--police, sans-serif); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tj-hud b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.tj-hud .tj-hud-score b { font-size: 1.2rem; }
.tj-hud [hidden] { display: none; }
.tj-vies { display: flex; gap: 3px; padding-top: 3px; }
.tj-vie { width: 12px; height: 12px; border: 1.5px solid var(--pix); box-sizing: border-box; position: relative; }
.tj-vie::after { content: ""; position: absolute; inset: 2px; background: var(--pix); }
.tj-vie-perdue { opacity: 0.18; }
.tj-renommee { display: flex; gap: 1px; }
.tj-etoile { font-size: 0.95rem; line-height: 1; font-style: normal; }
.tj-vie-eclate { animation: tj-eclate .8s steps(1) forwards; }
@keyframes tj-eclate { 0% { opacity: 1; } 25% { opacity: .15; } 50% { opacity: 1; } 75%, 100% { opacity: .18; } }
.tj-serie { padding: 0 0.2rem; }
.tj-serie b { padding: 0 0.15rem; }
.tj-serie:not([data-mult="1"]) b { background: var(--bouton); }
.tj-jauge { display: flex; gap: 2px; margin-top: 2px; }
.tj-jauge i { width: 6px; height: 9px; border: 1.5px solid var(--pix); box-sizing: border-box; }
.tj-jauge i.on { background: var(--pix); }
.tj-serie.tj-palier { background: var(--pix); color: var(--lcd); }
.tj-serie.tj-palier .tj-jauge i { border-color: var(--lcd); }
.tj-serie.tj-palier .tj-jauge i.on { background: var(--lcd); }
.tj-quitter { margin-left: auto; align-self: center; min-height: 2.3rem; padding: 0.2rem 0.7rem; border: 2px solid var(--pix); background: transparent; color: var(--pix);
  font: 700 0.8rem ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }
.tj-quitter[hidden] { display: none; }

/* Scène : dossier à gauche, couloir vertical à droite ; écrans superposés */
.tj-scene { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.7rem; gap: 0.35rem; }
.tj-dossier { min-height: 0; overflow-y: auto; transition: opacity .25s; }
.tj-dossier-fini { opacity: 0.35; }
.tj-patient { display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 0 0 0.3rem; font-size: 0.8rem; line-height: 1.3; }
.tj-carton { display: inline-block; padding: 0.05rem 0.35rem; background: #fff; color: #111; border: 1.5px solid var(--pix); }
.tj-note { flex-basis: 100%; font-weight: 700; }
.tj-badge { display: inline-block; padding: 0.05rem 0.35rem; background: var(--pix); color: var(--bouton); font-weight: 700; }
.tj-badge-vip { background: var(--bouton); color: #3a2a00; border: 1.5px solid var(--pix); }
.tj-vip { color: #9c7a00; filter: drop-shadow(0 0 2px #f0cf4a); }
.tj-expert { color: var(--rouge); }
.tj-accueil .tj-commandes { display: none; }
.tj-menu-grille { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 24rem); }
.tj-carriere { line-height: 1.35; }
.tj-carriere span { letter-spacing: 0.1em; }
.tj-promo { padding: 0.2rem 0.6rem; background: var(--bouton); border: 2px solid var(--pix); font-weight: 700; letter-spacing: 0.08em; }
.tj-album { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 40rem; text-align: left; }
.tj-album li { padding: 0.35rem 0.4rem; border-bottom: 1.5px solid rgba(35,42,30,.4); line-height: 1.35; }
.tj-album .tj-cache { opacity: 0.55; }
.tj-etoiles { color: #7a5c00; letter-spacing: 0.1em; }
.tj-yeux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.35rem; }
.tj-oeil { min-width: 0; padding: 0; margin: 0; border: 0; }
.tj-oeil h3 { margin: 0 0 2px; font: 700 0.8rem/1.2 ui-monospace, Menlo, Consolas, monospace; }
.tj-quatre { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
.tj-quatre.tj-une { grid-template-columns: 1fr; justify-items: center; }
.tj-fig { display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: zoom-in; }
.tj-fig canvas { display: block; margin: 0 auto; }
.tj-fig span { display: block; font-size: 0.6rem; line-height: 1.15; }
.tj-zoom { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem;
  background: rgba(180, 190, 163, 0.97); }
.tj-zoom p { margin: 0; font-size: 0.85rem; }
.tj-zoom canvas { display: block; box-shadow: 3px 3px 0 var(--pix); }
.tj-zoom button { font: inherit; min-height: 2.75rem; padding: 0.3rem 1rem; border: 2px solid var(--pix); background: transparent; color: var(--pix); cursor: pointer; }
.tj-zoom button:hover, .tj-zoom button:focus-visible { background: var(--pix); color: var(--lcd); }
.tj-ind { width: 100%; max-width: 28rem; margin: 0.3rem auto 0; border-collapse: collapse; font-size: 0.7rem; line-height: 1.28; background: var(--papier); border: 1.5px solid var(--pix); font-variant-numeric: tabular-nums; }
.tj-ind th, .tj-ind td { padding: 0 0.3rem; text-align: left; white-space: nowrap; font-weight: 400; }
.tj-ind thead th { font-weight: 700; text-align: right; border-bottom: 1.5px solid var(--pix); }
.tj-ind td { text-align: right; }
.tj-ind td.tj-n1 { background: var(--bouton); }
.tj-ind td.tj-n2 { background: var(--rouge); color: #fff; font-weight: 700; }
.tj-ind tr.tj-plan { background: var(--pix); color: var(--lcd); }
.tj-ind tr.tj-plan th[colspan] { text-align: left; white-space: normal; }

.tj-couloir { position: relative; min-height: 0; border-left: 2px solid var(--pix); border-right: 2px solid var(--pix); overflow: hidden;
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, rgba(35,42,30,.18) 22px 24px); }
.tj-entree { position: absolute; top: 0; left: 0; right: 0; padding: 0.15rem 0; text-align: center; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.05em; border-bottom: 2px solid var(--pix); background: var(--lcd); }
.tj-porte { position: absolute; left: 0; right: 0; bottom: 0; height: 3.2rem; border-top: 3px solid var(--pix); display: flex; align-items: flex-end; justify-content: center;
  background: repeating-linear-gradient(90deg, transparent 0 46%, var(--pix) 46% 54%, transparent 54% 100%); }
.tj-porte span { margin-bottom: 0.2rem; padding: 0 0.15rem; background: var(--lcd); font-size: 0.62rem; font-weight: 700; }
.tj-porte.tj-ouverte { background: var(--pix); }
.tj-danger { position: absolute; left: 0; right: 0; bottom: 3.2rem; height: 22%; opacity: 0.35; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(35,42,30,.3) 0 6px, transparent 6px 12px); }
.tj-danger-actif .tj-danger { animation: tj-pulse .5s ease-in-out infinite alternate; }
@keyframes tj-pulse { from { opacity: .35; } to { opacity: 1; } }
.tj-perso { position: absolute; left: 50%; top: 0; width: 1.9rem; color: var(--pix); will-change: transform; }
.tj-perso svg { display: block; width: 100%; height: auto; fill: currentColor; }
.tj-perso .tj-pas1 { opacity: 0; }
.tj-marche .tj-pas0 { animation: tj-pas .45s steps(1) infinite; }
.tj-marche .tj-pas1 { animation: tj-pas .45s steps(1) infinite reverse; }
@keyframes tj-pas { 0% { opacity: 1; } 50% { opacity: 0; } }
.tj-en-pause .tj-perso g { animation-play-state: paused; }
.tj-presse { animation: tj-tremble .12s linear infinite; }
@keyframes tj-tremble { 0%, 100% { translate: 0 0; } 50% { translate: 1.5px 0; } }
.tj-pop { position: absolute; right: 3rem; z-index: 5; padding: 0 .35rem; font-weight: 700; font-size: 1.05rem; background: var(--bouton); color: #3a2a00;
  border: 2px solid var(--pix); pointer-events: none; animation: tj-pop .7s ease-out forwards; }
@keyframes tj-pop { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { transform: translateY(-4px) scale(1.1); opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }

/* Écrans superposés (titre, pause, fin, règles, erreurs, cas partagé) */
.tj-texte { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  text-align: center; padding: 0.8rem; background: rgba(180, 190, 163, 0.97); font-size: 0.9rem; overflow-y: auto; }
.tj-texte[hidden] { display: none; }
/* Centré quand ça tient, sans jamais couper le haut quand l'écran est court */
.tj-texte { justify-content: flex-start; }
.tj-texte > :first-child { margin-top: auto; }
.tj-texte > :last-child { margin-bottom: auto; }
.tj-texte.tj-long > :first-child { margin-top: 0; }
.tj-texte p { margin: 0; }
.tj-texte h2, .tj-texte h3 { margin: 0.3rem 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tj-geant { font-size: 2.2rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.1; }
.tj-titre-jeu { font-size: clamp(1.6rem, 8vw, 2.6rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.05; }
.tj-titre-jeu span { display: block; font-size: 0.55em; letter-spacing: 0.3em; }
.tj-accroche { max-width: 26rem; line-height: 1.45; }
.tj-moyen { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; }
.tj-titre-cas { font-size: 1rem; }
.tj-sous { line-height: 1.4; }
.tj-petit { font-size: 0.78rem; }
.tj-gauche { text-align: left; max-width: 40rem; line-height: 1.4; }
.tj-liste { text-align: left; max-width: 40rem; margin: 0; padding-left: 1.2rem; line-height: 1.4; }
.tj-liste li { margin-bottom: 0.3rem; }
.tj-sources { font-size: 0.75rem; }
.tj-texte a { color: var(--pix); }
.tj-grille { font-size: 1.1rem; letter-spacing: 0.05em; line-height: 1.3; word-break: break-all; }
.tj-menu { display: flex; flex-direction: column; gap: 0.45rem; width: min(100%, 20rem); }
.tj-menu-ligne { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; }
.tj-texte button { font: inherit; min-height: 2.75rem; padding: 0.4rem 0.9rem; border: 2px solid var(--pix); background: transparent; color: var(--pix); cursor: pointer; }
.tj-menu button small { display: block; font-size: 0.72rem; }
.tj-texte button:hover, .tj-texte button:focus-visible { background: var(--pix); color: var(--lcd); }
.tj-texte :focus-visible { outline: 3px solid var(--pix); outline-offset: 3px; }
.tj-legendes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.9rem; font-size: 0.66rem; }
.tj-legendes span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tj-records { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tj-records th, .tj-records td { padding: 0.05rem 0.6rem; text-align: right; }
.tj-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.tj-form input { width: 5ch; min-height: 2.75rem; font: 700 1.4rem ui-monospace, Menlo, Consolas, monospace; text-align: center; text-transform: uppercase; letter-spacing: 0.2em;
  background: var(--papier); color: var(--pix); border: 2px solid var(--pix); }
.tj-erreurs { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 44rem; text-align: left; }
.tj-erreurs li { margin: 0 0 0.8rem; padding: 0.5rem; border: 2px solid var(--pix); background: var(--lcd); }
.tj-erreurs p { margin: 0.3rem 0; line-height: 1.35; }
.tj-refs { font-size: 0.78rem; }
.tj-dossier-bilan { margin-top: 0.3rem; }
.tj-flash { position: absolute; left: 50%; top: 40%; z-index: 7; transform: translateX(-50%); padding: 0.3rem 0.7rem; font-weight: 700;
  font-size: 1.05rem; white-space: nowrap; background: var(--pix); color: var(--lcd); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tj-flash.tj-visible { opacity: 1; }
.tj-flash.tj-mauvais { background: var(--rouge); color: #fff; }
.tj-secousse { animation: tj-secousse .14s linear 1; }
@keyframes tj-secousse { 0% { transform: translateX(-4px); } 33% { transform: translateX(4px); } 66% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
.tj-demo .tj-couloir::after { content: "DÉMO"; position: absolute; left: 50%; top: 1.4rem; transform: translateX(-50%); font-size: 0.6rem; font-weight: 700; }

/* Commandes : une rangée de boutons simples */
.tj-commandes { flex: none; display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.tj-bt { flex: 1 1 0; min-width: 0; min-height: 3rem; padding: 0.3rem 0.25rem; overflow: hidden; text-overflow: ellipsis; border-radius: 0.6rem; border: 2px solid transparent; cursor: pointer;
  font: 700 0.95rem var(--police, sans-serif); color: #fff; white-space: nowrap; }
.tj-bt-non { background: #7a2e2e; }
.tj-bt-oui { background: #1d5560; }
.tj-bt-centre { flex: 0 0 auto; padding: 0.3rem 0.9rem; background: transparent; border-color: #fff; }
.tj-bt:active { transform: translateY(1px); }
.tj-bt:hover { filter: brightness(1.12); }
.tj-seul-niv5 { display: none; }
.tj-niv5 .tj-seul-niv5 { display: inline; }
.tj-niv5 button.tj-seul-niv5 { display: block; }
.tj-niv5 .tj-bt { font-size: 0.82rem; }
.tj-niv5 .tj-bt-centre { padding: 0.3rem 0.5rem; }
.tj-niv5 .tj-avant-niv5 { display: none; }
.tj-seul-niv6, .tj-niv5 .tj-seul-niv6 { display: none; }
.tj-niv6 .tj-seul-niv6 { display: inline; }
.tj-niv6 .tj-avant-niv6 { display: none; }
.tj-console :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tj-ecran :focus-visible { outline-color: var(--pix); }
.tj-options { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.2rem; font-size: 0.78rem; }
.tj-options label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.1rem; cursor: pointer; }
.tj-options input { width: 1rem; height: 1rem; accent-color: #1d5560; }

/* Bandeau du bas */
.tj-pied { flex: none; padding: 0.35rem 0.5rem max(0.35rem, env(safe-area-inset-bottom)); text-align: center; background: #1d5560; font-size: 0.8rem; }
.tj-pied a { color: #fff; text-decoration: none; }
.tj-pied a:hover, .tj-pied a:focus-visible { text-decoration: underline; }

/* Écrans : boutons sobres, titres en bandeau discret */
.tj-texte button, .tj-quitter, .tj-zoom button { font: 0.85rem var(--police, sans-serif); color: var(--pix); background: #fff; border: 2px solid var(--pix); border-radius: 0.4rem; }
.tj-texte button:hover, .tj-texte button:focus-visible, .tj-zoom button:hover, .tj-zoom button:focus-visible { background: var(--pix); color: #fff; }
.tj-texte .tj-jouer { font: 700 1.3rem var(--police, sans-serif); letter-spacing: 0.06em; min-width: 10rem; min-height: 3.2rem; color: #fff; background: #1d5560; border-color: #1d5560; border-radius: 0.6rem; }
.tj-texte .tj-jouer:hover, .tj-texte .tj-jouer:focus-visible { background: #143e46; color: #fff; }
.tj-serie:not([data-mult="1"]) b { background: #1d5560; color: #fff; }
.tj-pop { background: #fff; color: #1d5560; border-color: #1d5560; }
.tj-badge { background: var(--pix); color: #fff; }
.tj-badge-vip { background: #1d5560; color: #fff; border-color: #1d5560; }
.tj-vip { color: #1d5560; }
.tj-promo { background: #1d5560; color: #fff; border-color: #1d5560; }
.tj-etoiles { color: #1d5560; }

@media (min-width: 48rem) {
  .tj-scene { grid-template-columns: minmax(0, 1fr) 3.4rem; }
  .tj-perso { width: 2.4rem; }
  .tj-patient { font-size: 0.9rem; }
  .tj-ind { font-size: 0.78rem; }
  .tj-hud b { font-size: 1.05rem; }
  .tj-hud .tj-hud-score b { font-size: 1.4rem; }
  .tj-entree { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tj-marche .tj-pas0, .tj-marche .tj-pas1, .tj-presse, .tj-danger-actif .tj-danger, .tj-secousse { animation: none; }
  .tj-pop { animation: tj-pop-calme .7s ease-out forwards; }
  @keyframes tj-pop-calme { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* Style « Snake » : tout en monochrome, pixels sombres sur l'écran vert, coins carrés */
.tj { --nuit: #1c2118; }
body.page-nue, .tj-console { background: #1c2118; }
.tj-ecran { border-color: #0e110c; border-radius: 0.3rem; }
.tj-bt, .tj-texte button, .tj-quitter, .tj-zoom button, .tj-texte .tj-jouer {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 0; border: 2px solid var(--pix); box-shadow: 3px 3px 0 rgba(35,42,30,.45); filter: none; }
.tj-bt { background: var(--lcd); color: var(--pix); border-color: var(--lcd); box-shadow: none; font-size: 0.85rem; }
.tj-bt-non, .tj-bt-oui { background: var(--lcd); color: var(--pix); }
.tj-bt-centre { background: transparent; color: var(--lcd); border-color: var(--lcd); }
.tj-bt:hover, .tj-bt:focus-visible { background: #d2dbc0; filter: none; }
.tj-bt-centre:hover, .tj-bt-centre:focus-visible { background: var(--lcd); color: var(--pix); }
.tj-bt:active { transform: translate(1px, 1px); }
.tj-texte button, .tj-quitter, .tj-zoom button { background: transparent; color: var(--pix); }
.tj-texte button:hover, .tj-texte button:focus-visible, .tj-quitter:hover, .tj-zoom button:hover, .tj-zoom button:focus-visible { background: var(--pix); color: var(--lcd); }
.tj-texte .tj-jouer { margin: 0.4rem 0; font-size: 1.6rem; letter-spacing: 0.2em; min-width: 11rem; min-height: 3.6rem; padding: 0.4rem 1.2rem;
  background: var(--pix); color: var(--lcd); border-color: var(--pix); animation: tj-clignote 1.1s steps(1) infinite; }
.tj-texte .tj-jouer:hover, .tj-texte .tj-jouer:focus-visible { background: #000; color: var(--lcd); animation: none; }
@keyframes tj-clignote { 0%, 70% { box-shadow: 3px 3px 0 rgba(35,42,30,.45); } 71%, 100% { box-shadow: 0 0 0 4px var(--lcd), 0 0 0 6px var(--pix); } }
.tj-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.tj-texte .tj-liens button { min-height: 2.4rem; padding: 0.2rem 0.55rem; font-size: 0.72rem; box-shadow: none; }
.tj-accroche { font-size: 0.82rem; }
.tj-serie:not([data-mult="1"]) b, .tj-badge, .tj-badge-vip, .tj-promo { background: var(--pix); color: var(--lcd); border-color: var(--pix); }
.tj-pop { background: var(--lcd); color: var(--pix); border-color: var(--pix); }
.tj-vip, .tj-etoiles { color: var(--pix); }
.tj-pied { background: #0e110c; }
.tj-pied a { color: var(--lcd); }
.tj-options { color: var(--lcd); }
.tj-options input { accent-color: var(--lcd); }
.tj-texte h2.tj-moyen, .tj-texte p.tj-moyen { background: none; color: var(--pix); text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; }
@media (prefers-reduced-motion: reduce) { .tj-texte .tj-jouer { animation: none; } }

/* Erreur : écran fissuré, teinte rouge, bandeau « il fallait » bien visible */
.tj-fissure { position: absolute; inset: 0; z-index: 9; pointer-events: none; transition: opacity .45s; }
.tj-fissure svg { width: 100%; height: 100%; }
.tj-fissure path, .tj-fissure circle { fill: none; stroke: #111; stroke-width: 2; stroke-linejoin: bevel; filter: drop-shadow(1px 1px 0 rgba(255,255,255,.7)); }
.tj-fissure-forte { background: rgba(163, 45, 45, 0.22); }
.tj-fissure-forte path { stroke-width: 2.6; }
.tj-fissure-part { opacity: 0; }
.tj-flash { z-index: 10; max-width: 92%; white-space: normal; text-align: center; line-height: 1.25; }
.tj-flash small { display: block; margin-top: 0.2rem; font-size: 0.78rem; font-weight: 400; }
.tj-flash.tj-mauvais { top: 38%; font-size: 1.35rem; padding: 0.5rem 0.8rem; background: #a32d2d; color: #fff; border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
.tj-flash.tj-erreur-legere { top: 38%; font-size: 1.15rem; padding: 0.45rem 0.8rem; background: #fff; color: #7a2e2e; border: 3px solid #7a2e2e; }
@media (prefers-reduced-motion: reduce) { .tj-fissure { transition: none; } }
.tj-flash.tj-mauvais, .tj-flash.tj-erreur-legere { width: min(19rem, 92%); box-sizing: border-box; }

/* Panneau de cartes façon tomographe : fond blanc, titre au-dessus, valeur clé en dessous */
.tj-yeux { background: #fff; color: #000; padding: 0.3rem; border: 1.5px solid var(--pix); font-family: Arial, Helvetica, sans-serif; }
.tj-oeil h3 { font: bold 0.8rem Arial, Helvetica, sans-serif; color: #000; }
.tj-quatre { gap: 6px 6px; }
.tj-fig { color: #000; }
.tj-fig .tj-titre-carte { display: block; font: bold 0.62rem/1.2 Arial, Helvetica, sans-serif; text-align: left; padding-left: 20%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-fig .tj-valeur-carte { display: block; font: 0.6rem/1.2 Arial, Helvetica, sans-serif; text-align: left; padding-left: 20%; }
.tj-un-oeil { display: block; }
.tj-un-oeil .tj-oeil { display: none; }
.tj-un-oeil .tj-oeil.tj-actif { display: block; }
.tj-onglets { display: flex; align-items: flex-end; gap: 0; margin-bottom: -1.5px; }
.tj-onglets button { min-height: 2.2rem; min-width: 3.4rem; padding: 0.15rem 0.7rem; font: bold 0.85rem Arial, Helvetica, sans-serif; color: var(--pix); background: var(--lcd); border: 1.5px solid var(--pix); cursor: pointer; }
.tj-onglets button[aria-selected="true"] { background: #fff; border-bottom-color: #fff; position: relative; z-index: 1; }
.tj-onglets small { margin-left: auto; font-size: 0.65rem; }
.tj-dossier-bilan .tj-yeux { padding: 0.2rem; }

/* Grille mobile : colonne d'étiquette OD/OG + une colonne par carte */
.tj-grille-cartes { background: #fff; color: #000; border: 1.5px solid var(--pix); padding: 0.2rem; font-family: Arial, Helvetica, sans-serif; }
.tj-grille-t, .tj-grille-r { display: grid; grid-template-columns: 1.4rem repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: center; }
.tj-grille-t span { font: bold 0.6rem Arial, sans-serif; text-align: center; }
.tj-grille-r b { font: bold 0.7rem Arial, sans-serif; }
.tj-grille-r .tj-fig { width: 100%; }
.tj-grille-r canvas { max-width: 100%; height: auto !important; }

/* Démo : le bouton JOUER reste au centre, la démo se voit derrière */
.tj-texte.tj-voile { background: rgba(180, 190, 163, 0.35); }
/* Formulaire d'inscription */
.tj-inscription { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; width: min(100%, 22rem); text-align: left; }
.tj-inscription label { font-size: 0.82rem; }
.tj-inscription input[type="email"], .tj-inscription select { min-height: 2.6rem; padding: 0.2rem 0.5rem; font: 1rem ui-monospace, Menlo, Consolas, monospace; background: #fff; color: #111; border: 2px solid var(--pix); }
.tj-inscription .tj-case { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.3rem; line-height: 1.35; }
.tj-inscription .tj-case input { width: 1.2rem; height: 1.2rem; flex: none; margin-top: 0.1rem; accent-color: var(--pix); }
.tj-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tj-erreur-form { min-height: 1.2em; font-size: 0.82rem; font-weight: 700; }

/* Salle d'attente : compteur en haut du couloir, en alerte quand elle est presque pleine */
.tj-entree.tj-plein { background: #a32d2d; color: #fff; }
.tj-couloir .tj-danger { top: 1.1rem; bottom: auto; height: 30%; }

/* Missions, succès, étoiles de niveau, toasts */
.tj-missions { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 0.78rem; line-height: 1.45; }
.tj-missions .tj-fait { text-decoration: line-through; opacity: 0.6; }
.tj-missions-titre { margin-top: 0.3rem !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tj-etoiles-niv { font-size: 2rem; letter-spacing: 0.2em; line-height: 1; }
.tj-presque { font-weight: 700; line-height: 1.4; }
.tj-toast { position: absolute; left: 50%; top: 0.4rem; z-index: 11; transform: translateX(-50%); width: min(20rem, 92%); padding: 0.4rem 0.6rem; box-sizing: border-box;
  background: var(--pix); color: var(--lcd); border: 2px solid var(--lcd); box-shadow: 3px 3px 0 rgba(0,0,0,.4); font: 0.78rem/1.35 ui-monospace, Menlo, Consolas, monospace; text-align: center;
  animation: tj-toast-in .25s ease-out; transition: opacity .35s; }
.tj-toast b { font-size: 0.85rem; letter-spacing: 0.04em; }
.tj-toast-part { opacity: 0; }
@keyframes tj-toast-in { from { transform: translate(-50%, -12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tj-toast { animation: none; } }
/* Niveaux 5 et 6 : quatre boutons, le libellé passe sur deux lignes plutôt que d’être coupé */
.tj-niv5 .tj-bt { white-space: normal; line-height: 1.1; overflow-wrap: anywhere; hyphens: none; }

/* Tableau : une couleur par famille de paramètres (texte foncé, contraste AA sur le fond papier), valeurs jamais signalées */
.tj-ind tr.tj-f-k th, .tj-ind tr.tj-f-k td { color: #1f4e9c; }
.tj-ind tr.tj-f-p th, .tj-ind tr.tj-f-p td { color: #1d6236; }
.tj-ind tr.tj-f-e th, .tj-ind tr.tj-f-e td { color: #8a3f00; }
.tj-ind tr.tj-f-i th, .tj-ind tr.tj-f-i td { color: #5e2a85; }
.tj-ind tr.tj-f-k + tr.tj-f-p, .tj-ind tr.tj-f-p + tr.tj-f-e, .tj-ind tr.tj-f-e + tr.tj-f-i { border-top: 1px solid rgba(0,0,0,.25); }

/* Relecture après chaque décision : dossier net, données décisives entourées, texte du cas dans un carré noir à droite */
.tj-en-revue .tj-dossier { opacity: 1; }
.tj-en-revue .tj-flash { top: 0.2rem; }
.tj-fig.tj-cle { outline: 3px solid #000; outline-offset: 1px; position: relative; z-index: 1; }
.tj-ind tr.tj-cle th { background: #111; color: #fff; font-weight: 700; }
.tj-ind tr.tj-cle td.tj-cle-td { outline: 2.5px solid #111; outline-offset: -2px; font-weight: 700; }
.tj-ind tr.tj-cle-ok th { background: #1d5560; color: #fff; font-weight: 700; }
.tj-ind tr.tj-cle-ok td.tj-cle-td { outline: 2.5px solid #1d5560; outline-offset: -2px; font-weight: 700; }
.tj-carton.tj-cle { background: #111; color: #fff; border-color: #111; }
.tj-boite-cas { position: absolute; right: 0; bottom: 0; z-index: 9; width: min(64%, 18rem); max-height: 58%; overflow-y: auto; box-sizing: border-box;
  margin: 0; padding: 0.55rem 0.65rem; background: #000; color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 2px #000;
  font-size: 0.82rem; line-height: 1.35; text-align: center; }
.tj-boite-cas p { margin: 0 0 0.35rem; }
.tj-boite-titre { font-weight: 700; font-size: 0.92rem; }
.tj-boite-suite { display: block; margin: 0.3rem auto 0; padding: 0.25rem 0.6rem; background: #fff; color: #000; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.tj-boite-suite:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .tj-boite-cas { animation: tj-boite .25s ease-out; }
  @keyframes tj-boite { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Album : bouton pour revoir les cartes d'un diagnostic */
.tj-voir-cas { display: block; margin: 0.3rem 0 0; padding: 0.2rem 0.5rem; background: var(--pix); color: var(--lcd); border: 0; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.tj-voir-cas:focus-visible { outline: 3px solid var(--pix); outline-offset: 2px; }

/* Sablier de la relecture : la barre se vide jusqu'au patient suivant */
.tj-sablier { display: flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0 0.1rem; }
.tj-sablier-icone { font-size: 1.05rem; line-height: 1; animation: tj-sablier-tourne 1s steps(2) infinite; }
.tj-sablier-barre { flex: 1; height: 7px; border: 1.5px solid #fff; box-sizing: border-box; overflow: hidden; }
.tj-sablier-barre i { display: block; height: 100%; background: #fff; transform-origin: left; animation: tj-sablier-vide linear forwards; }
@keyframes tj-sablier-vide { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes tj-sablier-tourne { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.tj-en-pause .tj-sablier-barre i, .tj-en-pause .tj-sablier-icone { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tj-sablier-icone { animation: none; } }
.tj-en-pause .tj-boite-cas { visibility: hidden; }

/* ---------- Téléphones : revue responsive (petits écrans, paysage, cibles tactiles) ---------- */
.tj-bt, .tj-boite-suite, .tj-fig, .tj-quitter { touch-action: manipulation; }
.tj-quitter { min-height: 2.75rem; }
.tj-texte .tj-liens button { min-height: 2.75rem; }
.tj-sources a { display: inline-block; padding: 0.35rem 0; }
.tj-retour-haut { position: sticky; top: 0; z-index: 2; width: 100%; padding: 0.2rem 0; background: var(--lcd); }
/* Le dossier dépasse : repère en bas, collé au bord du cadre */
.tj-dossier.tj-plus::after { content: "▼ suite du dossier"; position: sticky; bottom: 0; display: block; padding: 0.7rem 0 0.15rem; text-align: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--pix); background: linear-gradient(rgba(180,190,163,0), var(--lcd) 55%); pointer-events: none; }
.tj-en-revue .tj-dossier.tj-plus::after { display: none; }
/* Petits téléphones (iPhone SE…) : bandeau et options masqués pendant la partie, barre d'état plus compacte */
@media (max-width: 360px), (max-height: 640px) {
  .tj-en-jeu .tj-pied, .tj-en-jeu .tj-options { display: none; }
  .tj-en-jeu .tj-hud > div:nth-child(2) { display: none; }
  .tj-hud { gap: 0.1rem 0.5rem; }
  .tj-hud span:first-child { font-size: 0.56rem; }
  .tj-jauge i { width: 5px; }
}
@media (max-width: 340px) {
  .tj-bt { font-size: 0.76rem; }
  .tj-niv5 .tj-bt { font-size: 0.68rem; overflow-wrap: normal; }
  .tj-ind { font-size: 0.64rem; }
  .tj-ind th, .tj-ind td { padding: 0 0.15rem; }
}
/* Carré de correction : pleine largeur sur téléphone étroit, bouton toujours visible */
@media (max-width: 400px), (max-height: 600px) {
  .tj-boite-cas { left: 0; width: auto; max-height: 64%; }
  .tj-boite-suite { position: sticky; bottom: 0; }
}
/* Paysage sur téléphone : on garde la hauteur pour le dossier */
@media (max-height: 450px) and (orientation: landscape) {
  .tj-pied, .tj-options { display: none; }
  .tj-hud > div:nth-child(2) { display: none; }
  .tj-hud { gap: 0 0.6rem; padding-bottom: 0.15rem; }
  .tj-commandes { margin-top: 0.25rem; }
  .tj-bt { min-height: 2.5rem; }
  .tj-boite-cas { left: auto; width: min(55%, 22rem); max-height: 94%; }
}
.tj-scene { overflow: hidden; }  /* rien ne déborde de la scène (évite un défilement de la page en paysage) */

.tj-niveaux button { min-width: 3.4rem; }

/* Lien vers l'autre langue (écran titre) et textes propres à la version anglaise */
.tj-texte .tj-langue { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.6rem;
  font: 0.78rem var(--police, sans-serif); text-decoration: underline; text-underline-offset: 0.15em; }
.tj-texte .tj-langue:hover, .tj-texte .tj-langue:focus-visible { background: var(--pix); color: var(--lcd); }
.tj:lang(en) .tj-dossier.tj-plus::after { content: "▼ more below"; }
.tj-demo .tj-couloir:lang(en)::after { content: "DEMO"; }