/* Maquette du nouveau menu de HUB IA (16 octobre 2026), d'après le relevé des menus de Maya et le brief Produit de MA du 15 octobre.
   Une seule barre flottante (celle du site) ; trois menus déroulants clairs : Produit en quatre colonnes, Solutions, Services ;
   sur téléphone, un tiroir plein écran avec un accordéon par menu. Couleurs, polices et tailles : jetons du site. */

/* ---------- La barre : celle du site, posée flottante d'entrée ---------- */
.nm-barre .barre__rang { gap: var(--e-4); }
.nm-nav { margin-inline: auto; }
.nm-liste { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nm-lien { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible); padding: 0 14px; border: 0; border-radius: var(--rayon-action); background: transparent; color: var(--texte); font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-s); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duree) var(--courbe); }
.nm-lien:hover, .nm-lien[aria-expanded="true"] { background: color-mix(in srgb, var(--texte) 9%, transparent); }
.nm-lien svg { width: 12px; height: 12px; transition: rotate 220ms var(--courbe-sortie); }
.nm-lien[aria-expanded="true"] svg { rotate: 180deg; }
.nm-lien--simple { display: none; }
.nm-droite .tel { font-size: var(--t-s); color: var(--texte-doux); }
.nm-burger { display: none; }

/* ---------- Les menus déroulants ---------- */
.nm-panneau { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(1200px, calc(100vw - 32px)); max-height: calc(100svh - var(--barre) - 24px); translate: -50% -8px; opacity: 0; padding: 10px; background: var(--surface); color: var(--texte); border: var(--trame) solid color-mix(in srgb, var(--texte) 10%, transparent); border-radius: calc(var(--rayon) + 8px); box-shadow: 0 30px 80px color-mix(in srgb, var(--texte) 18%, transparent); transition: opacity 180ms var(--courbe), translate 240ms var(--courbe-sortie); }
/* Une bande invisible couvre l'espace entre la barre et le menu : la souris peut descendre sans le refermer. */
.nm-panneau::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
.nm-panneau.est-ouvert { opacity: 1; translate: -50% 0; }
.nm-panneau[hidden] { display: none; }
/* Ce qui défile, si l'écran est bas ; l'aperçu reste toujours visible dessous. */
.nm-panneau > .nm-cascade { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.nm-panneau .nm-cascade > * { opacity: 0; translate: 0 6px; transition: opacity 260ms var(--courbe), translate 320ms var(--courbe-sortie); transition-delay: calc(var(--n, 0) * 45ms + 40ms); }
.nm-panneau.est-ouvert .nm-cascade > * { opacity: 1; translate: 0 0; }

/* Un pictogramme en carrés, comme ceux des sections du site */
.nm-picto { width: 36px; height: 36px; flex: none; }
.nm-picto rect { fill: currentColor; }
.nm-picto .vif { fill: var(--accent); }

/* ---------- Produit : quatre colonnes, la plateforme d'abord ---------- */
.nm-produit { display: grid; grid-template-columns: minmax(0, 1.12fr) repeat(3, minmax(0, 1fr)); }
.nm-famille { display: grid; align-content: start; gap: var(--e-4); padding: 20px 16px 16px; }
.nm-famille + .nm-famille:not(.nm-famille--hub) { border-left: var(--trame) solid color-mix(in srgb, var(--texte) 10%, transparent); }
.nm-famille--hub + .nm-famille { border-left: 0; }
.nm-famille__tete { display: grid; gap: 8px; padding-inline: 4px; color: inherit; text-decoration: none; border-radius: var(--rayon); }
.nm-famille__nom { display: flex; align-items: center; gap: 10px; font-family: var(--police-titres); font-weight: 600; font-size: var(--t-m); letter-spacing: -0.015em; line-height: 1.15; }
.nm-famille__slogan { font-size: var(--t-xs); line-height: 1.45; color: var(--texte-doux); text-wrap: pretty; }
.nm-famille__tete:hover .nm-famille__nom span { text-decoration: underline; text-underline-offset: 3px; }
.nm-modules { display: grid; gap: 1px; margin: 0; padding: 10px 0 0; list-style: none; border-top: var(--trame) solid color-mix(in srgb, var(--texte) 10%, transparent); }
.nm-modules a { position: relative; display: flex; align-items: center; min-height: 36px; padding: 5px 8px 5px 20px; border-radius: 10px; color: inherit; text-decoration: none; font-size: var(--t-s); line-height: 1.25; transition: background-color var(--duree) var(--courbe); }
.nm-modules a::before { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: color-mix(in srgb, var(--texte) 22%, transparent); transition: background-color var(--duree) var(--courbe), scale 200ms var(--courbe-sortie); }
.nm-modules a:hover, .nm-modules a:focus-visible { background: color-mix(in srgb, var(--texte) 7%, transparent); }
.nm-modules a:hover::before, .nm-modules a:focus-visible::before { background: var(--accent); scale: 1.5; }
/* La première phrase du brief, sous chaque module : visible dans le tiroir et sur les écrans tactiles. */
.nm-mod__phrase { display: none; margin: 0 0 6px; padding-left: 20px; font-size: var(--t-xs); line-height: 1.4; color: var(--texte-doux); }
@media (hover: none) and (min-width: 1024px) { .nm-panneau .nm-mod__phrase { display: block; } .nm-panneau .nm-apercu__texte { visibility: hidden; } }
/* HUB IA, la plateforme : une carte sombre, avec le H et sa sphère */
.nm-famille--hub { margin-right: 10px; border-radius: var(--rayon); background: var(--fond); color: var(--texte); }
.nm-famille--hub .nm-famille__nom { font-size: var(--t-l); }
.nm-signe { width: 62px; height: 50px; margin-bottom: 4px; overflow: visible; }
.nm-signe rect { fill: var(--texte); }
.nm-signe circle { transform-box: fill-box; transform-origin: 50% 50%; transition: translate 420ms var(--courbe-sortie); }
.nm-famille--hub:hover .nm-signe circle { translate: 0 -14%; }
.nm-canada { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: var(--rayon-action); border: var(--trame) solid var(--bordure); font-family: var(--police-interface); font-size: var(--t-xs); color: var(--texte-doux); }
.nm-canada::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* L'aperçu : la description du module survolé, dans les mots du brief ; hauteur fixe, lignes courtes. */
.nm-apercu { display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); min-height: 76px; margin-top: 10px; padding: 12px 14px 4px; border-top: var(--trame) solid color-mix(in srgb, var(--texte) 10%, transparent); }
.nm-apercu__texte { max-width: 70ch; font-size: var(--t-s); line-height: 1.45; color: var(--texte-doux); }
.nm-apercu__texte b { color: var(--texte); font-weight: 600; }
.nm-suite { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: var(--cible); color: var(--texte); font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-s); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: var(--trame); }
.nm-suite svg { width: 16px; height: 16px; }
.nm-suite:hover { text-decoration-thickness: 2px; }

