/* ==========================================================================
   Pages événement : SOCLE commun à tous les modes et à tous les gabarits
   (10/11/2026, lot A1). Contrat : docs/PAGES_EVENEMENT.md.

   Tout vit sous l'enveloppe .pe. Aucune couleur n'est écrite ici : seules les
   variables du site (:root de site_app) et leurs dérivés par color-mix().
   Le ton (fond sombre ou clair) est posé par le serveur sur data-pe-ton.
   Les jetons ci-dessous sont ceux d'un site dont les couleurs s'accordent ; le
   serveur remplace ceux qui ne se lisent pas sur leur fond : surface des cartes,
   encres, textes secondaires, accents (App\Support\PagesEvenement\Habillage).
   Une encre va avec SON fond : --pe-encre, --pe-doux et --pe-accent sur la page ;
   --pe-encre-carte, --pe-doux-carte, --pe-accent-carte sur --pe-carte ;
   --pe-ecran-texte et --pe-accent-ecran sur --pe-ecran-fond.
   Un composant qui pose un fond dit à ce qu'il contient quelles encres y vont, par
   les jetons de lieu --pe-encre-ici, --pe-doux-ici, --pe-accent-ici : tout lecteur
   de l'accent écrit var(--pe-accent-ici, var(--pe-accent)).
   Un gabarit ajoute sa feuille après celle-ci et ne redéfinit pas ces jetons
   (les jetons de lieu sont les seuls qu'il pose).
   ========================================================================== */
.pe {
  --pe-encre: var(--primary-text-color);
  --pe-doux: var(--description-text-color);
  --pe-carte: var(--card-info-bg-color);
  --pe-encre-carte: var(--pe-encre);
  --pe-doux-carte: var(--pe-doux);
  --pe-accent: color-mix(in srgb, var(--primary-color) 55%, var(--pe-encre));
  --pe-accent-carte: var(--pe-accent);
  --pe-accent-ecran: var(--primary-lightened-color);
  --pe-trait: color-mix(in srgb, var(--pe-encre) 14%, transparent);
  /* Contour porteur de sens (bouton en contour, champ) : l'encre du lieu, en partie. Le serveur relève la part s'il le faut pour tenir 3:1. */
  --pe-contour: color-mix(in srgb, currentColor var(--pe-part-contour, 55%), transparent);
  --pe-police-titre: var(--font-titles);
  --pe-police-texte: var(--font-paragraphs);
  --pe-rayon: 14px;
  --pe-rayon-ecran: 16px;
  --pe-courbe: cubic-bezier(.2, .7, .2, 1);
  --pe-haut: 0px;
  position: relative;
  background: var(--couleur-fond-content);
  color: var(--pe-encre);
  font-family: var(--pe-police-texte);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
  text-align: left;
}
.pe[data-pe-ton="sombre"] {
  --pe-voile: color-mix(in srgb, var(--couleur-fond-content) 84%, transparent);
  --pe-ombre: color-mix(in srgb, var(--primary-color) 12%, transparent);
  --pe-ecran-fond: color-mix(in srgb, var(--primary-enhanced-color) 14%, var(--couleur-fond-header));
  --pe-ecran-texte: var(--pe-encre);
}
.pe[data-pe-ton="clair"] {
  --pe-voile: color-mix(in srgb, var(--pe-encre) 62%, transparent);
  --pe-ombre: color-mix(in srgb, var(--pe-encre) 14%, transparent);
  --pe-ecran-fond: color-mix(in srgb, var(--primary-enhanced-color) 38%, var(--pe-encre));
  --pe-ecran-texte: var(--couleur-fond-content);
}
.pe *, .pe *::before, .pe *::after { box-sizing: border-box; }
/* Remise à zéro SANS poids (:where) : la classe d'un composant ou d'un gabarit l'emporte toujours. Écrite
   « .pe ol », elle battait « .pe-chemin-page » et lui retirait ses marges et son centrage (11/11/2026). */
.pe :where(h1, h2, h3, p, ul, ol, fieldset, legend) { margin: 0; padding: 0; }
/* Un paragraphe prend l'encre de SON fond : le style de couleur du site lui donne sa couleur de paragraphe,
   sa taille et son interligne, quel que soit le fond où il est posé. */
