/* ═══ Jetons — parti pris sombre, la salle obscure ; l'inverse clair suit ═══ */
:root {
  --fond:      #0c0f10;
  --fond-2:    #14181a;
  --texte:     #ebe6da;
  --texte-2:   #918d84;
  --texte-3:   #6a675f;
  --or:        #c08a2e;
  --or-clair:  #dcae5c;
  --sur-or:    #0c0f10;
  --trait:     rgba(235, 230, 218, .14);
  --trait-fort:rgba(235, 230, 218, .30);
  --ombre:     0 18px 40px -18px rgba(0, 0, 0, .85);

  /* la marque, en masque : sert de puce */
  --signe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M50%2050%20L54%2027%20L50%209%20L46%2027%20Z%22%20transform%3D%22rotate(0%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20L54%2027%20L50%209%20L46%2027%20Z%22%20transform%3D%22rotate(60%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20L54%2027%20L50%209%20L46%2027%20Z%22%20transform%3D%22rotate(120%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20L54%2027%20L50%209%20L46%2027%20Z%22%20transform%3D%22rotate(180%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20L54%2027%20L50%209%20L46%2027%20Z%22%20transform%3D%22rotate(240%2050%2050)%22%2F%3E%3Cpath%20d%3D%22M50%2050%20L54%2027%20L50%209%20L46%2027%20Z%22%20transform%3D%22rotate(300%2050%2050)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --etroit: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;

  --t-xs: .69rem;  --t-sm: .79rem;  --t-md: .94rem;
  --t-lg: 1.14rem; --t-xl: 1.42rem; --t-2xl: 2.1rem; --t-3xl: 3rem;

  --marge: clamp(1.1rem, 4vw, 3.5rem);
  --max: 1240px;
  --lisible: 34rem;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fond: #efebe2; --fond-2: #e6e1d6;
    --texte: #14181a; --texte-2: #5d5a53; --texte-3: #86827a;
    --or: #8a5f14; --or-clair: #6d4a0c; --sur-or: #fdfbf6;
    --trait: rgba(20, 24, 26, .16); --trait-fort: rgba(20, 24, 26, .34);
    --ombre: 0 16px 34px -20px rgba(20, 24, 26, .5);
  }
}
:root[data-theme="light"] {
  --fond: #efebe2; --fond-2: #e6e1d6;
  --texte: #14181a; --texte-2: #5d5a53; --texte-3: #86827a;
  --or: #8a5f14; --or-clair: #6d4a0c; --sur-or: #fdfbf6;
  --trait: rgba(20, 24, 26, .16); --trait-fort: rgba(20, 24, 26, .34);
  --ombre: 0 16px 34px -20px rgba(20, 24, 26, .5);
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
/* les liens écrits dans un texte courant — et seulement là — sont soulignés et dorés */
:is(.prose, .texte, .coll-argument, .fiche-resume, .extrait, .jalon-note, .adresse) a:not(.lien) {
  color: var(--or); text-decoration: underline; text-underline-offset: 3px;
}
:is(.prose, .texte, .coll-argument, .fiche-resume, .extrait, .jalon-note, .adresse) a:not(.lien):hover { color: var(--or-clair); }

.enveloppe { max-width: var(--max); margin-inline: auto; padding-inline: var(--marge); }

/* ═══ Bandeau ═══ */
.bandeau {
  font-family: var(--etroit); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3);
  border-bottom: 1px solid var(--trait);
  padding-block: .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.parution { margin: 0; }
.parution a { color: var(--or); text-decoration: none; border-bottom: 1px solid currentColor; }
.parution a:hover { color: var(--or-clair); }
.bascule {
  position: relative; flex: 0 0 auto;
  width: 40px; height: 20px; padding: 0;
  background: none; border: 1px solid var(--trait-fort); border-radius: 999px;
  cursor: pointer; transition: border-color .25s;
}
.bascule:hover { border-color: var(--or); }
.bascule::after {
  content: ""; position: absolute; top: 50%; left: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--texte-2);
  transform: translateY(-50%);
  transition: transform .34s cubic-bezier(.4, .1, .2, 1), background .25s, box-shadow .25s;
}
.bascule:hover::after { box-shadow: inset 0 0 0 1.5px var(--or); }
.bascule[aria-checked="true"]::after {
  transform: translate(20px, -50%);
  background: var(--or);
  box-shadow: inset 0 0 0 6px var(--or);
}

/* ═══ Enseigne ═══ */
/* La marque : l'astérisque à six branches de la variante 6, puis le nom
   en deux lignes de capitales du même corps. text-indent rattrape l'approche
   de la dernière lettre, qui sinon décale la ligne vers la gauche. */
.marque-signe {
  display: block; height: auto; color: var(--or);
  width: clamp(26px, 5.6vw, 40px);
  margin: 0 auto clamp(1rem, 2.6vw, 1.5rem);
}
.enseigne { text-align: center; padding-block: clamp(2.4rem, 6vw, 4.2rem) clamp(1.4rem, 3.5vw, 2.2rem); }
.marque {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.28rem, 3.5vw, 2rem);
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  line-height: 1.5; margin: 0;
}
.marque a { text-decoration: none; display: inline-block; text-align: center; }
.marque-l1, .marque-l2 { display: block; }
.devise {
  font-family: var(--etroit); font-size: var(--t-sm);
  letter-spacing: .2em; text-transform: uppercase; color: var(--texte-2);
  margin: clamp(1rem, 2.2vw, 1.5rem) 0 0;
}

/* ═══ Rubriques ═══ */
.rubriques {
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  backdrop-filter: blur(8px);
}
.rubriques ul {
  list-style: none; margin-inline: auto; padding: 0; max-width: var(--max);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.3rem, 2vw, 1.7rem);
  padding-inline: var(--marge);
}
.rubriques a {
  display: inline-block; text-decoration: none;
  font-family: var(--etroit); font-size: var(--t-sm);
  letter-spacing: .11em; text-transform: uppercase; color: var(--texte-2);
  padding: .9rem .1rem; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.rubriques a:hover { color: var(--texte); }
.rubriques a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--or); }

