/* ============================================
   BPC PREMIUM — Dark Mode Override
   Ajouté par-dessus le design existant.
   Palette : Noir #0A0A0A / Rouge #DC2626 / Blanc
   ============================================ */

/* --- Tokens override --- */
:root {
  --bpc-surface: #0A0A0A;
  --bpc-surface-alt: #111111;
  --bpc-surface-card: #141414;
  --bpc-surface-elevated: #1A1A1A;
  --bpc-border: rgba(255,255,255,0.08);
  --bpc-border-strong: rgba(255,255,255,0.15);
  --bpc-text: #F5F5F5;
  --bpc-text-muted: rgba(255,255,255,0.6);
  --bpc-text-subtle: rgba(255,255,255,0.4);
  --bpc-primary: #DC2626;
  --bpc-primary-strong: #EF4444;
  --bpc-primary-glow: rgba(220,38,38,0.15);
  --bpc-accent: #DC2626;
  --bpc-link: #EF4444;
  --bpc-water: #111111;
  --bpc-grey: rgba(255,255,255,0.5);
  --bpc-gradient: linear-gradient(135deg, #DC2626, #B91C1C);
  --shadow: 0 8px 30px rgba(0,0,0,0.4);
  --shadow-hover: 0 16px 50px rgba(0,0,0,0.6);
  --radius: 16px;
}

/* --- Global --- */
html, body {
  background: var(--bpc-surface) !important;
  color: var(--bpc-text) !important;
  padding-top: 72px; /* compensate fixed header */
}

::selection {
  background: rgba(220,38,38,0.3);
  color: #fff;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- Links --- */
a { color: var(--bpc-link); }
a:hover { color: #fff; }

/* --- Header Premium Dark Override --- */
header.site-header,
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: #0A0A0A !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(10px);
}
header.site-header a,
.site-header .header-nav a {
  color: #FFFFFF !important;
}

/* --- Hero --- */
.hero-modern {
  background: #050505 !important;
  min-height: clamp(420px, 75vh, 600px) !important;
  margin-top: -72px;
  padding-top: 72px;
}

.hero-modern .hero-overlay {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(220,38,38,0.25), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,0.9), rgba(10,10,10,0.7)) !important;
}

