/* ==========================================================================
   Snapzone · Design system web — COMPOSANTS
   --------------------------------------------------------------------------
   Traduction en CSS pur des composants de l'app (src/styles/ui.css du
   prototype), mis à l'échelle du web (cibles ≥ 44 px, textes ≥ 13 px).
   Classes préfixées .sz- (BEM : .sz-bloc__element--variante).
   Exemples HTML de chaque composant : components/exemples.html.
   Aucune valeur brute de couleur ici : uniquement des rôles de semantic.css.
   ========================================================================== */

/* ── Bouton ─────────────────────────────────────────────────────────────── */
.sz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-related);
  min-height: 48px;
  padding: var(--spacing-stack) var(--spacing-control-x);
  border: 0;
  border-radius: var(--radius-sharp);
  font-family: var(--font-ui);
  font-size: var(--text-cta);
  font-weight: 800;
  font-style: italic;
  letter-spacing: var(--tracking-cta);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--duration-micro) var(--ease-micro),
    background-color var(--duration-micro) var(--ease-micro),
    border-color var(--duration-micro) var(--ease-micro),
    color var(--duration-micro) var(--ease-micro),
    box-shadow var(--duration-micro) var(--ease-micro);
}

.sz-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* CTA principal : plaque jaune inclinée à −8°, relief plein sans flou.
   Un seul par écran visible. Texte toujours Nuit sur jaune (jamais blanc). */
.sz-btn--primary {
  color: var(--color-on-action);
  background-color: var(--color-action);
  box-shadow: var(--shadow-relief-lg);
  font-style: normal; /* l'inclinaison de la plaque penche déjà le texte */
  transform: skewX(var(--skew-action));
}

.sz-btn--primary:hover {
  color: var(--color-on-action);
  background-color: var(--color-action-hover);
  box-shadow: var(--shadow-relief-md);
  transform: skewX(var(--skew-action)) translateY(2px);
}

.sz-btn--primary:active {
  box-shadow: var(--shadow-relief-pressed);
  transform: skewX(var(--skew-action)) translateY(5px);
}

/* Secondaire : surface neutre, pas d'inclinaison. */
.sz-btn--secondary {
  border: 1px solid var(--color-border-hover);
  color: var(--color-content);
  background-color: var(--color-surface);
}

.sz-btn--secondary:hover { border-color: var(--color-instrument-border); background-color: var(--color-surface-hover); color: var(--color-content); }
.sz-btn--secondary:active { transform: translateY(2px); }

/* Fantôme : contour cyan, pour une action d'information (« Voir la carte »). */
.sz-btn--ghost {
  border: 1.5px solid var(--color-instrument-border);
  color: var(--color-instrument-text);
  background-color: transparent;
}

.sz-btn--ghost:hover { border-color: var(--color-instrument); color: var(--color-content); background-color: var(--color-instrument-tint); }
.sz-btn--ghost:active { transform: translateY(2px); }

/* Instrument : aplat cyan, texte Nuit en mono (jamais blanc sur cyan). */
.sz-btn--instrument {
  color: var(--color-content-invert);
  background-color: var(--color-instrument);
  font-family: var(--font-mono);
  font-style: normal;
  transform: skewX(var(--skew-action));
}

.sz-btn--instrument:hover { background-color: var(--color-instrument-text); color: var(--color-content-invert); }

.sz-btn--discord { color: var(--color-content); background-color: var(--color-provider-discord); }
.sz-btn--discord:hover { color: var(--color-content); background-color: var(--color-provider-discord-hover); }

.sz-btn--lg { min-height: 56px; padding-inline: var(--spacing-flow); font-size: var(--text-cta-lg); }
.sz-btn--sm { min-height: 44px; padding: var(--spacing-related) var(--spacing-cluster); font-size: var(--text-small); }
.sz-btn--block { width: 100%; }

.sz-btn:disabled,
.sz-btn[aria-disabled="true"] { opacity: 0.42; box-shadow: none; cursor: not-allowed; }

/* Lien texte : cyan, pour une action secondaire dans une phrase. */
.sz-link {
  color: var(--color-instrument-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sz-link:hover { color: var(--color-content); }

/* ── Bouton icône (burger, réseaux sociaux) : cible de 44 px ───────────── */
.sz-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  color: var(--color-content);
  background-color: var(--color-surface);
  transition: border-color var(--duration-micro) var(--ease-micro), background-color var(--duration-micro) var(--ease-micro);
}

.sz-icon-btn:hover { border-color: var(--color-border-hover); background-color: var(--color-surface-hover); }

/* ── Badge : plaque mono inclinée ───────────────────────────────────────── */
.sz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-tight);
  min-height: 28px;
  padding: var(--spacing-tight) var(--spacing-stack);
  border: 1px solid transparent;
  border-radius: var(--radius-sharp);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 800;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(var(--skew-action));
}

