/* =========================================================================
   SQUELETTE « colonne-longue » — rhabillage District Songbook
   Direction 03 « Le Clair-Obscur de Lignée », adaptée au sujet :
   les coulisses d'une salle de répétition de Washington, éclairées
   par en dessous. Préfixe de classes : co- (coulisse).
   Feuille unique. Aucune ressource externe, aucune police distante.
   ---------------------------------------------------------------------
   NEGATIF 1 : le cuivre ne touche jamais un lien. Les liens sont
   potomac, toujours.
   NEGATIF 2 : aucune ombre floue sur ce site. Les ombres sont des
   aplats decales de --granit, offset entier, blur 0. Une salle
   sombre n'a pas de halo.
   NEGATIF 3 : aucune surface plus claire que --granit. Pas de carte
   grise sur fond noir : le noir est une lumiere, pas un theme.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- Matiere : une salle de repetition apres extinction ------------ */
  --nuit-salle: #0c0f12;      /* fond de page, et rien d'autre           */
  --ardoise: #171c21;         /* surfaces en retrait : pupitre, encarts  */
  --granit: #232b31;          /* aplats decales, bordures, fond de l'ours */
  --craie: #ecebe8;           /* texte courant et titres                 */
  --acier: #98a1a9;           /* encre secondaire : chapos, legendes     */
  --potomac: #5b93b4;         /* liens, au repos                         */
  --potomac-clair: #8fbcd6;   /* lien survole, contour de focus          */
  --cuivre: #8a5a2b;          /* surtitres, filet gauche, 4e portee      */
  --cuivre-voile: rgba(138, 90, 43, .16);  /* degrade de bas d'image     */
  --filet-acier: rgba(152, 161, 169, .34); /* portees, filets, bordures  */

  /* --- Polices (piles systeme uniquement) ---------------------------- */
  --titre-police: "Optima", "Candara", "Palatino Linotype", "Palatino",
                  Georgia, serif;
  --texte-police: "Charter", "Bitstream Charter", "Iowan Old Style",
                  "Sitka Text", "Cambria", Georgia, serif;
  --marque-police: "Avenir Next Condensed", "Roboto Condensed",
                   "Arial Narrow", system-ui, sans-serif;

  /* --- Mesure et rythme ---------------------------------------------- */
  --mesure: 66ch;             /* la piste de lecture                     */
  --marge-large: 8.5rem;      /* gouttiere gauche des marginalia         */
  --respiration: 2.6rem;
  --corps: clamp(1.012rem, 0.98rem + 0.17vw, 1.11rem);
  --interligne: 1.66;

  /* --- Ratios d'image ------------------------------------------------- */
  --ratio-plateau: 21 / 9;    /* plages d'ouverture, bandeaux de cahier  */
  --ratio-pupitre: 4 / 3;     /* planches d'article en pleine piste      */
  --ratio-partition: 3 / 4;   /* vignettes de gouttiere, portraits       */

  --epaisseur-filet: 1px;
  --rayon: 0;                 /* angles vifs : les pupitres sont carres  */
}

/* =========================================================================
   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;
  /* Deux sources de plateau tres sourdes, heritees de la direction :
     une froide en haut a gauche, une chaude en haut a droite. */
  background:
    radial-gradient(90% 58% at 22% 0%, rgba(91, 147, 180, .075), transparent 62%),
    radial-gradient(70% 52% at 84% 12%, rgba(138, 90, 43, .055), transparent 66%),
    var(--nuit-salle);
  color: var(--craie);
  font-family: var(--texte-police);
  font-size: var(--corps);
  line-height: var(--interligne);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  font-weight: 500;           /* jamais de gras : la direction l'interdit */
  line-height: 1.14;
  margin: 0;
  letter-spacing: .005em;
}

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

a { color: var(--potomac); text-underline-offset: 0.18em; }
a:hover { color: var(--potomac-clair); }

:focus-visible {
  outline: 2px solid var(--potomac-clair);
  outline-offset: 3px;
}

hr { border: 0; }

strong { font-weight: 600; color: var(--craie); }

time, .co-entree__date, .co-appel__tessitura, .co-sommaire__page,
.co-jalon, .co-cahier__compte {
  font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================================================
   2. Acces clavier
   ========================================================================= */

.co-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--craie);
  color: var(--nuit-salle);
  padding: 0.7rem 1.1rem;
  font-family: var(--marque-police);
  letter-spacing: .08em;
  z-index: 30;
}
.co-evitement:focus { left: 0.6rem; top: 0.6rem; }

