/* ============================================================
   Nethora Scans — thème sombre premium, accents or Nethora
   Bascule pliable : < 600px = Fold replié, >= 600px = déplié
   ============================================================ */

:root {
  --fond: #0d0d12;
  --fond-2: #16161d;
  --fond-3: #1f1f29;
  --texte: #e8e6e3;
  --texte-2: #9a97a3;
  --or: #d4af37;
  --or-clair: #f5d76e;
  --accent: #6c8cff;
  --vert: #4caf7d;
  --orange: #e0a04a;
  --rouge: #e05a5a;
  --rayon: 14px;
  --haut-sur: env(safe-area-inset-top, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 15px;
  overflow: hidden;
}

.cache { display: none !important; }
.or { color: var(--or); }

/* ---------- En-tête et marque ---------- */
#entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--haut-sur)) 16px 10px;
  background: var(--fond-2);
  border-bottom: 1px solid #26262f;
}
.marque { display: flex; align-items: baseline; gap: 8px; }
.nom-app { font-size: 1.35rem; font-weight: 700; letter-spacing: .5px; }
.by-nethora {
  position: relative;
  font-size: .78rem; font-weight: 600; letter-spacing: .8px;
  background: linear-gradient(100deg, #8a6d1f 0%, var(--or) 30%, #fff6c9 50%, var(--or) 70%, #8a6d1f 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: reflet-or 9s linear infinite;
}
/* Le reflet passe en 1,6 s puis se repose : repeindre le dégradé à chaque
   image pendant 100 % du temps coûtait du processeur en continu */
@keyframes reflet-or { 0% { background-position: 220% 0; } 18% { background-position: -20% 0; } 100% { background-position: -20% 0; } }

.btn-rond {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #33333f; background: var(--fond-3); color: var(--texte);
  font-size: 1.15rem; cursor: pointer;
}

/* ---------- Structure générale ---------- */
#contenu {
  height: calc(calc(100 * var(--u-dvh, 1dvh)) - 58px - var(--haut-sur) - 60px - var(--bandeau-h, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px 24px;
}
/* Bandeau du grand gagnant (jour de podium, 04/10/2026) : sa propre place sous
   la barre du haut, le nom habillé de son skin défile ; ✕ à droite */
.bandeau-podium { position: relative; display: flex; align-items: center; overflow: hidden; cursor: pointer;
  background: linear-gradient(90deg, #1d1708, #2e240b 30%, #3a2d0c 50%, #2e240b 70%, #1d1708); border-bottom: 1px solid #d4af3766;
  box-shadow: inset 0 1px 0 #f5d76e22; min-height: 64px; }
.bp-piste { flex: 1; min-width: 0; display: flex; overflow: hidden; padding: 14px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bp-defile { flex: none; display: flex; align-items: center; animation: bp-defile 26s linear infinite; }
.bandeau-podium:active .bp-defile { animation-play-state: paused; }
@keyframes bp-defile { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.bp-element { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; white-space: nowrap; color: #f3e6bd; font-size: .86rem; }
.bp-couronne { font-size: 1.2rem; filter: drop-shadow(0 0 6px #f5d76e88); }
.bp-libelle { font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #d4af37; }
.bp-nom { display: inline-flex; font-weight: 800; font-size: 1.05rem; }
.bp-quoi { color: #f5d76e; font-weight: 600; }
.bp-sep { color: #d4af3788; padding-left: 8px; }
.bp-fermer { flex: none; align-self: stretch; width: 40px; border: 0; border-left: 1px solid #d4af3733; background: #00000040; color: #d8c890; font-size: 1rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .bp-defile { animation-duration: 80s; } }
.vue { display: none; }
.vue.active { display: block; animation: apparait .18s ease-out; }

/* Animations de transition — rapides mais présentes */
@keyframes apparait {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes glisse-haut {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.carte-serie, .carte-resultat, .carte-mini, .ligne-sortie, .carte-reprise, .onglet, .btn-principal, .btn-secondaire, .chip {
  transition: transform .12s ease, opacity .12s ease;
}
.carte-serie:active, .carte-resultat:active, .carte-mini:active, .ligne-sortie:active, .carte-reprise:active { transform: scale(.975); }
.btn-principal:active, .btn-secondaire:active, .chip:active { transform: scale(.96); }

/* ---------- Barre de navigation : noir et or, épurée ----------
   Icônes SVG en trait fin, colorées par masque : l'onglet actif reçoit
   exactement le dégradé or animé de « by Nethora ». */
#nav-bas {
  position: fixed; left: 0; right: 0; bottom: 0; height: 62px;
  display: flex; background: #09090d;
  border-top: 1px solid #2a2314;
  box-shadow: 0 -8px 20px -14px #d4af3766;
}
.onglet {
  flex: 1; border: 0; background: none; color: #7a766c;
  font-size: .64rem; letter-spacing: .3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; position: relative;
}
.onglet .ico {
  width: 23px; height: 23px; display: block;
  background: #5f5b53;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  transition: transform .15s ease;
}
.onglet:active .ico { transform: scale(.9); }
.onglet.actif { color: var(--or); }
.onglet.actif .ico {
  background: linear-gradient(100deg, #8a6d1f 0%, var(--or) 30%, #fff6c9 50%, var(--or) 70%, #8a6d1f 100%);
  background-size: 220% 100%;
  animation: reflet-or 9s linear infinite;
}
/* Fin trait or au-dessus de l'onglet actif */
.onglet.actif::before {
  content: ''; position: absolute; top: 0; width: 26px; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, #8a6d1f, var(--or-clair), #8a6d1f);
}
.ico-accueil { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.2 12 4l8.5 7.2'/%3E%3Cpath d='M6 9.8V19h4.2v-5h3.6v5H18V9.8'/%3E%3C/svg%3E"); }
.ico-bibliotheque { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 4.5h3.2V19H4.5z'/%3E%3Cpath d='M9.6 4.5h3.2V19H9.6z'/%3E%3Cpath d='m14.6 5.6 3-.9 4 13.3-3 .9z'/%3E%3C/svg%3E"); }
.ico-sorties { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 16.5v-5.3a5.5 5.5 0 0 1 11 0v5.3l1.5 1.8h-14z'/%3E%3Cpath d='M10 20.2a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.ico-recherche { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='m15.2 15.2 4.8 4.8'/%3E%3C/svg%3E"); }
.ico-reglages { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h9M17.5 7.5H20M4 16.5h3.5M12 16.5h8'/%3E%3Ccircle cx='15' cy='7.5' r='2.1'/%3E%3Ccircle cx='9.5' cy='16.5' r='2.1'/%3E%3C/svg%3E"); }
.badge {
  position: absolute; top: 6px; right: 24%;
  background: var(--rouge); color: #fff; font-size: .62rem; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px; line-height: 17px; padding: 0 4px;
}

/* ---------- Barres de filtres ---------- */
.barre-filtres { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.barre-filtres select, .barre-filtres input[type="search"], .champ-domaine {
  background: var(--fond-3); color: var(--texte);
  border: 1px solid #33333f; border-radius: 10px; padding: 9px 12px; font-size: .88rem;
}
.barre-filtres input[type="search"] { flex: 1; min-width: 120px; }
.compteur { color: var(--texte-2); font-size: .8rem; margin: 4px 2px 10px; }

/* ---------- Carte de reprise ---------- */
.carte-reprise {
  display: flex; gap: 12px; align-items: center;
  background: linear-gradient(120deg, #1d1a10, #221d0e 60%, #1d1a10);
  border: 1px solid #4a3d15; border-radius: var(--rayon);
  padding: 12px; margin-bottom: 14px; cursor: pointer;
}
.carte-reprise img { width: 52px; height: 72px; object-fit: cover; border-radius: 8px; }
.carte-reprise .cr-sur { color: var(--or); font-size: .72rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.carte-reprise .cr-titre { font-weight: 600; margin: 2px 0; }
.carte-reprise .cr-detail { color: var(--texte-2); font-size: .8rem; }
.carte-reprise .cr-fleche { margin-left: auto; color: var(--or); font-size: 1.4rem; }

/* ---------- Sorties : segments + flux par jour ---------- */
.sorties-barre { align-items: center; }
.segments { display: flex; flex: 1; background: var(--fond-3); border: 1px solid #33333f; border-radius: 12px; padding: 3px; gap: 3px; }
.segment {
  flex: 1; border: 0; background: none; color: var(--texte-2); font-size: .84rem; font-weight: 600;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.segment.actif { background: #2a2312; color: var(--or); }
.btn-verif { width: auto; margin: 0; padding: 9px 14px; }
.flux-sorties { display: flex; flex-direction: column; }
.fs-jour {
  color: var(--or); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  margin: 14px 2px 8px;
}
.fs-jour:first-child { margin-top: 4px; }
.fs-ligne {
  display: flex; align-items: center; gap: 12px;
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 9px 10px; margin-bottom: 8px; cursor: pointer; position: relative;
}
.fs-ligne.neuf { border-color: #4a3d15; background: linear-gradient(120deg, #1a1710, var(--fond-2) 55%); }
.fs-ligne.neuf::before {
  content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--or-clair), #8a6d1f);
}
.fs-ligne.source { opacity: .85; }
.fs-cover { width: 46px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--fond-3); flex-shrink: 0; }
.fs-infos { flex: 1; min-width: 0; }
.fs-titre { font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-detail { color: var(--texte); font-size: .82rem; margin-top: 3px; }
.fs-alire { color: var(--accent); font-weight: 600; }
.fs-ok { color: var(--vert); }
.fs-date { color: var(--texte-2); font-size: .74rem; margin-top: 3px; }
.fs-lire {
  flex-shrink: 0; border: 1px solid #4a3d15; background: #2a2312; color: var(--or);
  font-weight: 700; font-size: .8rem; padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.fs-lire:active { transform: scale(.95); }
.fs-ligne { min-width: 0; } /* sinon un titre « nowrap » élargit sa colonne */
@media (min-width: 600px) {
  /* minmax(0, 1fr) : deux colonnes STRICTEMENT égales — avec « 1fr »
     seul, un titre long forçait la première à déborder et coupait la
     seconde hors de l'écran. */
  .flux-sorties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-items: start; }
  .fs-jour { grid-column: 1 / -1; margin: 10px 2px 6px; }
  /* Écran interne : lignes plus denses */
  .fs-ligne { padding: 6px 8px; gap: 10px; margin-bottom: 6px; }
  .fs-cover { width: 40px; height: 56px; }
  .fs-titre { font-size: .88rem; }
  .fs-detail { font-size: .78rem; margin-top: 2px; }
  .fs-date { font-size: .7rem; margin-top: 2px; }
  .fs-lire { padding: 7px 10px; font-size: .76rem; }
  /* Segments et « Vérifier » sur la même ligne */
  .sorties-barre { flex-wrap: nowrap; }
  .segments { flex: 1; }
}

/* ---------- Entrée « Découvertes » sur l'accueil ---------- */
.carte-decouvertes {
  display: flex; gap: 12px; align-items: center;
  background: linear-gradient(120deg, #14161f, #1a1b2b 60%, #14161f);
  border: 1px solid #343a5c; border-radius: var(--rayon);
  padding: 14px; margin-bottom: 14px; cursor: pointer;
  transition: transform .12s;
}
.carte-decouvertes:active { transform: scale(.975); }
.carte-decouvertes .cd-sur { color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.carte-decouvertes .cd-titre { font-weight: 600; margin: 2px 0; }
.carte-decouvertes .cd-detail { color: var(--texte-2); font-size: .8rem; }
.carte-decouvertes .cd-fleche { margin-left: auto; color: var(--accent); font-size: 1.4rem; }

/* ---------- Liste de séries (bibliothèque + sorties) ----------
   Colonnes adaptatives : 1 sur le Fold replié, 2-3 déplié. */
.liste-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.carte-serie {
  display: flex; gap: 12px; position: relative;
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 10px; cursor: pointer;
}
/* Étoile de favori en coin : vide (trait or) → pleine (or) au tap */
.cs-etoile {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.cs-etoile svg { width: 21px; height: 21px; fill: none; stroke: #8a6d1f; stroke-width: 1.6; stroke-linejoin: round; transition: fill .15s, stroke .15s, filter .2s; }
.cs-etoile:active { transform: scale(.85); }
.cs-etoile.actif svg { fill: var(--or); stroke: var(--or-clair); filter: drop-shadow(0 0 4px #d4af3788); }
.carte-serie .cs-infos { padding-right: 30px; }
.carte-serie img.cs-cover { width: 68px; height: 96px; object-fit: cover; border-radius: 8px; background: var(--fond-3); flex-shrink: 0; }
.cs-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-titre { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ligne { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.pastille { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.pastille.en-cours   { background: #143726; color: #6fdca6; }
.pastille.a-lire     { background: #3a2f14; color: #eec96a; }
.pastille.termine    { background: #1d2a45; color: #8cabf5; }
.pastille.en-pause   { background: #33283c; color: #c39ae0; }
.pastille.abandonne  { background: #3c2424; color: #e08c8c; }
.pastille.source     { background: #262633; color: var(--texte-2); }
.pastille.nouveau    { background: linear-gradient(120deg, #b8912b, var(--or)); color: #16130a; }
.carte-serie.nouvel-ajout { border-color: #4a3d15; background: linear-gradient(120deg, #1a1710, var(--fond-2) 55%); }
.cs-ajout { color: var(--or); }
.cs-prog { color: var(--texte-2); font-size: .82rem; margin-top: 6px; }
.cs-prog strong { color: var(--texte); }
.cs-retard { color: var(--accent); font-weight: 700; font-size: .8rem; margin-left: auto; }
.barre-prog { height: 4px; background: #2a2a35; border-radius: 4px; margin-top: 7px; overflow: hidden; }
.barre-prog > div { height: 100%; background: var(--accent); border-radius: 4px; }
/* Serie entierement lue : barre doree (elle redevient bleue des qu'un
   nouveau chapitre parait) */
.barre-prog.a-jour > div { background: linear-gradient(90deg, #b8912b, var(--or)); }
.cs-note { color: var(--or); font-weight: 700; margin-left: 6px; }

/* ---------- Favoris et collections ---------- */
.cs-favori { color: var(--or); }
.bloc-collections {
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 12px 14px; margin: 12px 0;
}
.btn-favori {
  border: 1px solid #3a3a46; background: var(--fond-3); color: var(--texte-2);
  border-radius: 20px; padding: 7px 14px; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.btn-favori.actif { color: var(--or); border-color: #4a3d15; background: #2a2312; }
.chip.nouvelle { border-style: dashed; color: var(--texte-2); }

/* Double page : deux planches cote a cote (mangas, ecran interne).
   Les selecteurs sont prefixes par #lecteur-pages : sans cet
   identifiant, la regle generale "#lecteur-pages img { width:100% }"
   l'emporterait et les pages resteraient pleine largeur. */
/* Mode livre : le chapitre devient une rangee de doubles pages que
   l'on tourne horizontalement. Chaque planche occupe une demi-largeur
   et toute la hauteur : on voit exactement deux pages a la fois. */
#lecteur-pages .section-chapitre.double {
  display: flex; flex-wrap: nowrap;
  height: var(--h-lecteur, calc(100 * var(--u-vh, 1vh)));
  overflow-x: auto; overflow-y: hidden;
  /* Pas d'aimantation du navigateur : elle recalait sur UNE planche
     (demi-page) ; c'est l'app qui pose chaque double page. */
  scroll-snap-type: none;
  scrollbar-width: none;
  perspective: 1600px;
}
#lecteur-pages .section-chapitre.double::-webkit-scrollbar { display: none; }
/* Pas d'ecran intercalaire en mode livre : on tourne la page et on
   est dans le chapitre suivant. Son numero s'affiche brievement en
   haut, comme pour tout changement de chapitre. */
#lecteur-pages .section-chapitre.double .separateur-chapitre { display: none; }
#lecteur-pages .section-chapitre.double img {
  flex: 0 0 50%; width: 50%; height: 100%;
  aspect-ratio: auto !important;
  object-fit: contain;
}
/* Les deux planches se rejoignent au centre, comme une reliure */
#lecteur-pages .section-chapitre.double img:nth-of-type(odd) { object-position: right center; }
#lecteur-pages .section-chapitre.double img:nth-of-type(even) { object-position: left center; }
/* Sens manga : la rangée part de la DROITE, la première page à droite de
   la reliure. Le texte des entractes reste dans le sens normal. */
#lecteur-pages .section-chapitre.double.rtl { direction: rtl; }
#lecteur-pages .section-chapitre.double.rtl > * { direction: ltr; }
#lecteur-pages .section-chapitre.double.rtl img:nth-of-type(odd) { object-position: left center; }
#lecteur-pages .section-chapitre.double.rtl img:nth-of-type(even) { object-position: right center; }

/* La page se rabat sur la precedente en tournant */
@keyframes tourne-page {
  from { opacity: .2; transform: rotateY(-42deg) translateX(14%); }
  to   { opacity: 1; transform: none; }
}
#lecteur-pages .section-chapitre.double img.entre {
  animation: tourne-page .26s ease-out both;
  transform-origin: left center;
  backface-visibility: hidden;
}
@keyframes tourne-page-rtl {
  from { opacity: .2; transform: rotateY(42deg) translateX(-14%); }
  to   { opacity: 1; transform: none; }
}
#lecteur-pages .section-chapitre.double.rtl img.entre {
  animation-name: tourne-page-rtl;
  transform-origin: right center;
}
/* En mode livre, l'axe vertical est verrouille : un geste de haut en
   bas ferait sauter de chapitre. Seul le mouvement horizontal (tourner
   la page) et le pincement (loupe) restent actifs. Le passage au
   chapitre suivant se fait par l'app, en fin de chapitre. */
#vue-lecteur.paginee #lecteur-defile {
  overflow-y: hidden;
  touch-action: pinch-zoom;
  scroll-snap-type: none;
}
/* Le navigateur ne fait plus glisser la rangée : c'est l'app qui tourne
   la page (animation de feuille) sur un glissé ou un tap. */
#lecteur-pages .section-chapitre.double { touch-action: pinch-zoom; }

/* Page tournée : une feuille qui pivote sur la reliure, par-dessus la
   lecture, le temps de l'animation. */
.tourne-page {
  position: absolute; z-index: 4; overflow: hidden; background: #000;
  perspective: 1800px; pointer-events: none;
}
.tourne-page .tp-couche { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
.tourne-page .tp-demi { width: 50%; }
.tourne-page .tp-item { display: block; max-width: none; margin: 0; }
.tourne-page .tp-feuille {
  position: absolute; top: 0; width: 50%; height: 100%;
  transform-style: preserve-3d;
}
/* La feuille est une chaîne de lamelles : chacune pivote sur le bord
   qu'elle partage avec la précédente, d'où la courbure du papier. */
.tourne-page .tp-lame {
  position: absolute; top: 0; height: 100%;
  transform-style: preserve-3d; will-change: transform;
}
.tourne-page .gauche .tp-lame { transform-origin: right center; }
.tourne-page .droite .tp-lame { transform-origin: left center; }
.tourne-page .tp-face {
  position: absolute; inset: 0; overflow: hidden; background: #000;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tourne-page .tp-arriere { transform: rotateY(180deg); }
.tourne-page .tp-ombre { position: absolute; inset: 0; opacity: 0; background: #000; pointer-events: none; }

/* ---------- Liste des sauvegardes ---------- */
.liste-sauvegardes { margin-top: 10px; }
.ligne-sauvegarde {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #22222c; font-size: .84rem;
}
.ligne-sauvegarde .ls-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-sauvegarde button {
  border: 1px solid #3a3a46; background: var(--fond-3); color: var(--texte);
  border-radius: 8px; padding: 5px 10px; font-size: .76rem; cursor: pointer;
}
.ligne-sauvegarde button.or { color: var(--or); border-color: #4a3d15; }

/* ---------- Statistiques ---------- */
#stats-contenu { flex: 1; overflow-y: auto; padding: 14px 16px 28px; }
@media (min-width: 900px) { #stats-contenu { max-width: 900px; margin: 0 auto; width: 100%; } }
.stat-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 6px;
}
.stat-carte {
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 14px; text-align: center;
}
.stat-valeur { font-size: 1.6rem; font-weight: 700; color: var(--or); line-height: 1.2; }
.stat-titre { font-size: .82rem; margin-top: 4px; }
.stat-detail { font-size: .72rem; color: var(--texte-2); margin-top: 3px; }
.stat-section {
  font-size: .95rem; color: var(--or); margin: 22px 0 10px;
  border-bottom: 1px solid #26262f; padding-bottom: 6px;
}
.stat-ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid #1e1e27; font-size: .86rem;
}
.stat-ligne-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-ligne-barre {
  flex: 0 0 38%; height: 6px; background: #2a2a35; border-radius: 4px; overflow: hidden;
}
.stat-ligne-barre i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.stat-ligne-val { flex: 0 0 auto; color: var(--texte-2); font-weight: 700; font-size: .8rem; }
.stat-ligne-val.or { color: var(--or); }
.stat-graph {
  display: flex; align-items: flex-end; gap: 3px; height: 110px;
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 10px; margin-bottom: 12px;
}
.stat-barre { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.stat-barre i {
  display: block; width: 100%; min-height: 2px;
  background: linear-gradient(180deg, var(--or), #8a6d1f); border-radius: 2px;
}

/* ---------- Note personnelle ---------- */
.bloc-note {
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 12px 14px; margin: 12px 0;
}
.ligne-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etoiles { display: inline-flex; gap: 3px; }
.etoile {
  position: relative; font-size: 1.6rem; line-height: 1; color: #3a3a46;
  cursor: pointer; user-select: none;
}
.etoile i {
  position: absolute; left: 0; top: 0; overflow: hidden;
  color: var(--or); font-style: normal; white-space: nowrap;
}
.valeur-note { color: var(--texte-2); font-size: .85rem; }
.champ-commentaire {
  width: 100%; margin-top: 8px; resize: vertical;
  background: var(--fond-3); color: var(--texte);
  border: 1px solid #33333f; border-radius: 10px; padding: 10px; font-size: .88rem;
  font-family: inherit;
}
.commentaire-apercu {
  margin-top: 8px; color: var(--texte-2); font-size: .85rem;
  white-space: pre-wrap; line-height: 1.5;
}
.cs-date { color: var(--texte-2); font-size: .74rem; margin-top: 5px; }
.cs-neuf { color: var(--vert); font-weight: 700; }

.message-vide { text-align: center; color: var(--texte-2); padding: 48px 20px; line-height: 1.7; }

/* ---------- Recherche ---------- */
.grille-resultats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.carte-resultat { background: var(--fond-2); border: 1px solid #24242e; border-radius: 12px; overflow: hidden; cursor: pointer; }
/* À la souris (ticket du 06/10/2026, Fabelin) : chaque œuvre cliquable le
   montre au survol — elle se soulève un peu, un liseré doré l'entoure et son
   image s'éclaircit (accueil, recherche, bibliothèque, sorties, fiches liées) */
@media (hover: hover) and (pointer: fine) {
  .carte-mini, .carte-resultat, .carte-serie { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .carte-mini img, .carte-resultat img, .carte-serie .cs-cover { transition: filter .15s ease; }
  .carte-mini:hover, .carte-resultat:hover, .carte-serie:hover { transform: translateY(-3px); border-color: #d4af3799; box-shadow: 0 6px 18px #0008, 0 0 0 1px #d4af3755; }
  .carte-mini:hover img, .carte-resultat:hover img, .carte-serie:hover .cs-cover { filter: brightness(1.12); }
}
.carte-resultat img { width: 100%; aspect-ratio: 3/4.3; object-fit: cover; background: var(--fond-3); display: block; }
.carte-resultat .cr-nom {
  font-size: .78rem; padding: 7px 8px 4px; min-height: 4.2em; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere;
}
.carte-resultat .cr-src { font-size: .66rem; color: var(--texte-2); padding: 0 8px; }
/* Disponibilité réelle : nombre de chapitres, ou « aucun » (carte grisée) */
.carte-resultat .cr-dispo { font-size: .66rem; color: var(--texte-2); padding: 2px 8px 0; min-height: 14px; }
.carte-resultat .cr-dispo.ok { color: var(--or); }
.carte-resultat.sans-chapitre { opacity: .45; }
/* 1.99.51 : grisée (pas masquée) le temps de chercher ses chapitres */
.carte-resultat { transition: opacity .25s; }
.carte-resultat.verif-dispo { opacity: .5; }
.carte-resultat.verif-dispo .cr-dispo { font-style: italic; }
.carte-resultat.sans-chapitre .cr-dispo { color: #e59a9a; }
#recherche-vides { display: block; margin: 0 0 8px; }
.carte-resultat button {
  width: calc(100% - 16px); margin: 7px 8px 9px; padding: 7px 0;
  border: 0; border-radius: 8px; background: var(--fond-3); color: var(--or);
  font-weight: 600; font-size: .78rem; cursor: pointer;
}
.carte-resultat button.deja { color: var(--vert); }

/* ---------- Boutons ---------- */
.btn-principal {
  border: 0; border-radius: 12px; padding: 12px 18px;
  background: linear-gradient(120deg, #b8912b, var(--or)); color: #16130a;
  font-weight: 700; font-size: .9rem; cursor: pointer; width: 100%;
}
.btn-secondaire {
  border: 1px solid #3a3a46; border-radius: 12px; padding: 11px 16px;
  background: var(--fond-3); color: var(--texte); font-size: .88rem; cursor: pointer;
  width: 100%; margin-top: 8px;
}
.progression-verif { margin: 10px 0; color: var(--texte-2); font-size: .82rem; }
.progression-verif .barre-prog { margin-top: 6px; }

/* ---------- Réglages ---------- */
#vue-reglages h2 { font-size: 1.15rem; margin: 4px 0 14px; }
.bloc-reglage {
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 14px; margin-bottom: 14px;
}
.bloc-reglage h3 { font-size: .95rem; color: var(--or); margin-bottom: 10px; }
.bloc-reglage small { color: var(--texte-2); }
.ligne-reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.ligne-reglage input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--or); }
.groupe-langues { display: flex; gap: 14px; }
.groupe-langues label { display: flex; align-items: center; gap: 5px; }
.champ-domaine { width: 100%; margin-top: 6px; }
#fichier-kenmei { margin-top: 6px; color: var(--texte-2); font-size: .82rem; max-width: 100%; }
#journal-maj .maj { margin-bottom: 10px; }
#journal-maj .maj-version { color: var(--or); font-weight: 700; font-size: .85rem; }
#journal-maj .maj-date { color: var(--texte-2); font-size: .75rem; margin-left: 6px; }
#journal-maj ul { margin: 4px 0 0 18px; color: var(--texte-2); font-size: .82rem; line-height: 1.55; }
.a-propos { text-align: center; color: var(--texte-2); font-size: .82rem; }

/* ---------- Vue série ---------- */
.vue-plein {
  position: fixed; inset: 0; background: var(--fond); z-index: 50;
  display: flex; flex-direction: column;
  animation: glisse-haut .2s ease-out;
}
.entete-serie {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--haut-sur)) 14px 10px;
  background: var(--fond-2); border-bottom: 1px solid #26262f;
}
.entete-serie h2 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-retour {
  border: 0; background: none; color: var(--texte); font-size: 1.5rem; cursor: pointer;
  width: 40px; height: 40px; flex-shrink: 0;
}
#serie-contenu { flex: 1; overflow-y: auto; padding: 14px; }
.serie-haut { display: flex; gap: 14px; margin-bottom: 14px; }
.serie-haut .sh-infos { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.serie-haut select {
  background: var(--fond-3); color: var(--texte); border: 1px solid #33333f;
  border-radius: 10px; padding: 8px 10px; font-size: .85rem;
}
/* Puce « Ch. N ▾ » qui ouvre le sélecteur maison */
.btn-chip-lu {
  border: 1px solid #4a3d15; background: #2a2312; color: var(--or);
  border-radius: 20px; padding: 5px 11px; font-size: .88rem; font-weight: 700;
  cursor: pointer; vertical-align: middle; margin: 0 2px; white-space: nowrap;
}
.btn-chip-lu:active { transform: scale(.96); }
.feuille-lu-zone { display: flex; gap: 8px; align-items: center; }
.liste-chapitres { margin-top: 14px; }
.ligne-chapitre {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; border-bottom: 1px solid #22222c; cursor: pointer;
}
.ligne-chapitre.lu { color: var(--texte-2); }
.ligne-chapitre.lu .lc-num::after { content: " ✓"; color: var(--vert); }
.lc-date { color: var(--texte-2); font-size: .76rem; }
.serie-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.serie-actions .btn-secondaire { margin-top: 0; }
/* « Continuer la lecture » est LE geste de la fiche : place juste
   sous les infos de la serie (donc visible sans defiler), et collant
   pour rester a portee de pouce quand on parcourt les chapitres. */
.serie-actions.principale {
  position: sticky; top: 0; z-index: 3;
  background: var(--fond);
  padding: 6px 0 10px; margin-bottom: 4px;
  box-shadow: 0 6px 10px -8px #000;
}

/* ---------- Lecteur ---------- */
#vue-lecteur { background: #000; }
#lecteur-barre-haut {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--haut-sur)) 12px 8px;
  background: linear-gradient(#000d, #0000);
  transition: opacity .25s; opacity: 1;
}
#lecteur-barre-haut.discret { opacity: 0; pointer-events: none; }
#lecteur-titre { font-size: .85rem; color: #fff; text-shadow: 0 1px 4px #000; flex: 1; min-width: 0; }
#btn-lecteur-faux { font-size: .72rem; padding: 4px 10px; flex-shrink: 0; }
#lecteur-defile {
  flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom; overflow-anchor: none;
  scrollbar-width: none; /* barre native masquee : voir #lecteur-progression */
}
#lecteur-defile::-webkit-scrollbar { display: none; }

/* Barre de progression DU CHAPITRE EN COURS uniquement — la barre
   native mesurait toute la session de lecture continue et perdait
   tout son sens au fil des chapitres. */
#lecteur-progression {
  position: absolute; right: 4px; top: 14%; bottom: 14%;
  width: 3px; border-radius: 3px; background: #ffffff1f;
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 4;
}
#lecteur-progression.visible { opacity: 1; }
#lecteur-progression-curseur {
  position: absolute; left: 0; right: 0; top: 0;
  border-radius: 3px; background: var(--or); min-height: 26px;
}
#lecteur-pages img { display: block; width: 100%; height: auto; background: #0a0a0a; }
.separateur-chapitre {
  text-align: center; color: var(--or); font-size: .82rem; font-weight: 700;
  padding: 18px 0 14px; letter-spacing: .5px;
  background: linear-gradient(#000, #14120a, #000);
}
/* Le format 16:9 est applique par le lecteur lui-meme (appliqueZoom
   pose la largeur en style inline) : une regle CSS serait toujours
   ecrasee — c'est le JS qui fait foi. */
#lecteur-fin { text-align: center; padding: 28px 20px 60px; color: var(--texte-2); }
#lecteur-fin .btn-principal { max-width: 420px; margin-top: 12px; }
#lecteur-chargement {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; background: #000c; z-index: 6;
  color: var(--texte-2);
}
.anneau {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #33333f; border-top-color: var(--or);
  animation: tourne 0.9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Accueil ---------- */
.section-accueil { margin-bottom: 20px; }
.titre-section { font-size: 1rem; margin: 4px 2px 10px; color: var(--texte); }
.titre-section .sous-titre { font-size: .72rem; color: var(--texte-2); font-weight: 400; margin-left: 6px; }
.rangee-cartes {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rangee-cartes::-webkit-scrollbar { display: none; }
.carte-mini {
  flex: 0 0 108px; width: 108px; cursor: pointer;
  background: var(--fond-2); border: 1px solid #24242e; border-radius: 12px; overflow: hidden;
  position: relative;
}
.carte-mini img { width: 100%; aspect-ratio: 3/4.3; object-fit: cover; background: var(--fond-3); display: block; }
.carte-mini .cm-nom {
  font-size: .72rem; padding: 6px 7px 8px; line-height: 1.35;
  /* le titre s'affiche en entier jusqu'à 3 lignes, puis « … » */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; min-height: 4.2em;
  overflow-wrap: anywhere;
}
.carte-mini .cm-badge {
  position: absolute; top: 6px; left: 6px;
  background: #000a; color: var(--or); font-size: .62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
}
.ligne-sortie {
  display: flex; align-items: center; gap: 11px;
  background: var(--fond-2); border: 1px solid #24242e; border-radius: 12px;
  padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.ligne-sortie img { width: 44px; height: 60px; object-fit: cover; border-radius: 7px; background: var(--fond-3); flex-shrink: 0; }
.ligne-sortie .ls-infos { flex: 1; min-width: 0; }
.ligne-sortie .ls-titre { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-sortie .ls-detail { font-size: .76rem; color: var(--texte-2); margin-top: 3px; }
.ligne-sortie .ls-detail .cs-neuf { margin-left: 6px; }
.ligne-sortie .ls-biblio { color: var(--or); font-size: .68rem; font-weight: 700; flex-shrink: 0; }

/* ---------- Recherche par tags ---------- */
.panneau-tags { margin: 10px 0; }
.chips-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; max-height: 300px; overflow-y: auto; }
.chip-groupe { flex-basis: 100%; color: var(--or); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-top: 6px; }
.chip {
  border: 1px solid #3a3a46; background: var(--fond-3); color: var(--texte-2);
  border-radius: 20px; padding: 6px 12px; font-size: .76rem; cursor: pointer;
}
.chip.actif { border-color: var(--or); color: var(--or); background: #2a2312; }

/* ---------- Réglages : listes déroulantes ---------- */
.ligne-reglage select {
  background: var(--fond-3); color: var(--texte); border: 1px solid #33333f;
  border-radius: 10px; padding: 8px 10px; font-size: .85rem; max-width: 46%;
}

/* ---------- Fiche série enrichie ---------- */
.btn-mini {
  border: 1px solid #3a3a46; background: var(--fond-3); color: var(--or);
  border-radius: 8px; width: 30px; height: 30px; font-size: 1.05rem; font-weight: 700;
  margin-left: 7px; cursor: pointer; vertical-align: middle;
}
.genres-serie { display: flex; flex-wrap: wrap; gap: 5px; }
.synopsis {
  color: var(--texte-2); font-size: .84rem; line-height: 1.55; margin: 2px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.synopsis.ouvert { display: block; -webkit-line-clamp: unset; }
.btn-lien {
  border: 0; background: none; color: var(--or); font-size: .78rem;
  padding: 4px 0 10px; cursor: pointer;
}
.dialogue-dl {
  background: var(--fond-2); border: 1px solid #3a3a46; border-radius: var(--rayon);
  padding: 12px; margin-bottom: 10px;
}
.dl-ligne { display: flex; gap: 8px; margin-bottom: 8px; }
.dl-ligne .btn-secondaire { margin-top: 0; }
.dl-ligne input[type="number"] {
  background: var(--fond-3); color: var(--texte); border: 1px solid #33333f;
  border-radius: 10px; padding: 9px 10px; font-size: .88rem; width: 90px;
}

/* ---------- Feuille d'ajout (inspirée Kenmei) ---------- */
.feuille-fond {
  position: fixed; inset: 0; background: #000a; z-index: 90;
  display: flex; align-items: flex-end; justify-content: center;
  animation: apparait .15s ease-out;
}
.feuille {
  background: var(--fond-2); border: 1px solid #33333f; border-radius: 18px 18px 0 0;
  width: 100%; max-width: 560px; max-height: calc(94 * var(--u-dvh, 1dvh));
  overflow-y: auto; overflow-x: hidden;
  animation: glisse-haut .2s ease-out;
}
/* Couverture ENTIÈRE en grand, façon Kenmei — et carrousel : on
   balaye vers la droite pour feuilleter les premières pages */
.feuille-banniere { position: relative; width: 100%; background: #000; }
.feuille-carrousel {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  width: 100%; height: min(calc(72 * var(--u-dvh, 1dvh)), 680px);
}
.feuille-carrousel::-webkit-scrollbar { display: none; }
.feuille-carrousel img {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: contain; scroll-snap-align: center; display: block;
}
/* Bande de webtoon : cadrée pleine largeur, par segments lisibles */
.feuille-carrousel img.slide-bande { object-fit: cover; }
.feuille-banniere-titre {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 16px 10px;
  background: linear-gradient(transparent, #000d);
  pointer-events: none;
}
.feuille-banniere-titre .cs-date { color: #cfcbc2; }
#feuille-indice-swipe { font-size: .7rem; opacity: .8; }
/* Chapitres disponibles : LA ligne qui fait decider — grande, en
   encart contraste sur la couverture, le nombre en or. */
#feuille-chapitres {
  display: block; max-width: 100%; margin: 8px 0 6px;
  font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.4;
  background: #000c; border: 1px solid #ffffff2a; border-radius: 12px;
  padding: 8px 12px; text-shadow: 0 1px 3px #000;
}
#feuille-chapitres b.or { font-size: 1.15rem; font-weight: 800; }
#feuille-chapitres .fc-langues { display: block; font-size: .92rem; font-weight: 500; color: #e8e6e3; margin-top: 2px; }
#feuille-chapitres .fc-recent { display: block; font-size: .8rem; font-weight: 400; color: #cfcbc2; margin-top: 2px; }
@media (min-width: 600px) {
  #feuille-chapitres { font-size: 1.1rem; }
  #feuille-chapitres b.or { font-size: 1.28rem; }
}
.feuille-corps {
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* Écran ouvert (large) : image à gauche, synopsis et options à droite */
@media (min-width: 900px) {
  .feuille-fond { align-items: center; }
  .feuille { max-height: calc(86 * var(--u-dvh, 1dvh)); border-radius: 18px; }
  /* Côte à côte : seulement les fenêtres à image (fiche d'ajout). Messages de
     l'administrateur, réponses aux demandes, commentaires : en colonne */
  .feuille:has(> .feuille-banniere) { flex-direction: row; display: flex; max-width: 1080px; }
  .feuille-banniere { width: 46%; flex-shrink: 0; }
  .feuille-carrousel { height: 100%; min-height: 480px; }
  .feuille-corps { flex: 1; overflow-y: auto; }
}
.feuille-titre { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; text-shadow: 0 1px 4px #000; }
.feuille .ligne-reglage select, .feuille .ligne-reglage input {
  background: var(--fond-3); color: var(--texte); border: 1px solid #33333f;
  border-radius: 10px; padding: 9px 10px; font-size: .88rem;
}
.feuille .btn-principal { margin-top: 10px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%);
  background: #26262f; color: var(--texte); border: 1px solid #3a3a46;
  border-radius: 12px; padding: 10px 18px; font-size: .85rem; z-index: 99;
  max-width: calc(88 * var(--u-vw, 1vw)); text-align: center;
}

/* ============================================================
   Fold 8 déplié (>= 600dp de large) : mises en page étendues
   ============================================================ */
/* ---------- Bannière feuilletable de la fiche ----------
   La couverture s'affiche en grand dès l'ouverture ; on balaye vers
   la droite pour parcourir le début du chapitre. La hauteur reste
   mesurée pour que « Continuer la lecture », juste dessous, ne parte
   pas hors de l'écran. */
.serie-banniere {
  position: relative; width: 100%; background: #000;
  border-radius: var(--rayon); overflow: hidden;
  margin-bottom: 12px;
}
#serie-carrousel { height: min(calc(46 * var(--u-dvh, 1dvh)), 420px); }
.serie-banniere .feuille-banniere-titre { padding: 34px 14px 8px; }
#serie-indice-swipe { font-size: .7rem; opacity: .85; color: #cfcbc2; }

/* ---------- Communauté : œuvres liées, lecteurs, notes ---------- */
.bloc-liees {
  background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon);
  padding: 12px 14px; margin: 12px 0;
}
.liee-anime { color: var(--texte-2); font-size: .82rem; margin: 4px 0 10px; }
.liee {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid #22222b; cursor: pointer;
}
.liee:first-of-type { border-top: 0; }
.liee-type {
  flex: 0 0 auto; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--or); background: #2a2312;
  padding: 3px 8px; border-radius: 20px; min-width: 56px; text-align: center;
}
.liee img { width: 34px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--fond-3); flex-shrink: 0; }
.liee-titre { flex: 1; min-width: 0; font-size: .88rem; }
.liee-deja { font-size: .7rem; color: var(--vert); flex-shrink: 0; }

.notes-conso { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nc-note { color: var(--or); font-size: 1.25rem; font-weight: 700; }
.nc-note small { font-size: .72rem; color: var(--texte-2); font-weight: 400; }
.nc-detail { color: var(--texte-2); font-size: .78rem; line-height: 1.5; }
.nc-detail b { color: var(--texte); }

.lect-titre { font-size: .76rem; color: var(--or); text-transform: uppercase; letter-spacing: .6px; margin: 6px 0 8px; }
.lect-ligne { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: .8rem; }
.lect-nom { flex: 0 0 84px; color: var(--texte-2); }
.lect-barre { flex: 1; height: 6px; background: #22222b; border-radius: 4px; overflow: hidden; }
.lect-barre i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.lect-ligne.abandon .lect-barre i { background: var(--rouge); }
.lect-val { flex: 0 0 40px; text-align: right; color: var(--texte-2); }
.lg-note .bon { color: var(--vert); }
.lg-note .mauvais { color: var(--rouge); font-weight: 600; }
#serie-lecteurs { margin-bottom: 12px; }

.carte-mini { position: relative; }
.cm-votes {
  position: absolute; left: 6px; top: 6px;
  background: #000c; color: #fff; font-size: .66rem; font-weight: 700;
  padding: 2px 7px; border-radius: 12px;
}

/* ---------- Où en est chaque langue (fiche série) ---------- */
.bloc-langues {
  background: var(--fond-2); border: 1px solid #24242e;
  border-radius: var(--rayon); padding: 12px 14px; margin: 12px 0;
}
.lg-titre {
  font-size: .74rem; color: var(--or); text-transform: uppercase;
  letter-spacing: .6px; font-weight: 700; margin-bottom: 10px;
}
.lg-ligne {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 8px; margin-bottom: 8px;
}
.lg-drapeau { font-size: 1rem; }
.lg-barre { height: 7px; background: #2a2a35; border-radius: 4px; overflow: hidden; }
.lg-barre > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4a6ad0, var(--accent)); }
.lg-num { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.lg-vitesse {
  grid-column: 2 / -1; font-size: .74rem; color: var(--texte-2); margin-top: -4px;
}
.lg-note {
  font-size: .8rem; line-height: 1.5; color: var(--texte);
  background: #1a1b2b; border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 8px 10px; margin-top: 10px;
}
.lg-note.bon { background: #14251c; border-left-color: var(--vert); }

/* ============================================================
   DÉCOUVERTES — une fiche par écran, à valider ou à écarter
   ============================================================ */
.dec-compteur { margin-left: auto; color: var(--texte-2); font-size: .8rem; flex-shrink: 0; }
#dec-contenu { flex: 1; overflow-y: auto; }
.dec-attente {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 60px 20px; color: var(--texte-2);
}
.dec-carte { padding-bottom: 16px; }
.dec-banniere {
  position: relative; height: 310px; overflow: hidden; background: var(--fond-3);
}
.dec-banniere img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.dec-banniere::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, var(--fond) 100%);
}
.dec-corps { padding: 0 16px; margin-top: -26px; position: relative; z-index: 1; }
.dec-titre { font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.dec-alt { color: var(--texte-2); font-size: .78rem; margin-top: 3px; }
.dec-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.dec-pourquoi {
  background: #1a1b2b; border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 10px 12px; margin: 12px 0;
  font-size: .85rem; line-height: 1.5; color: var(--texte);
}
.dec-sous-titre {
  font-size: .78rem; color: var(--or); text-transform: uppercase;
  letter-spacing: .6px; margin: 16px 0 8px;
}
.dec-notes { margin: 12px 0; }
.dec-carte .chips-tags { margin: 12px 0; }
.dec-carte .synopsis { margin-top: 8px; }

/* Note moyenne + distribution complète des votes */
.dn-ligne { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dn-note { color: var(--or); font-size: 1.25rem; font-weight: 700; }
.dn-note small { font-size: .72rem; color: var(--texte-2); font-weight: 400; }
.dn-detail { color: var(--texte-2); font-size: .78rem; }
.dn-histo {
  display: flex; align-items: flex-end; gap: 3px; height: 32px; margin-top: 6px;
}
.dn-barre { flex: 1; height: 100%; display: flex; align-items: flex-end; background: #1c1c24; border-radius: 2px; }
.dn-barre i { display: block; width: 100%; background: linear-gradient(#f5d76e, #8a6d1f); border-radius: 2px; min-height: 1px; }

/* Un avis de lecteur (fiche, feuille d'ajout, entracte du lecteur) */
.avis {
  background: var(--fond-2); border: 1px solid #24242e; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.avis-haut { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.avis-auteur { font-size: .8rem; font-weight: 600; color: var(--texte); }
.avis-reactions { font-size: .74rem; color: var(--or); }
.avis-date { font-size: .72rem; color: var(--texte-2); margin-left: auto; }
.avis-texte { font-size: .84rem; line-height: 1.5; color: var(--texte-2); }

/* Les trois réponses, toujours à portée de pouce */
.dec-actions {
  display: flex; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--fond-2); border-top: 1px solid #26262f;
}
.dec-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px; border-radius: 12px; cursor: pointer;
  background: var(--fond-3); border: 1px solid #33333f; color: var(--texte);
  font-size: 1.15rem; transition: transform .12s;
}
.dec-btn span { font-size: .7rem; color: var(--texte-2); }
.dec-btn:active { transform: scale(.95); }
.dec-btn.non { border-color: #5a3030; color: var(--rouge); }
.dec-btn.tard { border-color: #4a4020; color: var(--orange); }
.dec-btn.oui { border-color: #2f5a44; color: var(--vert); }
.dec-bilan { text-align: center; padding: 50px 20px; }
.dec-bilan h3 { color: var(--or); margin-bottom: 8px; }
.dec-bilan p { color: var(--texte-2); font-size: .85rem; margin-bottom: 18px; }
.dec-bilan .btn-principal, .dec-bilan .btn-secondaire { max-width: 380px; margin: 0 auto 10px; }

/* Découvertes sur ordinateur (ticket du 03/10/2026) : l'écran large est
   exploité en trois colonnes — l'affiche entière du manga à gauche (elle
   reste en place), la fiche au centre (elle défile), et les trois choix
   les uns sous les autres à droite, toujours sous la souris. */
@media (min-width: 900px) {
  html.ordinateur #vue-decouvertes { display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: auto minmax(0, 1fr); }
  html.ordinateur #vue-decouvertes > .entete-serie { grid-column: 1 / -1; }
  html.ordinateur #dec-contenu { grid-column: 1; grid-row: 2; min-height: 0; }
  html.ordinateur #dec-contenu > .dec-carte { display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1100px; margin: 0 auto; padding: 22px 26px 30px; }
  html.ordinateur .dec-banniere { height: auto; aspect-ratio: 2 / 3; border-radius: 14px; position: sticky; top: 22px; box-shadow: 0 10px 30px #0008; }
  html.ordinateur .dec-banniere img { object-position: center top; }
  html.ordinateur .dec-banniere::after { display: none; }
  html.ordinateur .dec-corps { margin-top: 0; padding: 0; }
  html.ordinateur .dec-titre { font-size: 1.6rem; }
  html.ordinateur #dec-actions:not(.cache) { grid-column: 2; grid-row: 2; flex-direction: column; justify-content: center; gap: 14px; max-width: none; margin: 0; padding: 24px 18px; border-top: 0; border-left: 1px solid #26262f; }
  html.ordinateur .dec-btn { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 18px 18px; font-size: 1.5rem; cursor: pointer; transition: transform .12s, background .15s; }
  html.ordinateur .dec-btn span { font-size: .95rem; font-weight: 600; color: var(--texte); }
  html.ordinateur .dec-btn:hover { transform: translateX(-3px); background: #1d1d26; }
  html.ordinateur .dec-btn.oui { order: -1; }   /* « Ajouter » en premier, sous la main */
}

/* ---------- Entracte entre deux chapitres ----------
   Le séparateur devient un vrai écran d'avis sur le chapitre qu'on
   vient de terminer. Sans commentaire à montrer, il reste la simple
   ligne d'origine — jamais d'écran vide à traverser. */
.separateur-chapitre[data-avis] {
  padding: 22px 16px 26px; text-align: left; letter-spacing: normal; font-weight: 400;
}
.separateur-chapitre[data-avis] .sep-titre {
  color: var(--or); font-weight: 700; font-size: .82rem;
  letter-spacing: .5px; text-align: center; margin-bottom: 16px;
}
.separateur-chapitre[data-avis] .sep-avis { max-width: 680px; margin: 0 auto; }
.separateur-chapitre[data-avis] .sep-avis h4 {
  font-size: .76rem; color: var(--texte-2); text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 10px; font-weight: 600;
}
/* En mode livre, l'entracte occupe une planche entière : on le
   tourne comme une page, et il défile si les avis sont longs. */
#lecteur-pages .section-chapitre.double .separateur-chapitre[data-avis] {
  display: block; flex: 0 0 100%; width: 100%; height: 100%;
  overflow-y: auto; scroll-snap-align: start;
  padding: 26px 30px;
  /* Le reste du mode livre verrouille l'axe vertical ; ici, il faut
     pouvoir descendre dans les avis. Le defilement reste enferme
     dans le panneau : il ne deborde jamais sur la lecture. */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
}
/* En mode livre, un écran = UN chapitre. Le chapitre voisin garde sa
   place (le défilement reste juste) mais ne peut ni s'afficher ni
   être balayé par erreur. */
#vue-lecteur.paginee #lecteur-pages .section-chapitre.double:not(.courante) {
  visibility: hidden;
}

@media (min-width: 600px) {
  #dec-contenu > .dec-carte { max-width: 760px; margin: 0 auto; }
  .dec-banniere { height: 400px; }
  .dec-actions { max-width: 760px; margin: 0 auto; width: 100%; }
  #contenu { padding: 12px 18px 24px; }
  /* Écran interne : trois colonnes de cartes plus compactes */
  .liste-series { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
  .carte-serie { padding: 8px; gap: 10px; }
  .carte-serie img.cs-cover { width: 56px; height: 80px; }
  .cs-titre { font-size: .9rem; }
  .section-accueil { margin-bottom: 14px; }
  .titre-section { margin: 2px 2px 8px; }
  .grille-resultats { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  #lecteur-pages { max-width: 760px; margin: 0 auto; }
  #serie-contenu { max-width: 900px; margin: 0 auto; width: 100%; }
  #serie-carrousel { height: min(calc(52 * var(--u-dvh, 1dvh)), 520px); }
  #vue-reglages { max-width: 720px; margin: 0 auto; }
  .carte-mini { flex-basis: 116px; width: 116px; }
  #vue-accueil { max-width: 1100px; margin: 0 auto; }
  .liste-sorties-globales { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ligne-sortie { margin-bottom: 0; }
}

/* ============================================================
   WEB NOVEL — bloc de la fiche et lecteur texte
   ============================================================ */
.bloc-novel .nv-ligne { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; line-height: 1.5; margin-bottom: 8px; }
.bloc-novel .nv-ligne small { color: var(--texte-2); }
.bloc-novel .nv-ico { color: var(--or); width: 18px; flex-shrink: 0; text-align: center; }
.bloc-novel .nv-lire { margin-top: 4px; }
.nv-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.nv-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.nv-form label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--texte-2); }
.nv-form input[type="number"], .nv-form input[type="text"], .nv-cle input {
  background: var(--fond-3); color: var(--texte); border: 1px solid #33333f;
  border-radius: 10px; padding: 9px 10px; font-size: .88rem;
}
.nv-form input[type="number"] { width: 96px; }
.nv-form input[type="text"] { width: 100%; }
.nv-form .btn-secondaire { margin-top: 0; }
.nv-cle { display: flex; gap: 8px; margin-top: 8px; }
.nv-cle input { flex: 1; min-width: 0; }
.nv-cle .btn-secondaire { width: auto; margin-top: 0; flex-shrink: 0; }

#vue-novel .nv-titres { flex: 1; min-width: 0; }
#vue-novel .nv-sous { font-size: .72rem; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vue-novel .nv-outil { margin-left: 4px; font-size: .8rem; width: 34px; height: 32px; }
.nv-barre { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--fond-2); border-bottom: 1px solid #26262f; }
.nv-barre .segments { flex: 0 0 auto; max-width: 60%; }
.nv-etat { font-size: .72rem; color: var(--texte-2); flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#novel-defile { flex: 1; overflow-y: auto; padding: 18px 18px 40px; -webkit-overflow-scrolling: touch; }
.nv-texte { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.nv-texte p { margin: 0 0 1em; text-align: left; }
.nv-fin { max-width: 720px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 6px; }
.nv-fin .btn-lien { align-self: flex-start; }
#vue-novel.sepia { background: #f3e9d2; }
#vue-novel.sepia #novel-defile { background: #f3e9d2; }
#vue-novel.sepia .nv-texte { color: #2b2418; }
@media (min-width: 600px) {
  .nv-texte { font-size: 18px; }
  #novel-defile { padding: 24px 40px 60px; }
}

/* Barre Continuer : le bouton Novel a cote du bouton principal */
.serie-actions.principale { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.serie-actions.principale #serie-continuer { flex: 1; min-width: 0; }
.serie-actions.principale .nv-sticky { width: auto; margin-top: 0; flex: 0 0 auto; white-space: nowrap; border-color: #4a3d15; color: var(--or); background: #2a2312; }

/* Liste des chapitres du web novel */
.nv-outils { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.nv-liste-chapitres { margin-top: 6px; max-height: calc(60 * var(--u-vh, 1vh)); overflow-y: auto; border: 1px solid #22222c; border-radius: 10px; }
.nv-row .lc-date { white-space: nowrap; margin-left: 8px; }
.nv-row.en-cours { border-left: 3px solid var(--or); background: #1a1710; }

/* ============================================================
   SÉLECTEUR DE CHAPITRE — feuille noir et or (remplace le menu natif)
   ============================================================ */
.choix-fond {
  position: fixed; inset: 0; background: #000b; z-index: 95;
  display: flex; align-items: flex-end; justify-content: center;
  animation: apparait .15s ease-out;
}
.choix {
  width: 100%; max-width: 560px; max-height: calc(72 * var(--u-vh, 1vh));
  background: var(--fond-2); border: 1px solid #3a3320; border-bottom: 0;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
  animation: glisse-haut .2s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.choix-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 8px 8px 16px; border-bottom: 1px solid #26262f;
}
.choix-titre {
  font-size: .78rem; color: var(--or); text-transform: uppercase;
  letter-spacing: .7px; font-weight: 700;
}
.choix-fermer { font-size: 1.1rem; color: var(--texte-2); }
.choix-saut { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #26262f; }
.choix-saut input {
  flex: 1; min-width: 0; background: var(--fond-3); color: var(--texte); border: 1px solid #33333f;
  border-radius: 10px; padding: 10px 12px; font-size: .95rem;
}
.choix-saut .btn-secondaire { width: auto; margin-top: 0; padding: 10px 16px; border-color: #4a3d15; color: var(--or); }
.choix-liste { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 12px; }
.choix-ligne {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid #1f1f28; font-size: .95rem; cursor: pointer;
}
.choix-ligne:active { background: var(--fond-3); }
.choix-ligne.actif { color: var(--or); background: #1f1a0e; border-left: 3px solid var(--or); padding-left: 15px; }
.choix-ligne.zero { color: var(--texte-2); }
.choix-coche { font-size: .74rem; color: var(--or); font-weight: 700; }
@media (min-width: 600px) {
  .choix-fond { align-items: center; }
  .choix { border-radius: 18px; border-bottom: 1px solid #3a3320; max-height: calc(80 * var(--u-vh, 1vh)); }
}

/* Feuille d'ajout : disponibilité par source, avant d'ajouter */
.feuille-sources { margin: 10px 0 12px; }
.feuille-sources .lg-titre { margin-bottom: 6px; }
.fsrc {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 8px 10px; border: 1px solid #24242e; border-radius: 10px; margin-bottom: 6px;
  background: var(--fond-3); font-size: .84rem;
}
.fsrc-nom { font-weight: 700; }
.fsrc-nom small { color: var(--or); font-weight: 600; }
.fsrc-max { text-align: right; white-space: nowrap; }
.fsrc-max b { color: var(--or); }
.fsrc-max small { color: var(--texte-2); }
.fsrc-langues { font-size: .9rem; }
.fsrc-date { text-align: right; color: var(--texte-2); font-size: .74rem; }
.fsrc.douteuse { opacity: .6; }
.fsrc.principale { border-color: #4a3d15; }

/* Indicateur d'activité (recherches en arrière-plan), à côté de la roue */
.indicateur-activite { display: none; align-items: center; gap: 6px; margin-right: 6px; cursor: pointer; }
.indicateur-activite.actif { display: inline-flex; }
.mini-anneau {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #4a3d15; border-top-color: var(--or-clair);
  animation: tourne .9s linear infinite;
}
.ia-libelle { display: none; font-size: .72rem; color: var(--or); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-nombre { font-size: .7rem; color: var(--or); font-weight: 700; }
@media (min-width: 600px) { .ia-libelle { display: inline; } }

/* Rangées +18 de l'accueil */
.titre-adultes { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-weight: 700; font-size: 1rem; }
.titre-adultes .sous-titre { font-weight: 400; font-size: .72rem; color: var(--texte-2); }
.pastille-18 { background: #5a1a1a; color: #ffb4b4; border: 1px solid #8a2a2a; border-radius: 8px; padding: 2px 7px; font-size: .74rem; font-weight: 800; letter-spacing: .5px; }

/* Fiche en deux colonnes sur l'écran interne du Fold, en paysage :
   à gauche les informations, réglages et actions ; à droite la liste
   des chapitres, de la même hauteur, avec son propre défilement ;
   en bas, pleine largeur, les avis et les recommandations. */
@media (min-width: 600px) and (orientation: landscape) {
  .fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .fiche-gauche { min-width: 0; }
  /* Collante : reste en vue tant que la grille est à l'écran, remonte
     avec elle dès que les avis (pleine largeur) arrivent. Sa hauteur est
     posée par l'app = zone visible (repli CSS si jamais). */
  .fiche-droite {
    position: sticky; top: 0; min-width: 0; min-height: 0;
    height: calc(calc(100 * var(--u-dvh, 1dvh)) - 110px);
  }
  .fiche-droite .liste-chapitres {
    height: 100%; box-sizing: border-box; overflow-y: auto; margin-top: 0;
    border: 1px solid #24242e; border-radius: 12px; background: var(--fond-2);
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .fiche-droite .ligne-chapitre { padding: 12px 14px; }
}

/* Liste des chapitres repliable (écran externe, écran interne en portrait) */
.entete-chapitres { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 0 2px; }
.entete-chapitres .ec-titre { font-size: .74rem; color: var(--or); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.entete-chapitres .btn-lien { padding: 6px 0; }
/* Ordre des chapitres (⇅) et « Où j'en suis », côte à côte */
.entete-chapitres .ec-actions { display: flex; align-items: center; gap: 14px; }
#fv-ordre-chapitres { color: var(--texte-2); white-space: nowrap; }
.entete-chapitres + .liste-chapitres { margin-top: 6px; }
.liste-chapitres.reduite .ligne-chapitre:nth-child(n+9) { display: none; }
@media (min-width: 600px) and (orientation: landscape) {
  /* La colonne collante a déjà son défilement : pas de repli ici */
  .fiche-droite .entete-chapitres { display: none; }
  .fiche-droite .liste-chapitres.reduite .ligne-chapitre { display: flex; }
}

/* Sections spéciales de l'accueil : ecchi (ambre) / +18 explicite (rouge) */
.section-speciale { margin-top: 6px; }
.pastille-18.ecchi { background: #4a3210; color: #ffd27a; border-color: #7a5a20; }
.pastille-18.explicite { background: #5a1a1a; color: #ffb4b4; border-color: #8a2a2a; }

/* Sections de l'accueil en grand */
.titre-section.cliquable { cursor: pointer; }
.pastille.cliquable { cursor: pointer; }
.titre-section.cliquable::after { content: ' ›'; color: var(--or); font-weight: 700; }
#section-contenu { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px 10px; }
.grille-cartes .carte-mini { width: auto; }
.grille-cartes .carte-mini img { width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; }
.section-pied { text-align: center; padding: 18px 0 30px; }
@media (min-width: 600px) { .grille-cartes { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } }

.pastille-18.mature { background: #23233a; color: #c3c3ff; border-color: #45457a; }

/* Icônes de contenu (ecchi / adulte non sexuel / +18) à côté de la roue :
   même facture que la barre du bas — forme en masque SVG, or animé quand
   actif, gris barré quand coupé. */
.filtres-contenu { display: inline-flex; gap: 6px; margin-right: 8px; align-items: center; }
.btn-contenu {
  position: relative; width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid #2c2c36; background: #14141b;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease, border-color .15s ease;
}
.btn-contenu:active { transform: scale(.92); }
.btn-contenu .ico {
  width: 17px; height: 17px; display: block; background: #4f4b45;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
/* Coupé : icône grise barrée d'un trait */
.btn-contenu:not(.actif)::after {
  content: ''; position: absolute; width: 1.5px; height: 20px; border-radius: 1px;
  background: #6a6660; transform: rotate(45deg);
}
/* Actif : anneau or discret et icône en or à reflet */
.btn-contenu.actif { border-color: #4a3d15; background: #1a160b; box-shadow: 0 0 6px #d4af3733 inset; }
.btn-contenu.actif .ico {
  background: linear-gradient(100deg, #8a6d1f 0%, var(--or) 30%, #fff6c9 50%, var(--or) 70%, #8a6d1f 100%);
  background-size: 220% 100%;
  animation: reflet-or 9s linear infinite;
}
.ico-ecchi { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2S4.6 15.6 4.6 9.9a4.1 4.1 0 0 1 7.4-2.4 4.1 4.1 0 0 1 7.4 2.4c0 5.7-7.4 10.3-7.4 10.3z'/%3E%3C/svg%3E"); }
.ico-mature { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4a7.2 7.2 0 0 0-7.2 7.2c0 2.7 1.4 4.6 3.1 5.7v3.2h8.2v-3.2c1.7-1.1 3.1-3 3.1-5.7A7.2 7.2 0 0 0 12 3.4z'/%3E%3Ccircle cx='9.2' cy='11' r='1.6'/%3E%3Ccircle cx='14.8' cy='11' r='1.6'/%3E%3Cpath d='M12 13.1l-1 1.7h2z'/%3E%3Cpath d='M10 19.5v2M12 19.5v2M14 19.5v2'/%3E%3C/svg%3E"); }
.ico-explicite { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8.9 8.6v6.8M7.6 9.7l1.3-1.1'/%3E%3Ccircle cx='14.1' cy='10.2' r='1.75'/%3E%3Ccircle cx='14.1' cy='13.9' r='1.95'/%3E%3C/svg%3E"); }

/* Source dont les chapitres n'ont pas d'images (hébergés hors site) */
.fsrc.illisible { opacity: .6; }
.fsrc.illisible .fsrc-date { color: #e08c8c; }

/* Aperçu arrivé : glissement vers la gauche puis rebond sur le bord droit */
@keyframes glisse-indice {
  0% { transform: translateX(0); }
  38% { transform: translateX(-58px); }
  64% { transform: translateX(12px); }
  82% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
.feuille-carrousel.indice-glisse img { animation: glisse-indice 1.25s cubic-bezier(.25, .8, .35, 1) 1 both; }

/* Réglages → Œuvres masquées */
.ligne-masquee { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #22222c; }
.ligne-masquee img { width: 34px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--fond-3); flex-shrink: 0; }
.ligne-masquee .lm-titre { flex: 1; min-width: 0; font-size: .86rem; }
.ligne-masquee .btn-lien { padding: 6px 0; }

/* Feuille d'ajout : actions en tête */
.feuille-actions-haut { display: flex; gap: 8px; margin: 8px 0 4px; }
.feuille-actions-haut .btn-secondaire { margin-top: 0; flex: 1; }

/* Doublons de bibliothèque */
.bandeau-doublons {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #2a2312; border: 1px solid #4a3d15; border-radius: 12px; padding: 8px 12px;
  margin-bottom: 8px; font-size: .84rem; color: var(--or);
}
.bandeau-doublons .btn-lien { padding: 4px 0; }
.groupe-doublon { border: 1px solid #24242e; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--fond-3); }
.gd-entete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gd-serie { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #22222c; cursor: pointer; }
.gd-serie input[type="radio"] { accent-color: var(--or); width: 18px; height: 18px; flex-shrink: 0; }
.gd-serie img { width: 38px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--fond-2); flex-shrink: 0; }
.gd-infos { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.35; }
.gd-infos small { color: var(--texte-2); }
.gd-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.gd-actions .btn-lien { align-self: flex-start; }

/* Réglages : sous-bloc (dossier de sauvegarde externe) */
.sous-bloc { margin-top: 14px; padding-top: 12px; border-top: 1px solid #24242e; }
.sous-bloc .lg-titre { margin-bottom: 6px; }
.sous-bloc .cs-date { margin-bottom: 8px; line-height: 1.45; }

/* Réglages : bloc dépliable (menu déroulant) — replié par défaut */
.depliable > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; -webkit-tap-highlight-color: transparent;
}
.depliable > summary::-webkit-details-marker { display: none; }
.depliable > summary h3 { margin: 0; }
.depliable .dp-compte { font-weight: 500; color: #c9a227; margin-left: 4px; }
.depliable .dp-chevron {
  color: #c9a227; font-size: 18px; line-height: 1; transition: transform .2s ease;
  transform: rotate(-90deg);
}
.depliable[open] .dp-chevron { transform: rotate(0deg); }
.depliable > :not(summary) { margin-top: 10px; }

/* Accueil : carte jamais montrée avant la donne en cours (point doré) */
.carte-mini.cm-inedit .cm-nom::before { content: '● '; color: #e2b93b; font-size: 9px; vertical-align: 1px; }
/* Fusion des classements : présente sur plusieurs sites */
.carte-mini .cm-sites {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: rgba(0, 0, 0, .74); color: #e2b93b; border: 1px solid rgba(226, 185, 59, .55);
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 9px; letter-spacing: .2px;
}

/* Fiche : étoile de favori dans l'en-tête, à droite du titre */
#vue-serie .entete-serie h2 { flex: 1; min-width: 0; }
.cs-etoile.etoile-entete { position: static; margin-left: auto; flex-shrink: 0; width: 42px; height: 42px; }
.cs-etoile.etoile-entete svg { width: 24px; height: 24px; }

/* Fiche : équipe en pause (bascule de source) */
.alerte-source {
  margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #6b5518; background: #221b0a; color: #e8d9a8;
  font-size: .86rem; line-height: 1.45;
}
.alerte-source b { color: #e2b93b; }
.alerte-source .alerte-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.alerte-source .btn-principal { padding: 6px 12px; font-size: .84rem; }
.fs-ligne.bascule .fs-detail { color: #e2b93b; }

/* ===== Mode Anime ===== */
.nom-app { cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; }
.nom-app::after { content: '⇄'; font-size: .6em; color: #8a6d1f; margin-left: 6px; vertical-align: middle; }
.mode-anime .nom-app { color: #e2b93b; }
.mode-anime #filtres-contenu, .mode-anime #filtre-collection, .mode-anime #source-recherche,
.mode-anime #panneau-tags, .mode-anime #btn-panneau-tags, .mode-anime #biblio-vide,
.mode-anime #carte-reprise, .mode-anime #rangees-adultes, .mode-anime #entree-decouvertes,
.mode-anime #bandeau-doublons { display: none !important; }
.mode-anime #vue-accueil > :not(#rangee-meilleurs):not(#rangees-tournantes) { display: none; }
.mode-anime #vue-accueil > #rangee-meilleurs, .mode-anime #vue-accueil > #rangees-tournantes { display: block; }
.carte-anime .cs-cover { aspect-ratio: 3/4; }
.bloc-episodes { margin-top: 14px; }
.bloc-episodes .saison { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #24242e; border-radius: 12px; background: var(--fond-2); }
.bloc-episodes .saison summary h3 { font-size: 1rem; margin: 0; }
.liste-episodes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ligne-episode { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--fond-3); cursor: pointer; }
.ligne-episode.lu { opacity: .55; }
.ligne-episode .ep-num { font-weight: 600; min-width: 92px; }
.ligne-episode .ep-info { flex: 1; font-size: .82rem; color: #9a9aa8; }
.ligne-episode .btn-mini { width: 36px; height: 32px; }
.ligne-episode .ep-lire { color: #e2b93b; border-color: #4a3d15; }
.bloc-synopsis { margin-top: 12px; }

/* ===== Fiche anime : en-tête et épisodes ===== */
.fiche-anime .serie-haut { display: flex; gap: 14px; align-items: flex-start; }
.fiche-anime .serie-cover {
  width: 118px; height: 168px; object-fit: cover; border-radius: 10px;
  background: var(--fond-3); flex-shrink: 0; box-shadow: 0 4px 14px #0008;
}
.fiche-anime .sh-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fiche-anime .sh-infos select { max-width: 100%; }
.fiche-anime .btn-principal { width: 100%; padding: 12px 14px; font-size: .95rem; }
.fiche-anime .bloc-synopsis { margin-top: 12px; }
.fiche-anime .synopsis-texte { font-size: .9rem; line-height: 1.5; color: #c8c8d2; }
.fiche-anime .saison summary h3 { font-size: 1.02rem; }
.fiche-anime .saison .dp-compte { font-size: .8rem; }
.fiche-anime .saison-actions { display: flex; justify-content: flex-end; margin: 6px 0 2px; }
.fiche-anime .ligne-episode {
  min-height: 56px; padding: 8px 10px 8px 14px; gap: 12px;
  border: 1px solid transparent;
}
.fiche-anime .ligne-episode:active { border-color: #4a3d15; }
.fiche-anime .ligne-episode .ep-num { min-width: 96px; font-size: .95rem; }
.fiche-anime .ligne-episode .ep-info { font-size: .8rem; }
.fiche-anime .ligne-episode .btn-mini { width: 44px; height: 40px; font-size: 1.05rem; border-radius: 10px; }
.fiche-anime .ligne-episode .ep-lire { background: #2a2312; color: #e2b93b; border: 1px solid #6b5518; }
.fiche-anime .ligne-episode.lu .ep-num { text-decoration: line-through; }
/* Écran étroit (téléphone replié, portrait) : le texte d'info passe sous le numéro */
@media (max-width: 520px) {
  .fiche-anime .serie-cover { width: 96px; height: 138px; }
  .fiche-anime .ligne-episode { flex-wrap: wrap; }
  .fiche-anime .ligne-episode .ep-num { min-width: 0; flex: 1 1 auto; }
  .fiche-anime .ligne-episode .ep-info { flex-basis: 100%; order: 3; padding-left: 0; }
}

/* Fiche anime : vignette et titre d'épisode */
.fiche-anime .ligne-episode .ep-mini { width: 104px; height: 58px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--fond-2); }
.fiche-anime .ligne-episode .ep-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fiche-anime .ligne-episode .ep-texte .ep-num { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiche-anime .ligne-episode .ep-titre { font-weight: 400; color: #c8c8d2; font-size: .9rem; }
.fiche-anime .ligne-episode.avec-mini { padding-left: 8px; }
@media (max-width: 520px) {
  .fiche-anime .ligne-episode .ep-mini { width: 84px; height: 47px; }
  .fiche-anime .ligne-episode .ep-texte { flex-basis: auto; }
  .fiche-anime .ligne-episode .ep-texte .ep-num { white-space: normal; }
}

/* Fiche anime : volet des épisodes (même mécanique que les chapitres) */
.fiche-anime .volet-episodes { margin-top: 14px; }
@media (min-width: 600px) and (orientation: landscape) {
  .fiche-anime .fiche-droite .volet-episodes { padding: 10px; margin-top: 0; }
  .fiche-anime .fiche-droite .saison { margin-bottom: 8px; }
  .fiche-anime .fiche-gauche .serie-haut { flex-direction: column; }
  .fiche-anime .fiche-gauche .serie-cover { width: 150px; height: 214px; }
}
/* Liste compacte sans vignettes */
.fiche-anime .volet-episodes.sans-mini .ligne-episode { min-height: 46px; padding: 6px 10px 6px 14px; }
.fiche-anime .volet-episodes.sans-mini .ep-texte { flex-direction: row; align-items: baseline; gap: 10px; }
.fiche-anime .volet-episodes.sans-mini .ep-info { white-space: nowrap; }

/* Volet des épisodes : titre sur sa propre ligne, jamais tronqué */
@media (min-width: 600px) and (orientation: landscape) {
  .fiche-anime .fiche-droite .ligne-episode .ep-mini { width: 96px; height: 54px; }
  .fiche-anime .fiche-droite .ligne-episode .ep-texte .ep-num { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .fiche-anime .fiche-droite .ligne-episode .ep-titre { display: block; font-size: .86rem; }
  .fiche-anime .fiche-droite .ligne-episode .btn-mini { width: 40px; height: 38px; }
}

/* Écran étroit (téléphone replié) : une seule ligne par épisode —
   vignette, texte qui s'enroule, boutons à droite */
@media (max-width: 520px) {
  .fiche-anime .ligne-episode { flex-wrap: nowrap; align-items: center; padding: 8px 8px 8px 10px; gap: 10px; }
  .fiche-anime .ligne-episode .ep-mini { width: 84px; height: 47px; }
  .fiche-anime .ligne-episode .ep-texte { flex: 1 1 auto; min-width: 0; flex-basis: auto; order: 0; display: flex; flex-direction: column; }
  .fiche-anime .ligne-episode .ep-texte .ep-num { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; font-size: .92rem; }
  .fiche-anime .ligne-episode .ep-titre { display: block; font-size: .84rem; }
  .fiche-anime .ligne-episode .ep-info { flex-basis: auto; order: 0; padding-left: 0; font-size: .78rem; }
  .fiche-anime .ligne-episode .btn-mini { width: 40px; height: 38px; flex-shrink: 0; }
}

/* ============================================================
   Feuille d'ajout ANIME — trois mises en page selon l'écran :
   · écran externe (étroit, portrait) : feuille du bas, en-tête fixe,
     synopsis replié, épisodes dans un volet qui défile seul ;
   · écran intérieur en portrait : fenêtre centrée, même colonne ;
   · paysage (intérieur ouvert, ou externe couché) : deux colonnes,
     infos à gauche, épisodes à droite, chacune avec son défilement.
   ============================================================ */
.feuille.feuille-anime {
  display: flex; flex-direction: column;
  width: 100%; max-width: 100%; max-height: calc(92 * var(--u-dvh, 1dvh));
  overflow: hidden; border-radius: 18px 18px 0 0;
}
.feuille-anime .fa-gauche { flex: 0 0 auto; min-width: 0; padding: 14px 14px 8px; }
.feuille-anime .fa-droite {
  flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column;
  padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
}
.feuille-anime .fa-tete { display: flex; gap: 12px; align-items: flex-start; }
.feuille-anime .fa-cover {
  width: 84px; height: 120px; object-fit: cover; border-radius: 10px;
  background: var(--fond-3); flex-shrink: 0; box-shadow: 0 4px 14px #0008;
}
.feuille-anime .fa-infos { flex: 1; min-width: 0; }
.feuille-anime .fa-titre { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.25; font-weight: 700; }
.feuille-anime .fa-resume { color: var(--texte-2); font-size: .8rem; line-height: 1.4; }
.feuille-anime .fa-genres { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.feuille-anime .fa-genres .chip { font-size: .7rem; padding: 3px 8px; }
.feuille-anime .fa-actions { display: flex; gap: 8px; margin-top: 10px; }
.feuille-anime .fa-actions .btn-principal { flex: 1 1 auto; margin-top: 0; padding: 12px 14px; }
.feuille-anime .fa-actions .btn-secondaire { flex: 0 0 auto; width: auto; margin-top: 0; padding: 11px 14px; }
.feuille-anime .fa-synopsis { margin-top: 10px; }
.feuille-anime .fa-synopsis summary .lg-titre { margin: 0; }
.feuille-anime .fa-synopsis .synopsis-texte {
  font-size: .86rem; line-height: 1.5; color: #c8c8d2; margin: 8px 0 0;
  max-height: 150px; overflow-y: auto;
}
.feuille-anime .fa-eps-titre { margin: 8px 0 6px; flex: 0 0 auto; }
.feuille-anime .fa-eps-compte { font-weight: 500; color: var(--texte-2); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.feuille-anime .fa-episodes {
  flex: 1 1 auto; min-height: 160px; overflow-y: auto; margin-top: 0; padding: 8px;
  border: 1px solid #24242e; border-radius: 12px; background: var(--fond-2);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.feuille-anime .fa-episodes .saison { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #24242e; border-radius: 12px; background: var(--fond-2); }
.feuille-anime .fa-episodes .saison:last-child { margin-bottom: 0; }
.feuille-anime .fa-episodes .saison summary h3 { font-size: .98rem; margin: 0; }
.feuille-anime .fa-episodes .saison .dp-compte { font-size: .78rem; }
.feuille-anime .fa-episodes .liste-episodes { gap: 5px; margin-top: 8px; }
.feuille-anime .ligne-episode { min-height: 44px; padding: 5px 6px 5px 12px; gap: 10px; border: 1px solid transparent; }
.feuille-anime .ligne-episode:active { border-color: #4a3d15; }
.feuille-anime .ligne-episode .ep-num { flex: 1 1 auto; min-width: 0; font-size: .9rem; line-height: 1.25; }
.feuille-anime .ligne-episode .ep-titre { font-weight: 400; color: #c8c8d2; font-size: .84rem; }
.feuille-anime .ligne-episode .ep-info { flex: 0 0 auto; font-size: .76rem; white-space: nowrap; }
.feuille-anime .ligne-episode .btn-mini { width: 40px; height: 36px; flex-shrink: 0; border-radius: 10px; font-size: 1rem; }
.feuille-anime .ligne-episode .ep-lire { background: #2a2312; color: #e2b93b; border: 1px solid #6b5518; }

/* Écran intérieur en portrait : fenêtre centrée, plus haute */
@media (min-width: 600px) and (orientation: portrait) {
  .feuille-fond-anime { align-items: center; padding: 16px; }
  .feuille.feuille-anime { max-width: 640px; max-height: calc(90 * var(--u-dvh, 1dvh)); border-radius: 18px; border: 1px solid #33333f; }
  .feuille-anime .fa-cover { width: 110px; height: 156px; }
  .feuille-anime .fa-titre { font-size: 1.2rem; }
  .feuille-anime .fa-synopsis .synopsis-texte { max-height: 180px; }
}
/* Paysage (écran intérieur ouvert, ou externe couché) : deux colonnes */
@media (min-width: 600px) and (orientation: landscape) {
  .feuille-fond-anime { align-items: center; padding: 12px; }
  .feuille.feuille-anime {
    flex-direction: row; width: min(calc(96 * var(--u-vw, 1vw)), 1040px); max-width: 1040px;
    height: min(calc(90 * var(--u-dvh, 1dvh)), 760px); max-height: calc(90 * var(--u-dvh, 1dvh)); border-radius: 18px; border: 1px solid #33333f;
  }
  .feuille-anime .fa-gauche { flex: 0 0 44%; min-height: 0; overflow-y: auto; padding: 16px; border-right: 1px solid #24242e; }
  .feuille-anime .fa-droite { flex: 1 1 auto; padding: 12px 16px 16px; }
  .feuille-anime .fa-eps-titre { margin-top: 4px; }
  .feuille-anime .fa-synopsis .synopsis-texte { max-height: none; overflow: visible; }
  .feuille-anime .fa-cover { width: 120px; height: 170px; }
  .feuille-anime .fa-titre { font-size: 1.15rem; }
}
/* Écran externe couché (peu de hauteur) : tout plus compact */
@media (min-width: 600px) and (orientation: landscape) and (max-height: 520px) {
  .feuille-fond-anime { padding: 6px; }
  .feuille.feuille-anime { height: calc(96 * var(--u-dvh, 1dvh)); max-height: calc(96 * var(--u-dvh, 1dvh)); }
  .feuille-anime .fa-gauche { padding: 10px 12px; }
  .feuille-anime .fa-cover { width: 76px; height: 108px; }
  .feuille-anime .fa-titre { font-size: 1rem; }
}

/* Feuille anime, écran intérieur : la pochette en grand */
@media (min-width: 600px) and (orientation: portrait) {
  .feuille-anime .fa-cover { width: 140px; height: 200px; }
}
/* En paysage, la colonne de gauche la pose au-dessus du titre, centrée */
@media (min-width: 600px) and (orientation: landscape) {
  .feuille-anime .fa-tete { flex-direction: column; align-items: center; gap: 12px; }
  .feuille-anime .fa-cover { width: min(100%, 230px); height: auto; aspect-ratio: 3 / 4.3; }
  .feuille-anime .fa-infos { width: 100%; text-align: center; }
  .feuille-anime .fa-genres { justify-content: center; }
}
/* Écran externe couché : trop peu de hauteur, on garde la version compacte */
@media (min-width: 600px) and (orientation: landscape) and (max-height: 520px) {
  .feuille-anime .fa-tete { flex-direction: row; align-items: flex-start; }
  .feuille-anime .fa-cover { width: 76px; height: 108px; aspect-ratio: auto; }
  .feuille-anime .fa-infos { text-align: left; }
  .feuille-anime .fa-genres { justify-content: flex-start; }
}

/* Recherche : suggestions AniList (titres proches, personnages) */
.sep-suggestions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 10px 0 0; }
.sep-suggestions .lg-titre { margin: 0; }
.sep-suggestions .compteur { margin: 0; }
.carte-mini .cm-via { font-size: .66rem; color: #c9a227; padding: 0 8px 8px; }

/* Feuille des étapes d'actualisation (tap sur l'indicateur du haut) */
.feuille.feuille-etapes { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: calc(88 * var(--u-dvh, 1dvh)); }
.feuille-etapes .fe-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feuille-etapes .fe-h3 { margin: 0 0 4px; font-size: 1.05rem; }
.feuille-etapes .fe-fermer { width: auto; margin-top: 0; padding: 8px 14px; flex-shrink: 0; }
.feuille-etapes .fe-etape { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--fond-3); margin-bottom: 6px; border: 1px solid transparent; }
.feuille-etapes .fe-icone { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; background: #26262f; color: #6f6f7c; }
.feuille-etapes .fe-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feuille-etapes .fe-titre { font-weight: 600; font-size: .92rem; }
.feuille-etapes .fe-detail { font-size: .8rem; color: var(--texte-2); overflow-wrap: anywhere; }
.feuille-etapes .fe-duree { font-size: .74rem; color: var(--texte-2); white-space: nowrap; flex-shrink: 0; padding-top: 3px; }
.feuille-etapes .fe-etape.fait .fe-icone { background: #1f2d1f; color: #7fd68a; }
.feuille-etapes .fe-etape.en-cours { border-color: #6b5518; background: #1f1c12; }
.feuille-etapes .fe-etape.en-cours .fe-icone { background: #2a2312; color: var(--or); animation: fe-tourne 1.2s linear infinite; }
.feuille-etapes .fe-etape.en-cours .fe-titre { color: var(--or); }
.feuille-etapes .fe-etape.a-venir { opacity: .6; }
.feuille-etapes .fe-etape.echec .fe-icone { background: #2f1a1a; color: #ff8a8a; }
.feuille-etapes .fe-etape.sautee { opacity: .45; }
.feuille-etapes .fe-resume { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #2a2312; border: 1px solid #4a3d15; color: var(--or); font-size: .86rem; line-height: 1.45; }
@keyframes fe-tourne { to { transform: rotate(360deg); } }
@media (min-width: 900px) {
  .feuille.feuille-etapes { display: block; max-width: 720px; overflow-y: auto; }
}

/* Accueil : section Comics américains (BatCave) */
#rangees-comics { margin-top: 6px; }
#rangees-comics > .titre-section { color: #7db3ff; }
#rangees-comics .section-accueil .titre-section { font-size: .95rem; }

/* Économie : ce qui est hors écran n'est ni rendu ni décodé */
.section-accueil { content-visibility: auto; contain-intrinsic-size: auto 290px; }
#rangee-recos, .rangee-cartes { contain: layout paint; }
.carte-serie { content-visibility: auto; contain-intrinsic-size: auto 118px; }

/* Fiche anime : bouton ⬇ (hors ligne) */
.fiche-anime .ligne-episode .ep-dl { color: #8fbaff; border: 1px solid #2c4a7a; background: #131a2a; font-size: .9rem; }
.fiche-anime .ligne-episode .ep-dl.encours { color: var(--or); border-color: #6b5518; background: #2a2312; font-size: .72rem; font-weight: 700; }
.fiche-anime .ligne-episode .ep-dl.fait { color: #7fd68a; border-color: #2f5d38; background: #1f2d1f; }
.fiche-anime .ligne-episode .ep-dl.echec { color: #ff8a8a; border-color: #5d2f2f; background: #2f1a1a; }
@media (max-width: 520px) {
  .fiche-anime .ligne-episode .btn-mini { width: 36px; }
}

/* Progression d'un téléchargement d'épisode : fine barre or en bas de la ligne */
.fiche-anime .ligne-episode { position: relative; overflow: hidden; }
.fiche-anime .ligne-episode .ep-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #26262f; display: none; pointer-events: none; }
.fiche-anime .ligne-episode.dl-encours .ep-barre { display: block; }
.fiche-anime .ligne-episode .ep-barre-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8912b, var(--or)); transition: width .5s linear; }

/* Réglages : épisodes hors ligne */
#depliable-episodes .dl-ligne .btn-secondaire { flex: 1; margin-top: 0; padding: 9px 8px; font-size: .82rem; }
.ep-hl-anime { margin: 10px 0 4px; padding: 8px 10px; border: 1px solid #24242e; border-radius: 12px; background: var(--fond-3); }
.ep-hl-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ep-hl-tete h4 { margin: 0; font-size: .92rem; }
.ep-hl-ligne { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #24242e; font-size: .84rem; }
.ep-hl-texte { flex: 1; min-width: 0; }
.ep-hl-etat { color: var(--texte-2); font-size: .76rem; white-space: nowrap; }
.ep-hl-etat.termine { color: #7fd68a; }
.ep-hl-etat.en-cours, .ep-hl-etat.attente { color: var(--or); }
.ep-hl-etat.echec { color: #ff8a8a; }
.ep-hl-ligne .btn-lien, .ep-hl-tete .btn-lien { padding: 4px 0; white-space: nowrap; }
.fiche-anime .saison-actions { gap: 14px; flex-wrap: wrap; }

/* Réglages regroupés : menus dépliables, sous-blocs */
.bloc-reglage .depliable > summary { padding: 2px 0; }
.bloc-reglage .depliable > summary h3 { margin: 0; }
.bloc-reglage .depliable[open] > summary { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid #24242e; }
.bloc-reglage .depliable > :not(summary) { margin-top: 0; }
.bloc-reglage .sous-bloc.premier { margin-top: 4px; padding-top: 0; border-top: 0; }
.bloc-reglage .sous-bloc .depliable > summary h3 { font-size: .86rem; }

/* ===== Mode Films et séries (même squelette que le mode Anime) ===== */
.mode-films .nom-app { color: #e2b93b; }
.mode-films #filtres-contenu, .mode-films #filtre-collection, .mode-films #source-recherche,
.mode-films #panneau-tags, .mode-films #btn-panneau-tags, .mode-films #biblio-vide,
.mode-films #carte-reprise, .mode-films #rangees-adultes, .mode-films #entree-decouvertes,
.mode-films #bandeau-doublons { display: none !important; }
.mode-films #vue-accueil > :not(#rangee-meilleurs):not(#rangees-tournantes) { display: none; }
.mode-films #vue-accueil > #rangee-meilleurs, .mode-films #vue-accueil > #rangees-tournantes { display: block; }
.carte-film .cs-cover { aspect-ratio: 2/3; }
/* Liste des flux (fiche, feuille d'ajout, choix manuel) */
.liste-flux { display: flex; flex-direction: column; gap: 8px; }
.ligne-flux { padding: 10px 12px; border: 1px solid #24242e; border-radius: 12px; background: var(--fond-2); cursor: pointer; }
.ligne-flux.meilleur { border-color: #8a6d1f; box-shadow: inset 0 0 0 1px #3a2e0e; }
.ligne-flux .lf-haut { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .85rem; }
.ligne-flux .lf-seeds { color: #cfcfd8; margin-left: auto; }
.ligne-flux .lf-taille { color: #9a9aa6; }
.ligne-flux .lf-nom { margin-top: 4px; font-size: .8rem; color: #9a9aa6; word-break: break-all; }
.ligne-flux .lf-reco { margin-top: 4px; font-size: .78rem; color: #e2b93b; }
.chip-q { background: #2a2a36; color: #fff; }
.chip-fr { background: #1f2f22; color: #9fe0a8; }
.chip-alerte { background: #3a2222; color: #f0a0a0; }
.feuille-flux, .feuille-attente { max-height: calc(82 * var(--u-vh, 1vh)); overflow: auto; }
.feuille-attente .att-barre { position: relative; height: 6px; background: #26262f; border-radius: 3px; overflow: hidden; margin: 10px 0 14px; display: block; }
.feuille-attente .att-barre .ep-barre-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8912b, var(--or)); transition: width .5s linear; }
.fiche-film .volet-episodes .lg-titre { margin-bottom: 8px; }

/* Hors ligne films et séries */
.sous-titre-reglage { margin: 16px 0 6px; font-size: .95rem; color: #e2b93b; }
.ligne-flux { position: relative; padding-right: 44px; }
.ligne-flux .lf-dl { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.fiche-film .ligne-episode { position: relative; overflow: hidden; }
.fiche-film .ligne-episode .ep-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #26262f; display: none; pointer-events: none; }
.fiche-film .ligne-episode.dl-encours .ep-barre { display: block; }
.fiche-film .ligne-episode .ep-barre-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8912b, var(--or)); transition: width .5s linear; }

/* Feuilles d'attente et de choix du flux : marges intérieures, centrées sur l'écran intérieur */
.feuille-attente, .feuille-flux { padding: 14px 16px 16px; }
.feuille-attente .lg-titre, .feuille-flux .lg-titre { margin: 0 0 10px; }
.feuille-flux .liste-flux { margin-bottom: 12px; }
.feuille-attente .fa-actions, .feuille-flux .fa-actions { display: flex; gap: 10px; justify-content: flex-end; }
.chip-ok { background: #1f2f22; color: #9fe0a8; }
@media (min-width: 600px) {
  .feuille-fond-centre { align-items: center; padding: 16px; }
  .feuille-fond-centre .feuille { border-radius: 18px; max-width: 640px; max-height: calc(88 * var(--u-dvh, 1dvh)); }
}

.chip-doute { background: #2f2a1f; color: #e0c98a; }

/* Groupes de réglages par mode */
.groupe-reglages { font-size: .78rem; letter-spacing: .9px; text-transform: uppercase; color: #8a6d1f; margin: 22px 2px 8px; padding-bottom: 4px; border-bottom: 1px solid #2a2a36; }

/* Lignes de flux : titre lisible, langues, son, poids ; le nom brut en dessous */
.ligne-flux .lf-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ligne-flux .lf-nom-propre { font-weight: 600; color: #f3f3f6; margin-right: 2px; }
.ligne-flux .lf-annee { font-weight: 400; color: #9a9aa6; }
.ligne-flux .lf-langues { margin-top: 4px; font-size: .85rem; color: #d8d8e0; }
.ligne-flux .lf-meta { margin-top: 2px; font-size: .8rem; color: #9a9aa6; }
.ligne-flux .lf-meta .lf-reco { display: inline; margin: 0; }
.ligne-flux .lf-nom { margin-top: 3px; font-size: .7rem; color: #6c6c78; }
.chip-hdr { background: #2b2436; color: #d7b8ff; }

.ligne-flux .lf-langues { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ligne-flux .lf-langues .chip-langue { background: #23232d; color: #d8d8e0; }
.ligne-flux .lf-langues .chip-langue.chip-fr { background: #1f2f22; color: #9fe0a8; }
.ligne-flux .lf-details { font-size: .8rem; color: #9a9aa6; margin-left: 4px; }
.chip-multi { background: #2f2a1f; color: #f0d48a; }

/* Fenêtre d'attente : verticale, chrono, spinner, conseils */
.feuille.feuille-attente { display: block; }
.feuille-attente .att-fichier { font-size: .8rem; color: #9a9aa6; margin: -4px 0 10px; word-break: break-word; }
.feuille-attente .att-etape { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: #f3f3f6; }
.feuille-attente .att-etape .alerte { color: #f0a0a0; }
.feuille-attente .att-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #3a3a46; border-top-color: var(--or); animation: tourne .9s linear infinite; flex: none; }
.feuille-attente .att-spinner.cache { display: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
.feuille-attente .att-barre.indeterminee .ep-barre-fill { width: 30% !important; animation: glisse-barre 1.2s ease-in-out infinite; }
@keyframes glisse-barre { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.feuille-attente .att-barre.cache { display: none; }
.feuille-attente .att-sous { font-size: .86rem; color: #cfcfd8; min-height: 1.2em; margin-bottom: 12px; }
.feuille-attente .att-sous.alerte { color: #f0c27a; }
.feuille-attente .fa-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Source d'un flux : étoile de favori */
.ligne-flux .lf-site { background: none; border: 1px solid #2c2c38; border-radius: 10px; color: #9a9aa6; font: inherit; font-size: .8rem; padding: 1px 8px; cursor: pointer; }
.ligne-flux .lf-site.actif { color: #e2b93b; border-color: #6b5518; background: #1c1a12; }

/* Étoile de source favorite : en haut à droite de chaque flux, en grand ; ⬇ dessous */
.ligne-flux { padding-right: 58px; }
.ligne-flux .lf-etoile { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: none; background: none; color: #6f6f7a; font-size: 26px; line-height: 40px; text-align: center; cursor: pointer; padding: 0; transform: none; }
.ligne-flux .lf-etoile.actif { color: #e2b93b; text-shadow: 0 0 10px #e2b93b66; }
.ligne-flux .lf-dl { top: auto; bottom: 8px; right: 12px; transform: none; }
.ligne-flux .lf-fav-lib { color: #e2b93b; font-size: .76rem; }
.ligne-flux .lf-site { display: none; }

/* Fiche série (films et séries) : lignes d'épisodes lisibles — numéro et
   titre sur une ligne qui va à la ligne normalement, date en dessous,
   quatre boutons compacts */
.fiche-film .ligne-episode { gap: 6px; padding: 8px 8px 8px 12px; }
.fiche-film .volet-episodes.sans-mini .ep-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fiche-film .ligne-episode .ep-texte .ep-num { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; font-size: .92rem; }
.fiche-film .ligne-episode .ep-titre { display: inline; font-weight: 400; color: #c8c8d2; font-size: .9rem; }
.fiche-film .ligne-episode .ep-info { flex: 0 0 auto; white-space: normal; font-size: .76rem; color: #8a8a96; padding: 0; }
.fiche-film .ligne-episode .btn-mini { width: 34px; height: 34px; font-size: .95rem; border-radius: 9px; flex-shrink: 0; }
@media (min-width: 600px) and (orientation: landscape) {
  .fiche-film .fiche-droite .ligne-episode .btn-mini { width: 36px; height: 36px; }
  .fiche-film .fiche-droite .ligne-episode .ep-titre { display: inline; }
}

/* Recherche en mode Films : Tout / Films / Séries sous la barre */
#filtre-type-films { display: none; margin: 8px 0 4px; }
.mode-films #filtre-type-films { display: flex; }
.segments-type-films .segment { flex: 1; }

/* Fiche scans : « Continuer » en tête de la colonne, au-dessus du statut */
.sh-infos > .serie-actions.principale.en-tete { margin: 0 0 12px; }

/* Onglet Sorties en mode Anime / Films : pas de liste « En retard » (propre aux scans) */
.mode-anime #seg-retard, .mode-films #seg-retard { display: none; }

/* Fiche anime / série : l'épisode lancé en dernier, cerclé d'or */
.fiche-anime .ligne-episode.dernier-lance { border-color: var(--or); box-shadow: 0 0 0 1px #d4af3766, 0 0 12px #d4af3733; }
.fiche-anime .ligne-episode.dernier-lance.lu { opacity: .85; }
.fiche-anime .ligne-episode .ep-lance { color: var(--or); font-weight: 600; }

/* Fiche anime : repère partagé connu (ou non) pour un épisode déjà consulté */
.fiche-anime .ep-rep { color: var(--or); white-space: nowrap; }
.fiche-anime .ep-rep-non { color: #8a8a96; }

/* Chapitre en accès anticipé payant : cadenassé, grisé, pas ouvrable */
.ligne-chapitre.verrou { opacity: .55; cursor: default; }
.ligne-chapitre.verrou .lc-num { color: var(--texte-2); }

/* Fiche : chaque source est un bouton (un tap : la retirer de la série) */
.sources-serie .src-chip { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.sources-serie .src-chip:active { color: var(--or); }
.alerte-avance { color: #e2b93b; }

/* Menu des sources d'une série */
.menu-sources .ms-titre { font-weight: 600; margin-bottom: 8px; }
.menu-sources .ms-sous { color: var(--texte-2); font-size: .78rem; margin: 12px 0 4px; }
.menu-sources .ms-ligne { align-items: center; gap: 8px; }
.menu-sources .ms-nom { flex: 1; font-size: .88rem; min-width: 0; }
.menu-sources .ms-nom small { display: block; color: var(--texte-2); font-size: .76rem; }
.menu-sources .ms-ligne.inactive .ms-nom { opacity: .55; }
.menu-sources .btn-secondaire { width: auto; white-space: nowrap; }
.menu-sources .ms-bascule.active { background: #2a2312; color: var(--or); border-color: #4a3d15; }
.sources-serie .btn-lien { padding: 2px 6px; }

/* Fenêtre des sources d'une série */
.feuille-sources { padding: 16px 16px 12px; }
.feuille-sources .fs-titre { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.feuille-sources .fs-aide { color: var(--texte-2); font-size: .76rem; margin-bottom: 10px; }
.feuille-sources .fs-sous { color: var(--texte-2); font-size: .78rem; margin: 14px 0 6px; }
.feuille-sources .fs-trouvees-titre { color: var(--or); font-weight: 700; margin-top: 10px; } /* sources trouvées, remontées en tête (06/10/2026) */
.feuille-sources .fs-source {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  border-radius: 12px; background: var(--fond-3); border: 1px solid #2a2a36; cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.feuille-sources .fs-source:active { border-color: #4a3d15; }
.feuille-sources .fs-source.inactive .fs-nom { opacity: .5; }
.feuille-sources .fs-source img { width: 34px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.feuille-sources .fs-nom { flex: 1; min-width: 0; font-size: .92rem; font-weight: 600; }
.feuille-sources .fs-nom small { display: block; font-weight: 400; color: var(--texte-2); font-size: .76rem; }
.feuille-sources .fs-etat { font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 20px; white-space: nowrap; }
.feuille-sources .fs-etat.on { background: #2a2312; color: var(--or); border: 1px solid #4a3d15; }
.feuille-sources .fs-etat.off { background: #1c1c24; color: #8a8a96; border: 1px solid #2a2a36; }
.feuille-sources .fs-etat.lier { color: var(--texte-2); border: 1px dashed #3a3a48; }
/* Vérification groupée : la source qui a la série ressort en or */
.feuille-sources .fs-etat.trouvee { color: var(--or); border: 1px solid #4a3d15; background: #2a2312; }
.feuille-sources .fs-source.trouvee .fs-nom small { color: var(--or); opacity: .9; }
.feuille-sources .fs-verif { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.feuille-sources .fs-verif button { flex: 1 1 200px; }
.feuille-sources .fs-choix .fs-etat { color: var(--or); border: 1px solid #4a3d15; }
.feuille-sources .fs-actions { display: flex; gap: 8px; margin: -2px 0 10px; }
.feuille-sources .fs-actions .btn-secondaire { flex: 1; margin-top: 0; }
.feuille-sources .fs-boutons { margin-top: 12px; }
.feuille-sources .fs-boutons .btn-secondaire { width: 100%; }

/* Fenêtre des sources : toujours verticale, même sur l'écran large où la feuille générique passe en ligne */
.feuille.feuille-sources { display: block; max-width: 620px; max-height: calc(88 * var(--u-dvh, 1dvh)); border-radius: 18px; }

/* Section plein écran : titre remonté de plus loin dans le classement */
.carte-mini .cm-badge.cm-nouveau { background: linear-gradient(120deg, #b8912b, var(--or)); color: #16130a; }

/* Fenêtre des sources : trois états */
.feuille-sources .fs-etat.actif { background: #2a2312; color: var(--or); border: 1px solid #4a3d15; }
.feuille-sources .fs-etat.passif { background: #1c1c24; color: #9a9aa8; border: 1px solid #2f2f3a; }
.feuille-sources .fs-etat.off { background: #0c0c10; color: #5c5c66; border: 1px solid #202028; }
.feuille-sources .fs-source.off { background: #101014; border-color: #1c1c22; }
.feuille-sources .fs-source.off .fs-nom { opacity: .4; }
.feuille-sources .fs-aide b { color: #c8c8d2; font-weight: 600; }

/* Réglages : boutons de vérification manuelle des sites protégés */
.sites-verification { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }

/* Fiche d'une œuvre non ajoutée : la pochette se touche pour lire */
.feuille-pochette-lire { position: relative; cursor: pointer; }
.feuille-pochette-lire:active img { filter: brightness(.8); }
.feuille-pochette-lire .pochette-lire {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700;
  color: var(--or); background: #000a; border: 1px solid #4a3d15;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: none; white-space: nowrap;
}
/* Lecteur en découverte : la pochette en grand pendant que ça charge */
#lecteur-pages .lecteur-pochette-attente {
  width: 100%; height: calc(calc(100 * var(--u-dvh, 1dvh)) - var(--haut-sur, 0px)); object-fit: contain; display: block;
  animation: apparait .2s ease-out;
}
#lecteur-chargement.attente { background: #0005; justify-content: flex-end; padding-bottom: calc(18 * var(--u-dvh, 1dvh)); }
#lecteur-chargement.attente p { background: #000b; padding: 6px 14px; border-radius: 12px; }
/* Lecteur en découverte : bandeau transparent en haut, toujours visible */
#lecteur-apercu-bandeau {
  position: absolute; left: 12px; right: 12px; top: calc(46px + var(--haut-sur, 0px));
  z-index: 6; padding: 6px 12px; border-radius: 12px; text-align: center;
  font-size: .74rem; line-height: 1.3; color: #eee; background: #0008;
  border: 1px solid #ffffff22; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none; text-shadow: 0 1px 3px #000;
}
/* Il suit la barre du haut : visible avec elle, effacé quand elle s'efface */
#lecteur-apercu-bandeau { transition: opacity .25s; }
#lecteur-barre-haut.discret ~ #lecteur-apercu-bandeau { opacity: 0; }
#lecteur-apercu-bandeau b { color: var(--or); letter-spacing: .04em; text-transform: uppercase; }
/* ---------- Mise à jour à distance ---------- */
.btn-maj { position: relative; color: var(--or); border-color: #4a3d15; background: #2a2312; margin-right: 8px; animation: maj-pouls 2.4s ease-in-out infinite; }
.btn-maj svg { display: block; margin: 0 auto; }
.btn-maj.en-cours { animation: none; }
.btn-maj.en-cours svg { opacity: .25; }
.btn-maj-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; }
@keyframes maj-pouls { 0%, 100% { box-shadow: 0 0 0 0 #e8c46a00; } 50% { box-shadow: 0 0 0 5px #e8c46a33; } }
.maj-distante { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.maj-distante:empty { display: none; }
.maj-titre { font-weight: 700; color: var(--or); }
.maj-titre small { color: var(--texte-2); font-weight: 400; }
.maj-ligne { font-size: .86rem; color: var(--texte-2); line-height: 1.4; }
.maj-ligne.maj-ok { color: #8fd19e; }
.maj-ligne.maj-ko { color: #e59a9a; }
.maj-notes { margin: 0; padding-left: 18px; font-size: .84rem; color: #cfcbc2; line-height: 1.45; }
.maj-notes li { margin-bottom: 4px; }
.maj-barre { height: 6px; border-radius: 3px; background: #2a2a34; overflow: hidden; }
.maj-barre > div { height: 100%; background: var(--or); transition: width .2s; }
.bandeau-maj {
  position: fixed; left: 10px; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px;
  background: #1b1810f2; border: 1px solid #4a3d15; border-radius: 14px; box-shadow: 0 6px 22px #000b;
  max-width: 560px; margin: 0 auto;
}
.bandeau-maj .maj-corps { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bandeau-maj .maj-fermer { background: none; border: 0; color: var(--texte-2); font-size: 1rem; padding: 2px 6px; cursor: pointer; }
/* Page manquante dans le lecteur : le choix de secours */
.feuille-page-manquante { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.feuille-page-manquante .cs-date { color: #cfcbc2; line-height: 1.4; }
/* Lecteur en découverte : le bouton d'ajout, toujours sous les yeux */
#lecteur-apercu {
  position: absolute; left: 50%; bottom: calc(18px + var(--bas-sur, 0px)); transform: translateX(-50%);
  z-index: 6; padding: 10px 16px; font-size: .92rem; box-shadow: 0 4px 14px #000a;
}

/* ---------- Version navigateur (iPhone via le PC) ----------
   Rien n'est gardé sur l'appareil : pas de téléchargement hors ligne, pas de
   mise à jour à installer (le PC sert toujours la dernière version). */
html.web #serie-telecharger, html.web #btn-maj, html.web #bandeau-maj, html.web #maj-distante,
html.web label.ligne-reglage:has(#reg-maj-auto), html.web label.ligne-reglage:has(#reg-maj-silencieuse) { display: none !important; }
html.web .nom-app { cursor: default; }
#web-hors-ligne {
  position: fixed; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 200;
  padding: 10px 14px; border-radius: 12px; background: #3a1414ee; border: 1px solid #7a2a2a; color: #f3d0d0;
  font-size: .82rem; text-align: center;
}

/* ============================================================
   1.82 — Animations et gestes
   ============================================================ */

/* ---------- Silhouettes de chargement (cartes grises qui scintillent) ---------- */
.sq {
  background: linear-gradient(100deg, #1c1c25 0%, #1c1c25 38%, #2a2a36 50%, #1c1c25 62%, #1c1c25 100%);
  background-size: 250% 100%;
  animation: scintille 1.3s linear infinite;
  border-radius: 8px;
}
@keyframes scintille { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.sq-carte { pointer-events: none; }
.sq-carte .sq-img { width: 100%; aspect-ratio: 3/4.3; border-radius: 0; }
.grille-cartes .sq-carte .sq-img { aspect-ratio: 2 / 3; }
.sq-carte .sq-ligne { height: 9px; margin: 9px 8px 0; }
.sq-carte .sq-ligne.court { width: 55%; margin-bottom: 12px; }
.sq-bouton { height: 44px; border-radius: 12px; margin: 4px 0 14px; }
.sq-lignes { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.sq-ligne-chap { height: 40px; border-radius: 10px; }

/* ---------- La couverture qui s'envole de la carte à la fiche ---------- */
.envol-pochette {
  position: fixed; z-index: 97; object-fit: cover; pointer-events: none;
  box-shadow: 0 10px 34px #000b; will-change: left, top, width, height;
}
/* L'écran qui reçoit la couverture apparaît sur place, en fondu */
.vue-plein.arrivee-envol { animation: fondu-seul .2s ease-out; }
.feuille-fond.arrivee-envol .feuille { animation: fondu-seul .2s ease-out; }
@keyframes fondu-seul { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Retour qui suit le doigt ---------- */
.retour-geste { will-change: transform; box-shadow: -14px 0 30px -6px #000d; }

/* ---------- Petit rebond ---------- */
.pop { animation: rebond .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rebond { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
.carte-mini.pop, .carte-serie.pop, .ligne-sortie.pop { animation: rebond-carte .3s ease-out; }
@keyframes rebond-carte { 0% { transform: scale(.94); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* Barres de progression : elles se remplissent doucement */
.barre-prog > div { transition: width .8s cubic-bezier(.2, .8, .3, 1); }

/* ---------- Appui long : la carte s'enfonce, puis le menu rapide ---------- */
.carte-mini, .carte-serie, .ligne-sortie, .carte-resultat { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.carte-mini.appui-en-cours, .carte-serie.appui-en-cours, .ligne-sortie.appui-en-cours {
  transform: scale(.94); transition: transform .45s cubic-bezier(.3, .6, .4, 1);
}
.menu-rapide-fond {
  position: fixed; inset: 0; z-index: 92; background: #000a;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fondu-seul .15s ease-out;
}
.menu-rapide {
  width: 100%; max-width: 480px; background: var(--fond-2);
  border: 1px solid #33333f; border-bottom: 0; border-radius: 18px 18px 0 0;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  animation: glisse-haut .22s cubic-bezier(.2, .8, .3, 1);
}
.menu-rapide-fond.sortie { animation: fondu-sortie .16s ease-in forwards; }
.menu-rapide-fond.sortie .menu-rapide { animation: glisse-bas .16s ease-in forwards; }
@keyframes fondu-sortie { to { opacity: 0; } }
@keyframes glisse-bas { to { transform: translateY(40px); } }
.mr-tete { display: flex; gap: 12px; align-items: center; padding: 0 4px 12px; border-bottom: 1px solid #26262f; margin-bottom: 6px; }
.mr-tete img { width: 46px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--fond-3); flex-shrink: 0; }
.mr-infos { min-width: 0; }
.mr-titre { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mr-detail { font-size: .78rem; color: var(--texte-2); margin-top: 3px; }
.mr-action {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; border-radius: 12px; color: var(--texte);
  font-size: .95rem; text-align: left; padding: 13px 10px; cursor: pointer;
}
.mr-action:active { background: var(--fond-3); }
.mr-icone { width: 26px; text-align: center; color: var(--or); font-size: 1.05rem; }
.mr-action.danger, .mr-action.danger .mr-icone { color: var(--rouge); }

/* ---------- Tirer pour actualiser ---------- */
#tirer-actualiser {
  position: fixed; left: 50%; top: 0; z-index: 45; opacity: 0;
  transform: translate3d(-50%, -52px, 0); pointer-events: none; display: none;
}
#tirer-actualiser.visible { display: block; }
#tirer-actualiser .ta-rond {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond-3); border: 1px solid #3a3a46; color: var(--texte-2);
  box-shadow: 0 4px 16px #000a; transition: color .15s, border-color .15s;
}
#tirer-actualiser .ta-rond.pret { color: var(--or); border-color: #6b5520; }
#tirer-actualiser .ta-rond.tourne { color: var(--or); border-color: #6b5520; animation: tourne .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .sq { animation: none; }
  .pop, .carte-mini.pop, .carte-serie.pop, .ligne-sortie.pop { animation: none; }
  .barre-prog > div { transition: none; }
}

/* ============================================================
   1.83 — Filtre de nuit, recherches récentes, bilan du mois
   ============================================================ */

/* ---------- Filtre de nuit du lecteur ---------- */
#filtre-nuit { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
#filtre-nuit.actif { opacity: 1; }
#filtre-nuit > div { position: absolute; inset: 0; transition: opacity .3s; }
#filtre-nuit .fn-chaud { background: #ff8a1e; }
#filtre-nuit .fn-sombre { background: #000; }
.btn-lecteur-nuit {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0008; border: 1px solid #ffffff2a; color: #cfcbc2; cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.btn-lecteur-nuit.actif { color: #ffb45e; background: #3a230c; border-color: #8a5a22; }
.nuit-curseurs {
  position: absolute; z-index: 6; left: 12px; right: 12px;
  top: calc(56px + var(--haut-sur)); max-width: 420px; margin-left: auto;
  background: #16161df0; border: 1px solid #3a3a46; border-radius: 14px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 8px;
  animation: apparait .18s ease-out;
}
.nuit-curseurs label { display: flex; align-items: center; gap: 12px; font-size: .8rem; color: #cfcbc2; }
.nuit-curseurs label span { width: 76px; flex-shrink: 0; }
.nuit-curseurs input[type=range] { flex: 1; accent-color: #ffb45e; }

/* ---------- Recherches récentes ---------- */
.recherches-recentes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; animation: apparait .18s ease-out; }
.recherches-recentes .rr-titre { font-size: .72rem; color: var(--texte-2); margin-right: 2px; }
.recherches-recentes .rr-chip { font-size: .78rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherches-recentes .rr-effacer { background: none; border: 0; color: var(--texte-2); font-size: .8rem; padding: 4px 6px; cursor: pointer; }

/* ---------- Bouton et carte du bilan ---------- */
.btn-bilan, .carte-bilan {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; margin-bottom: 14px; border-radius: var(--rayon); cursor: pointer;
  color: var(--texte); border: 1px solid #5a4717;
  background: linear-gradient(120deg, #2a1f0a, #3b2a55 55%, #1a2a4a);
  background-size: 200% 200%; animation: bilan-degrade 8s ease-in-out infinite alternate;
}
@keyframes bilan-degrade { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.btn-bilan b { display: block; font-size: 1rem; }
.btn-bilan small { display: block; color: #cfcbc2; font-size: .78rem; margin-top: 2px; }
.btn-bilan > span:nth-child(2) { flex: 1; }
.bb-etincelle, .cb-fleche { font-size: 1.4rem; }
.bb-fleche { color: var(--or); }
.carte-bilan .cb-texte { flex: 1; min-width: 0; }
.carte-bilan .cb-sur { font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--or-clair); font-weight: 700; }
.carte-bilan .cb-titre { font-weight: 700; margin-top: 3px; }
.carte-bilan .cb-detail { font-size: .8rem; color: #cfcbc2; margin-top: 2px; }

/* ---------- Bilan du mois (plein écran, façon stories) ---------- */
.bilan {
  position: fixed; inset: 0; z-index: 96; overflow: hidden; background: #07070b;
  color: #fff; animation: fondu-seul .25s ease-out; user-select: none; -webkit-user-select: none;
}
.bilan.sortie { animation: fondu-sortie .2s ease-in forwards; }
.b-barres { position: absolute; z-index: 3; left: 10px; right: 52px; top: calc(12px + var(--haut-sur)); display: flex; gap: 4px; }
.b-barres > span { flex: 1; height: 3px; border-radius: 3px; background: #ffffff33; overflow: hidden; }
.b-barres > span > i { display: block; height: 100%; width: 0; background: #fff; }
.b-fermer {
  position: absolute; z-index: 4; right: 8px; top: calc(2px + var(--haut-sur));
  width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 1.2rem; cursor: pointer;
}
.b-flou {
  position: absolute; inset: -40px; z-index: 0; background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.3) brightness(.45); opacity: 0; transition: opacity .6s ease;
}
.b-flou.visible { opacity: 1; }
.b-ecran {
  position: absolute; inset: 0; z-index: 1; display: none;
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(60px + var(--haut-sur)) 26px 40px; gap: 8px;
  background-size: 220% 220%; animation: bilan-degrade 10s ease-in-out infinite alternate;
}
.b-ecran.actif { display: flex; }
.b-fond-or { background-image: linear-gradient(140deg, #1a1405, #4a3510 45%, #120d04); }
.b-fond-violet { background-image: linear-gradient(140deg, #1b0f33, #4b2a8a 50%, #0f0a22); }
.b-fond-braise { background-image: linear-gradient(140deg, #2a0d08cc, #6b2412aa 50%, #1a0805cc); }
.b-fond-bleu { background-image: linear-gradient(140deg, #071a2e, #164a7a 50%, #06121f); }
.b-fond-vert { background-image: linear-gradient(140deg, #06231c, #10604a 50%, #041a14); }
.b-fond-nuit { background-image: linear-gradient(140deg, #0a0b1f, #25285a 50%, #07081a); }
.b-fond-rose { background-image: linear-gradient(140deg, #2a0a1f, #7a1f55 50%, #1a0614); }

/* Entrée en scène, élément par élément (--d = rang) */
.b-ecran.actif .b-entre { animation: b-entre .6s cubic-bezier(.2, .8, .25, 1) both; animation-delay: calc(var(--d, 0) * 140ms); }
@keyframes b-entre { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.b-ecran.actif .b-rebond { animation: b-rebond .7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--d, 0) * 140ms); }
@keyframes b-rebond { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.b-sur { font-size: .95rem; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffffb0; font-weight: 600; }
.b-mois {
  font-size: clamp(3rem, calc(16 * var(--u-vw, 1vw)), 6rem); font-weight: 800; line-height: 1.05; text-transform: capitalize;
  background: linear-gradient(100deg, #8a6d1f, var(--or) 30%, #fff6c9 50%, var(--or) 70%, #8a6d1f);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.b-ecran.actif .b-mois { animation: b-entre .6s cubic-bezier(.2, .8, .25, 1) both, reflet-or 5s linear .8s infinite; animation-delay: 140ms, .8s; }
.b-annee { font-size: 1.3rem; color: #ffffffa0; letter-spacing: 6px; }
.b-texte { font-size: 1.1rem; line-height: 1.45; max-width: 420px; }
.b-texte b { color: var(--or-clair); }
.b-petit { font-size: .88rem; color: #ffffffa8; max-width: 380px; }
.b-indice { position: absolute; bottom: 34px; font-size: .78rem; color: #ffffff70; }
.b-geant { font-size: clamp(4.5rem, calc(26 * var(--u-vw, 1vw)), 9rem); font-weight: 800; line-height: 1; color: var(--or-clair); text-shadow: 0 6px 40px #d4af3755; font-variant-numeric: tabular-nums; }
.b-sous { font-size: 1.3rem; font-weight: 600; margin-top: -4px; }
.b-pastille { margin-top: 10px; padding: 6px 14px; border-radius: 20px; font-size: .85rem; font-weight: 600; }
.b-pastille.hausse { background: #1d5a3a; color: #aef0c8; }
.b-pastille.baisse { background: #5a1d2a; color: #f0b8c4; }
.b-couv-hero img, .b-couv-hero .b-couv-vide { width: min(calc(52 * var(--u-vw, 1vw)), 240px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 60px #000c, 0 0 0 1px #ffffff22; display: block; }
.b-couv-vide { background: #ffffff14; }
.b-titre-serie { font-size: 1.45rem; font-weight: 800; margin-top: 10px; max-width: 440px; }
.b-top { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.b-top-ligne { display: flex; align-items: center; gap: 12px; text-align: left; }
.b-rang { width: 22px; font-size: 1.3rem; font-weight: 800; color: var(--or-clair); }
.b-top-couv { width: 46px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.b-top-infos { flex: 1; min-width: 0; }
.b-top-titre { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-top-barre { height: 6px; border-radius: 6px; background: #ffffff1c; margin-top: 6px; overflow: hidden; }
.b-top-barre i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #b8912b, var(--or-clair)); }
.b-ecran.actif .b-top-barre i { animation: b-barre .9s cubic-bezier(.2, .8, .25, 1) forwards; animation-delay: calc(var(--d, 0) * 140ms); }
@keyframes b-barre { to { width: var(--w); } }
.b-top-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.b-genres { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 10px 0; }
.b-genre { font-size: 1.5rem; font-weight: 800; padding: 10px 22px; border-radius: 40px; background: #ffffff14; border: 1px solid #ffffff2a; }
.b-genre span { color: var(--or-clair); margin-right: 10px; }
.b-genres .b-genre:first-child { font-size: 1.9rem; background: #d4af3730; border-color: #d4af3780; }
.b-moment { font-size: 1.7rem; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.b-moment span { font-size: 3.2rem; }
.b-jours { display: flex; align-items: flex-end; gap: 2px; height: 70px; width: 100%; max-width: 420px; margin: 14px 0 6px; }
.b-jours i { flex: 1; height: 0; min-height: 2px; border-radius: 2px; background: #ffffff40; }
.b-jours i.record { background: var(--or-clair); }
.b-ecran.actif .b-jours i { animation: b-jour .8s cubic-bezier(.2, .8, .25, 1) forwards; animation-delay: calc(var(--d, 0) * 140ms); }
@keyframes b-jour { to { height: var(--h); } }
.b-chiffres { display: flex; gap: 10px; width: 100%; max-width: 440px; }
.b-chiffres > div { flex: 1; background: #ffffff12; border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; gap: 3px; }
.b-chiffres b { font-size: 1.6rem; color: var(--or-clair); font-variant-numeric: tabular-nums; }
.b-chiffres span { font-size: .72rem; color: #ffffffb0; line-height: 1.3; }
.b-eventail { display: flex; justify-content: center; margin-top: 18px; }
.b-eventail > div { margin: 0 -14px; transform: rotate(var(--r)) translateY(var(--y)); }
.b-eventail img, .b-eventail .b-couv-vide { width: min(calc(24 * var(--u-vw, 1vw)), 110px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 30px #000b; display: block; }
.b-carte-finale {
  width: 100%; max-width: 400px; border-radius: 22px; padding: 18px;
  background: linear-gradient(160deg, #1d1d27, #121218); border: 1px solid #d4af3766;
  box-shadow: 0 20px 60px #000c, 0 0 40px #d4af3722;
}
.b-cf-tete { display: flex; justify-content: space-between; font-size: .78rem; color: var(--or); font-weight: 700; letter-spacing: .6px; text-transform: capitalize; }
.b-cf-couvs { display: flex; justify-content: center; gap: 8px; margin: 14px 0; }
.b-cf-couvs img, .b-cf-couvs .b-couv-vide { flex: 0 1 23%; min-width: 0; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
.b-cf-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.b-cf-grille > div { background: #ffffff0d; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; }
.b-cf-grille b { font-size: 1.25rem; color: var(--or-clair); }
.b-cf-grille span { font-size: .72rem; color: #ffffffa0; }
.b-cf-ligne { font-size: .85rem; margin-top: 10px; color: #ffffffc0; text-align: left; }
.b-nav-mois { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.b-nav-mois .btn-principal, .b-nav-mois .btn-secondaire { width: auto; padding: 10px 16px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .b-ecran, .btn-bilan, .carte-bilan { animation: none; }
}

/* ---------- Importer ma bibliothèque ---------- */
.import-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.import-onglets .segment { flex: 1 1 auto; }
.import-volet { margin-bottom: 8px; animation: apparait .18s ease-out; }
.import-volet p { margin: 4px 0 8px; }
.import-ligne { display: flex; gap: 8px; align-items: center; }
.import-ligne input { flex: 1; min-width: 0; }
.import-ligne .btn-principal { width: auto; margin: 0; padding: 10px 16px; }
#import-liste { width: 100%; margin-bottom: 8px; font-size: .85rem; }
#etat-import b { color: var(--or); }

.lien-import { display: block; margin: 0 0 10px; font-size: .8rem; text-align: left; }

/* Garde-page : la page relancée en priorité scintille doucement tant qu'elle n'est pas là */
#lecteur-pages img.page-forcee {
  background: linear-gradient(100deg, #15151b 0%, #15151b 38%, #262632 50%, #15151b 62%, #15151b 100%);
  background-size: 250% 100%;
  animation: scintille 1.3s linear infinite;
}

/* Plein écran (version navigateur, Android) : icône « agrandir » / « réduire » */
.btn-plein-ecran { display: flex; align-items: center; justify-content: center; margin-right: 8px; color: var(--texte-2); }
.btn-plein-ecran .pe-sortir { display: none; }
.btn-plein-ecran.actif { color: var(--or); border-color: #4a3d15; }
.btn-plein-ecran.actif .pe-entrer { display: none; }
.btn-plein-ecran.actif .pe-sortir { display: inline; }
@media (max-width: 380px) {
  html.web #entete .btn-rond { width: 34px; height: 34px; }
  html.web .btn-plein-ecran { margin-right: 4px; }
}

/* Mentions propres à la version navigateur */
.web-seul { display: none; }
html.web .web-seul { display: block; }
.note-stats { color: var(--texte-2); margin: 0 0 12px; line-height: 1.45; }

/* ---------- Suggestions (Réglages) ---------- */
#suggestion-texte { width: 100%; margin: 8px 0; }
.sugg-images { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sugg-image { position: relative; width: 84px; height: 110px; border-radius: 10px; overflow: hidden; background: var(--fond-3); }
.sugg-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sugg-image button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #000b; color: #fff; font-size: .75rem; cursor: pointer; }
.sugg-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sugg-actions .btn-principal { width: auto; flex: 1; margin: 0; }
.sugg-joindre { cursor: pointer; margin: 0; }
.sugg-mienne { background: var(--fond-3); border-radius: 12px; padding: 10px 12px; margin-top: 8px; color: var(--texte); text-align: left; }
.sm-tete { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--texte-2); margin-bottom: 6px; }
.sm-statut { border: 1px solid; border-radius: 8px; padding: 1px 7px; font-weight: 700; }
.sm-texte { font-size: .85rem; white-space: pre-wrap; line-height: 1.45; }
.sm-reponse { margin-top: 8px; font-size: .82rem; color: var(--or-clair); background: #2a2312; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
/* ---------- Bibliothèque : planches ou grille (1.94.0) ---------- */
.affichage-biblio { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fond-2); border: 1px solid #24242e; flex: none; }
.affichage-biblio button { width: 38px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--texte-2); display: grid; place-items: center; cursor: pointer; }
.affichage-biblio button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.affichage-biblio button.actif { background: #2a2312; color: var(--or); }
#liste-biblio.mode-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#liste-biblio.mode-grille.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#liste-biblio.mode-grille .carte-serie { flex-direction: column; gap: 0; padding: 0; overflow: hidden; contain-intrinsic-size: auto 330px; }
#liste-biblio.mode-grille .carte-serie img.cs-cover { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 0; }
#liste-biblio.mode-grille .cs-infos { padding: 7px 8px 9px; }
#liste-biblio.mode-grille .carte-serie .cs-infos { padding-right: 8px; }
#liste-biblio.mode-grille .cs-titre { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .85rem; line-height: 1.25; }
#liste-biblio.mode-grille .cs-ligne { gap: 4px; margin-top: 4px; }
#liste-biblio.mode-grille .pastille { font-size: .6rem; padding: 2px 7px; }
#liste-biblio.mode-grille .pastille.source, #liste-biblio.mode-grille .cs-date { display: none; }
#liste-biblio.mode-grille .cs-prog { font-size: .74rem; margin-top: 4px; }
#liste-biblio.mode-grille .cs-etoile { top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; background: #000a; }
/* Grille de 3 : l'essentiel seulement (titre, progression) */
#liste-biblio.grille-3 .cs-ligne { display: none; }
#liste-biblio.grille-3 .cs-titre { font-size: .76rem; }
#liste-biblio.grille-3 .cs-infos { padding: 6px 6px 8px; }
#liste-biblio.grille-3 .cs-prog { font-size: .68rem; }
#liste-biblio.grille-3 .cs-note { display: none; }
#liste-biblio.grille-3 .cs-etoile { width: 30px; height: 30px; top: 4px; right: 4px; }
#liste-biblio.grille-3 .cs-etoile svg { width: 17px; height: 17px; }
/* Le retard reste visible en grille : pastille sur la couverture */
#liste-biblio.mode-grille .cs-retard { position: absolute; top: 6px; left: 6px; margin: 0; padding: 2px 7px; border-radius: 10px; background: #000c; font-size: .68rem; }
#liste-biblio.grille-3 .cs-ligne .cs-retard { display: none; }
@media (min-width: 600px) {
  #liste-biblio.mode-grille.grille-2 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  #liste-biblio.mode-grille.grille-3 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* PDF joints à une demande (1.94.0) */
.sugg-pdf { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; padding: 8px 40px 8px 10px; border-radius: 10px; background: var(--fond-3); box-sizing: border-box; }
.sugg-pdf .sp-icone { flex: none; width: 34px; height: 42px; border-radius: 5px; background: #d9534f; color: #fff; font-weight: 800; font-size: .62rem; display: grid; place-items: center; }
.sugg-pdf .sp-nom { min-width: 0; font-size: .82rem; overflow-wrap: anywhere; }
.sugg-pdf .sp-nom small { display: block; color: var(--texte-2); font-size: .72rem; }
.sugg-pdf button { position: absolute; top: 50%; right: 8px; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #000b; color: #fff; font-size: .75rem; cursor: pointer; }
/* Modifier une demande tant qu'elle n'est pas en cours (1.94.0) */
.sm-modifier { margin-top: 8px; border: 1px solid var(--bordure, #ffffff22); background: transparent; color: var(--texte); border-radius: 10px; padding: 6px 12px; font: inherit; font-size: .8rem; cursor: pointer; }
.sm-fige { margin-top: 6px; font-size: .74rem; color: var(--texte-2); font-style: italic; }
/* Place dans la file des tickets */
.sm-file { margin-top: 8px; font-size: .8rem; color: var(--or-clair); }
.sm-edition textarea { width: 100%; box-sizing: border-box; }
.sm-edition-boutons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.sm-edition-boutons button { width: auto; margin: 0; }

/* ---------- Réglages rangés (1.86.0) ----------
   Chaque volet : icône, titre, une ligne qui dit ce qu'il contient.
   Recherche collée en haut ; lignes dépendantes en retrait, éteintes
   quand la case dont elles dépendent est décochée. */
.reg-recherche {
  position: sticky; top: 0; z-index: 5; padding: 6px 0 10px;
  background: linear-gradient(var(--fond) 80%, transparent);
}
.reg-recherche input {
  width: 100%; box-sizing: border-box; padding: 11px 14px 11px 38px; border-radius: 12px;
  border: 1px solid #2c2c38; background: var(--fond-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
  color: var(--texte); font-size: .92rem;
}
.reg-recherche input:focus { outline: none; border-color: #c9a227; }
.chapitre-reglages .groupe-reglages { margin-top: 18px; }
.chapitre-reglages:first-of-type .groupe-reglages { margin-top: 6px; }
.bloc-reglage .depliable > summary { gap: 12px; justify-content: flex-start; min-height: 40px; }
.depliable .dp-icone { font-size: 20px; width: 28px; text-align: center; flex: none; }
.depliable .dp-titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.depliable .dp-titres h3 { margin: 0; }
.depliable .dp-desc { font-size: .76rem; line-height: 1.3; color: var(--texte-2); }
.depliable .dp-chevron { flex: none; }
.bloc-reglage .sous-bloc .depliable > summary { min-height: 32px; }
/* Lignes : un filet discret entre deux réglages pour que l'œil suive */
.bloc-reglage .ligne-reglage + .ligne-reglage { border-top: 1px solid #1f1f28; }
.bloc-reglage .ligne-reglage > span:first-child { flex: 1; min-width: 0; line-height: 1.35; }
.bloc-reglage .ligne-reglage small { display: inline-block; margin-top: 2px; font-size: .76rem; line-height: 1.35; }
.bloc-reglage .ligne-reglage input[type="range"] { flex: 0 0 44%; accent-color: var(--or); }
.bloc-reglage .sous-bloc > p { margin: 0 0 8px; }
.ligne-reglage.dependante { margin-left: 10px; padding-left: 12px; border-left: 2px solid #3a3222; }
.ligne-reglage.dependante.eteinte { opacity: .4; pointer-events: none; }
/* Recherche : ce qui ne correspond pas disparaît */
#vue-reglages .reg-masque { display: none !important; }
#vue-reglages .reg-trouve > span:first-child { color: #f1e3b8; }
/* Version navigateur : ce qui n'existe que dans l'appli Android */
.web-seul-txt { display: none; }
html.web .natif-seul, html.web .natif-seul-ligne, html.web .natif-seul-txt { display: none !important; }
html.web .web-seul-txt { display: inline; }

/* Roue ⟳ : demande de confirmation avant de tout actualiser */
#btn-actualiser.arme { box-shadow: 0 0 0 2px #e2b93b, 0 0 14px #e2b93b88; color: #e2b93b; animation: arme-pulse 1s ease-in-out infinite; }
@keyframes arme-pulse { 50% { box-shadow: 0 0 0 2px #e2b93b, 0 0 4px #e2b93b33; } }
.bulle-actualiser {
  position: fixed; z-index: 300; max-width: min(300px, calc(calc(100 * var(--u-vw, 1vw)) - 16px)); box-sizing: border-box;
  padding: 11px 14px; border-radius: 12px; background: #1b1b24f5; border: 1px solid #c9a22788;
  color: var(--texte); font-size: .82rem; line-height: 1.45; box-shadow: 0 8px 24px #000b;
  animation: bulle-entree .18s ease-out;
}
.bulle-actualiser::before {
  content: ''; position: absolute; top: -6px; right: 14px; width: 10px; height: 10px;
  background: #1b1b24; border-left: 1px solid #c9a22788; border-top: 1px solid #c9a22788; transform: rotate(45deg);
}
.bulle-actualiser .or { color: #e2b93b; font-weight: 600; }
@keyframes bulle-entree { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #btn-actualiser.arme, .bulle-actualiser { animation: none; } }

/* Fenêtre « Du nouveau sur ta suggestion » (réponse de l'administrateur) */
.feuille-fond-reponse { align-items: center; padding: 16px; }
.feuille-reponse { border-radius: 18px; max-width: 460px; padding: 18px 16px 16px; animation: bulle-entree .2s ease-out; }
.feuille-reponse h3 { color: var(--or); font-size: 1.02rem; margin: 0 0 12px; }
.feuille-reponse .fr-ligne { padding: 12px 0; border-top: 1px solid #262630; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.feuille-reponse .fr-tete { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; font-size: .9rem; }
.feuille-reponse .fr-icone { font-size: 1.3rem; line-height: 1.1; }
.feuille-reponse .sm-reponse { width: 100%; box-sizing: border-box; }
.feuille-reponse #fr-ok { width: 100%; margin-top: 8px; }
/* Plusieurs réponses : titre et OK fixes, la liste défile entre les deux */
.feuille-reponse { display: flex; flex-direction: column; max-height: calc(calc(100 * var(--u-dvh, 1dvh)) - 32px); overflow: hidden; }
.feuille-reponse .fr-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.feuille-reponse .fr-compte { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; font-size: .72rem; color: var(--or); background: #d4af3722; vertical-align: 2px; }
.feuille-reponse .fr-encore { flex: none; text-align: center; font-size: .78rem; color: var(--texte-2); padding: 8px 0 0; border-top: 1px solid #262630; }
.feuille-reponse .fr-encore.cache { display: none; }
.feuille-reponse #fr-ok { flex: none; }

/* Réglages → Mes demandes : état de chaque suggestion envoyée */
.resume-demandes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.resume-demandes:empty { display: none; }
.rd-puce { border: 1px solid; border-radius: 10px; padding: 3px 9px; font-size: .76rem; font-weight: 600; }
.rd-puce b { margin-left: 3px; }
#bloc-mes-demandes .sugg-mienne { border-left: 3px solid var(--c, #9a97a3); }
#bloc-mes-demandes .sm-tete { align-items: center; }
.sm-detail { font-size: .74rem; color: var(--texte-2); text-align: right; }
.sm-date { margin-top: 8px; font-size: .72rem; color: var(--texte-3, #77757f); }

/* Lecteur → « ⚠ Signaler » : bouton et fenêtre */
#btn-lecteur-signaler { font-size: .72rem; padding: 4px 10px; flex-shrink: 0; color: #f0b86a; border-color: #f0b86a66; }
.feuille-signalement { border-radius: 18px; max-width: 520px; padding: 18px 16px 16px; }
.feuille-signalement h3 { color: #f0b86a; font-size: 1.02rem; margin: 0 0 10px; }
.sg-contexte { background: var(--fond-3); border-radius: 10px; padding: 9px 11px; font-size: .86rem; line-height: 1.45; margin-bottom: 10px; }
.sg-raisons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sg-raison { border: 1px solid #3a3a46; background: transparent; color: var(--texte); border-radius: 16px; padding: 6px 11px; font: inherit; font-size: .8rem; cursor: pointer; }
.sg-raison.actif { background: #f0b86a; border-color: #f0b86a; color: #17130a; font-weight: 600; }
.feuille-signalement textarea { width: 100%; box-sizing: border-box; }
.sm-signal { font-size: .76rem; color: #f0b86a; margin-bottom: 4px; font-weight: 600; }

/* ---------- Commentaires Nethora (entracte et fin de chapitre) ----------
   Une bande du défilement : on la lit ou on la dépasse, rien ne s'arrête.
   Les images ont une taille fixe : la hauteur du bloc est connue dès son
   arrivée, la lecture ne saute pas quand elles se chargent. */
.comm-bloc { max-width: 680px; margin: 0 auto 18px; text-align: left; letter-spacing: normal; font-weight: 400; color: var(--texte); }
.comm-bloc.vide { margin: 10px auto 2px; text-align: center; }
.comm-invite { background: #ffffff0a; border: 1px dashed #c9a22755; color: var(--or); border-radius: 12px; padding: 9px 14px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.comm-invite small { color: var(--texte-2); font-weight: 400; }
.comm-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.comm-tete h4 { font-size: .76rem; color: var(--or); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; margin: 0; }
.comm-nb { font-size: .74rem; color: var(--texte-2); background: #ffffff10; border-radius: 10px; padding: 1px 8px; }
.comm-liste { display: flex; flex-direction: column; gap: 8px; }
.cm-carte { background: #16161ecc; border: 1px solid #2a2a35; border-radius: 12px; padding: 10px 12px; }
/* Super like de l'administrateur : cadre jaune or et halo qui respire */
.cm-carte.cm-super { border: 2px solid #e2b93b; background: linear-gradient(160deg, #2a2212, #16161ecc 60%); box-shadow: 0 0 0 1px #e2b93b33, 0 0 18px #e2b93b55; animation: super-brille 3.2s ease-in-out infinite; }
.cm-super .cm-texte { color: #fbe9b0; }
.cm-super-marque { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 10px; font-size: .68rem; font-weight: 800; letter-spacing: .3px; color: #1a1408;
  background: linear-gradient(100deg, #b8912b, #f3d77a 50%, #b8912b); background-size: 220% 100%; animation: reflet-or 9s linear infinite; }
@keyframes super-brille { 50% { box-shadow: 0 0 0 1px #e2b93b55, 0 0 28px #e2b93b88; } }
@media (prefers-reduced-motion: reduce) { .cm-carte.cm-super, .cm-super-marque { animation: none; } }
.cm-tete { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.cm-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #c9a227, #7a5c12); color: #120e04; font-weight: 800; font-size: .74rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cm-quand { color: var(--texte-2); font-size: .72rem; }
.cm-suppr { margin-left: auto; background: none; border: 0; color: #d77; font-size: .72rem; cursor: pointer; padding: 2px 4px; }
.cm-texte { margin-top: 6px; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-medias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cm-media { width: 140px; height: 140px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #0c0c10; cursor: zoom-in; }
.cm-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comm-plus, .comm-bloc .comm-ecrire:not(.comm-invite) { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; font: inherit; font-size: .84rem; cursor: pointer; }
.comm-plus { background: transparent; border: 1px solid #33333f; color: var(--texte-2); }
.comm-bloc .comm-ecrire:not(.comm-invite) { background: #c9a2271a; border: 1px solid #c9a22766; color: var(--or); font-weight: 600; }
#lecteur-fin-comm { margin-top: 18px; }
.comm-visionneuse { align-items: center; padding: 12px; cursor: zoom-out; }
.comm-visionneuse img { max-width: 100%; max-height: calc(92 * var(--u-dvh, 1dvh)); border-radius: 10px; }
.feuille-commentaire { border-radius: 18px; max-width: 520px; padding: 18px 16px 16px; }
.feuille-commentaire h3 { color: var(--or); font-size: 1rem; margin: 0 0 6px; }
.feuille-commentaire textarea { width: 100%; box-sizing: border-box; margin-top: 10px; }
.cm-previsu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cm-previsu:empty { display: none; }
.cm-lien { display: flex; gap: 8px; margin-top: 8px; }
.cm-lien input { flex: 1; min-width: 0; background: var(--fond-3); border: 1px solid #33333f; color: var(--texte); border-radius: 10px; padding: 9px 10px; }
/* Commentaires arrivés après coup dans un séparateur simple : marges */
.separateur-chapitre:not([data-avis]) .comm-bloc:not(.vide) { padding: 6px 16px 4px; }

/* ---------- Barre du bas : 7 onglets ----------
   Sur l'écran d'un téléphone, elle glisse de gauche à droite (5 onglets
   visibles) ; sur un écran large (Fold déplié), tout tient d'un coup. */
#nav-bas {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
#nav-bas::-webkit-scrollbar { display: none; }
.onglet { flex: 0 0 20%; min-width: 64px; scroll-snap-align: start; white-space: nowrap; }
@media (min-width: 600px) { .onglet { flex: 1 1 0; min-width: 0; } }
/* Indice qu'il y a d'autres onglets : un léger fondu sur le bord */
#nav-bas.suite-droite { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
#nav-bas.suite-gauche { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
#nav-bas.suite-gauche.suite-droite { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ico-commentaires { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15v10h-9l-4.5 3.6v-3.6H4.5z'/%3E%3Cpath d='M8.5 9.5h7M8.5 12.3h4.5'/%3E%3C/svg%3E"); }
.ico-demandes { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20.5V4.5'/%3E%3Cpath d='M6 5h11l-2.2 3.6L17 12.2H6'/%3E%3C/svg%3E"); }
#badge-commentaires, #badge-demandes { position: absolute; top: 6px; right: calc(50% - 22px); }

/* ---------- Vues Commentaires et Demandes ---------- */
#vue-commentaires h2, #vue-demandes h2 { font-size: 1.15rem; margin: 4px 0 6px; }
.vue-sous-titre { color: var(--texte-2); font-size: .82rem; line-height: 1.45; margin: 0 0 14px; }
#vue-commentaires, #vue-demandes { max-width: 720px; margin: 0 auto; }
.comm-onglets { margin-bottom: 14px; }
.comm-pastille { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--or); color: #17130a; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; }
.comm-fil { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.cf-item { background: var(--fond-2); border: 1px solid #24242e; border-radius: 14px; padding: 12px; }
.cf-item.non-lu { border-color: #c9a22777; box-shadow: inset 3px 0 0 var(--or); }
.cf-oeuvre { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.cf-oeuvre img { width: 34px; height: 48px; object-fit: cover; border-radius: 6px; background: #111; flex: none; }
.cf-oeuvre .cf-couv-vide { width: 34px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #2a2a35, #16161d); flex: none; }
.cf-oeuvre b { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-oeuvre small { color: var(--texte-2); font-size: .74rem; }
.cf-origine { font-size: .76rem; color: var(--texte-2); background: #ffffff08; border-left: 2px solid #c9a22766; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.cf-fil-reponses { margin: 8px 0 0 16px; padding-left: 10px; border-left: 2px solid #2a2a35; display: flex; flex-direction: column; gap: 8px; }
/* Actions d'un commentaire : j'aime, répondre, réponses */
.cm-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.cm-action { background: none; border: 0; color: var(--texte-2); font: inherit; font-size: .78rem; padding: 5px 8px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.cm-action:active { background: #ffffff10; }
.cm-action.aime { color: #ff6b81; }
.cm-mention { color: var(--or); font-weight: 600; }
/* Spoiler : flouté tant qu'on n'a pas touché */
.cm-spoiler { position: relative; cursor: pointer; }
.cm-spoiler > .cm-texte, .cm-spoiler > .cm-medias { filter: blur(7px); user-select: none; pointer-events: none; }
.cm-spoiler::after { content: attr(data-raison); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .78rem; font-weight: 600; color: var(--or); background: #0d0d12aa; border-radius: 8px; padding: 6px; }
.cm-corps { margin-top: 4px; }
.cm-reponses-bloc { margin: 8px 0 0 14px; padding-left: 10px; border-left: 2px solid #2a2a35; display: flex; flex-direction: column; gap: 8px; }
.cm-reponses-bloc .cm-carte { background: #1a1a22cc; }
.cm-option { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; color: var(--texte-2); }
.cm-option input { width: 18px; height: 18px; accent-color: var(--or); }
/* Bannière de notification dans l'app (version navigateur, ou app ouverte) */
.bandeau-notif { position: fixed; left: 10px; right: 10px; top: calc(10px + var(--haut-sur)); z-index: 250; max-width: 520px; margin: 0 auto;
  background: #1b1b24f5; border: 1px solid #c9a22788; border-radius: 14px; padding: 11px 14px; box-shadow: 0 10px 28px #000c;
  font-size: .84rem; line-height: 1.4; cursor: pointer; animation: bulle-entree .2s ease-out; }
.bandeau-notif b { color: var(--or); }
/* Super like de Nethora : bandeau doré, comme le commentaire distingué */
.bandeau-notif.bandeau-superlike { border: 2px solid #e2b93b; background: linear-gradient(135deg, #2a2210f5, #1b1b24f5); box-shadow: 0 0 22px #e2b93b66, 0 10px 28px #000c; }

/* ---------- Fiche d'une œuvre (1.90.0) ----------
   De haut en bas : l'essentiel (lire, où j'en suis), les deux notes côte à
   côte, les commentaires Nethora, les avis d'Internet, les chapitres dans
   une case qui défile seule, « Plus d'infos » replié, les œuvres semblables. */
.fiche-v2 { max-width: 980px; margin: 0 auto; }
.fiche-v2 #serie-carrousel { height: min(calc(34 * var(--u-dvh, 1dvh)), 320px); }
.fv-haut { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) {
  .fv-haut { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
  .fiche-v2 #serie-carrousel { height: min(calc(52 * var(--u-dvh, 1dvh)), 440px); }
  .fv-haut .serie-banniere { margin-bottom: 0; }
}
.fv-essentiel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fv-essentiel .serie-actions { margin: 0; }
.fv-prog { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fv-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fv-note { background: var(--fond-2); border: 1px solid #24242e; border-radius: 14px; padding: 12px; min-width: 0; }
.fv-note-app { border-color: #c9a22766; background: linear-gradient(160deg, #2a2312, var(--fond-2) 70%); }
.fv-note-lib { font-size: .7rem; text-transform: uppercase; letter-spacing: .6px; color: var(--texte-2); font-weight: 700; }
.fv-note-app .fv-note-lib { color: var(--or); }
.fv-note-val { margin-top: 4px; }
.fv-note-val span { font-size: 1.7rem; font-weight: 800; color: var(--texte); }
.fv-note-app .fv-note-val span { color: var(--or); }
.fv-note-val small { font-size: .78rem; color: var(--texte-2); margin-left: 2px; }
.fv-note-det { font-size: .72rem; color: var(--texte-2); margin-top: 2px; line-height: 1.35; }
.fv-ma-note { margin: 0; }
.fv-bloc { background: var(--fond-2); border: 1px solid #24242e; border-radius: var(--rayon); padding: 14px; margin-top: 14px; }
.fv-titre { font-size: .9rem; color: var(--or); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.fv-titre .comm-nb:empty { display: none; }
#fv-comm .comm-liste { gap: 10px; }
.cm-chap { font-size: .7rem; font-weight: 700; color: var(--or); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
#fv-comm .comm-ecrire { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; font: inherit; font-size: .84rem; cursor: pointer; background: #c9a2271a; border: 1px solid #c9a22766; color: var(--or); font-weight: 600; }
#fv-comm .comm-plus { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; font: inherit; font-size: .84rem; cursor: pointer; background: transparent; border: 1px solid #33333f; color: var(--texte-2); }
/* Chapitres : case fixe à défilement propre (la page ne bouge pas) */
.fv-chapitres .entete-chapitres { margin-top: 0; margin-bottom: 8px; }
.fv-boite {
  height: min(calc(52 * var(--u-dvh, 1dvh)), 460px); overflow-y: auto; margin-top: 0 !important;
  border: 1px solid #24242e; border-radius: 12px; background: var(--fond);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.fv-boite .ligne-chapitre { padding: 11px 12px; }
/* Plus d'infos : replié par défaut */
.fv-plus > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.fv-plus > summary::-webkit-details-marker { display: none; }
.fv-plus > summary span:first-child { color: var(--or); font-weight: 700; font-size: .9rem; }
.fv-plus > summary small { flex: 1; color: var(--texte-2); font-size: .74rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-plus .dp-chevron { color: #c9a227; transform: rotate(-90deg); transition: transform .2s; }
.fv-plus[open] .dp-chevron { transform: rotate(0); }
.fv-plus-corps { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
/* Parution (ticket du 04/10/2026) : « ✓ Terminée » en vert, « En cours » en bleu */
.pastille.parution-fini { background: #14251c; color: var(--vert); border-color: #2f5a44; }
.pastille.parution-cours { background: #16203a; color: #8fb3ff; border-color: #2b3d6b; }
.cm-parution { position: absolute; right: 6px; top: 6px; z-index: 1; padding: 1px 6px; border-radius: 8px; font-size: .62rem; font-weight: 700; background: #0d0d12cc; backdrop-filter: blur(2px); }
.cm-parution.parution-fini { color: #6fdca6; border: 1px solid #2f5a44; }
.cm-parution.parution-cours { color: #8fb3ff; border: 1px solid #2b3d6b; }
/* Tags de l'œuvre : petite section dépliable sous « Ta note » (ticket du 03/10/2026) */
.fv-tags { margin-top: 10px; background: var(--fond-2); border: 1px solid #26262f; border-radius: 14px; padding: 8px 12px; }
.fv-tags > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: var(--texte); }
.fv-tags > summary::-webkit-details-marker { display: none; }
.fv-tags > summary small { color: var(--texte-2); font-weight: 600; }
.fv-tags .dp-chevron { margin-left: auto; color: #c9a227; transform: rotate(-90deg); transition: transform .2s; }
.fv-tags[open] .dp-chevron { transform: rotate(0); }
.fv-tags .genres-serie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fv-plus-corps .ligne-reglage select { max-width: 58%; }
.cm-spoiler { min-height: 48px; }
/* Fiche : boutons sous les avis ; fenêtre « tous les commentaires » */
.fv-comm-boutons { display: flex; flex-direction: column; gap: 0; }
.feuille-tous-comm { max-height: calc(90 * var(--u-dvh, 1dvh)); }
.tc-sommaire { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; margin-bottom: 6px; position: sticky; top: -18px; background: var(--fond-2); z-index: 2; padding-top: 6px; }
.tc-sommaire::-webkit-scrollbar { display: none; }
.tc-sommaire .chip { flex: 0 0 auto; }
.tc-groupe { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 50px; }
.tc-titre { font-size: .76rem; font-weight: 700; color: var(--or); text-transform: uppercase; letter-spacing: .6px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #2a2a35; padding-bottom: 6px; }
/* Fiche : les sources à droite de « Lu : », modifiables d'un appui */
.fv-prog .cs-retard { margin-left: 4px; }
.fv-prog .fv-sources { margin-left: auto; }
.fv-prog #serie-retard:empty { display: none; }

/* ---------- Contenu pour adultes sur demande ----------
   Sans accès accordé : les cases +18 et ecchi et leurs pastilles d'en-tête
   disparaissent ; un bloc propose de faire la demande. */
html.sans-adulte label.ligne-reglage:has(#reg-nsfw),
html.sans-adulte label.ligne-reglage:has(#reg-ecchi),
html.sans-adulte #filtres-contenu .btn-contenu[data-niveau="nsfw"],
html.sans-adulte #filtres-contenu .btn-contenu[data-niveau="ecchi"] { display: none !important; }
.acces-adulte { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; border-bottom: 1px solid #1f1f28; margin-bottom: 4px; }
.acces-adulte .aa-info, .acces-adulte .aa-attente, .acces-adulte .aa-ok, .acces-adulte .aa-non { font-size: .84rem; line-height: 1.45; }
.acces-adulte .aa-attente { color: #c9c3ff; }
.acces-adulte .aa-ok { color: #6fd6a4; }
.acces-adulte .aa-non { color: #e58a8a; }

/* Message de l'administrateur à tout le monde : par-dessus tout, lecteur compris */
.alerte-admin-fond { z-index: 400; align-items: center; padding: 16px; background: #000c; }
.alerte-admin { border-radius: 20px; max-width: 460px; padding: 20px 18px 16px; border: 1px solid #c9a22799; box-shadow: 0 0 40px #c9a22733, 0 20px 50px #000; animation: bulle-entree .25s ease-out; }
.alerte-admin .aa-entete { color: var(--or); font-weight: 800; font-size: 1.02rem; }
.alerte-admin .aa-quand { color: var(--texte-2); font-size: .76rem; margin: 3px 0 14px; }
.alerte-admin .aa-texte { font-size: .95rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 16px; }
.alerte-admin .btn-principal { width: 100%; }

/* Sélecteur de GIF des commentaires (Klipy) */
.cm-gifs { margin: 8px 0; border: 1px solid #ffffff14; border-radius: 14px; padding: 8px; background: #0003; }
.cm-gifs .champ-commentaire { margin: 0 0 8px; }
.cm-gifs-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: calc(42 * var(--u-dvh, 1dvh)); overflow-y: auto; overscroll-behavior: contain; }
.cm-gifs-grille .compteur { grid-column: 1 / -1; }
.cm-gif { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #ffffff0d; aspect-ratio: 1; cursor: pointer; }
.cm-gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-gifs-pied { text-align: right; font-size: .66rem; color: var(--texte-2); margin-top: 6px; letter-spacing: .04em; }
@media (min-width: 600px) { .cm-gifs-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Lecteur : l'appui long sert à la lecture automatique — pas de menu
   d'image de l'iPhone (Partager, Enregistrer, Copier le sujet), pas de
   sélection, pas de glisser-déposer de l'image */
#lecteur-defile, #lecteur-pages img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* iPhone : un champ en dessous de 16 px fait zoomer Safari quand on écrit ;
   la page reste alors décalée et un appui tombe sur le bouton d'à côté
   (fenêtre « Signaler », commentaires…). 16 px partout sur iPhone/iPad. */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: max(16px, 1em) !important; }
}

/* ---------- Écran PC : « le Fold agrandi » (js/ecranpc.js) ----------
   Toute l'interface est agrandie pour garder la hauteur du Fold déplié :
   les colonnes plafonnées laissaient des bandes vides, elles prennent ici
   toute la largeur (le lecteur garde la largeur de page du Fold). */
html.ecran-pc #vue-accueil, html.ecran-pc #serie-contenu, html.ecran-pc #vue-reglages, html.ecran-pc #vue-statistiques { max-width: none; }
html.ecran-pc, html.ecran-pc body { background: var(--fond); }

/* ---------- Onglet Stats : bilans du mois en tête, puis les chiffres ---------- */
.ico-podium { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8.5 20.5h7M9.5 17h5'/%3E%3C/svg%3E"); }
.ico-stats { --ico: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5h16'/%3E%3Cpath d='M7 17V11M12 17V6M17 17v-8'/%3E%3C/svg%3E"); }
#badge-stats { position: absolute; top: 4px; right: calc(50% - 24px); background: none; font-size: .8rem; padding: 0; min-width: 0; }
#vue-statistiques { max-width: 900px; margin: 0 auto; }
#vue-statistiques h2 { font-size: 1.15rem; margin: 4px 0 6px; }
.stat-section-tete { margin-top: 10px; }
.bilan-vedette { width: 100%; margin: 0 0 10px; }
.bb-nouveau { color: var(--or); font-weight: 800; }
.bilans-liste { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.bilans-liste::-webkit-scrollbar { display: none; }
.bilan-mois { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 14px; border-radius: 12px;
  border: 1px solid #2a2a35; background: var(--fond-2); color: var(--texte); font: inherit; cursor: pointer; text-align: left; }
.bilan-mois b { font-size: .86rem; }
.bilan-mois small { font-size: .7rem; color: var(--texte-2); }
.bilan-mois.actif { border-color: #8a6d1f; background: linear-gradient(140deg, #2a2312, var(--fond-2)); }
/* Mois par mois : la valeur au-dessus, le mois en dessous */
.stat-graph-mois { height: 170px; gap: 6px; padding-top: 24px; padding-bottom: 26px; }
.stat-graph-mois .stat-barre { position: relative; flex-direction: column; justify-content: flex-end; }
.stat-graph-mois .stat-barre i { border-radius: 3px; }
.stat-barre-val { order: -1; font-size: .62rem; color: var(--texte-2); text-align: center; margin-bottom: 2px; }
.stat-barre-nom { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: .62rem; color: var(--texte-2); }

/* ---- Tickets du 01/10 (2e vague) ---- */
/* iPhone, appui long dans le lecteur : les pages ne reçoivent plus le doigt
   (c'est la zone de lecture dessous qui le reçoit) ; Safari n'a donc plus
   d'image sur laquelle ouvrir son menu (Partager, Enregistrer, Copier le
   sujet). Seule la page-message « page manquante » reste touchable. */
#lecteur-pages img:not([data-manquante]) { pointer-events: none; }
#vue-lecteur { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* iPhone : pas de zoom au double appui (l'interface restait décalée) */
html { touch-action: manipulation; }
/* Fenêtres : le fond ne défile plus sous le doigt, la fenêtre ne « rebondit »
   plus — elle ne bouge plus pendant qu'on vise un bouton */
.feuille-fond, .feuille { overscroll-behavior: contain; }
/* Signaler : des raisons plus grandes et plus espacées (44 px, le minimum
   conseillé pour un doigt) */
.sg-raisons { gap: 10px; }
.sg-raison { min-height: 44px; padding: 10px 14px; font-size: .86rem; }
/* GIF : sur iPhone, les vignettes se chevauchaient (rangées plus basses que
   les images) ; carrés à hauteur fixe, bien séparés et cernés */
.cm-gifs-grille { gap: 10px; grid-auto-rows: auto; }
.cm-gif { aspect-ratio: auto; position: relative; height: 0; padding-bottom: 100%; box-shadow: 0 0 0 1px #ffffff26; }
.cm-gif img { position: absolute; inset: 0; }
/* Récents en fils de discussion : un fil = une carte, réponses en dessous */
.cf-fil { margin-bottom: 14px; }
.cf-fil .cm-reponses-bloc { margin-left: 18px; border-left-color: #d4af3755; }
.cf-fil .cm-reponses-bloc > .cm-action { align-self: flex-start; color: var(--or); }

/* ---------- Japscan : lu dans le navigateur de l'app (js/japscan.js) ---------- */
.btn-japscan { flex: 0 0 auto; white-space: nowrap; }
.btn-japscan-recherche { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; margin: 16px 0 8px; padding: 12px 14px;
  border: 1px dashed #4a3d15; border-radius: var(--rayon); background: #2a231214; color: var(--or); font: inherit; font-weight: 700; cursor: pointer; }
.btn-japscan-recherche small { font-weight: 400; font-size: .74rem; color: var(--texte-2); text-align: center; }
/* Case « Chercher aussi sur Japscan » sous le champ de recherche */
.case-japscan { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: .82rem; color: var(--texte-2); cursor: pointer; }
.case-japscan input { width: 18px; height: 18px; accent-color: var(--or); }
/* Fenêtre « Recherche Japscan » */
.feuille-japscan { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.feuille-japscan h3 { margin: 0; color: var(--or); }
.feuille-japscan .fj-q { margin: 0; font-size: 1.05rem; font-weight: 700; }
.feuille-japscan .fj-aide { margin: 0; font-size: .8rem; color: var(--texte-2); }
/* Bloc Japscan de la fiche (chapitres vus sur le site) */
.fv-japscan .liste-chapitres { max-height: 320px; overflow-y: auto; }
.fv-japscan .ligne-chapitre { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.fv-japscan .lc-lu { color: #6fdca6; font-size: .78rem; }
.fv-japscan .fj-page { width: 100%; }

/* ---------- Commentaires ancrés à un endroit du chapitre ---------- */
#btn-lecteur-commenter { font-size: .72rem; padding: 4px 10px; flex-shrink: 0; }
@media (max-width: 520px) { #btn-lecteur-commenter .txt-commenter { display: none; } }
/* Traits dorés sur la barre de progression (à droite) */
.repere-comm { position: absolute; right: -2px; width: 14px; height: 4px; margin-top: -2px; padding: 0; border: 0; border-radius: 2px;
  background: #e2b93b; box-shadow: 0 0 6px #e2b93baa; pointer-events: none; cursor: pointer; }
.repere-comm::before { content: ''; position: absolute; inset: -12px -6px -12px -18px; }
/* Menu affiché (tap au milieu) : la barre et ses repères se montrent et se touchent */
#lecteur-barre-haut:not(.discret) ~ #lecteur-progression { opacity: 1; }
#lecteur-barre-haut:not(.discret) ~ #lecteur-progression .repere-comm { pointer-events: auto; }
#lecteur-barre-haut:not(.discret) ~ #lecteur-progression .repere-comm:not(.proche) { width: 20px; height: 6px; margin-top: -3px; }
.cm-endroit { color: #e2b93b; }
/* Lecture tout près d'un endroit commenté : le trait grossit, pulse, se touche */
#lecteur-progression.repere-proche { opacity: 1; }
#lecteur-progression .repere-comm.proche { pointer-events: auto; width: 30px; height: 12px; margin-top: -6px; right: -3px; border-radius: 6px;
  animation: repere-pulse 1.4s ease-in-out infinite; transition: width .2s ease, height .2s ease; }
.repere-comm.proche::after { content: '💬'; position: absolute; right: 36px; top: 50%; transform: translateY(-50%);
  font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 12px; background: #000c; border: 1px solid #e2b93b88; }
@keyframes repere-pulse { 0%, 100% { box-shadow: 0 0 8px #e2b93bcc; } 50% { box-shadow: 0 0 18px 3px #f5d76e; background: #f5d76e; } }
@media (prefers-reduced-motion: reduce) { #lecteur-progression .repere-comm.proche { animation: none; } }

/* Précision demandée par l'administrateur : fenêtre par-dessus tout */
.precision-fond { z-index: 410; align-items: center; padding: 16px; background: #000c; }
.precision-feuille { border-radius: 18px; max-width: 480px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #d4af3766; }
.pf-entete { color: var(--or); font-weight: 800; font-size: 1.05rem; }
.pf-demande, .pf-question { border-radius: 12px; padding: 10px 12px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-demande { background: var(--fond-3); color: var(--texte-2); font-style: italic; }
.pf-question { background: #d4af371f; border: 1px solid #d4af3755; color: var(--texte); font-weight: 600; }
.pf-demande small, .pf-question small { display: block; font-style: normal; font-weight: 700; font-size: .72rem; letter-spacing: .4px; text-transform: uppercase; color: var(--texte-3); margin-bottom: 4px; }
.precision-feuille textarea { margin-top: 0; width: 100%; box-sizing: border-box; }
.pf-etat { font-size: .8rem; color: #f0b86a; min-height: 0; }
.precision-feuille #pf-plus-tard:disabled { opacity: .5; }

/* Mes demandes : conversation avec l'administrateur sous la demande */
.sm-conv { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sm-conv-msg { max-width: 90%; padding: 8px 11px; border-radius: 12px; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-conv-msg.admin { align-self: flex-start; background: #d4af371f; border: 1px solid #d4af3755; border-bottom-left-radius: 4px; }
.sm-conv-msg.moi { align-self: flex-end; background: #ffffff0f; border: 1px solid #ffffff1a; border-bottom-right-radius: 4px; }
.sm-conv-qui { display: block; font-size: .7rem; color: var(--texte-2); margin-bottom: 2px; }
.sm-conv-ouvrir { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--or); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.sm-conv-saisie textarea { width: 100%; box-sizing: border-box; margin-top: 0; }

/* Mes demandes : une demande qui attend ma réponse ressort, champ toujours visible */
.sugg-mienne.attend-reponse { box-shadow: 0 0 0 1px #d4af3799, 0 6px 20px #d4af3722; }
.sm-attend { font-size: .8rem; font-weight: 800; color: var(--or); margin-bottom: 6px; }
.sm-conv-saisie { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sm-conv-saisie textarea { width: 100%; box-sizing: border-box; }
.sm-conv-saisie .btn-principal { width: 100%; }

/* Fenêtre des doublons ouverte depuis le bandeau de la bibliothèque */
.doublons-feuille { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
.df-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--or); font-size: 1rem; }
.doublons-feuille > .cs-date { margin: 6px 0 10px; line-height: 1.35; }

/* Fiche : bouton « contenu sensible » à gauche de l'étoile des favoris */
.sensible-entete {
  margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px dashed #3a3a46; background: transparent; display: inline-flex; align-items: center; justify-content: center;
}
.sensible-entete + .etoile-entete { margin-left: 4px; }
.sensible-entete .ico { width: 20px; height: 20px; display: block; background: #55525a; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.sensible-entete.actif { border: 1px solid #4a3d15; background: #1a160b; }
.sensible-entete.actif .ico { background: linear-gradient(100deg, #8a6d1f 0%, var(--or) 30%, #fff6c9 50%, var(--or) 70%, #8a6d1f 100%); background-size: 220% 100%; animation: reflet-or 9s linear infinite; }
.sensible-entete:active { transform: scale(.9); }
.mode-anime #serie-sensible, .mode-films #serie-sensible { display: none; }
.mode-anime #serie-sensible + .etoile-entete, .mode-films #serie-sensible + .etoile-entete { margin-left: auto; }
.niveau-feuille { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.nf-entete { color: var(--or); font-weight: 800; font-size: 1.05rem; }
.niveau-feuille > .cs-date { margin: 0 0 4px; line-height: 1.35; }
.nf-choix { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid #2c2c36; background: var(--fond-3); color: inherit; font: inherit; cursor: pointer; }
.nf-choix.actif { border-color: #4a3d15; background: #2a2312; color: var(--or); font-weight: 700; }

/* « Mauvais chapitre ? » : case « marquer faux sur cette source » */
.mc-case { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fond-3); font-size: .9rem; line-height: 1.35; cursor: pointer; }
.mc-case input { accent-color: var(--or); width: 18px; height: 18px; flex-shrink: 0; }

/* Pliure au centre de la double page (ticket du 01/10/2026) : les deux
   planches se rejoignent au milieu de l'écran ; une ombre de reliure, de
   plus en plus dense vers le centre, donne l'illusion des pages qui se
   courbent. Calque fixe, sans effet sur les gestes. */
#lecteur-reliure {
  display: none; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: min(14vw, 170px); transform: translateX(-50%); pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 20%, rgba(0,0,0,.09) 34%, rgba(0,0,0,.2) 43%,
      rgba(0,0,0,.42) 48.5%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.42) 51.5%,
      rgba(0,0,0,.2) 57%, rgba(0,0,0,.09) 66%, rgba(0,0,0,.03) 80%, rgba(0,0,0,0) 100%);
  mix-blend-mode: multiply;
}
#vue-lecteur.paginee:not(.sans-reliure) #lecteur-reliure { display: block; }
/* Pendant qu'une page tourne, la feuille animée (couche 4) passait
   par-dessus l'ombre : elle disparaissait puis revenait d'un coup (ticket
   du 01/10/2026). La feuille porte donc la MÊME ombre, au même endroit
   (son milieu est la reliure), au-dessus de ses lamelles : rien ne saute. */
#vue-lecteur:not(.sans-reliure) .tourne-page::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2;
  width: min(14vw, 170px); transform: translateX(-50%); pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 20%, rgba(0,0,0,.09) 34%, rgba(0,0,0,.2) 43%,
      rgba(0,0,0,.42) 48.5%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.42) 51.5%,
      rgba(0,0,0,.2) 57%, rgba(0,0,0,.09) 66%, rgba(0,0,0,.03) 80%, rgba(0,0,0,0) 100%);
  mix-blend-mode: multiply;
}

/* Fiche : bouton ⚠ « signaler l'œuvre », à gauche du contenu sensible */
.signaler-entete {
  margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid #3a3a46; background: transparent; color: #c9a227; font-size: 1.05rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.signaler-entete:active { transform: scale(.9); }
.signaler-entete + .sensible-entete { margin-left: 4px; }
.mode-anime #serie-signaler, .mode-films #serie-signaler { display: none; }

/* Bibliothèque : filtres rapides format + contenu (ticket du 02/10/2026).
   Une puce allumée = « seulement ceux-là » ; plusieurs dans un même groupe
   s'additionnent ; aucune = tout. */
.filtres-biblio-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.puce-filtre {
  height: 30px; padding: 0 12px; border-radius: 15px; cursor: pointer;
  border: 1px solid #2c2c36; background: #14141b; color: var(--texte-2); font: inherit; font-size: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.puce-filtre.actif { border-color: #4a3d15; background: #2a2312; color: var(--or); font-weight: 700; }
.puce-filtre:active { transform: scale(.94); }
.puce-niveau { width: 30px; padding: 0; }
.puce-niveau .ico { width: 16px; height: 16px; display: block; background: #6a665e; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.puce-niveau.actif .ico { background: linear-gradient(100deg, #8a6d1f 0%, var(--or) 30%, #fff6c9 50%, var(--or) 70%, #8a6d1f 100%); background-size: 220% 100%; animation: reflet-or 9s linear infinite; }
.puce-separateur { width: 1px; height: 18px; background: #2c2c36; margin: 0 2px; }
.mode-anime #filtres-biblio-puces, .mode-films #filtres-biblio-puces { display: none; }

/* Fiche : bouton du format (manga / manhwa / manhua), entre ⚠ et le contenu sensible */
.format-entete {
  flex-shrink: 0; height: 30px; min-width: 38px; padding: 0 9px; margin-left: 4px; border-radius: 15px; cursor: pointer;
  border: 1px dashed #3a3a46; background: transparent; color: #8d8a93; font: inherit; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.format-entete.actif { border: 1px solid #4a3d15; background: #1a160b; color: var(--or); }
.format-entete:active { transform: scale(.92); }
.format-entete + .sensible-entete { margin-left: 4px; }
.mode-anime #serie-format, .mode-films #serie-format { display: none; }

/* Doubles pages d'origine coupées en deux (02/10/2026). En lecture
   verticale, chaque moitié est l'image entière cadrée sur sa moitié (sa
   boîte a les proportions d'une demi-image : « cover » montre exactement
   la moitié). En mode livre (Fold déplié), la double page d'origine
   reprend toute la largeur, comme un livre ouvert, et sa seconde moitié
   s'efface. */
#lecteur-pages img.demi-page { object-fit: cover; }
#lecteur-pages img.demi-droite { object-position: right center; }
#lecteur-pages img.demi-gauche { object-position: left center; }
#lecteur-pages .section-chapitre.double img.demi-page.demi-2 { display: none; }
#lecteur-pages .section-chapitre.double img.demi-page.demi-1 { flex: 0 0 100%; width: 100%; object-fit: contain; object-position: center; }
/* Bouton « couper les doubles pages » de la barre du lecteur : or quand actif */
#btn-lecteur-coupe.actif { color: var(--or); background: #2a2312; border-color: #4a3d15; }
/* Barre du lecteur sur un écran étroit (téléphone, Fold plié) : avec le
   bouton ciseaux, tout ne tenait plus — libellés raccourcis, titre coupé
   proprement (02/10/2026) */
.txt-faux-court { display: none; }
#lecteur-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  #btn-lecteur-signaler .txt-signaler { display: none; }
  #btn-lecteur-faux .txt-faux-long { display: none; }
  #btn-lecteur-faux .txt-faux-court { display: inline; }
  #lecteur-barre-haut { gap: 6px; }
}
/* Mode livre : demi-page vide devant une double page entière qui serait
   à cheval sur deux écrans (voir aligneDoublesEntieres) */
#lecteur-pages .section-chapitre.double.rtl img.demi-page.demi-1.decale { margin-right: 50%; }
#lecteur-pages .section-chapitre.double:not(.rtl) img.demi-page.demi-1.decale { margin-left: 50%; }
/* Bouton « mode livre / défilement » de la barre du lecteur : or en mode livre */
#btn-lecteur-mode.actif { color: var(--or); background: #2a2312; border-color: #4a3d15; }

/* Signalement : « Envoyer comme » nouveau ticket ou complément d'un ticket (03/10/2026) */
.sg-cible { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; font-size: .82rem; color: var(--texte-2); }
.sg-cible select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid #4a3d15; background: #1a160b; color: var(--texte); font: inherit; font-size: .88rem; }

/* ---------- Messagerie entre membres (03/10/2026) ---------- */
.btn-messages { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.msg-pastille {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--rouge); color: #fff; font-size: .64rem; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--fond);
}
.msg-pastille.cache { display: none; }
/* Fiche : ↗ Partager, à gauche du ⚠ */
.partager-entete {
  margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid #3a3a46; background: transparent; color: var(--or);
  display: inline-flex; align-items: center; justify-content: center;
}
.partager-entete:active { transform: scale(.9); }
.partager-entete + .signaler-entete { margin-left: 4px; }
.mode-anime #serie-partager, .mode-films #serie-partager { display: none; }
/* La fenêtre */
.msg-fond, .msg-choix-fond { z-index: 95; }
.msg-feuille { display: flex; flex-direction: column; height: min(calc(88 * var(--u-dvh, 1dvh)), 760px); padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
.msg-choix { height: auto; max-height: calc(88 * var(--u-dvh, 1dvh)); }
.msg-tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid #2a2a35; }
.msg-tete h3 { margin: 0; flex: 1; font-size: 1.05rem; color: var(--or-clair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-fermer, .msg-retour { background: none; border: 0; color: var(--texte-2); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; }
.msg-nouveau { margin: 12px 16px 6px; }
.msg-liste, .msg-membres { flex: 1; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.msg-membres { max-height: 50vh; }
.msg-vide { color: var(--texte-2); text-align: center; padding: 28px 18px; line-height: 1.5; }
.msg-avatar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3a2f14, #6b5520); color: var(--or-clair); font-weight: 800;
}
.msg-conv, .msg-membre {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--fond-3); color: var(--texte);
  border: 0; border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer;
}
.msg-membre input { accent-color: var(--or); width: 18px; height: 18px; margin: 0; }
.msg-conv-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Conversation Nethora : épinglée, bordure or (04/10/2026) */
.msg-conv-salon { background: linear-gradient(135deg, #2c2410, #1d1a12); border: 1px solid #d4af3788; margin-bottom: 6px; }
.msg-conv-salon b { color: var(--or-clair); }
.msg-avatar-salon { background: radial-gradient(circle at 35% 30%, #fff3b0, #d4af37 45%, #7a5a12); color: #241a05; font-family: Georgia, serif; font-size: 1.1rem; box-shadow: 0 0 10px #d4af3766; }
.msg-salon-sous { display: block; font-size: .7rem; font-weight: 500; color: var(--texte-2); }
.msg-auteur { font-size: .78rem; font-weight: 700; color: var(--or-clair); margin-bottom: 2px; }
.msg-conv-texte small { color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--texte-2); font-size: .8rem; }
.msg-nonlu { background: var(--or); color: #17130a; border-radius: 10px; padding: 0 7px; font-weight: 800; font-size: .72rem; }
.msg-cherche, .msg-mot {
  margin: 10px 16px 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid #33333f; background: var(--fond); color: var(--texte); font: inherit;
}
.msg-mot { resize: none; }
.msg-valider { margin: 10px 16px 4px; }
/* Une conversation */
/* min-height: 0 : sans lui, la zone grandissait avec les messages au lieu de défiler,
   et la conversation ne descendait pas au dernier message (03/10/2026) */
.msg-fil { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 8px; }
.msg-bulle { max-width: 82%; padding: 8px 12px 6px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; word-wrap: break-word; }
.msg-bulle small { font-size: .68rem; opacity: .65; align-self: flex-end; }
.msg-bulle.autre { align-self: flex-start; background: var(--fond-3); border-bottom-left-radius: 4px; }
.msg-bulle.moi { align-self: flex-end; background: linear-gradient(135deg, #4a3c14, #2e2610); border: 1px solid #6b5520; border-bottom-right-radius: 4px; }
.msg-texte { line-height: 1.4; white-space: normal; }
.msg-en-attente { opacity: .6; } /* envoyé, en attente de confirmation du PC */
/* GIF dans les conversations (05/10/2026) — la grille reprend celle des commentaires */
.msg-gif-btn { flex: none; align-self: flex-end; height: 40px; min-width: 44px; padding: 0 8px; border-radius: 12px; border: 1px solid #33333f; background: var(--fond-3); color: var(--texte-2); font: inherit; font-size: .74rem; font-weight: 900; letter-spacing: .06em; cursor: pointer; }
.msg-gif-btn.actif { color: #17130a; background: var(--or); border-color: var(--or); }
.msg-gifs { margin: 0 12px 6px; padding: 8px; border: 1px solid #ffffff14; border-radius: 14px; background: #0003; }
.msg-gifs.cache { display: none; }
.msg-gifs-q { width: 100%; margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid #33333f; background: var(--fond); color: var(--texte); font: inherit; }
.msg-gifs-grille { max-height: calc(32 * var(--u-dvh, 1dvh)); }
.msg-gif { display: block; max-width: min(240px, 100%); max-height: 240px; border-radius: 12px; }
/* Pastille « ↓ Nouveaux messages » : au-dessus de la saisie quand on lit plus haut (04/10/2026) */
.msg-saisie { position: relative; }
.msg-pastille-bas { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 2; background: var(--or); color: #17130a; border: 0; border-radius: 16px; padding: 6px 14px; font: inherit; font-size: .8rem; font-weight: 800; box-shadow: 0 4px 14px #0008; cursor: pointer; }
.msg-pastille-bas[hidden] { display: none; }
.msg-oeuvre {
  display: flex; align-items: center; gap: 10px; text-align: left; background: #0006; color: var(--texte);
  border: 1px solid #ffffff14; border-radius: 12px; padding: 6px; font: inherit; cursor: pointer; min-width: 200px;
}
.msg-oeuvre img, .msg-oeuvre-vide { width: 46px; height: 66px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #000; display: inline-flex; align-items: center; justify-content: center; }
.msg-oeuvre span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-oeuvre small { color: var(--or); font-size: .72rem; }
.msg-saisie { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 0; border-top: 1px solid #2a2a35; }
.msg-saisie textarea {
  flex: 1; resize: none; max-height: 120px; padding: 10px 12px; border-radius: 18px; border: 1px solid #33333f;
  background: var(--fond); color: var(--texte); font: inherit; line-height: 1.35;
}
.msg-envoyer { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--or); color: #17130a; font-size: 1.1rem; cursor: pointer; flex: 0 0 auto; }
.msg-envoyer:disabled { opacity: .5; }
.msg-nouveau, .msg-valider, .msg-cherche, .msg-mot { width: auto; align-self: stretch; box-sizing: border-box; }
/* Statistiques : ton nom dans l'appli (03/10/2026) */
.profil-carte { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--fond-2); border: 1px solid #33333f; border-radius: var(--rayon); padding: 12px 14px; margin: 4px 0 14px; }
.profil-texte { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.profil-texte b { color: var(--or-clair); font-size: 1.05rem; }
.profil-texte small { color: var(--texte-2); font-size: .76rem; }
.profil-saisie input { flex: 1; min-width: 160px; padding: 10px 12px; border-radius: 12px; border: 1px solid #33333f; background: var(--fond); color: var(--texte); font: inherit; }
.profil-saisie .btn-principal, .profil-saisie .btn-secondaire { width: auto; padding: 10px 16px; }
.profil-reprendre { background: none; border: 0; color: var(--or); font: inherit; font-size: .82rem; cursor: pointer; padding: 4px 0; }
.profil-erreur { flex-basis: 100%; color: var(--rouge); }
.profil-changer { width: auto !important; flex: 0 0 auto; padding: 8px 18px; margin: 0; }
/* Bandeau « nouveau message », appli ouverte (03/10/2026) */
.msg-bandeau {
  position: fixed; left: 50%; top: calc(8px + var(--haut-sur, 0px)); z-index: 300;
  width: min(92vw, 520px); transform: translate(-50%, -140%); transition: transform .28s ease-out, opacity .28s;
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; cursor: pointer;
  background: linear-gradient(135deg, #2a2312, #1c1810); border: 1px solid var(--or); border-radius: 16px;
  box-shadow: 0 10px 30px #000c; opacity: 0;
}
.msg-bandeau.visible { transform: translate(-50%, 0); opacity: 1; }
.msg-bandeau-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-bandeau-texte b { color: var(--or-clair); font-size: .9rem; }
.msg-bandeau-texte span { color: var(--texte); font-size: .84rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msg-bandeau-fermer { background: none; border: 0; color: var(--texte-2); font-size: 1rem; padding: 8px; cursor: pointer; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .msg-bandeau { transition: none; } }

/* ---------- 🏆 Classement des lecteurs et titres (03/10/2026) ---------- */
.couronne { width: 22px; height: 22px; fill: currentColor; display: block; }
.couronne.or { color: #f5d76e; } .couronne.argent { color: #c8ced8; } .couronne.bronze { color: #d08a4a; }
.cl-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.cl-carte { background: var(--fond-2); border: 1px solid #26262f; border-radius: 16px; padding: 12px; }
.cl-tete { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.cl-emoji { font-size: 1.5rem; }
.cl-tete b { display: block; color: var(--or); font-size: .98rem; }
.cl-tete small { display: block; color: var(--texte-2, #b9b5ac); font-size: .74rem; line-height: 1.3; }
.cl-ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; margin-top: 4px; }
.cl-place { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: var(--texte-2, #b9b5ac); }
.cl-nom { min-width: 0; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
.cl-nom small { font-weight: 400; color: var(--texte-2, #b9b5ac); }
.cl-val { font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Le premier : un carré doré qui rayonne */
.cl-ligne.rang-or { background: linear-gradient(135deg, #3a2f0d, #241d08); border: 1px solid #d4af37; animation: cl-halo 2.6s ease-in-out infinite; }
.cl-ligne.rang-or .cl-val { color: #f5d76e; }
@keyframes cl-halo { 0%, 100% { box-shadow: 0 0 0 0 #d4af3700, 0 0 10px #d4af3733; } 50% { box-shadow: 0 0 0 3px #d4af3722, 0 0 22px #d4af3766; } }
.cl-ligne.rang-argent { background: #c8ced80f; border: 1px solid #c8ced844; }
.cl-ligne.rang-bronze { background: #d08a4a10; border: 1px solid #d08a4a44; }
.cl-ligne.cl-moi:not(.rang-or) { outline: 1px dashed #d4af3788; }
.cl-ligne.rang-autre { border-top: 1px dashed #2e2e3a; border-radius: 0 0 12px 12px; }
/* Titres : or, argent, bronze selon la place actuelle ; sinon écriture normale */
.cl-titre { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .3px; margin-top: 1px; }
.titre-or { background: linear-gradient(100deg, #8a6d1f, #f5d76e 45%, #fff6c9 55%, #d4af37); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.titre-argent { color: #c8ced8; } .titre-bronze { color: #d08a4a; } .titre-normal { color: var(--texte-2, #b9b5ac); font-weight: 500; }
.cl-titres { background: var(--fond-2); border: 1px solid #26262f; border-radius: 16px; padding: 12px; }
/* Page Stats rangée par grandes parties (ticket du 03/10/2026) : sous-titres
   à l'intérieur d'une partie, et de l'air entre les cadres « titres » et « skins » */
.cl-titres + .cl-titres { margin-top: 12px; }
.stat-sous { font-size: .84rem; font-weight: 700; color: var(--texte); margin: 16px 0 8px; }
.stat-section + .stat-sous, .stat-bloc > .stat-sous:first-child { margin-top: 4px; }
.cl-titres-tete { font-weight: 700; margin-bottom: 8px; }
.cl-titres-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cl-titre-choix { min-height: 40px; padding: 6px 12px; border-radius: 20px; border: 1px solid #2e2e3a; background: #17171f; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.cl-titre-choix.porte { border-color: #d4af37; box-shadow: 0 0 12px #d4af3744; }
.cl-titre-choix.titre-or { -webkit-text-fill-color: initial; background: #241d08; color: #f5d76e; }

/* Titres secrets (03/10/2026) : le titre porté, au-dessus de son nom ; annonce d'un titre gagné */
.titre-tete { text-align: center; font-size: 1.05rem; font-weight: 800; letter-spacing: .5px; margin: 4px 0 -2px; }
.titre-tete.titre-normal { color: var(--texte, #e8e6e1); }
.titre-gagne { position: fixed; inset: 0; z-index: 9000; background: #000b; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tg-carte { max-width: 360px; width: 100%; text-align: center; background: linear-gradient(160deg, #2a220b, #15120a); border: 1px solid #d4af37; border-radius: 22px; padding: 26px 20px; box-shadow: 0 0 40px #d4af3755; animation: tg-entre .5s ease-out; }
@keyframes tg-entre { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.tg-couronne { font-size: 2.6rem; }
.tg-sur { color: #b9b5ac; font-size: .85rem; margin: 6px 0 10px; text-transform: uppercase; letter-spacing: 1px; }
.tg-titre { font-size: 1.35rem; font-weight: 800; color: #f5d76e; margin: 4px 0; }
.tg-texte { color: #d8d3c6; font-size: .9rem; line-height: 1.45; margin: 12px 0 18px; }

/* Succès et niveaux de titres (03/10/2026) */
.titre-niveau { font-size: .72em; font-weight: 800; padding: 0 5px; border-radius: 6px; background: #d4af3726; color: #f5d76e; -webkit-text-fill-color: #f5d76e; vertical-align: 1px; }
.sc-carte { background: var(--fond-2); border: 1px solid #26262f; border-radius: 16px; padding: 12px; opacity: .7; }
.sc-carte.obtenu { opacity: 1; border-color: #d4af3766; box-shadow: 0 0 14px #d4af3722; }
.sc-tete { display: flex; align-items: center; gap: 10px; }
.sc-tete > div { flex: 1; min-width: 0; }
.sc-tete b { display: block; color: var(--or); }
.sc-tete small { display: block; color: var(--texte-2, #b9b5ac); font-size: .74rem; }
.sc-emoji { font-size: 1.6rem; }
.sc-val { font-size: 1.4rem; font-weight: 800; color: #f5d76e; }
.sc-barre { height: 6px; border-radius: 3px; background: #ffffff12; overflow: hidden; margin-top: 10px; }
.sc-barre i { display: block; height: 100%; background: linear-gradient(90deg, #d4af37, #f5d76e); }
.sc-pied { font-size: .74rem; color: var(--texte-2, #b9b5ac); margin-top: 6px; }

/* Trophées d'œuvre (03/10/2026) */
.tr-liste { display: flex; flex-direction: column; gap: 6px; }
.tr-ligne { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--fond-2); border: 1px solid #26262f; }
.tr-ligne.tr-finie { border-color: #d4af3766; background: linear-gradient(135deg, #2a220b, var(--fond-2)); }
.tr-couv { width: 38px; height: 52px; border-radius: 6px; overflow: hidden; background: #1b1b24; }
.tr-couv img { width: 100%; height: 100%; object-fit: cover; }
.tr-nom { min-width: 0; }
.tr-nom b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-nom small { display: block; font-size: .72rem; color: var(--texte-2, #b9b5ac); }
.tr-ico { font-size: 1.3rem; }

/* Détail d'une couronne ou d'un succès (03/10/2026) */
.cl-couronne[role="button"], .sc-carte[role="button"], .tr-ligne[role="button"] { cursor: pointer; }
.cl-couronne[role="button"]:active, .sc-carte[role="button"]:active, .tr-ligne[role="button"]:active { transform: scale(.98); }
.dc-valeur { color: #f5d76e; font-weight: 800; margin: 2px 0 10px; }
.dc-texte { color: var(--texte, #e8e6e1); line-height: 1.5; margin: 0 0 10px; }
.dc-liste { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; margin-bottom: 12px; }
.dc-ligne { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: 12px; background: var(--fond-2); border: 1px solid #26262f; color: inherit; font: inherit; text-align: left; }
.dc-ligne:disabled { opacity: 1; }
.dc-sans { display: flex; }

/* Trophées d'œuvre repliés de base (03/10/2026) : un résumé, la liste à la demande */
.tr-pli { background: var(--fond-2); border: 1px solid #26262f; border-radius: 14px; }
.tr-pli > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 12px 14px; cursor: pointer; font-size: .88rem; color: var(--texte-2, #b9b5ac); min-height: 44px; box-sizing: border-box; }
.tr-pli > summary::-webkit-details-marker { display: none; }
.tr-pli > summary b { color: var(--or); }
.tr-pli-fleche { margin-left: auto; transition: transform .2s; }
.tr-pli[open] .tr-pli-fleche { transform: rotate(180deg); }
.tr-pli[open] > .tr-liste { padding: 0 8px 8px; }

/* Stats sur le Fold ouvert (03/10/2026) : les blocs se rangent en deux colonnes */
.stat-colonnes { display: block; }
@media (min-width: 600px) {
  .stat-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
  .stat-grille { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .stat-colonnes .stat-grille { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .stat-colonnes .stat-carte { padding: 10px 6px; }
  .stat-grille-6 { grid-template-columns: repeat(3, 1fr); }
  .stat-colonnes .stat-valeur { font-size: 1.35rem; }
  .tr-pli[open] > .tr-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cl-grille { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  /* « 30 derniers jours » et « Mois par mois » alignés en haut comme en bas
     (ticket du 03/10/2026) : le graphique des mois s'étire sur toute la hauteur */
  .stat-activite { align-items: stretch; }
  .stat-activite > .stat-bloc { display: flex; flex-direction: column; }
  .stat-activite .stat-graph-mois { flex: 1; height: auto; min-height: 150px; }
  .stat-activite > .stat-bloc > :last-child { margin-bottom: 0; }
}

/* Titre porté au-dessus du nom, partout (03/10/2026) ; titre en or = nom en jaune avec une aura */
.nt-rare .nt-nom { color: #f5d76e; text-shadow: 0 0 6px #d4af37cc, 0 0 14px #d4af3766; animation: nt-aura 2.8s ease-in-out infinite; }
@keyframes nt-aura { 50% { text-shadow: 0 0 9px #f5d76eee, 0 0 20px #d4af3788; } }

/* Titre Légendaire (03/10/2026) : le tout premier à l'obtenir — dégradé or-orangé qui scintille */
.titre-legendaire { background: linear-gradient(100deg, #ff9d2e, #ffd85c 30%, #fff6c9 50%, #ffd85c 70%, #ff9d2e); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: titre-scintille 3s linear infinite; filter: drop-shadow(0 0 4px #ffb84d88); }
@keyframes titre-scintille { from { background-position: 220% 0; } to { background-position: -20% 0; } }
.cl-titre-choix.titre-legendaire { -webkit-text-fill-color: initial; background: linear-gradient(135deg, #3a2208, #241608); color: #ffd85c; border-color: #ff9d2e; animation: none; filter: none; box-shadow: 0 0 14px #ff9d2e55; }
.cl-titre-choix.titre-or { border-color: #d4af3788; }
.cl-titre-choix.titre-argent { color: #c8ced8; border-color: #c8ced866; }
.cl-titre-choix.titre-bronze { color: #d08a4a; border-color: #d08a4a66; }
.cl-titre-choix small { font-weight: 600; opacity: .8; -webkit-text-fill-color: currentColor; }

/* Légendaire : étoiles qui scintillent sur le nom (03/10/2026) */
.nt-rare .nt-nom { position: relative; overflow: visible; }
.nt-etoiles { position: absolute; inset: -6px -4px; pointer-events: none; }
.nt-etoiles i { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; opacity: 0; transform: scale(.2) rotate(0deg);
  background: radial-gradient(circle, #ffffff 0 22%, #fff3b0 40%, #ffd85c 75%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 4px #ffe58a) drop-shadow(0 0 2px #fff); animation: nt-etoile 2.4s ease-in-out infinite; }
.nt-etoiles i:nth-child(1) { left: 4%; top: 8%; animation-duration: 2.1s; animation-delay: 0s; }
.nt-etoiles i:nth-child(2) { left: 30%; top: 70%; animation-duration: 2.7s; animation-delay: .6s; }
.nt-etoiles i:nth-child(3) { left: 55%; top: 0%; animation-duration: 1.9s; animation-delay: 1.1s; }
.nt-etoiles i:nth-child(4) { left: 78%; top: 62%; animation-duration: 2.5s; animation-delay: .3s; }
.nt-etoiles i:nth-child(5) { left: 92%; top: 12%; animation-duration: 3.1s; animation-delay: 1.6s; }
.nt-etoiles i:nth-child(6) { left: 16%; top: 48%; animation-duration: 2.9s; animation-delay: 2.1s; width: 9px; height: 9px; margin: -4px 0 0 -4px; }
.nt-etoiles i:nth-child(7) { left: 66%; top: 35%; animation-duration: 2.3s; animation-delay: 1.4s; width: 9px; height: 9px; margin: -4px 0 0 -4px; }
@keyframes nt-etoile { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .9; transform: scale(.85) rotate(60deg); } }
/* Profil (Stats) : le nom tel que les autres le voient */
.profil-nom { font-size: 1.1rem; display: block; margin: 2px 0; }
/* Barre du haut sur écran étroit (ticket du 03/10/2026, Samsung S23 FE,
   384 px) : elle débordait — « by Nethora » sur deux lignes, boutons
   Messages et Actualiser écrasés ou coupés. « by Nethora » passe sous le
   nom, boutons et compteur d'accès se resserrent. */
@media (max-width: 440px) {
  #entete { padding-left: 10px; padding-right: 10px; gap: 4px; }
  #entete .marque { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.05; flex: none; }
  #entete .nom-app { font-size: 1.15rem; }
  #entete .by-nethora { white-space: nowrap; font-size: .66rem; }
  #entete .filtres-contenu { gap: 4px; margin-right: 2px; flex: none; }
  #entete .btn-contenu { width: 28px; height: 28px; }
  #entete .btn-rond, html.web #entete .btn-rond { width: 32px; height: 32px; flex: none; font-size: 1rem; }
  #entete .btn-plein-ecran, html.web #entete .btn-plein-ecran { margin-right: 0; }
  #entete .nx-reste { margin: 0 2px 0 auto; padding: 2px 6px; font-size: .68rem; }
}

/* Barre du haut sur PC (ticket du 03/10/2026, Kevin) : les icônes se
   touchaient (filtres collés à « by Nethora », Messages et Actualiser qui se
   chevauchaient). Toutes à droite, espacées, en groupes séparés par un fin
   trait vertical : filtres │ temps d'accès │ plein écran, messages, actualiser. */
.entete-trait { display: none; }
@media (min-width: 761px) {
  html.web #entete { justify-content: flex-start; gap: 10px; }
  html.web #entete .filtres-contenu { margin: 0 0 0 auto; gap: 8px; }
  html.web #entete .filtres-contenu::after { content: ''; flex: none; width: 1px; height: 22px; margin-left: 4px; background: #3a3a46; }
  html.web #entete .nx-reste { margin: 0; }
  html.web #entete .nx-reste ~ .entete-trait { display: block; flex: none; width: 1px; height: 22px; background: #3a3a46; }
  html.web #entete .btn-rond { flex: none; }
  html.web #entete .btn-plein-ecran { margin-right: 0; }
  html.web #entete .indicateur-activite { margin-right: 0; }
}

/* Skins de titre : voir app/skins.css (chargé aussi par le tableau de bord) */

/* Choix du skin dans Stats */
/* Sur ordinateur, les 18 skins sont visibles d'un coup : tous animés en même
   temps, ils ralentissaient la page. Seul le skin porté bouge en continu ;
   les autres restent figés sur une image de leur effet et s'animent au survol. */
html.ordinateur .cl-skin:not(.porte):not(:hover) .nt-calque,
html.ordinateur .cl-skin:not(.porte):not(:hover) .nt-calque *,
html.ordinateur .cl-skin:not(.porte):not(:hover) .nt-texte,
html.ordinateur .cl-skin:not(.porte):not(:hover) .nt-titre { animation-play-state: paused !important; }
.cl-skins-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.cl-skin { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; border-radius: 14px; border: 1px solid #2c2c36; background: #101016; color: var(--texte); font: inherit; cursor: pointer; text-align: center; min-height: 92px; }
.cl-skin.porte { border-color: var(--or); box-shadow: 0 0 0 1px var(--or) inset; }
.cl-skin.verrou { opacity: .45; cursor: default; }
.cl-skin small { color: var(--texte-2); font-size: .72rem; line-height: 1.3; }
.cl-skin .nt { font-size: 1rem; }

/* Podium : le grand gagnant et sa récompense (04/10/2026) */
.pd-gagnant { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid #d4af37; background: linear-gradient(135deg, #3a2f0d, #241d08); font-size: 1.6rem; box-shadow: 0 0 18px #d4af3733; }
.pd-gagnant span { display: flex; flex-direction: column; gap: 2px; font-size: 1rem; }
.pd-gagnant b { color: #f5d76e; font-size: 1.15rem; }
.pd-gagnant small { color: var(--texte-2, #b9b5ac); font-size: .76rem; }
.pd-gagnant.moi { box-shadow: 0 0 26px #f5d76e77; }

/* Podium : classement général et récompenses par places (04/10/2026) */
.pd-palmares { background: var(--fond-2); border: 1px solid #26262f; border-radius: 16px; padding: 10px 12px; margin: 0 0 12px; }
.pd-p-tete { font-weight: 700; color: var(--or); margin-bottom: 6px; }
.pd-p-tete small { font-weight: 400; color: var(--texte-2, #b9b5ac); font-size: .74rem; }
.pd-p-ligne { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 6px 4px; border-top: 1px solid #ffffff0d; font-size: .88rem; }
.pd-p-ligne:first-of-type { border-top: 0; }
.pd-p-ligne.moi { background: #d4af371a; border-radius: 10px; }
.pd-p-rang { font-weight: 800; color: var(--or); text-align: center; }
.pd-p-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pd-p-nom small { font-weight: 400; color: var(--texte-2, #b9b5ac); }
.pd-p-med { white-space: nowrap; font-size: .8rem; }
.pd-p-rec { grid-column: 2 / -1; font-size: .76rem; color: #f5d76e; }

/* Alerte : aperçu d'un skin, cadeau pour tous (04/10/2026) */
.aa-apercu, .aa-cadeau { margin: 12px 0 4px; padding: 12px; border-radius: 14px; background: #ffffff08; border: 1px solid #d4af3755; text-align: center; }
.aa-apercu small, .aa-cadeau small { display: block; color: var(--texte-2, #b9b5ac); font-size: .76rem; }
.aa-cadeau b { color: #f5d76e; }
.aa-apercu-nom { margin: 14px auto 6px; font-size: 1.35rem; font-weight: 800; display: flex; justify-content: center; }

/* Podium : l'administrateur hors concours (04/10/2026) */
.pd-p-ligne.hors { opacity: .75; border: 1px dashed #ffffff33; border-radius: 10px; }
.pd-p-ligne.hors .pd-p-rang { color: var(--texte-2, #b9b5ac); }

/* Sens de lecture du mode livre, dans la barre du lecteur (06/10/2026) */
.btn-lecteur-sens { font-size: .66rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }

/* Récapitulatif « Du nouveau sur tes demandes » (ticket du 06/10/2026) :
   une carte par demande — état, ta demande résumée, notre réponse en clair,
   et le cadeau de temps de connexion à part */
.fr-carte { border: 1px solid #2a2a35; border-left: 3px solid var(--c, var(--or)); border-radius: 14px; background: var(--fond-2); padding: 12px 14px; margin-bottom: 10px; }
.fr-carte-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fr-etat { font-weight: 800; font-size: .82rem; color: var(--c, var(--or)); }
.fr-quoi { font-size: .75rem; color: var(--texte-2); }
.fr-demande { font-size: .82rem; color: var(--texte-2); font-style: italic; line-height: 1.45; margin-bottom: 10px; }
.fr-reponse { font-size: .9rem; color: var(--texte); line-height: 1.55; }
.fr-lib { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); margin-bottom: 4px; }
.fr-cadeau { margin-top: 10px; padding: 7px 10px; border-radius: 10px; background: #1d2a1d; border: 1px solid #2f5a44; color: #9fe3bf; font-size: .8rem; line-height: 1.4; }

/* Le passage commenté, en aperçu (06/10/2026) : les pages autour du commentaire */
.feuille-passage { max-width: 560px; }
.ps-comm { font-size: .86rem; color: var(--texte); line-height: 1.45; margin: 4px 0 10px; }
.ps-comm small { color: var(--texte-2); }
.ps-pages { max-height: calc(62 * var(--u-dvh, 1dvh)); overflow-y: auto; border-radius: 12px; background: #000; overscroll-behavior: contain; }
.ps-page { position: relative; }
.ps-page img { display: block; width: 100%; height: auto; }
.ps-page.ici { outline: 3px solid var(--or); outline-offset: -3px; }
.ps-ici { position: absolute; top: 8px; left: 8px; z-index: 1; background: #000c; color: var(--or); font-weight: 800; font-size: .78rem; padding: 3px 8px; border-radius: 8px; }
.ps-pages .compteur { padding: 8px; text-align: center; }

/* Bibliothèque : une puce de contenu (♡ ☠ 18) allumée FILTRE (« seulement
   ceux-là ») — une coche la distingue des pastilles du haut, qui, elles,
   autorisent (ticket du 06/10/2026) */
#filtres-biblio-puces [data-niveau] { position: relative; }
#filtres-biblio-puces [data-niveau].actif::after { content: '✓'; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--or); color: #171a2b; font-size: .62rem; font-weight: 900; line-height: 16px; text-align: center; }
.biblio-tout { margin-left: 6px; font-weight: 700; }

/* Titres d'œuvre (06/10/2026) : « 🏁 Achevé » émeraude nacré, « ⚡ À jour »
   turquoise, chacun balayé d'un reflet ; l'emoji garde ses couleurs */
.titre-oeuvre-acheve, .titre-oeuvre-ajour { background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: titre-oeuvre-reflet 4.5s ease-in-out infinite; }
.titre-oeuvre-acheve { background-image: linear-gradient(100deg, #0f7a52 0%, #3ddc97 30%, #eafff4 45%, #b8f5dc 52%, #3ddc97 66%, #0f7a52 100%); filter: drop-shadow(0 0 3px #3ddc9755); }
.titre-oeuvre-ajour { background-image: linear-gradient(100deg, #0b7d86 0%, #2ee6e0 30%, #effffe 45%, #a8f4f1 52%, #2ee6e0 66%, #0b7d86 100%); filter: drop-shadow(0 0 3px #2ee6e055); }
@keyframes titre-oeuvre-reflet { 0%, 15% { background-position: 120% 0; } 70%, 100% { background-position: -20% 0; } }
.titre-oeuvre .nt-ico, .titre-oeuvre-acheve .nt-ico, .titre-oeuvre-ajour .nt-ico { -webkit-text-fill-color: initial; }
.nt-titre.titre-oeuvre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dans Stats : la pastille du titre, fond sombre teinté (sans reflet, lisible) */
.cl-titre-choix.titre-oeuvre-acheve { animation: none; filter: none; -webkit-text-fill-color: initial; background: linear-gradient(135deg, #07261b, #0c1a15); color: #5be3a6; border-color: #3ddc9766; }
.cl-titre-choix.titre-oeuvre-ajour { animation: none; filter: none; -webkit-text-fill-color: initial; background: linear-gradient(135deg, #062528, #0b1a1c); color: #4febe6; border-color: #2ee6e066; }
.cl-titre-choix.titre-oeuvre-acheve.porte, .cl-titre-choix.titre-oeuvre-ajour.porte { border-color: currentColor; box-shadow: 0 0 12px currentColor; }
.cl-titres-oeuvre { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
/* Dans la fenêtre d'annonce : le titre dans sa couleur */
.tg-titre .titre-oeuvre-acheve, .tg-titre .titre-oeuvre-ajour { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: reduce) { .titre-oeuvre-acheve, .titre-oeuvre-ajour { animation: none; background-position: 40% 0; } }

/* Rangées d'œuvres à la souris (06/10/2026) : flèches ‹ › sur les côtés,
   glisser à la souris (app/js/rangeespc.js) */
.rangee-hote { position: relative; }
.rangee-fleche { position: absolute; z-index: 4; transform: translateY(-50%); width: 38px; height: 38px; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  border: 1px solid #d4af3777; background: #0b0b10e8; color: var(--or); font-size: 1.7rem; line-height: 1;
  box-shadow: 0 4px 14px #000b; opacity: .82; transition: opacity .18s, transform .18s, background .18s; }
.rangee-fleche.g { left: 4px; } .rangee-fleche.d { right: 4px; }
.rangee-hote:hover > .rangee-fleche { opacity: 1; }
.rangee-fleche:hover { background: #1d1708; transform: translateY(-50%) scale(1.08); }
.rangee-fleche.au-bout { opacity: 0 !important; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .rangee-cartes { cursor: grab; } }
.rangee-cartes.rangee-glisse { cursor: grabbing; user-select: none; }
.rangee-cartes.rangee-glisse .carte-mini { pointer-events: none; }

/* Affichage sur ordinateur (06/10/2026) : réglages visibles seulement sur PC ;
   taille de la barre du bas et des boutons du lecteur */
.bloc-reglage.pc-seul { display: none; }
html.pc-souris .bloc-reglage.pc-seul { display: block; }
html.pc-souris #nav-bas { zoom: var(--zoom-barre, 1); }
html.pc-souris #lecteur-barre-haut { zoom: var(--zoom-lecteur, 1); }
.pc-curseur { display: flex; align-items: center; gap: 8px; flex: 0 0 46%; }
.pc-curseur input { flex: 1; min-width: 0; }
.pc-curseur b { min-width: 3.4em; text-align: right; color: var(--or); font-size: .82rem; }
#reg-pc-defaut { margin-top: 6px; }

/* Mode focus (06/10/2026) : pendant la lecture d'une œuvre, aucune
   notification de l'appli ; les fenêtres en attente réapparaissent à la
   sortie du lecteur */
html.mode-focus .alerte-admin-fond, html.mode-focus .msg-bandeau, html.mode-focus .bandeau-notif,
html.mode-focus .titre-gagne, html.mode-focus #bandeau-maj, html.mode-focus #toast { display: none !important; }

/* Titres en colonnes repliables, une par catégorie, et grille de badges
   (07/10/2026, Akumu + Kevin) : une colonne sur le téléphone replié, deux
   sur le Fold déplié, trois ou quatre sur un ordinateur */
.cl-plis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; align-items: start; margin-bottom: 8px; }
.cl-plis .cl-pli { margin-bottom: 0; }
.cl-pli { border: 1px solid #26262f; border-radius: 12px; background: #121218; margin-bottom: 8px; overflow: hidden; }
.cl-pli > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 800; font-size: .9rem; }
.cl-pli > summary::-webkit-details-marker { display: none; }
.cl-pli-nom.titre-legendaire, .cl-pli-nom.titre-oeuvre-acheve, .cl-pli-nom.titre-oeuvre-ajour { animation-duration: 6s; }
.cl-pli-nb { min-width: 24px; padding: 1px 8px; border-radius: 10px; background: #ffffff12; color: var(--texte-2); font-size: .74rem; font-weight: 700; text-align: center; }
.cl-pli-fleche { margin-left: auto; color: var(--texte-2); font-size: .8rem; transition: transform .2s; }
.cl-pli[open] > summary .cl-pli-fleche { transform: rotate(180deg); }
.cl-titres-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; padding: 0 10px 10px; }
.cl-titre-choix.cl-badge { position: relative; min-height: 0; padding: 7px 18px 7px 9px; border-radius: 10px; font-size: .76rem; line-height: 1.25; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cl-badge .cl-porte { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: .72rem; color: var(--or); -webkit-text-fill-color: currentColor; }
.cl-badge .titre-niveau { font-size: .68rem; }

/* Réglages sur iPhone (07/10/2026, ticket d'Akumu) : « Lecture des scans »
   dépassait de la largeur de l'écran (défilement de côté). Rien n'y dépasse
   plus : les blocs et leurs lignes rétrécissent, les listes et les curseurs
   aussi, les longs textes passent à la ligne ; et la page coupe tout reste
   de débordement horizontal (sans créer de barre de défilement). */
#vue-reglages { overflow-x: clip; }
#vue-reglages .bloc-reglage, #vue-reglages .depliable, #vue-reglages .depliable > summary, #vue-reglages .sous-bloc, #vue-reglages .ligne-reglage { min-width: 0; max-width: 100%; box-sizing: border-box; }
#vue-reglages .ligne-reglage > * { min-width: 0; }
#vue-reglages .ligne-reglage select { flex: 0 1 auto; width: auto; max-width: 46%; text-overflow: ellipsis; }
#vue-reglages .ligne-reglage input[type="range"] { min-width: 0; max-width: 46%; }
#vue-reglages .ligne-reglage small, #vue-reglages .depliable .dp-desc, #vue-reglages .depliable .dp-titres { overflow-wrap: anywhere; min-width: 0; }

/* Parution abandonnée ou en pause (07/10/2026) : pastilles rouge et ambre */
.pastille.parution-abandon { background: #2a1214; color: #ff8a8a; border-color: #6b2b30; }
.pastille.parution-pause { background: #2a2210; color: #f0c060; border-color: #6b5520; }
.cm-parution.parution-abandon { color: #ff8a8a; border: 1px solid #6b2b30; }
.cm-parution.parution-pause { color: #f0c060; border: 1px solid #6b5520; }

/* Collections (08/10/2026, ticket d'Akumu) : gestion, rangement, collection
   reçue, et carte de collection dans la messagerie */
.feuille-collections { max-width: 520px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.feuille-collections h3 { margin: 0 0 4px; }
.coll-choix, .coll-liste, .coll-recue { max-height: calc(55 * var(--u-dvh, 1dvh)); overflow-y: auto; overscroll-behavior: contain; margin: 8px 0; }
.coll-ligne { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #1f1f28; }
.coll-ligne:first-child { border-top: 0; }
.coll-voir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--texte); font: inherit; text-align: left; cursor: pointer; padding: 0; }
.coll-couvs { display: flex; flex: 0 0 auto; }
.coll-couvs img { width: 30px; height: 43px; object-fit: cover; border-radius: 5px; border: 1px solid #000; background: var(--fond-3); }
.coll-couvs img + img { margin-left: -12px; }
.coll-vide { width: 30px; height: 43px; display: inline-flex; align-items: center; justify-content: center; background: var(--fond-3); border-radius: 5px; }
.coll-nom { display: flex; flex-direction: column; min-width: 0; }
.coll-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-nom small { color: var(--texte-2); font-size: .74rem; }
.coll-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.coll-oeuvre { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #1f1f28; }
.coll-oeuvre:first-child { border-top: 0; }
.coll-oeuvre-ouvrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--texte); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; padding: 0; }
.coll-oeuvre-ouvrir img { width: 34px; height: 48px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; background: var(--fond-3); }
.coll-oeuvre-ouvrir span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.coll-etat { color: var(--vert); font-size: .78rem; font-weight: 700; flex: 0 0 auto; }
.coll-ajout { flex: 0 0 auto; white-space: nowrap; }
.fv-collections { margin-left: 6px; }
.msg-collection { display: flex; align-items: center; gap: 10px; text-align: left; background: #0006; color: var(--texte); border: 1px solid #d4af3744; border-radius: 12px; padding: 6px; font: inherit; cursor: pointer; min-width: 200px; }
.msg-coll-mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 52px; height: 66px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: #000; }
.msg-coll-mosaique img { width: 100%; height: 100%; object-fit: cover; }
.msg-coll-mosaique .msg-oeuvre-vide { grid-column: 1 / -1; width: 100%; height: 100%; }
.msg-collection > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-collection small { color: var(--or); font-size: .72rem; }

/* Fiche d'une œuvre sur un écran étroit — iPhone, Fold replié (08/10/2026,
   ticket d'Akumu) : les boutons de l'en-tête écrasaient le titre (invisible)
   et le compteur d'accès 🔑 débordait, décalant le haut de la page. Le titre
   passe sur sa propre ligne, sous les boutons ; le compteur d'accès reste
   dans la barre principale de l'appli. */
@media (max-width: 559px) {
  #vue-serie > .entete-serie { flex-wrap: wrap; row-gap: 4px; max-width: 100%; box-sizing: border-box; overflow: hidden; }
  #vue-serie > .entete-serie h2 { order: 5; flex: 1 0 100%; min-width: 0; font-size: .95rem; line-height: 1.25; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .entete-serie .nx-reste { display: none; }
}

/* Collections suivies (08/10/2026) */
.coll-sous { margin: 14px 0 4px; font-size: .8rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--or); }
.coll-sous small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texte-2); }
.coll-neuf { color: var(--or); font-weight: 700; }
b.coll-neuf { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; border: 1px solid #d4af3766; border-radius: 6px; padding: 0 4px; margin-right: 2px; }
.coll-suivre { width: 100%; margin-top: 4px; }

/* Fiche ouverte depuis une liste plein écran : devant la liste ; le lecteur
   et le web novel restent au-dessus de tout (09/10/2026) */
#vue-serie.devant { z-index: 52; }
#vue-lecteur, #vue-novel { z-index: 53; }

/* Collections suivies à deux étages (09/10/2026) */
.coll-masquee { opacity: .55; }
.coll-voir-masquees { margin: 6px 0; font-size: .8rem; }