/* La vie de la page : ce que js/vie.js a besoin de voir en CSS (docs/menu-vie.md).
   Les couleurs viennent de chaque site : --teinte et --encre sur les sections, --lueur, --halo,
   --poussiere, --trame sur .vie-fond ou :root. Rien ici ne donne une allure : les tailles, les formes
   et les placements se règlent en bas de css/styles.css, pour que deux sites ne se ressemblent pas. */

/* ---------- Le fond ----------
   <div class="vie-fond" aria-hidden="true"> tout de suite après <body> : fixé derrière la page. */
.vie-fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vie-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Poussière ou fumée posée sur un seul élément (data-poussiere hors de .vie-fond) : par-dessus son contenu,
   sans gêner les clics. L'élément est en position relative ou absolute. */
.vie-canvas--local { z-index: 1; pointer-events: none; }

/* Sections teintées : pleines par défaut, transparentes quand le fond glisse de l'une à l'autre */
[data-teinte] { background-color: var(--teinte); color: var(--encre); --ink: var(--encre); --bg: var(--teinte); }
html.vie-teintes body { background: transparent; }
html.vie-teintes [data-teinte] { background-color: transparent; }
/* Sur la section, pas sur ses enfants : une animation GSAP d'un enfant lirait 0 comme sa valeur de départ
   et le garderait invisible, même une fois la section à l'écran */
html.vie-teintes [data-teinte] { opacity: 0; transition: opacity .55s ease; }
html.vie-teintes [data-teinte].teinte-active { opacity: 1; }

