/* ==========================================================================
   CHÂTEAU LASTOURS — HEADER PREMIUM & MENU FULLSCREEN (CSS)
   --------------------------------------------------------------------------
   À coller dans : Elementor > Réglages du site > CSS personnalisé
   (ou Elementor > Custom Code / fichier enqueue). Fonctionne avec
   lastours-header.js, qui pilote les classes d'état.

   Classes d'état posées par le JS (ne pas les ajouter dans Elementor) :
     .lastours-header.is-visible        header affiché (après le Hero)
     .lastours-header.is-compact        header compact
     html.lastours-menu-is-open         menu ouvert
     html.lastours-scroll-locked        scroll verrouillé
     .lastours-menu-item.is-active      rubrique active (desktop)
     .lastours-menu-item.is-expanded    accordéon ouvert (mobile)

   BREAKPOINTS — à garder synchronisés avec LASTOURS_HEADER_CONFIG (JS).
   Les media queries ne lisent pas les variables CSS : les valeurs sont
   écrites en clair et repérées par le commentaire « BP ».
     Desktop   ≥ 1025px
     Tablette  768px – 1024px  (paysage + hauteur ≥ 600px → mise en page desktop)
     Mobile    ≤ 767px
   Mise en page « SPLIT » (2 colonnes, panels à droite) :
     (min-width: 1025px), (min-width: 768px) and (orientation: landscape) and (min-height: 600px)
   Sinon : mise en page « STACK » (liste verticale + accordéons).

   Pourquoi des !important : Elementor applique ses propres règles aux
   containers (.e-con : padding 10px, position, largeur, transition de
   transform…). Seules les propriétés structurelles sont forcées ; couleurs
   et polices restent celles du site (la famille de police n'est jamais
   imposée).
   ========================================================================== */

:root {
  /* Couleurs */
  --lastours-green: #17251F;
  --lastours-gold: #C2A36B;
  --lastours-ivory: #F3F0E8;
  --lastours-ivory-warm: #F7EBD3;              /* ivoire réchauffé (hover) */
  --lastours-ivory-soft: rgba(243, 240, 232, 0.66);
  --lastours-ivory-mute: rgba(243, 240, 232, 0.42);
  --lastours-line: rgba(243, 240, 232, 0.12);

  /* Header — fonds (ajustables) */
  --lth-bg-ample: rgba(23, 37, 31, 0.62);      /* 0 = totalement transparent */
  --lth-bg-compact: rgba(23, 37, 31, 0.88);
  --lth-blur: 12px;
  --lth-border-compact: rgba(194, 163, 107, 0.16);

  /* Header — dimensions (mobile ; surchargées plus bas par breakpoint) */
  --lth-gutter: clamp(20px, 4vw, 64px);
  --lth-h-ample: 72px;
  --lth-h-compact: 60px;
  --lth-logo-h: 38px;
  --lth-logo-scale-compact: 0.84;

  /* Menu */
  --lth-menu-top: calc(var(--lth-h-ample) + 3vh);
  --lth-panel-bottom: 96px;                    /* mis à jour par le JS */
  --lth-split-left: 55%;                       /* colonne navigation */

  /* Mouvements */
  --lth-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lth-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lth-dur: 0.7s;

  /* Z-index : contenu < header < menu < header au-dessus du menu
     (le rideau du footer est à 1000 : le header passe dessous, le menu ouvert dessus) */
  --lth-z-header: 900;
  --lth-z-overlay: 1100;
  --lth-z-header-open: 1110;

  /* Compensation de la scrollbar quand le scroll est verrouillé (JS) */
  --lth-sbw: 0px;
  --lth-admin: var(--wp-admin--admin-bar--height, 0px);
}

