@charset "UTF-8";
/* =========================================================================
   reginaldsurin.com
   Registre : bulletin statistique. Blanc franc, encre vraie, filets d'un
   pixel, chiffres à chasse fixe. L'index Autopsie est un tableau de données.

   Le bleu #1F35F5 est réservé à l'interface (liens, libellés, navigation).
   Les six couleurs thématiques ne servent QUE dans l'index Autopsie. Elles
   occupent six teintes réparties sur la roue chromatique en laissant
   volontairement le bleu libre : aucune couleur de thème ne peut être
   confondue avec un lien.
   ========================================================================= */

/* ---------- Polices auto-hébergées. Aucun appel à un tiers. ----------
   Fraunces, en trois instances figées tirées de la fonte variable :

   FrauTitre  wght 700 · SOFT 50 · WONK 1 · opsz 120
              L'axe WONK incline le « g » et quelques terminaisons. C'est la
              signature du site. Réservé aux titres et au nom.
   Frau       wght 300 à 700 · SOFT 18 · WONK 0 · opsz 14
              Le wonk est coupé et la taille optique ramenée au labeur : ce qui
              fait caractère à 50 px devient gênant à 16 px.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "FrauTitre";
  src: url("../fonts/frau-titre.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Frau";
  src: url("../fonts/frau-texte.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Frau";
  src: url("../fonts/frau-texte-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
:root {
  --encre:      #0c0d10;
  --papier:     #ffffff;
  --gris:       #63666e;
  --gris-clair: #8b8e96;
  --filet:      #e3e5e9;
  --filet-pale: #f0f1f4;
  --signal:     #1f35f5;
  --signal-fonce: #1526bd;

  /* Le site est en noir, blanc et gris. Les six thèmes ne sont plus distingués
     par des teintes mais par six valeurs, réparties de l'encre au gris clair.
     L'intitulé est toujours écrit à côté : la valeur ne porte jamais seule
     l'information, elle sert à lire la barre de répartition d'un coup d'œil. */
  --t-securite:     #0c0d10;
  --t-monnaie:      #2f333b;
  --t-institutions: #4d515a;
  --t-marches:      #6c7079;
  --t-sciences:     #8b8f97;
  --t-societe:      #aaaeb5;

  --serif: "Frau", Georgia, "Times New Roman", serif;
  --titre: "FrauTitre", "Frau", Georgia, serif;
  /* Aucune chasse fixe. Tout le site tient dans une seule famille : les dates
     et les libellés sont du Fraunces en capitales espacées, avec les chiffres
     tabulaires activés pour que les colonnes s'alignent. */
  --appareil: "Frau", Georgia, serif;
  --sys:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle d'espacement. Sept valeurs, pas une de plus : c'est ce qui donne
     au site un rythme au lieu d'une suite de marges décidées au cas par cas. */
  --e1: 8px;
  --e2: 12px;
  --e3: 16px;
  --e4: 24px;
  --e5: clamp(26px, 3.2vw, 34px);
  --e6: clamp(30px, 4.4vw, 48px);
  --e7: clamp(40px, 6vw, 72px);

  --large: 1080px;
  --etroit: 680px;
  --marge: clamp(18px, 5vw, 46px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 16.5px/1.68 var(--serif);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

a { color: var(--signal); }
a:hover { color: var(--signal-fonce); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

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

/* L'attribut « hidden » doit l'emporter sur toute mise en page déclarée
   ailleurs. Sans cette ligne, une ligne de tableau passée en flex sur
   téléphone restait visible alors que la recherche l'avait masquée. */
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 34px 0; }

.evite {
  position: absolute; left: -9999px;
  background: var(--encre); color: #fff; padding: 10px 16px;
  font: 600 14px/1 var(--appareil); z-index: 99;
}
.evite:focus { left: 8px; top: 8px; }

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

/* ---------- Appareil : tout ce qui n'est pas du texte de lecture ---------- */
.meta, .barre, nav.principale, .libelle, .bouton, table th, .fil,
.sous, .hero-role, .hero-domaine, .hero-actions, .filtres a, .tableau .col-date,
.tableau .col-theme, .tableau .liens, .tableau caption,
.chiffres .l, .carte-kick, .carte-date, .manchette-kick, .manchette-appel,
.pied, .repartition .titre-bloc, .repartition .legende,
.portrait figcaption, .lettre .note, .lettre button {
  font-family: var(--appareil);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.libelle {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .15em;
  color: var(--gris); font-weight: 600;
}
.libelle::after { content: ""; flex: 1; height: 1px; background: var(--filet); }

/* =========================================================================
   En-tête
   ========================================================================= */
.entete { border-top: 3px solid var(--encre); }

.entete .rangee {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 28px; flex-wrap: wrap;
  padding: 20px 0 11px;
  border-bottom: 2px solid var(--encre);
}

.marque {
  font: 700 clamp(19px, 2.3vw, 24px)/1 var(--titre);
  letter-spacing: -.012em; text-decoration: none; color: var(--encre);
}
.marque:hover { color: var(--encre); }

nav.principale { display: flex; gap: clamp(11px, 1.7vw, 21px); flex-wrap: wrap; }
nav.principale a {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; color: var(--gris);
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
}
nav.principale a:hover { color: var(--encre); border-bottom-color: var(--filet); }
nav.principale a[aria-current="page"] { color: var(--signal); border-bottom-color: var(--signal); }

.barre {
  display: flex; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--filet);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .11em;
  color: var(--gris);
}
.barre a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filet); }
.barre a:hover { color: var(--signal); border-bottom-color: currentColor; }

/* =========================================================================
   Accueil
   Une page à trois poids : la manchette domine, le corpus chiffré et les
   cartes viennent après, les deux blocs de fin ferment. Rien n'est laissé au
   même niveau que son voisin, c'était le défaut de la première version.
   ========================================================================= */

/* Lien de continuation : souligné franc, jamais une flèche. Les flèches
   partout finissaient par ne plus rien signaler. */
