/* --- Source 1 --- */

/* ══════════════════════════════════════════════
   RENOVO GROUP — DESIGN SYSTEM
   ══════════════════════════════════════════════ */

:root {
  /* ── Couleurs principales ── */
  --color-white: #FFFFFF;
  --color-offwhite: #F8F9FA;
  --color-gray-50: #F1F3F5;
  --color-gray-100: #E9ECEF;
  --color-gray-200: #DEE2E6;
  --color-gray-300: #CED4DA;
  --color-gray-400: #ADB5BD;
  --color-gray-500: #868E96;
  --color-gray-600: #495057;
  --color-gray-700: #343A40;
  --color-gray-800: #212529;
  --color-gray-900: #121416;

  /* Vert profond — charte Renovo Group */
  --color-primary: #0F4D2F;
  --color-primary-light: #2E7D4F;
  --color-primary-lighter: #E6F0EA;
  --color-primary-dark: #0a3621;
  --color-primary-muted: #5a9e7a;

  /* Bleu compagnon */
  --color-accent: #3A7BD5;
  --color-accent-light: #EBF2FC;

  /* CTA anthracite */
  --color-cta: #1F2933;
  --color-cta-hover: #2d3d4a;

  /* Texte secondaire */
  --color-text-secondary: #6B7280;

  /* Feedback */
  --color-success: #2B8A6E;
  --color-warning: #E8A735;
  --color-error: #D64545;
  --color-info: #3A7BD5;

  /* ── Typographie ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;

  /* ── Espacements ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ── Arrondis ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 16px 50px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Layout ── */
  --max-width: 1200px;
  --header-height: 72px;
}

/* ══════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-800);
  background: var(--color-white);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ══════════════════════════════════════════════
   HEADER — STICKY
   ══════════════════════════════════════════════ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(230,240,234,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0);
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.header.scrolled {
  border-bottom-color: var(--color-gray-100);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gray-900);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav-link {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-gray-900);
  background: var(--color-gray-50);
}

.nav-link.active {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
}

/* SAV — bouton discret outline */
.nav-link-sav {
  border: 1.5px solid var(--color-gray-200);
  color: var(--color-gray-500);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.nav-link-sav:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0, 0, 0, 0.40);
}

/* Header CTA */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-cta);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.header-cta:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.header-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Bouton téléphone header */
.header-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}
.header-phone-btn:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
  transform: translateY(-1px);
}
.header-phone-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .header-phone-btn { display: none; }
}

/* Mobile hamburger */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.menu-toggle:hover { background: var(--color-gray-50); }

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-gray-700);
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all var(--duration-normal) var(--ease-out);
}

.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 19px; }
.menu-toggle span:nth-child(3) { top: 25px; }

.menu-toggle.open span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: 999;
  padding: var(--space-xl);
  flex-direction: column;
  gap: var(--space-sm);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.mobile-nav.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav-link {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-gray-700);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}

.mobile-nav-link:hover { background: var(--color-gray-50); }

.mobile-nav-cta {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  text-align: center;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-cta);
  border-radius: var(--radius-full);
}

/* ══════════════════════════════════════════════
   DESIGN SYSTEM SHOWCASE — Content area
   ══════════════════════════════════════════════ */
.main-content {
  margin-top: var(--header-height);
}

.showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl);
}

/* Section titles in showcase */
.showcase-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.showcase-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.showcase h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2xl);
}

.showcase-section {
  margin-bottom: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  border-bottom: 1px solid var(--color-gray-100);
}

.showcase-section:last-child {
  border-bottom: none;
}

/* ── Color Palette ── */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}

.color-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
}

.color-swatch {
  height: 80px;
  position: relative;
}

.color-swatch::after {
  content: attr(data-hex);
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.color-swatch.dark-text::after { color: rgba(0,0,0,0.5); }

.color-info {
  padding: 12px 14px;
}

.color-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray-800);
}

.color-var {
  font-size: 11px;
  color: var(--color-gray-400);
  font-family: 'SF Mono', 'Fira Code', monospace;
  margin-top: 2px;
}

/* ── Typography Showcase ── */
.typo-row {
  margin-bottom: var(--space-2xl);
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: var(--space-lg);
}

.typo-meta {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  font-family: 'SF Mono', 'Fira Code', monospace;
  line-height: var(--leading-relaxed);
}

.typo-display-6xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
}

.typo-display-5xl {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
}

.typo-display-4xl {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

.typo-heading {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-gray-800);
}

.typo-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

.typo-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-normal);
}

/* ── Buttons ── */
.btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-xl);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Primary CTA (sombre) */
.btn-primary {
  padding: 14px 32px;
  font-size: var(--text-base);
  color: var(--color-white);
  background: var(--color-cta);
  border-radius: var(--radius-full);
}
.btn-primary:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Secondary */
.btn-secondary {
  padding: 14px 32px;
  font-size: var(--text-base);
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-full);
}
.btn-secondary:hover {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Green accent */
.btn-accent {
  padding: 14px 32px;
  font-size: var(--text-base);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
.btn-accent:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(43,138,110,0.25);
}

/* Small */
.btn-sm {
  padding: 8px 18px;
  font-size: var(--text-sm);
}

/* Ghost */
.btn-ghost {
  padding: 14px 32px;
  font-size: var(--text-base);
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
}
.btn-ghost:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ── Badges ── */
.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
}

.badge svg { width: 14px; height: 14px; }

.badge-light {
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
}

.badge-green {
  color: var(--color-primary-dark);
  background: var(--color-primary-lighter);
  border: 1px solid rgba(43,138,110,0.15);
}

.badge-blue {
  color: var(--color-accent);
  background: var(--color-accent-light);
  border: 1px solid rgba(58,123,213,0.15);
}

/* ── Cards ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
  border-color: var(--color-gray-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.card-icon.green { background: var(--color-primary-light); color: var(--color-primary); }
.card-icon.blue { background: var(--color-accent-light); color: var(--color-accent); }

.card-icon svg { width: 24px; height: 24px; }

.card h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-sm);
}

.card p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
}

/* ── Shadow Showcase ── */
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-xl);
}

.shadow-box {
  height: 100px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ── Radius Showcase ── */
.radius-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  align-items: end;
}

.radius-box {
  width: 80px;
  height: 80px;
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-primary-dark);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-weight: 500;
}

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--color-gray-100);
  margin: var(--space-4xl) 0;
}

/* ══════════════════════════════════════════════
   SOLUTIONS — note de clôture & photo detail
   ══════════════════════════════════════════════ */
.solutions-footer-note {
  margin-top: var(--space-3xl);
  text-align: center;
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.solutions-footer-note a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

.solution-detail-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/6;
  background: var(--color-gray-100);
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.solution-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solution-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-gray-400);
}
.solution-photo-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}
.solution-photo-placeholder span {
  font-size: var(--text-sm);
}

/* ══════════════════════════════════════════════
   BANDEAU CAMION RENOVO
   ══════════════════════════════════════════════ */
.section-camion-bandeau {
  width: 100%;
  overflow: hidden;
}
.camion-bandeau-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 3/1;
  min-height: 240px;
  background: #e8f0ec;
}
.camion-bandeau-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  opacity: 1;
}
.camion-bandeau-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-2xl) var(--space-3xl);
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.12) 50%,
    rgba(0,0,0,0) 100%
  );
}
.camion-bandeau-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-white);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
  max-width: 480px;
}
@media (max-width: 768px) {
  .camion-bandeau-inner {
    aspect-ratio: 4/3;
    min-height: 0;
  }
  .camion-bandeau-img {
    object-position: 35% 55%;
  }
  .camion-bandeau-text { font-size: var(--text-xl); }
  .camion-bandeau-overlay {
    padding: var(--space-lg);
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 60%);
    align-items: flex-end;
  }
}

/* ══════════════════════════════════════════════
   SECTION NOUS CONTACTER (humain + pancarte)
   ══════════════════════════════════════════════ */
.section-contact-humain {
  background: var(--color-primary-lighter);
  padding: var(--space-4xl) 0;
}

.contact-humain-inner {
  display: grid;
  grid-template-columns: 1.44fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.contact-humain-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 3/2;
  background: var(--color-gray-100);
}

.contact-humain-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 52%;
  transform: scale(1.1);
  transform-origin: 38% 52%;
  display: block;
}

.contact-humain-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-humain-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

.contact-humain-content p {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

.contact-humain-btn {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.contact-humain-micro {
  font-size: var(--text-sm) !important;
  color: var(--color-gray-400) !important;
  margin-top: calc(-1 * var(--space-sm));
}

@media (max-width: 768px) {
  .contact-humain-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .contact-humain-photo {
    aspect-ratio: 16/9;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }
  .contact-humain-content h2 {
    font-size: var(--text-3xl);
  }
  .contact-humain-btn {
    align-self: stretch;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer {
  background: var(--color-gray-900);
  color: var(--color-gray-300);
  padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-400);
  margin-top: var(--space-md);
  max-width: 320px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-white);
}

.footer-logo .logo-icon {
  width: 32px;
  height: 32px;
  font-size: var(--text-base);
}

.footer h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-lg);
}

.footer-links li {
  margin-bottom: var(--space-sm);
}

.footer-links a {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  transition: color var(--duration-fast);
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-contact-item {
  display: flex;
  align-items: start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-legal {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-lg);
}

.footer-legal-links a {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  transition: color var(--duration-fast);
}

.footer-legal-links a:hover { color: var(--color-gray-300); }

/* Réseaux sociaux footer */
.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  color: var(--color-gray-400);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.footer-social-link:hover {
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
}

.footer-disclaimer {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
  max-width: 700px;
}


/* ══════════════════════════════════════════════
   CTA STICKY MOBILE
   ══════════════════════════════════════════════ */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  padding: 12px var(--space-lg);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-gray-100);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

