body {
    font-family: 'Arial', sans-serif;
    font-size: 17px; /* Taille normale */
    line-height: 1.6;
    background-color: #f0f2f5;
    color: #000;
    margin: 0;
    padding: 0;
}



html {
    overflow-x: hidden; /* Empêche le scroll horizontal */
}

body {
    min-height: 100vh; /* Assure que le body prend toute la hauteur de l'écran */
    display: flex;
    flex-direction: column;
}


@media (max-width: 900px) { 

body {
    min-height: 100vh; /* Assure que le body prend toute la hauteur de l'écran */
    display: flex;
    flex-direction: column;
	 overflow-x: hidden; /* Empêche le scroll horizontal */.carousel
}
}



/* Permet au contenu principal d'occuper l'espace disponible */
main {
    flex-grow: 1;
}



/* Structure */
.wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}


footer {
    margin-top: auto;
}


/* ==============================
   Typographie et Textes
   ============================== */

/* Paragraphes */
p {
    font-size: 17px; /* Texte de base */
    line-height: 1.7;
}

/* Listes légèrement plus petites */
ul, ol, li {
    font-size: 16px; /* Un peu plus petit que les paragraphes */
    line-height: 1.6;
}

/* Uniformisation des textes */
h1, h2, h3, h4, h5, h6, a, span, label, button, input, textarea {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Titres */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }

/* ==============================
   Ajustements pour écrans plus petits
   ============================== */

@media (max-width: 1024px) { /* Tablettes */
    body {
        font-size: 17px; /* Texte légèrement plus grand */
        line-height: 1.6;
    }
    p {
        font-size: 18px;
    }
    ul, ol, li {
        font-size: 16px; /* Toujours un peu plus petit que `p` */
    }
    h1 { font-size: 2.4rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.6rem; }
}

@media (max-width: 768px) { /* Mobiles larges */
    body {
        font-size: 18px; /* Augmente la taille pour la lisibilité */
        line-height: 1.6;
    }
    p {
        font-size: 18px;
    }
    ul, ol, li {
        font-size: 16px; /* Un peu plus petit que `p` */
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

@media (max-width: 480px) { /* Petits mobiles */
    body {
        font-size: 18px; /* Texte plus grand pour lisibilité */
        line-height: 1.6;
    }
    p {
        font-size: 18px;
    }
    ul, ol, li {
        font-size: 16px;
    }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.25rem; }
}



header, footer {
    margin: 0;
    padding: 0;
}




/* En-tête */
header {
    background-color: #001f3f;
    color: #fff;
    padding: 10px 0;
/*    position: sticky;*/
    top: 0;
    z-index: 100;
    border-bottom: 2px solid white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	height: 60px;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ========== Bouton Menu Hamburger Modernisé ========== */
#menu-button {
    display: none;
    font-size: 14px;
    color: #fff;
    background-color: transparent;
    border: 1px solid rgba(204, 204, 204, 0.5); /* Bordure avec opacité 0.3 */
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.3s ease;
    z-index: 200;
}

#menu-button:hover {
    border-color: rgba(204, 204, 204, 0.8); /* Bordure avec opacité 0.5 au survol */
    transform: scale(1.05);
}


/* Menu déroulant pour écrans moyens et petits */
@media (max-width: 768px) {
    #menu-button {
        display: block; /* Affiche le bouton menu hamburger */
    }

    #nav-links {
        display: none; /* Masqué par défaut */
        flex-direction: column; /* Alignement vertical */
        background-color: #001f3f; /* Même couleur que le header */
        position: absolute;
        top: 80px; /* Ajuste selon la hauteur du header */
        left: 0;
        width: 100%; /* Prend toute la largeur de l'écran */
        z-index: 100; /* Priorité sur d'autres éléments */
        overflow: hidden; /* Empêche le débordement */
        max-height: 0; /* Menu masqué initialement */
        opacity: 0; /* Menu invisible initialement */
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, padding 0.3s ease-in-out;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre subtile */
        border-top: 1px solid #fff; /* Ligne blanche fine en haut */
        padding: 0 15px; /* Ajout d'un petit padding pour l'esthétique */

    }

    /* Ajout d'une ligne blanche fine en bas du menu lorsqu'il est ouvert */
    #nav-links::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px; /* Épaisseur de la ligne */
        background-color: white; /* Couleur blanche */
    }

    #nav-links.show {
        display: flex; /* Affiche le menu déroulant */
        max-height: 400px; /* Ajuste selon votre contenu */
        opacity: 1; /* Rend le menu visible */
        padding: 10px 0; /* Ajout de padding pour réduire l’écart */
    }

    #nav-links li {
        text-align: center; /* Centre le texte */
        margin: 0px 0; /* Réduction de l’espacement entre les boutons */
        list-style: none; /* Supprime les puces */
    }

    /* Suppression des lignes sous chaque bouton */
    #nav-links li::after {
        display: none;
    }

    #nav-links a {
        text-decoration: none;
        color: #fff; /* Texte blanc */
        padding: 8px 0; /* Réduction de l'espacement entre les éléments */
        transition: color 0.3s, transform 0.3s; /* Transition fluide */
        display: block; /* Assure un bon alignement */
    }

    #nav-links a:hover {
        color: #ffffff; /* Texte blanc au survol */
        transform: scale(1.05); /* Mise en avant */
    }
}


