/* Les graphiques de l'atelier des données (chantier Données, R5).
 *
 * TOUTES les couleurs des graphiques vivent ici, en jetons : le SVG produit par
 * `app/services/graphiques/` ne porte que des classes (`dp-f1`, `dp-retrait`…), jamais une
 * valeur. Le mode sombre en dépend, et changer la charte régénère tous les graphiques
 * sans toucher aux données (charte §8).
 *
 * Palette : Okabe–Ito, telle qu'AMENDÉE par le client le 23/09/2026 — jaune remplacé par
 * #F3EC8A, aucune confrontation aux boutons de vote (charte §3.1). Une teinte par
 * FAMILLE de missions (`charte.FAMILLES`), stable dans le temps. PLEINE par défaut ; le
 * RETRAIT (la même teinte désaturée ×0,55 et fondue au fond, 45 % en clair, 50 % en
 * sombre) ne sert que quand un élément est mis en avant : « le retrait est le contexte, la
 * saturation est le sujet » (charte §3.2, précisée par le client le 24/09/2026).
 *
 * Contraste : les teintes en retrait restent sous 3:1 face au fond (mesuré au R2 et au
 * R5). Chaque forme porte donc un CONTOUR au jeton `--gris-icone` (3,5:1), et le détail
 * est toujours lisible ailleurs (panneau, tableau) : la couleur ne porte jamais seule
 * l'information.
 *
 * Les teintes pleines reprennent `charte.PALETTE_OKABE_ITO` ; un test vérifie qu'elles
 * concordent. Les retraits en ont été calculés une fois (désaturation ×0,55, fondu 45 %
 * au papier en clair, 50 % au fond en sombre) : à recalculer si une teinte change.
 */

:root {
  --dp-f1: #0072B2; /* Régalien — bleu */
  --dp-f1-retrait: #9CB7C4;
  --dp-f2: #E69F00; /* Éducation et recherche — orange */
  --dp-f2-retrait: #DAC89D;
  --dp-f3: #D55E00; /* Solidarité, santé, travail — vermillon */
  --dp-f3-retrait: #D4B69B;
  --dp-f4: #009E73; /* Économie, écologie, agriculture — vert bleute */
  --dp-f4-retrait: #9AC0B2;
  --dp-f5: #56B4E9; /* Territoires, collectivités, outre-mer — bleu ciel */
  --dp-f5-retrait: #C0D6E0;
  --dp-f6: #CC79A7; /* Fonctionnement de l'État et pouvoirs publics — pourpre */
  --dp-f6-retrait: #DDC8D0;
  --dp-f7: #F3EC8A; /* Dette et engagements financiers — jaune pale */
  --dp-f7-retrait: #EDEACF;
  --dp-neutre: #75705F;
  --dp-neutre-retrait: #D9D3C4;
  --dp-mono: var(--secondaire);
  --dp-mono-retrait: #C9C2B3;
  --dp-contour: var(--gris-icone);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dp-f1-retrait: #203E4D;
    --dp-f2-retrait: #645022;
    --dp-f3-retrait: #5E3C20;
    --dp-f4-retrait: #1E473A;
    --dp-f5-retrait: #47606C;
    --dp-f6-retrait: #68505A;
    --dp-f7-retrait: #797659;
    --dp-neutre: #A39C8B;
    --dp-neutre-retrait: #4A4439;
  }
}
/* Le mode arc-en-ciel garde le traitement de nuit (chantier ARC) : même charte, aucune
 * série recolorée en néon. */
:root[data-theme="dark"],
:root[data-theme="arc"] {
  --dp-f1-retrait: #203E4D;
  --dp-f2-retrait: #645022;
  --dp-f3-retrait: #5E3C20;
  --dp-f4-retrait: #1E473A;
  --dp-f5-retrait: #47606C;
  --dp-f6-retrait: #68505A;
  --dp-f7-retrait: #797659;
  --dp-neutre: #A39C8B;
  --dp-neutre-retrait: #4A4439;
}

