/* ------------------------------------------------------------------ Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom: none;
  box-shadow: 0 6px 16px -8px rgba(150, 173, 196, 0.4);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  height: 84px;
  position: relative;
}
.brand { grid-column: 1; display: flex; align-items: center; gap: 14px; font-weight: 600; min-width: 0; }
.brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-text { display: flex; align-items: baseline; gap: 12px; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dusk-blue);
}
.main-nav {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav a { font-size: 0.9rem; color: var(--text-muted); transition: color 0.15s ease; }
.main-nav a:hover { color: var(--accent); }
.main-nav a[aria-current="page"] { color: var(--accent); }
.header-spacer { display: none; }
.nav-toggle { grid-column: 3; }


/* Élément de nav avec menu déroulant (Expertise / Démos) */
/* Le bouton caret ajoute ~18px (boîte) après le libellé : on les retranche
   pour que l'écart visuel jusqu'au lien suivant reste égal à celui entre deux
   liens simples (ex. Approche → À propos). */
.nav-item { position: relative; display: inline-flex; align-items: center; gap: 0; margin-right: -18px; }
.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 4px 2px;
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.2s ease;
}
.nav-item:hover .nav-caret { color: var(--text-muted); }
.nav-item.open .nav-caret { color: var(--text); transform: rotate(180deg); }

/* Liste à plat : réservée au tiroir mobile (voir @media), masquée en desktop */
.nav-menu { display: none; }

/* pont invisible pour que le survol ne se coupe pas entre le libellé et le méga-menu */
.nav-item.has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 22px;
}

/* ---------------------------------------------------- Méga-menu pleine largeur */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: none;
  box-shadow: 0 24px 48px -24px rgba(16, 26, 36, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
  z-index: 5;
}
.nav-mega.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-mega-inner {
  display: grid;
  /* Carte resserrée (1.05fr -> 1.01fr, rendu à la colonne d'intro) : plus
     carrée par rapport à sa hauteur, sans toucher à la colonne de liens
     (1.4fr, calée au pixel près pour tenir sur une seule ligne). Le padding
     latéral de .nav-mega-card-body a aussi été réduit (14px -> 8px) pour
     regagner un peu de largeur de texte utile — sans ces deux ajustements
     combinés, le paragraphe le plus long (Effectifs & planification) gagne
     une 3e ligne et la carte redevient plus haute qu'avant (vérifié en
     mesurant chaque variante, largeur par largeur, avant ce réglage). */
  grid-template-columns: minmax(150px, 0.64fr) 1.4fr minmax(230px, 1.01fr);
  gap: 40px;
  padding: 36px 0 40px;
  align-items: start;
}
.nav-mega-title {
  margin: 0 0 12px;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text);
}
.nav-mega-intro p {
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.nav-mega-intro .btn { margin-top: 2px; }

.nav-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;          /* rangées de hauteur égale */
  gap: 0 20px;
}
.nav-mega-list li { display: flex; }
.nav-mega-list a {
  flex: 1;
  display: flex;
  align-items: center;         /* traits sous chaque lien alignés */
  padding: 11px 0;
  font-size: 0.85rem;
  white-space: nowrap;         /* pas de retour à la ligne */
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.nav-mega-list a:hover { color: var(--text); padding-left: 6px; }
.nav-mega-list a[aria-current="page"] {
  color: var(--accent-ink);
  font-weight: 600;
  border-bottom-color: var(--accent-ink);
}
.nav-mega-list a[aria-current="page"]::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent-ink);
}

/* Méga-menu groupé (ex. Expertise) : une sous-liste par catégorie, toujours
   remplie ligne par ligne (comme la liste à plat) — le nom de la catégorie
   est une étiquette verticale sur le bord gauche du bloc (pas un titre en
   pleine largeur au-dessus), pour rester un simple repère discret. */
.nav-mega-list-groups { display: flex; flex-direction: column; gap: 18px; }
.nav-mega-groupblock { display: flex; gap: 14px; align-items: stretch; }
.nav-mega-group {
  flex-shrink: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 2px solid var(--border-strong);
  padding-left: 7px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.nav-mega-groupblock .nav-mega-list { flex: 1; }

.nav-mega-card {
  display: flex;
  flex-direction: column;
  /* Hauteur naturelle par défaut (Démos, Approche : une seule carte, pas de
     vide à combler). Pour un menu où la carte change au survol (Expertise),
     main.js pose ici un min-height JS = le strict nécessaire pour SA variante
     la plus longue, calculé à l'affichage — pas de saut au survol, pas de
     grand vide pour les autres menus. */
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft-sm);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}
.nav-mega-card:hover { box-shadow: var(--shadow-soft-hover); transform: translateY(-3px); }
.nav-mega-card-media {
  position: relative;
  display: block;
  /* 148px (au lieu de 76px) : les photos d'illustration (voir img/expertise/)
     sont au format 3:2 — sur une bande trop basse, `cover` n'en montrait
     qu'une fine lanière très zoomée. Cette hauteur laisse voir l'essentiel
     du sujet sans trop allonger la carte. */
  flex: 0 0 148px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Icône thématique (une par domaine, cf. ICONS dans main.js) — pour les cartes
   sans photo dédiée (Démos, Approche). Centrée en hauteur, calée à droite du
   bloc, volontairement plus petite que le bloc pour tenir entièrement dedans. */
.nav-mega-card-media svg {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 104px;
  height: 104px;
  color: #fff;
  opacity: 0.55;
}
.nav-mega-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.nav-mega-card-body { flex: 1; display: block; padding: 11px 8px 13px; }
.nav-mega-card-body h4 {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}
.nav-mega-card-body p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-wrap: pretty;
}
/* Bloc « Résultat » : ce que l'expertise survolée apporte concrètement au client. */
.nav-mega-card-kicker {
  display: block;
  margin-top: 8px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav-mega-card-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.nav-mega-card-results li {
  position: relative;
  padding-left: 14px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.nav-mega-card-results li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-ink);
  font-size: 0.7rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
}