/* ==========================================================================
   Graphiques du rapport (18/10/2026) : app/services/report/graphiques.py.
   Aucun JavaScript : barres en HTML (longueurs en %), courbes en SVG (abscisses
   en %, ordonnées en pixels). Lisibles de 390 px à l'impression.

   Couleurs : la commune ou le bien en bleu (accent), les repères (département,
   France, normale, modèles 1976-2005) en gris-bleu. Palette catégorielle des
   barres empilées validée (contrôle « dataviz », fond blanc, ordre adjacent).
   Jamais de rouge ni d'orange : réservés aux points d'attention du rapport.
   ========================================================================== */

.gr {
  --gr-a: #3a6db5;        /* accent : la commune, le bien, mesure récente, vers 2050 */
  --gr-r: #b7c3da;        /* repère : département, France, normale, référence */
  --gr-c2: #2e9e7e;
  --gr-c3: #6f5bd0;
  --gr-c4: #5aaee6;
  --gr-c5: #7d879b;
  --gr-encre: #16233b;
  --gr-texte: #44506a;
  --gr-discret: #5d6882;  /* axes, sources : 5,5:1 sur blanc */
  --gr-grille: #e6eaf2;
  --gr-base: #c3cbdb;
  margin: 0.8rem 0 1.2rem;
  padding: 0;
  min-width: 0;
}

/* Couleur portée par la classe, appliquée selon la nature de la marque. */
.gr .gr-accent, .gr .gr-accent-clair, .gr .gr-c1 { --gr-couleur: var(--gr-a); }
.gr .gr-repere { --gr-couleur: var(--gr-r); }
.gr .gr-c2, .gr .gr-c2-creux { --gr-couleur: var(--gr-c2); }
.gr .gr-c3 { --gr-couleur: var(--gr-c3); }
.gr .gr-c4 { --gr-couleur: var(--gr-c4); }
.gr .gr-c5 { --gr-couleur: var(--gr-c5); }
.gr .gr-encre { --gr-couleur: var(--gr-encre); }

/* ---------- Texte autour du graphique ---------- */
.gr-titre { display: block; font-weight: 700; color: var(--gr-encre); font-size: 1rem; line-height: 1.4; margin: 0 0 0.15rem; }
.gr-sous-titre { font-size: 0.84rem; color: var(--gr-discret); margin: 0 0 0.6rem; line-height: 1.45; }
.gr-sous-titre-second { margin: 1rem 0 0.45rem; font-weight: 600; color: var(--gr-texte); }
.gr-source { font-size: 0.76rem; color: var(--gr-discret); margin: 0.55rem 0 0; line-height: 1.45; }
.gr-note { font-size: 0.88rem; margin: 0.6rem 0 0; }
.gr-surtitre { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #55617a; margin: 1.7rem 0 0.35rem; }
.gr-commune > .gr-surtitre:first-child { margin-top: 0.6rem; }
.gr-complement { font-size: 0.9rem; margin: 0.35rem 0 0; }

/* ---------- Légende ---------- */
.gr-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0 0 0.65rem; padding: 0;
  font-size: 0.82rem; color: var(--gr-texte); line-height: 1.35; }
.gr-legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.gr-cle { display: inline-block; flex: 0 0 auto; }
.gr-cle-barre { width: 12px; height: 12px; border-radius: 3px; background: var(--gr-couleur); }
.gr-cle-ligne { width: 18px; height: 2px; border-radius: 1px; background: var(--gr-couleur); }
.gr-cle-point { width: 10px; height: 10px; border-radius: 50%; background: var(--gr-couleur); }
.gr-cle-point-creux { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gr-couleur); background: #fff; }
.gr-cle-losange { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gr-couleur); margin: 0 2px; }
.gr-cle-intervalle { position: relative; width: 16px; height: 10px; }
.gr-cle-intervalle::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--gr-couleur); }
.gr-cle-intervalle::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  border-left: 2px solid var(--gr-couleur); border-right: 2px solid var(--gr-couleur); }

