/* =====================================================================
   RNR CLIMATISATION — Design System "Pro Moderne"
   Palette logo : bleu institutionnel + rouge CTA + cyan accent
   Typo Manrope : voir fonts.css (chargé avant cette feuille)
   ===================================================================== */


/* -------- Reset minimal -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* -------- Design tokens -------- */
:root {
  /* Couleurs marque */
  --brand-blue: #283890;        /* bleu institutionnel — logo moyeu */
  --brand-blue-700: #1E2B73;    /* hover / headers */
  --brand-blue-50:  #EEF1FB;    /* fond doux */
  --brand-red: #ED1B24;         /* CTA / urgence — logo flammes */
  --brand-red-700: #C21219;     /* hover CTA */
  --brand-cyan: #00A8E8;        /* accent secondaire — logo neige */
  --brand-cyan-50: #E6F7FE;

  /* Neutres */
  --ink-900: #0F172A;           /* texte principal */
  --ink-700: #334155;           /* texte secondaire */
  --ink-500: #64748B;           /* texte tertiaire */
  --ink-300: #CBD5E1;           /* bordures */
  --ink-100: #F1F5F9;           /* fond gris doux */
  --ink-50:  #F8FAFC;           /* fond très clair */
  --white: #FFFFFF;

  /* Sémantique */
  --bg: var(--white);
  --bg-soft: var(--ink-50);
  --bg-alt: var(--brand-blue-50);
  --text: var(--ink-900);
  --text-muted: var(--ink-700);
  --border: var(--ink-300);

  /* Typo */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.8125rem;     /* 13 */
  --fs-sm: 0.9375rem;     /* 15 */
  --fs-base: 1.0625rem;   /* 17 — confort lecture */
  --fs-lg: 1.1875rem;     /* 19 */
  --fs-xl: 1.5rem;        /* 24 */
  --fs-2xl: 2rem;         /* 32 */
  --fs-3xl: 2.5rem;       /* 40 */
  --fs-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);  /* hero H1 */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Espaces (rythme 4) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Rayons */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Ombres — douces et professionnelles */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-cta: 0 8px 20px rgba(237, 27, 36, 0.25);

  /* Largeurs */
  --container: 1180px;
  --container-narrow: 880px;

  /* Transitions */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t: 200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

/* -------- Base -------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
h1 { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-lg); }

p { color: var(--text-muted); }
p + p { margin-top: var(--s-4); }

a:not([class]) {
  color: var(--brand-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t);
}
a:not([class]):hover { color: var(--brand-red); }

::selection { background: var(--brand-blue); color: var(--white); }

/* -------- Layout helpers -------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--s-9); position: relative; }
.section--tight { padding-block: var(--s-7); }
.section--alt { background: var(--bg-alt); }
.section--soft { background: var(--bg-soft); }
.section--cyan { background: var(--brand-cyan-50); }
.section--gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(40, 56, 144, 0.06), transparent 70%),
    linear-gradient(180deg, var(--ink-50) 0%, var(--white) 100%);
}
.section--mesh {
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 168, 232, 0.05), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(40, 56, 144, 0.05), transparent 40%),
    var(--white);
}
.section--dark {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(0, 168, 232, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(237, 27, 36, 0.10), transparent 60%),
    linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-700) 100%);
  color: var(--white);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: rgba(255, 255, 255, 0.85); }
.section--dark .stat-value { color: var(--brand-cyan); }
.section--dark .stat-label { color: rgba(255,255,255,0.75); }

/* Séparateurs subtils entre sections de même fond pour casser la monotonie */
.section + .section:not(.section--soft):not(.section--alt):not(.section--cyan):not(.section--dark):not(.section--gradient):not(.section--mesh)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
  opacity: 0.4;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue);
  padding: var(--s-2) var(--s-4);
  background: var(--brand-blue-50);
  border-radius: var(--r-full);
  margin-bottom: var(--s-5);
}
.section--dark .eyebrow { color: var(--white); background: rgba(255,255,255,0.12); }
.eyebrow--red { color: var(--brand-red); background: rgba(237, 27, 36, 0.08); }

.section-header { margin-bottom: var(--s-7); max-width: 720px; }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header h2 + p { margin-top: var(--s-4); font-size: var(--fs-lg); }

