/**
* Mobile Fix - Shared Stylesheet File
* Implements theme tokens (light/dark), smooth scroll, scroll animations,
* FAQ interactive accordions, and premium micro-interactions.
*/
/* 1. CSS Variable Theme System */
:root {
--surface: #f7f9ff;
--surface-bright: #f7f9ff;
--surface-pure: #FFFFFF;
--background: #f7f9ff;
--on-background: #181c20;
--on-surface: #181c20;
--on-surface-variant: #424753;
--border-subtle: #DADCE0;
--surface-container-low: #f1f4fa;
--surface-container: #ebeef4;
--surface-container-high: #e5e8ee;
--surface-container-highest: #dfe3e8;
--secondary: #5e5e62;
--outline-variant: #c2c6d5;
/* Brand Logo Colors */
--brand-yellow: #f5c518;
--brand-orange: #e04c1a;
}
/* 2. Global Setup */
html {
scroll-behavior: smooth;
scroll-padding-top: 90px; /* Offset for sticky header */
transition: background-color 0.3s ease, color 0.3s ease;
}
body {
font-family: 'Geist', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--background);
color: var(--on-surface);
}
/* 4. Circuit Grid Utility (Subtle High-tech pattern) */
.circuit-grid {
background-image: radial-gradient(circle at 1px 1px, rgba(245, 197, 24, 0.05) 1px, transparent 0);
background-size: 32px 32px;
}
/* 5. Material Symbols configuration */
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.material-symbols-outlined.font-fill {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* 6. Animations */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0px); }
}
@keyframes pulse-subtle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.03); }
}
.animate-float {
animation: float 4s ease-in-out infinite;
}
.animate-pulse-subtle {
animation: pulse-subtle 3s ease-in-out infinite;
}
/* 7. Scroll Reveal System */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
/* 8. Custom Card & Button Interactions */
.premium-card-hover {
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-card-hover:hover {
transform: translateY(-6px);
border-color: rgba(224, 76, 26, 0.35) !important;
box-shadow: 0 20px 25px -5px rgba(224, 76, 26, 0.05),
0 10px 10px -5px rgba(224, 76, 26, 0.03),
0 0 40px -5px rgba(224, 76, 26, 0.06);
}
.btn-premium-action {
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-premium-action:hover {
filter: brightness(0.97);
box-shadow: 0 4px 14px rgba(224, 76, 26, 0.3);
transform: translateY(-1px);
}
.btn-premium-action:active {
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 4px rgba(224, 76, 26, 0.15);
}
/* Nav Link transitions */
.nav-link-transition {
position: relative;
}
.nav-link-transition::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--brand-orange);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link-transition:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.nav-link-active {
color: var(--brand-orange) !important;
font-weight: 700;
}
.nav-link-active::after {
transform: scaleX(1) !important;
}
/* Custom focus states for inputs */
input:focus, textarea:focus, select:focus {
border-color: var(--brand-orange) !important;
box-shadow: 0 0 0 3px rgba(224, 76, 26, 0.2) !important;
outline: none !important;
}
/* Premium Orange/Gold Flash Card Highlight Animation */
@keyframes gold-flash {
0% { border-color: var(--border-subtle); box-shadow: 0 0 0 0 rgba(224, 76, 26, 0); }
25% { border-color: var(--brand-orange); box-shadow: 0 0 0 8px rgba(224, 76, 26, 0.3); transform: scale(1.015); }
100% { border-color: var(--border-subtle); box-shadow: 0 0 0 0 rgba(224, 76, 26, 0); }
}
.gold-highlight-flash {
animation: gold-flash 2s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 10;
}
/* 9. Lightbox styles & custom zoom cursor */
.cursor-zoom-in {
cursor: zoom-in;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.cursor-zoom-in:hover {
transform: scale(1.02) translateY(-2px);
filter: brightness(1.03);
box-shadow: 0 20px 25px -5px rgba(224, 76, 26, 0.05),
0 10px 10px -5px rgba(224, 76, 26, 0.03);
}
/* 10. Motif Électronique Premium Alterné (Pistes de circuit, écrans, outils et engrenages) */
/* Motif Orange (Couleur principale du logo) - Cartoon Épuré & Très Aéré */
.circuit-orange, .circuit-lines {
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 300px;
background-repeat: repeat;
}
/* Motif Jaune/Or (Couleur secondaire du logo) - Cartoon Épuré & Très Aéré */
.circuit-yellow {
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 300px;
background-repeat: repeat;
}
/* Style robuste et forcé pour le bouton d'envoi du formulaire de contact (Logo Orange avec Texte Blanc) */
button[type="submit"].btn-premium-action, button[type="submit"] {
background-color: #e04c1a !important; /* Couleur orange exacte du logo */
color: #ffffff !important; /* Texte blanc pur pour une lisibilité maximale */
border: none !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
font-weight: 700 !important;
}
button[type="submit"].btn-premium-action:hover, button[type="submit"]:hover {
background-color: #b8360e !important; /* Orange légèrement plus sombre au survol pour le contraste */
box-shadow: 0 6px 20px rgba(224, 76, 26, 0.4) !important;
transform: translateY(-1px) !important;
}
button[type="submit"].btn-premium-action:active, button[type="submit"]:active {
background-color: #9d2d0b !important;
transform: translateY(1px) scale(0.98) !important;
box-shadow: 0 2px 8px rgba(224, 76, 26, 0.2) !important;
}
/* 11. Diaporama Hero avec fondus enchaînés fluides */
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.hero-slide.active {
opacity: 1;
z-index: 1;
}
.hero-indicator {
width: 10px;
height: 10px;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.4);
border: 2px solid transparent;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
}
.hero-indicator.active {
background-color: var(--brand-orange);
border-color: #ffffff;
transform: scale(1.3);
box-shadow: 0 0 10px rgba(224, 76, 26, 0.6);
}
/* 12. Styles de réduction du panneau de contenu Hero (Apple-style Panel Toggle) */
#hero-content-card {
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#hero-content-card.collapsed {
max-width: 200px !important;
padding: 10px 14px !important;
border-radius: 9999px !important;
background-color: rgba(0, 0, 0, 0.5) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
#hero-content-card.collapsed #hero-card-body {
max-height: 0 !important;
opacity: 0 !important;
margin-top: 0 !important;
pointer-events: none;
overflow: hidden;
}
#hero-content-card.collapsed #hero-card-toggle {
position: relative;
top: 0;
right: 0;
margin: 0;
width: 100%;
justify-content: center;
border: none;
background: transparent !important;
padding: 0;
}