/* ===========================================================================
   MÉGA-MENU — barre compacte flottante (Yoni S65)
   Réf. Sanity échantillonnée : aplat #0b0b0b, pastille active #212121.
   Écarts assumés et demandés : barre COMPACTE centrée · VERRE au lieu de
   l'aplat · ANGLES DROITS (DA ILEV, S63) · dernière colonne en emphase.
   L'ouverture au survol est pilotée en JS (délai de fermeture) : le CSS pur
   ne mémorise pas quel onglet était survolé, donc la diagonale refermait tout.
   =========================================================================== */
.mm{position:fixed;top:20px;left:0;right:0;z-index:200;display:flex;justify-content:center;
  align-items:flex-start;pointer-events:none;font-family:'Inter',sans-serif}
.mm > *{pointer-events:auto}
/* LOGO — les deux versions sont posées, une seule est visible.
   Règle Yoni (S65) : bleu dès que le fond le permet, blanc sur image ou fond
   sombre. La bascule est pilotée par la LUMINANCE mesurée sous la barre (JS),
   jamais par une liste de pages à tenir. */
.mm__logo{display:block;height:32px;width:auto;transition:opacity .3s ease}
.mm__logo--blanc{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
/* fond sombre ou image : on bascule sur le blanc */
.mm--dark .mm__logo--bleu{opacity:0}
.mm--dark .mm__logo--blanc{opacity:1}
@media(max-width:1000px){ .mm__logo{height:26px} }

/* le mot ILEV a laissé la place au logo : plus de mix-blend-mode, la lisibilité
   vient du choix de la version (bleu/blanc), pas d'un effet de fusion. */
.mm__brand{position:absolute;left:44px;top:9px;display:inline-flex;align-items:center;
  line-height:0;text-decoration:none}
.mm__dock{position:relative;display:flex;flex-direction:column;align-items:center}

/* ── la pilule ── */
.mm__bar{display:flex;align-items:center;gap:2px;padding:6px;
  border-radius:14px;
  /* verre minimaliste : un aplat, un flou, une bordure fine. Le dégradé et le double
     liseré essayés avant chargeaient l'objet sans rien apporter (Yoni S65). */
  background:rgba(12,12,11,.66);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none}   /* ombre portée retirée (demande Yoni S66) : la barre tient par son verre et son contour */
.mm__tab{position:relative;border-radius:9px;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.72);text-decoration:none;padding:10px 16px;
  white-space:nowrap;transition:background .3s ease,color .3s ease}
