/* ════════════════════════════════════════════════════════════════════
   RestauVert · home-design.css
   Refonte visuelle + lisibilité de la home. Additif, scopé `#main`.
   Aucune modification HTML — uniquement CSS sur classes existantes.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   ★ RYTHME VISUEL DES SECTIONS
   Alternance cream / vert sombre fluide, pas de cassure brutale
   ───────────────────────────────────────────── */
body > section + section,
main > section + section {
  position: relative;
}

/* Padding cohérent toutes sections (sauf hero + dark) */
body > section.section,
body > section[class*="rv-"],
body > section[class*="bg-"] {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* ─────────────────────────────────────────────
   ★ TYPOGRAPHIE DES SECTIONS — Hiérarchie magazine
   ───────────────────────────────────────────── */
body > section .section-title,
body > section h2.section-title,
body > section > .container h2,
.rv-typos-head h2,
.rv-calendar-head h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.75rem, 3.5vw, 2.4rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  margin-bottom: 0.6em;
}

body > section .section-sub,
body > section > .container p.lead,
.rv-typos-head p,
.rv-calendar-head p {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────
   ★ EYEBROW / SECTION-TAG — Cohérence visuelle
   ───────────────────────────────────────────── */
body > section .section-tag,
body > section .rv-eyebrow,
.rv-typos-head .section-tag {
  display: inline-block;
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(212, 168, 67, 0.14) 0%, rgba(253, 224, 71, 0.10) 100%);
  color: #6B5217 !important;
  border: 1px solid rgba(212, 168, 67, 0.32);
  border-radius: 999px;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.2rem !important;
  box-shadow: 0 2px 8px rgba(212, 168, 67, 0.10);
}
/* En section sombre, badge inversé */
.bg-dark .section-tag,
.rv-stats-band .section-tag,
.hero .section-tag,
.cta-banner .section-tag,
.lead-section .section-tag,
.rv-calendar-preview .rv-eyebrow {
  background: rgba(253, 224, 71, 0.14) !important;
  border-color: rgba(253, 224, 71, 0.32) !important;
  color: #fde047 !important;
}

/* ─────────────────────────────────────────────
   ★ CARDS — Cohérence universelle
   Tous types de cards adoptent le même feeling premium
   ───────────────────────────────────────────── */
.card,
.rv-card,
.service-card,
.rv-tool-card,
.rv-outil-card,
.rh-card,
.rv-bento,
.rv-pillar-card,
.rv-typo-card,
.stat-item,
.rv-explore-card {
  background: linear-gradient(180deg, #fffdf8 0%, #FDFBF3 100%);
  border: 1px solid rgba(212, 168, 67, 0.14);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(13, 42, 26, 0.05);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s,
              border-color .35s;
  overflow: hidden;
  position: relative;
}
.card:hover,
.rv-card:hover,
.service-card:hover,
.rv-tool-card:hover,
.rv-outil-card:hover,
.rh-card:hover,
.rv-bento:hover,
.rv-pillar-card:hover,
.rv-explore-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 168, 67, 0.4);
  box-shadow: 0 14px 36px rgba(13, 42, 26, 0.08), 0 4px 10px rgba(212, 168, 67, 0.10);
}

/* Card titles : Fraunces */
.card h3,
.rv-card h3,
.service-card h3,
.rv-tool-card h3,
.rv-outil-card h3,
.rh-card h3,
.rv-bento h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #18291E;
  margin-bottom: 0.5em;
}

/* Card body text : lisibilité optimisée */
.card p,
.rv-card p,
.service-card p,
.rv-tool-card p,
.rv-outil-card p,
.rh-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4B5B53;
}

/* ─────────────────────────────────────────────
   ★ HERO — Présence renforcée
   ───────────────────────────────────────────── */
.hero {
  padding-top: clamp(7rem, 12vw, 10rem) !important;
  padding-bottom: clamp(5rem, 10vw, 8rem) !important;
}
.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1, "ss02" 1;
}
.hero-desc {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem) !important;
  line-height: 1.65 !important;
  max-width: 580px !important;
}
.hero-badge,
.rv-pilot-badge {
  letter-spacing: 0.18em !important;
}