/* ---------- Barres horizontales (HTML) ---------- */
/* Largeur bornée sur ordinateur : la valeur reste près de sa barre. */
.gr-barres, .gr-piles { max-width: 40rem; }
.gr-barres { display: grid; gap: 0.5rem; }
.gr-groupe { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 0.7rem; align-items: center; }
.gr-barres--empile { gap: 0.7rem; }
.gr-barres--empile .gr-groupe { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
.gr-lib { font-size: 0.86rem; color: var(--gr-texte); line-height: 1.3; min-width: 0; }
.gr-barres:not(.gr-barres--empile) > .gr-groupe > .gr-lib { text-align: right; }
.gr-lib:empty { display: none; }
.gr-pistes { display: grid; gap: 2px; min-width: 0; }
.gr-piste { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem; align-items: center; column-gap: 0.45rem;
  line-height: 1.15; }
.gr-rail { position: relative; display: block; height: 12px; }
.gr-barre { position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px; border-radius: 0 4px 4px 0;
  background: var(--gr-couleur); }
.gr-piste:hover .gr-barre { filter: brightness(1.1); }
.gr-val { font-size: 0.84rem; color: #55617a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-val-fort { color: var(--gr-encre); font-weight: 700; }
/* Fourchette des modèles : trait fin à extrémités, par-dessus la barre. */
.gr-intervalle { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--gr-encre); }
.gr-intervalle::before, .gr-intervalle::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px;
  background: var(--gr-encre); }
.gr-intervalle::before { left: -1px; }
.gr-intervalle::after { right: -1px; }
.gr-climat-futur .gr-piste { grid-template-columns: minmax(0, 1fr) 6.8rem; }
/* Évolutions autour de zéro : même teinte pour une hausse et une baisse. */
.gr-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -0.5px; background: #8a93a8; }
.gr-barre-div.gr-negative { border-radius: 4px 0 0 4px; }

/* ---------- Barres empilées à 100 % (HTML) ---------- */
.gr-piles { display: grid; gap: 0.55rem; }
.gr-pile-ligne { display: grid; gap: 0.2rem; }
.gr-pile-ligne > .gr-lib { font-weight: 600; color: var(--gr-encre); font-size: 0.84rem; }
.gr-pile { display: flex; gap: 2px; height: 26px; }
.gr-seg { flex: 1 1 0; min-width: 3px; display: flex; align-items: center; justify-content: center;
  background: var(--gr-couleur); }