.fil {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.fil:hover { color: var(--signal-fonce); }

/* ---------- Premier écran ---------- */
.hero {
  display: grid;
  /* Deux colonnes en proportion, pas une colonne fixe : avec une largeur figée
     pour le portrait, le texte se réduisait jusqu'à passer sous lui vers 900 px
     et le rapport s'inversait. En « fr », le rapport de 1,4 tient à toutes les
     largeurs, et le portrait garde un plafond pour ne pas devenir un poster. */
  grid-template-columns: 1.42fr minmax(0, 1fr);
  gap: var(--e6) var(--e7);
  align-items: center;
  padding: var(--e7) 0 var(--e6);
}
.hero-domaine {
  margin: 0 0 var(--e3);
  font: 600 11px/1 var(--appareil); text-transform: uppercase;
  letter-spacing: .18em; color: var(--gris);
}
.hero h1 {
  margin: 0 0 var(--e2);
  font: 700 clamp(42px, 6.4vw, 72px)/.98 var(--titre);
  letter-spacing: -.028em;
}
.hero-role {
  margin: 0 0 var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--filet);
  font: 600 12px/1.65 var(--appareil); text-transform: uppercase;
  letter-spacing: .12em; color: var(--gris);
}
.hero .chapeau {
  max-width: 54ch; margin: 0 0 var(--e5); padding: 0;
  font-size: clamp(17px, 1.4vw, 18.5px); line-height: 1.62;
}
.hero-actions { display: flex; align-items: center; gap: var(--e4) var(--e5); flex-wrap: wrap; margin: 0; }

.hero-photo { margin: 0; max-width: 380px; justify-self: end; width: 100%; }
.hero-photo img { width: 100%; height: auto; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: var(--e5); padding-top: var(--e5); }
  /* En colonne unique, le portrait se centre. Aligné à gauche ou à droite, il
     laissait une marge vide d'un seul côté qui déséquilibrait tout le haut. */
  .hero-photo { order: -1; max-width: 310px; justify-self: center; margin-inline: auto; }
  .hero-texte { text-align: center; }
  .hero-role { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--e4); }
  .hero .chapeau { text-align: left; margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero h1 { font-size: clamp(38px, 12vw, 52px); }
}

/* ---------- Manchette : la dernière chronique ---------- */
.manchette { margin: var(--e6) 0 0; }
.manchette > a {
  display: block; padding: var(--e6) var(--e6) var(--e6);
  background: var(--encre); color: var(--papier); text-decoration: none;
}
.manchette-kick {
  margin: 0 0 var(--e4);
  font: 600 11px/1.5 var(--appareil); text-transform: uppercase;
  letter-spacing: .15em; color: rgba(255, 255, 255, .62);
}
.manchette-kick .sep { margin: 0 9px; color: rgba(255, 255, 255, .32); }
.manchette h2 {
  margin: 0 0 var(--e4); max-width: 22ch;
  font: 700 clamp(30px, 4.4vw, 50px)/1.08 var(--titre); letter-spacing: -.024em;
  color: var(--papier);
}
.manchette-resume {
  margin: 0 0 var(--e5); max-width: 60ch;
  font-size: 17px; line-height: 1.62; color: rgba(255, 255, 255, .82);
}
.manchette-appel {
  display: inline-block; padding-bottom: 5px;
  border-bottom: 1.5px solid rgba(255, 255, 255, .45);
  font: 600 12px/1 var(--appareil); text-transform: uppercase; letter-spacing: .12em;
}
.manchette > a:hover .manchette-appel { border-bottom-color: var(--papier); }
.manchette > a:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- Le corpus en chiffres ---------- */
.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0; border-bottom: 1px solid var(--filet);
}
.chiffres > div {
  padding: var(--e5) var(--e4) var(--e5) 0;
  border-right: 1px solid var(--filet);
}
.chiffres > div:last-child { border-right: 0; }
.chiffres > div + div { padding-left: var(--e4); }
.chiffres .n {
  display: block; margin-bottom: 6px;
  font: 700 clamp(34px, 4.6vw, 52px)/1 var(--titre); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.chiffres .l {
  display: block; max-width: 18ch;
  font: 600 10.5px/1.45 var(--appareil); text-transform: uppercase;
  letter-spacing: .12em; color: var(--gris);
}
@media (max-width: 720px) {
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .chiffres > div:nth-child(2n) { border-right: 0; }
  .chiffres > div:nth-child(-n+2) { border-bottom: 1px solid var(--filet); }
  .chiffres > div:nth-child(odd) { padding-left: 0; }
  .chiffres > div:nth-child(even) { padding-left: var(--e4); }
}

/* ---------- Chroniques récentes ---------- */
.bloc-recentes { margin: var(--e7) 0 0; }
.tete-section {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e5);
  padding-bottom: var(--e3); border-bottom: 2px solid var(--encre);
}
.tete-section h2 {
  margin: 0; font: 700 20px/1.2 var(--titre); letter-spacing: -.016em;
}

.grille-cartes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.grille-cartes > li {
  padding: 0 var(--e5) var(--e5) 0;
  border-right: 1px solid var(--filet);
}
.grille-cartes > li:nth-child(3n) { border-right: 0; padding-right: 0; }
.grille-cartes > li:nth-child(n+4) {
  margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--filet);
}
.grille-cartes > li:nth-child(n+2) { padding-left: var(--e5); }
.grille-cartes > li:nth-child(3n+1) { padding-left: 0; }
.carte-kick {
  margin: 0 0 5px;
  font: 600 10px/1 var(--appareil); text-transform: uppercase;
  letter-spacing: .15em; color: var(--gris);
}
.carte-date {
  margin: 0 0 var(--e3);
  font: 500 12.5px/1 var(--appareil); color: var(--gris-clair);
}
.grille-cartes h3 { margin: 0 0 var(--e3); font: 700 19px/1.24 var(--titre); letter-spacing: -.016em; }
.grille-cartes h3 a { color: var(--encre); text-decoration: none; }
.grille-cartes h3 a:hover { color: var(--signal); }
.carte-resume {
  margin: 0; font-size: 14.5px; line-height: 1.56; color: #34373e;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .grille-cartes { grid-template-columns: repeat(2, 1fr); }
  .grille-cartes > li { border-right: 1px solid var(--filet); padding-right: var(--e5); }
  .grille-cartes > li:nth-child(2n) { border-right: 0; padding-right: 0; }
  .grille-cartes > li:nth-child(odd) { padding-left: 0; }
  .grille-cartes > li:nth-child(even) { padding-left: var(--e5); }
  .grille-cartes > li:nth-child(n+3) {
    margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--filet);
  }
}
@media (max-width: 560px) {
  .grille-cartes { grid-template-columns: 1fr; }
  .grille-cartes > li { border-right: 0; padding: 0 0 var(--e5); padding-left: 0 !important; }
  .grille-cartes > li:nth-child(n+2) {
    margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--filet);
  }
}

