/* ========================================================================== THEME.CSS - Variables globales (couleurs, typo, dimensions, surfaces) - Animations globales (utilisées dans layout.css + reference.css + pages) - Objectif : centraliser le "design system" du site ========================================================================== */ /* ========================================================================== 1) DESIGN TOKENS (Variables CSS) ========================================================================== */ :root { /* ---------------------------------------------------------------------- Couleurs principales ---------------------------------------------------------------------- - primary-color : base sombre (fond / structure) - secondary-color : bleu principal (accent / néon) - tertiary-color : bleu clair (glow / dégradés) ---------------------------------------------------------------------- */ --primary-color: #0f172a; --secondary-color: #3b82f6; --tertiary-color: #60a5fa; /* ---------------------------------------------------------------------- Couleurs de texte ---------------------------------------------------------------------- - text-color : texte sur fond sombre (header, éléments néon) - text-color-dark : texte sur fond clair (contenu principal) ---------------------------------------------------------------------- */ --text-color: #ffffff; --text-color-dark: #1f2937; /* ---------------------------------------------------------------------- Backgrounds layout (utilisés dans layout.css) ---------------------------------------------------------------------- - bg-header : dégradé du header principal - bg-acceuil : fond de la topbar (barre d'accueil) ---------------------------------------------------------------------- */ --bg-header: linear-gradient(90deg, #16233d 0%, #243354 100%); --bg-acceuil: rgba(22,35,61,0.9); /* ---------------------------------------------------------------------- Typographie (police globale du site) ---------------------------------------------------------------------- */ --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* ---------------------------------------------------------------------- UI / Composants (valeurs génériques) ---------------------------------------------------------------------- - hover-color : bleu hover (si utilisé) - border-radius : arrondi global - transition-speed : vitesse standard des transitions ---------------------------------------------------------------------- */ --hover-color: #2563eb; --border-radius: 0.5rem; --transition-speed: 0.3s; /* ---------------------------------------------------------------------- Dimensions utilisées par layout.css ---------------------------------------------------------------------- Centraliser ici évite les valeurs en dur dans layout.css ---------------------------------------------------------------------- */ --logo-height: 10rem; /* hauteur du logo desktop */ --icon-size: 3rem; /* icônes topbar */ --header-gap: 2rem; /* espacement entre logo et menu */ --menu-size: 1.5rem; /* taille texte menu */ --accueil-size: 1.1rem; /* taille texte topbar */ /* ---------------------------------------------------------------------- Surfaces utilisées par reference.css (backgrounds "cartes"/sections) ---------------------------------------------------------------------- Objectif : garder une cohérence sur toutes les pages (vitrine pro) ---------------------------------------------------------------------- */ --surface-bg: rgba(214, 222, 231, 0.95); --intro-bg: rgba(200, 221, 245, 0.92); --border-soft: rgba(96,165,250,0.25); } /* ========================================================================== 2) ANIMATIONS GLOBALES (layout) ========================================================================== */ /* Animation "glow" du logo (header) */ @keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 10px var(--secondary-color)) drop-shadow(0 0 20px var(--tertiary-color)); } 50% { filter: drop-shadow(0 0 15px var(--secondary-color)) drop-shadow(0 0 25px var(--tertiary-color)); } } /* Pulse néon sur texte (ex: menu) */ @keyframes neonPulse { 0%, 100% { text-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--tertiary-color); } 50% { text-shadow: 0 0 8px var(--secondary-color), 0 0 15px var(--tertiary-color); } } /* Animation néon pour les icônes du footer */ @keyframes neonFooter { 0%, 100% { text-shadow: 0 0 3px var(--secondary-color), 0 0 6px var(--tertiary-color); } 50% { text-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--tertiary-color); } } /* ========================================================================== 3) ANIMATIONS "PAGE REFERENCE" (reference.css / page d'accueil) ========================================================================== */ /* Animation de contour (SVG) : effet de tracé */ @keyframes borderMove { /* AJOUT PRO : 378.3 correspond au périmètre mathématique exact du cadre pour que la boucle soit parfaite */ from { stroke-dashoffset: 378.3; } to { stroke-dashoffset: 0; } } /* Effet flottant (hero / bloc principal) */ @keyframes floatHero { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Ligne de séparation "pulse" (hero) */ @keyframes linePulse { 0%, 100% { width: 70px; opacity: 0.7; } 50% { width: 110px; opacity: 1; } } /* Effet flottant des cartes de services */ @keyframes floatServices { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Ligne de séparation "pulse" (services) */ @keyframes linePulseServices { 0%, 100% { width: 78px; opacity: 0.75; } 50% { width: 82px; opacity: 1; } } /* ========================================================================== 4) ANIMATIONS ASSISTANCE (si utilisées sur la page Assistance) ========================================================================== */ /* Pulse bleu sur les ombres (effet "néon" plus marqué) */ @keyframes pulseBlue { 0% { box-shadow: 0 0 25px rgba(59,130,246,0.3), 0 0 40px rgba(96,165,250,0.2), 0 0 60px rgba(96,165,250,0.15); } 100% { box-shadow: 0 0 35px rgba(59,130,246,0.5), 0 0 50px rgba(96,165,250,0.35), 0 0 70px rgba(96,165,250,0.25); } } /* ========================================================================== 5) ANIMATIONS CONTACT (page Contact) ========================================================================== */ /* Boucle d'animation sur border SVG (contact) */ @keyframes borderLoopContact { to { stroke-dashoffset: 0; } } /* Flottement léger (contact) */ @keyframes floatContact { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Pulse de validation (ex: message envoyé / succès) */ @keyframes validPulse { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(34,197,94,0); } 50% { transform: scale(1.015); box-shadow: 0 0 10px rgba(34,197,94,0.6); } 100% { transform: scale(1); box-shadow: 0 0 6px rgba(34,197,94,0.45); } } /* Loader d’envoi (barre animée) */ @keyframes sendLoader { from { background-position: 0 0; } to { background-position: 24px 0; } } /* ========================================================================== 6) ANIMATIONS MENTIONS LEGALES (pages légales) ========================================================================== */ /* Flottement léger des blocs légaux */ @keyframes legalFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Ligne "pulse" sur pages légales */ @keyframes pulseLine { 0%, 100% { width: 120px; opacity: .8; } 50% { width: 180px; opacity: 1; } }