/* ════════════════════════════════════════
   HISTOIRE & LÉGENDES — page de bifurcation
   S'appuie sur les variables de style.css (--parch, --ink, --gold, --accent…)
   Ajoute les variables du thème nocturne (préfixe hl-)
════════════════════════════════════════ */

.hl-body{
  --nuit:#181229; --nuit-deep:#0d0a18;
  --lune:#e8dcc0; --lune-muted:#c9b98f;
  --violet:#6d5a9e; --violet-light:#9c8bc4;
  --etoile:#d8c98a;
  background:var(--ink);
}

/* ── nav et footer repris au thème sombre sur cette page ── */
.hl-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);
}
.hl-body .nav-logo{ color:var(--lune); }
.hl-body .nav-logo em{ color:var(--accent-light); }
.hl-body .nav-links a{ color:var(--parch-dark); }
.hl-body .nav-links a:hover,
.hl-body .nav-links a.nav-active{ color:var(--etoile); }
.hl-body .hamburger span{ background:var(--lune); }
@media (max-width:700px){
  .hl-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); }
  .hl-body .nav-links a{ border-bottom-color:rgba(216,201,138,0.12); }
}

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

.hl-title{ text-align:center; color:var(--parch-dark); padding:3.2rem 1rem 1.8rem; background:var(--ink); }
.hl-tag{ font-family:'Cormorant SC','EB Garamond',serif; font-size:0.74rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--etoile); opacity:0.85; display:block; margin-bottom:0.7rem; }
.hl-title h1{ font-family:'Playfair Display',serif; font-weight:600; font-style:italic; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--parch); }
.hl-title-orn{ margin:1.1rem auto 0; width:180px; height:16px; color:var(--etoile); opacity:0.6; }
.hl-title-orn svg{ width:100%; height:100%; }

/* ── cadre doré autour du split ── */
.hl-frame{ max-width:1400px; margin:0 auto; padding:0 1.4rem 3rem; background:var(--ink); }
.hl-frame-inner{ position:relative; border:1px solid rgba(216,201,138,0.35); padding:10px; }
.hl-frame-inner::before{ content:''; position:absolute; inset:6px; border:1px solid rgba(216,201,138,0.15); pointer-events:none; }
.hl-corner{ position:absolute; width:42px; height:42px; z-index:6; color:var(--etoile); opacity:0.9; pointer-events:none; }
.hl-corner.tl{ top:-1px; left:-1px; } .hl-corner.tr{ top:-1px; right:-1px; transform:scaleX(-1); }
.hl-corner.bl{ bottom:-1px; left:-1px; transform:scaleY(-1); } .hl-corner.br{ bottom:-1px; right:-1px; transform:scale(-1,-1); }

/* ── conteneur split ── */
.hl-split{ display:flex; min-height:680px; height:78vh; position:relative; overflow:hidden; }
.hl-panel{ position:relative; flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:flex 0.55s cubic-bezier(.4,0,.2,1); }
.hl-split:hover .hl-panel{ flex:0.82; }
.hl-split .hl-panel:hover{ flex:1.35; }
.hl-panel-inner{ position:relative; z-index:3; text-align:center; padding:2.2rem 1.8rem; max-width:440px; }

/* ── HISTOIRES & TRADITIONS ── */
.hl-panel--histoires{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(143,104,32,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(61,107,74,0.12) 0%, transparent 55%),
    var(--parch);
}
.hl-panel--histoires::before{
  content:''; position:absolute; inset:0; opacity:0.6;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234a3320' fill-opacity='0.04'%3E%3Cpath d='M30 5 Q35 20 30 35 Q25 20 30 5Z'/%3E%3Cpath d='M10 30 Q25 25 40 30 Q25 35 10 30Z'/%3E%3C/g%3E%3C/svg%3E");
}
.hl-hist-deco{ position:absolute; inset:0; z-index:1; }
.hl-panel--histoires .hl-frame-border{ position:absolute; inset:22px; border:1px solid rgba(143,104,32,0.4); z-index:2; pointer-events:none; }
.hl-panel--histoires .hl-frame-border::before{ content:''; position:absolute; inset:6px; border:1px solid rgba(74,51,32,0.15); }
.hl-medallion{ width:112px; height:112px; margin:0 auto 1rem; opacity:0.92; }
.hl-panel--histoires .hl-tag{ color:var(--gold); margin-bottom:0.7rem; }
.hl-panel--histoires h2{ color:var(--ink); }
.hl-panel--histoires .hl-desc{ color:var(--ink-muted); }
.hl-panel--histoires .hl-go{ color:var(--accent); border-color:var(--accent-light); }
.hl-panel--histoires .hl-go:hover{ border-color:var(--accent); color:var(--accent-dark); }
.hl-timeline{ width:220px; height:16px; margin:1rem auto 0; opacity:0.55; color:var(--gold); }