/* -------- Boutons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  font-weight: 600;
  font-size: var(--fs-base);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-red);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--brand-red-700); box-shadow: 0 12px 28px rgba(237,27,36,0.35); }

.btn--secondary {
  background: var(--brand-blue);
  color: var(--white);
}
.btn--secondary:hover { background: var(--brand-blue-700); }

.btn--outline {
  background: transparent;
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn--outline:hover { background: var(--brand-blue); color: var(--white); }

.btn--ghost {
  background: var(--white);
  color: var(--brand-blue);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--brand-blue); }

.btn--lg { padding: var(--s-5) var(--s-7); font-size: var(--fs-lg); }
.btn--sm { padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); }

/* CTA téléphone : label discret + numéro en gros */
.btn--phone {
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--white);
  color: var(--brand-blue);
  border: 2px solid var(--border);
  text-align: left;
  line-height: 1.1;
}
.btn--phone .btn-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: var(--white);
  flex-shrink: 0;
  transition: background var(--t);
}
.btn--phone .btn-phone-icon .icon { width: 22px; height: 22px; }
.btn--phone .btn-phone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.btn--phone .btn-phone-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  line-height: 1;
}
.btn--phone .btn-phone-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: -0.01em;
}
.btn--phone:hover { border-color: var(--brand-blue); background: var(--brand-blue-50); }
.btn--phone:hover .btn-phone-icon { background: var(--brand-red); }


.btn .icon { width: 18px; height: 18px; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}
.brand img { height: 52px; width: auto; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-weight: 800;
  font-size: var(--fs-base);
  color: var(--brand-blue);
  letter-spacing: -0.01em;
}
.brand-tagline {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-weight: 500;
}

/* Nav desktop */
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  border-radius: var(--r-md);
  transition: color var(--t), background var(--t);
}
.nav-link:hover, .nav-link.is-active { color: var(--brand-blue); background: var(--brand-blue-50); }
.nav-link .chevron { transition: transform var(--t); }
.nav-item--has-dropdown:hover .chevron { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav-item--has-dropdown:hover .dropdown,
.nav-item--has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-link {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.dropdown-link:hover { color: var(--brand-blue); background: var(--brand-blue-50); }

.header-cta { display: flex; align-items: center; gap: var(--s-3); }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--white);
  text-decoration: none;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.header-phone:hover {
  border-color: var(--brand-blue);
  background: var(--brand-blue-50);
  box-shadow: 0 4px 12px rgba(40, 56, 144, 0.10);
}
.header-phone .header-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: var(--white);
  flex-shrink: 0;
  transition: background var(--t);
}
.header-phone:hover .header-phone-icon { background: var(--brand-red); }
.header-phone .header-phone-icon .icon { width: 18px; height: 18px; color: var(--white); }
.header-phone .header-phone-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.header-phone .header-phone-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  white-space: nowrap;
}
.header-phone .header-phone-number {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Burger mobile */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger span {
  width: 20px;
  height: 2px;
  background: var(--ink-900);
  position: relative;
  transition: background var(--t);
}
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink-900);
  transition: transform var(--t);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1025px) and (max-width: 1180px) {
  .header-phone-label { display: none; }
  .header-phone { padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); }
  .header-phone .header-phone-icon { width: 30px; height: 30px; }
}

