/*
Theme Name: La Table des Copains
Theme URI: https://latabledescopains.preprod-ptl.fr
Author: Agence PTL
Author URI: https://agence-ptl.fr
Description: Theme sur mesure de La Table des Copains, brasserie, bar et pizzeria a Besancon. Construit sur le design system du client : memes couleurs, memes polices et meme echelle que la carte imprimee. Journal editorial avec affichage en grille.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietaire, Agence PTL
Text Domain: latabledescopains
*/

/* Les jetons et les polices vivent dans assets/, produits par
   generer-assets.py depuis la charte. Ils sont charges avant cette feuille. */

/* =============================================================
   BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-texte);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--c-texte);
  background: var(--c-papier);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
  margin: 0;
}

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

:focus-visible { outline: 2px solid var(--c-brique); outline-offset: 3px; }
.tdc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tdc-saut {
  position: absolute; left: 50%; translate: -50% -120%;
  background: var(--c-creme); color: var(--c-noir); padding: .7rem 1.2rem;
  border-radius: 0 0 8px 8px; z-index: 200; font-weight: 700;
  transition: translate .2s var(--a-souple);
}
.tdc-saut:focus { translate: -50% 0; }

.tdc-wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--w-gout); }
.tdc-wrap--lecture { max-width: var(--w-lecture); }

/* =============================================================
   EN-TETE
   ============================================================= */
.tdc-entete {
  position: sticky; top: 0; z-index: 90;
  background: var(--c-noir); color: var(--c-texte-clair);
  border-bottom: 1px solid var(--c-filet-sombre);
}
.tdc-entete__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--w-6); min-height: 4.5rem;
}
.tdc-marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.tdc-marque svg { width: 30px; height: 30px; }
.tdc-marque svg path { fill: var(--c-creme); }
.tdc-marque__nom {
  font-family: var(--f-display); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; line-height: 1.15; color: var(--c-papier);
}
@media (max-width: 420px) { .tdc-marque__nom { display: none; } }

.tdc-nav { display: flex; align-items: center; gap: clamp(.4rem, 2vw, 1.4rem); }
.tdc-nav a {
  text-decoration: none; font-size: .84rem; white-space: nowrap;
  color: rgba(247, 242, 234, .76); padding: .45rem .1rem;
  transition: color .2s ease;
}
.tdc-nav a:hover, .tdc-nav a:focus-visible,
.tdc-nav .current-menu-item > a { color: var(--c-papier); }
.tdc-nav__cta {
  background: var(--c-creme); color: var(--c-noir) !important;
  border-radius: 999px; padding: .6rem 1.1rem !important;
  font-weight: 700; font-size: .74rem !important; letter-spacing: .09em;
  text-transform: uppercase;
}

/* =============================================================
   BANDEAU DE SECTION
   ============================================================= */
/* La pastille de navigation flotte au-dessus du contenu : le bandeau doit
   lui laisser sa hauteur, plus son decalage du bord, sinon le surtitre passe
   dessous sur un petit ecran. */
.j-hero {
  background: var(--c-noir); color: var(--c-texte-clair);
  padding-block: calc(var(--v3-nav-h, 60px) + clamp(3rem, 7vw, 5.5rem))
                 clamp(3.5rem, 9vw, 7rem);
  position: relative; overflow: hidden;
}
.j-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background: radial-gradient(ellipse at 50% 0%, rgba(210,181,141,.14), transparent 62%);
  pointer-events: none;
}
.j-hero__in { position: relative; }
.j-hero__sur {
  font-size: var(--t-xxs); letter-spacing: var(--ls-sur); text-transform: uppercase;
  color: var(--c-creme); font-weight: 700; display: block; margin-bottom: var(--w-4);
}
.j-hero__t {
  font-family: var(--f-display); font-size: var(--t-xxl);
  letter-spacing: .03em; text-transform: uppercase; line-height: 1;
  text-wrap: balance;
}
.j-hero__s {
  margin-top: var(--w-6); max-width: 54ch; color: var(--c-fumee-clair);
  font-size: var(--t-s); line-height: var(--lh-aere);
}

/* =============================================================
   FILTRES PAR THEMATIQUE
   ============================================================= */
.j-filtres {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-block: var(--w-8) 0;
}
.j-filtre {
  text-decoration: none; font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--c-filet); color: var(--c-fumee);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.j-filtre:hover, .j-filtre:focus-visible { border-color: var(--c-noir); color: var(--c-texte); }
