/* ------------------------------------------------------------------
       Emoji carte
       ------------------------------------------------------------------ */
	 .link-carte {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* <--- ESPACEMENT RÉDUIT : Ajustez cette valeur (ex: 3px, 4px ou 5px) */
    color: #333333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Effet au survol du lien */
.link-carte:hover {
    color: #800000; /* Le texte passe en bordeaux */
}

	.link-carte .icon-carte {
    flex-shrink: 0;
    transition: transform 0.2s ease, fill 0.2s ease;
}

/* Effet au survol de l'icône (plus visible) */
  .link-carte:hover .icon-carte {
    transform: scale(1.2) rotate(-5deg); /* Aggrandit de 20% et penche légèrement la carte */
    fill: #B30000; /* Change légèrement la teinte du bordeaux vers un rouge plus lumineux */
}


.titre-carte {
    display: flex;
    align-items: center; /* Aligne l'icône et le texte parfaitement au milieu */
    gap: 8px;            /* Espacement entre l'icône et le texte du titre */
    margin-bottom: 15px; /* Marge basse classique sous un titre (ajustable) */
}

.titre-carte .icon-carte {
    flex-shrink: 0;      /* Empêche le SVG de s'écraser si le texte passe sur 2 lignes */
}





    /* ==================================================================
       PALETTE & DESIGN — CARTE INTERACTIVE (Thème Bordeaux #800000)
       
       • Base couleur : Bordeaux (#800000 / HSL 0°, 100%, 25%)
       • État au repos  : Gris neutre clair pour une carte sobre.
       • Survol région  : Teinte bordeaux moyen doux.
       • Survol dépt    : Teinte bordeaux clair avec effet d'ombrage halo.
       • Labels/Villes  : Contraste élevé et grossissement fluide au survol.
       ================================================================== */

    /* ------------------------------------------------------------------
       1. CONTENEUR PRINCIPAL
       Permet d'encadrer la carte et d'assurer une bonne centration.
       ------------------------------------------------------------------ */
    .carte-container {
        background-color: #F5F5F5; /* Fond neutre très clair pour faire ressortir la carte */
        padding: 20px;
        border-radius: 8px;        /* Arrondi doux des angles du bloc */
        box-sizing: border-box;
    }

    .carte-container .carte {
        width: 100%;               /* S'adapte aux petits écrans */
        max-width: 650px;          /* Limite la largeur maximale sur grand écran */
        margin: 0 auto;            /* Centre la carte horizontalement */
        display: block;
    }

    /* ------------------------------------------------------------------
       2. ÉLÉMENTS GRAPHIQUES DE LA CARTE (SVG : Départements / Régions)
       Ciblage strict pour ne pas impacter les autres SVG (ex: icônes, menu).
       ------------------------------------------------------------------ */
    .carte-container svg path {
        /* Contour des départements : Bordeaux très sombre et discret */
        stroke: hsl(0, 30%, 35%);
        stroke-width: 0.6px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-opacity: 0.6;

        /* Remplissage par défaut (au repos) : Gris neutre doux */
        fill: hsl(0, 8%, 85%);

        /* Animation fluide du changement de couleur */
        transition: fill 0.2s ease, filter 0.2s ease;
    }

    /* SURVOL D'UNE RÉGION (groupe d'éléments <g>) */
    /* Colore tous les départements de la même région au survol de l'un d'eux */
    .carte-container svg g:hover path {
        fill: hsl(0, 45%, 65%);     /* Bordeaux moyen doux */
        cursor: pointer;
    }

    /* SURVOL DIRECT D'UN DÉPARTEMENT SPECIFIQUE */
    /* Met en valeur le département ciblé par rapport au reste de la région */
    .carte-container svg g path:hover {
        fill: hsl(0, 50%, 80%);     /* Bordeaux clair lumineux */
        filter: drop-shadow(0 0 6px rgba(128, 0, 0, 0.4)); /* Halo bordeaux autour du département survolé */
    }

    /* ------------------------------------------------------------------
       3. LABELS ET NOMS DE VILLES OVERLAY
       Gestion des textes positionnés sur la carte (SVG <text>).
       ------------------------------------------------------------------ */
    .carte-container .label-ville {
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        
        /* Alignement parfait du texte au centre de son point d'ancrage */
        dominant-baseline: middle;
        text-anchor: middle;
        
        /* Couleur du texte au repos : Blanc cassé très lisible */
        fill: #FFFFFF;
        
        /* Contour du texte : Bordeaux foncé (#800000) pour détacher le texte du fond */
        stroke: #800000;
        stroke-width: 2.5px;
        paint-order: stroke fill;   /* Dessine le contour SOUS le remplissage pour préserver la netteté de la police */
        
        cursor: pointer;
        transition: fill 0.25s ease, stroke 0.25s ease, font-size 0.25s ease, filter 0.25s ease;
    }

    /* SURVOL D'UN LABEL / NOM DE VILLE */
    .carte-container .label-ville:hover {
        font-size: 14px;            /* Légère augmentation de taille sans déformer exagérément */
        font-weight: 700;
        
        /* Inversion des couleurs au survol : Texte bordeaux foncé sur contour clair */
        fill: #800000;              /* Texte passe en Bordeaux principal */
        stroke: #FFFFFF;            /* Contour passe en blanc pur pour contraster */
        stroke-width: 3px;
        
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)); /* Micro-ombre de lisibilité */
    }