@media (min-width: 768px) { /* BP tablette */
  :root {
    --lth-h-ample: 84px;
    --lth-h-compact: 68px;
    --lth-logo-h: 46px;
  }
}
@media (min-width: 1025px) { /* BP desktop */
  :root {
    --lth-h-ample: 96px;
    --lth-h-compact: 76px;
    --lth-logo-h: 54px;
    --lth-logo-scale-compact: 0.8;
  }
}

/* ==========================================================================
   0. NEUTRALISATION DU WRAPPER ELEMENTOR & DES CONTAINERS BOXED
   ========================================================================== */

/* Le wrapper de la location « header » (Theme Builder) ne doit créer ni
   bloc conteneur (transform), ni contexte d'empilement : le header et le
   menu sont en position: fixed. Annule aussi la mécanique .lh-site-header
   du widget Hero vidéo (le header Lastours gère sa propre apparition). */
html body .lastours-header-host.lastours-header-host {
  position: static !important;
  transform: none !important;
  visibility: visible !important;
  z-index: auto !important;
  transition: none !important;
  filter: none !important;
  margin: 0 !important;
}

/* Ancêtres Elementor qui casseraient le position: fixed du header / menu
   (transform, filter, perspective, contain…) — classe posée par le JS
   uniquement si un tel contexte est détecté. */
html body .lastours-fixed-context-fix {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: none !important;
  will-change: auto !important;
}

/* Containers « boxed » : leur .e-con-inner devient transparent pour la mise
   en page, la structure reste identique dans Elementor. */
.lastours-header .e-con-inner,
.lastours-menu-overlay .e-con-inner {
  display: contents !important;
}

/* Espacement par défaut des widgets Elementor */
.lastours-header .elementor-element.elementor-widget,
.lastours-menu-overlay .elementor-element.elementor-widget {
  margin: 0 !important;
}

.lastours-header .elementor-widget-container,
.lastours-menu-overlay .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   1. HEADER
   ========================================================================== */

.lastours-header {
  position: fixed !important;
  top: var(--lth-admin) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--lth-z-header) !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--lth-h-ample) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 calc(var(--lth-gutter) + var(--lth-sbw)) 0 var(--lth-gutter) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  /* Jamais d'opacity / transform / filter ici : le menu peut être un
     descendant du header, il doit rester en position: fixed sur l'écran. */
  visibility: hidden;
  pointer-events: none;
  transition: height var(--lth-dur) var(--lth-ease), visibility 0s linear 0.6s !important;
}

/* Fond (sur un pseudo-élément : le blur ne crée pas de bloc conteneur) */
.lastours-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--lth-bg-ample);
  -webkit-backdrop-filter: blur(var(--lth-blur));
  backdrop-filter: blur(var(--lth-blur));
  box-shadow: inset 0 -1px 0 transparent;
  opacity: 0;
  transition:
    opacity 0.6s var(--lth-ease),
    background-color var(--lth-dur) var(--lth-ease),
    box-shadow var(--lth-dur) var(--lth-ease);
}

/* Logo + actions : apparition opacity / translateY */
.lastours-header__logo,
.lastours-header__actions {
  position: relative;
  z-index: 1120; /* utile si le menu est imbriqué dans le header */
  opacity: 0;
  transform: translate3d(0, -18px, 0);
  transition:
    opacity 0.6s var(--lth-ease),
    transform 0.6s var(--lth-ease) !important;
}

.lastours-header.is-visible {
  visibility: visible;
  pointer-events: auto;
  transition: height var(--lth-dur) var(--lth-ease), visibility 0s linear 0s !important;
}
.lastours-header.is-visible::before { opacity: 1; }
.lastours-header.is-visible .lastours-header__logo,
.lastours-header.is-visible .lastours-header__actions {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--lth-ease),
    transform 1.1s var(--lth-ease-out) !important;
}
.lastours-header.is-visible .lastours-header__actions {
  transition-delay: 0.08s, 0.08s !important;
}

/* --- État compact --- */
.lastours-header.is-compact {
  height: var(--lth-h-compact) !important;
}
.lastours-header.is-compact::before {
  background-color: var(--lth-bg-compact);
  box-shadow: inset 0 -1px 0 var(--lth-border-compact);
}

