/* numerodesecu : feuille de style du site, dans les codes d'un article de quotidien (titres et texte en serif de
   presse, rubriques en capitales, signature et légendes en linéale, filets fins), sur un papier froissé clair ;
   deux couleurs : rouge foncé (rubriques, repères) et bleu (liens, menu, chiffres). Polices libres (licence SIL OFL)
   hébergées ici : Newsreader (Production Type) et Libre Franklin. Aucune ressource externe. */
@font-face {
  font-family: "Newsreader";
  src: url("polices/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("polices/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("polices/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fond: #fdfcf9;
  --texte: #1a1a1a;
  --gris: #5c5a55;
  --filet: #ddd8cc;
  --encart: rgb(255 255 255 / 0.85);
  --rouge: #8e1b1e; /* rouge foncé : rubriques, repères */
  --bleu: #1d3f7a; /* bleu : liens, menu, chiffres, article en cours */
  --bleu-clair: #e6ecf6;
  --serif: "Newsreader", "Times New Roman", Georgia, serif;
  --lineale: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--serif);
  font-size: 1.1875rem; /* 19 px */
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
/* Papier froissé, fixe derrière la page (faible contraste) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--fond) url("papier-clair-paysage.jpg") center / cover no-repeat;
  pointer-events: none;
}
@media (orientation: portrait) {
  body::before { background-image: url("papier-clair-portrait.jpg"); }
}
img, video { max-width: 100%; height: auto; }
a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--rouge); }

/* Bandeau : titre du journal centré, filet double, rubriques en capitales */
header.site {
  max-width: 1340px;
  margin: 0 auto;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  text-align: center;
  border-bottom: 3px double var(--texte);
}
.marque {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.9rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--texte);
  text-decoration: none;
}
.marque span { font-style: italic; font-weight: 500; color: var(--rouge); }
.marque:hover { color: var(--texte); }
header.site nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 12px;
  padding: 9px 0 8px;
  border-top: 1px solid var(--filet);
  font-family: var(--lineale);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
header.site nav a { color: var(--bleu); text-decoration: none; }
header.site nav a:hover { color: var(--rouge); }

/* Page d'article : menu à gauche, article au centre, chiffres clés à droite */
.page-article {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  column-gap: 44px;
}
nav.sommaire {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 30px 18px 30px 0;
  border-right: 3px solid var(--bleu);
}
.titre-sommaire {
  font-family: var(--lineale);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 12px;
}
nav.sommaire ul, .sommaire-mobile ul { list-style: none; margin: 0; padding: 0; }
nav.sommaire li, .sommaire-mobile li { border-top: 1px solid var(--filet); }
nav.sommaire a, .sommaire-mobile a {
  display: block;
  padding: 10px 8px 11px 10px;
  margin-left: -10px;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte);
  text-decoration: none;
  border-left: 4px solid transparent;
}
nav.sommaire a .rubrique, .sommaire-mobile a .rubrique { display: block; font-size: 0.62rem; margin: 0 0 3px; }
nav.sommaire a:hover, .sommaire-mobile a:hover { color: var(--bleu); background: rgb(255 255 255 / 0.5); }
nav.sommaire a[aria-current="page"], .sommaire-mobile a[aria-current="page"] {
  border-left-color: var(--bleu);
  background: var(--bleu-clair);
  color: var(--bleu);
}
.sommaire-mobile { display: none; }

main.article {
  padding: 30px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(240px, 300px);
  column-gap: 44px;
  align-content: start;
}
main.article > * { grid-column: 1; }
main.article > aside.chiffres {
  grid-column: 2;
  grid-row: 1 / span 400;
  align-self: start;
  position: sticky;
  top: 24px;
  margin: 0;
}
.rubrique {
  font-family: var(--lineale);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rouge);
  margin: 0 0 10px;
}
h1, h2 { font-family: var(--serif); text-wrap: balance; color: var(--texte); }
h1 {
  font-size: clamp(1.95rem, 5.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 16px;
}
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 1.9em 0 0.5em; }
main.article > h2 { margin-top: 0.9em; }
main.article > h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--rouge);
  margin-bottom: 12px;
}
h3 { font-family: var(--lineale); font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: 1.6em 0 0.4em; color: var(--bleu); }
.chapo { font-size: 1.3rem; line-height: 1.45; font-weight: 400; color: #2b2b2b; margin: 0 0 20px; }
.signature {
  font-family: var(--lineale);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gris);
  margin: 0 0 26px;
  padding: 10px 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
p { margin: 0 0 1.1em; }
strong { font-weight: 700; }
sup.ref { font-family: var(--lineale); font-size: 0.62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; font-weight: 600; }
blockquote {
  margin: 1.5em 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--rouge);
  font-size: 1.3rem;
  line-height: 1.45;
  font-style: italic;
}
blockquote p { margin-bottom: 0.4em; }

