:root {
  --cream: #F7F3EE;
  --sand: #EDE7DC;
  --terra: #E8604C;
  --terra-soft: #F2C4BC;
  --terra-dk: #C0402E;
  --terra-bg: rgba(232,96,76,.08);
  --forest: #3D6B5E;
  --forest-light: #E4EDE9;
  --blue: #3B7EC8;
  --blue-soft: #D6E6F7;
  --ink: #1E1E1E;
  --ink2: #3A3A3A;
  --ink-soft: #4A4A4A;
  --ink-muted: #8A8A8A;
  --ink3: #6B7A88;
  --ink4: #9BAAB8;
  --white: #FFFFFF;
  --chalk: #FFFDFB;
  --sand2: #EDE9E2;
  --sand3: #D9D4CB;
  --teal: #0D9488;
  --teal-dk: #0A766B;
  --teal-bg: rgba(13,148,136,.07);
  --r: 14px;
  --r-sm: 8px;
  --r-lg: 20px;
  --ff-head: 'Outfit', sans-serif;
  --ff-body: 'Epilogue', sans-serif;
  --ff-h: 'Outfit', sans-serif;
  --ff-b: 'Epilogue', sans-serif;
  --ff-i: 'Lora', serif;
  --dur: .28s;
  --tr: .28s;
  --wrap: 1140px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.w {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

/* =====================================================
   NAV — VERSION FINALE SANS CONFLIT
===================================================== */

/* Barre fixe */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999; /* au-dessus de TOUT, ticker inclus */
  transition: background .28s ease, box-shadow .28s ease;
}

.nav.scrolled {
  background: rgba(247,243,238,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Barre intérieure */
.nav-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Logo ---- */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: auto; /* pousse tout le reste à droite */
}

.logo-mark {
  width: 32px; height: 32px;
  background: rgba(232,96,76,.09);
  border: 1.5px solid rgba(232,96,76,.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra);
  flex-shrink: 0;
  transition: background .25s;
}

.logo:hover .logo-mark { background: rgba(232,96,76,.16); }

.logo-text {
  font-family: var(--ff-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.logo-text strong { color: var(--terra); font-weight: 800; }

/* ---- Liens desktop ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  /* PAS de margin-left ici — le logo a margin-right:auto */
}

.nav-link {
  font-family: var(--ff-head);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 11px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s, background .25s;
}

.nav-link:hover {
  color: var(--terra-dk);
  background: rgba(232,96,76,.07);
}

/* CTA mobile dans le menu — caché sur desktop */
.nav-cta-mobile { display: none; }

/* ---- CTA téléphone desktop ---- */
.nav-cta-desktop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--terra);
  color: #fff;
  border-radius: 7px;
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  margin-left: 12px;
  transition: background .25s, box-shadow .25s, transform .25s;
}

.nav-cta-desktop:hover {
  background: var(--terra-dk);
  box-shadow: 0 4px 14px rgba(232,96,76,.35);
  transform: translateY(-1px);
}

/* ---- Burger — caché sur desktop ---- */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 8px;
  background: none;
  border: 1.5px solid rgba(0,0,0,.15);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
  transition: border-color .25s, background .25s;
}

.burger:hover {
  border-color: var(--terra);
  background: rgba(232,96,76,.06);
}

.burger-line {
  display: block;
  width: 100%; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .28s ease, opacity .28s ease;
}

.burger[aria-expanded="true"] .burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger-line:nth-child(2) {
  transform: translateY(-7px) rotate(-45deg);
}
.burger[aria-expanded="true"] { border-color: var(--terra); }