.j-filtre[aria-current="page"] {
  background: var(--c-noir); border-color: var(--c-noir); color: var(--c-papier);
}
.j-filtre__n { opacity: .55; margin-left: .35rem; font-variant-numeric: tabular-nums; }

/* =============================================================
   GRILLE D'ARTICLES
   ============================================================= */
.j-grille {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
}
.j-grille > * { min-width: 0; }

.j-carte {
  display: flex; flex-direction: column;
  background: var(--c-papier-2);
  border: 1px solid transparent;
  border-radius: 4px; overflow: hidden;
  transition: transform .35s var(--a-souple), border-color .25s ease, box-shadow .35s var(--a-souple);
}
.j-carte:hover, .j-carte:focus-within {
  transform: translateY(-4px);
  border-color: var(--c-filet);
  box-shadow: 0 16px 36px rgba(16, 16, 16, .09);
}

/* Illustration : tant que les photos n'existent pas, chaque article porte
   le pictogramme de sa thematique sur un aplat de la marque. Ce n'est pas
   un pis-aller : une grille de pictos monoline tient mieux qu'une grille
   de photos de banque d'images. */
.j-carte__ill {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: var(--c-noir); position: relative; overflow: hidden;
}
.j-carte__ill::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 10%, rgba(210,181,141,.18), transparent 60%);
}
.j-carte__ill svg {
  width: 38%; max-width: 110px; height: auto; color: var(--c-creme);
  position: relative; z-index: 1;
  transition: scale .45s var(--a-rebond);
}
.j-carte:hover .j-carte__ill svg { scale: 1.07; }
.j-carte__ill img { width: 100%; height: 100%; object-fit: cover; }

.j-carte__corps { padding: var(--w-6); display: flex; flex-direction: column; flex: 1; gap: var(--w-3); }
.j-carte__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brique); font-weight: 700;
}
.j-carte__meta time { color: var(--c-fumee); font-weight: 500; letter-spacing: .08em; }
.j-carte__t { font-family: var(--f-display); font-size: var(--t-l); line-height: 1.18; letter-spacing: .01em; }
.j-carte__t a { text-decoration: none; }
.j-carte__t a::after { content: ""; position: absolute; inset: 0; }
.j-carte { position: relative; }
.j-carte__r { color: var(--c-fumee); font-size: var(--t-xs); line-height: var(--lh-aere); }
.j-carte__lire {
  margin-top: auto; padding-top: var(--w-2);
  font-size: var(--t-xxs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-texte);
  display: inline-flex; align-items: center; gap: .45rem;
}
.j-carte__lire span { transition: translate .3s var(--a-souple); }
.j-carte:hover .j-carte__lire span { translate: 4px 0; }

/* La vedette : premiere carte de la premiere page, en pleine largeur */
@media (min-width: 60rem) {
  .j-carte--vedette { grid-column: 1 / -1; flex-direction: row; }
  .j-carte--vedette .j-carte__ill { aspect-ratio: auto; flex: 0 0 46%; }
  .j-carte--vedette .j-carte__ill svg { width: 30%; max-width: 150px; }
  .j-carte--vedette .j-carte__corps { padding: clamp(2rem, 4vw, 3.2rem); justify-content: center; }
  .j-carte--vedette .j-carte__t { font-size: clamp(1.6rem, 3vw, 2.3rem); }
  .j-carte--vedette .j-carte__r { font-size: var(--t-s); }
}

/* =============================================================
   ARTICLE
   ============================================================= */
.j-art { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
.j-art__fil {
  font-size: var(--t-xxs); color: var(--c-fumee); margin-bottom: var(--w-6);
  letter-spacing: .06em;
}
.j-art__fil a { text-decoration: none; }
.j-art__fil a:hover { text-decoration: underline; }

.j-art__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--w-4);
  font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-fumee); margin-bottom: var(--w-4);
}
.j-art__meta a { color: var(--c-brique); font-weight: 700; text-decoration: none; }

.j-art__t {
  font-family: var(--f-display); font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.06; letter-spacing: .01em; text-wrap: balance;
}
.j-art__chapo {
  margin-top: var(--w-6); font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65; color: var(--c-fumee);
  padding-left: var(--w-6); border-left: 3px solid var(--c-creme);
}

.j-art__corps { margin-top: clamp(2rem, 4vw, 3rem); }
.j-art__corps > * + * { margin-top: var(--w-6); }
.j-art__corps p { font-size: var(--t-s); line-height: var(--lh-aere); }
.j-art__corps h2 {
  font-family: var(--f-display); font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.2; margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: var(--w-6); border-top: 1px solid var(--c-filet);
  text-wrap: balance;
}
.j-art__corps h3 {
  font-family: var(--f-texte); font-weight: 700; font-size: var(--t-m);
  letter-spacing: .02em; margin-top: var(--w-8);
}
.j-art__corps ul, .j-art__corps ol { padding-left: 1.3rem; }
.j-art__corps li + li { margin-top: var(--w-2); }
.j-art__corps li { font-size: var(--t-s); line-height: var(--lh-aere); }
.j-art__corps a { color: var(--c-brique); text-underline-offset: .2em; }
.j-art__corps strong { font-weight: 700; }


.j-art__corps table {
  width: 100%; border-collapse: collapse; font-size: var(--t-xs);
}
.j-art__corps th, .j-art__corps td {
  text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--c-filet);
}
.j-art__corps th { font-weight: 700; text-transform: uppercase; font-size: var(--t-xxs); letter-spacing: .1em; }
.j-art__corps td:last-child, .j-art__corps th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.j-tableau { overflow-x: auto; }

.j-art__corps blockquote {
  padding: var(--w-6); background: var(--c-papier-2); border-left: 3px solid var(--c-brique);
  font-size: var(--t-s); line-height: var(--lh-aere);
}
.j-art__corps blockquote p + p { margin-top: var(--w-3); }

/* Mention sanitaire : obligatoire des qu'un contenu evoque une boisson
   alcoolisee (loi Evin, art. L.3323-4 du code de la sante publique). */
.j-evin {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: var(--w-4) var(--w-6);
  border: 1px solid var(--c-filet); border-radius: 3px;
  font-size: var(--t-xxs); color: var(--c-fumee); letter-spacing: .02em;
}

.j-art__pied {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: var(--w-8);
  border-top: 2px solid var(--c-noir);
}

/* Encart de rappel : l'etablissement, au bas de chaque article */
.j-encart {
  background: var(--c-noir); color: var(--c-texte-clair);
  border-radius: 4px; padding: clamp(1.6rem, 4vw, 2.6rem);
  display: grid; gap: var(--w-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.j-encart__t {
  font-family: var(--f-display); font-size: var(--t-l); letter-spacing: .04em;
  text-transform: uppercase; grid-column: 1 / -1;
}
.j-encart dt {
  font-size: var(--t-xxs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-creme); margin-bottom: var(--w-2);
}
.j-encart dd { margin: 0; font-size: var(--t-xs); line-height: 1.7; color: rgba(247,242,234,.84); }
.j-encart a { color: inherit; }

/* Articles voisins */
.j-suite { padding-block: 0 clamp(4rem, 8vw, 7rem); }
.j-suite__t {
  font-family: var(--f-display); font-size: var(--t-l); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: var(--w-8);
  padding-bottom: var(--w-3); border-bottom: 2px solid var(--c-noir);
}

/* =============================================================
   PAGINATION
   ============================================================= */
.j-pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
                padding-bottom: clamp(4rem, 8vw, 7rem); }
.j-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem;
  padding-inline: .7rem; border: 1px solid var(--c-filet); border-radius: 3px;
  text-decoration: none; font-size: var(--t-xs); font-weight: 600;
}
.j-pagination .page-numbers.current { background: var(--c-noir); color: var(--c-papier); border-color: var(--c-noir); }
.j-pagination a.page-numbers:hover { border-color: var(--c-noir); }

/* =============================================================
   PIED
   ============================================================= */