/* Lueurs : <span class="vie-lueur" style="--x:80%;--y:20%;--taille:60vw"> dans .vie-fond */
.vie-lueur {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: var(--taille, 60vw); aspect-ratio: 1; margin: calc(var(--taille, 60vw) / -2) 0 0 calc(var(--taille, 60vw) / -2);
  background: radial-gradient(closest-side, var(--lueur, #fff), transparent);
  opacity: var(--force, .3); will-change: transform;
  animation: vie-derive var(--duree, 24s) ease-in-out infinite alternate;
}
@keyframes vie-derive {
  from { translate: -6% -4%; scale: 1; }
  to { translate: 8% 7%; scale: 1.18; }
}
html.vie-en-pause .vie-lueur { animation-play-state: paused; }

/* Bouton pause de ce qui vit en continu (js/vie.js), une fois, juste après le lien d'évitement :
   <button class="vie-pause" type="button" data-vie-pause aria-label="Mettre les animations du fond en pause"><i class="ph ph-pause" aria-hidden="true"></i></button>
   Pas dans un site cinéma : .pause-boucles s'en charge. Caché quand rien ne vit (mouvement réduit) ou menu ouvert. */
.vie-pause {
  position: fixed; z-index: 85; right: 16px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--bg); background: color-mix(in srgb, var(--ink) 72%, transparent);
}
.vie-pause:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html:not(.vie-active) .vie-pause, body.menu-open .vie-pause { display: none; }
@media (max-width: 1080px) {   /* au bout du bouton d'action collant, pas dessus */
  .vie-pause { right: var(--gutter); bottom: calc(.65rem + 1px + env(safe-area-inset-bottom, 0px)); }
  :root:has(.vie-pause) .mobile-cta { padding-right: calc(var(--gutter) + 52px); }
}

/* Grain, sans mix-blend-mode : il forcerait à recomposer tout l'écran à chaque image du fond.
   Son noir et son blanc restent discrets sur toutes les teintes. <div class="vie-fond" data-grain>, ou data-grain sur une section (en position: relative) */
[data-grain]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: var(--grain, .07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Trame : <span class="vie-trame"> dans .vie-fond, qui n'apparaît qu'autour de la souris */
.vie-trame {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background-image:
    linear-gradient(var(--trame, #fff) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame, #fff) 1px, transparent 1px);
  background-size: var(--maille, 64px) var(--maille, 64px);
  -webkit-mask-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), #000, transparent);
  mask-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), #000, transparent);
}
@media (hover: hover) and (pointer: fine) { .vie-active .vie-trame { opacity: var(--force-trame, .2); } }

/* ---------- Souris ---------- */
.vie-halo {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0;
  width: var(--taille-halo, 520px); aspect-ratio: 1; margin: calc(var(--taille-halo, 520px) / -2) 0 0 calc(var(--taille-halo, 520px) / -2);
  background: radial-gradient(closest-side, var(--halo, #fff), transparent);
  mix-blend-mode: var(--melange-halo, screen); transition: opacity .4s; will-change: transform;
}

html.vie-sans-fleche, html.vie-sans-fleche a, html.vie-sans-fleche button, html.vie-sans-fleche label,
html.vie-sans-fleche summary, html.vie-sans-fleche [data-tirer], html.vie-sans-fleche input[type="range"] { cursor: none; }
html.vie-sans-fleche input:not([type="range"]), html.vie-sans-fleche textarea { cursor: text; }
.vie-curseur {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0;
  transition: opacity .2s; will-change: transform;
}
.vie-curseur.est-vu { opacity: 1; }
.vie-curseur.sur-champ { opacity: 0; }
.vie-curseur__forme {
  position: absolute; left: 0; top: 0; display: block; translate: -50% -50%;
  width: var(--curseur, 14px); height: var(--curseur, 14px); border-radius: 50%;
  background: var(--curseur-couleur, #fff); mix-blend-mode: difference;
  transition: width .28s var(--ease, ease), height .28s var(--ease, ease), border-radius .28s, background .2s;
}
.vie-curseur--anneau .vie-curseur__forme { background: transparent; border: 2px solid var(--curseur-couleur, #fff); width: 30px; height: 30px; }
.vie-curseur--croix .vie-curseur__forme {
  border-radius: 0; width: 22px; height: 22px;
  clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%);
}
.vie-curseur.sur-lien .vie-curseur__forme { width: 48px; height: 48px; }
.vie-curseur.parle .vie-curseur__forme { width: 88px; height: 88px; mix-blend-mode: normal; clip-path: none; border-radius: 50%; }
.vie-curseur__texte {
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap;
  font-size: .95rem; font-weight: 600; color: var(--curseur-texte, #000); opacity: 0; transition: opacity .15s;
}
.vie-curseur.parle .vie-curseur__texte { opacity: 1; }

/* Objet pendu (data-pendu) : son point d'attache et sa pente au repos, aussi en mouvement réduit et au doigt */
[data-pendu] { transform-origin: var(--pendu-origine, 50% 0); rotate: var(--pendu-repos, -2deg); will-change: transform; }

/* Reflet d'un objet qui penche : ajouter .a-reflet à l'élément qui a data-penche */
[data-penche] { will-change: transform; transform-style: preserve-3d; }
.a-reflet { position: relative; overflow: hidden; }
.a-reflet::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--reflet-x, 50%) var(--reflet-y, 50%), rgba(255, 255, 255, .24), transparent 70%);
}
@media (hover: hover) { .a-reflet:hover::before { opacity: 1; } }

/* L'image qui suit la souris sur une liste */
.vie-suit {
  position: fixed; left: 0; top: 0; z-index: 35; pointer-events: none;
  width: var(--suit-largeur, 340px); aspect-ratio: var(--suit-format, 4 / 5);
  margin: calc(var(--suit-largeur, 340px) * -.6) 0 0 calc(var(--suit-largeur, 340px) * -.5);
  will-change: transform;
}
.vie-suit img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: inset(100% 0 0 0); transition: clip-path .5s var(--ease, ease);
}
.vie-suit.est-vue img { clip-path: inset(0); }

/* ---------- Défilement ---------- */
/* Un titre attend d'être coupé pour ne pas se montrer deux fois, jamais plus de 2 s si le script manque */
@keyframes vie-titre-attente { to { visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  .js [data-titre]:not(.titre-pret) { visibility: hidden; animation: vie-titre-attente 0s 2s forwards; }
}
[data-empile] > * { position: relative; }
[data-zoom] { overflow: hidden; }
[data-trace] path { fill: none; }
.vie-active [data-titre] { font-kerning: none; }
[data-titre] .split-mask, [data-titre] [class*="-mask"] { padding-bottom: .1em; margin-bottom: -.1em; }

/* Bandeau continu : .bandeau-actif est posé par js/vie.js, et une seule ligne qui s'enroule sans lui */
[data-bandeau].bandeau-actif { display: flex; overflow: hidden; }
[data-bandeau].bandeau-actif > * { flex: none; min-width: 100%; }

/* Rang de côté : au doigt tant que la scène retenue ne joue pas */
[data-cote] { overflow: hidden; }
[data-cote-piste] { display: flex; width: max-content; }
html:not(.vie-scenes) [data-cote] { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
html:not(.vie-scenes) [data-cote-piste] > * { scroll-snap-align: start; }

/* ---------- Ce que le visiteur manipule ---------- */

/* Avant/après */
[data-avant-apres] { position: relative; overflow: hidden; --position: 50%; }
[data-avant-apres] img { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-avant-apres].est-actif [data-avant] { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
[data-avant-apres] input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
[data-avant-apres]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--position); width: 3px; translate: -50% 0;
  background: var(--filet-avant-apres, #fff); pointer-events: none;
}
[data-avant-apres]:has(input:focus-visible)::after { width: 6px; outline: 2px solid currentColor; }

/* Galerie à tirer */
[data-tirer] { overflow-x: auto; cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
[data-tirer]::-webkit-scrollbar { display: none; }
[data-tirer].est-tire { cursor: grabbing; user-select: none; }
[data-tirer] img { -webkit-user-drag: none; }

/* Questionnaire par étapes */
.etapes__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.etapes__ou { margin: 0; }

/* ---------- Moins d'animations demandé : le décor s'arrête, le contenu reste ---------- */
@media (prefers-reduced-motion: reduce) {
  .vie-lueur { animation: none; }
  .js [data-titre] { visibility: visible; }
  .vie-suit, .vie-halo, .vie-curseur, .vie-trame { display: none; }
}
@media print {
  .vie-fond, .vie-halo, .vie-curseur, .vie-suit, .vie-pause { display: none; }
  /* Le fond qui glisse n'est pas imprimé, et seule la section à l'écran montrait son contenu */
  html.vie-teintes [data-teinte] { opacity: 1; background-color: var(--teinte); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}