/*
 * Feuille de styles principale pour CL’OSE RÉPARATIONS
 * VERSION NETTOYÉE / DÉDUPLIQUÉE / SANS CONFLIT PAGES PRESTATIONS vs PAGES LÉGALES
 */

/* =================================================
   VARIABLES
================================================= */
:root{
  --color-primary:#2e4980;
  --color-accent:#f47e20;
  --color-bg:#f5f5f5;
  --color-light:rgba(255,255,255,1);
  --color-dark-overlay:rgba(46,73,128,.70);
  --color-button-hover:#2e4980;

  --logo-header-height:65px;
  --logo-hero-width:250px;

  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.12);

  --icon-color: var(--color-accent);
}

/* =================================================
   RESET / BASE
================================================= */
*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-primary);
  background-color: transparent; /* laisser voir le diaporama */
  line-height:1.6;
}

a{
  color: var(--color-primary);
  text-decoration:none;
  transition: color .2s ease;
}
a:hover{ color: var(--color-accent); }

/* =================================================
   CONTAINER
================================================= */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

/* =================================================
   HEADER / NAV
================================================= */
.site-header{
  background-color: var(--color-light);
  border-bottom: 3px solid var(--color-accent);
  position: fixed;
  width:100%;
  top:0;
  z-index:1000;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.logo-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative; /* repère pour dropdown */
}

.logo-img{
  height: var(--logo-header-height);
  width:auto;
}

/* Burger */
.nav-toggle{
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
}
.nav-toggle span{
  width:24px;
  height:3px;
  background-color: var(--color-primary);
  border-radius:2px;
}

/* Dropdown menu (toutes tailles) */
.site-nav{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  left:auto;
  transform:none;

  width:260px;
  max-width:90vw;

  background-color: var(--color-light);
  border: 1px solid var(--color-accent);
  border-top:none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  z-index:2000;
}

.site-header.nav-open .site-nav{ display:block; }

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}

.site-nav li{
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.site-nav li:last-child{ border-bottom:none; }

.site-nav a{
  display:block;
  padding:.75rem 1rem;
  font-weight:500;
}

/* =================================================
   BACKGROUND SLIDESHOW
================================================= */
.bg-slideshow{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  z-index:-1;
}

.bg-slide{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation: slideFade 40s infinite;
}
.bg-slide:nth-child(1){ animation-delay:0s; }
.bg-slide:nth-child(2){ animation-delay:8s; }
.bg-slide:nth-child(3){ animation-delay:16s; }
.bg-slide:nth-child(4){ animation-delay:24s; }
.bg-slide:nth-child(5){ animation-delay:32s; }

@keyframes slideFade{
  0%,12.5%{ opacity:1; }
  25%,100%{ opacity:0; }
}

/* =================================================
   HERO
================================================= */
.hero{
  min-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  padding:2rem;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background: var(--color-dark-overlay);
  z-index:0;
}
.hero-inner{ position:relative; z-index:1; }

.hero-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.hero-title-row h1{
  margin:0;
  font-size:2rem;
}
@media (min-width:1024px){
  .hero-title-row h1{ font-size:3.8rem; }
}

.hero-mark{
  width: var(--logo-hero-width);
  height:auto;
}

/* Logo dans hero sur fond blanc */
.hero-title-row .hero-mark{
  background:#fff;
  padding:.5rem .75rem;
  border-radius:10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.hero-marquee{
  overflow:hidden;
  white-space:nowrap;
  margin-top:1rem;
  color:#fff;
  font-size:1rem;
}
.hero-marquee-track{
  display:inline-block;
  animation: marquee 40s linear infinite;
  /* 🔽 taille du texte */
  font-size: 1.8rem;
}
@keyframes marquee{
  0%{ transform: translateX(0%); }
  100%{ transform: translateX(-50%); }
}

.hero-actions{
  margin-top:2rem;
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* Boutons */
.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  border-radius:4px;
  font-weight:bold;
  cursor:pointer;
  transition: background-color .2s ease;
}
.btn-primary{
  background-color: var(--color-accent);
  color:#fff;
}
.btn-primary:hover{ background-color: var(--color-button-hover); }

.btn-ghost{
  border:2px solid var(--color-accent);
  color: var(--color-accent);
  background-color: rgba(255,255,255,.2);
  backdrop-filter: blur(2px);
}
.btn-ghost:hover{
  background-color: var(--color-accent);
  color:#fff;
}

/* Scroll-indicator = bouton rond flèche bas */
.hero .scroll-indicator{
  position:absolute;
  left:50%;
  bottom:36px;
  transform: translateX(-50%);

  width:48px;
  height:48px;
  border-radius:999px;
  border:0;

  background: var(--color-accent);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);

  display:grid;
  place-items:center;

  cursor:pointer;
  user-select:none;
  pointer-events:auto;

  font-size:0;
  animation: scrollPulse 1.6s ease-in-out infinite;
}
.hero .scroll-indicator:hover{ background: var(--color-primary); }
.hero .scroll-indicator::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:14px;
  height:14px;
  border-right:4px solid #fff;
  border-bottom:4px solid #fff;
  transform: translate(-50%,-50%) rotate(45deg);
}
@keyframes scrollPulse{
  0%{ transform: translateX(-50%) translateY(0); opacity:.6; }
  50%{ transform: translateX(-50%) translateY(8px); opacity:1; }
  100%{ transform: translateX(-50%) translateY(0); opacity:.6; }
}