/* --- Logo --- */
.lastours-header__logo {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  line-height: 0;
}
.lastours-header__logo a { display: inline-block; line-height: 0; }
.lastours-header__logo img {
  display: block;
  height: var(--lth-logo-h) !important;
  width: auto !important;
  max-width: none !important;
  transform-origin: left center;
  transition: transform var(--lth-dur) var(--lth-ease);
}
.lastours-header.is-compact .lastours-header__logo img {
  transform: scale(var(--lth-logo-scale-compact));
}

/* --- Actions --- */
.lastours-header__actions {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(14px, 2.6vw, 40px) !important;
}

/* --- Bouton « La Boutique ↗ » --- */
.lastours-header__shop { width: auto !important; flex: 0 0 auto !important; }
.lastours-header__shop .elementor-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lastours-ivory) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  transition: color 0.45s var(--lth-ease) !important;
}
.lastours-header__shop .elementor-button-text {
  padding-bottom: 5px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.6s var(--lth-ease-out);
}
@media (hover: hover) {
  .lastours-header__shop .elementor-button:hover { color: var(--lastours-gold) !important; }
  .lastours-header__shop .elementor-button:hover .elementor-button-text { background-size: 100% 1px; }
}

/* --- Header quand le menu est ouvert --- */
html.lastours-menu-is-open .lastours-header {
  z-index: var(--lth-z-header-open) !important;
  visibility: visible;
  pointer-events: auto;
  transition: height var(--lth-dur) var(--lth-ease), visibility 0s linear 0s !important;
}
html.lastours-menu-is-open .lastours-header::before { opacity: 0; }
html.lastours-menu-is-open .lastours-header__logo,
html.lastours-menu-is-open .lastours-header__actions {
  opacity: 1;
  transform: none;
}

/* Menu ouvert : « LOGO  × » — la Boutique est déjà dans la navigation */
.lastours-header__shop {
  transition: opacity 0.45s var(--lth-ease), visibility 0s linear 0s !important;
}
html.lastours-menu-is-open .lastours-header__shop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--lth-ease), visibility 0s linear 0.35s !important;
}

/* Sécurité : aucun mode « header visible » si le JS échoue. Le header reste
   caché (règles ci-dessus) tant que le JS n'a pas posé .is-visible. */

/* ==========================================================================
   2. BURGER → CROIX
   ========================================================================== */

.lastours-header .lastours-menu-toggle { display: block !important; }
.lastours-menu-toggle {
  --lth-w1: 28px;
  --lth-w2: 20px;
  --lth-w3: 12px;
  --lth-w-cross: 26px;
  --lth-gap: 7px;
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lastours-ivory) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.lastours-menu-toggle:hover,
.lastours-menu-toggle:focus,
.lastours-menu-toggle:active {
  background: transparent !important;
  color: var(--lastours-ivory) !important;
}

.lastours-menu-toggle__line {
  position: absolute;
  top: 50%;
  right: 8px;
  display: block;
  height: 1px;
  margin-top: -0.5px;
  background: currentColor;
  transform-origin: 50% 50%;
  /* Fermeture : la croix se défait (rotate) puis les traits reprennent leur place */
  transition:
    rotate 0.32s var(--lth-ease),
    translate 0.38s var(--lth-ease) 0.18s,
    width 0.5s var(--lth-ease-out) 0.18s,
    opacity 0.2s linear 0.2s,
    scale 0.3s var(--lth-ease) 0.18s;
}
.lastours-menu-toggle__line--1 { width: var(--lth-w1); translate: 0 calc(-1 * var(--lth-gap)); }
.lastours-menu-toggle__line--2 { width: var(--lth-w2); }
.lastours-menu-toggle__line--3 { width: var(--lth-w3); translate: 0 var(--lth-gap); }

