/* ═══════════════════════════════════════════════════════════════════════
   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; }

/* ── Section pleine largeur ─────────────────────────────────────────────
   Le motif « je sors du conteneur centré » se réécrit mal : la variante
   width:100vw + left:50% + margin-left:-50vw casse dès qu'une autre classe
   du même élément pose un `margin:` raccourci — le raccourci remet les
   marges latérales à zéro, le left:50% subsiste seul, et la page se met à
   défiler latéralement de la moitié de sa largeur.

   La règle est donc posée ici, une fois, et rendue inécrasable. Un
   !important dans une feuille de socle n'est pas un aveu de faiblesse :
   c'est la seule façon de garantir qu'aucune feuille de site ne casse
   une structure. */
[class~="pleine-largeur"] {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw) !important;
  position: relative;
  left: auto !important;
  right: auto !important;
}