/* ═══════════════════════════════════════════════════════════════
   CULTORIA — Design system « Serre de nuit » (v16)
   Ordre : Tokens → Compat → Reset → Layout → Composants → Écrans
           → Overlays/Mini-jeux → HUD → Admin → Utilitaires → Motion
   Fonts chargées via <link> dans index.html (Outfit 500/600/700 + Inter 400/500/600)
   ═══════════════════════════════════════════════════════════════ */

/* ── §7.1 Tokens ─────────────────────────────────────────────────── */
:root {
  /* Surfaces — serre la nuit, verre teinté vert */
  --bg-0:       #0a1410;                    /* fond profond */
  --bg-1:       #11201a;                    /* fond surélevé */
  --surface-1:  rgba(22, 38, 28, 0.62);     /* verre vert (cartes) */
  --surface-2:  rgba(34, 52, 40, 0.66);     /* verre vert (hover / relief) */
  --surface-3:  #16241c;                    /* OPAQUE — contenu de modale */

  /* Accent unique — floraison */
  --accent:       #ee87b2;
  --accent-deep:  #c44a82;

  /* Fonctionnelles (mémoire joueur — inchangées) */
  --water:   #5fb3d4;
  --sun:     #f0c674;
  --nutri:   #8fc35e;
  --happy:   #ee87b2;
  --health:  #ff5f7a;

  /* Encres */
  --ink-1: #e8ecdf;
  --ink-2: #b8c4a8;
  --ink-3: #6a7868;
  --ink-inverse: #0a1410;

  /* Bordures */
  --line-1: rgba(168, 200, 168, 0.10);
  --line-2: rgba(168, 200, 168, 0.05);
  --line-accent: rgba(238, 135, 178, 0.28);

  /* Typo */
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Échelle typographique */
  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 15px;
  --fs-lg: 18px;  --fs-xl: 24px;  --fs-2xl: 34px;

  /* Espacements (base 4) */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 40px;  --sp-7: 64px;

  /* Radius */
  --r-ctl:  12px;
  --r-card: 20px;
  --r-pill: 999px;

  /* Ombres teintées serre (3 niveaux) */
  --shadow-1: 0 2px 10px rgba(3, 10, 7, 0.45);
  --shadow-2: 0 8px 28px rgba(3, 10, 7, 0.55);
  --shadow-3: 0 22px 56px rgba(3, 10, 7, 0.68);

  /* Z-index nommés */
  --z-stage:  10;
  --z-nav:    100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
  --z-system: 500;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 240ms;
  --t-slow: 480ms;
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* réservé aux récompenses */
}

/* ── Bloc de compatibilité (anciennes variables → tokens) ──────────
   Recensement : js/* + index.html n'utilisent que var(--text-muted).
   Les autres alias couvrent les valeurs inline / venv de transition.
   Supprimer quand `grep -rc "var(--text-muted)" js/` = 0.          */
:root {
  --text-muted:     var(--ink-3);     /* utilisé 15× dans js/game.js */
  --text-primary:   var(--ink-1);
  --text-secondary: var(--ink-2);
  --bg-deep:        var(--bg-0);
  --bg-main:        var(--bg-1);
  --bg-card:        var(--surface-1);
  --bg-surface:     var(--surface-2);
  --bg-light:       rgba(45, 65, 50, 0.7);
  --heart:          var(--health);
  --border:         var(--line-1);
  --border-2:       var(--line-2);
  --radius-md:      var(--r-ctl);
  --radius-lg:      var(--r-card);
  --shadow-sm:      var(--shadow-1);
  --shadow-md:      var(--shadow-2);
  --shadow-lg:      var(--shadow-3);
  --font-sans:      var(--font-ui);
  --font-serif:     var(--font-display);

  /* Glows fonctionnels (halos des jauges / dock) */
  --water-glow:  rgba(95, 179, 212, 0.40);
  --sun-glow:    rgba(240, 198, 116, 0.40);
  --nutri-glow:  rgba(143, 195, 94, 0.40);
  --happy-glow:  rgba(238, 135, 178, 0.40);
  --health-glow: rgba(255, 95, 122, 0.40);
  --heart-glow:  var(--health-glow);

  /* États sémantiques */
  --danger:  var(--health);
  --warning: var(--sun);
  --success: var(--nutri);
  --info:    var(--water);
}

/* ── Reset & base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 16px; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  background: var(--bg-0);
  color: var(--ink-1);
  height: 100%;
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(74, 112, 72, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(40, 96, 74, 0.08) 0%, transparent 50%);
  background-attachment: fixed;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }

button { cursor: pointer; font-family: inherit; border: none; color: inherit; background: none; }
input, textarea { font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: rgba(168, 200, 168, 0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168, 200, 168, 0.30); }
* { scrollbar-width: thin; scrollbar-color: rgba(168, 200, 168, 0.22) transparent; }

::selection { background: rgba(238, 135, 178, 0.35); color: var(--ink-1); }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus { outline: none; }

/* ── Écrans racine ───────────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  animation: screenEnter var(--t-base) var(--ease-out);
}
.screen.active { display: flex; }

@media (min-width: 900px) {
  .screen { max-width: 1400px; padding: 0 var(--sp-4); }
}

@keyframes screenEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ── §7.2 Boutons ───────────────────────────────────────────────── */
.btn-primary {
  min-height: 44px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  padding: 10px var(--sp-5);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1), 0 0 18px rgba(238, 135, 178, 0.22);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), filter var(--t-fast);
  letter-spacing: 0.01em;
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: var(--shadow-2), 0 0 26px rgba(238, 135, 178, 0.34); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.94); }

.btn-secondary {
  min-height: 44px;
  background: var(--surface-2);
  color: var(--ink-1);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: 10px var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-1);
  box-shadow: var(--shadow-1);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.btn-secondary:hover { background: var(--bg-light); border-color: var(--line-accent); transform: translateY(-1px); }

.btn-ghost {
  min-height: 44px;
  background: transparent;
  color: var(--ink-2);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: 10px var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.btn-ghost:hover { color: var(--ink-1); border-color: var(--line-1); background: var(--surface-1); }

/* Boutons utilitaires / hérités (générés par game.js) */
.btn-disabled, button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
  box-shadow: none !important;
}
.btn-sm { font-size: var(--fs-xs); padding: 8px 16px; min-height: 36px; }

.btn-action {
  background: var(--surface-1);
  color: var(--ink-1);
  font-size: var(--fs-sm);
  padding: 10px 18px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--line-1);
  margin: 5px 4px;
  transition: background var(--t-fast), border-color var(--t-fast);
  width: calc(100% - 8px);
  text-align: left;
}
.btn-action:hover { background: var(--bg-light); border-color: var(--line-accent); }

.btn-plant {
  width: 100%;
  min-height: 44px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  font-weight: 600;
  padding: 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base);
  box-shadow: 0 0 16px rgba(238, 135, 178, 0.20);
  letter-spacing: 0.02em;
}
.btn-plant:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(238, 135, 178, 0.35); }

.btn-safe,
.btn-risky,
.btn-risk-confirm {
  border-radius: var(--r-ctl);
  padding: 10px 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  width: 100%;
  text-align: left;
  transition: background var(--t-fast);
  border: 1px solid;
}
.btn-safe         { background: rgba(143, 195, 94, 0.12);  border-color: rgba(143, 195, 94, 0.40);  color: var(--nutri); }
.btn-safe:hover   { background: rgba(143, 195, 94, 0.24); }
.btn-risky        { background: rgba(240, 198, 116, 0.12); border-color: rgba(240, 198, 116, 0.40); color: var(--sun); }
.btn-risky:hover  { background: rgba(240, 198, 116, 0.24); }
.btn-risk-confirm { background: rgba(255, 95, 122, 0.12);  border-color: rgba(255, 95, 122, 0.40);  color: var(--health); }
.btn-risk-confirm:hover { background: rgba(255, 95, 122, 0.24); }

.btn-use {
  grid-column: 4;
  grid-row: 1;
  font-size: var(--fs-xs);
  padding: 6px 12px;
  background: rgba(143, 195, 94, 0.14);
  border: 1px solid rgba(143, 195, 94, 0.32);
  border-radius: var(--r-pill);
  color: var(--nutri);
  font-weight: 600;
  transition: background var(--t-fast);
}
.btn-use:hover { background: rgba(143, 195, 94, 0.28); }

.btn-buy {
  grid-row: 1 / 3;
  font-size: var(--fs-xs);
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-radius: var(--r-pill);
  color: #fff;
  font-weight: 600;
  transition: filter var(--t-fast);
}
.btn-buy:hover { filter: brightness(1.1); }

.btn-cross-select {
  font-size: var(--fs-xs);
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-radius: var(--r-pill);
  color: #fff;
  font-weight: 600;
  transition: filter var(--t-fast);
  margin-top: 2px;
}
.btn-cross-select:hover { filter: brightness(1.1); }

.btn-quest-claim {
  background: linear-gradient(135deg, var(--sun), #d4a04a);
  color: var(--ink-inverse);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: transform var(--t-fast) var(--ease-out);
  box-shadow: 0 0 12px rgba(240, 198, 116, 0.30);
}
.btn-quest-claim:hover { transform: scale(1.05); }

.btn-renaissance {
  width: 100%;
  min-height: 44px;
  margin-top: var(--sp-2);
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--sun), var(--accent));
  color: var(--ink-inverse);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(240, 198, 116, 0.30);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base);
}
.btn-renaissance:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(240, 198, 116, 0.45); }

/* ── Loading screen — harmonisé serre de nuit ───────────────────── */
#screen-loading {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(238, 135, 178, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
}
.loading-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.loading-logo {
  font-size: 5rem;
  animation: breathe 2.8s var(--ease-out) infinite;   /* seule animation infinie de l'écran */
  filter: drop-shadow(0 0 26px rgba(238, 135, 178, 0.55));
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.loading-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1);
}
.loading-subtitle {
  color: var(--accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.loading-bar-wrap {
  width: 240px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
  box-shadow: 0 0 14px rgba(238, 135, 178, 0.45);
}
.loading-text { color: var(--ink-2); font-size: var(--fs-sm); font-style: italic; }

/* ── Seed selection ─────────────────────────────────────────────── */
#screen-seed {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(238, 135, 178, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  padding: var(--sp-4) var(--sp-4) 80px;
}
.seed-header { text-align: center; padding: var(--sp-5) 0 var(--sp-4); }
.seed-header h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: var(--sp-2);
}
.seed-header p { color: var(--ink-2); font-size: var(--fs-sm); }

.seed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  flex: 1;
}
@media (min-width: 900px) { .seed-grid { grid-template-columns: repeat(4, 1fr); } }