.nav-center {
    display: flex;
    align-items: center; /* Aligne verticalement */
    justify-content: center; /* Centre le contenu horizontalement */
    gap: 0px; /* Espacement entre le logo et le menu */
    width: 100%; /* Assure que la section prend toute la largeur disponible */
}


.nav-center .logo img {
  max-width: 180px;
    margin-right: 60px;
    margin-top: 4px;
}


@media (max-width: 900px) {
	
	.nav-center .logo img {
  max-width: 190px;
    margin-right: 40px;
    margin-top: 0px;
}
	
	

	
			 }




@media (max-width: 468px) {
	
	.nav-center .logo img {
  max-width: 180px;
    margin-right: 30px;
    margin-top: 4px;
}
	
	
	#menu-button {
        display: block; /* Affiche le bouton menu hamburger */
		margin-right: 20px;
    }
	
	
	
	
			 }





#nav-links {
    list-style: none;
    display: flex;
    gap: 60px;
    padding: 0;
    margin: 0;
	  font-size: 19px; /* Taille normale */
}



@media (max-width: 900px) {
#nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0;
	  font-size: 19px; /* Taille normale */
}
	}



/* Ligne animée sous le texte */
#nav-links a::after {
    content: ''; /* Élément visuel pour la ligne */
    position: absolute;
    bottom: -2px; /* Position en dessous du texte */
    left: 50%; /* Commence au centre */
    width: 0; /* Largeur initiale */
    height: 2px; /* Épaisseur de la ligne */
    background-color: #4cb051; /* Couleur de la ligne */
    transform: translateX(-50%); /* Centre la ligne */
    transition: width 0.3s ease-in-out; /* Animation fluide pour la largeur */
}


#nav-links a {
    position: relative; /* Nécessaire pour positionner le contour */
    text-decoration: none;
    color: #fff; /* Texte blanc */
    padding: 8px 16px;
    transition: color 0.3s ease-in-out, transform 0.3s; /* Transition fluide */
/*    text-transform: uppercase;*/
    letter-spacing: 1px;
    font-size: 1.1rem; /* Légèrement plus petit */
}



@media (max-width: 1024px) {
	
	#nav-links a {
    position: relative; /* Nécessaire pour positionner le contour */
    text-decoration: none;
    color: #fff; /* Texte blanc */
    padding: 8px 16px;
    transition: color 0.3s ease-in-out, transform 0.3s; /* Transition fluide */
/*    text-transform: uppercase;*/
    letter-spacing: 1px;
   
}

	
	
}


@media (max-width: 468px) {
	
	#nav-links a {
   
    font-size: 1.2rem; /* Légèrement plus petit */
}

	
	
}



/* Ajout d'un contour blanc semi-transparent plus discret */
#nav-links a::before {
    content: ""; 
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Contour blanc avec 50% d'opacité */
    border-radius: 5px; /* Coins légèrement arrondis */
    z-index: -1; /* Place le contour en arrière-plan */
	transition: border-color 0.3s ease-in-out;
}

/* Ligne animée sous le texte */
#nav-links a::after {
    content: ''; 
    position: absolute;
    bottom: -2px; /* Décalage sous le texte */
    left: 50%; /* Centre la ligne */
    width: 95%; /* Réduit la largeur */
    height: 2px; /* Épaisseur de la ligne */
    background-color: #4cb051; /* Couleur de la ligne */
    transform: translateX(-50%) scaleX(0); /* Centre et cache la ligne */
    transform-origin: center; /* Animation depuis le centre */
    transition: transform 0.3s ease-in-out;
}

/* Ligne visible au survol */
#nav-links a:hover::after {
    transform: translateX(-50%) scaleX(1); /* Animation de l'effet */
	
}

#nav-links a:hover::before {
    border: 1px solid rgba(255, 255, 255, 0.5); /* Contour un peu moins visible */
}



/* Ligne visible pour le lien actif */
#nav-links a.active::after {
    transform: translateX(-50%) scaleX(1);
    background-color: #C49A3A;
}



/* Bouton et options de langue */
#language-button-container {
    position: relative;
    margin-left: 20px;
    display: inline-block;
	margin-right: 20px;
}

/* ========== Bouton de Langue Modernisé ========== */
.language-button {
    background-color: transparent;
    border: 1px solid rgba(204, 204, 204, 0.5); /* Bordure avec opacité 0.5 */
    color: #fff;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.3s ease;
    border-radius: 20px;
    font-size: 12px;
}

.language-button:hover {
    border-color: rgba(204, 204, 204, 0.8); /* Bordure avec opacité 0.8 au survol */
    transform: scale(1.05);
}

.language-options {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #001f3f;
    padding: 8px 12px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    font-size: 12px;
}

.language-options.show {
    display: block;
}

.language-option {
    display: inline-block;
    width: 40px; /* Ajuste cette valeur pour correspondre à la plus grande langue */
    text-align: center;
}


.language-option {
    padding: 5px 10px;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.3s, transform 0.3s;
    border-radius: 5px;
}

.language-option:hover {
    background-color: #003366;
    transform: scale(1.05);
}

/* Responsive Styles */
@media (max-width: 768px) {
    #language-button-container {
        margin-left: 0px;
		margin-right: 10px;
        text-align: center;
    }

    .language-button {
        font-size: 12px;
        padding: 5px 10px;
    }

    .language-options {
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 8px;
    }

    .language-option {
        padding: 5px 8px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .language-button {
        font-size: 12px;
        padding: 4px 8px;
    }

    .language-options {
        padding: 5px 6px;
    }

    .language-option {
        padding: 4px 6px;
        font-size: 12px;
    }
}





.bandeau-vendu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.7);
    color: white;
    padding: 15px 30px;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
    z-index: 3;
    letter-spacing: 2px;
    backdrop-filter: blur(2px);
    white-space: nowrap;
    text-align: center;
}

.img-container {
    position: relative;
    display: inline-block;
}

/* Pour les écrans de moins de 768px (tablettes) */
@media (max-width: 768px) {
    .bandeau-vendu {
        font-size: 18px;
        padding: 10px 20px;
    }
}

/* Pour les écrans de moins de 480px (mobiles) */
@media (max-width: 480px) {
    .bandeau-vendu {
        font-size: 14px;
        padding: 8px 16px;
    }
}





.container {
    max-width: 1700px; /* Limite maximale de largeur pour grands écrans */
    margin: 0 auto; /* Centre horizontalement */
    padding: 0 15px; /* Ajoute un espace intérieur sur les côtés */
	
}

/* Ajustement pour les petits écrans */
@media screen and (max-width: 1024px) {
    .container {
        width: 98%;
        padding: 0 10px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        width: 96%;
        padding: 0 5px;
    }
}




/* Section principale avec image et moteur de recherche */
.hero {
    position: relative;
    text-align: center;
}

.hero-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    filter: brightness(70%);
}

.search-bar select,
.search-bar input {
    color: #001f3f; /* Bleu foncé */
}

/* Style général de la barre de recherche */
.search-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 90%; /* S'adapte à la largeur de l'écran */
    max-width: 500px; /* Largeur maximale */
}

/* Style du formulaire */
.search-bar form {
    display: flex;
    gap: 10px;
    align-items: center; /* Aligne verticalement */
}

