/* Thème « salle du château à la bougie » : fond de pierre et de bois sombre, parchemin pour ce qui se lit,
   encre rouge pour les personnages (rubriques), boutons de bois cerclés de bronze, sceau de cire pour l'action principale.
   Tout en CSS (grain = petit SVG en ligne), sans image à télécharger. */
:root {
  --bg: #17100a; --wood: #2a1c11; --wood-2: #3a2817; --line: #4a3520;
  --text: #efe2c6; --muted: #b39d7b; --warn: #e8a33d;
  --gold: #d9a441; --gold-2: #f2d48a; --bronze: #8a6331;
  --red: #8e1f1f; --red-2: #b02a2a;
  --parchment: #ead9b5; --ink: #2b1b10; --ink-muted: #6b5038; --rubric: #9a1c1c;
  --sel: rgba(217, 164, 65, .3);
  --caps: Cinzel, Georgia, serif;
  --book: "IM Fell English", Georgia, serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 17px/1.45 var(--book);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 170, 60, .14), transparent 55%),  /* lueur de torche */
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .6) 100%),     /* vignettage */
    var(--grain), var(--bg);
  background-attachment: fixed;
}
main { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
header { max-width: 760px; margin: 0 auto; padding: .4em 16px 0; text-align: center; }
header a { text-decoration: none; }
h1 { margin: .5em 0 0; }
/* Logo (tapisserie) : bords de pierre fondus dans le décor */
h1 img { display: block; width: 100%; height: auto;
         -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
         -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
         mask-composite: intersect; }
header::after { content: "⚜"; display: block; margin: .1em auto .7em; width: 60%; color: var(--bronze); font-size: 1.1rem;
                background: linear-gradient(var(--line), var(--line)) left center / 42% 1px no-repeat,
                            linear-gradient(var(--line), var(--line)) right center / 42% 1px no-repeat; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Boutons : bois sombre cerclé de bronze ; action principale en sceau de cire rouge à liseré d'or */
button {
  font: 600 14px/1.2 var(--caps); letter-spacing: .03em; color: var(--text); cursor: pointer;
  background: linear-gradient(var(--wood-2), #22160c); border: 1px solid var(--bronze); border-radius: 6px;
  padding: .55em .9em; min-height: 40px; box-shadow: inset 0 1px 0 rgba(255, 220, 160, .12), 0 1px 3px rgba(0, 0, 0, .5);
}
button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-2); }
button:disabled { opacity: .4; cursor: default; }
button.primary, .like[aria-pressed="true"] {
  color: var(--gold-2); border-color: var(--gold); text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  background: radial-gradient(circle at 35% 30%, var(--red-2), var(--red) 70%, #5c1212);
}
button[aria-pressed="false"] { opacity: .55; }
.like[aria-pressed="true"] { opacity: 1; }
button.busy { cursor: progress; opacity: .7; }
button.busy::after { content: " …"; }

/* Parchemin : ce qui se lit (champ de recherche, cartes) */
#q, .list li {
  color: var(--ink);
  background: radial-gradient(ellipse at center, transparent 55%, rgba(120, 80, 30, .3) 100%), var(--grain), var(--parchment);
}

/* Recherche et accueil */
#q { width: 100%; font: 1.2rem var(--book); padding: .65em 1em; border: 2px solid var(--bronze); border-radius: 8px;
     color-scheme: light; box-shadow: inset 0 2px 6px rgba(80, 50, 20, .35); }
#q::placeholder { color: var(--ink-muted); font-style: italic; }
#count { min-height: 1.4em; margin: .7em 0; font: 13px var(--caps); color: var(--muted); }
#count:empty { display: none; }  /* accueil : pas de vide sous la recherche */
.tabs { display: flex; gap: 8px; margin: 1em 0 .6em; }
.tabs button { white-space: nowrap; }
@media (max-width: 480px) { .tabs { gap: 6px; } .tabs button { padding: .55em .6em; font-size: 13px; } }
#random { margin-left: auto; }
#cards-empty { font-style: italic; text-align: center; }
/* Onglet « Épisodes » : livres, épisodes dépliables (parchemin une fois ouverts), répliques cliquables */
.book h2 { font: 700 16px var(--caps); color: var(--gold); margin: 1.2em 0 .4em; border-bottom: 1px solid var(--line); padding-bottom: .2em; }
.ep { margin: 4px 0; border-radius: 6px; }
.ep summary { cursor: pointer; padding: 6px 4px; font: 600 14px var(--caps); }
.ep summary .n { font: 13px var(--book); font-style: italic; }
.ep[open] { color: var(--ink); background: radial-gradient(ellipse at center, transparent 55%, rgba(120, 80, 30, .3) 100%), var(--grain), var(--parchment);
            box-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.ep[open] summary { padding: 8px 10px; border-bottom: 1px solid rgba(110, 75, 35, .35); }
.ep[open] summary .n { color: var(--ink-muted); }
.replies { list-style: none; margin: 0; padding: 4px 10px 10px; }
.replies li { border-radius: 4px; transition: background 1.2s; }
.replies li.here { background: rgba(217, 164, 65, .45); transition: none; }  /* réplique qu'on éditait */
.replies .line { padding: 4px 0; font-size: 15px; }
.replies .line:hover:not(:disabled) { color: var(--ink); }
.at { display: inline-block; min-width: 4.2em; font: 11px var(--caps); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px; margin-bottom: 12px; cursor: pointer;
           border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(110, 75, 35, .35); }
.thumb { position: relative; align-self: start; }
.thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #3a2817;
             border: 1px solid var(--bronze); }
.tc { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 3px; font: 11px var(--caps); color: var(--text);
      background: rgba(23, 16, 10, .8); }
