/* ==========================================================================
   CReductible — feuille de style unique.

   Pas de framework CSS : quelques centaines de lignes suffisent pour un
   formulaire, une liste et une console de logs. Charger Bootstrap ou Tailwind
   ajouterait une dépendance externe (donc un CDN, donc une connexion internet)
   à une application faite pour tourner sur un NAS isolé.

   Le thème suit celui du système via `prefers-color-scheme`. Toutes les
   couleurs sont des variables : les redéfinir en bas du fichier suffit à
   basculer en sombre, sans dupliquer une seule règle de mise en page.
   ========================================================================== */

:root {
  --fond:            #f6f7f9;
  --surface:         #ffffff;
  --surface-2:       #f0f2f5;
  --bordure:         #dde1e7;
  --texte:           #1c2430;
  --texte-doux:      #5c6773;
  --accent:          #1f3554;
  --accent-clair:    #2c4a6e;
  --sur-accent:      #ffffff;

  --ok:      #1c7c4a;   --ok-fond:      #e6f4ec;
  --attente: #8a6d1f;   --attente-fond: #fdf4e0;
  --cours:   #1f4f8a;   --cours-fond:   #e6eefa;
  --echec:   #a8321f;   --echec-fond:   #fbeae7;
  --neutre:  #5c6773;   --neutre-fond:  #eceff3;

  --rayon: 8px;
  --ombre: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:        #14171c;
    --surface:     #1b1f26;
    --surface-2:   #232830;
    --bordure:     #2f3742;
    --texte:       #e4e8ee;
    --texte-doux:  #99a4b2;
    --accent:      #7ba7dd;
    --accent-clair:#a8c6ea;
    --sur-accent:  #0f1319;

    --ok:      #6dd39b;   --ok-fond:      #16301f;
    --attente: #e0bc63;   --attente-fond: #322910;
    --cours:   #7fb2ec;   --cours-fond:   #142438;
    --echec:   #f0897a;   --echec-fond:   #33170f;
    --neutre:  #99a4b2;   --neutre-fond:  #232830;

    --ombre: 0 1px 3px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Structure
   ------------------------------------------------------------------------- */
.entete {
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete-contenu {
  max-width: 1080px;
  margin: 0 auto;
  padding: .8rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.marque {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--texte);
  text-decoration: none;
  letter-spacing: -.02em;
}
.marque span { color: var(--accent); }

nav { display: flex; gap: 1.1rem; margin-left: auto; flex-wrap: wrap; }
nav a {
  color: var(--texte-doux);
  text-decoration: none;
  font-size: .92rem;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--texte); }
nav a.actif { color: var(--texte); border-bottom-color: var(--accent); }

main { max-width: 1080px; margin: 0 auto; padding: 1.8rem 1.5rem 4rem; }
.etroit { max-width: 760px; }

h1 { font-size: 1.5rem; margin: 0 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 2rem 0 .8rem; }
h3 { font-size: .95rem; margin: 1.4rem 0 .5rem; }
.sous-titre { color: var(--texte-doux); margin: 0 0 1.8rem; }

/* -------------------------------------------------------------------------
   Cartes et grilles
   ------------------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.3rem;
  box-shadow: var(--ombre);
  margin-bottom: 1.2rem;
}
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 640px) {
  .grille-2, .grille-3 { grid-template-columns: 1fr; }
}

.disposition { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .disposition { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Formulaire
   ------------------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: .3rem; }
.aide { font-weight: 400; color: var(--texte-doux); font-size: .82rem; display: block; margin-top: .15rem; }

input[type=text], input[type=number], input[type=date], textarea, select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: .92rem;
}
textarea { resize: vertical; min-height: 7rem; font-family: inherit; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

input[type=file] {
  width: 100%;
  padding: .7rem;
  border: 1px dashed var(--bordure);
  border-radius: 6px;
  background: var(--fond);
  color: var(--texte-doux);
  font-size: .87rem;
}

.champ { margin-bottom: 1.1rem; }

.case {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .8rem;
  background: var(--surface-2);
  border-radius: 6px;
  border: 1px solid var(--bordure);
}
.case input { margin-top: .25rem; flex-shrink: 0; }
.case label { margin: 0; }

details.repli > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 0;
  color: var(--texte-doux);
  user-select: none;
}
details.repli > summary:hover { color: var(--texte); }
details.repli[open] > summary { margin-bottom: .9rem; }

/* -------------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.bouton:hover { background: var(--surface-2); }
.bouton.principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}
.bouton.principal:hover { background: var(--accent-clair); border-color: var(--accent-clair); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.bouton.petit { padding: .32rem .7rem; font-size: .82rem; }

.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------------------
   Pastilles de statut
   ------------------------------------------------------------------------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.pastille::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pastille.done      { color: var(--ok);      background: var(--ok-fond); }
.pastille.queued    { color: var(--attente); background: var(--attente-fond); }
.pastille.preparing,
.pastille.running,
.pastille.generating{ color: var(--cours);   background: var(--cours-fond); }
.pastille.failed    { color: var(--echec);   background: var(--echec-fond); }
.pastille.cancelled { color: var(--neutre);  background: var(--neutre-fond); }

/* Le point clignote tant que le job avance : on voit d'un coup d'œil que
   quelque chose se passe, sans lire le libellé. */
.pastille.preparing::before,
.pastille.running::before,
.pastille.generating::before { animation: pulsation 1.4s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .pastille::before { animation: none !important; }
}

/* -------------------------------------------------------------------------
   Listes de jobs
   ------------------------------------------------------------------------- */
.liste-jobs { display: flex; flex-direction: column; gap: .5rem; }

.ligne-job {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
}
.ligne-job:hover { border-color: var(--accent); }
.ligne-job .titre { font-weight: 600; font-size: .93rem; }
.ligne-job .meta { color: var(--texte-doux); font-size: .82rem; }
.ligne-job .corps { min-width: 0; flex: 1; }
.ligne-job .titre, .ligne-job .meta {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vide {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--texte-doux);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
}

/* -------------------------------------------------------------------------
   Console de logs
   ------------------------------------------------------------------------- */
.console {
  background: #10141a;
  color: #cbd4e0;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  height: 480px;
  overflow-y: auto;
  padding: .8rem 1rem;
  scroll-behavior: smooth;
}
.console .l { display: flex; gap: .7rem; padding: .05rem 0; }
.console .h { color: #5b6779; flex-shrink: 0; }
.console .s { color: #7f8da3; flex-shrink: 0; width: 4.5rem; }
.console .m { white-space: pre-wrap; word-break: break-word; flex: 1; }

.console .niv-info    .m { color: #cbd4e0; }
.console .niv-debug   .m { color: #6d7a8c; }
.console .niv-warn    .m { color: #e5b567; }
.console .niv-error   .m { color: #f0897a; }
.console .niv-success .m { color: #7fd6a1; }
.console .section {
  color: #7fb2ec;
  font-weight: 700;
  border-top: 1px solid #232a35;
  margin-top: .5rem;
  padding-top: .5rem;
}

.barre-console {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
  font-size: .84rem;
  color: var(--texte-doux);
}
.barre-console label { display: inline-flex; gap: .35rem; align-items: center; font-weight: 400; margin: 0; }

/* -------------------------------------------------------------------------
   Encarts
   ------------------------------------------------------------------------- */
.encart {
  padding: .8rem 1rem;
  border-radius: 6px;
  border-left: 3px solid;
  font-size: .89rem;
  margin-bottom: 1rem;
}
.encart p:first-child { margin-top: 0; }
.encart p:last-child { margin-bottom: 0; }
.encart.attention { background: var(--attente-fond); border-color: var(--attente); color: var(--texte); }
.encart.erreur    { background: var(--echec-fond);   border-color: var(--echec);   color: var(--texte); }
.encart.info      { background: var(--cours-fond);   border-color: var(--cours);   color: var(--texte); }
.encart.succes    { background: var(--ok-fond);      border-color: var(--ok);      color: var(--texte); }

/* -------------------------------------------------------------------------
   Livrables, captures, tableaux
   ------------------------------------------------------------------------- */
.livrable {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  margin-bottom: .5rem;
  background: var(--surface);
}
.livrable:hover { border-color: var(--accent); background: var(--surface-2); }
.livrable .ext {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  padding: .22rem .45rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--sur-accent);
  flex-shrink: 0;
}
.livrable .nom { font-weight: 600; font-size: .88rem; }
.livrable .taille { color: var(--texte-doux); font-size: .78rem; margin-left: auto; }

.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.vignette { border: 1px solid var(--bordure); border-radius: 6px; overflow: hidden; background: var(--surface); }
.vignette img { width: 100%; display: block; background: var(--surface-2); }
.vignette figcaption { padding: .4rem .55rem; font-size: .76rem; color: var(--texte-doux); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); font-weight: 600; }
td.num { font-variant-numeric: tabular-nums; }

.defilant { overflow-x: auto; }

dl.paires { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .88rem; }
dl.paires dt { color: var(--texte-doux); }
dl.paires dd { margin: 0; font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--surface-2);
  padding: .1em .35em;
  border-radius: 3px;
}
pre {
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: .8rem;
  overflow-x: auto;
  font-size: .84rem;
}
pre code { background: none; padding: 0; }

.pied {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem;
  color: var(--texte-doux);
  font-size: .82rem;
  border-top: 1px solid var(--bordure);
}