.mobile-sticky-cta .btn {
  width: 100%;
  justify-content: center;
  padding: 14px;
}

/* ══════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeInUp 0.6s var(--ease-out) both;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
  .header-cta { display: none; }
}

@media (max-width: 768px) {
  :root {
    --text-6xl: 2.5rem;
    --text-5xl: 2rem;
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
  }

  .showcase { padding: var(--space-2xl) var(--space-lg); }

  .typo-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .mobile-sticky-cta {
    display: block;
  }

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

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

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

  .color-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Source 2 --- */

/* ══════════════════════════════════════════════
   DESIGN SYSTEM TOKENS (from Livrable 1)
   ══════════════════════════════════════════════ */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-800);
  background: var(--color-white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ══════════════════════════════════════════════
   HEADER (same as Livrable 1)
   ══════════════════════════════════════════════ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-height);
  background: rgba(230,240,234,0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.header.scrolled { border-bottom-color: var(--color-gray-100); box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.header-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-gray-900); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.logo-icon { width: 36px; height: 36px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display); font-size: var(--text-lg); flex-shrink: 0; }
.nav { display: flex; align-items: center; gap: var(--space-2xl); }
.nav-links { display: flex; align-items: center; gap: var(--space-xs); }
.nav-link { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-600); border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); white-space: nowrap; }
.nav-link:hover { color: var(--color-gray-900); background: var(--color-gray-50); }
.header-cta { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 10px 22px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-white); background: var(--color-cta); border: none; border-radius: var(--radius-full); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); white-space: nowrap; }
.header-cta:hover { background: var(--color-cta-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.header-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.menu-toggle { display: none; width: 40px; height: 40px; background: none; border: none; cursor: pointer; position: relative; border-radius: var(--radius-sm); }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--color-gray-700); border-radius: 2px; position: absolute; left: 50%; transform: translateX(-50%); transition: all var(--duration-normal) var(--ease-out); }
.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 19px; }
.menu-toggle span:nth-child(3) { top: 25px; }
.menu-toggle.open span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }
.mobile-nav { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: var(--color-white); z-index: 999; padding: var(--space-xl); flex-direction: column; gap: var(--space-sm); opacity: 0; transform: translateY(-8px); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
.mobile-nav.visible { display: flex; opacity: 1; transform: translateY(0); }
.mobile-nav-link { padding: var(--space-md) var(--space-lg); font-size: var(--text-lg); font-weight: 500; color: var(--color-gray-700); border-radius: var(--radius-md); }
.mobile-nav-cta { margin-top: var(--space-lg); padding: var(--space-md) var(--space-xl); text-align: center; font-size: var(--text-base); font-weight: 600; color: var(--color-white); background: var(--color-cta); border-radius: var(--radius-full); }

/* ══════════════════════════════════════════════
   SECTION: HERO
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   SECTION: HERO BANNER (full-width immersive)
   ══════════════════════════════════════════════ */
.hero.hero-banner {
  margin-top: var(--header-height);
  min-height: max(90vh, 600px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-image: url('../photos/reno-globale.jpg');
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 15, 20, 0.30) 0%, rgba(10, 15, 20, 0.62) 100%);
  z-index: 0;
}

.hero-inner-centered {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: max(90vh, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5xl) var(--space-xl);
}

.hero-content-centered {
  text-align: center;
  max-width: 780px;
  width: 100%;
  position: relative;
}


.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-bottom: var(--space-2xl);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.hero-title .title-line-1,
.hero-title .title-line-2 {
  display: block;
  color: #a8d5b5;
}

.hero-title .title-line-3 {
  display: block;
  font-size: 1.15em;
  color: var(--color-white);
}

.hero-subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-2xl);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hero-cta-wrapper {
  margin-bottom: 20px;
}

.btn-large {
  padding: 18px 40px;
  font-size: var(--text-lg);
}

/* Bouton héro blanc/noir */
.hero-cta-wrapper .btn-primary {
  background: #FFFFFF;
  color: #000000;
  border: 1.5px solid rgba(0,0,0,0.12);
  padding: 20px 48px;
  font-size: var(--text-xl);
}
.hero-cta-wrapper .btn-primary:hover {
  background: #f2f2f2;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hero-micro-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}

.hero-micro-trust svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Badge RGE flottant bas-droit */
.hero-badge-rge {
  position: absolute;
  bottom: 32px;
  right: 40px;
  z-index: 2;
}

.rge-solo-img {
  width: 115px;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .rge-solo-img { width: 82px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary {
  padding: 16px 32px;
  font-size: var(--text-base);
  color: var(--color-white);
  background: var(--color-cta);
  border-radius: var(--radius-full);
}
.btn-primary:hover { background: var(--color-cta-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-secondary {
  padding: 16px 32px;
  font-size: var(--text-base);
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-full);
}
.btn-secondary:hover { border-color: var(--color-gray-300); background: var(--color-gray-50); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-accent {
  padding: 16px 32px;
  font-size: var(--text-base);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
.btn-accent:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43,138,110,0.25); }

.btn-ghost-link {
  padding: 16px 8px;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  transition: color var(--duration-fast);
  text-decoration: underline;
  text-decoration-color: var(--color-gray-300);
  text-underline-offset: 3px;
}
.btn-ghost-link:hover { color: var(--color-gray-700); text-decoration-color: var(--color-gray-500); }


/* ══════════════════════════════════════════════
   SECTION: PROBLÈME (identification)
   ══════════════════════════════════════════════ */
.section-probleme {
  padding: var(--space-5xl) 0;
  background: var(--color-offwhite);
  position: relative;
  overflow: hidden;
}

.section-probleme::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.section-probleme .section-inner {
  max-width: 780px;
  text-align: center;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.section-label::after {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.section-probleme h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2xl);
}

.probleme-text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-500);
  max-width: 600px;
  margin: 0 auto;
}

.probleme-text strong {
  color: var(--color-gray-700);
  font-weight: 500;
}

/* Decorative quote marks */
.probleme-quote {
  position: relative;
  margin-top: var(--space-3xl);
  padding: var(--space-2xl) var(--space-3xl);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
}

.probleme-quote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 28px;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-primary-muted);
  opacity: 0.4;
}

.probleme-quote p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  font-style: italic;
}

/* ══════════════════════════════════════════════
   SECTION: POURQUOI RENOVO GROUP
   ══════════════════════════════════════════════ */
.section-renovo {
  padding: var(--space-5xl) 0;
  background: var(--color-white);
  position: relative;
}

.section-renovo .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: start;
}

.renovo-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--space-xl);
}

.renovo-content > p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-500);
  margin-bottom: var(--space-lg);
}

/* Value props list */
.renovo-values {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.renovo-value {
  display: flex;
  gap: var(--space-md);
  align-items: start;
}

.renovo-value-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.renovo-value-icon svg { width: 20px; height: 20px; }

.renovo-value h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: 4px;
}

.renovo-value p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
}

/* Encadré "Notre position" */
.renovo-position {
  position: relative;
}

.position-card {
  background: var(--color-gray-900);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.position-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,138,110,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.position-card::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -20%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,123,213,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.position-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary-muted);
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

.position-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

.position-card > p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.position-card .position-highlight {
  background: rgba(43,138,110,0.15);
  border-left: 3px solid var(--color-primary-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.8);
  position: relative;
  z-index: 1;
  font-style: italic;
}

.position-card .position-highlight strong {
  color: var(--color-white);
  font-weight: 600;
  font-style: normal;
}

/* Stats row under position card */
.position-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.position-stat {
  background: var(--color-offwhite);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border: 1px solid var(--color-gray-100);
  transition: all var(--duration-normal) var(--ease-out);
}

.position-stat:hover {
  border-color: var(--color-primary-muted);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.position-stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.position-stat-label {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ══════════════════════════════════════════════
   TRANSITION CTA — between sections
   ══════════════════════════════════════════════ */
.section-transition-cta {
  padding: var(--space-4xl) 0;
  background: none;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-transition-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../photos/new-truck-bandeau.png') 20% 70% / 110% auto no-repeat;
  filter: brightness(1.18);
  z-index: -1;
  pointer-events: none;
}

.section-transition-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.58) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.08) 30%, rgba(0,0,0,0.08) 70%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
  z-index: 0;
}

.transition-cta-inner {
  max-width: 600px;
  margin: 0 auto 0 20%;
  padding: 0 var(--space-xl);
  position: relative;
  z-index: 1;
  text-align: left;
}

.transition-cta-inner h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
  text-shadow: 0 0 18px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7);
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.4);
}

.transition-cta-inner p {
  font-size: var(--text-base);
  color: var(--color-white);
  margin-bottom: var(--space-xl);
  text-shadow: 0 0 20px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.95), 0 0 40px rgba(0,0,0,0.8);
}

/* ══════════════════════════════════════════════
   MOBILE CTA STICKY
   ══════════════════════════════════════════════ */
.mobile-sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
  padding: 12px var(--space-lg);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-gray-100);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.mobile-sticky-cta .btn { width: 100%; justify-content: center; padding: 14px; }

/* Masquer les dates dans le portfolio réalisations */
.portfolio-meta .portfolio-meta-item:last-child { display: none; }

/* ══════════════════════════════════════════════
   SCROLL ANIMATIONS
   ══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.06s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.18s; }
.reveal-delay-4 { transition-delay: 0.24s; }

/* Mobile : pas d'opacity:0 pour garantir l'affichage des images */
@media (max-width: 768px) {
  .reveal {
    opacity: 1;           /* Toujours visible — images jamais bloquées */
    transform: translateY(8px);
    transition: transform 0.25s var(--ease-out);
  }
  .reveal.visible {
    transform: translateY(0);
  }
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  .reveal-delay-4 { transition-delay: 0s; }
}

/* Hero specific stagger */
.hero-content-centered > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 0.7s var(--ease-out) forwards;
}

