/* CSS Reset and Basic Styles */
/* Ces règles de base réinitialisent les marges et les paddings par défaut des navigateurs pour une meilleure cohérence. Ainsi que la police de caractères et la couleur de texte par défaut pour l'ensemble de la page. */
body, h1, h2, h3, p, ul, li, a {
    margin: 0; /* Supprime la marge extérieure par défaut */
    padding: 0; /* Supprime le remplissage intérieur par défaut */
    font-family: 'Open Sans', sans-serif; /* Définit la police de caractères principale */
    color: #333; /* Définit la couleur de texte par défaut (gris foncé) */
}
body {
    background-color: #F5FAFD; /* Couleur de fond de toute la page */
}
/* Styles spécifiques pour les titres (h1, h2, h3) */
h1, h2, h3 {
    font-family: 'Playfair Display', serif; /* Utilise une police différente pour les titres */
}

/* Conteneur général pour centrer le contenu et limiter sa largeur */
.container {
    max-width: 1100px; /* Largeur maximale du contenu */
    margin: 0 auto; /* Centre le conteneur horizontalement sur la page */
    padding: 0 5px; /* Réduit le remplissage sur les côtés pour diminuer la marge à gauche */
}

/* Styles généraux pour toutes les sections de la page */
section {
    padding: 60px 0; /* Ajoute un remplissage vertical (haut et bas) pour espacer les sections */
}

/* Styles pour les titres de section */
.section-title {
    text-align: center; /* Centre le texte du titre */
    margin-bottom: 40px; /* Ajoute une marge en bas du titre */
}
.section-title h2 {
    font-size: 2.5em; /* Taille de police pour le titre principal de la section */
    margin-bottom: 10px; /* Marge en bas du h2 */
}
.section-title p {
    font-size: 1.1em; /* Taille de police pour le paragraphe sous le titre */
    color: #666; /* Couleur de texte plus claire pour le paragraphe */
}

/* Header Top Bar */
/* Barre supérieure de l'en-tête, souvent utilisée pour les informations de contact */
.header-top-bar {
    background-color: #fff; /* Fond blanc */
    padding: 10px 0; /* Remplissage vertical */
    font-size: 0.9em; /* Taille de police légèrement plus petite */
    border-bottom: 1px solid #eee; /* Ligne fine en bas */
    position: sticky; /* Rend l'élément "collant" lors du défilement */
    top: 0; /* L'élément se colle en haut de la fenêtre */
    z-index: 100; /* Assure que cette barre reste au-dessus des autres éléments lors du défilement */
}
.header-top-bar .container {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
}
.header-top-bar-left span {
    margin-right: 20px; /* Espace entre les informations de contact */
}
.header-top-bar-right a {
    margin-left: 15px; /* Espace à gauche du lien Facebook */
    text-decoration: none; /* Supprime le soulignement du lien */
}

/* Main Navigation */
/* Barre de navigation principale */
.navigation-bar {
    background-color: #fff; /* Fond blanc */
    padding: 15px 0; /* Remplissage vertical */
    border-bottom: 1px solid #eee; /* Ligne fine en bas */
    position: sticky; /* Rend l'élément "collant" lors du défilement */
    top: 40px; /* Se colle 40px sous le haut de la fenêtre (juste sous la barre du haut) */
    z-index: 99; /* Moins prioritaire que la barre du haut, mais toujours au-dessus du contenu */
}
.navigation-bar .container {
    display: flex; /* Utilise Flexbox pour aligner le logo et le menu */
    align-items: center; /* Centre les éléments verticalement */
}
.logo a {
    text-decoration: none; /* Supprime le soulignement du logo */
    font-size: 1.5em; /* Taille de police du logo */
    font-weight: 700; /* Poids de la police (gras) */
}
.logo a span {
    font-weight: 300; /* Poids de la police plus léger pour certaines parties du logo */
}
.main-menu ul {
    list-style: none; /* Supprime les puces de liste */
    display: flex; /* Affiche les éléments du menu en ligne */
}
.main-menu li {
    position: relative; /* Nécessaire pour positionner les sous-menus déroulants */
}
.main-menu a {
    text-decoration: none; /* Supprime le soulignement des liens du menu */
    padding: 10px 15px; /* Remplissage autour de chaque lien */
    display: block; /* Rend le lien cliquable sur toute sa zone de remplissage */
}