.seed-card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
  box-shadow: var(--shadow-1);
}
.seed-card:hover {
  border-color: var(--line-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.seed-card.seed-locked { opacity: 0.4; filter: grayscale(0.5); }
.seed-cross  { border-color: rgba(95, 179, 212, 0.45); }
.seed-hybrid { border-color: var(--line-accent); }

.seed-emoji     { font-size: 2.6rem; filter: drop-shadow(0 0 10px rgba(238, 135, 178, 0.30)); }
.seed-name      { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-1); }
.seed-diff      { font-size: var(--fs-xs); letter-spacing: 0.05em; color: var(--sun); }
.seed-desc      { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.seed-duration  {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.seed-inventory { font-size: var(--fs-xs); color: var(--ink-3); }

.seed-traits { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; }
.trait-tag {
  background: rgba(238, 135, 178, 0.10);
  border: 1px solid var(--line-accent);
  color: var(--accent);
  font-size: var(--fs-xs);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.seed-footer { text-align: center; padding: var(--sp-4) 0; }

/* ── Game screen : brand bar ────────────────────────────────────── */
#screen-game { background: transparent; padding: 0; }

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-1) var(--sp-4);
  background: rgba(10, 20, 16, 0.78);
  border-bottom: 1px solid var(--line-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.brand-name {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--ink-1);
  text-transform: uppercase;
}
.icon-btn {
  background: transparent;
  border: 1px solid var(--line-1);
  color: var(--ink-2);
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--line-accent); }
#btn-sleep-mode:hover { border-color: var(--water); color: var(--water); }

/* ── Ambient strip (saison + météo) ─────────────────────────────── */
.ambient-strip {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--line-2);
  padding: 6px var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  overflow-x: auto;
  scrollbar-width: none;
}
.ambient-strip::-webkit-scrollbar { display: none; }
.ambient-item { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; background: none; border: none; }
.season-banner, .weather-banner { padding: 0; flex-wrap: nowrap; white-space: nowrap; }
.season-emoji, .weather-emoji { font-size: 1rem; }
.season-name, .weather-name { font-weight: 600; color: var(--ink-2); }
.season-desc, .weather-desc { font-size: var(--fs-xs); opacity: 0.85; }
.weather-loading { font-style: italic; opacity: 0.6; }

/* ── §7.2 Onglets : barre pouce mobile / sticky top desktop ─────── */
.game-tabs {
  display: flex;
  gap: var(--sp-1);
  padding: 6px var(--sp-2);
  background: rgba(10, 20, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--z-nav);
}
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 6px 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border-radius: var(--r-ctl);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.tab-btn svg { width: 21px; height: 21px; flex-shrink: 0; }
.tab-btn:hover  { color: var(--ink-1); background: var(--surface-1); }
.tab-btn.active { color: var(--accent); background: rgba(238, 135, 178, 0.10); }

/* Mobile : barre fixe en bas, zone du pouce, safe-area */
@media (max-width: 899px) {
  .game-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line-1);
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .tab-content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* Desktop : sous la brand-bar, sticky top, labels à côté des icônes */
@media (min-width: 900px) {
  .game-tabs {
    position: sticky;
    top: 48px;
    border-bottom: 1px solid var(--line-2);
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .tab-btn { flex-direction: row; gap: var(--sp-2); font-size: var(--fs-sm); max-width: 180px; }
}

/* Contenus d'onglet */
.tab-content {
  display: none;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-3) 80px;
  gap: var(--sp-3);
  overflow-y: auto;
  animation: fadeIn var(--t-base) var(--ease-out);
}
.tab-content.active { display: flex; }
.tab-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink-1);
  padding: var(--sp-2) 0 var(--sp-1);
}

/* ── Alert banner ───────────────────────────────────────────────── */
.alert-banner {
  border-radius: var(--r-ctl);
  padding: 11px var(--sp-4);
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-sm);
  font-weight: 500;
  animation: slideDown var(--t-base) var(--ease-out);
  border: 1px solid;
}
.alert-banner.hidden { display: none; }
.alert-info    { background: rgba(95, 179, 212, 0.10);  border-color: rgba(95, 179, 212, 0.35);  color: var(--water); }
.alert-warning { background: rgba(240, 198, 116, 0.10); border-color: rgba(240, 198, 116, 0.38); color: var(--sun); }
.alert-danger  { background: rgba(255, 95, 122, 0.12);  border-color: rgba(255, 95, 122, 0.45);  color: #ffb0c0; }
.alert-success { background: rgba(143, 195, 94, 0.10);  border-color: rgba(143, 195, 94, 0.38);  color: var(--nutri); }
#alert-close   { margin-left: auto; background: none; color: inherit; font-size: 1rem; opacity: 0.7; }
#alert-close:hover { opacity: 1; }

/* ── §7.3 GREENHOUSE : hiérarchie écran principal ───────────────────
   Mobile-first : jauges fines → canvas héros (~55svh) → dock pouce.
   Desktop >900px : 3 colonnes 260px / 1fr / 260px.                  */
.greenhouse {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
  position: relative;
  z-index: var(--z-stage);
}
.gh-stage      { order: 1; }   /* le canvas plante est le HÉROS — toujours au-dessus du pli */
.gh-dock-right { order: 2; }   /* jauges compactes sous le héros */
.gh-dock-left  { order: 3; }   /* actions accessibles au pouce */

@media (min-width: 900px) {
  .greenhouse {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: var(--sp-4);
    align-items: stretch;
    min-height: 560px;
  }
  .gh-dock-left  { order: 0; }
  .gh-stage      { order: 0; }
  .gh-dock-right { order: 0; }
}

/* Docks (conteneurs latéraux) */
.gh-dock {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  position: relative;
  overflow: visible;
}
.gh-dock-left {
  align-items: center;
  justify-content: center;
  z-index: 20;            /* tooltips au-dessus du stage */
}
@media (max-width: 899px) {
  .gh-dock-left {
    flex-direction: row;
    justify-content: space-around;
    padding: var(--sp-2);
  }
  /* Jauges en grille compacte 2 colonnes : tout tient sous le héros */
  .gh-dock-right {
    background: transparent; border: none; padding: 0 var(--sp-1);
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .gh-dock-right .gh-gardener { grid-column: 1 / -1; }
  .gh-dock-right .gh-quality  { grid-column: 1 / -1; }
}

/* ── §7.2 Dock d'actions : boutons ronds ~60px, halo = jauge ────── */
.dock-group {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  position: relative;
}
@media (max-width: 899px) {
  .gh-dock-left .dock-group { flex-direction: column; gap: 2px; }
}

.dock-btn {
  --g: var(--ink-2);                /* couleur de la jauge associée */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  color: var(--g);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-base);
}
.dock-btn svg { width: 24px; height: 24px; }
.dock-btn:hover {
  transform: scale(1.06);
  border-color: var(--g);
  box-shadow: 0 0 18px color-mix(in srgb, var(--g) 40%, transparent);
}
.dock-btn[data-action="water"]      { --g: var(--water); }
.dock-btn[data-action="lumiere"]    { --g: var(--sun); }
.dock-btn[data-action="nutriments"] { --g: var(--nutri); }
.dock-btn[data-action="bonheur"]    { --g: var(--happy); }

/* Satellite risk ⚡ (plus petit, ambre) */
.dock-risk-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(240, 198, 116, 0.14);
  border: 1px solid rgba(240, 198, 116, 0.40);
  color: var(--sun);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.dock-risk-btn:hover { background: rgba(240, 198, 116, 0.32); transform: scale(1.12); }
.dock-risk-btn.hidden { display: none; }

/* Étiquette tooltip (desktop) */
.dock-label {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-3);
  padding: 5px 12px;
  border-radius: var(--r-ctl);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-1);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
  z-index: 30;
  border: 1px solid var(--line-1);
  box-shadow: var(--shadow-1);
}
.dock-btn:hover .dock-label { opacity: 1; }
@media (max-width: 899px) { .dock-label { display: none; } }

/* États du dock (pilotés par game.js) */
.dock-btn-cooldown {
  opacity: 0.45;
  filter: grayscale(0.5);
  cursor: not-allowed;
}
.dock-btn-cooldown::after {
  content: attr(data-cooldown);
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--bg-0);
  color: var(--ink-3);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-1);
}
.dock-btn-ideal::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g) 45%, transparent);
  animation: dockGlowPulse 1.8s var(--ease-out) infinite;
  pointer-events: none;
}
.dock-btn-urgent { border-color: var(--health) !important; }
.dock-btn-urgent::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  box-shadow: 0 0 14px var(--health-glow), 0 0 0 2px rgba(255, 95, 122, 0.5);
  animation: dockGlowPulse 1s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes dockGlowPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.dock-btn-wasted { opacity: 0.5; filter: grayscale(0.4); }
.dock-btn-phase-locked {
  opacity: 0.2;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
}
.dock-btn-phase-locked::before {
  content: '🔒';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-sm);
  opacity: 0.7;
}

/* Flash de focus (déclenché par todoHUD) — transform/opacity only */
@keyframes dockBtnFlash {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.12); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.dock-btn-focus-flash      { animation: dockBtnFlash 0.6s var(--ease-out) 2; }
.plant-canvas-focus-flash  { animation: dockBtnFlash 0.8s var(--ease-out) 2; }

/* ── Stage central : la plante est le héros ─────────────────────── */
.gh-stage {
  background: linear-gradient(180deg, rgba(17, 32, 26, 0.72) 0%, rgba(10, 20, 16, 0.88) 100%);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.gh-stage-header { text-align: center; margin-bottom: var(--sp-2); width: 100%; }
.gh-name-block { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.gh-plant-name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-1);
  line-height: 1;
}
.gh-meta {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
}
.gh-stage-badge { color: var(--accent); font-weight: 600; }
.gh-day { color: var(--ink-2); }
.gh-meta-sep { color: var(--line-1); }

/* Zone canvas : héros ~55% de la hauteur en mobile */
.plant-stage-area {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
@media (max-width: 899px) {
  .plant-stage-area { min-height: 48svh; }
}
@media (min-width: 900px) {
  .plant-stage-area { min-height: 380px; }
}
/* Pas de width:100% : le JS pilote la taille (DPR). */
#plant-canvas {
  display: block;
  max-width: 100%;
  position: relative;
  z-index: 2;
}
.stage-label { display: none; }   /* relayé par #plant-stage-badge */

