/* Style global de toute la page */
body {
    font-family: 'Inter', sans-serif; /* Définit la police d'écriture utilisée partout */
    margin: 0; /* Colle le contenu aux bords de l'écran (enlève les blancs inutiles) */
}

/* ================= NAVBAR (La barre de menu tout en haut) ================= */
.navbar {
    display: flex; /* Met les éléments côte à côte (au lieu de l'un sous l'autre) */
    justify-content: space-between; /* Pousse le logo à gauche et les liens à droite */
    align-items: center; /* Centre les éléments en hauteur (ni trop haut, ni trop bas) */
    padding: 15px 40px; /* Ajoute de l'espace à l'intérieur de la barre (aère le contenu) */
    background: #ffffff; /* Couleur de fond blanche */
}

/* Image du Logo */
.logo {         
    height: 40px; /* Fixe la hauteur de l'image (la largeur s'adapte auto) */
}

.house {
    width: 16px; /* Largeur de l'icône de la maison */
    height: 16px; /* Hauteur de l'icône de la maison */
    margin-right: 8px; /* Espace entre l'icône et le texte "Home" */
    margin-left: 8px;
}

/* Liens du menu (Accueil, À propos, etc.) */
.nav-center a {
    margin: 0 5px; /* J'ai réduit un peu la marge car le padding va prendre de la place */
    text-decoration: none;
    color: #3D2B1F;
    font-weight: 500;
    font-size: 14px;
    
    /* --- AJOUTEZ CECI --- */
    padding: 8px 15px;   /* Donne du volume à TOUS les boutons */
    border-radius: 20px; /* Arrondit les coins de TOUS les boutons */
    /* -------------------- */
}


/* Bouton spécial "Donate" */
.btn-donate {
    background: #FDE8E8; /* Fond rose pâle */
    color: #E63946; /* Texte rouge */
    padding: 8px 15px; /* Espace autour du texte à l'intérieur du bouton */
    border-radius: 20px; /* Arrondit les coins du bouton */
    text-decoration: none; /* Pas de soulignement */
    font-weight: bold; /* Texte en gras */
}

/* ================= HERO SECTION (La grande bannière d'accueil) ================= */
.hero { 
    padding: 50px 10%; /* Gros espace en haut/bas et sur les côtés */
    background-color: #fff7e5; /* Fond beige clair */
}

/* Boîte qui contient le texte et l'image */
.hero-container { 
    display: flex; /* Met le texte et l'image côte à côte */
    gap: 50px; /* Espace vide entre le bloc texte et le bloc image */
    align-items: center; /* Aligne tout verticalement au milieu */
}

/* Le bloc contenant le texte */
.hero-text { 
    flex: 1; /* Lui dit de prendre toute la place disponible à gauche */
}

/* Le très gros titre */
.hero h1 {
    font-size: 64px; /* Très grande taille de police */
    line-height: 1; /* Resserre l'espace entre les lignes du titre */
    color: #7a2c00; /* Couleur marron */
	font-family: 'Inter', sans-serif; /* Police Inter */
}

/* Le sous-titre */
.hero h2 {
    font-size: 36px; /* Taille moyenne */
    color: #7a2c00; 
    margin: 10px 0 30px; /* Espace : un peu en haut, beaucoup en bas */
}

/* Le paragraphe de description */
.hero p { 
    font-size: 18px; 
    line-height: 1.6; /* Aère les lignes pour faciliter la lecture */
    max-width: 500px; /* Empêche le texte d'être trop large (reste compact) */
    margin-bottom: 40px; /* Espace sous le paragraphe */
}

/* Zone contenant les deux boutons */
.hero-btns { 
    display: flex; /* Met les boutons côte à côte */
    gap: 15px; /* Espace entre les deux boutons */
    margin-bottom: 30px; 
}

/* Style du bouton blanc */
.btn-black { 
    background: #ffffff; 
    color: #000000; 
    border: none; /* Enlève la bordure grise par défaut */
    padding: 15px 30px; /* Donne du volume au bouton */
    border-radius: 30px; /* Coins très arrondis */
    cursor: pointer; /* La souris devient une main quand on passe dessus */
}

/* Style du bouton orange */
.btn-orange { 
    background: #FFB321; 
    color: #7a2c00; 
    border: none; 
    padding: 15px 30px; 
    border-radius: 30px; 
    cursor: pointer; 
}

/* ================= SECTION STATISTIQUES (Les chiffres clés) ================= */
.stat { 
    display: flex; /* Met les stats sur une seule ligne */
    justify-content: space-around; /* Les écarte équitablement sur la largeur */
    padding: 30px;
    background: #fff;
}

.stat-item { 
    text-align: center; /* Centre le texte */
    font-size: 1.1rem;
}

/* Le gros chiffre dans la stat */
.stat-item strong { 
    display: block; /* Force le chiffre à être sur sa propre ligne */
    font-size: 3rem; /* Chiffre très gros */
}

/* ================= CARTE VIDÉO ================= */
.hero-video { 
    flex: 0.7; /* Prend un peu moins de place que le texte (70% de la taille normale) */
}

