/* Aiguillage : composants propres (santé, pipelines, journal, versions, branches, machines), posés sur les
   jetons et le verre de style.css (repris de Courrier). Même règle que Courrier : le verre pour ce qu'on
   commande (barres, menus, notifications), des cartes plus opaques pour ce qu'on lit. */

:root {
  --ok: var(--vert);
  --degrade: #b45309;
  --degrade-doux: rgb(217 119 6 / .12);
  --vert-doux: rgb(21 128 61 / .1);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --journal-fond: #10141f;
  --journal-texte: #d6dbe6;
  --journal-discret: #7c8599;
  --journal-erreur: #fca5a5;
  --journal-agent: #a5b4fc;
}
@media (prefers-color-scheme: dark) {
  :root { --degrade: #fbbf24; --degrade-doux: rgb(251 191 36 / .14); --vert-doux: rgb(74 222 128 / .12); --journal-fond: #0a0d15; }
}

/* --- Thème choisi dans Compte (sinon celui du système) : mêmes jetons que style.css ---------------- */
:root[data-theme="sombre"] {
  --fond: #0b0f19; --fond-a: #1b2a55; --fond-b: #3a2140; --fond-c: #0f3a3d;
  --verre: rgb(20 25 38 / .62); --verre-fort: rgb(26 32 48 / .78); --verre-bord: rgb(255 255 255 / .08);
  --verre-flottant: rgb(30 36 54 / .86); --carte: rgb(36 43 62 / .62); --carte-forte: rgb(40 47 68 / .92);
  --surface: #1a1f2d; --surface-2: rgb(44 51 72 / .7); --survol: rgb(255 255 255 / .06);
  --selection: rgb(92 124 255 / .22); --bordure: rgb(255 255 255 / .09);
  --texte: #e8ebf2; --texte-2: #a7afc0; --texte-3: #7c8599; --accent: #7d9bff; --accent-doux: rgb(125 155 255 / .16);
  --rouge: #f87171; --rouge-doux: rgb(248 113 113 / .14); --gris: #6b7280;
  --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 6px 22px rgb(0 0 0 / .25);
  --ombre-panneau: 0 24px 60px -20px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .06);
  --ombre-flottant: 0 18px 50px -12px rgb(0 0 0 / .7);
  --vert: #4ade80; --sur-accent: #0b0f19; --fond-haut: #1f2643;
  --degrade: #fbbf24; --degrade-doux: rgb(251 191 36 / .14); --vert-doux: rgb(74 222 128 / .12); --journal-fond: #0a0d15;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="clair"] {
    --fond: #e9edf4; --fond-a: #c9d6f2; --fond-b: #f3dcd2; --fond-c: #d5ecea;
    --verre: rgb(248 250 253 / .58); --verre-fort: rgb(252 253 255 / .74); --verre-bord: rgb(255 255 255 / .78);
    --verre-flottant: rgb(252 253 255 / .82); --carte: rgb(255 255 255 / .72); --carte-forte: rgb(255 255 255 / .9);
    --surface: #ffffff; --surface-2: rgb(240 243 248 / .9); --survol: rgb(255 255 255 / .62);
    --selection: rgb(226 233 255 / .95); --bordure: rgb(28 38 64 / .1);
    --texte: #141824; --texte-2: #4a5263; --texte-3: #727a8c; --accent: #2d5bea; --accent-doux: rgb(45 91 234 / .11);
    --rouge: #d12a2a; --rouge-doux: rgb(220 38 38 / .1); --gris: #9ca3af;
    --ombre: 0 1px 2px rgb(20 30 60 / .05), 0 6px 22px rgb(20 30 60 / .07);
    --ombre-panneau: 0 24px 60px -20px rgb(30 45 90 / .28), inset 0 1px 0 rgb(255 255 255 / .7);
    --ombre-flottant: 0 18px 50px -12px rgb(20 30 60 / .35);
    --vert: #15803d; --sur-accent: #ffffff; --fond-haut: #dae0f0;
    --degrade: #b45309; --degrade-doux: rgb(217 119 6 / .12); --vert-doux: rgb(21 128 61 / .1); --journal-fond: #10141f;
    color-scheme: light;
  }
}
/* Transparence réduite choisie dans Compte : surfaces pleines, comme la préférence du système. */
:root[data-transparence="reduite"] { --verre: var(--surface); --verre-fort: var(--surface); --verre-flottant: var(--surface); --carte: var(--surface); }
:root[data-transparence="reduite"] .panneau, :root[data-transparence="reduite"] .toast,
:root[data-transparence="reduite"] .onglets { -webkit-backdrop-filter: none; backdrop-filter: none; }

