/* ════════════════════════════════════════════════════════════════════
   RestauVert · design-fixes.css v1
   Correctifs design identifiés lors de l'audit mai 2026
   Charger APRÈS polish.css — Désactivable en retirant le <link>
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   FIX 1 — HERO SLIDER : overlay renforcé
   Problème : texte blanc illisible sur slides claires
   Solution : overlay plus opaque et uniforme
   ───────────────────────────────────────────── */
.rv-hero-slider-overlay {
  background:
    linear-gradient(180deg,
      rgba(10, 38, 21, 0.52) 0%,
      rgba(10, 38, 21, 0.35) 40%,
      rgba(10, 38, 21, 0.60) 100%) !important;
}

/* ─────────────────────────────────────────────
   FIX 2 — STATS BAND : fond opaque distinct
   Problème : chiffres dorés illisibles sur slider
   Solution : renforcer le fond de la section stats
   ───────────────────────────────────────────── */
.rv-stats-band {
  background: rgba(10, 38, 21, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ─────────────────────────────────────────────
   FIX 3 — CONTRASTE : doré plus clair (WCAG AA)
   Problème : ratio ~3.5:1 sous seuil WCAG
   Solution : doré éclairci pour ratio >= 4.5:1
   ───────────────────────────────────────────── */
.rv-stats-band .rv-stat-card-num,
.rv-stats-band [class*="-card-num"],
.hero .rv-stat-card-num {
  color: #D9B458 !important;
  -webkit-text-fill-color: #D9B458 !important;
}

/* ─────────────────────────────────────────────
   FIX 4 — CTA secondaire visible sur slides claires
   Problème : bouton outline blanc disparaît sur fonds clairs
   Solution : fond semi-opaque + bordure renforcée
   ───────────────────────────────────────────── */
.hero .btn-outline,
.hero .btn-secondary-hero,
.hero a[class*="outline"] {
  background: rgba(10, 38, 21, 0.35) !important;
  border: 1.5px solid rgba(255, 253, 248, 0.6) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.hero .btn-outline:hover,
.hero .btn-secondary-hero:hover {
  background: rgba(10, 38, 21, 0.55) !important;
  border-color: rgba(255, 253, 248, 0.85) !important;
}

/* ─────────────────────────────────────────────
   FIX 5 — NAVBAR toujours opaque
   Problème : liens nav se confondent avec le hero
   Solution : fond opaque constant
   ───────────────────────────────────────────── */
nav.navbar,
header.navbar,
.navbar {
  background: var(--rv-green-900, #0A2615) !important;
  backdrop-filter: none !important;
}

/* ─────────────────────────────────────────────
   FIX 6 — DROP-CAP désactivé sur mobile
   Problème : lettrine flotte mal sur petits écrans
   Solution : pas de lettrine sous 768px
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  article > p:first-of-type::first-letter,
  .rv-content > p:first-of-type::first-letter,
  .rv-value-text > p:first-of-type::first-letter,
  [class*="value-text"] > p::first-letter {
    font-size: inherit !important;
    float: none !important;
    margin: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
}

/* ─────────────────────────────────────────────
   FIX 7 — FOCUS VISIBLE sur pills profil
   Problème : pas d'outline au focus clavier
   Solution : outline doré sur :focus-visible
   ───────────────────────────────────────────── */
.rv-profile-pill:focus-visible,
.rv-profile-btn:focus-visible,
[class*="profile-pill"]:focus-visible,
[class*="profile"] button:focus-visible {
  outline: 2px solid #fde047 !important;
  outline-offset: 3px !important;
}

/* ─────────────────────────────────────────────
   FIX 8 — CARROUSEL pause/play
   Styles pour le bouton pause ajouté en HTML
   ───────────────────────────────────────────── */
.rv-hero-pause {
  position: absolute;
  bottom: 1.6rem;
  right: 1.5rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 38, 21, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(253, 224, 71, 0.35);
  border-radius: 50%;
  color: #fffdf8;
  cursor: pointer;
  z-index: 5;
  pointer-events: auto;
  padding: 0;
  font-size: 14px;
  transition: opacity 240ms ease, background 240ms ease;
}
.rv-hero-pause:hover {
  background: rgba(10, 38, 21, 0.85);
  border-color: rgba(253, 224, 71, 0.7);
}
.rv-hero-pause:focus-visible {
  outline: 2px solid #fde047;
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .rv-hero-pause {
    bottom: 1rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
  }
}

/* ─────────────────────────────────────────────
   FIX 9 — MARQUEE allégé (une seule bande)
   Problème : deux marquees superposés = effet chargé
   Solution : masquer le deuxième défilement
   ───────────────────────────────────────────── */
.rv-marquee + .rv-marquee,
.rv-marquee-row:nth-child(2),
.rv-trust-marquee + .rv-trust-marquee {
  display: none !important;
}

/* ─────────────────────────────────────────────
   FIX 10 — IMAGES : éviter CLS
   Attributs width/height ajoutés en HTML.
   Ce bloc force un aspect-ratio fallback.
   ───────────────────────────────────────────── */
img:not([width]):not([height]) {
  aspect-ratio: auto;
}

/* ─────────────────────────────────────────────
   FIX 11 — TYPOGRAPHIE : Poppins → Inter
   Les occurrences de Poppins dans les CSS existants
   sont overridées ici en Inter
   ───────────────────────────────────────────── */
body,
.nav-links a,
.btn,
.card,
.faq-question,
.rv-stat-card-label,
input, select, textarea, button {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.section-title,
.page-hero h1,
blockquote {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* ─────────────────────────────────────────────
   FIX 12 — RSE abbr : moins omniprésent
   Problème : small-caps doré sur chaque "RSE" fatigue l'œil
   Solution : dans body text, RSE garde la couleur mais
   perd le style small-caps sauf dans headings
   ───────────────────────────────────────────── */
p abbr[title],
li abbr[title],
td abbr[title],
.rv-content abbr[title] {
  font-variant: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Garder small-caps dans headings et hero uniquement */
h1 abbr[title],
h2 abbr[title],
h3 abbr[title],
.hero abbr[title],
.section-tag abbr[title],
.eyebrow abbr[title] {
  font-variant: small-caps !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}