.sz-badge--new { color: var(--color-on-action); background-color: var(--color-action); } /* NOUVEAU, record */
.sz-badge--info { color: var(--color-instrument-text); border-color: var(--color-instrument); background-color: var(--color-instrument-tint); }
.sz-badge--instrument { color: var(--color-content-invert); background-color: var(--color-instrument); }
.sz-badge--success { color: var(--color-content); background-color: var(--color-success-fill); }
.sz-badge--danger { color: var(--color-danger-text); border-color: var(--color-danger); background-color: var(--color-danger-tint); }
.sz-badge--neutral { color: var(--color-content); border-color: var(--color-border-strong); background-color: var(--color-surface-raised); }

/* ── Eyebrow : contexte au-dessus d'un titre, préfixe « // » dans le texte ─ */
.sz-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-instrument-text);
}

.sz-eyebrow--on-photo { color: var(--color-action-soft); }

/* ── Carte ──────────────────────────────────────────────────────────────── */
.sz-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--spacing-stack);
  padding: var(--spacing-card);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  background-color: var(--color-surface);
}

.sz-card__media {
  margin: calc(-1 * var(--spacing-card)) calc(-1 * var(--spacing-card)) var(--spacing-related);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.sz-card__media img { width: 100%; height: 100%; object-fit: cover; }

.sz-card__title {
  margin: 0;
  font-size: var(--text-title-sm);
  font-weight: 800;
  font-style: italic;
  line-height: var(--leading-title);
}

.sz-card__text { margin: 0; color: var(--color-content-muted); }

/* Carte cliquable (lien) : la bordure réagit, pas d'ombre floue. */
a.sz-card,
.sz-card--interactive {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-micro) var(--ease-micro), transform var(--duration-micro) var(--ease-micro);
}

a.sz-card:hover,
.sz-card--interactive:hover { border-color: var(--color-border-hover); transform: translateY(-2px); }

/* Carte sans marge interne : listes, classements (les lignes gèrent leur padding). */
.sz-card--flush { padding: 0; gap: 0; }

.sz-card--selected { border-color: var(--color-action); box-shadow: var(--shadow-glow-action); }
.sz-card--instrument { border-color: var(--color-instrument); box-shadow: var(--shadow-glow-instrument); }

/* ── Instrument : boîtier Carte au filet fin (chiffres, chrono, compteurs) ─ */
.sz-instrument {
  display: grid;
  justify-items: center;
  gap: var(--spacing-related);
  padding: var(--spacing-card) var(--spacing-cluster);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background-color: var(--color-instrument-box);
  text-align: center;
}

.sz-instrument__value {
  font-family: var(--font-mono);
  font-size: var(--text-data);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-content);
}

.sz-instrument__value--action { color: var(--color-action); } /* chrono, score, PinPoints */
.sz-instrument__value--instrument { color: var(--color-instrument-text); }

.sz-instrument__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-content-subtle);
}

/* ── Segments : progression en segments séparés ─────────────────────────── */
.sz-segments { display: flex; gap: var(--spacing-related); }

.sz-segments > span {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-sharp);
  background-color: var(--color-surface-raised);
}

.sz-segments > .is-done { background-color: var(--color-instrument); }

/* ── Puce (filtre) ──────────────────────────────────────────────────────── */
.sz-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--spacing-related) var(--spacing-cluster);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sharp);
  color: var(--color-content-muted);
  background-color: var(--color-surface);
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--duration-micro) var(--ease-micro), border-color var(--duration-micro) var(--ease-micro), background-color var(--duration-micro) var(--ease-micro);
}

.sz-chip:hover { border-color: var(--color-border-hover); color: var(--color-content); }

/* Sélectionné : neutre (le jaune est réservé à l'action, pas à un état). */
.sz-chip[aria-pressed="true"],
.sz-chip[aria-checked="true"] { border-color: var(--color-content); color: var(--color-content-invert); background-color: var(--color-content); }

/* ── Viseur : coins en équerre. Chaque variante a un sens. ──────────────
   Dessiné entièrement dans un <span class="sz-viewfinder__corners" aria-hidden="true">
   placé dans l'élément : aucun pseudo-élément de l'hôte n'est utilisé, il se
   pose donc sur n'importe quel composant (photo-carte, ligne de classement…). */
.sz-viewfinder { position: relative; }

.sz-viewfinder__corners {
  --vf-len: 28px;
  --vf-w: 4px;
  --vf-inset: 10px;
  --vf-paint: linear-gradient(var(--vf-color), var(--vf-color));
  position: absolute;
  inset: var(--vf-inset);
  z-index: var(--z-raised);
  pointer-events: none;
  background:
    var(--vf-paint) top left / var(--vf-len) var(--vf-w) no-repeat,
    var(--vf-paint) top left / var(--vf-w) var(--vf-len) no-repeat,
    var(--vf-paint) bottom right / var(--vf-len) var(--vf-w) no-repeat,
    var(--vf-paint) bottom right / var(--vf-w) var(--vf-len) no-repeat,
    var(--vf-paint-tr, none),
    var(--vf-paint-tr2, none),
    var(--vf-paint-bl, none),
    var(--vf-paint-bl2, none);
}

