/* ==========================================================================
   GJS · MOUVEMENT
   Un seul langage : expo.out, 0,6 à 1,2 s. Tout est animé en transform et
   opacity. Trois profils posés sur <html data-motion="desktop|mobile|reduced">.
   Sans JavaScript (ou si le JS échoue : .has-motion est retirée après 3 s),
   tout reste visible et statique.
   ========================================================================== */

/* ---- Lenis (défilement fluide) ------------------------------------------ */

html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- États initiaux (avant que motion.js ne prenne la main) ------------- */

/* Avant le JS : masqué en opacité seulement (reste focusable et lisible par les lecteurs d'écran) */
.has-motion [data-anim]:not(.is-anim-ready) { opacity: 0; }

/* Masques des lignes (SplitText) : un peu de marge pour les accents et le marqueur */
.anim-line-mask {
  padding: 0.14em 0.16em 0.06em;
  margin: -0.14em -0.16em -0.06em;
}

.anim-line { will-change: transform; }

/* ---- Barre de progression de lecture ------------------------------------ */

.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-header) + 2);
  height: 4px;
  pointer-events: none;
}

.read-progress span {
  display: block;
  height: 100%;
  background: var(--lime);
  border-bottom: 1px solid var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- Header : se cache en descendant, revient en remontant -------------- */

.header {
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  transition: transform 0.8s var(--ease-expo);
}

.header.is-hidden { transform: translateY(calc(-100% - 6px)); }
.is-menu-open .header { transform: none; background: var(--cream); }

/* ---- Liens : trait de marqueur qui se dessine au survol ----------------- */

.link,
.footer__col a,
.footer__link,
.legal__toc a {
  position: relative;
  text-decoration-color: transparent !important;
}

.link::after,
.footer__col a::after,
.footer__link::after,
.legal__toc a::after {
  content: "";
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  bottom: calc(50% - 0.75em);
  z-index: -1;
  height: 0.5em;
  background: var(--lime);
  border-radius: 0.06em 0.3em 0.1em 0.25em;
  transform: scaleX(0) rotate(-1.5deg);
  transform-origin: right center;
  transition: transform 0.6s var(--ease-expo);
  pointer-events: none;
}

.link { text-decoration-color: currentColor !important; }
.link:hover { text-decoration-color: transparent !important; }

.link:hover::after,
.footer__col a:hover::after,
.footer__link:hover::after,
.legal__toc a:hover::after,
.link:focus-visible::after {
  transform: scaleX(1) rotate(-1.5deg);
  transform-origin: left center;
}

.link,
.link-arrow,
.footer__col a,
.footer__link,
.legal__toc a { isolation: isolate; }

.is-dark .link:hover { color: var(--ink); }
.is-dark .link::after { bottom: calc(50% - 0.7em); height: 1.3em; border-radius: 3px; }

/* ---- Titres des pages intérieures : révélés au masque, en CSS pur ---------- */
/* Sans attendre le JS (premier affichage et Lighthouse préservés). */

.mask {
  display: block;
  overflow: clip;
  padding-block: 0.14em 0.06em;
  margin-block: -0.14em -0.06em;
}

.mask__in { display: block; }

@keyframes mask-up { from { transform: translateY(112%) rotate(2deg); } }
@keyframes marker-in { from { transform: scaleX(0) rotate(-1.5deg); } }

.has-motion:not([data-motion="reduced"]) .mask__in {
  animation: mask-up 1.1s var(--ease-expo) 0.08s both;
}

.has-motion:not([data-motion="reduced"]) .mask__in .hl::before {
  transform-origin: left center;
  animation: marker-in 0.9s var(--ease-expo) 0.55s both;
}

/* ---- Trait de marqueur qui se dessine (scaleX, jamais de largeur animée) --- */

.has-motion .hl.is-marker::before {
  transform: scaleX(0) rotate(-1.5deg);
  transform-origin: left center;
  transition: transform 0.9s var(--ease-expo);
}

/* Sur fond noir, le mot est noir sur le trait : il doit être lisible en 0,6 s */
.has-motion .is-dark .hl.is-marker::before { transition-duration: 0.6s; }

.has-motion .hl.is-marker.is-marked::before { transform: scaleX(1) rotate(-1.5deg); }

/* Compteur : largeur finale réservée par motion.js, chiffres alignés à droite */
[data-count] {
  display: inline-block;
  text-align: right;
}

/* ---- Décors street en parallaxe (core/parallax.js) ------------------------- */
/* Placés dans les marges vides des sections (jamais sur un texte), sous le contenu,
   et seulement là où les marges sont vraiment libres (1280 px et plus). */

.deco {
  position: absolute;
  z-index: 0;
  top: var(--top, auto);
  right: var(--right, auto);
  bottom: var(--bottom, auto);
  left: var(--left, auto);
  display: none;
  width: var(--size, 120px);
  height: var(--size, 120px);
  overflow: visible;
  pointer-events: none;
  transform: rotate(var(--rot, 0deg));
}

.deco--arrow { width: var(--size, 150px); height: calc(var(--size, 150px) * 0.69); }
.deco--scribble { width: var(--size, 170px); height: calc(var(--size, 170px) * 0.41); }
.deco--tape { width: var(--size, 150px); height: calc(var(--size, 150px) * 0.33); }
.deco--zigzag { width: var(--size, 150px); height: calc(var(--size, 150px) * 0.27); }
.deco--star { width: var(--size, 96px); height: var(--size, 96px); }

.section > .wrap { position: relative; z-index: 1; }

@media (min-width: 1280px) {
  .deco { display: block; }
}

/* ---- Rideau de transition entre pages ------------------------------------ */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--lime);
  border-top: var(--border) solid var(--ink);
  transform: translateY(101%);
  visibility: hidden;
  pointer-events: none;
}

