/* ═══════════════════════════════════════════════════════════════════════
paso-2026.css — RAFFINEMENT DE LA CHARTE, opt-in par simple .
───────────────────────────────────────────────────────────────────────
Validé avec Julien sur maquette (2026-07-27). Ne change NI la palette,
NI la famille typographique (Inter reste). Ce qui bouge : l'échelle
descend, l'ombre cède au filet, les rayons se resserrent, les
micro-libellés se calment, l'amber redevient rare.
── POURQUOI CE FICHIER EXISTE PLUTÔT QU'UNE MODIFICATION EN PLACE ──
Aucun outil ne le charge par défaut. L'adopter = ajouter une ligne :
APRÈS paso-ui.css. On bascule donc outil par outil, et on revient en
arrière en retirant la ligne. Zéro migration de masse, zéro risque.
── POURQUOI IL EST HORS @layer ──
paso-ui.css est volontairement non-layeré (filet de sécurité de la
migration). Le non-layeré gagne toujours sur le layeré : pour le
surcharger, ce fichier doit donc être non-layeré AUSSI, et chargé
APRÈS lui — à spécificité égale, c'est l'ordre de source qui tranche.
── CE QUE ÇA NE FAIT PAS ──
Les outils qui définissent leurs PROPRES classes locales (ex. le
`.sec-title` du bilan) ne sont pas touchés : ce fichier n'agit que sur
les tokens et sur les classes de la bibliothèque. Chaque outil migré
doit aligner ses classes locales sur les tokens.
Maquette de référence : les 7 changements sont documentés dedans.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* ─── 1 · RAYONS — précision plutôt que grand public ────────────────
Un grand rayon lit « amical/grand public », un rayon serré lit
« précis/professionnel ». Le bouton garde son coin asymétrique :
c'est le SEUL endroit où la marque se signe dans la forme. */
--radius-xl: 12px;
--radius-lg: 10px;
--radius-md: 6px;
--radius-sm: 4px;
--btn-radius: 6px 6px 12px 6px; /* validé Julien : 12, pas 16 ni 10 */
/* ─── 2 · ÉLÉVATION — l'ombre est réservée à ce qui FLOTTE ──────────
Une carte posée n'a aucune raison de léviter : un filet de 1px
suffit. C'est le marqueur le plus visible entre 2018 et 2026.
--shadow-sm passe à none (il n'habille que des surfaces posées) ;
--shadow-md/-lg restent, ils servent aux overlays (feuille, modale,
palette, menu de select) qui, eux, flottent vraiment. */
--shadow-sm: none;
--elevation-1: none;
/* ─── 3 · ÉCHELLE — la hiérarchie passe au POIDS, pas à la taille ───
Un titre de section à 28-36px, c'est de l'échelle affiche dans du
chrome d'application. */
--fs-h2: 19px;
--fs-h3: 15px;
--fs-body-lg: 14px;
--fs-body: 13px;
--fs-sm: 12.5px;
--fs-xs: 11.5px;
--fs-label: 9.5px;
--lh-body: 1.55;
/* ─── 4 · MICRO-LIBELLÉS — accompagner, pas concurrencer ────────────
Ils passent de 700/.13em à 600/.06em : le chiffre redevient
l'élément le plus fort de la carte. */
--tracking-eyebrow: .09em;
--tracking-tag: .06em;
}
/* ═══ 5 · DENSITÉ ── ~25 % d'information en plus par écran ═══════════ */
.pui-card { padding: 14px 16px; box-shadow: none; }
.pui-kpi { padding: 13px 15px; gap: 5px; }
.pui-kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -.028em; }
.pui-kpi-label { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--gray-400); }
.pui-kpi--lg .pui-kpi-value { font-size: 26px; }
/* ═══ 6 · EYEBROW & TITRES — on cesse de crier ══════════════════════ */
.pui-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: .09em; color: var(--gray-400); }
/* L'eyebrow ambre est conservé là où il porte vraiment un accent. */
.pui-eyebrow--rule { color: var(--amber); }
.puic-section-title { font-size: 19px; font-weight: 700; letter-spacing: -.022em; }
.puic-section-desc { font-size: 12.5px; }
.puic-section-head { padding-bottom: 13px; border-bottom: 1px solid var(--gray-200); margin-bottom: 16px; }
/* ═══ 7 · BOUTONS — plus compacts, ombre ambre retirée ══════════════
L'ombre colorée sous un bouton est le dernier reliquat « 2018 ».
La couleur suffit à signaler l'action principale. */
.pui-btn { padding: 9px 15px; font-size: 12.5px; }
.pui-btn--sm { padding: 7px 12px; font-size: 11.5px; }
.pui-btn--lg { padding: 11px 20px; font-size: 13.5px; }
.pui-btn--amber { box-shadow: none; }
.pui-btn--amber:hover { box-shadow: none; background: var(--amber-dark); }
.pui-btn--outline { border-width: 1px; border-color: var(--gray-200); color: var(--navy); }
/* ═══ 8 · TABLEAUX — en-tête gris CONSERVÉ (retour Julien) ══════════
Le gris léger sépare l'en-tête du corps sans qu'on ait besoin d'un
trait plus fort : il fait le travail de deux éléments. */
.puic-table th { background: var(--gray-50); font-size: 9.5px; letter-spacing: .06em; padding: 9px 14px; }
.puic-table td { padding: 9px 14px; font-size: 12px; }
.puic-table-head { padding: 11px 14px; }
.puic-table-wrap { box-shadow: none; }
/* ═══ 9 · BANDEAU — icône + barre latérale CONSERVÉES (retour Julien),
à l'échelle resserrée, et il se DÉCLINE au lieu d'être tout ambre ═══ */
.pui-action-banner { padding: 11px 14px 11px 17px; grid-template-columns: 28px 1fr auto; gap: 12px; }
.pui-action-icon { width: 28px; height: 28px; border-radius: var(--radius-md); }
.pui-action-title { font-size: 12px; }
.pui-action-desc { font-size: 11.5px; }
.pui-action-meta { background: transparent; padding: 0; font-size: 10px; color: var(--gray-400); }
/* ═══ 10 · CHAMPS ══════════════════════════════════════════════════ */
.pui-field input, .pui-field select, .pui-field textarea { font-size: 12.5px; padding: 8px 10px; }
.pui-field label { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; }
/* ═══ 11 · SURFACES — grouper SANS encadrer ════════════════════════
La variété vient de la surface, pas d'un décor ajouté : c'est ce qui
garde l'élégance en évitant la page blanche et plate. */
.pui-zone-tint {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
/* Carte inversée : ancre une rangée de KPI et rappelle que la couleur
PRINCIPALE de la marque est le bleu — l'amber n'y est qu'un libellé. */
.pui-card--ink { background: var(--navy); border-color: var(--navy); color: #fff; }
.pui-card--ink .pui-kpi-label { color: var(--amber); }
.pui-card--ink .pui-kpi-value { color: #fff; }
.pui-card--ink .pui-kpi-sub,
.pui-card--ink .pui-kpi-foot { color: color-mix(in srgb, #fff 55%, transparent); }
/* ═══ 12 · RAILS DE CATÉGORIE — la palette large enfin PORTEUSE DE SENS
Mêmes couleurs dans un tableau et dans un graphe : on lit les deux
avec la même grammaire. */
.pui-rail { display: inline-block; width: 3px; height: 13px; border-radius: 2px; margin-right: 9px; vertical-align: -2px; }
.pui-rail--brand { background: var(--navy-mid); }
.pui-rail--acq { background: var(--info); }
.pui-rail--pmax { background: var(--purple); }
.pui-rail--other { background: var(--gray-400); }