/* Pied du stage : ADN + personnalité */
.gh-stage-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-2);
  margin-top: var(--sp-2);
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.gh-dna {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.gh-dna svg { width: 14px; height: 14px; }
.gh-dna-label { text-transform: uppercase; letter-spacing: 0.15em; margin-right: var(--sp-1); }
#dna-badge { color: var(--ink-2); font-weight: 600; user-select: all; }
.gh-personality {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
  cursor: help;
}
.gh-meta-mode {
  background: rgba(0, 0, 0, 0.4);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Bulle de dialogue de la plante */
.plant-bubble {
  position: absolute;
  top: var(--sp-4);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.92);
  background: var(--surface-3);
  color: var(--ink-1);
  padding: 10px var(--sp-4);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  font-size: var(--fs-sm);
  font-weight: 500;
  max-width: 80%;
  text-align: center;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  pointer-events: none;
  z-index: 20;
  white-space: pre-wrap;
}
.plant-bubble.hidden { display: none; }
.plant-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--surface-3);
}
.plant-bubble-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Couches au-dessus du canvas : visiteurs, micro-événements, chiffres */
.visitors-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.visitor {
  position: absolute;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  pointer-events: auto;
  padding: var(--sp-2);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  transition: left 0.6s var(--ease-out), top 0.6s var(--ease-out), transform var(--t-fast) var(--ease-out);
  outline: none;
}
.visitor:hover { transform: scale(1.2); }

.micro-events-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.micro-event {
  position: absolute;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  pointer-events: auto;
  padding: var(--sp-1);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  animation: meBob 1.8s var(--ease-out) infinite;
  transform-origin: center;
  transition: transform var(--t-fast) var(--ease-out);
  outline: none;
}
.micro-event:hover { transform: scale(1.3); }
@keyframes microEventFlash {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
  50%      { transform: scale(1.5); filter: drop-shadow(0 0 20px rgba(255, 240, 180, 0.95)); }
}
.micro-event-focus-flash { animation: microEventFlash 0.5s var(--ease-out) 3 !important; }
@keyframes meBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Crédit éditeur — pied de page du site */
.site-credit {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-2);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}
.site-credit a { color: var(--accent); text-decoration: none; font-weight: 600; }
.site-credit a:hover { text-decoration: underline; }
.me-rarity-rare      { filter: drop-shadow(0 0 10px rgba(238, 135, 178, 0.55)); }
.me-rarity-legendary { filter: drop-shadow(0 0 14px rgba(240, 198, 116, 0.85)); }

.float-numbers-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.float-number {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--font-display);
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
  animation: floatUp 1.8s var(--ease-out) forwards;
  white-space: nowrap;
}
.float-number.float-large { font-size: 2.1rem; animation: floatUp 2.6s var(--ease-out) forwards; }
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  15%  { opacity: 1; transform: translateY(-8px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.95); }
}

/* Cérémonie de passage de stade */
.stage-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 220, 0.5) 0%, transparent 70%);
  pointer-events: none;
  z-index: 7;
  animation: stageFlash 1.5s var(--ease-out) forwards;
}
@keyframes stageFlash {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; }
}
.stage-particle {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  background: var(--sun);
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  box-shadow: 0 0 12px var(--sun-glow);
  animation: stageParticle 1.6s var(--ease-out) forwards;
}
@keyframes stageParticle {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4); }
}

/* ── §7.2 Jauges unifiées (.gh-stat — ids/classes JS conservés) ────
   Couleur par --g ; <25% → pulsation de glow (opacity), pas de flash */
.gh-stat {
  --g: var(--ink-3);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.gh-stat:hover { background: var(--surface-2); }
.gh-stat-heart { --g: var(--health); }
.gh-stat-water { --g: var(--water); }
.gh-stat-sun   { --g: var(--sun); }
.gh-stat-nutri { --g: var(--nutri); }
.gh-stat-happy { --g: var(--happy); }

.gh-stat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
}
.gh-stat-icon  { font-size: 1rem; flex: 0 0 18px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--g) 40%, transparent)); }
.gh-stat-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  flex: 1;
}
.gh-stat-value {
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}

/* Piste + remplissage (game.js réécrit className en
   `need-bar good|medium|low|critical` à chaque tick) */
.gh-stat-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.gh-stat-fill,
.gh-stat-bar .need-bar,
.gh-stat-bar .health-bar {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--g);
  box-shadow: 0 0 8px color-mix(in srgb, var(--g) 40%, transparent);
  transition: width 0.6s var(--ease-out), opacity var(--t-base);
}
/* États : on module la luminosité, jamais de flash d'opacity */
.gh-stat-bar .need-bar.medium,
.gh-stat-bar .health-bar.low      { filter: saturate(0.85) brightness(0.92); }
.gh-stat-bar .need-bar.low        { filter: saturate(0.7) brightness(0.85); }
.gh-stat-bar .need-bar.critical,
.gh-stat-bar .health-bar.critical { filter: none; }

/* <25% : pulsation du glow sur la carte (pseudo-élément, opacity only) */
.gh-stat.need-urgent { border-color: color-mix(in srgb, var(--g) 55%, transparent); position: relative; }
.gh-stat.need-urgent::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 16px color-mix(in srgb, var(--g) 50%, transparent);
  animation: gaugeGlowPulse 1.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes gaugeGlowPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* Jauge verrouillée par la phase */
.need-card-locked { opacity: 0.55; }
.need-card-locked .gh-stat-icon,
.need-card-locked .gh-stat-label,
.need-card-locked .gh-stat-value { filter: grayscale(0.7); }
.need-card-locked .gh-stat-bar { opacity: 0.45; }
.need-lock-hint {
  margin-top: 6px;
  padding: 3px var(--sp-2);
  background: rgba(240, 198, 116, 0.14);
  border: 1px solid rgba(240, 198, 116, 0.40);
  color: var(--sun);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-align: center;
  font-weight: 600;
}

/* Niveau jardinier (compact, dock droit) */
.gh-gardener {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: help;
}
.gh-gardener-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sun);
}
.gh-gardener-bar {
  height: 3px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gh-gardener-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sun), var(--nutri));
  border-radius: var(--r-pill);
  transition: width 0.6s var(--ease-out);
}

/* Qualité (étoiles, dock droit) */
.gh-quality {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-2);
  text-align: center;
}
.gh-quality-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  color: var(--ink-3);
  font-weight: 600;
  display: block;
  margin-bottom: var(--sp-1);
}
.quality-stars { display: inline-flex; align-items: center; gap: 2px; }
.quality-star  { font-size: 1.05rem; opacity: 0.22; transition: opacity var(--t-base); }
.quality-star.filled { opacity: 1; }
.quality-rarity-label { font-size: var(--fs-xs); font-weight: 700; margin-left: var(--sp-2); }

/* ── Care score + conseil de phase ──────────────────────────────── */
.care-score {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: stretch;
  padding: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
  width: 100%;
  max-width: 420px;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  letter-spacing: 0.06em;
}
.care-score:empty { display: none; }
.care-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.care-score-label {
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}
.care-score-stars { color: var(--sun); font-size: 1rem; letter-spacing: 0.06em; }
.care-score-points,
.care-score-quality {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.care-score-quality { color: var(--accent); }

.stage-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
  width: 100%;
  max-width: 420px;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  text-align: center;
}
.stage-tip:empty { display: none; }
.stage-tip-phase {
  font-weight: 700;
  color: var(--nutri);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
}
.stage-tip-text { font-style: italic; }

/* ── Gestes spéciaux + actions de phase ─────────────────────────── */
.gestures-row,
.special-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.gestures-row:empty, .special-actions-row:empty { display: none; }

.gesture-btn,
.special-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  color: var(--ink-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.gesture-btn:hover        { border-color: var(--sun); color: var(--ink-1); transform: translateY(-1px); }
.special-action-btn       { border-color: var(--line-accent); color: var(--ink-1); }
.special-action-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.gesture-btn-disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.gesture-emoji, .special-emoji { font-size: 1rem; }
.gesture-name, .special-name { font-weight: 500; }
.gesture-cooldown {
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}

/* ── Sélecteur de thème + chips d'événements ────────────────────── */
.theme-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: var(--sp-3) auto var(--sp-1);
}
.theme-selector:empty { display: none; }
.theme-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-pill:hover  { background: var(--surface-2); color: var(--ink-1); }
.theme-pill.active { background: rgba(238, 135, 178, 0.14); color: var(--accent); border-color: var(--line-accent); font-weight: 600; }
.theme-emoji { font-size: 1.05rem; }
@media (max-width: 540px) {
  .theme-pill { padding: 6px 10px; }
  .theme-name { display: none; }
  .theme-emoji { font-size: 1.3rem; }
}

.events-row { display: flex; flex-wrap: wrap; gap: 6px; }
.event-chip {
  font-size: var(--fs-xs);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-weight: 600;
  border: 1px solid;
  animation: popIn var(--t-base) var(--ease-out);
  transition: transform var(--t-fast);
}
.event-chip:hover { transform: scale(1.03); }
.event-danger  { background: rgba(255, 95, 122, 0.14);  border-color: rgba(255, 95, 122, 0.45);  color: #ffb0c0; }
.event-warning { background: rgba(240, 198, 116, 0.14); border-color: rgba(240, 198, 116, 0.45); color: var(--sun); }
.event-success { background: rgba(143, 195, 94, 0.14);  border-color: rgba(143, 195, 94, 0.45);  color: var(--nutri); }

/* ── Drawer quêtes + journal ────────────────────────────────────── */
.quests-drawer { margin: var(--sp-4) 0 var(--sp-3); }
.quests-drawer-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 10px var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  color: var(--ink-1);
  transition: background var(--t-fast), border-color var(--t-fast);
  font-size: var(--fs-sm);
}
.quests-drawer-toggle:hover { background: var(--surface-2); border-color: var(--line-accent); }
.qd-icon { font-size: 1rem; }
.qd-label { font-weight: 500; }
.qd-count {
  background: var(--accent);
  color: var(--ink-inverse);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
}
.qd-count:empty { display: none; }
.quests-drawer-panel { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.quests-drawer-panel.hidden { display: none; }

.gh-journal {
  margin: var(--sp-3) 0;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  overflow: hidden;
}
.gh-journal-summary {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.gh-journal-summary::-webkit-details-marker { display: none; }
.gh-journal-summary::after {
  content: '⌄';
  margin-left: auto;
  transition: transform var(--t-base) var(--ease-out);
}
.gh-journal[open] .gh-journal-summary::after { transform: rotate(180deg); }

.event-log {
  border-top: 1px solid var(--line-2);
  padding: var(--sp-3) var(--sp-4);
  max-height: 220px;
  overflow-y: auto;
}
#event-log-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.log-entry {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--line-2);
  animation: slideIn var(--t-fast) var(--ease-out);
  line-height: 1.5;
}
.log-entry:last-child { border-bottom: none; }

/* ── Quêtes (jour / hebdo) ──────────────────────────────────────── */
.daily-quests, .weekly-quests {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
}
.daily-quests-title, .weekly-quests-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--ink-1);
}
.weekly-quests-title { color: var(--accent); }
.daily-quests-done, .weekly-quests-done {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-style: italic;
  padding: var(--sp-2);
}
.quest-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-ctl);
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: 6px;
}
.quest-card:last-child { margin-bottom: 0; }
.weekly-quest-card { background: rgba(0, 0, 0, 0.25); }
.quest-emoji { font-size: 1.4rem; flex-shrink: 0; }
.quest-info { flex: 1; min-width: 0; }
.quest-name { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-1); }
.quest-desc { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.3; margin-bottom: var(--sp-1); }
.quest-progress-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.quest-progress-fill { height: 100%; background: var(--accent); transition: width var(--t-base) var(--ease-out); }
.quest-action { flex-shrink: 0; min-width: 60px; text-align: right; }
.quest-progress-label { font-size: var(--fs-xs); color: var(--ink-2); }
.quest-claimed-label { color: var(--nutri); font-weight: 700; font-size: 1.1rem; }
.quest-done .quest-progress-fill { background: var(--nutri); }
.quest-claimed { opacity: 0.55; }
.quest-failed .quest-progress-fill { background: var(--health); }
.quest-failed .quest-progress-label { color: var(--health); }

