/* BODY */
/* Styles */
body {
    margin: 0;
    font-family: 'Philosopher', sans-serif;
}

p {
    font-size: 18px;
}

h2 {
    font-size: 22.5px;
}

/* NAVBAR */
/* Styles de la navbar */
.navbar {
    text-align: center;
    background-color: black;
    position: sticky;
    top: 0;
    font-size: 26px;
    z-index: 1;
}

.navbar a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
    position: relative;
    transition: transform 0.5s ease-in-out; /* Ajoutez une transition pour l'effet de zoom */
}

.navbar a:hover {
    transform: scale(1.1); /* Ajustez la valeur de l'échelle selon vos besoins */
    color: rgb(0, 140, 255);
}

/* HEADER */
.background-section {
    background-image: url('../img/landing.png');
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 25vh 0; /* 100% de la hauteur, 0 de largeur */
    position: relative; /* Ajoutez cette ligne pour rendre la superposition possible */
}

/* Styles pour le logo dans la navbar */
.logo {
    max-width: 250px; /* Ajustez la largeur du logo selon vos besoins */
    border-radius: 50%; /* Pour créer une forme circulaire */
}

/* Style pour le logo dans la navbar */
.navblogo {
    height: 40px; /* Ajustez la hauteur du logo selon vos besoins */
    border-radius: 50%; /* Pour créer une forme circulaire */
    margin-bottom: -12px;
}

.background-section2 {
    background-image: url('../img/arbo.png'); /* Remplacez 'chemin/vers/votre-image.jpg' par le chemin de votre image */
    background-size: cover;
    background-position: center;
    height: 91vh; /* Cela ajustera la hauteur de la section pour couvrir toute la hauteur de la fenêtre du navigateur */
}

/* Style pour la section "Prestations" */
.prestations {
    background-color: white; /* Fond noir */
    color: black; /* Texte blanc */
    padding: 50px; /* Espacement intérieur */
}

/* Style du titre "Prestations" uniquement */
.prestations-title {
    text-align: left; /* Centrer le titre */
    margin-bottom: 20px;
}

.tailles {
    padding: 50px;
    background-color: white; /* Fond noir */
    color: black; /* Texte blanc */
}

/* BLOCKS */
/* Prestation */
.blocks-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Espacement égal entre les blocs */
}

.block {
    flex: 0 0 calc(33.33% - 20px); /* 3 cartes par ligne */
    margin-bottom: 20px; /* Espacement entre les lignes */
    padding: 15px;
    border: 2px solid black;
    box-sizing: border-box;
}

.block {
    transition: transform 0.3s ease-in-out;
}

.block:hover {
    transform: scale(1.1);
}

/* BLOCKS */
/* Avant-après */
.aa-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; 
    /* Ajustez selon vos besoins */
}

.aa-block {
    flex-basis: 48%; /* Pour assurer 2% d'espace entre les blocs */
    margin-bottom: 20px; 
}

.block img {
    width: 100%;
    height: auto;
}

/* IMAGE */
.img-responsive {
    max-width: 100%;
    height: auto;
}

/* FOOTER */
footer {
    background-color: black;
    color: white;
    padding: 30px 0;
    position: relative;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-section {
    flex: 1;
    margin-right: 20px;
    margin-left: 20px;
}

.footer-section h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.footer-section p {
    font-size: 1em;
    line-height: 1.6;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.text-input {
    margin-bottom: 10px;
    padding: 8px;
}

.btn {
    background-color: rgb(0, 140, 255);
    color: black;
    padding: 10px;
    cursor: pointer;
}

.footer-bottom {
    margin-top: 20px;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #555;
}

/* MEDIA QUERIES */
/* Styles pour tablette et mobile */
@media (max-width: 768px) {
    .navbar a {
        display: inline-block;
        text-align: center;
        font-size: 21px;
    }

    .logo {
        max-width: 160px; /* Ajustez la largeur du logo pour les appareils mobiles */
    }

    .prestations {
        display: flex;
        flex-direction: column;
    }

    .block {
        flex: 0 0 calc(50% - 20px); /* 2 cartes par ligne pour les écrans plus petits */
    }

    .aa-block {
        flex-basis: 100%; /* Une colonne à 100% sur les petits écrans */
    }

    .footer-section {
        flex: 0 0 calc(95% - 20px);
        margin-bottom: 20px;
    }
}

@media (max-width: 586px) {
    .navbar a {
        display: inline-block;
        text-align: center;
        font-size: 14.224px;
    }
}

@media (max-width: 480px) {
    .block {
        flex: 0 0 calc(100% - 20px); /* 1 carte par ligne pour les écrans très petits */
    }
}