/* =========================================================================
   PLAIN DOCKET — design system, prefix mrg-
   Vocabulary: the gutterline (page edge), the callout (masthead), the carrel
   (navigation), the frontpiece (double page cover), the fil (breadcrumb), the
   folio (numbered section, ruled when it carries the flow), the slip (kicker
   in small capitals), the sous-main (asymmetric block grid), the card (held by
   the gutterline rule), the frame (photo cropping at fixed ratios), the cartel
   (card caption), the shelfmark and the trace (dated flow), the jour (date),
   the opener and its imprint, the letterhead (opening image), the column
   (reading measure, 34 rem) and the spine (cross references, on the right),
   the table, the inkwell (ink block), the note, the checkpoint, the ensuite
   (read next), the leading (pure CSS separator), the index and its entries,
   the tabs (date grid), the foot.
   Palette: cool grey filing paper, graphite ink, a single oxblood accent for
   rules and a slate blue for links. The ruling blue (--ruling) and the
   oxblood gutterline (--gutterline-rouge) never carry text: they are rules,
   not ink colours. Two font stacks, not three: a slab-adjacent serif for
   headings, a humanist sans for reading. No radii, no drop shadow, no
   decorative gradient; the ruling is the only ornament. Automatic dark mode.
   No external request.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · le cahier et l’encre ---------------------------------- */
  --leaf:          #f2f3f1;  /* papier de toutes les pages                 */
  --shelfmark:           #e0e3df;  /* réserves, flux, pied                       */
  --card:            #fbfcfa;  /* papier très clair des encadrés             */
  --nib:            #22262a;  /* encre du texte                             */
  --nib-douce:      #5b6570;  /* imprint, légendes, sous-titres            */
  --indigo:         #2f5670;  /* encre indigo des cahiers : liens, repères */
  --indigo-appuyee: #1f3d52;  /* appui, survol                              */
  --indigo-claire:  #9dc2d8;  /* indigo sur fonds sombres                 */
  --ruling:            #c3ccc8;  /* réglure : filet, jamais texte              */
  --gutterline-rouge:      #8a3324;  /* filet de gutterline : filet, jamais texte       */
  --rule:            #d3d8d4;  /* filets fins sur papier                     */

  /* Mode sombre : la table d’écriture du soir. */
  --dusk-leaf: #16191b;
  --dusk-shelfmark:  #1e2225;
  --dusk-card:   #242a2e;
  --dusk-nib:   #e3e7e6;
  --dusk-douce:   #a79fb8;
  --dusk-rule:   #3a3348;
  --dusk-ruling:   #3b4a68;
  --dusk-gutterline:   #c4564a;

  /* ---- 2. TIPO · deux piles seulement ------------------------------------- */
  --face-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --face-texte: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;

  --head-graisse: 700;
  --head-interlettrage: 0.005em;
  --caps-tracking: 0.16em;

  --body-taille: clamp(1.05rem, 1rem + 0.28vw, 1.18rem);
  --body-leading: 1.62;
  --scale-h1: clamp(1.85rem, 1.25rem + 2.2vw, 2.9rem);
  --scale-h2: clamp(1.3rem, 1.12rem + 0.8vw, 1.72rem);
  --scale-h3: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  --scale-h4: 1.02rem;

  /* ---- 3. RYTHME --------------------------------------------------------- */
  --measure:        34rem;      /* colonne de lecture                         */
  --measure-chapo:  30rem;      /* chapô de l’opener                         */
  --spine:          17rem;      /* renvois, à droite                          */
  --measure-large:  1360px;
  --gutterline-page: clamp(1.1rem, 4vw, 4rem);
  --channel:   clamp(0.85rem, 2.2vw, 2rem);
  --breath:     clamp(2.2rem, 5.5vw, 5rem);
  --offset:       clamp(1.1rem, 3vw, 3rem);

  /* ---- 4. PARTICULARITÉS ------------------------------------------------- */
  --pace: 140ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --leaf:     var(--dusk-leaf);
    --shelfmark:      var(--dusk-shelfmark);
    --card:       var(--dusk-card);
    --nib:       var(--dusk-nib);
    --nib-douce: var(--dusk-douce);
    --indigo:    var(--indigo-claire);
    --indigo-appuyee: #d3c8fa;
    --rule:       var(--dusk-rule);
    --ruling:       var(--dusk-ruling);
    --gutterline-rouge: var(--dusk-gutterline);
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--leaf);
  color: var(--nib);
  font-family: var(--face-texte);
  font-size: var(--body-taille);
  line-height: var(--body-leading);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--face-head);
  font-weight: var(--head-graisse);
  letter-spacing: var(--head-interlettrage);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }
h4 { font-size: var(--scale-h4); }

p, ul, ol, dl, figure { margin: 0 0 1.05em; }
a {
  color: var(--indigo);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--pace);
}
a:hover { color: var(--indigo-appuyee); }
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--breath) 0; }

::selection { background: var(--indigo); color: var(--card); }

/* Chiffres, dates et mesures en tabulaire : un cahier s’aligne. */
.mrg-tableau, .mrg-inkwell, .mrg-note, .mrg-checkpoint, .mrg-jour, .mrg-imprint,
.mrg-tabs, .mrg-folio__ordinal, .mrg-frontpiece__kicker, .mrg-entree__vue,
.mrg-fiche__indication {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ÉCHAFAUDAGE : saut, gutterline
   ========================================================================= */

.mrg-saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--nib); color: var(--leaf);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.mrg-saut:focus { left: 0.6rem; top: 0.6rem; }

.mrg-gutterline {
  width: 100%;
  max-width: var(--measure-large);
  margin-inline: auto;
  padding-inline: var(--gutterline-page);
}

/* =========================================================================
   LE CALLOUT · en-tête de cahier : wordmark, filière, carrel
   ========================================================================= */

.mrg-callout {
  background: var(--card);
  border-bottom: 2px solid var(--nib);
}
.mrg-callout__rang {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: clamp(0.75rem, 1.8vw, 1.2rem);
}
.mrg-callout__nom {
  font-family: var(--face-head);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  font-weight: var(--head-graisse);
  color: var(--nib);
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.01em;
}
.mrg-callout__nom:hover { color: var(--indigo-appuyee); }
/* Le nom du magazine en capitales interlettrées : les pleins restent en
   graisse 700, les déliés passent en 400. Le mot montre ce qu'il désigne. */
.mrg-callout__nom { text-transform: uppercase; letter-spacing: 0.045em; }
.mrg-callout__nom b { font-weight: 400; }
.mrg-callout__nom span {
  display: block;
  font-family: var(--face-texte);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--nib-douce);
  margin-top: 0.4rem;
}
.mrg-carrel ul {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  list-style: none; margin: 0; padding: 0;
}
.mrg-carrel a {
  color: var(--nib-douce);
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding-block: 0.28rem;
  border-bottom: 2px solid transparent;
  transition: color var(--pace), border-color var(--pace);
}
.mrg-carrel a:hover { color: var(--indigo-appuyee); border-bottom-color: var(--gutterline-rouge); }

/* =========================================================================
   LE FIL · chemin de lecture
   ========================================================================= */

.mrg-fil { padding-block: clamp(0.8rem, 1.8vw, 1.25rem); }
.mrg-fil ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.82rem;
  color: var(--nib-douce);
}
.mrg-fil li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--gutterline-rouge);
}
.mrg-fil a { color: var(--nib-douce); }
.mrg-fil a:hover { color: var(--indigo-appuyee); }
.mrg-fil [aria-current="page"] { color: var(--nib); font-weight: 600; }

/* =========================================================================
   L’FRONTPIECE · couverture double page : une moitié photo à fond perdu, une
   moitié papier réglé Seyès avec sa gutterline rouge. Aucun voile, aucune ombre :
   les deux pages se lisent côte à côte comme un cahier ouvert. Bande courte,
   pour que la grille des folios commence sous les 700 px de hauteur.
   ========================================================================= */

.mrg-frontpiece {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(13rem, 30vh, 21rem);
  border-bottom: 1px solid var(--rule);
}
/* La page photo : l'image se positionne dans sa moitié, pour que la hauteur
   de la double page vienne du papier et jamais des dimensions intrinsèques
   du fichier. */
.mrg-frontpiece__page {
  position: relative;
  min-height: inherit;
}
.mrg-frontpiece__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La page de droite : papier, réglure Seyès tracée en dégradé répété,
   gutterline rouge verticale à 3 rem du bord. */
