/* kit v3.45 — 2026-10-31 */
/* ══════════ LE COCKPIT ══════════
   Venu de la console Nexus (maquette validée le 24 oct. 2026, https://claude.ai/artifact/BrQ6i3FMCv1qgRB9VwY3Sf, version 5), promu au kit
   (v3.31) quand Tower, dans le dashboard, est devenu son deuxième écran. Composants du « cockpit sombre » (préfixe cp-) : rien ne
   s'allume quand tout va bien ; ambre = attention, rouge = alarme, bleu = une opération en cours.
   À poser avec theme.css : <link rel="stylesheet" href="cockpit.css"> (apply-kit le copie dans les apps qui le référencent). */
/* Les jetons du cockpit, clair puis sombre. Les voyants allumés ont la même couleur dans les deux thèmes. */
.cp{
  --cp-table:#E1E1E1; --cp-table-bd:#D5D5D5; --cp-tr:#FFFFFF; --cp-tr-bd:#D7D7D7;
  --cp-led:#F2F2F2; --cp-led-bd:#E1E1E1; --cp-led-tx:#A3A3A3;
  --cp-met:#F6F6F6; --cp-met-bd:#EAEAEA; --cp-seg:#E2E2E2; --cp-seg-on:#4A4D54;
  --cp-pb:#FFFFFF; --cp-pb-bd:#D2D2D2; --cp-pb-led:#E0E0E0; --cp-sel:#F4F4F4; --cp-hover:#FAFAFA;
  --cp-ambre:#E9A23B; --cp-ambre-bd:#D9922B; --cp-ambre-tx:#2A1D05; --cp-ambre-lisible:#8A5D0E;
  --cp-rouge:#E5484D; --cp-rouge-bd:#D63B40; --cp-rouge-lisible:#C9353A;
  --cp-bleu:#2F64B0; --cp-bleu-lisible:#1F5AA8; --cp-bleu-doux:#E7EEF8;
  --cp-corail:#ED5847; --cp-corail-doux:#FDEDEA; --cp-corail-tx:#B82D1C;
}
html[data-theme="dark"] .cp{
  --cp-table:#0F0F13; --cp-table-bd:#24242C; --cp-tr:#1B1B21; --cp-tr-bd:#2C2C36;
  --cp-led:#24242D; --cp-led-bd:#30303B; --cp-led-tx:#6A6A78;
  --cp-met:#17171C; --cp-met-bd:#2A2A33; --cp-seg:#2B2B35; --cp-seg-on:#C9C8CF;
  --cp-pb:#22222A; --cp-pb-bd:#3B3B47; --cp-pb-led:#3B3B47; --cp-sel:#22222A; --cp-hover:#1F1F26;
  --cp-ambre-lisible:#E8C06A; --cp-rouge-lisible:#FF7A80; --cp-bleu-lisible:#9CC3F5; --cp-bleu-doux:#1C2A40;
  --cp-corail-doux:#3A2522; --cp-corail-tx:#F07E6C;
}

/* La page du cockpit : toute la hauteur sous la barre du haut, sans défilement au bureau. */
.content.cp-on{padding:12px 16px 14px;overflow:hidden;display:flex}
.content.cp-on > #panel-controle.active{display:flex;flex:1;min-width:0;min-height:0;animation:none}
.cp{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;position:relative}
.cp-titre-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes cp-clign{50%{filter:brightness(.66)}}
@keyframes cp-pouls{50%{filter:brightness(1.28)}}
@keyframes cp-arrive{from{opacity:0;transform:translateY(8px)}}
.cp kbd{display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 5px;border-radius:5px;background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2px;font:700 10px/1 var(--font-body);color:var(--ink-2);white-space:nowrap}

