/* ==========================================================================
   OdysseyAI — Archive Showcase
   Design system: "The Archive" — a mythic catalog, not a template pricing page.
   ========================================================================== */

:root {
  /* --- Color tokens --- */
  --bg: #15120F;
  --bg-raised: #1D1913;
  --bg-card: #211C16;
  --line: #35302A;
  --line-soft: #2A251F;

  --text: #F3ECDF;
  --text-muted: #A99E8E;
  --text-faint: #746A5C;

  --gold: #C9A25D;
  --gold-soft: #E8CE9B;
  --ember: #A8461D;
  --teal: #4C7A88;

  --voyager: #4C7A88;
  --hero: #8C6A45;
  --olympian: #C9A25D;
  --pantheon: #A8461D;

  /* --- Type --- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- Layout --- */
  --max-w: 1180px;
  --radius: 6px;
  --radius-lg: 14px;
}

/* --- Reset --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Focus visibility --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Top navigation
   ========================================================================== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(21, 18, 15, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold);
}
.nav-links {
  display: flex;
  gap: 32px;
  font-size: 0.95rem;
}
.nav-links a {
  color: var(--text-muted);
  transition: color 0.15s ease;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text);
  border-bottom-color: var(--gold);
}
.nav-cta {
  background: var(--gold);
  color: #1B1610;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-soft); }
.nav-toggle { display: none; }

/* --- Language switcher (custom dropdown, supports flag images) --- */
.lang-switch { position: relative; }
.lang-current {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}
.lang-current:hover { border-color: var(--gold); }
.lang-current img { border-radius: 2px; display: block; }
.lang-caret { color: var(--text-faint); font-size: 0.65rem; }
.lang-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 170px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.lang-option img { border-radius: 2px; flex-shrink: 0; }
.lang-option:hover { background: var(--bg-card); color: var(--text); }
.lang-option.active { color: var(--gold-soft); background: var(--bg-card); }

/* --- Nav auth widget --- */
.nav-auth { display: flex; align-items: center; gap: 12px; }
.nav-auth-tier {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-soft);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
}
.nav-auth-logout {
  font-size: 0.85rem;
  color: var(--text-faint);
  border-bottom: 1px solid transparent;
}
.nav-auth-logout:hover { color: var(--text); border-bottom-color: var(--line); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 12px;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 90px;
  border-bottom: 1px solid var(--line-soft);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 0%, rgba(201, 162, 93, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 30%, rgba(168, 70, 29, 0.14), transparent 65%),
    radial-gradient(ellipse 40% 40% at 60% 100%, rgba(76, 122, 136, 0.10), transparent 60%);
  pointer-events: none;
}
.hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
}
.hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  line-height: 1.04;
  max-width: 15ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold-soft);
}
.hero-sub {
  margin-top: 26px;
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 46ch;
}
.hero-actions {
  margin-top: 38px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: #1B1610; }
.btn-primary:hover { background: var(--gold-soft); }
.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--gold); }

/* Petite bande promo calendrier + votes, au-dessus des previews --
   compacte exprès pour ne pas empieter sur l'espace des previews. */
.promo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 34px;
  padding: 14px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  text-align: center;
}
.promo-strip p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.promo-strip .promo-strip-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.promo-strip .btn {
  padding: 9px 18px;
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .promo-strip { flex-direction: column; }
}

/* Zone stats -- sortie de l'etroite colonne du hero (elle s'y retrouvait
   coincee contre le visuel et se repliait n'importe comment) pour devenir
   sa propre bande pleine largeur, en cartes, plus lisible et plus grande. */
.hero-stat-strip {
  position: relative;
  z-index: 1;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hero-stat {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--gold-soft);
  line-height: 1.1;
}
.hero-stat .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-top: 8px;
}
@media (max-width: 980px) {
  .hero-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .hero-stat-strip { grid-template-columns: 1fr; }
}

/* Hero visual: a placeholder "reliquary" frame — I will drop in real art */
.hero-visual {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(201,162,93,0.10), rgba(168,70,29,0.08) 55%, rgba(76,122,136,0.10)),
    var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
/* Ajoute 12 sept, revu ensuite sur retour d'Arsene : le perso du jour
   affiche en hero n'avait ni pastille ni nom -- juste une image posee la,
   sans contexte. Premiere version mettait le nom/franchise en legende en
   degrade PAR-DESSUS l'image (chevauchait le rendu) -- deplace en dessous,
   dans le flux normal, hors de l'image. La pastille reutilise directement
   .card-new-badge (meme classe que sur les cartes archive/preview), donc
   coherente avec le reste du site au lieu d'un texte invente ("Aujourd'hui"
   /"Dernier ajout"), et suit la meme regle d'affichage (isRecentlyPublished,
   3 jours) -- pas de pastille du tout si le post commence a dater. */
