/* =========================================================
   ZOOMBROC — FEUILLE DE STYLE GLOBALE
   PC / TABLETTE / MOBILE
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root{
    --zb-navy:#08152f;
    --zb-navy2:#102a50;
    --zb-blue:#157ac5;
    --zb-cyan:#16a5c7;
    --zb-green:#12a66b;
    --zb-yellow:#ffd34e;
    --zb-orange:#ff8b2b;
    --zb-pink:#ef5ca8;
    --zb-purple:#7057d9;

    --zb-bg:#f4f7fb;
    --zb-card:#fff;
    --zb-text:#10203c;
    --zb-muted:#718097;
    --zb-line:#e2e9f2;

    --zb-shadow:0 18px 45px rgba(8,21,47,.10);
    --zb-shadow-lg:0 24px 60px rgba(8,21,47,.15);
}


/* =========================================================
   BASE
   ========================================================= */

.zb-page,
.zb-page *,
.zb-page *::before,
.zb-page *::after{
    box-sizing:border-box;
}

.zb-page{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
    background:var(--zb-bg);
    color:var(--zb-text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing:antialiased;
}

.zb-page a{
    color:inherit;
    text-decoration:none;
}

.zb-page img{
    display:block;
    max-width:100%;
}

.zb-page button,
.zb-page input,
.zb-page select,
.zb-page textarea{
    font:inherit;
}

.zb-page h1,
.zb-page h2,
.zb-page h3,
.zb-page p{
    margin-top:0;
}

.zb-page a:focus-visible,
.zb-page button:focus-visible{
    outline:3px solid rgba(21,122,197,.45);
    outline-offset:3px;
}


/* =========================================================
   HEADER
   ========================================================= */

.zb-header{
    position:relative;
    z-index:100;
    background:#fff;
    border-bottom:1px solid #e3eaf2;
    font-family:Inter,system-ui,sans-serif;
}

.zb-head-top{
    width:min(1400px,calc(100% - 40px));
    min-height:86px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:25px;
}

.zb-brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#0d1832;
}

.zb-mark{
    width:49px;
    height:49px;
    border-radius:15px;
    background:linear-gradient(135deg,#18a66a,#1179c9);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:26px;
    font-weight:900;
}

.zb-brand strong{
    font-size:29px;
    letter-spacing:-1px;
}

.zb-brand strong i{
    font-style:normal;
    color:#18a66a;
}

.zb-brand small{
    display:block;
    color:#748197;
    font-size:11px;
    margin-top:3px;
}

.zb-slogan{
    flex:1;
    text-align:center;
    color:#0d1832;
}

.zb-slogan b{
    display:block;
    font-size:16px;
}

.zb-slogan small{
    display:block;
    color:#748197;
    margin-top:4px;
}

.zb-head-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.zb-fav{
    font-size:25px;
    text-align:center;
    text-decoration:none;
    color:#0d1832;
}

.zb-fav small{
    display:block;
    font-size:10px;
    color:#748197;
}

.zb-propose{
    background:#18a66a;
    color:#fff;
    text-decoration:none;
    padding:12px 16px;
    border-radius:11px;
    font-weight:800;
    font-size:13px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.zb-nav{
    width:min(1400px,calc(100% - 40px));
    margin:auto;
    display:flex;
    gap:4px;
    align-items:stretch;
}

.zb-tab,
.zb-cat-menu summary{
    min-height:52px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:13px 13px 0 0;
    text-decoration:none;
    color:#23334f;
    font-size:13px;
    font-weight:850;
    white-space:nowrap;
    cursor:pointer;
    list-style:none;
}

.zb-tab:hover,
.zb-cat-menu summary:hover{
    background:#f3f7fb;
}

.zb-tab.active{
    background:#ffd34f;
    box-shadow:inset 0 -4px #e5a91c;
}

.zb-tab.info{
    margin-left:auto;
}

.zb-cat-menu{
    position:static;
}

.zb-cat-menu summary::-webkit-details-marker{
    display:none;
}

.zb-cat-menu[open] summary{
    background:#ff8b2b;
    color:#fff;
}

.zb-mega{
    position:absolute;
    top:138px;
    left:50%;
    transform:translateX(-50%);
    width:min(1050px,calc(100% - 30px));
    background:#fff;
    padding:20px;
    border:1px solid #e0e7ef;
    border-radius:0 0 18px 18px;
    box-shadow:0 20px 45px rgba(13,24,50,.18);
}

.zb-mega-title{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:14px;
    border-bottom:1px solid #e8edf3;
}

.zb-mega-title b{
    font-size:18px;
}

.zb-mega-title span{
    color:#78869a;
    font-size:12px;
    flex:1;
}

.zb-mega-title a{
    color:#1179c9;
    font-size:12px;
    font-weight:800;
}

.zb-cat-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin-top:13px;
}

.zb-cat-grid a{
    display:grid;
    grid-template-columns:38px 1fr;
    grid-template-rows:auto auto;
    gap:2px 9px;
    padding:10px;
    border-radius:11px;
    text-decoration:none;
    color:#15213a;
    font-size:12px;
}

.zb-cat-grid a:hover{
    background:#f3f7fb;
}

.zb-cat-grid a:first-letter{
    font-size:21px;
}

.zb-cat-grid b{
    font-size:12px;
}

.zb-cat-grid small{
    color:#7a8799;
}

.zb-burger,
.zb-mobile-panel{
    display:none;
}


/* =========================================================
   HERO
   ========================================================= */

.zb-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(22,165,199,.27),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 95%,
            rgba(18,166,107,.15),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            var(--zb-navy),
            var(--zb-navy2) 58%,
            #174e78
        );
}

.zb-hero::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:520px;
    height:520px;
    top:-280px;
    right:-160px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.1),
            transparent 68%
        );
}

.zb-hero-in{
    position:relative;
    width:min(1160px,calc(100% - 64px));
    min-height:570px;
    margin:auto;
    display:flex;
    align-items:center;
}

.zb-hero-grid{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(430px,.85fr);
    align-items:center;
    gap:52px;
}

.zb-hero-grid > div:first-child{
    position:relative;
    z-index:4;
}

.zb-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    font-size:11px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.zb-hero h1{
     max-width:none;
    white-space:nowrap;
    margin:0 0 18px;
    font-size:clamp(48px,5.4vw,72px);
    line-height:.96;
    letter-spacing:-.055em;
    font-weight:950;
}

.zb-hero h1 em{
    color:var(--zb-yellow);
    font-style:normal;
}

.zb-hero-lead{
    max-width:none;
    margin-bottom:25px;
    color:rgba(255,255,255,.76);
    font-size:16px;
    line-height:1.62;
}