/* Hover desktop : les traits tendent doucement vers une même longueur */
@media (hover: hover) {
  .lastours-menu-toggle[aria-expanded="false"]:hover .lastours-menu-toggle__line {
    transition-delay: 0s;
  }
  .lastours-menu-toggle[aria-expanded="false"]:hover .lastours-menu-toggle__line--1 { width: 24px; }
  .lastours-menu-toggle[aria-expanded="false"]:hover .lastours-menu-toggle__line--2 { width: 22px; }
  .lastours-menu-toggle[aria-expanded="false"]:hover .lastours-menu-toggle__line--3 { width: 20px; }
}

/* Ouverture : les traits se rejoignent au centre puis pivotent */
.lastours-menu-toggle[aria-expanded="true"] .lastours-menu-toggle__line {
  width: var(--lth-w-cross);
  translate: 0 0;
  transition:
    translate 0.32s var(--lth-ease),
    width 0.4s var(--lth-ease),
    opacity 0.15s linear,
    scale 0.25s var(--lth-ease),
    rotate 0.55s var(--lth-ease-out) 0.24s;
}
.lastours-menu-toggle[aria-expanded="true"] .lastours-menu-toggle__line--1 { rotate: 45deg; }
.lastours-menu-toggle[aria-expanded="true"] .lastours-menu-toggle__line--2 { opacity: 0; scale: 0 1; }
.lastours-menu-toggle[aria-expanded="true"] .lastours-menu-toggle__line--3 { rotate: -45deg; }

/* ==========================================================================
   3. MENU FULLSCREEN — BASE (mise en page STACK : mobile / tablette portrait)
   ========================================================================== */

.lastours-menu-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--lth-z-overlay) !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  background: var(--lastours-green) !important;
  color: var(--lastours-ivory);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* État fermé (avant le JS) — GSAP prend ensuite le relais */
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
  will-change: transform;
}

.lastours-menu-overlay:focus { outline: none !important; }

/* Elementor ajoute une transition de transform aux containers : elle
   entrerait en conflit avec GSAP. */
.lastours-menu-overlay,
.lastours-menu-overlay .e-con {
  transition: none !important;
}

.lastours-menu-inner {
  position: relative !important;
  flex: 1 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--lth-menu-top) var(--lth-gutter) 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.lastours-menu-primary {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 6vh !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.lastours-menu-item {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--lastours-line);
}

.lastours-menu-item__head {
  width: 100% !important;
  max-width: none !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  display: grid !important;
  grid-template-columns: 2.2em minmax(0, 1fr) 44px;
  align-items: center !important;
  gap: 0 12px !important;
}

/* --- Numéros --- */
.lastours-menu-number { width: auto !important; }
.lastours-menu-number .elementor-heading-title {
  margin: 0;
  color: var(--lastours-gold) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Liens principaux --- */
.lastours-menu-link { width: auto !important; min-width: 0; text-align: left !important; }
.lastours-menu-link .elementor-heading-title,
.lastours-menu-number .elementor-heading-title,
.lastours-menu-sublink .elementor-heading-title { text-align: left !important; }
.lastours-menu-link .elementor-heading-title {
  margin: 0;
  color: var(--lastours-ivory) !important;
  font-size: clamp(22px, 6.6vw, 34px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}
.lastours-menu-link a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit !important;
  text-decoration: none !important;
  transition:
    transform 0.6s var(--lth-ease-out),
    color 0.45s var(--lth-ease),
    opacity 0.5s var(--lth-ease);
}
.lastours-menu-link a::after {
  content: "→";
  position: absolute;          /* hors flux : n'influence pas les retours à la ligne */
  left: 100%;
  top: 50%;
  margin: -0.5em 0 0 0.45em;
  line-height: 1;
  display: inline-block;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--lastours-gold);
  opacity: 0;
  transform: translate3d(-8px, 0, 0);
  transition:
    opacity 0.45s var(--lth-ease),
    transform 0.6s var(--lth-ease-out);
}
.lastours-menu-link a[aria-current="page"] { color: var(--lastours-ivory-warm) !important; }