/* ── Onglet Inventaire / Boutique ───────────────────────────────── */
.coins-display {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sun);
  background: rgba(240, 198, 116, 0.08);
  border: 1px solid rgba(240, 198, 116, 0.28);
  padding: 7px var(--sp-3);
  border-radius: var(--r-ctl);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--sp-2);
}
.coins-earn-hint {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  background: rgba(240, 198, 116, 0.06);
  border: 1px solid rgba(240, 198, 116, 0.18);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.5;
  margin-bottom: var(--sp-1);
}
.coins-earn-hint strong { color: var(--sun); }

.inventory-grid { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.inv-card {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.inv-emoji { font-size: 1.4rem; }
.inv-name  { font-size: var(--fs-sm); font-weight: 600; }
.inv-qty   { font-size: var(--fs-xs); color: var(--nutri); font-weight: 700; }
.inv-desc  { grid-column: 2; font-size: var(--fs-xs); color: var(--ink-3); }

.shop-section h3 { font-size: var(--fs-md); color: var(--ink-1); margin-bottom: var(--sp-2); }
.shop-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.shop-card {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}
.shop-emoji { font-size: 1.4rem; grid-row: 1 / 3; }
.shop-name  { font-size: var(--fs-sm); font-weight: 600; }
.shop-desc  { font-size: var(--fs-xs); color: var(--ink-3); grid-column: 2; }
.shop-cost  { font-size: var(--fs-xs); font-weight: 700; color: var(--sun); }
.shop-card-locked { opacity: 0.7; }
.shop-card-accessory { background: var(--surface-2); }
.shop-section-header {
  grid-column: 1 / -1;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sun);
  border-bottom: 1px solid rgba(240, 198, 116, 0.28);
  margin-top: var(--sp-2);
}
.cost-insufficient { color: var(--health) !important; }
.missing-item {
  font-size: var(--fs-xs);
  color: var(--health);
  background: rgba(255, 95, 122, 0.10);
  border: 1px solid rgba(255, 95, 122, 0.30);
  padding: 2px var(--sp-2);
  border-radius: var(--r-ctl);
  display: inline-block;
  margin-left: var(--sp-1);
}
.empty-msg { color: var(--ink-3); font-size: var(--fs-sm); padding: var(--sp-4) 0; text-align: center; }

/* ── §7.2 Cartes + variantes rareté (Herbier) ───────────────────── */
.collection-stats-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cstat {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 900px) {
  .collection-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.collection-empty { grid-column: 1 / -1; text-align: center; padding: var(--sp-6) 0; color: var(--ink-3); }
.collection-empty-icon { font-size: 3rem; margin-bottom: var(--sp-3); }

.collection-card {
  background: var(--surface-1);
  border: 1.5px solid var(--rarity-color, var(--line-1));
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.collection-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2), 0 0 14px color-mix(in srgb, var(--rarity-color, transparent) 25%, transparent);
}
.collection-card-canvas {
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-2);
  aspect-ratio: 1 / 1;
  position: relative;
}
.flower-mini-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.collection-card-info { padding: var(--sp-2) var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 3px; }
.collection-card-name      { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-1); }
.collection-card-species   { font-size: var(--fs-xs); color: var(--ink-3); text-transform: capitalize; }
.collection-card-rarity    { font-size: var(--fs-xs); font-weight: 700; }
.collection-card-score     { font-size: var(--fs-xs); color: var(--ink-2); }
.collection-card-days,
.collection-card-date      { font-size: var(--fs-xs); color: var(--ink-3); }
.collection-card-mutations { display: flex; flex-wrap: wrap; gap: 3px; margin-top: var(--sp-1); }
.mutation-badge {
  background: rgba(238, 135, 178, 0.14);
  border: 1px solid var(--line-accent);
  color: var(--accent);
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: var(--r-pill);
}

/* Échelle de rareté (texte) */
.rarity-commun     { color: #b0b8c0; }
.rarity-peucommun  { color: var(--nutri); }
.rarity-rare       { color: var(--water); }
.rarity-epique     { color: var(--accent); }
.rarity-legendaire { color: var(--sun); }
.rarity-mythique   {
  background: linear-gradient(90deg, var(--accent), var(--water), var(--sun), var(--nutri));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Onglet Carnet ──────────────────────────────────────────────── */
.carnet-summary {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.carnet-progress-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.carnet-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  border-radius: var(--r-pill);
  transition: width 0.6s var(--ease-out);
}
.carnet-progress-label { text-align: center; font-size: var(--fs-sm); color: var(--ink-1); }

.carnet-section { margin-bottom: var(--sp-5); }
.carnet-cat-title {
  font-size: var(--fs-md);
  color: var(--ink-1);
  margin: 0 0 var(--sp-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 6px;
}
.carnet-cat-count { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 400; }
.carnet-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-2);
}
.carnet-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-3);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.carnet-card:hover { transform: translateY(-2px); }
.carnet-emoji { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.carnet-info { flex: 1; min-width: 0; }
.carnet-name { font-weight: 600; color: var(--ink-1); font-size: var(--fs-sm); margin-bottom: 2px; }
.carnet-desc { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; margin-bottom: var(--sp-1); }
.carnet-reward { font-size: var(--fs-xs); color: var(--sun); }
.carnet-unlocked {
  border-color: rgba(143, 195, 94, 0.45);
  background: rgba(143, 195, 94, 0.08);
}
.carnet-locked { opacity: 0.55; }
.carnet-hidden { background: rgba(238, 135, 178, 0.05); border-color: var(--line-accent); }
.carnet-hidden .carnet-name { font-style: italic; color: var(--ink-2); }

/* ── Onglet Stats ───────────────────────────────────────────────── */
.stats-content { display: flex; flex-direction: column; gap: var(--sp-3); }
.stat-block {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-3) var(--sp-4);
}
.stat-block h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-2); }
.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 5px 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
}
.stat-row span:last-child { font-weight: 600; color: var(--ink-1); }
.no-plant { color: var(--ink-3); font-size: var(--fs-sm); }
.danger-zone h3 { color: var(--health); }

.stats-section {
  margin-top: var(--sp-3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--surface-1);
}
.stats-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink-1);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background var(--t-fast);
}
.stats-section-head:hover { background: rgba(0, 0, 0, 0.35); }
.stats-section-chevron { color: var(--ink-3); transition: transform var(--t-base) var(--ease-out); }
.stats-section:not(.open) .stats-section-chevron { transform: rotate(-90deg); }
.stats-section-body {
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  max-height: 2000px;
  transition: max-height var(--t-base) var(--ease-out), padding var(--t-base) var(--ease-out);
}
.stats-section:not(.open) .stats-section-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.stats-section .stat-block { margin-top: var(--sp-3); }
.stats-section .stat-block:first-child { margin-top: 0; }

/* Blocs thématiques dans Stats */
.mood-block, .weather-block, .seasonal-block {
  border: 1px solid var(--line-1);
  padding: var(--sp-3);
  border-radius: var(--r-ctl);
  margin-top: var(--sp-3);
  background: var(--surface-1);
}
.mood-block h3, .weather-block h3, .seasonal-block h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.endless-block { border-color: rgba(95, 179, 212, 0.40); background: rgba(95, 179, 212, 0.06); }
.season-effect-cell { font-size: var(--fs-xs); text-align: right; }
.neighbor-list { list-style: none; }
.neighbor-list li {
  padding: 5px 0;
  font-size: var(--fs-sm);
  color: var(--ink-1);
  border-bottom: 1px dashed var(--line-2);
}
.neighbor-list li:last-child { border-bottom: none; }
.neighbor-list li.muted { color: var(--ink-2); font-style: italic; }

/* Prestige / Talents / Maîtrise / Quêtes longues (blocs stats) */
.prestige-block {
  border-color: rgba(240, 198, 116, 0.40) !important;
  background: rgba(240, 198, 116, 0.05) !important;
}
.prestige-desc { font-size: var(--fs-sm); color: var(--ink-2); font-style: italic; margin-bottom: var(--sp-2); }
.prestige-perks {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--r-ctl);
  font-size: var(--fs-sm);
}
.prestige-perk { padding: 5px 0; border-bottom: 1px dashed var(--line-2); }
.prestige-perk:last-child { border-bottom: none; }
.prestige-perk strong { color: var(--sun); }
.prestige-locked {
  text-align: center;
  padding: var(--sp-2);
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink-3);
  border-radius: var(--r-ctl);
  font-size: var(--fs-sm);
  font-style: italic;
  margin-top: var(--sp-2);
}

.talent-block .talent-summary { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); }
.talent-points-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--nutri), #6ea050);
  color: var(--ink-inverse);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-left: 6px;
}
.talent-points-large { font-size: var(--fs-sm); padding: 4px 14px; }

