/* La Fosca Bay — Header & Footer globaux (JetThemeCore Page Template).
   Classes lfb-* posées par _install/e4-header-footer.php. Chargé sur tout le site. */

/* ===================== HEADER ===================== */
.lfb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--c-white);
  box-shadow: 0 2px 16px rgba(35, 48, 58, .06);
  padding-block: 14px;
  /* barre pleine largeur, contenu centré sur --container */
  padding-inline: max(var(--space-3), calc((100% - var(--container)) / 2));
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Logo lockup : icône (image) + nom « La Fosca Bay » côte à côte */
/* C'est un conteneur Elementor (content_width:full) → le brider à la largeur du contenu,
   sinon il s'étale et pousse le menu sur 2 lignes. !important pour battre le CSS Elementor. */
.lfb-header > .lfb-logo {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Icône */
.lfb-logo-icon, .lfb-logo-icon a { display: inline-flex; align-items: center; line-height: 0; }
.lfb-logo img {
  display: block;
  height: 56px;
  width: auto;
  transition: height .25s ease;
}
/* Nom (heading) */
.lfb-logo-text .elementor-heading-title,
.lfb-logo-text .elementor-heading-title a {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 600;
  color: var(--c-primary) !important;
  text-decoration: none;
  letter-spacing: .01em;
  line-height: 1.05;
  white-space: nowrap;
}

/* Groupe de droite : menu + bouton Réserver (façon V1) */
.lfb-header-right { display: flex; align-items: center; gap: var(--space-4); }

/* Navigation (JetBlocks jet-nav-menu)
   === MÊME MENU PARTOUT — référence = ACCUEIL (source of truth) ===
   Mêmes métriques que le hero d'accueil sur TOUTES les pages : Inter 14px, graisse 400,
   léger letter-spacing, liens alignés à DROITE (collés au bord / près de « Réserver »).
   Seule différence assumée hors accueil : la couleur (foncée pour rester lisible sur la
   barre blanche) — l'accueil garde le blanc via les règles `.home`. */
.lfb-nav ul { list-style: none; margin: 0; padding: 0; }
.lfb-nav li { margin: 0; }
/* Le menu occupe l'espace restant et aligne sa liste tout à droite — UNIQUEMENT quand le
   menu horizontal est affiché (≥768px). En dessous, c'est le menu hamburger (déroulant
   vertical) : ne pas lui imposer nowrap/flex-end, sinon le panneau mobile casse. */
@media (min-width: 768px) {
  .lfb-header > .lfb-nav { flex: 1 1 auto; }
  .lfb-nav .elementor-widget-container,
  .lfb-nav .jet-nav-wrap,
  .lfb-nav .menu-principal-container { width: 100%; }
  .lfb-nav .jet-nav--horizontal {
    justify-content: flex-end !important; /* bat la classe JetMenu .jet-nav-align-flex-start */
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
  }
}
/* Liens — métriques identiques à l'accueil (spécificité .lfb-header… pour battre JetMenu) */
.lfb-header .lfb-nav .menu-item-link,
.lfb-nav a,
.lfb-nav .jet-nav-link {
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 6px 17px;
  position: relative;
  transition: color .2s ease;
}
.lfb-nav .menu-item-link:hover,
.lfb-nav a:hover,
.lfb-nav .current-menu-item > a { color: var(--c-primary); }
.lfb-nav .menu-item-link::after,
.lfb-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--c-cta);
  transition: width .25s ease;
}
.lfb-nav .menu-item-link:hover::after,
.lfb-nav a:hover::after,
.lfb-nav .current-menu-item > a::after { width: 100%; }

/* ---- Sous-menu déroulant (Logements → Dalí / Miró) ---- */
.lfb-nav .jet-nav-arrow { display: inline-flex; align-items: center; margin-left: 5px; }
.lfb-nav .jet-nav-arrow svg { width: 9px; height: 9px; fill: currentColor; }
@media (min-width: 768px) {
  .lfb-nav .jet-nav__sub {
    background: var(--c-white);
    border: 1px solid var(--c-sand);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(20, 30, 40, .16);
    padding: 6px;
    min-width: 190px;
  }
  /* Liens du dropdown : toujours foncés (lisibles même quand le header parent est blanc/accueil) */
  .lfb-header .lfb-nav .jet-nav__sub .menu-item-link,
  .home .lfb-header .lfb-nav .jet-nav__sub .menu-item-link {
    color: var(--c-ink) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 9px 14px !important;
    border-radius: 7px;
    white-space: nowrap;
    width: 100%;
    opacity: 1;
  }
  .lfb-header .lfb-nav .jet-nav__sub .menu-item-link:hover,
  .home .lfb-header .lfb-nav .jet-nav__sub .menu-item-link:hover {
    background: var(--c-bg);
    color: var(--c-primary) !important;
  }
  .lfb-nav .jet-nav__sub .menu-item-link::after { display: none !important; }
}

