/*
 * Linov Menu - styles v2.
 * Structure : rangée d'onglets pleine largeur + panneau mega menu pleine
 * largeur (bandeau vertical + groupes en colonnes fluides), inspirée de la
 * maquette de référence transmise par le chef de projet.
 * v2 : habillage desktop retravaillé — palette alignée sur la charte du site
 * (marine des titres + rouge #d4202c du bouton devis), panneau arrondi avec
 * animation d'entrée, soulignement animé des onglets, survols en pastille.
 */

/* Posée sur <html> par le JS pendant que l'overlay mobile est ouvert. */
html.lnv-menu-lock-scroll {
  overflow: hidden;
}

.lnv-menu {
  /* Palette alignée sur la charte visible du site : marine du bandeau haut
     pour les titres, rouge du bouton "Demander un devis" pour l'accent
     (même rouge #d4202c que dans linovdevis). */
  --lnv-menu-accent: #d4202c;
  --lnv-menu-accent-dark: #a4161f;
  --lnv-menu-accent-soft: #fdeeef;
  --lnv-menu-text: #1c2947;
  --lnv-menu-muted: #64748b;
  --lnv-menu-eyebrow: #8c8c8c;
  --lnv-menu-border: #e5e5e5;
  --lnv-menu-border-soft: #eef0f4;
  --lnv-menu-hover-bg: #f5f6f9;
  --lnv-menu-side-bg: var(--lnv-menu-accent);
  --lnv-menu-columns: 6;

  position: relative;
  width: 100%;
}

.lnv-menu__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  gap: 20px;
}

.lnv-menu__item {
  flex: 1 1 0;
  min-width: 0;
}

/*
 * .lnv-menu__trigger mélange des <button> (Activité/Gamme) et des <a>
 * (ECOFIR/Catalogue) : le thème/PrestaShop applique des styles natifs
 * différents selon la balise (boutons vs liens), d'où des couleurs
 * incohérentes entre les 4 entrées. On force explicitement tout ce qui
 * doit être identique quelle que soit la balise, en !important pour
 * passer au-dessus de ces styles natifs.
 */
.lnv-menu__trigger {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 8px !important;
  margin: 0 !important;
  cursor: pointer;
  text-align: center !important;
  text-decoration: none !important;
  font-family: inherit !important;
  position: relative;
}

/* Soulignement animé sous l'onglet actif/survolé : petit trait accent qui
   s'élargit depuis le centre, pour signaler l'onglet sans changer sa boîte. */
.lnv-menu__trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--lnv-menu-accent);
  transform: translateX(-50%);
  transition: width 0.2s ease;
}

.lnv-menu__trigger:hover::after,
.lnv-menu__item--dropdown.lnv-menu__item--open .lnv-menu__trigger::after {
  width: 32px;
}

.lnv-menu__trigger--link:hover .lnv-menu__label,
.lnv-menu__trigger:hover .lnv-menu__label,
.lnv-menu__item--dropdown.lnv-menu__item--open .lnv-menu__label {
  color: var(--lnv-menu-accent) !important;
}

.lnv-menu__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--lnv-menu-eyebrow);
  letter-spacing: 0.3px;
	line-height: 1em;
}

.lnv-menu__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lnv-menu-text);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.lnv-menu__chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--lnv-menu-accent);
  transition: transform 0.15s ease;
}

.lnv-menu__item--open .lnv-menu__chevron {
  transform: rotate(180deg);
}

/* ECOFIR/Catalogue : pictos SVG fournis par le client (pas de currentColor,
   donc pas de recolorisation CSS ici — juste un calage de taille/alignement). */
.lnv-menu__icon {
  display: inline-block !important;
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.lnv-menu__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bouton burger : masqué en desktop, affiché uniquement sous 992px. */
.lnv-menu__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.lnv-menu__burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--lnv-menu-text);
  border-radius: 1px;
}

/* En desktop, ce wrapper ne doit rien changer à la mise en page :
   `display: contents` le retire de la boîte, .lnv-menu__list reste un
   enfant flex direct de .lnv-menu comme avant l'ajout du burger. */