.mastery-block .mastery-list { padding: 0; }
.longquest-block { background: rgba(238, 135, 178, 0.05); border-color: var(--line-accent); }
.longquest-item {
  background: rgba(0, 0, 0, 0.2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-ctl);
  margin-bottom: var(--sp-2);
}
.longquest-head { display: flex; justify-content: space-between; color: var(--ink-1); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.longquest-days {
  background: rgba(238, 135, 178, 0.14);
  color: var(--accent);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.longquest-desc { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 6px; }
.longquest-bar { height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: var(--r-pill); overflow: hidden; }
.longquest-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.longquest-progress { font-size: var(--fs-xs); color: var(--ink-3); text-align: right; margin-top: 2px; }

/* Compagnons (bloc stats) */
.companions-block .companions-list { margin-bottom: var(--sp-2); }
.companions-list { display: flex; flex-direction: column; gap: 6px; }
.companion-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
}
.companion-item.mature { border-color: rgba(143, 195, 94, 0.40); background: rgba(143, 195, 94, 0.08); }
.companion-emoji { font-size: 1.6rem; }
.companion-info { flex: 1; min-width: 0; }
.companion-name { color: var(--ink-1); font-size: var(--fs-sm); font-weight: 600; }
.companion-bar { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-1); }
.companion-bar-fill { height: 100%; background: linear-gradient(90deg, var(--nutri), #a8d480); }
.companion-grow-pct { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.companion-mature-tag { font-size: var(--fs-xs); color: var(--nutri); font-weight: 600; }

/* Équipement (slots accessoires, onglet inventaire) */
.equipment-block {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
}
.equipment-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.equipment-slot {
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2);
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.equipment-slot:hover { background: rgba(0, 0, 0, 0.45); border-color: var(--line-accent); }
.equipment-slot.equipped {
  border-style: solid;
  border-color: var(--nutri);
  background: rgba(143, 195, 94, 0.08);
}
.equipment-slot-icon { font-size: 1.8rem; margin-bottom: var(--sp-1); }
.equipment-slot-name { font-size: var(--fs-xs); color: var(--ink-3); }
.equipment-slot-acc { font-size: var(--fs-xs); color: var(--ink-1); font-weight: 600; margin-top: 2px; }
.equipment-slot-charges { margin-top: var(--sp-1); height: 3px; background: rgba(255,255,255,0.1); border-radius: var(--r-pill); overflow: hidden; }
.equipment-slot-charges-fill { height: 100%; background: var(--nutri); border-radius: var(--r-pill); transition: width var(--t-base); }

.equipment-picker {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.equipment-picker-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  min-width: min(380px, 92vw);
  max-width: 92vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-3);
}
.equipment-picker-title { font-size: var(--fs-md); color: var(--ink-1); font-weight: 600; margin-bottom: var(--sp-3); }
.equipment-picker-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.equipment-picker-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-ctl);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.equipment-picker-item:hover { background: rgba(0, 0, 0, 0.5); border-color: var(--line-1); }
.equipment-picker-item.equipped { border-color: var(--nutri); background: rgba(143, 195, 94, 0.10); }
.equipment-picker-item-emoji { font-size: 1.6rem; }
.equipment-picker-item-info { flex: 1; min-width: 0; }
.equipment-picker-item-name { color: var(--ink-1); font-size: var(--fs-sm); font-weight: 600; }
.equipment-picker-item-desc { color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
.equipment-picker-item-charges { font-size: var(--fs-xs); color: var(--nutri); font-variant-numeric: tabular-nums; white-space: nowrap; }
.equipment-picker-close {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-1);
  border-radius: var(--r-pill);
  width: 100%;
  min-height: 44px;
}
.equipment-picker-special-btn {
  margin-top: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.equipment-picker-special-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Death screen ───────────────────────────────────────────────── */
#screen-death {
  background: linear-gradient(160deg, #170b0d 0%, var(--bg-0) 100%);
  align-items: center;
  justify-content: center;
  padding: var(--sp-5) var(--sp-4);
}
.death-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 340px;
  width: 100%;
}
.death-icon { font-size: 4rem; animation: wilting 2s var(--ease-out) infinite; }
@keyframes wilting {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
#death-title { font-size: var(--fs-xl); font-weight: 700; color: var(--health); }
#death-reason { color: var(--ink-2); font-size: var(--fs-sm); }
.death-plant-area { width: 200px; height: 200px; }
#death-canvas { border-radius: var(--r-ctl); background: rgba(0, 0, 0, 0.3); }
#death-survival { color: var(--ink-2); font-size: var(--fs-sm); }
.death-actions { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }

/* ── Bloom screen ───────────────────────────────────────────────── */
#screen-bloom {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(238, 135, 178, 0.08) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%);
  align-items: center;
  justify-content: flex-start;
  padding: var(--sp-4) var(--sp-4) 80px;
  overflow-y: auto;
}
.bloom-animation-phase {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.bloom-animation-phase.hidden { display: none; }
#bloom-anim-canvas { width: 100%; max-width: 360px; height: auto; display: block; }
.bloom-anim-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  padding: 6px var(--sp-4);
  border-radius: var(--r-pill);
  animation: hintPulse 2s var(--ease-out) infinite;
  white-space: nowrap;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}
.bloom-reveal-phase { width: 100%; flex: 1; overflow-y: auto; padding: var(--sp-4) 0 var(--sp-6); }
.bloom-reveal-phase.hidden { display: none; }

.bloom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.bloom-header { text-align: center; }
.bloom-header h2 { font-size: var(--fs-xl); font-weight: 700; color: var(--accent); }
#bloom-subtitle { color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.bloom-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#bloom-canvas {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-0));
  display: block;
  box-shadow: var(--shadow-3);
}
.bloom-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--bloom-color, rgba(238, 135, 178, 0.3)) 0%, transparent 65%);
  z-index: -1;
  animation: glowPulse 2s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.bloom-info { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.bloom-name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ink-1); text-align: center; }
.bloom-rarity { font-size: var(--fs-md); font-weight: 700; text-align: center; }
.bloom-dna {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  user-select: all;
}
.bloom-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%; }
.bloom-stat {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-xs);
}
.bloom-stat.mutation {
  grid-column: 1 / -1;
  background: rgba(238, 135, 178, 0.10);
  border-color: var(--line-accent);
  color: var(--accent);
}
.bloom-stat.parent {
  grid-column: 1 / -1;
  background: rgba(95, 179, 212, 0.10);
  border-color: rgba(95, 179, 212, 0.35);
  color: var(--water);
}
.bloom-actions { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }

/* ── §7.2 Modales (overlay blur ≤6px, contenu opaque + liseré) ──── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-base) var(--ease-out);
}
.modal.hidden { display: none; }

.modal-content {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-4);
  max-width: 400px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  position: relative;
  animation: popIn var(--t-base) var(--ease-out);
}
.modal-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.modal-icon { font-size: 3rem; filter: drop-shadow(0 0 16px rgba(238, 135, 178, 0.35)); }
.modal-content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-1);
}
.modal-content p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }
.modal-actions { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }

.offline-events { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.offline-good  { color: var(--nutri);  font-size: var(--fs-sm); }
.offline-bad   { color: var(--health); font-size: var(--fs-sm); }
.offline-event { color: var(--sun);    font-size: var(--fs-sm); }

/* Risk choice modal */
.modal-risk-content { max-width: 420px; text-align: left; align-items: stretch; }
.modal-risk-content .modal-icon, .modal-risk-content h3 { align-self: center; }
.risk-choices { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.risk-choice {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.risk-choice:hover { transform: translateY(-1px); }
.risk-choice-label  { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-1); display: flex; align-items: center; gap: 6px; }
.risk-choice-desc   { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
.risk-choice-chance { font-size: var(--fs-xs); font-weight: 700; margin-top: 2px; }
.risk-choice-safe   { border-color: rgba(143, 195, 94, 0.40);  background: rgba(143, 195, 94, 0.07); }
.risk-choice-safe .risk-choice-chance   { color: var(--nutri); }
.risk-choice-safe:hover   { border-color: var(--nutri); background: rgba(143, 195, 94, 0.14); }
.risk-choice-risky  { border-color: rgba(240, 198, 116, 0.40); background: rgba(240, 198, 116, 0.07); }
.risk-choice-risky .risk-choice-chance  { color: var(--sun); }
.risk-choice-risky:hover  { border-color: var(--sun); background: rgba(240, 198, 116, 0.14); }
.risk-choice-danger { border-color: rgba(255, 95, 122, 0.40);  background: rgba(255, 95, 122, 0.07); }
.risk-choice-danger .risk-choice-chance { color: var(--health); }
.risk-choice-danger:hover { border-color: var(--health); background: rgba(255, 95, 122, 0.13); }

/* ── Modale customisation du jardin ─────────────────────────────── */
.modal-customize-content { max-width: 460px; text-align: left; align-items: stretch; }
.modal-customize-content .modal-icon, .modal-customize-content h3 { align-self: center; }
.customize-hint { text-align: center; }
.customize-section { width: 100%; margin-top: var(--sp-2); }
.customize-section-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 6px;
}
.customize-ambiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.ambience-card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ambience-card:hover { border-color: var(--line-accent); }
.ambience-card.active { border-color: var(--accent); background: rgba(238, 135, 178, 0.10); }
.ambience-emoji { font-size: 1.6rem; }
.ambience-name  { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }

.customize-decos, .customize-placed { display: flex; flex-direction: column; gap: 6px; }
.deco-row, .placed-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}
.deco-category-label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--sp-2);
  font-weight: 600;
}
.deco-item { display: flex; align-items: center; gap: var(--sp-2); flex: 1; background: none; border: none; color: var(--ink-1); text-align: left; }
.deco-emoji, .placed-emoji { font-size: 1.3rem; }
.deco-name, .placed-name { flex: 1; font-size: var(--fs-sm); color: var(--ink-1); }
.placed-remove {
  background: rgba(255, 95, 122, 0.12);
  border: 1px solid rgba(255, 95, 122, 0.35);
  color: var(--health);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: background var(--t-fast);
}
.placed-remove:hover { background: rgba(255, 95, 122, 0.25); }
.customize-empty { font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; padding: var(--sp-2) 0; }

