.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1200px;
  background: var(--white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}
.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mega-menu-inner {
  display: grid;
  grid-template-columns: auto 300px; /* Par défaut */
}

.mega-menu-inner.has-few-items-3 {
  grid-template-columns: auto 400px; /* Augmente la taille de la promo box si 3 services */
}

.mega-menu-inner.has-few-items-2 {
  grid-template-columns: auto 500px; /* Augmente davantage si 2 services */
}

.mega-menu-inner.has-few-items-1 {
  grid-template-columns: auto 600px; /* Promo box augmentée au maximum si 1 service */
}
.mega-menu-services {
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Si moins de 4 services (par exemple : 3 services, on utilise 3 colonnes) */
.mega-menu-services.has-few-items-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Si seulement 2 services (on utilise 2 colonnes) */
.mega-menu-services.has-few-items-2 {
  grid-template-columns: 1fr;
}

/* Si un seul service (on utilise une seule colonne qui occupe toute la largeur de l'espace disponible) */
.mega-menu-services.has-few-items-1 {
  grid-template-columns: 1fr;
}
.mega-menu-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.mega-menu-link:hover {
  background: var(--white-transparent);
  border-color: var(--primary);
}
.mega-menu-link:hover .mega-icon {
  background: var(--primary);
  border-color: var(--primary);
}
.mega-menu-link:hover .mega-icon svg {
  color: var(--white);
}
.mega-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: var(--white-transparent);
  border: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.mega-icon svg {
  width: 24px;
  height: 24px;
  color: var(--secondary);
  transition: color 0.3s ease;
}
.mega-text h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--black);
  margin-bottom: 4px;
}
.mega-text span {
  font-size: 0.8rem;
  color: var(--gray-dark);
}

/* Promo box dans mega menu */
.mega-menu-promo {
  background: var(--primary);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mega-menu-promo .eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}
.mega-menu-promo h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.3;
}
.mega-menu-promo p {
  font-size: 0.9rem;
  color: var(--white);
  line-height: 1.7;
  margin-bottom: 24px;
}
[data-header] .mega-menu-promo .promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--secondary);
  color: var(--on-secondary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  align-self: flex-start;
  text-transform: unset;
  letter-spacing: normal;
}
[data-header] .mega-menu-promo .promo-btn:hover {
  background: var(--white);
  color: var(--secondary);
}
[data-header] .mega-menu-promo .promo-btn svg {
  width: 16px;
  height: 16px;
}

/* ── TITRES : couleur de survol explicite (CLAUDE.md §4.13) ──────────
   Le main.css des themes stylise les balises Hn, hover compris. Chaque
   titre reprend ici sa couleur de base pour neutraliser cet heritage. */
.mega-text h4:hover {
  color: var(--black);
}

.mega-menu-promo h3:hover {
  color: var(--white);
}

/* ── REGROUPEMENT PAR METIER ──────────────────────────────────────────
   Une LIGNE D'EN-TETE pleine largeur ouvre la serie de chaque metier : le
   mega-menu se lit comme un sommaire a deux sections, au lieu d'une liste de
   treize liens ou rien ne dit ou finit le premier metier.

   MONO-METIER : le conteneur passe en `display: contents`, les liens
   redeviennent enfants directs de la grille et le rendu est celui d'avant.

   SUBGRID, et pas une copie des colonnes : le nombre de colonnes de
   `.mega-menu-services` varie a l'execution (`has-few-items-1..3`). Le
   recopier ici, c'est le figer a quatre et casser les menus courts. Le groupe
   herite donc des colonnes de son parent, quelles qu'elles soient. La
   declaration qui precede sert de repli aux navigateurs sans subgrid.

   LA COULEUR : rampe entre les deux couleurs de marque, posee en ligne par le
   PHP. Aucune couleur en dur, aucune variable ajoutee. */
.services-on-hover-1__groupe {
  --m-couleur: color-mix(in oklab, var(--primary), var(--secondary) var(--m-melange, 0%));
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: subgrid;
  gap: 8px;
}
.services-on-hover-1__metier {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 8px;
}
.services-on-hover-1__metier-filet {
  flex: 0 0 22px;
  height: 2px;
  background: var(--m-couleur);
}
.services-on-hover-1__metier-nom {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-couleur);
}
/* LA HAUTEUR DES LIENS, ET LE SCROLL.
   La grille etire ses rangees pour remplir le panneau : a cinq services, un
   lien fait 78 px et son cadre de survol respire. En ajoutant les en-tetes de
   metier et les services d'un second, les rangees retombent a leur minimum —
   52 px, la hauteur de l'icone — et le cadre de survol devient une bande
   serree.

   On rend donc au lien sa hauteur (l'icone fait 50 px, plus 14 px de part et
   d'autre : les 78 px du mono, exprimes et non recopies), et l'on borne le
   panneau pour qu'il defile au lieu de s'etirer sans fin. La barre reste fine
   et discrete, comme celle du menu split. */
.services-on-hover-1--multi {
  max-height: min(70vh, 460px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 22%, transparent) transparent;
}
.services-on-hover-1--multi::-webkit-scrollbar {
  width: 6px;
}
.services-on-hover-1--multi::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 3px;
}
.services-on-hover-1--multi::-webkit-scrollbar-track {
  background: transparent;
}
/* Reserve au multi : en mono la grille etire deja les rangees a la bonne
   hauteur, et lui imposer un rembourrage explicite changerait le rendu des
   sites en place. */
.services-on-hover-1--multi .mega-menu-link {
  min-height: calc(50px + 2 * 14px);
  padding: 14px 20px;
}

/* Le survol d'un lien reprend la teinte de son metier. Meme specificite que
   les regles d'origine, placees apres : c'est l'ordre qui tranche. */
.services-on-hover-1__groupe .mega-menu-link:hover {
  border-color: var(--m-couleur);
}
.services-on-hover-1__groupe .mega-menu-link:hover .mega-icon {
  background: var(--m-couleur);
  border-color: var(--m-couleur);
}
/* Apres la regle de base : meme specificite, c'est l'ordre qui tranche. */
.services-on-hover-1__groupe--nu {
  display: contents;
}