/* ═══════════════════════════════════════════════════════════
   CZF — Design System v2
   Mix esport pro × street underground
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — chaud, pas froid */
  --ink:        #0E0A06;   /* fond profond, brûlé */
  --ink-2:      #14100A;
  --char:       #1C1610;   /* card base */
  --char-2:     #251D14;   /* card elevated */
  --char-3:     #2F2618;
  --border:     #3A2F1F;
  --border-2:   #4A3D26;

  /* Crème / papier — surfaces claires */
  --paper:      #F4ECD8;   /* surface crème */
  --paper-2:    #EFE4CB;
  --paper-3:    #E5D6B4;
  --paper-ink:  #1A130A;   /* texte sur crème */
  --paper-mut:  #5C4A2E;

  /* Texte sur foncé */
  --bone:       #F8F1DE;   /* primaire */
  --cream:      #E8DEC2;
  --cream-2:    #BCB098;
  --muted:      #7E7460;
  --muted-2:    #564E3E;

  /* Accents */
  --red:        #E63946;   /* signal rouge */
  --red-2:      #C42535;
  --red-deep:   #7A1820;
  --red-glow:   rgba(230,57,70,.4);
  --gold:       #D4A84B;
  --gold-2:     #E4C77A;
  --gold-deep:  #8A6B23;
  --gold-soft:  rgba(212,168,75,.15);

  /* Divisions (LoL régions) */
  --div-y:      #E8B53C;   /* Yordle (Bandle) */
  --div-i:      #2FA77A;   /* Ixtal */
  --div-t:      #8B79E8;   /* Targon */

  /* Status */
  --ok:         #4ADE80;
  --err:        #F87171;
  --warn:       #FBBF24;

  /* Type */
  --fd: 'Bebas Neue', sans-serif;
  --fc: 'Barlow Condensed', sans-serif;
  --fb: 'Barlow', sans-serif;
  --fm: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: var(--fb); background: #0A0805; color: var(--bone); }

/* ═══════════ TEXTURES & MOTIFS ═══════════ */

/* Grain — overlay subtil pour donner du grain papier/film */
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0 0.65 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .35; mix-blend-mode: overlay;
}

/* Brush stroke réutilisable — sous-titre */
.brush-stroke {
  position: relative; display: inline-block;
}
.brush-stroke::after {
  content: ''; position: absolute; left: -4%; right: -4%; bottom: -12%;
  height: 24%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M5 16 Q40 8 100 12 T200 11 Q280 13 340 9 T395 14' stroke='%23D4A84B' stroke-width='5' stroke-linecap='round' fill='none' opacity='.85'/%3E%3Cpath d='M30 22 Q120 20 250 23 T395 21' stroke='%23D4A84B' stroke-width='2.5' stroke-linecap='round' fill='none' opacity='.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  z-index: -1;
}
.brush-red::after { filter: hue-rotate(-50deg) saturate(2); }

/* Section title chip */
.eyebrow {
  font-family: var(--fc); font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before {
  content: ''; width: 18px; height: 2px; background: var(--gold); display: block;
}

/* Bebas display */
.display {
  font-family: var(--fd); letter-spacing: .04em; line-height: .88;
  color: var(--bone);
}

/* Divider brush */
.brush-divider {
  height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 12' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q100 3 200 6 T400 5 Q500 7 600 4 T800 6' stroke='%233A2F1F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  margin: 1.5rem 0;
}

/* Card mat — base sombre */
.card-dark {
  background: linear-gradient(180deg, var(--char-2), var(--char));
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
}

/* Card papier — surface crème */
.card-paper {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 4px;
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 12px 24px -8px rgba(0,0,0,.4);
}

/* Pill / chip generic */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--fc); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 2px;
}

/* Division chips */
.chip-y { background: var(--div-y); color: #1a1308; }
.chip-i { background: var(--div-i); color: #0a1812; }
.chip-t { background: var(--div-t); color: #fff; }
.chip-y-out { background: transparent; color: var(--div-y); border: 1px solid var(--div-y); }
.chip-i-out { background: transparent; color: var(--div-i); border: 1px solid var(--div-i); }
.chip-t-out { background: transparent; color: var(--div-t); border: 1px solid var(--div-t); }

/* Brush red mark — used for accent slashes behind hero numbers */
.brush-red-slash {
  position: absolute;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M40 30 Q100 50 80 100 T140 180 Q160 160 100 120 T60 50 Q70 20 40 30Z' fill='%23E63946' opacity='.85'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Stat number */
.stat-n {
  font-family: var(--fd); font-size: 2.8rem; line-height: .85;
  color: var(--bone); letter-spacing: .02em;
}
.stat-l {
  font-family: var(--fc); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cream-2);
}

/* Generic button */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fc); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1rem; border: none; border-radius: 3px;
  cursor: pointer; text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-2); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--cream);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold { background: var(--gold); color: #1a1308; }
.btn-gold:hover { background: var(--gold-2); }
.btn-paper { background: var(--paper-ink); color: var(--paper); }

/* Filter buttons */
.filter-btn {
  font-family: var(--fc); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .8rem; border-radius: 2px; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--cream-2); transition: all .12s;
}
.filter-btn:hover { color: var(--bone); border-color: var(--border-2); }
.filter-btn.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.filter-btn.on-y { background: var(--div-y); color: #1a1308; border-color: var(--div-y); }
.filter-btn.on-i { background: var(--div-i); color: #0a1812; border-color: var(--div-i); }
.filter-btn.on-t { background: var(--div-t); color: #fff; border-color: var(--div-t); }
.filter-btn.on-red { background: var(--red); color: #fff; border-color: var(--red); }

/* Search input */
.search-input {
  font-family: var(--fc); font-size: .82rem;
  background: rgba(0,0,0,.3); border: 1px solid var(--border);
  color: var(--bone); padding: .35rem .85rem;
  border-radius: 2px; outline: none; width: 180px;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--gold-deep); }

/* Section header */
.section-head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: .65rem; margin-bottom: 1.5rem;
  position: relative;
}
.section-head::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 64px;
  background: var(--gold);
}
.section-head h2 {
  font-family: var(--fd); font-size: 2rem; color: var(--bone);
  letter-spacing: .06em;
}
.section-head .sub {
  font-family: var(--fc); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* Mini-utility */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-live { background: var(--red); box-shadow: 0 0 0 0 var(--red-glow); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--red-glow); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Frame — common page wrapper for mockups */
.page-frame {
  width: 1440px; min-height: 900px;
  background: var(--ink);
  position: relative; overflow: hidden;
  color: var(--bone);
}
.page-frame.paper-mode { background: var(--paper); color: var(--paper-ink); }