/* ==========================================================================
   Société Réponse — feuille de style principale
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Poppins");
}

:root {
  /* Brand — vert historique conservé */
  --c-green-950: #0e2b10;
  --c-green-900: #143d16;
  --c-green-700: #2c6810;
  --c-green-600: #3e8914;
  --c-green-500: #4c9f1c;
  --c-green-400: #6eb92b;
  --c-green-300: #8fd93a;
  --c-green-100: #e6f3da;
  --c-green-50:  #f2f8ec;

  --c-amber-500: #f2a900;
  --c-amber-400: #ffc72c;
  --c-amber-100: #fff4d6;

  --c-ink-900: #12160f;
  --c-ink-700: #2b322a;
  --c-ink-500: #5b6459;
  --c-ink-300: #8b948a;
  --c-ink-100: #dfe4dc;

  --c-cream: #f7f7f2;
  --c-cream-dark: #efefe6;
  --c-white: #ffffff;

  --c-danger: #c2402b;

  /* Typographie */
  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --fs-xs:   clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --fs-sm:   clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --fs-base: clamp(0.98rem, 0.94rem + 0.18vw, 1.06rem);
  --fs-md:   clamp(1.1rem, 1.03rem + 0.3vw, 1.28rem);
  --fs-lg:   clamp(1.3rem, 1.18rem + 0.55vw, 1.64rem);
  --fs-xl:   clamp(1.6rem, 1.4rem + 0.9vw, 2.15rem);
  --fs-2xl:  clamp(2.0rem, 1.65rem + 1.6vw, 2.9rem);
  --fs-3xl:  clamp(2.5rem, 1.95rem + 2.6vw, 3.9rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  /* Espacements (échelle 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-pad: clamp(3.5rem, 3rem + 2.5vw, 6.5rem);

  /* Rayons & ombres */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 22, 15, 0.06), 0 1px 1px rgba(18, 22, 15, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(18, 22, 15, 0.16), 0 2px 8px -2px rgba(18, 22, 15, 0.08);
  --shadow-lg: 0 24px 48px -16px rgba(14, 43, 16, 0.28), 0 4px 16px -4px rgba(14, 43, 16, 0.12);
  --shadow-green: 0 14px 30px -10px rgba(62, 137, 20, 0.45);

  --container: 1240px;
  --container-narrow: 820px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 220ms var(--ease);

  --header-h: 84px;
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  min-height: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink-900);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-ink-900);
  letter-spacing: -0.01em;
}
p { max-width: 68ch; }


/* ---------------- Accessibilité ---------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--c-green-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top 160ms ease;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 3px solid var(--c-amber-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- Layout utilitaires ---------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-pad); }
#devis-start { scroll-margin-top: var(--header-h); }
#form-devis { scroll-margin-top: var(--header-h); }
#candidature { scroll-margin-top: var(--header-h); }
.section--alt { background: var(--c-cream); }
.section--dark {
  background: linear-gradient(160deg, var(--c-green-950), var(--c-green-900) 60%, var(--c-green-700));
  color: #fff;
}
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-green-700);
  background: var(--c-green-100);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
}
.section--dark .eyebrow { color: var(--c-green-300); background: rgba(255,255,255,0.1); }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-amber-500); }

.section-head { max-width: 640px; margin-bottom: var(--sp-10); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-2xl); margin-top: var(--sp-3); }
.section-head p { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--c-ink-500); }
.section--dark .section-head p { color: rgba(255,255,255,0.78); }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }


/* ---------------- Boutons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary {
  background: var(--c-green-600);
  color: #fff;
  box-shadow: var(--shadow-green);
}
.btn-primary:hover { background: var(--c-green-700); transform: translateY(-2px); box-shadow: 0 20px 34px -12px rgba(62,137,20,0.55); }
.btn-accent {
  background: var(--c-amber-500);
  color: var(--c-ink-900);
  box-shadow: 0 14px 28px -10px rgba(242, 169, 0, 0.5);
}
.btn-accent:hover { background: var(--c-amber-400); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--c-ink-900);
}
.btn-outline:hover { background: var(--c-ink-900); color: #fff; }
.section--dark .btn-outline { color: #fff; }
.section--dark .btn-outline:hover { background: #fff; color: var(--c-green-900); }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-ghost:hover { background: rgba(255,255,255,0.22); }
.btn-block { width: 100%; }
.btn-lg { padding: 1.15rem 2.1rem; font-size: var(--fs-base); }
.btn-sm { padding: 0.6rem 1.2rem; font-size: var(--fs-xs); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---------------- En-tête ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(18,22,15,0.18); border-color: var(--c-ink-100); }
.header-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.logo-link { display: flex; align-items: center; flex: none; }
.logo-img { height: 64px; width: auto; }

.main-nav { display: none; min-width: 0; overflow: hidden; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.15rem + 0.6vw, 1rem);
  flex-wrap: nowrap;
  /* Safety net: if the viewport is ever too narrow for every item to fit
     (unusual zoom level, browser translation widening text, a future extra
     menu item, etc.) the list scrolls internally instead of spilling out
     of its box and overlapping the CTA buttons next to it. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.78rem, 0.73rem + 0.22vw, 0.88rem);
  color: var(--c-ink-700);
  padding: 0.4rem 0.1rem;
  position: relative;
  white-space: nowrap;
  flex: none;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--c-green-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--c-green-700); }

.header-cta { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.nav-cta {
  display: none;
  align-items: center;
  background: var(--c-amber-500);
  color: var(--c-ink-900);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-full);
  box-shadow: 0 14px 28px -10px rgba(242, 169, 0, 0.5);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  flex: none;
}
.nav-cta:hover { background: var(--c-amber-400); transform: translateY(-2px); }
.call-box {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-ink-900);
  color: #fff;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-full);
  transition: background var(--transition);
  flex: none;
}
.call-box:hover { background: var(--c-green-900); }
.call-box svg { width: 20px; height: 20px; color: var(--c-green-300); flex: none; }
.call-box-text { display: flex; flex-direction: column; line-height: 1.15; }
.call-box-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); }
.call-box-number { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }

.call-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-green-600);
  color: #fff;
  flex: none;
}
.call-fab svg { width: 20px; height: 20px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--c-cream-dark);
  border: 1px solid var(--c-ink-100);
  flex: none;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--c-white);
  z-index: 480;
  padding: var(--sp-6) clamp(1.25rem, 1rem + 2vw, 2.5rem) var(--sp-10);
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--c-ink-100);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
}
.mobile-nav-link[aria-current="page"] { color: var(--c-green-700); }
.mobile-nav-foot { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }

@media (min-width: 1300px) {
  .main-nav { display: block; }
  .nav-toggle, .mobile-nav, .call-fab { display: none; }
  .call-box { display: flex; }
  .nav-cta { display: flex; }
}

/* ---------------- Fil d'Ariane ---------------- */
.breadcrumbs {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-ink-100);
  background: var(--c-cream);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); color: var(--c-ink-500); }
