/* ========================================================================== carillon-charts.css — jetons + composants du module CarillonCharts. Nouveau fichier : carillon-ui.css N'EST PAS touché. À charger APRÈS carillon-ui.css dans les deux HTML (index.html, admin.html), avec ?v=. Palette VALIDÉE au validateur de la compétence dataviz (exécuté, pas raisonné) : séparation CVD et plancher vision-normale PASS (pire paire adjacente 25,1 en clair / 22,7 en sombre). Bande de luminance et plancher de chroma hors bornes PAR CONSTRUCTION monochrome (écart d'identité assumé) ; l'avertissement de contraste des tons clairs (cat-2, cat-4) impose le relief : légende valorisée + séparateur 2 px systématiques (câblés dans les composants). 6 crans max puis « Autres » ; ordonner les parts en alternant foncé/clair. Sémantique verrouillée : vert = payé / succès confirmé UNIQUEMENT ; vermillon = urgence / impayé en retard UNIQUEMENT ; avertissement = gris. Thème sombre : console admin uniquement, via :root[data-theme="dark"] (le JS admin pose le thème résolu sur ). PAS de media query de thème système ici : le JS décide. Aucun mouvement dans ce fichier ; toute future règle animée devra porter la garde prefers-reduced-motion. ========================================================================== */ :root { --cch-surface: var(--surface, #ffffff); /* Catégoriel neutre — ordre FIXE, validé. */ --cch-cat-1: var(--carillon-bleu, #1546a0); /* bleu France */ --cch-cat-2: #a9c4ec; /* bleu clair dérivé */ --cch-cat-3: var(--carillon-nuit, #071c3b); /* bleu nuit */ --cch-cat-4: #c3cfe0; /* gris bleuté clair */ --cch-cat-5: #4f7ac7; /* bleu moyen */ --cch-cat-6: #2c3a52; /* gris-marine foncé */ --cch-autres: var(--gris-bleute, #e8eef7); --cch-track: var(--gris-bleute, #e8eef7); /* piste de jauge, même gamme */ --cch-success: var(--carillon-vert, #168a4b); /* payé / succès confirmé SEULEMENT */ --cch-danger: var(--carillon-rouge, #e63946); /* urgence / impayé en retard SEULEMENT */ --cch-muted: var(--muted, #596579); /* avertissement = GRIS */ --cch-ink: var(--ink, #071c3b); --cch-line: var(--line, #d9e2ee); --cch-illu-trait: var(--primary, #2e5aac); --cch-illu-fond: var(--gris-bleute, #e8eef7); } :root[data-theme="dark"] { /* Console admin uniquement (le JS pose data-theme résolu). */ --cch-cat-1: #7aa2ff; --cch-cat-2: #2b4a7e; --cch-cat-3: #d4e0f7; --cch-cat-4: #4a5c7d; --cch-cat-5: #a9c2ff; --cch-cat-6: #6e7f9d; --cch-autres: #223050; --cch-track: #223050; --cch-illu-trait: #7aa2ff; --cch-illu-fond: #223050; /* success / danger / ink / muted / line / surface héritent des overrides admin (variables de base) via var(). */ } /* -------------------------------------------------------------------------- Socle -------------------------------------------------------------------------- */ .cch { font-family: var(--font-interface, Inter, ui-sans-serif, system-ui, sans-serif); color: var(--cch-ink, #071c3b); max-width: 100%; } .cch svg { display: block; max-width: 100%; } /* Remplissages (la couleur suit l'ENTITÉ via la classe, jamais le JS). */ .cch-fill--cat1 { fill: var(--cch-cat-1, #1546a0); } .cch-fill--cat2 { fill: var(--cch-cat-2, #a9c4ec); } .cch-fill--cat3 { fill: var(--cch-cat-3, #071c3b); } .cch-fill--cat4 { fill: var(--cch-cat-4, #c3cfe0); } .cch-fill--cat5 { fill: var(--cch-cat-5, #4f7ac7); } .cch-fill--cat6 { fill: var(--cch-cat-6, #2c3a52); } .cch-fill--autres { fill: var(--cch-autres, #e8eef7); } .cch-fill--track { fill: var(--cch-track, #e8eef7); } .cch-fill--success { fill: var(--cch-success, #168a4b); } .cch-fill--danger { fill: var(--cch-danger, #e63946); } .cch-fill--muted { fill: var(--cch-muted, #596579); } /* Lignes : 2 px, extrémités rondes. */ .cch-line--cat1, .cch-line--cat2, .cch-line--cat3, .cch-line--cat4, .cch-line--cat5, .cch-line--cat6, .cch-line--success, .cch-line--danger, .cch-line--muted { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cch-line--cat1 { stroke: var(--cch-cat-1, #1546a0); } .cch-line--cat2 { stroke: var(--cch-cat-2, #a9c4ec); } .cch-line--cat3 { stroke: var(--cch-cat-3, #071c3b); } .cch-line--cat4 { stroke: var(--cch-cat-4, #c3cfe0); } .cch-line--cat5 { stroke: var(--cch-cat-5, #4f7ac7); } .cch-line--cat6 { stroke: var(--cch-cat-6, #2c3a52); } .cch-line--success { stroke: var(--cch-success, #168a4b); } .cch-line--danger { stroke: var(--cch-danger, #e63946); } .cch-line--muted { stroke: var(--cch-muted, #596579); } /* Lavis d'aire des sparklines (même teinte, opacité faible). */ .cch-area--cat1, .cch-area--cat2, .cch-area--cat3, .cch-area--cat4, .cch-area--cat5, .cch-area--cat6, .cch-area--success, .cch-area--danger, .cch-area--muted { stroke: none; fill-opacity: 0.1; } .cch-area--cat1 { fill: var(--cch-cat-1, #1546a0); } .cch-area--cat2 { fill: var(--cch-cat-2, #a9c4ec); } .cch-area--cat3 { fill: var(--cch-cat-3, #071c3b); } .cch-area--cat4 { fill: var(--cch-cat-4, #c3cfe0); } .cch-area--cat5 { fill: var(--cch-cat-5, #4f7ac7); } .cch-area--cat6 { fill: var(--cch-cat-6, #2c3a52); } .cch-area--success { fill: var(--cch-success, #168a4b); } .cch-area--danger { fill: var(--cch-danger, #e63946); } .cch-area--muted { fill: var(--cch-muted, #596579); } .cch-titre { font-size: 13px; font-weight: 600; color: var(--cch-ink, #071c3b); margin: 0 0 8px; } /* -------------------------------------------------------------------------- Donut : séparateur 2 px couleur de surface entre parts adjacentes (relief obligatoire de la palette monochrome). -------------------------------------------------------------------------- */ .cch-donut { margin: 0; } .cch-donut-corps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; } .cch-donut-visuel { position: relative; } .cch-donut-visuel svg path { stroke: var(--cch-surface, #ffffff); stroke-width: 2; stroke-linejoin: round; } .cch-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .cch-centre strong { /* Chiffres proportionnels (pas de tabular-nums hors colonnes). */ font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--cch-ink, #071c3b); } .cch-centre span { font-size: 11px; color: var(--cch-muted, #596579); } /* Légende : toujours présente, TOUJOURS valorisée (jamais la couleur seule). Le texte porte les jetons texte ; la pastille porte l'identité. */ .cch-legende { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; } .cch-lg-row { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--cch-ink, #071c3b); min-width: 0; } .cch-lg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cch-lg-row b { font-weight: 600; white-space: nowrap; } .cch-lg-row small { color: var(--cch-muted, #596579); font-size: 12px; white-space: nowrap; } .cch-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; display: inline-block; } i.cch-dot { font-style: normal; } .cch-dot.cch-fill--cat1 { background: var(--cch-cat-1, #1546a0); } .cch-dot.cch-fill--cat2 { background: var(--cch-cat-2, #a9c4ec); } .cch-dot.cch-fill--cat3 { background: var(--cch-cat-3, #071c3b); } .cch-dot.cch-fill--cat4 { background: var(--cch-cat-4, #c3cfe0); } .cch-dot.cch-fill--cat5 { background: var(--cch-cat-5, #4f7ac7); } .cch-dot.cch-fill--cat6 { background: var(--cch-cat-6, #2c3a52); } .cch-dot.cch-fill--autres { background: var(--cch-autres, #e8eef7); border: 1px solid var(--cch-line, #d9e2ee); } .cch-dot.cch-fill--success { background: var(--cch-success, #168a4b); } .cch-dot.cch-fill--danger { background: var(--cch-danger, #e63946); } .cch-dot.cch-fill--muted { background: var(--cch-muted, #596579); } /* -------------------------------------------------------------------------- Sparkline : dernier point marqué (r 4 + anneau 2 px surface), étiquette directe unique, hairline de base pleine 1 px (jamais pointillée). -------------------------------------------------------------------------- */ .cch-spark-dot { stroke: var(--cch-surface, #ffffff); stroke-width: 2; } .cch-spark-val { font-family: var(--font-interface, Inter, ui-sans-serif, system-ui, sans-serif); font-size: 10px; font-weight: 600; fill: var(--cch-ink, #071c3b); } .cch-hairline { stroke: var(--cch-line, #d9e2ee); stroke-width: 1; } /* -------------------------------------------------------------------------- Barres horizontales : étiquette de valeur TOUJOURS à l'extérieur de la barre (colonne dédiée, jamais clippée) ; pied « X sur Y » si troncature. -------------------------------------------------------------------------- */ .cch-barres { display: flex; flex-direction: column; gap: 8px; } .cch-bar-row { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr) auto; gap: 10px; align-items: center; } .cch-bar-label { font-size: 13px; color: var(--cch-ink, #071c3b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cch-bar-label small { color: var(--cch-muted, #596579); font-size: 11px; } .cch-bar-svg { /* Rétrécit seul (ratio conservé : jamais d'arrondi déformé), ne s'étire pas. */ max-width: 100%; height: auto; justify-self: start; } .cch-bar-val { font-size: 13px; font-weight: 600; color: var(--cch-ink, #071c3b); white-space: nowrap; } .cch-pied { font-size: 12px; color: var(--cch-muted, #596579); } /* -------------------------------------------------------------------------- Tuile KPI : chiffres proportionnels ; badge de tendance GRIS par défaut (une hausse n'est pas un succès confirmé), vermillon/vert en opt-in explicite de l'appelant uniquement. -------------------------------------------------------------------------- */ .cch-tuile { background: var(--cch-surface, #ffffff); border: 1px solid var(--cch-line, #d9e2ee); border-radius: var(--radius, 14px); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 0; min-width: 0; } .cch-tuile--btn { cursor: pointer; width: 100%; font: inherit; color: inherit; } .cch-tuile--btn:focus-visible { outline: 2px solid var(--cch-cat-1, #1546a0); outline-offset: 2px; } .cch-tuile-tete { display: flex; align-items: center; gap: 8px; color: var(--cch-muted, #596579); font-size: 12.5px; font-weight: 600; } .cch-tuile-icone { flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; } .cch-tuile-valeur { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .cch-tuile-chiffre { /* Grands nombres en chiffres proportionnels. */ font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--cch-ink, #071c3b); } .cch-tuile-sous { margin: 0; font-size: 12px; color: var(--cch-muted, #596579); } .cch-tuile-spark { margin-top: 4px; } .cch-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--cch-muted, #596579); position: relative; } .cch-delta--muted { color: var(--cch-muted, #596579); } .cch-delta--danger { color: var(--cch-danger, #e63946); } .cch-delta--success { color: var(--cch-success, #168a4b); } .cch-delta-glyphe { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* -------------------------------------------------------------------------- État vide honnête : l'illustration est décorative, le texte porte le sens et dit quand la donnée apparaîtra. -------------------------------------------------------------------------- */ .cch-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; text-align: center; } .cch-vide strong { font-size: 14px; color: var(--cch-ink, #071c3b); } .cch-vide p { margin: 0; font-size: 12.5px; color: var(--cch-muted, #596579); max-width: 36ch; } .cch-vide-inline { font-size: 12px; color: var(--cch-muted, #596579); } .cch-vide-icone { color: var(--cch-muted, #596579); stroke: currentColor; fill: none; stroke-width: 1.8; } .cch-illu-disc { fill: var(--cch-illu-fond, #e8eef7); } .cch-illu-trait { stroke: var(--cch-illu-trait, #2e5aac); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Texte lisible par lecteur d'écran uniquement. */ .cch-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Empilement mobile du donut (media query de LARGEUR, pas de thème). */ @media (max-width: 560px) { .cch-donut-corps { grid-template-columns: 1fr; justify-items: center; } .cch-legende { width: 100%; } }