.pe :where(p) { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.pe :where(a) { transition: none; }
.pe h1, .pe h2, .pe h3 { color: inherit; line-height: 1.1; text-wrap: balance; }
.pe ul, .pe ol { list-style: none; }
.pe fieldset { border: 0; min-width: 0; background: none; border-radius: 0; }
.pe button { font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: none; }
.pe a { color: var(--pe-accent-ici, var(--pe-accent)); }
.pe svg { display: block; }
.pe [hidden] { display: none !important; }
.pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pe :focus-visible { outline: 3px solid var(--pe-accent-ici, var(--pe-accent)); outline-offset: 3px; border-radius: 6px; }
.pe .pe-ecran :focus-visible, .pe .pe-ba:focus-visible { outline-color: var(--pe-accent-ecran); }
.pe-ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pe-ico--plein { fill: currentColor; stroke: none; }
html.pe-modale { overflow: hidden; }

/* ---------- Brouillon : bandeau de l'administration ---------- */
.pe-brouillon { padding: .6rem 1rem; background: color-mix(in srgb, var(--primary-color) 16%, var(--couleur-fond-content)); border-bottom: 1px solid var(--border-color); font-size: .9375rem; font-weight: 600; text-align: center; }

/* ---------- Boutons ---------- */
.pe .pe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px; padding: .6rem 1.2rem; border: 0; border-radius: 999px;
  background: var(--primary-color); color: var(--on-primary-color);
  font-family: var(--pe-police-texte); font-weight: 700; line-height: 1.2; text-decoration: none; text-align: left;
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .pe .pe-btn:hover { background: var(--primary-lightened-color); color: var(--pe-sur-allegee, var(--on-primary-color)); } }
.pe .pe-btn:active { transform: scale(.97); }
.pe .pe-btn[disabled], .pe .pe-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.pe .pe-btn--2 { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--pe-contour); }
@media (hover: hover) and (pointer: fine) { .pe .pe-btn--2:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; } }
.pe .pe-lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 0; border: 0; background: none;
  color: var(--pe-accent-ici, var(--pe-accent)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: left;
}

/* ---------- Barre de la page : titre et « Prendre rendez-vous » ---------- */
.pe-tete {
  position: sticky; top: var(--pe-haut); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: color-mix(in srgb, var(--couleur-fond-header) 92%, transparent);
  /* L'encre accordée au fond de l'en-tête, posée par le serveur (Habillage) : il peut être sombre sur un site à contenu clair. */
  color: var(--pe-encre-tete, var(--pe-encre));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color);
}
.pe-marque { display: block; min-width: 0; line-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--pe-police-titre); font-weight: 700; font-size: 1.05rem; }
.pe .pe-tete .pe-btn { flex: none; font-size: .875rem; padding-inline: .8rem; gap: .4rem; }
@media (min-width: 760px) { .pe-tete { padding-inline: 32px; } .pe-marque { font-size: 1.2rem; } .pe .pe-tete .pe-btn { font-size: .9375rem; padding-inline: 1.1rem; } }

/* ---------- Affiches dessinées (quand un contenu n'a pas d'image) ---------- */
.pe-art { position: absolute; inset: 0; background: var(--pe-ecran-fond); }
.pe-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-art[data-motif="0"] { background:
  radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--primary-color) 78%, transparent) 0 20%, transparent 20.6%),
  radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--primary-color) 22%, transparent) 0 38%, transparent 38.6%),
  linear-gradient(160deg, color-mix(in srgb, var(--primary-enhanced-color) 30%, var(--pe-ecran-fond)), var(--pe-ecran-fond) 65%); }
.pe-art[data-motif="1"] { background:
  repeating-linear-gradient(115deg, color-mix(in srgb, var(--primary-color) 34%, transparent) 0 2px, transparent 2px 20px),
  linear-gradient(200deg, color-mix(in srgb, var(--primary-enhanced-color) 60%, var(--pe-ecran-fond)), var(--pe-ecran-fond) 72%); }
.pe-art[data-motif="2"] { background:
  repeating-radial-gradient(circle at 18% 112%, color-mix(in srgb, var(--primary-lightened-color) 40%, transparent) 0 2px, transparent 2px 24px),
  linear-gradient(20deg, color-mix(in srgb, var(--primary-enhanced-color) 34%, var(--pe-ecran-fond)), var(--pe-ecran-fond) 60%); }
.pe-art[data-motif="3"] { background:
  radial-gradient(ellipse at 50% 128%, color-mix(in srgb, var(--primary-color) 80%, transparent) 0 46%, transparent 46.6%),
  radial-gradient(ellipse at 50% 128%, color-mix(in srgb, var(--primary-color) 24%, transparent) 0 62%, transparent 62.6%),
  var(--pe-ecran-fond); }
.pe-art[data-motif="4"] { background:
  linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 20%, transparent) 1px, transparent 1px) 0 0 / 26px 26px,
  linear-gradient(color-mix(in srgb, var(--primary-color) 20%, transparent) 1px, transparent 1px) 0 0 / 26px 26px,
  radial-gradient(circle at 30% 38%, color-mix(in srgb, var(--primary-color) 60%, transparent), transparent 46%),
  var(--pe-ecran-fond); }
