/* ============================================================================
 * UTILITAIRES — lot 7d, 2026-08-29
 * ============================================================================
 * Générés depuis les attributs `style=` des gabarits, dont ils prennent la
 * place. Préalable au retrait de `style-src-attr 'unsafe-inline'` de la CSP :
 * un attribut `style=` est du style inline au même titre qu'un bloc <style>.
 *
 * Nommage volontairement littéral — `.mb-3` pour `margin-bottom: var(--sp-3)`.
 * Une classe opaque serait MOINS lisible que l'attribut qu'elle remplace ; ces
 * noms-là se lisent aussi bien.
 * ========================================================================= */

.bg-subtle { background: var(--surface-subtle); }
.bordure { border: 1px solid var(--surface-border); }
.cursor-pointer { cursor: pointer; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-22 { font-size: 22px; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.gap-12px { gap: 12px; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6px { gap: 6px; }
.gap-8px { gap: 8px; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.m-0 { margin: 0; }
.mb-12px { margin-bottom: 12px; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-20px { margin-bottom: 20px; }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8px { margin-bottom: 8px; }
.ml-3 { margin-left: var(--sp-3); }
.ml-5 { margin-left: var(--sp-5); }
.ml-auto { margin-left: auto; }
.mt-2 { margin-top: var(--sp-2); }
.mt-20px { margin-top: 20px; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-4px { margin-top: 4px; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6px { margin-top: 6px; }
.mt-8px { margin-top: 8px; }
.overflow-hidden { overflow: hidden; }
.p-4 { padding: var(--sp-4); }
.p-5 { padding: var(--sp-5); }
.pt-1 { padding-top: var(--sp-1); }
.text-center { text-align: center; }
.txt-muted { color: var(--text-muted); }
.txt-secondary { color: var(--text-secondary); }
.w-auto { width: auto; }
.mb-6px { margin-bottom: 6px; }
.txt-primary { color: var(--text-primary); }
.w-100 { width: 100%; }
.fs-20 { font-size: 20px; }

/* ---------------------------------------------------------------------------
 * Ajouts du lot A (2026-08-30) — pour les 156 `style=` qui vivaient dans le
 * JavaScript. Le lot 7d n'avait traité que les gabarits ; un attribut `style=`
 * posé par `innerHTML` est du style inline exactement au même titre.
 * ------------------------------------------------------------------------ */

/* Couleurs sémantiques — 86 des 156 déclarations étaient un `color:`. */
.txt-success  { color: var(--color-success); }
.txt-danger   { color: var(--color-danger); }
.txt-warning  { color: var(--color-warning); }
.txt-info     { color: var(--color-info); }
.txt-accent   { color: var(--color-primary); }

/* Typographie */
.font-mono    { font-family: var(--font-mono); }
.font-inherit { font-family: inherit; }
.fs-15        { font-size: 15px; }
.fs-16        { font-size: 16px; }
.fs-08em      { font-size: 0.8em; }
.fs-085em     { font-size: 0.85em; }
.lh-15        { line-height: 1.5; }
.ls-03        { letter-spacing: .03em; }
.ls-05        { letter-spacing: .05em; }
.text-upper   { text-transform: uppercase; }

/* Affichage et flux */
.d-inline-block { display: inline-block; }
.d-none         { display: none; }
.flex-shrink-0  { flex-shrink: 0; }
.grid-col-full  { grid-column: 1 / -1; }
.align-middle   { vertical-align: middle; }
.nowrap         { white-space: nowrap; }
.word-break     { word-break: break-word; }
.ellipsis       { text-overflow: ellipsis; }

/* Espacement */
.gap-10px  { gap: 10px; }
.gap-20px  { gap: 20px; }
.mb-15px   { margin-bottom: 15px; }
.mt-2px    { margin-top: 2px; }
.mt-32px   { margin-top: 32px; }
.mr-1      { margin-right: var(--sp-1); }
.mr-4      { margin-right: var(--sp-4); }
.mr-4px    { margin-right: 4px; }
.ml-4px    { margin-left: 4px; }
.p-3       { padding: var(--sp-3); }
.p-8px     { padding: 8px; }
.py-8px    { padding: 8px 0; }
.p-chip    { padding: 2px 7px; }
.p-chip-lg { padding: 2px 8px; }

/* Dimensions */
.mw-100  { max-width: 100%; }
.mw-220  { max-width: 220px; }
.mw-240  { max-width: 240px; }
.mw-300  { max-width: 300px; }
.mw-460  { max-width: 460px; }
.mw-640  { max-width: 640px; }

/* Divers */
.opacity-30    { opacity: .3; }
.opacity-70    { opacity: .7; }
.cursor-help    { cursor: help; }
.cursor-inherit { cursor: inherit; }
.br-6   { border-radius: 6px; }
.br-8   { border-radius: 8px; }
.br-10  { border-radius: 10px; }