/* Vidéo verticale, avec légende façon photo de presse */
figure.video { margin: 0 0 30px; display: grid; justify-items: center; gap: 8px; }
figure.video video { width: min(100%, 360px); aspect-ratio: 9 / 16; background: #000; display: block; }
figure.video figcaption {
  width: min(100%, 360px);
  font-family: var(--lineale);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gris);
  text-align: left;
}
figure.illustration { margin: 10px 0 30px; display: grid; justify-items: center; gap: 8px; }
figure.illustration img { width: min(100%, 520px); display: block; }
figure.illustration figcaption {
  width: min(100%, 520px);
  font-family: var(--lineale);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gris);
}
.bouton {
  display: inline-block;
  font-family: var(--lineale);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #fff;
  background: var(--bleu);
  padding: 9px 16px;
  margin: 2px 0 6px;
}
.bouton:hover { color: #fff; background: var(--rouge); }

/* Chiffres clés : colonne de droite, qui reste à l'écran pendant la lecture */
aside.chiffres {
  background: var(--encart);
  border-top: 4px solid var(--rouge);
  padding: 14px 20px 6px;
  margin: 30px 0;
  box-shadow: 0 1px 0 var(--filet);
}
aside.chiffres h2 {
  font-family: var(--lineale);
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rouge);
}
aside.chiffres ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
aside.chiffres li {
  font-family: var(--lineale);
  font-size: 0.86rem;
  line-height: 1.45;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--filet);
}
aside.chiffres li:last-child { border-bottom: 0; }
aside.chiffres li strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bleu);
  margin-bottom: 3px;
}

/* Encadré de texte, tableaux */
.encadre {
  background: var(--encart);
  border-left: 4px solid var(--bleu);
  padding: 14px 18px;
  margin: 26px 0;
  font-size: 1.05rem;
}
.encadre > :last-child { margin-bottom: 0; }
.tableau { overflow-x: auto; margin: 22px 0; }
table { border-collapse: collapse; width: 100%; font-family: var(--lineale); font-size: 0.86rem; line-height: 1.4; background: var(--encart); }
th, td { border-bottom: 1px solid var(--filet); padding: 8px 10px; text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--bleu); font-weight: 700; color: var(--bleu); }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; text-align: left; font-size: 0.78rem; color: var(--gris); padding-top: 6px; }

/* Sources et crédits, en pied d'article */
section.references, section.credits { font-family: var(--lineale); font-size: 0.82rem; line-height: 1.55; color: #333; }
section.references { margin-top: 44px; border-top: 3px solid var(--texte); }
section.references h2, section.credits h2 {
  font-family: var(--lineale);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rouge);
  margin: 14px 0 10px;
}
section.references h2::before, section.credits h2::before { display: none; }
section.references ol { padding-left: 1.5em; margin: 0; }
section.references li { margin-bottom: 0.5em; overflow-wrap: anywhere; }
section.references li:target { background: #fff3c4; }
section.credits { color: var(--gris); border-top: 1px solid var(--filet); margin-top: 24px; }

footer.site {
  max-width: 1340px;
  margin: 64px auto 0;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
  border-top: 3px double var(--texte);
  font-family: var(--lineale);
  font-size: 0.75rem;
  color: var(--gris);
  text-align: center;
}

/* Accueil : une « une » de quotidien */
main.accueil {
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}
.une {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  padding-bottom: 26px;
  border-bottom: 3px solid var(--bleu);
  color: var(--texte);
  text-decoration: none;
}
.une img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.une h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.1; margin: 4px 0 12px; }
.une p { font-size: 1.12rem; line-height: 1.5; color: #2b2b2b; margin: 0; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px 28px; margin-top: 24px; }
.carte { color: var(--texte); text-decoration: none; display: grid; align-content: start; gap: 6px; }
.carte img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: var(--encart); }
.carte h2 { font-size: 1.22rem; line-height: 1.2; margin: 2px 0 0; }
.carte p { font-size: 0.98rem; line-height: 1.45; color: var(--gris); margin: 0; }
.une:hover h2, .carte:hover h2 { color: var(--bleu); }

/* Écrans moyens : plus de menu latéral (menu repliable en haut de l'article) */
@media (max-width: 1180px) {
  .page-article { grid-template-columns: minmax(0, 1fr); }
  nav.sommaire { display: none; }
  .sommaire-mobile {
    display: block;
    margin: 18px 0 0;
    font-family: var(--lineale);
    border: 1px solid var(--filet);
    background: var(--encart);
  }
  .sommaire-mobile summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bleu);
  }
  .sommaire-mobile ul { padding: 0 14px 8px; }
  main.article { justify-self: center; width: 100%; max-width: 1024px; }
}
/* Petits écrans : une seule colonne, chiffres clés dans le fil de l'article */
@media (max-width: 900px) {
  main.article { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  main.article > aside.chiffres { grid-column: 1; grid-row: auto; position: static; margin: 30px 0; }
}
@media (max-width: 720px) {
  .une { grid-template-columns: 1fr; }
}

.carte .rubrique, .une .rubrique { color: var(--rouge); }

/* Pages simples (mentions légales) : une seule colonne centrée */
main.article.simple { grid-template-columns: minmax(0, 680px); justify-content: center; margin: 0 auto; }
main.article.simple h2::before { display: none; }
footer.site a { color: var(--gris); }

/* Réseaux de la chaîne : icônes dans le bandeau, ligne « Suivre » dans le pied de page */
header.site nav .reseaux {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-left: 22px;
  border-left: 1px solid var(--filet);
}
.reseaux a { display: inline-flex; width: 17px; height: 17px; color: var(--bleu); }
.reseaux a:hover { color: var(--rouge); }
.reseaux svg { width: 100%; height: 100%; fill: currentColor; }
.reseaux svg.trait { fill: none; stroke: currentColor; stroke-width: 2.2; }
.reseaux svg .plein { fill: currentColor; stroke: none; }
footer.site .suivre { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; color: var(--texte); }
footer.site .suivre a { color: var(--bleu); }