/* MENU MOBILE 1 — REGROUPEMENT PAR METIER
   ---------------------------------------------------------------------------
   Le reste de la variante est stylise par `components/headers/main.css`, avec
   les classes historiques (`.mobile-submenu-grid`, `.mobile-submenu-link`).
   Ce fichier ne porte que ce qui est propre au multi-metiers, sous des classes
   prefixees par la variante.

   Le menu mobile est le pendant du mega-menu : sur un site a deux metiers, il
   deroulait treize liens a plat, sans rien qui dise ou finit le premier
   metier. Un intitule ouvre desormais chaque serie.

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

   LA COULEUR : rampe entre les deux couleurs de marque, posee en ligne par le
   PHP (`--m-melange`). Aucune couleur en dur, aucune variable ajoutee. */

.menu-mobile-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(1, 1fr);
  gap: 12px;
}

.menu-mobile-1__metier {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-couleur);
}

/* Le filet prolonge l'intitule jusqu'au bord : la coupure se voit sans qu'un
   cadre vienne alourdir un menu deja dense. */
.menu-mobile-1__metier::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--m-couleur) 30%, transparent);
}

/* Apres la regle de base : meme specificite, c'est l'ordre qui tranche. */
.menu-mobile-1__groupe--nu {
  display: contents;
}