/* ════════════════════════════════════════
   MYTHES & LÉGENDES — ciel interactif
   civilisations (nébuleuses) → thèmes (constellations) → légendes
════════════════════════════════════════ */

.ml-body{
  --nuit:#181229; --nuit-deep:#0d0a18;
  --lune:#e8dcc0; --lune-muted:#c9b98f;
  --violet:#6d5a9e; --violet-light:#9c8bc4;
  --etoile:#d8c98a;
  background:linear-gradient(160deg, var(--nuit) 0%, var(--nuit-deep) 100%);
  min-height:100vh;
}

/* ── nav et footer repris au thème sombre sur ces pages ── */
.ml-body nav{
  background:linear-gradient(180deg, rgba(24,18,41,0.95), rgba(13,10,24,0.95));
  border-bottom-color:rgba(216,201,138,0.15);
}
.ml-body .nav-logo{ color:var(--lune); }
.ml-body .nav-logo em{ color:var(--accent-light); }
.ml-body .nav-links a{ color:var(--parch-dark); }
.ml-body .nav-links a:hover,
.ml-body .nav-links a.nav-active{ color:var(--etoile); }
.ml-body .hamburger span{ background:var(--lune); }
@media (max-width:700px){
  .ml-body .nav-links{ background:rgba(13,10,24,0.98); border-color:rgba(216,201,138,0.15); box-shadow:0 8px 20px rgba(0,0,0,0.35); }
  .ml-body .nav-links a{ border-bottom-color:rgba(216,201,138,0.12); }
}

.ml-body footer{
  background:linear-gradient(160deg, var(--nuit) 0%, var(--nuit-deep) 100%);
  border-top-color:rgba(216,201,138,0.15);
  color:#9c8bc4;
}
.ml-body footer strong{ color:var(--lune); }
.ml-body footer a{ color:var(--etoile); }

.ml-body .breadcrumb-bar{ background:rgba(30,18,8,0.9); border-bottom:1px solid rgba(216,201,138,0.15); }
.ml-body .breadcrumb-inner{ color:var(--parch-dark); }
.ml-body .breadcrumb-inner a{ color:var(--parch-dark); }
.ml-body .breadcrumb-inner a:hover{ color:var(--etoile); }
.ml-body .bc-current{ color:var(--parch); }

/* ── hero (repris du thème sombre — .hero vient de style.css, pensé pour fond clair) ── */
.ml-body .hero h1{ color:var(--lune); }
.ml-body .hero h1 em{ color:var(--etoile); font-style:italic; }
.ml-body .hero p{ color:var(--violet-light); }
.ml-body .hero-tag{ color:var(--etoile); }
.ml-body .ornament{ color:var(--etoile); }

/* ── blason de page, en haut du hero (repris de la page de bifurcation) ── */
.ml-hero-emblem{
  width: 80px;
  height: 80px;
  margin: 0 auto 1.1rem;
  opacity: 0.92;
}

/* ── bannière de stats (équivalent sombre de .trad-stats-band) ── */
.ml-stats-band{ max-width:640px; margin:0 auto; padding:0 2rem 2.5rem; text-align:center; color:var(--etoile); }
.ml-stats-band svg{ width:100%; max-width:240px; height:24px; margin:0.4rem auto; display:block; }
.ml-stats-inner{ display:flex; justify-content:center; gap:3rem; margin:0.6rem 0; }
.ml-stat{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--lune-muted); }
.ml-stat strong{ display:block; font-family:'Playfair Display',serif; font-size:1.9rem; color:var(--lune); letter-spacing:0; font-weight:600; }

/* ── titre de page ── */
.ml-title{ text-align:center; padding:0.4rem 1rem 0; }
.ml-tag{ font-family:'Cormorant SC','EB Garamond',serif; font-size:0.74rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--etoile); opacity:0.9; margin-bottom:0.7rem; }

/* ── fil d'ariane céleste ── */
.sky-crumb{
  max-width:800px; margin:0.6rem auto 0; padding:0 1.4rem; text-align:center;
  font-family:'Cormorant SC','EB Garamond',serif; font-size:0.82rem; letter-spacing:0.06em;
  color:rgba(201,185,143,0.6); min-height:1.4em;
  scroll-margin-top:80px; /* pour que « Revenir au ciel » ne cache pas le fil sous la nav */
}
.sky-crumb span.link{ cursor:pointer; text-decoration:underline; text-decoration-color:rgba(216,201,138,0.3); color:var(--lune-muted); transition:color 0.2s; }
.sky-crumb span.link:hover{ color:var(--etoile); }
.sky-crumb .sep{ opacity:0.5; margin:0 0.35rem; }
.sky-crumb .current{ color:var(--etoile); font-style:italic; }

