/* =============================================
FRESHLOC — Premium Design System v2
============================================= */
/* La police Inter est déjà chargée via dans le de chaque page
(avec preconnect) — un @import ici dupliquait le chargement ET créait une
cascade bloquante supplémentaire (le navigateur doit télécharger et
parser tout ce fichier CSS avant même de découvrir qu'il faut charger la
police), ce qui pénalisait Lighthouse (Performance) sans aucun bénéfice
puisque le suffit déjà. Retiré lors de l'audit Lighthouse de juillet 2026. */
:root {
/* Contraste texte blanc dessus : 2.77:1, sous le minimum WCAG AA (4.5:1)
— fait échouer un audit Lighthouse précis. Une version plus foncée
(#0273AD, 5.17:1) a été testée puis explicitement rejetée par
l'utilisateur pour raison esthétique (juillet 2026) : le bleu
d'origine est donc gardé en connaissance de cause, malgré cet audit. */
--primary: #0EA5E9;
--primary-dark: #0284C7;
--primary-light: #E0F2FE;
--primary-glow: rgba(14,165,233,0.25);
--accent: #6366F1;
--accent-light: #EEF2FF;
--dark: #0A0F1E;
--dark-2: #111827;
--gray-800: #1E293B;
--gray-700: #334155;
--gray-600: #475569;
/* #94A3B8 d'origine ne contrastait qu'à 2.56:1 sur fond blanc — largement
sous le minimum WCAG AA (4.5:1 texte normal). #64748B passe à 4.76:1
tout en restant visuellement "gris discret", distinct de --gray-600.
Corrigé lors de l'audit Lighthouse de juillet 2026 (variable unique,
s'applique automatiquement partout où --gray-400 est utilisé). */
--gray-400: #64748B;
--gray-300: #CBD5E1;
--gray-200: #E2E8F0;
--gray-100: #F1F5F9;
--gray-50: #F8FAFC;
--white: #FFFFFF;
--success: #10B981;
--warning: #F59E0B;
--danger: #EF4444;
--shadow-xs: 0 1px 3px rgba(10,15,30,0.06), 0 1px 2px rgba(10,15,30,0.04);
--shadow: 0 4px 20px rgba(10,15,30,0.08), 0 2px 8px rgba(10,15,30,0.04);
--shadow-md: 0 12px 48px rgba(10,15,30,0.12), 0 4px 16px rgba(10,15,30,0.06);
--shadow-lg: 0 24px 64px rgba(10,15,30,0.16), 0 8px 24px rgba(10,15,30,0.08);
--shadow-glow: 0 0 0 1px rgba(14,165,233,0.15), 0 8px 32px rgba(14,165,233,0.2);
--radius-xs: 6px;
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
--transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
--transition-slow: all 0.4s cubic-bezier(0.4,0,0.2,1);
--transition-spring: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
/* =============================================
RESET & BASE
============================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--dark);
background: var(--white);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--primary-light); color: var(--primary-dark); }
/* =============================================
SCROLLBAR
============================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
/* =============================================
TYPOGRAPHY
============================================= */
h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); font-weight: 900; line-height: 1.08; letter-spacing: -1.5px; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.8px; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; }
h4 { font-size: 1rem; font-weight: 600; }
p { color: var(--gray-600); line-height: 1.7; }
.text-primary { color: var(--primary); }
.text-white { color: var(--white); }
.text-dark { color: var(--dark); }
.text-muted { color: var(--gray-400); }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
/* =============================================
LAYOUT
============================================= */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section-sm { padding: 56px 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
/* =============================================
ANIMATED BACKGROUND BLOBS
============================================= */
.bg-blobs {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
animation: blobFloat 8s ease-in-out infinite;
}
.blob-1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(14,165,233,0.18), transparent 70%);
top: -200px; right: -100px;
animation-delay: 0s;
}
.blob-2 {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%);
bottom: -100px; left: -100px;
animation-delay: 3s;
}
.blob-3 {
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(14,165,233,0.1), transparent 70%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation-delay: 6s;
}
@keyframes blobFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -30px) scale(1.05); }
66% { transform: translate(-15px, 15px) scale(0.95); }
}
/* =============================================
NAVBAR
============================================= */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
transition: var(--transition);
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
height: 72px;
}
.navbar-glass {
background: rgba(255,255,255,0.82);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255,255,255,0.6);
box-shadow: 0 1px 0 rgba(10,15,30,0.06);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.logo-icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 4px 12px rgba(14,165,233,0.35);
transition: var(--transition-spring);
}
.logo:hover .logo-icon { transform: rotate(-8deg) scale(1.1); }
.logo-text {
font-size: 1.35rem;
font-weight: 900;
color: var(--dark);
letter-spacing: -0.8px;
}
.logo-text span { color: var(--primary); }
.nav-links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--gray-600);
font-weight: 500;
font-size: 0.9rem;
padding: 8px 14px;
border-radius: var(--radius-sm);
transition: var(--transition);
letter-spacing: -0.1px;
}
.nav-links a:hover { color: var(--dark); background: var(--gray-100); }
.nav-links a.active { color: var(--primary); background: var(--primary-light); font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 10px; position: relative; z-index: 10; }
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 6px;
border-radius: var(--radius-xs);
/* Reset des styles par défaut du navigateur — passé de à