/* ===========================
   Services — Styles spécifiques
   (Version nettoyée & responsive)
   =========================== */

/* ---------- Hero ---------- */
.services-hero{
  background: linear-gradient(135deg, #e8f6ff 0%, #fff4ee 100%);
  border-bottom: 1px solid #eef2f7;
}
.services-hero .hero-inner{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  padding: 56px 16px;
  max-width: var(--max, 1100px);
  margin: 0 auto;
}
.services-hero .badge{
  display: inline-block;
  background: #fff;
  color: #0b3b2f;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(14,165,233,.12);
  margin-bottom: 12px;
}
.services-hero h1{
  margin: 0 0 8px;
  font-size: clamp(26px, 3.5vw, 34px);
}
.services-hero p{ margin:0 0 16px; color:#0f172a }
.services-hero .cta-row{ display:flex; gap:10px; flex-wrap:wrap }

.hero-visual{
  background:#fff;
  border:1px solid #ffffff90;
  border-radius:22px;
  padding:10px;
  box-shadow:0 20px 50px rgba(2,6,23,.12);
  aspect-ratio: 16 / 10;
  overflow:hidden;
}
.hero-visual img{
  width:100%; height:100%; object-fit:cover; border-radius:16px;
}

@media (max-width: 960px){
  .services-hero .hero-inner{ grid-template-columns:1fr }
  .hero-visual{ aspect-ratio:16/9; margin-top:10px }
}

/* ---------- Pile services ---------- */
.services-stack{
  padding: 36px 16px 56px;
  max-width: var(--max, 1100px);
  margin: 0 auto;
}

/* Bloc service : texte + carrousel */
.service-block{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:center;
  margin: 26px 0 40px;
}
.service-block:nth-child(even){ grid-template-columns: .95fr 1.05fr; }
.service-block:nth-child(even) .s-text{ order:2 }
.service-block:nth-child(even) .carousel{ order:1 }

.s-text h2{ margin:0 0 8px; font-size: clamp(22px, 3vw, 28px); }
.s-text p{ margin:0 0 10px; color:#1f2937 }
.benefits{ margin:8px 0 14px; padding-left:18px; color:#334155 }
.s-cta{ display:flex; gap:10px; flex-wrap:wrap }

@media (max-width: 980px){
  .service-block{ grid-template-columns:1fr; }
  .service-block:nth-child(even) .s-text,
  .service-block:nth-child(even) .carousel{ order:initial }
}

/* ---------- Carrousel unifié ---------- */
.carousel{
  position:relative;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:10px;
  box-shadow:0 12px 30px rgba(2,6,23,.08);
  max-width: min(720px, 100%);
  justify-self: center;
}
.carousel .viewport{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  height: clamp(200px, 32vw, 380px);
}
.carousel .track{
  display:flex;
  height:100%;
  gap:0;
  will-change: transform;
  transition: transform .5s ease;
}
@media (prefers-reduced-motion: reduce){
  .carousel .track{ transition: none; }
}

/* Slide = figure */
.carousel .slide{
  margin:0;
  flex: 0 0 100%;
  max-width:100%;
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg,#f9fbff, #fff);
}
.carousel .slide img,
.carousel .slide video{
  max-width:100%;
  max-height:100%;
  object-fit: contain;              /* montre l’image entière */
  border-radius:12px;
  display:block;
  background:#f8fafc;
  box-shadow:0 10px 30px rgba(2,6,23,.08);
}

/* Légende optionnelle */
.carousel .slide figcaption{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(0,0,0,.45);
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
}

/* Boutons */
.c-prev,.c-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-size:20px; line-height:30px; text-align:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(2,6,23,.12);
  z-index:2;
}
.c-prev{ left:12px } .c-next{ right:12px }
.c-prev:hover,.c-next:hover{ transform:translateY(-50%) scale(1.05) }

@media (max-width: 900px){
  .carousel{ max-width:100%; }
  .carousel .viewport{ height: clamp(180px, 38vw, 320px); }
  .c-prev,.c-next{ width:30px; height:30px; font-size:18px; line-height:28px; }
}

/* Points */
.dots{
  display:flex; justify-content:center; gap:6px; padding:10px 0 4px;
}
.dots button{
  width:8px;height:8px;border-radius:999px;border:0;background:#cbd5e1; cursor:pointer;
}
.dots button[aria-current="true"]{
  background: linear-gradient(135deg,#0ea5e9,#22c55e);
}


/* === NAVIGATION SIMPLE (sans burger) — global === */
.burger{display:none !important;}
#menu-overlay{display:none !important;}
.site-header .menu,
#main-menu.menu{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:12px;
  position:static !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  z-index:auto !important;
}
#main-menu a{display:inline-block;padding:10px 8px;border-radius:10px;}
#main-menu .btn-cta{background:#0ea5e9;color:#fff;font-weight:700;}
@media (max-width: 960px){
  .site-header .menu,#main-menu.menu{flex-wrap:wrap;gap:10px;}
}

/* ===== iOS Safari Hotfixes ===== */
html { height: -webkit-fill-available; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: -webkit-fill-available; }
input, select, textarea { font-size: 16px; -webkit-appearance: none; }
button, .btn { -webkit-appearance: none; }
.vh-100 { height: calc(var(--vh, 1vh) * 100); }
.touch-scroll { -webkit-overflow-scrolling: touch; overflow-y: auto; }
/* Fallback gap */
@supports not (gap: 1rem) {
  .menu > * { margin-right: 10px; }
}