.mm__tab:hover,.mm__tab.is-active{background:rgba(255,255,255,.13);color:#fff}
/* pont invisible : il appartient à l'onglet, le survol ne se rompt pas en descendant */
.mm__tab::after{content:"";position:absolute;top:100%;left:-8px;right:-8px;height:26px}
.mm__sep{width:1px;height:18px;background:rgba(255,255,255,.16);margin:0 6px}
.mm__cta{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  background:#fff;color:#0b0b0a;text-decoration:none;padding:10px 18px;border-radius:9px;white-space:nowrap;
  transition:opacity .3s}
.mm__cta:hover{opacity:.86}

/* ── recherche ── */
.mm__search{display:flex;align-items:center;gap:0;padding:0 11px;margin-left:4px;height:36px;
  border-radius:9px;cursor:text;transition:background .3s}
.mm__search:hover,.mm__search:focus-within{background:rgba(255,255,255,.10);gap:9px}
.mm__kbd{opacity:0;width:0;padding:0;border:0;overflow:hidden;transition:opacity .25s}
.mm__search:focus-within .mm__kbd{opacity:1;width:auto;padding:3px 6px;border:1px solid rgba(255,255,255,.16)}
.mm__search svg{width:15px;height:15px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:1.6;flex:0 0 auto}
.mm__input{background:none;border:0;outline:none;color:#fff;width:118px;
  font-family:'Inter',sans-serif;font-size:13px;letter-spacing:0;transition:width .35s ease}
.mm__input::placeholder{color:rgba(255,255,255,.44)}
.mm__input:focus{width:184px}


/* ═══════════════════════════════════════════════════════════════════════════
   PANNEAUX — réécrits d'un bloc (S65). Les retouches successives avaient laissé
   des règles qui se contredisaient. Trois principes, et rien d'autre :
   1. Le PIED EST DANS LA GRILLE (colonnes de texte seulement). Frère de la
      grille, il l'empêchait de descendre : la photo s'arrêtait 74px trop haut.
   2. La PHOTO occupe toutes les rangées (grid-row 1/-1) et déborde du padding :
      elle touche le haut, le bas et la droite du panneau.
   3. Toutes les colonnes de texte font la MÊME largeur (1fr).
   ═══════════════════════════════════════════════════════════════════════════ */
.mm__panel{position:absolute;top:calc(100% + 14px);
  left:50%;margin-left:max(-620px,calc(-50vw + 20px));
  width:min(1240px,calc(100vw - 40px));padding:34px 36px 22px;border-radius:12px;
  background:rgba(12,12,11,.78);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:none;   /* idem panneau : plus d ombre portée */
  display:none;opacity:0;
  /* A11 : le dépli part de l'onglet survolé (--mmo posé par le JS) */
  transform-origin:var(--mmo,50%) 0;
  transition:opacity .26s ease,transform .46s cubic-bezier(.16,1,.3,1),
             display .26s allow-discrete}
.mm__panel.is-open{display:block;opacity:1;transform:none}
@starting-style{ .mm__panel.is-open{opacity:0;transform:translateY(-7px) scale(.982)} }
/* changement d'onglet : le cadre reste, il ne se rejoue pas */
.mm--swap .mm__panel{transition:none}

/* gouttière resserrée de 34 à 24 : « Feuille de route & priorisation »
   dépassait la colonne de 0 px et repassait sur deux lignes (mesuré S66) */
.mm__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px;align-items:start;
  padding-right:calc(400px + 34px - 36px)}   /* la place de la photo, moins le padding du panneau */

.mm__panel--search{width:min(640px,calc(100vw - 40px));
  margin-left:max(-320px,calc(-50vw + 20px));padding:26px 28px 22px}
.mm__panel--search .mm__cols{padding-right:0}

/* La photo est ANCRÉE AU PANNEAU, pas placée dans la grille.
   En grid, align-self:stretch fixe sa hauteur à la zone de rangées : les marges
   négatives ne l'étendaient pas et il restait 36px de vide en bas (mesuré S65).
   En absolu sur les quatre bords, elle touche toujours le haut, le bas et la droite.
   La grille lui réserve sa place par un padding-right. */
.mm__promo{position:absolute;top:0;right:0;bottom:0;width:400px;
  overflow:hidden;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 28px;border-radius:0 12px 12px 0}
.mm__promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.mm__promo:hover img{transform:scale(1.05)}
.mm__promo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 46%,rgba(0,0,0,.90) 100%)}
.mm__promo > *:not(img){position:relative;z-index:1}
.mm__promok{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.mm__promok--mono{font-family:'Space Mono',monospace;font-weight:400;font-size:10px;
  letter-spacing:.16em;color:rgba(255,255,255,.62)}
.mm__promo h4{font-size:26px;font-weight:700;letter-spacing:-.024em;line-height:1.14;margin-top:8px}
.mm__promo p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);margin-top:8px}
.mm__promogo{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;margin-top:14px}

/* colonnes : toutes identiques */
.mm__col{display:flex;flex-direction:column;gap:14px;min-width:0}
.mm__k{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:6px;
  display:flex;align-items:center;height:16px}