.breadcrumbs a { font-weight: 600; }
.breadcrumbs a:hover { color: var(--c-green-700); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--c-ink-300); }
.breadcrumbs li[aria-current="page"] { color: var(--c-ink-700); }

/* ---------------- Bandeau urgence ---------------- */
.top-banner {
  background: var(--c-green-900);
  color: #fff;
  font-size: var(--fs-xs);
  text-align: center;
  padding: 0.5rem 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.top-banner a { color: var(--c-green-300); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- Héros ---------------- */
.hero { position: relative; overflow: hidden; color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,26,10,0.78) 0%, rgba(10,32,12,0.66) 32%, rgba(12,38,14,0.32) 58%, rgba(14,42,16,0.08) 82%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  min-height: calc(100svh - var(--header-h) - 44px);
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  display: grid;
  align-content: center;
  gap: var(--sp-8);
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-green-300);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
  margin-bottom: var(--sp-4);
}
.hero-kicker .dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-green-300); flex: none;
  box-shadow: 0 0 0 rgba(143,217,58,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(143,217,58,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(143,217,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(143,217,58,0); }
}
.hero-title { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.35rem); line-height: 1.08; max-width: 15ch; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.5); }
.hero-title .accent { display: block; color: var(--c-green-300); text-shadow: 0 2px 14px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.6); }
.hero-lede { margin-top: var(--sp-4); font-size: var(--fs-base); color: rgba(255,255,255,0.86); max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-rating { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--sp-5); font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,0.82); }
.hero-rating .stars { color: var(--c-amber-400); font-size: 0.95rem; letter-spacing: 1px; }

.hero-panel {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--c-ink-900);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  max-width: 340px;
}
.hero-panel h2 { font-size: var(--fs-lg); }
.hero-panel p { color: var(--c-ink-500); margin-top: var(--sp-2); font-size: var(--fs-sm); }
.hero-panel-list { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-panel-list li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); font-weight: 600; }
.hero-panel-list svg { width: 20px; height: 20px; color: var(--c-green-600); flex: none; }
.hero-panel .btn { margin-top: var(--sp-6); }

.hero-panel--compact { display: flex; flex-direction: column; padding: var(--sp-5); max-width: 300px; }
.hero-panel--compact .hero-panel-head { display: flex; align-items: center; gap: 0.65rem; }
.hero-panel--compact .hero-panel-icon {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--c-green-100); color: var(--c-green-700);
  display: flex; align-items: center; justify-content: center;
}
.hero-panel--compact .hero-panel-icon svg { width: 18px; height: 18px; }
.hero-panel--compact h2 { font-size: var(--fs-base); }
.hero-panel--compact p { margin-top: 0.5rem; font-size: var(--fs-xs); }
.hero-panel--compact .btn { margin-top: var(--sp-4); }
.hero-panel--compact .btn-block { width: auto; }


/* ---------------- Bande de confiance ---------------- */
.trust-strip { background: var(--c-ink-900); color: #fff; }
.trust-strip .grid-4 { padding-block: var(--sp-8); }
.trust-card { display: flex; gap: var(--sp-4); align-items: flex-start; }
.trust-card svg { width: 30px; height: 30px; color: var(--c-green-300); flex: none; }
.trust-card h3 { font-size: var(--fs-sm); color: #fff; }
.trust-card p { font-size: var(--fs-xs); color: rgba(255,255,255,0.65); margin-top: 0.25rem; }

/* ---------------- Cartes de service ---------------- */
.service-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-ink-100);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.service-card[data-href] { cursor: pointer; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--c-green-300); }
.service-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.service-card:hover .service-card-media img { transform: scale(1.06); }
.service-card-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.service-card-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--c-green-100);
  color: var(--c-green-700);
  display: flex; align-items: center; justify-content: center;
}
.service-card-icon svg { width: 24px; height: 24px; }
.service-card-body h3 { font-size: var(--fs-md); }
.service-card-body p { color: var(--c-ink-500); font-size: var(--fs-sm); flex: 1; }
.service-card-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--c-green-700); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.service-card-link svg { width: 16px; height: 16px; transition: transform var(--transition); }
.service-card:hover .service-card-link svg { transform: translateX(4px); }

