/* Hébergement (sur blanc), intégré depuis exploration-immersive/hebergement.css.
   Toutes les règles sont limitées à #deployment ; la section garde cet identifiant pour le menu. */
/* Hébergement sur blanc : un schéma du trajet des données. Les cadres pointillés (votre environnement, l'hébergement
   Citrail) sont placés par hebergement.js autour des nœuds et suivent le mode choisi ; un paquet fait l'aller-retour
   vers le modèle. Or réservé au marqueur de donnée personnelle rétablie. */



#deployment{--noir:#0a0a0a;--blanc:#fafafa;--encre:#0a0a0a;--encre-2:#5c5c5c;--encre-3:#6b6b6b;--filet:#e4e4e4;--or-lisible:#7a5718;--ease:cubic-bezier(.16,1,.3,1)}
#deployment,#deployment *{box-sizing:border-box}
#deployment{margin:0;background:var(--noir);color:var(--encre);font:16px/1.55 Inter,system-ui,sans-serif;overflow-x:clip}
#deployment h2,#deployment p,#deployment dl,#deployment dd,#deployment ul{margin:0;padding:0}

#deployment.heb{background:var(--blanc)}
#deployment .heb-plateau{max-width:1280px;margin:0 auto;padding:16vh 5vw 14vh}
#deployment.heb h2{max-width:26ch;font-size:var(--titre-section,clamp(30px,3.2vw,48px));font-weight:600;line-height:1.08;letter-spacing:-.035em}
#deployment.heb h2 span{color:#7a7a7a}

/* Les trois situations, qui défilent seules : un repère par situation, sa barre se remplit. */
#deployment .heb-etapes ol{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:720px;margin:40px 0 0;padding:0;list-style:none}
#deployment .heb-etapes li{position:relative;border-top:2px solid var(--filet)}
#deployment .heb-etapes i{position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--encre)}
#deployment .heb-etapes li.fait i{width:100%}
#deployment .heb-etapes li.actif i{width:calc(var(--progres,0) * 100%)}
#deployment .heb-etapes button{width:100%;padding:10px 0 0;border:0;background:none;color:var(--encre-3);font:500 14px/1.3 Inter,sans-serif;text-align:left;cursor:pointer}
#deployment .heb-etapes li.actif button{color:var(--encre)}
#deployment .heb-etapes button:hover{color:var(--encre-2)}
#deployment .heb-etapes button:focus-visible{outline:2px solid var(--encre);outline-offset:3px}

/* La scène : nœuds en grille, cadres et liens posés par-dessus. */
#deployment .heb-scene{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"e c c m" "d c c m";gap:92px 24px;align-items:center;margin-top:36px;padding:56px 40px 110px}
#deployment .heb-liens{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#deployment .heb-liens path{fill:none;stroke:#c8c8c8;stroke-width:1.5}
#deployment .heb-cadre{position:absolute;border:1.5px dashed #b8b8b8;border-radius:18px;pointer-events:none;
  transition:left .7s var(--ease),top .7s var(--ease),width .7s var(--ease),height .7s var(--ease),opacity .4s}
#deployment .heb-cadre span{position:absolute;top:-11px;left:18px;padding:0 8px;background:var(--blanc);font:12px/22px "IBM Plex Mono",monospace;color:var(--encre-2);white-space:nowrap}
#deployment .heb-cadre-b{border-color:#9a9a9a}
#deployment.heb:not([data-etat="ligne"]) .heb-cadre-b{opacity:0}

#deployment .heb-noeud{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
#deployment .heb-boite{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--filet);border-radius:14px;background:#fff}
#deployment .heb-boite svg{width:24px;height:24px;fill:none;stroke:var(--encre);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#deployment .heb-noeud p{font-size:14px;font-weight:550}
/* La légende pend sous la boîte sans compter dans la grille : toutes les boîtes restent alignées. */
#deployment .heb-legende{position:absolute;top:calc(100% + 10px);left:50%;width:230px;margin-left:-115px;display:flex;flex-direction:column;align-items:center}
#deployment .heb-noeud small{display:block;max-width:22ch;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--encre-3)}
#deployment .heb-citrail .heb-boite{width:64px;height:64px;border-color:#cfcfcf}
#deployment .heb-citrail ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;list-style:none}
#deployment .heb-citrail li{padding:3px 9px;border:1px solid var(--filet);border-radius:99px;background:#fff;font-size:12px;color:var(--encre-2)}
#deployment .heb-retabli{position:absolute;top:-34px;left:50%;padding:3px 10px;border-radius:99px;background:#e2b45c33;font:12px/1.5 "IBM Plex Mono",monospace;color:var(--or-lisible);white-space:nowrap;
  opacity:0;transform:translate(-50%,6px);transition:opacity .4s,transform .5s var(--ease)}
#deployment .heb-retabli.vu{opacity:1;transform:translate(-50%,0)}

/* Le paquet envoyé au modèle, puis la réponse qui revient. */
#deployment .heb-paquet{position:absolute;z-index:2;top:0;left:0;padding:5px 11px;border-radius:99px;background:var(--encre);color:#fff;font:12px/1.4 "IBM Plex Mono",monospace;white-space:nowrap;opacity:0;pointer-events:none}

#deployment .heb-faits{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--filet)}
#deployment .heb-faits dt{font-size:13px;color:var(--encre-3)}
#deployment .heb-faits dd{margin-top:6px;font-size:16px;line-height:1.5}
#deployment .heb-faits code{font:14px "IBM Plex Mono",monospace;color:var(--or-lisible)}
#deployment .heb-note{max-width:80ch;margin-top:28px;font-size:13px;line-height:1.5;color:var(--encre-3)}
#deployment .heb-pages{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px;font-size:14px}
#deployment .heb-pages a{color:var(--encre);text-decoration:underline;text-decoration-color:#c8c8c8;text-underline-offset:4px}
#deployment .heb-pages a:hover{text-decoration-color:var(--encre)}

@media (max-width:900px){
  #deployment .heb-plateau{padding:10vh 5vw 8vh}
  #deployment .heb-scene{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"e d" "c c" "m m";gap:118px 12px;padding:40px 14px 100px}
  #deployment .heb-legende{width:170px;margin-left:-85px}
  #deployment .heb-citrail .heb-legende{width:280px;margin-left:-140px}
  #deployment .heb-noeud[data-noeud="modele"]{margin-top:70px}
  #deployment .heb-faits{grid-template-columns:1fr;gap:18px}
  #deployment .heb-cadre span{left:12px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  #deployment .heb-cadre,#deployment .heb-retabli{transition:none}
}