/* --- Les formes -------------------------------------------------------------------- */
.dp-f1.dp-plein { fill: var(--dp-f1); }
.dp-f1.dp-retrait { fill: var(--dp-f1-retrait); }
.dp-f2.dp-plein { fill: var(--dp-f2); }
.dp-f2.dp-retrait { fill: var(--dp-f2-retrait); }
.dp-f3.dp-plein { fill: var(--dp-f3); }
.dp-f3.dp-retrait { fill: var(--dp-f3-retrait); }
.dp-f4.dp-plein { fill: var(--dp-f4); }
.dp-f4.dp-retrait { fill: var(--dp-f4-retrait); }
.dp-f5.dp-plein { fill: var(--dp-f5); }
.dp-f5.dp-retrait { fill: var(--dp-f5-retrait); }
.dp-f6.dp-plein { fill: var(--dp-f6); }
.dp-f6.dp-retrait { fill: var(--dp-f6-retrait); }
.dp-f7.dp-plein { fill: var(--dp-f7); }
.dp-f7.dp-retrait { fill: var(--dp-f7-retrait); }
.dp-neutre.dp-plein { fill: var(--dp-neutre); }
.dp-neutre.dp-retrait { fill: var(--dp-neutre-retrait); }
.dp-mono.dp-retrait { fill: var(--dp-mono-retrait); }
.dp-mono.dp-plein { fill: var(--dp-mono); }
.dp-barre, .dp-tuile, .dp-pastille { stroke: var(--dp-contour); stroke-width: 1; }
/* Les lignes filles d'une mission : la même teinte, déclinée en clarté (charte §3.2). */
.dp-nuance-2 { fill-opacity: 0.8; }
.dp-nuance-3 { fill-opacity: 0.64; }

.dp-texte {
  font-family: var(--police-texte);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  fill: var(--encre);
}
.dp-secondaire { fill: var(--secondaire); }
.dp-gras { font-weight: 600; }
.dp-grand { font-family: var(--police-titres); font-size: 32px; }
/* Sur une case colorée : l'encre, cernée du fond. Lisible sur toute teinte, pleine ou en
 * retrait, sans choisir une couleur de texte par famille. */
.dp-sur-case {
  fill: var(--encre);
  stroke: var(--papier);
  stroke-width: 3px;
  paint-order: stroke;
  stroke-linejoin: round;
}
.dp-axe { stroke: var(--encre); stroke-width: 1; }
.dp-grille { stroke: var(--trait); stroke-width: 1; }
.dp-repere { stroke: var(--encre); stroke-width: 1.5; stroke-dasharray: 4 3; }
/* Un repère hors du tout, dans une barre empilée : pointillé, sans teinte de famille. */
.dp-repere-barre { fill: none; stroke: var(--encre); stroke-width: 1; stroke-dasharray: 4 3; }
.dp-rupture { stroke: var(--secondaire); stroke-width: 1; stroke-dasharray: 2 3; }
/* `polyline.` : la racine d'un graphique en courbe porte elle aussi la classe `dp-courbe`
 * (`dp-{forme}`) ; sans ce sélecteur, tout son texte héritait du trait. */
polyline.dp-courbe { fill: none; stroke: var(--encre); stroke-width: 2; }
.dp-point { fill: var(--encre); }

/* Une case se désigne au clavier comme à la souris ou au doigt (graphiques.js). */
.dp-case { cursor: pointer; }
.dp-case:focus { outline: none; }
.dp-case:focus > rect, .dp-case:focus > circle, .dp-case.dp-choisie > rect {
  stroke: var(--focus);
  stroke-width: 2.5;
}

/* --- La figure : titre, deux mises en page, panneau, pied, tableau ------------------- */
.dp-figure { margin: 0 0 var(--esp-32); max-width: 640px; }
.dp-figure h3 { font-size: 18px; line-height: 26px; margin: 0 0 var(--esp-12); }
.dp-figure svg { display: block; width: 100%; height: auto; }
.dp-miniature svg { max-width: 320px; }
/* La mise en page étroite sous 640 px : le texte y garde ses 13 px (charte §8). */
.dp-etroit { display: none; }
@media (max-width: 639px) {
  .dp-large { display: none; }
  .dp-etroit { display: block; }
}
/* La mise en page AMPLE (catalogue, instruction #3) : cachée partout. Plus aucune page ne
 * la demande (trop grande, décision du client) ; gardée au cas où un rendu la porterait. */
.dp-ample { display: none; }
.dp-panneau {
  min-height: var(--cible);
  margin: var(--esp-8) 0;
  padding: var(--esp-8) var(--esp-12);
  border: var(--trait-sep);
  border-radius: var(--rayon-bloc);
  background: var(--panneau);
  font-variant-numeric: tabular-nums;
}
.dp-avis { color: var(--secondaire); font-size: 13px; line-height: 20px; }
.dp-pied { font-size: 13px; line-height: 20px; color: var(--secondaire); margin: var(--esp-8) 0 0; padding: 0; list-style: none; }
.dp-pied li { margin: 0; overflow-wrap: anywhere; }
.dp-tableau summary { min-height: var(--cible); display: flex; align-items: center; cursor: pointer; }
.dp-tableau table { font-size: 14px; }
.dp-tableau td, .dp-tableau th { font-variant-numeric: tabular-nums; }

