/* ==========================================================================
   BELLASOA PARIS — « Univers Nuit & Or » — VERSION SANS PHOTOS
   Thème : Hummingbird (PrestaShop 9)
   --------------------------------------------------------------------------
   Cette version n'utilise AUCUNE photographie. Tout l'univers est créé
   en CSS : dégradés, halos dorés, filets, typographie.
   Tu pourras ajouter des photos plus tard sans rien refaire (voir §9).

   INSTALLATION
   1. Déposer dans : themes/hummingbird/assets/css/bellasoa-univers.css
   2. Appeler à la fin de templates/_partials/head.tpl :
      <link rel="stylesheet" href="{$urls.theme_assets}css/bellasoa-univers.css">
   3. Vider var/cache/prod/ puis recharger.

   Fichier ADDITIF : il n'écrase rien. Si tu le retires, le site revient
   exactement comme avant.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIABLES DE MARQUE
   -------------------------------------------------------------------------- */
:root {
  --bs-nuit:       #1A1A2E;
  --bs-nuit-2:     #211d33;
  --bs-or:         #D4AF6F;
  --bs-or-deep:    #b8924e;
  --bs-creme:      #FAF8F4;
  --bs-creme-2:    #f1ece1;
  --bs-ink:        #2a2a33;
  --bs-muted:      #7a7468;

  /* Teintes d'ambiance des tuiles — modifiables librement */
  --bs-teinte-1:   #2e2545;  /* prune — soins */
  --bs-teinte-2:   #3d2f28;  /* ambre — parfums */
  --bs-teinte-3:   #24352f;  /* vert profond — cheveux */
  --bs-teinte-4:   #2a2438;  /* violine — 4e catégorie éventuelle */

  --bs-serif:      'Cormorant Garamond', Georgia, serif;
  --bs-sans:       'Inter', system-ui, -apple-system, sans-serif;
}


/* --------------------------------------------------------------------------
   2. TYPOGRAPHIE
   Règle d'or : la serif est FINE (300) et GRANDE. Jamais en gras.
   -------------------------------------------------------------------------- */
.bs-titre {
  font-family: var(--bs-serif);
  font-weight: 300;
  color: var(--bs-nuit);
  line-height: 1.12;
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 2.8rem);
}
.bs-titre--clair { color: var(--bs-creme); }
/* Mot mis en valeur en italique doré, à l'intérieur d'un titre */
.bs-titre em {
  font-style: italic;
  color: var(--bs-or);
}

.bs-surtitre {
  font-family: var(--bs-sans);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bs-or-deep);
  display: block;
  margin-bottom: .6rem;
}
.bs-surtitre--clair { color: var(--bs-or); }

.bs-chapo {
  font-family: var(--bs-sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--bs-muted);
  max-width: 34rem;
}
.bs-chapo--centre { margin-inline: auto; text-align: center; }
.bs-chapo--clair  { color: #b5b0c2; }

/* Citation / phrase manifeste (remplace avantageusement une photo) */
.bs-citation {
  font-family: var(--bs-serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.42;
  color: var(--bs-nuit);
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}
.bs-citation em { font-style: italic; color: var(--bs-or-deep); }


/* --------------------------------------------------------------------------
   3. SÉPARATEURS SIGNATURE
   -------------------------------------------------------------------------- */
.bs-filet {
  width: 70px; height: 1px;
  background: var(--bs-or);
  border: 0;
  margin: 1.15rem auto;
}
.bs-filet--court { width: 22px; }

/* Filet + losange : la signature Bellasoa */
.bs-losange {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 1.2rem 0;
}
.bs-losange::before,
.bs-losange::after {
  content: "";
  width: 46px; height: 1px;
  background: rgba(212, 175, 111, .55);
}
.bs-losange i {
  width: 5px; height: 5px;
  background: var(--bs-or);
  transform: rotate(45deg);
  display: block;
}
/* Usage : <div class="bs-losange"><i></i></div> */

/* Variante sur fond clair */
.bs-losange--sombre::before,
.bs-losange--sombre::after { background: rgba(184, 146, 78, .5); }
.bs-losange--sombre i { background: var(--bs-or-deep); }


/* --------------------------------------------------------------------------
   4. SECTIONS & RYTHME
   L'alternance des fonds crée le souffle. Jamais deux fonds identiques
   à la suite.
   -------------------------------------------------------------------------- */
.bs-section         { padding: clamp(2.2rem, 6vw, 4.5rem) 1.25rem; }
.bs-section--nuit   { background: var(--bs-nuit);    color: var(--bs-creme); }
.bs-section--creme  { background: var(--bs-creme);   color: var(--bs-ink); }
.bs-section--creme2 { background: var(--bs-creme-2); color: var(--bs-ink); }
.bs-wrap            { max-width: 1180px; margin-inline: auto; }
.bs-centre          { text-align: center; }


/* --------------------------------------------------------------------------
   5. HERO — sans photo
   Un dégradé radial + un halo doré suffisent à créer la profondeur.
   -------------------------------------------------------------------------- */
.bs-hero {
  position: relative;
  padding: clamp(3rem, 9vw, 6.5rem) 1.5rem;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%,
              #3a2f4d 0%, var(--bs-nuit-2) 45%, var(--bs-nuit) 100%);
}
/* Halo doré diffus, comme une lumière hors champ */
.bs-hero::before {
  content: "";
  position: absolute;
  top: -22%; left: 50%;
  transform: translateX(-50%);
  width: min(560px, 90%);
  aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(212, 175, 111, .14) 0%, transparent 68%);
  pointer-events: none;
}
/* Cadre doré en retrait — le détail signature */
.bs-hero::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212, 175, 111, .3);
  pointer-events: none;
}
.bs-hero > * { position: relative; z-index: 1; }


/* --------------------------------------------------------------------------
   6. TUILES DE CATÉGORIES — sans photo
   Dégradé coloré + halo + numéro fantôme + titre serif.
   -------------------------------------------------------------------------- */
.bs-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 1.75rem;
}

.bs-cat {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
  background: linear-gradient(160deg, var(--bs-teinte-1) 0%, var(--bs-nuit) 78%);
  transition: transform .55s ease;
}
/* Teintes par position — ou utiliser les classes ci-dessous */
.bs-cat--1 { background: linear-gradient(160deg, var(--bs-teinte-1) 0%, var(--bs-nuit) 78%); }
.bs-cat--2 { background: linear-gradient(160deg, var(--bs-teinte-2) 0%, var(--bs-nuit) 78%); }
.bs-cat--3 { background: linear-gradient(160deg, var(--bs-teinte-3) 0%, var(--bs-nuit) 78%); }
.bs-cat--4 { background: linear-gradient(160deg, var(--bs-teinte-4) 0%, var(--bs-nuit) 78%); }

/* Halo doré en haut à gauche */
.bs-cat::before {
  content: "";
  position: absolute;
  top: -28%; left: -12%;
  width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(212, 175, 111, .18) 0%, transparent 70%);
  transition: opacity .55s ease;
}
/* Cadre doré intérieur */
.bs-cat::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(212, 175, 111, .32);
  pointer-events: none;
}
.bs-cat:hover { transform: translateY(-3px); }
.bs-cat:hover::before { opacity: 1.5; }

/* Grand numéro fantôme en haut */
.bs-cat__numero {
  position: absolute;
  top: 1.6rem; left: 0; right: 0;
  text-align: center;
  font-family: var(--bs-serif);
  font-size: 2.9rem;
  line-height: 1;
  color: rgba(212, 175, 111, .16);
  pointer-events: none;
}

.bs-cat__contenu {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.3rem 1rem;
  text-align: center;
  z-index: 1;
}
.bs-cat__titre {
  font-family: var(--bs-serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--bs-creme);
  margin: 0;
}
.bs-cat__lien {
  font-family: var(--bs-sans);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-or);
}

/*
  Usage :
  <a class="bs-cat bs-cat--1" href="/soins-coreens">
    <span class="bs-cat__numero">01</span>
    <div class="bs-cat__contenu">
      <p class="bs-cat__titre">Soins coréens</p>
      <hr class="bs-filet bs-filet--court">
      <span class="bs-cat__lien">Découvrir</span>
    </div>
  </a>
*/


