
.mca2-directory,
.mca2-directory *,
.mca2-dept-intro,
.mca2-dept-intro *,
.mca2-carnets,
.mca2-carnets * {
    box-sizing: border-box;
}

.mca2-directory,
.mca2-dept-intro,
.mca2-carnets,
.mca2-empty {
    --mca-accent:#00B4D8;
    --mca-dark:#121345;
    --mca-black:#000710;
    --mca-text:#302F2F;
    --mca-soft:#E7F1F3;
    --mca-softer:#F2FBFD;
    --mca-white:#FFFFFF;
    --mca-border:rgba(18,19,69,.11);
    font-family:inherit;
    color:var(--mca-text);
}

/* ---------- Carte principale ---------- */

.mca2-map-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:32px;
    align-items:end;
    margin-bottom:34px;
}

.mca2-kicker {
    color:var(--mca-accent);
    font-size:14px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.mca2-map-head h1,
.mca2-dept-intro h1 {
    margin:0;
    color:var(--mca-dark);
    font-size:clamp(34px,4.6vw,60px);
    line-height:1.06;
    font-weight:650;
    letter-spacing:-.035em;
}

.mca2-map-head h1 span { color:var(--mca-accent); }

.mca2-map-head p,
.mca2-dept-intro p {
    max-width:780px;
    margin:18px 0 0;
    font-size:16px;
    line-height:1.7;
}

.mca2-total {
    min-width:190px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 22px;
    border-radius:20px;
    background:var(--mca-dark);
    color:#fff;
}

.mca2-total strong {
    color:var(--mca-accent);
    font-size:42px;
    line-height:1;
}

.mca2-total span {
    font-size:13px;
    line-height:1.3;
    font-weight:600;
}

.mca2-map-layout {
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);
    gap:28px;
    align-items:stretch;
}

.mca2-map-panel,
.mca2-zone-panel {
    background:#fff;
    border:1px solid var(--mca-border);
    border-radius:22px;
    box-shadow:0 14px 45px rgba(18,19,69,.08);
}

.mca2-map-panel {
    overflow:hidden;
    background:
        radial-gradient(circle at 22% 12%,rgba(0,180,216,.10),transparent 34%),
        var(--mca-softer);
}

.mca2-map-stage {
    position:relative;
    min-height:545px;
    padding:20px;
}

.mca2-map-stage svg {
    display:block;
    width:100%;
    height:auto;
    max-height:530px;
    margin:auto;
    overflow:visible;
}

.mca2-dept-shape {
    fill:#DDE7EA;
    stroke:#fff;
    stroke-width:1.6;
    vector-effect:non-scaling-stroke;
    transition:fill .16s ease,filter .16s ease;
}

.mca2-dept-shape.is-active {
    fill:var(--mca-accent);
    cursor:pointer;
}

.mca2-dept-shape.is-active:hover,
.mca2-dept-shape.is-hovered {
    fill:var(--mca-dark);
    filter:drop-shadow(0 3px 5px rgba(18,19,69,.20));
}

.mca2-dept-label {
    fill:#fff;
    font-size:11px;
    font-weight:800;
    pointer-events:none;
    text-anchor:middle;
    dominant-baseline:central;
}

.mca2-map-loading {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--mca-dark);
    font-weight:650;
    pointer-events:none;
}

.mca2-map-stage.is-loaded .mca2-map-loading { display:none; }

.mca2-tooltip {
    position:absolute;
    z-index:5;
    pointer-events:none;
    transform:translate(12px,-50%);
    max-width:190px;
    padding:9px 11px;
    border-radius:11px;
    background:var(--mca-dark);
    color:#fff;
    font-size:12px;
    line-height:1.35;
    box-shadow:0 9px 26px rgba(18,19,69,.20);
}

.mca2-tooltip strong { color:var(--mca-accent); }

.mca2-legend {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    padding:15px 20px 18px;
    border-top:1px solid var(--mca-border);
    font-size:12px;
}

