/* ================================================================
   MOTRO FRANCE — motion.css
   Couche de mouvement. Chargee APRES style.css.

   Doctrine appliquee (Emil Kowalski, design engineering) :

   1. Toute animation passe un portail avant d'exister :
      combien de fois par jour l'utilisateur la verra-t-il ?
      100+/jour  -> aucune animation, jamais
      dizaines   -> imperceptible ou rien
      occasionnel-> animation standard
      rare       -> c'est la que vit le budget "plaisir"

   2. On n'anime que transform et opacity. Elles sautent layout et
      paint, et tournent sur le GPU. width/height/margin/top/left
      declenchent les trois etapes de rendu.

   3. Jamais d'ease-in sur de l'UI : il demarre lentement, donc il
      retarde l'instant precis ou l'oeil regarde le plus.

   4. L'UI reste sous 300ms. Un menu a 180ms parait plus reactif
      qu'a 400ms.

   5. Jamais scale(0) : rien, dans le monde reel, n'apparait a
      partir de rien.

   6. prefers-reduced-motion et le gating du survol partent AVEC
      l'animation, jamais en rattrapage.
   ================================================================ */


/* ----------------------------------------------------------------
   Tokens de repli.
   style.css les definit deja ; on les redeclare a l'identique pour
   que cette feuille reste utilisable seule, sur une page qui ne
   charge pas la feuille principale (finder.html). Valeurs
   strictement identiques : aucune divergence possible.
   ---------------------------------------------------------------- */
:root {
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-hover:  ease;

    --dur-press:   140ms;
    --dur-tooltip: 160ms;
    --dur-menu:    200ms;
    --dur-panel:   320ms;
}


/* ================================================================
   1. RETOUR DE PRESSION
   ================================================================
   Le defaut le plus repandu du site : 13 boutons sur 14 avaient
   `:active { transform: translateY(0) }`. Ce n'est pas un retour de
   pression, c'est l'annulation du soulevement du survol. Sur
   mobile, ou il n'y a pas de survol, ces boutons ne repondaient
   donc strictement rien au doigt.

   Un bouton doit se comprimer quand on appuie. C'est la preuve,
   instantanee, que l'interface a entendu l'utilisateur.
   Echelle subtile (0.95-0.98), duree 100-160ms.                  */

.nav-cta,
.overlay-cta,
.btn-cta-overlay,
.btn-secondary,
.btn-drawer-submit,
.btn-voir-moteur,
.btn-garantie,
.btn-klarna,
.btn-devis,
.btn-auth-submit,
.btn-google,
.btn-suivi-transporteur,
.suivi-btn-submit,
.drawer-call-btn,
.drawer-call-cta,
.mobile-vedette-cta,
.sticky-call-btn,
.filtre-reset-btn,
.boutique-vide-btn,
.auth-switch-btn,
.csc-btn-mail,
.csc-btn-tel,
.nav-user-btn,
.mobile-menu-btn,
.mc-btn {
    transition-property: transform, opacity, background-color, border-color, color, box-shadow;
    transition-duration: var(--dur-press);
    transition-timing-function: var(--ease-out);
}

/* On compose avec le soulevement existant : le bouton retombe a sa
   ligne de base ET se comprime. */
.nav-cta:active,
.overlay-cta:active,
.btn-cta-overlay:active,
.btn-secondary:active,
.btn-drawer-submit:active,
.btn-voir-moteur:active,
.btn-garantie:active,
.btn-klarna:active,
.btn-devis:active,
.btn-auth-submit:active,
.btn-google:active,
.btn-suivi-transporteur:active,
.suivi-btn-submit:active,
.drawer-call-btn:active,
.drawer-call-cta:active,
.mobile-vedette-cta:active,
.sticky-call-btn:active,
.filtre-reset-btn:active,
.boutique-vide-btn:active,
.auth-switch-btn:active,
.csc-btn-mail:active,
.csc-btn-tel:active,
.mc-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Les boutons-icones sont petits : ils encaissent une compression
   un peu plus marquee sans paraitre mous. */
