/* Méga menu V5 · en haut de page : panneaux pleine largeur sous le header (wireframe « Menu 33 degres »).
   Après le hero : pilule flottante sticky (piste B validée par Ben), panneaux en cartes arrondies.
   Aucun réglage d'espacement des lettres. */
.mm-layer { position: fixed; left: max(0px, calc((100vw / var(--z, 1) - 1440px) / 2)); top: 0; width: 1440px; height: calc(100vh / var(--z, 1)); zoom: var(--z, 1); z-index: 9000; pointer-events: none; }
.mm-veil { position: absolute; inset: 0; background: rgba(0, 16, 46, .45); opacity: 0; transition: opacity .35s var(--ease-out); }
.mm-veil.is-open { opacity: 1; pointer-events: auto; }

/* panneaux */
.mm-panel { position: absolute !important; margin: 0 !important; opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-out), visibility 0s .3s; pointer-events: auto; }
.mm-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-out), transform .45s var(--ease-out), visibility 0s; }
.mm-card { width: 1344px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 24px 48px #001F5533; }
.mm-card > [data-pencil-id] { position: static !important; width: 100% !important; border-radius: 0 !important; box-shadow: none !important; padding: 24px 28px !important; }

/* onglets Expertises : une zone détail visible à la fois */
.mm-detail { flex: 1 1 0; min-width: 0; }
.mm-detail[hidden] { display: none !important; }
.mm-detail [data-pencil-name="Sous-expertises"] { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 28px !important; row-gap: 0 !important; width: 100% !important; height: auto !important; box-sizing: border-box !important; }
.mm-detail [data-pencil-name^="Sous-expertise · "] { width: 100% !important; }
.mm-tab { cursor: pointer; transition: background-color .25s, box-shadow .25s; }

/* liens */
[data-mm-link] { cursor: pointer; transition: opacity .2s; }
[data-mm-link]:hover { opacity: .7; }
[data-mm-link]:focus-visible, .mm-item:focus-visible, .mm-tab:focus-visible { outline: 2px solid #6EF9AD; outline-offset: 3px; border-radius: 8px; }
.mm-item { cursor: pointer; }
.mm-item [data-pencil-name^="Chevron"] { transition: transform .35s var(--ease-out); }
.mm-item[aria-expanded="true"] [data-pencil-name^="Chevron"] { transform: rotate(180deg); }

/* carte « La vie de l'agence » (V1 Lentille) : le rond passe en menthe au survol */
[data-pencil-name^="Réseau · "] [data-pencil-name="Rond"], [data-pencil-name^="Réseau · "] [data-pencil-name="Rond"] path, [data-pencil-name^="Réseau · "] > div:last-child { transition: background-color .25s, fill .25s, color .25s; }
[data-pencil-name^="Réseau · "]:is(:hover, :focus-visible) [data-pencil-name="Rond"] { background-color: #6EF9AD !important; }
[data-pencil-name^="Réseau · "]:is(:hover, :focus-visible) [data-pencil-name="Rond"] path { fill: #001F55; }
[data-pencil-name^="Réseau · "]:is(:hover, :focus-visible) > div:last-child { color: #6EF9AD !important; }
[data-pencil-name^="Réseau · "][data-mm-link]:hover { opacity: 1; }

/* header du hero : bleu nuit quand un panneau est ouvert */
.mm-navy { background-color: #001F55 !important; box-shadow: 0 0 0 100vmax #001F55; clip-path: inset(0 -100vmax); transition: background-color .25s; }

/* pilule flottante (piste B) */
.mm-pillzone { position: absolute; left: 0; top: 16px; width: 100%; display: flex; justify-content: center; pointer-events: none;
  transform: translateY(-140%); opacity: 0; transition: transform .25s var(--ease-out), opacity .25s; }
.mm-pillzone.is-on { transform: none; opacity: 1; }
.mm-pillzone.is-on > * { pointer-events: auto; }
.mm-tel { position: relative; }
.mm-bubble { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; padding: 8px 12px; border-radius: 999px;
  background: #FFFFFF; color: #001F55; font: 600 14px/1 "Host Grotesk", system-ui, sans-serif; box-shadow: 0 10px 24px #001F5533; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease-out); }
.mm-tel:hover .mm-bubble, .mm-tel:focus-visible .mm-bubble { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .mm-veil, .mm-panel, .mm-pillzone, .mm-item [data-pencil-name^="Chevron"], .mm-bubble { transition: none !important; }
  .mm-panel { transform: none; }
}