.mrg-frontpiece__papier {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.6rem, 4vw, 3.5rem) clamp(1.4rem, 2.6vw, 2rem) calc(3rem + clamp(1.6rem, 4vw, 3.5rem));
  background:
    linear-gradient(to right, transparent 0 2.4rem, var(--gutterline-rouge) 2.4rem calc(2.4rem + 2px), transparent calc(2.4rem + 2px)),
    repeating-linear-gradient(to bottom,
      transparent 0 0.55em,
      var(--ruling) 0.55em calc(0.55em + 1px),
      transparent calc(0.55em + 1px) 2.2em,
      var(--ruling) 2.2em calc(2.2em + 1px),
      transparent calc(2.2em + 1px) 2.75em);
  background-color: var(--leaf);
}
.mrg-frontpiece__kicker {
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--gutterline-rouge);
  margin: 0 0 1rem;
}
.mrg-frontpiece__papier h1 {
  max-width: 20ch;
  font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.5rem);
}
.mrg-frontpiece__papier > p:not([class]) {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.18rem);
  line-height: 1.55;
  max-width: var(--measure-chapo);
  color: var(--nib);
  margin: 1rem 0 0;
}
/* Ligne d’édition : capitales posées sur la réglure, séparées par un point. */
.mrg-frontpiece__edition {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1rem;
  margin-top: 1.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.74rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--nib-douce);
}
.mrg-frontpiece__edition em { font-style: normal; color: var(--gutterline-rouge); }

/* =========================================================================
   LES FOLIOS · rubriques numérotées, le flux sur leaf quadrillée
   ========================================================================= */

.mrg-folio { padding-block: clamp(1.8rem, 4.4vw, 3.4rem); }
/* Folio quadrillé : réglure fine et discrète, shelfmark en fond. */
.mrg-folio--quadrille {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 1.35em,
      var(--ruling) 1.35em calc(1.35em + 1px));
  background-color: var(--shelfmark);
}
.mrg-folio__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: 1px solid var(--nib);
  padding-bottom: 0.55rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.mrg-folio__ordinal {
  font-family: var(--face-head);
  font-weight: var(--head-graisse);
  font-size: 0.92rem;
  letter-spacing: 0.3em;
  color: var(--gutterline-rouge);
  margin-right: 0.7rem;
}
.mrg-folio__titre { font-size: var(--scale-h2); }
.mrg-folio__note {
  margin: 0;
  color: var(--nib-douce);
  font-size: 0.92rem;
  max-width: 44ch;
}

/* L’leading : séparateur CSS pur entre les grands folios. Deux filets
   de réglure et un trait de gutterline rouge, comme entre deux lignes d’un
   cahier. Aucun SVG, aucun angle arrondi. */
.mrg-leading {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem;
  padding-block: clamp(0.5rem, 1.4vw, 1rem);
  color: var(--ruling);
}
.mrg-leading::before, .mrg-leading::after {
  content: "";
  flex: 0 1 12rem;
  max-width: 12rem;
  border-top: 1px solid currentColor;
}
.mrg-leading span {
  flex: 0 0 1.6rem;
  border-top: 2px solid var(--gutterline-rouge);
}

/* L’étiquette : surtitre en capitales, encre indigo. */
.mrg-slip {
  font-size: 0.72rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   LE SOUS-MAIN · grille asymétrique de fiches, tenues par le filet de gutterline
   ========================================================================= */

.mrg-sous-main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--channel);
  list-style: none; margin: 0; padding: 0;
}
.mrg-fiche { margin: 0; }
.mrg-fiche--plein   { grid-column: span 6; }
.mrg-fiche--grand   { grid-column: span 4; }
.mrg-fiche--moitie  { grid-column: span 3; }
.mrg-fiche--petit   { grid-column: span 2; }
.mrg-fiche--offset   { transform: translateY(var(--offset)); }
.mrg-fiche--decal2  { transform: translateY(calc(var(--offset) * 0.5)); }
.mrg-sous-main--dense { padding-bottom: var(--offset); }

