/**
 * Styles pour la page "Choisir son département"
 * Page disponible uniquement sur le site parent
 */

/* =======================
   Page Choisir son département - Styles généraux
   ======================= */

.choisir-departement-page {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* =======================
   Section Hero Département
   ======================= */

.departement-hero-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.departement-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;

}

.departement-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* Style pour le premier mot en vert selon les conventions du site */
.departement-hero-title .title-first-word {
    color: #9ACA3C;
    font-weight: 700;
}

.departement-hero-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
    max-width: 900px;
}

.departement-hero-description p {
    margin-bottom: 15px;
}

.departement-hero-cta {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
}

.departement-hero-cta strong {
    font-weight: 700;
    color: #003399;
}

/* =======================
   Section Carte (styles adaptés du burger menu)
   ======================= */

/* Container de la carte - styles du burger menu */
.choisir-departement-page .map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.choisir-departement-page .map-title .title-accent-word {
    color: #9ACA3C;
    font-weight: 700;
}

/* ================================
   STYLES SVG ET DÉPARTEMENTS DÉPLACÉS VERS map-common.css
   ================================
   
   Les styles suivants ont été consolidés dans map-common.css :
   - svg.france-map, svg.italy-map (avec contraintes de taille)
   - .department (tous les états : actif, hover, sélectionné)
   
   ================================ */

/* Sélecteur - styles génériques (onglets définis dans map-common.css) */
.choisir-departement-page .department-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}


/* ================================
   STYLES TOOLTIP ET LAYOUT DÉPLACÉS VERS map-common.css
   ================================
   
   Les styles suivants ont été consolidés dans map-common.css :
   - .department-tooltip
   - .map-risks-content  
   - .map-intro
   
   ================================ */

/* =======================
   Responsive Design
   ======================= */

@media (max-width: 768px) {
    .departement-hero-section {
        padding: 40px 0;
    }


    .departement-hero-content {
        padding: 0 15px;
    }

    .departement-hero-title {
        font-size: 2rem;
    }

    .departement-hero-description {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .departement-hero-cta {
        font-size: 0.95rem;
    }

    /* Carte responsive - styles du burger menu */
    .choisir-departement-page .map-container {
        padding: 0 10px;
    }

    /* Styles responsive consolidés dans map-common.css */

}

@media (max-width: 480px) {
    .departement-hero-section {
        padding: 30px 0;
    }

    .departement-hero-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    /* Styles responsive consolidés dans map-common.css */
}