/* =========================================
   MAP & MODAL (Similaire à avant, ajusté)
   ========================================= */
.map-container { flex-grow: 1; position: relative; z-index: 1; }
.map-hidden { display: none !important; }
#map { height: 600px; width: 100%; border: 1px solid #333; border-radius: 4px; background: #1a1a1a; }

/* Légende & Overlay */
.modal-legend, .map-legend-overlay {
    position: absolute; z-index: 2000; min-width: 150px;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.98), rgba(20, 20, 20, 0.95));
    border-top: 2px solid #f1b52c;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    border-radius: 0 0 4px 4px; padding: 15px 20px;
}
.map-legend-overlay { top: 50px; right: 20px; }
.modal-legend { top: 170px; right: 175px; min-width: 160px; padding: 20px 25px; }

.legend-title {
    margin: 0 0 12px 0; color: #f1b52c; font-size: 10px; font-weight: 900; 
    text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #333; padding-bottom: 8px;
}
.legend-item { display: flex; align-items: center; margin-bottom: 8px; }
.legend-txt { color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-left: 10px; }
.color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.c1 { color: #bcede6; background-color: #bcede6; }
.c2 { color: #00a0e9; background-color: #00a0e9; }
.c3 { color: #2e3192; background-color: #2e3192; }
.unavail { color: #666; background-color: #444; border: 1px solid #555; box-shadow: none; }

/* Modale Glass & Popup (Code existant conservé pour fonctionnalité) */
#modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}
.modal-box {
    width: 85%; height: 85%; background: #0f0f0f; border: 1px solid #333;
    border-top: 4px solid #f1b52c; display: flex; flex-direction: column; border-radius: 4px;
}
.modal-header {
    background: #111; padding: 15px 30px; border-bottom: 1px solid #222;
    display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { margin: 0; color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; }
.btn-close-modal {
    background: transparent; border: 1px solid #444; color: #888; padding: 8px 15px;
    font-size: 10px; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.btn-close-modal:hover { border-color: #f1b52c; color: #f1b52c; }
#zone-map { flex-grow: 1; width: 100%; background: #0e0e0e; }

/* Leaflet Popup Styling */
.custom-agency-popup .leaflet-popup-content-wrapper {
    background: #111; border: 1px solid #f1b52c; border-radius: 2px; color: #fff;
}
.custom-agency-popup .leaflet-popup-tip { background: #111; border: 1px solid #f1b52c; }
.popup-agency-title { color: #f1b52c; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; }

/* =========================================
   DÉTAILS VIEW - DESIGN "PREMIUM DARK"
   ========================================= */
.details-container {
    width: 100%; 
    background: #111; /* Fond plus sombre pour faire ressortir les cadres */
    border: 1px solid #333;
    border-radius: 6px; 
    padding: 30px; 
    animation: fadeIn 0.4s ease;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* En-tête */
.detail-header { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    border-bottom: 1px solid #222; 
    padding-bottom: 20px; 
    margin-bottom: 30px; 
}
.detail-header h2 { 
    margin: 0; 
    color: #f1b52c; 
    font-size: 20px; 
    font-weight: 800;
    text-transform: uppercase; 
    letter-spacing: 1px; 
}
.btn-back {
    background: transparent; 
    border: 1px solid #444; 
    color: #888; 
    padding: 8px 16px;
    border-radius: 2px; 
    cursor: pointer; 
    font-size: 10px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: all 0.2s;
}
.btn-back:hover { 
    border-color: #fff; 
    color: #fff; 
    background: #222; }

/* Layout Grid */
.detail-content { display: grid; grid-template-columns: 35% 40% 20%; gap: 2.5%; }

/* Colonne Image */
.detail-image img { 
    width: 100%; height: auto; object-fit: cover; 
    border-radius: 2px; border: 1px solid #333; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.specs-box {
    display: flex; justify-content: space-between; background: #0a0a0a;
    margin-top: 15px; padding: 15px; border-radius: 2px; border: 1px solid #222;
}
.spec-item { text-align: center; width: 33%; border-right: 1px solid #222; }
.spec-item:last-child { border-right: none; }
.spec-label { font-size: 9px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 5px; }
.spec-value { font-size: 13px; color: #eee; font-weight: 700; }

.detail-base-price { 
    margin-top: 15px; font-size: 12px; color: #888; 
    text-align: center; text-transform: uppercase; letter-spacing: 1px; 
}
.detail-base-price span { color: #287233; font-size: 16px; font-weight: 800; margin-left: 5px; }

/* Colonne Configuration (Centre) */
.config-title { 
    color: #fff; border-bottom: 2px solid #f1b52c; padding-bottom: 10px; 
    margin-top: 0; margin-bottom: 25px; font-size: 14px; font-weight: 800; 
    letter-spacing: 1px; text-transform: uppercase; 
}

/* Labels Généraux */
.form-group { margin-bottom: 25px; }
/* Modification de l'alignement et de la marge pour coller à la case */
.label-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; /* Garde le texte et le bouton bien alignés au centre verticalement */
    margin-bottom: 3px; /* RÉDUIT DE 10px À 3px POUR COLLER À LA CASE */
}
.form-group label, .placement-info-box label { 
    display: block; 
    color: #888; 
    font-size: 10px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* Badges de placement */
.placement-info-box { 
    margin-bottom: 25px; }

.badges-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-top: 8px; }

.badge-item {
    background: rgba(40, 114, 51, 0.1); 
    color: #287233; 
    border: 1px solid #287233;
    padding: 6px 12px; 
    border-radius: 2px; 
    font-size: 10px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    
}
.badge-item.default { color: #555; border-color: #333; background: transparent; }



/* CUSTOM SELECT (Dropdowns) */
.custom-select-wrapper { position: relative; width: 48%; }
.custom-select-trigger {
    background: #0a0a0a; border: 1px solid #333; color: #ccc; padding: 12px 15px;
    font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; 
    transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px;
}
.custom-select-trigger:hover { border-color: #666; color: #fff; }
.custom-select-wrapper.open .custom-select-trigger { border-color: #f1b52c; color: #fff; }
.arrow { font-size: 8px; color: #ffffff; }
/* Container de la liste déroulante */
.custom-options {
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: #0f0f0f;
    border: 1px solid #f1b52c; 
    border-top: none; 
    z-index: 1000; 
    display: none;
    
    /* --- MODIFICATIONS POUR LE SCROLL --- */
    max-height: 300px;  /* Limite la hauteur (environ 5-6 options visibles) */
    overflow-y: auto;   /* Ajoute la barre de scroll si ça dépasse */
    /* ------------------------------------ */
}

/* --- DESIGN DE LA SCROLLBAR (Pour que ce soit joli et sombre) --- */
.custom-options::-webkit-scrollbar {
    width: 5px; /* Barre fine */
}
.custom-options::-webkit-scrollbar-track {
    background: #0f0f0f; /* Fond noir */
}
.custom-options::-webkit-scrollbar-thumb {
    background: #9d9d9d; /* Barre grise */
    border-radius: 2px;
}
.custom-options::-webkit-scrollbar-thumb:hover {
    background: #f1b52c; /* Devient OR au survol */
}

/* Le reste reste pareil */
.custom-select-wrapper.open .custom-options { display: block; }

.custom-option { 
    padding: 10px 15px; color: #888; cursor: pointer; transition: 0.2s; 
    font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #222;
}
.custom-option:hover { background: #f1b52c; color: #000; font-weight: bold; }
.custom-option.selected { background: #222; color: #f1b52c; font-weight: bold; }
.info-text { display: block; font-size: 9px; color: #555; margin-top: 6px; font-style: italic; }

/* =========================================
   CORRECTION : STOCKAGE (RADIOS)
   ========================================= */
.radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 8px; }

.radio-label {
    background: #0a0a0a; 
    border: 1px solid #333; 
    
    /* On laisse la hauteur s'adapter au contenu, avec un padding confortable */
    height: auto; 
    padding: 15px 10px; 
    
    display: flex !important;
    flex-direction: row !important; /* On remet en ligne pour éviter le texte écrasé */
    align-items: center !important;     
    justify-content: center !important; 
    
    cursor: pointer;
    transition: all 0.2s ease; position: relative;
}

.radio-label span { 
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #888; 
    white-space: nowrap; /* EMPÊCHE le texte de passer à la ligne */
}

.radio-label input { display: none; }

/* Hover */
.radio-label:hover { border-color: #666; background: #151515; }
.radio-label:hover span { color: #fff; }

/* Sélectionné */
.radio-label:has(input:checked) {
    border-color: #f1b52c; background: rgba(241, 181, 44, 0.05);
    box-shadow: 0 0 15px rgba(241, 181, 44, 0.1);
}
.radio-label:has(input:checked) span { color: #f1b52c; font-weight: 800; }


/* =========================================
   CORRECTION : OPTIONS (CHECKBOXES) - HAUTEUR RÉDUITE
   ========================================= */
.checkbox-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-top: 8px; }

.check-label {
    background: #0a0a0a; 
    border: 1px solid #333; 
    
    /* --- HAUTEUR RÉDUITE ICI --- */
    padding: 15px 12px; /* Beaucoup moins de padding vertical */
    /* --------------------------- */

    cursor: pointer;
    
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: flex-start !important; 
    gap: 15px; 
    
    transition: all 0.2s; position: relative;
}

.check-label input { display: none; }

/* Le carré visuel */
.check-box-visual {
    width: 15px; 
    height: 14px; /* Un tout petit peu plus petit pour aller avec la hauteur réduite */
    border: 1px solid #555; 
    background: #000;
    display: flex; 
    align-items: center; justify-content: center; 
    flex-shrink: 0; 
    transition: 0.2s;
}

.check-text { 
    font-size: 12px; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: #a9a9a9; 
    margin: 0; 
    padding: 0; 
    border: none;
    line-height: normal; 
    padding-top: 1px; /* Petit ajustement optique */
}

/* DANS VIEWS.CSS */

/* Couleur verte pour les pourcentages */
.green-txt {
    color: #287233 !important; /* Vert lumineux */
    font-weight: 800; /* Un peu plus gras pour bien ressortir */
    margin-left: 3px; /* Petit espace */
    opacity: 0.9;
}

/* (Optionnel) Au survol de la case, on garde le vert éclatant */
.check-label:hover .green-txt {
    opacity: 1;
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.4);
}

/* Hover */
.check-label:hover { border-color: #666; background: #151515; }
.check-label:hover .check-text { color: #fff; }

/* Coché */
.check-label:has(input:checked) {
    border-color: #f1b52c; background: rgba(241, 181, 44, 0.05);
}
.check-label:has(input:checked) .check-box-visual {
    background: #f1b52c; border-color: #f1b52c; color: #000;
}
.check-label:has(input:checked) .check-box-visual::after {
    content: '✔'; font-size: 9px; font-weight: bold;
}
.check-label:has(input:checked) .check-text { 
    color: #f1b52c; font-weight: 800;
}

/* Colonne Résumé (Devis) */
.detail-summary { 
    background: #0f0f0f; padding: 20px; border-radius: 4px; border: 1px solid #333; 
    height: fit-content; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.summary-title { margin-top: 0; color: #fff; text-align: center; font-size: 12px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 11px; color: #777; font-weight: 600; text-transform: uppercase; }
.summary-row.highlight { color: #fff; font-size: 12px; margin-top: 15px; padding-top: 10px; border-top: 1px solid #222; }
.summary-row.highlight span:last-child { color: #fff; font-weight: 800; }

.pricing-options-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 25px; }

/* Cartes de Prix (Type "Price Card" du Screen) */
.price-card {
    background: #090909; border: 1px solid #333; border-radius: 4px; padding: 20px;
    text-align: center; cursor: default; transition: 0.3s; position: relative;
}

/* Style LOCATION */
.price-card.rent { border-bottom: 3px solid #287233; }
.price-card.rent .card-header { color: #287233; font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.price-card.rent .card-amount { font-size: 26px; font-weight: 800; color: #fff; font-family: 'Arial', sans-serif; letter-spacing: -1px; }
.price-card.rent .card-sub { font-size: 9px; color: #666; font-style: italic; margin-bottom: 15px; margin-top: 5px; }
.price-card.rent .card-action { 
    background: rgba(40, 114, 51, 0.1); color: #287233; border: 1px solid #287233;
    padding: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; cursor: default;
}
.price-card.rent:hover { box-shadow: 0 0 20px rgba(40, 114, 51, 0.2); border-color: #287233; }
.price-card.rent:hover .card-action { background: #287233; color: #fff; }

/* Style ACHAT */
.price-card.buy { border-bottom: 3px solid #f1b52c; }
.price-card.buy .card-header { color: #f1b52c; font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.price-card.buy .card-amount { font-size: 26px; font-weight: 800; color: #fff; font-family: 'Arial', sans-serif; letter-spacing: -1px; }
.price-card.buy .card-sub { font-size: 9px; color: #666; font-style: italic; margin-bottom: 15px; margin-top: 5px; }
.price-card.buy .card-action { 
    background: rgba(241, 181, 44, 0.1); color: #f1b52c; border: 1px solid #f1b52c;
    padding: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; cursor: default;
}
.price-card.buy:hover { box-shadow: 0 0 20px rgba(241, 181, 44, 0.2); border-color: #f1b52c; }
.price-card.buy:hover .card-action { background: #f1b52c; color: #000; }


/* =========================================
   CUSTOM LEAFLET ZOOM CONTROLS (DARK MODE)
   ========================================= */
/* Le conteneur des boutons */
.leaflet-bar {
    border: 1px solid #333 !important; /* Bordure sombre */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}

/* Les boutons eux-mêmes (a) */
.leaflet-bar a {
    background-color: #0f0f0f !important; /* Fond NOIR */
    color: #ffffff !important;           /* Texte (+/-) en OR */
    border-bottom: 1px solid #333 !important; /* Séparateur sombre */
}

/* Le dernier bouton n'a pas de ligne en bas */
.leaflet-bar a:last-child {
    border-bottom: none !important;
}

/* Au survol */
.leaflet-bar a:hover {
    background-color: #1a1a1a !important; /* Un peu plus clair au survol */
    color: #fff !important;               /* Texte devient blanc */
    border-color: #f1b52c !important;     /* Optionnel : bordure or */
}

/* Désactivé (quand on est au max du zoom) */
.leaflet-bar a.leaflet-disabled {
    background-color: #0a0a0a !important;
    color: #444 !important;
}

/* =========================================
   BOUTON CARTE : CARRÉ FLOTTANT
   ========================================= */

.btn-small-map.square-map-btn {
    /* Taille du carré */
    width: 160px !important;   
    height: 140px !important; 
    
    /* Reset total du style bouton précédent */
    background: #000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute !important;
    right: 50px !important;
    top: 10px !important;  /* Ajuste ce chiffre (20px, 30px) si tu veux monter/descendre */
    z-index: 100 !important;
    
    /* Assure-toi qu'il n'y a pas de margin qui gêne */
    margin: 0 !important;
}

/* DANS VIEWS.CSS - Remplace le bloc du bouton par ceci */

.btn-small-map.square-map-btn {
    /* --- Positions et Tailles (ON NE TOUCHE PAS) --- */
    width: 190px !important; 
    height: 130px !important;
    position: absolute !important;
    right: 35px !important; 
    top: 13px !important; 
    z-index: 100 !important; 
    margin: 0 !important;
    
    /* --- NOUVEAU DESIGN ÉPURÉ & MODERNE --- */
    /* 1. Fond de base : un dégradé sombre subtil pour la profondeur */
    background: linear-gradient(145deg, #1a1a1a, #000000) !important;
    
    /* 2. Bordure : Plus fine, plus technologique (blanc cassé transparent) */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    
    /* 3. Ombres complexes pour l'intégration "luxe" */
    box-shadow: 
        /* Ombre portée principale, douce et vers le bas */
        0 10px 20px -5px rgba(0,0,0,0.6),
        /* Fine lumière sur le bord supérieur (effet biseauté) */
        inset 0 1px 1px rgba(255,255,255,0.1),
        /* Légère lueur dorée diffuse autour pour l'intégration au thème */
        0 0 15px rgba(241, 181, 44, 0.15) !important;

    padding: 0 !important;
    border-radius: 6px; /* Coins un peu plus doux */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition plus fluide */
}

/* L'image de fond (inchangée sauf transition) */
.square-map-btn .map-bg {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 130%; 
    height: 120%;
    background-size: cover; 
    background-position: center;
    filter: blur(1px); 
    transform: scale(1.15);
    transition: all 0.4s ease;
    opacity: 0.9; /* Légèrement transparente pour laisser passer le fond moderne */
}

/* Le texte (inchangé sauf transition) */
.square-map-btn .map-text {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
    color: #fff; 
    font-weight: 800; 
    font-size: 22px; 
    line-height: 1.2; 
    z-index: 20;
    text-shadow: 0 2px 5px rgba(0,0,0,1);
    background: rgba(0, 0, 0, 0.3); /* Fond un peu plus sombre */
    transition: all 0.4s ease;
}

/* --- NOUVEAUX EFFETS AU SURVOL --- */
.square-map-btn:hover {
    /* La bordure devient dorée et lumineuse */
    border-color: rgba(241, 181, 44, 0.8) !important; 
    /* L'ombre dorée s'intensifie */
    box-shadow: 
        0 15px 25px -5px rgba(0,0,0,0.7),
        inset 0 1px 1px rgba(255,255,255,0.2),
        0 0 25px rgba(241, 181, 44, 0.4) !important;
    /* Léger soulèvement */
    transform: translateY(-3px); 
}
.square-map-btn:hover .map-bg { filter: blur(0px); transform: scale(1.25); opacity: 1; }
.square-map-btn:hover .map-text { color: #f1b52c; background: rgba(0, 0, 0, 0.6); }