:root {
  --bg: #070605;
  --bg-2: #0f0d0a;
  --line: #2a2317;
  --ink: #efe6d2;
  --muted: #8d8270;
  --gold: #d4af37;
  --gold-2: #f3dc8b;
  --gold-3: #8c6d1f;
  --danger: #d0675a;
  --ok: #9cc58f;
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Monogramme original claimit.fans : étoile à quatre branches, fleur cerclée, losanges. */
  --monogram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%234a3006' stroke-width='1.1' opacity='.16'%3E%3Cpath d='M28 16 Q30 26 40 28 Q30 30 28 40 Q26 30 16 28 Q26 26 28 16Z' fill='%235a3c08'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='56' cy='0' r='7'/%3E%3Ccircle cx='0' cy='56' r='7'/%3E%3Ccircle cx='56' cy='56' r='7'/%3E%3Cpath d='M0 -4 Q2 -2 4 0 Q2 2 0 4 Q-2 2 -4 0 Q-2 -2 0 -4Z M56 -4 Q58 -2 60 0 Q58 2 56 4 Q54 2 52 0 Q54 -2 56 -4Z M0 52 Q2 54 4 56 Q2 58 0 60 Q-2 58 -4 56 Q-2 54 0 52Z M56 52 Q58 54 60 56 Q58 58 56 60 Q54 58 52 56 Q54 54 56 52Z' fill='%235a3c08'/%3E%3Cpath d='M28 -3 L31 0 L28 3 L25 0Z M28 53 L31 56 L28 59 L25 56Z M-3 28 L0 25 L3 28 L0 31Z M53 28 L56 25 L59 28 L56 31Z' fill='%235a3c08'/%3E%3C/g%3E%3C/svg%3E");
  --gold-foil: linear-gradient(125deg,
    #5c4312 0%, #a07d33 12%, #e3cb8f 24%, #c4a157 34%, #8a6a27 46%,
    #d6bb7a 58%, #f3e3b6 66%, #b8954a 76%, #77591f 88%, #cfb06a 100%);
  --brushed: repeating-linear-gradient(0deg, rgba(255,250,235,.06) 0 1px, rgba(60,40,8,.05) 1px 2px, transparent 2px 3px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body {
  background: radial-gradient(1100px 620px at 50% -12%, #1c160c 0%, var(--bg) 62%) fixed, var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }
::selection { background: var(--gold); color: var(--bg); }

/* ---------- ambiance : poussière d'or + curseur ---------- */
#dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.nav, main, footer { position: relative; z-index: 1; }

.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; border-radius: 50%; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold-2); }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  transition: width .2s, height .2s, margin .2s, background .2s;
}
.cursor-ring.hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: color-mix(in srgb, var(--gold) 10%, transparent); }
html.cc, html.cc a, html.cc button, html.cc .card3d { cursor: none; }

/* ---------- nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1120px; margin: 0 auto; padding: 24px 16px;
}
.logo { font: 500 24px var(--display); letter-spacing: .02em; color: var(--ink); }
.logo b { color: var(--gold); }
.nav nav { display: flex; gap: 26px; font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.nav nav a { color: var(--muted); }
.nav nav a:hover, .nav nav a.on { color: var(--gold); }

main { max-width: 1120px; margin: 0 auto; padding: 0 16px 90px; }

/* ---------- typo ---------- */
.eyebrow { font: 500 11px var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
h1 { font: 400 clamp(46px, 8vw, 96px)/.98 var(--display); letter-spacing: -.02em; }
h1 em { font-style: italic; background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: foil 8s linear infinite; }
@keyframes foil { to { background-position: 200% 0; } }
h2 { font: 400 clamp(32px, 5vw, 48px)/1.05 var(--display); }
.lead { color: var(--muted); font-size: 17px; max-width: 520px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
hr.rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); margin: 80px 0; }

/* ---------- formulaires ---------- */
.field {
  display: flex; align-items: center;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 85%, transparent);
  transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { border-color: var(--gold-3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 8%, transparent); }
.field .prefix { padding: 0 0 0 18px; font: 400 17px var(--sans); color: var(--muted); white-space: nowrap; }
.field input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ink);
  font: 500 17px var(--sans); padding: 18px 12px 18px 1px;
}
input.plain, textarea {
  width: 100%; color: var(--ink); outline: 0; font: 15px var(--sans); padding: 12px 14px;
  border: 1px solid var(--line); background: var(--bg-2);
}
input.plain:focus, textarea:focus { border-color: var(--gold-3); }
textarea { resize: vertical; min-height: 90px; }
label { display: block; font: 500 10px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border: 0; color: #241805; cursor: pointer;
  background: var(--gold-foil); background-size: 220% 100%; background-position: 0 0;
  font: 600 11px var(--sans); letter-spacing: .26em; text-transform: uppercase;
  transition: background-position .6s, opacity .2s, filter .2s;
}
.btn:hover { background-position: 100% 0; color: #241805; }
.btn.ghost { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-3); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-2); }
.btn.small { padding: 9px 16px; font-size: 10px; }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent); }
.btn:disabled { opacity: .35; cursor: default; filter: grayscale(.4); }
.field .btn { align-self: stretch; }