/* ── MYTHES & LÉGENDES ── */
.hl-panel--legendes{
  background:
    radial-gradient(ellipse at 70% 15%, rgba(157,139,196,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 85%, rgba(109,90,158,0.16) 0%, transparent 55%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-deep) 100%);
}
.hl-stars{ position:absolute; inset:0; z-index:1; }
.hl-panel--legendes .hl-frame-border{ position:absolute; inset:22px; border:1px solid rgba(216,201,138,0.28); z-index:2; pointer-events:none; }
.hl-panel--legendes .hl-frame-border::before{ content:''; position:absolute; inset:6px; border:1px solid rgba(216,201,138,0.10); }
.hl-moon-crest{ width:92px; height:92px; margin:0 auto 0.6rem; }
.hl-const-caption{ display:block; font-family:'Cormorant SC','EB Garamond',serif; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(216,201,138,0.4); margin:-0.3rem 0 0.8rem; }
.hl-panel--legendes .hl-tag{ color:var(--etoile); margin-bottom:0.7rem; }
.hl-panel--legendes h2{ color:var(--lune); }
.hl-panel--legendes .hl-desc{ color:var(--violet-light); }
.hl-panel--legendes .hl-go{ color:var(--lune-muted); border-color:rgba(216,201,138,0.3); }
.hl-panel--legendes .hl-go:hover{ border-color:var(--etoile); color:var(--etoile); }

@keyframes hl-twinkle{ 0%,100%{opacity:0.25;} 50%{opacity:1;} }
.hl-star-tw{ animation:hl-twinkle 3.4s ease-in-out infinite; transform-origin:center; }
.hl-const-star{ animation:hl-twinkle 4.6s ease-in-out infinite; transform-origin:center; }
@keyframes hl-drift{ 0%{ transform:translate(0,0); } 50%{ transform:translate(6px,-4px); } 100%{ transform:translate(0,0); } }
.hl-shoot{ animation:hl-drift 6s ease-in-out infinite; }

/* ── éléments communs de contenu ── */
h2{ font-family:'Playfair Display',serif; }
.hl-panel h2{ font-weight:700; font-style:italic; font-size:clamp(1.75rem,3.4vw,2.4rem); line-height:1.15; margin-bottom:0.9rem; }
.hl-desc{ font-size:1.02rem; line-height:1.72; font-style:italic; margin-bottom:1.3rem; }
.hl-go{ display:inline-block; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; border-bottom:1px solid; padding-bottom:0.2rem; transition:border-color 0.2s,color 0.2s; }

/* ── séparateur central : vrai élément flex à largeur fixe,
     donc il suit le décalage réel quand un panneau s'agrandit au survol ── */
.hl-divider{ position:relative; flex:0 0 70px; z-index:6; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hl-divider-line{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(to bottom, transparent, rgba(216,201,138,0.55) 10%, rgba(216,201,138,0.55) 90%, transparent); }
.hl-divider-finial{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hl-orn-med{ width:64px; height:64px; border-radius:50%; background:var(--ink); border:1px solid rgba(216,201,138,0.45); display:flex; align-items:center; justify-content:center; color:var(--etoile); box-shadow:0 0 22px rgba(216,201,138,0.15); }
.hl-sprig{ width:22px; height:60px; color:var(--etoile); opacity:0.55; }

@media (max-width:820px){
  .hl-split{ flex-direction:column; height:auto; }
  .hl-split:hover .hl-panel, .hl-split .hl-panel:hover{ flex:1; }
  .hl-panel{ min-height:420px; }
  .hl-divider{ width:100%; }
  .hl-divider-line{ top:50%; left:0; right:0; width:auto; height:1px; background:linear-gradient(to right, transparent, rgba(216,201,138,0.55) 10%, rgba(216,201,138,0.55) 90%, transparent); }
  .hl-divider-finial{ flex-direction:row; }
  .hl-sprig{ width:60px; height:22px; }
  .hl-frame{ padding:0 0.8rem 2rem; }
}