@media (hover: hover) {
  .lastours-menu-link a:hover { transform: translate3d(6px, 0, 0); color: var(--lastours-ivory-warm) !important; }
  .lastours-menu-link a:hover::after { opacity: 1; transform: none; }
}

/* --- Bouton + / − (accordéon) --- */
.lastours-menu-overlay .lastours-menu-expand {
  display: block !important;
}
.lastours-menu-expand {
  position: relative;
  justify-self: end;
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lastours-ivory) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.lastours-menu-expand:hover,
.lastours-menu-expand:focus,
.lastours-menu-expand:active {
  background: transparent !important;
  color: var(--lastours-ivory) !important;
}
.lastours-menu-overlay .lastours-menu-expand[hidden] { display: none !important; }
.lastours-menu-expand__horizontal,
.lastours-menu-expand__vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: currentColor;
  transition:
    transform 0.55s var(--lth-ease-out),
    opacity 0.4s var(--lth-ease),
    background-color 0.4s var(--lth-ease);
}
.lastours-menu-expand__horizontal { width: 14px; height: 1px; margin: -0.5px 0 0 -7px; }
.lastours-menu-expand__vertical { width: 1px; height: 14px; margin: -7px 0 0 -0.5px; }
.lastours-menu-expand[aria-expanded="true"] { color: var(--lastours-gold) !important; }
.lastours-menu-expand[aria-expanded="true"] .lastours-menu-expand__vertical {
  transform: rotate(90deg);
  opacity: 0;
}
/* Le widget HTML qui contient le bouton */
.lastours-menu-item__head .elementor-widget-html { width: auto !important; justify-self: end; }

/* --- Panels (STACK : accordéon sous l'entrée) --- */
.lastours-menu-panel {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  visibility: hidden;
}
.lastours-menu-item.is-expanded .lastours-menu-panel {
  height: auto;
  visibility: visible;
}

/* Images masquées en STACK : menu rapide et éditorial */
.lastours-menu-image { display: none !important; }

.lastours-menu-subnav {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 22px calc(2.2em + 12px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* --- Sous-liens --- */
.lastours-menu-sublink { width: auto !important; }
.lastours-menu-sublink .elementor-heading-title {
  margin: 0;
  color: var(--lastours-ivory-soft) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}
.lastours-menu-sublink a {
  display: inline-block;
  padding: 10px 0;
  color: inherit !important;
  text-decoration: none !important;
  list-style: none;
  transition:
    color 0.4s var(--lth-ease),
    transform 0.55s var(--lth-ease-out);
}
.lastours-menu-sublink a[aria-current="page"] { color: var(--lastours-ivory) !important; }
@media (hover: hover) {
  .lastours-menu-sublink a:hover { color: var(--lastours-gold) !important; transform: translate3d(4px, 0, 0); }
}

/* ==========================================================================
   4. BAS DU MENU
   ========================================================================== */

.lastours-menu-footer {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 26px var(--lth-gutter) calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
/* Si le footer est placé dans .lastours-menu-inner, celui-ci porte déjà les marges latérales */
.lastours-menu-inner .lastours-menu-footer {
  margin-top: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.lastours-menu-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--lth-gutter);
  right: var(--lth-gutter);
  height: 1px;
  background: var(--lastours-line);
}
.lastours-menu-inner .lastours-menu-footer::before { left: 0; right: 0; }

.lastours-menu-social,
.lastours-menu-location {
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 30px !important;
}

/* Liens discrets — fonctionne avec un widget Titre, Texte ou Bouton */
.lastours-menu-social-link,
.lastours-menu-location-text { width: auto !important; }

.lastours-menu-social-link :is(.elementor-heading-title, p, .elementor-button),
.lastours-menu-location-text :is(.elementor-heading-title, p, .elementor-button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lastours-ivory-soft);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lastours-menu-social-link a,
.lastours-menu-location-text a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lastours-ivory-soft) !important;
  text-decoration: none !important;
  transition:
    color 0.4s var(--lth-ease),
    transform 0.55s var(--lth-ease-out);
}
.lastours-menu-social-link a > *,
.lastours-menu-location-text a > * { color: inherit !important; }