@media (max-width: 1024px) {
  .nav { display: none; position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
         background: var(--white); flex-direction: column; align-items: stretch;
         padding: var(--s-5); overflow-y: auto; border-top: 1px solid var(--border); }
  .nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--border); }
  .nav-link { padding: var(--s-4) var(--s-2); width: 100%; justify-content: space-between; border-radius: 0; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none;
              box-shadow: none; border: none; padding: 0 0 var(--s-3) var(--s-5);
              display: none; }
  .nav-item--has-dropdown.is-expanded .dropdown { display: block; }
  .nav-item--has-dropdown.is-expanded .chevron { transform: rotate(180deg); }
  .header-cta .btn { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .header-phone-text { display: none; }
  .header-phone {
    padding: var(--s-2);
    gap: 0;
    border-radius: 50%;
  }
  .brand-text { display: none; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  padding-block: var(--s-9) var(--s-9);
  background:
    radial-gradient(ellipse 80% 60% at 90% 0%, rgba(0, 168, 232, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(237, 27, 36, 0.06), transparent 60%),
    linear-gradient(180deg, var(--white), var(--bg-soft));
  overflow: hidden;
}
.hero::before {
  /* Liseré décoratif aux couleurs du logo */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-blue) 50%, var(--brand-red) 100%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-inner { grid-template-columns: 1.3fr 1fr; gap: var(--s-6); }
  .hero-image { max-height: 520px; }
}
@media (max-width: 900px) {
  .hero-image { max-width: 320px; margin: 0 auto; }
}

.hero-content > * + * { margin-top: var(--s-5); }
.hero h1 { color: var(--ink-900); }
.hero h1 strong { color: var(--brand-blue); font-weight: inherit; }
.hero-lede {
  font-size: var(--fs-lg);
  color: var(--ink-700);
  max-width: 56ch;
  line-height: var(--lh-snug);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  color: var(--ink-700);
}
.hero-trust-item .icon { width: 18px; height: 18px; color: var(--brand-blue); }

/* Hero side card — chiffres clés */
.hero-stats {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: relative;
}
.hero-stats::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--brand-cyan), transparent 40%, transparent 60%, var(--brand-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.hero-stats-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
  margin-bottom: var(--s-5);
}
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
.stat-item { display: flex; flex-direction: column; gap: 2px; }
.stat-value {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 500; }

/* =====================================================================
   SERVICES GRID (Home)
   ===================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  text-decoration: none;
  color: inherit;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-md);
}
.service-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-blue-50);
  color: var(--brand-blue);
  border-radius: var(--r-md);
}
.service-icon .icon { width: 28px; height: 28px; }
.service-card h3 { color: var(--ink-900); }
.service-card p { font-size: var(--fs-sm); margin: 0; }
.service-link {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: gap var(--t), color var(--t);
}
.service-card:hover .service-link { gap: var(--s-3); color: var(--brand-red); }

/* =====================================================================
   PROCESS STEPS
   ===================================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
  counter-reset: step;
}
.step {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -16px;
  left: var(--s-5);
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--brand-blue);
  border-radius: var(--r-full);
}
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.step p { font-size: var(--fs-sm); margin: 0; }

/* =====================================================================
   BENEFITS (puces avec icônes)
   ===================================================================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
}
.benefit {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border-left: 3px solid var(--brand-cyan);
}
.benefit-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--brand-blue);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
}
.benefit-icon .icon { width: 22px; height: 22px; }
.benefit h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.benefit p { font-size: var(--fs-sm); margin: 0; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.testimonial {
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  box-shadow: var(--shadow-xs);
}
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 8px;
  right: var(--s-5);
  font-size: 64px;
  line-height: 1;
  color: var(--brand-blue-50);
  font-family: Georgia, serif;
  font-weight: 700;
}
.testimonial-stars { color: #F59E0B; font-size: var(--fs-sm); letter-spacing: 2px; }
.testimonial-text {
  font-size: var(--fs-base);
  color: var(--ink-700);
  line-height: var(--lh-snug);
  position: relative;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.testimonial-name { font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); }
.testimonial-meta { font-size: var(--fs-xs); color: var(--ink-500); }

/* =====================================================================
   TARIFS
   ===================================================================== */
.tarifs-table {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tarif-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.tarif-row:last-child { border-bottom: none; }
.tarif-row:hover { background: var(--bg-soft); }
.tarif-info h4 { font-size: var(--fs-base); margin-bottom: 2px; }
.tarif-info p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
.tarif-price {
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--brand-blue);
  white-space: nowrap;
}
.tarif-price small { font-weight: 500; color: var(--ink-500); font-size: var(--fs-xs); }
.tarifs-note {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-top: var(--s-4);
  text-align: center;
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.faq-item[open] { border-color: var(--brand-blue); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink-900);
  transition: background var(--t);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-soft); }
.faq-item summary::after {
  content: '';
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--brand-blue);
  border-bottom: 2px solid var(--brand-blue);
  transform: rotate(45deg);
  transition: transform var(--t);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-answer {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--ink-700);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* =====================================================================
   CTA BANNER (urgence dépannage / contact)
   ===================================================================== */