/* =================================================
   SECTIONS (structure)
================================================= */
.section{ padding:4rem 0; }
.section h2{
  text-align:center;
  margin-bottom:2rem;
}

/* Grands blocs blancs (index) */
#services,
#zone,
#avantages,
#contact,
.faq{
  background-color: rgba(255,255,255,.9);
  border-radius:12px;
  padding:2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  margin-top:2rem;
}

/* =================================================
   SERVICES (cartes)
================================================= */
.cards{
  display:grid;
  gap:2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card{
  background-color: var(--color-light);
  border-radius:8px;
  border:none;
  text-align:center;

  padding:140px 1.5rem 2rem;
  position:relative;
  overflow:hidden;

  transition: transform .3s ease, box-shadow .3s ease;
}
.card::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%;
  height:8px;
  background-color: var(--color-accent);
  border-radius:8px 8px 0 0;
  transition: background-color .3s ease;
}
.card:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,.1);
}
.card:hover::before{ background-color: var(--color-button-hover); }

.card-icon{
  position:absolute;
  top:55px;
  left:50%;
  transform: translateX(-50%);
  width:240px;
  max-width:88%;
  height:55px;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
}

.card h3{ margin-bottom:.5rem; color: var(--color-accent); }
.card p{ margin:0 0 1.5rem 0; }
.card a{ color: var(--color-accent); font-weight:bold; }
.card a:hover{ text-decoration: underline; }

/* =================================================
   AVANTAGES
================================================= */
.advantages{
  display:grid;
  gap:2rem;
  grid-template-columns: repeat(auto-fit, 260px);
  justify-content:center;
}

.advantage{
  background-color: var(--color-light);
  border-radius:8px;
  border:none;
  text-align:center;
  padding:2rem 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.advantage::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%;
  height:8px;
  background-color: var(--color-accent);
  border-radius:8px 8px 0 0;
  transition: background-color .3s ease;
}
.advantage:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,.1);
}
.advantage:hover::before{ background-color: var(--color-button-hover); }

.advantage h3{ margin-bottom:.5rem; color: var(--color-accent); }

/* =================================================
   ZONE — badges + boutons desktop
================================================= */
.areas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem .75rem;
  margin-top:1rem;
}
.areas span{
  background-color: var(--color-accent);
  color:#fff;
  padding:.4rem .8rem;
  border-radius:9999px;
  font-size:.9rem;
  white-space:nowrap;
}

.zone-note{
  text-align:center;
  margin-top:1.2rem;
}

.zone-actions{
  justify-content:center;
  margin-top:1.2rem;
  gap:.75rem;
}

/* Desktop-only */
.desktop-only{ display:none; }
@media (min-width:1024px){
  .desktop-only{ display:flex; }
}

