/* =========================================================
   PRAXIS — garde de nuit
   Trois voix, trois typographies :
   - la machine (PRAXIS)   : monospace, ambre de moniteur
   - l'hôpital (dossiers)  : papier bleuté, encre
   - l'humain (notes, fin) : serif
   ========================================================= */

:root {
  --nuit: #14202B;
  --nuit-2: #1A2935;
  --nuit-3: #223442;
  --trait: #30465A;
  --texte: #D5DFE5;
  --attenue: #8EA2AF;
  --papier: #E8EEF1;
  --papier-2: #DCE5EA;
  --encre: #1C2A33;
  --encre-2: #4A5B66;
  --ambre: #F0B44C;
  --ambre-sombre: #B98224;
  --alarme: #FF6B5E;
  --ok: #5CC8A8;
  --ecg-fond: #F7E3DE;
  --ecg-grille: #EBAEA3;
  --rouge-chine: #B8232B;
  --or: #E2B65C;
  --rose: #F6E4E0;

  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Roboto, system-ui, -apple-system, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --cjk: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "Hiragino Mincho ProN", serif;

  --r-petit: 4px;
  --r-moyen: 8px;
  --ombre: 0 18px 50px rgba(3, 8, 12, .55);
  --largeur: 860px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }

body {
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fond {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(20, 32, 43, .35) 0%, rgba(20, 32, 43, .92) 60%, var(--nuit) 100%),
    url("../assets/fond.jpg") center / cover no-repeat;
  filter: saturate(.6);
}
body.chaud .fond {
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(60, 14, 18, .5) 0%, rgba(30, 10, 12, .95) 65%, #1E0B0D 100%),
    url("../assets/fond.jpg") center / cover no-repeat;
  filter: saturate(.3) sepia(.4);
  transition: background 2s ease, filter 2s ease;
}

a { color: var(--ambre); }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; color: inherit; }

/* ---------- Bandeau ---------- */
.bandeau {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: rgba(16, 26, 35, .92);
  border-bottom: 1px solid var(--trait);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bandeau[hidden] { display: none; }
.marque {
  display: inline-flex; align-items: center; gap: 2px;
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-family: var(--mono); font-weight: 700; letter-spacing: .08em; color: var(--ambre);
}
.curseur {
  width: .6em; height: 1.05em; background: var(--ambre); margin-left: 3px;
  animation: clignote 1.1s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }

.fragments {
  display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0;
}
.fragments li {
  width: 30px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--trait); border-radius: var(--r-petit);
  font-family: var(--mono); font-size: 18px; color: var(--attenue);
  background: rgba(10, 18, 24, .5);
}
.fragments li.trouve { color: var(--ambre); border-color: var(--ambre-sombre); }
.fragments li.arrive { animation: arrive .9s ease; }
@keyframes arrive {
  0% { transform: scale(1.6); background: var(--ambre); color: var(--nuit); }
  100% { transform: scale(1); }
}
.bandeau-actions { display: flex; gap: 8px; }

.btn-discret {
  background: transparent; border: 1px solid var(--trait); border-radius: var(--r-petit);
  color: var(--attenue); padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.btn-discret:hover { color: var(--texte); border-color: var(--attenue); }
.btn-discret[aria-pressed="true"] { color: var(--ambre); border-color: var(--ambre-sombre); }

/* ---------- Scène ---------- */
#scene { outline: none; }
.ecran {
  max-width: var(--largeur); margin: 0 auto; padding: 28px 18px 80px;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; }
h1 { font-size: clamp(26px, 4.4vw, 36px); letter-spacing: -.01em; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  background: var(--ambre); color: #1E1405; font-weight: 650;
  border: 0; border-radius: var(--r-moyen); cursor: pointer;
}
.btn:hover { background: #F6C267; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondaire {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px;
  background: transparent; color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--r-moyen); cursor: pointer;
}
.btn-secondaire:hover { border-color: var(--attenue); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }

/* ---------- Note manuscrite (voix humaine) ---------- */
.note {
  font-family: var(--serif);
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.7;
  color: #EDE6DA;
  max-width: 34em;
  margin: 8vh auto 0;
}
.note p { margin: 0 0 1.1em; }
.note .signe { font-style: italic; color: var(--attenue); }