.mrg-fiche__cadre {
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--shelfmark);
}
.mrg-fiche__cadre--pano     { aspect-ratio: 21 / 9; }
.mrg-fiche__cadre--paysage  { aspect-ratio: 4 / 3; }
.mrg-fiche__cadre--carre    { aspect-ratio: 1 / 1; }
.mrg-fiche__cadre--portrait { aspect-ratio: 3 / 4; }
.mrg-fiche__vue {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.mrg-fiche:hover .mrg-fiche__vue,
.mrg-fiche:focus-within .mrg-fiche__vue { transform: scale(1.015); }

/* Le cartel : la gutterline rouge du cahier tient la fiche, à gauche. */
.mrg-fiche__cartel {
  padding: 0.7rem 0 0 calc(0.75rem + 2px);
  border-left: 2px solid var(--gutterline-rouge);
  margin-left: 0.75rem;
}
.mrg-fiche__titre { margin: 0 0 0.3rem; }
.mrg-fiche__lien {
  color: var(--nib);
  text-decoration: none;
  border-bottom: 2px solid var(--ruling);
  transition: border-color var(--pace), color var(--pace);
}
.mrg-fiche__lien:hover { color: var(--indigo-appuyee); border-bottom-color: var(--gutterline-rouge); }
.mrg-fiche__note {
  margin: 0;
  color: var(--nib-douce);
  font-size: 0.92rem;
  line-height: 1.5;
}
.mrg-fiche__indication {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--indigo);
  border: 1px solid currentColor;
  padding: 0.14rem 0.5rem;
}

/* =========================================================================
   LE SHELFMARK · le flux daté de la home
   ========================================================================= */

.mrg-shelfmark {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--channel) * 1.5);
}
.mrg-trace {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 1.15rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.mrg-shelfmark .mrg-trace:nth-last-child(-n+2) { border-bottom: 0; }
.mrg-trace__vue {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.mrg-jour {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--indigo);
}
.mrg-trace h3 { margin: 0 0 0.3rem; }
.mrg-trace h3 a { color: var(--nib); text-decoration: none; }
.mrg-trace h3 a:hover { color: var(--indigo-appuyee); text-decoration: underline; }
.mrg-trace p:not([class]) { margin: 0; color: var(--nib-douce); font-size: 0.93rem; }

/* =========================================================================
   L’OPENER · ouverture d’un texte : étiquette, titre, chapô, imprint
   ========================================================================= */

.mrg-opener {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2rem);
  max-width: 60rem;
}
.mrg-opener__sous-titre {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.26rem);
  line-height: 1.55;
  color: var(--nib-douce);
  max-width: var(--measure-chapo);
  margin: 0.9rem 0 0;
}
.mrg-imprint {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1rem 0 0; padding: 0;
  font-size: 0.8rem;
  color: var(--nib-douce);
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
}
.mrg-imprint a { color: var(--nib-douce); }
.mrg-imprint a:hover { color: var(--indigo-appuyee); }

.mrg-letterhead { margin: 0; }
.mrg-letterhead__vue {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* =========================================================================
   LA COLONNE ET LE RAIL · lecture à 34 rem, renvois à droite au delà de
   1080 px. Sur l’écran étroit le rail repasse sous la colonne.
   ========================================================================= */

.mrg-tableau-lecture {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--spine);
  gap: calc(var(--channel) * 2);
  align-items: start;
  justify-content: center;
}
.mrg-colonne {
  max-width: var(--measure);
  padding-block: clamp(1.5rem, 3.4vw, 2.4rem) clamp(1.9rem, 4.4vw, 3.1rem);
}
.mrg-colonne > * + * { margin-top: 0.85em; }
.mrg-colonne h2 {
  margin-top: 1.7em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--ruling);
}
.mrg-colonne h3 { margin-top: 1.3em; }
.mrg-colonne ul, .mrg-colonne ol { padding-left: 1.4rem; }
.mrg-colonne li + li { margin-top: 0.45em; }
.mrg-colonne strong { color: var(--indigo-appuyee); }

/* La note : rappel de méthode sur papier très clair, réglure discrète. */
.mrg-note {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--indigo);
  padding: 1rem 1.2rem;
  font-size: 0.95em;
}
.mrg-note p { margin: 0; }

/* La vérification : liste de contrôle aux carrés de réglure. */
.mrg-checkpoint, .mrg-colonne ul.mrg-checkpoint {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1rem 1.25rem 1rem 2rem;
  font-size: 0.97em;
}
.mrg-checkpoint li::marker { color: var(--gutterline-rouge); }

/* L’inkwell : le bloc encre, sombre sur papier, capitales indigo claire. */
.mrg-inkwell {
  margin: 1.6em 0;
  background: var(--nib);
  color: var(--dusk-nib);
  padding: 1.15rem 1.3rem 1.2rem;
  border: 1px solid var(--nib);
}
.mrg-inkwell h2, .mrg-inkwell h3, .mrg-inkwell h4 {
  font-family: var(--face-texte);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--indigo-claire);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.mrg-inkwell p, .mrg-inkwell ul { margin: 0; font-size: 0.95rem; color: var(--dusk-nib); }
