:root {
  --fg: #1c1c1e; --muted: #6b7280; --line: #e5e7eb; --bg: #fafafa;
  --accent: #2563eb; --ok: #16a34a; --warn: #b45309; --err: #dc2626;
}
* { box-sizing: border-box; }
/* Toute la typographie du portail, réduite de 30 % (demande de Marc,
   2026-08-06) — pages d'administration ET pages du collaborateur, il n'y a
   qu'une feuille de style. Un seul réglage ici : tout le reste est exprimé en
   « rem », donc textes, boutons, marges et largeurs suivent ensemble et les
   proportions de la page ne bougent pas. Pour revenir en arrière ou ajuster,
   c'est cette seule valeur qu'on touche (100 % = taille d'origine). */
html { font-size: 70%; }
/* Sur un téléphone, cette même réduction rendrait le texte illisible : l'écran
   est déjà petit, et il n'y a pas de recul possible. On revient donc à une taille
   normale sous 700 px de large — sans rien changer sur le grand écran de Marc,
   qui est le seul cas où la réduction sert. (Le collaborateur peut suivre et
   lancer une tâche depuis son téléphone : tout se choisit dans des listes.) */
@media (max-width: 700px) {
  html { font-size: 100%; }
  .container { width: 100%; padding: 0 .9rem; margin: 1rem auto; }
  .topbar { padding: .7rem .9rem; }
}
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg); background: var(--bg); line-height: 1.5;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.2rem; background: #fff; border-bottom: 1px solid var(--line);
}
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--fg); }
.topbar nav a { margin-left: 1rem; text-decoration: none; color: var(--accent); }
/* La colonne suit la fenêtre : elle s'élargit quand on agrandit le navigateur,
   se resserre quand on le rétrécit (demande de Marc, 2026-08-06).
   `94vw` = 94 % de la largeur de la fenêtre, quelle qu'elle soit ; le reste
   fait les marges de chaque côté. La borne de 130rem évite le seul cas où
   « toujours plus large » dessert : sur un très grand écran, des lignes de
   texte si longues que l'œil se perd d'une ligne à l'autre. Elle est en rem,
   donc elle suit aussi le réglage de taille du texte ci-dessus. */
.container { width: min(94vw, 130rem); margin: 1.5rem auto; padding: 0 1.2rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.error { color: var(--err); font-weight: 600; }
a { color: var(--accent); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.2rem; margin: 1rem 0;
}
label { display: block; margin: .6rem 0; font-weight: 600; }
label.check { font-weight: 400; }
input[type=text], input[type=email], select, textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: 8px; font-size: 1rem;
  font-family: inherit; background: #fff;
}
textarea { resize: vertical; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row input { width: auto; flex: 1; margin: 0; }
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1rem; font-size: 1rem; cursor: pointer; margin-top: .4rem;
}
button.danger { background: var(--err); }
.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: .45rem .9rem; border-radius: 8px; text-decoration: none;
}

/* Les tableaux (« Mes tâches », les fichiers livrés, les comptes) sont larges.
   Sur un téléphone ils débordaient et poussaient toute la page de côté : on les
   fait glisser DANS leur propre cadre, et la page, elle, ne bouge plus. */
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem;
        display: block; overflow-x: auto; }
@media (min-width: 701px) { table { display: table; } }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--line); }
th { font-size: .85rem; color: var(--muted); }

.token { font-family: ui-monospace, monospace; font-size: 1.1rem;
  background: #f3f4f6; padding: .5rem .7rem; border-radius: 8px; word-break: break-all; }
.token-flash { border-color: var(--ok); }
code { font-family: ui-monospace, monospace; background: #f3f4f6; padding: 0 .3rem; border-radius: 4px; }

/* Pas de taille propre ici : le bandeau suit la réduction générale (voir
   `html` en haut), sinon elle s'appliquerait deux fois. */
.pause { padding: .6rem .9rem; border-radius: 8px; background: #fef3c7;
  color: var(--warn); font-weight: 600; }
.pause p { margin: .3rem 0; }
/* La consigne de pause (administrateur) : du texte normal, jamais un chemin
   complet — on n'écrit que le nom du fichier, le bouton fait le reste. */
.pause .consigne { font-weight: 400; color: #111827; }
.pause .gestes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem;
  align-items: center; }
.pause .gestes form { margin: 0; }
.pause .gestes button { font-size: .85rem; padding: .35rem .7rem; margin: 0;
  font-weight: 600; }
.pause .gestes .copier { font-weight: 400; background: #fff; color: var(--fg);
  border: 1px solid var(--line); }
.disk { padding: .6rem .9rem; border-radius: 8px; background: #eef2ff; margin-bottom: 1rem; }
.disk.warn { background: #fef3c7; color: var(--warn); }

.apps { list-style: none; padding: 0; }
.apps li { margin: .5rem 0; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }

.progress { height: 12px; background: #eee; border-radius: 6px; overflow: hidden; margin: .5rem 0; }
.progress .bar { height: 100%; background: var(--accent); transition: width .3s; }

.steps, .journal { padding-left: 1.2rem; }
.steps li.step-done { color: var(--ok); }
.steps li.step-running { color: var(--accent); font-weight: 600; }
.steps li.step-failed { color: var(--err); }
.journal { list-style: none; padding: 0; max-height: 20rem; overflow: auto;
  font-size: .9rem; font-family: ui-monospace, monospace; }
.journal li { padding: .15rem 0; border-bottom: 1px solid #f0f0f0; }
.journal li.lvl-error { color: var(--err); }
.journal li.lvl-warn { color: var(--warn); }

.st-running { color: var(--accent); } .st-done { color: var(--ok); }
.st-failed, .st-canceled { color: var(--err); } .st-paused { color: var(--warn); }

form.inline { display: inline; margin: 0; }
button.small { font-size: .8rem; padding: .3rem .6rem; margin: 0 0 0 .4rem; }