/* Sous-menu (dropdown) */
.main-menu .sub-menu {
    display: none; /* Cache le sous-menu par défaut */
    position: absolute; /* Positionne le sous-menu par rapport à son parent (li) */
    background-color: #fff; /* Fond blanc pour le sous-menu */
    list-style: none; /* Supprime les puces de liste */
    min-width: 200px; /* Largeur minimale du sous-menu */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ajoute une légère ombre */
    z-index: 10; /* Assure que le sous-menu apparaît au-dessus des autres contenus */
}
.main-menu li:hover > .sub-menu {
    display: block; /* Affiche le sous-menu quand la souris survole l'élément parent */
}
.main-menu .sub-menu li {
    width: 100%; /* Chaque élément du sous-menu prend toute la largeur */
}

/* Hero Section */
/* Section d'accueil avec une grande image de fond et du texte */
.header-homepage {
    background-image: url('./Site/cropped-vuesurstroch_20170527_113912.jpg'); /* Image de fond */
    background-size: cover; /* L'image couvre toute la zone */
    background-position: center; /* Centre l'image de fond */
    color: white; /* Couleur de texte blanche */
    padding: 40px 0; /* Remplissage vertical réduit pour monter le texte */
    position: relative; /* Nécessaire pour positionner l'overlay */
}
.header-homepage::after { /* Overlay */
    /* Crée une couche semi-transparente par-dessus l'image de fond */
    content: '';
    position: absolute; /* Positionne l'overlay par rapport au parent (.header-homepage) */
    top: 0; /* S'étend sur toute la hauteur */
    left: 0; /* S'étend sur toute la largeur */
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102,126,234, 0) 0%, rgba(118,75,162,0) 100%); /* Dégradé de couleur complètement transparent */
}
.header-homepage .container {
    position: relative; /* Positionne le contenu du container par rapport à l'overlay */
    z-index: 2; /* Assure que le contenu est au-dessus de l'overlay */
    display: flex; /* Utilise Flexbox pour aligner le texte et l'image */
    align-items: flex-start; /* Aligne les éléments au début (en haut) de l'axe transversal pour déplacer le texte vers le haut */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    padding-left: 0; /* Assure qu'il n'y a pas de remplissage interne à gauche */
    margin-left: 5; /* Annule le centrage automatique et pousse le conteneur à gauche */
}
.header-hero-content {
    flex: 1; /* Prend l'espace disponible */
}
.header-hero-media {
    flex: 0 0 40%; /* Prend 40% de la largeur, ne grandit pas, ne rétrécit pas */
    text-align: right; /* Aligne le contenu à droite */
    padding-left: 20px; /* Ajoute un remplissage à gauche */
}
.header-hero-media img {
    max-width: 100%; /* L'image ne dépasse pas la largeur de son conteneur */
    height: auto; /* Maintient le ratio de l'image */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Ajoute une ombre à l'image */
}
.header-homepage h1 {
    font-size: 3em; /* Taille de police du titre principal */
    text-shadow: 2px 2px 4px #000000; /* Ajoute une ombre au texte pour le rendre plus lisible */
}
.header-homepage p {
     text-shadow: 1px 1px 2px #000000;
     font-size: 1.2em;
}

