/* ============================================================
   VACCIN ANTI-DÉBORDEMENT (À mettre en haut)
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important; /* Force le calcul correct des largeurs */
}

html, body {
    width: 100%;
    overflow-x: hidden !important; /* Interdit le scroll vers la droite */
    position: relative;
}

:root {
    --accent: #00B4FF;
    --urgent: #FF3B3B;
    --dark-blue: #030a16;
    --glass: rgba(255, 255, 255, 0.03);
}

.contact-page { 
    background: var(--dark-blue); 
    color: white; 
    font-family: 'Inter', sans-serif; 
}

/* --- HERO SECTION --- */
.contact-hero-v2 { padding: 120px 15px 40px; text-align: center; }

.status-indicator {
    background: rgba(0, 255, 136, 0.1); color: #00ff88;
    padding: 6px 15px; border-radius: 50px; font-size: 0.7rem;
    font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px;
}

.dot { width: 8px; height: 8px; background: #00ff88; border-radius: 50%; box-shadow: 0 0 10px #00ff88; animation: blink 1.5s infinite; }

/* --- GRID & CARDS --- */
.contact-main-grid { 
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    gap: 30px; 
    margin-top: 40px; 
    width: 100%;
}

.support-card {
    background: var(--glass); 
    border: 1px solid rgba(255,255,255,0.05);
    padding: 25px; 
    border-radius: 20px; 
    margin-bottom: 20px;
    display: flex; 
    gap: 15px; 
    transition: 0.3s;
    width: 100%;
}

.support-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.support-card.urgent { border-left: 5px solid var(--urgent); }
.card-icon { font-size: 1.8rem; color: var(--accent); }
.urgent .card-icon { color: var(--urgent); }

.contact-link { 
    color: white; 
    font-weight: 700; 
    text-decoration: none; 
    display: block; 
    margin-top: 10px; 
    font-size: 1rem; 
    word-break: break-word; /* Évite que l'email ne sorte de la boîte */
}

/* --- OFFICE CARDS --- */
.offices-flex { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-bottom: 30px; 
}

.office-card {
    background: white; 
    color: var(--dark-blue); 
    padding: 25px; 
    border-radius: 20px;
    position: relative; 
    overflow: hidden; 
    width: 100%;
}

.city-tag {
    position: absolute; 
    top: 0; 
    right: 0; 
    background: var(--accent);
    color: white; 
    padding: 5px 15px; 
    border-bottom-left-radius: 15px;
    font-size: 0.65rem; 
    font-weight: 800; 
    text-transform: uppercase;
}

/* --- BANNER DIAGNOSTIC --- */
.diagnostic-banner {
    background: linear-gradient(90deg, #0047FF, #00B4FF);
    padding: 30px; 
    border-radius: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 20px;
}

.btn-diag {
    background: white; 
    color: #0047FF; 
    padding: 12px 25px; 
    border-radius: 50px;
    font-weight: 800; 
    text-decoration: none; 
    font-size: 0.75rem; 
    text-align: center;
    flex-shrink: 0; /* Empêche le bouton de s'écraser */
}

/* --- MAP SECTION --- */
.map-container-v2 {
    height: 400px; 
    border-radius: 30px; 
    position: relative;
    overflow: hidden; 
    margin-bottom: 50px;
}

.map-mock {
    width: 100%; height: 100%;
    background: url('https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?q=80&w=1200') center/cover;
    filter: grayscale(1) brightness(0.4);
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================
   RESPONSIVE FINAL (MOBILE & TABLETTE)
   ============================================================ */
@media (max-width: 992px) {
    .container {
        padding: 0 15px !important; /* Marge de sécurité sur les côtés */
    }

    .contact-main-grid, 
    .offices-flex {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }

    .contact-hero-v2 h1 {
        font-size: 1.8rem !important;
    }

    .support-card {
        flex-direction: column; /* Icône au-dessus du texte sur petit mobile */
        gap: 10px;
        text-align: center;
        align-items: center;
    }

    .diagnostic-banner {
        flex-direction: column;
        text-align: center;
    }

    .map-info-overlay {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        border-radius: 0 !important;
        padding: 20px !important;
    }

    .map-container-v2 {
        height: auto;
        display: flex;
        flex-direction: column;
    }
}