/* ---------- Deux blocs de fin : recherche, livre ---------- */
.deux-blocs {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  margin: var(--e7) 0 0; border-top: 2px solid var(--encre);
}
.deux-blocs .bloc { padding: var(--e6) var(--e6) var(--e6) 0; }
.deux-blocs .bloc + .bloc { padding: var(--e6); }
.deux-blocs .bloc h2 {
  margin: 0 0 var(--e4); font: 700 clamp(23px, 2.4vw, 29px)/1.16 var(--titre);
  letter-spacing: -.02em;
}
.deux-blocs .bloc h2 a { color: inherit; text-decoration: none; }
.deux-blocs .bloc h2 a:hover { color: var(--signal); }
.deux-blocs .bloc p { margin: 0 0 var(--e4); font-size: 15.5px; line-height: 1.6; }
.deux-blocs .bloc p:last-child { margin-bottom: 0; }

.miniatures { display: flex; gap: var(--e4); margin: 0 0 var(--e5); }
.miniatures img { width: 96px; height: auto; border: 1px solid var(--filet); }

.bloc-invers { background: var(--encre); color: var(--papier); }
.bloc-invers .libelle { color: rgba(255, 255, 255, .58); }
.bloc-invers .libelle::after { background: rgba(255, 255, 255, .22); }
.bloc-invers h2, .bloc-invers h2 a { color: var(--papier); }
.bloc-invers h2 a:hover { color: var(--papier); text-decoration: underline; text-underline-offset: 5px; }
.bloc-invers p { color: rgba(255, 255, 255, .82); }
.bloc-invers .fil { color: var(--papier); border-bottom-color: rgba(255, 255, 255, .45); }
.bloc-invers .fil:hover { border-bottom-color: var(--papier); }

@media (max-width: 820px) {
  .deux-blocs { grid-template-columns: 1fr; }
  .deux-blocs .bloc { padding: var(--e5) 0; }
  .deux-blocs .bloc + .bloc { padding: var(--e5); margin-top: var(--e2); }
}
/* =========================================================================
   Index Autopsie : tableau de données
   ========================================================================= */
.filtres { margin: 26px 0 0; }
.filtres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.filtres li { margin: 0 -1px -1px 0; }
.filtres a {
  display: block; text-decoration: none;
  padding: 9px 13px; border: 1px solid var(--filet);
  font: 600 12px/1 var(--appareil); text-transform: uppercase; letter-spacing: .07em;
  color: var(--gris); white-space: nowrap;
}
.filtres a:hover { color: var(--encre); border-color: var(--gris-clair); position: relative; z-index: 1; }
.filtres a[aria-current="page"] {
  color: var(--papier); background: var(--encre); border-color: var(--encre);
  position: relative; z-index: 2;
}
.filtres .compte { color: var(--gris-clair); margin-left: 7px; }
.filtres a[aria-current="page"] .compte { color: rgba(255,255,255,.6); }

.tableau { width: 100%; border-collapse: collapse; margin-top: 22px; }
.tableau caption { text-align: left; padding-bottom: 10px; font: 400 13px/1.5 var(--appareil); color: var(--gris); }
.tableau th {
  text-align: left; padding: 0 12px 8px 0;
  border-bottom: 2px solid var(--encre);
  font: 600 10.5px/1 var(--appareil); text-transform: uppercase; letter-spacing: .13em;
  color: var(--encre); white-space: nowrap;
}
.tableau th:last-child, .tableau td:last-child { text-align: right; padding-right: 0; }
.tableau td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--filet); vertical-align: baseline; }
.tableau tr:hover td { background: var(--filet-pale); }

.tableau .col-date { width: 108px; white-space: nowrap; font: 500 13px/1.5 var(--appareil); color: var(--gris); }
.tableau .col-theme { width: 1%; white-space: nowrap; font: 600 11px/1.5 var(--appareil);
  text-transform: uppercase; letter-spacing: .07em; }
.tableau .titre { font: 700 16.5px/1.4 var(--titre); letter-spacing: -.012em; }
.tableau .titre a { color: var(--encre); text-decoration: none; }
.tableau .titre a:hover { color: var(--signal); }
.tableau .resume { margin: 6px 0 0; font-size: 14.5px; line-height: 1.58; color: #34373e; max-width: 60ch; }
.tableau .liens { margin-top: 9px; display: flex; gap: 18px; flex-wrap: wrap; font: 600 12px/1 var(--appareil); }
.tableau .liens a { text-decoration: none; border-bottom: 1px solid var(--filet); padding-bottom: 3px; }
.tableau .liens a:hover { border-bottom-color: currentColor; }
.tableau .a-completer { color: var(--t-marches); border-bottom: 1px dotted currentColor; }

.puce {
  display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  vertical-align: 0; background: var(--gris-clair);
}

/* Le texte porte une couleur d'encre, jamais la couleur de série : plusieurs
   teintes de la palette ne passeraient pas le seuil de contraste du texte.
   C'est la pastille, à côté, qui porte l'identité. */
.th-securite     .puce, .puce.th-securite     { background: var(--t-securite); }
.th-monnaie      .puce, .puce.th-monnaie      { background: var(--t-monnaie); }
.th-institutions .puce, .puce.th-institutions { background: var(--t-institutions); }
.th-marches      .puce, .puce.th-marches      { background: var(--t-marches); }
.th-sciences     .puce, .puce.th-sciences     { background: var(--t-sciences); }
.th-societe      .puce, .puce.th-societe      { background: var(--t-societe); }

.th-securite, .th-monnaie, .th-institutions,
.th-marches, .th-sciences, .th-societe { color: var(--gris); }
.tableau .col-theme { color: #3a3d43; }

@media (max-width: 720px) {
  /* Le tableau se replie en fiches. La date et le thème remontent ensemble
     au-dessus du titre, quel que soit leur ordre dans le HTML. */
  .tableau, .tableau tbody, .tableau td { display: block; width: auto; }
  .tableau thead { position: absolute; left: -9999px; }
  .tableau caption { display: block; }
  .tableau tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
    padding: 15px 0; border-bottom: 1px solid var(--filet);
  }
  .tableau tr:hover td { background: none; }
  .tableau td { padding: 0; border: 0; }
  .tableau .col-date  { order: 1; width: auto; }
  .tableau .col-theme { order: 2; width: auto; text-align: left !important; }
  .tableau td:not(.col-date):not(.col-theme) { order: 3; flex: 1 0 100%; margin-top: 6px; }
  .tableau .titre { display: block; }
  .tableau .resume { max-width: none; }
}

/* =========================================================================
   Pages intérieures : registre « cahier », colonne étroite
   ========================================================================= */
.cahier { padding: clamp(34px, 6vw, 62px) 0 0; }
.cahier h1 {
  margin: 0 0 8px;
  font: 700 clamp(24px, 3.3vw, 32px)/1.2 var(--titre); letter-spacing: -.018em;
}
.cahier .sous {
  margin: 0 0 34px;
  font: 600 11.5px/1.5 var(--appareil); text-transform: uppercase; letter-spacing: .12em;
  color: var(--gris);
}
.cahier h2 {
  margin: 48px 0 14px;
  font: 700 19px/1.34 var(--titre); letter-spacing: -.014em;
}
.cahier h3 { margin: 30px 0 9px; font: 700 17px/1.38 var(--titre); letter-spacing: -.01em; }
.cahier p { margin: 0 0 17px; }
.cahier ul, .cahier ol { margin: 0 0 17px; padding-left: 20px; }
.cahier li { margin-bottom: 7px; }
.cahier .exergue {
  margin: 30px 0; padding: 20px 0 20px 22px;
  border-left: 2px solid var(--encre);
  font-size: 15px; line-height: 1.7; color: #2a2d34;
}
.cahier .exergue p:last-child { margin-bottom: 0; }
.cahier blockquote.exergue { margin-left: 0; margin-right: 0; }
.cahier .exergue .source {
  margin-top: 11px;
  font: 600 11px/1.5 var(--appareil); text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris-clair);
}

