/* coco-server — sombre, vert néon, un peu futuriste, sans en faire trop. */

@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2190-2199, U+2212; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 800; unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  color-scheme: dark;
  --bg: #060908;
  --bg-2: #090d0c;
  --surface: #0d1211;
  --surface-2: #111816;
  --surface-3: #16201d;
  --line: rgba(150, 255, 196, .075);
  --line-2: rgba(150, 255, 196, .14);
  --text: #d5e3db;
  --text-2: #b2c2b9;
  --muted: #7f9088;
  --faint: #52615a;
  --neon: #3dff8f;
  --neon-2: #2bd673;
  --neon-ink: #031409;
  --neon-soft: rgba(61, 255, 143, .09);
  --neon-glow: 0 0 0 1px rgba(61, 255, 143, .35), 0 0 18px rgba(61, 255, 143, .18);
  --cyan: #61e2ff;
  --amber: #ffc95c;
  --red: #ff5a76;
  --red-soft: rgba(255, 90, 118, .1);
  --add: rgba(61, 255, 143, .085);
  --add-line: rgba(61, 255, 143, .55);
  --del: rgba(255, 90, 118, .09);
  --del-line: rgba(255, 90, 118, .55);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Noto Sans Mono", monospace;
  --r: 12px;
  --r-s: 8px;
  --rail: 236px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
