/* ========================================================================== KRIMECH CARDIO — Couche mouvement et matière Chargée après main.css. Additive : elle n'annule aucune règle métier. Règle absolue de performance : on n'anime que `transform` et `opacity`. Ces deux propriétés sont composées par le GPU et ne déclenchent ni « layout » ni « paint », seule façon de tenir 60 FPS de façon fiable. Sommaire : 1. Préférence de mouvement réduit 6. Cartes 2. Apparitions au défilement 7. Boutons 3. Séquencement (stagger) 8. Header 4. Flottement & parallaxe 9. Accordéon 5. Matière (verre, grain, filets) 10. Squelettes de chargement ========================================================================== */ /* ========================================================================== 1. PRÉFÉRENCE DE MOUVEMENT RÉDUIT Déclarée en premier pour que l'intention soit lisible d'emblée : tout le reste du fichier est du confort, jamais de l'information. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; } .float, .float--slow, .float--delay { animation: none !important; } } /* ========================================================================== 2. APPARITIONS AU DÉFILEMENT L'état initial n'est appliqué que si JS a pris la main (classe `js-motion` posée sur ). Sans JavaScript, le contenu reste visible : une panne de script ne doit jamais rendre le site illisible. ========================================================================== */ .js-motion .reveal, .js-motion .reveal-up { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--d-lg) var(--ease-out-expo), transform var(--d-lg) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); will-change: transform, opacity; } .js-motion .reveal-left { opacity: 0; transform: translate3d(-32px, 0, 0); transition: opacity var(--d-lg) var(--ease-out-expo), transform var(--d-lg) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); } .js-motion .reveal-right { opacity: 0; transform: translate3d(32px, 0, 0); transition: opacity var(--d-lg) var(--ease-out-expo), transform var(--d-lg) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); } .js-motion .reveal-scale { opacity: 0; transform: scale3d(.955, .955, 1); transition: opacity var(--d-lg) var(--ease-out-expo), transform var(--d-lg) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); } /* État visible — commun à toutes les variantes. */ .js-motion .reveal.is-visible, .js-motion .reveal-up.is-visible, .js-motion .reveal-left.is-visible, .js-motion .reveal-right.is-visible, .js-motion .reveal-scale.is-visible { opacity: 1; transform: none; } /* Une fois l'élément arrivé, on rend la main au navigateur. */ .js-motion .is-visible { will-change: auto; } /* ========================================================================== 3. SÉQUENCEMENT `--i` est posé par le JS sur chaque enfant d'un conteneur `[data-stagger]`. ========================================================================== */ .js-motion [data-stagger] > * { --reveal-delay: calc(var(--i, 0) * var(--stagger)); } /* ========================================================================== 4. FLOTTEMENT & PARALLAXE ========================================================================== */ @keyframes kc-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } .float { animation: kc-float 7s var(--ease-in-out) infinite; } .float--slow { animation: kc-float 11s var(--ease-in-out) infinite; } .float--delay { animation-delay: -3.5s; } /* La parallaxe est pilotée par le JS, qui écrit `--py` en pixels. */ .parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* Halo animé du hero : très lent, très diffus, quasi subliminal. */ @keyframes kc-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(2%, -1.5%, 0) scale(1.04); } 66% { transform: translate3d(-1.5%, 1%, 0) scale(.98); } } .mesh-drift { animation: kc-drift 26s var(--ease-in-out) infinite; } /* ========================================================================== 5. MATIÈRE ========================================================================== */ /* --- Grain : casse le côté « aplat numérique » des grandes surfaces ----- */ .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .section--dark.grain::after { mix-blend-mode: overlay; opacity: .05; } /* --- Filet lumineux en haut d'une surface ------------------------------ */ .hairline { position: relative; } .hairline::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--g-hairline); pointer-events: none; } .section--dark .hairline::before, .hairline--dark::before { background: var(--g-hairline-dark); } /* --- Mot-clé en dégradé ------------------------------------------------ */ .text-gradient { background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; /* Repli si background-clip:text n'est pas supporté. */ -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .text-gradient { color: var(--c-primary); -webkit-text-fill-color: currentColor; } } /* ========================================================================== 6. CARTES Élévation au survol + bordure dégradée révélée par masque. Le masque évite d'avoir à empiler un pseudo-élément opaque par-dessus le contenu : la bordure se dessine, le texte reste sélectionnable. ========================================================================== */ .card { position: relative; background: var(--g-surface); box-shadow: var(--e-1); transition: transform var(--d-md) var(--ease-out-expo), box-shadow var(--d-md) var(--ease-out-expo), border-color var(--d-md) var(--ease-out-expo); } .card--hover:hover, .card--hover:focus-within { transform: translate3d(0, -6px, 0); box-shadow: var(--e-4); border-color: transparent; } /* Bordure dégradée, invisible au repos. */ .card--hover::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--g-border); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--d-md) var(--ease-out-expo); pointer-events: none; } .card--hover:hover::before, .card--hover:focus-within::before { opacity: 1; } .section--dark .card { background: linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); box-shadow: none; } /* --- Pastille d'icône : léger relief + réaction au survol de la carte --- */ .icon-badge { background: var(--g-sand); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px rgba(156, 59, 48, .10); transition: transform var(--d-md) var(--ease-spring), box-shadow var(--d-md) var(--ease-out-expo); } .card--hover:hover .icon-badge { transform: translate3d(0, -2px, 0) scale(1.06) rotate(-3deg); box-shadow: 0 6px 18px rgba(156, 59, 48, .20); } .section--dark .icon-badge { background: rgba(255,255,255,.09); box-shadow: 0 1px 0 rgba(255,255,255,.10) inset; } /* ========================================================================== 7. BOUTONS Reflet qui balaie la surface au survol. ========================================================================== */ .btn { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--d-sm) var(--ease-spring), box-shadow var(--d-sm) var(--ease-out-expo), background var(--d-sm) var(--ease-out-expo), color var(--d-sm) var(--ease-out-expo); } .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-110%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: transform var(--d-lg) var(--ease-out-expo); pointer-events: none; } .btn:hover::after { transform: translateX(110%) skewX(-18deg); } .btn--primary { background: var(--g-primary); box-shadow: var(--e-glow); } .btn--primary:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 14px 34px rgba(156, 59, 48, .34); } .btn--dark { background: var(--g-secondary); } .btn--dark:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--e-3); } .btn--outline { backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); } .btn--outline:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--e-2); } .btn--whatsapp:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 12px 28px rgba(37, 211, 102, .32); } /* La flèche accompagne le mouvement. */ .btn svg { transition: transform var(--d-sm) var(--ease-out-expo); } .btn:hover svg:last-child { transform: translateX(3px); } /* ========================================================================== 8. HEADER Verre dépoli une fois la page défilée. ========================================================================== */ .site-header { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: background var(--d-md) var(--ease-out-expo), box-shadow var(--d-md) var(--ease-out-expo), border-color var(--d-md) var(--ease-out-expo); } .site-header.is-scrolled { background: var(--glass-bg); border-bottom-color: transparent; box-shadow: var(--e-2); } /* Soulignement animé des entrées de navigation. */ .nav > ul > li > a { position: relative; } .nav > ul > li > a::before { content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 6px; height: 2px; border-radius: 2px; background: var(--g-primary); transform: scaleX(0); transform-origin: right; transition: transform var(--d-md) var(--ease-out-expo); } .nav > ul > li > a:hover::before, .nav > ul > li.current-menu-item > a::before, .nav > ul > li.current_page_item > a::before { transform: scaleX(1); transform-origin: left; } /* Le tiroir mobile n'a pas de soulignement. */ @media (max-width: 900px) { .nav > ul > li > a::before { display: none; } .nav { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); } } /* Icône téléphone : pulsation discrète, une fois de temps en temps. */ @keyframes kc-ring { 0%, 88%, 100% { transform: scale(1); } 91% { transform: scale(1.12) rotate(-8deg); } 94% { transform: scale(1.08) rotate(7deg); } } .header-phone__icon { animation: kc-ring 9s var(--ease-in-out) infinite; } .header-phone:hover .header-phone__icon { animation-play-state: paused; } /* ========================================================================== 9. ACCORDÉON FAQ `
` n'anime pas nativement : le JS mesure la hauteur et la pose dans `--faq-h`, on anime ensuite une grille — sans reflow du contenu. ========================================================================== */ .faq__item { transition: border-color var(--d-md) var(--ease-out-expo), box-shadow var(--d-md) var(--ease-out-expo), transform var(--d-md) var(--ease-out-expo); } .faq__item:hover { box-shadow: var(--e-2); } .faq__item[open] { box-shadow: var(--e-3); border-color: transparent; background: var(--g-surface); } .faq__q::after { transition: transform var(--d-md) var(--ease-spring); } .js-motion .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-md) var(--ease-out-expo); } .js-motion .faq__item[open] .faq__a { grid-template-rows: 1fr; } .js-motion .faq__a > * { overflow: hidden; } /* ========================================================================== 10. SQUELETTES DE CHARGEMENT Utilisés par kc_theme_image() tant qu'un visuel n'est pas déposé. ========================================================================== */ @keyframes kc-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skeleton { position: relative; overflow: hidden; background: var(--c-sand-soft); } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: kc-shimmer 1.8s var(--ease-in-out) infinite; } /* ========================================================================== 11. ENTRÉE DE PAGE Voile très court au chargement : masque le dernier repaint des polices sans jamais retarder l'affichage du contenu (le contenu est déjà là). ========================================================================== */ @keyframes kc-page-in { from { opacity: 0; } to { opacity: 1; } } .js-motion body { animation: kc-page-in var(--d-md) var(--ease-out-quart) both; } /* ========================================================================== 11 bis. HERO ========================================================================== */ .hero { background: var(--g-mesh), linear-gradient(180deg, var(--c-bg) 0%, var(--c-surface) 100%); position: relative; isolation: isolate; } /* Couche de halo animée, posée derrière le contenu. */ .hero__aura { position: absolute; inset: -20% -10%; z-index: -1; background: var(--g-mesh); pointer-events: none; filter: blur(10px); } /* Cadre du visuel : dégradé de fond + léger relief. */ .hero__media { perspective: 1200px; } .hero__frame { position: relative; border-radius: var(--r-2xl); overflow: hidden; background: var(--g-sand); box-shadow: var(--e-4); } .hero__frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; pointer-events: none; } .hero__img { border-radius: 0; box-shadow: none; } /* Carte flottante en verre. */ .hero__badge { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--e-4); align-items: flex-start; } /* Les deux lignes étaient des inline : le texte coulait à la suite du titre. On force l'empilement. */ .hero__badge-title, .hero__badge-text { display: block; } /* Hero plus compact : le bouton principal doit rester dans le premier écran. */ .hero { padding-block: clamp(2.5rem, 4vw, 4rem); } .hero__title { margin-top: var(--s-4); } .hero__text { margin-top: var(--s-4); } .hero__actions { margin-top: var(--s-6); } .hero__trust { margin-top: var(--s-6); padding-top: var(--s-5); } /* Les trois actions doivent tenir sur une seule ligne : un bouton isolé sur un deuxième rang lit comme une action secondaire, ce qu'il n'est pas. */ .hero__actions .btn { padding-inline: var(--s-5); } .hero__grid { grid-template-columns: 1.12fr .88fr; } @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; } } /* Pastilles décoratives autour du visuel. */ .hero__orb { position: absolute; border-radius: var(--r-full); background: var(--glass-bg); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-border); box-shadow: var(--e-3); display: grid; place-items: center; color: var(--c-primary); pointer-events: none; } .hero__orb--1 { width: 62px; height: 62px; top: 8%; left: -26px; } .hero__orb--2 { width: 52px; height: 52px; top: 46%; right: -20px; } .hero__orb--3 { width: 46px; height: 46px; bottom: 22%; left: -16px; } @media (max-width: 640px) { .hero__orb { display: none; } } /* Marqueurs de confiance : ligne fine et réaction au survol. */ .hero__trust li { transition: transform var(--d-sm) var(--ease-out-expo), color var(--d-sm) var(--ease-out-expo); } .hero__trust li:hover { transform: translateY(-2px); color: var(--c-text); } /* ========================================================================== 11 ter. EN-TÊTES DE SECTION & CHIFFRES ========================================================================== */ .eyebrow { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: 1px solid rgba(183, 68, 55, .18); box-shadow: var(--e-1); } .section--dark .eyebrow { background: rgba(255,255,255,.08); border-color: var(--glass-border-dark); box-shadow: none; } /* Bloc de chiffre-clé. */ .fact__num { background: var(--g-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .section--dark .fact__num { background: linear-gradient(115deg, #E9C9BF, #D1B0A5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Badge de la section praticien. */ .about__badge { background: var(--g-secondary); border: 1px solid var(--glass-border-dark); box-shadow: var(--e-4); } .about__badge strong { font-variant-numeric: tabular-nums; } .about__img, .about__media .skeleton { border-radius: var(--r-2xl); box-shadow: var(--e-4); } /* Liste de diplômes : ligne qui se colore au survol. */ .credentials li { transition: transform var(--d-sm) var(--ease-out-expo); } .credentials li:hover { transform: translateX(4px); } .credentials li:hover .credentials__label { color: var(--c-primary); } .credentials__label { transition: color var(--d-sm) var(--ease-out-expo); } /* Bandeau CTA : dégradé sable + filet. */ .cta-band { background: var(--g-sand); border-color: rgba(209, 176, 165, .5); box-shadow: var(--e-2); position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: var(--g-hairline); } /* ========================================================================== 12. ÉCONOMIE DE RENDU `content-visibility` évite au navigateur de peindre les sections encore hors écran. `contain-intrinsic-size` réserve la place pour que la barre de défilement ne saute pas. ========================================================================== */ .section:not(.hero):not(:first-of-type) { content-visibility: auto; contain-intrinsic-size: auto 640px; }