/* Pages du serveur Arendt : le lien d'un média (/p/<id>), /pourquoi et /compte.
   Sobres : le média en grand, un seul bouton, clair ou sombre selon le système. */

:root {
  color-scheme: light dark;
  --fond: #f4f3f1;
  --surface: #ffffff;
  --texte: #1d1d1f;
  --doux: #6e6e73;
  --trait: rgba(0, 0, 0, 0.09);
  --accent: #1d1d1f;
  --sur-accent: #ffffff;
  --lien: #0b57d0;
  --erreur: #b3261e;
  --scene: #f4f3f1;
  --voile: rgba(255, 255, 255, 0.72);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0c0c0d;
    --surface: #161618;
    --texte: #f2f2f4;
    --doux: #9a9aa0;
    --trait: rgba(255, 255, 255, 0.1);
    --accent: #f2f2f4;
    --sur-accent: #0c0c0d;
    --lien: #8ab4f8;
    --erreur: #f2b8b5;
    --scene: #0c0c0d;
    --voile: rgba(22, 22, 24, 0.72);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Boutons : un seul, sobre ; le second en contour. */
button, a.bouton {
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--sur-accent); background: var(--accent);
  border: 0; border-radius: 999px; padding: 11px 26px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.15s, transform 0.15s;
}
button:hover, a.bouton:hover { opacity: 0.88; text-decoration: none; }
button:active, a.bouton:active { transform: scale(0.98); }
button:disabled { opacity: 0.4; cursor: default; }
button.secondaire { color: var(--texte); background: transparent; box-shadow: inset 0 0 0 1px var(--trait); }

/* Marque : le nom, en petites capitales espacées. */
.marque {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--doux);
}
.marque:hover { text-decoration: none; color: var(--texte); }

/* ---- Page du lien ---- */
body.scene { background: var(--scene); overflow: hidden; }
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) 18px 14px;
}
.compteur { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--doux); }
.icone {
  margin-left: auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--texte); background: var(--voile);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.compteur:not([hidden]) + .icone { margin-left: 0; }
.icone:hover { text-decoration: none; opacity: 0.85; }

.carte {
  position: relative; z-index: 2;
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 88px 28px 40px; text-align: center; max-width: 440px; margin: 0 auto;
}
.sceau {
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait);
}
.sceau svg { width: 24px; height: 24px; }
.sceau.erreur { color: var(--erreur); }
.carte h1 { margin: 0 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.texte-carte { margin: 0; color: var(--doux); font-size: 15px; }
.texte-carte:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.actions:not(:has(:not([hidden]))) { display: none; }
.verification { margin-top: 22px; display: flex; justify-content: center; }
.indice { margin: 22px 0 0; font-size: 13px; color: var(--doux); max-width: 340px; }
.note { margin: 34px 0 0; font-size: 13px; }
.note a { color: var(--doux); }
.note a:hover { color: var(--texte); }

/* Le média, plein écran ; un album défile (doigt, flèches, clavier). */
.galerie { position: fixed; inset: 0; z-index: 1; background: var(--scene); }
.piste {
  height: 100%; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.piste::-webkit-scrollbar { display: none; }
.diapo {
  flex: 0 0 100%; height: 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 66px 0 max(16px, env(safe-area-inset-bottom));
}
.diapo img, .diapo video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.diapo audio { width: min(520px, 90%); }
.fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  color: var(--texte); background: var(--voile);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 0.2s;
}
.fleche:active { transform: translateY(-50%) scale(0.96); }
.gauche { left: 18px; }
.droite { right: 18px; }
.galerie:hover .fleche:not(:disabled) { opacity: 1; }
.fleche:disabled { opacity: 0 !important; }
@media (hover: none) { .fleche { display: none; } }

/* ---- Pages de texte : /pourquoi, /compte ---- */
.page { max-width: 620px; margin: 0 auto; padding: 28px 24px 64px; }
.page header { margin-bottom: 48px; }
.page h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; margin: 0 0 14px; }
.page .chapeau { font-size: 18px; color: var(--doux); margin: 0 0 40px; }
.page h2 { font-size: 16px; font-weight: 600; margin: 34px 0 6px; }
.page p { margin: 0 0 12px; }
.page .pied { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--doux); }
.page.centre { min-height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; max-width: 440px; }
.page.centre header { position: absolute; top: 28px; left: 0; right: 0; margin: 0; }
.erreur { color: var(--erreur); }