.pe-art[data-motif="5"] { background:
  conic-gradient(from 212deg at 70% 62%, color-mix(in srgb, var(--primary-color) 70%, transparent) 0 17%, transparent 17.2% 100%),
  radial-gradient(circle at 24% 30%, color-mix(in srgb, var(--primary-lightened-color) 34%, transparent) 0 17%, transparent 17.6%),
  var(--pe-ecran-fond); }

/* ---------- Jauge d'avancement ---------- */
.pe-jauge { display: block; height: 8px; border-radius: 99px; background: var(--progress-bg-color); overflow: hidden; }
.pe-jauge i { display: block; height: 100%; border-radius: inherit; background: var(--progress-fill-color); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 300ms var(--pe-courbe); }

/* ---------- La scène : pile de bandes-annonces, écran, calque ---------- */
.pe-scene { position: relative; }
.pe-cadre { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.pe-cadre-ecran { position: relative; grid-area: 1 / 1; aspect-ratio: 16 / 9; container-type: inline-size; }
.pe-pile { position: absolute; inset: 0; }
.pe .pe-ba {
  position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: var(--pe-rayon-ecran); overflow: hidden;
  background: var(--pe-ecran-fond); color: var(--pe-ecran-texte); text-align: left;
  transition: transform 300ms var(--pe-courbe), opacity 300ms var(--pe-courbe);
}
.pe-ba[data-pos="0"] { z-index: 3; }
.pe-ba[data-pos="1"] { z-index: 2; }
.pe-ba[data-pos="2"] { z-index: 1; }
.pe-ba:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { opacity: 0; pointer-events: none; }
.pe-ba:disabled { cursor: default; }
.pe-ba-txt {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .15rem;
  padding: 2.5rem clamp(.9rem, 3vw, 1.75rem) 4.25rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--pe-ecran-fond) 96%, transparent) 72%, color-mix(in srgb, var(--pe-ecran-fond) 78%, transparent) 86%, transparent);
}
.pe-ba-sur { font-size: .875rem; color: color-mix(in srgb, var(--pe-ecran-texte) 80%, transparent); }
.pe-ba-titre { font-family: var(--pe-police-titre); font-weight: 800; font-size: clamp(1.15rem, 6.4cqw, 3.25rem); line-height: 1; }
.pe-ba-duree { font-size: .9375rem; color: var(--pe-accent-ecran); font-weight: 600; }

.pe-ecran { position: absolute; inset: 0; z-index: 4; border-radius: var(--pe-rayon-ecran); overflow: hidden; color: var(--pe-ecran-texte); pointer-events: none; }
.pe-ecran > * { pointer-events: auto; }
.pe-ecran-media { position: absolute; inset: 0; background: var(--pe-ecran-fond); opacity: 0; transition: opacity 300ms ease-out; pointer-events: none; }
.pe-ecran[data-media="1"] .pe-ecran-media { opacity: 1; pointer-events: auto; }
.pe-ecran-media video, .pe-ecran-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: var(--pe-ecran-fond); }
/* Fondu au noir quand le son, rendu par son bouton, fait repartir la bande-annonce du début (13/11/2026). */
.pe-ecran .pe-ecran-voile { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 300ms cubic-bezier(.77, 0, .175, 1); }
.pe-ecran[data-voile="1"] .pe-ecran-voile { opacity: 1; }
.pe .pe-ecran-jouer {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary-color); color: var(--on-primary-color);
  transition: transform 200ms var(--pe-courbe), opacity 200ms ease-out;
}
.pe-ecran-jouer .pe-ico { width: 34px; height: 34px; }
@media (hover: hover) and (pointer: fine) { .pe .pe-ecran-jouer:hover { background: var(--primary-lightened-color); color: var(--pe-sur-allegee, var(--on-primary-color)); } }
.pe-ecran-jouer:active { transform: scale(.94); }
.pe-ecran[data-lecture="1"] .pe-ecran-jouer, .pe-ecran[data-cadre="1"] .pe-ecran-jouer { opacity: 0; transform: scale(.8); pointer-events: none; }
.pe-ecran-cmd { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .35rem; padding: 0 .5rem .45rem; }
.pe-ecran[data-media="0"] .pe-ecran-cmd { display: none; }
.pe-ecran[data-cadre="1"] .pe-ecran-cmd { left: auto; right: 0; bottom: auto; top: 0; padding: .45rem .5rem 0; }
.pe-ecran[data-cadre="1"] .pe-cmd-jouer, .pe-ecran[data-cadre="1"] .pe-ecran-barre, .pe-ecran[data-cadre="1"] .pe-ecran-temps { display: none; }
.pe .pe-cmd {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 44px; min-height: 44px; padding: 0 .5rem;
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--pe-ecran-fond) 70%, transparent); color: inherit; font-size: .8125rem; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .pe .pe-cmd:hover { background: color-mix(in srgb, var(--pe-ecran-texte) 18%, var(--pe-ecran-fond)); } }
.pe-cmd .pe-ico { width: 22px; height: 22px; }
.pe-cmd-son span { display: none; }
@container (min-width: 560px) { .pe-cmd-son span { display: inline; } .pe .pe-cmd-son { padding: 0 .85rem 0 .65rem; } }
/* Son de la scène (12/11/2026) : « Son coupé » prend la couleur d'accent tant que la vidéo joue muette, et
   pulse deux fois (≈3 s, puis l'invitation prend le relais : une seule animation à la fois) ; l'invitation
   « Activer le son maintenant » (posée et animée par socle.js, 3 s après le départ, pendant 5 s). */
