/* =========================================================
   STYLE.CSS — guepe-oise.fr (NOIR + ROUGE)
   Corrige index : carte / FAQ / formulaire
   (CSS only — pas de modif HTML)
   ========================================================= */

/* -------------------- RESET -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background:#070A0D; }
body { margin:0; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
iframe { max-width:100%; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid rgba(var(--accent-rgb), .75);
  outline-offset: 2px;
  border-radius: 10px;
}

/* -------------------- TOKENS -------------------- */
:root{
  --bg:#070A0D;
  --bg-2:#0B1117;

  --text:#F3F6FB;
  --muted:rgba(243,246,251,.72);

  --accent:#FF3B30;
  --accent-2:#FF7A18;
  --accent-rgb:255,59,48;
  --accent2-rgb:255,122,24;

  --border:rgba(255,255,255,.12);
  --border-2:rgba(255,255,255,.18);
  --shadow:0 12px 40px rgba(0,0,0,.55);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;

  --btn-border-radius-pill:999px;
  --container:1120px;

  /* compat inline HTML (si tu en utilises) */
  --border-radius-md: var(--r-md);
  --border-radius-pill: var(--btn-border-radius-pill);
  --color-secondary: var(--accent);
  --color-primary-dark: var(--accent);
  --color-surface: rgba(255,255,255,.06);

  /* Logo header (CSS dans /css/ donc ../img/) */
  --header-logo-bg: url("../img/logo.jpg");
}

/* -------------------- BACKGROUND GLOBAL (SANS LOGO) -------------------- */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;

  background-image:
    linear-gradient(180deg, rgba(7,10,13,.82), rgba(11,17,23,.92)),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22110%22%20viewBox%3D%220%200%20180%20110%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.12%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M19%2C8.9%20L8%2C28%20L-14%2C28%20L-25%2C8.9%20L-14%2C-10.1%20L8%2C-10.1%20Z%22/%3E%3Cpath%20d%3D%22M52%2C28%20L41%2C47.1%20L19%2C47.1%20L8%2C28%20L19%2C8.9%20L41%2C8.9%20Z%22/%3E%3Cpath%20d%3D%22M85%2C8.9%20L74%2C28%20L52%2C28%20L41%2C8.9%20L52%2C-10.1%20L74%2C-10.1%20Z%22/%3E%3Cpath%20d%3D%22M118%2C28%20L107%2C47.1%20L85%2C47.1%20L74%2C28%20L85%2C8.9%20L107%2C8.9%20Z%22/%3E%3Cpath%20d%3D%22M151%2C8.9%20L140%2C28%20L118%2C28%20L107%2C8.9%20L118%2C-10.1%20L140%2C-10.1%20Z%22/%3E%3Cpath%20d%3D%22M184%2C28%20L173%2C47.1%20L151%2C47.1%20L140%2C28%20L151%2C8.9%20L173%2C8.9%20Z%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 600px at 20% -10%, rgba(var(--accent-rgb), .18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(var(--accent2-rgb), .12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));

  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 20% -10%, 90% 10%, 0 0;
  background-size: cover, 340px 210px, 1100px 600px, 900px 500px, cover;
}

p{ color: rgba(243,246,251,.78); }

/* -------------------- CONTAINER -------------------- */
.container{
  width: min(var(--container), calc(100% - 2rem));
  margin-inline: auto;
}

/* -------------------- HEADER -------------------- */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,10,13,.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header__container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .9rem 0;
}

