/**
 * Dossiers et page de sources (lot 11B.1).
 *
 * Prolonge portail.css et outils.css avec leurs jetons : blanc dominant, anthracite,
 * violet pour les liens, traits fins, aucune ombre ni bordure verticale épaisse. Un
 * dossier se lit longuement : largeur de lecture bornée, preuves en petit texte tenu,
 * statut en tag compact placé avant l'affirmation qu'il qualifie.
 */

.dossier { padding-block: var(--e-2) var(--e-12); }
.dossier > * { max-width: 820px; }

.dossier__entete { padding-block: var(--e-3) var(--e-2); }
.dossier__surtitre { font-size: var(--t-13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.dossier__titre { margin-top: var(--e-2); font-size: clamp(var(--t-34), 3.6vw, var(--t-56)); letter-spacing: -0.01em; font-weight: 400; }
.dossier__titre:focus { outline: none; }
.dossier__question { margin-top: var(--e-3); font-size: var(--t-21); line-height: 1.45; color: var(--texte); }
.dossier__version { margin-top: var(--e-2); font-size: var(--t-15); color: var(--texte-tenu); }

.dossier__h2 { font-size: clamp(var(--t-21), 2.4vw, var(--t-27)); letter-spacing: -0.01em; }
.dossier__h2--petit { font-size: var(--t-15); font-weight: 700; letter-spacing: .02em; }
.dossier__chapo { margin-top: var(--e-1); color: var(--texte-doux); font-size: var(--t-17); }
.dossier__legende { margin-top: var(--e-2); font-size: var(--t-13); color: var(--texte-tenu); }
.dossier__avertissement { margin-top: var(--e-3); font-size: var(--t-15); color: var(--texte-doux); }

.dossier__bref { margin-top: var(--e-6); padding: var(--e-4) var(--e-6); background: var(--teinte); border-radius: var(--r-l); }
.dossier__reponse { margin: var(--e-3) 0 0; padding-left: var(--e-4); display: grid; gap: var(--e-2); }
/*
 * La même classe sert aux listes et aux paragraphes, et `display: grid` ne leur va pas de la même
 * façon : sur un paragraphe, chaque enfant en ligne — un lien, un `<strong>`, un `<code>` — devient
 * une ligne de grille à lui seul, séparée de 8 px. « Télécharger l’image · texte alternatif » se
 * lisait sur trois lignes, et une phrase coupée en trois se lit trois fois. Le paragraphe redevient
 * un paragraphe ; son retrait, lui, ne bouge pas, pour ne déplacer aucune page existante.
 */
p.dossier__reponse { display: block; }
.dossier__reponse li::marker { color: var(--marque); }

.dossier__sommaire { margin-top: var(--e-6); padding-block: var(--e-3); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.dossier__sommaire ol { margin: var(--e-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.dossier__sommaire a { display: inline-flex; min-height: 32px; align-items: center; font-size: var(--t-15); }

.dossier__partie { margin-top: var(--e-12); scroll-margin-top: var(--e-16); }
.dossier [id] { scroll-margin-top: var(--e-16); }

/* Statut d'une affirmation : tag compact, point de couleur, texte lisible sans la couleur. */
.statut-dossier {
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--t-12); line-height: 1; padding: var(--e-1) var(--e-2);
  border: 1px solid var(--trait-forte); border-radius: var(--r-pilule);
  color: var(--texte); white-space: nowrap; background: var(--fond);
}
.statut-dossier::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--texte); flex: none; }
.statut-dossier--declaration_attribuee { color: var(--attention); border-color: var(--attention); }
.statut-dossier--declaration_attribuee::before { background: var(--attention); }
.statut-dossier--hypothese { color: var(--action); border-color: var(--action); }
.statut-dossier--hypothese::before { background: var(--action); }
.statut-dossier--donnee_inconnue { color: var(--erreur); border-color: var(--erreur); }
.statut-dossier--donnee_inconnue::before { background: var(--erreur); }
.dossier__legende .statut-dossier { margin: var(--e-1) var(--e-1) 0 0; }

.affirmation { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.affirmation__texte { margin-top: var(--e-2); font-size: var(--t-17); line-height: 1.55; }
.affirmation__cadre { margin: var(--e-3) 0 0; display: grid; gap: var(--e-1); font-size: var(--t-15); }
.affirmation__cadre > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--e-3); }
.affirmation__cadre dt { color: var(--texte-tenu); }
.affirmation__cadre dd { margin: 0; color: var(--texte-doux); min-width: 0; overflow-wrap: anywhere; }
.affirmation__intertitre { margin-top: var(--e-3); font-size: var(--t-13); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-tenu); }
.affirmation__liens { margin: var(--e-1) 0 0; padding-left: var(--e-4); display: grid; gap: var(--e-1); font-size: var(--t-15); }
.affirmation__liens a { display: inline-flex; min-height: 28px; align-items: center; }

