/* =========================================================================
   Méga-menus — variantes compactes (essai privé, voir inc/mega-variantes.php).
   Aucune modification du HTML : on ne fait que réhabiller le panneau existant.
   ========================================================================= */

/* Réglages communs aux trois variantes : le panneau respire moins. */
.esp-megav .esp-mega { padding: 18px 0 20px; }
.esp-megav .esp-mega__head { margin-bottom: 12px; }
.esp-megav .esp-mega__t { font-size: 17px; }
.esp-megav .esp-mega__sub { font-size: 12.5px; }
/* Le lien « Explorer » répète la carte, qui est déjà cliquable en entier. */
.esp-megav .esp-mega .arrow-link { display: none; }

/* -------------------------------------------------------------------------
   A — liste dense : pas de visuels, quatre colonnes, une ligne de résumé.
   Le plus compact ; on lit une liste, pas une vitrine.
   ------------------------------------------------------------------------- */
.esp-megav-a .esp-mega__inner,
.esp-megav-a .esp-mega__inner--multi {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 0 26px;
}
.esp-megav-a .esp-mega__thumb { display: none; }
.esp-megav-a .esp-mega__card {
  display: block;
  border: 0;
  background: none;
  padding: 7px 10px 7px 12px;
  border-left: 2px solid transparent;
}
.esp-megav-a .esp-mega__card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(156, 91, 52, .06);
  border-left-color: var(--accent);
}
.esp-megav-a .esp-mega__body { gap: 2px; }
.esp-megav-a .esp-mega__title { font-size: 15.5px; font-weight: 500; }
.esp-megav-a .esp-mega__desc {
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.esp-megav-a .esp-mega__group {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* -------------------------------------------------------------------------
   B — vignettes miniatures : on garde l'image, très réduite, sur trois
   colonnes. Compromis entre densité et attrait visuel.
   ------------------------------------------------------------------------- */
.esp-megav-b .esp-mega__inner,
.esp-megav-b .esp-mega__inner--multi {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 8px 16px;
}
.esp-megav-b .esp-mega__card {
  grid-template-columns: 54px 1fr;
  gap: 11px;
  padding: 9px 11px;
  align-items: center;
}
.esp-megav-b .esp-mega__card:hover { transform: none; box-shadow: none; }
.esp-megav-b .esp-mega__thumb,
.esp-megav-b .esp-mega__inner--multi .esp-mega__thumb--illus { width: 54px; height: 42px; }
.esp-megav-b .esp-mega__thumb--icon svg,
.esp-megav-b .esp-mega__inner--multi .esp-mega__thumb--icon svg { width: 26px; height: 26px; }
.esp-megav-b .esp-mega__body { gap: 3px; }
.esp-megav-b .esp-mega__title { font-size: 15px; }
.esp-megav-b .esp-mega__desc {
  font-size: 11.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   C — menu déroulant ancré : le panneau cesse d'occuper toute la largeur et
   se place sous sa rubrique, en une colonne. Le plus sobre, mais il fait
   perdre l'effet de vitrine.
   ------------------------------------------------------------------------- */
.esp-megav-c .esp-nav-item--mega { position: relative; }
.esp-megav-c .esp-nav-item--mega > .esp-mega {
  left: 0;
  right: auto;
  width: 380px;
  padding: 14px 0 16px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
}
/* Les dernières rubriques s'ouvrent vers la gauche, sinon le panneau
   déborderait de l'écran. */
.esp-megav-c .esp-n2__rubs > li:nth-last-child(-n+4).esp-nav-item--mega > .esp-mega {
  left: auto;
  right: 0;
}
.esp-megav-c .esp-mega > .container { max-width: none; padding: 0 16px; }
.esp-megav-c .esp-mega__inner,
.esp-megav-c .esp-mega__inner--multi {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 0;
}
.esp-megav-c .esp-mega__card {
  grid-template-columns: 40px 1fr;
  gap: 10px;
  padding: 8px 8px;
  border: 0;
  background: none;
  align-items: center;
}
.esp-megav-c .esp-mega__card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(156, 91, 52, .07);
}
.esp-megav-c .esp-mega__thumb,
.esp-megav-c .esp-mega__inner--multi .esp-mega__thumb--illus { width: 40px; height: 32px; }
.esp-megav-c .esp-mega__thumb--icon svg,
.esp-megav-c .esp-mega__inner--multi .esp-mega__thumb--icon svg { width: 22px; height: 22px; }
.esp-megav-c .esp-mega__body { gap: 1px; }
.esp-megav-c .esp-mega__title { font-size: 14.5px; }
.esp-megav-c .esp-mega__desc { display: none; }
.esp-megav-c .esp-mega__head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------- jauge de l'essai */
.esp-megav-jauge {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 2000;
  background: var(--hero-bg);
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .02em;
  padding: 7px 12px;
  border-radius: 2px;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
}
.esp-megav-jauge b { font-weight: 500; }
.esp-megav-jauge a {
  color: #e2b48f;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 180, 143, .45);
  margin-left: 5px;
}
.esp-megav-jauge a:hover { color: #fff; border-bottom-color: #fff; }