.lnv-menu__mobile-panel {
  display: contents;
}

/* Même principe pour la rangée titre+caret des groupes : neutre en
   desktop (le titre garde son comportement de bloc dans les colonnes),
   elle ne devient une vraie rangée flex qu'en mobile. */
.lnv-menu__group-row {
  display: contents;
}

/* Caret d'ouverture des familles : uniquement pour le mode slider mobile. */
.lnv-menu__group-toggle {
  display: none;
}

/* Sous-panneau glissant mobile : en desktop il redevient transparent
   (display: contents) et sa tête "retour" disparaît — la sous-liste
   reste affichée en colonnes comme avant. */
.lnv-menu__subpanel {
  display: contents;
}

.lnv-menu__subpanel-head {
  display: none;
}

/* Bouton retour de la barre-titre : réservé au mobile. */
.lnv-menu__panel-back {
  display: none;
}

/* Voile sombre du tiroir mobile : inexistant en desktop. */
.lnv-menu__overlay {
  display: none;
}

/* Pied de tiroir (contact rapide) : réservé au mobile. */
.lnv-menu__mobile-footer {
  display: none;
}

.lnv-menu__mobile-header {
  display: none;
}

/* Le panneau se positionne par rapport à .lnv-menu (toute la rangée
   d'onglets), pas par rapport à l'onglet lui-même : il occupe donc toute
   la largeur du menu, quel que soit l'onglet ouvert. */
.lnv-menu__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 900;
  background: #fff;
  border: 1px solid var(--lnv-menu-border-soft);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  /* La contrainte de hauteur/scroll vit ici, sur l'englobant, jamais sur
     l'élément en `columns` juste en dessous : columns + max-height +
     overflow directement sur le même élément fait "planter" le calcul
     d'équilibrage des colonnes et écrase le texte des blocs les uns sur
     les autres. */
  max-height: 80vh;
  overflow-y: auto;
  /* overflow-y:auto fait passer overflow-x en auto aussi : un débordement
     horizontal même d'1px (arrondis de calcul colonnes/90vw) affiche alors
     une scrollbar horizontale parasite en bas du panneau. On ne veut
     JAMAIS de scroll horizontal ici. */
  overflow-x: hidden;
  /* Scrollbar discrète quand le panneau dépasse 80vh. */
  scrollbar-width: thin;
  scrollbar-color: #c7ccd6 transparent;
}

.lnv-menu__panel::-webkit-scrollbar {
  width: 6px;
}

.lnv-menu__panel::-webkit-scrollbar-thumb {
  background: #c7ccd6;
  border-radius: 3px;
}

@media (min-width: 992px) {
  /* Le menu vit dans une colonne du header (souvent moins large que la
     page) : on le fait "déborder" en pleine largeur de la fenêtre plutôt
     que de rester limité à la largeur de son conteneur parent, pour
     accueillir plus de colonnes et réduire le scroll vertical. */
  .lnv-menu__panel {
    left: 50%;
    right: auto;
    width: 90vw;
    transform: translateX(-50%);
    /* Entrée en douceur : l'animation (re)démarre à chaque passage de
       display:none à block, donc à chaque ouverture — au clic comme au
       survol. Le translateX(-50%) de centrage doit être répété dans les
       keyframes, sinon l'animation l'écraserait pendant sa durée. */
    animation: lnv-panel-in 0.22s ease;
  }

  .lnv-menu__panel-inner {
    max-width: 90vw;
    margin: 0 auto;
  }
}

@keyframes lnv-panel-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.lnv-menu__item--open .lnv-menu__panel {
  display: block;
}

/* Repli en CSS pur (survol) si le JS n'a pas pu s'exécuter. */
@media (hover: hover) {
  .lnv-menu__item--dropdown:hover .lnv-menu__panel {
    display: block;
  }
}

