/* ============================================================ BEAUVOIR CLINIC — motion.css v1.0 Spec : spec-upgrade-cinematique-beauvoir-2026-08 (chantier A + B) Dépend des tokens de css/styles.css (:root) Principe : les éléments restent VISIBLES par défaut. Les états initiaux d'animation ne s'appliquent que si porte la classe .has-motion (ajoutée par motion.js). => zéro contenu masqué sans JS, zéro impact lecteurs d'écran. ============================================================ */ /* ---------- Variables locales ---------- */ :root { --motion-distance: 24px; --motion-duration: 700ms; --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-stagger: 90ms; } /* ============================================================ 1. REVEAL — fondu + translation (effet par défaut) ============================================================ */ .has-motion .reveal, .has-motion .reveal-stagger > * { opacity: 0; transform: translateY(var(--motion-distance)); transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease); will-change: opacity, transform; } .has-motion .reveal.is-visible, .has-motion .reveal-stagger.is-visible > * { opacity: 1; transform: none; will-change: auto; } /* ---------- 2. REVEAL-STAGGER — cascade sur grilles ---------- */ .has-motion .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .has-motion .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 1); } .has-motion .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); } .has-motion .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); } .has-motion .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); } .has-motion .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); } /* Au-delà de 6 : pas de délai supplémentaire (plafond spec) */ /* ============================================================ 3. REVEAL-LINE — titres de section : trait or qui s'étire S'applique au conteneur .section-header (ou tout wrapper de H2) ============================================================ */ .reveal-line { position: relative; } .reveal-line::before { content: ''; display: block; width: 48px; height: 1px; background: var(--gold); margin-bottom: 16px; transform-origin: left center; } .section-header--centered.reveal-line::before { margin-left: auto; margin-right: auto; transform-origin: center; } .has-motion .reveal-line::before { transform: scaleX(0); transition: transform 900ms var(--motion-ease) 200ms; } .has-motion .reveal-line.is-visible::before { transform: scaleX(1); } /* ============================================================ 4. IMG-SETTLE — l'image « se pose » ============================================================ */ .has-motion .img-settle { opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } .has-motion .img-settle.is-visible { opacity: 1; transform: scale(1); } /* ============================================================ 5. MICRO-INTERACTIONS (survol) — actives sans JS ============================================================ */ @media (hover: hover) { .lift { transition: transform 250ms var(--motion-ease), box-shadow 250ms var(--motion-ease); } .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* Flèche des boutons : nécessite un ou final dans le bouton */ .btn .arrow, .btn svg:last-child { transition: transform 250ms var(--motion-ease); } .btn:hover .arrow, .btn:hover svg:last-child { transform: translateX(4px); } /* Soulignement animé des liens de navigation */ .nav a:not(.btn) { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 1px; background-repeat: no-repeat; background-position: left calc(100% - 2px); transition: background-size 300ms var(--motion-ease); } .nav a:not(.btn):hover { background-size: 100% 1px; } } /* ============================================================ 6. HERO — Chantier B, plan B « Ken Burns » + cascade d'entrée Cible la structure existante .hero-v2 de index.html. Le zoom s'applique au calque .hero-v2__bg (image sous voile). ============================================================ */ @keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } .has-motion .hero-v2__bg { animation: kenburns 25s var(--motion-ease) infinite alternate; will-change: transform; } /* Cascade d'apparition : label → titre → texte + CTA (1,2 s au total) */ @keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .has-motion .hero-v2__label { animation: hero-in 600ms var(--motion-ease) 100ms both; } .has-motion .hero-v2 h1 { animation: hero-in 700ms var(--motion-ease) 350ms both; } .has-motion .hero-v2 h1 ~ * { animation: hero-in 700ms var(--motion-ease) 600ms both; } /* ============================================================ 7. GALERIES FICHES TRAITEMENTS — Chantier C Fond d'attente élégant + ratio réservé (CLS nul) Appliquer .media-frame au conteneur des images de galerie. ============================================================ */ .media-frame { background: linear-gradient(160deg, var(--lin) 0%, var(--card-creme, #F5F0E8) 100%); overflow: hidden; } .media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ============================================================ 8. ACCESSIBILITÉ — désactivation totale ============================================================ */ @media (prefers-reduced-motion: reduce) { .has-motion .reveal, .has-motion .reveal-stagger > *, .has-motion .reveal-line::before, .has-motion .img-settle { opacity: 1 !important; transform: none !important; transition: none !important; } .has-motion .hero-v2__bg, .has-motion .hero-v2__label, .has-motion .hero-v2 h1, .has-motion .hero-v2 h1 ~ * { animation: none !important; } .lift, .lift:hover { transform: none; transition: none; } }