:root {
  /* Image de fond du site : dépose ton image dans le dossier public sous ce nom (ou change le nom ici) */
  --fond: url('/fond.png');
  --ink: #0c0c0c;
  --panel: #161616;
  --panel-2: #1e1e1e;
  --line: #2e2e2e;
  --brass: #e8e6df;
  --brass-dim: #8a8982;
  --bone: #e9e5d7;
  --muted: #98a59d;
  --in: #7bb896;
  --out: #d0624e;
  --radius: 4px;
  --veil: .78;
  --role-membre: #98a59d;
  --role-grade: #e9e5d7;
  --role-chef: #e8e6df;
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --gothic: 'Pirata One', 'Old English Text MT', Georgia, serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  /* Voile sombre par-dessus l'image pour garder les textes lisibles (0.78 = voile fort ; baisse le chiffre pour voir davantage l'image) */
  /* L'accueil public reste uni et ne charge aucune photo de l'organisation. */
  background: #101013;
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* Les photos d'arrière-plan d'origine restent réservées à l'espace Personnel. */
body.private-space {
  background:
    linear-gradient(rgba(12, 12, 12, var(--veil)), rgba(12, 12, 12, var(--veil))),
    var(--fond) center / cover no-repeat fixed,
    var(--ink);
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .02em; margin: 0; line-height: 1.05; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- Écran de connexion ---------- */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Même ambiance neutre que l'accueil public : aucune photo du groupe. */
  background:
    radial-gradient(ellipse at 50% 5%, rgba(222,222,222,.055), transparent 60%),
    linear-gradient(145deg, #19191d 0%, #101013 55%, #0a0a0c 100%);
}
.gate-card {
  width: min(420px, 100%);
  background: rgba(12, 12, 12, .72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(6px);
}
.logo { display: flex; align-items: center; gap: 14px; }
.logo img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 1px solid var(--line); }
.logo-text { font-family: var(--gothic); font-size: 4.6rem; line-height: .85; color: var(--bone); letter-spacing: .02em; }
.logo-text small { display: block; font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .28em; color: var(--brass); margin-top: 8px; }
.logo.compact img { width: 40px; height: 40px; border-radius: 10px; }
.logo.compact .logo-text { font-size: 2.3rem; }
.logo.compact .logo-text small { font-size: .7rem; letter-spacing: .2em; margin-top: 4px; }
.gate-card .entry-eyebrow { text-align: center; }
.gate-title { text-align: center; font-size: clamp(2rem, 5vw, 3rem); }
.gate-card .sub { color: var(--muted); margin: 10px 0 28px; }
.gate-card form { display: grid; gap: 14px; }

/* ---------- Mise en page ---------- */
.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.side {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.nav { display: grid; gap: 2px; }
.nav button {
  all: unset;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--muted);
  border-left: 3px solid transparent;
}
.nav button:hover { color: var(--bone); background: var(--panel-2); }
.nav button[aria-current="page"] { color: var(--bone); background: var(--panel-2); border-left-color: var(--brass); font-weight: 600; }
.nav button:focus-visible { outline: 2px solid var(--brass); }
.who { margin-top: auto; font-size: .9rem; color: var(--muted); display: grid; gap: 8px; }
.who strong { color: var(--bone); display: block; }

main { padding: 32px clamp(16px, 4vw, 48px) 64px; max-width: 1200px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { color: var(--muted); margin-top: 6px; }

/* ---------- Composants ---------- */
button, .btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--bone);
  padding: 9px 16px;
  border-radius: var(--radius);
}
button:hover { border-color: var(--brass-dim); }
button.primary { background: var(--brass); color: #1a1405; border-color: var(--brass); font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }
button.danger { color: var(--out); }
button.small { padding: 4px 10px; font-size: .85rem; }
button.link { background: none; border: none; padding: 0; color: var(--muted); text-decoration: underline; }
button:disabled { opacity: .5; cursor: not-allowed; }

label { display: grid; gap: 5px; font-size: .9rem; color: var(--muted); }
input, select, textarea {
  font: inherit;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 11px;
  width: 100%;
}
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: var(--brass); }
.check { display: flex; align-items: center; gap: 8px; color: var(--bone); }
.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.error { color: var(--out); font-size: .9rem; min-height: 1.2em; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card + .card { margin-top: 18px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* La caisse : élément central du tableau de bord */
.vault {
  border: 1px solid var(--brass-dim);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-radius: var(--radius);
  padding: 26px clamp(18px, 3vw, 32px);
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.vault .label { color: var(--muted); }
.vault .big { font-family: var(--display); font-weight: 800; font-size: clamp(3.2rem, 9vw, 6rem); line-height: .95; color: var(--brass); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; flex: 1; min-width: 260px; max-width: 520px; }
.stat { border-left: 2px solid var(--line); padding-left: 12px; }
.stat b { font-family: var(--display); font-size: 1.9rem; display: block; line-height: 1; }
.stat span { color: var(--muted); font-size: .85rem; }

.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.two-col .card + .card { margin-top: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: .85rem; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr:hover { background: rgba(255,255,255,.02); }
.table-wrap { overflow-x: auto; }
.in { color: var(--in); }
.out { color: var(--out); }
.muted { color: var(--muted); }
.tag { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.tag.chef { color: var(--role-chef); border-color: var(--role-chef); }
.tag.grade { color: var(--role-grade); border-color: var(--role-grade); }
.tag.membre { color: var(--role-membre); border-color: var(--role-membre); }
.tag.off { color: var(--out); border-color: var(--out); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.empty { color: var(--muted); padding: 20px 4px; }
.filters { display: flex; gap: 6px; }
.filters button[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
.stock-qty { font-family: var(--display); font-size: 1.6rem; font-weight: 800; }
.stock-qty.zero { color: var(--out); }

/* ---------- Objets reçus (déclaration de braquage) ---------- */
.loot { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.loot summary, details.sub summary { cursor: pointer; padding: 10px 12px; font-weight: 600; color: var(--bone); }
.loot summary:hover, details.sub summary:hover { color: var(--brass); }
.loot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 4px 12px 14px; }
.loot-item { color: var(--bone); }
.field-label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 5px; }
#part-menu .loot-grid { max-height: 220px; overflow-y: auto; }
.loot-item input { padding: 6px 9px; }

/* ---------- Page Informations ---------- */
[hidden] { display: none !important; }
.groups { display: grid; gap: 10px; }
.groups .card + .card { margin-top: 0; }
.group-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag.rel-bonne { color: var(--in); border-color: var(--in); }
.tag.rel-conflit { color: var(--out); border-color: var(--out); }
.tag.rel-neutre { color: var(--muted); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kv .wide { grid-column: 1 / -1; }
.map-thumb { display: block; padding: 0; margin-top: 6px; max-width: 380px; overflow: hidden; line-height: 0; }
.map-thumb img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.map-thumb.small { max-width: 240px; }
.map-thumb.small img { max-height: 140px; }
.storage-map { margin-bottom: 12px; }
dialog.zoom { width: min(1100px, calc(100vw - 32px)); }
dialog.zoom img { display: block; max-width: 100%; max-height: calc(100vh - 190px); margin: 0 auto; }
details.sub { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 10px; background: var(--panel-2); }
details.sub[open] > summary { border-bottom: 1px solid var(--line); }
details.sub > .table-wrap, details.sub > .empty { padding: 0 12px; }
.sub-actions { padding: 10px 12px 12px; }

/* ---------- Photos de profil ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--panel-2); border: 1px solid var(--line); flex: none; display: block; }
.avatar.sm { width: 32px; height: 32px; }
.avatar.md { width: 44px; height: 44px; }
.avatar.lg { width: 76px; height: 76px; }
.avatar.xl { width: 104px; height: 104px; }
.avatar.initial { display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--muted); }
.avatar.sm.initial { font-size: 1rem; } .avatar.lg.initial { font-size: 2rem; } .avatar.xl.initial { font-size: 2.8rem; }
.avatar-btn { padding: 0; border: none; background: none; border-radius: 50%; line-height: 0; flex: none; }
.avatar-btn:hover .avatar { border-color: var(--brass); }
.who-id { display: flex; align-items: center; gap: 10px; }
.welcome { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.welcome-text h2 { font-size: 1.8rem; }
.welcome-text p { color: var(--muted); margin-top: 6px; }
.welcome-title { font-family: var(--body); font-size: 1rem; font-weight: 500; }

/* ---------- Hiérarchie des membres ---------- */
.hier-section { --cat: var(--line); border-left: 3px solid var(--cat); padding: 2px 0 2px 20px; margin-left: 14px; margin-bottom: 28px; position: relative; }
.hier-section.plain { border-left: none; padding-left: 0; margin-left: 0; }
.hier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; margin-left: -45px; }
.hier-rank { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 3px solid var(--cat); color: var(--cat); font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.hier-head h3 { color: var(--cat); font-size: 1.7rem; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.member-card { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.member-card.is-off { opacity: .55; }
.member-info { min-width: 0; display: grid; gap: 4px; }
.member-name { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; overflow-wrap: anywhere; }
.member-meta { font-size: .85rem; }

/* ---------- Recherche et groupes dépliants ---------- */
.searchbar { margin: 0 0 14px; }
.searchbar input { max-width: 520px; }
.group-acc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.group-acc:hover { border-color: var(--brass-dim); }
.group-acc > summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; list-style: none; }
.group-acc > summary::-webkit-details-marker { display: none; }
.group-acc > summary::before { content: '▸'; color: var(--brass); transition: transform .15s; }
.group-acc[open] > summary::before { transform: rotate(90deg); }
.group-acc[open] > summary { border-bottom: 1px solid var(--line); }
.group-acc .group-name { flex: 1; min-width: 200px; }
.group-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: .02em; }
.group-sum-info { font-size: .88rem; }
.group-body { padding: 16px 18px 18px; }

/* ---------- Paramètres ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.settings-grid .card + .card { margin-top: 0; }
.card-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.role-row { display: grid; grid-template-columns: 90px 1fr 90px; gap: 12px; align-items: end; margin-bottom: 12px; }
.role-row .tag { align-self: center; text-align: center; }
input[type=color] { padding: 2px 4px; height: 38px; cursor: pointer; }
input[type=range] { padding: 0; accent-color: var(--brass); }
output { color: var(--bone); font-weight: 600; }

.rank-cell { width: 2.2em; color: var(--muted); font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.cat-section { border-left: 4px solid var(--line); }
.cat-section .card-title h3 { font-size: 1.4rem; }

/* ---------- Task List ---------- */
.tasks { display: grid; gap: 10px; }
.task { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.task.is-done { opacity: .6; }
.task.is-done .task-title { text-decoration: line-through; }
.task-main { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.task-title { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-meta { font-size: .85rem; }
.group-pills { display: grid; gap: 6px; }
.group-pill { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; }
.group-pill[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.day { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 120px; }
.day.today { border-color: var(--brass); }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.day-empty { font-size: .85rem; }
.plan-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-left: 3px solid var(--brass-dim); background: var(--panel); border-radius: var(--radius); }
.plan-item.a_faire { border-left-color: var(--in); }
.plan-item.commande { border-left-color: var(--out); }
.plan-item.is-done .plan-main > div:first-child { text-decoration: line-through; opacity: .6; }
.plan-main { flex: 1; min-width: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
.plan-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.check-btn { padding: 0 4px; border: none; background: none; font-size: 1.3rem; line-height: 1; color: var(--bone); }

/* ---------- Fenêtre modale ---------- */
dialog {
  background: var(--panel);
  color: var(--bone);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  padding: 24px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
dialog::backdrop { background: rgba(5, 9, 7, .75); }
dialog h2 { margin-bottom: 16px; }
dialog .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--bone);
  color: #111;
  padding: 10px 18px;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
  font-weight: 500;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: var(--out); color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-right: none; border-bottom: 1px solid var(--line); }
  .nav { display: flex; overflow-x: auto; order: 3; width: 100%; gap: 4px; }
  .nav button { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .nav button[aria-current="page"] { border-bottom-color: var(--brass); }
  .who { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .who strong { display: inline; }
  .two-col { grid-template-columns: 1fr; }
  .welcome { flex-direction: column; text-align: center; }
  .hier-section { margin-left: 8px; padding-left: 14px; }
  .hier-head { margin-left: -37px; }
  .hier-rank { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Améliorations : statistiques, journal, minuteurs et carte interactive ---------- */
.announcement { margin-bottom: 18px; border-left: 3px solid var(--brass); }
.announcement p { white-space: normal; overflow-wrap: anywhere; }
.intel-map { width: 100%; height: 380px; min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); z-index: 0; }
.map-card { margin-bottom: 18px; }
.heist-rules-card { margin-bottom: 18px; }
.heist-rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.heist-rule { display: grid; gap: 4px; padding: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.heist-rule strong { text-transform: capitalize; color: var(--bone); }
.heist-rule span, .heist-rule small { color: var(--muted); font-size: .84rem; }
.heist-rule .countdown { color: var(--brass); font-size: .9rem; }
@media (max-width: 720px) { .intel-map { height: 300px; } }


/* Carte GTA V dédiée */
.gta-map-card { padding: 14px; }
.gta-world-map { width: 100%; height: min(72vh, 760px); min-height: 420px; background: #19416b; border: 1px solid var(--line); border-radius: 4px; z-index: 0; overflow: hidden; }
.gta-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gta-map-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.gta-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gta-map-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.gta-map-filter { display: flex; align-items: center; gap: 8px; }
.gta-map-filter select { width: auto; min-width: 190px; }
.gta-map-help { color: var(--muted); font-size: .85rem; margin-top: 10px; }
.gta-marker-wrap { background: transparent; border: 0; }
.gta-marker { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 2px solid var(--marker-color); border-radius: 50%; background: rgba(12,12,12,.92); box-shadow: 0 2px 8px #0009; font-size: 15px; }
.gta-popup { min-width: 180px; color: #171717; font-family: var(--body); }
.gta-popup strong { display: block; font-size: 1rem; color: #151515; }
.gta-popup-kind { display: inline-block; margin-top: 3px; font-size: .78rem; color: #555; }
.gta-popup p { margin: 8px 0; white-space: normal; overflow-wrap: anywhere; }
.gta-popup small { color: #666; }
.gta-popup-actions { display: flex; gap: 6px; margin-top: 10px; }
.gta-popup-actions button { padding: 4px 8px; font-size: .8rem; color: #222; border-color: #aaa; background: #f3f3f3; }
.gta-popup-actions button.danger { color: #a52626; }
.gta-map-error { display: grid; place-content: center; gap: 10px; height: 100%; padding: 24px; text-align: center; color: var(--bone); }
.gta-map-error p { color: var(--muted); }
.gta-marker-list-card { margin-top: 18px; }
@media (max-width: 720px) { .gta-world-map { min-height: 360px; height: 58vh; } .gta-map-filter { width: 100%; } .gta-map-filter select { flex: 1; min-width: 0; } }

/* Les espaces momentanément visibles autour de l'image reprennent la couleur de l'océan de la carte. */
#gta-world-map, #gta-world-map .leaflet-container, #gta-world-map .leaflet-pane { background-color: #19416b; }
#gta-world-map .leaflet-image-layer { max-width: none !important; }

/* Annonces, profils, CPC, missions et mouvements groupés */
.notification-badge { display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; padding:0 6px; margin-left:7px; border-radius:99px; background:#cf5545; color:white; font:700 12px var(--body); }
.notification-badge[hidden] { display:none; }
.feature-list { display:grid; gap:18px; }
.feature-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; margin-top:10px; }
.feature-heading { margin:28px 0 18px; }
.announcement-body { margin-top:20px; }
.announcement-preview { padding:16px; min-height:70px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
.profile-summary { display:flex; align-items:center; gap:24px; }
.profile-summary .row-actions { margin-top:16px; }
.cpc-sections { display:grid; gap:20px; margin:20px 0; }
.cpc-sections section { border-left:3px solid var(--line); padding-left:16px; }
.cpc-sections section:first-child { border-color:var(--in); }
.cpc-sections section:last-child { border-color:var(--brass); }
.mission-controls { display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px; }
.batch-line { display:grid; grid-template-columns:minmax(0,1fr) 110px 38px; gap:10px; align-items:end; margin-bottom:12px; }
.batch-line button { min-height:40px; }
@media(max-width:600px) { .batch-line { grid-template-columns:minmax(0,1fr) 75px 34px; gap:6px; } .profile-summary { align-items:flex-start; gap:14px; } .feature-list .card-title { flex-wrap:wrap; gap:12px; } }
/* La navigation étendue reste accessible sur les écrans peu hauts. */
@media(min-width:821px) { .side { overflow-y:auto; } .nav, .who { flex-shrink:0; } }
.side, main, .feature-list, .feature-list .card { min-width:0; }
.feature-list h2 { overflow-wrap:anywhere; }
/* Navigation regroupée et compte dans la barre supérieure */
.workspace { min-width:0; }
.topbar { display:flex; justify-content:flex-end; align-items:center; gap:14px; padding:16px clamp(16px,4vw,48px); border-bottom:1px solid var(--line); background:rgba(16,16,16,.88); }
.profile-access { display:flex; align-items:center; gap:10px; text-align:left; }
.profile-access strong,.profile-access small { display:block; }
.profile-access small { color:var(--muted); }
.nav { gap:20px; }
.nav-group { display:grid; gap:3px; min-width:0; }
.nav-group h2 { font:600 10px var(--body); letter-spacing:.15em; text-transform:uppercase; color:var(--muted); padding:0 12px 6px; }
.nav-group button { display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 12px; }
.nav-icon { width:18px; text-align:center; opacity:.7; flex-shrink:0; }
.side .who { padding-top:14px; border-top:1px solid var(--line); }
.menu-toggle { display:none; }
/* Vitrine et envoi d'images */
.upload-drop { display:block; width:100%; padding:18px; margin:12px 0; border:1px dashed var(--brass-dim); border-radius:8px; background:rgba(255,255,255,.025); text-align:center; color:var(--muted); cursor:pointer; }
.upload-drop:hover,.drag-over { border-color:var(--brass); background:rgba(255,255,255,.09); color:var(--bone); }
.upload-drop input { margin-top:12px; }
.upload-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:10px; }
.upload-previews img { width:100%; height:140px; object-fit:contain; border-radius:6px; background:var(--ink); }
.upload-status { color:var(--muted); font-size:14px; }
.showcase-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:20px; margin-top:24px; }
.showcase-grid .card { margin:0; padding:12px; }
.showcase-image { display:block; width:100%; padding:0; overflow:hidden; border:0; }
.showcase-image img { display:block; width:100%; height:210px; object-fit:cover; }
.showcase-grid p { margin:12px 0; }
/* Deux couches assurent un fondu sans déplacer le contenu. */
#showcase-background { position:fixed; inset:0; z-index:0; pointer-events:none; }
.background-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.5s ease; }
.background-slide.visible { opacity:1; }
#app { position:relative; z-index:1; }
@media(max-width:820px) {
 .side { display:flex; }
 .menu-toggle { display:block; margin-left:auto; }
 .side .nav { display:none; width:100%; overflow:visible; }
 .side.menu-open .nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .nav-group button { white-space:normal; border-left:3px solid transparent; border-bottom:0; }
 .nav-group button[aria-current=page] { border-left-color:var(--brass); border-bottom:0; }
 .side .who { order:4; width:100%; margin:0; padding-top:8px; }
 .topbar { padding:10px 16px; flex-wrap:wrap; }
 .profile-access { padding:6px 10px; }
}
@media(prefers-reduced-motion:reduce) { .background-slide { transition:none; } }


/* ---------- Page d'entrée : Casino / Personnel ---------- */
.entry-screen { min-height:100vh; display:grid; place-items:center; padding:36px 20px; background:radial-gradient(ellipse at 50% 5%,rgba(222,222,222,.055),transparent 60%),linear-gradient(145deg,#19191d 0%,#101013 55%,#0a0a0c 100%); }
.entry-content { width:min(860px,100%); text-align:center; }
.entry-content .logo { justify-content:center; margin-bottom:52px; }
.entry-eyebrow { font-size:12px; letter-spacing:.34em; font-weight:700; color:var(--brass); margin-bottom:12px; }
.entry-content h1 { font-size:clamp(2.5rem,7vw,4.6rem); }
.entry-intro { color:var(--muted); margin:18px auto 36px; max-width:560px; }
.entry-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; text-align:left; }
.entry-choice { min-height:240px; padding:26px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid #45413b; background:linear-gradient(160deg,rgba(34,34,34,.94),rgba(13,13,13,.94)); transition:transform .2s,border-color .2s,background .2s; }
.entry-choice:hover { transform:translateY(-4px); border-color:var(--brass); background:linear-gradient(160deg,rgba(48,48,48,.95),rgba(16,16,16,.95)); }
.entry-symbol { font-size:42px; line-height:1; color:var(--brass); margin-bottom:24px; }
.entry-name { font-family:var(--display); font-size:2.3rem; font-weight:800; line-height:1; }
.entry-description { color:var(--muted); margin-top:9px; }
.entry-arrow { font-size:25px; align-self:flex-end; margin-top:auto; color:var(--brass); }
.entry-content-narrow { max-width:600px; }
.entry-back { width:auto; background:transparent; border:0; color:var(--muted); padding:8px 0; text-decoration:underline; }
.entry-back:hover { color:var(--bone); }
.entry-content-narrow .entry-back { margin-bottom:54px; }
.casino-placeholder-symbol { font-size:90px; line-height:1; color:var(--brass); margin-bottom:24px; }
.gate-back { display:block; margin:20px auto 0; }
@media(max-width:600px) { .entry-content .logo { margin-bottom:32px; } .entry-choices { grid-template-columns:1fr; gap:12px; } .entry-choice { min-height:165px; padding:20px; } .entry-symbol { font-size:30px; margin-bottom:14px; } .entry-name { font-size:1.9rem; } .entry-arrow { margin-top:-18px; } }


/* ---------- Comptes joueurs du Casino (public, sans identité de l'organisation) ---------- */
.casino-screen { padding:40px 20px; }
.casino-auth-layout { width:min(1000px,100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,420px); align-items:center; gap:clamp(28px,6vw,88px); }
.casino-auth-intro { text-align:left; }
.casino-auth-intro .entry-back { margin-bottom:80px; }
.casino-mark { display:grid; place-items:center; width:76px; height:76px; margin-bottom:24px; font-size:49px; line-height:1; color:#d9c08a; border:1px solid #564a33; border-radius:20px; background:linear-gradient(135deg,#282316,#171613); }
.casino-auth-intro h1 { font-family:var(--display); font-size:clamp(3rem,6vw,5rem); line-height:1; }
.casino-auth-intro .entry-intro { max-width:420px; margin:22px 0 18px; }
.casino-assurance { color:#bdb3a1; font-size:.9rem; border-left:2px solid #d9c08a; padding-left:12px; }
.casino-auth-card { background:linear-gradient(180deg,#202023 0%,#161619 100%); border:1px solid #484239; border-radius:14px; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.28); }
.casino-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; border-radius:9px; padding:5px; background:#101012; margin-bottom:30px; }
.casino-tab { border:0; background:transparent; color:#b1aaa2; border-radius:6px; padding:11px 8px; font-weight:600; }
.casino-tab.selected { background:#3b3428; color:#f3e4c6; }
.casino-tab:hover { border:0; color:#fff; }
.casino-form-head h2 { font-family:var(--display); font-size:2.1rem; }
.casino-form-head p { color:var(--muted); margin-top:8px; font-size:.9rem; }
.casino-account-form { display:grid; gap:16px; margin-top:26px; }
.casino-account-form label { color:#ded7cb; }
.casino-account-form input { border-radius:8px; padding:13px 14px; background:#0d0d10; border:1px solid #454044; }
.casino-account-form input:focus { border-color:#cdb27b; outline:2px solid #cdb27b; outline-offset:0; }
.casino-account-form .error { min-height:1em; }
.casino-submit { width:100%; background:#d9c08a !important; border-color:#d9c08a !important; color:#181612 !important; border-radius:8px; padding:13px; }
.casino-form-note { font-size:.85rem; color:var(--muted); margin-top:20px; line-height:1.7; }
.casino-inline-link { all:unset; cursor:pointer; color:#e7ce94; text-decoration:underline; margin-left:4px; }
.casino-inline-link:focus-visible { outline:2px solid #e7ce94; outline-offset:3px; }
.casino-profile { width:min(600px,100%); text-align:center; }
.casino-profile > .entry-back { display:block; margin:0 auto 35px 0; }
.casino-profile .casino-mark { margin:0 auto 24px; }
.casino-profile h1 { font-size:clamp(2.4rem,6vw,4.1rem); overflow-wrap:anywhere; }
.casino-player-id { display:grid; justify-items:center; gap:10px; padding:30px; margin:30px auto 24px; border-radius:14px; border:1px solid #615035; background:linear-gradient(135deg,#24201a,#141414); }
.casino-player-id span { font-size:.78rem; letter-spacing:.24em; color:#b7ac96; }
.casino-player-id strong { font-family:var(--display); font-size:clamp(4rem,10vw,6rem); letter-spacing:.12em; line-height:1.1; color:#f0d8a4; }
.casino-player-id small { font-size:.85rem; color:var(--muted); }
.casino-profile-actions { display:flex; justify-content:center; }
.casino-logout { border-radius:8px; padding:12px 25px; }
@media (max-width:740px) {
  .casino-auth-layout { grid-template-columns:1fr; max-width:460px; gap:24px; }
  .casino-auth-intro .entry-back { margin-bottom:20px; }
  .casino-auth-intro h1 { font-size:3rem; }
  .casino-auth-intro .entry-intro { margin:16px 0; }
  .casino-mark { width:62px; height:62px; font-size:40px; margin-bottom:16px; }
  .casino-auth-card { padding:22px; }
}

/* ---------- Casino : interface joueur / équipe (jamais de ressource Personnel) ---------- */
.casino-panel { --casino-gold:#ddbf81; --casino-muted:#a9a4a0; min-height:100vh; color:#ede8dd; display:grid; grid-template-columns:244px minmax(0,1fr); background:linear-gradient(155deg,#171719,#101012 70%); font-family:var(--body); }
.casino-panel * { box-sizing:border-box; }
.casino-side { padding:29px 18px 22px; background:#121214; border-right:1px solid #302e2c; display:flex; flex-direction:column; gap:20px; min-height:100vh; }
.casino-brand { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:6px 10px 25px; border-bottom:1px solid #302e2c; }
.casino-brand>span { width:43px; height:43px; border-radius:12px; display:grid; place-items:center; border:1px solid #594b30; background:#272218; color:var(--casino-gold); font-size:29px; }
.casino-brand strong { color:#ede2cf; font-size:23px; font-family:var(--display); letter-spacing:.08em; }
.casino-brand small { width:100%; padding-left:53px; margin-top:-7px; font-size:9px; letter-spacing:.18em; color:var(--casino-muted); }
.casino-side-title { padding:9px 12px 0; color:#85817a; letter-spacing:.17em; font-size:10px; font-weight:700; }
.casino-navigation { display:grid; gap:6px; }
.casino-nav-item { border:1px solid transparent; width:100%; display:flex; gap:15px; align-items:center; text-align:left; border-radius:9px; background:transparent; color:#aea9a0; font-weight:600; padding:12px 14px; }
.casino-nav-item span { color:#9e937d; width:23px; text-align:center; font-size:21px; }
.casino-nav-item:hover,.casino-nav-item.active { background:#28241e; color:#f7e8c6; border-color:#615035; }
.casino-nav-item.active span { color:var(--casino-gold); }
.casino-side-footer { margin-top:auto; display:grid; gap:6px; padding-top:16px; border-top:1px solid #302e2c; }
.casino-side-footer button { border:0; background:transparent; text-align:left; color:#aaa39a; font-size:13px; padding:10px 12px; }
.casino-side-footer button:hover { color:#ffdfa3; }
.casino-workspace { min-width:0; }
.casino-topbar { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:24px clamp(20px,4vw,54px); border-bottom:1px solid #35302a; background:#171619; }
.casino-top-eyebrow,.casino-eyebrow { display:block; font-size:10px; letter-spacing:.2em; font-weight:700; color:var(--casino-gold); margin-bottom:5px; }
.casino-topbar h2 { font-size:2rem; color:#f3ebdb; }
.casino-top-right { display:flex; align-items:center; gap:20px; }
.casino-top-balance { color:var(--casino-gold); background:#242019; border:1px solid #564834; border-radius:8px; padding:9px 13px; font-weight:700; white-space:nowrap; }
.casino-account-chip { display:flex; gap:12px; align-items:center; border:0; background:none; text-align:left; color:#e9e2d5; padding:0; }
.casino-account-chip strong,.casino-account-chip small { display:block; }
.casino-account-chip small { font-size:11px; color:#aaa39a; }
.casino-avatar { width:42px; height:42px; border-radius:50%; background:#3c3120; border:1px solid #736040; color:#f6dfab; display:grid; place-items:center; font-size:20px; font-weight:700; }
.casino-main { padding:35px clamp(20px,4vw,54px) 80px; max-width:1500px; margin:0 auto; }
.casino-hero { border:1px solid #5a4b32; border-radius:16px; min-height:210px; padding:clamp(25px,4vw,46px); display:flex; justify-content:space-between; align-items:center; gap:20px; background:radial-gradient(circle at 92% 38%,#42351e 0,transparent 45%),linear-gradient(110deg,#2b241c,#1a1919); }
.casino-hero-kicker { letter-spacing:.23em; font-size:10px; color:var(--casino-gold); font-weight:800; }
.casino-hero h1 { font-size:clamp(2.3rem,4vw,3.7rem); margin:9px 0 11px; overflow-wrap:anywhere; }
.casino-hero p { color:#c1b8a8; }
.casino-hero-symbol { font-size:clamp(6rem,14vw,10rem); color:#d9b66f; opacity:.4; line-height:1; }
.casino-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin:24px 0 35px; }
.casino-metric { border:1px solid #39332d; border-radius:12px; min-width:0; background:#1c1b1c; padding:21px; }
.casino-metric>span,.casino-metric>small { display:block; color:#a8a29a; font-size:12px; }
.casino-metric>strong { display:block; margin-top:13px; color:#e8d5ad; font:800 clamp(1.5rem,2.6vw,2.25rem)/1.1 var(--display); overflow-wrap:anywhere; }
.casino-metric>small { margin-top:8px; }
.casino-section-heading { margin:25px 0 21px; }
.casino-section-heading h2,.casino-data-card h2 { font-size:1.8rem; color:#f3ebdd; margin:0 0 7px; }
.casino-section-heading p { color:#a9a29a; }
.casino-game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.casino-game-card { background:linear-gradient(155deg,#28231c,#19191b 70%); border:1px solid #484037; border-radius:14px; padding:25px; min-height:245px; display:flex; flex-direction:column; align-items:start; }
.casino-game-icon { display:grid; place-items:center; font-size:36px; border:1px solid #665235; background:#312819; border-radius:12px; width:58px; height:58px; color:#e2bc7b; margin-bottom:20px; }
.casino-game-card small { color:#a8a094; font-size:10px; letter-spacing:.14em; }
.casino-game-card h3 { font-size:1.7rem; margin:9px 0; }
.casino-game-card p { color:#a8a29a; font-size:13px; margin-bottom:18px; }
.casino-coming { display:inline-block; margin-top:auto; border:1px solid #6e5839; color:#dfbd7a; border-radius:30px; padding:5px 12px; font-size:12px; }
.casino-page-head { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:25px; }
.casino-page-head h1 { font-size:clamp(2.3rem,4.5vw,3.4rem); margin:7px 0 8px; }
.casino-page-head p:not(.casino-eyebrow) { color:#a9a29a; }
.casino-bank-card { border-radius:16px; border:1px solid #665439; padding:36px; margin-bottom:26px; background:radial-gradient(circle at top right,#493b24,#242019 60%,#181819); display:grid; gap:14px; }
.casino-bank-card>span { font-size:11px; letter-spacing:.2em; color:#cdb78e; }
.casino-bank-card>strong { font:800 clamp(3.1rem,7vw,5.5rem)/1 var(--display); color:#f0d59c; overflow-wrap:anywhere; }
.casino-bank-card>small { color:#b9b0a3; }
.casino-data-card { padding:24px; border:1px solid #39332d; background:#1c1b1d; border-radius:14px; margin:24px 0; min-width:0; }
.casino-data-card h2 { margin-bottom:19px; }
.casino-table-wrap { width:100%; overflow-x:auto; }
.casino-table { width:100%; border-collapse:collapse; white-space:nowrap; }
.casino-table th { padding:13px; font-size:12px; color:#a9a49c; border-bottom:1px solid #49413a; }
.casino-table td { padding:14px 13px; color:#e4ded2; border-bottom:1px solid #35302e; }
.casino-table tbody tr:hover { background:#242021; }
.casino-table .casino-id,.casino-table .casino-amount { color:#dfc28a; font-weight:700; }
.casino-positive { color:#96d1a6 !important; font-weight:700; }
.casino-negative { color:#e9968c !important; font-weight:700; }
.casino-inline-meta { display:block; margin-top:4px; color:#8f8a84; font-size:11px; }
.casino-empty,.casino-empty-search { padding:25px 8px; color:#aaa29b; }
.casino-help { color:#9e9990; font-size:13px; line-height:1.6; margin-top:13px; }
.casino-identity { display:flex; align-items:center; gap:20px; padding:26px; border:1px solid #4a4033; border-radius:14px; background:#24201c; }
.casino-identity-avatar { display:grid; place-items:center; width:72px; height:72px; background:#3c301e; color:#efd8a5; border-radius:50%; font-size:32px; font-weight:700; }
.casino-identity h2 { font-size:2rem; }
.casino-identity p { color:#bdb5aa; margin-top:7px; }
.casino-role-pill { border:1px solid #665439; color:#e2c791; border-radius:28px; padding:9px 16px; font-size:13px; }
.casino-gold-button { color:#171411 !important; background:#e0c287 !important; border-color:#e0c287 !important; padding:12px 20px; border-radius:9px; font-weight:700; }
.casino-small-button { color:#e2c58e; background:#332c20; border-color:#6c5839; padding:7px 12px; border-radius:7px; white-space:nowrap; }
.casino-small-button:hover { border-color:#e2c58e; }
.casino-subtle { color:#85817a; }
.casino-list-top { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.casino-list-top input { width:min(100%,380px); border-radius:8px; background:#151416; }
.casino-loading { grid-column:1/-1; margin:auto; color:#e0c287; padding:40px; }
.casino-error-panel { width:min(500px,100%); background:#1c1b1d; border-radius:13px; padding:32px; text-align:center; }
.casino-error-panel h2 { margin-bottom:12px; }
.casino-error-panel p { color:#c6b6ac; margin-bottom:25px; }
.casino-error-panel button { margin:6px; }
@media(max-width:1150px) {
  .casino-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .casino-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:820px) {
  .casino-panel { display:block; }
  .casino-side { min-height:0; padding:15px; gap:12px; }
  .casino-brand { padding-bottom:10px; }
  .casino-brand small { display:none; }
  .casino-side-title { display:none; }
  .casino-navigation { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .casino-nav-item { flex-direction:column; justify-content:center; gap:3px; font-size:12px; padding:10px 5px; }
  .casino-side-footer { display:flex; margin-top:0; padding:7px 0 0; }
  .casino-topbar { padding:16px 20px; }
}
@media(max-width:580px) {
  .casino-topbar { align-items:flex-start; }
  .casino-top-right { flex-direction:column; align-items:flex-end; gap:7px; }
  .casino-top-balance { font-size:12px; }
  .casino-account-chip small { display:none; }
  .casino-account-chip .casino-avatar { width:30px; height:30px; }
  .casino-main { padding:23px 15px 50px; }
  .casino-metrics { gap:9px; }
  .casino-metric { padding:15px 12px; }
  .casino-metric>strong { font-size:1.5rem; }
  .casino-game-grid { grid-template-columns:1fr; }
  .casino-hero-symbol { display:none; }
  .casino-data-card { padding:16px 10px; }
  .casino-bank-card { padding:25px; }
  .casino-identity { padding:16px; }
}

/* ---------- Casino : jeux jouables (Blackjack & Machine à sous) ---------- */
.casino-card-play { margin-top:auto; width:100%; text-align:center; }
.casino-game-page { max-width:1040px; margin:0 auto; }
.casino-game-heading { display:flex; align-items:center; gap:22px; margin-bottom:26px; flex-wrap:wrap; }
.casino-game-heading h1 { color:#f4ebd7; font-size:clamp(2.4rem,5vw,3.4rem); margin-top:6px; }
.casino-back-games { background:transparent; color:#e2c58e; border:1px solid #655237; border-radius:7px; padding:10px 14px; }
.casino-game-wallet { margin-left:auto; display:flex; align-items:center; gap:8px; padding:12px 19px; border:1px solid #655237; border-radius:12px; background:#292319; color:#ecd39a; }
.casino-game-wallet strong { font-size:1.2rem; }
.casino-game-intro { border:1px solid #52442c; border-radius:16px; padding:35px 25px; text-align:center; background:radial-gradient(ellipse at 50% 0%,#34301f,#1b1a19 72%); }
.casino-table-suit { color:#d8b876; font-size:65px; line-height:1; }
.casino-game-intro h2 { font-size:clamp(1.9rem,3vw,2.9rem); margin:12px 0; }
.casino-game-intro p { color:#b4ad9e; max-width:620px; margin:0 auto; }
.casino-bet-form { display:grid; grid-template-columns:minmax(180px,240px) 1fr auto; gap:14px; align-items:end; margin:22px 0; padding:19px; border:1px solid #443b30; background:#211f1d; border-radius:14px; }
.casino-bet-form label { color:#c4b8a1; }
.casino-bet-form input { margin-top:7px; background:#151515; border:1px solid #574a3b; border-radius:7px; color:#f4e7d1; }
.casino-stake-presets { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 1px; }
.casino-stake-presets button { border:1px solid #67553b; border-radius:8px; padding:10px 14px; background:#30291f; color:#ebd2a2; }
.casino-stake-presets button:hover { border-color:#dbbb7e; }
.casino-start-button { min-height:43px; white-space:nowrap; }
.casino-bet-form .casino-help { grid-column:1/-1; margin:0; }
.casino-blackjack-felt { background:radial-gradient(ellipse at center,#176548 0%,#104d37 55%,#0a3225 100%); border:8px solid #57422b; outline:2px solid #be9860; border-radius:170px 170px 50px 50px / 65px 65px 35px 35px; box-shadow:inset 0 0 0 3px #97794b,0 18px 48px rgba(0,0,0,.45); padding:32px clamp(15px,4vw,45px); min-height:430px; display:flex; flex-direction:column; gap:12px; }
.casino-blackjack-side { display:grid; justify-items:center; gap:10px; }
.casino-hand-label { display:flex; justify-content:center; align-items:center; gap:14px; color:#fbf1d8; font-size:15px; }
.casino-hand-label strong { font-size:18px; }
.casino-hand-label span { color:#e2ca8b; }
.casino-card-row { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; min-height:108px; }
.casino-playing-card { background:#fffaf0; color:#25211a; border:2px solid #eee5d8; width:69px; height:99px; border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:5px; font:bold 20px/1 Georgia,serif; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.casino-playing-card>span { font-size:33px; }
.casino-playing-card.red-suit { color:#b92c37; }
.casino-playing-card.hidden-card { background:repeating-linear-gradient(45deg,#392651 0 8px,#6a5185 8px 14px); color:#d9c98e; border:4px solid #ede6cc; justify-content:center; }
.casino-playing-card.hidden-card span { font-size:40px; }
.casino-felt-middle { display:grid; justify-items:center; gap:2px; margin:0 auto; border:2px solid rgba(241,217,167,.28); border-radius:50%; padding:7px 55px; text-align:center; color:#c9a86d; letter-spacing:.16em; font-size:12px; }
.casino-felt-middle small { font-size:9px; letter-spacing:.04em; }
.casino-felt-stake { text-align:center; color:#f2ddb1; font-size:13px; }
.casino-felt-stake strong { font-size:17px; }
.casino-game-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:20px 0; }
.casino-game-actions button { min-width:145px; padding:12px 20px; border-radius:9px; font-weight:700; }
.casino-round-result { display:grid; justify-items:center; gap:5px; text-align:center; padding:18px; margin:17px 0; border:1px solid #6a5938; border-radius:13px; background:#2d281c; }
.casino-round-result strong { font:800 2rem var(--display); color:#f4d79c; }
.casino-round-result span { color:#e8dcc4; }
.casino-round-result.lose { background:#2b1e1c; border-color:#6b453f; }
.casino-round-result.lose strong { color:#e3a49a; }
.casino-table-rules { display:grid; gap:6px; padding:18px 20px; border:1px solid #3d372e; border-radius:10px; background:#1e1c1b; color:#bcb4a9; line-height:1.55; font-size:12px; }
.casino-table-rules strong { color:#e6ce9d; font-size:14px; }
.casino-game-inline-error { min-height:1.5em; color:#f3a499; margin:12px 0; }
.casino-slot-machine { border:3px solid #ad8951; border-radius:20px; padding:24px; background:linear-gradient(150deg,#4d2b2e,#2c202a 56%,#19191d); box-shadow:0 15px 45px rgba(0,0,0,.3),inset 0 0 0 2px #655039; }
.casino-slot-header { display:grid; justify-items:center; gap:5px; color:#efcf8c; letter-spacing:.18em; font:800 clamp(1.2rem,3vw,2.2rem) var(--display); }
.casino-slot-header small { letter-spacing:.07em; color:#c3a99b; font:400 12px var(--body); }
.casino-reels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; max-width:680px; margin:27px auto 16px; }
.casino-reel { min-width:0; aspect-ratio:1/.95; display:grid; place-items:center; background:linear-gradient(#fffbef,#e8decb 50%,#faf4e8); border:5px solid #d2b984; border-radius:14px; box-shadow:inset 0 0 15px #b4a994; }
.casino-reel span { font-size:clamp(3.1rem,7vw,6.3rem); filter:drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.casino-slot-line { text-align:center; color:#f1d7a0; font-size:11px; letter-spacing:.13em; }
.casino-slot-paytable { padding:24px; border:1px solid #4a3d30; border-radius:14px; background:#211e1c; margin:20px 0; }
.casino-slot-paytable h2 { color:#f5e4c2; }
.casino-slot-paytable p { color:#aaa39b; margin:6px 0 17px; }
.casino-slot-paylist { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.casino-slot-paylist>div { border:1px solid #493c2e; border-radius:8px; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; background:#2b251f; }
.casino-slot-paylist>div span { font-size:18px; }
.casino-slot-paylist>div strong { color:#e8cc93; }
@media(max-width:900px) {
  .casino-bet-form { grid-template-columns:1fr; }
  .casino-bet-form label { max-width:350px; }
  .casino-bet-form .casino-help { grid-column:auto; }
}
@media(max-width:560px) {
  .casino-game-wallet { margin:0; width:100%; justify-content:center; }
  .casino-blackjack-felt { padding:20px 7px; border-width:5px; border-radius:65px 65px 24px 24px; }
  .casino-playing-card { width:54px; height:78px; font-size:17px; }
  .casino-playing-card>span { font-size:26px; }
  .casino-card-row { min-height:83px; gap:3px; }
  .casino-felt-middle { padding:5px 20px; }
  .casino-game-actions button { min-width:110px; padding:10px; }
  .casino-reels { gap:5px; }
  .casino-slot-machine { padding:14px 9px; }
  .casino-slot-paylist { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@keyframes casino-reel-appear { from {transform:translateY(-12px) scale(.94);opacity:.3;filter:blur(4px);} to {transform:translateY(0) scale(1);opacity:1;filter:none;} }
.casino-reel span { animation:casino-reel-appear .5s ease-out both; }
.casino-reel:nth-child(2) span { animation-delay:.12s; }
.casino-reel:nth-child(3) span { animation-delay:.24s; }
@keyframes casino-card-appear { from {transform:translateY(9px) rotate(-3deg);opacity:0;} to {transform:translateY(0) rotate(0);opacity:1;} }
.casino-playing-card { animation:casino-card-appear .28s ease-out both; }
@media(prefers-reduced-motion:reduce) {
 .casino-reel span,.casino-playing-card {animation:none !important;}
}

/* Réglages des probabilités - exclusivement visibles par les admins du Casino. */
.casino-odds-settings { display:grid; gap:18px; }
.casino-odds-settings .casino-data-card { display:grid; gap:16px; }
.casino-odds-settings .casino-data-card h2 { margin-bottom:0; }
.casino-odds-settings label { display:grid; gap:8px; max-width:310px; color:#ded2bb; }
.casino-odds-settings label input { background:#161719; border:1px solid #655038; border-radius:8px; padding:12px 14px; color:#f9e7c0; }
.casino-odds-settings label input:focus { outline:2px solid #d4ae72; }
.casino-odds-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.casino-odds-hint { color:#d7bd89; line-height:1.6; font-size:13px; }
.casino-odds-preview { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; }
.casino-odds-preview>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:12px; border:1px solid #4f4533; background:#26221e; border-radius:8px; font-size:13px; }
.casino-odds-preview strong { color:#efd19a; }
.casino-settings-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.casino-settings-actions .casino-game-inline-error { margin:0; }
.casino-odds-notice { margin:18px 0; padding:15px 18px; border:1px solid #80683c; border-radius:10px; background:#2b271e; color:#e7d8be; line-height:1.6; }
.casino-odds-notice strong { color:#f6d797; }
.casino-odds-reels { display:grid; gap:10px; padding:12px 0; color:#dbc39c; font-size:13px; }
.casino-odds-reels>div { display:flex; gap:9px; flex-wrap:wrap; }
.casino-odds-reels span { display:inline-block; padding:7px 10px; background:#2c251e; border:1px solid #55442e; border-radius:7px; color:#f2dfbd; }
@media(max-width:560px) { .casino-odds-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .casino-odds-preview { grid-template-columns:1fr; } }

/* Casino — badge VIP et commandes de gestion */
.casino-vip-badge {
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  color:#f7dc9f;background:linear-gradient(130deg,#4b3920,#2a241e);
  border:1px solid #9e7b40;border-radius:99px;
  padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;
}
.casino-row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:165px}
.casino-row-actions .casino-small-button{white-space:nowrap}
.casino-odds-settings h3{color:#edd09d;font-size:1.1rem;margin:2px 0 0}
.casino-bet-form [data-casino-low-balance]{color:#eda39c}
@media(max-width:700px){.casino-row-actions{min-width:0}.casino-vip-badge{font-size:11px}}

/* ---------- Avantages VIP : suivi du bonus et pause personnalisée ---------- */
.casino-vip-settings { margin-top: 22px; display: grid; gap: 14px; }
.casino-vip-enable { margin-top: 16px; display: flex; align-items: center; gap: 12px; color: var(--bone); cursor: pointer; }
.casino-vip-enable input[type="checkbox"] { width: 19px; height: 19px; flex: 0 0 auto; accent-color: #d9bc86; }
.casino-vip-rewards { margin-bottom: 20px; border-color: rgba(217,188,134,.4); }
.casino-vip-rewards-top { display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap; }
.casino-vip-rewards > p { margin-top:12px; }
.casino-vip-rewards-data { display:flex; gap:25px; margin-top:16px; flex-wrap:wrap; }
.casino-vip-rewards-data > div { display:grid; gap:5px; min-width:180px; }
.casino-vip-rewards-data small { color:var(--muted); }
.casino-vip-rewards-data strong { color:var(--bone); font-size:1rem; }

/* Casino : modification de la mise à la table, sans retour à la liste des jeux. */
.casino-next-stake {
  margin:18px 0 14px;
  padding:17px 19px;
  border:1px solid #6d5536;
  border-radius:13px;
  background:linear-gradient(115deg,#25211b,#1c1b1b);
}
.casino-next-stake-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:13px;
}
.casino-next-stake-title>div {display:grid;gap:2px}
.casino-next-stake-title strong {color:#f2d6a2;font-size:17px}
.casino-next-stake-title small {color:#a99f8e}
.casino-next-stake-current {color:#cfc2a5;font-size:13px}
.casino-next-stake-inputs {display:grid;grid-template-columns:minmax(170px,235px) 1fr;align-items:end;gap:15px}
.casino-next-stake-inputs label {color:#c4b8a1}
.casino-next-stake-inputs input {margin-top:6px;background:#151515;color:#f4e7d1;border:1px solid #70593b;border-radius:7px}
.casino-next-stake .casino-help {margin-top:11px;color:#baaf9b;font-size:12px}
.casino-new-round {display:block;margin:16px auto 20px;min-width:230px}

/* Blackjack : commandes regroupées en haut, avant le tapis. */
.casino-blackjack-controls {
  margin:0 0 22px;
  padding:14px 16px;
  border:1px solid #6d5536;
  border-radius:13px;
  background:linear-gradient(115deg,#25211b,#1c1b1b);
}
.casino-blackjack-controls-top {display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.casino-blackjack-controls-top .casino-new-round {margin:0;min-height:44px}
.casino-blackjack-controls-top .casino-game-actions {margin:0;justify-content:flex-start}
.casino-blackjack-controls-top .casino-round-result {flex:1 1 230px;min-width:0;margin:0;padding:8px 14px;text-align:left;justify-items:start;gap:2px}
.casino-blackjack-controls-top .casino-round-result strong {font-size:1.35rem}
.casino-blackjack-controls-top .casino-round-result span {font-size:13px}
.casino-blackjack-controls .casino-next-stake {margin:12px 0 0;padding:12px 0 0;border:0;border-top:1px solid #4d402e;border-radius:0;background:transparent}
.casino-blackjack-controls .casino-next-stake-title {margin-bottom:8px}
.casino-blackjack-controls .casino-next-stake-inputs {grid-template-columns:minmax(150px,210px) 1fr;gap:10px}
.casino-blackjack-controls .casino-stake-presets button {padding:8px 12px;min-height:40px}
.casino-blackjack-controls .casino-next-stake .casino-help {margin-top:8px}
.casino-blackjack-controls .casino-bet-form {margin:0;padding:0;border:0;background:transparent}
.casino-blackjack-controls .casino-game-inline-error {margin:10px 0 0}
.casino-blackjack-controls .casino-game-inline-error:empty {display:none}
@media(max-width:680px) {
  .casino-blackjack-controls {padding:12px}
  .casino-blackjack-controls-top .casino-new-round {width:100%;min-width:0}
  .casino-blackjack-controls-top .casino-game-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}
  .casino-blackjack-controls-top .casino-game-actions button {min-width:0;min-height:44px;padding:10px 6px;font-size:13px}
  .casino-blackjack-controls .casino-next-stake-inputs {grid-template-columns:minmax(0,1fr)}
}

/* Suspense visuel : aucune de ces animations ne change le tirage serveur. */
@keyframes casino-card-deal {
  0% {opacity:0;transform:translate(66px,-45px) rotate(12deg) scale(.87);filter:blur(3px)}
  65% {opacity:1;transform:translate(-4px,3px) rotate(-2deg) scale(1.04);filter:none}
  100% {opacity:1;transform:translate(0,0) rotate(0) scale(1);filter:none}
}
@keyframes casino-card-flip {
  0% {opacity:.25;transform:perspective(600px) rotateY(180deg) scale(.9)}
  50% {opacity:1;transform:perspective(600px) rotateY(90deg) scale(.96)}
  100% {opacity:1;transform:perspective(600px) rotateY(0) scale(1)}
}
.casino-playing-card.casino-card-deal {animation:casino-card-deal 580ms cubic-bezier(.22,.84,.26,1) both;animation-delay:var(--casino-card-delay,0ms)}
.casino-playing-card.casino-card-flip {animation:casino-card-flip 780ms ease-in-out both;animation-delay:var(--casino-card-delay,0ms);backface-visibility:hidden}
@keyframes casino-reel-jitter {
  0% {transform:translateY(-9px);filter:blur(2.4px)}
  50% {transform:translateY(11px);filter:blur(1.8px)}
  100% {transform:translateY(-9px);filter:blur(2.4px)}
}
.casino-reel.casino-reel-rolling span {animation:casino-reel-jitter 95ms linear infinite!important}
@keyframes casino-reel-stop {
  0% {box-shadow:inset 0 0 28px #b4a994;transform:scale(1.025)}
  55% {box-shadow:inset 0 0 23px #ffdf88,0 0 18px rgba(248,191,79,.35);transform:scale(.96)}
  100% {box-shadow:inset 0 0 15px #b4a994;transform:scale(1)}
}
.casino-reel.casino-reel-stopped {animation:casino-reel-stop 440ms ease-out}
@keyframes casino-result-pop {
  0% {opacity:0;transform:translateY(15px) scale(.96)}
  65% {opacity:1;transform:translateY(-3px) scale(1.012)}
  100% {opacity:1;transform:translateY(0) scale(1)}
}
.casino-round-result.casino-result-reveal {animation:casino-result-pop 420ms ease-out both}
.casino-game-resolving button:not(.casino-back-games) {pointer-events:none;opacity:.65}
.casino-game-resolving [name=stake] {pointer-events:none}
@media(max-width:680px) {
  .casino-next-stake-inputs {grid-template-columns:1fr}
  .casino-next-stake-inputs label {max-width:100%}
  .casino-next-stake {padding:14px}
  .casino-next-stake-current {font-size:12px}
  .casino-new-round {width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce) {
  .casino-playing-card.casino-card-deal,.casino-playing-card.casino-card-flip,
  .casino-reel.casino-reel-rolling span,.casino-reel.casino-reel-stopped,
  .casino-round-result.casino-result-reveal {animation:none!important}
}

/* Les symboles révélés restent nets après l’arrêt du rouleau. */
.casino-reel.casino-reel-stopped span {animation:none!important;filter:none!important;transform:none!important}

/* ---------- Casino : outils joueur et administration de l'économie ---------- */
.casino-extra-actions {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:15px}
.casino-extra-actions button {border:1px solid #685739;border-radius:8px;color:#e9d5aa;background:#28231e;padding:9px 14px;min-height:38px}
.casino-extra-actions .casino-gold-button {background:#e0c38e;color:#15100a}
.casino-extra-form {display:grid;gap:16px;margin:16px 0 24px}
.casino-extra-form>label {max-width:340px}
.casino-extra-form input {max-width:100%;background:#171719;color:#eee4d2;border:1px solid #5e5141;border-radius:7px;padding:11px}
.casino-extra-form .casino-gold-button {max-width:370px}
.casino-extra-bars {display:grid;gap:9px;margin:15px 0}
.casino-extra-bars>div {display:grid;grid-template-columns:60px minmax(90px,1fr) minmax(90px,200px);gap:12px;align-items:center;font-size:13px;color:#c9bca6}
.casino-extra-bar-track {height:13px;background:#282624;border-radius:99px;overflow:hidden}
.casino-extra-bar-track>span {display:block;min-height:100%;background:linear-gradient(90deg,#917646,#e5c68c);border-radius:99px}
.casino-extra-bars strong {font-weight:600;text-align:right;overflow-wrap:anywhere}
.casino-data-card + .casino-data-card {margin-top:17px}
.casino-main .casino-data-card {overflow-wrap:anywhere}
.casino-data-card .casino-table-wrap {max-width:100%}
.casino-side {overflow-y:auto}
@media (max-width:700px) {
  .casino-navigation {grid-template-columns:repeat(3,minmax(0,1fr))}
  .casino-extra-bars>div {grid-template-columns:40px minmax(60px,1fr) minmax(70px,105px);gap:5px;font-size:11px}
  .casino-extra-actions {flex-direction:column;align-items:stretch}
  .casino-extra-actions button {width:100%}
}

/* ECLIPSE CASINO — édition prestige */
:root{--brass:#d9b45e;--brass-dim:#927238;--bone:#f5eddb;--radius:12px}
.entry-screen,.casino-screen{background:radial-gradient(ellipse at 50% 0%,#30230e 0%,transparent 48%),linear-gradient(140deg,#11100d,#050505 75%)}
.casino-panel{--casino-gold:#e7c477;display:flex;flex-direction:column;background:radial-gradient(ellipse at 75% 0%,#241b0c,transparent 45%),#080808}
.casino-side{position:sticky;top:0;z-index:15;min-height:0;overflow:visible;display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px clamp(14px,3vw,40px);border-right:0;border-bottom:1px solid #6b5127;background:rgba(9,9,9,.97);backdrop-filter:blur(20px)}
.casino-brand{padding:0 18px 0 0;border:0;flex-wrap:nowrap;white-space:nowrap;flex-shrink:0}.casino-brand strong{font-size:22px;letter-spacing:.07em;color:#f2d594}.casino-brand small,.casino-side-title{display:none}
.casino-navigation{display:flex;align-items:center;gap:3px;overflow-x:auto;scrollbar-width:thin;flex:1}.casino-nav-item{width:auto;flex:none;white-space:nowrap;padding:9px 11px;font-size:12px;gap:6px}.casino-nav-item span{width:auto;font-size:15px}.casino-side-footer{margin:0;padding:0;border:0;display:flex;flex-shrink:0;gap:2px}.casino-side-footer button{font-size:11px;padding:8px}
.casino-workspace{width:100%}.casino-topbar{background:rgba(17,15,11,.7)}.casino-main{width:100%;max-width:1540px}.casino-hero{background:radial-gradient(circle at 90% 30%,#6c4b19 0%,transparent 45%),linear-gradient(115deg,#2b2113,#0d0d0d);box-shadow:0 18px 60px #0007}.casino-game-card,.casino-data-card,.casino-metric{box-shadow:0 12px 30px #0004;transition:transform .2s,border-color .2s}.casino-game-card:hover{transform:translateY(-3px);border-color:#ac884a}.casino-gold-button{background:linear-gradient(120deg,#a77c32,#f1d68b,#bd9144)!important;border-color:#d4ad62!important}.casino-avatar-image{object-fit:cover;display:block}.casino-identity-avatar.casino-avatar-image{width:72px;height:72px;border-radius:50%;border:2px solid #d9b45e}.casino-avatar.casino-avatar-image{width:42px;height:42px;border-radius:50%;border:1px solid #d9b45e}.casino-shop-kind{font-size:11px;text-transform:uppercase;color:#c9a86c}.casino-shop-swatch{width:30px;height:8px;background:var(--item-color);border-radius:20px;margin:8px 0}.casino-custom-profile form{display:grid;gap:12px;max-width:520px}
@media(max-width:1050px){.casino-side{flex-wrap:wrap}.casino-navigation{order:3;width:100%;flex-basis:100%}.casino-brand strong{font-size:19px}.casino-side-footer{margin-left:auto}}
@media(max-width:600px){.casino-side{padding:10px}.casino-navigation{display:flex;grid-template-columns:none}.casino-nav-item{flex-direction:row;padding:9px;font-size:12px}.casino-side-footer button{font-size:10px}.casino-brand>span{width:34px;height:34px;font-size:22px}.casino-topbar{flex-wrap:wrap}.casino-game-grid{grid-template-columns:1fr}}
/* Eclipse Casino — Boutique Prestige */
.casino-shop-hero{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:36px;border:1px solid #a48648;border-radius:20px;background:radial-gradient(circle at 85% 25%,#534020 0%,transparent 48%),linear-gradient(125deg,#0c0b0b,#231c12);margin:22px 0 26px;box-shadow:0 18px 55px #0006}
.casino-shop-hero small,.casino-shop-hero span{color:#d5b979;letter-spacing:.2em;font-size:11px}.casino-shop-hero h2{font-size:clamp(2rem,5vw,4rem);margin:12px 0;color:#f7e4b7}.casino-shop-hero p{color:#bbb0a0}.casino-shop-hero>div:last-child{text-align:right}.casino-shop-hero strong{display:block;color:#f2cf85;font-size:clamp(1.6rem,3vw,2.8rem)}
.casino-shop-toolbar{display:grid;gap:16px;margin-bottom:24px}.casino-shop-toolbar input{max-width:480px;border-radius:12px;background:#171512;border-color:#5a4b31}.casino-shop-filters{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px}.casino-shop-filters button{white-space:nowrap;border-radius:50px;background:#1e1b16;border:1px solid #55472f;color:#c9b995}.casino-shop-filters button.selected{background:#d4af6c;color:#17120a;border-color:#f1d394}
.casino-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px}.casino-shop-item{border:1px solid #54452f;border-radius:17px;overflow:hidden;background:linear-gradient(150deg,#292219,#121212);transition:transform .2s,border-color .2s}.casino-shop-item:hover{transform:translateY(-5px);border-color:var(--item-color)}.casino-shop-preview{height:158px;display:grid;place-items:center;background:radial-gradient(circle at center,color-mix(in srgb,var(--item-color) 24%,#111) 0%,#100f10 72%);border-bottom:1px solid #51432e}.casino-shop-preview span{display:grid;place-items:center;width:94px;height:94px;border:2px solid var(--item-color);border-radius:22px;font-size:57px;color:var(--item-color);text-shadow:0 0 26px var(--item-color);box-shadow:0 0 34px color-mix(in srgb,var(--item-color) 20%,transparent)}.casino-shop-details{padding:20px}.casino-shop-details small{color:var(--item-color);letter-spacing:.13em}.casino-shop-details h3{margin:10px 0;font-size:1.65rem}.casino-shop-details p{min-height:44px;color:#b9ac98;font-size:13px}.casino-shop-details>strong{display:block;color:#f5dba6;margin:12px 0;font-size:19px}.casino-shop-buttons{display:flex;gap:8px;flex-wrap:wrap}.casino-shop-buttons button{flex:1;padding:9px}.casino-preview-large{height:240px;grid-column:1/-1}.casino-preview-large span{width:140px;height:140px;font-size:90px}.casino-shop-admin{margin-top:35px;border-color:#937644}.casino-shop-admin input,.casino-shop-admin select{background:#131212}.casino-level-card{margin:24px 0;padding:24px;border:1px solid #9a783e;border-radius:16px;background:linear-gradient(110deg,#211a11,#111)}.casino-level-card small{color:#dfbd7b;letter-spacing:.17em}.casino-level-card h2{font-size:2.5rem;color:#f6d99f;margin:6px 0}.casino-level-card p{color:#bcb1a0}.casino-level-track{height:12px;border-radius:20px;background:#30291f;overflow:hidden;margin-top:18px}.casino-level-track span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#9a712d,#f4d28b)}.casino-equipped-collection{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.casino-equipped-collection>div{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--item-color);border-radius:12px}.casino-equipped-collection span{color:var(--item-color);font-size:24px}.casino-equipped-collection button{padding:5px 9px}.casino-theme-equipped .casino-blackjack-felt{border-color:var(--owned-theme);outline-color:var(--owned-theme)}.casino-theme-equipped .casino-slot-machine{border-color:var(--owned-theme)}.casino-cards-equipped .casino-playing-card.hidden-card{background:repeating-linear-gradient(45deg,#171318 0 8px,var(--owned-cards) 8px 15px);border-color:var(--owned-cards)}.casino-profile-equipped .casino-identity h2{color:var(--owned-profile);text-shadow:0 0 14px color-mix(in srgb,var(--owned-profile) 35%,transparent)}
@media(max-width:600px){.casino-shop-hero{padding:22px}.casino-shop-hero>div:last-child{text-align:left}.casino-shop-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}.casino-shop-details{padding:14px}.casino-shop-preview{height:125px}}

/* Prestige : les équipements sont appliqués au panneau et aux jeux */
.casino-price-editor{display:grid;gap:8px;margin:16px 0 24px}
.casino-price-row{display:grid;grid-template-columns:minmax(0,1fr) 145px auto;align-items:center;gap:12px;padding:10px;border:1px solid #55442c;border-radius:10px;background:#171511}
.casino-price-row span{overflow-wrap:anywhere;color:#f2ddb2}
.casino-price-row input{width:100%;background:#101010;border:1px solid #80663b;border-radius:7px;color:#fff;padding:9px}

.casino-profile-equipped .casino-identity h2,.casino-profile-equipped .casino-account-chip strong{color:var(--owned-profile)!important}
.casino-theme-equipped .casino-blackjack-felt{border-color:var(--owned-theme)!important;outline-color:var(--owned-theme)!important;box-shadow:inset 0 0 0 3px var(--owned-theme),0 18px 48px #0009}
.casino-theme-equipped .casino-slot-machine,.casino-theme-equipped .casino-game-intro{border-color:var(--owned-theme)!important;box-shadow:0 0 28px color-mix(in srgb,var(--owned-theme) 35%,transparent)}
.casino-cards-equipped .casino-playing-card.hidden-card{background:repeating-linear-gradient(45deg,#101014 0 8px,var(--owned-cards) 8px 16px)!important;border-color:var(--owned-cards)!important}
@media(max-width:600px){.casino-price-row{grid-template-columns:1fr 100px}.casino-price-row button{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){}

/* Eclipse Casino — immersion premium : effets animés et thèmes complets */
.casino-panel{--lux:var(--owned-theme,#d9b45e);--lux-soft:color-mix(in srgb,var(--lux) 24%,#121015)}
.casino-theme-equipped .casino-workspace{background:radial-gradient(ellipse at 85% 5%,color-mix(in srgb,var(--lux) 17%,transparent),transparent 55%),#08090b}
.casino-theme-equipped .casino-side{border-bottom-color:var(--lux);box-shadow:0 3px 35px color-mix(in srgb,var(--lux) 12%,transparent)}
.casino-theme-equipped .casino-brand>span,.casino-theme-equipped .casino-game-icon{color:var(--lux);border-color:var(--lux);background:var(--lux-soft)}
.casino-theme-equipped .casino-nav-item.active,.casino-theme-equipped .casino-nav-item:hover{color:var(--lux);border-color:var(--lux);background:var(--lux-soft)}
.casino-theme-equipped .casino-topbar{border-bottom-color:color-mix(in srgb,var(--lux) 40%,#181818);background:linear-gradient(95deg,#0c0b0c,var(--lux-soft))}
.casino-theme-equipped .casino-top-eyebrow,.casino-theme-equipped .casino-eyebrow,.casino-theme-equipped .casino-hero-kicker{color:var(--lux)}
.casino-theme-equipped .casino-hero{border-color:var(--lux);background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--lux) 36%,#141114),transparent 62%),linear-gradient(110deg,#111012,#080809)}
.casino-theme-equipped .casino-hero-symbol{color:var(--lux)}
.casino-theme-equipped .casino-metric,.casino-theme-equipped .casino-data-card,.casino-theme-equipped .casino-game-card,.casino-theme-equipped .casino-game-intro,.casino-theme-equipped .casino-slot-paytable{border-color:color-mix(in srgb,var(--lux) 46%,#252328);background:linear-gradient(145deg,var(--lux-soft),#111114 75%)}
.casino-theme-equipped .casino-metric strong,.casino-theme-equipped .casino-bank-card strong,.casino-theme-equipped .casino-section-heading h2,.casino-theme-equipped .casino-slot-paylist strong{color:var(--lux)}
.casino-theme-equipped .casino-bank-card{border-color:var(--lux);background:radial-gradient(circle at top right,color-mix(in srgb,var(--lux) 35%,#141414),#121113 70%)}
.casino-theme-equipped .casino-gold-button{background:linear-gradient(110deg,color-mix(in srgb,var(--lux) 70%,#171717),var(--lux),color-mix(in srgb,var(--lux) 75%,#fff))!important;border-color:var(--lux)!important;color:#090909!important}
.casino-theme-equipped .casino-blackjack-felt{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--lux) 32%,#133f32),color-mix(in srgb,var(--lux) 12%,#0c2823) 75%,#091311)!important}
.casino-theme-equipped .casino-slot-machine{background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--lux) 40%,#181018),#100e12 75%)!important}
.casino-theme-equipped .casino-slot-header,.casino-theme-equipped .casino-felt-middle,.casino-theme-equipped .casino-game-heading h1{color:var(--lux)}
.casino-theme-equipped .casino-reel{border-color:var(--lux);box-shadow:0 0 25px color-mix(in srgb,var(--lux) 24%,transparent),inset 0 0 20px #a9a197}
.casino-theme-equipped .casino-round-result.win{border-color:var(--lux);background:var(--lux-soft)}
.casino-cards-equipped .casino-playing-card.hidden-card{position:relative;background:repeating-conic-gradient(from 45deg,var(--owned-cards) 0% 12.5%,#101018 12.5% 25%) 50%/22px 22px!important;box-shadow:inset 0 0 0 4px #16141a,inset 0 0 0 6px var(--owned-cards),0 8px 24px #0008}
.casino-cards-equipped .casino-playing-card.hidden-card span{border:2px solid var(--owned-cards);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;background:#111a;color:var(--owned-cards);text-shadow:0 0 12px var(--owned-cards)}
/* ---------- Eclipse Casino : logo blanc et or, identité publique ---------- */
/* Le fichier /logo.png et le style de l'espace Personnel restent indépendants. */
.eclipse-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  aspect-ratio: 3 / 2;
}
.eclipse-logo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  user-select: none;
}
.eclipse-logo--welcome {
  width: min(360px, 100%);
  margin: 0 auto 16px;
}
.eclipse-welcome { padding: 28px 20px 40px; }
.eclipse-welcome .entry-content { max-width: 900px; }
.eclipse-welcome h1 { color: #f7eedc; font-size: clamp(2.8rem, 6vw, 4.3rem); }
.eclipse-welcome .entry-intro { margin: 14px auto 26px; }
.eclipse-welcome .entry-choice { min-height: 205px; }
.eclipse-welcome .entry-choice[data-entry="casino"] {
  border-color: #a38043;
  background: linear-gradient(145deg, #2a2317, #11100d 80%);
}
.eclipse-logo--auth { width: min(360px, 100%); margin: 0 0 20px; }
.casino-auth-intro > .eclipse-logo--auth ~ h1 {
  font-size: clamp(2.7rem, 4.8vw, 4.2rem);
  line-height: 1.08;
  color: #faf0d9;
}
.casino-auth-intro:has(.eclipse-logo--auth) .entry-back { margin-bottom: 24px; }
.casino-auth-intro:has(.eclipse-logo--auth) .entry-intro { margin-top: 16px; }

/* Deux rangées : l'identité et le compte, puis tous les onglets horizontaux. */
.casino-side.eclipse-casino-header {
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 8px;
  padding-bottom: 10px;
  overflow: visible;
}
.eclipse-casino-header .casino-brand.eclipse-brand {
  gap: 12px;
  padding: 0;
  min-width: 0;
}
.eclipse-logo-link {
  display: block;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  line-height: 0;
}
.eclipse-logo-link:hover { background: transparent; }
.eclipse-logo-link:focus-visible { outline: 2px solid #e7c477; outline-offset: 4px; }
.eclipse-logo--header { width: 112px; }
.eclipse-brand-copy { display: grid; gap: 6px; }
.eclipse-brand .eclipse-brand-copy strong { color: #f4e8ce; font-size: 22px; line-height: 1; }
.eclipse-brand .eclipse-brand-copy small {
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  color: #c6a66e;
  font-size: 9px;
  letter-spacing: .25em;
}
.eclipse-casino-header .casino-side-footer { margin-left: auto; }
.eclipse-casino-header .casino-navigation {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid #372e20;
  overscroll-behavior-x: contain;
}
.casino-hero > div:first-child { min-width: 0; flex: 1; }
.eclipse-hero-mark { flex: 0 1 300px; width: 34%; max-width: 300px; }
.eclipse-logo--hero { width: 100%; }

@media (max-width: 740px) {
  .eclipse-logo--auth { width: min(260px, 100%); margin: 0 auto 20px; }
  .eclipse-hero-mark { display: none; }
}
@media (max-width: 600px) {
  .eclipse-logo--welcome { width: min(280px, 100%); margin-bottom: 12px; }
  .eclipse-welcome { padding: 20px 16px 32px; }
  .eclipse-welcome .entry-choice { min-height: 155px; }
  .eclipse-welcome .entry-name { font-size: 1.8rem; }
  .eclipse-logo--header { width: 90px; }
  .eclipse-brand-copy { display: none; }
  .casino-side.eclipse-casino-header { gap: 4px 10px; padding: 7px 12px 8px; }
  .eclipse-casino-header .casino-navigation { padding-top: 6px; }
  .eclipse-casino-header .casino-side-footer { flex-direction: row; gap: 3px; }
  .eclipse-casino-header .casino-side-footer button { padding: 8px 6px; }
}


/* Les avatars et les effets sont maintenant définis dans casino-cosmetics.css. */

/* Session de jeu : autorisation donnée par le personnel du casino. */
.casino-play-session-notice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 16px;
  margin:0 0 18px;
  padding:13px 16px;
  border:1px solid #806640;
  border-radius:11px;
  background:#292216;
  color:#ead6b1;
  font-size:13px;
}
.casino-play-session-notice strong {font-size:14px;color:inherit}
.casino-play-session-notice p {margin:3px 0 0;line-height:1.5}
.casino-play-session-notice small {font-size:12px;color:inherit;opacity:.9}
.casino-play-session-notice.is-open {border-color:#426d55;background:#14281d;color:#b8e2c6}
.casino-play-session-notice.is-closed {border-color:#806640;background:#292216;color:#ead6b1}
.casino-play-session-pill {display:inline-block;padding:3px 9px;border:1px solid #806640;border-radius:999px;background:#292216;color:#ead6b1;font-size:12px;font-weight:600;white-space:nowrap}
.casino-play-session-pill.is-open {border-color:#426d55;background:#14281d;color:#b8e2c6}
.casino-play-session-pill.is-closed {border-color:#806640;background:#292216;color:#ead6b1}
.casino-session-meta {display:block;margin-top:5px;color:#bcb4a5;font-size:11px;line-height:1.5}
@media(max-width:600px) {
  .casino-play-session-notice {padding:11px 12px;gap:6px;margin-bottom:14px}
}

/* Eclipse : navigation par usage. Styles limités à la barre du casino. */
.eclipse-casino-header .casino-navigation.ec-grouped-navigation {
  position:relative;
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:8px;
  overflow:visible;
  isolation:isolate;
}
.ec-grouped-navigation .ec-nav-group { position:relative; min-width:0; }
.ec-grouped-navigation .ec-nav-group--staff { margin-left:auto; }
.ec-grouped-navigation .ec-nav-trigger {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 16px;
  list-style:none;
  cursor:pointer;
  border:1px solid #3e3628;
  border-radius:9px;
  background:#15130f;
  color:#e5ddcf;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  user-select:none;
}
.ec-grouped-navigation .ec-nav-trigger::-webkit-details-marker { display:none; }
.ec-grouped-navigation .ec-nav-trigger::marker { content:''; }
.ec-grouped-navigation .ec-nav-symbol { color:var(--lux,var(--casino-gold,#ddbf81)); font-size:17px; }
.ec-grouped-navigation .ec-nav-chevron { margin-left:8px; color:#bfb19b; transition:transform .15s; }
.ec-grouped-navigation .is-current > .ec-nav-trigger,
.ec-grouped-navigation .ec-nav-group[open] > .ec-nav-trigger,
.ec-grouped-navigation .ec-nav-trigger:hover {
  color:var(--lux,var(--casino-gold,#ddbf81));
  border-color:var(--lux,var(--casino-gold,#ddbf81));
  background:#292218;
}
.ec-grouped-navigation .ec-nav-group[open] .ec-nav-chevron { transform:rotate(180deg); }
.ec-grouped-navigation .ec-nav-trigger:focus-visible,
.ec-grouped-navigation .ec-nav-link:focus-visible {
  outline:2px solid var(--lux,var(--casino-gold,#ddbf81));
  outline-offset:3px;
}
.ec-grouped-navigation .ec-nav-dropdown {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:30;
  width:min(340px,calc(100vw - 32px));
  max-height:min(440px,calc(100vh - 230px));
  max-height:min(440px,calc(100dvh - 230px));
  padding:10px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  background:#15130f;
  border:1px solid #79603b;
  border-radius:12px;
  box-shadow:0 16px 45px #000b;
}
.ec-grouped-navigation .ec-nav-group--staff .ec-nav-dropdown { left:auto; right:0; width:min(370px,calc(100vw - 32px)); }
.ec-grouped-navigation .ec-nav-access { padding:4px 7px 11px; color:#bfb19b; font-size:11px; }
.ec-grouped-navigation .ec-nav-section + .ec-nav-section { margin-top:8px; padding-top:8px; border-top:1px solid #3c3325; }
.ec-grouped-navigation .ec-nav-section-label { padding:5px 8px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#bca783; }
.ec-grouped-navigation .ec-nav-link {
  display:flex;
  align-items:center;
  width:100%;
  gap:12px;
  padding:11px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#f1e8d8;
  text-align:left;
  white-space:normal;
}
.ec-grouped-navigation .ec-nav-link-icon { width:23px; flex:0 0 23px; text-align:center; font-size:20px; color:var(--lux,var(--casino-gold,#ddbf81)); }
.ec-grouped-navigation .ec-nav-link-copy { display:grid; gap:3px; min-width:0; }
.ec-grouped-navigation .ec-nav-link strong { font-size:13px; font-weight:600; line-height:1.4; }
.ec-grouped-navigation .ec-nav-link small { font-size:11px; font-weight:400; line-height:1.5; color:#b5ab9b; }
.ec-grouped-navigation .ec-nav-link:hover,
.ec-grouped-navigation .ec-nav-link.active { border-color:#76603d; background:#2b2419; }
.ec-grouped-navigation .ec-nav-link.active strong { color:var(--lux,var(--casino-gold,#ddbf81)); }
@media (max-width:620px) {
  .ec-grouped-navigation .ec-nav-group { position:static; flex:1 1 calc(50% - 8px); }
  .ec-grouped-navigation .ec-nav-group--staff { margin-left:0; }
  .ec-grouped-navigation .ec-nav-trigger { width:100%; padding:9px 11px; font-size:12px; gap:7px; }
  .ec-grouped-navigation .ec-nav-chevron { margin-left:auto; }
  .ec-grouped-navigation .ec-nav-dropdown,
  .ec-grouped-navigation .ec-nav-group--staff .ec-nav-dropdown { left:0; right:0; width:100%; }
}