/* Lien Google Maps : petite flèche diagonale (l'URL d'Elementor est conservée) */
.lastours-menu-location-text a::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.6em;
  font-size: 1.05em;
  letter-spacing: 0;
  opacity: 0.55;
  transition:
    opacity 0.4s var(--lth-ease),
    transform 0.55s var(--lth-ease-out);
}

@media (hover: hover) {
  .lastours-menu-social-link a:hover { color: var(--lastours-ivory) !important; }
  .lastours-menu-location-text a:hover { color: var(--lastours-gold) !important; transform: translate3d(3px, 0, 0); }
  .lastours-menu-location-text a:hover::after { opacity: 1; transform: translate3d(2px, -2px, 0); }
}

/* ==========================================================================
   5. TABLETTE (STACK portrait, typographie plus ample)
   ========================================================================== */

@media (min-width: 768px) { /* BP tablette */
  .lastours-menu-item__head {
    min-height: 88px !important;
    grid-template-columns: 3.4em minmax(0, 1fr) 44px;
  }
  .lastours-menu-number .elementor-heading-title { font-size: 12px !important; }
  .lastours-menu-link .elementor-heading-title { font-size: clamp(34px, 5.4vw, 48px) !important; }
  .lastours-menu-subnav { padding-left: calc(3.4em + 12px) !important; padding-bottom: 28px !important; }
  .lastours-menu-sublink .elementor-heading-title { font-size: 17px !important; }
  .lastours-menu-footer {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   6. DESKTOP + TABLETTE PAYSAGE — mise en page SPLIT
   ========================================================================== */

/* BP-SPLIT */
@media (min-width: 1025px), (min-width: 768px) and (orientation: landscape) and (min-height: 600px) {

  .lastours-menu-overlay { overflow: hidden; }

  .lastours-menu-inner {
    padding: var(--lth-menu-top) var(--lth-gutter) 0 !important;
  }

  /* Colonne gauche : la « table des matières » */
  .lastours-menu-primary {
    position: static !important;
    flex: 1 1 auto !important;
    width: var(--lth-split-left) !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 0 4vh !important;
  }

  /* Items et têtes en position: static → les panels se positionnent
     par rapport à .lastours-menu-inner (zone de droite commune). */
  .lastours-menu-item {
    position: static !important;
    width: auto !important;
    border-bottom: 0;
  }

  .lastours-menu-item__head {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    padding: clamp(4px, 1.1vh, 14px) 0 !important;
    grid-template-columns: 3.6em auto auto;
    justify-content: start !important;
    align-items: baseline !important;
    gap: 0 !important;
  }

  .lastours-menu-number .elementor-heading-title {
    font-size: 12px !important;
    transform: translateY(-0.9em);   /* numéro discret, en exposant */
  }

  .lastours-menu-link .elementor-heading-title {
    font-size: clamp(30px, min(3.7vw, 6.4vh), 64px) !important;
    line-height: 1.04 !important;
  }
  .lastours-menu-link a { min-height: 0; }

  /* Rubriques non survolées légèrement atténuées pendant le survol de la liste */
  @media (hover: hover) {
    .lastours-menu-primary:hover .lastours-menu-item:not(.is-active) .lastours-menu-link a { opacity: 0.48; }
    .lastours-menu-item.is-active .lastours-menu-link a { color: var(--lastours-ivory-warm) !important; }
  }

  /* +/− réservé au mobile et à la tablette portrait (accordéons) */
  body:not(.elementor-editor-active) .lastours-menu-overlay .lastours-menu-expand,
  body:not(.elementor-editor-active) .lastours-menu-item__head .elementor-widget-html { display: none !important; }

  /* Panels superposés dans la zone de droite */
  .lastours-menu-panel {
    position: absolute !important;
    top: var(--lth-menu-top) !important;
    bottom: var(--lth-panel-bottom) !important;
    left: var(--lth-split-left) !important;
    right: var(--lth-gutter) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 0 4vh !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: clamp(16px, 3vh, 32px) !important;
    --lth-img-h: min(44vh, 460px);
    --lth-img-h-solo: min(60vh, 620px);
    /* Masqués par défaut ; le JS affiche le panel actif (autoAlpha) */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .lastours-menu-item.is-active .lastours-menu-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Image au format naturel (paysage ou portrait), jamais recadrée :
     elle s'inscrit dans une boîte max (largeur du panel × --lth-img-h). */
  .lastours-menu-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    line-height: 0;
  }
  .lastours-menu-image .elementor-widget-container,
  .lastours-menu-image a,
  .lastours-menu-image picture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    text-align: left !important;
  }
  .lastours-menu-image img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: var(--lth-img-h) !important;
    object-fit: contain;
    border-radius: 0 !important;
    transform-origin: 50% 50%;
    will-change: transform;
  }
  /* Rubrique sans sous-menu (ex. Boutique, photo portrait) : image plus haute */
  .lastours-menu-item:not(.has-sub) .lastours-menu-image img {
    max-height: var(--lth-img-h-solo) !important;
  }

  .lastours-menu-subnav {
    width: 100% !important;
    padding: 0 !important;
  }
  .lastours-menu-sublink .elementor-heading-title { font-size: clamp(15px, 1.1vw, 17px) !important; }
  .lastours-menu-sublink a { padding: clamp(5px, 0.8vh, 8px) 0; }

  /* Bas du menu : réseaux à gauche, localisation à droite */
  .lastours-menu-footer {
    flex-direction: row !important;
    align-items: center !important;
    padding-top: 18px !important;
    padding-bottom: 22px !important;
  }
  }
}

