/* ÉCLAT — Atlas vivant / première passe de design.
 * Couche additive et réversible : aucune mécanique ni structure modifiée.
 * Ne pas neutraliser les palettes d'époque ; préserver les thèmes et le Cosmos.
 */
:root {
  --design-reading: 15px;
  --design-caption: 13px;
  --design-radius: 12px;
  --design-focus: 3px;
}
body { font-size: var(--design-reading); line-height: 1.5; }
.small { font-size: 14px; line-height: 1.45; }
.tiny { font-size: var(--design-caption); line-height: 1.4; }
h3.sub { font-size: 13px; letter-spacing: .065em; }
#tabs button span { font-size: 12px; }
.age small { font-size: 12px; letter-spacing: .045em; }
.chip .cv small { font-size: 11px; }
.goal .lbl, .goal-card .lbl { font-size: 12px; }
.btn.small { font-size: 14px; }
.btn, .mini, .chip, .icon-btn, #tabs button { transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
:where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--design-focus) solid var(--acc);
  outline-offset: 3px;
}
:where(.card, .dom-card, .rec, .stepbox, .passbox) {
  border-radius: var(--design-radius);
}
.card, .dom-card, .rec, .stepbox, .passbox {
  background-color: var(--panel);
}
.goal-card { border-style: solid; border-color: color-mix(in srgb, var(--acc) 55%, var(--line2)); }
.bar { min-height: 7px; overflow: hidden; }
.bar > i { border-radius: inherit; }
#tabs button.on { color: var(--text); }
#tabs button.on::before { left: 20%; right: 20%; height: 3px; }
#v-cosmos .small, #v-cosmos .tiny { color: var(--text); }
@media (max-width: 360px) {
  .view { padding-left: 10px; padding-right: 10px; }
  .top-right { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .mini, .chip, .icon-btn, #tabs button { transition: none; }
}

/* ---------------------------------------------------------------- Atlas vivant · Domaine
 * Une page de registre lisible : hiérarchie, traits de plume, rythmes réguliers.
 * Tous les sélecteurs sont purement visuels ; aucun geste ni événement modifié.
 */
:where(#v-domaine) {
  --atlas-rule: color-mix(in srgb, var(--text) 21%, transparent);
  --atlas-wash: color-mix(in srgb, var(--acc) 7%, var(--panel));
}
:where(#v-domaine) h2.title {
  font-size: clamp(25px, 6.2vw, 33px);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 9px 2px 16px;
  padding-bottom: 12px;
  border-bottom: 3px double var(--atlas-rule);
}
:where(#v-domaine) h3.sub {
  font-family: var(--label, var(--sans));
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  color: var(--muted);
  margin-top: 22px;
}
:where(#v-domaine) .card,
:where(#v-domaine) .dom-card {
  border: 1px solid var(--atlas-rule);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--text) 5%, transparent);
}
:where(#v-domaine) .goal-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--acc) 70%, var(--text));
  border-left: 4px solid var(--acc);
  border-radius: 5px 9px 9px 5px;
  background: var(--atlas-wash);
  padding: 14px;
}
:where(#v-domaine) .goal-card .lbl,
:where(#v-domaine) .goal .lbl {
  font-size: 12px;
  letter-spacing: .12em;
}
:where(#v-domaine) .goal .name {
  font-size: 20px;
  line-height: 1.22;
}
:where(#v-domaine) .dom-th {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--atlas-rule);
  align-items: baseline;
}
:where(#v-domaine) .dom-th h3,
:where(#v-domaine) .dom-card h3 {
  font-size: clamp(20px, 5.2vw, 25px);
  line-height: 1.18;
  letter-spacing: -.012em;
}
:where(#v-domaine) .dom-terre { gap: 10px; }
:where(#v-domaine) .gis {
  min-height: 62px;
  padding-block: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
}
:where(#v-domaine) .gis:last-child { border-bottom-color: transparent; }
:where(#v-domaine) .gis-ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: color-mix(in srgb, var(--acc) 5%, var(--panel));
}
:where(#v-domaine) .gis-ic.hand {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 12%, transparent);
}
:where(#v-domaine) .gis-l1 { font-size: 16px; line-height: 1.25; font-weight: 650; }
:where(#v-domaine) .gis-l2 { font-size: 13px; line-height: 1.35; color: var(--muted); }
:where(#v-domaine) .dom-rate { font-size: 14px; }
:where(#v-domaine) .dom-tip {
  border-radius: 6px;
  border-left: 3px solid var(--intu);
  border-top: 1px solid var(--line2);
  border-right: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  background: color-mix(in srgb, var(--intu) 7%, var(--panel));
  padding: 11px 13px;
  line-height: 1.48;
}
:where(#v-domaine) .dom-lieu .bar { height: 6px; margin-top: 5px; }
:where(#v-domaine) .dom-ruine { border-radius: 6px; padding: 11px 12px; }
:where(#v-domaine) .dom-epi { font-size: 19px; line-height: 1.4; margin-block: 17px; }
:where(#v-domaine) .btn.pri {
  border-color: var(--acc);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--text) 15%, transparent);
}
:where(#v-domaine) .btn:focus-visible,
:where(#v-domaine) .mini:focus-visible,
:where(#v-domaine) .gis-ic:focus-visible { outline-offset: 2px; }
@media (max-width: 360px) {
  :where(#v-domaine) .gis { gap: 7px; }
  :where(#v-domaine) .gis-ic { flex-basis: 44px; width: 44px; height: 44px; }
  :where(#v-domaine) .goal-card { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(#v-domaine) .gis-ic { animation: none; }
}

/* ATLAS VIVANT — expérimentation assumée, page du Domaine */
html, body { max-width: 100%; overflow-x: clip; }
#app, #views, .view { min-width: 0; max-width: 100%; }
#views { overflow-x: clip; }
:where(#v-domaine) { overflow-wrap: anywhere; }
:where(#v-domaine) :is(.row,.gis,.dom-th,.sub-row) > * { min-width: 0; }
:where(#v-domaine) :is(.card,.dom-card,.goal-card,.dom-tip) { max-width: 100%; }

/* La page devient un feuillet relié : double filet, encre, accent marginal. */
:where(#v-domaine) {
  position: relative;
  padding-inline: clamp(12px, 4vw, 24px);
  background:
    linear-gradient(90deg, color-mix(in srgb,var(--acc) 15%,transparent) 0 2px, transparent 2px) 8px 0 / 3px 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb,var(--text) 12%,transparent) 0 1px, transparent 1px) 13px 0 / 2px 100% no-repeat;
}
:where(#v-domaine) h2.title {
  font-size: clamp(29px, 7.8vw, 42px);
  font-weight: 500;
  letter-spacing: -.035em;
  padding: 8px 0 18px;
  margin: 8px 0 20px;
  border-bottom: 4px double color-mix(in srgb,var(--text) 60%,transparent);
}
:where(#v-domaine) h3.sub {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .17em;
  color: var(--text);
  margin: 26px 0 12px;
}
:where(#v-domaine) h3.sub::after {
  content: "";
  flex: 1;
  min-width: 10px;
  border-top: 1px solid color-mix(in srgb,var(--text) 30%,transparent);
}
:where(#v-domaine) .card, :where(#v-domaine) .dom-card {
  border: 1px solid color-mix(in srgb,var(--text) 38%,transparent);
  border-radius: 3px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--acc) 5%,transparent),transparent 46%),
    color-mix(in srgb,var(--panel) 97%,var(--bg));
  box-shadow: 3px 4px 0 color-mix(in srgb,var(--text) 10%,transparent);
  padding: clamp(12px,3.5vw,20px);
  margin-bottom: 18px;
}
:where(#v-domaine) .goal-card {
  border: 1px solid var(--text);
  border-left: 6px solid var(--acc);
  border-radius: 2px;
  background: color-mix(in srgb,var(--acc) 12%,var(--panel));
  padding: 17px 15px;
  box-shadow: 4px 4px 0 color-mix(in srgb,var(--acc) 20%,transparent);
}
:where(#v-domaine) .goal .name { font-size: clamp(22px,5.6vw,29px); }
:where(#v-domaine) .dom-th {
  border-bottom: 2px solid color-mix(in srgb,var(--text) 55%,transparent);
  padding-bottom: 13px;
  margin-bottom: 5px;
}
:where(#v-domaine) .dom-th h3, :where(#v-domaine) .dom-card h3 {
  font-size: clamp(23px,6vw,30px);
}
:where(#v-domaine) .gis {
  padding-block: 12px;
  min-height: 76px;
  border-bottom: 1px dashed color-mix(in srgb,var(--text) 25%,transparent);
}
:where(#v-domaine) .gis-ic {
  border-radius: 3px;
  background: color-mix(in srgb,var(--acc) 11%,var(--panel));
  border: 1.5px solid color-mix(in srgb,var(--text) 48%,transparent);
  box-shadow: inset 0 0 0 3px var(--panel);
}
:where(#v-domaine) .gis-l1 { font-size: 17px; }
:where(#v-domaine) .dom-tip {
  border-radius: 2px;
  border: 1px dashed var(--intu);
  border-left: 5px solid var(--intu);
  background: color-mix(in srgb,var(--intu) 11%,var(--panel));
  padding: 13px 14px;
}
:where(#v-domaine) .btn { border-radius: 4px; }
:where(#v-domaine) .btn.pri { box-shadow: 3px 3px 0 color-mix(in srgb,var(--text) 28%,transparent); }
:where(#v-domaine) .dom-epi { font-size: 21px; padding: 10px 0; }
@media (max-width: 380px) {
  :where(#v-domaine) { padding-inline: 12px; }
  :where(#v-domaine) .card, :where(#v-domaine) .dom-card { padding: 12px; }
  :where(#v-domaine) .gis { gap: 7px; }
  :where(#v-domaine) .gis-l1 { font-size: 15px; }
  :where(#v-domaine) .gis-b { gap: 3px; }
}

/* ========================================================================
   ATLAS VIVANT · MANIFESTE VISUEL / V1
   Langage transversal, volontairement expressif, sans changement de gameplay.
   ======================================================================== */
:root {
  --atlas-ink: color-mix(in srgb, var(--text) 80%, var(--acc));
  --atlas-hairline: color-mix(in srgb, var(--text) 24%, transparent);
  --atlas-stamp: color-mix(in srgb, var(--acc) 16%, var(--panel));
}
#app { isolation: isolate; }
#views { scrollbar-color: var(--atlas-hairline) transparent; }
.view { min-width: 0; }
.view > * { max-width: 100%; }
.view :is(.row,.sub-row,.sheet-h,.goal,.dom-th,.gis,.mrow) { min-width: 0; }
.view :is(.row,.sub-row,.sheet-h,.goal,.dom-th,.gis,.mrow) > * { min-width: 0; }
.view :is(h1,h2,h3,p,.small,.tiny,.muted) { overflow-wrap: break-word; }

/* Couverture et index : l'âge devient le cartouche du livre. */
#top {
  min-height: calc(70px + var(--safe-t));
  height: auto;
  padding-block: calc(8px + var(--safe-t)) 8px;
  border-bottom: 3px double var(--atlas-ink);
  box-shadow: 0 4px 0 color-mix(in srgb,var(--text) 6%,transparent);
}
#top .age { border-left: 3px solid var(--acc); padding-left: 10px; }
#top .age #ageName { font-size: clamp(20px,5.4vw,27px); letter-spacing: -.02em; }
#top .age-bar-track { height: 4px; margin-top: 7px; }
#top .age-sub small { font-size: 10px; }
#top .icon-btn { border-radius: 4px; border-color: var(--atlas-hairline); }
#top .chip { border-radius: 4px; border-color: var(--atlas-hairline); background: var(--atlas-stamp); }
#tabs {
  min-height: calc(72px + var(--safe-b));
  height: calc(72px + var(--safe-b));
  border-top: 3px double var(--atlas-ink);
  box-shadow: 0 -5px 0 color-mix(in srgb,var(--text) 6%,transparent);
}
#tabs button { gap: 4px; border-right: 1px solid var(--atlas-hairline); }
#tabs button:last-child { border-right: 0; }
#tabs button.on { background: color-mix(in srgb,var(--acc) 11%,transparent); }
#tabs button.on::before { left: 0; right: 0; top: 0; height: 4px; }
#tabs button span { font-size: 12px; font-weight: 700; letter-spacing: .015em; }
#tabs .gi { width: 23px; height: 23px; }

/* Titres de chapitre, repères de lecture et surfaces documentaires. */
.view h2.title {
  font-size: clamp(28px,7vw,38px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -.035em;
  margin: 12px 0 20px;
  padding: 4px 0 15px;
  border-bottom: 3px double var(--atlas-ink);
}
.view h3.sub {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .15em;
  color: var(--text);
}
.view .card,
.view .rec,
.view .stepbox,
.view .passbox,
.view .dom-card {
  border-radius: 4px;
  border-color: var(--atlas-hairline);
  background: var(--panel);
}
.view .card.acc { border-left: 4px solid var(--acc); }
.view .btn { border-radius: 5px; min-height: 42px; }
.view .btn.pri { border-width: 1.5px; box-shadow: 2px 2px 0 var(--atlas-hairline); }
.view .mini { border-radius: 4px; }
.view .ic:not(.sym) { border-radius: 4px; }
.view .ic.sym { border-radius: 5px; box-shadow: none; border-width: 1.5px; }
.view .bar { height: 9px; border-radius: 2px; }
.view .bar > i { border-radius: 1px; }

/* Atelier : planche de travail, gestes comme outils gravés. */
#v-atelier .gestes { gap: 9px; padding-block: 7px 13px; }
#v-atelier .geste {
  width: 77px;
  min-height: 77px;
  border-radius: 5px;
  border: 1.5px solid var(--atlas-hairline);
  background: color-mix(in srgb,var(--panel) 90%,var(--acc));
}
#v-atelier .geste.on {
  border: 2px solid var(--acc);
  box-shadow: inset 0 0 0 2px var(--panel), 0 3px 0 var(--atlas-hairline);
}
#v-atelier .geste .gn { font-size: 12px; font-weight: 650; }
#v-atelier .bench { border-radius: 4px; outline: 2px solid color-mix(in srgb,var(--text) 20%,transparent); outline-offset: -6px; }
#v-atelier .slot { border-radius: 5px; }
#v-atelier .inv { border-radius: 5px; }

/* Carte : la carte reste une carte, pas un tableau de bord. */
#v-carte .card, #v-carte .dom-card { border-radius: 4px; }
#v-carte .carte-svg { filter: drop-shadow(0 3px 0 color-mix(in srgb,var(--text) 8%,transparent)); }

/* Carnet et Arbre : fiches et planches d'étude. */
#v-carnet .rec { border-left: 3px solid var(--atlas-ink); padding-block: 13px; }
#v-arbre .card, #v-arbre .rec { border-style: solid; }
#v-carnet h3.sub, #v-arbre h3.sub, #v-journal h3.sub {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--atlas-hairline);
}
#v-journal .card { border-left: 3px solid var(--atlas-ink); }
#v-machines .card { border-top: 3px solid var(--atlas-ink); }

/* Modales : feuilles posées sur l'atlas. */
.modal-box {
  border-radius: 5px;
  border: 2px solid var(--atlas-ink);
  box-shadow: 6px 8px 0 color-mix(in srgb,var(--text) 18%,transparent);
  max-width: min(94vw, 580px);
}
.modal-box :is(h2,h3) { line-height: 1.2; }
#toasts > * { border-radius: 4px; }

/* L'observatoire est volontairement une rupture : aucune texture de papier. */
#v-cosmos { --atlas-ink: #d4c4a3; --atlas-hairline: rgba(232,226,214,.24); }
#v-cosmos .card { background: #161c26; }
#v-cosmos h2.title { border-color: rgba(232,226,214,.4); }

/* Sécurité mobile : aucun composant non défilant ne pousse la page en largeur. */
html, body, #app { width: 100%; max-width: 100%; }
#app { overflow-x: clip; }
#views, .view { min-width: 0; max-width: 100%; }
.view :is(img,svg,canvas,video) { max-width: 100%; }
.view :is(input,select,textarea) { max-width: 100%; }
.view :is(.card,.dom-card,.rec,.stepbox,.passbox,.modal-box) { min-width: 0; }
@media (max-width: 390px) {
  #top { gap: 3px; padding-inline: 6px; }
  #top .age { min-width: 65px; padding-left: 5px; }
  #top .age #ageName { font-size: 18px; }
  #top .chip { padding-inline: 5px; }
  #top .icon-btn { width: 36px; height: 38px; }
  #tabs button span { font-size: 11px; }
  .view { padding-inline: 10px; }
  #v-atelier .geste { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  #app, #v-carte .carte-svg { transition: none; }
}

/* Les modes d'affichage explicites priment sur le style Atlas. */
body.dom-dense :where(#v-domaine) .gis,
.dom-dense :where(#v-domaine) .gis { min-height: 0; padding-block: 3px; }
body.dom-dense :where(#v-domaine) .gis-ic,
.dom-dense :where(#v-domaine) .gis-ic { flex-basis: 40px; width: 40px; height: 40px; }
body.dom-dense :where(#v-domaine) .gis-l1,
.dom-dense :where(#v-domaine) .gis-l1 { font-size: 14px; }
body.dom-dense :where(#v-domaine) .gis-l2,
.dom-dense :where(#v-domaine) .gis-l2 { font-size: 12px; }

/* =====================================================================
   ATLAS / GRANDE PLANCHE — rupture visuelle assumée.
   Les décors existants deviennent les images principales des feuillets.
   ===================================================================== */
body:not([data-ep="bord"]) {
  --atlas-page-shadow: color-mix(in srgb,var(--text) 14%,transparent);
}
#views {
  background:
    linear-gradient(90deg,rgba(0,0,0,.07) 0,transparent 12px,transparent calc(100% - 12px),rgba(0,0,0,.045) 100%),
    var(--paper), var(--bg);
}
:where(#v-domaine) {
  padding: 0 12px calc(var(--nav) + var(--safe-b) + 36px);
  background: none;
}
:where(#v-domaine) > .dom {
  padding: 12px 0;
}
:where(#v-domaine) .dom-terre {
  position: relative;
  display: block;
  isolation: isolate;
  padding: 0 14px 14px;
  margin: 18px 0 28px;
  border: 1px solid color-mix(in srgb,var(--text) 48%,transparent);
  border-radius: 2px;
  background: var(--panel);
  box-shadow: 5px 6px 0 var(--atlas-page-shadow);
}
:where(#v-domaine) .dom-terre::before {
  content: "T E R R E  ·  É C L A T";
  display: block;
  padding: 8px 0 7px;
  border-bottom: 1px solid var(--atlas-hairline);
  font: 700 10px/1.3 "IBM Plex Mono",monospace;
  letter-spacing: .13em;
  color: var(--muted);
}
:where(#v-domaine) .dom-terre.a-decor::after {
  content: "";
  display: block;
  position: absolute;
  inset: 30px 0 auto;
  height: clamp(165px,49vw,245px);
  z-index: -1;
  background:
    linear-gradient(180deg,rgba(20,15,10,.02) 0%,rgba(20,15,10,.05) 56%,var(--panel) 100%),
    var(--decor) center 42% / cover no-repeat;
  filter: saturate(.85) contrast(1.08);
  pointer-events: none;
}
:where(#v-domaine) .dom-terre.a-decor .dom-th {
  min-height: clamp(165px,49vw,245px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 35px 10px 18px;
  margin: 0 -14px 12px;
  position: relative;
  border: 0;
  background: linear-gradient(0deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 86%,transparent) 26%,transparent 80%);
}
:where(#v-domaine) .dom-terre.a-decor .dom-th h3 {
  font: 400 clamp(32px,9vw,52px)/1.05 var(--serif);
  letter-spacing: -.045em;
  max-width: 100%;
  text-shadow: 0 1px 0 var(--panel),1px 0 0 var(--panel),-1px 0 0 var(--panel);
}
:where(#v-domaine) .dom-terre:not(.a-decor) .dom-th {
  padding: 18px 0 15px;
  margin-bottom: 12px;
}
:where(#v-domaine) .dom-terre:not(.a-decor) .dom-th h3 {
  font-size: clamp(27px,7vw,39px);
}
:where(#v-domaine) .dom-terre .dom-lieu {
  max-width: 100%;
  flex: 0 1 auto;
}
:where(#v-domaine) .dom-terre .dom-lieu .btn {
  background: var(--panel);
  border: 1px solid var(--text);
  box-shadow: 3px 3px 0 var(--atlas-page-shadow);
}
:where(#v-domaine) .dom-terre .gis {
  padding: 12px 0;
  margin: 0;
  min-height: 76px;
  border-bottom: 1px solid var(--atlas-hairline);
}
:where(#v-domaine) .dom-terre .gis:last-of-type { border-bottom: 0; }
:where(#v-domaine) .dom-terre .gis-ic {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  background: var(--panel2);
  box-shadow: inset 0 0 0 4px var(--panel),0 2px 0 var(--atlas-page-shadow);
}
:where(#v-domaine) .dom-terre .gis-l1 { font-size: 18px; }
:where(#v-domaine) .dom-terre .gis-l1 b { font-family: var(--serif); font-weight: 600; }
:where(#v-domaine) .dom-terre .dom-rate {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid var(--atlas-hairline);
  border-radius: 2px;
  background: var(--panel2);
  font: 600 12px/1.25 "IBM Plex Mono",monospace;
}
:where(#v-domaine) .dom-terre .gis-b .mini {
  border-radius: 3px;
  border: 1.5px solid var(--text);
  background: var(--panel);
  box-shadow: 2px 2px 0 var(--atlas-page-shadow);
}
:where(#v-domaine) .dom-terre .dom-regle {
  padding: 12px;
  margin: 0 0 6px;
  border-left: 3px solid var(--acc);
  background: var(--panel2);
}
:where(#v-domaine) .dom-card {
  border-top: 5px double var(--text);
  padding: 18px;
}
:where(#v-domaine) .dom-card h3 {
  font-size: clamp(24px,6vw,32px);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--atlas-hairline);
}
:where(#v-domaine) .dom-epi {
  padding: 25px 15px;
  margin: 24px 0;
  border-top: 3px double var(--atlas-ink);
  border-bottom: 3px double var(--atlas-ink);
  font-size: clamp(20px,5.5vw,28px);
}
/* L'affichage compact garde priorité : l'illustration reste, mais les lignes se resserrent. */
:where(#v-domaine) .dom-dense .dom-terre .gis { min-height: 0; padding: 3px 0; }
:where(#v-domaine) .dom-dense .dom-terre .gis-ic { flex-basis: 40px; width: 40px; height: 40px; }
:where(#v-domaine) .dom-dense .dom-terre .gis-l1 { font-size: 14px; }
:where(#v-domaine) .dom-dense .dom-terre { margin-bottom: 14px; }
@media (max-width: 360px) {
  :where(#v-domaine) { padding-inline: 8px; }
  :where(#v-domaine) .dom-terre { padding-inline: 10px; }
  :where(#v-domaine) .dom-terre.a-decor .dom-th { margin-inline: -10px; }
  :where(#v-domaine) .dom-terre .gis { gap: 6px; }
  :where(#v-domaine) .dom-terre .gis-b { gap: 3px; }
  :where(#v-domaine) .dom-terre .gis-b .mini { min-width: 40px; padding-inline: 4px; }
}

/* =====================================================================
   ATLAS VIVANT / THEME II — IDENTITÉ MATÉRIELLE DES ÉPOQUES
   Rupture volontaire avec le thème classique. Palette, lumière, papier,
   encre et ornements changent avec l'histoire de la civilisation.
   ===================================================================== */

/* Bois / pierre : terre sombre, charbon, ocre rouge, papier de fibres. */
body[data-ep="pigments"] {
  --bg: #c6ad85;
  --bg2: #b99b70;
  --panel: #f0dfbd;
  --panel2: #dfc69b;
  --text: #302219;
  --muted: #654d37;
  --dim: #806a50;
  --line: rgba(48,34,25,.23);
  --line2: rgba(48,34,25,.48);
  --acc-base: #ad3c23;
  --good: #3e652e;
  --intu: #805313;
  --paper:
    repeating-linear-gradient(2deg,rgba(69,40,22,.065) 0 1px,transparent 1px 7px),
    radial-gradient(ellipse at 82% 12%,rgba(255,241,203,.4),transparent 57%),
    radial-gradient(ellipse at 10% 87%,rgba(107,61,27,.19),transparent 60%);
}
/* Papyrus : végétal, Nil, cuivre oxydé, fibres horizontales. */
body[data-ep="papyrus"] {
  --bg: #bda879;
  --bg2: #ad9564;
  --panel: #f1e3bb;
  --panel2: #ddc99b;
  --text: #292b1d;
  --muted: #5e6144;
  --dim: #7c7e5c;
  --line: rgba(41,43,29,.22);
  --line2: rgba(41,43,29,.43);
  --acc-base: #176c61;
  --good: #396b38;
  --paper:
    repeating-linear-gradient(0deg,rgba(68,77,40,.09) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(68,77,40,.04) 0 1px,transparent 1px 17px);
}
/* Enluminure : ivoire, vermillon, dorure. */
body[data-ep="enluminure"] {
  --bg: #c7b68f;
  --bg2: #bba780;
  --panel: #f8eed5;
  --panel2: #e7d6b0;
  --text: #2b211c;
  --muted: #665449;
  --dim: #877567;
  --line: rgba(43,33,28,.2);
  --line2: rgba(43,33,28,.42);
  --acc-base: #9a2025;
  --good: #295e53;
  --paper:
    repeating-linear-gradient(90deg,transparent 0 35px,rgba(113,45,36,.065) 35px 36px),
    radial-gradient(ellipse at 50% 0%,rgba(255,250,228,.45),transparent 70%);
}
/* Archives mécaniques : papier de bureau, encre bleue, cachets rouges. */
body[data-ep="registre"] {
  --bg: #aeb8b4;
  --bg2: #9daaa7;
  --panel: #f2efe3;
  --panel2: #dce2dc;
  --text: #172d3c;
  --muted: #4a6170;
  --dim: #77848a;
  --line: rgba(23,45,60,.2);
  --line2: rgba(23,45,60,.4);
  --acc-base: #a6322d;
  --good: #246a5b;
  --paper:
    repeating-linear-gradient(180deg,transparent 0 29px,rgba(31,88,127,.14) 29px 30px),
    linear-gradient(90deg,transparent 0 40px,rgba(163,52,47,.16) 40px 42px,transparent 42px);
}
/* Technique et industrie : bleu d'architecte, blanc technique. */
body[data-ep="quadrille"] {
  --bg: #cad7dc;
  --bg2: #b5c8d1;
  --panel: #f5f8f6;
  --panel2: #dbe7e8;
  --text: #173d57;
  --muted: #496879;
  --dim: #718b98;
  --line: rgba(23,61,87,.2);
  --line2: rgba(23,61,87,.4);
  --acc-base: #136b62;
  --good: #166b47;
  --paper:
    linear-gradient(rgba(30,93,127,.16) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(30,93,127,.16) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(rgba(30,93,127,.06) 1px,transparent 1px) 0 0/5px 5px,
    linear-gradient(90deg,rgba(30,93,127,.06) 1px,transparent 1px) 0 0/5px 5px;
}
/* Frontière spatiale : interface de mission, noir graphite et orange. */
body[data-ep="bord"] {
  --bg: #17232b;
  --bg2: #101a22;
  --panel: #22343d;
  --panel2: #2b424a;
  --text: #f4eee2;
  --muted: #b9c6c7;
  --dim: #8da3a9;
  --line: rgba(235,245,242,.18);
  --line2: rgba(235,245,242,.4);
  --acc-base: #f3a64e;
  --good: #8bd4b3;
  --bad: #ff9b8e;
  --intu: #ffd27a;
  --paper:
    linear-gradient(rgba(148,200,214,.07) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(148,200,214,.07) 1px,transparent 1px) 0 0/28px 28px,
    radial-gradient(ellipse at 70% 0%,rgba(62,124,146,.26),transparent 65%);
  color-scheme: dark;
}

/* Le papier physique s'arrête aux limites des feuillets. */
body:not([data-ep="bord"]) #views {
  background:
    linear-gradient(90deg,rgba(28,23,15,.12),transparent 12px,transparent calc(100% - 12px),rgba(28,23,15,.09)),
    var(--paper),var(--bg);
}
body[data-ep="bord"] #views { background: var(--paper),var(--bg); }
#top, #tabs {
  background: var(--panel);
  color: var(--text);
  border-color: var(--text);
}
#top { box-shadow: 0 5px 0 color-mix(in srgb,var(--text) 15%,transparent); }
#tabs { box-shadow: 0 -5px 0 color-mix(in srgb,var(--text) 12%,transparent); }
#tabs button.on { background: var(--panel2); }
#tabs button.on::before { background: var(--acc-base); }
#ageName { color: var(--text); }
.age-bar-fill { background: var(--acc-base); }
.view .card, .view .dom-card, .view .rec, .view .stepbox, .view .passbox {
  background: var(--panel);
  color: var(--text);
}
.view .btn.pri { background: var(--acc-base); color: var(--panel); border-color: var(--text); }
body[data-ep="bord"] .view .btn.pri { color: #171e21; }
.view .mini, .view .btn, .view .gis-ic { color: var(--text); }
:where(#v-domaine) .dom-terre {
  background: var(--panel);
  border-color: var(--text);
  box-shadow: 7px 8px 0 color-mix(in srgb,var(--text) 19%,transparent);
}
:where(#v-domaine) .dom-terre.a-decor .dom-th {
  background: linear-gradient(0deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 92%,transparent) 25%,transparent 90%);
}
body[data-ep="bord"] :where(#v-domaine) .dom-terre.a-decor::after {
  filter: saturate(.65) contrast(1.15);
}
body[data-ep="bord"] :where(#v-domaine) .dom-terre.a-decor .dom-th h3 {
  text-shadow: 0 1px 1px var(--panel),1px 0 var(--panel),-1px 0 var(--panel);
}
body[data-ep="enluminure"] :where(#v-domaine) .dom-terre {
  border: 3px double #8f6c2e;
}
body[data-ep="enluminure"] :where(#v-domaine) .dom-terre::before {
  color: #7d5720;
  border-bottom: 2px solid #a68745;
}
body[data-ep="quadrille"] :where(#v-domaine) .dom-terre {
  box-shadow: 5px 5px 0 #517e9c;
}
body[data-ep="bord"] :where(#v-domaine) .dom-terre {
  border: 1px solid #6e969d;
  box-shadow: 0 0 0 1px #314c59,5px 5px 0 #0c151b;
}
@media (prefers-reduced-motion: reduce) {
  #top, #tabs { transition: none; }
}

/* ATLAS / CARTE D'EXPLORATION : support, légende et reliefs. */
#v-carte { padding: 0 0 22px; background: var(--panel); }
#v-carte .carte {
  position: relative;
  padding: 0 0 16px;
  background:
    radial-gradient(ellipse at 20% 12%,color-mix(in srgb,var(--acc-base) 9%,transparent),transparent 48%),
    repeating-linear-gradient(30deg,transparent 0 19px,color-mix(in srgb,var(--text) 3%,transparent) 19px 20px),
    var(--panel);
  border-inline: 1px solid var(--line);
}
#v-carte .atlas-map-heading {
  padding: 19px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 3px double var(--line2);
  background: var(--panel);
}
#v-carte .atlas-map-kicker {
  font: 700 10px/1.4 "IBM Plex Mono",monospace;
  letter-spacing: .16em;
  color: var(--acc-base);
}
#v-carte .atlas-map-heading strong {
  font: 400 clamp(25px,7vw,38px)/1.15 var(--serif);
  color: var(--text);
}
#v-carte .atlas-map-sub {
  font: italic 14px/1.5 var(--serif);
  color: var(--muted);
}
#v-carte .carte-svg {
  width: 100%;
  max-width: 560px;
  height: auto;
  overflow: visible;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 30%,color-mix(in srgb,var(--text) 7%,transparent) 100%),
    var(--paper),var(--panel);
}
#v-carte .carte-svg .atlas-contour {
  fill: none;
  stroke: var(--muted);
  stroke-width: .8;
  opacity: .28;
  stroke-dasharray: 3 5;
}
#v-carte .carte-svg .atlas-forest,
#v-carte .carte-svg .atlas-ridge {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  opacity: .48;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#v-carte .carte-svg .c-fog { opacity: .3; }
#v-carte .carte-svg .c-mist {
  fill: color-mix(in srgb,var(--panel) 85%,var(--muted));
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-dasharray: 4 6;
}
#v-carte .carte-svg .c-mist-h { opacity: .34; }
#v-carte .carte-svg .c-name {
  font: 600 25px/1 var(--serif);
  stroke: var(--panel);
  stroke-width: 6px;
}
#v-carte .carte-svg .c-vague {
  font: italic 17px/1.3 var(--serif);
  stroke: var(--panel);
  stroke-width: 5px;
}
#v-carte .carte-svg .c-road {
  stroke: var(--acc-base);
  stroke-width: 2.8;
  stroke-dasharray: 2 7;
}
#v-carte .carte-svg .c-lieu circle:first-child {
  fill: var(--panel);
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px color-mix(in srgb,var(--text) 25%,transparent));
}
#v-carte .atlas-map-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  padding: 13px 17px 4px;
  margin-top: 8px;
  border-top: 3px double var(--line2);
  color: var(--muted);
  font: 600 12px/1.5 var(--sans);
}
#v-carte .atlas-map-footer span { white-space: normal; }
@media (max-width: 360px) {
  #v-carte .atlas-map-heading { padding-inline: 12px; }
  #v-carte .atlas-map-footer { padding-inline: 10px; gap: 7px 10px; font-size: 11px; }
}

/* Carte de jeu : les derniers lieux ne doivent jamais finir sous l'onglet fixe. */
#v-carte { padding-bottom: max(180px, calc(var(--safe-b, 0px) + 130px)); }
#v-carte .carte-svg { overflow: visible; }
#v-carte .carte-svg .atlas-compass circle {
  fill: var(--panel);
  stroke: var(--muted);
  stroke-width: 1.3;
}
#v-carte .carte-svg .atlas-compass path {
  fill: var(--panel2);
  stroke: var(--text);
  stroke-width: 1;
}
#v-carte .carte-svg .atlas-compass .atlas-compass-needle {
  fill: var(--acc-base);
  stroke: var(--acc-base);
}
#v-carte .carte-svg .atlas-compass text {
  font: 700 11px var(--serif);
  text-anchor: middle;
  fill: var(--text);
}
#v-carte .carte-svg .c-art {
  filter: drop-shadow(0 3px 4px color-mix(in srgb,var(--text) 28%,transparent));
}
#v-carte .carte-svg .c-zone:focus-visible,
#v-carte .carte-svg .c-lieu:focus-visible,
#v-carte .carte-svg .c-ahead:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 4px var(--acc-base));
}

/* Biomes dessinés en marge des illustrations : le paysage suit la découverte. */
#v-carte .carte-svg .atlas-water {
  fill: none;
  stroke: #50899a;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .43;
}
#v-carte .carte-svg .atlas-water-thin {
  stroke: var(--panel);
  stroke-width: 2;
  opacity: .75;
}
#v-carte .carte-svg .atlas-dune {
  fill: none;
  stroke: #b28b51;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .55;
}
#v-carte .carte-svg .atlas-waypoint {
  fill: var(--acc-base);
  stroke: var(--panel);
  stroke-width: 1.4;
}
#v-carte .carte-svg .c-ahead {
  opacity: .84;
  transition: opacity .3s ease;
}
#v-carte .carte-svg .c-ahead:is(:hover,:focus-visible) { opacity: 1; }
#v-carte .carte-svg .c-zone { transition: filter .22s ease; }
#v-carte .carte-svg .c-zone:hover { filter: drop-shadow(0 0 5px color-mix(in srgb,var(--acc-base) 28%,transparent)); }
#v-carte .carte-svg .c-art { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #v-carte .carte-svg .c-ahead,
  #v-carte .carte-svg .c-zone { transition: none; }
}

/* ATLAS V1 — finition de l'écran d'exploration. */
#v-carte .atlas-map-heading { gap: 5px; }
#v-carte .atlas-map-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  margin-top: 12px;
}
#v-carte .atlas-map-actions button {
  appearance: none;
  min-width: 0;
  min-height: 44px;
  padding: 9px 8px;
  border: 1px solid var(--line2);
  border-radius: 3px;
  background: var(--panel2);
  color: var(--text);
  font: 700 13px/1.2 var(--sans);
  box-shadow: 2px 3px 0 color-mix(in srgb,var(--text) 12%,transparent);
  cursor: pointer;
  touch-action: manipulation;
}
#v-carte .atlas-map-actions button:last-child {
  background: color-mix(in srgb,var(--acc-base) 12%,var(--panel));
  border-color: var(--acc-base);
}
#v-carte .atlas-map-actions button:focus-visible {
  outline: 3px solid var(--acc-base);
  outline-offset: 3px;
}
#v-carte .carte-svg .atlas-landscape { pointer-events: none; }
#v-carte .carte-svg .atlas-valley {
  fill: none;
  stroke: color-mix(in srgb,var(--good) 46%,var(--muted));
  stroke-width: 19;
  stroke-linecap: round;
  opacity: .12;
}
#v-carte .carte-svg .atlas-valley-outer {
  stroke-width: 12;
  opacity: .10;
}
#v-carte .carte-svg .atlas-contour-wide {
  fill: none;
  stroke: var(--muted);
  stroke-width: .8;
  stroke-dasharray: 3 7;
  opacity: .26;
}
#v-carte .carte-svg .c-hit { fill: transparent; }
#v-carte .carte-svg .c-name { pointer-events: auto; }
#v-carte .carte-svg .c-fog { opacity: .2; }
#v-carte .carte-svg .c-ahead .c-vague { pointer-events: none; }
#v-carte .carte-svg .c-lieu { touch-action: manipulation; }
#v-carte .carte-svg .c-lieu circle:first-child { stroke-width: 2; }
#v-carte .atlas-map-footer {
  justify-content: center;
  background: color-mix(in srgb,var(--panel2) 70%,var(--panel));
  padding-block: 14px;
}
@media (max-width: 360px) {
  #v-carte .atlas-map-actions { gap: 7px; }
  #v-carte .atlas-map-actions button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #v-carte .atlas-map-actions button { transition: none; }
}

/* L'en-tête et le paysage sont conservés dans le DOM pour que le comparateur
   puisse basculer instantanément, y compris si le jeu démarre en Classique. */
#v-carte .atlas-map-heading,
#v-carte .atlas-map-footer { display: flex; }
#v-carte .carte-svg .atlas-landscape,
#v-carte .carte-svg .atlas-terrain,
#v-carte .carte-svg .atlas-compass { display: inline; }