/* ============================================================
   MYTHÉO — Atlas des mythes (carte du monde) : styles.
   Utilise les tokens de la charte (base.css) : typo, accent, thème.
   ============================================================ */

/* --- éléments SVG de la carte (partagés mini + plein) --- */
/* Fond de carte NEUTRE et épuré (à la « vraie carte » minimale) : les couleurs du
   monde restent aux marqueurs / fleuves / cadre, pas au fond. */
.atlas-sea { fill: #0a1015; }
.atlas-land { fill: #1d262f; stroke: #55636e; stroke-width: .9; stroke-opacity: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }

/* labels de géographie d'époque (mers, déserts, régions antiques) */
.atlas-regions { pointer-events: none; }
.atlas-region { paint-order: stroke; stroke: #0a1015; stroke-width: 3.4px; stroke-linejoin: round; transition: opacity .2s ease; }
.atlas-region.off { opacity: 0; }
/* pas de cadre de focus disgracieux sur les lieux : la sélection se voit au picto + nom */
.atlas-lieu:focus, .atlas-lieu:focus-visible { outline: none; }
.rk-sea { font-family: var(--font-body); font-style: italic; font-size: 13px; letter-spacing: .22em; fill: #86abc4; opacity: .8; }
.rk-desert { font-family: var(--font-body); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; fill: #a4936f; opacity: .66; }
.rk-region { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; fill: #c1b087; opacity: .88; }
.rk-range { font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; fill: #9a9488; opacity: .68; }
/* limites de régions d'époque : trait doux, discret */
.atlas-region-line { fill: none; stroke: #7a6f56; stroke-width: .8; stroke-opacity: .5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.atlas-mini-dot { stroke: #0f1a22; stroke-width: .8; }
.atlas-mini-grat { fill: none; stroke: #4a5762; stroke-width: .5; opacity: .1; vector-effect: non-scaling-stroke; }
.atlas-mini-vig { pointer-events: none; }

/* fleuves (géographiques : largeur de trait constante) */
.atlas-rivers { pointer-events: none; }
.atlas-river { fill: none; stroke: var(--wave, #5E8C86); stroke-width: 1.7; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: .95; }

/* pictos de lieux (halo sombre pour la lisibilité + trait dans la teinte du monde) */
.atlas-pin { pointer-events: none; }
.atlas-ico-halo { fill: none; stroke: #0a1016; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.atlas-ico { fill: none; stroke: var(--accent); stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; transition: stroke-width .12s ease; }
.atlas-lieu:hover .atlas-ico, .atlas-lieu.sel .atlas-ico, .atlas-lieu:focus-visible .atlas-ico { stroke-width: 2.7; }

/* lieux en PICTOS (carte par monde) : le nom apparaît au survol/sélection */
.atlas-lieu { cursor: pointer; }
.atlas-lieu-hit { fill: transparent; }
.atlas-lieu-name { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--text); pointer-events: none; letter-spacing: .01em;
  paint-order: stroke; stroke: #0a1016; stroke-width: 3.6px; stroke-linejoin: round; opacity: 0; transition: opacity .15s ease; }
.atlas-lieu:hover .atlas-lieu-name, .atlas-lieu:focus-visible .atlas-lieu-name, .atlas-lieu.sel .atlas-lieu-name { opacity: 1; }

/* légende (numéro → nom), bandeau défilable en bas de la carte */
.atlas-legend { position: absolute; left: 10px; right: 10px; bottom: 30px; z-index: 5; display: flex; gap: 7px;
  overflow-x: auto; padding: 4px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.atlas-legend::-webkit-scrollbar { display: none; }
.atlas-legend[hidden] { display: none; }
.atlas-leg-item { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); color: var(--text);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; backdrop-filter: blur(4px); transition: border-color .12s ease; }
.atlas-leg-item:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.atlas-leg-item.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.atlas-leg-ico { flex: none; width: 20px; height: 20px; }
.atlas-leg-ico-path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.atlas-leg-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
/* mode atlas : les 12 mythologies remplissent le bas (pastilles qui s'enroulent) */
.atlas-legend.atlas-worlds-chips { left: 14px; right: 14px; top: auto; bottom: 22px; flex-wrap: wrap; justify-content: center; align-content: flex-end; overflow: visible; gap: 9px; }

/* case à cocher « Zones mythiques » */
.atlas-realm-toggle { position: absolute; top: 12px; left: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); color: var(--text);
  font-family: var(--font-display); font-size: 14px; font-weight: 700; cursor: pointer; backdrop-filter: blur(5px); user-select: none; }
.atlas-realm-toggle[hidden] { display: none; }
.atlas-realm-toggle::before, .atlas-realm-toggle::after { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid var(--accent); pointer-events: none; }
.atlas-realm-toggle::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.atlas-realm-toggle::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.atlas-realm-toggle input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; cursor: pointer; }

/* couche node-tree des royaumes (par-dessus la carte) */
.atlas-realms-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.atlas-realms-svg[hidden] { display: none; }
.atlas-view.show-realms .atlas-svg { opacity: .14; }
.atlas-view.show-realms .atlas-legend { display: none; }
.atlas-realm-orbit { fill: none; stroke-width: 1; opacity: .07; }
.atlas-realm-edge { fill: none; stroke-width: 1.5; opacity: .42; stroke-linecap: round; }
.atlas-realm-node { cursor: pointer; }
.atlas-realm-halo { pointer-events: none; transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.atlas-realm-node.hub .atlas-realm-halo { animation: atlasBreathe 4.6s ease-in-out infinite; }
.atlas-realm-node:hover .atlas-realm-halo, .atlas-realm-node:focus-visible .atlas-realm-halo { transform: scale(1.18); }
.atlas-realm-ring { fill: none; stroke-width: 1.2; opacity: .68; transition: opacity .15s ease; }
.atlas-realm-node:hover .atlas-realm-ring, .atlas-realm-node:focus-visible .atlas-realm-ring { opacity: 1; }
.atlas-realm-disc { stroke: #0f1e28; stroke-width: 1.2; }
.atlas-realm-label { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; fill: var(--text); pointer-events: none; text-anchor: middle;
  paint-order: stroke; stroke: #0a1017; stroke-width: 3.4px; stroke-linejoin: round; }
.atlas-realm-label.hub { font-size: 15.5px; font-weight: 700; letter-spacing: .05em; fill: var(--accent-strong); }
@media (prefers-reduced-motion: reduce) { .atlas-realm-node.hub .atlas-realm-halo { animation: none; } }

/* Zoom sémantique : l'opacité des couches est pilotée en JS (fondu progressif) */
.atlas-lieux-g, .atlas-regions, .atlas-rivers, .atlas-worlds, .atlas-legend { transition: opacity .18s linear; }

.atlas-mk { cursor: pointer; }
.atlas-mk:focus-visible { outline: none; }
.atlas-glow { animation: atlasBreathe 4.5s ease-in-out infinite; }
.atlas-ring { fill: none; stroke-width: 1.1; opacity: .62; transition: opacity .2s; }
.atlas-disc { stroke: #10202a; stroke-width: 1.2; }
.atlas-glyph { font-family: var(--font-display); text-anchor: middle; dominant-baseline: central; font-size: 9px; fill: #17130a; font-weight: 700; pointer-events: none; }
.atlas-label { font-family: var(--font-display); font-size: 10.5px; fill: var(--text); pointer-events: none; letter-spacing: .01em;
  paint-order: stroke; stroke: #0d1a22; stroke-width: 3.2px; stroke-linejoin: round; opacity: .82; transition: opacity .2s; }
.atlas-label.off { opacity: 0; }
.atlas-mk:hover .atlas-glow, .atlas-mk.sel .atlas-glow { opacity: 1; }
.atlas-mk:hover .atlas-ring, .atlas-mk.sel .atlas-ring { opacity: 1; }
.atlas-mk:hover .atlas-label, .atlas-mk.sel .atlas-label { opacity: 1; }
.atlas-mk.dim { opacity: .32; transition: opacity .25s; }
@keyframes atlasBreathe { 0%,100%{opacity:.7} 50%{opacity:.95} }
@media (prefers-reduced-motion: reduce){ .atlas-glow{animation:none} }

/* --- miniature (portail), entre « fiche du jour » et la grille --- */
.atlas-mini { position: relative; display: block; text-decoration: none; margin-bottom: 18px; border-radius: var(--radius-md);
  background: var(--bg-raised); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.atlas-mini:hover { border-color: var(--accent); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent); }
.atlas-mini:active { transform: scale(.995); }
.atlas-mini::before, .atlas-mini::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--accent); pointer-events: none; z-index: 2; }
.atlas-mini::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.atlas-mini::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.atlas-mini-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 452; pointer-events: none; background:
  radial-gradient(130% 95% at 50% 42%, #11202b 0%, #0a1016 72%); }
.atlas-mini-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 15px 13px; flex-wrap: wrap; }
.atlas-mini-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.atlas-mini-sub { font-size: 13px; color: var(--accent-strong); font-weight: 600; }

/* --- page carte plein écran --- */
.atlas-page { height: 100%; }
.atlas-page body, body.atlas-body { overflow: hidden; }
.atlas-shell { position: fixed; inset: 0; display: flex; flex-direction: column; }
.atlas-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t)) 16px 10px; z-index: 5; }
.atlas-back { flex: none; width: 40px; height: 40px; border-radius: var(--radius-round); display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); font-size: 20px; text-decoration: none; }
.atlas-brand { display: flex; align-items: center; gap: 10px; }
.atlas-brand svg { width: 30px; height: 30px; flex: none; }
.atlas-brand h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; color: var(--text); }
.atlas-brand .sub { font-size: 12px; color: var(--text-dim); margin: 0; }

.atlas-main { position: relative; flex: 1; min-height: 0; }
.atlas-svg { width: 100%; height: 100%; display: block; touch-action: manipulation; }
.atlas-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(62% 60% at 50% 46%, transparent 66%, #0a1017 100%); }

/* carte d'info au clic (arêtes franches + crochets, dans la charte) */
.atlas-card { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(160%); width: min(440px, calc(100% - 26px)); z-index: 7;
  background: var(--bg-raised); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: var(--radius-md); padding: 15px 17px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
  transition: transform .34s cubic-bezier(.2,.85,.2,1), opacity .34s; opacity: 0; }
.atlas-card[hidden] { display: none; }
.atlas-card.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* quand la carte d'info est ouverte, on libère le bas (légende + indice) */
.atlas-view.show-card .atlas-legend, .atlas-view.show-card .atlas-hint { display: none; }
.atlas-card::before, .atlas-card::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--accent); pointer-events: none; }
.atlas-card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.atlas-card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.atlas-card-top { display: flex; align-items: center; gap: 13px; }
.atlas-card-ico { width: 30px; height: 30px; flex: none; }
.atlas-card-ico path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.atlas-card-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0; color: var(--text); }
.atlas-card-tag { color: var(--text-dim); font-size: 13px; margin: 2px 0 0; line-height: 1.4; }
.atlas-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.atlas-enter { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 14px; text-decoration: none; border: none; cursor: pointer; }
.atlas-enter:hover { background: var(--accent-strong); }
/* feuilleter les lieux sans quitter la carte */
.atlas-card-flips { display: flex; gap: 8px; flex: none; }
.atlas-card-flip { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-raised) 55%, transparent); border: 1.5px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent); font-family: var(--font-display); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.atlas-card-flip:hover { border-color: var(--accent); background: var(--bg-raised); }
.atlas-card-close { position: absolute; top: 8px; right: 11px; background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; line-height: 1; }

.atlas-hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: var(--text-faint); font-size: 11px; pointer-events: none; z-index: 4; }

/* --- vue Carte intégrée dans explore (5ᵉ onglet), plein cadre --- */
.stage:has(#view-carte.active) { display: flex; padding: 0; overflow: hidden; }
#view-carte { padding: 0; }
#view-carte.active { flex: 1; display: flex; min-height: 0; }
.atlas-view { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
/* glisser la carte ne doit jamais sélectionner le texte des labels */
.atlas-view, .atlas-view svg, .atlas-view text, .atlas-legend { -webkit-user-select: none; user-select: none; }
/* Mode ATLAS (12 mondes) : bloc compact centré — carte proportionnée (façon mini) +
   pastilles dessous, centré verticalement → plus de carte qui flotte dans le vide. */
.atlas-view.mode-atlas { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 18px clamp(12px, 4vw, 40px); }
.atlas-view.mode-atlas .atlas-svg { position: relative; inset: auto; width: 100%; max-width: 680px; height: auto; aspect-ratio: 1000 / 452; flex: none; border-radius: var(--radius-md); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); }
.atlas-view.mode-atlas .atlas-legend { position: relative; inset: auto; margin: 0; max-width: 680px; flex-wrap: wrap; justify-content: center; overflow: visible; }
.atlas-view.mode-atlas .atlas-vig, .atlas-view.mode-atlas .atlas-reset, .atlas-view.mode-atlas .atlas-hint { display: none; }

.atlas-view .atlas-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none;
  /* le fond prend la teinte de la mer → les bandes du letterbox se fondent (carte dans un
     océan continu au lieu de « bandes noires vides » sur écran portrait) */
  background: radial-gradient(130% 95% at 50% 42%, #11202b 0%, #0a1016 72%); }
.atlas-view .atlas-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(64% 60% at 50% 46%, transparent 66%, #0a1017 100%); }

/* bouton rond à anneau (comme les boutons circulaires de l'app) */
.atlas-reset { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%;
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent); font-size: 18px; z-index: 5; cursor: pointer; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; transition: border-color .12s ease, background .12s ease; }
.atlas-reset:hover { border-color: var(--accent); background: var(--bg-raised); }
/* icônes SVG des boutons ronds → parfaitement centrées (fini les glyphes texte décalés) */
.atlas-btn-ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.atlas-view .atlas-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: var(--text-faint); font-size: 11px; pointer-events: none; }
.tab[aria-disabled="true"] { opacity: .38; pointer-events: none; }
/* la recherche n'a pas de sens sur la carte → masquée quand la vue Carte est active */
.app:has(#view-carte.active) .searchbox { display: none; }

/* menu du bas (repris de explore.css pour cohérence) */
.tabbar { flex: none; display: flex; padding-bottom: var(--safe-b); background: var(--bg-raised); border-top: 1px solid var(--line); z-index: 20; }
.tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: var(--touch); padding: 8px 0 6px; font-size: 11px; color: var(--text-faint); text-decoration: none; }
.tabbar .tab .t-ico { width: 22px; height: 22px; }
.tabbar .tab.active, .tabbar .tab[aria-current="page"] { color: var(--accent-strong); }