.preuves, .passages { list-style: none; margin: var(--e-1) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.preuve, .passage { display: grid; gap: var(--e-1); font-size: var(--t-15); min-width: 0; }
.preuve__piece { font-weight: 600; overflow-wrap: anywhere; }
.preuve__editeur, .passage__localisation { color: var(--texte-tenu); font-size: var(--t-13); }
.preuve__extrait { color: var(--texte-doux); font-style: italic; overflow-wrap: anywhere; quotes: "«\00a0" "\00a0»"; }
.preuve__extrait--sans { font-style: normal; color: var(--texte-tenu); }
.preuve__original { justify-self: start; font-size: var(--t-13); min-height: 26px; display: inline-flex; align-items: center; }
.passage__usages { font-size: var(--t-13); color: var(--texte-tenu); }

/* Arbre des décomptes : l'emboîtement se lit par le retrait et un trait fin horizontal, jamais par une bordure verticale épaisse. */
.chiffres { margin-top: var(--e-4); }
.chiffres__titre { font-size: var(--t-17); }
.chiffres__aide { margin-top: var(--e-1); font-size: var(--t-15); color: var(--texte-doux); }
.chiffres__liste, .chiffres__sous { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.chiffres__sous { padding-left: clamp(14px, 3vw, 28px); }
.chiffre { display: grid; gap: var(--e-1); min-width: 0; padding-top: var(--e-2); border-top: 1px solid var(--trait); }
.chiffres__sous .chiffre { border-top-style: dashed; }
.chiffre__valeur { font-size: var(--t-21); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.chiffre__unite { font-size: var(--t-15); color: var(--texte-doux); }
.chiffre__ensemble { font-size: var(--t-15); overflow-wrap: anywhere; }
.chiffre__meta { font-size: var(--t-13); color: var(--texte-tenu); overflow-wrap: anywhere; }
.chiffre__divergence { font-size: var(--t-13); color: var(--attention); }

.dossier-recherches { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.dossier-recherche { padding-top: var(--e-3); border-top: 1px solid var(--trait); }
.dossier-recherche__question { font-weight: 600; }

.dossier__citation { margin-top: var(--e-2); padding: var(--e-3) var(--e-4); border: 1px solid var(--trait-forte); border-radius: var(--r-m); font-size: var(--t-15); overflow-wrap: anywhere; user-select: all; }
.dossier__citer .bouton { margin-top: var(--e-3); }

.pieces { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-6); }
.piece { padding-top: var(--e-4); border-top: 1px solid var(--trait); min-width: 0; }
.piece:target { outline: 2px solid var(--action); outline-offset: 8px; border-radius: var(--r-s); }
.piece__titre { font-size: var(--t-17); line-height: 1.35; overflow-wrap: anywhere; }
.piece__numero { display: block; font-size: var(--t-13); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-tenu); margin-bottom: var(--e-1); }
.piece__original { margin-top: var(--e-2); font-size: var(--t-15); display: grid; gap: var(--e-1); }
.piece__url { color: var(--texte-tenu); font-size: var(--t-12); overflow-wrap: anywhere; }
.piece__fiches { margin-top: var(--e-1); font-size: var(--t-12); color: var(--texte-tenu); overflow-wrap: anywhere; }

.partage__bouton + .partage__bouton { margin-inline-start: 0; }

@media (max-width: 560px) {
  .dossier__question { font-size: var(--t-17); }
  .dossier__bref { padding: var(--e-4); }
  .affirmation__cadre > div { grid-template-columns: 1fr; gap: 0; }
  .partage { justify-content: flex-start; }
}

@media print {
  .partage, .dossier__sommaire { display: none; }
  .dossier > * { max-width: none; }
}

/* Supports à reprendre (lot 11B.2) : aperçu borné, liens de téléchargement explicites, texte équivalent. */
.support { margin-top: var(--e-6); padding: var(--e-4) var(--e-4) var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-l); }
.support__titre { font-size: var(--t-21); letter-spacing: -0.01em; }
.support__meta { margin-top: var(--e-1); font-size: var(--t-13); color: var(--texte-tenu); }
.support__apercu { display: block; margin-top: var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-m); overflow: hidden; background: var(--fond); }
.support__apercu img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; object-position: top; }
.support__apercu:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.support__alternative { margin-top: var(--e-2); font-size: var(--t-15); color: var(--texte-doux); }
.support__liens { margin: var(--e-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.support__lien { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--t-15); font-weight: 600; }
.support__taille { font-weight: 400; color: var(--texte-tenu); margin-left: var(--e-1); }
.support__texte { margin-top: var(--e-2); font-size: var(--t-15); }
.support__texte summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--action); font-weight: 600; }
.support__texte ul, .support__texte ol { padding-left: var(--e-4); display: grid; gap: var(--e-2); }
.support__texte p { margin-top: var(--e-1); }
.support__reperes > li { padding-top: var(--e-1); }
.support__precision, .support__refs { color: var(--texte-tenu); font-size: var(--t-13); }
.support__refs { display: block; overflow-wrap: anywhere; }
.support__limite { color: var(--texte-doux); }
.support__avis { margin-top: var(--e-2); }
/* `.bouton` fixe un display : sans cette règle, le bouton livré `hidden` resterait visible sans JavaScript. */
.support__avis[hidden] { display: none; }

