/* ============================================================ BREA — Animations ============================================================ */ /* ---------- Entrée du hero (toutes les pages) ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .hero h1 { animation: fadeUp 0.8s ease-out both; } .hero p { animation: fadeUp 0.8s ease-out 0.25s both; } .hero .btn { animation: fadeUp 0.8s ease-out 0.5s both; } /* ---------- ANIMATION PRINCIPALE : le logo BREA se construit ---------- */ .hero-anime { position: relative; overflow: hidden; } .hero-anime .hero-contenu { position: relative; z-index: 2; } /* Le logo flotte doucement une fois construit */ @keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .logo-hero { display: block; width: 320px; max-width: 75%; margin: 0 auto 16px auto; animation: flotter 6s ease-in-out 3.5s infinite; /* légère ombre sous le cartouche clair du logo */ filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28)); } /* Chaque bâtiment du logo sort du sol, l'un après l'autre */ @keyframes monter { 0% { transform: translateY(330px); } 75% { transform: translateY(-8px); } 100% { transform: translateY(0); } } .logo-hero .lb { animation: monter 1s cubic-bezier(0.22, 0.9, 0.35, 1) both; } .logo-hero .lb1 { animation-delay: 0.10s; } .logo-hero .lb2 { animation-delay: 0.28s; } .logo-hero .lb5 { animation-delay: 0.46s; } .logo-hero .lb4 { animation-delay: 0.64s; } .logo-hero .lb6 { animation-delay: 0.82s; } .logo-hero .lb3 { animation-delay: 1.00s; } /* la tour centrale termine la construction */ /* Les lettres B·R·E·A apparaissent une à une */ @keyframes apparaitre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .logo-hero .lettre { opacity: 0; /* animation CSS pure, s'affiche même sans JS */ animation: apparaitre 0.45s ease-out both; } .logo-hero .lettre1 { animation-delay: 1.55s; } .logo-hero .lettre2 { animation-delay: 1.70s; } .logo-hero .lettre3 { animation-delay: 1.85s; } .logo-hero .lettre4 { animation-delay: 2.00s; } .logo-hero .tagline { opacity: 0; animation: apparaitre 0.6s ease-out 2.3s both; } /* Le texte du hero attend la fin de la construction du logo */ .hero-anime h1 { animation-delay: 1.2s; } .hero-anime p { animation-delay: 1.45s; } .hero-anime .btn { animation-delay: 1.7s; } /* ---------- Révélation au scroll ---------- Le masquage initial n'est appliqué QUE si JavaScript est actif (classe .js posée sur par un script inline dans le ). Sans JS, tout le contenu reste visible. */ .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .js .reveal.visible { opacity: 1; transform: translateY(0); } .js .reveal.delai-1 { transition-delay: 0.12s; } .js .reveal.delai-2 { transition-delay: 0.24s; } .js .reveal.delai-3 { transition-delay: 0.36s; } /* ---------- Cartes : survol vivant ---------- */ .pilier, .contact-bloc { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .pilier:hover, .contact-bloc:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(16, 35, 67, 0.15); } .pilier:hover { border-top-color: #102343; } @keyframes rebond { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 70% { transform: translateY(2px); } } .pilier:hover .icone { display: inline-block; animation: rebond 0.6s ease; } /* ---------- Boutons ---------- */ .btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); } @keyframes pulser { 0% { box-shadow: 0 0 0 0 rgba(121, 29, 48, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(121, 29, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(121, 29, 48, 0); } } .btn-urgence, .urgence-flottant { animation: pulser 2s ease-out infinite; } /* ---------- Compteurs ---------- */ .chiffre .valeur { transition: color 0.3s ease; } .chiffre.compte .valeur { color: #102343; } /* ---------- Lien nav : soulignement animé ---------- */ .main-nav a:not(.btn) { position: relative; } .main-nav a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 100%; bottom: 2px; height: 2px; background-color: #791d30; transition: right 0.3s ease; } .main-nav a:not(.btn):hover::after, .main-nav a:not(.btn).active::after { right: 12px; } /* ---------- Accessibilité : réduction de mouvement ---------- */ @media (prefers-reduced-motion: reduce) { .hero h1, .hero p, .hero .btn, .logo-hero, .logo-hero .lb, .logo-hero .lettre, .logo-hero .tagline, .btn-urgence, .urgence-flottant { animation: none !important; } .logo-hero .lettre, .logo-hero .tagline { opacity: 1; } .js .reveal { opacity: 1; transform: none; transition: none; } .pilier, .contact-bloc, .btn { transition: none; } }