/* Écrans SannaStudio pour OBS — 1920 x 1080, style « affiche sportive ».
   La couleur vient de l'équipe locale (config.js). Le pointage vient de donnees/score.js (script score_uno_sync.lua). */
@font-face { font-family: "Block"; src: url("polices/bungee.woff2") format("woff2"); }
@font-face { font-family: "Barlow C"; src: url("polices/barlow-800i.woff2") format("woff2"); font-weight: 800; font-style: italic; }
@font-face { font-family: "Barlow C"; src: url("polices/barlow-900i.woff2") format("woff2"); font-weight: 900; font-style: italic; }
@font-face { font-family: "Barlow C"; src: url("polices/barlow-900.woff2") format("woff2"); font-weight: 900; font-style: normal; }

:root {
    --accent: #D90F0F;        /* couleur de l'équipe locale */
    --accent-ink: #D90F0F;    /* même couleur, foncée au besoin pour être lisible sur blanc */
    --on-accent: #FFFFFF;     /* texte posé sur la couleur */
    --ink: #1B1B1B;
    --paper: #F1F1EF;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--paper); color: var(--ink); }
.screen { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #FAFAF8 0%, #F0F0EE 60%, #E6E6E3 100%); }
.tex { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.paper-grain { position: absolute; inset: 0; background: var(--grain); opacity: .16; mix-blend-mode: multiply; }
.brushes { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none; }

/* Texture « peinture » sur les aplats de couleur */
.paint { position: relative; background: var(--accent); }
.paint::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .35; mix-blend-mode: multiply; pointer-events: none; }

/* ---------- bandeau du haut ---------- */
.banner { position: absolute; left: 0; right: 0; top: 105px; height: 76px; display: flex; justify-content: center; align-items: center; gap: 0; }
.banner__box { height: 76px; padding: 0 120px; display: flex; align-items: center; transform: skewX(-18deg); }
.banner__box span { display: block; transform: skewX(18deg); font-family: "Block", Impact, sans-serif; font-size: 54px; letter-spacing: .08em; color: var(--on-accent); white-space: nowrap; position: relative; z-index: 1; text-transform: uppercase; }
.banner__lines { width: 220px; height: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.banner__lines i { display: block; height: 7px; background: var(--accent); }
.banner__lines i:last-child { width: 82%; }
.banner__lines--l { align-items: flex-end; }
.banner__lines--l i { transform: skewX(-18deg); }
.banner__lines--r i { transform: skewX(-18deg); }

/* ---------- grand titre ---------- */
.title { position: absolute; left: 0; right: 0; top: 196px; height: 270px; display: flex; align-items: center; justify-content: center;
    font-family: "Block", Impact, sans-serif; font-weight: 400; font-size: 290px; line-height: 1; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; text-transform: uppercase; }
.title span { display: inline-block; transform-origin: center; }

/* ---------- case pour le texte OBS (heure de début / reprise) ---------- */
.slot { position: absolute; left: 570px; top: 470px; width: 780px; height: 170px;
    clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 34px), calc(100% - 34px) 100%, 34px 100%, 0 calc(100% - 34px), 0 34px); }
.side { position: absolute; left: 150px; width: 400px; top: 462px; text-align: right; font-family: "Barlow C", sans-serif; font-style: italic; line-height: .84; }
.side b { display: block; font-weight: 900; font-size: 104px; color: var(--ink); letter-spacing: -.01em; }
.side i { display: block; font-weight: 900; font-size: 104px; color: var(--accent-ink); }

/* ---------- équipes ---------- */
.teams { position: absolute; left: 0; right: 0; top: 662px; height: 116px; }
.bar { position: absolute; top: 0; height: 116px; display: flex; align-items: center; justify-content: center; }
.bar__bg { position: absolute; inset: 0; filter: url(#rough-edge); }
.bar--home { left: 120px; width: 728px; }
.bar--home .bar__bg { clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 6% 100%); }
.bar--away { left: 1072px; width: 728px; }
.bar--away .bar__bg { clip-path: polygon(34px 0, 94% 0, 100% 100%, 0 100%); }
.bar span { position: relative; z-index: 1; font-family: "Barlow C", sans-serif; font-weight: 800; font-style: italic; font-size: 104px; line-height: 1; color: var(--on-accent); white-space: nowrap; max-width: 560px; text-shadow: 0 3px 0 rgba(0,0,0,.12); }
.vs { position: absolute; left: 848px; width: 224px; top: -4px; height: 124px; display: flex; align-items: center; justify-content: center; gap: 14px;
    font-family: "Barlow C", sans-serif; font-weight: 900; font-style: italic; font-size: 118px; color: var(--accent-ink); }
.vs i { display: block; width: 9px; height: 88px; background: var(--ink); transform: skewX(-18deg); }
.chip { position: absolute; top: 18px; height: 80px; min-width: 96px; padding: 0 16px; display: grid; place-items: center; background: #151515; color: #fff;
    font-family: "Block", sans-serif; font-size: 62px; line-height: 1; z-index: 2;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.bar--home .chip { right: 54px; }
.bar--away .chip { left: 54px; }
.bar--home.has-chip span { margin-right: 130px; }
.bar--away.has-chip span { margin-left: 130px; }

/* ---------- bas ---------- */
.foot { position: absolute; left: 0; right: 0; top: 798px; height: 180px; }
.col { position: absolute; top: 0; width: 760px; text-align: center; }
.col--l { left: 165px; }
.col--r { right: 165px; }
.kick { display: flex; align-items: center; justify-content: center; gap: 22px; height: 54px; }
.kick i { flex: 1; height: 5px; background: var(--accent); max-width: 140px; }
.kick span { font-family: "Barlow C", sans-serif; font-weight: 900; font-size: 56px; color: var(--ink); white-space: nowrap; letter-spacing: .01em; text-transform: uppercase; }
.big { margin-top: 0; font-family: "Barlow C", sans-serif; font-weight: 900; font-size: 132px; line-height: 1; color: var(--accent-ink); white-space: nowrap; text-transform: uppercase; }
.big--site { text-transform: none; }
.divider { position: absolute; left: 957px; top: 0; width: 5px; height: 178px; background: #C9C9C9; }

/* ---------- écran Fin ---------- */
[data-ecran="fin"] .banner { top: 74px; }
[data-ecran="fin"] .title { top: 168px; height: 170px; font-size: 168px; }
.thanks { position: absolute; left: 0; right: 0; top: 330px; text-align: center; font-family: "Barlow C", sans-serif; font-weight: 900; font-size: 74px; color: var(--ink); text-transform: uppercase; white-space: nowrap; }
[data-ecran="fin"] .teams { top: 428px; height: 120px; }
.scores { position: absolute; left: 0; right: 0; top: 575px; height: 220px; }
.sbox { position: absolute; top: 0; width: 430px; height: 220px; display: grid; place-items: center; background: #151515; color: #fff;
    font-family: "Block", sans-serif; font-size: 170px; line-height: 1;
    clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px); }
.sbox::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: screen; }
.sbox--home { left: 360px; }
.sbox--away { left: 1132px; }
.sbox.win { color: var(--on-accent); background: var(--accent); }
.final { position: absolute; left: 820px; width: 280px; top: 60px; text-align: center; }
.final hr { border: 0; height: 5px; width: 120px; margin: 0 auto; background: var(--ink); }
.final span { display: block; margin: 22px 0; text-transform: uppercase; font-family: "Barlow C", sans-serif; font-weight: 900; font-size: 58px; color: var(--ink); white-space: nowrap; }
[data-ecran="fin"] .foot { top: 860px; }

/* ---------- événement sans adversaire : une seule barre ---------- */
.solo .vs, .solo .bar--away, .solo .sbox--away, .solo .final { display: none; }
.solo .bar--home { left: 240px; width: 1440px; }
.solo .bar--home .bar__bg { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.solo .bar span { max-width: 1260px; }
.solo .sbox--home { left: 745px; }

/* démo du site : décompte affiché dans la case (dans OBS, c'est un texte OBS par-dessus) */
.demo-time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Block", sans-serif; font-size: 118px; line-height: 1; color: var(--on-accent); letter-spacing: .02em; }