/* ==========================================================================
   The Human Layer — Feuille de style du site
   Fidèle à la maquette haute fidélité (Claude Design) et au design system v1.
   Ordre : base · i18n · composants · header · Lobby · Piece · Archive ·
           Parlor · responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Certaines œuvres sortent volontairement du cadre de lecture. `clip` borne
     ce débordement à la largeur de l'écran sans créer de conteneur de
     défilement — contrairement à `hidden`, qui casserait l'en-tête collant. */
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-structure);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-hover);
}

button,
input,
textarea,
select {
  font-family: inherit;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

/* Niveau 1 d'élévation : anneau de focus bleu constant, quel que soit le
   composant (design system §9 et §10). */
:focus-visible {
  outline: none;
  box-shadow: var(--elevation-1);
  border-radius: var(--radius-sm);
}

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

/* Le halo signature. Décoratif, jamais informatif. */
.halo {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   2. Système de langue
   Les deux langues sont dans le DOM ; une seule est visible. La bascule ne
   touche jamais l'URL. L'anglais est la langue par défaut.
   -------------------------------------------------------------------------- */

/* On masque uniquement la langue inactive : la langue active garde le
   `display` que lui donne son propre composant (inline-flex d'un badge,
   grid d'une carte…), jamais un `revert` qui l'écraserait. */
html[lang="en"] [data-lang-block="fr"],
html[lang="fr"] [data-lang-block="en"] {
  display: none;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Composants du design system
   -------------------------------------------------------------------------- */

/* --- Badge : signale le format du contenu (calque éditorial) --- */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-structure);
  font-weight: var(--text-eyebrow-weight);
  font-size: var(--text-eyebrow-size);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--format-tint, var(--color-accent-tint));
  color: var(--format-tint-text, var(--color-accent-tint-text));
}

/* --- Eyebrow --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* --- Emphase Give You Glory, inline dans le corps de texte --- */
.glory {
  font-family: var(--font-emphasis);
  font-size: var(--text-emphasis-size);
  font-style: normal;
  line-height: 1;
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 500;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  color: #fff;
}
.btn--primary:active {
  background: var(--color-accent-active);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent-tint-text);
}
.btn--secondary:hover {
  background: var(--color-accent-tint);
  color: var(--color-accent-tint-text);
}
.btn--secondary:active {
  background: var(--color-accent-tint-hover);
  border-color: var(--color-accent-active);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
}
.btn--primary:disabled {
  background: var(--color-disabled);
}
.btn--secondary:disabled {
  border-color: var(--color-divider);
  color: var(--color-disabled);
  background: transparent;
}

/* --- Lien d'action discret (texte + flèche) --- */
.action-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--color-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* --- Champs de formulaire --- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.field__control {
  width: 100%;
  font-family: var(--font-structure);
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 16px;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--color-paper);
  color: var(--color-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__control:focus {
  border-color: var(--color-accent);
  box-shadow: var(--elevation-1);
}
.field__control:disabled {
  background: var(--color-field-disabled-bg);
}
textarea.field__control {
  resize: vertical;
  min-height: 150px;
}
.field--error .field__control,
.field--error .field__control:focus {
  border-color: var(--color-error);
  box-shadow: none;
}
.field__error {
  font-size: 13px;
  color: var(--color-error);
}
.field__error:empty {
  display: none;
}

/* --- Menu déroulant (élévation niveau 2 : se détache de la page) --- */
.menu {
  position: absolute;
  background: var(--color-paper);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
  padding: 6px 0;
  z-index: 50;
}
.menu[hidden] {
  display: none;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 11px 18px;
  font-size: 15px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  transition: background-color .15s ease;
}
.menu__item:hover {
  background: var(--color-accent-tint);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-divider);
}

.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.site-header__left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.site-header__right {
  justify-self: end;
  position: relative;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color .15s ease;
}
.icon-button:hover {
  background: var(--color-accent-tint);
}

.nav-menu {
  top: 52px;
  left: 0;
  min-width: 220px;
}
.nav-menu .menu__item {
  font-size: 17px;
  padding: 12px 20px;
}