.zb-hero-lead strong{
    color:#fff;
}

.zb-hero-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.zb-hero-chip{
    display:inline-flex;
    align-items:center;
    min-height:35px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    font-size:11px;
    font-weight:750;
}


/* =========================================================
   HERO VISUEL
   ========================================================= */

.zb-hero-visual{
    position:relative;
    min-height:440px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.zb-orb{
    position:absolute;
    width:390px;
    height:390px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(22,165,199,.23),
            rgba(22,165,199,.04) 60%,
            transparent 72%
        );
}

.zb-visual-map{
    position:relative;
    width:min(500px,100%);
    min-height:420px;
    height:410px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    border-radius:32px;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(24,188,255,.16),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            rgba(28,83,126,.48),
            rgba(5,25,61,.80)
        );
    box-shadow:
        0 28px 70px rgba(0,0,0,.25),
        inset 0 0 70px rgba(0,210,255,.08);
    transform:rotate(-1deg);
}

.zb-visual-map::before{
    content:"";
    position:absolute;
    inset:-20%;
    opacity:.5;
    background:
        linear-gradient(
            110deg,
            transparent 35%,
            rgba(255,255,255,.13) 35.3%,
            transparent 36%
        ),
        linear-gradient(
            20deg,
            transparent 42%,
            rgba(255,255,255,.1) 42.3%,
            transparent 43%
        ),
        linear-gradient(
            160deg,
            transparent 58%,
            rgba(255,255,255,.09) 58.3%,
            transparent 59%
        );
    transform:rotate(7deg) scale(1.2);
}