/* ---------- Console PRAXIS (voix machine) ---------- */
.console {
  font-family: var(--mono); font-size: 14.5px; line-height: 1.6;
  color: var(--ambre);
  background: rgba(8, 13, 18, .82);
  border: 1px solid #3A3222;
  border-left: 3px solid var(--ambre);
  border-radius: var(--r-petit);
  padding: 14px 16px;
  margin: 18px 0;
  white-space: pre-wrap;
  cursor: default;
}
.console .qui { color: var(--ambre-sombre); }
.console .l { display: block; min-height: 1.6em; }
.console.alerte { border-left-color: var(--alarme); color: #FFC2B8; }
.console.glitch { animation: glitch .35s steps(2) 2; }
@keyframes glitch {
  0% { transform: translate(0); filter: none; }
  25% { transform: translate(-2px, 1px); filter: hue-rotate(-20deg); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 0); filter: contrast(1.4); }
}

/* ---------- Tableau de garde ---------- */
.entete-ecran { margin-bottom: 8px; }
.entete-ecran p { color: var(--attenue); margin-top: 6px; }
.tableau { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--trait); }
.tableau li { border-bottom: 1px solid var(--trait); }
.ligne-dossier {
  width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 6px; background: none; border: 0; text-align: left; cursor: pointer;
}
.ligne-dossier:hover:not(:disabled) { background: rgba(240, 180, 76, .05); }
.ligne-dossier:disabled { cursor: not-allowed; opacity: .42; }
.num-box {
  font-family: var(--mono); font-size: 13px; color: var(--attenue);
  border: 1px solid var(--trait); border-radius: var(--r-petit); text-align: center; padding: 6px 0;
}
.ligne-dossier .titre { font-weight: 600; display: block; }
.ligne-dossier .sous { color: var(--attenue); font-size: 14px; }
.statut { font-size: 13px; color: var(--attenue); white-space: nowrap; }
.statut.clos { color: var(--ok); }
.statut.encours { color: var(--ambre); }
.ligne-archive .num-box { border-color: var(--ambre-sombre); color: var(--ambre); }
.pied-tableau { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 26px; color: var(--attenue); font-size: 14px; }

/* ---------- Étiquette patient ---------- */
.etiquette {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end;
  background: var(--papier); color: var(--encre);
  border-radius: var(--r-petit);
  padding: 14px 16px 12px;
  box-shadow: 0 2px 0 var(--papier-2), var(--ombre);
  position: relative;
}
.etiquette .lieu { font-size: 13px; color: var(--encre-2); }
.etiquette .nom { font-size: 22px; font-weight: 700; margin: 2px 0 4px; }
.etiquette .infos { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; }
.etiquette .infos b { font-weight: 650; }
.code-barre {
  width: 120px; height: 44px;
  background: repeating-linear-gradient(90deg,
    var(--encre) 0 2px, transparent 2px 4px, var(--encre) 4px 5px, transparent 5px 8px,
    var(--encre) 8px 11px, transparent 11px 12px, var(--encre) 12px 13px, transparent 13px 16px);
  opacity: .85;
}
.dossier-num { font-family: var(--mono); font-size: 13px; color: var(--attenue); margin-bottom: 8px; }

