/* ============================================================
   PHONY — Motion 2026
   View Transitions, scroll-driven animations, container queries,
   content-visibility. Respecte prefers-reduced-motion.
   Chargé après ui-polish.css.
============================================================ */

:root {
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-rise: 28px;
}

html {
    interpolate-size: allow-keywords;
}

h1, h2, .h-sec-head h2, .hero-small h1 {
    text-wrap: balance;
}

.h-hero-sub,
.p26-hero-sub,
.srv-hero-sub,
.bt-hero-sub,
.ct-hero p,
.t-hero p,
.dom-hero-sub,
.fmt-hero-sub {
    text-wrap: pretty;
}

/* ============================================================
   VIEW TRANSITIONS (MPA same-origin)
============================================================ */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vt-fade-out 180ms var(--motion-ease) both;
}

::view-transition-new(root) {
    animation: vt-fade-in 320ms var(--motion-ease) both;
}

.logo {
    view-transition-name: phony-logo;
}

@keyframes vt-fade-out {
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(10px); }
}

/* ============================================================
   HERO — entrée immédiate (pas d’attente IntersectionObserver)
============================================================ */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(var(--motion-rise)); }
    to   { opacity: 1; transform: none; }
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes underline-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes ken-burns {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.4%, -1%, 0); }
}

.h-hero {
    isolation: isolate;
}

.h-hero-bg { display: none; }

.h-hero .container {
    position: relative;
    z-index: 2;
}