/* LOGO du menu : on force l’image car l’ancre est vide */
.header .logo{
  display:block !important;
  width: 190px !important;
  height: 52px !important;
  background: var(--header-logo-bg) center / contain no-repeat !important;
  background-color: rgba(7,10,13,.28) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

.nav__list{
  list-style:none;
  display:flex;
  gap: .3rem;
  padding:0;
  margin:0;
}
.nav__link{
  display:inline-flex;
  align-items:center;
  padding: .55rem .85rem;
  border-radius: 12px;
  color: rgba(243,246,251,.88);
  text-decoration:none;
  transition: .2s ease;
  border: 1px solid transparent;
}
.nav__link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* -------------------- BUTTONS -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: .85rem 1.05rem;
  border-radius: var(--btn-border-radius-pill);
  font-weight: 800;
  text-decoration:none;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: .18s ease;
  user-select:none;
  white-space:nowrap;
}
.btn--primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  color: #101318 !important;
  box-shadow: 0 14px 36px rgba(var(--accent-rgb), .22);
}
.btn--primary:hover{ transform: translateY(-1px); }
.btn--secondary{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* -------------------- HERO -------------------- */
.hero{
  padding: 5.2rem 0 3.5rem;
  position: relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 56px);
  opacity:.35;
  pointer-events:none;
}
.hero__container{ position:relative; text-align:center; }
.hero__title{
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.05;
  font-size: clamp(2.1rem, 4vw, 3.7rem);
  margin: 0 0 1rem;
}
.text-highlight{
  color: #101318 !important;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  padding: .15rem .55rem;
  border-radius: 12px;
}
.hero__subtitle{
  max-width: 760px;
  margin: 0 auto 1.6rem;
  color: rgba(243,246,251,.78) !important;
  font-size: 1.05rem;
}
.hero__actions{
  display:flex;
  justify-content:center;
  gap: .8rem;
  flex-wrap:wrap;
  margin-top: 1.1rem;
}

/* -------------------- BREADCRUMBS -------------------- */
.pj-breadcrumbs{
  background: rgba(255,255,255,.06) !important;
  color: rgba(243,246,251,.76) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(8px) !important;
}
.pj-breadcrumbs a{ text-decoration:none !important; }
.pj-breadcrumbs a:hover{
  text-decoration: underline !important;
  text-decoration-color: rgba(var(--accent-rgb), .9) !important;
}

/* =========================================================
   CARDS (IMPORTANT)
   -> On style .pj-card MAIS on respecte les "pj-card" volontairement
      transparents (FAQ / sections plain)
========================================================= */
.pj-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 2.1rem;
  margin: 0 0 1.8rem;
  position: relative;
}

.pj-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(600px 220px at 15% 0%, rgba(var(--accent-rgb), .14), transparent 60%);
  opacity:.9;
}

.pj-card > *{ position:relative; }

/* Si le HTML force une card "plain" (background transparent / border none / box-shadow none) :
   ON NE CASSE PAS — on laisse tel quel */
.pj-card[style*="background: transparent" i],
.pj-card[style*="box-shadow: none" i],
.pj-card[style*="border: none" i]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.pj-card[style*="background: transparent" i]::before,
.pj-card[style*="box-shadow: none" i]::before,
.pj-card[style*="border: none" i]::before{
  content:none !important;
}

.pj-card h2{
  margin: 0 0 1.2rem;
  font-weight: 900;
  letter-spacing: -.5px;
  font-size: 1.55rem;
  color: var(--text);
}

/* Map/iframe dans une card : propre (utile pour la page index si tu as une carte google) */
.pj-card iframe{
  width: 100%;
  border: 0;
  border-radius: var(--r-lg);
  min-height: 340px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
}

/* -------------------- CONTACT / HORAIRES -------------------- */
.pj-contact-info{ display:flex; flex-direction:column; gap: 1rem; }
.pj-contact-row{
  display:flex;
  gap: .9rem;
  align-items:flex-start;
  padding: 1rem;
  border-radius: var(--r-md);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
.pj-contact-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid rgba(var(--accent-rgb), .28);
}
.pj-hours-list ul{
  list-style:none;
  padding:0; margin:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem .9rem;
}
.pj-hours-list li{
  padding: .65rem .75rem;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(243,246,251,.80);
}

/* -------------------- SERVICES -------------------- */
.services__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.services__grid > div{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  transition: .18s ease;
}
.services__grid > div:hover{
  border-color: rgba(var(--accent-rgb), .38);
  transform: translateY(-2px);
}
.services__grid > div > span{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(var(--accent-rgb), .14);
  border: 1px solid rgba(var(--accent-rgb), .26);
}