/* ── Modale Lettre narrative ────────────────────────────────────── */
.modal-letter-content { padding: var(--sp-3); background: transparent; border: none; box-shadow: none; }
.modal-letter-content::before { display: none; }
.letter-paper {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-4);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-3);
  position: relative;
}
.letter-paper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.letter-header { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.letter-icon { font-size: 2.4rem; filter: drop-shadow(0 0 12px rgba(238, 135, 178, 0.30)); }
.letter-body {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.7;
  text-align: left;
  white-space: pre-wrap;
  font-style: italic;
}
.letter-reward {
  font-size: var(--fs-sm);
  color: var(--sun);
  font-weight: 600;
  text-align: center;
  background: rgba(240, 198, 116, 0.08);
  border: 1px solid rgba(240, 198, 116, 0.28);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
}
.letter-reward:empty { display: none; }

/* ── Rituel de plantation (4 étapes) ────────────────────────────── */
.modal-ritual-content { max-width: 440px; }
.ritual-step { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.ritual-step.hidden { display: none; }
.ritual-icon { font-size: 2.6rem; filter: drop-shadow(0 0 14px rgba(238, 135, 178, 0.30)); }
.ritual-hint { font-size: var(--fs-sm); color: var(--ink-2); font-style: italic; }
#ritual-name-input {
  width: 100%;
  min-height: 44px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  color: var(--ink-1);
  font-size: var(--fs-md);
  padding: 10px var(--sp-4);
  text-align: center;
  transition: border-color var(--t-fast);
}
#ritual-name-input:focus { outline: none; border-color: var(--accent); }
#ritual-name-input::placeholder { color: var(--ink-3); }
.ritual-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.name-suggestion {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  color: var(--ink-2);
  border-radius: var(--r-pill);
  padding: 5px var(--sp-3);
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.name-suggestion:hover { border-color: var(--line-accent); color: var(--ink-1); }
.ritual-actions { display: flex; gap: var(--sp-2); width: 100%; justify-content: center; }
.ritual-next { width: 100%; }

/* Cartes du rituel : intentions / modes / pots+terreaux */
.ritual-intentions, .ritual-modes { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.ritual-intention-card, .ritual-mode-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ritual-intention-card:hover, .ritual-mode-card:hover { border-color: var(--line-accent); }
.ritual-intention-card.selected, .ritual-mode-card.selected,
.ritual-pot-card.selected {
  border-color: var(--accent);
  background: rgba(238, 135, 178, 0.10);
  box-shadow: 0 0 12px rgba(238, 135, 178, 0.15);
}
.ritual-intention-emoji, .ritual-mode-emoji { font-size: 1.6rem; flex-shrink: 0; }
.ritual-intention-name, .ritual-mode-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); }
.ritual-intention-desc, .ritual-mode-desc { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
.ritual-intention-reward { font-size: var(--fs-xs); color: var(--sun); font-weight: 600; margin-top: 2px; }

.ritual-section-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  width: 100%;
  text-align: left;
  margin-top: var(--sp-2);
}
.ritual-pots { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.ritual-pot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.ritual-pot-card {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ritual-pot-card:hover { border-color: var(--line-accent); }
.pot-emoji { font-size: 1.5rem; }
.pot-name  { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-1); margin-top: 2px; }
.pot-bonus { font-size: var(--fs-xs); color: var(--nutri); }
.pot-stock { font-size: var(--fs-xs); color: var(--ink-3); }

/* ── Croisement (modale simple) + carte de partage ──────────────── */
.cross-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
}
.cross-card {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.cross-card:hover { border-color: var(--line-accent); transform: translateY(-2px); }
.cross-card-rarity { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); }
.cross-card-name   { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-1); }
.cross-card-dna    { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-3); letter-spacing: 0.04em; }
.btn-cross-plant, .btn-hybrid-plant {
  width: 100%;
  min-height: 44px;
  background: linear-gradient(135deg, var(--water), #3d8aa8);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  padding: 10px;
  transition: filter var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.btn-hybrid-plant { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.btn-cross-plant:hover, .btn-hybrid-plant:hover { filter: brightness(1.08); transform: translateY(-1px); }

.share-card-wrap { width: 100%; display: flex; justify-content: center; overflow: hidden; border-radius: var(--r-ctl); }
#share-card-canvas { width: 100%; max-width: 320px; height: auto; border-radius: var(--r-ctl); box-shadow: var(--shadow-2); display: block; }

/* ── Boutons de partage social ──────────────────────────────────── */
.btn-share-native {
  width: 100%;
  margin-top: var(--sp-3);
  font-size: 1rem;
  padding: 12px;
}
.btn-share-native.hidden { display: none; }

.share-socials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-3);
}
.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn:active { transform: translateY(0); }
.share-btn .share-emoji { font-size: 1.5rem; line-height: 1; }
.share-whatsapp:hover  { background: rgba(37, 211, 102, 0.18); border-color: #25d366; color: #25d366; }
.share-instagram:hover { background: linear-gradient(135deg, rgba(247, 119, 55, 0.18), rgba(220, 39, 67, 0.18), rgba(188, 24, 136, 0.18)); border-color: #e1306c; color: #f77737; }
.share-tiktok:hover    { background: rgba(255, 0, 80, 0.16); border-color: #00f2ea; color: #25f4ee; }
.share-facebook:hover  { background: rgba(24, 119, 242, 0.18); border-color: #1877f2; color: #1877f2; }
.share-twitter:hover   { background: rgba(255, 255, 255, 0.10); border-color: #fff; color: #fff; }
.share-copy:hover      { background: rgba(120, 200, 144, 0.18); border-color: #8fc35e; color: #8fc35e; }

@media (max-width: 480px) {
  .share-socials { grid-template-columns: repeat(2, 1fr); }
}

/* ── §7.2 Toasts (border-left 3px sémantique) ───────────────────── */
#toast-container {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  align-items: center;
  width: 92%;
  max-width: 420px;
  pointer-events: none;
}
@media (min-width: 900px) { #toast-container { bottom: 24px; } }
.toast {
  --t-accent: var(--ink-2);
  background: var(--surface-3);
  color: var(--ink-1);
  border: 1px solid var(--line-1);
  border-left: 3px solid var(--t-accent);
  border-radius: var(--r-ctl);
  padding: 11px var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
  pointer-events: auto;
  max-width: 100%;
}
.toast-visible { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { --t-accent: var(--nutri); }
.toast-error   { --t-accent: var(--health); }
.toast-warning { --t-accent: var(--sun); }
.toast-info    { --t-accent: var(--water); }

/* ── Récap quotidien + breakdown qualité (bloom) ────────────────── */
.recap-content { max-width: 420px; text-align: left; align-items: stretch; }
.recap-content .modal-icon { align-self: center; }
.recap-header { text-align: center; }
.recap-body { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.recap-total {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent);
}
.recap-total-label { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; display: block; }
.recap-sources { display: flex; flex-direction: column; gap: var(--sp-2); }
.recap-source-row { display: grid; grid-template-columns: 24px 1fr 80px 44px; align-items: center; gap: var(--sp-2); }
.recap-source-emoji { font-size: 1rem; }
.recap-source-label { font-size: var(--fs-xs); color: var(--ink-2); }
.recap-source-bar { height: 5px; background: rgba(0, 0, 0, 0.4); border-radius: var(--r-pill); overflow: hidden; }
.recap-source-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: var(--r-pill); }
.recap-source-value { font-size: var(--fs-xs); color: var(--ink-1); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.recap-close { width: 100%; }

.bloom-breakdown {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-3) var(--sp-4);
}
.bloom-breakdown-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-2);
  text-align: center;
}
.bloom-breakdown-bars { display: flex; flex-direction: column; gap: 6px; }
.bloom-breakdown-row { display: grid; grid-template-columns: 22px 1fr 90px 38px; align-items: center; gap: var(--sp-2); }
.bb-emoji { font-size: 0.95rem; }
.bb-label { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-bar   { height: 5px; background: rgba(0, 0, 0, 0.4); border-radius: var(--r-pill); overflow: hidden; }
.bb-fill  { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: var(--r-pill); }
.bb-pct   { font-size: var(--fs-xs); color: var(--ink-1); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Tutoriel léger ─────────────────────────────────────────────── */
.tuto-content { max-width: 420px; }
.tuto-grid { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; text-align: left; }
.tuto-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.tuto-emoji { font-size: 1.3rem; flex-shrink: 0; }
.tuto-tip {
  font-size: var(--fs-xs);
  color: var(--sun);
  background: rgba(240, 198, 116, 0.08);
  border: 1px solid rgba(240, 198, 116, 0.25);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  width: 100%;
}
.tuto-close { width: 100%; }

/* ── Mini-jeux (overlay plein écran) ────────────────────────────── */
.minigame-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  animation: fadeIn var(--t-fast) var(--ease-out);
}
.minigame-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  width: min(440px, 94vw);
  max-width: 94vw;
  box-shadow: var(--shadow-3);
  animation: popIn var(--t-base) var(--ease-out);
}
.minigame-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.minigame-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink-1); flex: 1; }
.minigame-badge-risky {
  background: rgba(255, 95, 122, 0.14);
  border: 1px solid rgba(255, 95, 122, 0.45);
  color: var(--health);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.minigame-badge-acc {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  border: 1px solid var(--line-1);
}
.minigame-stage {
  position: relative;
  background: var(--bg-0);
  border-radius: var(--r-ctl);
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.minigame-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  cursor: pointer;
  touch-action: none;
}
.minigame-hint {
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  background: rgba(10, 20, 16, 0.85);
  border-top: 1px solid var(--line-2);
  text-align: center;
}
.minigame-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-3); gap: var(--sp-2); }
.minigame-special-btn {
  min-height: 36px;
  padding: 7px var(--sp-4);
  border: 1px solid var(--line-accent);
  background: rgba(238, 135, 178, 0.12);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.minigame-special-btn:hover { transform: scale(1.04); background: rgba(238, 135, 178, 0.22); }
.minigame-skip-btn {
  min-height: 36px;
  padding: 7px var(--sp-4);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  margin-left: auto;
  transition: color var(--t-fast), background var(--t-fast);
}
.minigame-skip-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink-1); }
.minigame-result { text-align: center; padding: var(--sp-6) var(--sp-5); animation: popIn var(--t-base) var(--ease-spring); }
.minigame-result-stars {
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  color: var(--sun);
  text-shadow: 0 0 20px rgba(240, 198, 116, 0.7);
  margin-bottom: var(--sp-2);
}
.minigame-result-text { font-size: var(--fs-md); color: var(--ink-1); font-weight: 600; letter-spacing: 0.03em; }

/* ── Mini-jeu d'éclosion (hatch) ────────────────────────────────── */
.hatch-modal { z-index: var(--z-modal); }
.hatch-content { max-width: 420px; }
.hatch-hint { font-size: var(--fs-sm); color: var(--ink-2); }
#hatch-canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: var(--r-ctl);
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  cursor: pointer;
  touch-action: none;
}
.hatch-result { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; animation: popIn var(--t-base) var(--ease-spring); }
.hatch-result.hidden { display: none; }
.hatch-result-tier { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--sun); text-shadow: 0 0 16px rgba(240, 198, 116, 0.5); }
.hatch-result-stats { font-size: var(--fs-sm); color: var(--ink-2); }
.hatch-result-msg { font-size: var(--fs-sm); color: var(--ink-1); font-weight: 500; }
#hatch-close.hidden { display: none; }

/* ── Intensité (risque gradué) ──────────────────────────────────── */
.intensity-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  width: min(420px, 94vw);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: popIn var(--t-base) var(--ease-out);
}
.intensity-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.intensity-header h3 { font-size: var(--fs-md); color: var(--ink-1); }
.intensity-close {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.intensity-close:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.12); }
.intensity-slider-wrap { padding: 0 var(--sp-2); }
.intensity-slider { width: 100%; accent-color: var(--accent); cursor: pointer; min-height: 28px; }
.intensity-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); }
.intensity-level {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-1);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  opacity: 0.55;
}
.intensity-level.active { opacity: 1; border-color: var(--line-accent); background: rgba(238, 135, 178, 0.08); }
.intensity-icon { font-size: 1.2rem; }
.intensity-name { font-size: 0.62rem; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.intensity-detail { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; font-size: 0.6rem; }
.intensity-bonus { color: var(--nutri); font-weight: 700; }
.intensity-risk  { color: var(--sun); font-weight: 600; }
.intensity-safe  { color: var(--nutri); }
.intensity-current {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
}
.intensity-current strong { color: var(--ink-1); }
.intensity-actions { display: flex; gap: var(--sp-2); }
.intensity-actions > * { flex: 1; }
#intensity-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-fast) var(--ease-out);
}