.h-hero-text[data-reveal],
.h-hero-card[data-reveal],
.h-hero-visual[data-reveal],
.h-hero-panel[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

.h-hero-eyebrow { animation: rise-in 700ms var(--motion-ease) both; }
.h-hero h1      { animation: rise-in 780ms 60ms var(--motion-ease) both; }
.h-hero-sub     { animation: rise-in 780ms 160ms var(--motion-ease) both; }
.h-hero-cta     { animation: rise-in 780ms 240ms var(--motion-ease) both; }
.h-trust-row    { animation: rise-in 780ms 320ms var(--motion-ease) both; }
.h-hero-card    { animation: card-in 900ms 180ms var(--motion-ease) both; }

.h-hero h1 .hl2::after {
    transform: scaleX(0);
    transform-origin: left;
    animation: underline-draw 640ms 520ms var(--motion-ease) forwards;
}

.srv-hero-inner,
.bt-hero-inner,
.ct-hero-inner,
.t-hero-inner,
.dom-hero-inner,
.fmt-hero-inner,
.dg-hero,
.hero-small .hero-content {
    animation: rise-in 700ms var(--motion-ease) both;
}

/* ============================================================
   SCROLL-DRIVEN — cartes / stats / avis
============================================================ */
@keyframes view-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

@keyframes view-scale {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes line-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
    .h-srv-card,
    .h-stat-item,
    .h-why-card,
    .h-why-point,
    .h-step,
    .h-review-card,
    .h-sec-head,
    .service-card,
    .service-card-small,
    .srv-card,
    .dom-card,
    .fmt-card,
    .faq-item {
        animation: view-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 42%;
    }

    .h-stat-box,
    .h-mbadge {
        animation: view-scale linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }

    .h-steps::before {
        transform-origin: left;
        animation: line-grow linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
    }

    .h-srv-card[data-reveal],
    .h-stat-item[data-reveal],
    .h-why-card[data-reveal],
    .h-step[data-reveal],
    .h-review-card[data-reveal],
    .service-card[data-reveal],
    .faq-item[data-reveal] {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    html.menu-open .h-srv-card,
    html.menu-open .h-stat-item,
    html.menu-open .h-why-card,
    html.menu-open .h-why-point,
    html.menu-open .h-step,
    html.menu-open .h-review-card,
    html.menu-open .h-sec-head,
    html.menu-open .service-card,
    html.menu-open .service-card-small,
    html.menu-open .srv-card,
    html.menu-open .dom-card,
    html.menu-open .fmt-card,
    html.menu-open .faq-item,
    html.menu-open .h-stat-box,
    html.menu-open .h-mbadge,
    html.menu-open .h-steps::before {
        animation-play-state: paused !important;
    }
}

/* ============================================================
   CONTAINER QUERIES
============================================================ */
.h-services .container,
.h-reviews .container,
.h-why .container {
    container-type: inline-size;
    container-name: section;
}

@container section (min-width: 640px) {
    .h-srv-grid { grid-template-columns: repeat(2, 1fr); }
    .h-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@container section (min-width: 960px) {
    .h-srv-grid { grid-template-columns: repeat(3, 1fr); }
    .h-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   CONTENT-VISIBILITY (sous la ligne de flottaison)
============================================================ */
.h-stat-big,
.h-stat-num,
.h-score-num {
    font-variant-numeric: tabular-nums;
}

.h-models,
.h-location,
.h-zones {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

html.menu-open .h-models,
html.menu-open .h-location,
html.menu-open .h-zones {
    content-visibility: visible;
}

/* ============================================================
   BOUTONS — shine + magnetic (variables --mx / --my)
============================================================ */
.btn-primary,
.h-card-cta {
    --mx: 0px;
    --my: 0px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translate3d(var(--mx), var(--my), 0);
    transition:
        transform 220ms var(--motion-ease),
        box-shadow 220ms ease,
        background 220ms ease;
}

.btn-primary::after,
.h-card-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        oklch(99% 0.01 260 / 0.45) 50%,
        transparent 70%
    );
    transform: translateX(-130%) skewX(-16deg);
    transition: transform 520ms var(--motion-ease);
    pointer-events: none;
    z-index: 1;
}

.btn-primary:hover,
.h-card-cta:hover {
    transform: translate3d(var(--mx), calc(var(--my) - 3px), 0);
}

.btn-primary:hover::after,
.h-card-cta:hover::after {
    transform: translateX(130%) skewX(-16deg);
}

.btn-primary:active,
.h-card-cta:active {
    transform: translate3d(var(--mx), var(--my), 0) scale(0.98);
}

.btn-primary > *,
.h-card-cta > * {
    position: relative;
    z-index: 2;
}

/* ============================================================
   CARTES — hover plus “marque”
============================================================ */
.h-srv-card,
.h-review-card,
.h-why-card,
.service-card,
.srv-card,
.fmt-card,
.dom-card {
    transition:
        transform 320ms var(--motion-ease),
        box-shadow 320ms ease,
        border-color 240ms ease;
}

.h-srv-card:hover,
.service-card:hover,
.dom-card:hover {
    transform: translateY(-6px);
}

.h-service-pill {
    transition: transform 220ms var(--motion-ease), background 180ms ease, border-color 180ms ease;
}

.h-service-pill:hover {
    transform: translateX(6px);
}

.h-step-bubble {
    transition: transform 320ms var(--motion-ease), box-shadow 320ms ease;
}

.h-step:hover .h-step-bubble {
    transform: scale(1.06);
}

.h-mbadge {
    transition: transform 180ms var(--motion-ease), background 180ms ease, color 180ms ease;
}

.h-tab-btn {
    transition: background 200ms ease, color 200ms ease, transform 200ms var(--motion-ease);
}

.h-tab-btn:hover {
    transform: translateY(-1px);
}

/* ============================================================
   INNER PAGES — cartes génériques
============================================================ */
.faq-item,
.contact-form,
.simulateur-form-pro {
    transition: box-shadow 280ms ease, transform 280ms var(--motion-ease);
}

/* ============================================================
   GSAP ON — coupe les anim CSS qui doublonneraient
============================================================ */
html.gsap-on .h-hero-bg {
    animation: none;
}

html.gsap-on .h-srv-card,
html.gsap-on .h-stat-item,
html.gsap-on .h-why-card,
html.gsap-on .h-why-point,
html.gsap-on .h-step,
html.gsap-on .h-review-card,
html.gsap-on .h-sec-head,
html.gsap-on .service-card,
html.gsap-on .service-card-small,
html.gsap-on .srv-card,
html.gsap-on .dom-card,
html.gsap-on .fmt-card,
html.gsap-on .faq-item,
html.gsap-on .h-stat-box,
html.gsap-on .h-mbadge,
html.gsap-on .h-steps::before {
    animation: none !important;
}

html.gsap-on .btn-primary,
html.gsap-on .h-card-cta {
    --mx: 0px;
    --my: 0px;
    transition: box-shadow 220ms ease, background 220ms ease;
}

html.gsap-on .btn-primary:hover,
html.gsap-on .h-card-cta:hover,
html.gsap-on .btn-primary:active,
html.gsap-on .h-card-cta:active {
    transform: none;
}

.h-hero h1 .h-word.hl2 {
    position: relative;
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .h-hero h1 .h-word,
    .h-hero-bg,
    .h-hero-eyebrow,
    .h-hero h1,
    .h-hero-sub,
    .h-hero-cta,
    .h-trust-row,
    .h-hero-card,
    .h-hero h1 .hl2::after,
    .srv-hero-inner,
    .bt-hero-inner,
    .ct-hero-inner,
    .t-hero-inner,
    .dom-hero-inner,
    .fmt-hero-inner,
    .dg-hero,
    .hero-small .hero-content,
    .h-srv-card,
    .h-stat-item,
    .h-why-card,
    .h-why-point,
    .h-step,
    .h-review-card,
    .h-sec-head,
    .service-card,
    .dom-card,
    .faq-item,
    .h-stat-box,
    .h-mbadge,
    .h-steps::before {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    .h-hero-bg {
        inset: 0;
        transform: none;
        will-change: auto;
    }
}

@media (max-width: 768px) {
    .btn-primary,
    .h-card-cta {
        --mx: 0px !important;
        --my: 0px !important;
    }
}