/* ============================================================
   14 SECTION COOKIE
   ============================================================ */


/* --- BANNIÈRE COOKIES : DESIGN FINAL --- */
.cookie-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 450px; /* Légèrement plus petit pour l'élégance */
    background-color: #0056b3; 
    color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    z-index: 11000; /* Supérieur à tout le reste */
    display: none; 
    border: 1px solid rgba(255,255,255,0.2);
    text-align: center;
}

.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.btn-accept {
    background-color: #ffffff !important;
    color: #0056b3 !important;
    border: none !important;
    padding: 10px 20px !important;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}

.btn-reject {
    background-color: #003d80 !important; /* Bleu plus sombre */
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    padding: 10px 20px !important;
    cursor: pointer;
    border-radius: 5px;
}

/* --- OPTIMISATION RESPONSIVE COOKIES --- */
@media (max-width: 480px) {
    .cookie-container {
        width: 95%; /* Prend un peu plus de place sur mobile */
        padding: 15px;
        bottom: 10px; /* Plus proche du bord pour ne pas masquer le contenu */
    }

    .cookie-buttons {
        flex-direction: column; /* Empile les boutons verticalement sur mobile */
        gap: 8px;
    }

    .btn-cookie {
        width: 100%; /* Les boutons prennent toute la largeur */
        padding: 12px; /* Plus facile à cliquer avec le pouce */
    }
}

/* Cache le message si le cookie est accepté */
body.cookies-accepted #map-placeholder {
    display: none !important;
}

/* --- EFFET ÉLÉGANT SUR LA CARTE GOOGLE MAPS --- */

/* La carte est en noir et blanc par défaut */
.map-container iframe {
    filter: grayscale(100%) invert(5%) contrast(90%);
    transition: all 0.6s ease-in-out;
}

/* La carte reprend ses couleurs naturelles au survol de la souris */
.map-container:hover iframe {
    filter: grayscale(0%) invert(0%) contrast(100%);
}

/* Optionnel : On ajoute une petite bordure dorée au survol pour rappeler ton logo */
.map-container {
    border: 2px solid transparent;
    transition: border-color 0.4s ease;
}

.map-container:hover {
    border-color: #C5A059; /* Ton doré */
}