/* =========================================================
   🌸 HEADER – VERSION NETTOYÉE ET OPTIMISÉE
   ========================================================= */

/* --- STRUCTURE GLOBALE --- */
.jlb-header {
  width: 100%;
  background-color: #f9cddc;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #eee;
  height: 120px;
}

.jlb-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  gap: clamp(30px, 4vw, 60px);
}

/* --- LOGO --- */
.navbar-left img {
  height: 100px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
  display: block !important;
}
.navbar-left img:hover { transform: scale(1.03); }

/* --- BANDEAU --- */
.jlb-banner {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
}
.jlb-banner p {
  color: #b2004b;
  font-weight: 600;
  margin: 0;
}

/* --- MENU PRINCIPAL --- */
.navbar-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  gap: clamp(30px, 4vw, 60px);
  margin: 0;
  padding: 0;
}
.navbar-menu a {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}
.navbar-menu a:hover { color: #b2004b; }

/* --- BOUTON "RÉSERVER" --- */
.btn-reserver {
  background-color: #b2004b;
  color: #fff !important;
  padding: 9px 22px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}
.btn-reserver:hover { background-color: #d32f71; }

/* --- ZONE DROITE (Bonjour + Mon compte) --- */
.navbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.bonjour-user {
  color: #b2004b;
  font-weight: 600;
  line-height: 1.2;
}

/* --- MENU COMPTE DÉROULANT --- */
.user-menu { position: relative; }
.user-menu > a {
  color: #333;
  font-weight: 600;
  text-decoration: none;
}
.user-menu > a:hover { color: #b2004b; }

.user-menu .sub-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff !important;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  list-style: none;
  text-align: left;
  z-index: 100;
}
.user-menu:hover .sub-menu { display: block; }

.user-menu .sub-menu a {
  display: block;
  padding: 6px 10px;
  color: #444;
  text-decoration: none;
  font-weight: 500;
  text-align: left;
}
.user-menu .sub-menu a:hover {
  background-color: #fde4ec;
  color: #b2004b;
}

/* --- BURGER --- */
.jlb-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}
.jlb-burger:hover,
.jlb-burger:focus,
.jlb-burger.active {
  background-color: #fff !important;
  transition: background-color 0.3s ease;
}
.jlb-burger .burger-bar {
  width: 28px;
  height: 3px;
  background-color: #b2004b;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.jlb-burger.active .burger-bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.jlb-burger.active .burger-bar:nth-child(2) {
  opacity: 0;
}
.jlb-burger.active .burger-bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* =========================================================
   🌸 RESPONSIVE
   ========================================================= */

/* --- MOBILE --- */
@media (max-width: 900px) {
  .jlb-header { height: 90px; }
  .navbar-left img { height: 70px; }
  .jlb-burger { display: flex; }

  .navbar-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 260px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
    z-index: 1001;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .navbar-menu.active { display: flex !important; }

  .navbar-menu li,
  .navbar-menu a {
     text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100%;
    padding: 6px 14px !important;
  }
  .navbar-menu a:hover {
    background-color: #fde4ec;
    border-radius: 6px;
  }

  /* Bonjour prénom centré, rose foncé */
  .menu-mobile-only.bonjour-mobile {
    display: block !important;
    text-align: center !important;
    color: #b2004b !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    width: 100%;
    background: transparent !important;
    padding: 8px 0 !important;
  }

  /* Sous-menu compte mobile */
  .menu-mobile-only.user-menu .sub-menu {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    background: #fff !important;
    text-align: left !important;
  }
  .menu-mobile-only.user-menu .sub-menu a {
    text-align: left !important;
    padding-left: 14px !important;
  }
}

/* --- PETITS TÉLÉPHONES --- */
@media (max-width: 480px) {
  .navbar-left img { height: 60px; }
}

/* =========================================================
   🌸 AJUSTEMENTS FINAUX – VERSION MOBILE + ALIGNEMENTS
   ========================================================= */

/* 1️⃣ Cacher la zone droite en mobile (Bonjour + Mon compte PC) */
@media (max-width: 900px) {
  .navbar-right {
    display: none !important;
  }
}

/* 2️⃣ Afficher uniquement les versions mobile dans le burger */
@media (max-width: 900px) {
  .menu-mobile-only.bonjour-mobile {
    display: block !important;
    text-align: center !important;
    color: var(--rose-fonce, #b2004b) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    width: 100%;
    background: transparent !important;
    padding: 6px 0 !important;
    margin: 2px 0 !important;
    border-bottom: 1px solid #f4b7cb;
  }

  .menu-mobile-only.user-menu {
    display: block !important;
    margin-top: 0 !important;
  }

  /* Sous-menu mobile "Mon compte" */
  .menu-mobile-only.user-menu .sub-menu {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    background: #fff !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .menu-mobile-only.user-menu .sub-menu a {
    display: block;
    padding: 6px 14px !important; /* espace vertical réduit */
    text-align: left !important;
    color: #333 !important;
  }

  .menu-mobile-only.user-menu .sub-menu a:hover {
    background-color: #fde4ec !important;
    color: #b2004b !important;
  }
}

/* 3️⃣ Alignement à gauche de tous les liens du menu burger */
@media (max-width: 900px) {
  .navbar-menu li,
  .navbar-menu a {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 5px 14px !important;
  }
}

/* 4️⃣ Réduction de l’espace vertical dans le menu burger */
@media (max-width: 900px) {
  .navbar-menu {
    padding: 4px 10px !important;
    gap: 4px !important;
  }
}

/* ===============================================
   🌸 Gestion texte court / long – affichage correct
   =============================================== */

/* Par défaut (desktop) : afficher le texte long uniquement */
.navbar-menu a .texte-long { display: inline; }
.navbar-menu a .texte-court { display: none; }

/* Tablette : 901px–1150px → afficher uniquement le texte court */
@media (max-width: 1150px) and (min-width: 901px) {
  .navbar-menu a .texte-long { display: none; }
  .navbar-menu a .texte-court { display: inline; }
}

/* Mobile : ≤900px → forcer le texte long et masquer le texte court */
@media (max-width: 900px) {
  .navbar-menu a .texte-long { display: inline !important; }
  .navbar-menu a .texte-court { display: none !important; }
}

/* ===============================================
   🌸 Alignement homogène des retours à la ligne
   =============================================== */
@media (max-width: 900px) {
  /* Corrige le texte à plusieurs lignes dans le sous-menu mobile */
  .menu-mobile-only.user-menu .sub-menu a {
    display: block;
    text-align: left !important;
    padding-left: 18px !important; /* espace régulier */
    text-indent: 0 !important; /* évite le décalage */
    line-height: 1.4 !important; /* hauteur plus lisible */
    white-space: normal !important; /* autorise le retour à la ligne */
  }

  /* Force le retrait cohérent sur toutes les lignes */
  .menu-mobile-only.user-menu .sub-menu a span,
  .menu-mobile-only.user-menu .sub-menu a {
    display: inline-block;
    width: 100%;
  }
}

/* =========================================================
   🌸 Correction finale – alignement parfait des retours à la ligne
   ========================================================= */
@media (max-width: 900px) {
  /* Aligne parfaitement les textes multi-lignes dans les menus */
  .navbar-menu li a,
  .menu-mobile-only.user-menu .sub-menu a {
    display: block;
    text-align: left !important;
    padding-left: 1.1rem !important; /* marge externe cohérente */
    text-indent: 0 !important;       /* aucune indentation sur la 1ère ligne */
    line-height: 1.4 !important;
    white-space: normal !important;  /* autorise le retour à la ligne */
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Retrait visuel uniforme : même alignement pour toutes les lignes */
  .navbar-menu li a span,
  .menu-mobile-only.user-menu .sub-menu a span {
    display: inline-block;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
  }

  /* Ajuste le fond survol sans déborder */
  .navbar-menu a:hover,
  .menu-mobile-only.user-menu .sub-menu a:hover {
    background-color: #fde4ec !important;
    border-radius: 6px;
    padding-left: 1.1rem !important;
  }
}

/* =========================================================
   🌸 Masquer les éléments mobile en version desktop/tablette
   ========================================================= */
@media (min-width: 901px) {
  .menu-mobile-only.bonjour-mobile,
  .menu-mobile-only.user-menu {
    display: none !important;
  }
}


/* =========================================================
   🌸 OPTIMISATION VERSION TABLETTE (901–1150px)
   ========================================================= */
@media (max-width: 1150px) and (min-width: 901px) {
  /* Structure 6 colonnes : logo | lien1 | lien2 | lien3 | réserver | compte */
  .jlb-navbar {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    justify-content: center;
    text-align: center;
    column-gap: 1.5rem;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Colonne 1 : logo */
  .navbar-left {
    grid-column: 1 / 2;
    justify-self: center;
  }

  /* Colonnes 2 à 4 : liens du menu centrés */
  .navbar-menu {
    display: contents !important; /* pour que chaque li occupe une cellule */
  }

  .navbar-menu li {
    justify-self: center;
    list-style: none;
  }

  .navbar-menu a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
  }

  .navbar-menu a:hover {
    color: #b2004b;
  }

  /* Colonne 5 : bouton Réserver */
  .btn-reserver {
    grid-column: 5 / 6;
    justify-self: center;
    background-color: #b2004b;
    color: #fff !important;
    padding: 9px 22px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
  }

  .btn-reserver:hover {
    background-color: #d32f71;
  }

  /* Colonne 6 : Bonjour + Mon compte (chaque élément sur une ligne) */
  .navbar-right {
    grid-column: 6 / 7;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
  }

  .bonjour-user {
    color: #b2004b;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }

  .user-menu {
    position: relative;
    text-align: center;
  }

  .user-menu > a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
  }

  .user-menu > a:hover {
    color: #b2004b;
  }
}


/* --- S'identifier (mobile-only) --- */

/* Hide the mobile-only login item on desktop/tablet */
@media (min-width: 991.99px) {
  #nav-menu > li.menu-mobile-only,
  #nav-menu li.menu-mobile-only a {
    display: none !important;
  }
}

/* Ensure it *does* appear inside the burger (mobile) */
@media (max-width: 991.98px) {
  #nav-menu > li.menu-mobile-only {
    display: flex !important;           /* or list-item if you prefer dots removed elsewhere */
    align-items: center;
  }
}

/* =========================================================
   🌸 VISIBILITÉ DU BURGER & DU "S'IDENTIFIER" MOBILE
   ========================================================= */

/* 1️⃣ — Le burger n'apparaît qu'en mobile (≤900px) */
@media (max-width: 900px) {
  .jlb-burger {
    display: flex !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    justify-content: center;
    align-items: center;
  }
}
@media (min-width: 901px) {
  .jlb-burger {
    display: none !important; /* 🚫 Caché en tablette & PC */
  }
}

/* 2️⃣ — Masquer tous les éléments "menu-mobile-only" en tablette & PC */
@media (min-width: 901px) {
  #nav-menu > li.menu-mobile-only,
  #nav-menu li.menu-mobile-only a {
    display: none !important;
  }
}

