/* Veilleur — « la lanterne du veilleur » : éditorial nocturne.
   Encre bleu-noir, papier chaud sous lampe, accent ambre, une couleur par thème.
   Mobile-first, sombre par défaut (brief §8). Motion : transform/opacity only,
   ease-out punchy, < 300 ms, reduced-motion respecté. */

:root {
  /* encre & papier */
  --bg: #0c0f17;
  --surface: #131826;
  --surface-2: #1b2233;
  --line: #232b40;
  --ink: #e9e4d8;          /* blanc cassé chaud — papier sous lampe */
  --muted: #8d93a5;
  --faint: #5c6375;
  /* la lanterne */
  --amber: #e8a33d;
  --amber-soft: rgba(232, 163, 61, .14);
  --danger: #e06c75;
  /* thèmes — fonctionnels, toujours doublés d'un label texte */
  --th-ia: #6fb7ff;
  --th-graphisme: #e87fb4;
  --th-geopolitique: #d97757;
  --th-volley: #85c88a;
  --th-volley-analytics: #5fd3c4;
  --th-default: #9aa3b8;
  /* typo */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  /* motion (emil) */
  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --nav-h: calc(58px + env(safe-area-inset-bottom));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--line) transparent; }
body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, #171d30 0%, var(--bg) 55%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  padding-bottom: var(--nav-h);
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
header {
  padding: 1.1rem 1.1rem .4rem;
  max-width: 680px; margin: 0 auto;
}
.brand { display: flex; align-items: baseline; gap: .55rem; }
.brand-mark { width: 22px; height: 22px; color: var(--amber); align-self: center; flex: none; }
h1 {
  font: 600 1.45rem/1 var(--serif);
  letter-spacing: .01em; margin: 0;
}
.tagline {
  margin: .15rem 0 0 calc(22px + .55rem);
  font: 400 .78rem/1.4 var(--mono);
  color: var(--faint); font-style: italic; letter-spacing: .02em;
}
.screen-title {
  font: 600 1.2rem/1.2 var(--serif);
  margin: .2rem 0 1rem;
}

/* ---------- navigation basse (pouce, 44px+, SVG + label) ---------- */
nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; gap: .4rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: .3rem .6rem calc(.3rem + env(safe-area-inset-bottom));
}
nav button {
  flex: 1; max-width: 150px; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: none; border: none; border-radius: 12px;
  color: var(--faint); cursor: pointer;
  font: 500 .68rem/1 var(--sans); letter-spacing: .03em;
  transition: color 150ms ease, transform 120ms var(--out);
  touch-action: manipulation;
}
nav button svg { width: 21px; height: 21px; }
nav button:active { transform: scale(0.94); }
nav button.active { color: var(--amber); }

/* ---------- structure ---------- */
main { padding: .5rem 1.1rem 1.5rem; max-width: 680px; margin: 0 auto; }

.filters {
  display: flex; gap: .8rem; align-items: center;
  margin: .4rem 0 1.1rem;
}
.filters select { flex: 1; min-width: 0; }
.range {
  display: flex; align-items: center; gap: .5rem; flex: 1;
  color: var(--muted); font: 500 .72rem/1 var(--mono);
  white-space: nowrap;
}
.range input { flex: 1; min-width: 60px; }

/* ---------- contrôles ---------- */
select, input, textarea {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .75rem; font: 400 .92rem/1.4 var(--sans);
  min-height: 44px;
}
textarea { min-height: 4.2rem; resize: vertical; }
input[type="range"] { accent-color: var(--amber); min-height: auto; border: none; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 10px; }

button { cursor: pointer; touch-action: manipulation; }
form button, #load-more {
  background: var(--amber); color: #14100a;
  font: 600 .9rem/1 var(--sans);
  border: none; border-radius: 10px;
  padding: .75rem 1rem; min-height: 44px;
  transition: transform 140ms var(--out), filter 150ms ease;
}
form button:active, #load-more:active { transform: scale(0.97); }
#load-more.ghost {
  width: 100%; margin-top: 1rem;
  background: none; color: var(--muted);
  border: 1px dashed var(--line);
}
@media (hover: hover) and (pointer: fine) {
  form button:hover { filter: brightness(1.08); }
  #load-more.ghost:hover { color: var(--ink); border-color: var(--faint); }
}

/* ---------- cartes (l'objet éditorial central) ---------- */
.cards { display: flex; flex-direction: column; gap: .8rem; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .95rem 1rem .8rem;
  /* entrée en cascade — décorative. État de base VISIBLE : si l'animation ne
     joue pas (lecteur, vieux moteur), le contenu est là. `backwards` applique
     l'état from pendant le délai. */
  animation: card-in 340ms var(--out) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } }

/* liseré thème à gauche — doublé du label texte (jamais couleur seule) */
.card::before {
  content: ""; position: absolute; inset: 12px auto 12px 0;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--th, var(--th-default));
  opacity: .85;
}
.card.signal { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }

.card .meta {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font: 500 .68rem/1 var(--mono);
  color: var(--faint); letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.meta .theme-tag { color: var(--th, var(--th-default)); }
.meta .signal-tag {
  color: var(--amber);
  display: inline-flex; align-items: center; gap: .25rem;
}
.meta .signal-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px 1px var(--amber-soft), 0 0 3px var(--amber);
}
.meta .score { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta .score.high { color: var(--amber); }

.card h2, .card h3 {
  font: 600 1.06rem/1.32 var(--serif);
  letter-spacing: .005em; margin: 0 0 .35rem;
}
.card h3 a, .card h2 a { color: var(--ink); text-decoration: none; }
.card h3 a:visited, .card h2 a:visited { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .card h3 a:hover, .card h2 a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
}

.card .summary {
  font: 400 .9rem/1.55 var(--sans);
  color: var(--muted); margin: 0 0 .55rem;
}

.card .foot {
  display: flex; align-items: center; gap: .55rem;
  font: 400 .74rem/1 var(--mono); color: var(--faint);
}
.foot .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot .sep { color: var(--line); }
.foot time { flex: none; }

/* signet — SVG, cible 44px, feedback immédiat */
.save-btn {
  margin-left: auto; flex: none;
  width: 44px; height: 44px; margin-right: -10px; margin-bottom: -8px;
  display: grid; place-items: center;
  background: none; border: none; border-radius: 12px;
  color: var(--faint);
  transition: color 150ms ease, transform 140ms var(--out);
}
.save-btn svg { width: 19px; height: 19px; }
.save-btn:active { transform: scale(0.88); }
.save-btn[aria-pressed="true"] { color: var(--amber); }
@media (hover: hover) and (pointer: fine) {
  .save-btn:hover { color: var(--ink); }
  .save-btn[aria-pressed="true"]:hover { color: var(--amber); }
}

.card textarea.note { width: 100%; margin-top: .6rem; font-size: .85rem; }

/* ---------- réglages ---------- */
details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: .7rem 1rem; margin-bottom: .8rem;
}
summary {
  cursor: pointer; padding: .3rem 0;
  font: 600 1rem/1.2 var(--serif);
  list-style: none;
}
summary::after { content: "+"; float: right; color: var(--faint); font: 500 1rem/1.2 var(--mono); transition: transform 180ms var(--out); }
details[open] summary::after { transform: rotate(45deg); }

ul.plain { list-style: none; margin: .6rem 0; padding: 0; }
ul.plain li {
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font: 400 .86rem/1.4 var(--sans);
}
ul.plain li:last-child { border-bottom: none; }
li .type { color: var(--faint); font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
li .errcount { color: var(--danger); font: 500 .7rem/1 var(--mono); }
li .err { color: var(--danger); font-size: .74rem; width: 100%; opacity: .85; }
li .toggle { margin-left: auto; font: 400 .74rem/1 var(--mono); color: var(--muted); display: flex; align-items: center; gap: .35rem; min-height: 44px; cursor: pointer; }
li .toggle input { accent-color: var(--amber); width: 16px; height: 16px; min-height: auto; }

form { display: flex; flex-direction: column; gap: .55rem; margin: .6rem 0 .3rem; }
.hint { color: var(--faint); font-size: .76rem; line-height: 1.5; }

/* ---------- états ---------- */
.empty {
  color: var(--faint); text-align: center; padding: 3rem 0;
  font: 400 .92rem/1.7 var(--serif); font-style: italic;
}

#toast {
  position: fixed; bottom: calc(var(--nav-h) + .8rem); left: 50%;
  z-index: 50;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
  padding: .6rem 1.1rem; border-radius: 99px;
  font: 500 .84rem/1.3 var(--sans);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  opacity: 1; transform: translateX(-50%) translateY(0);
  transition: opacity 220ms ease, transform 220ms var(--out);
  @starting-style { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* ---------- accessibilité motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .card { animation-duration: 1ms; animation-delay: 0ms; }
  nav button:active, form button:active, .save-btn:active, #load-more:active { transform: none; }
  #toast { transition-duration: 1ms; }
}

/* ---------- écran large ---------- */
@media (min-width: 768px) {
  body { font-size: 16.5px; }
  main, header { max-width: 720px; }
  .cards { gap: .9rem; }
  .card { padding: 1.1rem 1.25rem .9rem; }
}