/* ═══════════════════════════════════════════════════════════════════════
   Socle d'animations Proxymite — la part CSS
   ═══════════════════════════════════════════════════════════════════════

   Depuis que GSAP pilote les animations, ce fichier ne décrit plus d'états de
   départ : GSAP les pose lui-même, et deux sources qui se disputent le même
   élément produisent des sauts au chargement.

   Il ne reste ici que ce que GSAP ne peut pas faire — des structures. Un
   bandeau qui défile a besoin d'être en ligne et sans retour ; une piste
   horizontale a besoin que ses panneaux ne se compriment pas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Texte découpé : chaque mot dans sa fenêtre, pour qu'il monte
      depuis une ligne invisible plutôt que d'apparaître en place. */
.decoupe {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.decoupe > span { display: inline-block; will-change: transform; }

/* ── Piste horizontale. La largeur des panneaux est fixée ici : en la
      laissant au contenu, ils se compriment et l'effet disparaît. */
[data-horizontal] {
  display: flex;
  flex-wrap: nowrap;
}
[data-horizontal] > * {
  flex: 0 0 100vw;
  min-width: 100vw;
}
@media (max-width: 899px) {
  /* Sur téléphone le doigt fait le travail : on rend la piste défilable
     et on cale les panneaux, plutôt que de confisquer le geste. */
  [data-horizontal] {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-horizontal]::-webkit-scrollbar { display: none; }
  [data-horizontal] > * { flex-basis: 88vw; min-width: 88vw; scroll-snap-align: start; }
}

/* ── Bandeau sans fin. Le contenu est dupliqué par le script ; il doit
      rester sur une seule ligne pour que la boucle soit invisible. */
[data-bandeau] {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
[data-bandeau] > * {
  display: flex;
  flex: 0 0 auto;
  will-change: transform;
}

/* ── Barre de progression de lecture. */
.progression-lecture {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent, currentColor);
  z-index: 999;
  pointer-events: none;
}

/* ── En-tête réactif. Les deux classes sont posées par le script ; leur
      apparence appartient à la charte de chaque site, qui peut les
      redéfinir. */
[data-entete] {
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 420ms, padding 420ms;
}
[data-entete].cachee { transform: translateY(-105%); }

/* ── Survol des visuels. */
.zoom-doux { overflow: hidden; }
.zoom-doux img { transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.zoom-doux:hover img { transform: scale(1.06); }

/* ── Le repère de défilement du premier écran. */
.indice-defilement { display: inline-flex; animation: respire 2.4s ease-in-out infinite; }
@keyframes respire {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(9px); opacity: 0.55; }
}

/* ═══ Sans mouvement : ni GSAP, ni animation, tout reste lisible ═══
   La classe est posée par le script quand GSAP manque ou quand la personne a
   demandé moins de mouvement. Rien n'est caché : c'est le point important, un
   site qui reste blanc parce qu'un script n'a pas chargé est un site perdu. */
@media (prefers-reduced-motion: reduce) {
  [data-entete] { transition: none; }
  .zoom-doux img { transition: none; }
  .indice-defilement { animation: none; }
}
.sans-mouvement [data-horizontal] { overflow-x: auto; }
.sans-mouvement .progression-lecture { display: none; }