.hero-modern h1 {
  font-size: clamp(40px, 6vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1.02 !important;
}

/* Social proof badge — dark version */
.hero-modern div[style*="rgba(255,255,255,0.95)"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.hero-modern div[style*="rgba(255,255,255,0.95)"] span[style*="color: var(--bpc-grey)"] {
  color: rgba(255,255,255,0.6) !important;
  border-left-color: rgba(255,255,255,0.15) !important;
}

/* Citation block — dark version */
.hero-modern div[style*="rgba(255,255,255,0.98)"],
.hero-modern div[style*="border-left"] {
  background: rgba(255,255,255,0.05) !important;
  border-left-color: var(--bpc-primary) !important;
  box-shadow: 0 6px 25px rgba(0,0,0,0.3) !important;
}
.hero-modern blockquote,
.hero-modern blockquote * {
  color: rgba(255,255,255,0.85) !important;
}
.hero-modern blockquote strong {
  color: var(--bpc-primary) !important;
}

/* Hero buttons */
.hero-modern .btn {
  border-color: rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(10px);
}
.hero-modern .btn:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
.hero-modern .btn.btn-primary {
  background: var(--bpc-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 20px rgba(220,38,38,0.4) !important;
}
.hero-modern .btn.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(220,38,38,0.6) !important;
  transform: translateY(-2px);
}

/* --- Sections --- */
section,
.section,
section[style*="background: white"],
section[style*="background: var(--bpc-surface)"] {
  background: var(--bpc-surface) !important;
  color: var(--bpc-text) !important;
}

.section--water {
  background: var(--bpc-surface-alt) !important;
}

.section--sand {
  background: var(--bpc-surface-alt) !important;
  color: var(--bpc-text) !important;
}

/* Dark sections already dark — keep but refine */
section[style*="background: var(--bpc-surface-dark)"] {
  background: var(--bpc-surface-alt) !important;
}

/* --- Cards --- */
.card {
  background: var(--bpc-surface-card) !important;
  border: 1px solid var(--bpc-border) !important;
  box-shadow: var(--shadow) !important;
}
.card:hover {
  border-color: var(--bpc-border-strong) !important;
  box-shadow: var(--shadow-hover) !important;
}
.card .body {
  color: var(--bpc-text) !important;
}
.card .kicker {
  color: var(--bpc-primary) !important;
}

/* --- Buttons --- */
.btn {
  background: var(--bpc-surface-elevated) !important;
  color: var(--bpc-text) !important;
  border-color: var(--bpc-border) !important;
}
.btn:hover {
  background: var(--bpc-surface-card) !important;
  border-color: var(--bpc-border-strong) !important;
}
.btn-primary,
.btn.btn-primary {
  background: var(--bpc-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(220,38,38,0.3) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  box-shadow: 0 8px 25px rgba(220,38,38,0.5) !important;
}

.btn.ghost {
  background: transparent !important;
  color: var(--bpc-primary) !important;
  border-color: var(--bpc-primary) !important;
}
.btn.ghost:hover {
  background: var(--bpc-primary) !important;
  color: #fff !important;
}

/* --- Badges & Pills --- */
.badge {
  background: var(--bpc-surface-elevated) !important;
  border-color: var(--bpc-border) !important;
  color: var(--bpc-text) !important;
}

.pill {
  background: var(--bpc-gradient) !important;
}

/* --- Chips (date filters etc) --- */
.chip {
  background: var(--bpc-surface-elevated) !important;
  color: var(--bpc-text-muted) !important;
  border: 1px solid var(--bpc-border) !important;
}
.chip[aria-pressed="true"],
.chip:hover {
  background: var(--bpc-primary) !important;
  color: #fff !important;
  border-color: var(--bpc-primary) !important;
}

/* --- Tables (dates) --- */
.dates-table {
  color: var(--bpc-text) !important;
}
.dates-table th {
  background: var(--bpc-surface-alt) !important;
  color: var(--bpc-text-muted) !important;
  border-color: var(--bpc-border) !important;
}
.dates-table td {
  border-color: var(--bpc-border) !important;
}
.dates-table tr:hover td {
  background: var(--bpc-surface-elevated) !important;
}

/* --- Tick lists --- */
.tick li::before {
  color: var(--bpc-primary) !important;
}

/* --- Blockquotes / testimonials --- */
blockquote {
  color: var(--bpc-text) !important;
  border-left-color: var(--bpc-primary) !important;
}

/* --- CTA section --- */
.cta-section {
  background: var(--bpc-gradient) !important;
}
.cta-section .btn {
  background: #fff !important;
  color: var(--bpc-primary) !important;
  border-color: #fff !important;
}
.cta-section .btn:hover {
  background: transparent !important;
  color: #fff !important;
}

/* --- Footer — dark premium --- */
footer,
.footer,
.site-footer {
  background: #050505 !important;
  color: rgba(255,255,255,0.6) !important;
  border-top: 1px solid var(--bpc-border) !important;
}
footer * {
  color: rgba(255,255,255,0.8) !important;
}
footer h3 {
  color: #fff !important;
}
footer a {
  color: rgba(255,255,255,0.7) !important;
}
footer a:hover {
  color: #fff !important;
}
footer div[style*="background-image"] {
  opacity: 0.02 !important;
}

/* --- Carousel --- */
.carousel {
  background: #050505 !important;
}

/* --- Floating CTA (FAB) --- */
.fab-cta .btn {
  background: var(--bpc-gradient) !important;
  box-shadow: 0 4px 20px rgba(220,38,38,0.4) !important;
}

/* --- Forms / inputs --- */
input, textarea, select {
  background: var(--bpc-surface-elevated) !important;
  color: var(--bpc-text) !important;
  border: 1px solid var(--bpc-border) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--bpc-primary) !important;
  box-shadow: 0 0 0 3px var(--bpc-primary-glow) !important;
}

/* --- Level badges --- */
.level-badge {
  background: var(--bpc-surface-elevated) !important;
  color: var(--bpc-text-muted) !important;
}

/* --- Places indicators --- */
.places-limited {
  color: var(--bpc-primary) !important;
  font-weight: 700;
}

/* --- Palmares toggle --- */
.palmares-toggle {
  background: var(--bpc-surface-elevated) !important;
  color: var(--bpc-text) !important;
  border: 1px solid var(--bpc-border) !important;
}
.palmares-toggle:hover {
  border-color: var(--bpc-primary) !important;
}

/* --- Benefits container (coaching section) --- */
.benefits-container {
  background: transparent !important;
}

/* --- Menu toggle (hamburger) --- */
.menu-toggle {
  background: var(--bpc-surface-elevated) !important;
  color: var(--bpc-text) !important;
  border: 1px solid var(--bpc-border) !important;
}

/* --- Scroll reveal animations --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.reveal.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Legacy class support */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Wattson image in tools section --- */
.wattson-visual {
  border-radius: var(--radius);
  border: 2px solid rgba(220,38,38,0.3);
  box-shadow: 0 0 40px rgba(220,38,38,0.15);
  transition: all 0.3s ease;
}
.wattson-visual:hover {
  box-shadow: 0 0 60px rgba(220,38,38,0.25);
  transform: scale(1.02);
}

/* --- Section visual strips (triathlete images) --- */
.visual-strip {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- Premium section spacing --- */
section:not(.hero-modern) {
  padding: clamp(48px, 8vw, 100px) 0 !important;
}
.hero-modern {
  padding: 0 !important;
  margin-block: 0 !important;
  border-radius: 0 !important;
  min-height: clamp(500px, 80vh, 700px) !important;
}
.hero-modern .hero-inner {
  padding-top: clamp(80px, 10vw, 120px) !important;
}

/* --- Gradient dividers between sections --- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,0.3), transparent);
  border: none;
  margin: 0;
}

/* --- Red glow accent on key elements --- */
.hero-modern::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(220,38,38,0.15), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* --- Smooth color transitions --- */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
/* Exclude elements that need their own transitions */
.carousel-container,
.hero-modern .hero-bg img,
[style*="transition"] {
  transition: unset;
}

/* --- Dividers between sections --- */
section + section {
  border-top: 1px solid var(--bpc-border);
}

/* --- Typography refinements --- */
h1, h2, h3 {
  color: #fff !important;
}
h2 {
  letter-spacing: -0.5px;
}
p, li {
  color: rgba(255,255,255,0.8);
}
small, .note {
  color: var(--bpc-text-subtle) !important;
}
strong {
  color: #fff;
}

/* --- Dates table (Prochaines Dates) --- */
.dates-table-container {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: var(--shadow) !important;
}

.dates-table {
  color: var(--bpc-text) !important;
}

.dates-table thead {
  background: var(--bpc-gradient) !important;
}

.dates-table tbody tr {
  border-bottom: 1px solid var(--bpc-border) !important;
}

.dates-table tbody tr {
  border-bottom: 1px solid #f0f0f0 !important;
}

.dates-table tbody tr:hover {
  background: #f8f9fa !important;
}

.dates-table td {
  color: #0F172A !important;
}

.date-main {
  color: #DC2626 !important;
}

.date-year {
  color: #666 !important;
}

.stage-name {
  color: #DC2626 !important;
}

.stage-duration {
  color: #666 !important;
}

/* Level badges — light mode kept */
.level-beginner {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

.level-returning {
  background: #FEF3C7 !important;
  color: #92400E !important;
}

.level-expert {
  background: #FEE2E2 !important;
  color: #991B1B !important;
}

.places-available {
  color: #166534 !important;
}

.places-limited {
  color: #DC2626 !important;
}

.btn-calendar {
  background: #fff !important;
  border-color: #DC2626 !important;
  color: #DC2626 !important;
}

.btn-calendar:hover {
  background: #DC2626 !important;
  color: #fff !important;
}

/* Stage cards (sliding menu) */
.stage-card {
  background: var(--bpc-surface-elevated) !important;
  border-left-color: var(--bpc-primary) !important;
}

.stage-card h6 {
  color: var(--bpc-primary) !important;
}

.stage-card p {
  color: var(--bpc-text-muted) !important;
}

.sliding-menu-stages h5 {
  color: var(--bpc-text) !important;
}

.sliding-menu-contact {
  background: var(--bpc-gradient) !important;
}

/* --- Tarifs card — white floating on dark --- */
#tarifs-coaching {
  background: var(--bpc-surface) !important;
}
#tarifs-coaching div[style*="background: white"],
#tarifs-coaching div[style*="background:white"] {
  background: #fff !important;
  color: #0F172A !important;
}
#tarifs-coaching div[style*="background: white"] span,
#tarifs-coaching div[style*="background: white"] p,
#tarifs-coaching div[style*="background: white"] li,
#tarifs-coaching div[style*="background: white"] div,
#tarifs-coaching div[style*="background: white"] h3,
#tarifs-coaching div[style*="background: white"] h4,
#tarifs-coaching div[style*="background: white"] strong {
  color: #0F172A !important;
}
#tarifs-coaching div[style*="background: white"] .btn-primary,
#tarifs-coaching div[style*="background: white"] [style*="background: var(--bpc-accent)"] {
  color: #fff !important;
}
#tarifs-coaching div[style*="background: white"] span[style*="color: var(--bpc-grey)"],
#tarifs-coaching div[style*="background: white"] div[style*="color: var(--bpc-grey)"],
#tarifs-coaching div[style*="background: white"] p[style*="color: var(--bpc-grey)"] {
  color: #666 !important;
}
#tarifs-coaching div[style*="background: white"] span[style*="color: var(--bpc-accent)"],
#tarifs-coaching div[style*="background: white"] div[style*="color: var(--bpc-accent)"],
#tarifs-coaching div[style*="background: white"] h3[style*="color: var(--bpc-accent)"],
#tarifs-coaching div[style*="background: white"] h4[style*="color: var(--bpc-primary)"],
#tarifs-coaching div[style*="background: white"] div[style*="color: var(--bpc-primary)"] {
  color: #DC2626 !important;
}
/* Tarif badge stays red */
#tarifs-coaching div[style*="background: var(--bpc-accent)"] {
  background: var(--bpc-gradient) !important;
  color: #fff !important;
}
/* Réassurance cards under tarif */
#tarifs-coaching div[style*="display: grid"] > div[style*="background: white"] {
  background: #fff !important;
}
/* Note prix */
#tarifs-coaching div[style*="background: var(--bpc-water)"] {
  background: #f0f9ff !important;
}
#tarifs-coaching div[style*="background: var(--bpc-water)"] p {
  color: #0F172A !important;
}

