/* ==========================================================================
   ROSE CONNECT — animations du site
   --------------------------------------------------------------------------
   1. Transitions entre pages (View Transitions natives + repli JS)
   2. Apparition des sections au défilement
   3. Animations de textes (titres mot à mot, sur-titres)
   4. Navigation interne (barre de lecture, sommaire actif, cible)
   5. Composants dynamiques (quiz, assistant, formulaires)

   Toutes ces animations dépendent de la classe html.anim, posée dans le <head>
   seulement si le visiteur n'a pas demandé à réduire les animations.
   Si js/animations.js ne démarre pas, la classe est retirée : tout reste visible.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --reveal-dist: 28px;
}

/* 1. Transitions entre pages ---------------------------------------------------- */

/* Navigateurs compatibles (servi en http/https) : transition native entre documents. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: rc-header; }
::view-transition-group(rc-header) { animation-duration: 0s; }
::view-transition-old(root) { animation: rc-vt-out .3s ease both; }
::view-transition-new(root) { animation: rc-vt-in .6s var(--ease-out) both; }

@keyframes rc-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes rc-vt-in { from { opacity: 0; transform: translateY(18px); } }

/* Repli (file://, navigateurs plus anciens) : voile rose sous l'en-tête. */
html.anim.is-leaving main,
html.anim.is-leaving .site-footer {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .28s ease, transform .3s ease;
}
html.anim.is-leaving body::after,
html.anim.page-entering body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 25; /* sous l'en-tête (30) : il reste visible pendant la transition */
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, #fff 0%, var(--rose-clair) 70%);
}
html.anim.is-leaving body::after { animation: rc-veil-in .3s ease both; }
html.anim.page-entering body::after { animation: rc-veil-out .65s ease .05s both; }

@keyframes rc-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-veil-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* 2. Apparition des sections ----------------------------------------------------- */

/* Liste des blocs animés (doit correspondre à REVEAL dans js/animations.js). */
html.anim :where(
  .section__head, .info-block__grid > div, .notice, .cta-band, .empty-state, .form-panel,
  .stat, .card, .accordion details, .split > *, .page-hero__inner > *, .toc li,
  .check-list li, .filters, .chat, .data-note, .sources, .results-meta
):not(:is(.hero *, .site-footer *, dialog *, .form-status *, .quiz__feedback *, .chat__log *, .intro *)) {
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.anim :where(
  .section__head, .info-block__grid > div, .notice, .cta-band, .empty-state, .form-panel,
  .stat, .card, .accordion details, .split > *, .page-hero__inner > *, .toc li,
  .check-list li, .filters, .chat, .data-note, .sources, .results-meta
):not(.is-in):not(:is(.hero *, .site-footer *, dialog *, .form-status *, .quiz__feedback *, .chat__log *, .intro *)) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-dist), 0);
}

/* Variantes de mouvement */
html.anim .check-list li:not(.is-in) { transform: translate3d(-18px, 0, 0); }
html.anim .split > figure:not(.is-in),
html.anim .page-hero__inner > figure:not(.is-in) { transform: translate3d(0, 0, 0); }
html.anim .stat:not(.is-in) { transform: translate3d(0, 18px, 0) scale(.97); }

/* Photographies : dévoilement doux (recadrage + léger zoom arrière) */
html.anim :is(.split, .page-hero__inner) > figure img {
  transition: clip-path 1.3s var(--ease-out), transform 1.6s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 80ms);
}
html.anim :is(.split, .page-hero__inner) > figure:not(.is-in) img {
  clip-path: inset(10% 6% 10% 6% round 18px);
  transform: scale(1.08);
}
html.anim :is(.split, .page-hero__inner) > figure.is-in img { clip-path: inset(0 0 0 0 round 18px); transform: none; }

html.anim .photo-card img { transition: transform 1.4s var(--ease-out); }
html.anim .photo-card:not(.is-in) img { transform: scale(1.08); }

/* Bandeau d'appel : le dégradé glisse à l'apparition */
html.anim .cta-band { background-size: 160% 100%; background-position: 100% 0; transition-property: opacity, transform, background-position; transition-duration: .8s, .9s, 1.8s; }
html.anim .cta-band.is-in { background-position: 0 0; }

/* Sections teintées : la couleur de fond monte doucement */
html.anim :is(.section--tint, .section--neutral) { transition: background-color 1s ease; }

/* Accueil sans introduction : le texte principal entre en cascade */
html.anim:not(.has-intro):not(.site-revealing) .hero__content > * { animation: rc-rise .9s var(--ease-out) both; }
html.anim:not(.has-intro):not(.site-revealing) .hero__content > :nth-child(2) { animation-delay: .1s; }
html.anim:not(.has-intro):not(.site-revealing) .hero__content > :nth-child(3) { animation-delay: .22s; }
html.anim:not(.has-intro):not(.site-revealing) .hero__content > :nth-child(4) { animation-delay: .34s; }
html.anim:not(.has-intro):not(.site-revealing) .hero__figure { animation: rc-fade .9s ease .2s both; }

@keyframes rc-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
@keyframes rc-fade { from { opacity: 0; } }

/* 3. Animations de textes ---------------------------------------------------------- */

/* Titres découpés mot à mot par js/animations.js. Masqués jusqu'au découpage pour éviter un flash. */
html.anim main :is(h1, h2):not(.is-split):not(:is(.hero *, dialog *, .quiz__question, .sr-only, .intro *, .moderation-item *)) { opacity: 0; }

.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Marge intérieure compensée : les accents (î, É, À) et jambages ne sont pas rognés. */
  padding: .22em .04em .14em 0;
  margin: -.22em -.04em -.14em 0;
}
.w__in {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms + var(--d, 0ms));
}
.is-in .w__in, .is-in.w__in { transform: none; }

/* Sur-titres : l'espacement des lettres se resserre */
html.anim :is(.section__head, .page-hero__inner > div, .info-block__grid > div, .split > div) .eyebrow {
  transition: letter-spacing 1.2s var(--ease-out), opacity 1s ease;
  transition-delay: calc(var(--d, 0ms) + 120ms);
}
html.anim :is(.section__head, .page-hero__inner > div, .info-block__grid > div, .split > div):not(.is-in) .eyebrow {
  letter-spacing: .34em;
  opacity: 0;
}

/* Chiffres clés : la valeur se révèle après la carte */
html.anim .stat__value { transition: opacity .7s ease, transform .9s var(--ease-out); transition-delay: calc(var(--d, 0ms) + 200ms); }
html.anim .stat:not(.is-in) .stat__value { opacity: 0; transform: translate3d(0, 10px, 0); }

/* 4. Navigation interne --------------------------------------------------------------- */

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rose-soutenu), #e7699a);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.toc a { transition: background-color .25s, color .25s, border-color .25s; }
.toc a.is-active { background: var(--rose-soutenu-fonce); border-color: var(--rose-soutenu-fonce); color: var(--blanc); }

/* Section ciblée par un lien d'ancre : le titre se souligne */
html.anim :target :is(h2, h3):first-of-type,
html.anim :target > .container > h2 {
  background: linear-gradient(var(--rose-soutenu), var(--rose-soutenu)) no-repeat 0 100% / 0% 3px;
  animation: rc-underline 1s var(--ease-out) .5s forwards;
}
@keyframes rc-underline { to { background-size: 100% 3px; } }

/* 5. Composants dynamiques ------------------------------------------------------------- */

/* Quiz : chaque question et ses réponses entrent en cascade */
html.anim .is-swapping .quiz__question { animation: rc-rise .55s var(--ease-out) both; }
html.anim .quiz__option { animation: rc-rise .5s var(--ease-out) both; }
html.anim .quiz__option:nth-child(3) { animation-delay: .06s; }
html.anim .quiz__option:nth-child(4) { animation-delay: .12s; }
html.anim .quiz__option:nth-child(5) { animation-delay: .18s; }
html.anim .quiz__mark { animation: rc-fade .4s ease both; }
html.anim :is(.quiz__feedback, .form-status) .notice { animation: rc-rise .45s var(--ease-out) both; }
html.anim .quiz__score { animation: rc-pop .7s var(--ease-out) both; }
@keyframes rc-pop { from { opacity: 0; transform: scale(.8); } }

/* Assistant : les messages glissent depuis leur côté */
html.anim .msg--bot { animation: rc-msg-left .45s var(--ease-out) both; }
html.anim .msg--user { animation: rc-msg-right .4s var(--ease-out) both; }
@keyframes rc-msg-left { from { opacity: 0; transform: translate3d(-14px, 6px, 0); } }
@keyframes rc-msg-right { from { opacity: 0; transform: translate3d(14px, 6px, 0); } }

/* Fiche détaillée d'un événement */
html.anim dialog.modal[open] { animation: rc-modal .45s var(--ease-out) both; }
html.anim dialog.modal[open]::backdrop { animation: rc-fade .35s ease both; }
@keyframes rc-modal { from { opacity: 0; transform: translateY(24px) scale(.98); } }

/* FAQ : la réponse se déploie */
html.anim .accordion details[open] .accordion__body { animation: rc-rise .45s var(--ease-out) both; }

/* Menu mobile */
html.anim .site-nav.is-open { animation: rc-drop .35s var(--ease-out) both; }
html.anim .site-nav.is-open li { animation: rc-rise .4s var(--ease-out) both; }
html.anim .site-nav.is-open li:nth-child(n+2) { animation-delay: .03s; }
html.anim .site-nav.is-open li:nth-child(n+4) { animation-delay: .06s; }
html.anim .site-nav.is-open li:nth-child(n+6) { animation-delay: .09s; }
html.anim .site-nav.is-open li:nth-child(n+8) { animation-delay: .12s; }
html.anim .site-nav.is-open li:nth-child(n+10) { animation-delay: .15s; }
@keyframes rc-drop { from { opacity: 0; transform: translateY(-8px); } }

/* Mouvements réduits, impression : tout est visible, sans mouvement ------------------ */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
@media print {
  html.anim * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}