.block-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin-top: 25px;
}
.block-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin-top: 45px;
}
.text-block {
    width: 500px;
}
.img-block img {
    width: 500px; /* ou la taille désirée */
    height: 300px; /* conserver le ratio d'aspect original */
    object-fit: cover; /* ou 'contain' selon l'effet souhaité */
    border: 0px solid;
    border-radius: 20px;
}
/* Tablettes (768px - 1024px) */
@media (max-width: 1024px) {
    .block-1, .block-2 {
        gap: 40px;
    }
    
    .text-block, .img-block img {
        width: 400px;
    }
}

/* Petites tablettes (600px - 768px) */
@media (max-width: 768px) {
    .block-1, .block-2 {
        flex-direction: column;
        gap: 30px;
        margin-top: 20px;
    }
    
    .block-2 {
        margin-top: 30px;
    }
    
    .text-block {
        width: 100%;
        padding: 0 15px;
        order: 1; /* Met le texte en premier */
    }
    
    .img-block {
        order: 2; /* Met l'image après */
        width: 100%;
        text-align: center;
    }
    
    .img-block img {
        width: 80%;
        height: auto;
    }
}

/* Mobiles (< 600px) */
@media (max-width: 600px) {
    .block-1, .block-2 {
        gap: 20px;
    }
    
    .img-block img {
        width: 100%;
        border-radius: 10px;
    }
}

/* Très petits mobiles (< 400px) */
@media (max-width: 400px) {
    .text-block {
        padding: 0 10px;
    }
    
    .img-block img {
        border-radius: 8px;
    }
}
/* Dans votre fichier CSS */
.navbar .img-banner img {
    height: 40px; /* Hauteur fixe (ajustez selon vos besoins) */
    width: auto; /* Garde les proportions */
    max-width: 150px; /* Largeur maximale pour éviter l'étirement */
}
.head-carte, .commentaire h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 65px;
    margin-bottom: 65px;
    
}
.carte h3 {
    font-weight: 400;
    font-size: 1.2rem;
}
.head-carte h3  {
    font-weight: 700;
}
.commentaire h3 {
    font-weight: 600;
    font-size: 1.2rem;
}

.carte {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}


.line-1, .line-2 {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Pour que toutes les div aient la même hauteur */
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.elt1, .elt2, .elt3, .elt4, .elt5, .elt6 {
    flex: 1; /* Permet aux éléments de s'étirer également */
    min-width: 300px; /* Largeur minimale avant retour à la ligne */
    max-width: 350px; /* Largeur maximale pour éviter l'étirement excessif */
    padding: 25px;
    box-sizing: border-box;
    
    /* Styles visuels identiques */
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    
    /* Pour aligner le contenu */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}
.elt1:hover, 
.elt2:hover, 
.elt3:hover, 
.elt4:hover, 
.elt5:hover, 
.elt6:hover {
    transform: translateY(-5px);
}

/* Pour que le contenu texte prenne tout l'espace disponible */
.elt1 > div, .elt2 > div, .elt3 > div, 
.elt4 > div, .elt5 > div, .elt6 > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Responsive */
@media (max-width: 900px) {
    .elt1, .elt2, .elt3, .elt4, .elt5, .elt6 {
        min-width: 45%; /* 2 cartes par ligne sur tablettes */
    }
}

@media (max-width: 600px) {
    .elt1, .elt2, .elt3, .elt4, .elt5, .elt6 {
        min-width: 100%; /* 1 carte par ligne sur mobile */
    }
}