:root {
  /* Bleu HDS : exactement celui du bandeau d'état dans le jeu (0.35, 0.78, 1). */
  --accent: #59c7ff;
  --accent-2: #2f9bff;
  --accent-soft: rgba(89, 199, 255, .14);
  --accent-line: rgba(89, 199, 255, .34);
  --bg: #080c14;
  --bg-2: #101725;
  --bg-3: #17202f;
  --line: #22304a;
  --line-2: #33456a;
  --text: #eaf1fa;
  --muted: #8b9ab2;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --info: #59c7ff;
  --radius: 16px;
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --glow: 0 0 0 1px var(--accent-line), 0 10px 30px rgba(47, 155, 255, .18);
  /* Courbes d'animation : une souple, une avec un léger rebond (effet « bulle »). */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Inter, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); min-height: 100%; }
/* Fond vivant : deux halos bleus très doux, fixes, qui donnent de la profondeur sans peser. */
body {
  font-size: 15px; line-height: 1.5;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(89, 199, 255, .10), transparent 62%),
    radial-gradient(760px 480px at 96% 4%, rgba(47, 155, 255, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--err); min-height: 1.2em; margin: 6px 0 0; font-size: 13px; }
code, .mono { font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 13px; }
p code { word-break: break-all; }

/* ---------- Marque ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .3px; font-size: 16px; }
.brand b { color: var(--accent); font-weight: 800; }
.brand.big { font-size: 26px; margin-bottom: 4px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(89, 199, 255, .20); display: inline-block; }

/* ---------- Connexion ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 20% -10%, rgba(89, 199, 255, .20), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(47, 155, 255, .14), transparent 60%), var(--bg); }
.login-card { width: min(380px, 100%); background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }

/* ---------- Structure ---------- */
.app { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: 60px auto 1fr; min-height: 100vh; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(11, 13, 18, .85); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { padding: 8px 14px; border-radius: 10px; color: var(--muted); font-weight: 500; }
.topbar nav a:hover { color: var(--text); background: var(--bg-3); }
.topbar nav a.active { color: var(--text); background: var(--bg-3); }
.status { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pill .led { width: 8px; height: 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 8px var(--err); }
.pill.on { color: var(--text); }
.pill.on .led { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
main { padding: 28px 32px 60px; min-width: 0; }
.ticker { border-left: 1px solid var(--line); background: var(--bg-2); padding: 18px; position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow: auto; }
.ticker-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 12px; }
.ticker ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ticker li { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; animation: pop .25s ease; }
.ticker li .t { color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.ticker li.ticker-vide { background: none; border: 1px dashed var(--line); color: var(--muted); text-align: center; padding: 14px 12px; }
/* Le lien vers le journal complet, sous la liste : discret, mais toujours là. */
.ticker-journal { display: block; width: 100%; margin-top: 12px; text-align: left; font-size: 12.5px; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .ticker { display: none; }
  main { padding: 20px 16px 60px; }
  .topbar { gap: 12px; padding: 0 14px; }
}

/* ---------- Composants ---------- */
h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.3px; }
h2 { font-size: 18px; margin: 0 0 10px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: var(--bg-3); color: var(--text); padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { border-color: var(--line-2); background: #1b2536; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--err); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0; }
input, textarea, select { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: 10px; font: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(89, 199, 255, .18); }
textarea { min-height: 80px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field { margin-bottom: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.switch { position: relative; width: 42px; height: 24px; background: var(--line); border-radius: 999px; cursor: pointer; transition: .2s; flex: none; border: 0; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }
.switch.on { background: var(--ok); }
.switch.on::after { left: 21px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-3); border: 1px solid var(--line); color: var(--muted); }
.chip.live { background: rgba(89, 199, 255, .14); border-color: var(--accent-line); color: var(--accent); }
.chip.ok { color: var(--ok); } .chip.warn { color: var(--warn); } .chip.err { color: var(--err); } .chip.info { color: var(--info); }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-2 > * { min-width: 0; }
.copy { min-width: 0; }
@media (max-width: 800px) { .grid-2, .row { grid-template-columns: 1fr; } }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; align-items: center; font-size: 14px; }
.copy { display: flex; gap: 8px; align-items: center; }
.copy code { flex: 1; background: var(--bg); border: 1px solid var(--line); padding: 8px 10px; border-radius: 8px; overflow: auto; white-space: nowrap; }

/* ---------- Bibliothèque ---------- */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.game-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; display: flex; flex-direction: column; }
.game-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.game-card .cover { aspect-ratio: 460 / 215; background: var(--bg-3); position: relative; overflow: hidden; }
.game-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card .cover .fallback { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 22px; text-align: center; padding: 20px; color: #fff; }
.game-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.game-card .name { font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.game-card .meta { color: var(--muted); font-size: 13px; }
.game-card.off { opacity: .55; }
.game-card.add { border-style: dashed; align-items: center; justify-content: center; min-height: 200px; color: var(--muted); font-weight: 600; background: transparent; }
.game-card.add:hover { color: var(--text); }

/* ---------- Page jeu ---------- */
.hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 220px; border: 1px solid var(--line); margin-bottom: 24px; background: var(--bg-2); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.45) saturate(1.2); transform: scale(1.1); }
.hero .inner { position: relative; display: flex; gap: 24px; padding: 24px; align-items: flex-end; flex-wrap: wrap; }
.hero .poster { width: 260px; aspect-ratio: 460 / 215; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); background: var(--bg-3); box-shadow: var(--shadow); flex: none; }
.hero .poster .cover { height: 100%; }
.hero .poster img { position: static; filter: none; transform: none; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .info { flex: 1; min-width: 240px; }
.hero .info p { color: #c7cbd6; margin: 6px 0 0; max-width: 640px; }
.hero .info .tools { margin-top: 14px; }
.hero .tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.action { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; }
/* Une action = une ligne. Le détail (réglages, webhook, volet like) ne s'ouvre qu'au clic :
   avec quatre-vingts actions, tout déplier faisait des rubriques longues de plusieurs écrans. */
.action-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.action-ouvrir {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--text); text-align: left;
}
.action-chevron { color: var(--muted); font-size: 12px; width: 12px; flex: none; transition: color .15s var(--ease); }
.action-ouvrir:hover .action-chevron { color: var(--accent); }
.action-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-resume { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.action.ouvert { border-color: var(--line-2); }
.action.ouvert .action-tete { border-bottom: 1px solid var(--line); }
.action-corps { padding: 12px 14px 14px; }
.action-bas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.actions-barre { margin: 0 0 12px; }
.actions-recherche { width: 100%; max-width: 460px; }
.action.off { opacity: .55; }
.action .num { width: 26px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; background: var(--bg-3); color: var(--muted); font-size: 11.5px; flex: none; }
.action .title { font-weight: 700; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.action .desc { color: var(--muted); font-size: 13px; margin-top: 2px; }
.action .triggers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.action .tools { display: flex; gap: 8px; align-items: center; }
@media (max-width: 700px) { .action .num { display: none; } .action-resume { display: none; } }
.trigger-row { display: grid; grid-template-columns: 130px 1fr 90px 90px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 700px) { .trigger-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Journal ---------- */
.log { display: flex; flex-direction: column; gap: 6px; }
.log-row { display: grid; grid-template-columns: 90px 110px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.log-row .time { color: var(--muted); font-size: 13px; }
.log-row .who { color: var(--muted); font-size: 13px; }
@media (max-width: 800px) { .log-row { grid-template-columns: 1fr auto; } .log-row .who { display: none; } }
.status-chip { min-width: 90px; justify-content: center; }

/* ---------- Modale ---------- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 50; padding: 20px; backdrop-filter: blur(4px); }
.modal-card { width: min(640px, 100%); max-height: 90vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.modal-card h2 { margin-bottom: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-foot .spacer { flex: 1; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--bg-3); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); font-size: 14px; animation: pop .2s ease; }
.toast.ok { border-color: rgba(52, 211, 153, .5); } .toast.err { border-color: rgba(248, 113, 113, .5); }

/* ---------- Paramètres ---------- */
.steps { counter-reset: s; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 8px; background: var(--bg-3); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--accent); }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow: auto; font-size: 13px; margin: 8px 0 0; }

/* ---------- Paramètres d'action & URL ---------- */
.action .url { margin-top: 8px; min-width: 0; }
.action .url code { display: block; background: var(--bg); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); cursor: copy; font-size: 12px; }
.action .url code:hover { color: var(--text); border-color: var(--line-2); }
.param-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 700px) { .param-row { grid-template-columns: 1fr 1fr auto; } }
.url-preview { flex: 1; background: var(--bg); border: 1px solid var(--line); padding: 8px 10px; border-radius: 8px; word-break: break-all; font-size: 12px; color: var(--text); }
details.raw { margin-top: 4px; }
details.raw summary { cursor: pointer; color: var(--accent); font-size: 12px; }
details.raw pre { margin-top: 6px; max-height: 220px; font-size: 12px; }
.copy code.url-preview { white-space: normal; overflow: visible; }

/* ---------- Webhooks : rubriques, paramètres en ligne ---------- */
.group-head { margin: 14px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px;
  width: 100%; background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: left; font-family: inherit; }
.group-head:hover { color: var(--text); }
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.group-head .group-arrow { display: inline-block; width: 14px; color: var(--accent); font-size: 11px; }
.group-head.closed { color: var(--muted); }
.group-body { display: flex; flex-direction: column; gap: 10px; }
.actions > .group-head:first-child { margin-top: 0; }
.action .fields { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; align-items: center; }
.feditor { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px 4px 12px; margin: 0; font-size: 13px; color: var(--text); }
.feditor .flabel { color: var(--muted); font-weight: 600; white-space: nowrap; }
.feditor input, .feditor select { width: auto; padding: 5px 8px; border-radius: 7px; font-size: 14px; font-weight: 700; background: var(--bg-3); }
.feditor.number input { width: 96px; text-align: right; }
.feditor.text input { width: 150px; font-weight: 500; }
.feditor.select select { max-width: 220px; }
.feditor .funit { color: var(--muted); font-weight: 600; }
/* Volet « Like » d'une action : sa jumelle, avec ses propres valeurs et son propre webhook.
   Teinte rose, la même que la petite barre des likes de l'overlay, pour qu'on voie tout de
   suite que ce bloc ne parle pas des cadeaux. */
.like-zone { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 9px; }
.like-head { display: flex; align-items: center; gap: 9px; }
.like-head .like-title { font-weight: 700; font-size: 13px; color: #ff6b91; letter-spacing: .02em; }
.like-head em { font-style: normal; font-size: 12px; color: var(--muted); }
.like-zone.on { border-top-color: rgba(255, 107, 145, .45); }
.like-body { margin-top: 9px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 107, 145, .06); border: 1px solid rgba(255, 107, 145, .22); }
.like-body .url code { border-color: rgba(255, 107, 145, .3); }

/* Réglage verrouillé (signature HDS) : la valeur est affichée, pas modifiable. */
.feditor.verrou { cursor: default; opacity: .85; padding-right: 10px; }
.feditor.verrou .fverrou { padding: 5px 8px; border-radius: 7px; background: var(--bg-3); font-size: 14px; font-weight: 500; color: var(--muted); }
.feditor.verrou .fcadenas { font-size: 12px; line-height: 1; filter: grayscale(.3); }
.switch.small { width: 36px; height: 20px; }
.switch.small::after { width: 14px; height: 14px; }
.switch.small.on::after { left: 19px; }
.action .url { position: relative; }
.saved { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--bg); padding: 0 8px; font-size: 12px; color: var(--ok); font-weight: 700; opacity: 0; transition: opacity .3s; white-space: nowrap; pointer-events: none; }
.saved.show { opacity: 1; }
details.adv { margin-top: 14px; }
details.adv summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.kv a.btn { display: inline-flex; }

/* ---------- Bandeau d'état (jeu, plugin, agent) ---------- */
.statusband { grid-column: 1 / -1; display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
  padding: 14px 32px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.statusband:empty { display: none; }
.stat { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-3); min-width: 0; }
.stat .big-led { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); flex: none; }
.stat .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .lbl { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stat .val { font-size: 15px; font-weight: 800; white-space: nowrap; }
.stat .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 430px; }
.stat.ok { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.10); }
.stat.ok .big-led { background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 2s infinite; }
.stat.ok .val { color: var(--ok); }
.stat.warn { border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.10); }
.stat.warn .big-led { background: var(--warn); box-shadow: 0 0 12px var(--warn); }
.stat.warn .val { color: var(--warn); }
.stat.err { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.08); }
.stat.err .big-led { background: var(--err); }
.stat.err .val { color: var(--err); }
.stat.off .val { color: var(--muted); }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.statusband .spacer { flex: 1; min-width: 0; }
.modeswitch { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3); }
.modeswitch .lbl { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.segmented { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.segmented button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.segmented button.on { background: var(--accent); color: #fff; }
.segmented button:not(.on):hover { color: var(--text); background: var(--bg-3); }
.install-log { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 12px;
  font-family: Consolas, monospace; font-size: 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; }
@media (max-width: 900px) { .statusband { padding: 12px 16px; } .stat .val { white-space: normal; } }

/* ---------- Nouveautés / journal des versions ---------- */
.notes { max-height: 55vh; overflow: auto; }
.note { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; margin-bottom: 18px; }
.note-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.note-ver { font-weight: 800; font-size: 15px; }
.note-title { color: var(--accent); font-weight: 600; font-size: 14px; }
.note-date { color: var(--muted); font-size: 12px; margin-left: auto; }
.note-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.note-list li { font-size: 14px; line-height: 1.5; }

/* =======================================================================
   Légèreté, relief et animations « bulle »
   Tout ce qui suit affine l'ancien habillage : surfaces plus aérées,
   survols qui soulèvent, et une bulle bleue qui naît sous chaque clic.
   ======================================================================= */

/* ---- surfaces : un peu de flou et de lumière, moins de « boîte noire » ---- */
.topbar { background: rgba(8, 12, 20, .72); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }
.card, .action, .log-row, .ticker li, .modal-card, .login-card, .game-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease);
}
.card:hover, .action:hover { border-color: var(--line-2); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.action:hover { transform: translateY(-1px); }
.game-card:hover { transform: translateY(-4px) scale(1.006); border-color: var(--accent-line); box-shadow: var(--shadow), 0 0 0 1px var(--accent-line); }
.ticker { background: linear-gradient(180deg, rgba(89, 199, 255, .05), transparent 220px), var(--bg-2); }

/* ---- boutons : relief, survol qui soulève, appui qui s'enfonce ---- */
.btn { position: relative; overflow: hidden; transition: transform .18s var(--spring), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn.primary { box-shadow: 0 6px 18px rgba(47, 155, 255, .28); }
.btn.primary:hover { box-shadow: 0 10px 26px rgba(47, 155, 255, .38); }
.btn:focus-visible, .link:focus-visible, .group-head:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(89, 199, 255, .35); }
.link { position: relative; transition: color .2s var(--ease); }
.link:hover { color: #9adcff; }
.topbar nav a { position: relative; overflow: hidden; transition: color .2s var(--ease), background .2s var(--ease); }
.topbar nav a.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.switch { transition: background .25s var(--ease); }
.switch::after { transition: left .28s var(--spring), transform .2s var(--spring); }
.switch:active::after { transform: scale(.88); }
.switch.on { background: var(--accent); box-shadow: 0 0 12px rgba(89, 199, 255, .45); }

/* ---- la bulle du clic ---- */
.bubble {
  position: absolute; left: var(--bx); top: var(--by); width: var(--bs); height: var(--bs);
  margin: calc(var(--bs) / -2) 0 0 calc(var(--bs) / -2); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .40), rgba(89, 199, 255, .30) 55%, rgba(89, 199, 255, 0) 72%);
  animation: bubble .6s var(--ease) forwards;
}
@keyframes bubble { from { transform: scale(0); opacity: .9; } to { transform: scale(1); opacity: 0; } }

/* petites bulles qui s'envolent (uniquement sur les boutons principaux) */
.spark { position: fixed; width: var(--bs); height: var(--bs); border-radius: 50%; pointer-events: none; z-index: 70;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .9), rgba(89, 199, 255, .55) 60%, rgba(89, 199, 255, 0) 72%);
  animation: spark .75s var(--ease) forwards; }
