/* ==========================================================================
   RETROVAULT — css/seo.css
   Habillage des pages STATIQUES générées par scripts/build-seo.mjs :
   consoles/<id>.html, actu/*.html, guides/*.html, et le bloc « Guides & actus
   liés » posé en bas de consoles / modding / rachat / atelier-pc.

   Règle : ce fichier n'invente AUCUNE couleur et AUCUNE taille. Il ne fait que
   composer les tokens de css/tokens.css et les classes de css/forgeos.css
   (docs/DA-SPEC.md §12). Fond blanc, coins ronds, ombres colorées décalées,
   aucune capitale décorative, aucun emoji.
   ========================================================================== */

/* ── Squelette de page ──────────────────────────────────────────────────── */
.rv-page {
  padding-block: 40px 72px;
}

.rv-page .sect + .sect {
  margin-top: 48px;
}

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */
.rv-ariane {
  margin-bottom: 20px;
}
.rv-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--c-s);
  color: var(--gris-2);
}
.rv-ariane li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--indigo-clair);
}
.rv-ariane a {
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1.5px solid var(--bord-sep);
}
.rv-ariane a:hover {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}
.rv-ariane [aria-current="page"] {
  color: var(--encre);
  font-weight: 600;
}

/* ── En-tête de page ────────────────────────────────────────────────────── */
.rv-entete {
  max-width: 42ch;
  margin-bottom: 28px;
}
.rv-page.rv-article .rv-entete,
.rv-page.rv-hub .rv-entete {
  max-width: 62ch;
}
.rv-entete h1 {
  margin: 12px 0 0;
}
.rv-chapo {
  margin-top: 14px;
  font-size: var(--c-l);
  color: var(--gris);
}
.rv-meta {
  font-size: var(--c-s);
  color: var(--gris-2);
}
.rv-signature {
  margin-top: 14px;
}
.rv-statut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* ── Fiche console : média ──────────────────────────────────────────────── */
.rv-media,
.rv-achat {
  padding: 20px;
}
.rv-galerie {
  margin: 0;
  position: relative;
}
.rv-galerie .rv-shot {
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--indigo-pale);
}
.rv-galerie .rv-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.rv-galerie .rv-shot:not(.est-principale) {
  display: none;
}
/* Vignettes : à partir de la 2e photo, en bande sous la principale. */
.rv-galerie:has(.rv-shot:nth-child(2)) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.rv-galerie:has(.rv-shot:nth-child(2)) .rv-shot {
  display: block;
}
.rv-galerie:has(.rv-shot:nth-child(2)) .est-principale {
  grid-column: 1 / -1;
}
.rv-galerie figcaption {
  position: static;
  display: inline-block;
  margin-top: 12px;
}
.rv-galerie:has(.rv-shot:nth-child(2)) figcaption {
  grid-column: 1 / -1;
  margin-top: 2px;
}

/* ── Fiche console : achat ──────────────────────────────────────────────── */
.rv-prix {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
}
.rv-prix-barre {
  color: var(--gris-2);
  font-size: var(--e-s);
}
.rv-desc {
  color: var(--gris);
  margin-bottom: 20px;
}

/* P7 — réassurance sur la carte d'achat : ce qui est refait, puis garantie,
   durée de test et état. Micro-typo assumée : c'est de la méta. */
.rv-refait,
.rv-rassure {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris-2);
}
.rv-refait { color: var(--gris); }
.rv-refait b { color: var(--encre); font-weight: 600; }
.rv-rassure {
  border-top: 1.5px solid var(--bord-sep);
  padding-top: 10px;
  margin-bottom: 18px;
}
.rv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rv-note {
  margin-top: 14px;
  font-size: var(--c-s);
  color: var(--gris-2);
}

/* ── Caractéristiques ───────────────────────────────────────────────────── */
.rv-fiche .bento h3,
.rv-item h3 {
  margin: 0 0 12px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-m);
  letter-spacing: -0.025em;
}
.rv-fiche .bento h3:not(:first-child) {
  margin-top: 26px;
}
.rv-specs {
  margin: 0;
}
.rv-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--bord-sep);
}
.rv-specs > div:last-child {
  border-bottom: 0;
}
.rv-specs dt {
  color: var(--gris-2);
  font-size: var(--c-s);
}
.rv-specs dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.rv-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-liste li {
  position: relative;
  padding: 7px 0 7px 22px;
  color: var(--gris);
}
.rv-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-p);
  background: var(--indigo-clair);
}
.rv-travaux li::before {
  background: var(--menthe);
}

/* ── Cartes de liens internes ───────────────────────────────────────────── */
.rv-carte-lien {
  display: block;
  padding: 22px;
  text-decoration: none;
  color: inherit;
}
.rv-carte-lien h2,
.rv-carte-lien h3 {
  margin: 0 0 8px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-m);
  letter-spacing: -0.025em;
}
.rv-carte-lien p {
  margin: 0;
  color: var(--gris);
  font-size: var(--c-m);
}