.hero-content-centered > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content-centered > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content-centered > *:nth-child(3) { animation-delay: 0.4s; }
.hero-content-centered > *:nth-child(4) { animation-delay: 0.5s; }

@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
  .header-cta { display: none; }

  .hero-inner-centered {
    padding: var(--space-3xl) var(--space-xl);
  }

  .hero-badge-rge {
    right: 20px;
    bottom: 20px;
  }

  .section-renovo .section-inner {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
}

@media (max-width: 768px) {
  

  .hero.hero-banner {
    min-height: max(80vh, 500px);
  }

  .hero-inner-centered {
    padding: var(--space-2xl) var(--space-lg);
    min-height: max(80vh, 500px);
  }

  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }

  .hero-badge-rge {
    bottom: 16px;
    right: 16px;
  }

  .position-stats {
    grid-template-columns: 1fr;
  }

  .probleme-quote {
    padding: var(--space-xl);
  }

  .mobile-sticky-cta {
    display: block;
  }

  body {
    padding-bottom: 70px;
  }

  .section-probleme, .section-renovo, .section-transition-cta {
    padding: var(--space-4xl) 0;
  }
}

@media (max-width: 480px) {
  .hero-micro-trust {
    flex-direction: column;
    text-align: center;
  }

  .hero-badge-rge {
    display: none;
  }
}

/* --- Source 3 --- */

/* ══════════════════════════════════════════════
   DESIGN SYSTEM TOKENS (from Livrable 1)
   ══════════════════════════════════════════════ */


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-gray-800); background: var(--color-white); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Header (compact from L1) ── */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-height); background: rgba(230,240,234,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,0); transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
.header.scrolled { border-bottom-color: var(--color-gray-100); box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-gray-900); }
.logo-icon { width: 36px; height: 36px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display); font-size: var(--text-lg); }
.nav { display: flex; align-items: center; gap: var(--space-2xl); }
.nav-links { display: flex; align-items: center; gap: var(--space-xs); }
.nav-link { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-600); border-radius: var(--radius-sm); transition: color var(--duration-fast), background var(--duration-fast); }
.nav-link:hover { color: var(--color-gray-900); background: var(--color-gray-50); }
.nav-link.active { color: var(--color-primary-dark); background: var(--color-primary-light); }
.header-cta { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 10px 22px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-white); background: var(--color-cta); border: none; border-radius: var(--radius-full); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); }
.header-cta:hover { background: var(--color-cta-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.header-cta svg { width: 16px; height: 16px; }
.menu-toggle { display: none; width: 40px; height: 40px; background: none; border: none; cursor: pointer; position: relative; border-radius: var(--radius-sm); }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--color-gray-700); border-radius: 2px; position: absolute; left: 50%; transform: translateX(-50%); transition: all var(--duration-normal) var(--ease-out); }
.menu-toggle span:nth-child(1) { top: 13px; } .menu-toggle span:nth-child(2) { top: 19px; } .menu-toggle span:nth-child(3) { top: 25px; }
.menu-toggle.open span:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }
.mobile-nav { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: var(--color-white); z-index: 999; padding: var(--space-xl); flex-direction: column; gap: var(--space-sm); }
.mobile-nav.visible { display: flex; }
.mobile-nav-link { padding: var(--space-md) var(--space-lg); font-size: var(--text-lg); font-weight: 500; color: var(--color-gray-700); border-radius: var(--radius-md); }
.mobile-nav-cta { margin-top: var(--space-lg); padding: var(--space-md) var(--space-xl); text-align: center; font-size: var(--text-base); font-weight: 600; color: var(--color-white); background: var(--color-cta); border-radius: var(--radius-full); }

/* ── Shared ── */
.section-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }
.section-label { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-primary); margin-bottom: var(--space-lg); }
.section-label::before { content: ''; width: 24px; height: 2px; background: var(--color-primary); border-radius: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); font-family: var(--font-body); font-weight: 600; border: none; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { padding: 16px 32px; font-size: var(--text-base); color: var(--color-white); background: var(--color-cta); border-radius: var(--radius-full); }
.btn-primary:hover { background: var(--color-cta-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-accent { padding: 16px 32px; font-size: var(--text-base); color: var(--color-white); background: var(--color-primary); border-radius: var(--radius-full); }
.btn-accent:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43,138,110,0.25); }
.btn-sm { padding: 10px 20px; font-size: var(--text-sm); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ══════════════════════════════════════════════
   SECTION: SOLUTIONS
   ══════════════════════════════════════════════ */
.section-solutions {
  margin-top: var(--header-height);
  padding: var(--space-5xl) 0;
  background: var(--color-white);
  position: relative;
}

.solutions-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-4xl);
}

.solutions-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
}

.solutions-header p {
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
}

/* Solutions Grid */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

.solution-card {
  position: relative;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  overflow: hidden;
}

.solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.solution-card:hover {
  border-color: var(--color-primary-muted);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.solution-card:hover::before {
  transform: scaleX(1);
}

.solution-card.active {
  border-color: var(--color-primary);
  box-shadow: 0 8px 32px rgba(43,138,110,0.12);
}

.solution-card.active::before {
  transform: scaleX(1);
}

.solution-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

.solution-card:hover .solution-icon,
.solution-card.active .solution-icon {
  transform: scale(1.05);
}

.icon-pac { background: linear-gradient(135deg, #E6F5F0, #D4EDE5); color: var(--color-primary); }
.icon-isolation { background: linear-gradient(135deg, #FFF3E0, #FFE0B2); color: #E65100; }
.icon-chauffage { background: linear-gradient(135deg, #FDE8E8, #FBBCBC); color: #C62828; }
.icon-eau { background: linear-gradient(135deg, #EBF2FC, #D1E3FA); color: var(--color-accent); }
.icon-ventilation { background: linear-gradient(135deg, #F3E8FD, #E1BEF7); color: #7B1FA2; }
.icon-global { background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-50)); color: var(--color-gray-700); }

.solution-icon svg { width: 28px; height: 28px; }

.solution-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--space-sm);
}

.solution-card > p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
}

.solution-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-8px);
  transition: all var(--duration-normal) var(--ease-out);
}

.solution-card:hover .solution-arrow,
.solution-card.active .solution-arrow {
  opacity: 1;
  transform: translateX(0);
}

.solution-arrow svg { width: 16px; height: 16px; }

/* ── Solution Detail Panel ── */
.solution-detail {
  display: none;
  background: var(--color-offwhite);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  margin-bottom: var(--space-3xl);
  animation: panelSlideIn 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.solution-detail.open { display: block; }

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

.solution-detail-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast);
  color: var(--color-gray-500);
}

.solution-detail-close:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-800);
}

.solution-detail-close svg { width: 18px; height: 18px; }

.solution-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2xl);
}

.detail-block h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-block h4 svg { width: 16px; height: 16px; }

.detail-block p, .detail-block li {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}

.detail-block ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-block li {
  display: flex;
  align-items: start;
  gap: 8px;
  padding-left: 0;
}

.detail-block li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-muted);
  flex-shrink: 0;
  margin-top: 7px;
}

.detail-block .error-item::before {
  background: #D64545;
}

.solution-detail-cta {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.solution-detail-cta p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* ══════════════════════════════════════════════
   SECTION: PROCESS (5 étapes)
   ══════════════════════════════════════════════ */
.section-process {
  padding: var(--space-2xl) 0;
  background: var(--color-gray-900);
  position: relative;
  overflow: hidden;
}

.section-process::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,138,110,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.section-process::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,123,213,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.process-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-4xl);
  position: relative;
  z-index: 1;
}

.process-header .section-label {
  color: var(--color-primary-muted);
}

.process-header .section-label::before {
  background: var(--color-primary-muted);
}

.process-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.process-header p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.5);
  line-height: var(--leading-relaxed);
}

/* Process Timeline */
.process-timeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Connecting line */
.process-timeline::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 39px;
  width: 2px;
  background: rgba(255,255,255,0.08);
}

.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-xl);
  align-items: start;
  padding: var(--space-xl) 0;
  position: relative;
}

/* Step number */
.step-number {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  z-index: 2;
}

.step-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary-muted);
  transition: all var(--duration-normal) var(--ease-out);
}

.process-step:hover .step-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 0 24px rgba(43,138,110,0.3);
}

/* Step content card */
.step-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-2xl);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}

.process-step:hover .step-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(43,138,110,0.25);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  transform: translateX(4px);
}

.step-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.step-card h3 .step-tag {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(43,138,110,0.15);
  color: var(--color-primary-muted);
  margin-left: auto;
}

.step-card p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  line-height: var(--leading-relaxed);
  max-width: 560px;
}

.step-card .step-details {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.step-detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  padding: 4px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.06);
}

.step-detail-item svg { width: 14px; height: 14px; color: var(--color-primary-muted); }

/* Process CTA */
.process-cta {
  text-align: center;
  margin-top: var(--space-4xl);
  position: relative;
  z-index: 1;
}

/* Camion découpé — intégré au bandeau noir */
.process-camion {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.process-camion-img {
  width: 580px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  margin-left: -40px;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45));
}

.process-camion-caption {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.3;
  color: var(--color-white);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  opacity: 0.9;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .process-camion {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }
  .process-camion-img {
    width: 240px;
  }
  .process-camion-caption {
    font-size: var(--text-xl);
  }
}

/* ══════════════════════════════════════════════
   TRANSITION CTA
   ══════════════════════════════════════════════ */
.section-transition-cta {
  padding: var(--space-4xl) 0;
  background: none;
  text-align: center;
  position: relative;
}

.transition-cta-inner {
  max-width: 600px;
  margin: 0 auto 0 20%;
  padding: 0 var(--space-xl);
  position: relative;
  z-index: 1;
  text-align: left;
}

.transition-cta-inner h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-white);
  margin-bottom: var(--space-md);
  text-shadow: 0 0 18px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7);
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.4);
}