@keyframes spark { from { transform: translate(0, 0) scale(.4); opacity: .95; } to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

/* ---- entrées en scène : tout arrive en douceur, décalé ---- */
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
#view > * { animation: fade .3s var(--ease) both; }
.games .game-card, .actions > .group-head, .actions .action, .log .log-row, .grid-2 > .card { animation: rise .42s var(--ease) both; }
.games .game-card:nth-child(1), .actions .action:nth-child(1), .log .log-row:nth-child(1) { animation-delay: .02s; }
.games .game-card:nth-child(2), .actions .action:nth-child(2), .log .log-row:nth-child(2) { animation-delay: .05s; }
.games .game-card:nth-child(3), .actions .action:nth-child(3), .log .log-row:nth-child(3) { animation-delay: .08s; }
.games .game-card:nth-child(4), .actions .action:nth-child(4), .log .log-row:nth-child(4) { animation-delay: .11s; }
.games .game-card:nth-child(5), .actions .action:nth-child(5), .log .log-row:nth-child(5) { animation-delay: .14s; }
.games .game-card:nth-child(n+6), .actions .action:nth-child(n+6), .log .log-row:nth-child(n+6) { animation-delay: .17s; }

/* ---- rubriques repliables : la flèche tourne, la liste se déplie ---- */
.group-head .group-arrow { transition: transform .3s var(--spring); }
.group-head.closed .group-arrow { transform: rotate(-90deg); }
.group-head .group-arrow { transform: rotate(0deg); }
.group-body { animation: unfold .32s var(--ease) both; }
@keyframes unfold { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- modales et notifications ---- */
.modal { animation: fade .18s var(--ease) both; }
.modal-card { animation: modal-in .34s var(--spring) both; }
@keyframes modal-in { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.toast { animation: toast-in .38s var(--spring) both; border-radius: 12px; backdrop-filter: blur(8px); }
@keyframes toast-in { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- la pastille « en direct » respire ---- */
.pill.on .led { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.dot { animation: breathe 3s ease-in-out infinite; }

/* ---- confort : moins d'animations si Windows le demande ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- contraste sur le bleu clair : texte foncé sur les surfaces pleines ---- */
.btn.primary { background: linear-gradient(135deg, #6fd0ff, #2f9bff); color: #04141f; font-weight: 700; }
.segmented button.on { background: var(--accent); color: #04141f; }
.switch.on::after { background: #04141f; }
.game-card .cover .fallback { background: linear-gradient(135deg, rgba(89, 199, 255, .20), rgba(47, 155, 255, .10)); }

/* =======================================================================
   Panneau à onglets (Bannière de jeu, Overlay TikTok)
   Une rubrique à la fois : la colonne de réglages tient dans un écran au lieu
   de dérouler huit sections les unes sous les autres.
   ======================================================================= */
.onglets-bloc { display: flex; flex-direction: column; }
.onglets {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 5px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px;
  position: sticky; top: 68px; z-index: 3;
}
.onglets .onglet {
  flex: 0 0 auto; padding: 8px 13px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: .18s var(--ease);
}
.onglets .onglet:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.onglets .onglet.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.onglets .onglet:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(89, 199, 255, .35); }
.onglets-corps { padding: 4px 2px 0; }
.onglet-page { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 6px; animation: unfold .28s var(--ease) both; }
.onglet-aide { color: var(--muted); font-size: 12.5px; margin: 0 0 4px; line-height: 1.5; }
.onglet-sous-titre {
  margin: 10px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px;
}
.onglet-sous-titre::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* =======================================================================
   Page d'un jeu : les deux grands raccourcis visuels, sous la bannière
   ======================================================================= */
/* Les raccourcis vers les réglages visuels (bannière, overlay TikTok).
   Ils étaient bâtis comme des tuiles pleine largeur et mangeaient l'écran alors
   qu'on ne s'en sert qu'une fois par jeu, pour aller régler une couleur. On les
   a resserrés : ils ne s'étirent plus sur toute la page, l'icône a fondu, et la
   phrase d'explication passe sur une ligne. */
.jeu-raccourcis { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 22px; }
.raccourci {
  display: flex; align-items: center; gap: 10px; text-align: left;
  flex: 0 1 auto; max-width: 340px;
  padding: 9px 13px; border-radius: 12px; cursor: pointer; color: var(--text);
  border: 1px solid var(--accent-line);
  background: linear-gradient(140deg, rgba(89, 199, 255, .10), var(--bg-2) 62%);
  transition: transform .2s var(--spring), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.raccourci:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--glow); }
.raccourci:active { transform: translateY(0) scale(.99); }
.raccourci:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(89, 199, 255, .35); }
.raccourci .ico {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; font-size: 15px;
  border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--accent-line);
}
/* Un logo déposé remplit la pastille sans la déborder. */
.raccourci .ico-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 7px; }
.raccourci .txt { min-width: 0; }
.raccourci .txt b { display: block; font-size: 13.5px; }
/* La phrase tient sur une ligne et se coupe proprement : c'est un raccourci,
   pas un article. Le titre suffit à savoir où l'on va. */
.raccourci .txt span {
  display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;
}
.raccourci .fleche { margin-left: 6px; color: var(--accent); font-size: 17px; line-height: 1; opacity: .7; transition: transform .2s var(--spring); }
.raccourci:hover .fleche { transform: translateX(3px); opacity: 1; }
@media (max-width: 620px) { .raccourci { max-width: none; flex: 1 1 100%; } .raccourci .txt span { display: none; } }

/* =======================================================================
   Habillage : aperçu de l'affichage du jeu + réglages
   ======================================================================= */
.skin-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: 20px; align-items: start; }
@media (max-width: 1150px) { .skin-grid { grid-template-columns: 1fr; } }
.skin-preview-wrap { position: sticky; top: 76px; }
.skin-preview { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(89, 199, 255, .10), transparent 60%),
    linear-gradient(180deg, #10161f 0%, #0a0f16 55%, #070b11 100%);
}
/* repères discrets : on devine les bords de l'écran du jeu */
.skin-preview::after { content: ""; position: absolute; inset: 3%; border: 1px dashed rgba(255,255,255,.07); border-radius: 8px; pointer-events: none; }
.skin-panel { position: absolute; display: flex; flex-direction: column; user-select: none; z-index: 2;
  transition: box-shadow .2s var(--ease); }
.skin-panel:hover, .skin-likes:hover { box-shadow: 0 0 0 2px var(--accent) !important; }
.skin-title { font-weight: 800; letter-spacing: .08em; opacity: .85; margin-bottom: 2px; white-space: nowrap; }
.skin-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; }
.skin-av { display: inline-grid; place-items: center; border-radius: 50%; font-size: .7em; font-weight: 800; flex: none; }
.skin-likes { position: absolute; display: flex; flex-direction: column; user-select: none; z-index: 2; }
.skin-like-row { white-space: nowrap; font-weight: 700; color: #fff; }
.skin-img { position: absolute; z-index: 1; user-select: none; pointer-events: none; }
.skin-settings { display: flex; flex-direction: column; gap: 2px; }
.skin-field { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; margin: 0; font-size: 13.5px; }
.skin-field > span { color: var(--muted); font-size: 13px; }
.skin-field > em { grid-column: 2; font-style: normal; font-size: 12px; color: var(--muted); opacity: .8; margin-top: -4px; }
.skin-field input[type="text"] { padding: 7px 10px; font-size: 13.5px; }
.skin-field input[type="color"] { width: 54px; height: 30px; padding: 2px; border-radius: 8px; cursor: pointer; background: var(--bg-3); }
.skin-field select { padding: 7px 10px; font-size: 13.5px; }
/* Réglage d'habillage verrouillé (signature HDS). */
.skin-verrou { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3); color: var(--muted); font-size: 13.5px; }
.skin-range { display: flex; align-items: center; gap: 10px; }
.skin-range input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); padding: 0; border: 0; }
.skin-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: pointer; transition: transform .15s var(--spring); }
.skin-range input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.25); }
.skin-range output { min-width: 52px; text-align: right; font-weight: 700; font-size: 12.5px; color: var(--text); }