/* --- Contact section — white card on dark --- */
#contact {
  background: var(--bpc-surface-alt) !important;
}
#contact h2 {
  color: #fff !important;
}
#contact > .container > div[style*="background: white"] {
  background: #fff !important;
}
#contact div[style*="background: white"] h3,
#contact div[style*="background: white"] div[style*="color: var(--bpc-grey)"],
#contact div[style*="background: white"] a {
  color: initial;
}
#contact div[style*="background: white"] * {
  color: #0F172A;
}
#contact div[style*="background: white"] a {
  color: #DC2626 !important;
}
#contact div[style*="background: white"] div[style*="font-size: 12px"] {
  color: #666 !important;
}
#contact div[style*="background: white"] svg {
  color: #DC2626 !important;
}
#contact div[style*="background: white"] input,
#contact div[style*="background: white"] textarea {
  background: #fff !important;
  color: #0F172A !important;
  border-color: #e2e8f0 !important;
}
#contact div[style*="background: white"] label {
  color: #DC2626 !important;
}
#contact div[style*="background: white"] .btn-primary,
#contact div[style*="background: white"] button[type="submit"] {
  color: #fff !important;
}

/* --- FAB pulse animation --- */
.fab-cta .btn {
  animation: fab-pulse 2s ease-in-out infinite !important;
}
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
  50% { box-shadow: 0 4px 30px rgba(220,38,38,0.7), 0 0 0 8px rgba(220,38,38,0.1); }
}