/* ---------------- Étapes / process ---------------- */
.steps { counter-reset: step; }
.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}
.step-num {
  position: absolute;
  top: -18px; left: var(--sp-6);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-green-600);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 8px 18px -6px rgba(62,137,20,0.6);
}
.step-card h3 { font-size: var(--fs-md); margin-top: var(--sp-3); }
.step-card p { font-size: var(--fs-sm); color: var(--c-ink-500); margin-top: var(--sp-2); }
@media (min-width: 901px) {
  .steps .step-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: calc(-1 * var(--sp-6) - 5px);
    width: 10px; height: 10px;
    border-top: 2.5px solid var(--c-green-500);
    border-right: 2.5px solid var(--c-green-500);
    transform: rotate(45deg);
  }
}

/* ---------------- Chiffres clés ---------------- */
.stat-card { text-align: center; padding: var(--sp-6); }
.stat-num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); color: var(--c-green-700); }
.section--dark .stat-num { color: var(--c-green-300); }
.stat-label { font-size: var(--fs-xs); color: var(--c-ink-500); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 0.4rem; }
.section--dark .stat-label { color: rgba(255,255,255,0.7); }

/* ---------------- FAQ (details/summary natif = accessible) ---------------- */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  background: #fff;
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-green-100);
  color: var(--c-green-700);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.faq-item[open] summary .plus { transform: rotate(45deg); background: var(--c-green-600); color: #fff; }
.faq-item .faq-answer { padding: 0 var(--sp-6) var(--sp-6); color: var(--c-ink-500); font-size: var(--fs-sm); }

/* ---------------- Formulaires ---------------- */
/* ---------------- Catalogue BPU (devis en ligne) ---------------- */
.bpu-catalog { display: flex; flex-direction: column; gap: var(--sp-3); }
.bpu-category {
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}
.bpu-category summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.bpu-category summary::-webkit-details-marker { display: none; }
.bpu-category-icon { width: 22px; height: 22px; color: var(--c-green-700); flex: none; }
.bpu-category-icon svg { width: 22px; height: 22px; }
.bpu-category-name { flex: 1; }
.bpu-category-count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  background: var(--c-green-600);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}
.bpu-category summary .bpu-chevron {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-green-100);
  color: var(--c-green-700);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.bpu-category summary .bpu-chevron svg { width: 15px; height: 15px; }
.bpu-category[open] summary .bpu-chevron { transform: rotate(180deg); background: var(--c-green-600); color: #fff; }
.bpu-items { border-top: 1px solid var(--c-ink-100); }
.bpu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--c-ink-100);
  flex-wrap: wrap;
}
.bpu-item:last-child { border-bottom: none; }
.bpu-item-name { flex: 1; min-width: 140px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-900); }
.bpu-item-price { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-700); white-space: nowrap; }
.bpu-item-unit { font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink-500); margin-left: 0.2rem; }

.bpu-item--check { cursor: pointer; }
.bpu-item--check .bpu-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bpu-item-box {
  width: 22px; height: 22px; flex: none;
  border-radius: 6px;
  border: 2px solid var(--c-ink-300);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.bpu-item-box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity 120ms ease; }
.bpu-check:checked ~ .bpu-item-box { background: var(--c-green-600); border-color: var(--c-green-600); }
.bpu-check:checked ~ .bpu-item-box svg { opacity: 1; }
.bpu-check:focus-visible ~ .bpu-item-box { outline: 3px solid var(--c-amber-500); outline-offset: 2px; }
.bpu-item--check:has(.bpu-check:checked) { background: var(--c-green-50); }

.bpu-qty { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.qty-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-ink-100);
  background: var(--c-cream);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-ink-700);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.qty-btn:hover { background: var(--c-green-100); border-color: var(--c-green-300); }
.qty-input {
  width: 42px;
  text-align: center;
  border: 1.5px solid var(--c-ink-100);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.2rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bpu-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 860px) {
  .bpu-layout { grid-template-columns: 1.6fr 1fr; }
}

.bpu-summary {
  background: var(--c-cream);
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
@media (min-width: 860px) {
  .bpu-summary {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    max-height: min(460px, calc(100vh - var(--header-h) - var(--sp-8)));
    display: flex;
    flex-direction: column;
  }
}
.bpu-summary-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink-900); flex: none; }
.bpu-summary-list { margin-top: var(--sp-4); flex: 1 1 auto; min-height: 40px; overflow-y: auto; }
.bpu-summary-empty { font-size: var(--fs-xs); color: var(--c-ink-500); }
.bpu-summary-items { display: flex; flex-direction: column; gap: var(--sp-3); }
.bpu-summary-items li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-700); }
.bpu-summary-item-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.bpu-summary-item-price { font-weight: 700; white-space: nowrap; color: var(--c-ink-900); }
.bpu-mini-btn {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink-100);
  background: #fff;
  color: var(--c-ink-700);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.bpu-mini-btn:hover { background: var(--c-green-100); border-color: var(--c-green-300); }
.bpu-mini-remove { color: var(--c-red-600, #c0392b); }
.bpu-mini-remove:hover { background: #fdecea; border-color: #f5b8b1; }
.bpu-summary-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex: none;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-ink-100);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md);
  color: var(--c-ink-900);
}
.bpu-summary > .btn { flex: none; }
.bpu-total-hint { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-500); flex: none; }