/* Grid plutôt que flex : un enfant en `columns` (multi-colonnes) dans un
   conteneur flex a un intrinsic-sizing peu fiable selon les navigateurs
   et ne s'étire pas toujours pour remplir l'espace restant (d'où un grand
   vide au lieu d'un espacement régulier entre colonnes). Une piste `1fr`
   en grid est beaucoup plus prévisible pour ce cas "bandeau fixe + reste
   fluide". */
.lnv-menu__panel-inner {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: stretch;
}

/* Bandeau vertical répétant le nom de l'onglet ouvert. */
.lnv-menu__panel-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  background: linear-gradient(180deg, var(--lnv-menu-side-bg), var(--lnv-menu-accent-dark));
}

.lnv-menu__panel-side span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Bandeau bas "catalogue PDF" (panneau Catalogue uniquement) : pleine
   largeur du panneau, bandeau vertical compris, d'où le grid-column qui
   traverse les deux pistes. Fond marine (charte du bandeau haut du site)
   + bouton rouge accent. !important sur les couleurs : c'est un <a>, on
   neutralise les styles de liens du thème comme partout ailleurs. */
.lnv-menu__panel-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 36px;
  background: linear-gradient(90deg, #14203f, #23345e);
  color: #fff !important;
  text-decoration: none !important;
}

.lnv-menu__panel-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.lnv-menu__panel-banner-icon .material-icons {
  font-size: 22px;
  color: #fff;
}

.lnv-menu__panel-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lnv-menu__panel-banner-text strong {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}

.lnv-menu__panel-banner-text span {
  font-size: 12px;
  color: #b9c2d6;
}

.lnv-menu__panel-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--lnv-menu-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.lnv-menu__panel-banner-cta .material-icons {
  font-size: 17px;
}

.lnv-menu__panel-banner:hover .lnv-menu__panel-banner-cta {
  background: var(--lnv-menu-accent-dark);
}

/* Groupes (titre + sous-liste) en colonnes fluides façon presse :
   chaque groupe est un bloc insécable qui remplit les colonnes dans
   l'ordre, plusieurs petits groupes pouvant partager une même colonne. */
.lnv-menu__groups {
  /* min-width:0 pour que la piste `1fr` puisse vraiment imposer sa
     largeur au lieu que le contenu (multi-colonnes) ne pousse la piste
     à sa propre taille intrinsèque. */
  min-width: 0;
  width: 100%;
  /* column-count pur (pas de largeur mini associée) : le nombre de
     colonnes reste fixe à --lnv-menu-columns quel que soit le contenu,
     et les colonnes sont alors strictement égales en largeur avec un
     column-gap uniforme entre chacune (c'est inhérent à la spec). Les
     paliers responsive ci-dessous ajustent --lnv-menu-columns pour
     éviter les colonnes trop étroites sur les écrans plus petits. */
  columns: var(--lnv-menu-columns);
  /* column-gap creuse dans la largeur des colonnes (total figé par
     column-count) : un gap trop grand rogne la largeur de chaque colonne
     et fait plus wrapper le texte, ce qui donne une impression d'écart
     vertical involontaire. On reste raisonnable ici, et on ajoute plutôt
     un column-rule : un trait fin dessiné DANS le gap existant, qui
     sépare visuellement sans consommer de largeur en plus. */
  column-gap: 40px;
  column-rule: 1px solid var(--lnv-menu-border-soft);
  list-style: none;
  margin: 0;
  padding: 28px 36px 24px;
}

.lnv-menu__group {
  break-inside: avoid;
  margin-bottom: 22px;
}

/* Les très longs groupes (ex. "Maintenance technique" et ses ~17 entrées)
   figeaient la hauteur du panneau : en `column-fill: balance` (défaut du
   multi-colonnes), la hauteur d'équilibrage ne peut pas descendre sous le
   plus grand bloc insécable. Tout le contenu se tassait donc dans les
   premières colonnes à cette hauteur-là et les dernières restaient vides
   (grande zone blanche à droite du panneau). On autorise ces groupes-là
   (8 sous-entrées ou plus) à se poursuivre sur la colonne suivante ; les
   petits groupes restent insécables. Navigateurs sans :has() : on retombe
   simplement sur l'ancien comportement. */