/* Cible : 4 coins jaunes = le lieu à retrouver. */
.sz-viewfinder--target .sz-viewfinder__corners {
  --vf-color: var(--color-action);
  --vf-paint-tr: var(--vf-paint) top right / var(--vf-len) var(--vf-w) no-repeat;
  --vf-paint-tr2: var(--vf-paint) top right / var(--vf-w) var(--vf-len) no-repeat;
  --vf-paint-bl: var(--vf-paint) bottom left / var(--vf-len) var(--vf-w) no-repeat;
  --vf-paint-bl2: var(--vf-paint) bottom left / var(--vf-w) var(--vf-len) no-repeat;
}

/* Info : 2 coins cyan (haut gauche, bas droite) = une annonce, une info. */
.sz-viewfinder--info .sz-viewfinder__corners { --vf-color: var(--color-instrument); }

/* Joueur : 2 petits coins jaunes = « toi » dans un classement. */
.sz-viewfinder--player .sz-viewfinder__corners { --vf-color: var(--color-action); --vf-len: 14px; --vf-w: 3px; --vf-inset: 4px; }

/* ── Polaroid cible : la photo à retrouver, datée ───────────────────────── */
.sz-polaroid {
  display: grid;
  gap: var(--spacing-stack);
  width: min(100%, 380px);
  margin: 0;
  padding: var(--spacing-cluster) var(--spacing-cluster) var(--spacing-card);
  border-radius: var(--radius-sharp);
  background-color: var(--color-content);
  box-shadow: var(--shadow-polaroid);
  transform: rotate(var(--polaroid-tilt, -4deg)); /* entre −6° et +6° */
}

.sz-polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.sz-polaroid figcaption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-family: var(--font-mono);
  color: var(--color-content-invert);
}

.sz-polaroid__label { font-size: var(--text-small); font-weight: 700; letter-spacing: var(--tracking-meta); }
.sz-polaroid__year { font-size: var(--text-title); font-weight: 800; line-height: 1; }

/* ── Photo-carte : photo + voile bas + texte posé dessus ────────────────── */
.sz-photo-card {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--spacing-tight);
  min-height: 320px;
  padding: var(--spacing-card);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-media);
  color: var(--color-content);
  text-decoration: none;
}

.sz-photo-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-feedback) var(--ease-standard);
}

.sz-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-veil-bottom);
}

a.sz-photo-card:hover > img { transform: scale(1.04); }

/* ── Classement ─────────────────────────────────────────────────────────── */
.sz-rank {
  display: grid;
  grid-template-columns: 3ch 1fr auto;
  align-items: center;
  gap: var(--spacing-cluster);
  min-height: 56px;
  padding: var(--spacing-stack) var(--spacing-cluster);
  border-top: 1px solid var(--color-border);
}

.sz-rank__position { font-family: var(--font-mono); font-weight: 800; color: var(--color-content-subtle); }
.sz-rank__name { font-weight: 700; }
.sz-rank__value { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-instrument-text); }
.sz-rank--you { background-color: var(--color-action-tint); }
.sz-rank--you .sz-rank__value { color: var(--color-action); }

/* ── Formulaire (page contact) ──────────────────────────────────────────── */
.sz-field { display: grid; gap: var(--spacing-related); }
.sz-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.sz-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-content-muted);
}

.sz-input,
.sz-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--spacing-stack) var(--spacing-cluster);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  color: var(--color-content);
  background-color: var(--color-surface);
  transition: border-color var(--duration-micro) var(--ease-micro), box-shadow var(--duration-micro) var(--ease-micro);
}

.sz-textarea { min-height: 160px; resize: vertical; }
.sz-input::placeholder,
.sz-textarea::placeholder { color: var(--color-content-subtle); }
.sz-input:hover,
.sz-textarea:hover { border-color: var(--color-border-hover); }
.sz-input:focus-visible,
.sz-textarea:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: var(--shadow-focus); }

.sz-input.is-valid,
.sz-textarea.is-valid { border-color: var(--color-success); }
.sz-input.is-invalid,
.sz-textarea.is-invalid { border-color: var(--color-danger); }

.sz-hint { font-size: var(--text-small); color: var(--color-content-subtle); }
.sz-error { font-size: var(--text-small); color: var(--color-danger-text); }

/* Carte de choix (bouton radio stylé) : inclinée à −4° comme les cartes de difficulté. */
.sz-choice { position: relative; display: block; }
.sz-choice input { position: absolute; opacity: 0; pointer-events: none; }

.sz-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--spacing-related) var(--spacing-cluster);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sharp);
  background-color: var(--color-surface);
  font-weight: 800;
  text-transform: uppercase;
  transform: skewX(var(--skew-soft));
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-micro), background-color var(--duration-micro) var(--ease-micro);
}

.sz-choice input:checked + span { border-color: var(--color-instrument); background-color: var(--color-instrument-tint); color: var(--color-instrument-text); }
.sz-choice input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ── Point de statut (« EN LIGNE », « ALPHA OUVERTE ») ──────────────────── */
.sz-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-related);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-instrument-text);
}

.sz-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-instrument);
  box-shadow: var(--shadow-glow-instrument);
}

/* ── Accessibilité ──────────────────────────────────────────────────────── */
.sz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}