/* ==========================================================================
   OBAÏA Paris — États d’animation
   Tout est conditionné à .anim (ajoutée seulement si l’appareil n’a pas
   « réduire les animations »). Sans JS ou sans GSAP : tout reste visible.
   ========================================================================== */

/* Preloader ---------------------------------------------------------------- */
.preloader { display: none; }
.preload .preloader { display: block; position: fixed; inset: 0; z-index: 200; }
.preload body { overflow: hidden; }
.preloader__strip {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--i) * 100% / 6); width: calc(100% / 6 + 1px);
  background: var(--brun); overflow: hidden;
  will-change: transform;
}
.preloader__logo {
  position: absolute; top: 50%; left: calc((3 - var(--i)) * (100% - 1px));
  width: 168px; max-width: none; transform: translate(-50%, -50%);
}
@media (max-width: 767px) { .preloader__logo { width: 124px; } }

/* États de départ (avant l’entrée à l’écran) ------------------------------- */
.anim [data-anim],
.anim [data-tirage],
.anim [data-lines],
.anim .hero__cta,
.anim .hero__card,
.anim .hero__media img { opacity: 0; }
.anim [data-reveal] { clip-path: inset(0 0 100% 0); }
.anim [data-reveal="up"] { clip-path: inset(100% 0 0 0); }

/* Lignes de titre qui montent depuis un masque */
.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line__in { display: block; will-change: transform; }

/* Cartes empilées (Pourquoi nous choisir) ---------------------------------- */
.avantage { transition: transform .7s var(--ease), filter .7s var(--ease); }
.avantage.is-covered { transform: scale(.95); filter: brightness(.9); }
@media (max-width: 1023px) {
  .avantage.is-covered { transform: scale(.97); filter: none; }
}

/* Toucher : léger assombrissement (pas de survol sur mobile) -------------- */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; transition: opacity .15s ease; }
  a:active, button:active { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}