/* =========================================================================
   THE BILLING DESK (hfacollections.com). Feuille unique, prefixe ldg- (ledger).
   Squelette d'origine : _squelettes/colonne-longue (une colonne de lecture avec
   une gouttiere de marginalia), rhabille en registre comptable : papier chaud,
   filets de grand livre, marine pour l'encre forte, laiton pour les numeros.
   Vocabulaire : desk (conteneur large), masthead (en-tete), mark (marque),
   nav + menu (bascule sans JS), opening (ouverture d'accueil), totals
   (compteurs), tiles/tile (les trois sections), onfile (pages de reference),
   register/band/rows/row (le registre), keep (sous le presse-papier),
   sheet (la feuille de lecture et sa marge), head/kicker/title/standfirst/
   byline, plate (photo de tete), corps (le texte), contents (sommaire de
   fin), onward (a lire ensuite), crumbs (fil d'Ariane), colophon (pied de
   page), skip (lien d'evitement), notfound (page 404).
   Polices systeme uniquement. Aucune requete externe. Une seule identite
   claire ; la bande sombre du pied de page a ses tokens fixes.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Couleurs -------------------------------------------------------- */
  --ldg-paper: #f5f0e6;         /* le fond : papier chaud                   */
  --ldg-paper-deep: #ebe4d6;    /* blocs en retrait, vignettes en attente   */
  --ldg-rule: #d3c9b5;          /* filet de grand livre                     */
  --ldg-rule-strong: #b8ab92;   /* filet appuye                             */
  --ldg-ink: #1e2430;           /* texte courant : encre bleu-noir  13,7:1  */
  --ldg-ink-soft: #545b68;      /* meta, legendes, notes             6,0:1  */
  --ldg-navy: #1e3a5f;          /* titres forts, liens, boutons     10,1:1  */
  --ldg-navy-deep: #142a47;     /* survol                                   */
  --ldg-brass: #7d5d18;         /* laiton pour le TEXTE               5,4:1  */
  --ldg-brass-bright: #c39a3d;  /* laiton pour les filets, jamais un texte  */

  /* --- Bande sombre (pied de page) : tokens FIXES, jamais derives ------- */
  --ldg-band-bg: #142a47;
  --ldg-band-text: #e9e2d4;     /* 11,2:1 sur la bande                      */
  --ldg-band-muted: #b9c3d3;    /*  8,1:1                                   */
  --ldg-band-link: #e2c37a;     /*  8,5:1                                   */
  --ldg-band-rule: #2b4568;

  /* --- Caracteres (piles systeme) --------------------------------------- */
  --ldg-font-title: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ldg-font-text: Charter, "Iowan Old Style", "Bitstream Charter", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --ldg-font-figures: "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  /* --- Mesure et rythme ------------------------------------------------- */
  --ldg-desk: 76rem;                                  /* largeur du bureau          */
  --ldg-measure: 40rem;                               /* colonne de lecture         */
  --ldg-gutter: 9rem;                                 /* marge des marginalia       */
  --ldg-pad: clamp(1.1rem, 3vw, 2.4rem);
  --ldg-body: clamp(1.04rem, 0.99rem + 0.24vw, 1.15rem);
  --ldg-lh: 1.68;
  --ldg-breath: clamp(2.4rem, 5vw, 4.4rem);
  --ldg-radius: 3px;
  --ldg-ease: 140ms ease;
}

/* =========================================================================
   1. Remise a plat
   ========================================================================= */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--ldg-paper);
  color: var(--ldg-ink);
  font-family: var(--ldg-font-text);
  font-size: var(--ldg-body);
  line-height: var(--ldg-lh);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video, picture { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--ldg-font-title);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--ldg-ink);
  text-wrap: balance;
}

p, ul, ol, figure, table, blockquote, dl { margin: 0; }

a { color: var(--ldg-navy); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ldg-navy-deep); }