.estimate-box {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--c-green-50);
  border: 1px solid var(--c-green-300);
  border-radius: var(--radius-lg);
  text-align: center;
}
.estimate-label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-green-700); margin-bottom: var(--sp-3); }
.estimate-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--c-ink-900); }
.estimate-value--solo { font-size: var(--fs-2xl); }
.estimate-detail { margin-top: var(--sp-4); text-align: left; }
.estimate-detail summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-green-700);
}
.estimate-detail summary::-webkit-details-marker { display: none; }
.estimate-detail summary .plus { transition: transform 150ms ease; line-height: 1; }
.estimate-detail[open] summary { margin-bottom: var(--sp-3); }
.estimate-detail[open] summary .plus { transform: rotate(45deg); }
.estimate-lines { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px dashed var(--c-green-300); }
.estimate-lines li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--c-ink-700); }
.estimate-lines li span:last-child { font-weight: 600; white-space: nowrap; }
.estimate-lines-divider, .estimate-lines li.estimate-lines-divider { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); margin: var(--sp-2) 0 0.1rem; }
.estimate-lines-divider::before, .estimate-lines-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-green-100); }
.estimate-lines-divider span { flex: none; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-ink-500); }
.estimate-lines li.is-auto span:first-child { color: var(--c-ink-500); }
.estimate-caveat { display: block; margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-ink-500); }
.estimate-custom { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-700); }

.urgent-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-amber-100);
  border: 1px solid var(--c-amber-400);
  border-radius: var(--radius-md);
}
.urgent-box-title { font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink-900); }
.urgent-box-sub { font-size: var(--fs-xs); color: var(--c-ink-700); margin-top: 0.15rem; }

/* ---------------- Devis en ligne : intro centrée + formulaire pleine largeur ---------------- */
.devis-intro { max-width: 760px; margin-inline: auto; text-align: center; }
.devis-intro .eyebrow { justify-content: center; }
.devis-intro h2 { font-size: var(--fs-xl); margin-top: var(--sp-3); }
.urgent-box--wide { max-width: 620px; margin-inline: auto; margin-top: var(--sp-6); text-align: left; }
.devis-benefits-grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-6);
  text-align: left;
}
.devis-benefit { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-700); }
.devis-benefit svg { width: 20px; height: 20px; color: var(--c-green-600); flex: none; }
.devis-indicative-note {
  margin: var(--sp-6) auto 0;
  max-width: 620px;
  padding: var(--sp-4);
  background: var(--c-green-50);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--c-ink-700);
}
.form-card--wide { max-width: 1000px; margin: var(--sp-10) auto 0; }
@media (max-width: 640px) {
  .devis-benefits-grid { grid-template-columns: 1fr; }
}

.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-ink-100);
  box-shadow: var(--shadow-md);
  padding: var(--sp-8);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-5); }
.field label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-ink-700); }
.field .hint { font-size: var(--fs-xs); color: var(--c-ink-500); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--c-ink-100);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: var(--c-cream);
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-green-500);
  background: #fff;
  outline: none;
}
.field textarea { resize: vertical; min-height: 110px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--c-danger); }
.field-error { font-size: var(--fs-xs); color: var(--c-danger); font-weight: 600; display: none; }
.field.has-error .field-error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.6rem; }
@media (max-width: 480px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-chip { position: relative; }
.choice-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-chip label {
  display: flex; align-items: center; gap: 0.7rem;
  border: 1.5px solid var(--c-ink-100);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  min-height: 4.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  transition: border-color var(--transition), background var(--transition);
}
.choice-chip svg { width: 20px; height: 20px; color: var(--c-green-700); flex: none; }
.choice-chip .chip-box {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--c-ink-300);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  transition: background var(--transition), border-color var(--transition);
}
.choice-chip .chip-box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity 120ms ease; }
.choice-chip input:checked + label { border-color: var(--c-green-600); background: var(--c-green-50); }
.choice-chip input:checked + label .chip-box { background: var(--c-green-600); border-color: var(--c-green-600); }
.choice-chip input:checked + label .chip-box svg { opacity: 1; }
.choice-chip input:focus-visible + label { outline: 3px solid var(--c-amber-500); outline-offset: 2px; }

.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1.5px dashed var(--c-ink-100);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  background: var(--c-cream);
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
}
.file-drop:hover, .file-drop:focus-within { border-color: var(--c-green-500); background: #fff; }
.file-drop.has-file { border-style: solid; border-color: var(--c-green-600); background: var(--c-green-50); }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-drop-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--c-green-100);
  color: var(--c-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.file-drop.has-file .file-drop-icon { background: var(--c-green-600); color: #fff; }
.file-drop-icon svg { width: 22px; height: 22px; }
.file-drop-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.file-drop-title { font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop-browse { color: var(--c-green-700); text-decoration: underline; }
.file-drop-sub { font-size: var(--fs-xs); color: var(--c-ink-500); }
.field.has-error .file-drop { border-color: var(--c-danger); }

.consent-field { margin-bottom: var(--sp-5); }
.consent-field-row { display: flex; align-items: flex-start; gap: 0.7rem; }
.consent-field input { position: relative; top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--c-green-600); }
.consent-field label { font-size: var(--fs-xs); color: var(--c-ink-700); line-height: var(--lh-snug); text-transform: none; letter-spacing: 0; font-weight: 400; }
.consent-field label a { font-weight: 700; color: var(--c-green-700); }
.consent-field.has-error .consent-field-row { outline: 1.5px solid var(--c-danger); border-radius: var(--radius-sm); padding: 0.5rem; margin: -0.5rem; }
.consent-field .field-error { display: none; margin-top: 0.5rem; }
.consent-field.has-error .field-error { display: block; }


.form-steps { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.form-step-dot {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c-ink-100);
  overflow: hidden;
}
.form-step-dot > span { display: block; height: 100%; width: 0%; background: var(--c-green-600); transition: width var(--transition); }
.form-step-dot.is-done > span, .form-step-dot.is-active > span { width: 100%; }
.form-step-label { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--c-ink-500); margin-bottom: var(--sp-3); font-weight: 600; max-width: none; }

.form-panel[hidden] { display: none; }
.form-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); }