.pe .pe-cmd-son[data-attire="1"] {
  position: relative; background: color-mix(in srgb, var(--primary-color) 88%, var(--pe-ecran-fond)); color: var(--on-primary-color);
}
/* L'anneau qui s'élargit : transform et opacity seulement (un box-shadow animé repeint chaque image). */
.pe .pe-cmd-son[data-attire="1"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--primary-color);
  opacity: 0; pointer-events: none; animation: pe-son-appel 1.6s cubic-bezier(.23, 1, .32, 1) 2;
}
.pe .pe-cmd-son[data-attire="1"] .pe-ico { transform-origin: 30% 50%; animation: pe-son-tremble 1.6s ease-in-out 2; }
@keyframes pe-son-appel {
  0% { opacity: .7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.18, 1.45); }
}
@keyframes pe-son-tremble {
  0%, 58%, 100% { transform: rotate(0); }
  68% { transform: rotate(-11deg); }
  78% { transform: rotate(9deg); }
  88% { transform: rotate(-4deg); }
}
.pe .pe-invite-son {
  position: absolute; left: 50%; bottom: 4.25rem; z-index: 3; transform: translate(-50%, 0);
  display: inline-flex; align-items: center; gap: .65rem; min-height: 52px; padding: .65rem 1.3rem .8rem 1rem;
  border: 0; border-radius: 999px; background: var(--primary-color); color: var(--on-primary-color);
  font-weight: 700; font-size: clamp(.9375rem, 2.6cqw, 1.125rem); line-height: 1.1; white-space: nowrap; cursor: pointer;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.pe .pe-invite-son:focus-visible { outline: 3px solid var(--pe-ecran-texte); outline-offset: 3px; }
.pe-invite-onde { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--primary-color); pointer-events: none; opacity: 0; }
.pe-invite-ico { display: inline-flex; align-items: center; gap: .25rem; }
.pe-invite-ico .pe-ico { width: 24px; height: 24px; transform-origin: 30% 50%; }
.pe-invite-barres { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.pe-invite-barres i { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.4); }
.pe-invite-txt span { display: inline-block; white-space: pre; }
.pe-invite-temps { position: absolute; left: 1.3rem; right: 1.3rem; bottom: .38rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; transform-origin: left center; }
@container (max-width: 559px) { .pe .pe-invite-son { bottom: 3.6rem; padding: .55rem 1rem .7rem .85rem; } }
.pe-ecran-barre { flex: 1; height: 6px; border-radius: 99px; background: var(--progress-bg-color); overflow: hidden; margin: 0 .35rem; }
.pe-ecran-barre i { display: block; height: 100%; background: var(--progress-fill-color); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.pe-ecran-temps { font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: .4rem; }

.pe-pile-nav { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; min-height: 44px; flex-wrap: wrap; }
.pe .pe-rond {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--pe-carte); box-shadow: inset 0 0 0 1px var(--border-color); color: var(--pe-encre-carte); --pe-accent-ici: var(--pe-accent-carte);
  transition: transform 150ms ease-out;
}
.pe-rond:active { transform: scale(.94); }
.pe-rond .pe-ico { width: 20px; height: 20px; }
.pe-pile-points { display: inline-flex; gap: 6px; padding: 0 .25rem; }
.pe-pile-points i { width: 8px; height: 8px; border-radius: 50%; background: var(--progress-bg-color); transition: transform 200ms var(--pe-courbe); }
.pe-pile-points i[data-actif="1"] { background: var(--primary-color); transform: scale(1.35); }
.pe-pile-info { color: var(--pe-doux); font-size: .9375rem; }

