/* ===================================================
   EXPLORE MADAGASCAR — section carte interactive
   Insérée entre le Hero et Search Destination.
   Style documentaire premium (National Geographic).
   Version optimisée – 29 août 2026
   =================================================== */

/* ==========================================
   1. VARIABLES
   ========================================== */
:root{
    --exp-nosybe:     #0B6E99;  /* bleu lagon */
    --exp-diego:      #3B6E44;  /* vert montagne */
    --exp-eastcoast:  #1F5E72;  /* bleu tropical */
    --exp-morondava:  #C1552B;  /* orange coucher de soleil */
    --exp-tulear:     #D9A441;  /* ocre désert */
}

/* ==========================================
   2. CONTENEUR PRINCIPAL
   ========================================== */
.explore-md{
    position:relative;
    padding:clamp(60px, 10vw, 110px) 0 clamp(70px, 12vw, 130px);
    background:
        radial-gradient(rgba(244,236,219,.035) 1px, transparent 1px),
        linear-gradient(180deg, var(--dusk) 0%, #171128 100%);
    background-size:16px 16px, 100% 100%;
    overflow:hidden;
}

.explore-md-inner{
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(16px, 6%, 40px);
}

/* ==========================================
   3. HEADER
   ========================================== */
.explore-md-header{
    text-align:center;
    margin-bottom:clamp(32px, 6vw, 60px);
}

.explore-md-header .eyebrow{
    display:inline-block;
    color:var(--gold);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.2em;
    text-transform:uppercase;
}

.explore-md-header h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(30px, 4.5vw, 46px);
    color:var(--white);
    margin:14px 0 14px;
}

.explore-md-header p{
    font-size:clamp(15px, 1.5vw, 16.5px);
    color:rgba(255,255,255,.65);
    max-width:520px;
    margin:0 auto;
    font-weight:300;
}

/* ==========================================
   4. LAYOUT
   ========================================== */
.explore-md-layout{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:36px;
    align-items:center;
}

/* ==========================================
   5. CARTE
   ========================================== */
.explore-md-stage{
    position:relative;
    background:#fff;
    border:1px solid rgba(224,168,62,.22);
    border-radius:clamp(16px, 1.6vw, 24px);
    box-shadow:var(--shadow);
    padding:clamp(8px, 1.6vw, 20px);
    overflow:visible;
}

#exploreMdMap{
    width:100%;
    height:auto;
    aspect-ratio:1086 / 1448;
    display:block;
    max-height:680px;
    overflow:visible;
    touch-action:manipulation;
}

/* Carte illustrée */
.explore-md-real-map{
    display:block;
    width:100%;
    height:100%;
    pointer-events:none;
}

/* ==========================================
   6. POINTS INTERACTIFS
   ========================================== */
.explore-md-point{
    cursor:pointer;
    outline:none;
    touch-action:manipulation;
}

.explore-md-point .point-dot{
    stroke:#fff;
    stroke-width:3.5;
    transition:transform .3s cubic-bezier(.16,1,.3,1), fill .3s ease;
    transform-origin:center;
    transform-box:fill-box;
}

.explore-md-point .point-pulse{
    opacity:0;
    stroke:#fff;
    stroke-width:2;
    transform-origin:center;
    transform-box:fill-box;
}

.explore-md-point .point-label{
    font-family:var(--body);
    font-size:12.5px;
    font-weight:600;
    fill:rgba(255,255,255,0);
    text-anchor:middle;
    pointer-events:none;
    transition:fill .3s ease;
}

/* États : hover, focus, actif */
.explore-md-point:hover .point-dot,
.explore-md-point:focus-visible .point-dot,
.explore-md-point.is-active .point-dot{
    transform:scale(1.4);
}

.explore-md-point:hover .point-pulse,
.explore-md-point:focus-visible .point-pulse,
.explore-md-point.is-active .point-pulse{
    opacity:1;
    animation:exploreMdPulse 1.8s ease-out infinite;
}

.explore-md-point:hover .point-label,
.explore-md-point:focus-visible .point-label,
.explore-md-point.is-active .point-label{
    fill:rgba(255,255,255,.9);
}