/*
 * Index des dossiers (lot 12C). Une fiche par dossier : titre cliquable,
 * question, puis version et lien vers les sources. Pas de vignette ni de
 * couleur porteuse d'information — la hiérarchie suffit à lire la liste.
 */
.dossier__index { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.dossier__index-fiche { padding: var(--e-4) var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-l); background: var(--fond); }
.dossier__index-titre { margin: 0 0 var(--e-1); font-size: var(--t-21); letter-spacing: -0.02em; }
/*
 * **D3 et D12.** La vignette et le titre de l'index des actualités étaient deux ancres vers
 * la même page : cinq liens sans nom accessible, et deux arrêts de tabulation pour une
 * destination. Ils n'en forment plus qu'une, et c'est le titre qui la nomme.
 *
 * La vignette portait en outre sa taille dans un attribut `style=` que la CSP du portail
 * bloquait — `style-src 'self'` sans `'unsafe-inline'` —, donc elle ne s'est jamais
 * affichée à la taille prévue. Les trois déclarations sont ici.
 */
.dossier__index-lien { display: block; text-decoration: none; color: inherit; }
.dossier__index-lien:hover .dossier__index-nom { text-decoration: underline; }
.dossier__index-vignette { display: block; width: 100%; height: auto; border-radius: var(--r-m); margin-bottom: var(--e-2); }
.dossier__index-nom { display: block; }
.dossier__index-question { margin: 0 0 var(--e-2); color: var(--texte-doux); }
.dossier__index-meta { margin: 0; font-size: var(--t-15); color: var(--texte-tenu); }
@media (max-width: 480px) { .dossier__index-fiche { padding: var(--e-3); } }

/*
 * Carte intégrable (lot 13D). L'aperçu est encadré pour qu'on voie qu'il s'agit
 * d'un rendu, et le code reste visible sans JavaScript : le bouton de copie est
 * un confort, pas la seule voie.
 */
.integrer__mode { margin: 0 0 var(--e-6); }
.integrer__apercu { padding: var(--e-3); border: 1px dashed var(--trait-forte); border-radius: var(--r-l); background: var(--survol); margin: 0 0 var(--e-3); overflow-x: auto; }
.integrer__libelle { display: block; font-size: var(--t-15); font-weight: 600; color: var(--texte-doux); margin: 0 0 var(--e-1); }
.integrer__code { margin: 0 0 var(--e-2); padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-s); background: var(--blanc); overflow-x: auto; font-size: var(--t-12); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 480px) { .integrer__apercu, .integrer__code { padding: var(--e-2); } }

/*
 * Références figées (reprise R2). Une page par version publiée, qui ne change
 * plus. La mise en forme reste sobre et proche du dossier : c'est la même
 * matière, à une date donnée, pas un autre produit.
 */