/* ═══ Blocs éditoriaux ═══ */
.section { padding-block: clamp(2.6rem, 7vw, 5rem); border-top: 1px solid var(--trait); }
.section.premiere { border-top: 0; }
.chapeau {
  font-family: var(--etroit); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--texte-3);
  margin: 0 0 1.4rem;
}
h2.titre { font-size: clamp(1.4rem, 3.4vw, var(--t-xl)); font-weight: 500; margin: 0 0 .9rem; line-height: 1.2; text-wrap: balance; }
.texte { max-width: var(--lisible); font-size: var(--t-lg); line-height: 1.68; color: var(--texte-2); margin: 0 0 1rem; }
.texte strong { color: var(--texte); font-weight: 500; }
.lien {
  display: inline-block;
  font-family: var(--etroit); font-size: var(--t-sm);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--or); background: none; border: 0; padding: 0 0 2px; cursor: pointer;
  border-bottom: 1px solid currentColor; text-decoration: none;
}
.lien:hover { color: var(--or-clair); }

/* ═══ Accueil : le propos ═══ */
.propos { text-align: center; padding-block: clamp(1.2rem, 3.5vw, 2.2rem) clamp(2.8rem, 7vw, 5rem); }
.credo {
  font-size: clamp(1.32rem, 3.5vw, 2rem);
  line-height: 1.36; font-weight: 400; margin: 0 auto;
  max-width: 27ch; text-wrap: balance;
}
.credo em { font-style: italic; color: var(--or-clair); }
.credo-source {
  font-family: var(--etroit); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3);
  margin: 1.5rem 0 0;
}
.propos .texte { margin-inline: auto; margin-block: 2.4rem 1.6rem; }

/* ═══ Accueil : les foyers ═══ */
.foyer { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 800px) { .foyer { grid-template-columns: 1fr; } }
.foyer .nombre {
  font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--or); margin: 0 0 .6rem;
  font-variant-numeric: tabular-nums;
}
.foyer .texte { font-size: var(--t-md); }

/* Le rayon : les plats défilent par groupe, sans barre visible ; le script ajoute
   les points dessous. Sans script, il reste un défilement horizontal ordinaire. */
.rayon {
  display: flex; gap: clamp(.7rem, 1.6vw, 1.1rem); overflow-x: auto; padding-block: .2rem 1rem;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
}
.js .rayon { scrollbar-width: none; }
.js .rayon::-webkit-scrollbar { display: none; }
.rayon > a { flex: 0 0 clamp(96px, 12vw, 126px); display: block; text-decoration: none; scroll-snap-align: start; }
.rayon > a:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.rayonnage { min-width: 0; }
.rayon-points { display: flex; justify-content: center; gap: .55rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.rayon-points[hidden] { display: none; }
.rayon-points button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--trait-fort); background: none; transition: background .2s, border-color .2s;
}
.rayon-points button:hover { border-color: var(--or); }
.rayon-points button[aria-current="true"] { background: var(--or); border-color: var(--or); }
@media (prefers-reduced-motion: reduce) { .rayon { scroll-behavior: auto; } }

/* ═══ Accueil : collections ═══ */
.collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0 clamp(1rem, 3vw, 2.5rem); }
.collection { padding-block: 1.5rem; border-top: 1px solid var(--trait); }
.collection h3 { font-size: var(--t-lg); font-weight: 500; margin: 0 0 .3rem; }
.collection h3 a { text-decoration: none; }
.collection h3 a:hover { color: var(--or); }
.collection .compte-c { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.collection p { font-size: var(--t-md); color: var(--texte-2); margin: .6rem 0 .9rem; line-height: 1.6; max-width: 36ch; }

/* ═══ Page de collection, de rubrique ═══ */
.coll-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
@media (max-width: 800px) { .coll-tete { grid-template-columns: 1fr; } }
.coll-titre { font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 500; line-height: 1.12; margin: 0 0 1.4rem; text-wrap: balance; }
.coll-argument { max-width: 38rem; }
.coll-argument p { font-size: var(--t-lg); line-height: 1.68; color: var(--texte-2); margin: 0 0 1.1rem; }
.coll-argument p:first-of-type { color: var(--texte); }
.coll-liens { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.6rem; }

.colophon { border-top: 1px solid var(--trait); padding-top: 1rem; margin: 0; }
.colophon dt { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); margin-top: .95rem; }
.colophon dt:first-child { margin-top: 0; }
.colophon dd { margin: .15rem 0 0; font-size: var(--t-md); font-variant-numeric: tabular-nums; }

.coll-ordre {
  font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--texte-3);
  margin: 0 0 1.4rem; padding-bottom: .9rem; border-bottom: 1px solid var(--trait);
}
.legende .r { display: block; font-family: var(--etroit); font-size: var(--t-xs); color: var(--texte-3); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.legende .p { display: block; font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .07em; color: var(--texte-3); margin-top: .3rem; font-variant-numeric: tabular-nums; }

.voisines { border-top: 1px solid var(--trait); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .7rem 2rem; }
.voisines .lien { border-bottom-color: var(--trait-fort); color: var(--texte-2); }
.voisines .lien:hover { color: var(--or); border-bottom-color: currentColor; }

.presentation { padding-block: clamp(2rem, 5vw, 3.2rem) clamp(1.8rem, 5vw, 3rem); }
.presentation .coll-titre { margin-bottom: 1.2rem; }
/* suivie des filtres : l'espace du bas est celui des filtres, pas le sien */
.presentation.avec-filtres { padding-bottom: 0; }
.presentation.avec-filtres .coll-titre:last-child { margin-bottom: 0; }
.groupes { margin-top: clamp(1.2rem, 3vw, 2rem); }

.groupe-titre {
  font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--or);
  margin: clamp(2rem, 5vw, 3rem) 0 1.2rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--trait);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.groupe-titre:first-child, .groupe:first-child .groupe-titre { margin-top: 0; }
.groupe-titre a { text-decoration: none; }
.groupe-titre a:hover { color: var(--or-clair); }
.groupe-titre span { color: var(--texte-3); font-variant-numeric: tabular-nums; }