/* =========================================================================
   3. Le plateau : colonne unique + gouttiere de marginalia
   ------------------------------------------------------------------------
   .co-plateau = conteneur de lecture (le .cah-piste du squelette).
   Sur grand ecran il reserve une marge gauche (--marge-large) ou viennent
   se loger dates, numeros d'intertitre, vignettes, exergues et notes,
   SANS jamais deborder horizontalement.
   ========================================================================= */

.co-plateau {
  width: min(100% - 2.2rem, var(--mesure));
  margin-inline: auto;
  position: relative;
}

@media (min-width: 64rem) {
  .co-plateau {
    width: min(100% - 4rem, calc(var(--mesure) + var(--marge-large)));
    padding-left: var(--marge-large);
  }
}

/* Un element autorise a sortir dans la gouttiere gauche */
.co-debord { margin-left: 0; }
@media (min-width: 64rem) {
  .co-debord { margin-left: calc(-1 * var(--marge-large)); }
}

/* Chaque grande zone du plateau s'ouvre sur un filet qui s'eteint
   aux deux bouts : la ligne de plateau qui separe deux sequences.
   Portee aux zones du corps et de l'ours, pas a la manchette. */
main .co-plateau > * + *:not(.co-portee)::before,
.co-ours .co-plateau > * + *:not(.co-portee)::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: calc(var(--respiration) * .7);
  background: linear-gradient(90deg, transparent, var(--filet-acier) 18%,
                              var(--filet-acier) 82%, transparent);
}

/* Toute cible d'ancre passe sous la manchette collante. */
[id] { scroll-margin-top: 6rem; }

/* Une portee posee entre deux zones respire autant qu'un filet de zone. */
.co-portee { margin-block: var(--respiration); }
.co-manchette .co-portee, .co-ours .co-portee { margin-block: 0; }
.co-ours .co-portee { margin-bottom: 1.8rem; }

/* =========================================================================
   4. Manchette (navigation minimale du haut, collante)
   ========================================================================= */

.co-manchette {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: var(--epaisseur-filet) solid var(--filet-acier);
  padding: 0.85rem 0 0.8rem;
  margin-bottom: var(--respiration);
  background: rgba(12, 15, 18, .82);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
}

.co-manchette__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
}

.co-enseigne {
  font-family: var(--titre-police);
  font-size: 1.24rem;
  letter-spacing: 0.01em;
  color: var(--craie);
  text-decoration: none;
}
.co-enseigne:hover { color: var(--potomac-clair); }

.co-enseigne__mention {
  display: block;
  font-family: var(--marque-police);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--acier);
  margin-top: 0.28rem;
}

/* La portee sous l'enseigne : quatre filets, le dernier en cuivre. */
.co-manchette .co-portee {
  margin-top: 0.55rem;
  height: 16px;
}

.co-boussole ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
}

/* Soulignement anime de 0 a 100 %, impose par la direction. */
.co-boussole a {
  font-family: var(--marque-police);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acier);
  text-decoration: none;
  padding-bottom: 0.22rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size .25s ease, color .18s ease;
}
.co-boussole a:hover { color: var(--potomac-clair); background-size: 100% 1px; }
.co-boussole a[aria-current] { color: var(--craie); background-size: 100% 1px; background-image: linear-gradient(var(--cuivre), var(--cuivre)); }

/* Declencheur replie : invisible sur grand ecran, visible sous 52rem. */
.co-menu-case {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.co-menu-declencheur {
  display: none;
  font-family: var(--marque-police);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acier);
  border: var(--epaisseur-filet) solid var(--filet-acier);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  user-select: none;
}
.co-menu-declencheur::before { content: ""; display: inline-block; width: 0.9rem; height: 0.55rem; margin-right: 0.5rem; background: repeating-linear-gradient(to bottom, var(--acier) 0 1px, transparent 1px 4px); }

@media (max-width: 52rem) {
  .co-menu-declencheur { display: inline-block; }
  .co-boussole ul {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--ardoise);
    border-bottom: var(--epaisseur-filet) solid var(--filet-acier);
    padding: 0.4rem 1.1rem 0.8rem;
  }
  .co-boussole li { border-top: var(--epaisseur-filet) solid var(--filet-acier); }
  .co-boussole li:first-child { border-top: 0; }
  .co-boussole a { display: block; padding: 0.7rem 0 0.6rem; }
  .co-menu-case:checked ~ ul { display: flex; }
  .co-menu-case:checked + .co-menu-declencheur { color: var(--craie); border-color: var(--acier); }
}

/* =========================================================================
   5. SIGNATURE A — la portee a quatre voix (co-portee)
   ------------------------------------------------------------------------
   Quatre filets de 1 px qui s'eteignent aux deux bouts ; le quatrieme,
   celui des basses qui portent l'harmonie, est en cuivre.
   ========================================================================= */

.co-portee {
  height: 22px;
  border: 0;
  background: repeating-linear-gradient(to bottom,
              var(--filet-acier) 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.co-portee--cuivre { box-shadow: inset 0 22px 0 -21px var(--cuivre); }
.co-portee--fine {
  height: 15px;
  background: repeating-linear-gradient(to bottom,
              var(--filet-acier) 0 1px, transparent 1px 5px);
}
.co-portee--fine.co-portee--cuivre { box-shadow: inset 0 15px 0 -14px var(--cuivre); }

/* =========================================================================
   6. SIGNATURE B — la rampe de plateau (co-rampe)
   ------------------------------------------------------------------------
   La seule lumiere qu'un chanteur voit vraiment : un feu venu d'en bas.
   Toute image du site est desaturee, assombrie, masquee en radial
   recentre bas, et posee sur un voile de cuivre.
   ========================================================================= */

.co-rampe {
  position: relative;
  background: linear-gradient(to top, var(--cuivre-voile), transparent 42%);
}
.co-rampe img {
  filter: grayscale(.28) contrast(1.06) brightness(.82);
  -webkit-mask-image: radial-gradient(132% 118% at 50% 56%, #000 54%, transparent 86%);
          mask-image: radial-gradient(132% 118% at 50% 56%, #000 54%, transparent 86%);
}
.co-rampe figcaption,
.co-vignette figcaption {
  font-family: var(--marque-police);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--acier);
  margin-top: 0.55rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--filet-acier);
}
.co-rampe figcaption .co-pupitre-marque,
.co-vignette figcaption .co-pupitre-marque {
  display: block;
  font-size: 0.6rem;
  margin-top: 0.3rem;
  color: var(--acier);
}

/* Plage 21/9 : l'ouverture de l'accueil, hauteur bornee par le brief. */
.co-plage { margin: 1.8rem 0 0; }
.co-plage img { height: clamp(240px, 38vh, 420px); object-fit: cover; width: 100%; }

/* Bandeau 21/9 en pleine piste : tete de rubrique, cahier d'accueil. */
.co-bandeau { margin: 1.8rem 0; }
.co-bandeau img { aspect-ratio: var(--ratio-plateau); object-fit: cover; width: 100%; }

/* Planche 4/3 : l'illustration d'article en pleine piste. */
.co-planche { margin: 2.2rem 0; }
.co-planche img { aspect-ratio: var(--ratio-pupitre); object-fit: cover; width: 100%; }

/* Vignette 3/4 : gouttiere a partir de 64rem, pleine largeur en dessous. */
.co-vignette { margin: 1.2rem auto; width: min(15rem, 62%); }
.co-vignette img { aspect-ratio: var(--ratio-partition); object-fit: cover; width: 100%; }
@media (min-width: 64rem) {
  .co-vignette {
    position: absolute;
    left: calc(-1 * var(--marge-large));
    width: calc(var(--marge-large) - 2.4rem);
    margin: 0;
  }
  .co-vignette figcaption { font-size: 0.6rem; padding-left: 0.5rem; }
}

/* Souffle : un detail vertical qui aere entre deux zones. */
.co-souffle { width: min(17rem, 70%); margin: 0 auto var(--respiration); }
.co-souffle img { aspect-ratio: var(--ratio-partition); object-fit: cover; width: 100%; }

/* =========================================================================
   7. SIGNATURE C — le pupitre (co-pupitre)
   ------------------------------------------------------------------------
   Le cartouche en ardoise a filet cuivre qui tient ce qu'on lit debout,
   vite. Ombre = aplat decale de granit, jamais de flou.
   ========================================================================= */

.co-pupitre {
  background: var(--ardoise);
  border-left: 3px solid var(--cuivre);
  padding: 1.15rem 1.35rem 1.15rem 1.15rem;
  box-shadow: 6px 6px 0 -1px var(--granit);
}

/* Le troisieme role typographique : les capitales espacees cuivre.
   Il porte EXCLUSIVEMENT les surtitres, les noms de pupitre, les dates
   du flux et les credits photo. Jamais dans le corps ni les titres. */
.co-pupitre-marque {
  font-family: var(--marque-police);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cuivre);
}
.co-surtitre.co-pupitre-marque { font-size: 0.72rem; }
.co-portion__titre.co-pupitre-marque,
.co-sommaire__titre.co-pupitre-marque,
.co-notes__titre.co-pupitre-marque { color: var(--acier); }

/* =========================================================================
   8. Ouverture de page (liminaire) et en-tete d'article
   ========================================================================= */

.co-liminaire { padding-top: 0.8rem; }
.co-ouverture { padding-block: clamp(2.4rem, 6vh, 4.4rem); }

.co-surtitre { margin-bottom: 0.9rem; }
/* Regle negative : meme dans un surtitre cuivre, le lien reste potomac. */
.co-surtitre a {
  color: var(--potomac);
  text-decoration: none;
  border-bottom: 1px solid var(--filet-acier);
}
.co-surtitre a:hover { color: var(--potomac-clair); border-bottom-color: currentColor; }

.co-titre-page {
  font-size: clamp(2.05rem, 1.5rem + 2.3vw, 3.15rem);
  letter-spacing: -0.004em;
  margin-bottom: 1rem;
  max-width: 22ch;
}

.co-chapo {
  font-size: clamp(1.12rem, 1.03rem + 0.42vw, 1.3rem);
  line-height: 1.5;
  color: var(--acier);
  margin-bottom: 1.3rem;
}

.co-signature {
  font-family: var(--texte-police);
  font-size: 0.86rem;
  color: var(--acier);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  padding-bottom: 1.5rem;
  margin-bottom: 0.4rem;
}
.co-signature span::after {
  content: "·";
  margin-left: 0.9rem;
  color: var(--filet-acier);
}
.co-signature span:last-child::after { content: ""; margin: 0; }
.co-signature time { font-variant-numeric: tabular-nums lining-nums; }

/* Fil d'ariane discret au-dessus du liminaire. */
/* Le fil reprend exactement la boite du plateau (decalage gouttiere compris). */
.co-fil {
  width: calc(100% - 4rem);
  max-width: calc(var(--mesure) + var(--marge-large));
  margin-inline: auto;
  margin-bottom: 1.6rem;
  padding-right: 1.1rem;
}
@media (min-width: 64rem) {
  .co-fil { padding-left: var(--marge-large); }
}
.co-fil ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  padding: 0; margin: 0;
  font-family: var(--marque-police);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acier);
}
.co-fil li + li::before { content: "/"; margin-right: 0.55rem; color: var(--filet-acier); }
.co-fil a { color: var(--acier); text-decoration: none; }
.co-fil a:hover { color: var(--potomac-clair); }
.co-fil [aria-current] { color: var(--craie); }