.fige__partie { margin: 0 0 var(--e-6); }
.fige__h2 { font-size: var(--t-21); letter-spacing: -0.02em; margin: 0 0 var(--e-3); }
.fige__affirmation { margin: 0 0 var(--e-4); padding-left: var(--e-3); border-left: 2px solid var(--trait); }
.fige__statut { margin: 0 0 var(--e-1); font-size: var(--t-12); text-transform: uppercase; letter-spacing: .04em; color: var(--texte-tenu); }
.fige__texte { margin: 0 0 var(--e-2); font-weight: 600; }
.fige__mentions { margin: 0 0 var(--e-1); font-size: var(--t-15); color: var(--texte-doux); }
.fige__mentions dt { float: left; clear: left; width: 72px; font-weight: 600; color: var(--texte-tenu); }
/*
 * Quatre-vingt-quatre pixels, et ce n'est pas un espacement.
 *
 * C'est le retrait qui aligne la définition sur la largeur de son intitulé : une passe de
 * normalisation l'a pris pour une marge et l'a ramené sur la grille, à 64 px — les deux
 * colonnes se chevauchaient alors, « Période » passant par-dessus « Portée ».
 * Un retrait d'alignement se mesure sur ce qu'il aligne, pas sur une échelle.
 */
.fige__mentions dd { margin: 0 0 var(--e-1) 84px; }
.fige__pieces { margin: 0; padding-left: var(--e-4); font-size: var(--t-15); color: var(--texte-doux); }
/* Guillemets français avec leur espace intérieure : le navigateur les colle par défaut. */
.fige__extrait { display: inline-block; margin-top: var(--e-1); color: var(--texte); quotes: '\00ab\00a0' '\00a0\00bb'; }
@media (max-width: 480px) {
  .fige__mentions dt { float: none; width: auto; }
  .fige__mentions dd { margin-left: 0; }
}

/*
 * Recherche transversale (lot 14). Un résultat n'est pas une ligne : il porte sa
 * qualification, ses mentions et ses pièces. La mise en forme les sépare
 * visuellement pour qu'on ne lise jamais l'affirmation sans son cadre.
 */
.recherche-dossiers__filtres { margin: var(--e-3) 0 0; padding: 0; border: 0; }
.recherche-dossiers__filtre { display: inline-flex; align-items: center; gap: var(--e-1); margin: 0 var(--e-3) var(--e-1) 0; font-size: var(--t-15); color: var(--texte-doux); }
.recherche-dossiers__resultats { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.recherche-dossiers__resultat { padding: var(--e-3) var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-l); }
.recherche-dossiers__qualification { margin: 0 0 var(--e-1); font-size: var(--t-12); text-transform: uppercase; letter-spacing: .04em; color: var(--texte-tenu); }
.recherche-dossiers__texte { margin: 0 0 var(--e-2); font-weight: 600; }
.recherche-dossiers__pieces { margin: var(--e-2) 0 0; padding-left: var(--e-4); font-size: var(--t-15); color: var(--texte-doux); }
.recherche-dossiers__piece-titre { color: var(--texte); }
.recherche-dossiers__sans-piece { margin: var(--e-2) 0 0; font-size: var(--t-15); color: var(--texte-tenu); }
.recherche-dossiers__origine { margin: var(--e-2) 0 0; font-size: var(--t-15); color: var(--texte-tenu); }
/* Un mandat terminé se distingue à l'œil autant qu'au texte : le libellé le dit, le trait le confirme. */
.recherche-dossiers__resultat--clos { border-style: dashed; }
@media (max-width: 480px) { .recherche-dossiers__resultat { padding: var(--e-3); } }

/* ---------- Fiches de preuve (pieces.html) ---------- */
.piece-sommaire { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-1) var(--e-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); font-size: var(--t-15); }
.piece-sommaire li { display: flex; gap: var(--e-2); align-items: baseline; min-width: 0; }
.piece-sommaire a { overflow-wrap: anywhere; }
.piece-sommaire__compte { color: var(--texte-tenu); font-size: var(--t-13); flex: none; }
.piece-fiche { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.piece-fiche__titre { margin: 0 0 var(--e-2); font-size: var(--t-17); line-height: 1.35; overflow-wrap: anywhere; }
.piece-fiche__intertitre { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-15); letter-spacing: 0.02em; text-transform: uppercase; color: var(--texte-tenu); }
.piece-fiche__sans-usage { margin: 0; font-size: var(--t-15); color: var(--texte-doux); }
.piece-explication { margin: 0 0 var(--e-2); padding-left: var(--e-3); border-left: 2px solid var(--trait-forte); }
.piece-explication__ou { margin: 0 0 var(--e-1); font-weight: 600; font-size: var(--t-15); }
.piece-explication__role, .piece-explication__limite { margin: 0 0 var(--e-1); font-size: var(--t-15); color: var(--texte-doux); }
.piece-explication__intitule { color: var(--texte); font-weight: 600; }
.piece-usages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.piece-usage { display: grid; gap: var(--e-1); font-size: var(--t-15); min-width: 0; overflow-wrap: anywhere; }
.piece-usage__quoi { color: var(--texte); }
.piece-usage__ou, .piece-usage__lieu { font-size: var(--t-13); color: var(--texte-tenu); }
.piece-usage__precision { color: var(--texte-tenu); }
.piece-usage__qualification { justify-self: start; }
/* « Producteur » ne tient pas dans la colonne fixe des mentions figées : le
   terme passait à la ligne et décalait toutes les paires suivantes. Une grille
   dimensionne la colonne sur le plus long terme, sans valeur codée en dur. */