/* --------------------------------------------------------------------------
   7. BANDE DE VALEURS (fond nuit + icônes)
   Utiliser des icônes au trait (Feather, Lucide, Tabler…) ou des caractères.
   -------------------------------------------------------------------------- */
.bs-valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.25rem;
  text-align: center;
}
.bs-valeur__icone {
  font-size: 1.35rem;
  color: var(--bs-or);
  display: block;
  margin-bottom: .5rem;
  line-height: 1;
}
.bs-valeur__label {
  font-family: var(--bs-sans);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-creme);
}


/* --------------------------------------------------------------------------
   8. BOUTONS & LIENS
   -------------------------------------------------------------------------- */
.bs-btn {
  display: inline-block;
  font-family: var(--bs-sans);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .85rem 1.9rem;
  border: 1px solid var(--bs-or);
  color: var(--bs-or);
  background: transparent;
  text-decoration: none;
  transition: background .35s ease, color .35s ease;
}
.bs-btn:hover { background: var(--bs-or); color: var(--bs-nuit); }

.bs-btn--sombre { border-color: var(--bs-nuit); color: var(--bs-nuit); }
.bs-btn--sombre:hover { background: var(--bs-nuit); color: var(--bs-creme); }

.bs-lien {
  font-family: var(--bs-sans);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-or-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--bs-or);
  padding-bottom: 4px;
}


/* --------------------------------------------------------------------------
   9. AJOUTER DES PHOTOS PLUS TARD (optionnel)
   Le jour où tu as des images, ajoute simplement la classe .bs-photo
   et une background-image. Le dégradé passe en voile par-dessus la photo :
   aucune autre modification nécessaire.
   -------------------------------------------------------------------------- */
.bs-cat.bs-photo,
.bs-hero.bs-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bs-cat.bs-photo::before {
  top: 0; left: 0;
  width: 100%; aspect-ratio: auto; height: 100%;
  background: linear-gradient(160deg,
              rgba(26, 26, 46, .35) 0%, rgba(26, 26, 46, .78) 78%);
}
.bs-hero.bs-photo::before {
  top: 0; left: 0; transform: none;
  width: 100%; height: 100%; aspect-ratio: auto;
  background: rgba(26, 26, 46, .62);
}
/*
  Usage futur :
  <a class="bs-cat bs-photo" style="background-image:url('/img/cat-soins.jpg')">
*/


/* --------------------------------------------------------------------------
   10. FINITIONS SUR LES FICHES PRODUITS DU THÈME
   Adoucit les packshots sur fond blanc (Qogita).
   -------------------------------------------------------------------------- */
.product-title, .product-title a,
.h3.product-title, .product-miniature .product-title {
  font-family: var(--bs-serif) !important;
  font-weight: 400 !important;
}
.product-miniature { padding-bottom: .75rem; }
.product-miniature .thumbnail-container,
.product-miniature img { background: #fff; }

.product-price-and-shipping .price,
.product-miniature .price {
  font-family: var(--bs-sans);
  font-weight: 400;
  color: var(--bs-nuit);
  letter-spacing: .02em;
}


/* --------------------------------------------------------------------------
   11. APPARITION AU SCROLL (optionnel, subtil)
   Ajouter .bs-apparait sur un bloc + le script en commentaire.
   -------------------------------------------------------------------------- */
.bs-apparait {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
.bs-apparait.bs-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bs-apparait { opacity: 1; transform: none; transition: none; }
  .bs-cat { transition: none; }
}

/*
  Script à coller avant </body> :

  <script>
  document.addEventListener('DOMContentLoaded', function () {
    var els = document.querySelectorAll('.bs-apparait');
    if (!('IntersectionObserver' in window)) {
      els.forEach(function (e) { e.classList.add('bs-visible'); });
      return;
    }
    var obs = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('bs-visible');
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(function (e) { obs.observe(e); });
  });
  </script>
*/


/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .bs-hero::after { inset: 10px; }
  .bs-cat::after  { inset: 7px; }
  .bs-cat__numero { font-size: 2.2rem; top: 1.2rem; }
  .bs-losange::before,
  .bs-losange::after { width: 30px; }
}