.mca2-legend span {
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.mca2-swatch {
    width:12px;
    height:12px;
    border-radius:4px;
    background:#DDE7EA;
    border:1px solid #C8D5D9;
}

.mca2-swatch.is-active {
    background:var(--mca-accent);
    border-color:var(--mca-accent);
}

.mca2-zone-panel {
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.mca2-zone-title {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
}

.mca2-zone-title strong {
    color:var(--mca-dark);
    font-size:18px;
}

.mca2-zone-title small {
    color:#6A777A;
    font-size:11px;
}

.mca2-zone-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.mca2-zone-link,
.mca2-country-link {
    text-decoration:none !important;
    color:var(--mca-dark) !important;
    border:1px solid var(--mca-border);
    background:#fff;
    border-radius:14px;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.mca2-zone-link {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    padding:10px;
}

.mca2-zone-link:hover,
.mca2-zone-link:focus-visible,
.mca2-zone-link.is-hovered,
.mca2-country-link:hover,
.mca2-country-link:focus-visible {
    transform:translateY(-2px);
    border-color:var(--mca-accent);
    background:var(--mca-softer);
    box-shadow:0 8px 24px rgba(0,180,216,.12);
    outline:none;
}

.mca2-zone-code {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--mca-accent);
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.mca2-zone-name {
    min-width:0;
    font-size:12px;
    line-height:1.22;
    font-weight:650;
}

.mca2-zone-name small,
.mca2-country-link small {
    display:block;
    margin-top:2px;
    color:#718083;
    font-size:10px;
    font-weight:500;
}

.mca2-arrow {
    color:var(--mca-accent);
    font-size:15px;
}

.mca2-international {
    margin-top:auto;
    padding-top:17px;
    border-top:1px solid var(--mca-border);
    display:grid;
    gap:11px;
}

.mca2-country-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.mca2-country-link {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:9px;
    padding:12px;
    font-weight:650;
    font-size:13px;
}

.mca2-country-flag { font-size:23px; }

.mca2-mobile-picker {
    display:none;
    margin:0 0 18px;
}

.mca2-mobile-picker label {
    display:block;
    margin-bottom:6px;
    color:var(--mca-dark);
    font-size:13px;
    font-weight:700;
}

.mca2-mobile-picker select {
    width:100%;
    min-height:49px;
    padding:0 14px;
    border:1px solid var(--mca-border);
    border-radius:13px;
    background:#fff;
    color:var(--mca-dark);
    font:inherit;
}

/* ---------- Intro page département ---------- */

.mca2-dept-intro {
    padding:46px;
    border-radius:22px;
    background:
        radial-gradient(circle at 90% 10%,rgba(0,180,216,.12),transparent 32%),
        var(--mca-softer);
    border:1px solid rgba(0,180,216,.13);
}

.mca2-dept-title-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:25px;
}

.mca2-dept-intro h1 {
    font-size:clamp(32px,4vw,54px);
}

.mca2-dept-count {
    min-width:130px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 17px;
    border-radius:16px;
    background:var(--mca-dark);
    color:#fff;
}

.mca2-dept-count strong {
    color:var(--mca-accent);
    font-size:32px;
}

.mca2-dept-count span {
    font-size:12px;
    font-weight:650;
}

.mca2-back {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:25px;
    padding:11px 16px;
    border:1px solid var(--mca-accent);
    border-radius:999px;
    text-decoration:none !important;
    color:var(--mca-accent) !important;
    font-size:14px;
    font-weight:650;
    transition:.18s ease;
}

.mca2-back:hover {
    background:var(--mca-accent);
    color:#fff !important;
}

/* ---------- Carnets ---------- */

.mca2-carnets {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
}

.mca2-card {
    position:relative;
    min-width:0;
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    overflow:hidden;
    border:1px solid rgba(18,19,69,.10);
    border-radius:18px;
    background:
        repeating-linear-gradient(
            to bottom,
            #fff 0,
            #fff 31px,
            rgba(0,180,216,.065) 32px
        );
    box-shadow:0 13px 38px rgba(18,19,69,.08);
}

.mca2-card-binding {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    padding:18px 0;
    background:var(--mca-dark);
}

.mca2-card-binding i {
    width:10px;
    height:10px;
    display:block;
    border-radius:50%;
    background:var(--mca-accent);
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.75);
}

.mca2-card-body {
    min-width:0;
    padding:27px 28px 25px;
}

.mca2-card-top {
    display:block;
}

.mca2-card-label {
    margin-bottom:7px;
    color:var(--mca-accent);
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.09em;
}

.mca2-card h2 {
    margin:0;
    color:var(--mca-dark);
    font-size:clamp(21px,2vw,28px);
    line-height:1.15;
    font-weight:700;
    letter-spacing:-.02em;
}

.mca2-cert {
    margin:7px 0 0;
    color:#677477;
    font-size:13px;
    line-height:1.45;
}


.mca2-card-divider {
    height:1px;
    margin:20px 0;
    background:linear-gradient(90deg,var(--mca-accent),rgba(0,180,216,0));
}

.mca2-contact-list {
    display:grid;
    gap:12px;
}

.mca2-contact-row {
    min-width:0;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:start;
    gap:10px;
    color:var(--mca-text) !important;
    text-decoration:none !important;
    font-size:14px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

a.mca2-contact-row:hover {
    color:var(--mca-accent) !important;
}

.mca2-contact-icon {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:var(--mca-softer);
}

.mca2-contact-icon svg {
    width:15px;
    height:15px;
    fill:var(--mca-accent);
}

.mca2-booking {
    margin-top:21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:11px 16px;
    border-radius:999px;
    background:var(--mca-accent);
    color:#fff !important;
    text-decoration:none !important;
    font-size:14px;
    font-weight:650;
    transition:.18s ease;
}

.mca2-booking:hover {
    background:var(--mca-dark);
    transform:translateY(-1px);
}

.mca2-empty {
    padding:24px;
    border-radius:16px;
    background:var(--mca-softer);
    border:1px solid rgba(0,180,216,.15);
    line-height:1.6;
}

/* ---------- Responsive ---------- */

@media (max-width:1024px) {
    .mca2-map-layout {
        grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
        gap:20px;
    }

    .mca2-map-stage { min-height:500px; }

    .mca2-zone-list {
        grid-template-columns:1fr;
        max-height:440px;
        overflow:auto;
        padding-right:3px;
    }

    .mca2-dept-intro { padding:38px; }
}

@media (max-width:820px) {
    .mca2-map-head {
        grid-template-columns:1fr;
        align-items:start;
        gap:19px;
    }

    .mca2-total { width:max-content; min-width:0; }

    .mca2-mobile-picker { display:block; }

    .mca2-map-layout { grid-template-columns:1fr; }

    .mca2-map-stage { min-height:465px; padding:15px; }

    .mca2-zone-list {
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:none;
        overflow:visible;
    }

    .mca2-dept-title-row {
        grid-template-columns:1fr;
        align-items:start;
    }

    .mca2-dept-count { width:max-content; }

    .mca2-carnets { grid-template-columns:1fr; }
}

@media (max-width:520px) {
    .mca2-map-head h1 { font-size:clamp(31px,10vw,42px); }

    .mca2-map-head p,
    .mca2-dept-intro p { font-size:15px; }

    .mca2-total {
        padding:14px 17px;
        border-radius:16px;
    }

    .mca2-total strong { font-size:34px; }

    .mca2-map-panel,
    .mca2-zone-panel { border-radius:17px; }

    .mca2-map-stage { min-height:390px; padding:8px; }

    .mca2-zone-panel { padding:17px; }

    .mca2-zone-list { grid-template-columns:1fr; }

    .mca2-country-list { grid-template-columns:1fr 1fr; }

    .mca2-dept-intro {
        padding:26px 20px;
        border-radius:17px;
    }

    .mca2-dept-intro h1 { font-size:clamp(29px,9vw,39px); }

    .mca2-card {
        grid-template-columns:18px minmax(0,1fr);
        border-radius:16px;
    }

    .mca2-card-body { padding:22px 18px 21px; }

    .mca2-card-top { grid-template-columns:1fr; gap:10px; }


    .mca2-card h2 { font-size:23px; }

    .mca2-contact-row { font-size:13.5px; }
}


/* ==========================================================
 * V2.0.2 — CARTE SANS APPEL API
 * ========================================================== */

.mca2-map-stage-static {
    position: relative;
    min-height: 545px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 20px;
}

.mca2-france-map {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 515px;
    object-fit: contain;
    opacity: .62;
    filter: grayscale(1) brightness(1.08) contrast(.9);
    transition: opacity .2s ease;
}

.mca2-map-markers {
    position: absolute;
    inset: 20px;
    pointer-events: none;
}

.mca2-map-marker {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mca-accent);
    color: #fff !important;
    text-decoration: none !important;
    border: 3px solid rgba(255,255,255,.95);
    box-shadow:
        0 0 0 4px rgba(0,180,216,.16),
        0 8px 18px rgba(18,19,69,.18);
    pointer-events: auto;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.mca2-map-marker span {
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}

.mca2-map-marker:hover,
.mca2-map-marker:focus-visible,
.mca2-map-marker.is-hovered {
    z-index: 6;
    transform: translate(-50%, -50%) scale(1.18);
    background: var(--mca-dark);
    box-shadow:
        0 0 0 6px rgba(0,180,216,.20),
        0 10px 25px rgba(18,19,69,.24);
    outline: none;
}

.mca2-map-stage-static .mca2-tooltip {
    transform: translate(-50%, -100%);
    margin-top: -12px;
    text-align: center;
    white-space: nowrap;
}

.mca2-map-stage-static .mca2-tooltip span {
    font-weight: 500;
    opacity: .9;
}

.mca2-map-fallback {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(18,19,69,.94);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.mca2-map-stage-static.has-map-error .mca2-france-map {
    visibility: hidden;
}

/* Ancien chargeur/API masqué dans la nouvelle version. */
.mca2-map-stage-static .mca2-map-loading {
    display: none !important;
}

@media (max-width: 820px) {
    .mca2-map-stage-static {
        min-height: 465px;
        padding: 14px;
    }

    .mca2-france-map {
        max-height: 435px;
    }

    .mca2-map-markers {
        inset: 14px;
    }

    .mca2-map-marker {
        width: 33px;
        height: 33px;
    }
}

@media (max-width: 520px) {
    .mca2-map-stage-static {
        min-height: 385px;
        padding: 8px;
    }

    .mca2-france-map {
        max-height: 365px;
    }

    .mca2-map-markers {
        inset: 8px;
    }

    .mca2-map-marker {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .mca2-map-marker span {
        font-size: 9px;
    }

    .mca2-map-stage-static .mca2-tooltip {
        white-space: normal;
        min-width: 130px;
        max-width: 170px;
    }
}


/* ==========================================================
 * V2.0.3 — ALIGNEMENT EXACT DU CALQUE INTERACTIF
 * ========================================================== */

/*
 * La couche de marqueurs n'occupe plus toute la grande zone bleue.
 * Elle est désormais strictement superposée au rectangle réel de la carte.
 */
.mca2-map-stage-static {
    min-height: 545px;
    padding: 22px 28px;
}

.mca2-map-canvas {
    position: relative;
    width: min(100%, 650px);
    aspect-ratio: 2000 / 1898;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.mca2-map-canvas .mca2-france-map {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    opacity: .69;
    filter: grayscale(1) brightness(1.08) contrast(.92);
}

.mca2-map-canvas .mca2-map-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* On supprime les anciens insets calculés sur tout le panneau. */
.mca2-map-markers {
    inset: 0;
}

.mca2-map-marker {
    width: 36px;
    height: 36px;
}

.mca2-legend {
    align-items: center;
}

.mca2-map-credit {
    margin-left: auto;
    color: #7B898C;
    font-size: 9px;
    line-height: 1.3;
}

@media (max-width: 820px) {
    .mca2-map-stage-static {
        min-height: 465px;
        padding: 16px 18px;
    }

    .mca2-map-canvas {
        width: min(100%, 520px);
    }

    .mca2-map-marker {
        width: 34px;
        height: 34px;
    }

    .mca2-map-credit {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 520px) {
    .mca2-map-stage-static {
        min-height: 390px;
        padding: 12px 8px;
    }

    .mca2-map-canvas {
        width: min(100%, 360px);
    }

    .mca2-map-marker {
        width: 29px;
        height: 29px;
    }
}