.status { min-height: 24px; margin-top: 12px; font: 13px var(--sans); }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
.status.gold { color: var(--gold); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 40px 0 0; }
.hero h1 { margin: 20px 0 24px; }
.hero .lead { margin-bottom: 34px; }
.hero .stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hint { font: 500 10px var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

.stats { display: flex; gap: 52px; margin-top: 40px; }
.stats div b { display: block; font: 400 38px/1.1 var(--display); color: var(--gold); }
.stats div span { font: 500 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 36px; }
.steps div { background: var(--bg); padding: 30px 28px; }
.steps b { display: block; font: 400 15px var(--display); color: var(--gold); margin-bottom: 14px; }
.steps h3 { font: 400 26px var(--display); margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 14px; }

/* ---------- la carte en or ---------- */
.card3d {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%; --sx: 50%; --fit: 13;
  position: relative; width: 320px; aspect-ratio: 5 / 7; flex: none;
  perspective: 1400px; container-type: inline-size; user-select: none; touch-action: pan-y;
}
.card3d.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -12px; } }
.card3d::after { /* ombre au sol */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -9%; height: 7%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(6px); z-index: -1;
}
.card3d .inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.face {
  position: absolute; inset: 0; border-radius: 5.5cqw; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--brushed), var(--monogram), var(--gold-foil);
  background-size: auto, 17.5cqw 17.5cqw, 260% 260%;
  background-position: 0 0, center, var(--sx) 50%;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,240,190,.55), inset 0 0 0 2px rgba(90,60,10,.35);
  color: #33240a;
  display: flex; flex-direction: column; padding: 8cqw 8cqw 7cqw;
}
.face::before { /* filet gravé */
  content: ""; position: absolute; inset: 3.4cqw; border-radius: 3cqw; pointer-events: none;
  border: 1px solid rgba(80,52,8,.5); box-shadow: 0 0 0 1px rgba(255,244,205,.35), inset 0 0 0 1px rgba(255,244,205,.25);
}
.face::after { /* reflet qui suit le pointeur */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,252,235,.6), rgba(255,240,200,.12) 28%, transparent 55%);
  mix-blend-mode: overlay;
}
.back { transform: rotateY(180deg); background-size: auto, 11cqw 11cqw, 260% 260%; }

.engr { text-shadow: 0 1px 0 rgba(255,246,214,.6), 0 -1px 0 rgba(70,46,6,.25); }
.face .top { display: flex; justify-content: space-between; align-items: center; font: 600 3.3cqw var(--sans); letter-spacing: .3em; }
.face .uid { font-family: var(--mono); letter-spacing: .12em; }
.face .mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.medal { width: 20cqw; height: 20cqw; margin-bottom: 7cqw; filter: drop-shadow(0 1px 0 rgba(255,246,214,.6)); }
.face .handle { font: 500 calc(var(--fit) * 1cqw)/1 var(--display); letter-spacing: -.01em; word-break: break-all; }
.face .handle i { font: 300 .78em var(--sans); font-style: normal; opacity: .6; margin-right: .04em; vertical-align: .08em; }
.face .sep { width: 18cqw; height: 1px; margin: 5cqw 0 4cqw; background: rgba(70,46,6,.55); box-shadow: 0 1px 0 rgba(255,246,214,.5); }
.face .meta { font: 500 2.9cqw var(--sans); letter-spacing: .28em; text-transform: uppercase; }
.face .bot { text-align: center; font: 600 2.9cqw var(--sans); letter-spacing: .5em; text-transform: uppercase; }
.back .mid .medal { width: 34cqw; height: 34cqw; margin-bottom: 8cqw; }
.back .url { font: 500 5.2cqw var(--display); font-style: italic; }

.card3d.mini { width: 100%; }
.card3d.mini .face { box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,240,190,.55); }

/* ---------- grilles ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 26px 20px; }
.grid a { display: block; }
.feed-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }

/* ---------- panneaux ---------- */
.panel { border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 80%, transparent); padding: 30px; backdrop-filter: blur(6px); }
.panel + .panel { margin-top: 24px; }
.panel h3 { font: 400 26px var(--display); margin-bottom: 6px; }
.two { display: grid; grid-template-columns: 330px 1fr; gap: 48px; align-items: start; }
.sticky { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.link-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin-bottom: 8px; }
.offer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.offer:first-of-type { border-top: 0; }
.offer .actions { display: flex; gap: 8px; }
.tabs { display: flex; gap: 8px; margin: 14px 0 6px; }

