/* Theme default css */
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 15px;
    color: #333; /* Couleur de texte par défaut pour une meilleure lisibilité */
    overflow: hidden; /* Prevents scrollbars */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Exo', sans-serif;
    /* font-weight: normal; */ /* Exo est déjà importé avec les graisses nécessaires, normal peut être redondant */
    color: #002052;
    margin-top: 0px;
    font-style: normal;
    font-weight: 500; /* Assurez-vous que cette graisse est importée si vous la spécifiez */
    margin-bottom: 0.5em; /* Ajout d'une marge inférieure pour l'espacement */
}

/* Full Page Container */
.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    position: relative; /* For z-index stacking */
    z-index: 1; /* To be above the background slider */
}

/* Header and Logo Styles */
header {
    width: 100%;
    padding: 15px 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0; /* Prevent header from shrinking */
}

#site-logo {
    height: 80px; /* Adjust size as needed */
    width: auto;
}

.contact-info-header {
    text-align: left; /* Aligne le texte des contacts à gauche */
    margin-left: 30px; /* Décalage par rapport au logo, ajustez si besoin */
    color: #ffffff; /* Couleur du texte */
    font-size: 0.9em; /* Taille de police légèrement réduite */
}

.contact-info-header p {
    margin: 5px 0; /* Espacement entre les lignes de contact */
}

.contact-info-header i {
    margin-right: 8px; /* Espace entre l'icône et le texte */
}

/* Main Content Area Styles */
main {
    flex: 1 1 auto; /* Allows main to grow and shrink, and defines its base size */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevents internal scrolling if content is too large */
}

.main-columns-wrapper {
    display: flex;
    justify-content: center; /* Centre les colonnes si elles ne prennent pas toute la largeur */
    align-items: flex-start; /* Aligne le haut des colonnes */
    gap: 30px; /* Espace entre les colonnes */
    width: 100%;
    max-width: 1200px; /* Largeur maximale pour l'ensemble des colonnes, ajustez */
    margin: 0 auto; /* Centre le wrapper */
    padding: 30px; /* Padding pour le wrapper, similaire à l'ancien container */
    color: #fff; /* Couleur de texte par défaut pour les colonnes */
}



.main-column-left {
    flex: 1; /* Permet à la colonne de gauche de prendre l'espace nécessaire */
    max-width: 500px; /* Votre max-width précédent, peut être ajusté */
    /* Le padding est maintenant sur .main-columns-wrapper ou peut être mis sur .main-column */
}

.main-column-right {
    flex: 1; /* Permet à la colonne de droite de prendre l'espace restant */
    /* Ajoutez des styles spécifiques pour la colonne de droite ici si besoin */
    /* Par exemple, une largeur minimale ou maximale */
    /* max-width: 400px; */
}

.main-column-left h1,
.main-column-left p {
    text-align: left; /* Confirme l'alignement à gauche pour les éléments à l'intérieur */
}

.main-column-left h1 {
    font-size: 2.8em;
    text-align: left; /* Assurer l'alignement à gauche */
    font-weight: 700;
    color: #c0c0c0;
    margin-bottom: 0.5em; /* Espace après le titre */
    /* La police 'Exo' est déjà appliquée par la règle générale h1 */
}

.main-column-left h2 {
    font-size: 1.8em;
    font-weight: 500; /* La règle générale pour h1-h6 met déjà 500 */
    color: #ffffff;
    margin-top: 0.5em; /* Espace par rapport au h1 */
    margin-bottom: 1em; /* Espace par rapport au paragraphe suivant */
    font-style: italic;
    text-align: left; /* Assurer l'alignement à gauche */
    /* La police 'Exo' est déjà appliquée par la règle générale h2 */
}

.main-column-left p {
    font-size: 1em;
    font-weight: 400; /* Graisse normale pour Roboto */
    color: #ffffff;
    line-height: 1.6; /* Améliore la lisibilité */
    /* La police 'Roboto' est déjà appliquée par la règle body */
}


/* Styles for the right column container */
.main-column-right {
    padding: 20px;
    border-radius: 5px; /* Optionnel: légers coins arrondis pour le conteneur blanc */
}

/* Social Icons Styles */
.social-icons-container {
    position: fixed;
    bottom: 40px; /* Augmenté pour monter les icônes */
    left: 40px; /* Augmenté pour décaler davantage vers la gauche (depuis le bord gauche) */
    z-index: 100;
    display: flex;
    gap: 15px; /* Espace entre les icônes */
}