.piece-fiche__mentions { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-1) var(--e-3); margin: 0 0 var(--e-2); font-size: var(--t-15); color: var(--texte-doux); }
.piece-fiche__mentions dt { font-weight: 600; color: var(--texte-tenu); }
.piece-fiche__mentions dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/*
 * Mentions à intitulés longs (lot CH).
 *
 * `.piece-fiche__mentions` range ses intitulés en « max-content » : la colonne des
 * valeurs reçoit donc ce qui reste après **le plus large** des intitulés. Avec des
 * intitulés courts — « Territoire », « Groupe » — cela tient à 320 px. Avec un
 * intitulé de vingt-cinq caractères, la colonne des valeurs tombe à un mot par
 * ligne et « overflow-wrap: anywhere » coupe les mots en deux : « l'actualisati /
 * on ». Le texte reste là, il n'est plus lisible.
 *
 * Ce modificateur empile les deux colonnes sous 560 px. Il ne touche pas les fiches
 * de mandat, qui gardent leurs deux colonnes : la correction est portée par celles
 * qui en ont besoin, et non imposée à celles qui vont bien.
 */
.piece-fiche__mentions--large dt { margin-top: var(--e-2); }
.piece-fiche__mentions--large dt:first-of-type { margin-top: 0; }
@media (max-width: 560px) {
  .piece-fiche__mentions--large { grid-template-columns: 1fr; gap: 0; }
  .piece-fiche__mentions--large dd { margin-bottom: var(--e-1); }
}

/* La référence citable d'un mandat (lot CH). La citation garde « user-select: all »
   de .dossier__citation : c'est ce qui rend la copie manuelle praticable quand le
   presse-papiers refuse, y compris sans JavaScript. */
.piece-fiche__citer { margin-top: var(--e-3); }
.piece-fiche__citer .dossier__citation { font-size: var(--t-15); }
.piece-fiche__citer p { margin: var(--e-2) 0 0; }
.piece-retour { margin: var(--e-4) 0 0; font-size: var(--t-15); }

.recherche-dossiers__groupe { margin-top: var(--e-6); }
.recherche-dossiers__groupe-titre { margin: 0 0 var(--e-2); font-size: var(--t-15); letter-spacing: 0.02em; text-transform: uppercase; color: var(--texte-tenu); }

/* ---------- Parcours guidé (parcours.html) ---------- */
.parcours__bloc { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.parcours__bloc-titre { margin: 0 0 var(--e-3); font-size: var(--t-17); line-height: 1.35; overflow-wrap: anywhere; }
/* Les étapes portent déjà leur numéro en toutes lettres : le marqueur de liste
   le répéterait, et un lecteur d'écran l'annoncerait deux fois. */
.parcours__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); counter-reset: none; }
.parcours__etape { padding-left: var(--e-3); border-left: 2px solid var(--trait-forte); min-width: 0; }
.parcours__numero { margin: 0; font-size: var(--t-12); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-tenu); }
.parcours__etape-titre { margin: var(--e-1) 0 var(--e-1); font-size: var(--t-15); }
.parcours__texte { margin: 0 0 var(--e-1); font-size: var(--t-15); overflow-wrap: anywhere; }
.parcours__meta { margin: 0 0 var(--e-1); font-size: var(--t-13); color: var(--texte-tenu); overflow-wrap: anywhere; }
.parcours__extrait { display: block; margin: 0 0 var(--e-1); font-size: var(--t-15); font-style: italic; color: var(--texte-doux); quotes: "«\00a0" "\00a0»"; }
.parcours__citation { margin: 0 0 var(--e-1); padding: var(--e-2) var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-s); background: var(--fond-doux, #fafafa); font-size: var(--t-15); overflow-wrap: anywhere; user-select: all; }
.parcours__lien { margin: 0; font-size: var(--t-15); }
.parcours__qualification { justify-self: start; margin: 0 0 var(--e-2); }
.parcours__mentions { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-1) var(--e-3); margin: 0 0 var(--e-2); font-size: var(--t-15); color: var(--texte-doux); }
.parcours__mentions dt { font-weight: 600; color: var(--texte-tenu); }
.parcours__mentions dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.parcours__sans-piece { color: var(--texte-tenu); }
.parcours__retour { margin: var(--e-4) 0 0; font-size: var(--t-15); }
@media (max-width: 480px) { .parcours__mentions { grid-template-columns: 1fr; gap: 0 0; } .parcours__mentions dd { margin-bottom: var(--e-1); } }

