/* ============================================================
   D3RF -- sram-reboot.css
   Page /SramReboot/ uniquement (VISUAL_SPEC makingof, 25/09/2026).
   Tout selecteur commence par .page-sram. Tokens de tokens.css
   uniquement : aucun hex, aucun degrade, aucun aplat d'accent.
   ============================================================ */

/* Accent projet : 3 surfaces max (barre d'accent ici, point et titre
   de card sur /projets/ via le frontmatter). */
.page-sram {
  --card-accent: var(--accent-sramreboot);
}

.page-sram .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- En-tete ---------- */
.page-sram .sram-pitch {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: var(--measure-lead);
  margin-top: var(--space-5);
}

.page-sram .sram-meta,
.page-sram .sram-label,
.page-sram .sram-pair figcaption,
.page-sram .sram-flip figcaption,
.page-sram .sram-objects-figure figcaption,
.page-sram .sram-defect-figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-mono);
  text-transform: uppercase;
  color: var(--text-code);
}

.page-sram .sram-meta {
  margin-top: var(--space-5);
  max-width: var(--measure-prose);
}

/* ---------- Juxtaposition 1986 | 2026 (hero, moteur) ---------- */
.page-sram .sram-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
.page-sram .sram-pair figure { margin: 0; }
.page-sram .sram-pair img,
.page-sram .sram-defect-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  image-rendering: auto;
}
.page-sram .sram-pair figcaption { margin-top: var(--space-3); }
.page-sram .sram-pair--wide { margin-top: var(--space-6); }

@media (min-width: 800px) {
  .page-sram .sram-pair { grid-template-columns: 1fr 1fr; }
}

/* Le hero ne passe pas sous la ligne de flottaison (critere 6) */
.page-sram .fiche-header { padding-bottom: var(--space-6); }

/* ---------- Recit en 4 temps : fil + noeuds ---------- */
.page-sram .sram-chapters .sram-chapter {
  position: relative;
  padding-left: var(--space-6);
  border-left: var(--stroke-hair) solid var(--line-default);
  padding-bottom: var(--space-7);
  margin-bottom: 0;
}
.page-sram .sram-chapters .sram-chapter::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--node-active);
  background: var(--bg-primary);
}
.page-sram .sram-chapter + .fiche-section:not(.sram-chapter) { margin-top: var(--space-7); }
.page-sram .sram-label { margin-bottom: var(--space-2); }
.page-sram .sram-chapter h2 { text-wrap: balance; }
.page-sram .sram-hint {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Noeud qui se remplit quand le chapitre entre dans l'ecran (CSS natif,
   repli visible sans support). */
@keyframes sram-node-on {
  from { transform: scale(0.6); background: var(--bg-primary); }
  to   { transform: scale(1);   background: var(--node-active); }
}
@supports (animation-timeline: view()) {
  .page-sram .sram-chapters .sram-chapter::before {
    animation: sram-node-on linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
}

/* ---------- Bascule 1986 / 2026 (CSS pur, radios natifs) ---------- */
.page-sram .sram-flip {
  margin: var(--space-6) 0 0;
  max-width: 560px;   /* « petit format » du rapport droits, aligne sur N64 */
}
.page-sram .sram-flip-stage {
  display: grid;
  aspect-ratio: 480 / 252;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}
.page-sram .sram-flip-stage img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}
.page-sram .sram-flip-stage .is-photo {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-card), visibility var(--dur-fast) var(--ease-card);
}
.page-sram .sram-flip input:nth-of-type(2):checked ~ .sram-flip-stage .is-photo {
  opacity: 1;
  visibility: visible;
}