/* --- Sur la page d'un débat (R6) : le bandeau et le tiroir ----------------------------
 *
 * Le BANDEAU est un aperçu discret dans le fil du débat — la miniature, le titre composé,
 * un lien. Le TIROIR est un `<dialog>` : à droite sur grand écran, par le bas sur
 * téléphone. Rien ici n'emprunte les couleurs du vote ni le jaune d'action.
 */
.bandeau-graphiques { margin: 0 0 var(--esp-16); }
.bandeau-graphiques-lien {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-12) var(--esp-16);
  border: var(--trait-sep);
  border-radius: var(--rayon-bloc);
  background: var(--panneau);
  color: var(--encre);
  text-decoration: none;
  max-width: 640px;
}
.bandeau-graphiques-lien:hover { border-color: var(--secondaire); }
.bandeau-graphiques-titre { font-size: 14px; line-height: 20px; }
.bandeau-graphiques-miniature svg { display: block; width: 100%; max-width: 320px; height: auto; }
.bandeau-graphiques-appel { font-size: 13px; color: var(--secondaire); text-decoration: underline; }

.tiroir {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(680px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: var(--esp-16) var(--esp-24) var(--esp-32);
  border: none;
  border-left: var(--trait-sep);
  background: var(--papier);
  color: var(--encre);
  overflow-y: auto;
  z-index: 50;
}
.tiroir::backdrop { background: rgb(0 0 0 / 0.35); }
@media (max-width: 639px) {
  .tiroir {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 88dvh;
    border-left: none;
    border-top: var(--trait-sep);
    border-radius: var(--rayon-bloc) var(--rayon-bloc) 0 0;
    padding: var(--esp-12) var(--esp-16) var(--esp-24);
  }
}
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); }
.tiroir-tete h2 { margin: 0; }
.tiroir-onglets { display: flex; gap: var(--esp-16); border-bottom: var(--trait-sep); margin: var(--esp-12) 0 var(--esp-16); }
.tiroir-onglets a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: var(--cible);
  color: var(--secondaire);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tiroir-onglets a[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }
.tiroir-graphique { padding-bottom: var(--esp-16); border-bottom: var(--trait-sep); margin-bottom: var(--esp-24); }
.tiroir-graphique:focus { outline: 2px solid var(--focus); outline-offset: 4px; }
.verifier-chiffre summary { min-height: var(--cible); display: flex; align-items: center; cursor: pointer; }
.incompris { margin: var(--esp-8) 0 0; }
/* La fiche « vérifier à la source » et les nombres du tableau, hors de l'atelier (dont la
 * feuille n'est pas chargée sur les pages publiques). */
.dp-fiche { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--esp-4) var(--esp-16); margin: var(--esp-8) 0; }
.dp-fiche dt { color: var(--secondaire); }
.dp-fiche dd { margin: 0; overflow-wrap: anywhere; }
.dp-tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-tableau table { max-width: 100%; display: block; overflow-x: auto; }

/* Le DÉPLIAGE d'une case (lot R6 bis) : la case qui a un détail est un lien ; la flèche
   ramène au graphique d'ensemble. */
.dp-lien-case { cursor: pointer; }
.dp-lien-case:focus-visible { outline: none; }
.dp-lien-case:focus-visible .dp-tuile, .dp-lien-case:focus-visible .dp-barre,
.dp-lien-case:hover .dp-tuile, .dp-lien-case:hover .dp-barre { stroke: var(--encre); stroke-width: 2; }
.dp-retour {
  display: inline-flex; align-items: center; gap: var(--esp-8);
  min-height: var(--cible); margin-bottom: var(--esp-8);
  color: inherit; font-weight: 600; text-decoration: underline;
}

/* Le PIED replié (demande du client, 24/09/2026) : la première mention entière, la
   deuxième réduite à une ligne qui s'efface en dégradé, le reste masqué ; un clic déplie.
   Posé par `graphiques.js` : sans lui, le pied reste entier. */
.dp-pied-replie { cursor: pointer; }
.dp-pied-replie > li:nth-child(2) {
  max-height: 20px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}
.dp-pied-replie > li:nth-child(n+3) { display: none; }
.dp-pied-bascule {
  min-height: var(--cible); margin: 0; padding: 0; border: 0; background: none;
  color: var(--secondaire); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer;
}

