/* utilities.css — couche d'utilitaires (couche design).
   Remplace les styles inline RÉPÉTÉS par des classes réutilisables. Chargée
   globalement APRÈS les autres CSS via partials/head.ejs. `!important` car un
   utilitaire remplace un style inline (qui gagnait sur les classes) : il doit
   conserver cette priorité. Convention de nom : valeur encodée (rem×100, ou suffixe px).
   Les valeurs rares / raccourcis multi-marges / dynamiques restent inline. */

/* ── Affichage & flex ── */
.u-flex { display: flex !important; }
.u-grid { display: grid !important; }
.u-block { display: block !important; }
.u-inline-flex { display: inline-flex !important; }
.u-inline-block { display: inline-block !important; }
.u-inline { display: inline !important; }
.u-hidden { display: none !important; }
.u-items-center { align-items: center !important; }
.u-items-start { align-items: flex-start !important; }
.u-items-end { align-items: flex-end !important; }
.u-items-baseline { align-items: baseline !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-flex-col { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-1 { flex: 1 !important; }
.u-shrink-0 { flex-shrink: 0 !important; }
.u-min-w-0 { min-width: 0 !important; }

/* ── Alignement texte ── */
.u-text-right { text-align: right !important; }
.u-text-center { text-align: center !important; }
.u-text-left { text-align: left !important; }

/* ── Taille de police (rem×100 ; suffixe px pour les valeurs en pixels) ── */
.u-fs-70 { font-size: 0.7rem !important; }
.u-fs-72 { font-size: 0.72rem !important; }
.u-fs-74 { font-size: 0.74rem !important; }
.u-fs-75 { font-size: 0.75rem !important; }
.u-fs-76 { font-size: 0.76rem !important; }
.u-fs-78 { font-size: 0.78rem !important; }
.u-fs-80 { font-size: 0.8rem !important; }
.u-fs-82 { font-size: 0.82rem !important; }
.u-fs-84 { font-size: 0.84rem !important; }
.u-fs-85 { font-size: 0.85rem !important; }
.u-fs-86 { font-size: 0.86rem !important; }
.u-fs-88 { font-size: 0.88rem !important; }
.u-fs-90 { font-size: 0.9rem !important; }
.u-fs-92 { font-size: 0.92rem !important; }
.u-fs-95 { font-size: 0.95rem !important; }
.u-fs-100 { font-size: 1rem !important; }
.u-fs-105 { font-size: 1.05rem !important; }
.u-fs-150 { font-size: 1.5rem !important; }
.u-fs-11px { font-size: 11px !important; }
.u-fs-13px { font-size: 13px !important; }
.u-fs-14px { font-size: 14px !important; }

/* ── Graisse & style de police ── */
.u-fw-400 { font-weight: 400 !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }
.u-mono { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; }
.u-italic { font-style: italic !important; }

/* ── Couleurs de texte (sémantiques, tokens de la palette) ── */
.u-text-navy { color: var(--navy) !important; }
.u-text-secondary { color: var(--label-secondary) !important; }
.u-text-slate { color: var(--slate) !important; }
.u-text-primary { color: var(--label-primary) !important; }
.u-text-accent { color: var(--accent) !important; }
.u-text-green { color: var(--system-green) !important; }
.u-text-red { color: var(--system-red) !important; }
.u-text-body { color: var(--text) !important; }
.u-text-inherit { color: inherit !important; }

/* ── Marge nulle / padding nul ── */
.u-m-0 { margin: 0 !important; }
.u-p-0 { padding: 0 !important; }

/* ── Marge basse (rem×100) ── */
.u-mb-25 { margin-bottom: 0.25rem !important; }
.u-mb-30 { margin-bottom: 0.3rem !important; }
.u-mb-40 { margin-bottom: 0.4rem !important; }
.u-mb-50 { margin-bottom: 0.5rem !important; }
.u-mb-70 { margin-bottom: 0.7rem !important; }
.u-mb-85 { margin-bottom: 0.85rem !important; }
.u-mb-100 { margin-bottom: 1rem !important; }
.u-mb-125 { margin-bottom: 1.25rem !important; }
.u-mb-150 { margin-bottom: 1.5rem !important; }

/* ── Marge haute (rem×100) ── */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-15 { margin-top: 0.15rem !important; }
.u-mt-20 { margin-top: 0.2rem !important; }
.u-mt-25 { margin-top: 0.25rem !important; }
.u-mt-30 { margin-top: 0.3rem !important; }
.u-mt-50 { margin-top: 0.5rem !important; }
.u-mt-60 { margin-top: 0.6rem !important; }
.u-mt-70 { margin-top: 0.7rem !important; }
.u-mt-85 { margin-top: 0.85rem !important; }
.u-mt-90 { margin-top: 0.9rem !important; }
.u-mt-100 { margin-top: 1rem !important; }
.u-mt-125 { margin-top: 1.25rem !important; }
.u-mt-150 { margin-top: 1.5rem !important; }

/* ── Espacement flex/grid (gap, rem×100) ── */
.u-gap-30 { gap: 0.3rem !important; }
.u-gap-35 { gap: 0.35rem !important; }
.u-gap-40 { gap: 0.4rem !important; }
.u-gap-45 { gap: 0.45rem !important; }
.u-gap-50 { gap: 0.5rem !important; }
.u-gap-60 { gap: 0.6rem !important; }
.u-gap-70 { gap: 0.7rem !important; }
.u-gap-80 { gap: 0.8rem !important; }
.u-gap-85 { gap: 0.85rem !important; }
.u-gap-100 { gap: 1rem !important; }
.u-gap-125 { gap: 1.25rem !important; }

/* ── Divers (générique, sûr) ── */
.u-nowrap { white-space: nowrap !important; }
.u-pre-wrap { white-space: pre-wrap !important; }
.u-w-full { width: 100% !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-no-underline { text-decoration: none !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-x-auto { overflow-x: auto !important; }
.u-list-none { list-style: none !important; }
.u-uppercase { text-transform: uppercase !important; }
.u-col-full { grid-column: 1 / -1 !important; }
.u-col-span-2 { grid-column: span 2 !important; }