/* =========================================================================
   LanorTrad — Améliorations : halo couleur, favoris, skeleton, ⌘K, bento,
   OLED, transitions partagées (View Transitions), rail reprise.
   ========================================================================= */

/* ---------- Thème OLED (noir pur) ---------- */
:root[data-theme="oled"] {
  --bg-0: #000; --bg-1: #000; --bg-2: #07070c; --bg-3: #0e0e18;
  --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.12);
  --glass: rgba(10,10,16,.6); --glass-2: rgba(16,16,26,.7);
}
:root[data-theme="oled"] .bg-blob { opacity: .32; }

/* ---------- Chip de rang « Aura » (forum, commentaires, profil) ---------- */
.lt-rank { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:.64rem; letter-spacing:.02em; line-height:1.7; vertical-align:middle; border:1px solid currentColor; }
.lt-rank b { font-weight:800; opacity:.7; }
.lt-rank::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }
.lt-rank.r-etincelle { color:#9aa3b2; background:rgba(154,163,178,.10); border-color:rgba(154,163,178,.30); }
.lt-rank.r-lueur     { color:#eab308; background:rgba(234,179,8,.10);  border-color:rgba(234,179,8,.30); }
.lt-rank.r-flamme    { color:#f97316; background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.35); }
.lt-rank.r-brasier   { color:#ef4444; background:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.35); }
.lt-rank.r-aurore    { color:#ec4899; background:rgba(236,72,153,.13); border-color:rgba(236,72,153,.40); }
.lt-rank.r-astre     { color:#f5c842; background:rgba(245,200,66,.14); border-color:rgba(245,200,66,.5); box-shadow:0 0 12px -3px rgba(245,200,66,.6); }

/* ---------- Profil : vitrine XP / stats / succès ---------- */
.fo-xp { margin:18px 0 6px; }
.fo-xp-head { display:flex; justify-content:space-between; gap:12px; font-size:.78rem; color:var(--txt-mut); margin-bottom:6px; }
.fo-xp-track { height:8px; border-radius:999px; background:var(--bg-2); overflow:hidden; }
.fo-xp-fill { height:100%; border-radius:999px; background:var(--grad); transition:width .5s var(--ease, ease); }
.fo-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:16px 0; }
.fo-stat { background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.fo-stat b { display:block; font-family:var(--font-display); font-weight:800; font-size:1.4rem; line-height:1.1; }
.fo-stat span { font-size:.74rem; color:var(--txt-mut); }
.fo-ach { margin:20px 0; }
.fo-ach h3 { display:flex; align-items:baseline; gap:8px; }
.fo-ach-count { font-size:.8rem; color:var(--txt-mut); font-weight:500; }
.fo-ach-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(94px,1fr)); gap:10px; margin-top:12px; }
.fo-ach-tile { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:12px 8px; border-radius:12px; border:1px solid var(--line); background:var(--glass); }
.fo-ach-tile.off { opacity:.42; filter:grayscale(.7); }
.fo-ach-tile.on { border-color:color-mix(in srgb, var(--violet) 45%, transparent); background:color-mix(in srgb, var(--violet) 10%, var(--glass)); }
.fo-ach-ico { font-size:1.55rem; line-height:1; }
.fo-ach-name { font-size:.72rem; color:var(--txt); line-height:1.25; }

/* ---------- Cosmétiques : couleurs de pseudo ---------- */
.lt-nc-amber  { color:#eab308 !important; }
.lt-nc-rose   { color:#ec4899 !important; }
.lt-nc-violet { color:#a855f7 !important; }
.lt-nc-teal   { color:#14b8a6 !important; }
.lt-nc-gold   { color:#f5c842 !important; text-shadow:0 0 10px rgba(245,200,66,.45); }
.lt-nc-aurora { background:linear-gradient(90deg,#a855f7,#ec4899,#f5c842,#a855f7); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:lt-aurora 6s linear infinite; }
@keyframes lt-aurora { to { background-position:300% 0; } }

/* ---------- Cosmétiques : cadres d'avatar ---------- */
.lt-fr-lueur  { box-shadow:0 0 0 2px #eab308, 0 0 8px -1px #eab308 !important; }
.lt-fr-flamme { box-shadow:0 0 0 2px #f97316, 0 0 10px -1px #f97316 !important; }
.lt-fr-aurore { box-shadow:0 0 0 2px #ec4899, 0 0 12px -1px #a855f7 !important; }
.lt-fr-astre  { box-shadow:0 0 0 2px #f5c842, 0 0 14px -2px #f5c842 !important; }

/* ---------- Couronne : top 3 du classement de la semaine passée ---------- */
.lt-crown { margin-left:4px; font-size:.95em; vertical-align:middle; cursor:help;
  filter:drop-shadow(0 0 6px rgba(245,200,66,.8)); }

/* ---------- Toast de succès « façon jeu vidéo » ---------- */
.toast .lt-ach-toast { display:flex; align-items:center; gap:10px; text-align:left; }
.lt-ach-cup { font-size:1.35rem; filter:drop-shadow(0 0 8px rgba(245,200,66,.75)); }
.lt-ach-toast b { display:block; font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; color:#f5c842; }
.lt-ach-toast i { font-style:normal; font-weight:600; }

/* ---------- Célébration de montée de rang (overlay plein écran) ---------- */
.lt-rankup { position:fixed; inset:0; z-index:4000; display:grid; place-items:center; padding:20px;
  background:rgba(8,8,18,.8); backdrop-filter:blur(6px); opacity:0; transition:opacity .45s var(--ease);
  --aura:#a855f7; overflow:hidden; }
.lt-rankup.in { opacity:1; }
.lt-rankup.r-etincelle { --aura:#9aa3b2; }
.lt-rankup.r-lueur     { --aura:#eab308; }
.lt-rankup.r-flamme    { --aura:#f97316; }
.lt-rankup.r-brasier   { --aura:#ef4444; }
.lt-rankup.r-aurore    { --aura:#ec4899; }
.lt-rankup.r-astre     { --aura:#f5c842; }
.lt-rankup-halo { position:absolute; width:min(560px, 120vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--aura) 36%, transparent), transparent 65%);
  animation:lt-halo 3.2s ease-in-out infinite; }
@keyframes lt-halo { 50% { transform:scale(1.12); opacity:.75; } }
.lt-rankup-card { position:relative; text-align:center; transform:translateY(16px) scale(.95);
  transition:transform .5s var(--ease-back); }
.lt-rankup.in .lt-rankup-card { transform:none; }
.lt-rankup-eyebrow { font-family:var(--font-display); font-weight:800; font-size:.78rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--aura); margin-bottom:8px; }
.lt-rankup-name { font-family:var(--font-display); font-weight:800; line-height:1.05;
  font-size:clamp(2.4rem, 9vw, 4.4rem);
  background:linear-gradient(135deg, #fff 20%, var(--aura)); -webkit-background-clip:text;
  background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb, var(--aura) 55%, transparent)); }
.lt-rankup-lvl { color:var(--txt-soft); margin:8px 0 24px; }
.lt-rankup-conf i { position:absolute; top:-24px; left:calc(4% + var(--i) * 5.2%); width:8px; height:14px;
  border-radius:2px; background:var(--aura); opacity:.9;
  animation:lt-conf 2.9s linear infinite; animation-delay:calc(var(--i) * -.37s); }
.lt-rankup-conf i:nth-child(2n) { background:#fff; opacity:.55; height:10px; }
.lt-rankup-conf i:nth-child(3n) { width:6px; height:6px; border-radius:50%; }
@keyframes lt-conf { to { transform:translateY(108vh) rotate(680deg); } }
/* Mode Fluidité « léger » + préférence système : pas d'animations décoratives. */
.lt-rankup.lite .lt-rankup-halo { animation:none; }
@media (prefers-reduced-motion: reduce) {
  .lt-rankup-halo, .lt-rankup-conf i { animation:none; }
  .lt-rankup-conf { display:none; }
}

/* ---------- Barre de progression de lecture sur les cartes ---------- */
.m-card .card-prog { height:4px; border-radius:999px; background:rgba(255,255,255,.13); overflow:hidden; margin-top:9px; }
.m-card .card-prog i { display:block; height:100%; border-radius:999px; background:var(--grad); }

/* ---------- Preuve sociale : compteur de vues ---------- */
.m-card .views { display:inline-flex; align-items:center; gap:3px; color: var(--txt-mut); font-size:.74rem; margin-left:auto; }

/* ---------- Sélecteur de cosmétiques (profil) ---------- */
.fo-cosmetics { margin:18px 0; }
.fo-cos-group { margin-bottom:14px; }
.fo-cos-group h4 { font-size:.85rem; color:var(--txt-mut); margin-bottom:8px; }
.fo-cos-opts { display:flex; flex-wrap:wrap; gap:8px; }
.fo-cos-opt { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--glass); cursor:pointer; font-size:.8rem; color:var(--txt); }
.fo-cos-opt:hover { border-color:color-mix(in srgb,var(--violet) 45%,transparent); }
.fo-cos-opt.on { border-color:var(--violet); background:color-mix(in srgb,var(--violet) 12%,var(--glass)); }
.fo-cos-opt.locked { opacity:.42; cursor:not-allowed; }
.fo-cos-opt .lock { font-size:.72rem; opacity:.8; }
.fo-cos-sw { width:14px; height:14px; border-radius:50%; }

/* ---------- Halo couleur extrait de la couverture ---------- */
.card-glow {
  position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--accent, #a855f7) 55%, transparent), transparent 70%);
}
.m-card .inner:hover .card-glow { opacity: .9; }
.m-card .inner:hover { box-shadow: var(--shadow-card), 0 18px 50px -18px color-mix(in srgb, var(--accent, #a855f7) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent, #a855f7) 45%, transparent); border-color: color-mix(in srgb, var(--accent, #a855f7) 50%, transparent); }
.m-card .badge.on { background: color-mix(in srgb, var(--accent, #22c55e) 85%, #fff); }
.m-card .meta .chip { background: color-mix(in srgb, var(--accent, #a855f7) 26%, transparent); color: #fff; }

/* ---------- Bouton « Suivre » (coin de carte) ---------- */
.follow-btn {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(7,7,13,.55); border: 1px solid var(--line-strong); backdrop-filter: blur(8px);
  color: #fff; transition: transform .3s var(--ease-back), background .25s, color .25s, border-color .25s;
}
.follow-btn svg { transition: transform .25s; }
.follow-btn:hover { transform: scale(1.15); }
.follow-btn.on { background: color-mix(in srgb, var(--accent, #a855f7) 24%, transparent); border-color: color-mix(in srgb, var(--accent, #a855f7) 60%, transparent); color: color-mix(in srgb, var(--accent, #a855f7) 92%, #fff); }
.follow-btn.on svg { fill: currentColor; }
.follow-btn.pop { animation: favPop .45s var(--ease-back); }
@keyframes favPop { 30% { transform: scale(1.4); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }

/* ---------- Drapeaux de carte (statut + « Nouveau ») ---------- */
.m-card .card-flags { position: absolute; top: 10px; left: 10px; z-index: 4; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.m-card .card-flags .badge { position: static; top: auto; left: auto; }
.m-card .badge.new {
  background: var(--grad); color: #fff; border: none;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent, #a855f7) 80%, transparent);
}
.m-card .badge.new::before { content: "✦ "; }
@media (prefers-reduced-motion: no-preference) {
  .m-card .badge.new { animation: newGlow 2.6s ease-in-out infinite; }
}
@keyframes newGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }

/* ---------- Bouton « Suivre » (fiche série) ---------- */
.follow-toggle .bicon { transition: fill .25s, stroke .25s, transform .25s; }
.follow-toggle.on { color: var(--accent, #a855f7); border-color: color-mix(in srgb, var(--accent, #a855f7) 50%, transparent); }
.follow-toggle.on .bicon { fill: currentColor; }
.follow-toggle.pop { animation: favPop .45s var(--ease-back); }

/* ---------- Pastille « nouveautés » dans la navigation ---------- */
.nav-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 6px; border-radius: 999px; background: var(--grad); color: #fff;
  font-size: .66rem; font-weight: 800; font-family: var(--font-display); line-height: 1; vertical-align: middle;
}
.nav-badge[hidden] { display: none; }
.d-link .nav-badge { margin-left: 8px; }

/* Bouton « lien » (ex. « Tout marquer comme vu ») rendu comme un <a class="link"> */
button.link { background: none; border: none; cursor: pointer; font: inherit; }
button.link[hidden] { display: none; }

/* ---------- Navigation radiale : bouton rond + bulles en éventail ---------- */
/* La place pour le bouton flottant est intégrée AU FOOTER (voir components.css)
   afin que son fond remplisse la zone, sans laisser de bande vide sous le footer.
   Les pages sans footer (lecteur = minimal) n'en ont pas besoin. */
.bg-fx, .bg-grain { bottom: 0; }

.radial-nav {
  position: fixed; left: 50%; margin-left: -32px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 64px; height: 64px; z-index: 200;   /* pas de transform : le voile fixed couvrirait sinon seulement le bouton */
}
/* Voile plein écran derrière les bulles */
.rn-scrim {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(5,5,12,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.radial-nav.open .rn-scrim { opacity: 1; visibility: visible; }

/* Bouton rond central */
.rn-toggle {
  position: absolute; inset: 0; z-index: 3; border-radius: 50%;
  display: grid; place-items: center; color: #fff; cursor: pointer;
  background: var(--grad); border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px -8px rgba(124,58,237,.7), 0 4px 12px rgba(0,0,0,.4);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.rn-toggle:hover { transform: scale(1.06); }
.rn-toggle:active { transform: scale(.94); }
.rn-ico { position: absolute; display: grid; place-items: center; transition: opacity .25s var(--ease), transform .35s var(--ease); }
.rn-ico-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.radial-nav.open .rn-ico-open { opacity: 0; transform: rotate(90deg) scale(.5); }
.radial-nav.open .rn-ico-close { opacity: 1; transform: none; }

/* Bulles (positionnées sur un arc via --x / --y calculés en JS) */
.rn-items { position: absolute; inset: 0; z-index: 2; --rn-size: clamp(46px, 12.2vw, 56px); }
.rn-item {
  position: absolute; left: 50%; top: 50%; width: var(--rn-size); height: var(--rn-size); margin: calc(var(--rn-size) / -2);
  border-radius: 50%; display: grid; place-items: center; color: var(--txt-soft);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 24px -10px rgba(0,0,0,.7);
  opacity: 0; pointer-events: none; transform: translate(0, 0) scale(.3);
  transition: transform .42s cubic-bezier(.34,1.5,.5,1), opacity .24s ease, color .2s, border-color .2s, background .2s;
  transition-delay: calc((var(--n) - var(--i)) * 13ms);   /* fermeture : de l'extérieur vers le centre */
}
.radial-nav.open .rn-item {
  opacity: 1; pointer-events: auto;
  transform: translate(var(--x, 0), var(--y, 0)) scale(1);
  transition-delay: calc(var(--i) * 30ms);                /* ouverture : du centre vers l'extérieur */
}
.rn-item:hover, .rn-item:focus-visible { color: var(--txt); border-color: var(--violet); background: var(--bg-2); outline: none; }
.rn-item:active { transform: translate(var(--x, 0), var(--y, 0)) scale(.9); }
.rn-item svg { width: 22px; height: 22px; }
.rn-item .theme-ico { font-size: 1.2rem; line-height: 1; }
/* Seule la page active (violet) ressort. */
.rn-item.current { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 10px 26px -8px rgba(124,58,237,.7); }
.rn-badge { position: absolute; top: 3px; right: 5px; }

/* Légende du nom (en haut), affichée au survol/appui d'une bulle */
.rn-caption {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 30px); left: 50%; z-index: 2;
  padding: 9px 22px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--txt);
  background: color-mix(in srgb, var(--bg-2) 86%, transparent); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translate(-50%, -10px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.radial-nav.open .rn-caption { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .rn-item, .radial-nav.open .rn-item { transition: opacity .2s, transform .2s; transition-delay: 0s !important; }
}

/* Bouton de recherche flottant : toujours visible, en pair avec le menu radial */
.search-fab {
  position: fixed; right: 18px; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%; z-index: 190;
  display: grid; place-items: center; cursor: pointer; color: var(--txt-soft);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 24px -10px rgba(0,0,0,.7);
  transition: transform .25s var(--ease), color .2s, border-color .2s, background .2s, opacity .2s;
}
.search-fab svg { width: 20px; height: 20px; }
.search-fab:hover, .search-fab:focus-visible { color: var(--txt); border-color: var(--violet); background: var(--bg-2); transform: scale(1.06); outline: none; }
.search-fab:active { transform: scale(.94); }
/* S'efface pendant que le menu radial est ouvert */
body.rn-open .search-fab { opacity: 0; pointer-events: none; }

/* ---------- Zones de tap confortables (écrans tactiles) ---------- */
@media (pointer: coarse) {
  .icon-btn { min-width: 44px; min-height: 44px; }
  .follow-btn { width: 44px; height: 44px; }
  .r-fab .fab, .r-dock-chap { min-width: 44px; min-height: 44px; }
  .seg button, .range-chip, .chap-item { min-height: 44px; }
}

/* ---------- Skeleton + fondu d'image ---------- */
.cover.skeleton { position: relative; }
.cover.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
img[data-fade] { opacity: 0; transition: opacity .55s var(--ease); }
img[data-fade].loaded { opacity: 1; }

/* ---------- Command palette ⌘K ---------- */
.cmdk-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(4,4,12,.62); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: .22s; display: grid; place-items: start center; padding-top: 12vh; }
.cmdk-overlay.open { opacity: 1; visibility: visible; }
.cmdk { width: min(92vw, 640px); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 40px 100px -30px #000; overflow: hidden; transform: translateY(-16px) scale(.98); transition: transform .3s var(--ease-back); }
.cmdk-overlay.open .cmdk { transform: none; }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmdk-input svg { color: var(--txt-mut); flex-shrink: 0; }
.cmdk-input input { flex: 1; background: none; border: none; outline: none; color: var(--txt); font-size: 1.1rem; }
.cmdk-input kbd { font-family: var(--font-body); font-size: .7rem; padding: 3px 7px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line); color: var(--txt-mut); }
.cmdk-list { max-height: 56vh; overflow-y: auto; padding: 8px; }
.cmdk-sec { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--txt-mut); padding: 10px 12px 6px; }
.cmdk-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.cmdk-item:hover, .cmdk-item.active { background: var(--grad-soft); }
.cmdk-item img { width: 40px; height: 56px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.cmdk-item .ci-t { font-weight: 600; }
.cmdk-item .ci-m { font-size: .8rem; color: var(--txt-mut); }
.cmdk-item .ci-go { margin-left: auto; color: var(--txt-mut); font-size: .8rem; }
.cmdk-recent { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 2px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); font-size: .85rem; color: var(--txt-soft); }
.cmdk-recent:hover { border-color: rgba(168,85,247,.5); color: var(--txt); }
.cmdk-empty { padding: 32px; text-align: center; color: var(--txt-mut); }

/* ---------- Rail "Continuer la lecture" ---------- */
.rail { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent); }
.rail::-webkit-scrollbar { height: 6px; }
.rc {
  scroll-snap-align: start; flex: 0 0 300px; display: flex; gap: 14px; padding: 14px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s;
}
.rc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent, #a855f7) 50%, transparent); }
.rc::before { content: ""; position: absolute; inset: 0; opacity: .14; background: radial-gradient(120% 100% at 0 100%, var(--accent, #a855f7), transparent 60%); }
.rc img { width: 66px; height: 92px; object-fit: cover; border-radius: 10px; position: relative; }
.rc .info { display: flex; flex-direction: column; justify-content: center; min-width: 0; position: relative; }
.rc .info h4 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc .info .ch { color: var(--accent, #a855f7); font-weight: 700; margin-top: 3px; filter: brightness(1.3); }
.rc .pbar { height: 5px; border-radius: 5px; background: var(--bg-3); margin-top: 10px; overflow: hidden; }
.rc .pbar i { display: block; height: 100%; background: var(--grad); }
.rc .play { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; }

/* ---------- À la une : carrousel vedette (spotlight) ---------- */
.spotlight { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); --accent: #a855f7; }
.spotlight .sl-bg { position: absolute; inset: 0; background-size: cover; background-position: center 22%; filter: blur(46px) saturate(135%); transform: scale(1.25); opacity: .32; transition: opacity .5s; }
.spotlight .sl-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, var(--bg-2) 34%, color-mix(in srgb, var(--bg-2) 55%, transparent) 78%, transparent); }
.sl-main { position: relative; display: grid; grid-template-columns: 264px 1fr; gap: clamp(24px, 4vw, 46px); padding: clamp(24px, 4vw, 46px); align-items: center; }
.sl-cover { display: block; aspect-ratio: 2/3; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 30px 70px -22px color-mix(in srgb, var(--accent) 75%, transparent); transition: box-shadow .5s, transform .4s var(--ease); }
.sl-cover:hover { transform: translateY(-4px); }
.sl-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sl-cover:hover img { transform: scale(1.05); }
.sl-info { min-width: 0; }
.sl-info.swap { animation: slIn .55s var(--ease) both; }
@keyframes slIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.sl-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sl-genres span { padding: 5px 13px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.sl-info h2 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: 1; margin-bottom: 12px; }
.sl-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--txt-mut); margin-bottom: 16px; font-size: .92rem; }
.sl-rating b { color: var(--txt); }
.sl-synopsis { color: var(--txt-soft); max-width: 58ch; margin-bottom: 26px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sl-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sl-thumbs { position: relative; display: flex; gap: 10px; padding: 0 clamp(24px, 4vw, 46px) clamp(22px, 3vw, 30px); overflow-x: auto; scrollbar-width: none; }
.sl-thumbs::-webkit-scrollbar { display: none; }
.sl-thumb { flex: 0 0 auto; width: 50px; aspect-ratio: 2/3; border-radius: 9px; overflow: hidden; opacity: .45; border: 2px solid transparent; cursor: pointer; transition: opacity .3s, transform .3s var(--ease), border-color .3s, box-shadow .3s; padding: 0; }
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sl-thumb:hover { opacity: .85; }
.sl-thumb.on { opacity: 1; border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 85%, transparent); }
@media (max-width: 760px) {
  .sl-main { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .sl-cover { max-width: 190px; margin: 0 auto; }
  .sl-genres, .sl-rating, .sl-actions { justify-content: center; }
  .sl-synopsis { margin-inline: auto; }
  .sl-thumbs { justify-content: center; }
}

/* ---------- Transitions partagées (cover → fiche) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
::view-transition-old(root) { animation: vt-fade-out .4s var(--ease) both; }
::view-transition-new(root) { animation: vt-fade-in .4s var(--ease) both; }
/* la couverture morphée passe au-dessus */
::view-transition-group(*[class^="cover-"]) { z-index: 10; }

/* fallback (navigateurs sans View Transitions) */
.no-vt body.fade-enter main, .no-vt body.fade-enter .page-body { animation: pageIn .55s var(--ease) both; }

/* mouvement réduit : pas d'animation de transition de page */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Lien d'évitement (skip to content) ---------- */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 9999;
  padding: 10px 16px; border-radius: 10px; background: var(--grad); color: #fff;
  font-weight: 700; font-family: var(--font-display); box-shadow: var(--shadow-card);
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus-visible, .skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Skeletons (placeholders animés) ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--bg-2); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 18%, color-mix(in srgb, var(--bg-3) 88%, #fff) 50%, transparent 82%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite;
}
.sk-line { height: .85em; border-radius: 6px; background: var(--bg-3); }
.sk-line + .sk-line { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .cover.skeleton::after { animation: none; }
}

/* ---------- Micro-interactions ---------- */
.btn { transition: transform .18s var(--ease-back), box-shadow .25s, background .25s, border-color .25s, color .25s; }
.btn:active:not([disabled]):not(.is-disabled) { transform: scale(.97); }
.icon-btn:active { transform: scale(.9); }
.r-fab .fab:active, .r-dock-chap:active, .tab-item:active svg { transform: scale(.9); }
.follow-btn:active { transform: scale(.92); }
.chip, .tag, .range-chip { transition: transform .18s var(--ease-back), background .2s, color .2s, border-color .2s; }
.tag:hover, .range-chip:hover { transform: translateY(-1px); }
.m-card .follow-btn:hover svg { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .r-fab .fab:active, .r-dock-chap:active,
  .follow-btn:active, .tag:hover, .range-chip:hover { transform: none; }
}

/* ---------- Bandeau de consentement (mesure d'audience) ----------
   Refuser est exactement aussi accessible qu'accepter : même taille, même
   place, aucune case pré-cochée. Le bandeau ne bloque pas la lecture. */
.lt-consent {
  position: fixed; left: 50%; bottom: 0; z-index: 120;
  width: min(760px, calc(100% - 24px));
  transform: translate(-50%, 120%); opacity: 0;
  transition: transform .38s var(--ease), opacity .38s var(--ease);
}
.lt-consent.in { transform: translate(-50%, 0); opacity: 1; }
.lt-consent.gone { transform: translate(-50%, 120%); opacity: 0; }
.lt-consent-in {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  /* Dégage le bouton de navigation flottant (.rn-toggle, fixé en bas-centre) :
     le bandeau ne doit jamais recouvrir la navigation principale. */
  margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--glass-2); border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px); box-shadow: 0 24px 60px -28px rgba(0,0,0,.8);
}
.lt-consent p { margin: 0; flex: 1 1 300px; font-size: .92rem; color: var(--txt-soft); line-height: 1.5; }
.lt-consent p a { color: var(--txt); text-decoration: underline; text-underline-offset: 2px; }
.lt-consent-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.lt-consent-btns .btn { min-width: 104px; justify-content: center; }
/* Sous le bandeau, on laisse respirer le bouton de navigation flottant. */
@media (max-width: 620px) {
  .lt-consent { width: calc(100% - 16px); }
  .lt-consent-btns { width: 100%; }
  .lt-consent-btns .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-consent { transition: none; }
}

/* ---------- Pages légales (mentions, confidentialité) ---------- */
.legal { max-width: 74ch; margin: 0 auto; }
.legal section { margin-top: 38px; }
.legal h2 {
  font-size: 1.25rem; margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.legal h3 { font-size: 1.02rem; margin: 22px 0 8px; color: var(--txt); }
.legal p, .legal li { color: var(--txt-soft); line-height: 1.75; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.legal a { color: var(--txt); text-decoration: underline; text-underline-offset: 2px; }
.legal .box {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line);
}
.legal .box p:first-child { margin-top: 0; }
.legal .updated { margin-top: 40px; font-size: .86rem; color: var(--txt-mut); }
.legal dl { margin-top: 10px; display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 8px 18px; }
.legal dt { color: var(--txt); font-weight: 600; }
.legal dd { color: var(--txt-soft); }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; gap: 2px 0; } .legal dd { margin-bottom: 10px; } }

/* =========================================================================
   Notifications de sortie (js/push.js)
   Deux surfaces seulement : le panneau d'explication (ouvert par la cloche du
   menu) et le bandeau de la Bibliotheque. Le panneau reprend la matiere du
   .cmdk pour que ca reste la meme maison.
   ========================================================================= */
.push-modal { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 18px; }
.push-scrim { position: absolute; inset: 0; background: rgba(4,4,12,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.push-box {
  position: relative; width: min(100%, 460px); max-height: 88vh; overflow-y: auto;
  padding: 30px 26px 22px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 40px 100px -30px #000;
  animation: pushIn .32s var(--ease-back) both;
}
@keyframes pushIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.push-x {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--txt-mut); background: none; border: none; cursor: pointer;
}
.push-x:hover { color: var(--txt); background: var(--bg-3); }
.push-cloche { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.push-box h2 { font-size: 1.45rem; margin-bottom: 6px; }
.push-p { color: var(--txt-soft); font-size: .94rem; line-height: 1.6; margin: 10px 0 4px; }
.push-p.push-ok { color: var(--txt); }
.push-ol { text-align: left; margin: 12px 0 4px 20px; display: flex; flex-direction: column; gap: 8px; color: var(--txt-soft); font-size: .92rem; line-height: 1.5; }
.push-note { margin-top: 14px; font-size: .76rem; color: var(--txt-mut); line-height: 1.5; }

/* Le choix « mes suivis » / « tout ». Des cartes plutot que des puces : sur
   telephone, une pastille radio de 14 px se rate une fois sur trois. */
.push-choix { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 16px; text-align: left; }
.push-opt {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--glass);
  transition: border-color .2s, background .2s;
}
.push-opt:hover { border-color: var(--line-strong); }
.push-opt:has(input:checked) { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); }
.push-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.push-opt input { margin-top: 3px; accent-color: var(--violet); flex-shrink: 0; }
.push-opt span { display: flex; flex-direction: column; gap: 2px; }
.push-opt strong { font-size: .95rem; }
.push-opt em { font-style: normal; font-size: .8rem; color: var(--txt-mut); line-height: 1.4; }
.push-go { width: 100%; justify-content: center; }
.push-off { display: block; margin: 14px auto 0; font-size: .84rem; color: var(--txt-mut); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.push-off:hover { color: var(--txt); }
body.push-open { overflow: hidden; }

/* Cloche du menu radial, une fois les notifications actives. */
.rn-item.push-on { color: var(--violet); border-color: var(--violet); }

/* Bandeau de la Bibliotheque : une proposition, pas un mur. Il se masque
   definitivement si on le refuse (voir « lt-push-banniere »). */
.push-bandeau {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.push-bandeau-ic { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.push-bandeau-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.push-bandeau-txt strong { font-size: .96rem; }
.push-bandeau-txt span { font-size: .82rem; color: var(--txt-mut); line-height: 1.45; }
.push-bandeau-x {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--txt-mut); background: none; border: none; cursor: pointer;
}
.push-bandeau-x:hover { color: var(--txt); background: var(--bg-3); }
@media (max-width: 560px) {
  .push-bandeau { flex-wrap: wrap; }
  .push-bandeau-txt { flex-basis: calc(100% - 90px); }
  .push-bandeau .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .push-box { animation: none; } }

/* ---------- Balises spoiler (||texte||, voir js/core.js) ----------
   Caché : un pavé opaque ET un flou, parce qu'un simple fond laisse deviner
   la forme des mots — et un nom de personnage se devine à sa longueur.
   Le pavé reste dans le flux du texte (inline), comme sur Discord. */
.lt-spoiler {
  border-radius: 5px; padding: 0 3px; cursor: pointer;
  background: color-mix(in srgb, var(--txt-mut) 55%, var(--bg-3));
  transition: background .2s var(--ease);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lt-spoiler:not(.on) .lt-spoiler-in { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; }
.lt-spoiler:not(.on):hover { background: color-mix(in srgb, var(--txt-mut) 70%, var(--bg-3)); }
.lt-spoiler:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.lt-spoiler.on { background: color-mix(in srgb, var(--txt-mut) 16%, transparent); cursor: text; }
.lt-spoiler-in { transition: filter .25s var(--ease), opacity .25s var(--ease); }
/* Mode léger : le flou coûte peu ici, mais on garde la règle du site. */
[data-perf="lite"] .lt-spoiler:not(.on) .lt-spoiler-in { filter: none; opacity: 0; }

/* Barre d'outils sous une zone de saisie : bouton Spoiler + rappel. */
.lt-compose-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .8rem; color: var(--txt-mut);
}
.lt-compose-tools code { font-size: .78rem; padding: 1px 5px; border-radius: 5px; background: var(--bg-3); color: var(--txt-soft); }
.lt-spoiler-btn {
  font: 600 .78rem var(--font-body); color: var(--txt-soft); cursor: pointer;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--glass);
}
.lt-spoiler-btn:hover { color: var(--txt); border-color: var(--violet); }
.rd-com-new { flex-wrap: wrap; }
.rd-com-new .lt-compose-tools { flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { .lt-spoiler, .lt-spoiler-in { transition: none; } }

/* ---------- Fiches personnages (js/personnages.js) ----------
   Fiche série (onglet Personnages) ET lecteur (« Qui est qui ? ») : d'où
   leur place ici, dans la feuille chargée par les deux pages. */
.perso-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.perso-head p { color: var(--txt-soft); margin: 0; max-width: 62ch; line-height: 1.55; }
.perso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.perso {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px;
  border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--line);
}
.perso-av { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--bg-3); }
.perso-ini {
  display: grid; place-items: center; color: #fff;
  font: 800 1.05rem var(--font-display); letter-spacing: .02em;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #000));
}
.perso-b { min-width: 0; }
.perso-nom { font-family: var(--font-display); font-size: 1rem; margin: 2px 0 4px; line-height: 1.3; }
.perso-role {
  display: block; width: fit-content; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  font: 600 .7rem var(--font-body); color: var(--txt-soft); background: var(--bg-3);
}
.perso-b p { color: var(--txt-soft); font-size: .88rem; line-height: 1.55; margin: 0 0 6px; }
.perso-suite { padding-top: 6px; border-top: 1px dashed var(--line); }
.perso-ch { font-size: .72rem; font-weight: 700; color: var(--violet); white-space: nowrap; }
.perso-b > .perso-ch { display: block; margin-bottom: 4px; }
.perso-vide { color: var(--txt-mut); padding: 30px 0; text-align: center; }
.rd-who .perso-grid { grid-template-columns: 1fr; }

/* ---------- Pronostics de chapitre (js/pronos.js) ----------
   Page Classement et écran de fin du lecteur. Les barres de résultat ne
   sont dessinées qu'après le vote : avant, les boutons sont des choix nus. */
.pr { margin: 26px 0; text-align: left; }
.pr-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-title h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }
.pr-note { font-size: .8rem; color: var(--txt-mut); }
.pr-list { display: grid; gap: 12px; }
.pr-card {
  position: relative; padding: 16px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--violet));
}
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pr-serie { font-size: .78rem; font-weight: 700; color: var(--accent, var(--violet)); text-transform: uppercase; letter-spacing: .04em; }
.pr-etat { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bg-3); color: var(--txt-mut); }
.pr-etat.on { color: #22c55e; background: color-mix(in srgb, #22c55e 14%, transparent); }
.pr-etat.ok { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); }
.pr-q { font-family: var(--font-display); font-size: 1.05rem; margin: 2px 0 12px; line-height: 1.35; }
.pr-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pr-opt {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 12px; text-align: left; cursor: pointer;
  font: 600 .92rem var(--font-body); color: var(--txt);
  background: var(--bg-2); border: 1px solid var(--line-strong);
  transition: border-color .2s, transform .2s var(--ease-back);
}
.pr-opt:not(:disabled):hover { border-color: var(--accent, var(--violet)); transform: translateY(-2px); }
.pr-opt:disabled { cursor: default; }
.pr-bar {
  position: absolute; inset: 0 auto 0 0; z-index: -1; border-radius: inherit;
  background: color-mix(in srgb, var(--accent, var(--violet)) 22%, transparent);
  transition: width .5s var(--ease);
}
.pr-pc { font-size: .8rem; color: var(--txt-soft); font-variant-numeric: tabular-nums; }
.pr-opt.mine { border-color: var(--accent, var(--violet)); box-shadow: 0 0 0 1px var(--accent, var(--violet)) inset; }
.pr-opt.mine .pr-txt::after { content: " · ton choix"; font-weight: 500; font-size: .78rem; color: var(--txt-mut); }
.pr-opt.good { border-color: #22c55e; box-shadow: 0 0 0 1px #22c55e inset; }
.pr-opt.good .pr-bar { background: color-mix(in srgb, #22c55e 24%, transparent); }
.pr-opt.bad { border-color: #ef4444; }
.pr-verdict { margin-top: 10px; font-weight: 700; color: var(--txt-soft); }
.pr-verdict.ok { color: #22c55e; }
.pr-foot { margin-top: 10px; font-size: .78rem; color: var(--txt-mut); }
.pr-vide { color: var(--txt-mut); }
/* En retard sur la série : la question et les choix restent flous. */
.pr-card.masque .pr-q, .pr-card.masque .pr-opts { filter: blur(7px); user-select: none; pointer-events: none; }
.pr-lever {
  display: block; width: 100%; margin: 4px 0 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font: 500 .84rem var(--font-body); color: var(--txt-soft); text-align: left;
  background: var(--bg-3); border: 1px dashed var(--line-strong);
}
.pr-lever u { color: var(--txt); text-underline-offset: 3px; }
/* Outils de la team (admin / modo) */
.pr-staff { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .84rem; }
.pr-staff label { display: inline-flex; align-items: center; gap: 6px; color: var(--txt-soft); }
.pr-staff select, .pr-new input, .pr-new select {
  padding: 8px 10px; border-radius: 10px; background: var(--bg-1); color: var(--txt);
  border: 1px solid var(--line-strong); font: inherit;
}
.pr-link { background: none; border: 0; padding: 0; cursor: pointer; font: 600 .84rem var(--font-body); color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.pr-del { color: #ef4444; margin-left: auto; }
.pr-new { margin-bottom: 14px; padding: 12px 16px; border-radius: var(--radius); border: 1px dashed var(--line-strong); }
.pr-new summary { cursor: pointer; font-weight: 700; }
.pr-new form { display: grid; gap: 10px; margin-top: 12px; }
.pr-new label { display: grid; gap: 5px; font-size: .84rem; color: var(--txt-soft); }
.pr-new small { color: var(--txt-mut); }
.pr-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pr-new button[type=submit] { justify-self: start; }
/* Dans l'écran de fin du lecteur : centré comme le reste de l'écran. */
.rd-pronos .pr { max-width: 640px; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .pr-opt, .pr-bar { transition: none; } }