:focus-visible { outline: 3px solid var(--ldg-navy); outline-offset: 3px; }

hr { border: 0; }

::selection { background: var(--ldg-navy); color: var(--ldg-paper); }

/* Chiffres en chasse tabulaire partout ou l'on compte. */
.ldg-totals, .ldg-row__no, .ldg-tile__no, .ldg-band__no, .ldg-contents, .ldg-byline, .ldg-kicker {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   2. Acces clavier et conteneurs
   ========================================================================= */

.ldg-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ldg-navy); color: var(--ldg-paper);
  padding: 0.7rem 1.1rem;
  font-family: var(--ldg-font-title);
  z-index: 40;
}
.ldg-skip:focus { left: 0.6rem; top: 0.6rem; color: var(--ldg-paper); }

.ldg-desk {
  width: min(100% - 2 * var(--ldg-pad), var(--ldg-desk));
  margin-inline: auto;
}

main#content {
  width: min(100% - 2 * var(--ldg-pad), var(--ldg-desk));
  margin-inline: auto;
}

/* =========================================================================
   3. Masthead : marque a gauche, sections a droite, menu sans JS en mobile
   ========================================================================= */

.ldg-masthead {
  border-bottom: 1px solid var(--ldg-rule-strong);
  background: var(--ldg-paper);
  position: relative;
}
.ldg-masthead::after {                 /* le double filet du registre */
  content: "";
  display: block;
  height: 3px;
  background: var(--ldg-navy);
}
.ldg-masthead__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding: 0.95rem 0 0.85rem;
}

.ldg-mark {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--ldg-ink);
  min-width: 0;
}
.ldg-mark svg { width: 2.6rem; height: 2.6rem; flex: none; }
.ldg-mark__name {
  display: block;
  font-family: var(--ldg-font-title);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ldg-navy);
}
.ldg-mark__line {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--ldg-font-figures);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldg-ink-soft);
}
.ldg-mark:hover .ldg-mark__name { color: var(--ldg-navy-deep); }

.ldg-menu__box { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ldg-menu__handle {
  display: none;
  font-family: var(--ldg-font-title);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldg-navy);
  border: 1px solid var(--ldg-rule-strong);
  border-radius: var(--ldg-radius);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  min-height: 44px;
  align-items: center;
}
.ldg-menu__box:focus-visible + .ldg-menu__handle { outline: 3px solid var(--ldg-navy); outline-offset: 3px; }

.ldg-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
}
.ldg-nav a {
  display: inline-block;
  font-family: var(--ldg-font-title);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ldg-ink);
  text-decoration: none;
  padding: 0.35rem 0 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color var(--ldg-ease), border-color var(--ldg-ease);
}
.ldg-nav a:hover { color: var(--ldg-navy); border-bottom-color: var(--ldg-brass-bright); }
.ldg-nav a[aria-current="page"] { color: var(--ldg-navy); border-bottom-color: var(--ldg-navy); }

/* =========================================================================
   4. Ouverture de l'accueil : texte en regard de la photo, avant tout h2
   ========================================================================= */

.ldg-opening {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3.6rem);
  align-items: center;
  padding: clamp(1.4rem, 3.4vw, 2.8rem) 0 clamp(1.4rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--ldg-rule);
}
.ldg-opening__text h1 {
  font-size: clamp(2.15rem, 1.35rem + 2.9vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ldg-ink);
  max-width: 15ch;
  margin: 0.55rem 0 0.95rem;
}
.ldg-opening__lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.24rem);
  line-height: 1.55;
  color: var(--ldg-ink-soft);
  max-width: 46ch;
  margin-bottom: 1.35rem;
}
.ldg-opening__photo { margin: 0; min-width: 0; position: relative; }
.ldg-opening__photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ldg-radius) 2.6rem var(--ldg-radius) var(--ldg-radius);
  border: 1px solid var(--ldg-rule-strong);
}
.ldg-opening__photo figcaption,
.ldg-plate figcaption {
  margin-top: 0.55rem;
  font-family: var(--ldg-font-figures);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ldg-ink-soft);
  padding-left: 0.7rem;
  border-left: 2px solid var(--ldg-brass-bright);
}