.mm__k .mm__n{height:16px;min-width:16px;padding:0 5px;margin-left:8px;font-size:9.5px}
.mm__links{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
/* le surlignage épouse le texte : en pleine largeur il laissait un blanc jusqu'au bord */
.mm__col a{display:inline-block;width:auto;max-width:100%;
  color:rgba(255,255,255,.88);text-decoration:none;font-size:16px;letter-spacing:-.014em;
  line-height:1.3;padding:4px 10px;margin-left:-10px;border-radius:7px;
  transition:color .25s ease,background .3s cubic-bezier(.19,1,.22,1)}
.mm__col a:hover{color:#fff;background:rgba(255,255,255,.08)}
.mm__col a{white-space:nowrap}
.mm__n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 6px;margin-left:9px;border-radius:100px;background:rgba(255,255,255,.13);
  font-size:10.5px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.78);vertical-align:middle}
/* dernier article : le badge un peu plus lumineux signale le neuf */
.mm__n--live{background:rgba(255,255,255,.20);color:#fff}
.mm__all{font-size:11px!important;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5)!important;margin-top:4px}

/* IA & Systèmes : 5 entrées puis 2, sur les deux colonnes de texte */
/* les 6 systèmes tiennent sous UN titre, sur deux pistes de trois : une seconde
   colonne sans en-tête paraissait orpheline, une seule colonne laissait un trou. */
.mm__panel--promo .mm__col--two{grid-column:1/3}
.mm__panel--promo .mm__col--two .mm__links{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(3,auto);grid-template-columns:repeat(2,1fr);
  gap:12px 34px;justify-items:start}

/* Le pied vit HORS de la grille, avec la même réserve de place que les colonnes.
   Dans la grille, grid-column:1/-1 lui faisait ignorer le padding-right : il
   passait sous la photo et s'y faisait couper. Hors grille, sa largeur est
   explicite et vérifiable.
   Chaque preuve est dans sa propre bulle carrée (Yoni S65) — elles se lisent
   d'un coup au lieu de former une ligne de texte continue. */
.mm__foot{margin-right:calc(400px + 34px - 36px);margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mm__foot > span{display:inline-flex;align-items:baseline;gap:6px;
  padding:9px 12px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.46);line-height:1.35;white-space:nowrap}
.mm__foot > span:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.62)}
.mm__foot b{font-weight:400;color:rgba(255,255,255,.72)}


/* cascade d'ouverture */
.mm__panel.is-open .mm__col,.mm__panel.is-open .mm__promo,.mm__panel.is-open .mm__foot{
  animation:mmCol .5s cubic-bezier(.19,1,.22,1) both}
.mm__panel.is-open .mm__col:nth-child(2){animation-delay:.05s}
.mm__panel.is-open .mm__col:nth-child(3){animation-delay:.1s}
.mm__panel.is-open .mm__promo{animation-delay:.12s}
.mm__panel.is-open .mm__foot{animation-delay:.16s}
/* --mmd vaut +1 vers la droite, -1 vers la gauche, 0 à la première ouverture :
   le contenu entre par le côté d'où vient la main, ou monte simplement. */
@keyframes mmCol{from{opacity:0;transform:translate(calc(var(--mmd,0) * 26px),9px)}
                 to{opacity:1;transform:none}}