/* Bouton Réserver */
.lfb-btn-reserver .elementor-button {
  background-color: var(--c-cta);
  color: var(--c-white);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 22px;
  white-space: nowrap; /* ne jamais casser « Réserver » en « Réser-ver » */
  transition: background-color .2s ease, transform .2s ease;
}
.lfb-btn-reserver .elementor-button:hover { background-color: var(--c-cta-hover); transform: translateY(-1px); }

/* ===================== EN-TÊTE TRANSPARENT SUR L'ACCUEIL (façon V1) =====================
   Transparent + texte blanc par-dessus le hero ; devient solide (blanc) au scroll.
   `.lfb-scrolled` est posée par le script (functions.php). Hors accueil : barre solide normale. */
.home .lfb-header {
  position: absolute; left: 0; right: 0; top: 0;
  background: transparent !important; box-shadow: none;
}
.home .lfb-header .lfb-logo .elementor-heading-title,
.home .lfb-header .lfb-logo a { color: #fff !important; font-weight: 400; letter-spacing: .04em; }
.home .lfb-header .lfb-nav a,
.home .lfb-header .lfb-nav .jet-nav-link,
.home .lfb-header .lfb-nav .menu-item a { color: #fff; font-weight: 400; letter-spacing: .03em; }
.home .lfb-header .lfb-nav a:hover,
.home .lfb-header .lfb-nav .current-menu-item > a { color: #fff; }
.home .lfb-header .lfb-nav a::after { background: #fff; }

/* État solide au scroll */
.home .lfb-header.lfb-scrolled {
  background: #fff !important; box-shadow: 0 2px 16px rgba(35, 48, 58, .06);
}
.home .lfb-header.lfb-scrolled .lfb-logo .elementor-heading-title,
.home .lfb-header.lfb-scrolled .lfb-logo a { color: var(--c-primary) !important; }
.home .lfb-header.lfb-scrolled .lfb-nav a,
.home .lfb-header.lfb-scrolled .lfb-nav .jet-nav-link,
.home .lfb-header.lfb-scrolled .lfb-nav .menu-item a { color: var(--c-ink); }
.home .lfb-header.lfb-scrolled .lfb-nav a::after { background: var(--c-cta); }

/* ===================== PARITÉ V1 : menu collé en haut À DROITE sur la photo =====================
   Le template JetThemeCore (post-104) force le menu à `flex-start` et donne flex-grow:1
   au logo ET au menu (Elementor), ce qui fait flotter le menu au milieu de l'en-tête.
   On rétablit ici le rendu exact de V1 : logo à gauche, menu collé à droite, métriques V1.
   `!important` indispensable pour battre post-104.css (même spécificité, ordre incertain). */
/* La photo du hero doit démarrer tout en haut : Kava pose `.site-content{margin-top:30px}`
   qui laisse une bande crème (fond de page) au-dessus de la photo, sur laquelle le menu
   transparent flottait (« fond blanc » + « trop haut »). On la supprime sur l'accueil.
   L'en-tête est absolute/relatif au <body>, donc il suit déjà le décalage de la barre
   d'admin WP (html{margin-top:32px}) : une fois la photo collée en haut, le menu est dessus. */
.home .site-content { margin-top: 0 !important; }
.home .site-content > .elementor { padding-top: 0 !important; }

/* Barre d'admin WP (visible seulement connecté) : la photo est décalée de 32px
   sous la barre, mais l'en-tête absolu reste à top:0 → le menu passe SOUS la barre.
   On descend l'en-tête de la hauteur de la barre uniquement quand elle est présente.
   Le visiteur (déconnecté, site en prod) n'a pas `.admin-bar` → top:0, menu sur la photo. */
body.admin-bar.home .lfb-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar.home .lfb-header { top: 46px !important; }
}

.home .lfb-header {
  padding-block: 30px !important;
  padding-inline: 40px !important;
}
/* Logo : largeur du contenu, calé à gauche, taille V1 (22px) */
.home .lfb-header > .lfb-logo { flex: 0 0 auto !important; width: auto !important; }
.home .lfb-header .lfb-logo .elementor-heading-title,
.home .lfb-header .lfb-logo a {
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}
/* Le bouton « Réserver » est présent en haut à droite sur TOUTES les pages,
   y compris l'accueil (demande Marc). Le bloc de droite reste donc affiché. */
.home .lfb-header > .elementor-element-lfbc00005 { display: flex !important; }
/* Menu : occupe l'espace restant et aligne sa liste tout à droite */
.home .lfb-header > .lfb-nav { flex: 1 1 auto !important; width: auto !important; }
.home .lfb-header .lfb-nav .elementor-widget-container,
.home .lfb-header .lfb-nav .jet-nav-wrap,
.home .lfb-header .lfb-nav .menu-principal-container { width: 100% !important; }
.home .lfb-header .lfb-nav .jet-nav--horizontal {
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
}
/* Liens : métriques V1 (Inter 14px, ~34px entre items, dernier collé au bord) */
.home .lfb-header .lfb-nav .menu-item-link {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  padding: 6px 17px !important;
  opacity: .92;
}
.home .lfb-header .lfb-nav .menu-item-link:hover { opacity: 1; }
.home .lfb-header .lfb-nav .jet-nav--horizontal > .menu-item:last-child .menu-item-link { padding-right: 0 !important; }
/* Lisibilité du texte blanc sur une photo claire (V1 s'appuie sur un dégradé de hero) */
.home .lfb-header .lfb-logo .elementor-heading-title,
.home .lfb-header .lfb-logo a,
.home .lfb-header .lfb-nav .menu-item-link { text-shadow: 0 1px 14px rgba(20, 30, 40, .35); }
/* Logo image sur le hero transparent : ombre douce pour le détacher de la photo */
.home .lfb-header:not(.lfb-scrolled) .lfb-logo img {
  filter: drop-shadow(0 2px 10px rgba(20, 30, 40, .45));
}

/* Masquer les déclencheurs du menu mobile (burger / croix) en desktop — robuste,
   indépendant du custom-jet-blocks.css généré (que les purges de cache effacent). */
@media (min-width: 1025px) {
  .lfb-nav .jet-nav__mobile-trigger-open,
  .lfb-nav .jet-nav__mobile-trigger-close { display: none !important; }
}

/* ===================== FOOTER ===================== */
.lfb-footer {
  background: var(--c-ink);
  color: rgba(255, 255, 255, .82);
  padding: var(--space-6) max(var(--space-3), calc((100% - var(--container)) / 2)) var(--space-4);
  font-size: 15px;
  line-height: 1.7;
}
.lfb-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.lfb-footer-cols > .elementor-element,
.lfb-footer-col { flex: 1 1 200px; width: auto !important; }

.lfb-footer-col-title .elementor-heading-title {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: var(--space-2);
}
.lfb-footer-brand .lfb-footer-col-title .elementor-heading-title { color: var(--c-azur); font-size: 22px; }
.lfb-footer a { color: var(--c-azur); text-decoration: none; }
.lfb-footer a:hover { color: var(--c-white); text-decoration: underline; }

.lfb-footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.lfb-footer .lfb-copy { font-size: 13px; color: rgba(255, 255, 255, .55); margin: 0; text-align: center; }

/* ===================== Responsive ===================== */
@media (max-width: 880px) {
  .lfb-header { flex-wrap: wrap; gap: var(--space-2); }
  .lfb-logo img { height: 46px; }
  .lfb-logo-text .elementor-heading-title,
  .lfb-logo-text .elementor-heading-title a { font-size: 22px; }
  .lfb-nav ul { gap: var(--space-2); }
  .lfb-footer-cols { gap: var(--space-4); }
  .lfb-footer-col { flex: 1 1 45%; }
}
/* Tablette (menu horizontal encore affiché) : le menu complet + lockup + Réserver
   est trop large à ~1024px (iPad Pro 2017) → 2 lignes. On compacte légèrement le
   lockup et les liens pour tout garder sur une seule ligne. */
@media (min-width: 601px) and (max-width: 1100px) {
  .lfb-header > .lfb-logo { gap: 8px; }
  .lfb-logo img { height: 48px; }
  .lfb-logo-text .elementor-heading-title,
  .lfb-logo-text .elementor-heading-title a { font-size: 21px; letter-spacing: 0; }
  .lfb-nav a,
  .lfb-nav .jet-nav-link,
  .lfb-nav .menu-item a,
  .lfb-nav .menu-item-link { font-size: 14px; padding-left: 7px; padding-right: 7px; white-space: nowrap; }
}
/* Téléphone : compacter le lockup (icône + nom) pour TOUT garder sur une seule ligne
   avec le burger et le bouton Réserver (sinon « Réserver » bascule à la ligne). */
@media (max-width: 600px) {
  .lfb-header { flex-wrap: nowrap; gap: 8px; }
  .lfb-header > .lfb-logo { gap: 8px; min-width: 0; }
  .lfb-logo img { height: 38px; }
  .lfb-logo-text .elementor-heading-title,
  .lfb-logo-text .elementor-heading-title a { font-size: 17px; letter-spacing: 0; }
  .lfb-btn-reserver .elementor-button { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
  .lfb-header-actions { gap: 8px; }
}
@media (max-width: 560px) {
  .lfb-footer-col { flex: 1 1 100%; }
}

/* ===================== Menu mobile : panneau déroulant pleine largeur =====================
   BUG (QA 2026-06-14) : sans règle dédiée, la liste du menu mobile ouvert héritait de la
   largeur ÉCRASÉE du .jet-nav-wrap (≈29px = la largeur du burger dans le flex de l'en-tête).
   → le menu s'ouvrait en colonne de ~30px, texte cassé verticalement, cibles tactiles ~34px
   (illisible/intappable sur iPhone). Le thème stylait le menu desktop mais jamais l'état
   mobile ouvert. Correctif : on sort la liste du flux et on l'ancre à .lfb-header pour un
   vrai panneau déroulant pleine largeur, cibles tactiles ≥48px, couleurs lisibles. */
@media (max-width: 1024px) {
  /* neutraliser les ancêtres positionnés (.lfb-nav est position:relative) pour que la liste
     absolue s'ancre sur .lfb-header (position:absolute) = pleine largeur, et non sur la
     colonne étroite du burger. */
  .lfb-header .lfb-nav,
  .lfb-header .jet-nav-wrap.jet-mobile-menu-active { position: static; }

  .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    margin: 0;
    padding: 6px 0 10px;
    background: var(--c-white);
    border-top: 3px solid var(--c-cta, #C6713E);
    box-shadow: 0 16px 32px rgba(20, 30, 40, .22);
    border-radius: 0 0 16px 16px;
    z-index: 1000;
  }
  .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav > .menu-item { width: 100%; }

  /* liens pleine largeur, couleur encre (PAS le blanc du hero), cible tactile ≥48px */
  .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav .menu-item-link,
  .home .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav .menu-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 24px !important;
    font-size: 16px !important;
    line-height: 1.2;
    color: var(--c-ink) !important;
    opacity: 1 !important;
    white-space: nowrap;
    border-bottom: 1px solid var(--c-sand);
  }
  .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav > .menu-item:last-child > .menu-item-link {
    border-bottom: none;
  }
  /* l'underline animée desktop n'a pas lieu d'être dans le panneau */
  .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav .menu-item-link::after { display: none !important; }

  /* sous-menu (Logements → Dalí/Miró) : en retrait, intégré au panneau, pas de carte flottante */
  .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav__sub {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    transform: none !important;
  }
  .lfb-header .jet-nav-wrap.jet-mobile-menu-active .jet-nav__sub .menu-item-link {
    padding-left: 42px !important;
    font-size: 15px !important;
    opacity: .92 !important;
  }
}

/* Sélecteur de langue (E10) */
.lfb-header-actions { display: flex; gap: 14px; align-items: center; width: auto !important; flex: 0 0 auto; }
.lfb-langswitch select {
  font-family: inherit; font-size: 14px; color: var(--c-ink);
  border: 1px solid var(--c-sand); border-radius: 8px;
  background: #fff; padding: 6px 26px 6px 10px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231A5E7A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.lfb-langswitch select:focus { outline: none; border-color: var(--c-azur); }
.lfb-langswitch ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.lfb-langswitch ul a { display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--c-ink); font-size: 13px; }
.lfb-langswitch .current-lang a { font-weight: 700; color: var(--c-primary); }