/* MECS Services Showcase v2.0 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;600;700;900&display=swap');

:root{
    --mecs-white:#fff;--mecs-ice:#E1F6F6;--mecs-dark:#212121;--mecs-teal:#70c9bb;--mecs-teal-dark:#5ab5a7;
    --mecs-teal-glow:rgba(112,201,187,.20);--mecs-teal-subtle:rgba(112,201,187,.08);
    --mecs-border:rgba(112,201,187,.22);--mecs-border-light:rgba(33,33,33,.08);
    --mecs-text-soft:#5a5a5a;--mecs-text-muted:#8a8a8a;--mecs-bg-ice:#E1F6F6;
    --mecs-font-title:'Noto Sans',sans-serif;--mecs-font-body:'Montserrat',sans-serif;
    --mecs-radius:16px;--mecs-radius-sm:10px;
    --mecs-transition:.4s cubic-bezier(.25,.46,.45,.94);--mecs-transition-fast:.25s cubic-bezier(.25,.46,.45,.94);
    --mecs-shadow-sm:0 2px 8px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);
    --mecs-shadow-md:0 8px 30px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
    --mecs-shadow-lg:0 20px 50px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04);
    --mecs-shadow-hover:0 20px 50px rgba(112,201,187,.12),0 8px 24px rgba(0,0,0,.06);
}
.mecs-showcase *,.mecs-showcase *::before,.mecs-showcase *::after{box-sizing:border-box;margin:0;padding:0}
.mecs-showcase{font-family:var(--mecs-font-body);color:var(--mecs-dark);background:#fff;position:relative;overflow:hidden;padding:80px 0}
.mecs-showcase::before{content:'';position:absolute;top:-180px;right:-120px;width:500px;height:500px;background:radial-gradient(circle,rgba(225,246,246,.5) 0%,transparent 70%);pointer-events:none;z-index:0}
.mecs-showcase::after{content:'';position:absolute;bottom:-120px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(225,246,246,.35) 0%,transparent 70%);pointer-events:none;z-index:0}

/* Header */
.mecs-header{text-align:center;margin-bottom:60px;position:relative;z-index:1;padding:0 24px}
.mecs-main-title{font-family:var(--mecs-font-title);font-size:clamp(28px,5vw,48px);font-weight:700;letter-spacing:-.02em;color:var(--mecs-dark);margin-bottom:16px}
.mecs-title-line{width:60px;height:3px;background:var(--mecs-teal);margin:0 auto;border-radius:3px}

/* ═══ Cards Grid — equal heights ═══ */
.mecs-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 clamp(20px,4vw,60px);position:relative;z-index:1;max-width:1400px;margin:0 auto;align-items:stretch}
.mecs-card{position:relative;border-radius:var(--mecs-radius);cursor:pointer;outline:none;transition:var(--mecs-transition);animation:mecsCardIn .6s cubic-bezier(.16,1,.3,1) both;display:flex;flex-direction:column}
.mecs-card:nth-child(1){animation-delay:.05s}.mecs-card:nth-child(2){animation-delay:.1s}.mecs-card:nth-child(3){animation-delay:.15s}.mecs-card:nth-child(4){animation-delay:.2s}
.mecs-card:nth-child(5){animation-delay:.25s}.mecs-card:nth-child(6){animation-delay:.3s}.mecs-card:nth-child(7){animation-delay:.35s}.mecs-card:nth-child(8){animation-delay:.4s}
@keyframes mecsCardIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.mecs-card.mecs-hidden{display:none}
.mecs-card-inner{position:relative;z-index:1;background:#fff;border:1px solid var(--mecs-border-light);border-radius:var(--mecs-radius);padding:32px 24px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;transition:var(--mecs-transition);box-shadow:var(--mecs-shadow-sm);overflow:hidden}
.mecs-card-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mecs-teal),var(--mecs-bg-ice));opacity:0;transition:var(--mecs-transition)}
.mecs-card:hover .mecs-card-inner{border-color:var(--mecs-border);transform:translateY(-6px);box-shadow:var(--mecs-shadow-hover)}
.mecs-card:hover .mecs-card-inner::before{opacity:1}
.mecs-card.mecs-active .mecs-card-inner{border-color:var(--mecs-teal);background:var(--mecs-bg-ice);box-shadow:0 0 0 3px var(--mecs-teal-glow),var(--mecs-shadow-md)}
.mecs-card.mecs-active .mecs-card-inner::before{opacity:1}

/* Card Icon */
.mecs-card-icon{width:72px;height:72px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.mecs-card-icon::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,var(--mecs-teal-glow) 0%,transparent 70%);opacity:0;transition:var(--mecs-transition)}
.mecs-card:hover .mecs-card-icon::after{opacity:1}
.mecs-png-icon{width:56px;height:56px;object-fit:contain;transition:var(--mecs-transition)}
.mecs-card:hover .mecs-png-icon{transform:scale(1.1)}
.mecs-icon-placeholder{width:56px;height:56px;color:var(--mecs-teal)}.mecs-icon-placeholder svg{width:100%;height:100%}

/* Card Content */
.mecs-card-content{flex:1;display:flex;flex-direction:column;gap:6px}
.mecs-card-title{font-family:var(--mecs-font-title);font-size:17px;font-weight:600;color:var(--mecs-dark);letter-spacing:-.01em;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.mecs-card-subtitle{font-family:var(--mecs-font-body);font-size:12px;font-weight:500;color:var(--mecs-teal-dark);text-transform:uppercase;letter-spacing:.08em}
.mecs-card-desc{font-size:13px;line-height:1.5;color:var(--mecs-text-muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mecs-card-footer{margin-top:auto;padding-top:16px;width:100%}
.mecs-card-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mecs-teal);transition:var(--mecs-transition-fast)}
.mecs-card-cta svg{transition:var(--mecs-transition-fast)}
.mecs-card:hover .mecs-card-cta svg{transform:translateX(4px)}

/* ═══ Map ═══ */
.mecs-map-section{margin-top:60px;padding:0 clamp(20px,4vw,60px);max-width:1400px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.mecs-map-header{margin-bottom:20px}
.mecs-map-title{font-family:var(--mecs-font-title);font-size:20px;font-weight:600;color:var(--mecs-dark);display:flex;align-items:center;gap:10px}
.mecs-map-title svg{color:var(--mecs-teal)}
.mecs-map-container{border-radius:var(--mecs-radius);overflow:hidden;border:1px solid var(--mecs-border-light);box-shadow:var(--mecs-shadow-lg)}
.mecs-map-container .leaflet-control-zoom{border:none!important;box-shadow:var(--mecs-shadow-md)!important}
.mecs-map-container .leaflet-control-zoom a{background:#fff!important;color:var(--mecs-dark)!important;border:1px solid var(--mecs-border-light)!important;width:36px!important;height:36px!important;line-height:36px!important;font-size:16px!important}
.mecs-map-container .leaflet-control-zoom a:hover{background:var(--mecs-teal)!important;color:#fff!important}

/* Map popup */
.mecs-map-popup .leaflet-popup-content-wrapper{background:#fff;color:var(--mecs-dark);border:1px solid var(--mecs-border-light);border-radius:var(--mecs-radius-sm);box-shadow:var(--mecs-shadow-lg);padding:0}
.mecs-map-popup .leaflet-popup-content{margin:0;font-family:var(--mecs-font-body)}
.mecs-map-popup .leaflet-popup-tip{background:#fff;border:1px solid var(--mecs-border-light)}
.mecs-map-popup .leaflet-popup-close-button{color:var(--mecs-text-muted)!important;font-size:20px!important;top:8px!important;right:10px!important}
.mecs-popup-inner{padding:18px 20px;min-width:200px}
.mecs-popup-title{font-family:var(--mecs-font-title);font-size:16px;font-weight:600;margin-bottom:4px;color:var(--mecs-dark)}
.mecs-popup-subtitle{font-size:12px;color:var(--mecs-teal-dark);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.mecs-popup-address{font-size:13px;color:var(--mecs-text-muted);margin-bottom:12px;display:flex;align-items:flex-start;gap:6px}
.mecs-popup-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--mecs-teal);color:#fff;border:none;border-radius:100px;font-family:var(--mecs-font-body);font-size:13px;font-weight:600;cursor:pointer;transition:var(--mecs-transition-fast);text-decoration:none}
.mecs-popup-cta:hover{background:var(--mecs-teal-dark);transform:scale(1.03)}

/* ═══ Marker styles ═══ */
.mecs-custom-marker{background:transparent!important;border:none!important}
.mecs-marker-pin{width:36px;height:36px;background:#70c9bb;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(112,201,187,.35);transition:all .3s ease}
.mecs-marker-pin svg{transform:rotate(45deg)}
.mecs-marker-pin.active{width:44px;height:44px;background:var(--mecs-dark);box-shadow:0 4px 24px rgba(33,33,33,.3),0 0 0 4px var(--mecs-teal-glow)}
.mecs-marker-pin.active svg{stroke:#70c9bb}

/* Marker hover bounce */
.mecs-marker-hover .mecs-marker-pin{animation:mecsBounce .6s ease}
.mecs-png-map-marker{transition:all .3s ease;filter:drop-shadow(0 3px 8px rgba(112,201,187,.3))}
.mecs-png-map-marker:hover{filter:drop-shadow(0 4px 16px rgba(112,201,187,.5));transform:scale(1.15)}
.mecs-png-marker-active{filter:drop-shadow(0 4px 16px rgba(33,33,33,.4)) drop-shadow(0 0 8px rgba(112,201,187,.5))!important}
@keyframes mecsBounce{0%{transform:rotate(-45deg) translateY(0)}30%{transform:rotate(-45deg) translateY(-10px)}50%{transform:rotate(-45deg) translateY(0)}70%{transform:rotate(-45deg) translateY(-5px)}100%{transform:rotate(-45deg) translateY(0)}}

/* ═══ Cluster styles ═══ */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(112,201,187,.25)!important}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--mecs-teal)!important;color:#fff!important;font-family:var(--mecs-font-title)!important;font-weight:700!important;font-size:14px!important;width:36px!important;height:36px!important;line-height:36px!important;border-radius:50%!important;margin-left:6px!important;margin-top:6px!important;text-align:center!important;box-shadow:0 4px 12px rgba(112,201,187,.3)!important}
.marker-cluster{transition:all .3s ease}
.marker-cluster:hover{transform:scale(1.1)}

/* ═══ Detail Overlay — desktop split layout ═══ */
.mecs-detail-overlay{position:fixed;inset:0;z-index:999999;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;display:flex;background:rgba(33,33,33,.15)}
.mecs-detail-overlay.mecs-open{opacity:1;visibility:visible}

/* Left: map view (desktop only) */
.mecs-detail-mapview{flex:1;display:none;position:relative;background:var(--mecs-bg-ice)}
.mecs-detail-mapview .leaflet-container{height:100%!important;width:100%!important}

/* Right: detail panel */
.mecs-detail-panel{width:min(580px,100vw);height:100%;background:#fff;border-left:1px solid var(--mecs-border-light);overflow-y:auto;transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);box-shadow:-12px 0 50px rgba(0,0,0,.1);flex-shrink:0;position:relative}
.mecs-detail-overlay.mecs-open .mecs-detail-panel{transform:translateX(0)}
.mecs-detail-panel::-webkit-scrollbar{width:4px}.mecs-detail-panel::-webkit-scrollbar-track{background:transparent}.mecs-detail-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}
.mecs-detail-close{position:sticky;top:16px;float:right;margin:16px 16px 0 0;z-index:10;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--mecs-bg-ice);border:1px solid var(--mecs-border-light);border-radius:50%;color:var(--mecs-dark);cursor:pointer;transition:var(--mecs-transition-fast)}
.mecs-detail-close:hover{background:var(--mecs-teal);color:#fff;transform:rotate(90deg)}
.mecs-detail-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px 24px 12px;clear:both}
.mecs-detail-prev,.mecs-detail-next{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--mecs-bg-ice);border:1px solid var(--mecs-border-light);border-radius:50%;color:var(--mecs-dark);cursor:pointer;transition:var(--mecs-transition-fast)}
.mecs-detail-prev:hover,.mecs-detail-next:hover{background:var(--mecs-teal);color:#fff;border-color:var(--mecs-teal)}
.mecs-detail-counter{font-size:13px;font-weight:500;color:var(--mecs-text-muted);letter-spacing:.05em;min-width:50px;text-align:center}

/* Carousel */
.mecs-detail-carousel{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--mecs-bg-ice)}
.mecs-detail-carousel.mecs-no-images{display:none}
.mecs-carousel-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.mecs-carousel-slide{min-width:100%;height:100%}.mecs-carousel-slide img{width:100%;height:100%;object-fit:cover}
.mecs-carousel-prev,.mecs-carousel-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid var(--mecs-border-light);border-radius:50%;color:var(--mecs-dark);cursor:pointer;transition:var(--mecs-transition-fast);z-index:5}
.mecs-carousel-prev{left:12px}.mecs-carousel-next{right:12px}
.mecs-carousel-prev:hover,.mecs-carousel-next:hover{background:var(--mecs-teal);color:#fff}
.mecs-carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.mecs-carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(33,33,33,.25);cursor:pointer;transition:var(--mecs-transition-fast)}
.mecs-carousel-dot.active{background:var(--mecs-teal);width:24px;border-radius:4px}

/* Detail body */
.mecs-detail-body{padding:32px 32px 48px}
.mecs-detail-header-info{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.mecs-detail-icon{width:56px;height:56px;min-width:56px;display:flex;align-items:center;justify-content:center;background:var(--mecs-bg-ice);border:1px solid var(--mecs-border);border-radius:14px}
.mecs-detail-icon img{width:36px;height:36px;object-fit:contain}
.mecs-detail-title{font-family:var(--mecs-font-title);font-size:clamp(22px,4vw,28px);font-weight:700;color:var(--mecs-dark);letter-spacing:-.02em;line-height:1.2}
.mecs-detail-subtitle{font-family:var(--mecs-font-body);font-size:13px;font-weight:500;color:var(--mecs-teal-dark);text-transform:uppercase;letter-spacing:.08em}
.mecs-detail-text{font-family:var(--mecs-font-body);font-size:15px;line-height:1.75;color:var(--mecs-text-soft)}
.mecs-detail-text h2,.mecs-detail-text h3{font-family:var(--mecs-font-title);font-size:18px;font-weight:600;color:var(--mecs-dark);margin:24px 0 10px}
.mecs-detail-text h2:first-child,.mecs-detail-text h3:first-child{margin-top:0}
.mecs-detail-text p{margin-bottom:12px}
.mecs-detail-text ul,.mecs-detail-text ol{padding-left:20px;margin-bottom:12px}

/* Address blocks */
.mecs-detail-addresses{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.mecs-addr-block{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--mecs-bg-ice);border:1px solid var(--mecs-border);border-radius:var(--mecs-radius-sm)}
.mecs-addr-block .mecs-address-icon{color:var(--mecs-teal);min-width:18px;margin-top:1px}
.mecs-addr-block span{font-size:14px;color:var(--mecs-text-soft);line-height:1.5}
.mecs-addr-label{font-size:11px;font-weight:600;color:var(--mecs-teal-dark);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:2px}

/* ═══ Documents à télécharger ═══ */
.mecs-detail-files{margin-top:28px;padding-top:24px;border-top:1px solid var(--mecs-border)}
.mecs-files-header{display:flex;align-items:center;gap:8px;font-family:var(--mecs-font-title);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mecs-teal-dark);margin-bottom:14px}
.mecs-files-header svg{color:var(--mecs-teal);flex-shrink:0}
.mecs-files-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mecs-file-item{}
.mecs-file-link{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--mecs-teal-subtle);border:1px solid var(--mecs-border);border-radius:var(--mecs-radius-sm);text-decoration:none;color:inherit;transition:background var(--mecs-transition-fast),border-color var(--mecs-transition-fast),transform var(--mecs-transition-fast)}
.mecs-file-link:hover{background:rgba(112,201,187,.18);border-color:var(--mecs-teal);transform:translateX(3px)}
.mecs-file-icon{font-size:20px;flex-shrink:0;line-height:1}
.mecs-file-label{flex:1;font-size:14px;font-weight:500;color:var(--mecs-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.mecs-file-dl{color:var(--mecs-teal);flex-shrink:0;display:flex;align-items:center}

/* ═══ Desktop: show map in overlay ═══ */
@media(min-width:821px){
    .mecs-detail-mapview{display:block}
    .mecs-detail-overlay{background:none}
}

/* ═══ Responsive ═══ */
@media(max-width:1100px){.mecs-cards-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){
    .mecs-showcase{padding:50px 0}
    .mecs-cards-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .mecs-header{margin-bottom:40px}
    .mecs-card-inner{padding:24px 18px 20px}
    .mecs-card-icon{width:60px;height:60px;margin-bottom:14px}
    .mecs-png-icon{width:44px;height:44px}
    .mecs-detail-overlay{background:rgba(33,33,33,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .mecs-detail-panel{width:100vw;border-left:none}
    .mecs-detail-body{padding:24px 20px 40px}
    .mecs-detail-mapview{display:none!important}
    .mecs-file-label{font-size:13px}
}
@media(max-width:520px){
    .mecs-showcase{padding:36px 0}
    .mecs-cards-grid{grid-template-columns:1fr 1fr;gap:10px;padding:0 14px}
    .mecs-card-inner{padding:20px 14px 16px}
    .mecs-card-title{font-size:14px;min-height:2.4em}
    .mecs-card-desc{display:none}
    .mecs-card-subtitle{font-size:10px}
    .mecs-map-section{padding:0 14px;margin-top:40px}
    .mecs-detail-carousel{aspect-ratio:4/3}
    .mecs-detail-body{padding:20px 16px 36px}
    .mecs-file-link{padding:11px 12px;gap:10px}
    .mecs-file-icon{font-size:18px}
}
@media print{.mecs-detail-overlay,.mecs-map-section{display:none}}