/*
 * FamilyStream — feuille de style unique.
 *
 * Contraintes de compatibilité : cible Chromium 68 (webOS 5.0, TV LG 2020).
 *   - CSS Grid et custom properties : OK depuis Chromium 57/49
 *   - PAS d'`aspect-ratio` (Chromium 88) → technique du padding-top
 *   - PAS de `gap` sur flexbox (Chromium 84) → marges explicites
 *   - PAS de `:is()` / `:where()` (Chromium 88)
 *   - PAS de `inset` (Chromium 87) → top/right/bottom/left
 *
 * Zone de sécurité TV : 5 % de marge sur les bords, les téléviseurs rognent.
 */

:root {
  --bg: #0b0b0f;
  --bg-elevated: #16161d;
  --bg-hover: #22222c;
  --fg: #f4f4f5;
  --fg-muted: #a1a1aa;
  --fg-dim: #71717a;
  --accent: #e11d48;
  --accent-fg: #ffffff;
  --border: #2a2a35;

  --ok: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --info: #6366f1;

  --radius: 8px;
  --safe-x: 4vw;
  --row-gap: 40px;
  --focus-ring: 0 0 0 3px var(--accent), 0 12px 32px rgba(0, 0, 0, .6);
}

/* Sur TV, tout est plus gros et la zone de sécurité est plus large. */
body.tv {
  --safe-x: 5vw;
  font-size: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body { min-height: 100vh; }

button, select, input {
  font: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------- Focus -- */

.focusable:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}
.focusable:focus-visible { outline: none; }

/* ------------------------------------------------------------- Chargement -- */

.loading, .empty-state {
  padding: 80px var(--safe-x);
  color: var(--fg-muted);
  text-align: center;
}
.empty-state h2 { color: var(--fg); font-weight: 600; }
.empty-state code {
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
}

.spinner {
  width: 28px; height: 28px;
  margin: 0 auto 16px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Header -- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  /* Sur un écran trop étroit pour tout tenir sur une ligne, on préfère un
     retour à la ligne propre à un débordement invisible (le profil-chip ou
     la recherche resteraient sinon hors-champ, `body` masquant le débord). */
  flex-wrap: wrap;
  padding: 14px var(--safe-x);
  background: linear-gradient(to bottom, rgba(11,11,15,.95), rgba(11,11,15,0));
}
.topbar.scrolled { background: var(--bg); border-bottom: 1px solid var(--border); }

.brand {
  font-weight: 800;
  font-size: 1.4em;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-right: 28px;
  white-space: nowrap;
}
.topbar nav { display: flex; align-items: center; }
.topbar nav button {
  background: none;
  border: none;
  padding: 8px 14px;
  margin-right: 4px;
  border-radius: var(--radius);
  color: var(--fg-muted);
  cursor: pointer;
}
.topbar nav button:hover { color: var(--fg); background: var(--bg-hover); }
.topbar nav button.active { color: var(--fg); font-weight: 600; }
.topbar .spacer { flex: 1 1 12px; min-width: 12px; }

.search-box {
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  margin-right: 12px;
  /* Rétrécit avec l'espace disponible plutôt qu'une largeur figée : évite le
     débordement sur les très petits écrans sans dépendre d'un palier précis. */
  flex: 0 1 200px;
  min-width: 64px;
}
.search-box input {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  min-width: 0;
  padding: 2px 0 2px 8px;
}
.search-box input::placeholder { color: var(--fg-dim); }

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--fg);
}
.profile-chip:hover, .profile-chip:focus { background: rgba(255,255,255,.08); }
.profile-chip-label {
  font-size: .92em;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar {
  width: 34px; height: 34px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: #6366f1;
  flex: none;
}

/* ------------------------------------------------------------------ Hero -- */

.hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--safe-x) 48px;
  margin-bottom: 8px;
  background-size: cover;
  background-position: center 20%;
  background-color: var(--bg-elevated);
}
.hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(11,11,15,.55) 45%, rgba(11,11,15,.15) 100%),
    linear-gradient(to right, rgba(11,11,15,.85), rgba(11,11,15,0) 60%);
}
.hero-inner { position: relative; z-index: 1; max-width: 640px; }
.hero h1 {
  font-size: 2.6em;
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -.02em;
}
.hero-meta {
  display: flex;
  align-items: center;
  color: var(--fg-muted);
  margin-bottom: 12px;
  font-size: .9em;
}
.hero-meta > * { margin-right: 14px; }
.hero p {
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0 0 22px;
  max-height: 4.5em;
  overflow: hidden;
}
.hero-actions { display: flex; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  margin-right: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-hover);
  color: var(--fg);
}
.btn:hover { background: #32323f; }
.btn-primary { background: var(--fg); color: #111; }
.btn-primary:hover { background: #fff; }
.btn-accent { background: var(--accent); color: var(--accent-fg); }

/* ---------------------------------------------------------------- Rangées -- */

.rows { padding: 0 0 80px; }

.row { margin-bottom: var(--row-gap); }
.row-head {
  display: flex;
  align-items: baseline;
  padding: 0 var(--safe-x);
  margin-bottom: 12px;
}
.row-head h2 {
  font-size: 1.15em;
  font-weight: 600;
  margin: 0 12px 0 0;
}
.row-head .row-source { color: var(--fg-dim); font-size: .8em; }

.row-scroller {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px var(--safe-x) 20px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Défilement au clic-glissé (voir enableDragScroll() dans app.js) : le
     curseur en forme de main indique que la souris peut « attraper » la
     rangée, sans gêner le défilement tactile natif. */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.row-scroller.dragging {
  cursor: grabbing;
  scroll-behavior: auto; /* un glissé en cours ne doit pas être amorti */
}
.row-scroller img { -webkit-user-drag: none; }
.row-scroller::-webkit-scrollbar { height: 6px; }
.row-scroller::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.row-scroller::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ Carte -- */

.card {
  flex: none;
  width: 165px;
  margin-right: 12px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: transform .16s ease;
}
body.tv .card { width: 210px; margin-right: 16px; }
.card:hover, .card:focus { transform: scale(1.06); z-index: 2; }

.card-art {
  position: relative;
  width: 100%;
  padding-top: 148%; /* ratio 2:3 sans aspect-ratio */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}
.card-art img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card-art .card-fallback {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--fg-dim);
  font-size: .85em;
  line-height: 1.3;
}

.card-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,.25);
}
.card-progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.card-title {
  margin-top: 8px;
  font-size: .88em;
  line-height: 1.3;
  color: var(--fg-muted);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card:hover .card-title, .card:focus .card-title { color: var(--fg); }
.card-sub { font-size: .78em; color: var(--fg-dim); }

/* --------------------------------------------------------------- Overlay -- */

.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 60;
  background: rgba(0,0,0,.75);
  overflow-y: auto;
  padding: 40px 16px;
}
.sheet {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.sheet-hero {
  position: relative;
  min-height: 280px;
  background-size: cover;
  background-position: center;
  background-color: #1c1c24;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.sheet-hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top, var(--bg-elevated) 4%, rgba(22,22,29,.3));
}
.sheet-hero-inner { position: relative; z-index: 1; width: 100%; }
.sheet-hero h2 { margin: 0 0 8px; font-size: 1.9em; letter-spacing: -.02em; }
.sheet-body { padding: 24px; }
.sheet-body p.synopsis { color: var(--fg-muted); line-height: 1.6; }

.close-x {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 1.2em;
  cursor: pointer;
}

.chips { display: flex; flex-wrap: wrap; margin: 10px 0 4px; }
.chip {
  font-size: .78em;
  color: var(--fg-muted);
  background: var(--bg-hover);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0 6px 6px 0;
}

.kv { display: flex; flex-wrap: wrap; margin-top: 14px; font-size: .88em; }
.kv > div { margin: 0 28px 10px 0; }
.kv dt { color: var(--fg-dim); font-size: .85em; margin-bottom: 2px; }
.kv dd { margin: 0; }

/* ------------------------------------------------------------- Flux/sources -- */

.streams { margin-top: 28px; }
.streams h3 { font-size: 1em; margin: 0 0 6px; }
.streams-summary {
  color: var(--fg-muted);
  font-size: .85em;
  margin-bottom: 14px;
  line-height: 1.5;
}

.ready-to-play {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.btn-play-ready { font-size: 1.05em; padding: 14px 28px; }
.ready-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.badge-lg {
  font-size: .9em;
  padding: 6px 14px;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.badge-quality {
  background: rgba(245, 158, 11, .16);
  color: var(--warn);
  border-color: rgba(245, 158, 11, .35);
}
.badge-lang {
  background: rgba(99, 102, 241, .18);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, .4);
}

.all-sources { margin-top: 16px; }

.stream {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.stream:hover { border-color: #3d3d4d; background: #101017; }
.stream[disabled] { cursor: not-allowed; opacity: .62; }
.stream-main { flex: 1; min-width: 0; }
.stream-name { font-weight: 600; margin-bottom: 2px; }
.stream-desc {
  color: var(--fg-muted);
  font-size: .84em;
  line-height: 1.45;
  word-break: break-word;
}
.stream-detail { color: var(--fg-dim); font-size: .8em; margin-top: 6px; line-height: 1.45; }
.stream-requires {
  color: var(--warn);
  font-size: .8em;
  margin-top: 4px;
  line-height: 1.45;
}
.stream-side { flex: none; margin-left: 14px; text-align: right; }

.badge {
  display: inline-block;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-direct { background: rgba(34,197,94,.16); color: var(--ok); }
.badge-probable { background: rgba(245,158,11,.16); color: var(--warn); }
.badge-unsupported { background: rgba(239,68,68,.16); color: var(--bad); }
.badge-external { background: rgba(99,102,241,.18); color: #a5b4fc; }
.badge-addon { background: var(--bg-hover); color: var(--fg-dim); margin-top: 6px; }

/* -------------------------------------------------------- Authentification -- */
/* Formulaire de connexion/création de compte (voir openAuthForm() dans app.js)
   et page de compte (couleur d'avatar, voir openAccountPage()). */

.avatar-picker { display: flex; gap: 10px; margin-top: 4px; }
.avatar-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.avatar-swatch.selected, .avatar-swatch:focus {
  border-color: var(--fg);
  outline: none;
}

.profile-form-sheet { max-width: 460px; }
.profile-form-hero { min-height: 0; padding: 24px 24px 0; }
.profile-form-hero h2 { margin: 0; font-size: 1.4em; }
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: .85em;
  color: var(--fg-muted);
  margin-top: 14px;
}
.form-label:first-child { margin-top: 0; }
.profile-form input[type=text],
.profile-form input[type=password] {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  outline: none;
  color: var(--fg);
}
.profile-form input[type=text]:focus,
.profile-form input[type=password]:focus { border-color: var(--accent); }

.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--fg-muted);
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- Admin -- */

.admin { padding: 24px var(--safe-x) 80px; max-width: 1000px; }
.admin h1 { font-size: 1.6em; margin: 0 0 4px; }
.admin > p.lead { color: var(--fg-muted); margin: 0 0 28px; line-height: 1.55; }
.admin section { margin-bottom: 40px; }
.admin h2 { font-size: 1.1em; margin: 0 0 12px; }

.add-form { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.add-form input[type=url], .add-form input[type=text] {
  flex: 1;
  min-width: 260px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin: 0 8px 8px 0;
  outline: none;
}
.add-form input:focus { border-color: var(--accent); }

.addon-item {
  display: flex;
  align-items: flex-start;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.addon-item.disabled { opacity: .55; }
.addon-logo {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--bg-hover);
  flex: none;
  margin-right: 14px;
  object-fit: contain;
}
.addon-main { flex: 1; min-width: 0; }
.addon-name { font-weight: 600; }
.addon-url {
  color: var(--fg-dim);
  font-size: .78em;
  word-break: break-all;
  margin-top: 2px;
}
.addon-tags { margin-top: 8px; display: flex; flex-wrap: wrap; }
.addon-actions { flex: none; margin-left: 14px; display: flex; align-items: center; }
.addon-actions button { margin-left: 8px; }

.btn-sm {
  padding: 7px 13px;
  font-size: .85em;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--fg);
  cursor: pointer;
}
.btn-sm:hover { background: #32323f; }
.btn-danger { border-color: rgba(239,68,68,.4); color: #fca5a5; }

.notice {
  border-left: 3px solid var(--warn);
  background: rgba(245,158,11,.08);
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: .9em;
}
.notice strong { color: var(--fg); }

.error-box {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  color: #fca5a5;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: .9em;
  line-height: 1.5;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  max-width: 88vw;
}

/* ---------------------------------------------------------------- Lecteur -- */

.player-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  background: #000;
}
.player-layer video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.player-chrome {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--safe-x);
  background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 22%, transparent 62%, rgba(0,0,0,.85));
  transition: opacity .25s ease;
}
.player-chrome.hidden { opacity: 0; pointer-events: none; }

.player-top { display: flex; align-items: center; }
.player-title { margin-left: 16px; font-size: 1.15em; font-weight: 600; }

.player-center {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  text-align: center;
  padding: 0 10%;
  line-height: 1.6;
}

/* Play/pause et ±10 s, au centre du lecteur — indépendant du flux haut/bas
   (`.player-chrome` est déjà `position: absolute`, donc ce centrage l'est
   par rapport à toute la zone vidéo, quelle que soit la hauteur du titre ou
   de la barre du bas). */
.player-center-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}

.player-bottom { width: 100%; }

.scrub {
  position: relative;
  height: 5px;
  background: rgba(255,255,255,.22);
  border-radius: 3px;
  margin-bottom: 14px;
  cursor: pointer;
}
.scrub-buffer, .scrub-played {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 3px;
}
.scrub-buffer { background: rgba(255,255,255,.3); width: 0; }
.scrub-played { background: var(--accent); width: 0; }
.scrub-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--accent);
}

.player-controls { display: flex; align-items: center; }
.player-controls .spacer { flex: 1; }
.player-controls .time { color: var(--fg-muted); font-size: .9em; }

.icon-btn {
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: 8px;
  width: 46px; height: 46px;
  margin-right: 10px;
  color: #fff;
  font-size: 1.05em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: rgba(255,255,255,.2); }

/* Variantes agrandies, réservées aux commandes centrales (play/pause, ±10 s) :
   plus visibles et plus faciles à viser, à la souris comme à la télécommande. */
.player-center-controls .icon-btn {
  background: rgba(0,0,0,.35);
  border-radius: 50%;
  margin-right: 0;
}
.player-center-controls .icon-btn:hover,
.player-center-controls .icon-btn:focus { background: rgba(0,0,0,.55); }
.icon-btn-lg { width: 60px; height: 60px; font-size: 1.3em; margin: 0 14px; }
.icon-btn-xl { width: 78px; height: 78px; font-size: 1.9em; }
/* Lecture déportée en cours (AirPlay actif) : voir
   webkitcurrentplaybacktargetiswirelesschanged dans player.js. */
.icon-btn.is-active { background: var(--accent); color: var(--accent-fg); }
.icon-btn.is-active:hover { background: var(--accent); }

.subtitle-picker { display: flex; align-items: center; font-size: .85em; color: var(--fg-muted); }
.subtitle-picker select {
  margin-left: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
}

video::cue {
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 1em;
  line-height: 1.4;
}

/* ------------------------------------------------------------- Responsive -- */

@media (max-width: 720px) {
  .hero { min-height: 46vh; padding-bottom: 28px; }
  .hero h1 { font-size: 1.8em; }
  .card { width: 122px; }
  .card-title { font-size: .8em; }
  .search-box { flex-basis: 110px; }
  .brand { margin-right: 14px; font-size: 1.2em; }
  .sheet-body, .sheet-hero { padding: 16px; }
  .overlay { padding: 0; }
  .sheet { border-radius: 0; border: none; min-height: 100vh; }
}

/* Téléphones étroits (≤ 400px de large, ex. iPhone SE en portrait) : encore
   un cran plus compact, et on laisse la barre du haut passer sur deux
   lignes plutôt que de comprimer la recherche jusqu'à l'illisible. */
@media (max-width: 400px) {
  html, body { font-size: 15px; }
  .brand { flex: 1 1 auto; margin-bottom: 8px; }
  .topbar nav { flex: 1 1 auto; margin-bottom: 8px; }
  .topbar .spacer { flex-basis: 100%; height: 0; min-width: 0; }
  .search-box { flex: 1 1 auto; margin-bottom: 8px; }
  .profile-chip-label { max-width: 90px; }
  .card { width: 104px; }
  .hero-inner { max-width: 100%; }
  .hero h1 { font-size: 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .row-scroller { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ Diagnostics -- */
/* Une rangée qui disparaît sans explication est le pire des comportements.
   Ces styles servent à dire à l'utilisateur POURQUOI il ne voit rien. */

.diagnostics {
  text-align: left;
  max-width: 780px;
  margin: 24px auto 28px;
}
.diagnostics-inline {
  margin: 0 var(--safe-x) 32px;
  max-width: none;
}
.diag-head { color: var(--fg-muted); font-size: .9em; margin-bottom: 10px; }

.diag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  border-left: 3px solid var(--border);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: .87em;
  line-height: 1.5;
}
.diag-error { border-left-color: var(--bad); }
.diag-empty { border-left-color: var(--warn); }
.diag-search-only { border-left-color: var(--info); }

.diag-name { font-weight: 600; margin-right: 12px; }
.diag-msg { color: var(--fg-muted); }