/* BlindSwipe — un seul thème sombre, assumé (ambiance scène).
   Chaque battle injecte ses deux couleurs dans --L (gauche) et --R (droite). */
:root {
  --bg: #141018; --stage: #211a27; --card: #2b2233; --line: #ffffff14;
  --fg: #f4ece2; --muted: #a99db3;
  --L: #e8a93a; --R: #a77bf0;
  --ok: #4fc28b; --ko: #ef5d5d; --warn: #f5962f;
  --display: "Righteous", "Arial Black", system-ui, sans-serif;
  --body: "Work Sans", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100dvh; background: radial-gradient(120% 60% at 50% 0%, #2c2035 0%, var(--bg) 60%) fixed; background-color: var(--bg);
  color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.5;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* ---------- mise en page générale ---------- */
.shell {
  max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 4px 12px; }
.logo { font-family: var(--display); font-size: 22px; text-decoration: none; line-height: 1; }
.logo .l { color: var(--L); } .logo .r { color: var(--R); }
.content { flex: 1; display: flex; flex-direction: column; gap: 22px; padding-bottom: 24px; }
.tabbar {
  position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-around; margin-inline: -16px;
  padding: 8px 8px max(10px, env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid var(--line); backdrop-filter: blur(8px);
}
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; justify-content: center; font-size: 11px; color: var(--muted); text-decoration: none; }
.tab[aria-current="page"] { color: var(--fg); font-weight: 600; }
.footer { color: var(--muted); font-size: 12px; text-align: center; padding: 8px 0 16px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(28px, 8vw, 38px); }
h2 { font-size: 20px; }
.lead { color: var(--muted); margin: 0; }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.section { display: flex; flex-direction: column; gap: 12px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.link { color: var(--fg); font-weight: 600; font-size: 14px; text-underline-offset: 3px; }
.muted { color: var(--muted); }

/* ---------- boutons ---------- */
.btn {
  appearance: none; border: 2px solid transparent; cursor: pointer; text-decoration: none; text-align: center;
  min-height: 52px; display: inline-grid; place-items: center; padding: 6px 16px; border-radius: 14px;
  font-family: var(--display); font-size: 17px; line-height: 1.1; color: var(--fg); background: none;
}
.btn:active { transform: scale(.98); }
.btn.main { background: linear-gradient(90deg, var(--L), var(--R)); background-origin: border-box; color: #140f18; }
.btn.ghost { border-color: #ffffff30; }
.btn.l { color: var(--L); border-color: var(--L); }
.btn.r { color: var(--R); border-color: var(--R); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn-row .wide { grid-column: 1 / -1; }

/* ---------- cartes ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.tile { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; text-decoration: none; }
.tile .names { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile strong { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.15; }
.tile small { color: var(--muted); font-size: 12px; }
.pair { display: flex; width: 92px; height: 56px; position: relative; flex: none; }
.pair img, .pair .ph { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px #0006; background: var(--stage); }
.pair > :nth-child(2) { position: absolute; left: 36px; }
.list { display: grid; gap: 10px; }
.chev { color: var(--muted); font-size: 20px; }

/* battle du jour */
.daily { padding: 16px; display: flex; flex-direction: column; gap: 14px; border: 2px solid color-mix(in srgb, var(--L) 60%, transparent);
  background: color-mix(in srgb, var(--L) 8%, var(--card)); }
.daily .head { display: flex; justify-content: space-between; gap: 8px; }
.daily .who { display: flex; align-items: center; gap: 12px; }
.daily .who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.daily .vs { font-family: var(--display); color: var(--muted); }
.daily .status { display: flex; justify-content: space-between; background: #ffffff0d; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.create-cta { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; border: 2px dashed #ffffff3a; text-decoration: none; }
.create-cta .plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--L), var(--R)); color: #140f18; font-family: var(--display); font-size: 28px; flex: none; }
.create-cta strong { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; }
.create-cta small { color: var(--muted); font-size: 13px; }

/* fiche battle */
.hero { display: flex; flex-direction: column; gap: 14px; }
.hero .faces { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.hero .faces img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.hero .faces span { font-family: var(--display); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid #ffffff30; font-size: 13px; text-decoration: none; }
.banner { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--L) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--L) 50%, transparent); }
.banner.warn { background: #3a2a14; border-color: #7a4a00; }
.stat { display: flex; justify-content: space-between; align-items: center; padding: 14px; }
.stat b { font-family: var(--display); font-weight: 400; font-size: 26px; }
.seg { display: flex; background: var(--stage); border-radius: 12px; padding: 4px; gap: 4px; }
.seg a { flex: 1; text-align: center; padding: 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.seg a[aria-current="true"] { background: var(--card); color: var(--fg); }
.board { display: flex; flex-direction: column; overflow: hidden; }
.board .line { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.board .line:last-child { border-bottom: 0; }
.board .me { background: color-mix(in srgb, var(--R) 18%, var(--card)); font-weight: 600; }
.board .empty { padding: 16px; color: var(--muted); text-align: center; }
.prose { color: #dcd2e4; margin: 0; white-space: pre-line; }

/* ---------- formulaire de création ---------- */
.slot { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.slot.picked { border-color: color-mix(in srgb, var(--c) 65%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffffff30; background: var(--bg); color: var(--fg); font: inherit; font-size: 16px; }
textarea.field { min-height: 96px; resize: vertical; }
.results { display: grid; gap: 2px; max-height: 40dvh; overflow-y: auto; }
.res { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; }
.res:focus-visible { outline: 2px solid var(--fg); }
@media (hover: hover) { .res:hover { background: #ffffff10; } }
.res img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--stage); }
.res span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res small { display: block; color: var(--muted); font-size: 12px; }
.who-picked { display: flex; align-items: center; gap: 12px; }
.who-picked img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.who-picked strong { flex: 1; min-width: 0; font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--c); }
.linkbtn { all: unset; cursor: pointer; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.sw { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px #0005; }
.sw.on { outline: 2px solid var(--fg); outline-offset: 2px; }
.vs-sep { align-self: center; font-family: var(--display); color: var(--muted); }
.status-line { margin: 0; color: var(--muted); font-size: 13px; text-align: center; min-height: 1.4em; }
.status-line.err, .err { color: var(--ko); }
.status-line.ok { color: var(--ok); }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1.5px solid #ffffff30; cursor: pointer; }
.opt:has(input:checked) { border-color: var(--R); background: color-mix(in srgb, var(--R) 12%, transparent); }
.opt input { accent-color: var(--R); margin-top: 4px; }
.opt b { display: block; }
.opt small { color: var(--muted); }

/* ---------- lot 2 : Explorer, Classement, Profil ---------- */
.search { display: flex; flex-direction: column; gap: 6px; }
.search-row { display: flex; gap: 8px; }
.search-row .field { flex: 1; min-width: 0; }
.search-row .btn { min-height: 48px; padding-inline: 14px; flex: none; }
.scroll-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.scroll-x::-webkit-scrollbar { display: none; }
.chip[aria-current="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip { flex: none; }
.empty-state { padding: 20px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.empty-state p { margin: 0; }

.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.podium .step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.podium .who { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .block { width: 100%; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #140f18; }
.podium .block b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }
.podium .block small { font-size: 12px; font-weight: 600; }
.podium .s1 .block { height: 78px; background: color-mix(in srgb, var(--R) 80%, var(--fg)); }
.podium .s2 .block { height: 104px; background: linear-gradient(var(--L), var(--R)); }
.podium .s3 .block { height: 62px; background: color-mix(in srgb, var(--L) 70%, var(--fg)); }
.sticky-me { position: sticky; bottom: 76px; z-index: 5; gap: 12px; background: color-mix(in srgb, var(--R) 16%, var(--card)); box-shadow: 0 -8px 24px #0006; }
.sticky-me b { font-family: var(--display); font-weight: 400; font-size: 26px; }

.profile-head { display: flex; align-items: center; gap: 14px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--display); font-size: 28px; color: #140f18; background: linear-gradient(135deg, var(--L), var(--R)); }
.profile-head h1 { font-size: clamp(24px, 7vw, 30px); overflow-wrap: anywhere; }
.pseudo-edit { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats .card { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.stats b { font-family: var(--display); font-weight: 400; font-size: 24px; }
.stats small { color: var(--muted); font-size: 12px; }

/* souris (ordinateur) : pas de défilement horizontal possible à la molette, les catégories passent à la ligne */
@media (hover: hover) and (pointer: fine) {
  .scroll-x { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* Messages de confirmation / d'erreur */
.notice { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; border: 1px solid var(--line); background: var(--card); }
.notice.success { border-color: var(--ok); }
.notice.error { border-color: var(--ko); color: var(--ko); }

/* Profil retrouvé par e-mail */
.mail-box { padding: 16px; display: flex; flex-direction: column; gap: 10px; border-style: dashed; }
.mail-box.nudge { border: 2px solid var(--L); border-style: solid; text-align: left; }
.mail-box h2, .mail-box p { margin: 0; }
.mail-box p { font-size: 14px; line-height: 1.45; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--L); }
.ok-badge { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 28px; background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); font-size: 26px; font-weight: 700; margin: 0 auto; }
.confirm-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.confirm-card p { margin: 0; line-height: 1.5; }

/* Signalement */
.report { font-size: 13px; color: var(--muted); }
.report summary { cursor: pointer; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.report form { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-top: 4px; }

/* Filtres époque / langue (Explorer) */
.chips.filters .chip { height: 26px; font-size: 12px; padding: 0 10px; }
.chip-sep { flex: none; width: 1px; align-self: stretch; background: #ffffff30; margin: 2px 4px; }

/* Bandeau cookies (Google Analytics) */
.consent { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid #ffffff30; box-shadow: 0 12px 40px #0008; display: flex; flex-direction: column; gap: 10px; }
.consent[hidden] { display: none; }
.consent p { margin: 0; font-size: 14px; line-height: 1.45; }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent-btns .btn { min-height: 44px; font-size: 15px; }
.footer .linkbtn { padding: 0; font-size: inherit; }