/* ============================================================
 * motion.css — couche de motion design (accueil + pages SEO).
 *
 * Règle : AUCUN style au repos n'est modifié. Couleurs, polices,
 * tailles, espacements, bordures et composants restent ceux du
 * design system (chunks Next.js / design.css / seo.css). Ce fichier
 * n'ajoute que des états d'entrée, des micro-interactions et des
 * transitions.
 *
 * Sécurité du contenu : tout ce qui masque un élément avant son
 * apparition est conditionné à
 *   - .m-js (posée dans <head>, retirée au bout de 4 s si motion.js
 *     ne s'est pas lancé) ;
 *   - @media (prefers-reduced-motion: no-preference).
 * Sans JavaScript, ou avec « réduire les animations », tout est visible.
 *
 * Les apparitions utilisent des @keyframes (animation-fill-mode:
 * backwards) sur opacity / translate / scale : elles ne touchent ni à
 * `transform` ni à `transition`, donc les survols d'origine restent
 * intacts une fois l'entrée terminée.
 *
 * Sélecteurs d'apparition : à garder synchronisés avec motion.js.
 * ============================================================ */

:root {
    --m-ease: cubic-bezier(.16, 1, .3, 1);      /* même courbe que .reveal d'origine */
    --m-ease-std: cubic-bezier(.4, 0, .2, 1);   /* même courbe que les survols d'origine */
    --m-pas: 75ms;                              /* décalage entre deux éléments d'une cascade */
}

@keyframes m-monte { from { opacity: 0; translate: 0 26px; } }
@keyframes m-profondeur { from { opacity: 0; translate: 0 34px; scale: .97; } }
@keyframes m-flou { from { opacity: 0; translate: 0 22px; filter: blur(8px); } }
@keyframes m-descend { from { opacity: 0; translate: 0 -14px; } }
@keyframes m-glisse { from { opacity: 0; translate: 0 -4px; } }
@keyframes m-zoom { from { opacity: 0; scale: .96; } }
@keyframes m-secoue {
    20% { translate: -4px 0; }
    40% { translate: 4px 0; }
    60% { translate: -2px 0; }
    80% { translate: 2px 0; }
}
@keyframes m-tourne { to { rotate: 360deg; } }

