/**
 * ==============================================================================
 * OMEGA VISION - FEUILLE DE STYLE GLOBALE : RESET & FONDATIONS
 * ==============================================================================
 * Rôle :
 * 1. Normalisation CSS universelle (box-sizing, suppression des marges par défaut).
 * 2. Règles typographiques fondamentales et hiérarchie visuelle.
 * 3. Classes utilitaires de structure (conteneurs, grilles, espacements).
 * 4. Particules d'icônes 360° en suspension tamisées pour les sections Hero.
 * 5. Animations fluides d'apparition progressive (Smooth Reveal).
 * ==============================================================================
 */

/* --------------------------------------------------------------------------
 * 1. RESET & NORMALISATION
 * -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--text-main);
    background-color: var(--bg-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sélection de texte personnalisée */
::selection {
    background-color: var(--text-main);
    color: var(--text-inverse);
}

/* --------------------------------------------------------------------------
 * 2. TYPOGRAPHIE
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-main);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
}

h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

p {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

img, svg, picture, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: none;
    background: none;
    outline: none;
}

/* --------------------------------------------------------------------------
 * 3. STRUCTURES & CONTENEURS
 * -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    position: relative;
    z-index: 1;
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    position: relative;
    z-index: 1;
}

.section-padding {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}

.section-padding-sm {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.section-padding-lg {
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
}

/* --------------------------------------------------------------------------
 * 4. EN-TÊTES DE SECTIONS & BADGES
 * -------------------------------------------------------------------------- */
.section-header {
    margin-bottom: var(--space-3xl);
}

.section-header.text-center {
    text-align: center;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.section-tag::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.section-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
    color: var(--text-main);
}

.section-desc {
    font-size: var(--font-size-md);
    color: var(--text-muted);
    max-width: 680px;
    line-height: 1.6;
}

.section-header.text-center .section-desc {
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
 * 5. HERO PARTICULES & ICÔNES 360° EN SUSPENSION
 * -------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    overflow: hidden;
    padding-top: calc(80px + var(--space-4xl));
    padding-bottom: var(--space-4xl);
}

.hero-particles-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0.85;
}

.hero-particle-icon {
    position: absolute;
    color: var(--color-accent);
    opacity: 0.07;
    animation: floatParticle 16s infinite ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(106, 46, 17, 0.08));
}

.hero-particle-icon svg {
    width: 100%;
    height: 100%;
}

.hero-particle-icon:nth-child(1) { top: 12%; left: 6%; width: 54px; height: 54px; animation-duration: 18s; animation-delay: 0s; }
.hero-particle-icon:nth-child(2) { top: 58%; left: 3%; width: 44px; height: 44px; animation-duration: 22s; animation-delay: 2s; }
.hero-particle-icon:nth-child(3) { top: 18%; right: 8%; width: 62px; height: 62px; animation-duration: 20s; animation-delay: 1s; }
.hero-particle-icon:nth-child(4) { top: 68%; right: 5%; width: 48px; height: 48px; animation-duration: 24s; animation-delay: 3s; }
.hero-particle-icon:nth-child(5) { top: 28%; left: 45%; width: 40px; height: 40px; animation-duration: 26s; animation-delay: 4s; }
.hero-particle-icon:nth-child(6) { top: 78%; left: 38%; width: 50px; height: 50px; animation-duration: 21s; animation-delay: 2.5s; }

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(-24px) rotate(10deg) scale(1.06);
    }
}

/* --------------------------------------------------------------------------
 * 6. CLASSES D'UTILITAIRES COURANTES
 * -------------------------------------------------------------------------- */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.text-center { text-align: center; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

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

.text-accent-dot { color: var(--color-accent); }
.text-highlight {
    color: var(--color-accent);
}

/* Animations d'apparition progressive fluide (Smooth Reveal) */
.reveal-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}