/* =========================================================================
   /RAM — socle graphique « Street poster » (charte riseandmove.fr)
   Encre #0B0B0B · papier #F3F0EB · citron #E0F50A · rose #F5104C
   Anton (titres) · Barlow Condensed (étiquettes, boutons) · Work Sans (texte)
   Angles droits, bandeaux inclinés, trame de points.
   ========================================================================= */
@import url("/fonts/fonts.css");

:root {
  --ink: #0B0B0B; --card: #151515; --card2: #1F1F1F; --line: #2E2E2E; --line2: #3d3d3d;
  --paper: #F3F0EB; --white: #FCFCFC; --mut: #A7A29A; --mut2: #6f6b65;
  --lime: #E0F50A; --pink: #F5104C; --red: #C72C41;
  --bg: var(--ink); --primary: var(--card); --accent: var(--lime); --accent2: var(--pink);
  --ok: #7CFF6B; --warn: #FFB020;
  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --marker: "RAM Marker", "Barlow Condensed", sans-serif;
  --dots: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 7px 7px;
  --dots-dark: radial-gradient(rgba(0,0,0,.22) 1px, transparent 1.4px) 0 0 / 6px 6px;
}

/* bandeau incliné (surlignage de mot) */
.band { display: inline-block; padding: .04em .22em .0em; transform: rotate(-2deg); line-height: 1.05; }
.band.lime { background: var(--accent); color: var(--ink); }
.band.pink { background: var(--accent2); color: #fff; }
.band.ink { background: var(--ink); color: var(--white); }

/* étiquette type « /RISEANDMOVE — BRIVE » */
.tag { display: inline-block; font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; padding: 3px 9px; background: var(--accent2); color: #fff; }
.tag.lime { background: var(--accent); color: var(--ink); } .tag.ink { background: var(--ink); color: var(--white); border: 1px solid var(--line2); }
.tag.ghost { background: transparent; color: var(--mut); border: 1px solid var(--line2); }

/* bord déchiré */
.tear { height: 18px; background: var(--ink);
  clip-path: polygon(0 60%,4% 20%,9% 70%,14% 30%,19% 80%,25% 25%,31% 65%,36% 15%,42% 70%,48% 35%,53% 85%,59% 30%,64% 70%,70% 20%,76% 75%,81% 35%,87% 80%,92% 25%,97% 65%,100% 40%,100% 100%,0 100%); }

/* ---------- cartes du tirage au sort (éditeur + TV) ---------- */
.dcards { display: grid; gap: var(--dgap, 14px); grid-template-columns: repeat(var(--dcols, 4), var(--dw, 150px)); justify-content: center; perspective: 1400px; }
.dcard { width: var(--dw, 150px); height: var(--dh, 200px); position: relative; cursor: pointer; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.9,.25,1.15); }
.dcard.flipped { transform: rotateY(180deg); cursor: default; }
.dcard:not(.flipped):hover { transform: translateY(-6px) rotate(-1.5deg); }
.dcard .face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.dcard .front { background: var(--ink); border: 3px solid var(--accent); box-shadow: 6px 6px 0 var(--accent2); }
.dcard .front::before { content: ''; position: absolute; inset: 0; background: var(--dots); opacity: .9; }
.dcard .front::after { content: ''; position: absolute; width: 140%; height: 22%; background: var(--accent2); transform: rotate(-24deg); opacity: .9; top: 62%; left: -20%; }
.dcard .front img { position: absolute; top: 10px; left: 10px; width: 30%; opacity: .95; z-index: 2; }
.dcard .num { position: relative; z-index: 2; font-family: var(--display); font-size: calc(var(--dh, 200px) * .46); line-height: 1; color: var(--white); text-shadow: 4px 4px 0 var(--ink); }
.dcard .back { transform: rotateY(180deg); background: var(--accent); color: var(--ink); border: 3px solid var(--ink); padding: 10px; text-align: center; box-shadow: 6px 6px 0 var(--ink); }
.dcard .back::before { content: ''; position: absolute; inset: 0; background: var(--dots-dark); opacity: .5; }
.dcard .back * { position: relative; }
.dcard .back small { font-family: var(--label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: calc(var(--dh, 200px) * .06); }
.dcard .back b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(var(--dh, 200px) * .1); line-height: 1.05; margin: 6px 0; }
.dcard .back .dest { font-family: var(--label); font-weight: 800; text-transform: uppercase; background: var(--ink); color: var(--accent); padding: 2px 8px; font-size: calc(var(--dh, 200px) * .075); transform: rotate(-2deg); }
.dcard .back .ts { font-family: var(--label); font-weight: 800; background: var(--accent2); color: #fff; padding: 0 6px; font-size: calc(var(--dh, 200px) * .065); margin-top: 6px; }
.dcard.just { animation: cardpop 1.1s cubic-bezier(.2,.9,.25,1.15); }
@keyframes cardpop { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(90deg) scale(1.18); } 100% { transform: rotateY(180deg) scale(1); } }
.dbuffer { font-family: var(--display); font-size: 40px; color: var(--accent); min-height: 48px; text-align: center; letter-spacing: .1em; }

/* indicateurs de repos */
.rest { display: inline-flex; align-items: center; gap: 5px; font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; padding: 1px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rest::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rest.rest-rest { background: #F5104C22; color: #ff6b8e; }
.rest.rest-ready { background: #E0F50A22; color: var(--accent); }
.rest.rest-playing { background: #ffffff14; color: var(--white); }
.rest.rest-playing::before { animation: blink 1s infinite; }
.rest.rest-fresh, .rest.rest-idle { background: #ffffff0c; color: var(--mut); }
@keyframes blink { 50% { opacity: .2; } }

/* =========================================================================
   HABILLAGE (écran TV, overlay) — classes posées sur <body data-look>
   ========================================================================= */
/* --- arrière-plans --- */
body[data-look] #stage::before { transition: opacity .6s; }
.look-bg-grid #stage::before { background: linear-gradient(#ffffff0e 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, #ffffff0e 1px, transparent 1px) 0 0 / 56px 56px; }
.look-bg-stripes #stage::before { background: repeating-linear-gradient(-45deg, #ffffff08 0 3px, transparent 3px 26px); }
.look-bg-court #stage::before { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.6'%3E%3Crect x='4' y='4' width='392' height='192'/%3E%3Cpath d='M200 4v192M69 4v192M331 4v192M69 100h262'/%3E%3C/svg%3E") center / 92% auto no-repeat; }
.look-bg-gradient #stage::before { background: radial-gradient(1200px 800px at 85% 0%, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 70%),
  radial-gradient(1100px 700px at 0% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.look-bg-plain #stage::before { background: none; }

/* --- bandes décoratives --- */
.look-nodeco .deco { display: none; }

/* --- style sobre : titres droits, sans surlignage incliné --- */
.look-style-sobre .band { transform: none; background: transparent !important; color: var(--accent) !important; padding: 0; }
.look-style-sobre .band.pink { color: var(--accent2) !important; }
.look-style-sobre .t-name, .look-style-sobre .view-title, .look-style-sobre .tag, .look-style-sobre .scol-h,
.look-style-sobre .info-l h1, .look-style-sobre .dl-head .tag, .look-style-sobre .strip, .look-style-sobre .winner,
.look-style-sobre .dcard .back .dest, .look-style-sobre .tvh-l .tag { transform: none !important; }
.look-style-sobre .view-title { background: transparent; color: var(--accent); border: 3px solid var(--accent); }
.look-style-sobre .t-name { font-style: normal; }

/* --- sans ombres portées --- */
.look-noshadow #stage *, .look-noshadow .sb * { box-shadow: none !important; text-shadow: none !important; }
.look-noshadow .sb { filter: none !important; }

/* --- sans contours --- */
.look-noborder .bc, .look-noborder .smatch, .look-noborder .lpanel, .look-noborder .pcard, .look-noborder .rkb,
.look-noborder .last-res, .look-noborder .dl-side, .look-noborder .qm, .look-noborder .qq, .look-noborder .dd-res .rs,
.look-noborder .board, .look-noborder .dcard .front, .look-noborder .dcard .back { border-color: transparent !important; }
.look-noborder .bc, .look-noborder .smatch, .look-noborder .lpanel, .look-noborder .pcard, .look-noborder .rkb, .look-noborder .qm { background-color: #ffffff10; }
.look-noborder .bc.st-live, .look-noborder .smatch.st-live, .look-noborder .lpanel.st-live { background-color: color-mix(in srgb, var(--accent2) 22%, transparent); }

/* --- angles arrondis --- */
.look-corners-round .bc, .look-corners-round .smatch, .look-corners-round .lpanel, .look-corners-round .pcard, .look-corners-round .rkb,
.look-corners-round .last-res, .look-corners-round .dl-side, .look-corners-round .qm, .look-corners-round .qq, .look-corners-round .dd-res .rs,
.look-corners-round .view-title, .look-corners-round .tag, .look-corners-round .scol-h, .look-corners-round .sm-time,
.look-corners-round .board, .look-corners-round .strip, .look-corners-round .info, .look-corners-round .dcard .face, .look-corners-round .tvf { border-radius: 14px; }
.look-corners-round .band { border-radius: 8px; }
.look-corners-round .bc-row:first-child { border-radius: 11px 11px 0 0; } .look-corners-round .bc-row:last-of-type { border-radius: 0 0 11px 11px; }
.look-corners-round .rkb-h { border-radius: 11px 11px 0 0; } .look-corners-round .tvf { border-radius: 0; }
.look-corners-round .strip, .look-corners-round .flag, .look-corners-round .view-title, .look-corners-round .sp-line { clip-path: none; }

/* --- polices : petits ajustements de chasse --- */
.look-font-montserrat .t-name, .look-font-archivo .t-name { font-size: 46px; }
.look-font-marker .t-name { letter-spacing: .02em; }

/* bandeau défilant continu (App.marquee) */
.mq-u { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
@keyframes mqx { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }