/* 
Theme Name: Pool party
==========================================================================
1. CHARTE DESIGN GLOBAL - POOL PARTY
========================================================================== 
*/
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    overflow-x: hidden; /* empêche la bande blanche / le scroll horizontal parasite */
}

html {
    overflow-x: hidden;
}

.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-poppins { font-family: 'Poppins', sans-serif; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: #1A3150; /* Bleu Nuit de la charte */
    font-weight: 600;
}

.section-title {
    font-family: 'Poppins', sans-serif;
    color: #1A3150;
    font-weight: 600;
    position: relative;
}

/* Suppression radicale de toutes les puces de listes sur le site */
ul, li, nav ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   2. (Nettoyage devenu inutile : le nouveau front-page.php ne génère plus
   le titre "Accueil" ni le texte de test, donc plus besoin de les masquer.
   Ces règles cachaient par erreur le titre du hero, elles ont été retirées.)
   ========================================================================== */

/* ==========================================================================
   3. STRUCTURE DU HEADER & NAVIGATION HORIZONTALE
   ========================================================================== */
.custom-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom: 1px solid #f0f0f0;
}

/* Force la disposition en ligne de la navigation */
.header-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-menu li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-menu li a {
    color: #1A3150 !important; /* Bleu Nuit */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: inline-block;
}

.header-menu li a:hover {
    color: #2AA9BD !important; /* Turquoise */
}

/* Positionnement du dernier élément DU MENU PRINCIPAL uniquement (ex: Connexion).
   Le "> " cible seulement les enfants directs de .header-menu, pour que le
   dernier élément d'un sous-menu déroulant (ex: Spas) ne soit PAS affecté. */
.header-menu > li:last-child {
    margin-left: 15px !important;
}

.header-menu > li:last-child > a {
    color: #e63946 !important; /* Rouge doux */
    font-weight: 600;
}

/* ==========================================================================
   4. COMPOSANTS SPÉCIFIQUES - BANNIÈRE HERO & BARRE DE RECHERCHE
   ========================================================================== */
/* Zone de filtres en forme de pilule (Zoning) */
.search-bar-container input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-search {
    background-color: #2AA9BD !important; /* Turquoise */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-search:hover {
    background-color: #1A3150 !important; /* Devient Bleu Nuit au survol */
}

/* Bloc des catégories avec icônes */
.category-card {
    background: #ffffff;
    border: 1px solid #eee;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-card h5 {
    font-size: 14px;
    color: #1A3150;
    font-family: 'Poppins', sans-serif;
}

.category-card:hover {
    transform: translateY(-5px);
    border-color: #2AA9BD;
    box-shadow: 0 10px 20px rgba(28, 192, 142, 0.1) !important;
}

/* ==========================================================================
   5. STYLISATION DES CARTES ET IMAGES (FORMAT PAYSAGE)
   ========================================================================== */
.cadre-img {
    width: 100%;
    height: 220px; /* Force la hauteur paysage uniforme des cartes */
    overflow: hidden;
    background-color: #eaeaea;
}

.cadre-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recadre sans étirer le visuel */
}

.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    overflow: hidden;
    margin-bottom: 30px;
    background: #fff;
}

/* Boutons secondaires et textes */
.btn-primary {
    background-color: #2AA9BD !important; /* Turquoise */
    border-color: #2AA9BD !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 8px 20px;
}

.btn-primary:hover {
    background-color: #1A3150 !important;
    border-color: #1A3150 !important;
}

.text-turquoise {
    color: #2AA9BD !important;
    text-decoration: none;
}

.text-turquoise:hover {
    color: #1A3150 !important;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.italic-text {
    font-style: italic;
}

/* ==========================================================================
   6. FOOTER (bleu nuit, structure en colonnes)
   ========================================================================== */
.site-footer {
    background-color: #1A3150;
    color: #ffffff;
    margin-top: 60px;
}

.footer-title {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 18px;
    font-size: 18px;
}

.footer-text {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.7;
}

/* Liste de liens du footer, bien espacée verticalement */
.footer-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-menu-list li {
    margin-bottom: 10px !important;
    display: block !important;
}

.footer-menu-list li a {
    color: rgba(255,255,255,0.75) !important;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    transition: color 0.2s ease;
}

.footer-menu-list li a:hover {
    color: #2AA9BD !important;
}

/* Trait de séparation avant la ligne de copyright */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
}

/* ==========================================================================
   7. AJOUTS - CLASSES MANQUANTES POUR LA PAGE D'ACCUEIL
   ========================================================================== */

/* Bannière hero : fallback dégradé si l'image hero-bg.jpg est absente */
.hero-section {
    background-color: #1A3150; /* couleur de secours visible tant que l'image n'est pas ajoutée */
    background-size: cover;
    background-position: center;
}

/* Effet de survol sur les cartes de piscines */
.pool-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12) !important;
}

/* Cartes d'articles : même comportement au survol */
.article-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12) !important;
}

/* Cartes de témoignages */
.testimonial-card {
    background: #ffffff;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
}

/* Petit trait décoratif turquoise sous les titres de section */
.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: #2AA9BD;
    margin: 12px auto 0;
    border-radius: 3px;
}

/* ==========================================================================
   8. MENU DÉROULANT (sous-menu au survol, ex : Annonce > catégories)
   ========================================================================== */

/* L'élément de menu qui a des enfants devient le point d'ancrage du déroulant */
.header-menu li {
    position: relative;
}

/* Le sous-menu est caché par défaut */
.header-menu .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 8px 0 !important;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1000;
}

/* Au survol de l'élément parent, le sous-menu apparaît */
.header-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Chaque lien du sous-menu occupe toute la largeur, façon liste déroulante */
.header-menu .sub-menu li {
    display: block !important;
    width: 100%;
}