.ldg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--ldg-font-figures);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ldg-brass);
  margin: 0;
}
.ldg-kicker::before {
  content: "";
  width: 1.4rem; height: 0;
  border-top: 2px solid var(--ldg-brass-bright);
  flex: none;
}
.ldg-kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ldg-rule-strong); }
.ldg-kicker a:hover { border-bottom-color: currentColor; }
.ldg-kicker > * + *::before { content: "·"; margin-right: 0.55rem; color: var(--ldg-brass-bright); }

.ldg-button {
  display: inline-block;
  background: var(--ldg-navy);
  color: var(--ldg-paper);
  font-family: var(--ldg-font-title);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.8rem 1.35rem;
  border-radius: var(--ldg-radius);
  min-height: 44px;
  transition: background var(--ldg-ease);
}
.ldg-button:hover { background: var(--ldg-navy-deep); color: var(--ldg-paper); }

/* Les compteurs du registre : trois totaux sur un filet laiton. */
.ldg-totals {
  list-style: none;
  margin: 1.6rem 0 0; padding: 0.85rem 0 0;
  border-top: 2px solid var(--ldg-brass-bright);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  max-width: 34rem;
}
.ldg-totals li { display: flex; align-items: baseline; gap: 0.5rem; }
.ldg-totals b {
  font-family: var(--ldg-font-figures);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ldg-navy);
  letter-spacing: -0.02em;
}
.ldg-totals span {
  font-family: var(--ldg-font-title);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldg-ink-soft);
}

/* =========================================================================
   5. En-tetes de section de l'accueil et tuiles des trois sections
   ========================================================================= */

.ldg-section { padding: var(--ldg-breath) 0 0; }
.ldg-section--last { padding-bottom: var(--ldg-breath); }

.ldg-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.4rem 2rem;
  padding-bottom: 0.7rem;
  margin-bottom: clamp(1rem, 2.4vw, 1.7rem);
  border-bottom: 1px solid var(--ldg-rule-strong);
  position: relative;
}
.ldg-section__head::after {            /* double filet : fin, puis marine */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  border-bottom: 3px solid var(--ldg-navy);
}
.ldg-section__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem); letter-spacing: -0.02em; }
.ldg-section__note {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  font-size: 0.92rem;
  color: var(--ldg-ink-soft);
  max-width: 42ch;
  margin: 0;
}

.ldg-tiles {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}
.ldg-tile { min-width: 0; position: relative; }
.ldg-tile__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ldg-radius);
  border: 1px solid var(--ldg-rule-strong);
  transition: opacity var(--ldg-ease);
}
.ldg-tile:hover .ldg-tile__photo { opacity: 0.9; }
.ldg-tile__no {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--ldg-font-figures);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ldg-brass);
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--ldg-brass-bright);
}
.ldg-tile h3 { font-size: 1.32rem; margin: 0.45rem 0 0.35rem; }
.ldg-tile h3 a { color: var(--ldg-ink); text-decoration: none; }
.ldg-tile h3 a:hover { color: var(--ldg-navy); text-decoration: underline; }
.ldg-tile p { font-size: 0.95rem; color: var(--ldg-ink-soft); line-height: 1.52; }

/* =========================================================================
   6. Les pages de reference (adresses restaurees), mises en avant
   ========================================================================= */