.cta-banner {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-7);
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-700) 100%);
  border-radius: var(--r-xl);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at right, rgba(237, 27, 36, 0.25), transparent 60%);
  pointer-events: none;
}
.cta-banner h2 {
  color: var(--white);
  font-size: var(--fs-2xl);
  margin-bottom: var(--s-2);
  position: relative;
}
.cta-banner p { color: rgba(255,255,255,0.85); margin: 0; position: relative; }
.cta-banner-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; position: relative; }
@media (max-width: 760px) { .cta-banner { grid-template-columns: 1fr; } }

/* CTA intro (juste après le hero) — fond cyan plein qui tranche */
.section--cta-intro {
  background:
    radial-gradient(ellipse 70% 100% at 100% 50%, rgba(40, 56, 144, 0.35), transparent 60%),
    radial-gradient(ellipse 40% 80% at 0% 100%, rgba(237, 27, 36, 0.18), transparent 50%),
    linear-gradient(135deg, var(--brand-cyan) 0%, #0086C4 100%);
  color: var(--white);
  padding-block: var(--s-8);
  position: relative;
  overflow: hidden;
}
/* Pattern dot subtil pour texture */
.section--cta-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
}
/* Liseré gradient marque en haut et en bas */
.section--cta-intro::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-blue) 50%, var(--brand-red) 100%);
}

.cta-intro {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: var(--s-5) var(--s-7);
  align-items: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 2;
}

.cta-intro-content h2 {
  color: var(--white);
  font-size: var(--fs-2xl);
  margin-bottom: var(--s-2);
  letter-spacing: -0.025em;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
}
.cta-intro-content p {
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-base);
}
.cta-intro-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}

/* Bouton CTA principal : label + action sur 2 lignes, fond rouge, halo blanc */
.btn--cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-6);
  background: var(--brand-red);
  color: var(--white);
  border-radius: var(--r-md);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(237, 27, 36, 0.40), 0 0 0 2px rgba(255, 255, 255, 0.20);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn--cta:hover {
  background: var(--brand-red-700);
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(237, 27, 36, 0.50), 0 0 0 2px rgba(255, 255, 255, 0.30);
}
.btn-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.btn-cta-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.90;
  line-height: 1;
}
.btn-cta-action {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.btn-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: background var(--t), transform var(--t);
}
.btn--cta:hover .btn-cta-arrow {
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(2px);
}

/* Bouton primaire reste rouge sur cyan = contraste max (fallback si btn--primary utilisé) */
.section--cta-intro .btn--primary {
  box-shadow: 0 12px 30px rgba(237, 27, 36, 0.40), 0 0 0 2px rgba(255, 255, 255, 0.20);
}
.section--cta-intro .btn--primary:hover {
  box-shadow: 0 16px 36px rgba(237, 27, 36, 0.50), 0 0 0 2px rgba(255, 255, 255, 0.30);
}

/* Bouton téléphone : adapté glassmorphism blanc sur cyan */
.section--cta-intro .btn--phone {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.section--cta-intro .btn--phone:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.50);
}
.section--cta-intro .btn--phone .btn-phone-icon {
  background: var(--white);
  color: var(--brand-blue);
}
.section--cta-intro .btn--phone:hover .btn-phone-icon {
  background: var(--brand-red);
  color: var(--white);
}
.section--cta-intro .btn--phone .btn-phone-icon .icon { color: inherit; }
.section--cta-intro .btn--phone .btn-phone-label { color: rgba(255, 255, 255, 0.80); }
.section--cta-intro .btn--phone .btn-phone-number { color: var(--white); }

@media (max-width: 1100px) {
  .cta-intro {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}
@media (max-width: 700px) {
  .cta-intro-content h2 { font-size: var(--fs-xl); }
  .btn--cta { padding: var(--s-3) var(--s-4); }
  .btn-cta-action { font-size: var(--fs-lg); }
  .btn-cta-arrow { width: 32px; height: 32px; }
}

/* =====================================================================
   ZONES D'INTERVENTION
   ===================================================================== */
.zones-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.zone-pill {
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  transition: all var(--t);
}
.zone-pill:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-1px); }
.zone-pill .icon { width: 16px; height: 16px; color: var(--brand-cyan); }