/* Réglage sans plafond : le curseur pour aller vite, la case pour aller
   exactement où tu veux. Ce que tu tapes dans la case fait loi — le curseur
   s'étire jusqu'à cette valeur au lieu de la rogner. */
.skin-range.libre { gap: 8px; }
.skin-range .tt-libre {
  width: 74px; flex: 0 0 auto; text-align: right;
  padding: 5px 7px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--text);
  font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.skin-range .tt-libre:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.skin-range .tt-unite { font-size: 11px; color: var(--muted); white-space: nowrap; }
.skin-anchors { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.skin-anchors .anchor { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3);
  color: var(--muted); cursor: pointer; font-size: 14px; transition: .18s var(--ease); }
.skin-anchors .anchor:hover { color: var(--text); border-color: var(--line-2); }
.skin-anchors .anchor.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.skin-thumb { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.06); padding: 3px; }

/* ---- poignées de redimensionnement dans l'aperçu ---- */
.skin-panel, .skin-likes, .skin-img { position: absolute; }
.skin-handle { position: absolute; background: var(--accent); border: 2px solid #041018; border-radius: 999px;
  opacity: 0; transition: opacity .18s var(--ease), transform .15s var(--spring); z-index: 5; }
.skin-panel:hover .skin-handle, .skin-likes:hover .skin-handle, .skin-img:hover .skin-handle,
.skin-handle:hover { opacity: 1; }
.skin-handle:hover { transform: scale(1.25); }
.skin-handle.right { width: 10px; height: 34px; border-radius: 6px; right: -6px; top: 50%; margin-top: -17px; cursor: ew-resize; }
.skin-handle.corner { width: 14px; height: 14px; right: -7px; bottom: -7px; cursor: nwse-resize; }
.skin-img { cursor: move; }
.skin-img:hover { outline: 1px dashed var(--accent); outline-offset: 3px; }