/* =========================================================
   🌸 ALIGNEMENT FINAL MOBILE (logo, burger, texte bandeau)
   ========================================================= */
@media (max-width: 900px) {
  /* ✅ Structure mobile : logo à gauche, burger à droite */
  .jlb-navbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px !important; /* marge équilibrée gauche/droite */
    height: 90px !important;
  }

  /* ✅ Logo : centré verticalement, taille adaptée */
  .navbar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
  }
  .navbar-left img {
    height: 72px !important;
    width: auto;
    object-fit: contain;
  }

  /* ✅ Burger : parfaitement centré verticalement et à droite */
  .jlb-burger {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  /* ✅ Texte bandeau : centré horizontalement et bien calé en bas */
  .jlb-banner {
    position: absolute;
    bottom: 6px; /* ajusté juste au-dessus du bord */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px); /* évite chevauchement logo/burger */
    text-align: center;
    pointer-events: none;
  }

  .jlb-banner .banner-content p {
    color: #b2004b;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =========================================================
   🌸 OPTIMISATION VERSION TABLETTE (901–1150px)
   ========================================================= */
@media (max-width: 1150px) and (min-width: 901px) {
  /* Structure 6 colonnes : logo | lien1 | lien2 | lien3 | réserver | compte */
  .jlb-navbar {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    justify-content: center;
    text-align: center;
    column-gap: 1.5rem;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Colonne 1 : logo */
  .navbar-left {
    grid-column: 1 / 2;
    justify-self: center;
  }

  /* Colonnes 2 à 4 : liens du menu centrés */
  .navbar-menu {
    display: contents !important; /* pour que chaque li occupe une cellule */
  }

  .navbar-menu li {
    justify-self: center;
    list-style: none;
  }

  .navbar-menu a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
  }

  .navbar-menu a:hover {
    color: #b2004b;
  }

  /* Colonne 5 : bouton Réserver */
  .btn-reserver {
    grid-column: 5 / 6;
    justify-self: center;
    background-color: #b2004b;
    color: #fff !important;
    padding: 9px 22px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
  }

  .btn-reserver:hover {
    background-color: #d32f71;
  }

  /* Colonne 6 : Bonjour + Mon compte (chaque élément sur une ligne) */
  .navbar-right {
    grid-column: 6 / 7;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
  }

  .bonjour-user {
    color: #b2004b;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }

  .user-menu {
    position: relative;
    text-align: center;
  }

  .user-menu > a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
  }

  .user-menu > a:hover {
    color: #b2004b;
  }
}

/* =========================================================
   🌸 ALIGNEMENT VERTICAL DU LOGO (TABLETTE & PC)
   ========================================================= */
@media (min-width: 901px) {
  /* ✅ Centre verticalement le contenu du header */
  .jlb-header {
    display: flex;
    align-items: center;       /* centre verticalement dans le bandeau */
  }

  /* ✅ Centre verticalement le logo dans sa cellule */
  .navbar-left {
    display: flex;
    align-items: center !important;
    justify-content: flex-start;
    height: 100%;
  }

  /* ✅ Taille proportionnée et bien centrée */
  .navbar-left img {
    height: 85%;              /* légèrement plus petit que le bandeau */
    max-height: 100px;        /* limite haute */
    width: auto;
    object-fit: contain;
    margin: auto 0;           /* équilibre haut/bas */
    display: block;
  }

  /* ✅ S’assure que les autres éléments sont centrés verticalement aussi */
  .navbar-menu,
  .navbar-right {
    display: flex;
    align-items: center !important;
  }
}

/* =========================================================
   🌸 SUPPRESSION DE LA BANDE SUPÉRIEURE KADENCE
   ========================================================= */

/* ✅ Supprime toute marge ou padding ajouté par Kadence au-dessus du header */
.site-top-header-wrap,
#top-header,
#wrapper-header,
.header-area,
header#masthead,
.site-header,
.site-header-row-container-inner,
.site-header-wrap-inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: none !important;
  background: none !important;
}