/* ── cadre autour du ciel ── */
.sky-frame{ max-width:1100px; margin:1rem auto 0; padding:0 1.4rem 3rem; }
.sky-frame-inner{ position:relative; border:1px solid rgba(216,201,138,0.3); padding:8px; }
.sky-frame-inner::before{ content:''; position:absolute; inset:6px; border:1px solid rgba(216,201,138,0.12); pointer-events:none; }
.sky-corner{ position:absolute; width:36px; height:36px; z-index:6; color:var(--etoile); opacity:0.85; pointer-events:none; }
.sky-corner.tl{ top:-1px; left:-1px; } .sky-corner.tr{ top:-1px; right:-1px; transform:scaleX(-1); }
.sky-corner.bl{ bottom:-1px; left:-1px; transform:scaleY(-1); } .sky-corner.br{ bottom:-1px; right:-1px; transform:scale(-1,-1); }

.sky-wrap{ position:relative; overflow:hidden; background:#12101d; }
#sky-svg{
  width:100%; height:auto; display:block;
  /* le doigt déplace le ciel au lieu de faire défiler la page */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ── niveau 1 : nébuleuses (civilisations), sur un ciel qu'on fait glisser aussi ── */
#nebula-layer{ transition:opacity 0.55s ease; }
#nebula-layer.hidden{ opacity:0; pointer-events:none; }
#nebula-scene{ cursor:grab; }
#nebula-scene.grabbing{ cursor:grabbing; }
.nebula-group{ cursor:pointer; }
.nebula-blob{ transition:opacity 0.3s, filter 0.3s; }
.nebula-group:hover .nebula-blob{ filter:brightness(1.25); }
.nebula-label{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:600;
  font-size:15px; fill:rgba(232,220,192,0.85); text-anchor:middle;
}
.nebula-sub{
  font-family:'Cormorant SC','EB Garamond',serif; font-size:8px; letter-spacing:1.5px;
  text-transform:uppercase; fill:rgba(201,185,143,0.5); text-anchor:middle;
}

/* ── niveau 2 : constellations de thèmes, sur un ciel qu'on fait glisser ── */
#theme-layer{ opacity:0; transition:opacity 0.55s ease 0.15s; pointer-events:none; }
#theme-layer.visible{ opacity:1; pointer-events:all; }
#theme-scene{ cursor:grab; }
#theme-scene.grabbing{ cursor:grabbing; }
.tconst-group{ cursor:pointer; }
.tconst-hit{ fill:transparent; } /* zone cliquable invisible autour de chaque constellation */
.tconst-line{ stroke:#d8c98a; stroke-width:0.7; opacity:0.4; fill:none; }
.tconst-star{ fill:#e8dcc0; transition:r 0.2s; }
.tconst-group:hover .tconst-star{ r:3; }
.tconst-label{
  font-family:'Cormorant SC','EB Garamond',serif; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; fill:rgba(216,201,138,0.55); text-anchor:middle; transition:fill 0.2s;
}
.tconst-group:hover .tconst-label{ fill:var(--etoile); }

.pan-hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-family:'Cormorant SC','EB Garamond',serif; font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(216,201,138,0.5); pointer-events:none;
  opacity:0; transition:opacity 0.4s ease 0.4s; white-space:nowrap;
}
.pan-hint.visible{ opacity:1; }

/* ── étoiles de fond, pour ressentir le glissement (sans ça, rien ne bouge visuellement) ── */
@keyframes ml-twinkle{ 0%,100%{opacity:0.2;} 50%{opacity:0.85;} }
.bg-star{ fill:#e8dcc0; animation:ml-twinkle 3.6s ease-in-out infinite; transform-origin:center; }

/* ── limite visible du ciel (bord du grand plan glissable) ── */
.sky-boundary{ fill:none; stroke:rgba(216,201,138,0.25); stroke-width:2; stroke-dasharray:6 6; }

/* ── repère de coordonnées (centre de la vue actuelle dans le grand ciel) ── */
.sky-coords{
  position:absolute; top:10px; right:14px;
  font-family:'Cormorant SC','EB Garamond',serif; font-size:0.68rem; letter-spacing:0.08em;
  color:rgba(216,201,138,0.55); pointer-events:none; text-align:right;
}
.sky-hint{ text-align:center; font-size:0.84rem; font-style:italic; color:rgba(201,185,143,0.5); margin-top:0.9rem; }

/* ── repère listant les coordonnées des civilisations (aide au placement manuel) ── */
.civ-index{ max-width:800px; margin:0.8rem auto 0; text-align:center; }
.civ-index-title{
  font-family:'Cormorant SC','EB Garamond',serif; font-size:0.68rem; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(201,185,143,0.45); margin-bottom:0.4rem;
}
.civ-index-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.3rem 1rem; }
.civ-index-list span{ font-size:0.76rem; color:var(--lune-muted); }

/* ── panneau de résultats (niveau 3 : légendes) ── */
.legend-panel{ max-width:800px; margin:1.4rem auto 0; padding:0 1.4rem 2rem; scroll-margin-top:80px; }
.legend-card{ background:rgba(216,201,138,0.05); border:1px solid rgba(216,201,138,0.2); padding:1.4rem 1.6rem; }
.legend-card h2{ font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:600; font-style:italic; color:var(--lune); margin-bottom:0.3rem; }
.legend-card .lc-sub{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--etoile); margin-bottom:1rem; }
.legend-list{ display:flex; flex-direction:column; }
.legend-item{ display:block; text-decoration:none; border-top:1px solid rgba(216,201,138,0.15); padding:0.9rem 0; transition:padding-left 0.15s; }
.legend-item:first-child{ border-top:none; padding-top:0; }
.legend-item:hover{ padding-left:0.4rem; }
.legend-item .li-t{ font-family:'Playfair Display',serif; font-size:1.02rem; font-weight:600; font-style:italic; color:var(--lune); margin-bottom:0.25rem; transition:color 0.15s; }
.legend-item:hover .li-t{ color:var(--etoile); }
.legend-item .li-d{ font-size:0.9rem; color:var(--violet-light); line-height:1.55; }
.legend-empty{ text-align:center; font-style:italic; color:rgba(201,185,143,0.5); padding:1rem 0; margin:0; }

/* bouton « Revenir au ciel » : seulement utile sur mobile (voir media query) */
.legend-back{
  display:none; width:100%; margin-top:1rem; padding:0.8rem;
  background:transparent; border:1px solid rgba(216,201,138,0.3); color:var(--etoile);
  font-family:'Cormorant SC','EB Garamond',serif; font-size:0.9rem; letter-spacing:0.08em;
  cursor:pointer;
}

/* ── dernières légendes ajoutées (équivalent sombre de .trad-latest-grid / .trad-latest-card) ── */
.ml-body .featured-section{
  background:linear-gradient(160deg, var(--nuit) 0%, var(--nuit-deep) 100%);
  border-top:1px solid rgba(216,201,138,0.15);
}
.ml-body .section-title{ color:var(--lune); }
.ml-latest-grid{
  max-width:1125px; margin:0 auto; padding:0 1rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.5rem;
}
.ml-latest-card{ background:rgba(216,201,138,0.05); border:1px solid rgba(216,201,138,0.2); }
.ml-latest-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,0.4); }
.ml-latest-card .plant-body{ padding:1.3rem 1.4rem; }
.ml-latest-card .plant-latin{
  text-transform:uppercase; letter-spacing:0.12em; font-style:normal; font-size:0.72rem;
  color:var(--etoile); margin-bottom:0.4rem;
}
.ml-latest-card .plant-name{ color:var(--lune); }
.ml-latest-card .plant-desc{ color:var(--violet-light); }

