@charset "utf-8";
/**
 * ================================================================
 * FICHIER : __AQ_motion.css
 * EMPLACEMENT : 2027_B2B/_modules/__AQ_motion/__AQ_motion.css
 * SHORT_DESC : Styles du socle d'animations piloté par attributs data-motion
 * DESCRIPTION : États initiaux et états révélés des éléments animés. Les états initiaux
 *               masqués ne s'appliquent que sous `html.motion_actif` (posé par __AQ_motion_init.js) :
 *               sans JavaScript ou avec la réduction des animations, tout reste visible.
 *               Uniquement opacity, transform et clip-path. Courbe signature : cubic-bezier(0.22, 1, 0.36, 1).
 *
 * SOMMAIRE :
 *   - JETONS_MOTION        : Durées et courbe du socle
 *   - REVELATIONS          : reveal, reveal_gauche, reveal_droite, reveal_echelle + cascade
 *   - MASQUE               : Dévoilement par masque d'une figure
 *   - PARALLAXE_SOURIS     : Calques pilotés par le moteur (will-change)
 *   - COMPTEURS            : Chiffres animés
 *   - BOUTONS_MAGNETIQUES  : Attraction douce vers le curseur
 *   - REDUCTION_MOUVEMENT  : Neutralisation complète si l'utilisateur le demande
 *
 * MODIFICATIONS :
 *   - 06/10/2026 09:05 : Masque posé sur l'enfant image (Chrome ignore un élément rogné à 100 % dans IntersectionObserver) — A VALIDER PAR JaxX
 *   - 06/10/2026 09:00 : Réécriture pour l'API data-motion du site B2B — A VALIDER PAR JaxX
 *   - 24/09/2026 02:18 : Styles motion en syntaxe Allman — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* JETONS_MOTION ====================================================== */
:root
{
    --motion_easing: cubic-bezier(0.22, 1, 0.36, 1);
    --motion_duree_reveal: 0.75s;
    --motion_duree_masque: 1.1s;
    --motion_pas_cascade: 80ms;
    --motion_translation: 24px;
}
/* JETONS_MOTION ====================================================== */

/* REVELATIONS ======================================================== */
html.motion_actif [data-motion~="reveal"],
html.motion_actif [data-motion~="reveal_gauche"],
html.motion_actif [data-motion~="reveal_droite"],
html.motion_actif [data-motion~="reveal_echelle"]
{
    opacity: 0;
    transition: opacity var(--motion_duree_reveal) var(--motion_easing), transform var(--motion_duree_reveal) var(--motion_easing);
    will-change: opacity, transform;
}

html.motion_actif [data-motion~="reveal"]
{
    transform: translate3d(0, var(--motion_translation), 0);
}

html.motion_actif [data-motion~="reveal_gauche"]
{
    transform: translate3d(calc(var(--motion_translation) * -1.25), 0, 0);
}

html.motion_actif [data-motion~="reveal_droite"]
{
    transform: translate3d(calc(var(--motion_translation) * 1.25), 0, 0);
}

html.motion_actif [data-motion~="reveal_echelle"]
{
    transform: scale(0.94);
}

html.motion_actif [data-motion~="reveal"].motion_visible,
html.motion_actif [data-motion~="reveal_gauche"].motion_visible,
html.motion_actif [data-motion~="reveal_droite"].motion_visible,
html.motion_actif [data-motion~="reveal_echelle"].motion_visible
{
    opacity: 1;
    transform: none;
    will-change: auto;
}

html.motion_actif [data-motion_delai="1"] { transition-delay: calc(var(--motion_pas_cascade) * 1); }
html.motion_actif [data-motion_delai="2"] { transition-delay: calc(var(--motion_pas_cascade) * 2); }
html.motion_actif [data-motion_delai="3"] { transition-delay: calc(var(--motion_pas_cascade) * 3); }
html.motion_actif [data-motion_delai="4"] { transition-delay: calc(var(--motion_pas_cascade) * 4); }
html.motion_actif [data-motion_delai="5"] { transition-delay: calc(var(--motion_pas_cascade) * 5); }
html.motion_actif [data-motion_delai="6"] { transition-delay: calc(var(--motion_pas_cascade) * 6); }
html.motion_actif [data-motion_delai="7"] { transition-delay: calc(var(--motion_pas_cascade) * 7); }
html.motion_actif [data-motion_delai="8"] { transition-delay: calc(var(--motion_pas_cascade) * 8); }
/* REVELATIONS ======================================================== */

/* MASQUE ============================================================= */
/* Le rognage est posé sur l'enfant (image / vidéo), jamais sur la figure elle-même :
   Chrome considère un élément entièrement rogné par clip-path comme non intersectant. */
html.motion_actif [data-motion~="masque"]
{
    overflow: hidden;
}

html.motion_actif [data-motion~="masque"] > img,
html.motion_actif [data-motion~="masque"] > picture,
html.motion_actif [data-motion~="masque"] > video,
html.motion_actif [data-motion~="masque"] > a > img,
html.motion_actif [data-motion~="masque"] > picture > img
{
    clip-path: inset(0 0 100% 0);
    transform: scale(1.08);
    transition: clip-path var(--motion_duree_masque) var(--motion_easing), transform calc(var(--motion_duree_masque) * 1.3) var(--motion_easing);
    will-change: clip-path, transform;
}

html.motion_actif [data-motion~="masque"].motion_visible > img,
html.motion_actif [data-motion~="masque"].motion_visible > picture,
html.motion_actif [data-motion~="masque"].motion_visible > video,
html.motion_actif [data-motion~="masque"].motion_visible > a > img,
html.motion_actif [data-motion~="masque"].motion_visible > picture > img
{
    clip-path: inset(0 0 0 0);
    transform: none;
    will-change: auto;
}
/* MASQUE ============================================================= */

/* PARALLAXE_SOURIS =================================================== */
html.motion_actif [data-motion~="parallaxe"],
html.motion_actif [data-motion~="souris"]
{
    will-change: transform;
    backface-visibility: hidden;
}
/* PARALLAXE_SOURIS =================================================== */

/* COMPTEURS ========================================================== */
[data-motion~="compteur"]
{
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1ch;
}
/* COMPTEURS ========================================================== */

/* BOUTONS_MAGNETIQUES ================================================ */
.bouton_magnetique
{
    transition: transform 0.55s var(--motion_easing), background var(--duree) var(--easing), color var(--duree) var(--easing), border-color var(--duree) var(--easing);
    will-change: transform;
}

.bouton_magnetique.magnetique_actif
{
    transition-duration: 0.25s;
}
/* BOUTONS_MAGNETIQUES ================================================ */

/* REDUCTION_MOUVEMENT ================================================ */
@media (prefers-reduced-motion: reduce)
{
    html.motion_actif [data-motion],
    html.motion_actif [data-motion~="masque"] img,
    html.motion_actif [data-motion~="masque"] picture,
    html.motion_actif [data-motion~="masque"] video
    {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    .bouton_magnetique
    {
        transition: none;
        transform: none !important;
    }
}
/* REDUCTION_MOUVEMENT ================================================ */