/* ═══ Textes retrouvés : une frise ═══ */
.frise { margin: 0; padding: 0; list-style: none; }
.jalon {
  display: grid; grid-template-columns: 6rem 112px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  padding-block: clamp(1.6rem, 4vw, 2.4rem);
  border-top: 1px solid var(--trait); align-items: start;
}
.jalon:first-child { border-top: 0; }
.jalon .boite { align-self: start; }
.jalon a.plaque { display: block; text-decoration: none; }
.jalon a.plaque:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.jalon a.plaque:hover .plat { transform: translateY(-5px); }
.annee {
  font-family: var(--etroit); font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  color: var(--or); font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: .03em;
}
.annee.indatee { color: var(--texte-3); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.annee small { display: block; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); margin-top: .4rem; }
.jalon-auteur { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-2); margin: 0 0 .3rem; }
.jalon-titre { font-size: var(--t-lg); font-weight: 500; margin: 0; line-height: 1.25; }
.jalon-titre a { text-decoration: none; }
.jalon-titre a:hover { color: var(--or); }
.jalon-source { font-style: italic; color: var(--texte-2); font-size: var(--t-md); margin: .3rem 0 0; }
.jalon-note { font-size: var(--t-md); color: var(--texte-2); margin: .85rem 0 0; max-width: 50ch; line-height: 1.62; }
.jalon-fin { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .08em; color: var(--texte-3); margin: .9rem 0 0; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .jalon { grid-template-columns: 4.5rem minmax(0, 1fr); row-gap: 1.1rem; }
  .annee { grid-row: 1; grid-column: 1; }
  .jalon .boite { grid-row: 1; grid-column: 2; max-width: 108px; }
  .jalon-corps { grid-row: 2; grid-column: 2; }
}

