/* ====================== SOBRIETE : rythme, titres et mouvement communs ======================
   Dernier calque du site. Une seule echelle d'espaces (96 px entre sections au bureau), un seul style de titre de section,
   un mouvement discret : fondu court sans deplacement, aucune boucle decorative (scan, halo, lueur, pulsation, balayage).
   Les cinematiques des pages services et de l'accueil ne sont pas concernees : ce sont le contenu, pas de la decoration. */

:root { --section-y: 96px; --section-title: clamp(1.9rem, 3vw, 2.5rem); }

/* --- Mouvement : revelation au scroll, fondu seul --- */
html body .reveal-on-scroll {
    transform: none !important;
    transition: opacity 0.4s ease !important;
    transition-delay: 0ms !important;
}

/* --- Boucles decoratives supprimees (le contenu reste, seul l'effet disparait) --- */
html body .hero-btn::after,
html body .hero::after,
html body .hero-grid::before,
html body .quote-card::before,
html body .services-cta::before,
html body .cta-final .container::before,
html body .service-path::after,
html body .clients-marquee::after,
html body .workorder-steps::after,
html body .wo-halo,
html body .clients-hud-dot,
html body .intro-now,
html body .intro-hint,
html body .intro-scroll::after,
html body .quote-step .is-current::after,
html body .is-current::after {
    animation: none !important;
}
html body .hero-btn::after, html body .hero::after, html body .hero-grid::before,
html body .quote-card::before, html body .services-cta::before, html body .cta-final .container::before,
html body .clients-marquee::after { opacity: 0 !important; }
html body .wo-halo, html body .workorder-steps li, html body .workorder-steps li::after { animation: none !important; }

/* --- Survols : pas de remontee des cartes, une bordure qui s'eclaircit suffit --- */
html body :is(.service-card, .instagram-card, .client-logo-card, .google-review-card, .services-process-list li, .deadline-card, .choice-tiles button, .color-swatches button):hover,
html body.home-page :is(.service-card, .instagram-card, .client-logo-card):hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
}
html body :is(.service-card, .instagram-card, .client-logo-card):hover img { transform: none !important; }

/* --- Titres : meme echelle, meme graisse, meme interlignage sur tout le site --- */
html body :is(
    .clients-header, .services-header-copy, .realisations-header, .reviews-header, .faq-header, .cta-inner,
    .ab-story-copy, .about-section-head, .ab-know-copy, .cm-paths-head, .svc-section-head, .fdm-head, .fdm-method
) h2,
html body .cl-panel .cl-title,
html body .cf-title {
    font-size: var(--section-title) !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance;
}
html body :is(.intro-title, .cine-title) { font-weight: 600 !important; letter-spacing: -0.025em !important; }

/* --- Espaces entre sections (bureau ; le mobile garde ses gouttieres propres) --- */
@media (min-width: 861px) {
    html body :is(
        .clients, .services, .realisations, .reviews, .faq,
        .ab-story, .ab-eng, .ab-know, .ab-trust,
        .cm-paths, .cl-section, .contact-wrapper,
        .svc-section, .fdm-section
    ) {
        padding-top: var(--section-y) !important;
        padding-bottom: var(--section-y) !important;
    }
    html body :is(.faq, .cta-final) { padding-top: 0 !important; }
    html body .cine + .faq { padding-top: var(--section-y) !important; }
    html body .cta-final { padding-bottom: var(--section-y) !important; }
}

/* boucles restantes : indicateur de defilement, pastille « en cours », fleche d'aide, anneau d'etat, surbrillance cyclique des etapes */
html body .intro-scroll i, html body .intro-scroll i::after, html body .intro-now i, html body .intro-hint i,
html body .workorder-status i::after, html body .ft-open i::after,
html body .workorder-steps li, html body .workorder-steps li::after, html body .workorder-steps li > span {
    animation: none !important;
}
html body .workorder-steps li > span { opacity: 1 !important; }
html body .workorder-status i::after, html body .ft-open i::after, html body .workorder-steps li::after { opacity: 0 !important; }



@media (max-width: 860px) {
    html body main :is(.faq, .cta-final), html body.svm-page main .cta-final { padding-top: 0 !important; padding-bottom: 64px !important; }
    html body main .cine + .faq { padding-top: 64px !important; }
    html body .cine + .faq { padding-top: 64px !important; }
    html body :is(.cm-paths, .cl-section, .contact-wrapper, .ab-story, .ab-eng, .ab-know, .ab-trust, .svc-section, .fdm-section) {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
}

/* pages legales : titres sans filet colore epais, meme graisse que les autres titres */
html body .legal-section h2 { border-left: 0 !important; padding-left: 0 !important; font-weight: 600 !important; }

/* ====================== Intro des pages : plus court ======================
   Titre, accent, paragraphe, boutons et pastilles arrivent en moins d'une demi-seconde (avant : jusqu'a 2 s avec la cascade des matieres). */
@media (prefers-reduced-motion: no-preference) {
    html body .intro-line > span { animation-duration: 0.5s !important; animation-delay: 0s !important; }
    html body .intro-title em { animation-duration: 0.4s !important; animation-delay: 0.15s !important; }
    html body .intro-lead { animation-duration: 0.4s !important; }
    html body .intro-actions { animation-duration: 0.4s !important; animation-delay: 0.1s !important; }
    html body .intro-materials li { animation-duration: 0.35s !important; animation-delay: calc(var(--i, 0) * 20ms + 0.1s) !important; }
    html body .intro-next, html body .intro-now { animation-duration: 0.35s !important; animation-delay: 0.3s !important; }
}
/* transition entre pages (ordinateur) : sortie et entree plus courtes */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 861px) {
    ::view-transition-old(root) { animation-duration: 0.16s !important; }
    ::view-transition-new(root) { animation-duration: 0.3s !important; }
}