.explore-md-point:focus-visible .point-dot{
    outline:2px solid var(--white);
    outline-offset:3px;
}

/* Désactivation des autres points */
.explore-md-stage.has-active .explore-md-point:not(.is-active){
    opacity:.3;
}

/* ==========================================
   7. ANIMATION DU POINT (PULSE)
   ========================================== */
@keyframes exploreMdPulse{
    0%{ transform:scale(.6); opacity:.7; }
    100%{ transform:scale(2); opacity:0; }
}

/* ==========================================
   8. CONNEXIONS (LIGNES)
   ========================================== */
.explore-md-connections line{
    stroke:var(--gold);
    stroke-width:1;
    stroke-dasharray:5 5;
    opacity:0;
    transition:opacity .35s ease;
}

.explore-md-connections line.is-visible{
    opacity:.55;
}

/* ==========================================
   9. TOOLTIP (SURVOL)
   ========================================== */
.explore-md-tooltip{
    position:absolute;
    z-index:20;
    pointer-events:none;
    background:rgba(23,17,40,.95);
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    padding:16px 18px;
    max-width:230px;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
    box-shadow:0 16px 32px rgba(0,0,0,.35);
}

.explore-md-tooltip.is-visible{
    opacity:1;
    transform:translateY(0);
}

.explore-md-tooltip .tooltip-title{
    display:block;
    font-family:var(--display);
    font-size:16px;
    color:var(--white);
    margin-bottom:6px;
}

.explore-md-tooltip .tooltip-desc{
    font-size:12.5px;
    line-height:1.6;
    color:rgba(255,255,255,.72);
    margin-bottom:8px;
}

.explore-md-tooltip .tooltip-days{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--gold);
}

/* ==========================================
   10. PANNEAU LATERAL (CLICK)
   ========================================== */
.explore-md-panel{
    position:relative;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    overflow:hidden;
    opacity:0;
    transform:translateX(28px);
    pointer-events:none;
    transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}

.explore-md-panel.is-open{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
}

/* Bouton fermer */
.explore-md-panel-close{
    position:absolute;
    top:14px;
    right:16px;
    z-index:5;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,.35);
    color:var(--white);
    font-size:20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s ease;
}

.explore-md-panel-close:hover,
.explore-md-panel-close:focus-visible{
    background:rgba(0,0,0,.6);
}

.explore-md-panel-close:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
}

/* Image du panneau */
.explore-md-panel-image{
    height:clamp(160px, 20vw, 200px);
    overflow:hidden;
}

.explore-md-panel-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Corps du panneau */
.explore-md-panel-body{
    padding:clamp(20px, 3vw, 26px) clamp(20px, 3vw, 26px) clamp(24px, 3vw, 30px);
}

.explore-md-panel-badge{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:12px;
}

.explore-md-panel-body h3{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(22px, 2.5vw, 25px);
    color:var(--white);
    margin-bottom:12px;
}

.explore-md-panel-body p{
    font-size:clamp(13.5px, 1.2vw, 14.5px);
    line-height:1.75;
    color:rgba(255,255,255,.7);
    margin-bottom:16px;
    font-weight:300;
}

/* Liste des points forts */
.explore-md-highlights{
    list-style:none;
    margin-bottom:24px;
    padding:0;
}

.explore-md-highlights li{
    font-size:13px;
    color:rgba(255,255,255,.65);
    padding:5px 0 5px 18px;
    position:relative;
}

.explore-md-highlights li::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold);
}