.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.vue { overflow-y: auto; scrollbar-width: thin; }
.page { max-width: 1240px; margin: 0 auto; padding: 0 12px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.coupe { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seulement-mobile { }

/* --- Pastilles de santé et d'état ----------------------------------------------------------------- */

.sante { --c: var(--gris); }
.sante.ok, .etat-reussi { --c: var(--ok); }
.sante.degrade, .etat-en_attente { --c: var(--degrade); }
.sante.panne, .etat-echoue { --c: var(--rouge); }
.sante.arrete, .sante.inconnu, .etat-annule, .etat-saute, .etat-non_faite { --c: var(--gris); }
.etat-en_cours { --c: var(--accent); }
.pastille.vive { animation: battement 1.6s ease-in-out infinite; }
@keyframes battement { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 8%, transparent); } }

.puce {
  justify-self: start; align-self: center;
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; flex: none;
  font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--c, var(--texte-2));
  background: color-mix(in srgb, var(--c, var(--texte-3)) 12%, transparent);
}
.puce .ic { width: 13px; height: 13px; }
.puce.neutre { --c: var(--texte-2); background: var(--surface-2); }
.puce.accent { --c: var(--accent); }
.puce.retard { --c: var(--degrade); }
.puce.auto { --c: var(--accent); }
.puce.recommande { --c: var(--texte-3); background: none; border: 1px dashed var(--bordure); font-weight: 550; }
a.puce { text-decoration: none; }
a.puce:hover { background: color-mix(in srgb, var(--c) 20%, transparent); }
.tourne { animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* --- Navigation : applis rangées par hôte -------------------------------------------------------- */

.nav-applis { margin-top: 4px; }
.nav-applis .entree { text-decoration: none; height: 34px; }
.nav-applis .pastille { width: 8px; height: 8px; margin: 0 4px 0 2px; }
.nav-applis .entree .puce { height: 18px; padding: 0 6px; font-size: 11px; }
.indicateur-direct {
  width: 8px; height: 8px; margin: 0 8px; border-radius: 50%; background: var(--gris);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gris) 20%, transparent);
}
.indicateur-direct.connecte { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }

/* --- Vue d'ensemble --------------------------------------------------------------------------- */

.ac-tuile { cursor: pointer; font: inherit; }
.ac-tuile.ok .ac-tuile-icone { background: var(--vert-doux); color: var(--ok); }
.ac-tuile.retard .ac-tuile-icone { background: var(--degrade-doux); color: var(--degrade); }
.groupe-hote { display: grid; gap: 8px; }
.groupe-hote > h2 {
  display: flex; align-items: center; gap: 8px; margin: 6px 4px 0; font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2);
}
.groupe-hote > h2 .ic { width: 15px; height: 15px; color: var(--accent); }
.groupe-hote > h2 .discret { text-transform: none; letter-spacing: 0; font-weight: 500; }
.liste-applis { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ligne-appli {
  display: grid; grid-template-columns: 22px minmax(150px, 1.1fr) minmax(0, 1.6fr) minmax(170px, 1fr) auto;
  align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-carte); background: var(--carte); cursor: pointer;
  transition: background-color .12s, box-shadow .12s;
}
.ligne-appli:hover { background: var(--carte-forte); box-shadow: var(--ombre); }
.ligne-appli .pastille { margin: 0 auto; }
.appli-nom { display: grid; min-width: 0; line-height: 1.3; }
.appli-nom strong { font-size: 14.5px; font-weight: 650; }
.appli-nom span { font-size: 12px; color: var(--texte-3); }
.appli-nom .ligne-puces { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.appli-version, .bloc-commit { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.appli-version { gap: 4px; }
.appli-version .haut { display: flex; align-items: center; gap: 8px; min-width: 0; }
.appli-version .message { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte); font-weight: 520; }
.appli-version .bas { display: flex; gap: 6px; font-size: 12px; color: var(--texte-3); }
.sha { font-family: var(--mono); font-size: 12px; color: var(--texte-2); flex: none; }
.appli-pipeline { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--texte-3); }
.appli-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }

/* Étapes en miniature : un segment par étape */
.mini-etapes { display: flex; gap: 3px; }
.mini-etapes span { flex: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--c, var(--gris)) 75%, transparent); }
.mini-etapes span.etat-en_attente, .mini-etapes span.etat-non_faite { --c: var(--texte-3); opacity: .35; }
.mini-etapes span.etat-en_cours { animation: battement-barre 1.2s ease-in-out infinite; }
@keyframes battement-barre { 50% { opacity: .45; } }

/* --- Page d'une appli ------------------------------------------------------------------------------ */

.carte-appli-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; }
.carte-appli-tete h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; letter-spacing: -.015em; }
.carte-appli-tete .description { margin: 2px 0 10px; color: var(--texte-2); }
.faits { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 13px; }
.faits div { display: flex; gap: 6px; align-items: center; min-width: 0; }
.faits dt { color: var(--texte-3); }
.faits dd { margin: 0; color: var(--texte); font-weight: 520; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faits a { color: var(--accent); text-decoration: none; }
.faits a:hover { text-decoration: underline; }
.courbe-latence { display: grid; gap: 2px; justify-items: end; font-size: 12px; color: var(--texte-3); }
.courbe-latence svg { display: block; width: 220px; height: 46px; overflow: visible; }
.courbe-latence .trace { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.courbe-latence .aire { fill: var(--accent-doux); stroke: none; }
.courbe-latence .panne { fill: var(--rouge); }
.courbe-latence strong { color: var(--texte); font-size: 13px; }
.barre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordure); }
.barre-actions .espace { flex: 1; }

/* Interrupteur (déploiement automatique) */
.interrupteur { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--texte-2); font-weight: 550; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur .glissiere {
  position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: color-mix(in srgb, var(--texte-3) 40%, transparent);
  transition: background-color .15s;
}
.interrupteur .glissiere::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .15s;
}
.interrupteur input:checked + .glissiere { background: var(--accent); }
.interrupteur input:checked + .glissiere::after { transform: translateX(16px); }
.interrupteur input:focus-visible + .glissiere { outline: 2px solid var(--accent); outline-offset: 2px; }
.etat-auto { font-size: 12px; color: var(--texte-3); }

.segments.onglets-appli { justify-self: start; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.segments.onglets-appli button { display: inline-flex; align-items: center; gap: 6px; }
.segments.onglets-appli .ic { width: 14px; height: 14px; }

/* --- Pipeline : étapes et journal en direct --------------------------------------------------------- */

.pipeline-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.pipeline-tete h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pipeline-tete .discret { font-size: 13px; }
.pipeline-tete .actions { margin-left: auto; }
.etapes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; list-style: none; margin: 0 0 6px; padding: 0; }
.etape { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 4px; text-align: center; cursor: pointer; }
.etape::before {
  content: ""; position: absolute; top: 17px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px;
  background: color-mix(in srgb, var(--c, var(--gris)) 55%, var(--bordure));
}
.etape:first-child::before { display: none; }
.etape.etat-en_attente::before, .etape.etat-non_faite::before { background: var(--bordure); }
.etape .rond {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--c, var(--texte-3)); background: color-mix(in srgb, var(--c, var(--gris)) 14%, var(--surface));
  border: 2px solid color-mix(in srgb, var(--c, var(--gris)) 60%, transparent);
}
.etape.etat-en_attente .rond, .etape.etat-non_faite .rond { --c: var(--texte-3); border-style: dashed; background: var(--surface); }
.etape.etat-en_cours .rond { box-shadow: 0 0 0 5px var(--accent-doux); }
.etape .rond .ic { width: 17px; height: 17px; }
.etape strong { font-size: 13px; font-weight: 620; }
.etape strong .court { display: none; }
.etape span { font-size: 11.5px; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.etape.choisie strong { color: var(--accent); }
.etape.choisie .rond { outline: 2px solid var(--accent); outline-offset: 2px; }
.progression { height: 3px; margin: 10px 0 2px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.progression span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .6s ease; }
.message-travail { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--surface-2); color: var(--texte-2); }
.message-travail.echoue { background: var(--rouge-doux); color: var(--rouge); }