.social-icons-container a {
    color: #ffffff; /* Couleur des icônes */
    font-size: 24px; /* Taille des icônes */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons-container a:hover {
    color: #cccccc; /* Couleur au survol */
    transform: scale(1.1); /* Léger zoom au survol */
}

/* Services Showcase Styles (Right Column) */
.services-showcase {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    gap: 20px; /* Espace entre les items */
    justify-content: center; /* Centre les items s'ils ne remplissent pas la ligne */
}

.service-item {
    background-color: #73ad1c; /* Fond vert */
    border: 1px solid #FFFFFF; /* Bordure blanche légère */
    border-radius: 0; /* Pas de coins arrondis */
    overflow: hidden; /* Gardé pour d'autres effets potentiels, mais moins critique sans border-radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    width: calc(30% - 10px); /* Deux items par ligne, avec le gap de 20px (10px de chaque côté) */
    aspect-ratio: 1 / 1; /* Force le format carré */
    box-sizing: border-box;
}

.service-item:hover {
    background-color: #629317; /* Vert plus foncé au survol */
    box-shadow: 10px 10px 0px rgb(255, 255, 255);
    transform: translateY(-5px); /* Léger mouvement vers le haut */
}

.service-link {
    display: flex; /* Pour centrer le contenu */
    flex-direction: column; /* Aligner le h5 et le p verticalement */
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    text-align: center; /* Centre le texte si les éléments ne prennent pas toute la largeur */
    text-decoration: none;
    color: #ffffff;
    padding: 15px; /* Padding réduit */
    height: 100%; /* S'assurer que le lien remplit le carré */
    box-sizing: border-box; /* Inclure le padding dans la hauteur/largeur */
}

.service-icon {
    font-size: 2em; /* Taille de l'icône */
    color: #FFFFFF; /* Icônes en blanc sur fond vert */
    margin-bottom: 10px; /* Espace entre l'icône et le titre h5 */
}

.service-item-inner h5 {
    font-family: 'Exo', sans-serif;
    font-size: 1em; /* Taille de police réduite */
    font-weight: 600;
    color: #FFFFFF; /* Texte en blanc sur fond vert */
    margin-top: 0;
    margin-bottom: 8px;
    /* L'alignement du texte est géré par text-align: center sur .service-link */
}

/* Responsive: une seule colonne sur petits écrans */
@media (max-width: 768px) {
    .main-columns-wrapper {
        flex-direction: column;
    }
    .main-column-left,
    .main-column-right {
        max-width: 100%; /* Pleine largeur sur mobile */
    }
    .service-item {
        width: 100%; /* Un item par ligne sur mobile */
    }
}


/* Styles for the full-page background slider */
.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Noir semi-transparent. Ajustez si besoin */
    z-index: -1; /* Au-dessus des slides, en dessous du contenu */
}

.background-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10; /* Ensure it's well behind other content */
    overflow: hidden;
}

.background-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth transition for opacity */
}

.background-slider .slide.active {
    opacity: 1;
}

.slide.video-slide video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the video cover the area */
}

/* The z-index context is now handled by .page-container */
footer {
    flex-shrink: 0; /* Prevent these sections from shrinking */
}

/* Clients Section Styles */
.clients-section {
    width: 100%;
    max-width: 1200px; /* Match the main content width */
    margin: 0 auto; /* Center the section, remove top margin */
    padding: 20px; /* Reduced padding to bring it up further */
    box-sizing: border-box;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1); /* Optional: a subtle background to differentiate */
    border-radius: 20px;
}

.clients-section .section-title {
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 30px;
}

.clients-logos img {
    max-width: 100%;
    height: auto;
    /* Optional: constrain the height if the image is too tall */
    max-height: 80px;
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
    body {
        overflow: auto; /* Allow scrolling on mobile */
    }

    .page-container {
        height: auto; /* Let content determine height */
    }

    header {
        flex-direction: column; /* Stack logo and contact info */
        text-align: center;
        padding-top: 20px; /* Add some space at the top */
    }

    #site-logo {
        height: 100px; /* Increased logo size for mobile */
    }

    .contact-info-header {
        margin-left: 0;
        margin-top: 15px;
        text-align: center;
    }

    .main-columns-wrapper {
        flex-direction: column;
        text-align: center;
        width: 90%; /* Set width to 90% on mobile */
    }

    .main-column-left h1 {
        font-size: 2em;
    }

    .main-column-left h2 {
        font-size: 1.2em;
    }

    .services-showcase {
        flex-direction: column;
    }

    .service-item {
        width: 100%; /* Full width for service items */
    }

    .social-icons-container {
        position: static; /* Remove fixed positioning */
        justify-content: center;
        padding: 20px 0;
    }

    .clients-section .section-title {
        font-size: 1.5em;
    }
}
