/* APS — builders/deploy/deploy.css — 2026-10-08
   Le Deploy Builder : la liste à gauche, le dessin au centre, le volet à
   droite. Couleurs par jetons ; le SVG du dessin ne porte que la géométrie.
   Les teintes des machines sont numérotées (dpl-teinte-0…3) dans l'ordre de
   la déclaration : aucune couleur n'est liée à un mot de domaine. */

:root{
  --bg:#0f1011; --bg2:#151718; --bg3:#1a1d1f; --bg4:#202427;
  --text:#eef0f1; --text-dim:#a6b0b8; --border:#262a2e;
  --accent:#d6d233; --deploy:#5dade2; --ok:#27ae60; --warn:#e67e22; --err:#e74c3c;
  --teinte-0:#d6d233; --teinte-1:#5dade2; --teinte-2:#e67e22; --teinte-3:#af7ac5;
  --zone-cloud:#5dade2; --zone-site:#27ae60;
  color-scheme:dark;
}
[hidden]{ display:none !important; }
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:13px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;
  display:flex; flex-direction:column;
}
button, input, textarea, select{ font:inherit; color:inherit; }
.aps-header .breadcrumb{ color:#c7ced3; font-size:12.5px; }
.aps-header .breadcrumb a{ color:#c7ced3; text-decoration:none; }
.aps-header .breadcrumb a:hover{ color:var(--text); }

.dpl-main{ flex:1; display:flex; min-height:0; }

/* ── Liste ───────────────────────────────────────────────────────── */
.dpl-liste{ width:250px; flex-shrink:0; overflow:auto; padding:14px; background:var(--bg2); border-right:1px solid var(--border); }
.dpl-titre{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
/* « Lire un schéma… » sur sa propre ligne, sous le titre : la colonne est étroite. */
.dpl-titre h2{ margin:0; font-size:13px; font-weight:600; flex:1; }
.dpl-aide{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:16px; height:16px; border-radius:50%; border:1px solid var(--border);
  color:var(--text-dim); font-size:10.5px; font-weight:400; cursor:default; user-select:none; vertical-align:middle;
}
.dpl-aide:hover{ border-color:var(--text-dim); color:var(--text); }
.dpl-topologies{ list-style:none; margin:0; padding:0; }
.dpl-topo{ padding:8px 10px; border-radius:7px; cursor:pointer; border:1px solid transparent; display:flex; flex-direction:column; gap:2px; }
.dpl-topo:hover{ background:var(--bg3); }
.dpl-topo[data-choisi="1"]{ border-color:var(--deploy); background:var(--bg3); }
.dpl-topo-nom{ font-weight:550; }
.dpl-topo-sous{ color:var(--text-dim); font-size:11.5px; }

.dpl-form{ display:flex; flex-direction:column; gap:10px; padding:12px 0; margin-bottom:12px; border-bottom:1px solid var(--border); }
.dpl-champ{ display:flex; flex-direction:column; gap:4px; margin:0 0 10px; }
.dpl-champ > span{ color:var(--text-dim); font-size:11.5px; }
.dpl-champ input, .dpl-champ select, .dpl-champ textarea, .dpl-historique, .dpl-bloc > select{
  background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:6px 8px; width:100%;
}
.dpl-champ input:focus, .dpl-champ select:focus, .dpl-champ textarea:focus{ outline:none; border-color:var(--deploy); }
.dpl-champ-case{ flex-direction:row; align-items:center; gap:8px; }
.dpl-champ-case input{ width:auto; }
.dpl-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 10px; }
.dpl-btn{ background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:5px 11px; cursor:pointer; }
.dpl-btn:hover{ border-color:var(--text-dim); }
.dpl-btn-accent{ border-color:var(--deploy); color:var(--deploy); }
.dpl-btn-accent:hover{ background:var(--deploy); color:var(--bg); }
.dpl-btn-discret{ background:transparent; color:var(--text-dim); }
.dpl-avertir{ color:var(--warn); }
.dpl-msg{ font-size:12px; color:var(--text-dim); margin:0; }
.dpl-msg[data-genre="erreur"]{ color:var(--err); }
.dpl-note{ color:var(--text-dim); font-size:12px; margin:4px 0 8px; }
.dpl-ok{ color:var(--ok); }

/* ── Accueil ─────────────────────────────────────────────────────── */
.dpl-accueil{ flex:1; padding:40px 48px; max-width:760px; }
.dpl-accueil h1{ font-size:20px; margin:0 0 8px; }
.dpl-accueil ol{ padding-left:20px; line-height:1.7; }

/* ── Espace ──────────────────────────────────────────────────────── */
.dpl-espace{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.dpl-barre{ display:flex; align-items:center; gap:12px; padding:8px 14px; border-bottom:1px solid var(--border); background:var(--bg2); }
.dpl-nom{ background:transparent; border:1px solid transparent; border-radius:6px; padding:4px 6px; font-size:14px; font-weight:600; min-width:240px; }
.dpl-nom:hover, .dpl-nom:focus{ border-color:var(--border); outline:none; }
.dpl-pastille{ font-size:11.5px; padding:2px 8px; border-radius:10px; border:1px solid var(--deploy); color:var(--deploy); }
.dpl-modes{ display:flex; border:1px solid var(--border); border-radius:7px; overflow:hidden; margin-left:auto; }
.dpl-modes button{ background:transparent; border:0; padding:5px 14px; cursor:pointer; color:var(--text-dim); }
.dpl-modes button + button{ border-left:1px solid var(--border); }
.dpl-modes button[aria-selected="true"]{ background:var(--bg4); color:var(--text); font-weight:600; }
.dpl-ilot{ margin:12px 0 0; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg2); display:flex; flex-direction:column; gap:8px; }
.dpl-ilot h4{ margin:0; font-size:12px; font-weight:600; color:var(--accent); }
.dpl-ilot-etat{ margin:0; font-weight:600; }
.dpl-ilot-etat[data-etat="monte"]{ color:var(--ok); } .dpl-ilot-etat[data-etat="partiel"], .dpl-ilot-etat[data-etat="arrete"]{ color:var(--warn); }
.dpl-ilot-machines{ margin:0; padding-left:16px; font-size:12px; line-height:1.6; }
.dpl-ilot-vm{ font-size:11px; color:var(--text-dim); } .dpl-ilot-vm[data-etat="Running"]{ color:var(--ok); }
.dpl-ilot pre{ max-height:240px; overflow:auto; font-size:11px; }
.dpl-form-hote{ display:flex; flex-direction:column; gap:6px; padding:8px; border:1px dashed var(--border); border-radius:8px; }
.dpl-propres{ margin:12px 0 0; padding:10px 12px; border:1px dashed var(--border); border-radius:8px; }
.dpl-propres h4{ margin:0 0 8px; font-size:12px; font-weight:600; color:var(--deploy); }
.dpl-menu{ position:relative; }
.dpl-menu[hidden]{ display:none; }
.dpl-menu > summary{ list-style:none; cursor:pointer; width:30px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; color:var(--text-dim); font-size:17px; }
.dpl-menu > summary::-webkit-details-marker{ display:none; }
.dpl-menu-liste{ position:absolute; right:0; top:34px; z-index:30; min-width:260px; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:6px; display:flex; flex-direction:column; box-shadow:0 10px 28px rgba(0,0,0,.45); }
.dpl-menu-item{ text-align:left; background:transparent; border:0; border-radius:6px; padding:9px 10px; color:var(--text); cursor:pointer; font:inherit; font-size:13px; }
.dpl-menu-item:hover{ background:var(--bg4); }
.dpl-menu-danger{ color:#f1948a; }
.dpl-retour{ margin-bottom:12px; }
.dpl-prochaine{ background:var(--bg3); border:1px solid var(--deploy); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.dpl-prochaine[data-genre="en_cours"]{ border-color:var(--border); }
.dpl-prochaine[data-genre="attente"]{ border-color:var(--accent); }
.dpl-prochaine strong{ font-size:16px; line-height:1.4; }
.dpl-prochaine-etiquette{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--deploy); }
.dpl-prochaine[data-genre="attente"] .dpl-prochaine-etiquette{ color:var(--accent); }
.dpl-prochaine-bouton{ align-self:flex-start; padding:9px 16px; font-size:14px; }
.dpl-prochaine-bouton.dpl-btn-accent{ background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
.dpl-rapport-etapes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.dpl-rapport-etape{ display:flex; gap:12px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:11px 12px; }
.dpl-rapport-etape[data-etat="avenir"]{ opacity:.6; }
.dpl-rapport-etape[data-etat="echec"]{ border-color:#6e4a26; }
.dpl-rapport-etape[data-etat="en_cours"]{ border-color:var(--deploy); }
.dpl-rapport-rond{ width:26px; height:26px; flex:0 0 26px; border-radius:50%; border:2px solid var(--border); box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--text-dim); }
.dpl-rapport-etape[data-etat="fait"] .dpl-rapport-rond{ background:#1e5c3a; border-color:#1e5c3a; color:#82e0aa; }
.dpl-rapport-etape[data-etat="echec"] .dpl-rapport-rond{ background:#3a2814; border-color:#3a2814; color:#f0b27a; }
.dpl-rapport-etape[data-etat="en_cours"] .dpl-rapport-rond, .dpl-rapport-etape[data-etat="attente"] .dpl-rapport-rond{ border-color:var(--deploy); color:var(--deploy); }
.dpl-rapport-etape[data-etat="a_faire"] .dpl-rapport-rond{ border-color:var(--warn); color:var(--warn); }
.dpl-rapport-corps{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.dpl-rapport-corps strong{ font-size:14px; }
.dpl-rapport-sous{ font-size:12.5px; color:var(--text-dim); }
.dpl-rapport-etape[data-etat="a_faire"] .dpl-rapport-sous{ color:#f0b27a; }
.dpl-rapport-barre{ height:6px; background:var(--bg4); border-radius:3px; overflow:hidden; margin:3px 0; }
.dpl-rapport-barre > span{ display:block; height:6px; width:var(--p, 0%); background:var(--deploy); }
.dpl-rapport-corps .dpl-lien-bouton{ align-self:flex-start; }
.dpl-rapport-detail pre{ max-height:260px; overflow:auto; font-size:11px; }
.dpl-interface{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font-size:13px; margin-top:2px; }
.dpl-interface .dpl-lien-ext{ word-break:break-all; }
.dpl-copiable{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
/* Les machines d'un îlot, à joindre soi-même. */
.dpl-acces{ display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.dpl-acces-ligne{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font-size:12.5px; padding-top:6px; border-top:1px solid var(--border); }
.dpl-acces-ligne strong{ flex-basis:100%; font-size:12.5px; }
.dpl-acces-ligne code{ word-break:break-all; }
.dpl-copier{ font-size:12px; }
.dpl-detail .dpl-copier{ display:block; margin:4px 0 2px; }
.dpl-etat{ font-size:11.5px; color:var(--text-dim); min-width:110px; text-align:right; }
.dpl-etat[data-etat="erreur"]{ color:var(--err); }
.dpl-etat[data-etat="ok"]{ color:var(--ok); }

.dpl-corps{ flex:1; display:flex; min-height:0; }
.dpl-scene{ flex:1; position:relative; display:flex; flex-direction:column; min-width:0; }
.dpl-hote{ flex:1; position:relative; min-width:0; outline:none; background:var(--bg2); }
.dpl-volet{ width:var(--volet-largeur, 380px); flex-shrink:0; overflow:auto; padding:14px 16px; background:var(--bg); border-left:1px solid var(--border); }
/* Le bouton Kid flotte en bas à droite (fixe, 58 px) : la fin du panneau doit pouvoir défiler au-dessus (2026-10-21). */
.dpl-volet{ padding-bottom:76px; }
/* Décrire en tableau de bord (2026-10-16) : le volet est un TIROIR, fermé tant
   qu'une tuile ou « Réglages… » ne l'ouvre pas ; le dessin prend la place. */
.dpl-espace[data-volet="ferme"] .dpl-volet, .dpl-espace[data-volet="ferme"] .dpl-poignee{ display:none; }
/* Le bord gauche du panneau se tire pour l'élargir (2026-10-19). */
.dpl-poignee{ width:6px; flex-shrink:0; margin-right:-6px; position:relative; z-index:2; cursor:ew-resize; }
.dpl-poignee:hover, .dpl-espace[data-redim="1"] .dpl-poignee{ background:color-mix(in srgb, var(--deploy) 45%, transparent); }
.dpl-espace[data-redim="1"]{ user-select:none; }
.dpl-volet-tete{ display:flex; align-items:center; gap:8px; margin:-4px 0 12px; }
.dpl-volet-tete strong{ flex:1; font-size:13px; }
.dpl-volet-fermer{ background:transparent; border:1px solid var(--border); border-radius:7px; color:var(--text-dim); width:30px; height:30px; cursor:pointer; font-size:15px; line-height:1; }
.dpl-volet-fermer:hover{ color:var(--text); border-color:var(--text-dim); }
/* Les tuiles : ce que la topologie est, en un coup d'œil ; chacune ouvre ce qu'elle résume. */
.dpl-tuiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg); }
.dpl-tuile{ text-align:left; font:inherit; color:inherit; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer; display:flex; flex-direction:column; gap:1px; min-width:0; }
.dpl-tuile:hover{ border-color:var(--deploy); }
.dpl-tuile[aria-pressed="true"]{ border-color:var(--deploy); background:var(--bg3); }
.dpl-tuile-titre{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.dpl-tuile-valeur{ font-size:19px; font-weight:600; line-height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dpl-tuile-valeur small{ font-size:12.5px; font-weight:400; color:var(--text-dim); }
.dpl-tuile-sous{ font-size:11.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dpl-tuile[data-niveau="manque"]{ border-color:#6e4a26; }
.dpl-tuile[data-niveau="manque"] .dpl-tuile-titre{ color:var(--warn); }
.dpl-tuile[data-niveau="ok"] .dpl-tuile-titre{ color:var(--ok); }
.dpl-tuile[data-niveau="echec"]{ border-color:#7b2d26; }
.dpl-tuile[data-niveau="echec"] .dpl-tuile-titre{ color:var(--err); }
.dpl-tuile[data-niveau="en_cours"] .dpl-tuile-titre{ color:var(--deploy); }
.dpl-tuile-points{ display:flex; gap:8px; white-space:nowrap; overflow:hidden; }
.dpl-tuile-points span::before{ content:'● '; color:var(--point, var(--text-dim)); }
/* La carte d'une forme, à côté d'elle sur le dessin (au-dessus des pastilles des autres formes). */
.djs-overlay-dpl-carte{ z-index:20; }
.dpl-carte{ width:250px; box-sizing:border-box; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:12px; box-shadow:0 10px 28px rgba(0,0,0,.45); font-size:12.5px; line-height:1.4; display:flex; flex-direction:column; gap:9px; cursor:default; }
.dpl-carte h4{ margin:0; font-size:14px; }
.dpl-carte-sous{ color:var(--text-dim); margin-top:1px; }
.dpl-carte-ligne{ display:flex; flex-direction:column; gap:2px; }
.dpl-carte-ligne > span:first-child{ font-size:11px; color:var(--text-dim); }
.dpl-carte ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; }
.dpl-carte-manque{ color:var(--warn); }
.dpl-carte-manque::before{ content:'! '; font-weight:700; }
.dpl-carte-flux::before{ content:'● '; color:var(--point, var(--text-dim)); }
.dpl-carte .dpl-btn{ align-self:flex-start; }
.dpl-bloc{ padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--border); }
.dpl-bloc h3{ margin:0 0 10px; font-size:13px; font-weight:600; }
/* Sections repliables du volet (2026-10-15) : le titre ouvre et ferme ; replié,
   il garde son compte ou sa valeur. */
.dpl-repli > summary{ list-style:none; cursor:pointer; user-select:none; }
.dpl-repli > summary::-webkit-details-marker{ display:none; }
.dpl-repli > summary h3{ display:flex; align-items:center; gap:7px; margin:0; }
.dpl-repli > summary h3::before{ content:'▸'; color:var(--text-dim); font-size:11px; width:10px; flex-shrink:0; }
.dpl-repli[open] > summary h3::before{ content:'▾'; }
.dpl-repli[open] > summary{ margin-bottom:10px; }
.dpl-repli:not([open]){ padding-bottom:10px; margin-bottom:10px; }
.dpl-compte{ font-size:11px; font-weight:500; color:var(--text-dim); padding:0 7px; border:1px solid var(--border); border-radius:9px; }
.dpl-resume{ font-size:12px; font-weight:400; color:var(--text-dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.dpl-secret{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dpl-secret input, .dpl-secret textarea{ flex:1 1 100%; }
.dpl-secret-etat{ font-size:11px; padding:1px 7px; border-radius:9px; border:1px solid var(--border); color:var(--text-dim); }
.dpl-secret-etat[data-defini="1"]{ border-color:var(--ok); color:var(--ok); }
.dpl-empreinte{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:var(--text-dim); }
.dpl-empreinte code, .dpl-empreinte-vue{ font-size:11px; background:var(--bg3); padding:2px 6px; border-radius:4px; color:var(--text); word-break:break-all; }
.dpl-empreinte-vue{ display:block; margin:6px 0; }

.dpl-manques{ margin:0; padding-left:18px; }
.dpl-manques li{ margin:2px 0; }
.dpl-manques li[data-niveau="manque"]{ color:var(--warn); }
.dpl-manques li[data-niveau="alerte"]{ color:var(--text-dim); }
.dpl-cliquable{ cursor:pointer; text-decoration:underline dotted; }

.dpl-table{ width:100%; border-collapse:collapse; font-size:11.5px; margin-top:8px; }
.dpl-table th, .dpl-table td{ text-align:left; padding:4px 6px; border-bottom:1px solid var(--border); vertical-align:top; }
.dpl-table th{ color:var(--text-dim); font-weight:500; }
.dpl-defile{ overflow-x:auto; }
.dpl-table-flux{ min-width:640px; }
.dpl-table-flux td:last-child{ color:var(--text-dim); }

/* ── Exécutions ──────────────────────────────────────────────────── */
.dpl-exec-tete{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--text-dim); font-size:12px; }
.dpl-journal{ list-style:none; margin:0; padding:0; }
.dpl-etape-machine{ margin:12px 0 4px; font-weight:600; color:var(--deploy); }
.dpl-etape{ padding:5px 0 5px 4px; border-left:2px solid var(--border); padding-left:10px; margin-left:4px; }
.dpl-etape-ligne{ display:flex; gap:8px; align-items:baseline; }
.dpl-etape-signe{ width:14px; flex-shrink:0; text-align:center; color:var(--text-dim); }
.dpl-etape[data-etat="fait"] .dpl-etape-signe, .dpl-etape[data-etat="deja"] .dpl-etape-signe{ color:var(--ok); }
.dpl-etape[data-etat="echec"]{ border-left-color:var(--err); }
.dpl-etape[data-etat="echec"] .dpl-etape-signe, .dpl-etape[data-etat="echec"] .dpl-etape-msg{ color:var(--err); }
.dpl-etape[data-etat="attente"]{ border-left-color:var(--accent); }
.dpl-etape[data-etat="attente"] .dpl-etape-signe{ color:var(--accent); }
.dpl-etape[data-etat="en_cours"]{ border-left-color:var(--deploy); }
.dpl-etape[data-etat="a_faire"] .dpl-etape-titre{ color:var(--text-dim); }
.dpl-etape[data-etat="ignore"] .dpl-etape-titre, .dpl-etape[data-etat="ignore"] .dpl-etape-msg, .dpl-etape[data-etat="ignore"] .dpl-etape-signe{ color:var(--text-dim); }
.dpl-etape-msg{ margin:3px 0 4px 22px; font-size:12px; color:var(--text-dim); }
.dpl-etape .dpl-btn, .dpl-etape .dpl-lien-ext, .dpl-etape .dpl-empreinte-vue{ margin-left:22px; }
.dpl-lien-ext{ display:inline-block; color:var(--deploy); font-size:12px; margin-right:8px; }
.dpl-badge{ font-size:10.5px; padding:0 6px; border-radius:8px; border:1px solid var(--warn); color:var(--warn); }
.dpl-badge-discret{ border-color:var(--border); color:var(--text-dim); }
.dpl-detail{ margin:4px 0 0 22px; }
.dpl-detail summary{ cursor:pointer; color:var(--text-dim); font-size:11.5px; }
.dpl-detail pre{ background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:8px; font-size:11px; max-height:260px; overflow:auto; white-space:pre-wrap; word-break:break-all; }

.dpl-pastille-etat{
  display:inline-block; font-size:11px; padding:1px 8px; border-radius:9px; white-space:nowrap;
  background:var(--bg3); border:1px solid var(--border); color:var(--text-dim);
}
.dpl-pastille-etat[data-etat="termine"]{ border-color:var(--ok); color:var(--ok); }
.dpl-pastille-etat[data-etat="echec"]{ border-color:var(--err); color:var(--err); }
.dpl-pastille-etat[data-etat="attente"]{ border-color:var(--accent); color:var(--accent); }
.dpl-pastille-etat[data-etat="en_cours"]{ border-color:var(--deploy); color:var(--deploy); }
.dpl-pastille-etat[data-etat="arrete"]{ border-color:var(--warn); color:var(--warn); }
.dpl-pastille-etat[data-etat="manque"]{ border-color:var(--warn); color:var(--warn); background:var(--bg); }

/* ── Le dessin ───────────────────────────────────────────────────── */
.dpl-hote .bio-theme-parent{
  --bio-surface:var(--bg2); --bio-surface-overlay:var(--bg3); --bio-surface-subtle:var(--bg3); --bio-surface-medium:var(--bg3);
  --bio-text:var(--text); --bio-text-subtle:var(--text-dim); --bio-text-subtlest:var(--text-dim);
  --bio-border:var(--border); --bio-primary:var(--deploy); --bio-focus:var(--deploy);
  --bio-canvas-accent:var(--deploy); --bio-canvas-accent-subtle:var(--deploy); --bio-selected-surface:var(--bg3);
}
.dpl-hote[data-lecture="1"] .djs-palette, .dpl-hote[data-lecture="1"] .djs-context-pad{ display:none; }

.dpl-zone{ fill:none; stroke:var(--text-dim); stroke-width:1.5px; stroke-dasharray:6 4; }
.dpl-zone[data-nature="cloud"]{ stroke:var(--zone-cloud); }
.dpl-zone[data-nature="site"]{ stroke:var(--zone-site); }
.dpl-zone[data-nature="internet"]{ stroke:var(--text-dim); }
.dpl-zone-nom{ fill:var(--text); font:600 13px/1 system-ui,sans-serif; pointer-events:none; }
.dpl-zone-sous{ fill:var(--text-dim); font:400 11px/1 system-ui,sans-serif; pointer-events:none; }

.dpl-machine{ fill:var(--bg3); stroke-width:1.75px; }
.dpl-teinte-0{ stroke:var(--teinte-0); } .dpl-teinte-1{ stroke:var(--teinte-1); }
.dpl-teinte-2{ stroke:var(--teinte-2); } .dpl-teinte-3{ stroke:var(--teinte-3); }
.dpl-stockage{ fill:var(--bg3); stroke:var(--text-dim); stroke-width:1.5px; }
/* Un service ou un système tiers : rien n'y est installé — trait pointillé. */
.dpl-service{ fill:var(--bg2); stroke:var(--text-dim); stroke-width:1.5px; stroke-dasharray:5 3; }
.dpl-service.dpl-teinte-1{ stroke:var(--teinte-3); }
.dpl-stockage-bord{ fill:none; stroke:var(--text-dim); stroke-width:1.5px; }
.dpl-nom{ fill:var(--text); font:600 12.5px/1 system-ui,sans-serif; pointer-events:none; user-select:none; }
.dpl-sous{ fill:var(--text-dim); font:400 11px/1 system-ui,sans-serif; pointer-events:none; user-select:none; }

.dpl-lien{ fill:none; stroke:var(--text-dim); stroke-width:1.5px; }
.dpl-lien-acces{ stroke:var(--warn); stroke-dasharray:5 4; }
/* Un flux DESSINÉ a sa couleur à lui (2026-10-15) : il prenait le mauve des
   services, à peine distinct de « Base de données » (#a569bd) — « API » sur un
   trait mauve quand la légende dit API en bleu. Même valeur que --flux-6. */
.dpl-lien-flux{ stroke:var(--flux-6); }
/* Plus précis que .dpl-fleche (gris), déclaré plus bas : sans cela la pointe
   d'un flux dessiné restait grise sous un trait coloré. */
.dpl-fleche.dpl-fleche-flux{ fill:var(--flux-6); }
/* …sauf quand sa NATURE dit une autre famille de la légende (2026-10-27). */
.dpl-lien-flux.dpl-trait-0{ stroke:var(--flux-0); } .dpl-fleche.dpl-fleche-flux.dpl-trait-0{ fill:var(--flux-0); }
.dpl-lien-flux.dpl-trait-1{ stroke:var(--flux-1); } .dpl-fleche.dpl-fleche-flux.dpl-trait-1{ fill:var(--flux-1); }
.dpl-lien-flux.dpl-trait-2{ stroke:var(--flux-2); } .dpl-fleche.dpl-fleche-flux.dpl-trait-2{ fill:var(--flux-2); }
.dpl-lien-flux.dpl-trait-3{ stroke:var(--flux-3); } .dpl-fleche.dpl-fleche-flux.dpl-trait-3{ fill:var(--flux-3); }
.dpl-lien-flux.dpl-trait-4{ stroke:var(--flux-4); } .dpl-fleche.dpl-fleche-flux.dpl-trait-4{ fill:var(--flux-4); }
.dpl-lien-flux.dpl-trait-5{ stroke:var(--flux-5); } .dpl-fleche.dpl-fleche-flux.dpl-trait-5{ fill:var(--flux-5); }
.dpl-sens{ display:flex; align-items:center; gap:8px; margin:0 0 10px; color:var(--text-dim); }
.dpl-lien-liaison{ stroke:var(--deploy); stroke-width:5px; stroke-opacity:.45; }
.dpl-etiquette-liaison{ fill:var(--deploy); font-weight:600; }
.dpl-fleche{ fill:var(--text-dim); }
.dpl-fleche-acces{ fill:var(--warn); }
.dpl-etiquette{
  fill:var(--text-dim); font:500 11px/1 system-ui,sans-serif; pointer-events:none;
  paint-order:stroke; stroke:var(--bg2); stroke-width:4px;
}

/* Palette : la forme en miniature, dessinée en CSS. */
.dpl-hote .dpl-pal, .dpl-hote .dpl-pad{ display:flex; align-items:center; justify-content:center; }
.dpl-pal::before, .dpl-pad::before{ content:''; display:block; box-sizing:border-box; border:1.5px solid currentColor; }
.dpl-pal-zone::before{ width:24px; height:18px; border-style:dashed; border-radius:5px; border-color:var(--zone-site); }
.dpl-pal-machine::before{ width:20px; height:14px; border-radius:3px; border-width:2px; }
.dpl-pal-machine.dpl-teinte-0::before{ border-color:var(--teinte-0); }
.dpl-pal-machine.dpl-teinte-1::before{ border-color:var(--teinte-1); }
.dpl-pal-machine.dpl-teinte-2::before{ border-color:var(--teinte-2); }
.dpl-pal-machine.dpl-teinte-3::before{ border-color:var(--teinte-3); }
.dpl-pal-stockage::before{ width:16px; height:18px; border-radius:8px / 4px; }
.dpl-pal-service::before{ width:20px; height:14px; border-radius:7px; border-style:dashed; }
.dpl-pal-service.dpl-teinte-1::before{ border-color:var(--teinte-3); }
.aps-pan-en-cours, .aps-pan-en-cours *{ cursor:grabbing !important; }
.dpl-pal-lasso::before{ width:18px; height:14px; border-style:dashed; border-radius:2px; }
.dpl-pal-relier::before{ content:'↗'; border:0; font-size:16px; line-height:1; }
/* Réorganiser (2026-10-27) : trois barres alignées. */
.dpl-pal-reorganiser::before{ content:'☰'; border:0; font-size:16px; line-height:1; }
.dpl-bilan{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:5; padding:7px 14px;
  background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:12.5px; color:var(--text); pointer-events:none; }
.dpl-bilan[data-genre="ok"]{ border-color:var(--ok); }
.dpl-bilan[data-genre="warn"], .dpl-bilan[data-genre="err"]{ border-color:var(--warn); }
.dpl-pad-supprimer::before{ content:'✕'; border:0; font-size:13px; line-height:1; }
.dpl-hote .djs-context-pad .entry{ color:var(--text); }

/* ── Le calque des flux ────────────────────────────────────────────
   Couleurs numérotées (dpl-couleur-0…6) : la déclaration dit quelle famille
   prend laquelle. */
.dpl-bascule{ background:transparent; border:1px solid var(--border); border-radius:7px; padding:5px 12px; color:var(--text-dim); cursor:pointer; margin-left:auto; }
.dpl-bascule[aria-pressed="true"]{ border-color:var(--deploy); color:var(--deploy); background:var(--bg4); }
.dpl-bascule + .dpl-modes{ margin-left:0; }
:root{ --flux-0:#5dade2; --flux-1:#e84393; --flux-2:#a569bd; --flux-3:#48c9b0; --flux-4:#2ecc71; --flux-5:#e67e22; --flux-6:#f4d03f; }
/* Un flux du calque se PREND : un clic le dessine (lien d'illustration, qu'on retouche). */
.dpl-flux-prise{ fill:none; stroke:transparent; stroke-width:12px; pointer-events:stroke; cursor:pointer; }
.dpl-flux-prise:hover{ stroke:rgba(255,255,255,.12); }
.dpl-flux-calque{ fill:none; stroke-width:1.5px; pointer-events:none; }
.dpl-flux-pointe{ stroke:none; pointer-events:none; }
.dpl-flux-etiquette{ font:500 10.5px/1 system-ui,sans-serif; paint-order:stroke; stroke:var(--bg2); stroke-width:4px; pointer-events:none; }
.dpl-flux-calque.dpl-couleur-0{ stroke:var(--flux-0); } .dpl-flux-pointe.dpl-couleur-0, .dpl-flux-etiquette.dpl-couleur-0{ fill:var(--flux-0); }
.dpl-flux-calque.dpl-couleur-1{ stroke:var(--flux-1); } .dpl-flux-pointe.dpl-couleur-1, .dpl-flux-etiquette.dpl-couleur-1{ fill:var(--flux-1); }
.dpl-flux-calque.dpl-couleur-2{ stroke:var(--flux-2); } .dpl-flux-pointe.dpl-couleur-2, .dpl-flux-etiquette.dpl-couleur-2{ fill:var(--flux-2); }
.dpl-flux-calque.dpl-couleur-3{ stroke:var(--flux-3); } .dpl-flux-pointe.dpl-couleur-3, .dpl-flux-etiquette.dpl-couleur-3{ fill:var(--flux-3); }
.dpl-flux-calque.dpl-couleur-4{ stroke:var(--flux-4); } .dpl-flux-pointe.dpl-couleur-4, .dpl-flux-etiquette.dpl-couleur-4{ fill:var(--flux-4); }
.dpl-flux-calque.dpl-couleur-5{ stroke:var(--flux-5); } .dpl-flux-pointe.dpl-couleur-5, .dpl-flux-etiquette.dpl-couleur-5{ fill:var(--flux-5); }
.dpl-flux-calque.dpl-couleur-6{ stroke:var(--flux-6); } .dpl-flux-pointe.dpl-couleur-6, .dpl-flux-etiquette.dpl-couleur-6{ fill:var(--flux-6); }
/* Résultat d'une preuve par flux (2026-10-16) : la couleur dit si le flux passe. */
.dpl-flux-calque.dpl-preuve-ok{ stroke:var(--ok); stroke-width:2px; } .dpl-flux-pointe.dpl-preuve-ok, .dpl-flux-etiquette.dpl-preuve-ok{ fill:var(--ok); }
.dpl-flux-calque.dpl-preuve-echec{ stroke:var(--err); stroke-width:2.5px; stroke-dasharray:6 4; } .dpl-flux-pointe.dpl-preuve-echec, .dpl-flux-etiquette.dpl-preuve-echec{ fill:var(--err); }
.dpl-flux-calque.dpl-preuve-en_cours{ stroke:var(--warn); } .dpl-flux-pointe.dpl-preuve-en_cours, .dpl-flux-etiquette.dpl-preuve-en_cours{ fill:var(--warn); }
.dpl-flux-calque.dpl-preuve-aucune{ stroke:var(--text-dim); opacity:.45; } .dpl-flux-pointe.dpl-preuve-aucune, .dpl-flux-etiquette.dpl-preuve-aucune{ fill:var(--text-dim); opacity:.6; }
.dpl-flux-calque.dpl-preuve-absent{ stroke:var(--warn); stroke-width:2px; stroke-dasharray:2 4; } .dpl-flux-pointe.dpl-preuve-absent, .dpl-flux-etiquette.dpl-preuve-absent{ fill:var(--warn); }
.dpl-legende-trait.dpl-preuve-absent{ border-color:var(--warn); border-top-style:dotted; }
.dpl-etape[data-etat="absent"] .dpl-etape-signe, .dpl-etape[data-etat="absent"] .dpl-etape-msg{ color:var(--warn); }
.dpl-legende-trait.dpl-preuve-ok{ border-color:var(--ok); } .dpl-legende-trait.dpl-preuve-echec{ border-color:var(--err); border-top-style:dashed; }
.dpl-legende-trait.dpl-preuve-en_cours{ border-color:var(--warn); } .dpl-legende-trait.dpl-preuve-aucune{ border-color:var(--text-dim); }
.dpl-legende{ position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column; gap:4px; padding:8px 10px;
  background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:11.5px; color:var(--text-dim); pointer-events:none; }
.dpl-legende strong{ color:var(--text); font-weight:600; margin-bottom:2px; }
.dpl-legende-ligne{ display:flex; align-items:center; gap:8px; }
.dpl-legende-trait{ display:inline-block; width:22px; height:0; border-top:2px solid var(--flux-0); }
.dpl-legende-trait.dpl-couleur-1{ border-color:var(--flux-1); } .dpl-legende-trait.dpl-couleur-2{ border-color:var(--flux-2); }
.dpl-legende-trait.dpl-couleur-3{ border-color:var(--flux-3); } .dpl-legende-trait.dpl-couleur-4{ border-color:var(--flux-4); }
.dpl-legende-trait.dpl-couleur-5{ border-color:var(--flux-5); } .dpl-legende-trait.dpl-couleur-6{ border-color:var(--flux-6); }

/* Documents du projet (signaux, lus dans l'espace Projets) — 2026-10-12 */
.dpl-docs{ list-style:none; margin:10px 0 0; padding:0; }
.dpl-lire-schema{ display:flex; gap:8px; align-items:center; margin:10px 0 0; }
.dpl-lire-schema select{ flex:1; min-width:0; }
.dpl-doc{ display:flex; flex-direction:column; gap:1px; padding:5px 0; border-top:1px solid var(--border); }
.dpl-doc:first-child{ border-top:none; }
.dpl-doc-titre{ font-size:12.5px; color:var(--text); text-decoration:none; }
.dpl-doc-titre:hover{ text-decoration:underline; }
.dpl-doc-sous{ font-size:11.5px; color:var(--text-dim); }

/* Paramètre de dépôt : un lien, ou un emplacement S3 (2026-10-12) */
.dpl-depot{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dpl-depot input{ flex:1 1 160px; }
.dpl-depot-ref{ flex:1 1 100%; font-family:ui-monospace, Menlo, monospace; font-size:11.5px; color:var(--deploy); word-break:break-all; }
.dpl-s3{ margin-top:8px; padding:10px; border:1px solid var(--border); border-radius:7px; background:var(--bg2); display:flex; flex-direction:column; gap:6px; }
.dpl-s3 > select{ background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:5px 8px; }
.dpl-s3-chemin{ font-size:12px; color:var(--text-dim); }
.dpl-s3-miette{ background:none; border:none; padding:0; color:var(--deploy); cursor:pointer; font-size:12px; }
.dpl-s3-miette:hover{ text-decoration:underline; }
.dpl-s3-liste{ list-style:none; margin:0; padding:0; max-height:220px; overflow:auto; border-top:1px solid var(--border); }
.dpl-s3-dossier, .dpl-s3-objet{ padding:4px 6px; font-size:12.5px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; gap:8px; }
.dpl-s3-dossier:hover, .dpl-s3-objet:hover{ background:var(--bg3); }
.dpl-s3-objet span:first-child{ flex:1; word-break:break-all; }
.dpl-s3-taille{ color:var(--text-dim); font-size:11.5px; white-space:nowrap; }


/* ── Aperçu de l'export draw.io (2026-10-15) ─────────────────────── */
.dpl-apercu{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:32px; }
.dpl-apercu-boite{ width:100%; height:100%; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.dpl-apercu-tete{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); }
.dpl-apercu-tete .dpl-note{ flex:1; margin:0; }
.dpl-apercu-corps{ flex:1; overflow:auto; background:#ffffff; color:#333333; padding:16px; }
.dpl-apercu-corps svg{ max-width:100%; height:auto; display:block; margin:0 auto; }
/* Un lien que le calque Flux recouvre : le flux coloré le remplace (2026-10-15). */
/* Son étiquette aussi (2026-10-27) : le calque pose la sienne — « HTTP(S) 80 / 443 » s'affichait deux fois. */
.dpl-sous-calque .dpl-lien, .dpl-sous-calque .dpl-fleche, .dpl-sous-calque .dpl-etiquette{ visibility:hidden; }
/* Le filtre par sujet de la légende (2026-10-15) : hors du sujet, estompé. */
.dpl-estompe{ opacity:.12; }
.djs-connection.dpl-estompe{ opacity:.15; }
/* Le cadre laisse passer la souris vers le canevas ; ses boutons la prennent
   (2026-10-15 : le pointer-events:none du cadre, hérité, les rendait inertes). */
.dpl-legende button{ pointer-events:auto; }
button.dpl-legende-ligne{ background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:2px 4px; margin:0 -4px; border-radius:5px; }
button.dpl-legende-ligne:hover{ background:var(--bg3); }
.dpl-legende-ligne[data-actif="0"]{ opacity:.4; }
.dpl-legende-ligne[data-actif="1"]{ color:var(--text); font-weight:600; }
.dpl-legende-tout{ margin-top:4px; background:none; border:1px solid var(--border); border-radius:5px; color:var(--text-dim); font:inherit; font-size:11.5px; padding:2px 8px; cursor:pointer; align-self:flex-start; }
.dpl-legende-tout:hover{ color:var(--text); border-color:var(--text-dim); }
.dpl-lien-bouton{ background:none; border:0; padding:0; color:var(--deploy); font:inherit; cursor:pointer; text-decoration:underline; }
/* Arrêter | Rallumer côte à côte, sous l'étape Monter d'un îlot. */
.dpl-paire{ display:flex; gap:6px; margin-top:6px; }
.dpl-paire .dpl-btn:disabled{ opacity:.45; cursor:default; }
/* Les montages d'un stockage, sur sa fiche (2026-10-15). */
.dpl-montages{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.dpl-montages h4{ margin:0 0 8px; font-size:12px; font-weight:600; color:var(--text); }
.dpl-montage{ margin:0 0 4px; }
.dpl-montage strong{ display:block; margin:0 0 4px; font-size:12px; font-weight:600; color:var(--text); }

/* ── Plan · Îlot · Client (2026-10-19, maquette v2) ──────────────────
   La barre dit où l'on en est ; le panneau ne montre qu'une chose ; des
   libellés, pas des phrases. */
.dpl-btn-ico{ background:transparent; border:1px solid transparent; border-radius:7px; color:var(--text-dim); width:30px; height:28px; cursor:pointer; font-size:15px; }
.dpl-btn-ico:hover, .dpl-btn-ico[aria-expanded="true"]{ border-color:var(--border); color:var(--text); background:var(--bg3); }
.dpl-engrenage{ position:relative; }
.dpl-reglages{ position:absolute; top:34px; left:0; z-index:40; width:380px; max-height:calc(100vh - 160px); overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; box-shadow:0 12px 32px rgba(0,0,0,.5); }
.dpl-reglages-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.dpl-danger{ color:#f1948a; }
.dpl-etapes{ display:flex; align-items:stretch; margin-left:6px; }
.dpl-etapes button{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border); padding:4px 12px 4px 8px; cursor:pointer; color:var(--text-dim); text-align:left; }
.dpl-etapes button:first-child{ border-radius:8px 0 0 8px; }
.dpl-etapes button:last-child{ border-radius:0 8px 8px 0; }
.dpl-etapes button + button{ border-left:0; }
.dpl-etapes button[aria-selected="true"]{ background:var(--bg4); }
.dpl-etape-num{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--bg4); color:var(--text-dim); flex-shrink:0; }
.dpl-etapes button[aria-selected="true"] .dpl-etape-num{ background:var(--accent); color:var(--bg); }
.dpl-etape-lib{ display:flex; flex-direction:column; line-height:1.15; }
.dpl-etape-lib b{ font-weight:600; color:var(--text); font-size:12.5px; }
.dpl-etape-lib small{ font-size:11px; white-space:nowrap; }
.dpl-etapes-ou{ display:flex; align-items:center; padding:0 8px; font-size:11px; color:var(--text-dim); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dpl-s-ok{ color:var(--ok); } .dpl-s-err{ color:var(--err); } .dpl-s-warn{ color:var(--warn); }
.dpl-barre-droite{ margin-left:auto; display:flex; align-items:center; gap:6px; }

/* Le panneau */
.dpl-panneau-tete{ display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; }
.dpl-panneau-titre{ margin:0; font-size:14px; font-weight:650; flex:1; }
.dpl-panneau-tete .dpl-compteurs{ margin:0; }
.dpl-compteurs{ display:flex; gap:10px; font-size:12px; font-variant-numeric:tabular-nums; margin:4px 0 0; }
.dpl-panneau-tete:has(.dpl-compteurs){ flex-direction:column; gap:2px; }
.dpl-groupe{ margin:0 0 12px; }
.dpl-groupe h4{ margin:0 0 4px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.dpl-checks{ list-style:none; margin:0; padding:0; }
.dpl-check{ display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:6px; align-items:baseline; padding:3px 6px; border-radius:5px; font-size:12.5px; }
.dpl-check.dpl-cliquable{ cursor:pointer; text-decoration:none; }
.dpl-check.dpl-cliquable:hover, .dpl-check.dpl-vu{ background:var(--bg4); }
.dpl-check-signe{ font-weight:800; text-align:center; }
.dpl-check-lib{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpl-check-val{ color:var(--text-dim); font-size:11.5px; text-align:right; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpl-check[data-etat="ok"] .dpl-check-signe{ color:var(--ok); }
.dpl-check[data-etat="err"] .dpl-check-signe, .dpl-check[data-etat="err"] .dpl-check-val{ color:var(--err); }
.dpl-check[data-etat="warn"] .dpl-check-signe, .dpl-check[data-etat="warn"] .dpl-check-val{ color:var(--warn); }
.dpl-check[data-etat="non"]{ color:var(--text-dim); }
.dpl-reglages-plan{ border-top:1px solid var(--border); padding-top:10px; }
.dpl-reglages-plan .dpl-champ input, .dpl-reglages-plan .dpl-champ select{ border-color:#6e4a26; }
/* L'opération de test d'un système tiers (2026-11-03) : une liste réduite, les champs proposés, Confirmer. */
.dpl-optest{ display:flex; flex-direction:column; gap:8px; margin:8px 0 12px; }
.dpl-optest-tete{ display:flex; gap:6px; align-items:baseline; font-size:13px; }
.dpl-optest-tete .dpl-note{ margin:0; }
.dpl-optest-liste{ border:1px solid #6e4a26; border-radius:6px; background:var(--bg); display:flex; flex-direction:column; max-height:240px; overflow:auto; }
.dpl-optest-opt{ display:flex; gap:8px; align-items:baseline; padding:6px 10px; font-size:12px; cursor:pointer; flex-shrink:0; }
.dpl-optest-opt code{ font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpl-optest-opt .dpl-note{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.dpl-optest-opt:hover{ background:var(--bg2); }
.dpl-optest-opt[aria-selected="true"]{ background:var(--bg3); box-shadow:inset 2px 0 0 var(--accent); }
.dpl-optest-kid{ color:var(--warn); font-weight:700; }
.dpl-optest-ecart{ padding:6px 10px; font-size:11.5px; color:var(--text-dim); border-top:1px solid var(--border); flex-shrink:0; }
.dpl-optest-champs{ display:grid; grid-template-columns:minmax(70px, 120px) minmax(0, 1fr); gap:4px 10px; font-size:12px; }
.dpl-optest-champs .dpl-note{ margin:0; }
.dpl-optest-champs > span{ min-width:0; overflow-wrap:anywhere; }
.dpl-optest-recu{ font-family:ui-monospace, Menlo, monospace; font-size:11.5px; color:var(--ok); }
.dpl-optest-ok{ align-self:flex-start; }
.dpl-genere{ font-size:12px; color:var(--text-dim); background:var(--bg3); border:1px dashed var(--border); border-radius:6px; padding:7px 10px; margin:0 0 12px; }
.dpl-fournir{ border:1px solid rgba(214,210,51,.35); background:rgba(214,210,51,.05); border-radius:8px; padding:10px; margin:0 0 12px; }
.dpl-fournir h4{ margin:0 0 6px; font-size:12.5px; font-weight:650; color:var(--accent); }
.dpl-infos{ display:flex; flex-direction:column; gap:4px; margin:0 0 12px; }
.dpl-info{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); }
.dpl-info b{ color:var(--text); font-weight:500; text-align:right; }
.dpl-info select{ flex:1; max-width:220px; }
.dpl-cta{ width:100%; padding:10px 14px; font-size:14px; font-weight:700; }
.dpl-cta.dpl-btn-accent{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.dpl-cta:disabled{ background:var(--bg4); border-color:var(--bg4); color:var(--text-dim); cursor:not-allowed; }
.dpl-cta-note{ font-size:11.5px; color:var(--text-dim); margin:6px 0 0; }
.dpl-nouveau-site{ display:flex; gap:6px; margin:0 0 12px; }
.dpl-nouveau-site input{ flex:1; min-width:0; }
.dpl-panneau-tete .dpl-menu{ margin-left:auto; }

/* Le bandeau de lecture, au-dessus du dessin */
.dpl-bandeau{ position:relative; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px;
  background:var(--bg2); border-bottom:1px solid var(--border); padding:6px 14px; font-size:12.5px; }
.dpl-bandeau a{ color:var(--text); font-weight:600; }
.dpl-bandeau-src{ color:var(--text-dim); }
.dpl-bandeau-points{ position:relative; }
.dpl-bandeau-points > summary{ cursor:pointer; list-style:none; }
.dpl-bandeau-points > summary::-webkit-details-marker{ display:none; }
.dpl-bandeau-points > ul{ position:absolute; top:calc(100% + 8px); left:0; width:min(560px, 70vw); max-height:50vh; overflow:auto; margin:0; padding:8px 10px 8px 24px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.45); }
.dpl-bandeau-version{ font-size:12.5px; background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:2px 6px; color:var(--text); }
.dpl-bandeau-retirer{ margin-left:auto; color:var(--text-dim); }

/* La saisie du Client, à la place du dessin */
.dpl-saisie{ flex:1; min-width:0; overflow:auto; padding:16px 20px; background:var(--bg2); }
.dpl-saisie-groupe{ margin:0 0 18px; }
.dpl-saisie-groupe h4{ margin:0 0 6px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.dpl-saisie-ligne{ display:grid; grid-template-columns:170px minmax(0,1fr) 84px; gap:12px; align-items:start; padding:8px 0; border-top:1px solid var(--border); }
.dpl-saisie-nom{ display:flex; flex-direction:column; gap:2px; padding-top:4px; }
.dpl-saisie-nom strong{ font-size:13px; }
.dpl-saisie-sous{ font-size:11px; color:var(--text-dim); }
.dpl-saisie-champs{ display:flex; flex-wrap:wrap; gap:6px 12px; }
.dpl-saisie-champs .dpl-champ{ margin:0; width:210px; }
.dpl-saisie-champs .dpl-secret{ flex-wrap:wrap; }
.dpl-saisie-refus{ color:var(--err); padding-top:4px; }
.dpl-saisie-ligne.dpl-bloque .dpl-saisie-nom{ opacity:.6; }
.dpl-saisie-etat{ text-align:right; font-size:12px; padding-top:4px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.dpl-saisie-etat[data-etat="ok"]{ color:var(--ok); } .dpl-saisie-etat[data-etat="warn"]{ color:var(--warn); } .dpl-saisie-etat[data-etat="err"]{ color:var(--err); }
.dpl-repris b{ color:var(--ok); font-weight:500; }

/* Le tiroir « Tableaux » */
.dpl-tiroir{ border-top:1px solid var(--border); background:var(--bg2); padding:8px 14px 12px; max-height:38vh; display:flex; flex-direction:column; min-height:0; }
.dpl-tiroir-tete{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.dpl-tiroir-tete .dpl-volet-fermer{ margin-left:auto; }
.dpl-tiroir .dpl-defile{ overflow:auto; min-height:0; }
.dpl-onglets{ display:flex; gap:4px; }
.dpl-onglets button{ background:transparent; border:1px solid var(--border); border-radius:6px; padding:3px 10px; color:var(--text-dim); cursor:pointer; font-size:12.5px; }
.dpl-onglets button[aria-selected="true"]{ background:var(--bg4); color:var(--text); }

/* Un check cliqué montre ses formes sur le dessin */
.djs-element.dpl-marque .djs-visual > :first-child{ stroke:var(--accent) !important; stroke-width:3px !important; }
/* Dans la saisie, un secret tient sur une ligne : le champ dit s'il est défini (« Remplacer… »). */
.dpl-saisie .dpl-secret{ display:flex; gap:4px; align-items:flex-start; flex-wrap:nowrap; }
.dpl-saisie .dpl-secret-etat{ display:none; }
.dpl-saisie .dpl-secret input, .dpl-saisie .dpl-secret textarea{ flex:1; min-width:0; height:30px; min-height:30px; }
.dpl-saisie .dpl-secret textarea{ resize:vertical; }
.dpl-saisie .dpl-secret .dpl-btn{ padding:4px 8px; flex-shrink:0; }
.dpl-saisie .dpl-secret .dpl-msg:empty{ display:none; }
.dpl-saisie-champs .dpl-champ{ width:205px; }
.dpl-info select{ font:inherit; font-size:12.5px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:3px 6px; }
.dpl-saisie .dpl-secret:has(.dpl-secret-etat[data-defini="1"]) input, .dpl-saisie .dpl-secret:has(.dpl-secret-etat[data-defini="1"]) textarea{ border-color:#1e5c3a; }
.dpl-lecture li.dpl-vu-ok{ opacity:.6; }
.dpl-point-vu{ font-size:12px; }

/* Les simulateurs de l'îlot (2026-10-20) */
.dpl-simulateurs{ margin-top:8px; }
.dpl-simulateur-journal{ max-height:220px; overflow:auto; font-size:11px; }
/* Une ligne par simulateur (2026-11-03) : ils se règlent dans Intégrations › Simulation. */
.dpl-simulateur-lignes{ display:flex; flex-direction:column; margin-top:6px; }
.dpl-simulateur-ligne{ display:grid; grid-template-columns:minmax(80px, 140px) minmax(0, 1fr) auto; gap:10px; align-items:baseline; padding:5px 0; border-top:1px solid var(--border); font-size:12.5px; }
.dpl-simulateur-ligne .dpl-rapport-sous[data-etat="err"]{ color:var(--err); }
.dpl-simulateur-ligne a.dpl-lien-bouton{ text-decoration:none; }
.dpl-simulateur-panne{ color:var(--warn); }
.dpl-simulateur-pied{ display:flex; flex-wrap:wrap; gap:4px 14px; }
/* Les volumes par flux (2026-10-21) : prix de la liaison, mesure, relevés gardés. */
/* L'avancée générale dans la carte « En cours » (2026-10-21). */
.dpl-avancement{ display:flex; align-items:center; gap:8px; margin:4px 0 2px; }
.dpl-avancement .dpl-rapport-barre{ flex:1 1 auto; }
.dpl-avancement-texte{ font-size:11.5px; color:var(--text-dim); white-space:nowrap; }
.dpl-tache{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:12.5px; }
.dpl-tache-nom{ font-weight:600; }
.dpl-ecoule{ color:var(--text-dim); font-variant-numeric:tabular-nums; }
.dpl-tache-ligne{ display:block; font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
/* Trois points qui défilent : la page vit (le temps écoulé dit que le travail avance). */
.dpl-points::after{ content:""; display:inline-block; width:1.2em; text-align:left; animation:dpl-points 1.2s steps(4, end) infinite; }
@keyframes dpl-points{ 0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } }
@media (prefers-reduced-motion: reduce){ .dpl-points::after{ animation:none; content:"…"; } }
/* Cassettes repliables du rapport (2026-10-21). */
.dpl-cassette-titre{ cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; }
.dpl-cassette-titre::before{ content:"▾"; color:var(--text-dim); font-size:11px; width:10px; flex-shrink:0; }
.dpl-cassette[data-replie="1"] .dpl-cassette-titre::before{ content:"▸"; }
.dpl-cassette[data-replie="1"] .dpl-cassette-corps{ display:none; }
.dpl-cassette-corps{ display:flex; flex-direction:column; gap:4px; }
.dpl-volumes-prix{ display:flex; flex-wrap:wrap; gap:4px 12px; }
.dpl-prix-aws{ display:flex; flex-direction:column; gap:2px; }
.dpl-charge{ display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--border); padding-top:8px; margin-top:4px; }
.dpl-charge-titre{ font-weight:600; font-size:12.5px; }
.dpl-charge .dpl-volumes-garder{ align-items:flex-end; }
.dpl-charge-champ{ margin:0; width:auto; }
.dpl-charge-champ input[type="number"]{ width:90px; }
.dpl-prix-aws > .dpl-btn{ align-self:flex-start; margin-bottom:8px; }
.dpl-volumes-prix .dpl-champ{ flex:1 1 140px; min-width:0; }
.dpl-volumes-garder{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dpl-volumes-garder input, .dpl-volumes-garder select{ background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:6px 8px; color:inherit; font:inherit; }
.dpl-volumes-garder input:focus, .dpl-volumes-garder select:focus{ outline:none; border-color:var(--deploy); }
.dpl-volumes-garder input[type="text"]{ flex:1 1 100%; min-width:0; }
.dpl-volumes-garder input[type="number"]{ width:90px; }
.dpl-volumes-releves{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.dpl-volumes-releve{ border:1px solid var(--border); border-radius:6px; padding:6px 8px; display:flex; flex-direction:column; gap:4px; }
.dpl-volumes-tete{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.dpl-volumes-tete .dpl-lien-bouton{ margin-left:auto; }
.dpl-volumes-par input{ width:110px; }
/* Volumes et coût (2026-10-21) : Mesuré, puis Coût, puis la mesure à la main repliée. */
.dpl-cassette-section{ margin:10px 0 2px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); border-top:1px solid var(--border); padding-top:8px; }
.dpl-volumes-mesure{ display:flex; flex-direction:column; gap:0; }
.dpl-volumes-outils{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; padding-left:22px; }
.dpl-volumes-main{ border-top:1px solid var(--border); margin-top:10px; padding-top:6px; }
.dpl-volumes-main > summary{ cursor:pointer; font-size:12.5px; color:var(--text-dim); }
.dpl-volumes-main[open] > summary{ margin-bottom:6px; }
/* Publication type (2026-10-21) : hypothèses, puis la grille des deux tactiques. */
.dpl-publication-hyp{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:4px 10px; }
.dpl-publication-hyp .dpl-champ{ min-width:0; margin:0; }
.dpl-publication-hyp .dpl-champ input{ width:100%; }
.dpl-publication-grille{ width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
.dpl-publication-grille th, .dpl-publication-grille td{ border-top:1px solid var(--border); padding:4px 6px; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.dpl-publication-grille tr > th:first-child{ width:28%; font-weight:500; color:var(--text-dim); }
.dpl-publication-grille tr:first-child th{ font-weight:600; border-top:none; }
.dpl-publication-groupe th, .dpl-publication-groupe td{ font-weight:600; padding-top:8px; }
.dpl-publication-total th, .dpl-publication-total td{ font-weight:600; border-top:1px solid var(--deploy); }
.dpl-customs .dpl-champ-case{ flex-wrap:wrap; font-size:12.5px; }
.dpl-customs-op{ flex-basis:100%; margin-left:22px; font-size:11px; color:var(--text-dim); word-break:break-all; }

/* Formulaire à renvoyer (2026-10-22) : un lien vers le Doc Builder, plus un export. */
.dpl-formulaire{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dpl-formulaire-titre{ font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.dpl-formulaire-note{ font-size:12px; color:var(--text-dim); }
a.dpl-btn{ color:var(--text); text-decoration:none; display:inline-block; }

/* Les réglages d'une opération, dans son étape du rapport (2026-10-29). */
.dpl-maj-reglages{ display:flex; flex-direction:column; gap:6px; margin:6px 0; }