@media(max-width:1000px){
  .mm__panel{left:50%;transform:translateX(-50%);margin-left:0;width:calc(100vw - 24px);padding:24px 22px}
  .mm__panel--promo .mm__col--two{grid-column:auto}
  .mm__panel--promo .mm__col--two .mm__links{grid-auto-flow:row;grid-template-rows:none}
  .mm__cols,.mm__panel--promo .mm__cols{grid-template-columns:1fr;gap:26px}
  .mm__promo{position:relative;top:auto;right:auto;bottom:auto;width:auto;
    border-radius:10px;min-height:180px}
  .mm__cols,.mm__panel--promo .mm__cols{padding-right:0}
  .mm__foot{grid-column:auto;font-size:9.5px;gap:4px 14px}
  .mm__foot-loc{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .mm__panel{transition:none}
  .mm__panel.is-open .mm__col,.mm__panel.is-open .mm__promo,.mm__panel.is-open .mm__foot{animation:none}
}

/* (S67) l'ancien régime mobile — onglets au survol, logo et recherche masqués —
   est remplacé par le volet plein écran en fin de fichier. Le dock disparaît
   sous 1000px, ces règles de panneau ne servent donc plus qu'au desktop étroit. */
/* 5. Le raccourci s'affiche : l'utilisateur apprend qu'il existe */
.mm__kbd{font-size:10.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:3px 6px;margin-left:2px}
.mm__search{width:auto;padding:0 10px;gap:8px;display:flex}
@media(max-width:1000px){.mm__col a{font-size:16px}.mm__kbd{display:none}}
/* ── recherche dans la barre : le champ s'élargit, les résultats tombent dessous ──
   Préféré à la palette plein écran (Yoni S65) : la recherche reste un panneau du
   menu, elle ne prend pas l'écran. */
.mm__input{background:none;border:0;outline:none;color:#fff;width:0;padding:0;
  font-family:'Inter',sans-serif;font-size:13px;transition:width .38s cubic-bezier(.19,1,.22,1)}
.mm__input::placeholder{color:rgba(255,255,255,.44)}
.mm__input:focus{width:210px;padding:0 2px}
.mm__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sp__res{max-height:min(52vh,420px);overflow-y:auto;margin-top:14px}
.sp__hit{display:flex;align-items:baseline;gap:16px;padding:12px 10px;margin:0 -10px;
  text-decoration:none;border-radius:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.sp__hit:hover,.sp__hit.on{background:rgba(255,255,255,.07)}
.sp__hit b{color:#fff;font-weight:500;font-size:16px;letter-spacing:-.012em}
.sp__hit i{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-left:auto;white-space:nowrap}
.sp__hit mark{background:none;color:#fff;text-decoration:underline;text-underline-offset:.2em}
.sp__empty{color:rgba(255,255,255,.5);font-size:15px;padding:16px 0}

/* ═══ LES ANCIENNES MARQUES DE PAGE CÈDENT LA PLACE (S65) ═══════════════════
   Le méga-menu porte désormais le logo. Neuf pages parcours gardaient un
   `.brand` textuel et six pages secteur un `.hero__logo` + des liens de
   navigation décoratifs : superposés au nouveau logo, ils faisaient doublon.
   On les masque ici plutôt que d'éditer quinze pages — réversible en une ligne.
   Le CTA de la barre de hero reste, poussé à droite. */
/* visibility, pas display : sur les parcours le brand est le premier enfant
   d'un conteneur en space-between — le retirer du flux ramenait la nav de
   sections à gauche, sous le logo. Il garde sa place, il ne s'affiche plus. */
.brand{visibility:hidden}
/* « → Construire mon parcours » et variantes (6 pages secteur) : retirés sur
   demande Yoni S67 — le méga-menu et le bouton RDV portent désormais l'action. */
.hero__start{display:none}
.hero__bar .hero__logo,.hero__bar .hero__links{display:none}
.hero__bar{justify-content:flex-end}

/* ═══ PASTILLE TBD (S65) ═══════════════════════════════════════════════════
   Marque les entrées dont la page n'existe pas encore. Bordure pointillée :
   elle dit « provisoire » sans avoir à lire. Elle disparaît d'elle-même dès
   que le href cesse d'être « # » — rien à nettoyer à la main. */
.mm__tbd{display:inline-flex;align-items:center;margin-left:6px;padding:0 4px;
  border:1px dashed rgba(255,255,255,.34);border-radius:4px;
  font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.04em;
  color:rgba(255,255,255,.44);vertical-align:middle;line-height:1.6;flex:0 0 auto}
.mm__col a:hover .mm__tbd{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.66)}
/* Ces mêmes entrées passent en net retrait et cessent de réagir : ni clic, ni
   survol, ni soulignement. On garde la visibilité de la rubrique — elle dit ce
   qui arrive — sans promettre une page qui n'existe pas (S68, même règle
   qu'au pied de page). Le sélecteur suit le href : brancher la page suffit à
   réactiver le lien, il n'y a aucune classe à retirer. */
.mm__col a[href="#"],
.mm__col a[href="/.#"],
.mm__moblinks a[href="#"],
.mm__moblinks a[href="/.#"],
.mm__mobgros[href="#"]{opacity:.2;pointer-events:none;cursor:default}
/* `.mm__promo > *:not(img)` force position:relative sur tous les enfants de la
   carte (pour les passer au-dessus du dégradé) : il faut la même spécificité. */
.mm__promo > .mm__tbd--promo{position:absolute;top:16px;right:16px;margin:0;
  width:auto;align-self:flex-end;z-index:2;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* bouton de conversion en pied de colonne (colonne Contact du rayon, S66) */
.mm__colcta{display:inline-block;margin-top:16px;padding:10px 18px;border-radius:100px;
  background:var(--klein,#2b3cf3);color:#fff;text-decoration:none;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;transition:background .3s,transform .3s}
.mm__colcta:hover{background:#141414;transform:translateY(-1px)}

/* ═══ MOBILE (S67) — logo à gauche, « Menu » à droite, volet plein écran ═══════
   Refonte après recherche (04/08) : Baymard 2025 classe la nav mobile comme le
   point le plus faible du e-commerce, et notre régime précédent cumulait les
   fautes — onglets au SURVOL sur écran tactile, logo masqué, recherche masquée.
   Décalque de gestes : Nike (volet plein écran, sections titrées, entrée en
   cascade ~50 ms) × Zara/COS (texte d'abord, sobriété). NNG : le mot « Menu »
   accompagne l'icône, sinon elle est ignorée. Le CTA vit en bas de volet, dans
   la zone du pouce. La barre s'efface en descendant, revient dès qu'on remonte. */
.mm__burger{display:none}
.mm__mob{display:none}
.mm{transition:transform .38s cubic-bezier(.32,.72,0,1)}
.mm--hide{transform:translateY(calc(-100% - 24px))}

@media(max-width:1000px){
  /* la barre descend sous l'encoche : avec viewport-fit=cover, 14px la ferait
     passer derrière l'heure et la batterie (S68) */
  .mm{top:calc(14px + env(safe-area-inset-top));justify-content:space-between;align-items:center;padding:0 16px}
  /* relative, pas static : le logo blanc (absolu) doit s'ancrer à la marque,
     sinon il se cale au bord de l'écran et ignore la marge (mesuré S67) */
  .mm__brand{position:relative;left:auto;top:auto;display:inline-flex}
  .mm__dock{display:none}

  /* la pastille Menu : mêmes matières que la barre desktop (verre, contour) */
  .mm__burger{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
    height:44px;padding:0 16px;border-radius:12px;
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.09em;
    text-transform:uppercase;color:#fff;
    background:rgba(12,12,11,.66);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.12)}
  .mm__burgerlines{position:relative;width:15px;height:9px}
  .mm__burgerlines::before,.mm__burgerlines::after{content:"";position:absolute;
    left:0;right:0;height:1.5px;background:#fff;
    transition:transform .32s cubic-bezier(.16,1,.3,1),top .32s cubic-bezier(.16,1,.3,1)}
  .mm__burgerlines::before{top:0}
  .mm__burgerlines::after{top:8px}
  /* la pastille reste posée AU-DESSUS du volet : elle devient la croix */
  .mm--open .mm__burger{position:relative;z-index:2;background:rgba(255,255,255,.08)}
  .mm--open .mm__burgerlines::before{top:4px;transform:rotate(45deg)}
  .mm--open .mm__burgerlines::after{top:4px;transform:rotate(-45deg)}
  /* volet sombre : le logo passe en blanc, quel que soit le fond de la page */
  .mm--open .mm__brand{position:relative;z-index:2}
  .mm--open .mm__logo--bleu{opacity:0}
  .mm--open .mm__logo--blanc{opacity:1}
  .mm--open{transform:none}

  /* ── le volet ── */
  .mm--open .mm__mob{display:flex}
  /* Le volet couvre TOUT l'écran, encoche et barre d'accueil comprises : avec
     viewport-fit=cover, inset:0 déborde sous les zones système, donc le verre
     dépoli s'y prolonge au lieu de laisser deux bandes blanches en haut et en
     bas (retour Yoni S68). Le contenu, lui, se décale des mêmes marges. */
  .mm__mob{position:fixed;inset:0;z-index:1;color:#fff;
    background:rgba(10,10,9,.72);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
    flex-direction:column;
    padding:calc(86px + env(safe-area-inset-top)) 22px env(safe-area-inset-bottom)}
  html.mm-lock,html.mm-lock body{overflow:hidden}
  /* volet ouvert : la pastille RDV flottante (z 980) passerait par-dessus */
  html.mm-lock .ilev-rdv{display:none}

  .mm__mobsearch{display:flex;align-items:center;gap:11px;flex:0 0 auto;
    border-bottom:1px solid rgba(255,255,255,.16);padding:6px 2px 14px}
  .mm__mobsearch svg{width:17px;height:17px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:1.6;flex:0 0 auto}
  /* 16px minimum : en dessous, iOS zoome la page à la prise de focus */
  .mm__mobsearch input{flex:1;background:none;border:0;outline:none;color:#fff;
    font-family:'Inter',sans-serif;font-size:16px}
  .mm__mobsearch input::placeholder{color:rgba(255,255,255,.38)}
  .mm__mobsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

  .mm__mobres{display:none}
  .mm--searching .mm__mobres{display:block;flex:1;overflow-y:auto;padding:10px 0 30px}
  .mm--searching .mm__mobscroll,.mm--searching .mm__mobcta{display:none}
  .mm__mobres .sp__hit{flex-wrap:wrap;gap:4px 16px}

  .mm__mobscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:4px 0 110px;overscroll-behavior:contain}
  .mm__mobk{display:block;font-family:'Space Mono',monospace;font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.38);
    margin:24px 0 2px;font-size:9px}
  .mm__mobk:first-child{margin-top:18px}

  /* destinations premières : les secteurs, à plat et en grand (façon Zara) */
  .mm__mobgros{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:9px 0;color:#fff;text-decoration:none;
    font-size:19px;font-weight:500;letter-spacing:-.015em;line-height:1.15}
  /* la flèche : DESSINÉE au même trait que les lignes du bouton Menu (1,5px),
     angles nets (linecap butt) — plus jamais un glyphe de police (Yoni S67) */
  .mm__fl{width:17px;height:17px;flex:0 0 auto;align-self:center;
    stroke:rgba(255,255,255,.35);fill:none;stroke-width:1.5;
    transition:transform .35s cubic-bezier(.16,1,.3,1),stroke .3s ease}
  .mm__mobgros:active .mm__fl{transform:translateX(4px);stroke:#fff}

  /* le reste : accordéons natifs <details>, un trait fin entre chaque */
  .mm__mobg{border-bottom:1px solid rgba(255,255,255,.10)}
  .mm__mobg:first-of-type{border-top:1px solid rgba(255,255,255,.10);margin-top:8px}
  .mm__mobg summary{display:flex;align-items:center;justify-content:space-between;
    list-style:none;cursor:pointer;padding:13px 0;
    font-size:14.5px;font-weight:500;letter-spacing:-.008em;color:rgba(255,255,255,.85)}
  .mm__mobg summary::-webkit-details-marker{display:none}
  .mm__mobg summary::after{content:"+";font-family:'Inter',sans-serif;font-size:17px;
    font-weight:300;color:rgba(255,255,255,.4);transition:transform .3s ease}
  .mm__mobg[open] summary::after{transform:rotate(45deg)}
  .mm__moblinks{display:flex;flex-direction:column;padding:0 0 14px}
  .mm__moblinks a{padding:8px 0 8px 14px;border-left:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;line-height:1.35;
    display:flex;align-items:baseline;gap:8px}
  .mm__moblinks a:active{color:#fff;border-left-color:#fff}
  .mm__moblinks i,.mm__mobgros i{font-style:normal;font-family:'Space Mono',monospace;
    font-size:10px;color:rgba(255,255,255,.38)}
  .mm__moball{font-weight:600;color:#fff!important}

  /* la carte photo en clôture du volet — décalque de la carte Explorer desktop */
  .mm__mobcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    gap:5px;margin-top:26px;padding:18px;aspect-ratio:16/9;border-radius:12px;
    overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
  .mm__mobcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
  .mm__mobcard::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.82) 100%)}
  .mm__mobcard-k{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(255,255,255,.66)}
  .mm__mobcard b{font-size:19px;font-weight:600;letter-spacing:-.018em}

  /* CTA en zone du pouce : bandeau fixe, fondu au-dessus pour amortir la coupe */
  .mm__mobcta{position:absolute;left:0;right:0;bottom:0;padding:26px 22px
    calc(16px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(10,10,9,.9) 55%,rgba(10,10,9,0))}
  .mm__mobbtn{display:block;text-align:center;background:var(--klein,#2b3cf3);color:#fff;
    text-decoration:none;padding:14px 12px;border-radius:11px;
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
  .mm__mobbtn:active{opacity:.85}
  /* second geste : réserver un appel — fantôme sous le bouton plein.
     Cible /contact/rdv/ : la page agenda (Calendly) à créer, lien à brancher. */
  .mm__mobcta{display:flex;flex-direction:column;gap:8px}
  .mm__mobbtn--ghost{background:none;border:1px solid rgba(255,255,255,.24);color:#fff}

  /* entrée en cascade (Nike) : chaque étage arrive ~50 ms après le précédent */
  .mm--open .mm__mobsearch,.mm--open .mm__mobscroll > *,.mm--open .mm__mobcta{
    animation:mmCol .55s cubic-bezier(.19,1,.22,1) both}
  .mm--open .mm__mobscroll > :nth-child(1){animation-delay:.04s}
  .mm--open .mm__mobscroll > :nth-child(2){animation-delay:.08s}
  .mm--open .mm__mobscroll > :nth-child(3){animation-delay:.12s}
  .mm--open .mm__mobscroll > :nth-child(4){animation-delay:.16s}
  .mm--open .mm__mobscroll > :nth-child(5){animation-delay:.20s}
  .mm--open .mm__mobscroll > :nth-child(6){animation-delay:.24s}
  .mm--open .mm__mobscroll > :nth-child(7){animation-delay:.28s}
  .mm--open .mm__mobscroll > :nth-child(n+8){animation-delay:.32s}
  .mm--open .mm__mobcta{animation-delay:.3s}
}
@media(prefers-reduced-motion:reduce){
  .mm{transition:none}
  .mm--open .mm__mobsearch,.mm--open .mm__mobscroll > *,.mm--open .mm__mobcta{animation:none}
}

/* ═══ VERROU LATÉRAL (S67) ═══════════════════════════════════════════════════
   Mesuré au doigt par Yoni en ligne, puis à la sonde (500px de viewport) : les
   pages déploiement IA font 509px (hero à colonne rigide, fond -43→578) — le
   doigt peut tirer la page latéralement, bandes blanches aux flancs.
   `clip` et non `hidden` : hidden ferait de <body> un conteneur de défilement
   et casserait les position:sticky (sommaire édito, nav des domaines). clip
   interdit tout déplacement sans créer de conteneur. Le fond du problème (la
   grille des heros déploiement jamais passée en 1 colonne) reste au chantier
   responsive — ceci garantit qu'AUCUNE page, actuelle ou future, ne bouge. */
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}