.video-card {
    background: #fff;
    padding: 10px; /* Petit cadre blanc autour de la vidéo */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Ajoute une ombre légère derrière (effet 3D) */
}

/* L'image de fond qui sert de miniature */
.video-thumbnail {
    background: #ddd url('images/video-placeholder.jpg') center/cover; /* Affiche l'image en couvrant toute la zone */
    height: 300px;
    border-radius: 15px;
    display: flex; /* Permet de centrer le bouton play */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

.video-thumbnail video {
    width: 100%;           /* La vidéo prend 100% de la largeur du conteneur */
    height: 100%;          /* La vidéo prend 100% de la hauteur du conteneur */
    object-fit: cover;     /* Remplit la zone sans déformer l'image (coupe légèrement les bords si besoin) */
    border-radius: 15px;   /* Garde les coins arrondis pour correspondre au design */
}

/* Texte en dessous de la vidéo */
.video-footer {
    margin-top: 50px;
    text-align: center;
    font-size: 16px;
    color: #555; /* Gris foncé */
}

/* Le bouton "Play" rond */
.play-btn {
    width: 60px; 
    height: 60px; 
    border-radius: 50%; /* Transforme le carré en cercle parfait */
    border: none;
    background: #fff; 
    font-size: 24px; 
    cursor: pointer; /* Curseur main */
}

/* ================= SECTION AVENTURE ================= */
.adventure {
    background-color: #e0fbff; /* Fond bleu très pâle */
    color: #fff;
    padding: 100px 10%;
    text-align: center; /* Tout le texte est centré */
}

.adventure h2 { 
    font-size: 48px; 
    margin-bottom: 20px; 
    color: #2f4d9c; /* Bleu foncé */
}

/* Le sous-titre explicatif */
.adventure .subtitle { 
    max-width: 700px; /* Limite la largeur pour que ce soit lisible */
    margin: 0 auto 60px; /* "auto" centre le bloc horizontalement */
    color: #000;
    font-size: 20px;
}

/* Grille pour aligner les cartes */
.adventure-grid {
    display: flex; /* Met les cartes côte à côte */
    gap: 30px; /* Espace entre les cartes */
    justify-content: center;
}

/* La carte blanche individuelle */
.adventure-card {
    background: #fff;
    color: #000;
    padding: 50px;
    border-radius: 20px;
    width: 400px;
    text-align: left; /* Texte aligné à gauche à l'intérieur de la carte */
    position: relative; /* Important pour pouvoir placer l'icône par-dessus plus tard */
    flex: 0.6;
}

.adventure-card h3 { 
    font-size: 24px; 
    margin-bottom: 20px; 
}

/* La liste à puces */
.adventure-grid ul { 
    list-style: none; /* Enlève les points noirs devant la liste */
    line-height: 2; /* Espace beaucoup les lignes */
	text-align: right; /* Aligne la liste à droite */
}

/* Chaque élément de la liste */
.adventure-grid ul li { 
    color: #292929; 
    font-weight: bold; 
    font-size: 25px;
}

/* Petite icône décorative */
.card-icon { 
    position: absolute; /* Se place par-dessus le reste */
    bottom: 20px; /* Collé en bas */
    right: 20px; /* Collé à droite */
    width: 60px; 
    opacity: 0.3; /* Rend l'image semi-transparente (effet filigrane) */
}

/* ================= SECTION UTILISATION ================= */
.utilisation {
    background-color: #ffffff;
    padding: 150px;
    text-align: center;
}

.utilisation h2 { 
    font-size: 48px; 
    margin-bottom: 20px; 
    color: #f37d0f; /* Orange */
}

.utilisation .subtitle { 
    max-width: 700px; 
    margin: 0 auto 60px; 
    opacity: 0.8; /* Légèrement transparent */
    color: #000000;
}

/* Grille des cartes */
.utilisation-grid {
    display: flex; /* Côte à côte */
    gap: 30px; 
    justify-content: center;
}

/* Carte individuelle */
.utilisation-card {
    background: #fff;
    color: #000;
    padding: 40px;
    border-radius: 20px;
    width: 600px;
    text-align: left;
    position: relative;
}

.utilisation-card h3 { 
    color: #471e02; /* Marron très foncé */
    font-size: 24px; 
    margin-bottom: 20px; 
}

/* ================= SECTION AVIS (Témoignages) ================= */
.avis { 
    background-color: #fff7e5; /* Fond beige */
    color: #f37d0f;
    padding: 100px 10%;
    text-align: center;
}

/* Titre principal */
.title {
    font-size: 40px; 
    font-weight: 700; /* Gras */
}

/* ================= MENTIONS LÉGALES ================= */

.mentions-legales { 
    padding: 60px 20px;
    margin-top: 80px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
    color: #666;

}

.mentions-legales h2 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
    text-align: center;
}



.mentions-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

.mentions-footer a {
    color: #ff8c00;
    text-decoration: none;
}

.nav-center a.active {
    background-color: #f48f4e; /* Le fond orange */
    color: #3D2B1F; /* On garde la couleur du texte */
}

/* Optionnel : Petit effet quand on passe la souris dessus */
.nav-center a:hover {
    background-color: #ffdf97; /* Un fond très clair au survol */
}