/* =============================================================
 *  HOPP — Habillage de la barre de menu (design noir/jaune)
 *  Source de vérité : /Users/ludovic/Workspace/hopp/wordpress/
 *  Déploiement : ./deploy.sh dev|prod --go   (NE PAS éditer via l'admin WP)
 *
 *  Principe : le menu reste celui du Header Builder de Neve (donc
 *  éditable dans Apparence → Menus, burger mobile et accessibilité
 *  conservés). On ne réécrit pas son markup : on redéfinit les
 *  variables CSS que Neve consomme déjà —
 *    [class*=row-inner] { background: var(--bgcolor);
 *                         border-bottom: var(--rowbwidth) solid var(--rowbcolor) }
 *    .nav-ul > li       { margin: 0 calc(var(--spacing)/2) }
 *    .nav-ul li a       { color: var(--color); min-height: var(--height) }
 *  Ce fichier est chargé APRÈS le CSS inline de Neve (dépendance
 *  'neve-style' dans functions.php) : à spécificité égale, il gagne.
 * ============================================================= */

.hfg_header {
  /* Noir pur et non le #0B0B0B de la maquette : le logo actuel
     (Logo-HOPP-site.png) est un PNG opaque à fond noir, tout autre fond
     dessinerait un rectangle visible autour. À repasser en #0B0B0B le jour
     où le logo est fourni avec un fond transparent. */
  --hopp-bg: #000000;
  --hopp-yellow: #FFED00;
  --hopp-yellow-ink: #141400;
  --hopp-line: #3a3a33;
  --hopp-ink: #ffffff;
  --hopp-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

/* ---- Barre : fond noir, filet bas, sticky ---- */
.header-main {
  --bgcolor: var(--hopp-bg);
  --color: var(--hopp-ink);
  --rowbwidth: 1px;
  --rowbcolor: var(--hopp-line);
}

.hfg_header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: none; /* Neve pose une ombre claire par défaut */
}

/* Neve pose `.wrapper:not(.et-fb-iframe-ancestor){overflow:hidden}`, ce qui
   annule silencieusement le sticky. Sur les pages Elementor la règle
   `body.elementor-page .wrapper{overflow:visible}` reprend le dessus (plus
   spécifique) — mais pas ailleurs. `overflow:clip` conserve le rognage
   horizontal SANS créer de conteneur de défilement, donc le sticky survit.
   Navigateurs trop anciens : la déclaration est ignorée, on retombe sur le
   comportement actuel (header non sticky), sans casse de mise en page. */
.wrapper:not(.et-fb-iframe-ancestor) { overflow: clip; }

/* Décalage sous la barre d'admin WP, sinon elle recouvre le header. */
body.admin-bar .hfg_header.site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .hfg_header.site-header { top: 46px; }
}

/* ---- Conteneur et logo ---- */
.hfg_header .header-main-inner .container { max-width: 1160px; }
.hfg_header .header-main-inner .row--wrapper { padding-top: 12px; padding-bottom: 12px; }

/* Pas de hauteur de logo imposée ici : dev et prod n'ont pas le même
   fichier (dev = logo large 200x54, prod = carré 1080x1080 avec beaucoup
   de marge noire). Une hauteur commune rend le logo carré minuscule.
   La taille se règle par site dans Personnaliser → En-tête → Logo. */

/* ---- Liens du menu ---- */
.builder-item--primary-menu {
  --color: var(--hopp-ink);
  --hovercolor: var(--hopp-yellow);
  --activecolor: var(--hopp-yellow);
  --spacing: 24px;
}

/* La pilule est plus haute que les autres liens : sans ce centrage,
   Neve les aligne en haut et le bouton paraît décalé. */
.hfg_header .header-main-inner .primary-menu-ul.menu-desktop { align-items: center; }

.hfg_header .primary-menu-ul > li.menu-item > .wrap > a {
  font-family: var(--hopp-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.4;
  transition: color .15s ease;
}

/* ---- Premier item = bouton pilule jaune (« MON TEST »).
 *  Sélection par position, car l'URL de cet item diffère entre dev et prod.
 *  Pour la rendre indépendante de l'ordre : ajouter la classe CSS
 *  « hopp-cta » sur l'item dans Apparence → Menus (Options de l'écran →
 *  cocher « Classes CSS »). Les deux sélecteurs sont supportés.
 * ---- */
.hfg_header .primary-menu-ul > li.menu-item:first-child > .wrap > a,
.hfg_header .primary-menu-ul > li.menu-item.hopp-cta > .wrap > a {
  background: var(--hopp-yellow);
  color: var(--hopp-yellow-ink);
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease;
}

.hfg_header .primary-menu-ul > li.menu-item:first-child > .wrap > a:hover,
.hfg_header .primary-menu-ul > li.menu-item.hopp-cta > .wrap > a:hover {
  color: var(--hopp-yellow-ink); /* sinon le --hovercolor jaune le rendrait illisible */
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255, 237, 0, .25);
}

/* ---- Burger mobile : transparent, barres blanches ---- */
.builder-item--nav-icon {
  --bgcolor: transparent;
  --borderwidth: 0;
  --borderradius: 999px;
  --color: var(--hopp-ink);
}
.builder-item--nav-icon .navbar-toggle { color: var(--hopp-ink); }

/* ---- Panneau mobile (menu déroulant plein écran) ---- */
#header-menu-sidebar-bg.header-menu-sidebar-bg {
  --bgcolor: var(--hopp-bg);
  --color: var(--hopp-ink);
}

.header-menu-sidebar .close-sidebar-panel .navbar-toggle {
  --bgcolor: transparent;
  --borderwidth: 0;
  color: var(--hopp-ink);
}

.header-menu-sidebar .primary-menu-ul > li.menu-item > .wrap > a {
  font-family: var(--hopp-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Dans le panneau mobile les liens sont en width:100% : la pilule doit
   se limiter à son texte. */
.header-menu-sidebar .primary-menu-ul > li.menu-item:first-child > .wrap > a,
.header-menu-sidebar .primary-menu-ul > li.menu-item.hopp-cta > .wrap > a {
  display: inline-flex;
  width: auto;
}