.mrg-inkwell strong { color: #fff; }

/* Le tableau : capitales en tête, zébrures de papier très clair. */
.mrg-tableau {
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--rule);
}
.mrg-tableau table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.92em;
}
.mrg-tableau th, .mrg-tableau td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.mrg-tableau caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.74rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--indigo);
  border-bottom: 1px solid var(--rule);
}
.mrg-tableau thead th {
  background: var(--nib);
  color: var(--dusk-nib);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}
.mrg-tableau tbody tr:last-child td { border-bottom: 0; }
.mrg-tableau tbody tr:nth-child(even) { background: var(--card); }

/* À lire ensuite, et le rail qui le porte. */
.mrg-rail { padding-top: clamp(1.5rem, 3.4vw, 2.4rem); }
.mrg-ensuite {
  border-top: 2px solid var(--nib);
  padding-top: 1rem;
}
.mrg-ensuite h2 {
  font-size: 1.12rem;
  margin: 0 0 0.6rem;
}
.mrg-ensuite ul { list-style: none; margin: 0; padding: 0; }
.mrg-ensuite li { padding: 0.35rem 0; font-size: 0.94rem; }
.mrg-ensuite li::before {
  content: "·";
  color: var(--gutterline-rouge);
  margin-right: 0.55rem;
  font-weight: 700;
}
.mrg-rail .mrg-note { margin-top: 1.4rem; font-size: 0.9em; }

/* =========================================================================
   LE RÉPERTOIRE · la ressource signature : familles et entrées
   ========================================================================= */

.mrg-repertoire { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.mrg-repertoire__famille { margin: 0; }
.mrg-repertoire__famille > h3 {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--nib);
  margin-bottom: 0.4rem;
}
.mrg-repertoire__famille > p {
  color: var(--nib-douce);
  font-size: 0.9rem;
  max-width: 52ch;
}
.mrg-entrees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--channel);
  list-style: none; margin: 0.6rem 0 0; padding: 0;
}
.mrg-entree {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gutterline-rouge);
  padding: 0.85rem 1rem 0.9rem calc(0.9rem + 2px);
  margin: 0;
}
.mrg-entree h4 {
  font-family: var(--face-head);
  font-size: 1.08rem;
  margin: 0 0 0.35rem;
}
.mrg-entree h4 a { color: var(--nib); text-decoration: none; }
.mrg-entree h4 a:hover { color: var(--indigo-appuyee); text-decoration: underline; }
.mrg-entree dt {
  font-size: 0.68rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--indigo);
  margin-top: 0.55rem;
}
.mrg-entree dd { margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.5; }
.mrg-entree__vue {
  margin-top: 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--nib-douce);
}

/* Les repères : la grille de dates du carnet. */
.mrg-tabs { display: grid; gap: 0.5rem; }

/* =========================================================================
   LE PIED · dernière page du cahier, papier shelfmark régluré
   ========================================================================= */

.mrg-pied {
  margin-top: var(--breath);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 1.35em,
      var(--ruling) 1.35em calc(1.35em + 1px));
  background-color: var(--shelfmark);
  border-top: 2px solid var(--nib);
  color: var(--nib);
}
.mrg-pied__rang {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--channel) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.mrg-pied h2 {
  font-family: var(--face-texte);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--gutterline-rouge);
  margin-bottom: 0.7rem;
}
.mrg-pied ul { list-style: none; margin: 0; padding: 0; }
.mrg-pied li { padding-block: 0.22rem; }
.mrg-pied a { color: var(--nib-douce); text-decoration: none; transition: color var(--pace); }
.mrg-pied a:hover { color: var(--indigo-appuyee); text-decoration: underline; }
.mrg-pied__bas {
  border-top: 1px solid var(--rule);
  padding-block: 1.05rem;
  font-size: 0.78rem;
  color: var(--nib-douce);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .mrg-fiche--grand { grid-column: span 6; }
  .mrg-fiche--moitie { grid-column: span 3; }
  .mrg-fiche--petit { grid-column: span 3; }
  .mrg-fiche--offset, .mrg-fiche--decal2 { transform: none; }
  .mrg-sous-main--dense { padding-bottom: 0; }
  .mrg-tableau-lecture { grid-template-columns: minmax(0, 1fr); }
  .mrg-rail { max-width: var(--measure); }
}