.nav-user-btn:active,
.mobile-menu-btn:active,
.auth-eye-btn:active {
    transform: scale(0.94);
}

/* Un bouton desactive ne doit pas repondre a la pression : le
   retour tactile promettrait une action qui n'arrivera pas. */
.mc-btn:disabled:active,
.mc-btn.loading:active,
button:disabled:active,
[aria-disabled="true"]:active {
    transform: none;
}


/* ================================================================
   2. GATING DU SURVOL
   ================================================================
   Sur un ecran tactile, le premier tap declenche :hover. Le
   soulevement reste alors colle jusqu'au tap suivant : la carte a
   l'air cassee. Le site ne gatait qu'une seule regle sur 6600
   lignes.

   On neutralise le mouvement de survol la ou il n'y a pas de vrai
   pointeur — sans toucher aux changements de couleur, qui restent
   utiles comme accuse de reception du tap.                        */

@media (hover: none), (pointer: coarse) {
    .moteur-card:hover,
    .dashboard-carte:hover,
    .gstat-card:hover,
    .contact-card:hover,
    .mc-carte:hover,
    .nav-cta:hover,
    .overlay-cta:hover,
    .btn-cta-overlay:hover,
    .btn-secondary:hover,
    .btn-voir-moteur:hover,
    .btn-garantie:hover,
    .btn-klarna:hover,
    .btn-devis:hover,
    .btn-auth-submit:hover,
    .drawer-call-btn:hover,
    .sticky-call-btn:hover,
    .mc-btn:hover {
        transform: none;
    }
}


/* ================================================================
   3. REVELATION AU DEFILEMENT
   ================================================================
   Portail : une section de page d'accueil est vue de facon
   occasionnelle -> animation standard autorisee. Le but n'est pas
   decoratif, il est de "prevenir un changement brutal" : sans
   transition, un bloc qui entre dans le viewport apparait d'un
   coup, comme un defaut de chargement.

   Regles de securite, dans l'ordre d'importance :
   - La classe .m-reveal est posee par JS. Sans JS, rien n'est
     masque : le contenu reste lisible, toujours.
   - JS ne masque QUE ce qui est hors du viewport au chargement.
     Ce qui est deja visible ne clignote donc jamais.
   - L'observation se fait une seule fois. Une section qui
     re-animerait a chaque passage serait epuisante.               */

.m-reveal {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}

.m-reveal-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 420ms var(--ease-out),
                transform 420ms var(--ease-out);
}

/* Une fois arrive, on rend la main au compositeur. */
.m-reveal-done {
    will-change: auto;
}

/* Decalage en cascade pour les enfants d'une grille.
   30-80ms entre elements : au-dela, l'interface parait lente.
   Le decalage s'arrete a 8 elements — une grille de 40 moteurs
   ne doit pas mettre 3 secondes a se remplir.                    */
.m-stagger > .m-reveal-in:nth-child(1) { transition-delay: 0ms; }
.m-stagger > .m-reveal-in:nth-child(2) { transition-delay: 55ms; }
.m-stagger > .m-reveal-in:nth-child(3) { transition-delay: 110ms; }
.m-stagger > .m-reveal-in:nth-child(4) { transition-delay: 165ms; }
.m-stagger > .m-reveal-in:nth-child(5) { transition-delay: 220ms; }
.m-stagger > .m-reveal-in:nth-child(6) { transition-delay: 275ms; }
.m-stagger > .m-reveal-in:nth-child(7) { transition-delay: 330ms; }
.m-stagger > .m-reveal-in:nth-child(n+8) { transition-delay: 385ms; }


/* ================================================================
   4. CARTES MOTEUR — survol
   ================================================================
   Portail : sur la boutique, une carte est survolee des dizaines
   de fois par session. Palier "imperceptible ou rien". Donc un
   soulevement court et faible, jamais un effet spectaculaire.

   L'ombre porte l'essentiel de la lecture de profondeur ; le
   deplacement ne fait que la confirmer.                           */

