/* ---------- Amplify — feuille de style unique ----------
 * Reprise du langage visuel de la maquette : dense, zinc, 13 px, tableaux, cartes à filet fin.
 * Écrite à la main plutôt que générée : sur un hébergement mutualisé, il n'y a pas d'étape de
 * compilation, et une feuille de 8 Ko chargée telle quelle bat un utilitaire de 3 Mo chargé depuis
 * un CDN — qui ajoute en prime une dépendance réseau à chaque page.
 * Le thème suit celui du système, sans bascule à maintenir. */

:root {
  --fond: #ffffff; --fond-2: #fafafa; --carte: #ffffff;
  --texte: #18181b; --doux: #71717a; --filet: #e4e4e7; --accent: #f4f4f5;
  --bleu: #2563eb; --bleu-doux: rgba(37, 99, 235, .12);
  --vert: #059669; --ambre: #b45309; --rouge: #dc2626;
  --rayon: 8px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #09090b; --fond-2: #0c0c0e; --carte: #131316;
    --texte: #fafafa; --doux: #a1a1aa; --filet: #27272a; --accent: #1c1c1f;
    --bleu: #60a5fa; --bleu-doux: rgba(96, 165, 250, .16);
    --vert: #34d399; --ambre: #fbbf24; --rouge: #f87171;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fond); color: var(--texte);
  font: 13px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.doux { color: var(--doux); }
.petit { font-size: 11px; }
.gras { font-weight: 600; }
.droite { text-align: right; }

/* --- ossature --- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.rail {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 16px;
  padding: 12px; border-right: 1px solid var(--filet); background: var(--fond-2);
}
.marque { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-weight: 600; }
.pastille {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px;
  background: var(--texte); color: var(--fond); font-size: 11px; font-weight: 700;
}
.etiquette { margin-left: auto; border: 1px solid var(--filet); border-radius: 4px; padding: 0 5px; font-size: 11px; color: var(--doux); font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px;
  border-radius: 6px; color: var(--doux); font-weight: 500;
}
.nav a:hover { background: var(--accent); color: var(--texte); }
.nav a.actif { background: var(--accent); color: var(--texte); }
.nav .compte { margin-left: auto; font-size: 11px; }
.bas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
main { min-width: 0; max-width: 1240px; padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }

/* --- en-tête de page --- */
.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fil { display: flex; gap: 6px; font-size: 11px; color: var(--doux); margin-bottom: 4px; }
.fil a:hover { color: var(--texte); }
.titre { font-size: 19px; letter-spacing: -.01em; }
.sous { margin-top: 3px; color: var(--doux); max-width: 82ch; }

/* --- éléments --- */
.carte { background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; }
.carte.plat { padding: 0; overflow: hidden; }
.pad { padding: 14px 16px; }
.rangee { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bande {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--filet); border-radius: var(--rayon); padding: 8px 12px; font-size: 12px; color: var(--doux);
}
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--filet); border-radius: 6px; background: var(--carte); color: var(--texte);
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--accent); }
.btn.on { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.btn.mini { height: 24px; padding: 0 8px; font-size: 11px; }
.btn.danger:hover { border-color: var(--rouge); color: var(--rouge); }
input[type=text], input[type=password], input[type=date], input[type=search] {
  height: 30px; padding: 0 9px; border: 1px solid var(--filet); border-radius: 6px;
  background: var(--fond); color: var(--texte); font: inherit; min-width: 0;
}
input:focus { outline: 2px solid var(--bleu-doux); outline-offset: 0; border-color: var(--bleu); }
.puce {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--filet);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; color: var(--doux); background: transparent; cursor: pointer; font: inherit; font-size: 11px;
}
.puce:hover { background: var(--accent); color: var(--texte); }
.puce.on { background: var(--texte); color: var(--fond); border-color: transparent; }
.puce.mien { background: var(--bleu); color: #fff; border-color: transparent; }
.badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 11px; background: var(--bleu-doux); color: var(--bleu); font-weight: 500; }

/* --- tableaux --- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--filet); }
th { font-size: 11px; font-weight: 500; color: var(--doux); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--fond-2); }
.avatar { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; background: var(--accent); flex: none; }
.vignette { width: 34px; aspect-ratio: 9/16; border-radius: 4px; object-fit: cover; background: var(--accent); flex: none; }

/* --- grille de vidéos --- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.tuile { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--carte); border: 1px solid var(--filet); transition: transform .12s ease, border-color .12s ease; }
.tuile:hover { transform: translateY(-2px); border-color: var(--doux); }
.tuile .img { position: relative; aspect-ratio: 9/16; background: #18181b; }
.tuile .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tuile .vide { display: grid; place-items: center; height: 100%; color: #ffffff66; font-size: 10px; }
.tuile .ratio { position: absolute; left: 6px; top: 6px; border-radius: 6px; padding: 2px 6px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.65); }
.tuile .ratio.chaud { background: var(--bleu); }
.tuile .vues { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 8px 6px; font-size: 11px; font-weight: 500; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); }
.tuile .pied { display: flex; align-items: center; gap: 6px; padding: 7px 8px; font-size: 11px; color: var(--doux); white-space: nowrap; }
/* La date ne se coupe jamais : « il y a 634 j » sur deux lignes décalait toute la rangée de tuiles. */
.tuile .pied .date { margin-left: auto; flex: none; }
.tuile .pied .qui { overflow: hidden; text-overflow: ellipsis; }
.tuile .pied .avatar { width: 18px; height: 18px; }

/* --- chiffres en ligne --- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.chiffres > div { background: var(--carte); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.chiffres .cle { font-size: 11px; color: var(--doux); }
.chiffres .val { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- comparaison --- */
.compare { display: grid; grid-template-columns: 1fr auto auto; column-gap: 28px; font-size: 12px; }
.compare > div { padding: 6px 0; border-top: 1px solid var(--filet); }
.compare .tete { border-top: 0; font-weight: 600; padding-top: 0; }

/* --- divers --- */
.alerte { border: 1px solid var(--filet); border-left: 3px solid var(--ambre); border-radius: var(--rayon); padding: 9px 12px; font-size: 12px; background: var(--fond-2); }
.alerte.err { border-left-color: var(--rouge); }
.alerte.ok { border-left-color: var(--vert); }
.vide-etat { border: 1px dashed var(--filet); border-radius: var(--rayon); padding: 40px; text-align: center; color: var(--doux); }
.hausse { color: var(--vert); } .baisse { color: var(--rouge); }
video { width: 100%; aspect-ratio: 9/16; border-radius: var(--rayon); background: #000; object-fit: contain; }
.journal { display: flex; flex-direction: column; gap: 3px; font-size: 11px; max-height: 420px; overflow: auto; }
.journal .warn { color: var(--ambre); } .journal .error { color: var(--rouge); }
.deux { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.section-titre { display: flex; align-items: baseline; gap: 8px; }
.section-titre h2 { font-size: 14px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .rail .bas { margin: 0; flex-direction: row; }
  .nav { flex-direction: row; }
  .deux { grid-template-columns: 1fr; }
  main { padding: 16px; }
}