/* ==========================================================================
   7. MOBILE
   ========================================================================== */

@media (max-width: 767px) { /* BP mobile */
  .lastours-header { gap: 12px !important; }
  .lastours-header__shop .elementor-button { font-size: 10px !important; letter-spacing: 0.18em !important; }
  .lastours-menu-toggle { --lth-w1: 26px; --lth-w2: 18px; --lth-w3: 11px; --lth-w-cross: 24px; --lth-gap: 6px; }
}

/* Sous 600px, la barre d'admin WordPress défile avec la page (elle n'est
   plus fixe) : le header se colle tout en haut de l'écran. */
@media (max-width: 600px) {
  .lastours-header { top: 0 !important; }
}

/* Très petits écrans : on réduit, sans jamais supprimer « Boutique » */
@media (max-width: 360px) {
  :root { --lth-gutter: 16px; --lth-logo-h: 32px; }
  .lastours-header__actions { gap: 8px !important; }
  .lastours-header__shop .elementor-button { font-size: 9px !important; letter-spacing: 0.12em !important; }
  .lastours-menu-link .elementor-heading-title { font-size: 22px !important; }
}

/* ==========================================================================
   8. FOCUS (clavier)
   ========================================================================== */

.lastours-header a:focus,
.lastours-header button:focus,
.lastours-menu-overlay a:focus,
.lastours-menu-overlay button:focus { outline: none; }

.lastours-header a:focus-visible,
.lastours-header button:focus-visible,
.lastours-menu-overlay a:focus-visible,
.lastours-menu-overlay button:focus-visible {
  outline: 1px solid var(--lastours-gold) !important;
  outline-offset: 6px;
}
.lastours-menu-link a:focus-visible { color: var(--lastours-ivory-warm) !important; }
.lastours-menu-link a:focus-visible::after { opacity: 1; transform: none; }