.transition-cta-inner p {
  font-size: var(--text-base);
  color: var(--color-white);
  margin-bottom: var(--space-xl);
  text-shadow: 0 0 20px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.95), 0 0 40px rgba(0,0,0,0.8);
}

/* ══════════════════════════════════════════════
   MOBILE CTA STICKY
   ══════════════════════════════════════════════ */
.mobile-sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
  padding: 12px var(--space-lg); background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px); border-top: 1px solid var(--color-gray-100);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.mobile-sticky-cta .btn { width: 100%; justify-content: center; padding: 14px; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
  .header-cta { display: none; }

  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 768px) {
  

  .solutions-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .solution-card {
    padding: var(--space-xl);
  }

  .solution-arrow { opacity: 1; transform: translateX(0); }

  .process-step {
    grid-template-columns: 56px 1fr;
    gap: var(--space-md);
  }

  .step-dot { width: 40px; height: 40px; font-size: var(--text-base); }
  .step-number { width: 56px; }

  .process-timeline::before { left: 27px; }

  .step-card { padding: var(--space-lg) var(--space-xl); }
  .step-card h3 { font-size: var(--text-base); flex-wrap: wrap; }
  /* Masquer les détails (icônes + labels) pour compacter les étapes sur mobile */
  .step-card .step-details { display: none; }
  .step-card p { font-size: var(--text-xs); }
  .process-step { padding: var(--space-md) 0; }
  .step-card h3 .step-tag { margin-left: 0; }
  .step-card .step-details { flex-direction: column; gap: var(--space-sm); }

  .solution-detail { padding: var(--space-xl); }
  .solution-detail-cta { flex-direction: column; align-items: stretch; text-align: center; }

  .mobile-sticky-cta { display: block; }
  body { padding-bottom: 70px; }

  .section-solutions, .section-process { padding: var(--space-4xl) 0; }
}

@media (max-width: 480px) {
  .solution-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Source 4 --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-gray-800);background:var(--color-white);overflow-x:hidden}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}ul{list-style:none}
.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-height);background:rgba(230,240,234,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,0);transition:border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.header.scrolled{border-bottom-color:var(--color-gray-100);box-shadow:0 1px 8px rgba(0,0,0,.04)}.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);height:100%;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-gray-900)}.logo-icon{width:36px;height:36px;background:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:var(--text-lg)}.nav{display:flex;align-items:center;gap:var(--space-2xl)}.nav-links{display:flex;align-items:center;gap:var(--space-xs)}.nav-link{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-600);border-radius:var(--radius-sm);transition:color var(--duration-fast),background var(--duration-fast)}.nav-link:hover{color:var(--color-gray-900);background:var(--color-gray-50)}.nav-link.active{color:var(--color-primary-dark);background:var(--color-primary-light)}.header-cta{display:inline-flex;align-items:center;gap:var(--space-sm);padding:10px 22px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-cta);border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.header-cta:hover{background:var(--color-cta-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.header-cta svg{width:16px;height:16px}.menu-toggle{display:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;border-radius:var(--radius-sm)}.menu-toggle span{display:block;width:20px;height:2px;background:var(--color-gray-700);border-radius:2px;position:absolute;left:50%;transform:translateX(-50%);transition:all var(--duration-normal) var(--ease-out)}.menu-toggle span:nth-child(1){top:13px}.menu-toggle span:nth-child(2){top:19px}.menu-toggle span:nth-child(3){top:25px}.menu-toggle.open span:nth-child(1){top:19px;transform:translateX(-50%) rotate(45deg)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){top:19px;transform:translateX(-50%) rotate(-45deg)}.mobile-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:#fff;z-index:999;padding:var(--space-xl);flex-direction:column;gap:var(--space-sm)}.mobile-nav.visible{display:flex}.mobile-nav-link{padding:var(--space-md) var(--space-lg);font-size:var(--text-lg);font-weight:500;color:var(--color-gray-700);border-radius:var(--radius-md)}.mobile-nav-cta{margin-top:var(--space-lg);padding:var(--space-md) var(--space-xl);text-align:center;font-size:var(--text-base);font-weight:600;color:#fff;background:var(--color-cta);border-radius:var(--radius-full)}
.section-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}.section-label{display:inline-flex;align-items:center;gap:var(--space-sm);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-primary);margin-bottom:var(--space-lg)}.section-label::before{content:'';width:24px;height:2px;background:var(--color-primary);border-radius:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font-body);font-weight:600;border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.btn svg{width:18px;height:18px}.btn-primary{padding:16px 32px;font-size:var(--text-base);color:#fff;background:var(--color-cta);border-radius:var(--radius-full)}.btn-primary:hover{background:var(--color-cta-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{padding:16px 32px;font-size:var(--text-base);color:var(--color-gray-700);background:#fff;border:1.5px solid var(--color-gray-200);border-radius:var(--radius-full)}.btn-secondary:hover{border-color:var(--color-gray-300);background:var(--color-gray-50)}.btn-accent{padding:16px 32px;font-size:var(--text-base);color:#fff;background:var(--color-primary);border-radius:var(--radius-full)}.btn-accent:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,138,110,.25)}.btn-sm{padding:10px 20px;font-size:var(--text-sm)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}.reveal-delay-5{transition-delay:.5s}

/* REALISATIONS */
.section-realisations{margin-top:var(--header-height);padding:var(--space-5xl) 0;background:var(--color-white)}.realisations-header{text-align:center;max-width:640px;margin:0 auto var(--space-4xl)}.realisations-header h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,var(--text-5xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-gray-900);margin-bottom:var(--space-md)}.realisations-header p{font-size:var(--text-lg);color:var(--color-gray-500)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-bottom:var(--space-3xl)}.portfolio-card{border-radius:var(--radius-xl);overflow:hidden;background:#fff;border:1px solid var(--color-gray-100);transition:all var(--duration-normal) var(--ease-out);cursor:pointer}.portfolio-card:hover{border-color:var(--color-gray-200);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.ba-container{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-gray-100)}.ba-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);color:var(--color-gray-400);font-weight:500}.ba-image.before{background:linear-gradient(135deg,#E8D5C4,#D4C0AD);clip-path:inset(0 50% 0 0);z-index:2}.ba-image.after{background:linear-gradient(135deg,var(--color-primary-light),#C5E8DA);z-index:1}.ba-image svg{width:32px;height:32px;opacity:.4;margin-right:8px}
.ba-slider{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:3;cursor:ew-resize;transform:translateX(-50%)}.ba-slider::after{content:'⟷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--color-gray-500)}
.ba-labels{position:absolute;bottom:10px;left:10px;right:10px;display:flex;justify-content:space-between;z-index:4;pointer-events:none}.ba-label{padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.ba-label.before-label{background:rgba(0,0,0,.5);color:#fff}.ba-label.after-label{background:rgba(43,138,110,.85);color:#fff}
.portfolio-info{padding:var(--space-lg) var(--space-xl)}.portfolio-info h3{font-size:var(--text-base);font-weight:600;color:var(--color-gray-800);margin-bottom:4px}.portfolio-meta{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.portfolio-meta-item{display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--color-gray-500)}.portfolio-meta-item svg{width:14px;height:14px;color:var(--color-gray-400)}.portfolio-tag{display:inline-flex;padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:var(--color-primary-lighter);color:var(--color-primary-dark);margin-top:var(--space-sm)}.realisations-cta{text-align:center}

/* AVIS */
.section-avis{padding:var(--space-5xl) 0;background:var(--color-offwhite);position:relative;overflow:hidden}.section-avis::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-gray-200),transparent)}.avis-header{text-align:center;max-width:640px;margin:0 auto var(--space-3xl)}.avis-header h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,var(--text-5xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-gray-900);margin-bottom:var(--space-md)}.avis-header p{font-size:var(--text-lg);color:var(--color-gray-500)}
.google-summary{display:flex;align-items:center;justify-content:center;gap:var(--space-xl);padding:var(--space-lg) var(--space-xl);background:#fff;border:1px solid var(--color-gray-100);border-radius:var(--radius-xl);max-width:580px;margin:0 auto var(--space-3xl);flex-wrap:wrap}.google-g{width:36px;height:36px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-gray-100);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-lg)}.google-g span{background:linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.google-logo{display:flex;align-items:center;gap:10px}.google-logo-text{font-size:var(--text-sm);color:var(--color-gray-500);font-weight:500}.google-rating{display:flex;align-items:center;gap:var(--space-md)}.google-rating-number{font-family:var(--font-display);font-size:var(--text-4xl);color:var(--color-gray-900);line-height:1}.google-stars{display:flex;flex-direction:column;gap:2px}.stars-row{display:flex;gap:2px}.stars-row svg{width:18px;height:18px;fill:var(--color-warning)}.google-stars-count{font-size:var(--text-xs);color:var(--color-gray-400)}.google-summary-divider{width:1px;height:48px;background:var(--color-gray-200)}.google-stat{text-align:center}.google-stat-number{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-gray-900)}.google-stat-label{font-size:var(--text-xs);color:var(--color-gray-400)}
.reviews-track-wrapper{position:relative;overflow:hidden;margin-bottom:var(--space-3xl)}.reviews-track{display:flex;gap:var(--space-lg);animation:scrollReviews 40s linear infinite;width:max-content}.reviews-track:hover{animation-play-state:paused}@keyframes scrollReviews{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.review-card{flex-shrink:0;width:360px;background:#fff;border:1px solid var(--color-gray-100);border-radius:var(--radius-xl);padding:var(--space-xl);transition:all var(--duration-normal) var(--ease-out)}.review-card:hover{border-color:var(--color-gray-200);box-shadow:var(--shadow-md);transform:translateY(-2px)}.review-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.review-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-base);color:#fff;flex-shrink:0}.review-author-name{font-size:var(--text-sm);font-weight:600;color:var(--color-gray-800)}.review-author-date{font-size:var(--text-xs);color:var(--color-gray-400)}.review-stars{display:flex;gap:1px;margin-bottom:var(--space-sm)}.review-stars svg{width:14px;height:14px;fill:var(--color-warning)}.review-text{font-size:var(--text-sm);color:var(--color-gray-600);line-height:var(--leading-relaxed)}.review-google-badge{display:flex;align-items:center;gap:6px;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-gray-50);font-size:11px;color:var(--color-gray-400)}.review-google-badge svg{width:14px;height:14px}
.certifications{display:flex;align-items:center;justify-content:center;gap:var(--space-3xl);padding:var(--space-2xl) 0;flex-wrap:wrap}.cert-item{display:flex;align-items:center;gap:var(--space-sm);opacity:.4;transition:opacity var(--duration-normal);filter:grayscale(100%)}.cert-item:hover{opacity:.7;filter:grayscale(0%)}.cert-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-gray-100);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;color:var(--color-gray-500)}.cert-text{font-size:var(--text-sm);color:var(--color-gray-500);font-weight:500}.cert-item-rge{gap:var(--space-sm)}.cert-logo-rge{height:36px;width:auto;display:block}.cert-item-rge .cert-icon{font-size:9px;letter-spacing:.5px}.avis-cta{text-align:center;margin-top:var(--space-xl)}

/* FAQ */
.section-faq{padding:var(--space-5xl) 0;background:#fff}.faq-layout{display:grid;grid-template-columns:380px 1fr;gap:var(--space-4xl);align-items:start}.faq-sidebar{position:sticky;top:calc(var(--header-height) + var(--space-2xl))}.faq-sidebar h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,var(--text-4xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-gray-900);margin-bottom:var(--space-md)}.faq-sidebar>p{font-size:var(--text-base);color:var(--color-gray-500);line-height:var(--leading-relaxed);margin-bottom:var(--space-2xl)}.faq-contact-card{background:var(--color-gray-900);border-radius:var(--radius-xl);padding:var(--space-2xl);color:#fff}.faq-contact-card h4{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-sm)}.faq-contact-card p{font-size:var(--text-sm);color:rgba(255,255,255,.5);line-height:var(--leading-relaxed);margin-bottom:var(--space-lg)}
.faq-list{display:flex;flex-direction:column;gap:var(--space-sm)}.faq-item{border:1px solid var(--color-gray-100);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--duration-normal) var(--ease-out)}.faq-item:hover{border-color:var(--color-gray-200)}.faq-item.open{border-color:var(--color-primary-muted);box-shadow:0 2px 12px rgba(43,138,110,.06)}.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-xl);background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font-body);font-size:var(--text-base);font-weight:600;color:var(--color-gray-800);transition:color var(--duration-fast)}.faq-item.open .faq-question{color:var(--color-primary-dark)}.faq-question-icon{width:32px;height:32px;border-radius:50%;background:var(--color-gray-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--duration-normal) var(--ease-out)}.faq-item.open .faq-question-icon{background:var(--color-primary-light);transform:rotate(45deg)}.faq-question-icon svg{width:16px;height:16px;color:var(--color-gray-500)}.faq-item.open .faq-question-icon svg{color:var(--color-primary)}.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-out)}.faq-item.open .faq-answer{max-height:400px}.faq-answer-inner{padding:0 var(--space-xl) var(--space-xl);font-size:var(--text-sm);color:var(--color-gray-600);line-height:var(--leading-relaxed)}

