/* Coflix.bond - PageBoss Theme Switcher. Screenshot palette. */
:root {
  --bg-primary: #0D1126;
  --bg-secondary: #10162E;
  --bg-card: #151C35;
  --bg-elevated: #1C2543;
  --bg-input: #121A32;
  --text-primary: #E3E3E3;
  --text-secondary: #C2C7D6;
  --text-muted: #A1ABC1;
  --text-heading: #F5F5F7;
  --accent: #C20202;
  --accent-hover: #A90202;
  --accent-text: #FF5555;
  --accent-light: rgba(194, 2, 2, 0.12);
  --accent-glow: rgba(255, 53, 53, 0.20);
  --success: #70D9AA;
  --warning: #F5C778;
  --danger: #FF7777;
  --info: #9CC8FF;
  --border: #2A3551;
  --border-light: #202C46;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 22px 64px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 24px var(--accent-glow);
  --radius-md: 12px;
  --radius-lg: 18px;
  --space-4xl: 4.5rem;
}
body { color: var(--text-primary); background: var(--bg-primary); }
.site-header { background: rgba(13, 17, 38, 0.97); border-bottom: 1px solid var(--border); }
.site-title-text, .site-logo { color: var(--text-heading); font-weight: 800; }
.site-logo:hover, .site-logo:hover .site-title-text { color: var(--accent-text); }
.site-nav-desktop a, .site-nav-more-toggle { color: var(--text-secondary); }
.site-nav-desktop a:hover, .site-nav-desktop .current-menu-item a,
.site-nav-mobile a:hover, .site-nav-mobile .current-menu-item a { color: #FF5555; background: var(--accent-light); }
h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.65rem); line-height: 1.08; letter-spacing: -0.045em; }
h2 { font-size: clamp(1.55rem, 2.5vw, 2.1rem); line-height: 1.2; }
h3 { font-size: 1.16rem; line-height: 1.4; }
p { color: var(--text-secondary); }
.lead { color: var(--text-primary); font-size: 1.1rem; }
a, .text-accent, .link-underline { color: var(--accent-text); }
a:hover, .link-underline:hover { color: #FF8A8A; }
.link-underline { text-decoration: underline; text-underline-offset: 0.18em; }
.link-underline::after { display: none; }
.text-gradient { background: none; -webkit-text-fill-color: var(--text-heading); color: var(--text-heading); }
.hero, .hero-lg {
  background: radial-gradient(ellipse at 85% 15%, rgba(194,2,2,0.12), transparent 56%), var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
}
.hero { padding-block: 4rem; }
.hero-lg { padding-block: 5rem; }
.hero-lg .grid { align-items: center; }
.hero-lg .card { padding: 2rem; background: linear-gradient(145deg, #1A223D, #11182E); border-color: #34405B; }
.hero-lg .card h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.hero-lg .text-accent, .hero .text-accent { font-size: 0.77rem; letter-spacing: 0.15em; font-weight: 700; }
.hero-lg .card .text-accent { color: #FF7777; }
.hero-lg .btn-group { margin-block-start: 1.5rem; }
.hero p { max-inline-size: 48rem; }
.section .container > p, .section .container > ul, .section .container > ol { max-inline-size: 76ch; }
.section .container > h2 { max-inline-size: 36ch; }
.section .container > h3 { margin-block-start: 1.65rem; }
.section .container > .grid { margin-block-start: 2rem; }
.card { border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: none; }
.card:hover { transform: none; border-color: #46506A; box-shadow: none; }
.card .card-title { font-size: 1.15rem; }
.card p:last-child { margin-block-end: 0; }
.bg-secondary .card { background: var(--bg-primary); }
.btn { min-block-size: 48px; border-radius: 9px; font-weight: 650; text-align: center; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; box-shadow: none; }
.btn-outline { color: #E3E3E3; border-color: #64708D; background: transparent; }
.btn-outline:hover { color: #FFFFFF; background: #242E48; border-color: #8D99B4; }
.btn-ghost { color: var(--text-primary); }
.btn-secondary { color: var(--text-primary); background: var(--bg-elevated); }
.btn-group { justify-content: flex-start; gap: 0.75rem; }
.text-center .btn-group { justify-content: center; }
.badge { color: #FF9999; background: var(--accent-light); border: 1px solid #74303C; }
.divider { margin-block: 1.5rem; }
table { border: 1px solid var(--border); border-radius: var(--radius-md); }
th { background: var(--bg-elevated); color: var(--text-primary); text-align: start; }
td { color: var(--text-secondary); }
.fade-in, .fade-in.visible { opacity: 1; transform: none; }
.site-footer { background: #0B0F22; border-top: 1px solid var(--border); margin-block-start: 0; }
.footer-links a, .footer-text { color: var(--text-muted); }
.footer-links a:hover { color: var(--accent-text); }
a:focus-visible, button:focus-visible { outline: 3px solid #F5C778; outline-offset: 5px; }
#acces-coflix { scroll-margin-block-start: 90px; border-block-end: 1px solid var(--border); }
@media (max-width: 768px) {
  .hero, .hero-lg { padding-block: 2.75rem; }
  h1 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.12; }
  h2 { font-size: 1.5rem; }
  .hero-lg .card { padding: 1.5rem; margin-block-start: 0.5rem; }
  .section { padding-block: 2.75rem; }
  .btn-group { inline-size: 100%; }
  .btn { max-inline-size: 100%; }
  .card { padding: 1.5rem; }
  table th, table td { padding: 0.8rem; min-inline-size: 8.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}