.form-success { text-align: center; padding: var(--sp-10) var(--sp-4); }
.form-success .icon-success {
  width: 68px; height: 68px; margin-inline: auto;
  border-radius: 50%; background: var(--c-green-100); color: var(--c-green-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5);
}
.form-success .icon-success svg { width: 34px; height: 34px; }

/* ---------------- Zones / carte ---------------- */
.zone-card {
  background: #fff;
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.zone-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.zone-card-head { display: flex; align-items: baseline; gap: 0.65rem; }
.zone-card-code { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--c-green-700); flex: none; }
.zone-card-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.zone-card p { margin-top: var(--sp-3); color: var(--c-ink-500); font-size: var(--fs-sm); }
.zone-card-towns { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: auto; }
.zone-card-towns span { font-size: var(--fs-xs); background: var(--c-cream); padding: 0.3rem 0.65rem; border-radius: var(--radius-full); font-weight: 600; color: var(--c-ink-700); }
.zone-card-cta { display: flex; flex-wrap: wrap; row-gap: var(--sp-2); gap: var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-ink-100); }
.zone-card-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 700; color: var(--c-green-700); transition: color var(--transition); }
.zone-card-link svg { width: 16px; height: 16px; flex: none; }
.zone-card-link:hover { color: var(--c-green-900); }

/* ---------------- Bannière CTA ---------------- */
.cta-banner {
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--c-green-900), var(--c-green-700) 65%, var(--c-green-600));
  color: #fff;
  padding: var(--sp-12) clamp(1.5rem, 3vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
}
.cta-banner h2 { color: #fff; font-size: var(--fs-xl); max-width: 20ch; }
.cta-banner h2.cta-banner-h2--tight { font-size: var(--fs-lg); max-width: 42ch; line-height: 1.25; }
.cta-banner p { color: rgba(255,255,255,0.82); margin-top: var(--sp-2); }
.cta-banner-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; position: relative; z-index: 1; }

/* ---------------- Pied de page ---------------- */
.site-footer { background: var(--c-ink-900); color: rgba(255,255,255,0.78); }
.footer-top { padding-block: var(--sp-16); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-10); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-logo { margin-bottom: var(--sp-4); filter: brightness(0) invert(1); }
.footer-about p { font-size: var(--fs-sm); color: rgba(255,255,255,0.65); }
.footer-heading { font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: var(--sp-4); font-weight: 700; }
.footer-links { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-links a { font-size: var(--fs-sm); }
.footer-links a:hover { color: var(--c-green-300); }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-sm); margin-bottom: 0.75rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--c-green-300); flex: none; margin-top: 2px; }
.footer-phone-label { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-bottom: 0.1rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,0.5);
}
.footer-bottom-links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-bottom-links a:hover { color: #fff; }

.service-card--cta {
  background: linear-gradient(150deg, var(--c-green-900), var(--c-green-700));
  border-color: transparent;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.service-card--cta:hover { border-color: transparent; }
.service-card-cta-inner { padding: var(--sp-10) var(--sp-6); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); height: 100%; justify-content: center; }
.service-card-cta-inner .service-card-icon { background: rgba(255,255,255,0.15); color: #fff; margin-bottom: var(--sp-2); }
.service-card-cta-inner h3 { color: #fff; font-size: var(--fs-lg); }
.service-card-cta-inner p { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); }
.service-card-cta-inner .btn { margin-top: var(--sp-5); }

fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }
.problem-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.problem-tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: #fff;
  border: 1.5px solid var(--c-ink-100);
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink-700);
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.problem-tag svg { width: 18px; height: 18px; color: var(--c-green-700); flex: none; }
.problem-tag:hover { border-color: var(--c-green-500); background: var(--c-green-50); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.badge-list { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.badge { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--c-cream); border: 1px solid var(--c-ink-100); padding: 0.5rem 0.9rem; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-900); }
.badge svg { width: 16px; height: 16px; color: var(--c-green-700); }
.section--dark .badge, .page-hero .badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); color: #fff; }
.section--dark .badge svg, .page-hero .badge svg { color: var(--c-green-300); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--c-ink-100); }
thead th { background: var(--c-cream); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr:last-child td { border-bottom: none; }

.page-hero {
  background: linear-gradient(160deg, var(--c-green-950), var(--c-green-900));
  color: #fff;
  padding-block: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem);
}
.page-hero h1 { font-size: var(--fs-3xl); max-width: 22ch; color: #fff; }
.page-hero p { margin-top: var(--sp-4); font-size: var(--fs-md); color: rgba(255,255,255,0.82); max-width: 60ch; }
.page-hero .badge-list .badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; }
.page-hero .badge-list svg { color: var(--c-green-300); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }

.contact-layout { display: grid; gap: var(--sp-8); align-items: start; }
.location-card {
  background: #fff;
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.location-card-body { padding: var(--sp-6); }
.location-card-body h2 { font-size: var(--fs-md); }
.contact-item { display: flex; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-2); border-bottom: 1px solid var(--c-ink-100); }
.location-card-body h2 + .contact-item { margin-top: var(--sp-4); }
.contact-item-icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--c-green-100);
  color: var(--c-green-700);
  display: flex; align-items: center; justify-content: center;
}
.contact-item-icon svg { width: 19px; height: 19px; }
.contact-item-label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-ink-500); }
.contact-item a, .contact-item-value { display: block; margin-top: 0.15rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-900); }
.contact-item a:hover { color: var(--c-green-700); }
.location-card-body ul { margin-top: var(--sp-5); }
.location-card-body .badge-list { margin-top: var(--sp-6); }
.location-card-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-green-50);
  border-top: 1px solid var(--c-ink-100);
}
.location-card-map-icon { color: var(--c-green-700); }
.location-card-map-icon svg { width: 34px; height: 34px; }
.location-card-map-addr { font-size: var(--fs-sm); color: var(--c-ink-700); font-weight: 600; line-height: var(--lh-snug); }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 0.95fr 1.05fr; }
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/10; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* Tagged split: eyebrow, then image, then text body — same order on mobile for every card */
.split-tagged {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "eyebrow" "media" "textbody";
  row-gap: var(--sp-4);
}
.split-tagged .split-eyebrow { grid-area: eyebrow; justify-self: start; }
.split-tagged .split-media { grid-area: media; margin: 0; }
.split-tagged .split-textbody { grid-area: textbody; }
@media (min-width: 900px) {
  .split-tagged {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-12);
    row-gap: var(--sp-3);
    align-items: start;
  }
  .split-tagged .split-media { align-self: center; }
  .split-tagged.media-right { grid-template-areas: "eyebrow media" "textbody media"; }
  .split-tagged.media-left { grid-template-areas: "media eyebrow" "media textbody"; }
}

.value-card { display: flex; gap: var(--sp-4); }
.value-card svg { width: 28px; height: 28px; color: var(--c-green-700); flex: none; }
.value-card h3 { font-size: var(--fs-base); }
.value-card p { font-size: var(--fs-sm); color: var(--c-ink-500); margin-top: 0.3rem; }

.req-card {
  background: #fff;
  border: 1px solid var(--c-ink-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.req-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--c-green-100); }
.req-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--c-green-50); display: flex; align-items: center; justify-content: center; flex: none; }
.req-icon svg { width: 22px; height: 22px; color: var(--c-green-700); }
.req-card h3 { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.req-card p { font-size: var(--fs-xs); color: var(--c-ink-500); line-height: 1.5; }

.timeline { position: relative; padding-left: var(--sp-8); border-left: 2px solid var(--c-ink-100); display: flex; flex-direction: column; gap: var(--sp-8); }
.timeline-item { position: relative; }
.timeline-item::before { content: ""; position: absolute; left: calc(var(--sp-8) * -1 - 6px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-green-600); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c-green-600); }
.timeline-year { font-family: var(--font-display); font-weight: 800; color: var(--c-green-700); font-size: var(--fs-sm); }
.timeline-item h3 { margin-top: 0.2rem; font-size: var(--fs-base); }
.timeline-item p { font-size: var(--fs-sm); color: var(--c-ink-500); margin-top: 0.3rem; }


.legal-content { max-width: 780px; margin-inline: auto; }
.legal-content h2 { font-size: var(--fs-lg); margin-top: var(--sp-10); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--c-ink-500); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.legal-content ul { list-style: disc; padding-left: 1.4rem; }
.legal-content ul li { list-style: disc; }

.error-page { text-align: center; padding-block: var(--sp-32) var(--sp-24); }
.error-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 12vw, 8rem); color: var(--c-green-100); line-height: 1; }
.error-page h1 { margin-top: -2rem; font-size: var(--fs-2xl); }
.error-page p { margin-inline: auto; margin-top: var(--sp-4); color: var(--c-ink-500); }
.error-actions { display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-8); flex-wrap: wrap; }

@media (min-width: 700px) {
  .page-hero .container { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-10); flex-wrap: wrap; }
}
@media (min-width: 960px) {
  .hero-panel {
    position: absolute;
    right: clamp(0.75rem, 1.5vw, 1.75rem);
    bottom: clamp(1.75rem, 5vw, 3.25rem);
    margin: 0;
  }
}

/* ---------- Champ honeypot anti-spam (invisible pour les humains, rempli par les bots) ---------- */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Articles "Nos conseils" — mise en page à sommaire latéral fixe
   Référence : blogs éditoriaux SaaS (Contentful, Stripe, Ramp) — colonne de
   lecture ~680px + sommaire fixe en bord de page. Peu de couleur, peu de
   composants décoratifs ; la structure vient de la grille et du texte.
   ========================================================================== */

.post-layout { display: grid; grid-template-columns: 200px minmax(0, 680px); gap: var(--sp-10); justify-content: center; align-items: start; }

/* Fil de méta-infos sous le H1 (temps de lecture, date, vérification) */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem var(--sp-4); margin-top: var(--sp-5); font-size: var(--fs-xs); color: rgba(255,255,255,0.62); }
.article-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.article-meta svg { width: 14px; height: 14px; flex: none; color: var(--c-green-300); }
.article-meta span:not(:last-child)::after { content: "·"; margin-left: var(--sp-4); color: rgba(255,255,255,0.35); }

