/* ===================================================================
   SOS TOUTOU ROYAL CANIN — Authentic Brand Theme
   Primary Red: #E2001A (Pantone 2035 C)
   Design: WHITE dominant (90%), clean, premium, medical
   Typography: System sans-serif, clean, no decorative fonts
   Reference: royalcanin.com/fr — March 2026
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Barlow+Condensed:wght@400;600;700;800;900&display=swap');

:root {
  /* Royal Canin Brand Colors */
  --rc-red:       #E2001A;
  --rc-red-dk:    #B80015;
  --rc-red-lt:    #FFF0F1;
  --rc-white:     #FFFFFF;
  --rc-bg:        #FFFFFF;
  --rc-bg-warm:   #FAFAFA;
  --rc-black:     #1A1A1A;
  --rc-grey-dk:   #1A1A1A;
  --rc-grey-md:   #666666;
  --rc-grey-lt:   #F5F5F5;
  --rc-grey-bd:   #E5E5E5;
  --rc-text:      #1A1A1A;

  /* Typography — clean system sans-serif like royalcanin.com */
  --font:         'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cond:    'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sizes */
  --text-xs:  13px;
  --text-sm:  15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;

  /* Radius — subtle, not playful */
  --radius:    8px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows — very subtle, premium */
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.08);
  --shadow-red: 0 4px 16px rgba(226,0,26,.12);

  --ease: .2s ease-in-out;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font) !important;
  color: var(--rc-text);
  background: var(--rc-white) !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
}