/* --- Sliding menu dark premium --- */
.sliding-menu {
  background: #0A0A0A !important;
  box-shadow: -5px 0 30px rgba(0,0,0,0.6) !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}

.sliding-menu-header {
  background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
}

.sliding-menu-content {
  background: #0A0A0A !important;
}

.sliding-menu-section h4 {
  color: #DC2626 !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

.sliding-menu-nav a {
  color: rgba(255,255,255,0.8) !important;
}
.sliding-menu-nav a:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}
.sliding-menu-nav a.active {
  background: var(--bpc-gradient) !important;
  color: #fff !important;
}

.sliding-menu-stages {
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.sliding-menu-stages h5 {
  color: rgba(255,255,255,0.9) !important;
}

.stage-card {
  background: #141414 !important;
  border-left: 4px solid #DC2626 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.stage-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.stage-card h6 {
  color: #EF4444 !important;
}
.stage-card p {
  color: rgba(255,255,255,0.5) !important;
}

.sliding-menu-contact {
  background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
}

.menu-overlay.active {
  background: rgba(0,0,0,0.7) !important;
}

.menu-toggle {
  background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
  box-shadow: 0 4px 20px rgba(220,38,38,0.4) !important;
}
.menu-toggle:hover {
  box-shadow: 0 8px 30px rgba(220,38,38,0.6) !important;
}

/* Auth button in menu */
.auth-button-menu {
  background: #1A1A1A !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.8) !important;
}
.auth-button-menu:hover {
  background: #222 !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth !important;
}

/* --- CTA section with finish image --- */
.cta-finish-bg {
  position: relative;
  overflow: hidden;
}
.cta-finish-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/redesign/2026-02-13-triathlete-bpc-finish.jpg') center/cover;
  opacity: 0.15;
  filter: grayscale(100%);
}

/* --- Inline styles overrides for backgrounds set in HTML --- */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
  background: var(--bpc-surface) !important;
}
[style*="color: #1e293b"],
[style*="color:#1e293b"] {
  color: rgba(255,255,255,0.85) !important;
}