.tdc-pied {
  background: var(--c-noir); color: var(--c-texte-clair);
  padding-block: clamp(3rem, 7vw, 5rem) var(--w-8);
}
.tdc-pied__haut {
  display: grid; gap: var(--w-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: var(--w-8); border-bottom: 1px solid var(--c-filet-sombre);
}
.tdc-pied__logo { width: min(260px, 70vw); }
.tdc-pied__logo svg path { fill: var(--c-creme); }
.tdc-pied__t {
  font-size: var(--t-xxs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-creme); margin-bottom: var(--w-4);
}
.tdc-pied li { font-size: var(--t-xs); line-height: 1.9; color: rgba(247,242,234,.8); }
.tdc-pied a { text-decoration: none; }
.tdc-pied a:hover { color: var(--c-papier); text-decoration: underline; }
.tdc-pied__bas {
  padding-top: var(--w-6); font-size: var(--t-xxs); color: var(--c-fumee-clair);
  display: flex; flex-wrap: wrap; gap: var(--w-2) var(--w-6); justify-content: space-between;
}

/* =============================================================
   PAGES SIMPLES / 404
   ============================================================= */
.tdc-page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
.tdc-page h1 {
  font-family: var(--f-display); font-size: var(--t-xl);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.1;
}
.tdc-page > * + * { margin-top: var(--w-6); }
.tdc-vide { color: var(--c-fumee); font-size: var(--t-s); }

/* =============================================================
   APPARITION
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .j-anim { opacity: 0; translate: 0 18px; }
  .j-anim.est-vu {
    opacity: 1; translate: 0 0;
    transition: opacity .6s var(--a-souple) var(--d, 0ms),
                translate .6s var(--a-souple) var(--d, 0ms);
  }
}

@media print {
  .tdc-entete, .tdc-pied, .j-filtres, .j-suite, .j-pagination { display: none !important; }
  body { background: #fff; }
}

/* =========================================================================
   LES PAGES DE DESTINATION
   -------------------------------------------------------------------------
   Elles tombaient sur le gabarit de repli : un titre nu, du texte, rien
   d'autre. Ce bloc leur donne l'entete, le rythme et le mouvement du reste
   du site. La photo est une TEXTURE sous un aplat sombre, jamais un bandeau
   plein : les images sont des plans serres de banque d'images, et une vue
   large laisserait croire que c'est la salle du client.
   ========================================================================= */
.tdc-une {
  position: relative;
  background: var(--c-noir);
  color: var(--c-texte-clair);
  padding-block: clamp(7rem, 14vw, 11rem) clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
/* La photo, en fond, assombrie et desaturee : elle donne de la matiere sans
   jamais disputer la lisibilite du titre. */
.tdc-une--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tdc-une-img);
  background-size: cover;
  background-position: center;
  filter: grayscale(.35) brightness(.52) contrast(1.05);
  z-index: -2;
}
.tdc-une--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16,16,16,.82) 0%, rgba(16,16,16,.58) 42%, rgba(16,16,16,.94) 100%),
    radial-gradient(120% 90% at 18% 0%, rgba(210,181,141,.16), transparent 60%);
  z-index: -1;
}
.tdc-une__in { position: relative; }
.tdc-une__sur {
  font-size: var(--t-xxs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-creme);
  margin: 0 0 var(--w-4);
}
.tdc-une__t {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 6.4vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  max-width: 18ch;
}
.tdc-une__s {
  margin: var(--w-6) 0 0;
  max-width: 54ch;
  font-size: var(--t-m);
  line-height: var(--lh-aere);
  color: rgba(247, 242, 234, .86);
}

/* Le corps : on retire le titre du gabarit de repli, l'entete le porte. */
.tdc-page { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.tdc-page > .j-art__corps { margin-top: 0; }

/* Les h2 prennent le filet de l'accueil plutot qu'un simple gras. */
.tdc-page .j-art__corps h2 {
  position: relative;
  padding-top: var(--w-6);
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.tdc-page .j-art__corps h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3.2rem; height: 2px;
  background: var(--c-creme);
}
/* Le premier paragraphe apres un h2 porte la phrase qui compte. */
.tdc-page .j-art__corps h2 + p { font-size: var(--t-m); }

/* Le renvoi vers un article, en bas de page. */
.tdc-page .tdc-voir {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--w-6);
  border-top: 1px solid var(--c-filet);
  font-size: var(--t-xs);
  color: var(--c-fumee);
}

/* La bande « Et aussi » reutilise les cartes de l'accueil. */
.tdc-soeurs .v3-pages { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* Les cartes « Et aussi » viennent de l'accueil, ou elles vivent sur fond
   sombre : leur texte y est clair. Posees ici sur le sable, elles etaient
   illisibles. On les rhabille pour le fond clair plutot que de dupliquer
   un composant. */
.tdc-soeurs .v3-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--w-5);
}
.tdc-soeurs .v3-page-lien {
  background: var(--c-papier);
  border-color: var(--c-filet);
}
.tdc-soeurs .v3-page-lien:hover,
.tdc-soeurs .v3-page-lien:focus-visible {
  background: #fff;
  border-color: var(--c-creme);
}
.tdc-soeurs .v3-page-lien__t { color: var(--c-texte); }
.tdc-soeurs .v3-page-lien__d { color: var(--c-fumee); }
.tdc-soeurs .v3-page-lien__f { color: var(--c-brique); }

/* L'entete d'article : meme bloc que les pages de destination, plus le fil
   d'Ariane et la ligne de meta, qui doivent passer sur fond sombre. */
.tdc-une--article { padding-block: clamp(6.5rem, 12vw, 9.5rem) clamp(3rem, 6vw, 4.5rem); }
.tdc-une--article .tdc-une__t { font-size: clamp(2rem, 5.2vw, 3.6rem); max-width: 22ch; }

.tdc-une__fil {
  font-size: var(--t-xxs);
  letter-spacing: .04em;
  color: rgba(247, 242, 234, .55);
  margin: 0 0 var(--w-6);
}
.tdc-une__fil a { color: rgba(247, 242, 234, .78); text-decoration: none; }
.tdc-une__fil a:hover, .tdc-une__fil a:focus-visible { color: var(--c-creme); text-decoration: underline; }

.tdc-une__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--w-4);
  margin: 0 0 var(--w-5);
  font-size: var(--t-xxs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247, 242, 234, .6);
}
.tdc-une__meta a { color: var(--c-creme); text-decoration: none; font-weight: 700; }
.tdc-une__meta a:hover, .tdc-une__meta a:focus-visible { text-decoration: underline; }

/* Le corps de l'article reprend le rythme des pages : filet au-dessus des h2. */
.j-art .j-art__corps h2 { position: relative; padding-top: var(--w-6); }
.j-art .j-art__corps h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3.2rem; height: 2px;
  background: var(--c-creme);
}

/* =============================================================
   CONFORT DE LECTURE SUR GRAND ECRAN
   Ce bloc est volontairement le DERNIER de la feuille : il reprend des
   selecteurs deja definis plus haut, a specificite egale. Place avant eux,
   il etait purement et simplement ignore — c'est ce qui s'est passe au
   premier essai.
   ============================================================= */

/* La page donnait un ruban perdu : 640 px de texte au milieu de 1425 px de
   fenetre, 400 px de vide de chaque cote.

   Le reflexe serait d'elargir la colonne. La mesure dit le contraire : a
   1440 px les lignes portaient deja 93 a 99 signes, quand l'oeil retrouve
   le debut de la ligne suivante sans effort entre 60 et 80. Les elargir les
   aurait allongees encore.

   Le defaut n'etait donc pas la largeur mais le corps : une fonte trop
   petite pour sa colonne, qui laissait du vide partout et fatiguait a la
   lecture. On monte le corps et on resserre un peu la colonne. Resultat
   mesure : 75 a 78 signes par ligne, et un texte qui occupe enfin sa place
   — plus grand dans une colonne plus etroite parait plus large, parce que
   c'est le rapport des deux qui se voit.

   Le jeton `--w-lecture` n'est pas touche : il vient de la charte, qui sert
   aussi les supports imprimes, ou la colonne n'a pas la meme contrainte. */
/* Le corps progresse avec la fenetre, sans palier. Un simple seuil a
   1080 px laissait les ecrans de 1024 avec le defaut d'origine — 93 signes
   par ligne — et faisait sauter la taille d'un pixel a l'autre au
   redimensionnement. */
.j-art__corps p,
.j-art__corps li { font-size: clamp(1.06rem, .88rem + .62vw, 1.25rem); }
/* Le paragraphe d'attaque suit la meme courbe, un cran au-dessus. Sans
   cette ligne il resterait seul en petit corps, plus petit que le texte
   qu'il introduit. */
.tdc-page .j-art__corps h2 + p { font-size: clamp(1.06rem, .88rem + .64vw, 1.32rem); }

@media (min-width: 1080px) {
  .tdc-wrap--lecture { max-width: 47rem; }
  /* Plus le corps grossit, moins il a besoin d'interligne. */
  .j-art__corps p,
  .j-art__corps li { line-height: 1.65; }
}