.page-sram .sram-flip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.page-sram .sram-flip-pills label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  border: var(--stroke-hair) solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-instant) var(--ease-card), color var(--dur-instant) var(--ease-card), border-color var(--dur-instant) var(--ease-card);
}
.page-sram .sram-flip-pills label:hover {
  border-color: var(--node-active);
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.page-sram .sram-flip input:nth-of-type(1):checked ~ .sram-flip-pills label:nth-of-type(1),
.page-sram .sram-flip input:nth-of-type(2):checked ~ .sram-flip-pills label:nth-of-type(2) {
  background: var(--node-active);
  border-color: var(--node-active);
  color: var(--bg-primary);
}
.page-sram .sram-flip input:nth-of-type(1):focus ~ .sram-flip-pills label:nth-of-type(1),
.page-sram .sram-flip input:nth-of-type(2):focus ~ .sram-flip-pills label:nth-of-type(2),
.page-sram .sram-flip input:nth-of-type(1):focus-visible ~ .sram-flip-pills label:nth-of-type(1),
.page-sram .sram-flip input:nth-of-type(2):focus-visible ~ .sram-flip-pills label:nth-of-type(2) {
  outline: 2px solid var(--line-active);
  outline-offset: var(--focus-offset);
}
.page-sram .sram-flip figcaption { margin-top: var(--space-3); }

/* ---------- Objets detoures ---------- */
.page-sram .sram-objects-figure { margin: var(--space-7) 0 0; }
.page-sram .fiche-section .sram-objects {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}
.page-sram .sram-objects li { display: block; }
.page-sram .sram-objects img {
  display: block;
  width: 72px;
  height: 72px;
}

/* ---------- Equipe : metadonnees, jamais de logo ---------- */
.page-sram .sram-team {
  margin: 0 0 var(--space-5);
  max-width: var(--measure-prose);
}
.page-sram .sram-team > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--stroke-hair) solid var(--border);
}
.page-sram .sram-team > div:last-child { border-bottom: var(--stroke-hair) solid var(--border); }
.page-sram .sram-team dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-code);
}
.page-sram .sram-team dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  line-height: var(--lh-compact);
  color: var(--text-secondary);
}
@media (min-width: 800px) {
  .page-sram .sram-team > div {
    grid-template-columns: 15rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

/* ---------- Defauts assumes : anneau creux (vocabulaire EXPLORED) ---------- */
.page-sram .fiche-section .sram-defects li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-display);
  line-height: var(--lh-body);
  max-width: var(--measure-prose);
}
.page-sram .sram-defects li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--status-explored);
}
.page-sram .sram-defect-figure {
  margin: var(--space-6) 0 0;
  max-width: 560px;
}
.page-sram .sram-defect-figure figcaption { margin-top: var(--space-3); }

/* ---------- Appel a jouer ---------- */
.page-sram .fiche-cta .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.page-sram .sram-cta-note,
.page-sram .sram-cta-ghost {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}
.page-sram .sram-cta-ghost { font-size: var(--fs-small); }
.page-sram .sram-cta-ghost a {
  color: var(--text-secondary);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-card);
}
.page-sram .sram-cta-ghost a:hover { color: var(--text-primary); }
/* .btn-primary n'est defini que dans home.css (non charge ici) : meme
   geometrie, reprise sous le prefixe de page. */
.page-sram .btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--node-active);
  color: var(--bg-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-card);
}
.page-sram .btn-primary:hover,
.page-sram .btn-primary:focus-visible { transform: translateY(-2px); }

/* ---------- Credits et mention ---------- */
.page-sram .sram-credits {
  background: var(--bg-section-alt);
  padding: var(--section-padding) 0;
}
.page-sram .sram-credits-title {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--text-code);
  margin-bottom: var(--space-5);
}
.page-sram .sram-credits p {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin-bottom: var(--space-4);
}
.page-sram .sram-credits a {
  color: var(--text-primary);
  text-underline-offset: 3px;
}

/* ---------- Colonne meta : avant le recit sous 1024px, collante au-dela ---------- */
@media (max-width: 1023px) {
  .page-sram .fiche-sidebar { order: -1; }
}

/* ---------- Mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-sram .sram-flip-stage .is-photo,
  .page-sram .sram-flip-pills label,
  .page-sram .btn-primary,
  .page-sram .sram-cta-ghost a {
    transition-duration: 0.01ms !important;
  }
  .page-sram .sram-chapters .sram-chapter::before {
    animation: none !important;
  }
}