/* ---- palette de symboles ---- */
.skin-symbols-title { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.skin-symbols { display: flex; flex-wrap: wrap; gap: 5px; }
.skin-symbols .sym { width: 32px; height: 32px; display: grid; place-items: center; font-size: 16px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; color: var(--text);
  transition: transform .15s var(--spring), border-color .15s var(--ease), background .15s var(--ease); }
.skin-symbols .sym:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.skin-symbols .sym:active { transform: scale(.9); }

/* ---- pastille d'édition (Studio Admin / HDS Live Studio) ---- */
.edition-chip { margin-left: 8px; font-size: 10px; letter-spacing: .12em; padding: 2px 8px; font-weight: 800; }
body[data-edition="public"] .edition-chip { opacity: .5; }

/* ---- poignées sur les quatre bords et les quatre coins ---- */
.skin-handle.h-n { left: 50%; top: -5px; margin-left: -17px; width: 34px; height: 10px; border-radius: 6px; cursor: ns-resize; }
.skin-handle.h-s { left: 50%; bottom: -5px; margin-left: -17px; width: 34px; height: 10px; border-radius: 6px; cursor: ns-resize; }
.skin-handle.h-e { right: -5px; top: 50%; margin-top: -17px; width: 10px; height: 34px; border-radius: 6px; cursor: ew-resize; }
.skin-handle.h-w { left: -5px; top: 50%; margin-top: -17px; width: 10px; height: 34px; border-radius: 6px; cursor: ew-resize; }
.skin-handle.h-ne, .skin-handle.h-nw, .skin-handle.h-se, .skin-handle.h-sw { width: 12px; height: 12px; border-radius: 4px; }
.skin-handle.h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.skin-handle.h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.skin-handle.h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.skin-handle.h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.skin-likes .skin-handle { background: var(--err); }

/* ================= Overlay TikTok — le créateur de tuiles ================= */
.btn.tiny { padding: 4px 9px; font-size: 12px; border-radius: 8px; }

.tt-lien { margin-bottom: 18px; background: linear-gradient(140deg, rgba(89,199,255,.10), var(--bg-2) 55%); border-color: var(--accent-line); }
.tt-lien-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tt-lien-bas { display: flex; gap: 10px; margin-top: 14px; }
.tt-lien-bas input { flex: 1; min-width: 0; padding: 10px 12px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px;
  background: #0a0f18; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); }

.tt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .95fr); gap: 20px; align-items: start; }
@media (max-width: 1250px) { .tt-grid { grid-template-columns: 1fr; } }