/* Style des sélecteurs */
.search-bar select {
    flex: 1; /* Chaque élément occupe une largeur égale */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Style du bouton */
.search-bar button {
    background-color: #4cb051;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex-shrink: 0; /* Évite que le bouton se réduise */
}

/* Effet au survol du bouton */
.search-bar button:hover {
    background-color: #b5934a;
}

/* Styles adaptatifs pour les petits écrans */
@media (max-width: 768px) {
    .search-bar {
        display: flex;
        flex-wrap: nowrap; /* Les éléments restent sur une ligne */
        justify-content: space-between; /* Espacement entre les éléments */
        gap: 5px; /* Espacement horizontal réduit */
        padding: 10px; /* Réduit l'espace interne */
        width: 80%; /* Prend toute la largeur */
        max-width: 400px; /* Largeur maximale adaptée */
        margin: 0 auto; /* Centrer la barre */
    }

    .search-bar form {
        display: flex;
        flex-wrap: nowrap; /* Les éléments restent sur une ligne */
        justify-content: space-between; /* Espacement uniforme */
        width: 100%;
    }

    .search-bar select, 
    .search-bar button {
        flex: 1; /* Taille proportionnelle pour occuper l'espace */
        font-size: 12px; /* Texte réduit pour petits écrans */
        padding: 6px; /* Réduit les marges internes */
        min-width: 70px; /* Largeur minimale pour éviter une compression excessive */
    }

    .search-bar button {
        flex: 0 0 auto; /* Fixe la taille du bouton */
        font-size: 13px; /* Taille adaptée au bouton */
        padding: 6px 10px; /* Ajustement pour le bouton */
    }
}

.text-content-vide{
	padding: 5px;
}


/* Section de présentation */
.text-section {
    background-color: #fff; /* Couleur de fond pour la section */
    padding: 5px 0; /* Réduction de l'espacement en haut et en bas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre discrète */
    margin-top: 0px; /* Ajustement de la marge au-dessus */
    border-radius: 10px; /* Coins arrondis */
	margin-bottom: 20px;
	
}

.text-content {
    max-width: 1200px; /* Réduction de la largeur maximale */
    margin: 0 auto; /* Centre le contenu */
    padding: 20px; /* Réduction du padding interne */
	
}

/* Titres dans la section */
.text-content h2 {
    text-align: left; /* Alignement à gauche */
    margin-bottom: 15px; /* Réduction de l'espacement sous le titre */
    font-size: 1.8rem; /* Taille légèrement réduite pour le titre */
    font-weight: bold; /* Mettre en valeur le titre */
	margin-top: 0px;
}

/* Paragraphe dans la section */
.text-content p {
    font-size: 1em; /* Taille réduite pour un texte plus discret */
    line-height: 1.5; /* Espacement entre les lignes légèrement réduit */
    text-align: justify; /* Justification pour un rendu plus soigné */
    margin-bottom: 15px; /* Réduction de l'espacement entre les paragraphes */
}

/* Adaptation pour petits écrans */
@media (max-width: 768px) {
    .text-section {
        padding: 10px 0; /* Réduction de l'espacement pour petits écrans */
    }

    .text-content {
        padding: 10px; /* Réduction du padding interne */
    }

    .text-content h2 {
        text-align: left; /* Centre le titre */
        font-size: 1.4rem; /* Taille réduite pour petits écrans */
        margin-bottom: 10px; /* Espacement réduit */
    }

    .text-content p {
        font-size: 0.9em; /* Réduction de la taille du texte */
        line-height: 1.4; /* Espacement légèrement réduit */
        margin-bottom: 10px; /* Réduction de l'espacement entre paragraphes */
    }
}






.responsive-image {
    width: 100%; /* S'adapte à la largeur du conteneur */
    height: auto; /* Garde les proportions */
    max-width: 100%; /* Empêche d’être plus large que sa taille réelle */
    object-fit: cover; /* Remplissage tout en gardant le ratio */
    max-height: 620px; /* Limite la hauteur si nécessaire */
    margin-top: 10px;
    border-radius: 10px; /* Ajoute des bords arrondis */
}



@media (max-width: 768px) {
    .responsive-image {
        max-height: 70vh; /* Ajuste la hauteur pour écrans moyens */
    }
}

@media (max-width: 480px) {
    .responsive-image {
        max-height: 100vh; /* Ajuste la hauteur pour très petits écrans */
		height: 35vh;
    }
	
	  .text-content {
        padding: 5px; /* Réduction du padding interne */
    }
	
	
}


/* Bannière de consentement aux cookies */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #2c3e50;
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-consent-banner .buttons {
    display: flex;
    gap: 10px;
}

.cookie-consent-banner button {
    background-color: #2c3e50;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.cookie-consent-banner button.accept {
    background-color: #27ae60;
    border: 1px solid #27ae60;
}

.cookie-consent-banner button.reject {
    background-color: #e74c3c;
    border: 1px solid #e74c3c;
}

.cookie-consent-banner button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

footer {
    background-color: #001f3f; /* Bleu foncé identique à votre header */
    color: #fff; /* Texte blanc pour contraste */
    padding: 20px;
    text-align: center;
}

footer a {
    color: #fff; /* Liens en blanc */
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: #cce7ff; /* Couleur légèrement plus claire au survol */
}

footer p {
    margin: 5px 0;
	 font-size: 1rem;
}



.cards-container {
    display: flex; /* Active Flexbox */
    justify-content: space-between; /* Espacement entre les cartes */
    align-items: stretch; /* Étire les cartes pour qu'elles aient la même hauteur */
    gap: 30px; /* Espacement entre les cartes */
    flex-wrap: wrap; /* Permet aux cartes de passer sur plusieurs lignes si nécessaire */
    max-width: 1200px; /* Largeur maximale pour le conteneur */
    margin: 0 auto; /* Centre le conteneur */
    padding: 0px; /* Ajoute un peu de marge interne */
	margin-bottom: 40px;
	margin-top: 40px;
}

.card {
    flex: 1 1 calc(32% - 20px); /* Chaque carte occupe environ 32% avec l'espacement (gap) */
    max-width: calc(32% - 20px); /* Limite la largeur */
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Structure verticale pour les éléments de la carte */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Effet fluide au survol */
}

.card:hover {
    transform: translateY(-5px); /* Soulève légèrement la carte */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Accentue l'ombre */
    cursor: pointer; /* Change le curseur */
}

.card-header {
    background-color: #C49A3A; /* Couleur verte pour le haut */
    color: white;
    font-size: 1.5rem;
    text-align: center;
    padding: 20px 10px;
}

.card-body {
    flex-grow: 1; /* Étire la partie centrale pour qu'elle occupe l'espace restant */
    padding: 20px;
    text-align: center;
    font-size: 1rem;
}

.card-price {
    font-size: 2rem; /* Taille des prix */
    font-weight: bold;
    color: black;
    margin: 20px 0;
}

.card-footer {
    background-color: #e0e0e0; /* Couleur du bas */
    color: #000;
    text-align: center;
    padding: 15px 10px;
    font-size: 1rem;
}

.card-footer-haut {
    background-color: #B0A7A8; /* Couleur du bas */
    text-align: center;
    padding: 5px 10px;
    font-size: 0.9rem;
    color: white; 
}

.card-footer-alt {
    background-color: #DBDBEF; /* Couleur spécifique pour les deux premières cartes */
    color: #000;
    border-top: 1px solid white; /* Ligne fine blanche pour séparer les deux footers */
}

.card:nth-child(3) .card-footer-alt {
    background-color: #DBDBEF; /* Couleur spécifique pour la troisième carte */
    border-top: 1px solid white; /* Ligne fine blanche pour séparer les deux footers */
}

/* Adaptation aux écrans moyens (≤1100px) */
@media (max-width: 1100px) {
    .card {
        flex: 1 1 calc(48% - 20px); /* Les cartes prennent 48% de la largeur */
        max-width: calc(48% - 20px); /* Limite la largeur maximale */
    }
	 .cards-container {
        justify-content: center; /* Centre les cartes dans le conteneur */
		  gap: 40px; /* Ajoute un espacement vertical entre les cartes */
    }
}

/* Adaptation aux petits écrans (≤768px) */
@media (max-width: 900px) {
    .cards-container {
        flex-direction: column; /* Les cartes passent en colonne */
        gap: 40px; /* Ajoute un espacement vertical entre les cartes */
        padding: 0 0px; /* Ajoute un peu de marge sur les côtés */
		margin: 0;
    }

    .card {
        flex: 1 1 100%; /* Chaque carte occupe 100% de la largeur */
        max-width: 100%; /* Limite la largeur à 100% */
    }

    .card-header {
        font-size: 1.5rem; /* Réduit légèrement la taille des titres */
        padding: 15px 10px;
    }

    .card-body {
        font-size: 1.2rem; /* Réduit légèrement la taille du texte */
        padding: 15px;
    }

    .card-price {
        font-size: 1.8rem; /* Réduit légèrement la taille du prix */
    }

    .card-footer {
        font-size: 1rem; /* Réduit légèrement la taille du texte du footer */
        padding: 10px;
    }
}


/* Effet de survol */
.card:not(.selected):hover {
    transform: scale(1.03); /* Agrandir légèrement au survol */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Ombre légère */
    cursor: pointer; /* Changer le curseur en main */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transition fluide */
}

/* Style des cartes sélectionnées */
.card.selected {
    transform: scale(1.0); /* Garde l'effet d'agrandissement */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
    border: 1px solid #B0A7A8; /* Bordure verte pour indiquer la sélection */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transition fluide */
}



.sections .section {
    display: none; /* Cache toutes les sections */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    margin-top: 20px;
}

.sections .section.active {
    display: block; /* Affiche uniquement la section active */
}


/* Styles de la table */
.pack-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border: 0px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pack-table th,
.pack-table td {
    padding: 10px 15px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
}

.pack-table tr:last-child td {
    border-bottom: none;
}

.pack-table td img.validation {
    display: block;
    margin: 0 auto;
    width: 30px;
    height: auto;
}

.pack-table td strong {
    font-size: 1.1rem;
    color: #000;
}

.pack-table td {
    font-size: 1rem;
    color: #000;
}

.pack-table td:nth-child(2) {
    background-color: #DBDBEF;
	  min-width: 100px; /* Remplacez 100px par la largeur minimale souhaitée */
	text-align: center; /* Centre le texte horizontalement */
    vertical-align: middle; /* Centre le texte verticalement */
}

#section-3 .pack-table td:nth-child(2) {
    background-color: #DBDBEF; /* Couleur verte claire */
}