.avertissement {
  margin: 30px 0; padding: 20px 22px;
  border: 1px solid var(--filet); background: var(--filet-pale);
  font-size: 15.5px; line-height: 1.55;
}
.avertissement p:last-child { margin-bottom: 0; }
.avertissement .libelle { margin-bottom: 10px; }

.a-valider {
  background: #fff8e1; box-shadow: 0 0 0 1px #f0dfa8;
  padding: 0 3px;
}

/* Le portrait est en 4/5. Sa hauteur suit sa largeur : la déclaration
   « aspect-ratio » évite le sursaut de mise en page pendant le chargement,
   même si l'image tarde. */
/* Centré, à toutes les largeurs. Calé à gauche, il ouvrait un vide à droite
   que rien ne venait tenir : la colonne de texte commence en dessous, pas à
   côté. */
.portrait { margin: 0 auto var(--e6); max-width: 280px; }
.portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; border: 1px solid var(--filet);
}
.portrait figcaption {
  margin-top: 9px; text-align: center;
  font: 600 11px/1.5 var(--appareil);
  text-transform: uppercase; letter-spacing: .1em; color: var(--gris-clair);
}

@media (max-width: 620px) { .portrait { max-width: 62vw; } }

/* Publications */
.publication {
  padding: 24px 0; border-bottom: 1px solid var(--filet);
}
.publication:first-of-type { border-top: 2px solid var(--encre); }
.publication h3 { margin: 0 0 7px; font: 700 18px/1.36 var(--titre); letter-spacing: -.014em; }
.publication .meta { margin-bottom: 9px; }
.publication p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; }
.cahier h2 + .publication { border-top: 2px solid var(--encre); }

/* Fiche technique d'une publication : intitulé à gauche, valeur à droite */
.details { margin: 18px 0; font-size: 15px; line-height: 1.5; }
.details > div {
  display: grid; grid-template-columns: 132px 1fr; gap: 0 18px;
  padding: 8px 0; border-top: 1px solid var(--filet);
}
.details > div:last-child { border-bottom: 1px solid var(--filet); }
.details dt {
  font: 600 10.5px/1.75 var(--appareil); text-transform: uppercase; letter-spacing: .09em;
  color: var(--gris);
}
.details dd { margin: 0; }

.telechargements {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px 15px;
  margin: 18px 0 10px;
}
.telechargements .poids {
  font: 400 13.5px/1.5 var(--appareil); color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums;
}
.publication .note-fichier {
  margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--gris);
}

/* Couverture du rapport : le titre et le chapeau l'habillent, la fiche
   technique et les citations reprennent la pleine largeur en dessous. */
.publication .couverture {
  float: right; width: 178px; margin: 5px 0 18px 30px;
}
.publication .couverture img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--filet);
}
.publication .details { clear: right; }

@media (max-width: 560px) {
  .publication .couverture { width: 104px; margin-left: 18px; }
}

@media (max-width: 560px) {
  .details > div { grid-template-columns: 1fr; gap: 3px; }
  .details dt { line-height: 1.5; }
}

.bouton, a.bouton {
  display: inline-block; text-decoration: none;
  padding: 10px 17px; border: 1px solid var(--encre); background: transparent;
  color: var(--encre);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  cursor: pointer;
}
.bouton:hover, a.bouton:hover { background: var(--encre); color: var(--papier); }
.bouton[disabled] { opacity: .4; cursor: not-allowed; }

/* =========================================================================
   Newsletter
   ========================================================================= */
.lettre { margin: 46px 0 0; border: 1px solid var(--encre); padding: clamp(22px, 3.4vw, 32px); }
.lettre.simple { border: 0; border-top: 2px solid var(--encre); padding: 26px 0 0; }
.lettre .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.lettre.simple .grille { grid-template-columns: 1fr; gap: 18px; }
@media (max-width: 760px) { .lettre .grille { grid-template-columns: 1fr; gap: 18px; } }
.lettre h2, .lettre h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--titre); letter-spacing: -.016em; }
.lettre p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gris); }
.lettre form { display: flex; border: 1px solid var(--encre); }
.lettre input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--encre);
  padding: 12px 13px; font: 400 15px var(--sys);
}
.lettre input:focus { outline: 2px solid var(--signal); outline-offset: -2px; }
.lettre button {
  border: 0; border-left: 1px solid var(--encre);
  background: var(--encre); color: var(--papier);
  padding: 12px 18px; cursor: pointer;
  font: 600 12px var(--appareil); text-transform: uppercase; letter-spacing: .1em;
}
.lettre button:hover { background: var(--signal); }
.lettre .note { margin-top: 11px; font: 400 12px/1.5 var(--appareil); color: var(--gris-clair); letter-spacing: .01em; }

/* =========================================================================
   Pied de page
   ========================================================================= */
