/* ============================================================
   LAFONDA — En-tête principal (refonte)
   Variation : « Logo à gauche · catégories au centre »
   Chargé par : components/layouts/header/index.blade.php
   ============================================================ */

:root {
  --lf-ink:       #323e4f;   /* bleu ardoise — texte principal     */
  --lf-cream:     #FBF8F3;   /* crème / papier blanc               */
  --lf-gold:      #E8C77A;   /* doré clair — accent top bar        */
  --lf-gold-deep: #B58B3A;   /* doré profond — survol / chevrons   */
  --lf-line:      #E4DCD0;   /* bordures fines                     */
  --lf-cocoa:     #3D2418;   /* carte feature                      */
  --lf-muted:     #6E6157;   /* gris-brun — liens de sous-menu     */
  --lf-badge:     #1A1A1A;   /* badge panier                       */
  --lf-serif:     'Cormorant Garamond', 'Times New Roman', serif;
  --lf-sans:      'Inter', 'Helvetica Neue', Arial, sans-serif;
  --lf-gutter:    clamp(20px, 4vw, 56px);
}

/* ---- Réinitialisations limitées au header --------------------------- */
.lf-header,
.lf-header * { box-sizing: border-box; }
.lf-header { font-family: var(--lf-sans); }
.lf-header ul { list-style: none; margin: 0; padding: 0; }
.lf-header a { text-decoration: none; color: inherit; }
.lf-header button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* ============================================================
   1. STRUCTURE GÉNÉRALE
   ------------------------------------------------------------
   En-tête fixe : conserve le décalage haut déjà prévu par les
   gabarits de page (l'ancien en-tête était lui aussi fixe).
   ============================================================ */
.lf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  width: 100%;
  background: #fff;
}

/* ============================================================
   2. BARRE UTILITAIRE (top bar)
   ============================================================ */
.lf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 38px;
  padding: 0 var(--lf-gutter);
  background: var(--lf-ink);
  color: var(--lf-cream);
}

.lf-topbar__side { display: flex; align-items: center; gap: 18px; min-width: 0; }
.lf-topbar__side--right { gap: 22px; }
.lf-topbar__side--marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}
.lf-topbar__side--marquee .lf-marquee { --lf-marquee-row: 38px; }

.lf-topbar-text {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Pill « FR · LIVRAISON 24H » */
.lf-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(232, 199, 122, 0.45);
  color: var(--lf-gold);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lf-pill__dot { color: rgba(232, 199, 122, 0.6); }

/* ===========================================================
   Marquee — bandeau défilant vertical (bas → haut)
   Messages configurables dans Admin > Configuration > Général >
   Contenu > « Header Marquee ». Une ligne = un message qui
   prend toute la hauteur de la bande puis remonte.
   =========================================================== */
.lf-marquee {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;            /* occupe la pleine hauteur de la topbar (38px / 32px mobile) */
  min-width: 0;
  /* Mask vertical : fondu haut/bas pour adoucir l'entrée/sortie */
  mask-image: linear-gradient(180deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
}
.lf-marquee__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  /* Animation CSS pure pilotée par 2 custom properties injectées dans
     `style=""` depuis header/index.blade.php :
       --lf-marquee-count : nombre de messages uniques (>= 1)
       --lf-marquee-pause : durée d'affichage par message (en secondes)
     La durée totale = count * pause. À chaque tour le track translate
     d'une « copie » entière vers le haut (calc(-1 * count * row)) ;
     comme on duplique le groupe de messages dans le markup, le moment
     du « saut de boucle » coïncide visuellement avec le 1er message
     du 2e groupe (identique) → bouclage invisible.
     `linear` produit un défilement fluide continu — chaque message
     met `pause` secondes à traverser la zone visible. Pour un effet
     « pause puis transition », il faudrait reconstruire un keyframe
     dynamique avec N paliers, ce qui est exactement ce que faisait
     l'ancien JS — moins fiable (timing CSS/JS, tracks display:none). */
  /* L'animation est posée en inline sur chaque .lf-marquee__track par
     le PHP (header/index.blade.php) — `animation: <id> <duration>s
     ease-in-out infinite`. Les paliers du @keyframes sont calculés
     côté PHP en fonction du nombre de messages et de la durée
     d'affichage configurée en BO. */
}
.lf-marquee__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.lf-marquee__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 var(--lf-marquee-row, 38px);
  height: var(--lf-marquee-row, 38px);
  min-height: var(--lf-marquee-row, 38px);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lf-cream);
  white-space: nowrap;
  text-align: left;
  padding: 0 0 0 4px;
}
/* En mode vertical, les séparateurs textuels du markup n'ont plus de sens
   (chaque message a sa propre rangée). On les neutralise visuellement. */