/* Sommaire fixe */
.post-sidebar { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.post-sidebar-label { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-300); }
.post-sidebar-toc { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 0.65rem; border-left: 2px solid var(--c-ink-100); }
.post-sidebar-toc a { display: block; padding-left: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-300); line-height: var(--lh-snug); }
.post-sidebar-toc a:hover { color: var(--c-ink-900); }
.post-sidebar-meta { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-ink-100); display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--fs-xs); color: var(--c-ink-300); }
.post-sidebar-meta span { display: flex; align-items: center; gap: 0.5rem; }
.post-sidebar-meta svg { width: 15px; height: 15px; flex: none; color: var(--c-green-600); }
.post-sidebar-meta strong { color: var(--c-ink-700); font-weight: 600; }
.post-sidebar-call { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 0.3rem; }
.post-sidebar-call > span { font-size: var(--fs-xs); color: var(--c-ink-300); }
.post-sidebar-call a.phone-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; background: var(--c-green-700); color: #fff; border-radius: var(--radius-sm); padding: 0.7rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); transition: background var(--transition); text-align: center; }
.post-sidebar-call a.phone-link svg { flex: none; width: 16px; height: 16px; color: #fff; }
.post-sidebar-call a.phone-link:hover { background: var(--c-green-900); }
.post-sidebar-devis { display: flex; align-items: center; justify-content: center; margin-top: 0.6rem; background: var(--c-amber-500); color: var(--c-ink-900); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); padding: 0.7rem 1rem; border-radius: var(--radius-sm); transition: background var(--transition); text-align: center; }
.post-sidebar-devis:hover { background: var(--c-amber-400); }

/* Décale le point d'ancrage sous le header collant, pour que le titre visé reste visible après le clic dans le sommaire */
h2[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

@media (max-width: 980px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .post-sidebar { display: none; }
}

/* Colonne de lecture */
.post-content { min-width: 0; }
.post-cover { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/2; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Sommaire mobile (remplace la sidebar sous 980px) */
.mobile-toc { display: none; }
@media (max-width: 980px) {
  .mobile-toc { display: block; border-top: 1px solid var(--c-ink-100); border-bottom: 1px solid var(--c-ink-100); padding-block: var(--sp-4); margin-top: var(--sp-6); }
  .mobile-toc summary { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
  .mobile-toc summary::-webkit-details-marker { display: none; }
  .mobile-toc summary::after { content: "+"; font-size: 1.2rem; color: var(--c-ink-300); }
  .mobile-toc[open] summary::after { content: "–"; }
  .mobile-toc ul { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 0.5rem; }
  .mobile-toc a { font-size: var(--fs-sm); color: var(--c-ink-500); font-weight: 500; }
}

/* Réponse rapide — chapô éditorial */
.article-lede { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--c-ink-900); padding-left: var(--sp-5); border-left: 3px solid var(--c-green-600); margin: var(--sp-8) 0; }

/* Étapes — numérotation typographique */
.step { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-4); padding-block: var(--sp-4); border-top: 1px solid var(--c-ink-100); }
.step:last-child { border-bottom: 1px solid var(--c-ink-100); }
.step-index { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--c-green-300); line-height: 1; }
.step h3 { font-size: var(--fs-md); margin-bottom: 0.35rem; }
.step p { font-size: var(--fs-base); color: var(--c-ink-500); line-height: var(--lh-normal); }

/* À faire / à éviter */
.dodont { display: grid; gap: var(--sp-6); margin: var(--sp-8) 0; grid-template-columns: 1fr; }
@media (min-width: 560px) { .dodont { grid-template-columns: 1fr 1fr; } }
.dodont-col h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: var(--sp-3); border-bottom: 2px solid; margin-bottom: var(--sp-4); }
.dodont-col.do h3 { color: var(--c-green-700); border-color: var(--c-green-600); }
.dodont-col.dont h3 { color: var(--c-danger); border-color: var(--c-danger); }
.dodont-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.dodont-col li { font-size: var(--fs-sm); color: var(--c-ink-700); line-height: var(--lh-normal); padding-left: 1.1rem; position: relative; }
.dodont-col li::before { content: "–"; position: absolute; left: 0; color: var(--c-ink-300); }

/* Citation / anecdote pratique */
.pull-note { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); font-weight: 500; color: var(--c-ink-700); line-height: var(--lh-snug); border-top: 1px solid var(--c-ink-100); border-bottom: 1px solid var(--c-ink-100); padding-block: var(--sp-5); margin: var(--sp-8) 0; }
.pull-note span { display: block; margin-bottom: var(--sp-3); font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-300); }

/* Rappel d'appel au fil du texte */
.inline-call { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-500); border-left: 3px solid var(--c-amber-500); padding-left: var(--sp-4); margin: var(--sp-8) 0; }
.inline-call a { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; color: var(--c-ink-900); white-space: nowrap; }
.inline-call a svg { flex: none; width: 15px; height: 15px; color: var(--c-green-600); }
.inline-call a:hover { color: var(--c-green-700); }

/* Bandeau de conversion sous "À faire / À éviter" */
.dodont-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); background: var(--c-ink-900); color: #fff; border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6); margin: var(--sp-8) 0; }
.dodont-cta p { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); line-height: var(--lh-snug); max-width: 34ch; }
.dodont-cta .btn { flex: none; }