.curtain__logo {
  display: inline-block;
  padding: 14px 22px 6px;
  background: var(--ink);
  color: var(--lime);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--cream);
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  transform: rotate(-4deg);
}

.is-leaving .curtain,
.is-curtain-in .curtain {
  visibility: visible;
  pointer-events: auto;
}

/* Arrivée par transition : le rideau couvre le premier affichage puis se lève
   tout seul en CSS (0,3 s), sans attendre le JavaScript : sur une connexion
   lente, la page n'est jamais cachée plus longtemps. */
.is-curtain-in .curtain {
  transform: none;
  animation: curtain-out 0.3s var(--ease-expo) 0.04s forwards;
}

.is-curtain-in .curtain__logo {
  animation: curtain-logo-out 0.26s var(--ease-expo) forwards;
}

@keyframes curtain-out {
  to { transform: translateY(-101%); visibility: hidden; }
}

@keyframes curtain-logo-out {
  to { transform: translateY(-60%) rotate(-4deg); opacity: 0; }
}

/* ---- Cartes 3D (inclinaison, relief, reflet, ombre opposée) ------------- */

.svc-card[data-tilt],
[data-tilt]:not(html) { perspective: 1000px; }

[data-tilt-body] {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(2px);
}

.tilt-glare::before {
  content: "";
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--cream) 46%, transparent) 0%, color-mix(in srgb, var(--cream) 14%, transparent) 28%, transparent 54%);
  transform: translate(var(--gx, 0%), var(--gy, 0%));
}

/* Sur le verso noir, reflet plus discret : le texte crème garde un contraste AA */
.svc-card.is-flipped .tilt-glare::before {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--cream) 22%, transparent) 0%, color-mix(in srgb, var(--cream) 8%, transparent) 28%, transparent 54%);
}

/* ---- Pause des animations (WCAG 2.2.2), dans le menu plein écran ---------
   Arrête la vidéo du hero, sa scène WebGL et les bandeaux qui défilent. */

.menu__pause {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s, color 0.2s;
}

.menu__pause:hover { color: var(--lime); text-decoration-color: currentColor; }

.menu__pause-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.menu__pause-icon::before,
.menu__pause-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 14px;
  background: var(--lime);
  border-radius: 1px;
}

.menu__pause-icon::before { left: 1px; }
.menu__pause-icon::after { right: 1px; }

html.is-paused .menu__pause-icon::before {
  left: 2px;
  width: 0;
  height: 0;
  background: none;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--lime);
}

html.is-paused .menu__pause-icon::after { display: none; }

/* Sans JavaScript (ou sans GSAP) et en mouvement réduit, rien ne défile tout seul */
html:not(.has-motion) .menu__foot-col--pause,
html[data-motion="reduced"] .menu__foot-col--pause { display: none; }

/* ---- Mouvement réduit ---------------------------------------------------- */

[data-motion="reduced"] .header { transition: none; }

/* ---- Impression : tout le contenu, à sa place, sans effet ------------------ */

@media print {
  [data-anim],
  [data-anim="cascade"] > *,
  [data-anim="svc-grid"] > *,
  .svc-card__badge,
  .anim-line,
  .anim-char {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .tilt-glare { display: none !important; }

  /* Contenus de la phase 2 qui attendent le scroll */
  [data-anim="photo"] img {
    opacity: 1 !important;
    transform: none !important;
  }

  .footer__play,
  .deco,
  .svc-float { display: none !important; }

  /* Cartes phares : recto puis verso, à plat */
  .svc-card.is-flippable .svc-card__inner,
  .svc-card.is-flippable .svc-card__face--back { transform: none !important; }
  .svc-card.is-flippable .svc-card__face { grid-area: auto; backface-visibility: visible; }
  .svc-card.is-flippable .svc-card__inner { grid-template-rows: auto auto; }

  .curtain,
  .read-progress,
  .marquees { display: none !important; }
}