.hero-visual-wrap { display: flex; flex-direction: column; }
.hero-visual-caption {
  margin-top: 14px;
  text-align: center;
}
.hero-visual-caption .franchise {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-soft);
  margin-bottom: 4px;
}
.hero-visual-caption .name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}
.hero-visual-placeholder {
  text-align: center;
  padding: 30px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.hero-visual-placeholder .glyph { font-size: 2.4rem; display: block; margin-bottom: 14px; }

/* Reusable "art coming later" slots -- dashed border on purpose, so it
   reads as clearly temporary/empty rather than as finished dark UI, until
   real images are dropped in (just swap the placeholder div for an <img>,
   same container keeps the sizing/rounding). */
.media-placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 16px;
  overflow: hidden;
}
.media-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.media-placeholder .glyph { font-size: 1.8rem; display: block; margin-bottom: 8px; }

.banner-slot {
  width: 100%;
  aspect-ratio: 2.5 / 1;
  margin: 28px 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.banner-slot picture { display: contents; }
.banner-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 700px) {
  /* Mobile uniquement (12 sept) : la banniere paraissait "posee la",
     minuscule, avec object-fit:contain qui laisse des bandes vides au lieu
     de remplir. Demande d'Arsene : la faire ressembler a une banniere de
     chaine YouTube -- pleine largeur (deborde du .container via marge
     negative egale au padding du container, 28px), plus haute (3/2 au lieu
     de 16/9) et RECADREE (object-fit:cover) au lieu d'etre juste
     redimensionnee, pour que les personnages soient plus grands et
     visibles. object-position:50% 25% privilegie le haut de l'image (les
     visages), a ajuster si jamais un visage se retrouve coupe sur un
     telephone tres etroit. Aucun changement sur PC (tout est dans ce bloc
     @media deja existant pour <=700px).*/
  .banner-slot {
    aspect-ratio: 3 / 2;
    margin: 20px -28px;
    width: calc(100% + 56px);
    border-radius: 0;
  }
  .banner-slot img { object-fit: cover; object-position: 50% 25%; }
}

.tier-visual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.tier-visual-grid .media-placeholder { aspect-ratio: 3 / 4; }
.tier-visual-grid .tier-visual-label {
  margin-top: 8px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}
@media (max-width: 700px) {
  .tier-visual-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Section shell
   ========================================================================== */
.section {
  padding: 90px 0;
  border-bottom: 1px solid var(--line-soft);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.section-head p { color: var(--text-muted); margin-top: 10px; max-width: 52ch; }
.section-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.section-link:hover { border-bottom-color: var(--gold); }

/* ==========================================================================
   Rotation strip (latest sets, horizontal)
   ========================================================================== */
.rotation-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.rotation-strip::-webkit-scrollbar { height: 6px; }
.rotation-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ==========================================================================
   Character card
   ========================================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card-media {
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, rgba(201,162,93,0.14), rgba(168,70,29,0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-media .initial {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: rgba(243, 236, 223, 0.35);
}
.card-tier-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(21,18,15,0.75);
  border: 1px solid var(--line);
}
.card-tier-badge.exclusive { color: var(--pantheon); border-color: var(--pantheon); }
.card-tier-badge.standard { color: var(--hero); border-color: var(--hero); }
.card-new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--bg);
  border: 1px solid var(--gold);
  font-weight: 600;
}
.card-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card-body .name { font-family: var(--font-display); font-size: 1.05rem; }
.card-body .meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.card-body .meta span:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--line); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 22px;
}
/* Mobile uniquement (12 sept) : minmax(210px,1fr) ne laisse jamais plus
   d'1 colonne sur un telephone (largeur de contenu ~300-340px une fois le
   padding du .container retire), ce qui oblige a scroller enormement sur
   les previews/l'archive. Demande d'Arsene : au moins 2 colonnes sur
   telephone. Gap resserre a 14px pour laisser assez de place aux cartes a
   2 colonnes meme sur les telephones les plus etroits (iPhone SE ~375px).
   Rien ne change au-dessus de 700px (comportement PC identique). */
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ==========================================================================
   Rank ladder (signature element) — tiers as an ascending path
   ========================================================================== */
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}
.ladder::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--voyager), var(--hero), var(--olympian), var(--pantheon));
  opacity: 0.5;
}
.rank {
  position: relative;
  padding-top: 46px;
  border-radius: var(--radius-lg);
}
.rank-glyph {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: var(--bg);
  border: 1px solid var(--line);
}
.rank[data-tier="voyager"] .rank-glyph { border-color: var(--voyager); box-shadow: 0 0 0 4px rgba(76,122,136,0.14); }
.rank[data-tier="hero"] .rank-glyph { border-color: var(--hero); box-shadow: 0 0 0 4px rgba(140,106,69,0.14); }
.rank[data-tier="olympian"] .rank-glyph { border-color: var(--olympian); box-shadow: 0 0 0 4px rgba(201,162,93,0.16); }
.rank[data-tier="pantheon"] .rank-glyph { border-color: var(--pantheon); box-shadow: 0 0 0 4px rgba(168,70,29,0.16); }

