/* ========================================================= Bilan de competences - animations des pages publiques. Trois briques, toutes pilotees par public/js/scroll-nav.js : 1. revelation progressive des blocs a l'entree dans l'ecran 2. invitation a faire defiler, au bas du premier ecran 3. reperes de section (points a droite + barre de progression) Regles : - aucune couleur en dur : uniquement les variables de la charte (marque blanche, voir public/css/style.css) - la classe `js-motion` est posee sur PAR LE SCRIPT : sans JavaScript, rien n'est masque et la page reste entierement lisible - tout est neutralise si l'utilisateur demande moins d'animations ========================================================= */ /* ---------------------- 1. Revelation au defilement ---------------------- */ .js-motion [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .js-motion [data-reveal].is-in { opacity: 1; transform: none; } /* Une fois l'animation jouee, on libere le compositeur. */ .js-motion [data-reveal].is-done { will-change: auto; } /* Entree du premier ecran, des le chargement (sans attendre le defilement) */ .js-motion .hero [data-reveal] { transform: translateY(26px); } /* ------------------- 2. Invitation a faire defiler ----------------------- */ .scroll-cue { display: flex; align-items: center; gap: .7rem; margin: 2.4rem 0 0; padding: .5rem .9rem .5rem .55rem; /* Element pose sur la banniere : il suit les jetons de banniere, donc le theme clair comme le theme sombre. */ background: var(--hero-veil); border: 1px solid var(--hero-veil-line); border-radius: 999px; color: var(--hero-text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .15s ease, opacity .4s ease; } .scroll-cue:hover { background: var(--hero-veil-strong); transform: translateY(2px); } .scroll-cue:focus-visible { outline: 2px solid var(--hero-text); outline-offset: 3px; } /* La souris stylisee : la molette descend en boucle. */ .scroll-cue-mouse { position: relative; flex: 0 0 auto; width: 22px; height: 34px; border: 2px solid var(--hero-text); border-radius: 12px; opacity: .9; } .scroll-cue-wheel { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--hero-text); animation: cue-wheel 1.8s ease-in-out infinite; } .scroll-cue-chevron { animation: cue-bounce 1.8s ease-in-out infinite; } @keyframes cue-wheel { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(11px); opacity: .15; } 70% { transform: translateY(0); opacity: 0; } } @keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* Elle s'efface des que la personne a compris et commence a descendre. */ .scroll-cue.is-hidden { opacity: 0; pointer-events: none; } /* --------------- 3. Reperes de section et progression -------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-light), var(--accent)); transition: width .12s linear; } .section-nav { position: fixed; right: 1.1rem; top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; gap: .55rem; padding: .6rem .45rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transition: opacity .35s ease; } .section-nav.is-visible { opacity: 1; } .section-dot { position: relative; width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; } .section-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background .2s ease, transform .2s ease; } .section-dot:hover::after { background: var(--accent); transform: scale(1.25); } .section-dot[aria-current="true"]::after { background: var(--accent); transform: scale(1.5); } .section-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 50%; } /* Libelle de la section au survol / au focus */ .section-dot span { position: absolute; right: calc(100% + .6rem); top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; background: var(--panel-bg); color: var(--panel-text); font-size: .78rem; font-weight: 600; padding: .25rem .7rem; border-radius: var(--radius-sm); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .section-dot:hover span, .section-dot:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); } /* Les sections visees se placent sous l'en-tete collant. */ .js-motion main > section { scroll-margin-top: 84px; } @media (max-width: 1100px) { .section-nav { display: none; } } /* ------------------------- Confort et accessibilite ---------------------- */ @media (prefers-reduced-motion: reduce) { .js-motion [data-reveal] { opacity: 1; transform: none; transition: none; } .scroll-cue-wheel, .scroll-cue-chevron { animation: none; } .scroll-progress span { transition: none; } .section-nav { transition: none; } } @media print { .scroll-cue, .section-nav, .scroll-progress { display: none !important; } .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ========================================================= 4. Mouvement continu : premier ecran, cartes, chiffres ========================================================= */ /* ------------------ Sens d'arrivee des blocs reveles ------------------- */ .js-motion [data-reveal="up"] { transform: translateY(28px); } .js-motion [data-reveal="zoom"] { transform: translateY(20px) scale(.94); } .js-motion [data-reveal="left"] { transform: translateX(-44px); } .js-motion [data-reveal="right"] { transform: translateX(44px); } .js-motion [data-reveal].is-in { transform: none; } /* --------------------- Premier ecran : arriere-plan -------------------- */ .hero { position: relative; overflow: hidden; } .hero > * { position: relative; z-index: 1; } /* Deux halos derivent lentement derriere le contenu : l'ecran n'est jamais completement immobile, meme sans interaction. */ .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } .hero::before { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -20%; right: -6%; background: radial-gradient(circle, var(--hero-veil-strong) 0%, transparent 70%); animation: halo-droite 26s ease-in-out infinite; } .hero::after { width: 40vw; height: 40vw; max-width: 540px; max-height: 540px; bottom: -26%; left: -8%; background: radial-gradient(circle, var(--hero-veil) 0%, transparent 70%); animation: halo-gauche 34s ease-in-out infinite; } @keyframes halo-droite { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-7%, 9%, 0) scale(1.16); } } @keyframes halo-gauche { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); } 50% { transform: translate3d(9%, -8%, 0) scale(.92); } } /* Parallaxe : le contenu remonte plus lentement que la page et s'efface. */ .js-motion .hero-grid { transform: translate3d(0, calc(var(--parallaxe, 0px) * -1), 0); opacity: var(--voile, 1); will-change: transform, opacity; } /* ------------------------ Titre, mot par mot --------------------------- */ .js-motion .hero h1 .mot { display: inline-block; opacity: 0; transform: translateY(28px) rotate(3deg); animation: mot-entree .75s cubic-bezier(.22, .61, .36, 1) forwards; } @keyframes mot-entree { to { opacity: 1; transform: none; } } /* ------------- Carte du parcours : flottement et inclinaison ----------- */ .hero-card { position: relative; overflow: hidden; } .js-motion .hero-card { animation: flottement 7.5s ease-in-out infinite; transition: box-shadow .3s ease; will-change: transform; } .js-motion .hero-card:hover { box-shadow: 0 22px 45px -18px rgba(0, 0, 0, .55); } /* L'inclinaison suit la souris : --tx / --ty sont posees par le script. */ @keyframes flottement { 0%, 100% { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translate3d(0, 0, 0); } 50% { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translate3d(0, -11px, 0); } } /* Un reflet balaie la carte de temps en temps. */ .js-motion .hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, var(--hero-veil-strong) 46%, transparent 60%); transform: translateX(-130%); animation: reflet 9s ease-in-out infinite; pointer-events: none; } @keyframes reflet { 0%, 62% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } } /* Les etapes de la carte arrivent l'une apres l'autre. */ .js-motion .hero-card li { opacity: 0; transform: translateX(-14px); animation: etape-entree .6s ease forwards; } .js-motion .hero-card li:nth-child(1) { animation-delay: .55s; } .js-motion .hero-card li:nth-child(2) { animation-delay: .68s; } .js-motion .hero-card li:nth-child(3) { animation-delay: .81s; } .js-motion .hero-card li:nth-child(4) { animation-delay: .94s; } .js-motion .hero-card li:nth-child(5) { animation-delay: 1.07s; } @keyframes etape-entree { to { opacity: 1; transform: none; } } /* --------------------------- Badges du hero ---------------------------- */ .js-motion .hero-badges span { transition: transform .2s ease, color .2s ease; } .js-motion .hero-badges span:hover { transform: translateY(-3px); color: var(--hero-text); } /* ------------------- Cartes : relief au survol -------------------------- */ .js-motion .card, .js-motion .price-box { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease; } .js-motion .card:hover, .js-motion .price-box:hover { transform: translateY(-7px); box-shadow: var(--shadow), 0 20px 38px -18px rgba(16, 38, 63, .38); } .js-motion .phase-card:hover { border-color: var(--accent); } /* Le numero de phase se decolle legerement avec la carte. */ .js-motion .phase-card .phase-num { transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .js-motion .phase-card:hover .phase-num { transform: translateY(-4px) scale(1.06); } /* --------------------- Etapes : numeros qui pulsent -------------------- */ .js-motion .steps-num { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s ease; } .js-motion .steps li:hover .steps-num { transform: scale(1.14); } .js-motion .steps li.is-in .steps-num { animation: num-pop .55s cubic-bezier(.34, 1.56, .64, 1) .1s both; } @keyframes num-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* ------------------------- Chiffres cles ------------------------------- */ .js-motion .stat-value { font-variant-numeric: tabular-nums; /* la largeur ne saute pas pendant le comptage */ transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); } .js-motion .stat:hover .stat-value { transform: scale(1.08); } /* --------------------- Appel a l'action : respiration ------------------ */ /* Les trois boutons qui menent a la demande de devis respirent en continu : un leger soulevement et un halo qui se diffuse. C'est le seul element de la page a bouger sans qu'on l'ait sollicite — d'ou une amplitude faible. Le halo reprend l'ombre du bouton, donc la couleur de la charte. */ .js-motion .nav .btn-primary, .js-motion .hero-actions .btn-primary, .js-motion .cta .btn-primary { animation: respiration 3.4s ease-in-out infinite; } /* Au survol, la main reprend : l'animation s'efface pour laisser le soulevement habituel du bouton. */ .js-motion .nav .btn-primary:hover, .js-motion .hero-actions .btn-primary:hover, .js-motion .cta .btn-primary:hover { animation: none; } @keyframes respiration { 0%, 100% { transform: none; box-shadow: 0 6px 16px var(--btn-shadow), 0 0 0 0 var(--btn-shadow); } 50% { transform: translateY(-2px); box-shadow: 0 10px 22px var(--btn-shadow), 0 0 0 12px transparent; } } /* ----------------------- Boutons : reflet au survol -------------------- */ .js-motion .btn-primary { position: relative; overflow: hidden; } .js-motion .btn-primary::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: translateX(-180%) skewX(-18deg); transition: transform .6s ease; pointer-events: none; } .js-motion .btn-primary:hover::after { transform: translateX(320%) skewX(-18deg); } /* --------------------------- Mouvement reduit -------------------------- */ @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after, .js-motion .hero-card, .js-motion .hero-card::after, .js-motion .hero-card li, .js-motion .hero h1 .mot, .js-motion .steps li.is-in .steps-num, .js-motion .nav .btn-primary, .js-motion .hero-actions .btn-primary, .js-motion .cta .btn-primary { animation: none !important; } .js-motion .hero h1 .mot, .js-motion .hero-card li { opacity: 1; transform: none; } .js-motion .hero-grid { transform: none; opacity: 1; } .js-motion [data-reveal] { transform: none !important; } .js-motion .card:hover, .js-motion .price-box:hover { transform: none; } } @media print { .hero::before, .hero::after, .js-motion .hero-card::after { display: none !important; } .js-motion .hero h1 .mot, .js-motion .hero-card li { opacity: 1 !important; animation: none !important; } }