/* ==========================================================================
   Lecteur immersif (lot F, 11/11/2026) : la fenêtre de lecture commune aux
   pages événement et à la page d'une saison (_particles/lecteur_immersif).

   Aucune couleur n'est écrite ici. La scène, son encre, son accent et le voile
   viennent des Paramètres graphiques du site (App\Support\Lecteur\CouleursFenetre,
   posés en style sur la fenêtre : « Fond des pages détail et lecteur », « Texte
   principal ») ; à défaut, des mêmes réglages lus par le layout (--detail-bg,
   --primary-text-color). Boutons : couleur principale du site et son encre.
   Seuls transform et opacity sont animés ; mouvement réduit : un fondu.
   ========================================================================== */
.li {
  --li-fond: var(--li-scene, var(--detail-bg, var(--couleur-fond-content)));
  --li-texte: var(--li-encre, var(--primary-text-color));
  --li-relief: var(--li-accent, var(--li-texte));
  --li-courbe: cubic-bezier(.23, 1, .32, 1);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--li-voile, var(--li-fond)) 72%, transparent); color: var(--li-texte);
  font-size: 1rem; line-height: 1.4; text-align: left; overflow: hidden;
}
.li::backdrop { background: transparent; }
.li[open] { display: grid; place-items: center; animation: li-fondu 200ms var(--li-courbe); }
.li *, .li *::before, .li *::after { box-sizing: border-box; }
.li [hidden] { display: none !important; }
html.li-ouvert, html.li-ouvert body { overflow: hidden; }
@keyframes li-fondu { from { opacity: 0; } }
@keyframes li-entre { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes li-tourne { to { transform: rotate(360deg); } }

/* La boîte : plein écran sur un téléphone ; au-delà, le plus grand 16/9 qui laisse voir le fond autour. */
.li-boite { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: 100%; height: 100%; background: var(--li-fond); color: var(--li-texte); animation: li-entre 280ms var(--li-courbe); }
.li-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 6px 6px 16px; padding-top: max(6px, env(safe-area-inset-top)); }
.li .li-titre { min-width: 0; margin: 0; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.li .li-titre:focus { outline: none; }
.li .li-fermer { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; cursor: pointer; transition: transform 150ms var(--li-courbe); }
.li .li-fermer:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .li .li-fermer:hover { background: color-mix(in srgb, currentColor 22%, transparent); } }
.li :focus-visible { outline: 3px solid var(--li-relief); outline-offset: 3px; border-radius: 8px; }
.li .li-fermer:focus-visible { border-radius: 50%; }

/* L'avis d'une vidéo dont l'avancement n'est pas suivi : une ligne sous le titre, jamais par-dessus la vidéo. */
.li .li-avis { margin: 0; padding: .5rem 16px .65rem; color: inherit; font-size: .9375rem; line-height: 1.4; background: color-mix(in srgb, currentColor 10%, transparent); }
.li .li-avis a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.li-scene { position: relative; display: grid; grid-row: 3; min-height: 0; overflow: hidden; }
.li-scene > * { grid-area: 1 / 1; }
.li-place { position: relative; min-height: 0; }
.li-place:empty { pointer-events: none; }
/* Empilés : un cadre qui finit de noter sa position ne déplace pas celui qui arrive. */
.li-place iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.li-place iframe[data-li-cache] { visibility: hidden; }

/* Au-dessus de la place du lecteur : vide après une panne, elle recouvrait « Réessayer » et le lien de la page,
   qui ne recevaient plus aucun clic (constaté le 11/11/2026, ERR-VID-122). */
.li-attente, .li-panne { position: relative; z-index: 1; align-self: center; justify-self: center; display: grid; gap: .75rem; justify-items: center; margin: 0; padding: 1.5rem; max-width: 34rem; text-align: center; color: inherit; }
.li-attente { grid-auto-flow: column; align-items: center; font-weight: 600; }
.li-roue { width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: li-tourne 900ms linear infinite; }
.li .li-panne p { margin: 0; color: inherit; font-size: 1rem; line-height: 1.5; }
.li .li-panne-titre { font-size: 1.25rem; font-weight: 800; }
.li-code { font-size: .875rem; opacity: .85; white-space: nowrap; }
.li-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.li .li-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.2rem; border: 0; border-radius: 999px; background: var(--primary-color); color: var(--on-primary-color); font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 150ms var(--li-courbe); }
.li .li-btn:active { transform: scale(.97); }
.li .li-btn--2 { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 60%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .li .li-btn:hover { background: var(--primary-lightened-color); color: var(--pe-sur-allegee, var(--on-primary-color)); }
  .li .li-btn--2:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
}

/* Le panneau de fin : par-dessus le lecteur, sur le fond de la scène. Une page événement y pose ses propres
   messages (calques du socle) ; la page d'une saison, ceux du composant (.li-fin). */
