/* Stéphanie Cohen-Chaptal — portraits en mots
   Papier, encre noire, Courier Prime. La main (ses calligraphies) est la seule image.
   Tous les mouvements sont lents et doux. */

@property --fr { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --papier: #F4F0E8;
  --encre: #1B1915;
  --gris: #5E584F;
  --bleu: #2634A0;
  --marge: clamp(16px, 6.6vw, 96px);
  --machine: 'Courier Prime', 'Courier New', Courier, monospace;
  --lent: 1.1s;
}

* { box-sizing: border-box; }

html { background: var(--papier); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--machine);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--encre); transition: color var(--lent) ease; }
a:hover, a:focus-visible { color: var(--bleu); }
a:focus-visible { outline: 1px solid var(--bleu); outline-offset: 4px; }

/* ---------- Accueil ---------- */

.accueil {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.entete {
  position: absolute;
  top: 44px;
  left: var(--marge);
  right: var(--marge);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  pointer-events: none;
}
.entete > * { pointer-events: auto; }

.marque {
  margin: 0;
  padding-top: 8px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
}
.menu a { text-decoration: none; padding: 5px 0; }

/* La spirale : le texte d'un portrait, posé lettre à lettre comme sur ses rouleaux */
.spirale {
  position: absolute;
  inset: 16px 0 16px 0;
}
.spirale-tour {
  position: absolute;
  inset: 0;
  transform-origin: var(--cx, 50%) var(--cy, 50%); /* quand on change de portrait, toute la spirale tourne autour de son centre */
}

/* chaque lettre : sa place sur la spirale est calculée par spirale.js,
   son envol (translate, --fr, opacity) glisse tout seul */
.spirale .l {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  white-space: pre;
  color: var(--encre);
  will-change: transform;
  transition:
    translate var(--td, 6s) var(--te, ease) var(--tdl, 0s),
    opacity var(--td, 6s) var(--te, ease) var(--tdl, 0s),
    --fr var(--td, 6s) var(--te, ease) var(--tdl, 0s);
}

.spirale-nom {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  z-index: 2;
  width: calc(var(--r0, 112px) * 1.7);
  margin: 0;
  /* l'encre du nom est plus lourde en bas : on remonte l'image pour que le nom paraisse bien au centre */
  transform: translate(-50%, -60%);
  opacity: 0;
  animation: paraitre 3.9s ease 0.3s forwards;
  pointer-events: none;
}
.spirale-nom img { display: block; width: 100%; height: auto; }
.spirale-nom-lien { display: block; pointer-events: auto; border-radius: 50%; transition: opacity var(--lent) ease; }
.spirale-nom-lien:hover, .spirale-nom-lien:focus-visible { opacity: 0.72; }

.spirale-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.no-js .spirale-source {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
  max-width: 60ch;
  margin: 0 auto;
  padding: 0 var(--marge);
}
.no-js .spirale { position: relative; inset: auto; padding: 160px 0 200px; }
.no-js .spirale-nom { position: static; transform: none; opacity: 1; margin: 0 auto 48px; width: 240px; animation: none; }

.bas-gauche {
  position: absolute;
  left: var(--marge);
  bottom: 26px;
  z-index: 3;
  opacity: 0;
  animation: paraitre 2.6s ease 2.4s forwards;
}

/* ---------- Le lecteur de portraits-en-mots (choix de pag, 21/10 : « le disque ») ----------
   La photo ronde comme l'étiquette du disque qui tourne au centre, entourée d'un anneau de
   lettres qui tourne doucement avec le texte, et d'un coup avec la spirale quand on change
   de portrait ; à côté, le titre et le nom, toujours en entier ; puis la barre (précédent,
   numéro, suivant, lire). La ligne fine au-dessus de la barre avance à mesure que le texte
   du portrait s'enroule vers le centre. */
.lecteur { width: 340px; font-size: 12px; line-height: 1.45; color: var(--gris); }
.lecteur-haut { display: flex; align-items: center; gap: 18px; }
.lecteur-image { position: relative; display: block; flex: none; width: 112px; height: 112px; border-radius: 50%; }
.lecteur-image img {
  position: absolute;
  inset: 21px;
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: opacity 1.4s ease, filter 1.25s ease;
}
.lecteur-image::after {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(27, 25, 21, 0.14);
  pointer-events: none;
}
.lecteur-image:hover img, .lecteur-image:focus-visible img { filter: brightness(1.06) contrast(1.04); }
.lecteur-disque { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; }
.lecteur-anneau { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.lecteur-anneau text {
  font-family: var(--machine);
  font-size: 7.4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--gris);
  transition: opacity 1.4s ease;
}
/* la hauteur du texte est celle du portrait le plus long (spirale.js) : le lecteur ne bouge pas d'un portrait à l'autre */
.lecteur-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 112px; }
.lecteur-lien { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--gris); transition: opacity 1.4s ease; }
.lecteur-lien .legende-titre { font-size: 14px; line-height: 1.35; color: var(--encre); transition: color var(--lent) ease; }
.lecteur-lien:hover .legende-titre, .lecteur-lien:focus-visible .legende-titre { color: var(--bleu); }
.lecteur-qui:empty { display: none; }
.lecteur-texte .voix-bouton { align-self: flex-start; margin-top: 8px; padding: 2px 0; font-size: 12px; white-space: nowrap; }
.lecteur-texte .voix-bouton[hidden] { display: none; }

.lecteur-barre { position: relative; display: flex; align-items: center; margin-top: 14px; padding-top: 4px; border-top: 1px solid rgba(27, 25, 21, 0.16); }
.lecteur-progres {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--encre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s linear;
}
.lecteur-pas {
  width: 38px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--encre);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--lent) ease;
}
.lecteur-progres + .lecteur-pas { margin-left: -13px; }
.chevron {
  display: block;
  width: 8px;
  height: 8px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  rotate: 45deg;
  translate: 2px 0;
  transition: translate 1.2s ease;
}
.lecteur-pas-suivant .chevron { rotate: -135deg; translate: -2px 0; }
.lecteur-pas:hover, .lecteur-pas:focus-visible { color: var(--bleu); }
.lecteur-pas:hover .chevron { translate: -1px 0; }
.lecteur-pas-suivant:hover .chevron { translate: 1px 0; }
.lecteur-compte { min-width: 52px; text-align: center; font-size: 11px; letter-spacing: 0.14em; color: var(--gris); }
.lecteur-compte [data-lecteur-numero] { color: var(--encre); transition: opacity 1.4s ease; }
.lecteur-lire {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--encre);
  text-decoration: none;
  transition: color var(--lent) ease;
}
.lecteur-lire span { transition: transform 1.6s ease; }
.lecteur-lire:hover, .lecteur-lire:focus-visible { color: var(--bleu); }
.lecteur-lire:hover span { transform: translateX(6px); }

/* quand on change de portrait, l'image, le titre et l'anneau passent en fondu */
.lecteur.legende-change .lecteur-image img,
.lecteur.legende-change .lecteur-lien,
.lecteur.legende-change [data-lecteur-numero],
.lecteur.legende-change .lecteur-anneau text { opacity: 0; }

.portes {
  position: absolute;
  right: var(--marge);
  bottom: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 0;
  animation: paraitre 2.6s ease 2.4s forwards;
}
.portes a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  text-decoration: none;
}
.portes a span { transition: transform 1.6s ease; }
.portes a:hover span { transform: translateX(8px); }

@keyframes paraitre { to { opacity: 1; } }

/* Téléphone : tout se suit verticalement, la spirale prend la largeur */
@media (max-width: 760px), (max-height: 520px) {
  .accueil { overflow: visible; }
  .entete {
    position: static;
    flex-direction: column;
    gap: 10px;
    padding: 24px 16px 0;
  }
  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 18px;
  }
  .menu a { padding: 10px 0; }
  .spirale {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 100svh;
    margin: 8px 0 16px;
  }
  .bas-gauche, .portes { position: static; padding: 0 16px; }
  .bas-gauche { margin-bottom: 8px; }
  .lecteur { width: auto; max-width: 420px; }
  .portes { align-items: flex-start; padding-bottom: 40px; }
}

/* Celles et ceux qui préfèrent moins de mouvement : tout est posé d'emblée */
@media (prefers-reduced-motion: reduce) {
  .spirale .l { transition: none; }
  .spirale-nom, .bas-gauche, .portes { animation: none; opacity: 1; }
  .lecteur-progres, .lecteur-image img, .lecteur-lien { transition: none; }
}

/* ---------- Les lettres des titres (lettres.js) ---------- */
.mot { display: inline-block; white-space: nowrap; }
.lt { display: inline-block; }

/* En partant vers une autre page : tout s'efface doucement */
main { animation: entree 0.95s ease backwards; }
@keyframes entree { from { opacity: 0; } to { opacity: 1; } }
body.depart main { opacity: 0; transition: opacity 1s ease; }

[data-apparait] { opacity: 0; translate: 0 10px; transition: opacity 1.7s ease, translate 1.7s ease; }
[data-apparait].est-la { opacity: 1; translate: 0 0; }

/* Une calligraphie se dessine de haut en bas */
[data-dessine] {
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 55%);
  -webkit-mask-size: 100% 220%;
  mask-size: 100% 220%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transition: -webkit-mask-position 5.4s cubic-bezier(.45,.05,.35,1), mask-position 5.4s cubic-bezier(.45,.05,.35,1);
}
[data-dessine].se-dessine { -webkit-mask-position: 0 0; mask-position: 0 0; }

.no-js [data-apparait] { opacity: 1; translate: none; }
.no-js [data-dessine] { -webkit-mask-image: none; mask-image: none; }

/* ---------- Pages intérieures ---------- */
.entete-page {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding: 44px var(--marge) 0;
}
.entete-page .marque a { text-decoration: none; }
.entete-page .menu { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 26px; }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.etiquette {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Un portrait */
.portrait {
  display: grid;
  grid-template-columns: minmax(0, 62ch) minmax(240px, 400px);
  justify-content: space-between;
  column-gap: clamp(48px, 8vw, 128px);
  row-gap: 56px;
  padding: clamp(64px, 12vh, 132px) var(--marge) 96px;
}
.portrait-tete { grid-column: 1 / -1; }
.portrait-tete h1 {
  margin: 18px 0 22px;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.portrait-tete .qui { margin: 0; font-size: 18px; }
.portrait-tete .contexte { margin: 6px 0 0; font-size: 14px; color: var(--gris); }
.portrait-texte { grid-column: 1; }
.portrait-texte p {
  margin: 0 0 1.4em;
  font-size: 17px;
  line-height: 1.8;
  text-wrap: pretty;
  hyphens: auto;
}
.portrait-texte .signature { margin-top: 2.4em; font-size: 14px; color: var(--gris); }
.portrait-oeuvre {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  position: sticky;
  top: 48px;
  margin: 0;
}
.portrait-oeuvre img { display: block; width: 100%; height: auto; }
.portrait-oeuvre figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--gris); }

.portrait-pied {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(27, 25, 21, 0.18);
}
.portrait-pied nav { display: flex; flex-wrap: wrap; gap: 0 32px; }
.portrait-pied a { padding: 12px 0; text-decoration: none; }

@media (max-width: 860px) {
  .portrait { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-top: 48px; }
  .portrait-oeuvre { grid-column: 1; grid-row: auto; position: static; max-width: 420px; }
  .entete-page { padding: 24px 16px 0; }
  .portrait { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  [data-apparait] { opacity: 1; translate: none; transition: none; }
  [data-dessine] { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Commander ---------- */
.commande {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vh, 112px);
  padding: clamp(64px, 12vh, 132px) var(--marge) 120px;
}
.commande-tete { max-width: 62ch; }
.commande-tete h1 {
  margin: 18px 0 40px;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.citation { margin: 0 0 28px; padding: 0; font-size: 21px; line-height: 1.6; font-style: italic; }
.citation p { margin: 0; }
.chapeau { margin: 0; color: var(--gris); line-height: 1.8; }

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 56px clamp(40px, 5vw, 80px);
}
.offre { display: flex; flex-direction: column; gap: 14px; }
.offre-numero { margin: 0; font-size: 13px; letter-spacing: 0.22em; color: var(--gris); }
.offre h2 { margin: 0 0 6px; font-size: 24px; font-weight: 400; line-height: 1.3; }
.offre p { margin: 0; line-height: 1.75; }
.offre dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(27, 25, 21, 0.18); padding-top: 16px; }
.offre dl div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.5; }
.offre dt { color: var(--gris); }
.offre dd { margin: 0; }

.polaroid { position: relative; align-self: flex-start; margin: 14px 0 10px 6px; rotate: -2.5deg; }
.polaroid-image {
  width: 220px;
  padding: 14px 14px 52px;
  background: #FBFAF6;
  box-shadow: 0 10px 28px rgba(27, 25, 21, 0.12), 0 1px 2px rgba(27, 25, 21, 0.12);
}
.polaroid-image img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #EDE7DB; padding: 22px 12px; }
.polaroid-sceau { position: absolute; right: -18px; bottom: -14px; width: 64px; height: 64px; rotate: 12deg; }

.deroule h2, .demande h2 { margin: 0 0 32px; font-size: 24px; font-weight: 400; }
.deroule ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.deroule li { display: grid; grid-template-columns: 4ch minmax(0, 1fr); line-height: 1.7; }
.deroule .pas { color: var(--gris); }

.formulaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px 48px;
  max-width: 980px;
}
.champ { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.champ-large, .envoi, .note-apercu { grid-column: 1 / -1; }
.champ label { font-size: 14px; color: var(--gris); }
.champ input, .champ select, .champ textarea {
  font: inherit;
  color: var(--encre);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(27, 25, 21, 0.35);
  border-radius: 0;
  padding: 10px 0;
  min-height: 44px;
  transition: border-color var(--lent) ease;
}
.champ textarea { border: 1px solid rgba(27, 25, 21, 0.35); padding: 12px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); }
.envoi { margin: 8px 0 0; }
.envoi button {
  font: inherit;
  color: var(--encre);
  background: none;
  border: 1px solid var(--encre);
  padding: 14px 26px;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--lent) ease, border-color var(--lent) ease;
}
.envoi button:hover, .envoi button:focus-visible { color: var(--bleu); border-color: var(--bleu); }
.note-apercu { margin: 0; font-size: 14px; color: var(--gris); }
.offres-une { display: block; max-width: 62ch; }
.envoi-etat { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.6; }
.envoi button[disabled] { opacity: 0.5; cursor: default; }
/* piège à robots : invisible pour les personnes */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  .commande { padding: 48px 16px 96px; }
}