@media (hover: hover) and (pointer: fine) {
    .moteur-card {
        transition: transform 180ms var(--ease-out),
                    box-shadow 180ms var(--ease-out);
    }

    .moteur-card:hover {
        transform: translateY(-3px);
    }

    /* L'image respire tres legerement a l'interieur de son cadre.
       Le cadre, lui, ne bouge pas : c'est ce qui fait que l'effet
       se lit comme de la profondeur et non comme un tremblement. */
    .moteur-card__media,
    .moteur-card figure,
    .moteur-card .moteur-card-img {
        overflow: hidden;
    }

    .moteur-card img {
        transition: transform 320ms var(--ease-out);
    }

    .moteur-card:hover img {
        transform: scale(1.03);
    }
}

/* La pression doit rester lisible meme au survol. */
.moteur-card:active {
    transform: translateY(0) scale(0.985);
    transition-duration: var(--dur-press);
}


/* ================================================================
   5. POPOVERS ANCRES
   ================================================================
   Un popover doit grandir depuis son declencheur, pas depuis son
   centre. Sinon il semble arriver d'ailleurs.
   Exception : les modales. Elles ne sont ancrees a rien, elles
   restent centrees.                                               */

.compte-menu,
.nav-user-menu,
.filtre-dropdown {
    transform-origin: top right;
}

.mobile-nav-panel {
    transform-origin: top center;
}


/* ================================================================
   6. FOCUS VISIBLE
   ================================================================
   L'anneau de focus n'est pas une animation, c'est une garantie
   d'accessibilite. Il ne doit apparaitre qu'au clavier — :focus
   seul le ferait clignoter a chaque clic souris.                  */

:focus-visible {
    outline: 2px solid var(--c-jaune);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}


/* ================================================================
   7. MOUVEMENT REDUIT
   ================================================================
   Mouvement reduit veut dire "moins et plus doux", pas "zero". On
   garde ce qui aide a comprendre — l'opacite, la couleur — et on
   supprime ce qui deplace : c'est le deplacement qui declenche le
   mal des transports, pas le fondu.

   Le site n'avait que 4 blocs cibles ; celui-ci couvre le reste.  */

@media (prefers-reduced-motion: reduce) {

    /* Les revelations deviennent de simples fondus. */
    .m-reveal {
        transform: none;
    }
    .m-reveal-in {
        transform: none;
        transition: opacity 200ms var(--ease-out);
        transition-delay: 0ms !important;
    }

    /* Plus aucun soulevement au survol ni compression a l'appui. */
    .moteur-card:hover,
    .moteur-card:active,
    .moteur-card:hover img,
    .dashboard-carte:hover,
    .gstat-card:hover,
    .contact-card:hover,
    .mc-carte:hover {
        transform: none;
    }

    .nav-cta:active,
    .overlay-cta:active,
    .btn-cta-overlay:active,
    .btn-secondary:active,
    .btn-voir-moteur:active,
    .btn-garantie:active,
    .btn-klarna:active,
    .btn-devis:active,
    .btn-auth-submit:active,
    .drawer-call-btn:active,
    .sticky-call-btn:active,
    .mc-btn:active,
    .nav-user-btn:active,
    .mobile-menu-btn:active {
        transform: none;
    }

    /* Le bandeau de marques defile en boucle : c'est du mouvement
       permanent et non sollicite, le pire cas. On l'arrete net et
       on rend le defilement manuel. */
    .marques-piste,
    .marques-defilement,
    [class*="defilement"] {
        animation: none !important;
        overflow-x: auto;
    }

    /* Les sequences decoratives du parcours de commande n'apportent
       aucune information que le texte ne donne deja. */
    [class*="parcours-"] {
        animation: none !important;
        transition: none !important;
    }
}