/* Portfolio Section */
#portfolio {
    background-color: #f5fafd; /* Couleur de fond de la section portfolio */
}
.portfolio-grid {
    display: grid; /* Utilise CSS Grid pour organiser les images */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Crée des colonnes flexibles d'au moins 250px */
    gap: 5px; /* Espace entre les images de la grille */
}
.portfolio-item img {
    width: 100%; /* L'image prend toute la largeur de son conteneur */
    height: 100%; /* L'image prend toute la hauteur de son conteneur */
    object-fit: cover; /* L'image couvre la zone sans être déformée */
    display: block; /* Supprime l'espace sous l'image */
    transition: transform 0.3s ease; /* Ajoute une transition douce pour l'effet de survol */
}
.portfolio-item:hover img {
    transform: scale(1.05); /* Agrandit légèrement l'image au survol */
}

/* Testimonials Section */
#testimonials {
    background-color: #ffffff; /* Couleur de fond de la section témoignages */
}
.testimonials-grid {
    display: flex; /* Utilise Flexbox pour organiser les cartes de témoignages */
    gap: 30px; /* Espace entre les cartes */
    justify-content: center; /* Centre les cartes horizontalement */
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne sur petits écrans */
}
.testimonial-card {
    flex: 1; /* Permet aux cartes de s'étirer et de se rétrécir */
    max-width: 350px; /* Largeur maximale pour chaque carte */
    min-width: 280px; /* Largeur minimale pour chaque carte */
    border: 1px solid #eee; /* Bordure fine */
    padding: 30px; /* Remplissage intérieur */
    text-align: center; /* Centre le texte */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Légère ombre */
}
.testimonial-card blockquote {
    font-style: italic; /* Texte en italique */
    color: #555; /* Couleur de texte gris */
    border: none; /* Supprime la bordure */
    padding: 0; /* Supprime le remplissage */
    margin-bottom: 20px; /* Marge en bas du blockquote */
}
.testimonial-card cite {
    font-weight: bold; /* Texte en gras */
    display: block; /* Affiche le nom sur une nouvelle ligne */
    margin-top: 10px; /* Marge au-dessus du nom */
}

/* CTA Section */
#cta {
    background-color: #6a73da; /* Couleur de fond bleue/violette */
    color: white; /* Couleur de texte blanche */
    padding: 40px 0; /* Remplissage vertical */
}
#cta .container {
    display: flex; /* Utilise Flexbox pour aligner le texte et le bouton */
    justify-content: space-between; /* Espace les éléments aux extrémités */
    align-items: center; /* Centre les éléments verticalement */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
}
#cta h2 {
    font-size: 1.8em; /* Taille de police du titre */
}
#cta a {
    color: white; /* Couleur de texte blanche pour les liens */
}
#cta .button {
    background-color: #00c3a0; /* Couleur de fond du bouton */
    padding: 15px 30px; /* Remplissage du bouton */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 5px; /* Bords arrondis */
    font-weight: bold; /* Texte en gras */
    margin-top: 10px; /* Marge au-dessus du bouton (pour les petits écrans) */
}

/* Info Section */
#info {
    text-align: center; /* Centre le texte de la section informations */
}

/* Contact Section */
#contact {
    background-image: url('./Site/Nous_20170531_195937.jpg'); /* Image de fond */
    background-size: cover; /* L'image couvre toute la zone */
    background-position: center; /* Centre l'image de fond */
    color: white; /* Couleur de texte blanche */
    text-align: center; /* Centre le texte */
}
#contact h3 {
    font-size: 2em; /* Taille de police du titre */
    text-shadow: 2px 2px 4px #000000; /* Ombre au texte pour la lisibilité */
}

/* Footer */
footer {
    text-align: center; /* Centre le texte du pied de page */
    padding: 20px; /* Remplissage intérieur */
    background-color: #fff; /* Fond blanc */
    border-top: 1px solid #eee; /* Ligne fine en haut */
    font-size: 0.9em; /* Taille de police légèrement plus petite */
}
footer a {
    text-decoration: none; /* Supprime le soulignement des liens */
}