/* ── Encyclopédie ───────────────────────────────────────────────── */
#encyclopedia-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-fast) var(--ease-out);
}
.enc-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  width: min(560px, 94vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: popIn var(--t-base) var(--ease-out);
}
.enc-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-2);
}
.enc-header h2 { font-size: var(--fs-md); color: var(--ink-1); flex-shrink: 0; }
.enc-search {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  color: var(--ink-1);
  font-size: var(--fs-sm);
  padding: 6px var(--sp-3);
}
.enc-search:focus { outline: none; border-color: var(--accent); }
.enc-close {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.enc-close:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.12); }
.enc-body { display: flex; flex: 1; min-height: 0; }
.enc-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  border-right: 1px solid var(--line-2);
  overflow-y: auto;
  flex-shrink: 0;
}
.enc-tab {
  text-align: left;
  padding: 8px var(--sp-3);
  border-radius: var(--r-ctl);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.enc-tab:hover  { background: var(--surface-1); color: var(--ink-1); }
.enc-tab.active { background: rgba(238, 135, 178, 0.12); color: var(--accent); font-weight: 600; }
.enc-content { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4); }
.enc-section-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-1); margin-bottom: var(--sp-3); }
.enc-entry {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.enc-cat-tag { font-size: var(--fs-xs); color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.enc-q { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); margin-bottom: 4px; }
.enc-a { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; }
.enc-empty { color: var(--ink-3); font-style: italic; padding: var(--sp-4); text-align: center; }
@media (max-width: 540px) {
  .enc-body { flex-direction: column; }
  .enc-tabs { flex-direction: row; border-right: none; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
}

/* ── Photo mode ─────────────────────────────────────────────────── */
#photo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-fast) var(--ease-out);
}
.photo-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  width: min(440px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-3);
  animation: popIn var(--t-base) var(--ease-out);
}
.photo-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.photo-header h2 { font-size: var(--fs-md); color: var(--ink-1); }
.photo-close {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.photo-close:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.12); }
.photo-preview-wrap { display: flex; justify-content: center; }
.photo-preview {
  position: relative;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  max-width: 100%;
}
.photo-preview canvas { display: block; max-width: 100%; height: auto; }
.photo-caption-overlay {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  text-align: center;
  pointer-events: none;
}
.photo-controls { display: flex; flex-direction: column; gap: var(--sp-2); }
.photo-filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; }
.photo-filter-btn {
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.photo-filter-btn:hover  { color: var(--ink-1); border-color: var(--line-accent); }
.photo-filter-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(238, 135, 178, 0.10); }
.photo-caption-input {
  width: 100%;
  min-height: 40px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  color: var(--ink-1);
  font-size: var(--fs-sm);
  padding: 8px var(--sp-3);
}
.photo-caption-input:focus { outline: none; border-color: var(--accent); }
.photo-actions { display: flex; gap: var(--sp-2); }
.photo-actions > * { flex: 1; }

/* ── Just-in-time tutorials ─────────────────────────────────────── */
.jit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-fast) var(--ease-out);
}
.jit-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow-3);
  animation: popIn var(--t-base) var(--ease-out);
}
.jit-icon  { font-size: 2.4rem; filter: drop-shadow(0 0 12px rgba(238, 135, 178, 0.30)); }
.jit-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink-1); }
.jit-body  { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.jit-footer { width: 100%; margin-top: var(--sp-1); }
.jit-ok { width: 100%; }

/* ── Wow moments (plein écran, célébration) ─────────────────────── */
.wow-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.85);
  z-index: var(--z-system);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
.wow-overlay.visible { opacity: 1; }
.wow-overlay.closing { opacity: 0; }
.wow-content {
  --wow-color: var(--accent);
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 380px;
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface-3);
  border: 1px solid color-mix(in srgb, var(--wow-color) 45%, transparent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-3), 0 0 60px color-mix(in srgb, var(--wow-color) 22%, transparent);
  overflow: hidden;
  transform: scale(0.92);
  transition: transform var(--t-slow) var(--ease-spring);
}
.wow-overlay.visible .wow-content { transform: scale(1); }
.wow-bg-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11rem;
  opacity: 0.06;
  pointer-events: none;
}
.wow-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--wow-color);
  text-shadow: 0 0 24px color-mix(in srgb, var(--wow-color) 45%, transparent);
  position: relative;
}
.wow-sub  { font-size: var(--fs-md); font-weight: 600; color: var(--ink-1); position: relative; }
.wow-body { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; position: relative; }
.wow-continue {
  min-height: 44px;
  padding: 10px var(--sp-5);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-pill);
  position: relative;
  transition: transform var(--t-fast) var(--ease-out);
}
.wow-continue:hover { transform: translateY(-1px); }
.wow-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wow-particle {
  position: absolute;
  font-size: 1.2rem;
  animation: wowParticleFall 3s linear forwards;
  opacity: 0;
}
@keyframes wowParticleFall {
  0%   { opacity: 0; transform: translateY(-20px) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(340px) rotate(220deg); }
}

/* ── Journal de souvenirs ───────────────────────────────────────── */
.memory-journal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-fast) var(--ease-out);
}
.mj-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  width: min(440px, 94vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: popIn var(--t-base) var(--ease-out);
}
.mj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-2);
}
.mj-header h2 { font-size: var(--fs-md); color: var(--ink-1); }
.mj-close {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.mj-close:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.12); }
.mj-list { overflow-y: auto; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.mj-empty { color: var(--ink-3); font-style: italic; text-align: center; padding: var(--sp-5) 0; }
.mj-entry {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-ctl);
  padding: var(--sp-3);
}
.mj-entry-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-1); }
.mj-entry-sub   { font-size: var(--fs-xs); color: var(--accent); margin-top: 1px; }
.mj-entry-body  { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.mj-entry-date  { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; font-style: italic; }

/* ── Easter eggs ────────────────────────────────────────────────── */
.egg-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-left: 3px solid var(--accent);
  color: var(--ink-1);
  padding: 10px var(--sp-4);
  border-radius: var(--r-ctl);
  font-size: var(--fs-sm);
  font-weight: 500;
  z-index: var(--z-system);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  pointer-events: none;
  max-width: 88vw;
  text-align: center;
}
.egg-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.egg-thanks-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.85);
  z-index: var(--z-system);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-base) var(--ease-out);
}
.egg-thanks-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  padding: var(--sp-6) var(--sp-5);
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow-3);
  animation: popIn var(--t-base) var(--ease-spring);
}
.egg-thanks-emoji { font-size: 4rem; filter: drop-shadow(0 0 18px rgba(238, 135, 178, 0.45)); }
.egg-thanks-sub { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.egg-thanks-close {
  min-height: 44px;
  padding: 10px var(--sp-5);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-pill);
}
.firework-layer { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-system); }
.firework-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: fireworkFly 1.4s var(--ease-out) forwards;
}
@keyframes fireworkFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--fx, 0), var(--fy, -120px)) scale(0.3); }
}
@keyframes rainbowShift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
body.rainbow-mode { animation: rainbowShift 6s linear infinite; }

/* ── Mentor (Mémé Rosa) ─────────────────────────────────────────── */
#mentor-bubble {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  left: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  color: var(--ink-1);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border-radius: var(--r-card);
  max-width: 360px;
  box-shadow: var(--shadow-3);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
#mentor-bubble.visible { opacity: 1; transform: translateX(0); }
#mentor-bubble.hidden  { display: none; }
.mentor-avatar {
  font-size: 2.2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(238, 135, 178, 0.10);
  border: 1px solid var(--line-accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.mentor-content { flex: 1; min-width: 0; }
.mentor-name { font-weight: 700; font-size: var(--fs-xs); margin-bottom: 4px; color: var(--accent); letter-spacing: 0.04em; }
.mentor-text { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.mentor-close {
  background: none;
  font-size: 1.1rem;
  color: var(--ink-3);
  padding: 0 2px;
  flex-shrink: 0;
  transition: color var(--t-fast);
}
.mentor-close:hover { color: var(--ink-1); }

/* ── Overlays de progression (talents, maîtrise, quêtes longues,
     perso, compagnons, croisement avancé, lignée) ─────────────────── */
#talent-overlay, #mastery-overlay, #lq-overlay, #perso-overlay,
#companions-overlay, #cross-overlay, #lineage-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn var(--t-fast) var(--ease-out);
}
.talent-card, .mastery-card, .lq-card, .perso-card,
.companions-card, .cross-card-overlay, .lineage-card {
  background: var(--surface-3);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-card);
  width: min(480px, 94vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: popIn var(--t-base) var(--ease-out);
}
.talent-header, .mastery-header, .lq-header, .perso-header,
.companions-header, .cross-header, .lineage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-2);
}
.talent-header h2, .mastery-header h2, .lq-header h2, .perso-header h2,
.companions-header h2, .cross-header h2, .lineage-header h2 {
  font-size: var(--fs-md);
  color: var(--ink-1);
}
.talent-close, .mastery-close, .lq-close, .perso-close,
.companions-close, .cross-close, .lineage-close {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.talent-close:hover, .mastery-close:hover, .lq-close:hover, .perso-close:hover,
.companions-close:hover, .cross-close:hover, .lineage-close:hover {
  color: var(--ink-1);
  background: rgba(255, 255, 255, 0.12);
}

/* Talents : branches + items */
.talent-branches { overflow-y: auto; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.talent-branch { --branch-color: var(--accent); }
.talent-branch-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--branch-color);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--branch-color) 30%, transparent);
  padding-bottom: 5px;
}
.talent-branch-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.talent-item {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.talent-item.learned   { border-color: color-mix(in srgb, var(--branch-color) 50%, transparent); background: color-mix(in srgb, var(--branch-color) 9%, transparent); }
.talent-item.can-learn { cursor: pointer; }
.talent-item.can-learn:hover { border-color: var(--branch-color); }
.talent-item.blocked   { opacity: 0.45; }
.talent-item-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.talent-name   { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); }
.talent-tier   { font-size: var(--fs-xs); color: var(--ink-3); }
.talent-cost   { font-size: var(--fs-xs); color: var(--sun); font-weight: 700; white-space: nowrap; }
.talent-desc   { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; margin-top: 3px; }
.talent-prereq { font-size: var(--fs-xs); color: var(--health); margin-top: 2px; }
.talent-footer {
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: center;
}

