/* ==========================================================================
   L'Archipel des Rumeurs, feuille de style unique.
   Thème sombre marine par défaut, thème clair via [data-theme="light"].
   Recettes appliquées : R1-R3 (boutons), R4 (transitions), R9-R10 (barres),
   R13-R14 (shake/pop), R21 (reduced motion), R22-R23 (perf), R24 (thèmes).
   ========================================================================== */

/* ---------- Tokens (R24) ---------- */
:root {
  color-scheme: dark;
  --bg: #0D2732;
  --panel: #153947;
  --panel-2: #173440;
  --panel-3: #234B58;
  --ink: #EFF7F4;
  --ink-dim: #B4CCD0;
  --accent: #C5E7DF;
  --accent-edge: #608E88;
  --on-accent: #123D48;
  --brass: #D8BF7E;
  /* Alias historiques : les anciennes classes « gold » suivent la menthe. */
  --gold: var(--accent);
  --gold-deep: var(--accent-edge);
  --brand: #1D5968;
  --brand-edge: #123D48;
  --ok: #2E9E63;
  --ok-edge: #1F6E45;
  --err: #C24A42;
  --err-edge: #8C332D;
  --line: rgba(183, 218, 215, 0.20);
  --shadow: rgba(0, 0, 0, 0.45);
  --banner-ok: #123B27;
  --banner-err: #3B1714;
  --lock: #3A4A63;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F8F7;
  --panel: #FFFFFF;
  --panel-2: #E9F2F0;
  --panel-3: #D7E9E5;
  --ink: #163B46;
  --ink-dim: #496772;
  --accent: #235F6C;
  --accent-edge: #153F49;
  --on-accent: #FFFFFF;
  --brass: #806B38;
  --brand: #1D5968;
  --brand-edge: #123D48;
  --ok: #217A4B;
  --ok-edge: #175836;
  --err: #A93B34;
  --err-edge: #7C2A24;
  --line: rgba(16, 33, 58, 0.14);
  --shadow: rgba(16, 33, 58, 0.18);
  --banner-ok: #DDF2E5;
  --banner-err: #F8E2DF;
  --lock: #B9C2D0;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI Rounded", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overflow: hidden;
  overscroll-behavior: none;
}
img { max-width: 100%; display: block; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;              /* R2 */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.no-transitions * { transition: none !important; }   /* anti-flash au swap de thème (R24) */

#app { position: fixed; inset: 0; overflow: hidden; }

/* ---------- Écrans + transitions (R4) ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
/* Le lecteur possède déjà sa zone défilante. Empêcher le déplacement du
   conteneur par la mise au point d'un bouton conserve Quitter à l'écran. */
.screen[data-view="lecon"]:not(.voy-boss-session) { overflow: clip; }
.enter-right { animation: in-r .3s cubic-bezier(.2, 0, 0, 1) both; }
.enter-left  { animation: in-l .3s cubic-bezier(.2, 0, 0, 1) both; }
.exit-left   { animation: out-l .3s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
.exit-right  { animation: out-r .3s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
@keyframes in-r  { from { transform: translateX(100%); } }
@keyframes in-l  { from { transform: translateX(-100%); } }
@keyframes out-l { to { transform: translateX(-30%); opacity: .3; } }
@keyframes out-r { to { transform: translateX(30%); opacity: .3; } }

/* ---------- Boutons squishy (R1, R2) ---------- */
.btn {
  --edge: 4px;
  --bg-b: var(--brand);
  --bord: var(--brand-edge);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 14px;
  background: var(--bg-b);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .03em;
  box-shadow: 0 var(--edge) 0 var(--bord);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active, .btn.pressed {
  transform: translateY(var(--edge));
  box-shadow: 0 0 0 var(--bord);
  transition-duration: .034s;
}
.btn:disabled {
  opacity: .38;
  transform: none;
  box-shadow: 0 var(--edge) 0 var(--bord);
  cursor: default;
}
/* Décision #6 : inactif, le VALIDER doré se lisait encore comme un bouton
   disponible. Gris, plat, sans relief : l'attente se voit. */
.foot-btn:disabled {
  --bg-b: var(--panel-2);
  --bord: transparent;
  color: var(--ink-dim);
  opacity: .8;
  box-shadow: none;
}
.btn-gold { --bg-b: var(--gold); --bord: var(--gold-deep); color: var(--on-accent); }
:root[data-theme="light"] .btn-gold { color: #fff; }
.btn-ok   { --bg-b: var(--ok-edge); --bord: color-mix(in srgb, var(--ok-edge) 75%, #071E25); }
.btn-err  { --bg-b: var(--err); --bord: var(--err-edge); }
.btn-ghost {
  --bg-b: transparent; --bord: transparent;
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink);
}
.btn-block { display: flex; width: 100%; }

/* Cartes pressables (R3) */
.pressable { transition: transform .08s ease; }
.pressable:active { transform: scale(.97); }

/* Dimensionnement par défaut des pictos SVG inline (jamais d'emoji) */
svg { display: inline-block; vertical-align: middle; }
.btn svg { width: 20px; height: 20px; }
.t-lock svg { width: 22px; height: 22px; }
.fc-value svg { width: 22px; height: 22px; }
.boss-intro-badge svg { width: 16px; height: 16px; }
.verdict-titre svg { width: 24px; height: 24px; }

/* ==========================================================================
   1. LA CARTE
   ========================================================================== */
.carte {
  background:
    linear-gradient(rgba(10, 15, 26, .35), rgba(10, 15, 26, .35)),
    var(--fond, url("assets/fond-carte.webp")) center / cover no-repeat,
    var(--bg);
}
:root[data-theme="light"] .carte {
  background:
    linear-gradient(rgba(244, 241, 232, .18), rgba(244, 241, 232, .18)),
    var(--fond, url("assets/fond-carte.webp")) center / cover no-repeat,
    var(--bg);
}
/* La section .carte est déjà positionnée par .screen (absolute inset 0) :
   elle sert de repère à la mer sans règle supplémentaire. */
.carte-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; }
.topbar { position: relative; z-index: 2; }

/* Vague fun 2 : la mer vit sous le contenu (deux nappes d'écume en dérive
   lente) et chaque île teinte le ciel (vars posées par [data-ile]). */
.mer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ciel-a, transparent), var(--ciel-b, transparent));
}
.mer i {
  position: absolute; left: -40%; right: -40%; height: 44%;
  background-image: radial-gradient(ellipse 46px 10px at 50% 50%, rgba(233, 240, 255, .07) 0 62%, transparent 63%);
  background-size: 210px 84px;
}
.mer i:first-child { top: 16%; animation: mer-derive 37s linear infinite alternate; }
.mer i:last-child { top: 55%; background-size: 260px 96px; opacity: .75; animation: mer-derive 53s linear infinite alternate-reverse; }
@keyframes mer-derive { to { transform: translateX(130px); } }

/* #15 : météo de progression (calme par défaut, gronde, or). */
.mer::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .8s ease; opacity: 0; }
.carte[data-meteo="gronde"] .mer::after {
  opacity: 1;
  background: linear-gradient(180deg, rgba(6, 10, 20, .48), rgba(6, 10, 20, .12) 55%, transparent);
  animation: gronde-souffle 6s ease-in-out infinite;
}
@keyframes gronde-souffle { 50% { opacity: .72; } }
.carte[data-meteo="or"] .mer::after {
  opacity: .5;
  background: repeating-linear-gradient(115deg,
    transparent 0 90px,
    color-mix(in srgb, var(--gold) 14%, transparent) 90px 118px,
    transparent 118px 240px);
  animation: rayons-or 26s linear infinite;
}
@keyframes rayons-or { to { background-position: 480px 0; } }

/* #11 : passages animaliers (silhouettes en traversée). */
.passage {
  position: absolute; left: -60px;
  width: 40px; height: 27px;
  color: rgba(226, 236, 252, .38);
  animation-name: passage-traverse;
  animation-timing-function: linear;
  animation-fill-mode: both;
  pointer-events: none;
}
.passage svg { width: 100%; height: 100%; display: block; }
.passage.aileron, .passage.banc { color: rgba(160, 200, 235, .30); }
.passage.baleine { width: 74px; height: 50px; color: rgba(150, 190, 230, .34); }
.passage.inverse { animation-name: passage-traverse-inverse; }
.passage.inverse svg { transform: scaleX(-1); }
@keyframes passage-traverse { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 140px)); } }
@keyframes passage-traverse-inverse { from { transform: translateX(calc(100vw + 140px)); } to { transform: translateX(0); } }

/* #12 : chemin, tronçon vers la prochaine étape. */
.path-svg .path-next {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-dasharray: 6 10;
  stroke-linecap: round;
  animation: next-pulse 2.4s ease-in-out infinite;
}
@keyframes next-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }

/* #13 : sonar sur l'étape en cours. */
.node.current:not(.boss)::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--gold) 80%, transparent);
  animation: sonar 3s ease-out infinite;
  pointer-events: none;
}
@keyframes sonar { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.65); } }

/* #14 : l'XP roule. */
.stat-xp.xp-roll { animation: xp-roll .5s cubic-bezier(.2, .7, .3, 1.4); }
@keyframes xp-roll { 40% { transform: scale(1.16); } }

/* #27 : le chiffre du jour, panneau de bois sous la bannière. */
.panneau-chiffre {
  position: relative;
  width: min(100% - 36px, 330px);
  margin: 10px auto 2px;
  padding: 10px 16px 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .16)),
    linear-gradient(90deg, #5A3E22, #6E4C2A 30%, #5A3E22 60%, #67462a);
  border: 2px solid #3E2A15;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  text-align: center;
  color: #F4E9CF;
}
.panneau-chiffre::before, .panneau-chiffre::after {
  content: ""; position: absolute; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E8D9B0, #7d6335 65%, #4a3a1c);
}
.panneau-chiffre::before { left: 9px; }
.panneau-chiffre::after { right: 9px; }
.pc-kick { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.pc-val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--gold); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); margin: 1px 0; }
.pc-txt { display: block; font-size: .82rem; line-height: 1.4; opacity: .92; }

.carte[data-ile="ile2"] { --ciel-a: rgba(14, 116, 144, .30); --ciel-b: rgba(8, 47, 73, .22); }
.carte[data-ile="ile3"] { --ciel-a: rgba(88, 40, 160, .30); --ciel-b: rgba(28, 12, 58, .30); }
.carte[data-ile="ile4"] { --ciel-a: rgba(190, 18, 60, .18); --ciel-b: rgba(70, 8, 26, .26); }
.carte[data-ile="ile5"] { --ciel-a: rgba(56, 189, 248, .17); --ciel-b: rgba(12, 74, 110, .20); }
.carte[data-ile="ile6"] { --ciel-a: rgba(186, 140, 62, .18); --ciel-b: rgba(84, 60, 22, .22); }
.carte[data-ile="ile7"] { --ciel-a: rgba(234, 88, 12, .16); --ciel-b: rgba(88, 28, 6, .24); }
.carte[data-ile="ile8"] { --ciel-a: rgba(16, 185, 129, .15); --ciel-b: rgba(6, 78, 59, .22); }
:root[data-theme="light"] .carte { --ciel-a: transparent; --ciel-b: transparent; }

/* Le navire mouille au nœud courant, léger tangage permanent. */
.navire {
  position: absolute; width: 46px; height: 46px; margin-left: -23px;
  z-index: 1; pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .45));
  animation: navire-tangage 3.8s ease-in-out infinite;
}
.navire svg { width: 100%; height: 100%; display: block; }
.navire.arrive { animation: navire-arrive .8s cubic-bezier(.2, .7, .3, 1.1) both, navire-tangage 3.8s ease-in-out .8s infinite; }
@keyframes navire-tangage { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3.5deg) translateY(-3px); } }
@keyframes navire-arrive { from { opacity: 0; transform: translateY(72px) rotate(-7deg); } }

/* Brume de découverte : voile sur la zone pas encore débloquée (clics traversants). */
.brume {
  position: absolute; left: -28px; right: -28px; top: -12px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 46%, #9FB7D8 22%) 0%,
    color-mix(in srgb, var(--bg) 30%, #9FB7D8 14%) 62%,
    transparent 100%);
  opacity: .62;
}
.node.locked { filter: saturate(.55); }

/* Cérémonie de l'or : éclat + anneau sur le boss fraîchement conquis. */
.node.gold-done.ceremonie { animation: ceremonie-pop 1.1s cubic-bezier(.2, .7, .3, 1.35) both; }
.node.gold-done.ceremonie::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: inherit; border: 3px solid var(--gold);
  animation: ceremonie-ring 1.25s ease-out .15s both;
  pointer-events: none;
}
@keyframes ceremonie-pop { 0% { transform: scale(1); } 40% { transform: scale(1.24); } 100% { transform: scale(1); } }
@keyframes ceremonie-ring { from { opacity: .95; transform: scale(.8); } to { opacity: 0; transform: scale(2.2); } }

.node .done-ico { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .mer i, html:not([data-motion=vivant]):not([data-motion=doux]) .navire, html:not([data-motion=vivant]):not([data-motion=doux]) .node.gold-done.ceremonie, html:not([data-motion=vivant]):not([data-motion=doux]) .node.gold-done.ceremonie::after{ animation: none; }
}

/* Bandeau du haut */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar .stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 1rem;
}
.topbar .stat svg { width: 20px; height: 20px; }
.stat-streak { color: var(--gold); }
.stat-xp { color: var(--ink); }
.topbar .spacer { flex: 1; }
.topbar .avatar-btn {
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  background: var(--panel);
  flex: none;
  padding: 0;
}
.topbar .avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

/* Teasers des îles verrouillées (R23 : content-visibility) */
.teasers { padding: 26px 16px 8px; display: flex; flex-direction: column; gap: 20px; }
.teaser {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px dashed var(--line);
}
.teaser img { width: 84px; height: 64px; object-fit: contain; filter: grayscale(1) brightness(.7); opacity: .8; }
:root[data-theme="light"] .teaser img { filter: grayscale(1); }
.teaser .t-nom { font-weight: 800; font-size: 1.02rem; }
.teaser .t-soon {
  display: inline-block; margin-top: 4px;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-dim); text-transform: uppercase;
}
.teaser .t-lock { margin-left: auto; color: var(--lock); flex: none; }

/* Île active */
.ile-banniere {
  margin: 18px 16px 6px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--panel);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 0 var(--shadow);
  text-align: center;
}
.ile-banniere.gold { background: var(--panel); color: var(--ink); border-color: var(--accent); }
:root[data-theme="light"] .ile-banniere.gold { color: var(--ink); }
.ile-banniere h1 { font-size: 1.25rem; font-weight: 800; }
.ile-banniere p { font-size: .88rem; color: var(--ink-dim); margin-top: 2px; }
.ile-banniere.gold p { color: inherit; opacity: .85; }

/* Serpentin de noeuds */
.path-wrap { position: relative; margin: 4px auto 30px; width: min(100%, 420px); }
.path-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.path-svg path {
  fill: none;
  stroke: color-mix(in srgb, var(--gold) 55%, transparent);
  stroke-width: 5;
  stroke-dasharray: 1 14;
  stroke-linecap: round;
}
.node {
  position: absolute;
  width: 76px; height: 76px;
  margin-left: -38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.35rem;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 5px 0 var(--brand-edge), 0 8px 16px var(--shadow);
  transition: transform .08s ease;
  padding: 0;
}
.node:active { transform: scale(.94); }
.node .stars { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; }
.node .stars svg { width: 15px; height: 15px; }
.node.done { background: var(--ok); box-shadow: 0 5px 0 var(--ok-edge), 0 8px 16px var(--shadow); }
.node.locked { background: var(--lock); box-shadow: 0 5px 0 color-mix(in srgb, var(--lock) 60%, #000), 0 8px 16px var(--shadow); color: color-mix(in srgb, var(--ink) 45%, transparent); }
.node.current {
  background: var(--gold);
  color: var(--on-accent);
  box-shadow: 0 5px 0 var(--gold-deep), 0 8px 16px var(--shadow);
  animation: node-pulse 1.6s ease-in-out infinite;
}
:root[data-theme="light"] .node.current { color: #fff; }
@keyframes node-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 5px 0 var(--gold-deep), 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50%      { transform: scale(1.06); box-shadow: 0 5px 0 var(--gold-deep), 0 0 0 14px transparent; }
}
.node .lock-ico { width: 26px; height: 26px; opacity: .8; }

/* Noeud boss (Abordage) */
.node.boss {
  width: 92px; height: 92px; margin-left: -46px;
  border-radius: 26px;
  background: var(--err);
  box-shadow: 0 6px 0 var(--err-edge), 0 10px 18px var(--shadow);
}
.node.boss.current { background: var(--err); color: #fff; animation: node-pulse-boss 1.6s ease-in-out infinite; }
@keyframes node-pulse-boss {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 0 var(--err-edge), 0 0 0 0 color-mix(in srgb, var(--err) 55%, transparent); }
  50%      { transform: scale(1.06); box-shadow: 0 6px 0 var(--err-edge), 0 0 0 16px transparent; }
}
.node.boss.gold-done { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 0 var(--accent-edge), 0 10px 18px var(--shadow); }
.node.boss svg { width: 40px; height: 40px; }
.node-label {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-size: .78rem; font-weight: 800;
  color: var(--ink);
  text-shadow: 0 1px 3px var(--bg);
  white-space: nowrap;
  pointer-events: none;
}

/* Merlin qui accueille en bas de carte */
.carte-merlin { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px 110px; cursor: pointer; position: relative; z-index: 1; }
.carte-merlin img { width: 120px; height: auto; }
.carte-merlin img.merlin-hop { animation: merlin-hop .45s cubic-bezier(.2, .7, .3, 1.3); }
@keyframes merlin-hop { 35% { transform: translateY(-10px) rotate(-4deg); } 70% { transform: translateY(0) rotate(2deg); } }
.cm-vanne {
  max-width: 260px;
  background: var(--panel);
  border: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 14px;
  padding: 9px 13px;
  font-size: .92rem; font-weight: 700; text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.cm-vanne.pop { animation: vanne-pop .3s cubic-bezier(.2, .7, .3, 1.35) both; }
@keyframes vanne-pop { from { opacity: 0; transform: translateY(8px) scale(.92); } }

/* Voile d'embarquement : traversée entre deux îles (tap pour écourter). */
.embarque {
  position: absolute; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(120% 130% at 50% 0%, #1D4B59 0%, #0D2732 68%);
  animation: embarque-in .25s ease both;
}
.embarque svg { width: 84px; height: 84px; animation: embarque-vogue 1.3s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.embarque p { font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.embarque.leve { animation: embarque-out .4s ease both; pointer-events: none; }
@keyframes embarque-in { from { opacity: 0; } }
@keyframes embarque-out { to { opacity: 0; } }
@keyframes embarque-vogue { 0%, 100% { transform: translateX(-16px) rotate(-4deg); } 50% { transform: translateX(16px) rotate(4deg) translateY(-4px); } }

/* Taille du texte : petit sélecteur segmenté du profil. */
.seg-scale { display: inline-flex; gap: 6px; }
.seg-scale .seg {
  min-width: 44px; min-height: 36px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  font-weight: 800; font-size: .9rem;
}
.seg-scale .seg.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--panel-2)); }

/* Fil social : rangée d'actions factices (décor, non cliquable). */
.feed-actions {
  display: flex; justify-content: space-around;
  border-top: 1px solid var(--line);
  margin-top: 10px; padding-top: 8px;
  color: var(--ink-dim); font-size: .85rem; font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .carte-merlin img.merlin-hop, html:not([data-motion=vivant]):not([data-motion=doux]) .cm-vanne.pop, html:not([data-motion=vivant]):not([data-motion=doux]) .embarque svg{ animation: none; }
}

/* Noeud Patrouille flottant */
.patrol-fab {
  position: absolute;
  right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 12;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 800;
  box-shadow: 0 4px 0 var(--gold-deep), 0 10px 18px var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
:root[data-theme="light"] .patrol-fab { color: #fff; }
.patrol-fab:active { transform: translateY(4px); box-shadow: 0 0 0 var(--gold-deep); transition-duration: .034s; }
.patrol-fab svg { width: 22px; height: 22px; }
.patrol-fab .fab-done { font-size: .8rem; font-weight: 800; opacity: .75; }

/* ==========================================================================
   2. LE LECTEUR DE LEÇON
   ========================================================================== */
.lecon-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.lecon-head .close-btn {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--ink-dim);
}
.lecon-head .close-btn:active { background: var(--panel-2); }
.lecon-head .close-btn svg { width: 22px; height: 22px; }

/* Barre segmentée */
.segbar { flex: 1; display: flex; gap: 4px; height: 12px; }
.segbar .seg {
  flex: 1; border-radius: 999px;
  background: var(--panel-3);
  position: relative; overflow: hidden;
}
.segbar .seg > i {
  position: absolute; inset: 0;
  background: var(--gold); border-radius: inherit;
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);   /* R9 */
}
.segbar .seg.done > i { transform: translateX(0); }

/* Combo */
.combo {
  flex: none; min-width: 44px;
  text-align: center;
  font-weight: 800; font-size: .95rem;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity .2s ease;
}
.combo.show { opacity: 1; }
.combo.hot { color: var(--gold); }
.combo.fire { color: var(--gold); text-shadow: 0 0 12px color-mix(in srgb, var(--gold) 75%, transparent); }
.combo.bump { animation: combo-bump .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes combo-bump { 45% { transform: scale(1.45); } }

/* Corps d'écran d'exercice */
/* Décision #3 : une URL en gras débordait du bloc de lecture, un mot
   insécable doit pouvoir se couper. */
.lecon-body { overflow-wrap: anywhere; }
.lecon-body {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 10px 18px 20px;
  display: flex; flex-direction: column;
}
/* Décision #5 : un écran court se colle en haut et laisse un demi-écran vide
   avant le bouton. Les types d'écrans courts relevés par le balayage se
   centrent verticalement ; « safe » garantit qu'un contenu plus long que le
   cadre reste accessible par le haut, comme avant. */
.lecon-body[data-type="feed"],
.lecon-body[data-type="bet"],
.lecon-body[data-type="order"],
.lecon-body[data-type="dictee"],
.lecon-body[data-type="simurl"],
.lecon-body[data-type="pairs"],
.lecon-body.lecon-body--centre { justify-content: safe center; }
.consigne { font-size: .95rem; font-weight: 800; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
/* Décision #4 : au-delà de ~90 caractères, six lignes de capitales fatiguent,
   la consigne repasse en casse normale (classe posée au rendu). */
.consigne.consigne--longue { text-transform: none; letter-spacing: 0; font-weight: 700; }
.question { font-size: 1.22rem; font-weight: 800; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 8px; }
.question .consigne-ico { margin-top: 4px; }

.lecon-foot {
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
/* #79 : issue toujours visible. Le X de l'en-tête porte son mot sur grand écran ;
   le pied montre « Retour à la carte » quand aucune action principale n'existe. */
.lecon-head .close-btn { width: auto; min-width: 44px; padding: 0 10px 0 8px; gap: 6px; }
.lecon-head .close-btn .close-label { display: none; font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
@media (min-width: 720px) { .lecon-head .close-btn .close-label { display: inline; } }
.lecon-foot .foot-btn[hidden], .lecon-foot .foot-exit[hidden] { display: none; }
/* #78 : illustration de lecture agrandissable (même visionneuse que les planches). */
.lecture-zoom { display: block; position: relative; width: 100%; margin: 0 0 13px; padding: 0; border: 0; border-radius: 14px; background: none; cursor: zoom-in; line-height: 0; }
.lecture-zoom .lecture-img { margin: 0; }
.lecture-zoom > span { position: absolute; right: 8px; bottom: 8px; padding: 7px 9px; border: 1px solid #beded580; border-radius: 7px; background: #103442eb; color: #eff9f5; font: 650 .66rem/1.25 Inter, system-ui, sans-serif; }
.lecture-zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ind-zone.revele { outline: 2px dashed currentColor; outline-offset: 2px; }

/* Intro */
.ecran-intro { justify-content: center; align-items: center; text-align: center; gap: 6px; }
.ecran-intro img { width: 150px; height: auto; margin-bottom: 14px; }
.ecran-intro h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; }
.ecran-intro p { font-size: 1.1rem; max-width: 32ch; color: var(--ink); }

/* Vidéo du chapitre : façade 16/9, play or, placeholder « en tournage » */
.video-titre { font-size: 1.28rem; font-weight: 800; margin: 0 0 14px; }
.video-cadre {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  flex: none;
  border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 150% at 18% 0%, #21525F 0%, #0D2732 64%);
  border: 2px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-cadre--soon .video-thumb { filter: saturate(.85) brightness(.82); }
.video-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 26, .04) 42%, rgba(10, 15, 26, .58)); pointer-events: none; }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  transition: transform .15s ease;
}
.video-play::before {
  content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--on-accent);
}
.video-cadre:hover .video-play, .video-cadre:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-duree {
  position: absolute; right: 10px; bottom: 10px;
  font-size: .8rem; font-weight: 800; color: #fff;
  background: rgba(10, 15, 26, .74);
  border-radius: 8px; padding: 3px 8px;
}
.video-soon-badge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  font-size: .85rem; font-weight: 800; color: var(--gold);
  background: rgba(10, 15, 26, .8);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px; padding: 7px 13px;
}
.video-soon-badge svg { width: 15px; height: 15px; flex: none; }
.video-cadre.no-thumb .video-thumb { display: none; }
.video-pulse .video-soon-badge { animation: soon-pulse .5s ease 2; }
@keyframes soon-pulse { 50% { transform: translateX(-50%) scale(1.07); } }
.video-playing { cursor: default; }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-note { margin-top: 12px; color: var(--ink-dim); font-size: .95rem; line-height: 1.5; }

/* Capsule facultative dès l'entrée du chapitre ; aucune hauteur fixe sur téléphone. */
.lecon-body.has-chapter-capsule { justify-content: flex-start; }
.chapter-capsule { width: 100%; max-width: 680px; flex: none; margin: 0 auto 20px; text-align: left; }
.chapter-capsule h2 { font-size: clamp(1.05rem, 2.5vw, 1.3rem); margin: 6px 0 12px; }
.chapter-capsule p { max-width: none; font-size: .88rem; line-height: 1.5; }
.chapter-capsule .chapter-capsule-label { color: var(--ink-dim); margin: 0; }
.chapter-capsule .video-thumb { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.chapter-capsule .video-cadre { display: block; }
.chapter-capsule .video-cadre:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.chapter-capsule .video-play { width: 56px; height: 56px; top: 42%; }
.video-load-label { position: absolute; bottom: 12px; left: 10px; right: 10px; text-align: center; color: #fff; font-size: .95rem; font-weight: 800; text-shadow: 0 1px 6px #0d2732; }
.chapter-capsule .chapter-capsule-consent { margin: 10px 0 0; color: var(--ink-dim); }

/* Lecture : le cours à lire, typo posée + encadré « À retenir » */
.lecture-titre { font-size: 1.28rem; font-weight: 800; margin: 0 0 12px; }
.lecture-p { font-size: 1.03rem; line-height: 1.68; color: var(--ink); margin-bottom: 13px; }
.lecture-p strong, .lecture-points strong, .lecture-retenir strong { color: var(--gold); font-weight: 800; }
.lecture-points { margin: 0 0 13px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lecture-points li { position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.55; }
.lecture-points li::before {
  content: ""; position: absolute; left: 4px; top: .56em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
}
.lecture-retenir {
  margin-top: 2px;
  border: 2px solid color-mix(in srgb, var(--gold) 52%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--panel-2));
  border-radius: 14px;
  padding: 12px 14px 13px;
}
.retenir-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--gold);
  margin-bottom: 7px;
}
.retenir-tag svg { width: 14px; height: 14px; }
.lecture-retenir p { font-size: 1rem; line-height: 1.58; }

/* QCM / bet : choix empilés */
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice {
  --edge: 3px;
  text-align: left;
  padding: 14px 16px;
  min-height: 56px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  box-shadow: 0 var(--edge) 0 var(--line);
  font-weight: 700; font-size: 1.05rem;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
  width: 100%;
}
.choice:active { transform: translateY(var(--edge)); box-shadow: none; }
.choice.selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--panel-2)); }
.choice.reveal-ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--panel-2)); }
.choice.reveal-err { border-color: var(--err); background: color-mix(in srgb, var(--err) 16%, var(--panel-2)); }
.choice:disabled { cursor: default; opacity: .9; }

