/* Brutal Casino site theme layer.
   Loaded AFTER the compiled /css/style.css so these rules win by source order.
   Scope: enseignesdemarcq-fr only. Matches the real brutalcasino.com design tokens:
   fonts Kanit (headings) + Hind Siliguri (body), primary #805eea, radius 10px. */

/* ---- Self-hosted brand fonts (Latin subset, zero external request) ---- */
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/kanit-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hind Siliguri';
  src: url('/fonts/hind-siliguri-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hind Siliguri';
  src: url('/fonts/hind-siliguri-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Apply brand fonts site-wide (override the theme's Inter default) ---- */
/* Hind Siliguri has a smaller x-height than the theme's previous Inter
   (x-height/em aspect ~0.505 vs ~0.546), so at the same nominal size and base
   (theme html: 17px, 16.5px mobile) body text read ~8% smaller in perceived
   size. font-size-adjust pins the rendered x-height to Inter's aspect (0.545)
   across the whole cascade, restoring the previous perceived size without
   touching the base or any nominal font-size. Result: the smallest text in use
   (text-sm = 0.875rem) reads at a consistent, readable minimum everywhere. */
html,
body {
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  font-size-adjust: 0.545;
}
/* Headings use Kanit by design. Reset font-size-adjust so Kanit keeps its own
   natural metrics: heading size and weight stay exactly as before this fix. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Kanit', system-ui, sans-serif;
  font-size-adjust: none;
}

/* ---- Default body text color (#eaeaea, matches the real site) ---- */
body {
  color: #eaeaea;
}

/* ---- Card / panel radius = 10px (real --site-radius:10px).
   rounded-full pills (CTA buttons) are intentionally left untouched. ---- */
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 10px;
}

/* ---- Readable text floor (feedback_readable_text) ----
   Rule: html base 17px (16.5px mobile), body text NEVER below 14px, chrome/labels
   min 14px. The theme's Tailwind subset ships .text-xs (0.75rem = 12.75px) and
   .text-[10px] (10px), both below the floor. This site loads brutal.css AFTER the
   compiled style.css, so pinning them here (same specificity, later source) raises
   any use to a 14px-equivalent minimum: 0.85rem = 14.45px @17px / 14.03px @16.5px.
   Readability wins over exact fidelity. Applies even if a future page uses them. */
.text-xs,
.text-\[10px\] {
  font-size: 0.85rem;
}

/* ============================================================
   Homepage hero — Brutal desktop layout, ORIGINAL purple artwork.
   No people, no cropped brand banner: the "art" is a worked CSS
   gradient (layered radial glows + fine texture). Scoped to
   .brutal-hero* / .brutal-trust* so nothing else on the site moves.
   Reuses the theme .glass card style; CTA reuses .gradient-cta.
   ============================================================ */

.brutal-hero {
  position: relative;
  isolation: isolate;
  background: #200636;
}

/* Worked purple background: three radial glows over a diagonal base.
   Bottom edge fades back to the page color (#200636) so the block
   blends into the rest of the page with no visible seam. */
.brutal-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 15% 12%, rgba(128, 94, 234, 0.40) 0%, rgba(128, 94, 234, 0) 50%),
    radial-gradient(90% 100% at 88% 6%, rgba(124, 79, 232, 0.26) 0%, rgba(124, 79, 232, 0) 48%),
    radial-gradient(120% 90% at 78% 108%, rgba(76, 41, 145, 0.52) 0%, rgba(76, 41, 145, 0) 60%),
    linear-gradient(162deg, #200636 0%, #2a0d46 42%, #35186a 66%, #200636 100%);
}

/* Fine dot texture, masked to fade at the edges → subtle depth, not a grid. */
.brutal-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 38%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 38%, #000 55%, transparent 100%);
  opacity: 0.6;
}

