/* Mots d'encre 6.0 « La marée d'encre » · le système graphique commun (atelier « systeme »)
   Il étend e5/conte.css (mêmes valeurs, mêmes trois polices, même « encre dans l'eau ») : UN système, DEUX ambiances.
     .mde-surface  le papier nacre : lire, créer, se poser (c'est l'ambiance par défaut) ;
     .mde-abysse   la nuit #071A29 : explorer, jouer (les anciennes pages sombres la reçoivent par habillage-60.css).
   Les couleurs ont une fonction, une seule :
     lagon  = ce qui se touche (une seule teinte par ambiance : #0E6B78 sur papier, #7FD9D4 sur nuit) ;
     or     = découverte, trésor, souvenir (réservé à cela : jamais un bouton ordinaire) ;
     corail = créer, écrire, ce qui est à toi ;
     indigo-violet = mystère, inconnu, verrouillé ;
     dégradé or → pêche = la récompense rare, et rien d'autre.
   Typographie : Instrument Serif (lieux, histoires, boss), Newsreader (poèmes, récits), Instrument Sans (commandes).
   Échelle fixe : 13 / 15 / 17 / 20 / 26 / 34 / 44 px. Rien sous 12 px. Cibles ≥ 44 px. Contraste ≥ 4,5:1 (vérifié).
   Tout est préfixé : classes « mde- », jetons « --s- » : rien ne touche aux classes des pages existantes.
   Vitrine de tous les composants : maree/systeme.html. */