/* Calque : sous l'écran sur mobile, par-dessus l'écran sur grand format */
.pe-calque {
  grid-area: 2 / 1; position: relative; margin-top: .75rem; padding: 1.1rem 1.1rem 1.25rem;
  border-radius: var(--pe-rayon); background: var(--pe-carte); color: var(--pe-encre-carte); border: 1px solid var(--border-color);
  --pe-accent-ici: var(--pe-accent-carte);
  display: grid; gap: .7rem; justify-items: start; align-content: center;
  animation: pe-calque-entre 300ms var(--pe-courbe);
}
.pe-calque:empty { display: none; }
@keyframes pe-calque-entre { from { opacity: 0; transform: translateY(10px); } }
.pe-calque-titre { font-family: var(--pe-police-titre); font-weight: 800; font-size: clamp(1.3rem, 3.2vw, 2.1rem); line-height: 1.1; padding-right: 2.75rem; }
.pe-calque-texte { color: color-mix(in srgb, currentColor 82%, transparent); max-width: 46ch; }
.pe-calque-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
/* « Autre bande-annonce » sous le bouton principal : son fond se remplit pendant les 5 s avant qu'elle démarre seule. */
.pe .pe-btn-autre { position: relative; overflow: hidden; isolation: isolate; }
.pe-btn-temps { position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, currentColor 18%, transparent); transform: scaleX(0); transform-origin: left center; }
.pe .pe-calque-fermer {
  position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: inherit;
}
@media (hover: hover) and (pointer: fine) { .pe .pe-calque-fermer:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }
.pe-calque-reste { font-variant-numeric: tabular-nums; font-weight: 700; }
.pe-calque-liste { display: grid; gap: .35rem; }
.pe-calque-liste li { display: flex; gap: .5rem; align-items: flex-start; }
.pe-calque-liste .pe-ico { margin-top: .15rem; color: var(--pe-accent-ici, var(--pe-accent)); }
@media (min-width: 860px) {
  .pe-calque {
    grid-area: 1 / 1; z-index: 6; margin: 0; border: 0; border-radius: var(--pe-rayon-ecran);
    padding: clamp(1.25rem, 4vw, 3.25rem); color: var(--pe-ecran-texte); --pe-accent-ici: var(--pe-accent-ecran);
    background: color-mix(in srgb, var(--pe-ecran-fond) 93%, transparent);
  }
  .pe .pe-calque :focus-visible { outline-color: var(--pe-accent-ecran); }
}

/* Cadenas qui s'ouvre : l'état de repos est l'état ouvert */
.pe-verrou-anime { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-color); color: var(--on-primary-color); flex: none; }
.pe-verrou-anime svg { width: 30px; height: 30px; overflow: visible; }
.pe-verrou-anime .pe-anse { transform-origin: 16px 11px; transform: translateY(-2px) rotate(32deg); animation: pe-anse-ouvre 400ms 250ms var(--pe-courbe) backwards; }
.pe-verrou-anime::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--primary-color); opacity: 0; animation: pe-onde 700ms 450ms ease-out; }
@keyframes pe-anse-ouvre { from { transform: none; } }
@keyframes pe-onde { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* ---------- Formulaire d'inscription sur place ---------- */
.pe-form { display: grid; gap: .7rem; width: 100%; max-width: 30rem; }
.pe-form .pe-rang { display: grid; gap: .7rem; }
@media (min-width: 480px) { .pe-form .pe-rang { grid-template-columns: 1fr 1.35fr; } }
.pe-champ { display: grid; gap: .25rem; min-width: 0; }
.pe-champ label { margin: 0; font-size: .875rem; font-weight: 600; color: inherit; }
.pe .pe-champ input {
  width: 100%; min-height: 46px; height: auto; padding: .5rem .8rem; border-radius: 10px; font: inherit; color: inherit; box-shadow: none;
  background: color-mix(in srgb, currentColor 7%, transparent); border: 1.5px solid var(--pe-contour);
}
.pe .pe-champ input:focus-visible { outline-offset: 1px; }
.pe .pe-champ input[aria-invalid="true"] { border-color: currentColor; border-width: 2.5px; }
.pe-erreur { font-size: .875rem; font-weight: 600; display: flex; gap: .35rem; align-items: flex-start; }
.pe-form-note { font-size: .875rem; color: color-mix(in srgb, currentColor 76%, transparent); }
.pe-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Vignette d'épisode : la barre d'avancement est toujours en bas de l'image ---------- */
.pe .pe-ep { display: grid; gap: .6rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; border-radius: 12px; text-decoration: none; }
.pe-ep-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--pe-ecran-fond); color: var(--pe-ecran-texte); transition: transform 200ms var(--pe-courbe); }
@media (hover: hover) and (pointer: fine) { .pe-ep:hover .pe-ep-img { transform: translateY(-3px); } }
/* Le numéro d'un épisode ou d'une saison : une pastille ronde de fond uni, dans le coin supérieur de l'image
   (11/11/2026, demande de Sébastien). Sa taille suit `font-size` (em) : un gabarit ne change que celle-ci. */
