/* Arssans Menu — front (phase 1)
   Couleurs pilotées par variables CSS (--am-*), surchargées par un bloc
   <style> inline généré depuis la config BO du module. Les valeurs ci-dessous
   sont les défauts (barre or de la marque + sous-menus clairs).
   La rangée est calée sur le .container du header (recherche → panier). */

.arssans-menu {
  --am-bar-bg: #ab8f00;          /* fond de la barre (or de la marque) */
  --am-bar-text: #fdf6ea;        /* texte de la barre (crème) */
  --am-bar-hover: #ffffff;       /* texte/accent au survol */
  --am-accent: #6f5c00;          /* filet bas + liseré déroulant (or foncé) */
  --am-drop-bg: #ffffff;         /* fond des sous-menus (clair) */
  --am-drop-text: #3f3a33;       /* texte des sous-menus */
  --am-drop-hover-bg: #f7f0d6;   /* survol item sous-menu */
  --am-drop-hover-tx: #ab8f00;   /* survol texte sous-menu */
  --am-sep: rgba(255, 255, 255, .25); /* séparateurs verticaux légers */

  /* Typo pilotée par la config BO (valeurs par défaut en repli). */
  --am-font: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --am-bar-size: 16px;
  --am-bar-weight: 700;
  --am-bar-transform: uppercase;

  width: 100%;
  background: var(--am-bar-bg);
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 2px solid var(--am-accent);
  font-family: var(--am-font);
  position: relative;
  z-index: 500;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow .2s ease;
}

/* Barre collante : passe en fixed (classe ajoutée par front.js dès que la
   barre atteint le haut de la fenêtre). Pas d'animation de glissement : la
   bascule se fait exactement à la position d'arrivée, donc sans à-coup. Le
   spacer .arssans-menu__spacer compense la hauteur libérée pour éviter tout
   saut du contenu. Seule l'ombre apparaît en fondu. */
.arssans-menu--stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* Éléments réservés au mobile : masqués en desktop. */
.arssans-menu__toggle,
.arssans-menu__drawer-head,
.arssans-menu__sub-toggle,
.arssans-menu__overlay {
  display: none;
}

/* ⚠️ Le thème force `#header a{color:#fff}` (sélecteur ID) → il écrase nos
   couleurs de liens (texte blanc invisible sur les panneaux clairs). On
   rétablit nos couleurs avec l'ID #arssans-menu pour reprendre la main. */
#arssans-menu .arssans-menu__link {
  color: var(--am-bar-text);
}
#arssans-menu .arssans-menu__item:hover > .arssans-menu__link,
#arssans-menu .arssans-menu__item:focus-within > .arssans-menu__link {
  color: var(--am-bar-hover);
}
#arssans-menu .arssans-menu__subitem > a {
  color: var(--am-drop-text);
}
#arssans-menu .arssans-menu__subitem > a:hover {
  color: var(--am-drop-hover-tx);
}
#arssans-menu .arssans-menu__mega-title,
#arssans-menu .arssans-menu__mega-col li a {
  color: #1a1a1a;
}
#arssans-menu .arssans-menu__mega-title:hover,
#arssans-menu .arssans-menu__mega-col li a:hover {
  color: var(--am-drop-hover-tx);
}

/* Largeur = celle du .container Bootstrap du header (recherche → panier).
   space-between : 1re entrée au bord gauche recherche, dernière au bord
   droit panier ; la typo respire dans toute la largeur. */
.arssans-menu__bar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  list-style: none;
}

/* Cellules de largeur égale : chaque section occupe la même part de la
   barre, le texte est centré entre ses séparateurs. */
.arssans-menu__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
}

/* Entrée Accueil : réduite à la largeur de son icône (pas de cellule pleine). */
.arssans-menu__item.is-home {
  flex: 0 0 auto;
}
.arssans-menu__home-icon {
  width: 25px;
  height: 25px;
  display: block;
  flex: 0 0 auto;
}
/* Icône centrée dans sa cellule (l'ID bat la règle is-first qui la collait à
   gauche), avec un peu d'air de chaque côté. */
@media (min-width: 768px) {
  #arssans-menu .arssans-menu__item.is-home > .arssans-menu__link {
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Libellé « Accueil » caché visuellement (gardé pour lecteurs d'écran / SEO) ;
   réaffiché en mobile (tiroir = liste de liens textuels). */
.arssans-menu__home-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Mobile (tiroir) : Accueil redevient « icône + Accueil » sur sa ligne. */
@media (max-width: 767px) {
  .arssans-menu__item.is-home { flex: none; }
  .arssans-menu__home-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: normal;
  }
  .arssans-menu__home-icon { margin-right: 10px; width: 20px; height: 20px; }
}

/* La barre suit exactement la largeur du .container du header (donc du bord
   gauche de la recherche au bord droit du panier) à chaque palier. */
@media (min-width: 768px)  { .arssans-menu__bar { max-width: 720px; } }
@media (min-width: 992px)  { .arssans-menu__bar { max-width: 960px; } }
@media (min-width: 1200px) { .arssans-menu__bar { max-width: 1140px; } }

/* Séparateurs verticaux légers entre les entrées de la barre */
.arssans-menu__item + .arssans-menu__item {
  border-left: 1px solid var(--am-sep);
}

/* 1re entrée collée au bord gauche (recherche), dernière collée au bord droit
   (panier) ; les entrées du milieu restent centrées entre leurs séparateurs.
   Desktop seulement (en mobile les entrées sont empilées dans le tiroir). */
@media (min-width: 768px) {
  .arssans-menu__bar > .arssans-menu__item.is-first > .arssans-menu__link {
    justify-content: flex-start;
    padding-left: 0;
  }
  .arssans-menu__bar > .arssans-menu__item.is-last > .arssans-menu__link {
    justify-content: flex-end;
    padding-right: 0;
  }
}

.arssans-menu__link {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  color: var(--am-bar-text);
  font-size: var(--am-bar-size, 16px);
  font-weight: var(--am-bar-weight, 700);
  text-transform: var(--am-bar-transform, uppercase);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.arssans-menu__item:hover > .arssans-menu__link,
.arssans-menu__item:focus-within > .arssans-menu__link {
  color: var(--am-bar-hover);
  border-bottom-color: var(--am-bar-hover);
}

.arssans-menu__caret {
  font-size: 18px;
  line-height: 1;
  opacity: .7;
}

/* Déroulant */
.arssans-menu__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--am-drop-bg);
  border: 1px solid #e7ddc9;
  border-top: 3px solid var(--am-accent);
  box-shadow: 0 12px 28px rgba(28, 26, 23, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1000;
}

.arssans-menu__item:hover > .arssans-menu__dropdown,
.arssans-menu__item:focus-within > .arssans-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.arssans-menu__subitem > a {
  display: block;
  padding: 9px 20px;
  color: var(--am-drop-text);
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.arssans-menu__subitem > a:hover {
  background: var(--am-drop-hover-bg);
  color: var(--am-drop-hover-tx);
  padding-left: 26px;
}

/* ====================================================================
   MÉGA-PANNEAU (catégories is_mega) — pleine largeur sous la barre.
   L'item is-mega passe en position:static : le panneau s'ancre alors sur
   .arssans-menu (position:relative) et couvre toute la largeur.
   ==================================================================== */
.arssans-menu__item.is-mega {
  position: static;
}

/* Calque pleine largeur (transparent) : sert de zone de survol sous la barre.
   La boîte visible est l'inner, plus étroite et centrée. */
.arssans-menu__mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1000;
}
.arssans-menu__item.is-mega:hover > .arssans-menu__mega,
.arssans-menu__item.is-mega:focus-within > .arssans-menu__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Largeur du panneau = celle de la barre (du bord gauche de la recherche au
   bord droit du panier) : même max-width et même retrait de 15px que la barre,
   donc les colonnes s'alignent sous les entrées. */
.arssans-menu__mega-inner {
  display: grid;
  grid-template-columns: 1fr;     /* full / aside-only : une seule zone */
  align-items: start;             /* la latérale se cale en HAUT (fini l'étirement) */
  gap: 30px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 15px 28px;
  background: var(--am-drop-bg);
  border-top: 3px solid var(--am-accent);
  box-shadow: 0 14px 28px rgba(28, 26, 23, .16);
}
/* Ratios pilotés par le type de la latérale. */
.arssans-menu__mega-inner--third { grid-template-columns: 2fr 1fr; } /* produits / texte */
.arssans-menu__mega-inner--half  { grid-template-columns: 1fr 1fr; } /* image */
/* Suit le conteneur du header aux mêmes paliers que la barre. */
@media (min-width: 768px)  { .arssans-menu__mega-inner { max-width: 720px; } }
@media (min-width: 992px)  { .arssans-menu__mega-inner { max-width: 960px; } }
@media (min-width: 1200px) { .arssans-menu__mega-inner { max-width: 1140px; } }
.arssans-menu__mega-main { min-width: 0; }
.arssans-menu__mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 20px 30px;
}
.arssans-menu__mega-col {
  min-width: 0;
}
.arssans-menu__mega-title {
  display: block;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ece6d6;
  color: var(--am-drop-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
}
.arssans-menu__mega-title:hover {
  color: var(--am-drop-hover-tx);
}
.arssans-menu__mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.arssans-menu__mega-col li a {
  display: block;
  padding: 4px 0;
  color: var(--am-drop-text);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
}
.arssans-menu__mega-col li a:hover {
  color: var(--am-drop-hover-tx);
  padding-left: 5px;
}

/* CTA superposé en bas d'une image fixe (bannière). */
.arssans-menu__mega-cta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 14px;
  background: var(--am-bar-bg);
  color: var(--am-bar-text);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ====================================================================
   ZONE LATÉRALE « MISE EN AVANT » — produits / image (fixe ou slider) / texte.
   Carte calée en haut (align-items:start de l'inner). Couleurs surchargeables
   par bloc via --blk-* (repli sur le thème --am-*).
   ==================================================================== */
.arssans-menu__aside {
  min-width: 0;
  color: var(--blk-text, var(--am-drop-text));
}
/* Produits / texte = carte colorée (fond + padding si une couleur est définie). */
.arssans-menu__aside--products,
.arssans-menu__aside--text {
  padding: 16px 18px;
  background: var(--blk-bg, var(--am-drop-bg, #faf6ec));
  border: 1px solid #ece6d6;
  border-radius: 4px;
}

.arssans-menu__block-title {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--blk-accent, var(--am-accent));
  color: var(--blk-text, var(--am-drop-text));
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.arssans-menu__block-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--blk-text, var(--am-drop-text));
}
#arssans-menu .arssans-menu__block-text a { color: var(--blk-accent, var(--am-drop-hover-tx)); }
.arssans-menu__block-text img { max-width: 100%; height: auto; }

/* Image fixe (bannière) */
.arssans-menu__block-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
}
.arssans-menu__block-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Slider d'images (>1 image) */
.arssans-menu__slider {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.arssans-menu__slides {
  display: flex;
  transition: transform .4s ease;
}
.arssans-menu__slide {
  position: relative;
  flex: 0 0 100%;
  display: block;
  text-decoration: none;
}
.arssans-menu__slide img {
  display: block;
  width: 100%;
  height: auto;
}
.arssans-menu__slide-legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(28, 26, 23, .72));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.arssans-menu__slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #1c1a17;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.arssans-menu__slider:hover .arssans-menu__slider-nav { opacity: 1; }
.arssans-menu__slider-prev { left: 8px; }
.arssans-menu__slider-next { right: 8px; }
.arssans-menu__slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.arssans-menu__slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.arssans-menu__slider-dots button.is-active { background: #fff; }

/* Liste de produits en avant : 3 max, EMPILÉS verticalement. */
.arssans-menu__products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.arssans-menu__product {
  display: flex;
  gap: 12px;
  align-items: center;
}
.arssans-menu__product-thumb {
  position: relative;
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  display: block;
  border: 1px solid #ece6d6;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.arssans-menu__product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;  /* visuels portrait : pas de rognage */
}
.arssans-menu__product-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Préfixe #arssans-menu : sinon le thème classic (#header a{color:#fff}, ID)
   écrase la couleur du titre — lien <a> — qui devient blanc sur blanc. */
#arssans-menu .arssans-menu__product-name {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--blk-text, var(--am-drop-text));
  text-decoration: none;
}
#arssans-menu .arssans-menu__product-name:hover { color: var(--blk-accent, var(--am-drop-hover-tx)); }
.arssans-menu__product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--blk-text, var(--am-drop-text));
}
.arssans-menu__product-price del {
  font-weight: 400;
  opacity: .6;
  margin-right: 4px;
}
#arssans-menu .arssans-menu__product-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 14px;
  background: var(--blk-accent, var(--am-bar-bg));
  color: var(--am-bar-text, #fff);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 2px;
  text-decoration: none;
}
.arssans-menu__product-cta:hover { filter: brightness(1.08); }
.arssans-menu__product-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  background: var(--blk-accent, var(--am-accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 2px;
}
/* Lien de pied optionnel (« Voir toutes les promos ») */
#arssans-menu .arssans-menu__products-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 14px;
  background: var(--blk-accent, var(--am-bar-bg));
  color: var(--am-bar-text);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  border-radius: 2px;
}