/* ── Le bandeau d'alarmes ── */
.cp-glare{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:stretch;padding:12px 14px;border-radius:var(--r-section);background:var(--forest);color:#F3F1EE}
html[data-theme="dark"] .cp-glare{border:1px solid #2C2C36}
.cp{container:cp / inline-size}
.cp-maitres{display:flex;gap:8px}
.cp-maitre{width:118px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px;padding:9px 11px;border-radius:10px;border:1px solid #3A3E48;background:#262A32;color:#7C808A;font:700 10px/1.1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;text-align:left}
.cp-maitre b{font:600 24px/1 var(--font-display);letter-spacing:0;font-variant-numeric:tabular-nums}
.cp-maitre small{font:500 10.5px/1.2 var(--font-body);letter-spacing:0;text-transform:none;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cp-maitre.rouge{background:var(--cp-rouge);border-color:var(--cp-rouge);color:#fff}
.cp-maitre.ambre{background:var(--cp-ambre);border-color:var(--cp-ambre);color:var(--cp-ambre-tx)}
.cp .clignote{animation:cp-clign 1s steps(2,jump-none) infinite}
.cp-ann{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;align-content:center}
.cp-lampe{display:flex;align-items:center;justify-content:space-between;gap:4px;height:30px;padding:0 5px 0 6px;border-radius:7px;border:1px solid #333741;background:#22262D;color:#6F737D;font:700 9px/1 var(--font-body);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;white-space:nowrap;overflow:hidden}
.cp-lampe > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cp-lampe:hover{border-color:#5A5F6B}
.cp-lampe i{font:600 12px/1 var(--font-display);font-style:normal;letter-spacing:0}
.cp-lampe.ambre{background:var(--cp-ambre);border-color:var(--cp-ambre);color:var(--cp-ambre-tx)}
.cp-lampe.rouge{background:var(--cp-rouge);border-color:var(--cp-rouge);color:#fff}
.cp-lampe.info{border-color:#5E8FD0;color:#9CC3F5}
.cp-lampe.filtre{box-shadow:inset 0 0 0 2px #F3F1EE}
.cp-instr{display:flex;align-items:center;gap:8px}
.cp-gbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:62px;height:56px;padding:0 8px;border-radius:10px;border:1px solid #333741;background:#262A32;color:#AEB1B9;font:700 9px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cp-gbtn:hover{border-color:#5A5F6B;color:#fff}
.cp-gbtn.on{background:#F3F1EE;border-color:#F3F1EE;color:#1D2026}
.cp-gbtn.bleu{background:var(--cp-bleu);border-color:var(--cp-bleu);color:#fff}
.cp-gbtn b{font:600 15px/1 var(--font-display);letter-spacing:0}
.cp-ronde{display:flex;align-items:center;gap:9px;width:186px;flex:none;height:56px;padding:0 10px 0 8px;border-radius:10px;border:1px solid #333741;background:#262A32;color:#AEB1B9;font:500 11.5px/1.3 var(--font-body);font-variant-numeric:tabular-nums;cursor:pointer;text-align:left}
.cp-ronde:hover{border-color:#5A5F6B}
.cp-ronde b{display:block;color:#F3F1EE;font-weight:600}
.cp-ronde.rouge{border-color:var(--cp-rouge)}
.cp-anneau{width:36px;height:36px;flex:none}
.cp-horloge{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:0 4px 0 6px;font:600 21px/1 var(--font-display);font-variant-numeric:tabular-nums;color:#F3F1EE}
.cp-horloge small{margin-top:5px;font:600 10px/1 var(--font-body);color:#7C808A;letter-spacing:.05em}

/* Le bandeau reste sur UNE ligne : quand la place se resserre, les instruments se réduisent (la ronde à son anneau)
   et les voyants gardent leur rangée. Il ne se plie sous eux qu'à moins de 1 240 px de cockpit. */
@container cp (max-width:1560px){
  .cp-glare{gap:12px}
  .cp-maitre{width:104px}
  .cp-instr{gap:6px}
  .cp-ronde{width:auto;gap:0;padding:0 8px 0 6px}
  .cp-ronde > span{display:none}
  .cp-gbtn{min-width:54px;padding:0 6px}
  .cp-lampe{font-size:8.5px}
}
@container cp (max-width:1240px){
  .cp-glare{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"maitres instr" "ann ann";row-gap:10px}
  .cp-maitres{grid-area:maitres}
  .cp-instr{grid-area:instr;justify-content:flex-end}
  .cp-ann{grid-area:ann}
}

/* ── Le corps : la table de mixage et l'inspecteur ── */
.cp-corps{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:10px}
.cp-table{display:flex;gap:7px;padding:8px;border-radius:var(--r-section);background:var(--cp-table);border:1px solid var(--cp-table-bd);overflow:auto}
.cp-tr{flex:none;width:124px;display:flex;flex-direction:column;gap:7px;padding:8px 7px 7px;border-radius:12px;background:var(--cp-tr);border:1px solid var(--cp-tr-bd);position:relative;transition:opacity .2s,box-shadow .2s,border-color .2s}
.cp-tr > *{flex-shrink:0}
.cp-table.arrivee .cp-tr{animation:cp-arrive .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*45ms)}
.cp-tr::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:transparent}
.cp-tr.choisi{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cp-tr.choisi::before{background:var(--accent)}
.cp-tr.terne{opacity:.32}
.cp-tr.silence .cp-voyants{opacity:.4;filter:grayscale(1)}
.cp-tete{display:block;width:100%;min-height:52px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.cp-nom{display:flex;gap:6px;align-items:flex-start;font:600 12.5px/1.22 var(--font-display);color:var(--ink)}
.cp-nom > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-pt{flex:none;width:8px;height:8px;margin-top:4px;border-radius:50%;background:#CACACA}
:where(html[data-theme="dark"]) .cp-pt{background:#4A4A55}
.cp-pt.rouge{background:var(--cp-rouge)}
.cp-pt.ambre{background:var(--cp-ambre)}
.cp-pt.bleu{background:var(--cp-bleu);animation:cp-pouls 1.3s ease-in-out infinite}
.cp-sous{display:flex;align-items:center;gap:5px;margin-top:5px;font:600 10px/1 var(--font-body);color:var(--ink-3)}
.cp-zone{margin-left:auto;padding:2px 4px;border-radius:4px;border:1px solid var(--border-strong);font:700 8.5px/1 var(--font-body);letter-spacing:.05em;color:var(--ink-2)}
.cp-mini{display:flex;gap:4px}
.cp-mini button,.cp-mini a{flex:1;height:22px;display:grid;place-items:center;padding:0;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-3);cursor:pointer}
.cp-mini button:hover,.cp-mini a:hover{color:var(--ink);border-color:var(--border-strong)}
.cp-mini button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.cp-voyants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.cp-v{height:20px;display:grid;place-items:center;border-radius:5px;border:1px solid var(--cp-led-bd);background:var(--cp-led);color:var(--cp-led-tx);font:700 8.5px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase}
.cp-v.ambre{background:var(--cp-ambre);border-color:var(--cp-ambre-bd);color:var(--cp-ambre-tx)}
.cp-v.rouge{background:var(--cp-rouge);border-color:var(--cp-rouge-bd);color:#fff}
.cp-v.bleu{background:var(--cp-bleu);border-color:var(--cp-bleu);color:#fff;animation:cp-pouls 1.3s ease-in-out infinite}
.cp-v.info{background:var(--cp-tr);border-color:#9DBCE6;color:var(--cp-bleu-lisible)}
.cp-v.na{background:transparent;border-style:dashed;color:var(--cp-led-tx);opacity:.6}
.cp-metres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:7px 2px 6px;border-radius:8px;background:var(--cp-met);border:1px solid var(--cp-met-bd)}
.cp-m{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:0}
.cp-m b{font:600 9.5px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-m b.rouge{color:var(--cp-rouge-lisible)}
.cp-m b.vide{color:var(--ink-3);font-weight:500}
.cp-m small{font:700 7.5px/1 var(--font-body);letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase}
.cp-lectures,.cp-evts{display:none}
.cp.ops-replie .cp-lectures{display:flex;flex-direction:column;gap:3px;padding:6px 7px;border-radius:8px;background:var(--cp-met);border:1px solid var(--cp-met-bd);animation:cp-arrive .3s ease both}
.cp-lec{display:flex;justify-content:space-between;gap:6px;font:500 9.5px/1.3 var(--font-body);color:var(--ink-3);white-space:nowrap}
.cp-lec b{font:600 9.5px/1.3 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.cp-lec b.ambre{color:var(--cp-ambre-lisible)}
.cp-lec b.rouge{color:var(--cp-rouge-lisible)}

/* ── La tranche s'adapte à la hauteur de l'écran ──
   La table est le conteneur : sa hauteur dit combien de place il y a, chaque tranche la répartit toute seule. Les niveaux
   gagnent des traits fins (un tous les 4 px, ambre dès 75 %, rouge dès 92 %), les boutons grandissent jusqu'au carré,
   le reste devient de l'air entre le titre et le contenu, et au-delà de 900 px les relevés s'affichent. Rien n'est
   calé écran par écran ; les tranches s'élargissent aussi (jusqu'à 170 px) quand la largeur le permet. */
.cp-table{container:cpt / size}
.cp-tr:not(.cp-parc){flex:1 1 124px;max-width:170px}
.cp-tr{justify-content:space-between;gap:clamp(7px,1.1cqh,16px)}
.cp-tr.cp-parc{justify-content:flex-start}
.cp-tr .cp-pied{margin-top:0}
.cp-v{height:clamp(20px,2.4cqh,26px)}
.cp-metres{flex:1 1 84px;min-height:84px;max-height:290px}
.cp-m{min-height:0}
.cp-ech{display:block;flex:1 1 auto;min-height:46px;width:12px;border-radius:1px;--v:0;
  --a:calc(min(var(--v),75) * 1%);--b:calc(min(var(--v),92) * 1%);--c:calc(var(--v) * 1%);
  background:linear-gradient(to top,var(--cp-seg-on) 0 var(--a),var(--cp-ambre) var(--a) var(--b),var(--cp-rouge) var(--b) var(--c),var(--cp-seg) var(--c) 100%);
  -webkit-mask:repeating-linear-gradient(to top,#000 0 2px,transparent 2px 4px);mask:repeating-linear-gradient(to top,#000 0 2px,transparent 2px 4px)}
.cp-tr .cp-pbs{gap:clamp(4px,.6cqh,8px)}
.cp-pbs .cp-pb{letter-spacing:-.025em}
@container cpt (min-height:640px){
  .cp-pbs > .cp-pb,.cp-pbs > .cp-capot{height:auto;aspect-ratio:1 / 1}
  .cp-pbs > .cp-capot .cp-pb{height:100%}
  .cp-pbs .cp-pb{font-size:9px;gap:5px}
}
@container cpt (min-height:900px){
  .cp-lectures{display:flex;flex-direction:column;gap:3px;padding:6px 7px;border-radius:8px;background:var(--cp-met);border:1px solid var(--cp-met-bd)}
  .cp-evts{display:flex;flex-direction:column;gap:5px}
}

/* ── Les boutons-poussoirs : un clic arme (3 s pour se raviser), le capot pour ce qui ne se défait pas ── */
.cp-pbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.cp-pb{position:relative;width:100%;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 1px 4px;border-radius:8px;border:1px solid var(--cp-pb-bd);background:var(--cp-pb);color:var(--ink-2);font:700 8.5px/1 var(--font-body);letter-spacing:0;white-space:nowrap;cursor:pointer;box-shadow:0 1px 0 rgba(11,11,11,.05);overflow:hidden;transition:border-color .15s,background .15s,color .15s}
.cp-pb::before{content:"";position:absolute;top:4px;left:50%;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--cp-pb-led)}
/* Le bouton qui s’allume : redémarrage requis (mises à jour du système) */
.cp-pb.requis::before{background:var(--cp-ambre);width:22px;margin-left:-11px}
.cp-requis{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--cp-ambre)}
.cp-pb:hover{border-color:var(--ink-3);color:var(--ink)}
.cp-pb:active{transform:translateY(1px)}
.cp-pb:focus-visible,.cp-cache:focus-visible,.cp-fb:focus-visible,.cp-tete:focus-visible,.cp-lampe:focus-visible,.cp-maitre:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cp-pb[disabled]{opacity:.35;cursor:not-allowed}
.cp-pb.arme{background:var(--cp-corail-doux);border-color:var(--cp-corail);color:var(--cp-corail-tx)}
.cp-pb.arme::before{background:var(--cp-corail);animation:cp-clign .5s steps(2,jump-none) infinite}
.cp-pb.arme::after,.cp-fb.arme::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,1)*100%);background:var(--cp-corail)}
.cp-decompte{font:600 15px/1 var(--font-display)}
/* Un bouton-icône armé (« Ignorer ») : le compte à rebours prend la place de l'icône. */
.cp-ib .cp-lab{display:none}
.cp-ib .cp-ico{display:grid;place-items:center}
.cp-ib.arme{background:var(--cp-corail-doux);border-color:var(--cp-corail);color:var(--cp-corail-tx)}
.cp-ib.arme .cp-decompte{font-size:12px}
.cp-pb.tourne{border-color:#9DBCE6;color:var(--cp-bleu-lisible)}
.cp-pb.tourne::before{background:var(--cp-bleu);animation:cp-pouls 1.2s ease-in-out infinite}
.cp-pb.requis::before{background:var(--cp-ambre);width:22px;margin-left:-11px}
.cp-capot{position:relative}
.cp-capot .cp-lab-c{display:none}
.cp-cache{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:8px;border:1px solid #EFA79C;background:repeating-linear-gradient(-45deg,rgba(237,88,71,.15) 0 5px,transparent 5px 10px),var(--cp-pb);color:var(--cp-corail-tx);font:700 8.5px/1 var(--font-body);cursor:pointer;transform-origin:50% 0;transition:transform .3s cubic-bezier(.3,.7,.3,1)}
:where(html[data-theme="dark"]) .cp-cache{border-color:#6E3A33}
.cp-cache:hover{border-color:var(--cp-corail)}
.cp-capot.leve .cp-cache{transform:scaleY(.14);pointer-events:none}
.cp-capot.leve .cp-cache > *{opacity:0}
.cp-capot.leve .cp-pb{background:var(--cp-corail);border-color:var(--cp-corail);color:#fff}
.cp-capot.leve .cp-pb::before{background:#fff}
.cp-capot.leve .cp-lab-n{display:none}
.cp-capot.leve .cp-lab-c{display:inline}
.cp-requis{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--cp-ambre)}
.cp-pied{margin-top:auto;flex-shrink:1 !important;overflow:hidden;min-height:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font:500 9.5px/1.2 var(--font-body);color:var(--ink-3)}
.cp-pied b{color:var(--cp-bleu-lisible);font-weight:700}
.cp-pied .rouge{color:var(--cp-rouge-lisible);font-weight:700}
.cp-barre{height:4px;border-radius:2px;background:var(--cp-seg);overflow:hidden}
.cp-barre i{display:block;height:100%;background:var(--cp-bleu);transition:width .6s ease}
.cp-prep{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.cp-prep p{margin:0;font:500 10.5px/1.4 var(--font-body);color:var(--ink-2)}

/* ── La tranche « Parc » ── */
.cp-tr.cp-parc{width:178px;margin-left:auto;background:#1D2026;border-color:#1D2026;color:#F3F1EE}
html[data-theme="dark"] .cp-tr.cp-parc{border-color:#2C2C36}
.cp-parc .cp-nom{color:#fff}
.cp-parc .cp-sous{color:#8D909A}
.cp-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.cp-chiffres div{padding:7px 4px 6px;border-radius:7px;background:#262A32;text-align:center}
.cp-chiffres b{display:block;font:600 16px/1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums}
.cp-chiffres small{display:block;margin-top:4px;font:700 7.5px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:#8D909A}
.cp-chiffres .rouge b{color:#FF8A8F}
.cp-chiffres .ambre b{color:#F2C06A}
.cp-chiffres .bleu b{color:#9CC3F5}
.cp-sep-t{margin:3px 2px -2px;font:700 8.5px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:#7C808A}
.cp-fl{display:flex;flex-direction:column;gap:4px}
.cp-fb{position:relative;display:flex;align-items:center;gap:7px;width:100%;height:26px;padding:0 8px;border-radius:7px;border:1px solid #363A44;background:#262A32;color:#D5D4DA;font:600 10.5px/1 var(--font-body);cursor:pointer;text-align:left;overflow:hidden}
.cp-fb:hover{border-color:#5A5F6B;color:#fff}
.cp-fb[disabled]{opacity:.4;cursor:not-allowed}
.cp-fb.arme{background:#3A2522;border-color:var(--cp-corail);color:#fff}
.cp-parc .cp-cache{flex-direction:row;justify-content:flex-start;gap:7px;padding:0 8px;border-radius:7px;border-color:#4A3A3A;background:repeating-linear-gradient(-45deg,rgba(237,88,71,.13) 0 4px,transparent 4px 10px),#262A32;color:#C9C8CF;font:600 10.5px/1 var(--font-body)}
.cp-parc .cp-cache .ic-svg{color:#F07E6C}
.cp-parc .cp-capot.leve .cp-fb{background:var(--cp-corail);border-color:var(--cp-corail);color:#fff}
.cp.ops-replie .cp-evts{display:flex;flex-direction:column;gap:5px;animation:cp-arrive .3s ease both}
.cp-evt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;font:500 10px/1.3 var(--font-body);color:#C9C8CF}
.cp-evt time{color:#7C808A;font-variant-numeric:tabular-nums}
.cp-evt b{font-weight:600}

/* ── L'inspecteur ── */
.cp-insp{display:flex;flex-direction:column;min-height:0;border-radius:var(--r-section);background:var(--surface);border:1px solid var(--border);overflow:hidden}
.cp-insp-tete{padding:13px 15px 0}
.cp-insp-t{display:flex;align-items:center;gap:8px;font:600 16px/1.2 var(--font-display);color:var(--ink)}
.cp-insp-t .cp-pt{margin-top:0}
.cp-insp-s{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cp-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);font:600 10.5px/1.5 var(--font-body);color:var(--ink-2);white-space:nowrap;text-decoration:none}
a.cp-chip{color:var(--ink);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
.cp-insp .tabs{margin:10px 0 0;padding:0 5px;gap:0}
.cp-insp .tab{padding:9px 7px;font-size:12px}
.cp-insp-corps{flex:1;min-height:0;overflow-y:auto;padding:12px 15px 14px}
.cp-bloc + .cp-bloc{margin-top:15px}
.cp-bloc-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px;font:700 9.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cp-bloc-t b{font:600 13px/1 var(--font-display);letter-spacing:0;text-transform:none;color:var(--ink)}
.cp-bloc-t b.rouge{color:var(--cp-rouge-lisible)}
.cp-graphe{display:block;width:100%;height:66px}
.cp-dispo{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));gap:1.5px;height:16px}
.cp-dispo i{border-radius:1.5px;background:var(--cp-seg)}
.cp-dispo i.ok{background:var(--cp-seg-on);opacity:.55}
.cp-dispo i.r{background:var(--cp-rouge);opacity:1}
.cp-axe{display:flex;justify-content:space-between;margin-top:4px;font:500 9.5px/1 var(--font-body);color:var(--ink-3)}
.cp-faits{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:0;font:500 12px/1.35 var(--font-body)}
.cp-faits dt{color:var(--ink-3)}
.cp-faits dd{margin:0;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.cp-faits dd.ambre{color:var(--cp-ambre-lisible);font-weight:700}
.cp-faits dd.rouge{color:var(--cp-rouge-lisible);font-weight:700}
.cp-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.cp-ligne:last-child{border-bottom:0}
.cp-ligne-ic{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);color:var(--ink-2)}
.cp-ligne-ic.rouge{background:rgba(229,72,77,.12);color:var(--cp-rouge-lisible)}
.cp-ligne-ic.ambre{background:rgba(233,162,59,.16);color:var(--cp-ambre-lisible)}
.cp-ligne-t{font:600 12px/1.3 var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-ligne-s{font:500 10.5px/1.35 var(--font-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-enligne{padding:3px 6px;border-radius:5px;background:var(--ink);color:var(--surface);font:700 8.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.cp-ligne .cp-capot{width:86px}
.cp-ligne .cp-pb,.cp-exo .cp-pb{height:28px;flex-direction:row;gap:5px;padding:0 8px;font-size:9.5px}
.cp-ligne .cp-pb::before,.cp-exo .cp-pb::before{display:none}
.cp-ligne .cp-cache{flex-direction:row;gap:5px;font-size:9.5px}
.cp-exo{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)}
.cp-exo.ambre{border-color:rgba(233,162,59,.5);background:rgba(233,162,59,.12)}
.cp-exo-t{min-width:0;font:600 12px/1.3 var(--font-body);color:var(--ink)}
.cp-exo-t small{display:block;font:500 10.5px/1.35 var(--font-body);color:var(--ink-3)}
.cp-exo .cp-pb{margin-left:auto;flex:none;width:auto}
.cp-exo .cp-capot{margin-left:auto;flex:none;width:86px}
.cp-exo .cp-cache{flex-direction:row;gap:5px;font-size:9.5px}
.cp-exo .cp-capot .cp-pb{margin-left:0}
.cp-pr{padding:9px 0;border-bottom:1px solid var(--border)}
.cp-pr-l1{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}
.cp-pr-t{min-width:0;font:600 12px/1.3 var(--font-body);color:var(--ink)}
.cp-pr-t small{display:block;font:500 10.5px/1.35 var(--font-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-pr-l2{display:flex;align-items:center;gap:5px;margin:7px 0 0 37px}
.cp-pr-l2 .cp-pb{width:auto;height:28px;flex-direction:row;gap:5px;padding:0 10px;font-size:9.5px}
.cp-pr-l2 .cp-pb::before{display:none}
.cp-test{padding:3px 7px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);font:700 9.5px/1 var(--font-body);white-space:nowrap}
.cp-test.ko{background:rgba(229,72,77,.10);border-color:rgba(229,72,77,.35);color:var(--cp-rouge-lisible)}
.cp-test.cours{background:var(--cp-bleu-doux);border-color:rgba(47,100,176,.35);color:var(--cp-bleu-lisible)}
.cp-ligne-ic.secu{background:rgba(233,162,59,.16);color:var(--cp-ambre-lisible)}
.cp-ib:disabled{opacity:.4;cursor:not-allowed}
/* Un voyant qui mène au détail (Failles, Dépend.) et un texte qui est un lien. */
.cp-v-lien{cursor:pointer}
.cp-v-lien:hover{border-color:var(--ink-3)}
.cp-lien{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;cursor:pointer}
.cp-lien:hover{text-decoration-color:currentColor}
.cp-ligne-t small{font:500 10.5px/1 var(--font-body);color:var(--ink-3);margin-left:4px}
.cp-note-i{margin:10px 0 0;padding:9px 10px;border-radius:9px;background:var(--surface-2);font:500 11px/1.45 var(--font-body);color:var(--ink-2)}
.cp-note-i a{color:var(--ink)}
.cp-vide{padding:14px 2px;font:500 12px/1.45 var(--font-body);color:var(--ink-3)}

/* ── Les opérations (repliables vers le bas : elles rendent leur hauteur au reste) ── */
.cp-ops{flex:none;display:grid;grid-template-columns:minmax(0,1fr) 430px;height:172px;border-radius:var(--r-section);background:var(--surface);border:1px solid var(--border);overflow:hidden;transition:height .28s cubic-bezier(.22,1,.36,1)}
.cp-ops.replie{height:42px;grid-template-columns:minmax(0,1fr)}
.cp-ops.replie .cp-log,.cp-ops.replie .cp-ops-rows,.cp-ops.replie .cp-ong,.cp-ops.replie .cp-ops-note{display:none}
.cp-ops.replie .cp-ops-tete{border-bottom:0;height:40px;cursor:pointer}
.cp-ops-liste{display:flex;flex-direction:column;min-width:0;min-height:0}
.cp-ops-tete{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border)}
.cp-ops-tete h2{margin:0;display:flex;align-items:center;gap:7px;font:600 13px/1 var(--font-display);color:var(--ink)}
.cp-ong{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--surface-2)}
.cp-ong button{border:0;background:none;padding:5px 9px;border-radius:6px;font:600 11px/1 var(--font-body);color:var(--ink-3);cursor:pointer}
.cp-ong button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cp-ops-note{margin-left:auto;font:500 10.5px/1 var(--font-body);color:var(--ink-3)}
.cp-resume{display:none;align-items:center;gap:16px;min-width:0;flex:1;overflow:hidden}
.cp-ops.replie .cp-resume{display:flex}
.cp-resume-op{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--font-body);color:var(--ink);white-space:nowrap}
.cp-resume-op .ic-svg{color:var(--cp-bleu-lisible)}
.cp-resume-op.fini .ic-svg{color:var(--ink-3)}
.cp-resume-op.echec .ic-svg{color:var(--cp-rouge-lisible)}
.cp-resume-op small{font-weight:500;color:var(--ink-3)}
.cp-mini-barre{width:56px;height:4px;border-radius:2px;background:var(--cp-seg);overflow:hidden}
.cp-mini-barre i{display:block;height:100%;background:var(--cp-bleu);transition:width .6s ease}
.cp-plier{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font:600 11px/1 var(--font-body);cursor:pointer}
.cp-plier:hover{border-color:var(--ink-3);color:var(--ink)}
.cp-ops-rows{flex:1;min-height:0;overflow-y:auto}
.cp-op{display:grid;grid-template-columns:26px 220px minmax(0,1fr) 66px auto;align-items:center;gap:12px;padding:7px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.cp-op:hover{background:var(--cp-hover)}
.cp-op.choisi{background:var(--cp-sel)}
.cp-op-ic{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--surface-2);color:var(--ink-2)}
.cp-op-ic.cours{background:var(--cp-bleu-doux);color:var(--cp-bleu-lisible)}
.cp-op-ic.echec{background:rgba(229,72,77,.12);color:var(--cp-rouge-lisible)}
.cp-op-t{font:600 12px/1.25 var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-op-s{font:500 10.5px/1.3 var(--font-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-piste{display:flex;gap:3px;min-width:0}
.cp-et{flex:1;min-width:0}
.cp-et i{display:block;height:5px;border-radius:3px;background:var(--cp-seg)}
.cp-et.ok i{background:var(--cp-seg-on)}
.cp-et.cours i{background:var(--cp-bleu);animation:cp-pouls 1.2s ease-in-out infinite}
.cp-et.echec i{background:var(--cp-rouge)}
.cp-et span{display:block;margin-top:4px;font:600 9.5px/1 var(--font-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-et.cours span{color:var(--cp-bleu-lisible)}
.cp-et.echec span{color:var(--cp-rouge-lisible)}
.cp-op-d{font:600 11px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.cp-op-act{display:flex;gap:4px}
.cp-ib{width:26px;height:26px;display:grid;place-items:center;padding:0;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;text-decoration:none}
.cp-ib:hover{border-color:var(--ink-3);color:var(--ink)}
.cp-log{display:flex;flex-direction:column;min-height:0;background:#16181D;color:#C9C8CF}
.cp-log-t{display:flex;align-items:center;gap:8px;padding:9px 12px 7px;font:700 9.5px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:#8D909A}
.cp-log-t b{color:#F3F1EE;letter-spacing:.02em;text-transform:none;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-log pre{flex:1;min-height:0;margin:0;padding:0 12px 10px;overflow:auto;font:500 10.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.cp-log .h{color:#9CC3F5}
.cp-log .e{color:#FF8A8F}
.cp-log .d{color:#7C808A}

/* ── La palette (Ctrl K) ── */
.cp-voile{position:fixed;inset:0;z-index:300;background:rgba(11,11,11,.28)}
.cp-palette{position:fixed;left:50%;top:12vh;z-index:301;width:min(600px,calc(100vw - 32px));transform:translateX(-50%);border-radius:var(--r-pop);background:var(--surface);border:1px solid var(--border-strong);box-shadow:0 26px 60px -14px rgba(11,11,11,.38);overflow:hidden}
.cp-pal-champ{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);color:var(--ink-3)}
.cp-pal-champ input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 15px/1.2 var(--font-body);color:var(--ink)}
.cp-pal-liste{max-height:320px;overflow-y:auto;padding:6px}
.cp-pal-r{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;text-align:left;font:500 13px/1.2 var(--font-body);color:var(--ink);cursor:pointer}
.cp-pal-r .ic-svg{color:var(--ink-2);flex:none}
.cp-pal-r .cp-pal-k{margin-left:auto;display:flex;gap:4px;align-items:center}
.cp-pal-r.on{background:var(--surface-2)}
.cp-tag-capot{padding:2px 5px;border-radius:4px;border:1px solid #EFA79C;color:var(--cp-corail-tx);font:700 8.5px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase}
.cp-pal-vide{padding:16px;color:var(--ink-3);font:500 13px/1.4 var(--font-body)}
.cp-pal-pied{display:flex;gap:14px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid var(--border);background:var(--surface-2);font:500 11px/1 var(--font-body);color:var(--ink-3)}
.cp-pal-pied span{display:inline-flex;align-items:center;gap:5px}
.cp-palette kbd,.cp-voile + .cp-palette kbd{display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 5px;border-radius:5px;background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2px;font:700 10px/1 var(--font-body);color:var(--ink-2)}

/* ── Le cockpit de poche (téléphone) ── */
.cp-poche{display:none}
@media (max-width:820px){
  .content.cp-on{overflow:auto;display:block;padding:66px 12px 24px}
  .cp > .cp-glare,.cp > .cp-corps,.cp > .cp-ops{display:none}
  .cp-poche{display:flex;flex-direction:column;gap:12px}
  .cp-poche-glare{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-radius:var(--r-section);background:var(--forest)}
  .cp-poche-glare .cp-maitre{width:auto;height:78px}
  .cp-poche h3{margin:4px 2px 0;font:700 10px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
  .cp-carte-p{display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:var(--r-bloc);background:var(--surface);border:1px solid var(--border);text-align:left;color:inherit;font:inherit}
  .cp-carte-p .cp-nom{font-size:15px}
  .cp-carte-p p{margin:0;font:500 13px/1.45 var(--font-body);color:var(--ink-2)}
  .cp-carte-p .cp-voyants{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-carte-p .btn{width:100%;justify-content:center;height:46px}
  .cp-calme-p{display:flex;align-items:center;gap:10px;padding:13px;border-radius:var(--r-bloc);background:var(--surface);border:1px solid var(--border);font:500 13px/1.3 var(--font-body);color:var(--ink-2)}
  .cp-calme-p b{color:var(--ink)}
  .cp-feuille-voile{position:fixed;inset:0;z-index:250;background:rgba(11,11,11,.4)}
  .cp-feuille{position:fixed;left:0;right:0;bottom:0;z-index:251;display:flex;flex-direction:column;gap:12px;padding:10px 16px calc(22px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:var(--surface)}
  .cp-poignee{align-self:center;width:38px;height:4px;border-radius:2px;background:var(--border-strong)}
  .cp-feuille .cp-pbs{gap:8px}
  .cp-feuille .cp-pb{height:64px;font-size:11px;gap:6px}
  .cp-feuille .cp-cache{font-size:11px;gap:6px}
  .cp-feuille .cp-decompte{font-size:21px}
  .cp-feuille-liens{display:flex;gap:8px}
  .cp-feuille-liens .btn{flex:1;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .cp .clignote,.cp-v.bleu,.cp-pt.bleu,.cp-et.cours i,.cp-pb.arme::before,.cp-pb.tourne::before,.cp-table.arrivee .cp-tr,.cp.ops-replie .cp-lectures,.cp.ops-replie .cp-evts{animation:none}
  .cp-cache,.cp-barre i,.cp-ops,.cp-mini-barre i{transition:none}
}

/* ══════════ LES MODULES : une piste quand ça se ressemble, une case quand ça a sa forme (v3.31) ══════════
   Maquette validée par Kevin le 24 oct. 2026 (https://claude.ai/artifact/DRY43mTU3vg2uGAPa7QwRD, version 2). Tower, la tour de contrôle du
   dashboard, en est le premier consommateur. La table de mixage (piste verticale) ne sert que pour des sujets qui se ressemblent (apps, sites) ;
   chaque autre sujet prend la forme de ce qu'on y lit : cadrans (le serveur), panneau d'alarmes (les services), chaîne et compte à rebours
   (les sauvegardes), bandes de dépôts (GitHub), réservoirs et calendrier (les fournisseurs), pouls (les veilleurs). Tout reste sous le même
   langage : voyants éteints quand tout va bien, ambre = attention, rouge = alarme, gestes armés 3 s, capots.
   `.cp-corps.cp-modulaire` pose la mise en page ; la fiche est un tiroir à droite, ouvert à la demande. */
.cp-corps.cp-modulaire{display:block;position:relative;overflow:hidden}
.cp-modules{container:cpm / size;position:absolute;inset:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(256px,34%)}
.cp-modules.arrivee > *{animation:cp-arrive .42s cubic-bezier(.22,1,.36,1) both}
.cp-modules.arrivee .cp-bas{animation-delay:180ms}
.cp-mixage{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:var(--r-section);background:var(--cp-table);border:1px solid var(--cp-table-bd);overflow:hidden}
.cp-bas{grid-column:1;grid-row:2;display:grid;grid-template-columns:1.35fr 1.2fr 1.2fr 1fr;gap:10px;min-width:0;min-height:0}

/* la table de mixage : seulement pour ce qui se ressemble */
.cp-mix-t{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px 2px;color:var(--ink)}
.cp-mix-t > span:first-child{display:flex;align-items:baseline;gap:8px}
.cp-mix-t .ic-svg{align-self:center}
.cp-mix-t b{font:600 13.5px/1 var(--font-display)}
.cp-mix-t small,.cp-mix-n{font:500 10.5px/1 var(--font-body);color:var(--ink-3)}
.cp-mixage .cp-table{flex:1;min-height:0;background:none;border:0;border-radius:0;padding:7px 8px 8px}
.cp-mixage .cp-tr:not(.cp-parc){flex:1 1 100px;min-width:100px;max-width:170px}
.cp-mixage .cp-tete{min-height:34px}
.cp-mixage .cp-v{font-size:8px;letter-spacing:.04em}
@container cpt (max-height:459px){
  /* à cette hauteur la piste garde ses quatre gestes courants ; les gestes sous capot passent dans la fiche */
  .cp-mixage .cp-pbs > :nth-child(n+5){display:none}
}
@container cpt (max-height:639px){
  .cp-mixage .cp-metres{min-height:74px}
  .cp-mixage .cp-pbs .cp-pb{height:38px;padding-top:8px;font-size:8px}
  .cp-mixage .cp-pbs .cp-cache{font-size:8px}
}

/* le cadre commun d'une case */
.cp-mod{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:10px 11px 9px;border-radius:var(--r-bloc);background:var(--cp-tr);border:1px solid var(--cp-tr-bd);position:relative;overflow:hidden;transition:opacity .2s,box-shadow .2s,border-color .2s}
.cp-mod::before{content:"";position:absolute;left:16px;right:16px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:transparent}
.cp-mod.choisi{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cp-mod.choisi::before{background:var(--accent)}
.cp-mod.terne,.cp-nexus.terne{opacity:.32}
.cp-mod-t{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.cp-mod-nom{display:flex;align-items:center;gap:7px;min-width:0;padding:0;border:0;background:none;color:var(--ink);font:600 13.5px/1 var(--font-display);cursor:pointer;text-align:left}
.cp-mod-nom > span{white-space:nowrap}
.cp-mod-nom .cp-pt{margin-top:0}
.cp-mod-nom small{display:inline-flex;align-items:center;gap:4px;margin-left:3px;font:600 10px/1 var(--font-body);color:var(--ink-3)}
.cp-mod-nom .cp-zone{margin-left:3px}
.cp-mod-nom:hover > span{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.cp-mod-nom:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.cp-mod-d{font:500 10.5px/1 var(--font-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-mod-pbs{flex:none;margin-top:auto;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px}
.cp-mod-pbs .cp-pb{height:38px;padding-top:8px;font-size:8.5px}

/* les cases d'un panneau d'alarmes : éteintes quand tout va bien */
.cp-cases{display:grid;gap:4px}
.cp-c4{flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.cp-c5{flex:none;grid-template-columns:repeat(5,minmax(0,1fr))}
.cp-c5 .cp-case{padding:6px 6px 5px}
.cp-c5 .cp-case span{font-size:clamp(10px,.55cqw,14px)}
.cp-case{display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-width:0;min-height:34px;padding:clamp(6px,.6cqh,12px) 7px clamp(5px,.5cqh,10px);border-radius:7px;border:1px solid var(--cp-led-bd);background:var(--cp-led);color:var(--cp-led-tx);text-align:left;cursor:pointer}
.cp-case:hover{border-color:var(--ink-3)}
.cp-case b{font:700 clamp(8px,.46cqw,11px)/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-case span{font:600 clamp(11px,.6cqw,15px)/1.1 var(--font-display);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cp-case.ambre{background:var(--cp-ambre);border-color:var(--cp-ambre-bd);color:var(--cp-ambre-tx)}
.cp-case.ambre span{color:var(--cp-ambre-tx)}
.cp-case.rouge{background:var(--cp-rouge);border-color:var(--cp-rouge-bd);color:#fff}
.cp-case.rouge span{color:#fff}
.cp-case.info{background:var(--cp-tr);border-color:#9DBCE6;color:var(--cp-bleu-lisible)}
.cp-case.info span{color:var(--cp-bleu-lisible)}

/* le VPS : le groupe moteur */
.cp-cadrans{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cp-cadran{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:6px 2px 6px;border-radius:9px;border:1px solid var(--cp-met-bd);background:var(--cp-met);cursor:pointer}
.cp-cadran:hover{border-color:var(--ink-3)}
.cp-cadran svg{display:block;width:100%;max-width:clamp(96px,8.6cqw,176px);height:auto}
.cp-cad-v{font:600 18px var(--font-display);fill:var(--ink)}
.cp-cad-u{font:600 9px var(--font-body);fill:var(--ink-3)}
.cp-cadran small{font:700 8px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* les sauvegardes : la chaîne de la nuit */
.cp-chaine{--e:clamp(20px,1.1cqw,30px);flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-top:2px}
.cp-etape{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}
.cp-etape::before{content:"";position:absolute;top:calc(var(--e) / 2 - 1px);left:calc(-50% + var(--e) / 2 + 2px);right:calc(50% + var(--e) / 2 + 2px);height:2px;background:var(--cp-seg-on)}
.cp-etape:first-child::before{display:none}
.cp-etape i{position:relative;z-index:1;width:var(--e);height:var(--e);display:grid;place-items:center;border-radius:50%;background:var(--cp-seg-on);color:var(--cp-tr)}
.cp-etape b{font:700 clamp(8px,.44cqw,11px)/1.1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cp-etape small{font:600 clamp(10px,.54cqw,13px)/1 var(--font-display);color:var(--ink-3);font-variant-numeric:tabular-nums}
.cp-delai{flex:none;display:flex;flex-direction:column;gap:6px;padding:7px 9px;border-radius:9px;background:var(--cp-met);border:1px solid var(--cp-met-bd)}
.cp-delai.ambre{background:rgba(233,162,59,.1);border-color:rgba(233,162,59,.5)}
.cp-delai-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--ink)}
.cp-delai-t b{font:600 11px/1 var(--font-body)}
.cp-delai-t span{font:500 10.5px/1 var(--font-body);color:var(--ink-3)}
.cp-delai-t em{font:600 12px/1 var(--font-display);font-style:normal;color:var(--ink)}
.cp-delai.ambre em{color:var(--cp-ambre-lisible)}
.cp-delai-b{position:relative;height:7px;border-radius:4px;background:var(--cp-seg)}
.cp-delai-b i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.cp-delai-b u{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);text-decoration:none}
.cp-kpis{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.cp-kpis span{display:flex;flex-direction:column;gap:4px;min-width:0;padding:5px 7px;border-radius:7px;background:var(--cp-met);border:1px solid var(--cp-met-bd)}
.cp-kpis small{font:700 7.5px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.cp-kpis b{font:600 11px/1 var(--font-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-kpis span.info{background:var(--cp-tr);border-color:#9DBCE6}
.cp-kpis span.info b{color:var(--cp-bleu-lisible)}

/* GitHub : les dépôts en bandes */
.cp-depots{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px}
.cp-depot{flex:1 1 0;min-height:20px;max-height:clamp(27px,2.6cqh,44px);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:9px;padding:0 9px;border-radius:6px;border:1px solid var(--cp-met-bd);background:var(--cp-met);cursor:pointer;text-align:left}
.cp-depot:hover{border-color:var(--ink-3)}
.cp-depot .cp-pt{margin:0;background:var(--cp-seg-on)}
.cp-depot b{font:600 clamp(11px,.6cqw,14px)/1 var(--font-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-ci{display:inline-flex;align-items:center;gap:3px;font:700 8.5px/1 var(--font-body);letter-spacing:.06em;color:var(--ink-3)}
.cp-n{display:inline-flex;align-items:center;gap:4px;min-width:32px;font:600 10.5px/1 var(--font-display);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cp-n.info{color:var(--cp-bleu-lisible)}
.cp-runners{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:var(--cp-met);border:1px solid var(--cp-met-bd)}
.cp-runners-t{margin-right:2px;font:700 8px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cp-runners i{width:10px;height:10px;border-radius:50%;background:var(--cp-seg-on)}
.cp-runners i.absent{background:var(--cp-ambre);box-shadow:0 0 0 2px rgba(233,162,59,.32)}
.cp-runners small{font:600 10.5px/1 var(--font-display);color:var(--ink-2)}
.cp-jeton{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:5px;border:1px solid var(--cp-led-bd);background:var(--cp-led);color:var(--ink-3);font:700 9px/1 var(--font-body);letter-spacing:.04em}
.cp-jeton.ambre{background:var(--cp-ambre);border-color:var(--cp-ambre-bd);color:var(--cp-ambre-tx)}

/* les fournisseurs : des réservoirs, un calendrier */
.cp-fours{flex:none;display:flex;flex-wrap:wrap;gap:4px}
.cp-four{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 7px;border-radius:6px;border:1px solid var(--cp-led-bd);background:var(--cp-led);color:var(--ink-2);font:600 10px/1 var(--font-body);cursor:pointer}
.cp-four:hover{border-color:var(--ink-3)}
.cp-four i{width:6px;height:6px;border-radius:50%;background:var(--cp-seg-on)}
.cp-four.ambre{background:var(--cp-ambre);border-color:var(--cp-ambre-bd);color:var(--cp-ambre-tx)}
.cp-four.ambre i{background:var(--cp-ambre-tx)}
.cp-four.rouge{background:var(--cp-rouge);border-color:var(--cp-rouge-bd);color:#fff}
.cp-four.rouge i{background:#fff}
.cp-reservoirs{flex:none;display:flex;flex-direction:column;gap:5px}
.cp-res{display:grid;grid-template-columns:96px minmax(0,1fr) 84px;align-items:center;gap:8px;font:500 10.5px/1 var(--font-body);color:var(--ink-2)}
.cp-res b{font:600 10.5px/1 var(--font-display);color:var(--ink);text-align:right;white-space:nowrap}
.cp-res.ambre b{color:var(--cp-ambre-lisible)}
.cp-res-b{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;height:10px}
.cp-res-b i{border-radius:1px;background:var(--cp-seg)}
.cp-res-b i.on{background:var(--cp-seg-on)}
.cp-res-b i.ambre{background:var(--cp-ambre)}
.cp-res-b i.rouge{background:var(--cp-rouge)}
.cp-cal{position:relative;flex:1 1 60px;min-height:60px;margin:0 4px}
.cp-cal-axe{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:var(--cp-seg)}
.cp-cal-axe u{position:absolute;top:-3px;width:1px;height:8px;background:var(--cp-seg);text-decoration:none}
.cp-ech-m{position:absolute;top:50%;width:0;height:0}
.cp-ech-m > i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--cp-seg-on);border:2px solid var(--cp-tr)}
.cp-ech-m.ambre > i{background:var(--cp-ambre)}
.cp-ech-m.rouge > i{background:var(--cp-rouge)}
.cp-ech-l{position:absolute;display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.cp-ech-m.haut .cp-ech-l{bottom:9px}
.cp-ech-m.bas .cp-ech-l{top:9px}
.cp-ech-m.g .cp-ech-l{left:-5px;align-items:flex-start}
.cp-ech-m.m .cp-ech-l{left:0;transform:translateX(-50%);align-items:center}
.cp-ech-m.d .cp-ech-l{right:-5px;align-items:flex-end}
.cp-ech-l b{font:600 9.5px/1 var(--font-body);color:var(--ink-2)}
.cp-ech-l small{font:700 9px/1 var(--font-display);color:var(--ink-3)}
.cp-ech-m.ambre .cp-ech-l small{color:var(--cp-ambre-lisible)}
/* une étiquette qui ne tient pas sur la rangée proche passe un cran plus loin, reliée à son point par une tige */
.cp-ech-m.n2.haut .cp-ech-l{bottom:33px}
.cp-ech-m.n2.bas .cp-ech-l{top:33px}
.cp-ech-m.n2::before{content:'';position:absolute;left:0;width:1px;height:26px;background:var(--cp-seg)}
.cp-ech-m.n2.haut::before{bottom:5px}
.cp-ech-m.n2.bas::before{top:5px}
.cp-cal:has(.n2){min-height:116px}

/* les veilleurs : un pouls chacun */
.cp-veilleurs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.cp-veil{flex:1 1 0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:5px 8px;border-radius:8px;background:var(--cp-met);border:1px solid var(--cp-met-bd);text-align:left;cursor:pointer;min-height:0}
.cp-veil:hover{border-color:var(--ink-3)}
.cp-veil-n{display:flex;flex-direction:column;gap:4px;min-width:0}
.cp-veil-n b{font:600 clamp(11px,.6cqw,14px)/1 var(--font-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-veil-n small{font:500 clamp(9px,.5cqw,12px)/1 var(--font-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-veil-a{min-width:58px;font:600 10px/1.15 var(--font-display);color:var(--ink-2);text-align:right}
.cp-pouls{display:flex;align-items:center;gap:2px;height:clamp(16px,1.6cqh,28px)}
.cp-pouls i{width:2.4px;height:calc(var(--h) * 100%);border-radius:1px;background:var(--cp-seg-on);opacity:.5}
.cp-pouls i.tard{background:var(--cp-ambre);opacity:1}
.cp-pouls i.dernier{opacity:1;animation:cp-pouls 1.3s ease-in-out infinite}
.cp-veil.ambre{background:rgba(233,162,59,.12);border-color:rgba(233,162,59,.5)}

/* Nexus : la tuile sombre des clients */
.cp-nexus{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border-radius:12px;background:#1D2026;border:1px solid #1D2026;color:#F3F1EE}
.cp-nexus-ic{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#262A32;color:#F3F1EE}
.cp-nexus-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cp-nexus-t b{font:600 13px/1 var(--font-display)}
.cp-nexus-t small{font:500 10px/1.2 var(--font-body);color:#9A9DA6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-nexus .cp-fb{width:auto;flex:none;height:28px}

/* la fiche : un tiroir à droite, à la demande */
.cp-modulaire .cp-insp{position:absolute;top:0;right:0;bottom:0;width:380px;z-index:6;transform:translateX(calc(100% + 28px));visibility:hidden;box-shadow:-18px 0 44px -12px rgba(11,11,11,.3);transition:transform .28s cubic-bezier(.22,1,.36,1),visibility .28s}
.cp-modulaire .cp-insp.ouvert{transform:none;visibility:visible}
.cp-insp-x{margin-left:auto}
@media (prefers-reduced-motion:reduce){.cp-modulaire .cp-insp{transition:none}.cp-modules.arrivee > *,.cp-pouls i.dernier{animation:none}}

.cp-lourds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cp-lourds .cp-pb{height:42px;flex-direction:row;gap:7px;padding:0 8px;font-size:10px}
.cp-lourds .cp-pb::before{display:none}
.cp-lourds .cp-cache{flex-direction:row;gap:6px;font-size:10px}

.cpm-sauv,.cpm-gh,.cpm-four{justify-content:space-between}
.cpm-sauv .cp-mod-pbs,.cpm-gh .cp-mod-pbs,.cpm-four .cp-mod-pbs{margin-top:0}
.cp-depots{justify-content:space-between}

/* les quatre jauges restent sur une ligne : le VPS vit dans la rangée du bas (v3.40) */

/* ══════════ ÉTATS DES MODULES ET JOURNAL (v3.32) ══════════
   Venus de Tower (lot 1) : ce qu'une case dit quand elle n'a PAS de mesure (pointillé : un oubli se voit) ou quand son étape a échoué,
   le bouton « en veille » de la table de mixage et les lignes d'un journal d'événements (`.cp-ev`, sur la grille de `.cp-op`). */
/* un lien posé comme un bouton du cockpit ne se souligne pas */
a.cp-fb{text-decoration:none}

/* ── états « non mesuré » (pointillé) et « en échec » des cases ── */
.cp-case.na{background:transparent;border-style:dashed}
.cp-case.na span{color:var(--ink-3)}
.cp-cadran.na svg{opacity:.55}
.cp-etape.ko i{background:var(--cp-rouge)}
.cp-etape.ko::before{background:var(--cp-rouge)}
.cp-etape.na i{background:transparent;border:1.5px dashed var(--cp-led-tx);color:var(--cp-led-tx)}
.cp-etape.na::before{background:var(--cp-seg)}
.cp-etape.na b,.cp-etape.na small{opacity:.6}
.cp-delai.na .cp-delai-b{opacity:.5}
.cp-delai.rouge{background:rgba(229,72,77,.10);border-color:rgba(229,72,77,.45)}
.cp-delai.rouge em{color:var(--cp-rouge-lisible)}
.cp-kpis span.na{background:transparent;border-style:dashed}
.cp-kpis span.na b{color:var(--ink-3)}
.cp-kpis span.ambre b{color:var(--cp-ambre-lisible)}
.cp-ci.ko{color:var(--cp-rouge-lisible)}
.cp-ci.na{opacity:.5}
.cp-n.na{opacity:.5}
.cp-runners.na{border-style:dashed;background:transparent}
.cp-runners.na small{color:var(--ink-3);font-weight:500}
.cp-jeton.rouge{background:var(--cp-rouge);border-color:var(--cp-rouge-bd);color:#fff}
.cp-jeton.na{background:transparent;border-style:dashed}
.cp-four.na{background:transparent;border-style:dashed;color:var(--ink-3)}
.cp-four.na i{background:transparent;border:1px solid var(--ink-3)}
.cp-res.na .cp-res-b i{background:transparent;border:1px dashed var(--cp-seg)}
.cp-res.na b{color:var(--ink-3);font-weight:500}
.cp-res.na span{color:var(--ink-3)}
.cp-cal-vide{flex:1 1 60px;display:grid;place-items:center;border-radius:9px;border:1px dashed var(--cp-seg);font:500 11px/1.3 var(--font-body);color:var(--ink-3)}
.cp-pouls.vide{width:20px;height:1px;background:repeating-linear-gradient(to right,var(--cp-seg) 0 3px,transparent 3px 6px);opacity:.9}
.cp-pouls i.ko{background:var(--cp-rouge);opacity:1}
.cp-veil.na{border-style:dashed;background:transparent}
.cp-veil.rouge{background:rgba(229,72,77,.10);border-color:rgba(229,72,77,.45)}

/* ── les unités en veille : un bouton dans l'en-tête de la table ── */
.cp-veille-b{margin-right:8px;padding:3px 9px;border-radius:6px;border:1px solid var(--cp-led-bd);background:var(--cp-led);color:var(--ink-2);font:600 10px/1.4 var(--font-body);cursor:pointer}
.cp-veille-b:hover{border-color:var(--ink-3)}
.cp-veille-b.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* ── le journal : les événements ── */
.cp-ev{grid-template-columns:26px minmax(0,1fr) auto}
.cp-ev.lu .cp-op-t{color:var(--ink-3);font-weight:500}
.cp-ev.lu .cp-op-ic{opacity:.6}
.cp-ev .cp-op-d{color:var(--ink-3)}
.cp-ops-tete .btn-sm{padding:4px 9px;font-size:11.5px;border-radius:8px}
.cp-ops-tete .pill{font-size:10.5px}

/* ══════════ D'OÙ VIENT LA LISTE (v3.33) ══════════
   Tower lit le registre du parc : la table dit d'où vient sa liste (`.cp-puce`, + `.info` = liste de secours, `.ambre` = registre
   illisible ou unités non surveillées) ; le pied d'une piste dit « Non surveillée » en ambre (`.cp-pied .ambre`). */
.cp-pied .ambre{color:var(--cp-ambre-lisible);font-weight:700}
.cp-mix-n{display:flex;align-items:center;gap:6px}
.cp-puce{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;border:1px solid var(--cp-led-bd);background:var(--cp-led);color:var(--ink-2);font:600 10px/1.4 var(--font-body);white-space:nowrap}
.cp-puce.info{background:transparent;border-color:#9DBCE6;color:var(--cp-bleu-lisible)}
.cp-puce.ambre{background:var(--cp-ambre);border-color:var(--cp-ambre-bd);color:var(--cp-ambre-tx)}

/* ══════════ LA COQUE : la barre latérale seule (v3.38) ══════════
   Venue de la console Nexus (maquette « La coque de Nexus », 24 oct. 2026), montée au kit pour Tower. Pose `coque` sur `.app` :
   tout vit dans la barre latérale (le nom, le repli, la navigation, le Portail, le profil) et il n'y a PLUS de barre du haut, donc
   ni fil d'Ariane ni bouton de repli en haut : la page gagne ~56 px de hauteur. Trois états : large (236 px), rail (72 px, `nav-min`,
   déplié au survol par-dessus la page, raccourci [) et tiroir (téléphone, `nav-open`, ouvert par `.nav-fab`).
   Markup : .sidebar > .brand (.brand-marque | .brand-logo, .brand-txt > .brand-name + .brand-sub, .side-plier, .side-ferme),
   .nav > .nav-item, .side-pied > .side-portail + .usermenu (.side-profil, .umenu > .um-head, .um-item). */
.coque .brand-marque{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.coque .brand-marque .ic-svg{width:20px;height:20px}
/* menu profil */
.coque .usermenu{position:relative}
.coque .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;font-size:12.5px;font-weight:700;border:2px solid transparent;display:grid;place-items:center}
.coque .avatar:hover{border-color:var(--accent)}
.coque .umenu{position:absolute;left:0;right:0;top:auto;bottom:calc(100% + 8px);width:auto;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--sh);padding:6px;z-index:200}
.coque .um-head{padding:9px 10px 9px;border-bottom:1px solid var(--border);margin-bottom:4px}
.coque .um-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.coque .um-mail{font-size:11.5px;color:var(--ink-3)}
.coque .um-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border:none;background:none;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none}
.coque .um-item:hover{background:var(--surface-2);color:var(--ink)}
.coque .um-item.danger:hover{color:var(--neg)}
.coque .um-item .ic-svg{width:16px;height:16px}
/* ===== LA BARRE LATÉRALE : tout y vit (le nom, le repli, la recherche, la navigation, le Portail, le profil). Plus de barre du haut. ===== */
.coque .sidebar{width:236px;padding:16px 12px 14px;gap:12px;z-index:60;overflow-x:hidden;overflow-y:auto;transition:width .22s cubic-bezier(.4,0,.2,1),margin .22s cubic-bezier(.4,0,.2,1),box-shadow .22s}
.coque .sidebar .brand{padding:2px 2px 4px 6px;gap:11px;align-items:center;min-height:40px}
.coque .brand-txt{display:flex;flex-direction:column;min-width:0}
.coque .brand-logo{flex:none;display:block;margin-left:-3px}
.coque .lib, .coque .nav-label, .coque .brand-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .14s ease .06s}
.coque .side-plier, .coque .side-ferme{margin-left:auto;flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(255,255,255,.72);cursor:pointer}
.coque .side-plier:hover, .coque .side-ferme:hover{background:rgba(255,255,255,.08);color:#fff}
.coque .side-ferme{display:none}
.coque .side-cherche{display:flex;align-items:center;gap:10px;height:38px;padding:0 9px 0 16px;border-radius:10px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:rgba(255,255,255,.62);font:500 12.5px/1 var(--font-body);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden}
.coque .side-cherche:hover{background:rgba(255,255,255,.09);color:#fff}
.coque .side-cherche .ic-svg{flex:none;opacity:.85}
.coque .side-cherche kbd{margin-left:auto;display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;font:700 10px/1 var(--font-body);color:rgba(255,255,255,.7)}
.coque .sidebar .nav{margin-top:2px}
.coque .sidebar .nav-item{position:relative;padding:10px 12px 10px 15px;overflow:hidden}
.coque .sidebar .nav-item .count{margin-left:auto}

/* Le pied de barre : deux plaques de même famille, le Portail (la porte vers les autres apps) et toi. */
.coque .side-pied{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09)}
.coque .side-portail, .coque .side-profil{display:flex;align-items:center;gap:11px;width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(160deg,#2D313A,#22252C);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#fff;text-align:left;text-decoration:none;cursor:pointer;overflow:hidden;transition:border-color .16s}
.coque .side-portail:hover, .coque .side-profil:hover{border-color:rgba(255,255,255,.24)}
.coque .side-portail{height:54px;padding:0 12px 0 8px}
.coque .sp-ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#16181D;border:1px solid rgba(255,255,255,.10);color:var(--gold);transition:background .16s,color .16s,border-color .16s}
.coque .side-portail:hover .sp-ic{background:var(--gold);border-color:var(--gold);color:#1D2026}
.coque .sp-txt{display:flex;flex-direction:column;min-width:0}
.coque .sp-txt b{font:600 13.5px/1.1 var(--font-display);color:#fff}
.coque .sp-txt small{margin-top:4px;font:500 10.5px/1.1 var(--font-body);color:rgba(255,255,255,.52);overflow:hidden;text-overflow:ellipsis}
.coque .sp-fl{margin-left:auto;flex:none;color:rgba(255,255,255,.5);transition:transform .18s,color .18s}
.coque .side-portail:hover .sp-fl{transform:translateX(3px);color:#fff}
.coque .side-profil{position:relative;padding:8px 10px 8px 8px;font-family:var(--font-body)}
/* le liseré du haut reprend la tranche choisie du cockpit : « c'est toi, ici » */
.coque .side-profil::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#ED5847,#F2C06A)}
.coque .sp-av{position:relative;flex:none;width:48px;height:48px;padding:3px;border-radius:50%;background:conic-gradient(from 200deg,#ED5847,#F2C06A 45%,#ED5847);display:grid;place-items:center}
.coque .sp-av .avatar{width:100%;height:100%;border:2px solid #24272E;font-size:12px}
.coque .sp-av .avatar:hover{border-color:#24272E}
.coque .sp-qui{display:flex;flex-direction:column;min-width:0}
.coque .sp-qui b{font:600 13.5px/1.15 var(--font-display);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coque .sp-qui small{margin-top:5px;font:700 9.5px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.coque .sp-ch{margin-left:auto;flex:none;color:rgba(255,255,255,.5)}
.coque .usermenu{position:relative}
.coque .umenu{z-index:70}

/* Le rail (72 px) : les icônes seules ; il se déplie au survol, par-dessus la page, sans la pousser. Raccourci : [ */
@media (min-width:821px){
  .app.coque.nav-min .sidebar{width:72px;padding:16px 12px 14px}
  .app.coque.nav-min .sidebar:is(:hover,.ouvert,:has(:focus-visible)) :is(.nav-label,.brand-name,.brand-sub){opacity:1}
  .app.coque.nav-min .sidebar:hover, .app.coque.nav-min .sidebar:has(:focus-visible), .app.coque.nav-min .sidebar.ouvert{width:236px;margin-right:-164px;box-shadow:14px 0 44px rgba(0,0,0,.32)}
  .app.coque.nav-min .sidebar:not(:hover):not(.ouvert):not(:has(:focus-visible)) :is(.lib,.nav-label,.brand-txt){opacity:0;pointer-events:none}
  .app.coque.nav-min .sidebar:not(:hover):not(.ouvert):not(:has(:focus-visible)) .nav-item .count{position:absolute;margin:-18px 0 0 18px;min-width:16px;height:16px;font-size:9.5px}
  .app.coque.nav-min .sidebar:not(:hover):not(.ouvert):not(:has(:focus-visible)) .side-profil{padding:2px;border-color:transparent;background:none;box-shadow:none}
  .app.coque.nav-min .sidebar:not(:hover):not(.ouvert):not(:has(:focus-visible)) .side-portail{padding:0 4px}
}
/* juste après un repli : la barre ignore la souris (coqueRail() de ui.js) jusqu'à ce qu'elle en sorte */
.coque .sidebar.sans-survol{pointer-events:none}
/* … et, pour ne pas dépendre du moment où le navigateur recalcule le survol : la barre s'affiche tout de suite comme un rail au repos (l'identifiant l'emporte sur les règles de survol) */
@media (min-width:821px){
  .app.coque.nav-min #sidebar.sans-survol{width:72px;margin-right:0;box-shadow:none}
  .app.coque.nav-min #sidebar.sans-survol :is(.lib,.nav-label,.brand-txt){opacity:0;pointer-events:none}
  .app.coque.nav-min #sidebar.sans-survol .nav-item .count{position:absolute;margin:-18px 0 0 18px;min-width:16px;height:16px;font-size:9.5px}
  .app.coque.nav-min #sidebar.sans-survol .side-profil{padding:2px;border-color:transparent;background:none;box-shadow:none}
  .app.coque.nav-min #sidebar.sans-survol .side-portail{padding:0 4px}
}
@media (prefers-reduced-motion:reduce){.coque .sidebar, .coque .lib, .coque .nav-label, .coque .sp-ic, .coque .sp-fl{transition:none}}

/* Au téléphone : un bouton rond ouvre le tiroir (la même barre, en pleine hauteur) ; la croix le referme. */
.coque .nav-fab{display:none}
@media (max-width:820px){
  .coque .nav-fab{display:grid;place-items:center;position:fixed;top:max(10px,env(safe-area-inset-top,0px));left:12px;z-index:140;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.16);cursor:pointer}
  .app.coque.nav-open .nav-fab{visibility:hidden}
  .coque .sidebar{width:min(300px,86vw);z-index:200}
  /* le rail est une affaire de grand écran : un rail gardé d'une séance au bureau ne doit pas rétrécir le tiroir (theme.css pose .app.nav-min .sidebar à tout âge) */
  .app.coque.nav-min .sidebar{width:min(300px,86vw);padding:16px 12px 14px}
  .app.coque.nav-min :is(.nav-label,.brand-name,.brand-sub){opacity:1}
  .coque .side-cherche kbd{display:none}
  .coque .side-plier{display:none}
  .coque .side-ferme{display:grid}
  .coque .content{padding-top:66px}
}

/* ===== LES GESTES EN GRAND (v3.39) =====
   30 oct. 2026 : Tower ne garde que les boutons qui AGISSENT (Déployer, Redémarrer, Fusionner, Sauvegarder…) ; ceux qui ne faisaient qu'ouvrir une fiche sont partis.
   Il en reste peu, donc ils grandissent, toujours en boutons-poussoirs de cockpit (diode, capot hachuré, armement 3 s).
   Et un bouton général, « Tester », le plus utilisé : coral plein, à plat, le seul du bandeau (Tower et Nexus). */

/* Le bouton général « Tester » : il relit tout maintenant et ne dit rien quand tout va bien (la coche reste deux secondes). */
.cp-testg{display:flex;align-items:center;gap:12px;width:200px;flex:none;height:68px;padding:0 16px 0 14px;border-radius:12px;border:1px solid var(--accent-strong);background:var(--accent-strong);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.cp-testg:hover{background:#CB4A3B;border-color:#CB4A3B}
.cp-testg:active{transform:translateY(1px)}
.cp-testg:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cp-testg .ic-svg{flex:none;width:26px;height:26px}
.cp-testg-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.cp-testg b{font:600 17px/1 var(--font-display)}
.cp-testg small{font:500 10.5px/1.1 var(--font-body);opacity:.92;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-testg.tourne{cursor:progress;background:#9C3A2E;border-color:#9C3A2E}
.cp-testg.ok{background:#2E7D55;border-color:#2E7D55}
.cp-testg.rouge{background:var(--cp-rouge);border-color:var(--cp-rouge)}
@keyframes cp-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.cp-testg.tourne .ic-svg{animation:cp-tourne 1s linear infinite}}
@container cp (max-width:1560px){
  .cp-testg{width:156px;gap:9px;padding:0 10px 0 11px}
  .cp-testg b{font-size:16px}
}

/* Une piste : deux boutons CARRÉS côte à côte (Déployer, Redémarrer sous capot), comme avant, pour ne pas manger la hauteur de la bande. « Relancer la CI »,
   seulement si la CI a échoué, passe en tête sur toute la largeur, cerclé d'ambre. */
.cp-mixage .cp-pbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.cp-mixage .cp-pbs > .cp-pb,.cp-mixage .cp-pbs > .cp-capot{height:auto;aspect-ratio:1 / 1;max-height:64px}
.cp-mixage .cp-pbs > .cp-capot .cp-pb{height:100%}
.cp-mixage .cp-pbs .cp-pb{font-size:7.5px;gap:4px;padding:8px 0 4px;letter-spacing:-.04em}
.cp-mixage .cp-pbs .cp-pb .ic-svg,.cp-mixage .cp-pbs .cp-cache .ic-svg{width:18px;height:18px}
.cp-mixage .cp-pbs .cp-cache{font-size:7.5px;gap:4px;letter-spacing:-.04em}
.cp-mixage .cp-pbs .cp-lab{text-overflow:clip}
.cp-mixage .cp-pbs > .cp-pb[data-act="ci"]{grid-column:1 / -1;aspect-ratio:auto;height:34px;flex-direction:row;padding:0 8px;gap:6px;font-size:10px;letter-spacing:0;border-color:var(--cp-ambre)}
.cp-mixage .cp-pbs > .cp-pb[data-act="ci"]::before{display:none}
@container cpt (max-height:330px){
  /* un écran bas : la piste se tasse un peu (titre, relevés, espaces) pour que les boutons restent entiers */
  .cp-mixage .cp-tr{gap:5px}
  .cp-mixage .cp-tete{min-height:40px}
  .cp-mixage .cp-metres{min-height:56px}
  .cp-mixage .cp-v{height:18px}
  .cp-mixage .cp-pied{min-height:16px}
}

/* Le pied d'un module : peu de boutons (un à trois), larges et hauts. Services et Fournisseurs n'en ont plus. */
.cp-modules .cp-mod-pbs{gap:8px}
.cp-modules .cp-mod-pbs .cp-pb{height:52px;padding-top:9px;font-size:11px;gap:6px;letter-spacing:0}
.cp-modules .cp-mod-pbs .cp-pb::before{width:20px;margin-left:-10px}
.cp-modules .cp-mod-pbs .cp-pb .ic-svg,.cp-modules .cp-mod-pbs .cp-cache .ic-svg{width:20px;height:20px}
.cp-modules .cp-mod-pbs .cp-cache{font-size:10.5px;gap:6px}
@container cpm (max-height:700px){
  .cp-modules .cp-mod-pbs{gap:6px}
  .cp-modules .cp-mod-pbs .cp-pb,.cp-modules .cp-mod-pbs .cp-cache{flex-direction:row;padding:0 10px;gap:8px;font-size:10.5px}
  .cp-modules .cp-mod-pbs .cp-pb{height:40px}
  .cp-modules .cp-mod-pbs .cp-pb::before{display:none}
  .cp-modules .cp-mod-pbs .cp-pb .ic-svg,.cp-modules .cp-mod-pbs .cp-cache .ic-svg{width:17px;height:17px}
  .cp-modules .cp-depots{gap:2px}
  .cp-modules .cp-depot{min-height:16px}
}
/* une page basse (moins de 960 px) : la rangée du bas se serre pour laisser la hauteur aux pistes */
@media (max-height:960px){.cp-modules{grid-template-rows:minmax(0,1fr) minmax(236px,34%)}}


/* « Restaurer une base… » : au bandeau de l'onglet « Versions » de la fiche, à droite du titre. */
.cp-bloc-t:has(.btn){display:flex;align-items:center;gap:8px}
.cp-bloc-t .btn{margin-left:auto}

/* ===== LE COCKPIT EN UNE COLONNE (v3.40) =====
   31 oct. 2026, maquette « Tower repensé » (direction A). Les pistes prennent toute la largeur, en une seule rangée fine et aérée en hauteur ;
   dessous, quatre instruments (VPS avec « Services » en case, Sauvegardes, GitHub, Échéances) ; le journal se replie en une ligne.
   Les Échéances sont des lignes à barres : plus un calendrier dont les étiquettes se heurtaient. Une barre courte = une date proche. */
.cp-er-l{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:3px}
.cp-er{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 44px;align-items:center;gap:8px;padding:0;border:0;background:none;font:600 11px/1.2 var(--font-body);color:var(--ink-2);cursor:pointer;text-align:left}
.cp-er:hover .cp-er-n{color:var(--ink)}
.cp-er-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-er-b{height:7px;border-radius:4px;background:var(--cp-seg);overflow:hidden}
.cp-er-b i{display:block;height:100%;border-radius:4px;background:var(--cp-seg-on)}
.cp-er-b i.ambre{background:var(--cp-ambre)}
.cp-er-b i.rouge{background:var(--cp-rouge)}
.cp-er b{font:600 12px/1 var(--font-display);text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.cp-er b.ambre{color:var(--cp-ambre-lisible)}
.cp-er b.rouge{color:var(--cp-rouge-lisible)}

/* ===== LES PAGES DU COCKPIT (v3.41) =====
   31 oct. 2026, maquette « Tower repensé » (direction A) : chaque instrument a sa page — des métriques, des instruments, aucun paragraphe, aucun vide.
   Une page : un en-tête (retour au cockpit, titre, pastilles, « Tester »), une rangée de métriques `.cp-mk`, puis des cartes `.cp-carte` qui défilent chacune
   dans leur coin ; rien ne recouvre plus rien (le tiroir s'efface). */
.cp-pg{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.cp-pg-t{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:34px}
.cp-pg-g{display:flex;align-items:center;gap:12px;min-width:0}
.cp-pg-g h2{margin:0;font:600 20px/1 var(--font-display);color:var(--ink);white-space:nowrap}
.cp-pg-g small{font:500 12px/1 var(--font-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-pg-g .cp-pt{margin-top:0}
.cp-pg-d{display:flex;align-items:center;gap:8px;flex:none}
.cp-pg-sep{flex:none;width:1px;height:22px;background:var(--border)}
.cp-pg-k{flex:none;display:grid;gap:10px}
.cp-mk{display:flex;flex-direction:column;gap:5px;min-width:0;padding:11px 14px 12px;border-radius:var(--r-bloc);background:var(--cp-tr);border:1px solid var(--cp-tr-bd)}
.cp-mk small{font:700 9.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cp-mk b{font:600 28px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-mk span{font:500 11px/1.25 var(--font-body);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-mk.ambre{border-color:var(--cp-ambre-bd)}
.cp-mk.ambre b{color:var(--cp-ambre-lisible)}
.cp-mk.rouge{border-color:var(--cp-rouge-bd)}
.cp-mk.rouge b{color:var(--cp-rouge-lisible)}
.cp-pg-c{flex:1;min-height:0;display:grid;gap:12px;align-items:start}
.cp-carte{display:flex;flex-direction:column;min-width:0;min-height:0;max-height:100%;background:var(--cp-tr);border:1px solid var(--cp-tr-bd);border-radius:var(--r-bloc);overflow:hidden}
.cp-carte-t{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px 9px;border-bottom:1px solid var(--border)}
.cp-carte-t b{font:600 13.5px/1 var(--font-display);color:var(--ink);white-space:nowrap}
.cp-carte-t span{display:flex;align-items:center;gap:8px;min-width:0;font:500 10.5px/1.2 var(--font-body);color:var(--ink-3);text-align:right}
.cp-carte-c{flex:1;min-height:0;padding:10px 14px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.cp-c-liste .cp-carte-c{padding:4px 12px 8px;gap:0}
.cp-carte-c .cp-bloc{margin:0}
/* les gestes d'une page : peu, larges et hauts */
.cp-gros{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;margin-top:6px}
.cp-gros .cp-pb{height:58px;flex-direction:row;gap:9px;font-size:11px;padding:0 10px;letter-spacing:0}
.cp-gros .cp-pb::before{display:none}
.cp-gros .cp-pb .ic-svg{width:20px;height:20px}
.cp-gros .cp-cache{flex-direction:row;gap:8px;font-size:11px}
/* Serveur */
.cp-cadrans-g{flex:none;height:170px}
.cp-c-jauges .cp-graphe{height:120px}
.cp-svc-g{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:62px;align-content:start}
.cp-svc-g .cp-case{height:62px;min-height:62px}
/* GitHub */
.cp-depots-g{flex:none;justify-content:flex-start;gap:4px}
.cp-depots-g .cp-depot{flex:none;height:34px;min-height:34px;max-height:34px}
/* Échéances */
.cp-er-lg{justify-content:flex-start;gap:10px}
.cp-er-g{grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) 52px;font-size:12px;cursor:default}
.cp-er-g .cp-er-b{height:9px}
.cp-fours-g{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
/* Journal */
.cp-carte .cp-veilleurs{flex:none;display:flex;flex-direction:column;gap:6px}
.cp-carte .cp-veil{flex:none;height:56px}
.cp-log-g{flex:none;min-height:140px;max-height:240px;overflow:auto;border:0}
@media (max-width:820px){.cp > .cp-pg{display:none}}

/* ===== LA PAGE D'UNE APP (v3.42) =====
   31 oct. 2026, maquette « Tower repensé » (lot 3, « une page entière, plus de tiroir »). Un clic sur une piste ouvre sa page : les voyants dits en clair
   (`.cp-v8`), six métriques (`.cp-mk`), puis trois cartes de la hauteur de leur contenu (`.cp-pg-c-app`) — des jauges et des lignes à barre (`.cp-rel`),
   les gestes en grand, les faits. Le tiroir `.cp-insp` reste pour Nexus. */
.cp-v8{flex:none;display:grid;gap:10px}
.cp-v8 > div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:11px 13px 12px;border-radius:var(--r-bloc);background:var(--cp-tr);border:1px solid var(--cp-tr-bd)}
.cp-v8 .cp-v{height:22px;min-width:58px;padding:0 10px;font-size:9px}
.cp-v8 small{font:500 11px/1.3 var(--font-body);color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-pg-c-app{align-content:start}
.cp-pg-c-app > .cp-carte{align-self:start;max-height:100%}
.cp-c-rel .cp-cadrans-g{flex:none;height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:136px;gap:8px}
.cp-c-rel .cp-bloc{margin-top:8px}
.cp-c-rel .cp-graphe{height:56px}
.cp-rel-l{display:flex;flex-direction:column;gap:16px;padding-top:6px}
.cp-rel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 64px;align-items:center;gap:12px;font:600 12px/1.2 var(--font-body);color:var(--ink-2)}
.cp-rel-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-rel .cp-er-b{height:9px}
.cp-rel b{font:600 14px/1 var(--font-display);text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.cp-rel b.ambre{color:var(--cp-ambre-lisible)}
.cp-rel b.rouge{color:var(--cp-rouge-lisible)}
.cp-c-gestes .cp-gros{margin-top:0;padding-top:0}
.cp-cadran.long .cp-cad-v{font-size:14px}

/* ===== LE BOUTON « TESTER » D'UN EN-TÊTE DE PAGE (v3.43) =====
   La flèche en cercle (`reset`) tourne pendant que Tower relit toute l'infra, comme celle du bouton général du bandeau. */
@media (prefers-reduced-motion:no-preference){.cp-pg-d .btn.tourne .ic-svg{animation:cp-tourne 1s linear infinite}}