/* Le logo : lockup empilé. Poppins en capitales espacées pour "The" et
   "Layer", Give You Glory pour "Human". Le mot manuscrit n'est pas incliné :
   sa montée vient du dessin de la police, pas d'une rotation. */
.logo {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Cible tactile minimale, même quand le lockup redescend d'échelle. */
  min-height: 44px;
  gap: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-accent);
  padding: 0 4px;
  line-height: 1;
  white-space: nowrap;
}
.logo:hover {
  color: var(--color-accent-hover);
}
.logo__word {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* L'interlettrage ajoute une espace après la dernière lettre : on la
     reprend pour que le mot reste optiquement centré sous "Human". */
  margin-right: -0.2em;
}
.logo__human {
  font-family: var(--font-emphasis);
  font-size: 26px;
  line-height: 1;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.lang-switch:hover {
  border-color: var(--color-accent);
}
.lang-menu {
  top: 48px;
  right: 0;
  min-width: 150px;
}

/* --------------------------------------------------------------------------
   5. Enveloppes de page
   -------------------------------------------------------------------------- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px 96px;
}
.page--wide {
  max-width: 1240px;
}

/* --------------------------------------------------------------------------
   6. The Lobby
   -------------------------------------------------------------------------- */

/* Le texte et l'œuvre occupent deux colonnes distinctes : posée en absolu,
   l'œuvre passait sous le paragraphe et le rendait illisible. Ici la
   superposition est structurellement impossible. */
.statement {
  position: relative;
  padding: 96px 0 80px;
  display: flex;
  align-items: center;
  gap: 56px;
}
/* Le halo du Hall n'est pas une œuvre posée : c'est une lumière qui entre par
   la droite. Sa source est un dégradé dont le centre est hors cadre, à droite :
   ce bord-là est franc, les trois autres s'éteignent. On sort donc ce bord de
   l'écran, et il ne reste que la lumière. */
/* Le halo du Hall, comme dans la maquette : une bande collée au bord droit de
   l'écran, qui va d'un filet à l'autre. `.page` n'a pas de marge haute, donc la
   section commence sous l'en-tête et finit au filet — le cadre est déjà le bon.
   Les coupes en haut et en bas tombent sur ces deux filets : elles ne se lisent
   pas comme des coupes. */
.statement__art {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(50% - 50vw);
  width: min(34vw, 430px);
  pointer-events: none;
  z-index: 0;
}
.statement__text {
  position: relative;
  z-index: 1;
  order: 1;
  flex: 1 1 auto;
  max-width: 620px;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5;
  color: var(--color-ink);
  text-align: center;
  text-wrap: pretty;
}
.statement__text .glory {
  font-size: 1.32em;
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: 0;
}

.lobby__feature {
  padding: 56px 0 0;
}
.lobby__feature--full {
  padding-top: 40px;
}

.lobby__coda {
  margin-top: 56px;
  border-top: 1px solid var(--color-divider);
  padding-top: 28px;
}
.lobby__coda p {
  font-size: 15px;
  font-style: italic;
  color: var(--color-muted);
  text-align: center;
}

/* --- Carte mise en avant --- */
.feature-card {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper);
  color: inherit;
  transition: background-color .15s ease, border-color .15s ease;
}
.feature-card:hover {
  background: var(--color-card-hover-bg);
  border-color: var(--color-card-hover-border);
  color: inherit;
}

/* Même règle sur la carte : c'est souvent l'image qui décide qu'on ouvre
   l'article, donc elle doit être lisible entière avant même le titre. Le cadre
   prend le format du fichier ; la hauteur suit la largeur disponible. */
.feature-card__art {
  width: 100%;
  aspect-ratio: 12 / 5;
  background-size: cover;
  background-position: center;
}
/* Le filet vit sur le texte, jamais sur l'image : flouté, il disparaîtrait. */
.feature-card__body {
  padding: 32px;
  border-top: 1px solid var(--color-divider);
  position: relative;
  background: inherit;
}