/* ==========================================================================
   9. VERROUILLAGE DU SCROLL (menu ouvert)
   ========================================================================== */

/* overflow sur <html> uniquement : la position de scroll est conservée, les
   éléments sticky des Heros restent attachés au viewport, aucun ScrollTrigger
   n'est recalculé. Le padding compense la disparition de la scrollbar. */
html.lastours-scroll-locked {
  overflow: hidden !important;
  padding-right: var(--lth-sbw) !important;
  overscroll-behavior: none;
}

/* ==========================================================================
   9 bis. « MASQUER » D'ELEMENTOR (Avancé > Responsive)
   --------------------------------------------------------------------------
   Elementor masque un élément avec .elementor-hidden-desktop / -tablet /
   -mobile, sans !important : les règles structurelles ci-dessus (display:
   flex !important…) l'emportaient. On rétablit ici le masquage, aux mêmes
   breakpoints qu'Elementor, pour tout élément du header et du menu.
   (Dans l'éditeur, les éléments masqués restent visibles et éditables.)
   ========================================================================== */

@media (min-width: 1025px) { /* BP desktop */
  body:not(.elementor-editor-active) :is(.lastours-header, .lastours-menu-overlay) .elementor-hidden-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) { /* BP tablette */
  body:not(.elementor-editor-active) :is(.lastours-header, .lastours-menu-overlay) .elementor-hidden-tablet { display: none !important; }
}
@media (max-width: 767px) { /* BP mobile */
  body:not(.elementor-editor-active) :is(.lastours-header, .lastours-menu-overlay) :is(.elementor-hidden-mobile, .elementor-hidden-phone) { display: none !important; }
}

/* ==========================================================================
   10. PREFERS REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lastours-header,
  .lastours-header::before,
  .lastours-header__logo,
  .lastours-header__actions,
  .lastours-header__logo img,
  .lastours-menu-toggle__line,
  .lastours-menu-expand span,
  .lastours-menu-link a,
  .lastours-menu-link a::after,
  .lastours-menu-sublink a,
  .lastours-menu-social-link a,
  .lastours-menu-location-text a,
  .lastours-menu-location-text a::after {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
  .lastours-header__logo,
  .lastours-header__actions { transform: none !important; }
  .lastours-menu-link a:hover,
  .lastours-menu-sublink a:hover,
  .lastours-menu-location-text a:hover { transform: none !important; }
}

/* ==========================================================================
   11. ÉDITEUR ELEMENTOR — tout reste visible et éditable
   ========================================================================== */

body.elementor-editor-active .lastours-header {
  position: relative !important;
  top: 0 !important;
  visibility: visible;
  pointer-events: auto;
  background: var(--lastours-green) !important;
}
body.elementor-editor-active .lastours-header::before { display: none; }
body.elementor-editor-active .lastours-header__logo,
body.elementor-editor-active .lastours-header__actions { opacity: 1; transform: none; }

body.elementor-editor-active .lastours-menu-overlay {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  visibility: visible !important;
  transform: none !important;
}
body.elementor-editor-active .lastours-menu-inner { padding-top: 48px !important; }
body.elementor-editor-active .lastours-menu-primary,
body.elementor-editor-active .lastours-menu-item,
body.elementor-editor-active .lastours-menu-item__head { position: relative !important; width: 100% !important; }
body.elementor-editor-active .lastours-menu-panel {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  padding: 16px 0 32px !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 24px 40px;
  outline: 1px dashed rgba(194, 163, 107, 0.35);
  outline-offset: 4px;
}
body.elementor-editor-active .lastours-menu-image {
  display: block !important;
  width: 220px !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  overflow: hidden !important;
}
body.elementor-editor-active .lastours-menu-image img { width: 100%; height: 100%; object-fit: cover; }
body.elementor-editor-active .lastours-menu-expand { display: block; }