.brutal-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .brutal-hero__inner {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* Single centered column over the gradient (bonus shown once, in the headline). */
.brutal-hero__copy {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

/* H1 brand line (kept for SEO/schema parity, rendered as a small eyebrow). */
.brutal-hero__brand {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9b6ff;
  margin: 0 0 1rem;
}

/* Big display headline (H2, styled) — the visual hero text. */
.brutal-hero__display {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 1.1rem;
}
.brutal-hero__display-line {
  display: block;
  color: #ffffff;
  font-size: clamp(1.9rem, 5.2vw, 3.2rem);
}
.brutal-hero__display-highlight {
  display: block;
  font-size: clamp(2.2rem, 6vw, 3.85rem);
  background: linear-gradient(92deg, #d9ccff 0%, #a78bff 45%, #805eea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(128, 94, 234, 0.30);
}

.brutal-hero__subtitle {
  font-family: 'Hind Siliguri', system-ui, sans-serif;
  font-size: 1.075rem;
  line-height: 1.55;
  /* Full-opacity near-white + subtle shadow so it reads clearly on the lighter
     band of the purple gradient. Hierarchy is preserved by size/weight/font
     (smaller, regular Hind Siliguri vs the big Kanit 800 display lines), not by
     dimming the color. (feedback_readable_text) */
  color: #f3efff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  max-width: 32rem;
  margin: 0 auto 1.75rem;
}

.brutal-hero__cta-wrap {
  margin-bottom: 1.2rem;
}

/* CTA pill — layered on top of .gradient-cta (#805eea → #754fe8). */
.brutal-hero-cta {
  display: inline-block;
  text-align: center;
  padding: 0.95rem 2.6rem;
  border-radius: 9999px;
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  box-shadow: 0 12px 30px -8px rgba(128, 94, 234, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.brutal-hero-cta:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* ---- Trust badges row, directly below the hero ---- */
.brutal-trust {
  position: relative;
  z-index: 1;
  padding: 1.75rem 0 0.75rem;
}
.brutal-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .brutal-trust__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.brutal-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: 10px;
  /* Darker, more opaque panel than the default .glass tint so near-white text
     pops for legibility (standing principle: readability over exact fidelity). */
  background: rgba(24, 9, 46, 0.62);
  border: 1px solid rgba(128, 94, 234, 0.28);
}
.brutal-badge__icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #805eea, #4c2991);
  box-shadow: 0 8px 20px -6px rgba(128, 94, 234, 0.7);
}
.brutal-badge__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}
.brutal-badge__title {
  font-family: 'Kanit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #ffffff;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.brutal-badge__desc {
  font-size: 0.9rem;
  color: #eaeaea;
  margin: 0;
  line-height: 1.35;
}

/* ============================================================
   WCAG AA contrast: purple TEXT on dark backgrounds
   ------------------------------------------------------------
   The brand CTA purple --color-cta (#805eea = rgb 128 94 234) is a fine
   BUTTON background but FAILS AA as a text color on this site's dark
   surfaces: it lands at ~3.4:1 to ~4.1:1 against the body (#200636), the
   .glass panels (white 7% over dark), and the bg-brand-surface/30 panels,
   all below the 4.5:1 floor for normal-size text.

   Fix: a lighter brand lavender for purple TEXT ON DARK. We reuse the token
   the hero eyebrow (.brutal-hero__brand) already uses, #c9b6ff, so the site
   keeps ONE light-purple. Measured contrast of #c9b6ff (worst case is a
   .glass panel sitting over a bg-brand-surface/30 band, effective bg
   ~rgb 51 26 74): 8.40:1. Against the plain body it is 10.19:1. Passes AA
   (and AAA) everywhere while still reading as brand purple, not white.

   Only the purple TEXT color changes. CTA button backgrounds (.gradient-cta,
   .bg-brand-cta) and borders (.border-brand-cta) are untouched.
   (feedback_readable_text / WCAG AA contrast.) */

/* All .text-brand-cta text (inscription step labels, promo eyebrow badges,
   "Voir tous les fournisseurs"/"Voir la suite" toggles, the "Se connecter"
   button label, the 404 number). Loaded after style.css so this wins. */
.text-brand-cta {
  color: #c9b6ff;
}
/* Exception: the .text-brand-cta text that sits on a WHITE button (the
   sticky-banner "Jouer" button, bg-white text-brand-cta) must stay purple, not
   lavender (lavender on white is only ~2:1). But the base brand purple #805eea
   on white is 4.46:1, a hair under AA, so use the slightly darker brand token
   --color-cta-hover (#754fe8) here: 5.20:1 on white, clears AA and still reads
   as the same brand purple, keeping the white-button look. Higher specificity
   (0,2,0) wins over the .text-brand-cta rule regardless of source order. */
.bg-white.text-brand-cta {
  color: rgb(var(--color-cta-hover));
}

/* ---- Content-prose internal links must read as links ----
   The homepage review prose inherits the body color (#eaeaea) with Tailwind's
   preflight stripping the underline, so its internal links are invisible.
   Style them like links: brand lavender + underline (same #c9b6ff token as
   above so it passes AA on dark), white on hover for a clear high-contrast
   hover state. Scope is ONLY the review prose container (#reviewContent) so
   nav, footer, sticky banner and CTA buttons (which carry their own classes)
   are untouched. Internal content pages style their prose links via
   single.html's `.cs-prose a` rule (updated to the same #c9b6ff there, since
   that inline rule renders after this file and would otherwise win). */
#reviewContent a {
  color: #c9b6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#reviewContent a:hover {
  color: #fff;
  text-decoration: underline;
}