/* =====================================================
   NAV MOBILE — breakpoint unique
===================================================== */
@media (max-width: 900px) {

  .nav-in { padding: 0 20px; gap: 0; }

  /* Masquer les liens inline et le CTA desktop */
  .nav-links      { display: none; }
  .nav-cta-desktop { display: none; }

  /* Afficher le burger */
  .burger { display: flex; }

  /* Overlay menu ouvert */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    /* Plein écran sous la barre */
    position: fixed;
    top: 64px; left: 0; right: 0;
    height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    padding: 8px 16px 40px;
    background: rgba(247,243,238,.99);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(0,0,0,.07);

    /* z-index supérieur au contenu, inférieur à la barre */
    z-index: 9998;

    /* Animation */
    animation: menuSlideIn .24s ease forwards;
  }

  @keyframes menuSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Liens dans le menu mobile */
  .nav-link {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    padding: 15px 8px;
    border-radius: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    text-decoration: none;
  }

  .nav-link:last-of-type { border-bottom: none; }

  .nav-link:active {
    background: rgba(232,96,76,.06);
    color: var(--terra);
  }

  /* Séparateur avant le CTA */
  .nav-links::after {
    content: '';
    display: block;
    height: 1px;
    background: rgba(0,0,0,.07);
    margin: 8px 0;
  }

  /* CTA téléphone mobile */
  .nav-cta-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 20px;
    background: var(--terra);
    color: #fff;
    border-radius: 10px;
    font-family: var(--ff-head);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 8px;
    flex-shrink: 0;
    transition: background .25s;
  }

  .nav-cta-mobile:hover,
  .nav-cta-mobile:active { background: var(--terra-dk); }
}

/* Très petit écran */
@media (max-width: 480px) {
  .nav-in { padding: 0 16px; height: 58px; }
  .nav-links.open { top: 58px; height: calc(100vh - 58px); }
  .logo-text { font-size: 14px; }
  .logo-mark { width: 28px; height: 28px; }
}

/* =====================================================
   HERO
===================================================== */
.hero {
  padding-top: 100px;
  background: var(--cream);
  overflow: hidden;
}

.hero-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px,5vw,64px);
  align-items: center;
  padding: clamp(24px,4vw,48px) 0 clamp(32px,5vw,56px);
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--forest-light);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--forest);
  animation: blink 1.4s ease infinite;
}

@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: .3; }
}

h1 {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(1.7rem,3.8vw,2.5rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 18px;
}

h1 em { font-style: normal; color: var(--terra); }

.hero-desc {
  font-size: clamp(.88rem,1.5vw,1rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 420px;
  margin-bottom: 28px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .88rem;
  background: var(--terra);
  color: #fff;
  padding: 12px 22px;
  border-radius: 100px;
  transition: transform var(--dur), box-shadow var(--dur);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,96,76,.3);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: .88rem;
  color: var(--ink);
  border: 1.5px solid rgba(0,0,0,.18);
  padding: 11px 20px;
  border-radius: 100px;
  transition: border-color var(--dur), background var(--dur);
}

.btn-secondary:hover {
  border-color: var(--ink);
  background: rgba(0,0,0,.04);
}

.hero-right { position: relative; }

.hero-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: 0 2px 40px rgba(0,0,0,.08);
}

.hc-label {
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.hc-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 20px;
}

.hc-stat {
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,.08);
}

.hc-stat:last-child { border-right: none; }

.hc-stat-val {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
  display: block;
  line-height: 1;
}

.hc-stat-lbl {
  font-size: .68rem;
  color: var(--ink-muted);
  margin-top: 4px;
  display: block;
}

.hc-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hc-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--ink-soft);
}

.hc-check-ico {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hc-check-ico.t { background: var(--terra-soft); color: var(--terra); }
.hc-check-ico.g { background: var(--forest-light); color: var(--forest); }
.hc-check-ico.b { background: var(--blue-soft); color: var(--blue); }

.hero-floaty {
  position: absolute;
  top: -16px; right: -16px;
  background: var(--forest);
  color: #fff;
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(61,107,94,.3);
  animation: floatY 3s ease-in-out infinite;
}

@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-strip {
  background: var(--ink);
  overflow: hidden;
  height: 44px;
  display: flex;
  align-items: center;
}

.strip-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: stripScroll 22s linear infinite;
  flex-shrink: 0;
}

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

.strip-item {
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  gap: 12px;
}

.strip-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
}

