/* Vidéoflex — maquette d'accueil. Palette reprise du logo : rouge #d3202a + argent de la carte de membre. */
/* View Transitions ENTRE pages (accueil/grille -> fiche -> personne), API navigateur récente —
   ignorée silencieusement par tout navigateur qui ne la connaît pas (navigation normale, aucun
   JS requis pour le repli). Les éléments qui doivent se morpher entre deux documents portent le
   même `view-transition-name` (posé par tuiles.js/fiche.html/personne.html), voir
   window.nomTransitionCSS. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  /* Respecte le réglage "réduire les animations" même pour une transition pilotée par le
     navigateur lui-même, pas seulement nos animations JS/CSS. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
:root{
  --fond:#050608;
  --fond2:#0c0f14;
  --texte:#eef0f3;
  --gris:#90979f;
  --rouge:#d3202a;
  --rouge-vif:#ff4452;
  --bleu:#5B9BE6;
  --argent:#efefec;
  --bord:rgba(255,255,255,.1);
  --carte:rgba(255,255,255,.05);
  --anneau:0 0 0 3px rgba(5,6,8,.9),0 0 0 7px var(--rouge-vif),0 14px 36px -8px rgba(211,32,42,.65);
  /* Sélection néon rétroéclairé (demande du 31 oct) : tube cœur blanc chaud (JAMAIS rose) +
     rouge Vidéoflex, halo moyen qui déborde sur le fond noir, lueur intérieure sur l'affiche —
     variante "B" retenue après comparaison dans app/web/essai-neon.html (gardée pour
     référence). Box-shadow sur l'élément lui-même : PAS clipé par le overflow:hidden du même
     élément (vérifié en pratique), donc le tube reste entier sur les 4 côtés tant que le
     CONTENEUR parent (rangée à défilement, modale…) laisse assez de marge — voir les
     ajustements de padding à chaque rangée qui utilise --anneau-neon. */
  --neon-coeur:#fff5ee;
  --anneau-neon:
    0 0 0 2px var(--neon-coeur),
    0 0 0 4px var(--rouge-vif),
    0 0 7px 0 rgba(211,32,42,.85),
    0 0 16px 2px rgba(211,32,42,.55),
    0 0 30px 4px rgba(211,32,42,.3),
    inset 0 0 3px rgba(255,255,255,.3),
    inset 0 0 14px rgba(211,32,42,.3);
  /* 2-3 scintillements (~260 ms) à l'arrivée du focus, puis respiration lente — coupée sous
     "réduire les animations" (réglage Options OU prefers-reduced-motion, voir mouvement.js qui
     pose html.reduire-anim) : la lueur reste fixe, jamais de mouvement imposé. */
  --neon-anim:neon-allumage .26s linear,neon-respiration 2.6s ease-in-out .26s infinite;
}
@keyframes neon-allumage{
  0%{filter:brightness(1)}
  8%{filter:brightness(.45)}
  18%{filter:brightness(1.2)}
  28%{filter:brightness(.6)}
  40%{filter:brightness(1.12)}
  58%{filter:brightness(.92)}
  100%{filter:brightness(1)}
}
@keyframes neon-respiration{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.07)}
}
@media (prefers-reduced-motion:reduce){:root{--neon-anim:none}}
html.reduire-anim{--neon-anim:none}
*{box-sizing:border-box}
html,body{margin:0;min-width:0}
body{
  background:radial-gradient(1100px 620px at 50% -8%,#1c0d10,var(--fond) 62%);
  color:var(--texte);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit}
button{font:inherit}
.retour{
  position:fixed;top:16px;left:16px;z-index:40;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--texte);text-decoration:none;font-size:14px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--bord);
  background:rgba(8,9,12,.6);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.65);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,background .15s ease,border-color .15s ease;
}
.retour:hover,.retour:focus-visible{background:rgba(20,22,27,.78);border-color:rgba(255,255,255,.22)}
.retour:focus-visible{outline:none;box-shadow:var(--anneau)}
/* Se cache en descendant, revient en remontant (voir mouvement.js:gererBarreRetour) — évite
   qu'elle chevauche visuellement le texte qui défile dessous même avec le fond flou. */
.retour.retour-cachee{transform:translateY(-140%);opacity:0}
/* Pages avec la barre d'onglets (artiste, album) : le « Retour » fixe chevauchait le logo ;
   l'onglet Musique et le lien vers l'artiste suffisent pour revenir. */
.barre-onglets ~ .retour{display:none}

.visuellement-masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* Même chose pour le réglage Options › Affichage « Réduire les animations » (html.reduire-anim,
   posé par mouvement.js/reglagesAffichage.js) : avant le 1er nov 2026 il ne coupait que les
   animations pilotées en JS (Motion) — squelettes, fondus d'affiches, néon, carrousel glissaient
   encore. Désormais équivalent strict de la préférence système. */
html.reduire-anim *,html.reduire-anim *::before,html.reduire-anim *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important
}

/* --- Barre d'onglets (Accueil/Films/Séries/Collections/Recherche/Options), voir onglets.js --- */
.barre-onglets{
  position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:4px;
  padding:12px 20px;background:linear-gradient(to bottom,rgba(5,6,8,.94),rgba(5,6,8,.86) 70%,transparent);
}
/* Zone qui défile horizontalement quand les onglets ne tiennent pas (mobile) — le bouton de
   profil reste HORS de cette zone (voir onglets.js) pour rester toujours atteignable. Le fondu
   (mask-image) indique qu'il reste des onglets à droite sans ajouter de flèche cliquable. */
.barre-onglets .onglets-scroll{
  display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%);
}
.barre-onglets .onglets-scroll::-webkit-scrollbar{display:none}
#lien-logo-onglets{flex:0 0 auto;display:block;margin-right:10px}
.barre-onglets .logo-onglets{height:34px;width:auto;display:block;flex:0 0 auto}
/* L'ovale du logo a son lettrage sous le centre de l'image : on remonte le lien pour que
   « Vidéoflex » soit sur la même ligne que le texte des onglets (1er nov 2026). */