/* Bouton dans le panneau */
.explore-md-panel .btn{
    width:100%;
    text-align:center;
    display:inline-block;
    padding:12px 24px;
    border-radius:50px;
    background:var(--ember, #c85d2e);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    transition:background .3s ease, transform .3s ease;
    border:none;
}

.explore-md-panel .btn:hover{
    background:var(--gold, #d4b071);
    transform:translateY(-2px);
}

.explore-md-panel .btn:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}

/* ==========================================
   11. RESPONSIVE – MOBILE ET TABLETTE
   ========================================== */
@media (max-width: 980px){
    .explore-md-layout{
        grid-template-columns:1fr;
        gap:28px;
    }

    .explore-md-stage{
        max-width:480px;
        margin:0 auto;
    }

    .explore-md-panel{
        transform:translateY(24px);
        max-width:480px;
        margin:0 auto;
    }

    .explore-md-panel.is-open{
        transform:translateY(0);
    }
}

@media (max-width: 760px){
    .explore-md{
        padding:60px 0 70px;
    }

    .explore-md-header{
        margin-bottom:32px;
    }

    .explore-md-header h2{
        font-size:clamp(26px, 6vw, 34px);
    }

    .explore-md-stage{
        padding:6px;
        border-radius:14px;
        max-width:100%;
    }

    #exploreMdMap{
        max-height:none;
    }

    /* Désactiver le tooltip sur mobile (pas de hover fiable) */
    .explore-md-tooltip{
        display:none !important;
    }

    .explore-md-panel-image{
        height:clamp(140px, 25vw, 170px);
    }

    .explore-md-panel-body{
        padding:18px 16px 22px;
    }

    .explore-md-panel-body h3{
        font-size:clamp(20px, 4vw, 22px);
    }

    .explore-md-panel-close{
        top:10px;
        right:12px;
        width:30px;
        height:30px;
        font-size:18px;
    }
}

@media (max-width: 400px){
    .explore-md{
        padding:40px 0 50px;
    }

    .explore-md-header h2{
        font-size:clamp(22px, 5vw, 26px);
    }

    .explore-md-header p{
        font-size:14px;
    }

    .explore-md-panel-body{
        padding:14px 12px 18px;
    }

    .explore-md-panel-body h3{
        font-size:18px;
    }

    .explore-md-panel-body p{
        font-size:13px;
    }

    .explore-md-highlights li{
        font-size:12px;
        padding:4px 0 4px 16px;
    }

    .explore-md-highlights li::before{
        top:9px;
        width:5px;
        height:5px;
    }

    .explore-md-panel .btn{
        font-size:0.7rem;
        padding:10px 16px;
    }

    .explore-md-panel-close{
        top:8px;
        right:10px;
        width:26px;
        height:26px;
        font-size:16px;
    }
}

/* ==========================================
   12. ACCESSIBILITÉ – RÉDUCTION D'ANIMATIONS
   ========================================== */
@media (prefers-reduced-motion: reduce){
    .explore-md-point .point-dot,
    .explore-md-point .point-pulse,
    .explore-md-connections line,
    .explore-md-tooltip,
    .explore-md-panel,
    .explore-md-panel-close,
    .explore-md-panel .btn{
        transition:none !important;
        animation:none !important;
    }

    .explore-md-point .point-pulse{
        display:none !important;
    }

    .explore-md-point:hover .point-dot,
    .explore-md-point:focus-visible .point-dot,
    .explore-md-point.is-active .point-dot{
        transform:none !important;
    }

    .explore-md-tooltip.is-visible{
        opacity:1 !important;
        transform:none !important;
    }

    .explore-md-panel.is-open{
        opacity:1 !important;
        transform:none !important;
    }
}

/* ==========================================
   13. COMPATIBILITÉ NAVIGATEURS
   ========================================== */
@supports (aspect-ratio: 1086 / 1448) {
    #exploreMdMap{
        aspect-ratio:1086 / 1448;
    }
}

@supports not (aspect-ratio: 1086 / 1448) {
    #exploreMdMap{
        height:auto;
        max-height:680px;
    }
}

/* ==========================================
   14. FOCUS VISIBLE (accessibilité)
   ========================================== */
.explore-md-point:focus-visible .point-dot{
    outline:2px solid var(--white);
    outline-offset:4px;
}

.explore-md-panel-close:focus-visible,
.explore-md-panel .btn:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}

/* ==========================================
   15. SCROLLBAR (optionnel)
   ========================================== */
.explore-md-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.explore-md-panel::-webkit-scrollbar {
    width: 4px;
}

.explore-md-panel::-webkit-scrollbar-track {
    background: transparent;
}

.explore-md-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}
/* PageSpeed touch targets */
.explore-md-panel-close{width:44px;height:44px;min-width:44px;min-height:44px}
.explore-md-panel-body .btn,.explore-md-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}