/* Tablette : on resserre pour garder une seule ligne (le réglage BO de
   taille s'applique au-delà de 1024px). */
@media (min-width: 768px) and (max-width: 1024px) {
  .arssans-menu__link { padding: 12px 8px; font-size: 14px; letter-spacing: 0; }
}

/* ====================================================================
   MOBILE (< 768px) — bouton hamburger + tiroir off-canvas + accordéon.
   ==================================================================== */
@media (max-width: 767px) {

  /* La barre devient une fine barre d'app avec le hamburger ; les entrées
     partent dans le tiroir off-canvas. */
  .arssans-menu {
    --am-bar-size: 15px;
  }

  /* Verrou de défilement du contenu quand le tiroir est ouvert. */
  body.arssans-menu-open {
    overflow: hidden;
  }

  /* Bouton hamburger */
  .arssans-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    color: var(--am-bar-text);
    font: inherit;
    font-size: var(--am-bar-size);
    font-weight: var(--am-bar-weight, 700);
    text-transform: var(--am-bar-transform, uppercase);
    letter-spacing: .04em;
    cursor: pointer;
  }
  .arssans-menu__burger,
  .arssans-menu__burger::before,
  .arssans-menu__burger::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .arssans-menu__burger {
    position: relative;
  }
  .arssans-menu__burger::before { position: absolute; top: -7px; left: 0; }
  .arssans-menu__burger::after  { position: absolute; top: 7px;  left: 0; }

  /* Overlay */
  .arssans-menu__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    z-index: 1039;
  }
  .arssans-menu.is-open .arssans-menu__overlay {
    opacity: 1;
    visibility: visible;
  }

  /* Le <ul> devient le panneau off-canvas (glisse depuis la gauche). */
  .arssans-menu__bar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start; /* sinon hérite de space-between → entrées étalées sur toute la hauteur */
    align-items: stretch;
    width: 84%;
    max-width: 340px;
    max-height: none;
    margin: 0;
    padding: 0;
    background: var(--am-drop-bg);
    box-shadow: 2px 0 24px rgba(0, 0, 0, .25);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1040;
  }
  .arssans-menu.is-open .arssans-menu__bar {
    transform: translateX(0);
  }

  /* En-tête du tiroir (titre + croix) */
  .arssans-menu__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--am-bar-bg);
    color: var(--am-bar-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .arssans-menu__close {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
  }

  /* Entrées en pleine largeur, empilées. */
  .arssans-menu__item {
    display: block;
    flex: none;
    border-left: 0;
    border-bottom: 1px solid #ece6d6;
  }
  .arssans-menu__link {
    justify-content: flex-start;
    padding: 12px 16px;
    color: var(--am-drop-text);
    border-bottom: 0;
  }
  .arssans-menu__item:first-child > .arssans-menu__link,
  .arssans-menu__item:last-child > .arssans-menu__link {
    padding: 12px 16px;
  }
  .arssans-menu__item:hover > .arssans-menu__link,
  .arssans-menu__item:focus-within > .arssans-menu__link {
    border-bottom-color: transparent;
  }
  /* Couleur du texte des entrées dans le tiroir (sombre). Spécificité ID
     obligatoire : la règle desktop #arssans-menu .arssans-menu__link force
     sinon le texte crème (invisible sur fond blanc), + le thème #header a. */
  #arssans-menu .arssans-menu__link {
    color: var(--am-drop-text);
  }
  #arssans-menu .arssans-menu__item:hover > .arssans-menu__link,
  #arssans-menu .arssans-menu__item:focus-within > .arssans-menu__link {
    color: var(--am-drop-hover-tx);
  }
  /* Le caret desktop est inutile dans le tiroir (bouton dédié à la place). */
  .arssans-menu__caret { display: none; }

  /* Bouton d'accordéon, à droite de l'entrée. */
  .arssans-menu__item.has-children {
    position: relative;
    padding-right: 52px;
  }
  .arssans-menu__sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52px;
    background: transparent;
    border: 0;
    border-left: 1px solid #ece6d6;
    color: var(--am-drop-text);
    cursor: pointer;
  }
  .arssans-menu__sub-toggle .material-icons {
    transition: transform .2s ease;
  }
  .arssans-menu__item.is-expanded > .arssans-menu__sub-toggle .material-icons {
    transform: rotate(180deg);
  }

  /* Sous-menu : accordéon (replié par défaut, déplié si .is-expanded). */
  .arssans-menu__dropdown {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #faf6ec;
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  .arssans-menu__item.is-expanded > .arssans-menu__dropdown {
    max-height: 1000px;
  }
  .arssans-menu__subitem > a {
    padding: 11px 16px 11px 28px;
  }

  /* Méga-panneau en mobile : accordéon empilé, visuel masqué. */
  .arssans-menu__item.is-mega {
    position: relative;
  }
  .arssans-menu__mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: #faf6ec;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .arssans-menu__item.is-expanded > .arssans-menu__mega {
    max-height: 2000px;
  }
  .arssans-menu__mega-inner {
    display: block;
    max-width: none;
    margin: 0;
    padding: 4px 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .arssans-menu__mega-cols {
    display: block;
    gap: 0;
  }
  .arssans-menu__mega-col {
    min-width: 0;
  }
  .arssans-menu__mega-title {
    margin: 0;
    padding: 10px 16px 6px;
    border: 0;
  }
  .arssans-menu__mega-col li a {
    padding: 8px 16px 8px 28px;
    font-size: .92rem;
  }
  .arssans-menu__mega-visual {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 *  A11y : repli forcé d'un panneau desktop via la touche Échap.
 *  La classe .is-collapsed (posée par front.js) doit l'emporter sur la
 *  révélation :focus-within (le focus reste sur le lien parent). Préfixe
 *  #arssans-menu → spécificité (id) supérieure aux règles de reveal.
 * ------------------------------------------------------------------ */
#arssans-menu .arssans-menu__item.is-collapsed > .arssans-menu__dropdown,
#arssans-menu .arssans-menu__item.is-collapsed > .arssans-menu__mega {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}