/* Ajustements pour petits écrans (≤768px) */
@media (max-width: 768px) {
    .pack-table {
        table-layout: auto; /* Laisse le contenu définir la largeur */
        width: 100%; /* Prend toute la largeur de l'écran */
    }

    .pack-table td {
        font-size: 1.2rem; /* Augmente la taille du texte pour plus de lisibilité */
        padding: 8px; /* Réduction de l'espace intérieur pour un look plus compact */
    }

    .pack-table td:nth-child(1) {
        width: 75%; /* La colonne texte occupe 75% de la largeur */
    }

    .pack-table td.validation-cell {
        width: 25%; /* La colonne image occupe 25% de la largeur */
        max-width: 50px; /* Limite la largeur maximale */
        text-align: center; /* Centre le contenu horizontalement */
        padding: 5px; /* Réduit l'espace intérieur */
    }

    .pack-table td.validation-cell img {
        width: 30px; /* Taille réduite de l'image */
        height: auto; /* Conserve les proportions de l'image */
        display: block; /* S'assure que l'image reste dans sa cellule */
        margin: 0 auto; /* Centre l'image horizontalement */
    }
	
	.sections .section {
    display: none; /* Cache toutes les sections */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    margin-top: 20px;
}
	
}



@media (max-width: 768px) {
    .second-line {
        display: none;
    }
}