.villes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.ville-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--t);
}
.ville-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ville-name { font-weight: 700; color: var(--ink-900); font-size: var(--fs-base); }
.ville-meta { font-size: var(--fs-xs); color: var(--ink-500); display: flex; gap: var(--s-3); }
.ville-link {
  font-size: var(--fs-sm);
  color: var(--brand-blue);
  font-weight: 600;
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

/* =====================================================================
   ABOUT / CONTENT BODY (zones rédactionnelles libres)
   ===================================================================== */
.prose {
  max-width: 70ch;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink-700);
}
.prose > * + * { margin-top: var(--s-4); }
.prose h3 { margin-top: var(--s-6); color: var(--ink-900); }
.prose ul:not([class]) { padding-left: var(--s-5); list-style: disc; }
.prose ul:not([class]) li { margin-bottom: var(--s-2); }
.prose strong { color: var(--ink-900); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: var(--ink-900);
  color: rgba(255,255,255,0.7);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-brand img { height: 56px; width: auto; filter: brightness(0) invert(1) opacity(0.9); }
.footer-tagline { color: rgba(255,255,255,0.6); max-width: 38ch; }
.footer-col h4 {
  color: var(--white);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-4);
}
.footer-col ul li { margin-bottom: var(--s-2); }
.footer-col a {
  color: rgba(255,255,255,0.7);
  transition: color var(--t);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.footer-col a:hover { color: var(--white); }
.footer-contact-item {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  color: rgba(255,255,255,0.7);
}
.footer-contact-item .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-cyan); margin-top: 2px; }
.footer-contact-item strong { color: var(--white); font-weight: 600; display: block; }

.footer-bottom {
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: rgba(255,255,255,0.8); }
.footer-legal-links { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* =====================================================================
   BREADCRUMBS
   ===================================================================== */
.breadcrumbs {
  padding-block: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumbs li:not(:last-child)::after { content: '/'; color: var(--ink-300); }
.breadcrumbs a { color: var(--ink-500); transition: color var(--t); }
.breadcrumbs a:hover { color: var(--brand-blue); }
.breadcrumbs li:last-child { color: var(--ink-700); font-weight: 500; }

/* =====================================================================
   FORM (devis)
   ===================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: var(--s-2); }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-900); }
.form-field label .required { color: var(--brand-red); }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--fs-base);
  color: var(--ink-900);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-50);
}
.form-field textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .form-card { padding: var(--s-5); } }

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Animations subtiles
   ===================================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-content > *,
.hero-stats { animation: fade-up 600ms cubic-bezier(.4,0,.2,1) backwards; }
.hero-content > *:nth-child(1) { animation-delay: 0ms; }
.hero-content > *:nth-child(2) { animation-delay: 80ms; }
.hero-content > *:nth-child(3) { animation-delay: 160ms; }
.hero-content > *:nth-child(4) { animation-delay: 240ms; }
.hero-stats { animation-delay: 320ms; }

/* =====================================================================
   PICTURE — images responsives + placeholders
   ===================================================================== */
.picture {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-soft);
  position: relative;
  line-height: 0;
}
.picture img,
.picture > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.picture--placeholder {
  aspect-ratio: 3 / 2;
  background: var(--bg-soft);
}
.picture--placeholder svg { width: 100%; height: 100%; display: block; }
.picture--rounded { border-radius: var(--r-xl); }
.picture--shadow { box-shadow: var(--shadow-lg); }
.picture--ratio-3-2 { aspect-ratio: 3 / 2; }
.picture--ratio-4-3 { aspect-ratio: 4 / 3; }
.picture--ratio-16-9 { aspect-ratio: 16 / 9; }
.picture--ratio-1-1 { aspect-ratio: 1 / 1; }

/* Hero image (remplace les stats à droite si fournie) */
.hero-image {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 7;
  max-height: 620px;
  margin-inline: auto;
  animation: fade-up 600ms cubic-bezier(.4,0,.2,1) backwards;
  animation-delay: 320ms;
}
.hero-image .picture,
.hero-image .picture--placeholder {
  border-radius: 0;
  height: 100%;
  aspect-ratio: auto;
}
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--brand-cyan), transparent 40%, transparent 60%, var(--brand-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Stats compactes en bandeau sous hero (quand image hero présente) */
.stats-banner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: var(--s-6) var(--s-5);
  margin-top: var(--s-7);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0, 168, 232, 0.05), transparent 70%),
    var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