/* --- NAVIGATION — WHITE background with red accents (like royalcanin.com) --- */
.rc-nav,
.nav,
.rc-header,
header.header,
nav,
.rc-topnav,
.topbar,
.header {
  background: var(--rc-white) !important;
  border-bottom: 3px solid var(--rc-red) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.rc-nav a, .nav a, .rc-header a, header.header a,
.rc-topnav-links a, .topbar a,
.header a:not(.header-logo) {
  color: var(--rc-text) !important;
  text-decoration: none;
}
.rc-nav a:hover, .nav a:hover, .rc-header a:hover, header.header a:hover,
.rc-topnav-links a:hover {
  color: var(--rc-red) !important;
}
.rc-nav-brand, .nav-brand, .header-logo, .rc-header-logo,
.rc-topnav-brand, .topbar-logo {
  color: var(--rc-text) !important;
}
.rc-nav-brand span, .header-logo span, .rc-header-logo span,
.rc-topnav-brand span {
  color: var(--rc-red) !important;
}
.header-badge, .rc-header-badge, .rc-nav-badge, .nav-badge,
.rc-topnav-badge, .topbar-badge {
  background: var(--rc-red) !important;
  color: white !important;
  font-size: 10px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

/* --- BUTTONS — Red with subtle radius, no playful shapes --- */
.rc-btn,
.module-cta,
.scard-cta.go,
.disc-accept,
.animal-cta,
.info-continue-btn,
.cam-btn,
.mod-cta,
.btn-primary,
.urgence-hero-btn,
button[style*="background:#de2b33"],
button[style*="background:var(--rc-red)"] {
  background: var(--rc-red) !important;
  color: white !important;
  border-radius: 4px !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border: none !important;
  transition: background var(--ease) !important;
  animation: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  min-height: 44px !important;
}
.rc-btn:hover,
.module-cta:hover,
.scard-cta.go:hover,
.disc-accept:hover,
.animal-cta:hover,
.info-continue-btn:hover,
.cam-btn:hover,
.mod-cta:hover,
.btn-primary:hover,
.urgence-hero-btn:hover {
  background: var(--rc-red-dk) !important;
  transform: none !important;
  box-shadow: none !important;
}

.rc-btn-outline,
.btn-secondary {
  background: white !important;
  color: var(--rc-red) !important;
  border: 1.5px solid var(--rc-red) !important;
  border-radius: 4px !important;
}
.rc-btn-outline:hover,
.btn-secondary:hover {
  background: var(--rc-red-lt) !important;
}

/* --- CARDS — white, subtle border, NO colored backgrounds --- */
.rc-card,
.module-card,
.scard,
.mod-card,
.card {
  background: white !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--rc-grey-bd) !important;
  transition: border-color var(--ease), box-shadow var(--ease) !important;
}
.rc-card:hover,
.module-card:hover,
.scard:hover,
.mod-card:hover {
  border-color: var(--rc-red) !important;
  box-shadow: var(--shadow-md) !important;
  transform: none !important;
}

/* --- BADGES --- */
.rc-badge-red, .module-badge.active, .scard-badge.live {
  background: var(--rc-red) !important;
  color: white !important;
  border-radius: 4px !important;
}

/* --- TYPOGRAPHY — Clean, professional --- */
h1, h2, h3, h4 {
  font-family: var(--font-cond) !important;
  font-weight: 800 !important;
  color: var(--rc-text) !important;
}
h1 em, h2 em, .hero-title em {
  color: var(--rc-red) !important;
}

/* --- MODULE ICON BACKGROUNDS — neutral grey only, NO pastel colors --- */
.mod-icon,
.mod-emoji,
.mod-card .mod-emoji {
  background: var(--rc-grey-lt) !important;
  border-radius: var(--radius-md) !important;
  font-size: 0 !important;
  overflow: hidden;
  color: transparent !important;
  position: relative;
}
.mod-icon::before,
.mod-emoji::before,
.mod-card .mod-emoji::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  background: var(--rc-red);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Override ALL colored module icon backgrounds */
.mod-icon.respi,
.mod-icon.digest,
.mod-icon.cardio,
.mod-icon.uro,
.mod-icon.dermato,
.mod-icon.neuro,
.mod-icon.ophtal,
.mod-icon.loco,
.mod-icon.orl,
.mod-icon.nutri,
.mod-icon.comport,
.mod-card .mod-emoji.respi,
.mod-card .mod-emoji.digest,
.mod-card .mod-emoji.dermato,
.mod-card .mod-emoji.loco,
.mod-card .mod-emoji.ophtal,
.mod-card .mod-emoji.neuro,
.mod-card .mod-emoji.uro,
.mod-card .mod-emoji.cardio,
.mod-card .mod-emoji.orl,
.mod-card .mod-emoji.stress,
.mod-card .mod-emoji.nutri,
.mod-card .mod-emoji.urgence {
  background: var(--rc-grey-lt) !important;
}

/* --- FOOTER — dark #1A1A1A, clean --- */
.rc-footer,
footer,
.footer {
  background: var(--rc-black) !important;
  color: rgba(255,255,255,.6) !important;
  text-align: center !important;
  padding: 32px 24px !important;
  font-size: var(--text-xs) !important;
  line-height: 2 !important;
}
.rc-footer strong, footer strong, .footer strong {
  color: white !important;
}

/* --- LEGAL BAND — subtle, not flashy --- */
.legal-band,
.rc-disclaimer-band,
.legal {
  background: var(--rc-grey-lt) !important;
  border-top: 2px solid var(--rc-grey-bd) !important;
  font-size: var(--text-xs) !important;
  color: var(--rc-grey-md) !important;
  padding: 14px 24px !important;
  text-align: center !important;
}
.legal-band strong,
.legal strong {
  color: var(--rc-text) !important;
}

/* --- DISCLAIMER TOP BANNER — subtle grey, not warm/baby --- */
.disclaimer-top-banner,
div[style*="background:#FFF8F0"],
div[style*="background: #FFF8F0"] {
  background: var(--rc-grey-lt) !important;
  border-bottom: 1px solid var(--rc-grey-bd) !important;
  color: var(--rc-grey-md) !important;
  font-size: 12px !important;
  padding: 8px 24px !important;
}
.disclaimer-top-banner strong {
  color: var(--rc-text) !important;
}

/* --- FORM INPUTS --- */
.info-input:focus,
.info-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--rc-red) !important;
  box-shadow: 0 0 0 2px rgba(226,0,26,.08) !important;
  outline: none !important;
}
.info-radio.selected,
.info-check.checked,
.cond-btn.active {
  border-color: var(--rc-red) !important;
  background: var(--rc-red-lt) !important;
  color: var(--rc-red) !important;
}