/* Boutons de navigation */
.section-navigation {
    margin-top: 20px;
    text-align: center;
}
.section-navigation button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
}
.section-navigation button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.section {
    opacity: 0.5;
    transition: opacity 0.3s;

}

.section.active {
    opacity: 1;
}

/* Conteneur des boutons */
.carousel-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacement réduit pour un look plus compact */
    margin-top: 40px;
	margin-bottom: 40px;
}

/* Style des boutons */
.carousel-buttons button {
    padding: 4px 12px; /* Espace intérieur */
    font-size: 16px; /* Taille du texte */
    color: #ffffff; /* Texte blanc par défaut */
    background-color: #C49A3A; /* Couleur verte par défaut */
    border: none; /* Supprime les bordures */
    border-radius: 15px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main au survol */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.2s; /* Transition fluide */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Effet au survol pour les deux premiers boutons */
.carousel-buttons button:nth-child(-n+2):hover {
    background-color: #DBDBEF; /* Couleur survol pour les deux premiers */
/*    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); */
	 color: #000; /* Texte noir pour l'état actif */
}

/* Effet au survol pour le troisième bouton */
.carousel-buttons button:nth-child(3):hover {
    background-color: #DBDBEF; /* Couleur survol pour le troisième bouton */
/*    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); */
	 color: #000; /* Texte noir pour l'état actif */
}

/* Effet actif pour les deux premiers boutons */
.carousel-buttons button:nth-child(-n+2).active {
    background-color: #DBDBEF; /* Couleur active pour les deux premiers */
    color: #000; /* Texte noir pour l'état actif */
    font-weight: bold; 
/*    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); */
}

/* Effet actif pour le troisième bouton */
.carousel-buttons button:nth-child(3).active {
    background-color: #DBDBEF; /* Couleur active pour le troisième bouton */
    color: #000; /* Texte noir pour l'état actif */
    font-weight: bold; 
/*    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); */
}

/* Désactivation de la mise en surbrillance supplémentaire */
.carousel-buttons button.active {
    transform: none; /* Supprime l'effet d'agrandissement */
}

/* Responsivité pour petits écrans */
@media (max-width: 600px) {
    .carousel-buttons {
        flex-direction: column; /* Les boutons s'empilent verticalement */
        gap: 8px; /* Réduit l'espacement entre les boutons */
    }
    .carousel-buttons button {
        width: 90%; /* Les boutons prennent une largeur proportionnelle */
        margin: 0 auto; /* Centre les boutons */
		margin-bottom: 10px;
    }
}





.contact-info {
    margin-top: 30px;
    padding: 20px;
    background-color: #f0f8ff; /* Bleu clair doux */
    border-top: 1px solid #0066cc; /* Bordure bleue */
    text-align: center;
    font-size: 18px; /* Plus grand que la taille normale */
    font-weight: bold;
    color: #003366; /* Bleu foncé pour un meilleur contraste */
    line-height: 1.6; /* Améliore la lisibilité */
}
.contact-info p {
    margin: 0;
    padding: 0;
	text-align: center;
}







/* =========================
   Styles Généraux (Grands Écrans)
   ========================= */

.property-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.property-item {
    display: flex;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.property-image {
    width: 40%;
    margin-right: 0;
}

.property-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    margin-left: 10px;
}

.property-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 5px;
}

.location-line {
    font-size: 1.4rem;
    font-weight: bold;
    color: #000;
}

.separator {
    margin: 0 8px;
    color: #000;
}