/* Variante deux colonnes, à partir de la deuxième publication. */
.feature-card--split {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 24px;
}
/* En deux colonnes, la hauteur est imposée par le texte voisin : le format du
   cadre ne peut plus suivre celui de l'image. On la pose donc en entier dans
   la place disponible plutôt que d'en couper les bords. */
.feature-card--split .feature-card__art {
  aspect-ratio: auto;
  height: auto;
  min-height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
}
.feature-card--split .feature-card__body {
  padding: 36px;
  border-top: none;
  border-left: 1px solid var(--color-divider);
}
.feature-card--split .feature-card__title {
  font-size: clamp(26px, 2.6vw, 32px);
}
.feature-card--split .feature-card__dek {
  max-width: none;
}

/* --- Carte de grille : un filet vertical dans l'accent du format --- */
.card-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  display: grid;
  grid-template-columns: 5px 1fr;
  gap: 20px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 24px;
  color: inherit;
  transition: background-color .15s ease, border-color .15s ease;
}
.card:hover {
  background: var(--color-card-hover-bg);
  border-color: var(--color-card-hover-border);
  color: inherit;
}
.card__edge {
  border-radius: var(--radius-full);
  background: linear-gradient(
    var(--format-accent, var(--color-accent)),
    color-mix(in srgb, var(--format-accent, var(--color-accent)) 15%, transparent)
  );
}
.card__title {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.card__dek {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.card__meta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--color-muted);
}

/* --- Bandeau « Latest » de la Lobby complète --- */
.lobby__latest {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.lobby__latest .action-link {
  border-bottom: 1.5px solid var(--color-accent);
  padding-bottom: 2px;
}
.feature-card__title {
  margin-top: 12px;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.feature-card__dek {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 520px;
}
.feature-card__meta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--color-muted);
}
.feature-card__read {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--color-accent);
}

/* Œuvre de couverture : dégradé de repli tant qu'aucune image n'est fournie.
   La teinte suit l'accent éditorial du format. */
.art-placeholder {
  background:
    radial-gradient(120% 130% at 26% 24%, color-mix(in srgb, var(--format-accent, var(--color-accent)) 30%, transparent), color-mix(in srgb, var(--format-accent, var(--color-accent)) 6%, transparent) 58%, rgba(248, 249, 247, 0) 84%),
    radial-gradient(90% 120% at 78% 76%, color-mix(in srgb, var(--format-accent, var(--color-accent)) 16%, transparent), rgba(248, 249, 247, 0) 70%),
    radial-gradient(60% 80% at 62% 20%, rgba(107, 120, 180, .10), rgba(248, 249, 247, 0) 72%);
}

/* --------------------------------------------------------------------------
   7. Page de pièce
   -------------------------------------------------------------------------- */

/* Jauge de lecture
   ---------------------------------------------------------------------------
   Fixée juste sous l'en-tête collant, donc hors du flux : rien ne bouge quand
   elle apparaît, s'active ou affiche la section courante. `--header-h` est
   mesurée par site.js ; les valeurs écrites ici tiennent le temps que le
   script s'exécute, et si jamais il ne s'exécute pas. */

:root {
  --header-h: 73px;
}

.reading {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  /* Au-dessus de l'en-tête (40) : les repères débordent de la piste vers le
     haut, et passeraient derrière lui — coupés en deux. Leur anneau de papier
     les détache proprement du filet de l'en-tête. */
  z-index: 41;
  pointer-events: none;
}

.reading__bar {
  position: relative;
  height: 3px;
  background: var(--color-divider);
}

.reading__fill {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width .12s linear;
}

.reading__marks {
  position: absolute;
  inset: 0;
}

