/* =========================================================
   ELEVEN DUEL — HUB D'EXPLOITATION
   Meme identite visuelle que le jeu et le dashboard admin :
   memes tokens, memes fontes, memes composants (.mid-btn, .badge,
   .text-input, .modal, .toast). Seules les vues sont nouvelles :
   cartes d'environnement, tiroir de sortie, journal.
   ========================================================= */

:root {
  --bg:        #0C0C10;
  --surface:   #131318;
  --surface-2: #1B1B21;
  --line:      #26262E;

  --ink:       #F2F2F0;
  --ink-2:     #A0A0A8;
  --ink-3:     #63636D;

  --gold:      #E8B23A;
  --cyan:      #35C8F0;
  --magenta:   #F03D8A;
  --violet:    #8B3DF5;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,.6);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- plancher qualite (identique au jeu) ---- */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { min-height:100%; }
body {
  background:var(--bg); color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
button { font-family:inherit; cursor:pointer; }
button:disabled { cursor:not-allowed; }
input, select { font-family:inherit; }
a { color:var(--cyan); }

.hidden { display:none !important; }

/* chiffres tabulaires : tout ce qui compte du temps, de la memoire, des commits */

/* ------ voix display du produit ------ */
.brush, .display {
  font-family:'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:0.04em;
}
.mono { font-family:var(--mono); }

/* =========================================================
   ECRAN DE DEMARRAGE
   ========================================================= */
.boot {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
}
.boot-mark {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:900; font-style:italic;
  font-size:26px; letter-spacing:0.02em; color:var(--gold);
}
.boot-msg { color:var(--ink-3); font-size:0.85rem; font-weight:600; }

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead { display:flex; align-items:center; gap:11px; }
.mast-badge {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:#0C0C10;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:900; font-style:italic;
  font-size:19px; letter-spacing:0.02em;
}
.mast-txt { flex:1; min-width:0; }
.mast-name {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:900; font-style:italic;
  font-size:21px; line-height:0.95; letter-spacing:0.02em; color:var(--ink);
}
.mast-season {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-top:2px;
}

/* =========================================================
   ECRAN DE CONNEXION
   ========================================================= */
.screen { max-width:460px; margin:0 auto; padding:26px 16px 48px; }
.login-title { font-size:1.5rem; color:var(--gold); text-align:center; margin:26px 0 10px; }
.login-sub {
  color:var(--ink-2); font-size:0.85rem; line-height:1.5;
  text-align:center; margin-bottom:18px;
}
.online-block {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:12px;
}
.online-label {
  display:block; color:var(--ink-2); font-size:0.8rem; text-transform:uppercase;
  letter-spacing:1px; font-weight:800; margin-bottom:8px;
}
.text-input {
  width:100%; background:var(--bg); border:1px solid var(--line); color:#fff; border-radius:12px;
  padding:12px; font-size:1rem; font-weight:700; -webkit-appearance:none;
}
.text-input:disabled { opacity:0.55; }
.online-status {
  text-align:center; color:var(--ink-2); font-weight:700; min-height:22px;
  margin-top:6px; font-size:0.88rem; line-height:1.4;
}
.online-error { color:var(--magenta); }

/* =========================================================
   BOUTONS (memes formes que le jeu / l'admin)
   ========================================================= */
.mid-btn {
  border:none; border-radius:12px; padding:12px 16px; min-height:46px;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:800; letter-spacing:0.05em;
  text-transform:uppercase; font-size:16px; background:var(--gold); color:#0C0C10;
  transition:transform 0.1s ease, filter 0.15s ease;
}
.mid-btn:active { transform:scale(0.97); }
.mid-btn:disabled { opacity:0.5; transform:none; }
.mid-btn.full { width:100%; margin-top:12px; }
.mid-btn.danger { background:var(--magenta); color:#0C0C10; }
.mid-btn.ghost {
  background:none; color:var(--ink-2); border:1px solid var(--line);
  font-size:14px; min-height:40px; padding:8px 14px;
}
.mid-btn.ghost:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-3); }

/* bouton d'action de carte : compact, colore par famille */
.act-btn {
  border-radius:10px; padding:9px 12px; min-height:38px;
  font-size:0.76rem; font-weight:800; letter-spacing:0.02em;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
  white-space:nowrap;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.act-btn:hover:not(:disabled) { color:var(--ink); border-color:var(--ink-3); }
.act-btn:disabled { opacity:0.38; }
.act-cyan   { color:var(--cyan);    border-color:color-mix(in srgb, var(--cyan) 34%, transparent); }
.act-cyan:hover:not(:disabled)    { color:var(--cyan);    border-color:var(--cyan); }
.act-gold   { color:var(--gold);    border-color:color-mix(in srgb, var(--gold) 34%, transparent); }
.act-gold:hover:not(:disabled)    { color:var(--gold);    border-color:var(--gold); }
.act-magenta{ color:var(--magenta); border-color:color-mix(in srgb, var(--magenta) 34%, transparent); }
.act-magenta:hover:not(:disabled) { color:var(--magenta); border-color:var(--magenta); }
.act-violet { color:var(--violet);  border-color:color-mix(in srgb, var(--violet) 40%, transparent); }
.act-violet:hover:not(:disabled)  { color:var(--violet);  border-color:var(--violet); }
/* l'action forte d'un groupe : pleine, on ne la cherche pas */
.act-btn.strong { background:var(--gold); color:#0C0C10; border-color:var(--gold); }
.act-btn.strong:hover:not(:disabled) { color:#0C0C10; filter:brightness(1.08); }
.act-btn.strong:disabled { opacity:0.4; }

/* =========================================================
   COQUILLE DU TABLEAU DE BORD
   ========================================================= */
.dash { max-width:1320px; margin:0 auto; padding:0 18px 40px; }

.topbar {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0 12px; margin-bottom:16px;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.identity-pill {
  background:var(--surface); border:1px solid color-mix(in srgb, var(--gold) 33%, transparent);
  color:var(--gold); border-radius:20px; padding:6px 13px; font-weight:800; font-size:0.82rem;
}

/* =========================================================
   PARCOURS « MISE EN PRODUCTION »
   Le scenario du quotidien, dans l'ordre, en haut de page.
   ========================================================= */
.card.is-busy { border-color:color-mix(in srgb, var(--cyan) 45%, transparent); }

/* ---- entete ---- */
.card-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card-name {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:900;
  text-transform:uppercase; letter-spacing:0.04em; font-size:1.6rem; line-height:1;
}
.card-name.is-prod { color:var(--gold); }
.card-name.is-dev  { color:var(--cyan); }
.card-head-right { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* pastille d'etat : verte a jour, ambre a surveiller, rouge arretee */
.dot {
  width:11px; height:11px; border-radius:999px; flex-shrink:0; display:inline-block;
  background:var(--ink-3); box-shadow:0 0 0 3px rgba(0,0,0,0.35);
}
.dot-ok    { background:#3CD98A; box-shadow:0 0 0 3px color-mix(in srgb, #3CD98A 22%, transparent); }
.dot-warn  { background:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.dot-down  { background:var(--magenta); box-shadow:0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent); }
.dot-sm { width:8px; height:8px; box-shadow:none; }
.state-line { display:flex; align-items:center; gap:7px; }
.state-word {
  font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-2);
}

/* ---- badges (identiques a l'admin) ---- */
.badge {
  display:inline-block; border-radius:999px; padding:3px 8px;
  font-size:0.64rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
  white-space:nowrap;
}
.badge-ok     { color:var(--cyan);    border-color:color-mix(in srgb, var(--cyan) 42%, transparent);    background:#102035; }
.badge-warn   { color:var(--gold);    border-color:color-mix(in srgb, var(--gold) 42%, transparent);    background:#241c10; }
.badge-danger { color:var(--magenta); border-color:color-mix(in srgb, var(--magenta) 42%, transparent); background:#2A1220; }
.badge-branch { color:var(--violet);  border-color:color-mix(in srgb, var(--violet) 50%, transparent);  background:#1B1030;
                font-family:var(--mono); text-transform:none; letter-spacing:0; }

/* ---- bloc git ---- */
.card-git {
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px;
}
.git-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.git-sha {
  font-family:var(--mono); font-size:0.78rem; font-weight:700; color:var(--gold);
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:2px 7px;
}
.git-subject {
  color:var(--ink); font-size:0.86rem; font-weight:600; line-height:1.4;
  overflow-wrap:anywhere;
}
.card-meta { color:var(--ink-3); font-size:0.74rem; font-weight:600; margin-top:5px; }
.git-flags { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }

/* ---- faits (service, build, api, base) ---- */
.facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
         border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.fact { background:var(--surface); padding:10px 12px; min-width:0; }
.fact-label {
  font-size:0.6rem; color:var(--ink-3); font-weight:800; text-transform:uppercase;
  letter-spacing:0.09em; margin-bottom:4px;
}
.fact-value {
  font-size:0.86rem; font-weight:800; color:var(--ink);
  display:flex; align-items:center; gap:6px; min-width:0;
}
.fact-value span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fact-sub { font-size:0.7rem; color:var(--ink-3); font-weight:600; margin-top:2px; }
.fact-ok   { color:var(--cyan); }
.fact-warn { color:var(--gold); }
.fact-bad  { color:var(--magenta); }

/* ---- liens ---- */
.card-links { display:flex; gap:8px; flex-wrap:wrap; }
.link-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font-size:0.74rem; font-weight:800; color:var(--ink-2);
  text-decoration:none; transition:color 0.15s ease, border-color 0.15s ease;
}
.link-chip:hover { color:var(--cyan); border-color:color-mix(in srgb, var(--cyan) 45%, transparent); }

/* ---- actions ---- */
.act-group { border-top:1px solid var(--line); padding-top:11px; }
.act-group + .act-group { margin-top:2px; }
.act-title {
  font-size:0.6rem; color:var(--ink-3); font-weight:800; text-transform:uppercase;
  letter-spacing:0.09em; margin-bottom:8px;
}
.act-row { display:flex; gap:7px; flex-wrap:wrap; }
.act-row .act-btn { flex:0 1 auto; }

.branch-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.branch-select {
  flex:1 1 150px; min-width:0;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:9px 10px; font-size:0.8rem; font-weight:700;
  font-family:var(--mono);
}
.branch-select:disabled { opacity:0.45; }

/* =========================================================
   DEPOT — LES DEUX ETATS, JAMAIS DANS LE MEME ENCADRE

   1. « Non commité »  (accent OR)  : des FICHIERS changes dans l'arbre de
      travail. Seul un commit les enleve.
   2. « Non poussé »   (accent CYAN): des COMMITS absents d'origin.
      Seul un push les enleve.

   Deux accents, deux pastilles, deux compteurs : la couleur seule ne porte
   jamais l'information (chaque bloc a un titre explicite et un intitule).
   ========================================================= */
.wt-legend {
  font-size:11.5px; line-height:1.35; color:var(--ink-3); font-weight:600;
  margin:0 0 9px;
}
.wt-block {
  background:var(--surface-2);
  border:1px solid var(--line); border-left-width:3px;
  border-radius:var(--r-md); padding:10px 12px;
}
.wt-block + .wt-block { margin-top:9px; }
.wt-changes {
  border-left-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 5%, var(--surface-2));
}
.wt-pending {
  border-left-color:var(--cyan);
  background:color-mix(in srgb, var(--cyan) 5%, var(--surface-2));
}
.wt-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wt-kicker {
  flex:0 0 auto; border-radius:999px; padding:3px 8px;
  font-size:0.58rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
}
.wt-changes .wt-kicker {
  color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:#241c10;
}
.wt-pending .wt-kicker {
  color:var(--cyan); border-color:color-mix(in srgb, var(--cyan) 45%, transparent); background:#102035;
}
.wt-title {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:0.04em;
  font-size:1.05rem; line-height:1.1; color:var(--ink);
}
.wt-hint { margin-top:4px; font-size:11.5px; line-height:1.35; color:var(--ink-3); font-weight:600; }
.wt-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }

/* ---- bloc 1 : la liste des fichiers ---- */
.chg-list, .cmt-list {
  list-style:none; margin:9px 0 0; padding:0;
  display:flex; flex-direction:column; gap:4px;
  max-height:196px; overflow:auto;
  min-width:0;   /* un chemin insecable ne doit jamais elargir la carte */
}
.chg, .cmt {
  display:flex; align-items:center; gap:8px; min-width:0;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:5px 8px;
}
.chg-tag {
  flex:0 0 auto; border-radius:999px; padding:2px 7px;
  font-size:0.58rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
}
.chg-add       { color:#3CD98A;         border-color:color-mix(in srgb, #3CD98A 42%, transparent); }
.chg-mod       { color:var(--gold);     border-color:color-mix(in srgb, var(--gold) 42%, transparent); }
.chg-del       { color:var(--magenta);  border-color:color-mix(in srgb, var(--magenta) 42%, transparent); }
.chg-ren       { color:var(--violet);   border-color:color-mix(in srgb, var(--violet) 50%, transparent); }
.chg-untracked { color:var(--cyan);     border-color:color-mix(in srgb, var(--cyan) 42%, transparent); }
.chg-conflict  { color:var(--magenta);  border-color:var(--magenta); }
/* Chemin tronque au DEBUT : la fin (le nom du fichier) porte l'information.
   `direction:rtl` place l'ellipse du cote gauche ; le chemin lui-meme reste
   lu de gauche a droite (ce sont des caracteres latins, donc une seule suite
   LTR). Le chemin complet est dans l'infobulle. */
.chg-path {
  flex:1 1 auto; min-width:0;
  direction:rtl; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--mono); font-size:11.5px; color:var(--ink);
}
.chg-more { margin-top:6px; font-size:11.5px; color:var(--ink-3); font-weight:600; }

/* ---- bloc 1 : saisie du message ---- */
.commit-form { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.commit-input {
  flex:1 1 190px; min-width:0;
  background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:9px 11px; font-size:0.82rem; font-weight:600;
  -webkit-appearance:none;
}
.commit-input::placeholder { color:var(--ink-3); font-weight:600; }
.commit-input:focus { border-color:color-mix(in srgb, var(--gold) 55%, transparent); outline-offset:1px; }
.commit-input:disabled { opacity:0.45; }
.commit-form .act-btn { flex:0 0 auto; }

/* ---- bloc 2 : la liste des commits ---- */
.cmt { align-items:baseline; }
.cmt-sha {
  flex:0 0 auto; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--gold);
}
.cmt-subject {
  flex:1 1 auto; min-width:0; font-size:12px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmt-date { flex:0 0 auto; font-size:11px; color:var(--ink-3); font-weight:600; }

/* ---- rien a faire : etat neutre, discret ---- */
.wt-clean {
  display:flex; align-items:center; gap:8px;
  border:1px dashed var(--line); border-radius:var(--r-md); padding:9px 11px;
  font-size:12px; font-weight:600; color:var(--ink-3);
}

.card-busy {
  display:flex; align-items:center; gap:9px;
  background:#102035; border:1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  border-radius:10px; padding:9px 12px; color:var(--cyan);
  font-size:0.78rem; font-weight:800;
}

/* indicateur d'activite */
.spinner {
  width:13px; height:13px; flex-shrink:0; border-radius:999px;
  border:2px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  border-top-color:var(--cyan);
  animation:spin 0.75s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* =========================================================
   TIROIR DE SORTIE (jobs)
   ========================================================= */
.console-root {
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:0 18px; pointer-events:none;
}
.console {
  pointer-events:auto;
  max-width:1320px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line); border-bottom:none;
  border-radius:var(--r-md) var(--r-md) 0 0; box-shadow:var(--shadow-3);
  overflow:hidden;
}
.console-head {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface);
}
.console-tabs { display:flex; gap:6px; flex-wrap:wrap; min-width:0; }
.console-tab {
  display:flex; align-items:center; gap:7px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
  border-radius:10px; padding:7px 11px; font-size:0.74rem; font-weight:800;
  max-width:100%; white-space:nowrap;
}
.console-tab.active { color:var(--ink); border-color:var(--ink-3); background:var(--bg); }
.console-tab-env { color:var(--gold); }
.console-tab.is-dev .console-tab-env { color:var(--cyan); }
.console-head-right { margin-left:auto; display:flex; align-items:center; gap:6px; }
.console-out {
  font-family:var(--mono); font-size:12.5px; line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere;
  background:var(--bg); color:var(--ink-2);
  padding:12px 14px; max-height:42vh; min-height:96px; overflow:auto;
}
.console-out:empty::before { content:"En attente de sortie…"; color:var(--ink-3); }
.console-foot {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; border-top:1px solid var(--line);
  font-size:0.78rem; font-weight:800; color:var(--ink-2);
}
.console-foot.ok   { color:#3CD98A; }
.console-foot.fail { color:var(--magenta); }
.console-foot .dim { color:var(--ink-3); font-weight:600; }
.console.collapsed .console-out, .console.collapsed .console-foot { display:none; }

/* =========================================================
   JOURNAL D'AUDIT
   ========================================================= */
.audit { margin-bottom:10px; }
.audit-head {
  width:100%; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 14px; color:var(--ink-2); text-align:left;
}
.audit-head:hover { color:var(--ink); }
.audit-caret { color:var(--ink-3); font-size:0.8rem; transition:transform 0.15s ease; display:inline-block; }
.audit-head[aria-expanded="true"] .audit-caret { transform:rotate(90deg); }
.audit-title { font-size:0.95rem; }
.audit-count { margin-left:auto; color:var(--ink-3); font-size:0.75rem; font-weight:700; }
.audit-body {
  background:var(--surface); border:1px solid var(--line); border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md); margin-top:-6px; padding:4px 14px 10px;
  max-height:44vh; overflow:auto;
}
.audit-row {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:0.8rem;
}
.audit-row:last-child { border-bottom:none; }
.audit-at { color:var(--ink-3); font-size:0.72rem; font-weight:700; width:118px; flex-shrink:0; }
.audit-env { font-weight:800; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; width:44px; flex-shrink:0; }
.audit-env.is-prod { color:var(--gold); }
.audit-env.is-dev  { color:var(--cyan); }
.audit-action { font-family:var(--mono); font-size:0.76rem; color:var(--ink); font-weight:700; }
.audit-detail { color:var(--ink-3); font-size:0.74rem; flex:1 1 160px; min-width:0; overflow-wrap:anywhere; }
.audit-empty { color:var(--ink-3); font-size:0.82rem; font-weight:600; padding:14px 0; }

/* =========================================================
   MODALE + TOASTS (identiques a l'admin)
   ========================================================= */
.modal-root {
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(6,6,9,0.74); backdrop-filter:blur(3px);
}
.modal {
  width:100%; max-width:460px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:20px;
  animation:modalIn 0.16s ease;
}
@keyframes modalIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.modal-title {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:0.04em; font-size:1.35rem; color:var(--gold);
}
.modal-title.danger { color:var(--magenta); }
.modal-body { color:var(--ink-2); font-size:0.88rem; line-height:1.55; margin:10px 0 18px; }
.modal-body p + p { margin-top:8px; }
.modal-body strong { color:var(--ink); }
.modal-cmd {
  font-family:var(--mono); font-size:0.78rem; color:var(--cyan);
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; margin-top:10px; overflow-wrap:anywhere;
}
/* Rappel d'une SAISIE de l'operateur (message de commit) : on ne confirme
   jamais un texte libre sans le remontrer mot pour mot. */
.modal-quote {
  background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; padding:9px 11px; margin-top:10px;
}
.modal-quote-label {
  font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--ink-3); margin-bottom:4px;
}
.modal-quote-text {
  color:var(--ink); font-size:0.9rem; font-weight:700; line-height:1.45;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.modal-btns { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.modal-btns .mid-btn { min-width:118px; }

/* en haut : le bas de l'ecran appartient au tiroir de sortie */
.toast-root {
  position:fixed; left:50%; top:78px; transform:translateX(-50%); z-index:120;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.toast {
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:10px 16px; font-weight:700; font-size:0.85rem; color:var(--ink);
  box-shadow:var(--shadow-2); animation:toastIn 0.18s ease; max-width:min(92vw, 460px);
  text-align:center;
}
@keyframes toastIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.toast-ok  { border-color:color-mix(in srgb, var(--cyan) 50%, transparent); color:var(--cyan); }
.toast-err { border-color:color-mix(in srgb, var(--magenta) 50%, transparent); color:var(--magenta); }

/* =========================================================
   PETITS ECRANS
   ========================================================= */
@media (max-width:640px) {
  .dash { padding:0 12px 30px; }
  .console-root { padding:0; }
  .console { border-radius:var(--r-md) var(--r-md) 0 0; border-left:none; border-right:none; }
  .console-out { max-height:38vh; font-size:12px; }
  .mast-badge { width:38px; height:38px; font-size:16px; }
  .mast-name { font-size:18px; }
  .topbar { gap:10px; padding:12px 0 10px; }
  .topbar-right { width:100%; margin-left:0; }
  .card-name { font-size:1.4rem; }
  .facts { grid-template-columns:1fr; }
  /* le champ prend la ligne, le bouton la suivante : cible tactile pleine */
  .commit-input { flex:1 1 100%; }
  .commit-form .act-btn { flex:1 1 100%; }
  .chg-list, .cmt-list { max-height:168px; }
}

/* Grille des environnements : deux colonnes cote a cote sur large,
   empilees en etroit. DEV a gauche, PROD a droite (ordre impose en JS). */
.env-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px; align-items:start; margin-top:18px;
}
/* `minmax(0, 1fr)` ET `min-width:0` sur la carte : sans les deux, un contenu
   insecable (un chemin de fichier tres long) impose sa largeur minimale a la
   colonne et fait deborder toute la page horizontalement. */
@media (max-width:960px) { .env-grid { grid-template-columns:minmax(0, 1fr); } }
.card { min-width:0; }

/* ===== APPS : bloc mis en evidence juste sous le titre de la carte.
   C'est la donnee la plus consultee du hub — a quelles adresses repond
   cet environnement. Elle prime donc sur l'etat git et les indicateurs. ===== */
.card-apps {
  display:flex; flex-wrap:wrap; gap:8px;
  margin:12px 0 16px; padding:12px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
}
.app-link {
  flex:1 1 160px; align-items:flex-start; min-width:0;
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.app-link:hover {
  border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, var(--surface));
  transform:translateY(-1px);
}
.app-icon { font-size:17px; line-height:1; flex:0 0 auto; }
.app-text { display:flex; flex-direction:column; min-width:0; }
.app-label {
  font-family:"Barlow Condensed", sans-serif; font-weight:900; font-size:17px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--gold); line-height:1.1;
}
.app-host {
  font-size:11.5px; color:var(--ink-2); font-weight:600; letter-spacing:-.01em;
  /* on prefere un retour a la ligne a une troncature : l'adresse exacte est
     precisement l'information qu'on vient chercher ici. */
  overflow-wrap:anywhere; line-height:1.25;
}
.app-link.is-off { opacity:.4; justify-content:center; font-size:13px; color:var(--ink-3); }
@media (max-width:600px) { .app-link { flex:1 1 100%; } }

/* Detail des etapes enchainees par le bouton « Deployer ». */
.deploy-hint { font-size:12px; color:var(--ink-3); margin-left:10px; }

/* ===== Comptes de test (environnements hors production) ===== */
.test-accounts {
  margin:0 0 14px; padding:10px 12px;
  background:color-mix(in srgb, var(--cyan) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  border-radius:var(--r-md);
}
.ta-title {
  font-family:"Barlow Condensed", sans-serif; font-weight:900; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); margin-bottom:6px;
}
.ta-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ta-users { font-weight:700; font-size:14px; color:var(--ink); }
.ta-pass {
  display:inline-flex; align-items:baseline; gap:7px; cursor:pointer;
  padding:4px 10px; border-radius:999px; font-family:inherit;
  background:var(--surface-2); border:1px dashed var(--line); color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.ta-pass:hover { border-color:var(--cyan); border-style:solid; }
.ta-pass-label { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.ta-pass-value { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; color:var(--gold); font-weight:700; }
.ta-pass.is-copied { border-color:var(--gold); border-style:solid; }
.ta-pass.is-copied .ta-pass-label::after { content:" copié ✓"; color:var(--gold); }
.ta-note { margin-top:6px; font-size:11.5px; color:var(--ink-3); line-height:1.35; }

/* ===== Alignement des deux cartes =====
   Les adresses de dev sont plus longues (backend-dev…) et passent a la ligne.
   Sans hauteur minimale, la rangee de liens de dev serait plus haute que celle
   de prod et TOUT le reste de la carte se decalerait. On fige donc la hauteur
   d'un lien sur deux lignes d'adresse. */
.app-link { min-height:56px; }
.card-apps { align-items:stretch; }

/* ===== Actions : chaque bouton porte son cas d'usage ===== */
.act-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px 14px; align-items:start;
}
.act-item { display:flex; flex-direction:column; gap:5px; min-width:0; }
.act-item > button { width:100%; }
.act-help {
  font-size:11.5px; line-height:1.35; color:var(--ink-3);
  overflow-wrap:anywhere;
}
/* le bloc « tout en un » garde son bouton a taille naturelle */
.act-group .act-row .act-item { flex:1 1 100%; }
.act-group .act-row .act-item > button { width:auto; align-self:flex-start; }

/* variante cyan : action combinee (commit + push) */
.act-btn.act-cyan {
  background:transparent; color:var(--cyan);
  border:1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
}
.act-btn.act-cyan:hover:not(:disabled) {
  background:color-mix(in srgb, var(--cyan) 12%, transparent); border-color:var(--cyan);
}