/* patrickostertag.ch — les couleurs d'ok-ia.ch, en mode noir.
   Le fond reprend --terminal-bg d'OK-ia ; l'ambre #E8972E reste l'accent, éclairci en #FBC168
   pour le texte (11,5:1 sur le fond, la valeur retenue pour le terminal d'OK-ia). */
:root {
  --bg: #131310;
  --surface: #1B1B17;
  --surface-2: #23231E;
  --text: #EDEBE4;
  --muted: #A3A197;
  --border: #2E2D27;
  --accent: #E8972E;
  --accent-text: #FBC168;
  --radius: 4px;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --titre: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px 80px; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

img { max-width: 100%; display: block; }

/* ── En-tête ─────────────────────────────────────────── */
.entete {
  max-width: 1040px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px 20px;
}
.marque {
  font-family: var(--titre); font-weight: 900; font-size: 22px; color: var(--text);
  letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 2px;
}
.marque:hover { text-decoration: none; }
.marque .point { color: var(--accent); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  font-family: var(--mono); font-size: 14px; color: var(--muted);
  padding: 6px 10px; border-radius: var(--radius);
}
.nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent-text); background: var(--surface); }

/* ── Titres ──────────────────────────────────────────── */
h1, h2, h3 { line-height: 1.2; }
h1 { font-family: var(--titre); font-weight: 900; font-size: clamp(38px, 7vw, 64px); letter-spacing: -0.02em; }
h1 .accent { color: var(--accent); }
.commande {
  font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--accent-text);
  margin: 64px 0 20px; display: flex; align-items: center; gap: 10px;
}
.commande::before { content: "$"; color: var(--muted); }
.commande::after { content: ""; flex: 1; height: 1px; background: var(--border); }
h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }

.chapeau { font-size: 21px; color: var(--muted); max-width: 680px; margin-top: 18px; }
.chapeau strong { color: var(--text); font-weight: 600; }
.discret { color: var(--muted); font-size: 15px; }
.mono { font-family: var(--mono); }