/* ---------- Solutions : les quatre milieux, et la solution en carte ---------- */
.nm-solutions { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.nm-milieux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: center; margin: 0; padding: 8px; list-style: none; }
.nm-tuile { display: flex; align-items: center; gap: var(--e-4); min-height: 88px; padding: 14px 16px; border-radius: var(--rayon); color: inherit; text-decoration: none; font-family: var(--police-titres); font-weight: 600; font-size: var(--t-m); letter-spacing: -0.015em; line-height: 1.15; transition: background-color var(--duree) var(--courbe); }
.nm-tuile:hover, .nm-tuile:focus-visible { background: color-mix(in srgb, var(--texte) 6%, transparent); }
.nm-tuile .nm-picto { color: var(--texte); transition: scale 260ms var(--courbe-sortie); }
.nm-tuile:hover .nm-picto { scale: 1.08; }
.nm-carte-sombre { display: grid; align-content: space-between; gap: var(--e-6); padding: 24px; border-radius: var(--rayon); background: var(--fond); color: var(--texte); }
.nm-carte-sombre__titre { color: inherit; text-decoration: none; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.nm-carte-sombre__titre:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nm-carte-sombre ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nm-carte-sombre li a { display: flex; align-items: center; gap: 10px; min-height: var(--cible); color: inherit; text-decoration: none; font-size: var(--t-s); border-bottom: var(--trame) solid color-mix(in srgb, var(--texte) 12%, transparent); }
.nm-carte-sombre li a b { font-family: var(--police-donnees); font-weight: 400; font-size: 0.75rem; color: var(--texte-doux); }
.nm-carte-sombre li a:hover { color: var(--accent); }

/* ---------- Services : le parcours, sur une ligne au signal, sur fond sombre ---------- */
.nm-parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 28px 24px 22px; list-style: none; border-radius: var(--rayon); background: var(--fond); color: var(--texte); }
.nm-parcours li { position: relative; }
/* Un trait par étape, de son point au point suivant : la ligne s'arrête au dernier jalon. */
.nm-parcours li:not(:last-child)::after { content: ""; position: absolute; left: 16px; right: -12px; top: 9px; height: 2px; background: var(--accent); transform-origin: 0 50%; }
.nm-parcours a { position: relative; z-index: 1; display: grid; gap: 8px; padding: 30px 8px 8px 0; color: inherit; text-decoration: none; }
.nm-parcours a::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fond); border: 3px solid var(--accent); box-sizing: border-box; transition: scale 240ms var(--courbe-sortie), background-color var(--duree) var(--courbe); }
.nm-parcours a:hover::before, .nm-parcours a:focus-visible::before { background: var(--accent); scale: 1.2; }
.nm-parcours__quand { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.125rem, calc(0.8rem + 0.45vw), 1.375rem); letter-spacing: -0.025em; line-height: 1.05; white-space: nowrap; }
.nm-parcours__quoi { font-size: var(--t-s); line-height: 1.4; color: var(--texte-doux); text-wrap: pretty; }
.nm-parcours a:hover .nm-parcours__quand { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.js-mouvement .nm-panneau .nm-parcours li:not(:last-child)::after { scale: 0 1; transition: scale 520ms var(--courbe-sortie); transition-delay: calc(var(--n, 0) * 160ms + 160ms); }
.js-mouvement .nm-panneau.est-ouvert .nm-parcours li:not(:last-child)::after { scale: 1 1; }

/* ---------- Le tiroir du téléphone ---------- */
.nm-tiroir { display: grid; grid-template-rows: auto 1fr auto; background: var(--surface); color: var(--texte); }
.js .nm-tiroir { position: fixed; inset: 0; z-index: 80; translate: 0 -12px; opacity: 0; transition: opacity 200ms var(--courbe), translate 260ms var(--courbe-sortie); }
.js .nm-tiroir.est-ouvert { opacity: 1; translate: 0 0; }
.nm-tiroir[hidden] { display: none; }
.nm-tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 76px; padding: 0 var(--gouttiere); border-bottom: var(--trame) solid color-mix(in srgb, var(--texte) 10%, transparent); }
.nm-tiroir__corps { overflow: auto; padding: 8px var(--gouttiere) 24px; overscroll-behavior: contain; }
.nm-tiroir__pied { display: grid; gap: var(--e-3); justify-items: start; padding: 14px var(--gouttiere) calc(14px + env(safe-area-inset-bottom)); border-top: var(--trame) solid color-mix(in srgb, var(--texte) 10%, transparent); }
.nm-fermer { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 18px; border-radius: var(--rayon-action); border: var(--trame) solid color-mix(in srgb, var(--texte) 30%, transparent); background: transparent; color: var(--texte); font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-s); cursor: pointer; }
.nm-acc { border-bottom: var(--trame) solid color-mix(in srgb, var(--texte) 10%, transparent); }
.nm-acc > button, .nm-acc > a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: 0; border: 0; background: transparent; color: var(--texte); font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: var(--t-xl); letter-spacing: -0.025em; text-align: start; text-decoration: none; cursor: pointer; }
.nm-acc > button svg { width: 16px; height: 16px; flex: none; transition: rotate 220ms var(--courbe-sortie); }
.nm-acc > button[aria-expanded="true"] svg { rotate: 180deg; }
.nm-acc__corps { display: grid; gap: 8px; padding: 0 0 18px; }
.nm-acc__corps[hidden], .nm-sous__corps[hidden] { display: none; }
.nm-sous > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 0; border: 0; background: transparent; color: var(--texte); font-family: var(--police-interface); font-weight: 600; font-size: var(--t-m); text-align: start; cursor: pointer; }
.nm-sous > button .nm-picto { width: 28px; height: 28px; }
.nm-sous > button::after { content: "+"; margin-left: auto; font-weight: 400; font-size: var(--t-l); color: var(--texte-doux); }
.nm-sous > button[aria-expanded="true"]::after { content: "−"; }
.nm-tiroir .nm-modules { margin: 0 0 10px; padding-top: 6px; }
.nm-tiroir .nm-modules a { min-height: var(--cible); }
.nm-tiroir .nm-mod__phrase { display: block; margin-top: -4px; }
.nm-tiroir .nm-milieux { grid-template-columns: 1fr; padding: 0; }
.nm-tiroir .nm-tuile { min-height: 56px; padding: 8px 12px; font-size: var(--t-m); }
.nm-tiroir .nm-tuile .nm-picto { width: 28px; height: 28px; }
.nm-tiroir .nm-carte-sombre { padding: 18px; }
.nm-tiroir .nm-parcours { grid-template-columns: 1fr; gap: 0; padding: 18px 16px 8px; }
.nm-tiroir .nm-parcours li:not(:last-child)::after { left: 7px; right: auto; top: 16px; bottom: -4px; width: 2px; height: auto; }
.nm-tiroir .nm-parcours a { padding: 0 0 16px 34px; }
.nm-tiroir .nm-parcours__quand { font-size: var(--t-l); }
.nm-tiroir .nm-suite { justify-self: start; }