.pe-ep-num, .pe-saison-num {
  position: absolute; left: .5rem; top: .5rem; right: auto; bottom: auto; z-index: 1; box-sizing: border-box;
  display: grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .5em; border-radius: 999px;
  background: var(--primary-color); color: var(--on-primary-color); text-shadow: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pe-ecran-fond) 55%, transparent);
  font-family: var(--pe-police-titre); font-weight: 800; font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.pe-ep-ico { position: absolute; right: .5rem; top: .5rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pe-ecran-fond) 78%, transparent); color: var(--pe-ecran-texte); }
.pe-ep-ico .pe-ico { width: 18px; height: 18px; }
.pe-ep[data-pe-ouvert="1"] .pe-ep-ico { background: var(--primary-color); color: var(--on-primary-color); }
.pe-ep[data-pe-ouvert="0"] .pe-art { opacity: .38; }
.pe-ep[data-pe-ouvert="0"] .pe-ep-num { opacity: .6; }
.pe-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--progress-bg-color); }
.pe-barre[data-vide="1"] { opacity: 0; }
.pe-barre i { display: block; height: 100%; background: var(--progress-fill-color); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.pe-ep-txt { display: grid; gap: .1rem; min-width: 0; }
.pe-ep-titre { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; color: var(--pe-encre-ici, inherit); }
.pe-ep-meta { color: var(--pe-doux-ici, var(--pe-doux)); font-size: .875rem; }
.pe-ep-etat { font-size: .875rem; font-weight: 600; color: var(--pe-accent-ici, var(--pe-accent)); line-height: 1.3; }
.pe-ep-etat-ico { display: none; }
/* « Vu » se lit d'un coup d'œil (11/11/2026) : une étiquette avec sa coche, teintée de la couleur du site,
   le texte dans l'encre du fond (lisible quel que soit le thème). */
.pe-ep[data-pe-etat="vu"] .pe-ep-etat {
  justify-self: start; display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; padding: .2rem .65rem .2rem .3rem;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary-color) 60%, transparent);
  background: color-mix(in srgb, var(--primary-color) 16%, transparent); color: var(--pe-encre-ici, var(--pe-encre)); font-weight: 700;
}
.pe-ep[data-pe-etat="vu"] .pe-ep-etat-ico { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--primary-color); color: var(--on-primary-color); }
.pe-ep[data-pe-etat="vu"] .pe-ep-etat-ico .pe-ico { width: .8rem; height: .8rem; }
/* Un épisode pas encore accessible dit pourquoi, en évidence : une étiquette en pointillé, son cadenas (12/11/2026). */
.pe-ep[data-pe-ouvert="0"] .pe-ep-etat {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; padding: .25rem .7rem .25rem .3rem;
  border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--pe-accent-ici, var(--pe-accent)) 70%, transparent);
  color: var(--pe-encre-ici, var(--pe-encre)); font-weight: 700;
}
.pe-ep[data-pe-ouvert="0"] .pe-ep-etat-ico { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--pe-accent-ici, var(--pe-accent)) 22%, transparent); color: var(--pe-accent-ici, var(--pe-accent)); }
.pe-ep[data-pe-ouvert="0"] .pe-ep-etat-ico .pe-ico { width: .75rem; height: .75rem; }
/* Le résumé : aucun gabarit ne le montre sans le décider. */
.pe-ep-desc { display: none; }
/* Survol d'une vignette (13/11/2026) : la bande-annonce muette dans l'image, un bouton de lecture animé, le titre qui grandit. */
.pe-ep-apercu { position: absolute; inset: 0; pointer-events: none; animation: pe-fondu 200ms ease-out; transition: opacity 180ms ease-out; }
.pe-ep-apercu[data-sort="1"] { opacity: 0; }
.pe-ep-apercu video, .pe-ep-apercu iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: var(--pe-ecran-fond); opacity: 0; transition: opacity 300ms ease-out; }
.pe-ep-apercu[data-pret="1"] :is(video, iframe) { opacity: 1; }
.pe-ep-apercu-jouer {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary-color); color: var(--on-primary-color);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--pe-ecran-fond) 55%, transparent); animation: pe-apercu-jouer 240ms cubic-bezier(.23, 1, .32, 1) both;
}
.pe-ep-apercu-jouer .pe-ico { width: 24px; height: 24px; }
.pe-ep-apercu-jouer::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--primary-color); animation: pe-apercu-onde 1.4s cubic-bezier(.2, .6, .4, 1) 300ms 3; }
.pe-ep[data-pe-ouvert="0"] .pe-ep-apercu-jouer { display: none; }
@keyframes pe-apercu-jouer { from { opacity: 0; transform: scale(.88); } }
@keyframes pe-apercu-onde { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.pe-ep-titre { transition: transform 220ms cubic-bezier(.23, 1, .32, 1); transform-origin: left center; }
@media (hover: hover) and (pointer: fine) { .pe-ep:hover .pe-ep-titre { transform: scale(1.04); } }

/* ---------- Carte de saison ---------- */
.pe .pe-saison { display: grid; gap: .6rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; border-radius: 12px; }
.pe-saison-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--pe-ecran-fond); color: var(--pe-ecran-texte); }
.pe-saison[data-pe-ouvert="0"] .pe-art { opacity: .38; }
.pe-saison[data-pe-ouvert="1"] .pe-ep-ico { background: var(--primary-color); color: var(--on-primary-color); }
.pe-saison-txt { display: grid; gap: .1rem; }
.pe-saison-sur, .pe-saison-meta { color: var(--pe-doux); font-size: .875rem; }
.pe-saison-titre { font-weight: 700; line-height: 1.25; }
.pe-saison-etat { font-size: .875rem; font-weight: 600; color: var(--pe-accent-ici, var(--pe-accent)); }