.section-transition-cta{padding:var(--space-4xl) 0;background:none;text-align:center;position:relative;overflow:hidden}.section-transition-cta::after{content:'';position:absolute;inset:0;background:url('../photos/new-truck-bandeau.png') 20% 70% / 110% auto no-repeat;filter:brightness(1.18);z-index:-1;pointer-events:none}.section-transition-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(to left,rgba(0,0,0,0.02) 40%,rgba(0,0,0,0.58) 100%),linear-gradient(to bottom,rgba(0,0,0,0.32) 0%,rgba(0,0,0,0.08) 30%,rgba(0,0,0,0.08) 70%,rgba(0,0,0,0.32) 100%);pointer-events:none;z-index:0}.transition-cta-inner{max-width:600px;margin:0 auto 0 20%;padding:0 var(--space-xl);position:relative;z-index:1;text-align:left}.transition-cta-inner h3{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-white);margin-bottom:var(--space-md);text-shadow:0 0 18px rgba(0,0,0,0.95),0 2px 8px rgba(0,0,0,0.9),0 0 40px rgba(0,0,0,0.7);-webkit-text-stroke:0.5px rgba(255,255,255,0.4)}.transition-cta-inner p{font-size:var(--text-base);color:var(--color-white);margin-bottom:var(--space-xl);text-shadow:0 0 20px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,0.95),0 0 40px rgba(0,0,0,0.8)}
.mobile-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:998;padding:12px var(--space-lg);background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--color-gray-100);box-shadow:0 -4px 16px rgba(0,0,0,.06)}.mobile-sticky-cta .btn{width:100%;justify-content:center;padding:14px}

@media(max-width:1024px){.nav-links{display:none}.menu-toggle{display:flex;align-items:center;justify-content:center}.header-cta{display:none}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.faq-layout{grid-template-columns:1fr;gap:var(--space-2xl)}.faq-sidebar{position:static}}
@media(max-width:768px){.portfolio-grid{grid-template-columns:1fr}.review-card{width:300px}.google-summary{flex-direction:column;gap:var(--space-lg);text-align:center}.google-summary-divider{width:48px;height:1px}.mobile-sticky-cta{display:block}body{padding-bottom:85px}.section-realisations,.section-avis,.section-faq{padding:var(--space-4xl) 0}}

/* --- Source 5 --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-gray-800);background:var(--color-white);overflow-x:hidden}a{text-decoration:none;color:inherit}ul{list-style:none}

/* Header */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-height);background:rgba(230,240,234,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,0);transition:border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.header.scrolled{border-bottom-color:var(--color-gray-100);box-shadow:0 1px 8px rgba(0,0,0,.04)}.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);height:100%;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-gray-900)}.logo-icon{width:36px;height:36px;background:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:var(--text-lg)}.nav{display:flex;align-items:center;gap:var(--space-2xl)}.nav-links{display:flex;align-items:center;gap:var(--space-xs)}.nav-link{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-600);border-radius:var(--radius-sm);transition:color var(--duration-fast),background var(--duration-fast)}.nav-link:hover{color:var(--color-gray-900);background:var(--color-gray-50)}.nav-link.active{color:var(--color-primary-dark);background:var(--color-primary-light)}.header-cta{display:inline-flex;align-items:center;gap:var(--space-sm);padding:10px 22px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-cta);border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.header-cta:hover{background:var(--color-cta-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.header-cta svg{width:16px;height:16px}
.menu-toggle{display:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;border-radius:var(--radius-sm)}.menu-toggle span{display:block;width:20px;height:2px;background:var(--color-gray-700);border-radius:2px;position:absolute;left:50%;transform:translateX(-50%);transition:all var(--duration-normal) var(--ease-out)}.menu-toggle span:nth-child(1){top:13px}.menu-toggle span:nth-child(2){top:19px}.menu-toggle span:nth-child(3){top:25px}.menu-toggle.open span:nth-child(1){top:19px;transform:translateX(-50%) rotate(45deg)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){top:19px;transform:translateX(-50%) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:#fff;z-index:999;padding:var(--space-xl);flex-direction:column;gap:var(--space-sm)}.mobile-nav.visible{display:flex}.mobile-nav-link{padding:var(--space-md) var(--space-lg);font-size:var(--text-lg);font-weight:500;color:var(--color-gray-700);border-radius:var(--radius-md)}.mobile-nav-cta{margin-top:var(--space-lg);padding:var(--space-md) var(--space-xl);text-align:center;font-size:var(--text-base);font-weight:600;color:#fff;background:var(--color-cta);border-radius:var(--radius-full)}

/* Shared */
.section-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}
.section-label{display:inline-flex;align-items:center;gap:var(--space-sm);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-primary);margin-bottom:var(--space-lg)}.section-label::before{content:'';width:24px;height:2px;background:var(--color-primary);border-radius:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font-body);font-weight:600;border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.btn svg{width:18px;height:18px}
.btn-primary{padding:16px 32px;font-size:var(--text-base);color:#fff;background:var(--color-cta);border-radius:var(--radius-full)}.btn-primary:hover{background:var(--color-cta-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-accent{padding:16px 32px;font-size:var(--text-base);color:#fff;background:var(--color-primary);border-radius:var(--radius-full)}.btn-accent:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,138,110,.25)}
.btn-secondary{padding:16px 32px;font-size:var(--text-base);color:var(--color-gray-700);background:#fff;border:1.5px solid var(--color-gray-200);border-radius:var(--radius-full)}.btn-secondary:hover{border-color:var(--color-gray-300);background:var(--color-gray-50)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}.reveal.visible{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════
   FORM SECTION
   ══════════════════════════════════════════ */
.section-form{
  margin-top:var(--header-height);
  padding:var(--space-5xl) 0;
  background:var(--color-offwhite);
  min-height:100vh;
  position:relative;
  overflow:hidden;
}
.section-form::before{content:'';position:absolute;top:-20%;right:-15%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(43,138,110,.05) 0%,transparent 70%);pointer-events:none}
.section-form::after{content:'';position:absolute;bottom:-15%;left:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(58,123,213,.04) 0%,transparent 70%);pointer-events:none}

.form-layout{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:var(--space-4xl);
  align-items:start;
  position:relative;
  z-index:1;
}

/* Left — Form */
.form-main h2{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3vw,var(--text-5xl));
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  color:var(--color-gray-900);
  margin-bottom:var(--space-md);
}
.form-main>p{font-size:var(--text-lg);color:var(--color-gray-500);margin-bottom:var(--space-3xl);max-width:520px}

