/* ══════════════════════════════════════════════════════════════
   BURNING BLUE — Menu plein écran partagé
   Header épuré (verre dépoli) + menu overlay + archive slider.
   Utilisé par index.html et les pages du site pour une navigation
   unifiée : la home mène au reste depuis ce menu.
   Dépend de : css/style.css (base .site-header, .gh-circle, variables),
   css/cart.css (.cart-count-badge).
   ══════════════════════════════════════════════════════════════ */

/* Bouton panier dans le header — visible UNIQUEMENT quand il y a des articles,
   dans toutes les vues. La classe .has-items est posée par cart.js (updateCartUI),
   plus fiable que :has(.cart-count-badge.visible) selon le moteur de rendu. */
.gh-cart-btn { background:none;border:none;cursor:pointer;color:#fff;padding:6px 8px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity 0.3s ease;position:relative; }
.gh-cart-btn.has-items { opacity:1;pointer-events:auto; }
.gh-cart-btn:hover.has-items { opacity:0.7 !important; }

/* Header épuré : transparent + verre dépoli (sensation luxe) */
#site-header {
  padding: 20px 28px;
  background: linear-gradient(to bottom, rgba(7,9,16,0.45), rgba(7,9,16,0));
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: none;
}
.site-header .gh-btn { display: none; }
#site-header .gh-left { display: flex; align-items: center; }
#site-header .gh-btns { justify-content: center; }
/* Icône « revoir l'intro » (play vidéo) — accès à la home animée */
.gh-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  color: #fff; text-decoration: none; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.gh-play:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.7); }
.gh-play svg { width: 13px; height: 13px; display: block; margin-left: 2px; }
#site-header .gh-right-v2 { display: flex; justify-content: flex-end; align-items: center; }

/* ══ FEUILLE OVERLAY — sous-menus ouverts sur le menu (Proposer / FAQ / Contact) ══
   Même traitement que l'archive : overlay opaque, croix centrée → retour au menu.
   Le contenu vient d'une iframe (faq.html / contact.html en ?embed=1). */
#bb-sheet {
  position: fixed; inset: 0; z-index: 1065;
  background: #05060c;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
#bb-sheet.open { opacity: 1; pointer-events: auto; }
.bb-sheet-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #05060c; display: block;
}
.bb-sheet-close {
  position: fixed; top: 9px; left: 50%; transform: translateX(-50%); z-index: 1101;
  background: none; border: none; color: #fff; font-size: 2.6rem; font-weight: 200;
  cursor: pointer; padding: 12px; line-height: 1;
  transition: color 0.25s, transform 0.35s;
}
.bb-sheet-close:hover { color: var(--gold-light); transform: translateX(-50%) rotate(90deg); }

/* Mode embed : page chargée dans la feuille → on masque le menu, l'archive et la
   croix « feuille » (l'overlay fournit la sienne), MAIS on garde le panier visible. */
html.embed .leaf-close,
html.embed #bb-menu,
html.embed #bb-archive { display: none !important; }
html.embed body { padding-top: 56px; }
html.embed .site-header--leaf { justify-content: flex-end; }

/* ══ VUE « FEUILLE » — pages ouvertes/fermées par la croix (FAQ, Contact, Proposer) ══
   Comme l'archive : pas de logo ni de menu, juste une croix centrée en haut. */
/* Header « feuille » : passe de la grille 3 colonnes à un flex aligné à droite
   (le panier va à droite ; la croix .leaf-close est en position:fixed, hors flux). */
.site-header--leaf { display: flex !important; justify-content: flex-end; align-items: center; }
.site-header--leaf .gh-left, .site-header--leaf .gh-btns { display: none; }
/* Le panier (gh-right-v2) reste dans le header « feuille » — visible quand il y a des articles */
.leaf-close {
  position: fixed; top: 9px; left: 50%; transform: translateX(-50%); z-index: 1100;
  background: none; border: none; color: #fff; font-size: 2.6rem; font-weight: 200;
  cursor: pointer; padding: 12px; line-height: 1;
  transition: color 0.25s, transform 0.35s;
}
.leaf-close:hover { color: var(--gold-light); transform: translateX(-50%) rotate(90deg); }