/* Un repère par titre, posé à la position réelle de la section. */
.reading__mark {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--color-muted);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  box-shadow: 0 0 0 2px var(--color-paper);
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .15s ease, border-color .15s ease;
}
.reading__mark:hover {
  border-color: var(--color-accent);
}
.reading__mark.is-passed {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* La section courante, nommée. Elle ne sert que là où le sommaire du rail
   n'est plus visible : au-dessus de 900px, le rail dit déjà où l'on est. */
.reading__now {
  display: none;
  margin: 0;
  padding: 7px 24px;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-divider);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reading__now-number {
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

/* L'enjeu, entre deux filets, avant d'entrer dans le texte. */
.stakes {
  margin-top: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.stakes__label {
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
}
.stakes__body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stakes__body p {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Sommaire */
.toc__label {
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
}
.toc__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Un sommaire long se défile sur lui-même plutôt que de pousser les boutons
   hors de l'écran. Le rognage reste enfermé ici, où rien ne dépasse. */
.toc--rail .toc__list {
  max-height: calc(100vh - var(--header-h) - 260px);
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.toc__link {
  display: flex;
  gap: 10px;
  padding: 6px 0 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-secondary);
  transition: background-color .15s ease, color .15s ease;
}
.toc__link:hover {
  color: var(--color-accent-tint-text);
  background: var(--color-card-hover-bg);
}
.toc__number {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-muted);
}
.toc__link.is-current {
  border-left-color: var(--color-accent);
  background: var(--color-accent-tint);
  color: var(--color-accent-tint-text);
  font-weight: 500;
}
.toc__link.is-current .toc__number {
  color: var(--color-accent);
}

/* Deux rendus du même sommaire : le rail au-dessus de 900px, le fil en
   dessous. Un seul est visible à la fois, jamais les deux. */
.toc--inline {
  display: none;
}

.piece {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 96px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

.piece__rail {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: flex-start;
  position: sticky;
  /* Sous l'en-tête et sa jauge. Surtout pas de `overflow` ici : le rail
     deviendrait un conteneur de rognage, et le menu de partage — posé en
     absolu sous son bouton — s'y trouverait coupé. C'est le sommaire seul
     qui défile, plus bas. */
  top: calc(var(--header-h) + 24px);
}

.piece__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--color-accent);
  width: fit-content;
}

.rail-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 44px;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent-tint-text);
  font-size: 15px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.rail-button__icon {
  display: inline-flex;
  flex: none;
}
/* En cours de lecture, le bouton est plein : on voit d'un coup d'œil que la
   narration tourne, et le clic suivant met en pause. */
.rail-button.is-playing {
  border-color: var(--color-accent-active);
  background: var(--color-accent-tint-hover);
  color: var(--color-accent-active);
}
/* La teinte « déplié » vaut pour un menu, pas pour le bouton d'écoute : celui-ci
   reste ouvert une fois la barre affichée, et se teinterait donc en pause comme
   en lecture. Seul `.is-playing` doit signaler que la narration tourne. */
.rail-button:hover,
.rail-button[data-menu-trigger][aria-expanded="true"] {
  background: var(--color-accent-tint);
}

.share {
  position: relative;
}
.share-menu {
  top: 52px;
  left: 0;
  min-width: 190px;
  z-index: 30;
}

/* --- Lecteur audio --- */
/* Lecteur : une barre et deux temps, rien d'autre. La commande de lecture
   est le bouton d'écoute juste au-dessus, qui bascule en pause. */
.audio-player {
  margin-top: -8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audio-player[hidden],
.audio-player__track[hidden] {
  display: none;
}
.audio-player__scrub {
  height: 4px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-data-gray);
  position: relative;
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
}
.audio-player__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}
/* Repères de parties sur la barre d'écoute, aux instants où le titre est
   annoncé dans la narration. Ils sont décoratifs : le sommaire reste la
   navigation, et la barre elle-même reste cliquable. */
.audio-player__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.audio-player__mark {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-paper);
  box-shadow: 0 0 0 1.5px var(--color-muted);
  transform: translate(-50%, -50%);
}

/* La partie en cours d'écoute, nommée sous la barre. */
.audio-player__chapter {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}
.audio-player__chapter[hidden] {
  display: none;
}
.audio-player__mark-number {
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  margin-right: 4px;
}

.audio-player__times {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
/* Narration pas encore déposée : on le dit, on n'affiche pas une barre morte. */
.audio-player__note {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--color-muted);
}
.audio-player__note[hidden] {
  display: none;
}

