/* Feuille de style du site. Copiée telle quelle dans public_html/assets/style.css.
   Titres et texte : Source Serif 4 (OFL). Interface et logotype : IBM Plex Sans (OFL). Toutes deux auto-hébergées. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/polices/ibm-plex-sans-regular-latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/polices/ibm-plex-sans-semibold-latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("/assets/polices/ibm-plex-sans-bold-latin1.woff2") format("woff2"); }

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/source-serif-4-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --encre: #111317;
  --texte: #1d2026;
  --gris: #555b65;
  --gris-clair: #666c76; /* 5,3:1 sur blanc, 4,8:1 sur --fond-doux (WCAG AA) */
  --filet: #dfe2e6;
  --fond-doux: #f3f4f6;
  --papier: #ffffff;
  --accent: #1840c4;
  --accent-fonce: #10308f;
  --alerte: #a8321e;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --largeur: 1240px;
  --largeur-texte: 690px;
  --marge: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  border-top: 5px solid var(--accent);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 8px; top: 8px; background: var(--encre); color: #fff; padding: 8px 12px; z-index: 10; font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
.conteneur-texte { max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }

/* ---------------------------------------------------------------- bandeau démo */
.bandeau-demo { background: #fff3c4; color: #5a4300; font: 600 14px/1.4 var(--sans); text-align: center; padding: 8px var(--marge); border-bottom: 1px solid #e8d48a; }
.marque-demo { display: inline-block; background: #fff3c4; color: #5a4300; border: 1px solid #e0c766; font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 5px; margin-right: 8px; vertical-align: 1px; }

/* ---------------------------------------------------------------- en-tête */
.entete-haut { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; font: 13px/1.3 var(--sans); color: var(--gris); }
.entete-date { margin: 0; }
.entete-liens { display: flex; gap: 18px; }
.entete-liens a { text-decoration: none; color: var(--gris); }
.entete-liens a:hover { color: var(--encre); text-decoration: underline; }
.entete-titre { display: flex; align-items: center; gap: 18px; padding-top: 4px; padding-bottom: 16px; }
/* Logotype : pavé outremer portant « L’ », puis le nom en Plex Sans gras resserré */
.logo { display: inline-flex; align-items: stretch; font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.045em; color: var(--encre); text-decoration: none; }
.logo-signe { background: var(--accent); color: #fff; padding: .1em .12em .08em .14em; margin-right: .08em; letter-spacing: -.02em; }
.logo-nom { padding: .1em 0 .08em; }
.signature { margin: 0; padding-left: 16px; border-left: 2px solid var(--filet); font: 600 12.5px/1.35 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); max-width: 12em; }
.nav-rubriques { border-top: 1px solid var(--encre); border-bottom: 1px solid var(--filet); }
.nav-rubriques ul { list-style: none; margin: 0 auto; display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.nav-rubriques ul::-webkit-scrollbar { display: none; }
.nav-rubriques a { display: block; padding: 12px 0 11px; font: 600 15px/1 var(--sans); color: var(--encre); text-decoration: none; border-bottom: 3px solid transparent; }
.nav-rubriques a:hover { border-bottom-color: var(--filet); }
.nav-rubriques { position: relative; }
.nav-rubriques::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events: none; }
.nav-rubriques a[aria-current] { border-bottom-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- composants communs */
.surtitre { margin: 0 0 8px; font: 700 12.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.surtitre a { text-decoration: none; }
.surtitre-rubrique { color: var(--accent); }
.surtitre-rubrique a:hover { text-decoration: underline; }
.surtitre-format { color: var(--gris); }
.surtitre-format::before { content: "·"; margin: 0 7px; color: var(--gris-clair); }

.titre-section { font: 800 13px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--encre); border-top: 3px solid var(--encre); padding-top: 10px; margin-bottom: 18px; }
.titre-section a { text-decoration: none; }
.titre-section a:hover { color: var(--accent); }
.bloc { margin-top: 48px; }

.carte-titre { font-family: var(--serif); font-weight: 650; letter-spacing: -.01em; color: var(--encre); }
.carte-titre a { text-decoration: none; }
.carte-titre a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.carte-chapeau { margin: 8px 0 0; color: var(--gris); }
.carte-date { margin: 8px 0 0; font: 13px/1.3 var(--sans); color: var(--gris); font-variant-numeric: tabular-nums; }
.carte-maj { color: var(--accent); }
.carte-image { display: block; }
.carte-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e9ebee; }

/* À la une */
.une { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 40px; margin-top: 28px; }
.une-seule { grid-template-columns: 1fr; }
.carte-une .carte-texte { margin-top: 16px; }
.carte-une .carte-titre { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.02em; }
.carte-une .carte-chapeau { font-size: 20px; line-height: 1.45; margin-top: 12px; max-width: 46em; }
.une-seule .carte-une { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.une-seule .carte-une .carte-texte { margin-top: 0; }
.une-seule .carte-une:not(:has(.carte-image)) { grid-template-columns: 1fr; max-width: 820px; }

/* Fil des dernières publications */
.fil { border-left: 1px solid var(--filet); padding-left: 28px; }
.carte-fil { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.carte-fil:last-child { border-bottom: 0; }
.carte-heure { font: 700 13.5px/1.5 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }
.carte-jour { display: block; font-weight: 400; color: var(--gris); font-size: 12px; }
.carte-rubrique { margin: 0 0 2px; font: 700 11.5px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.carte-fil .carte-titre { font-size: 17px; line-height: 1.3; font-weight: 600; }

/* Articles sans image : traitement typographique (filet de couleur, titre plus fort, chapeau) */
.carte-une.sans-image { border-top: 5px solid var(--accent); padding-top: 18px; }
.carte-une.sans-image .carte-texte { margin-top: 0; }
.carte-une.sans-image .carte-titre { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.025em; }
.carte-une.sans-image .carte-chapeau { font-size: 22px; max-width: 34em; }
.carte-secondaire.sans-image { border-top: 3px solid var(--encre); padding-top: 14px; }
.carte-secondaire.sans-image .carte-texte { margin-top: 0; }
.carte-secondaire.sans-image .carte-titre { font-size: 24px; }
.carte-secondaire.sans-image .carte-chapeau { font-size: 16.5px; line-height: 1.45; }
.une-seule .carte-une.sans-image { display: block; max-width: 900px; }

/* Grilles */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.carte-secondaire .carte-texte { margin-top: 12px; }
.carte-secondaire .carte-titre { font-size: 21px; line-height: 1.22; }
.liste { display: grid; gap: 0; }
.carte-liste { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--filet); }
.carte-liste .carte-image { order: 2; }
.carte-liste:not(:has(.carte-image)) { grid-template-columns: 1fr; }
.carte-liste .carte-titre { font-size: 24px; line-height: 1.2; }
.carte-liste .carte-chapeau { font-size: 17px; }

/* Fil d'Ariane */
.ariane { display: flex; gap: 8px; margin-bottom: 14px; font: 13px/1.3 var(--sans); color: var(--gris-clair); }
.ariane a { color: var(--gris); text-decoration: none; }
.ariane a:hover { color: var(--encre); text-decoration: underline; }
.article-sans-image .article-meta { border-bottom: 3px solid var(--encre); }

/* Encadré pratique (citation commençant par un titre) */
.encadre-pratique { margin: 1.8em 0; padding: 20px 24px 6px; background: #f2f5fd; border-top: 4px solid var(--accent); font-size: 17px; line-height: 1.55; }
.article-corps .encadre-pratique h2, .article-corps .encadre-pratique h3 { margin: 0 0 12px; font: 700 14px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-fonce); }
.article-corps .encadre-pratique p, .article-corps .encadre-pratique ol, .article-corps .encadre-pratique ul { margin: 0 0 .9em; }
.article-corps .encadre-pratique ol, .article-corps .encadre-pratique ul { padding-left: 1.3em; }
.article-corps .encadre-pratique li + li { margin-top: .5em; }
.article-corps .encadre-pratique li::marker { font: 700 15px var(--sans); color: var(--accent); }

/* Notre méthode */
.methode { background: var(--fond-doux); padding: 28px 32px; border-top: 3px solid var(--accent); }
.methode h2 { font: 800 13px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 12px; }
.methode p { margin: 0; max-width: 62em; font-size: 17px; }
.methode-liens { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px !important; font: 600 15px/1.4 var(--sans); }
.methode-liens a { color: var(--accent); }

/* Accueil avant les premières publications */
.ouverture { padding-top: 56px; padding-bottom: 8px; }
.ouverture > * { max-width: 860px; }
.ouverture-titre { font-family: var(--serif); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.025em; color: var(--encre); font-weight: 700; }
.ouverture-chapeau { font-size: 21px; line-height: 1.5; color: var(--gris); margin: 18px 0 0; max-width: 40em; }
.rubriques-presentation { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; margin: 0; }
.rubriques-presentation div { padding: 14px 0 16px; border-bottom: 1px solid var(--filet); }
.rubriques-presentation dt { font: 700 17px/1.3 var(--sans); color: var(--encre); }
.rubriques-presentation dd { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--gris); }

/* ---------------------------------------------------------------- article */
.article-entete { padding-top: 40px; }
.article-titre { font-family: var(--serif); font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; letter-spacing: -.022em; font-weight: 700; color: var(--encre); }
.article-chapeau { font-size: 21px; line-height: 1.45; color: #3b4048; margin: 16px 0 0; }
.article-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 22px; padding: 12px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); font: 14px/1.45 var(--sans); color: var(--gris); }
.article-meta p { margin: 0; }
.article-signature { font-weight: 700; color: var(--encre); }
.article-signature a { text-decoration: none; }
.article-signature a:hover { text-decoration: underline; }
.article-meta .article-transparence { flex: 1 0 100%; margin-top: 4px; padding-top: 8px; border-top: 1px dotted var(--filet); font-size: 13px; line-height: 1.5; color: var(--gris); }
.article-transparence a { color: var(--gris); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.article-transparence a:hover { color: var(--accent); }
.article-image { max-width: 1040px; margin: 28px auto 0; padding: 0 var(--marge); }
.article-image img { width: 100%; }
.article-image figcaption { margin-top: 8px; font: 13px/1.45 var(--sans); color: var(--gris); }
.credit { color: var(--gris-clair); }

.article-corps { padding-top: 28px; font-size: 19px; line-height: 1.65; }
.article-corps > p:first-child { margin-top: 0; }
.article-corps p, .article-corps ul, .article-corps ol { margin: 0 0 1.1em; }
.article-corps h2 { font: 700 25px/1.25 var(--serif); color: var(--encre); margin: 1.6em 0 .55em; letter-spacing: -.01em; }
.article-corps h3 { font: 700 15px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--encre); margin: 1.6em 0 .6em; }
.article-corps a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.article-corps a:hover { color: var(--accent-fonce); }
.article-corps li { margin-bottom: .35em; }
.article-corps blockquote { margin: 1.4em 0; padding: 0 0 0 20px; border-left: 3px solid var(--encre); font-style: italic; }
.article-corps code { font-size: .85em; background: var(--fond-doux); padding: 1px 4px; }
.article-corps pre { overflow-x: auto; background: var(--fond-doux); padding: 14px; font-size: 15px; }
.article-corps table { border-collapse: collapse; width: 100%; font: 15px/1.4 var(--sans); margin: 1.4em 0; }
.article-corps th, .article-corps td { border-bottom: 1px solid var(--filet); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; }
.article-corps th { border-bottom: 2px solid var(--encre); }
.article-corps .intro { font-size: 21px; line-height: 1.5; color: #3b4048; }
.en-bref { background: var(--fond-doux); padding: 18px 22px; margin: 0 0 1.6em; border-left: 3px solid var(--accent); }
.en-bref-titre { font: 800 13px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }
.en-bref-item { font-size: 17px; line-height: 1.5; padding: 4px 0; }
.encadre-marge { border-top: 2px solid var(--encre); border-bottom: 1px solid var(--filet); padding: 12px 0; margin: 1.6em 0; font-size: 17px; }
.encadre-titre { font: 700 14px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.figure-image { margin: 1.6em 0; }
.figure-legende { font: 13px/1.45 var(--sans); color: var(--gris); margin-top: 6px; }
.figure-credit { color: var(--gris-clair); margin-left: 4px; }
mark.a-completer { background: #fff0b3; color: #4d3a00; font: 600 15px/1.5 var(--sans); padding: 1px 4px; }

.article-pied { margin-top: 36px; font-family: var(--sans); }
.article-pied h2 { font: 800 13px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--encre); margin-bottom: 12px; }
.encart-corrections { border: 1px solid #e3c2bb; border-left: 4px solid var(--alerte); background: #fdf6f4; padding: 16px 20px; margin-bottom: 28px; font-size: 15px; line-height: 1.5; }
.encart-corrections h2 { color: var(--alerte); }
.encart-corrections ul { margin: 0; padding-left: 18px; }
.correction-date { font-weight: 700; }
.encart-note { margin: 10px 0 0; color: var(--gris); font-size: 14px; }
.sources { border-top: 3px solid var(--encre); padding-top: 12px; margin-bottom: 28px; }
.sources ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.45; }
.sources li { margin-bottom: 8px; }
.sources a { color: var(--accent); font-weight: 600; }
.source-url { display: block; color: var(--gris-clair); font-size: 13px; overflow-wrap: anywhere; hyphens: none; }
.sources a, .article-corps a { overflow-wrap: anywhere; hyphens: none; }
.etiquettes ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes a { display: inline-block; border: 1px solid var(--filet); padding: 5px 10px; font: 600 13.5px/1.2 var(--sans); text-decoration: none; color: var(--texte); }
.etiquettes a:hover { border-color: var(--encre); }
.article-signaler { font-size: 14px; color: var(--gris); margin: 0; }
.article-signaler a { color: var(--gris); }
.a-lire { margin-top: 56px; }

/* ---------------------------------------------------------------- listes, pages fixes, 404 */
.liste-entete { padding-top: 36px; }
.liste-entete h1 { font: 700 clamp(32px, 4vw, 44px)/1.1 var(--serif); letter-spacing: -.02em; color: var(--encre); }
.liste-description { font-size: 19px; color: var(--gris); margin: 10px 0 0; max-width: 44em; }
.liste-vide { font-size: 18px; color: var(--gris); border-top: 1px solid var(--filet); padding-top: 18px; }
.liste-vide a { color: var(--accent); }
.page-fixe { padding-top: 40px; }
.page-404 { padding-top: 56px; }
.page-404 a { color: var(--accent); }
.liste-rubriques-404 { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 24px 0 0; font: 600 16px/1.4 var(--sans); }

/* ---------------------------------------------------------------- pied de page */
.pied { margin-top: 64px; background: var(--encre); color: #c9ccd2; font: 14px/1.45 var(--sans); }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1.5fr 1.3fr 1.4fr; gap: 40px; padding-top: 30px; padding-bottom: 22px; }
.pied nav[aria-label="Le site"] ul { columns: 2; column-gap: 28px; }
.pied h2 { font: 800 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8b9099; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 4px; break-inside: avoid; }
.logo-pied { color: #fff; font-size: 26px; margin: 0 0 8px; }
.pied-marque p:last-child { margin: 0; max-width: 30em; }
.pied-bas { padding-bottom: 20px; font-size: 13px; color: #8b9099; }
.pied-bas p { margin: 0; border-top: 1px solid #2c3038; padding-top: 14px; }
.pied-bas a { color: #c9ccd2; text-decoration: underline; }

/* ---------------------------------------------------------------- adaptatif */
@media (max-width: 999px) {
  .une { grid-template-columns: 1fr; gap: 28px; }
  .fil { border-left: 0; padding-left: 0; }
  .une-seule .carte-une { grid-template-columns: 1fr; gap: 0; }
  .une-seule .carte-une .carte-texte { margin-top: 16px; }
  .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3e carte d'une grille de trois : pleine largeur, image à gauche (aucun article masqué) */
  .grille-3 > :nth-child(3):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .grille-3 > :nth-child(3):last-child .carte-texte { margin-top: 0; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .entete-haut { display: none; }
  .entete-titre { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .logo { font-size: 30px; }
  .signature { font-size: 10.5px; padding-left: 12px; }
  .nav-rubriques a { padding: 11px 0 10px; font-size: 14.5px; }
  .carte-une.sans-image .carte-chapeau { font-size: 18px; }
  .encadre-pratique { padding: 16px 18px 4px; margin-left: calc(-1 * var(--marge) / 2); margin-right: calc(-1 * var(--marge) / 2); }
  .nav-rubriques ul { gap: 20px; }
  .grille-3 { grid-template-columns: 1fr; gap: 24px; }
  .carte-secondaire { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; border-bottom: 1px solid var(--filet); padding-bottom: 20px; }
  .carte-secondaire .carte-image { order: 2; }
  .carte-secondaire .carte-image img { aspect-ratio: 1; }
  .carte-secondaire .carte-texte { margin-top: 0; }
  .carte-secondaire .carte-titre { font-size: 18px; }
  .carte-liste { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; }
  .carte-liste .carte-image img { aspect-ratio: 1; }
  .carte-liste .carte-titre { font-size: 19px; }
  .carte-liste .carte-chapeau { display: none; }
  .carte-une .carte-chapeau, .article-chapeau { font-size: 18px; }
  .article-entete { padding-top: 24px; }
  .article-image { padding: 0; }
  .article-image figcaption { padding: 0 var(--marge); }
  .article-corps { font-size: 18px; }
  .methode { padding: 22px 20px; }
  .pied-grille { grid-template-columns: 1fr; gap: 28px; }
}

/* Une sans image et sans fil (accueil avec très peu d'articles) : titre à gauche, chapeau et date à droite */
@media (min-width: 1000px) {
  .une-seule .carte-une.sans-image { max-width: none; }
  .une-seule .carte-une.sans-image .carte-texte { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-areas: "sur sur" "titre chap" "titre date"; column-gap: 48px; align-content: start; }
  .une-seule .carte-une.sans-image .surtitre { grid-area: sur; }
  .une-seule .carte-une.sans-image .carte-titre { grid-area: titre; }
  .une-seule .carte-une.sans-image .carte-chapeau { grid-area: chap; margin-top: 6px; font-size: 20px; border-left: 1px solid var(--filet); padding-left: 24px; }
  .une-seule .carte-une.sans-image .carte-date { grid-area: date; padding-left: 25px; margin-top: 12px; }
}

/* Articles associés sous une une sans image */
.une-associes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.une-associes .carte-secondaire:not(.sans-image) .carte-image img { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .une-associes { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; } }
@media (max-width: 640px) {
  .carte-secondaire.sans-image { display: block; }
  .carte-secondaire.sans-image .carte-chapeau { display: none; }
}
@media (min-width: 641px) and (max-width: 999px) {
  .carte-une .carte-titre { font-size: 38px; }
  .carte-une.sans-image .carte-titre { font-size: 44px; }
}

/* Mobile : un seul traitement des cartes secondaires (vignette carrée à droite), y compris sous la une */
@media (max-width: 640px) {
  .une-associes .carte-secondaire:not(.sans-image) .carte-image img, .colonne-une .carte-image img { aspect-ratio: 1; }
  .pied-grille { gap: 18px; padding-top: 24px; }
  .pied h2 { margin-bottom: 8px; }
  .pied ul { display: flex; flex-wrap: wrap; gap: 4px 18px; columns: auto; }
  .pied li { margin: 0; }
  .pied-marque p:last-child { display: none; }
}

/* Accueil avec peu d'articles : colonne de cartes à côté de la une */
.colonne-une { border-left: 1px solid var(--filet); padding-left: 28px; }
.carte-colonne { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--filet); }
.carte-colonne:last-child { border-bottom: 0; margin-bottom: 0; }
.carte-colonne .carte-texte { margin-top: 12px; }
.carte-colonne.sans-image { border-top: 3px solid var(--encre); padding-top: 14px; }
.carte-colonne.sans-image .carte-texte { margin-top: 0; }
.carte-colonne .carte-titre { font-size: 24px; line-height: 1.2; }
.carte-colonne .carte-chapeau { font-size: 16.5px; line-height: 1.45; }
@media (max-width: 999px) {
  .colonne-une { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .carte-colonne:not(.sans-image) { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; }
  .carte-colonne .carte-image { order: 2; }
  .carte-colonne:not(.sans-image) .carte-texte { margin-top: 0; }
  .carte-colonne .carte-titre { font-size: 20px; }
}

/* Rubrique : la une de rubrique, puis la liste */
.une-rubrique { margin-top: 8px; margin-bottom: 12px; padding-bottom: 28px; border-bottom: 1px solid var(--encre); }
.liste-page { font: 600 18px/1 var(--sans); color: var(--gris); letter-spacing: 0; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; padding-top: 4px; font: 600 15px/1.4 var(--sans); }
.pagination a { color: var(--accent); text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination-pos { color: var(--gris); font-weight: 400; margin: 0 auto; }

/* Temps de lecture (formats longs) */
.article-lecture { margin: 4px 0 0; font: 13.5px/1.4 var(--sans); color: var(--gris); }
.colonne-une .titre-section + .carte-colonne.sans-image { border-top: 0; padding-top: 0; }
.surtitre > .surtitre-format:first-child::before, .marque-demo + .surtitre-format::before { content: none; }
@media (min-width: 641px) { .pied nav[aria-label^="Rubriques"] ul { columns: 2; column-gap: 28px; } }

/* ---------------------------------------------------------------- 4e passe (critique n° 3) */
/* Textes d'appel des cartes : aucune troncature CSS (5e passe). Le texte est écrit pour la place
   (champ accroche:) ou coupé proprement par le générateur, en fin de phrase ou de mot. */

/* Échelle de titres unique : la une de l'accueil est toujours le plus gros titre du site */
.carte-une .carte-titre { font-size: clamp(28px, 3.6vw, 46px); }
.carte-une.sans-image .carte-titre { font-size: clamp(32px, 4.4vw, 54px); }
.liste-entete h1 { font-size: clamp(30px, 3.4vw, 40px); }
.une-rubrique .carte-une .carte-titre, .une-rubrique .carte-une.sans-image .carte-titre { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.12; }
.une-rubrique .carte-une .carte-chapeau { font-size: 18px; }
.une-seule .carte-une { align-items: start; }

/* Grilles adaptées au nombre de cartes */
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
@media (max-width: 640px) { .grille-2 { grid-template-columns: 1fr; } }

/* Page étiquette : faits sous le titre */
.liste-faits { margin: 10px 0 0; padding-bottom: 18px; border-bottom: 3px solid var(--encre); font: 14.5px/1.5 var(--sans); color: var(--gris); }
.liste-faits a { color: var(--accent); text-decoration: none; }
.liste-faits a:hover { text-decoration: underline; }

/* Visuel graphique (logo, pictogramme sur fond uni) : jamais en pleine une.
   Le titre mène, le visuel est posé dans un cadre de sa propre couleur de fond, sans recadrage ni retouche. */
.carte-image[style*="--fond-image"] { display: block; background: var(--fond-image); border: 1px solid var(--filet); }
.carte-une.image-graphique .carte-image img { object-fit: contain; background: transparent; padding: 6% 8%; }
@media (min-width: 1000px) {
  .carte-une.image-graphique { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; border-top: 5px solid var(--accent); padding-top: 18px; }
  .carte-une.image-graphique .carte-image { order: 2; }
  .carte-une.image-graphique .carte-image img { aspect-ratio: 4 / 3; }
  .carte-une.image-graphique .carte-texte { margin-top: 0; }
}
@media (max-width: 999px) {
  .carte-une.image-graphique .carte-image img { aspect-ratio: 21 / 9; padding: 3% 10%; }
}
.article-image-graphique { max-width: 800px; }
.cadre-graphique { background: var(--fond-image); border: 1px solid var(--filet); padding: 4% 6%; }
.cadre-graphique img { display: block; margin: 0 auto; max-height: 420px; width: auto; max-width: 100%; }
@media (min-width: 1000px) {
  .une-rubrique .carte-une.image-graphique { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); border-top: 0; padding-top: 0; }
  .une-rubrique .carte-une.image-graphique .carte-image img { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------- 5e passe (critique n° 4) */
/* Visuel pictogramme (image_type: pictogramme) : critique n° 13. Le logo garde ses couleurs d'origine,
   sans filtre ; le cadre prend la couleur de fond du visuel (--fond-image, posée par le générateur), si bien
   que chaque pictogramme a sa teinte et que l'image ne paraît jamais posée dans une boîte. La taille du logo
   est réglée dans le visuel source (40 à 50 % de la hauteur, scripts/composer-pictogramme.php) : aucune marge
   CSS ne la réduit. object-fit: contain : jamais de logo rogné, le fond prolonge l'image. */
.aplat { background: var(--fond-image, var(--fond-doux)); border: 0; outline: 1px solid rgba(0, 0, 0, .08); outline-offset: -1px; }
.aplat img { object-fit: contain; background: transparent; }
.carte-image.aplat img, .carte-une.image-graphique .carte-image.aplat img { padding: 0; }
.cadre-graphique.aplat { padding: 0; }
.carte-une.image-graphique { border-top: 0; padding-top: 0; }

/* Une de l'accueil : image pleine largeur de colonne au-dessus du titre */
.une .carte-une:not(.image-graphique) .carte-image img { aspect-ratio: 16 / 9; }
/* Une sur mobile (critique n° 11) : accroche à la place du chapeau, image un peu plus basse (2:1),
   pour que le premier écran laisse voir le début du fil. Le texte masqué est en display:none, donc
   absent aussi pour les lecteurs d'écran : pas de doublon. */
.chapeau-court { display: none; }
@media (max-width: 640px) {
  .carte-une .chapeau-long { display: none; }
  .carte-une .chapeau-court { display: block; }
  .une .carte-une:not(.image-graphique) .carte-image img { aspect-ratio: 2 / 1; }
}
.une-principale .index-rubriques { margin-top: 36px; }

/* Index des rubriques (sous la une, et en bas d'une rubrique courte) */
.index-rubriques ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; }
.index-rubriques li { display: block; padding: 12px 0 14px; border-bottom: 1px solid var(--filet); }
.index-rubrique-nom { display: inline-block; margin-bottom: 2px; font: 700 16px/1.3 var(--sans); color: var(--accent); text-decoration: none; }
.index-rubrique-nom:hover { text-decoration: underline; }
.index-rubrique-nombre { font: 13px/1.3 var(--sans); color: var(--gris); font-variant-numeric: tabular-nums; }
.index-rubrique-desc { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--gris); }

/* En-tête, écrans larges : dernière publication à droite du logotype */
.entete-derniere { display: none; }
@media (min-width: 1000px) {
  .entete-derniere { display: block; margin: 0 0 0 auto; max-width: 380px; padding-left: 18px; border-left: 1px solid var(--filet); }
  .entete-derniere-quand { display: block; font: 700 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
  .entete-derniere-heure { text-transform: none; letter-spacing: .02em; }
  .entete-derniere a { font: 600 14.5px/1.3 var(--serif); color: var(--encre); text-decoration: none; }
  .entete-derniere a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.entete-derniere { line-height: 1.3; }
/* Vignettes : le cadre (et l'aplat) épouse l'image, il ne s'étire pas sur la hauteur de la carte */
.carte-colonne .carte-image, .carte-secondaire .carte-image, .carte-liste .carte-image { align-self: start; }
@media (max-width: 999px) {
  /* L'index des rubriques double la navigation sur petit écran : il ne s'intercale pas avant « Aussi à la une » */
  .une-principale .index-rubriques { display: none; }
}
@media (max-width: 640px) {
  /* Mobile : cartes de colonne et secondaires réduites au titre et à la date, comme la liste */
  .carte-colonne:not(.sans-image) .carte-chapeau { display: none; }
}
@media (min-width: 641px) and (max-width: 999px) {
  /* Tablette : les deux cartes « Aussi à la une » côte à côte, pas deux images pleine largeur */
  .colonne-une { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .colonne-une .titre-section { grid-column: 1 / -1; }
  .carte-colonne { border-bottom: 0; margin-bottom: 0; }
  .carte-colonne .carte-titre { font-size: 21px; }
}
.article-image-graphique .cadre-graphique.aplat { padding: 0; }
.article-image-graphique .cadre-graphique.aplat img { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; }
@media (max-width: 640px) {
  /* La 3e carte d'une grille de trois garde la vignette carrée à droite sur mobile */
  .grille-3 > .carte-secondaire:nth-child(3):last-child { grid-column: auto; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; }
}

/* ---------------------------------------------------------------- 6e passe */
/* Ordinaux en exposant (1er, XXe siècle) sans écarter les lignes */
sup { font-size: .68em; line-height: 0; vertical-align: .5em; letter-spacing: .01em; }
/* Image d'article : 16:9 recadré (point d'intérêt : image_cadrage), le texte commence plus haut */
.article-image:not(.article-image-graphique) img { aspect-ratio: 16 / 9; object-fit: cover; background: #e9ebee; }
@media (min-width: 1000px) { .article-image:not(.article-image-graphique) { max-width: 1000px; margin-top: 24px; } }
.article-image figcaption .legende { color: var(--gris); }
.article-image figcaption .legende + .credit { margin-left: 6px; }
.article-image figcaption .credit { font-size: 12.5px; }
/* En-tête : la dernière publication tient sur deux lignes à 1280 px sans grandir l'en-tête */
@media (min-width: 1000px) {
  .entete-derniere { max-width: 470px; }
  .entete-derniere a { font-size: 14px; line-height: 1.32; }
}
/* Navigation des rubriques, petits écrans : la liste défile ; un fondu sur le bord droit, posé au-dessus
   du texte, montre qu'elle continue (le dernier lien garde une marge pour sortir du fondu en fin de course) */
.nav-rubriques::after { content: none; }
@media (max-width: 999px) {
  .nav-rubriques::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 64px; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.85) 55%, #fff); pointer-events: none; }
}
/* 641 à 999 px : intitulés courts (« Sciences »), les 8 entrées tiennent sans défilement (critique n° 16) */
@media (min-width: 641px) and (max-width: 999px) {
  .nav-rubriques .nav-suite { display: none; }
  .nav-rubriques ul { gap: 18px; }
}
@media (max-width: 640px) {
  .nav-rubriques ul { padding-right: 28px; }
  .nav-rubriques li:last-child { padding-right: 48px; }
  /* Cartes à vignette : le surtitre peut passer à la ligne, il ne touche jamais l'image */
  .carte-liste .carte-texte, .carte-secondaire .carte-texte, .carte-colonne .carte-texte { min-width: 0; }
  .carte-liste .surtitre, .carte-secondaire .surtitre, .carte-colonne .surtitre { font-size: 11.5px; letter-spacing: .05em; overflow-wrap: anywhere; }
  .carte-liste, .carte-secondaire, .grille-3 > .carte-secondaire:nth-child(3):last-child { column-gap: 18px; }
}
/* Écrans larges : image d'article en 2:1, un peu plus étroite que la page, pour que le texte remonte */
@media (min-width: 1000px) {
  .article-image:not(.article-image-graphique) { max-width: 960px; margin-top: 22px; }
  .article-image:not(.article-image-graphique) img { aspect-ratio: 2 / 1; }
  .article-image + .article-corps { padding-top: 24px; }
}

/* ---------------------------------------------------------------- 7e passe (critique n° 6) : accueil qui défile */
/* Fil illustré : heure | rubrique et titre | vignette */
.carte-fil:has(.vignette) { grid-template-columns: 52px minmax(0, 1fr) 112px; align-items: start; gap: 14px; }
.carte-fil .vignette { align-self: start; }
.carte-fil .vignette img { aspect-ratio: 4 / 3; }
.carte-fil .vignette.aplat img { padding: 0; }
@media (min-width: 1000px) { .carte-fil:has(.vignette) { grid-template-columns: 48px minmax(0, 1fr) 128px; } .carte-fil { padding: 14px 0; } }
@media (max-width: 640px) { .carte-fil:has(.vignette) { grid-template-columns: 44px minmax(0, 1fr) 96px; gap: 12px; } .carte-fil .carte-titre { font-size: 16.5px; } }

/* À suivre : l'article et ses prochaines échéances */
.suivi { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--filet); }
.suivi + .suivi { margin-top: 28px; }
.carte-suivi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.carte-suivi .carte-titre { font-size: 24px; line-height: 1.2; }
.carte-suivi .carte-chapeau { font-size: 16.5px; line-height: 1.45; }
.echeances { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--filet); }
.echeances li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; padding: 12px 0 14px; border-bottom: 1px solid var(--filet); }
.echeances li:first-child { padding-top: 0; }
.echeances li:last-child { border-bottom: 0; }
.echeances time { font: 600 14px/1.35 var(--sans); color: var(--gris); font-variant-numeric: tabular-nums; }
.echeance-jour { display: block; font: 700 30px/1 var(--sans); color: var(--accent); letter-spacing: -.02em; margin-bottom: 2px; }
.echeances p { margin: 0; font: 600 17px/1.4 var(--serif); color: var(--encre); }
@media (max-width: 999px) {
  .suivi { grid-template-columns: 1fr; gap: 24px; }
  .echeances { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .carte-suivi { grid-template-columns: 1fr; gap: 12px; }
  .echeances li { grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; }
  .echeance-jour { font-size: 26px; }
}

/* Modules par rubrique : grille de 3 (2 en tablette), une carte illustrée et ses suites */
.titre-modules { margin-top: 0; }
.modules-rubriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.module-rubrique { display: flex; flex-direction: column; }
.titre-module { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--filet); font: 700 16px/1.2 var(--sans); }
.titre-module a { color: var(--accent); text-decoration: none; }
.titre-module a:hover { text-decoration: underline; }
.carte-module .carte-texte { margin-top: 12px; }
.carte-module .carte-titre { font-size: 20px; line-height: 1.24; }
.carte-module .carte-chapeau { font-size: 15.5px; line-height: 1.45; }
.carte-module.sans-image .carte-titre { font-size: 23px; }
.module-suite { list-style: none; margin: 12px 0 0; padding: 0; }
.module-suite li { padding: 9px 0; border-top: 1px solid var(--filet); }
.module-suite a { font: 600 16px/1.3 var(--serif); color: var(--encre); text-decoration: none; }
.module-suite a:hover { text-decoration: underline; }
.module-lien { margin: auto 0 0; padding-top: 12px; font: 600 13.5px/1.3 var(--sans); }
.module-lien a { color: var(--gris); text-decoration: none; }
.module-lien a::after { content: " →"; }
.module-lien a:hover { color: var(--accent); }
@media (max-width: 999px) { .modules-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .modules-rubriques { grid-template-columns: 1fr; gap: 28px; }
  .carte-module:not(.sans-image) { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px 18px; }
  .carte-module .carte-image { order: 2; align-self: start; }
  .carte-module .carte-image img { aspect-ratio: 1; }
  .carte-module:not(.sans-image) .carte-texte { margin-top: 0; min-width: 0; }
  .carte-module .carte-chapeau { display: none; }
  .carte-module .carte-titre { font-size: 18.5px; }
}

/* Mention de production : version courte sur mobile (3 lignes au plus à 375 px) */
.mention-courte { display: none; }
@media (max-width: 640px) {
  .mention-longue { display: none; }
  .mention-courte { display: inline; }
  .article-meta .article-transparence { font-size: 12.5px; line-height: 1.45; }
}
.carte-suivi { display: block; border-left: 3px solid var(--accent); padding-left: 20px; }
.carte-suivi .carte-titre { font-size: 26px; }
@media (min-width: 1000px) { .carte-fil:has(.vignette) { grid-template-columns: 46px minmax(0, 1fr) 96px; } }
@media (max-width: 640px) { .carte-suivi { padding-left: 14px; } .carte-suivi .carte-titre { font-size: 21px; } }

/* ---- Critique n° 7 ---- */
/* Fil : colonne plus large sur grand écran, titres sur trois lignes au plus */
@media (min-width: 1000px) {
  .une { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 36px; }
  .carte-fil:has(.vignette) { grid-template-columns: 40px minmax(0, 1fr) 84px; gap: 12px; }
  .carte-fil .carte-titre { font-size: 16.5px; line-height: 1.28; }
}
.carte-appel { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--gris); }
/* Agenda « À suivre » : date, échéance, article lié */
.echeances.agenda { padding-left: 0; border-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 40px; }
.echeances.agenda li, .echeances.agenda li:first-child { padding-top: 12px; border-bottom: 1px solid var(--filet); }
.echeance-article { display: inline-block; margin-top: 4px; font: 600 14px/1.35 var(--sans); color: var(--accent); text-decoration: none; }
.echeance-article:hover { text-decoration: underline; }
@media (max-width: 640px) { .echeances.agenda { grid-template-columns: 1fr; } }
/* Rubriques : pas de case vide, le dernier bloc prend la place restante */
.modules-1 { grid-template-columns: 1fr; }
.modules-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) {
  .modules-rubriques > .module-rubrique:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .modules-rubriques > .module-rubrique:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@media (max-width: 999px) and (min-width: 641px) {
  .modules-rubriques > .module-rubrique:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Comprendre : liste typographique sans image, deux colonnes sur grand écran */
.comprendre-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.comprendre-liste .carte-texte { padding: 16px 0 18px; border-bottom: 1px solid var(--filet); }
.comprendre-liste .carte-titre { font-size: 22px; line-height: 1.22; }
@media (max-width: 640px) { .comprendre-liste { grid-template-columns: 1fr; } }
/* Sources : une ligne par source, domaine en ligne ; repli au-delà de six */
.sources-nombre { font-weight: 400; color: var(--gris); }
.sources li { margin-bottom: 5px; }
.source-url { display: inline; margin-left: 4px; }
.source-url::before { content: "· "; }
.sources-suite { margin-top: 4px; }
.sources-suite summary { cursor: pointer; display: inline-block; padding: 6px 0; font: 600 15px/1.4 var(--sans); color: var(--accent); }
.sources-suite summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sources-suite[open] summary { margin-bottom: 6px; }
/* Index des rubriques : une seule rangée jusqu'à cinq rubriques sur grand écran */
@media (min-width: 1000px) { .index-rubriques ul { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }

/* ---------------------------------------------------------------- 2e passe du cycle 5 (critique n° 8) */
/* Fil à 375 px : l'heure passe au-dessus, sur la ligne de la rubrique ; le titre gagne la colonne des heures */
@media (max-width: 640px) {
  .carte-fil, .carte-fil:has(.vignette) { position: relative; grid-template-columns: minmax(0, 1fr) 88px; gap: 14px; }
  .carte-fil:not(:has(.vignette)) { grid-template-columns: minmax(0, 1fr); }
  .carte-fil .carte-heure { position: absolute; top: 12px; left: 0; font-size: 11.5px; line-height: 1.4; }
  .carte-fil .carte-jour { display: inline; font-size: 11.5px; margin-right: .35em; }
  .carte-fil .carte-rubrique { padding-left: 4.6em; }
  .carte-fil:has(.carte-jour) .carte-rubrique { padding-left: 9.2em; }
  .carte-fil .carte-titre { font-size: 17px; line-height: 1.25; }
  .carte-fil .carte-appel { display: none; }
}
/* Fin d'article : sources en notes, lien fin (soulignement léger), plus discret que le corps */
.sources ol { font-size: 14.5px; line-height: 1.5; }
.sources a { font-weight: 400; color: var(--encre); text-decoration: underline; text-decoration-color: var(--filet); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sources a:hover { color: var(--accent); text-decoration-color: currentColor; }
.sources li::marker { color: var(--gris); font-variant-numeric: tabular-nums; }
/* Étapes passées masquées par le script client (critique n° 14) */
[hidden] { display: none !important; }
/* Agenda « À suivre » : un sujet par bloc, ses étapes datées dessous */
.agenda-sujets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 40px; }
.agenda-sujets > li { padding: 12px 0 14px; border-bottom: 1px solid var(--filet); }
/* La grille suit le nombre de sujets (critique n° 14) : jamais un sujet seul sur une ligne avec des
   colonnes vides. 2 et 4 : deux colonnes dès 641 px (4 = 2 × 2 : en quatre colonnes, la date et le
   libellé des étapes n'ont plus la place) ; 3 : trois colonnes dès 1000 px. */
@media (min-width: 641px) {
  .agenda-2, .agenda-3, .agenda-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-3 > li:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .agenda-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-3 > li:last-child { grid-column: auto; }
}
.agenda-titre { font: 700 18px/1.3 var(--serif); color: var(--encre); text-decoration: none; }
.agenda-titre:hover { text-decoration: underline; text-underline-offset: 3px; }
.agenda-etapes { list-style: none; margin: 8px 0 0; padding: 0; font: 15px/1.45 var(--sans); color: var(--texte); }
.agenda-etapes li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.agenda-etapes time { font-weight: 700; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Comprendre : reprise typographique, format en tête, accroche, sans image */
.comprendre .carte-texte { border-top: 0; }
.comprendre-liste .carte-chapeau { font-size: 16px; line-height: 1.5; color: var(--gris); margin-top: 6px; }
@media (min-width: 1000px) { .comprendre-liste .carte-titre { font-size: 24px; } }
/* En-tête : même hauteur sur l'accueil et les articles (le logo ne saute pas) ; la dernière publication
   tient sur une ligne, coupée proprement */
.entete-titre { min-height: 72px; box-sizing: border-box; }
@media (min-width: 1000px) {
  .entete-derniere { min-width: 0; flex: 0 1 470px; }
  /* Deux lignes au plus (critique n° 14) : le titre n'est jamais coupé dans un mot ; au-delà, coupe au
     dernier mot entier faite à la génération (titre_entete()). */
  .entete-derniere a { display: block; }
}
.comprendre-liste .carte-texte .carte-texte { border-bottom: 0; padding: 0; }

/* Une photo face au fil (critique n° 10, écart 4) : sur ordinateur, la colonne de la une s'aligne sur
   « Dernières publications ». L'image part du 16:9 et grandit pour combler la différence de hauteur,
   sans dépasser le 4:3 (75 % de la largeur de la colonne) ; recadrage object-fit + image_cadrage.
   Aucun contenu ajouté : pas de remplissage, pas de doublon d'article. */
@media (min-width: 1000px) {
  .une:not(.une-seule) .une-principale { display: flex; flex-direction: column; container-type: inline-size; }
  .une:not(.une-seule) .une-principale > .carte-une:not(.image-graphique):not(.sans-image) { flex: 1 1 auto; display: flex; flex-direction: column; }
  .une:not(.une-seule) .carte-une:not(.image-graphique):not(.sans-image) > .carte-image { flex: 1 1 auto; position: relative; aspect-ratio: 16 / 9; max-height: 75cqw; overflow: hidden; }
  .une:not(.une-seule) .carte-une:not(.image-graphique):not(.sans-image) > .carte-image picture { position: absolute; inset: 0; }
  .une:not(.une-seule) .carte-une:not(.image-graphique):not(.sans-image) > .carte-image img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}

/* « Prochaine étape » sous la une (critique n° 12) : une ligne sobre, filet fin, date en couleur
   d'accent comme dans « À suivre » ; pas de bandeau. */
.carte-etape { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--filet); font: 15px/1.45 var(--sans); color: var(--texte); max-width: 46em; }
.etape-libelle { display: inline-block; margin-right: .5em; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.carte-etape time { font-weight: 700; color: var(--accent); white-space: nowrap; }
.etape-sep { color: var(--gris); }
@media (max-width: 640px) {
  .carte-etape { margin-top: 10px; padding-top: 8px; font-size: 14px; line-height: 1.4; }
}
@media (min-width: 1000px) {
  .une-seule .carte-une.sans-image .carte-texte { grid-template-areas: "sur sur" "titre chap" "titre etape" "titre date"; }
  .une-seule .carte-une.sans-image .carte-etapes { grid-area: etape; margin-left: 25px; }
}
/* Comprendre : la grille suit le nombre de cartes (critique n° 12) : jamais de case vide.
   1 carte : une colonne ; 3 cartes : trois colonnes sur ordinateur ; nombre impair entre 641 et 999 px :
   la dernière prend toute la largeur. */
.comprendre-1 { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
@media (min-width: 1000px) { .comprendre-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; } }
@media (max-width: 999px) and (min-width: 641px) {
  .comprendre-3 > .carte:last-child { grid-column: 1 / -1; }
}
/* Une de rubrique (critique n° 12) : la règle « .une » sur deux colonnes (critique n° 7) écrasait
   « .une-seule » à partir de 1000 px, et la carte n'occupait que les deux tiers gauches.
   1 ou 2 articles : une pleine largeur, image et texte côte à côte ; 3 et plus : une + deux articles à droite. */
.une.une-seule { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .une-rubrique.une-seule .carte-une:not(.image-graphique):has(.carte-image) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .une-rubrique.une-seule .carte-une .carte-titre { font-size: clamp(30px, 2.6vw, 40px); }
  .une-rubrique.une-seule .carte-une .carte-chapeau { max-width: 34em; }
  .une-rubrique.une-seule .carte-une.image-graphique { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  /* Une à pictogramme face à deux articles : visuel en bandeau au-dessus du titre, pour que la colonne tienne */
  .une-avec-suite .carte-une.image-graphique { display: block; border-top: 0; padding-top: 0; }
  .une-avec-suite .carte-une.image-graphique .carte-image img { aspect-ratio: 16 / 9; padding: 0; }
  .une-avec-suite .carte-une.image-graphique .carte-texte { margin-top: 18px; }
  .une-avec-suite .une-suite { display: flex; flex-direction: column; gap: 24px; border-left: 1px solid var(--filet); padding-left: 36px; }
  .une-avec-suite .une-suite .carte-secondaire + .carte-secondaire { border-top: 1px solid var(--filet); padding-top: 22px; }
  .une-avec-suite .une-suite .carte-image img { aspect-ratio: 16 / 9; }
}
@media (max-width: 999px) {
  .une-avec-suite .une-suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 640px) {
  .une-avec-suite .une-suite { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .une-avec-suite .une-suite .carte-secondaire:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Titres (critique n° 13) : jamais de coupure d'un mot composé à son trait d'union (span.insec posé par
   titre_html()), lignes équilibrées sur les grands titres, pas de mot court orphelin sur les autres. */
.insec { white-space: nowrap; }
.carte-une .carte-titre, .article-titre { text-wrap-style: balance; }
.carte-titre, .agenda-titre { text-wrap-style: pretty; }
/* Une de rubrique sans liste dessous : pas de filet fin juste avant le filet épais de la section suivante */
.une-rubrique:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* ---------------------------------------------------------------- critique n° 15 */
/* Tablette : une grille de trois cartes reste sur trois colonnes étroites ; plus de 2 + 1 dans un autre format
   (la 3e carte en pleine largeur, image à gauche, se lisait comme deux cartes cassées). */
@media (min-width: 641px) and (max-width: 999px) {
  .grille-3:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .grille-3 > :nth-child(3):last-child { grid-column: auto; display: block; }
  .grille-3 > :nth-child(3):last-child .carte-texte { margin-top: 12px; }
  .grille-3:has(> :nth-child(3):last-child) .carte-titre { font-size: 18px; }
  .grille-3:has(> :nth-child(3):last-child) .carte-chapeau { display: none; }
}
/* Pas de filet fin sous le dernier article d'une liste : la section suivante ouvre sur un filet épais. */
.liste > .carte-liste:last-child { border-bottom: 0; }
/* « Aujourd'hui, 8 octobre » (script data-relatif) passe sur deux lignes dans la colonne de dates d'« À suivre » */
.agenda-etapes time[data-relatif] { white-space: normal; }