/* ----- HERO AVEC IMAGE ----- */
.bs-hero--img {
  background-size: cover; background-position: center;
  padding: 0 !important; position: relative;
}
.bs-hero--img .bs-hero__voile {
  background: rgba(26, 26, 46, .58);
  padding: 6rem 1.5rem 5.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* ----- BANDEAU DE PREUVES ----- */
.bs-preuves {
  background: #f1ece1;
  border-top: 1px solid rgba(184, 146, 78, .3);
  border-bottom: 1px solid rgba(184, 146, 78, .3);
  display: flex; justify-content: center; align-items: center;
  gap: 1.4rem; flex-wrap: wrap; padding: .85rem 1rem;
}
.bs-preuves span {
  font-size: .8rem; letter-spacing: .08em; color: #1A1A2E;
  text-transform: uppercase;
}
.bs-preuves i { color: #b8924e; font-style: normal; }

/* ----- TUILES AVEC IMAGE ----- */
.bs-cat--img {
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.bs-cat--img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,46,.18) 0%, rgba(26,26,46,.72) 100%);
  transition: background .3s ease;
}
.bs-cat--img:hover::before {
  background: linear-gradient(180deg, rgba(26,26,46,.05) 0%, rgba(26,26,46,.6) 100%);
}
.bs-cat--img .bs-cat__numero,
.bs-cat--img .bs-cat__contenu { position: relative; z-index: 1; }
.bs-cat--img .bs-cat__numero { color: #D4AF6F; }
.bs-cat--img .bs-cat__titre { color: #FAF8F4; }
.bs-cat--img .bs-cat__lien { color: #D4AF6F; }

/* ----- NOS ICÔNES (produits) ----- */
.bs-icones { padding: 4rem 0; }
.bs-produits {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem; margin-top: 2.2rem;
}
@media (max-width: 900px) { .bs-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bs-produits { grid-template-columns: 1fr; } }

.bs-prod {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid rgba(184, 146, 78, .3);
  padding: 1.2rem 1rem 1.4rem; text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.bs-prod:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(26, 26, 46, .12);
  text-decoration: none;
}
.bs-prod__img {
  width: 100%; aspect-ratio: 1/1; display: flex;
  align-items: center; justify-content: center; margin-bottom: 1rem;
}
.bs-prod__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bs-prod__marque {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #b8924e;
}
.bs-prod__nom {
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
  color: #1A1A2E; line-height: 1.35; margin: .35rem 0 .5rem;
  min-height: 2.7em;
}
.bs-prod__prix { font-size: .95rem; color: #1A1A2E; font-weight: 600; }
.bs-prod__lien {
  margin-top: .8rem; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: #1A1A2E;
  border-bottom: 1px solid #b8924e; padding-bottom: 2px;
}
.bs-prod:hover .bs-prod__lien { color: #b8924e; }

/* ----- NOS MAISONS (défilé de marques) ----- */
.bs-maisons { overflow: hidden; padding: 4rem 0; background: #f1ece1; }

.bs-marquee { margin-top: 2.2rem; position: relative; }
.bs-marquee::before,
.bs-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
  pointer-events: none;
}
.bs-marquee::before { left: 0; background: linear-gradient(90deg, #f1ece1, transparent); }
.bs-marquee::after  { right: 0; background: linear-gradient(270deg, #f1ece1, transparent); }

.bs-marquee__piste {
  display: flex; align-items: center; gap: 2rem; width: max-content;
  animation: bs-defile 36s linear infinite;
}
.bs-marquee:hover .bs-marquee__piste { animation-play-state: paused; }

.bs-marquee__item {
  display: block; flex: 0 0 auto; width: 180px; height: 180px;
  border: 1px solid rgba(184, 146, 78, .35); background: #FAF8F4;
  transition: transform .3s ease, box-shadow .3s ease;
}
.bs-marquee__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-marquee__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(26, 26, 46, .12);
}

@keyframes bs-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .bs-marquee__piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .bs-marquee__piste > a:nth-child(n+13) { display: none; }
}

@media (max-width: 640px) {
  .bs-marquee__item { width: 130px; height: 130px; }
  .bs-marquee__piste { gap: 1.2rem; }
}

.bs-btn--sombre {
  background: transparent; color: #1A1A2E; border: 1px solid #b8924e;
}
.bs-btn--sombre:hover { background: #1A1A2E; color: #FAF8F4; }

/* ----- ABONNEMENT AVEC IMAGE ----- */
.bs-abo {
  background-size: cover; background-position: center;
  padding: 0 !important;
}
.bs-abo .bs-abo__voile {
  background: rgba(26, 26, 46, .45);
  padding: 4.5rem 1.5rem;
}
/* Les tuiles prennent le ratio des images (fin de l'effet zoom) */
.bs-cat--img {
  aspect-ratio: 900 / 1035;
  height: auto !important;
  min-height: 0 !important;
}
 
/* Nos icônes : toujours sur UNE ligne */
.bs-produits {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 700px) {
  /* sur mobile : une ligne qui défile horizontalement */
  .bs-produits {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .8rem;
  }
  .bs-produits .bs-prod {
    flex: 0 0 68%;
    scroll-snap-align: center;
  }
}
 
/* ===== PATCH v2.1 ===== */
.bs-cat--img { aspect-ratio: 900 / 1035; height: auto !important; min-height: 0 !important; }
.bs-produits { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 700px) {
  .bs-produits { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem; }
  .bs-produits .bs-prod { flex: 0 0 68%; scroll-snap-align: center; }
}


/* ==========================================================================
   BELLASOA — HEADER « NUIT PRÉCIEUSE » (variante B validée)
   Bloc additif : stylise le header Hummingbird existant sans changer sa
   structure. Retirer ce bloc = retour à l'état antérieur.
   ========================================================================== */

/* ---------- Topline (bandeau supérieur) ---------- */
.header-top {
  background: var(--bs-nuit);
  border-bottom: 1px solid rgba(212, 175, 111, .22);
}
.header-top, .header-top a { color: #b6ae9d; }
.bs-promesses {
  font-family: var(--bs-sans);
  font-size: .68rem;
  letter-spacing: .14em;
  color: #b6ae9d;
  white-space: nowrap;
  align-self: center;
}
.bs-promesses i { color: var(--bs-or); font-style: normal; margin: 0 .5rem; }

/* Sélecteurs langue & devise — typographie « écrin » */
.header-top .language-selector,
.header-top .currency-selector { display: flex; align-items: center; }
.header-top .language-selector .dropdown-toggle,
.header-top .currency-selector .dropdown-toggle,
.header-top .dropdown-toggle {
  font-family: var(--bs-sans) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #e8dcc6 !important;
  background: transparent !important;
  border: 0 !important;
}
.header-top .dropdown-toggle::after {
  border: 0 !important;
  content: '▾';
  font-size: .6rem;
  color: var(--bs-or);
  vertical-align: middle;
  margin-left: .35rem;
}
.header-top .dropdown-toggle:hover { color: var(--bs-or) !important; }
.header-top .dropdown-menu {
  background: #fff;
  border: 1px solid var(--bs-or);
  border-radius: 0;
  box-shadow: 0 8px 22px rgba(26, 26, 46, .16);
  padding: 0;
  min-width: 150px;
}
.header-top .dropdown-item {
  font-family: var(--bs-sans);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-nuit);
  padding: .55rem .95rem;
  border-bottom: 1px solid #f0e9da;
}
.header-top .dropdown-item:last-child { border-bottom: 0; }
.header-top .dropdown-item:hover { background: var(--bs-creme); color: var(--bs-or-deep); }
.header-top .dropdown-item.active,
.header-top .dropdown-item.current {
  background: #faf6ee;
  color: var(--bs-or-deep);
}

/* ---------- Corps du header (logo / recherche / compte / panier) ---------- */
.header-bottom {
  background: linear-gradient(var(--bs-nuit) 0%, var(--bs-nuit-2) 100%);
  border-bottom: 2px solid var(--bs-or);
}
.header-bottom .header-block__title,
.header-bottom .header-block__action-btn,
.header-bottom a { color: #e8dcc6; }
.header-bottom .header-block__icon { color: var(--bs-or); }
.header-bottom .header-block__action-btn:hover .header-block__icon,
.header-bottom .header-block__action-btn:hover { color: var(--bs-or); }
.header-bottom .header-block__badge {
  background: var(--bs-or);
  color: var(--bs-nuit);
}

/* Recherche : champ sombre à filet or */
.header-bottom .search-widget form,
.header-bottom .search-widget { background: transparent; }
.header-bottom .search-widget input[type="text"],
.header-bottom .search-widget input[type="search"] {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(212, 175, 111, .45);
  border-radius: 0;
  color: #fff;
  font-family: var(--bs-sans);
  font-weight: 300;
}
.header-bottom .search-widget input::placeholder { color: #9a9485; }
.header-bottom .search-widget button,
.header-bottom .search-widget .material-icons { color: var(--bs-or); }

/* ---------- Menu principal ---------- */
.header__nav, .header-nav-full, #_desktop_top_menu, .main-menu {
  background: rgba(0, 0, 0, .18);
}
.main-menu .menu__item > a,
.main-menu a, #_desktop_top_menu a,
.header__nav a {
  font-family: var(--bs-sans);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #e8dcc6;
}
.main-menu .menu__item > a:hover,
.main-menu a:hover, #_desktop_top_menu a:hover,
.header__nav a:hover {
  color: var(--bs-or);
}

/* Sous-menus déroulants : écrin blanc filet or */
.main-menu .dropdown-menu, .main-menu .menu__dropdown {
  background: #fff;
  border: 1px solid var(--bs-or);
  border-radius: 0;
}
.main-menu .dropdown-menu a, .main-menu .menu__dropdown a {
  color: var(--bs-nuit);
  letter-spacing: .1em;
}
.main-menu .dropdown-menu a:hover { background: var(--bs-creme); color: var(--bs-or-deep); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .header-bottom { border-bottom-width: 1px; }
  .bs-promesses { display: none; }
}


/* ---------- HEADER NUIT — correctifs v3 ---------- */
/* Sélecteurs langue/devise en <select> natifs : les fondre dans la nuit */
.header-top select,
.header-top .form-select,
.header-top .language-selector select,
.header-top .currency-selector select {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(212, 175, 111, .4) !important;
  border-radius: 0 !important;
  color: #e8dcc6 !important;
  font-family: var(--bs-sans) !important;
  font-size: .7rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: .3rem 1.6rem .3rem .7rem !important;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.header-top .language-selector,
.header-top .currency-selector { position: relative; }
.header-top .language-selector::after,
.header-top .currency-selector::after {
  content: '▾';
  position: absolute;
  right: .55rem; top: 50%;
  transform: translateY(-50%);
  font-size: .6rem;
  color: var(--bs-or);
  pointer-events: none;
}
.header-top select option { color: var(--bs-nuit); background: #fff; }

/* Connexion / Panier : contraste plein */
.header-top a, .header-top .header-block__title,
.header-bottom a, .header-bottom .header-block__title,
.header-top .header-block__action-btn, .header-bottom .header-block__action-btn {
  color: #e8dcc6 !important;
}
.header-top .material-icons, .header-bottom .material-icons { color: var(--bs-or) !important; }
.header-top a:hover, .header-bottom a:hover { color: var(--bs-or) !important; }

/* Recherche : version nuit renforcée (selectors élargis) */
.header-bottom .search-widget input,
#search_widget input, .js-search-input,
.header-bottom input[type="text"], .header-bottom input[type="search"] {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(212, 175, 111, .45) !important;
  border-radius: 0 !important;
  color: #fff !important;
}
.header-bottom .search-widget input::placeholder,
#search_widget input::placeholder { color: #9a9485 !important; }


/* ==========================================================================
   BELLASOA — HEADER V4 « FIDÈLE MAQUETTE » (31/07)
   Reproduit la maquette validée : topline épurée + 4 langues côte à côte,
   wordmark texte, recherche centrée, trio Compte/Favoris/Panier, nav or.
   (Vient après les blocs v2/v3 : la cascade fait foi.)
   ========================================================================== */

/* ---------- TOPLINE ---------- */
.header-top {
  background: var(--bs-nuit) !important;
  border-bottom: 0 !important;
  padding-top: .55rem;
}
.header-top .container-md { border-bottom: 1px solid rgba(212,175,111,.35); padding-bottom: .55rem; }
.bs-promesses {
  font-family: var(--bs-sans);
  font-size: .7rem;
  letter-spacing: .14em;
  color: #cfc8b8;
}
.bs-promesses i { color: var(--bs-or); font-style: normal; margin: 0 .65rem; font-size: .55rem; vertical-align: middle; }

.bs-topright {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 1.6rem;
}

/* 4 langues côte à côte */
.bs-langs {
  display: flex;
  align-items: center;
  gap: .9rem;
  list-style: none;
  margin: 0; padding: 0;
}
.bs-langs__item a, .bs-langs__item span {
  font-family: var(--bs-sans);
  font-size: .7rem;
  letter-spacing: .18em;
  color: #8f8a9c;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s;
}
.bs-langs__item a:hover { color: var(--bs-creme); }
.bs-langs__item--on span {
  color: var(--bs-or);
  border-bottom-color: var(--bs-or);
}

/* Devise : texte épuré, chevron or (annule les encadrés) */
.header-top .currency-selector, .bs-topright .currency-selector { position: relative; }
.header-top select, .bs-topright select,
.header-top .form-select, .bs-topright .form-select {
  background: transparent !important;
  border: 0 !important;
  color: #e8dcc6 !important;
  font-family: var(--bs-sans) !important;
  font-size: .7rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 0 1.1rem 0 0 !important;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
}
.bs-topright .currency-selector::after {
  content: '▾';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: .55rem; color: var(--bs-or);
  pointer-events: none;
}
.header-top select option { color: var(--bs-nuit); background: #fff; }
/* Tout lien/label devise rendu en liste par le module */
.bs-topright .currency-selector a, .bs-topright .currency-selector button {
  color: #e8dcc6 !important;
  font-family: var(--bs-sans) !important;
  font-size: .7rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
}

/* ---------- LIGNE PRINCIPALE ---------- */
.header-bottom {
  background: var(--bs-nuit) !important;
  border-bottom: 0 !important;
  padding: .9rem 0 1.1rem;
}
.bs-mainrow { align-items: center !important; }

/* Wordmark texte */
.bs-wordmark {
  font-family: var(--bs-serif);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: .28em;
  color: var(--bs-creme) !important;
  text-decoration: none !important;
  line-height: 1;
  white-space: nowrap;
}
.bs-wordmark small {
  display: block;
  font-family: var(--bs-sans);
  font-weight: 400;
  font-size: .55rem;
  letter-spacing: .62em;
  color: var(--bs-or);
  text-align: center;
  margin-top: .3rem;
}
.bs-wordmark:hover { color: #fff !important; }

/* Recherche centrée */
.bs-searchzone { display: flex !important; justify-content: center; }
.bs-searchzone > * { width: 100%; max-width: 520px; }
.bs-searchzone form { position: relative; width: 100%; }
.bs-searchzone input[type="text"], .bs-searchzone input[type="search"] {
  width: 100%;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(212,175,111,.5) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: var(--bs-sans) !important;
  font-weight: 300;
  font-size: .88rem !important;
  padding: .62rem 2.6rem .62rem 1rem !important;
}
.bs-searchzone input::placeholder { color: #8f8a9c !important; }
.bs-searchzone button, .bs-searchzone .material-icons { color: var(--bs-or) !important; background: transparent !important; border: 0 !important; }
/* masquer d'éventuels blocs non-recherche remontés par displayTop */
.bs-searchzone #_desktop_user_info, .bs-searchzone .blockcart { display: none !important; }

/* Trio Compte / Favoris / Panier */
.bs-hicons { display: flex !important; gap: 1.9rem; align-items: center; }
.bs-hicon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-decoration: none !important;
}
.bs-hicon__glyph { font-size: 1.15rem; color: var(--bs-or); line-height: 1; }
.bs-hicon__label {
  font-family: var(--bs-sans);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-creme);
}
.bs-hicon:hover .bs-hicon__label { color: var(--bs-or); }
.bs-hicon__badge {
  position: absolute; top: -7px; right: -12px;
  background: var(--bs-or); color: var(--bs-nuit);
  font-family: var(--bs-sans); font-size: .62rem; font-weight: 500;
  min-width: 16px; height: 16px; line-height: 16px;
  text-align: center; border-radius: 50%;
}

/* ---------- NAV PRINCIPALE ---------- */
.header__nav, .header-nav-full, #_desktop_top_menu, .main-menu {
  background: rgba(0,0,0,.22) !important;
  border-bottom: 2px solid var(--bs-or);
}
.main-menu ul, #_desktop_top_menu ul { justify-content: center; gap: 2.6rem; margin: 0; padding: .7rem 0; }
.main-menu .menu__item > a, .main-menu a, #_desktop_top_menu a, .header__nav a {
  font-family: var(--bs-sans) !important;
  font-size: .76rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--bs-creme) !important;
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
}
.main-menu .menu__item > a:hover, .main-menu a:hover,
#_desktop_top_menu a:hover, .header__nav a:hover {
  color: var(--bs-or) !important;
  border-bottom-color: var(--bs-or);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .bs-promesses { display: none; }
  .bs-wordmark { font-size: 1.3rem; }
}

/* défilement doux vers les ancres */
html { scroll-behavior: smooth; }


/* ---------- MOBILE PASS (03/08) ---------- */
@media (max-width: 767.98px) {
  /* Trio compact sur mobile */
  .bs-hicons { gap: 1.1rem; }
  .bs-hicon__label { font-size: .58rem; letter-spacing: .1em; }
  .bs-wordmark { font-size: 1.35rem; letter-spacing: .22em; }
}
/* Langues mobiles */
.bs-mobile-extra { background: var(--bs-nuit); border-top: 1px solid rgba(212,175,111,.25); }
.bs-mobile-langs { display: flex; justify-content: center; padding: .5rem 0; }


/* ---------- MOBILE PASS v2 (03/08) : burger + panneau natifs en nuit, centrage ---------- */
@media (max-width: 767.98px) {
  /* Centrage du header */
  .bs-mainrow { justify-content: center !important; text-align: center; row-gap: .3rem; }
  .bs-mainrow .logo { margin: 0 auto !important; }
  .bs-hicons { width: 100%; justify-content: center !important; margin-top: .2rem; }
  .search__mobile { position: absolute; right: .8rem; top: 1rem; }
  .header-bottom { position: relative; }

  /* Bande burger : nuit */
  .header__nav, .main-menu, #_desktop_top_menu { background: var(--bs-nuit) !important; border-bottom: 1px solid var(--bs-or); }
  .navbar-toggler, .menu-toggler, .js-mobile-menu-toggle, button[data-bs-target*="menu"] {
    background: transparent !important; border: 1px solid rgba(212,175,111,.4) !important;
    border-radius: 0 !important; color: var(--bs-or) !important;
  }
  .navbar-toggler .material-icons, .menu-toggler .material-icons { color: var(--bs-or) !important; }
}

/* Panneau menu mobile (offcanvas natif) : écrin nuit lisible */
#mobile_top_menu_wrapper, .menu__offcanvas, .offcanvas.menu, .mobile-menu, .js-mobile-menu {
  background: var(--bs-nuit) !important;
  color: var(--bs-creme) !important;
}
#mobile_top_menu_wrapper a, .menu__offcanvas a, .offcanvas.menu a, .mobile-menu a {
  color: var(--bs-creme) !important;
  font-family: var(--bs-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .65rem 1rem;
  display: block;
  border-bottom: 1px solid rgba(212,175,111,.12);
}
#mobile_top_menu_wrapper a:hover, .menu__offcanvas a:hover { color: var(--bs-or) !important; }
#mobile_top_menu_wrapper .btn-close, .menu__offcanvas .btn-close {
  filter: invert(1); opacity: .8;
}
/* Déverrouiller le scroll si un backdrop traîne */
body:not(.offcanvas-open) { overflow: auto !important; }