/* Hero stats : magnifier les nombres */
.hero-stats .stat-num,
.hero-stats [class*="-num"] {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #fde047 0%, #c9a24e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-stats .stat-label {
  font-size: 0.88rem;
  color: rgba(255, 253, 240, 0.78);
  line-height: 1.4;
  margin-top: 0.3rem;
}

/* ─────────────────────────────────────────────
   ★ BANDEAU STATS (#rv-en-chiffres) — Plus chaleureux
   ───────────────────────────────────────────── */
.rv-stats-band {
  background: linear-gradient(135deg, #1a4e30 0%, #0F3320 50%, #143A23 100%) !important;
  position: relative;
}
.rv-stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(253, 224, 71, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(201, 162, 78, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   ★ SECTIONS CLAIRES (bg-light, bg-off) — Plus chaudes
   ───────────────────────────────────────────── */
section.bg-light,
section.bg-off {
  background: linear-gradient(180deg, #FAF6EC 0%, #F4EFE0 100%) !important;
  position: relative;
}

/* Séparateur subtil entre sections claires consécutives */
section.bg-light + section.bg-off,
section.bg-off + section.bg-light {
  border-top: 1px solid rgba(212, 168, 67, 0.10);
}

/* ─────────────────────────────────────────────
   ★ CTA BANNER — Visuel premium
   ───────────────────────────────────────────── */
.cta-banner,
.cta-banner-mesh {
  background:
    radial-gradient(ellipse at top right, rgba(253, 224, 71, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(201, 162, 78, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, #0A2615 0%, #1a4e30 50%, #0F3320 100%) !important;
  position: relative;
  overflow: hidden;
}
.cta-banner::before,
.cta-banner-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.88  0 0 0 0 0.4  0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta-banner h2,
.cta-banner-mesh h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  letter-spacing: -0.025em;
  color: #fffdf8 !important;
}

/* ─────────────────────────────────────────────
   ★ MARQUEE référentiels (.rv-marquee)
   Plus lisible, bord doré
   ───────────────────────────────────────────── */
.rv-marquee {
  background: linear-gradient(180deg, #FAF6EC 0%, #F4EFE0 100%);
  border-top: 1px solid rgba(212, 168, 67, 0.18);
  border-bottom: 1px solid rgba(212, 168, 67, 0.18);
  padding: 1.5rem 0;
}
.rv-marquee-item {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem !important;
  color: #2E3F36 !important;
}
.rv-marquee-item-tag {
  background: rgba(212, 168, 67, 0.18);
  color: #6B5217;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
}

/* ─────────────────────────────────────────────
   ★ FAQ section — Items chaleureux
   ───────────────────────────────────────────── */
.faq-item {
  background: linear-gradient(180deg, #fffdf8 0%, #FAF6EC 100%);
  border: 1px solid rgba(212, 168, 67, 0.18);
  border-radius: 14px;
  margin-bottom: 0.8rem;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover,
.faq-item[open] {
  border-color: rgba(212, 168, 67, 0.45);
  box-shadow: 0 6px 22px rgba(13, 42, 26, 0.06);
}
.faq-question,
.faq-item summary {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.4;
  color: #18291E;
  font-weight: 500;
  padding: 1.1rem 1.5rem;
  letter-spacing: -0.01em;
}
.faq-answer p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #2E3F36;
}

/* ─────────────────────────────────────────────
   ★ FOOTER — Plus chaud et structuré
   ───────────────────────────────────────────── */
.rv-footer-pro {
  background: linear-gradient(180deg, #0F3320 0%, #06140C 100%) !important;
  position: relative;
}
.rv-footer-pro::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.35), transparent);
}
.rv-footer-pro h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  color: #fde047;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.rv-footer-pro h4::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, #c9a24e, transparent);
}
.rv-footer-pro .rv-footer-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: #E0B964;
}

/* ─────────────────────────────────────────────
   ★ ZONE EYE-CATCHER — Bandeau urgence subtil
   Affiché entre 2 sections claires pour casser le rythme
   ───────────────────────────────────────────── */
section[id="comparatif"] + section,
section.rv-compare-section + section {
  position: relative;
}

/* ─────────────────────────────────────────────
   ★ MOBILE — Optimisations lisibilité
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  body > section .section-title,
  body > section > .container h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  body > section .section-sub {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 0 0.5rem;
  }
  .hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  .hero-desc {
    font-size: 1rem !important;
  }
  .hero-stats .stat-num,
  .hero-stats [class*="-num"] {
    font-size: 1.6rem !important;
  }
  .hero-stats .stat-label {
    font-size: 0.78rem;
  }
  .card h3,
  .rv-card h3 {
    font-size: 1.15rem;
  }
}

/* ─────────────────────────────────────────────
   Reduced motion respecté
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ★ FIX LISIBILITÉ — Zones à faible contraste identifiées
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. OUTILS GRATUITS (.rv-outils-strip) — 3 cards sur fond vert
   Le body texte est trop faible (vert pâle sur vert sombre)
   ───────────────────────────────────────────── */
.rv-outils-strip {
  background: linear-gradient(180deg, #0F3320 0%, #0A2615 100%) !important;
  position: relative;
}
.rv-outils-strip .rv-outils-title {
  color: #fffdf8 !important;
  font-family: 'Fraunces', Georgia, serif !important;
  letter-spacing: -0.02em;
}

.rv-outil-card,
.rv-outils-strip a.rv-outil-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(253, 224, 71, 0.25) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fffdf8 !important;
  transition: transform .3s, border-color .3s, background .3s !important;
}
.rv-outil-card:hover {
  background: linear-gradient(180deg, rgba(253, 224, 71, 0.06) 0%, rgba(253, 224, 71, 0.02) 100%) !important;
  border-color: rgba(253, 224, 71, 0.55) !important;
  transform: translateY(-4px);
}

.rv-outil-card .rv-outil-card-num,
.rv-outil-card [class*="-num"] {
  color: #fde047 !important;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.9;
}
.rv-outil-card h3 {
  color: #fffdf8 !important;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  margin: 0.5rem 0 0.8rem;
}
.rv-outil-card p {
  color: rgba(255, 253, 240, 0.85) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}
.rv-outil-card .rv-outil-card-cta,
.rv-outil-card [class*="-cta"] {
  color: #fde047 !important;
  font-weight: 700 !important;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────
   2. CALENDRIER 5 ÉCHÉANCES — descriptions sous dates
   ───────────────────────────────────────────── */
.rv-calendar-preview .rv-cal-desc {
  color: rgba(255, 253, 240, 0.92) !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}
.rv-calendar-preview .rv-cal-law {
  color: #fffdf8 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.rv-calendar-preview .rv-cal-date {
  color: #fde047 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.rv-calendar-head p {
  color: rgba(255, 253, 240, 0.88) !important;
}

/* ─────────────────────────────────────────────
   3. LEAD SECTION "Votre restaurant est-il RSE-ready"
   Texte sous le titre + bullets trop pâles sur cream
   ───────────────────────────────────────────── */
.lead-section,
section.lead-section {
  background: linear-gradient(180deg, #FAF6EC 0%, #F0E9D4 100%) !important;
}
.lead-section h2 {
  color: #18291E !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  letter-spacing: -0.025em;
  -webkit-text-fill-color: #18291E !important;
}
.lead-section h2 em,
.lead-section h2 i,
.lead-section .accent {
  background: linear-gradient(135deg, #c9a24e 0%, #d4a843 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
}
.lead-section p,
.lead-section .lead-desc,
.lead-section .section-sub {
  color: #2E3F36 !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  -webkit-text-fill-color: #2E3F36 !important;
}
.lead-section ul,
.lead-section .lead-benefits,
.lead-section .checklist {
  color: #2E3F36 !important;
}
.lead-section ul li,
.lead-section .lead-benefits li,
.lead-section .checklist li {
  color: #2E3F36 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.6rem;
  -webkit-text-fill-color: #2E3F36 !important;
}
.lead-section strong,
.lead-section li strong {
  color: #1a4e30 !important;
  -webkit-text-fill-color: #1a4e30 !important;
  font-weight: 700;
}
.lead-section .section-tag,
.lead-section .rv-eyebrow {
  color: #6B5217 !important;
  -webkit-text-fill-color: #6B5217 !important;
}

/* CTA gold dans la lead section */
.lead-section .btn,
.lead-section a.btn,
.lead-section button[type="submit"] {
  background: linear-gradient(135deg, #fde047 0%, #d4a843 100%) !important;
  color: #0F3320 !important;
  -webkit-text-fill-color: #0F3320 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(253, 224, 71, 0.35);
}

/* Si la mockup est dans .lead-section */
.lead-section .lead-mockup,
.lead-section .lead-card-preview {
  background: #fffdf8;
  border: 1px solid rgba(212, 168, 67, 0.25);
  box-shadow: 0 18px 48px rgba(13, 42, 26, 0.10);
}

/* ════════════════════════════════════════════════════════════════════
   ★ NUCLEAR FIX — Outils cards descriptions (spécificité max)
   ════════════════════════════════════════════════════════════════════ */
html body section.rv-outils-strip a.rv-outil-card,
html body section.rv-outils-strip .rv-outil-card {
  opacity: 1 !important;
  color: #fffdf8 !important;
}
html body section.rv-outils-strip .rv-outil-card *,
html body section.rv-outils-strip .rv-outil-card p,
html body section.rv-outils-strip .rv-outil-card span,
html body section.rv-outils-strip .rv-outil-card div {
  opacity: 1 !important;
}
html body section.rv-outils-strip .rv-outil-card p {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html body section.rv-outils-strip .rv-outil-card h3 {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html body section.rv-outils-strip .rv-outil-card .rv-outil-card-num,
html body section.rv-outils-strip .rv-outil-card [class*="-num"] {
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
  opacity: 1 !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
html body section.rv-outils-strip .rv-outil-card .rv-outil-card-cta,
html body section.rv-outils-strip .rv-outil-card [class*="-cta"] {
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
/* Abbr/sigles à l'intérieur des paragraphes */
html body section.rv-outils-strip .rv-outil-card abbr,
html body section.rv-outils-strip .rv-outil-card .rv-caps {
  color: #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  background: rgba(253, 224, 71, 0.10) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* Idem pour le calendrier — overrides nucléaires */
html body section.rv-calendar-preview .rv-cal-desc,
html body section.rv-calendar-preview .rv-cal-item p {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  opacity: 1 !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html body section.rv-calendar-preview .rv-cal-law {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
}

/* ════════════════════════════════════════════════════════════════════
   ★ FIX OUTILS CARDS — Fond opaque pour bonne lisibilité
   Le glassmorphism précédent rendait tout pâle. Ici fond solide.
   ════════════════════════════════════════════════════════════════════ */
html body section.rv-outils-strip .rv-outil-card,
html body section.rv-outils-strip a.rv-outil-card {
  background: linear-gradient(180deg, #1a4e30 0%, #0F3320 100%) !important;
  background-color: #143A23 !important;
  border: 1.5px solid rgba(253, 224, 71, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fffdf8 !important;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(253, 224, 71, 0.15) !important;
  padding: 2rem 1.75rem !important;
  border-radius: 16px !important;
  transition: transform .3s, border-color .3s, box-shadow .3s !important;
}
html body section.rv-outils-strip .rv-outil-card:hover {
  background: linear-gradient(180deg, #1E5938 0%, #143A23 100%) !important;
  background-color: #1E5938 !important;
  border-color: rgba(253, 224, 71, 0.75) !important;
  transform: translateY(-6px);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(253, 224, 71, 0.20),
    inset 0 1px 0 rgba(253, 224, 71, 0.20) !important;
}
/* Texte des cards : full contraste */
html body section.rv-outils-strip .rv-outil-card * {
  opacity: 1 !important;
}
html body section.rv-outils-strip .rv-outil-card p {
  color: #F7F2E6 !important;
  -webkit-text-fill-color: #F7F2E6 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  margin: 0.6rem 0 1.4rem !important;
  text-shadow: none !important;
}

/* === FIX FINAL : alignement hauteur des 4 cards .step (processus) === */
.steps[data-stagger] {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}
.steps[data-stagger] > .step,
.steps > .step.fade-up {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: auto !important;
  min-height: 100% !important;
}
.steps > .step.fade-up > p {
  flex-grow: 1 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .steps[data-stagger] {
    flex-direction: column !important;
  }
  .steps > .step.fade-up > p {
    flex-grow: 0 !important;
  }
}

/* === FIX : centrage horizontal universel des titres de section === */
/* Quand le parent applique text-align:center (via .text-center OU inline style),
   le H2 avec max-width fixé doit aussi se centrer en tant que block.
   On force margin auto sur tous les .section-title — safe car si pas de max-width,
   le block prend 100% et margin auto n'a aucun effet visible. */
.text-center .section-title,
[style*="text-align: center"] .section-title,
[style*="text-align:center"] .section-title,
.container.text-center .section-title,
.container[style*="text-align"] .section-title {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Filet de sécurité : tout .section-title est centré par défaut comme block */
h2.section-title {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === FIX UNIVERSEL : égaliser hauteur de toutes les cards grid sur la home === */
/* align-items:stretch (défaut) suffit ; pas de min-height absolu */
.grid-3,
.grid-2,
.grid-4,
.rv-why2-grid,
.rv-typos-grid {
  display: grid !important;
  align-items: stretch !important;
}
.grid-3 > .card,
.grid-2 > .card,
.grid-3 > .rv-typo-card,
.rv-why2-grid > .rv-why2 {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}
.grid-3 > .card > p:last-of-type,
.grid-2 > .card > p:last-of-type,
.rv-why2-grid > .rv-why2 > .rv-why2-desc {
  flex-grow: 1 !important;
}
/* Service cards : laisser le service-body croître, le CTA reste en bas */
.grid-3 > .service-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}
.grid-3 > .service-card > .service-body {
  flex-grow: 1 !important;
}

/* === FIX : strikethrough fantôme sur .service-card bullets === */
/* Cible toutes les règles conflictuelles avec spécificité maximum */
html body .service-card .service-body ul li {
  padding: 8px 0 8px 28px !important;
  position: relative !important;
  list-style: none !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: #2e3f36 !important;
  -webkit-text-fill-color: #2e3f36 !important;
  display: list-item !important; /* contre les display:flex qui poussent ::before en inline */
}

html body .service-card .service-body ul li::before {
  content: "\2713" !important;        /* ✓ checkmark cohérent */
  position: absolute !important;
  left: 4px !important;
  top: 6px !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #c9a24e !important;
  -webkit-text-fill-color: #c9a24e !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

/* =================================================================
 * ★ SECTION POURQUOI — Refonte premium éditoriale (rv-pq-*)
 * 6 cards avec accent catégoriel, dates, sources, CTA hover
 * ================================================================= */

/* Tokens couleurs par catégorie */
.rv-pq-card--csrd   { --pq-color: #8b6a1f; --pq-soft: rgba(139,106,31,.08);  --pq-line: rgba(139,106,31,.22);  --pq-bg-hover: #faf4e4; }
.rv-pq-card--egalim { --pq-color: #2d6e3f; --pq-soft: rgba(45,110,63,.08);   --pq-line: rgba(45,110,63,.22);   --pq-bg-hover: #f0f7f1; }
.rv-pq-card--agec   { --pq-color: #a65a2a; --pq-soft: rgba(166,90,42,.09);   --pq-line: rgba(166,90,42,.22);   --pq-bg-hover: #fbf1e9; }
.rv-pq-card--eau    { --pq-color: #226e78; --pq-soft: rgba(34,110,120,.08);  --pq-line: rgba(34,110,120,.22);  --pq-bg-hover: #eaf4f5; }
.rv-pq-card--climat { --pq-color: #1a4e30; --pq-soft: rgba(26,78,48,.08);    --pq-line: rgba(26,78,48,.22);    --pq-bg-hover: #eef5ef; }
.rv-pq-card--ops    { --pq-color: #b08428; --pq-soft: rgba(176,132,40,.10);  --pq-line: rgba(176,132,40,.26);  --pq-bg-hover: #fbf4dd; }

/* Grille */
.rv-pq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card — base */
.rv-pq-card {
  --pq-color: #c9a24e;
  --pq-soft: rgba(201,162,78,.08);
  --pq-line: rgba(201,162,78,.20);
  --pq-bg-hover: #fffdf8;

  display: flex !important;
  flex-direction: column !important;
  padding: 1.85rem 1.55rem 1.4rem !important;
  background: #fffdf8 !important;
  border: 1px solid var(--pq-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(13,42,26,.03), 0 8px 22px rgba(13,42,26,.04) !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .3s, background .3s !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
}
.rv-pq-card:hover {
  transform: translateY(-4px) !important;
  background: var(--pq-bg-hover) !important;
  border-color: var(--pq-color) !important;
  box-shadow: 0 1px 2px rgba(13,42,26,.04), 0 18px 38px rgba(13,42,26,.10) !important;
}

/* Bord gauche catégoriel */
.rv-pq-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--pq-color);
  opacity: .85;
  transition: width .3s, opacity .3s;
}
.rv-pq-card:hover::before { width: 5px; opacity: 1; }

/* Halo discret en haut à droite (révélé hover) */
.rv-pq-card::after {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, var(--pq-soft) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.rv-pq-card:hover::after { opacity: 1; }

/* Header : tag + date */
.rv-pq-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: .75rem !important;
  margin: 0 0 1.1rem !important;
  padding: 0 0 .9rem !important;
  border-bottom: 1px solid var(--pq-line) !important;
}
.rv-pq-tag {
  display: inline-block !important;
  padding: 5px 11px !important;
  background: var(--pq-soft) !important;
  color: var(--pq-color) !important;
  -webkit-text-fill-color: var(--pq-color) !important;
  border: 1px solid var(--pq-line) !important;
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}
.rv-pq-date {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .76rem !important;
  color: #7a8580 !important;
  -webkit-text-fill-color: #7a8580 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-align: right !important;
}

/* Icône — grande, élégante */
.rv-pq-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pq-soft) 0%, transparent 100%);
  border: 1px solid var(--pq-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--pq-color);
  font-size: 1.5rem;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.rv-pq-card:hover .rv-pq-icon {
  transform: scale(1.08) rotate(-3deg);
}
.rv-pq-icon i {
  color: var(--pq-color) !important;
  -webkit-text-fill-color: var(--pq-color) !important;
}

/* Titre */
.rv-pq-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.3rem !important;
  line-height: 1.22 !important;
  letter-spacing: -.02em !important;
  color: #14241a !important;
  -webkit-text-fill-color: #14241a !important;
  margin: 0 0 .6rem !important;
  font-weight: 600 !important;
}

/* Description */
.rv-pq-desc {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .94rem !important;
  line-height: 1.6 !important;
  color: #44544b !important;
  -webkit-text-fill-color: #44544b !important;
  margin: 0 0 1.2rem !important;
  flex-grow: 1 !important;
}

/* Footer : source + lien — override du <footer> global vert sombre */
.rv-pq-card .rv-pq-foot,
{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .9rem 0 0 !important;
  border-top: 1px solid var(--pq-line) !important;
  border-bottom: none !important;
  margin-top: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}
.rv-pq-source {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .72rem !important;
  color: #9aa29d !important;
  -webkit-text-fill-color: #9aa29d !important;
  font-style: italic !important;
  letter-spacing: .015em !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.rv-pq-link {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .85rem !important;
  color: var(--pq-color) !important;
  -webkit-text-fill-color: var(--pq-color) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: letter-spacing .25s, gap .25s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.rv-pq-link span {
  display: inline-block;
  transition: transform .25s;
}
.rv-pq-link:hover {
  letter-spacing: .005em !important;
}
.rv-pq-link:hover span {
  transform: translateX(4px);
}

/* Mobile */
@media (max-width: 600px) {
  .rv-pq-grid { gap: 1rem; }
  .rv-pq-card { padding: 1.4rem 1.2rem 1.15rem !important; }
  .rv-pq-head { flex-direction: column !important; align-items: flex-start !important; gap: .4rem !important; }
  .rv-pq-date { text-align: left !important; }
  .rv-pq-title { font-size: 1.18rem !important; }
  .rv-pq-foot { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-pq-card, .rv-pq-icon, .rv-pq-link, .rv-pq-link span, .rv-pq-card::before, .rv-pq-card::after { transition: none !important; }
}

/* Nuclear drop-cap kill (pas de lettrine dans ces cards) */
.rv-pq-card p::first-letter,
.rv-pq-card p::first-line {
  font-size: 1em !important;
  font-family: inherit !important;
  float: none !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
  display: inline !important;
  vertical-align: baseline !important;
  -webkit-text-fill-color: inherit !important;
  background: none !important;
}

/* Force les couleurs cite et a dans le footer des cards (override <footer> global) */
html body .rv-pq-card .rv-pq-foot .rv-pq-source {
  color: #9aa29d !important;
  -webkit-text-fill-color: #9aa29d !important;
  background: transparent !important;
}
html body .rv-pq-card .rv-pq-foot .rv-pq-link {
  color: var(--pq-color) !important;
  -webkit-text-fill-color: var(--pq-color) !important;
  background: transparent !important;
}


/* === FIX FINAL : bullets services strikethrough (spécificité MAX) === */
/* Cible le pseudo ::before qui dessine une ligne horizontale à mi-texte */
html body section#services-preview .service-card .service-body ul li,
html body .grid-3 .service-card .service-body ul li,
.service-card .service-body ul li,
.service-card .service-body ul li[style] {
  padding: 8px 0 8px 30px !important;
  position: relative !important;
  list-style: none !important;
  display: list-item !important;
  text-decoration: none !important;
}

/* Reset complet du ::before puis recréation propre */
html body section#services-preview .service-card .service-body ul li::before,
html body .grid-3 .service-card .service-body ul li::before,
.service-card .service-body ul li::before,
.service-card .service-body ul li:before {
  /* Reset toute trace de ligne horizontale */
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-clip: initial !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  /* Et on remet le checkmark proprement */
  content: "\2713" !important;
  position: absolute !important;
  left: 6px !important;
  top: 8px !important;
  color: #c9a24e !important;
  -webkit-text-fill-color: #c9a24e !important;
  font-family: 'Inter', 'Font Awesome 6 Free', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration: none !important;
  display: inline !important;
  transform: none !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

/* Désactive aussi tout ::after qui pourrait créer une ligne */
html body section#services-preview .service-card .service-body ul li::after,
.service-card .service-body ul li::after {
  content: none !important;
  display: none !important;
}

/* === FIX : card Accompagnement plus haute à cause du badge "RECOMMANDÉ" === */
/* Le badge doit être en position absolute pour ne pas pousser le contenu */
.service-card .service-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
/* Compense en ajoutant un margin-top sur la card recommandée */
.service-card[style*="position:relative"],
.service-card:has(.service-badge) {
  position: relative !important;
}

/* === FIX : Tables qui débordent sur mobile === */
/* Comparateur (cmp-table) + Pourquoi RestauVert (pq-compare) */
@media (max-width: 900px) {
  .cmp-table,
  .pq-compare {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(26,78,48,0.07);
    white-space: normal;
  }
  .cmp-table thead,
  .pq-compare thead,
  .cmp-table tbody,
  .pq-compare tbody {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  .cmp-table td,
  .cmp-table th,
  .pq-compare td,
  .pq-compare th {
    min-width: 160px;
    word-wrap: break-word;
  }
  /* Indicateur visuel de scroll horizontal */
  .cmp-table::after,
  .pq-compare::after {
    content: "← Faites défiler horizontalement →";
    display: block;
    text-align: center;
    font-size: 0.78rem;
    color: #8a9a91;
    padding: 8px 12px;
    background: #faf6ec;
    border-top: 1px solid rgba(212,168,67,.15);
  }
}

/* === FIX : Overlay drawer mobile qui reste collé === */
/* Si le drawer mobile n'est pas .is-open, l'overlay doit être totalement transparent */
.rv2-drawer:not(.is-open),
.rv2-backdrop:not(.is-open),
.nav-drawer-backdrop:not(.is-open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Force fond non-flou si pas de menu ouvert */
body:not(.menu-open) .rv2-backdrop,
body:not(.menu-open) .nav-drawer-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
}