/* ============================================================
   COMPLÉTER MES SÉRIES — feuille MOBILE-FIRST.
   Base = 360px (aucune media query) ; élargissements via min-width
   768 / 1024 uniquement (breakpoints canoniques, cf. css/_tokens.css).
   Typo : échelle tokens --lt-text-* + clamp() pour les titres display.
   Réécrite le 2026-06-11 (anciens breakpoints 780/1100 supprimés).
   ============================================================ */

.series-page {
  --series-gold: #e7b31e;
  --series-ink: #080d1b;
  --series-panel: #101827;
  --series-line: rgba(231, 179, 30, .2);
  min-height: 100dvh;
  padding: clamp(42px, 7vw, 110px) max(15px, calc((100vw - 1440px) / 2)) 70px;
  color: #f2eee4;
  background:
    radial-gradient(circle at 86% 5%, rgba(231, 179, 30, .08), transparent 28%),
    linear-gradient(180deg, #080d1b 0%, #0b1120 100%);
}

/* ---------- Hero ---------- */
.series-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--series-line);
}

.series-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(3.5rem, 2.2rem + 6.5vw, 6rem); /* 56 → 96px */
  line-height: .82;
  letter-spacing: 0;
  color: #f2eee4 !important;
}

.series-hero h1 em { color: var(--series-gold); font-weight: 400; }
.series-hero__intro { color: rgba(242, 238, 228, .7); font-size: var(--lt-text-md, 1.0625rem); line-height: 1.7; }
.series-hero__intro p { color: rgba(242, 238, 228, .7) !important; }
.series-sync-note { color: var(--series-gold); font-size: var(--lt-text-sm, 0.8125rem); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Toolbar ---------- */
.series-toolbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  align-items: stretch;
  padding: 28px 0;
}

.series-search { display: grid; gap: 7px; width: min(520px, 100%); color: rgba(242, 238, 228, .55); font-size: var(--lt-text-xs, 0.6875rem); letter-spacing: .14em; text-transform: uppercase; }
.series-search__control {
  position: relative;
  display: flex;
  align-items: center;
}
.series-search__control > svg {
  position: absolute;
  left: 16px;
  pointer-events: none;
}
.series-search input {
  width: 100%;
  padding: 15px 48px;
  border: 1px solid rgba(242, 238, 228, .14);
  border-radius: 3px;
  outline: none;
  /* ≥16px obligatoire : un input plus petit déclenche le zoom auto iOS */
  font-size: var(--lt-text-md, 1rem);
  color: #fff !important;
  background: rgba(255, 255, 255, .035) !important;
}
.series-search input:focus { border-color: var(--series-gold); }
.series-search__control button {
  position: absolute;
  right: 6px;
  display: grid;
  width: var(--lt-control-height, 44px);
  height: var(--lt-control-height, 44px);
  place-items: center;
  border: 0;
  color: rgba(242, 238, 228, .7);
  background: transparent;
  cursor: pointer;
}
.series-progress { display: flex; align-items: baseline; gap: 12px; color: rgba(242, 238, 228, .6); }
.series-progress strong { color: var(--series-gold) !important; font-family: var(--lt26-serif, Georgia, serif); font-size: 2.375rem; }