/* ---------- Récompense de fin de saison ---------- */
.pe-recompense { display: grid; gap: .6rem; padding: 1.1rem; border-radius: var(--pe-rayon); border: 1.5px dashed color-mix(in srgb, var(--primary-color) 60%, transparent); background: color-mix(in srgb, var(--primary-color) 7%, transparent); }
.pe-recompense[data-gagnee="1"] { border-style: solid; background: color-mix(in srgb, var(--primary-color) 14%, transparent); }
.pe-recompense-titre { font-family: var(--pe-police-titre); font-weight: 800; font-size: 1.25rem; }
.pe-recompense p:not(.pe-recompense-titre) { color: var(--pe-doux); }
.pe-recompense .pe-btn { justify-self: start; }

/* ---------- Bandeau de déblocage (non bloquant) ---------- */
.pe-bandeau {
  position: fixed; z-index: 40; left: 50%; bottom: 24px; width: min(34rem, calc(100vw - 24px));
  display: flex; align-items: center; gap: .8rem; padding: .7rem .7rem .7rem .8rem;
  border-radius: 18px; background: var(--pe-carte); color: var(--pe-encre-carte); --pe-accent-ici: var(--pe-accent-carte);
  border: 1.5px solid var(--primary-color); box-shadow: 0 18px 50px var(--pe-ombre);
  transform: translateX(-50%); animation: pe-bandeau-entre 300ms var(--pe-courbe);
}
@keyframes pe-bandeau-entre { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.96); } }
.pe-bandeau-txt { display: grid; gap: .05rem; flex: 1; min-width: 0; }
.pe-bandeau-txt strong { font-family: var(--pe-police-titre); font-size: 1.125rem; line-height: 1.15; }
.pe-bandeau-txt span { font-size: .875rem; color: var(--pe-doux-carte); user-select: text; }
.pe .pe-bandeau .pe-btn { flex: none; padding-inline: 1rem; }
.pe .pe-bandeau-fermer { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .pe .pe-bandeau-fermer:hover { background: var(--pe-trait); } }
.pe-bandeau[data-genre="info"] { border-color: var(--border-color); }
.pe-bandeau[data-genre="info"] .pe-verrou-anime { display: none; }
@media (max-width: 480px) {
  .pe-bandeau { gap: .55rem; padding: .5rem .35rem .5rem .55rem; border-radius: 16px; }
  .pe-bandeau .pe-verrou-anime { width: 44px; height: 44px; }
  .pe-bandeau .pe-verrou-anime svg { width: 24px; height: 24px; }
  .pe-bandeau-txt strong { font-size: 1rem; }
  .pe-bandeau-txt span { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Un message d'erreur se lit en entier, code de cause compris, et sur plusieurs lignes s'il le faut. */
  .pe-bandeau[data-genre="info"] { flex-wrap: wrap; }
  .pe-bandeau[data-genre="info"] .pe-bandeau-txt span { white-space: normal; }
  .pe .pe-bandeau .pe-btn { padding-inline: .8rem; font-size: .9375rem; }
}

/* Une vignette qui vient de s'ouvrir (chaque gabarit l'enrichit) */
.pe-s-ouvre .pe-ep-ico { animation: pe-pastille 300ms var(--pe-courbe); }
@keyframes pe-pastille { from { transform: scale(.8) rotate(-20deg); opacity: 0; } }

/* ---------- Fenêtres : fermables par Échap, la croix, le bouton et le fond ---------- */
.pe dialog.pe-dlg {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 12px;
  border: 0; background: var(--pe-voile); color: var(--pe-encre-carte); --pe-accent-ici: var(--pe-accent-carte);
}
.pe dialog.pe-dlg::backdrop { background: transparent; }
.pe dialog.pe-dlg[open] { display: grid; place-items: center; animation: pe-fondu 200ms ease-out; }
@keyframes pe-fondu { from { opacity: 0; } }
.pe-boite {
  position: relative; width: min(35rem, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  padding: clamp(1.1rem, 4vw, 1.9rem); border-radius: 20px;
  background: var(--pe-carte); border: 1px solid var(--border-color); box-shadow: 0 30px 80px var(--pe-ombre);
  display: grid; gap: .9rem; animation: pe-boite-entre 280ms var(--pe-courbe);
}
.pe-boite--large { width: min(52rem, 100%); }
@keyframes pe-boite-entre { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.pe-boite h2 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); padding-right: 2.75rem; }
.pe .pe-boite-fermer { position: absolute; top: .55rem; right: .55rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .pe .pe-boite-fermer:hover { background: var(--pe-trait); } }
.pe-dlg-intro { color: var(--pe-doux-carte); }
.pe-dlg-gain { display: flex; gap: .6rem; align-items: center; padding: .65rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--primary-color) 13%, transparent); font-weight: 600; }
.pe-dlg-gain .pe-ico { width: 22px; height: 22px; color: var(--pe-accent-ici, var(--pe-accent)); }
.pe-dlg-note { font-size: .875rem; color: var(--pe-doux-carte); }
.pe-dlg-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pe-dlg-liste { display: grid; gap: .4rem; }
.pe-dlg-liste li { display: flex; gap: .55rem; align-items: flex-start; }
.pe-dlg-liste .pe-ico { margin-top: .15rem; color: var(--pe-accent-ici, var(--pe-accent)); }
.pe-agenda { width: 100%; height: min(34rem, 62vh); border: 1px solid var(--border-color); border-radius: 12px; background: var(--couleur-fond-content); }

