/* ============================================================
   ORACLE ARCANA — Style du menu déroulant "Nos études" partagé
   (injecté par nav-etudes.js sur les pages produit autonomes).
   Réutilise les variables --gold / --gold-deep / --ink / --ink-soft /
   --line / --card déjà définies dans le :root de chaque page produit
   (synastrie.html, theme-astral.html, ciel-du-mois.html, astrologie.html)
   — mêmes noms de variables partout, donc aucune adaptation nécessaire.
   ============================================================ */

.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-trigger{cursor:pointer;color:var(--ink-soft);font-weight:600;text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;gap:4px}
.nav-trigger:hover{color:var(--gold-deep)}
.nav-trigger .caret{font-size:10px;color:var(--gold)}
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:230px;display:none;z-index:70;box-shadow:0 14px 36px rgba(154,120,56,.18)}
.nav-group:hover .nav-drop{display:block}
.nav-drop a{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;padding:10px 14px;border-radius:8px;color:var(--ink);font-size:14px;text-decoration:none}
.nav-drop a:hover{background:rgba(184,145,73,.08);color:var(--gold-deep)}
.nav-price{margin-left:auto;padding-left:1rem;font-size:12px;font-weight:600;color:var(--gold-deep);white-space:nowrap}

/* ============================================================
   Menu mobile (bouton injecté par nav-mobile.js).
   .burger est masqué par défaut (desktop) et réapparaît ci-dessous
   sous 760px, seuil déjà utilisé par .menu{display:none} dans le
   <style> de chaque page produit.
   .menu devient ici le panneau mobile lui-même (déjà rempli par
   nav-etudes.js / nav-tirages.js) : aucune donnée dupliquée.
   IMPORTANT : hauteur en height:calc(100vh/100dvh - 74px), jamais
   bottom:0/inset — nav.top a un backdrop-filter, ce qui en fait le
   containing block de tout descendant position:fixed ; bottom:0 s'y
   calculerait alors par rapport à la hauteur de nav.top (~74px) et
   non du viewport, réduisant le panneau à une bande quasi nulle
   (bug déjà rencontré et corrigé ce jour sur le menu mobile de
   l'accueil — cf. .nav-links dans index.html).
   ============================================================ */
.burger{display:none;font-size:1.5rem;color:var(--gold-deep);background:none;border:none;cursor:pointer}
@media(max-width:760px){
  .burger{display:block}
  .menu{position:fixed;top:74px;left:0;right:0;height:calc(100vh - 74px);height:calc(100dvh - 74px);flex-direction:column;align-items:flex-start;gap:1.1rem;background:var(--bg);padding:1.5rem;border-bottom:1px solid var(--line);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .menu.open{display:flex}
  .nav-group{flex-direction:column;align-items:flex-start;width:100%}
  .nav-trigger{color:var(--gold-deep);font-weight:600;margin-bottom:.2rem}
  .nav-drop{position:static;transform:none;display:block;border:none;box-shadow:none;background:transparent;padding:0 0 0 .9rem;min-width:0}
  .sep{display:none}
}