/* ══ MENU PLEIN ÉCRAN — verre dépoli sur la page ═══════════ */
#bb-menu {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h, 70px) + 24px) clamp(28px, 7vw, 110px) 40px;
  background: rgba(7,9,16,0.55);
  backdrop-filter: blur(34px) saturate(1.35);
  -webkit-backdrop-filter: blur(34px) saturate(1.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
#bb-menu.open { opacity: 1; pointer-events: auto; }
.bbm-close {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  background: none; border: none;
  color: #fff; font-size: 2.6rem; font-weight: 200;
  cursor: pointer; padding: 12px; line-height: 1;
  transition: color 0.25s, transform 0.35s;
}
.bbm-close:hover { color: var(--gold-light); transform: translateX(-50%) rotate(90deg); }
.bbm-inner {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 1100px; width: 100%; margin: 0 auto;
}
/* Logo affiché en haut du menu plein écran */
.bbm-logo {
  width: min(200px, 46vw); height: auto; display: block;
  margin: 0 0 clamp(22px, 3.5vh, 36px);
  opacity: 0.96;
}
@media (max-width: 700px) { .bbm-logo { width: min(200px, 52vw); margin-bottom: 20px; } }
/* Niveau 1 — très grand */
.bbm-l1-group { margin-bottom: clamp(28px, 5vh, 56px); }
.bbm-l1 {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.2; text-decoration: none;
  padding: 2px 0;
  letter-spacing: 0.01em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-image: linear-gradient(105deg, #ffffff 0%, #aac2ff 22%, #ffffff 40%, #eaf1ff 52%, #ffffff 66%, #cdd9ff 100%);
  background-size: 230% auto;
  background-position: 0 center;
  -webkit-background-clip: text; background-clip: text;
  transition: opacity 0.25s, text-shadow 0.3s;
  opacity: 0.9;
}
.bbm-l1 + .bbm-l1 { margin-top: 4px; }
.bbm-l1:hover {
  opacity: 1;
  -webkit-text-fill-color: transparent;
  animation: bbm-jewel 1.9s linear infinite;
  text-shadow: 0 0 28px rgba(170,194,255,0.5);
}
@keyframes bbm-jewel {
  0%   { background-position: 0 center; }
  100% { background-position: 230% center; }
}
/* Niveau 2 */
.bbm-l2 { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.bbm-l2 a, .bbm-l2 button {
  background: none; border: none; cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.15rem); font-weight: 500;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.72);
  text-decoration: none; padding: 6px 0;
  transition: color 0.2s;
}
.bbm-l2 a:hover, .bbm-l2 button:hover { color: #fff; }
/* Archive : même opacité que les autres liens du sous-menu (pas « sélectionné ») */
/* Pied : galeries, instagram, copyright */
.bbm-foot {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.bbm-foot a {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); text-decoration: none;
  transition: color 0.2s;
}
.bbm-foot a:hover { color: #fff; }
.bbm-foot .bbm-copy { margin-left: auto; font-size: 0.68rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); text-transform: none; }
.bbm-langs { display: flex; gap: 6px; }
.bbm-langs .lang-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em;
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6); cursor: pointer;
  transition: all 0.2s;
}
.bbm-langs .lang-btn:hover, .bbm-langs .lang-btn.active { color: #07080f; background: #fff; border-color: #fff; }
@media (max-width: 700px) {
  #bb-menu { padding-top: calc(var(--nav-h, 70px) + 12px); }
  .bbm-inner { justify-content: flex-start; }
  .bbm-l2 { flex-direction: column; gap: 8px; }
  .bbm-foot { gap: 14px; }
  .bbm-foot .bbm-copy { margin-left: 0; width: 100%; }
}

/* ══ ARCHIVE — slider plein écran, sans scroll ═════════════ */
#bb-archive {
  position: fixed; inset: 0; z-index: 1060;
  background: #05060c;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
#bb-archive.open { opacity: 1; pointer-events: auto; }
.bba-track { position: absolute; inset: 0; }
.bba-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.7s ease;
  display: flex; align-items: center; justify-content: center;
  background: #05060c;
}
.bba-slide.active { opacity: 1; }
.bba-slide img { width: 100%; height: 100%; object-fit: cover; }
.bba-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,6,12,0.75) 0%, transparent 30%, transparent 70%, rgba(5,6,12,0.55) 100%); pointer-events: none; }
.bba-head {
  position: absolute; top: 28px; left: clamp(24px,5vw,70px); right: clamp(24px,5vw,70px); z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.bba-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; }
.bba-title b { display: block; font-size: clamp(1.6rem, 3.5vw, 2.6rem); color: #fff; font-weight: 300; }
.bba-title span { font-family: 'Outfit', sans-serif; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); }
.bba-close { position: fixed; top: 9px; left: 50%; transform: translateX(-50%); z-index: 4; background: none; border: none; color: #fff; font-size: 2.6rem; font-weight: 200; cursor: pointer; padding: 12px; line-height: 1; transition: color 0.25s, transform 0.35s; }
.bba-close:hover { color: var(--gold-light); transform: translateX(-50%) rotate(90deg); }
.bba-cap { position: absolute; left: clamp(24px,5vw,70px); bottom: 40px; z-index: 3; font-family: 'Outfit', sans-serif; font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.8); }
.bba-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.bba-arrow:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.7); }
.bba-prev { left: clamp(16px, 3vw, 40px); }
.bba-next { right: clamp(16px, 3vw, 40px); }
.bba-dots { position: absolute; bottom: 40px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 9px; }
.bba-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.3); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.bba-dot.active { background: #fff; transform: scale(1.3); }
@media (max-width: 700px) {
  .bba-arrow { width: 44px; height: 44px; }
  .bba-cap { display: none; }
}