/* ==========================================================================
   Accueil : BIVO vivant
   BIVO en grand, directement dans le noir, sans cadre. La colonne de droite
   (.accueil-scene) reçoit une scène absolue qui sert de conteneur de taille.
   La figure est calée sur la ligne du regard (les yeux à la hauteur du milieu
   du titre) et sa largeur est plafonnée par la colonne ; la tête et les
   oreilles restent entières, le buste peut se fondre dans les bords.
   Le mouvement (respiration, clignements) est dessiné dans le canvas par
   js/bivo-live.js ; l'image ouverte reste dessous en secours.
   ========================================================================== */

#accueil .accueil-stage {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
  /* Le buste peut déborder de la colonne : il s'y fond sur les bords (6 % de la
     largeur), loin des oreilles. La tête, elle, tient toujours dans la colonne. */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 6%, #000 94%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 6%, #000 94%, rgba(0, 0, 0, 0) 100%);
}

/* ---- Figure ----
   La figure est la partie utile de la photo (lignes 296 à 1402 sur 1402 : la
   marge transparente au-dessus de la tête est retirée). Les yeux sont à 25,41 %
   de sa hauteur ; sa hauteur et sa position se déduisent de la ligne du regard
   (--accueil-regard, css/page.css) : yeux sur cette ligne, tête entière sous
   l'en-tête. Sa largeur est plafonnée par la colonne (--accueil-cadre) : si le
   plafond joue, la figure descend pour garder les yeux sur la ligne. */
#accueil .accueil-figure {
  --accueil-col: min(calc(100vw - 2 * var(--gutter)), var(--page-max));
  --accueil-figure-h: min(calc(var(--accueil-regard) / 0.2541), calc(var(--accueil-col) * 0.46 * var(--accueil-cadre) / 100 * 1106 / 1122));
  position: absolute;
  left: 50%;
  top: calc(var(--accueil-regard) - var(--accueil-figure-h) * 0.2541);
  translate: -50% 0;
  height: var(--accueil-figure-h);
  width: calc(var(--accueil-figure-h) * 1122 / 1106);
  pointer-events: none;
}
@supports (container-type: size) {
  #accueil .accueil-figure {
    --accueil-figure-h: min(calc(var(--accueil-regard) / 0.2541), calc(var(--accueil-cadre) * 1cqw * 1106 / 1122));
  }
}

/* Aucune vignette ni dégradé derrière BIVO : la photo détourée repose sur le noir pur. */

/* Canvas animé et image de secours : la photo complète (1122 x 1402), calée
   pour que la ligne 296 coïncide avec le haut de la figure ; fondu vers le noir
   sur les derniers 8 % du bas (la coupe du buste) et court fondu sur les côtés. */
#accueil .accueil-figure .bivo-live,
#accueil .accueil-figure .bivo-photo {
  position: absolute;
  left: 0;
  top: calc(-100% * 296 / 1106);
  width: 100%;
  height: calc(100% * 1402 / 1106);
  max-width: none;
  display: block;
  object-fit: fill;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 92%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 6%, #000 94%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 92%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 6%, #000 94%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* L'image de secours (yeux ouverts) apparaît dès son propre chargement ; le
   canvas se fond par-dessus une fois la première image dessinée (mêmes
   pixels : aucun saut), puis l'image de secours est retirée. Elle reste
   seule si le canvas échoue. */
#accueil .accueil-figure .bivo-live { opacity: 0; transition: opacity 500ms var(--ease-out); }
#accueil .accueil-figure .bivo-live.is-ready { opacity: 1; }
#accueil .accueil-figure .bivo-photo { opacity: 0; }
#accueil .accueil-figure .bivo-photo.is-loaded,
#accueil .accueil-figure.is-ready .bivo-photo { opacity: 1; }
#accueil .accueil-figure .bivo-photo.is-hidden { visibility: hidden; }
#accueil .accueil-figure .bivo-photo[hidden] { display: none; }

/* ---- Contrôle de pause : discret, accessible ---- */
#accueil .accueil-pause {
  position: absolute;
  right: var(--page-inset, var(--gutter));
  bottom: 20px;
  z-index: 2;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#accueil .accueil-pause:hover { color: var(--fg); border-color: var(--line-strong); }
#accueil .accueil-pause[data-etat="pause"] { color: var(--fg); border-color: var(--line-strong); }
/* Focus blanc, comme partout ailleurs (un contour brun serait invisible sur le pelage) */
#accueil .accueil-pause:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; color: var(--fg); }
/* Cible tactile de 44 px au toucher */
@media (pointer: coarse) {
  #accueil .accueil-pause { display: inline-flex; align-items: center; height: auto; min-height: 44px; padding: 0 14px; }
}

/* ---- Petits écrans ----
   Le cadrage (147 % de la colonne) est défini dans css/page.css. Sur téléphone,
   BIVO est petit : le bouton quitte la figure et prend place sous l'action
   secondaire, dans la colonne des actions (déplacé par js/accueil.js ; ordre de
   tabulation inchangé : bouton, lien, pause). */
@media (max-width: 760px) {
  #accueil .accueil-actions .accueil-pause { position: static; display: inline-flex; align-items: center; height: auto; min-height: 44px; padding: 0 16px; background: transparent; font-size: 12px; }
  /* Emplacement réservé (44 px) tant que le script n'a pas placé le bouton : aucun décalage à l'insertion */
  #accueil .accueil-actions .accueil-pause-place { display: block; min-height: 44px; }
  #accueil .accueil-actions .accueil-pause-place[hidden] { display: none; }
}

/* ---- Mouvement réduit : apparition directe (la boucle est en pause) ---- */
@media (prefers-reduced-motion: reduce) {
  #accueil .accueil-figure .bivo-live,
  #accueil .accueil-figure .bivo-photo { transition: none; }
}
/* Sur ordinateur, le bouton est dans la figure : l'emplacement réservé n'existe pas */
@media (min-width: 761px) { #accueil .accueil-pause-place { display: none; } }