/* Gap : phrase à trou */
.gap-phrase { font-size: 1.25rem; font-weight: 700; margin-bottom: 22px; line-height: 1.7; }
.gap-slot {
  display: inline-block; min-width: 110px;
  border-bottom: 3px solid var(--gold);
  text-align: center; font-weight: 800;
  padding: 0 8px;
  color: var(--gold);
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  --edge: 3px;
  padding: 10px 18px;
  min-height: 48px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  box-shadow: 0 var(--edge) 0 var(--line);
  font-weight: 800; font-size: 1rem;
  transition: transform .08s ease, opacity .15s ease, border-color .15s ease;
}
.chip:active { transform: translateY(var(--edge)); box-shadow: none; }
.chip.selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--panel-2)); }
.chip.used { opacity: .35; pointer-events: none; }
.chip.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--panel-2)); pointer-events: none; }

/* Shake d'erreur (R13) */
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 60% { transform: translateX(-6px); }
  40%, 70% { transform: translateX(6px); }
  50%      { transform: translateX(-4px); }
}
.is-wrong { animation: shake .4s cubic-bezier(.36, .07, .19, .97) both; border-color: var(--err) !important; }

/* Pop de réussite (R14) */
@keyframes pop { 45% { transform: scale(1.14); } }
.is-right { animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }

/* #14 : halo or sur la bonne réponse, assombrissement de la mauvaise sélection. */
.glow-right {
  animation: glow-in .4s ease-out both;
  box-shadow: 0 0 0 3px var(--gold), 0 0 24px color-mix(in srgb, var(--gold) 65%, transparent);
}
@keyframes glow-in { from { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; } }
.dim-wrong { filter: brightness(.6); transition: filter .3s ease; }

/* Pairs */
.pairs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Décision #2 : un libellé long s'enroule au lieu de pousser le bouton hors
   du cadre, et passe en corps réduit (classe posée au rendu). */
.pair-btn { overflow-wrap: anywhere; }
.pair-btn.pair-btn--long { font-size: .78rem; line-height: 1.3; }
.pair-btn {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
  font-weight: 700; font-size: .95rem;
  transition: transform .08s ease, opacity .2s ease, border-color .15s ease;
}
.pair-btn:active { transform: translateY(3px); box-shadow: none; }
.pair-btn.selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--panel-2)); }
.pair-btn.matched { border-color: var(--ok); opacity: .35; pointer-events: none; animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
/* #20 : la paire juste flashe or ensemble avant de se griser. */
.pair-btn.pair-flash {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 32%, var(--panel-2));
  animation: pair-flash .25s ease-out both;
}
@keyframes pair-flash { 0% { transform: scale(1); } 40%, 100% { transform: scale(1.04); } }

/* Order */
.order-target { display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; padding: 10px; border-radius: 14px; border: 2px dashed var(--line); margin-bottom: 18px; }
.order-target .chip { pointer-events: none; border-color: var(--ok); }
/* #19 : maillon or qui se tisse entre deux chips posées. */
.chain-link {
  align-self: center;
  width: 16px; height: 3px;
  margin: 0 -3px;
  border-radius: 2px;
  background: var(--gold);
  transform-origin: left center;
  animation: link-in .2s ease-out both;
}
@keyframes link-in { from { transform: scaleX(0); } }
.order-target.target-shake { animation: shake .3s cubic-bezier(.36, .07, .19, .97) both; }

/* Swipe (R25) */
.swipe-zone { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.swipe-card {
  position: absolute;
  width: min(86%, 340px);
  min-height: 220px;
  padding: 26px 22px;
  border-radius: 22px;
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 0 10px 24px var(--shadow);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 1.15rem; font-weight: 700;
  touch-action: pan-y;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.swipe-card.dragging { transition: none; cursor: grabbing; }
/* #12 : vrais tampons inclinés, fond translucide de leur couleur. */
.swipe-hint {
  position: absolute; top: 14px;
  padding: 7px 16px; border-radius: 10px;
  font-weight: 900; font-size: 1.05rem; letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0; pointer-events: none;
  border: 3px solid;
  transform: rotate(-12deg);
}
.swipe-hint.oui { right: 10px; color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.swipe-hint.non { left: 10px; color: var(--err); border-color: var(--err); background: color-mix(in srgb, var(--err) 16%, transparent); }
/* Coup de tampon au franchissement du seuil de décision. */
.swipe-hint.stamp-hit { animation: stamp-hit .12s ease-out both; }
@keyframes stamp-hit {
  from { transform: rotate(-12deg) scale(1.25); }
  to   { transform: rotate(-12deg) scale(1); }
}
.swipe-btns { display: flex; gap: 12px; margin-top: 10px; }
.swipe-btns .btn { flex: 1; min-width: 0; padding-left: 12px; padding-right: 12px; }
.swipe-legende { text-align: center; color: var(--ink-dim); font-size: .85rem; font-weight: 700; margin-top: 10px; }

/* Sort2 */
.sort-zone { flex: 1; display: flex; align-items: center; justify-content: center; }
.sort-card {
  width: min(88%, 340px);
  min-height: 170px;
  padding: 24px 20px;
  border-radius: 20px;
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 0 8px 20px var(--shadow);
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 1.12rem; font-weight: 700;
}
.sort-card.pop-in { animation: sort-in .3s cubic-bezier(.2, .7, .3, 1.2) both; }
@keyframes sort-in { from { transform: translateY(24px) scale(.92); opacity: 0; } }
.sort-btns { display: flex; gap: 12px; margin-top: 14px; }
.sort-btns .btn { flex: 1; min-height: 62px; font-size: .98rem; white-space: normal; overflow-wrap: anywhere; }
/* Décision #1 (balayage 25/08) : sous 420 px, deux libellés longs côte à côte
   sortaient de l'écran (« Désinformation » coupé de 25 px). */
@media (max-width: 420px) {
  .sort-btns { flex-direction: column; gap: 8px; }
  .sort-btns .btn { min-height: 54px; }
}

/* Flip 3D */
/* Une seule colonne sur téléphone. À deux colonnes, une carte fait 181 px de
   large : un verso de 200 caractères y tient sur onze lignes, la carte grimpe
   à 330 px, et comme les deux faces partagent la même case de grille, le
   recto, qui ne porte que trois mots, était étiré à la même hauteur. Pleine
   largeur, le même texte tient sur cinq lignes. */
.flip-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) {
  .flip-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
}
/* display:block défait le centrage vertical que les navigateurs imposent au
   contenu d'un <button> ; height:100% fait remplir au dos toute la hauteur de
   la rangée, sinon deux cartes voisines aux versos inégaux flottaient à des
   hauteurs différentes. */
.flip-card {
  display: block; height: 100%;
  perspective: 900px; min-height: 116px;
  background: none; padding: 0; border: 0; border-radius: 16px;
}
.flip-inner {
  /* Grille 1x1 : les deux faces empilées SANS position absolue, la carte
     prend la hauteur de la plus grande face (un span inline s'effondrait :
     faces sans fond, texte du verso illisible, surtout en WebView). */
  position: relative;
  display: grid;
  width: 100%; height: 100%; min-height: 116px;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
/* #17 : l'ombre portée suit la rotation, plus large à mi-flip (sur le bouton, qui reste plat). */
.flip-card.flipped { animation: flip-shadow .5s ease both; }
@keyframes flip-shadow {
  0%, 100% { box-shadow: 0 3px 6px var(--shadow); }
  50%      { box-shadow: 0 16px 32px var(--shadow); }
}
.flip-face {
  grid-area: 1 / 1;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; text-align: center;
  /* translateZ : sépare les plans des deux faces, sinon certaines WebView
     Android peignent le verso par-dessus le recto (z-fighting). */
  transform: translateZ(1px);
}
/* #17 : dos illustré, ancre or entourée de 4 losanges sur fond marine (motif répété). */
.flip-face.recto {
  background-color: var(--brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><circle cx='12' cy='5' r='2.6'/><path d='M12 7.6V21M12 21c-4.8 0-8.2-3.2-8.7-7.2H6M12 21c4.8 0 8.2-3.2 8.7-7.2H18'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>");
  background-size: 96px 96px;
  background-position: center;
  color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: 0 4px 0 var(--brand-edge);
  text-shadow: 0 1px 4px rgba(10, 15, 26, .55);
}
/* Le verso est un paragraphe, pas une étiquette : aligné à gauche et aéré, il
   se lit ; centré, une définition de deux cents caractères se déchiffre. */
.flip-face.verso {
  background: var(--panel-2); border: 2px solid var(--gold);
  transform: rotateY(180deg) translateZ(1px);
  font-size: .92rem; font-weight: 600; line-height: 1.45;
  text-align: left; align-items: center; padding: 14px 16px;
}

/* Feed */
.feed-post {
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px var(--shadow);
}
.feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feed-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand), var(--panel-3));
  color: #fff; font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.feed-auteur { font-weight: 800; }
.feed-source { font-size: .8rem; color: var(--ink-dim); }
.feed-texte { font-size: 1.05rem; margin-bottom: 12px; }
.feed-stats { display: flex; gap: 16px; font-size: .85rem; color: var(--ink-dim); font-weight: 700; border-top: 1px solid var(--line); padding-top: 10px; }
.verdict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Bet : révélation */
.bet-reveal { text-align: center; padding: 10px 0; }
.bet-reveal .bet-big {
  font-size: 2.4rem; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
  animation: pop .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* #13 : jauge de pari à aiguille (rail, crans, curseur draggable). */
.bet-gauge { margin-top: 8px; padding: 12px 8px 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); }
.bet-value {
  min-height: 60px;
  display: flex; align-items: center; justify-content: center;
  padding-inline: 10px;
  font-size: clamp(1.05rem, 4vw, 1.65rem); font-weight: 750; line-height: 1.35; color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: center;
  opacity: 0; transform: translateY(3px);
  transition: opacity .16s ease, transform .16s ease;
}
.bet-value.show { opacity: 1; transform: scale(1); }
.bet-value:not(.show) { opacity: 1; transform: none; font-size: .88rem; font-weight: 500; color: var(--ink-dim); }
.bet-rail {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 140px;
  margin-top: 6px;
}
.bet-track {
  position: absolute; top: 46px;
  height: 6px; border-radius: 999px;
  background: var(--panel-3); border: 1px solid var(--accent-edge);
}
.bet-cran {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 76px 6px 14px;
  border-radius: 12px;
  touch-action: pan-y;
}
.bet-cran:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bet-cran:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.bet-tick {
  position: absolute; top: 40px; left: 50%;
  margin-left: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--panel-2);
  border: 3px solid var(--ink-dim);
  transition: border-color .15s ease, background .15s ease;
}
.bet-lab {
  display: block;
  font-size: .88rem; font-weight: 650; line-height: 1.4;
  color: var(--ink-dim);
  text-align: center;
  transition: color .15s ease;
}
.bet-cran[aria-checked="true"] .bet-tick { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, var(--panel-2)); }
.bet-cran[aria-checked="true"] .bet-lab { color: var(--ink); }
.bet-cran[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bet-cran.ok .bet-tick { border-color: var(--accent); background: var(--accent); }
.bet-cran:disabled { cursor: default; }
.bet-cursor {
  position: absolute; top: 14px; left: -24px;
  width: 48px; height: 48px;
  display: flex; flex-direction: column; align-items: center;
  touch-action: none;
  cursor: grab;
  z-index: 2;
  transition: transform .16s ease-out, opacity .16s ease;
}
.bet-cursor.dragging { transition: none; cursor: grabbing; }
.bet-cursor.to-answer { transition: transform .4s cubic-bezier(.2, 0, 0, 1); }
.bet-cursor.idle { opacity: .7; }
.bet-needle {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid var(--accent);
  margin-bottom: 4px;
  transform-origin: 50% 100%;
  animation: none;
}
@keyframes needle-tremble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.bet-cursor.settled .bet-needle { animation: none; }
.bet-knob {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--accent-edge);
  box-shadow: 0 2px 6px var(--shadow);
}

