/* ======================================================
   📦 utilities.css — Tyshara (COMPLET v2.0)
   Utility classes exhaustives construites sur la palette
   ====================================================== */

/********  A. COULEURS  ********/
/* Texte */
.text-white        { color:#fff!important }
.text-black        { color:#000!important }
.text-linbrume     { color:var(--ty-lin-brume)!important }
.text-anthracite   { color:var(--ty-anthracite-velours)!important }
.text-gold         { color:var(--ty-poussiere-or)!important }
.text-corail       { color:var(--ty-corail-alchimie)!important }
.text-prusse       { color:var(--ty-bleu-prusse)!important }
.text-eau          { color:var(--ty-eau-profonde)!important }
.text-success      { color:var(--ty-success)!important }
.text-error        { color:var(--ty-error)!important }

/* Background solides & gradients */
.bg-transparent      { background:transparent!important }
.bg-linbrume         { background:var(--ty-lin-brume)!important }
.bg-prusse           { background:var(--ty-bleu-prusse)!important; color:var(--ty-lin-brume) }
.bg-nuage            { background:var(--ty-nuage-pastel)!important }
.bg-or-corail        { background:var(--gradient-or-corail)!important; color:#fff }
.bg-prusse-gradient  { background:var(--gradient-prusse-celadon)!important; color:var(--ty-lin-brume) }

/********  B. SPACING  ********/
/* Padding */
.p-0   { padding:0!important }
.p-xxs { padding:var(--space-xxs)!important }
.p-xs  { padding:var(--space-xs)!important }
.p-sm  { padding:var(--space-sm)!important }
.p-md  { padding:var(--space-md)!important }
.p-lg  { padding:var(--space-lg)!important }
.p-xl  { padding:var(--space-xl)!important }
/* Padding axis */
.py-md { padding-block:var(--space-md)!important }
.px-lg { padding-inline:var(--space-lg)!important }
/* Margin */
.m-0   { margin:0!important }
.mt-md { margin-top:var(--space-md)!important }
.mb-lg { margin-bottom:var(--space-lg)!important }
.my-xl { margin-block:var(--space-xl)!important }
.mx-auto{ margin-inline:auto!important }

/********  C. TYPOGRAPHIE  ********/
.fs-xs { font-size:var(--fs-xs)!important }
.fs-sm { font-size:var(--fs-sm)!important }
.fs-md { font-size:var(--fs-md)!important }
.fs-lg { font-size:var(--fs-lg)!important }
.fs-xl { font-size:var(--fs-xl)!important }
.text-center { text-align:center!important }
.font-bold   { font-weight:700!important }
.uppercase   { text-transform:uppercase!important }

/********  D. LAYOUT & FLEX  ********/
.d-block { display:block!important }
.d-inline{ display:inline-block!important }
.d-flex  { display:flex!important }
.flex-center{ align-items:center!important; justify-content:center!important }
.flex-col { flex-direction:column!important }
.justify-between{ justify-content:space-between!important }
.items-start{ align-items:flex-start!important }
.gap-sm { gap:var(--space-sm)!important }

/********  E. GRID  ********/
.grid    { display:grid!important }
.grid-2  { grid-template-columns:repeat(2,1fr)!important }
.grid-3  { grid-template-columns:repeat(3,1fr)!important }
.gap-md { gap:var(--space-md)!important }

/********  F. RADIUS & OMBRES  ********/
.radius-xs { border-radius:var(--radius-xs)!important }
.radius-sm { border-radius:var(--radius-sm)!important }
.radius-md { border-radius:var(--radius-md)!important }
.radius-lg { border-radius:var(--radius-lg)!important }
.shadow-soft   { box-shadow:var(--shadow-soft)!important }
.shadow-medium { box-shadow:var(--shadow-medium)!important }

/********  G. VISIBILITY  ********/
.d-none { display:none!important }
@media (max-width:var(--bp-sm)){
  .hide-sm { display:none!important }
}