/* ========================================
   ANIMATIONS — Reveals directionnels au scroll,
   accents de titre, hover premium des cartes,
   micro-interactions boutons/icônes, marquee valeurs.
   Stratégie : révélations pilotées par IntersectionObserver (reveal.js),
   apparition UNE FOIS puis état visible conservé. SÉCURITÉ absolue :
   l'état caché n'est posé que si le JS s'exécute (sinon tout reste visible).
   ======================================== */

/* Easing premium dédié aux reveals (sortie soutenue, élégante). */
:root {
    --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- FADE-IN DOUX DU BODY AU CHARGEMENT ----------
   Transition de page discrète. La classe .is-ready est ajoutée
   en JS dès le boot ; sans JS le body reste visible (opacity:1). */
body { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    body.js-fade { opacity: 0; }
    body.js-fade.is-ready { opacity: 1; transition: opacity 0.5s ease; }
}

/* ---------- REVEALS DIRECTIONNELS (fallback IntersectionObserver) ----------
   État initial : invisible + transformé. La classe .visible (ajoutée en JS)
   ramène à l'état neutre. Variantes via data-reveal. Mouvement marqué (32px)
   mais élégant. */
.reveal {
    opacity: 0;
    transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal);
    will-change: opacity, transform;
}
.reveal[data-reveal="up"]    { transform: translateY(36px); }
.reveal[data-reveal="left"]  { transform: translateX(-40px); }
.reveal[data-reveal="right"] { transform: translateX(40px); }
.reveal[data-reveal="scale"] { transform: scale(0.94); }
.reveal:not([data-reveal])   { transform: translateY(32px); } /* défaut = up */

.reveal.visible {
    opacity: 1;
    transform: none;
}
/* Stagger : décalage progressif des enfants d'une grille révélée */
.reveal[data-stagger] { transition-delay: calc(var(--i, 0) * 90ms); }

/* NOTE : les révélations sont pilotées par IntersectionObserver (reveal.js),
   PAS par les CSS scroll-driven animations. Raison : une animation liée à la
   position de scroll (animation-timeline: view()) ne terminait jamais sa plage
   pour les éléments en bas de page → ils restaient figés semi-transparents
   (formulaire de contact « grisé »). L'observer révèle une fois, puis l'état
   reste visible (.visible) définitivement. */

/* ---------- ACCENT DE TITRE QUI SE TRACE ----------
   Soulignement bronze sous chaque .section-title qui passe de scaleX(0)→(1)
   à l'entrée de la section, via la classe .title-traced posée par l'observer. */
.section-title { position: relative; }
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg, var(--wood-dark), var(--wood-light), var(--wood-dark));
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.7s var(--ease-reveal) 0.15s;
}
/* Posé par l'observer quand le titre entre dans le viewport. */
.section-title.title-traced::after { transform: translateX(-50%) scaleX(1); }

/* ---------- HOVER PREMIUM DES CARTES + TILT 3D ----------
   Le tilt 3D est piloté en JS (variables --rx/--ry) sur desktop uniquement.
   On ajoute ici la perspective, le lift, le glow bronze et un état tap mobile. */
.card, .why-item, .price-card, .coach-card, .shop-item {
    transform-style: preserve-3d;
    transition:
        transform var(--speed) var(--ease),
        border-color var(--speed) var(--ease),
        background var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease);
}

/* Glow bronze au survol (desktop) — renforce l'élévation existante. */
@media (hover: hover) and (pointer: fine) {
    .card:hover, .why-item:hover, .coach-card:hover, .shop-item:hover {
        box-shadow: 0 18px 50px -16px rgba(184, 137, 92, 0.35);
    }
    .price-card:hover {
        box-shadow: 0 18px 50px -16px rgba(184, 137, 92, 0.3);
    }
    /* Tilt 3D subtil et BORNÉ (max ±5° via JS). Activé seulement quand le JS
       a marqué l'élément .tiltable et fournit --rx/--ry. */
    .tiltable {
        transform: perspective(900px)
                   rotateX(var(--rx, 0deg))
                   rotateY(var(--ry, 0deg))
                   translateY(var(--lift, 0));
        transition: transform 0.12s ease-out, border-color var(--speed) var(--ease),
                    background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
    }
    .tiltable.tilt-reset {
        transition: transform 0.5s var(--ease), border-color var(--speed) var(--ease),
                    background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
    }
}

/* État tactile (mobile) : léger enfoncement discret au tap, pas de hover. */
@media (hover: none) {
    .card:active, .why-item:active, .price-card:active,
    .coach-card:active, .shop-item:active, .gallery-item:active {
        transform: scale(0.985);
        border-color: var(--wood-dark);
    }
}

/* Les atouts « Pourquoi nous choisir » utilisent désormais une vignette photo
   (.why-media) dont le zoom + désaturation au survol sont gérés dans
   components.css, comme les cartes de disciplines. Plus d'icône SVG à animer. */

/* ---------- CTA PRINCIPAL : SHINE + PULSE TRÈS SUBTIL ----------
   Le balayage générique existe déjà sur .btn::after. On ajoute un halo
   pulsé très discret sur le bouton primaire pour attirer l'œil sans agresser. */
@media (prefers-reduced-motion: no-preference) {
    .hero-actions .btn-primary {
        animation: ctaPulse 3.2s var(--ease) infinite;
    }
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 137, 92, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(184, 137, 92, 0.10); }
}
/* Le pulse s'efface au survol pour laisser place au lift + shine. */
.hero-actions .btn-primary:hover { animation: none; }

/* ---------- BANDE MARQUEE DES VALEURS ---------- */
.marquee {
    background: var(--black);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 26px 0;
    overflow: hidden;
    position: relative;
}
.marquee::before, .marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 12%;
    z-index: 2;
    pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--black), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--black), transparent); }

.marquee-track {
    display: flex;
    width: max-content;
    gap: 0;
    /* Défilement régulier, constant et lisible (indépendant du scroll). */
    animation: marqueeScroll 45s linear infinite;
    will-change: transform;
}
/* Pause au survol pour permettre la lecture. */
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
    font-family: var(--font-display);
    font-size: clamp(28px, 6vw, 64px);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--white);
    padding: 0 28px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 28px;
}
.marquee-item::after {
    content: '·';
    color: var(--wood-light);
    font-size: 0.7em;
}
.marquee-item:nth-child(odd) { color: var(--wood-light); }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- PARALLAXE LÉGÈRE (sections) ----------
   Variable --parallax pilotée en JS (transform translateY). */
.parallax-img { will-change: transform; }

/* ========================================
   PREFERS-REDUCED-MOTION : on atténue / désactive TOUT
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .scroll-reveal { opacity: 1 !important; transform: none !important; }
    .section-title::after { transform: translateX(-50%) scaleX(1) !important; }
    .marquee-track { animation: none !important; }
    .hero-bg { animation: none !important; transform: scale(1.05) !important; }
    .hero-actions .btn-primary { animation: none !important; }
    .tiltable { transform: none !important; }
    body.js-fade { opacity: 1 !important; }
}