/* ============================================================================ enhance.css — couche « peps » : apparition au scroll, Ken Burns, soulignés dorés, lueur CTA, filet doré animé, watermark, transitions de page. Additif : se charge après les autres feuilles, ne casse rien si absent. Tout est neutralisé sous prefers-reduced-motion. ============================================================================ */ /* ---- Transitions de page : désactivées (l'API View Transitions émettait un rejet « Transition was skipped » lors des navigations interrompues). ---- */ /* @view-transition { navigation: auto; } */ /* ============================================================================ 1. APPARITION AU SCROLL Le masquage n'est appliqué QUE si JS a posé .js-reveal sur . Sans JS / si l'observer échoue → le contenu reste visible. Sûr. ============================================================================ */ @media (prefers-reduced-motion: no-preference) { html.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; } html.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; } /* Cascade douce pour les enfants d'une même grille */ html.js-reveal [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.66s var(--ease-out), transform 0.66s var(--ease-out); } html.js-reveal [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; } html.js-reveal [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; } html.js-reveal [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.16s; } html.js-reveal [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.24s; } html.js-reveal [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.32s; } html.js-reveal [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; } } /* ============================================================================ 2. KEN BURNS — zoom lent et continu sur les visuels de hero des sous-pages (le hero de l'accueil a déjà son propre panoramique). ============================================================================ */ @media (prefers-reduced-motion: no-preference) { @keyframes kenburnsLoop { from { transform: scale(1.015); } to { transform: scale(1.085); } } .kenburns-loop { animation: kenburnsLoop 15s ease-in-out infinite alternate; will-change: transform; } } /* ============================================================================ 3. SOULIGNÉ DORÉ sur les liens de contenu (hors nav/boutons/footer) ============================================================================ */ a.link-gold, .rich-text a:not(.btn):not(.navlink):not(.foot-link) { position: relative; text-decoration: none; color: var(--brand-strong); background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: background-size 0.32s var(--ease-out), color 0.2s; } a.link-gold:hover, .rich-text a:not(.btn):not(.navlink):not(.foot-link):hover { background-size: 100% 1.5px; color: var(--green-700); } /* ============================================================================ 4. LUEUR DORÉE PULSÉE — bouton CTA principal « Demander un devis » Halo doux, lent, non clignotant. S'arrête au survol (le bouton se soulève). ============================================================================ */ @media (prefers-reduced-motion: no-preference) { @keyframes ctaGlow { 0%, 100% { box-shadow: 0 10px 26px -12px rgba(var(--rgb-gold-deep), 0.55), 0 0 0 0 rgba(var(--rgb-gold), 0.0); } 50% { box-shadow: 0 12px 30px -10px rgba(var(--rgb-gold-deep), 0.7), 0 0 0 7px rgba(var(--rgb-gold), 0.10); } } .cta-glow { animation: ctaGlow 3.4s ease-in-out infinite; } .cta-glow:hover { animation-play-state: paused; } } /* ============================================================================ 5. FILET DORÉ ANIMÉ — le trait sous l'eyebrow se déploie à l'apparition ============================================================================ */ @media (prefers-reduced-motion: no-preference) { html.js-reveal [data-reveal] .eyebrow-rule, html.js-reveal [data-reveal].is-visible .eyebrow-rule { transform-origin: left center; } html.js-reveal [data-reveal] .eyebrow-rule { transform: scaleX(0); transition: transform 0.6s var(--ease-out) 0.15s; } html.js-reveal [data-reveal].is-visible .eyebrow-rule { transform: scaleX(1); } } /* ============================================================================ 6. WATERMARK CHEVAL — silhouette line-art, très basse opacité ============================================================================ */ .wm-horse { position: relative; } .wm-horse > .wm-horse-img { position: absolute; pointer-events: none; z-index: 0; opacity: 0.06; width: min(46%, 520px); right: -2%; bottom: -8%; filter: none; } .wm-horse > * { position: relative; } .wm-horse > .wm-horse-img { position: absolute; } /* ============================================================================ 7. Image fade-in à la fin du chargement (évite le « pop » brut) ============================================================================ */ img.img-fade { opacity: 0; transition: opacity 0.5s var(--ease-out); } img.img-fade.img-loaded { opacity: 1; }