/* =====================================================================
   B612 — HERO animé « Le Petit Prince »
   Couche décorative placée en fond de .b612-hero (derrière le titre et la recherche).
   Elle REMPLACE l'image fixe du thème (hero-b612.webp, plus téléchargée) :
   le fond animé (fond.webp, préchargé) s'affiche directement, sans fondu.
   En attendant l'image : dégradé de la couleur du ciel. Sans JS, fond.webp
   (balise <img>) s'affiche quand même, immobile.
   ===================================================================== */
.b612-hero.b612-hero--anim {
  background-image: linear-gradient(180deg, #01061a 0%, #021028 100%);
  background-color: #01061a;
}

.b612-hero-anim {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.b612-hero-anim *, .b612-hero-anim *::before, .b612-hero-anim *::after { box-sizing: border-box; }

/* Scène 16:9 cadrée comme le fond du thème : background-size: cover; background-position: center */
.pp-stage {
  --w: max(100cqw, calc(100cqh * 1.7768));
  position: absolute;
  left: calc((100cqw - var(--w)) * .5);
  top:  calc((100cqh - var(--w) / 1.7768) * .5);
  width: var(--w);
  aspect-ratio: 1672 / 941;
  --mx: 0; --my: 0; --sy: 0;
}

.pp-layer {
  position: absolute;
  transform: translate3d(
    calc(var(--mx) * var(--depth, .5) * -24px),
    calc(var(--my) * var(--depth, .5) * -14px + var(--sy) * var(--depth, .5) * -0.3px),
    0);
  will-change: transform;
}
.pp-layer img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.pp-l-bg, .pp-l-rose { inset: 0; }
/* Fond, personnages, écharpe, queue : affichés directement (plus de fondu d'apparition) */
.pp-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Personnages (même position que dans le fond) */
.pp-l-persos { left: 46.05%; top: 43.04%; width: 27.27%; }

/* Écharpe et queue (même position que dans l'image) */
.pp-l-scarf { left: 59.629%; top: 52.285%; width: 11.124%; aspect-ratio: 186 / 91; }
.pp-l-tail  { left: 68.6%;   top: 65.462%; width: 4.964%;  aspect-ratio: 83 / 140; }
.pp-wave { display: block; width: 100%; height: 100%; }

/* Petite lune et anneaux en 8 (même position que dans l'image) */
.pp-l-huit { left: 40.191%; top: 25.292%; width: 22.069%; }
.pp-l-lune { inset: 0; pointer-events: none; }
.pp-lune {
  position: absolute;
  left: 60.9%; top: 33.1%;              /* un peu à droite de sa position d'origine, vers la grosse planète */
  width: 3.183%;                        /* 35 px d'origine, agrandie 3 fois de 15 % (disque = 74 % de la boîte) */
  translate: -50% -50%;
}
.pp-lune .pp-enter { animation-delay: .9s; }
.pp-f-moon { animation: pp-float-moon 8s ease-in-out infinite; animation-delay: -2s; }
/* Lune redessinée en vectoriel (img/lune.svg, 9 nov. 2026) : l'ancienne image de 35 px,
   agrandie, était floue et gardait des bouts d'anneaux (contour dédoublé).
   Lueur douce autour du disque : */
.pp-lune { filter: drop-shadow(0 0 5px rgba(255, 190, 100, .55)); }
@keyframes pp-float-moon { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(5deg); } }

/* Positions des planètes (calculées depuis l'image d'origine) */
.pp-l-houses { left: 58.25%; top: 0%;     width: 22.91%; }
.pp-l-moon   { left: 45.28%; top: 12.65%; width: 8.55%; }
.pp-l-ringL  { left: 24.64%; top: 22.10%; width: 11.66%; }
.pp-l-small  { left: 33.25%; top: 45.48%; width: 9.81%; }
.pp-l-ringR  { left: 75.84%; top: 39.74%; width: 10.77%; }

/* Apparition des planètes, l'une après l'autre */
.pp-enter { opacity: 0; animation: pp-enter 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.pp-l-houses .pp-enter { animation-delay: .5s; }
.pp-l-moon   .pp-enter { animation-delay: .8s; }
.pp-l-ringL  .pp-enter { animation-delay: 1s; }
.pp-l-small  .pp-enter { animation-delay: 1.2s; }
.pp-l-ringR  .pp-enter { animation-delay: 1.4s; }

/* Comètes : 3 traînées superposées, de plus en plus longues et pâles, pour un dégradé */
.pp-l-orbits { inset: 0; }
.pp-orbits { width: 100%; height: 100%; display: block; overflow: visible; opacity: 0; animation: pp-fade 2s ease 1.5s forwards; }
.pp-tail {
  fill: none; stroke: #ffe6a8; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--L) 3000;
}
.pp-t1 { --L: 25;  stroke-width: 2;   opacity: .9; }
.pp-t2 { --L: 60;  stroke-width: 1.4; opacity: .45; }
.pp-t3 { --L: 110; stroke-width: 1;   opacity: .2; }
.pp-small .pp-tail { stroke-width: 1; }
/* Comète qui part de la lune et suit le grand arc (pp-o1) : traînées plus fines
   (le 1er trait paraissait épais) et effacées plus tôt (data-tailfade dans hero-anim.php) */
.pp-c1 .pp-t1 { stroke-width: 1.1; opacity: .75; }
.pp-c1 .pp-t2 { stroke-width: .9;  opacity: .35; }
.pp-comet { fill: #fff4d2; }
/* Chaque comète apparaît en fondu au départ et s'éteint en fin de trajectoire : la boucle ne se voit pas */
.pp-comet-g { opacity: 0; }   /* position, traînée et fondu sont calculés par hero.js */

/* Rose : lumière contenue dans la cloche, qui s'intensifie doucement puis retombe.
   La zone a la forme de la cloche (dôme) et coupe tout ce qui dépasse : aucun halo à l'extérieur. */
.pp-l-rose { --breath: 5.5s; }
.pp-rose-dome {
  position: absolute;
  left: 46.9%; top: 57.5%;            /* cloche dans l'image : x 784-893, y 541-700 */
  width: 6.5%; aspect-ratio: 109 / 159;
  border-radius: 50% 50% 10% 10% / 36% 36% 6% 6%;
  overflow: hidden;
  pointer-events: none;
}
.pp-rose-dome > div { position: absolute; inset: 0; mix-blend-mode: screen; }
/* Lumière diffuse qui remplit le verre, centrée sur la fleur */
.pp-rose-light {
  background: radial-gradient(60% 42% at 49% 32%, rgba(255, 205, 160, .55) 0%, rgba(255, 165, 115, .22) 45%, transparent 100%);
  animation: pp-rose-breath var(--breath) ease-in-out infinite;
}
/* Petit cœur lumineux sur la fleur */
.pp-rose-core {
  background: radial-gradient(22% 15% at 49% 32%, rgba(255, 236, 210, .8) 0%, rgba(255, 180, 150, .3) 55%, transparent 100%);
  animation: pp-rose-breath var(--breath) ease-in-out infinite;
}
@keyframes pp-rose-breath {
  0%, 100% { opacity: .15; }
  50%      { opacity: 1; }
}

/* Poussière d'étoiles (générée par hero.js) */
.pp-dust { position: absolute; inset: 0; pointer-events: none; }
.pp-mote {
  position: absolute; border-radius: 50%;
  background: #ffe1a1; box-shadow: 0 0 6px 1px rgba(255, 210, 130, .8);
  opacity: 0;
  animation: pp-mote var(--t, 6s) linear var(--delay, 0s) infinite;
}

/* Mouvements continus */
.pp-float  { animation: pp-float 9s ease-in-out infinite; }
.pp-f-slow { animation-duration: 12s; animation-delay: -3s; }
.pp-f-fast { animation-duration: 7s;  animation-delay: -1s; }
.pp-f-alt  { animation-duration: 10s; animation-delay: -6s; }
.pp-f-spin { animation: pp-float-spin 14s ease-in-out infinite; }

@keyframes pp-bg-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-fade   { to { opacity: 1; } }
@keyframes pp-enter  {
  from { opacity: 0; transform: translateY(-20px) scale(.9); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes pp-float      { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes pp-float-spin { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes pp-pulse      { 0%,100% { opacity: .6; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes pp-mote {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 10px), -110px) scale(1); }
}

/* Accessibilité : mouvement réduit (sauf si le visiteur relance l'animation avec le bouton : .pp-motion-ok) */
@media (prefers-reduced-motion: reduce) {
  .b612-hero-anim:not(.pp-motion-ok) *, .b612-hero-anim:not(.pp-motion-ok) *::before, .b612-hero-anim:not(.pp-motion-ok) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }
  .b612-hero-anim:not(.pp-motion-ok) .pp-mote { display: none; }
}

/* =====================================================================
   PAUSE (RGAA 13.8) — bouton .pp-toggle, piloté par b612-hero-anim.js
   - .is-paused : toutes les animations CSS figées sur place ;
   - .pp-still  : Hero affiché d'emblée en pause → planètes et comètes
                  montrées directement, sans leur entrée.
   ===================================================================== */
.b612-hero-anim.is-paused *,
.b612-hero-anim.is-paused *::before,
.b612-hero-anim.is-paused *::after { animation-play-state: paused !important; }

.b612-hero-anim.pp-still .pp-enter,
.b612-hero-anim.pp-still .pp-orbits { animation: none !important; opacity: 1; }

/* ---------- Bouton ---------- */
.pp-toggle {
  --pp-toggle-size: 44px;
  position: absolute;
  right: 64px;            /* à gauche de l'indicateur vertical « Ma médiathèque » (bord droit) */
  bottom: 32px;
  z-index: 11;

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--pp-toggle-size);
  padding: 0;

  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(1, 6, 26, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;

  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.pp-toggle[hidden] { display: none; }

/* Survol : seulement avec une souris (au doigt, l'état « survolé » resterait collé après l'appui) */
@media (hover: hover) {
  .pp-toggle:hover {
    background: rgba(40, 54, 127, .78);
    border-color: rgba(255, 213, 0, .75);
  }
}
.pp-toggle:focus-visible {
  background: rgba(40, 54, 127, .78);
}
.pp-toggle:active { transform: scale(.94); }

/* Icône : pause et lecture superposées, on passe de l'une à l'autre en fondu + rotation légère */
.pp-toggle__icon {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--pp-toggle-size) - 2px);
  height: calc(var(--pp-toggle-size) - 2px);
}
.pp-toggle__icon svg {
  position: absolute;
  inset: 0;
  margin: auto;
  fill: currentColor;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pp-toggle__play { opacity: 0; transform: scale(.6) rotate(-90deg); }
.pp-toggle.is-paused .pp-toggle__pause { opacity: 0; transform: scale(.6) rotate(90deg); }
.pp-toggle.is-paused .pp-toggle__play  { opacity: 1; transform: none; color: #ffd500; }

/* Libellé qui se déploie vers la gauche au survol / focus (le lecteur d'écran lit aria-label) */
.pp-toggle__hint {
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
  font-family: var(--b612-next-font-body, "Filson Pro", sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  opacity: 0;
  transition: max-width .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, padding .3s cubic-bezier(.2, .7, .2, 1);
}
.pp-toggle__hint-play { display: none; }
.pp-toggle.is-paused .pp-toggle__hint-pause { display: none; }
.pp-toggle.is-paused .pp-toggle__hint-play  { display: inline; }

.pp-toggle:focus-visible .pp-toggle__hint {
  max-width: 220px;
  padding-left: 18px;
  opacity: 1;
}
@media (hover: hover) {
  .pp-toggle:hover .pp-toggle__hint {
    max-width: 220px;
    padding-left: 18px;
    opacity: 1;
  }
}

/* Tablette / mobile : un peu plus près du bord, pas de libellé (pas de survol au doigt) */
@media (max-width: 767px) {
  .pp-toggle { right: 16px; bottom: 16px; }   /* l'indicateur est masqué sur mobile */
}
@media (hover: none) {
  .pp-toggle__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-toggle, .pp-toggle__icon svg, .pp-toggle__hint { transition: none; }
}