:root {
  /* l'échelle typographique */
  --s-t13: 13px; --s-t15: 15px; --s-t17: 17px; --s-t20: 20px; --s-t26: 26px; --s-t34: 34px; --s-t44: 44px;
  --s-f-titre: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --s-f-texte: 'Newsreader', 'Iowan Old Style', 'Times New Roman', serif;
  --s-f-ui: 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* les formes : le papier a des coins vifs, ce qui se touche est arrondi, les feuilles plus encore */
  --s-r-papier: 4px; --s-r-btn: 12px; --s-r-carte: 16px; --s-r-feuille: 22px;
  --s-cible: 44px;
  /* le mouvement : court, avec une fonction */
  --s-vite: .15s; --s-doux: .32s; --s-courbe: cubic-bezier(.2, .8, .2, 1);
  /* les fonds (valeurs brutes, les mêmes que conte.css) */
  --s-encre: #161B44; --s-nacre: #F7F3EA; --s-papier: #FCFAF5; --s-sable: #EEE7D8;
  --s-nuit: #071A29; --s-nuit-2: #0E2436; --s-nuit-3: #143049; --s-abysse: #0A3F55;
  --s-rare: linear-gradient(135deg, #E8C873 0%, #F2C78F 55%, #F2B48A 100%);
}

/* ---------- les deux ambiances : les mêmes noms, d'autres valeurs ---------- */
:root, .mde-surface {
  --s-fond: #F7F3EA; --s-carte: #FCFAF5; --s-carte-2: #EEE7D8;
  --s-txt: #161B44; --s-txt-2: #4C6272;
  --s-trait: rgba(22, 27, 68, .13); --s-trait-fort: rgba(22, 27, 68, .32);
  --s-action: #0E6B78; --s-action-2: #0A5965; --s-sur-action: #FFFFFF; --s-action-voile: #E3F4F0;
  --s-or: #765311; --s-or-fond: #F6EBCB; --s-or-trait: #C9A14A;
  --s-corail: #9E4A36; --s-corail-fond: #F6E1D8; --s-corail-plein: #9E4A36; --s-sur-corail: #FFFFFF;
  --s-mystere: #4A3F8F; --s-mystere-fond: #E7E3F6;
  --s-ombre: 0 1px 2px rgba(10, 63, 85, .06), 0 14px 30px -16px rgba(10, 63, 85, .35);
  --s-focus: #0E6B78;
  --ic-or: #B88A3A;
}
.mde-abysse {
  --s-fond: #071A29; --s-carte: #0E2436; --s-carte-2: #143049;
  --s-txt: #EEF2EE; --s-txt-2: #A8BCC4;
  --s-trait: rgba(238, 242, 238, .13); --s-trait-fort: rgba(238, 242, 238, .34);
  --s-action: #7FD9D4; --s-action-2: #A6E6E2; --s-sur-action: #071A29; --s-action-voile: rgba(127, 217, 212, .14);
  --s-or: #E8C873; --s-or-fond: rgba(232, 200, 115, .14); --s-or-trait: #C9A14A;
  --s-corail: #F2B6A2; --s-corail-fond: rgba(242, 182, 162, .14); --s-corail-plein: #F2B6A2; --s-sur-corail: #2A1006;
  --s-mystere: #BDB4F4; --s-mystere-fond: rgba(122, 107, 216, .2);
  --s-ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -18px rgba(0, 0, 0, .75);
  --s-focus: #7FD9D4;
  --ic-or: #E9CF8E;
}
.mde-surface, .mde-abysse { color: var(--s-txt); }
.mde-abysse { background-color: var(--s-fond); }

/* ---------- les icônes dessinées (maree/icones.js) ---------- */
.mde-ic { display: inline-block; flex: none; width: 1.5em; height: 1.5em; vertical-align: -.35em; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
[data-icone] { display: inline-grid; place-items: center; line-height: 0; }
.mde-ic .o { stroke: var(--ic-or, #B88A3A); }
.mde-ic .of { fill: var(--ic-or, #B88A3A); stroke: none; }
.mde-ic .p { fill: currentColor; stroke: none; }
.mde-ic .pf { fill: currentColor; fill-opacity: .16; }

/* ---------- la typographie ---------- */
.mde-sur { margin: 0; font: 600 var(--s-t13)/1.25 var(--s-f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--s-txt-2); }
.mde-sur--or { color: var(--s-or); }
.mde-sur--corail { color: var(--s-corail); }
.mde-sur--mystere { color: var(--s-mystere); }
.mde-h1 { margin: 0; font: 400 clamp(34px, 9vw, 44px)/1.05 var(--s-f-titre); letter-spacing: -.01em; text-wrap: balance; }
.mde-h2 { margin: 0; font: 400 var(--s-t26)/1.15 var(--s-f-titre); text-wrap: balance; }
.mde-h3 { margin: 0; font: 400 var(--s-t20)/1.2 var(--s-f-titre); }
.mde-corps { margin: 0; font: 400 var(--s-t17)/1.6 var(--s-f-texte); }
.mde-chapo { margin: 0; font: italic 400 var(--s-t20)/1.45 var(--s-f-texte); color: var(--s-txt-2); }
.mde-ui { font: 400 var(--s-t15)/1.4 var(--s-f-ui); }
.mde-petit { font: 500 var(--s-t13)/1.35 var(--s-f-ui); color: var(--s-txt-2); }
/* la révélation : l'italique du titre, à l'encre qui saigne quand la page porte le filtre #saigne (comme le logo de l'accueil) */
.mde-revelation { margin: 0; font: italic 400 var(--s-t44)/1.05 var(--s-f-titre); letter-spacing: -.01em; }
.mde-revelation.saigne { filter: url(#saigne); }

/* ---------- 1. le bouton principal : large, lagon, 52 px ---------- */
.mde-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; min-width: var(--s-cible); padding: 0 1.5em; border: 0; border-radius: var(--s-r-btn);
  background: var(--s-action); color: var(--s-sur-action); font: 600 var(--s-t17)/1.1 var(--s-f-ui); text-decoration: none; text-align: center;
  box-shadow: 0 10px 22px -14px rgba(10, 63, 85, .75); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--s-vite) ease, background-color .2s, box-shadow .2s;
}
.mde-btn .mde-ic { width: 22px; height: 22px; }
@media (hover: hover) { .mde-btn:hover { background: var(--s-action-2); transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(10, 63, 85, .8); } }
.mde-btn:active { transform: scale(.97); box-shadow: 0 4px 10px -8px rgba(10, 63, 85, .8); }
.mde-btn[aria-pressed="true"], .mde-btn.est-choisi { box-shadow: 0 0 0 3px var(--s-fond), 0 0 0 5px var(--s-action); }
.mde-btn:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 3px; }
/* désactivé : jamais une simple transparence ; le libellé reste lisible et la raison s'écrit dessous (.mde-raison) */
.mde-btn:disabled, .mde-btn[aria-disabled="true"] {
  background: transparent; color: var(--s-txt-2); box-shadow: none; cursor: not-allowed; transform: none;
  outline: 1.5px dashed var(--s-trait-fort); outline-offset: -1.5px;
}
.mde-btn--large { display: flex; width: 100%; }
.mde-btn--corail { background: var(--s-corail-plein); color: var(--s-sur-corail); }
@media (hover: hover) { .mde-btn--corail:hover { background: var(--s-corail-plein); filter: brightness(1.06); } }
/* la récompense rare : le seul bouton qui porte le dégradé or → pêche */
.mde-btn--rare { background: var(--s-rare); color: #2A1606; box-shadow: 0 12px 26px -14px rgba(201, 161, 74, .9); }
@media (hover: hover) { .mde-btn--rare:hover { background: var(--s-rare); filter: brightness(1.05); } }
.mde-raison { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 500 var(--s-t13)/1.35 var(--s-f-ui); color: var(--s-txt-2); }
.mde-raison .mde-ic { width: 18px; height: 18px; color: var(--s-mystere); }

/* ---------- 2. le bouton secondaire : discret, bordé, 48 px ---------- */
.mde-btn-doux {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 48px; min-width: var(--s-cible); padding: 0 1.2em; border-radius: var(--s-r-btn); border: 1.5px solid var(--s-trait-fort);
  background: transparent; color: var(--s-txt); font: 500 var(--s-t17)/1.1 var(--s-f-ui); text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform var(--s-vite) ease, background-color .2s, border-color .2s;
}
.mde-btn-doux .mde-ic { width: 20px; height: 20px; }
@media (hover: hover) { .mde-btn-doux:hover { background: var(--s-action-voile); border-color: var(--s-action); } }
.mde-btn-doux:active { transform: scale(.97); background: var(--s-action-voile); }
.mde-btn-doux[aria-pressed="true"], .mde-btn-doux[aria-selected="true"], .mde-btn-doux.est-choisi { background: var(--s-action-voile); border-color: var(--s-action); color: var(--s-txt); box-shadow: inset 0 0 0 1px var(--s-action); }
.mde-btn-doux:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.mde-btn-doux:disabled, .mde-btn-doux[aria-disabled="true"] { border-style: dashed; color: var(--s-txt-2); background: transparent; cursor: not-allowed; transform: none; }
/* une petite rangée de choix (filtres, onglets d'un panneau) : le même bouton, plus compact, toujours 44 px */
.mde-puce { min-height: 44px; padding: 0 14px; border-radius: 999px; font: 600 var(--s-t15)/1 var(--s-f-ui); }
.mde-rangee { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 3. la carte de lieu illustrée : la porte en papier de l'accueil, avec son hublot ---------- */
.mde-lieu {
  position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) 22px; align-items: center; gap: 14px;
  min-height: 84px; padding: 12px 16px 12px 12px; border-radius: var(--s-r-papier);
  background: linear-gradient(170deg, #FCFAF5, #F2ECDF); color: #161B44; text-decoration: none; text-align: left;
  box-shadow: 0 14px 30px -16px rgba(3, 32, 48, .6), inset 0 0 0 1px rgba(255, 255, 255, .55);
  border: 0; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* le reflet de nacre sur la tranche, et le coin à peine corné */
.mde-lieu::before { content: ""; position: absolute; left: 10px; right: 22px; top: 0; height: 1.5px; background: linear-gradient(90deg, transparent, #F3CFDD, #CDEFE6, #D9D1F4, #EED9A6, transparent); opacity: .9; pointer-events: none; }
.mde-lieu::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: linear-gradient(225deg, rgba(10, 63, 85, 0) 50%, #E2D9C5 50%, #CEC4AE); box-shadow: -1px 1px 2px rgba(4, 38, 56, .12); pointer-events: none; }
@media (hover: hover) { .mde-lieu:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(3, 32, 48, .7), inset 0 0 0 1px rgba(255, 255, 255, .6); } }
.mde-lieu:active { transform: translateY(1px) scale(.985); }
.mde-lieu:focus-visible { outline: 3px solid #0E6B78; outline-offset: 3px; }
.mde-abysse .mde-lieu:focus-visible { outline-color: #7FD9D4; }
/* le hublot : l'image du lieu, dans l'eau */
.mde-hublot { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #0A3F55;
  background: radial-gradient(circle at 36% 28%, #FFFFFF, #E3F4F0 55%, #BFE6E1); box-shadow: inset 0 0 0 1.5px rgba(14, 107, 120, .28), 0 4px 10px -6px rgba(3, 32, 48, .5); }
.mde-hublot .mde-ic { width: 36px; height: 36px; }
.mde-lieu-txt { display: grid; gap: 2px; min-width: 0; }
.mde-lieu-txt b { font: 400 var(--s-t26)/1.05 var(--s-f-titre); letter-spacing: -.005em; }
.mde-lieu-txt small { font: 400 var(--s-t15)/1.3 var(--s-f-ui); color: #4C6272; }
.mde-lieu-fl { width: 22px; height: 22px; color: #0E6B78; }
.mde-etat { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 600 var(--s-t13)/1.2 var(--s-f-ui); }
.mde-etat .mde-ic { width: 16px; height: 16px; }
/* découvert : le hublot cerclé d'or, une marque « découvert » */
.mde-lieu--trouve .mde-hublot { box-shadow: inset 0 0 0 1.5px rgba(14, 107, 120, .28), 0 0 0 2.5px #C9A14A, 0 4px 12px -4px rgba(201, 161, 74, .7); }
.mde-lieu--trouve .mde-etat { background: #F6EBCB; color: #765311; }
/* inconnu : le papier prend l'encre violette, le hublot est fermé par un cadenas dessiné, le nom reste « ??? » */
.mde-lieu--inconnu { background: linear-gradient(170deg, #ECE8F7, #DCD6EF); color: #2E2766; }
.mde-lieu--inconnu .mde-hublot { color: #4A3F8F; background: radial-gradient(circle at 36% 28%, #F4F2FB, #D9D3F0 60%, #C4BCE6); box-shadow: inset 0 0 0 1.5px rgba(74, 63, 143, .35); }
.mde-lieu--inconnu .mde-lieu-txt small { color: #4A4470; }
.mde-lieu--inconnu .mde-etat { background: rgba(74, 63, 143, .12); color: #3B3275; }
.mde-lieu--inconnu .mde-lieu-fl { color: #4A3F8F; }
/* temporaire (Grande Marée, événement) : un ruban lagon qui dit jusqu'à quand */
.mde-lieu--temporaire { box-shadow: 0 14px 30px -16px rgba(3, 32, 48, .6), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 2px #3FBFBE; }
.mde-lieu--temporaire .mde-etat { background: #E3F4F0; color: #0A5965; }

/* ---------- 4. la carte de créature : le hublot, le nom, la rareté par sa FORME (et sa couleur) ---------- */
.mde-creature {
  display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 44px; padding: 14px 10px 12px; border-radius: var(--s-r-carte);
  background: var(--s-carte); color: var(--s-txt); box-shadow: inset 0 0 0 1px var(--s-trait); text-align: center; text-decoration: none;
  border: 0; font: inherit; cursor: pointer; touch-action: manipulation; transition: transform var(--s-vite) ease, box-shadow .2s;
}
@media (hover: hover) { .mde-creature:hover { box-shadow: inset 0 0 0 1.5px var(--s-action); } }
.mde-creature:active { transform: scale(.97); }
.mde-creature:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.mde-creature .mde-hublot { width: 88px; height: 88px; color: #CFEFEA; background: radial-gradient(circle at 50% 28%, #2B7E8E, #0A3F55 62%, #071A29); box-shadow: inset 0 0 0 2px rgba(207, 239, 234, .22), 0 10px 20px -12px rgba(0, 0, 0, .7); }
.mde-creature .mde-hublot .mde-ic { width: 54px; height: 54px; }
.mde-creature b { font: 400 var(--s-t20)/1.15 var(--s-f-titre); }
.mde-creature small { font: 500 var(--s-t13)/1.3 var(--s-f-ui); color: var(--s-txt-2); }
.mde-creature--inconnue .mde-hublot { color: #020A12; background: radial-gradient(circle at 50% 28%, #24405A, #0E2436 62%, #050F1B); }
.mde-creature--inconnue b { color: var(--s-mystere); }
.mde-rarete { display: inline-flex; align-items: center; gap: 5px; font: 600 var(--s-t13)/1.2 var(--s-f-ui); color: var(--s-txt-2); }
.mde-rarete .mde-ic { width: 16px; height: 16px; stroke-width: 2.6; }
.mde-rarete[data-r="commune"] .mde-ic { color: #8FA3AE; }
.mde-rarete[data-r="rare"] .mde-ic { color: #3B8FD1; }
.mde-rarete[data-r="epique"] .mde-ic { color: #8E6CD8; }
.mde-rarete[data-r="legendaire"] .mde-ic { color: #D9932E; }
.mde-rarete[data-r="mythique"] .mde-ic { color: #D9534F; }
.mde-rarete[data-r="abyssale"] .mde-ic { color: #46536B; }
.mde-rarete[data-r="origine"] .mde-ic { color: #3FBFBE; }
.mde-abysse .mde-rarete[data-r="commune"] .mde-ic { color: #C3D0D6; }
.mde-abysse .mde-rarete[data-r="rare"] .mde-ic { color: #7DB9EA; }
.mde-abysse .mde-rarete[data-r="epique"] .mde-ic { color: #B9A2F0; }
.mde-abysse .mde-rarete[data-r="legendaire"] .mde-ic { color: #F0B95E; }
.mde-abysse .mde-rarete[data-r="mythique"] .mde-ic { color: #F08A86; }
.mde-abysse .mde-rarete[data-r="abyssale"] .mde-ic { color: #9AA8C2; }
.mde-abysse .mde-rarete[data-r="origine"] .mde-ic { color: #7FD9D4; }

/* ---------- 5. la carte de boss : un personnage, sa teinte (--boss), sa silhouette, sa profondeur ---------- */
.mde-boss {
  --boss: #7A2BFF;
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 6px; min-height: 230px; padding: 18px 18px 16px;
  border-radius: var(--s-r-feuille); color: #EEF2EE; text-align: left; text-decoration: none; border: 0; font: inherit; cursor: pointer;
  background: radial-gradient(120% 80% at 78% 6%, color-mix(in srgb, var(--boss) 46%, transparent), transparent 62%), linear-gradient(180deg, #0E2436, #050F1B);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--boss) 42%, transparent), 0 26px 44px -26px #000; transition: transform var(--s-vite) ease, box-shadow .2s;
}
.mde-boss .mde-boss-ombre { position: absolute; z-index: -1; right: -6%; top: 2%; width: 66%; height: 78%; color: color-mix(in srgb, var(--boss) 32%, #02060C); }
.mde-boss .mde-boss-ombre .mde-ic { width: 100%; height: 100%; stroke-width: 1.4; fill: currentColor; fill-opacity: .55; }
.mde-boss-prof { font: 600 var(--s-t13)/1.2 var(--s-f-ui); letter-spacing: .12em; text-transform: uppercase; color: #C6DFE6; }
.mde-boss b { font: 400 var(--s-t34)/1 var(--s-f-titre); letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.mde-boss em { font: italic 400 var(--s-t17)/1.4 var(--s-f-texte); color: #D4E4EA; }
.mde-boss .mde-etat { background: rgba(189, 180, 244, .16); color: #D6D0FA; }
.mde-boss--vaincu .mde-etat { background: rgba(232, 200, 115, .16); color: #F0D894; }
@media (hover: hover) { .mde-boss:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--boss) 70%, transparent), 0 30px 50px -26px #000; } }
.mde-boss:active { transform: scale(.985); }
.mde-boss:focus-visible { outline: 3px solid #7FD9D4; outline-offset: 3px; }

/* ---------- 6. la fenêtre de découverte : le filet d'or (le seul cadre doré du site) ---------- */
.mde-trouvaille {
  position: relative; display: grid; justify-items: center; gap: 10px; width: min(100%, 420px); padding: 28px 22px 20px; border-radius: 6px;
  background: var(--s-carte); color: var(--s-txt); text-align: center;
  box-shadow: 0 0 0 1px var(--s-or-trait), inset 0 0 0 5px var(--s-carte), inset 0 0 0 6px color-mix(in srgb, var(--s-or-trait) 75%, transparent), 0 26px 50px -24px rgba(0, 0, 0, .6);
}
.mde-medaillon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--s-or-fond); color: var(--s-or); box-shadow: inset 0 0 0 1.5px var(--s-or-trait); }
.mde-medaillon .mde-ic { width: 40px; height: 40px; }
.mde-trouvaille .mde-h2 { margin-top: 2px; }
.mde-trouvaille .mde-corps { color: var(--s-txt-2); }
.mde-trouvaille .mde-actions { width: 100%; }
.mde-actions { display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 520px) { .mde-actions--ligne { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.mde-trouvaille.apparait { animation: mde-apparait .5s var(--s-courbe) both; }
@keyframes mde-apparait { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------- 7. l'inventaire : des cases, des objets dessinés, la rareté par une forme dans le coin ---------- */
.mde-inventaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mde-case {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 92px; padding: 10px 6px 8px; border-radius: 14px;
  background: var(--s-carte); color: var(--s-txt); box-shadow: inset 0 0 0 1px var(--s-trait); border: 0; font: inherit; cursor: pointer; text-align: center; width: 100%;
  transition: transform var(--s-vite) ease, box-shadow .2s;
}
.mde-case .mde-ic { width: 38px; height: 38px; }
.mde-case span { font: 600 var(--s-t13)/1.2 var(--s-f-ui); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mde-case i { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 var(--s-t13)/1 var(--s-f-ui); font-style: normal; background: var(--s-carte-2); color: var(--s-txt); }
.mde-case .mde-rarete { position: absolute; top: 6px; right: 6px; }
.mde-case[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--s-action); background: var(--s-action-voile); }
@media (hover: hover) { .mde-case:hover { box-shadow: inset 0 0 0 1.5px var(--s-action); } }
.mde-case:active { transform: scale(.96); }
.mde-case:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.mde-case--vide { background: transparent; box-shadow: none; outline: 1.5px dashed var(--s-trait-fort); outline-offset: -1.5px; color: var(--s-txt-2); cursor: default; }
.mde-case--vide .mde-ic { opacity: .5; }

/* ---------- 8. le trophée : une médaille dont le métal dit le rang ; verrouillé = cadenas dessiné et condition ---------- */
.mde-trophee { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: var(--s-r-carte); background: var(--s-carte); box-shadow: inset 0 0 0 1px var(--s-trait); color: var(--s-txt); }
.mde-medaille { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #3A2606;
  background: radial-gradient(circle at 34% 28%, #FFF6D8, #E8C873 46%, #B88A3A 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 6px 14px -8px rgba(0, 0, 0, .6); }
.mde-medaille .mde-ic { width: 32px; height: 32px; --ic-or: #6E4C0E; }
.mde-medaille--bronze { color: #3A1E0A; background: radial-gradient(circle at 34% 28%, #F7DCC4, #C98B5A 50%, #8E5A33 100%); }
.mde-medaille--argent { color: #1E2A33; background: radial-gradient(circle at 34% 28%, #FFFFFF, #C9D3DA 50%, #8D9BA6 100%); }
.mde-medaille--nacre { color: #1C2450; background: radial-gradient(circle at 34% 28%, #FFFFFF, #E3F4F0 34%, #D9D1F4 62%, #EED9A6 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 2px rgba(201, 161, 74, .6), 0 8px 18px -8px rgba(201, 161, 74, .7); }
.mde-medaille--ferme { color: var(--s-mystere); background: transparent; box-shadow: none; outline: 1.5px dashed var(--s-trait-fort); outline-offset: -1.5px; }
.mde-trophee b { display: block; font: 600 var(--s-t17)/1.25 var(--s-f-ui); }
.mde-trophee p { margin: 2px 0 0; font: 400 var(--s-t15)/1.4 var(--s-f-texte); color: var(--s-txt-2); }
.mde-trophee small { display: block; margin-top: 4px; font: 500 var(--s-t13)/1.3 var(--s-f-ui); color: var(--s-txt-2); }
.mde-trophee--ferme b { color: var(--s-txt-2); }

/* ---------- 9. la barre de progression ---------- */
.mde-progres { display: grid; gap: 6px; }
.mde-progres-tete { display: flex; justify-content: space-between; gap: 10px; font: 600 var(--s-t15)/1.2 var(--s-f-ui); }
.mde-progres-tete span:last-child { font-variant-numeric: tabular-nums; color: var(--s-txt-2); font-weight: 500; }
.mde-jauge { position: relative; height: 10px; border-radius: 999px; background: var(--s-trait); overflow: hidden; }
.mde-jauge i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--s-action); transition: width .9s var(--s-courbe); }
.mde-progres--or .mde-jauge i { background: linear-gradient(90deg, #C9A14A, #E8C873); }
.mde-progres--mystere .mde-jauge i { background: linear-gradient(90deg, #6B5CCB, #9C8EF0); }

/* ---------- 10. la pastille « nouveau » : un point d'or fixe, jamais de clignotement ---------- */
.mde-nouveau { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--s-or-fond); color: var(--s-or); font: 600 var(--s-t13)/1.2 var(--s-f-ui); white-space: nowrap; }
.mde-nouveau::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C9A14A; box-shadow: 0 0 0 2px color-mix(in srgb, #C9A14A 25%, transparent); flex: none; }
/* la version « point » seul, posée sur une icône ou un bouton (son sens est dans l'aria-label du bouton) */
.mde-point { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #C9A14A; box-shadow: 0 0 0 2px var(--s-fond); }

/* ---------- 11. l'écran de victoire : la lumière d'or seulement si la prise est rare ---------- */
.mde-victoire {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 12px; padding: 34px 20px 22px;
  border-radius: var(--s-r-feuille); color: #EEF2EE; text-align: center;
  background: radial-gradient(90% 55% at 50% 0%, rgba(127, 217, 212, .2), transparent 70%), linear-gradient(180deg, #0E2436, #071A29);
  box-shadow: inset 0 0 0 1px rgba(238, 242, 238, .1), 0 30px 60px -30px #000;
}
.mde-victoire--rare { background: radial-gradient(90% 60% at 50% 0%, rgba(232, 200, 115, .3), transparent 70%), linear-gradient(180deg, #0E2436, #071A29); }
.mde-victoire--rare::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -40%; width: 160%; aspect-ratio: 1; transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(232, 200, 115, .1) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); }
.mde-victoire .mde-sur { color: #C6DFE6; }
.mde-victoire .mde-revelation { color: #FFFFFF; }
.mde-victoire-nom { margin: 0; font: 400 var(--s-t20)/1.25 var(--s-f-titre); color: #D4E4EA; }
.mde-butin { display: grid; gap: 8px; width: 100%; max-width: 380px; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.mde-gain { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(238, 242, 238, .06); box-shadow: inset 0 0 0 1px rgba(238, 242, 238, .1); }
.mde-gain .mde-ic { width: 28px; height: 28px; justify-self: center; color: #CFEFEA; }
.mde-gain b { font: 600 var(--s-t15)/1.3 var(--s-f-ui); }
.mde-gain small { display: block; font: 500 var(--s-t13)/1.3 var(--s-f-ui); color: #A8BCC4; }
.mde-gain--rare { border: 1.5px solid transparent; background: linear-gradient(#13293B, #13293B) padding-box, var(--s-rare) border-box; box-shadow: 0 8px 22px -14px rgba(232, 200, 115, .8); }
.mde-gain--rare .mde-ic { color: #E8C873; }
.mde-gain--rare small { color: #F0D894; }
.mde-victoire .mde-actions { width: 100%; max-width: 380px; }
.mde-victoire .mde-btn { --s-action: #7FD9D4; --s-action-2: #A6E6E2; --s-sur-action: #071A29; }
.mde-victoire .mde-btn-doux { --s-txt: #EEF2EE; --s-trait-fort: rgba(238, 242, 238, .34); --s-action-voile: rgba(127, 217, 212, .14); --s-action: #7FD9D4; }
.mde-victoire.joue .mde-revelation { animation: mde-encre 1.1s var(--s-courbe) both; }
.mde-victoire.joue .mde-gain { animation: mde-apparait .45s var(--s-courbe) both; }
.mde-victoire.joue .mde-gain:nth-child(2) { animation-delay: .12s; } .mde-victoire.joue .mde-gain:nth-child(3) { animation-delay: .24s; } .mde-victoire.joue .mde-gain:nth-child(4) { animation-delay: .36s; }
@keyframes mde-encre { from { opacity: 0; letter-spacing: .12em; filter: blur(6px); } }

/* ---------- 12. le dialogue d'un personnage : un portrait, un nom, une phrase ; jamais imposé ---------- */
.mde-dialogue { --perso: var(--s-txt-2); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 14px 10px; border-radius: 18px; background: var(--s-carte); color: var(--s-txt); box-shadow: inset 0 0 0 1px var(--s-trait), var(--s-ombre); }
.mde-portrait { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #CDEFE9, #3FBFBE 70%, #0E6B78); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.mde-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.mde-dialogue .mde-dialogue-nom { margin: 2px 0 2px; font: 600 var(--s-t13)/1.2 var(--s-f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--perso); }
.mde-dialogue p { margin: 0; font: 400 var(--s-t17)/1.5 var(--s-f-texte); }
.mde-dialogue-suite { grid-column: 2; justify-self: end; margin-top: 4px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--s-action); font: 600 var(--s-t15)/1 var(--s-f-ui); cursor: pointer; }
.mde-dialogue-suite:active { background: var(--s-action-voile); }
.mde-dialogue-suite:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 1px; }
.mde-abysse .mde-dialogue { --perso-octave: #F2B6A2; --perso-mousse: #E2C49A; }
.mde-dialogue[data-perso="octave"] { --perso: var(--perso-octave, #9E4A36); }
.mde-dialogue[data-perso="mousse"] { --perso: var(--perso-mousse, #7A5321); }

/* ---------- 13. le chargement : une goutte d'encre tombe et s'ouvre dans l'eau ---------- */
.mde-chargement { display: grid; justify-items: center; gap: 12px; padding: 24px 12px; color: var(--s-txt-2); text-align: center; }
.mde-goutte { position: relative; width: 72px; height: 72px; }
.mde-goutte i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1.5px solid var(--s-action); opacity: 0; animation: mde-onde 2.4s ease-out infinite; }
.mde-goutte i:nth-child(2) { animation-delay: .8s; } .mde-goutte i:nth-child(3) { animation-delay: 1.6s; }
.mde-goutte b { position: absolute; left: 50%; top: 0; width: 12px; height: 16px; margin-left: -6px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--s-encre); animation: mde-tombe 2.4s ease-in infinite; }
.mde-abysse .mde-goutte b { background: #CFEFEA; }
.mde-chargement p { margin: 0; font: italic 400 var(--s-t17)/1.4 var(--s-f-texte); }
@keyframes mde-onde { 0% { opacity: 0; transform: scale(.15); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1); } }
@keyframes mde-tombe { 0% { transform: translateY(-8px); opacity: 0; } 15% { opacity: 1; } 32% { transform: translateY(28px); opacity: 1; } 36%, 100% { transform: translateY(28px) scale(.2); opacity: 0; } }

/* ---------- 14. la transition entre deux zones : on descend (surface → abysse) ou on remonte ---------- */
.mde-descente { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: linear-gradient(180deg, #F7F3EA 0%, #CDEFE9 18%, #3FBFBE 34%, #0A3F55 58%, #071A29 78%); background-size: 100% 300%; background-position: 0 0; opacity: 0; }
.mde-descente.joue { animation: mde-descendre .9s var(--s-courbe) both; }
.mde-descente.remonte { animation: mde-remonter .9s var(--s-courbe) both; }
@keyframes mde-descendre { 0% { opacity: 0; background-position: 0 0; } 25% { opacity: 1; } 75% { opacity: 1; background-position: 0 100%; } 100% { opacity: 0; background-position: 0 100%; } }
@keyframes mde-remonter { 0% { opacity: 0; background-position: 0 100%; } 25% { opacity: 1; } 75% { opacity: 1; background-position: 0 0; } 100% { opacity: 0; background-position: 0 0; } }
/* le seuil entre deux zones, dans une page : un filet d'eau qui s'assombrit (pas de rupture brutale) */
.mde-seuil { height: 96px; margin: 0; background: linear-gradient(180deg, var(--s-nacre), #CDEFE9 30%, #0A3F55 72%, var(--s-nuit)); }

/* ---------- 15. le cadenas dessiné (et la condition, toujours écrite) ---------- */
.mde-verrou { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--s-mystere-fond); color: var(--s-txt); font: 500 var(--s-t15)/1.3 var(--s-f-ui); }
.mde-verrou .mde-ic { width: 22px; height: 22px; color: var(--s-mystere); }

/* ---------- l'en-tête commun (le même sur les deux ambiances) ---------- */
.mde-entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--s-fond) 90%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--s-trait); }
.mde-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 12px; color: var(--s-action); font: 600 var(--s-t15)/1 var(--s-f-ui); text-decoration: none; }
.mde-retour .mde-ic { width: 22px; height: 22px; }
.mde-retour:active { background: var(--s-action-voile); }

/* ---------- mouvements réduits : tout s'arrête, rien ne disparaît ---------- */
@media (prefers-reduced-motion: reduce) {
  .mde-btn, .mde-btn-doux, .mde-lieu, .mde-creature, .mde-case, .mde-boss { transition: none; }
  .mde-trouvaille.apparait, .mde-victoire.joue .mde-revelation, .mde-victoire.joue .mde-gain, .mde-descente.joue, .mde-descente.remonte { animation: none; }
  .mde-goutte i, .mde-goutte b { animation: none; } .mde-goutte i:first-child { opacity: .8; transform: scale(.7); }
  .mde-jauge i { transition: none; }
}
html.mvt-reduit .mde-btn, html.mvt-reduit .mde-btn-doux, html.mvt-reduit .mde-lieu, html.mvt-reduit .mde-creature, html.mvt-reduit .mde-case, html.mvt-reduit .mde-boss { transition: none; }
html.mvt-reduit .mde-trouvaille.apparait, html.mvt-reduit .mde-victoire.joue .mde-revelation, html.mvt-reduit .mde-victoire.joue .mde-gain, html.mvt-reduit .mde-descente.joue, html.mvt-reduit .mde-descente.remonte, html.mvt-reduit .mde-goutte i, html.mvt-reduit .mde-goutte b { animation: none; }
html.mvt-reduit .mde-goutte i:first-child { opacity: .8; transform: scale(.7); }

/* ---------- les états montrés à l'arrêt (vitrine et maquettes : .est-survol = survol, .est-presse = pression) ---------- */
.mde-btn.est-survol { background: var(--s-action-2); transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(10, 63, 85, .8); }
.mde-btn.est-presse { transform: scale(.97); box-shadow: 0 4px 10px -8px rgba(10, 63, 85, .8); }
.mde-btn-doux.est-survol { background: var(--s-action-voile); border-color: var(--s-action); }
.mde-btn-doux.est-presse { transform: scale(.97); background: var(--s-action-voile); }
.mde-lieu.est-survol { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(3, 32, 48, .7), inset 0 0 0 1px rgba(255, 255, 255, .6); }