/* Stepper */
.stepper{display:flex;align-items:center;gap:0;margin-bottom:var(--space-3xl);position:relative}
.stepper-step{display:flex;align-items:center;gap:var(--space-sm);position:relative;z-index:1}
.stepper-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-sm);transition:all var(--duration-normal) var(--ease-out);flex-shrink:0}
.stepper-dot.inactive{background:var(--color-gray-100);color:var(--color-gray-400);border:2px solid var(--color-gray-200)}
.stepper-dot.active{background:var(--color-primary);color:#fff;border:2px solid var(--color-primary);box-shadow:0 0 0 4px rgba(43,138,110,.15)}
.stepper-dot.done{background:var(--color-primary-light);color:var(--color-primary);border:2px solid var(--color-primary-muted)}
.stepper-dot.done svg{width:18px;height:18px}
.stepper-text{font-size:var(--text-sm);font-weight:500;color:var(--color-gray-400);white-space:nowrap;transition:color var(--duration-fast)}
.stepper-text.active{color:var(--color-gray-800)}
.stepper-text.done{color:var(--color-primary)}
.stepper-line{flex:1;height:2px;background:var(--color-gray-200);margin:0 var(--space-md);min-width:40px;position:relative}
.stepper-line-fill{position:absolute;top:0;left:0;height:100%;background:var(--color-primary-muted);border-radius:2px;transition:width var(--duration-slow) var(--ease-out)}

/* Form card */
.form-card{
  background:var(--color-white);
  border:1px solid var(--color-gray-100);
  border-radius:var(--radius-2xl);
  padding:var(--space-3xl);
  box-shadow:var(--shadow-md);
  transition:all var(--duration-normal) var(--ease-out);
}

.form-step{display:none}
.form-step.active{display:block;animation:stepFadeIn .4s var(--ease-out)}
@keyframes stepFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.form-step h3{font-family:var(--font-body);font-size:var(--text-xl);font-weight:600;color:var(--color-gray-800);margin-bottom:var(--space-xs)}
.form-step .step-desc{font-size:var(--text-sm);color:var(--color-gray-500);margin-bottom:var(--space-2xl)}

/* Form fields */
.field-group{margin-bottom:var(--space-xl)}
.field-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-gray-700);margin-bottom:var(--space-sm)}
.field-label .required{color:var(--color-error)}

/* Radio card group */
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.radio-card{position:relative;cursor:pointer}
.radio-card input{position:absolute;opacity:0;pointer-events:none}
.radio-card-label{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-lg) var(--space-md);background:var(--color-white);border:2px solid var(--color-gray-100);border-radius:var(--radius-lg);text-align:center;transition:all var(--duration-fast) var(--ease-out);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-600)}
.radio-card-label svg{width:28px;height:28px;color:var(--color-gray-400);transition:color var(--duration-fast)}
.radio-card input:checked+.radio-card-label{border-color:var(--color-primary);background:var(--color-primary-lighter);color:var(--color-primary-dark)}
.radio-card input:checked+.radio-card-label svg{color:var(--color-primary)}
.radio-card-label:hover{border-color:var(--color-gray-300)}

/* Select / Input */
.field-select,.field-input{
  width:100%;
  padding:14px 16px;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-gray-800);
  background:var(--color-white);
  border:1.5px solid var(--color-gray-200);
  border-radius:var(--radius-lg);
  transition:all var(--duration-fast) var(--ease-out);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}
.field-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23868E96'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:44px;
}
.field-select:focus,.field-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(43,138,110,.1)}
.field-input::placeholder{color:var(--color-gray-400)}

/* Inline fields */
.fields-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}

/* Motivation chips */
.chip-group{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip-label{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1.5px solid var(--color-gray-200);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-600);transition:all var(--duration-fast) var(--ease-out);background:var(--color-white)}
.chip input:checked+.chip-label{border-color:var(--color-primary);background:var(--color-primary-lighter);color:var(--color-primary-dark)}
.chip-label:hover{border-color:var(--color-gray-300)}

/* Revenue range cards */
.revenue-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.revenue-card{position:relative;cursor:pointer}
.revenue-card input{position:absolute;opacity:0;pointer-events:none}
.revenue-card-label{display:flex;flex-direction:column;padding:var(--space-md) var(--space-lg);border:2px solid var(--color-gray-100);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--ease-out)}
.revenue-card-label .rev-range{font-size:var(--text-sm);font-weight:600;color:var(--color-gray-800)}
.revenue-card-label .rev-category{font-size:var(--text-xs);color:var(--color-gray-400);margin-top:2px}
.revenue-card input:checked+.revenue-card-label{border-color:var(--color-primary);background:var(--color-primary-lighter)}
.revenue-card-label:hover{border-color:var(--color-gray-300)}

/* Form actions */
.form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-gray-100)}
.btn-back{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-500);background:none;border:none;cursor:pointer;transition:color var(--duration-fast);border-radius:var(--radius-full)}
.btn-back:hover{color:var(--color-gray-700);background:var(--color-gray-50)}
.btn-back svg{width:16px;height:16px}
.btn-next{padding:14px 28px}

/* Right sidebar — Trust elements */
.form-sidebar{position:sticky;top:calc(var(--header-height) + var(--space-2xl))}

.trust-card{background:var(--color-white);border:1px solid var(--color-gray-100);border-radius:var(--radius-xl);padding:var(--space-2xl);margin-bottom:var(--space-lg)}
.trust-card h4{font-size:var(--text-base);font-weight:600;color:var(--color-gray-800);margin-bottom:var(--space-lg);display:flex;align-items:center;gap:var(--space-sm)}
.trust-card h4 svg{width:20px;height:20px;color:var(--color-primary)}

.trust-item{display:flex;gap:var(--space-md);margin-bottom:var(--space-lg)}
.trust-item:last-child{margin-bottom:0}
.trust-icon{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-icon.green{background:var(--color-accent-light);color:var(--color-accent)}
.trust-icon.blue{background:var(--color-accent-light);color:var(--color-accent)}
.trust-icon svg{width:18px;height:18px}
.trust-item p{font-size:var(--text-sm);color:var(--color-gray-600);line-height:var(--leading-relaxed)}
.trust-item strong{color:var(--color-gray-800);font-weight:600}

.trust-quote{background:var(--color-gray-900);border-radius:var(--radius-xl);padding:var(--space-2xl);color:#fff;position:relative;overflow:hidden}
.trust-quote::before{content:'';position:absolute;top:-30%;right:-20%;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(43,138,110,.2) 0%,transparent 70%)}
.trust-quote p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:rgba(255,255,255,.7);font-style:italic;position:relative;z-index:1}
.trust-quote .quote-author{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg);font-style:normal}
.trust-quote .quote-avatar{width:32px;height:32px;border-radius:50%;background:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;color:#fff}
.trust-quote .quote-name{font-size:var(--text-sm);color:#fff;font-weight:500}
.trust-quote .quote-loc{font-size:var(--text-xs);color:rgba(255,255,255,.4)}

/* ══════════════════════════════════════════
   SUCCESS / REJECTION STATES
   ══════════════════════════════════════════ */
.result-screen{display:none;text-align:center;padding:var(--space-3xl) var(--space-xl)}
.result-screen.active{display:block;animation:stepFadeIn .5s var(--ease-out)}
.result-icon{width:72px;height:72px;border-radius:50%;margin:0 auto var(--space-xl);display:flex;align-items:center;justify-content:center}
.result-icon.success{background:var(--color-primary-light);color:var(--color-primary)}
.result-icon.info{background:var(--color-accent-light);color:var(--color-accent)}
.result-icon.error{background:#fde8e8;color:var(--color-error)}
.result-icon svg{width:36px;height:36px}

/* ══ LOADING SCREEN (Labor Illusion) ══ */
#loadingScreen{display:none;text-align:center;padding:var(--space-3xl) var(--space-xl)}
#loadingScreen.active{display:block;animation:stepFadeIn .4s var(--ease-out)}
.loading-spinner{width:52px;height:52px;border:3px solid var(--color-gray-100);border-top-color:var(--color-primary);border-radius:50%;animation:spinLoader .8s linear infinite;margin:0 auto var(--space-xl)}
@keyframes spinLoader{to{transform:rotate(360deg)}}
#loadingText{font-size:var(--text-base);color:var(--color-gray-500);line-height:var(--leading-relaxed);max-width:360px;display:inline-block;transition:opacity .3s ease}
#loadingText.fade{opacity:0}
.result-screen h3{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--color-gray-900);margin-bottom:var(--space-md)}
.result-screen p{font-size:var(--text-base);color:var(--color-gray-500);line-height:var(--leading-relaxed);max-width:480px;margin:0 auto var(--space-xl)}

/* Calendar mockup */
.calendar-mock{max-width:440px;margin:0 auto;background:var(--color-offwhite);border:1px solid var(--color-gray-100);border-radius:var(--radius-xl);overflow:hidden}
.calendar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);background:var(--color-white);border-bottom:1px solid var(--color-gray-100)}
.calendar-header h4{font-size:var(--text-base);font-weight:600;color:var(--color-gray-800)}
.calendar-header button{width:32px;height:32px;border-radius:50%;background:var(--color-gray-50);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-gray-500)}
.calendar-header button svg{width:16px;height:16px}
.calendar-days{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm);padding:var(--space-lg) var(--space-xl)}
.calendar-day{padding:var(--space-sm) var(--space-xs);text-align:center;border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--duration-fast);cursor:pointer}
.calendar-day .day-date{font-weight:600;color:var(--color-gray-800);font-size:var(--text-sm)}
.calendar-day .day-label{font-size:10px;color:var(--color-gray-400);margin-bottom:2px}
.calendar-day:hover{background:var(--color-primary-lighter)}
.calendar-day.selected{background:var(--color-primary);color:#fff}.calendar-day.selected .day-date,.calendar-day.selected .day-label{color:#fff}
.calendar-slots{padding:0 var(--space-xl) var(--space-xl);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.slot{padding:10px;text-align:center;border:1.5px solid var(--color-gray-200);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-600);cursor:pointer;transition:all var(--duration-fast)}
.slot:hover{border-color:var(--color-primary);color:var(--color-primary)}
.slot.selected{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.slot.disabled{opacity:.35;pointer-events:none}

/* Mobile sticky CTA */
.mobile-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:998;padding:12px var(--space-lg);background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--color-gray-100);box-shadow:0 -4px 16px rgba(0,0,0,.06)}.mobile-sticky-cta .btn{width:100%;justify-content:center;padding:14px}

/* Responsive */
@media(max-width:1024px){.nav-links{display:none}.menu-toggle{display:flex;align-items:center;justify-content:center}.header-cta{display:none}.form-layout{grid-template-columns:1fr}.form-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}}
@media(max-width:768px){.radio-cards,.revenue-cards,.fields-row{grid-template-columns:1fr}.form-card{padding:var(--space-xl)}.stepper-text{display:none}.form-sidebar{grid-template-columns:1fr}.mobile-sticky-cta{display:block}body{padding-bottom:85px}.section-form{padding:var(--space-3xl) 0}.form-actions{flex-direction:column-reverse;gap:var(--space-md)}.form-actions .btn-next{width:100%}.form-actions .btn-back{width:100%;justify-content:center}.calendar-days{grid-template-columns:repeat(3,1fr)}.calendar-slots{grid-template-columns:repeat(2,1fr)}}

/* --- Source 6 --- */


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-gray-800);background:var(--color-white);overflow-x:hidden}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}ul{list-style:none}

/* Header */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-height);background:rgba(230,240,234,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,0);transition:border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.header.scrolled{border-bottom-color:var(--color-gray-100);box-shadow:0 1px 8px rgba(0,0,0,.04)}.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);height:100%;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-gray-900)}.logo-icon{width:36px;height:36px;background:var(--color-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:var(--text-lg)}.nav{display:flex;align-items:center;gap:var(--space-2xl)}.nav-links{display:flex;align-items:center;gap:var(--space-xs)}.nav-link{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-600);border-radius:var(--radius-sm);transition:color var(--duration-fast),background var(--duration-fast)}.nav-link:hover{color:var(--color-gray-900);background:var(--color-gray-50)}.nav-link.active{color:var(--color-primary-dark);background:var(--color-primary-light)}.header-cta{display:inline-flex;align-items:center;gap:var(--space-sm);padding:10px 22px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-cta);border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.header-cta:hover{background:var(--color-cta-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.header-cta svg{width:16px;height:16px}
.menu-toggle{display:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;border-radius:var(--radius-sm)}.menu-toggle span{display:block;width:20px;height:2px;background:var(--color-gray-700);border-radius:2px;position:absolute;left:50%;transform:translateX(-50%);transition:all var(--duration-normal) var(--ease-out)}.menu-toggle span:nth-child(1){top:13px}.menu-toggle span:nth-child(2){top:19px}.menu-toggle span:nth-child(3){top:25px}.menu-toggle.open span:nth-child(1){top:19px;transform:translateX(-50%) rotate(45deg)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){top:19px;transform:translateX(-50%) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:#fff;z-index:999;padding:var(--space-xl);flex-direction:column;gap:var(--space-sm)}.mobile-nav.visible{display:flex}.mobile-nav-link{padding:var(--space-md) var(--space-lg);font-size:var(--text-lg);font-weight:500;color:var(--color-gray-700);border-radius:var(--radius-md)}.mobile-nav-cta{margin-top:var(--space-lg);padding:var(--space-md) var(--space-xl);text-align:center;font-size:var(--text-base);font-weight:600;color:#fff;background:var(--color-cta);border-radius:var(--radius-full)}

/* Shared */
.section-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}
.section-label{display:inline-flex;align-items:center;gap:var(--space-sm);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-primary);margin-bottom:var(--space-lg)}.section-label::before{content:'';width:24px;height:2px;background:var(--color-primary);border-radius:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font-body);font-weight:600;border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.btn svg{width:18px;height:18px}
.btn-primary{padding:16px 32px;font-size:var(--text-base);color:#fff;background:var(--color-cta);border-radius:var(--radius-full)}.btn-primary:hover{background:var(--color-cta-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-accent{padding:16px 32px;font-size:var(--text-base);color:#fff;background:var(--color-primary);border-radius:var(--radius-full)}.btn-accent:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,138,110,.25)}
.btn-secondary{padding:16px 32px;font-size:var(--text-base);color:var(--color-gray-700);background:#fff;border:1.5px solid var(--color-gray-200);border-radius:var(--radius-full)}.btn-secondary:hover{border-color:var(--color-gray-300);background:var(--color-gray-50)}
.btn-sm{padding:10px 20px;font-size:var(--text-sm)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}

/* ══════════════════════════════════════════
   HERO — Témoignages page
   ══════════════════════════════════════════ */
.page-hero{margin-top:var(--header-height);padding:var(--space-5xl) 0 var(--space-4xl);background:var(--color-gray-900);position:relative;overflow:hidden;text-align:center}
.page-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(43,138,110,.15) 0%,transparent 70%);pointer-events:none}
.page-hero::after{content:'';position:absolute;bottom:-25%;left:-8%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(58,123,213,.1) 0%,transparent 70%);pointer-events:none}
.page-hero .section-inner{position:relative;z-index:1}
.page-hero .section-label{color:var(--color-primary-muted)}.page-hero .section-label::before{background:var(--color-primary-muted)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4vw,var(--text-5xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:#fff;margin-bottom:var(--space-md)}
.page-hero>div>p{font-size:var(--text-lg);color:rgba(255,255,255,.5);max-width:560px;margin:0 auto var(--space-2xl)}
.hero-stats{display:flex;justify-content:center;gap:var(--space-4xl);flex-wrap:wrap}
.hero-stat-number{font-family:var(--font-display);font-size:var(--text-4xl);color:#fff;line-height:1}
.hero-stat-label{font-size:var(--text-sm);color:rgba(255,255,255,.4);margin-top:4px}

/* ══════════════════════════════════════════
   SECTION: Avis Vidéos
   ══════════════════════════════════════════ */
.section-videos{padding:var(--space-5xl) 0;background:var(--color-white)}
.section-header{text-align:center;max-width:640px;margin:0 auto var(--space-4xl)}
.section-header h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,var(--text-5xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-gray-900);margin-bottom:var(--space-md)}
.section-header p{font-size:var(--text-lg);color:var(--color-gray-500)}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.video-card{border-radius:var(--radius-xl);overflow:hidden;background:var(--color-white);border:1px solid var(--color-gray-100);transition:all var(--duration-normal) var(--ease-out);cursor:pointer}
.video-card:hover{border-color:var(--color-gray-200);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.video-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--color-gray-800),var(--color-gray-700));display:flex;align-items:center;justify-content:center}
.video-play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:transform var(--duration-normal) var(--ease-out)}
.video-card:hover .video-play{transform:scale(1.1)}
.video-play svg{width:28px;height:28px;color:var(--color-primary);margin-left:3px}
.video-duration{position:absolute;bottom:10px;right:10px;padding:3px 8px;border-radius:var(--radius-sm);background:rgba(0,0,0,.7);font-size:11px;color:#fff;font-weight:500}
.video-info{padding:var(--space-lg) var(--space-xl)}
.video-info h3{font-size:var(--text-base);font-weight:600;color:var(--color-gray-800);margin-bottom:4px}
.video-info p{font-size:var(--text-sm);color:var(--color-gray-500)}
.video-meta{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm)}
.video-meta span{font-size:var(--text-xs);color:var(--color-gray-400)}

/* ══════════════════════════════════════════
   SECTION: Avis Google (with filters)
   ══════════════════════════════════════════ */
.section-google{padding:var(--space-5xl) 0;background:var(--color-offwhite);position:relative}
.section-google::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-gray-200),transparent)}

.filters-bar{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-2xl);flex-wrap:wrap}
.filter-btn{padding:8px 18px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-600);background:var(--color-white);border:1.5px solid var(--color-gray-200);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}
.filter-btn:hover{border-color:var(--color-gray-300)}
.filter-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

.google-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}
.g-review{background:var(--color-white);border:1px solid var(--color-gray-100);border-radius:var(--radius-xl);padding:var(--space-xl);transition:all var(--duration-normal) var(--ease-out)}
.g-review:hover{border-color:var(--color-gray-200);box-shadow:var(--shadow-md)}
.g-review-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}
.g-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-base);color:#fff;flex-shrink:0}
.g-author-name{font-size:var(--text-sm);font-weight:600;color:var(--color-gray-800)}
.g-author-meta{font-size:var(--text-xs);color:var(--color-gray-400)}
.g-stars{display:flex;gap:1px;margin-bottom:var(--space-sm)}.g-stars svg{width:14px;height:14px;fill:var(--color-warning)}
.g-text{font-size:var(--text-sm);color:var(--color-gray-600);line-height:var(--leading-relaxed)}
.g-tag{display:inline-flex;margin-top:var(--space-md);padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:var(--color-primary-lighter);color:var(--color-primary-dark)}

/* ══════════════════════════════════════════
   SECTION: Messages / Screenshots
   ══════════════════════════════════════════ */
.section-messages{padding:var(--space-5xl) 0;background:var(--color-white)}
.messages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.message-card{background:var(--color-offwhite);border:1px solid var(--color-gray-100);border-radius:var(--radius-xl);padding:var(--space-xl);position:relative;transition:all var(--duration-normal) var(--ease-out)}
.message-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.message-card::before{content:'"';position:absolute;top:8px;left:20px;font-family:var(--font-display);font-size:3rem;color:var(--color-primary-muted);opacity:.3;line-height:1}
.message-card p{font-size:var(--text-sm);color:var(--color-gray-600);line-height:var(--leading-relaxed);padding-top:var(--space-lg);font-style:italic}
.message-card .msg-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-gray-100)}
.msg-author{font-size:var(--text-sm);font-weight:600;color:var(--color-gray-700)}
.msg-source{font-size:var(--text-xs);color:var(--color-gray-400);display:flex;align-items:center;gap:4px}
.msg-source svg{width:12px;height:12px}
.msg-blur{font-size:var(--text-xs);color:var(--color-gray-400);font-style:normal;display:flex;align-items:center;gap:4px;margin-top:var(--space-sm)}
.msg-blur svg{width:14px;height:14px;color:var(--color-primary-muted)}

/* ══════════════════════════════════════════
   SECTION: Portfolio Avant/Après
   ══════════════════════════════════════════ */
.section-portfolio{padding:var(--space-5xl) 0;background:var(--color-offwhite)}
.portfolio-grid-large{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.pf-card{border-radius:var(--radius-xl);overflow:hidden;background:#fff;border:1px solid var(--color-gray-100);transition:all var(--duration-normal) var(--ease-out);cursor:pointer}
.pf-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pf-images{display:grid;grid-template-columns:1fr 1fr;position:relative}
.pf-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;color:var(--color-gray-400)}
.pf-img.before{background:linear-gradient(135deg,#E8D5C4,#D4C0AD)}
.pf-img.after{background:linear-gradient(135deg,var(--color-primary-light),#C5E8DA)}
.pf-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:1}
.pf-img-label{position:absolute;bottom:6px;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;text-transform:uppercase}
.pf-img.before .pf-img-label{left:6px;background:rgba(0,0,0,.5);color:#fff}
.pf-img.after .pf-img-label{right:6px;background:rgba(43,138,110,.8);color:#fff}
.pf-info{padding:var(--space-lg) var(--space-xl)}
.pf-info h3{font-size:var(--text-base);font-weight:600;color:var(--color-gray-800);margin-bottom:4px}
.pf-info-meta{display:flex;gap:var(--space-md);font-size:var(--text-xs);color:var(--color-gray-500)}
.pf-tag{display:inline-flex;margin-top:var(--space-sm);padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:var(--color-primary-lighter);color:var(--color-primary-dark)}

/* ══════════════════════════════════════════
   STICKY CTA BAR
   ══════════════════════════════════════════ */
.sticky-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:998;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--color-gray-100);box-shadow:0 -4px 20px rgba(0,0,0,.06);padding:14px 0;transform:translateY(100%);transition:transform var(--duration-slow) var(--ease-out)}
.sticky-cta-bar.visible{transform:translateY(0)}
.sticky-cta-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.sticky-cta-text{font-size:var(--text-sm);color:var(--color-gray-600)}
.sticky-cta-text strong{color:var(--color-gray-800)}

/* Footer */
.footer{background:var(--color-gray-900);color:var(--color-gray-300);padding:var(--space-4xl) 0 var(--space-xl)}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4xl);padding-bottom:var(--space-3xl);border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-gray-400);margin-top:var(--space-md);max-width:320px}
.footer-logo{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:var(--text-xl);color:#fff}
.footer-logo .logo-icon{width:32px;height:32px;font-size:var(--text-base)}
.footer h4{font-size:var(--text-sm);font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:var(--tracking-wider);margin-bottom:var(--space-lg)}
.footer-links li{margin-bottom:var(--space-sm)}.footer-links a{font-size:var(--text-sm);color:var(--color-gray-400);transition:color var(--duration-fast)}.footer-links a:hover{color:#fff}
.footer-contact-item{display:flex;align-items:start;gap:var(--space-sm);margin-bottom:var(--space-md);font-size:var(--text-sm);color:var(--color-gray-400)}.footer-contact-item svg{width:16px;height:16px;color:var(--color-primary-muted);flex-shrink:0;margin-top:2px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-xl);flex-wrap:wrap;gap:var(--space-md)}.footer-legal{font-size:var(--text-xs);color:var(--color-gray-500)}.footer-legal-links{display:flex;gap:var(--space-lg)}.footer-legal-links a{font-size:var(--text-xs);color:var(--color-gray-500);transition:color var(--duration-fast)}.footer-legal-links a:hover{color:var(--color-gray-300)}
.footer-disclaimer{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.05);font-size:var(--text-xs);color:var(--color-gray-500);line-height:var(--leading-relaxed);max-width:700px}

/* ══════════════════════════════════════════════
   REVENUE CATEGORIES — COULEURS MaPrimeRénov'
   ══════════════════════════════════════════════ */
.rev-bleu   { color: #1a6fba; font-weight: 600; }
.rev-jaune  { color: #c97a00; font-weight: 600; }
.rev-violet { color: #7c3fb8; font-weight: 600; }
.rev-rose   { color: #b8306a; font-weight: 600; }

/* ══════════════════════════════════════════════
   TRUST STATS BAR
   ══════════════════════════════════════════════ */
.trust-stats-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--space-2xl) var(--space-xl);
}

.trust-stats-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xl);
  flex-wrap: wrap;
}

.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.trust-stat-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1;
}

.trust-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
  text-align: center;
}

.trust-stat-divider {
  width: 1px;
  height: 48px;
  background: var(--color-gray-200);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .trust-stat-divider { display: none; }
  .trust-stats-inner { gap: var(--space-xl); }
  .trust-stat-number { font-size: 2rem; }
}

/* ══════════════════════════════════════════════
   HERO — OUVRIER
   ══════════════════════════════════════════════ */

/*
  L'ouvrier est dans .hero (position:relative, pleine largeur).
  Son bord droit est positionné à 60vw depuis la gauche (= 2/5 de la page depuis la droite),
  ce qui le place juste à gauche de la colonne texte.
  bottom: 0 = pieds au bas du hero.
  height: 80% du hero pour qu'il soit très grand.
*/
.hero-ouvrier {
  position: absolute;
  bottom: 7.5%;
  right: 59.5vw;
  width: auto;
  height: 64%;
  object-fit: contain;
  object-position: bottom;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(-6px 0 24px rgba(0,0,0,0.12));
}

@media (max-width: 1024px) {
  .hero-ouvrier { display: none; }
}

@media (max-width: 768px) {
  .hero-image-outer { margin-left: 0 !important; }
  .trust-stats-inner { gap: var(--space-lg); }
}

/* Responsive */
@media(max-width:1024px){.nav-links{display:none}.menu-toggle{display:flex;align-items:center;justify-content:center}.header-cta{display:none}.video-grid{grid-template-columns:repeat(2,1fr)}.google-grid{grid-template-columns:1fr}.messages-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid-large{grid-template-columns:repeat(2,1fr)}.footer-top{grid-template-columns:1fr 1fr;gap:var(--space-2xl)}.footer-brand{grid-column:1/-1}}
@media(max-width:768px){.video-grid,.messages-grid,.portfolio-grid-large{grid-template-columns:1fr}.hero-stats{gap:var(--space-2xl)}.sticky-cta-inner{flex-direction:column;text-align:center}.sticky-cta-inner .btn{width:100%}.section-videos,.section-google,.section-messages,.section-portfolio{padding:var(--space-4xl) 0}.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}body{padding-bottom:80px}.filters-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-sm)}}

/* ══════════════════════════════════════════════
   ANIMATION PULSE — Bouton de validation formulaire
   ══════════════════════════════════════════════ */
@keyframes pulseActiveCTA {
  0%   { box-shadow: 0 0 0 0 rgba(43, 138, 110, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(43, 138, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 138, 110, 0); }
}

#submitBtn:not([disabled]) {
  animation: pulseActiveCTA 2s infinite ease-in-out;
}

/* ══════════════════════════════════════════════
   MAGNETIC BUTTON — Effet glow + magnétisme
   ══════════════════════════════════════════════ */

/* Base : position relative nécessaire pour le ::before */
.magnetic-button {
  position: relative;
  overflow: hidden;
  /* Variables CSS mises à jour dynamiquement par le JS */
  --x: 50%;
  --y: 50%;
}

/* Le halo lumineux qui suit le curseur */
.magnetic-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Afficher le halo au survol */
.magnetic-button:hover::before {
  opacity: 1;
}

/* Sur mobile : pas de magnétisme mais glow au touch */
@media (hover: none) {
  .magnetic-button:active::before {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════
   MOBILE BUG FIXES — @media max-width: 768px
   (N'affecte PAS la version desktop)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Bug 1 : Menu mobile — assure l'affichage quand .visible ── */
  .mobile-nav {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .mobile-nav.visible {
    display: flex !important;
    flex-direction: column;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* ── Bug 2 : Bouton hero — taille adaptée mobile ── */
  .hero-cta-wrapper .btn-primary {
    font-size: var(--text-base) !important;
    padding: 12px 20px !important;
    transform: none !important;
    width: 100%;
    max-width: 320px;
    white-space: normal;
    text-align: center;
  }

  /* ── Bug 3 : Section CTA "Prêt à en parler ?" — retire le camion, fond vert ── */
  .section-transition-cta::after,
  .section-transition-cta::before {
    display: none !important;
  }
  .section-transition-cta {
    background-color: var(--color-primary-lighter) !important;
    padding: var(--space-2xl) var(--space-md);
  }
  .transition-cta-inner {
    margin: 0 auto;
    text-align: center;
  }
  .transition-cta-inner h3 {
    color: var(--color-primary) !important;
    text-shadow: none !important;
    -webkit-text-stroke: unset !important;
  }
  .transition-cta-inner p {
    color: var(--color-gray-700) !important;
    text-shadow: none !important;
  }

  /* ── Bug 4 : Bouton sticky mobile — masquer ── */
  .mobile-sticky-cta {
    display: none !important;
  }

}