/* Variables de couleurs */
:root {
    --color-primary: #1C2C5B;      /* Bleu nuit - fond/header */
    --color-action: #4A90E2;       /* Bleu clair - boutons/liens */
    --color-text: #1E1E1E;         /* Gris très foncé - texte */
    --color-bg-light: #F4F6FA;    /* Gris très clair - fond sections */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Poppins pour les titres */
h1, h2, h3, h4, h5, h6,
.font-heading,
button, .btn,
[class*="font-extrabold"],
[class*="font-bold"] {
    font-family: 'Poppins', sans-serif;
}

/* Classes utilitaires pour les couleurs */
.text-primary {
    color: var(--color-text);
}

.bg-primary {
    background-color: var(--color-primary);
}

.text-action {
    color: var(--color-action);
}

.bg-action {
    background-color: var(--color-action);
}

.bg-light {
    background-color: var(--color-bg-light);
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Animation pour le menu mobile */
@keyframes slide-in-from-top {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: slide-in-from-top 0.2s ease-out;
}

/* Navigation scroll effect */
.nav-scrolled {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 30, 30, 0.1);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* --- Hero background icons (discret + moderne) --- */
.hero {
    /* Permet un rendu plus doux des overlays */
    isolation: isolate;
}

.hero-bg-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* derrière le contenu (qui est z-10) */
}

.hero-bg-icons .hero-icon {
    position: absolute;
    color: var(--color-primary);
    opacity: 0.1;
    filter: blur(0.3px);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    animation-play-state: paused;
}

/* Quand on survole la zone hero, on lance l'animation (douce) */
.hero:hover .hero-bg-icons .hero-icon {
    animation-play-state: running;
    opacity: 0.18;
}

@keyframes heroFloat {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(0, -12px, 0) rotate(2deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes heroDrift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(10px, -8px, 0) rotate(-2deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Positions + timings (desktop) - réparties sur toute la zone */
.hero-icon.hi-1 { top: 8%; left: 4%; animation: heroFloat 7.5s ease-in-out infinite; }
.hero-icon.hi-2 { top: 15%; left: 28%; animation: heroDrift 9.5s ease-in-out infinite; }
.hero-icon.hi-3 { top: 6%; right: 24%; animation: heroFloat 8.5s ease-in-out infinite; }
.hero-icon.hi-4 { bottom: 12%; left: 12%; animation: heroDrift 10.5s ease-in-out infinite; }
.hero-icon.hi-5 { bottom: 18%; right: 6%; animation: heroFloat 9s ease-in-out infinite; }
.hero-icon.hi-6 { top: 42%; right: 32%; animation: heroDrift 11s ease-in-out infinite; }
.hero-icon.hi-7 { top: 48%; left: 36%; animation: heroFloat 12s ease-in-out infinite; }
.hero-icon.hi-8 { top: 22%; left: 52%; animation: heroDrift 8s ease-in-out infinite; }
.hero-icon.hi-9 { top: 32%; right: 18%; animation: heroFloat 9.8s ease-in-out infinite; }
.hero-icon.hi-10 { bottom: 28%; left: 44%; animation: heroDrift 10.2s ease-in-out infinite; }
.hero-icon.hi-11 { top: 38%; left: 16%; animation: heroFloat 11.5s ease-in-out infinite; }
.hero-icon.hi-12 { bottom: 34%; right: 28%; animation: heroDrift 8.7s ease-in-out infinite; }
.hero-icon.hi-13 { top: 52%; left: 8%; animation: heroFloat 9.3s ease-in-out infinite; }
.hero-icon.hi-14 { bottom: 8%; left: 56%; animation: heroDrift 10.8s ease-in-out infinite; }
.hero-icon.hi-15 { top: 28%; right: 48%; animation: heroFloat 11.2s ease-in-out infinite; }
.hero-icon.hi-16 { bottom: 24%; right: 14%; animation: heroDrift 9.6s ease-in-out infinite; }
.hero-icon.hi-17 { top: 18%; left: 68%; animation: heroFloat 8.3s ease-in-out infinite; }
.hero-icon.hi-18 { bottom: 16%; left: 32%; animation: heroDrift 10.4s ease-in-out infinite; }

/* Un peu plus discret sur mobile (moins d'icônes visibles) */
@media (max-width: 768px) {
    .hero-bg-icons .hero-icon { opacity: 0.08; }
    .hero:hover .hero-bg-icons .hero-icon { opacity: 0.12; }
    .hero-icon.hi-3,
    .hero-icon.hi-6,
    .hero-icon.hi-7,
    .hero-icon.hi-9,
    .hero-icon.hi-11,
    .hero-icon.hi-13,
    .hero-icon.hi-15,
    .hero-icon.hi-17 { display: none; }
}

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
    .hero-bg-icons .hero-icon { animation: none !important; }
    .hero:hover .hero-bg-icons .hero-icon { opacity: 0.12; }
}