/* ---- aperçu : la vraie page overlay, mise à l'échelle dans un cadre ---- */
.tt-apercu { position: sticky; top: 76px; }
.tt-apercu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
/* L'aperçu ne reproduit plus l'écran de jeu entier : c'était un grand
   rectangle 16/9 presque vide, avec les tuiles tassées dans un angle, qui
   prenait la moitié de la page. C'est maintenant une bande — la page overlay
   tourne toujours en 1920 x 1080 derrière, mais on n'en montre que le milieu,
   là où le mode compact a centré les tuiles. */
.tt-scene {
  position: relative; width: 100%; aspect-ratio: 16 / 6; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
  /* damier discret : montre que le fond de l'overlay est transparent */
  background-color: #0b1018;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%);
  background-size: 26px 26px; background-position: 0 0, 13px 13px;
}
/* Le cadre fait vraiment 1920 x 1080 : on le réduit d'un bloc pour qu'il tienne dans la boîte
   (le facteur est calculé en direct par le logiciel, variable --tt-echelle). */
.tt-scene iframe {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0;
  /* Le décalage est calculé en pixels de l'ÉCRAN (voir ttEchelle) : il est donc
     appliqué avant l'agrandissement, sinon il serait mis à l'échelle lui aussi
     et le panneau partirait hors cadre. */
  transform: translate(var(--tt-dx, 0px), var(--tt-dy, 0px)) scale(var(--tt-echelle, .34));
  transform-origin: top left;
  transition: transform .18s ease;
}

/* Bloc de réglages replié (« Réglages fins ») */
.tt-plus { margin: 4px 0 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.tt-plus > summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--muted);
  padding: 6px 2px; user-select: none;
}
.tt-plus > summary::-webkit-details-marker { display: none; }
.tt-plus > summary::before { content: '▸ '; color: var(--accent); }
.tt-plus[open] > summary::before { content: '▾ '; }
.tt-plus > summary:hover { color: var(--text); }
.tt-apercu-pied { display: flex; gap: 8px; margin-top: 10px; }