.rank-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 20px 24px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rank-card .rank-name { font-family: var(--font-display); font-size: 1.3rem; }
.rank-card .rank-price { font-family: var(--font-display); font-weight: 600; color: var(--gold-soft); font-size: 1.25rem; }
.rank-card ul { text-align: left; display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.rank-card li {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}
.rank-card li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.rank-card.featured { border-color: var(--gold); }
.rank-card .rank-cta {
  margin-top: auto;
  padding-top: 10px;
}

/* ==========================================================================
   Feature comparison table (tiers.html)
   ========================================================================== */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.compare-table th, .compare-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  font-size: 0.9rem;
}
.compare-table th { font-family: var(--font-display); font-weight: 600; }
.compare-table td:first-child, .compare-table th:first-child {
  text-align: left;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.compare-table .yes { color: var(--gold-soft); font-size: 1.1rem; }
.compare-table .no { color: var(--text-faint); }
.compare-table-wrap { overflow-x: auto; }

@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr 1fr; }
  .ladder::before { display: none; }
}
@media (max-width: 560px) {
  .ladder { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Filters (archive page)
   ========================================================================== */
.filters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  align-items: center;
}
.filters input[type="search"] {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 11px 16px;
  border-radius: 999px;
  min-width: 220px;
}
.filters select {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 999px;
}
.filters .result-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-left: auto;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.chip.active { border-color: var(--gold); color: var(--gold-soft); }

/* ==========================================================================
   Character detail page
   ========================================================================== */
.detail-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  padding: 70px 0;
  border-bottom: 1px solid var(--line-soft);
}
.detail-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(201,162,93,0.14), rgba(168,70,29,0.10));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-title { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.detail-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 26px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tag {
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text-muted);
}
.access-box {
  margin-top: 30px;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.access-box h3 { font-size: 1.1rem; margin-bottom: 8px; }
.access-box p { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 18px; }
.access-status {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* ==========================================================================
   Social rail — persistent vertical strip of platform links
   ========================================================================== */
.social-rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(29, 25, 19, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 10px;
}
.social-rail a, .social-rail span.soon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  position: relative;
}
.social-rail img { width: 22px; height: 22px; display: block; object-fit: contain; }
.social-rail .icon-fallback {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
}
.social-rail a:hover { border-color: var(--gold); background: #262019; transform: scale(1.1); }
.social-rail span.soon { opacity: 0.4; cursor: default; }
.social-rail .rail-tooltip {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.social-rail a:hover .rail-tooltip, .social-rail span.soon:hover .rail-tooltip { opacity: 1; }
@media (max-width: 780px) {
  .social-rail { right: 10px; padding: 10px 6px; gap: 8px; }
  .social-rail a, .social-rail span.soon { width: 38px; height: 38px; }
  .social-rail img { width: 18px; height: 18px; }
}

/* ==========================================================================
   Stats strip (tiers.html header)
   ========================================================================== */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.stat-item { min-width: 140px; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
}
.stat-label { color: var(--text-faint); font-size: 0.82rem; margin-top: 6px; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  padding: 18px 20px;
  cursor: pointer;
}
.faq-caret { color: var(--text-faint); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item.open .faq-caret { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 20px;
}
.faq-item.open .faq-answer { max-height: 300px; padding: 0 20px 20px; }

/* ==========================================================================
   Outfit variants row (character.html)
   ========================================================================== */
.outfit-variants-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 22px;
  margin-bottom: 10px;
}
.outfit-variants-row { display: flex; flex-wrap: wrap; gap: 8px; }
.outfit-pill {
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  background: var(--bg-raised);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.outfit-pill:hover { border-color: var(--gold); color: var(--text); }
.outfit-pill.current {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(201,162,93,0.08);
  cursor: default;
}

/* ==========================================================================
   Decorative background — subtle glow + dot pattern used on pages/sections
   that otherwise feel flat (tiers, calendar, vote, homepage rank section).
   No actual artwork available server-side, so this is a CSS-only texture.
   ========================================================================== */
.decorative-bg {
  position: relative;
  overflow: hidden;
}
.decorative-bg:not(.hero)::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 480px 340px at 12% 15%, rgba(201,162,93,0.10), transparent 60%),
    radial-gradient(ellipse 520px 380px at 88% 75%, rgba(168,70,29,0.09), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.decorative-bg > .container { position: relative; z-index: 1; }
.decorative-bg::after {
  content: "OdysseyAI";
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 16vw, 15rem);
  color: rgba(201, 162, 93, 0.045);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.02em;
}
@media (max-width: 780px) {
  .decorative-bg::after { display: none; }
}
.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.preview-modal.open { display: flex; }
.preview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.88);
  backdrop-filter: blur(6px);
}
.preview-modal-body {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
}
.preview-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(21,18,15,0.75);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.9rem;
}
.preview-modal-close:hover { border-color: var(--gold); }
.preview-modal-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, rgba(201,162,93,0.14), rgba(168,70,29,0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --slide-step: 82%;
}
.preview-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-carousel-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transition: transform 0.35s ease;
}
.preview-carousel-slide {
  flex: 0 0 var(--slide-step);
  height: 92%;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0.4;
  transform: scale(0.88);
  transition: opacity 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}