/* ====================== Scenes des pages service : texte d'etape plus vif, decor typographique retire ======================
   Le titre, le paragraphe et les pastilles de chaque etape arrivent en ~0,5 s (avant : jusqu'a 1,6 s en cascade, avec un rebond sur les pastilles).
   Le grand numero filaire et la bande de mots defilante derriere les scenes sont du decor pur : retires. */
html body .cine-bignum, html body .cine-ticker { display: none !important; }
html body .cine-tag::after { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s !important; }
html body .cine-word > span { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--w, 0) * 35ms + 40ms) !important; }
html body .cine-text { transition: opacity 0.35s ease 0.15s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s !important; }
html body .cine-chips li {
    transition: opacity 0.3s ease calc(0.2s + var(--c, 0) * 40ms), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) calc(0.2s + var(--c, 0) * 40ms) !important;
}
html body .cine-defs > div {
    transition: opacity 0.3s ease calc(0.2s + var(--c, 0) * 40ms), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) calc(0.2s + var(--c, 0) * 40ms) !important;
}
html body .cine-cases li { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background-color 0.3s ease !important; }


/* logo trace de la page A propos : meme dessin, joue en ~1,4 s au lieu de 5 s ; halo en boucle supprime */
@media (prefers-reduced-motion: no-preference) {
    html body .abl-ln { animation-duration: 0.7s !important; animation-delay: calc(0.1s + var(--i, 0) * 0.06s) !important; }
    html body .abl-fl { animation-duration: 0.5s !important; animation-delay: calc(0.5s + var(--i, 0) * 0.05s) !important; }
    html body .abl-fl-line { animation-duration: 0.5s !important; animation-delay: 0.9s !important; }
    html body .abl-ch { animation-duration: 0.6s, 0.4s !important; animation-delay: calc(0.7s + var(--i, 0) * 0.05s), calc(1.1s + var(--i, 0) * 0.05s) !important; }
    html body .ab-logo-bg::before, html body .abl-bead, html body .abl-shine,
    html body .ab-live i::after, html body .hero-tag-b i::after { animation: none !important; }
    html body .abl-bead, html body .abl-shine,
    html body .ab-live i::after, html body .hero-tag-b i::after { opacity: 0 !important; }
}

/* ====================== Boucles d'ambiance restantes (contact, pages service) ======================
   Anneaux, ondes, balayages et lueurs en boucle : retires. Les saisies et messages du hero contact et le dessin du cafe (le recit) continuent. */
html body .cc-ripple, html body .cc-orbit, html body .cc-compose-send::after,
html body .cm-halo, html body .cm-ripple, html body .cm-scan, html body .cm-steam, html body .cm-float,
html body .cm-status.is-open i::after, html body .cf-step.is-current .cf-num::after, html body .cl-pin i,
html body .svm-intro[data-topic="reproduction"] .svm-backdrop::after, html body .svm-intro .intro-kicker::after,
html body .svm-scroll i::after, html body .svm-live i::after,
html body .cine-accent > span, html body .cine[data-cine="printer"] .cine-vignette::after { animation: none !important; }
html body .cc-ripple, html body .cc-compose-send::after, html body .cm-halo, html body .cm-ripple, html body .cm-scan,
html body .cm-status.is-open i::after, html body .cf-step.is-current .cf-num::after,
html body .svm-intro .intro-kicker::after, html body .svm-scroll i::after, html body .svm-live i::after { opacity: 0 !important; }
html body .cc-chip { animation: introFade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
html body .cine-accent > span { background: none !important; -webkit-text-fill-color: #7fd3ff !important; color: #7fd3ff !important; }

/* ====================== Cartes de service (accueil) : une seule apparition, synchrone ======================
   Avant : deux mecanismes en meme temps (reveal-on-scroll + is-in), un rideau en clip-path de 1,25 s, une echelle de 1,8 s, une derive infinie,
   un viseur et un parallaxe au curseur, un compteur de prix : chaque element avait son propre rythme, d'ou le decalage et les saccades.
   Maintenant : la carte et son rendu apparaissent ensemble, en un fondu de 0,5 s ; les deux cartes d'une rangee partent a 70 ms d'ecart. */
html body .services.services-anim .service-card { opacity: 0; transform: translateY(12px); }
html body .services.services-anim .service-card.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease var(--card-delay, 0s), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--card-delay, 0s), border-color 0.25s ease !important;
}
html body .services.services-anim .service-card-media .svc-photo,
html body .services.services-anim .service-card.is-in .service-card-media .svc-photo {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}
html body .service-card:hover .svc-photo { transform: none !important; }
html body .service-card-media .cx-h, html body .service-card-media .cx-v, html body .service-card-media .cx-label, html body .service-card .sv-scan { display: none !important; }