/* Refonte 2026 : le site rejoint l'univers de l'app.
   Fond blanc à halos pastel (le même dégradé que l'app), titres en Anton capitales,
   ligne forte en camel, texte en Outfit. Chargé en dernier : surcouche, sans toucher au HTML. */

:root {
  --rd-camel: #B8956A;
  --rd-camel-ink: #8A6A42;
  --rd-halos: radial-gradient(70% 38% at 0% 0%, rgba(183,166,218,0.55) 0%, rgba(183,166,218,0) 100%),
              radial-gradient(60% 34% at 100% 22%, rgba(134,191,227,0.50) 0%, rgba(134,191,227,0) 100%),
              radial-gradient(70% 40% at 0% 72%, rgba(237,178,190,0.45) 0%, rgba(237,178,190,0) 100%),
              radial-gradient(70% 40% at 100% 100%, rgba(226,177,60,0.38) 0%, rgba(226,177,60,0) 100%);
  /* Les surfaces beiges des pages pros deviennent du verre clair posé sur les halos. */
  --grey: rgba(255,255,255,0.62);
  --surface: rgba(255,255,255,0.7);
  --line: rgba(17,17,17,0.08);
}

/* ── Fond : les halos de l'app, fixes derrière tout le site ── */
body { font-family: 'Outfit', system-ui, sans-serif !important; background: #FFFFFF !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--rd-halos), #FFFFFF;
}
/* Les sections claires laissent voir le fond (les sections sombres et la vidéo restent intactes). */
#mission, #features, #magazine, #quiz, #ia, #pros, #gallery, #adoption, #univers,
#races-chiens, #races-chats, #become-sitter, #download, #nopet, #filmstrip,
.section, .section-alt, .panel, #scrollhero, #maghero {
  background: transparent !important;
}
/* Encadrés de titres (ancien « sticker » camel à ombre noire) : la carte verre de l'app. */
.sticker-block, .mh-card, .faq-title, .contact-card, .pt-intro-card {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: 0 22px 48px rgba(17,17,17,0.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.sticker-block .in, .mh-card .in, .faq-title > span, .contact-card > span, .contact-card > div, .pt-intro-card > span, .pt-intro-card > div { background: transparent !important; border: none !important; box-shadow: none !important; }
/* Cartes du magazine : verre clair. */
.mag-card, .mag-card-body { background: rgba(255,255,255,0.78) !important; }

/* ── Titres : Anton en capitales, comme dans l'app ── */
.section-h2, .hero-h1, .mh-h1, .quiz-h2, #mission h2[data-i18n] {
  font-family: 'Anton', 'Impact', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.005em !important;
  line-height: 0.96 !important;
  text-wrap: balance;
}
.section-h2 { font-size: clamp(40px, 5.4vw, 86px) !important; }
.hero-h1 { font-size: clamp(38px, 4.1vw, 64px) !important; max-width: 11.5em; }
#mission h2[data-i18n] { font-size: clamp(34px, 4.8vw, 72px) !important; }
.quiz-h2 { font-size: clamp(36px, 5vw, 64px) !important; }
.section-h2 em, .hero-h1 em, .quiz-h2 em, #mission h2 em { color: var(--rd-camel) !important; font-style: normal; }

/* Titre de la vidéo d'ouverture : même police, reste blanc sur l'image. */
.sh-h1 {
  font-family: 'Anton', 'Impact', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em !important;
  font-size: clamp(34px, 4.6vw, 76px) !important;
  line-height: 0.96 !important;
}
.mh-h1 { font-size: clamp(34px, 4.6vw, 76px) !important; }
.mh-card .mh-h1 { font-size: clamp(36px, 5vw, 80px) !important; }

/* ── Surtitres : Anton espacé, camel foncé ── */
.section-eyebrow, .hero-eyebrow, .mh-card .mh-eyebrow, .quiz-result-eyebrow, .quiz-step-label {
  font-family: 'Anton', 'Impact', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--rd-camel-ink) !important;
}

/* ── Texte courant en Outfit partout (les pages pros étaient en Inter) ── */
p, li, label, input, textarea, select, button, .section-lead, .form-label { font-family: 'Outfit', system-ui, sans-serif; }

/* Le menu mobile reste opaque au-dessus du fond. */
.mobile-menu { background: #FFFFFF !important; }

/* ── Tout le site : magazine, articles, pages pros, Pet Alert, carte, pages légales ── */
:root { --surface: rgba(255,255,255,0.66); }
h1, h2 {
  font-family: 'Anton', 'Impact', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 em, h2 em { color: var(--rd-camel); font-style: normal; }
h3 { font-family: 'Outfit', system-ui, sans-serif; }
.eyebrow, .hero-tag, .une-cat, .toc-title, .sidebar-title, .footer-col h4, .mag-cat, .article-cat, .breadcrumb {
  font-family: 'Anton', 'Impact', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
.eyebrow, .hero-tag, .une-cat, .mag-cat, .article-cat { color: var(--rd-camel-ink) !important; }
/* Le pied de page reste sombre et lisible. */
footer h1, footer h2 { color: inherit; }

/* Titres de section écrits en div (presse, contact, CTA) : même traitement que les h2. */
.section-title, .contact-title, .cta-title, .faq-title, .form-title, .benefit-title-lg {
  font-family: 'Anton', 'Impact', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}