.journal {
  position: relative; margin-top: 12px; border-radius: 14px; overflow: hidden; background: var(--journal-fond);
  border: 1px solid rgb(255 255 255 / .06); color-scheme: dark;
}
.journal-barre {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-bottom: 1px solid rgb(255 255 255 / .07);
  font-size: 12px; color: var(--journal-discret);
}
.journal-barre .filtre {
  height: 24px; padding: 0 9px; border: 0; border-radius: 7px; background: none; color: var(--journal-discret); font-size: 12px; font-weight: 600;
}
.journal-barre .filtre:hover { color: var(--journal-texte); background: rgb(255 255 255 / .06); }
.journal-barre .filtre.actif { color: #fff; background: rgb(255 255 255 / .12); }
.journal-barre .espace { flex: 1; }
.journal-barre .bouton-icone { width: 28px; height: 28px; color: var(--journal-discret); }
.journal-barre .bouton-icone:hover { background: rgb(255 255 255 / .08); color: #fff; }
.journal-lignes {
  height: min(52vh, 460px); overflow: auto; padding: 8px 0 12px; margin: 0;
  font: 12.5px/1.55 var(--mono); color: var(--journal-texte); counter-reset: ligne; scrollbar-color: #3a4255 transparent;
}
.journal.grand .journal-lignes { height: 70vh; }
.journal-lignes > div { display: grid; grid-template-columns: 52px 64px minmax(0, 1fr); padding: 0 14px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.journal-lignes > div:hover { background: rgb(255 255 255 / .035); }
.journal-lignes .n { color: #4b5367; text-align: right; padding-right: 12px; user-select: none; }
.journal-lignes .h { color: #5d667b; user-select: none; }
.journal-lignes .stderr .x { color: var(--journal-erreur); }
.journal-lignes .agent .x { color: var(--journal-agent); }
.journal-lignes .titre-etape { display: block; padding: 8px 14px 2px 64px; color: #fff; font-weight: 700; font-family: var(--police); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.journal-vide { padding: 40px 16px; text-align: center; color: var(--journal-discret); font: 13px var(--police); }
.journal .suivre {
  position: absolute; right: 14px; bottom: 12px; height: 30px; padding: 0 12px; border: 0; border-radius: 15px;
  background: var(--accent); color: var(--sur-accent); font-size: 12px; font-weight: 650; box-shadow: var(--ombre-flottant);
}

/* --- Listes : versions, branches, historique, pipelines ---------------------------------------- */

.liste-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ligne-version, .ligne-travail, .ligne-branche {
  display: grid; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--verre-bord);
  border-radius: 14px; background: var(--carte);
}
.ligne-version { grid-template-columns: 20px minmax(0, 1fr) auto; }
.ligne-version.hors-appli { opacity: .55; }
.ligne-version.en-service { border-color: color-mix(in srgb, var(--ok) 45%, var(--verre-bord)); background: color-mix(in srgb, var(--vert-doux) 70%, var(--carte)); }
.ligne-version > .ic { color: var(--texte-3); }
.ligne-version.en-service > .ic { color: var(--ok); }
.version-texte { display: grid; gap: 2px; min-width: 0; }
.version-texte .haut { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.version-texte .message { font-weight: 560; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 200px; }
.version-texte .bas { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--texte-3); }
.version-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ligne-travail { grid-template-columns: 18px 64px minmax(120px, 1fr) minmax(140px, 1.3fr) 140px 110px; cursor: pointer; }
.ligne-travail:hover { background: var(--carte-forte); box-shadow: var(--ombre); }
.ligne-travail .num { font-family: var(--mono); font-size: 12px; color: var(--texte-3); }
.ligne-travail .quoi { display: grid; min-width: 0; line-height: 1.3; }
.ligne-travail .quoi strong { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-travail .quoi span { font-size: 12px; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-travail .quand { font-size: 12px; color: var(--texte-3); text-align: right; font-variant-numeric: tabular-nums; }
.ligne-travail .pastille { margin: 0; }
.ligne-branche { grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr) 72px 150px; }
.ligne-branche .version-actions { justify-content: flex-end; }
.ligne-branche .nom { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 620; }
.ligne-branche .nom .ic { color: var(--texte-3); }
.ligne-branche.prod .nom .ic { color: var(--accent); }
.ecart { display: flex; gap: 8px; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texte-3); }
.ecart b { color: var(--texte-2); font-weight: 650; }
.filtres-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.selecteur {
  height: 34px; max-width: 220px; padding: 0 8px; border: 1px solid var(--bordure); border-radius: 10px;
  background: var(--carte-forte); font-size: 13px; color: var(--texte);
}
.plus { justify-self: center; }
.sous-titre-carte { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.sous-titre-carte { flex-wrap: wrap; min-width: 0; }
.sous-titre-carte h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sous-titre-carte > .discret { min-width: 0; flex: 1 1 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.sous-titre-carte h2 .ic { width: 17px; height: 17px; color: var(--accent); }
.sous-titre-carte .actions { margin-left: auto; }
.carte > .discret:first-child { margin-top: 0; }

/* Conteneurs */
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { text-align: left; font-weight: 600; font-size: 12px; color: var(--texte-3); padding: 6px 10px; border-bottom: 1px solid var(--bordure); }
.tableau td { padding: 9px 10px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .mono { color: var(--texte-2); }
.defile-x { overflow-x: auto; }

/* --- Machines ------------------------------------------------------------------------------- */

.grille-machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.carte-machine h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 17px; }
.carte-machine h2 .ic { width: 20px; height: 20px; color: var(--accent); }
.jauge-disque { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.jauge-disque span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.jauge-disque.plein span { background: var(--rouge); }
.mesures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0; }
.mesure { display: grid; gap: 1px; }
.mesure span { font-size: 12px; color: var(--texte-3); }
.mesure strong { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.liste-courte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* --- GitLab ------------------------------------------------------------------------------------ */

.etapes-gitlab { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.etape-gitlab { display: grid; gap: 6px; align-content: start; min-width: 170px; }
.etape-gitlab h4 { margin: 0; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-3); }
.job {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--bordure);
  border-radius: 10px; background: var(--carte-forte); color: var(--texte); font-size: 13px; text-align: left;
}
.job:hover { border-color: var(--accent); }
.job.choisi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.job .duree { margin-left: auto; font-size: 11.5px; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.icone-etat { display: inline-grid; color: var(--c); flex: none; }
.icone-etat .ic { width: 16px; height: 16px; }

/* --- Compte ------------------------------------------------------------------------------------- */

.grille-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.formulaire-compte .champ input { width: 100%; }
.ligne-session { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--bordure); }
.ligne-session:first-child { border-top: 0; }
.ligne-session .texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ligne-session .texte span { font-size: 12px; color: var(--texte-3); }
.ligne-evenement { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 7px 2px; border-top: 1px solid var(--bordure); font-size: 13px; }
.ligne-evenement:first-child { border-top: 0; }
.ligne-evenement time { color: var(--texte-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ligne-evenement .details { color: var(--texte-3); font-size: 12px; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bordure); }
.reglage:first-of-type, .sous-titre-carte + .reglage { border-top: 0; }
.reglage p { margin: 0; font-size: 12px; color: var(--texte-3); }
.jauge { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin: -4px 0 14px; }
.jauge span { display: block; height: 100%; width: 0; background: var(--rouge); transition: width .2s, background-color .2s; }
.jauge.moyen span { background: var(--degrade); }
.jauge.bon span { background: var(--ok); }

.avertissement {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; font-size: 13px;
  background: var(--degrade-doux); color: var(--texte);
}
.avertissement > .ic { color: var(--degrade); margin-top: 2px; }

/* --- Écrans moyens et téléphone ------------------------------------------------------------------ */

@media (max-width: 1180px) {
  .ligne-appli { grid-template-columns: 22px minmax(140px, 1fr) minmax(0, 1.4fr) auto; }
  .ligne-appli .appli-pipeline { display: none; }
  .ligne-travail { grid-template-columns: 18px 56px minmax(120px, 1fr) minmax(120px, 1fr) 110px; }
  .ligne-travail .mini-etapes { display: none; }
}
@media (max-width: 900px) {
  .carte-appli-tete { grid-template-columns: minmax(0, 1fr); }
  .courbe-latence { justify-items: start; }
  .ligne-branche { grid-template-columns: minmax(0, 1fr) auto; }
  .ligne-branche .version-texte, .ligne-branche .ecart { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .page { padding: 0 8px 20px; gap: 10px; }
  .ligne-appli { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .ligne-appli .appli-version { grid-column: 2 / -1; grid-row: 2; }
  .ligne-appli .appli-actions .libelle { display: none; }
  .ligne-version { grid-template-columns: minmax(0, 1fr); }
  .ligne-version > .ic { display: none; }
  .version-actions { justify-content: flex-start; }
  .ligne-travail { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px 10px; }
  .ligne-travail .num, .ligne-travail .version-court { display: none; }
  .etapes { grid-auto-columns: minmax(58px, 1fr); overflow-x: auto; }
  .etape strong { font-size: 11.5px; }
  .etape strong .long { display: none; }
  .etape strong .court { display: inline; }
  .etape > span:last-child { font-size: 10.5px; }
  .journal-lignes { height: 56vh; font-size: 11.5px; }
  .journal-lignes > div { grid-template-columns: 0 0 minmax(0, 1fr); padding-left: 10px; }
  .journal-lignes .n, .journal-lignes .h { visibility: hidden; }
  .journal-lignes .titre-etape { padding-left: 10px; }
  .grille-machines, .grille-compte { grid-template-columns: minmax(0, 1fr); }
  .courbe-latence svg { width: 100%; height: 34px; }
  .courbe-latence > span:last-child, .carte-appli .description { display: none; }
  .carte-appli-tete h2 { font-size: 17px; }
  .carte-appli-tete { gap: 10px; }
  .faits { gap: 4px 14px; }
  .barre-actions { gap: 6px; margin-top: 10px; padding-top: 10px; }
  .barre-actions .bouton .libelle-long { display: none; }
  .ligne-evenement { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Avatar du compte (repris de Courrier) */
.avatar {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  overflow: hidden; background: hsl(var(--h, 230) 52% 48%); color: #fff; font-weight: 650; font-size: 15px; letter-spacing: .02em;
}
.profil-avatar { width: 38px; height: 38px; font-size: 13px; }
.ligne-travail[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--carte-forte); }
.liste-lignes + div > .pipeline-tete, .liste-lignes + .pipeline-tete { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bordure); }
.ligne-construction { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }

/* --- Applis clientes (vue Applis) ---------------------------------------------------------------------- */
/* Une couleur par plateforme, toujours la même (palette catégorielle validée, ordre fixe), et un gris pour
   « inconnue » ; le sombre a ses propres pas. Le texte reste à l'encre du texte, jamais à la couleur. */
:root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s0: #8a93a5; }
@media (prefers-color-scheme: dark) {
  :root { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s0: #6b7280; }
}
.carte-cliente { display: grid; gap: 14px; }
.carte-cliente-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.carte-cliente-tete h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; letter-spacing: -.01em; }
.carte-cliente-tete h2 .ic { width: 18px; height: 18px; color: var(--accent); }
.carte-cliente-tete p { margin: 2px 0 0; font-size: 13px; }
.carte-cliente-tete .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.carte-cliente h3 { margin: 0; font-size: 13.5px; }
.barre-retour { display: flex; }
.bandeau-travail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border-radius: 12px;
  background: var(--accent-doux); color: var(--texte); text-decoration: none; font-size: 13px; }
.bandeau-travail.attente { background: var(--degrade-doux); }
.bandeau-travail span:last-child { color: var(--texte-2); }
.table-versions td { vertical-align: top; }
.table-versions td.nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-versions td.notes { min-width: 180px; max-width: 360px; color: var(--texte-2); }
.table-versions td.actions-ligne { white-space: nowrap; text-align: right; }
.table-versions td.actions-ligne .bouton + .bouton { margin-left: 6px; }
.table-versions tr.non-fiable td:not(:nth-child(4)) { opacity: .55; }
.signature { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.signature .ic { width: 14px; height: 14px; }
.signature.ok { color: var(--vert); }
.signature.ko { color: var(--rouge); padding: 1px 7px; border-radius: 999px; background: var(--rouge-doux); }
.point-serie { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 3px; background: var(--s0); vertical-align: 1px; }
.point-serie.s1, .seg.s1 { background: var(--s1); fill: var(--s1); }
.point-serie.s2, .seg.s2 { background: var(--s2); fill: var(--s2); }
.point-serie.s3, .seg.s3 { background: var(--s3); fill: var(--s3); }
.point-serie.s4, .seg.s4 { background: var(--s4); fill: var(--s4); }
.point-serie.s5, .seg.s5 { background: var(--s5); fill: var(--s5); }
.seg.s0 { fill: var(--s0); }
.verifications .seg { fill: var(--s0); }
.bloc-telechargements { display: grid; gap: 8px; }
.bloc-telechargements .sous-titre-carte { margin: 6px 0 0; }
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--texte-2); }
.legende strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.figure-barres { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; }
.figure-barres .echelle { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 14px;
  font-size: 11px; color: var(--texte-3); font-variant-numeric: tabular-nums; text-align: right; }
.barres-jours { width: 100%; height: 120px; display: block; }
.barres-jours.verifications { height: 64px; }
.barres-jours .axe { stroke: var(--bordure); stroke-width: 1; }
.barres-jours .grille { stroke: var(--bordure); stroke-width: 1; stroke-dasharray: 2 4; }
.barres-jours .cible { fill: transparent; }
.barres-jours .barre:hover .cible { fill: var(--survol); }
.barres-jours .barre:hover .seg { filter: brightness(1.08); }
.figure-barres .axe-x { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; color: var(--texte-3); }
.ligne-release { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px;
  border-radius: 10px; background: var(--surface-2); }
.ligne-release .haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ligne-release .haut a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.liens-release { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; }
.note-livraison { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.dialogue-livrer { width: min(520px, calc(100vw - 32px)); }
.dialogue-livrer .cases { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--texte); }
.dialogue-livrer .champ input[type="text"] { width: 100%; }
.dialogue-livrer .segments { justify-self: start; }
.dialogue-livrer .avertissement { margin-bottom: 12px; }
.dialogue-livrer .avertissement p { margin: 0 0 6px; }
@media (max-width: 700px) {
  .carte-cliente-tete .actions { width: 100%; }
  .barres-jours { height: 96px; }
}
.dialogue-livrer .case { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.barre-retour .ic { transform: rotate(180deg); }
.table-versions td:nth-child(3), .table-versions td:nth-child(5) { white-space: nowrap; }