/* ---------- Layout : sidebar marques + contenu ---------- */
/* Base mobile : la sidebar devient un rail horizontal scrollable. */
.series-layout { display: block; }
.series-sidebar {
  position: static;
  max-height: none;
  margin-bottom: 28px;
  overflow-x: auto;
  border: 1px solid rgba(242, 238, 228, .1);
  background: rgba(255, 255, 255, .02);
}
.series-sidebar nav { display: flex; }
.series-sidebar__title { padding: 17px; border-bottom: 1px solid rgba(242, 238, 228, .1); color: var(--series-gold); font-size: var(--lt-text-xs, 0.6875rem); letter-spacing: .16em; text-transform: uppercase; }
.series-brand-btn {
  display: block;
  flex: 0 0 165px;
  width: 100%;
  min-height: var(--lt-control-height, 44px);
  padding: 14px 17px;
  border: 0;
  border-bottom: 1px solid rgba(242, 238, 228, .065);
  border-right: 1px solid rgba(242, 238, 228, .065);
  color: rgba(242, 238, 228, .68);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.series-brand-btn small { display: block; margin-top: 4px; color: rgba(242, 238, 228, .35); }
.series-brand-btn:hover, .series-brand-btn.is-active { color: #fff; background: rgba(231, 179, 30, .1); box-shadow: inset 3px 0 var(--series-gold); }

/* ---------- En-tête de série + stats ---------- */
.series-heading { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; align-items: stretch; margin-bottom: 28px; }
.series-heading h2 { margin: 8px 0; color: #f2eee4 !important; font-size: clamp(2.5rem, 2rem + 2.6vw, 3.625rem); letter-spacing: 0; } /* 40 → 58px */
.series-heading p { max-width: var(--lt-measure, 65ch); color: rgba(242, 238, 228, .55) !important; }
.series-stats { display: flex; gap: 25px; }
.series-stats div { min-width: 70px; text-align: center; }
.series-stats strong { display: block; color: var(--series-gold) !important; font-family: var(--lt26-serif, Georgia, serif); font-size: 1.75rem; }
.series-stats span { color: rgba(242, 238, 228, .45); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Onglets gammes ---------- */
.series-tabs { display: flex; gap: 8px; padding: 0 0 24px; overflow-x: auto; }
.series-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--lt-control-height, 44px); /* cible tactile */
  padding: 10px 14px;
  border: 1px solid rgba(242, 238, 228, .12);
  color: rgba(242, 238, 228, .6);
  background: transparent;
  cursor: pointer;
}
.series-tab:hover, .series-tab.is-active { border-color: var(--series-gold); color: var(--series-ink); background: var(--series-gold); }

/* ---------- Grille de pièces ----------
   Canonique : auto-fill fluide, jamais de nombre de colonnes en dur.
   min(190px, 46%) ⇒ 2 colonnes dès 320px, ~4 colonnes sur desktop. */
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 46%), 1fr)); gap: 9px; }
.series-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 238, 228, .11);
  color: inherit;
  background: #0e1625;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease;
}
/* Effet de survol réservé aux périphériques qui survolent vraiment */
@media (hover: hover) {
  .series-card:hover { transform: translateY(-4px); border-color: rgba(231, 179, 30, .65); }
}
.series-card__visual { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(circle at 50% 35%, #26354b, #080c15 72%); }
.series-card__visual img { width: 100%; height: 100%; object-fit: contain; transition: filter .35s ease, transform .35s ease; }
.series-card__visual.is-placeholder::before,
.series-dialog__visual.is-placeholder::before {
  content: "";
  position: absolute;
  inset: 13% 20% 5%;
  border-radius: 46% 46% 18% 18%;
  background: #010205;
  clip-path: polygon(38% 0, 62% 0, 70% 13%, 80% 28%, 70% 43%, 86% 100%, 14% 100%, 30% 43%, 20% 28%, 30% 13%);
  box-shadow: 0 0 40px rgba(0, 0, 0, .7);
}
.series-card__visual.is-placeholder::after,
.series-dialog__visual.is-placeholder::after {
  content: "?";
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  color: rgba(231, 179, 30, .38);
  font-family: var(--lt26-serif, Georgia, serif);
  font-size: clamp(28px, 5vw, 58px);
}
.series-card:not(.is-owned) .series-card__visual img { filter: brightness(0); transform: scale(.92); opacity: .88; }
.series-card.is-owned .series-card__visual img { filter: none; }
.series-card__status { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; color: #0a101d; background: var(--series-gold); font-size: 0.5625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.series-card.is-owned .series-card__status { background: #76c68c; }
.series-card.is-wanted .series-card__status { color: #fff; background: #a16bca; }
.series-card.is-skipped .series-card__status { color: #fff; background: #597a9d; }
.series-card__avail {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 99px;
  background: rgba(5, 12, 24, .72);
  color: #f2eee4;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.series-card__avail--preorder { color: var(--series-gold); }
.series-card__avail--in_stock { color: #76c68c; }
.series-card__avail--sold_out { color: #d98b8b; }

.series-card__body { display: block; min-height: 105px; padding: 11px; }
.series-card__body strong { display: block; margin-bottom: 7px; color: #f2eee4 !important; font-family: var(--lt26-serif, Georgia, serif); font-size: var(--lt-text-sm, 0.9375rem); line-height: 1.12; }
.series-card__body span { display: block; color: rgba(242, 238, 228, .48) !important; font-size: var(--lt-text-xs, 0.6875rem); line-height: 1.5; }
.series-card__price { margin-top: 8px; color: var(--series-gold) !important; font-size: var(--lt-text-sm, 0.8125rem) !important; font-weight: 700; letter-spacing: .01em; }
.series-empty { grid-column: 1 / -1; padding: 70px 20px; border: 1px dashed rgba(242, 238, 228, .15); color: rgba(242, 238, 228, .55); text-align: center; }
.series-load-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px auto 0; min-height: 46px; padding: 13px 22px; border: 1px solid var(--series-gold); color: var(--series-gold); background: transparent; cursor: pointer; }
.series-load-more[hidden] { display: none !important; }

/* ---------- Modale pièce ---------- */
.series-dialog { width: min(900px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 1px solid rgba(231, 179, 30, .35); color: #f2eee4; background: #0d1524; }
.series-dialog::backdrop { background: rgba(2, 5, 12, .86); backdrop-filter: blur(8px); }
.series-dialog[open] { display: block; max-height: 92dvh; overflow: auto; }
.series-dialog__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: var(--lt-control-height, 44px); height: var(--lt-control-height, 44px); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; background: #0b1220; cursor: pointer; }
.series-dialog__visual { min-height: 310px; height: 42dvh; background: radial-gradient(circle at 50% 35%, #2b3b52, #070b13 70%); }
.series-dialog__visual img { width: 100%; height: 100%; max-height: 620px; object-fit: contain; filter: brightness(0); }
.series-dialog__visual.is-owned img { filter: none; }
.series-dialog__body { align-self: center; padding: 28px 20px; }
.series-dialog__body h2 { margin: 10px 0; color: #f2eee4 !important; font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3rem); line-height: 1; letter-spacing: 0; } /* 36 → 48px */
.series-dialog__body > p { color: rgba(242, 238, 228, .55); }
.series-dialog__actions { display: grid; gap: 9px; margin-top: 28px; }
.series-dialog__actions button { display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; gap: 9px; min-height: 48px; padding: 13px 16px; border: 1px solid rgba(242, 238, 228, .15); color: #fff; background: rgba(255,255,255,.035); cursor: pointer; text-align: left; }
.series-dialog__actions button:hover, .series-dialog__actions button.is-active { border-color: var(--series-gold); color: #08101c; background: var(--series-gold); }
.series-dialog__actions button:disabled { cursor: wait; opacity: .62; }
.series-dialog__message { min-height: 20px; color: var(--series-gold) !important; }

/* ---------- États de chargement ---------- */
.series-loading {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed rgba(242, 238, 228, .15);
  color: rgba(242, 238, 228, .55);
  text-align: center;
}
.series-loading svg { color: var(--series-gold); animation: series-spin .8s linear infinite; }
.series-loading strong { color: #f2eee4; font-family: var(--lt26-serif, Georgia, serif); font-size: var(--lt-text-xl, 1.5rem); }
.series-error strong { display: block; color: #f2eee4; }
.series-build-missing { padding: 28px; color: #f2eee4; background: #080d1b; text-align: center; }

.series-page button:focus-visible,
.series-page a:focus-visible,
.series-page input:focus-visible {
  outline: 2px solid var(--series-gold);
  outline-offset: 3px;
}

@keyframes series-spin { to { transform: rotate(360deg); } }

/* La modale s'ouvre dans le « top layer » : le curseur or personnalisé
   (#lt-gl-cur, masqué par body.lt-gl-cursor-ready { cursor:none }) est peint
   en dessous et devient invisible sur la fenêtre. On rétablit le curseur natif
   sur la modale + son fond pour qu'il reste toujours visible pendant la sélection. */
.series-dialog,
.series-dialog *,
.series-dialog::backdrop { cursor: auto !important; }
.series-dialog button,
.series-dialog__close,
.series-dialog__actions button { cursor: pointer !important; }

/* ============================================================
   ≥ 768px — tablette : sidebar verticale sticky, hero 2 colonnes,
   toolbar en ligne, modale en 2 colonnes.
   ============================================================ */
@media (min-width: 768px) {
  .series-hero { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: clamp(40px, 5vw, 70px); }
  .series-toolbar { flex-direction: row; align-items: center; }
  .series-heading { flex-direction: row; align-items: end; }

  .series-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 25px; }
  .series-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100dvh - 125px);
    margin-bottom: 0;
    overflow: auto;
  }
  .series-sidebar nav { display: block; }
  .series-brand-btn { flex: none; border-right: 0; }

  .series-grid { gap: 16px; }
  .series-card__body { min-height: 116px; padding: 15px; }
  .series-card__body strong { font-size: var(--lt-text-lg, 1.125rem); }

  .series-dialog[open] { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(320px, 1.15fr); max-height: none; overflow: hidden; }
  .series-dialog__visual { min-height: 550px; height: auto; }
  .series-dialog__body { padding: 55px; }
}

/* ============================================================
   ≥ 1024px — desktop : sidebar large, respiration maximale.
   ============================================================ */
@media (min-width: 1024px) {
  .series-layout { grid-template-columns: 245px minmax(0, 1fr); gap: 46px; }
}