/* ==========================================================================
   PE-CHARTS — habillage des graphiques d'article

   Cette feuille est partagee par le SITE et par la CONSOLE : l'auteur doit
   voir dans l'editeur exactement ce que le lecteur verra. La console la charge
   via admin/assets/css/pe-charts.php, qui relaie ce meme fichier (les deux
   hotes sont distincts, et la CSP interdit a l'un de charger une feuille de
   l'autre).

   Les couleurs des SERIES ne sont pas ici : elles vivent dans la configuration
   de chaque graphique. Ici ne figure que le cartouche autour.
   ========================================================================== */

.pe-graph {
    margin: 44px 0 40px;
    padding: 0;
    width: 100%;
}

/* news.php élargit `.rich-text figure` à 120 % au-delà de 800 px, pour l'effet
   cinématique des images. Un graphique n'a pas besoin d'autant de débord : la
   légende et la note deviendraient plus larges que la colonne de lecture, et
   les libellés d'axe se retrouveraient hors du champ de lecture confortable.

   Le sélecteur reprend donc `.rich-text` — même point d'entrée, spécificité
   supérieure (deux classes contre une classe et un élément), donc il l'emporte
   quel que soit l'ordre de chargement des feuilles. Le seuil est aligné sur
   celui de news.php : entre 800 et 900 px, une règle propre à nous aurait
   laissé la règle d'origine s'appliquer seule. */
@media (min-width: 800px) {
    .rich-text .pe-graph {
        width: 114%;
        margin-left: -7%;
        margin-right: 0;
    }
}