.piece__body {
  flex: 1 1 520px;
  min-width: 0;
  max-width: 720px;
}

/* La couverture porte le sujet : elle ne se rogne pas. Le cadre reçoit du
   build le format exact du fichier (`aspect-ratio` en ligne), si bien que
   `cover` remplit sans jamais couper. La valeur ci-dessous ne sert que si
   l'image est absente ou son format illisible. */
.piece__art {
  width: 100%;
  aspect-ratio: 12 / 5;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
}

.piece__badge {
  margin-top: 32px;
}
.piece__title {
  margin-top: 12px;
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.piece__dek {
  margin-top: 12px;
  font-size: var(--text-subtitle-size);
  line-height: var(--text-subtitle-line);
  color: var(--color-text-secondary);
  max-width: 600px;
}
/* Signature de la publication, entre le chapô et la date. */
.piece__author {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.piece__author svg {
  flex: none;
}
.piece__meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-muted);
}

.prose {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.prose > * {
  margin: 0;
}
.prose p {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-ink);
}
.prose h2 {
  margin-top: 24px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.prose h3 {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}
.prose ul,
.prose ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prose blockquote {
  border-left: 2px solid var(--format-accent, var(--color-accent));
  padding-left: 20px;
  color: var(--color-text-secondary);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
}
.prose strong {
  font-weight: 500;
}
.prose figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.prose figcaption {
  margin-top: 8px;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-style: italic;
  color: var(--color-muted);
}

/* Appel de note dans le texte : assez visible pour être cliqué, assez
   discret pour ne pas hacher la ligne. */
.cite {
  color: var(--color-accent);
  text-decoration: none;
}
.cite sup {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
  vertical-align: super;
  line-height: 0;
}
.cite:hover sup {
  text-decoration: underline;
}

/* La cible d'une ancre s'arrête sous l'en-tête et sa jauge, jamais dessous. */
.prose h2[id],
.sources li[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.sources {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-divider);
}
.sources__label {
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Numérotation native : une entrée de source est une seule coulée de texte,
   titre en italique compris, et doit se replier comme un paragraphe. */
.sources__list {
  margin: 12px 0 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sources__list li {
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--color-text-secondary);
  transition: color .2s ease;
}
.sources__list li::marker {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
/* Repère visuel à l'arrivée depuis un appel de note. */
.sources__list li:target {
  color: var(--color-ink);
}
.sources__list li:target::marker {
  color: var(--color-accent);
}

.piece__end {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.piece__end span {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
}

.closing {
  margin-top: 48px;
  border-top: 1px solid var(--color-divider);
  padding-top: 48px;
  position: relative;
}
.closing__art {
  position: absolute;
  right: 0;
  top: 24px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 0;
}
.closing__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-emphasis);
  font-size: 38px;
  line-height: 1.1;
  color: var(--color-ink);
}
.closing__body {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 480px;
}
.closing__cta {
  position: relative;
  z-index: 1;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   8. The Archive
   -------------------------------------------------------------------------- */

.archive__intro {
  padding: 64px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}
.archive__intro-text {
  flex: 1 1 320px;
  min-width: 0;
}
.page-title {
  font-size: clamp(30px, 3.6vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.page-subtitle {
  margin-top: 12px;
  font-size: var(--text-subtitle-size);
  line-height: var(--text-subtitle-line);
  color: var(--color-text-secondary);
}
.archive__art {
  height: 240px;
  flex: 0 1 260px;
  margin-left: auto;
}

.archive__controls {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 190px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.select-button:hover {
  border-color: var(--color-accent);
}
.filter {
  position: relative;
}
.filter-menu {
  top: 52px;
  left: 0;
  min-width: 230px;
  z-index: 30;
}
.filter-menu .menu__item[aria-selected="true"] {
  color: var(--color-accent-tint-text);
  background: var(--color-accent-tint);
}

.archive__list {
  margin-top: 32px;
  border-top: 1.5px solid var(--color-divider);
}

.entry {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 24px;
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.entry:hover {
  background: var(--color-card-hover-bg);
  box-shadow: inset 2px 0 0 var(--color-accent);
  color: inherit;
}
.entry[hidden] {
  display: none;
}
.entry__main {
  flex: 1 1 320px;
  min-width: 0;
}
.entry__title {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.entry__dek {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 460px;
}
.entry__side {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
}
.entry__date {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
  white-space: nowrap;
}
.entry__read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  padding-bottom: 2px;
}

.archive__coda {
  margin-top: 32px;
  font-size: 15px;
  font-style: italic;
  color: var(--color-muted);
}
.archive__empty {
  padding: 48px 24px;
  font-size: 15px;
  font-style: italic;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   9. The Parlor
   -------------------------------------------------------------------------- */

.parlor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 32px 96px;
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  align-items: flex-start;
}
.parlor__intro {
  flex: 0 1 280px;
}
.parlor__art {
  margin-top: 24px;
  height: 160px;
}
.parlor__elsewhere {
  margin-top: 32px;
  border-top: 1px solid var(--color-divider);
  padding-top: 20px;
}
.parlor__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px 8px 0;
  font-size: 15px;
  color: var(--color-accent);
  border-radius: var(--radius-sm);
}

.parlor__form-wrap {
  flex: 1 1 440px;
  min-width: 0;
  max-width: 560px;
}
.parlor__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.parlor__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
.parlor__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.form-status {
  font-size: 15px;
  color: var(--color-error);
}
.form-status:empty {
  display: none;
}

.received {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 40px 36px;
  overflow: hidden;
}
.received[hidden] {
  display: none;
}
.received__art {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 130px;
  height: 130px;
  pointer-events: none;
  z-index: 0;
}
.received__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-emphasis);
  font-size: 36px;
  line-height: 1.1;
}
.received__body {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 420px;
}
.received__cta {
  position: relative;
  z-index: 1;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   10. Responsive
   Points de rupture : 768px (tablette) et 560px (mobile).
   Règles : une seule colonne, rien en bord à bord, aucun élément superposé à
   une image, titres redescendus dans l'échelle typo.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Dès que les deux colonnes deviennent trop étroites, l'œuvre passe
     au-dessus du texte plutôt que de le serrer. */
  .statement {
    flex-direction: column;
    gap: 32px;
    padding: 56px 0 64px;
  }
  .statement__art {
    order: 1;
    flex: 0 0 auto;
    width: 210px;
    height: 210px;
    margin: 0 auto;
  }
  .statement__text {
    order: 2;
    max-width: 560px;
    margin: 0 auto;
  }

  .piece__rail {
    position: static;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  /* Le rail cesse d'être une colonne : le sommaire quitte le rail et reprend
     sa place dans le fil de lecture, et la section courante s'annonce alors
     dans la jauge, qui devient le seul repère fixe à l'écran. */
  .toc--rail {
    display: none;
  }
  .toc--inline {
    display: block;
    margin-top: 32px;
  }
  .reading--active .reading__now {
    display: block;
  }
  .rail-button {
    width: auto;
  }
  .piece__back {
    flex: 1 1 100%;
  }
  .audio-player {
    flex: 1 1 100%;
    order: 3;
    /* Le retrait négatif est calibré sur la colonne du rail, dont la gouttière
       est de 20px. Ici la rangée n'en a que 12 : il collerait la barre aux
       boutons. On la repose franchement en dessous. */
    margin-top: 8px;
  }
  .piece {
    gap: 32px;
  }
  .piece__body {
    flex: 1 1 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .page,
  .page--wide {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 64px;
  }
  .piece,
  .parlor {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 64px;
  }
  .site-header__inner {
    padding: 12px 24px;
  }
  /* Valeur de repli accordée à la hauteur d'en-tête de ce palier, le temps
     que site.js la mesure. */
  :root {
    --header-h: 69px;
  }
  .reading__now {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Les halos vont mourir au bord de l'écran plutôt que d'être coupés net sur
     la marge de lecture : un lavis qui s'arrête sur une arête franche se voit
     comme un défaut. `overflow-x: clip` borne le débordement à la largeur de
     l'écran sans créer de conteneur de défilement — contrairement à `hidden`,
     il ne casserait pas le header collant. */
  .page,
  .page--wide,
  .piece,
  .parlor {
    overflow-x: clip;
  }

  .statement {
    padding: 64px 0 56px;
    overflow: visible;
  }
  .statement__art {
    width: 180px;
    height: 180px;
  }
  .statement__text {
    max-width: 520px;
  }

  .lobby__feature {
    padding-top: 40px;
  }
  /* Sur mobile la carte est plus étroite : à format constant l'image est déjà
     plus courte. Lui imposer une hauteur la recouperait. */
  .feature-card__body {
    padding: 24px;
  }

  /* Archive : l'œuvre passe sous le titre, pleine largeur du conteneur. */
  .archive__intro {
    gap: 24px;
  }
  .archive__art {
    flex: 1 1 100%;
    margin-left: 0;
    height: 200px;
  }
  .archive__controls {
    margin-top: 32px;
  }
  .entry {
    padding: 24px 16px;
    gap: 16px;
  }
  .entry__side {
    margin-left: 0;
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .parlor {
    gap: 40px;
  }
  .parlor__intro,
  .parlor__form-wrap {
    flex: 1 1 100%;
    max-width: none;
  }

  /* Même principe en bas de la page de lecture : le halo sort de la colonne
     de texte et s'éteint au bord de l'écran. */
  .closing {
    overflow: visible;
  }
  .closing__art {
    right: -50px;
    top: 8px;
    width: 170px;
    height: 170px;
    opacity: .7;
  }
}

@media (max-width: 560px) {
  .page,
  .page--wide,
  .piece,
  .parlor {
    padding-left: 20px;
    padding-right: 20px;
  }
  .site-header__inner {
    padding: 10px 16px;
    gap: 8px;
  }
  :root {
    --header-h: 65px;
  }
  .reading__now {
    padding: 6px 20px;
    font-size: 11px;
  }
  /* Sur téléphone, l'écran est déjà plus étroit que la colonne : la brider
     davantage ne ferait que rallonger la page. */
  .statement__text {
    max-width: none;
  }
  .logo__word {
    font-size: 10px;
  }
  .logo__human {
    font-size: 23px;
  }
  .feature-card__body {
    padding: 20px;
  }
  .feature-card__meta {
    margin-top: 24px;
  }
  .feature-card__read {
    margin-left: 0;
    flex: 1 1 100%;
  }
  .closing__title {
    font-size: 30px;
  }
  .received {
    padding: 28px 24px;
  }
  .received__title {
    font-size: 30px;
  }
  .entry__title {
    font-size: 21px;
  }
  .btn {
    width: 100%;
  }
  .parlor__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .site-header,
  .piece__rail,
  .reading,
  .closing {
    display: none;
  }
  /* Sur papier, le sommaire du fil est le seul qui reste : il vaut d'être
     imprimé, alors que la jauge et le rail n'ont plus d'objet. */
  .toc--inline {
    display: block;
    margin-top: 24px;
  }
}

/* --------------------------------------------------------------------------
   11. Les œuvres
   Elles sont détourées en amont (`npm run artworks`) : le papier sur lequel
   elles ont été peintes est devenu transparent. Elles se posent donc sur le
   fond du site comme de l'encre sur la page — sans cadre, sans arête, sans
   rectangle plus froid que le reste. Rien ici ne doit réintroduire une
   bordure, un rayon ni un fond.
   -------------------------------------------------------------------------- */

.statement__art,
.archive__art,
.parlor__art,
.received__art,
.closing__art {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.statement__art {
  background-image: url('/assets/images/artworks/lobby-iris.webp');
  /* Le bord franc de la source est calé sur le bord droit du bloc, lequel est
     hors écran : il n'est jamais visible. */
  /* Le bord franc de la source est calé sur le bord droit du bloc, lui-même au
     bord de l'écran : il n'est jamais visible. */
  background-size: cover;
  background-position: right center;
}
.archive__art {
  background-image: url('/assets/images/artworks/archive.webp');
}
.parlor__art {
  background-image: url('/assets/images/artworks/parlor.webp');
}
.received__art {
  background-image: url('/assets/images/artworks/received.webp');
}
.closing__art {
  background-image: url('/assets/images/artworks/closing.webp');
}

/* Les couvertures gardent des bords nets, dans un rectangle à coins arrondis :
   ce sont des images de contenu, pas des lavis décoratifs. Aucun masque de
   fondu ici, aucun flou — le traitement de la maquette haute fidélité. */
.feature-card__body {
  border-top: none;
}

/* --------------------------------------------------------------------------
   12. The Lab
   La page qui présente la pratique. Elle réutilise les composants existants —
   titre de page, prose, bouton secondaire, bloc de clôture — pour rester
   homogène avec le reste du site ; seules la grille et la liste des formes de
   travail lui sont propres.
   -------------------------------------------------------------------------- */

.lab {
  padding-top: 0;
}

.lab__toarchive {
  padding-top: 24px;
  padding-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}
.lab__toarchive .action-link {
  border-bottom: 1.5px solid var(--color-accent);
  padding-bottom: 2px;
}

/* Une seule grille tient le titre, l'œuvre et le texte. C'est elle qui permet
   à l'œuvre de passer avant le titre en mobile sans toucher au DOM. */
.lab__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  column-gap: 48px;
  align-items: start;
}

.lab__intro {
  grid-column: 1;
  grid-row: 1;
  padding-top: 48px;
}

/* L'œuvre s'aligne sur les paragraphes, pas sur le titre. */
.lab__art {
  grid-column: 2;
  grid-row: 2;
}

.lab__text {
  grid-column: 1;
  grid-row: 2;
  margin-top: 32px;
}
.lab__text .prose {
  margin-top: 0;
}

/* L'œuvre est une couverture : elle remplit un rectangle à coins arrondis,
   bords nets, comme l'en-tête d'un contenu. */
/* L'œuvre garde son carré à coins arrondis, mais son fond est celui du site :
   elle est détourée, et c'est le papier qui se voit dessous. Aucune rupture
   possible, puisqu'il n'y a plus deux blancs à faire coïncider. */
.lab__art {
  min-height: 480px;
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  background-image: url('/assets/images/artworks/lab.webp');
  background-size: cover;
  background-position: center;
}

/* --- Les trois formes de travail --- */
.offers {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offers__item {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  border-left: 2px solid var(--color-accent);
  padding-left: 12px;
}
.offers__item[data-accent="piece"] {
  border-left-color: var(--format-piece);
}
.offers__item[data-accent="conversation"] {
  border-left-color: var(--format-conversation);
}
.offers__item[data-accent="highlight"] {
  border-left-color: var(--format-highlight);
}
.offers__item[data-accent="beneath"] {
  border-left-color: var(--format-beneath);
}
.offers__item[data-accent="usecase"] {
  border-left-color: var(--format-usecase);
}

/* --- Clôture : même bloc que sur la page de lecture, en deux colonnes --- */
.lab__closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.lab__closing .closing__art {
  position: static;
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
}
.lab__closing .closing__title,
.lab__closing .closing__body,
.lab__closing .closing__cta {
  position: static;
}

@media (max-width: 900px) {
  /* Une seule colonne, et l'œuvre ouvre la page : elle passe avant le titre,
     comme dans la maquette. */
  .lab__grid {
    display: flex;
    flex-direction: column;
    /* En colonne, `align-items` régit l'axe horizontal : sans `stretch`, le
       `start` hérité de la grille réduirait l'œuvre à une largeur nulle. */
    align-items: stretch;
    gap: 24px;
  }
  .lab__art {
    order: 1;
    min-height: 0;
    height: 240px;
    border-radius: var(--radius-md);
  }
  .lab__intro {
    order: 2;
    padding-top: 8px;
  }
  .lab__text {
    order: 3;
    margin-top: 0;
  }

  .lab__closing {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .lab__closing .closing__art {
    order: -1;
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
  }
  .lab__closing .closing__body {
    max-width: 420px;
  }
}