.lnv-menu__group:has(li:nth-child(8)) {
  break-inside: auto;
}

/* Quand un groupe peut se couper : jamais juste après son titre (pas de
   titre orphelin en bas de colonne), et jamais au milieu d'une entrée.
   ATTENTION à ne PAS poser break-after: avoid sur TOUS les titres : dans
   les groupes sans sous-liste, le titre est le dernier enfant et son
   break-after se propage alors à la fin du groupe lui-même — tous les
   groupes se chaînent en "interdit de couper après moi" et le panneau
   entier s'effondre en une seule colonne géante. On ne cible donc que les
   titres des groupes effectivement sécables. */
.lnv-menu__group:has(li:nth-child(8)) .lnv-menu__group-title {
  break-after: avoid;
}

.lnv-menu__sublist li {
  break-inside: avoid;
}

/* Anti-orphelins : sans ça, la coupure d'un long groupe peut tomber juste
   avant sa fin et laisser 1 ou 2 entrées isolées en haut de la colonne
   suivante. En interdisant une coupure juste avant les 2 dernières
   entrées, un "retour" sur la colonne suivante compte au minimum
   3 entrées — sinon la coupure se fait plus tôt dans la liste. */
.lnv-menu__sublist li:nth-last-child(-n+2) {
  break-before: avoid;
}

/* Les familles qui ont des sous-sous-menus (Hygiène, Matériels
   d'application, Maintenance technique, Produits de saison…) démarrent en
   haut d'une colonne dédiée au lieu d'apparaître au milieu d'une colonne
   sous des titres simples : la structure se lit d'un coup d'œil, façon
   "une famille = une colonne". Chaque saut forcé consomme une colonne :
   on ne l'active qu'à partir de 6 colonnes (≥1200px), sinon sur les
   paliers à 4 colonnes on exigerait plus de colonnes qu'il n'en existe et
   le contenu déborderait horizontalement du panneau. */
@media (min-width: 1200px) {
  .lnv-menu__group:has(.lnv-menu__sublist) {
    break-before: column;
  }
}

/* :visited explicite : sans ça, un lien déjà cliqué (page produit ouverte
   pendant les tests) retombe sur la couleur de lien "visité" par défaut
   du navigateur/thème au lieu de notre couleur, ce qui fait ressortir un
   seul item en rouge/violet parmi les autres. Même remède qu'ailleurs :
   !important pour passer au-dessus. */
.lnv-menu__group-title,
.lnv-menu__group-title:visited {
  display: block;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--lnv-menu-text) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700!important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Survol en "pastille" : fond très clair + accent, plus lisible qu'un simple
   changement de couleur dans un panneau aussi dense. */
.lnv-menu__group-title:hover,
.lnv-menu__sublist a:hover {
  color: var(--lnv-menu-accent) !important;
  background: var(--lnv-menu-accent-soft);
}

.lnv-menu__sublist {
  list-style: none;
  /* margin-left: 10px pour que le filet vertical s'aligne sous le début du
     texte du titre (qui a un padding-left de 10px). */
  margin: 4px 0 0 10px;
  padding: 0;
}

.lnv-menu__sublist a,
.lnv-menu__sublist a:visited {
  display: block;
  padding: 3px 10px;
  border-radius: 0 6px 6px 0;
  color: var(--lnv-menu-muted) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  transition: color 0.15s ease, background-color 0.15s ease, padding-left 0.15s ease;
}

.lnv-menu__sublist a:hover {
  padding-left: 14px;
}

@media (min-width: 1600px) {
  .lnv-menu {
    --lnv-menu-columns: 7;
  }
}