/* ---------- Du discours au centime (chaines.html) ---------- */
.chaine__bloc { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.chaine__bloc-titre { margin: 0 0 var(--e-2); font-size: var(--t-17); line-height: 1.35; overflow-wrap: anywhere; }
.chaine__citation { margin: 0 0 var(--e-1); font-style: italic; color: var(--texte-doux); quotes: "«\00a0" "\00a0»"; }
.chaine__meta { margin: 0 0 var(--e-2); font-size: var(--t-13); color: var(--texte-tenu); overflow-wrap: anywhere; }
.chaine__etat-global { margin: 0 0 var(--e-3); font-size: var(--t-15); }
.chaine__maillons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.chaine__maillon { padding-left: var(--e-3); border-left: 3px solid var(--trait-forte); min-width: 0; }
.chaine__maillon--absent { border-left-color: var(--trait); color: var(--texte-tenu); }
.chaine__titre { margin: 0; font-size: var(--t-12); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-tenu); }
.chaine__etat { margin: var(--e-1) 0 var(--e-1); font-size: var(--t-15); font-weight: 600; }
.chaine__maillon--absent .chaine__etat { font-weight: 600; color: var(--texte-tenu); }
.chaine__texte { margin: 0; font-size: var(--t-15); }
.chaine__pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.chaine__pieces li { display: grid; gap: var(--e-1); min-width: 0; overflow-wrap: anywhere; }
.chaine__piece-titre { font-size: var(--t-15); }
.chaine__piece-meta { font-size: var(--t-13); color: var(--texte-tenu); }
.chaine__piece-lien { font-size: var(--t-13); justify-self: start; }
.chaine__intertitre { margin: var(--e-4) 0 var(--e-1); font-size: var(--t-15); letter-spacing: 0.02em; text-transform: uppercase; color: var(--texte-tenu); }
.chaine__manques { margin: 0; padding-left: var(--e-4); font-size: var(--t-15); color: var(--texte-doux); display: grid; gap: var(--e-1); }

