/* ============================================================
 * BRUTAL LOVE CHURCH — base tokens + cross-page utilities
 * Loaded BEFORE Tailwind CDN on every page.
 * ============================================================ */

:root {
  /* Brand colors — single source of truth across all 5 pages */
  --blc-bg:           #050505;
  --blc-bg-card:      rgba(255,255,255,0.03);
  --blc-ivory:        #f8f6f2;
  --blc-ivory-dim:    rgba(248,246,242,0.7);
  --blc-ivory-mute:   rgba(248,246,242,0.45);
  --blc-primary:      #ea2a33;
  --blc-primary-soft: rgba(234,42,51,0.35);
  --blc-orange:       #ff8c00;
  --blc-blue:         #0070f3;
  --blc-green:        #00dfd8;

  /* Type scale tokens */
  --blc-font-display: 'Bebas Neue', sans-serif;
  --blc-font-serif:   'DM Serif Display', serif;
  --blc-font-sans:    'DM Sans', sans-serif;
  --blc-font-grotesk: 'Space Grotesk', sans-serif;

  /* Motion tokens */
  --blc-ease-brut:    cubic-bezier(0.16, 1, 0.3, 1);
  --blc-dur-fast:     150ms;
  --blc-dur-base:     320ms;
  --blc-dur-slow:     900ms;
}

/* ============================================================
 * Selection — solid red, not 30% opacity
 * ============================================================ */
::selection { background: var(--blc-primary); color: var(--blc-ivory); text-shadow: none; }
::-moz-selection { background: var(--blc-primary); color: var(--blc-ivory); }

/* ============================================================
 * Focus — orange ring on dark background, never default Chrome blue
 * ============================================================ */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--blc-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible, a:focus-visible { outline-offset: 4px; }
input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blc-primary), 0 0 0 4px rgba(234,42,51,0.25);
}

/* ============================================================
 * .btn-stone — tactile feedback on the donate CTA
 * "Frapper le béton" — short sink + tighter shadow on press
 * ============================================================ */
.btn-stone {
  transition:
    transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 120ms ease-out;
  will-change: transform;
}
.btn-stone:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 40px rgba(234,42,51,0.45),
    0 8px 24px rgba(0,0,0,0.5);
}
.btn-stone:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 0 20px rgba(234,42,51,0.6),
    inset 0 2px 8px rgba(0,0,0,0.35);
  transition-duration: 60ms;
}
@media (prefers-reduced-motion: reduce) {
  .btn-stone { transition: none; }
}

/* ============================================================
 * .faq-answer — animated max-height instead of display:none ↔ block
 * The old hard jump is replaced by a 280ms ease-out collapse/expand.
 * 800px ceiling fits any FAQ answer; if content ever overflows just
 * bump to 1200px. No HTML rewrap needed — works on the existing div.
 * ============================================================ */
.faq-answer {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--blc-dur-base) var(--blc-ease-brut),
              opacity 200ms ease-out 60ms,
              padding 200ms ease-out;
  padding-top: 0;
  padding-bottom: 0;
}
.faq-answer.open {
  max-height: 800px;
  opacity: 1;
  padding-top: 0;
  /* padding-bottom comes from existing utility classes in markup */
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none; }
}

/* ============================================================
 * .blc-mob — mobile menu, smooth max-height transition instead
 * of display:none ↔ block. Toggle .open in JS (replaces .hidden).
 * ============================================================ */
.blc-mob {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--blc-dur-base) var(--blc-ease-brut);
}
.blc-mob.open { max-height: 480px; }
@media (prefers-reduced-motion: reduce) {
  .blc-mob { transition: none; }
}

/* ============================================================
 * .surface-quiet — solid alternative to .glass for non-nav cards.
 * Same visual weight as glass without the backdrop-filter blur (which
 * was applied uniformly everywhere = template-y). Glass effect is now
 * reserved for the persistent nav so it signals "navigation"
 * unambiguously.
 * ============================================================ */
.surface-quiet {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.surface-quiet:hover { border-color: rgba(255,255,255,0.18); }

/* ============================================================
 * Card surface variants — replace uniform .glass everywhere with
 * accent-keyed bordered surfaces (Projets section)
 * ============================================================ */
.surface-primary {
  background: rgba(234,42,51,0.04);
  border: 1px solid rgba(234,42,51,0.35);
}
.surface-blue {
  background: rgba(0,112,243,0.04);
  border: 1px solid rgba(0,112,243,0.4);
}
.surface-teal {
  background: rgba(0,223,216,0.04);
  border: 1px solid rgba(0,223,216,0.35);
}
.surface-primary:hover { border-color: var(--blc-primary); }
.surface-blue:hover    { border-color: var(--blc-blue); }
.surface-teal:hover    { border-color: var(--blc-green); }

/* ============================================================
 * Concrete texture — centralized + intensified for visible grain.
 * Was baseFrequency 0.9 + opacity 0.04 (invisible). Now 0.55 + 0.085
 * + mix-blend-mode overlay → palpable grain on dark surfaces.
 * Inline duplicates in index.html / travaux.html are overridden by this
 * rule because blc-base.css loads BEFORE the inline <style> blocks.
 * (Inline rules win on tie; we keep them in sync below.)
 * ============================================================ */
.concrete-texture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.65'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n)' opacity='0.085'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  mix-blend-mode: overlay;
}

/* ============================================================
 * GSAP entrance prep — `.gs-fade` is just a marker class. Initial
 * opacity:0 is set by JS via gsap.set() right before the animation,
 * so if GSAP fails to load OR is blocked OR errors, the elements
 * stay fully visible (graceful degradation). Never hide content
 * via CSS that depends on JS to reveal it.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gs-fade { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================================
 * Skip-to-content link (P1 #11 audit 2026-05-03 — WCAG 2.4.1)
 * Visually hidden by default, visible on keyboard focus.
 * ============================================================ */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-to-content:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #ea2a33;
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 4px;
  z-index: 9999;
  outline: 2px solid #fff;
}

/* ============================================================
 * Sticky mobile CTA (P1 #13 audit 2026-05-03)
 * Visible only below lg breakpoint (1024px). Reserved bottom
 * padding on body to prevent content masking.
 * ============================================================ */
.sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0.75rem;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
}
.sticky-mobile-cta a {
  display: block;
  width: 100%;
  background: #ea2a33;
  color: #fff;
  text-align: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.sticky-mobile-cta a:hover,
.sticky-mobile-cta a:active {
  background: #c8222b;
}
@media (min-width: 1024px) {
  .sticky-mobile-cta { display: none; }
  body { padding-bottom: 0; }
}
@media (max-width: 1023px) {
  body { padding-bottom: 80px; }
}