body::before {   /* une lueur à peine visible, en haut à gauche */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 500px at 8% -10%, rgba(61, 255, 143, .055), transparent 60%),
              radial-gradient(700px 500px at 110% 120%, rgba(97, 226, 255, .03), transparent 60%);
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(61, 255, 143, .25); }
:focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.etiquette {   /* petites étiquettes en capitales, façon instrument */
  font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
[hidden] { display: none !important; }

/* ---------- coque ---------- */
.coque { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rail) 1fr; height: 100vh; }
.rail {
  display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 18, 17, .9), rgba(6, 9, 8, .9));
}
.marque { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; text-decoration: none; }
.marque-logo { width: 26px; height: 26px; color: var(--neon); filter: drop-shadow(0 0 6px rgba(61, 255, 143, .45)); }
.marque-nom { font: 650 15px/1 var(--mono); letter-spacing: .02em; }
.marque-nom span { color: var(--neon); }
.rail-nav { flex: 1; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.rail-titre { padding: 14px 10px 6px; }
.rail-lien {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s);
  text-decoration: none; color: var(--text-2); position: relative; transition: background .15s, color .15s;
}
.rail-lien:hover { background: var(--surface-2); color: var(--text); }
.rail-lien.actif { background: var(--neon-soft); color: var(--text); }
.rail-lien.actif::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px;
  background: var(--neon); box-shadow: 0 0 10px var(--neon);
}
.rail-icone { width: 22px; text-align: center; font-size: 15px; filter: saturate(.8); }
.rail-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-machine { padding: 14px 18px 18px; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.jauge { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--muted); }
.jauge-barre { height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.jauge-barre i { display: block; height: 100%; background: var(--neon-2); border-radius: 3px; transition: width .6s ease; }
.jauge-barre i.haut { background: var(--amber); }
.jauge-barre i.critique { background: var(--red); }
.jauge b { font-weight: 500; color: var(--text-2); text-align: right; }

/* ---------- pastilles d'état ---------- */
.point { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint); }
.point.ok { background: var(--neon); box-shadow: 0 0 8px rgba(61, 255, 143, .8); }
.point.ko { background: var(--red); box-shadow: 0 0 8px rgba(255, 90, 118, .7); }
.point.attente { background: var(--amber); box-shadow: 0 0 8px rgba(255, 201, 92, .6); }
.point.vivant { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); cursor: pointer;
  font-size: 13px; font-weight: 500; white-space: nowrap; transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  text-decoration: none;
}
.btn:hover { border-color: rgba(61, 255, 143, .45); color: var(--text); }
.btn:disabled { opacity: .4; cursor: default; border-color: var(--line); color: var(--muted); }
.btn .ic { width: 15px; height: 15px; }
.btn.neon { background: var(--neon); border-color: var(--neon); color: var(--neon-ink); font-weight: 650; box-shadow: 0 0 22px rgba(61, 255, 143, .22); }
.btn.neon:hover { background: #64ffa7; color: var(--neon-ink); }
.btn.neon:disabled { background: var(--surface-3); border-color: var(--line); color: var(--faint); box-shadow: none; }
.btn.danger:hover { border-color: rgba(255, 90, 118, .6); color: var(--red); }
.btn.nu { background: none; border-color: transparent; }
.btn.nu:hover { background: var(--surface-2); border-color: var(--line); }
.btn.petit { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.icone-seule { width: 32px; padding: 0; justify-content: center; }
.btn.petit.icone-seule { width: 26px; }
.btn.actif { border-color: rgba(61, 255, 143, .5); color: var(--neon); background: var(--neon-soft); }
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.groupe { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.groupe .btn { border: 0; border-radius: 0; height: 30px; background: transparent; }
.groupe .btn + .btn { border-left: 1px solid var(--line); }

/* ---------- champs ---------- */
.champ {
  width: 100%; padding: 9px 11px; border-radius: var(--r-s); border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.champ:focus { border-color: rgba(61, 255, 143, .55); box-shadow: 0 0 0 3px rgba(61, 255, 143, .08); }
textarea.champ { resize: vertical; min-height: 64px; line-height: 1.5; }
select.champ { padding: 6px 8px; height: 30px; }
.case { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); cursor: pointer; }
.case input { accent-color: var(--neon); }

/* ---------- vue ---------- */
.vue { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.cadre-vue { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; overflow-y: auto; padding: 26px 32px 40px; }
.page-tete { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.page-tete h1 { margin: 6px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.page-tete .espace { flex: 1; }
.sous-titre { color: var(--muted); margin: 3px 0 0; }

/* accueil : tuiles de la machine */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 26px; }
.tuile { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.tuile-valeur { font: 600 22px/1.2 var(--mono); margin-top: 8px; }
.tuile-valeur small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.tuile .jauge-barre { margin-top: 10px; }

/* accueil : cartes des sites */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.carte {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.carte:hover { border-color: rgba(61, 255, 143, .3); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.carte-tete { display: flex; align-items: center; gap: 11px; }
.carte-icone { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); font-size: 18px; border: 1px solid var(--line); }
.carte-nom { font-weight: 620; font-size: 15px; }
.carte-desc { color: var(--muted); font-size: 12.5px; }
.carte-lignes { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.carte-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; }
.carte-ligne .etiquette { width: 74px; flex: none; }
.carte-ligne .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-pied { display: flex; gap: 8px; margin-top: 2px; }
.carte-pied .btn { flex: 1; justify-content: center; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 99px; font: 500 11px/18px var(--mono);
  border: 1px solid var(--line-2); color: var(--text-2); background: var(--bg-2); white-space: nowrap;
}
.puce.neon { color: var(--neon); border-color: rgba(61, 255, 143, .35); background: var(--neon-soft); }
.puce.rouge { color: var(--red); border-color: rgba(255, 90, 118, .35); background: var(--red-soft); }
.puce.ambre { color: var(--amber); border-color: rgba(255, 201, 92, .3); background: rgba(255, 201, 92, .07); }
.puce.cyan { color: var(--cyan); border-color: rgba(97, 226, 255, .3); background: rgba(97, 226, 255, .06); }
.plus { color: var(--neon); font-family: var(--mono); }
.moins { color: var(--red); font-family: var(--mono); }

/* ---------- site ---------- */
.site-tete {
  display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line);
  background: rgba(9, 13, 12, .7); backdrop-filter: blur(8px);
}
.site-tete h1 { margin: 0; font-size: 17px; font-weight: 640; }
.site-tete .carte-icone { width: 34px; height: 34px; }
.onglets { display: flex; gap: 2px; margin-left: 18px; }
.onglet {
  position: relative; padding: 7px 12px; border-radius: var(--r-s); color: var(--muted); text-decoration: none; font-weight: 500;
}
.onglet:hover { color: var(--text); background: var(--surface-2); }
.onglet.actif { color: var(--text); }
.onglet.actif::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -15px; height: 2px; border-radius: 2px;
  background: var(--neon); box-shadow: 0 0 10px var(--neon);
}
.espace { flex: 1; }

/* ---------- atelier : barre de la branche ---------- */
.atelier { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.barre {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); min-width: 0;
}
.barre > * { flex: none; }
.barre { overflow: hidden; }
.barre .titre-branche { flex: 0 1 auto; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre .espace { flex: 1 1 0; min-width: 0; }
.selecteur {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px 0 10px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; max-width: 320px; flex: 0 1 auto !important; min-width: 120px;
}
.selecteur:hover { border-color: rgba(61, 255, 143, .45); }
.selecteur .nom-branche { font: 500 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur .ic { color: var(--neon); }
.compteurs { display: flex; gap: 6px; align-items: center; }
.bascules { display: flex; gap: 4px; margin-left: 4px; }

.menu {
  position: fixed; z-index: 60; min-width: 300px; max-width: 420px; max-height: 70vh; overflow-y: auto; padding: 6px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: rgba(13, 18, 17, .98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4); animation: apparait .14s ease;
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-s);
  background: none; text-align: left; cursor: pointer; color: var(--text-2);
}
.menu-item:hover, .menu-item.actif { background: var(--surface-3); color: var(--text); }
.menu-item .details { flex: 1; min-width: 0; }
.menu-item .details b { display: block; font: 500 12.5px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .details span { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- atelier : les trois panneaux ---------- */
.panneaux { flex: 1; min-height: 0; display: grid; gap: 0; }
.panneau { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(9, 13, 12, .55); }
.panneau:last-child { border-right: 0; }
.panneau-tete { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); flex: none; overflow: hidden; white-space: nowrap; }
.panneau-tete > * { flex: none; }
.panneau-tete .espace { flex: 1 1 0; min-width: 0; }
.panneau-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.panneau-titre .ic { color: var(--neon); }
.poignee { width: 5px; margin: 0 -3px; cursor: col-resize; position: relative; z-index: 5; }
.poignee:hover::after, .poignee.tire::after { content: ""; position: absolute; inset: 0 2px; background: var(--neon); box-shadow: 0 0 8px var(--neon); }

/* ---------- Claude ---------- */
.fil { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.msg-moi {
  align-self: flex-end; max-width: 92%; padding: 9px 12px; border-radius: 12px 12px 3px 12px;
  background: var(--surface-3); border: 1px solid var(--line-2); white-space: pre-wrap; word-break: break-word;
}
.msg-claude { color: var(--text); line-height: 1.6; word-break: break-word; }
.msg-claude p { margin: 0 0 8px; }
.msg-claude p:last-child { margin-bottom: 0; }
.msg-claude ul, .msg-claude ol { margin: 4px 0 8px; padding-left: 20px; }
.msg-claude code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--surface-3); color: #b8ffd5; }
.msg-claude pre { margin: 6px 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--bg); border: 1px solid var(--line); overflow-x: auto; }
.msg-claude pre code { padding: 0; background: none; color: var(--text-2); }
.msg-claude h3, .msg-claude h4 { margin: 10px 0 4px; font-size: 13.5px; }
.msg-claude.en-cours::after { content: "▍"; color: var(--neon); animation: pulse 1s steps(1) infinite; margin-left: 1px; }
.outil {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--bg-2); font-size: 12.5px; cursor: default;
}
.outil.cliquable { cursor: pointer; }
.outil.cliquable:hover { border-color: rgba(61, 255, 143, .35); }
.outil .ic { margin-top: 2px; color: var(--muted); width: 14px; height: 14px; }
.outil.ecrit .ic, .outil.modifie .ic { color: var(--neon); }
.outil .resume { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outil.bash .resume { white-space: pre-wrap; word-break: break-all; }
.outil .etat-outil { flex: none; font: 11px var(--mono); color: var(--faint); }
.outil.ko { border-color: rgba(255, 90, 118, .3); }
.outil.ko .etat-outil { color: var(--red); }
.outil.en-cours { border-color: rgba(61, 255, 143, .4); box-shadow: inset 2px 0 0 var(--neon); }
.outil.en-cours .ic { color: var(--neon); animation: pulse 1s infinite; }
.resultat-bash { margin: -6px 0 0 23px; padding: 8px 10px; border-left: 1px solid var(--line-2); font: 11.5px/1.5 var(--mono); color: var(--muted); white-space: pre-wrap; max-height: 160px; overflow: auto; }
.plan { border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 11px; background: var(--bg-2); display: grid; gap: 5px; }
.plan-item { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.plan-item.fait { color: var(--faint); text-decoration: line-through; }
.plan-item.encours { color: var(--neon); }
.plan-item i { font-style: normal; font-family: var(--mono); width: 14px; flex: none; }
.marqueur { display: flex; align-items: center; gap: 10px; font: 11px var(--mono); color: var(--faint); }
.marqueur::before, .marqueur::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.marqueur.version { color: var(--neon-2); }
.marqueur.erreur { color: var(--red); }
.reflexion { font: 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.composeur { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.composeur textarea { min-height: 72px; max-height: 260px; }
.composeur-ligne { display: flex; align-items: center; gap: 8px; }
.composeur-ligne .indice { flex: 1; font-size: 11.5px; color: var(--faint); }
.vide {
  margin: auto; text-align: center; color: var(--muted); padding: 30px 20px; max-width: 360px;
}
.vide .gros { font: 600 12px var(--mono); letter-spacing: .18em; color: var(--neon); text-transform: uppercase; margin-bottom: 8px; }
.grille-fond {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
}

/* ---------- code ---------- */
.code-onglets { display: flex; gap: 2px; min-width: 0; overflow: hidden; flex: 0 1 auto !important; }
.code-onglet { padding: 5px 9px; border-radius: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.code-onglet:hover { color: var(--text); background: var(--surface-2); }
.code-onglet.actif { color: var(--text); background: var(--surface-3); }
.code-onglet .compte { margin-left: 5px; font: 11px var(--mono); color: var(--neon); }
.code-corps { flex: 1; min-height: 0; display: flex; }
.liste-fichiers { width: 210px; flex: none; overflow-y: auto; border-right: 1px solid var(--line); padding: 6px; }
.fichier-ligne {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none;
  text-align: left; cursor: pointer; color: var(--text-2); font: 12px var(--mono);
}
.fichier-ligne:hover { background: var(--surface-2); }
.fichier-ligne.actif { background: var(--neon-soft); color: var(--text); }
.fichier-ligne .chemin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.fichier-ligne .lettre { width: 12px; font-weight: 700; flex: none; }
.lettre.A { color: var(--neon); } .lettre.M { color: var(--amber); } .lettre.D { color: var(--red); } .lettre.R { color: var(--cyan); }
.fichier-ligne.flash { animation: flash 1.4s ease; }
@keyframes flash { 0% { background: rgba(61, 255, 143, .25); } 100% { background: transparent; } }
.code-zone { flex: 1; min-width: 0; overflow: auto; position: relative; background: var(--bg); }
.code-entete {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: rgba(6, 9, 8, .94); border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--text-2);
}
.code-entete .chemin-fichier { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code {
  font: 12.5px/1.65 var(--mono); tab-size: 4; counter-reset: ligne; padding: 6px 0 40px; min-width: max-content;
}
.ligne { display: grid; grid-template-columns: 52px 52px 18px 1fr; min-height: 20.6px; }
.code.simple .ligne { grid-template-columns: 56px 1fr; }
.ligne .no { color: var(--faint); text-align: right; padding-right: 10px; user-select: none; font-size: 11.5px; }
.ligne .signe { color: var(--faint); user-select: none; text-align: center; }
.ligne .txt { white-space: pre; padding-right: 30px; color: var(--text-2); }
.ligne.ajout { background: var(--add); }
.ligne.ajout .signe { color: var(--neon); }
.ligne.ajout .no:last-of-type { color: var(--neon-2); }
.ligne.retrait { background: var(--del); }
.ligne.retrait .signe { color: var(--red); }
.ligne.retrait .txt { opacity: .78; }
.ligne.morceau { background: rgba(97, 226, 255, .04); color: var(--cyan); }
.ligne.morceau .txt { color: rgba(97, 226, 255, .7); font-style: italic; }
.ligne.neuve { animation: neuve 1.6s ease-out; }
@keyframes neuve { 0% { background: rgba(61, 255, 143, .32); box-shadow: inset 3px 0 0 var(--neon); } 100% { box-shadow: inset 3px 0 0 transparent; } }
.curseur { display: inline-block; width: 7px; height: 15px; margin-left: 1px; vertical-align: -2px; background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: pulse 1s steps(1) infinite; }
.badge-direct { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--mono); letter-spacing: .14em; color: var(--neon); text-transform: uppercase; }

/* coloration (highlight.js), dans la palette */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-meta .hljs-keyword { color: #7ee0ff; }
.hljs-string, .hljs-attr .hljs-string, .hljs-template-tag { color: #9df5b8; }
.hljs-number, .hljs-literal { color: #ffc95c; }
.hljs-comment, .hljs-quote { color: #56665e; font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #e7f7ee; font-weight: 600; }
.hljs-attr, .hljs-attribute, .hljs-property { color: #b5c8ff; }
.hljs-name, .hljs-tag { color: #7ee0ff; }
.hljs-variable, .hljs-template-variable, .hljs-params { color: #d5e3db; }
.hljs-meta, .hljs-decorator { color: #c49bff; }
.hljs-regexp, .hljs-symbol { color: #ff9fbd; }
.hljs-selector-class, .hljs-selector-id { color: #ffd88a; }
.hljs-deletion { color: var(--red); } .hljs-addition { color: var(--neon); }

/* ---------- aperçu ---------- */
.apercu-barre { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
.adresse {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg-2); font: 12px var(--mono); color: var(--muted);
}
.adresse input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text-2); font: inherit; }
.scene { flex: 1; min-height: 0; position: relative; overflow: hidden; display: grid; place-items: center; background: var(--bg); }
.scene iframe { border: 0; background: #fff; }
.scene.bureau iframe { width: 100%; height: 100%; }
.scene.mobile iframe {
  width: 390px; height: 844px; border-radius: 34px; box-shadow: 0 0 0 9px #111917, 0 0 0 10px var(--line-2), 0 30px 80px rgba(0, 0, 0, .6);
  transform-origin: center center;
}
.apercu-etat { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 9, 8, .82); backdrop-filter: blur(2px); z-index: 3; }
.chargeur { width: 160px; height: 2px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin: 12px auto 0; }
.chargeur i { display: block; width: 40%; height: 100%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: glisse 1.1s ease-in-out infinite; }
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.note-apercu { padding: 7px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex: none; }
.console { height: 170px; flex: none; border-top: 1px solid var(--line); overflow: auto; padding: 8px 12px; font: 11.5px/1.55 var(--mono); color: var(--muted); background: var(--bg); }
.console .coco { color: var(--neon-2); }
.console .err { color: var(--red); }

/* ---------- versions, journal ---------- */
.colonnes { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bloc { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.bloc + .bloc { margin-top: 18px; }
.bloc-tete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bloc-tete h2 { margin: 0; font-size: 13.5px; font-weight: 620; }
.rangee { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.rangee:last-child { border-bottom: 0; }
.rangee .principal { flex: 1; min-width: 0; }
.rangee .principal b { font: 500 13px var(--mono); }
.rangee .principal .sous { color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrono { position: relative; }
.chrono .rangee { padding-left: 34px; }
.chrono .rangee::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.chrono .rangee .point { position: absolute; left: 14px; }
.chrono .rangee { position: relative; }
.journal { flex: 1; overflow: auto; padding: 10px 16px 30px; font: 12px/1.6 var(--mono); color: var(--text-2); background: var(--bg); }
.journal .l { white-space: pre-wrap; word-break: break-all; }
.journal .l .h { color: var(--faint); }
.journal .l.err { color: var(--red); }
.journal .l.neuve { animation: flash 1.2s ease; }

/* ---------- fenêtres ---------- */
.voile { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(2, 4, 3, .66); backdrop-filter: blur(3px); animation: apparait .15s ease; }
.fenetre {
  width: min(560px, calc(100vw - 40px)); max-height: calc(100vh - 60px); overflow: auto; border-radius: 16px;
  border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(61, 255, 143, .05);
}
.fenetre.large { width: min(760px, calc(100vw - 40px)); }
.fenetre-tete { display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.fenetre-tete h2 { margin: 0; font-size: 16px; font-weight: 640; flex: 1; }
.fenetre-corps { padding: 8px 20px 18px; display: grid; gap: 14px; color: var(--text-2); }
.fenetre-corps p { margin: 0; }
.fenetre-pied { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg-2); }
.etapes { display: grid; gap: 2px; }
.etape { display: flex; align-items: center; gap: 11px; padding: 7px 4px; }
.etape .rond { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; font-size: 10px; }
.etape .rond .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.plan-item i .ic { width: 13px; height: 13px; vertical-align: -2px; }
.encadre .ic { width: 14px; height: 14px; vertical-align: -2px; }
.etape.en_cours .rond { border-color: var(--neon); box-shadow: 0 0 10px rgba(61, 255, 143, .5); }
.etape.en_cours .rond::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); animation: pulse 1s infinite; }
.etape.ok .rond { background: var(--neon); border-color: var(--neon); color: var(--neon-ink); }
.etape.echec .rond { background: var(--red); border-color: var(--red); color: #fff; }
.etape.saute .rond { color: var(--faint); }
.etape .nom { flex: none; width: 210px; color: var(--text-2); }
.etape.attente .nom { color: var(--faint); }
.etape .msg { flex: 1; min-width: 0; font: 11.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape.echec .msg { color: var(--red); white-space: normal; }
.sortie { max-height: 200px; overflow: auto; padding: 10px 12px; border-radius: var(--r-s); background: var(--bg); border: 1px solid var(--line); font: 11.5px/1.5 var(--mono); color: var(--muted); white-space: pre-wrap; }
.resume-changements { display: grid; gap: 4px; max-height: 210px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg-2); }
.encadre { padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--bg-2); font-size: 12.5px; }
.encadre.attention { border-color: rgba(255, 201, 92, .3); background: rgba(255, 201, 92, .05); color: #f3dfb0; }
.encadre.danger { border-color: rgba(255, 90, 118, .3); background: var(--red-soft); color: #ffc2cc; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--line-2); background: rgba(17, 24, 22, .97); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: apparait .2s ease;
}
.toast.ok { border-color: rgba(61, 255, 143, .4); }
.toast.ko { border-color: rgba(255, 90, 118, .45); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(150, 255, 196, .1); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(150, 255, 196, .2); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }



/* ============================================================ schéma */
.schema-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; }
.schema-scene { position: relative; overflow: hidden; cursor: grab; touch-action: none; background-color: var(--bg); }
.schema-scene.tire { cursor: grabbing; }
.schema-svg { width: 100%; height: 100%; display: block; user-select: none; }
.schema-svg g.glisse { transition: transform .45s var(--doux); }
.schema-col { font: 600 10.5px var(--mono); letter-spacing: .18em; fill: var(--faint); }
.lien { fill: none; stroke: rgba(150, 255, 196, .16); stroke-width: 1.2; transition: stroke .25s, opacity .25s, stroke-width .25s; }
.lien.trace { stroke-dasharray: 900; stroke-dashoffset: 900; animation: trace 1.1s var(--doux) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.lien.actif { stroke: var(--neon); stroke-width: 1.8; filter: url(#lueur); opacity: 1; }
.lien.eteint { opacity: .12; }
.noeud { cursor: pointer; transition: opacity .25s; outline: none; }
.noeud.entre { animation: noeud-in .5s var(--doux) both; }
@keyframes noeud-in { from { opacity: 0; } }
.noeud .fond { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; transition: fill .2s, stroke .2s; }
.noeud:hover .fond, .noeud:focus .fond { fill: var(--surface-3); stroke: rgba(61, 255, 143, .5); }
.noeud .type { font: 600 8.5px var(--mono); letter-spacing: .14em; fill: var(--faint); }
.noeud .nom { font: 500 12px var(--sans); fill: var(--text); }
.noeud .compte { font: 600 11px var(--mono); fill: var(--neon-2); }
.noeud.t-visiteur .fond { fill: rgba(61, 255, 143, .08); stroke: rgba(61, 255, 143, .45); }
.noeud.t-externe .fond { stroke-dasharray: 4 3; }
.noeud.t-table .fond, .noeud.t-donnees .fond { fill: #101a1f; }
.noeud.choisi .fond { stroke: var(--neon); stroke-width: 1.6; filter: url(#lueur); }
.noeud.eteint { opacity: .18; }
.noeud.trouve .fond { stroke: var(--cyan); stroke-width: 1.6; }
.noeud.parcouru .fond { stroke: var(--neon); fill: rgba(61, 255, 143, .12); }
.noeud.change-modifie .fond, .noeud.change-renomme .fond { stroke: rgba(255, 201, 92, .75); }
.noeud.change-ajoute .fond { stroke: rgba(61, 255, 143, .8); }
.pastille-change { fill: var(--amber); filter: url(#lueur); }
.noeud.change-ajoute .pastille-change { fill: var(--neon); }
.bille { fill: var(--neon); filter: url(#lueur); }
.schema-barre .filtres-types { display: flex; gap: 4px; }
.puce.filtre { cursor: pointer; opacity: .5; font-size: 10px; }
.puce.filtre.allume { opacity: 1; border-color: rgba(61, 255, 143, .35); color: var(--text); }
.schema-panneau { border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; background: rgba(9, 13, 12, .7); display: flex; flex-direction: column; gap: 8px; animation: fondu .3s ease both; }
.schema-panneau h3 { margin: 4px 0 0; font-size: 15px; font-weight: 640; word-break: break-word; }
.schema-titre { display: flex; gap: 6px; flex-wrap: wrap; }
.schema-resume { margin: 0; color: var(--text-2); line-height: 1.55; }
.groupes { display: grid; gap: 4px; }
.groupe-puce { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); cursor: pointer; text-align: left; }
.groupe-puce i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.groupe-puce span { margin-left: auto; font: 11px var(--mono); color: var(--faint); }
.groupe-puce.actif, .groupe-puce:hover { border-color: var(--c); color: var(--text); }
.parcours { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); cursor: pointer; text-align: left; }
.parcours:hover { border-color: rgba(61, 255, 143, .45); color: var(--text); }
.parcours .ic { color: var(--neon); width: 13px; height: 13px; }
.parcours small { margin-left: auto; color: var(--faint); font: 11px var(--mono); }
.voisin { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; text-align: left; font-size: 12.5px; }
.voisin:hover { background: var(--surface-2); color: var(--text); }
.voisin small { color: var(--faint); }
.type-mini { font: 600 8.5px var(--mono); letter-spacing: .1em; color: var(--faint); width: 62px; flex: none; }
.routes { display: grid; gap: 2px; font: 11.5px var(--mono); color: var(--text-2); max-height: 220px; overflow: auto; }
.routes b { display: inline-block; width: 52px; font-weight: 600; color: var(--cyan); }
.routes b.m-POST { color: var(--neon); } .routes b.m-PUT, .routes b.m-PATCH { color: var(--amber); } .routes b.m-DELETE { color: var(--red); }
.schema-pied { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); flex: none; }
.schema-pied .sep { width: 1px; height: 14px; background: var(--line-2); }


/* ---------- une fenêtre détachée : un seul panneau, sans barre latérale ---------- */
body.fenetre-seule .coque { grid-template-columns: 1fr; }
body.fenetre-seule .rail, body.fenetre-seule .site-tete { display: none; }
body.fenetre-seule .barre .bascules, body.fenetre-seule .barre .compteurs { display: none; }
.btn.detache { border-style: dashed; color: var(--cyan); opacity: .8; }


.schema-bulle {
  position: absolute; z-index: 4; width: 300px; padding: 12px 14px; border-radius: 12px; pointer-events: auto;
  background: rgba(13, 18, 17, .97); border: 1px solid rgba(61, 255, 143, .35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 24px rgba(61, 255, 143, .1); display: grid; gap: 4px;
}
.schema-bulle.apparait { animation: zoom-in .22s var(--doux) both; }
.schema-bulle b { font-size: 14.5px; font-weight: 640; color: var(--text); }
.schema-bulle p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.schema-bulle .btn { justify-self: start; margin-top: 4px; }
.bulle-type { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.voisin small { margin: 0; width: 140px; flex: none; color: var(--faint); font: 11.5px var(--sans); }
.technique { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--text-2); }
.technique summary { cursor: pointer; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.technique[open] summary { margin-bottom: 8px; }


/* ---------- la porte (connexion à distance) ---------- */
body.page-porte { overflow: auto; display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.porte {
  position: relative; z-index: 1; width: min(380px, 100%); display: grid; gap: 14px; padding: 30px 28px; border-radius: 18px;
  border: 1px solid var(--line-2); background: rgba(13, 18, 17, .92); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 60px rgba(61, 255, 143, .06);
  animation: zoom-in .4s var(--doux) both;
}
.porte-logo { width: 40px; height: 40px; color: var(--neon); filter: drop-shadow(0 0 10px rgba(61, 255, 143, .5)); }
.porte h1 { margin: 0; font-size: 20px; }
.porte label { display: grid; gap: 6px; }
.porte .code6 { font: 600 20px var(--mono); letter-spacing: .4em; text-align: center; }
.porte .btn.neon { height: 40px; justify-content: center; font-size: 14px; }
.porte-erreur { margin: 0; min-height: 18px; color: var(--red); font-size: 13px; }
.porte-pied { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
/* ---------- réglages ---------- */
.reglage { max-width: 820px; }
.reglage .bloc { margin-bottom: 18px; }
.reglage .etapes-reglage { display: grid; gap: 14px; padding: 16px; }
.etape-reglage { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.etape-reglage .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); border: 1px solid var(--line-2); color: var(--muted); }
.etape-reglage.fait .num { background: var(--neon); color: var(--neon-ink); border-color: var(--neon); }
.etape-reglage h3 { margin: 2px 0 6px; font-size: 14px; }
.etape-reglage p { margin: 0 0 8px; color: var(--text-2); font-size: 13px; }
.ligne-champs { display: flex; gap: 8px; flex-wrap: wrap; }
.ligne-champs .champ { flex: 1; min-width: 180px; }
.qr { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.qr svg { width: 180px; height: 180px; border-radius: 8px; }
.qr code { font: 12px var(--mono); color: var(--text-2); word-break: break-all; }
.interrupteur { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.interrupteur input { appearance: none; width: 40px; height: 22px; border-radius: 22px; background: var(--surface-3); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background .2s; }
.interrupteur input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .25s var(--ressort), background .2s; }
.interrupteur input:checked { background: rgba(61, 255, 143, .25); border-color: rgba(61, 255, 143, .6); }
.interrupteur input:checked::after { transform: translateX(18px); background: var(--neon); box-shadow: 0 0 10px var(--neon); }


/* ---------- dans l'app Mac (Electron) ---------- */
body.app-mac .marque { padding-top: 46px; }
body.app-mac .rail, body.app-mac .site-tete, body.app-mac .barre, body.app-mac .page-tete, body.app-mac.page-porte { -webkit-app-region: drag; }
body.app-mac a, body.app-mac button, body.app-mac input, body.app-mac select, body.app-mac textarea, body.app-mac .selecteur,
body.app-mac .rail-nav, body.app-mac .rail-machine, body.app-mac .porte { -webkit-app-region: no-drag; }
body.app-mac.fenetre-seule .barre { padding-left: 86px; }


/* ---------- mises à jour ---------- */
.rail-maj { padding: 0 10px 8px; }
.pastille-maj { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid rgba(61, 255, 143, .45); background: linear-gradient(135deg, rgba(61, 255, 143, .14), rgba(61, 255, 143, .04)); color: var(--text);
  box-shadow: 0 0 22px rgba(61, 255, 143, .12); animation: entree .4s var(--doux) both; }
.pastille-maj b { color: var(--neon); font-family: var(--mono); }
.pastille-maj .ic { margin-left: auto; transform: rotate(180deg); color: var(--neon); }
.notes-maj p { margin: 0 0 6px; } .notes-maj ul { margin: 0; padding-left: 18px; }
.toast-maj .btn { margin-left: auto; }
body.maj-redemarrage::before {
  content: "Mise à jour en cours : coco-server redémarre…"; position: fixed; inset: 0; z-index: 96; display: grid; place-items: center;
  background: rgba(3, 5, 4, .82); backdrop-filter: blur(4px); color: var(--neon); font: 600 15px var(--mono); letter-spacing: .08em;
}


/* ============================================================ l'éditeur (Monaco), fondu dans l'interface */
.ide { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 190px 1fr; background: var(--bg); }
.ide[hidden] { display: none !important; }
.ide-arbre { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(9, 13, 12, .6); }
.ide-arbre-tete { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px 12px; }
.ide-arbre .champ { margin: 0 8px 6px; width: calc(100% - 16px); height: 28px; padding: 4px 9px; font-size: 12px; }
.ide-liste { flex: 1; overflow-y: auto; padding: 2px 4px 20px; }
.ide-dossier, .ide-fichier { display: flex; align-items: center; gap: 7px; width: 100%; height: 26px; border: 0; border-radius: 6px; background: none;
  color: var(--text-2); font: 12.5px var(--sans); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ide-dossier { color: var(--text); font-weight: 520; }
.ide-dossier:hover, .ide-fichier:hover { background: var(--surface-2); }
.ide-fichier.actif { background: var(--neon-soft); color: var(--text); box-shadow: inset 2px 0 0 var(--neon); }
.chevron { display: inline-block; width: 10px; color: var(--faint); transition: transform .2s var(--doux); }
.chevron.ouvert { transform: rotate(90deg); color: var(--neon); }
.pastille-lang { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--faint); }
.l-py { background: #6f9dff; } .l-js, .l-mjs { background: #ffc95c; } .l-ts, .l-tsx { background: #61e2ff; }
.l-css { background: #b48cff; } .l-html { background: #ff9f5a; } .l-json { background: #9df5b8; } .l-md { background: #d5e3db; } .l-sh { background: #3dff8f; }
.ide-droite { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ide-onglets { display: flex; height: 34px; flex: none; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(9, 13, 12, .75); }
.ide-onglets::-webkit-scrollbar { height: 0; }
.ide-onglet { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 12px; border-right: 1px solid var(--line);
  font: 12.5px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; animation: entree .25s var(--doux) both; }
.ide-onglet:hover { color: var(--text); background: var(--surface); }
.ide-onglet.actif { color: var(--text); background: var(--bg); }
.ide-onglet.actif::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.ide-onglet.disque { color: var(--red); }
.ide-fermer { width: 18px; height: 18px; border: 0; border-radius: 4px; background: none; color: var(--faint); cursor: pointer; font-size: 14px; line-height: 1; }
.ide-fermer:hover { background: var(--surface-3); color: var(--text); }
.ide-corps { position: relative; flex: 1; min-height: 0; }
.ide-editeur { position: absolute; inset: 0; }
.ide-accueil { position: absolute; inset: 0; margin: 0; max-width: none; display: grid; place-content: center; background: var(--bg); }
.ide-etat { display: flex; align-items: center; gap: 12px; height: 26px; flex: none; padding: 0 12px; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden;
  font-size: 11.5px; color: var(--muted); background: rgba(9, 13, 12, .85); }
.ide-etat .puce { font-size: 10.5px; line-height: 16px; }
/* Monaco : mêmes polices, mêmes arrondis, mêmes ombres que le reste */
.ide .monaco-editor, .ide .monaco-editor .margin, .ide .monaco-editor-background { background-color: var(--bg) !important; }
.ide .monaco-editor .suggest-widget, .ide .monaco-editor .monaco-hover, .monaco-menu-container .monaco-menu {
  border-radius: 10px !important; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(61, 255, 143, .14) !important; }
.monaco-menu-container .monaco-menu .action-label { font-family: var(--sans) !important; }
.flash-saisie { animation: flash-saisie 1.2s ease; }
@keyframes flash-saisie { 0% { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(61, 255, 143, .25); } }


/* ---------- panneaux repliés : une fine bande cliquable ---------- */
.bande-panneau { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; border: 0; border-right: 1px solid var(--line);
  background: rgba(9, 13, 12, .7); color: var(--muted); cursor: pointer; transition: background .2s, color .2s; animation: fondu .3s ease both; }
.bande-panneau:last-child { border-right: 0; border-left: 1px solid var(--line); }
.bande-panneau:hover { background: var(--neon-soft); color: var(--neon); }
.bande-panneau span { writing-mode: vertical-rl; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.bande-panneau.detache { color: var(--cyan); }
.ide.sans-arbre { grid-template-columns: 0 1fr; }
.ide.sans-arbre .ide-arbre { visibility: hidden; border: 0; }
.ide { transition: grid-template-columns .28s var(--doux); }
.ide-barre { display: flex; flex: none; border-bottom: 1px solid var(--line); background: rgba(9, 13, 12, .75); }
.ide-barre .ide-onglets { flex: 1; min-width: 0; border-bottom: 0; background: none; }
.ide-bouton-arbre { width: 34px; flex: none; border: 0; border-right: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.ide-bouton-arbre:hover { color: var(--neon); background: var(--surface); }


/* ---------- éditeur divisé, outils de l'éditeur ---------- */
.ide-outils { display: flex; flex: none; border-left: 1px solid var(--line); }
.ide-bouton { width: 34px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.ide-bouton:hover { color: var(--neon); background: var(--surface); }
.ide-corps.divise { display: grid; grid-template-columns: 1fr 1fr; }
.ide-corps.divise .ide-editeur { position: relative; inset: auto; min-width: 0; }
.ide-corps.divise .ide-editeur-2 { border-left: 1px solid var(--line); }
.ide-corps.divise .ide-editeur { box-shadow: inset 0 2px 0 rgba(61, 255, 143, .5); }
.ide-corps.divise.main-droite .ide-editeur:first-child { box-shadow: none; }
.ide-corps.divise:not(.main-droite) .ide-editeur-2 { box-shadow: none; }
.ide-corps.divise .ide-editeur-2 { animation: entree-g .3s var(--doux) both; }


/* ---------- moins de texte : états vides courts ---------- */
.vide.vide-court { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vide.vide-court > .ic { width: 28px; height: 28px; color: var(--neon); opacity: .55; filter: drop-shadow(0 0 10px rgba(61, 255, 143, .35)); }
.vide.vide-court .gros { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.composeur-ligne .indice:empty { display: none; }

.raccourcis { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 11.5px; color: var(--faint); }
.raccourci { display: inline-flex; align-items: center; gap: 6px; }
.raccourci kbd { font: 500 10.5px var(--mono); padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; color: var(--text-2); background: var(--surface); }

.etapes-mel { display: flex; flex-wrap: wrap; gap: 6px; }
.etape-mel { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; color: var(--text-2);
  background: var(--surface); animation: entree-g .35s var(--doux) both; animation-delay: calc(var(--n) * 70ms); }
.etape-mel .ic { width: 13px; height: 13px; color: var(--neon); }

/* ---------- dispositions ---------- */
.menu.menu-dispo { width: 344px; padding: 10px; display: grid; gap: 8px; }
.menu-dispo > .etiquette { padding: 2px 4px 0; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tuile-dispo { display: grid; gap: 6px; justify-items: center; padding: 8px 6px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--muted); cursor: pointer; font: 500 11px var(--sans); transition: border-color .2s, background .2s, color .2s, transform .2s var(--doux); }
.tuile-dispo:hover { border-color: rgba(61, 255, 143, .45); color: var(--text); transform: translateY(-1px); }
.tuile-dispo.actif { border-color: var(--neon); background: var(--neon-soft); color: var(--neon); box-shadow: 0 0 14px rgba(61, 255, 143, .18); }
.tuile-ecrans { display: flex; gap: 4px; height: 40px; align-items: stretch; }
.mini-ecran { display: grid; gap: 2px; width: 62px; padding: 2px; border: 1px solid var(--line-2, #2a3a33); border-radius: 4px; background: #070a09; }
.tuile-ecrans .mini-ecran:not(:only-child) { width: 34px; }
.mini-case { display: grid; place-items: center; border-radius: 2px; background: #15201b; min-width: 0; }
.mini-case .ic { width: 9px; height: 9px; opacity: .8; }
.mini-code { background: rgba(61, 255, 143, .16); color: var(--neon); }
.mini-claude { background: rgba(120, 230, 255, .12); color: var(--cyan); }
.mini-apercu { background: rgba(255, 255, 255, .07); color: var(--text-2); }
.tuile-dispo:hover .mini-case, .tuile-dispo.actif .mini-case { filter: brightness(1.35); }
.bascules-dispo { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.bascule-dispo { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted);
  cursor: pointer; font: 500 11.5px var(--sans); white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.bascule-dispo:hover { color: var(--text); border-color: rgba(61, 255, 143, .4); }
.bascule-dispo.actif { color: var(--neon); border-color: rgba(61, 255, 143, .55); background: var(--neon-soft); }
.bascule-dispo .ic { width: 14px; height: 14px; }

/* aperçu sous le code */
.pile { display: grid; min-width: 0; min-height: 0; }
.pile > .panneau { border-right: 0; }
.pile > .panneau:last-child { border-top: 1px solid var(--line); }
.poignee-h { height: 5px; margin: -3px 0; cursor: row-resize; position: relative; z-index: 5; }
.poignee-h:hover::after, .poignee-h.tire::after { content: ""; position: absolute; inset: 2px 0; background: var(--neon); box-shadow: 0 0 8px var(--neon); }

/* mode concentré : plus de liste des sites ni d'en-tête */
body.concentre .coque { grid-template-columns: 1fr; }
body.concentre .rail, body.concentre .site-tete { display: none; }
.coque { transition: grid-template-columns .3s var(--doux); }

/* fenêtres détachées : seulement les panneaux (la barre de la branche reste sur l'écran principal) */
body.fenetre-seule .barre { display: none; }
body.app-mac.fenetre-seule .panneaux > :first-child .panneau-tete { padding-left: 86px; }
body.app-mac.fenetre-seule .panneau-tete { -webkit-app-region: drag; }

/* fenêtre suivante, quand le navigateur n'en ouvre qu'une par clic */
.suite-fenetre { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--neon);
  border-radius: 999px; background: rgba(9, 13, 12, .92); color: var(--neon); font: 600 13px var(--sans); cursor: pointer;
  box-shadow: 0 0 22px rgba(61, 255, 143, .3); animation: entree-g .35s var(--doux) both, pulse-neon 2.2s ease-in-out infinite; }
@keyframes pulse-neon { 50% { box-shadow: 0 0 34px rgba(61, 255, 143, .5); } }

/* ============================================================ animations
   Discrètes : on arrive en douceur, ce qui vit respire un peu, rien ne clignote pour rien. */
:root { --doux: cubic-bezier(.2, .8, .2, 1); --ressort: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } }
@keyframes entree-g { from { opacity: 0; transform: translateX(-8px); } }
@keyframes fondu { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes balayage { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes respire { 0%, 100% { box-shadow: 0 0 6px rgba(61, 255, 143, .55); } 50% { box-shadow: 0 0 14px rgba(61, 255, 143, .95); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } }

.page, .atelier { animation: entree .38s var(--doux) both; }
.site-tete { animation: fondu .3s ease both; }
.vue.entree .carte, .page.entree .carte, .page.entree .tuile { animation: entree .5s var(--doux) both; }
.page.entree .tuile:nth-child(2) { animation-delay: .04s; } .page.entree .tuile:nth-child(3) { animation-delay: .08s; }
.page.entree .tuile:nth-child(4) { animation-delay: .12s; } .page.entree .tuile:nth-child(5) { animation-delay: .16s; }
.page.entree .carte:nth-child(1) { animation-delay: .08s; } .page.entree .carte:nth-child(2) { animation-delay: .12s; }
.page.entree .carte:nth-child(3) { animation-delay: .16s; } .page.entree .carte:nth-child(4) { animation-delay: .2s; }
.page.entree .carte:nth-child(5) { animation-delay: .24s; } .page.entree .carte:nth-child(6) { animation-delay: .28s; }
.page.entree .carte:nth-child(7) { animation-delay: .32s; } .page.entree .carte:nth-child(8) { animation-delay: .36s; }
.page.entree .carte:nth-child(n+9) { animation-delay: .4s; }
.carte { transition: border-color .25s, transform .25s var(--doux), box-shadow .25s; }
.carte:hover { transform: translateY(-2px); }
.carte:hover .carte-icone { border-color: rgba(61, 255, 143, .35); box-shadow: 0 0 16px rgba(61, 255, 143, .12); }
.carte-icone { transition: border-color .25s, box-shadow .25s; }
.rail-nav:not(.deja) .rail-lien { animation: entree-g .35s var(--doux) both; }
.rail-lien::before { transition: transform .25s var(--doux); }
.point.ok { animation: respire 3.2s ease-in-out infinite; }
.point.ok.vivant { animation: pulse 1.6s ease-in-out infinite; }
.btn { transition: border-color .15s, color .15s, background .15s, box-shadow .2s, transform .12s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.neon:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(61, 255, 143, .5), 0 0 30px rgba(61, 255, 143, .35); }
.marque:hover .marque-logo { filter: drop-shadow(0 0 10px rgba(61, 255, 143, .8)); transform: rotate(-8deg); }
.marque-logo { transition: filter .3s, transform .4s var(--ressort); }
.onglet.actif::after { animation: souligne .3s var(--doux) both; }
@keyframes souligne { from { transform: scaleX(.2); opacity: 0; } }
.panneau { animation: fondu .3s ease both; }
.fil > * { animation: entree .32s var(--doux) both; }
.outil.en-cours {
  background-image: linear-gradient(100deg, transparent 30%, rgba(61, 255, 143, .07) 50%, transparent 70%);
  background-size: 200% 100%; animation: balayage 1.6s linear infinite;
}
.fichier-ligne { transition: background .15s; }
.code-zone > .code, .code-zone > .vide { animation: fondu .22s ease both; }
.scene iframe { animation: fondu .45s ease both; }
.scene.mobile iframe { transition: transform .35s var(--doux), box-shadow .3s; }
.voile { animation: fondu .18s ease both; }
.voile .fenetre { animation: zoom-in .26s var(--doux) both; }
.menu { animation: zoom-in .16s var(--doux) both; transform-origin: top left; }
.etape { transition: background .2s; }
.etape.ok .rond, .etape.echec .rond { animation: pop .38s var(--ressort) both; }
.etape.en_cours .nom { color: var(--text); }
.toast { animation: toast-in .3s var(--doux) both; transition: opacity .3s; }
.jauge-barre i { transition: width .8s var(--doux), background .4s; }
.puce { transition: background .2s, border-color .2s, color .2s; }
.ligne.ajout.neuve .txt { text-shadow: 0 0 12px rgba(61, 255, 143, .25); }

/* Le direct a décroché : un petit témoin, le temps de se reconnecter. */
body.hors-ligne::after {
  content: "Reconnexion…"; position: fixed; left: 50%; top: 14px; z-index: 95; transform: translateX(-50%);
  padding: 5px 14px; border-radius: 99px; font: 600 11px var(--mono); letter-spacing: .1em; color: var(--amber);
  background: rgba(17, 24, 22, .96); border: 1px solid rgba(255, 201, 92, .35); animation: pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }