/* =================================================================
   NELSIA GRONDIN — Portfolio
   Direction artistique : « Galerie Olive & Or »
   ================================================================= */

:root {
  /* Couleurs */
  --paper:     #EFECEC;
  --paper-2:   #E6E1D8;
  --ink:       #25302A;
  --pine:      #3F5147;
  --olive:     #737F49;
  --gold:      #EAC347;
  --gold-deep: #BE9A2E;
  --forest:    #20282313;          /* lignes */
  --line:      rgba(63,81,71,.16);
  --dark:      #222A25;

  /* Typo */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, system-ui, sans-serif;

  /* Échelle */
  --maxw: 1500px;
  --pad:  clamp(1.25rem, 5vw, 5.5rem);

  --e: cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
/* Images TOUJOURS visibles par défaut (aucun masquage JS). Le fond ne sert que de
   remplissage discret le temps que l'image se charge. */
img.lzy { background: var(--paper-2); }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
::selection { background: var(--gold); color: var(--pine); }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Curseur personnalisé ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: width .3s var(--e), height .3s var(--e), background .3s, opacity .3s;
  display: none;
  mix-blend-mode: normal;
}
.cursor__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pine); opacity: 0; transition: opacity .25s;
}
.cursor.is-media {
  width: 78px; height: 78px; background: rgba(234,195,71,.92);
}
.cursor.is-media .cursor__label { opacity: 1; }
.cursor.is-link { width: 38px; height: 38px; background: rgba(115,127,73,.35); }
/* Curseur personnalisé désactivé : on conserve le curseur natif du système
   (toujours visible, zones cliquables claires). L'élément .cursor reste masqué. */
.cursor { display: none !important; }

/* ---------- Barre de progression ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 8800;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--olive), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 9800; background: var(--dark);
  display: grid; place-items: center; color: var(--paper);
}
.loader__inner {
  width: min(82vw, var(--maxw)); display: flex; justify-content: space-between;
  align-items: flex-end; padding: 0 var(--pad); font-family: var(--serif);
}
.loader__name { font-size: clamp(1.5rem, 5vw, 3rem); font-weight: 300; letter-spacing: .01em; }
.loader__count { font-size: clamp(1.5rem, 5vw, 3rem); color: var(--gold); }
.loader__count i { font-style: normal; }

/* =================================================================
   NAVIGATION
   ================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem,2.4vw,1.7rem) var(--pad);
  mix-blend-mode: difference; color: #fff;
  transition: transform .4s var(--e);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); }
.nav__mark {
  font-size: 1rem; letter-spacing: .05em; border: 1px solid currentColor;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%;
}
.nav__brandtext { font-size: 1.05rem; font-weight: 400; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem,2.2vw,2.4rem); font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; }
.nav__links a { position: relative; padding-bottom: 2px; }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0; transition: transform .35s var(--e);
}
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); }
.nav__cta { border: 1px solid currentColor; border-radius: 50px; padding: .5rem 1.1rem; }
.nav__cta:hover { background: #fff; color: #000; }
.nav__burger { display: none; background: none; border: 0; flex-direction: column; gap: 6px; padding: 8px; cursor: pointer; }
.nav__burger span { display: block; width: 26px; height: 1.5px; background: #fff; transition: .3s var(--e); }

@media (max-width: 760px) {
  .nav { mix-blend-mode: normal; color: var(--paper); }
  .nav:not(.is-open) { color: #fff; mix-blend-mode: difference; }
  .nav__burger { display: flex; z-index: 12; }
  .nav__links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 1.8rem;
    background: var(--dark); font-size: 1.1rem; transform: translateX(100%);
    transition: transform .5s var(--e); z-index: 11;
  }
  .nav.is-open .nav__links { transform: translateX(0); }
  .nav.is-open .nav__burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav.is-open .nav__burger span { background: var(--paper); }
  .nav__cta { color: var(--gold); border-color: var(--gold); }
}

/* =================================================================
   HERO
   ================================================================= */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.hero__media { position: absolute; inset: -8% 0; will-change: transform; }
