/* ---- Variables de thème (la page entière pilote la couleur) ---- */
:root{
  --bg:#f6f4ef;
  --ink:#1c2230;
  --ink-soft:#1c223080;
  --smb-fs:13px;
  --smb-ls:0.28em;
  --smb-h:36px;
  --smb-pad:28px;
  /* Tiroir — fond BLANC, texte navy, indépendant du thème de page */
  --smb-drawer-bg:#ffffff;
  --smb-drawer-ink:#0e1b38;
  --smb-drawer-ink-soft:rgba(14,27,56,.55);
  --smb-drawer-sep:rgba(14,27,56,.12);
  --smb-drawer-hover:rgba(14,27,56,.05);
  --smb-drawer-w:380px;
}

/* Couleur du bandeau découplée du --ink de page. Défaut blanc (lisible sur navy).
   Pages à fond clair/coloré : poser --smb-ink (+ --smb-ink-soft) dans leur <style>.
   VALHALLA 3B — patch posé le 20/06/2026. */
.smb-top, .smb-bottom, .smb-drawer, .smb-pop{
  --ink: var(--smb-ink, #ffffff);
  --ink-soft: var(--smb-ink-soft, rgba(255,255,255,.55));
}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  transition:background-color .45s ease, color .45s ease;
}

/* ---------------------------- BANDEAU HAUT ---------------------------- */
.smb-top{
  display:flex; align-items:center; gap:24px;
  background:var(--bg);
  border:0; box-shadow:none;
  padding:6px var(--smb-pad) 6px;
  padding-top:calc(env(safe-area-inset-top,0px) + 6px);
  min-height:calc(var(--smb-h) + env(safe-area-inset-top,0px));
  transition:background-color .45s ease;
}
.smb-crumb{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center;
  font-size:var(--smb-fs); letter-spacing:var(--smb-ls);
  text-transform:uppercase; white-space:nowrap; overflow:hidden;
}
.smb-z1{ color:var(--ink); text-decoration:none; flex:0 0 auto; }
.smb-z1:hover{ text-decoration:underline; text-underline-offset:3px; }
.smb-sep{ flex:0 0 auto; color:var(--ink-soft); }
.smb-z2{ flex:0 0 auto; color:var(--ink); text-decoration:none; }
a.smb-z2[href]:hover{ text-decoration:underline; text-underline-offset:3px; }
a.smb-z2:not([href]){ cursor:default; }
.smb-z3{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-soft);
  padding-right:1.1em;
}
.smb-cluster{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.smb-btn{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--ink); width:28px; height:28px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.smb-btn:hover{ background:color-mix(in srgb, var(--ink) 9%, transparent); }
.smb-btn svg{ width:15px; height:15px; display:block; }
/* Burger : léger séparateur gauche pour le démarquer des actions */
.smb-btn--menu{
  margin-left:4px;
  border-left:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  padding-left:6px;
  width:auto; gap:0;
  border-radius:0 8px 8px 0;
}
.smb-btn--menu[aria-expanded="true"]{ color:var(--ink); }
.smb-lang{ display:inline-flex; align-items:center; gap:2px; }
.smb-lang button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--ink-soft);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:10px; letter-spacing:.06em;
  padding:4px 5px; border-radius:5px; text-transform:uppercase;
}
.smb-lang button[aria-current="true"]{ color:var(--ink); font-weight:600; }
.smb-lang button:hover{ background:color-mix(in srgb, var(--ink) 9%, transparent); }
.smb-lang.is-hidden{ display:none; }

/* ---------------------------- BANDEAU BAS ---------------------------- */
.smb-bottom{
  background:var(--bg);
  border:0; box-shadow:none;
  padding:10px var(--smb-pad);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  transition:background-color .45s ease;
}
.smb-bottom.is-hidden{ display:none; }
.smb-flags{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; flex-wrap:wrap;
}
.smb-flag{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font-size:20px; line-height:1; padding:6px 4px; border-radius:7px;
  opacity:.55; filter:grayscale(.15);
}
.smb-flag[aria-current="true"]{ opacity:1; filter:none; }
.smb-flag:hover{ opacity:1; background:color-mix(in srgb, var(--ink) 9%, transparent); }

/* ---- Panneaux placeholder du cluster ---- */
.smb-pop{
  position:fixed; inset:auto; z-index:9999;
  top:calc(env(safe-area-inset-top,0px) + 44px); right:var(--smb-pad);
  background:var(--bg); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:12px; padding:16px 18px; min-width:240px; max-width:min(92vw,360px);
  box-shadow:0 10px 40px rgba(0,0,0,.18); font-size:14px; display:none;
}
.smb-pop.open{ display:block; }
.smb-pop h4{ margin:0 0 8px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.smb-pop input[type=search]{
  width:100%; font:inherit; padding:9px 11px; border-radius:8px;
  border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background:transparent; color:var(--ink);
}
.smb-pop .smb-note{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

/* ========================= TIROIR NAVIGATION ========================= */
/* Overlay sombre derrière le tiroir */
.smb-drawer-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
}
.smb-drawer-overlay.open{ opacity:1; visibility:visible; }

/* Le tiroir lui-même — slide depuis la droite */
.smb-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:9999;
  width:var(--smb-drawer-w); max-width:100vw;
  background:var(--smb-drawer-bg);
  color:var(--smb-drawer-ink);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.smb-drawer.open{ transform:translateX(0); }

/* En-tête du tiroir */
.smb-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--smb-drawer-sep);
  flex-shrink:0;
}
.smb-drawer-title{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--smb-drawer-ink-soft); font-weight:600;
}
.smb-drawer-close{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--smb-drawer-ink-soft); width:32px; height:32px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:background .15s, color .15s;
}
.smb-drawer-close:hover{ background:rgba(255,255,255,.1); color:var(--smb-drawer-ink); }
.smb-drawer-close svg{ width:17px; height:17px; }