.meta { font: 12px var(--caps); color: var(--ink-muted); margin-bottom: 2px; }
button.line, .line { display: block; width: 100%; min-height: 0; padding: 2px 0; text-align: left; font: inherit; letter-spacing: normal;
                     background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; text-shadow: none; }
.line.ctx { color: var(--ink-muted); font-size: 15px; }
button.line:hover:not(:disabled) { color: var(--ink); text-decoration: underline dotted var(--bronze); text-underline-offset: 3px; }  /* pas le doré des boutons de bois : illisible sur parchemin */
.who { font: 700 .8em var(--caps); color: var(--rubric); margin-right: .4em; }
.hit .who { text-transform: uppercase; }
mark { background: linear-gradient(transparent 55%, rgba(217, 164, 65, .65) 55%); color: inherit; }
.counts { font: 12px var(--caps); color: var(--ink-muted); margin-top: 3px; }
.viewer { grid-column: 1 / -1; cursor: default; }
.viewer video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 4px;
                border: 3px double var(--gold); }
@media (max-width: 480px) { .list li { grid-template-columns: 96px 1fr; } }

/* Éditeur */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.topbar button { flex: none; white-space: nowrap; }
#ep-title { font: 13px var(--caps); color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ep-title:hover { color: var(--gold-2); text-decoration: underline; }
.player { position: relative; background: #000; border: 3px double var(--gold); border-radius: 6px; overflow: hidden;
          aspect-ratio: 16 / 9; box-shadow: 0 6px 22px rgba(0, 0, 0, .7); }
video { display: block; width: 100%; height: 100%; }
#subtitle { position: absolute; left: 5%; right: 5%; bottom: 6%; text-align: center; pointer-events: none; color: #fff6e0;
            font: clamp(15px, 3.8vw, 23px) var(--book); text-shadow: 0 0 4px #000, 0 0 2px #000, 0 0 1px #000; }
/* Barre de contrôle sur la vidéo : visible en pause, au survol, au toucher ou au clavier (classe .show posée par app.js) */
.overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 24px 10px 10px;
           background: linear-gradient(transparent, rgba(10, 6, 3, .75)); opacity: 0; pointer-events: none; transition: opacity .2s; }
.player.show .overlay, .player.paused .overlay, .player:has(:focus-visible) .overlay { opacity: 1; pointer-events: auto; }
.overlay button { min-height: 36px; padding: .3em .75em; background: rgba(42, 28, 17, .7); }
#subtitle { transition: bottom .2s; }
.player.show #subtitle, .player.paused #subtitle, .player:has(:focus-visible) #subtitle { bottom: 64px; }  /* au-dessus de la barre */
#loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--caps); background: rgba(10, 6, 3, .6); }
.row, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.row { justify-content: space-between; }
#times { margin: 6px 0 0; text-align: right; font: 13px var(--caps); color: var(--muted); font-variant-numeric: tabular-nums; }
#fine { margin: 12px 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(42, 28, 17, .5); }
#fine summary { cursor: pointer; padding: 8px 0; font: 14px var(--caps); color: var(--muted); }
.actions button { flex: 1 1 80px; }  /* ♥ + ⤓ MP4 + ⤓ MP3 (+ Partager) sur une ligne dès 320 px */
.actions .like, .actions .edit, .actions .delete { flex: none; }
.actions .delete { display: grid; place-items: center; padding: .3em .5em; color: var(--ink-muted); background: none;  /* discret : encre sur parchemin */
                   border-color: transparent; box-shadow: none; opacity: .75; }
.actions .delete:hover:not(:disabled) { color: var(--rubric); opacity: 1; border-color: transparent; }
.actions .edit { font-size: 18px; padding: .3em .75em; }
.nudge span { display: flex; align-items: center; gap: 6px; font: 13px var(--caps); }
.row.nudge button { flex: none; white-space: nowrap; padding: .45em .6em; }
.keys { font-size: 13px; font-style: italic; }
.hint { font-size: 14px; font-style: italic; margin: 0; }
@media (hover: none) { .keys { display: none; } }
@media (max-width: 480px) { .row button { flex: 1 1 0; font-size: 13px; } }

/* Frise : bandeau de bois, répliques en étiquettes de parchemin, sélection dorée */
#timeline { position: relative; margin-top: 12px; user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer; }
#lane { position: relative; height: 54px; background: var(--grain), var(--wood); border: 1px solid var(--line); border-bottom: 0;
        border-radius: 6px 6px 0 0; overflow: hidden; }
.block { position: absolute; top: 5px; bottom: 5px; padding: 2px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
         font-size: 12px; color: var(--ink); background: var(--parchment); border-left: 3px solid var(--bronze); border-radius: 2px;
         opacity: .75; }
.block b { display: block; font: 700 10px var(--caps); color: var(--rubric); }
.block.in { opacity: 1; background: #f3e2b4; border-left-color: var(--rubric); }
#track { position: relative; height: 40px; background: #110b06; border: 1px solid var(--line); border-radius: 0 0 6px 6px;
         box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7); }
#sel { position: absolute; top: 0; bottom: 0; background: var(--sel); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.handle { position: absolute; top: -8px; bottom: -8px; width: 28px; cursor: ew-resize; touch-action: none; }
.handle::after { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 8px; border-radius: 3px;
                 background: linear-gradient(90deg, var(--bronze), var(--gold-2), var(--bronze)); box-shadow: 0 0 4px rgba(0, 0, 0, .8); }
#h-start { left: -14px; }
#h-end { right: -14px; }
#playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff6e0; pointer-events: none;
            box-shadow: 0 0 4px rgba(255, 220, 160, .8); }