/* ============================================================
   Nombre de colonnes PAR PANNEAU — le tableau de réglage.
   --lnv-menu-columns est une variable CSS héritée : la redéfinir sur un
   panneau (ancêtre plus proche de .lnv-menu__groups que .lnv-menu)
   suffit à ne changer que lui. Valeurs sur .lnv-menu = repli si un
   panneau n'a pas de réglage propre. Le mobile n'est pas concerné
   (columns: 1 !important dans le bloc ≤991px), et le palier ≤1200px
   plafonne tout le monde à 4 plus bas dans ce fichier.
   Catalogue plus étroit : 4 familles seulement, colonnes plus larges,
   moins de coupures dans les longues listes.
   ============================================================ */

/* Écrans 1200-1600px. Scopé en min-width : posées hors media query, ces
   variables par panneau écraseraient aussi le plafond "4 colonnes"
   du palier ≤1200px (la variable la plus proche gagne toujours). */
@media (min-width: 1200px) {
  .lnv-menu__panel--activite {
    --lnv-menu-columns: 6;
  }

  .lnv-menu__panel--gamme {
    --lnv-menu-columns: 6;
  }

  .lnv-menu__panel--catalogue {
    --lnv-menu-columns: 3;
  }
}

/* Grands écrans ≥1600px */
@media (min-width: 1600px) {
  .lnv-menu__panel--activite {
    --lnv-menu-columns: 6;
  }

  .lnv-menu__panel--gamme {
    --lnv-menu-columns: 6;
  }

  .lnv-menu__panel--catalogue {
    --lnv-menu-columns: 3;
  }
}

@media (max-width: 1200px) {
  .lnv-menu {
    --lnv-menu-columns: 4;
  }
}

/* ============================================================
   MOBILE (≤991px) — refonte calquée sur le menu de référence
   (ville-saintaffrique.fr, plugin Groovy Menu, mode
   "mobile-submenu-style-slider") : tiroir off-canvas de 300px
   glissant depuis la DROITE (transform + easing
   cubic-bezier(.7,0,.3,1) 400ms), voile sombre rgba(35,35,35,.7),
   burger animé "squeeze" (pincement en X), et sous-menus en
   DRILL-DOWN : chaque niveau est une couche qui glisse depuis la
   droite PAR-DESSUS la liste, avec une barre-titre colorée en haut
   qui sert de bouton retour (flèche gauche).
   Couleurs : notre charte (marine/rouge), pas celle du modèle.
   ============================================================ */