.details-line {
    font-size: 1.2rem;
    color: #000;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.category, .pieces, .surface {
    font-weight: bold;
    color: #6a6a6a;
}

.property-title {
    font-size: 1rem !important;
    font-weight: bold;
    color: #000;
    margin: 0;
    padding: 0;
}

.property-description {
    font-size: 1rem;
    color: #000;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    margin-top: -30px;
}








.property-price {
    font-size: 1.4rem;
    font-weight: bold;
    color: #000;
    margin-top: auto;
    text-align: left;
}

/* =========================
   Carrousel (Grands Écrans)
   ========================= */

.carousel {
    position: relative;
    width: 360px;
    height: 270px;
    overflow: hidden;
    border-radius: 10px;
}


.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Assure que toutes les images prennent toute la largeur */
    height: 100%; /* Assure que toutes les images remplissent la hauteur */
    object-fit: cover; /* Recadre les images pour qu'elles remplissent le conteneur */
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    opacity: 0;
    transform: translateX(100%);
}

.carousel img.active {
    opacity: 1;
    transform: translateX(0);
}

.carousel img.prev-slide {
    transform: translateX(-100%);
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 16px;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.carousel-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* =========================
   Responsive Design (≤ 950px)
   ========================= */

@media (max-width: 950px) {
    .property-item {
        flex-direction: column;
        align-items: center;
    }

    .property-image {
        width: 100%;
        height: auto;
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    .property-info {
        width: 100%;
        text-align: left;
    }

.carousel {
    width: 100%;
    max-width: 950px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding-top: 25%; /* 4:3 correspond à 75% (3/4 = 0.75) */
}
.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


    .title h3 {
        font-size: 1.2rem;
    }

    .description p {
        font-size: 0.9rem;
    }

    .price {
        font-size: 1.3rem;
    }
}




@media (max-width: 768px) {
	
	.property-title {
    font-size: 1rem !important;
    font-weight: bold;
    color: #000;
    margin: 0;
    padding: 0;
}

.property-description {
    font-size: 1rem;
    color: #000;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    margin-top: -20px;
}

	
	
	
	
}
	










/* =========================
   Responsive Design (≤ 480px)
   ========================= */

@media (max-width: 480px) {
    .property-image {
        height: 250px;
    }

    .carousel {
        width: 100%;
        height: 160px;
        margin: 0 auto;
    }

    .carousel img {
        height: 100%;
    }

    .carousel-counter {
        padding: 2px 4px;
    }

    .carousel-button {
        padding: 6px;
    }

    .property-list {
        gap: 15px;
    }

    .property-item {
        padding: 5px;
    }
	.property-title {
  display: none;
		}

.property-description {
  display: none;
}

}

.no-properties-message {
    text-align: center;
    font-size: 1.2em;  /* Taille par défaut pour les grands écrans */
    color: #555;
    margin: 20px 0;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
}


@media (max-width: 600px) {
    .no-properties-message {
        font-size: 0.9em;  /* Réduction de la taille du texte sur petit écran */
        padding: 8px;      /* Réduction des espaces pour plus d'équilibre */
    }
}



.property-info {
    position: relative; /* Permet d'attacher le cœur à cette div */
}


.favorite-container {
    position: absolute;
    top: 0px;
    right: 14px;
}

.favorite-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}


.heart-icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #001f3f; /* Bleu foncé */
    stroke-width: 2;
    transition: fill 0.3s ease, stroke 0.3s ease;
}


.favorite-icon.active .heart-icon {
    fill: #001f3f; /* Rempli en bleu foncé */
    stroke: #001f3f;
}


.favorite-icon::before {
    content: attr(data-text); 
    position: absolute;
    bottom: 100%; /* ✅ Place le texte au-dessus */
    left: 50%;
    transform: translateX(-50%);
    background-color: #001f3f;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}


.favorite-icon:hover::before {
    opacity: 1;
    visibility: visible;
}


#toggle-favorites {
    cursor: pointer;
}


/* Bouton pour afficher les favoris */
#toggle-favorites {
    margin-left: auto;
    text-align: right;
    cursor: pointer;
}





#toggle-favorites {
    margin-left: auto; /* ✅ Pousse le bouton à droite */
	text-align: right;
}





.favorites-container {
    margin-bottom: 10px;
    margin-top: -10px;
    display: flex;
    justify-content: flex-end; 
    width: 100%; 
}




.favorites-button {
    display: inline-block;
    color: #333; /* Texte sombre pour contraste */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background-color: white; /* Fond blanc */
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid #ddd; /* Légère bordure */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
		width: auto;
	
}

.favorites-button-1 {
    display: inline-block;
    color: #333; /* Texte sombre pour contraste */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    background-color: white; /* Fond blanc */
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid #ddd; /* Légère bordure */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
	width: 10%;
	min-width: 120px;
	
}

