/* ==========================================
   SECTION
========================================== */

.zone-intervention{
    background:#ffffff;
    padding:90px 20px;
}

.zone-header{
    max-width:900px;
    margin:0 auto 60px;
    text-align:center;
}

.zone-header .subtitle{
    display:inline-block;
    color:#FFC107;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.zone-header h2{
    font-size:2.4rem;
    margin-bottom:20px;
    color:#222;
}

.zone-header p{
    color:#666;
    line-height:1.7;
    font-size:1.05rem;
}

/* ==========================================
   CONTENU
========================================== */

.zone-content{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:70px;

    max-width:1300px;
    margin:auto;

    flex-wrap:wrap;

}

/* ==========================================
   CARTE
========================================== */

.zone-map{

    flex:0 0 500px;
    display:flex;
    justify-content:center;
    align-items:center;

}

.zone-map svg{

    width:100%;
    max-width:500px;
    height:auto;

}
.zone-map svg{

    width:100%;
    max-width:520px;
    height:auto;

    transition:.35s ease;
}
.zone-map{

    animation:floatMap 5s ease-in-out infinite;
}

@keyframes floatMap{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* ==========================================
   INFO
========================================== */

.zone-info{

    flex:1;
    min-width:320px;
    max-width:450px;

}

.badge{

    display:inline-block;

    background:#FFC107;

    color:#222;

    padding:10px 20px;

    border-radius:30px;

    font-weight:700;

    margin-bottom:25px;

}

.zone-info h3{

    font-size:2rem;

    margin-bottom:20px;

    color:#222;

}

.zone-info p{

    color:#666;

    line-height:1.7;

    margin-bottom:30px;

}

.zone-list{

    list-style:none;

    padding:0;

    margin:0;

}

.zone-list li{

    margin-bottom:14px;

    color:#333;

    font-size:1rem;

}
.zone-info{

    background:#ffffff;

    padding:40px;

    border-radius:20px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.12);

    transition:.3s;
}
.zone-info h3,
.zone-info p{

    transition:.25s;
}
.badge{

    background:linear-gradient(
        135deg,
        #FFD54F,
        #FFC107
    );

    color:#222;

    font-weight:700;

    box-shadow:0 8px 20px rgba(255,193,7,.4);
}
.zone-map{

    position:relative;
}

.zone-map::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(255,193,7,.12),
            transparent 70%
        );

    z-index:-1;
}
/* ==========================================
   DEPARTEMENTS
========================================== */

.departement{
    fill:#4b4b4b;
    stroke:#ffffff;
    stroke-width:2;

    cursor:pointer;

    transform-box:fill-box;
    transform-origin:center center;

    transition:
        fill .25s ease,
        transform .25s ease,
        filter .25s ease;
}

.departement:hover,
.departement.active{

    fill:#FFC107;

    transform:scale(1.05);

    filter:
        drop-shadow(0 0 8px rgba(255,193,7,.9))
        drop-shadow(0 0 18px rgba(255,193,7,.45));
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

    .zone-content{

        flex-direction:column;

        gap:40px;

    }

    .zone-map{

        flex:none;

        width:100%;

    }

    .zone-map svg{

        max-width:420px;

    }

    .zone-info{

        text-align:center;

    }

}

@media(max-width:576px){

    .zone-intervention{

        padding:60px 15px;

    }

    .zone-header h2{

        font-size:2rem;

    }

    .zone-map svg{

        max-width:100%;

    }

    .zone-content,.zone-map,.zone-info{width:100%;min-width:0;max-width:100%;}
    .zone-info{padding:25px 18px;}
    .zone-map::before{width:min(92vw,320px);height:min(92vw,320px);}

}
.badge-rdv{
    display:inline-flex;
    align-items:center;
    gap:.5rem;

    padding:.7rem 1.6rem;

    background:var(--jaune);
    color:var(--noir);

    font-weight:700;
    border-radius:50px;

    text-decoration:none;

    transition:all .25s ease;

    box-shadow:0 8px 20px rgba(245,166,35,.25);
}

.badge-rdv:hover{
    background:var(--jaune-hover);
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(245,166,35,.35);
}

.badge-rdv svg{
    width:18px;
    height:18px;
    fill:currentColor;
}