/* =====================================================
   SECTIONS COMMUNES
===================================================== */
.sec-eyebrow {
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 10px;
  display: block;
}

.sec-eyebrow.g { color: var(--forest); }

h2 {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(1.4rem,3vw,2rem);
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--ink);
  margin-bottom: 12px;
}

h2 em {
  font-style: italic;
  font-weight: 300;
  font-family: var(--ff-body);
}

.sec-lead {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
}

/* =====================================================
   SERVICES
===================================================== */
.sec-services {
  padding: 72px 0;
  background: var(--white);
}

.services-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 24px;
  flex-wrap: wrap;
}

.services-intro .sec-lead { margin-bottom: 0; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}

.srv-card {
  background: var(--cream);
  border-radius: var(--r);
  padding: 24px 20px;
  border: 1.5px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}

.srv-card:hover {
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

.srv-card.featured { background: var(--terra); color: #fff; }
.srv-card.forest   { background: var(--forest); color: #fff; }

.srv-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.srv-card.featured .srv-icon { background: rgba(255,255,255,.2); }
.srv-card.forest   .srv-icon { background: rgba(255,255,255,.15); }

.srv-card h3 {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 8px;
  line-height: 1.3;
}

.srv-card p {
  font-size: .82rem;
  line-height: 1.55;
  opacity: .75;
}

.srv-price {
  margin-top: 14px;
  font-family: var(--ff-head);
  font-size: .8rem;
  font-weight: 600;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,.18);
}

.srv-card:not(.featured):not(.forest) .srv-price {
  background: var(--terra-soft);
  color: var(--terra);
}

/* =====================================================
   CRÉTEIL
===================================================== */
.sec-creteil {
  padding: 72px 0;
  background: var(--sand);
}

.creteil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px,5vw,72px);
  align-items: start;
}

.zones-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink);
  border: 1.5px solid transparent;
  transition: border-color var(--dur);
}

.zone-tag:hover { border-color: var(--terra); }

.zone-tag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.zone-tag-dot.t { background: var(--terra); }
.zone-tag-dot.g { background: var(--forest); }
.zone-tag-dot.b { background: var(--blue); }

.zone-sub {
  font-size: .73rem;
  color: var(--ink-muted);
  margin-left: auto;
}

.creteil-note {
  font-size: .78rem;
  color: var(--ink-muted);
  margin-top: 14px;
  font-style: italic;
  line-height: 1.5;
}

/* =====================================================
   PROCESSUS
===================================================== */
.sec-process {
  padding: 72px 0;
  background: var(--cream);
}

.process-header {
  text-align: center;
  margin-bottom: 48px;
}

.process-header .sec-lead { margin-inline: auto; }

.steps-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
  position: relative;
}

.steps-row::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(12.5% + 12px);
  right: calc(12.5% + 12px);
  height: 1.5px;
  background: linear-gradient(90deg,var(--terra),var(--forest));
  z-index: 0;
}

.step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-num {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 2px solid;
  position: relative;
  background: var(--cream);
}

.step:nth-child(1) .step-num { border-color: var(--terra); color: var(--terra); }
.step:nth-child(2) .step-num { border-color: var(--forest); color: var(--forest); }
.step:nth-child(3) .step-num { border-color: var(--blue); color: var(--blue); }
.step:nth-child(4) .step-num { border-color: var(--terra); color: #fff; background: var(--terra); }

.step h3 {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: 6px;
  color: var(--ink);
}

.step p {
  font-size: .8rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* =====================================================
   TARIFS
===================================================== */
.sec-tarifs {
  padding: 72px 0;
  background: var(--white);
}

.tarifs-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px,5vw,64px);
  align-items: start;
}

.price-rows {
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 24px;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  gap: 16px;
  transition: background var(--dur);
}

.price-row:last-child { border-bottom: none; }
.price-row:hover { background: var(--cream); }

.pr-info { flex: 1; }

.pr-name {
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: .88rem;
  color: var(--ink);
  margin-bottom: 2px;
}