/* =========================================================================
   9. L'edito de l'accueil : la voix du site
   ========================================================================= */

.co-edito { position: relative; margin-top: 1.8rem; }
.co-edito p { max-width: var(--mesure); margin-bottom: 1.15rem; }

/* Lettrine de l'edito : trois lignes d'Optima 500, filet cuivre a droite. */
.co-edito .co-lettrine::first-letter {
  float: left;
  font-family: var(--titre-police);
  font-weight: 500;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.2em 0.02em 0;
  margin-right: 0.14em;
  color: var(--craie);
  border-right: 2px solid var(--cuivre);
}

@media (min-width: 64rem) {
  .co-edito .co-vignette { top: 0.4rem; }
}

/* =========================================================================
   10. L'idee inattendue — The Four Desks (co-appel)
   ------------------------------------------------------------------------
   Une bande retournee en fond plein qui deborde des marges : quatre
   lignes horizontales, une par pupitre, la quatrieme filet cuivre.
   ========================================================================= */

.co-appel {
  margin-inline: calc(50% - 50vw);
  padding: clamp(2rem, 5vh, 3.6rem) 1.2rem;
  background: var(--ardoise);
  margin-block: var(--respiration);
}
/* A partir de 64rem la gouttiere decale la piste : le debord plein ecran
   et le calage interieur sont corriges de la moitie de --marge-large. */
@media (min-width: 64rem) {
  .co-appel {
    margin-left: calc(50% - 50vw - var(--marge-large) / 2);
    margin-right: calc(50% - 50vw + var(--marge-large) / 2);
    padding-left: max(1.2rem, calc(50vw - 33ch + var(--marge-large) / 2));
    padding-right: max(1.2rem, calc(50vw - 33ch - var(--marge-large) / 2));
  }
}

.co-appel__surtitre { margin-bottom: 0.5rem; }
.co-appel__titre {
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
  margin-bottom: 1.6rem;
}
.co-appel__intro { color: var(--acier); max-width: var(--mesure); margin-bottom: 1.6rem; }

.co-appel-pupitres {
  list-style: none;
  margin: 0; padding: 0;
}
.co-appel-pupitres li {
  display: grid;
  grid-template-columns: 7.5rem 5.5rem 1fr auto;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem 0;
  border-top: var(--epaisseur-filet) solid var(--filet-acier);
}
/* La quatrieme ligne boucle la metaphore : son filet est cuivre. */
.co-appel-pupitres li:last-child { border-top-color: var(--cuivre); }

.co-appel__nom { font-size: 0.8rem; }

/* Les quatre portraits de pupitre : une rangee de 3/4 sous les lignes. */
.co-appel-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.7rem;
}
.co-appel-figures .co-rampe { margin: 0; }
.co-appel-figures img {
  aspect-ratio: var(--ratio-partition);
  object-fit: cover;
  width: 100%;
}

.co-appel__tessitura {
  font-family: var(--marque-police);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--acier);
  white-space: nowrap;
}
.co-appel__role { color: var(--craie); font-size: 0.98rem; }
.co-appel__lien {
  font-family: var(--marque-police);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--filet-acier);
  white-space: nowrap;
}
.co-appel__lien:hover { border-bottom-color: var(--potomac-clair); }

/* Version reduite a une ligne : tete de hub, pied des deux articles. */
.co-appel--simple {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin: 1.6rem 0;
  padding: 0.7rem 0;
  border-top: var(--epaisseur-filet) solid var(--filet-acier);
  border-bottom: var(--epaisseur-filet) solid var(--filet-acier);
  font-size: 0.92rem;
}
.co-appel--simple .co-pupitre-marque { font-size: 0.72rem; }
.co-appel--simple .co-appel__tessitura { font-size: 0.76rem; }
.co-appel--simple .co-appel__role { color: var(--acier); font-size: 0.92rem; }
.co-appel--simple a { font-family: var(--marque-police); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--filet-acier); }

@media (max-width: 52rem) {
  .co-appel-pupitres li {
    grid-template-columns: 1fr auto;
    grid-template-areas: "nom tess" "role lien";
    row-gap: 0.45rem;
  }
  .co-appel__nom { grid-area: nom; }
  .co-appel__tessitura { grid-area: tess; }
  .co-appel__role { grid-area: role; }
  .co-appel__lien { grid-area: lien; }
  .co-appel-figures { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   11. Corps de texte long
   ========================================================================= */

.co-corps { counter-reset: co-intertitre; padding-top: 1.6rem; }

.co-corps p { margin-bottom: 1.15rem; max-width: var(--mesure); }

.co-corps > ul, .co-corps > ol {
  margin: 0 0 1.5rem;
  padding-left: 1.3rem;
  max-width: var(--mesure);
}
.co-corps li { margin-bottom: 0.5rem; }
.co-corps li::marker { color: var(--cuivre); }

.co-corps a { color: var(--potomac); text-decoration: underline; }
.co-corps a:hover { color: var(--potomac-clair); }

/* Lettrine du premier paragraphe d'article. */
.co-corps .co-lettrine::first-letter {
  float: left;
  font-family: var(--titre-police);
  font-weight: 500;
  font-size: 3.5em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--potomac-clair);
}

/* Intertitres numerotes par compteur CSS — aucun numero dans le HTML. */
.co-intertitre {
  font-size: clamp(1.42rem, 1.2rem + 1vw, 1.86rem);
  margin: 2.5rem 0 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet-acier);
  position: relative;
  max-width: var(--mesure);
  scroll-margin-top: 6.5rem;
}

.co-intertitre::before {
  counter-increment: co-intertitre;
  content: counter(co-intertitre, decimal-leading-zero);
  display: block;
  font-family: var(--marque-police);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--potomac);
  margin-bottom: 0.45rem;
  font-variant-numeric: tabular-nums lining-nums;
}

