/* « HUB IA au travail, dans chaque département » : la scène isométrique de l'accueil.
   Reprise de la scène d'usine de Mind Robotics (étude du 14 octobre 2026) : un étage dessiné au trait,
   la caméra passe d'un poste à l'autre au défilement, une fiche en bas à droite dit ce qui s'y passe.
   Chez nous, l'étage est celui d'une entreprise, et l'ouvrier est l'agent de HUB IA, fait de pixels. */

.departements { height: 640svh; padding: 0; background: var(--fond); }
.departements__scene { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.departements__plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Le dessin : faces pleines et claires, contour fin qui ne grossit pas avec le zoom. */
.departements__plan path, .departements__plan ellipse { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.departements__plan .sol { fill: var(--fond); }
.departements__plan .trame-sol { fill: none; stroke: color-mix(in srgb, var(--texte) 12%, transparent); stroke-width: 1; }
.departements__plan .fil { fill: none; stroke: color-mix(in srgb, var(--texte) 30%, transparent); stroke-width: 1.4; stroke-dasharray: 2 9; }
.departements__plan .iso .h { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .iso .g { fill: color-mix(in srgb, var(--texte) 7%, var(--surface)); stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .iso .d { fill: color-mix(in srgb, var(--texte) 13%, var(--surface)); stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .iso.ecran .ecran-face { fill: var(--accent-2); }
.departements__plan .iso.ecran .h, .departements__plan .iso.ecran .d { fill: color-mix(in srgb, var(--accent-2) 70%, var(--surface)); }
.departements__plan .vitre { fill: color-mix(in srgb, var(--accent-2) 88%, var(--surface)); stroke: none; }
.departements__plan .ui { fill: none; stroke: color-mix(in srgb, var(--sur-accent-2) 55%, transparent); stroke-width: 1.6; }
.departements__plan .ui-signal { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.departements__plan .ui-plein { fill: color-mix(in srgb, var(--sur-accent-2) 45%, transparent); stroke: none; }
.departements__plan .ui-plein-signal, .departements__plan .ui-point { fill: var(--accent); stroke: none; }
.departements__plan .iso.papier-signal .h, .departements__plan .iso.papier-signal .g, .departements__plan .iso.papier-signal .d,
.departements__plan .iso.caisse-signal .h { fill: var(--accent); }
.departements__plan .iso.papier-signal .g, .departements__plan .iso.papier-signal .d { fill: color-mix(in srgb, var(--accent) 78%, var(--texte)); }
.departements__plan .iso.objet-sombre .h, .departements__plan .iso.objet-sombre .g, .departements__plan .iso.objet-sombre .d,
.departements__plan .iso.patte .g, .departements__plan .iso.patte .d, .departements__plan .iso.pied-ecran .g, .departements__plan .iso.pied-ecran .d { fill: var(--accent-2); }
.departements__plan .iso.cabine .h, .departements__plan .iso.cabine .g { fill: var(--surface); }
.departements__plan .iso.vitre-cabine .g, .departements__plan .iso.vitre-cabine .d { fill: color-mix(in srgb, var(--accent-2) 80%, var(--surface)); }
.departements__plan .iso.mur .g { fill: var(--surface); }
.departements__plan .iso.quai .h { fill: color-mix(in srgb, var(--texte) 4%, var(--surface)); }
.departements__plan .roue { fill: var(--accent-2); stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .moyeu { fill: var(--accent); stroke: none; }
.departements__plan .ruban { fill: none; stroke: color-mix(in srgb, var(--texte) 40%, transparent); stroke-width: 3; }
.departements__plan .ruban-signal { fill: none; stroke: var(--accent); stroke-width: 4; }
.departements__plan .tiroir { fill: none; stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .bac .h, .departements__plan .bac .d { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .feuillage { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.departements__plan .allee { fill: var(--surface); stroke: color-mix(in srgb, var(--texte) 35%, transparent); stroke-width: 1; }
.departements__plan .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); }
.departements__plan .agent.est-actif .grain { opacity: 0.55; transform: none; }

/* Le dossier qui circule d'un poste à l'autre */
.departements__plan .paquet rect { fill: var(--accent); stroke: var(--texte); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.departements__plan .paquet { opacity: 0; transition: opacity 300ms var(--courbe); }
.departements.est-en-route .departements__plan .paquet { opacity: 1; }

/* L'agent : un H de pixels et des croix. Au repos, dispersé et pâle ; au poste actif, rassemblé. */
.departements__plan .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); }
.departements__plan .agent .px-signal { fill: var(--accent); stroke: var(--texte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.departements__plan .agent .croix { fill: none; stroke: var(--texte); stroke-width: 1.6; opacity: 0; transition: opacity 500ms var(--courbe); transition-delay: calc(var(--r) + 300ms); }
.departements__plan .agent .croix-signal { stroke: color-mix(in srgb, var(--accent) 70%, var(--texte)); }
.departements__plan .agent.est-actif .px { transform: none; opacity: 0.92; }
.departements__plan .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 .departements__plan .agent.est-actif { animation: dep-ronde 8s var(--courbe) 1.6s infinite; }
@keyframes dep-ronde { 0%, 16% { transform: translate(0, 0); } 8% { transform: translate(0, -6px); } 40%, 58% { transform: translate(var(--ax), var(--ay)); } 49% { transform: translate(var(--ax), calc(var(--ay) - 6px)); } 82%, 100% { transform: translate(0, 0); } }

/* Le titre en deux pastilles, en haut à gauche, comme chez Mind Robotics */
.departements__titre { position: absolute; z-index: 2; left: var(--gouttiere); top: calc(var(--barre) + 16px); max-width: min(560px, 80vw); display: grid; gap: var(--e-3); pointer-events: none; }
.departements__titre h2 { display: grid; justify-items: start; gap: 6px; white-space: nowrap; font-size: clamp(1.6rem, calc(1rem + 1.9vw), 3rem); letter-spacing: -0.03em; line-height: 1; }
.departements__titre .pastille { padding: 0.12em 0.42em 0.18em; }
@media (max-width: 400px) { .departements__titre h2 { white-space: normal; } .departements__titre .pastille { max-width: calc(100vw - 2 * var(--gouttiere)); } }
.departements__titre .pastille--claire { background: var(--surface); color: var(--texte); display: inline-flex; align-items: center; gap: 0.35em; }
.departements__titre .pastille--claire::before { content: ""; width: 0.62em; height: 0.62em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--sphere-clair), var(--accent) 55%, var(--sphere-sombre)); }
.departements__intro { max-width: 46ch; font-size: var(--t-s); color: var(--texte-doux); background: color-mix(in srgb, var(--fond) 86%, transparent); padding: 6px 0; }

/* Les fiches : une seule visible à la fois, en bas à droite */
.departements__fiches { position: absolute; z-index: 2; right: var(--gouttiere); bottom: var(--fiches-bas, clamp(16px, 4vh, 40px)); width: min(380px, calc(100% - 2 * var(--gouttiere))); margin: 0; padding: 0; list-style: none; display: grid; }
.fiche-dep { grid-area: 1 / 1; background: var(--surface); border: var(--trame) solid var(--bordure); border-radius: var(--rayon); padding: var(--e-4) var(--e-6) var(--e-6); display: grid; gap: var(--e-2); align-content: start; }
.js-mouvement .fiche-dep { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--courbe), transform 520ms var(--courbe-sortie); pointer-events: none; }
.js-mouvement .fiche-dep.est-actif { opacity: 1; transform: none; pointer-events: auto; }
.fiche-dep h3 { font-size: var(--t-l); letter-spacing: -0.02em; }
.fiche-dep__question { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: 1.125rem; letter-spacing: -0.015em; }
.fiche-dep p { font-size: var(--t-s); color: var(--texte-doux); }
.fiche-dep strong { color: var(--texte); font-weight: 600; }
/* Les points de progression, dans le bas de la fiche (comme la barre de la fiche de Mind Robotics). */
.departements__points { position: absolute; z-index: 3; right: calc(var(--gouttiere) + var(--e-4)); bottom: calc(var(--fiches-bas, clamp(16px, 4vh, 40px)) + var(--e-4)); display: flex; align-items: center; gap: 0; }
.js-mouvement .fiche-dep { padding-bottom: calc(var(--e-6) + 26px); }
/* Chaque point est une cible de 24 px ; le point visible (10 px) et la barre de progression sont dessinés dedans. */
.departements__points button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: width 300ms var(--courbe); }
.departements__points button::after { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--texte) 18%, transparent); }
.departements__points button[aria-current="step"] { width: 78px; }
.departements__points button[aria-current="step"]::before { content: ""; position: absolute; z-index: 1; left: 7px; top: 7px; height: 10px; width: calc(var(--avance, 0) * (100% - 14px)); background: var(--accent); border-radius: 999px; }

/* Sans mouvement ou sans script : l'étage en entier, puis les six fiches en liste. */
.no-mouvement .departements, html:not(.js) .departements { height: auto; }
.no-mouvement .departements__scene, html:not(.js) .departements__scene { position: relative; height: auto; overflow: visible; display: grid; gap: var(--e-6); padding: calc(var(--barre) + 24px) var(--gouttiere) 64px; }
.no-mouvement .departements__plan, html:not(.js) .departements__plan { position: relative; height: auto; aspect-ratio: 16 / 9; }
.no-mouvement .departements__titre, .no-mouvement .departements__fiches, html:not(.js) .departements__titre, html:not(.js) .departements__fiches { position: relative; inset: auto; width: auto; max-width: none; }
.no-mouvement .departements__fiches, html:not(.js) .departements__fiches { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-4); }
.no-mouvement .fiche-dep, html:not(.js) .fiche-dep { grid-area: auto; }
.no-mouvement .departements__points, html:not(.js) .departements__points { display: none; }

@media (max-width: 759px) {
  .departements { height: 560svh; }
  .departements { --fiches-bas: 12px; }
  .departements__fiches { left: var(--gouttiere); right: var(--gouttiere); width: auto; }
  .departements__intro { display: none; }
}

/* 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.) */
.departements__plan .trace { stroke-dasharray: 260; }
.departements__plan .frappe { stroke-dasharray: 120; }
.departements__plan .barre-graph, .departements__plan .feuille, .departements__plan .caisse-mobile, .departements__plan .bulle-dep, .departements__plan .tampon, .departements__plan .feuilles { transform-box: fill-box; }
.departements__plan .barre-graph { transform-origin: 50% 100%; }
.departements__plan .bulle-dep { transform-origin: 30% 100%; }
.departements__plan .tampon, .departements__plan .agent .flux { transform-origin: center; }
.departements__plan .feuilles { transform-origin: 50% 100%; }
.departements__plan .onde-tel { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.departements__plan .bulle-fond, .departements__plan .bulle-queue { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.departements__plan .bulle-point { fill: var(--texte); }
.departements__plan .tampon-rond { fill: var(--accent); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.departements__plan .tampon-coche { fill: none; stroke: var(--sur-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.departements__plan .agent .flux { fill: var(--texte); opacity: 0; transform-box: fill-box; }
.js-mouvement .departements__plan .agent.est-actif .flux { animation: dep-flux 2.4s var(--courbe) infinite; animation-delay: calc(1.2s + var(--r)); }
.js-mouvement .departements__plan .fil { animation: dep-fil 1.4s linear infinite; }
.js-mouvement .departements__plan .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. */
.departements__plan .iso.plan-feuille .h, .departements__plan .iso.plan-feuille .g, .departements__plan .iso.plan-feuille .d { fill: color-mix(in srgb, var(--texte) 4%, var(--surface)); }
.departements__plan .plan-trait { fill: none; stroke: color-mix(in srgb, var(--texte) 62%, transparent); stroke-width: 1.4; }
.departements__plan .iso.scanneur-barre .h { fill: var(--surface); }
.departements__plan .iso.scanneur-barre .g, .departements__plan .iso.scanneur-barre .d { fill: color-mix(in srgb, var(--texte) 18%, var(--surface)); }
.departements__plan .plan-porte { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.departements__plan .plan-cote { fill: none; stroke: color-mix(in srgb, var(--texte) 38%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.departements__plan .scan-ligne { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.departements__plan .iso.rouleau .h, .departements__plan .iso.rouleau .d { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .iso.tapis .h { fill: color-mix(in srgb, var(--accent-2) 88%, var(--surface)); }
.departements__plan .courroie { fill: none; stroke: color-mix(in srgb, var(--sur-accent-2) 65%, transparent); stroke-width: 2; stroke-dasharray: 6 26; }
.departements__plan .iso.poutre .h { fill: var(--accent); }
.departements__plan .iso.poutre .g, .departements__plan .iso.poutre .d { fill: color-mix(in srgb, var(--accent) 70%, var(--texte)); }
.departements__plan .cable { fill: none; stroke: var(--texte); stroke-width: 1.4; }
.departements__plan .iso.route .h { fill: color-mix(in srgb, var(--accent-2) 82%, var(--surface)); }
.departements__plan .marquage { fill: none; stroke: var(--surface); stroke-width: 3; stroke-dasharray: 40 34; }
.departements__plan .iso.panneau-route .h, .departements__plan .iso.panneau-route .g, .departements__plan .iso.panneau-route .d { fill: var(--accent); }
.departements__plan .porte { fill: var(--accent-2); stroke: var(--texte); stroke-width: 1.1; }
.departements__plan .etats-fond { fill: var(--surface); stroke: var(--texte); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.departements__plan .etat-point { fill: color-mix(in srgb, var(--texte) 22%, var(--surface)); }
.departements__plan .envol { opacity: 0; }
html:not(.js-mouvement) .departements__plan .envol { opacity: 1; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .trace,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .trace,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .trace,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .trace,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .trace,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .trace,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .trace,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .trace { animation: dep-tracer 2.8s var(--courbe) infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .frappe,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .frappe,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .frappe,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .frappe,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .frappe,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .frappe,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .frappe,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .frappe { animation: dep-frappe 3.2s var(--courbe) infinite calc(var(--k, 0) * 380ms); }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .barre-graph,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .barre-graph,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .barre-graph,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .barre-graph,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .barre-graph,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .barre-graph,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .barre-graph,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .barre-graph { animation: dep-pousser 2.6s var(--courbe-sortie) infinite calc(var(--k, 0) * 140ms); }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .tuile,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .tuile,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .tuile,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .tuile,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .tuile,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .tuile,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .tuile,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .tuile { animation: dep-clignoter 2.4s ease-in-out infinite calc(var(--k, 0) * 320ms); }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .onde-tel,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .onde-tel,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .onde-tel,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .onde-tel,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .onde-tel,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .onde-tel,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .onde-tel,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .onde-tel { animation: dep-sonner 1.6s ease-out infinite calc(var(--k, 0) * 160ms); }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .bulle-point,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .bulle-point,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .bulle-point,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .bulle-point,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .bulle-point,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .bulle-point,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .bulle-point,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .bulle-point { animation: dep-taper 1.1s ease-in-out infinite calc(var(--k, 0) * 160ms); }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .courroie,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .courroie,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .courroie,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .courroie,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .courroie,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .courroie,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .courroie,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .courroie { animation: dep-courroie 1.2s linear infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .marquage,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .marquage,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .marquage,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .marquage,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .marquage,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .marquage,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .marquage,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .marquage { animation: dep-marquage 0.9s linear infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .etat-point,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .etat-point,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .etat-point,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .etat-point,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .etat-point,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .etat-point,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .etat-point,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .etat-point { animation: dep-etats 4s steps(1, end) infinite calc(var(--k, 0) * 1s); }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .repere .h,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .repere .h,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .repere .h,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .repere .h,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .repere .h,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .repere .h,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .repere .h,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .repere .h { animation: dep-repere 2.4s ease-in-out infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"] .scan-ligne,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"] .scan-ligne,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"] .scan-ligne,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"] .scan-ligne,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"] .scan-ligne,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"] .scan-ligne,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"] .scan-ligne,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"] .scan-ligne { animation: dep-lueur 1.4s ease-in-out infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].telephone,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].telephone,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].telephone,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].telephone,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].telephone,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].telephone,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].telephone,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].telephone { animation: dep-vibrer 1.6s ease-in-out infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].bulle-dep,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].bulle-dep,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].bulle-dep,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].bulle-dep,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].bulle-dep,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].bulle-dep,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].bulle-dep,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].bulle-dep { animation: dep-bulle 4.2s var(--courbe-sortie) infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].glisse,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].glisse,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].glisse,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].glisse,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].glisse,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].glisse,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].glisse,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].glisse { animation: dep-aller 4.6s var(--courbe) infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].tampon,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].tampon,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].tampon,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].tampon,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].tampon,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].tampon,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].tampon,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].tampon { animation: dep-tamponner 3.2s var(--courbe-sortie) infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].scanneur,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].scanneur,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].scanneur,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].scanneur,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].scanneur,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].scanneur,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].scanneur,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].scanneur { animation: dep-balayer 5.2s ease-in-out infinite alternate; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].convoye,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].convoye,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].convoye,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].convoye,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].convoye,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].convoye,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].convoye,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].convoye { animation: dep-convoyeur 3s linear infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].presse,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].presse,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].presse,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].presse,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].presse,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].presse,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].presse,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].presse { animation: dep-presser 3s ease-in-out infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].chariot-elevateur,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].chariot-elevateur,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].chariot-elevateur,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].chariot-elevateur,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].chariot-elevateur,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].chariot-elevateur,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].chariot-elevateur,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].chariot-elevateur { animation: dep-aller 6s var(--courbe) infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].pont,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].pont,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].pont,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].pont,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].pont,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].pont,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].pont,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].pont { animation: dep-balayer 6s ease-in-out infinite alternate; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].camion-route,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].camion-route,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].camion-route,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].camion-route,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].camion-route,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].camion-route,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].camion-route,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].camion-route { animation: dep-rouler 7s linear infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].diable,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].diable,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].diable,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].diable,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].diable,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].diable,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].diable,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].diable { animation: dep-aller 5.4s var(--courbe) infinite; }
.js-mouvement .departements__plan[data-actif="0"] [data-poste="0"].envol,
.js-mouvement .departements__plan[data-actif="1"] [data-poste="1"].envol,
.js-mouvement .departements__plan[data-actif="2"] [data-poste="2"].envol,
.js-mouvement .departements__plan[data-actif="3"] [data-poste="3"].envol,
.js-mouvement .departements__plan[data-actif="4"] [data-poste="4"].envol,
.js-mouvement .departements__plan[data-actif="5"] [data-poste="5"].envol,
.js-mouvement .departements__plan[data-actif="6"] [data-poste="6"].envol,
.js-mouvement .departements__plan[data-actif="7"] [data-poste="7"].envol { animation: dep-envol 3.2s var(--courbe) infinite; }
@keyframes dep-tracer { 0% { stroke-dashoffset: 260; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes dep-pousser { 0% { transform: scaleY(0.15); } 45%, 100% { transform: scaleY(1); } }
@keyframes dep-clignoter { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dep-sortir { 0% { transform: translate(-8px, -5px); opacity: 0; } 25% { opacity: 1; } 60%, 100% { transform: none; opacity: 1; } }
@keyframes dep-charger { 0%, 10% { transform: none; opacity: 1; } 70% { transform: translate(78px, 45px); opacity: 1; } 80%, 100% { transform: translate(90px, 52px); opacity: 0; } }
@keyframes dep-frappe { 0% { stroke-dashoffset: 120; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes dep-tarif { 0% { opacity: 1; } 33.34%, 100% { opacity: 0.18; } }
@keyframes dep-sonner { 0% { opacity: 0; } 15% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes dep-vibrer { 0%, 30%, 100% { transform: translate(0, 0); } 5%, 15% { transform: translate(-1.6px, 0); } 10%, 20% { transform: translate(1.6px, 0); } }
@keyframes dep-bulle { 0% { transform: scale(0.2); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 78% { transform: scale(1); opacity: 1; } 90%, 100% { transform: scale(0.9); opacity: 0; } }
@keyframes dep-taper { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes dep-aller { 0%, 12% { transform: translate(0, 0); } 45%, 58% { transform: translate(var(--vx), var(--vy)); } 90%, 100% { transform: translate(0, 0); } }
@keyframes dep-tamponner { 0%, 32% { transform: scale(1.7); opacity: 0; } 40% { transform: scale(0.9); opacity: 1; } 46% { transform: scale(1); opacity: 1; } 86% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes dep-flux { 0% { transform: translate(var(--fx), var(--fy)) scale(1); opacity: 0; } 14% { opacity: 0.85; } 72% { transform: translate(0, 0) scale(0.4); opacity: 0.9; fill: var(--accent); } 80%, 100% { transform: translate(0, 0) scale(0.2); opacity: 0; } }
@keyframes dep-fil { to { stroke-dashoffset: -22; } }
@keyframes dep-vent { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes dep-balayer { from { transform: translate(0, 0); } to { transform: translate(var(--vx), var(--vy)); } }
@keyframes dep-convoyeur { from { transform: translate(0, 0); } to { transform: translate(var(--vx), var(--vy)); } }
@keyframes dep-presser { 0%, 55%, 100% { transform: translate(0, 0); } 25%, 35% { transform: translate(0, 16px); } }
@keyframes dep-rouler { 0% { transform: translate(calc(var(--vx) * -1), calc(var(--vy) * -1)); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translate(var(--vx), var(--vy)); opacity: 0; } }
@keyframes dep-courroie { to { stroke-dashoffset: -32; } }
@keyframes dep-marquage { to { stroke-dashoffset: 74; } }
@keyframes dep-etats { 0% { fill: var(--accent); } 25%, 100% { fill: color-mix(in srgb, var(--texte) 22%, var(--surface)); } }
@keyframes dep-repere { 0%, 100% { fill: var(--surface); } 50% { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); } }
@keyframes dep-lueur { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes dep-envol { 0%, 45% { transform: translate(0, 0); opacity: 0; } 55% { opacity: 1; } 100% { transform: translate(60px, -90px); opacity: 0; } }

/* 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. */
.departements__plan .agent .jambage { fill: var(--texte); opacity: 0; transition: opacity 400ms var(--courbe); }
.departements__plan .agent.est-actif .jambage { opacity: 0.92; transition-delay: 1100ms; }
.js-mouvement .departements__plan .agent.est-actif .px:not(.px-signal) { animation: dep-fondre 1.6s var(--courbe) forwards; }
@keyframes dep-fondre { 0%, 70% { opacity: 0.92; } 100% { opacity: 0; } }
/* Sans animation : le H est déjà formé. */
.no-mouvement .departements__plan .agent .px:not(.px-signal), html:not(.js) .departements__plan .agent .px:not(.px-signal) { opacity: 0; }
.no-mouvement .departements__plan .agent .jambage, html:not(.js) .departements__plan .agent .jambage { opacity: 0.92; transition: none; }

/* L'introduction s'efface après le premier poste ; sur un écran bas, la fiche se fait plus courte. */
.departements__intro { transition: opacity 400ms var(--courbe); }
.js-mouvement .departements.apres-premier .departements__intro { opacity: 0; }
@media (max-height: 640px) { .fiche-dep__question { display: none; } }