/* ---- colonne de réglages ---- */
.tt-settings { display: flex; flex-direction: column; gap: 2px; }
.tt-ajout { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tt-ajout.tt-ajout-haut { margin: 0 0 12px; }

/* ---- une tuile dans l'éditeur ---- */
.tt-carte { padding: 12px; margin-bottom: 12px; transition: opacity .2s var(--ease), border-color .2s var(--ease); }
.tt-carte.off { opacity: .45; }
.tt-carte-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tt-num { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #08111c; flex: none; }
.tt-carte-corps { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 640px) { .tt-carte-corps { grid-template-columns: 1fr; } }
.tt-champs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tt-champs .skin-field { grid-template-columns: 110px 1fr; }

/* ---- la grande case du PNG ---- */
.tt-image { position: relative; }
.tt-drop {
  position: relative; width: 132px; height: 132px; border-radius: 14px; cursor: pointer;
  border: 2px dashed var(--line-2); background: #0b1220;
  display: grid; place-items: center; overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--spring), box-shadow .2s var(--ease);
}
.tt-drop:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow); }
.tt-drop.survol { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.03); }
.tt-drop.plein { border-style: solid; border-color: var(--line); background:
  linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%) 0 0/16px 16px,
  linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%) 8px 8px/16px 16px, #0b1220; }
.tt-drop.charge { opacity: .5; pointer-events: none; }
.tt-drop img { max-width: 88%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.tt-drop-vide { text-align: center; padding: 8px; color: var(--muted); }
.tt-drop-vide .ic { font-size: 26px; display: block; margin-bottom: 4px; }
.tt-drop-vide b { display: block; font-size: 12.5px; color: var(--text); }
.tt-drop-vide em { font-style: normal; font-size: 11px; opacity: .75; }
.tt-drop-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgba(8,12,20,.9); color: var(--err); cursor: pointer; font-size: 12px; line-height: 1; }
.tt-drop-x:hover { background: var(--err); color: #08111c; }

/* ---- palettes de couleurs ---- */
.tt-couleurs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tt-pal { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; padding: 0;
  transition: transform .18s var(--spring); }
.tt-pal:hover { transform: scale(1.18) rotate(-4deg); }

/* ---- la petite case du cadeau TikTok (sous la grande case du PNG) ---- */
.tt-cases { display: flex; flex-direction: column; gap: 8px; }
.tt-case-cadeau {
  position: relative; width: 132px; min-height: 56px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 8px 9px;
  border-radius: 12px; border: 2px dashed var(--line-2); background: #0b1220;
  transition: border-color .2s var(--ease), transform .2s var(--spring), box-shadow .2s var(--ease);
}
.tt-case-cadeau:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow); }
.tt-case-cadeau.plein { border-style: solid; border-color: var(--line); }
.tt-case-cadeau img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tt-case-cadeau .ic { font-size: 22px; line-height: 1; flex: none; opacity: .8; }
.tt-case-cadeau .txt { min-width: 0; display: flex; flex-direction: column; }
.tt-case-cadeau .txt b { font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-case-cadeau .txt em { font-style: normal; font-size: 11px; color: var(--muted); }
.tt-case-cadeau.plein .txt em { color: #ffd76a; }

/* ---- la liste complète des cadeaux TikTok ---- */
.modal-card:has(.tt-picker) { width: min(940px, 100%); }
.tt-picker input[type="search"] {
  width: 100%; padding: 11px 14px; font-size: 14px; margin-bottom: 10px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; color: var(--text);
}
.tt-picker-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tt-picker-filtres .chip { cursor: pointer; border: 1px solid var(--line); }
.tt-picker-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
  max-height: 52vh; overflow: auto; margin-top: 10px; padding: 4px;
}
.tt-picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: var(--text);
  transition: transform .18s var(--spring), border-color .18s var(--ease), background .18s var(--ease);
}
.tt-picker-item:hover { transform: translateY(-3px) scale(1.03); border-color: var(--accent); background: #1b2536; }
.tt-picker-item img { width: 48px; height: 48px; object-fit: contain; }
.tt-picker-item .n { font-size: 11.5px; line-height: 1.15; text-align: center; max-height: 2.4em; overflow: hidden; }
.tt-picker-item .p { font-size: 11px; font-weight: 800; color: #ffd76a; display: inline-flex; align-items: center; gap: 3px; }
.tt-picker-item .p::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f0b429 65%, #b8790d);
}
.tt-picker-item .ic-secours { font-size: 30px; line-height: 48px; height: 48px; }

/* ---- adresses de secours + plein écran de l'overlay ---- */
.tt-secours { margin-top: 12px; }
.tt-secours summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.tt-secours summary::marker { color: var(--muted); }

.modal-card:has(.tt-plein) { width: min(1500px, 100%); padding: 14px; }
.tt-plein-barre { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tt-plein-scene {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line);
  background-color: #0b1018;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%),
    linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%);
  background-size: 26px 26px; background-position: 0 0, 13px 13px;
}
.tt-plein-scene iframe {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0;
  transform: scale(var(--tt-echelle, .7)); transform-origin: top left;
}
.tt-plan-b { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tt-plan-b .tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.skin-field.tt-en-ligne { grid-template-columns: auto auto; gap: 8px; align-items: center; }

/* ---- déplacement du PNG dans la petite case ---- */
.tt-drop.plein { cursor: grab; touch-action: none; }
.tt-drop.plein.deplace { cursor: grabbing; border-color: var(--accent); box-shadow: var(--glow); }
.tt-drop.plein img { pointer-events: none; user-select: none; transition: transform .06s linear; }
.tt-drop.plein.deplace img { transition: none; }
.tt-drop-aide {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 4px;
  font-size: 10.5px; text-align: center; color: var(--muted);
  background: linear-gradient(180deg, transparent, rgba(8,12,20,.92));
  opacity: 0; transition: opacity .18s var(--ease); pointer-events: none;
}
.tt-drop.plein:hover .tt-drop-aide { opacity: 1; }


/* ---------- Mise à jour obligatoire ----------
   Écran plein qui recouvre tout : pas de croix, pas d'Échap, pas de clic à côté.
   Tant que la nouvelle version n'est pas installée, il n'y a rien d'autre à faire. */
.maj-ecran {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 24px;
  overflow: auto; animation: majEntre .35s var(--ease);
  background:
    radial-gradient(1000px 560px at 20% -10%, rgba(89, 199, 255, .18), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(47, 155, 255, .12), transparent 60%),
    rgba(6, 9, 15, .97);
  backdrop-filter: blur(6px);
}
@keyframes majEntre { from { opacity: 0; } to { opacity: 1; } }
.maj-carte {
  width: min(680px, 100%); background: var(--bg-2); border: 1px solid var(--accent-line);
  border-radius: 22px; padding: 34px; box-shadow: var(--shadow), var(--glow); text-align: center;
  animation: majMonte .45s var(--spring);
}
@keyframes majMonte { from { transform: translateY(18px) scale(.98); } to { transform: none; } }
.maj-carte h1 { font-size: 24px; }
.maj-pastille {
  display: block; width: fit-content; margin: 16px auto 0; padding: 5px 14px; border-radius: 999px;
  background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .4);
  color: var(--warn); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}