@media (min-width: 64rem) {
  .co-intertitre::before {
    position: absolute;
    left: calc(-1 * var(--marge-large));
    top: 1.35rem;
    width: calc(var(--marge-large) - 1.6rem);
    text-align: right;
    margin: 0;
  }
}

.co-sous-intertitre {
  font-family: var(--marque-police);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.9rem 0 0.7rem;
  color: var(--craie);
  max-width: var(--mesure);
}

/* Exergue : la phrase qu'on retient, casse vers la gouttiere. */
.co-exergue {
  margin: 2.1rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--cuivre);
  font-family: var(--titre-police);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem);
  line-height: 1.32;
  color: var(--craie);
}
@media (min-width: 64rem) {
  .co-exergue {
    margin-left: calc(-1 * var(--marge-large));
    padding-left: 0;
    border-left: 0;
    border-top: 2px solid var(--cuivre);
    padding-top: 0.9rem;
    max-width: calc(var(--mesure) + 4rem);
  }
}
.co-exergue p { margin: 0; max-width: none; }
.co-exergue cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--marque-police);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acier);
}

/* Encart d'article : un pupitre qui tient ce qu'il faut retenir. */
.co-encart { margin: 2.2rem 0; max-width: var(--mesure); }
.co-encart__titre { margin-bottom: 0.6rem; }
.co-encart p { color: var(--acier); font-size: 0.95rem; }
.co-encart p:last-child { margin-bottom: 0; }

/* Tableau large : defilement propre dans son conteneur. */
.co-tableau {
  overflow-x: auto;
  margin: 2rem 0;
  border: var(--epaisseur-filet) solid var(--filet-acier);
  -webkit-overflow-scrolling: touch;
}
.co-tableau table {
  border-collapse: collapse;
  min-width: 38rem;
  width: 100%;
  font-family: var(--marque-police);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.co-tableau caption {
  caption-side: top;
  text-align: left;
  padding: 0.8rem 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acier);
  border-bottom: var(--epaisseur-filet) solid var(--filet-acier);
}
.co-tableau th, .co-tableau td {
  text-align: left;
  padding: 0.62rem 0.9rem;
  border-bottom: var(--epaisseur-filet) solid var(--filet-acier);
  vertical-align: top;
}
.co-tableau thead th { background: var(--ardoise); color: var(--craie); font-weight: 600; }
.co-tableau tbody tr:nth-child(even) td { background: rgba(23, 28, 33, .55); }
.co-tableau tbody tr:last-child td { border-bottom: 0; }

/* =========================================================================
   12. Renvois et notes : la colonne de marge
   ------------------------------------------------------------------------
   A partir de 64rem, chaque note vit dans la gouttiere en face de son
   appel, dans un petit pupitre. En dessous, elle retombe en note de fin.
   ========================================================================= */

.co-renvoi {
  font-family: var(--marque-police);
  font-size: 0.68em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  padding: 0 0.12em;
}
.co-renvoi:hover { text-decoration: underline; }

.co-renvoi-bloc { display: none; }
@media (min-width: 64rem) {
  .co-corps p { position: relative; }
  .co-renvoi-bloc {
    display: block;
    position: absolute;
    left: calc(-1 * var(--marge-large));
    top: -0.3rem;
    width: calc(var(--marge-large) - 1.6rem);
    padding: 0.55rem 0.65rem;
    background: var(--ardoise);
    border-left: 2px solid var(--cuivre);
    box-shadow: 4px 4px 0 -1px var(--granit);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--acier);
  }
  .co-renvoi-bloc::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 0.4rem;
    background: linear-gradient(90deg, var(--cuivre), transparent 80%);
  }
}

.co-notes {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--filet-acier);
  max-width: var(--mesure);
}
.co-notes__titre { margin-bottom: 1rem; }
.co-notes ol {
  margin: 0;
  padding-left: 1.35rem;
  font-size: 0.92rem;
  color: var(--acier);
}
.co-notes li { margin-bottom: 0.75rem; }
.co-notes li::marker { font-family: var(--marque-police); color: var(--potomac); }
.co-retour { font-family: var(--marque-police); text-decoration: none; margin-left: 0.35rem; }

/* =========================================================================
   13. Sommaire de fin d'article
   ========================================================================= */