/* ---------- La liste des portraits ---------- */
.liste { padding: clamp(64px, 12vh, 132px) var(--marge) 120px; display: flex; flex-direction: column; gap: 64px; }
.liste-tete { max-width: 62ch; }
.liste-tete h1 { margin: 18px 0 28px; font-size: clamp(30px, 4.2vw, 52px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
.annee { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 8px 32px; max-width: 1100px; }
.annee h2 { margin: 0; font-size: 15px; font-weight: 400; color: var(--gris); padding-top: 12px; }
.annee ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.annee li { display: flex; flex-direction: column; padding: 10px 0 12px; border-bottom: 1px solid rgba(27, 25, 21, 0.1); }
.annee li a, .annee li .ligne { display: flex; align-items: baseline; gap: 14px; text-decoration: none; padding: 2px 0; }
.annee .nom { font-size: 18px; }
.annee .pointilles { flex: 1; min-width: 24px; border-bottom: 1px dotted rgba(27, 25, 21, 0.35); translate: 0 -5px; }
.annee .titre { font-size: 15px; text-align: right; }
.annee .ctx { font-size: 13px; color: var(--gris); margin-top: 4px; }
.annee .sans-texte .ligne { color: var(--gris); }
.annee li a .nom { transition: letter-spacing 1.7s ease, color var(--lent) ease; }
.annee li a:hover .nom { letter-spacing: 0.06em; }
@media (max-width: 700px) {
  .liste { padding: 48px 16px 96px; }
  .annee { grid-template-columns: minmax(0, 1fr); }
  .annee .pointilles { display: none; }
  .annee li a, .annee li .ligne { flex-direction: column; gap: 2px; }
  .annee .titre { text-align: left; }
}

.portrait-tete .note-apercu, .liste .note-apercu { margin: 18px 0 0; font-size: 13px; color: #8C2A1F; }

/* ---------- Rubriques : Calligraphies, Expositions, Écrits, Presse, Stéphanie ---------- */
.rubrique { padding: clamp(64px, 12vh, 132px) var(--marge) 120px; display: flex; flex-direction: column; gap: clamp(56px, 9vh, 96px); }
.rubrique-tete { max-width: 62ch; }
.rubrique-tete h1 { margin: 18px 0 24px; font-size: clamp(30px, 4.2vw, 52px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
.bloc { display: flex; flex-direction: column; gap: 28px; }
.bloc-titre { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); }
.certitude { font-size: 12px; letter-spacing: 0.04em; color: #8C2A1F; white-space: nowrap; }

.chrono { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 1100px; }
.chrono > li { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 0 32px; padding: 22px 0 26px; border-top: 1px solid rgba(27, 25, 21, 0.12); }
.chrono-annee { margin: 0; font-size: 15px; color: var(--gris); padding-top: 3px; }
.chrono-corps h2 { margin: 0 0 6px; font-size: 19px; font-weight: 400; line-height: 1.45; }
.chrono-lieu { margin: 0 0 6px; font-size: 15px; }
.chrono-detail { margin: 0; font-size: 14px; line-height: 1.7; color: var(--gris); max-width: 72ch; }
.chrono-images { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-top: 20px; }
.chrono-images figure { margin: 0; max-width: 320px; }
.chrono-images img { display: block; max-width: 100%; height: auto; max-height: 260px; width: auto; }
.chrono-images figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--gris); }

.galerie { columns: 3 300px; column-gap: clamp(32px, 4vw, 64px); }
.oeuvre { break-inside: avoid; margin: 0 0 56px; }
.oeuvre img { display: block; width: 100%; height: auto; }
.oeuvre figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--gris); }
.oeuvre-titre { font-size: 16px; color: var(--encre); }
.oeuvre-titre a { text-decoration: none; }
.oeuvre .note-apercu { margin-top: 4px; font-size: 12px; color: #8C2A1F; }

.bio { display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 62ch); gap: clamp(40px, 6vw, 96px); align-items: start; }
.bio-photo { margin: 0; }
.bio-photo img { display: block; width: 100%; height: auto; filter: grayscale(1); }
.bio-photo figcaption { margin-top: 10px; font-size: 12px; color: var(--gris); }
.bio-texte p, .texte-colonne p { margin: 0 0 1.4em; font-size: 17px; line-height: 1.8; text-wrap: pretty; }
.texte-colonne { max-width: 62ch; }
.rubrique-stephanie .note-apercu, .rubrique-tete .note-apercu { margin: 0; font-size: 13px; color: #8C2A1F; }

@media (max-width: 860px) {
  .rubrique { padding: 48px 16px 96px; }
  .chrono > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio-photo { max-width: 340px; }
}
.chrono-note { margin-top: 8px; font-size: 13px; color: var(--gris); max-width: 72ch; }
.chrono-note summary { cursor: pointer; list-style: none; font-size: 12px; letter-spacing: 0.06em; color: #8C2A1F; padding: 6px 0; }
.chrono-note summary::-webkit-details-marker { display: none; }
.chrono-note summary::before { content: '+ '; }
.chrono-note[open] summary::before { content: '− '; }
.chrono-note p { margin: 6px 0 0; line-height: 1.7; }

/* ---------- Les apparitions de la spirale (au chargement) ---------- */
@property --rayon { syntax: '<length>'; inherits: false; initial-value: 0px; }
.intro-encre .spirale-tour {
  -webkit-mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), #000 0, #000 calc(var(--rayon) - 110px), transparent var(--rayon));
  mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), #000 0, #000 calc(var(--rayon) - 110px), transparent var(--rayon));
  animation: i-encre 3.8s cubic-bezier(.3,.1,.2,1) both;
}
@keyframes i-encre { from { --rayon: 0px; } to { --rayon: var(--rmax, 900px); } }
.intro-fondu .spirale-tour { transform-origin: var(--cx, 50%) var(--cy, 50%); animation: i-fondu 3s cubic-bezier(.25,.1,.25,1) both; }
@keyframes i-fondu { from { opacity: 0; filter: blur(6px); transform: scale(.97); } to { opacity: 1; filter: blur(0); transform: none; } }
.intro-enroulement .spirale-tour { transform-origin: var(--cx, 50%) var(--cy, 50%); animation: i-enroule 4.2s cubic-bezier(.2,.65,.2,1) both; }
@keyframes i-enroule { from { opacity: 0; transform: rotate(-150deg) scale(.42); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }

/* petit sélecteur pour essayer les apparitions (adresse terminée par ?essais) */
.essais {
  position: fixed; left: 50%; top: 10px; translate: -50% 0; z-index: 10;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
  max-width: calc(100vw - 32px); padding: 8px 14px;
  background: rgba(244, 240, 232, 0.94); border: 1px solid rgba(27, 25, 21, 0.25);
  font-size: 12px;
}
.essais a { text-decoration: none; padding: 6px 0; color: var(--gris); }
.essais a[aria-current] { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; }
.chrono-genre { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.chrono-texte { margin: 6px 0 0; font-size: 15px; line-height: 1.7; max-width: 66ch; }
.presse-pub { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.presse-date { letter-spacing: 0.04em; text-transform: none; }
.presse-titre { margin: 0 0 8px; }
.presse-citation { margin: 4px 0 0; padding: 0; max-width: 64ch; }
.presse-citation p { margin: 0; font-size: 18px; line-height: 1.7; font-style: italic; text-wrap: pretty; }
.presse-citation .presse-trad { margin-top: 6px; font-size: 12px; font-style: normal; color: var(--gris); }
.presse-lien { margin: 10px 0 0; font-size: 14px; }
.presse-lien a { text-decoration: none; }

/* ---------- Agrandir une image ---------- */
.agrandir { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; width: 100%; text-align: left; }
.chrono-images .agrandir { width: auto; }
.agrandir:focus-visible { outline: 1px solid var(--bleu); outline-offset: 4px; }
.visionneuse {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 4vh 4vw; background: rgba(244, 240, 232, 0.97); cursor: zoom-out;
  opacity: 0; transition: opacity 0.45s ease;
}
.visionneuse.ouverte { opacity: 1; }
.visionneuse img {
  max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 18px 48px rgba(27, 25, 21, 0.14);
  scale: 0.96; transition: scale 0.55s cubic-bezier(.25,.6,.3,1);
}
.visionneuse.ouverte img { scale: 1; }
.visionneuse-legende { margin: 0; max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--gris); text-align: center; }
.visionneuse-fermer {
  position: absolute; top: 14px; right: 18px; width: 44px; height: 44px;
  font: 28px/1 var(--machine); color: var(--encre); background: none; border: 0; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .visionneuse, .visionneuse img { transition: none; } }
.chrono.presse > li { grid-template-columns: minmax(0, 1fr); }
.chrono.presse .presse-pub { font-size: 14px; color: var(--encre); }
.article-scan { margin: 0; max-width: 1100px; }
.article-scan img { display: block; width: 100%; height: auto; }
.article-scan figcaption { margin-top: 10px; font-size: 12px; color: var(--gris); }
.article-intertitre { margin: 1.6em 0 0.8em; font-size: 19px; font-weight: 400; }

/* ---------- Vidéos et voix ---------- */
.medias { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px 48px; }
.media { margin: 0; width: min(640px, 100%); }
.media-vertical { width: min(300px, 100%); }
.media-son, .media-fichier { width: min(520px, 100%); }
.media-cadre { position: relative; aspect-ratio: 16 / 9; background: #E9E3D8; overflow: hidden; }
.media-vertical .media-cadre { aspect-ratio: 9 / 16; }
.media-son .media-cadre.charge { aspect-ratio: auto; height: 166px; }
.media-lancer { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.media-lancer img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter var(--lent) ease; }
.media-lancer:hover img, .media-lancer:focus-visible img { filter: brightness(0.92); }
.media-lancer:focus-visible { outline: 1px solid var(--bleu); outline-offset: 4px; }
.media-bouton { position: absolute; left: 16px; bottom: 16px; padding: 10px 18px; background: rgba(244, 240, 232, 0.94); color: var(--encre); font: 14px/1 var(--machine); letter-spacing: 0.06em; }
.media-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media audio { display: block; width: 100%; }
.media figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--gris); }
.media-titre { color: var(--encre); font-size: 15px; }
.chrono-corps .medias { margin-top: 18px; }

/* ---------- La voix ---------- */
.voix-lecteur { position: fixed; left: -9999px; top: 0; width: 300px; height: 166px; border: 0; opacity: 0; pointer-events: none; }
.voix-bouton { align-self: flex-start; margin-top: 6px; padding: 6px 0; font: 13px/1.4 var(--machine); color: var(--encre); background: none; border: 0; border-bottom: 1px solid rgba(27, 25, 21, 0.35); cursor: pointer; transition: color var(--lent) ease, border-color var(--lent) ease; }
.voix-bouton::before { content: '♪ '; }
.voix-bouton[aria-pressed="true"] { color: var(--bleu); border-color: var(--bleu); }
.voix-bouton:hover, .voix-bouton:focus-visible { color: var(--bleu); border-color: var(--bleu); }
.portrait-tete .voix { margin: 18px 0 0; }
.portrait-traduction { margin-top: 8px; }
.portrait-traduction .bloc-titre { margin: 0 0 1.2em; }
.portrait-original { grid-column: 1; margin-top: -24px; font-size: 14px; color: var(--gris); }
.portrait-original summary { cursor: pointer; list-style: none; padding: 10px 0; font-size: 13px; letter-spacing: 0.06em; }
.portrait-original summary::-webkit-details-marker { display: none; }
.portrait-original summary::before { content: '+ '; }
.portrait-original[open] summary::before { content: '− '; }
.portrait-original p { margin: 0 0 1.2em; line-height: 1.7; }


/* ---------- Écouter, regarder ---------- */
.ecouter { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px 56px; }
.ecouter-entree { display: flex; flex-direction: column; gap: 4px; }
.ecouter-entree .media { width: min(560px, 100%); }
.ecouter-entree .media-vertical { width: min(280px, 100%); }
.ecouter-entree .media-son, .ecouter-entree .media-fichier { width: min(460px, 100%); }