.favorites-button:hover {
    background-color: #f8f8f8;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre */
}



#favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.favorites-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}

.clear-favorites-btn {
    background-color: #ddd;
    color: black;
    border: 1px solid #aaa;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}

.clear-favorites-btn:hover {
    background-color: #bbb;
}

@media screen and (max-width: 1000px) {
		.favorite-container {
    position: absolute;
    top: 8px;
    right: 12px;
}
	
}


@media screen and (max-width: 768px) {
    .clear-favorites-btn {
        font-size: 12px; /* Réduction de la taille de la police */
        padding: 6px 10px; /* Ajustement du padding */
      
        text-align: center;
    }
	
		.favorite-container {
    position: absolute;
    top: 8px;
    right: 12px;
}
	
}

@media screen and (max-width: 480px) {
    .clear-favorites-btn {
        font-size: 12px; /* Réduction supplémentaire pour très petits écrans */
        padding: 5px 8px;
    }
	

	.favorite-container {
    position: absolute;
    top: 8px;
    right: 14px;
}
	
}



@media (pointer: coarse) {
    .favorite-icon::before {
        display: none;
    }
}

media (hover: none) {
    .share-tooltip {
        display: none !important; /* Cache le texte "Partager" */
    }
}



.share-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-block;
}

.share-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-text {
    display: none;
    margin-left: 8px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.share-button:hover .share-text {
    display: inline;
}


.share-icon {
    width: 20px;
    height: 20px;
    fill: white;
}

.share-options {
    display: none;
    position: absolute;
    bottom: 50px;
    right: 0;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    width: 180px;
	  z-index: 9999;
}

.share-options.visible {
    display: block;
}

.share-link, .copy-link {
    display: block;
    padding: 6px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #ddd;
}

.copy-link {
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.share-link:last-child {
    border-bottom: none;
}


.share-tooltip {
    position: absolute;
    bottom: 40px; /* Ajuste la position au-dessus du bouton */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
	
}


.pagination {
    text-align: center;
    margin-top: 15px;
}

.pagination .page-link {
    display: inline-block;
    padding: 5px 9px; /* 🔹 Réduction de la taille */
    margin: 0 3px; /* 🔹 Moins d'espace entre les numéros */
    font-size: 14px; /* 🔹 Texte plus petit */
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    background: #f9f9f9;
    border: 1px solid #ccc;
}

.pagination .page-link:hover {
    background: #4cb051;
    color: #fff;
}

.pagination .page-link.active {
    background: #4cb051;
    color: #fff;
    font-weight: bold;
    pointer-events: none;
}

.pagination .prev-page,
.pagination .next-page,
.pagination .first-page,
.pagination .last-page {
    font-size: 14px;
    font-weight: bold;
    padding: 5px 8px; /* 🔹 Taille plus discrète */
    border-radius: 50%;
    background: #e0e0e0;
    border: 1px solid #ccc;
}

.pagination .prev-page:hover,
.pagination .next-page:hover,
.pagination .first-page:hover,
.pagination .last-page:hover {
    background: #4cb051;
    color: white;
}

.pagination .dots {
    padding: 5px 8px;
    color: #666;
    font-weight: bold;
}








/* En-tête des favoris */
.favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
	padding: 10px;
}

/* Titre des favoris */
.favorites-header h2 {
    font-weight: bold;
    margin: 0;
}

/* Conteneur des boutons */
.favorites-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Boutons favoris */
.favorites-btn {
    background-color: white;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    min-width: 140px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer; /* Curseur main */
}

.favorites-btn:hover {
    background-color: #f8f8f8;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Bouton "Effacer tous les Favoris" - Plus petit et espacé */
.favorites-btn.clear {
    background-color: #ddd;
    color: black;
    border: 1px solid #aaa;
    font-weight: bold;
    font-size: 13px;
    padding: 4px 8px;
    min-width: 120px;
    cursor: pointer; /* Curseur main */
}

.favorites-btn.clear:hover {
    background-color: #bbb;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .favorites-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .favorites-buttons {
        align-items: flex-end;
        gap: 2px;
    }

    .favorites-btn {
        width: auto;
        font-size: 13px;
        padding: 4px 8px;
    }
	
	/* Bouton "Effacer tous les Favoris" - Plus petit et espacé */
.favorites-btn.clear {
    background-color: #ddd;
    color: black;
    border: 1px solid #aaa;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    min-width: 120px;
    cursor: pointer; /* Curseur main */
}
}

.property-item {
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

.property-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}


.button-spinner {
    border: 2px solid #fff;
    border-top: 2px solid #C49A3A;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}