.lf-marquee__sep {
  display: none;
}
/* Fallback keyframe : utilisé seulement si le PHP n'a pas pu injecter
   le keyframe dynamique (édge case : pas de messages, JS désactivé…).
   Défilement linéaire simple, sans paliers. */
@keyframes lf-marquee-fallback {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--lf-marquee-row, 38px) * var(--lf-marquee-count, 1)), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lf-marquee__track {
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}

/* Liens utilitaires */
.lf-utility-link {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lf-cream);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.lf-utility-link:hover { color: var(--lf-gold); }
.lf-utility-link--accent { color: var(--lf-gold); }
.lf-utility-link--accent:hover { color: #fff; }

.lf-topbar__sep {
  width: 1px;
  height: 13px;
  background: rgba(251, 248, 243, 0.22);
}

/* ============================================================
   3. BARRE PRINCIPALE (main bar)
   ============================================================ */
.lf-mainbar {
  position: relative;            /* ancre les méga-menus pleine largeur */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 108px;
  padding: 0 var(--lf-gutter);
  background: #fff;
  border-bottom: 1px solid var(--lf-line);
}

/* --- Logo --- */
.lf-logo { justify-self: start; display: inline-flex; }
.lf-logo img { height: 48px; width: auto; display: block; }

/* --- Navigation centrale --- */
.lf-nav {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.lf-nav__item {
  position: relative;           /* ancrage du sous-menu déroulant */
  display: flex;
  align-items: center;
  align-self: stretch;          /* colonne pleine hauteur → survol fiable */
}
.lf-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lf-ink);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.lf-nav__link:hover,
.lf-nav__item:hover .lf-nav__link,
.lf-nav__item:focus-within .lf-nav__link { color: var(--lf-gold-deep); }

.lf-chevron {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform 0.25s ease;
}
.lf-nav__item:hover .lf-chevron,
.lf-nav__item:focus-within .lf-chevron { transform: rotate(180deg); }

/* --- Groupe d'icônes (droite) --- */
.lf-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 22px;
  border-left: 1px solid var(--lf-line);   /* séparateur vertical fin */
}
.lf-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lf-ink);
  transition: color 0.2s ease, transform 0.2s ease;
}
.lf-icon-btn:hover { color: var(--lf-gold-deep); transform: translateY(-1px); }
.lf-icon-btn svg { display: block; }

/* Badge panier — pastille noire, liseré blanc */
.lf-cart-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--lf-badge);
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 999px;
  font-family: var(--lf-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.lf-cart-badge.is-visible { display: inline-flex; }

/* ============================================================
   4. SOUS-MENU (liste déroulante simple, survol catégorie)
   ============================================================ */
.lf-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 232px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--lf-cream);
  border-top: 2px solid var(--lf-gold-deep);
  box-shadow: 0 18px 30px -18px rgba(50, 62, 79, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 20;
}
.lf-nav__item:hover .lf-submenu,
.lf-nav__item:focus-within .lf-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.lf-submenu__link {
  display: block;
  padding: 9px 22px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lf-ink);
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.lf-submenu__link:hover {
  background: rgba(50, 62, 79, 0.05);
  color: var(--lf-gold-deep);
}

/* ============================================================
   5. RECHERCHE (overlay partagé desktop / mobile)
   ============================================================ */
.lf-search {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--lf-line);
  box-shadow: 0 18px 30px -22px rgba(50, 62, 79, 0.4);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 100002;
}
.lf-search.is-open { transform: translateY(0); }
.lf-search__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px var(--lf-gutter);
}
.lf-search__field {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--lf-ink);
  background: none;
  padding: 10px 4px;
  font-family: var(--lf-serif);
  font-size: 22px;
  color: var(--lf-ink);
}
.lf-search__field:focus { outline: none; border-color: var(--lf-gold-deep); }
.lf-search__field::placeholder { color: #b9b1a6; }
.lf-search__submit,
.lf-search__close { color: var(--lf-ink); display: inline-flex; }
.lf-search__submit:hover,
.lf-search__close:hover { color: var(--lf-gold-deep); }

/* ============================================================
   6. EN-TÊTE MOBILE
   ============================================================ */
.lf-mobile { display: none; }

.lf-mobile__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  background: var(--lf-ink);
  color: var(--lf-cream);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.lf-mobile__strip b { color: var(--lf-gold); font-weight: 600; }

/* Quand la strip mobile contient le marquee vertical, force la hauteur
   de rangée à 32px (= hauteur de la strip mobile). */
.lf-mobile__strip--marquee {
  padding: 0;
  display: block;
}
.lf-mobile__strip--marquee .lf-marquee {
  height: 32px;
  --lf-marquee-row: 32px;
}
.lf-mobile__strip--marquee .lf-marquee__item {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  height: 32px;
}

.lf-mobile__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 66px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--lf-line);
}
.lf-mobile__burger { justify-self: start; color: var(--lf-ink); display: inline-flex; }
.lf-mobile__logo { justify-self: center; display: inline-flex; }
.lf-mobile__logo img { height: 36px; width: auto; display: block; }
.lf-mobile__actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.lf-mobile__actions .lf-icon-btn { color: var(--lf-ink); }

