:root {
    --gab-ink: #14251d;
    --gab-green: #167a55;
    --gab-green-dark: #0c5039;
    --gab-gold: #d8ad52;
    --gab-soft: #eef4f0;
    --gab-muted: #87938d;
    --gab-white: #ffffff;
}

.gab-map-section { max-width:1600px; margin: 0 auto; padding: 72px 24px; color: var(--gab-ink); font-family: Inter, system-ui, sans-serif; }
.gab-map-heading { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 36px; }
.gab-map-kicker { color: var(--gab-green); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gab-map-heading h2 { max-width: 720px; margin: 8px 0 10px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.02; letter-spacing: -.045em; }
.gab-map-heading p { max-width: 650px; margin: 0; color: #647169; line-height: 1.7; }
.gab-map-legend { display: grid; gap: 9px; min-width: 210px; font-size: .82rem; color: #58655e; }
.gab-map-legend span { display: flex; align-items: center; gap: 9px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.available { background: var(--gab-green); box-shadow: 0 0 0 5px rgba(22,122,85,.12); }
.legend-dot.pending { background: #cbd4cf; }

.gab-map-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); min-height: 650px; overflow: hidden; border: 1px solid rgba(20,37,29,.09); border-radius: 28px; background: linear-gradient(145deg, #f7faf8, #e9f0ec); box-shadow: 0 28px 80px rgba(15,55,39,.1); }
.gab-map-canvas { position: relative; min-height: 650px; padding: 26px; overflow: hidden; background-image: radial-gradient(circle at 20% 20%, rgba(216,173,82,.15), transparent 28%), radial-gradient(circle at 78% 72%, rgba(22,122,85,.13), transparent 32%); }
.gab-map-svg { display: block; width: 100%; height: 100%; max-height: 650px; overflow: visible; filter: drop-shadow(0 18px 20px rgba(24,66,48,.14)); }
.gab-province { fill: #d6dfda; stroke: #fff; stroke-width: 2.6; cursor: pointer; vector-effect: non-scaling-stroke; opacity: 0; transform: translateY(12px); transform-origin: center; animation: gabMapIn .65s cubic-bezier(.22,.9,.31,1) forwards; animation-delay: var(--draw-delay); transition: fill .35s ease, transform .35s cubic-bezier(.2,.85,.35,1), filter .35s ease, opacity .35s ease; }
.gab-province:hover, .gab-province:focus-visible { fill: #a8bdb2; transform: translateY(-4px) scale(1.012); filter: brightness(1.04); outline: none; }
.gab-province.is-available { fill: var(--gab-green); }
.gab-province.is-available:hover, .gab-province.is-available:focus-visible { fill: var(--gab-green-dark); }
.gab-province.is-selected { fill: var(--gab-gold); transform: translateY(-3px) scale(1.015); filter: drop-shadow(0 10px 8px rgba(87,67,22,.24)); }

.gab-tooltip { position: absolute; z-index: 6; top: 0; left: 0; width: 232px; padding: 14px 16px; pointer-events: none; opacity: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; color: #fff; background: rgba(13,35,26,.94); box-shadow: 0 14px 40px rgba(0,0,0,.2); backdrop-filter: blur(12px); transition: opacity .2s ease, margin .2s ease; margin-top: 8px; }
.gab-tooltip.is-visible { opacity: 1; margin-top: 0; }
.gab-tooltip strong, .gab-tooltip span, .gab-tooltip em { display: block; }
.gab-tooltip strong { font-size: 1rem; }
.gab-tooltip span { margin-top: 4px; color: rgba(255,255,255,.72); font-size: .8rem; }
.gab-tooltip em { margin-top: 10px; color: #f0ce7e; font-size: .72rem; font-style: normal; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }

.gab-province-panel { position: relative; display: grid; align-items: center; min-height: 100%; padding: clamp(30px, 5vw, 58px); color: #fff; background: var(--gab-ink); }
.gab-province-panel::before { content: ''; position: absolute; inset: 0; opacity: .18; background: radial-gradient(circle at 100% 0, var(--gab-gold), transparent 38%); pointer-events: none; }
.gab-panel-placeholder, .gab-panel-content { position: relative; transition: opacity .28s ease, transform .28s ease; }
.gab-panel-placeholder.is-leaving { opacity: 0; transform: translateY(10px); }
.gab-panel-number { display: block; color: rgba(255,255,255,1); font-size: 7rem; font-weight: 900; line-height: .8; }
.gab-panel-placeholder h3, .gab-panel-content h3 { margin: 22px 0 12px; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.05; letter-spacing: -.04em; }
.gab-panel-placeholder p, .gab-description { color: rgba(255,255,255,.67); line-height: 1.7; }
.gab-panel-content { opacity: 0; transform: translateY(14px); }
.gab-panel-content.is-visible { opacity: 1; transform: none; }
.gab-panel-status { display: inline-flex; padding: 7px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.gab-panel-status.available { color: #c7f5df; background: rgba(59,193,131,.16); }
.gab-panel-status.pending { color: #d7ddd9; background: rgba(255,255,255,.09); }
.gab-capital { margin: 0; color: rgba(255,255,255,.68); }
.gab-capital strong { color: #fff; }
.gab-panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.gab-panel-stats div { padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.045); }
.gab-panel-stats dt { margin-bottom: 7px; color: rgba(255,255,255,.54); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.gab-panel-stats dd { margin: 0; font-weight: 750; }
.gab-panel-stats small { color: rgba(255,255,255,.55); font-weight: 500; }
.gab-sector-list > strong { display: block; margin-bottom: 10px; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; }
.gab-sector-list div { display: flex; flex-wrap: wrap; gap: 7px; }
.gab-sector-list span { padding: 7px 9px; border-radius: 8px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); font-size: .72rem; }
.gab-panel-action { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding: 15px 17px; border-radius: 12px; color: var(--gab-ink); background: var(--gab-gold); font-weight: 800; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.gab-panel-action:hover { color: var(--gab-ink); background: #e4bd67; transform: translateY(-2px); }
.gab-pending-note { margin-top: 28px; padding: 15px; border-left: 3px solid var(--gab-gold); color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); font-size: .86rem; line-height: 1.55; }
.gab-missing { color: rgba(255,255,255,.48); font-weight: 500; }
.gab-map-loading { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #526159; background: #f1f5f2; transition: opacity .4s ease, visibility .4s ease; }
.gab-map-loading.is-hidden { opacity: 0; visibility: hidden; }
.gab-map-loading.has-error { text-align: center; color: #7a3030; }
.gab-spinner { width: 34px; height: 34px; border: 3px solid #dce5e0; border-top-color: var(--gab-green); border-radius: 50%; animation: gabSpin .8s linear infinite; }
.gab-map-credit { margin: 14px 4px 0; color: #859089; font-size: .72rem; }
.gab-map-credit a { color: var(--gab-green); }

@keyframes gabMapIn { to { opacity: 1; transform: translateY(0); } }
@keyframes gabSpin { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
    .gab-map-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .gab-map-shell {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .gab-map-canvas {
        width: 100%;
        min-width: 0;
        min-height: 520px;
    }

    .gab-map-svg {
        width: 100%;
        height: 520px;
        max-height: none;
    }

    .gab-province-panel {
        width: 100%;
        min-width: 0;
        min-height: 400px;
    }
}

@media (max-width: 540px) {
    /*
     * Permet à la carte d’occuper toute la largeur de l’écran,
     * même si elle se trouve dans un conteneur Bootstrap.
     */
    .gab-map-section {
        position: relative;
        left: 50%;
        width: 100vw;
        max-width: none;
        margin-left: -50vw;
        padding: 48px 0;
        overflow: hidden;
    }

    .gab-map-heading {
        padding-right: 16px;
        padding-left: 16px;
        margin-bottom: 26px;
    }

    .gab-map-heading h2 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        line-height: 1.08;
    }

    .gab-map-legend {
        width: 100%;
        min-width: 0;
    }

    .gab-map-shell {
        width: 100%;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .gab-map-canvas {
        width: 100%;
        min-width: 0;
        min-height: 500px;
        padding: 8px;
    }

    .gab-map-svg {
        display: block;
        width: 100%;
        height: 500px;
        max-height: none;
    }

    .gab-province-panel {
        width: 100%;
        min-width: 0;
        min-height: 380px;
        padding: 30px 20px;
    }

    .gab-panel-number {
        font-size: 5rem;
    }

    .gab-panel-placeholder h3,
    .gab-panel-content h3 {
        font-size: 1.9rem;
    }

    .gab-panel-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .gab-tooltip {
        width: min(232px, calc(100vw - 32px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .gab-province, .gab-tooltip, .gab-panel-placeholder, .gab-panel-content, .gab-spinner { animation: none; transition: none; }
    .gab-province { opacity: 1; transform: none; }
}

.gab-map-section,
.gab-map-shell,
.gab-map-canvas,
.gab-province-panel {
    box-sizing: border-box;
}

.gab-map-section {
    width: 100%;
}

.gab-map-shell {
    width: 100%;
}

.gab-map-canvas,
.gab-province-panel {
    min-width: 0;
}