@media (max-width: 799px) {
    .rich-text .pe-graph {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.pe-graph__caption {
    display: block;
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
    color: rgba(226, 232, 240, 0.82);
    letter-spacing: 0.1px;
}

/* Le cartouche de tracé. Un fond legerement plus clair que la page suffit a
   detacher le graphique du texte sans le transformer en encart blanc, qui
   eblouirait dans un article sombre. */
.pe-graph__plot {
    position: relative;
    width: 100%;
    min-height: 200px;
    padding: 14px 14px 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    overflow: hidden;
}

.pe-graph__plot canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    /* .rich-text img force width:100% et une bordure ; le canvas n'est pas une
       image, mais on neutralise par precaution les regles d'article trop
       larges. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}

/* Message present dans le HTML enregistre, retire des que le trace commence.
   Il ne s'affiche donc que si JavaScript est absent ou si le CDN est
   injoignable — exactement les cas ou il est utile. */
.pe-graph__pending {
    margin: 0;
    padding: 26px 8px;
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(226, 232, 240, 0.55) !important;
}

.pe-graph.is-rendered .pe-graph__pending { display: none; }

.pe-graph.is-failed .pe-graph__plot {
    min-height: 0;
    height: auto !important;
    padding: 0;
    border: 0;
    background: none;
}

/* Le tableau de reprise. Replie par defaut : il double le graphique, il ne le
   remplace pas — sauf quand le trace echoue, ou il devient la seule source. */
.pe-graph__data {
    margin-top: 12px;
    font-size: 0.92rem;
}

.pe-graph__data > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: rgba(226, 232, 240, 0.78);
    background: rgba(255, 255, 255, 0.03);
    list-style: none;
    transition: background 140ms ease, color 140ms ease;
}

.pe-graph__data > summary::-webkit-details-marker { display: none; }

.pe-graph__data > summary::before {
    content: '▸';
    font-size: 0.75em;
    transition: transform 140ms ease;
}

.pe-graph__data[open] > summary::before { transform: rotate(90deg); }

.pe-graph__data > summary:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.pe-graph__table {
    width: 100%;
    margin: 12px 0 0;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    /* Beaucoup de series : le tableau defile dans sa boite plutot que de
       pousser la page en largeur. */
    display: block;
    overflow-x: auto;
}

.pe-graph__table th,
.pe-graph__table td {
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-align: right;
    white-space: nowrap;
    color: rgba(226, 232, 240, 0.9);
}

.pe-graph__table thead th,
.pe-graph__table tbody th {
    text-align: left;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.pe-graph__note {
    margin: 12px 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    font-style: italic;
    color: rgba(148, 163, 184, 0.92) !important;
}

/* ==========================================================================
   STYLE « SOURCE » DU CORPS D'ARTICLE

   Le menu de formats de l'éditeur propose désormais « Source », qui produit un
   `<p class="pe-note">`. Cette classe existait déjà dans les articles — mais
   uniquement parce que leur auteur avait collé un `<style>` la définissant.
   Un style offert par la barre d'outils ne peut pas dépendre de cela : il doit
   s'afficher pour tout article, y compris celui qui n'embarque aucun CSS.

   D'où sa présence ICI, dans une feuille servie depuis 'self', chargée sur la
   vue détail d'un article et relayée à la console — l'auteur voit donc dans
   l'éditeur ce que le lecteur verra.

   La déclaration d'un article, si elle existe, reste préfixée `.rich-text` et
   porte la même spécificité ; chargée après, elle l'emporte. C'est voulu : on
   fournit un défaut, on ne confisque pas la mise en forme existante.

   Couleur : #777 sur le fond sombre de l'article donne un contraste de 4,2:1,
   sous le seuil de 4,5:1. On reprend donc la teinte de `.pe-graph__note`, qui
   est calibrée pour ce fond. */
.rich-text .pe-note,
.pe-graph .pe-note {
    margin: 10px 0 18px;
    font-size: 0.78rem;
    line-height: 1.6;
    font-style: italic;
    color: rgba(148, 163, 184, 0.92);
}

/* ==========================================================================
   BLOCS DE MÉTRIQUES ET CHAPEAUX — DÉFAUTS SERVIS PAR LE SITE

   POURQUOI CES RÈGLES EXISTENT
   Ces classes — `pe-kpi-*`, `pe-chart-block`, `pe-caption` — sont employées
   depuis toujours dans les articles, mais n'avaient AUCUNE définition côté
   site : elles ne fonctionnaient que parce que l'auteur collait un `<style>`
   dans le corps. Cela tient sur le site publié, où news.php extrait ce bloc,
   l'assainit et le ré-émet avec le nonce de la page.

   Cela ne tient PAS dans la console. L'éditeur reçoit le corps de l'article
   par `innerHTML` (custom-editor.js), `<style>` compris — et ce `<style>` là
   n'a pas de nonce, donc `style-src-elem` le refuse. Message observé, répété
   une fois par éditeur ouvert :

       Applying inline style violates ... 'style-src-elem' ... blocked.
       init @ custom-editor.js:87

   Conséquence pour le rédacteur : les grilles d'indicateurs s'affichaient en
   un seul filet de texte, libellés et valeurs collés. Rapporté comme « ces
   sections ne chargent pas ».

   L'éditeur ne peut pas retirer ce `<style>` comme le fait news.php : son
   contenu EST ce qui sera enregistré, et le retirer supprimerait la mise en
   forme de l'article à la première sauvegarde.

   D'où ces défauts, dans une feuille externe couverte par `'self'` et relayée
   à la console : l'auteur voit la mise en page sans qu'aucun nonce n'entre en
   jeu, et un article qui n'embarque aucun CSS s'affiche correctement lui aussi.

   SPÉCIFICITÉ : identique à celle des règles d'article une fois préfixées
   (`.rich-text .pe-kpi-grid`, deux classes). Le CSS de l'article est émis
   APRÈS cette feuille, il l'emporte donc quand il existe. C'est voulu : on
   fournit un défaut, on ne confisque pas la mise en forme de l'auteur.

   RESTE À SAVOIR : un article portant du CSS vraiment sur mesure (autre chose
   que ces classes) ne se prévisualisera toujours pas dans l'éditeur. Le
   traiter demanderait de sortir prometheus_sanitize_article_css() de news.php
   vers un include partagé, et de le faire émettre par news-form.php sous le
   nonce de la page, cantonné à la zone de rédaction.
   ========================================================================== */

.rich-text .pe-kpi-grid,
.ce-editor .pe-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
    margin: 1.75rem 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.rich-text .pe-kpi-item,
.ce-editor .pe-kpi-item {
    padding: 1.1rem 1.3rem 1rem;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    background: #fff;
}

.rich-text .pe-kpi-item:nth-child(2n),
.ce-editor .pe-kpi-item:nth-child(2n) { background: #fafafa; }

.rich-text .pe-kpi-item:last-child,
.ce-editor .pe-kpi-item:last-child { border-right: none; }

/* `display: block` sur ces quatre-là : ce sont des <span>, et c'est leur
   passage en bloc qui empile libellé, valeur et sous-titre. Sans cette seule
   déclaration, tout le contenu de la carte revient sur une ligne — c'est
   exactement ce que produisait le <style> bloqué. */
.rich-text .pe-kpi-label,
.ce-editor .pe-kpi-label {
    display: block;
    font-size: 0.74em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.rich-text .pe-kpi-value,
.ce-editor .pe-kpi-value {
    display: block;
    font-size: 2.1em;
    font-weight: 700;
    line-height: 1;
    color: #1a3a6b;
    letter-spacing: -0.02em;
}

.rich-text .pe-kpi-sub,
.ce-editor .pe-kpi-sub {
    display: block;
    font-size: 0.75em;
    color: #888;
    margin-top: 0.35rem;
    line-height: 1.4;
}

.rich-text .pe-kpi-delta,
.ce-editor .pe-kpi-delta {
    display: inline-block;
    font-size: 0.78em;
    font-weight: 600;
    color: #c0392b;
    background: #fdf0ee;
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 0.4rem;
}

@media (max-width: 580px) {
    .rich-text .pe-kpi-item,
    .ce-editor .pe-kpi-item { border-right: none; }
}

/* Chapeau d'un bloc à plusieurs graphiques (la figure 3 d'un article converti
   conserve le sien). La COULEUR s'écarte volontairement de celle des articles :
   `#444` sur le fond sombre de la colonne de lecture donne un contraste de
   1,9:1 — le texte est là, et illisible. On reprend la teinte de
   `.pe-graph__note`, calibrée pour ce fond. */
.rich-text .pe-chart-block,
.ce-editor .pe-chart-block { margin: 2rem 0 1.5rem; }

.rich-text .pe-caption,
.ce-editor .pe-caption {
    font-size: 0.82em;
    font-style: italic;
    color: rgba(148, 163, 184, 0.92);
    margin-bottom: 0.6rem;
}

/* ==========================================================================
   PROGRESSION TEMPORELLE — LE CONTRÔLE DE LECTURE

   Construit par assets/js/pe-charts.js au moment du rendu, jamais enregistré
   dans l'article : le balisage stocké doit rester inerte. Un lecteur sans
   JavaScript ne voit donc pas de bouton mort, seulement le tableau de données.
   ========================================================================== */

.pe-graph__player {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}

.pe-graph__play {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border: 1px solid #2b5ba8;
    border-radius: 999px;
    background: #2b5ba8;
    color: #fff;
    font: 500 0.8rem/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
    cursor: pointer;
    transition: filter 120ms ease, background 120ms ease;
}

.pe-graph__play:hover { filter: brightness(1.12); }

/* Le focus reste VISIBLE : ce bouton est la seule commande du graphique, et il
   doit être atteignable au clavier sans deviner où l'on se trouve. */
.pe-graph__play:focus-visible {
    outline: 2px solid #7fb0ff;
    outline-offset: 2px;
}

.pe-graph__play-icon { font-size: 0.72em; line-height: 1; }

/* Chiffres tabulaires : sans cela, le curseur change de largeur à chaque point
   révélé et fait tressauter toute la barre pendant la lecture. */
.pe-graph__cursor {
    font: 400 0.78rem/1.4 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: rgba(226, 232, 240, 0.92);
    min-height: 1.4em;
}

@media print {
    .pe-graph__player { display: none; }
}

/* ==========================================================================
   CADRES DE GRAPHIQUES ANTÉRIEURS À CE MODULE

   Le balisage de ces articles n'est PAS réécrit — une version antérieure
   remplaçait leur <canvas> par un encadré de repli, ce qui revenait à
   transformer le travail d'un auteur pour compenser une panne, et a été
   retiré (voir le commentaire correspondant dans assets/js/pe-charts.js).
   Ici, rien que de la présentation : le HTML reste intact, la règle est
   annulable, et il suffit de la retirer pour revenir en arrière.

   POURQUOI ELLE EST NÉCESSAIRE
   Ces graphiques s'appuyaient sur deux choses : un <script> dans le corps de
   l'article, et un <style> qui dessinait leur cadre. La politique de sécurité
   à nonce a neutralisé les deux — d'où un cadre invisible autour d'un canvas
   vide, qui se fondait dans la page. Rendre au <style> son effet (voir
   prometheus_sanitize_article_css dans news.php) a rétabli les grilles
   d'indicateurs… et rendu ces cadres visibles : un grand rectangle BLANC de
   340 px, vide, au milieu d'un article sombre. La mise en forme est correcte,
   c'est son contenu qui n'existe plus.

   POURQUOI ON PEUT L'AFFIRMER SANS RISQUE
   Aucun script du corps d'un article ne s'exécute, et plus aucun ne le pourra.
   Un <canvas> situé dans `.rich-text` mais HORS d'un `figure.pe-graph` est
   donc, par construction, un canvas que rien ne dessinera jamais. On replie
   son cadre plutôt que d'exposer un vide au lecteur.

   Ce n'est qu'un pansement : la réparation est la conversion du graphique
   depuis la console (fenêtre de construction, import « coller un tableau »),
   qui remplace tout le bloc par une figure vivante.
   ========================================================================== */

.rich-text canvas { display: none; }

/* Nos propres canvas restent visibles : sélecteur plus spécifique (0,2,1
   contre 0,1,1), il l'emporte quel que soit l'ordre des règles. */
.pe-graph__plot canvas { display: block; }

/* Le cadre lui-même. `:has()` cible le conteneur d'après son contenu, ce
   qu'aucun autre sélecteur ne sait faire — et sans lui la boîte garderait sa
   hauteur et son fond. `!important` est indispensable : la hauteur est posée
   en attribut `style=` dans le corps de l'article, et seul `!important` prime
   sur un style en ligne. Les navigateurs sans `:has()` ignorent la règle et
   retrouvent simplement l'ancien comportement — jamais une page cassée. */
/* `:not(.pe-graph__plot)` n'est PAS une précaution théorique : notre propre
   cadre de tracé ne contient, lui aussi, qu'un canvas unique. Sans cette
   exclusion la règle s'y appliquait, et les graphiques du nouveau format
   perdaient hauteur, fond et marge intérieure — mesuré : 198 px au lieu de
   340, fond transparent. Une règle qui vise « le cadre d'un canvas orphelin »
   doit dire explicitement lequel ne l'est pas. */
.rich-text *:has(> canvas:only-child):not(.pe-graph__plot) {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

@media (max-width: 640px) {
    .pe-graph { margin: 32px 0 28px; }
    .pe-graph__plot { padding: 10px 8px 6px; border-radius: 12px; }
    .pe-graph__caption { font-size: 0.84rem; }
}

/* Impression : le trace ne survit pas toujours a l'impression (canvas non
   repeint), le tableau si. On le deplie et on repasse en encre sombre. */
@media print {
    .pe-graph__plot { display: none; }
    .pe-graph__data { display: block; }
    .pe-graph__data > summary { display: none; }
    .pe-graph__caption,
    .pe-graph__note { color: #333 !important; }
    .pe-graph__table { display: table; }
    .pe-graph__table th,
    .pe-graph__table td { color: #111 !important; border-color: #bbb !important; background: none !important; }
}