@media (max-width: 900px) {
  /* L’frontpiece se referme : la photo passe au dessus du papier. */
  .mrg-frontpiece { grid-template-columns: 1fr; }
  .mrg-frontpiece__page { min-height: 14rem; }
  .mrg-frontpiece__papier {
    background:
      linear-gradient(to right, transparent 0 2.4rem, var(--gutterline-rouge) 2.4rem calc(2.4rem + 2px), transparent calc(2.4rem + 2px)),
      repeating-linear-gradient(to bottom,
        transparent 0 0.55em,
        var(--ruling) 0.55em calc(0.55em + 1px),
        transparent calc(0.55em + 1px) 2.2em,
        var(--ruling) 2.2em calc(2.2em + 1px),
        transparent calc(2.2em + 1px) 2.75em);
    background-color: var(--leaf);
  }
}

@media (max-width: 760px) {
  .mrg-sous-main { grid-template-columns: repeat(2, 1fr); }
  .mrg-fiche--grand, .mrg-fiche--moitie, .mrg-fiche--petit { grid-column: span 2; }
  .mrg-shelfmark { grid-template-columns: 1fr; }
  .mrg-trace { grid-template-columns: 118px 1fr; }
  .mrg-pied__rang { grid-template-columns: 1fr; }
  .mrg-folio__tete { flex-direction: column; gap: 0.3rem; }
}

@media (max-width: 480px) {
  .mrg-trace { grid-template-columns: 1fr; }
  .mrg-carrel ul { gap: 0.35rem 0.95rem; }
}

/* Courtoisie du mouvement. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .mrg-fiche:hover .mrg-fiche__vue { transform: none; }
}

/* Impression : le cahier sur papier blanc, sans réglures. */
@media print {
  .mrg-callout, .mrg-pied, .mrg-saut, .mrg-fil, .mrg-leading { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .mrg-frontpiece__papier, .mrg-folio--quadrille, .mrg-pied { background: none; }
  .mrg-colonne, .mrg-tableau-lecture { max-width: none; grid-template-columns: 1fr; }
  .mrg-inkwell { background: #fff; color: #000; border: 1pt solid #000; }
}


/* ==========================================================================
   COMPACT MENU (<= 760 px) and the PERMANENT NOTICE
   Added on September 6, 2026 by the parent. The donor left the section links
   in a list that wrapped: at 390 px that was three rows of small capitals.
   Here the wide list disappears below 761 px and a closed <details> takes its
   place, with no JavaScript at all.
   ========================================================================== */
.mrg-fold { display: none; }
.mrg-fold > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nib); border: 1px solid var(--rule); padding: 0.42rem 0.9rem;
  background: var(--card);
}
.mrg-fold > summary::-webkit-details-marker { display: none; }
.mrg-fold > summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.mrg-fold[open] > summary::after { content: "\2212"; }
.mrg-fold > summary:focus-visible { outline: 2px solid var(--gutterline-rouge); outline-offset: 2px; }
.mrg-carrel--folded { margin-top: 0.6rem; }
.mrg-carrel--folded ul { flex-direction: column; gap: 0.15rem; }
.mrg-carrel--folded a { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }

@media (max-width: 760px) {
  .mrg-carrel--large { display: none; }
  .mrg-fold { display: block; width: 100%; }
}

.mrg-carrel a[aria-current="page"] { color: var(--gutterline-rouge); border-bottom: 2px solid var(--gutterline-rouge); }

.mrg-notice {
  font-size: 0.82rem; line-height: 1.55; color: var(--nib-douce);
  border-top: 1px solid var(--rule); padding-top: 0.9rem; margin: 1.4rem auto 0.2rem;
}
.mrg-notice a { color: var(--indigo); }
/* The illustrative notice must be visible, not only in the alt attribute. */
.mrg-letterhead figcaption { margin-top: 0.7rem; font-size: 0.76rem; line-height: 1.5; color: var(--nib-douce); }
.mrg-frontpiece__legende { margin-top: 1rem; font-size: 0.74rem; line-height: 1.5; color: var(--nib-douce); }
/* Citation sourcée dans un corps d'article : le gabarit n'en prévoyait pas de style,
   le navigateur la rendait avec sa marge par défaut (06/09/2026). */
.mrg-colonne blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.15rem;
  border-left: 2px solid var(--indigo, #3b4a63);
  font-style: italic;
  color: var(--nib-douce);
}