.ldg-onfile {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}
.ldg-onfile__card {
  min-width: 0;
  background: var(--ldg-paper-deep);
  border: 1px solid var(--ldg-rule);
  border-top: 3px solid var(--ldg-brass-bright);
  border-radius: var(--ldg-radius);
  padding: 0 0 1.1rem;
}
.ldg-onfile__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--ldg-rule);
}
.ldg-onfile__tag {
  font-family: var(--ldg-font-figures);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ldg-brass);
  margin: 0.95rem 1.1rem 0.4rem;
}
.ldg-onfile__card h3 { font-size: 1.22rem; margin: 0 1.1rem 0.45rem; }
.ldg-onfile__card h3 a { color: var(--ldg-ink); text-decoration: none; }
.ldg-onfile__card h3 a:hover { color: var(--ldg-navy); text-decoration: underline; }
.ldg-onfile__card p { font-size: 0.93rem; color: var(--ldg-ink-soft); line-height: 1.5; margin: 0 1.1rem; }

/* =========================================================================
   7. Le registre : une bande par section, ses pages en lignes de grand livre
   ========================================================================= */

.ldg-band { padding-top: clamp(1.6rem, 3.2vw, 2.6rem); }
.ldg-band__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ldg-navy);
  margin-bottom: 0.2rem;
}
.ldg-band__no {
  font-family: var(--ldg-font-figures);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--ldg-brass);
}
.ldg-band__head h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); letter-spacing: -0.015em; }
.ldg-band__head h3 a { color: var(--ldg-ink); text-decoration: none; }
.ldg-band__head h3 a:hover { color: var(--ldg-navy); text-decoration: underline; }
.ldg-band__head p {
  grid-column: 2;
  font-size: 0.93rem;
  color: var(--ldg-ink-soft);
  max-width: 62ch;
}

.ldg-rows { list-style: none; margin: 0; padding: 0; }
.ldg-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 30%) minmax(0, 1fr);
  gap: 0 clamp(0.9rem, 2vw, 1.6rem);
  align-items: start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--ldg-rule);
  min-width: 0;
}
.ldg-rows > .ldg-row:last-child { border-bottom: 1px solid var(--ldg-rule-strong); }
.ldg-row:hover { background: linear-gradient(90deg, transparent, var(--ldg-paper-deep) 12%, var(--ldg-paper-deep) 88%, transparent); }
.ldg-row__no {
  font-family: var(--ldg-font-figures);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ldg-brass);
  padding-top: 0.35rem;
  text-align: right;
}
.ldg-row__photo { display: block; min-width: 0; }
.ldg-row__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ldg-radius);
  border: 1px solid var(--ldg-rule-strong);
  transition: opacity var(--ldg-ease);
}
.ldg-row__photo:hover img { opacity: 0.9; }
.ldg-row__text { min-width: 0; padding-top: 0.1rem; }
.ldg-row__tag {
  font-family: var(--ldg-font-figures);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ldg-brass);
  margin-bottom: 0.35rem;
}
.ldg-row__text h4 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); margin-bottom: 0.4rem; }
.ldg-row__text h4 a { color: var(--ldg-ink); text-decoration: none; }
.ldg-row__text h4 a:hover { color: var(--ldg-navy); text-decoration: underline; }
.ldg-row__text p { font-size: 0.97rem; color: var(--ldg-ink-soft); line-height: 1.55; max-width: 62ch; }

/* =========================================================================
   8. Sous le presse-papier : la section curee, avec ses quatre vignettes
   ========================================================================= */

.ldg-keep {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
.ldg-keep__card { min-width: 0; }
.ldg-keep__card img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--ldg-radius);
  border: 1px solid var(--ldg-rule-strong);
}
.ldg-keep__card h3 { font-size: 1.22rem; margin: 0.8rem 0 0.35rem; line-height: 1.25; }
.ldg-keep__card h3 a { color: var(--ldg-ink); text-decoration: none; }
.ldg-keep__card h3 a:hover { color: var(--ldg-navy); text-decoration: underline; }
.ldg-keep__card p { font-size: 0.9rem; color: var(--ldg-ink-soft); line-height: 1.5; }
.ldg-keep__why {
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  background: var(--ldg-paper-deep);
  border-left: 3px solid var(--ldg-navy);
  font-size: 0.95rem;
  color: var(--ldg-ink-soft);
  max-width: 70ch;
}