@media (max-width: 991px) {
  .lnv-menu {
    --lnv-menu-columns: 1;
  }

  /* --- Burger header, animation "squeeze" (lib hamburgers) : les barres
     extérieures glissent vers le centre en pivotant en X, la barre du
     milieu s'efface. Timings repris de la variante squeeze. --- */
  .lnv-menu__burger {
    display: flex;
  }

  .lnv-menu__burger-bar {
    transition: transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19),
      opacity 0.075s ease;
  }

  /* barres espacées de 8px centre à centre (3px + 5px de gap) */
  .lnv-menu__burger--active .lnv-menu__burger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    transition: transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
  }

  .lnv-menu__burger--active .lnv-menu__burger-bar:nth-child(2) {
    opacity: 0;
    transition: opacity 0.075s ease;
  }

  .lnv-menu__burger--active .lnv-menu__burger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    transition: transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
  }

  /* --- Voile sombre plein écran derrière le tiroir --- */
  .lnv-menu__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1990;
    background: rgba(35, 35, 35, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .lnv-menu--open .lnv-menu__overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }

  /* --- Tiroir off-canvas : 300px, colle au bord droit, hors champ via
     transform (translate3d comme le modèle, pour la compo GPU). --- */
  .lnv-menu__mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    height: 100%;
    width: min(300px, 85vw);
    z-index: 2000;
    background: #fff;
    /* Le tiroir ne scrolle pas lui-même : il sert de cadre (et de zone de
       clip) aux couches qui glissent — la liste racine et chaque panneau
       gèrent leur propre scroll. Overflow hidden = les couches en
       translateX(100%) attendent hors champ sans déborder. */
    overflow: hidden;
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    transition: transform cubic-bezier(0.7, 0, 0.3, 1) 0.4s,
      visibility 0s linear 0.4s;
    visibility: hidden;
  }

  .lnv-menu--open .lnv-menu__mobile-panel {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
  }

  /* --- En-tête du tiroir : titre + croix de fermeture --- */
  .lnv-menu__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lnv-menu-border-soft);
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
  }

  .lnv-menu__mobile-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--lnv-menu-text);
  }

  .lnv-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--lnv-menu-text);
  }

  .lnv-menu__close:hover {
    color: var(--lnv-menu-accent);
  }

  /* --- Liste de niveau 0 (la couche racine, elle scrolle) --- */
  .lnv-menu__list {
    flex: 1 1 auto !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .lnv-menu__item {
    flex: none !important;
    width: 100% !important;
    border-bottom: 1px dotted var(--lnv-menu-border);
  }

  .lnv-menu__trigger {
    /* height:100% n'a de sens qu'en desktop (rangée + align-items:stretch).
       Ici : rangée pleine largeur, texte à gauche, caret calé à droite. */
    height: auto !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 12px 50px 12px 16px !important;
  }

  /* Le soulignement animé centré est pensé pour la rangée d'onglets
     desktop, pas pour des rangées pleine largeur. */
  .lnv-menu__trigger::after {
    display: none;
  }

  /* Une ligne par entrée, comme le modèle : l'eyebrow desktop disparaît. */
  .lnv-menu__eyebrow {
    display: none !important;
  }

  /* Caret niveau 0 : zone de tap large collée à droite (50px comme le
     modèle), chevron pointé vers la droite — en mode slider il annonce
     "un panneau va glisser", pas de rotation à l'ouverture.
     Centrage par top:50% + translateY(-50%) : plus fiable que top/bottom
     étirés, qui laissaient l'icône collée en haut de la rangée. */
  .lnv-menu__chevron {
    position: absolute;
    right: 0;
    top: 50%;
    bottom: auto;
    width: 50px;
    display: block;
    text-align: center;
    transform: translateY(-50%) rotate(-90deg);
    color: var(--lnv-menu-muted) !important;
  }

  /* --- Panneau niveau 1 = couche "slider" : couvre tout le tiroir,
     attend hors champ à droite (translateX(100%), clippée par
     l'overflow hidden du tiroir) et glisse par-dessus la liste racine à
     l'ouverture — même transform/easing que le tiroir lui-même, comme
     sur le menu de référence. --- */
  .lnv-menu__panel {
    display: flex !important;
    flex-direction: column;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0;
    left: 0 !important;
    width: auto !important;
    z-index: 10;
    background: #fff;
    transform: translateX(100%) !important;
    transition: transform cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
    will-change: transform;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    animation: none !important;
  }

  .lnv-menu__item--open .lnv-menu__panel {
    transform: translateX(0) !important;
  }

  .lnv-menu__panel-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Barre-titre du panneau : équivalent du "dropdown-menu-title" coloré
     du modèle (hauteur 50px) — toute la barre est un bouton retour, avec
     la flèche gauche visible. */
  .lnv-menu__panel-side {
    width: 100% !important;
    flex: 0 0 50px;
    justify-content: flex-start !important;
    gap: 4px;
    padding: 0 12px 0 4px !important;
    cursor: pointer;
  }

  .lnv-menu__panel-side span {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    letter-spacing: 0.08em;
  }

  .lnv-menu__panel-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #fff;
  }

  /* La liste des familles scrolle sous la barre-titre. */
  .lnv-menu__groups {
    columns: auto !important;
    column-gap: normal !important;
    column-rule: none !important;
    padding: 0 !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .lnv-menu__group {
    margin-bottom: 0;
    border-bottom: 1px dotted var(--lnv-menu-border);
  }

  .lnv-menu__group:last-child {
    border-bottom: 0;
  }

  /* --- Familles (niveau 1) : rangée lien + caret séparé. Le lien
     navigue, le caret (zone 50px) fait glisser le sous-panneau. --- */
  .lnv-menu__group-row {
    display: flex;
    align-items: stretch;
  }

  .lnv-menu__group-title {
    flex: 1 1 auto;
    padding: 11px 8px 11px 16px;
    border-radius: 0;
    font-size: 13px;
  }

  /* Groupes sans enfants : le titre seul fait toute la rangée. */
  .lnv-menu__group > .lnv-menu__group-title {
    display: block;
  }

  .lnv-menu__group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--lnv-menu-muted);
  }

  .lnv-menu__group-toggle .material-icons {
    font-size: 20px;
  }

  /* --- Sous-panneau niveau 2 : même mécanique de couche glissante,
     par-dessus le panneau de niveau 1 (z-index supérieur). Ancré au
     panneau (position absolute, ancêtre positionné le plus proche) et
     clippé par son overflow hidden. --- */
  .lnv-menu__subpanel {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #fff;
    transform: translateX(100%);
    transition: transform cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
    will-change: transform;
  }

  .lnv-menu__group--open .lnv-menu__subpanel {
    transform: translateX(0);
  }

  /* Tête du sous-panneau : barre rouge retour, comme la barre-titre. */
  .lnv-menu__subpanel-head {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 50px;
    padding: 0 12px 0 4px;
    background: linear-gradient(180deg, var(--lnv-menu-side-bg), var(--lnv-menu-accent-dark));
    border: 0;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
  }

  .lnv-menu__subpanel-head .material-icons {
    width: 40px;
    text-align: center;
  }

  .lnv-menu__subpanel-head span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Sous-sous-catégories (niveau 2) : liste pleine largeur qui
     scrolle dans son sous-panneau. --- */
  .lnv-menu__sublist {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    margin: 0;
    padding: 4px 0;
    border-left: 0;
  }

  .lnv-menu__sublist li {
    border-bottom: 1px dotted var(--lnv-menu-border-soft);
  }

  .lnv-menu__sublist li:last-child {
    border-bottom: 0;
  }

  .lnv-menu__sublist a,
  .lnv-menu__sublist a:visited {
    padding: 9px 16px;
    border-radius: 0;
  }

  /* Bandeau PDF compacté : padding réduit et sous-titre masqué pour tenir
     sur une ligne dans le tiroir. */
  .lnv-menu__panel-banner {
    padding: 12px 16px;
  }

  .lnv-menu__panel-banner-text span {
    display: none;
  }

  /* --- Pied du tiroir : contact rapide. Sous la liste (qui garde le
     flex:1, donc le pied reste collé en bas quand la liste est courte).
     Recouvert par les panneaux glissants, comme le reste — il n'existe
     qu'au niveau racine. --- */
  .lnv-menu__mobile-footer {
    display: block;
    flex: 0 0 auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--lnv-menu-border-soft);
    background: #f8f9fb;
  }

  .lnv-menu__mobile-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    text-decoration: none !important;
  }

  .lnv-menu__mobile-phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lnv-menu-accent-soft);
    color: var(--lnv-menu-accent);
  }

  .lnv-menu__mobile-phone-icon .material-icons {
    font-size: 19px;
  }

  .lnv-menu__mobile-phone-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .lnv-menu__mobile-phone-txt span {
    font-size: 11px;
    color: var(--lnv-menu-muted);
  }

  .lnv-menu__mobile-phone-txt strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--lnv-menu-text) !important;
  }

  .lnv-menu__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .lnv-menu__mobile-btn,
  .lnv-menu__mobile-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    /* bouton secondaire : contour marine */
    border: 1px solid var(--lnv-menu-text);
    color: var(--lnv-menu-text) !important;
    background: transparent;
  }

  .lnv-menu__mobile-btn .material-icons {
    font-size: 17px;
  }

  .lnv-menu__mobile-btn--primary,
  .lnv-menu__mobile-btn--primary:visited {
    border-color: var(--lnv-menu-accent);
    background: var(--lnv-menu-accent);
    color: #fff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lnv-menu__panel {
    animation: none;
  }

  .lnv-menu * {
    transition: none !important;
  }
}