/* ============================================================
 * 1. TRANSITIONS ENTRE PAGES (View Transitions, Chrome/Edge/Safari
 *    récents ; ignoré ailleurs). Fondu court + la vignette du projet
 *    cliqué glisse vers la couverture de l'étude de cas.
 * ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--m-ease-std); }
    ::view-transition-group(m-couverture) { animation-duration: .55s; animation-timing-function: var(--m-ease); }
    ::view-transition-old(m-couverture),
    ::view-transition-new(m-couverture) { height: 100%; object-fit: cover; }
    .seo-figure img { view-transition-name: m-couverture; }
}

@media (prefers-reduced-motion: no-preference) {

    /* ========================================================
     * 2. ENTRÉE DE PAGE
     * ======================================================== */

    /* Barre de navigation : descend à la première visite de la session
       (pas à chaque page, pour ne pas lasser). */
    .m-js:not(.m-revu) .navbar,
    .m-js:not(.m-revu) .seo-nav { animation: m-descend .7s var(--m-ease) .05s backwards; }

    /* Hero de l'accueil : le titre sort d'un léger flou, puis le trait
       sous le mot clé se dessine. (Le reste du hero utilise .reveal.) */
    .m-js #accueil h1.reveal {
        transition: opacity .8s var(--m-ease) .1s, transform .8s var(--m-ease) .1s, filter .9s var(--m-ease) .1s;
    }
    .m-js #accueil h1.reveal:not(.is-visible) { filter: blur(8px); }
    .m-js #accueil h1 svg path {
        stroke-dasharray: 220;
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1.1s var(--m-ease) .75s;
    }
    .m-js #accueil h1:not(.is-visible) svg path { stroke-dashoffset: 220; }

    /* Hero des pages internes : fil d'Ariane → titre → chapeau → actions */
    .m-js .seo-hero .seo-conteneur > * { animation: m-monte .8s var(--m-ease) backwards; }
    .m-js .seo-hero .seo-conteneur > h1 { animation-name: m-flou; animation-delay: .08s; }
    .m-js .seo-hero .seo-conteneur > :nth-child(3) { animation-delay: .18s; }
    .m-js .seo-hero .seo-conteneur > :nth-child(n+4) { animation-delay: .28s; }

    /* ========================================================
     * 3. APPARITIONS AU DÉFILEMENT
     * ======================================================== */

    /* Traits des sur-titres (« — SERVICES », « — CONTACT »…) : ils se
       dessinent quand leur bloc apparaît. */
    .m-js .reveal .w-12.h-px { transform-origin: left center; transition: transform .9s var(--m-ease) .3s; }
    .m-js .reveal .justify-center > .w-12.h-px:first-child { transform-origin: right center; }
    .m-js .reveal:not(.is-visible) .w-12.h-px { transform: scaleX(0); }

    /* Pages internes : blocs isolés (titres, paragraphes, figures, encarts) */
    .m-js .seo-section .seo-conteneur > :not(.seo-grille):not(.seo-deux-colonnes):not(.seo-timeline):not(.fg-cartes):not(.fg-galerie):not(.fg-fiche):not(.fg-filtres):not(.m-in),
    .m-js .fg-fiche-principal > :not(.m-in),
    .m-js .fg-fiche-aside:not(.m-in) { opacity: 0; }
    .m-js .seo-section .seo-conteneur > :not(.seo-grille):not(.seo-deux-colonnes):not(.seo-timeline):not(.fg-cartes):not(.fg-galerie):not(.fg-fiche):not(.fg-filtres).m-in,
    .m-js .fg-fiche-principal > .m-in,
    .m-js .fg-fiche-aside.m-in { animation: m-monte .8s var(--m-ease) backwards; }
    /* Couverture d'étude de cas : légère profondeur */
    .m-js .seo-section .seo-conteneur > .seo-figure.m-in { animation-name: m-profondeur; animation-duration: 1s; }

    /* Cascades : les enfants apparaissent l'un après l'autre.
       Accueil : grilles déjà en .reveal (le parent garde son fondu,
       seul son déplacement est confié aux enfants). */
    .m-js .grid.reveal,
    .m-js .flex-wrap.reveal { transform: none; }
    .m-js .grid.reveal:not(.is-visible) > *,
    .m-js .flex-wrap.reveal:not(.is-visible) > *,
    .m-js :is(.seo-grille, .seo-deux-colonnes, .seo-timeline, .fg-programme, .fg-exemples, .seo-footer-grille, footer > div > .grid):not(.m-in) > * { opacity: 0; }
    .m-js .grid.reveal.is-visible > *,
    .m-js .flex-wrap.reveal.is-visible > *,
    .m-js :is(.seo-grille, .seo-deux-colonnes, .seo-timeline, .fg-programme, .fg-exemples, .seo-footer-grille, footer > div > .grid).m-in > * {
        animation: m-monte .75s var(--m-ease) backwards;
        animation-delay: calc(var(--m-i, 0) * var(--m-pas));
    }

    /* Formations & galerie : leur apparition d'origine (fg-apparition)
       est conservée, elle attend simplement que la carte soit visible. */
    .m-js .fg-carte:not(.m-in),
    .m-js .fg-galerie-item:not(.m-in) { animation-play-state: paused; }

    /* À propos : la photo se dévoile (rideau + léger zoom arrière) */
    .m-js #apropos .aspect-square {
        clip-path: inset(0 round 1.5rem);
        transition: clip-path 1.1s var(--m-ease) .15s;
    }
    .m-js #apropos .aspect-square img { transition: scale 1.4s var(--m-ease) .15s; }
    .m-js #apropos .reveal:not(.is-visible) .aspect-square { clip-path: inset(9% 9% 9% 9% round 1.5rem); }
    .m-js #apropos .reveal:not(.is-visible) .aspect-square img { scale: 1.15; }

    /* ========================================================
     * 4. PARCOURS : la méthode se construit pendant le défilement
     *    (étapes activées dans l'ordre par motion.js)
     * ======================================================== */
    .m-js #parcours .process-step-card { overflow: hidden; }
    .m-js #parcours .process-step-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, #6366f1, #818cf8);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .6s var(--m-ease);
    }
    .m-js #parcours .process-step-card.m-actif::before { transform: scaleX(1); }
    .m-js #parcours .process-step-card.m-actif .process-step-number { color: #6366f1; border-color: #6366f1; }

    /* Frise des pages internes (/parcours) : la ligne indigo suit le défilement */
    .m-js .seo-timeline::after {
        content: "";
        position: absolute;
        left: 6px; top: 6px; bottom: 6px;
        width: 2px;
        background: #6366f1;
        transform: scaleY(var(--m-progression, 0));
        transform-origin: top center;
    }
    .m-js .seo-timeline .etape::before {
        z-index: 1;
        transition: scale .5s var(--m-ease);
        transition-delay: calc(var(--m-i, 0) * var(--m-pas) + .15s);
    }
    .m-js .seo-timeline:not(.m-in) .etape::before { scale: 0; }

    /* ========================================================
     * 5. MICRO-INTERACTIONS
     * ======================================================== */

    /* Retour tactile à l'appui (scale : se compose avec les transform
       des survols et de l'effet magnétique) */
    :is(.btn-primary, .btn-secondary, .btn-indigo, .asm-btn, .fg-filtre):active { scale: .97; }
    .btn-retour { transition: border-color .2s, color .2s, scale .2s var(--m-ease-std); }
    .btn-retour:active { scale: .97; }
    .service-card-enhanced:active { scale: .99; }

    /* Navigation : le lien de la section courante garde son trait */
    .navbar a.hover-line[aria-current="true"]::after { width: 100%; }

    /* Logo : le point indigo fait un petit saut au survol */
    .navbar a.group .text-indigo-500,
    footer .text-xl > .text-indigo-500,
    .seo-logo span,
    .seo-footer .marque span { display: inline-block; transition: translate .45s var(--m-ease); }
    .navbar a.group:hover .text-indigo-500,
    footer .text-xl:hover > .text-indigo-500,
    .seo-logo:hover span,
    .seo-footer .marque:hover span { translate: 0 -4px; }

    /* Menu mobile : les liens arrivent en cascade (délais déjà présents
       dans le HTML via style="animation-delay") */
    .mobile-menu.is-open .flex-1 > a { animation: m-monte .5s var(--m-ease) backwards; }

    /* Pages internes : barre de navigation qui réagit au défilement */
    .seo-nav { transition: box-shadow .4s var(--m-ease-std); }
    .seo-nav.m-defile { box-shadow: 0 12px 30px -24px rgba(10, 10, 10, .35); }

    /* « Pourquoi moi » : l'icône se soulève au survol */
    .bg-black .group > svg:first-child { transition: translate .45s var(--m-ease); }
    .bg-black .group:hover > svg:first-child { translate: 0 -4px; }

    /* Pied de page : les liens glissent légèrement */
    footer ul a:not(.inline-flex) { display: inline-block; }
    footer ul a { transition: color .2s, translate .3s var(--m-ease); }
    footer ul a:hover { translate: 3px 0; }
    .seo-footer-grille a { transition: color .2s, translate .3s var(--m-ease); }
    .seo-footer-grille a:hover { translate: 3px 0; }

    /* Cartes des pages internes : même survol que les cartes de l'accueil
       (élévation + ombre indigo), la bordure d'origine est conservée */
    .seo-carte {
        position: relative;
        transition: border-color .3s, transform .4s var(--m-ease-std), box-shadow .4s var(--m-ease-std);
    }
    .seo-carte:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -15px rgba(99, 102, 241, .15); }
    .seo-carte > img { transition: scale .6s var(--m-ease); }
    .seo-carte:hover > img { scale: 1.04; }
    .fg-carte { position: relative; }

    /* Lumière qui suit le pointeur sur les cartes (classe posée par
       motion.js uniquement avec une souris) */
    .m-spot::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(380px circle at var(--m-mx, 50%) var(--m-my, 50%), rgba(99, 102, 241, .07), transparent 45%);
        opacity: 0;
        transition: opacity .4s var(--m-ease-std);
    }
    .m-spot:hover::after { opacity: 1; }

    /* FAQ : la réponse glisse en place à l'ouverture */
    .faq-answer-inner { transition: opacity .4s var(--m-ease-std) .05s, translate .4s var(--m-ease-std) .05s; }
    .faq-item:not(.is-open) .faq-answer-inner { opacity: 0; translate: 0 -6px; }

    /* ========================================================
     * 6. PROJETS — « Project Motion Preview »
     * ======================================================== */
    /* Au clavier, le carrousel se met en pause comme au survol */
    .projects-carousel:focus-within .projects-carousel-track { animation-play-state: paused; }

    /* Vignette : inclinaison 3D qui suit la souris + reflet lumineux */
    .project-card-image::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(420px circle at var(--m-mx, 50%) var(--m-my, 0%), rgba(255, 255, 255, .2), transparent 45%);
        opacity: 0;
        transition: opacity .4s var(--m-ease-std);
    }
    .project-card:hover .project-card-image::after { opacity: 1; }
    .project-card.m-incline:hover {
        transform: perspective(1000px) translateY(-6px) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg));
    }
    .project-card-tech span { transition: border-color .3s, color .3s; }
    .project-card:hover .project-card-tech span { border-color: #c7d2fe; }

    /* ========================================================
     * 7. FORMULAIRE DE CONTACT (accueil et /contact)
     * ======================================================== */
    .seo-champ .form-label { transition: color .2s; }
    .seo-champ:focus-within .form-label { color: #6366f1; }
    .seo-form [aria-invalid="true"],
    .asm-tel.asm-tel-erreur { animation: m-secoue .4s var(--m-ease-std); }
    .champ-erreur { animation: m-glisse .3s var(--m-ease-std); }
    .form-boite-erreur { animation: m-glisse .35s var(--m-ease-std); }
    #bouton-envoi:disabled { cursor: progress; }
    #bouton-envoi:disabled::before {
        content: "";
        width: 1em;
        height: 1em;
        flex: none;
        border-radius: 9999px;
        border: 2px solid rgba(255, 255, 255, .35);
        border-top-color: #fff;
        animation: m-tourne .7s linear infinite;
    }

    /* ========================================================
     * 8. BOUTONS FLOTTANTS, GALERIE
     * ======================================================== */
    /* Bulle WhatsApp : apparition douce (la pulsation d'origine est conservée) */
    .whatsapp-float { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), translate .6s var(--m-ease), opacity .6s var(--m-ease); }
    .m-js .whatsapp-float:not(.m-pret) { opacity: 0; translate: 0 18px; }

    /* Visionneuse : l'image s'installe en douceur */
    .fg-lightbox:not([hidden]) .fg-lb-figure { animation: m-zoom .4s var(--m-ease) backwards; }

    /* ========================================================
     * 9. PARALLAXE (motion.js : ordinateur uniquement)
     * ======================================================== */
    @media (min-width: 1024px) {
        [data-m-parallax], [data-m-parallax-page] { will-change: translate; }
        .m-js #apropos .reveal.is-visible .aspect-square img { scale: 1.06; }
        .m-cadre { overflow: hidden; }
        .m-cadre img { scale: 1.03; }
    }

    /* ========================================================
     * 10. CURSEUR (souris uniquement, le curseur système est conservé)
     * ======================================================== */
    .m-curseur {
        position: fixed;
        top: 0; left: 0;
        z-index: 99999;
        width: 34px; height: 34px;
        margin: -17px 0 0 -17px;
        border: 1.5px solid rgba(99, 102, 241, .5);
        border-radius: 9999px;
        pointer-events: none;
        opacity: 0;
        will-change: transform;
        transition: opacity .3s, scale .35s var(--m-ease), background-color .35s, border-color .35s;
    }
    .m-curseur.m-visible { opacity: 1; }
    .m-curseur.m-survol { scale: 1.55; background-color: rgba(99, 102, 241, .08); border-color: rgba(99, 102, 241, .3); }
    .m-curseur.m-appui { scale: .8; }
    .m-curseur.m-survol.m-appui { scale: 1.3; }
    .m-curseur.m-texte { opacity: 0; }
}

/* Focus clavier visible sur les éléments interactifs de l'accueil
   (accessibilité, n'apparaît jamais à la souris) */
.service-card-enhanced:focus-visible,
.project-card:focus-visible,
.faq-question:focus-visible,
.back-to-top:focus-visible,
.whatsapp-float:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .m-curseur { display: none; }
}