.header-menu .sub-menu li a {
    display: block !important;
    padding: 10px 20px !important;
    font-size: 14px;
    white-space: nowrap;
    color: #1A3150 !important;
}

.header-menu .sub-menu li a:hover {
    background-color: #f4faf8;
    color: #2AA9BD !important;
}

/* Petite flèche ▾ à côté du parent pour indiquer qu'il est déroulant */
.header-menu .menu-item-has-children > a::after {
    content: " ▾";
    font-size: 11px;
}

/* Les cartes catégories sont maintenant des liens : on garde le titre lisible */
.category-card h5 {
    color: #1A3150;
}
.category-card:hover h5 {
    color: #2AA9BD;
}

/* Titres de cartes de piscines : max 2 lignes, hauteur régulière */
.title-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em; /* réserve la place de 2 lignes pour aligner les cartes */
    line-height: 1.3;
}

/* Contenu éditorial des pages et articles : lisible et aéré */
.page-content {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.page-content p {
    margin-bottom: 1.2rem;
}

.page-content h2,
.page-content h3 {
    font-family: 'Poppins', sans-serif;
    color: #1A3150;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Pagination (liste d'articles) aux couleurs de la charte */
.pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    border-radius: 8px;
    background: #fff;
    color: #1A3150;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.pagination .page-numbers.current {
    background: #54C5EF; /* Turquoise de la charte */
    color: #fff;
}

.pagination .page-numbers:hover {
    background: #1A3150;
    color: #fff;
}
/* ==========================================================================
   9. PAGES À PROPOS & CONTACT (templates stylés)
   ========================================================================== */

/* Eyebrow (petit label turquoise au-dessus des titres) */
.apropos-eyebrow {
    display: inline-block;
    color: #54C5EF;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Hero À propos */
.apropos-hero {
    background: linear-gradient(rgba(26,49,80,0.85), rgba(26,49,80,0.85)),
                url('img/hero-bg.jpg') no-repeat center center/cover;
    min-height: 45vh;
    padding: 60px 0;
}

/* Chiffres clés */
.apropos-stat {
    background: #fff;
    border-radius: 14px;
    padding: 28px 16px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    height: 100%;
}
.apropos-stat-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 38px;
    color: #54C5EF;
    line-height: 1;
}
.apropos-stat-label {
    color: #1A3150;
    font-size: 14px;
    margin-top: 8px;
}

/* Cartes de valeurs */
.apropos-valeur-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.apropos-valeur-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.apropos-valeur-icon {
    font-size: 44px;
    margin-bottom: 16px;
}
.apropos-valeur-card h4 {
    color: #1A3150;
    margin-bottom: 12px;
}

/* CTA bas de page À propos */
.apropos-cta {
    background: linear-gradient(135deg, #54C5EF 0%, #7AD686 100%);
}
.apropos-cta .btn-light {
    color: #1A3150;
    font-weight: 600;
}

/* Hero Contact */
.contact-hero {
    background: linear-gradient(rgba(26,49,80,0.85), rgba(26,49,80,0.85)),
                url('img/hero-bg.jpg') no-repeat center center/cover;
    min-height: 32vh;
    padding: 50px 0;
}

/* Bloc coordonnées */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}
.contact-info-icon {
    font-size: 26px;
    background: #F4FAFB;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   10. FICHE ANNONCE (single) — layout façon Airbnb, d'après maquette Villa Azur
   ========================================================================== */
.annonce-titre {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #1A3150;
    font-size: 34px;
}

.annonce-cover img {
    max-height: 460px;
    object-fit: cover;
}

/* Bandeau infos rapides */
.annonce-quickinfos {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.quickinfo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1A3150;
    font-weight: 500;
}
.quickinfo-icon { font-size: 20px; }

/* Titres de section */
.annonce-section-titre {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #1A3150;
    font-size: 22px;
    margin-bottom: 18px;
}

/* Badges équipements */
.equipement-badge {
    background: #F4FAFB;
    color: #1A3150;
    border: 1px solid #DDEEF2;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
}

/* Bloc réservation sticky à droite */
.annonce-booking-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    position: sticky;
    top: 30px;
}
.annonce-prix-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #1A3150;
}
/* ==========================================================================
   11. MONTÉE EN GAMME — ANIMATIONS, DÉCO, RYTHME (page d'accueil)
   ========================================================================== */

/* Espacement de section généreux */
.py-6 { padding-top: 5.5rem; padding-bottom: 5.5rem; }

/* Fond légèrement teinté (alternance de rythme) */
.section-tinted { background: linear-gradient(180deg, #F4FAFB 0%, #EAF6F8 100%); }

/* --- Eyebrows (petits labels au-dessus des titres) --- */
.section-eyebrow, .hero-eyebrow {
    display: inline-block;
    color: #2AA9BD;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.section-eyebrow-light {
    display: inline-block;
    color: #54C5EF;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hero-eyebrow {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    padding: 8px 18px;
    border-radius: 30px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}

/* --- Hero titre plus impactant --- */
.hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -1px;
    text-shadow: 0 4px 30px rgba(0,0,0,0.25);
}
.hero-title-accent {
    background: linear-gradient(90deg, #ffffff, #C8F5A0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 12px rgba(0,0,0,0.5));
}

/* --- Vague blanche en bas du hero --- */
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 4; }
.hero-wave svg { width: 100%; height: 90px; display: block; }

/* --- Bulles décoratives flottantes --- */
.deco-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(84,197,239,0.15));
    pointer-events: none;
    animation: floatBubble 8s ease-in-out infinite;
}
.deco-bubble-1 { width: 120px; height: 120px; top: 15%; left: 8%; }
.deco-bubble-2 { width: 70px; height: 70px; top: 60%; left: 15%; animation-delay: 1.5s; }
.deco-bubble-3 { width: 90px; height: 90px; top: 25%; right: 10%; animation-delay: 3s; }
.deco-bubble-4 { width: 100px; height: 100px; bottom: 10%; left: 5%; opacity: .4; animation-delay: 1s; }
.deco-bubble-5 { width: 60px; height: 60px; top: 20%; right: 8%; opacity: .4; animation-delay: 2.5s; }
@keyframes floatBubble {
    0%,100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-22px) translateX(10px); }
}

