/* ==========================================================================
    vbx-utilities.css
   --------------------------------------------------------------------------
   Rôle     : Classes utilitaires atomiques pour le placement, l'espacement
              et l'affichage. À utiliser directement dans le HTML pour éviter
              d'écrire du CSS de positionnement dans les fichiers de composants
              ou de pages.

   Chargé   : Après vbx-tokens.css, avant vbx-components.css et les CSS de pages.
   Dépend de: vbx-tokens.css

   Règle    : Ces classes ne touchent JAMAIS à la couleur ou à la typographie.
              Elles gèrent uniquement : display, flexbox, espacement, largeur.

   Nommage  : vbx-u-[propriété]-[valeur]
              "u" = utility — signal immédiat que c'est un utilitaire atomique
   --------------------------------------------------------------------------

   TABLE DES MATIÈRES
   ------------------
   1. Display
   2. Flexbox
   3. Largeurs
   4. Espacements — Margin
   5. Espacements — Padding
   6. Accessibilité
========================================================================== */


/* ==========================================================================
   1. DISPLAY
   ==========================================================================
   Usage : masquer/afficher des éléments sans écrire de CSS spécifique.

   Exemples :
     <div class="vbx-u-hidden">          <- masqué partout
     <div class="vbx-u-hidden-mobile">   <- masqué sur mobile uniquement (max-width: 768px)
     <div class="vbx-u-hidden-touch">    <- masqué sur mobile + tablette (max-width: 1024px)
     <div class="vbx-u-hidden-desktop">  <- masqué sur desktop uniquement (min-width: 1025px)

========================================================================== */

.vbx-u-hidden       { display: none; }
.vbx-u-block        { display: block; }
.vbx-u-inline-block { display: inline-block; }
.vbx-u-flex         { display: flex; }
.vbx-u-inline-flex  { display: inline-flex; }

/* Mobile uniquement : max-width 768px */
@media (max-width: 768px) {
    .vbx-u-hidden-mobile  { display: none; }
    .vbx-u-flex-mobile    { display: flex; }
    .vbx-u-block-mobile   { display: block; }
}

/* Mobile + Tablette : max-width 1024px */
@media (max-width: 1024px) {
    .vbx-u-hidden-touch   { display: none; }
    .vbx-u-flex-touch     { display: flex; }
    .vbx-u-block-touch    { display: block; }
}

/* Desktop uniquement : min-width 1025px */
@media (min-width: 1025px) {
    .vbx-u-hidden-desktop { display: none; }
    .vbx-u-flex-desktop   { display: flex; }
    .vbx-u-block-desktop  { display: block; }
}


/* ==========================================================================
   2. FLEXBOX
   ==========================================================================
   Usage : composer des layouts flex directement dans le HTML.

   Exemple typique :
     <div class="vbx-u-flex vbx-u-items-center vbx-u-justify-between vbx-u-gap-md">
       <span>Label</span>
       <button>Action</button>
     </div>
   ========================================================================== */

/* Direction */
.vbx-u-flex-row { flex-direction: row; }
.vbx-u-flex-col { flex-direction: column; }

/* Alignement croisé */
.vbx-u-items-start   { align-items: flex-start; }
.vbx-u-items-center  { align-items: center; }
.vbx-u-items-end     { align-items: flex-end; }
.vbx-u-items-stretch { align-items: stretch; }

/* Justification principale */
.vbx-u-justify-start   { justify-content: flex-start; }
.vbx-u-justify-center  { justify-content: center; }
.vbx-u-justify-end     { justify-content: flex-end; }
.vbx-u-justify-between { justify-content: space-between; }

/* Retour à la ligne */
.vbx-u-flex-wrap   { flex-wrap: wrap; }
.vbx-u-flex-nowrap { flex-wrap: nowrap; }

/* Croissance */
.vbx-u-flex-1        { flex: 1; }
.vbx-u-flex-auto     { flex: auto; }
.vbx-u-flex-none     { flex: none; }
.vbx-u-flex-shrink-0 { flex-shrink: 0; }

/* Gap — espacement entre enfants flex */
.vbx-u-gap-xs  { gap: var(--vbx-space-xs); }
.vbx-u-gap-sm  { gap: var(--vbx-space-sm); }
.vbx-u-gap-md  { gap: var(--vbx-space-md); }
.vbx-u-gap-lg  { gap: var(--vbx-space-lg); }
.vbx-u-gap-xl  { gap: var(--vbx-space-xl); }