/* Drawer */
.lf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(50, 62, 79, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 100000;
}
.lf-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }

.lf-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 86vw;
  max-width: 366px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100001;
  overflow-y: auto;
}
.lf-drawer.is-open { transform: translateX(0); }

.lf-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--lf-line);
}
.lf-drawer__head img { height: 34px; width: auto; }
.lf-drawer__close { color: var(--lf-ink); display: inline-flex; }

.lf-drawer__section { padding: 10px 0; }
.lf-drawer__section + .lf-drawer__section { border-top: 1px solid var(--lf-line); }

/* Accordéon catégories */
.lf-acc { border-bottom: 1px solid var(--lf-line); }
.lf-acc:last-child { border-bottom: 0; }
.lf-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lf-ink);
}
.lf-acc > summary::-webkit-details-marker { display: none; }
.lf-acc > summary .lf-chevron { transition: transform 0.25s ease; }
.lf-acc[open] > summary .lf-chevron { transform: rotate(180deg); }
.lf-acc__plain {
  display: block;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lf-ink);
  border-bottom: 1px solid var(--lf-line);
}
.lf-acc__plain:last-child { border-bottom: 0; }

/* Sous-catégories du drawer : 2 colonnes (cf. brief < 1100px) */
.lf-acc__panel {
  padding: 4px 20px 18px;
  background: var(--lf-cream);
}
.lf-acc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.lf-acc__group-title {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-family: var(--lf-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--lf-ink);
}
.lf-acc__group-title:first-child { margin-top: 4px; }
.lf-acc__link {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lf-muted);
  padding: 3px 0;
}
.lf-acc__link:hover { color: var(--lf-gold-deep); }

/* Liens utilitaires dans le drawer */
.lf-drawer__link {
  display: block;
  padding: 11px 20px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lf-ink);
}
.lf-drawer__link:hover { color: var(--lf-gold-deep); }
.lf-drawer__link--accent { color: var(--lf-gold-deep); }

.lf-drawer__cta {
  margin: 14px 20px 22px;
  display: block;
  padding: 13px;
  text-align: center;
  background: var(--lf-ink);
  color: var(--lf-cream);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lf-drawer__cta:hover { background: var(--lf-gold-deep); }

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
/* Bascule desktop / mobile à 1100px (cf. brief) */
@media (max-width: 1099px) {
  .lf-desktop { display: none; }
  .lf-mobile  { display: block; }
}

/* Méga-menu : 2 colonnes + carte feature masquée sur écrans intermédiaires */
@media (max-width: 1280px) and (min-width: 1100px) {
  .lf-mega__inner { grid-template-columns: 1fr 1fr; }
  .lf-feature { display: none; }
}

/* Resserrement de la nav sur desktop étroit (noms de catégories longs) */
@media (max-width: 1440px) and (min-width: 1100px) {
  .lf-nav { gap: 13px; }
  .lf-nav__link { letter-spacing: 0.14em; }
  .lf-mainbar { gap: 16px; }
}

/* Lien « voir toute la catégorie » dans le drawer */
.lf-acc__all {
  display: block;
  margin-top: 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lf-gold-deep);
}

/* Verrou de défilement quand drawer / recherche ouverts */
body.lf-no-scroll { overflow: hidden; }

/* ============================================================
   10. RECHERCHE — animation icône + résultats en direct
   ============================================================ */