.pied {
  margin-top: 56px; border-top: 2px solid var(--encre);
  padding: 18px 0 44px;
  font: 400 12.5px/1.75 var(--appareil); color: var(--gris); letter-spacing: .01em;
}
.pied a { color: var(--gris); text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied a:hover { color: var(--signal); border-bottom-color: currentColor; }
.pied em { font-style: italic; }

/* =========================================================================
   Impression
   ========================================================================= */
@media print {
  nav.principale, .filtres, .lettre, .evite { display: none; }
  body { font-size: 11pt; }
  .tableau .titre a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a { color: #000; }
}

/* La lettre passe en colonne unique dans le gabarit étroit des pages intérieures. */
.etroit .lettre .grille { grid-template-columns: 1fr; gap: 18px; }

/* =========================================================================
   Répartition du corpus par thème
   Barre empilée proportionnelle. Chaque segment est un lien vers sa page de
   thème. Écart de 2 px entre segments, légende toujours présente, effectif
   écrit en toutes lettres : la couleur ne porte jamais seule l'information.
   ========================================================================= */
.repartition { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--filet); }
.repartition .titre-bloc {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
  font: 600 10.5px/1 var(--appareil); text-transform: uppercase; letter-spacing: .14em;
  color: var(--gris);
}
.repartition .barre-empilee {
  display: flex; gap: 2px; height: 26px; margin-bottom: 12px;
}
.repartition .barre-empilee a {
  display: block; min-width: 10px; text-decoration: none;
  transition: opacity .12s;
}
.repartition .barre-empilee a:hover { opacity: .68; }
.repartition .barre-empilee a:first-child { border-radius: 3px 0 0 3px; }
.repartition .barre-empilee a:last-child  { border-radius: 0 3px 3px 0; }

.repartition .legende {
  display: flex; flex-wrap: wrap; gap: 7px 26px;
  margin: 0; padding: 0; list-style: none;
  font: 500 12px/1.5 var(--appareil); letter-spacing: .01em;
}
.repartition .legende a {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--gris); white-space: nowrap;
}
.repartition .legende a:hover { color: var(--encre); }
.repartition .legende b { font-weight: 400; color: var(--encre); }
.repartition .legende .n { color: var(--gris-clair); }

/* Filtres : la pastille de couleur remplace la bordure teintée, le libellé
   reste en encre. */
.filtres a { display: flex; align-items: center; gap: 8px; }
.filtres a[aria-current="page"] .puce { outline: 1px solid rgba(255,255,255,.5); }

/* Filet de couleur en tête des pages de thème */
.cahier h1.avec-filet { padding-bottom: 10px; border-bottom: 3px solid var(--gris-clair); }
.cahier h1.f-securite     { border-bottom-color: var(--t-securite); }
.cahier h1.f-monnaie      { border-bottom-color: var(--t-monnaie); }
.cahier h1.f-institutions { border-bottom-color: var(--t-institutions); }
.cahier h1.f-marches      { border-bottom-color: var(--t-marches); }
.cahier h1.f-sciences     { border-bottom-color: var(--t-sciences); }
.cahier h1.f-societe      { border-bottom-color: var(--t-societe); }

.accroche {
  font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55;
  margin: 0 0 22px; max-width: 46ch;
}

.liens-doubles { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 0 !important; }
.liens-doubles a {
  font: 600 13px/1 var(--appareil); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}

/* Repli du bloc newsletter tant que Buttondown n'est pas branché */
.lettre-courriel { margin: 0 0 4px; }

/* =========================================================================
   Page de chronique : texte intégral
   Longueur de ligne tenue à 62 signes, hiérarchie franche, et surtout des
   tableaux qui ne se décousent jamais, y compris sur un téléphone.
   ========================================================================= */
/* Le raccourci « padding » remettait à zéro la marge latérale héritée de
   « .etroit » : sur téléphone, le texte des chroniques touchait le bord de
   l'écran. La marge est rétablie explicitement. */
.chronique { padding: clamp(30px, 5vw, 54px) var(--marge) 0; }

.fil-ariane {
  margin: 0 0 22px;
  font: 600 11.5px/1.5 var(--appareil);
  text-transform: uppercase; letter-spacing: .12em; color: var(--gris);
}
.fil-ariane a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filet); }
.fil-ariane a:hover { color: var(--signal); border-bottom-color: currentColor; }
.fil-ariane .sep, .signature .sep { color: var(--filet); margin: 0 8px; }

.chronique h1 {
  margin: 0 0 16px;
  font: 700 clamp(28px, 4.4vw, 42px)/1.12 var(--titre);
  letter-spacing: -.024em;
  text-wrap: balance;
}

.signature {
  margin: 0 0 26px; padding-bottom: 22px;
  border-bottom: 2px solid var(--encre);
  font: 500 12.5px/1.6 var(--appareil);
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-transform: uppercase; letter-spacing: .1em; color: var(--gris);
}
.signature .auteur { color: var(--encre); font-weight: 600; }
.signature a { color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--filet); }

/* La provenance, annoncée avant le texte. Discrète mais lisible : un filet
   fin la sépare de la signature sans en faire un encadré. */
.origine-tete {
  margin: 0 0 24px; padding: 10px 0 0;
  border-top: 1px solid var(--filet);
  max-width: 62ch;
  font: 400 14px/1.6 var(--appareil); color: var(--gris);
}
.origine-tete a {
  color: var(--encre); text-decoration: none;
  border-bottom: 1px solid var(--filet); padding-bottom: 1px;
}
.origine-tete a:hover { color: var(--signal); border-bottom-color: currentColor; }

.chapo {
  margin: 0 0 34px;
  font-size: clamp(18px, 1.6vw, 20px); line-height: 1.56;
  color: #2a2d34;
}

/* ---------- Le corps du texte ---------- */
.corps { font-size: 17.5px; line-height: 1.72; }
.corps > * { max-width: 62ch; }
.corps p { margin: 0 0 20px; }
.corps > p:first-child::first-letter {
  float: left; line-height: .82; padding: 4px 9px 0 0;
  font: 700 3.4em/1 var(--titre); color: var(--encre);
}
.corps h2 {
  margin: 46px 0 14px; padding-top: 22px; border-top: 1px solid var(--filet);
  font: 700 clamp(20px, 2.2vw, 25px)/1.28 var(--titre); letter-spacing: -.018em;
}
.corps h3 {
  margin: 34px 0 10px;
  font: 600 18px/1.34 var(--titre); letter-spacing: -.012em;
}
.corps h4 {
  margin: 28px 0 8px;
  font: 600 12px/1.4 var(--appareil);
  text-transform: uppercase; letter-spacing: .13em; color: var(--gris);
}
.corps ul, .corps ol { margin: 0 0 22px; padding-left: 22px; }
.corps li { margin-bottom: 9px; }
.corps li::marker { color: var(--gris-clair); }

