/* Le Studio : méga-menu et menu mobile.
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */

/* ---------- v5 : méga-menu (960 px et plus) ---------- */
:root{--ease-in-out:cubic-bezier(.77,0,.175,1);
  /* Couleur du méga-menu (sélecteur « Couleur ») : Sombre par défaut, Clair (Gris retiré le 27 oct.) */
  --mm-bg:var(--night);--mm-fg:var(--on-night);--mm-muted:var(--mm-muted);--mm-line:var(--mm-line);--mm-hover:var(--night-2);--mm-card:var(--night-2);
  --mm-ring:rgb(242 242 239 / .1);--mm-veil:rgb(13 13 13 / .5);--mm-accent:var(--accent)}
:root[data-mmc="clair"]{--mm-bg:var(--white);--mm-fg:var(--ink);--mm-muted:var(--ink-2);--mm-line:var(--line);--mm-hover:var(--bg);--mm-card:var(--bg);--mm-ring:rgb(13 13 13 / .08);--mm-veil:rgb(13 13 13 / .35)}
.mm-shell,.mm-chev,.mm-cta,.mm-veil{display:none}
@media (min-width:960px){
  /* En-tête fixe : transparent en haut de page, bandeau noir dès qu'on a défilé, retiré quand on descend */
  .header{position:fixed;transition:transform .32s var(--ease-out),opacity .12s ease}
  .header.is-solid,.header.is-open{color:var(--mm-fg)}
  .header.is-swap{opacity:0}
  .header::before{content:"";position:absolute;inset:10px 0;z-index:-1;border-radius:var(--r-frame);background:var(--mm-bg);
    box-shadow:0 12px 40px -12px rgb(0 0 0 / .45),0 0 0 1px var(--mm-ring);opacity:0;transition:opacity var(--d-1) ease}
  .header.is-solid::before,.header.is-open::before{opacity:1}
  .header.is-away:not(.is-open){transform:translateY(calc(-100% - var(--inset)))}
  .dock{display:none}
  .nav a[aria-current="page"]::after{display:none}

  .mm-nav{display:flex;align-items:center}
  .nav .mm-list{position:relative;display:flex;align-items:center;gap:clamp(12px,1.6vw,28px)}
  .mm-item{display:flex;align-items:center}
  .mm-top{display:inline-flex;align-items:center;min-height:44px}
  .mm-chev{display:grid;place-items:center;inline-size:26px;block-size:44px;margin-inline-end:-6px;color:inherit;opacity:.55;transition:opacity var(--d-1) ease}
  .mm-chev svg{inline-size:10px;block-size:6px;transition:transform var(--d-1) var(--ease-out)}
  .mm-chev[aria-expanded="true"]{opacity:1}
  .mm-chev[aria-expanded="true"] svg{transform:rotate(180deg)}
  .mm-cta{display:block;margin-inline-start:clamp(2px,.6vw,10px)}
  .mm-pill{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--fs-sm);letter-spacing:-.01em;white-space:nowrap;transition:background-color var(--d-1) ease,color var(--d-1) ease,transform var(--d-1) var(--ease-out)}
  .mm-pill:active{transform:scale(.97)}
  /* Repère : le carré orange du logo glisse sous l'entrée survolée ou ouverte, et se pose sous la page courante */
  .nav .mm-list::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:2px;inline-size:6px;block-size:6px;background:var(--accent);
    transform:translateX(var(--mm-x,0px));opacity:0;transition:transform .28s var(--ease-in-out),opacity var(--d-1) ease;pointer-events:none}
  .nav .mm-list[data-dot]::after{opacity:1}
  .nav .mm-list:not([data-dot-ready])::after{transition:none}

  /* Panneau : un seul cadre noir sous l'en-tête, les trois contenus empilés dans la même case (sa hauteur est celle du plus grand) */
  .mm-shell{position:absolute;inset-block-start:calc(100% - 2px);inset-inline:0;display:grid;background:var(--mm-bg);color:var(--mm-fg);
    border-radius:var(--r-frame);box-shadow:0 30px 80px -24px rgb(0 0 0 / .6),0 0 0 1px var(--mm-ring);
    padding:clamp(20px,2.2vw,34px) calc(var(--gutter) - var(--inset)) clamp(22px,2.4vw,36px);
    max-block-size:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.99);transform-origin:50% 0;
    transition:opacity var(--d-1) ease,transform .18s var(--ease-out),visibility 0s linear .18s}
  .mm-shell::before{content:"";position:absolute;inset-inline:0;inset-block:-14px 100%}
  .header.is-open .mm-shell{opacity:1;visibility:visible;transform:none;transition:opacity var(--d-1) var(--ease-out),transform .24s var(--ease-out),visibility 0s}
  .mm-veil{display:block;position:fixed;inset:0;z-index:calc(var(--z-header) - 1);background:var(--mm-veil);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-1) ease,visibility 0s linear var(--d-1)}
  html.mm-open .mm-veil{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--d-1) ease,visibility 0s}

  .mm-panel{grid-area:1 / 1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(18px,2vw,26px);align-content:start;
    opacity:0;visibility:hidden;transform:translateX(calc(var(--dir,0) * 16px));transition:opacity .14s ease,transform .18s var(--ease-out),visibility 0s linear .18s}
  /* Seul le contenu ouvert occupe le panneau : sa hauteur suit (les autres sont posés par-dessus pendant leur fondu) */
  .mm-panel{align-self:start}
  .mm-panel:not(.is-active){position:absolute;inset-block-start:var(--mm-pt,0);inset-inline:var(--mm-pl,0) var(--mm-pr,0)}
  .mm-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity var(--d-1) var(--ease-out) .04s,transform .24s var(--ease-out) .04s,visibility 0s}
  .mm-panel [data-mm-i]{opacity:0;transform:translateY(8px);transition:opacity .22s var(--ease-out),transform .26s var(--ease-out);transition-delay:0s}
  .mm-panel.is-active [data-mm-i]{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 30ms)}

  .mm-shell .mm-head{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block-end:clamp(12px,1.3vw,18px);border-block-end:1px solid var(--mm-line)}
  .mm-shell .mm-label{display:inline-flex;gap:10px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:var(--mm-muted)}
  .mm-shell .mm-all{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-size:var(--fs-sm)}
  .mm-shell .mm-all .mm-arrow{inline-size:18px;block-size:18px}
  .mm-shell .mm-arrow{inline-size:20px;block-size:20px;flex:none;transition:transform var(--d-1) var(--ease-out),opacity var(--d-1) ease}
  .mm-shell .mm-sub{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:var(--mm-muted);margin-block-end:10px}
  .mm-shell .mm-chip{font-family:var(--mono);font-size:var(--fs-2xs);line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:var(--mm-muted)}
  .mm-shell .mm-n{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.3;color:var(--mm-muted);padding-block-start:.35em}
  .mm-shell .mm-main{grid-column:1 / span 7;display:grid;gap:clamp(16px,1.8vw,24px);align-content:start;min-inline-size:0}
  .mm-shell .mm-aside{grid-column:8 / -1;display:grid;gap:12px;align-content:start;min-inline-size:0}

  /* Expertises */
  .mm-shell .mm-svcs,.mm-shell .mm-works,.mm-shell .mm-arts{margin-inline:-16px}
  .mm-shell .mm-svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .mm-shell .mm-svc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:4px;padding:14px 16px;border-radius:var(--r-md);transition:background-color var(--d-1) ease}
  .mm-shell .mm-svc .mm-n{grid-row:1}
  .mm-shell .mm-svc .roll{grid-row:1;grid-column:2;justify-self:start;font-size:var(--fs-lg);font-weight:450;letter-spacing:-.02em}
  .mm-shell .mm-svc .mm-arrow{grid-row:1;grid-column:3;align-self:center;opacity:0;transform:translateX(-8px)}
  .mm-shell .mm-svc__desc{grid-column:2;font-size:var(--fs-sm);line-height:1.4;color:var(--mm-muted);text-wrap:pretty}
  .mm-shell .mm-svc__meta{grid-column:2;margin-block-start:4px;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--mm-muted)}
  .mm-shell .mm-offres{border-block-start:1px solid var(--mm-line);padding-block-start:clamp(14px,1.4vw,20px)}
  .mm-shell .mm-offres ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mm-shell .mm-offres a{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:start;gap:6px;block-size:100%;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--mm-line);font-size:var(--fs-sm);line-height:1.3;transition:border-color var(--d-1) ease,background-color var(--d-1) ease}
  .mm-shell .mm-preview{position:relative;aspect-ratio:16 / 10;border-radius:var(--r-md);overflow:clip;background:var(--mm-card)}
  .mm-shell .mm-preview > *{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:0;transition:opacity var(--d-1) ease}
  .mm-shell .mm-preview > .is-on{opacity:1}
  .mm-shell .mm-cap{display:flex;align-items:center;gap:10px;min-block-size:24px;font-size:var(--fs-sm);color:var(--mm-muted)}
  .mm-shell .mm-cap [data-mm-cap]{display:none}
  .mm-shell .mm-cap [data-mm-cap].is-on{display:inline}
  .mm-shell .mm-sq{inline-size:8px;block-size:8px;background:var(--mm-accent);flex:none}

  /* Projets */
  .mm-shell .mm-works{display:grid;gap:2px}
  .mm-shell .mm-work{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:baseline;column-gap:12px;padding:9px 16px;border-radius:var(--r-md);transition:background-color var(--d-1) ease,opacity var(--d-1) ease}
  .mm-shell .mm-work .roll{justify-self:start;font-size:var(--fs-xl);font-weight:450;letter-spacing:-.035em}
  .mm-shell .mm-work__type{font-size:var(--fs-sm);color:var(--mm-muted);text-align:end}
  .mm-shell .mm-work .mm-arrow{align-self:center;opacity:0;transform:translateX(-8px)}
  .mm-shell .mm-work.is-soon{cursor:default}

  /* Actualités */
  .mm-shell .mm-main--news{grid-column:1 / span 5}
  .mm-shell .mm-aside--news{grid-column:6 / -1;gap:clamp(16px,1.8vw,24px)}
  .mm-shell .mm-feat{display:grid;gap:14px;align-content:start}
  .mm-shell .mm-feat__cover{display:grid;place-items:center;aspect-ratio:16 / 10;border-radius:var(--r-md);background:var(--mm-card);overflow:clip}
  .mm-shell .mm-logo{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:var(--fs-xl);letter-spacing:-.04em;transition:transform var(--d-1) var(--ease-out)}
  .mm-shell .mm-logo i{display:block;inline-size:.36em;block-size:.36em;background:var(--accent);transition:transform var(--d-1) var(--ease-out)}
  .mm-shell .mm-feat__body{display:grid;gap:8px}
  .mm-shell .mm-feat__title{font-size:var(--fs-lg);font-weight:450;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
  .mm-shell .mm-feat__meta{font-size:var(--fs-sm);color:var(--mm-muted)}
  .mm-shell .mm-arts{display:grid;gap:2px}
  .mm-shell .mm-art{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;padding:12px 16px;border-radius:var(--r-md);transition:background-color var(--d-1) ease}
  .mm-shell .mm-art > :not(.mm-arrow){grid-column:1}
  .mm-shell .mm-art .mm-arrow{grid-column:2;grid-row:1 / span 3;align-self:center;opacity:0;transform:translateX(-8px)}
  .mm-shell .mm-art__title{font-size:var(--fs-base);font-weight:450;line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}
  .mm-shell .mm-art__date{font-size:var(--fs-xs);color:var(--mm-muted)}
  .mm-shell .mm-themes ul{display:flex;flex-wrap:wrap;gap:8px}
  .mm-shell .mm-themes a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--mm-line);font-size:var(--fs-sm);transition:border-color var(--d-1) ease,background-color var(--d-1) ease}

  /* Survol (souris seulement) */
  @media (hover:hover) and (pointer:fine){
    .mm-item:hover .mm-chev{opacity:1}
    .mm-pill:hover{background:var(--on-night);color:var(--night)}
    .header.is-solid .mm-pill:hover,.header.is-open .mm-pill:hover{background:var(--mm-fg);color:var(--mm-bg)}
    .mm-shell .mm-svc:hover,.mm-shell .mm-work:not(.is-soon):hover,.mm-shell .mm-art:hover{background:var(--mm-hover)}
    .mm-shell .mm-svc:hover .mm-arrow,.mm-shell .mm-work:hover .mm-arrow,.mm-shell .mm-art:hover .mm-arrow,.mm-shell .mm-all:hover .mm-arrow{opacity:1;transform:none}
    .mm-shell .mm-svc:hover::before,.mm-shell .mm-work:not(.is-soon):hover::before,.mm-shell .mm-art:hover::before{opacity:1;transform:none}
    .mm-shell .mm-svc:hover .mm-n,.mm-shell .mm-work:not(.is-soon):hover .mm-n,.mm-shell .mm-svc:hover .mm-arrow,.mm-shell .mm-work:hover .mm-arrow,.mm-shell .mm-art:hover .mm-arrow{color:var(--mm-accent)}
    .mm-shell .mm-works:hover .mm-work:not(:hover){opacity:.45}
    .mm-shell .mm-offres a:hover,.mm-shell .mm-themes a:hover{border-color:var(--mm-accent);background:var(--mm-hover)}
    .mm-shell .mm-feat:hover .mm-logo{transform:scale(1.06)}
    .mm-shell .mm-feat:hover .mm-logo i{transform:rotate(90deg)}
    .mm-nav a:hover .roll > span,.mm-nav a:hover .roll::after{transform:translateY(-100%)}
  }
  .mm-nav a:focus-visible .roll > span,.mm-nav a:focus-visible .roll::after{transform:translateY(-100%)}
  .mm-shell .mm-svc:focus-visible .mm-arrow,.mm-shell .mm-work:focus-visible .mm-arrow,.mm-shell .mm-art:focus-visible .mm-arrow{opacity:1;transform:none;color:var(--mm-accent)}
  .mm-shell .mm-svc:focus-visible::before,.mm-shell .mm-work:focus-visible::before,.mm-shell .mm-art:focus-visible::before{opacity:1;transform:none}
  .mm-shell :focus-visible{outline-color:var(--accent)}

  /* ---------- Touches orange (27 oct. 2026) : carré du logo devant les titres de panneau, et au survol d'une ligne
     un petit carré, le numéro et la flèche en orange ---------- */
  .mm-shell .mm-label::before{content:"";align-self:center;inline-size:7px;block-size:7px;background:var(--mm-accent);flex:none}
  .mm-shell .mm-all .mm-arrow{color:var(--mm-accent)}
  .mm-shell .mm-svc,.mm-shell .mm-work,.mm-shell .mm-art{position:relative}
  .mm-shell .mm-svc::before,.mm-shell .mm-work::before,.mm-shell .mm-art::before{content:"";position:absolute;inset-inline-start:5px;inset-block-start:50%;inline-size:6px;block-size:6px;margin-block-start:-3px;
    background:var(--mm-accent);opacity:0;transform:translateX(-4px);transition:opacity var(--d-1) ease,transform var(--d-1) var(--ease-out);pointer-events:none}
  .mm-shell .mm-svc::before{inset-block-start:calc(14px + .62em)}
  .mm-shell .mm-n,.mm-shell .mm-arrow{transition:color var(--d-1) ease,opacity var(--d-1) ease,transform var(--d-1) var(--ease-out)}

  /* ---------- Mise en page « Centré » : au défilement, l'en-tête devient un îlot centré ; le panneau est centré, 1280 px au plus.
     Les liens sont au centre de la barre (logo à gauche, bouton à droite), en haut de page comme dans l'îlot ---------- */
  [data-mml="centre"] .header.is-pill{inset-inline:auto;left:50%;inline-size:min(1280px,calc(100vw - 2 * var(--inset)));translate:-50% 0;padding-inline:clamp(18px,1.6vw,26px)}
  [data-mml="centre"] .mm-shell{inset-inline:auto;left:50%;inline-size:min(1280px,calc(100vw - 2 * var(--inset)));translate:-50% 0;padding-inline:clamp(22px,2.2vw,34px)}
  [data-mml="centre"] .header{display:grid;grid-template-columns:minmax(0,1fr)}
  [data-mml="centre"] .header > .brand,[data-mml="centre"] .header > .mm-nav{grid-area:1 / 1}
  [data-mml="centre"] .header > .brand{justify-self:start;position:relative;z-index:1}
  [data-mml="centre"] .mm-nav{pointer-events:none}
  [data-mml="centre"] .nav .mm-list{flex:1;display:grid;grid-template-columns:minmax(0,1fr) repeat(5,auto) minmax(0,1fr);column-gap:clamp(14px,1.8vw,30px)}
  [data-mml="centre"] .mm-list > li,[data-mml="centre"] .mm-shell{pointer-events:auto}
  [data-mml="centre"] .mm-list > .mm-item:first-child{grid-column:2}
  [data-mml="centre"] .mm-list > .mm-cta{grid-column:7;justify-self:end;margin:0}

  /* ---------- Mise en page « Grand format » : pleine largeur, noms en très grand corps séparés par des filets (comme les listes du site) ;
     au survol, les autres lignes s'estompent ; l'aperçu de droite est plus grand ---------- */

  /* ---------- Mise en page « Cartes » : liste plus large, aperçu plus petit ; Actualités en deux cartes avec visuel ---------- */
  .mm-shell .mm-cards{display:none}
  .mm-shell .mm-ncard{display:grid;gap:10px;align-content:start}
  .mm-shell .mm-ncard__img{display:block;aspect-ratio:16 / 10;border-radius:var(--r-md);overflow:clip;background:var(--mm-card)}
  .mm-shell .mm-ncard__img img{display:block;inline-size:100%;block-size:100%;object-fit:cover;transition:transform var(--d-2) var(--ease-out)}
  .mm-shell .mm-ncard__title{font-size:var(--fs-base);font-weight:450;line-height:1.25;letter-spacing:-.015em;text-wrap:pretty}
  .mm-shell .mm-ncard__meta{font-size:var(--fs-xs);color:var(--mm-muted)}

  /* ---------- Sélecteur de variantes (bas à gauche) ---------- */
  .mmx__t{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2);padding-inline:10px 2px}
  .mmx__g{display:flex;gap:2px;padding-inline-start:6px;border-inline-start:1px solid var(--line-night)}
  @media (hover:hover) and (pointer:fine){
    .mm-shell .mm-ncard:hover .mm-ncard__img img{transform:scale(1.04)}
  }
}
@media (min-width:960px) and (max-width:1199px){
  .mm-shell .mm-main{grid-column:1 / span 8}
  .mm-shell .mm-aside{grid-column:9 / -1}
  .mm-shell .mm-svc{padding:12px}
  .mm-shell .mm-offres ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .header,.mm-shell,.mm-panel,.mm-panel [data-mm-i],.mm-shell .mm-ncard__img img,.nav .mm-list::after,.mm-shell .mm-arrow,.mm-shell .mm-logo,.mm-shell .mm-logo i{transform:none!important}
  .mm-chev svg{transition:none}
  .header.is-away:not(.is-open){transform:translateY(calc(-100% - var(--inset)))!important;transition:none}
  .nav .mm-list::after{transition:opacity var(--d-1) ease}
}