/* =========================================================================
   9. Fil d'Ariane et la feuille de lecture (colonne + gouttiere)
   ========================================================================= */

.ldg-crumbs { padding: 0.9rem 0 0; }
.ldg-crumbs ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  font-family: var(--ldg-font-figures);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ldg-ink-soft);
}
.ldg-crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--ldg-rule-strong); }
.ldg-crumbs a { color: var(--ldg-ink-soft); text-decoration: none; }
.ldg-crumbs a:hover { color: var(--ldg-navy); text-decoration: underline; }
.ldg-crumbs [aria-current="page"] { color: var(--ldg-ink); }

.ldg-sheet {
  width: min(100%, var(--ldg-measure));
  margin-inline: auto;
  position: relative;
  padding-top: clamp(1.2rem, 3vw, 2.4rem);
}
@media (min-width: 64rem) {
  .ldg-sheet {
    width: min(100%, calc(var(--ldg-measure) + var(--ldg-gutter)));
    padding-left: var(--ldg-gutter);
    /* la colonne de texte, pas la feuille entiere, est centree dans le bureau */
    margin-left: max(0px, calc((100% - var(--ldg-measure) - var(--ldg-gutter)) / 2 - 3rem));
  }
  /* la ligne de marge du grand livre : marine, sur toute la hauteur de la feuille */
  .ldg-sheet::before {
    content: "";
    position: absolute;
    top: clamp(1.2rem, 3vw, 2.4rem);
    bottom: 0;
    left: calc(var(--ldg-gutter) - 1.4rem);
    border-left: 2px solid var(--ldg-navy);
    opacity: 0.55;
  }
}

.ldg-head { padding-bottom: 1.3rem; border-bottom: 1px solid var(--ldg-rule-strong); }
.ldg-title {
  font-size: clamp(1.95rem, 1.35rem + 2.2vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0.7rem 0 0.9rem;
}
.ldg-standfirst {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--ldg-ink-soft);
  margin-bottom: 1.1rem;
}
.ldg-byline {
  font-family: var(--ldg-font-figures);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ldg-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
}
.ldg-byline > * + *::before { content: "·"; margin-right: 0.85rem; color: var(--ldg-brass-bright); }

.ldg-plate { margin: 1.6rem 0 0; }
.ldg-plate img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ldg-radius) 2rem var(--ldg-radius) var(--ldg-radius);
  border: 1px solid var(--ldg-rule-strong);
}

/* =========================================================================
   10. Le corps : texte long, intertitres numerotes dans la gouttiere
   ========================================================================= */

.ldg-corps { counter-reset: ldg-h2; padding-top: 1.7rem; }
.ldg-corps p { margin-bottom: 1.15rem; }
.ldg-corps > p:first-of-type::first-letter {
  float: left;
  font-family: var(--ldg-font-title);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.84;
  padding: 0.08em 0.14em 0 0;
  color: var(--ldg-navy);
}
.ldg-corps ul, .ldg-corps ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.ldg-corps li { margin-bottom: 0.45rem; }
.ldg-corps li::marker { color: var(--ldg-brass); }
.ldg-corps a { color: var(--ldg-navy); text-decoration: underline; }
.ldg-corps strong { color: var(--ldg-ink); }