.gr-seg:first-child { border-radius: 4px 0 0 4px; }
.gr-seg:last-child { border-radius: 0 4px 4px 0; }
.gr-seg:only-child { border-radius: 4px; }
.gr-seg:hover { filter: brightness(1.1); }
.gr-seg-val { font-size: 0.76rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-tableau-cadre { overflow-x: auto; max-width: 100%; }
.gr-legende-chiffree { border-collapse: collapse; font-size: 0.84rem; margin-top: 0.6rem; line-height: 1.35;
  overflow-wrap: normal; }
.gr-legende-chiffree th, .gr-legende-chiffree td { padding: 0.2rem 0 0.2rem 1rem; text-align: right;
  font-variant-numeric: tabular-nums; vertical-align: top; }
/* Pastille en retrait : un libellé sur deux lignes reste aligné à droite d'elle. */
.gr-legende-chiffree th[scope="row"] { position: relative; padding-left: 1.35rem; text-align: left; font-weight: 400;
  color: var(--gr-texte); }
.gr-legende-chiffree th[scope="row"] .gr-cle { position: absolute; left: 0; top: 0.42rem; }
/* En-tête : coupé entre deux mots seulement (« Franc / e » sinon, à 390 px). */
.gr-legende-chiffree thead th { font-weight: 700; color: var(--gr-encre); font-size: 0.78rem;
  overflow-wrap: normal; word-break: normal; hyphens: manual; }
.gr-legende-chiffree td { white-space: nowrap; }
.gr-legende-chiffree td { color: var(--gr-encre); }

/* ---------- Courbes et histogramme (SVG) ---------- */
.gr-courbe { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.35rem; align-items: start; }
.gr-axe-y { position: relative; font-size: 0.72rem; color: var(--gr-discret); font-variant-numeric: tabular-nums; }
.gr-axe-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.gr-svg { display: block; overflow: visible; font-family: inherit; }
.gr-svg text { font-family: inherit; }
.gr-grille { stroke: var(--gr-grille); stroke-width: 1; }
.gr-base { stroke: var(--gr-base); stroke-width: 1; }
.gr-tic { stroke: var(--gr-base); stroke-width: 1; }
.gr-axe { font-size: 11px; fill: var(--gr-discret); font-variant-numeric: tabular-nums; }
.gr-axe-fort { font-weight: 700; fill: var(--gr-encre); }
.gr-ligne { fill: none; stroke: var(--gr-couleur); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gr-aire { fill: var(--gr-couleur); fill-opacity: 0.1; stroke: none; }
.gr-marque { fill: var(--gr-couleur); stroke: #fff; stroke-width: 2; }
.gr-marque.gr-c2-creux { fill: #fff; stroke: var(--gr-couleur); stroke-width: 2; }
.gr-zone { fill: transparent; }
.gr-etiquette { font-size: 12px; font-weight: 600; fill: var(--gr-texte); paint-order: stroke; stroke: #fff;
  stroke-width: 4px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.gr-etiquette-forte { font-size: 13px; font-weight: 800; fill: var(--gr-encre); }
.gr-etiquette-discrete { font-size: 11.5px; font-weight: 500; fill: #55617a; }
/* Valeur du losange « autour du bien » (relecture du 19/10/2026), dans sa couleur. */
.gr-etiquette-c3 { font-size: 11.5px; font-weight: 700; fill: #5a46b8; }
.gr-colonne { fill: var(--gr-r); stroke: #fff; stroke-width: 1; }
.gr-colonne:hover { fill: #9fb0cf; }
.gr-colonne-nb { stroke: none; }
.gr-mediane { stroke: #55617a; stroke-width: 1; }
.gr-repere-commune { stroke: var(--gr-a); stroke-width: 2; }
.gr-courbe-nb { margin-top: 0.1rem; }

/* ---------- Tableau des chiffres (replié) ---------- */
/* Le résumé est une cible de toucher : 40 px de haut, comme les autres
   lignes repliables du rapport (il en faisait 22 au téléphone, contrôle du
   21/10/2026). Le remplissage remplace la marge du dessus : même écart visible. */
.gr-chiffres { margin-top: 0.15rem; }
.gr-chiffres > summary { cursor: pointer; color: var(--accent, #2563eb); font-weight: 600; font-size: 0.84rem;
  box-sizing: border-box; min-height: 40px; padding: 0.55rem 0; }
.gr-tableau { border-collapse: collapse; margin-top: 0.4rem; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.gr-tableau th, .gr-tableau td { padding: 0.2rem 0 0.2rem 1.1rem; text-align: right; border-bottom: 1px solid #eef1f7; }
.gr-tableau th[scope="row"], .gr-tableau thead th:first-child { padding-left: 0; text-align: left; }
.gr-tableau th[scope="row"] { font-weight: 400; }
.gr-tableau thead th { font-size: 0.78rem; color: var(--gr-encre); }

/* ---------- Téléphone ---------- */
@media (max-width: 560px) {
  .gr-groupe { grid-template-columns: minmax(5.2rem, 34%) minmax(0, 1fr); column-gap: 0.5rem; }
  .gr-piste { grid-template-columns: minmax(0, 1fr) 4rem; }
  .gr-climat-futur .gr-piste { grid-template-columns: minmax(0, 1fr) 6.4rem; }
  .gr-legende { gap: 0.25rem 0.9rem; }
}

/* ---------- Impression : couleurs gardées, figure jamais coupée ---------- */
@media print {
  .gr { break-inside: avoid; page-break-inside: avoid; }
  .gr, .gr * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gr-chiffres > summary { display: none; }
  .gr-tableau th, .gr-tableau td { padding-top: 0; padding-bottom: 0; }
  /* Le surtitre d'un bloc ne reste jamais seul en bas de page. */
  .gr-surtitre { break-after: avoid; page-break-after: avoid; }
}

/* ---------- Contraste élevé (couleurs forcées) : les marques gardent leur
   couleur, la valeur est toujours écrite à côté. ---------- */
@media (forced-colors: active) {
  .gr-barre, .gr-seg, .gr-cle, .gr-intervalle, .gr-zero { forced-color-adjust: none; }
  .gr-svg rect, .gr-svg path, .gr-svg circle, .gr-svg line { forced-color-adjust: none; }
  /* Le texte des courbes suit les couleurs imposées (sinon : encre sombre sur
     fond noir, revue du 18/10/2026). */
  .gr-svg text { fill: CanvasText; stroke: none; }
  .gr-svg .gr-etiquette { stroke: Canvas; }
  .gr-pile { gap: 3px; }
}