:root {
  /* Couleurs de la marque : les mêmes en thème clair et en thème sombre. */
  --color-sun: #f2a71b;
  --color-sun-dark: #d68c0c;
  --color-leaf: #4f8a3d;
  --color-leaf-dark: #386b2a;
  --color-earth: #8a5a34;
  --color-earth-rgb: 138, 90, 52; /* pour rgba(var(--color-earth-rgb), …) */
  --color-ink: #2c2416;   /* encre des bulles et étiquettes posées sur la carte */
  --color-tomato: #c1442e; /* pastilles « à faire » de la carte */

  /* Le bois des cartes flottantes et des fenêtres « bois » (mêmes couleurs dans les deux thèmes). */
  --wood-ink: #4a2a10;       /* texte sur le bois */
  --wood-dark: #3a2414;      /* cuir du Livre, contours sombres */
  --wood-light: #d9a066;     /* filet clair intérieur */
  --wood-glow: rgba(217, 160, 102, 0.9);
  --wood-cream: #fff4dc;     /* fond des cartes dans le bois */
  --wood-paper: #fff1d2;     /* fond des boutons dans le bois */
  --wood-bg-rgb: 255, 230, 178; /* fond crème, rgba(var(--wood-bg-rgb), …) */

  /* Thème clair (contrastes AA mesurés : texte ≥ 4,5:1, contours ≥ 3:1 ; vert et rouge un
     peu plus foncés que la marque, ambre lisible pour les pastilles). */
  --bg: #faf6ee;
  --bg-elevated: #ffffff;
  --bg-header: #fef3dc;
  --bg-muted: #f1ebdc;
  --text: var(--color-ink);
  --text-muted: #6b5f4a;
  --border: #e3d9c2;
  --accent: #3a7530;
  --accent-contrast: #ffffff;
  --accent-secondary: var(--color-sun);
  --danger: #b23a25;
  --danger-contrast: #ffffff;
  --warn-text: #855400;
  --focus: #a35a00;
  --shadow: 0 1px 3px rgba(44, 36, 22, 0.12);
  --radius: 12px;
  --inv-icon-bg: #ffffff;

  /* Mise en page : --dock, ce qui reste en bas de l'écran (la zone sûre des téléphones à
     encoche) ; --menu-tab, la languette du menu latéral ; --header-h, plus de bandeau en
     haut : la carte occupe tout l'écran. */
  --dock: env(safe-area-inset-bottom, 0px);
  --menu-tab: 22px;
  --header-h: 0px;

  /* Empilement (z-index) des couches posées sur la page, du bas vers le haut. Les z-index
     plus petits (2, 3, 6) qui restent dans le fichier sont locaux à une carte ou au Livre. */
  --z-stage: 5;        /* #farm-stage, #map-stage : la carte en plein écran */
  --z-debug: 40;       /* #god-bar (Options, god mode) */
  --z-hud: 45;         /* .player-card (à gauche) et .hud (à droite) : jamais l'un sur l'autre */
  --z-fab: 50;         /* .sleep-fab (à droite) et .tool-bar (au milieu) : côte à côte */
  --z-menu: 55;        /* .side-menu, au-dessus des boutons flottants */
  --z-banner: 60;      /* .consent-banner (en bas) et .tuto (la bulle, au-dessus du bandeau) */
  --z-window: 90;      /* .window-layer : fenêtres de la carte */
  --z-test: 95;        /* .test-panel (le mode test), au-dessus des fenêtres */
  --z-hud-over: 95;    /* la carte flottante, estompée, par-dessus une fenêtre ouverte */
  --z-modal: 100;      /* .modal-backdrop (#modal-root) : toujours au-dessus des fenêtres */
  --z-toast: 200;      /* #toast-root : les messages, tout en haut */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a14;
    --bg-elevated: #26231b;
    --inv-icon-bg: #3a3428;
    --bg-header: #2c2718;
    --bg-muted: #2a271e;
    --text: #f2ecdd;
    --text-muted: #b9ae95;
    --border: #3c3626;
    --accent: #6fae5a;
    --accent-contrast: #10230d;
    --accent-secondary: var(--color-sun);
    --danger: #ea7a61;
    --danger-contrast: #2a0d06;
    --warn-text: var(--color-sun);
    --focus: var(--color-sun);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Le masquage du défilement horizontal est sur html seul : avec overflow sur html ET body,
   body devient un conteneur de défilement et le bandeau « sticky » ne reste plus en haut.
   Le zoom à deux doigts reste permis (pas de maximum-scale dans jeu.html) ; le double appui
   ne zoome pas la page (touch-action: manipulation, ici et sur les boutons : un double appui
   rapide reste deux appuis). Les cartes (#farm-stage, #map-stage : touch-action: none)
   gèrent elles-mêmes tous leurs gestes. */
html {
  overflow-x: hidden;
  touch-action: manipulation;
}

body { padding-bottom: calc(88px + var(--dock)); } /* menu du bas + bouton « Zzz » : la fin du contenu passe au-dessus du bouton */

button {
  font-family: inherit;
  font-size: 1rem;
  touch-action: manipulation;
}

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn:active { transform: translateY(1px); }

main {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* Menu latéral rabattable, à gauche (il remplace le menu du bas) : les icônes les unes
   au-dessus des autres, dans le cadre bois des cartes flottantes. Fermé, il glisse hors de
   l'écran et n'en dépasse que sa languette (triangle en pixel art pointé vers la droite). */

.side-menu {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: var(--z-menu);
  display: flex;
  align-items: center;
  transform: translate(calc(-100% + var(--menu-tab)), -50%);
  transition: transform 0.2s ease-out;
}
.side-menu.open { transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) { .side-menu { transition: none; } }

.bottom-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 6px 6px calc(6px + env(safe-area-inset-left));
  background: rgba(var(--wood-bg-rgb), 0.82);
  border: 3px solid var(--color-earth);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  box-shadow: inset 0 0 0 2px var(--wood-glow), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.side-menu:not(.open) .bottom-nav { visibility: hidden; transition: visibility 0s 0.2s; }

.nav-btn {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wood-ink);
  font: inherit;
  cursor: pointer;
}
.nav-btn.active { background: rgba(var(--color-earth-rgb), 0.22); border-color: var(--color-earth); }
.nav-btn:active { transform: translateY(1px); }
.nav-icon { position: relative; font-size: 1.6rem; line-height: 1; }
.nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* icônes seules : le nom est dans l'infobulle */

/* La languette : collée au bord droit du menu, elle dépasse seule de l'écran quand il est fermé. */
.side-tab {
  position: relative;
  width: var(--menu-tab);
  height: 56px;
  margin-left: -3px; /* recouvre la bordure du menu : un seul cadre */
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(var(--wood-bg-rgb), 0.88);
  border: 3px solid var(--color-earth);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  box-shadow: inset -2px 0 0 var(--wood-glow), 2px 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.side-tab::after { content: ""; position: absolute; inset: -6px -16px -6px 0; } /* zone d'appui de 44 px environ */
.side-tab-arrow { fill: #6b3f1c; transition: transform 0.2s; }
.side-menu.open .side-tab-arrow { transform: scaleX(-1); } /* ouvert : le triangle montre le sens de la fermeture */
.side-tab:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }
.side-tab-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--danger-contrast);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.nav-badge {
  position: absolute;
  top: -6px;
  right: -12px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: var(--danger-contrast);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.ferme-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

.ferme-link {
  flex: 1 1 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.notif-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left-width: 5px;
  background: var(--bg-muted);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notif.p1 { border-left-color: var(--danger); }
.notif.p2 { border-left-color: var(--color-sun-dark); }
.notif.p3 { border-left-color: var(--accent); }
.notif-icon { font-size: 1.4rem; }
.notif-text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.notif-go { color: var(--text-muted); font-size: 1.4rem; }
.notif-empty { padding: 12px 0; }

/* Version 1.3 : le courrier. Une lettre non lue se remarque ; la lettre ouverte est une
   feuille de papier (mêmes couleurs en thème clair et en thème sombre). */
.notif.mail { border-left-color: #b9772a; }
.notif.mail.lu { opacity: 0.8; }
.notif.mail:not(.lu) { background: #fff6dc; color: #3a2a12; border-color: #d9b56a; border-left-color: #b9772a; }
.notif.mail:not(.lu) .notif-where { color: #6b5330; }
.mail-new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #b9772a; color: #ffffff; font-size: 0.72rem; font-weight: 700; vertical-align: middle; }
.mail-title { margin-top: 18px; }
.modal.letter { background: #fdf6e3; color: #3a2a12; border: 1px solid #d9c9a0; }
.modal.letter h2 { color: #3a2a12; }
.letter-place { margin: 0 0 4px; text-align: right; font-style: italic; color: #6b5330; }
.letter-body { margin: 10px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.55; }
.letter-body p { margin: 0 0 10px; }
.letter-sign { margin: 0 0 14px; text-align: right; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.05rem; }
.letter-gifts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding: 10px 12px; border: 1px dashed #b9772a; border-radius: var(--radius); background: #fff9ea; }
.letter-gifts .muted { color: #6b5330; }
.letter-gift-list { font-size: 1.05rem; font-weight: 700; }

.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 16px;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.panel p.hint {
  color: var(--text-muted);
  margin: 0;
}

.btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--danger-contrast);
}

/* FLU-38 : action rare et destructrice, en contour seulement */
.btn.danger-outline {
  background: transparent;
  border: 2px solid var(--danger);
  color: var(--danger);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.stack { display: flex; flex-direction: column; gap: 12px; }

textarea, input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 0;
}

@media (min-width: 640px) {
  .modal-backdrop { align-items: center; padding: 16px; }
}

.modal {
  background: var(--bg-elevated);
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 16px 28px;
  box-shadow: var(--shadow);
}

/* Version 1.1 : fenêtre « Modifier » d'un membre de la famille, et menu du Moulin. */
.member-name { overflow-wrap: anywhere; }
.member-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
  font-size: 1.15rem;
}
.member-preview .portrait-emoji { font-size: 2.6rem; }
.member-field { gap: 6px; }
.member-modal input.member-input {
  font-family: inherit;
  font-size: 1.05rem;
}
.choice-row { gap: 8px; flex-wrap: wrap; }
.choice-btn { flex: 1 1 120px; gap: 8px; }
.choice-emoji { font-size: 1.5rem; line-height: 1; }
.choice-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  font-weight: 700;
}
.choice-btn:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }
.mill-stock { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 1.05rem; }

/* Version 1.2 : composer la famille, animaux de compagnie. */
.family-edit-btn { margin: 0 0 8px; }
.ration-title-end { gap: 6px; align-items: center; flex-wrap: nowrap; }
.ration-title .num { white-space: nowrap; }
.help-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.family-add { gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.family-add .btn { flex: 1 1 150px; }
.member-leave { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); gap: 6px; }
.pet .portrait-emoji { font-size: 2rem; }

@media (min-width: 640px) {
  .modal { border-radius: var(--radius); }
}

.modal h2 {
  margin-top: 0;
}

.modal-close {
  float: right;
}

/* Le panneau du mode test (js/ui/testmode.js) : par-dessus la carte et les onglets, ouvert par
   « 🧪 Test » du menu latéral, fermé par son ✕ ; il défile seul. */
.test-panel {
  position: fixed;
  z-index: var(--z-test);
  top: calc(8px + env(safe-area-inset-top));
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 16px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 8px 12px 16px;
  background: var(--bg-muted);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.test-panel[hidden] { display: none; }
.test-panel-head { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; background: var(--bg-muted); }
.test-panel-head h2 { margin: 0; font-size: 1.1rem; }
.test-panel #test-qty { width: 5em; }
.test-panel details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.state-dump {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  max-height: 260px;
  overflow-y: auto;
}

/* ---------- Lot 1 : cartes, appareils, interrupteurs, Dormir ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text);
  font: inherit;
}

button.card { cursor: pointer; min-height: 44px; }
button.card:active { transform: translateY(1px); }

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
}

.card-title .chevron { color: var(--text-muted); font-weight: 400; }

.big {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--text-muted); font-size: 0.9rem; }

/* ---------- bandeau de choix sur le suivi ---------- */
.consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-banner);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--bg-elevated);
  color: var(--text);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(44, 36, 22, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.consent-banner p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.consent-banner a { color: var(--accent); font-weight: 600; }
.consent-banner .row .btn { flex: 1; }
@media (min-width: 720px) {
  .consent-banner { flex-direction: row; align-items: center; justify-content: center; gap: 24px; }
  .consent-banner p { max-width: 640px; }
  .consent-banner .row .btn { flex: none; min-width: 120px; }
}
.num { font-variant-numeric: tabular-nums; }

.alert {
  color: var(--danger);
  font-weight: 600;
  font-size: 0.9rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip.panne { background: var(--danger); border-color: var(--danger); color: var(--danger-contrast); }
.chip.warn { border-color: var(--danger); color: var(--danger); }
.chip.res.manque { border-color: var(--danger); color: var(--danger); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.bar-fill.warn { background: var(--color-sun); }
.bar-fill.bad { background: var(--danger); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 2px solid var(--danger);
  background: var(--danger);
  color: var(--danger-contrast);
  font-weight: 700;
  cursor: pointer;
}

.switch .knob {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
}

.switch[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  flex-direction: row-reverse;
  padding: 0 6px 0 14px;
}

.switch:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.switch:focus-visible, .btn:focus-visible, .card:focus-visible, .nav-btn:focus-visible, .ferme-link:focus-visible {
  outline: 3px solid var(--color-sun);
  outline-offset: 2px;
}

.device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.device-actions .btn { padding: 0 12px; }

.device-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }

.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.screen-head h2 { margin: 0; }

/* Bouton « Zzz » (Dormir) : rond, flottant en bas à droite de l'écran, au-dessus du menu
   du bas, sur tous les onglets. Désactivé, il affiche les secondes restantes. */
.sleep-fab {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(var(--dock) + 12px);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* seuls le bouton et la pastille reçoivent les appuis */
}

.sleep-fab > * { pointer-events: auto; }

.sleep-fab .sleep-btn {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* Le bouton est un dessin (assets/art.png : sleep-on, sleep-off) ; en attente, les secondes
   restantes sont écrites en police pixel par-dessus la lune grise. */
.sleep-fab .sleep-art { --s: 64px; position: absolute; inset: 0; }
.sleep-fab .sleep-btn:active { transform: translateY(2px); }
.sleep-fab .sleep-btn:disabled { cursor: not-allowed; }
.sleep-fab .sleep-btn:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }

.report-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.btn.btn-pill { border-radius: 999px; min-width: 44px; }

select {
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text);
  padding: 0 8px;
  font: inherit;
  max-width: 100%;
}

.toast {
  position: fixed;
  bottom: calc(84px + var(--dock));
  left: 16px;
  right: 16px;
  max-width: 480px;
  margin: 0 auto;
  background: var(--text);
  color: var(--bg);
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: var(--z-toast);
  text-align: center;
}

/* ---------- Lot 2 : potager, famille, inventaire, aperçu du repas ---------- */

/* Aperçu du repas : une pastille à côté du bouton « Zzz », seulement si le repas prévu est insuffisant. */
.sleep-fab .meal-chip {
  min-height: 28px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}

.section-head h3, .section-title { margin: 0; font-size: 1.05rem; }
.section-title { margin-top: 22px; margin-bottom: 10px; }

.plots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 640px) {
  .plots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.plot { padding: 10px; gap: 8px; }
.plot.mature { border-color: var(--accent); border-width: 2px; }
.plot .btn { width: 100%; padding: 0 8px; font-size: 0.92rem; }
.plot-foot { margin-top: 12px; }
/* Fiche de parcelle (et de frigo) : « #n » en police pixel, le nom, l'icône ; la jauge ;
   une rangée de boutons d'icônes. */
.plot-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.plot-num { flex: none; opacity: 0.7; }
.plot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plot-ico { flex: none; }
.plot-ico .px { --pxs: 32px; vertical-align: middle; }
.plot.empty .plot-name { color: var(--text-muted); font-weight: 600; }
.plot-btns { display: flex; gap: 6px; }
.plot-btns .btn { flex: 1; min-width: 0; }
.icon-btn-px { padding: 0; min-height: 44px; }
.icon-btn-px .px { --pxs: 32px; vertical-align: middle; }
.icon-btn-px.done { background: var(--bg-muted); box-shadow: inset 0 0 0 2px var(--accent); }
.icon-btn-px:disabled .px { filter: grayscale(0.7); opacity: 0.6; }
.icon-btn-px.done:disabled .px { filter: none; opacity: 1; }

.portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

@media (min-width: 640px) {
  .portraits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Les cartes des membres, deux par ligne */
.member-rows { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.member-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; }
.member-row .portrait-emoji { font-size: 1.9rem; flex: none; }
.member-row-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-row-text .chip { align-self: flex-start; }
/* en mode modification, les boutons passent sur leur propre ligne, sous le prénom */
.member-row-btns { display: flex; flex-direction: row; gap: 4px; flex: 1 0 100%; justify-content: flex-end; }
.member-row-btns .btn { min-width: 44px; padding: 0 10px; }
.portrait { align-items: flex-start; }
.portrait .btn { width: 100%; padding: 0 8px; font-size: 0.92rem; }
.portrait-emoji { font-size: 2.2rem; line-height: 1.1; }
.portrait .bar { width: 100%; }

.inv-group { margin: 12px 0 20px; }
.inv-group h3 { margin: 0 0 8px; font-size: 1.05rem; }

.inv-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.inv-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}

/* Inventaire en cases, comme un sac de jeu vidéo : le dessin de l'objet, sa quantité en
   police pixel en bas à droite ; un point rouge si une partie périt cette nuit. */
.inv-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
  margin: 4px 0 14px;
}
.inv-slot {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  background: rgba(122, 82, 50, 0.22);
  box-shadow: inset 2px 2px 0 rgba(58, 36, 20, 0.35), inset -2px -2px 0 rgba(255, 244, 220, 0.5);
  cursor: pointer;
}
.inv-slot:active { transform: translateY(1px); }
.inv-slot:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 1px; }
.inv-slot-icon { font-size: 2rem; line-height: 1; }
.inv-slot-icon .px { --pxs: 32px; vertical-align: top; } /* 16 px doublés : des pixels entiers */
.inv-slot-qty { position: absolute; right: 3px; bottom: 3px; filter: drop-shadow(1px 1px 0 #2a1a0e) drop-shadow(-1px 0 0 #2a1a0e); }
.inv-slot-qty .pxt { --p: 2px; }
.inv-slot.soon { border-color: var(--danger); }
.inv-slot-soon { position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--wood-cream); }
.inv-fridge { margin: 0 0 8px; font-weight: 700; }
.inv-fridge.warm { color: var(--danger); }
.inv-all { width: 100%; margin-bottom: 8px; }

/* Les onglets de l'inventaire : des icônes seules, en haut de la fenêtre. */
.inv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.window-head .inv-tabs { margin: 0; flex: 1 1 auto; min-width: 0; align-items: center; gap: 3px; flex-wrap: nowrap; } /* jusqu'à cinq onglets, le « ? » et ✕ sur une ligne */
.inv-tab {
  width: 46px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.inv-tab .px { --pxs: 32px; vertical-align: top; }
.inv-tab.active { border-color: var(--color-earth); background: rgba(var(--color-earth-rgb), 0.22); }
.inv-tab:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 1px; }

/* Fenêtre flottante (l'Inventaire) : centrée, sans toucher les bords, hauteur selon le contenu. */
.window-layer.flottante { align-items: center; padding: 16px 12px; }
.stage-window.flottante {
  height: auto;
  max-height: min(78vh, 560px);
  max-height: min(78dvh, 560px);
  max-width: 460px;
  border-radius: 8px;
}
.stage-window.bois.flottante { border-bottom: 3px solid var(--color-earth); }
.stage-window.flottante .window-head { min-height: 0; padding: 6px 8px 6px 10px; }

/* Le cadre bois des cartes flottantes, commun aux fenêtres de dialogue « bois » (fiche d'un
   objet de l'inventaire…, dont celles des cartes : la gare, les étals, le tronc creux) et aux
   fenêtres de la carte « bois » (Famille…) : les couleurs de l'interface y sont redéfinies (crème et bois, en
   clair comme en sombre) ; cartes, boutons et textes suivent. */
.modal.bois,
.stage-window.bois {
  --bg: rgba(250, 232, 196, 0.98);
  --bg-elevated: var(--wood-cream);
  --bg-muted: rgba(var(--wood-bg-rgb), 0.82);
  --border: #c9965e;
  --text: var(--wood-ink);
  --text-muted: #7a5434;
  background: var(--bg);
  color: var(--text);
  border: 3px solid var(--color-earth);
}
.modal.bois {
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--wood-glow), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.modal.bois .btn:not(.primary):not(.danger),
.stage-window.bois .btn:not(.primary):not(.danger) { border: 2px solid var(--color-earth); background: var(--wood-paper); }
.item-modal { max-width: 360px; }
.modal-backdrop:has(.item-modal) { align-items: center; padding: 16px; } /* une carte au milieu de l'écran */
.modal-backdrop:has(.item-modal) .modal { border-radius: 8px; }
.item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.item-icon {
  flex: none;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  background: rgba(122, 82, 50, 0.22);
  font-size: 2.6rem;
  line-height: 1;
}
.item-icon .px { --pxs: 48px; vertical-align: top; }
.item-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-title strong { font-size: 1.15rem; }
.item-lines { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; }
.item-actions { gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.item-actions .btn { flex: 1 1 auto; }

.plant-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
}

.modal .stack { margin: 12px 0; }

/* ---------- Lot 3 : inventaire par lots, Marché ---------- */

/* Sous-onglets (Maison, Inventaire, Marché) : toujours une seule rangée. À partir de quatre
   onglets sur un téléphone, seul l'onglet ouvert affiche son nom (voir plus bas). */
.subtabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 12px 0 8px;
}

.subtab-btn {
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
}

.subtab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}


.subtab-btn:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }

.shop-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.shop-row > .btn { width: 100%; }
.shop-row.unavailable > :not(.btn) { opacity: 0.7; }

.qty-row { gap: 8px; }
.qty-row .qty { min-width: 2.5ch; text-align: center; font-weight: 700; font-size: 1.1rem; }


/* ---------- Lot 6 : Pâturage et moutons ---------- */

.sheep.ready { border-color: var(--accent); border-width: 2px; background: var(--bg-elevated); }
.sheep .device-actions .btn { flex: 1 1 130px; }

/* ---------- Lot 5 : ateliers (Ferme) et Livre de recette ---------- */

.recipes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recipe.ready { border-color: var(--accent); border-width: 2px; background: var(--bg-elevated); }
.recipe.unavailable .card-title, .recipe.unavailable .muted { opacity: 0.75; }
.recipe .btn { width: 100%; }

.ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.ingredients .missing { color: var(--danger); font-weight: 600; }

/* ---------- Lot 7 : arbre des technologies et automatisations ---------- */

.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.branch { margin: 8px 0 22px; }
.branch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.branch-head h3 { margin: 0; font-size: 1.1rem; }
/* FLU-28 : branches repliables */
summary.branch-head { cursor: pointer; list-style: none; min-height: 44px; flex-wrap: wrap; }
summary.branch-head::-webkit-details-marker { display: none; }
summary.branch-head h3::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform 0.15s; }
.branch[open] > summary.branch-head h3::before { transform: rotate(90deg); }
.branch:not([open]) { margin-bottom: 8px; }
.branch-nodes { display: flex; flex-direction: column; gap: 12px; }
.tech-node .desc { font-size: 0.95rem; }
.tech-node.available { border-color: var(--accent); border-width: 2px; background: var(--bg-elevated); }
.tech-node.owned { border-color: var(--accent); }
.tech-node.locked .card-title, .tech-node.locked .desc { opacity: 0.75; }
.tech-node .btn { width: 100%; }
.prereqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.95rem; }
.prereqs .missing { color: var(--danger); font-weight: 600; }
.level-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: var(--radius); border: 1px dashed var(--border); }
.level-row .level-line, .card .level-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.level-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.level-row .chip { white-space: normal; }
.chip.auto { border-color: var(--accent); color: var(--accent); }
.fridge.cold { border-color: var(--accent); }
.fridge.warm { border-color: var(--danger); border-width: 2px; }
.tree.adult { border-color: var(--accent); }
.tree.free { border-style: dashed; }
.semis-choice { justify-content: flex-start; text-align: left; height: auto; min-height: 44px; padding: 8px 12px; flex-direction: column; align-items: flex-start; gap: 2px; }
.semis-choice > span { display: block; }
.semis-choice[aria-pressed="true"] { border-color: var(--accent); border-width: 2px; }