.hero__media img { width: 100%; height: 116%; object-fit: cover; object-position: center 35%; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(34,42,37,.55) 0%, rgba(34,42,37,.12) 35%, rgba(34,42,37,.55) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(32,40,35,.7), transparent 60%);
}
.hero__content {
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(5rem, 13vh, 9rem);
  color: var(--paper); z-index: 3;
}
.hero__eyebrow {
  font-size: clamp(.72rem,1.4vw,.9rem); letter-spacing: .28em; text-transform: uppercase;
  margin-bottom: clamp(1rem,3vw,1.8rem); color: var(--gold); font-weight: 500;
}
.hero__title { font-family: var(--serif); font-weight: 300; line-height: .92;
  font-size: clamp(3.6rem, 15vw, 13rem); letter-spacing: -.02em; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__title em { color: var(--gold); font-weight: 300; }
.hero__tagline {
  margin-top: clamp(1.2rem,3vw,2rem); max-width: 46ch; font-size: clamp(1rem,1.5vw,1.22rem);
  font-weight: 300; color: rgba(239,236,236,.9);
}
.hero__scroll {
  position: absolute; right: var(--pad); bottom: clamp(5rem,13vh,9rem); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--paper);
  writing-mode: vertical-rl; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
}
.hero__scrollline { width: 1px; height: 70px; background: linear-gradient(var(--gold), transparent); }
.hero__loc {
  position: absolute; left: var(--pad); top: clamp(5.5rem,12vh,7rem); z-index: 3; color: rgba(239,236,236,.7);
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
}
@media (max-width: 700px){ .hero__scroll{ display:none; } }

/* =================================================================
   SECTIONS — communs
   ================================================================= */
.section-index {
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--olive);
  font-weight: 500; margin-bottom: 1.4rem;
}
.section-index--light { color: var(--gold); }

/* =================================================================
   MANIFESTE
   ================================================================= */
.manifesto { position: relative; background: var(--dark); color: var(--paper); overflow: hidden;
  padding: clamp(6rem,16vh,12rem) var(--pad); }
.manifesto__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .14; filter: saturate(.7); z-index: 0;
}
.manifesto__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }
.manifesto .section-index { color: var(--gold); }
.manifesto__text {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem,4.6vw,4rem);
  line-height: 1.12; letter-spacing: -.01em; max-width: 18ch;
}
.manifesto__text span { display: block; }
.manifesto__text em { color: var(--gold); }
.manifesto__cols {
  display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,3rem);
  margin-top: clamp(3rem,8vw,6rem); border-top: 1px solid rgba(239,236,236,.18); padding-top: clamp(2rem,4vw,3rem);
}
.manifesto__cols h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--gold); margin-bottom: .6rem; }
.manifesto__cols p { font-weight: 300; font-size: .98rem; color: rgba(239,236,236,.82); max-width: 32ch; }
@media (max-width: 760px){ .manifesto__cols { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(1rem,2.5vw,1.6rem) 0; background: var(--paper); }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; will-change: transform; }
.marquee__track span { font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem,3.5vw,2.6rem); color: var(--pine); white-space: nowrap; }
.marquee__track span::after { content: "✦"; margin-left: 2.5rem; color: var(--gold); font-style: normal; font-size: .7em; vertical-align: middle; }

/* =================================================================
   RÉALISATIONS
   ================================================================= */
.work { padding: clamp(5rem,12vh,9rem) var(--pad) clamp(3rem,8vh,6rem); max-width: var(--maxw); margin: 0 auto; }
.work__title, .craft__title { font-family: var(--serif); font-weight: 300; line-height: .95;
  font-size: clamp(2.6rem,8vw,6.5rem); letter-spacing: -.02em; }
.work__title em, .craft__title em { color: var(--olive); }

.projects { display: flex; flex-direction: column; gap: clamp(6rem,16vh,13rem); margin-top: clamp(3rem,9vh,7rem); }

.project { position: relative; }
.project__head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1rem,3vw,3rem);
  align-items: end; padding-bottom: clamp(2rem,5vw,3.5rem); border-bottom: 1px solid var(--line);
}
.project__num { font-family: var(--serif); font-size: clamp(.9rem,1.2vw,1rem); color: var(--gold-deep); }
.project__title {
  grid-row: 2; font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(2rem,5.2vw,4.4rem); margin-top: .4rem;
}
.project__meta { grid-row: 2; align-self: end; display: grid; gap: .45rem; list-style: none; font-size: .9rem; }
.project__meta li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .6rem; color: var(--ink); }
.project__meta span { color: var(--olive); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem;
  padding-top: .18rem; }
.project__intro { grid-column: 1 / -1; grid-row: 3; max-width: 58ch; font-size: clamp(1rem,1.4vw,1.18rem);
  font-weight: 300; color: var(--ink); margin-top: clamp(1.2rem,2.5vw,1.8rem); }

/* Galerie d'un projet */
.project__gallery {
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: clamp(1.5rem,3.5vw,4rem) clamp(1rem,2.5vw,3rem);
  align-items: start; margin-top: clamp(2.5rem,6vw,5rem);
}
.m { position: relative; grid-column: span 6; }
.m.is-wide { grid-column: span 9; }
.m.is-tall { grid-column: span 5; }
.m.is-mid  { grid-column: span 6; }
.m.is-right { justify-self: end; }
.m.is-left  { justify-self: start; }
.m:nth-child(3n+2) { margin-top: clamp(2rem,7vw,7rem); }
.m__frame {
  position: relative; overflow: hidden; background: var(--paper-2);
  aspect-ratio: var(--r, 1); box-shadow: 0 18px 50px -28px rgba(34,42,37,.5);
}
/* Le <picture> en bloc + l'<img> qui porte elle-même son dimensionnement (comme
   Savoir-faire) : width:100% + aspect-ratio + height:auto. La hauteur de l'image ne
   dépend donc PLUS de la hauteur du .m__frame (fini les cadres à hauteur 0). */
.m__frame picture { display: block; }
.m__frame img, .m__frame video { width: 100%; height: auto; aspect-ratio: var(--r, 1); object-fit: cover; will-change: transform; }
.m__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2; background: rgba(239,236,236,.92);
  color: var(--pine); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: .35rem .7rem; border-radius: 50px;
}
.m figcaption { margin-top: .8rem; font-size: .82rem; color: var(--olive); letter-spacing: .01em; }
/* Bouton "Voir le site" (sections digital) */
.project__link { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
/* Cadre "aperçu à venir" (site sans capture pour l'instant) */
.m__frame--ph { display: grid; place-items: center; text-align: center;
  border: 1px dashed rgba(63,81,71,.35); background: var(--paper-2); box-shadow: none; }
.m__ph { padding: 2rem; }
.m__ph span { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.1rem,2vw,1.5rem); color: var(--pine); }
.m__ph small { display: block; margin-top: .6rem; font-size: .78rem; letter-spacing: .04em; color: var(--olive); }
@media (max-width: 899px){
  .project__head { grid-template-columns: 1fr; }
  .project__link { grid-row: auto; }
  .project__meta { grid-row: auto; margin-top: 1rem; }
  .project__title { grid-row: auto; }
  .project__intro { grid-row: auto; }
  .project__gallery { grid-template-columns: repeat(6,1fr); }
  .m, .m.is-wide, .m.is-tall, .m.is-mid { grid-column: span 6; }
  .m:nth-child(3n+2) { margin-top: 0; }
}

/* =================================================================
   SAVOIR-FAIRE
   ================================================================= */
.craft { background: var(--paper-2); padding: clamp(5rem,12vh,9rem) var(--pad); }
.craft__head { max-width: var(--maxw); margin: 0 auto; }
.craft__text { max-width: 48ch; margin-top: 1.4rem; font-size: clamp(1rem,1.4vw,1.18rem); font-weight: 300; }
.craft__grid {
  max-width: var(--maxw); margin: clamp(2.5rem,6vw,4.5rem) auto 0;
  display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.5rem,4vw,4rem); align-items: start;
}
.craft__item:nth-child(2) { margin-top: clamp(2rem,8vw,7rem); }
.craft__item picture { display: block; overflow: hidden; background: var(--paper); box-shadow: 0 18px 50px -30px rgba(34,42,37,.5); }
.craft__item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; will-change: transform; }
.craft__item figcaption { margin-top: .8rem; font-size: .82rem; color: var(--olive); }
@media (max-width: 760px){ .craft__grid { grid-template-columns: 1fr; } .craft__item:nth-child(2){ margin-top:0; } }

/* =================================================================
   À PROPOS
   ================================================================= */
.about { padding: clamp(5rem,12vh,9rem) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.about__grid {
  display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.5rem,3vw,2.5rem);
  align-items: start; margin-top: 1rem;
}
.about__portrait { grid-column: 1 / span 5; overflow: hidden; }
.about__portrait img { width: 100%; aspect-ratio: 1/1.3; object-fit: cover; will-change: transform; box-shadow: 0 20px 60px -30px rgba(34,42,37,.55); }
.about__body { grid-column: 7 / span 6; align-self: center; }
.about__body h2 { font-family: var(--serif); font-weight: 300; line-height: .98; font-size: clamp(2.2rem,6vw,4.2rem); letter-spacing: -.02em; }
.about__body h2 em { color: var(--olive); }
.about__body p { margin-top: 1.3rem; max-width: 46ch; font-weight: 300; font-size: clamp(1rem,1.35vw,1.15rem); }
.about__v { grid-column: span 3; overflow: hidden; }
.about__v--1 { grid-column: 1 / span 3; margin-top: clamp(1rem,3vw,3rem); }
.about__v--2 { grid-column: 4 / span 3; margin-top: clamp(3rem,7vw,6rem); }
.about__perso { grid-column: 8 / span 5; margin-top: clamp(1rem,3vw,2.5rem); overflow: hidden; }
.about__v--3 { grid-column: 8 / span 3; margin-top: clamp(1rem,4vw,3rem); }
.about__nelsia { grid-column: 1 / span 5; margin-top: clamp(1rem,4vw,3rem); overflow: hidden; }
.about__v video, .about__perso img, .about__nelsia img { width: 100%; object-fit: cover; box-shadow: 0 18px 50px -30px rgba(34,42,37,.5); }
.about__v video { aspect-ratio: 9/16; }
.about__perso img { aspect-ratio: 3/4; will-change: transform; }
.about__nelsia img { aspect-ratio: 3/4; will-change: transform; }
.about__v figcaption, .about__nelsia figcaption { margin-top: .7rem; font-size: .78rem; color: var(--olive); }
@media (max-width: 900px){
  .about__grid { grid-template-columns: repeat(2,1fr); }
  .about__portrait { grid-column: 1 / -1; }
  .about__body { grid-column: 1 / -1; }
  .about__v--1 { grid-column: 1 / span 1; }
  .about__v--2 { grid-column: 2 / span 1; margin-top: 0; }
  .about__perso { grid-column: 1 / -1; }
  .about__nelsia { grid-column: 1 / -1; }
  .about__v--3 { grid-column: 1 / span 1; margin-top: clamp(1rem,4vw,1.5rem); }
}

/* =================================================================
   CONTACT
   ================================================================= */
.contact { background: var(--dark); color: var(--paper); text-align: center;
  padding: clamp(6rem,16vh,12rem) var(--pad); }
