/* =========================================================
   🏆 FORMATION SPORT 94 — UTILITIES.CSS
   Petites classes utilitaires réutilisables
   Version Production 2026
   ========================================================= */

@layer utilities {

  /* =======================================================
     TEXTE
     ======================================================= */

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-muted {
    color: var(--muted);
  }

  .text-soft {
    color: var(--text-soft);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-accent {
    color: var(--accent);
  }

  .text-danger {
    color: var(--red-fr);
  }

  .fw-700 {
    font-weight: 700;
  }

  .fw-800 {
    font-weight: 800;
  }

  .fw-900 {
    font-weight: 900;
  }

  /* =======================================================
     ACCESSIBILITÉ
     ======================================================= */

  .sr-only {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
  }

  .not-sr-only {
    position: static;

    width: auto;
    height: auto;
    padding: 0;
    margin: 0;

    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* =======================================================
     AFFICHAGE
     ======================================================= */

  .hidden {
    display: none !important;
  }

  .block {
    display: block;
  }

  .inline-block {
    display: inline-block;
  }

  .flex {
    display: flex;
  }

  .inline-flex {
    display: inline-flex;
  }

  .grid {
    display: grid;
  }

  /* =======================================================
     FLEX HELPERS
     ======================================================= */

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-column {
    flex-direction: column;
  }

  .gap-xs {
    gap: var(--space-xs);
  }

  .gap-sm {
    gap: var(--space-sm);
  }

  .gap-md {
    gap: var(--space-md);
  }

  .gap-lg {
    gap: var(--space-lg);
  }

  .gap-xl {
    gap: var(--space-xl);
  }

  /* =======================================================
     LARGEURS
     ======================================================= */

  .w-full {
    width: 100%;
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-lg {
    max-width: var(--container);
  }

  .mx-auto {
    margin-inline: auto;
  }

  /* =======================================================
     MARGES — TOP
     ======================================================= */

  .mt-0 {
    margin-top: 0;
  }

  .mt-xs {
    margin-top: var(--space-xs);
  }

  .mt-sm {
    margin-top: var(--space-sm);
  }

  .mt-md {
    margin-top: var(--space-md);
  }

  .mt-lg {
    margin-top: var(--space-lg);
  }

  .mt-xl {
    margin-top: var(--space-xl);
  }

  .mt-2xl {
    margin-top: var(--space-2xl);
  }

  .mt-3xl {
    margin-top: var(--space-3xl);
  }

  /* =======================================================
     MARGES — BOTTOM
     ======================================================= */

  .mb-0 {
    margin-bottom: 0;
  }

  .mb-xs {
    margin-bottom: var(--space-xs);
  }

  .mb-sm {
    margin-bottom: var(--space-sm);
  }

  .mb-md {
    margin-bottom: var(--space-md);
  }

  .mb-lg {
    margin-bottom: var(--space-lg);
  }

  .mb-xl {
    margin-bottom: var(--space-xl);
  }

  .mb-2xl {
    margin-bottom: var(--space-2xl);
  }

  .mb-3xl {
    margin-bottom: var(--space-3xl);
  }

  /* =======================================================
     PADDINGS
     ======================================================= */

  .p-0 {
    padding: 0;
  }

  .p-xs {
    padding: var(--space-xs);
  }

  .p-sm {
    padding: var(--space-sm);
  }

  .p-md {
    padding: var(--space-md);
  }

  .p-lg {
    padding: var(--space-lg);
  }

  .p-xl {
    padding: var(--space-xl);
  }

  .px-md {
    padding-inline: var(--space-md);
  }

  .px-lg {
    padding-inline: var(--space-lg);
  }

  .py-md {
    padding-block: var(--space-md);
  }

  .py-lg {
    padding-block: var(--space-lg);
  }

  .py-xl {
    padding-block: var(--space-xl);
  }

  /* =======================================================
     RADIUS
     ======================================================= */

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded {
    border-radius: var(--radius);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-full {
    border-radius: 999px;
  }

  /* =======================================================
     SURFACES
     ======================================================= */

  .bg-main {
    background: var(--bg);
  }

  .bg-alt {
    background: var(--bg-alt);
  }

  .bg-surface {
    background: var(--surface);
  }

  .bg-primary {
    background: var(--primary);
    color: #FFFFFF;
  }

  .bg-primary-soft {
    background: var(--primary-soft);
  }

  .bg-accent-soft {
    background: var(--accent-soft);
  }

  /* =======================================================
     BORDURES / OMBRES
     ======================================================= */

  .border {
    border: 1px solid var(--border);
  }

  .border-strong {
    border: 1px solid var(--border-strong);
  }

  .border-accent {
    border: 1px solid var(--border-accent);
  }

  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow {
    box-shadow: var(--shadow);
  }

  .shadow-premium {
    box-shadow: var(--shadow-premium);
  }

  /* =======================================================
     IMAGES
     ======================================================= */

  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* =======================================================
     POSITION
     ======================================================= */

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  /* =======================================================
     RESPONSIVE HELPERS
     ======================================================= */

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: initial;
  }

  @media (min-width: 768px) {
    .desktop-only {
      display: initial;
    }

    .mobile-only {
      display: none !important;
    }
  }

  /* =======================================================
     PRINT
     ======================================================= */

  @media print {
    .print-hidden {
      display: none !important;
    }

    .print-block {
      display: block !important;
    }
  }
}