/* ---------- Lot 9 : chapitres et autonomie ---------- */

.level-check { color: var(--accent); font-weight: 700; }
#levels-title:focus { outline: none; }
/* FLU-30 : progression vers le niveau suivant, sous « Niv. » */
.level-ind { position: relative; overflow: hidden; }
.level-ind-bar { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--bg-muted); }
.level-ind-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.chapter-card { border-color: var(--accent); border-width: 2px; background: var(--bg-elevated); margin-bottom: 12px; }
.objectives { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.objective { display: flex; flex-direction: column; gap: 4px; }
.objective-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.objective.ok .objective-label { color: var(--accent); font-weight: 700; }
.objective-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.unlock-list { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.unlock-list li { padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--bg-muted); }
.modal h3 { margin: 12px 0 4px; font-size: 1.05rem; }
#chapter-close { margin-top: 16px; }
.autonomy-card { margin-bottom: 12px; }
.chart { display: block; width: 100%; max-width: 480px; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { fill: var(--text-muted); font-size: 9px; }
.chart-empty { fill: var(--text-muted); font-size: 10px; }
.chart-bar { fill: var(--accent); }
.chart-target { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-curve { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart-raw { fill: none; stroke: var(--text-muted); stroke-width: 1; opacity: 0.55; }
.chart-death { fill: var(--danger); opacity: 0.18; }
.sim-result { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.sim-result p { margin: 0; font-size: 0.85rem; }

/* ---------- Lot 11 : accessibilité (contrastes, focus, cibles de 44 px) ---------- */

/* Contrastes AA mesurés (les couleurs : :root, en haut du fichier) : ambre lisible pour les
   pastilles, anneau de focus visible sur tous les fonds. */
.chip.badge { border-color: var(--warn-text); color: var(--warn-text); }
.chart-bar.full { fill: var(--warn-text); }
.chapter-card.done, .station.busy { border-color: var(--warn-text); }

:where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* Une fenêtre sans bouton à mettre en avant prend elle-même le focus (modal.js) : sans anneau. */
#modal-root [role="dialog"][tabindex="-1"]:focus { outline: none; }

.check-row { min-height: 44px; gap: 12px; cursor: pointer; }
.check-row input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }

/* ---------- Lot 11 : notifications ---------- */

#toast-root {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(84px + var(--dock));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

#toast-root .toast {
  position: static;
  width: 100%;
  max-width: 480px;
  margin: 0;
  pointer-events: auto;
  font-weight: 600;
}

#toast-root .toast.alerte {
  background: var(--danger);
  color: var(--danger-contrast);
}

/* Notification qui mène au menu concerné : un bouton, sur toute la largeur. */
#toast-root .toast-link {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
#toast-root .toast-link:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }
.toast-go { display: inline-block; margin-left: 4px; font-weight: 800; }

/* ---------- Dessins en pixel art (assets/art.png, js/ui/pixel-art.js) ---------- */

/* Une case de 32×32 de la planche, affichée à la taille --s (64 px : ×2 ; 32 px : ×1).
   --art-sheet et --art-cols sont posés par pixel-art.js (adresse avec empreinte). */
.art {
  --s: 64px;
  display: block;
  width: var(--s);
  height: var(--s);
  flex: none;
  background: var(--art-sheet) no-repeat;
  background-size: calc(var(--art-cols) * var(--s)) auto;
  background-position: calc(var(--ax) * -1 * var(--s)) calc(var(--ay) * -1 * var(--s));
  image-rendering: pixelated;
}
.art-icon { --s: 32px; display: inline-block; vertical-align: -9px; margin-right: 6px; }
.plot-art { margin: 0 auto; }
.card-art-row { display: flex; align-items: flex-end; gap: 10px; }
.egg-art { --s: 32px; }
.art-hidden { visibility: hidden; }

/* Police pixel : chaque glyphe est une case de assets/police.png (rangée 0 sombre, rangée 1
   blanche avec .light). --p : taille d'un pixel. */
.pxt { --p: 3px; --row: 0; display: inline-flex; gap: var(--p); align-items: flex-end; vertical-align: middle; line-height: 0; }
.pxt.light { --row: 1; }
.pxt i {
  display: block;
  width: calc(var(--gw) * var(--p));
  height: calc(var(--font-h) * var(--p));
  background: var(--font-sheet) no-repeat;
  background-size: calc(var(--font-w) * var(--p)) calc(var(--font-h) * 2 * var(--p));
  background-position: calc(var(--gx) * -1 * var(--p)) calc(var(--row) * var(--font-h) * -1 * var(--p));
  image-rendering: pixelated;
}
@media (prefers-color-scheme: dark) { .pxt { --row: 1; } }

/* Jauge en cases : un cadre sombre de 3 px, une case par cran, pleine ou creuse. */
.pxgauge {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #3b2a1c;
  box-shadow: inset 0 3px 0 #24180f;
  height: 21px;
  border-radius: 0;
}
.pxgauge i { flex: 1; background: #6a4e36; box-shadow: inset 0 3px 0 #574029; }
.pxgauge i.on { background: #5aa83c; box-shadow: inset 0 3px 0 #8cd06a, inset 0 -3px 0 #3d7a2a; }
.pxgauge.full i.on { background: #e0a82a; box-shadow: inset 0 3px 0 #f8d878, inset 0 -3px 0 #a8701a; }
.pxgauge.low i.on { background: #c8503a; box-shadow: inset 0 3px 0 #ec8a6e, inset 0 -3px 0 #8a2e22; }
.pxgauge.off i { opacity: 0.55; }

/* ---------- Lot 11 : aide des bâtiments ---------- */

.help-btn {
  min-width: 44px;
  width: 44px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  flex: none;
}

.card-title .chips { flex-wrap: nowrap; align-items: center; }
.help-list { margin: 8px 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.help-list li { padding: 10px 12px; border-radius: var(--radius); background: var(--bg-muted); border: 1px solid var(--border); }
.help-list strong { display: block; margin-bottom: 2px; }
.help-head { display: flex; align-items: center; gap: 12px; }
.help-head h2 { margin: 0; }

/* ---------- Lot 11 : bulles d'aide de la première partie ---------- */

.tuto {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(118px + var(--dock));
  z-index: var(--z-banner);
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.tuto::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--bg-elevated);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
}

.tuto.up::after { display: none; }
/* Bulle « Dormir » : calée à droite, la pointe au-dessus du bouton « Zzz » ; elle descend
   près du bouton quand le bandeau de choix sur le suivi n'occupe plus le bas de l'écran. */
.tuto:not(.up) { margin-right: 0; }
body:not(:has(#consent-banner)) .tuto:not(.up) { bottom: calc(86px + var(--dock)); }
.tuto:not(.up)::after { left: auto; right: 16px; transform: rotate(45deg); }
.tuto h2 { margin: 0 0 4px; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 8px; }
.tuto p { margin: 0 0 10px; font-size: 0.95rem; }
.tuto .row { justify-content: flex-end; }
body.has-tuto { padding-bottom: calc(300px + var(--dock)); }

.tuto-target {
  scroll-margin-top: 140px;
  outline: 3px dashed var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius);
  animation: tuto-pulse 1.6s ease-in-out infinite;
}

.more { margin-top: 12px; }
.more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.more[open] > summary { margin-bottom: 8px; }

.market-help > summary { font-weight: 400; gap: 8px; }

.tuto-ring {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  animation: tuto-ring 1.2s ease-in-out infinite;
}

/* FLU-20 : l'anneau qui montre l'élément à toucher (immobile si les animations sont réduites) */
@keyframes tuto-ring {
  0%, 100% { outline-offset: 3px; outline-color: var(--accent); }
  50% { outline-offset: 7px; outline-color: color-mix(in srgb, var(--accent) 40%, transparent); }
}

@keyframes tuto-pulse {
  0%, 100% { outline-color: var(--accent); }
  50% { outline-color: transparent; }
}

/* ---------- Lot 11 : À propos ---------- */

.about-rules { margin: 8px 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.about-version { font-variant-numeric: tabular-nums; }

/* ---------- Lot 11 : rendu par tranches et animations ---------- */

/* Chaque tranche de la Ferme est mise à jour à part ; elle n'ajoute aucune boîte. */
.slot { display: contents; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* ---------- Carte Phaser : zone entre le bandeau et le menu du bas ---------- */
#farm-stage {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: var(--dock);
  z-index: var(--z-stage);
  overflow: hidden;
  background: #6a8157;
  touch-action: none; /* le doigt fait glisser la carte, pas la page */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* appui long (citerne) : pas de menu du système */
}
#farm-stage[hidden] { display: none; }
/* La taille réelle du canvas (× densité de l'écran) est gérée par farm-stage.js. */
#farm-stage canvas { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; cursor: grab; }
body.has-stage main { display: none; }
/* Les autres cartes (la ville, la montagne, la plage, les grottes, l'infra-monde : js/ui/excursion.js),
   à la place de celle de la ferme ; le reste de l'écran (carte du joueur, menu, outils) ne change pas. */
#map-stage { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: var(--dock); z-index: var(--z-stage); overflow: hidden; background: #665951; touch-action: none; -webkit-user-select: none; user-select: none; }
#map-stage[data-carte="infra"] { background: #1f2943; }
#map-stage[data-carte="grotte"] { background: #0b090a; }
#map-stage[hidden] { display: none; }
/* Le même canvas que la ferme (un seul jeu Phaser, js/carte/jeu.js), posé ici pendant l'excursion. */
#map-stage canvas { display: block; width: 100% !important; height: 100% !important; image-rendering: pixelated; }
/* le god mode (Options) : le menu des cartes, à gauche sous la carte du joueur */
#god-bar { position: fixed; left: 8px; top: calc(var(--player-h, 110px) + 10px); z-index: var(--z-debug); }
#god-bar label { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 10px; background: rgba(40, 26, 14, 0.82); color: #fff3d6; font-size: 13px; }
#god-bar select { max-width: 52vw; font: inherit; border-radius: 6px; border: 1px solid #b08850; background: #fff8e8; color: #3a2610; padding: 2px 4px; }
#map-stage .map-retour { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--player-h, 110px) + 16px); z-index: 6; }

/* Les fenêtres des cartes (la gare, l'arrêt de bus, un étal, une entreprise : js/carte/ville/hud.js
   et marche.js) : des fenêtres du jeu (#modal-root, .modal.bois.item-modal), ce qui leur est propre. */
.ville-modal { max-width: 400px; }
.ville-modal p { margin: 0 0 12px; }
.ville-modal .note { margin: 0 0 8px; font-size: 0.9rem; color: var(--text-muted); }
.ville-modal .choix { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ville-modal .ville-fermer .btn { flex: 1; }
.ville-modal .rangs { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; margin: 0 0 10px; }
.ville-modal .rang { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elevated); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.ville-modal .rang .nom { flex: 1; min-width: 0; }
.ville-modal .rang .btn { min-height: 36px; padding: 0 10px; font-size: 0.85rem; }
.ville-modal .quota { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ville-modal .quota .btn { flex: none; min-width: 44px; padding: 0; font-size: 1.2rem; }
/* la fenêtre du tronc creux, à la ferme (js/carte/ferme/passages.js) */
.tronc-choix { justify-content: flex-end; }
body.has-stage { padding-bottom: 0; }

/* ---------- Fenêtres de la carte : au-dessus de la carte et du menu, sous les fenêtres de #modal-root ---------- */
.window-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-window);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.window-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.stage-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  max-height: 88dvh;
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.window-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 61px;
  padding: 8px 10px 8px 16px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}
.window-head h2 { margin: 0; font-size: 1.15rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
}
.window-body > :first-child { margin-top: 0; }
.window-body > .subtabs:first-child { margin-top: 0; }
@media (min-width: 640px) {
  .window-layer { align-items: center; padding: 16px; }
  .stage-window { border-radius: var(--radius); }
}
.modal a { color: var(--accent); font-weight: 600; }

/* ---------- 1.1 : navigation de la carte (étiquettes, points, objectif, fenêtres, bandeau) ---------- */

/* Étiquettes des bâtiments : en DOM, par-dessus le canvas, replacées à chaque image par
   farm-stage.js. Elles ne prennent pas les appuis : la carte glisse aussi quand le doigt part
   d'une étiquette, et c'est la scène qui reconnaît un appui dessus.
   Version 1.1.1 : le nom ne s'affiche qu'au survol du lieu (classe `show`, posée par la
   scène : souris dessus, doigt posé, ou focus clavier). Sans survol, il ne reste que la
   pastille « à faire » ; sans pastille, rien du tout. */
.stage-labels { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.stage-label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(44, 36, 22, 0.45);
  background: rgba(255, 250, 238, 0.94);
  color: var(--color-ink);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  will-change: transform;
}
.stage-label.todo { border-color: var(--color-tomato); }
.stage-label:not(.show) { min-height: 0; padding: 0; border-color: transparent; background: none; box-shadow: none; }
.stage-label:not(.show) .stage-label-name { display: none; }
.stage-label:not(.show):not(.todo) { opacity: 0; }
.stage-label:not(.show) .stage-label-badge { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); border: 1px solid #ffffff; }
/* FLU-37 : la pastille seule garde son dessin, mais sa zone tactile fait 44 × 44 px */
.stage-label.todo:not(.show) { min-width: 44px; min-height: 44px; justify-content: center; }
.stage-label:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }
.stage-label-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-tomato);
  color: #ffffff;
  font-size: 0.7rem;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stage-label-badge[hidden] { display: none; }

/* Objectif du chapitre : une ligne en haut de la carte ; un appui ouvre la fenêtre Chapitres. */
.stage-hud {
  position: absolute;
  left: calc(8px + env(safe-area-inset-left));
  right: calc(64px + env(safe-area-inset-right)); /* la jauge d'énergie, à droite */
  bottom: 84px; /* en bas, au-dessus de la flèche « ⌄ » et des boutons ronds (Zzz, houe) ; la jauge d'énergie est à droite */
  z-index: 6;
  display: flex;
  flex-wrap: wrap-reverse; /* FLU-06 : la bulle de la première houe passe au-dessus de la puce */
  align-items: flex-end;
  pointer-events: none;
}
.stage-chip {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
}
.stage-chip-pill {
  position: relative;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.stage-chip:focus-visible { outline: none; }
.stage-chip:focus-visible .stage-chip-pill { outline: 3px solid var(--color-sun); outline-offset: 1px; }
.stage-chip:active .stage-chip-pill { transform: translateY(1px); }
.stage-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-chip-val { flex: none; color: var(--text-muted); white-space: nowrap; }
.stage-chip-go { flex: none; color: var(--text-muted); font-size: 1.1rem; line-height: 1; }
.stage-chip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg-muted); }
.stage-chip-bar > span { display: block; height: 100%; background: var(--accent); }
/* La ferme générée, le mode Construire (js/ui/chantier.js) : le menu des blocs, sur le côté
   droit de l'écran, dans le bois de la barre d'outils (même cadre, mêmes cases .tool-slot) :
   en haut les paillasses et ✕, puis deux colonnes de cases qui défilent (le bloc choisi
   encadré, comme l'outil en main ; un bloc qu'on n'a plus, pâli). */
.build-dock {
  --slot: 52px;
  position: fixed;
  right: calc(6px + env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-height: calc(100% - 180px);
  pointer-events: auto;
}
/* Le niveau de construction : un petit carré du même bois, au-dessus du menu (à droite) ; un
   appui long ouvre au-dessus de lui la liste des niveaux, le plus haut en haut (on glisse
   jusqu'à l'un, on lâche). */
.build-level { position: relative; }
.build-level-btn, .build-level-list {
  box-sizing: border-box;
  background: rgba(var(--wood-bg-rgb), 0.92);
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--wood-glow);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.build-level-btn {
  width: calc(var(--slot) + 6px); height: calc(var(--slot) + 6px);
  padding: 0;
  font: inherit; font-size: 1.5rem; font-weight: 800; color: var(--color-earth);
  cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.build-level-list {
  position: absolute; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 4px;
  width: calc(var(--slot) + 6px);
  padding: 3px;
  z-index: 1;
}
.build-level-list[hidden] { display: none; }
.build-level-item {
  height: calc(var(--slot) - 6px);
  padding: 0; border: 0; border-radius: 4px;
  background: #ead0a0; box-shadow: inset 0 0 0 2px var(--wood-light);
  font: inherit; font-size: 1.3rem; font-weight: 800; color: var(--color-earth);
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.build-level-item.active { background: #fbd98c; box-shadow: inset 0 0 0 2px var(--color-earth); }
.build-level-item.survol { background: #fff1c9; box-shadow: inset 0 0 0 3px var(--color-sun); }
.build-bar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  max-height: calc(6 * (var(--slot) + 5px) + 44px);
  padding: 5px;
  background: rgba(var(--wood-bg-rgb), 0.88);
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--wood-glow);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  pointer-events: auto;
}
.build-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 2px; font-weight: 700; }
.build-bar-close {
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 4px;
  background: #ead0a0; box-shadow: inset 0 0 0 2px var(--wood-light);
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.build-bar-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--slot));
  grid-auto-rows: var(--slot);
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 1px;
}
.build-slot { position: relative; height: var(--slot); font-size: 1.4rem; }
.build-slot .px { --pxs: 32px; }
.build-slot-n {
  position: absolute; right: 3px; bottom: 2px;
  font-size: 0.72rem; font-weight: 800; line-height: 1;
  color: var(--color-earth);
}
.build-slot.epuise { opacity: 0.55; }

/* Dans un intérieur (la Serre) : « Sortir » et « Gérer », à la place des flèches. */
.stage-room-bar {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
/* Des boutons comme les autres (.btn, .btn.primary), en pastille. */
.stage-room-btn {
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stage-room-btn:active { transform: translateY(1px); }

/* Les flèches des bords de la carte. */
.stage-arrow {
  position: absolute;
  top: 27%; /* au-dessus de la zone de culture, sous la ligne de l'objectif */
  z-index: 6;
  width: 44px;
  height: 56px;
  margin-top: -28px;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.stage-arrow.gauche { left: 0; justify-content: flex-start; }
.stage-arrow.droite { right: 0; justify-content: flex-end; }
.stage-arrow > span {
  width: 24px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 26, 20, 0.5);
  font-size: 1.6rem;
  line-height: 1;
  padding-bottom: 4px;
  animation: stage-arrow 1.6s ease-in-out infinite;
}
.stage-arrow.gauche > span { border-radius: 0 12px 12px 0; --pousse: -3px; }
.stage-arrow.droite > span { border-radius: 12px 0 0 12px; --pousse: 3px; }
.stage-arrow:focus-visible { outline: 3px solid var(--color-sun); outline-offset: -4px; }
@keyframes stage-arrow {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50% { transform: translateX(var(--pousse)); opacity: 1; }
}

/* Fenêtres de la carte : deux tailles seulement, demi-hauteur ou pleine hauteur. Le ✕ est
   toujours au même endroit dans chacune. */
.stage-window.half { height: 54vh; height: 54dvh; }
.stage-window.tall { height: 92vh; height: 92dvh; max-height: 92vh; max-height: 92dvh; }
.window-detail { font-size: 0.92rem; font-weight: 500; color: var(--text-muted); }
.window-tabs { flex: none; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border); }
.window-tabs .subtabs { margin: 0; }
/* Le titre de la fenêtre dit déjà où l'on est : le premier titre du contenu, qui le répète,
   est masqué ici (la liste classique de la Ferme garde les siens). */
.window-body.sans-titre > h2:first-child,
.window-body.sans-titre > .section-head:first-child > h2,
.window-body.sans-titre > .section-head:first-child > h3 { display: none; }
.window-body.sans-titre > .section-head:first-child { justify-content: flex-end; }
.window-body .ancre { scroll-margin-top: 8px; }
main .ancre { scroll-margin-top: 150px; }

/* Sous-onglets sur un téléphone : l'icône, et le nom de l'onglet ouvert seulement. */
.subtab-icon { flex: none; }
.subtab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) {
  .subtabs.compact .subtab-btn { flex: 0 0 44px; padding: 0; }
  .subtabs.compact .subtab-btn:not(.active) .subtab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .subtabs.compact .subtab-btn.active { flex: 1 1 auto; padding: 0 10px; }
  .subtabs.compact .subtab-btn.active .subtab-label { white-space: normal; text-align: left; font-size: 0.9rem; line-height: 1.1; }
}

/* Notifications : où mène la ligne. */
.notif-where { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }

/* ---------- Version 1.5 : bonheur et Ville ---------- */

.pxgauge.joie i.on { background: #e8b030; box-shadow: inset 0 3px 0 #f8d878, inset 0 -3px 0 #b07a18; }
.portrait .pxgauge { width: 100%; }
.outing { gap: 8px; }
.outing.done { opacity: 0.7; }
.outing-facts { display: flex; flex-wrap: wrap; gap: 4px; }
.outings { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ---------- version 1.9 : la houe (Zone de culture et Champ) ---------- */

.hoe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }

.stage-chip.hoe { margin-left: auto; flex: 0 0 auto; }
/* FLU-41 : houe en main, la puce d'objectif se réduit à son icône et sa valeur */
.stage-chip.compact { flex: 0 0 auto; }

/* ---------- version 1.12 : départ d'une nouvelle partie ---------- */

.setup-members { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Le choix de la ferme (dessinée ou générée d'après une graine) : js/ui/depart.js. */
.setup-ferme { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.setup-ferme legend { padding: 0 4px; }
.setup-choix { display: flex; gap: 8px; align-items: baseline; }
.setup-graine { margin-top: 4px; }
.setup-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.setup-member .portrait-emoji { font-size: 1.8rem; line-height: 1; }
.setup-member .row { gap: 6px; flex-wrap: nowrap; }
.setup-member .btn { min-width: 44px; }
.story-modal p { line-height: 1.5; }
.starter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}

/* FLU-01 : le bouton « Voir le chapitre » se range à côté de ✕ */
.window-head .window-chapter { margin-left: auto; margin-right: 8px; }

/* FLU-06 : bulle de la première houe en main, sous la puce Houe */
.hoe-hint {
  flex: 1 0 100%;
  align-self: flex-end;
  margin-bottom: 6px;
  margin-left: auto;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* FLU-07 : chevron « la carte continue vers le bas », en bas au milieu de la carte */
.stage-arrow.bas {
  top: auto;
  bottom: 4px;
  left: 50%;
  width: 56px;
  height: 44px;
  margin: 0 0 0 -28px;
  justify-content: center;
  align-items: flex-end;
}
.stage-arrow.bas > span { width: 48px; height: 24px; border-radius: 12px 12px 0 0; padding: 0 0 6px; font-size: 1.4rem; animation-name: stage-arrow-bas; }
@keyframes stage-arrow-bas {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-arrow.bas > span { animation: none; }
}

/* FLU-08 : onglet Marché verrouillé (avant le panneau et la pompe) */
.nav-btn.locked { opacity: 0.55; }
.nav-btn.locked .nav-icon { position: relative; }
.nav-btn .nav-lock { position: absolute; right: -10px; bottom: -4px; font-size: 0.8rem; }

/* FLU-11 : ce qui manque pour une action groupée, écrit sous les boutons */
.group-note { flex: 1 0 100%; color: var(--danger); font-weight: 600; }

/* ---------- Carte flottante (jour, heure, pièces), façon Stardew Valley ----------
   Sur tous les écrans, au-dessus de la carte de la ferme et sous les fenêtres (window-layer,
   modal-root). Même cadre bois que la carte du joueur, légèrement transparent : la carte
   reste visible dessous. Le jour, l'heure dessous, puis les pièces. */
.hud {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 76px;
  padding: 4px;
  background: rgba(var(--wood-bg-rgb), 0.82);
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--wood-glow), 0 2px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  color: var(--wood-ink);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s;
}
.hud-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 26px;
  padding: 0 6px;
  white-space: nowrap;
}
.hud > * + * { border-top: 1px solid rgba(var(--color-earth-rgb), 0.45); }
/* La date (phase de lune, jour, mois) : un appui ouvre le Calendrier. */
.hud-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 6px 3px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.hud-date:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; border-radius: 4px; }
.hud-day { display: flex; align-items: center; gap: 3px; font-size: 1.05rem; white-space: nowrap; }
.hud-month { font-size: 0.78rem; font-weight: 600; color: #6a4426; }

/* ---------- Calendrier lunaire (fenêtre) ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
.cal-head { text-align: center; font-size: 0.8rem; font-weight: 700; color: #6a4426; }
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  border-radius: 4px;
  background: #ead0a0;
  box-shadow: inset 0 0 0 2px var(--wood-light);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cal-day.past { opacity: 0.55; }
.cal-day.today { background: #fbd98c; box-shadow: inset 0 0 0 2px var(--color-earth); }
.cal-phases { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cal-phase { display: flex; gap: 6px; align-items: flex-start; padding: 4px 6px; border-radius: 4px; }
.cal-phase.current { background: #fbd98c; box-shadow: inset 0 0 0 2px var(--wood-light); }
.hud .hud-money { width: 100%; padding: 0 6px; color: #8a2e22; }
/* Un menu ouvert (fenêtre de la carte, fenêtre de dialogue) : la carte flottante reste
   visible par-dessus, à 80 % de transparence, et laisse passer les appuis. */
body:has(.window-layer) .hud,
body:has(#modal-root > *) .hud { z-index: var(--z-hud-over); opacity: 0.2; pointer-events: none; }
body:has(.window-layer) .hud button,
body:has(#modal-root > *) .hud button { pointer-events: none; }
/* Écrans sans carte : le contenu commence sous la carte flottante (sauf si l'écran est
   assez large pour qu'elle tienne à côté). */
body:not(.has-stage) main { padding-top: calc(var(--player-h, 110px) + 16px + env(safe-area-inset-top)); }
@media (min-width: 1120px) { body:not(.has-stage) main { padding-top: 16px; } }

/* Bulle de la citerne (appui long sur la carte) : combien de litres elle contient. */
.stage-tip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 10px;
  border-radius: 6px;
  border: 3px solid var(--color-earth);
  background: rgba(var(--wood-bg-rgb), 0.92);
  box-shadow: inset 0 0 0 2px var(--wood-glow), 0 2px 4px rgba(0, 0, 0, 0.3);
  color: var(--wood-ink);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  will-change: transform;
}
.stage-tip[hidden] { display: none; }

/* Version 1.18 : bulles de bande dessinée sur la carte. .stage-bubble : ce qui attend d'être
   ramassé, au-dessus de sa place (un appui y envoie le personnage) ; .stage-gain : ce qu'il
   vient de prendre, au-dessus de lui, qui s'estompe lentement. Le dessin : assets/bulle.png
   (16 × 16, pointe en bas à gauche), en neuf morceaux au double de sa taille : les coins et la
   pointe restent tels quels, le milieu s'étire à la taille du texte. La pointe (colonne 7 de
   l'image, soit 15 px du bord gauche) se pose sur le point de la carte (voir farm-stage.js). */
.stage-bubble,
.stage-gain {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  border-style: solid;
  border-width: 10px 12px 14px 16px;
  border-image: url('../assets/bulle.png') 5 6 7 8 fill / 10px 12px 14px 16px stretch;
  background: none;
  image-rendering: pixelated;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  will-change: transform;
}
.stage-bubble:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }
.stage-gain.fade { opacity: 0; transition: opacity 1.4s ease-in; }
.stage-bubble[hidden],
.stage-gain[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .stage-gain.fade { transition-duration: 0.4s; } }

/* ---------- Carte du joueur, en haut à gauche (remplace le bandeau du haut) ----------
   Portrait du personnage principal, prénom, niveau (avec sa barre) et autonomie, dans le
   même cadre bois que la carte flottante de droite (.hud). */
.player-card {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 76px;
  max-width: 150px;
  padding: 4px;
  background: rgba(var(--wood-bg-rgb), 0.82);
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--wood-glow), 0 2px 4px rgba(0, 0, 0, 0.25);
  color: var(--wood-ink);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s;
}
.player-card button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Tous les éléments de la carte sont des boutons : « .player-card .x » l'emporte sur la
   remise à zéro ci-dessus (.player-card button), sans !important. */
.player-card .player-head { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0; }
.player-portrait { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
.player-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card .player-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 26px;
  flex: 1 1 auto;
  padding: 0 4px;
  overflow: hidden;
}
.player-stats { display: flex; align-items: stretch; border-top: 1px solid rgba(var(--color-earth-rgb), 0.45); }
.player-stats .player-line + .player-line { border-left: 1px solid rgba(var(--color-earth-rgb), 0.45); }
.player-card .player-line.level-ind { padding-bottom: 4px; white-space: nowrap; }
.player-card button:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 1px; border-radius: 4px; }
body:has(.window-layer) .player-card,
body:has(#modal-root > *) .player-card { z-index: var(--z-hud-over); opacity: 0.2; pointer-events: none; }
/* Extension de la carte du joueur : collée à sa droite, sur toute sa hauteur, un fond uni de
   la couleur du cadre bois ; la jauge d'énergie (⚡) et celle d'endurance (💪), verticales. */
.player-card .player-gauges {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(100% - 1px);
  display: flex;
  padding: 5px 7px 5px 5px;
  background: var(--color-earth);
  border-radius: 0 10px 10px 0;
  box-shadow: inset -2px 0 0 #6e4426, inset 0 2px 0 #a8744a, 0 2px 4px rgba(0, 0, 0, 0.25);
}
.player-gauges-in { display: flex; gap: 5px; height: 100%; }
.player-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.player-gauge-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 20px;
  background: #ffe6b2;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--wood-light);
  font-size: 0.72rem;
  line-height: 1;
}
.player-gauge-bar {
  position: relative;
  flex: 1 1 auto;
  width: 14px;
  min-height: 40px;
  background: var(--wood-ink);
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--wood-light);
  overflow: hidden;
}
.player-gauge-fill {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  max-height: calc(100% - 6px);
  border-radius: 4px;
  background: #5ad23c;
  box-shadow: inset 2px 0 0 #8cec6a;
  transition: height 0.3s;
}
.player-gauge-fill.mid { background: #e8b030; box-shadow: inset 2px 0 0 #f8d878; }
.player-gauge-fill.low { background: #c8503a; box-shadow: inset 2px 0 0 #ec8a6e; }
.player-gauge-fill.endu { background: #3a8ad2; box-shadow: inset 2px 0 0 #7ec0f0; }
@media (prefers-reduced-motion: reduce) { .player-gauge-fill { transition: none; } }

/* ---------- Fenêtres de la carte « bois » (Famille…) : le cadre bois des cartes flottantes ----------
   Couleurs, fond et cadre : la règle commune avec .modal.bois, plus haut. */
.stage-window.bois {
  --bg: rgba(250, 232, 196, 0.97);
  --bg-header: rgba(232, 196, 140, 0.6);
  border-bottom: 0;
  box-shadow: inset 0 0 0 2px var(--wood-glow), 0 -4px 24px rgba(0, 0, 0, 0.3);
}
.stage-window.bois .window-head { border-bottom: 3px solid var(--color-earth); }
.stage-window.bois .card {
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--wood-glow), 0 2px 4px rgba(0, 0, 0, 0.15);
}
.stage-window.bois .more > summary { color: var(--text); }
@media (min-width: 640px) { .stage-window.bois { border-bottom: 3px solid var(--color-earth); } } /* fenêtre centrée : cadre complet */

/* ---------- Essai : le Livre de recette comme un vrai livre (js/ui/livre.js) ----------
   Couverture de cuir, une page crème à la fois ; la page tournée pivote autour de la
   reliure, à gauche (rotateY), en laissant voir la suivante. */
.book-backdrop { align-items: center; padding: 16px; }
.book {
  position: relative;
  width: min(100%, 420px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 10px 22px;
  background: #6b3f1c;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 14px, rgba(255, 255, 255, 0.06) 40%, rgba(0, 0, 0, 0.12));
  border: 3px solid var(--wood-dark);
  border-radius: 6px 12px 12px 6px;
  box-shadow: inset 0 0 0 2px var(--color-earth), 0 10px 30px rgba(0, 0, 0, 0.5);
  color: var(--wood-dark);
}
.book-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--wood-dark);
  background: #f6e7c8;
  color: var(--wood-dark);
  font-weight: 800;
  cursor: pointer;
}
.book-pages {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: min(540px, calc(100dvh - 120px));
  perspective: 1400px;
  touch-action: pan-y; /* le glissement horizontal tourne les pages */
}
.book-page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 18px 18px 30px 26px;
  background: #fbf3e0;
  background-image:
    linear-gradient(90deg, rgba(120, 80, 40, 0.28), rgba(120, 80, 40, 0) 18px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 27px, rgba(var(--color-earth-rgb), 0.12) 27px 28px);
  border-radius: 2px 8px 8px 2px;
  box-shadow: 2px 0 0 #e8d8b4, 4px 0 0 #d8c49a, 6px 2px 6px rgba(0, 0, 0, 0.3); /* tranche des pages */
  font-family: Georgia, 'Times New Roman', serif;
}
.book-leaf {
  z-index: 2;
  overflow: hidden;
  transform-origin: left center;
  backface-visibility: hidden;
  animation: 0.45s ease-in-out forwards;
}
.book-leaf.turn-next { animation-name: book-turn-next; }
.book-leaf.turn-prev { animation-name: book-turn-prev; }
@keyframes book-turn-next {
  from { transform: rotateY(0deg); filter: brightness(1); }
  to { transform: rotateY(-180deg); filter: brightness(0.7); }
}
@keyframes book-turn-prev {
  from { transform: rotateY(-180deg); filter: brightness(0.7); }
  to { transform: rotateY(0deg); filter: brightness(1); }
}
.book-title { margin: 4px 0 2px; font-size: 1.4rem; text-align: center; color: var(--wood-ink); }
.book-sub { margin: 0 0 12px; text-align: center; font-style: italic; color: #7a5434; }
.book-h3 { margin: 14px 0 6px; font-size: 1.02rem; color: #6b3f1c; border-bottom: 1px solid rgba(var(--color-earth-rgb), 0.4); }
.book-dish { text-align: center; font-size: 3.2rem; line-height: 1.1; margin-top: 6px; }
.book-meta { margin: 0 0 6px; text-align: center; font-family: system-ui, sans-serif; font-size: 0.85rem; color: #6b4a2a; }
.book-ingredients { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.book-ingredients li.missing { color: #8a2e22; }
.book-note { font-size: 0.85em; color: #8a6a4a; }
.book-reason { margin: 6px 0 10px; font-style: italic; color: #8a2e22; }
.book-prepare { width: 100%; font-family: system-ui, sans-serif; }
.book-toc { list-style: none; margin: 0; padding: 0; }
.book-toc-link {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.book-toc-link:hover span:first-child { text-decoration: underline; }
.book-toc-dots { flex: 1; border-bottom: 2px dotted rgba(107, 63, 28, 0.5); transform: translateY(-4px); }
.book-folio { position: absolute; right: 14px; bottom: 8px; font-style: italic; color: #8a6a4a; font-size: 0.85rem; }
.book-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #f6e7c8; }
.book-turn { min-width: 52px; font-size: 1.4rem; line-height: 1; background: #f6e7c8; border: 2px solid var(--wood-dark); color: var(--wood-dark); }
.book-turn:disabled { opacity: 0.4; }
.book-count { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .book-leaf { animation: none; } }

/* ---------- Marché en cases (comme l'Inventaire) ----------
   Le prix en haut à gauche (police pixel et pièce), la quantité en bas à droite ; une case
   grisée : on ne peut pas l'acheter (pièces, places) ou plus rien à vendre. */
.shop-slot-price {
  position: absolute;
  left: 3px;
  top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  filter: drop-shadow(1px 1px 0 #2a1a0e) drop-shadow(-1px 0 0 #2a1a0e);
}
.shop-slot-price .pxt { --p: 2px; }
.shop-coin .px { --pxs: 10px; vertical-align: top; }
.shop-slot .inv-slot-icon { margin-top: 6px; }
.shop-slot .inv-slot-qty .px { --pxs: 14px; vertical-align: top; }
.shop-slot.off { opacity: 0.5; }
.window-head .shop-help { flex: none; margin-left: auto; }
/* Fiche d'un article : un bouton par lot, le total dessous. */
.lot-btns .lot-btn { flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 6px; line-height: 1.15; }
.lot-btns .lot-btn small { font-weight: 600; font-size: 0.75rem; }
/* Sous-rayons du Marché (Acheter : Ingrédients, Plats) : deux onglets côte à côte, sous l'en-tête. */
.shop-subtabs { display: flex; gap: 6px; margin: 0 0 10px; }
.shop-subtab {
  flex: 1 1 0;
  min-height: 40px;
  border: 2px solid var(--color-earth);
  border-radius: 6px;
  background: var(--wood-paper);
  color: var(--wood-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.shop-subtab.active { background: var(--color-earth); color: var(--wood-cream); }
.shop-subtab:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 1px; }
/* Meubles au Marché : leur dessin (assets/meuble_*.png) dans la case, l'onglet et la fiche. */
.meuble-img { max-width: 44px; max-height: 38px; image-rendering: pixelated; margin-top: 6px; }
.meuble-tab { max-width: 34px; max-height: 26px; image-rendering: pixelated; }
.meuble-big { max-width: 56px; max-height: 56px; image-rendering: pixelated; }
/* En-tête des fenêtres flottantes (Inventaire, Marché) : des onglets un peu plus étroits. */
.window-head .inv-tab { width: 40px; }

/* Étable : les animaux en cartes carrées, deux par rangée (le dessin, le nom, l'état). */
.animal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.animal-card { aspect-ratio: 1; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 8px; }
.animal-card .animal-art { display: flex; justify-content: center; min-height: 48px; }
.animal-card strong { font-size: 0.95rem; }
.animal-card .animal-state { font-size: 0.82rem; color: var(--text-muted); }
.animal-card .animal-state.alert { color: var(--danger); font-weight: 700; }
.animal-card .bar { width: 100%; }
.animal-card .btn { min-height: 36px; width: 100%; }
.animal-card.ready { border-color: var(--color-sun); }
.animal-card.hungry { border-color: var(--danger); }
.help-emoji { font-size: 32px; line-height: 1; }

/* ---------- Comptes (un appui sur les pièces) : une addition, total en bas ---------- */
.hud-money { pointer-events: auto; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.hud-money:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; border-radius: 6px; }
.compta { list-style: none; margin: 12px 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.compta-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px; border-bottom: 1px dashed var(--border); }
.compta-ligne .num { white-space: nowrap; font-weight: 700; }
.compta-ligne .gain { color: #2f6b2a; }
.compta-ligne .perte { color: #a3322a; }
.compta-jour { margin-top: 10px; font-weight: 700; font-size: 0.85rem; color: var(--text-muted); }
.compta-avant { color: var(--text-muted); }
.compta-vide { padding: 8px 2px; }
.compta-total {
  position: sticky; bottom: 0;
  margin-top: 6px; padding-top: 8px;
  border-top: 3px double var(--color-earth); border-bottom: 0;
  background: var(--bg);
  font-weight: 800; font-size: 1.1rem;
}

/* ---------- Version 1.17 : les adultes ont l'apparence d'un personnage du catalogue ----------
   Portraits 16 × 16 agrandis sans flou (assets/portraits/perso_XX.png). */
.portrait-px { display: block; flex: none; width: 48px; height: 48px; image-rendering: pixelated; }
.member-row .portrait-px, .setup-member .portrait-px { width: 40px; height: 40px; }
.member-preview .portrait-px { width: 64px; height: 64px; }
.perso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; padding: 2px; }
.perso-btn { padding: 2px; min-height: 0; display: flex; align-items: center; justify-content: center; }
.perso-btn img { width: 32px; height: 32px; image-rendering: pixelated; }
.perso-btn.active { outline: 3px solid var(--color-sun); outline-offset: 0; }

/* La barre d'outils (js/ui/outils.js) : en bas au milieu de la carte, dans le cadre bois des
   cartes flottantes (bordure de 3 px, fond crème, filet clair) ; une case par outil, l'outil
   dessiné à 32 px. Rangée, elle glisse sous le bord de l'écran et n'en dépasse que sa languette. */
.tool-bar {
  --u: 7.5px; /* la hauteur de la barre : 9 × --u */
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock) + 6px);
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, calc(9 * var(--u) + 6px));
  transition: transform 0.2s ease-out;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.tool-bar.open { transform: translate(-50%, 0); }
.tool-bar[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tool-bar { transition: none; } }
.tool-bar-body {
  box-sizing: border-box;
  display: flex;
  gap: 5px;
  height: calc(9 * var(--u));
  padding: 5px;
  background: rgba(var(--wood-bg-rgb), 0.88);
  border: 3px solid var(--color-earth);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--wood-glow);
}
.tool-bar:not(.open) .tool-bar-body { visibility: hidden; transition: visibility 0s 0.2s; }
.tool-slot {
  box-sizing: border-box;
  height: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #ead0a0;
  box-shadow: inset 0 0 0 2px var(--wood-light);
  font-size: 1rem;
  cursor: pointer;
}
.tool-slot.active { background: #fbd98c; box-shadow: inset 0 0 0 2px var(--color-earth); }
.tool-slot .px { --pxs: 32px; vertical-align: 0; }
.tool-slot:active { transform: translateY(1px); }
.tool-slot:focus-visible { outline: 3px solid var(--color-sun); outline-offset: -2px; }
.tool-slot.vide { cursor: default; opacity: 0.6; }
/* La languette, au-dessus du milieu de la barre : le même bois, le même fond. */
.tool-bar-tab {
  position: relative;
  width: 60px;
  height: 24px;
  margin-bottom: -3px; /* posée sur le bois de la barre : un seul cadre */
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(var(--wood-bg-rgb), 0.88);
  border: 3px solid var(--color-earth);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 2px 0 var(--wood-glow);
  cursor: pointer;
}
.tool-bar-tab::after { content: ""; position: absolute; inset: -12px 0 -6px; } /* zone d'appui de 44 px environ */
.tool-bar-arrow { fill: #6b3f1c; transition: transform 0.2s; }
.tool-bar:not(.open) .tool-bar-arrow { transform: scaleY(-1); } /* rangée : le triangle montre le sens où elle ressort */
.tool-bar-tab:focus-visible { outline: 3px solid var(--color-sun); outline-offset: 2px; }
/* Avec la barre, le chevron « la carte continue vers le bas » passe au-dessus d'elle. */
body.has-toolbar .stage-arrow.bas { bottom: calc(9 * 7.5px + 46px); }
/* … et le bouton Dormir (la nuit) aussi, pour ne pas la couvrir sur un téléphone. */
body.has-toolbar .sleep-fab { bottom: calc(var(--dock) + 9 * 7.5px + 18px); }