/* ---------- Étagère de documents ---------- */
.etagere { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.onglet {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13.5px;
  background: var(--nuit-2); color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--r-petit) var(--r-petit) var(--r-petit) 0;
  padding: 8px 12px; min-height: 40px; cursor: pointer;
}
.onglet::before {
  content: ""; width: 10px; height: 12px; border: 1.5px solid var(--attenue); border-radius: 1px;
  clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%);
}
.onglet:hover { border-color: var(--attenue); }
.onglet.lu { color: var(--attenue); }
.onglet.praxis { color: var(--ambre); border-color: #4A3C22; }
.onglet.praxis::before { border-color: var(--ambre-sombre); }

/* ---------- Fenêtres de documents ---------- */
.fenetre {
  position: fixed; z-index: 60;
  width: min(560px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  display: flex; flex-direction: column;
  background: var(--papier); color: var(--encre);
  border-radius: var(--r-moyen);
  box-shadow: var(--ombre), 0 0 0 1px rgba(0,0,0,.25);
  animation: ouvre .16s ease-out;
}
@keyframes ouvre { from { transform: scale(.97); opacity: 0; } }
.fenetre-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--papier-2); border-radius: var(--r-moyen) var(--r-moyen) 0 0;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.fenetre-tete:active { cursor: grabbing; }
.fenetre-titre { font-family: var(--mono); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenetre-fermer {
  width: 34px; height: 34px; border: 0; border-radius: var(--r-petit);
  background: transparent; color: var(--encre); font-size: 20px; line-height: 1; cursor: pointer;
}
.fenetre-fermer:hover { background: rgba(0,0,0,.08); }
.fenetre-corps { padding: 14px 16px 16px; overflow: auto; -webkit-overflow-scrolling: touch; }
.fenetre.praxis-doc .fenetre-tete { background: #2A2416; color: var(--ambre); }
.fenetre.praxis-doc .fenetre-fermer { color: var(--ambre); }
.fenetre.praxis-doc { background: #15120B; color: #F3CD85; }

pre.doc {
  margin: 0; white-space: pre-wrap; word-wrap: break-word;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
}
table.doc { border-collapse: collapse; width: 100%; font-size: 14px; }
table.doc th, table.doc td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #C9D4DA; vertical-align: top; }
table.doc th { font-weight: 650; background: var(--papier-2); }
table.doc td.num { font-family: var(--mono); white-space: nowrap; }
.ecg { width: 100%; height: auto; display: block; border-radius: var(--r-petit); }
.legende { font-size: 13px; color: var(--encre-2); margin-top: 8px; }

/* ---------- Tâches ---------- */
.taches { display: grid; gap: 16px; }
.tache {
  background: rgba(26, 41, 53, .88);
  border: 1px solid var(--trait); border-radius: var(--r-moyen);
  padding: 16px;
}
.tache-tete { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.tache-lettre {
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  border: 1px solid var(--trait); border-radius: 50%; color: var(--attenue);
}
.tache-consigne { font-weight: 600; }
.tache-aide { display: block; font-weight: 400; color: var(--attenue); font-size: 14px; margin-top: 2px; }
.tache.ok { border-color: rgba(92, 200, 168, .6); }
.tache.ok .tache-lettre { background: var(--ok); color: var(--nuit); border-color: var(--ok); }
.tache.ko { border-color: rgba(255, 107, 94, .65); }
.tache.ko .tache-lettre { border-color: var(--alarme); color: var(--alarme); }
.tache[aria-disabled="true"] { pointer-events: none; }

/* classer */
.bac {
  min-height: 56px; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px;
  border: 1px dashed var(--trait); border-radius: var(--r-moyen); margin-bottom: 12px;
}
.bac:empty::after { content: "Tout est placé."; color: var(--attenue); font-size: 14px; align-self: center; }
.colonnes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.colonne {
  min-height: 110px; padding: 10px;
  background: rgba(10, 17, 23, .55);
  border: 1px solid var(--trait); border-radius: var(--r-moyen);
  display: flex; flex-direction: column; gap: 8px;
}
.colonne-titre { font-size: 13.5px; color: var(--attenue); font-weight: 600; }
.colonne.cible { border-color: var(--ambre); background: rgba(240, 180, 76, .07); }
.colonne.appel { border-color: var(--ambre-sombre); }
.jeton {
  display: inline-block; padding: 7px 10px; min-height: 36px;
  background: var(--papier); color: var(--encre);
  border: 1px solid transparent; border-radius: var(--r-petit);
  font-size: 14px; line-height: 1.35; text-align: left;
  cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
@media (pointer: fine) { .jeton, .ordre .poignee { touch-action: none; } }
.jeton.choisi { border-color: var(--ambre); box-shadow: 0 0 0 2px var(--ambre); }
.jeton.fantome { position: fixed; z-index: 90; pointer-events: none; box-shadow: var(--ombre); opacity: .92; transform: rotate(-1.5deg); }
.jeton.source-glisse { opacity: .35; }

/* nombre */
.champ-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.champ {
  width: 150px; min-height: 44px; padding: 8px 12px;
  font-family: var(--mono); font-size: 18px;
  background: rgba(8, 13, 18, .7); color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
}
.champ:focus { border-color: var(--ambre); outline: none; }
.champ.large { width: min(100%, 420px); font-family: var(--sans); font-size: 17px; }
.unite { color: var(--attenue); font-family: var(--mono); }

/* ordre */
.ordre { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ordre li {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 8px 8px 10px;
  background: rgba(10, 17, 23, .55); border: 1px solid var(--trait); border-radius: var(--r-petit);
}
.ordre li.glisse { border-color: var(--ambre); background: rgba(240, 180, 76, .08); }
.ordre .rang { font-family: var(--mono); color: var(--attenue); font-size: 13px; text-align: center; }
.ordre .poignee { cursor: grab; user-select: none; -webkit-user-select: none; }
.fleches { display: flex; gap: 4px; }
.fleches button {
  width: 36px; height: 36px; border: 1px solid var(--trait); border-radius: var(--r-petit);
  background: transparent; cursor: pointer; font-size: 15px;
}
.fleches button:hover { border-color: var(--attenue); }

/* cases / choix */
.options { display: grid; gap: 8px; }
.option {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; cursor: pointer;
  background: rgba(10, 17, 23, .55); border: 1px solid var(--trait); border-radius: var(--r-petit);
}
.option:hover { border-color: var(--attenue); }
.option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ambre); }
.option:has(input:checked) { border-color: var(--ambre-sombre); background: rgba(240, 180, 76, .07); }

/* lignes */
.lignes { display: grid; gap: 8px; }
.ligne-choix {
  display: grid; grid-template-columns: 1fr minmax(160px, 240px); gap: 10px; align-items: center;
  padding: 8px 10px; background: rgba(10, 17, 23, .55);
  border: 1px solid var(--trait); border-radius: var(--r-petit);
}
.ligne-choix .texte { font-size: 14.5px; }
select.champ { width: 100%; font-family: var(--sans); font-size: 15px; }
.somme { margin-top: 10px; font-family: var(--mono); color: var(--ambre); }

/* ---------- Validation, indices, retour ---------- */
.pied-dossier { margin-top: 22px; }
.retour { margin-top: 12px; }
.indices { margin-top: 10px; }

.fragment-recu {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  margin-top: 22px; padding: 18px;
  background: rgba(8, 13, 18, .85); border: 1px solid var(--ambre-sombre); border-radius: var(--r-moyen);
}
.fragment-recu .chiffre {
  font-family: var(--mono); font-size: 64px; line-height: 1; color: var(--ambre);
  width: 84px; height: 96px; display: grid; place-items: center;
  border: 1px solid var(--ambre-sombre); border-radius: var(--r-moyen);
  animation: arrive 1.1s ease;
}
.fragment-recu p { margin: 4px 0 0; color: var(--attenue); }

details.debrief {
  margin-top: 16px; background: var(--papier); color: var(--encre);
  border-radius: var(--r-moyen); padding: 0;
}
details.debrief summary {
  cursor: pointer; padding: 14px 16px; font-weight: 650; list-style-position: inside;
}
.debrief-corps { padding: 0 18px 18px; max-width: 70ch; }
.debrief-corps p { margin: 0 0 10px; }
.debrief-corps .sources { font-size: 13.5px; color: var(--encre-2); border-top: 1px solid #C9D4DA; padding-top: 10px; margin-top: 14px; }

/* ---------- Archive (coffre) ---------- */
.coffre {
  margin: 24px auto 0; max-width: 520px; text-align: center;
  padding: 28px 20px; border: 1px solid var(--ambre-sombre); border-radius: 12px;
  background: rgba(8, 13, 18, .85);
}
.code-cases { display: flex; justify-content: center; gap: 8px; margin: 18px 0; }
.case-code {
  width: 46px; height: 58px; text-align: center;
  font-family: var(--mono); font-size: 28px; color: var(--ambre);
  background: #0B1116; border: 1px solid var(--trait); border-radius: var(--r-moyen);
}
.case-code:focus { border-color: var(--ambre); outline: none; }
.coffre.ouvert { border-color: var(--rouge-chine); }

/* ---------- Déchiffrement ---------- */
.cadenas {
  background: rgba(26, 18, 20, .88);
  border: 1px solid #4A2A2D; border-radius: var(--r-moyen);
  padding: 18px; margin-top: 18px;
}
.cadenas-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.icone-cadenas { width: 26px; height: 30px; flex: none; }
.cadenas.ferme { opacity: .45; }
.cadenas .ligne-choix .texte { font-family: var(--mono); font-size: 19px; color: var(--or); }
body.chaud .bandeau { background: rgba(34, 13, 16, .92); border-bottom-color: #4A2A2D; }
body.chaud .fragments li.trouve { color: var(--or); border-color: #7A5A2A; }
.cadenas.ouvert { border-color: var(--or); }
.cadenas .etagere { margin-bottom: 14px; }
body.chaud .console { color: #F4D08E; border-left-color: var(--or); }
body.chaud .onglet.praxis { color: var(--or); }

/* ---------- Révélation finale ---------- */
.revelation { text-align: center; padding-top: 6vh; }
.suite {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin: 10px auto 0; max-width: 720px;
}
.case-rev {
  width: 84px; display: grid; grid-template-rows: 46px 30px 90px; justify-items: center; align-items: center;
}
.case-rev .d { font-family: var(--mono); font-size: 34px; color: var(--or); }
.case-rev .py { font-family: var(--serif); font-style: italic; font-size: 19px; color: #E9CFA6; opacity: 0; transition: opacity .8s ease; }
.case-rev .hz { font-family: var(--cjk); font-size: 70px; line-height: 1; color: #FBE9E4; opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.2s ease; }
.case-rev.pinyin .py { opacity: 1; }
.case-rev.hanzi .hz { opacity: 1; transform: none; }
.case-rev.hanzi .hz.ai { color: #FF8A8F; }
.traduction {
  font-family: var(--serif); font-size: clamp(26px, 4.5vw, 38px); color: #FBE9E4;
  margin: 26px 0 8px; opacity: 0; transition: opacity 1.4s ease;
}
.traduction.vue { opacity: 1; }
.message-final {
  font-family: var(--serif); font-size: clamp(18px, 2.4vw, 21px); line-height: 1.75;
  color: #F1E4DB; text-align: left; max-width: 34em; margin: 34px auto 0;
  opacity: 0; transition: opacity 1.6s ease;
}
.message-final.vu { opacity: 1; }
.message-final p { margin: 0 0 1em; }
.message-final .signature { text-align: right; font-style: italic; margin-top: 1.4em; }
.stats { margin-top: 30px; color: var(--attenue); font-size: 14px; }

.noscript { padding: 40px; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Petits écrans ---------- */
@media (max-width: 640px) {
  .bandeau { grid-template-columns: auto 1fr; gap: 8px; padding-left: 10px; padding-right: 10px; }
  .fragments { grid-column: 1 / -1; grid-row: 2; }
  .bandeau-actions { justify-self: end; }
  .fragments li { width: 26px; height: 30px; font-size: 15px; }
  .ecran { padding: 18px 12px 70px; }
  .etiquette { grid-template-columns: 1fr; }
  .code-barre { display: none; }
  .ligne-dossier { grid-template-columns: 38px 1fr; }
  .ligne-dossier .statut { grid-column: 2; }
  .ligne-choix { grid-template-columns: 1fr; }
  .fenetre {
    left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: 76vh;
  }
  .fenetre-tete { cursor: default; }
  .case-code { width: 38px; height: 50px; font-size: 22px; }
  .code-cases { gap: 5px; }
  .case-rev { width: 44px; grid-template-rows: 36px 24px 56px; }
  .case-rev .d { font-size: 24px; }
  .case-rev .py { font-size: 14px; }
  .case-rev .hz { font-size: 40px; }
  .suite { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .curseur { animation: none; }
}