/* Le journal (blog.html, #articles), les pages de dossier, les archives des parus (blog/parus) et les pages d'article :
liée par les gabarits de blog-usine après main.css. Tout se lit sans script ; journal.js cherche et pose
html.sur-le-journal. */
/* ---- La page Blog : la scène garde l'encre de l'imprimerie (immeuble.css) ; le journal, l'appel et le pied prennent les
jetons du site, la barre et les boutons flottants aussi sur le journal (html.sur-le-journal) ou sans script.
Valeurs de main.css (jetons, html.a11y-contraste) : les garder alignées. ---- */
html[data-salle="imprimerie"] :is(#articles, .cta-final, main.etage ~ footer),
html.sur-le-journal[data-salle="imprimerie"] :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #ffffff; --bg-alt: #f5f5f7; --ink: #1d1d1f; --mute: #636366; --rule: #d2d2d7;
--accent: #14345f; --accent-hover: #1d477f; --navy: #0e2a4d; --sur-accent: #ffffff;
--nav-bg: rgba(255, 255, 255, 0.72); --card: #ffffff; --card-on-alt: #ffffff;
color-scheme: light;
}
html[data-salle="imprimerie"][data-theme="dark"] :is(#articles, .cta-final, main.etage ~ footer),
html.sur-le-journal[data-salle="imprimerie"][data-theme="dark"] :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #000000; --bg-alt: #161617; --ink: #f5f5f7; --mute: #86868b; --rule: #424245;
--accent: #8fb0e8; --accent-hover: #a9c4f0; --navy: #1b3a63; --sur-accent: #000000;
--nav-bg: rgba(22, 22, 23, 0.72); --card: #1d1d1f; --card-on-alt: #1d1d1f;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
html[data-salle="imprimerie"]:not([data-theme="light"]) :is(#articles, .cta-final, main.etage ~ footer),
html.sur-le-journal[data-salle="imprimerie"]:not([data-theme="light"]) :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #000000; --bg-alt: #161617; --ink: #f5f5f7; --mute: #86868b; --rule: #424245;
--accent: #8fb0e8; --accent-hover: #a9c4f0; --navy: #1b3a63; --sur-accent: #000000;
--nav-bg: rgba(22, 22, 23, 0.72); --card: #1d1d1f; --card-on-alt: #1d1d1f;
color-scheme: dark;
}
}
/* sans script, la barre et les boutons flottants aux couleurs du site (le thème vient du système) */
@media (scripting: none) {
html[data-salle="imprimerie"] :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #ffffff; --ink: #1d1d1f; --mute: #636366; --rule: #d2d2d7; --accent: #14345f; --accent-hover: #1d477f; --sur-accent: #ffffff;
color-scheme: light;
}
}
@media (scripting: none) and (prefers-color-scheme: dark) {
html[data-salle="imprimerie"] :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #000000; --ink: #f5f5f7; --mute: #86868b; --rule: #424245; --accent: #8fb0e8; --accent-hover: #a9c4f0; --sur-accent: #000000;
color-scheme: dark;
}
}
/* le contraste renforcé, comme sur une page hors du blog */
html.a11y-contraste[data-salle="imprimerie"] :is(#articles, .cta-final, main.etage ~ footer),
html.a11y-contraste.sur-le-journal[data-salle="imprimerie"] :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #ffffff; --bg-alt: #ffffff; --ink: #000000; --mute: #1a1a1a; --rule: #000000; --bord-controle: #000000;
--accent: #0000a8; --accent-hover: #000080; --nav-bg: rgba(255, 255, 255, 0.97); --card: #ffffff; --card-on-alt: #ffffff;
}
html.a11y-contraste[data-salle="imprimerie"][data-theme="dark"] :is(#articles, .cta-final, main.etage ~ footer),
html.a11y-contraste.sur-le-journal[data-salle="imprimerie"][data-theme="dark"] :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #000000; --bg-alt: #000000; --ink: #ffffff; --mute: #f0f0f0; --rule: #ffffff; --bord-controle: #ffffff;
--accent: #ffd60a; --accent-hover: #ffe45c; --nav-bg: rgba(0, 0, 0, 0.97); --card: #000000; --card-on-alt: #000000;
}
@media (prefers-color-scheme: dark) {
html.a11y-contraste[data-salle="imprimerie"]:not([data-theme="light"]) :is(#articles, .cta-final, main.etage ~ footer),
html.a11y-contraste.sur-le-journal[data-salle="imprimerie"]:not([data-theme="light"]) :is(#nav, .a11y-bouton, .retour-ascenseur) {
--bg: #000000; --bg-alt: #000000; --ink: #ffffff; --mute: #f0f0f0; --rule: #ffffff; --bord-controle: #ffffff;
--accent: #ffd60a; --accent-hover: #ffe45c; --nav-bg: rgba(0, 0, 0, 0.97); --card: #000000; --card-on-alt: #000000;
}
}
html[data-salle="imprimerie"] :is(#articles, .cta-final, main.etage ~ footer), html.sur-le-journal #nav { color: var(--ink); }
html[data-salle="imprimerie"] .cta-final.etage-contenu { background: var(--bg-alt); }
/* la barre pleine, sans voile ni flou, sur le journal comme sur une page de lecture ; en entrant sur le journal, elle
change de couleurs d'un coup (sans les transitions de main.css, qui la laissaient d'encre une demi-seconde) */
:is(body.lecture, .sur-le-journal) .nav { border-bottom-color: var(--rule); }
:is(body.lecture, .sur-le-journal) .nav::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sur-le-journal .nav, .sur-le-journal .nav::before, .sur-le-journal .nav-menu a { transition: none; }
/* arrivée directe sur la liste (blog.html#articles) : la barre prend les couleurs du site sans passer par l'encre de la scène */
html:has(#articles:target) :is(.nav, .nav::before, .nav-menu a, .nav-cta) { transition: none; }
@media (scripting: none) {
html[data-salle="imprimerie"] #nav { color: var(--ink); border-bottom-color: var(--rule); }
html[data-salle="imprimerie"] #nav::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root .journal-recherche { display: none; }
}
/* ---- L'arrivée par blog.html#articles : le haut du journal au bas de la barre (53 px), avec le scroll-padding-top de
68 px de main.css (section 18) : 53 - 68 = -15 px, l'un suit l'autre ; en 3D (sans scroll-padding), 53 px.
Pendant une recherche, le journal garde la hauteur de l'écran : la page ne remonte pas vers la scène. ---- */
html[data-salle="imprimerie"] #articles { scroll-margin-top: 53px; }
html[data-salle="imprimerie"]:not(.accueil-3d) #articles { scroll-margin-top: -15px; }
/* l'arrivée se fait d'un coup : la page ne défile pas à travers la scène */
html[data-salle="imprimerie"]:has(#articles:target) { scroll-behavior: auto; }
html[data-salle="imprimerie"] #articles:has(.journal-resultats:not([hidden])) { min-height: calc(100vh - 53px); }
/* ---- Le journal à plat : un conteneur de 980 px ---- */
#articles.etage-contenu { padding-top: 56px; }
#articles.etage-contenu > * { max-width: calc(var(--container) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.p-surtitre, .bloc-etiquette, .bloc-surtitre, .journal-groupe {
display: block; margin: 0 0 8px; color: var(--mute); font-size: var(--text-sm); font-weight: 600; line-height: 1.4; letter-spacing: normal;
}
/* la tête : le titre (que la scène imprime) et la date de la dernière parution ; à droite, la recherche et le compte */
.journal-tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 32px; }
@media (min-width: 1024px) { .journal-tete { grid-template-columns: minmax(0, 1fr) 20rem; } }
#articles .section-head { max-width: 40rem; margin: 0; }
#articles .section-head h2 { margin: 0 0 12px; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em; }
#articles .section-head h2::after { content: none; }
#articles .section-head p { line-height: 1.45; }
.journal-edition, .dossier-edition { margin: 12px 0 0; color: var(--mute); font-size: var(--text-sm); }
/* la recherche : une pilule de 48 px, sa place tenue dès le HTML ; un seul anneau au focus */
.journal-recherche { display: grid; gap: 8px; }
.journal-recherche label { color: var(--mute); font-size: var(--text-sm); font-weight: 600; }
.journal-recherche input {
width: 100%; height: 48px; padding: 0 20px; font: inherit; font-size: var(--text-base); color: var(--ink);
background: var(--card); border: 1px solid var(--bord-controle); border-radius: var(--r-pill); -webkit-appearance: none; appearance: none;
}
.journal-recherche input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-pill); }
.journal-compte { margin: 8px 0 0; color: var(--mute); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
/* ---- Les onglets : des liens ; le courant souligné d'une bordure (couleurs forcées) ; au téléphone, la barre défile
(journal.js y ramène le courant). Elle coupe ce qui la dépasse : 4 px de marge intérieure, repris par des
marges négatives, logent l'anneau du focus ; son filet bas est un fond. ---- */
.journal-onglets {
display: flex; gap: 20px; margin: -4px -4px 37px; padding: 4px; scroll-padding-inline: 24px;
background: linear-gradient(var(--rule), var(--rule)) 4px calc(100% - 3px) / calc(100% - 8px) 1px no-repeat;
overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
#articles.etage-contenu > .journal-onglets { max-width: none; margin-inline: max(-4px, (100% - var(--container)) / 2 + var(--gutter) - 4px); }
.journal-onglets::-webkit-scrollbar { display: none; }
.journal-onglets a { flex: none; display: flex; align-items: center; height: 44px; padding-bottom: 3px; color: var(--mute); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.journal-onglets a:hover { color: var(--ink); }
.journal-onglets [aria-current] { padding-bottom: 0; color: var(--ink); border-bottom: 3px solid var(--accent); }
.journal-onglets .onglet-metier { position: relative; margin-left: 20px; }
.onglet-metier::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: -20px; border-left: 1px solid var(--rule); }
/* ---- Le contenu du journal : la une, les situations, les derniers parus, les outils, les dossiers ---- */
.journal-contenu > section { margin-top: 56px; padding-top: 12px; border-top: 2px solid var(--ink); }
.journal-contenu > section:first-child { margin-top: 0; }
:is(.une-titre, .paru-titre, .fiche-titre, .resultat-titre) { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
:is(.une-titre, .paru-titre, .fiche-titre, .resultat-titre, .journal-bloc-titre) a, .journal-situations-liste a, .dossier-sommaire a { color: var(--ink); }
:is(.une-titre, .paru-titre, .fiche-titre, .resultat-titre, .journal-bloc-titre) a:hover, :is(.journal-situations-liste, .dossier-sommaire) a:hover .situation-titre, .journal-outils-liste a:hover {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}
:is(.une-meta, .paru-meta, .fiche-meta, .resultat-meta, .journal-lecture) { margin: 6px 0 0; color: var(--mute); font-size: var(--text-sm); line-height: 1.5; }
:is(.une-meta, .paru-meta, .fiche-meta, .resultat-meta) > * { display: inline-block; }
:is(.une-meta, .paru-meta, .fiche-meta, .resultat-meta) > :not(:last-child)::after, .journal-bloc .journal-lecture-duree::before { content: "·" / ""; margin: 0 0.5em; }
:is(.une-chapeau, .fiche-chapeau, .resultat-desc) {
margin: 6px 0 0; color: var(--mute); font-size: var(--text-base); line-height: 1.5;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* la une : l'article en grand sur toute la largeur, les trois autres dessous (en trois colonnes au bureau, sans chapeau au téléphone) */
.journal-une { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 0; }
.une-titre { font-weight: 700; }
.une-principale .une-titre { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; }
.une-principale .une-chapeau { display: block; margin-top: 12px; font-size: 1.1875rem; }
.une-principale { max-width: 46rem; }
.une-secondaires { padding-top: 20px; border-top: 1px solid var(--rule); }
.une-secondaire + .une-secondaire { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); }
@media (min-width: 1024px) {
.une-secondaires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.une-secondaire + .une-secondaire { margin-top: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--rule); }
}
@media (max-width: 719px) { .une-secondaire .une-chapeau { display: none; } }
/* par situation : deux colonnes, des lignes de 48 px */
.journal-situations { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
@media (min-width: 720px) { .journal-situations { grid-template-columns: 1fr 1fr; } .journal-situations > .p-surtitre { grid-column: 1 / -1; } }
.journal-situations-liste, .journal-parus-liste, .journal-outils-liste, .dossier-sommaire ol, .dossier-fiches, .journal-resultats { margin: 0; padding: 0; list-style: none; }
.journal-situations-liste a {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0;
border-top: 1px solid var(--rule); font-size: var(--text-base); font-weight: 500; line-height: 1.35;
}
.situation-nombre, .situation-chevron { color: var(--mute); font-size: var(--text-sm); font-weight: 400; font-variant-numeric: tabular-nums; }
/* les derniers parus : la date à gauche au bureau, au-dessus du titre au téléphone */
.journal-paru, .journal-resultat, .journal-outils-liste li { padding: 16px 0; border-top: 1px solid var(--rule); }
.journal-paru:first-child { border-top: 0; }
.paru-date { margin: 0; color: var(--mute); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.8; }
@media (min-width: 720px) {
.journal-paru { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); column-gap: 24px; }
.paru-date { grid-row: 1 / 3; }
}
/* la pagination : des pilules de 44 px ; la courante en encre, soulignée, sans fond ; les numéros autour de la courante,
la première et la dernière, un « … » pour les autres (sync.js) : deux lignes au plus à 390 px */
.journal-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; font-size: var(--text-sm); }
.journal-pagination[hidden] { display: none; }
.journal-pages { display: contents; }
.journal-pages li { list-style: none; }
.journal-pages-saut { color: var(--mute); }
.journal-pages a, .journal-page-voisine {
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-pill); font-variant-numeric: tabular-nums;
}
.journal-pages a:hover, .journal-page-voisine:hover { border-color: var(--ink); }
.journal-pages [aria-current] { font-weight: 600; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; }
/* l'encart des outils, seulement quand une fiche en porte un */
.journal-outils-liste a { font-weight: 600; }
.outil-dossier { display: block; color: var(--mute); font-size: var(--text-sm); }
/* les dossiers : un bloc par dossier, sa tête à gauche, ses quatre fiches à droite (les li.produit que la scène lit) */
.journal-groupe-dossiers + .journal-groupe-dossiers { margin-top: 40px; }
.journal-bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 48px; padding: 24px 0; border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .journal-bloc { grid-template-columns: 15rem minmax(0, 1fr); } }
.journal-bloc-titre { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.journal-bloc-desc, .journal-bloc-nombre { margin: 8px 0 0; color: var(--mute); font-size: var(--text-sm); line-height: 1.5; }
.journal-bloc .journal-liste { display: grid; gap: 0 32px; max-width: none; }
@media (min-width: 1024px) { .journal-bloc .journal-liste { grid-template-columns: 1fr 1fr; } }
.journal-bloc .journal-liste .produit { display: block; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); content-visibility: visible; }
/* un seul filet entre deux fiches et entre deux blocs : la première rangée, calée sur le titre du bloc, sans filet */
@media (min-width: 720px) { .journal-bloc .produit:first-child { padding-top: 0; border-top: 0; } }
@media (min-width: 1024px) { .journal-bloc .produit:nth-child(2) { padding-top: 0; border-top: 0; } }
.journal-bloc .journal-titre { font-size: var(--text-base); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.journal-bloc .journal-lecture { margin-top: 4px; white-space: normal; }
.journal-bloc .journal-lecture-duree::before { margin-left: 0.25em; }
/* les résultats de la recherche (journal.js) : les mots trouvés soulignés d'un filet */
.journal-resultats mark { color: inherit; background: none; font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
/* ---- Les listes d'article (« Dans le même dossier ») ---- */
.journal-liste { list-style: none; max-width: var(--container); margin: 0 auto; padding: 0; }
.journal-liste .produit {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "titre lecture" "desc desc" "meta meta";
column-gap: var(--s-6); row-gap: var(--s-1); align-items: baseline;
padding: var(--s-5) 0; margin: 0;
border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; overflow: visible;
contain-intrinsic-size: auto 104px; /* la hauteur d'une ligne, pour content-visibility (main.css) */
}
.journal-titre { grid-area: titre; margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.journal-titre a, a.journal-titre { color: var(--ink); text-decoration: none; }
.journal-titre a:hover, .journal-titre a:focus-visible, a.journal-titre:hover, a.journal-titre:focus-visible {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.journal-desc {
grid-area: desc; margin: 0; max-width: 68ch; color: var(--mute); font-size: var(--text-base); line-height: 1.5; letter-spacing: -0.01em;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.journal-meta { grid-area: meta; margin: var(--s-1) 0 0; font-size: var(--text-sm); line-height: 1.4; }
.journal-dossier { color: var(--mute); font-weight: 500; text-decoration: none; }
.journal-dossier:hover, .journal-dossier:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.journal-lecture { grid-area: lecture; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* le mot « Lecture » reste pour les lecteurs d'écran et pour la scène, la colonne ne montre que la durée */
.journal-lecture-nom { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.journal-liste--suite > .produit:first-child { border-top: 1px solid var(--rule); }
/* ---- Page de dossier et archives (rubrique.html) : l'en-tête et la grille de l'article, au rail le sommaire ---- */
.article-hero.dossier-hero h1 { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.dossier-chapeau { max-width: 40rem; margin: 16px 0 0; font-size: var(--text-lg); line-height: 1.5; letter-spacing: -0.011em; }
.dossier-onglets { max-width: var(--container); margin: 0 auto 40px; padding: 0 var(--gutter); }
.dossier-onglets .journal-onglets { margin: -4px -4px -3px; }
.dossier-rail { margin-bottom: 40px; }
.dossier-rail .journal-recherche input { padding: 0 16px; font-size: var(--text-sm); }
.dossier-sommaire { margin-top: 24px; padding-top: 12px; border-top: 2px solid var(--ink); }
.dossier-sommaire a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; line-height: 1.4; }
.dossier-sommaire li:first-child a { border-top: 0; }
.situation-nombre { flex: none; }
.dossier-situation + .dossier-situation { margin-top: 56px; }
.dossier-situation > h2 { margin: 0; padding-top: 12px; border-top: 2px solid var(--ink); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; }
.dossier-fiche { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.dossier-fiche:last-child { border-bottom: 0; }
.fiche-titre { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
.fiche-meta { margin-top: 8px; }
.dossier-grille > .journal-pagination { margin-top: 32px; }
.dossier-grille > .note-centre { margin: 40px 0 0; }
@media (min-width: 1024px) {
.dossier-grille > .dossier-rail { grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: 84px; margin: 0; }
}
@media (max-width: 719px) {
#articles.etage-contenu { padding-top: 32px; }
.journal-tete { margin-bottom: 24px; }
.journal-onglets { margin-bottom: 29px; }
.journal-contenu > section { margin-top: 40px; }
.une-principale .une-chapeau { font-size: var(--text-base); }
.dossier-chapeau, .fiche-titre { font-size: 1.1875rem; }
.journal-bloc-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}
/* ---- Au clavier : le focus s'arrête sous la barre et au-dessus des boutons flottants ---- */
:is(#articles, .dossier-onglets, .dossier-hero) :is(a, button, input) { scroll-margin: 84px 0 96px; }
:where(#articles, .dossier-onglets, .dossier-hero) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }
/* ---- La fin de la page Blog : un pied court, qui laisse sa place à la pastille de retour et ne la couvre pas en 3D ---- */
.etage ~ footer .footer-inner { padding-bottom: 64px; }
html.accueil-3d main.etage ~ footer { z-index: 0; }
/* ---- La page d'article, une fiche pratique (article.html, body.lecture, sync.js 5 bis) : sommaire au rail, colonne de 664 px ---- */
body.lecture::before, body.lecture::after { content: none; }
/* la barre des pages du blog (lecture, et toute la page Blog pour ne rien décaler au passage de la scène au journal) :
liens de 14 px, traits du menu sans rayon */
:is(body.lecture, [data-salle="imprimerie"]) .menu-toggle span { border-radius: 0; }
body.lecture q { quotes: "«\A0" "\A0»" "“" "”"; }
body.lecture time, .question-num, .chiffre-valeur { font-variant-numeric: tabular-nums; }
.insec { white-space: nowrap; }
@media (min-width: 821px) { :is(body.lecture, [data-salle="imprimerie"]) .nav-menu a { font-size: var(--text-sm); } }
@media (max-width: 719px) { body.lecture { --gutter: max(16px, env(safe-area-inset-left)); } }
body.lecture main :is(a, button, summary, [id], [tabindex]) { scroll-margin: 84px 0 88px; }
/* l'en-tête : fil et titre calés sur le logo */
.article-hero { max-width: var(--container); margin: 0 auto; padding: 100px var(--gutter) 32px; }
.article-hero h1 { max-width: 20em; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.1; }
.article-fil, .article-serie { margin: 0 0 12px; color: var(--mute); font-size: var(--text-sm); font-weight: 600; }
.article-fil a { color: inherit; }
.article-fil a:hover, .article-hero-meta a, :is(.article-verification, .article-auteur-liens, .article-sources-liste, .suite-precedente) a, .article-questions-liste a:hover .question-texte, .suite-carte:is(:hover, :focus-visible) .suite-titre {
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}
.article-fil a + a::before, .article-hero-meta > span:not(:last-child)::after, .article-verification > span:not(:last-of-type)::after, .article-auteur-liens a + a::before {
content: "·" / ""; display: inline-block; margin: 0 0.5em; color: var(--mute);
}
.article-fil a + a::before { content: "/" / ""; }
.article-hero-meta { margin: 16px 0 0; color: var(--mute); font-size: var(--text-sm); }
.article-verification { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--text-sm); font-weight: 600; }
:is(.article-verification, .article-auteur-liens, .article-sources-liste, .suite-precedente) a { color: var(--accent); }
.article-imprimer { margin-left: auto; padding: 8px 18px; font-family: inherit; font-size: var(--text-sm); font-weight: 600; }
.article-a-savoir { max-width: 40rem; margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--r); }
.article-adresse { display: none; }
@media (min-width: 1024px) { .article-hero-meta { white-space: nowrap; } }
@media (max-width: 719px), (scripting: none) { .article-imprimer { display: none; } }
@media (max-width: 719px) {
.article-hero { padding: 80px var(--gutter) 24px; }
.article-hero-meta > span:first-child { display: block; }
.article-hero-meta > span:first-child::after { content: none; }
}
/* la grille ; au bureau, le sommaire au rail, collant */
.article-grille { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--s-16); }
@media (min-width: 720px) { .article-grille { display: grid; grid-template-columns: minmax(0, 40rem); } }
@media (min-width: 1024px) {
.article-grille { grid-template-columns: 13rem minmax(0, 664px); grid-template-rows: repeat(4, auto); column-gap: 64px; }
.article-grille > * { grid-column: 2; }
.article-grille :is(.exemple, p > .bloc-etiquette) { margin-right: min(0px, 40rem - 664px); }
.article-grille > .article-questions {
grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: 84px; margin: 0;
max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain;
}
}
.article-reponse { padding: 20px 24px 24px; background: var(--bg-alt); border-left: 4px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; }
.article-reponse > p:not(.bloc-etiquette) { max-width: 40rem; font-size: var(--text-lg); line-height: 1.5; }
/* le sommaire : au bureau, l'entrée courante montre sa cale (la question en gras, serrée) et glisse sous son filet, sans rien déplacer */
.article-questions { margin: 32px 0 0; padding-top: 12px; border-top: 2px solid var(--ink); }
.article-questions-titre { margin: 0 0 8px; color: var(--mute); font-size: var(--text-sm); font-weight: 600; }
.article-questions-liste { margin: 0; padding: 0; list-style: none; font-size: var(--text-base); line-height: 1.4; }
.article-questions-liste li + li { border-top: 1px solid var(--rule); }
.article-questions-liste a { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); padding: 8px 15px 8px 0; color: var(--mute); }
.article-questions-liste a > span:first-child { grid-column: 1; }
.question-texte, .question-cale { grid-column: 2; grid-row: 1; }
.question-cale { visibility: hidden; font-weight: 600; letter-spacing: -0.024em; }
.article-questions-liste a:hover .question-texte { color: var(--ink); }
@media (min-width: 1024px) {
.article-questions-liste { font-size: 0.9375rem; }
.article-questions-liste a[aria-current="true"] { color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.article-questions-liste a[aria-current="true"] > span { transform: translateX(15px); }
.article-questions-liste a[aria-current="true"] > span:first-child { font-weight: 600; }
.article-questions-liste a[aria-current="true"] .question-texte { opacity: 0; }
.article-questions-liste a[aria-current="true"] .question-cale { visibility: visible; }
}
@media (max-width: 1023px) { .question-cale { display: none; } }
/* le corps et ses questions */
.article-body { margin-top: 40px; font-size: 1.25rem; line-height: 1.6; letter-spacing: -0.011em; overflow-wrap: break-word; counter-reset: question; }
.article-body :is(p, ul, ol, h2, h3, blockquote) { max-width: 40rem; }
.article-body > :first-child { margin-top: 0; }
.article-body > * + *, .article-question > * + *, .article-body .callout > * + * { margin-top: 32px; }
.article-body :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1.1em; }
.article-body :is(ul, ol) { padding-left: 1.4em; }
.article-body li + li { margin-top: 0.55em; }
.article-body li::marker { color: var(--mute); }
.article-body a { color: var(--accent); }
.article-question { counter-increment: question; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule); }
.article-body > .article-question:first-of-type { padding-top: 0; border-top: 0; }
.article-question > h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; }
.article-question > h2::before { content: "Question " counter(question) / ""; display: block; margin-bottom: 6px; color: var(--mute); font-size: var(--text-sm); font-weight: 600; letter-spacing: normal; }
.article-question > h2 + *, .article-body h3 + * { margin-top: 0.75em; }
.article-body .callout > .bloc-etiquette + * { margin-top: 0; }
.article-body h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.article-body * + h3 { margin-top: 1.6em; }
/* les habillages : exemple, encadrés, À vérifier */
.article-body .callout { padding: 20px 24px; border: 1px solid var(--rule); border-radius: var(--r); }
.article-body .callout--attention { border: 2px solid var(--ink); }
.article-body .callout--attention > .bloc-etiquette { color: var(--ink); }
.article-body .callout--exemple { padding: 16px 20px 20px; background: var(--bg-alt); border: 0; }
.article-body p > .bloc-etiquette { margin-block: 1.1em 0; padding: 16px 20px 8px; background: var(--bg-alt); border-radius: var(--r) var(--r) 0 0; }
.article-body .exemple { display: block; padding: 0 20px 20px; background: var(--bg-alt); border-radius: 0 0 var(--r) var(--r); }.article-body .callout--verifier { padding: 16px 20px; }
.liste-verifier { counter-reset: verif; list-style: none; }
.article-body .liste-verifier { padding: 0; }
.liste-verifier > li { position: relative; min-height: 28px; padding-left: 40px; counter-increment: verif; }
.article-body .liste-verifier > li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.liste-verifier > li + li::before { top: calc(12px + 0.1em); }
.liste-verifier > li::before {
content: counter(verif) / ""; position: absolute; top: 0.1em; left: 0; display: grid; place-items: center; width: 28px; height: 28px;
border: 1.5px solid var(--accent); border-radius: 50%; color: var(--ink); font-size: var(--text-sm); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
/* texte officiel, citations */
.texte-officiel { display: block; margin: 0.8em 0 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 1.05em; font-weight: 400; line-height: 1.5; }
.texte-officiel-ref { display: block; margin: 0 0 0.8em; padding: 4px 0 0 20px; border-left: 3px solid var(--accent); color: var(--mute); font-size: var(--text-sm); font-style: normal; font-weight: 600; }
.texte-officiel-ref--phrase { display: inline; margin: 0; padding: 0; border: 0; }
.article-body .texte-officiel-ref a { color: var(--mute); }
.cite-officielle { padding: 1px 4px; background: var(--bg-alt); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.article-body blockquote { padding-left: 20px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 1.05em; line-height: 1.5; }
.article-body blockquote cite { display: block; margin-top: 8px; color: var(--mute); font-size: var(--text-sm); font-style: normal; font-weight: 600; }
.article-body .chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 16px 24px; max-width: none; margin-top: 16px; padding: 16px 0; list-style: none; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.article-body .chiffres li { display: grid; align-content: start; gap: 4px; margin: 0; }
.chiffre-valeur { color: var(--ink); font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.chiffre-libelle, .article-body .chiffre-source { font-size: var(--text-sm); line-height: 1.4; }
.chiffre-libelle { color: var(--mute); }
.chiffre-source { justify-self: start; }
@media (min-width: 720px) { .article-body .chiffres { column-gap: 0; } .article-body .chiffres li { padding-right: 16px; } .article-body .chiffres li + li { padding-left: 24px; border-left: 1px solid var(--rule); } }
/* tableaux : dans la colonne ; en cartes au téléphone */
body.lecture .article-body table { width: 100%; border-collapse: collapse; font-size: var(--text-base); line-height: 1.5; }
body.lecture .article-body caption { margin-bottom: 12px; color: var(--mute); font-size: var(--text-sm); text-align: left; }
body.lecture .article-body :is(th, td) { padding: 12px 20px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
body.lecture .article-body thead th { color: var(--mute); font-size: var(--text-sm); font-weight: 600; border-bottom: 2px solid var(--ink); }
body.lecture .article-body tbody td:first-child { color: var(--ink); font-weight: 600; }
@media (min-width: 720px) { body.lecture .article-body table :is(th, td):first-child { min-width: 9em; } }
/* la fin : suite du dossier, appel, auteur, sources, même dossier */
.article-fin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 64px; }
.article-suite { padding-top: 12px; border-top: 3px solid var(--ink); }
.suite-carte { display: grid; gap: 6px; padding: 20px 24px; color: var(--ink); background: var(--bg-alt); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.suite-etiquette { color: var(--mute); font-size: var(--text-sm); font-weight: 600; }
.suite-titre { font-size: var(--text-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.suite-chapeau { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--mute); line-height: 1.45; }
.suite-duree { color: var(--mute); font-size: var(--text-sm); }
/* la fiche précédente : l'étiquette sur sa ligne, le titre dessous en entier (deux lignes au plus à 390 px) */
.suite-precedente { margin: 6px 0 0; color: var(--mute); line-height: 1.45; }
.suite-precedente .suite-etiquette { display: block; margin-bottom: 2px; }
.article-appel, .article-auteur { padding-top: 24px; border-top: 1px solid var(--rule); }
.article-appel-titre { margin: 0 0 8px; font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.015em; }
.article-appel-texte { margin: 0 0 20px; color: var(--mute); }
.article-appel-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.article-auteur-nom { color: var(--ink); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; }
.article-auteur-role { margin: 4px 0 12px; color: var(--mute); }
.article-auteur-liens { color: var(--mute); font-size: var(--text-sm); }
.article-sources > summary { display: block; padding: 24px 0 0; border-top: 1px solid var(--rule); list-style: none; cursor: pointer; }
.sources-resume { display: block; }
.article-sources > summary::-webkit-details-marker { display: none; }
.sources-voir, .sources-masquer { display: inline-block; margin-top: 6px; color: var(--accent); font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.article-sources[open] .sources-voir, .article-sources:not([open]) .sources-masquer { display: none; }
.article-sources-liste { margin: 16px 0 0; padding-left: 1.6em; color: var(--mute); line-height: 1.5; }
.article-sources-liste li + li { margin-top: 8px; }
.article-sources-liste li::marker { font-variant-numeric: tabular-nums; }
.article-sources-liste li:target { background: var(--bg-alt); }
.article-source-site { margin-left: 6px; font-size: var(--text-sm); }
.article-dossier .journal-liste { max-width: none; }
/* boutons flottants (main.js section 20), sur les pages de lecture et sur le journal à plat de la page Blog */
:is(body.lecture, .sur-le-journal) :is(.a11y-bouton, .retour-ascenseur) { transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), background 0.2s var(--ease); }
html.sur-le-journal :is(.a11y-bouton, .retour-ascenseur) { transition-property: transform, opacity; }
:is(body.lecture, .sur-le-journal) .a11y-bouton.est-replie { transform: translateX(34px) scale(0.72); opacity: 0.72; }
:is(body.lecture, .sur-le-journal) .retour-ascenseur.est-replie { transform: translateX(-34px) scale(0.72); opacity: 0.72; }
:is(body.lecture, .sur-le-journal) .a11y-bouton.est-effacee { opacity: 0; }
@media (max-width: 719px) {
:is(body.lecture, .sur-le-journal) .a11y-bouton { right: var(--gutter); }
.article-reponse { padding: 16px 16px 20px 20px; }
.article-reponse > p:not(.bloc-etiquette) { font-size: 1.1875rem; }
.article-body { font-size: 1.125rem; }
.article-body > * + *, .article-question > * + *, .article-body .callout > * + * { margin-top: 24px; }
.article-question { margin-top: 48px; padding-top: 20px; }
.article-body h3, .suite-titre { font-size: 1.1875rem; }
.article-body :is(.callout--exemple, .callout--verifier, .exemple), .article-body p > .bloc-etiquette { margin-right: -8px; margin-left: -8px; }
.article-body :is(.callout--attention, .callout--retenir) { padding: 16px; }
.article-body .callout--verifier { padding: 12px; }
.liste-verifier { font-size: var(--text-base); }
.liste-verifier > li { min-height: 24px; padding-left: 34px; }
.liste-verifier > li::before { width: 24px; height: 24px; }
.article-body .liste-verifier > li + li { margin-top: 10px; padding-top: 10px; }
.liste-verifier > li + li::before { top: calc(10px + 0.1em); }
.article-body .chiffres { grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: 12px 16px; }
.article-body .chiffres li { grid-column: 1 / -1; grid-template-columns: subgrid; gap: 2px 16px; }
.article-body .chiffres li + li { padding-top: 12px; border-top: 1px solid var(--rule); }
.chiffre-valeur { grid-row: 1 / 3; font-size: 1.5rem; }
.chiffre-libelle, .article-body .chiffre-source { grid-column: 2; }
.article-fin { gap: 32px; }
.suite-carte { padding: 16px; }
.article-appel { padding-right: 64px; }
}
@media screen and (max-width: 719px) {
body.lecture .article-body .table-scroll { overflow: visible; background: none; }
body.lecture .article-body :is(table, tbody, tr, td, caption) { display: block; }
body.lecture .article-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.lecture .article-body tr { padding: 16px; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r); }
body.lecture .article-body tr + tr { margin-top: 12px; }
body.lecture .article-body table :is(th, td) { min-width: 0; padding: 0; border: 0; }
body.lecture .article-body td + td { margin-top: 12px; }
body.lecture .article-body td:first-child { padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-size: var(--text-base); }
body.lecture .article-body td:not(:first-child)::before { content: attr(data-label) / ""; display: block; color: var(--mute); font-size: var(--text-sm); font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
:root:has(.lecture), :root:has(.lecture) *, :root:has(.lecture)::before, :root:has(.lecture)::after, :root:has(.lecture) ::before, :root:has(.lecture) ::after { transition: none !important; animation: none !important; }
.sur-le-journal :is(.a11y-bouton, .retour-ascenseur) { transition: none !important; }
}
@media (forced-colors: active) {
/* le filet des onglets est un fond, que les couleurs forcées effacent : gardé, en couleur du texte */
.journal-onglets { forced-color-adjust: none; background-image: linear-gradient(CanvasText, CanvasText); }
.journal-onglets > a { forced-color-adjust: auto; }
.article-questions-liste a { forced-color-adjust: none; color: CanvasText; }
.article-questions-liste a[aria-current="true"] { color: CanvasText; box-shadow: inset 3px 0 0 Highlight; }
:is(.article-reponse, .article-body .callout--exemple, .article-body .exemple, .suite-carte, .cite-officielle) { border: 1px solid CanvasText; }
}
@media print {
.journal-recherche, .journal-onglets, .journal-pagination { display: none !important; }
@page { size: A4; margin: 14mm 14mm 16mm; }
html:has(body.lecture) { --bg: #fff; --bg-alt: #f5f5f7; --ink: #000; --mute: #3a3a3c; --rule: #c7c7cc; --accent: #14345f; }
body.lecture { font-size: 10.5pt; line-height: 1.45; }
body.lecture :is(.article-questions, .article-appel, .article-suite, .article-auteur, .article-dossier, .article-imprimer, .sources-resume, .sources-voir, .sources-masquer) { display: none !important; }
.article-hero, .article-grille { display: block; max-width: none; margin: 0; padding: 0; }
.article-hero h1 { max-width: none; font-size: 19pt; }
.article-adresse { display: block; margin: 4pt 0 0; color: var(--mute); }
.article-reponse, .article-body, .article-fin { margin-top: 10pt; }
.article-reponse > p:not(.bloc-etiquette), .article-body, body.lecture .article-body table, .liste-verifier { font-size: 10.5pt; line-height: 1.45; }
.article-question { margin-top: 12pt; padding-top: 8pt; }
.article-question > h2 { font-size: 14pt; }
.article-body h3 { font-size: 11.5pt; }
.article-body > * + *, .article-question > * + *, .article-body .callout > * + * { margin-top: 8pt; }
.article-body :is(p, ul, ol) + :is(p, ul, ol), .article-question > h2 + * { margin-top: 5pt; }
.article-body .chiffre-valeur { font-size: 16pt; }
.article-body a { color: inherit; }
.article-sources::details-content { content-visibility: visible; }
.article-sources > summary { padding: 0; border: 0; }
.article-sources-liste { margin-top: 4pt; }
.article-sources-liste a::after { content: " " attr(href); word-break: break-all; }
:is(h1, h2, h3, .bloc-etiquette, .bloc-surtitre, caption) { break-after: avoid; }
:is(.callout, .chiffres, tr, li, .texte-officiel, blockquote, .article-reponse) { break-inside: avoid; }
thead { display: table-header-group; }
p, li { orphans: 3; widows: 3; }
/* « Imprimer la fiche » (main.js section 8) */
html.impression-fiche .article-hero > :not(.article-fil, h1, .article-verification, .article-adresse),
html.impression-fiche .article-grille > :not(.article-reponse, .article-body),
html.impression-fiche .article-body > :not(.article-question:has(.callout--verifier)),
html.impression-fiche .article-question > :not(h2, .callout--verifier) { display: none !important; }
html.impression-fiche .article-hero h1 { font-size: 16pt; }
html.impression-fiche .article-question { margin-top: 12pt; padding: 0; border: 0; }
html.impression-fiche .article-question > h2::before { content: none; }
}