/* =============== Variables & Reset =============== */
:root{
  --bg:#ffffff;
  --text:#0f1720;
  --muted:#5b6775;
  --accent:#ff6600;
  --border:#e6e8ec;
  --shadow:0 6px 24px rgba(15,23,32,.06);
  --radius:16px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }
ul{ margin:0; padding-left:18px }

/* =============== Layout helpers =============== */
.container{ width:min(1200px,92%); margin:0 auto }
.section{ padding:48px 0 }
.mt-0{ margin-top:0 }
.mt-20{ margin-top:20px }

/* =============== Header / Nav =============== */
.header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0;
}
.logo-img{ height:60px; width:auto }
.nav-links{ display:flex; gap:18px; align-items:center }
.nav-links a{ padding:10px 12px; border-radius:10px; font-weight:600; color:#253040 }
.nav-links a.active{ color:var(--accent) }
.menu-button{
  display:none; width:44px; height:44px; border-radius:12px; padding:0;
  background:#fff; border:1px solid var(--border);
  align-items:center; justify-content:center; gap:4px;
}
.menu-line{ width:20px; height:2px; background:#111; display:block }

@media (max-width:860px){
  .menu-button{ display:inline-flex }
  .nav-links{
    position:fixed; inset:120px 0 auto 0;
    display:none; flex-direction:column; gap:8px; padding:12px 16px 18px;
    background:#fff; border-bottom:1px solid var(--border);
  }
  .nav-links.is-open{ display:flex }
}
/* —— Logo 2× centré en smartphone —— */
@media (max-width:640px){
  .header-inner{ flex-direction:column; gap:10px; align-items:center; justify-content:center }
  .logo-img{ height:120px }   
  .menu-button{ order:3 }
  .nav-links{ inset:180px 0 auto 0 }
}

/* =============== Bandeau fin (photos qui défilent) =============== */
.marquee{ position:relative; overflow:hidden; border-bottom:1px solid var(--border); background:#fafbfc }
.marquee-mask{ position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none }
.marquee-mask.left{ left:0; background:linear-gradient(90deg,#fafbfc,transparent) }
.marquee-mask.right{ right:0; background:linear-gradient(270deg,#fafbfc,transparent) }
.marquee-track{ display:flex; gap:14px; padding:10px 0; animation:marquee 10s linear infinite } /* vitesse doublée */
.slide{ position:relative; min-width:360px; height:180px; border-radius:16px; overflow:hidden;
        box-shadow:var(--shadow); background:#e9edf2; border:1px solid var(--border) }
.slide img{ width:100%; height:100%; object-fit:cover }
.slide figcaption{ position:absolute; left:12px; bottom:12px }
.slide figcaption span{ background:#fff; padding:6px 10px; border-radius:10px; font-weight:800 }
@keyframes marquee{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }
@media (max-width:560px){ .slide{ min-width:80vw; height:160px } }

/* =============== Hero =============== */
.hero{ padding:44px 0 28px }
.hero h1{ margin:0 0 10px; font-size:clamp(26px,5vw,40px) }
.hero p{ color:var(--muted); margin:10px 0 0 }
.kpis{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin:16px 0 }
.kpi{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow) }
.kpi .num{ font-weight:900; font-size:20px }
.cta{
  display:inline-block; margin-top:12px;
  background:var(--accent); color:#fff; font-weight:800;
  padding:12px 18px; border-radius:12px; border:0;
  box-shadow:0 6px 18px rgba(255,102,0,.24)
}
.cta:hover{ text-decoration:none; filter:brightness(.95) }

/* =============== NOS SERVICES =============== */
.services{ padding:48px 0 }
.services-grid{ display:grid; gap:22px; grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:1200px){ .services-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:680px){ .services-grid{ grid-template-columns:1fr } }

.s-card{
  display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
  min-height:520px; background:#152029;
}
.s-media{ padding:22px 22px 0 22px }
.s-media img{ width:100%; height:260px; object-fit:cover; border-radius:10px }
.s-body{ padding:18px 22px 26px 22px; display:flex; flex-direction:column; gap:14px }
.s-title{ margin:0; font-size:clamp(22px,2.6vw,34px); line-height:1.2; color:#e9eef6 }
.s-text{ margin:0; font-size:clamp(15px,1.8vw,18px); color:#e4ebf7 }
.hl{
  background:linear-gradient(0deg, rgba(180,200,230,.65) 0 100%);
  padding:0 .25em; border-radius:.2em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.s-cta{ margin-top:auto }
.s-btn{
  display:inline-block; background:#fff; color:#262626; font-weight:800;
  padding:12px 18px; border-radius:16px; border:0;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.s-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); background:var(--accent); color:#fff }

.s-dark{ background:#152029 }
.s-purple{ background:#4b4a7f }
.s-grey{ background:#8b8e90 }
.s-light{ background:#dbe6ef }
.s-grey .s-title, .s-grey .s-text{ color:#223 }
.s-light .s-title, .s-light .s-text{ color:#223 }
.s-purple .hl{ background:linear-gradient(0deg, rgba(200,210,250,.6) 0 100%) }
.s-grey   .hl{ background:linear-gradient(0deg, rgba(230,235,245,.65) 0 100%) }
.s-light  .hl{ background:linear-gradient(0deg, rgba(215,225,245,.8) 0 100%) }

.s-card{ transition:transform .18s ease, box-shadow .25s ease }
.s-card:hover{ transform:translateY(-3px); box-shadow:0 12px 32px rgba(15,23,32,.12) }

/* =============== Cards simples + Footer =============== */
.grid{ display:grid; gap:22px }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:680px){ .grid-2{ grid-template-columns:1fr } }

.card{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:var(--shadow)
}
.card h3{ margin:0 0 8px }
.list{ color:var(--muted) }

.footer{ border-top:1px solid var(--border); background:#fff; padding:20px 0; color:#666 }

/* =============== Body =============== */
body{ background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial }
/* =============== Zones d’intervention =============== */
.zone{
  background:#f8fafc;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:60px 0;
}
.zone h2{
  text-align:center;
  font-size:clamp(26px,4vw,36px);
  color:var(--accent);
  margin-bottom:28px;
}
.zone p{
  max-width:900px;
  margin:0 auto 16px;
  line-height:1.7;
  color:#222;
  text-align:justify;
}
.zone-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
  margin:40px auto;
  max-width:1000px;
}
.zone-columns h3{
  color:#111;
  font-size:clamp(18px,2vw,22px);
  margin-bottom:10px;
  border-left:5px solid var(--accent);
  padding-left:10px;
}
.zone-note{
  font-style:italic;
  color:#444;
  text-align:center;
  margin-top:28px;
}
@media (max-width:700px){
  .zone-columns{ grid-template-columns:1fr }
}
/* ===== Section hero image dans services ===== */
.section-hero {
  margin: 16px 0 24px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.section-hero img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}
@media (max-width: 980px){ .section-hero img{ height: 300px } }
@media (max-width: 640px){ .section-hero img{ height: 220px } }

/* ===== Comparateur Avant / Après ===== */
.ba {
  margin: 18px 0 6px;
}
.ba-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  user-select: none;
}
.ba-img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}
@media (max-width: 980px){ .ba-img{ height: 360px } }
@media (max-width: 640px){ .ba-img{ height: 260px } }

.ba-front-wrap {
  position: absolute; inset: 0 0 0 0;
  width: 50%; /* valeur initiale, changée par JS */
  overflow: hidden;
}

.ba-divider {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - 1.5px); width: 3px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  pointer-events: none;
}

.ba-label {
  position: absolute; top: 12px;
  background: rgba(255,255,255,.92);
  color: #101820; font-weight: 800;
  padding: 6px 10px; border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  font-size: 14px;
}
.ba-label-left { left: 12px }
.ba-label-right { right: 12px }

/* Range (glissière) */
.ba-range {
  position: absolute; left: 0; right: 0; bottom: 12px;
  width: min(500px, 80%); margin: 0 auto;
  appearance: none; height: 6px; background: rgba(255,255,255,.9);
  border-radius: 999px; border: 1px solid var(--border);
}
.ba-range::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
}
.ba-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
}

/* Titres de sections services */
.service-block h2{ margin-bottom: 8px }
.service-block p.lead{
  color: var(--muted); margin-top: 6px; margin-bottom: 18px;
}
/* ===== Galerie miniatures ===== */
.gallery{ padding:48px 0; border-top:1px solid var(--border) }
.gallery h2{ margin:0 0 10px }
.gallery-sub{ color:var(--muted); margin:0 0 18px }
.thumb-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(5, minmax(0,1fr));
}
@media (max-width:1100px){ .thumb-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:800px){ .thumb-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:560px){ .thumb-grid{ grid-template-columns:repeat(2,1fr) } }

.thumb{
  display:block; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background:#f4f7fb;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.thumb img{
  width:100%; height:180px; object-fit:cover;
  display:block; filter:saturate(.98) contrast(1.02);
}
.thumb:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,32,.12) }

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:1000;
}
.lightbox.open{ opacity:1; pointer-events:auto }
.lightbox-img{
  max-width:92vw; max-height:88vh; border-radius:14px; box-shadow:0 12px 48px rgba(0,0,0,.5);
  border:2px solid #fff; background:#fff;
}
.lightbox-close{
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:12px;
  border:0; background:#fff; color:#111; font-size:28px; line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.2); cursor:pointer;
}
.lightbox-close:hover{ filter:brightness(.95) }
/* ===== Bouton Téléphone Fixe ===== */
.phone-btn{
  position:fixed; bottom:22px; right:22px; z-index:1000;
  background:var(--accent,#ff6600);
  color:#fff; font-weight:700; font-size:16px;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease, opacity .3s ease;
  opacity:0; transform:translateY(20px);
}
.phone-btn.visible{ opacity:1; transform:none }
.phone-btn:hover{ box-shadow:0 10px 30px rgba(0,0,0,.3); transform:translateY(-2px) }
.phone-btn svg{ width:22px; height:22px; fill:#fff }
.phone-btn span{ display:inline-block }

/* ===== Version smartphone ===== */
@media (max-width:700px){
  .phone-btn{
    right:20px; bottom:20px;
    background:#fff; padding:12px;
    border-radius:50%; width:60px; height:60px;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
  }
  .phone-btn span{ display:none }
  .phone-btn svg{
    width:30px; height:30px; fill:var(--accent,#ff6600);
  }
  .phone-btn:hover{
    transform:scale(1.05);
    box-shadow:0 10px 30px rgba(0,0,0,.3);
  }
}