#lien-logo-onglets{position:relative;top:-3px}
.barre-onglets .blm-badge{position:relative;top:-3px}
.onglet{
  flex:0 0 auto;background:none;border:none;color:var(--gris);font-size:14px;font-weight:600;
  padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .15s ease,background .15s ease;
}
.onglet:hover{color:var(--texte);background:var(--carte)}
.onglet:focus-visible{outline:none;box-shadow:var(--anneau)}
.onglet.actif{color:#fff;background:rgba(211,32,42,.22)}
.barre-onglets .espace-onglets{flex:1 1 auto}
.barre-onglets .profil-onglet{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--texte);
  cursor:pointer;padding:6px 10px 6px 6px;border-radius:999px;font-size:13px;font-weight:600;
}
.barre-onglets .profil-onglet:hover{background:var(--carte)}
.barre-onglets .profil-onglet:focus-visible{outline:none;box-shadow:var(--anneau)}
.avatar-onglet{
  width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#d3202a,#8c1620);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;
  overflow:hidden;flex:0 0 auto;
}
.avatar-onglet img{width:100%;height:100%;object-fit:cover}
.nom-profil-onglet{display:none}
@media (min-width:720px){ .nom-profil-onglet{display:inline} }

/* Ordinateur (1440×900 et plus) : logo, onglets, bouton de profil et badges « ovale Vidéoflex »
   (Retour/Bangers) nettement agrandis — taille Netflix/Disney+, lisible sans s'approcher de
   l'écran (demande du 1er nov 2026, point 8). Jamais sur iPhone : min-width:1024px seulement. */
@media (min-width:1024px){
  .barre-onglets{padding:16px 32px}
  .barre-onglets .logo-onglets{height:56px}
  #lien-logo-onglets{top:-5px}
  #lien-logo-onglets{margin-right:20px}
  .onglet{font-size:17px;padding:13px 22px}
  .barre-onglets .profil-onglet{font-size:16px;gap:10px;padding:7px 14px 7px 7px}
  .avatar-onglet{width:42px;height:42px;font-size:17px}
  .retour{font-size:16px;padding:11px 20px;top:20px;left:20px}
  .blm-badge{height:58px}
  .barre-onglets .blm-badge{height:66px;top:-6px}
  .retour.blm-badge{padding:8px 22px 8px 14px}
  .retour.blm-badge .blm-svg{height:46px}
}
/* iPhone (web-finitions, 1er nov 2026) : « Séries » collait à l'avatar — le fondu de droite de
   la zone qui défile (28 px) finissait pile contre le bouton de profil. Barre resserrée (logo,
   onglets) + une vraie marge avant l'avatar, pour lire 3 onglets entiers sur 393 px. */
@media (max-width:600px){
  .barre-onglets{padding:10px 12px 10px 14px;gap:2px}
  .barre-onglets .logo-onglets{height:30px}
  #lien-logo-onglets{margin-right:2px}
  .onglet{font-size:14px;padding:8px 11px}
  .barre-onglets .profil-onglet{margin-left:8px;padding:3px}
}
/* Logo au focus clavier (1er nov 2026, même principe que la télé) : plus de contour
   rectangulaire du navigateur, c'est le tracé de l'ovale et du V qui s'allume en néon. */
#lien-logo-onglets:focus-visible{outline:none}
#lien-logo-onglets:focus-visible .logo-onglets{filter:drop-shadow(0 0 1.5px #ff4452) drop-shadow(0 0 6px rgba(255,55,63,.75)) drop-shadow(0 0 14px rgba(211,32,42,.5))}
/* Fondu aux deux bords de la zone qui défile (options-uniformes, 1er nov 2026) : sur iPhone,
   « …tos » passait net sous le logo et « Collecti » était tranché par l'avatar. Fondu plus long
   (24 px à gauche, 34 px à droite) ET marge intérieure de la même largeur : au repos, le premier
   et le dernier onglet sont entiers hors du fondu ; en défilant, le texte s'efface avant
   d'atteindre le logo ou l'avatar. scroll-padding : l'onglet actif ramené à l'écran
   (scrollIntoView d'onglets.js) s'arrête lui aussi hors du fondu. */