/* Chapeau explicatif */
.smb-drawer-intro{
  font-size:11.5px; color:var(--smb-drawer-ink-soft); line-height:1.55;
  padding:14px 22px 10px; margin:0;
  border-bottom:1px solid var(--smb-drawer-sep);
  flex-shrink:0;
}

/* Navigation du tiroir */
.smb-drawer-nav{
  display:flex; flex-direction:column;
  flex:1 1 auto; padding:8px 0;
}
.smb-drawer-item{
  display:flex; align-items:center; gap:14px;
  padding:16px 22px;
  text-decoration:none;
  border-bottom:1px solid var(--smb-drawer-sep);
  color:var(--smb-drawer-ink);
  transition:background .15s;
  min-height:64px;
}
.smb-drawer-item:last-child{ border-bottom:0; }
.smb-drawer-item:hover{ background:var(--smb-drawer-hover); }
.smb-drawer-item-text{ flex:1 1 auto; min-width:0; }
.smb-drawer-label{
  display:block;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--smb-drawer-ink); line-height:1.3;
}
.smb-drawer-sub{
  display:block;
  font-size:11.5px; color:var(--smb-drawer-ink-soft); margin-top:3px; line-height:1.4;
}
.smb-drawer-arrow{
  flex-shrink:0; color:var(--smb-drawer-ink-soft);
  display:flex; align-items:center;
  transition:transform .15s, color .15s;
}
.smb-drawer-arrow svg{ width:16px; height:16px; }
.smb-drawer-item:hover .smb-drawer-arrow{
  transform:translateX(4px);
  color:var(--smb-drawer-ink);
}

/* Adaptation mobile */
@media (max-width:480px){
  :root{ --smb-drawer-w:100vw; }
  .smb-drawer{ border-radius:0; }
}

/* ===== PATCH BOUTONS SURVOL — ORKESTRA 6 ===== */

/* Supprimer translateY/brightness sur tous les .bouton */
.bouton:hover, .bouton:focus-visible {
  transform: none !important;
  filter: none !important;
}

/* Boutons actifs : img/glyph/lib restent visibles au survol */
.bouton:hover > img,
.bouton:hover .glyph,
.bouton:hover .lib,
.bouton:focus-visible > img,
.bouton:focus-visible .glyph,
.bouton:focus-visible .lib {
  opacity: 1 !important;
  transition: none !important;
}

/* htitle caché au survol sur tous les .bouton */
.bouton:hover .htitle,
.bouton:focus-visible .htitle {
  opacity: 0 !important;
}

/* --soonhover : htitle visible normalement (boutons sans image) */
.bouton--soonhover .htitle {
  opacity: 1 !important;
  background: transparent !important;
}

/* --soonhover : fond noir + masquage contenu au survol */
.bouton--soonhover:hover,
.bouton--soonhover:focus-visible {
  background: #000 !important;
}
.bouton--soonhover:hover > img,
.bouton--soonhover:hover .glyph,
.bouton--soonhover:hover .lib,
.bouton--soonhover:hover .htitle,
.bouton--soonhover:focus-visible > img,
.bouton--soonhover:focus-visible .glyph,
.bouton--soonhover:focus-visible .lib,
.bouton--soonhover:focus-visible .htitle {
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}

/* --soonhover : SVG croix visible au survol seulement */
.bouton--soonhover .soon {
  opacity: 0 !important;
}
.bouton--soonhover:hover .soon,
.bouton--soonhover:focus-visible .soon {
  opacity: 1 !important;
  transition: opacity .15s ease !important;
}

/* ============================================================
   VALHALLA 1 — BANDEAU : règles centralisées (corrigé)
   - Fonte SYSTÈME explicite sur le fil d'Ariane (jamais Hoefler hérité)
   - Élément courant (Z3, ou Z2 dernier maillon) : souligné, non cliquable
   - PAS de forçage de fond ni de couleur : le bandeau SUIT --bg/--ink de la
     page. Navy sur les pages normales (qui posent bg:#0e1b38), teinte propre
     sur Feu l'amour (exception voulue). Fou l'amour a son bandeau autonome.
   ============================================================ */
.smb-crumb{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
.smb-cur{
  color:var(--ink) !important;
  text-decoration:underline !important; text-underline-offset:3px;
  text-decoration-thickness:1px; cursor:default;
}