.pr-cond {
  font-size: .73rem;
  color: var(--ink-muted);
}

.pr-badge {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: .82rem;
  color: var(--terra);
  background: var(--terra-soft);
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pr-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pr-ico.t { background: var(--terra-soft); color: var(--terra); }
.pr-ico.g { background: var(--forest-light); color: var(--forest); }

.price-note {
  font-size: .75rem;
  color: var(--ink-muted);
  margin-top: 14px;
  font-style: italic;
}

.tarifs-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.aside-card {
  background: var(--cream);
  border-radius: var(--r);
  padding: 22px;
  border: 1.5px solid rgba(0,0,0,.06);
}

.aside-card.accent {
  background: var(--terra);
  color: #fff;
  border-color: transparent;
}

.aside-card h3 {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 12px;
}

.aside-checks {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.aside-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  line-height: 1.4;
}

.aside-phone {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.aside-avail {
  font-size: .75rem;
  opacity: .7;
}

/* =====================================================
   AVIS
===================================================== */
.sec-avis {
  padding: 72px 0;
  background: var(--sand);
}

.avis-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 24px;
  flex-wrap: wrap;
}

.avis-score {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--r);
  padding: 14px 20px;
}

.score-num {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1;
}

.score-stars { display: flex; gap: 2px; color: var(--terra); }

.score-count {
  font-size: .72rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

.avis-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

.avis-card {
  background: #fff;
  border-radius: var(--r);
  padding: 22px 20px;
  transition: transform var(--dur), box-shadow var(--dur);
}

.avis-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.07);
}

.avis-card.featured { background: var(--ink); color: #fff; }

.avis-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.avis-tag {
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--terra);
  background: var(--terra-soft);
  padding: 3px 8px;
  border-radius: 100px;
}

.avis-card.featured .avis-tag { background: rgba(232,96,76,.25); color: #f4a095; }

.avis-stars { display: flex; gap: 2px; color: var(--terra); }
.avis-card.featured .avis-stars { color: #f4a095; }

.avis-quote {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 16px;
  font-style: italic;
}

.avis-card.featured .avis-quote { color: rgba(255,255,255,.75); }

.avis-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.av-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}

.av-av.t { background: var(--terra-soft); color: var(--terra); }
.av-av.g { background: var(--forest-light); color: var(--forest); }
.av-av.b { background: var(--blue-soft); color: var(--blue); }
.avis-card.featured .av-av { background: rgba(255,255,255,.12); color: #fff; }

.av-name { font-family: var(--ff-head); font-weight: 600; font-size: .82rem; }
.av-loc  { font-size: .72rem; color: var(--ink-muted); }
.avis-card.featured .av-loc { color: rgba(255,255,255,.45); }

/* =====================================================
   FAQ
===================================================== */
.sec-faq {
  padding: 72px 0;
  background: var(--cream);
}

.faq-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px,5vw,72px);
  align-items: start;
}

.faq-sticky {
  position: sticky;
  top: 80px;
}

.faq-sticky .sec-lead { margin-bottom: 24px; }

.faq-list {
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(0,0,0,.08);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.faq-item { border-bottom: 1px solid rgba(0,0,0,.06); }
.faq-item:last-child { border-bottom: none; }

.faq-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  background: #fff;
  transition: background var(--dur);
}

.faq-btn:hover { background: var(--cream); }

.faq-q {
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: .88rem;
  color: var(--ink);
  line-height: 1.4;
}

.faq-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur), transform var(--dur);
  color: var(--ink);
}

.faq-item.open .faq-icon {
  background: var(--terra);
  color: #fff;
  transform: rotate(45deg);
}

.faq-ans {
  height: 0;
  overflow: hidden;
  transition: height var(--dur);
}

.faq-ans-in {
  padding: 0 20px 18px;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: #fff;
}

.faq-ans-in strong { color: var(--ink); font-weight: 600; }

/* =====================================================
   CONTACT
===================================================== */
.sec-contact {
  padding: 72px 0;
  background: var(--white);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px,5vw,72px);
  align-items: start;
}

