/* ════════════════════════════════════════════════════════════════════
   RestauVert · refine.css
   Système design unifié : tokens canoniques, typographie modulaire,
   contrastes WCAG AAA, container cohérent, mobile-safe widths.
   Chargé en dernier — désactivable en retirant le <link>.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TIER 2 — Design tokens canoniques (palette stricte)
   ───────────────────────────────────────────── */
:root {
  /* ─── PALETTE (12 couleurs max) ─── */

  /* Verts (primaire) */
  --rv-green-900: #0A2615;   /* nuit profonde */
  --rv-green-700: #0F3320;   /* footer/hero sombre */
  --rv-green-600: #1a4e30;   /* primaire (boutons, h1) */
  --rv-green-500: #2D7A3A;   /* hover/accent */
  --rv-green-100: #EBF5EE;   /* surface clair */

  /* Or / Jaune (accent) */
  --rv-gold-700: #6B5217;    /* texte or sombre (sur cream) */
  --rv-gold-500: #c9a24e;    /* accent principal */
  --rv-gold-400: #d4a843;    /* CTA gold */
  --rv-gold-300: #fde047;    /* highlight chaud */

  /* Neutres */
  --rv-cream-100: #fffdf8;   /* background body */
  --rv-cream-200: #F7F2E6;   /* bg-off */
  --rv-text-900: #18291E;    /* texte primaire */
  --rv-text-700: #2E3F36;    /* texte body */
  --rv-text-500: #4B5B53;    /* texte secondaire (AAA passé) */

  /* Container & spacing canoniques */
  --container-max: 1200px;
  --container-pad-mobile: 1.25rem;
  --container-pad-desktop: 1.5rem;

  /* Échelle typographique modulaire (Major Third 1.25) */
  --fs-xs: 0.875rem;   /* 14 px — minimum a11y */
  --fs-sm: 1rem;        /* 16 px — body */
  --fs-md: 1.125rem;    /* 18 px — paragraphes longs */
  --fs-lg: 1.25rem;     /* 20 px — h4 */
  --fs-xl: 1.5rem;      /* 24 px — h3 */
  --fs-2xl: 2rem;       /* 32 px — h2 */
  --fs-3xl: 2.5rem;     /* 40 px — h1 hero mobile */
  --fs-4xl: 3.25rem;    /* 52 px — h1 hero desktop */
}

/* ─────────────────────────────────────────────
   TIER 1 — Garde-fou min font-size 14 px
   :where() = spécificité 0, override gracieux sans casser
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  :where(body, p, li, td, span, a, label, .rv-content) {
    font-size: max(0.875rem, 1em);
  }
  /* Caption / metadata reste petit mais min 12.6 px (lisible 16:9 mobile) */
  :where(small, .caption, .rv-meta, time, figcaption) {
    font-size: max(0.79rem, 0.79em);
  }
}

/* ─────────────────────────────────────────────
   TIER 3 — Hiérarchie typo stricte
   ───────────────────────────────────────────── */
:where(h1) {
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-4xl));
  line-height: 1.1;
  letter-spacing: -0.025em;
}
:where(h2) {
  font-size: clamp(1.625rem, 3.5vw, var(--fs-2xl));
  line-height: 1.2;
  letter-spacing: -0.02em;
}
:where(h3) {
  font-size: clamp(1.25rem, 2.5vw, var(--fs-xl));
  line-height: 1.3;
}
:where(h4) {
  font-size: var(--fs-lg);
  line-height: 1.35;
}

/* Force h3 inline >=20px (override les inline 1.1rem trop petits) */
h3[style*="1.1rem"] {
  font-size: 1.25rem !important;
}

/* ─────────────────────────────────────────────
   TIER 2 — Container unifié 1200px (sans casser .container existant)
   ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .container,
  .nav-inner,
  .hero-inner,
  .rv-stats-wrap,
  .rv-footer-grid,
  .rv-footer-pro > .rv-footer-grid {
    max-width: var(--container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-pad-desktop);
    padding-right: var(--container-pad-desktop);
  }
}

/* ─────────────────────────────────────────────
   TIER 1 — Contraste secondaire AAA (#5A6B62 → #4B5B53)
   Cible les couleurs inline qui restent à #5A6B62 (legacy)
   ───────────────────────────────────────────── */
[style*="color: #5A6B62"],
[style*="color:#5A6B62"],
[style*="color: #5a6b62"],
[style*="color:#5a6b62"] {
  color: var(--rv-text-500) !important; /* #4B5B53 = ratio 6.5 sur cream */
}

/* ─────────────────────────────────────────────
   TIER 1 — Mobile-safe widths (anti-overflow)
   Override les min-width: 801px et width: 800px en inline
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  [style*="min-width: 801px"],
  [style*="min-width:801px"],
  [style*="min-width: 800px"],
  [style*="min-width:800px"],
  [style*="width: 800px"],
  [style*="width:800px"],
  [style*="width: 801px"],
  [style*="width:801px"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  [style*="min-width: 250px"],
  [style*="min-width:250px"],
  [style*="min-width: 240px"],
  [style*="min-width:240px"] {
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────
   TIER 1 — Touch targets WCAG 2.5.5 (44 px minimum)
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  :where(a, button, [role="button"], .nav-cta, .rv-tag, .bm-pill) {
    min-height: 44px;
  }
  /* Exception : tags inline dans du texte courant */
  :where(p, li, span) > :where(a, button) {
    min-height: auto;
  }
}

/* ─────────────────────────────────────────────
   TIER 3 — Paragraphes longs : interligne généreux
   ───────────────────────────────────────────── */
:where(article, .rv-content, .lead-section, main section) > :where(p, li) {
  line-height: 1.75;
  margin-bottom: 1em;
}

/* ─────────────────────────────────────────────
   TIER 1 — Tabular numbers sur tous les chiffres business
   ───────────────────────────────────────────── */
:where(.stat-num, .stat-label, .rv-stat-num, .hgc-score-num,
       [class*="-num"], time, .price, .roi-result) {
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────
   TIER 3 — Sections : padding mobile réduit
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  section.section,
  section[class*="section"]:not(.hero) {
    padding-top: clamp(2.5rem, 6vw, 4rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }
}

/* ─────────────────────────────────────────────
   TIER 4 — Override des couleurs inline les + utilisées
   pour les pointer vers les tokens canoniques
   ───────────────────────────────────────────── */
[style*="color: #3D5449"],
[style*="color:#3D5449"] {
  color: var(--rv-text-700) !important;
}
[style*="color: #18291E"],
[style*="color:#18291E"] {
  color: var(--rv-text-900) !important;
}
[style*="color: #8B6F00"],
[style*="color:#8B6F00"] {
  color: var(--rv-gold-700) !important;
}
[style*="background: #fffdf8"],
[style*="background:#fffdf8"],
[style*="background-color: #fffdf8"] {
  background-color: var(--rv-cream-100) !important;
}

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