/* Console de développement — la charte du portail (styles.css du web), en plus sobre. */
@font-face { font-family: "Archivo"; src: url("/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fond: #f2efe6; --surface: #ffffff; --surface-2: #efebdf; --bordure: #e8e3d8;
  --texte: #17251e; --texte-faible: #57665d;
  --accent: #2e6b4f; --accent-doux: #e4f2e8; --accent-contraste: #ffffff;
  --succes: #2e6b4f; --succes-doux: #e4f2e8;
  --alerte: #875a05; --alerte-doux: #f6ebd4;
  --danger: #b02f21; --danger-doux: #fbeae7; --danger-contraste: #ffffff;
  --code-fond: #17251e; --code-texte: #dfe9e3;
  --ombre: 0 1px 2px rgb(23 37 30 / 0.06), 0 6px 24px rgb(23 37 30 / 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0e1411; --surface: #141c17; --surface-2: #1a241e; --bordure: #2a3a31;
    --texte: #e6efe9; --texte-faible: #a6b8ac;
    --accent: #7fbf8e; --accent-doux: #1a3324; --accent-contraste: #0e1411;
    --succes: #7fbf8e; --succes-doux: #143122;
    --alerte: #d8a03a; --alerte-doux: #33290f;
    --danger: #f08a7e; --danger-doux: #3a241f; --danger-contraste: #0e1411;
    --code-fond: #0a0f0c; --code-texte: #cfdcd4;
    --ombre: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 24px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.05rem; font-weight: 650; }
code { font: 0.86em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }

.barre { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.barre-int { max-width: 1320px; margin: 0 auto; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.marque { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.marque-sous { font-weight: 400; color: var(--texte-faible); }
.marque-point { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.barre-droite { display: flex; gap: 14px; align-items: center; color: var(--texte-faible); font-size: 0.92rem; }

.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 16px; padding: 20px; box-shadow: var(--ombre); }
.faible, .meta, .aide { color: var(--texte-faible); }
.meta { margin: 4px 0 0; font-size: 0.86rem; }
.aide { font-size: 0.84rem; margin: 0; }
.etiquette { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-faible); }

.connexion { display: grid; place-items: center; min-height: calc(100dvh - 60px); padding: 20px; }
.connexion-carte { width: min(420px, 100%); display: grid; gap: 14px; }
.champ { display: grid; gap: 6px; font-size: 0.9rem; }
.champ input, .champ textarea {
  font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 10px; padding: 10px 12px; width: 100%;
}
.champ input:focus, .champ textarea:focus, .bouton:focus-visible, .lien:focus-visible, .case input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.erreur { color: var(--danger); margin: 0; min-height: 1.2em; font-size: 0.9rem; }

.bouton {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 10px; padding: 10px 16px;
  border: 1px solid var(--bordure); background: var(--surface-2); color: var(--texte);
}
.bouton:disabled { opacity: 0.45; cursor: not-allowed; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); }
.bouton.danger-plein { background: var(--danger); border-color: var(--danger); color: var(--danger-contraste); }
.lien { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lien:disabled { color: var(--texte-faible); cursor: not-allowed; }
.lien-externe { color: var(--accent); font-size: 0.9rem; }

.console { max-width: 1320px; margin: 0 auto; padding: 20px; display: grid; gap: 20px; }
.chaine { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; }
.fleche { align-self: center; height: 2px; background: var(--bordure); position: relative; }
.fleche::after { content: ""; position: absolute; right: 0; top: -5px; border: 6px solid transparent; border-left-color: var(--bordure); border-right: 0; }
.etage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.etage-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.actions { margin-top: auto; display: grid; gap: 10px; padding-top: 6px; }
.actions-fines { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9rem; }

.pastille { font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--texte-faible); white-space: nowrap; }
.pastille.ok { background: var(--succes-doux); color: var(--succes); }
.pastille.alerte { background: var(--alerte-doux); color: var(--alerte); }
.pastille.danger { background: var(--danger-doux); color: var(--danger); }
.pastille.cours { background: var(--accent-doux); color: var(--accent); }

.faits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.88rem; }
.faits li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--bordure); padding: 3px 0; }
.faits li span:last-child { text-align: right; overflow-wrap: anywhere; }
.avertissement-bloc { background: var(--alerte-doux); color: var(--alerte); border-radius: 10px; padding: 10px 12px; font-size: 0.86rem; }
.porte { font-size: 0.86rem; }
.porte ul { margin: 6px 0 0; padding-left: 18px; }
.porte.ouverte { color: var(--succes); font-weight: 600; }
.commits { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.86rem; max-height: 180px; overflow-y: auto; }
.commits li { display: flex; gap: 8px; }
.commits code { flex: none; }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.86rem; }
.etape { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.etape:hover { background: var(--surface-2); }
.etape-icone { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-top: 1px; background: var(--surface-2); color: var(--texte-faible); }
.etape.ok .etape-icone { background: var(--succes); color: var(--accent-contraste); }
.etape.avertissement .etape-icone { background: var(--alerte); color: var(--accent-contraste); }
.etape.echec .etape-icone { background: var(--danger); color: var(--danger-contraste); }
.etape.en_cours .etape-icone { background: var(--accent-doux); color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.etape-titre { font-weight: 600; }
.etape-resume { display: block; color: var(--texte-faible); overflow-wrap: anywhere; }
.etape.echec .etape-resume { color: var(--danger); }
.etape.selectionnee { background: var(--accent-doux); }
@keyframes pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .etape.en_cours .etape-icone { animation: none; } }

.tache-tete { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 12px; }
.etapes-larges { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.journal { margin: 12px 0 0; background: var(--code-fond); color: var(--code-texte); border-radius: 10px; padding: 12px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

.bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
.procedure { margin: 10px 0; padding-left: 20px; display: grid; gap: 8px; }
.tableau-defilant { overflow-x: auto; margin-top: 10px; }
.historique { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.historique th { text-align: left; color: var(--texte-faible); font-weight: 600; border-bottom: 1px solid var(--bordure); padding: 6px 8px; white-space: nowrap; }
.historique td { border-bottom: 1px solid var(--bordure); padding: 6px 8px; }
.historique tr { cursor: pointer; }
.historique tbody tr:hover { background: var(--surface-2); }

.dialogue { border: 1px solid var(--bordure); border-radius: 16px; padding: 0; background: var(--surface); color: var(--texte); width: min(620px, calc(100vw - 32px)); box-shadow: var(--ombre); }
.dialogue::backdrop { background: rgb(14 20 17 / 0.45); }
.dialogue form { padding: 22px; display: grid; gap: 14px; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.case { display: flex; gap: 10px; align-items: start; font-size: 0.92rem; }
.case input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.risque { background: var(--danger-doux); border-radius: 10px; padding: 10px 12px; }

@media (max-width: 1080px) {
  .chaine { grid-template-columns: 1fr; gap: 14px; }
  .fleche { display: none; }
  .bas { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .console { padding: 16px; }
  .marque-sous { display: none; }
}