.ldg-corps h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.65vw, 1.7rem);
  line-height: 1.2;
  margin: 2.4rem 0 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ldg-rule-strong);
  position: relative;
  scroll-margin-top: 1rem;
}
.ldg-corps h2::before {
  counter-increment: ldg-h2;
  content: counter(ldg-h2, decimal-leading-zero);
  display: block;
  font-family: var(--ldg-font-figures);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--ldg-brass);
  margin-bottom: 0.4rem;
}
@media (min-width: 64rem) {
  .ldg-corps h2::before {
    position: absolute;
    left: calc(-1 * var(--ldg-gutter));
    top: 1.25rem;
    width: calc(var(--ldg-gutter) - 2.2rem);
    text-align: right;
    margin: 0;
  }
}
.ldg-corps h3 {
  font-family: var(--ldg-font-title);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 1.8rem 0 0.6rem;
}
.ldg-corps table { border-collapse: collapse; width: 100%; font-family: var(--ldg-font-title); font-size: 0.9rem; margin: 0 0 1.4rem; }
.ldg-corps th, .ldg-corps td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--ldg-rule); vertical-align: top; }
.ldg-corps thead th { background: var(--ldg-paper-deep); }

/* Le paragraphe de fiche d'entite en fin de corps : en retrait sur un filet laiton. */
.ldg-corps > p:last-child {
  margin-top: 1.8rem;
  padding: 1rem 1.1rem;
  background: var(--ldg-paper-deep);
  border-left: 3px solid var(--ldg-brass-bright);
  font-size: 0.97em;
}

/* =========================================================================
   11. Sommaire de fin et lectures suivantes
   ========================================================================= */

.ldg-contents {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--ldg-navy);
}
.ldg-contents h2, .ldg-onward h2, .ldg-inlist h2 {
  font-family: var(--ldg-font-figures);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ldg-ink-soft);
  margin-bottom: 0.9rem;
}
.ldg-contents ol { list-style: none; margin: 0; padding: 0; counter-reset: ldg-toc; }
.ldg-contents li { margin-bottom: 0.5rem; }
.ldg-contents a {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ldg-ink);
  font-family: var(--ldg-font-title);
  font-size: 0.95rem;
}
.ldg-contents a:hover { color: var(--ldg-navy); }
.ldg-contents a::before {
  counter-increment: ldg-toc;
  content: counter(ldg-toc, decimal-leading-zero);
  font-family: var(--ldg-font-figures);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--ldg-brass);
}
.ldg-contents__dots { border-bottom: 1px dotted var(--ldg-rule-strong); transform: translateY(-0.3em); }
.ldg-contents__min { font-family: var(--ldg-font-figures); font-size: 0.72rem; color: var(--ldg-ink-soft); }

.ldg-onward { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--ldg-rule-strong); }
.ldg-onward ul { list-style: none; margin: 0; padding: 0; }
.ldg-onward li { padding: 0.7rem 0; border-bottom: 1px dotted var(--ldg-rule-strong); }
.ldg-onward li span {
  display: block;
  font-family: var(--ldg-font-figures);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldg-brass);
  margin-bottom: 0.15rem;
}
.ldg-onward a { font-family: var(--ldg-font-title); font-size: 1.05rem; font-weight: 600; color: var(--ldg-ink); text-decoration: none; }
.ldg-onward a:hover { color: var(--ldg-navy); text-decoration: underline; }

/* Liste des guides d'une section, sur la page de section : hors de la feuille, a la largeur du bureau,
   avec les lignes du registre (vignette a 30 % de la ligne). */
.ldg-inlist { margin-top: var(--ldg-breath); padding-top: 1.2rem; border-top: 2px solid var(--ldg-navy); }
.ldg-inlist h2 { font-size: 0.78rem; }

/* =========================================================================
   12. Colophon : bande sombre a tokens fixes, trois colonnes, signature
   ========================================================================= */

.ldg-colophon {
  margin-top: var(--ldg-breath);
  background: var(--ldg-band-bg);
  color: var(--ldg-band-text);
  border-top: 4px solid var(--ldg-brass-bright);
  font-family: var(--ldg-font-title);
}
.ldg-colophon__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem 3rem;
  padding: 2.4rem 0 1.8rem;
}
.ldg-colophon h2 {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ldg-band-muted);
  margin-bottom: 0.9rem;
}
.ldg-colophon__name {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ldg-band-text);
  margin-bottom: 0.35rem;
}
.ldg-colophon p { font-size: 0.92rem; line-height: 1.55; color: var(--ldg-band-muted); margin-bottom: 0.7rem; max-width: 46ch; }
.ldg-colophon ul { list-style: none; margin: 0; padding: 0; }
.ldg-colophon li { padding: 0.28rem 0; font-size: 0.93rem; }
.ldg-colophon a { color: var(--ldg-band-text); text-decoration: none; border-bottom: 1px solid var(--ldg-band-rule); }
.ldg-colophon a:hover { color: var(--ldg-band-link); border-bottom-color: var(--ldg-band-link); }
.ldg-colophon__sign { color: var(--ldg-band-text); font-weight: 600; }
.ldg-colophon__foot {
  border-top: 1px solid var(--ldg-band-rule);
  padding: 0.95rem 0 1.4rem;
  font-family: var(--ldg-font-figures);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ldg-band-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
}

/* =========================================================================
   13. Page 404
   ========================================================================= */

.ldg-notfound { padding: var(--ldg-breath) 0; max-width: 52rem; }
.ldg-notfound h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); margin: 0.6rem 0 1rem; }
.ldg-notfound p { margin-bottom: 1rem; color: var(--ldg-ink-soft); font-size: 1.05rem; }

/* =========================================================================
   14. Points de rupture
   ========================================================================= */

@media (max-width: 64rem) {
  .ldg-opening { grid-template-columns: 1fr; gap: 1.4rem; }
  .ldg-opening__text h1 { max-width: 20ch; }
  .ldg-tiles, .ldg-onfile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ldg-colophon__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 48rem) {
  .ldg-menu__handle { display: inline-flex; }
  .ldg-nav { width: 100%; display: none; }
  .ldg-menu__box:checked ~ .ldg-nav { display: block; }
  .ldg-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--ldg-rule); padding-top: 0.3rem; }
  .ldg-nav li + li { border-top: 1px dotted var(--ldg-rule); }
  .ldg-nav a { display: block; padding: 0.7rem 0.2rem; font-size: 1rem; border-bottom: 0; }
  .ldg-nav a[aria-current="page"] { border-left: 3px solid var(--ldg-navy); padding-left: 0.6rem; }

  .ldg-section__head { grid-template-columns: 1fr; }
  .ldg-section__note { grid-column: 1; justify-self: start; text-align: left; }
  .ldg-tiles, .ldg-onfile { grid-template-columns: 1fr; }
  .ldg-tile__photo { aspect-ratio: 2 / 1; }
  .ldg-keep { grid-template-columns: 1fr; }
  .ldg-row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ldg-row__photo { grid-column: 2; margin-bottom: 0.7rem; }
  .ldg-row__text { grid-column: 2; }
  .ldg-row__photo img { aspect-ratio: 16 / 9; }
  .ldg-band__head { grid-template-columns: 1fr; }
  .ldg-band__head p { grid-column: 1; }
  .ldg-colophon__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .ldg-contents a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ldg-contents__dots { display: none; }
}

@media (max-width: 30rem) {
  .ldg-totals { gap: 0.3rem 1.2rem; }
  .ldg-opening__photo img { border-radius: var(--ldg-radius) 1.4rem var(--ldg-radius) var(--ldg-radius); }
}

/* =========================================================================
   15. Impression
   ========================================================================= */

@media print {
  :root { --ldg-paper: #fff; --ldg-paper-deep: #f3f3f3; --ldg-ink: #000; --ldg-navy: #000; }
  .ldg-nav, .ldg-menu__handle, .ldg-onward, .ldg-skip, .ldg-colophon, .ldg-button { display: none; }
  .ldg-sheet { width: auto; padding-left: 0; }
  .ldg-sheet::before { display: none; }
  .ldg-corps h2::before { position: static; text-align: left; }
  a { text-decoration: none; }
}