.co-sommaire {
  margin-top: 2.8rem;
  padding: 1.4rem 0 0;
  border-top: var(--epaisseur-filet) solid var(--filet-acier);
  max-width: var(--mesure);
}
.co-sommaire__titre { margin-bottom: 1rem; }
.co-sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: co-fil; }
.co-sommaire li { margin-bottom: 0.55rem; }
.co-sommaire a {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--craie);
  font-family: var(--marque-police);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}
.co-sommaire a:hover { color: var(--potomac-clair); }
.co-sommaire a::before {
  counter-increment: co-fil;
  content: counter(co-fil, decimal-leading-zero);
  color: var(--potomac);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.co-pointille { border-bottom: 1px dotted var(--filet-acier); transform: translateY(-0.28em); }
.co-sommaire__page { color: var(--acier); font-size: 0.78rem; }

/* =========================================================================
   14. Entrees de liste (accueil, rubrique) : jamais de cartes
   ========================================================================= */

.co-recueil { list-style: none; margin: 0; padding: 0; }

.co-entree {
  padding: 1.6rem 0;
  position: relative;
}
.co-entree:first-child { padding-top: 0.4rem; }
.co-recueil > .co-entree:last-child { padding-bottom: 0.8rem; }

/* La portee fine separe deux entrees du flux date. */
.co-recueil > .co-entree + .co-entree::before {
  content: "";
  display: block;
  height: 15px;
  margin: -0.4rem 0 1.4rem;
  background: repeating-linear-gradient(to bottom,
              var(--filet-acier) 0 1px, transparent 1px 5px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.co-entree__date {
  display: block;
  font-family: var(--marque-police);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cuivre);
  margin-bottom: 0.5rem;
}

@media (min-width: 64rem) {
  .co-entree__date {
    position: absolute;
    left: calc(-1 * var(--marge-large));
    top: 2rem;
    width: calc(var(--marge-large) - 1.6rem);
    text-align: right;
    margin: 0;
  }
  .co-entree:first-child .co-entree__date { top: 0.7rem; }
}

.co-entree__titre {
  font-size: clamp(1.28rem, 1.12rem + 0.6vw, 1.6rem);
  margin-bottom: 0.5rem;
  max-width: 34ch;
}
.co-entree__titre a { color: var(--craie); text-decoration: none; }
.co-entree__titre a:hover { color: var(--potomac-clair); text-decoration: underline; }

.co-entree__amorce { color: var(--acier); margin-bottom: 0.6rem; max-width: var(--mesure); }

.co-entree__pied {
  font-family: var(--marque-police);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--acier);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.8rem;
}
.co-entree__pied a { color: var(--potomac); text-decoration: none; }
.co-entree__pied a:hover { color: var(--potomac-clair); text-decoration: underline; }

/* Vignette accrochee a une entree du flux : une sur trois, sous la date.
   La date peut tenir sur deux lignes : la vignette descend sous elle. */
@media (min-width: 64rem) {
  .co-entree .co-vignette { top: 4.6rem; }
  .co-entree:first-child .co-vignette { top: 3.3rem; }
  /* L'entree qui porte une vignette garde la hauteur de sa vignette :
     rien ne se superpose dans la gouttiere. */
  .co-entree--vignette { min-height: 15.2rem; }
}

/* =========================================================================
   15. Cahier des rubriques : liste de liens, jamais une grille de cartes
   ========================================================================= */

.co-cahiers { position: relative; }
@media (min-width: 64rem) {
  .co-cahiers {
    margin-left: calc(-1 * var(--marge-large));
    width: calc(var(--mesure) + var(--marge-large));
  }
}

.co-cahier-liste { list-style: none; margin: 0; padding: 0; }
.co-cahier {
  padding: 1.15rem 0 1.25rem;
  border-bottom: var(--epaisseur-filet) dotted var(--filet-acier);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.2rem 1.2rem;
}
.co-cahier > a {
  font-family: var(--titre-police);
  font-weight: 500;
  font-size: 1.28rem;
  color: var(--craie);
  text-decoration: none;
  border-bottom: 2px solid var(--potomac);
  justify-self: start;
}
.co-cahier > a:hover { color: var(--potomac-clair); }
.co-cahier__compte {
  font-family: var(--marque-police);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acier);
}
.co-cahier p {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.98rem;
  color: var(--acier);
  max-width: 58ch;
}
.co-cahier .co-bandeau { grid-column: 1 / -1; margin-top: 0.9rem; margin-bottom: 0.2rem; }

