/* Méga-menu Services v2 (test ?mm=v2). Desktop seulement ; l'ouverture est pilotée par mega-menu-v2.js (classe is-mm2-open). */
.yam-mm2 {
  display: none;
}
.yam-mm-arrow {
  opacity: 0;
  transition: opacity var(--motion-quick);
}
.yam-mm-arrow [data-yam-jitter] {
  animation-play-state: paused;
}
.yam-mm-name {
  transition: transform var(--mm2-fade) var(--mm2-ease);
}
@media (min-width: 62em) {
  [data-mm2-trigger] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  [data-mm2-trigger]::after {
    content: "";
    flex: 0 0 auto;
    width: var(--mm2-chevron);
    height: var(--mm2-chevron);
    margin-left: var(--size-8);
    border-right: var(--mm2-chevron-line) solid;
    border-bottom: var(--mm2-chevron-line) solid;
    transform: translateY(-1.5px) rotate(45deg);
    transition: transform var(--mm2-fade) var(--mm2-ease);
  }
  .site-header.is-mm2-open [data-mm2-trigger]::after {
    transform: translateY(1.5px) rotate(225deg);
  }
  .yam-mm2-layer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 900;
    margin-top: calc(var(--size-24) * -1);
    pointer-events: none;
  }
  /* Ombre portée : le panneau se lit comme un calque au-dessus de la page. */
  .yam-mm2-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    box-shadow: var(--mm2-shadow);
    opacity: 0;
    transition: opacity var(--motion-quick);
  }
  .site-header.is-mm2-open .yam-mm2-layer::after {
    opacity: 1;
    transition: opacity var(--mm2-fade) var(--mm2-ease) calc(var(--mm2-open) * 0.6);
  }
  .yam-mm2 {
    display: block;
    position: relative;
    padding-top: var(--size-24);
    background-color: var(--color-background);
    color: var(--color-text);
    border-bottom: var(--rule-strong);
    pointer-events: auto;
    mask-image: linear-gradient(#000, #000);
    mask-repeat: no-repeat;
    mask-position: left top;
    mask-size: 100% 0%;
    visibility: hidden;
    transition: mask-size var(--mm2-close) var(--mm2-ease), visibility 0s linear var(--mm2-close);
  }
  .site-header.is-mm2-open .yam-mm2 {
    mask-size: 100% 100%;
    visibility: visible;
    transition: mask-size var(--mm2-open) var(--mm2-ease), visibility 0s;
  }
  .yam-mm2-inner {
    display: grid;
    grid-template-columns: var(--mm2-start, 50%) minmax(0, 1fr);
    min-height: var(--mm2-height);
  }
  /* Option B : une grande photo du projet, du bord du conteneur (aligné sur le logo) jusqu'à la gouttière des métiers. */
  .yam-mm2-preview {
    display: flex;
    min-height: 0;
    padding: var(--mm2-pad-y) var(--mm2-pad-x) var(--mm2-pad-y) var(--mm2-left, var(--mm2-pad-x));
  }
  .yam-mm2-stack {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--color-surface);
  }
  .yam-mm2-pv {
    position: absolute;
    inset: 0;
    color: var(--mm2-band-ink, var(--color-background));
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-swap);
  }
  .yam-mm2[data-pv-on="1"] [data-pv="1"],
  .yam-mm2[data-pv-on="2"] [data-pv="2"],
  .yam-mm2[data-pv-on="3"] [data-pv="3"],
  .yam-mm2[data-pv-on="4"] [data-pv="4"] {
    opacity: 1;
    pointer-events: auto;
  }
  .yam-mm2-media {
    position: absolute;
    inset: 0;
  }
  .yam-mm2-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform var(--mm2-open) var(--mm2-ease);
  }
  .site-header.is-mm2-open .yam-mm2-img {
    transform: none;
  }
  .yam-mm2-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: var(--size-8);
    padding: var(--size-20) var(--size-24);
    background-color: var(--mm2-band, var(--color-text));
  }
  .yam-mm2-band .yam-mm-pv-meta {
    max-width: var(--measure-card);
  }
  .yam-mm2-pv-name {
    font-family: var(--font-heading);
    font-size: var(--mm2-type-pv);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-title);
    line-height: var(--leading-ui);
  }
  .yam-mm2-index {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--mm2-pad-y) var(--mm2-pad-x) var(--mm2-pad-y) 0;
  }
  .yam-mm2-row {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--mm2-row-min);
    opacity: 0;
    transform: translateY(var(--mm2-rise));
    transition: opacity var(--mm2-fade), transform var(--mm2-fade) var(--mm2-ease);
  }
  .site-header.is-mm2-open .yam-mm2-row {
    opacity: 1;
    transform: none;
  }
  .yam-mm2-row:nth-of-type(2) { transition-delay: var(--mm2-stagger); }
  .yam-mm2-row:nth-of-type(3) { transition-delay: calc(var(--mm2-stagger) * 2); }
  .yam-mm2-row:nth-of-type(4) { transition-delay: calc(var(--mm2-stagger) * 3); }
  .yam-mm2-row:nth-of-type(5) { transition-delay: calc(var(--mm2-stagger) * 4); }
  .yam-mm2-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--size-12);
    padding: var(--mm2-row-pad) 0 var(--size-8) 0;
    color: var(--color-text);
    text-decoration: none;
    outline: none;
  }
  .yam-mm2-link .yam-mm-name {
    font-size: var(--mm2-type-name);
    white-space: nowrap;
  }
  .yam-mm2-link .yam-mm-arrow {
    align-self: center;
  }
  .yam-mm2-sub {
    grid-column: 1 / 2;
    margin-top: var(--size-8);
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--mm2-type-sub);
    line-height: var(--leading-body);
    position: relative;
    z-index: 1;
  }
  .yam-mm2-link:is(:hover, :focus-visible) .yam-mm-name {
    transform: translateX(var(--mm2-shift));
  }
  .yam-mm2-link:is(:hover, :focus-visible) .yam-mm-arrow {
    opacity: 1;
  }
  .yam-mm2-link:is(:hover, :focus-visible) .yam-mm-arrow [data-yam-jitter] {
    animation-play-state: running;
  }
  .yam-mm2-link:is(:hover, :focus-visible) .yam-mm2-sub {
    color: var(--color-text);
  }
  .yam-mm2-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--size-4);
  }
  .yam-mm2-guide {
    align-self: flex-start;
    margin: 0 0 var(--size-12);
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--mm2-type-sub);
    text-decoration: none;
    transition: color var(--motion-quick);
  }
  .yam-mm2-guide:hover {
    color: var(--color-text);
  }
  .yam-mm2-all {
    align-self: flex-start;
    margin: var(--size-16) 0 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--type-label);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity var(--motion-quick);
  }
  .yam-mm2-all:hover {
    opacity: 0.6;
  }
  :is(.yam-mm2-guide, .yam-mm2-all):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--size-4);
  }
}
/* Entre 992 et 1199 px, la colonne d'aperçu est trop étroite pour une photo : on garde le texte. */
@media (min-width: 62em) and (max-width: 74.9375em) {
  .yam-mm2-media {
    display: none;
  }
}
/* Écrans bas : le détail des mots-clés passe derrière, les métiers et les guides restent. */
@media (min-width: 62em) and (max-height: 52em) {
  .yam-mm2-sub {
    display: none;
  }
}
/* v2 : pas de numéros, y compris dans la liste mobile des métiers. */
.site-header[data-mm2] .yam-nav-sub-num {
  display: none;
}
.site-header[data-mm2] .yam-nav-sub {
  grid-template-columns: minmax(0, 1fr);
}
@media (prefers-reduced-motion: reduce) {
  .yam-mm2,
  .yam-mm2-row,
  .yam-mm2-pv,
  .yam-mm2-img,
  .yam-mm-name,
  .yam-mm-arrow,
  [data-mm2-trigger]::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}