/* ============================================================
   THÈME D · « ESPORT BROADCAST » — candidat thème PAR DÉFAUT
   Habillage TV compétitif : ROUGE SANG sur charbon (le bleu
   glace est rétrogradé en --info), diagonales coupées, chiffres
   énormes, uppercase. Correctifs PO 2026-08-05 :
   - badges : coin coupé réduit + padding compensé → le texte
     n'est plus jamais rogné à droite ;
   - avatars : carrés uniformes (même largeur/hauteur), espacés,
     jamais superposés (avstack en grille à gap fixe).
   Fontes : Barlow Condensed (display) · Archivo (corps).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Barlow+Condensed:wght@600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg: #0f1013; --surface: #16171c; --surface-2: #1d1e25; --surface-3: #262832;
  --line: #292a33; --line-hi: #393b48;
  --text: #f2f4f6; --text-2: #a7abb6; --text-3: #6b6f7c;
  --accent: #d61f35; --accent-2: #ef4459; --on-accent: #ffffff;
  /* Opaque (≈ rgba(214,31,53,.1) sur charbon) : requis par le liseré
     drop-shadow — un fond translucide laisserait voir la silhouette. */
  --accent-soft: #2a181e;
  --glow: none;
  --ok: #3ae08a; --warn: #ffb02a; --danger: #ff3b5c; --info: #3ec9ff;
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-lg: 0px; --r-md: 0px; --r-sm: 0px; --r-pill: 0px;
  --bw: 1px;
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --cut-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --case: uppercase; --track: .03em; --dw: 800;
  --shadow-1: none; --shadow-2: 0 14px 44px rgba(0, 0, 0, .5);
}

h1 { font-size: clamp(2.4rem, 5.6vw, 3.6rem); line-height: .95; }
.t-display { line-height: .95; }
.lead, .muted, .meta, p, .field .hint { text-transform: none; }

/* Lower-third : titres barrés d'accent, overline en plaque. */
.panel-hd h3 { border-left: 4px solid var(--accent); padding-left: 10px; }
.overline {
  background: var(--accent); color: var(--on-accent); display: inline-block;
  padding: 3px 14px; letter-spacing: .25em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.btn { letter-spacing: .08em; font-size: .95rem; }
.btn-primary:hover { color: var(--on-accent); }

/* Badges : coupés des DEUX côtés (haut-droit + bas-gauche), comme
   le reste du design, padding compensé — texte intouchable. */
.badge, .chip {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  padding-inline: 15px;
}
.count { clip-path: none; }

/* Avatars : carrés stricts, grille espacée, zéro chevauchement. */
.avatar { clip-path: none; border-radius: 0; }
.avatar-sm { border-radius: 0; }
.avstack { gap: 6px; }
.avstack .avatar { margin-left: 0; border-color: var(--accent); }
.avstack .avatar:first-child { margin-left: 0; }
.avstack .more { border-color: var(--line-hi); }
.avatar .status { border-radius: 0; }

.stat { border-top: 3px solid var(--accent); }
.stat .v { font-size: 2.8rem; }
.tbl th { border-bottom: 2px solid var(--accent); }
.item { border-left: 3px solid var(--line-hi); }
.item.is-hot { border-left-color: var(--accent); }
.dot { border-radius: 0; }
.heat-cell { border-radius: 0; }
.flare-pulse { border-radius: 0; }
.nav a.is-on { background: var(--accent); color: var(--on-accent); }
.tabs .is-on { border-bottom-width: 3px; }
.steps .step::before { border-radius: 0; }
.switch .track, .switch .track::after { border-radius: 0; }
.check .box { border-radius: 0; }
.progress, .progress > i { border-radius: 0; }
.spin { border-radius: 50%; }
.skel { border-radius: 0; }
.skel-avatar { border-radius: 0; }
.crumbs { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }

/* ── Bordure qui SUIT les coins coupés ──────────────────────────
   Le clip-path mange la bordure CSS sur les diagonales (« ça fait
   vide »). Remède : bordure réelle transparente + liseré dessiné
   par drop-shadow (le filtre épouse la forme clippée), couleur
   pilotée par --edge-c. */
:root { --edge-c: var(--line-hi); }
.panel, .stat, .modal, .drawer, .tbl-wrap, .match-card, .note,
.item, .alert, .toast, .menu, .pop, .banner, details.acc,
.btn, .badge, .chip, .heat-cell, .game-card .cover,
.input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.field select, .field textarea, .code-input input {
  border-color: transparent;
  filter: drop-shadow(1px 0 0 var(--edge-c)) drop-shadow(-1px 0 0 var(--edge-c))
          drop-shadow(0 1px 0 var(--edge-c)) drop-shadow(0 -1px 0 var(--edge-c));
}
/* Couleur du liseré selon l'état/le rôle. */
.btn:hover, .chip.is-on { border-color: transparent; }
.btn:hover { --edge-c: var(--accent-2); color: var(--accent-2); }
.btn-primary, .badge-accent { --edge-c: var(--accent); }
.btn-primary:hover { --edge-c: var(--accent-2); color: var(--on-accent); }
.btn-danger { --edge-c: var(--danger); }
.btn-danger:hover { --edge-c: var(--danger); color: #fff; }
.chip.is-on { --edge-c: var(--accent); }
.item.is-hot { --edge-c: color-mix(in oklab, var(--accent) 65%, var(--line)); }
.alert-info { --edge-c: color-mix(in oklab, var(--info) 55%, transparent); }
.alert-ok { --edge-c: color-mix(in oklab, var(--ok) 55%, transparent); }
.alert-warn { --edge-c: color-mix(in oklab, var(--warn) 55%, transparent); }
.alert-danger { --edge-c: color-mix(in oklab, var(--danger) 55%, transparent); }
.badge-ok { --edge-c: color-mix(in oklab, var(--ok) 50%, transparent); }
.badge-warn { --edge-c: color-mix(in oklab, var(--warn) 50%, transparent); }
.badge-danger { --edge-c: color-mix(in oklab, var(--danger) 50%, transparent); }
.badge-info { --edge-c: color-mix(in oklab, var(--info) 50%, transparent); }
.note, .banner { --edge-c: color-mix(in oklab, var(--accent) 45%, transparent); }
.banner-warn { --edge-c: color-mix(in oklab, var(--warn) 50%, transparent); }
.match-card { --edge-c: color-mix(in oklab, var(--accent) 65%, var(--line)); }
.heat-cell { --edge-c: var(--line); }
.heat-cell[data-l="1"], .heat-cell[data-l="2"] { --edge-c: transparent; }
.heat-cell[data-l="3"] { --edge-c: var(--accent); }
.game-card .cover { --edge-c: var(--line); }
.game-card:hover .cover { border-color: transparent; --edge-c: var(--accent); }
.field.is-invalid :is(input, select, textarea) { border-color: transparent; --edge-c: var(--danger); }
.field.is-valid :is(input, select, textarea) { border-color: transparent; --edge-c: var(--ok); }
/* La barre latérale des items reste un aplat interne (non clippé à gauche). */
.item { border-left: 3px solid var(--line-hi); }
.item.is-hot { border-left-color: var(--accent); }
/* Fond opaque obligatoire sous le filtre (sinon silhouette visible). */
.btn-ghost { background: var(--surface); }