/* ---------- profil ---------- */
.profile { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 16px; }
.profile .name { font: 400 clamp(36px, 6vw, 52px)/1.1 var(--display); margin-top: 48px; }
.profile .handle-line { font: 500 12px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.profile .bio { color: var(--muted); max-width: 460px; margin-top: 16px; white-space: pre-wrap; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chip svg { width: 13px; height: 13px; stroke: var(--gold); }
.links { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin-top: 30px; }
.links a {
  display: block; padding: 16px; border: 1px solid var(--line); color: var(--ink);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  font: 500 12px var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .25s, color .25s, transform .25s;
}
.links a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.links a.cta { background: var(--gold-foil); color: #241805; border: 0; }
.ledger { margin-top: 44px; font: 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ledger li { list-style: none; padding: 4px 0; }
.ledger b { color: var(--gold); font-weight: 500; }

footer { text-align: center; padding: 36px 16px; font: 500 10px var(--sans); letter-spacing: .3em; color: var(--muted); text-transform: uppercase; }

@media (max-width: 860px) {
  .hero, .two { grid-template-columns: 1fr; }
  .hero > *, .two > * { min-width: 0; }
  .hero { padding-top: 4px; gap: 40px; }
  .hero .stage { order: -1; }
  .sticky { position: static; }
  .stats { gap: 28px; }
  .steps { grid-template-columns: 1fr; }
  .nav nav { gap: 16px; }
  .card3d { width: min(300px, 82vw); }
  .card3d.mini { width: 100%; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .card3d.float, h1 em { animation: none; }
}

/* ---------- personnalisation du profil ---------- */
/* La couleur d'accent remplace l'or de l'interface ; les cartes gardent leur propre or. */
body.themed {
  --gold: var(--accent);
  --gold-2: color-mix(in srgb, var(--accent) 55%, white);
  --gold-3: color-mix(in srgb, var(--accent) 55%, black);
}
.bg-media { position: fixed; inset: 0; z-index: -1; background: center / cover no-repeat; }
.bg-media video { width: 100%; height: 100%; object-fit: cover; }
.bg-media::after { content: ""; position: absolute; inset: 0; background: rgba(5, 4, 3, var(--dim, 0)); }

.splash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center;
  background: rgba(5, 4, 3, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer; transition: opacity .7s, visibility .7s;
}
.splash.gone { opacity: 0; visibility: hidden; }
.splash b { display: block; font: 400 clamp(36px, 7vw, 64px)/1 var(--display); color: var(--ink); margin-bottom: 18px; }
.splash b i { font: 300 .78em var(--sans); font-style: normal; opacity: .6; margin-right: .04em; }
.splash span { font: 500 11px var(--sans); letter-spacing: .4em; text-transform: uppercase; color: var(--gold); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.player {
  position: fixed; left: 16px; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px; max-width: calc(100vw - 32px);
  background: color-mix(in srgb, var(--bg-2) 75%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.player button {
  width: 36px; height: 36px; flex: none; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--gold); color: var(--bg);
}
.player button svg { width: 14px; height: 14px; fill: currentColor; }
.player .title { font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .bars { display: flex; gap: 2px; align-items: end; height: 14px; flex: none; }
.player .bars i { width: 2px; height: 100%; background: var(--gold); transform-origin: bottom; transform: scaleY(.25); }
.player.playing .bars i { animation: bar .9s ease-in-out infinite; }
.player.playing .bars i:nth-child(2) { animation-delay: -.3s; }
.player.playing .bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes bar { 50% { transform: scaleY(1); } }

/* éditeur */
.upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.upload .up-hint { font-size: 12px; }
.progress { flex-basis: 100%; height: 2px; background: var(--line); }
.progress i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatches button { width: 30px; height: 30px; border: 1px solid var(--line); cursor: pointer; }
.swatches button.on { outline: 1px solid var(--ink); outline-offset: 2px; }
.swatches input[type=color] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.toggle { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font: 14px var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.toggle input { accent-color: var(--gold); width: 16px; height: 16px; }
input[type=range] { width: 100%; accent-color: var(--gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* ---------- admin ---------- */
.admin-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.achip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); font-size: 14px; }
.achip small { color: var(--muted); font: 11px var(--mono); }
.admin-log { max-height: 340px; overflow: auto; font-size: 13px; }
.admin-log div { padding: 6px 0; border-top: 1px solid var(--line); }
.admin-log .mono { color: var(--muted); font-size: 11px; margin-right: 8px; }
select.plain { appearance: none; width: 100%; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); padding: 12px 14px; font: 15px var(--sans); outline: 0; }
.toast { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: 95; margin: 0; padding: 12px 18px; max-width: calc(100vw - 32px);
  background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 12px 30px -10px #000; }
.toast:empty { display: none; }