/* =================================================
   PAGES PRESTATIONS — 1 BLOC FUSIONNÉ (header + content)
================================================= */
.service-page-header{
  max-width:1200px;
  margin:80px auto 0;
  padding:2rem;
  text-align:center;
  background-color: rgba(255,255,255,.9);
  border-radius:12px 12px 0 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  overflow:hidden;
}
.service-page-header h1{
  margin:0.5rem 0 1rem 0;
  color: var(--color-accent);
}

/* icône dans header de prestation */
.service-page-header .card-icon{
  position:relative;
  top:auto; left:auto;
  transform:none;
  display:block;
  width:90px;
  height:90px;
  margin:0 auto .75rem;
  object-fit:contain;
}

.service-content{
  max-width:1200px;
  margin:0 auto 2rem;              /* collé au header */
  padding:2rem;
  background-color: rgba(255,255,255,.9);
  border-radius:0 0 12px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.service-content ul{
  padding-left:1.5rem;
  margin-bottom:2rem;
}
.service-cta{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-bottom:2rem;
}

/* =================================================
   PAGES LÉGALES — bloc texte indépendant (CGV / Mentions / Cookies)
   => IMPORTANT : aucune règle ici ne doit cibler .service-page-header + section...
================================================= */
.legal-box{
  max-width:1200px;
  margin: 2rem auto 0;
  padding:2rem;
  background-color: rgba(255,255,255,.9);
  border-radius:12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* (optionnel) : si tu veux arrondir un titre légal en haut+bas sans casser les prestations
   -> ne fonctionne que sur navigateurs récents (CSS :has). Tu peux supprimer si tu veux.
*/
.service-page-header:has(h1){
  border-radius:12px;
}

/* =================================================
   CONTACT (mise en page)
================================================= */
.contact-pro{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:1rem 1.25rem;
  align-items:start;
}
.contact-pro__photo{
  width:110px;
  height:110px;
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 2px solid rgba(255,255,255,.35);
}
.contact-pro__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.contact-pro__name{
  margin:0 0 .5rem 0;
  font-size:1.15rem;
  line-height:1.2;
}
#contact .contact-pro__name{ white-space:nowrap; }

@media (max-width:640px){
  .contact-pro{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
}

/* Détails en lignes “propres” (desktop) */
@media (min-width:768px){
  #contact .contact-details{
    display:grid;
    row-gap:.4rem;
  }
  /* masque site web si présent */
  #contact .contact-details p:nth-of-type(4){ display:none; }
}

/* Bloc orange (texte uniquement) */
.contact-cta-box{
  margin-top:1rem;
  padding:1rem 1.1rem;
  text-align:center;
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(242,114,29,.92);
  color:#fff;
  box-shadow: var(--shadow);
}
.contact-cta-box p{ margin:0; }

.contact-cta-actions{
  display:flex;
  justify-content:center;
  gap:.75rem;
  flex-wrap:wrap;
}

/* =================================================
   FAQ bloc (si utilisé hors index)
================================================= */
.faq{
  max-width:1200px;
  margin:2rem auto;
  padding:2rem;
}
.faq h3{ color: var(--color-accent); }
.faq p{ margin-bottom:1rem; }

/* =================================================
   PARTNERS BAND
================================================= */
.partners-band{
  width:100%;
  margin-top:2rem;
  background-color: rgba(255,255,255,.98);
  border-radius:12px;
  padding:2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  overflow:hidden;
}
.partners-band--footer{ margin-top:1.6rem; }

.partners-band-inner{
  display:flex;
  align-items:center;
  gap:22px;
  padding:0;
  width:max-content;
  animation: partners-scroll 28s linear infinite;
}
.partners-band:hover .partners-band-inner{ animation-play-state: paused; }

.partner-logo{
  height:54px;
  width:auto;
  display:block;
  filter: grayscale(10%);
  opacity:.92;
  transform: translateZ(0);
}
.partner-logo:hover{ filter:none; opacity:1; }

@keyframes partners-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =================================================
   COOKIES BANNER
================================================= */
.cookie-banner{
  position:fixed;
  bottom:1rem;
  left:50%;
  transform: translateX(-50%);
  background-color: var(--color-light);
  border:1px solid var(--color-accent);
  border-radius:8px;
  padding:1rem;
  z-index:10000;
  max-width:90%;
}
.cookie-banner__actions{
  display:flex;
  gap:1rem;
  margin-top:.5rem;
}

.btn-cookie{
  padding:.5rem 1rem;
  border-radius:4px;
  cursor:pointer;
  border:none;
  font-weight:bold;
}
.btn-cookie--primary{
  background-color: var(--color-accent);
  color:#fff;
}
.btn-cookie--ghost{
  background-color: transparent;
  border:1px solid var(--color-accent);
  color: var(--color-accent);
}

/* =================================================
   CALL FIXED (mobile bottom bar)
================================================= */
.call-fixed{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  display:none;
  justify-content:space-around;
  background-color: var(--color-accent);
  padding:.5rem;
  z-index:1001;
}
.call-fixed a{
  color:#fff;
  font-weight:bold;
}

/* =================================================
   FOOTER
================================================= */
.site-footer{
  background-color: var(--color-light);
  padding:2rem 0;
  border-top:2px solid var(--color-accent);
  text-align:center;
  margin-top:4rem;
}
.footer-links{ margin-top:.5rem; }
.footer-links a{ margin:0 .5rem; }

/* =================================================
   BACK TO TOP
================================================= */
.back-to-top{
  position:fixed;
  width:48px;
  height:48px;
  border-radius:999px;
  border:0;
  background: var(--color-accent);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  font-size:0;

  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
}
.back-to-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.back-to-top:hover{ background: var(--color-primary); transform: translateY(-2px); }
.back-to-top::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:14px;
  height:14px;
  border-left:4px solid #fff;
  border-top:4px solid #fff;
  transform: translate(-50%,-40%) rotate(45deg);
}
.back-to-top:focus-visible{
  outline: 3px solid rgba(46,73,128,.5);
  outline-offset:4px;
}

/* Desktop align */
@media (min-width:1024px){
  .back-to-top{
    right: max(16px, calc((100vw - 1200px) / 2 + 1rem));
    bottom:48px;
  }
}


/* =========================================
   NAV HISTORIQUE — PRÉCÉDENT / SUIVANT
   (même style que scroll-indicator + back-to-top)
========================================= */
.nav-history{
  position:fixed;
  width:48px;
  height:48px;
  border-radius:999px;
  border:0;

  background: var(--color-accent);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);

  display:grid;
  place-items:center;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  font-size:0;

  opacity:0;
  pointer-events:none;
  transform: translateY(10px);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  z-index:9000;
}