.corps blockquote {
  margin: 30px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--encre);
  font-size: 17px; line-height: 1.62; color: #2b2e35;
}
.corps blockquote p:last-child { margin-bottom: 0; }
.corps blockquote cite {
  display: block; margin-top: 10px; font-style: normal;
  font: 500 12px/1.5 var(--appareil); text-transform: uppercase;
  letter-spacing: .1em; color: var(--gris);
}

.corps hr { max-width: 62ch; margin: 40px 0; border-top: 1px solid var(--filet); }
.corps a { text-decoration: none; border-bottom: 1px solid rgba(31,53,245,.3); }
.corps a:hover { border-bottom-color: currentColor; }
.corps strong { font-weight: 700; }
.corps code {
  font-size: .92em; background: var(--filet-pale);
  padding: 1px 5px; border: 1px solid var(--filet);
}

/* ---------- Tableaux de données ---------- */
.cadre-tableau {
  max-width: none; margin: 32px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
}
table.donnees {
  width: 100%; min-width: 100%; border-collapse: collapse;
  font-size: 15px; line-height: 1.45;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}
table.donnees thead th {
  position: sticky; top: 0; background: var(--papier);
  text-align: left; vertical-align: bottom;
  padding: 13px 18px 11px 0; border-bottom: 1px solid var(--encre);
  font: 600 11px/1.35 var(--appareil);
  text-transform: uppercase; letter-spacing: .09em; color: var(--encre);
  white-space: nowrap;
}
table.donnees td {
  padding: 11px 18px 11px 0; border-bottom: 1px solid var(--filet);
  vertical-align: baseline;
}
table.donnees tbody tr:last-child td { border-bottom: 0; }
table.donnees tbody tr:hover { background: var(--filet-pale); }
table.donnees th:last-child, table.donnees td:last-child { padding-right: 0; }
/* Markdown aligne les colonnes avec :--- et ---: ; les nombres suivent. */
table.donnees th[style*="right"], table.donnees td[style*="right"] { text-align: right; }
table.donnees th[style*="center"], table.donnees td[style*="center"] { text-align: center; }
table.donnees tbody th { font-weight: 600; text-align: left; white-space: nowrap; }

/* Une légende se met juste sous le tableau : ligne commençant par « Tableau » ou « Source » */
.legende-tableau, .cadre-tableau + p em:only-child {
  display: block; margin: -22px 0 32px;
  font: 400 13px/1.5 var(--appareil); color: var(--gris); font-style: normal;
}

@media (max-width: 620px) {
  .cadre-tableau { margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); }
  table.donnees { font-size: 14px; }
  table.donnees thead th, table.donnees td { padding-right: 14px; }
}


/* ---------- Formules ---------- */
.formule {
  max-width: none; margin: 28px 0; padding: 6px 0;
  overflow-x: auto; text-align: center;
}
.formule math { font-size: 1.12em; }
.corps math { font-size: 1.04em; }
.math-erreur { color: var(--t-securite); }

/* ---------- Figures ----------
   Les graphiques débordent un peu de la colonne de lecture : ils portent des
   axes et des étiquettes qu'une largeur de texte rendrait illisibles. Le débord
   est plafonné à la place disponible et disparaît sur petit écran. Le filet de
   fin court sur toute la largeur de l'image, alors que la légende, elle, garde
   une justification lisible. */
.corps figure {
  max-width: none; margin: 36px 0 34px;
  width: min(100vw - 2 * var(--marge), 800px);
  margin-inline: min(0px, calc((var(--etroit) - 2 * var(--marge) - 800px) / 2));
}
.corps figure a {
  display: block; border: 0; text-decoration: none;
  padding-bottom: 11px; border-bottom: 1px solid var(--filet);
}
.corps figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--filet); background: var(--papier);
}
.corps figure a:hover img { border-color: var(--gris); }
.corps figcaption {
  margin-top: 11px; max-width: 62ch;
  font: 400 13.5px/1.6 var(--appareil); color: var(--gris);
}

/* Sous cette largeur il n'y a plus de marge à mordre : la figure reprend
   simplement la colonne. Cette règle doit rester après celles ci-dessus,
   sinon la marge négative survit et la figure sort de l'écran par la gauche. */
@media (max-width: 860px) {
  .corps figure { width: 100%; margin-inline: 0; }
}

/* ---------- Notes de bas de page ---------- */
.footnote-ref a {
  border: 0; padding: 0 1px; font-size: .78em; vertical-align: super;
  font-weight: 600; text-decoration: none;
}
.footnotes {
  max-width: 62ch; margin: 48px 0 0; padding-top: 22px;
  border-top: 1px solid var(--filet);
  font-size: 14.5px; line-height: 1.6; color: #3a3d44;
}
.footnotes hr { display: none; }
.footnotes ol { padding-left: 20px; margin: 0; }
.footnotes li { margin-bottom: 10px; }
.footnotes li::marker { color: var(--gris-clair); font-size: .88em; }
.footnote-backref { border: 0; text-decoration: none; }

/* ---------- Après le texte ---------- */
.apres-texte { margin-top: 54px; }
.origine {
  padding: 22px 24px; border: 1px solid var(--filet); background: var(--filet-pale);
  font-size: 15px; line-height: 1.55;
}
.origine p { margin: 0 0 12px; }
.origine .liens-doubles { margin-bottom: 0; }

.voisines { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 34px 0 0;
  border-top: 2px solid var(--encre); }
@media (max-width: 620px) { .voisines { grid-template-columns: 1fr; } }
.voisines .voisine {
  display: block; padding: 18px 20px 20px 0; text-decoration: none; color: var(--encre);
  border-right: 1px solid var(--filet);
}
.voisines .voisine + .voisine { padding-left: 20px; border-right: 0; }
.voisines .voisine:only-child { border-right: 0; }
.voisines .sens {
  display: block; margin-bottom: 6px;
  font: 600 10.5px/1 var(--appareil); text-transform: uppercase;
  letter-spacing: .13em; color: var(--gris);
}
.voisines .voisine strong { font: 700 16px/1.36 var(--titre); letter-spacing: -.012em; }
.voisines .voisine:hover strong { color: var(--signal); }
.retour { margin: 30px 0 0; }

@media print {
  .fil-ariane, .voisines, .retour, .origine .liens-doubles { display: none; }
  .corps > * { max-width: none; }
  .cadre-tableau { overflow: visible; }
}