/* --- STEP INDICATOR --- */
.step-circle.active {
  border-color: var(--rc-red) !important;
  background: var(--rc-red) !important;
}
.step-label.active {
  color: var(--rc-red) !important;
}

/* --- SELECTED STATES --- */
.animal-card.selected,
.breed-item.selected {
  border-color: var(--rc-red) !important;
  box-shadow: 0 0 0 3px rgba(226,0,26,.1) !important;
}
.animal-card.selected::after,
.breed-item.selected::after {
  background: var(--rc-red) !important;
}

/* --- ANIMAL CARDS — WHITE premium, no pastel gradients --- */
.animal-card,
.animal-card.dog,
.animal-card.cat {
  background: var(--rc-white) !important;
  border: 1px solid var(--rc-grey-bd) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius-lg) !important;
}
.animal-card:hover,
.animal-card.dog:hover,
.animal-card.cat:hover {
  border-color: var(--rc-red) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
.animal-card .cta,
.animal-cta {
  border-radius: 4px !important;
  padding: 12px 28px !important;
}

/* --- SCORE BAR --- */
.score-bar-fill,
.rc-progress-bar {
  background: var(--rc-red) !important;
}

/* --- URGENCY BAND --- */
.urgence-inner {
  background: var(--rc-red) !important;
  border-radius: var(--radius-lg) !important;
}
.urgence-inner .tel-btn {
  border-radius: 4px !important;
}
.urgence-inner .guide-btn {
  border-radius: 4px !important;
}

/* --- KILL ALL PULSE/BOUNCE ANIMATIONS --- */
@keyframes pulse-urgence { 0%, 100% { box-shadow: none; } }
@keyframes pulse-red { 0%, 100% { box-shadow: none; } }
@keyframes pulse-urg { 0%, 100% { box-shadow: none; } }
@keyframes pulse3115 { 0%, 100% { box-shadow: none; } }
@keyframes bounceIn { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }

/* --- KILL EMOJI as decorative elements in feature icons --- */
.feature-icon {
  background: var(--rc-red) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden;
}

/* --- SOS MODULE PAGES — Override internal color schemes --- */
/* Neutralize cream/warm backgrounds from SOS modules */
body[style*="background:#f8f6f2"],
body[style*="background: #f8f6f2"] {
  background: var(--rc-white) !important;
}

/* Override module topbar to white + red border */
.topbar {
  background: var(--rc-white) !important;
  border-bottom: 3px solid var(--rc-red) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.topbar-logo {
  color: var(--rc-red) !important;
  font-family: var(--font-cond) !important;
}
.topbar-logo span {
  color: var(--rc-text) !important;
}
.topbar-badge {
  background: var(--rc-red) !important;
  color: white !important;
  border-radius: 4px !important;
}

/* Module-specific color overrides */
.topbar-cat {
  color: var(--rc-red) !important;
}

/* Override the --cream, --navy etc. variables used in SOS modules */
:root {
  --cream: #FFFFFF;
  --warm: #F5F5F5;
  --navy: #1A1A1A;
  --navy2: #1A1A1A;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
  :root {
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 26px;
    --text-3xl: 30px;
  }
  .rc-btn, .module-cta { font-size: 16px !important; }

  /* Prevent horizontal overflow on mobile */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* Nav links — smaller on mobile */
  .rc-topnav-links { gap: 8px !important; }
  .rc-topnav-links a { font-size: 11px !important; }
  .rc-topnav-badge { font-size: 9px !important; padding: 2px 6px !important; }

  /* Header nav links (inline style pages like alertes, compagnie) */
  .header > div { gap: 6px !important; flex-wrap: nowrap !important; }
  .header > div > a { font-size: 11px !important; white-space: nowrap; }
  .header > div > .header-badge { font-size: 9px !important; padding: 2px 6px !important; }
}