/* ── mise en garde (équivalent sombre de .trad-disclaimer) ── */
.ml-disclaimer{ max-width:720px; margin:0 auto; padding:0 2rem 3.5rem; text-align:center; }
.ml-disclaimer p{ font-size:0.88rem; font-style:italic; color:var(--lune-muted); line-height:1.7; }
.ml-disclaimer svg{ width:18px; height:18px; vertical-align:-3px; margin-right:0.3rem; color:var(--etoile); }
.ml-disclaimer a{ color:var(--violet-light); }

/* ── bouton de bascule vers Histoires & Traditions ── */
.ml-swap{
  position:fixed; right:0; top:55%; transform:translateY(-50%) translateX(62%);
  z-index:150; display:flex; align-items:center; gap:0.55rem;
  padding:0.75rem 0.85rem 0.75rem 1.1rem;
  background:var(--parch);
  border:1px solid rgba(143,104,32,0.35);
  border-radius:50px 0 0 50px;
  text-decoration:none;
  box-shadow:-4px 0 20px rgba(0,0,0,0.25);
  transition:transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.3s;
}
.ml-swap:hover{ transform:translateY(-50%) translateX(0); box-shadow:-6px 0 28px rgba(0,0,0,0.35); }
.ml-swap-arrow{ font-size:1.2rem; line-height:1; color:var(--gold); }
.ml-swap-label{
  font-family:'Cormorant SC','EB Garamond',serif; font-size:0.78rem; letter-spacing:0.08em;
  white-space:nowrap; font-style:italic; color:var(--ink-light);
}
@media (max-width:700px){
  .ml-swap{ padding:0.6rem 0.6rem 0.6rem 0.8rem; transform:translateY(-50%) translateX(70%); }
  .ml-swap-label{ display:none; }
}