/* =========================================================
   "L’Expertise guepe-oise.fr" (intervention-block)
   - Image à droite
   - Si c’est une CARTE -> contain (pas rognée)
========================================================= */
.pj-card.intervention-block .intervention-content{
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: 1.6rem !important;
  align-items: start;
}
.pj-card.intervention-block .intervention-text-wrapper{ order: 1; min-width:0; }
.pj-card.intervention-block .intervention-img-wrapper{
  order: 2;
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  position: relative !important;
  top: auto !important;
}

/* Base image (photo) */
.pj-card.intervention-block .intervention-img-wrapper img{
  width: 100% !important;
  aspect-ratio: 4 / 3;
  height: auto !important;
  max-height: 360px;
  object-fit: cover !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(var(--accent-rgb), .40) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* Spécial CARTE : pas de crop, fond + padding */
.pj-card.intervention-block .intervention-img-wrapper img[alt*="carte" i],
.pj-card.intervention-block .intervention-img-wrapper img[src*="carte" i],
.pj-card.intervention-block .intervention-img-wrapper img[alt*="map" i],
.pj-card.intervention-block .intervention-img-wrapper img[src*="map" i]{
  object-fit: contain !important;
  background: rgba(0,0,0,.22);
  padding: .75rem;
}

/* -------------------- GALERIE -------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.gallery-item{
  overflow:hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: .2s ease;
}
.gallery-item img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: .35s ease;
}
.gallery-item:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .38);
}
.gallery-item:hover img{ transform: scale(1.06); }

/* -------------------- FAQ (ne pas casser la section) -------------------- */
.faq-grid-styled{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 1rem !important;
}
.faq-card-bubble{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 1.2rem;
}
.faq-bubble-icon{
  width: 38px; height: 38px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid rgba(var(--accent-rgb), .28);
  font-weight: 900;
  margin-bottom: .8rem;
}
.faq-question-text{ margin: 0 0 .55rem; font-size: 1.05rem; line-height: 1.25; }
.faq-answer-text{ margin: 0; color: rgba(243,246,251,.74); }
.faq-answer-text strong{ color: rgba(var(--accent-rgb), .92); }

/* -------------------- CONTACT FORM (stable) -------------------- */
#contact{ scroll-margin-top: 96px; }
.contact-form-wrapper{
  width: min(920px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
}

.contact__form{
  display: grid;
  gap: 1rem;
}
.contact__form input,
.contact__form textarea,
.contact__form button{
  box-sizing: border-box;
  max-width: 100%;
}
.contact__form input,
.contact__form textarea{
  width:100%;
  background: rgba(0,0,0,.28) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  padding: .85rem .95rem !important;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder{ color: rgba(243,246,251,.45); }

.contact__form input:focus,
.contact__form textarea:focus{
  border-color: rgba(var(--accent-rgb), .60) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14);
}

.contact__form button[type="submit"]{
  width: 100%;
  border: 0 !important;
  border-radius: var(--btn-border-radius-pill) !important;
  font-weight: 900 !important;
  cursor: pointer;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  color: #101318 !important;
  box-shadow: 0 18px 45px rgba(var(--accent-rgb), .22);
}
.contact__form button[type="submit"]:hover{ transform: translateY(-1px); }

/* La grille inline (Nom/Email) : on la respecte + on la rend responsive */
.contact__form > div[style*="grid-template-columns" i]{
  gap: 1rem !important;
}

/* -------------------- ZONE D’INTERVENTION : blocs + chips -------------------- */
.intervention-zone.section{
  padding: 2.2rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 2rem !important;
}
.intervention-zone.section .section__subtitle{
  color: rgba(243,246,251,.76) !important;
  max-width: 75ch;
}
.intervention-zone.section .city-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.intervention-zone.section .city-card{
  background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.1rem 1.15rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}
.intervention-zone.section .city-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.intervention-zone.section .city-card__title{
  margin: 0 0 .75rem !important;
  font-weight: 900 !important;
  font-size: 1.02rem !important;
  display:flex; align-items:center; gap:.55rem;
}
.intervention-zone.section .city-card__title::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(var(--accent-rgb), .95);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14);
}
.intervention-zone.section .city-list{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
}
.intervention-zone.section .city-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .28rem .52rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(243,246,251,.86);
  text-decoration: none;
  font-size: .84rem;
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
  transition: .18s ease;
}
.intervention-zone.section .city-link:hover{
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .12);
  transform: translateY(-1px);
}