.contact-aside {
  position: sticky;
  top: 80px;
}

.phone-card {
  background: var(--terra);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 26px;
  margin-bottom: 16px;
}

.phone-card-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 10px;
  font-family: var(--ff-head);
}

.phone-card-num {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.4rem;
  display: block;
  margin-bottom: 4px;
  color: #fff;
  transition: opacity var(--dur);
}

.phone-card-num:hover { opacity: .8; }

.phone-card-avail { font-size: .78rem; opacity: .7; }

.map-card {
  border-radius: var(--r);
  overflow: hidden;
  border: 1.5px solid rgba(0,0,0,.08);
}

.map-card iframe { display: block; width: 100%; height: 180px; }

.map-cap {
  padding: 10px 14px;
  font-size: .75rem;
  color: var(--ink-muted);
  background: var(--cream);
}

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

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field label {
  font-family: var(--ff-head);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}

.iw { position: relative; }

.iw svg.fi {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}

.iw input, .iw select, .field textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: .88rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid rgba(0,0,0,.12);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  transition: border-color var(--dur);
  outline: none;
}

.iw input  { padding-left: 36px; }
.iw select { padding-left: 36px; appearance: none; cursor: pointer; }

.iw input:focus,
.iw select:focus,
.field textarea:focus { border-color: var(--terra); }

.field textarea {
  resize: vertical;
  min-height: 100px;
  padding: 12px 14px;
}

.sel-wrap { position: relative; }

.sel-chev {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-muted);
}

.addr-wrap { position: relative; }

.addr-sugg {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.12);
  border-radius: var(--r-sm);
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.addr-sugg.open { display: block; }

.addr-sugg li {
  padding: 11px 14px;
  font-size: .85rem;
  cursor: pointer;
  transition: background var(--dur);
  color: var(--ink);
}

.addr-sugg li:hover,
.addr-sugg li.active { background: var(--cream); }

.field-hint {
  font-size: .72rem;
  color: var(--ink-muted);
  margin-top: 4px;
}

.field-hint.err { color: #c0392b; }

.check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.check-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-box {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background var(--dur), border-color var(--dur);
}

.check-label input:checked + .check-box {
  background: var(--terra);
  border-color: var(--terra);
}

.check-label input:checked + .check-box::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px,-1px);
  display: block;
}

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.form-feedback {
  font-size: .82rem;
  color: var(--forest);
  min-height: 18px;
  font-style: italic;
}

.form-feedback.err { color: #c0392b; }

/* =====================================================
   CTA FINAL
===================================================== */
.sec-cta {
  padding: clamp(48px,7vw,80px) 0;
  background: var(--forest);
  color: #fff;
  text-align: center;
}

.cta-eyebrow {
  font-family: var(--ff-head);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 12px;
  display: block;
}

.cta-h {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(1.5rem,3.5vw,2.2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.cta-h em {
  font-style: italic;
  font-weight: 300;
  font-family: var(--ff-body);
  opacity: .8;
}

.cta-sub { font-size: .9rem; opacity: .65; margin-bottom: 32px; }

.cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: .9rem;
  background: #fff;
  color: var(--forest);
  padding: 13px 26px;
  border-radius: 100px;
  transition: transform var(--dur), box-shadow var(--dur);
}

.btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.btn-outline-wh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: .9rem;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 12px 24px;
  border-radius: 100px;
  transition: border-color var(--dur), background var(--dur);
}

.btn-outline-wh:hover {
  border-color: #fff;
  background: rgba(255,255,255,.1);
}

/* =====================================================
   FOOTER
===================================================== */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,.65);
  padding: 52px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3,1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.footer-brand .logo { color: #fff; margin-bottom: 12px; }

.footer-brand p {
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
  max-width: 240px;
  margin-bottom: 16px;
}

.footer-tel {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--terra);
}

.footer-col h4 {
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}

.footer-col a {
  display: block;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  padding: 3px 0;
  transition: color var(--dur);
}

.footer-col a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .75rem;
  color: rgba(255,255,255,.3);
}