/* Espacement spécifique entre boutons — 10px design system officiel VBX */
.vbx-u-gap-btn { gap: var(--vbx-space-btn); }

/* Mobile uniquement : colonne sur max-width 768px */
@media (max-width: 768px) {
    .vbx-u-flex-col-mobile { flex-direction: column; }
}


/* ==========================================================================
   3. LARGEURS
   ==========================================================================
   Usage : forcer une largeur sans écrire de règle CSS dédiée.
   ========================================================================== */

.vbx-u-w-full     { width: 100%; }
.vbx-u-w-auto     { width: auto; }
.vbx-u-max-w-full { max-width: 100%; }


/* ==========================================================================
   4. ESPACEMENTS — MARGIN
   ==========================================================================
   Nommage : vbx-u-m[t/b/l/r]-[taille]
     t = top | b = bottom | l = left | r = right
   ========================================================================== */

/* Margin top */
.vbx-u-mt-0   { margin-top: 0; }
.vbx-u-mt-xs  { margin-top: var(--vbx-space-xs); }
.vbx-u-mt-sm  { margin-top: var(--vbx-space-sm); }
.vbx-u-mt-md  { margin-top: var(--vbx-space-md); }
.vbx-u-mt-lg  { margin-top: var(--vbx-space-lg); }
.vbx-u-mt-xl  { margin-top: var(--vbx-space-xl); }
.vbx-u-mt-2xl { margin-top: var(--vbx-space-2xl); }
.vbx-u-mt-3xl { margin-top: var(--vbx-space-3xl); }
.vbx-u-mt-4xl { margin-top: var(--vbx-space-4xl); }

/* Margin bottom */
.vbx-u-mb-0   { margin-bottom: 0; }
.vbx-u-mb-xs  { margin-bottom: var(--vbx-space-xs); }
.vbx-u-mb-sm  { margin-bottom: var(--vbx-space-sm); }
.vbx-u-mb-md  { margin-bottom: var(--vbx-space-md); }
.vbx-u-mb-lg  { margin-bottom: var(--vbx-space-lg); }
.vbx-u-mb-xl  { margin-bottom: var(--vbx-space-xl); }
.vbx-u-mb-2xl { margin-bottom: var(--vbx-space-2xl); }
.vbx-u-mb-3xl { margin-bottom: var(--vbx-space-3xl); }
.vbx-u-mb-4xl { margin-bottom: var(--vbx-space-4xl); }

/* Margin left / right */
.vbx-u-ml-auto { margin-left: auto; }
.vbx-u-mr-auto { margin-right: auto; }
.vbx-u-ml-sm   { margin-left: var(--vbx-space-sm); }
.vbx-u-mr-sm   { margin-right: var(--vbx-space-sm); }


/* ==========================================================================
   5. ESPACEMENTS — PADDING
   ==========================================================================
   Nommage : vbx-u-p[x/y]-[taille]
     x = left+right | y = top+bottom
   ========================================================================== */

.vbx-u-p-0   { padding: 0; }
.vbx-u-px-sm { padding-left: var(--vbx-space-sm); padding-right: var(--vbx-space-sm); }
.vbx-u-px-md { padding-left: var(--vbx-space-md); padding-right: var(--vbx-space-md); }
.vbx-u-px-lg { padding-left: var(--vbx-space-lg); padding-right: var(--vbx-space-lg); }
.vbx-u-py-sm { padding-top: var(--vbx-space-sm); padding-bottom: var(--vbx-space-sm); }
.vbx-u-py-md { padding-top: var(--vbx-space-md); padding-bottom: var(--vbx-space-md); }
.vbx-u-py-lg { padding-top: var(--vbx-space-lg); padding-bottom: var(--vbx-space-lg); }


/* ==========================================================================
   6. ACCESSIBILITÉ
   ==========================================================================
   vbx-u-sr-only : masque visuellement un élément tout en le gardant
                   accessible aux lecteurs d'écran.

   Usage :
     <span class="vbx-u-sr-only">Chargement en cours</span>
   ========================================================================== */

.vbx-u-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;
}