/* ---------- Relations pièce ↔ affirmation (lot 35) ---------- */
.relations { list-style: none; margin: 0 0 var(--e-2); padding: 0; display: grid; gap: var(--e-3); }
.relation { padding-left: var(--e-3); border-left: 3px solid var(--trait); min-width: 0; overflow-wrap: anywhere; }
.relation--etaye { border-left-color: #2f7d4f; }
.relation--fragilise { border-left-color: #b4452a; }
.relation--contextualise { border-left-color: #8a6d1f; }
.relation--ne_permet_pas_de_conclure { border-left-color: var(--trait-forte); }
.relation__etat { margin: 0; font-size: var(--t-12); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-tenu); }
.relation__cible { margin: var(--e-1) 0 var(--e-1); font-size: var(--t-15); font-weight: 600; }
.relation__justification { margin: 0 0 var(--e-1); font-size: var(--t-15); color: var(--texte-doux); }
.relation__piece { margin: 0; font-size: var(--t-13); color: var(--texte-tenu); }

/*
 * Les passages d'une actualité trouvée — défaut C1.
 *
 * Un fait établi, une explication, une question et une inconnue ne se présentent pas de
 * la même façon. La doctrine du portail est explicite : **une qualification se lit à sa
 * forme et à son mot, jamais à sa couleur seule.** Le mot est donc écrit en toutes
 * lettres dans `.passage__nature`, et le trait de gauche change de **style de trait**
 * autant que de couleur — plein, pointillé, tireté — pour qu'une impression en noir et
 * blanc, un écran mal réglé ou une vision des couleurs différente ne perdent rien.
 */
.passages { list-style: none; margin: var(--e-2) 0; padding: 0; display: grid; gap: var(--e-2); }
.passage { padding-inline-start: var(--e-3); border-inline-start: 3px solid var(--trait-forte); }
.passage__nature { margin: 0; font-size: var(--t-12); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-tenu); }
.passage__texte { margin: var(--e-1) 0 0; font-size: var(--t-15); }
/* Un fait : trait plein. C'est la forme la plus affirmative, pour la seule famille qui affirme. */
.passage--fait { border-inline-start-style: solid; border-inline-start-color: #2f7d4f; }
/* Une explication n'établit rien : trait tireté. */
.passage--explication { border-inline-start-style: dashed; border-inline-start-color: #8a6d1f; }
/* Une question non plus : trait tireté, et son mot la distingue. */
.passage--question { border-inline-start-style: dashed; border-inline-start-color: var(--trait-forte); }
/* Une inconnue : trait pointillé, le plus interrompu des trois. Rien n'est établi. */
.passage--inconnue { border-inline-start-style: dotted; border-inline-start-color: #b4452a; }

/* Les termes proposés par l'état vide : des boutons, parce qu'ils relancent la recherche
   sur place sans recharger la page ni envoyer quoi que ce soit. */
.recherche-dossiers__suggestions { list-style: none; margin: var(--e-2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* ---------- Quoi de neuf (nouveautes.html) ---------- */
.nouveautes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.nouveaute { padding-left: var(--e-3); border-left: 3px solid var(--trait-forte); min-width: 0; overflow-wrap: anywhere; }
.nouveaute__entete { margin: 0 0 var(--e-1); font-size: var(--t-15); font-weight: 600; }
.nouveaute__version { font-weight: 400; font-size: var(--t-13); color: var(--texte-tenu); }
.nouveaute__texte { margin: 0 0 var(--e-1); font-size: var(--t-15); color: var(--texte-doux); }
.nouveaute__lien { margin: 0; font-size: var(--t-13); }
.mention--due { background: #fdeceb; border-color: #e0b4ae; color: #8a2f20; }

/* L'explication d'une absence de relation : un aparté, pas une relation de plus. */
.relations__absence { border-left: 3px solid #d6d3cd; padding-left: 0.9rem; }

/* --- Miniatures d'une dépêche : aperçus, textes à copier --- */
/* Les aperçus sont volontairement petits : la page sert à choisir et à
   copier, pas à regarder l'image en grand — c'est le fichier téléchargé qui
   le fait, à sa taille réelle. */
.dossier__visuels { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; }
.dossier__visuels > li { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.dossier__visuels .visuel > a { flex: none; }
.dossier__visuels img { width: 132px; height: auto; display: block; border-radius: var(--r-s); border: 1px solid rgba(32, 33, 42, .16); }
.dossier__visuels > li > div { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .4rem; }
.visuel__alt { display: block; font-size: var(--t-15); color: var(--texte-doux, #5C5E6B); margin-top: .5rem; }
.visuel__alt textarea { display: block; width: 100%; margin-top: .3rem; font: inherit; font-size: var(--t-15);
  color: var(--texte, #20212A); background: var(--fond-doux, #F4F3FF); border: 1px solid rgba(32, 33, 42, .2);
  border-radius: var(--r-s); padding: .6rem .7rem; resize: vertical; }

/*
 * Choisir un usage : un bloc par usage, lisible à 320 px.
 *
 * Les blocs sont numérotés par le navigateur (`<ol>`) : l'ordre est de l'information, pas de la
 * décoration — l'aperçu de lien vient d'abord parce que c'est celui qu'un réseau fabrique tout seul.
 * À 320 px, le numéro de liste sortait de l'enveloppe : la liste n'a donc pas de marque, et chaque
 * usage porte son titre.
 */
/*
 * Le registre des corrections : une entrée se lit d'un coup d'œil.
 *
 * Les entrées sont numérotées par le navigateur (`<ol>`) : leur ordre est de l'information — du plus
 * récent au plus ancien — et une entrée sans date ne remonte pas en tête, parce que « pas de date »
 * n'est pas « aujourd'hui ».
 */
.corrections { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.corrections > .correction { border-left: 3px solid var(--trait, rgba(32, 33, 42, .16)); padding: .1rem 0 .1rem 1rem; }
.corrections > .correction[data-nature="correction_editoriale"] { border-left-color: var(--marque, #635BFF); }
.correction__tete { margin: 0 0 .35rem; font-size: var(--t-15); color: var(--texte-doux, #5C5E6B); }
.correction__tete strong { color: var(--texte, #20212A); }

/*
 * Un bloc de code long ne pousse pas la page.
 *
 * La citation prête à copier tient sur une seule ligne — titre, version, date, URL de la source —
 * et rien ne l'autorisait à revenir à la ligne : à 320 px, elle débordait de 149 px, et toute la
 * page glissait horizontalement. Un `<code>` garde sa fonte et cesse d'être insécable.
 */
.dossier__reponse code, .usage code { overflow-wrap: anywhere; word-break: break-word; }

/*
 * Les commandes du parcours se visent au pouce.
 *
 * « Télécharger l'image » et « texte alternatif » sont des liens en ligne : 18 px de haut, mesurés à
 * 320 px. Le seuil retenu ailleurs dans ce projet est 24 px, et il vaut ici pour la même raison —
 * c'est sur un téléphone que l'on choisit un visuel à publier.
 */
.usage a[download], .usage a[href$=".txt"], .usage a[href$=".zip"], .usage a[href*="/d/"] {
  display: inline-block; min-height: 24px; line-height: 24px;
}

.dossier__usages { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-direction: column; gap: 1.4rem; }
.dossier__usages > .usage { border: 1px solid var(--trait, rgba(32, 33, 42, .16)); border-radius: var(--r-l);
  padding: 1rem 1.1rem 1.2rem; background: #fff; }
.dossier__usages > .usage > h3 { margin-top: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.usage__genre { font: 500 .82rem/1.3 inherit; color: var(--texte-doux, #5C5E6B);
  background: var(--fond-doux, #F4F3FF); border-radius: var(--r-l); padding: .18rem .6rem; white-space: nowrap; }
.usage__limites { font-size: var(--t-15); color: var(--texte-doux, #5C5E6B); }
.dossier__usages .dossier__visuels { margin-top: .6rem; }
@media (max-width: 24rem) {
  .dossier__usages > .usage { padding: .8rem .75rem 1rem; }
  .usage__genre { white-space: normal; }
}

/*
 * Choisir une période et des dépêches — page « Utiliser Polideo ».
 *
 * Les commandes natives d'un navigateur sont petites : une case à cocher fait treize pixels de
 * haut, un champ de date une vingtaine. Sur un téléphone, viser treize pixels du pouce est un
 * exercice, et la recette à 390 px comptait onze commandes sous vingt-quatre pixels. Les tailles
 * ci-dessous ne sont pas décoratives : elles rendent la sélection utilisable là où elle sera le
 * plus souvent faite.
 */
.selection fieldset { border: 1px solid var(--trait); border-radius: var(--r-l); padding: var(--e-3) var(--e-4); margin: 0 0 var(--e-4); }
.selection legend { padding-inline: var(--e-1); }
.selection input[type="date"],
.selection input[type="text"] { min-height: 40px; font: inherit; padding: var(--e-1) var(--e-2); border: 1px solid var(--trait-forte); border-radius: var(--r-s); max-width: 100%; }
.selection label { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 40px; }
.selection [data-selection-liste] { list-style: none; padding: 0; margin: 0; }
.selection [data-selection-liste] li { margin: 0; }
.selection input[type="checkbox"] { inline-size: 24px; block-size: 24px; flex: 0 0 auto; }
.selection [data-selection-telechargements] .bouton { margin: 0 var(--e-2) var(--e-2) 0; }

/*
 * P17 / BG — l'aperçu de la carte intégrable.
 *
 * Ces règles reprennent, **littéralement**, les couleurs et les espacements des
 * styles en ligne du code proposé aux créateurs : l'aperçu doit montrer ce que le
 * créateur obtiendra sur sa page, et non ce que le portail préférerait. C'est
 * pourquoi elles n'emploient pas les variables de thème.
 *
 * Elles existent parce que le site est servi avec `style-src 'self'` sans
 * `'unsafe-inline'` : le navigateur ignore alors tout attribut `style`, et
 * l'aperçu s'affichait nu. Le code à copier, lui, garde ses styles en ligne —
 * c'est ce qui le rend autonome, et les retirer casserait les intégrations.
 */
.carte-integrable {
  max-width: 34rem;
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px solid #e6e6ee;
  border-radius: var(--r-l);
  background: #fff;
  font: 15px/1.5 system-ui, sans-serif;
  color: #20212a;
}
.carte-integrable__surtitre {
  margin: 0 0 .4rem;
  font-size: var(--t-12);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.carte-integrable__titre { margin: 0 0 .5rem; font-size: var(--t-21); font-weight: 700; line-height: 1.3; }
.carte-integrable__titre a { color: #20212a; text-decoration: none; }
.carte-integrable__question { margin: 0 0 .6rem; color: var(--texte-doux); }
.carte-integrable__points { margin: 0 0 .7rem; padding-left: 1.1rem; color: #20212a; }
.carte-integrable__points li { margin: 0 0 .3rem; }
.carte-integrable__mention { margin: 0; font-size: var(--t-13); color: var(--texte-doux); }
.carte-integrable__mention a { color: #5148d8; }