.nav-history.is-visible{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.nav-history:hover{ background: var(--color-primary); transform: translateY(-2px); }

.nav-history::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:14px;
  height:14px;
  transform: translate(-50%,-50%);
}

/* Flèche gauche */
.nav-prev::before{
  border-left:4px solid #fff;
  border-top:4px solid #fff;
  transform: translate(-50%,-50%) rotate(-45deg);
}

/* Flèche droite */
.nav-next::before{
  border-right:4px solid #fff;
  border-top:4px solid #fff;
  transform: translate(-50%,-50%) rotate(45deg);
}

.nav-prev{ top:92px; left:12px; }
.nav-next{ top:92px; right:12px; }

@media (max-width:768px){
  .nav-prev, .nav-next{ top:78px; }
}


/* Mobile: au-dessus de la barre fixe */
@media (max-width:1023px){
  .back-to-top{
    right:14px;
    bottom: calc(90px + 14px + env(safe-area-inset-bottom));
    z-index:10002;
  }
}
/* =========================================
   PAGES PRESTATIONS — BLOCS SÉPARÉS
   h1 dans son bloc / contenu dans un bloc arrondi
========================================= */

/* Bloc titre */
.service-page-header{
  border-radius: 12px;
  margin-bottom: 1.25rem; /* espace volontaire avec le contenu */
}

/* Bloc contenu : bloc indépendant */
.service-content{
  border-radius: 12px;     /* arrondi HAUT + BAS */
  margin-top: 0;           /* pas de collage */
}