.footer-bottom a { color: rgba(255,255,255,.4); transition: color var(--dur); }
.footer-bottom a:hover { color: rgba(255,255,255,.7); }

.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* =====================================================
   FLOATS
===================================================== */
.float-actions {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 800;
  width: 52px;
}

.float-call {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(232,96,76,.45);
  transition: transform var(--dur), box-shadow var(--dur);
  animation: callPulse 2.5s ease-in-out infinite;
  text-decoration: none;
}

.float-call:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(232,96,76,.5);
}

@keyframes callPulse {
  0%   { box-shadow: 0 4px 24px rgba(232,96,76,.45), 0 0 0 0    rgba(232,96,76,.3); }
  50%  { box-shadow: 0 4px 24px rgba(232,96,76,.45), 0 0 0 12px rgba(232,96,76,0); }
  100% { box-shadow: 0 4px 24px rgba(232,96,76,.45), 0 0 0 0    rgba(232,96,76,0); }
}

.float-top {
  position: absolute;
  bottom: 62px;
  right: 0;
  width: 42px; height: 42px;
  background: #fff;
  border: 1.5px solid var(--sand3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease,
              border-color .25s, color .25s;
}

.float-top.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.float-top:hover {
  border-color: var(--terra);
  color: var(--terra-dk);
  box-shadow: 0 4px 16px rgba(232,96,76,.2);
  transform: translateY(-2px);
}

/* =====================================================
   PAGES LÉGALES
===================================================== */
.legal-hero {
  background: var(--chalk);
  border-bottom: 1px solid var(--sand2);
  padding: 72px 40px 52px;
}

.legal-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.legal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink4);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.legal-breadcrumb a { color: var(--teal-dk); text-decoration: none; transition: color .2s; }
.legal-breadcrumb a:hover { color: var(--teal); }
.legal-breadcrumb svg { color: var(--sand3); }

.legal-tag {
  display: inline-flex;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-bg);
  border: 1px solid rgba(13,148,136,.2);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.legal-title {
  font-family: var(--ff-h);
  font-size: clamp(26px,3.5vw,38px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 14px;
}

.legal-title i {
  font-family: var(--ff-i);
  font-style: italic;
  font-weight: 600;
  color: var(--terra);
}

.legal-meta {
  font-size: 13px;
  color: var(--ink4);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.legal-meta span { display: flex; align-items: center; gap: 5px; }

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 40px 80px;
}

.legal-toc {
  background: #fff;
  border: 1.5px solid var(--sand2);
  border-left: 3px solid var(--terra);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 48px;
}

.legal-toc p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 12px;
}

.legal-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: toc;
}

.legal-toc ol li { counter-increment: toc; }

.legal-toc ol li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
  transition: color .2s;
}

.legal-toc ol li a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--terra);
  min-width: 22px;
}

.legal-toc ol li a:hover { color: var(--terra-dk); }

.legal-section {
  margin-bottom: 44px;
  scroll-margin-top: 80px;
}

.legal-section-title {
  font-family: var(--ff-h);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.legal-section-title::before {
  content: attr(data-n);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--terra);
  background: var(--terra-soft);
  border: 1px solid rgba(232,96,76,.2);
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

.legal-section p {
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.78;
  margin-bottom: 12px;
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-section ul,
.legal-section ol {
  margin: 10px 0 14px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.legal-section ul li,
.legal-section ol li {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.65;
  padding-left: 20px;
  position: relative;
}

.legal-section ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--terra);
  border-radius: 50%;
}

.legal-section ol { counter-reset: ol; }
.legal-section ol li { counter-increment: ol; }

.legal-section ol li::before {
  content: counter(ol) '.';
  position: absolute;
  left: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--terra);
}

.legal-section strong { color: var(--ink); font-weight: 600; }

.legal-section a {
  color: var(--teal-dk);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}

.legal-section a:hover { color: var(--teal); }

.legal-info {
  background: var(--teal-bg);
  border: 1px solid rgba(13,148,136,.2);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--teal-dk);
  line-height: 1.6;
  margin: 12px 0;
}