/* un titre pour les lecteurs d'écran et le plan de la page, pas pour l'œil */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ═══ Filtres — n'ont de sens qu'avec le script ═══ */
.filtres { display: none; padding-block-start: clamp(1.4rem, 4vw, 2.2rem); margin: 0; }
.js .filtres { display: block; }
.axe { display: grid; grid-template-columns: 8.5rem 1fr; gap: .7rem 1rem; align-items: baseline; padding-block: .55rem; border-top: 1px solid var(--trait); }
.axe:first-child { border-top: 0; }
.axe > dt { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); }
.axe > dd { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.puce {
  font-family: var(--etroit); font-size: var(--t-sm); color: var(--texte-2); background: none;
  border: 1px solid var(--trait); border-radius: 2px;
  padding: .22rem .62rem; cursor: pointer; max-width: 100%; text-align: left;
  transition: color .18s, border-color .18s, background .18s;
}
.puce:hover { color: var(--texte); border-color: var(--trait-fort); }
.puce[aria-pressed="true"] { color: var(--sur-or); background: var(--or); border-color: var(--or); }
a.puce { display: inline-block; text-decoration: none; line-height: normal; }
.groupe[hidden] { display: none; }

.resultat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: clamp(1.5rem, 4vw, 2.2rem) 0 1.2rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--trait);
}
.compte { font-family: var(--etroit); font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.raz { font-family: var(--etroit); font-size: var(--t-sm); color: var(--or); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.raz[hidden] { display: none; }
.vide { font-style: italic; color: var(--texte-2); padding-block: 3rem; }
.vide[hidden] { display: none; }

/* ═══ Grille — un rayonnage ═══ */
.grille {
  list-style: none; margin: 0 0 clamp(2rem, 5vw, 3.5rem); padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: clamp(1.6rem, 3.4vw, 2.8rem) clamp(1rem, 2.4vw, 1.8rem);
}
.carte { display: grid; grid-template-rows: 1fr auto; gap: .7rem; }
.carte[hidden] { display: none; }
.carte > a { display: grid; grid-template-rows: 1fr auto; gap: .7rem; align-items: end; height: 100%; text-decoration: none; }
.carte > a:focus-visible { outline: 2px solid var(--or); outline-offset: 5px; }

.boite { container-type: inline-size; align-self: end; }
.plat {
  aspect-ratio: var(--ratio);
  background: var(--fond-plat); color: var(--encre);
  box-shadow: var(--ombre);
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 4cqw;
  padding: 9cqw 7cqw 7cqw; text-align: center; font-family: var(--serif);
  transition: transform .34s cubic-bezier(.2,.7,.3,1), box-shadow .34s;
}
/* le filet de couleur des volumes de l'Histoire de l'art */
.plat.cadre { box-shadow: inset 0 0 0 2.4cqw var(--cadre), var(--ombre); }
.carte > a:hover .plat.cadre, .carte > a:focus-visible .plat.cadre,
.rayon > a:hover .plat.cadre, .rayon > a:focus-visible .plat.cadre { box-shadow: inset 0 0 0 2.4cqw var(--cadre), 0 26px 46px -18px rgba(0,0,0,.8); }
/* une vraie couverture, quand le fichier existe */
.plat.photo { display: block; padding: 0; background: var(--fond-2); }
.plat.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte > a:hover .plat, .carte > a:focus-visible .plat,
.rayon > a:hover .plat, .rayon > a:focus-visible .plat { transform: translateY(-7px); box-shadow: 0 26px 46px -18px rgba(0,0,0,.8); }
.plat-auteur { font-size: 7cqw; line-height: 1.2; }
.plat-titre { font-size: 10cqw; font-weight: 600; line-height: 1.14; align-self: center; text-wrap: balance; }
.plat-coll { font-size: 5.6cqw; line-height: 1.25; opacity: .92; }
/* La marque au pied du plat : l'astérisque, puis le nom en capitales espacées. */
.plat-marque { display: grid; justify-items: center; gap: 3.4cqw; }
.plat-signe { display: block; width: 11cqw; height: auto; }
.plat-nom {
  font-size: 4.6cqw; line-height: 1.45;
  letter-spacing: .18em; text-indent: .18em; text-transform: uppercase;
}

.legende { font-size: var(--t-sm); line-height: 1.4; }
.legende .t { display: block; font-size: var(--t-md); }
.legende .a { display: block; font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--texte-3); margin-top: .22rem; }

/* ═══ Fiche ═══ */
.retour {
  display: inline-block; text-decoration: none;
  font-family: var(--etroit); font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-2); padding: 0 0 1.8rem;
}
.retour:hover { color: var(--or); }
.fiche-corps { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 720px) { .fiche-corps { grid-template-columns: 1fr; } .fiche-plat { max-width: 260px; } }
.fiche-titre { font-size: clamp(1.7rem, 4.6vw, var(--t-2xl)); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
.fiche-soustitre { font-style: italic; color: var(--texte-2); font-size: var(--t-lg); margin: .5rem 0 0; }
.fiche-auteur { font-family: var(--etroit); font-size: var(--t-sm); letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin: 0 0 .9rem; }
.fiche-auteur a { text-decoration: none; }
.fiche-auteur a:hover { color: var(--or-clair); }
.fiche-resume { max-width: 64ch; margin: 1.8rem 0; font-size: var(--t-lg); line-height: 1.66; }
.fiche-resume p { margin: 0 0 1rem; }
.releve { border-top: 1px solid var(--trait); margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 9rem 1fr; }
.releve dt, .releve dd { border-bottom: 1px solid var(--trait); padding-block: .6rem; margin: 0; }
.releve dt { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }
.releve dd { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.releve a { text-decoration: none; border-bottom: 1px solid var(--trait-fort); }
.releve a:hover { color: var(--or); border-bottom-color: currentColor; }
.commander {
  display: inline-block; margin-top: 2rem;
  font-family: var(--etroit); font-size: var(--t-sm); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sur-or); background: var(--or); text-decoration: none;
  padding: .8rem 1.5rem; border-radius: 2px; transition: background .2s;
}
.commander:hover { background: var(--or-clair); }
.prix { font-family: var(--etroit); font-size: var(--t-md); color: var(--texte-2); margin-left: .9rem; font-variant-numeric: tabular-nums; }

.sommaire, .extrait { max-width: 64ch; margin: 0 0 1.6rem; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.sommaire summary, .extrait summary {
  cursor: pointer; padding-block: .8rem; list-style: none;
  font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--or);
}
.sommaire summary::-webkit-details-marker, .extrait summary::-webkit-details-marker { display: none; }
.sommaire summary::after, .extrait summary::after { content: " ▾"; }
.sommaire[open] summary::after, .extrait[open] summary::after { content: " ▴"; }
.sommaire ol { margin: 0 0 1.2rem; padding: 0; list-style: none; counter-reset: s; }
.sommaire li {
  counter-increment: s; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: .2rem .6rem; padding-block: .35rem; border-top: 1px solid var(--trait);
  font-size: var(--t-md);
}
.sommaire li::before { content: counter(s); font-family: var(--etroit); font-size: var(--t-xs); color: var(--texte-3); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.sommaire .s-t { grid-column: 2; }
.sommaire .s-a { grid-column: 2; font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.sommaire .s-section {
  display: block; counter-increment: none; counter-reset: s;
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--trait-fort);
  font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--or);
}
.sommaire .s-section::before { content: none; }
.sommaire li.s-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.extrait-source {
  font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-3); margin: 0 0 1rem;
}
.extrait p:not(.extrait-source) { font-size: var(--t-lg); line-height: 1.72; margin: 0 0 1.1rem; text-align: justify; hyphens: auto; }
.extrait p:last-child { margin-bottom: 1.6rem; }

