/* ==========================================================================
   Feuille de style principale
   Site vitrine artisan couvreur
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  --accent: #C1440E;
  --accent-dark: #9A3609;
  --accent-soft: #FDF1EA;
  --accent-tint: #F7DED1;
  --accent-wash: #FEF8F5;
  --accent-ring: rgba(193, 68, 14, 0.28);

  --ink: #13171D;
  --ink-2: #2C333D;
  --muted: #616C7A;
  --muted-2: #8A94A2;

  --bg: #FFFFFF;
  --bg-soft: #F7F4F0;
  --bg-soft-2: #EFEBE5;
  --dark: #11151B;

  --line: #E8E4DE;
  --line-strong: #D8D2C9;

  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;

  --shadow-s: 0 1px 2px rgba(19, 23, 29, .05), 0 2px 8px rgba(19, 23, 29, .04);
  --shadow: 0 4px 12px rgba(19, 23, 29, .06), 0 16px 40px rgba(19, 23, 29, .07);
  --shadow-l: 0 10px 24px rgba(19, 23, 29, .08), 0 30px 70px rgba(19, 23, 29, .11);

  --font-title: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --header-h: 90px;
  --wrap: 1180px;
  --section-y: clamp(64px, 8vw, 112px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 .6em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 5.2vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.55rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.42rem); }
h4 { font-size: 1.06rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px);
}

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--wash { background: var(--accent-wash); }
.section--tint { background: var(--accent-soft); }
.section--tight { padding-block: clamp(48px, 5.5vw, 78px); }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px;
}
.skip-link:focus { left: 16px; }

/* --------------------------------------------------------------------------
   2b. Icônes vectorielles
   -------------------------------------------------------------------------- */
.icon {
  width: 22px; height: 22px;
  display: block; flex-shrink: 0;
  stroke: currentColor; fill: none;
}
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 28px; height: 28px; }

.icon-chip {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--accent-tint); color: var(--accent);
  display: grid; place-items: center; flex-shrink: 0;
}
.icon-chip .icon { width: 23px; height: 23px; }

/* --------------------------------------------------------------------------
   3. Titres de section
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-title);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: .55;
}

.sec-head { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow::before { display: none; }
.sec-head p { color: var(--muted); font-size: 1.06rem; margin-bottom: 0; }

.lead { font-size: clamp(1.03rem, 1.6vw, 1.16rem); color: var(--muted); }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-title);
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 17px 28px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--accent-ring); }
.btn--primary:hover { background: var(--accent-dark); box-shadow: 0 10px 26px var(--accent-ring); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-s); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #F3F0EB; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.65); }

.btn--lg { padding: 20px 34px; font-size: 1.06rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-title); font-weight: 600;
  color: var(--accent);
  padding-block: 7px;
  min-height: 36px;
}
.link-arrow span:last-child { transition: transform .2s ease; }
.link-arrow:hover span:last-child { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand__mark { width: 58px; height: 58px; flex-shrink: 0; }

/* Logo déposé par l'artisan, souvent plus large que haut */
.brand__mark--image {
  width: auto; height: 66px;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
}
/* Un logo déposé garde ses couleurs dans le pied de page. Il est posé sur une
   plaque claire, seul moyen de rester lisible quel que soit le format fourni,
   un fichier opaque ne supportant pas d être inversé. */
.footer .brand__mark--image {
  filter: none; opacity: 1;
  background: #fff; border-radius: 12px;
  padding: 7px 11px; box-sizing: border-box;
}
.brand__mot { white-space: nowrap; }
.brand__name {
  min-width: 0;
  font-family: var(--font-title); font-weight: 800;
  font-size: 1.16rem; color: var(--ink); letter-spacing: -.022em;
  line-height: 1.15;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .nav__parent > a {
  font-family: var(--font-title); font-weight: 500; font-size: .95rem;
  color: var(--ink-2); padding: 10px 12px; border-radius: 9px;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav > a:hover, .nav__parent > a:hover { color: var(--accent); background: var(--accent-soft); }
.nav a.is-active { color: var(--accent); font-weight: 600; }

/* Sous-menu des prestations */
.nav__parent { position: relative; }
.nav__parent > a .icon { transition: transform .2s ease; transform: rotate(90deg); width: 15px; height: 15px; }
.nav__parent:hover > a .icon,
.nav__parent:focus-within > a .icon { transform: rotate(270deg); }

.sousmenu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-l);
  padding: 14px; width: max-content; max-width: 640px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__parent:hover .sousmenu,
.nav__parent:focus-within .sousmenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sousmenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.sousmenu a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 11px;
  font-size: .93rem; font-weight: 500; color: var(--ink-2);
  transition: background-color .14s ease, color .14s ease;
}
.sousmenu a .icon { width: 20px; height: 20px; color: var(--accent); }
.sousmenu a:hover { background: var(--accent-soft); color: var(--accent); }
.sousmenu__tous {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sousmenu__tous a { justify-content: center; font-family: var(--font-title); font-weight: 600; color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: 12px; }

.header__phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-title); font-weight: 700; font-size: 1rem;
  color: var(--ink); padding: 10px 6px; white-space: nowrap;
}
.header__phone:hover { color: var(--accent); }

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line-strong);
  border-radius: 12px; cursor: pointer; padding: 0;
}
.burger span {
  display: block; width: 19px; height: 2px; background: var(--ink);
  border-radius: 2px; position: relative;
  transition: transform .22s ease, background-color .22s ease;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .22s ease, top .22s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Panneau mobile */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0;
  background: #fff; z-index: 99;
  padding: 22px clamp(18px, 5vw, 30px) 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.mnav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--font-title); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); padding: 16px 4px;
  border: 0; border-bottom: 1px solid var(--line);
  width: 100%; background: none; text-align: left; cursor: pointer;
}
.mnav-link .icon { color: var(--muted-2); transition: transform .2s ease; flex-shrink: 0; }
.mnav-link[data-sous] .icon { transform: rotate(90deg); }
.mnav-link.is-active { color: var(--accent); }
.mnav-link[aria-expanded="true"] .icon { transform: rotate(270deg); color: var(--accent); }