/* Blob décoratif */
.deco-blob {
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    background: radial-gradient(circle, rgba(84,197,239,0.12), transparent 70%);
    pointer-events: none;
}
.deco-blob-left { top: -80px; left: -120px; }

/* --- Catégories : emoji + hover plus vivant --- */
.category-card {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
    border: 1px solid #f0f0f0;
}
.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 36px rgba(42,169,189,0.20);
}
.category-emoji {
    font-size: 2.6rem;
    display: inline-block;
    transition: transform .35s;
}
.category-card:hover .category-emoji { transform: scale(1.15) rotate(-6deg); }

/* --- Cartes piscines : zoom image + badge prix --- */
.img-zoom-wrap { overflow: hidden; position: relative; }
.img-zoom-wrap img { transition: transform .6s cubic-bezier(.2,.8,.2,1); width: 100%; }
.pool-card:hover .img-zoom-wrap img,
.article-card:hover .img-zoom-wrap img { transform: scale(1.08); }

.pool-card-badge {
    position: absolute;
    top: 14px; right: 14px;
    background: #2AA9BD;
    color: #fff;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pool-card, .article-card {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.pool-card:hover, .article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* --- Témoignages : guillemet décoratif --- */
.testimonial-card {
    position: relative;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    transition: transform .35s;
    border-radius: 16px;
}
.testimonial-card:hover { transform: translateY(-6px); }
.testimonial-quote-mark {
    font-family: Georgia, serif;
    font-size: 70px;
    line-height: 1;
    color: #2AA9BD;
    opacity: .18;
    position: absolute;
    top: 10px; right: 20px;
}

/* --- Avantages : icônes en pastille --- */
.avantage-icon {
    font-size: 2rem;
    width: 76px; height: 76px;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(84,197,239,0.15);
    border-radius: 20px;
    transition: transform .35s;
}
.col-md-4:hover .avantage-icon { transform: translateY(-6px) scale(1.05); }

/* --- Bouton outline primary --- */
.btn-outline-primary {
    color: #2AA9BD !important;
    border-color: #2AA9BD !important;
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: #2AA9BD !important;
    color: #fff !important;
}

/* ==========================================================================
   ANIMATION AU DÉFILEMENT
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { opacity: 1; transform: none; transition: none; }
    .deco-bubble { animation: none; }
}

/* ==========================================================================
   12. ICÔNES FONT AWESOME (remplacement des emojis)
   ========================================================================== */
/* Icônes de catégories */
.category-emoji i {
    font-size: 2.2rem;
    color: #2AA9BD;
    transition: transform .35s, color .35s;
}
.category-card:hover .category-emoji i {
    color: #1A3150;
}

/* Icônes d'avantages (section bleu nuit) */
.avantage-icon i {
    color: #54C5EF;
    font-size: 1.8rem;
}

/* Icône soleil dans l'eyebrow du hero */
.hero-eyebrow i { color: #FFD25A; }

/* Icônes valeurs (À propos) */
.apropos-valeur-icon i { color: #2AA9BD; font-size: 2.4rem; }
/* Icônes coordonnées (Contact) */
.contact-info-icon i { color: #2AA9BD; font-size: 22px; }
/* Icônes infos rapides (fiche annonce) */
.quickinfo-icon i { color: #2AA9BD; font-size: 18px; }

/* ==========================================================================
   13. EN-TÊTE DE PAGE ENRICHI (.page-hero) — homogène avec le hero d'accueil
   ========================================================================== */
.page-hero {
    background: linear-gradient(135deg, #1A3150 0%, #234876 100%);
    padding: 70px 0 90px;
    position: relative;
}
.page-hero h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
    letter-spacing: -0.5px;
}
/* La vague reprend le style du hero mais en plus petit */
.page-hero .hero-wave svg { height: 60px; }

/* ==========================================================================
   14. EFFETS PREMIUM — bouton retour haut, soulignement menu
   ========================================================================== */

/* Bouton retour en haut */
#back-to-top {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 50px; height: 50px;
    border: none;
    border-radius: 50%;
    background: #2AA9BD;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .3s, transform .3s, background .3s;
    box-shadow: 0 6px 20px rgba(42,169,189,0.4);
    z-index: 999;
}
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: #1A3150; transform: translateY(-4px); }

/* Soulignement animé des liens du menu principal */
.header-menu > li > a {
    position: relative;
}
.header-menu > li > a::before {
    content: "";
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: #2AA9BD;
    transition: width .3s ease;
}
.header-menu > li > a:hover::before { width: 100%; }

/* Le hero garde son parallaxe fluide */
.hero-section { background-attachment: scroll; will-change: background-position; }

/* ==========================================================================
   15. RESPONSIVE MOBILE — menu hamburger + barre de recherche
   ========================================================================== */

/* Le menu horizontal sur desktop */
.header-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Bouton hamburger caché sur desktop */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    color: #1A3150;
    cursor: pointer;
}

/* --- MOBILE & TABLETTE --- */
@media (max-width: 991px) {
    .menu-toggle { display: block; }

    /* Le menu devient un panneau déroulant vertical */
    .navigation-principale {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12);
        z-index: 998;
    }
    .navigation-principale.nav-open { display: block !important; }

    .custom-header { position: relative; }

    .header-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 10px 0;
        width: 100%;
    }
    .header-menu > li {
        width: 100%;
        border-bottom: 1px solid #f2f2f2;
    }
    .header-menu > li > a {
        display: block;
        padding: 14px 24px;
    }
    /* On désactive le soulignement animé sur mobile (pas pertinent) */
    .header-menu > li > a::before { display: none; }

    /* Sous-menus déroulants : toujours visibles en mode mobile (empilés) */
    .header-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        margin: 0;
        padding: 0 !important;
        background: #F4FAFB;
        border-radius: 0;
    }
    .header-menu .sub-menu li a { padding-left: 40px !important; }

    /* Barre de recherche : bloc vertical propre au lieu de la pilule */
    .search-bar-container {
        border-radius: 20px !important;
        padding: 12px !important;
    }
    .search-bar-container .row > div {
        border: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 12px 0 !important;
    }
    .search-bar-container .row > div:last-child {
        border-bottom: none !important;
        margin-top: 8px;
    }

    /* Titres un peu plus petits sur mobile */
    .hero-title { font-size: clamp(2rem, 8vw, 3rem); }

    /* Sections un peu moins hautes */
    .py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* ==========================================================================
   16. PANNEAU DE FILTRES (page annonces)
   ========================================================================== */
.filter-panel {
    background: #fff;
    border: 1px solid #eef2f4;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    position: sticky;
    top: 30px;
}
.filter-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #1A3150;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #F4FAFB;
}
.filter-label {
    font-weight: 600;
    font-size: 14px;
    color: #1A3150;
    margin-bottom: 6px;
    display: block;
}
.filter-equip-list {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 6px;
}
.filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
.filter-check input { accent-color: #2AA9BD; width: 16px; height: 16px; }
.form-range { accent-color: #2AA9BD; }
.form-select:focus, .form-control:focus {
    border-color: #2AA9BD;
    box-shadow: 0 0 0 .2rem rgba(42,169,189,0.15);
}

/* Placeholder image manquante */
.no-img-placeholder {
    width: 100%; height: 200px;
    background: linear-gradient(135deg, #EAF6F8, #F4FAFB);
    display: flex; align-items: center; justify-content: center;
    color: #B8D4DA; font-size: 40px;
}

/* Responsive : le panneau de filtres passe au-dessus sur mobile */
@media (max-width: 991px) {
    .filter-panel { position: static; margin-bottom: 24px; }
}

/* ==========================================================================
   17. FAVORIS & BADGES DYNAMIQUES (cartes annonces)
   ========================================================================== */
/* Bouton cœur favori */
.fav-btn {
    position: absolute;
    top: 14px; left: 14px;
    width: 40px; height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #888;
    font-size: 17px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: transform .25s, color .25s, background .25s;
    z-index: 3;
}
.fav-btn:hover { transform: scale(1.12); }
.fav-btn.is-fav { color: #e63946; }
.fav-btn.is-fav i { animation: favPop .35s ease; }
@keyframes favPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Badge "Nouveau" (tag en haut, sous le prix) */
.pool-card-tag {
    position: absolute;
    top: 14px; right: 14px;
    transform: translateY(42px);
    background: linear-gradient(90deg, #7AD686, #54C5EF);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 3;
}

/* ==========================================================================
   18. BOUTON FAVORIS FLOTTANT
   ========================================================================== */
#fav-float {
    position: fixed;
    bottom: 90px; right: 28px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #fff;
    color: #e63946;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 999;
    text-decoration: none;
    transition: transform .3s;
}
#fav-float:hover { transform: scale(1.1); }
#fav-float #fav-count {
    position: absolute;
    top: -4px; right: -4px;
    background: #e63946;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
}
#fav-float.fav-empty-state { color: #ccc; }
#fav-float.fav-empty-state #fav-count { background: #ccc; }

/* ==========================================================================
   19. COMMENT ÇA MARCHE + STATISTIQUES
   ========================================================================== */

/* Comment ça marche */
.hiw-row { position: relative; }
.hiw-step { padding: 20px; position: relative; }
.hiw-num {
    width: 36px; height: 36px;
    background: #1A3150;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin: 0 auto 16px;
    font-size: 16px;
}
.hiw-icon {
    width: 90px; height: 90px;
    margin: 0 auto 20px;
    background: #fff;
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    color: #2AA9BD;
    box-shadow: 0 10px 30px rgba(42,169,189,0.15);
    transition: transform .35s;
}
.hiw-step:hover .hiw-icon { transform: translateY(-8px) rotate(-4deg); }
.hiw-step h4 { color: #1A3150; font-family: 'Poppins', sans-serif; margin-bottom: 10px; }

/* Ligne pointillée entre les étapes (desktop) */
@media (min-width: 768px) {
    .hiw-row .col-md-4:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 60px; right: -8px;
        width: 60px;
        border-top: 2px dashed #B8D4DA;
    }
}

/* Bande de statistiques */
.stats-band {
    background: linear-gradient(135deg, #2AA9BD 0%, #54C5EF 60%, #7AD686 100%);
    padding: 4rem 0;
}
.stat-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1;
    text-shadow: 0 3px 12px rgba(0,0,0,0.12);
}
.stat-label {
    font-size: 14px;
    margin-top: 8px;
    opacity: 0.95;
    font-family: 'Montserrat', sans-serif;
}

/* ==========================================================================
   20. PAGE FAQ (accordéon)
   ========================================================================== */
.faq-group { margin-bottom: 40px; }
.faq-group-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #1A3150;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #F4FAFB;
}
.faq-group-title i { color: #2AA9BD; }

.faq-item {
    background: #fff;
    border: 1px solid #eef2f4;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .3s;
}
.faq-item.open { box-shadow: 0 8px 24px rgba(0,0,0,0.07); }

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 24px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #1A3150;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-chevron {
    color: #2AA9BD;
    transition: transform .3s;
    flex-shrink: 0;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
    padding: 0 24px;
}
.faq-item.open .faq-answer {
    max-height: 400px;
    padding: 0 24px 22px;
}
.faq-answer p {
    margin: 0;
    color: #666;
    line-height: 1.7;
    font-family: 'Montserrat', sans-serif;
}

/* Encart contact bas de FAQ */
.faq-contact {
    background: linear-gradient(135deg, #F4FAFB, #EAF6F8);
    border-radius: 20px;
    padding: 40px 30px;
    margin-top: 40px;
}
.faq-contact h4 { color: #1A3150; font-family: 'Poppins', sans-serif; }

/* ==========================================================================
   21. BOUTON BASCULE + MODE SOMBRE
   ========================================================================== */
#dark-toggle {
    position: fixed;
    bottom: 152px; right: 28px;
    width: 50px; height: 50px;
    border: none;
    border-radius: 50%;
    background: #1A3150;
    color: #FFD25A;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    z-index: 999;
    transition: transform .3s, background .3s;
}
#dark-toggle:hover { transform: scale(1.1) rotate(15deg); }

/* --- COULEURS DU MODE SOMBRE --- */
body.dark-mode {
    background-color: #0f1826;
    color: #d5dae2;
}
/* Fonds de sections */
body.dark-mode .bg-white,
body.dark-mode .section-tinted,
body.dark-mode section.bg-white {
    background: #16202f !important;
    background-color: #16202f !important;
}
body.dark-mode .section-tinted {
    background: linear-gradient(180deg, #16202f 0%, #1a2637 100%) !important;
}

/* Header */
body.dark-mode .custom-header { background: #0f1826 !important; }
body.dark-mode .navigation-principale { background: #0f1826; }
body.dark-mode .header-menu > li > a { color: #d5dae2 !important; }

/* Titres et textes */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode .section-title,
body.dark-mode .card-title { color: #f0f3f7 !important; }
body.dark-mode .text-muted { color: #9aa5b4 !important; }
body.dark-mode .text-dark { color: #f0f3f7 !important; }

/* Cartes */
body.dark-mode .card,
body.dark-mode .pool-card,
body.dark-mode .article-card,
body.dark-mode .testimonial-card,
body.dark-mode .filter-panel,
body.dark-mode .faq-item,
body.dark-mode .annonce-booking-card,
body.dark-mode .apropos-stat,
body.dark-mode .apropos-valeur-card {
    background: #1c2838 !important;
    border-color: #2a3a4f !important;
    color: #d5dae2;
}
body.dark-mode .hiw-icon { background: #1c2838 !important; }

/* Champs de formulaire */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: #1c2838 !important;
    border-color: #2f3d50 !important;
    color: #e6eaf0 !important;
}
body.dark-mode .search-bar-container { background: #1c2838 !important; }

/* Sections déjà bleu nuit : on les garde mais un ton plus sombre */
body.dark-mode .page-hero,
body.dark-mode [style*="#1A3150"] { }

/* FAQ questions */
body.dark-mode .faq-question { color: #f0f3f7; }
body.dark-mode .faq-answer p { color: #9aa5b4; }
body.dark-mode .faq-group-title { color: #f0f3f7; border-color: #2a3a4f; }
body.dark-mode .faq-contact { background: #1c2838 !important; }

/* Placeholder image */
body.dark-mode .no-img-placeholder {
    background: linear-gradient(135deg, #1c2838, #16202f);
    color: #3a4a5f;
}

/* Bouton bascule en mode sombre (devient clair) */
body.dark-mode #dark-toggle { background: #FFD25A; color: #1A3150; }

/* ==========================================================================
   22. CARTE INTERACTIVE (Leaflet)
   ========================================================================== */
.pool-marker-inner {
    width: 38px; height: 38px;
    background: #2AA9BD;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.pool-marker-inner i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 15px;
}
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
}
.leaflet-popup-content { margin: 12px !important; font-family: 'Montserrat', sans-serif; }

/* ==========================================================================
   23. WIDGET D'ACCESSIBILITÉ
   ========================================================================== */
#a11y-widget { position: fixed; bottom: 90px; left: 28px; z-index: 1000; }
#a11y-toggle {
    width: 52px; height: 52px;
    border: none; border-radius: 50%;
    background: #2AA9BD; color: #fff;
    font-size: 22px; cursor: pointer;
    box-shadow: 0 6px 20px rgba(42,169,189,0.4);
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s;
}
#a11y-toggle:hover { transform: scale(1.1); }
#a11y-panel {
    position: absolute;
    bottom: 62px; left: 0;
    width: 240px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    padding: 16px;
    display: none;
}
#a11y-panel.open { display: block; }
.a11y-title { color: #1A3150; font-family: 'Poppins', sans-serif; font-weight: 600; margin-bottom: 12px; }
.a11y-opt {
    width: 100%; text-align: left;
    background: #F4FAFB; border: none;
    border-radius: 8px; padding: 10px 12px;
    margin-bottom: 6px; cursor: pointer;
    font-size: 14px; color: #1A3150;
    display: flex; align-items: center; gap: 10px;
    transition: background .2s;
}
.a11y-opt:hover { background: #E1F0F3; }
.a11y-opt i { color: #2AA9BD; width: 18px; }
.a11y-reset { background: #fff5f5; color: #e63946; }
.a11y-reset i { color: #e63946; }

/* Modes d'accessibilité appliqués au site */
body.a11y-contrast { filter: contrast(1.4); }
body.a11y-grayscale { filter: grayscale(1); }
body.a11y-contrast.a11y-grayscale { filter: contrast(1.4) grayscale(1); }
body.a11y-links a { text-decoration: underline !important; font-weight: 600 !important; }

/* Sur mobile, on décale pour ne pas gêner */
@media (max-width: 991px) {
    #a11y-widget { bottom: 28px; left: 20px; }
}

/* ==========================================================================
   24. RÉSEAUX SOCIAUX (footer)
   ========================================================================== */
.footer-socials {
    display: flex;
    gap: 12px;
}
.footer-socials a {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: transform .3s, background .3s;
}
.footer-socials a:hover {
    transform: translateY(-4px);
    background: #2AA9BD;
}

/* ==========================================================================
   25. SECTION NEWSLETTER (Mailchimp)
   ========================================================================== */
.newsletter-section {
    padding: 0 0 60px;
    margin-top: -20px;
}
.newsletter-box {
    background: linear-gradient(135deg, #2AA9BD 0%, #54C5EF 55%, #7AD686 100%);
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 50px rgba(42,169,189,0.25);
    position: relative;
    overflow: hidden;
}
.newsletter-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 28px;
    margin: 6px 0 12px;
}
.newsletter-text {
    color: rgba(255,255,255,0.92);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
}
.newsletter-input-group {
    display: flex;
    gap: 8px;
    background: #fff;
    border-radius: 40px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.newsletter-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 20px;
    font-size: 15px;
    outline: none;
    color: #1A3150;
}
.newsletter-btn {
    background: #1A3150;
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 12px 28px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s, transform .3s;
    white-space: nowrap;
}
.newsletter-btn:hover {
    background: #0f2036;
    transform: translateY(-2px);
}
.newsletter-privacy {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    margin: 12px 0 0;
    text-align: center;
}
@media (max-width: 767px) {
    .newsletter-box { padding: 32px 24px; }
    .newsletter-input-group { flex-direction: column; border-radius: 20px; }
    .newsletter-btn { border-radius: 16px; }
}

/* ==========================================================================
   26. LIGHTBOX (agrandissement image fiche annonce)
   ========================================================================== */
.annonce-cover-link {
    display: block;
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 16px;
}
.annonce-cover-link img {
    transition: transform .5s ease;
}
.annonce-cover-link:hover img {
    transform: scale(1.03);
}
.annonce-cover-zoom {
    position: absolute;
    bottom: 16px; right: 16px;
    background: rgba(26,49,80,0.85);
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.annonce-cover-link:hover .annonce-cover-zoom {
    opacity: 1;
}

/* La fenêtre lightbox */
.pp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 40px;
    cursor: zoom-out;
}
.pp-lightbox.open {
    display: flex;
    animation: lightboxFade .3s ease;
}
@keyframes lightboxFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.pp-lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.pp-lightbox-close {
    position: absolute;
    top: 24px; right: 36px;
    color: #fff;
    font-size: 44px;
    cursor: pointer;
    line-height: 1;
    transition: transform .2s;
}
.pp-lightbox-close:hover {
    transform: scale(1.2);
}

/* ==========================================================================
   27. PLUS DE PEPS — accents coraux, dégradés vifs, sections dynamiques
   ========================================================================== */

/* Couleur d'accent corail estival (nouvelle couleur "peps") */
:root {
    --pp-corail: #FF7E5F;
    --pp-corail-soft: #FFB199;
}

/* Badge "Nouveau" en corail vif (plus punchy que le vert) */
.pool-card-tag {
    background: linear-gradient(90deg, #FF7E5F, #FFB199) !important;
}

/* Badge prix : dégradé turquoise plus vif */
.pool-card-badge {
    background: linear-gradient(135deg, #2AA9BD, #54C5EF) !important;
    box-shadow: 0 4px 14px rgba(42,169,189,0.4) !important;
}

/* Eyebrows : ajout d'un petit trait décoratif coloré */
.section-eyebrow::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--pp-corail);
    margin-left: 10px;
    vertical-align: middle;
}

/* Section "Comment ça marche" : numéros en dégradé corail */
.hiw-num {
    background: linear-gradient(135deg, #FF7E5F, #FF9E7D) !important;
    box-shadow: 0 6px 16px rgba(255,126,95,0.35);
}

/* Icônes catégories : fond dégradé au survol */
.category-card:hover {
    background: linear-gradient(135deg, #ffffff, #F4FAFB) !important;
    box-shadow: 0 18px 40px rgba(42,169,189,0.25) !important;
}
.category-card:hover .category-emoji i {
    color: var(--pp-corail) !important;
    transform: scale(1.2) rotate(-8deg);
}

/* Boutons principaux : dégradé au lieu d'aplat (plus vivant) */
.btn-primary {
    background: linear-gradient(135deg, #2AA9BD, #1d8fa0) !important;
}

/* Liens de survol des cartes : accent corail */
.pool-card:hover .card-title,
.article-card:hover .card-title {
    color: #2AA9BD;
    transition: color .3s;
}

/* Section stats : plus vive avec overlay */
.stats-band {
    background: linear-gradient(135deg, #1A3150 0%, #2AA9BD 50%, #7AD686 100%) !important;
}
.stat-num {
    color: #fff;
}

/* Titres de section : petit accent sous le titre */
.section-title {
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #2AA9BD, #FF7E5F);
    border-radius: 2px;
    margin: 14px auto 0;
}

/* Footer : bordure supérieure colorée */
.site-footer {
    border-top: 4px solid;
    border-image: linear-gradient(90deg, #2AA9BD, #7AD686, #FF7E5F) 1;
}

/* ==========================================================================
   28. LOGO FOOTER — version blanche pour lisibilité sur fond bleu nuit
   ========================================================================== */
.footer-logo-img {
    filter: brightness(0) invert(1);
    /* Transforme le logo en blanc pur, lisible sur le fond sombre du footer */
}

/* ==========================================================================
   28. LOGO FOOTER — version blanche pour lisibilité sur fond bleu nuit
   ========================================================================== */
.footer-logo-img {
    filter: brightness(0) invert(1);
    /* transforme le logo en blanc pur, lisible sur le footer sombre */
}

/* ==========================================================================
   28. LOGO FOOTER — version blanche pour lisibilité sur fond bleu nuit
   ========================================================================== */
.footer-logo-img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* ==========================================================================
   29. FICHE ANNONCE PREMIUM (façon Airbnb)
   ========================================================================== */

/* Fil d'Ariane */
.annonce-breadcrumb {
    font-size: 13px;
    color: #999;
}
.annonce-breadcrumb a {
    color: #2AA9BD;
    text-decoration: none;
}
.annonce-breadcrumb a:hover { text-decoration: underline; }
.annonce-breadcrumb i { font-size: 10px; color: #ccc; }

/* Note (étoile dorée) */
.annonce-note {
    color: #1A3150;
    font-weight: 500;
}
.annonce-note i { color: #FFB800; }

/* Pastille type d'annonce */
.annonce-type-pill {
    background: linear-gradient(135deg, #2AA9BD, #54C5EF);
    color: #fff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
}

/* Image de couverture : coins arrondis + ombre */
.annonce-cover-link {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.annonce-cover-link img {
    border-radius: 20px;
    max-height: 500px;
    object-fit: cover;
}

/* Séparateur */
.annonce-sep {
    border: none;
    border-top: 1px solid #eee;
    margin: 24px 0;
}

/* Infos rapides : cartes avec fond */
.annonce-quickinfos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.quickinfo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F4FAFB;
    padding: 12px 18px;
    border-radius: 12px;
    color: #1A3150;
    font-size: 14px;
}
.quickinfo-icon i { color: #2AA9BD; font-size: 18px; }

/* Description */
.annonce-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* Équipements en items avec icônes */
.equipement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eef2f4;
    border-radius: 12px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.equipement-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(42,169,189,0.12);
    border-color: #2AA9BD;
}
.equipement-item i {
    color: #2AA9BD;
    font-size: 20px;
    width: 24px;
    text-align: center;
}
.equipement-item span { color: #1A3150; font-size: 14px; }

/* Boîte adresse */
.annonce-adresse-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #F4FAFB, #EAF6F8);
    padding: 18px 22px;
    border-radius: 14px;
    border-left: 4px solid #7AD686;
}
.annonce-adresse-box i { color: #7AD686; font-size: 22px; }
.annonce-adresse-box span { color: #1A3150; font-weight: 500; }

/* Bloc réservation premium */
.annonce-booking-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    position: sticky;
    top: 30px;
    overflow: hidden;
}
.annonce-prix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, #1A3150, #234876);
    color: #fff;
}
.annonce-prix-header .annonce-prix-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #fff;
}
.annonce-prix-header .text-muted { color: rgba(255,255,255,0.7) !important; }
.annonce-note-mini {
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}
.annonce-note-mini i { color: #FFB800; }
.annonce-booking-body { padding: 24px 28px; }

/* Réassurance */
.annonce-reassurance {
    border-top: 1px solid #eee;
    padding: 20px 28px;
    background: #FAFCFD;
}
.reassurance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #555;
    padding: 6px 0;
}
.reassurance-item i {
    color: #7AD686;
    font-size: 15px;
    width: 20px;
    text-align: center;
}

/* ==========================================================================
   29. FICHE ANNONCE — touches premium façon Airbnb
   ========================================================================== */

/* Photo de couverture plus grande et immersive */
.annonce-cover-link img {
    height: 480px;
    object-fit: cover;
    border-radius: 20px;
}

/* Badge "Coup de cœur" sur la photo */
.annonce-cover {
    position: relative;
}
.annonce-favori-badge {
    position: absolute;
    top: 20px; left: 20px;
    background: rgba(255,255,255,0.95);
    color: #1A3150;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    z-index: 2;
}
.annonce-favori-badge i { color: #FF7E5F; }

/* Titre plus grand et impactant */
.annonce-titre {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    font-weight: 700 !important;
}

/* Note avec étoile dorée plus visible */
.annonce-note i { color: #FFB800; }
.annonce-note { font-size: 15px; }

/* Pill de type d'annonce plus stylé */
.annonce-type-pill {
    background: linear-gradient(135deg, #2AA9BD, #54C5EF);
    color: #fff;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

/* Bandeau infos rapides : style carte */
.annonce-quickinfos {
    background: #F4FAFB;
    border-radius: 16px;
    padding: 20px 24px !important;
    border: none !important;
    gap: 28px !important;
}
.quickinfo-icon i {
    background: #fff;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Équipements : style plus premium */
.equipement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    transition: background .25s, transform .25s;
}
.equipement-item:hover {
    background: #F4FAFB;
    transform: translateX(4px);
}
.equipement-item i {
    color: #2AA9BD;
    font-size: 18px;
    width: 24px;
    text-align: center;
}

/* Section "points forts" (nouvelle) */
.annonce-highlights {
    background: linear-gradient(135deg, #F4FAFB, #EAF6F8);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 2rem;
}
.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.highlight-item:last-child { margin-bottom: 0; }
.highlight-item i {
    color: #FF7E5F;
    font-size: 20px;
    margin-top: 3px;
}
.highlight-item strong { color: #1A3150; display: block; font-family: 'Poppins', sans-serif; }
.highlight-item span { color: #666; font-size: 14px; }

/* Bloc réservation : header plus premium */
.annonce-booking-card {
    border-radius: 20px !important;
    border: 1px solid #e8eef0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
}
.annonce-prix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.annonce-prix-num {
    font-size: 32px !important;
    background: linear-gradient(135deg, #1A3150, #2AA9BD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.annonce-note-mini {
    background: #FFF8E7;
    color: #B8860B;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}
.annonce-note-mini i { color: #FFB800; }

/* Réassurance : style premium */
.annonce-reassurance {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.reassurance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #555;
    font-size: 14px;
}
.reassurance-item i {
    color: #7AD686;
    font-size: 16px;
    width: 20px;
}

/* ==========================================================================
   30. HERO IMMERSIF — badges de confiance + indicateur de scroll
   ========================================================================== */

/* Badges de confiance sous la barre de recherche */
.hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}
.hero-badge {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .3s, background .3s;
}
.hero-badge:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.25);
}
.hero-badge i { color: #FFD25A; }
.hero-badge:nth-child(2) i { color: #FFB800; }
.hero-badge:nth-child(3) i { color: #7AD686; }

/* Titre hero encore plus impactant */
.hero-title {
    font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
    text-shadow: 0 4px 40px rgba(0,0,0,0.35) !important;
}

/* Indicateur de défilement (souris animée) */
.hero-scroll {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 46px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 20px;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    transition: border-color .3s;
}
.hero-scroll:hover { border-color: #fff; }
.hero-scroll-mouse {
    width: 4px;
    height: 8px;
    background: #fff;
    border-radius: 4px;
    animation: scrollMouse 1.6s ease-in-out infinite;
}
@keyframes scrollMouse {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(16px); }
}

@media (max-width: 767px) {
    .hero-badges { gap: 8px; margin-top: 24px; }
    .hero-badge { font-size: 12px; padding: 8px 14px; }
    .hero-scroll { display: none; }
}

/* ==========================================================================
   30. HERO IMMERSIF — traitement premium de l'image de fond
   ========================================================================== */

/* Le hero prend toute la hauteur de l'écran pour l'immersion */
.hero-section {
    min-height: 100vh !important;
    position: relative;
}

/* Image de fond avec zoom lent en continu (effet "Ken Burns") */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('img/hero-bg.jpg') no-repeat center center/cover;
    z-index: 0;
    animation: heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Overlay dégradé riche par-dessus l'image (profondeur + lisibilité) */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(26, 49, 80, 0.78) 0%,
        rgba(26, 49, 80, 0.45) 45%,
        rgba(42, 169, 189, 0.42) 100%
    );
    z-index: 1;
}

/* On s'assure que le contenu passe au-dessus des pseudo-éléments */
.hero-section > * {
    position: relative;
    z-index: 2;
}

/* Le style inline de background sur .hero-section devient inutile,
   on le neutralise pour laisser le ::before gérer l'image animée */
.hero-section {
    background-image: none !important;
}

/* Titre encore plus impactant */
.hero-title {
    font-size: clamp(2.6rem, 6.5vw, 5rem) !important;
    text-shadow: 0 4px 40px rgba(0,0,0,0.35);
    letter-spacing: -1.5px;
}

/* Sous-titre plus lisible */
.hero-section .lead {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Badges de confiance : effet verre dépoli */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}
.hero-badge {
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    transition: transform .3s, background .3s;
}
.hero-badge:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.22);
}
.hero-badge i { color: #FFD25A; margin-right: 6px; }

/* Indicateur de défilement animé */
.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 28px;
    height: 46px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.hero-scroll-mouse {
    width: 5px;
    height: 8px;
    background: #fff;
    border-radius: 3px;
    animation: scrollWheel 1.6s ease-in-out infinite;
}
@keyframes scrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}

/* Apparition en fondu du hero au chargement */
.hero-section .container {
    animation: heroFadeIn 1.2s ease both;
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Barre de recherche : ombre plus douce et premium */
.search-bar-container {
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.5);
}

/* ==========================================================================
   30. HERO IMMERSIF — traitement premium
   ========================================================================== */

/* Hero immersif */
.hero-section {
    position: relative;
}

/* Overlay dégradé premium (plus de profondeur, texte plus lisible) */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(26,49,80,0.15) 0%, rgba(26,49,80,0.55) 100%),
        radial-gradient(circle at 50% 40%, rgba(42,169,189,0.15), transparent 60%);
    z-index: 1;
    pointer-events: none;
}

/* On s'assure que le contenu reste au-dessus */
.hero-section > .container,
.hero-section > .deco-bubble,
.hero-section > .hero-scroll {
    position: relative;
    z-index: 3;
}

/* La vague reste absolute en bas, au-dessus des overlays */
.hero-section > .hero-wave {
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 4;
}
.hero-section > .hero-wave svg {
    width: 100% !important;
    display: block;
}

/* Titre hero : ombre plus douce et présence renforcée */
.hero-title {
    text-shadow: 0 4px 40px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25) !important;
    letter-spacing: -1px;
}

/* Sous-titre plus lisible */
.hero-section .lead {
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
    font-size: 1.25rem;
}

/* Badges de confiance : effet verre dépoli premium */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}
.hero-badge {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    transition: transform .3s, background .3s;
}
.hero-badge:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.2);
}
.hero-badge i { color: #FFD25A; margin-right: 6px; }

/* Barre de recherche : ombre plus profonde, effet premium */
.search-bar-container {
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.5);
}

/* Bouton recherche : dégradé vif */
.btn-search {
    background: linear-gradient(135deg, #2AA9BD, #1d8fa0) !important;
    font-weight: 600;
    transition: transform .3s, box-shadow .3s;
}
.btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(42,169,189,0.4);
}