/* Actualités (27 oct., Jeremy) : deux articles en grand (couverture : fond de l'ambiance et logo) et, à droite, les autres articles en
   petites vignettes ; l'ensemble occupe toute la largeur, quelle que soit la mise en page du méga-menu */
@media (min-width:960px){
  .mm-shell .mm-panel .mm-main--news{grid-column:1 / span 8}
  .mm-shell .mm-panel .mm-aside--news{grid-column:9 / -1}
  .mm-shell .mm-main--news .mm-feat{display:none}
  .mm-shell .mm-main--news .mm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
  .mm-shell .mm-aside--news .mm-arts > li:first-child{display:block}
  .mm-shell .mm-aside--news .mm-arts{margin-inline:-12px}
  .mm-shell .mm-aside--news .mm-art{grid-template-columns:clamp(84px,7vw,112px) minmax(0,1fr) auto;column-gap:16px;padding:10px 12px;align-items:center}
  .mm-shell .mm-aside--news .mm-art > :not(.mm-arrow):not(.mm-art__img){grid-column:2}
  .mm-shell .mm-aside--news .mm-art .mm-arrow{grid-column:3}
  .mm-shell .mm-art__img{grid-column:1;grid-row:1 / span 3;display:grid;place-items:center;aspect-ratio:16 / 10;border-radius:calc(var(--r-md) - 4px);background:var(--mm-card);overflow:clip}
  .mm-shell .mm-art__img .mm-logo{font-size:var(--fs-2xs);gap:4px}
  .mm-shell .mm-art__title{font-size:var(--fs-sm);line-height:1.3}
  .mm-shell .mm-ncard__img .mm-logo{transition:transform var(--d-1) var(--ease-out)}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .mm-shell .mm-ncard:hover .mm-ncard__img .mm-logo,.mm-shell .mm-art:hover .mm-art__img .mm-logo{transform:scale(1.06)}
  .mm-shell .mm-ncard:hover .mm-logo i,.mm-shell .mm-art:hover .mm-logo i{transform:rotate(90deg)}
}