.mnav-sous { display: none; padding: 8px 0 14px; }
.mnav-sous.is-open { display: block; }
.mnav-sous a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 10px; border-radius: 10px;
  font-size: 1rem; color: var(--ink-2);
}
.mnav-sous a .icon { color: var(--accent); width: 20px; height: 20px; }

.mobile-nav__cta { display: grid; gap: 12px; margin-top: 26px; }
.mobile-nav__meta {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--muted);
}
.mobile-nav__meta strong { display: block; color: var(--ink); font-family: var(--font-title); margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   6. Bannière d'accueil, image pleine largeur
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Le texte étant centré, le voile l est aussi : même densité à gauche et à droite */
  --hero-voile: linear-gradient(180deg, rgba(10,13,17,.80) 0%, rgba(10,13,17,.66) 48%, rgba(10,13,17,.86) 100%);
  background-color: var(--dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}
/* Diaporama de fond, les vues se fondent l'une dans l'autre */
.hero--diapo { background-image: none; }

/* La bannière compacte garde son texte à gauche, le voile appuie donc de ce côté */
.hero--court {
  --hero-voile: linear-gradient(100deg, rgba(10,13,17,.91) 0%, rgba(10,13,17,.76) 44%, rgba(10,13,17,.44) 100%);
}

.hero__fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__vue {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero__vue.is-on { opacity: 1; }
.hero__voile { position: absolute; inset: 0; z-index: 1; background: var(--hero-voile); }

/* Léger recul de l'image à l'entrée, discret et jamais sur les préférences réduites */
@media (prefers-reduced-motion: no-preference) {
  .hero--diapo .hero__vue { transform: scale(1.06); transition: opacity 1.1s ease, transform 9s ease-out; }
  .hero--diapo .hero__vue.is-on { transform: scale(1); }
}

.hero__puces {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 0;
}
.hero__puces button {
  width: 34px; height: 34px; padding: 0; border: 0;
  background: none; cursor: pointer;
  display: grid; place-items: center;
}
.hero__puces button::before {
  content: ""; display: block;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: width .22s ease, background-color .22s ease, border-radius .22s ease;
}
.hero__puces button:hover::before { background: rgba(255, 255, 255, .75); }
.hero__puces button.on::before { width: 26px; border-radius: 5px; background: #fff; }

.hero__in {
  position: relative; z-index: 2;
  min-height: min(74vh, 640px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(52px, 8vw, 96px);
}
.hero__texte { width: 100%; max-width: 760px; margin-inline: auto; text-align: center; min-width: 0; }
.hero__in { align-items: center; }
.hero .btn-row { justify-content: center; }
.hero__points { justify-content: center; align-items: center; }

/* La bannière du modèle compact garde son texte à gauche, le formulaire occupe la droite */
.hero__in--court { align-items: stretch; }
.hero__in--court .hero__texte { max-width: none; margin-inline: 0; text-align: left; }
.hero__in--court .btn-row { justify-content: flex-start; }
.hero__in--court .hero__points { justify-content: flex-start; align-items: flex-start; }

/* Composition centrée, propre au modèle éditorial */
.hero__in--centre { min-height: min(80vh, 700px); align-items: center; text-align: center; }
.hero__texte--centre { width: 100%; max-width: 840px; margin-inline: auto; min-width: 0; }
.hero__in--centre .btn-row { justify-content: center; }
/* En colonne sur mobile, c est align-items qui centre horizontalement */
.hero__points--centre { justify-content: center; align-items: center; }
.hero--centre h1 { font-size: clamp(2.15rem, 5.6vw, 3.8rem); }
/* Texte centré, donc voile symétrique plutôt que dégradé de côté */
.hero--centre .hero__voile {
  background: linear-gradient(180deg, rgba(10,13,17,.74) 0%, rgba(10,13,17,.62) 45%, rgba(10,13,17,.84) 100%);
}

.hero h1 { color: #fff; margin-bottom: 20px; }
/* Soulignement du nom de ville.
   On passe par la decoration de texte, qui suit les retours a la ligne et ne
   deborde jamais sur la ligne suivante, contrairement a un fond decale. */
.hero h1 { line-height: 1.2; }
/* Le groupe préposition et commune se replie sans script, le script le rend insécable */
.hero__lieu { white-space: normal; }
.hero h1 em {
  font-style: normal; color: #fff;
  white-space: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 5px;
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}

.hero__loc {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 9px 17px 9px 13px; border-radius: 100px;
  font-size: .88rem; font-weight: 600; color: #fff;
  margin-bottom: 22px;
  max-width: 100%; text-align: left;
}
.hero__sub {
  font-size: clamp(1.04rem, 1.7vw, 1.2rem);
  color: rgba(255,255,255,.87); max-width: 590px; margin-inline: auto; margin-bottom: 32px;
}
.hero .btn-row { margin-bottom: 30px; }

.hero__points { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 0; margin: 0; }
.hero__points li {
  list-style: none; display: flex; align-items: center; gap: 9px;
  font-size: .96rem; font-weight: 500; color: rgba(255,255,255,.93);
}
.hero__points .icon { color: var(--accent); }

/* --------------------------------------------------------------------------
   6b. Bandeau illustré en pleine largeur
   -------------------------------------------------------------------------- */
.bande {
  --bande-voile: linear-gradient(180deg, rgba(10,13,17,.88) 0%, rgba(10,13,17,.72) 55%, rgba(10,13,17,.86) 100%);
  background-color: var(--dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding-block: clamp(60px, 7.5vw, 104px);
  text-align: center;
}
.bande h2 { color: #fff; margin-bottom: 14px; }
.bande__intro { color: rgba(255,255,255,.82); font-size: 1.06rem; max-width: 640px; margin: 0 auto; }

.bande__points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(38px, 4.5vw, 58px);
  text-align: left;
}
.bande__point {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px 22px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-l);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.bande__point .icon { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.bande__point strong {
  display: block; font-family: var(--font-title); font-size: 1.06rem;
  color: #fff; margin-bottom: 5px;
}
.bande__point span { display: block; font-size: .93rem; color: rgba(255,255,255,.76); line-height: 1.55; }

.bande .btn-row { justify-content: center; margin-top: clamp(32px, 4vw, 46px); }

/* --------------------------------------------------------------------------
   7. Bandeau de réassurance
   -------------------------------------------------------------------------- */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 30px clamp(16px, 2.2vw, 28px);
  border-left: 1px solid var(--line);
}
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__item:last-child { padding-right: 0; }
.trust__icon { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.trust__item strong {
  display: block; font-family: var(--font-title); font-size: 1rem;
  color: var(--ink); margin-bottom: 3px;
}
.trust__item span { font-size: .89rem; color: var(--muted); line-height: 1.5; display: block; }

/* --------------------------------------------------------------------------
   8. Services
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 26px); }

.svc-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.svc-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft-2); }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .svc-card__img img { transform: scale(1.045); }
.svc-card__icon {
  position: absolute; left: 16px; bottom: 16px;
  width: 48px; height: 48px; border-radius: 14px;
  background: #fff; display: grid; place-items: center;
  color: var(--accent); box-shadow: var(--shadow-s);
}
.svc-card__icon .icon { width: 24px; height: 24px; }
.svc-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.svc-card__body h3 { margin-bottom: 10px; }
.svc-card__body p { color: var(--muted); font-size: .96rem; margin-bottom: 20px; }
.svc-card__body .link-arrow { margin-top: auto; }

.svc-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.svc-mini a {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-title); font-weight: 600; font-size: .98rem; color: var(--ink);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.svc-mini a:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.svc-mini .icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   9. Blocs deux colonnes
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.split--wide-text { grid-template-columns: 1.08fr .92fr; }
.split__media img {
  width: 100%; border-radius: var(--radius-l);
  box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover;
}
.split--reverse .split__media { order: 2; }

/* La photographie épouse la hauteur du texte, sans vide au dessus ni au dessous */
.split--pleine { align-items: stretch; }
.split--pleine .split__media { display: flex; }
.split--pleine .split__media img {
  height: 100%; width: 100%;
  aspect-ratio: auto; min-height: 320px;
  object-fit: cover;
}
.split--reverse .split__body { order: 1; }

.split__stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split__stack img { aspect-ratio: 1 / 1; }
.split__stack img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

.check-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; color: var(--ink-2); }
.check-list li::before {
  content: ""; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background-color: var(--accent-tint);
  background-image: var(--ico-check);
  background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
  margin-top: 2px;
}

.fact-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line);
}
.fact-row strong {
  display: block; font-family: var(--font-title); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: var(--ink); line-height: 1.1;
}
.fact-row span { font-size: .88rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   10. Étapes
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.step {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: 30px 26px 32px;
}
.step__num {
  font-family: var(--font-title); font-weight: 800; font-size: .85rem;
  color: var(--accent); letter-spacing: .1em;
  display: inline-block; margin-bottom: 16px;
}
.step__icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--accent-tint); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 18px;
}
.step__icon .icon { width: 25px; height: 25px; }
.step h3 { font-size: 1.12rem; margin-bottom: 9px; }
.step p { font-size: .94rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   11. Zone d'intervention et carte
   -------------------------------------------------------------------------- */
/* Bande de photographies de chantier */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.galerie--3 { grid-template-columns: repeat(3, 1fr); }
.galerie__vue { margin: 0; }
.galerie__img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.zone { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 4.5vw, 60px); align-items: center; }
.map-frame {
  border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--bg-soft-2); aspect-ratio: 16 / 11;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-note { font-size: .84rem; color: var(--muted-2); margin-top: 12px; text-align: center; }
.map-note a { display: inline-block; padding: 6px 4px; }

.city-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; padding: 0; list-style: none; }
.city-list li {
  background: #fff; border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 100px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   12. Témoignages, carrousel
   -------------------------------------------------------------------------- */
.carr { position: relative; }

.carr__piste {
  display: flex; gap: 22px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 10px;
  margin: -6px -2px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carr__piste::-webkit-scrollbar { display: none; }

.avis {
  flex: 0 0 calc((100% - 44px) / 3);
  scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-s);
}
.avis__marque {
  font-family: var(--font-title); font-size: 2.6rem; font-weight: 800;
  color: var(--accent-tint); line-height: .7; margin-bottom: 14px;
  user-select: none;
}
.avis__texte { font-size: 1rem; color: var(--ink-2); margin-bottom: 22px; flex: 1; }
.avis__pied { display: flex; align-items: center; gap: 13px; padding-top: 18px; border-top: 1px solid var(--line); }
.avis__ini {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 700; font-size: .92rem;
}
.avis__qui strong { display: block; font-family: var(--font-title); font-size: .97rem; color: var(--ink); }
.avis__qui span { font-size: .84rem; color: var(--muted); }

.carr__nav {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  z-index: 3; transition: background-color .16s ease, color .16s ease, opacity .16s ease;
  flex-shrink: 0;
}

/* Commandes latérales, uniquement sur tablette et ordinateur */
.carr > .carr__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.carr__nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.carr__nav[disabled] { opacity: .3; cursor: default; }
.carr__nav[disabled]:hover { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.carr__nav--prec { left: 0; }
.carr__nav--suiv { right: 0; }
.carr__nav .icon { width: 21px; height: 21px; }
.carr__nav--prec .icon { transform: rotate(180deg); }

/* Les puces restent visuellement fines mais offrent une zone de contact confortable. */
.carr__points { display: flex; justify-content: center; gap: 0; margin-top: 18px; }
.carr__points button {
  width: 34px; height: 34px; padding: 0; border: 0;
  background: none; cursor: pointer;
  display: grid; place-items: center;
}
.carr__points button::before {
  content: ""; display: block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
  transition: width .2s ease, background-color .2s ease, border-radius .2s ease;
}
.carr__points button.on::before { width: 24px; border-radius: 5px; background: var(--accent); }

/* Commandes en ligne, réservées au mobile */
.carr__cmd { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
/* Avec de nombreux témoignages, les puces se répartissent sur deux rangs
   plutôt que de pousser les flèches hors de l écran. */
.carr__cmd .carr__points { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
.carr__cmd .carr__nav { position: static; transform: none; }
.carr__cmd .carr__points { margin-top: 0; }

.avis-note { margin-top: 24px; text-align: center; font-size: .87rem; color: var(--muted-2); }

/* --------------------------------------------------------------------------
   13. Bandeau d'appel
   -------------------------------------------------------------------------- */
.cta-band {
  --cta-voile: linear-gradient(112deg, rgba(10,13,17,.92) 0%, rgba(10,13,17,.72) 46%, rgba(10,13,17,.44) 100%);
  background-color: var(--dark);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  color: #fff;
  border-radius: var(--radius-l);
  padding: clamp(38px, 5vw, 66px) clamp(26px, 4.5vw, 62px);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(26px, 3.5vw, 48px); align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.82); margin-bottom: 0; font-size: 1.04rem; }
.cta-band .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-left: auto; }
.cta-band__phone {
  display: block; font-family: var(--font-title); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; margin-bottom: 14px; letter-spacing: -.02em;
}
.cta-band__phone:hover { color: var(--accent); }
.cta-band__side { text-align: right; }
.cta-band__side small { display: block; color: rgba(255,255,255,.65); font-size: .87rem; margin-top: 12px; }

/* --------------------------------------------------------------------------
   14. Pages de prestation
   -------------------------------------------------------------------------- */
.page-hero {
  background: linear-gradient(180deg, var(--accent-wash) 0%, #fff 100%);
  padding-block: clamp(40px, 5vw, 68px) clamp(44px, 5.5vw, 76px);
  border-bottom: 1px solid var(--line);
}
.page-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 4.5vw, 60px); align-items: center; }
.page-hero img { width: 100%; border-radius: var(--radius-l); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }
.page-hero__icon {
  width: 60px; height: 60px; border-radius: 17px;
  background: #fff; border: 1px solid var(--line); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 20px; box-shadow: var(--shadow-s);
}
.page-hero__icon .icon { width: 30px; height: 30px; }
.page-hero h1 { margin-bottom: 18px; }

/* Variante illustrée, le texte passe sur l'image */
.page-hero--image {
  --hero-voile: linear-gradient(100deg, rgba(10,13,17,.92) 0%, rgba(10,13,17,.78) 46%, rgba(10,13,17,.5) 100%);
  background-color: var(--dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 0;
  padding-block: clamp(46px, 6vw, 84px) clamp(50px, 6.5vw, 92px);
}
.page-hero--image .page-hero__grid { grid-template-columns: 1fr; }
.page-hero--image .page-hero__texte { max-width: 760px; }
.page-hero--image h1 { color: #fff; }
.page-hero--image .lead { color: rgba(255,255,255,.86); }
.page-hero--image .crumbs { color: rgba(255,255,255,.58); }
.page-hero--image .crumbs a { color: rgba(255,255,255,.82); }
.page-hero--image .crumbs a:hover { color: #fff; }
.page-hero--image .page-hero__icon {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.26);
  color: #fff;
  box-shadow: none;
}

.crumbs { font-size: .87rem; color: var(--muted-2); margin-bottom: 22px; }
.crumbs a { color: var(--muted); display: inline-block; padding-block: 4px; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { padding: 0 7px; opacity: .55; }

.prose h2 { margin-top: 0; }
.prose h3 { margin-top: 34px; }
.prose p { color: var(--ink-2); }

.info-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--shadow-s);
}
.info-card h3 { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }

.alert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.alert-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .99rem; color: var(--ink-2); }
.alert-list li::before {
  content: ""; flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 3px;
  background-image: var(--ico-alerte);
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 52px); align-items: start; }

.aside-cta {
  background: var(--dark); color: #fff;
  border-radius: var(--radius-l); padding: 32px 30px;
  position: sticky; top: calc(var(--header-h) + 22px);
}
.aside-cta h3 { color: #fff; font-size: 1.24rem; margin-bottom: 10px; }
.aside-cta p { color: rgba(255,255,255,.76); font-size: .95rem; margin-bottom: 22px; }
.aside-cta .btn { width: 100%; }
.aside-cta .btn + .btn { margin-top: 11px; }
.aside-cta__list { list-style: none; padding: 22px 0 0; margin: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 11px; }
.aside-cta__list li { display: flex; gap: 10px; font-size: .91rem; color: rgba(255,255,255,.8); align-items: center; }

.faq {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
/* Un nombre impair de questions : la dernière prend toute la largeur */
.faq details:last-child:nth-child(odd) { grid-column: 1 / -1; }
.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .18s ease;
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-s); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 26px; font-family: var(--font-title);
  font-weight: 600; font-size: 1.06rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background-color: var(--accent-tint);
  background-image: var(--ico-chevron);
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
  transition: transform .24s ease;
}
.faq details[open] summary { padding-bottom: 14px; }
.faq .faq__body { padding: 0 26px 24px; color: var(--muted); font-size: 1rem; max-width: 68ch; }

.svc-block { padding-block: clamp(46px, 5.5vw, 78px); border-bottom: 1px solid var(--line); }
.svc-block:last-of-type { border-bottom: 0; }
.svc-block:nth-child(even) { background: var(--accent-wash); }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 4vw, 56px); align-items: start; }