/* Maîtrise par espèce */
.mastery-list { overflow-y: auto; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.mastery-item {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
}
.mastery-item-emoji { font-size: 1.6rem; flex-shrink: 0; }
.mastery-item-info  { flex: 1; min-width: 0; }
.mastery-item-name  { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); }
.mastery-level      { font-size: var(--fs-xs); color: var(--sun); font-weight: 700; margin-left: var(--sp-1); }
.mastery-bar        { height: 4px; background: rgba(0, 0, 0, 0.4); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-1); }
.mastery-bar-fill   { height: 100%; background: linear-gradient(90deg, var(--sun), var(--nutri)); border-radius: var(--r-pill); }
.mastery-item-xp    { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.mastery-variants   { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mastery-variant {
  font-size: var(--fs-xs);
  background: rgba(238, 135, 178, 0.10);
  border: 1px solid var(--line-accent);
  color: var(--accent);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}

/* Quêtes longues (overlay) */
.lq-body { overflow-y: auto; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.lq-body h3 { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-2); }
.lq-empty { font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; }
.lq-quest {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
}
.lq-quest.lq-completed { border-color: rgba(143, 195, 94, 0.45); background: rgba(143, 195, 94, 0.07); }
.lq-quest-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); }
.lq-days {
  background: rgba(238, 135, 178, 0.14);
  color: var(--accent);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.lq-quest-desc { font-size: var(--fs-xs); color: var(--ink-2); margin: 4px 0 6px; }
.lq-quest-bar { height: 5px; background: rgba(0, 0, 0, 0.4); border-radius: var(--r-pill); overflow: hidden; }
.lq-quest-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: var(--r-pill); }
.lq-quest-prog { font-size: var(--fs-xs); color: var(--ink-3); text-align: right; margin-top: 2px; }
.lq-quest-reward { font-size: var(--fs-xs); color: var(--sun); margin-top: 4px; }
.lq-claim {
  margin-top: var(--sp-2);
  background: linear-gradient(135deg, var(--sun), #d4a04a);
  color: var(--ink-inverse);
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: transform var(--t-fast) var(--ease-out);
}
.lq-claim:hover { transform: scale(1.04); }

/* Personnalisation (boutique de styles) */
.perso-body { overflow-y: auto; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.perso-help { font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; }
.perso-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.perso-info { flex: 1; min-width: 0; }
.perso-item, .perso-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
}
.perso-emoji { font-size: 1.5rem; flex-shrink: 0; }
.perso-name  { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); }
.perso-desc  { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 1px; }
.perso-cost  { font-size: var(--fs-xs); color: var(--sun); font-weight: 700; white-space: nowrap; }
.personalization-block { border-color: var(--line-accent) !important; }
.photo-lineage-block .btn-action { margin: 4px 0; }

/* Compagnons (overlay) */
.companions-help { padding: var(--sp-2) var(--sp-4) 0; font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; }
.companions-grid {
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2);
}
.companion-card {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-3);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.companion-card:hover { border-color: var(--line-accent); transform: translateY(-2px); }
.companion-card-emoji { font-size: 2rem; }
.companion-card-name  { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); margin-top: 4px; }
.companion-card-desc  { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.companion-card-time  { font-size: var(--fs-xs); color: var(--sun); margin-top: 4px; }

/* Croisement avancé (overlay 2 fleurs) */
#cross-overlay .cross-card {
  width: min(460px, 94vw);
  max-height: 84vh;
  padding: 0 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  text-align: left;
  align-items: stretch;
  gap: var(--sp-3);
  background: var(--surface-3);
  border-color: var(--line-accent);
}
#cross-overlay .cross-card:hover { transform: none; }
#cross-overlay #btn-do-cross { margin: 0 var(--sp-4); }
.cross-help { padding: 0 var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); }
.cross-selected {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
}
.cross-slot {
  flex: 1;
  background: var(--surface-1);
  border: 1px dashed var(--line-1);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  min-height: 56px;
}
.cross-slot-label { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
.cross-slot-pick  { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 3px; }
.cross-x { font-size: var(--fs-lg); color: var(--accent); font-weight: 700; }
.cross-list {
  overflow-y: auto;
  padding: 0 var(--sp-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--sp-2);
  flex: 1;
}
.cross-flower {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cross-flower:hover { border-color: var(--line-accent); }
.cross-flower.selected-a { border-color: var(--water);  background: rgba(95, 179, 212, 0.10); }
.cross-flower.selected-b { border-color: var(--accent); background: rgba(238, 135, 178, 0.10); }
.cross-emoji { font-size: 1.5rem; flex-shrink: 0; }
.cross-info  { flex: 1; min-width: 0; }
.cross-name  { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cross-rar   { font-size: var(--fs-xs); font-weight: 600; }

/* Lignée (overlay) */
.lineage-stats {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.lineage-list { overflow-y: auto; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.lineage-flower {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-2) var(--sp-3);
}
.lineage-emoji { font-size: 1.5rem; flex-shrink: 0; }
.lineage-info  { flex: 1; min-width: 0; }
.lineage-name  { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); }
.lineage-gen {
  font-size: var(--fs-xs);
  color: var(--water);
  background: rgba(95, 179, 212, 0.10);
  border: 1px solid rgba(95, 179, 212, 0.30);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  margin-left: var(--sp-1);
}
.lineage-parents { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.lineage-rar { font-size: var(--fs-xs); font-weight: 600; margin-top: 1px; }

/* ── Page admin (outillage de test, plein écran) ────────────────── */
#admin-page {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, var(--bg-1), var(--bg-0));
  z-index: var(--z-system);
  overflow-y: auto;
  color: var(--ink-1);
}
.admin-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(10, 20, 16, 0.92);
  border-bottom: 1px solid var(--line-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.admin-header h1 { font-size: var(--fs-md); }
.admin-header-actions button {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  color: var(--ink-1);
  border-radius: var(--r-pill);
  padding: 7px var(--sp-4);
  font-size: var(--fs-sm);
  min-height: 36px;
}
.admin-content { padding: var(--sp-4); max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.admin-section {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.admin-section h2 { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-3); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-2); }
.admin-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-ctl);
  color: var(--ink-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.admin-btn:hover { border-color: var(--line-accent); }
.admin-btn small { font-weight: 400; color: var(--ink-3); font-size: 0.66rem; }
.admin-btn-risky    { border-color: rgba(240, 198, 116, 0.45); }
.admin-btn-equipped { border-color: var(--nutri) !important; background: rgba(143, 195, 94, 0.10); }
.admin-btn-action   { background: rgba(95, 179, 212, 0.10); border-color: rgba(95, 179, 212, 0.35); }
.admin-btn-danger   { background: rgba(255, 95, 122, 0.10); border-color: rgba(255, 95, 122, 0.40); color: var(--health); }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.admin-slot-group { margin-bottom: var(--sp-3); }
.admin-slot-label { font-size: var(--fs-xs); font-weight: 700; color: var(--sun); margin-bottom: var(--sp-2); letter-spacing: 0.06em; }
.admin-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); font-style: italic; }
.admin-state {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  padding: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  overflow-x: auto;
  white-space: pre-wrap;
}

/* ── Dev panel (?test / #dev) ───────────────────────────────────── */
#dev-panel {
  position: fixed;
  top: 60px;
  right: var(--sp-3);
  z-index: var(--z-system);
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 230px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-3);
}
.dev-panel-title { font-size: var(--fs-sm); font-weight: 700; color: var(--sun); margin-bottom: 2px; }
#dev-panel button {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  color: var(--ink-1);
  border-radius: var(--r-ctl);
  font-size: var(--fs-xs);
  padding: 7px 10px;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}
#dev-panel button:hover { background: var(--bg-light); border-color: var(--line-accent); }
#dev-panel .dev-danger { border-color: rgba(255, 95, 122, 0.45); color: var(--health); }
#dev-panel .dev-close  { background: rgba(255, 255, 255, 0.08); text-align: center; font-weight: 600; }

/* ── Context HUD (mood / météo / mutateur / combo) ──────────────── */
#context-hud {
  position: sticky;
  top: 48px;
  z-index: calc(var(--z-nav) - 1);
  padding: var(--sp-1) var(--sp-3);
  pointer-events: none;
}
#context-hud.hidden { display: none; }
.context-hud-inner {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  justify-content: center;
}
.context-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(10, 20, 16, 0.82);
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  pointer-events: auto;
  cursor: help;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: slideDown var(--t-base) var(--ease-out);
}
.context-pill-icon  { font-size: 0.9rem; }
.context-pill-label { font-weight: 500; letter-spacing: 0.02em; }

/* ── Todo HUD (rappel de soin discret, en haut) ─────────────────── */
#todo-hud {
  position: fixed;
  top: 60px;                /* sous la brand-bar (48px + marge) */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-drawer);
  pointer-events: none;
  max-width: 95vw;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
#todo-hud.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;       /* ne capture aucun click et libère la zone */
}
.todo-hud-inner { display: flex; gap: var(--sp-2); pointer-events: auto; flex-wrap: wrap; justify-content: center; }
.todo-hud-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(22, 36, 28, 0.92);
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  padding: 5px 13px 5px 5px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.todo-hud-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.todo-hud-icon {
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.todo-hud-text  { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.todo-hud-title { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-1); }
.todo-hud-sub   { font-size: 0.66rem; color: var(--ink-3); }
.todo-hud-close {
  pointer-events: auto;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  align-self: center;
  border-radius: 50%;
  border: 1px solid var(--line-1);
  background: rgba(22, 36, 28, 0.92);
  color: var(--ink-3);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color var(--t-fast), background var(--t-fast);
}
.todo-hud-close:hover { color: var(--ink-1); background: var(--surface-2); }

/* ── Compatibilité de classes héritées (index.html) ─────────────── */
.need-card, .need-card-happiness, .need-bar-happiness { /* relayées par .gh-stat / .need-bar */ }
.gh-dna-text { display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.gh-gardener-icon  { font-size: 0.95rem; }
.gh-gardener-level { font-variant-numeric: tabular-nums; }
.carnet-content { display: flex; flex-direction: column; }
.carnet-progress { display: flex; flex-direction: column; gap: var(--sp-1); }

/* ── Utilitaires ────────────────────────────────────────────────── */
.hidden { display: none !important; }

@media (max-width: 420px) {
  .seed-grid { grid-template-columns: 1fr; }
  .cross-grid { grid-template-columns: 1fr; }
  .bloom-stats-grid { grid-template-columns: 1fr; }
  .equipment-slots { grid-template-columns: repeat(2, 1fr); }
}

/* ── §7.1 Motion : reduced-motion global obligatoire ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Déclencheurs flottants (aide + mode test) ──────────────────── */
#help-trigger, #dev-trigger {
  position: fixed;
  right: var(--sp-4);
  z-index: var(--z-drawer);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
#help-trigger {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  color: var(--water);
  font-size: 1.2rem;
  font-weight: 700;
}
#help-trigger:hover { transform: scale(1.08); border-color: var(--water); }
#dev-trigger {
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  background: var(--surface-3);
  border: 1px solid rgba(240, 198, 116, 0.45);
  font-size: 1.3rem;
}
#dev-trigger:hover { transform: scale(1.08); }
@media (min-width: 900px) {
  #help-trigger { bottom: var(--sp-4); }
  #dev-trigger  { bottom: 76px; }
}

/* États résiduels pilotés par game.js */
.perso-item.placed { border-color: rgba(143, 195, 94, 0.45); background: rgba(143, 195, 94, 0.08); }
.admin-btn-mg { background: rgba(95, 179, 212, 0.10); border-color: rgba(95, 179, 212, 0.35); }