/* ==========================================
   FICHIER : /css/main.css
   PROJET : Divine Hair Secrets by Lionne
   OBJECTIF : Variables globales et Reset CSS
========================================== */

/* 1. IMPORTS DES POLICES DEPUIS GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@300;400;600&display=swap');

/*2.Importation des pages*/
@import url('./pages/home.css');
@import url('./components/footer.css');
@import url('./components/header.css');

/* 2. VARIABLES GLOBALES (DESIGN SYSTEM) */
:root {
    /* --- COULEURS PRINCIPALES --- */
    --green-950: #0D2218; /* Vert très sombre pour les textes forts */
    --green-900: #163528; /* Couleur de marque : Vert Forêt (Logo) */
    --green-800: #1E4A36; /* Vert pour les effets de survol */
    
    /* --- COULEURS SECONDAIRES & ACCENTS --- */
    --brown-900: #261510; /* Un brun très profond, presque noir mais plus chaud */
    --brown-500: #4A2B23; /* Un marron terreux soutenu pour les descriptions */
    --gold-500: #C5A059;  /* Accent Or pour les boutons et mots clés */
    
    /* --- FONDS ET NEUTRES --- */
    --beige-100: #F5F5F3; /* Fond doux (alternative au blanc pur) */
    --white: #FFFFFF;
    --black: #1A1A1A;

    /* --- TYPOGRAPHIE --- */
    --font-heading: 'Montserrat', sans-serif; /* Titres : Impactant et moderne */
    --font-body: 'Open Sans', sans-serif;     /* Textes : Lisible et fluide */

    /* --- ESPACEMENTS (Unités fixes pour être cohérent partout) --- */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 3rem;     /* 48px */
    --space-xl: 5rem;     /* 80px */

    /* --- EFFETS VISUELS --- */
    --radius-sm: 8px;     /* Petits arrondis (images) */
    --radius-md: 16px;    /* Arrondis moyens (cartes) */
    --radius-lg: 30px;    /* Grands arrondis (boutons) */
    --shadow-sm: 0 4px 10px rgba(22, 53, 40, 0.05); /* Ombre légère */
    --shadow-md: 0 10px 30px rgba(22, 53, 40, 0.1); /* Ombre marquée au survol */
    
    /* --- ANIMATIONS --- */
    --transition-fast: all 0.2s ease-in-out;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
html {
    /* Crée la transition fluide pour tous les liens internes (ex: #concept, #soins) */
    scroll-behavior: smooth;
    
    /* Empêche le menu collant (qui fait environ 80px de haut) de cacher les titres de tes sections */
    scroll-padding-top: 100px; 
}

/* 3. RESET CSS (Remettre à zéro les styles des navigateurs) */
*, *::before, *::after {
    box-sizing: border-box; /* La largeur inclut le padding et la bordure */
    margin: 0;
    padding: 0;
}

/* 4. STYLES DE BASE DU CORPS DE LA PAGE */
body {
    font-family: var(--font-body);
    color: var(--brown-900); /* Moins agressif que le noir pur */
    background-color: var(--white);
    line-height: 1.6; /* Améliore la lisibilité */
    overflow-x: hidden; /* Empêche le défilement horizontal non désiré */
}

/* 5. STYLES DES TITRES */
h1, h2, h3, h4, .font-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--green-900);
}

/* 6. CLASSES UTILITAIRES (À utiliser partout) */
a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none; /* Enlève les puces par défaut */
}

/* Le conteneur principal qui centre le site sur grand écran */
.container {
    max-width: 1300px; /* Largeur max du site */
    margin: 0 auto;    /* Centre la boîte horizontalement */
    padding: 0 var(--space-md); /* Marge de sécurité sur les côtés pour mobile */
}

/* Espace vertical standard entre chaque grande section */
.section-padding {
    padding: var(--space-xl) 0;
}

/* ==========================================
   ANIMATIONS AU SCROLL
========================================== */

/* L'état initial : l'élément est invisible et décalé vers le bas */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* L'état final : l'élément devient visible et reprend sa place */
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}