/* --- Animation de la loupe à l'ouverture de l'overlay --- */
.lf-search__submit svg {
  transform-origin: 52% 46%;
  transition: color 0.2s ease;
}
@keyframes lf-magnifier-in {
  0%   { transform: scale(0.3) rotate(-35deg); opacity: 0; }
  55%  { transform: scale(1.18) rotate(10deg); opacity: 1; }
  72%  { transform: scale(0.92) rotate(-6deg); }
  86%  { transform: scale(1.04) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.lf-search.is-open .lf-search__submit svg {
  animation: lf-magnifier-in 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}

/* --- Pulsation pendant le chargement des résultats --- */
@keyframes lf-magnifier-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}
.lf-search.is-searching .lf-search__submit svg {
  animation: lf-magnifier-pulse 0.7s ease-in-out infinite;
  color: var(--lf-gold-deep);
}

/* --- Panneau de résultats : grille horizontale (6 par ligne) --- */
.lf-search__results {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px var(--lf-gutter) 16px;
  max-height: min(72vh, 600px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.lf-search__results[hidden] { display: none; }

/* Carte produit verticale */
.lf-search__result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--lf-ink);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.lf-search__result:hover,
.lf-search__result:focus-visible {
  background: #f6f3ee;
  transform: translateY(-2px);
  outline: none;
}
.lf-search__result-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #f0ece4;
}
.lf-search__result-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lf-search__result-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lf-search__result-price {
  font-size: 13px;
  font-weight: 700;
  color: #323e4f;
}

/* Colonnes responsives */
@media (max-width: 1120px) { .lf-search__results { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .lf-search__results { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .lf-search__results { grid-template-columns: repeat(2, 1fr); } }

/* --- Messages (vide / erreur) + lien « tout voir » : pleine largeur --- */
.lf-search__msg {
  grid-column: 1 / -1;
  padding: 14px var(--lf-gutter) 20px;
  font-size: 14px;
  color: #8a8378;
  text-align: center;
}
.lf-search__all {
  grid-column: 1 / -1;
  padding: 14px var(--lf-gutter) 4px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lf-gold-deep);
  text-decoration: none;
  border-top: 1px solid var(--lf-line);
}
.lf-search__all:hover { color: var(--lf-ink); }

/* --- Squelette de chargement (cartes) --- */
.lf-search__skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
.lf-search__skeleton .sk {
  background: linear-gradient(90deg, #efeae2 25%, #f7f4ef 50%, #efeae2 75%);
  background-size: 200% 100%;
  animation: lf-sk 1.1s ease-in-out infinite;
  border-radius: 8px;
}
.lf-search__skeleton .sk-img { width: 100%; aspect-ratio: 1 / 1; }
.lf-search__skeleton .sk-line { height: 11px; }
.lf-search__skeleton .sk-line.w1 { width: 90%; }
.lf-search__skeleton .sk-line.w2 { width: 50%; }
@keyframes lf-sk {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Accessibilité : respect du « mouvement réduit » --- */
@media (prefers-reduced-motion: reduce) {
  .lf-search.is-open .lf-search__submit svg,
  .lf-search.is-searching .lf-search__submit svg,
  .lf-search__skeleton .sk { animation: none; }
}

/* ============================================================
   11. DRAWER MOBILE — navigation « drill-down » (style iOS)
   ============================================================ */

/* Zone qui contient les panneaux empilés horizontalement.
   Le drawer est déjà flex-column ; le drill prend tout l'espace
   restant et clippe le débordement latéral. */
.lf-drawer__drill {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
}

.lf-drill-panel {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 6px 0 12px;
}
.lf-drill-panel.is-active { transform: translateX(0); }
.lf-drill-panel.is-past   { transform: translateX(-100%); }

/* Désactive les transitions le temps d'un reset à l'ouverture */
.lf-drawer__drill.lf-drill-no-transition .lf-drill-panel {
  transition: none !important;
}

/* Une ligne de menu (catégorie / sous-catégorie / lien) */
.lf-drill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--lf-line);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.lf-drill-row:last-child { border-bottom: 0; }
.lf-drill-row:hover,
.lf-drill-row:focus-visible {
  background: #f9f6f1;
  outline: none;
}
.lf-drill-row > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-drill-row .lf-chevron--right { color: #b4ad9f; flex-shrink: 0; }

/* Lignes « légères » (sous-catégories feuilles) en casse normale */
.lf-drill-panel:not(#lfDrillRoot) .lf-drill-row {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Lien « Voir toute la catégorie » en bas de panneau */
.lf-drill-row--all {
  margin-top: 6px;
  color: var(--lf-gold-deep);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}
.lf-drill-row--all:hover { color: var(--lf-ink); }

/* Bouton de retour « ← Nom du parent » */
.lf-drill-back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: #faf7f1;
  border: 0;
  border-bottom: 1px solid var(--lf-line);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6c655a;
  text-align: left;
  cursor: pointer;
}
.lf-drill-back:hover { color: var(--lf-ink); }
.lf-drill-back .lf-chevron--left { color: inherit; }

/* Accessibilité : respect du « mouvement réduit » */
@media (prefers-reduced-motion: reduce) {
  .lf-drill-panel { transition: none; }
}