.librairie {
  margin: 1.1rem 0 0; font-size: var(--t-md); color: var(--texte-2);
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.librairie::before {
  content: ""; flex: 0 0 auto; align-self: center;
  width: .8em; height: .8em; background: var(--or);
  -webkit-mask: var(--signe) center / contain no-repeat;
  mask: var(--signe) center / contain no-repeat;
}

/* autour du livre : le volume d'avant, celui d'après, la même collection */
.suite { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--trait); }
.suite a { text-decoration: none; font-size: var(--t-md); color: var(--texte-2); max-width: 24rem; }
.suite a:hover { color: var(--or); }
.suite a span { display: block; font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); margin-bottom: .2rem; }
.suite a.apres { text-align: right; margin-left: auto; }
.autour h3 { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3); font-weight: 400; margin: 0 0 1.2rem; }

/* ═══ L'éditeur, et les pages de texte ═══ */
.editeur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 800px) { .editeur { grid-template-columns: 1fr; } }
.encart { border-top: 1px solid var(--trait); padding-top: 1rem; margin: 0; }
.encart dt { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3); margin-top: 1rem; }
.encart dt:first-child { margin-top: 0; }
.encart dd { margin: .15rem 0 0; font-size: var(--t-md); }

.prose { max-width: var(--lisible); }
.prose p, .prose ul { font-size: var(--t-lg); line-height: 1.68; color: var(--texte-2); margin: 0 0 1rem; }
.prose strong { color: var(--texte); font-weight: 500; }
.prose h3 { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--or); font-weight: 600; margin: 2.2rem 0 .7rem; }
.prose h3:first-child { margin-top: 0; }
.prose blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid var(--or); font-style: italic; }
.adresse { font-style: normal; font-size: var(--t-lg); line-height: 1.68; color: var(--texte-2); }
.courriel { font-size: clamp(1.2rem, 3vw, 1.6rem); margin: 0 0 1.6rem; }
.courriel a { color: var(--or); text-decoration: none; border-bottom: 1px solid currentColor; }
.courriel a:hover { color: var(--or-clair); }

/* ═══ Pied ═══ */
.pied {
  margin-block-start: clamp(3.5rem, 9vw, 6rem);
  border-top: 1px solid var(--trait);
  padding-block: 2.2rem 4rem;
  font-size: var(--t-md); color: var(--texte-2);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem 2rem; align-items: baseline;
}
.pied-liens { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.pied-liens a { font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); text-decoration: none; }
.pied-liens a:hover { color: var(--or); }
.pied-adresse { margin: 0; font-family: var(--etroit); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }

/* ═══ Petits écrans ═══ */
@media (max-width: 640px) {
  .axe { grid-template-columns: 1fr; gap: .45rem; padding-block: .8rem; }
  .releve { grid-template-columns: 7rem 1fr; }
}

/* ═══ Fondu au noir entre les pages ═══ */
@view-transition { navigation: auto; }
@keyframes sortie { to { opacity: 0; } }
@keyframes entree { from { opacity: 0; } }
::view-transition-old(root) { animation: sortie .22s ease forwards; }
::view-transition-new(root) { animation: entree .3s .08s ease backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}