/* ── Cartes d'article (hubs + bloc de maillage) ─────────────────────────── */
.rv-carte-art {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.rv-carte-img {
  background: var(--indigo-pale);
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}
.rv-carte-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rv-carte-corps {
  padding: 20px;
}
.rv-carte-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.rv-carte-art h3 {
  margin: 0 0 8px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-m);
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.rv-carte-art p {
  margin: 0;
  color: var(--gris);
  font-size: var(--c-m);
}

/* ── Segments RÉTRO / NEW GEN ───────────────────────────────────────────── */
.rv-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.rv-segments .est-actif {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

/* ── Corps d'article ────────────────────────────────────────────────────── */
.rv-entete-img {
  margin: 0 0 32px;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--indigo-pale);
  position: relative;
}
.rv-entete-img img {
  display: block;
  width: 100%;
  height: auto;
}
.rv-corps {
  max-width: 68ch;
  font-size: var(--c-l);
  color: var(--encre);
}
.rv-corps h2 {
  margin: 44px 0 14px;
  font-size: var(--t-xl);
}
.rv-corps h3 {
  margin: 32px 0 12px;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-l);
  letter-spacing: -0.025em;
}
.rv-corps p {
  margin: 0 0 18px;
  color: var(--gris);
}
.rv-corps ul,
.rv-corps ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--gris);
}
.rv-corps li {
  margin-bottom: 8px;
}
.rv-corps a {
  color: var(--indigo);
}
.rv-encadre {
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--indigo-pale);
  border-radius: var(--r-2);
  border-left: 6px solid var(--indigo);
}
.rv-encadre p {
  margin: 0;
  color: var(--indigo-txt);
}
.rv-ref {
  font-size: 0.78em;
  font-weight: 600;
  vertical-align: super;
  text-decoration: none;
  color: var(--indigo);
  padding: 0 1px;
}
.rv-ref:hover {
  text-decoration: underline;
}

/* ── Items de guide ─────────────────────────────────────────────────────── */
.rv-item {
  padding: 22px;
}
.rv-item-rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.rv-item-img {
  position: relative;
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--indigo-pale);
  margin-bottom: 16px;
}
.rv-item-img img {
  display: block;
  width: 100%;
  height: auto;
}
.rv-item p {
  color: var(--gris);
}
.rv-cote {
  font-size: var(--c-s);
  color: var(--gris-2);
}
.rv-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.rv-item-actions .pill {
  font-size: var(--c-s);
  min-height: 44px;
}

/* ── FAQ, sources, transparence ─────────────────────────────────────────── */
.rv-sources {
  max-width: 68ch;
}
.rv-liste-sources {
  margin: 0;
  padding-left: 22px;
  color: var(--gris);
  font-size: var(--c-m);
}
.rv-liste-sources li {
  margin-bottom: 10px;
  scroll-margin-top: 96px;
}
.rv-liste-sources li:target {
  background: var(--jaune-pale);
  border-radius: var(--r-0);
  padding: 4px 8px;
  margin-left: -8px;
}
.rv-domaine {
  color: var(--indigo-txt);
}
.rv-transparence {
  max-width: 68ch;
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--indigo-pale);
  border-radius: var(--r-2);
  color: var(--indigo-txt);
  font-size: var(--c-s);
}

/* ── Vide ───────────────────────────────────────────────────────────────── */
.rv-vide {
  padding: 32px;
  border: 1.5px dashed var(--bord-champ);
  border-radius: var(--r-2);
  color: var(--gris);
  text-align: center;
}

/* ── Bloc de maillage posé en bas des pages existantes ──────────────────── */
.rv-lies {
  margin-top: 56px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rv-page {
    padding-block: 24px 56px;
  }
  .rv-media,
  .rv-achat,
  .rv-item {
    padding: 16px;
  }
  .rv-galerie:has(.rv-shot:nth-child(2)) {
    grid-template-columns: repeat(3, 1fr);
  }
  .rv-corps {
    font-size: var(--c-m);
  }
  .rv-actions .pill,
  .rv-item-actions .pill {
    width: 100%;
    justify-content: center;
  }
}

/* Pas d'animation imposée : le mouvement reste géré par forgeos.css. */
@media (prefers-reduced-motion: reduce) {
  .rv-carte-art,
  .rv-carte-lien {
    transition: none;
  }
}

/* ==========================================================================
   QA v4 (16/09) — cibles tactiles des pages générées
   Le fil d'Ariane des fiches / hubs statiques faisait 20 px de haut au doigt.
   On le remonte à 44 px sous 720 px, sans toucher à sa taille de texte.
   Les appels de note `.rv-ref` ([1], [2]…) restent hors périmètre : ce sont
   des liens EN LIGNE dans une phrase (exemption WCAG 2.5.8), et les agrandir
   casserait l'interligne du corps d'article.
   ========================================================================== */
.rv-ariane a, .rv-ariane [aria-current="page"] {
  display: inline-flex; align-items: center; min-height: 44px;
}
.rv-ariane ol { align-items: center; }

/* QA v4 (16/09) — les questions de FAQ des pages générées sont des <summary>,
   donc des CONTRÔLES : 25 px de haut au doigt, sous le seuil de 44 px.
   On les remonte sans changer la taille du texte ni l'alignement du chevron. */
.rv-faq .faq-i > summary,
.rv-page .faq-i > summary,
details.faq-i > summary {
  display: flex; align-items: center;
  min-height: 44px;
}