/* ── Accueil ─────────────────────────────────────────── */
.accueil { padding: 56px 0 8px; }
.accueil .invite { font-family: var(--mono); color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.accueil .invite span { color: var(--accent-text); }
.curseur { display: inline-block; width: 0.55em; height: 1.05em; background: var(--accent); vertical-align: -0.15em; margin-left: 4px; animation: clignote 1.1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .curseur { animation: none; } }

.liens-rapides { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bouton {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 14px; color: var(--text);
  border: 1px solid var(--border); background: var(--surface);
  padding: 9px 14px; border-radius: var(--radius);
}
.bouton:hover { border-color: var(--accent); text-decoration: none; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #131310; font-weight: 600; }
.bouton svg { width: 16px; height: 16px; flex: none; }

/* Pleine largeur : aligné sur les cartes du dessous (« Derniers disques entrés » à droite). */
.direct {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center;
  margin-top: 28px; padding: 10px 18px 10px 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
}
.direct[hidden] { display: none; }
.direct .pochette { display: block; }
.direct a.t { color: var(--text); }
.direct a.t:hover { color: var(--accent-text); }
/* Infos Wikidata sous le morceau : compactes, en gris, liens Wikipédia en ambre. */
.direct .infos { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.direct .infos .ligne { white-space: normal; }
.direct .infos b { color: var(--text); font-weight: 600; }
.direct img, .direct .vide { width: 52px; height: 52px; border-radius: 3px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.direct > span:last-child { min-width: 0; display: flex; flex-direction: column; }
/* Morceau en cours : pochette 5× plus grande (52 → 260 px), le temps de l’écoute.
   Les listes « Dernières écoutes » gardent leurs petites pochettes (demande du 24/09/2026). */
.direct { transition: grid-template-columns .3s ease; }
.direct.joue { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; padding-right: 22px; }
.direct.joue img, .direct.joue .vide { width: 260px; height: 260px; border-radius: 4px; }
.direct.joue .t { font-size: 20px; white-space: normal; }
.direct.joue .a { white-space: normal; }
.direct .etat { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.direct .etat.en-cours { text-transform: uppercase; }
.direct .t { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct .a { font-size: 15px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[hidden] { display: none !important; }

/* Cartes de l'accueil. Sur grand écran, la carte des publications (textes + images) donne la
   hauteur de la rangée ; les deux autres la remplissent : leur contenu est sorti du flux
   (position absolute) pour ne pas imposer de hauteur, et site.js masque les lignes qui ne
   tiennent pas entières (ajusterRemplissage). En colonne unique, rien de tout cela : on
   s'en tient aux premières lignes. */
@media (min-width: 960px) {
  .cartes-accueil { grid-template-columns: repeat(3, 1fr); }
  .cartes-accueil .remplir { flex: 1; min-height: 0; position: relative; overflow: hidden; }
  .cartes-accueil .remplir > * { position: absolute; top: 0; left: 0; right: 0; }
}
@media (max-width: 959px) {
  .cartes-accueil .remplir .piste:nth-child(n+5),
  .cartes-accueil .remplir .disque:nth-child(n+10) { display: none; }
}

.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.carte {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.carte .suite { margin-top: auto; font-family: var(--mono); font-size: 14px; }
.etiquette { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* ── Posts Mastodon ──────────────────────────────────── */
.fil { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.post { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px 22px; }
.post .meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.post .meta a { color: var(--muted); }
.post .meta a:hover { color: var(--accent-text); }
.post .corps { overflow-wrap: anywhere; }
.post .corps p + p { margin-top: 0.7em; }
.post .corps .invisible { display: none; }
.post .corps .ellipsis::after { content: "…"; }
.post .medias { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 14px; }
.post .medias a { position: relative; display: block; }
.post .medias video { width: 100%; max-height: 360px; border-radius: var(--radius); background: #000; }
.post .medias img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); }
.post .medias .video::after {
  content: "▶"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.post .apercu {
  display: grid; grid-template-columns: 140px 1fr; margin-top: 14px; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
}
.post .apercu:hover { border-color: var(--accent); text-decoration: none; }
.post .apercu img { width: 100%; height: 100%; min-height: 96px; object-fit: cover; }
.post .apercu > span { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.post .apercu .site { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.post .apercu .titre { font-weight: 600; font-size: 15px; line-height: 1.35; }
@media (max-width: 560px) { .post .apercu { grid-template-columns: 1fr; } .post .apercu img { max-height: 180px; } }
.post .stats { display: flex; gap: 16px; margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.post details summary { cursor: pointer; color: var(--accent-text); font-family: var(--mono); font-size: 14px; }
.post details[open] summary { margin-bottom: 10px; }
.post.compact { padding: 0; background: none; border: 0; }
.post.compact + .post.compact { border-top: 1px solid var(--border); padding-top: 12px; }
.post.compact .corps { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post.compact .meta { margin-bottom: 4px; }
.post.compact .medias { display: block; margin-top: 10px; }
.post.compact .medias img { aspect-ratio: 16 / 9; max-height: 160px; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filtres button {
  font-family: var(--mono); font-size: 13px; color: var(--muted); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
}
.filtres button[aria-pressed="true"] { color: #131310; background: var(--accent); border-color: var(--accent); }

/* ── Musique ─────────────────────────────────────────── */
.pochettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pochettes.mini { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.disque { display: flex; flex-direction: column; gap: 6px; color: var(--text); min-width: 0; }
.disque:hover { text-decoration: none; }
.disque img, .disque .vide {
  aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: var(--radius);
  background: var(--surface-2); transition: transform .15s;
}
.disque .vide { display: grid; place-items: center; color: var(--muted); font-size: 32px; }
.disque:hover img { transform: translateY(-3px); }
.disque .t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.disque .a, .disque .d { font-size: 13px; color: var(--muted); line-height: 1.3; }
.pochettes.mini .t, .pochettes.mini .a, .pochettes.mini .d { display: none; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 28px; }
.chiffre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; }
.chiffre b { display: block; font-family: var(--titre); font-weight: 900; font-size: 32px; color: var(--accent-text); line-height: 1.1; }
.chiffre span { font-size: 14px; color: var(--muted); }

.barres { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.barres li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 12px; align-items: center; font-size: 15px; }
.barres .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres .jauge { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.barres .jauge i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.barres .val { font-family: var(--mono); font-size: 13px; color: var(--muted); min-width: 3ch; text-align: right; }

.pistes { list-style: none; display: flex; flex-direction: column; }
.piste { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.piste:last-child { border-bottom: 0; }
.piste img, .piste .vide { width: 48px; height: 48px; border-radius: 3px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
/* Texte compact à côté des pochettes : titre sur 2 lignes au plus (« … » au-delà), artiste sur 1.
   Les titres « feat. … » à rallonge occupaient jusqu'à 6 lignes dans la carte de l'accueil. */
.piste > div { min-width: 0; }
.piste .t {
  font-weight: 600; font-size: 13.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.piste .a { font-size: 12.5px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piste .quand { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.en-cours { color: var(--accent-text) !important; }
.en-cours::before { content: "● "; animation: clignote 1.6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .en-cours::before { animation: none; } }

.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.bloc-vide { color: var(--muted); font-size: 15px; font-style: italic; }

/* ── CV ──────────────────────────────────────────────── */
.avatar { margin: 6px 0 22px; }
.avatar a { display: inline-block; border-radius: 12px; }
.avatar img {
  width: 200px; height: 200px; object-fit: cover; border-radius: 12px;
  border: 2px solid var(--border); background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(232,151,46,.15), 0 12px 40px rgba(0,0,0,.45);
}
.avatar a:hover img { border-color: var(--accent); }
@media (max-width: 560px) { .avatar img { width: 160px; height: 160px; } }
.specs { width: 100%; border-collapse: collapse; font-size: 16px; }
.specs th, .specs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.specs th { font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--accent-text); width: 150px; white-space: nowrap; }
.frise { list-style: none; border-left: 2px solid var(--border); margin-left: 6px; }
.frise li { position: relative; padding: 0 0 28px 26px; }
.frise li::before {
  content: ""; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.frise li:last-child::before { background: var(--accent); }
.frise .quand { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.frise .quand code { color: var(--accent-text); }
.frise p { color: var(--muted); font-size: 16px; margin-top: 4px; }
.citation { border-left: 3px solid var(--accent); padding: 6px 0 6px 20px; font-size: 21px; font-style: italic; max-width: 720px; }
.citation + p { margin-top: 16px; max-width: 720px; color: var(--muted); }
.jetons { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.jetons li { font-family: var(--mono); font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 3px; }
.prose { max-width: 720px; }
.prose p + p { margin-top: 0.8em; }

/* ── Galerie ─────────────────────────────────────────── */
/* Mur justifié : chaque tuile grandit selon son format (--r = largeur / hauteur), la dernière
   ligne ne s'étire pas (pseudo-élément ::after qui absorbe l'espace restant). */
.mur { display: flex; flex-wrap: wrap; gap: 8px; }
.mur::after { content: ""; flex-grow: 999999; }
.tuile {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  flex-grow: calc(var(--r) * 100); flex-basis: calc(var(--r) * 240px); background: var(--surface-2);
}
.tuile img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform .35s ease, filter .35s; }
.tuile:hover img { transform: scale(1.035); filter: brightness(1.08); }
.tuile .legende {
  position: absolute; inset: auto 0 0 0; padding: 28px 12px 10px; display: flex; justify-content: space-between;
  gap: 8px; font-size: 14px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75));
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.tuile .legende span { font-family: var(--mono); font-size: 12px; color: var(--accent-text); }
.tuile:hover .legende, .tuile:focus-visible .legende { opacity: 1; transform: none; }
@media (hover: none) { .tuile .legende { opacity: 1; transform: none; } }

.bloc-carte .filtres { margin-bottom: 14px; }
.bloc-carte .filtres.mots { margin-top: -4px; align-items: center; }
/* Ligne du temps des iPhone : une ligne par appareil, sa période d'usage sur l'axe des années. */
.chronologie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 14px; }
.chronologie .etiquette-filtre { padding-top: 3px; font-family: var(--mono); color: var(--accent-text); font-size: 13px; }
.appareils-liste { display: flex; flex-direction: column; gap: 3px; }
.appareil {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: center;
  background: none; border: 0; padding: 2px 4px; border-radius: 4px; cursor: pointer; color: var(--muted);
  font-family: var(--mono); font-size: 12px; text-align: left;
}
.appareil:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.appareil:disabled { opacity: .35; cursor: default; }
.appareil .nom small { color: var(--muted); opacity: .8; }
.appareil[aria-pressed="true"] { color: var(--accent-text); background: var(--surface); }
.piste-temps { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); }
.piste-temps .periode { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--muted); opacity: .6; }
.appareil:hover .periode, .appareil[aria-pressed="true"] .periode { background: var(--accent); opacity: 1; }
.graduations { position: relative; height: 16px; margin-left: 130px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.graduations span { position: absolute; top: 2px; transform: translateX(-50%); }
@media (max-width: 560px) {
  .chronologie { grid-template-columns: 1fr; }
  .appareil { grid-template-columns: 92px minmax(0, 1fr); }
  .graduations { margin-left: 106px; }
  .graduations span:nth-child(even) { display: none; }
}
.filtres.mots button { font-size: 12px; padding: 3px 10px; }
.filtres .etiquette-filtre { font-family: var(--mono); color: var(--accent-text); font-size: 14px; margin-right: 2px; }
.fiche-mots button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.fiche-mots li:hover { border-color: var(--accent); color: var(--accent-text); }
.maplibregl-ctrl-group .ctrl-depart span { font-size: 18px; line-height: 29px; color: #333; display: block; }
.mur-zone { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 20px; align-items: start; }
.mur .annee {
  flex-basis: 100%; font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--accent-text);
  padding: 18px 0 4px; scroll-margin-top: 20px;
}
.mur .annee:first-child { padding-top: 0; }
.ascenseur {
  position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px;
  padding: 6px 0 6px 14px; border-left: 2px solid var(--border); touch-action: none; user-select: none;
}
.ascenseur .etage {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 6px 8px; border: 0; border-radius: var(--radius); background: none; cursor: pointer; text-align: left;
  font-family: var(--mono); color: var(--muted);
}
.ascenseur .etage .an { font-size: 14px; line-height: 1.2; }
.ascenseur .etage .nb { font-size: 11px; opacity: .7; }
.ascenseur .etage:hover { color: var(--text); }
.ascenseur .etage[aria-current="true"] { color: #131310; }
.ascenseur .cabine {
  position: absolute; left: 12px; right: 0; top: 0; height: 44px; border-radius: var(--radius);
  background: var(--accent); transition: transform .25s ease; pointer-events: none;
}
.ascenseur .cabine::before {
  content: ""; position: absolute; left: -19px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg);
}
@media (prefers-reduced-motion: reduce) { .ascenseur .cabine { transition: none; } }
@media (max-width: 640px) {
  .mur-zone { grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; }
  .ascenseur { padding-left: 8px; }
  .ascenseur .etage { padding: 6px 4px; }
  .ascenseur .etage .an { font-size: 12px; }
  .ascenseur .cabine { left: 6px; }
  .ascenseur .cabine::before { left: -13px; }
}
.carte-galerie { height: 460px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.bulle-photo .maplibregl-popup-content { padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.bulle-photo .maplibregl-popup-tip { display: none; }
.bulle-photo img { width: 180px; border-radius: 3px; }
.bulle-photo span { display: block; font-size: 13px; padding: 6px 2px 0; }
.maplibregl-ctrl-attrib { font-size: 11px; }

.visionneuse {
  width: min(1400px, 96vw); height: min(900px, 92vh); max-width: none; max-height: none; margin: auto;
  padding: 0; border: 1px solid var(--border); border-radius: 8px; background: #0B0B09; color: var(--text);
  display: none; grid-template-columns: 1fr 340px; overflow: hidden;
}
.visionneuse[open] { display: grid; }
.visionneuse::backdrop { background: rgba(5,5,4,.88); backdrop-filter: blur(4px); }
.visionneuse .scene { position: relative; display: grid; place-items: center; min-height: 0; background: #000; touch-action: pan-y; }
.visionneuse .grande { max-width: 100%; max-height: 100%; object-fit: contain; }
.visionneuse .nav, .visionneuse .fermer {
  position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(19,19,16,.6);
  width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; display: grid; place-items: center;
}
.visionneuse .nav { top: 50%; transform: translateY(-50%); }
.visionneuse .precedente { left: 14px; }
.visionneuse .suivante { right: 14px; }
.visionneuse .nav:disabled { opacity: 0; pointer-events: none; }
.visionneuse .nav:hover, .visionneuse .fermer:hover { background: var(--accent); color: #131310; }
.visionneuse .fermer { top: 12px; right: 12px; }
.visionneuse .fiche { padding: 56px 24px 24px; overflow-y: auto; border-left: 1px solid var(--border); background: var(--surface); }
.fiche .commande-fiche { font-family: var(--mono); font-size: 13px; color: var(--accent-text); margin-bottom: 14px; }
.fiche .commande-fiche::before { content: "$ "; color: var(--muted); }
.fiche h2 { font-family: var(--titre); font-weight: 900; font-size: 28px; line-height: 1.15; margin-bottom: 10px; }
.fiche .description { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.fiche .bande-son { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.fiche .bande-son img, .fiche .bande-son .vide { width: 64px; height: 64px; flex: none; border-radius: 6px; object-fit: cover; }
.fiche .bande-son .vide { display: grid; place-items: center; background: var(--surface); color: var(--accent-text); font-size: 24px; }
.fiche .bande-son > span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.fiche .bande-son .quand { font-family: var(--mono); font-size: 11px; color: var(--accent-text); margin-bottom: 2px; }
.fiche .bande-son b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche .bande-son b a { color: inherit; }
.fiche .bande-son .a { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile .note { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(19,19,16,.75); color: var(--accent-text); font-size: 13px; pointer-events: none; }
.fiche .description .auto { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; opacity: .7; }
.exif { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--mono); font-size: 13px; margin: 18px 0; }
.exif dt { color: var(--muted); }
.exif dd { color: var(--text); overflow-wrap: anywhere; }
.fiche .jetons { margin-bottom: 18px; }
.fiche .bouton { cursor: pointer; }
@media (max-width: 860px) {
  .visionneuse { width: 100vw; height: 100dvh; border-radius: 0; border: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 62%) auto; }
  .visionneuse .fiche { border-left: 0; border-top: 1px solid var(--border); padding: 18px 20px 28px; }
  .carte-galerie { height: 360px; }
}

.apercu-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.apercu-galerie a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); }
.apercu-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.apercu-galerie a:hover img { transform: scale(1.05); }
.apercu-galerie img.entrante { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease, transform .3s; }
.apercu-galerie img.entrante.visible { opacity: 1; }

/* ── Voyage (carte de la galerie) ─────────────────────── */
.ctrl-voyage-groupe { margin: 0 0 10px 10px !important; }
/* Bouton discret sur la carte (le grand bouton est en haut de la page). */
.ctrl-voyage { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border: 1px solid rgba(232,151,46,.7); border-radius: 999px; background: rgba(19,19,16,.85); color: var(--accent-text); cursor: pointer; font-family: var(--mono); font-size: 12px; }
.ctrl-voyage:hover { background: var(--accent); color: #131310; }
.ctrl-voyage .icone { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #131310; font-size: 9px; padding-left: 1px; }
.en-voyage .ctrl-voyage-groupe { display: none; }
/* Grand bouton en haut de la galerie : voyage en plein écran. */
.grand-voyage { display: inline-flex; align-items: center; gap: 16px; margin-top: 26px; padding: 12px 28px 12px 12px; border: 0; border-radius: 999px; background: var(--accent); color: #131310; cursor: pointer; font: inherit; text-align: left; box-shadow: 0 10px 34px rgba(232,151,46,.4); animation: appel-voyage 2.6s ease-in-out infinite; transition: transform .2s, background .2s; }
.grand-voyage[hidden] { display: none; }
.grand-voyage:hover { background: var(--accent-text); transform: translateY(-2px); }
.grand-voyage .icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #131310; color: var(--accent-text); font-size: 22px; padding-left: 4px; }
.grand-voyage b { display: block; font-family: var(--titre); font-weight: 900; font-size: 26px; line-height: 1.1; }
.grand-voyage small { display: block; font-family: var(--mono); font-size: 13px; opacity: .8; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .grand-voyage { animation: none; } }
@media (max-width: 560px) { .grand-voyage { gap: 12px; padding: 10px 20px 10px 10px; } .grand-voyage .icone { width: 44px; height: 44px; font-size: 18px; } .grand-voyage b { font-size: 20px; } }
/* Plein écran : API du navigateur, ou repli CSS (iPhone). Carnet plus grand. */
.carte-galerie.plein-ecran { position: fixed; inset: 0; z-index: 1000; height: 100dvh !important; border-radius: 0; border: 0; }
html.sans-defilement { overflow: hidden; }
.carte-galerie:fullscreen { height: 100vh; border-radius: 0; }
.carte-galerie:fullscreen .carnet, .carte-galerie.plein-ecran .carnet { width: min(420px, calc(100% - 20px)); bottom: 36px; left: 20px; font-size: 15px; }
.carte-galerie:fullscreen .carnet-lieu, .carte-galerie.plein-ecran .carnet-lieu { font-size: 20px; }
@keyframes appel-voyage { 0%, 100% { box-shadow: 0 6px 22px rgba(232,151,46,.35), 0 0 0 0 rgba(232,151,46,.45); } 50% { box-shadow: 0 6px 22px rgba(232,151,46,.5), 0 0 0 10px rgba(232,151,46,0); } }
.carnet { position: absolute; left: 10px; bottom: 28px; z-index: 2; width: min(340px, calc(100% - 20px)); padding: 12px; border-radius: 8px; background: rgba(19,19,16,.92); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(6px); font-size: 14px; }
.carnet-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.carnet-quand { font-family: var(--mono); font-size: 11px; color: var(--accent-text); }
.carnet-boutons { display: flex; gap: 2px; }
.carnet-boutons button { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; }
.carnet-boutons button:hover { border-color: var(--accent); color: var(--accent-text); }
.carnet-lieu { display: block; font-size: 16px; margin-bottom: 8px; }
.carnet-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; position: relative; }
.carnet-photos button { padding: 0; border: 0; background: none; cursor: pointer; }
.carnet-photos img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 4px; }
.carnet-photos .plus { position: absolute; right: 4px; bottom: 4px; font-family: var(--mono); font-size: 11px; background: rgba(19,19,16,.8); padding: 0 5px; border-radius: 3px; }
.carnet-son { display: flex; gap: 10px; align-items: center; }
.carnet-son img, .carnet-son .vide { width: 40px; height: 40px; flex: none; border-radius: 4px; object-fit: cover; }
.carnet-son .vide { display: grid; place-items: center; background: var(--surface); color: var(--accent-text); }
.carnet-son > span { display: flex; flex-direction: column; min-width: 0; }
.carnet-son small { font-family: var(--mono); font-size: 10px; color: var(--accent-text); }
.carnet-son > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carnet-barre { height: 3px; margin-top: 10px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.carnet-barre i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
@media (max-width: 560px) { .carnet { bottom: 8px; left: 8px; padding: 10px; font-size: 13px; } .carnet-photos { grid-template-columns: repeat(4, 1fr); } }

/* ── Carte sonore (musique) ──────────────────────────── */
.carte-sonore svg { width: 100%; height: auto; display: block; margin-bottom: 14px; }
.carte-sonore path { fill: var(--surface-2); stroke: var(--bg); stroke-width: .4; }
.carte-sonore path.habite { fill: var(--accent); cursor: pointer; transition: fill-opacity .2s; }
.carte-sonore path.habite:hover { fill-opacity: 1 !important; }
.carte-sonore path.choisi { fill: var(--accent-text); fill-opacity: 1 !important; stroke: var(--text); stroke-width: .8; }
.pochettes.sonores { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; font-size: 14px; }
.pays-sonores small { color: var(--muted); margin-left: 2px; }
.pays-sonores button[aria-pressed="true"] small { color: inherit; }

/* ── Ce jour-là (accueil) ────────────────────────────── */
.ce-jour-titre { margin: -6px 0 14px; }
.ce-jour { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.souvenir { display: flex; flex-direction: column; gap: 2px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; padding-bottom: 12px; }
.souvenir:hover { text-decoration: none; border-color: var(--accent); }
.souvenir img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 8px; transition: transform .3s; }
.souvenir .quand { padding: 0 12px; font-family: var(--mono); font-size: 12px; color: var(--accent-text); }
.souvenir .ou { padding: 0 12px; font-size: 15px; font-weight: 600; }
.souvenir .son { padding: 0 12px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── iPhone : voyage dans le temps (iphones.html) ─────── */
.evolution { margin-top: 8px; }
.evolution-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 12px; }
.courbe { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 14px 10px; }
.courbe figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.barres-temps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden; gap: 4px; height: 120px; align-items: end; }
.barre-temps { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; color: var(--text); }
.barre-temps:hover { text-decoration: none; }
.barre-temps i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .75; transition: opacity .2s; }
.barre-temps:hover i { opacity: 1; }
.barre-temps { min-width: 0; }
.barre-temps small { font-family: var(--mono); font-size: 9px; color: var(--accent-text); margin-bottom: 2px; white-space: nowrap; letter-spacing: -.02em; }
/* Petit écran : seize colonnes de ~18 px. Valeurs au survol seulement, une année sur deux. */
@media (max-width: 560px) {
  .barre-temps small { visibility: hidden; }
  .barre-temps:hover small, .barre-temps:focus small { visibility: visible; }
  .barre-temps:nth-child(even) span { visibility: hidden; }
}
.barre-temps span { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 4px; }

.stations { list-style: none; position: relative; margin-top: 56px; }
.stations::before { content: ""; position: absolute; left: 104px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--border), var(--accent) 50%, var(--border)); }
.station { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 34px; padding: 28px 0; position: relative; }
.station::before { content: ""; position: absolute; left: 98px; top: 44px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); transition: background .3s, transform .3s; }
.station.active::before { background: var(--accent); transform: scale(1.3); box-shadow: 0 0 0 6px rgba(232,151,46,.18); }
.station-an { font-family: var(--titre); font-weight: 900; font-size: 30px; color: var(--muted); text-align: right; padding-top: 28px; transition: color .3s; }
.station.active .station-an { color: var(--accent-text); }
.station-corps { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 22px 24px; transition: border-color .3s; }
.station.active .station-corps { border-color: rgba(232,151,46,.55); }
.station-date { font-size: 12px; color: var(--accent-text); }
.station h2 { font-family: var(--titre); font-weight: 900; font-size: 32px; margin: 4px 0 0; }
.station h2 { display: flex; align-items: center; gap: 12px; }
.icone-iphone { width: 22px; height: 40px; flex: none; }
.icone-iphone .b { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.5; }
.icone-iphone .m { fill: #0D0D0B; stroke: var(--border); stroke-width: 1; }
.icone-iphone .l { fill: #0D0D0B; stroke: var(--accent); stroke-width: 1.3; }
.icone-iphone .c { fill: var(--accent-text); opacity: .5; }
.icone-iphone .f { fill: var(--accent-text); }
.icone-iphone.icone-duo { width: 32px; }
.icone-iphone .e { fill: rgba(232,151,46,.14); stroke: rgba(232,151,46,.45); stroke-width: .8; }
.icone-iphone .h { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.icone-iphone .bande { fill: #0D0D0B; stroke: var(--muted); stroke-width: 1.5; }
.icone-iphone .lidar { fill: #050505; stroke: var(--border); stroke-width: .8; }
.usage-fichier { font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
.usage-fichier b { color: var(--text); font-weight: 600; }
.usage-fichier .deduit { color: var(--accent-text); cursor: help; }
.barre-temps i.inconnu { background: var(--border); }
.icone-iphone .q { fill: var(--muted); font-family: var(--titre); font-weight: 900; font-size: 26px; }
.station.active .icone-iphone .b { stroke: var(--accent); }
.station-chapitre { font-family: var(--mono); font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.station-chapitre::before { content: "// "; }
.station-recit { font-size: 17px; max-width: 680px; margin-bottom: 16px; }
.station-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.station-cams, .station-plus { list-style: none; font-size: 14px; }
.station-cams li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--border); }
.station-cams span { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.station-plus li { padding: 3px 0 3px 16px; position: relative; color: var(--muted); }
.station-plus li::before { content: "+"; position: absolute; left: 0; color: var(--accent-text); font-family: var(--mono); }
.station-focales { font-size: 13px; margin-top: 14px; }
.station-focales .d { color: var(--muted); margin-right: 6px; }
.station-usage { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.usage-titre { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.usage-titre b { color: var(--accent-text); font-weight: 600; }
.usage-focales { list-style: none; display: grid; gap: 4px; margin-bottom: 12px; max-width: 420px; }
.usage-focales li { display: grid; grid-template-columns: 76px 1fr 28px; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; }
.usage-focales i { display: block; height: 8px; border-radius: 4px; background: var(--accent); min-width: 4px; }
.usage-focales small { color: var(--muted); }
.usage-vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; max-width: 520px; }
.usage-vignettes img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; transition: transform .25s; }
.usage-vignettes a:hover img { transform: scale(1.04); }
.station-usage .suite { font-size: 13px; }
.station-future .station-corps { border-style: dashed; background: transparent; }
.station-future::before { border-style: dashed; }
/* La machine : l'année de la station en vue, en grand, en bas à droite. */
.machine { position: fixed; right: 24px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.machine.en-route { opacity: 1; transform: none; }
.machine-an { font-family: var(--titre); font-weight: 900; font-size: 64px; line-height: 1; color: var(--accent); text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.machine-nom { font-family: var(--mono); font-size: 12px; color: var(--muted); background: rgba(19,19,16,.85); padding: 2px 8px; border-radius: 4px; }
.machine.tic .machine-an { animation: tic .45s ease; }
@keyframes tic { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.avec-apparition .station { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.avec-apparition .station.visible { opacity: 1; transform: none; }
.grand-voyage.en-cours .icone { font-size: 0; }
.grand-voyage.en-cours .icone::before { content: "❚❚"; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .machine.tic .machine-an { animation: none; } }
@media (max-width: 700px) {
  .stations::before { left: 6px; }
  .station { grid-template-columns: 1fr; gap: 6px; padding-left: 26px; }
  .station::before { left: 0; top: 34px; }
  .station-an { text-align: left; padding-top: 0; font-size: 24px; }
  .station-grille { grid-template-columns: 1fr; }
  .station h2 { font-size: 26px; }
  .machine-an { font-size: 44px; }
  .machine { right: 14px; bottom: 12px; }
}

/* ── iPhone : même lieu, poche, habitudes, loupe, comparateur ── */
.paires-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px; }
.paire { margin: 0; }
.paire-cadre { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: relative; }
.paire-cadre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.paire-etiquette { display: none; }
.paire figcaption { font-size: 15px; margin-top: 8px; }
/* Avec JavaScript : les deux photos superposées, la plus ancienne découpée par le curseur. */
.avec-curseur .paire-cadre { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; --pos: 50%; }
.avec-curseur .paire-cadre img { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.avec-curseur .paire-cadre .avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.avec-curseur .paire-cadre::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--accent-text); box-shadow: 0 0 12px rgba(0,0,0,.6); pointer-events: none; }
.avec-curseur .paire-cadre::before { content: "⇆"; position: absolute; z-index: 2; top: 50%; left: var(--pos); transform: translate(-50%, -50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #131310; font-size: 16px; pointer-events: none; }
.avec-curseur .paire-etiquette { display: block; position: absolute; z-index: 1; top: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(19,19,16,.8); font-size: 12px; color: var(--accent-text); }
.paire-etiquette.gauche { left: 10px; } .paire-etiquette.droite { right: 10px; }
.paire-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.paire-curseur:focus-visible + * { outline: none; }
.avec-curseur .paire-cadre:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.poche-graphe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 200px; align-items: end; margin-bottom: 12px; }
.poche-an { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; text-align: center; }
.poche-an small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.poche-an > span { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 4px; }
.poche-pile { display: flex; flex-direction: column-reverse; min-height: 2px; border-radius: 3px 3px 0 0; overflow: hidden; }
.poche-pile i { display: block; min-height: 2px; }
.poche-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.poche-legende span { display: inline-flex; align-items: center; gap: 5px; }
.poche-legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 560px) { .poche-an small { visibility: hidden; } .poche-an:nth-child(even) > span { visibility: hidden; } }

.pratiques-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.pratique { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px; }
.pratique b { display: block; font-family: var(--titre); font-weight: 900; font-size: 30px; color: var(--accent-text); line-height: 1.1; }
.pratique h3 { font-size: 16px; margin: 6px 0 6px; }
.pratique p { color: var(--muted); font-size: 14px; line-height: 1.5; }

.loupe-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 200px)); gap: 16px; justify-content: start; }
.loupe-tuile { margin: 0; }
.loupe-tuile img { width: 200px; max-width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; border-radius: 4px; border: 1px solid var(--border); }
.loupe-tuile figcaption { display: flex; flex-direction: column; font-size: 13px; margin-top: 4px; }
.loupe-tuile figcaption .mono { font-size: 10px; color: var(--muted); }

.comparateur-choix { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.comparateur-choix select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; margin-left: 6px; }
.comparateur-resume { color: var(--accent-text); font-size: 13px; margin-bottom: 10px; }
.comparateur-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 18px; }
.comparateur-table th, .comparateur-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.comparateur-table thead th { font-family: var(--titre); font-weight: 900; font-size: 17px; }
.comparateur-table tbody th { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; width: 32%; }
.comparateur-table tr.change td:last-child { color: var(--accent-text); }
.comparateur h3 { font-size: 16px; margin-bottom: 8px; }
.comparateur-entre { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.comparateur-entre li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 14px; line-height: 1.35; }
.comparateur-entre li:hover { border-color: rgba(232,151,46,.5); }
.comparateur-entre .picto { width: 30px; height: 30px; flex: none; padding: 5px; border-radius: 8px; color: var(--accent-text); background: rgba(232,151,46,.1); }
.comparateur-entre li > span { display: flex; flex-direction: column; min-width: 0; }
.comparateur-entre small { color: var(--muted); font-size: 10px; }
.paires, .poche, .pratiques, .loupe, .comparateur { margin-top: 8px; }

/* Schéma d'une section des coulisses (image 16:9, cliquable pour l'agrandir). */
.schema { margin: 0 0 20px; }
.schema a { display: block; }
.schema img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
.schema a:hover img { border-color: var(--accent); }
.schema figcaption { font-size: 12px; margin-top: 6px; }

/* ── Pied ────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--border); padding: 28px 20px; }
.pied > div { max-width: 1040px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pied nav { display: flex; gap: 16px; flex-wrap: wrap; }
.pied a { color: var(--muted); }
.pied a:hover { color: var(--accent-text); }

@media (max-width: 560px) {
  html, body { font-size: 17px; }
  main { padding: 0 16px 64px; }
  .entete { padding: 18px 16px; }
  .nav a { padding: 6px 8px; font-size: 13px; }
  .specs th { width: auto; white-space: normal; }
  .post { padding: 16px; }
  .piste { grid-template-columns: 40px 1fr; }
  .piste img, .piste .vide { width: 40px; height: 40px; }
  /* Mobile : à côté d'une pochette de 208 px, il ne resterait qu'une centaine de pixels pour le
     texte ; la pochette passe donc au-dessus. */
  .direct.joue { grid-template-columns: 1fr; padding: 12px; }
  /* Mobile : la pochette du morceau en cours occupe toute la largeur du bandeau, carrée. */
  .direct.joue .pochette { width: 100%; }
  .direct.joue img, .direct.joue .vide { width: 100%; height: auto; aspect-ratio: 1; }
  .piste .quand { grid-column: 2; }
}

/* ── Coulisses ─────────────────────────────────────────── */
.coulisses-chiffres { margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pipeline { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pipeline li { counter-increment: etape; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px 18px 16px; }
.pipeline li::before { content: counter(etape, decimal-leading-zero); position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pipeline .ou { font-family: var(--mono); font-size: 12px; color: var(--accent-text); }
.pipeline h3 { font-family: var(--titre); font-weight: 900; font-size: 20px; margin: 4px 0 6px; }
.pipeline p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.pipeline li.humain { border-color: var(--accent); background: linear-gradient(160deg, rgba(232,151,46,.12), var(--surface) 60%); }
.pipeline li.humain .ou::before { content: "● "; }
.erreurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.erreur { display: flex; flex-direction: column; gap: 8px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.erreur:hover { text-decoration: none; border-color: var(--accent); }
.erreur img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.erreur del, .erreur ins { display: block; padding: 0 14px; font-size: 14px; line-height: 1.5; text-decoration: none; }
.erreur del { color: var(--muted); }
.erreur del::before, .erreur ins::before { display: inline-block; margin-right: 6px; }
.erreur del::before { content: "− machine"; font-family: var(--mono); font-size: 11px; color: #E26D5A; }
.erreur del { text-decoration: line-through; text-decoration-color: rgba(226,109,90,.7); }
.erreur ins { padding-bottom: 14px; }
.erreur ins::before { content: "+ humain"; font-family: var(--mono); font-size: 11px; color: var(--accent-text); }
.sous-titre { font-family: var(--titre); font-weight: 900; font-size: 20px; margin-bottom: 8px; }
.appel { margin-top: 56px; padding: 28px; border: 1px solid var(--accent); border-radius: 8px; background: linear-gradient(160deg, rgba(232,151,46,.10), var(--surface) 70%); }
.appel p { font-size: 20px; margin-bottom: 16px; max-width: 640px; }

/* ── Terminal de l'accueil ─────────────────────────────── */
.terminal { margin-top: 40px; border: 1px solid var(--border); border-radius: 8px; background: #0D0D0B; font-family: var(--mono); font-size: 14px; line-height: 1.6; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.terminal-barre { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.terminal-barre i { width: 11px; height: 11px; border-radius: 50%; background: #3A3932; }
.terminal-barre i:first-child { background: #E26D5A; } .terminal-barre i:nth-child(2) { background: var(--accent); } .terminal-barre i:nth-child(3) { background: #7FB069; }
.terminal-barre span { margin-left: 8px; }
.terminal-sortie { max-height: 320px; overflow-y: auto; padding: 14px 16px 4px; }
.terminal .l { white-space: pre-wrap; word-break: break-word; }
.terminal .a { color: var(--accent-text); }
.terminal .d { color: var(--muted); }
.terminal-saisie { display: flex; align-items: center; gap: 8px; padding: 4px 16px 12px; }
.terminal-saisie label { white-space: nowrap; color: var(--text); }
.terminal-saisie input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; caret-color: var(--accent); outline: none; }
.terminal:focus-within { border-color: rgba(232,151,46,.6); }
.terminal-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--border); }
.terminal-suggestions button { font: inherit; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.terminal-suggestions button:hover { color: var(--accent-text); border-color: var(--accent); }
.terminal .vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 8px; max-width: 520px; }
.terminal .vignettes img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
@media (max-width: 560px) { .terminal { font-size: 13px; } .terminal-sortie { max-height: 260px; } .terminal-saisie input { font-size: 16px; } }