/* ══════════════════════════════════
   MOBILE — ciel et panneau des légendes
   (la taille de la fenêtre sur le ciel est gérée par mythes_legendes.js)
══════════════════════════════════ */
@media (max-width:700px){
  .ml-stats-band{ padding:0 1rem 2rem; }
  .ml-stats-inner{ gap:1.5rem; }

  .sky-crumb{ font-size:0.95rem; padding:0 1rem; }
  .sky-crumb span.link{ display:inline-block; padding:0.35rem 0.2rem; } /* cible plus grande pour le doigt */

  .sky-frame{ padding:0 0.6rem 1.5rem; }
  .sky-frame-inner{ padding:5px; }
  .sky-frame-inner::before{ inset:3px; }
  .sky-corner{ width:24px; height:24px; }

  /* textes du ciel un peu plus gros : 1 unité ≈ 0,85 px sur mobile */
  .nebula-label{ font-size:18px; }
  .nebula-sub{ font-size:11px; letter-spacing:1px; }
  .tconst-label{ font-size:12px; letter-spacing:1px; fill:rgba(216,201,138,0.75); }
  .tconst-line{ stroke-width:1; opacity:0.55; }

  .pan-hint{ font-size:0.66rem; }
  .sky-hint{ padding:0 0.6rem; }

  /* outils de placement (coordonnées) : utiles sur PC, encombrants sur téléphone */
  .sky-coords, .civ-index{ display:none; }

  .legend-panel{ margin-top:0.6rem; padding:0 0.6rem 2rem; }
  .legend-card{ padding:1.1rem 1.1rem; }
  .legend-back{ display:block; }
}

/* ══════════════════════════════════
   TRANSITION EN GLISSEMENT ENTRE PAGES
   (voir /assets/js/page-swap.js)
══════════════════════════════════ */
body{
  transition: transform 0.48s cubic-bezier(.4,0,.2,1), opacity 0.42s ease;
}
html.enter-right body,
html.enter-left body{
  transition: none;
  opacity: 0;
}
html.enter-right body{ transform: translateX(100%); }
html.enter-left body{ transform: translateX(-100%); }
html.enter-right body.page-slide-ready,
html.enter-left body.page-slide-ready{
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.48s cubic-bezier(.4,0,.2,1), opacity 0.42s ease;
}
html.exit-left body{ transform: translateX(-100%); opacity: 0; }
html.exit-right body{ transform: translateX(100%); opacity: 0; }

/* ══════════════════════════════════
   FICHE D'UNE LÉGENDE (legende_fiche.php)
   mirroir sombre de .trad-banner / .trad-fiche-wrap
══════════════════════════════════ */
.lf-banner{ max-width:780px; margin:0 auto; padding:3rem 2rem 0; }
.lf-plante{ margin:0 0 0.6rem; font-size:0.85rem; letter-spacing:0.06em; }
.lf-plante a{ color:var(--violet-light); text-decoration:none; font-style:italic; border-bottom:1px solid rgba(157,139,196,0.35); }
.lf-plante a:hover{ border-color:var(--violet-light); }
.lf-plante-commun{ color:var(--lune-muted); font-style:normal; }
.lf-tag{
  font-family:'Cormorant SC','EB Garamond',serif; font-size:0.8rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--etoile); margin-bottom:0.9rem;
}
.lf-banner h1{
  font-family:'Playfair Display',serif; font-size:clamp(2rem,4.5vw,2.9rem);
  font-weight:700; font-style:italic; line-height:1.15; color:var(--lune); margin:0 0 0.8rem;
}
.lf-sub{ font-size:1.05rem; color:var(--violet-light); font-style:italic; line-height:1.6; max-width:560px; margin:0; }

.lf-wrap{ max-width:720px; margin:0 auto; padding:2.4rem 2rem 4rem; }
.lf-body p{ font-size:1.08rem; color:var(--lune-muted); line-height:1.85; margin-bottom:1.3rem; }
.lf-body p.lf-first-p::first-letter{
  font-family:'Playfair Display',serif; font-size:3.2rem; font-weight:700; float:left;
  line-height:0.8; padding:0.1rem 0.4rem 0 0; color:var(--etoile);
}
.lf-back{
  display:inline-block; margin-top:1rem; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--lune-muted); text-decoration:none; border-bottom:1px solid rgba(216,201,138,0.25);
}
.lf-back:hover{ color:var(--etoile); border-color:var(--etoile); }

@media (max-width:700px){
  .lf-banner{ padding:2rem 1.2rem 0; }
  .lf-wrap{ padding:1.8rem 1.2rem 3rem; }
  .lf-body p.lf-first-p::first-letter{ font-size:2.4rem; }
}