.maj-notes {
  text-align: left; max-height: 34vh; overflow: auto; margin-top: 6px; padding: 16px 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
}
.maj-notes .note:last-child { margin-bottom: 0; }
.maj-journal { display: none; }
.maj-journal.actif {
  display: block; text-align: left; margin-top: 16px; padding: 12px 14px; max-height: 130px; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 12.5px; color: var(--muted);
}
.maj-ligne { padding: 2px 0; }
.maj-ligne.ok { color: var(--ok); }
.maj-ligne.err { color: var(--err); }
.btn.big { padding: 14px 26px; font-size: 16px; border-radius: 13px; }
@media (max-width: 600px) { .maj-carte { padding: 24px 18px; } }

/* ---------- Utilisateurs (Studio Admin) ---------- */
.suivi-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; }
.suivi-chiffre {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.suivi-chiffre b { font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.suivi-chiffre span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.suivi-chiffre.ok b { color: var(--ok); }
.suivi-chiffre.warn b { color: var(--warn); }
.suivi-chiffre.accent b { color: var(--accent); }

.versions-barres { display: flex; flex-direction: column; gap: 9px; }
.vbarre { display: grid; grid-template-columns: 74px 1fr 92px; gap: 12px; align-items: center; font-size: 13px; }
.vnom { font-family: Consolas, monospace; color: var(--muted); }
.vnom.a-jour { color: var(--ok); font-weight: 700; }
.vpiste { background: var(--bg-3); border-radius: 999px; height: 9px; overflow: hidden; }
.vpiste i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.vcompte { color: var(--muted); text-align: right; }

.suivi-barre { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.suivi-barre input[type="search"] { flex: 1; min-width: 220px; }
.suivi-barre select { width: auto; min-width: 200px; }
.table-defile { overflow-x: auto; }
.suivi-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.suivi-table th {
  text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  font-weight: 700; padding: 0 12px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.suivi-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.suivi-table tr:last-child td { border-bottom: 0; }
.suivi-table tbody tr:hover { background: rgba(89, 199, 255, .04); }
.suivi-table td > * { display: block; }
.suivi-table td:last-child > * { display: inline-flex; margin-left: 6px; }
.suivi-table td .chip { display: inline-flex; }
.suivi-id { font-family: Consolas, monospace; font-size: 11px; color: var(--muted); margin-top: 2px; }
.suivi-sous { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.chip.accent { background: rgba(89, 199, 255, .14); border-color: var(--accent-line); color: var(--accent); }

.kv-liste { display: flex; flex-direction: column; gap: 0; margin: 4px 0 6px; }
.kv-ligne { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv-ligne:last-child { border-bottom: 0; }
@media (max-width: 700px) { .kv-ligne { grid-template-columns: 1fr; gap: 2px; } }

/* Écran de bienvenue : même habillage que la mise à jour obligatoire. */
.maj-carte input[type="text"] { text-align: center; font-size: 17px; padding: 13px 14px; }
.maj-carte .error { text-align: center; }

/* ---------- Bandeau « le logiciel doit être relancé » ----------
   Les fichiers sur le disque sont plus récents que le serveur qui tourne :
   tant qu'on n'a pas relancé, des boutons neufs appellent un serveur ancien. */
.relance {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 80; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 16px; max-width: min(680px, calc(100vw - 32px));
  background: var(--bg-2); border: 1px solid rgba(251, 191, 36, .45);
  box-shadow: var(--shadow), 0 0 0 1px rgba(251, 191, 36, .12);
  animation: relanceEntre .4s var(--spring) both;
}
@keyframes relanceEntre { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.relance b { display: block; font-size: 14.5px; color: var(--warn); }
.relance-aide { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.relance-point { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); flex: none; box-shadow: 0 0 0 4px rgba(251, 191, 36, .18); }
.relance .btn { flex: none; }
@media (max-width: 620px) { .relance { flex-direction: column; align-items: flex-start; text-align: left; } }

/* Logo HDS Live Studio — il remplace le rond bleu dessiné à la main dans la barre du haut
   et sur l'écran de connexion. Hauteur calée sur celle du texte de la marque. */
.brand-logo { height: 32px; width: auto; display: block; }
.brand.big .brand-logo { height: 64px; margin: 0 auto 14px; }
.brand { display: flex; align-items: center; gap: 10px; }

/* ---------- Numéro de version, en bas à gauche ----------
   Discret mais toujours là : quelle version tourne dans CETTE fenêtre. Passe en
   orange quand le serveur en ligne propose plus récent. Cliquable → journal. */
.version-badge {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  font: inherit; font-size: 11.5px; line-height: 1.5; letter-spacing: .02em;
  color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--line); cursor: pointer;
  opacity: .66; transition: opacity .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.version-badge:hover { opacity: 1; color: var(--text); border-color: var(--line-2); }
.version-badge-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.version-badge.retard { opacity: 1; color: var(--warn); border-color: rgba(251, 191, 36, .45); }
.version-badge-dispo { color: var(--warn); font-size: 11px; }
@media (max-width: 620px) { .version-badge { left: 10px; bottom: 10px; font-size: 11px; } }

/* =======================================================================
   Panneau du jeu : le grand bloc en haut de la page, quand le jeu en
   demande un. Une seule chose à faire à la fois, écrite en grand.
   ======================================================================= */
.panneau-jeu {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 20px 24px; margin: -8px 0 26px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.panneau-jeu .pj-txt { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 0; }
.panneau-jeu .big-led { width: 16px; height: 16px; border-radius: 50%; background: var(--muted); flex: none; }
.panneau-jeu h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.panneau-jeu p { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 62ch; }
.panneau-jeu .pj-chiffres { display: flex; gap: 26px; flex-wrap: wrap; }
.panneau-jeu .pj-chiffre { display: flex; flex-direction: column; gap: 2px; }
.panneau-jeu .pj-chiffre .lbl { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.panneau-jeu .pj-chiffre .val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.panneau-jeu .pj-chiffre .sub { font-size: 12px; color: var(--muted); }
.panneau-jeu .pj-boutons { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.panneau-jeu .btn.gros { font-size: 16px; padding: 14px 26px; border-radius: 12px; }
.panneau-jeu.ok { border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .08); }
.panneau-jeu.ok .big-led { background: var(--ok); box-shadow: 0 0 14px var(--ok); animation: pulse 2s infinite; }
.panneau-jeu.warn { border-color: rgba(251, 191, 36, .55); background: rgba(251, 191, 36, .08); }
.panneau-jeu.warn .big-led { background: var(--warn); box-shadow: 0 0 14px var(--warn); }
.panneau-jeu.err { border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .07); }
.panneau-jeu.err .big-led { background: var(--err); }
@media (max-width: 720px) {
  .panneau-jeu .pj-boutons { margin-left: 0; width: 100%; }
  .panneau-jeu .btn.gros { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Segments : un réglage à choix courts (taille d'une tuile, format)
   --------------------------------------------------------------------------
   Une rangée de boutons collés, celui qui est actif s'allume. Plus rapide
   qu'un curseur pour un choix franc, et on voit d'un coup d'œil où on en est. */
.tt-segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-2, rgba(255, 255, 255, .04));
  border: 1px solid var(--line);
}
.tt-segment {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px 6px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--txt-2, #9fb0c4);
  cursor: pointer;
  text-align: center;
  transition: background .14s ease, color .14s ease;
}
.tt-segment:hover { background: rgba(255, 255, 255, .06); color: inherit; }
.tt-segment b { font-size: 13px; font-weight: 700; line-height: 1.1; }

/* Le dessin de la forme, posé au-dessus du libellé : un contour et rien de
   plus. On compare quatre silhouettes d'un coup d'œil, sans avoir à lire. */
.tt-forme-vue {
  display: block; margin-bottom: 4px;
  width: 26px; height: 26px;
  border: 2px solid currentColor;
  opacity: .85;
}
.tt-forme-vue.forme-arrondi { border-radius: 7px; }
.tt-forme-vue.forme-carre   { border-radius: 0; }
.tt-forme-vue.forme-rond    { border-radius: 50%; }
/* La pilule se dessine comme elle s'affiche : large et basse. */
.tt-forme-vue.forme-pilule  { width: 32px; height: 15px; border-radius: 999px; margin-top: 6px; margin-bottom: 9px; }
.tt-segment.on .tt-forme-vue { opacity: 1; }
.tt-segment em {
  font-style: normal; font-size: 10.5px; line-height: 1.2; opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tt-segment.on {
  background: var(--accent, #59c7ff);
  color: #04121c;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.tt-segment.on em { opacity: .8; }

/* ===========================================================================
   LA TOUR HDS — page de réglages
   Le jeu tourne dans un vrai cadre à côté des curseurs : on règle et on voit.
   =========================================================================== */
.tour-scene {
  position: relative;
  /* Le jeu est vertical (9:16) : le cadre l'est aussi, sinon on affiche du vide
     à gauche et à droite et l'aperçu ne dit rien de ce que verront les viewers. */
  aspect-ratio: 9 / 16;
  /* 58vh : l'aperçu ET la rangée de boutons d'essai doivent tenir dans l'écran
     sans faire défiler — sinon on règle en haut et on teste en bas. */
  max-height: 58vh;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #05070F;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(89, 199, 255, .1);
}
.tour-scene iframe { width: 100%; height: 100%; border: 0; display: block; }

.tour-essais { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; justify-content: center; }
.tour-essais .btn { min-width: 38px; padding: 6px 9px; font-size: 15px; line-height: 1; }

/* Le tableau malus ↔ riposte. C'est l'argument du jeu : chaque coup bas a sa
   réponse, donc les viewers se répondent au lieu de tous taper dans le même sens. */
.tour-duels { display: flex; flex-direction: column; gap: 4px; }
.tour-duel {
  display: grid; grid-template-columns: minmax(118px, .85fr) minmax(0, 1.7fr);
  gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  font-size: 12.5px;
}
.tour-duel.tete {
  background: none; border: 0; padding: 14px 2px 3px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.tour-duel.tete:first-child { padding-top: 2px; }
.tour-duel .quoi { line-height: 1.45; }
.tour-duel .mal { color: #ff8fb8; font-weight: 700; }
.tour-duel .bon { color: #6ee7b7; font-weight: 700; }
.tour-duel .quoi { color: var(--muted); }
@media (max-width: 620px) {
  .tour-duel { grid-template-columns: 1fr; gap: 2px; }
  .tour-duel.tete { display: none; }
}

.tt-adresses { display: flex; flex-direction: column; gap: 5px; }
.tt-adresses .btn { text-align: left; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------ Les règles de la Tour
   Une page qu'on LIT : des cartes, une par sujet, avec de l'air. Chaque cadeau
   est un paragraphe entier — c'est la fiche du webhook, la vraie — et son
   bouton « Essayer » le joue dans l'aperçu d'à côté. */
.regle-carte {
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px; padding: 14px 16px 10px; margin-bottom: 12px;
}
.regle-carte h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .02em; }
.regle-carte p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text); }
.regle-touches { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 10px; font-size: 12.5px; color: var(--muted); }
.regle-touches kbd {
  display: inline-block; padding: 2px 7px; margin-right: 4px; border-radius: 6px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--text);
  font: 700 11.5px/1.4 inherit;
}
.regle-cadeau { padding: 10px 0 6px; border-top: 1px solid rgba(255, 255, 255, .06); }
.regle-cadeau-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.regle-cadeau-tete b { font-size: 13.5px; }
.regle-cadeau-tete .bon { color: #6ee7b7; }
.regle-cadeau-tete .mal { color: #ff8fb8; }
.regle-cadeau p { color: var(--muted); font-size: 12.5px; margin-bottom: 4px; }