/* =========================================================================
   16. Le triplet (co-triplet) : First step / To confirm / Limit
   ========================================================================= */

.co-triplet dl { margin: 0; }
.co-triplet dt { margin-top: 0.9rem; }
.co-triplet dt:first-child { margin-top: 0; }
.co-triplet dd {
  margin: 0.3rem 0 0;
  color: var(--acier);
  font-size: 0.95rem;
}

/* =========================================================================
   17. Blocs de service : filets, jalons, suite de lecture
   ========================================================================= */

.co-filet {
  height: 0;
  border-top: 1px solid var(--filet-acier);
  margin: var(--respiration) 0;
  max-width: var(--mesure);
}
.co-filet--fin { border-top-style: dotted; }

.co-portion { margin-bottom: var(--respiration); }
.co-portion__titre {
  font-size: 0.72rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--filet-acier);
  margin-bottom: 1.3rem;
}

.co-jalon {
  font-family: var(--marque-police);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--acier);
  margin-bottom: 1.2rem;
}

.co-suite { margin-top: 2.6rem; }
.co-suite ul { list-style: none; margin: 0; padding: 0; }
.co-suite li { padding: 0.7rem 0; border-bottom: var(--epaisseur-filet) dotted var(--filet-acier); }
.co-suite a {
  font-family: var(--titre-police);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--craie);
  text-decoration: none;
}
.co-suite a:hover { color: var(--potomac-clair); text-decoration: underline; }
.co-suite .co-pupitre-marque {
  display: block;
  font-size: 0.6rem;
  color: var(--acier);
  margin-bottom: 0.2rem;
}

.co-pas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: var(--epaisseur-filet) solid var(--filet-acier);
  font-family: var(--marque-police);
  font-size: 0.82rem;
}
.co-pas a { text-decoration: none; border-bottom: 1px solid var(--filet-acier); }
.co-pas a:hover { border-bottom-color: var(--potomac-clair); }
.co-pas__vide { color: var(--acier); }

/* =========================================================================
   18. Ours (pied de page) : le pied qui prouve
   ========================================================================= */

.co-ours {
  margin-top: calc(var(--respiration) * 1.4);
  padding: 0 0 3rem;
  font-size: 0.92rem;
  color: var(--acier);
  background: var(--granit);
}
main { padding-top: 1.2rem; }
.co-ours .co-plateau { padding-top: 1.5rem; }
.co-ours .co-portee { margin-bottom: 1.8rem; }

.co-ours__nom {
  font-family: var(--titre-police);
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--craie);
  margin-bottom: 0.5rem;
}
.co-ours p { margin-bottom: 0.9rem; max-width: var(--mesure); }
.co-ours ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-family: var(--marque-police);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}
.co-ours a { color: var(--acier); text-decoration: none; border-bottom: 1px solid var(--filet-acier); }
.co-ours a:hover { color: var(--potomac-clair); border-bottom-color: var(--potomac-clair); }
.co-mention { font-size: 0.8rem; letter-spacing: 0.03em; }

/* =========================================================================
   19. Adaptations mobiles (sous la gouttiere)
   ========================================================================= */

@media (max-width: 63.99rem) {
  body {
    background:
      radial-gradient(90% 58% at 22% 0%, rgba(91, 147, 180, .075), transparent 62%),
      var(--nuit-salle);
  }
  .co-rampe img {
    -webkit-mask-image: radial-gradient(132% 118% at 50% 60%, #000 54%, transparent 86%);
            mask-image: radial-gradient(132% 118% at 50% 60%, #000 54%, transparent 86%);
  }
  .co-pupitre { box-shadow: 4px 4px 0 -1px var(--granit); }
  .co-appel { padding-inline: 1.2rem; }
  .co-intertitre { scroll-margin-top: 5.5rem; }
}

/* =========================================================================
   20. Impression
   ========================================================================= */

@media print {
  :root {
    --nuit-salle: #ffffff; --ardoise: #f4f4f4; --granit: #e0e0e0;
    --craie: #000000; --acier: #333333; --potomac: #1a1a1a;
    --potomac-clair: #1a1a1a; --cuivre: #444444;
    --filet-acier: #999999;
  }
  body { background: #ffffff; }
  .co-boussole, .co-suite, .co-pas, .co-evitement, .co-fil,
  .co-menu-declencheur, .co-renvoi-bloc { display: none; }
  .co-rampe img { filter: none; mask-image: none; -webkit-mask-image: none; }
}