.preview-carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  cursor: default;
}
.preview-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(21,18,15,0.7);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
}
.preview-modal-nav:hover { border-color: var(--gold); }
.preview-modal-nav.prev { left: 12px; }
.preview-modal-nav.next { right: 12px; }
.preview-modal-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.preview-modal-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(243,236,223,0.35);
}
.preview-modal-dots .dot.active { background: var(--gold-soft); }
.preview-modal-text { padding: 22px 24px 26px; }
.preview-modal-title { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 10px; }
.preview-modal-excerpt { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }


/* ==========================================================================
   Bio + socials
   ========================================================================== */
.bio-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.bio-section p { color: var(--text-muted); font-size: 1.02rem; max-width: 50ch; }
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.social-pill:hover { border-color: var(--gold); transform: translateY(-1px); }
.social-pill.soon { color: var(--text-faint); cursor: default; }
.social-pill.soon:hover { border-color: var(--line); transform: none; }
.social-icon {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.soon-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 999px;
}
@media (max-width: 780px) {
  .bio-section { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  padding: 50px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-links { display: flex; gap: 26px; font-size: 0.9rem; color: var(--text-muted); }
.footer-links a:hover { color: var(--text); }
.footer-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); }

/* ==========================================================================
   Admin page
   ========================================================================== */
.admin-shell {
  max-width: 520px;
  margin: 90px auto;
  padding: 0 24px;
}
.admin-card {
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.admin-card label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 18px 0 8px;
}
.admin-card input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 8px;
}
.admin-msg { margin-top: 16px; font-size: 0.88rem; }
.admin-msg.ok { color: #7FAE8C; }
.admin-msg.err { color: #C97A6C; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  vertical-align: middle;
}
.status-badge:empty { display: none; }
.status-badge.pending { color: #D9B36B; border-color: #D9B36B; }
.status-badge.pending::before { content: "●"; animation: status-blink 1s ease-in-out infinite; }
.status-badge.success { color: #7FAE8C; border-color: #7FAE8C; }
.status-badge.success::before { content: "✓"; }
.status-badge.error { color: #C97A6C; border-color: #C97A6C; }
.status-badge.error::before { content: "✕"; }
.status-badge.timeout { color: var(--text-faint); border-color: var(--line); }
.status-badge.timeout::before { content: "?"; }
@keyframes status-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (max-width: 780px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual-wrap { max-width: 340px; margin: 0 auto; }
  .detail-hero { grid-template-columns: 1fr; }
}

/* Porte d'entree 18+ -- ajoutee 11 sept, voir showAgeGateIfNeeded() dans
   assets/js/i18n.js. Volontairement simple : une carte centree sur un
   fond opaque, pas de scroll possible derriere tant que non confirme. */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 8, 6, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.age-gate-card {
  max-width: 420px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
  text-align: center;
}
.age-gate-card h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.age-gate-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 22px;
}
.age-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}