/* -------------------- FOOTER (réparé) -------------------- */
.site-footer{
  background: rgba(0,0,0,.35) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding: 3rem 0 2rem !important;
}
.footer-grid{
  width: min(var(--container), calc(100% - 2rem)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr !important;
  gap: 1.4rem !important;
  align-items: start !important;
}
.footer-links{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: .55rem !important;
}
.footer-links a{
  color: rgba(243,246,251,.78) !important;
  text-decoration: none !important;
}
.footer-links a:hover{
  text-decoration: underline !important;
  text-decoration-color: rgba(var(--accent-rgb), .9) !important;
}
.footer-bottom{
  width: min(var(--container), calc(100% - 2rem)) !important;
  margin: 1.6rem auto 0 !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(243,246,251,.60) !important;
  display:flex !important;
  justify-content: space-between !important;
  align-items:center !important;
  gap: .75rem !important;
  flex-wrap: wrap !important;
}
.footer-bottom p{ margin:0 !important; }

/* -------------------- STICKY MOBILE CTA -------------------- */
.sticky-mobile-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: .75rem .9rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(7,10,13,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
  display:none;
  gap: .7rem;
}
.sticky-mobile-cta .btn{ flex: 1; }

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 980px){
  .pj-hours-list ul{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr !important; }

  /* Expertise : image repasse sous texte */
  .pj-card.intervention-block .intervention-content{
    grid-template-columns: 1fr;
  }
  .pj-card.intervention-block .intervention-img-wrapper img{
    max-height: 300px;
  }
}
@media (max-width: 760px){
  .nav{ display:none; }
  .sticky-mobile-cta{ display:flex; }

  /* Contact : Nom/Email en 1 colonne */
  .contact__form > div[style*="grid-template-columns" i]{
    grid-template-columns: 1fr !important;
  }

  /* évite que le footer soit caché par le CTA */
  .site-footer{ padding-bottom: calc(2rem + 84px) !important; }
}

/* -------------------- ACCESSIBILITY -------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* =========================================================
   FIX INDEX — "Nos Zones d'Intervention" (id="zones")
   Carte à droite + secteurs en grille + chips villes
   ========================================================= */

#zones.section.intervention-zone{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 22px !important;
}

/* Layout 2 colonnes : secteurs à gauche, carte à droite */
#zones .intervention__content{
  display: grid !important;
  grid-template-columns: 1fr minmax(300px, 420px) !important;
  gap: 1.25rem !important;
  align-items: start !important;
}

/* Place explicitement les blocs */
#zones .sectors-grid{
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  min-width: 0;
}

#zones .intervention__map{
  grid-column: 2;
  position: sticky;
  top: 92px; /* sous le header sticky */
  align-self: start;

  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  padding: .75rem;
}

/* La carte ne doit PAS être rognée */
#zones .intervention__map .map-image{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}

/* Bloc secteur (carte UI) */
#zones .sector-block{
  background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  padding: 1.1rem 1.1rem 1.15rem;
  position: relative;
  overflow: hidden;
}

#zones .sector-block::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

#zones .sector-title{
  margin: 0 0 .55rem;
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 1.05rem;
}

#zones .sector-center{
  margin: 0 0 .75rem;
  color: rgba(243,246,251,.74);
}

/* Villes -> chips compactes */
#zones .sector-cities{
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

#zones .sector-cities .city-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .28rem .52rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(243,246,251,.86);
  text-decoration: none;
  font-size: .84rem;
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
  transition: .18s ease;
}

#zones .sector-cities .city-link:hover{
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .12);
  transform: translateY(-1px);
}

/* Responsive : la carte passe au-dessus ou dessous (ici: au-dessus), pleine largeur */
@media (max-width: 980px){
  #zones .intervention__content{
    grid-template-columns: 1fr !important;
  }
  #zones .intervention__map{
    grid-column: 1;
    position: relative;
    top: auto;
    order: 0;
  }
  #zones .sectors-grid{
    grid-column: 1;
  }
}