/* Sécurité : annule toute fusion précédente */
.service-page-header + .service-content{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
/* ===== CONTACT FORM (Formspree) ===== */
.contact-form{
  margin-top: 16px;
  background: rgba(255,255,255,.85);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 10px 28px rgba(0,0,0,.12));
  padding: 16px;
}

.contact-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form .field--full{
  grid-column: 1 / -1;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
  font: inherit;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--orange, #f2721d);
  box-shadow: 0 0 0 3px rgba(242,114,29,.18);
}

.btn-full{ width: 100%; }

.contact-form .small{
  margin-top: 6px;
  opacity: .9;
  font-size: .95em;
}

/* Honeypot invisible */
.hp-field{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Mobile */
@media (max-width: 768px){
  .contact-form__grid{
    grid-template-columns: 1fr;
  }
}
/* ===== CONTACT FORM — FORCER LISIBILITÉ ===== */
#contact .contact-form{
  background: rgba(255,255,255,.88);
  color: var(--dark, #2a3a45);
}

#contact .contact-form label,
#contact .contact-form .small,
#contact .contact-form p,
#contact .contact-form span{
  color: var(--dark, #2a3a45);
  opacity: 1;
}

#contact .contact-form input,
#contact .contact-form select,
#contact .contact-form textarea{
  color: var(--dark, #2a3a45);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.18);
}

#contact .contact-form input::placeholder,
#contact .contact-form textarea::placeholder{
  color: rgba(42,58,69,.65);
}

/* Au cas où un style global cache les champs */
#contact .contact-form .field,
#contact .contact-form .contact-form__grid{
  opacity: 1;
  visibility: visible;
}
/* =================================================
   FIX ALIGNEMENT BLOC CONTACT (INDEX)
================================================= */
#contact{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

#contact .contact-info{
  display: grid;
  gap: 1.5rem;
}
/* ===============================
   FIX CLIQUABLE BANDEAU COOKIES
=============================== */

.cookie-banner{ position:fixed; z-index:9999; pointer-events:auto; }
.cookie-banner *{ pointer-events:auto; }
/* =================================================
   FIX: respecter l'attribut HTML hidden (Form error/success, etc.)
================================================= */
[hidden]{
  display: none !important;
}
/* =========================
   CARTE ZONE (RESPONSIVE)
========================= */
.zone-map-wrap{
  width:100%;
  max-width:480px;      /* ta taille desktop */
  margin:18px auto;     /* ← centrage horizontal */
  display:flex;
  justify-content:center;
}


.zone-map{
  display:block;
  width:100%;
  height:auto;
}
/* =================================================
   MENU — PATCH FINAL (iOS/Android) : visibilité + tap
   (ne crée aucune couche/backdrop)
================================================= */


/* iOS : le fond fixed ne doit jamais capter les taps */
@supports (-webkit-touch-callout: none) {
  .bg-slideshow, .bg-slideshow * { pointer-events: none !important; }
}
/* =================================================
   MENU — BLINDAGE (safe iOS/Android)
================================================= */
.site-header{ isolation:isolate; z-index: 5000; }
.site-nav{ z-index: 5100; }

.nav-toggle,
.site-nav a{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* =========================================
   ZONE D’INTERVENTION — PAGES PRESTATIONS
   Supprime la double couche blanche (legal-box + section)
========================================= */
.service-content #zone.section.zone{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Optionnel : si tu avais un fond sur .zone-map-wrap */
.service-content #zone .zone-map-wrap{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.service-content #zone.section.zone{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.service-content .service-do{
  background: var(--color-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem;
  margin: 1rem 0 1.2rem;
}
.service-content .service-do h2{ margin-top: 0; }
.service-content .service-do p:first-child{ margin-top: 0; }
.service-content .service-do p{ margin-bottom: .8rem; }
/* =================================================
   FIX DESKTOP : "Pourquoi choisir mon entreprise" en 4 colonnes
================================================= */
@media (min-width: 1024px){
  #avantages .advantages{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }

  /* neutralise d’éventuels styles flex/width hérités */
  #avantages .advantage{
    width: auto !important;
    max-width: none !important;
  }
}