.zb-france-map-wrap{
    position:absolute;
    inset:18px 34px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.zb-france-map-image{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    opacity:.96;
    filter:
        brightness(.72)
        saturate(1.35)
        drop-shadow(0 0 10px rgba(35,210,255,.50))
        drop-shadow(0 0 24px rgba(35,210,255,.18));
}

.zb-france-map-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.zb-map-dot{
    position:absolute;
    width:8px;
    height:8px;
    margin:-4px 0 0 -4px;
    border-radius:50%;
    background:var(--dot-color,#20d8ff);
    box-shadow:
        0 0 6px var(--dot-color,#20d8ff),
        0 0 16px var(--dot-color,#20d8ff),
        0 0 30px color-mix(
            in srgb,
            var(--dot-color,#20d8ff) 45%,
            transparent
        );
    animation:zb-map-pulse 3.8s ease-in-out infinite;
}

.zb-map-dot::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    background:var(--dot-color,#20d8ff);
    opacity:.16;
    transform:scale(.65);
    animation:zb-map-halo 3.8s ease-in-out infinite;
}

.zb-map-dot.twinkle{
    animation:
        zb-map-pulse 3.8s ease-in-out infinite,
        zb-map-twinkle 6.2s ease-in-out infinite;
}

.zb-map-dot.big{
    width:11px;
    height:11px;
    margin:-5.5px 0 0 -5.5px;
}

.zb-map-dot.big::after{
    inset:-10px;
}

@keyframes zb-map-pulse{
    0%,100%{
        transform:scale(1);
        opacity:.78;
    }

    45%{
        transform:scale(1.16);
        opacity:1;
    }

    60%{
        transform:scale(1);
        opacity:.9;
    }
}

@keyframes zb-map-halo{
    0%,100%{
        transform:scale(.65);
        opacity:.08;
    }

    45%{
        transform:scale(1.8);
        opacity:.28;
    }

    70%{
        transform:scale(1);
        opacity:.11;
    }
}

@keyframes zb-map-twinkle{
    0%,100%{
        filter:brightness(1);
        opacity:.72;
    }

    10%{
        filter:brightness(2.2);
        opacity:1;
    }

    17%{
        filter:brightness(.7);
        opacity:.32;
    }

    25%{
        filter:brightness(2);
        opacity:1;
    }

    34%{
        filter:brightness(.9);
        opacity:.65;
    }
}

.zb-map-focus{
    position:absolute;
    width:14px;
    height:14px;
    margin:-7px 0 0 -7px;
    border-radius:50%;
    background:#ff4fa3;
    box-shadow:
        0 0 8px #ff4fa3,
        0 0 22px #ff4fa3,
        0 0 45px rgba(255,79,163,.65);
    animation:zb-focus 3.4s ease-in-out infinite;
}

.zb-map-focus::before{
    content:"";
    position:absolute;
    inset:-9px;
    border:2px solid rgba(255,79,163,.85);
    border-radius:50%;
    animation:zb-focus-ring 3.4s ease-out infinite;
}

@keyframes zb-focus{
    0%,100%{
        transform:scale(1);
        opacity:.9;
    }

    50%{
        transform:scale(1.15);
        opacity:1;
    }
}

@keyframes zb-focus-ring{
    0%{
        transform:scale(.65);
        opacity:.9;
    }

    75%,100%{
        transform:scale(2.15);
        opacity:0;
    }
}


/* =========================================================
   CARTE — LABELS
   ========================================================= */

.zb-map-label{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:15px;
    background:rgba(8,24,53,.84);
    color:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    backdrop-filter:blur(10px);
    font-size:12px;
    font-weight:900;
}

.zb-map-label small{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.65);
    font-size:10px;
    font-weight:700;
}

.zb-map-label.l1{
    top:24px;
    left:22px;
}

.zb-map-label.l2{
    right:20px;
    top:125px;
}

.zb-map-label.l3{
    left:22px;
    bottom:84px;
}

.zb-map-label .mini-dot{
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:#20d8ff;
    box-shadow:0 0 10px #20d8ff;
}

.zb-map-caption{
    position:absolute;
    z-index:6;
    right:18px;
    bottom:18px;
    left:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:17px;
    background:rgba(5,23,51,.74);
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
}

.zb-map-caption b{
    font-size:13px;
}

.zb-map-caption span{
    color:rgba(255,255,255,.68);
    font-size:10px;
}


/* =========================================================
   ANCIEN VISUEL — ROUTES / PINS
   ========================================================= */

.zb-road{
    position:absolute;
    height:3px;
    border-radius:99px;
    background:rgba(255,255,255,.2);
    transform-origin:left center;
}

.zb-road.r1{
    width:430px;
    left:25px;
    top:95px;
    transform:rotate(20deg);
}

.zb-road.r2{
    width:360px;
    left:90px;
    top:290px;
    transform:rotate(-18deg);
}

.zb-road.r3{
    width:390px;
    left:55px;
    top:195px;
    transform:rotate(5deg);
}

.zb-road.r4{
    width:260px;
    left:245px;
    top:65px;
    transform:rotate(73deg);
}

.zb-pin{
    position:absolute;
    z-index:3;
    width:38px;
    height:38px;
    border:3px solid rgba(255,255,255,.95);
    border-radius:50% 50% 50% 5px;
    background:var(--zb-orange);
    box-shadow:0 9px 22px rgba(0,0,0,.23);
    transform:rotate(-45deg);
}

.zb-pin.p1{
    top:80px;
    left:100px;
}

.zb-pin.p2{
    top:165px;
    left:300px;
    background:var(--zb-green);
}

.zb-pin.p3{
    top:285px;
    left:205px;
    background:var(--zb-pink);
}

.zb-pin.p4{
    top:225px;
    right:48px;
    background:var(--zb-purple);
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.zb-float{
    position:absolute;
    z-index:8;
    min-width:165px;
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:15px;
    background:rgba(255,255,255,.95);
    color:#0d1832;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
}

.zb-float strong{
    display:block;
    color:#0d1832;
    font-size:11px;
    margin-bottom:3px;
}

.zb-float small{
    color:#718097;
    font-size:9px;
}

.zb-float:hover{
    transform:translateY(-2px);
}

.zb-float.one{
    top:35px;
    right:-8px;
}

.zb-float.two{
    left:-18px;
    bottom:80px;
}

.zb-float.three{
    right:-8px;
    bottom:22px;
}

.zb-dot-live{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:5px;
    border-radius:50%;
    background:var(--zb-green);
}


/* =========================================================
   RECHERCHE
   ========================================================= */

.zb-search-wrap{
    position:relative;
    z-index:20;
    width:min(1040px,calc(100% - 64px));
    margin:-38px auto 0;
}

.zb-search{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr 145px;
    gap:0;
    padding:9px;
    border:1px solid rgba(8,21,47,.07);
    border-radius:22px;
    background:#fff;
    box-shadow:var(--zb-shadow-lg);
}

.zb-field{
    min-width:0;
    padding:10px 15px;
    border-right:1px solid var(--zb-line);
}

.zb-field label{
    display:block;
    margin-bottom:4px;
    color:var(--zb-muted);
    font-size:9px;
    font-weight:850;
    letter-spacing:.05em;
}

.zb-field b{
    display:block;
    overflow:hidden;
    font-size:12px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.zb-search button{
    min-height:54px;
    border:0;
    border-radius:14px;
    background:linear-gradient(
        135deg,
        var(--zb-blue),
        var(--zb-cyan)
    );
    color:#fff;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.zb-search-select,
.zb-search-date,
#home-location{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#0d1832;
    font:inherit;
}

.zb-search-select{
    cursor:pointer;
    appearance:auto;
}

.zb-search-date{
    cursor:pointer;
}

.zb-home-autocomplete{
    position:relative;
}

.zb-location-suggestions{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    z-index:1000;
    overflow:hidden;
    background:#fff;
    border:1px solid #dfe5ee;
    border-radius:14px;
    box-shadow:0 16px 40px rgba(11,23,51,.16);
}

.zb-location-suggestion{
    display:block;
    width:100%;
    padding:12px 14px;
    border:0;
    border-bottom:1px solid #edf0f5;
    background:#fff;
    color:#14213d;
    text-align:left;
    cursor:pointer;
    font:inherit;
}

.zb-location-suggestion:last-child{
    border-bottom:0;
}

.zb-location-suggestion:hover,
.zb-location-suggestion:focus{
    background:#f5f9ff;
    outline:0;
}

.zb-location-suggestion strong{
    display:block;
    font-size:14px;
}

.zb-location-suggestion small{
    display:block;
    margin-top:2px;
    color:#718097;
    font-size:12px;
}

.zb-quick{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.zb-quick a{
    padding:6px 10px;
    border:1px solid var(--zb-line);
    border-radius:999px;
    background:#fff;
    font-size:10px;
    font-weight:750;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.zb-section{
    width:min(1160px,calc(100% - 64px));
    margin:0 auto;
    padding:66px 0 0;
}

.zb-section.tight{
    padding-top:54px;
}

.zb-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.zb-head h2{
    margin:0 0 6px;
    font-size:29px;
    line-height:1.05;
    letter-spacing:-.04em;
    font-weight:950;
}

.zb-head p{
    margin:0;
    color:var(--zb-muted);
    font-size:13px;
}

.zb-head > a{
    color:var(--zb-blue);
    font-size:11px;
    font-weight:850;
}


/* =========================================================
   CATÉGORIES
   ========================================================= */

.zb-cats{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
}

.zb-cat{
    min-height:125px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:15px;
    border:1px solid var(--zb-line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 20px rgba(8,21,47,.06);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.zb-cat:hover{
    transform:translateY(-4px);
    box-shadow:var(--zb-shadow);
}

.zb-cat .icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#edf5fb;
    font-size:20px;
}

.zb-cat b{
    display:block;
    margin-bottom:2px;
    font-size:12px;
}

.zb-cat small{
    color:var(--zb-muted);
    font-size:9px;
}


/* =========================================================
   DISCOVERY
   ========================================================= */

.zb-discovery{
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:16px;
}

.zb-discovery-card{
    position:relative;
    overflow:hidden;
    min-height:260px;
    padding:22px;
    border:1px solid var(--zb-line);
    border-radius:24px;
    background:#fff;
    box-shadow:var(--zb-shadow);
}

.zb-discovery-card::after{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    right:-70px;
    bottom:-90px;
    border-radius:50%;
    background:rgba(21,122,197,.08);
}

.zb-discovery-card:nth-child(2)::after{
    background:rgba(18,166,107,.1);
}

.zb-discovery-card .pill{
    display:inline-flex;
    padding:6px 9px;
    border-radius:999px;
    background:#eef6fc;
    color:var(--zb-blue);
    font-size:9px;
    font-weight:900;
}

.zb-discovery-card .big-icon{
    display:block;
    margin:17px 0 12px;
    font-size:32px;
}

.zb-discovery-card h3{
    margin:0 0 7px;
    font-size:20px;
    line-height:1.1;
    letter-spacing:-.03em;
    font-weight:950;
}

.zb-discovery-card p{
    max-width:520px;
    margin:0 0 16px;
    color:var(--zb-muted);
    font-size:11px;
    line-height:1.55;
}

.zb-week-strip{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    position:relative;
    z-index:2;
}

.zb-day{
    padding:11px;
    border:1px solid var(--zb-line);
    border-radius:13px;
    background:#fafcfe;
}

.zb-day small{
    display:block;
    color:var(--zb-orange);
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.zb-day b{
    display:block;
    margin:4px 0;
    font-size:11px;
}

.zb-day span{
    display:block;
    color:var(--zb-muted);
    font-size:8px;
}


/* =========================================================
   ÉVÉNEMENTS
   ========================================================= */

.zb-event-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.zb-event{
    min-width:0;
    padding:17px;
    border:1px solid var(--zb-line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 7px 20px rgba(8,21,47,.06);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.zb-event:hover{
    transform:translateY(-4px);
    box-shadow:var(--zb-shadow);
}

.zb-event-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:12px;
}

.zb-event-top small{
    color:var(--zb-blue);
    font-size:9px;
    font-weight:850;
    text-transform:uppercase;
}

.event-badge{
    padding:5px 7px;
    border-radius:999px;
    background:#eaf9f3;
    color:var(--zb-green);
    font-size:8px;
    font-weight:850;
}

.zb-event h3{
    display:-webkit-box;
    overflow:hidden;
    min-height:38px;
    margin:0 0 10px;
    font-size:14px;
    line-height:1.35;
    font-weight:900;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.zb-event p{
    margin:0 0 14px;
    color:var(--zb-muted);
    font-size:10px;
}

.zb-event i{
    color:var(--zb-blue);
    font-size:10px;
    font-style:normal;
    font-weight:850;
}


/* =========================================================
   CTA
   ========================================================= */

.zb-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:34px 38px;
    border-radius:28px;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(22,165,199,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--zb-navy),
            var(--zb-navy2)
        );
    color:#fff;
    box-shadow:var(--zb-shadow-lg);
}

.zb-cta h2{
    margin:0 0 9px;
    color:#fff;
    font-size:27px;
    letter-spacing:-.035em;
}

.zb-cta p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:11px;
    line-height:1.6;
}

.zb-cta > a{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:12px;
    background:var(--zb-yellow);
    color:var(--zb-navy);
    font-size:11px;
    font-weight:900;
}


/* =========================================================
   STATISTIQUES
   ========================================================= */

.zb-stats{
    width:min(1160px,calc(100% - 64px));
    margin:55px auto 0;
    border:1px solid var(--zb-line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 7px 20px rgba(8,21,47,.06);
}

.zb-stats-in{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.zb-stat{
    padding:23px 25px;
}

.zb-stat + .zb-stat{
    border-left:1px solid var(--zb-line);
}

.zb-stat b{
    display:block;
    margin-bottom:5px;
    font-size:27px;
    line-height:1;
    font-weight:950;
}

.zb-stat b em{
    font-style:normal;
}

.zb-stat span{
    color:var(--zb-muted);
    font-size:10px;
    font-weight:700;
}

.zb-note{
    width:min(1160px,calc(100% - 64px));
    margin:12px auto 55px;
    color:var(--zb-muted);
    font-size:9px;
}


/* =========================================================
   PUBLICITÉS
   ========================================================= */

.zb-home-ad{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:34px auto;
    padding:0 16px;
}

.zb-home-ad-box{
    display:flex;
    align-items:center;
    justify-content:center;
    width:300px;
    height:250px;
    max-width:100%;
    box-sizing:border-box;
    border:2px dashed #b9c5d6;
    border-radius:18px;
    background:#eef3f8;
    color:#718097;
    text-align:center;
    font-family:inherit;
    font-size:14px;
    font-weight:900;
    line-height:1.4;
}

.zb-home-ad-box small{
    display:block;
    margin-top:5px;
    font-size:10px;
    font-weight:700;
    color:#9aa7b8;
}

.zb-home-ad-wide .zb-home-ad-box{
    width:336px;
    height:250px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.zb-footer{
    background:#0d1832;
    color:#fff;
    font-family:Inter,system-ui,sans-serif;
}

.zb-footer-inner{
    width:min(1400px,calc(100% - 40px));
    margin:auto;
    padding:45px 0 35px;
    display:grid;
    grid-template-columns:1.6fr repeat(4,1fr);
    gap:28px;
}

.zb-footer-brand > a{
    font-size:28px;
    font-weight:900;
    text-decoration:none;
    color:#fff;
}

.zb-footer-brand > a span{
    color:#36c784;
}

.zb-footer-brand p{
    color:#b8c2d2;
    font-size:12px;
    line-height:1.65;
    margin-top:13px;
}

.zb-footer nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.zb-footer h2{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.07em;
    margin:0 0 6px;
}

.zb-footer nav a{
    color:#b8c2d2;
    text-decoration:none;
    font-size:11px;
}

.zb-footer nav a:hover{
    color:#fff;
    text-decoration:underline;
}

.zb-footer-ad{
    width:min(728px,calc(100% - 30px));
    min-height:20px;
    margin:0 auto 25px;
    display:flex;
    justify-content:center;
    overflow:hidden;
}

.zb-footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding:16px;
    text-align:center;
    color:#8f9bb0;
    font-size:11px;
}


/* =========================================================
   TABLETTE
   769px → 1199px
   ========================================================= */

@media (min-width:769px) and (max-width:1199px){

    .zb-head-top,
    .zb-nav{
        width:calc(100% - 32px);
    }

    .zb-head-top{
        min-height:80px;
        gap:15px;
    }

    .zb-brand strong{
        font-size:25px;
    }

    .zb-brand small{
        font-size:10px;
    }

    .zb-mark{
        width:45px;
        height:45px;
    }

    .zb-propose{
        padding:10px 12px;
        font-size:11px;
    }

    .zb-slogan{
        display:none;
    }

    .zb-tab,
    .zb-cat-menu summary{
        padding:0 11px;
        font-size:12px;
    }

    .zb-mega{
        top:132px;
    }

    .zb-cat-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* HERO */

    .zb-hero-in{
        width:calc(100% - 48px);
        min-height:510px;
    }

    .zb-hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(340px,.78fr);
        gap:30px;
    }

    .zb-kicker{
        font-size:10px;
    }

    .zb-hero h1{
        font-size:clamp(42px,5.8vw,60px);
    }

    .zb-hero-lead{
        font-size:15px;
        line-height:1.6;
    }

    .zb-hero-chip{
        font-size:11px;
    }

    .zb-hero-visual{
        min-height:370px;
    }

    .zb-visual-map{
        height:350px;
    }

    .zb-orb{
        width:320px;
        height:320px;
    }

    .zb-road.r1{
        width:350px;
    }

    .zb-road.r2{
        width:300px;
    }

    .zb-road.r3{
        width:320px;
    }

    .zb-pin.p1{
        left:75px;
        top:65px;
    }

    .zb-pin.p2{
        left:230px;
        top:140px;
    }

    .zb-pin.p3{
        left:155px;
        top:245px;
    }

    .zb-pin.p4{
        right:32px;
        top:190px;
    }

    .zb-float{
        min-width:135px;
        padding:9px 10px;
    }

    .zb-float strong{
        font-size:10px;
    }

    .zb-float small{
        font-size:9px;
    }

    .zb-float.one{
        right:-5px;
        top:25px;
    }

    .zb-float.two{
        left:-10px;
        bottom:65px;
    }

    .zb-float.three{
        right:-5px;
        bottom:15px;
    }


    /* SEARCH */

    .zb-search-wrap{
        width:calc(100% - 48px);
    }

    .zb-search{
        grid-template-columns:1.2fr 1fr 1fr 125px;
    }

    .zb-field label{
        font-size:10px;
    }

    .zb-field b{
        font-size:13px;
    }

    .zb-search button{
        font-size:13px;
    }

    .zb-quick a{
        font-size:11px;
    }


    /* SECTIONS */

    .zb-section,
    .zb-stats,
    .zb-note{
        width:calc(100% - 48px);
    }

    .zb-section{
        padding-top:52px;
    }

    .zb-section.tight{
        padding-top:43px;
    }

    .zb-head h2{
        font-size:27px;
    }

    .zb-head p{
        font-size:13px;
    }

    .zb-head > a{
        font-size:11px;
    }


    /* CATEGORIES */

    .zb-cats{
        grid-template-columns:repeat(3,1fr);
    }

    .zb-cat b{
        font-size:13px;
    }

    .zb-cat small{
        font-size:10px;
    }


    /* DISCOVERY */

    .zb-discovery{
        grid-template-columns:1fr 1fr;
    }

    .zb-discovery-card .pill{
        font-size:10px;
    }

    .zb-discovery-card h3{
        font-size:20px;
    }

    .zb-discovery-card p{
        font-size:13px;
        line-height:1.55;
    }

    .zb-day small{
        font-size:10px;
    }

    .zb-day b{
        font-size:12px;
    }

    .zb-day span{
        font-size:10px;
    }


    /* EVENTS */

    .zb-event-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .zb-event-top small{
        font-size:10px;
    }

    .event-badge{
        font-size:10px;
    }

    .zb-event h3{
        font-size:15px;
    }

    .zb-event p{
        font-size:12px;
    }

    .zb-event i{
        font-size:11px;
    }


    /* CTA */

    .zb-cta h2{
        font-size:27px;
    }

    .zb-cta p{
        font-size:13px;
    }

    .zb-cta > a{
        font-size:13px;
    }


    /* STATS */

    .zb-stat b{
        font-size:27px;
    }

    .zb-stat span{
        font-size:11px;
    }

    .zb-note{
        font-size:10px;
    }


    /* FOOTER */

    .zb-footer-inner{
        width:calc(100% - 32px);
        grid-template-columns:1.5fr repeat(3,1fr);
    }

    .zb-footer-inner nav:last-child{
        display:none;
    }

    .zb-footer-brand p{
        font-size:12px;
    }

    .zb-footer h2{
        font-size:12px;
    }

    .zb-footer nav a{
        font-size:11px;
    }
}


/* =========================================================
   TABLETTE LARGE
   ========================================================= */

@media (min-width:1000px) and (max-width:1199px){

    .zb-event-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


/* =========================================================
   TABLETTE PETITE
   ========================================================= */

@media (min-width:769px) and (max-width:900px){

    .zb-footer-inner{
        grid-template-columns:1.5fr repeat(2,1fr);
    }

    .zb-footer-inner nav:last-child{
        display:flex;
    }
}


/* =========================================================
   MOBILE
   ≤ 768px
   ========================================================= */

@media (max-width:768px){

    /* HEADER */

    .zb-head-top{
        width:calc(100% - 24px);
        min-height:68px;
        margin:auto;
        display:flex;
        align-items:center;
    }

    .zb-brand{
        gap:9px;
    }

    .zb-mark{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:22px;
    }

    .zb-brand strong{
        font-size:23px;
        letter-spacing:-.8px;
    }

    .zb-brand small{
        font-size:9px;
        margin-top:2px;
    }

    .zb-slogan,
    .zb-head-actions,
    .zb-nav{
        display:none;
    }

    .zb-burger{
        display:flex;
        margin-left:auto;
        width:42px;
        height:42px;
        border:1px solid #dfe6ee;
        border-radius:12px;
        background:#fff;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
        cursor:pointer;
    }

    .zb-burger span{
        width:20px;
        height:2px;
        background:#0d1832;
    }

    .zb-mobile-panel{
        display:none;
        padding:8px 12px 18px;
        border-top:1px solid #edf1f5;
        background:#fff;
    }

    .zb-open .zb-mobile-panel{
        display:grid;
    }

    .zb-mobile-panel a{
        padding:11px 9px;
        text-decoration:none;
        color:#17233d;
        font-weight:750;
        font-size:15px;
        border-radius:9px;
    }

    .zb-mobile-panel a:hover{
        background:#f3f7fb;
    }

    .zb-mobile-panel strong{
        font-size:11px;
        color:#78869a;
        padding:14px 9px 5px;
        border-top:1px solid #e8edf3;
        margin-top:6px;
    }

    .zb-mobile-panel .mobile-propose{
        background:#18a66a;
        color:#fff;
        text-align:center;
        margin-top:8px;
    }


    /* HERO */

    .zb-hero-in{
        width:calc(100% - 28px);
        min-height:auto;
        padding:30px 0 26px;
    }

    .zb-hero-grid{
        display:flex;
        flex-direction:column;
        gap:18px;
        align-items:stretch;
    }

    .zb-kicker{
        margin-bottom:14px;
        font-size:10px;
        padding:7px 10px;
    }

    .zb-hero h1{
        font-size:clamp(38px,11vw,52px);
        line-height:.97;
        margin-bottom:14px;
    }

    .zb-hero-lead{
        font-size:15px;
        line-height:1.58;
        margin-bottom:18px;
    }

    .zb-hero-chip{
        min-height:30px;
        padding:6px 9px;
        font-size:11px;
    }


    /* CARTE */

    .zb-hero-visual{
        min-height:275px;
    }

    .zb-orb{
        width:250px;
        height:250px;
    }

    .zb-visual-map{
        width:100%;
        height:270px;
        min-height:270px;
        border-radius:24px;
    }

    .zb-france-map-wrap{
        inset:18px 8px 62px;
    }

    .zb-road{
        height:2px;
    }

    .zb-road.r1{
        width:300px;
        left:10px;
        top:60px;
    }

    .zb-road.r2{
        width:260px;
        left:55px;
        top:205px;
    }

    .zb-road.r3{
        width:275px;
        left:35px;
        top:135px;
    }

    .zb-road.r4{
        width:180px;
        left:160px;
        top:40px;
    }

    .zb-pin{
        width:31px;
        height:31px;
    }

    .zb-pin.p1{
        left:48px;
        top:48px;
    }

    .zb-pin.p2{
        left:52%;
        top:105px;
    }

    .zb-pin.p3{
        left:42%;
        top:190px;
    }

    .zb-pin.p4{
        right:28px;
        top:145px;
    }

    .zb-map-label{
        padding:7px 10px;
        font-size:10px;
    }

    .zb-map-label small{
        font-size:8px;
    }

    .zb-map-label.l1{
        top:10px;
        left:10px;
    }

    .zb-map-label.l2{
        right:10px;
        top:85px;
    }

    .zb-map-label.l3{
        display:none;
    }

    .zb-map-caption{
        right:10px;
        bottom:10px;
        left:10px;
        padding:10px 12px;
    }

    .zb-map-caption b{
        font-size:11px;
    }

    .zb-map-caption span{
        font-size:9px;
    }

    .zb-float{
        min-width:115px;
        padding:8px 9px;
        border-radius:12px;
    }

    .zb-float strong{
        font-size:10px;
    }

    .zb-float small{
        font-size:9px;
    }

    .zb-float.one{
        top:0;
        right:-3px;
    }

    .zb-float.two{
        left:-3px;
        bottom:50px;
    }

    .zb-float.three{
        right:-3px;
        bottom:5px;
    }


    /* SEARCH */

    .zb-search-wrap{
        width:calc(100% - 20px);
        margin:-15px auto 0;
    }

    .zb-search{
        display:flex;
        flex-direction:column;
        gap:7px;
        padding:8px;
        border-radius:18px;
    }

    .zb-field{
        min-height:45px;
        padding:7px 10px;
        border:1px solid var(--zb-line);
        border-radius:11px;
        background:#fafcfe;
    }

    .zb-field label{
        font-size:9px;
        margin-bottom:2px;
    }

    .zb-field b{
        font-size:13px;
    }

    .zb-search button{
        min-height:48px;
        font-size:14px;
    }

    .zb-quick{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:none;
        padding-bottom:4px;
    }

    .zb-quick::-webkit-scrollbar{
        display:none;
    }

    .zb-quick a{
        flex:0 0 auto;
        font-size:11px;
        min-height:29px;
    }


    /* SECTIONS */

    .zb-section{
        width:calc(100% - 28px);
        padding-top:42px;
    }

    .zb-section.tight{
        padding-top:37px;
    }

    .zb-head{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        margin-bottom:17px;
    }

    .zb-head h2{
        font-size:25px;
    }

    .zb-head p{
        font-size:13px;
    }

    .zb-head > a{
        font-size:11px;
    }


    /* CATEGORIES */

    .zb-cats{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    .zb-cat{
        min-height:112px;
        padding:12px;
        border-radius:14px;
    }

    .zb-cat .icon{
        width:37px;
        height:37px;
        border-radius:11px;
        font-size:17px;
    }

    .zb-cat b{
        font-size:13px;
    }

    .zb-cat small{
        font-size:10px;
    }


    /* DISCOVERY */

    .zb-discovery{
        grid-template-columns:1fr;
        gap:10px;
    }

    .zb-discovery-card{
        min-height:205px;
        padding:18px;
        border-radius:20px;
    }

    .zb-discovery-card .pill{
        font-size:10px;
    }

    .zb-discovery-card .big-icon{
        margin:14px 0 10px;
        font-size:28px;
    }

    .zb-discovery-card h3{
        font-size:20px;
    }

    .zb-discovery-card p{
        font-size:13px;
        line-height:1.55;
    }

    .zb-week-strip{
        gap:7px;
    }

    .zb-day{
        padding:9px;
    }

    .zb-day small{
        font-size:10px;
    }

    .zb-day b{
        font-size:12px;
    }

    .zb-day span{
        font-size:10px;
    }


    /* EVENTS */

    .zb-event-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .zb-event{
        padding:13px;
        border-radius:15px;
    }

    .zb-event-top{
        margin-bottom:9px;
    }

    .zb-event-top small{
        font-size:10px;
    }

    .event-badge{
        font-size:10px;
    }

    .zb-event h3{
        font-size:15px;
        min-height:38px;
        margin-bottom:7px;
    }

    .zb-event p{
        font-size:12px;
        margin-bottom:10px;
    }

    .zb-event i{
        font-size:11px;
    }


    /* CTA */

    .zb-cta{
        flex-direction:column;
        align-items:stretch;
        gap:17px;
        padding:24px 19px;
        border-radius:22px;
    }

    .zb-cta h2{
        font-size:24px;
    }

    .zb-cta p{
        font-size:13px;
    }

    .zb-cta > a{
        min-height:46px;
        width:100%;
        font-size:13px;
    }


    /* STATS */

    .zb-stats{
        width:calc(100% - 28px);
        margin-top:42px;
    }

    .zb-stats-in{
        grid-template-columns:1fr;
    }

    .zb-stat{
        padding:17px 18px;
    }

    .zb-stat + .zb-stat{
        border-left:0;
        border-top:1px solid var(--zb-line);
    }

    .zb-stat b{
        font-size:24px;
    }

    .zb-stat span{
        font-size:11px;
    }

    .zb-note{
        width:calc(100% - 28px);
        margin:10px auto 38px;
        font-size:10px;
    }


    /* ADS */

    .zb-home-ad{
        margin:28px auto;
        padding:0 12px;
    }

    .zb-home-ad-box,
    .zb-home-ad-wide .zb-home-ad-box{
        width:300px;
        height:250px;
    }


    /* FOOTER */

    .zb-footer{
        margin-top:48px;
    }

    .zb-footer-inner{
        width:calc(100% - 30px);
        margin:auto;
        padding:35px 0;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:24px 18px;
    }

    .zb-footer-brand{
        grid-column:1/-1;
    }

    .zb-footer-brand > a{
        font-size:25px;
    }

    .zb-footer-brand p{
        font-size:11px;
        line-height:1.65;
        margin-top:10px;
    }

    .zb-footer nav{
        gap:7px;
    }

    .zb-footer h2{
        font-size:11px;
        margin:0 0 5px;
    }

    .zb-footer nav a{
        font-size:10px;
    }

    .zb-footer-ad{
        width:calc(100% - 30px);
        min-height:20px;
        margin:0 auto 20px;
    }

    .zb-footer-bottom{
        padding:14px 10px;
        font-size:10px;
        line-height:1.5;
    }
}


/* =========================================================
   PETITS MOBILES
   ≤ 650px
   ========================================================= */

@media (max-width:650px){

    .zb-footer-inner{
        width:calc(100% - 30px);
        grid-template-columns:1fr 1fr;
        padding:35px 0;
    }

    .zb-footer-brand{
        grid-column:1/-1;
    }
}


/* =========================================================
   TRÈS PETITS MOBILES
   ≤ 420px
   ========================================================= */

@media (max-width:420px){

    .zb-hero h1{
        font-size:36px;
    }

    .zb-hero-lead{
        font-size:14px;
    }

    .zb-visual-map{
        height:250px;
        min-height:250px;
    }

    .zb-hero-visual{
        min-height:255px;
    }

    .zb-float{
        min-width:105px;
    }

    .zb-cat{
        min-height:105px;
        padding:10px;
    }

    .zb-cat .icon{
        width:34px;
        height:34px;
        font-size:15px;
    }

    .zb-cat b{
        font-size:12px;
    }

    .zb-cat small{
        font-size:10px;
    }

    .zb-event{
        padding:12px;
    }

    .zb-event h3{
        font-size:14px;
    }

    .zb-event p{
        font-size:12px;
    }
}


/* =========================================================
   CARTE — RESPONSIVE COMPLÉMENTAIRE
   ========================================================= */

@media (max-width:900px){

    .zb-france-map-wrap{
        inset:25px 18px 72px;
    }

    .zb-map-label.l2{
        right:10px;
    }

    .zb-map-label.l3{
        left:10px;
    }
}


/* =========================================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .zb-page *{
        transition:none !important;
        animation:none !important;
    }

    .zb-cat:hover,
    .zb-event:hover{
        transform:none;
    }

    .zb-map-dot,
    .zb-map-dot::after,
    .zb-map-focus,
    .zb-map-focus::before{
        animation:none !important;
    }
}
/* =========================================================
   ACCUEIL — CARTES CATÉGORIES DU HERO
   ========================================================= */

.zb-hero-chips{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    max-width:none;
}

.zb-hero-chip{
    min-width:0;
    min-height:132px;
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px 15px;
    border:0;
    border-radius:22px;
    color:#fff;
    overflow:hidden;
    box-shadow:0 14px 30px rgba(0,0,0,.16);
    transition:transform .18s ease,box-shadow .18s ease;
}

.zb-hero-chip::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.20),transparent 52%);
    pointer-events:none;
}

.zb-hero-chip:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 38px rgba(0,0,0,.22);
}

.zb-hero-chip-brocantes{background:linear-gradient(135deg,#ff9b35,#ff7f18)}
.zb-hero-chip-maisons{background:linear-gradient(135deg,#28a9f5,#1689df)}
.zb-hero-chip-collections{background:linear-gradient(135deg,#8068e5,#6049c5)}
.zb-hero-chip-dressings{background:linear-gradient(135deg,#f36aaa,#e74793)}
.zb-hero-chip-jouets{background:linear-gradient(135deg,#18b97a,#07985f)}

.zb-hero-chip-icon{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:17px;
    background:rgba(255,255,255,.20);
    font-size:29px;
    box-shadow:inset 0 1px rgba(255,255,255,.25);
}

.zb-hero-chip-main{
    position:relative;
    z-index:1;
    min-width:0;
    flex:1;
}

.zb-hero-chip-main b{
    display:block;
    font-size:14px;
    line-height:1.18;
    font-weight:950;
}

.zb-hero-chip-main small{
    display:inline-flex;
    align-items:center;
    width:max-content;
    margin-top:8px;
    margin-left:0;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:#18304f;
    font-size:10px;
    font-weight:950;
    line-height:1;
}

.zb-hero-chip-arrow{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    font-size:24px;
    font-weight:400;
    opacity:.95;
}

/* =========================================================
   ACCUEIL — CARTE MOBILE SOUS LE CONTENU
   ========================================================= */

.zb-mobile-map-section{
    display:none;
}

@media (max-width:768px){

    .zb-hero-in{
        padding:28px 0 30px;
    }

    .zb-hero-grid{
        gap:20px;
    }

    .zb-hero-lead{
        margin-bottom:20px;
    }

    .zb-hero-chips{
        width:100%;
        max-width:none;
        grid-template-columns:1fr;
        gap:11px;
    }

    .zb-hero-chip{
        min-height:108px;
        padding:15px 16px;
        border-radius:22px;
        gap:14px;
    }

    .zb-hero-chip-icon{
        width:54px;
        height:54px;
        border-radius:17px;
        font-size:30px;
    }

    .zb-hero-chip-main b{
        font-size:16px;
        line-height:1.18;
    }

    .zb-hero-chip-main small{
        margin-top:8px;
        padding:5px 10px;
        font-size:11px;
    }

    .zb-hero-chip-arrow{
        font-size:28px;
    }

    /* La carte ne consomme plus de place dans le hero sur mobile. */
    .zb-hero-visual{
        display:none !important;
    }

    .zb-mobile-map-section{
        display:block;
        padding:28px 14px 32px;
        background:#0d1832;
        color:#fff;
    }

    .zb-mobile-map-inner{
        width:min(520px,100%);
        margin:auto;
    }

    .zb-mobile-map-copy{
        margin-bottom:16px;
        text-align:left;
    }

    .zb-mobile-map-copy > span{
        display:inline-flex;
        padding:6px 9px;
        border:1px solid rgba(255,255,255,.14);
        border-radius:999px;
        background:rgba(255,255,255,.07);
        color:#8fe8ff;
        font-size:9px;
        font-weight:900;
        letter-spacing:.06em;
    }

    .zb-mobile-map-copy h2{
        margin:10px 0 7px;
        font-size:27px;
        line-height:1.02;
        letter-spacing:-.04em;
    }

    .zb-mobile-map-copy h2 em{
        color:#ffd34e;
        font-style:normal;
    }

    .zb-mobile-map-copy p{
        margin:0;
        color:rgba(255,255,255,.68);
        font-size:11px;
        line-height:1.5;
    }

    .zb-mobile-map-card{
        position:relative;
        min-height:285px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.13);
        border-radius:26px;
        background:
            radial-gradient(circle at 50% 48%,rgba(24,188,255,.16),transparent 44%),
            linear-gradient(145deg,rgba(28,83,126,.48),rgba(5,25,61,.80));
        box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 0 70px rgba(0,210,255,.08);
    }

    .zb-mobile-map-card .zb-france-map-wrap{
        inset:18px 8px 72px;
    }

    .zb-mobile-map-stat{
        position:absolute;
        z-index:10;
        right:12px;
        bottom:12px;
        left:12px;
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px 13px;
        border:1px solid rgba(255,255,255,.12);
        border-radius:15px;
        background:rgba(5,23,51,.78);
        backdrop-filter:blur(10px);
    }

    .zb-mobile-map-stat b{
        color:#fff;
        font-size:20px;
        line-height:1;
    }

    .zb-mobile-map-stat span{
        color:rgba(255,255,255,.70);
        font-size:10px;
    }
}

@media (max-width:420px){

    .zb-hero-in{
        width:calc(100% - 22px);
    }

    .zb-hero h1{
        font-size:36px;
    }

    .zb-hero-chip{
        min-height:102px;
        padding:13px;
    }

    .zb-hero-chip-icon{
        width:49px;
        height:49px;
        font-size:27px;
    }

    .zb-hero-chip-main b{
        font-size:14px;
    }

    .zb-hero-chip-main small{
        font-size:10px;
    }

    .zb-mobile-map-card{
        min-height:260px;
    }
}

/* Le style inline historique des compteurs reste prioritaire : on le neutralise
   uniquement pour les nouveaux compteurs des cartes du hero. */
.zb-hero-chip .zb-hero-chip-main small{
    margin-left:0 !important;
    padding:4px 9px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.92) !important;
    color:#18304f !important;
    font-size:10px !important;
    font-weight:950 !important;
    line-height:1 !important;
}

@media (max-width:768px){
    .zb-hero-chip .zb-hero-chip-main small{
        padding:5px 10px !important;
        font-size:11px !important;
    }
}

/* =========================================================
   ACCUEIL — LIENS RAPIDES + CATÉGORIES PLUS VISIBLES
   Renforcement visuel uniquement — HTML inchangé.
   PC / TABLETTE / MOBILE
   ========================================================= */

/* Les 3 accès rapides sous la recherche deviennent de vrais boutons visibles. */
.zb-quick{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    width:min(760px,100%);
    margin:16px auto 0;
}

.zb-quick a{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 16px;
    border:2px solid var(--zb-line);
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 22px rgba(8,21,47,.10);
    color:var(--zb-text);
    font-size:13px;
    font-weight:900;
    line-height:1.2;
    text-align:center;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.zb-quick a:nth-child(1){
    border-color:rgba(21,122,197,.35);
}

.zb-quick a:nth-child(2){
    border-color:rgba(255,139,43,.38);
}

.zb-quick a:nth-child(3){
    border-color:rgba(112,87,217,.38);
}

.zb-quick a:hover{
    transform:translateY(-3px);
    box-shadow:0 13px 30px rgba(8,21,47,.15);
}

/* Le bloc "Explorez par envie" est plus lisible et plus présent. */
.zb-section .zb-head{
    margin-bottom:26px;
}

.zb-section .zb-head h2{
    font-size:32px;
}

.zb-section .zb-head p{
    font-size:14px;
}

.zb-section .zb-head > a{
    font-size:13px;
    padding:9px 13px;
    border-radius:10px;
    background:#eaf5fc;
}

/* 5 catégories = 5 cartes sur une ligne sur grand écran. */
.zb-cats{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:16px;
}

.zb-cat{
    min-height:165px;
    padding:19px;
    border:2px solid var(--zb-line);
    border-radius:20px;
    box-shadow:0 10px 28px rgba(8,21,47,.09);
}

.zb-cat:nth-child(1){
    border-top:5px solid var(--zb-orange);
    background:linear-gradient(180deg,#fff9f3 0%,#fff 72%);
}

.zb-cat:nth-child(2){
    border-top:5px solid var(--zb-blue);
    background:linear-gradient(180deg,#f3faff 0%,#fff 72%);
}

.zb-cat:nth-child(3){
    border-top:5px solid var(--zb-purple);
    background:linear-gradient(180deg,#f8f6ff 0%,#fff 72%);
}

.zb-cat:nth-child(4){
    border-top:5px solid var(--zb-pink);
    background:linear-gradient(180deg,#fff5fa 0%,#fff 72%);
}

.zb-cat:nth-child(5){
    border-top:5px solid var(--zb-green);
    background:linear-gradient(180deg,#f3fcf8 0%,#fff 72%);
}

.zb-cat .icon{
    width:52px;
    height:52px;
    border-radius:15px;
    font-size:26px;
    box-shadow:0 5px 14px rgba(8,21,47,.08);
}

.zb-cat b{
    margin-top:10px;
    margin-bottom:4px;
    font-size:15px;
    line-height:1.2;
}

.zb-cat .zb-cat-count{
    font-size:11px;
    padding:4px 9px;
    margin:5px 0 4px;
}

.zb-cat small:not(.zb-cat-count){
    font-size:11px;
}

.zb-cat:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 35px rgba(8,21,47,.14);
}

/* Tablette : on garde des blocs grands et faciles à toucher. */
@media (min-width:769px) and (max-width:1199px){
    .zb-quick{
        width:min(760px,100%);
        gap:10px;
    }

    .zb-quick a{
        min-height:56px;
        font-size:12px;
    }

    .zb-section .zb-head h2{
        font-size:30px;
    }

    .zb-cats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:13px;
    }

    .zb-cat{
        min-height:155px;
    }
}

/* Mobile : visibilité maximale sans rendre la page lourde. */
@media (max-width:768px){
    .zb-quick{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        width:100%;
        margin-top:14px;
    }

    .zb-quick a{
        min-height:60px;
        padding:9px 6px;
        border-width:2px;
        border-radius:14px;
        font-size:11px;
        line-height:1.25;
    }

    .zb-section .zb-head{
        margin-bottom:18px;
    }

    .zb-section .zb-head h2{
        font-size:27px;
    }

    .zb-section .zb-head p{
        font-size:13px;
    }

    .zb-section .zb-head > a{
        font-size:12px;
        padding:8px 11px;
    }

    .zb-cats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .zb-cat{
        min-height:135px;
        padding:14px;
        border-radius:17px;
        border-top-width:4px;
    }

    .zb-cat .icon{
        width:44px;
        height:44px;
        border-radius:13px;
        font-size:22px;
    }

    .zb-cat b{
        margin-top:8px;
        font-size:13px;
        line-height:1.2;
    }

    .zb-cat .zb-cat-count{
        font-size:10px;
        padding:3px 7px;
        margin:4px 0 3px;
    }

    .zb-cat small:not(.zb-cat-count){
        font-size:10px;
    }
}

@media (max-width:420px){
    .zb-quick a{
        min-height:58px;
        font-size:10px;
        padding:8px 5px;
    }

    .zb-section .zb-head h2{
        font-size:25px;
    }

    .zb-cats{
        gap:8px;
    }

    .zb-cat{
        min-height:128px;
        padding:12px;
    }

    .zb-cat .icon{
        width:40px;
        height:40px;
        font-size:20px;
    }

    .zb-cat b{
        font-size:12px;
    }
}