/* Repère d'un texte inédit dans l'index */
.marque-inedit {
  font: 600 10.5px/1 var(--appareil); text-transform: uppercase; letter-spacing: .1em;
  color: var(--papier); background: var(--encre); padding: 4px 7px;
}

/* =========================================================================
   Icônes
   Un seul dessin par symbole, défini en tête de page et rappelé par <use>.
   Le trait suit la couleur du texte, il n'y a donc rien à décliner.
   ========================================================================= */
.jeu-icones { position: absolute; width: 0; height: 0; overflow: hidden; }
.jeu-icones g {
  fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: butt; stroke-linejoin: miter;
}

/* =========================================================================
   Téléphone : la navigation passe sous le pouce
   La barre du bas remplace la liste de rubriques qui, en haut d'écran,
   se repliait sur deux lignes et n'offrait que 24 px à viser. Ce sont de
   vrais liens, sans script : la barre fonctionne dès le premier octet.
   ========================================================================= */
.rubrique-courante { display: none; }
.onglets { display: none; }

@media (max-width: 760px) {

  /* --- En-tête ramené à une ligne --- */
  .entete { border-top-width: 2px; }
  .entete .rangee {
    padding: 12px 0 11px; gap: 12px;
    align-items: center; flex-wrap: nowrap;
    border-bottom-width: 1px;
  }
  .marque { font-size: 18.5px; }
  nav.principale, .barre { display: none; }
  .rubrique-courante {
    display: block; margin: 0; text-align: right;
    font: 600 10.5px/1 var(--appareil); text-transform: uppercase;
    letter-spacing: .12em; color: var(--gris-clair); white-space: nowrap;
  }
  .rubrique-courante:empty { display: none; }

  /* --- Barre d'onglets --- */
  .onglets {
    display: grid; grid-template-columns: repeat(6, 1fr);
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    background: var(--papier);
    border-top: 1px solid var(--filet);
    box-shadow: 0 -10px 26px -18px rgba(12, 13, 16, .5);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .onglets a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; min-height: 56px; padding: 9px 1px 9px;
    text-decoration: none; color: var(--gris);
    font: 600 9px/1 var(--appareil); text-transform: uppercase; letter-spacing: .05em;
    -webkit-tap-highlight-color: transparent;
  }
  .onglets svg { width: 22px; height: 22px; }
  .onglets a[aria-current="page"] { color: var(--signal); }
  .onglets a[aria-current="page"]::before {
    content: ""; position: absolute; top: -1px; width: 26px; height: 2px;
    background: var(--signal);
  }
  .onglets a:active { background: var(--filet-pale); }

  /* La barre flotte au-dessus du contenu : le pied de page a besoin d'air. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* --- Zones tactiles --- */
  .filtres { margin-top: 20px; }
  .filtres ul {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filtres ul::-webkit-scrollbar { display: none; }
  .filtres li { flex: 0 0 auto; scroll-snap-align: start; }
  .filtres a { padding: 13px 15px; }

  .tableau tr { padding: 17px 0 18px; }
  .tableau .titre { font-size: 18px; line-height: 1.32; }
  /* Trois lignes de résumé suffisent à décider si l'on ouvre. Au-delà, l'index
     devient un mur de texte qu'on ne parcourt plus. */
  .tableau .resume {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tableau .liens { margin-top: 12px; gap: 8px 20px; }
  .tableau .liens a { padding: 6px 0 8px; }

  .voisines .voisine { padding: 20px 0; }
  .pied { padding-bottom: 26px; }
}

/* =========================================================================
   Repère de thème sur une chronique
   Un article sans photographie n'a pas à paraître nu : la couleur du thème
   le situe d'un coup d'œil, dans l'index comme sur sa propre page.
   ========================================================================= */
.chronique .fil-ariane { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.chronique .fil-ariane .puce { margin-right: 6px; vertical-align: -1px; }
.chronique h1 { position: relative; }
.chronique .bandeau-theme {
  height: 4px; margin: 0 0 20px; background: var(--gris-clair);
  width: min(100%, 220px);
}
.bandeau-theme.th-securite     { background: var(--t-securite); }
.bandeau-theme.th-monnaie      { background: var(--t-monnaie); }
.bandeau-theme.th-institutions { background: var(--t-institutions); }
.bandeau-theme.th-marches      { background: var(--t-marches); }
.bandeau-theme.th-sciences     { background: var(--t-sciences); }
.bandeau-theme.th-societe      { background: var(--t-societe); }

/* Retour en haut, au bout d'un long texte */
.remonter {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; text-decoration: none; color: var(--gris);
  font: 600 11px/1 var(--appareil); text-transform: uppercase; letter-spacing: .11em;
}
.remonter svg { width: 15px; height: 15px; }
.remonter:hover { color: var(--signal); }
.retour { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }

/* Bloc dépliable : une ligne cliquable, le détail à la demande. Élément natif,
   sans script, qui fonctionne au clavier comme au doigt. */
.accroche-index { margin: 0 0 4px; font-size: 17px; line-height: 1.6; }
.repli { margin: 0 0 8px; }
.repli > summary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 0; cursor: pointer; list-style: none;
  font: 600 11.5px/1 var(--appareil); text-transform: uppercase;
  letter-spacing: .11em; color: var(--signal);
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.repli[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.repli > summary:hover { color: var(--signal-fonce); }
.repli > p { margin: 0 0 15px; font-size: 15.5px; line-height: 1.62; color: #34373e; }
.repli > p:first-of-type { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .repli > summary::after { transition: none; } }

/* Fragments réservés aux écrans larges : sur téléphone, une ligne de sous-titre
   en capitales espacées qui se replie sur deux lignes coûte plus qu'elle
   n'apporte, l'information étant reprise juste en dessous. */
@media (max-width: 760px) { .sur-large { display: none; } }


/* =========================================================================
   Monochrome
   La couleur ne subsiste que pour l'interaction. Les pastilles de thème,
   devenues des valeurs de gris, ne gardent leur utilité que dans la barre de
   répartition, où elles servent de légende. Partout ailleurs, l'intitulé écrit
   fait le travail et le point en plus ne fait que du bruit.
   ========================================================================= */
.tableau .col-theme .puce,
.filtres .puce,
.chronique .fil-ariane .puce { display: none; }

.chronique .bandeau-theme,
.bandeau-theme.th-securite, .bandeau-theme.th-monnaie, .bandeau-theme.th-institutions,
.bandeau-theme.th-marches, .bandeau-theme.th-sciences, .bandeau-theme.th-societe {
  background: var(--encre);
}
.cahier h1.avec-filet, .cahier h1.f-securite, .cahier h1.f-monnaie,
.cahier h1.f-institutions, .cahier h1.f-marches, .cahier h1.f-sciences,
.cahier h1.f-societe { border-bottom-color: var(--encre); }

.tableau .a-completer { color: var(--gris); border-bottom-color: var(--gris-clair); }
.math-erreur { color: var(--encre); background: var(--filet-pale); }

/* Bouton plein : une seule action principale par page, elle se voit. */
.bouton-plein {
  background: var(--encre); color: var(--papier); border-color: var(--encre);
  padding: 14px 24px;
}
.bouton-plein:hover { background: var(--signal); border-color: var(--signal); color: var(--papier); }

/* =========================================================================
   Recherche dans l'index
   ========================================================================= */
.recherche { margin: var(--e5) 0 0; }
.recherche[hidden] { display: none; }
.recherche label {
  display: block; margin-bottom: var(--e2);
  font: 600 11px/1 var(--appareil); text-transform: uppercase;
  letter-spacing: .13em; color: var(--gris);
}
.recherche input {
  width: 100%; max-width: 460px;
  padding: 14px 16px;
  border: 1px solid var(--gris-clair); border-radius: 0;
  background: var(--papier); color: var(--encre);
  font: 400 16.5px/1.3 var(--serif);
  -webkit-appearance: none; appearance: none;
}
.recherche input::placeholder { color: var(--gris-clair); }
.recherche input:focus {
  outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal);
}
.recherche-etat {
  margin: var(--e2) 0 0; min-height: 1.4em;
  font: 500 13.5px/1.4 var(--appareil); color: var(--gris);
}


/* Une fiche d'index propose une action et deux renvois. Les trois avaient le
   même poids, ce qui revenait à n'en signaler aucune. */
.tableau .liens a[href^="/autopsie/"] {
  color: var(--encre); border-bottom: 1.5px solid var(--encre);
}
.tableau .liens a[href^="/autopsie/"]:hover { color: var(--signal); border-bottom-color: var(--signal); }
.tableau .liens a[href^="http"] {
  font-size: 11.5px; color: var(--gris); border-bottom-color: var(--filet);
}
.tableau .liens a[href^="http"]:hover { color: var(--signal); border-bottom-color: currentColor; }

/* =========================================================================
   Symboles de rubrique
   Le même dessin sert à trois échelles : quatorze pixels dans la barre du
   haut, vingt-deux dans les onglets du bas, trente-deux au-dessus du titre
   de la page. C'est ce qui fait qu'on le reconnaît d'un endroit à l'autre.
   ========================================================================= */
.ico-nav {
  width: 14px; height: 14px; margin-right: 7px;
  vertical-align: -2px; color: var(--gris-clair);
}
nav.principale a { display: inline-flex; align-items: center; }
nav.principale a:hover .ico-nav { color: var(--encre); }
nav.principale a[aria-current="page"] .ico-nav { color: var(--signal); }

.ico-page {
  width: 32px; height: 32px; margin: 0 0 var(--e3);
  color: var(--encre); display: block;
}
@media (max-width: 620px) { .ico-page { width: 27px; height: 27px; } }

/* =========================================================================
   Justification
   Le texte de lecture est justifié, comme dans un journal, mais seulement là
   où la ligne est assez longue pour l'accepter. En dessous d'environ soixante
   signes, et sans césure garantie, la justification creuse des blancs entre
   les mots et ouvre des lézardes verticales dans le paragraphe : le drapeau
   à droite est alors plus lisible. Le seuil est fixé à 620 px, largeur à
   laquelle la colonne atteint sa mesure maximale de 62 signes.

   La césure est demandée partout où elle s'applique. Elle s'appuie sur la
   langue déclarée dans la balise html, et sur « lang » pour les citations
   étrangères. Trois lettres au minimum de part et d'autre du tiret.
   ========================================================================= */
@media (min-width: 620px) {
  .corps p,
  .corps li,
  .chapo,
  .cahier > p,
  .cahier .exergue p,
  .repli > p,
  .accroche {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
}

/* Ce qui ne se justifie jamais : ce qui n'est pas de la lecture suivie. Une
   légende, un résumé coupé à trois lignes, un intitulé d'appareil justifié
   produit des blancs sans rien gagner. */
.corps figcaption,
.legende-tableau,
.tableau .resume,
.carte-resume,
.manchette-resume,
.recherche-etat,
.meta, .sous, .libelle {
  text-align: left;
  hyphens: manual;
}

/* =========================================================================
   Reprise mise en avant sur l'accueil
   Une citation, choisie, en grand. Ni fond inversé ni cadre : la manchette et
   le bloc du livre occupent déjà ce registre, un troisième aplat sombre ferait
   du bruit. Ici c'est la taille du texte et un filet épais qui portent.
   ========================================================================= */
.reprise { margin: var(--e7) 0 0; }
.reprise blockquote {
  margin: 0; padding: 0 0 0 var(--e5);
  border-left: 3px solid var(--encre);
}
.reprise blockquote > p {
  margin: 0 0 var(--e4); max-width: 46ch;
  font: 400 clamp(19px, 2.1vw, 25px)/1.42 var(--serif);
  font-style: italic; letter-spacing: -.005em;
}
.reprise footer {
  font: 400 13px/1.6 var(--appareil); color: var(--gris);
}
.reprise cite { font-style: normal; font-weight: 600; color: var(--encre); }
.reprise-langue { color: var(--gris-clair); }

.cite-dans {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
  margin: var(--e5) 0 0; padding: var(--e4) 0 0;
  border-top: 1px solid var(--filet);
  font: 600 11px/1.5 var(--appareil); text-transform: uppercase; letter-spacing: .13em;
}
.cite-dans > span { color: var(--gris-clair); margin-right: 4px; }
.cite-dans a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--filet); padding-bottom: 2px; }
.cite-dans a:hover { color: var(--signal); border-bottom-color: currentColor; }

@media (max-width: 620px) {
  .reprise blockquote { padding-left: var(--e4); }
}

/* L'auteur de la citation d'abord, la source ensuite : sans cela on peut
   croire que la phrase est du journaliste qui la rapporte. */
.reprise-qui { margin: 0 0 5px; }
.reprise-qui cite {
  font: 600 14px/1 var(--appareil); font-style: normal;
  text-transform: uppercase; letter-spacing: .1em; color: var(--encre);
}
.reprise-source { margin: 0; max-width: 62ch; }