/* Sélecteur « Témoignages » (28 oct.) : seulement sur une page qui a la section des témoignages (l'accueil) */
html:not(:has(#voices)) .mmx__g[data-mmx="t"]{display:none}
/* ---------- Méga-menu « Nouveau sitemap » (27 oct. 2026) : même grammaire que le méga-menu actuel (labels mono, carré orange,
   numéros, flèche qui glisse, survol en aplat), adaptée aux trois panneaux Services, Projets, Secteurs ---------- */
html:not([data-mmn="v2"]) .mm-nav[data-nav="v2"],html:is([data-mmn="v2"],[data-mmn="v3"]) .mm-nav:not([data-nav]){display:none!important}
@media (min-width:960px){
  /* Services : quatre familles en colonnes, puis une bande de trois cartes */
  .mm-shell .mm2-cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
  .mm-shell .mm2-col{min-inline-size:0;border-inline-start:1px solid var(--mm-line);padding-inline-start:clamp(14px,1.4vw,22px)}
  .mm-shell .mm2-col:first-child{border-inline-start:0;padding-inline-start:0}
  .mm-shell .mm2-col .mm-sub{display:flex;gap:8px;margin-block-end:8px}
  .mm-shell .mm2-col .mm-sub .num{color:var(--mm-accent)}
  .mm-shell .mm2-links{display:grid;gap:2px;margin-inline:-10px}
  .mm-shell .mm2-link{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:3px;padding:9px 10px;border-radius:var(--r-md);transition:background-color var(--d-1) ease}
  .mm-shell .mm2-link .roll{grid-column:1;justify-self:start;font-size:var(--fs-md);font-weight:450;letter-spacing:-.02em}
  .mm-shell .mm2-link .mm-arrow{grid-column:2;grid-row:1;align-self:center;inline-size:16px;block-size:16px;opacity:0;transform:translateX(-6px)}
  .mm-shell .mm2-desc{grid-column:1 / -1;font-size:var(--fs-xs);line-height:1.4;color:var(--mm-muted);text-wrap:pretty}
  .mm-shell .mm2-subs{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px;margin-block-start:6px}
  .mm-shell .mm2-subs span,.mm-shell .mm2-chip{display:inline-flex;align-items:center;min-block-size:24px;padding:0 9px;border-radius:var(--r-pill);border:1px solid var(--mm-line);
    font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.01em;color:var(--mm-muted);white-space:nowrap;transition:border-color var(--d-1) ease,color var(--d-1) ease}
  .mm-shell .mm2-band{grid-column:1 / -1;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(10px,1vw,16px);border-block-start:1px solid var(--mm-line);padding-block-start:clamp(14px,1.4vw,20px)}
  .mm-shell .mm2-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--mm-line);background:var(--mm-card);
    transition:border-color var(--d-1) ease,background-color var(--d-1) ease}
  .mm-shell .mm2-card,.mm-shell .mm2-sect{text-align:start;align-items:stretch}
  .mm-shell .mm2-card .mm-sub{margin:0}
  .mm-shell .mm2-chips{justify-content:flex-start}
  .mm-shell .mm2-card__t{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-md);font-weight:450;letter-spacing:-.02em}
  .mm-shell .mm2-card__t .mm-arrow{inline-size:18px;block-size:18px;color:var(--mm-accent)}
  .mm-shell .mm2-chips{display:flex;flex-wrap:wrap;gap:4px}
  .mm-shell .mm2-card--cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .mm-shell .mm2-card--cta .mm-sub,.mm-shell .mm2-card--cta .mm2-desc{color:var(--on-accent);opacity:.75}
  .mm-shell .mm2-card--cta .mm-arrow{color:var(--on-accent)}
  /* Projets : la liste, puis les filtres ; à droite l'aperçu et deux cartes */
  .mm-shell #mm2-projets .mm-work__type em{font-style:normal;color:var(--mm-accent)}
  .mm-shell .mm2-filtres{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-block-start:1px solid var(--mm-line);padding-block-start:clamp(12px,1.2vw,16px)}
  .mm-shell .mm2-filtres .mm-sub{margin:0 8px 0 0}
  .mm-shell .mm2-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mm-shell .mm2-cover{display:grid;place-items:center;background:var(--mm-card)}
  /* Secteurs : cinq cartes de même hauteur */
  .mm-shell .mm2-sects{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
  .mm-shell .mm2-sect{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;row-gap:8px;block-size:100%;padding:16px 18px 18px;
    border-radius:var(--r-md);border:1px solid var(--mm-line);background:var(--mm-card);transition:border-color var(--d-1) ease,background-color var(--d-1) ease}
  .mm-shell .mm2-sect .mm-n{grid-column:1 / -1;color:var(--mm-accent);padding:0}
  .mm-shell .mm2-sect .roll{justify-self:start;font-size:var(--fs-lg);font-weight:450;letter-spacing:-.02em}
  .mm-shell .mm2-sect .mm-arrow{align-self:center;inline-size:18px;block-size:18px;opacity:0;transform:translateX(-6px)}
  .mm-shell .mm2-sect .mm2-desc{min-block-size:2.8em}
  .mm-shell .mm2-proof{grid-column:1 / -1;display:grid;gap:6px;margin-block-start:6px;padding-block-start:10px;border-block-start:1px solid var(--mm-line)}
  .mm-shell .mm2-proof .mm-sub{margin:0}
  .mm-shell .mm2-note{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--mm-muted)}
  .mm-shell .mm2-note a{color:var(--mm-fg)}
  .mm-nav--v2 [data-soon]{cursor:default}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .mm-shell .mm2-link:not([data-soon]):hover,.mm-shell .mm2-link[data-soon]:hover{background:var(--mm-hover)}
  .mm-shell .mm2-link:hover .mm-arrow,.mm-shell .mm2-sect:hover .mm-arrow{opacity:1;transform:none;color:var(--mm-accent)}
  .mm-shell .mm2-link:hover .mm2-subs span{border-color:var(--mm-accent);color:var(--mm-fg)}
  .mm-shell .mm2-card:hover,.mm-shell .mm2-sect:hover{border-color:var(--mm-accent)}
  .mm-shell .mm2-card--cta:hover{background:var(--mm-fg);border-color:var(--mm-fg);color:var(--mm-bg)}
  .mm-shell .mm2-card--cta:hover .mm-sub,.mm-shell .mm2-card--cta:hover .mm2-desc,.mm-shell .mm2-card--cta:hover .mm-arrow{color:var(--mm-bg)}
  .mm-shell .mm2-sect:hover .mm2-chip,.mm-shell .mm2-card:hover .mm2-chip{border-color:var(--mm-accent);color:var(--mm-fg)}
  .mm-shell a.mm2-chip:hover{border-color:var(--mm-accent);color:var(--mm-fg)}
}
@media (min-width:960px) and (max-width:1199px){
  .mm-shell .mm2-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .mm-shell .mm2-col:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .mm-shell .mm2-sects{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 27 oct. (retours de Jeremy) : familles plus lisibles, cartes du bas en aplat, et proposition « Sitemap + visuels » ---------- */
@media (min-width:960px){
  /* Titre de famille : numéro dans un carré orange, nom en capitales plus grand, nombre de services, filet dessous */
  .mm-shell .mm2-fam{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-block-end:10px;border-block-end:1px solid var(--mm-line);
    font-family:var(--mono);font-size:var(--fs-xs);line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--mm-fg)}
  .mm-shell .mm2-fam__n{display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:var(--r-sm);background:var(--mm-accent);color:var(--on-accent);font-size:var(--fs-2xs);letter-spacing:0}
  .mm-shell .mm2-fam__c{margin-inline-start:auto;color:var(--mm-muted);font-size:var(--fs-2xs)}
  /* Cartes du bas : des aplats francs, lisibles sur les deux couleurs du méga-menu */
  .mm-shell .mm2-band .mm2-card{border:0}
  .mm-shell .mm2-band .mm2-card:nth-child(1){background:var(--white);color:var(--ink)}
  .mm-shell .mm2-band .mm2-card:nth-child(2){background:var(--grey);color:var(--ink)}
  :root[data-mmc="clair"] .mm-shell .mm2-band .mm2-card:nth-child(1){background:var(--night);color:var(--on-night)}
  .mm-shell .mm2-band .mm2-card:not(.mm2-card--cta) .mm-sub,.mm-shell .mm2-band .mm2-card:not(.mm2-card--cta) .mm2-desc{color:currentColor;opacity:.62}
  .mm-shell .mm2-band .mm2-card .mm2-chip{border-color:currentColor;color:inherit;opacity:.8}
  .mm-shell .mm2-band .mm2-card .mm2-card__t{font-size:var(--fs-lg)}
  .mm-shell .mm2-band .mm2-card .mm2-card__t .mm-arrow{color:currentColor}
  /* Sitemap + visuels : les quatre familles à gauche, l'aperçu du service survolé à droite */
  #mm3-services .mm2-cols{grid-column:1 / span 8;column-gap:clamp(16px,1.6vw,26px)}
  #mm3-services .mm2-col{padding-inline-start:clamp(12px,1.2vw,18px)}
  #mm3-services .mm2-col:first-child{padding-inline-start:0}
  #mm3-services .mm2-link{padding:7px 10px}
  #mm3-services .mm2-link .mm2-desc,#mm3-services .mm2-subs{display:none}
  #mm3-services .mm2-link .roll{font-size:var(--fs-sm)}
  #mm3-services .mm3-aside{grid-column:9 / -1;display:grid;gap:12px;align-content:start;min-inline-size:0}
  #mm3-services .mm-cap b{font-weight:500;color:var(--mm-fg)}
  #mm3-services .mm2-link[data-mm-preview]:focus-visible,#mm3-services .mm2-link.is-cur{background:var(--mm-hover)}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .mm-shell .mm2-band .mm2-card:not(.mm2-card--cta):hover{filter:brightness(.96)}
  :root[data-mmc="clair"] .mm-shell .mm2-band .mm2-card:nth-child(1):hover{filter:brightness(1.25)}
}
@media (min-width:960px) and (max-width:1199px){
  #mm3-services .mm2-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 27 oct. (nuit) : Secteurs de « Sitemap + visuels » en nuancier d'aplats ---------- */
@media (min-width:960px){
  #mm3-secteurs .mm3-sects{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.8vw,12px)}
  #mm3-secteurs .mm3-sects > li{display:flex}
  /* Sur le méga-menu sombre : du plus clair au plus foncé ; sur le clair, l'inverse */
  #mm3-secteurs li:nth-child(1){--t:var(--white);--tc:var(--ink)}
  #mm3-secteurs li:nth-child(2){--t:var(--grey);--tc:var(--ink)}
  #mm3-secteurs li:nth-child(3){--t:#A9A9A4;--tc:var(--ink)}
  #mm3-secteurs li:nth-child(4){--t:#3A3A37;--tc:var(--on-night)}
  #mm3-secteurs li:nth-child(5){--t:#262624;--tc:var(--on-night)}
  #mm3-secteurs li:nth-child(6){--t:var(--accent);--tc:var(--on-accent)}
  :root[data-mmc="clair"] #mm3-secteurs li:nth-child(1){--t:var(--night);--tc:var(--on-night)}
  :root[data-mmc="clair"] #mm3-secteurs li:nth-child(2){--t:#2B2B29;--tc:var(--on-night)}
  :root[data-mmc="clair"] #mm3-secteurs li:nth-child(3){--t:#8F8F8A;--tc:var(--ink)}
  :root[data-mmc="clair"] #mm3-secteurs li:nth-child(4){--t:#D6D6D1;--tc:var(--ink)}
  :root[data-mmc="clair"] #mm3-secteurs li:nth-child(5){--t:#E7E7E3;--tc:var(--ink)}
  #mm3-secteurs .mm3-sect{display:flex;flex-direction:column;inline-size:100%;min-block-size:clamp(180px,13.5vw,206px);padding:clamp(14px,1.2vw,18px);
    border-radius:var(--r-md);background:var(--t);color:var(--tc);text-align:start;align-items:stretch;justify-content:flex-start;transition:transform var(--d-1) var(--ease-out),filter var(--d-1) ease}
  #mm3-secteurs .mm3-sect__top{display:flex;align-items:center;justify-content:space-between}
  #mm3-secteurs .mm3-sect__top .mm-arrow{inline-size:18px;block-size:18px;color:currentColor;opacity:.5;transition:transform var(--d-1) var(--ease-out),opacity var(--d-1) ease}
  #mm3-secteurs .mm3-sect__body{display:grid;gap:6px;padding-block-start:clamp(28px,2.6vw,40px)}
  #mm3-secteurs .mm3-sect__t{justify-self:start;font-size:var(--fs-lg);font-weight:450;line-height:1.1;letter-spacing:-.025em}
  #mm3-secteurs .mm2-desc,#mm3-secteurs .mm-sub{margin:0;color:currentColor;opacity:.74}
  #mm3-secteurs .mm2-desc{font-size:var(--fs-xs);line-height:1.35;text-wrap:pretty}
  #mm3-secteurs .mm3-sect__body .mm2-desc{padding-block-end:4px}
  #mm3-secteurs .mm3-sect__refs{display:grid;gap:7px;margin-block-start:auto;padding-block-start:11px;border-block-start:1px solid color-mix(in srgb,currentColor 22%,transparent)}
  #mm3-secteurs .mm2-chips{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px}
  #mm3-secteurs .mm2-chip{display:inline-flex;align-items:center;min-block-size:24px;padding:0 9px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--r-pill);font-family:var(--mono);font-size:var(--fs-2xs);color:inherit}
  /* Carte d'appel : carré noir, chiffre orange */
  #mm3-secteurs .mm3-sect--cta .mm2-fam__n{background:var(--ink);color:var(--accent);font-size:var(--fs-sm)}
  #mm3-secteurs .mm3-sect--cta .mm-arrow{opacity:1}
  #mm3-secteurs .mm3-sect--cta .mm-sub{opacity:.72}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  #mm3-secteurs .mm3-sect:hover{transform:translateY(-4px)}
  #mm3-secteurs .mm3-sect:hover .mm3-sect__top .mm-arrow{opacity:1;transform:translateX(3px)}
  #mm3-secteurs .mm3-sect--cta:hover{filter:brightness(1.06)}
}
@media (min-width:960px) and (max-width:1199px){
  #mm3-secteurs .mm3-sects{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  #mm3-secteurs .mm3-sect,#mm3-secteurs .mm3-sect__top .mm-arrow{transition:none}
  #mm3-secteurs .mm3-sect:hover{transform:none}
}

/* ---------- 27 oct. (validation de Jeremy) : mise en page Centré par défaut ; avec le nouveau sitemap, l'îlot et le panneau s'élargissent
   à l'ouverture du méga-menu (1520 px au plus au lieu de 1280) pour laisser respirer les quatre familles ---------- */
@media (min-width:960px){
  html:is([data-mmn="v2"],[data-mmn="v3"])[data-mml="centre"] .header.is-pill{transition:transform .32s var(--ease-out),opacity .12s ease,inline-size .36s var(--ease-out)}
  html:is([data-mmn="v2"],[data-mmn="v3"])[data-mml="centre"] .header.is-pill.is-open,html:is([data-mmn="v2"],[data-mmn="v3"])[data-mml="centre"] .mm-shell{inline-size:min(1520px,calc(100vw - 2 * var(--inset)))}
}
@media (prefers-reduced-motion:reduce){
  html:is([data-mmn="v2"],[data-mmn="v3"])[data-mml="centre"] .header.is-pill{transition:none}
}

/* ---------- 27 oct. : onglet Actualités dans le nouveau sitemap ; la barre centrée compte six entrées au lieu de cinq ---------- */
@media (min-width:960px){
  [data-mml="centre"] .mm-nav[data-nav] .mm-list{grid-template-columns:minmax(0,1fr) repeat(6,auto) minmax(0,1fr)}
  [data-mml="centre"] .mm-nav[data-nav] .mm-list > .mm-cta{grid-column:8}
}

/* ---------- 27 oct. : Projets allégés (sans Avis clients, Clients ni filtre) ; l'aperçu s'étire sur toute la hauteur de la liste ---------- */
@media (min-width:960px){
  .mm-shell .mm2-aside--projets{align-self:stretch;grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
  .mm-shell .mm2-aside--projets .mm-preview{aspect-ratio:auto;min-block-size:clamp(300px,24vw,380px);block-size:100%}
}

/* ---------- 27 oct. : Secteurs du « Nouveau sitemap » (v2 seulement) : cinq cartes noires, orange au survol ---------- */
@media (min-width:960px){
  #mm2-secteurs .mm2-sect{border:0;background:var(--night);color:var(--on-night);transition:background-color var(--d-1) ease,color var(--d-1) ease}
  #mm2-secteurs .mm2-sect .mm2-desc,#mm2-secteurs .mm2-sect .mm-sub{color:currentColor;opacity:.68}
  #mm2-secteurs .mm2-proof{border-block-start-color:rgb(242 242 239 / .16)}
  #mm2-secteurs .mm2-chip{border-color:rgb(242 242 239 / .28);color:inherit}
  #mm2-secteurs .mm2-sect .mm-arrow{color:currentColor}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  #mm2-secteurs .mm2-sect:hover,#mm2-secteurs .mm2-sect:focus-visible{background:var(--accent);color:var(--on-accent)}
  #mm2-secteurs .mm2-sect:hover .mm-n,#mm2-secteurs .mm2-sect:hover .mm-arrow{color:var(--on-accent)}
  #mm2-secteurs .mm2-sect:hover .mm2-proof{border-block-start-color:rgb(13 13 13 / .2)}
  #mm2-secteurs .mm2-sect:hover .mm2-desc,#mm2-secteurs .mm2-sect:hover .mm-sub{opacity:.8}
  #mm2-secteurs .mm2-sect:hover .mm2-chip{border-color:rgb(13 13 13 / .35);color:var(--on-accent)}
}

/* ---------- 27 oct. : pied de page « Plan du site » (option Pied de page) : même design, cinq colonnes au lieu de trois ---------- */
.footer__cols.footer__plan{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
.footer__plan [data-soon]{cursor:default}
@media (min-width:768px){.footer__cols.footer__plan{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.footer__cols.footer__plan{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---------- Menu mobile du nouveau sitemap : familles de services en accordéons ---------- */
.menu__fams{display:grid}
.menu__fam{border-block-start:1px solid rgb(13 13 13 / .22)}
.menu__fam:last-child{border-block-end:1px solid rgb(13 13 13 / .22)}
.menu__fam summary{display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase}   /* même approche que « Services » et « Secteurs » */
.menu__fam summary::-webkit-details-marker{display:none}
.menu__fam-n{display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:var(--r-sm);background:var(--ink);color:var(--accent);font-size:var(--fs-2xs);letter-spacing:0;flex:none}   /* fond du menu en orange : carré noir, chiffre orange */
.menu__fam-t{flex:1}
.menu__fam-c{opacity:.55}
.menu__fam-chev{inline-size:10px;block-size:6px;transition:transform var(--d-1) var(--ease-out)}
.menu__fam[open] .menu__fam-chev{transform:rotate(180deg)}
.menu__fam ul{padding-block-end:10px}
.menu__fam li{border:0!important}
.menu__fam a{font-size:var(--fs-h3)!important;padding-block:6px!important;min-height:40px}   /* même taille que les secteurs (22 px sur mobile), retour de Sacha validé par Jeremy, 12 nov. 2026 */
.menu__svc-head--sect{margin-block-start:clamp(24px,4vh,36px)}
.menu a[data-soon]{cursor:default}
.menu a[data-soon] svg{opacity:.35}
@media (prefers-reduced-motion:reduce){.menu__fam-chev{transition:none}}
/* Menu mobile plus long (accordéons) : une bande orange collée en haut, le contenu défile dessous ;
   le bouton Menu de l'en-tête se cache tant que le menu est ouvert (il chevauchait Fermer).
   12 nov. 2026 : la bande porte le logo à gauche (même place que dans l'en-tête) et « Fermer » à droite. */
@media (max-width:959px){
  .menu.menu{padding-block-start:0}
  .menu .menu__bar{position:sticky;inset-block-start:0;z-index:2;justify-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:16px;box-sizing:border-box;min-height:86px;
    margin-inline:calc(-1 * var(--gutter));padding:26px var(--gutter) 16px;background:var(--accent);
    margin-block-end:calc(clamp(88px,12vh,130px) - 86px - 32px)}   /* bande de 86 px : logo et « Fermer » à la hauteur du logo de l'en-tête (26 à 70 px) */
  .menu .menu__bar > .menu__brand,.menu .menu__bar > .menu__close{position:static}
  body:has(.menu[data-open="true"]) .header .menu-toggle{opacity:0;pointer-events:none}
}

/* ---------- Recette du 28 oct. ----------
   Familles de services sans numéro ni nombre : il reste le carré orange, à la taille de celui du logo (centré sur le texte) */
@media (min-width:960px){
  .mm-shell .mm2-fam .mm2-fam__n{inline-size:9px;block-size:9px;border-radius:0}   /* 9 px comme le carré du logo (12 nov. 2026) */
  /* Secteurs de « Nouveau sitemap » : cadres gris clair et texte noir (Jeremy), orange au survol comme avant ; sans numéro ni références */
  #mm2-secteurs .mm2-sect{background:var(--grey);color:var(--ink)}
  #mm2-secteurs .mm2-sect .mm2-desc{color:var(--ink-2);opacity:1}
  #mm2-secteurs .mm2-sect:hover .mm2-desc,#mm2-secteurs .mm2-sect:focus-visible .mm2-desc{color:var(--on-accent);opacity:.8}
  /* Cartes moins écrasées (Jeremy, 28 oct.) : même hauteur que les cartes de « Sitemap + visuels », le nom en haut, la description en bas */
  #mm2-secteurs .mm2-sect{grid-template-rows:auto 1fr;min-block-size:clamp(180px,13.5vw,206px);padding:clamp(16px,1.3vw,20px)}
  #mm2-secteurs .mm2-sect .roll{font-size:var(--fs-lg);line-height:1.1;letter-spacing:-.025em}
  #mm2-secteurs .mm2-sect .mm2-desc{grid-column:1 / -1;align-self:end;min-block-size:2.7em;font-size:var(--fs-xs);line-height:1.35;text-wrap:pretty}
  /* « Sitemap + visuels » : les cinq secteurs en noir, la carte « Parlons de votre projet » reste orange (Jeremy, 28 oct.) */
  #mm3-secteurs li:not(:last-child),:root[data-mmc="clair"] #mm3-secteurs li:not(:last-child){--t:var(--night);--tc:var(--on-night)}
}
.menu__fam-n{inline-size:9px;block-size:9px;border-radius:0}   /* 9 px comme le carré du logo (repasse du 12 nov. 2026) */

/* ---------- 28 oct. (Jeremy) : en-tête plus fluide au défilement ----------
   Transparent sur le hero, fond blanc seulement au survol (menu ouvert) ; une fois le hero dépassé, il devient l'îlot centré.
   La barre et l'îlot ont la même géométrie (centrés, translate -50 %) : seule la largeur change, en continu, au lieu d'un fondu-coupure.
   Sortie et retour au défilement : glissement plus long et plus doux ; fond et couleur du texte en fondu. */
@media (min-width:960px){
  html[data-mml="centre"][data-mmn] .header.header{inset-inline:auto;left:50%;translate:-50% 0;inline-size:calc(100% - 2 * var(--inset));
    transition:transform .42s var(--ease-out),inline-size var(--d-2) var(--ease-out),padding var(--d-2) var(--ease-out),color var(--d-1) ease,opacity var(--d-1) ease}
  html[data-mml="centre"][data-mmn] .header.header.is-pill{inline-size:min(1280px,calc(100% - 2 * var(--inset)))}
  html:is([data-mmn="v2"],[data-mmn="v3"])[data-mml="centre"] .header.header.is-pill.is-open{inline-size:min(1520px,calc(100% - 2 * var(--inset)))}
  html[data-mml="centre"][data-mmn] .header.header.is-away:not(.is-open){transition:transform .28s var(--ease-out),inline-size var(--d-2) var(--ease-out),padding var(--d-2) var(--ease-out),color var(--d-1) ease}
  .header::before{transition:opacity .35s ease}
}
@media (min-width:960px) and (prefers-reduced-motion:reduce){
  html[data-mml="centre"][data-mmn] .header.header,html[data-mml="centre"][data-mmn] .header.header.is-away:not(.is-open){transition:color var(--d-1) ease}
  .header::before{transition:opacity var(--d-1) ease}
}

/* ---------- 28 oct. (Jeremy) : projets à venir plus discrets, carte d'appel des secteurs sur deux lignes ---------- */
@media (min-width:960px){
  .mm-shell .mm-work.is-soon .mm-work__name,.mm-shell .mm-work.is-soon .mm-n{color:var(--mm-muted);opacity:.55}
  .mm-shell .mm-work.is-soon .mm-work__type{opacity:.75}
  .mm-shell .mm-work.is-soon .mm-work__type em{font-style:normal;color:var(--mm-muted)}
  #mm3-secteurs .mm3-sect--cta .mm3-sect__t{display:block}
}

/* 29 oct. : il ne reste que le choix des témoignages, sur l'accueil ; ailleurs, plus de sélecteur */
/* ==================================================================
   Repasse globale du 29 oct. 2026 (demande de Jeremy : « en responsive, ça manque d'aération, c'est un peu collé »).
   Chargée sur toutes les pages, après les styles de page (megamenu.py). Seuls l'espacement et la mise en page mobile changent.
================================================================== */

/* Marges latérales : 20 px au lieu de 16 sur mobile, pour que le texte respire le long des bords */
@media (max-width:767.98px){
  :root{--gutter:20px}
}

/* Hero des pages : sur mobile, il prend la hauteur de son contenu au lieu de tout l'écran.
   Avant, une page au texte court (Projets) gardait un grand vide au-dessus du titre. */
@media (max-width:767.98px){
  .phero{min-block-size:0}
  .phero__in{grid-template-rows:auto auto;row-gap:clamp(36px,10vw,48px);padding-block-start:112px}
  .phero__grid{gap:36px;align-items:start}
  .phero__copy{gap:22px}
  .phero__cta{gap:12px}
  .phero h1,.hero h1{text-wrap:balance}
}

/* Fil d'Ariane : chaque étape reste sur une ligne, et l'ensemble passe à la ligne entre deux étapes
   (sur mobile, « Services / Votre projet / Création de site » se cassait mot à mot, et débordait de 6 px sur la page Webflow) */
.crumb{flex-wrap:wrap;row-gap:6px;min-inline-size:0;max-inline-size:100%}
.crumb > *{white-space:nowrap}

/* Pied de page : plus d'air entre l'appel, les boutons et le plan du site */
@media (max-width:767.98px){
  .footer{gap:48px}
  .footer__links{gap:12px}
  .footer__cols.footer__plan{row-gap:36px}
  .footer__cols h3{margin-block-end:14px}
  .footer__legal{gap:12px 24px}
}

/* Titres et textes trop serrés sur mobile */
@media (max-width:767.98px){
  .next li{row-gap:10px}                                /* Contact : étapes */
  .flow li{gap:12px}                                    /* Pages Service : déroulé */
  .svc .case__meta{gap:10px}                            /* Pages Secteur : services recommandés */
  .work__meta{row-gap:8px}                              /* Projets : nom et mention */
  .pace__grid li h3{margin-block-end:4px}               /* Méthode : rythme */
  .faq .q summary{gap:20px}
  .why__card{row-gap:14px}
  .incl__list li{gap:12px 24px}
  .tags{gap:8px}
}

/* Assets UI dans une grille : ils ne doivent jamais imposer leur largeur (à 1024 px, le bloc visuel des pages Service et Secteur
   débordait de 100 px à droite) */
.intro > *,.trio > *{min-inline-size:0}
.intro__media,.svc__media,.case__media{min-inline-size:0;max-inline-size:100%}
.intro__media .uix,.svc__media .uix{max-inline-size:100%}

/* Titres de cartes sur deux lignes fixes avec l'effet de roulement au survol (carte « Parlons de votre projet » des secteurs) :
   deux copies empilées du titre, qui montent ensemble ; la copie a les mêmes retours à la ligne que l'original */
.roll2{position:relative;display:block;overflow:hidden}
.roll2 > span{display:block;transition:transform var(--d-2) var(--ease-out)}
.roll2 > span + span{position:absolute;inset:100% 0 auto 0}
@media (hover:hover) and (pointer:fine){
  a:hover .roll2 > span,a:focus-visible .roll2 > span{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){ .roll2 > span{transition:none} }

/* Clavier (recette complète du 29 oct.) : un élément qui reçoit le focus au clavier avant d'être apparu au défilement s'affiche tout de suite
   (la tabulation s'arrêtait sur « Voir les projets » ou la pastille « Le studio » encore transparents). L'animation reprend ensuite normalement. */
[data-fade]:focus-visible,[data-fade]:has(:focus-visible){opacity:1!important;visibility:visible!important}

/* Roulement au survol (recette complète du 29 oct.) : la copie cachée sous le libellé est décalée de .3em de plus. Sur une majuscule accentuée
   (« Énergie et industrie »), son accent dépassait dans la zone visible et laissait un point sous le titre. Le décalage est dans la marge
   intérieure de la copie, donc le translateY(-100%) du survol la pose toujours exactement à la place du libellé. */
.roll::after{padding-block-start:.3em}
.roll2 > span + span{padding-block-start:.3em}

/* En-tête entre 960 et 1099 px (recette complète du 29 oct.) : le menu complet y entre juste, et « Réserver un appel » arrivait à 2 px
   d'« Actualités » à 960 px. Écarts entre les liens et marges du bouton un peu réduits sur cette plage seulement. */
@media (min-width:960px) and (max-width:1099.98px){
  html[data-mml="centre"] .nav .mm-list{column-gap:11px}
  html[data-mml="centre"] .header .mm-pill{padding-inline:14px}
}

/* Accueil, liste des expertises, version bureau (recette complète du 29 oct.) : au-delà de 1440 px, les lignes s'étirent à la hauteur du visuel voisin,
   le mot restait calé en haut alors que le carré orange et la flèche sont centrés sur la ligne (à 2560 px, 23 px d'écart).
   (à 1024 px, 5 px d'écart). Le mot et son numéro sont maintenant centrés eux aussi : carré, mot et flèche sur la même ligne médiane, comme le logo. */
@media (min-width:960px){
  #svc .svc__row{align-items:center}
  #svc .svc__row sup{align-self:center;transform:translateY(-.55em)}
  #svc .svc__row[aria-expanded="true"] sup{transform:translate(clamp(22px,2.2vw,34px),-.55em)}
}

/* Pastilles des comparatifs (carte « Comparer les technos ») : ce sont des liens, ça doit se voir (retour de Jeremy, 10 nov. 2026).
   Même langage que les pilules du site : au survol, la pastille se remplit à la couleur du texte et le texte roule. */
@media (min-width:960px){
  .mm-shell .mm2-band .mm2-card--liens .mm2-chip{min-block-size:32px;padding:0 11px;opacity:1;border-color:color-mix(in srgb,currentColor 55%,transparent);color:inherit;
    transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease}
  .mm-shell .mm2-card--liens .mm2-chip .roll{line-height:1.25}
  .mm-shell .mm2-band .mm2-card--liens .mm2-chip:hover,.mm-shell .mm2-band .mm2-card--liens .mm2-chip:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--white)}
  :root[data-mmc="clair"] .mm-shell .mm2-band .mm2-card--liens .mm2-chip:hover,:root[data-mmc="clair"] .mm-shell .mm2-band .mm2-card--liens .mm2-chip:focus-visible{background:var(--on-night);border-color:var(--on-night);color:var(--night)}
  .mm-shell .mm2-card--liens .mm2-chip:focus-visible > .roll > span,.mm-shell .mm2-card--liens .mm2-chip:focus-visible > .roll::after{transform:translateY(-100%)}
  .mm-shell .mm2-card--liens .mm2-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
@media (prefers-reduced-motion: reduce){ .mm-shell .mm2-card--liens .mm2-chip{transition:none} }

/* Actualités du méga-menu : vignettes braise (même composant que la page Actualités), posées sur toute la surface de l'emplacement.
   « .mm-shell .cover » neutralise les règles .cover propres aux études (format 4/3, fond gris). */
.mm-shell .mm-feat__cover,.mm-shell .mm-ncard__img,.mm-shell .mm-art__img{position:relative;isolation:isolate}
.mm-shell .cover--braise{position:absolute;inset:0;aspect-ratio:auto;border-radius:inherit}

/* Articles du panneau Actualités : pas de carré au survol, la vignette porte déjà le carré du logo (retour de Jeremy, 10 nov. 2026) */
.mm-shell .mm-art::before{content:none}

/* Sans numérotation (12 nov. 2026) : dans les cartes Secteurs, la pastille reste un petit carré orange, comme devant les familles */
@media (min-width:960px){ #mm3-secteurs .mm3-sect__top .mm2-fam__n:empty{inline-size:10px;block-size:10px;border-radius:0} }