/* ---------- Bandeau verdict ---------- */
.verdict {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.2, 0, 0, 1);
  box-shadow: 0 -8px 30px var(--shadow);
}
.verdict.open { transform: translateY(0); }
.verdict.v-ok { background: var(--banner-ok); }
.verdict.v-err { background: var(--banner-err); }
.verdict.v-neutral { background: var(--panel); border-top: 2px solid var(--gold); }
.verdict-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.verdict-merlin { width: 74px; height: 74px; object-fit: contain; flex: none; }
.verdict-titre { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.v-ok .verdict-titre { color: var(--ok); }
:root[data-theme="light"] .v-ok .verdict-titre { color: var(--ok-edge); }
.v-err .verdict-titre { color: #E58B84; }
:root[data-theme="light"] .v-err .verdict-titre { color: var(--err-edge); }
.verdict-titre svg { width: 24px; height: 24px; }
.verdict-explique { font-size: .98rem; color: var(--ink); }
.check-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.verdict.open .check-svg path { animation: draw .35s ease-out .1s forwards; }   /* R14 */
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Fin de leçon séquencée ---------- */
/* Centré quand ça tient (marges auto), défilable quand le débrief s'ouvre. */
.fin { justify-content: flex-start; align-items: center; text-align: center; padding: 24px; gap: 14px; overflow-y: auto; }
.fin > :first-child { margin-top: auto; }
.fin > :last-child { margin-bottom: auto; }
.fin img.fin-merlin { width: 160px; height: auto; }
.fin h2 { font-size: 1.5rem; font-weight: 800; }
.fin .fin-sub { color: var(--ink-dim); font-weight: 700; }
.fin-cards { display: flex; flex-direction: column; gap: 12px; width: min(100%, 340px); min-height: 210px; }
.fin-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--panel);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 0 var(--shadow);
  animation: card-in .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes card-in { from { transform: translateY(26px) scale(.9); opacity: 0; } }
.fin-card .fc-label { font-weight: 800; color: var(--ink-dim); font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; }
.fin-card .fc-value { font-weight: 800; font-size: 1.5rem; color: var(--gold); font-variant-numeric: tabular-nums; }  /* R11 */
.fin-stars { display: flex; gap: 10px; justify-content: center; }
.fin-stars svg { width: 48px; height: 48px; }
.fin-tap-hint { color: var(--ink-dim); font-size: .9rem; font-weight: 700; animation: hint-blink 1.6s ease-in-out infinite; }
@keyframes hint-blink { 50% { opacity: .35; } }
.star-gold { color: var(--brass); }
.star-off { color: var(--lock); }
/* #21 : chaque étoile gagnée claque comme un tampon ; les autres restent en contour éteint. */
.fin-star { display: inline-flex; opacity: 0; }
.fin-star.lit { opacity: 1; }
.fin-star.off { transition: opacity .3s ease; }
.fin-star.off.lit { opacity: .55; }
.fin-star.stamp { animation: star-stamp .25s cubic-bezier(.2, .7, .3, 1.2) both; }
@keyframes star-stamp {
  from { opacity: 0; transform: scale(1.6) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- Patrouille ---------- */
.patrol-grid { display: grid; grid-template-columns: repeat(4, 44px); gap: 10px; justify-content: center; margin: 14px 0; }
.patrol-sq { width: 44px; height: 44px; border-radius: 10px; background: var(--panel-3); display: flex; align-items: center; justify-content: center; }
.patrol-sq.ok { background: var(--ok); color: #fff; }
.patrol-sq.err { background: var(--err); color: #fff; }
.patrol-sq svg { width: 20px; height: 20px; }

/* ---------- Profil ---------- */
.profil-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 18px calc(24px + env(safe-area-inset-bottom)); }
.view-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.view-head .back-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--ink-dim);
}
.view-head .back-btn:active { background: var(--panel-2); }
.view-head .back-btn svg { width: 22px; height: 22px; }
.view-head h1 { font-size: 1.2rem; font-weight: 800; }
.profil-hero { text-align: center; padding: 8px 0 18px; }
.profil-hero .avatar-big {
  width: 128px; height: 128px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 10px;
  border: 4px solid var(--gold);
  background: var(--panel);
}
.profil-hero h2 { font-size: 1.3rem; font-weight: 800; }
.profil-hero .grade-sub { color: var(--ink-dim); font-weight: 700; font-size: .9rem; }
.levelbar { height: 14px; border-radius: 999px; background: var(--panel-3); overflow: hidden; position: relative; margin: 12px auto 6px; max-width: 300px; }
.levelbar > i {
  position: absolute; inset: 0;
  background: var(--gold); border-radius: inherit;
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);   /* R9 */
}
.levelbar-info { font-size: .82rem; color: var(--ink-dim); font-weight: 700; }
.profil-hero :is(.rank-history, .rank-retained, .rank-scope) {
  max-width: 38rem; margin: .7rem auto; font-size: .82rem; line-height: 1.45;
  color: var(--ink-dim); overflow-wrap: anywhere;
}
.profil-hero .rank-retained { color: var(--ink); font-weight: 700; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 22px; }
.stat-card {
  padding: 14px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
}
.stat-card .sc-value { font-size: 1.5rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.stat-card .sc-value svg { width: 20px; height: 20px; vertical-align: -2px; }
.stat-card .sc-label { font-size: .8rem; font-weight: 700; color: var(--ink-dim); margin-top: 2px; }
.stat-card .sc-note { font-size: .7rem; color: var(--ink-dim); margin-top: 4px; }

.reglages { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.reglages h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); margin: 8px 0; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.switch {
  position: relative;
  width: 56px; height: 32px; flex: none;
  border-radius: 999px;
  background: var(--panel-3);
  transition: background .2s ease;
  padding: 0;
}
.switch::after {
  content: "";
  position: absolute; top: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-dim);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s ease;
}
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(24px); background: #fff; }

.lien-formation {
  display: block; text-align: center;
  color: var(--ink-dim); font-size: .9rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 12px;
}
.lien-formation:active { color: var(--gold); }

/* ---------- Boss : compte à rebours 3-2-1 (#23) ---------- */
.boss-count {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.bc-num {
  font-size: 7rem; font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 30px var(--shadow);
}
.bc-num.bc-pop { animation: bc-pop .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes bc-pop { from { transform: scale(1.4); opacity: 0; } }

/* ---------- Fanion sans-faute (#24), à droite de la barre de progression ---------- */
.fanion {
  flex: none;
  width: 22px; height: 22px;
  color: var(--gold);
  transform-origin: 30% 90%;
  animation: fanion-float 2.2s ease-in-out infinite;
  transition: transform .4s ease-in, opacity .4s ease-in;
}
.fanion svg { width: 22px; height: 22px; display: block; }
@keyframes fanion-float { 50% { transform: rotate(5deg); } }
.fanion.down {
  animation: none;
  transform: rotate(40deg) translateY(8px);
  opacity: .25;
}

/* ---------- Débrief du boss (#25) : revoir les questions ratées ---------- */
.debrief { width: min(100%, 340px); }
.debrief-toggle {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  font-weight: 800; font-size: .95rem;
  color: var(--ink);
}
.debrief-toggle .db-chev { width: 18px; height: 18px; flex: none; color: var(--ink-dim); transform: rotate(-90deg); transition: transform .2s ease; }
.debrief-toggle.open .db-chev { transform: rotate(90deg); }
.debrief-body {
  margin-top: 10px;
  max-height: 34vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.debrief-body[hidden] { display: none; }
.debrief-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.db-q { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.db-bonne { display: flex; align-items: flex-start; gap: 6px; color: var(--ok); font-weight: 800; font-size: .95rem; }
:root[data-theme="light"] .db-bonne { color: var(--ok-edge); }
.db-bonne svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.db-explique { margin-top: 6px; font-size: .88rem; color: var(--ink-dim); }
.debrief-vide { text-align: center; color: var(--ink-dim); font-weight: 700; padding: 8px 4px; }

/* ---------- Combo incarné (#10) : Merlin à 5, étincelles à 10 ---------- */
.combo-merlin {
  position: absolute;
  right: 10px;
  bottom: calc(120px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  pointer-events: none;
  animation: cm-in .3s cubic-bezier(.2, .7, .3, 1.2) both;
}
.combo-merlin img { width: 64px; height: 64px; object-fit: contain; }
.combo-merlin .cm-bulle {
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 12px 12px 2px 12px;
  padding: 6px 10px;
  font-size: .82rem; font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 4px 10px var(--shadow);
}
@keyframes cm-in { from { transform: translateX(120%); opacity: 0; } }
.combo-merlin.out { animation: cm-out .35s ease-in both; }
@keyframes cm-out { to { transform: translateX(120%); opacity: 0; } }

.spark-rain { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.spark-rain i {
  position: absolute; top: -12px;
  width: 5px; height: 9px;
  border-radius: 2px;
  background: var(--gold);
  animation: spark-fall .9s ease-in both;
}
@keyframes spark-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(var(--fall, 70vh)) rotate(220deg); opacity: 0; }
}

/* ---------- Boss : écran d'échec / réussite ---------- */
.boss-intro-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent); font-weight: 800; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase;
}
:root[data-theme="light"] .boss-intro-badge { color: var(--accent); }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; bottom: 96px;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: .9rem;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 50;
  pointer-events: none;
  max-width: 90%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Accessibilité / divers ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- prefers-reduced-motion (R21) ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .enter-right, html:not([data-motion=vivant]):not([data-motion=doux]) .enter-left, html:not([data-motion=vivant]):not([data-motion=doux]) .exit-left, html:not([data-motion=vivant]):not([data-motion=doux]) .exit-right{
    animation-name: fade-only; animation-duration: .15s;
  }
  @keyframes fade-only { from { opacity: 0; } }
  html:not([data-motion=vivant]):not([data-motion=doux]) .exit-left, html:not([data-motion=vivant]):not([data-motion=doux]) .exit-right{ animation-name: fade-out-only; }
  @keyframes fade-out-only { to { opacity: 0; } }
  html:not([data-motion=vivant]):not([data-motion=doux]) .node.current, html:not([data-motion=vivant]):not([data-motion=doux]) .node.boss.current{ animation: none; box-shadow: 0 5px 0 var(--gold-deep), 0 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent); }
  html:not([data-motion=vivant]):not([data-motion=doux]) .fin-tap-hint{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .is-wrong{ animation: none; outline: 3px solid var(--err); }
  html:not([data-motion=vivant]):not([data-motion=doux]) .is-right, html:not([data-motion=vivant]):not([data-motion=doux]) .combo.bump, html:not([data-motion=vivant]):not([data-motion=doux]) .fin-card{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .swipe-card, html:not([data-motion=vivant]):not([data-motion=doux]) .segbar .seg > i, html:not([data-motion=vivant]):not([data-motion=doux]) .levelbar > i, html:not([data-motion=vivant]):not([data-motion=doux]) .flip-inner{ transition-duration: .01s; }
  /* Nouvelles animations game feel (#10, #12, #13, #14, #17, #19, #20, #21, #24) */
  html:not([data-motion=vivant]):not([data-motion=doux]) .swipe-hint.stamp-hit{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .glow-right{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .dim-wrong{ transition: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .bet-needle{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .bet-cursor, html:not([data-motion=vivant]):not([data-motion=doux]) .bet-value{ transition-duration: .01s; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .flip-card.flipped{ animation: none; box-shadow: 0 3px 6px var(--shadow); }
  html:not([data-motion=vivant]):not([data-motion=doux]) .chain-link{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .order-target.target-shake{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .pair-btn.pair-flash{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .fin-star{ opacity: 1; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .fin-star.stamp{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .fin-star.off{ transition: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .fanion{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .fanion.down{ transition: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .spark-rain, html:not([data-motion=vivant]):not([data-motion=doux]) .combo-merlin{ display: none; }
}

/* ======================================================================
   MULTI-ÎLES, MODE TEST ET MODE BUREAU/PAYSAGE (26/07/2026)
   ====================================================================== */

/* Noeud « open » (mode test : jouable sans avoir fini les précédents) :
   même famille visuelle que current, sans le pulse ni l'or plein. */
.node.open {
  background: var(--card);
  color: var(--gold);
  border: 2.5px solid var(--gold);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--gold) 45%, #000), 0 8px 16px var(--shadow);
}

/* Badge TEST dans la barre du haut. */
.stat-test {
  font-family: ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--ink);
  background: var(--panel-3);
  border-radius: 8px;
  padding: 4px 8px;
}

/* Vignette d'île active : embarquable. */
button.teaser--open {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.teaser--open img { filter: none; opacity: 1; }
.teaser--open .t-go {
  display: inline-block;
  margin-top: 3px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.teaser--open .t-arrow { margin-left: auto; color: var(--gold); flex: none; }
.teaser--open:active { transform: scale(.985); }
.teaser--gold { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--card)); }

/* ---------- Bureau : l'app dans son écrin, centrée sur un océan ---------- */
@media (min-width: 768px) {
  body {
    background:
      radial-gradient(1200px 700px at 50% -10%, #1D4B59 0%, transparent 60%),
      radial-gradient(900px 500px at 85% 110%, #153D49 0%, transparent 55%),
      #0D2732;
  }
  #app {
    width: min(540px, 100vw);
    height: min(100%, 980px);
    inset: 0;
    margin: auto;
    border-radius: 26px;
    overflow: hidden;
    box-shadow:
      0 40px 90px rgba(0, 0, 0, .55),
      0 0 0 1px rgba(255, 255, 255, .07);
  }
}
@media (min-width: 1280px) {
  #app { width: 580px; }
}

/* ---------- Paysage bas (téléphone couché) : tout doit tenir ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .topbar { padding-top: 8px; padding-bottom: 8px; }
  .ecran-intro img { width: 88px; height: 88px; }
  .fin-merlin { width: 84px; }
  .verdict-merlin { width: 48px; height: 48px; }
  .ile-banniere h1 { font-size: 1.15rem; }
  .question { font-size: 1.02rem; }
  .choice { padding-top: 10px; padding-bottom: 10px; }
  .swipe-card { min-height: 130px; }
}

/* ==== Vague fun 3, paquet lecteur ==== */
/* #16 : la houle, micro-tangage a l'arrivee de chaque ecran. */
.lecon-body.houle-in { animation: houle-in .3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes houle-in { from { opacity: .25; transform: translateX(26px) rotate(.4deg); } 70% { transform: translateX(-2px) rotate(-.18deg); } to { transform: none; } }

/* #18 : le segment de progression en cours ondule. */
.seg { position: relative; overflow: hidden; }
.seg.cur i { position: absolute; inset: 0; display: block;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent), transparent);
  background-size: 200% 100%;
  animation: seg-vague 2s linear infinite; }
@keyframes seg-vague { to { background-position: -200% 0; } }

/* #19 : etincelles au scellement des etoiles. */
.fin-star { position: relative; }
.star-spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%; pointer-events: none;
  animation: star-spark .55s ease-out both; }
@keyframes star-spark { from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(calc(-50% + var(--sx, 20px)), calc(-50% + var(--sy, -30px))) scale(.4); } }

/* #20 : Merlin du verdict entre avec un rebond. */
.verdict.open .verdict-merlin { animation: merlin-pop .4s cubic-bezier(.2, .7, .3, 1.4) both; }
@keyframes merlin-pop { from { opacity: 0; transform: translateY(14px) scale(.85) rotate(-5deg); } }

/* #21 : la tempete de l'Abordage (assombrissement progressif + eclair). */
[data-view="lecon"][data-orage] .lecon-body { transition: filter .8s ease; }
[data-view="lecon"][data-orage="1"] .lecon-body { filter: brightness(.96); }
[data-view="lecon"][data-orage="2"] .lecon-body { filter: brightness(.90); }
[data-view="lecon"][data-orage="3"] .lecon-body { filter: brightness(.84) saturate(.92); }
[data-view="lecon"][data-orage="4"] .lecon-body { filter: brightness(.78) saturate(.85); }
.eclair { position: absolute; inset: 0; z-index: 70; pointer-events: none;
  background: rgba(233, 240, 255, .85); animation: eclair .24s ease-out both; }
@keyframes eclair { 0% { opacity: 0; } 12% { opacity: .8; } 24% { opacity: .12; } 38% { opacity: .5; } 100% { opacity: 0; } }

/* #05 : le prochain grade en silhouette doree. */
.next-grade { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.next-grade img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  filter: brightness(0) sepia(1) saturate(3.2) hue-rotate(8deg) opacity(.55); }
.next-grade img.rank-portrait-opaque { filter: none; }
.next-grade span { font-size: .88rem; color: var(--ink-dim); }
.next-grade b { color: var(--gold); }

/* #09 : icone de la mecanique devant la consigne. */
.consigne { display: flex; align-items: center; gap: 8px; }
.consigne-ico { width: 17px; height: 17px; flex: none; color: var(--gold); }

/* #07 : grain de parchemin discret sous les lectures. */
.lecon-body[data-type="lecture"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/></svg>");
}

/* #06 : dos de cartes themades par ile (l'ancre reste le defaut, ile 1). */
.lecon-body[data-ile="ile2"] .flip-face.recto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><path d='M3 14q3-5 7-2t7-2q3-2 4 1M3 19q3-5 7-2t7-2q3-2 4 1'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>"); }
.lecon-body[data-ile="ile3"] .flip-face.recto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><path d='M7 20Q4 9 12 5q8-3 7 6q-1 7-7 5q-4-2-2-6'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>"); }
.lecon-body[data-ile="ile4"] .flip-face.recto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><ellipse cx='12' cy='12' rx='9' ry='5.6'/><circle cx='12' cy='12' r='2.6'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>"); }
.lecon-body[data-ile="ile5"] .flip-face.recto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><path d='M9.5 21L10.5 8h3L14.5 21M8.5 8h7M12 8V5.4M6.5 6L4 4.4M17.5 6L20 4.4'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>"); }
.lecon-body[data-ile="ile6"] .flip-face.recto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><path d='M6 18Q13 4 19 4.6Q18 11 8.6 17.4M5.4 19.4L10 14.4'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>"); }
.lecon-body[data-ile="ile7"] .flip-face.recto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><path d='M5 9h9v4H5zM14 10.6h6M9.5 13v6.6M7.6 19.6h3.8'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>"); }
.lecon-body[data-ile="ile8"] .flip-face.recto { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g opacity='.5'><g fill='none' stroke='%23C9A227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(30 30) scale(1.5)'><path d='M12 3l2.3 6.7L21 12l-6.7 2.3L12 21l-2.3-6.7L3 12l6.7-2.3z'/></g><g fill='%23C9A227'><path d='M48 6l4 4-4 4-4-4z'/><path d='M48 82l4 4-4 4-4-4z'/><path d='M10 44l4 4-4 4-4-4z'/><path d='M86 44l4 4-4 4-4-4z'/></g></g></svg>"); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .lecon-body.houle-in, html:not([data-motion=vivant]):not([data-motion=doux]) .seg.cur i, html:not([data-motion=vivant]):not([data-motion=doux]) .star-spark, html:not([data-motion=vivant]):not([data-motion=doux]) .verdict.open .verdict-merlin, html:not([data-motion=vivant]):not([data-motion=doux]) .eclair{ animation: none; }
}

/* ==== Vague fun 3, nouvelles mecaniques ==== */
/* #22 : avant/apres au curseur */
.cmp-cadre { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); touch-action: none; cursor: ew-resize; flex: none; }
.cmp-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-haut { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.cmp-barre { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold); transform: translateX(-1.5px); pointer-events: none; }
.cmp-poignee { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.cmp-poignee svg { width: 22px; height: 22px; }
.cmp-tag { position: absolute; top: 10px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: rgba(10,15,26,.75); color: #fff; border-radius: 8px; padding: 4px 9px; pointer-events: none; }
.cmp-tag-a { left: 10px; }
.cmp-tag-b { right: 10px; }
.cmp-range { width: 100%; margin-top: 12px; accent-color: var(--gold); }

/* #23 : la loupe aux indices */
.ind-cadre { position: relative; border-radius: 16px; }
.ind-post { border-radius: 16px; background: var(--panel); border: 1px solid var(--line); padding: 14px; }
.ind-badge { display: inline-block; font-size: .7rem; font-weight: 800; color: #fff; background: #236979; border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
.ind-fond { margin-top: 10px; border-radius: 12px; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-weight: 800; font-size: 1.02rem; color: #fff; background: radial-gradient(120% 140% at 30% 10%, #3D7B87 0%, #163947 70%); }
.ind-zone { position: absolute; background: transparent; border: 2px dashed transparent; border-radius: 10px; }
.ind-zone.trouve { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.ind-pin { position: absolute; top: -11px; right: -11px; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; animation: pin-pop .3s cubic-bezier(.2,.7,.3,1.4) both; }
.ind-pin svg { width: 14px; height: 14px; }
@keyframes pin-pop { from { transform: scale(0); } }
.ind-score { margin-top: 10px; text-align: center; font-weight: 800; color: var(--ink-dim); }
.ind-score [data-found] { color: var(--gold); }

/* #24 : la fabrique de titres */
.fab-une { border: 2px solid var(--gold); border-radius: 14px; background: var(--panel-2); padding: 12px 14px; margin-bottom: 6px; }
.fab-une-kick { font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: var(--gold); }
.fab-une-titre { font-size: 1.16rem; font-weight: 800; line-height: 1.35; margin-top: 4px; }
.fab-une.fab-pop { animation: fab-pop .35s cubic-bezier(.2,.7,.3,1.35); }
@keyframes fab-pop { 45% { transform: scale(1.03); } }
.fab-label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-dim); margin: 12px 0 6px; }
.fab-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* #25 : la frise deployee */
.frise-deploy { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.frise-item { position: relative; padding: 8px 0 10px 74px; opacity: 0; animation: frise-in .4s ease both; }
.frise-item::before { content: ""; position: absolute; left: 56px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--gold) 55%, transparent); }
.frise-item::after { content: ""; position: absolute; left: 51px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.frise-date { position: absolute; left: 0; top: 12px; width: 44px; text-align: right; font-weight: 800; font-size: .82rem; color: var(--gold); }
.frise-texte { font-size: .95rem; line-height: 1.45; }
@keyframes frise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

/* #26 : le radar de vigilance */
.radar { margin: 14px auto 4px; text-align: center; }
.radar-titre { font-weight: 800; font-size: .95rem; margin-bottom: 6px; }
.radar svg { width: 168px; height: 174px; }
.radar-grille { fill: none; stroke: color-mix(in srgb, var(--ink-dim) 45%, transparent); stroke-width: 1; }
.radar-poly { fill: color-mix(in srgb, var(--gold) 38%, transparent); stroke: var(--gold); stroke-width: 2; transform-origin: 60px 64px; animation: radar-grow 1s cubic-bezier(.2,.7,.3,1.2) both .5s; }
@keyframes radar-grow { from { transform: scale(0); } }
.radar-sweep { stroke: var(--gold); stroke-width: 1.6; transform-origin: 60px 64px; animation: radar-sweep 1.5s ease-in-out both; opacity: 0; }
@keyframes radar-sweep { 0% { opacity: .9; transform: rotate(0); } 90% { opacity: .9; } 100% { opacity: 0; transform: rotate(360deg); } }
.radar-legende { display: flex; justify-content: center; gap: 14px; font-size: .85rem; color: var(--ink-dim); }
.radar-legende b { color: var(--gold); }
.radar-note { font-size: .8rem; color: var(--ink-dim); margin-top: 5px; }

/* #30 : l'embarquement du premier lancement */
.onboard { display: flex; flex-direction: column; background: radial-gradient(120% 130% at 50% 0%, #1D4B59 0%, #0D2732 70%); }
.ob-scroll { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ob-scroll::-webkit-scrollbar { display: none; }
.ob-p { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px; gap: 10px; }
.ob-p img { width: 170px; height: 170px; object-fit: contain; }
.ob-p h2 { font-size: 1.4rem; font-weight: 800; max-width: 22ch; }
.ob-p p { color: var(--ink-dim); max-width: 30ch; font-size: 1.02rem; line-height: 1.55; }
.ob-dots { display: flex; justify-content: center; gap: 8px; padding: 8px 0 4px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.ob-dots i.on { background: var(--gold); transform: scale(1.25); }
.ob-foot { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }

/* #02 : scene d'ambiance optionnelle dans les intros */
.ecran-intro .intro-scene { width: min(100%, 320px); border-radius: 16px; margin-bottom: 8px; border: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .radar-poly, html:not([data-motion=vivant]):not([data-motion=doux]) .radar-sweep, html:not([data-motion=vivant]):not([data-motion=doux]) .frise-item, html:not([data-motion=vivant]):not([data-motion=doux]) .ind-pin, html:not([data-motion=vivant]):not([data-motion=doux]) .fab-une.fab-pop{ animation: none; opacity: 1; }
}

/* #04 : la salle des trophees du profil */
.trophees { margin-top: 18px; }
.trophees h3 { font-size: 1rem; font-weight: 800; margin-bottom: 10px; }
.troph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
.troph { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.troph svg { width: 56px; height: 56px; }
.troph .tr-fond { fill: color-mix(in srgb, var(--ink-dim) 22%, var(--panel-2)); }
.troph .tr-ring { fill: none; stroke: color-mix(in srgb, var(--ink-dim) 40%, transparent); stroke-width: 1.6; }
.troph .tr-motif { fill: none; stroke: color-mix(in srgb, var(--ink-dim) 55%, transparent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.troph.gold .tr-fond { fill: var(--gold); }
.troph.gold .tr-ring { stroke: #8A6D1F; }
.troph.gold .tr-motif { stroke: #4A3A10; }
.troph.gold svg { filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--gold) 45%, transparent)); }
.troph span { font-size: .68rem; line-height: 1.25; color: var(--ink-dim); font-weight: 700; }
.troph.gold span { color: var(--gold); }

/* #08 : illustration optionnelle des lectures */
.lecture-img { width: 100%; border-radius: 14px; border: 1px solid var(--line); margin: 0 0 13px; }

/* ==========================================================================
   LOT C LUDIQUE (29/07/2026) : #21 simulateurs de poche, #22 brevet,
   #24 verdicts lisibles par tous. (#23 est du pur WebAudio, aucun CSS.)
   ========================================================================== */

/* ---------- #21a : simboite, la mini boîte mail piégée ---------- */
.boite-score { text-align: center; font-weight: 800; color: var(--ink-dim); font-size: .85rem; margin: -4px 0 12px; }
.boite-score [data-boite-fait] { color: var(--gold); }
.boite-liste { display: flex; flex-direction: column; gap: 12px; }
.mail-card {
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  padding: 14px;
  transition: border-color .2s ease;
}
.mail-card.mail-resolved { border-left-color: var(--line); }
.mail-card.mail-ok { border-left-color: var(--ok); }
.mail-card.mail-err { border-left-color: var(--err); }
.mail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mail-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
}
.mail-headtxt { min-width: 0; }
.mail-de { font-weight: 800; font-size: .96rem; }
.mail-objet { font-weight: 700; font-size: .92rem; color: var(--ink-dim); }
.mail-extrait { font-size: .92rem; color: var(--ink); line-height: 1.5; margin-bottom: 12px; }
.mail-actions { display: flex; gap: 10px; }
.mail-btn { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; font-size: .92rem; }
.mail-btn:disabled { opacity: .82; }

/* ---------- #21b : simurl, la dissection d'adresse ---------- */
.url-cadre { border-radius: 16px; background: var(--panel); border: 1px solid var(--line); padding: 16px; margin-bottom: 10px; }
.url-affiche { font-size: 1.08rem; font-weight: 700; line-height: 2.5; word-break: break-word; }
.url-sep { color: var(--ink-dim); padding: 0 1px; }
.url-zone {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 10px; margin: 2px 1px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 2px solid var(--line);
  font: inherit; font-weight: 800;
  color: var(--ink);
  vertical-align: middle;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.url-zone:active { transform: translateY(1px); }
.url-zone.vu { border-color: var(--gold); }
.url-zone.vu-sur { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent); }
.url-zone.vu-louche { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 55%, transparent); }
.url-score { text-align: center; font-weight: 800; color: var(--ink-dim); font-size: .85rem; margin-bottom: 10px; }
.url-score [data-url-vues] { color: var(--gold); }
.url-detail {
  display: flex; flex-direction: column; gap: 6px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.url-detail[hidden] { display: none; }
.url-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px;
}
.url-badge svg { width: 14px; height: 14px; }
.url-badge.sur { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
:root[data-theme="light"] .url-badge.sur { color: var(--ok-edge); }
.url-badge.louche { color: var(--err); background: color-mix(in srgb, var(--err) 18%, transparent); }
:root[data-theme="light"] .url-badge.louche { color: var(--err-edge); }
.url-detail-txt { font-size: .92rem; color: var(--ink); line-height: 1.5; }
.url-question[hidden] { display: none; }
.url-verdict-btns { display: flex; gap: 12px; margin-top: 4px; }
.url-verdict-btns .btn { flex: 1; min-width: 0; }
.url-verdict-btns .btn:disabled { opacity: .82; }
.url-question.reveal-in, .url-detail.reveal-in { animation: reveal-in .3s cubic-bezier(.2, .7, .3, 1.2) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- #22 : le brevet de capitaine (bouton du profil) ---------- */
.brevet-bloc { margin-top: 22px; text-align: center; }
.brevet-note { margin-top: 8px; font-size: .82rem; color: var(--ink-dim); font-weight: 700; }

/* ---------- #24 : doubler la couleur d'une forme ---------- */
/* Choix révélés (feed) : coche/croix en plus de la couleur. Les boutons de
   simboite/simurl (Confiance/Poubelle, Sûre/Louche) portent déjà leur icône
   en permanence (check/cross), doublage déjà natif dès la construction. */
.choice-mark { width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px; flex: none; }
/* Cran de pari gagnant : une coche s'ajoute au disque or. */
.bet-tick { display: flex; align-items: center; justify-content: center; }
.bet-tick-ico { width: 11px; height: 11px; color: var(--on-accent); }
:root[data-theme="light"] .bet-tick-ico { color: #fff; }
/* Segments de progression : coche sur les faits, point discret sur le reste. */
.seg-check {
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  color: var(--on-accent);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
:root[data-theme="light"] .seg-check { color: #fff; }
.seg.done .seg-check { opacity: 1; }
.seg.todo::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--ink-dim);
  opacity: .6;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .url-question.reveal-in, html:not([data-motion=vivant]):not([data-motion=doux]) .url-detail.reveal-in{ animation: none; }
}

/* ---------- #24 : réglage « Contraste renforcé » ---------- */
/* Une classe sur <html> : on relève les tokens partagés (--ok/--err/--line/
   --ink-dim) plutôt que de retoucher chaque composant un par un, pour que
   la portée reste celle de tout le rendu, comme pour les thèmes (R24). */
:root.contraste {
  --ok: #34C17C;
  --ok-edge: #1F6E45;
  --err: #E85B4F;
  --err-edge: #8C332D;
  --ink-dim: #C9D5E8;
  --line: rgba(255, 255, 255, 0.24);
}
:root[data-theme="light"].contraste {
  --ok: #0E6B39;
  --ok-edge: #175836;
  --err: #8C2A20;
  --err-edge: #7C2A24;
  --ink-dim: #2E3F58;
  --line: rgba(16, 33, 58, 0.30);
}
/* Bordures des états révélés/choisis : plus épaisses en contraste renforcé
   (uniquement les éléments qui ont déjà un vrai « border » à épaissir ;
   les boutons .btn utilisent un box-shadow, déjà bien visible via .glow-right). */
.contraste .choice.selected, .contraste .choice.reveal-ok, .contraste .choice.reveal-err,
.contraste .chip.selected, .contraste .chip.ok, .contraste .chip.dim-wrong,
.contraste .pair-btn.matched, .contraste .pair-btn.selected,
.contraste .url-zone.vu, .contraste .debrief-item, .contraste .ind-zone.trouve {
  border-width: 3px;
}

/* ==========================================================================
   LOT MULTI-ARCHIPELS ET CARTE DU MONDE (29/07/2026)
   ========================================================================== */
/* Bouton rond générique de la topbar (boussole sur la carte, retour sur la
   carte du monde) : mêmes proportions que .avatar-btn, sans l'image ronde. */
.topbar .icon-btn {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--ink-dim);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.topbar .icon-btn:active { background: var(--panel-2); }
.topbar .icon-btn svg { width: 21px; height: 21px; }

/* Kicker « nom de l'archipel » au-dessus du nom de l'île, dans la bannière. */
.ile-banniere .banniere-archipel {
  display: block;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold); opacity: .92;
  margin-bottom: 2px;
}
.ile-banniere.gold .banniere-archipel { color: inherit; opacity: .72; }

/* ---------- La carte du monde : océan d'accueil des archipels ---------- */
.monde-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom));
}
.monde-entete { text-align: center; padding: 16px 8px 4px; }
.monde-entete h1 { font-size: 1.32rem; font-weight: 800; }
.monde-entete p { font-size: .9rem; color: var(--ink-dim); margin-top: 4px; }

.archipels-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.archipel-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--shadow);
  text-align: left;
  font: inherit; color: inherit;
}
button.archipel-card { cursor: pointer; }
.archipel-card:active { transform: scale(.985); }
.archipel-card img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.archipel-card .ac-body { min-width: 0; flex: 1; }
.archipel-card h2 { font-size: 1.06rem; font-weight: 800; }
.archipel-card .ac-sub { font-size: .82rem; color: var(--ink-dim); margin-top: 2px; }
.archipel-card .ac-progress {
  height: 8px; border-radius: 999px; background: var(--panel-3);
  overflow: hidden; margin-top: 9px; max-width: 260px;
}
.archipel-card .ac-progress > i {
  display: block; height: 100%; background: var(--gold); border-radius: inherit;
  transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
}
.archipel-card .ac-count {
  display: inline-block; margin-top: 6px;
  font-size: .78rem; font-weight: 800; color: var(--gold);
}
.archipel-card.ac-done { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--panel)); }
.archipel-card .ac-badge {
  position: absolute; top: 12px; right: 14px;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-accent); background: var(--gold);
  padding: 3px 8px; border-radius: 8px;
}
:root[data-theme="light"] .archipel-card .ac-badge { color: #fff; }
.archipel-card--soon {
  opacity: .8; border-style: dashed;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
.archipel-card--soon .t-soon {
  display: inline-block; margin-top: 4px;
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-dim); text-transform: uppercase;
}
.archipel-card--soon .t-lock { margin-left: auto; color: var(--lock); flex: none; }
.archipel-card--soon img { filter: grayscale(1) brightness(.7); opacity: .8; }
:root[data-theme="light"] .archipel-card--soon img { filter: grayscale(1); }

/* ==========================================================================
   VAGUE AVENTURE (30/07/2026)
   ========================================================================== */

/* ---------- #13 : panneau du port, à côté du chiffre du jour ---------- */
.carte-panneaux {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: min(100% - 36px, 420px);
  margin: 10px auto 2px;
}
.carte-panneaux .panneau-chiffre, .carte-panneaux .panneau-port {
  margin: 0; width: auto; flex: 1 1 160px;
}
.panneau-port {
  position: relative;
  padding: 10px 14px 11px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .16)),
    linear-gradient(90deg, #5A3E22, #6E4C2A 30%, #5A3E22 60%, #67462a);
  border: 2px solid #3E2A15;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #F4E9CF;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.panneau-port .pp-row { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; }
.panneau-port .pp-row b { color: var(--gold); font-size: .95rem; }
.panneau-port .pp-star { width: 14px; height: 14px; color: var(--gold); flex: none; }

/* ---------- #14 : ciel à l'heure vraie, calque subtil par-dessus l'île ---------- */
.mer::before {
  background:
    linear-gradient(180deg, var(--heure-a, transparent), var(--heure-b, transparent)),
    linear-gradient(180deg, var(--ciel-a, transparent), var(--ciel-b, transparent));
}
.carte[data-heure="aube"], .monde[data-heure="aube"] { --heure-a: rgba(255, 176, 84, .16); --heure-b: rgba(255, 138, 61, .04); }
.carte[data-heure="jour"], .monde[data-heure="jour"] { --heure-a: transparent; --heure-b: transparent; }
.carte[data-heure="crepuscule"], .monde[data-heure="crepuscule"] { --heure-a: rgba(255, 94, 98, .14); --heure-b: rgba(60, 20, 90, .16); }
.carte[data-heure="nuit"], .monde[data-heure="nuit"] { --heure-a: rgba(8, 12, 30, .40); --heure-b: rgba(4, 6, 16, .28); }
:root[data-theme="light"] .carte[data-heure], :root[data-theme="light"] .monde[data-heure] { --heure-a: transparent; --heure-b: transparent; }
/* Quelques étoiles scintillantes en CSS (nuit, ou trophée #16 hors nuit). */
.ciel-etoiles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ciel-etoiles i {
  position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #F4F1E8; opacity: .15;
  animation-name: etoile-scintille; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes etoile-scintille { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
:root[data-theme="light"] .ciel-etoiles { display: none; }

/* ---------- #15 : la mer qui suit votre forme (session en cours) ---------- */
.carte.mer-soleil .mer::before {
  background:
    radial-gradient(140% 120% at 50% 20%, rgba(255, 208, 110, .22), transparent 65%),
    linear-gradient(180deg, var(--heure-a, transparent), var(--heure-b, transparent)),
    linear-gradient(180deg, var(--ciel-a, transparent), var(--ciel-b, transparent));
}
.carte.mer-soleil .mer i:first-child { animation-duration: 74s; }
.carte.mer-soleil .mer i:last-child { animation-duration: 106s; }
.carte.mer-crachin .mer::before {
  background:
    linear-gradient(180deg, rgba(122, 132, 148, .34), rgba(70, 78, 92, .22)),
    linear-gradient(180deg, var(--heure-a, transparent), var(--heure-b, transparent)),
    linear-gradient(180deg, var(--ciel-a, transparent), var(--ciel-b, transparent));
}
.carte.mer-crachin .mer i:first-child { animation-duration: 22s; }
.carte.mer-crachin .mer i:last-child { animation-duration: 30s; }
.carte.mer-crachin::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(100deg, transparent 0 6px, rgba(210, 220, 235, .10) 6px 7px, transparent 7px 26px);
  animation: crachin-glisse 1.1s linear infinite;
}
@keyframes crachin-glisse { to { background-position: 0 42px; } }

/* ---------- #16 : feux de conquête (état permanent, archipel entier en or) ---------- */
.feux-conquete { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 3; pointer-events: none; overflow: hidden; }
.feu-flamme {
  position: absolute; bottom: 6px; width: 10px; height: 16px;
  background: radial-gradient(circle at 50% 100%, #FFD37A, #E8862C 55%, transparent 75%);
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  filter: drop-shadow(0 0 6px rgba(255, 170, 60, .55));
  animation: feu-vacille 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes feu-vacille {
  0%, 100% { transform: scaleY(1) rotate(-2deg); opacity: .92; }
  50%      { transform: scaleY(1.15) rotate(3deg); opacity: 1; }
}
.carte.archipel-conquis::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 22, .22), rgba(6, 10, 22, .08) 55%, transparent);
}
:root[data-theme="light"] .carte.archipel-conquis::before { display: none; }

/* ---------- #11 : reprise au phare ---------- */
.phare-btn {
  position: absolute; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 12;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--gold); color: var(--on-accent);
  font-weight: 800;
  box-shadow: 0 4px 0 var(--gold-deep), 0 10px 18px var(--shadow);
  animation: phare-btn-in .4s cubic-bezier(.2, .7, .3, 1.4) both;
}
:root[data-theme="light"] .phare-btn { color: #fff; }
.phare-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--gold-deep); transition-duration: .034s; }
.phare-btn svg { width: 20px; height: 20px; }
@keyframes phare-btn-in { from { opacity: 0; transform: translateY(14px) scale(.85); } }
.phare-beam { position: absolute; left: -28px; right: -28px; height: 170px; pointer-events: none; z-index: 1; }
.phare-glow {
  position: absolute; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 200, .85), transparent 70%);
  animation: phare-glow-pulse 2.6s ease both;
}
@keyframes phare-glow-pulse {
  0%, 32% { opacity: 0; transform: scale(.4); }
  48%     { opacity: 1; transform: scale(1); }
  80%     { opacity: .75; }
  100%    { opacity: 0; }
}

/* ---------- #12 : traversée entre archipels + routes déjà tracées ---------- */
.monde-glide { position: absolute; inset: 0; z-index: 80; }
.mg-navire {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .45));
  transition: transform 1.2s cubic-bezier(.3, .1, .2, 1), opacity 1.2s ease-in .3s;
}
.archipels-grid { position: relative; }
.route-rail {
  position: absolute; left: 33px; top: 0; width: 2px; height: 0;
  border-left: 2px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  pointer-events: none;
}
.archipel-card--visite.route-marque::before {
  content: ""; position: absolute; left: 27px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent);
}

/* ---------- #17 : indice du moussaillon ---------- */
.indice-btn {
  flex: none; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.indice-btn svg { width: 20px; height: 20px; }
.indice-btn:active { transform: scale(.92); }
.indice-btn:disabled { opacity: .35; }
.choice.indice-out { opacity: .4; filter: grayscale(.5); }

/* ---------- #26 : reprise mi-leçon, fenêtre de choix ---------- */
.resume-dialog {
  position: absolute; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.resume-card {
  width: min(100%, 360px);
  padding: 22px 20px;
  border-radius: 20px;
  background: var(--panel);
  border: 2px solid var(--gold);
  box-shadow: 0 14px 34px var(--shadow);
  text-align: center;
}
.resume-card h2 { font-size: 1.18rem; font-weight: 800; margin-bottom: 8px; }
.resume-card p { color: var(--ink-dim); font-weight: 600; margin-bottom: 16px; }
.resume-card .btn { margin-top: 10px; }
.resume-card .btn:first-of-type { margin-top: 0; }

/* ---------- #23 : mode projecteur ---------- */
:root.projecteur [data-fin-partage],
:root.projecteur [data-fin-souvenir] { display: none; }
.projo-fs {
  position: fixed; left: 0; right: 0; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px calc(10px + env(safe-area-inset-top));
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 2px solid var(--gold);
  font-weight: 700;
}
.projo-fs span { flex: 1; min-width: 140px; }
.projo-fs .btn { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.projo-fs-close { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink-dim); }
.projo-fs-close svg { width: 18px; height: 18px; }

/* ---------- #24 : manifeste de l'équipage, imprimable A4 ---------- */
.manifeste-print {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  overflow-y: auto;
}
.manif-toolbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  padding-top: calc(12px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.manif-toolbar .btn { min-height: 44px; padding: 10px 16px; font-size: .92rem; }
.manif-page { max-width: 640px; margin: 0 auto; padding: 32px 24px 60px; text-align: center; color: var(--ink); }
.manif-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.manif-page h1 { font-size: 1.6rem; font-weight: 800; margin: 6px 0 14px; }
.manif-medaille { width: 96px; height: 96px; margin: 0 auto 10px; }
.manif-sub { font-weight: 700; color: var(--ink-dim); margin-bottom: 22px; }
.manif-retenir { text-align: left; max-width: 520px; margin: 0 auto 30px; padding-left: 1.6em; list-style-position: outside; display: flex; flex-direction: column; gap: 12px; }
.manif-retenir li { font-size: .98rem; line-height: 1.55; padding-left: 4px; }
.manif-retenir strong { color: var(--gold); }
.manif-signature { margin-top: 30px; font-weight: 700; font-size: 1.02rem; }
.manif-signature span { display: inline-block; min-width: 220px; border-bottom: 2px solid var(--ink-dim); margin-left: 6px; }
.manif-date { margin-top: 18px; font-size: .82rem; color: var(--ink-dim); }
@media print {
  body > *:not(.manifeste-print) { display: none !important; }
  .manifeste-print { position: static; overflow: visible; background: #fff; color: #10213A; }
  .manif-toolbar { display: none !important; }
  .manif-page { max-width: none; padding: 0; color: #10213A; }
  .manif-kicker, .manif-sub, .manif-date { color: #5A6B84; }
  .manif-retenir strong { color: #8F6E12; }
  .manif-signature span { border-color: #10213A; }
  @page { size: A4; margin: 18mm; }
}

/* ---------- #4 : dictee, Merlin « répète » une affirmation ---------- */
.dictee-merlin { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.dictee-merlin img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.dictee-bulle {
  position: relative;
  background: var(--panel-2);
  border: 2px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 4px 16px 16px 16px;
  padding: 12px 14px;
  font-weight: 700; font-size: 1.02rem; line-height: 1.5;
}

/* ---------- #2 : équipage, bandeau perso au-dessus de la question ---------- */
.perso-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.perso-avatar {
  position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
}
.perso-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perso-nom { font-weight: 800; font-size: .92rem; color: var(--ink-dim); }

/* ---------- #7 : glossaire du bord ---------- */
.glossaire-mot {
  display: inline; font: inherit; color: var(--gold); font-weight: 700;
  border-bottom: 2px dotted var(--gold);
  padding: 0 1px;
}
.glossaire-mot:active { opacity: .7; }
.gloss-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  max-width: 540px; margin: 0 auto;
  background: var(--panel);
  border-top: 2px solid var(--gold);
  border-radius: 20px 20px 0 0;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px var(--shadow);
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.2, 0, 0, 1);
}
.gloss-sheet.open { transform: translateY(0); }
.gloss-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gloss-sheet-terme { font-size: 1.1rem; font-weight: 800; color: var(--gold); text-transform: capitalize; }
.gloss-sheet-close { width: 44px; height: 44px; border-radius: 10px; color: var(--ink-dim); display: flex; align-items: center; justify-content: center; flex: none; }
.gloss-sheet-close svg { width: 18px; height: 18px; }
.gloss-sheet-def { font-size: .98rem; line-height: 1.55; color: var(--ink); }
.gloss-page-compte { text-align: center; font-weight: 800; color: var(--gold); margin: 10px 0 16px; }
.gloss-liste { display: flex; flex-direction: column; gap: 10px; }
.gloss-item { padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.gloss-item-terme { display: block; font-weight: 800; text-transform: capitalize; color: var(--gold); margin-bottom: 4px; }
.gloss-item-def { font-size: .92rem; color: var(--ink); line-height: 1.5; }
.gloss-item--voile { opacity: .6; }
.gloss-item--voile .gloss-item-terme { color: var(--ink-dim); text-transform: none; }

/* ---------- #1 : journal de bord ---------- */
.journal-page { padding-top: 6px; }
.journal-vide { text-align: center; color: var(--ink-dim); font-weight: 700; padding: 30px 10px; }
.journal-liste { display: flex; flex-direction: column; gap: 14px; }
.journal-entree { padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.journal-entree-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.journal-entree-head h2 { font-size: 1.02rem; font-weight: 800; }
.journal-date { font-size: .78rem; font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
.journal-entree p { font-size: .95rem; line-height: 1.55; color: var(--ink); }

/* ---------- carnets (journal + glossaire) du profil ---------- */
.carnets-bloc { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

/* ---------- #6 : l'Amiral ---------- */
.ac-amiral-badge {
  position: absolute; left: 12px; top: -12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent); font: inherit; font-weight: 800; font-size: .72rem; letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] .ac-amiral-badge { color: #fff; }
.ac-amiral-ico { width: 13px; height: 13px; }
.archipel-card.ac-amiral-ready { border-color: var(--gold); }
.archipel-card.ac-amiral-gold {
  border-color: var(--gold);
  box-shadow: 0 4px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent);
}
.amiral-profil { margin-top: 18px; }
.amiral-profil h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); margin-bottom: 8px; }
.amiral-profil-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.amiral-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-weight: 800; font-size: .82rem; color: var(--gold);
}
:root[data-theme="light"] .amiral-chip { color: var(--gold-deep); }
.amiral-chip-ico { width: 14px; height: 14px; }

/* #24 : petite note discrète (indice utilisé) sur l'écran de fin de boss. */
.fin-note { font-size: .82rem; color: var(--ink-dim); margin-top: -6px; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .ciel-etoiles i{ animation: none; opacity: .55; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .carte.mer-crachin::after{ animation: none; }
  /* Priment sur .mer i:first-child/:last-child (spécificité plus haute) :
     sans ça, la vitesse d'écume relancerait l'animation coupée plus haut. */
  html:not([data-motion=vivant]):not([data-motion=doux]) .carte.mer-soleil .mer i:first-child, html:not([data-motion=vivant]):not([data-motion=doux]) .carte.mer-soleil .mer i:last-child, html:not([data-motion=vivant]):not([data-motion=doux]) .carte.mer-crachin .mer i:first-child, html:not([data-motion=vivant]):not([data-motion=doux]) .carte.mer-crachin .mer i:last-child{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .feu-flamme{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .phare-btn{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .phare-beam, html:not([data-motion=vivant]):not([data-motion=doux]) .phare-glow{ display: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .mg-navire{ transition-duration: .01s; }
}

/* ==========================================================================
   VISITE GUIDÉE + ESPACE VIDÉO D'ÎLE (#TOUR-VIDEO, 04/08/2026)
   ========================================================================== */

/* ---------- L'espace vidéo de l'île, au-dessus de la route ---------- */
.ile-video-slot { width: min(100% - 36px, 420px); margin: 10px auto 0; position: relative; z-index: 1; }
.ile-video {
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.iv-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 74px;
  padding: 9px 12px;
  text-align: left;
}
.iv-vignette {
  position: relative; flex: none;
  width: 92px; aspect-ratio: 16 / 9;
  border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line);
  background: radial-gradient(120% 150% at 18% 0%, #21525F 0%, #0D2732 64%);
}
.iv-vignette img { width: 100%; height: 100%; object-fit: cover; }
.ile-video:not(.ile-video--dispo) .iv-vignette img { filter: saturate(.8) brightness(.85); }
.iv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.iv-play::before {
  content: ""; position: absolute; top: 50%; left: 56%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #0A0F1A;
}
.iv-txt { flex: 1; font-size: .88rem; font-weight: 700; color: var(--ink-dim); line-height: 1.35; }
.ile-video--dispo .iv-txt { color: var(--ink); }
.iv-chevron { flex: none; width: 20px; height: 20px; color: var(--ink-dim); transition: transform .25s ease; }
.ile-video--ouverte .iv-chevron { transform: rotate(180deg); }
.iv-corps { padding: 0 12px 12px; }
.iv-corps .video-cadre { border-radius: 12px; }

/* ---------- Bouton « Visite guidée » + pastille, panneau du port ---------- */
.pp-visite {
  margin-top: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(244, 233, 207, .42);
  color: #F4E9CF; font-size: .78rem; font-weight: 800;
}
.pp-visite-ico { width: 14px; height: 14px; flex: none; }
.pp-new {
  position: absolute; right: 6px; top: -12px;
  background: var(--gold); color: var(--on-accent);
  font-size: .64rem; font-weight: 800; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  white-space: nowrap; pointer-events: none;
  animation: pp-new-pop .5s cubic-bezier(.2, .7, .3, 1.4) both;
}
:root[data-theme="light"] .pp-new { color: #fff; }
@keyframes pp-new-pop { from { opacity: 0; transform: translateY(6px); } }

/* ---------- La visite guidée : voile + découpe + carte popup ---------- */
.tour { position: fixed; inset: 0; z-index: 400; }
.tour-halo {
  position: fixed; left: 50vw; top: 50vh; width: 0; height: 0;
  border-radius: 18px;
  pointer-events: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--gold) 80%, transparent),
    0 0 26px 6px color-mix(in srgb, var(--gold) 38%, transparent),
    0 0 0 9999px rgba(4, 8, 17, .72);
  transition: left .32s ease, top .32s ease, width .32s ease, height .32s ease;
}
.tour-halo--plein { border-radius: 50%; box-shadow: 0 0 0 9999px rgba(4, 8, 17, .78); }
:root[data-theme="light"] .tour-halo {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--gold) 85%, transparent),
    0 0 26px 6px color-mix(in srgb, var(--gold) 30%, transparent),
    0 0 0 9999px rgba(16, 33, 58, .55);
}
:root[data-theme="light"] .tour-halo--plein { box-shadow: 0 0 0 9999px rgba(16, 33, 58, .6); }
.tour-carte {
  position: fixed; left: 50%; top: 60%;
  width: min(340px, calc(100vw - 24px));
  background: var(--panel-2);
  border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 16px;
  padding: 13px 15px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  transition: left .32s ease, top .32s ease, opacity .18s ease;
}
.tour-carte.tour-mue { opacity: 0; }
.tour-etape {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 3px;
}
.tour-titre { font-size: 1.12rem; font-weight: 800; margin-bottom: 5px; }
.tour-texte { font-size: .93rem; line-height: 1.5; color: var(--ink); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.tour-skip {
  color: var(--ink-dim); font-size: .82rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 6px 2px;
}
.tour-actions .tour-next { margin-left: auto; min-height: 42px; padding: 8px 20px; font-size: .92rem; border-radius: 12px; }

/* Premier posé de la visite : la carte et le halo apparaissent sur place,
   sans glisser depuis leur position par défaut (hors écran sur mobile). */
.tour-saut .tour-halo, .tour-saut .tour-carte { transition: opacity .18s ease; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .tour-halo, html:not([data-motion=vivant]):not([data-motion=doux]) .tour-carte, html:not([data-motion=vivant]):not([data-motion=doux]) .iv-chevron{ transition: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .pp-new{ animation: none; }
}

/* Mode démo (mécénat) : bandeau sobre sur la carte du monde. */
.demo-bandeau {
  margin: 10px 14px 0;
  padding: 10px 14px;
  border: 1px solid rgba(201, 162, 39, .55);
  border-radius: 10px;
  background: rgba(201, 162, 39, .12);
  color: #F2E9CE;
  font-size: .82rem;
  line-height: 1.4;
  text-align: center;
}

/* ==========================================================================
   LA SCÈNE DU BOSS (boss.js + app.js, cartes #01 à #06)
   Un bandeau au-dessus de la question : le personnage à gauche, son nom et
   sa jauge à droite, sa réplique en dessous. La jauge porte le nom de son
   emprise, jamais « vie » : c'est ce qui la rend pédagogique.
   ========================================================================== */
.boss-scene {
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-template-areas: "perso info" "bulle bulle";
  gap: 4px 12px;
  align-items: center;
  margin: 8px 14px 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.bs-perso { grid-area: perso; width: 92px; height: 92px; object-fit: contain; }
.bs-info { grid-area: info; min-width: 0; }
.bs-nom {
  margin: 0 0 6px; font-weight: 800; font-size: .95rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bs-jauge {
  height: 10px; border-radius: 99px; background: var(--panel-3);
  overflow: hidden; box-shadow: inset 0 1px 2px var(--shadow);
}
.bs-jauge > i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: width .55s cubic-bezier(.2, .7, .3, 1);
}
.bs-compte {
  margin: 5px 0 0; font-size: .78rem; font-weight: 700; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
/* La réplique. Le boss parle en or sur fond sombre, Merlin en vert : on sait
   qui parle sans lire le nom. */
.bs-bulle {
  grid-area: bulle; margin: 8px 0 0; padding: 8px 11px;
  border-radius: 10px; font-size: .84rem; line-height: 1.4; font-weight: 600;
}
.bs-bulle[data-qui="boss"] {
  background: rgba(201, 162, 39, .12); border: 1px solid rgba(201, 162, 39, .5);
  color: var(--ink); font-style: italic;
}
.bs-bulle[data-qui="merlin"] {
  background: var(--banner-ok); border: 1px solid var(--ok); color: var(--ink);
}
/* Le tressaillement au changement d'état : il encaisse, il ne casse pas. */
@keyframes bs-touche {
  0%   { transform: none; }
  30%  { transform: translateX(-5px) rotate(-2.5deg); }
  60%  { transform: translateX(4px) rotate(1.5deg); }
  100% { transform: none; }
}
.bs-touche { animation: bs-touche .45s ease both; }
/* Le vaincu, sur l'écran de fin : plus grand, il a gagné le droit d'être vu. */
.fin-vaincu { width: 190px; height: 190px; object-fit: contain; }
.fin .fin-chute {
  margin: 2px 0 6px; font-size: .92rem; font-style: italic;
  color: var(--gold); max-width: 34ch;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .bs-touche{ animation: none; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .bs-jauge > i{ transition-duration: .01s; }
}

/* Démo : appel au soutien, à la fin de la seule île ouverte du parcours.
   Même famille visuelle que le bandeau ci-dessus, en plus affirmé. */
.fin-tipeee {
  margin: 4px 0 2px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 162, 39, .55);
  border-radius: 14px;
  background: rgba(201, 162, 39, .12);
  text-align: center;
}
.fin-tipeee h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--gold);
}
.fin-tipeee p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink);
}
.fin-tipeee .ft-suite {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 162, 39, .3);
  font-size: .82rem;
  color: var(--ink-dim);
}

/* Démo : Merlin invite à aller voir le projet, en fin d'abordage comme au
   pied de la carte. Deux boutons suivent, la page d'abord, le soutien
   ensuite. */
.fin-invite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 2px;
}
.fin-invite img { width: 68px; height: 68px; object-fit: contain; flex-shrink: 0; }
.fin-invite p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 3px;
  background: var(--panel-2, rgba(255, 255, 255, .06));
  font-size: .88rem;
  line-height: 1.45;
  font-style: italic;
  text-align: left;
}
.soutien-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.soutien-btns .btn-block { margin: 0; }

/* Le même appel, au bas de la carte : la route s'arrête là en démo. */
.fin-archipel {
  margin: 0 16px 110px;   /* le bloc porte le pas de fin de carte */
  padding: 14px 16px 16px;
  border: 1px solid rgba(201, 162, 39, .5);
  border-radius: 14px;
  background: rgba(10, 15, 26, .55);
  backdrop-filter: blur(2px);
  text-align: center;
}
.fin-archipel h3 { margin: 0 0 6px; font-size: 1rem; color: var(--gold); }
.fin-archipel p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink); }
/* La bulle de Merlin reste ouverte en démo : elle porte l'invitation, plus
   longue qu'une vanne. Le grand pas sous Merlin passe alors au bloc d'appel,
   qui devient le vrai bas de page. */
.carte-merlin--invite { padding-bottom: 14px; }
.carte-merlin--invite .cm-vanne {
  max-width: 300px;
  font-weight: 600;
  line-height: 1.4;
}

/* ==========================================================================
   LE CABINET DES BADGES (badges.js + app.js)
   Trois paliers, trois teintes : bronze, argent, or. Le médaillon est un SVG
   dessiné en place (cercle, anneau, initiale), rien à télécharger.
   ========================================================================== */
.bdg--bronze { --pal: #CD7F32; }
.bdg--argent { --pal: #9FB0C0; }
.bdg--or { --pal: #C9A227; }

.bdg-med { width: 46px; height: 46px; flex: 0 0 auto; }
.bdg-fond { fill: var(--pal); }
.bdg-ring { fill: none; stroke: color-mix(in srgb, var(--pal) 45%, #000); stroke-width: 1.6; }
.bdg-ini {
  fill: color-mix(in srgb, var(--pal) 26%, #000);
  font-size: 17px; font-weight: 800;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ---------- L'annonce : discrète, jamais bloquante ---------- */
.badge-annonce {
  position: absolute; left: 50%; bottom: 92px;
  z-index: 60; pointer-events: none;
  display: flex; align-items: center; gap: 11px;
  width: min(360px, calc(100% - 28px));
  padding: 10px 15px 10px 11px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--pal) 50%, var(--line));
  box-shadow: 0 14px 34px var(--shadow);
  opacity: 0;
  transform: translateX(-50%) translateY(14px) scale(.97);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
}
.badge-annonce.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.badge-annonce .ba-med { display: flex; }
.badge-annonce .bdg-med {
  width: 44px; height: 44px;
  filter: drop-shadow(0 3px 9px color-mix(in srgb, var(--pal) 42%, transparent));
}
.ba-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ba-kicker {
  font-size: .64rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pal) 70%, var(--ink));
}
.ba-nom { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.ba-desc {
  font-size: .78rem; line-height: 1.35; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- La vitrine du profil ---------- */
.cabinet { margin-top: 20px; }
.cabinet h3 { font-size: 1rem; font-weight: 800; }
.cab-compte { color: var(--ink-dim); font-size: .84rem; font-weight: 700; margin: 2px 0 12px; }
.cab-compte b { color: var(--gold); font-size: 1rem; }
.cab-vide, .cab-plein { color: var(--ink-dim); font-size: .85rem; line-height: 1.45; margin: 6px 0 2px; }
.cab-fam {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
  margin: 14px 0 8px;
}
.cab-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px 6px;
}
.cab-badge {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
.cab-badge .bdg-med { width: 50px; height: 50px; filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--pal) 38%, transparent)); }
.cab-nom { font-size: .68rem; line-height: 1.25; font-weight: 700; color: var(--ink); }
.cab-badge .cab-nom { hyphens: auto; }

.cab-reste { margin-top: 16px; }
.cab-reste > summary {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-weight: 800; font-size: .88rem;
  cursor: pointer;
}
.cab-reste > summary::-webkit-details-marker { display: none; }
.cab-reste > summary::after {
  content: ""; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.cab-reste[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.cab-reste-corps { padding: 2px 2px 4px; }
.cab-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cab-verrou {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 11px;
  border-radius: 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.cab-verrou .bdg-med { width: 38px; height: 38px; opacity: .55; }
.cab-verrou .bdg-fond { fill: color-mix(in srgb, var(--ink-dim) 26%, var(--panel-3)); }
.cab-verrou .bdg-ring { stroke: color-mix(in srgb, var(--ink-dim) 45%, transparent); }
.cab-verrou .bdg-ini { fill: color-mix(in srgb, var(--ink-dim) 85%, transparent); }
.cab-verrou-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-verrou .cab-nom { font-size: .86rem; color: var(--ink-dim); text-align: left; }
.cab-palier { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--pal) 65%, var(--ink-dim)); }
.cab-desc { font-size: .79rem; line-height: 1.4; color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=vivant]):not([data-motion=doux]) .badge-annonce{ transition-duration: .01s; }
  html:not([data-motion=vivant]):not([data-motion=doux]) .cab-reste > summary::after{ transition: none; }
}

/* Navigation des écrans visités : pétrole/menthe, cibles tactiles de 44 px. */
.segbar[role="navigation"] { min-width: 0; height: 48px; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; gap: 5px; }
.segbar[role="navigation"] .seg { flex: 1 0 44px; min-width: 44px; min-height: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); padding: 0; font: inherit; cursor: pointer; touch-action: manipulation; }
.segbar[role="navigation"] .seg > i { background: #59d4b0; opacity: .28; }
.segbar[role="navigation"] .seg.cur { border: 2px solid #59d4b0; background: #103746; color: #eafff8; }
.segbar[role="navigation"] .seg.cur > i { background: linear-gradient(90deg, transparent, #59d4b055, transparent); }
.segbar[role="navigation"] .seg-number { position: relative; z-index: 1; font-size: .85rem; font-weight: 800; }
.segbar[role="navigation"] .seg:disabled { opacity: .5; cursor: default; }
.segbar[role="navigation"] .seg:focus-visible { outline: 2px solid #59d4b0; outline-offset: -4px; }
.segbar[role="navigation"] .seg.todo::after { display: none; }
.lecon-body[data-reviewing="true"] input:disabled, .lecon-body[data-reviewing="true"] textarea:disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* Bibliographie de fin de module, commune aux deux parcours. */
.module-sources{box-sizing:border-box;width:100%;max-width:100%;margin:24px 0;padding:22px;border:1px solid #bdd5d7;border-radius:18px;background:#edf5f4;color:#173e50;text-align:left;line-height:1.55;overflow-wrap:anywhere}
.module-sources h3{margin:0 0 8px;font-family:inherit;font-weight:700;font-size:1.2rem;line-height:1.3;color:inherit}
.module-sources p{margin:0 0 14px;font-size:.95rem;color:inherit}
.module-sources summary{min-height:44px;display:list-item;align-content:center;font-weight:700;cursor:pointer}
.module-sources ul{margin:8px 0 0;padding-left:22px}
.module-sources li{padding:7px 0}
.module-sources a{display:inline-block;padding:5px 0;color:inherit;text-decoration:underline;text-underline-offset:3px;max-width:100%}
.module-sources__context{display:block;font-size:.85rem;opacity:.85}
.module-sources :is(a,summary):focus-visible{outline:3px solid #31818b;outline-offset:4px;border-radius:3px}
[data-theme=dark] .module-sources,body.dark .module-sources{background:#173744;border-color:#446970;color:#e5f2f1}
@media(max-width:600px){.module-sources{padding:18px 16px}.module-sources li{padding:9px 0}}

.chapter-capsule-external{display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box;font-size:.9rem;color:inherit;text-decoration:underline;text-underline-offset:3px}

.fin .module-sources{background:var(--panel);color:var(--ink);border-color:var(--line)}