.contact .section-index { margin-bottom: 2rem; }
.contact__title { font-family: var(--serif); font-weight: 300; line-height: .98;
  font-size: clamp(2.6rem,9vw,7rem); letter-spacing: -.02em; }
.contact__title .line { display: block; overflow: hidden; }
.contact__title .line > span { display: block; }
.contact__title em { color: var(--gold); }
.contact__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(2.5rem,6vw,4rem); }
.contact__meta { margin-top: 2.5rem; font-size: .9rem; color: rgba(239,236,236,.7); display: flex; gap: 1rem; justify-content: center; }
.contact__meta a:hover { color: var(--gold); }

/* ---------- Boutons ---------- */
.btn { display: inline-block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 1.05rem 2rem; border-radius: 50px; font-weight: 500; transition: .35s var(--e); border: 1px solid transparent; }
.btn--gold { background: var(--gold); color: var(--dark); }
.btn--gold:hover { background: var(--paper); transform: translateY(-2px); }
.btn--line { border-color: rgba(239,236,236,.4); color: var(--paper); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }
.btn--ghost { border-color: var(--pine); color: var(--pine); margin-top: 2rem; }
.btn--ghost:hover { background: var(--pine); color: var(--paper); }

/* =================================================================
   FOOTER
   ================================================================= */
.footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 2rem var(--pad); font-size: .8rem; letter-spacing: .04em; color: var(--olive); background: var(--paper); }
.footer__mid { font-family: var(--serif); font-style: italic; }
.footer__top:hover { color: var(--gold-deep); }

/* =================================================================
   ÉTATS D'ANIMATION (contenu caché UNIQUEMENT si .gsap-ready : GSAP+ScrollTrigger
   chargés et animations activées. Sinon tout est visible par défaut.)
   ================================================================= */
/* Hero : titre + accroches révélés par la timeline d'intro (au chargement, sans ScrollTrigger). */
html.gsap-ready .hero__title .line > span { transform: translateY(110%); }
html.gsap-ready .reveal-up { opacity: 0; transform: translateY(38px); }

/* Révélations au défilement pilotées par la classe .is-revealed (ajoutée par initReveals()
   sur l'événement scroll natif + getBoundingClientRect) et animées par transition CSS.
   INDÉPENDANT de ScrollTrigger : le défilement natif déclenche toujours, donc les images
   se révèlent quoi qu'il arrive. Un filet window.load force la visibilité en dernier recours. */
html.gsap-ready [data-reveal-up] { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--e), transform .9s var(--e); }
html.gsap-ready [data-reveal-up].is-revealed { opacity: 1; transform: none; }
html.gsap-ready [data-reveal-line] { opacity: 0; transform: translateY(110%); transition: opacity .9s var(--e), transform .9s var(--e); }
html.gsap-ready [data-reveal-line].is-revealed { opacity: 1; transform: none; }
html.gsap-ready .contact__title .line > span { transform: translateY(110%); transition: transform 1s var(--e); }
html.gsap-ready .contact__title.is-revealed .line > span { transform: none; }
/* MÉDIAS (galeries, Savoir-faire, À propos) : AUCUN masquage de révélation.
   Les images/vidéos sont visibles par CSS pur dès qu'elles sont chargées, sans dépendre
   d'aucun JavaScript ni d'aucune classe .is-revealed. (Choix volontaire : on préfère
   l'affichage garanti à l'animation de révélation, qui posait problème en conditions réelles.) */

/* Accessibilité : pas d'animation si l'utilisateur le demande.
   (Les états cachés ci-dessus ne sont de toute façon jamais appliqués dans ce mode :
   la classe .gsap-ready n'est pas ajoutée quand "reduced motion" est actif.) */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  body.has-cursor * { cursor: auto !important; }
  .manifesto__bg, .marquee__track { animation: none !important; }
  img.lzy { transition: none !important; }
}