.barre-onglets .onglets-scroll{
  padding:0 34px 0 24px;scroll-padding-inline:24px 34px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 34px),transparent 100%);
}
@media (max-width:600px){
  .barre-onglets .onglets-scroll{padding:0 30px 0 30px;scroll-padding-inline:30px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 6px,#000 30px,#000 calc(100% - 30px),transparent calc(100% - 4px));
    mask-image:linear-gradient(to right,transparent 0,transparent 6px,#000 30px,#000 calc(100% - 30px),transparent calc(100% - 4px))}
  .barre-onglets .profil-onglet{margin-left:0}
}
/* Bandeau (remarques du 1er nov 2026 au soir) — avec Shows & Musical, Livres, etc., la ligne du
   haut débordait (Accueil sorti de la vue à 1440 px, Musique disparue). Voir onglets.js :
   - « Ouvert 24 h » n'est plus un onglet : petite signature SOUS le logo (0 h-4 h seulement) ;
   - Options vit hors de la zone des onglets, à côté du profil : jamais coincé ni poussé dehors ;
   - ordinateur : resserré d'abord, puis DEUXIÈME LIGNE (barre-deux-lignes) au lieu de défiler,
     hauteur gagnée reportée sur la page (--barre-onglets-extra) ;
   - iPhone : la zone défile, fondu et « › » seulement du côté où il reste des onglets. */
body{padding-top:var(--barre-onglets-extra,0px)}
#lien-logo-onglets{display:flex;flex-direction:column;align-items:center;text-decoration:none}
.signature-24h{font-size:8.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#c9a9ac;
  opacity:.8;margin-top:1px;white-space:nowrap;font-weight:600}
.signature-24h::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;margin-right:5px;
  vertical-align:1px;background:var(--rouge-vif);box-shadow:0 0 6px var(--rouge-vif)}
.barre-onglets .onglets-cadre{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.barre-onglets .onglets-cadre .onglets-scroll{flex:1 1 auto;--fg:0px;--fd:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fg),#000 calc(100% - var(--fd)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fg),#000 calc(100% - var(--fd)),transparent 100%)}
.barre-onglets.defile-gauche .onglets-scroll{--fg:30px}
.barre-onglets.defile-droite .onglets-scroll{--fd:34px}
.barre-onglets .onglet-options{display:inline-flex;align-items:center;gap:6px}
/* Recherche = loupe à côté de ⚙ (2 nov 2026, comme à la télé) : zone de toucher de 44 px au
   moins, trait fin couleur des onglets ; rouge Vidéoflex quand la page Recherche est ouverte. */
.barre-onglets .onglet-loupe{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;box-sizing:border-box}
.barre-onglets .onglet-loupe svg{width:22px;height:22px;display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.barre-onglets .onglet-loupe:hover svg{transform:scale(1.08) rotate(-8deg)}
.barre-onglets .onglet-loupe:active svg{transform:scale(.86);transition-duration:.08s}
@media (prefers-reduced-motion:reduce){.barre-onglets .onglet-loupe svg{transition:none;transform:none}}
.barre-onglets .onglet-loupe.actif{color:#d3202a;background:rgba(211,32,42,.12)}
.barre-onglets .onglet-loupe.actif:hover{color:#d3202a}
@media (min-width:1024px){.barre-onglets .onglet-loupe{min-width:48px;min-height:48px}.barre-onglets .onglet-loupe svg{width:24px;height:24px}}
@media (max-width:600px){.barre-onglets .onglet-loupe{padding:0 8px}}
.barre-onglets .onglet-options .ic-options{font-size:1.05em;line-height:1}
/* « › » posé dans le fondu de droite (là où le texte est déjà effacé), jamais sur un onglet. */
.indice-defilement{display:none;position:absolute;right:0;top:50%;width:14px;height:22px;margin-top:-12px;
  align-items:center;justify-content:center;font-size:21px;font-weight:600;line-height:1;
  color:rgba(255,255,255,.72);text-shadow:0 0 8px rgba(211,32,42,.9);pointer-events:none;
  animation:indice-onglets 1.6s ease-in-out infinite}
@keyframes indice-onglets{0%,100%{transform:translateX(-2px);opacity:.55}50%{transform:translateX(1px);opacity:1}}
@media (max-width:1023px){.barre-onglets.defile-droite .indice-defilement{display:flex}}
@media (max-width:600px){
  .barre-onglets .onglet-options{padding:8px 9px}
  .barre-onglets .onglet-options .libelle-options{display:none}
  .barre-onglets .onglet-options .ic-options{font-size:18px}
  .signature-24h{font-size:7.5px;letter-spacing:.1em}
  /* Options réduit à ⚙ hors de la zone : on rend aussi la marge de gauche (le fondu n'apparaît
     qu'une fois la zone défilée) pour garder 3 onglets lisibles sur 393 px. */
  .barre-onglets .onglets-cadre .onglets-scroll{padding-left:6px}
}
@media (min-width:1024px){
  .signature-24h{font-size:10px;margin-top:2px}
  .barre-onglets.barre-deux-lignes .onglets-scroll{flex-wrap:wrap;overflow:visible;row-gap:6px;padding:0 8px;
    -webkit-mask-image:none;mask-image:none}
}

/* --- Hero d'accueil : grand fond + titre + résumé + Lecture/Plus d'infos --- */
.hero{
  position:relative;height:min(78vw,78vh,560px);min-height:300px;overflow:hidden;margin-bottom:28px;
}
.hero .hero-fond{
  position:absolute;inset:-6%;background-size:cover;background-position:center 28%;
  filter:blur(18px) saturate(1.1) brightness(.62);transform:scale(1.08);
}
.hero .hero-fond.net{inset:0;filter:none;transform:none;background-position:center 20%}
.hero .hero-voile{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--fond) 2%,rgba(5,6,8,.35) 42%,rgba(5,6,8,.15) 65%,rgba(5,6,8,.55) 100%),
             linear-gradient(to right,rgba(5,6,8,.75) 0%,rgba(5,6,8,.15) 55%,transparent 80%);
}
.hero .hero-contenu{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 32px 36px;max-width:640px}
.hero .hero-titre{font-size:clamp(26px,5vw,46px);font-weight:800;line-height:1.05;margin:0 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero .hero-logo{max-width:min(80%,420px);max-height:160px;object-fit:contain;object-position:left bottom;margin:0 0 14px;filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.hero .hero-meta{display:flex;align-items:center;gap:10px;color:#d7dae0;font-size:13px;margin:0 0 10px;flex-wrap:wrap}
.hero .hero-resume{color:#d2d6dd;font-size:14px;line-height:1.5;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero .hero-boutons{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-hero{
  display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:13px 26px;font-size:15px;font-weight:700;
  cursor:pointer;border:none;background:#fff;color:#111;
}
.hero .btn-hero:hover{background:#e6e6e6}
.hero .btn-hero:focus-visible{outline:none;box-shadow:var(--anneau)}
.hero .btn-hero.secondaire{background:rgba(120,126,138,.35);color:#fff;backdrop-filter:blur(6px)}
.hero .btn-hero.secondaire:hover{background:rgba(120,126,138,.5)}
/* Ordinateur (1er nov 2026, point 9) : le héros défile déjà normalement avec la page (.hero est
   en position:relative, jamais fixe — vérifié avec Playwright) mais à 560px de haut sur un
   1440×900 il occupait 62 % de l'écran, ne laissant qu'un filet de la 1re rangée visible et
   donnant l'impression qu'il reste figé puisque défiler change à peine ce qui est visible. Réduit
   pour qu'une vraie rangée apparaisse sans défiler — après (donc plus prioritaire que) la règle
   de base ci-dessus, même sélecteur `.hero`. */
@media (min-width:1024px){ .hero{height:min(50vw,56vh,440px)} }

/* --- Grille (Films/Séries/Collections/Recherche), voir tuiles.js --- */
.outils-grille{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 28px 18px;
}
.outils-grille .outil-bt{
  background:var(--carte);border:1px solid var(--bord);color:var(--texte);font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.outils-grille .outil-bt:hover{background:rgba(255,255,255,.1)}
.outils-grille .outil-bt:focus-visible{outline:none;box-shadow:var(--anneau)}
.outils-grille .outil-bt.actif{background:rgba(211,32,42,.3);border-color:var(--rouge)}

.page-grille-corps{display:flex;gap:4px;padding:0 10px 60px 28px}
.grille-oeuvres{display:grid;gap:18px 14px;flex:1 1 auto;min-width:0;align-content:start}
.grille-oeuvres.mode-liste{display:flex;flex-direction:column;gap:8px}

.tuile-grille{min-width:0;position:relative;border:none;background:none;padding:0;cursor:pointer;color:#fff;text-align:left;outline:none}
.tuile-grille .fg-cadre{
  position:relative;display:block;border-radius:6px;overflow:hidden;background:#15171c;
  /* Couche GPU posée AVANT le survol (même correctif que .tuile de l'accueil, sursaut du 1er
     nov) : transform/box-shadow au survol ne force plus Safari à repeindre les tuiles voisines. */
  transform:translateZ(0);will-change:transform;backface-visibility:hidden;
}
.tuile-grille.mode-affiches .fg-cadre{aspect-ratio:2/3}
.tuile-grille.mode-vignettes .fg-cadre{aspect-ratio:16/9}
.fg-affiche{position:absolute;inset:0;background-size:cover;background-position:center}
.mode-vignettes .fg-affiche{background-position:center 20%}

/* Squelette animé pendant le chargement paresseux (tuiles.js:chargerFondParesseux) — jamais un
   écran vide : un léger balayage lumineux plutôt qu'un gris plat, sur n'importe quel fond de
   tuile (grilles ET accueil, classes .fg-affiche et .tuile .fond). Fondu enchaîné à l'arrivée
   de la vraie image (.fg-chargee). */
.fg-paresseuse{
  background:linear-gradient(100deg,#15171c 40%,#20232b 50%,#15171c 60%);
  background-size:200% 100%;animation:fg-balayage 1.6s ease-in-out infinite;
}
.fg-chargee{opacity:0;animation:fg-apparition .4s ease forwards}
@keyframes fg-balayage{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fg-apparition{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fg-paresseuse{animation:none;background:#15171c}.fg-chargee{animation:none;opacity:1}}
.fg-sansaffiche{display:flex;align-items:center;justify-content:center;padding:10px}
.fg-titre-repli{font-size:13px;font-weight:600;text-align:center;line-height:1.3}

/* Mosaïque de pochettes des membres — image PAR DÉFAUT d'une collection/saga/série maison
   quand aucune affiche unique n'a été choisie (31 oct 2026, "l'utilisateur AIME la mosaïque") ;
   voir web/tuiles.js:mosaiqueHtml. Même idée déjà en service dans web/regroupements.html
   (admin), reprise ici pour les pages publiques (collections.html, accueil.html). */
.fg-mosaique{position:absolute;inset:0;display:grid;background:#15171c}
.fg-mosaique.deux,.fg-mosaique.trois,.fg-mosaique.quatre{grid-template-columns:1fr 1fr}
/* 3 affiches : la première occupe toute la colonne de gauche (pas de case noire vide). */
.fg-mosaique.trois{grid-template-rows:1fr 1fr}
.fg-mosaique.trois .fg-mosaique-cell:first-child{grid-row:span 2}
/* Cellule en background-image (pas <img src>), chargée par le MÊME chargement paresseux que le
   reste des tuiles (chargerFondParesseux, voir fg-paresseuse/fg-chargee plus haut) — jamais un
   <img loading="lazy"> natif : sur une grille de 100+ collections (jusqu'à 4 images chacune),
   le natif charge par rafales dès qu'une rangée approche et a reproduit en vrai les 502 par
   rafales déjà réglés le 31 oct pour les affiches normales (constaté en testant ce travail). */
.fg-mosaique-cell{width:100%;height:100%;display:block;background-size:cover;background-position:center;background-color:#1a1d24}
.fg-badges{position:absolute;left:6px;top:6px;z-index:1;display:flex;gap:4px;flex-wrap:wrap}
.fg-badge{
  font-size:10px;font-weight:700;letter-spacing:.02em;color:#fff;padding:2px 6px;border-radius:4px;
  background:rgba(5,6,8,.72);border:1px solid rgba(255,255,255,.18);
}
.fg-badge-hdr{background:rgba(211,32,42,.75);border-color:rgba(255,255,255,.3)}
/* Barre « déjà vu » : pleine largeur, mêmes coins du bas que le cadre (6px) et remplissage par dégradé
   (--p) — elle reste dans les coins arrondis même quand Safari ne coupe pas un enfant d'un calque
   GPU (translateZ/will-change du cadre) malgré overflow:hidden (remarques du 1er nov au soir). */
.fg-progression{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;pointer-events:none;
  background:linear-gradient(to right,var(--rouge-vif) var(--p,0%),transparent var(--p,0%));border-radius:0 0 6px 6px}
/* Coche "vu" (31 oct 2026, "vu/non vu PARTOUT") : coin bas-gauche, le seul encore libre — haut-
   gauche a déjà les badges 4K/HDR, haut-droit le crayon d'édition, bas-droit le ♡ à voir. */
.fg-vu{
  position:absolute;left:6px;bottom:6px;z-index:2;width:22px;height:22px;border-radius:50%;
  background:rgba(211,32,42,.85);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:12px;
  font-weight:700;display:flex;align-items:center;justify-content:center;
}
.grille-oeuvres.mode-liste .fg-vu{display:none}
/* Masquées en liste plutôt qu'omises à la construction (voir tuiles.js:creerTuileGrille) —
   un changement d'affichage ne reconstruit plus les tuiles (correctif du gel, 1er nov). */
.grille-oeuvres.mode-liste .fg-badges,.grille-oeuvres.mode-liste .bt-jouer{display:none}
/* Hauteur réservée même quand .fg-sous est absent (pas de langue/qualité connue) : sans ça,
   les tuiles d'une même rangée de grille n'avaient pas toutes la même hauteur (CSS grid aligne
   chaque rangée sur son contenu le plus haut) — constat utilisateur 31 oct, « hauteur inégale
   selon la ligne FR · 1080p ». */
.tuile-grille .fg-legende{margin-top:8px;max-width:100%;min-height:34px}
.fg-titre{margin:0;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-sous{margin:3px 0 0;font-size:11px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tuile-grille:hover .fg-cadre,.tuile-grille:focus-visible .fg-cadre{box-shadow:var(--anneau-neon);animation:var(--neon-anim);transform:translateZ(0) scale(1.08);z-index:2}
.tuile-grille .fg-cadre{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease}

.grille-oeuvres.mode-liste .tuile-grille{
  display:flex;align-items:center;gap:14px;width:100%;border-radius:8px;padding:8px 10px;
}
.grille-oeuvres.mode-liste .tuile-grille:hover,.grille-oeuvres.mode-liste .tuile-grille:focus-visible{background:var(--carte);box-shadow:none}
.grille-oeuvres.mode-liste .fg-cadre{width:60px;height:90px;flex:0 0 auto;aspect-ratio:auto}
.grille-oeuvres.mode-liste .fg-cadre:hover,.grille-oeuvres.mode-liste .tuile-grille:focus-visible .fg-cadre{transform:none;box-shadow:none}
.fg-legende-liste .fg-titre{font-size:15px;white-space:normal}
.fg-legende-liste .fg-sous{font-size:12px;white-space:normal}

/* Bouton ▶ sur la tuile (atout Jellyfin, audit UX 31 oct) : au survol souris, au focus clavier,
   ou au premier toucher long (classe .maintenu, voir tuiles.js:creerBoutonJouer). Centré — ne
   gêne jamais le crayon du mode édition (coin haut-droit, voir edition.js:.ed-crayon). Partagé
   par les grilles (.tuile-grille) ET l'accueil (.tuile, règle de déclenchement dans accueil.html
   puisque cette classe n'existe que là) : seule la règle d'APPARITION diffère par page, jamais
   l'apparence du bouton lui-même. */
.bt-jouer{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);z-index:2;
  width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.75);
  background:rgba(5,6,8,.55);color:#fff;font-size:20px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s ease,transform .15s ease;
  padding:0 0 0 2px;
}
.bt-jouer:hover{background:var(--rouge);border-color:var(--rouge)}
.bt-jouer.maintenu{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){ .bt-jouer{width:46px;height:46px;font-size:18px} }
.tuile-grille:hover .bt-jouer,.tuile-grille:focus-visible .bt-jouer{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ♡ « à voir » (cahier §5, Découverte) : coin bas-droit, jamais le même coin que les badges
   4K/HDR (haut-gauche, .fg-badges) ni le crayon du mode édition (haut-droit, .ed-crayon) —
   toujours visible (pas seulement au survol) pour qu'un geste tactile le trouve du premier
   coup, mais discret tant qu'il n'est pas actif. */
.bt-a-voir{
  position:absolute;right:6px;bottom:6px;z-index:3;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(5,6,8,.6);color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.75;
  transition:transform .15s cubic-bezier(.4,1.4,.6,1),opacity .15s ease,background .15s ease;
}
.bt-a-voir:hover,.bt-a-voir:focus-visible{opacity:1;transform:scale(1.15);outline:none}
.bt-a-voir.actif{opacity:1;color:var(--rouge);background:rgba(5,6,8,.78);border-color:rgba(211,32,42,.6)}
.grille-oeuvres.mode-liste .bt-a-voir{display:none}

.alphabet-nav{
  display:flex;flex-direction:column;flex:0 0 auto;width:22px;padding-top:2px;position:sticky;top:120px;
  max-height:calc(100vh - 160px);
}
.alphabet-nav button{
  background:none;border:none;color:var(--gris);font-size:10px;font-weight:700;padding:1px 0;cursor:pointer;flex:1 1 auto;
}
.alphabet-nav button:hover,.alphabet-nav button:focus-visible{color:var(--rouge-vif);outline:none}
@media (max-width:760px){
  .alphabet-nav{display:none}
  .page-grille-corps{padding:0 16px 60px}
  .outils-grille{padding:0 16px 14px}
}

.sentinelle-defilement{height:1px}

/* Badge "Ouvert 24 h" — clin d'œil Vidéoflex, discret */
.badge-24h{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.02em;color:#c9a9ac;
  background:rgba(211,32,42,.12);border:1px solid rgba(211,32,42,.35);
  border-radius:999px;padding:4px 10px 4px 8px;
}
.badge-24h .pt{width:6px;height:6px;border-radius:50%;background:var(--rouge-vif);box-shadow:0 0 8px var(--rouge-vif)}

/* Mini-badges "ovale Vidéoflex" (Bangers, ← Retour) — voir web/badge-logo-mini.js */
.blm-etiquette-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.blm-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:2px 10px;height:42px;outline:none;
  -webkit-tap-highlight-color:transparent;flex:none;
}
.blm-svg{height:100%;width:auto;overflow:visible}
.blm-trait{fill:none;stroke:rgba(211,32,42,.55);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.blm-v{fill:rgba(211,32,42,.75);transition:fill .2s ease}
.blm-texte{fill:rgba(255,255,255,.82);letter-spacing:.01em;transition:fill .2s ease}
.blm-badge:hover .blm-trait,.blm-badge:focus-visible .blm-trait{stroke:#ff4452}
.blm-badge:hover .blm-v,.blm-badge:focus-visible .blm-v{fill:#ff4452}
.blm-badge:focus-visible{box-shadow:0 0 0 2px rgba(255,68,82,.6);border-radius:999px}
.blm-badge:active{transform:scale(.96)}
/* Clignotement d'allumage au clic — mêmes teintes/rythme que l'ouverture (index.html), puis
   extinction : jamais un signe permanent, juste un clin d'œil. */
@keyframes blmAllumage{
  0%{filter:none}
  2%{filter:drop-shadow(0 0 10px #ff3c46) drop-shadow(0 0 22px rgba(255,60,70,.85)) brightness(1.5)}
  14%{filter:none}
  26%{filter:drop-shadow(0 0 12px #ff3c46) drop-shadow(0 0 26px rgba(255,60,70,.9)) brightness(1.6)}
  40%{filter:drop-shadow(0 0 4px #ff3c46) brightness(1.1)}
  55%{filter:drop-shadow(0 0 14px #ff3c46) drop-shadow(0 0 30px rgba(255,60,70,.95)) brightness(1.7)}
  85%{filter:drop-shadow(0 0 14px #ff3c46) drop-shadow(0 0 30px rgba(255,60,70,.95)) brightness(1.7)}
  100%{filter:none}
}
.blm-flash .blm-svg{animation:blmAllumage .72s steps(1,end) 1}
.blm-flash .blm-trait{stroke:#ff373f}
.blm-flash .blm-v{fill:#ff3c46}
.blm-flash .blm-texte{fill:#fff}
@media (prefers-reduced-motion: reduce){.blm-flash .blm-svg{animation:none;filter:drop-shadow(0 0 10px #ff3c46)}}
.blm-retour{margin-right:4px}
/* Flash néon du logo Vidéoflex (mouvement.js) — même animation que .blm-flash ci-dessus,
   appliquée directement à l'<img> du logo (pas de SVG inline à recolorer ici). */
.logo-flash-neon{animation:blmAllumage .72s steps(1,end) 1}
@media (prefers-reduced-motion: reduce){.logo-flash-neon{animation:none;filter:drop-shadow(0 0 10px #ff3c46)}}
/* Variante FIXE (fiche/personne/saga/collection) : reprend .retour (position, flou, cache au
   défilement — mouvement.js:gererBarreRetour la trouve par la même classe .retour) avec le
   rendu "mini-ovale néon" au lieu du pilule texte simple. */
.retour.blm-badge{padding:6px 16px 6px 10px;height:auto}
.retour.blm-badge .blm-svg{height:34px}
/* .blm-badge (background:none, border:none) venait APRÈS .retour et lui retirait son fond givré :
   badge transparent, illisible par-dessus le résumé de la fiche sur iPhone (1er nov 2026).
   Contrôle Opus : plus de pastille rectangulaire autour de l'ovale (double contour, décalée) ; un
   halo sombre elliptique centré sur l'ovale (58 % de la hauteur : le tracé est plus bas que le centre du SVG). */
.retour.blm-badge{padding:8px 16px 10px;border:none;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  background:radial-gradient(ellipse 49% 44% at 50% 58%,rgba(6,7,10,.97) 74%,rgba(6,7,10,.7) 87%,rgba(6,7,10,0) 100%)}
.retour.blm-badge:hover,.retour.blm-badge:focus-visible{background:radial-gradient(ellipse 49% 44% at 50% 58%,rgba(18,20,25,.98) 74%,rgba(18,20,25,.72) 87%,rgba(18,20,25,0) 100%)}
.retour.blm-badge:focus-visible{box-shadow:0 0 0 2px rgba(255,68,82,.6);border-radius:999px}

/* --- Musique : grille d'artistes, tuiles rondes (voir musique.html) --- */
.grille-artistes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:22px 14px;padding:0 28px 100px;align-content:start}
.tuile-artiste{background:none;border:none;color:#fff;cursor:pointer;padding:0;text-align:center;outline:none}
.tuile-artiste{display:block;width:100%}
.tuile-artiste .ta-photo{display:block;width:100%;aspect-ratio:1/1;border-radius:50%;background:var(--carte);background-size:cover;background-position:center;overflow:hidden;position:relative;border:2px solid transparent;transition:border-color .18s ease}
.tuile-artiste:hover .ta-photo,.tuile-artiste:focus-visible .ta-photo{border-color:var(--rouge-vif);box-shadow:var(--anneau)}
.tuile-artiste .ta-nom{display:block;margin-top:9px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tuile-artiste .ta-sous{display:block;font-size:11px;color:var(--gris)}
@media (max-width:760px){.grille-artistes{padding:0 16px 100px}}
/* Monogramme (initiales) quand l'artiste n'a aucune photo (ni Wikipédia ni pochette) — rouge de
   la charte (--rouge) à la place du rond gris uni, jamais de rose (2 nov 2026). */
.ta-photo.sans-photo{display:flex;align-items:center;justify-content:center;background:var(--rouge);color:#fff;font-weight:700;font-size:30px;letter-spacing:1px}
@media (max-width:760px){.ta-photo.sans-photo{font-size:22px}}

/* --- Points forts (bandeau horizontal, accueil musique) --- */
.pf-rangee{display:flex;gap:12px;overflow-x:auto;padding:4px 28px 18px;scrollbar-width:thin}
.pf-carte{flex:0 0 130px;width:130px;background:none;border:none;color:#fff;text-align:left;cursor:pointer;padding:0}
.pf-carte .pf-poch{display:block;width:130px;height:130px;border-radius:8px;background:var(--carte);background-size:cover;background-position:center;position:relative;overflow:hidden}
.pf-carte .pf-poch::after{content:'▶';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(5,6,8,.0);opacity:0;transition:opacity .15s ease,background .15s ease}
.pf-carte:hover .pf-poch::after,.pf-carte:focus-visible .pf-poch::after{opacity:1;background:rgba(5,6,8,.45)}
.pf-carte .pf-titre{display:block;margin-top:7px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-carte .pf-artiste{display:block;font-size:11px;color:var(--gris)}

/* --- Fiche artiste/album : hero avec fond flou animé --- */
.mus-hero{position:relative;padding:90px 28px 28px;overflow:hidden}
.mus-hero .mus-fond{position:absolute;inset:-15%;background-size:cover;background-position:center;filter:blur(40px) saturate(1.3) brightness(.5);transform:scale(1.1);animation:mus-derive 24s ease-in-out infinite alternate}
@keyframes mus-derive{0%{transform:scale(1.1) translate(0,0)}100%{transform:scale(1.22) translate(-2%,2%)}}
@media (prefers-reduced-motion:reduce){.mus-hero .mus-fond{animation:none}}
.mus-hero .mus-voile{position:absolute;inset:0;background:linear-gradient(to top,var(--fond) 4%,rgba(5,6,8,.4) 50%,rgba(5,6,8,.25) 100%)}
.mus-hero .mus-corps{position:relative;z-index:1;display:flex;gap:26px;align-items:flex-end;max-width:1100px}
.mus-hero .mus-pochette{width:180px;height:180px;border-radius:10px;object-fit:cover;background:var(--carte);box-shadow:0 20px 50px -10px rgba(0,0,0,.6);flex:0 0 auto}
.mus-hero.mus-artiste .mus-pochette{border-radius:50%}
.mus-hero .mus-titre{font-size:clamp(24px,4.2vw,40px);font-weight:800;margin:0 0 6px;line-height:1.08}
.mus-hero .mus-meta{color:#d7dae0;font-size:13px;margin:0 0 10px}
.mus-hero .mus-boutons{display:flex;gap:10px;flex-wrap:wrap}
.mus-hero .mus-bt{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer;border:none;background:#fff;color:#111}
.mus-hero .mus-bt:hover{background:#e6e6e6}
.mus-hero .mus-bt.sec{background:rgba(120,126,138,.35);color:#fff;backdrop-filter:blur(6px)}
.mus-hero .mus-bt.sec:hover{background:rgba(120,126,138,.5)}
@media (max-width:639px){.mus-hero .mus-corps{flex-direction:column;align-items:center;text-align:center}}
/* Monogramme (initiales) en-tête artiste sans photo — même rouge de charte que .ta-photo.sans-photo
   ci-dessus, jamais de rose (2 nov 2026). */
.mus-hero .mus-pochette.sans-photo{display:flex;align-items:center;justify-content:center;background:var(--rouge);color:#fff;font-weight:800;font-size:40px;letter-spacing:.5px}

.mus-section{padding:22px 28px 6px;max-width:1100px}
.mus-section h2{font-size:17px;margin:0 0 14px}
.mus-bio{color:#c9ced6;line-height:1.65;font-size:14px;max-width:720px}
.mus-bio p{margin:0 0 12px}
.mus-source{font-size:11px;color:var(--gris)}
.mus-source a{color:var(--bleu);text-decoration:none}
.mus-membres{display:flex;flex-wrap:wrap;gap:8px}
.mus-membre-pastille{background:var(--carte);border:1px solid var(--bord);border-radius:999px;padding:6px 14px;font-size:12px}
.mus-ligne-temps{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gris);margin:4px 0 0}
.mus-ligne-temps .pt{width:8px;height:8px;border-radius:50%;background:var(--rouge-vif)}

.mus-grille-albums{display:grid;gap:18px 14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mus-album-tuile{background:none;border:none;color:#fff;cursor:pointer;padding:0;text-align:left}
.mus-album-tuile{display:block;width:100%}
.mus-album-tuile .maa-poch{display:block;width:100%;aspect-ratio:1/1;border-radius:8px;background:var(--carte);background-size:cover;background-position:center;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease}
.mus-album-tuile:hover .maa-poch,.mus-album-tuile:focus-visible .maa-poch{box-shadow:var(--anneau);transform:scale(1.05)}
.mus-album-tuile .maa-titre{display:block;margin-top:8px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mus-album-tuile .maa-annee{display:block;font-size:11px;color:var(--gris)}

.mus-pistes{list-style:none;margin:0;padding:0;max-width:720px}
.mus-piste-item{display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:8px;cursor:pointer;transition:background .15s ease}
.mus-piste-item:hover,.mus-piste-item:focus-visible{background:var(--carte);outline:none}
.mus-piste-item .mp-num{width:26px;color:var(--gris);font-size:13px;text-align:right;flex:0 0 auto}
.mus-piste-item .mp-titre{flex:1 1 auto;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mus-piste-item .mp-duree{color:var(--gris);font-size:12px;flex:0 0 auto}
.mus-piste-item.mp-active{color:var(--rouge-vif)}

.mus-anecdote{background:var(--carte);border:1px solid var(--bord);border-radius:10px;padding:16px 18px;margin:0 0 14px;max-width:720px}
.mus-anecdote h3{font-size:14px;margin:0 0 8px;color:var(--rouge-vif)}
.mus-anecdote p{color:#c9ced6;font-size:13.5px;line-height:1.6;margin:0}

.mus-credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 20px;max-width:1000px;font-size:13px}
.mus-credits dt{color:var(--gris);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0}
.mus-credits dd{margin:2px 0 0}

/* --- Barre de lecteur persistante (lecteur-musique.js) --- */
.lm-barre{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:10px 18px;background:rgba(8,9,12,.92);backdrop-filter:blur(14px);border-top:1px solid var(--bord);
  transform:translateY(0);transition:transform .25s ease}
.lm-barre.lm-vide{transform:translateY(100%)}
.lm-piste{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 220px}
.lm-pochette{width:42px;height:42px;border-radius:6px;background:var(--carte) center/cover;flex:0 0 auto}
.lm-textes{display:flex;flex-direction:column;min-width:0}
.lm-titre{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-artiste{font-size:11px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-controles{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.lm-bt{background:none;border:none;color:var(--texte);font-size:16px;cursor:pointer;padding:8px;border-radius:50%;line-height:1}
.lm-bt:hover{background:var(--carte)}
.lm-bt:focus-visible{outline:none;box-shadow:var(--anneau)}
.lm-bt.lm-actif{color:var(--rouge-vif)}
.lm-bt-jouer{font-size:20px}
.lm-progression{display:none;align-items:center;gap:8px;flex:1 1 320px;min-width:0}
.lm-temps{font-size:11px;color:var(--gris);width:34px;flex:0 0 auto}
.lm-barre-prog{flex:1 1 auto;height:4px;border-radius:2px;background:rgba(255,255,255,.15);cursor:pointer;position:relative}
.lm-barre-fait{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--rouge-vif);width:0%}
.lm-ouvrir{flex:0 0 auto}
@media (min-width:860px){.lm-progression{display:flex}}
@media (max-width:759px){.lm-piste{flex:1 1 auto}}

/* --- Mode ÉCOUTE plein écran (ecoute.html) --- */
.eco-fond{position:fixed;inset:-20%;background-size:cover;background-position:center;filter:blur(60px) saturate(1.4) brightness(.55);transform:scale(1.15);animation:mus-derive 30s ease-in-out infinite alternate;z-index:0}
@media (prefers-reduced-motion:reduce){.eco-fond{animation:none}}
.eco-voile{position:fixed;inset:0;background:rgba(5,6,8,.35);z-index:0}
.eco-ecran{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;padding:28px 28px 120px;color:#fff}
.eco-corps{display:flex;gap:48px;align-items:center;flex:1 1 auto;max-width:1200px;margin:0 auto;width:100%;flex-wrap:wrap;justify-content:center}
.eco-pochette{width:min(42vw,380px);height:min(42vw,380px);border-radius:14px;object-fit:cover;background:var(--carte);box-shadow:0 30px 80px -10px rgba(0,0,0,.7)}
.eco-infos{max-width:420px}
.eco-titre{font-size:clamp(22px,3.4vw,32px);font-weight:800;margin:0 0 6px}
.eco-artiste{font-size:17px;color:#d7dae0;margin:0 0 2px}
.eco-album{font-size:13px;color:var(--gris);margin:0 0 20px}
.eco-file{max-width:320px;max-height:360px;overflow-y:auto}
.eco-file h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);margin:0 0 10px}
.eco-file-item{padding:7px 0;font-size:13px;color:#c9ced6;border-bottom:1px solid rgba(255,255,255,.06)}
.eco-file-item.eco-active{color:var(--rouge-vif);font-weight:600}

/* --- Options › Affichage et Accessibilité (cahier §9-F/L, 1er nov) : classes posées sur
   <html> par web/reglagesAffichage.js, LUES sur TOUTES les pages (accueil, grilles, fiche,
   personne…) — jamais redéfinies ailleurs, une seule source de vérité comme html.reduire-anim
   déjà posé par mouvement.js ci-dessus. */
html.texte-agrandi{font-size:112.5%}
html.contraste-eleve{--texte:#ffffff;--gris:#c7cdd4;--bord:rgba(255,255,255,.22);--carte:rgba(255,255,255,.1)}
html.contraste-eleve body{background:#000}

/* Intensité du néon (F) : ré-échelle le halo autour de --anneau-neon défini plus haut, sans
   dupliquer sa définition — un seul endroit modifie le "cœur"/l'étalement. */
html.neon-faible{--anneau-neon:0 0 0 2px var(--neon-coeur),0 0 0 3px var(--rouge-vif),0 0 4px 0 rgba(211,32,42,.5),inset 0 0 2px rgba(255,255,255,.2)}
html.neon-fort{--anneau-neon:0 0 0 2px var(--neon-coeur),0 0 0 5px var(--rouge-vif),0 0 10px 0 rgba(211,32,42,1),0 0 26px 4px rgba(211,32,42,.75),0 0 44px 8px rgba(211,32,42,.45),inset 0 0 4px rgba(255,255,255,.4),inset 0 0 18px rgba(211,32,42,.4)}

/* Masquer les titres déjà vus / les notes (F) — une seule classe partagée par les pages qui
   affichent déjà .fg-vu (tuiles.js) et .notes-fiche (fiche.html), jamais une 2e façon de les
   cacher ailleurs. */
html.masquer-vus .fg-vu{display:none}
html.masquer-notes .notes-fiche{display:none}

/* Anti-divulgâcheur (F) : épisodes pas encore vus, posé via .episode-non-vu (fiche.html) —
   flou sur la vignette ET le résumé, jamais sur le numéro/titre (juste assez pour ne rien
   révéler sans rendre la ligne illisible). */
html.anti-spoiler .episode-non-vu .vignette{filter:blur(14px) saturate(.6)}
html.anti-spoiler .episode-non-vu .resume-ep{filter:blur(5px);user-select:none}
.eco-retour{position:fixed;top:16px;left:16px;z-index:2}

/* Mini-lecteur d'aperçu partagé (web/apercu.js) : à-vérifier ET ménage (doublons côte à côte). */
/* --- Aperçu vidéo (31 oct 2026, retour utilisateur) : « des titres que tu me montres, j'ai
   aucune idée c'est quoi » --- */
.apercu-video{position:relative;width:100%;max-width:420px;aspect-ratio:16/9;background:#0a0b0d;
  border-radius:12px;overflow:hidden;margin:0 0 16px;border:1px solid var(--bord);
  animation:apercu-entree .4s cubic-bezier(.34,1.4,.64,1) both}
@media (prefers-reduced-motion:reduce){.apercu-video{animation:none}}
.apercu-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.apercu-voile{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25);cursor:pointer;transition:opacity .2s}
.apercu-voile .apercu-jouer{width:52px;height:52px;border-radius:999px;background:rgba(5,6,8,.75);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;
  border:1px solid rgba(255,255,255,.25)}
.apercu-barre-zone{position:absolute;left:10px;right:10px;bottom:44px;z-index:2;touch-action:none}
.apercu-barre{width:100%;accent-color:var(--rouge);height:4px;cursor:pointer;touch-action:none}
.apercu-controles{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:8px;z-index:2}
.apercu-bt{background:rgba(5,6,8,.75);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;
  min-width:34px;height:28px;padding:0 9px;font-size:13px;white-space:nowrap;cursor:pointer;display:flex;align-items:center;justify-content:center}
.apercu-bt:hover{background:rgba(211,32,42,.5)}
.apercu-bt.son-actif{border-color:var(--bleu)}
@keyframes apercu-entree{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}