/* Liseré marque en haut */
.stats-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-blue) 50%, var(--brand-red) 100%);
}
.stats-banner .stat-item {
  text-align: center;
  padding: var(--s-2) var(--s-3);
  border: none;
  gap: var(--s-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.stats-banner .stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--border);
}
.stats-banner .stat-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-cyan);
  margin-bottom: var(--s-1);
}
.stats-banner .stat-icon .icon { width: 24px; height: 24px; }
.stats-banner .stat-value {
  font-size: var(--fs-2xl);
  color: var(--brand-blue);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stats-banner .stat-label {
  font-size: var(--fs-xs);
  color: var(--ink-700);
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .stats-banner { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) 0; }
  .stats-banner .stat-item:nth-child(odd)::before { display: none; }
}

/* Image dans une section about (2 colonnes) */
.section-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.section-split--reverse .section-split__image { order: -1; }
@media (max-width: 900px) {
  .section-split, .section-split--reverse { grid-template-columns: 1fr; }
  .section-split--reverse .section-split__image { order: 0; }
}
.section-split__image .picture,
.section-split__image .picture--placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* Village cover panoramique */
.village-cover {
  margin-bottom: var(--s-7);
  aspect-ratio: 2 / 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}
.village-cover .picture,
.village-cover .picture--placeholder {
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}
.village-cover__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(0deg, rgba(15,23,42,0.7), transparent);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 500;
  z-index: 2;
}

/* Crédit photo discret (footer de section) */
.photo-credit {
  display: block;
  margin-top: var(--s-2);
  font-size: 11px;
  color: var(--ink-500);
  opacity: 0.7;
}


/* -------- Marque SVG inline (remplace logo.png) -------- */
.brand-mark { display: block; flex-shrink: 0; line-height: 0; }
.brand-mark svg { display: block; height: 52px; width: 52px; }
.brand-mark--footer svg { height: 56px; width: 56px; }
.brand-mark--footer rect:first-of-type { fill: rgba(255,255,255,0.10); }

/* -------- Bandeau engagements : même grille que benefits -------- */
.benefit h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }


/* -------- Sources 1024 px : limiter l'agrandissement -------- */
/* Les visuels de la banque plafonnent à 1024 px sur le grand côté.
   Au-delà, le bandeau village s'étirerait au-delà du natif et deviendrait mou.
   On borne la hauteur plutôt que d'étirer. */
.village-cover { max-height: 420px; }
@media (min-width: 1280px) {
  .village-cover { aspect-ratio: 5 / 2; max-height: 400px; }
}

/* =====================================================================
   ARTICLE — colonne de lecture + figures pleine largeur dans le flux
   Remplace le deux-colonnes texte/image : sur 400 mots, la colonne texte
   faisait 2,3 à 3,7x la hauteur de l'image, qui flottait au centre d'un
   vide de 400 px. Une colonne bornée en longueur de ligne + des figures
   posées aux ruptures de sujet traitent la cause au lieu de la masquer.
   ===================================================================== */

.prose-column {
  max-width: 680px;          /* ~74 caractères à 17 px : optimum de lecture */
  margin-inline: auto;
}

/* .prose porte un max-width: 70ch NON centré, qui décalait tout le bloc
   vers la gauche en laissant un vide à droite. Dans une colonne déjà
   bornée et centrée, la contrainte est redondante : on la neutralise. */
.prose--article {
  max-width: none;
  width: 100%;
}
.prose--article > h3 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}
.prose--article > p + p { margin-top: var(--s-5); }

/* Figure : respiration franche au-dessus et en dessous, et débordement
   assumé de part et d'autre de la colonne de texte sur grand écran. */
.prose-figure {
  margin-top: var(--s-9);
  margin-bottom: var(--s-9);
  width: 100%;
}
.prose-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.prose-figure figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  line-height: 1.55;
  border-left: 3px solid var(--brand-cyan);
  padding-left: var(--s-4);
}

/* Une figure suivie d'un sous-titre : pas de double marge */
.prose-figure + h3 { margin-top: 0 !important; }

@media (min-width: 1024px) {
  .prose-figure {
    width: calc(100% + 140px);
    margin-inline: -70px;
  }
}

@media (max-width: 640px) {
  .prose-figure {
    margin-top: var(--s-8);
    margin-bottom: var(--s-8);
  }
  .prose-figure img { aspect-ratio: 4 / 3; }
}