.legal-warn {
  background: var(--terra-soft);
  border: 1px solid rgba(232,96,76,.2);
  border-left: 3px solid var(--terra);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--terra-dk);
  line-height: 1.6;
  margin: 12px 0;
}

.legal-contact-card {
  background: #fff;
  border: 1.5px solid var(--sand2);
  border-radius: 14px;
  padding: 28px;
  margin-top: 48px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.lcc-ico {
  width: 42px; height: 42px;
  background: var(--terra-soft);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terra-dk);
  flex-shrink: 0;
}

.lcc-title {
  font-family: var(--ff-h);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.02em;
}

.lcc-body {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 12px;
}

.lcc-body a { color: var(--teal-dk); font-weight: 600; text-decoration: none; }
.lcc-body a:hover { text-decoration: underline; }

.lcc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--terra);
  color: #fff;
  border-radius: 7px;
  font-family: var(--ff-h);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .25s, transform .25s;
}

.lcc-btn:hover { background: var(--terra-dk); transform: translateY(-1px); }

/* =====================================================
   RESPONSIVE — UN SEUL BLOC PAR BREAKPOINT
===================================================== */

/* ---- 900px ---- */
@media (max-width: 900px) {

  /* NAV : seul bloc, pas de doublon */
  .nav-cta-desktop { display: none; }
  .burger { display: flex !important; margin-left: auto; }

  .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    padding: 16px 20px 32px;
    background: rgba(247,243,238,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: 850;
    overflow-y: auto;
    /* caché par défaut */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .28s ease, transform .28s ease;
    /* reset margin-left du desktop */
    margin-left: 0;
  }

  .nav-links.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }

  .nav-link {
    font-size: 15px;
    font-weight: 600;
    padding: 14px 14px;
    border-radius: 0;
    color: var(--ink);
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .nav-link:last-of-type { border-bottom: none; }

  .nav-links::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(0,0,0,.07);
    margin: 6px 0;
    flex-shrink: 0;
    order: 10;
  }

  .nav-cta-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--terra);
    color: #fff;
    border-radius: 10px;
    font-family: var(--ff-head);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 8px;
    order: 11;
    flex-shrink: 0;
    transition: background .25s;
  }

  .nav-cta-mobile:hover { background: var(--terra-dk); }

  /* Grilles */
  .hero-top        { grid-template-columns: 1fr; }
  .hero-right      { display: none; }
  .services-grid   { grid-template-columns: 1fr 1fr; }
  .creteil-grid    { grid-template-columns: 1fr; }
  .tarifs-layout   { grid-template-columns: 1fr; }
  .contact-layout  { grid-template-columns: 1fr; }
  .faq-cols        { grid-template-columns: 1fr; }
  .steps-row       { grid-template-columns: 1fr 1fr; }
  .steps-row::before { display: none; }
  .avis-grid       { grid-template-columns: 1fr; }
  .faq-sticky      { position: static; }
  .footer-grid     { grid-template-columns: 1fr 1fr; }
  .contact-aside   { position: static; }

  /* Floats */
  .float-actions { bottom: 20px; right: 20px; width: 48px; }
  .float-call    { width: 48px; height: 48px; }
  .float-top     { width: 38px; height: 38px; bottom: 58px; }
}

/* ---- 560px ---- */
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
  .steps-row     { grid-template-columns: 1fr; }
  .field-row     { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; }
  .cta-row       { flex-direction: column; align-items: center; }
}

/* ---- 480px ---- */
@media (max-width: 480px) {
  .nav-in    { padding: 0 16px; height: 58px; }
  .nav-links { top: 58px; }

  .hero-ctas { flex-direction: column; align-items: flex-start; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .legal-hero { padding: 52px 20px 36px; }
  .legal-body { padding: 36px 20px 60px; }
  .legal-toc  { padding: 16px 18px; }
  .legal-contact-card { flex-direction: column; gap: 14px; padding: 20px; }
}