/* ✅ Neutralise tout offset ou hauteur réservée pour le header sticky */
body,
html,
#page,
#inner-wrap,
#main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  scroll-padding-top: 0 !important;
}

/* ✅ Empêche Kadence d’ajouter une hauteur artificielle pour le sticky header */
:root {
  --wp-admin--admin-bar--height: 0px !important;
}

/* ✅ Force le header à coller directement en haut de la fenêtre */
.jlb-header {
  margin-top: 0 !important;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 🚫 Cacher les liens du menu "Mon compte" menant à des pages privées */
body:not(.role-administrator) .user-menu .sub-menu a[href*="/mon-profil/"],
body:not(.role-administrator) .user-menu .sub-menu a[href*="/mes-reservations/"],
body:not(.role-administrator) .user-menu .sub-menu a[href*="/facture/"] {
  display: none !important;
}


/* =========================================================
   🌸 MENU MOBILE – VERSION COULISSANTE À DROITE
   ========================================================= */
@media (max-width: 900px) {
  .navbar-menu {
    position: fixed;
    /* top: 0; */
    right: 0;
    width: 260px;
    /* height: 100vh; */
    background: #fff;
    border-left: 1px solid #eee;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 80px 0 20px;  */
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 9999;
    top: 90px; /* juste sous le header mobile */
    height: auto;
    max-height: calc(100vh - 90px);
    padding: 10px 0 20px;
    overflow-y: auto;

  }

  .navbar-menu.active {
    transform: translateX(0);
  }

  .navbar-menu li {
    width: 100%;
  }

  .navbar-menu a {
    display: block;
    width: 100%;
    padding: 12px 20px;
    color: #333;
    font-weight: 600;
    text-align: left;
    transition: background 0.2s ease;
  }

  .navbar-menu a:hover {
    background-color: #fde4ec;
    color: #b2004b;
  }

  /* Sous-menu "Mon compte" mobile */
  .menu-mobile-only.user-menu .sub-menu {
    width: 100%;
    background: #fff;
    border: none;
    box-shadow: none;
  }

  .menu-mobile-only.user-menu .sub-menu a {
    padding-left: 32px;
    font-weight: 500;
  }

  /* Bonjour + séparation douce */
  .menu-mobile-only.bonjour-mobile {
    color: #b2004b;
    font-weight: 700;
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px solid #f4b7cb;
    margin-bottom: 6px;
  }

  /* Cache la zone droite du header sur mobile */
  .navbar-right {
    display: none !important;
  }
}