/* Les étapes, dans la fenêtre « Regardez d'abord… » */
.pe-etapes { display: grid; gap: 0; counter-reset: pe-pas; }
.pe-etapes li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: .75rem; padding-bottom: 1rem; counter-increment: pe-pas; }
.pe-etapes li::before {
  content: counter(pe-pas); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9375rem;
  background: var(--pe-carte); box-shadow: inset 0 0 0 1.5px var(--border-color); position: relative; z-index: 1;
}
.pe-etapes li::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--border-color); }
.pe-etapes li:last-child { padding-bottom: 0; }
.pe-etapes li:last-child::after { display: none; }
.pe-etapes li[data-fait="1"]::before { content: "✓"; background: var(--primary-color); color: var(--on-primary-color); box-shadow: none; }
.pe-etapes li[data-fait="1"]::after { background: var(--primary-color); }
.pe-etapes li[data-courant="1"]::before { box-shadow: inset 0 0 0 2.5px var(--pe-accent-ici, var(--pe-accent)); }
.pe-etapes strong { display: block; line-height: 1.3; padding-top: .3rem; }
.pe-etapes span { color: var(--pe-doux-carte); font-size: .9375rem; }
.pe-etapes li[data-fait="1"] strong { color: var(--pe-doux-carte); }

/* ---------- Petit écran : le bouton de lecture passe en haut à droite, le titre reste lisible ---------- */
@container (max-width: 559px) {
  .pe-ba-txt { padding: 1.5rem 4.75rem 3.35rem .85rem; }
  .pe-ba-sur, .pe-ba-duree { font-size: .8125rem; }
  .pe .pe-ecran-jouer { inset: 12px 12px auto auto; margin: 0; width: 56px; height: 56px; }
  .pe-ecran-jouer .pe-ico { width: 28px; height: 28px; }
}

/* ---------- Mouvement réduit : tout se ramène à un fondu ---------- */
@media (prefers-reduced-motion: reduce) {
  .pe *, .pe *::before, .pe *::after {
    animation-name: pe-fondu !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-property: opacity !important;
  }
  .pe-ep:hover .pe-ep-img, .pe .pe-btn:active, .pe-ep:hover .pe-ep-titre { transform: none; }
}