.li .li-panneau {
  position: relative; z-index: 2; display: grid; gap: .7rem; justify-items: start; align-content: center; margin: 0; padding: clamp(1.1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--li-fond) 94%, transparent); color: var(--li-texte); overflow: auto; overscroll-behavior: contain;
  --pe-accent-ici: var(--li-relief); animation: li-entre 260ms var(--li-courbe);
}
.li .li-panneau p { margin: 0; color: inherit; }
.li-fin-titre { padding-right: 3rem; font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.15; }
.li-fin-texte { max-width: 46ch; opacity: .9; }
.li-fin-reste { font-variant-numeric: tabular-nums; font-weight: 700; }
.li .li-fin-fermer { position: absolute; top: .4rem; right: .4rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .li .li-fin-fermer:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }
.li-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Épisode précédent et suivant (13/11/2026) : de part et d'autre de la boîte quand la place le permet,
   par-dessus les bords de la vidéo sinon. Même case de grille que la boîte : ils suivent sa largeur. */
.li > .li-boite, .li > .li-navs { grid-area: 1 / 1; }
.li-navs { display: flex; align-items: center; width: 100%; padding: 0 8px; pointer-events: none; }
.li .li-nav {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--li-fond) 82%, transparent); color: var(--li-texte); cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 22%, transparent), 0 8px 24px color-mix(in srgb, var(--li-voile, var(--li-fond)) 45%, transparent);
  transition: transform 160ms var(--li-courbe), background-color 160ms ease-out;
}
.li .li-nav[data-li-voisin="1"] { margin-left: auto; }
.li .li-nav:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .li .li-nav:hover { background: var(--li-relief); color: var(--li-fond); } }

/* À la pause (13/11/2026) : un trait part du coin opposé à la croix (en bas à gauche), longe les deux bords et
   rejoint la croix en haut à droite ; la croix bat pendant 5 s. Retiré à la reprise de la lecture. */
.li-boite { position: relative; }
.li-trace { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.li-boite[data-li-pause] .li-trace { display: block; animation: li-trace-sort 400ms ease-out 4600ms forwards; }
.li-trace i { position: absolute; background: var(--li-relief); }
/* Premier segment qui accélère, second qui freine en arrivant à la croix : un seul geste, sans hoquet au coin. */
.li-trace i:nth-child(odd) { left: 0; width: 3px; top: 0; bottom: 0; transform-origin: center bottom; animation: li-trace-y 600ms cubic-bezier(.55, 0, 1, .45) both; }
.li-trace i:nth-child(even) { left: 0; right: 0; height: 3px; transform-origin: left center; animation: li-trace-x 600ms cubic-bezier(.55, 0, 1, .45) both; }
.li-trace i:nth-child(1), .li-trace i:nth-child(4) { animation-delay: 0ms; }
.li-trace i:nth-child(2), .li-trace i:nth-child(3) { animation-delay: 600ms; animation-timing-function: var(--li-courbe); }
.li-trace i:nth-child(2) { top: 0; }
.li-trace i:nth-child(3) { left: auto; right: 0; }
.li-trace i:nth-child(4) { bottom: 0; }
/* La croix bat (transform seul) et un anneau s'élargit autour (opacité et échelle) : rien ne repeint sur la vidéo. */
.li-boite[data-li-pause] .li-fermer { position: relative; z-index: 4; animation: li-croix 950ms var(--li-courbe) 1150ms 4; }
.li-boite[data-li-pause] .li-fermer::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--li-relief); opacity: 0; animation: li-croix-onde 950ms var(--li-courbe) 1150ms 4; }
@keyframes li-trace-y { from { transform: scaleY(0); } }
@keyframes li-trace-x { from { transform: scaleX(0); } }
@keyframes li-trace-sort { to { opacity: 0; } }
@keyframes li-croix { 35% { transform: scale(1.14); } }
@keyframes li-croix-onde { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }

@media (min-width: 760px) {
  .li { padding: 24px; }
  .li-boite {
    /* La largeur qui laisse au lecteur un 16/9 entier sous la barre de titre, dans la hauteur de la fenêtre. */
    width: min(1280px, 100%, calc((100dvh - 48px - 56px) * 16 / 9));
    height: auto; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px color-mix(in srgb, var(--li-voile, var(--li-fond)) 60%, transparent);
  }
  .li-tete { padding-left: 20px; }
  .li .li-titre { font-size: 1.0625rem; }
  /* La largeur de la boîte (règle ci-dessus), plus la place d'une flèche de chaque côté. */
  .li-navs { width: min(100%, calc(min(1280px, 100%, calc((100dvh - 48px - 56px) * 16 / 9)) + 144px)); padding: 0; }
  .li-scene { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .li-boite, .li .li-panneau { animation: li-fondu 200ms var(--li-courbe); }
  .li-roue { animation: none; border-top-color: color-mix(in srgb, currentColor 25%, transparent); }
  .li .li-fermer, .li .li-btn { transition: none; }
  .li .li-fermer:active, .li .li-btn:active { transform: none; }
  .li .li-nav { transition: none; }
  .li .li-nav:active { transform: none; }
  .li-trace i:nth-child(n) { animation: li-fondu 300ms ease-out both; }
  .li-boite[data-li-pause] .li-fermer { animation: none; box-shadow: 0 0 0 3px var(--li-relief); }
  .li-boite[data-li-pause] .li-fermer::after { animation: none; }
}