/* Le CURSEUR (lot curseur, 24/09/2026) : une frise d'années, sans JavaScript. Les boutons
   radio restent dans la page (clavier, lecteur d'écran) mais invisibles ; leurs libellés
   font la frise, en colonnes égales (seize sur grand écran, deux rangs de huit sur
   téléphone) ; le graphique qui suit le bouton coché est le seul montré, sur toute la
   largeur, puis les avis de la frise. Aucune transition : l'année change d'un coup
   (charte §4). */
.dp-curseur { border: 0; margin: 0; padding: 0; min-width: 0; }
.dp-curseur > legend { padding: 0; font-size: 14px; color: var(--secondaire); }
/* `--annees` et `--demi` sont posés par le gabarit : autant de colonnes que d'années sur
   grand écran, la moitié (arrondie au-dessus) sur téléphone. */
.dp-frise { display: grid; grid-template-columns: repeat(var(--annees, 8), minmax(0, 1fr)); }
@media (max-width: 639px) {
  .dp-frise { grid-template-columns: repeat(var(--demi, 8), minmax(0, 1fr)); }
}
.dp-frise-choix { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dp-frise > label {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--cible);
  border-bottom: 2px solid var(--trait);
  color: var(--secondaire); font-size: 13px; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dp-frise > label:hover { color: var(--encre); }
.dp-frise-choix:checked + label { color: var(--encre); font-weight: 700; border-bottom-color: var(--encre); }
.dp-frise-choix:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -2px; }
.dp-annee { order: 1; grid-column: 1 / -1; min-width: 0; display: none; }
.dp-frise-choix:checked + label + .dp-annee { display: block; }
.dp-curseur-avis { order: 2; grid-column: 1 / -1; }

/* --- Sur la page d'une série (page de série simplifiée, 27/09/2026) -------------------
 *
 * Le graphique y est EN GRAND, directement sous l'en-tête, sur toute la largeur du
 * contenu : plus de miniature ni de tiroir. La figure n'a plus sa borne de 640 px ; dès
 * 1180 px d'écran, la mise en page AMPLE (1 180 px, dessinée par le moteur) remplace la
 * large, à l'échelle 1 : le texte y garde ses 13 px (charte §8). En dessous, la large, et
 * l'étroite sous 640 px, comme dans le tiroir.
 */
.graphique-page { margin: 0 0 var(--esp-24); }
.graphique-page .dp-figure { max-width: none; margin-bottom: var(--esp-16); }
.graphique-page .dp-large svg { max-width: 820px; }
@media (min-width: 1180px) {
  .graphique-page .dp-large { display: none; }
  .graphique-page .dp-ample { display: block; }
}
/* Le curseur, le fil et les années d'un niveau de détail : au ras du graphique. La
 * légende « Année affichée » n'est plus lue que par les lecteurs d'écran (la frise se
 * lit seule), et le titre prend toute la largeur : le graphique tient sous l'en-tête. */
.graphique-page .dp-curseur > legend {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.graphique-page .dp-figure h3 { margin: 0 0 var(--esp-8); }
/* Les cases qui n'ont pas (encore) de détail sont des liens aussi — vers leur valeur et
 * leur source — mais sans le soulignement des cases qui se déplient. */
.dp-sans-detail { text-decoration: none; }
/* Les années d'un niveau de détail : des liens (le niveau suit l'adresse), à l'aspect de
 * la frise du curseur. */
.annees-graphique ul {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(var(--annees, 8), minmax(0, 1fr));
}
@media (max-width: 639px) {
  .annees-graphique ul { grid-template-columns: repeat(var(--demi, 8), minmax(0, 1fr)); }
}
.annees-graphique li { margin: 0; }
.annees-graphique a {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--cible);
  border-bottom: 2px solid var(--trait);
  color: var(--secondaire); font-size: 13px; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.annees-graphique a:hover { color: var(--encre); }
.annees-graphique a[aria-current] { color: var(--encre); font-weight: 700; border-bottom-color: var(--encre); }
.annees-graphique a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fil-graphique ol { list-style: none; margin: 0 0 var(--esp-4); padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.fil-graphique li { margin: 0; }
.fil-graphique li + li::before { content: "›"; margin: 0 var(--esp-8); color: var(--secondaire); }
.fil-graphique a { display: inline-flex; align-items: center; min-height: var(--cible); font-weight: 600; }
.fil-graphique [aria-current] { font-weight: 600; }
/* L'avant / après, à la place du graphique : ses deux chiffres en grand. */
.graphique-page .avant-apres .chiffre-grand { font-size: 40px; line-height: 1.2; }
/* Les anciennes ancres (`#panneau`, `#tiroir`) : des repères vides en tête du graphique. */
.ancre-ancienne { display: block; height: 0; }