.info-table-wrap { margin: var(--sp-8) 0; overflow-x: auto; border: 1px solid var(--c-ink-100); border-radius: var(--radius-md); }
.info-table-wrap table { min-width: 560px; }
.info-table-wrap td { color: var(--c-ink-700); }
.info-table-wrap td:first-child, .info-table-wrap th:first-child { font-weight: 600; color: var(--c-ink-900); }

.checklist { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-8) 0; }
.checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-700); line-height: var(--lh-normal); background: var(--c-cream); border: 1px solid var(--c-ink-100); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); }
.checklist li svg { flex: none; width: 22px; height: 22px; color: var(--c-green-600); margin-top: 1px; }
.checklist li strong { color: var(--c-ink-900); }

.checklist-v2 { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-8) 0; counter-reset: checklist-v2; }
.checklist-v2 li { list-style: none; counter-increment: checklist-v2; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: var(--sp-4); background: var(--c-white); border: 1px solid var(--c-ink-100); border-left: 3px solid var(--c-green-500); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.checklist-v2 li:hover { box-shadow: 0 4px 16px rgba(20,61,22,0.08); border-left-color: var(--c-green-700); }
.checklist-v2 li::before { content: counter(checklist-v2, decimal-leading-zero); flex: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--c-green-700); background: var(--c-green-50); border: 1px solid var(--c-green-100); border-radius: 999px; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.checklist-v2 li svg { flex: none; width: 22px; height: 22px; color: var(--c-green-600); margin-top: 3px; }
.checklist-v2 li strong { display: block; color: var(--c-ink-900); font-size: var(--fs-base); margin-bottom: 2px; }
.checklist-v2 li p { margin: 0; color: var(--c-ink-500); font-size: var(--fs-sm); line-height: var(--lh-normal); }
@media (max-width: 560px) { .checklist-v2 li { grid-template-columns: auto 1fr; } .checklist-v2 li svg { display: none; } }

.checklist-v3 { list-style: none; margin: var(--sp-8) 0; padding: 0; background: var(--c-white); border: 1px solid var(--c-ink-100); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 3px rgba(18,22,15,0.04); counter-reset: checklist-v3; }
.checklist-v3 li { counter-increment: checklist-v3; display: grid; grid-template-columns: 2.75rem auto 1fr; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--c-ink-100); transition: background 0.15s ease; }
.checklist-v3 li:last-child { border-bottom: none; }
.checklist-v3 li:hover { background: var(--c-cream); }
.checklist-v3 li::before { content: counter(checklist-v3, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--c-green-700); }
.checklist-v3 li svg { flex: none; width: 24px; height: 24px; color: var(--c-green-600); }
.checklist-v3 li strong { display: block; color: var(--c-ink-900); font-size: var(--fs-base); margin-bottom: 1px; }
.checklist-v3 li p { margin: 0; color: var(--c-ink-500); font-size: var(--fs-sm); line-height: var(--lh-normal); }
@media (max-width: 620px) { .checklist-v3 li { grid-template-columns: 2rem 1fr; row-gap: var(--sp-2); padding: var(--sp-4); } .checklist-v3 li svg { display: none; } }

/* Bloc de conversion en fin d'article — remplace le récap générique */
.article-cta { margin-top: var(--sp-8); padding: var(--sp-6); border-left: 3px solid var(--c-green-600); background: var(--c-green-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-cta h3 { font-size: var(--fs-lg); color: var(--c-ink-900); }
.article-cta p { margin-top: var(--sp-3); color: var(--c-ink-700); line-height: var(--lh-normal); font-size: var(--fs-base); }
.article-cta .check-line { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: var(--sp-3); font-weight: 600; color: var(--c-green-800); font-size: var(--fs-sm); }
.article-cta .check-line svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c-green-600); }
.article-cta .hero-actions { margin-top: var(--sp-5); }

/* Figure avec légende, pour les images de contenu (ex. planning de chantier) */
.article-figure { margin: var(--sp-8) 0; }
.article-figure img { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--c-ink-100); }
.article-figure figcaption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-ink-300); text-align: center; }

/* Métadonnée de fin d'article */
.article-byline { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-ink-100); font-size: var(--fs-xs); color: var(--c-ink-300); }

/* Puce de catégorie + temps de lecture sur les cartes du listing "Nos conseils" */
.cat-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-green-700); background: var(--c-green-50); border-radius: var(--radius-full); padding: 0.3rem 0.7rem; align-self: flex-start; }
.cat-chip svg { width: 13px; height: 13px; }
.card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: 0.2rem; }
.read-time { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-xs); color: var(--c-ink-300); font-weight: 600; }
.read-time svg { width: 13px; height: 13px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: var(--sp-10); }
.page-arrow { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full); border: 1.5px solid var(--c-ink-100); background: var(--c-white); color: var(--c-ink-700); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
.page-arrow svg { width: 18px; height: 18px; }
.page-arrow:hover:not(:disabled) { background: var(--c-green-50); border-color: var(--c-green-500); color: var(--c-green-700); }
.page-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.page-num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full); border: 1.5px solid var(--c-ink-100); background: var(--c-white); color: var(--c-ink-700); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.page-num:hover { border-color: var(--c-green-500); color: var(--c-green-700); }
.page-num.is-active { background: var(--c-green-700); border-color: var(--c-green-700); color: #fff; }
.conseils-page { display: none; }
.conseils-page.is-active { display: grid; }