/* ---------- Petits écrans : le tiroir remplace les menus déroulants ---------- */
@media (max-width: 1023px) {
  .nm-nav, .nm-droite .tel, .nm-droite > .bouton { display: none; }
  .js .nm-burger:not(.nm-burger--simple) { display: inline-flex; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nm-lien { padding: 0 10px; }
  .nm-droite .tel { display: none; }
  .nm-famille { padding: 16px 10px 12px; }
  .nm-famille__nom { font-size: var(--t-s); }
  .nm-famille--hub .nm-famille__nom { font-size: var(--t-m); }
  .nm-modules a { padding-left: 18px; font-size: 0.875rem; }
  .nm-parcours { gap: 8px; padding-inline: 16px; }
}
/* Sur grand écran, le tiroir ne sert pas. */
@media (min-width: 1024px) { .nm-tiroir { display: none; } }
html.tiroir-ouvert { overflow: hidden; }

/* ---------- Sans JavaScript : des liens simples, et le plan du site en bas de la page sur téléphone ---------- */
html:not(.js) .nm-lien[aria-controls] { display: none; }
html:not(.js) .nm-lien--simple { display: inline-flex; }
@media (max-width: 1023px) { html:not(.js) .nm-burger--simple { display: inline-flex; } }

/* ---------- La page de démonstration ---------- */
.nm-tete .contenu--large { display: grid; gap: var(--e-6); }
.nm-etiquette { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--rayon-action); border: var(--trame) solid var(--bordure); font-family: var(--police-interface); font-size: var(--t-xs); color: var(--texte-doux); }
.nm-tete h1 { max-width: 17ch; }
.nm-tete .t-intro { max-width: 46ch; }
.nm-notes ol { display: grid; gap: var(--e-4); margin: var(--e-8) 0 0; padding: 0; list-style: none; counter-reset: note; }
@media (min-width: 900px) { .nm-notes ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }
.nm-notes li { counter-increment: note; display: grid; align-content: start; gap: var(--e-2); padding: var(--e-6); border-radius: var(--rayon); background: var(--surface); border: var(--trame) solid var(--bordure); }
.nm-notes li::before { content: counter(note, decimal-leading-zero); font-family: var(--police-donnees); font-size: var(--t-xs); color: var(--texte-doux); }
.nm-notes li strong { font-family: var(--police-titres); font-weight: 600; font-size: var(--t-m); letter-spacing: -0.015em; }
.nm-notes li span { color: var(--texte-doux); line-height: 1.45; }
/* La notice des liens sans page : toujours dans la page (zone lue par les lecteurs d'écran), cachée à l'œil quand elle est vide. */
.nm-avis { position: fixed; left: 50%; bottom: 20px; z-index: 90; width: min(440px, calc(100vw - 32px)); translate: -50% 0; padding: 12px 18px; border-radius: var(--rayon); background: var(--fond); color: var(--texte); font-family: var(--police-interface); font-size: var(--t-s); text-align: center; box-shadow: 0 12px 30px color-mix(in srgb, var(--fond) 40%, transparent); transition: opacity 200ms var(--courbe); }
.nm-avis:empty { opacity: 0; pointer-events: none; padding: 0; }
.tiroir-ouvert .nm-avis { bottom: 150px; }
/* L'aperçu « téléphone » : la même page dans un cadre de 390 px */
.nm-telephone { width: min(430px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 36px; background: var(--fond); box-shadow: 0 40px 100px color-mix(in srgb, var(--fond) 50%, transparent); }
.nm-telephone::backdrop { background: color-mix(in srgb, var(--fond) 60%, transparent); }
.nm-telephone__cadre { display: block; width: 390px; max-width: calc(100% - 28px); height: min(780px, calc(100svh - 120px)); margin: 14px auto 0; border: 0; border-radius: 26px; background: var(--page); }
.nm-telephone__bas { display: flex; justify-content: center; padding: 12px; }
.nm-telephone .nm-fermer { color: var(--texte); border-color: color-mix(in srgb, var(--texte) 30%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .nm-panneau, .nm-panneau .nm-cascade > *, .nm-tiroir, .nm-lien svg, .nm-modules a::before, .nm-signe circle, .nm-avis { transition: none !important; }
}

/* ---------- Ajouts pour le site (menu_claude.py) ---------- */
/* Le bouton du téléphone : même allure que l'ancien bouton « Menu » de la coquille */
@media (max-width: 1023px) {
  .js .nm-burger:not(.nm-burger--simple), html:not(.js) .nm-burger--simple { align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; margin-left: auto; border-radius: 999px; border: var(--trame) solid color-mix(in srgb, var(--texte) 30%, transparent); background: transparent; color: var(--texte); font-family: var(--police-interface); font-weight: var(--graisse-interface); font-size: var(--t-s); text-decoration: none; cursor: pointer; }
}
/* Solutions : les neuf secteurs */
.nm-milieux--secteurs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nm-tuile--secteur { min-height: 64px; font-size: var(--t-s); }
.nm-tuile--secteur::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); transition: scale 260ms var(--courbe-sortie); }
.nm-tuile--secteur:hover::before, .nm-tuile--secteur:focus-visible::before { scale: 1.3; }
.nm-tuile[aria-current="page"] { background: color-mix(in srgb, var(--texte) 6%, transparent); }
.nm-lien[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nm-tiroir .nm-milieux--secteurs { grid-template-columns: 1fr; }
.nm-tiroir .nm-tuile--secteur { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .nm-tuile--secteur::before { transition: none; } }
/* Passage sombre <-> blanc de la barre : en douceur, net avec « réduire les animations » */
.nm-barre, .nm-barre .barre__rang, .nm-barre .nm-lien, .nm-barre .tel, .nm-barre .marque, .nm-barre .nm-burger { transition: background-color 240ms var(--courbe), color 240ms var(--courbe), border-color 240ms var(--courbe), box-shadow 240ms var(--courbe); }
@media (prefers-reduced-motion: reduce) { .nm-barre, .nm-barre .barre__rang, .nm-barre .nm-lien, .nm-barre .tel, .nm-barre .marque, .nm-barre .nm-burger { transition: none; } }

/* ---------- Solutions : menu Secteurs B, liste + aperçu animé (choix de Marc-André, 2 nov. 2026 · outils/menu_b.py) ---------- */
.nm-panneau--secteurs { padding: 0; overflow: hidden; }
.nm-secteurs-b { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 10px; padding: 10px; }
.nm-secteurs-b .mb-fl { width: 16px; height: 16px; flex: none; }
.mb-liste { display: grid; align-content: start; gap: 6px; padding: 14px 8px 6px; }
.mb-eti { margin: 0 10px 4px; font-family: var(--police-donnees); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.mb-liste ul { margin: 0; padding: 0; list-style: none; display: grid; }
.mb-sep { height: 1px; margin: 6px 10px; background: color-mix(in srgb, var(--texte) 10%, transparent); }
.mb-it { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px 0 22px; border-radius: 10px; color: inherit; text-decoration: none; font-family: var(--police-titres); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.mb-it::before { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: color-mix(in srgb, var(--texte) 25%, transparent); transition: background-color 180ms, scale 200ms; }
.mb-it .mb-fl { opacity: 0; translate: -6px 0; transition: opacity 160ms, translate 240ms var(--courbe-sortie); }
.mb-it.est-actif { background: color-mix(in srgb, var(--texte) 6%, transparent); }
.mb-it.est-actif::before { background: var(--accent); scale: 1.6; }
.mb-it.est-actif .mb-fl { opacity: 1; translate: 0 0; }
.mb-it[aria-current="page"] span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.mb-it:focus-visible, .mb-carte:focus-visible, .mt-b a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-liste .nm-suite { margin: 6px 12px 0; }
.mb-carte { display: grid; grid-template-rows: 1fr auto; overflow: hidden; border-radius: var(--rayon); background: #F0EEE9; color: #21201C; text-decoration: none; min-height: 470px; }
.mb-img { position: relative; overflow: hidden; background: #F0EEE9; }
.mb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-plan { position: absolute; inset: 0; display: block; }
.mb-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: translate 500ms var(--courbe-sortie), scale 600ms var(--courbe-sortie); }
.mb-plan:not(:empty) + img, .mb-img:has(.mb-plan:not(:empty)) img { visibility: hidden; }
.mb-carte:hover .mb-plan svg, .mb-carte:focus-visible .mb-plan svg { scale: 1.035; }
.mb-bas { display: grid; gap: 6px; padding: 18px 22px 20px; background: #101211; color: #ECEEED; }
.mb-sect { font-family: var(--police-donnees); font-size: .8rem; color: #ADB5B2; }
.mb-ligne { font-family: var(--police-titres); font-weight: 600; font-size: clamp(1.4rem, .8rem + 1vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.08; }
.mb-hub b { font-weight: 600; }
.mb-verbe { display: inline-block; color: var(--accent); transition: opacity 200ms, translate 260ms var(--courbe-sortie); }
.mb-verbe.est-change { opacity: 0; translate: 0 .3em; }
.mb-voir { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .9rem; color: #ADB5B2; }
.mb-carte:hover .mb-voir { color: #ECEEED; text-decoration: underline; text-underline-offset: 4px; }
/* L'animation du plan : la trame se trace, les objets montent en place, une impulsion lime traverse le poste. */
.mb-plan .mb-trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mb-plan.est-anime .mb-trace { animation: mb-trace 900ms var(--courbe-sortie) both; animation-delay: calc(var(--i, 0) * 6ms); }
.mb-plan.est-anime .objets > g { animation: mb-monte 560ms var(--courbe-sortie) both; animation-delay: calc(var(--i, 0) * 12ms + 120ms); }
@keyframes mb-trace { from { stroke-dashoffset: 1; } }
@keyframes mb-monte { from { opacity: 0; translate: 0 -46px; } }
.mb-pouls__onde { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; }
.mb-pouls__point { fill: var(--accent); opacity: 0; }
.mb-pouls__halo { fill: color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0; }
.mb-plan.est-vivant .mb-pouls__onde { animation: mb-onde 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.mb-plan.est-vivant .mb-pouls__onde + .mb-pouls__onde { animation-delay: 1.3s; }
.mb-plan.est-vivant .mb-pouls__point, .mb-plan.est-vivant .mb-pouls__halo { opacity: 1; }
@keyframes mb-onde { 0% { opacity: .9; scale: .15; } 100% { opacity: 0; scale: 1; } }
/* Tiroir du téléphone */
#t-solutions .mt-b { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#t-solutions .mt-b a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px; border-radius: 10px; color: inherit; text-decoration: none; }
#t-solutions .mt-b a[aria-current="page"] { background: color-mix(in srgb, var(--texte) 6%, transparent); }
#t-solutions .mt-b img { width: 64px; height: 52px; flex: none; object-fit: cover; border-radius: 8px; border: 1px solid var(--bordure); }
#t-solutions .mt-b b { display: block; font-family: var(--police-titres); font-weight: 600; font-size: 1.05rem; }
#t-solutions .mt-b small { display: block; font-size: .84rem; line-height: 1.35; color: var(--texte-doux); }
#t-solutions > .nm-suite { margin: 8px 6px 0; }
@media (min-width: 1024px) and (max-width: 1279px) { .mb-carte { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) {
  .mb-it::before, .mb-it .mb-fl, .mb-plan svg, .mb-verbe { transition: none !important; }
  .mb-plan .mb-trace, .mb-plan .objets > g, .mb-pouls__onde { animation: none !important; }
  .mb-carte:hover .mb-plan svg { scale: 1; }
}
/* Plan au trait de l'aperçu : règles reprises de departements.css */
/* Le dessin : faces pleines et claires, contour fin qui ne grossit pas avec le zoom. */
.mb-plan svg path, .mb-plan svg ellipse { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mb-plan svg .sol { fill: var(--fond); }
.mb-plan svg .trame-sol { fill: none; stroke: color-mix(in srgb, var(--texte) 12%, transparent); stroke-width: 1; }
.mb-plan svg .fil { fill: none; stroke: color-mix(in srgb, var(--texte) 30%, transparent); stroke-width: 1.4; stroke-dasharray: 2 9; }
.mb-plan svg .iso .h { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .iso .g { fill: color-mix(in srgb, var(--texte) 7%, var(--surface)); stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .iso .d { fill: color-mix(in srgb, var(--texte) 13%, var(--surface)); stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .iso.ecran .ecran-face { fill: var(--accent-2); }
.mb-plan svg .iso.ecran .h, .mb-plan svg .iso.ecran .d { fill: color-mix(in srgb, var(--accent-2) 70%, var(--surface)); }
.mb-plan svg .vitre { fill: color-mix(in srgb, var(--accent-2) 88%, var(--surface)); stroke: none; }
.mb-plan svg .ui { fill: none; stroke: color-mix(in srgb, var(--sur-accent-2) 55%, transparent); stroke-width: 1.6; }
.mb-plan svg .ui-signal { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.mb-plan svg .ui-plein { fill: color-mix(in srgb, var(--sur-accent-2) 45%, transparent); stroke: none; }
.mb-plan svg .ui-plein-signal, .mb-plan svg .ui-point { fill: var(--accent); stroke: none; }
.mb-plan svg .iso.papier-signal .h, .mb-plan svg .iso.papier-signal .g, .mb-plan svg .iso.papier-signal .d,
.mb-plan svg .iso.caisse-signal .h { fill: var(--accent); }
.mb-plan svg .iso.papier-signal .g, .mb-plan svg .iso.papier-signal .d { fill: color-mix(in srgb, var(--accent) 78%, var(--texte)); }
.mb-plan svg .iso.objet-sombre .h, .mb-plan svg .iso.objet-sombre .g, .mb-plan svg .iso.objet-sombre .d,
.mb-plan svg .iso.patte .g, .mb-plan svg .iso.patte .d, .mb-plan svg .iso.pied-ecran .g, .mb-plan svg .iso.pied-ecran .d { fill: var(--accent-2); }
.mb-plan svg .iso.cabine .h, .mb-plan svg .iso.cabine .g { fill: var(--surface); }
.mb-plan svg .iso.vitre-cabine .g, .mb-plan svg .iso.vitre-cabine .d { fill: color-mix(in srgb, var(--accent-2) 80%, var(--surface)); }
.mb-plan svg .iso.mur .g { fill: var(--surface); }
.mb-plan svg .iso.quai .h { fill: color-mix(in srgb, var(--texte) 4%, var(--surface)); }
.mb-plan svg .roue { fill: var(--accent-2); stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .moyeu { fill: var(--accent); stroke: none; }
.mb-plan svg .ruban { fill: none; stroke: color-mix(in srgb, var(--texte) 40%, transparent); stroke-width: 3; }
.mb-plan svg .ruban-signal { fill: none; stroke: var(--accent); stroke-width: 4; }
.mb-plan svg .tiroir { fill: none; stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .bac .h, .mb-plan svg .bac .d { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .feuillage { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.mb-plan svg .allee { fill: var(--surface); stroke: color-mix(in srgb, var(--texte) 35%, transparent); stroke-width: 1; }
.mb-plan svg .agent .grain { fill: color-mix(in srgb, var(--texte) 55%, transparent); transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.2); transition: opacity 500ms var(--courbe), transform 700ms var(--courbe-sortie); transition-delay: var(--r); }
.mb-plan svg .agent.est-actif .grain { opacity: 0.55; transform: none; }
/* Le dossier qui circule d'un poste à l'autre */
.mb-plan svg .paquet rect { fill: var(--accent); stroke: var(--texte); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mb-plan svg .paquet { opacity: 0; transition: opacity 300ms var(--courbe); }
.departements.est-en-route .mb-plan svg .paquet { opacity: 1; }
/* L'agent : un H de pixels et des croix. Au repos, dispersé et pâle ; au poste actif, rassemblé. */
.mb-plan svg .agent .px { fill: var(--texte); transform-box: fill-box; transform-origin: center; transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0.12; transition: transform 900ms var(--courbe-sortie), opacity 600ms var(--courbe); transition-delay: var(--r); }
.mb-plan svg .agent .px-signal { fill: var(--accent); stroke: var(--texte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mb-plan svg .agent .croix { fill: none; stroke: var(--texte); stroke-width: 1.6; opacity: 0; transition: opacity 500ms var(--courbe); transition-delay: calc(var(--r) + 300ms); }
.mb-plan svg .agent .croix-signal { stroke: color-mix(in srgb, var(--accent) 70%, var(--texte)); }
.mb-plan svg .agent.est-actif .px { transform: none; opacity: 0.92; }
.mb-plan svg .agent.est-actif .croix { opacity: 0.8; }
/* L'agent fait sa ronde au poste actif : il flotte, va jusqu'à l'autre bureau (ou au camion), y travaille, puis revient. */
.js-mouvement .mb-plan svg .agent.est-actif { animation: dep-ronde 8s var(--courbe) 1.6s infinite; }
.no-mouvement .mb-plan svg, html:not(.js) .mb-plan svg { position: relative; height: auto; aspect-ratio: 16 / 9; }
/* La vie de chaque poste, comme les bras du robot de Mind Robotics : les écrans s'écrivent, le téléphone sonne,
   la réponse se tape dans une bulle, les tarifs s'allument, la note glisse sur la table, le camion roule sur la carte,
   la transpalette va et vient, la caisse monte dans le camion, la facture sort et se fait tamponner.
   Chaque mouvement ne tourne que lorsque son poste est à l'écran. (Bloc généré par scene.cjs : le refaire plutôt que l'éditer.) */
.mb-plan svg .trace { stroke-dasharray: 260; }
.mb-plan svg .frappe { stroke-dasharray: 120; }
.mb-plan svg .barre-graph, .mb-plan svg .feuille, .mb-plan svg .caisse-mobile, .mb-plan svg .bulle-dep, .mb-plan svg .tampon, .mb-plan svg .feuilles { transform-box: fill-box; }
.mb-plan svg .barre-graph { transform-origin: 50% 100%; }
.mb-plan svg .bulle-dep { transform-origin: 30% 100%; }
.mb-plan svg .tampon, .mb-plan svg .agent .flux { transform-origin: center; }
.mb-plan svg .feuilles { transform-origin: 50% 100%; }
.mb-plan svg .onde-tel { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.mb-plan svg .bulle-fond, .mb-plan svg .bulle-queue { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.mb-plan svg .bulle-point { fill: var(--texte); }
.mb-plan svg .tampon-rond { fill: var(--accent); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.mb-plan svg .tampon-coche { fill: none; stroke: var(--sur-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mb-plan svg .agent .flux { fill: var(--texte); opacity: 0; transform-box: fill-box; }
.js-mouvement .mb-plan svg .agent.est-actif .flux { animation: dep-flux 2.4s var(--courbe) infinite; animation-delay: calc(1.2s + var(--r)); }
.js-mouvement .mb-plan svg .fil { animation: dep-fil 1.4s linear infinite; }
.js-mouvement .mb-plan svg .feuilles { animation: dep-vent 5s ease-in-out infinite alternate; }
/* Les postes ajoutés le 14 octobre (soir) : la lecture de plans, la ligne d'assemblage, les étagères, le pont roulant,
   le camion de livraison et la livraison. */
.mb-plan svg .iso.plan-feuille .h, .mb-plan svg .iso.plan-feuille .g, .mb-plan svg .iso.plan-feuille .d { fill: color-mix(in srgb, var(--texte) 4%, var(--surface)); }
.mb-plan svg .plan-trait { fill: none; stroke: color-mix(in srgb, var(--texte) 62%, transparent); stroke-width: 1.4; }
.mb-plan svg .iso.scanneur-barre .h { fill: var(--surface); }
.mb-plan svg .iso.scanneur-barre .g, .mb-plan svg .iso.scanneur-barre .d { fill: color-mix(in srgb, var(--texte) 18%, var(--surface)); }
.mb-plan svg .plan-porte { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.mb-plan svg .plan-cote { fill: none; stroke: color-mix(in srgb, var(--texte) 38%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.mb-plan svg .scan-ligne { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.mb-plan svg .iso.rouleau .h, .mb-plan svg .iso.rouleau .d { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .iso.tapis .h { fill: color-mix(in srgb, var(--accent-2) 88%, var(--surface)); }
.mb-plan svg .courroie { fill: none; stroke: color-mix(in srgb, var(--sur-accent-2) 65%, transparent); stroke-width: 2; stroke-dasharray: 6 26; }
.mb-plan svg .iso.poutre .h { fill: var(--accent); }
.mb-plan svg .iso.poutre .g, .mb-plan svg .iso.poutre .d { fill: color-mix(in srgb, var(--accent) 70%, var(--texte)); }
.mb-plan svg .cable { fill: none; stroke: var(--texte); stroke-width: 1.4; }
.mb-plan svg .iso.route .h { fill: color-mix(in srgb, var(--accent-2) 82%, var(--surface)); }
.mb-plan svg .marquage { fill: none; stroke: var(--surface); stroke-width: 3; stroke-dasharray: 40 34; }
.mb-plan svg .iso.panneau-route .h, .mb-plan svg .iso.panneau-route .g, .mb-plan svg .iso.panneau-route .d { fill: var(--accent); }
.mb-plan svg .porte { fill: var(--accent-2); stroke: var(--texte); stroke-width: 1.1; }
.mb-plan svg .etats-fond { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.mb-plan svg .etat-point { fill: color-mix(in srgb, var(--texte) 22%, var(--surface)); }
.mb-plan svg .envol { opacity: 0; }
html:not(.js-mouvement) .mb-plan svg .envol { opacity: 1; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .trace,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .trace,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .trace,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .trace,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .trace,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .trace,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .trace,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .trace { animation: dep-tracer 2.8s var(--courbe) infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .frappe,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .frappe,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .frappe,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .frappe,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .frappe,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .frappe,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .frappe,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .frappe { animation: dep-frappe 3.2s var(--courbe) infinite calc(var(--k, 0) * 380ms); }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .barre-graph,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .barre-graph,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .barre-graph,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .barre-graph,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .barre-graph,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .barre-graph,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .barre-graph,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .barre-graph { animation: dep-pousser 2.6s var(--courbe-sortie) infinite calc(var(--k, 0) * 140ms); }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .tuile,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .tuile,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .tuile,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .tuile,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .tuile,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .tuile,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .tuile,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .tuile { animation: dep-clignoter 2.4s ease-in-out infinite calc(var(--k, 0) * 320ms); }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .onde-tel,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .onde-tel,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .onde-tel,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .onde-tel,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .onde-tel,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .onde-tel,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .onde-tel,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .onde-tel { animation: dep-sonner 1.6s ease-out infinite calc(var(--k, 0) * 160ms); }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .bulle-point,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .bulle-point,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .bulle-point,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .bulle-point,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .bulle-point,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .bulle-point,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .bulle-point,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .bulle-point { animation: dep-taper 1.1s ease-in-out infinite calc(var(--k, 0) * 160ms); }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .courroie,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .courroie,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .courroie,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .courroie,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .courroie,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .courroie,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .courroie,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .courroie { animation: dep-courroie 1.2s linear infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .marquage,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .marquage,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .marquage,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .marquage,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .marquage,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .marquage,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .marquage,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .marquage { animation: dep-marquage 0.9s linear infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .etat-point,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .etat-point,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .etat-point,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .etat-point,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .etat-point,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .etat-point,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .etat-point,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .etat-point { animation: dep-etats 4s steps(1, end) infinite calc(var(--k, 0) * 1s); }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .repere .h,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .repere .h,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .repere .h,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .repere .h,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .repere .h,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .repere .h,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .repere .h,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .repere .h { animation: dep-repere 2.4s ease-in-out infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"] .scan-ligne,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"] .scan-ligne,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"] .scan-ligne,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"] .scan-ligne,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"] .scan-ligne,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"] .scan-ligne,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"] .scan-ligne,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"] .scan-ligne { animation: dep-lueur 1.4s ease-in-out infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].telephone,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].telephone,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].telephone,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].telephone,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].telephone,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].telephone,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].telephone,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].telephone { animation: dep-vibrer 1.6s ease-in-out infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].bulle-dep,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].bulle-dep,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].bulle-dep,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].bulle-dep,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].bulle-dep,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].bulle-dep,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].bulle-dep,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].bulle-dep { animation: dep-bulle 4.2s var(--courbe-sortie) infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].glisse,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].glisse,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].glisse,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].glisse,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].glisse,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].glisse,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].glisse,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].glisse { animation: dep-aller 4.6s var(--courbe) infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].tampon,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].tampon,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].tampon,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].tampon,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].tampon,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].tampon,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].tampon,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].tampon { animation: dep-tamponner 3.2s var(--courbe-sortie) infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].scanneur,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].scanneur,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].scanneur,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].scanneur,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].scanneur,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].scanneur,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].scanneur,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].scanneur { animation: dep-balayer 5.2s ease-in-out infinite alternate; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].convoye,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].convoye,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].convoye,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].convoye,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].convoye,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].convoye,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].convoye,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].convoye { animation: dep-convoyeur 3s linear infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].presse,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].presse,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].presse,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].presse,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].presse,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].presse,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].presse,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].presse { animation: dep-presser 3s ease-in-out infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].chariot-elevateur,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].chariot-elevateur,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].chariot-elevateur,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].chariot-elevateur,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].chariot-elevateur,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].chariot-elevateur,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].chariot-elevateur,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].chariot-elevateur { animation: dep-aller 6s var(--courbe) infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].pont,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].pont,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].pont,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].pont,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].pont,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].pont,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].pont,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].pont { animation: dep-balayer 6s ease-in-out infinite alternate; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].camion-route,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].camion-route,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].camion-route,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].camion-route,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].camion-route,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].camion-route,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].camion-route,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].camion-route { animation: dep-rouler 7s linear infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].diable,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].diable,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].diable,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].diable,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].diable,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].diable,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].diable,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].diable { animation: dep-aller 5.4s var(--courbe) infinite; }
.js-mouvement .mb-plan svg[data-actif="0"] [data-poste="0"].envol,
.js-mouvement .mb-plan svg[data-actif="1"] [data-poste="1"].envol,
.js-mouvement .mb-plan svg[data-actif="2"] [data-poste="2"].envol,
.js-mouvement .mb-plan svg[data-actif="3"] [data-poste="3"].envol,
.js-mouvement .mb-plan svg[data-actif="4"] [data-poste="4"].envol,
.js-mouvement .mb-plan svg[data-actif="5"] [data-poste="5"].envol,
.js-mouvement .mb-plan svg[data-actif="6"] [data-poste="6"].envol,
.js-mouvement .mb-plan svg[data-actif="7"] [data-poste="7"].envol { animation: dep-envol 3.2s var(--courbe) infinite; }
/* Les pilules du H de l'agent (le H du logo) : elles apparaissent quand les pixels sont rassemblés, et les pixels s'y fondent. */
.mb-plan svg .agent .jambage { fill: var(--texte); opacity: 0; transition: opacity 400ms var(--courbe); }
.mb-plan svg .agent.est-actif .jambage { opacity: 0.92; transition-delay: 1100ms; }
.js-mouvement .mb-plan svg .agent.est-actif .px:not(.px-signal) { animation: dep-fondre 1.6s var(--courbe) forwards; }
/* Sans animation : le H est déjà formé. */
.no-mouvement .mb-plan svg .agent .px:not(.px-signal), html:not(.js) .mb-plan svg .agent .px:not(.px-signal) { opacity: 0; }
.no-mouvement .mb-plan svg .agent .jambage, html:not(.js) .mb-plan svg .agent .jambage { opacity: 0.92; transition: none; }
/* Menu Secteurs B : séquence des postes dans l'aperçu (outils/menu_b_sequence.py) */
.mb-img.a-plan img { visibility: hidden; }
.mb-plan.est-anime .objets > g { animation: none; }
.mb-plan .est-poste { animation: mb-monte 560ms var(--courbe-sortie) both; animation-delay: calc(var(--i, 0) * 14ms); }
.mb-pouls__onde, .mb-pouls__point, .mb-pouls__halo { opacity: 0; }
.mb-pouls.est-pulse .mb-pouls__onde { animation: mb-onde 1.7s ease-out both; transform-box: fill-box; transform-origin: center; }
.mb-pouls.est-pulse .mb-pouls__onde + .mb-pouls__onde { animation-delay: .45s; }
.mb-pouls.est-pulse .mb-pouls__point, .mb-pouls.est-pulse .mb-pouls__halo { opacity: 1; }
.mb-pouls.est-pulse .mb-pouls__halo { animation: mb-halo 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes mb-halo { to { scale: 1.6; opacity: .35; } }
.mb-etape { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #FDFDFC 92%, transparent); color: #21201C; box-shadow: 0 6px 20px rgba(16,18,17,.08); opacity: 0; transition: opacity 200ms; }
.mb-img.a-plan .mb-etape { opacity: 1; }
.mb-etape__num { font-family: var(--police-donnees); font-size: .75rem; color: #63635E; }
.mb-etape__nom { font-family: var(--police-titres); font-weight: 600; font-size: .95rem; }
.mb-etape__ligne { grid-column: 2; font-size: .82rem; color: #4a4a46; }
.mb-etape__points { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 6px; }
.mb-etape__points i { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, #21201C 14%, transparent); }
.mb-etape__points i.est-actif { background: #6c9a1f; }
@media (prefers-reduced-motion: reduce) { .mb-plan .est-poste, .mb-pouls .mb-pouls__onde, .mb-pouls .mb-pouls__halo { animation: none !important; } .mb-etape { transition: none; } }

/* ---------- Menu Produit M2c (choix de Marc-André, 3 nov.) : modules à gauche, aperçu noir à droite ---------- */
.m2c-panneau { width: min(1040px, calc(100vw - 32px)); padding: 28px; gap: 18px; }
.m2c-menu { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.4fr; gap: 28px; align-items: stretch; }
.m2c-je { margin: 0 0 10px 4px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #55554F; }
.m2c-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.m2c-entree { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 18px 12px 24px; border-radius: 12px; color: #21201C; text-decoration: none; }
.m2c-lib { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m2c-nom { font-size: 19px; font-weight: 700; line-height: 1.25; }
.m2c-bes { font-size: 15px; font-weight: 500; color: #55554F; }
.m2c-fl { flex: none; width: 18px; height: 18px; opacity: 0; }
.m2c-entree:hover, .m2c-entree[aria-current="true"] { background: #F0EEE9; }
.m2c-entree[aria-current="true"] .m2c-fl { opacity: 1; }
.m2c-entree[aria-current="true"]::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: #C6F432; box-shadow: 0 0 0 1px #3F5200; }
.m2c-entree:focus-visible, .m2c-bas a:focus-visible { outline: 3px solid #21201C; outline-offset: 2px; }
.m2c-carte { background: #101211; color: #ECEEED; border-radius: 18px; padding: 30px; min-height: 290px; display: flex; }
.m2c-volet { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: center; width: 100%; }
.m2c-volet[hidden] { display: none; }
.m2c-etiq { margin: 0; color: #C6F432; font-size: 14px; font-weight: 600; }
.m2c-titre { margin: 6px 0 10px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #FFFFFF; }
.m2c-phrase { margin: 0 0 18px; color: #C9CFCC; }
.m2c-voir { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.m2c-voir:focus-visible { outline: 3px solid #C6F432; outline-offset: 2px; border-radius: 4px; }
.m2c-visuel { aspect-ratio: 1; border-radius: 14px; background: #1B1E1C; display: grid; place-items: center; }
.m2c-visuel svg { width: 80%; height: 80%; }
.m2c-bas { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; color: #55554F; padding: 0 4px; }
.m2c-bas a { display: inline-flex; align-items: center; min-height: 44px; color: #21201C; text-underline-offset: 4px; }
.m2c-tout { font-weight: 600; }
.js-mouvement .m2c-volet:not([hidden]) { animation: m2c-entre 220ms ease-out; }
@keyframes m2c-entre { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .m2c-volet { animation: none !important; } }
/* Tiroir du téléphone : la liste, la flèche toujours visible et sur la même ligne */
.m2c-tel { padding: 4px 0 12px; }
.m2c-tel .m2c-entree { padding: 12px 12px; }
.m2c-tel .m2c-fl { opacity: 1; }
.m2c-tel .m2c-nom { font-size: 18px; }
.m2c-tel .m2c-bas { flex-direction: column; align-items: flex-start; padding: 8px 12px 0; }

/* Produit et Solutions : même boîte au grand écran (demande de Marc-André, 3 nov.) — aucun saut d'un menu à l'autre. */
@media (min-width: 1024px) {
  #nm-produit, #nm-solutions { box-sizing: border-box; width: min(1200px, calc(100vw - 32px)); height: min(540px, calc(100svh - var(--barre, 72px) - 24px)); max-height: none; }
  #nm-produit { padding: 28px 32px; }
  #nm-produit .m2c-menu { height: 100%; grid-template-columns: minmax(300px, 0.9fr) 1.3fr; }
  #nm-produit .m2c-carte { min-height: 0; }
  #nm-solutions > .nm-secteurs-b, #nm-solutions .nm-secteurs-b { height: 100%; }
}

/* Hiérarchie de la carte du menu Produit (pt511u) : le texte héritait de la taille de base du site,
   qui grandit sur grand écran (32 px en 4K), alors que le titre restait fixe à 26 px. Tailles explicites, ratio ≈ 1,75. */
.m2c-etiq { font-size: clamp(14px, .25vw + 10.5px, 16px); letter-spacing: .01em; }
.m2c-titre { margin: 8px 0 12px; font-size: clamp(32px, .96vw + 21px, 38px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.m2c-phrase { margin: 0 0 16px; font-size: clamp(18px, .55vw + 12px, 22px); line-height: 1.42; max-width: 36ch; }
.m2c-voir { font-size: clamp(16px, .4vw + 10px, 19px); }
@media (max-width: 600px) { .m2c-titre { font-size: 30px; } .m2c-phrase { font-size: 18px; } }

/* Aucun défilement interne dans Produit et Solutions (pt513u). Cause : boîte fixée à 540 px + .nm-cascade en overflow:auto ;
   au-delà de 1440 px (et en 4K, police de base 30 px), le contenu dépassait (Produit 575-583 px, Solutions 615 px) et défilait.
   Les deux menus gardent exactement la même taille à un écran donné. */
@media (min-width: 1024px) {
  .nm-panneau > .nm-cascade, #nm-produit .m2c-menu, #nm-solutions .nm-secteurs-b { overflow: visible; overscroll-behavior: auto; }
  #nm-produit, #nm-solutions { height: 560px; max-height: none; overflow: visible; }
}
@media (min-width: 1600px) {
  #nm-produit, #nm-solutions { height: 640px; }
}