.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-s);
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--font-title); font-weight: 600;
  font-size: .92rem; color: var(--ink); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 14px 16px; transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 138px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .84rem; color: var(--muted-2); margin-top: 14px; }
.form-msg { display: none; padding: 16px 18px; border-radius: 12px; font-size: .95rem; margin-bottom: 20px; }
.form-msg.is-ok { display: block; background: #ECFDF3; color: #14683F; border: 1px solid #A9E3C3; }
.form-msg.is-err { display: block; background: #FEF2F2; color: #8C2020; border: 1px solid #F3BDBD; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.contact-info { display: grid; gap: 14px; }
.contact-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.contact-item .icon { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-item strong { display: block; font-family: var(--font-title); font-size: .97rem; color: var(--ink); margin-bottom: 3px; }
.contact-item a, .contact-item span { color: var(--muted); font-size: .97rem; overflow-wrap: anywhere; }
.contact-item a { display: inline-flex; align-items: center; min-height: 34px; }
.contact-item a:hover { color: var(--accent); }

.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .96rem;
}
.hours li:last-child { border-bottom: 0; }
.hours li span:first-child { color: var(--muted); }
.hours li span:last-child { font-weight: 600; color: var(--ink); font-family: var(--font-title); }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.footer { background: var(--dark); color: rgba(255,255,255,.72); padding-block: clamp(48px, 6vw, 78px) 0; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: clamp(28px, 4vw, 52px); padding-bottom: clamp(36px, 4.5vw, 56px);
}
.footer .brand__name { color: #fff; }
.footer__about { margin-top: 20px; font-size: .95rem; line-height: 1.7; max-width: 340px; }
.footer h4 {
  color: #fff; font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.footer ul a {
  font-size: .95rem; color: rgba(255,255,255,.72);
  display: inline-flex; align-items: center; min-height: 38px;
  padding-block: 4px; overflow-wrap: anywhere;
  transition: color .16s ease;
}
.footer ul a:hover { color: #fff; }
.footer__contact { gap: 6px; }
.footer__contact li { display: flex; gap: 11px; font-size: .95rem; align-items: center; min-height: 38px; }
.footer__contact li .icon { flex-shrink: 0; }
.footer__contact li span { padding-block: 6px; }
.footer__phone { font-family: var(--font-title); font-weight: 700; font-size: 1.22rem; color: #fff !important; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 4px 26px;
  justify-content: space-between; align-items: center;
  font-size: .86rem; color: rgba(255,255,255,.5);
}
.footer__bar a { display: inline-flex; align-items: center; min-height: 34px; }
.footer__bar a:hover { color: #fff; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 20px; }

/* --------------------------------------------------------------------------
   17. Barre d'appel mobile
   -------------------------------------------------------------------------- */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  box-shadow: 0 -6px 24px rgba(19,23,29,.09);
}
.callbar .btn { flex: 1; padding: 15px 12px; font-size: .97rem; border-radius: 12px; }

/* --------------------------------------------------------------------------
   18. Apparition au défilement
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .carr__piste { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   19. Pages simples
   -------------------------------------------------------------------------- */
.simple-page { padding-block: clamp(52px, 6vw, 90px); }
.simple-page .prose { max-width: 800px; }
.simple-page .prose a { color: var(--accent); padding-block: 8px; }
.simple-page .prose a:hover { text-decoration: underline; }
.simple-page .prose a.btn { padding-block: 17px; }
.simple-page .prose a.btn:hover { text-decoration: none; }
.simple-page h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 42px; }
.simple-page h2:first-of-type { margin-top: 0; }
.notfound { text-align: center; padding-block: clamp(70px, 10vw, 130px); }
.notfound .icon { width: 62px; height: 62px; color: var(--accent); margin: 0 auto 22px; }

/* --------------------------------------------------------------------------
   19b. Modèles de mise en page
   Blocs propres aux variantes éditoriale et compacte. La structure change,
   jamais le contenu.
   -------------------------------------------------------------------------- */

/* ---- Bannière éditoriale, fond clair et photographie à droite ---- */
.hero-edito {
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 78%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(38px, 5.5vw, 84px);
}
.hero-edito__in {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(30px, 4.5vw, 64px); align-items: center;
}
.hero-edito__loc {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent-soft); border: 1px solid var(--accent-tint);
  color: var(--accent);
  padding: 9px 17px 9px 13px; border-radius: 100px;
  font-size: .88rem; font-weight: 600;
  margin-bottom: 20px;
}
.hero-edito h1 { margin-bottom: 18px; }
.hero-edito h1 em { font-style: normal; color: var(--accent); }
.hero-edito__sub { margin-bottom: 28px; max-width: 560px; }
.hero-edito .btn-row { margin-bottom: 26px; }

.hero-edito__points { display: flex; flex-wrap: wrap; gap: 11px 26px; padding: 0; margin: 0; list-style: none; }
.hero-edito__points li { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.hero-edito__points .icon { color: var(--accent); }

.hero-edito__media { position: relative; }
.hero-edito__media img {
  width: 100%; border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); aspect-ratio: 4 / 3.3; object-fit: cover;
}
.hero-edito__joindre {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 20px; margin: -36px 18px 0;
  transition: border-color .18s ease, transform .18s ease;
}
.hero-edito__joindre:hover { border-color: var(--accent); transform: translateY(-2px); }
.hero-edito__joindre-ic {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.hero-edito__joindre > span:last-child { display: block; min-width: 0; }
.hero-edito__joindre strong {
  display: block; font-family: var(--font-title); font-weight: 800;
  font-size: 1.22rem; color: var(--ink); letter-spacing: -.02em; line-height: 1.25;
}
.hero-edito__joindre > span:last-child > span { display: block; font-size: .85rem; color: var(--muted); }

/* ---- Bannière courte avec formulaire de rappel ---- */
.hero--court .hero__in { min-height: 0; }
.hero__in--court {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
  padding-block: clamp(42px, 5.5vw, 80px);
}
.hero__in--court .hero__texte { max-width: none; }
.hero__in--court h1 { font-size: clamp(1.95rem, 3.7vw, 2.9rem); }
.hero__in--court .hero__sub { margin-bottom: 26px; max-width: none; margin-inline: 0; }
.hero__in--court .btn-row { margin-bottom: 24px; }

.rappel {
  background: rgba(255, 255, 255, .97);
  border-radius: var(--radius-l);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-l);
  color: var(--ink-2);
}
.rappel__titre { font-size: 1.32rem; margin-bottom: 6px; }
.rappel__note { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.rappel .field { margin-bottom: 13px; }
.rappel .field label { font-size: .87rem; margin-bottom: 6px; }
.rappel .field input, .rappel .field select { padding: 12px 14px; }
.rappel .btn { margin-top: 6px; }
.rappel .form-msg { margin-bottom: 14px; font-size: .9rem; }

/* ---- Prestations en liste alternée ---- */
.svc-alt-liste { display: grid; gap: clamp(34px, 4.5vw, 66px); }
.svc-alt {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.6vw, 54px); align-items: center;
}
.svc-alt--inverse .svc-alt__media { order: 2; }
.svc-alt__media img {
  width: 100%; border-radius: var(--radius-l);
  box-shadow: var(--shadow); aspect-ratio: 16 / 11; object-fit: cover;
}
.svc-alt__num {
  display: block; font-family: var(--font-title); font-weight: 800;
  font-size: .88rem; letter-spacing: .14em; color: var(--accent); margin-bottom: 12px;
}
.svc-alt__body h2, .svc-alt__body h3 { margin-bottom: 12px; }
.svc-alt__body > p { color: var(--muted); margin-bottom: 0; }
.svc-alt__body .check-list { margin-top: 20px; }

/* ---- Prestations en grille dense ---- */
.svc-dense { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.svc-dense__item {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; min-height: 78px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.svc-dense__item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.svc-dense__ic {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
/* Vignette de la prestation, quand le client a fourni sa photographie */
.svc-dense__vue {
  width: 86px; height: 86px; border-radius: 13px; flex-shrink: 0;
  overflow: hidden; display: block;
}
.svc-dense__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-dense__txt { flex: 1; min-width: 0; }
.svc-dense__txt strong {
  display: block; font-family: var(--font-title); font-weight: 600;
  font-size: 1.02rem; color: var(--ink); line-height: 1.3;
}
.svc-dense__txt > span {
  font-size: .88rem; color: var(--muted); line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-dense__fl { color: var(--muted-2); flex-shrink: 0; display: grid; place-items: center; }
.svc-dense__item:hover .svc-dense__fl { color: var(--accent); }

/* ---- Chiffres mis en avant ---- */
.eyebrow--clair { color: rgba(255, 255, 255, .88); }
.eyebrow--clair::before { background: rgba(255, 255, 255, .88); }

.chiffres {
  background: var(--dark); color: rgba(255, 255, 255, .78);
  padding-block: clamp(48px, 6vw, 84px);
}
.chiffres__in {
  display: grid; grid-template-columns: .88fr 1.12fr;
  gap: clamp(28px, 4vw, 58px); align-items: center;
}
.chiffres__tete p { color: rgba(255, 255, 255, .82); font-size: 1.05rem; margin-bottom: 24px; }
.chiffres__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 18px); }
.chiffres__item {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-l);
  padding: 26px 20px; text-align: center;
}
.chiffres__item strong {
  display: block; font-family: var(--font-title); font-weight: 800;
  font-size: clamp(1.55rem, 2.9vw, 2.25rem); color: #fff;
  line-height: 1.1; margin-bottom: 6px; letter-spacing: -.02em;
}
.chiffres__item span { font-size: .89rem; color: rgba(255, 255, 255, .7); line-height: 1.5; }

/* ---- Étapes en frise ---- */
.frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.frise__etape { position: relative; text-align: center; }
.frise__etape::before {
  content: ""; position: absolute;
  top: 34px; left: calc(50% + 44px); right: calc(-50% + 44px);
  height: 2px; background: var(--line-strong);
}
.frise__etape:last-child::before { display: none; }
.frise__pastille {
  position: relative; z-index: 2;
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent-tint); color: var(--accent);
  display: grid; place-items: center; margin: 0 auto 18px;
}
.frise__pastille .icon { width: 27px; height: 27px; }
.frise__rang {
  display: block; font-family: var(--font-title); font-weight: 800;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.frise h3 { font-size: 1.1rem; margin-bottom: 9px; }
.frise p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ---- Engagements sur fond clair ---- */
.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.engagement {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: 30px 26px 32px;
}
.engagement__ic {
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 18px;
}
.engagement__ic .icon { width: 25px; height: 25px; }
.engagement h3 { font-size: 1.12rem; margin-bottom: 9px; }
.engagement p { font-size: .94rem; color: var(--muted); margin: 0; }

/* ---- Zone d'intervention et questions dans la même section ---- */
.zone-questions {
  margin-top: clamp(46px, 5vw, 74px);
  padding-top: clamp(38px, 4.5vw, 60px);
  border-top: 1px solid var(--line);
}

/* ---- Présentation resserrée ---- */
/* Un seul axe de lecture pour toute la section, texte, liste et chiffres */
.presentation-serree { max-width: 700px; margin-inline: auto; text-align: center; }
.presentation-serree__texte p { color: var(--ink-2); }
.presentation-serree .check-list { text-align: left; margin-top: 30px; align-content: start; }
.check-list--deux { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.check-list--serree { margin-top: 16px; gap: 9px; }
.check-list--serree li { font-size: .92rem; }
.check-list--serree li::before { width: 20px; height: 20px; background-size: 11px 11px; }

/* ---- Section sombre, témoignages du modèle éditorial ---- */
.sec-dark { background: var(--dark); color: rgba(255, 255, 255, .78); }
/* Photo de fond des témoignages, couverte d un voile sombre pour la lecture */
.sec-fond {
  position: relative; isolation: isolate;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.sec-fond::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,13,17,.82) 0%, rgba(10,13,17,.74) 50%, rgba(10,13,17,.86) 100%);
}
.sec-fond .avis { background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-dark .sec-head p { color: rgba(255, 255, 255, .72); }
.sec-dark .avis { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.sec-dark .avis__texte { color: rgba(255, 255, 255, .88); }
.sec-dark .avis__marque { color: rgba(255, 255, 255, .3); }
.sec-dark .avis__pied { border-top-color: rgba(255, 255, 255, .14); }
.sec-dark .avis__ini { background: rgba(255, 255, 255, .12); color: #fff; }
.sec-dark .avis__qui strong { color: #fff; }
.sec-dark .avis__qui span { color: rgba(255, 255, 255, .62); }
.sec-dark .carr__nav { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
.sec-dark .carr__nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sec-dark .carr__nav[disabled]:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.sec-dark .carr__points button::before { background: rgba(255, 255, 255, .32); }
.sec-dark .carr__points button.on::before { background: var(--accent); }

/* ---- Cartes de prestation portant un titre de niveau deux ---- */
.svc-card__body h2 { font-size: clamp(1.15rem, 2vw, 1.42rem); margin-bottom: 10px; }

/* ---- Bannière interne raccourcie ---- */
.page-hero--court { padding-block: clamp(32px, 4vw, 54px) clamp(34px, 4.4vw, 60px); }
.page-hero__media img { aspect-ratio: 4 / 3; }

/* ---- Paliers propres à ces blocs ---- */
@media (max-width: 1024px) {
  .frise { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .frise__etape::before { display: none; }
}

@media (max-width: 980px) {
  .hero-edito__in { grid-template-columns: 1fr; gap: 32px; }
  .hero-edito__sub { max-width: none; }
  .hero-edito__media img { aspect-ratio: 16 / 10; }

  .hero__in--court { grid-template-columns: 1fr; gap: 30px; }

  .svc-alt { grid-template-columns: 1fr; gap: 24px; }
  .svc-alt--inverse .svc-alt__media { order: initial; }

  .chiffres__in { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hero-edito { padding-block: 34px 40px; }
  .hero-edito .btn-row .btn { width: 100%; }
  .hero-edito__points { flex-direction: column; gap: 11px; }
  .hero-edito__joindre { margin-inline: 12px; padding: 12px 16px; }

  .hero__in--court { padding-block: 36px 40px; }
  .rappel { padding: 22px 18px 24px; }

  .svc-dense { grid-template-columns: 1fr; }
  .chiffres__grille { grid-template-columns: 1fr; }
  .engagements { grid-template-columns: 1fr; }
  .check-list--deux { grid-template-columns: 1fr; }
  .frise { grid-template-columns: 1fr; row-gap: 30px; }
  .presentation-serree .fact-row { text-align: left; }
}

/* ==========================================================================
   20. Adaptation aux écrans
   ========================================================================== */

/* Sous 1260 px les commandes n ont plus de place hors du cadre,
   on leur réserve une gouttière pour qu elles ne chevauchent pas les cartes. */
/* Une gouttière est réservée à toutes les largeurs, pour que les commandes
   ne chevauchent jamais la première ni la dernière carte. */
@media (min-width: 768px) {
  .carr { padding-inline: 64px; }
  .carr > .carr__nav--prec { left: 0; }
  .carr > .carr__nav--suiv { right: 0; }
}
@media (max-width: 767px) {
  .carr { padding-inline: 0; }
}

@media (max-width: 1340px) {
  .header__inner { gap: 14px; }
  .brand__name { font-size: 1.08rem; }
  .nav > a, .nav__parent > a { padding: 10px 9px; font-size: .92rem; }
  .header__phone { font-size: .95rem; }
}

@media (max-width: 1190px) {
  .nav a[href*="#entreprise"], .nav a[href*="#zone"] { display: none; }
}

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__col--nav { display: none; }
}

/* Tablette : la navigation passe en panneau, les témoignages restent par trois */
@media (max-width: 980px) {
  :root { --header-h: 84px; }

  .nav { display: none; }
  .header__phone { display: none; }
  .burger { display: inline-flex; }
  .header__actions .btn { display: none; }

  .hero__in { min-height: 0; padding-block: clamp(44px, 7vw, 72px); }
  .hero__sub { max-width: none; }

  .galerie { grid-template-columns: repeat(3, 1fr); }
  .galerie__vue:nth-child(n+4) { display: none; }

  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item { border-left: 0; padding: 22px 0; border-top: 1px solid var(--line); }
  .trust__item:nth-child(-n+2) { border-top: 0; }
  .trust__item:nth-child(odd) { padding-right: 18px; }
  .trust__item:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }

  /* La tablette garde trois prestations de front, comme l ordinateur */
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .svc-mini { grid-template-columns: repeat(2, 1fr); }

  .bande__points { grid-template-columns: 1fr; gap: 14px; }
  .bande__point { padding: 20px 18px; }

  .split, .zone, .page-hero__grid, .two-col, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media, .split--reverse .split__body { order: initial; }
  .split__media img, .page-hero img { aspect-ratio: 16 / 10; }
  .zone__media { order: 2; }

  .aside-cta { position: static; }
  .steps { grid-template-columns: repeat(2, 1fr); }

  .faq { grid-template-columns: 1fr; }
  .faq details:last-child:nth-child(odd) { grid-column: auto; }

  .cta-band { grid-template-columns: 1fr; text-align: center; }
  .cta-band__side { text-align: center; }
  .cta-band .btn-row { margin-inline: auto; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
  .footer__about { max-width: none; }

  .callbar { display: flex; }
  body { padding-bottom: 76px; }

  .carr__piste { gap: 14px; }
  .avis { flex-basis: calc((100% - 28px) / 3); padding: 22px 20px 20px; }
  .avis__marque { font-size: 2.1rem; margin-bottom: 10px; }
  .avis__texte { font-size: .93rem; margin-bottom: 16px; }
  .avis__pied { padding-top: 14px; }
  .avis__ini { width: 36px; height: 36px; font-size: .82rem; }
  .avis__qui strong { font-size: .9rem; }
  .avis__qui span { font-size: .79rem; }
  .carr__nav { width: 42px; height: 42px; }
}

/* Mobile : un témoignage à la fois, flèches sous la carte */
@media (max-width: 767px) {
  body { font-size: 16px; }

  .brand__mark { width: 50px; height: 50px; }
  .brand__mark--image { width: auto; height: 54px; max-width: 180px; }
  .brand__name { font-size: 1.04rem; }

  .hero__in { padding-block: 40px 44px; }
  .hero__loc { margin-bottom: 18px; font-size: .82rem; padding: 8px 14px 8px 10px; }
  .hero h1 { margin-bottom: 16px; }
  .hero h1 em { text-decoration-thickness: 4px; text-underline-offset: 5px; }
  .hero__sub { margin-bottom: 24px; }
  .hero .btn-row { gap: 11px; margin-bottom: 26px; }
  .hero .btn-row .btn { width: 100%; }
  .hero__points { flex-direction: column; gap: 11px; }

  .trust__grid { grid-template-columns: 1fr; }
  .trust__item { padding: 18px 0 !important; border-left: 0 !important; border-top: 1px solid var(--line); }
  .trust__item:first-child { border-top: 0; }

  .svc-grid { grid-template-columns: 1fr; }
  .svc-mini { grid-template-columns: 1fr; }
  .svc-card__body { padding: 20px 20px 22px; }

  .steps { grid-template-columns: 1fr; }
  .step { padding: 24px 22px 26px; }

  .fact-row { grid-template-columns: 1fr; gap: 16px; }
  .fact-row > div { display: flex; align-items: baseline; gap: 12px; }
  .fact-row strong { font-size: 1.4rem; }

  .split__stack { grid-template-columns: 1fr; }
  .split__stack img:first-child { grid-column: auto; }
  .split__stack img:not(:first-child) { display: none; }

  /* Quatre vues sur deux rangs, la grille reste pleine */
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie__vue:nth-child(n+4) { display: block; }

  .avis { flex-basis: 100%; padding: 26px 22px 24px; }
  .avis__texte { font-size: .98rem; margin-bottom: 20px; }
  .avis__marque { font-size: 2.4rem; }
  .carr > .carr__nav { display: none; }
  .carr__cmd { display: flex; gap: 8px; }
  .carr__cmd .carr__nav { width: 46px; height: 46px; }
  /* Les puces se resserrent en largeur, leur zone de contact garde sa hauteur */
  .carr__cmd .carr__points button { width: 24px; }
  .carr__points--large { display: none; }

  .cta-band { padding: 32px 22px 34px; border-radius: var(--radius); }
  .cta-band .btn-row { max-width: none; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 24px 20px 26px; }

  .map-frame { aspect-ratio: 4 / 3.4; border-radius: var(--radius); }

  .faq summary { padding: 18px 20px; font-size: 1rem; }
  .faq .faq__body { padding: 0 20px 20px; }

  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 2px; }

  .btn { padding: 16px 24px; }
  .btn--lg { padding: 18px 26px; font-size: 1rem; }

  /* Boutons empilés dans les blocs de contenu : une seule largeur, pas de marches */
  .svc-alt__body .btn-row .btn,
  .split__body .btn-row .btn,
  .presentation-serree .btn-row .btn,
  .zone .btn-row .btn { width: 100%; }
}

/* Au dessus du mobile, seules les commandes latérales sont utilisées */
@media (min-width: 768px) { .carr__cmd { display: none !important; } }

@media (max-width: 380px) {
  .callbar .btn { font-size: .9rem; padding: 14px 8px; }
  .header__inner { gap: 12px; }
}

/* Impression */
@media print {
  .header, .callbar, .mobile-nav, .cta-band, .footer__bar, .carr__nav { display: none !important; }
  body { padding-bottom: 0; }
  .hero { background: none !important; color: var(--ink); }
  .hero__fond, .hero__voile, .hero__puces { display: none !important; }
  .hero h1, .hero__sub, .hero__points li { color: var(--ink) !important; }
}