/* ==========================================================================
   vbx-utilities.css
   --------------------------------------------------------------------------
   Rôle     : Classes utilitaires atomiques pour le placement, l'espacement,
              l'affichage et la typographie. À utiliser directement dans le
              HTML pour éviter d'écrire du CSS répétitif 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

   Nommage  : vbx-u-[propriété]-[valeur]

   --------------------------------------------------------------------------

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


/* ==========================================================================
   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: 767px)
     <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 767px */
@media (max-width: 767px) {
    .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 767px */
@media (max-width: 767px) {
    .vbx-u-flex-col-mobile { flex-direction: column; }
    .vbx-u-flex-row-mobile { flex-direction: row; }    /* AJOUT */
}


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

.vbx-u-w-full     { width: 100%; }
.vbx-u-w-half     { width: 50%; }          /* AJOUT */
.vbx-u-w-auto     { width: auto; }
.vbx-u-max-w-full { max-width: 100%; }

/* Mobile uniquement */
@media (max-width: 767px) {
    .vbx-u-w-full-mobile { width: 100%; }  /* AJOUT */
}


/* ==========================================================================
   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-mx-auto { margin-left: auto; margin-right: auto; }  /* AJOUT */
.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-ml-md   { margin-left: var(--vbx-space-md); }       /* AJOUT */
.vbx-u-ml-lg   { margin-left: var(--vbx-space-lg); }       /* AJOUT */
.vbx-u-mr-sm   { margin-right: var(--vbx-space-sm); }
.vbx-u-mr-md   { margin-right: var(--vbx-space-md); }      /* AJOUT */
.vbx-u-mr-lg   { margin-right: var(--vbx-space-lg); }      /* AJOUT */


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

.vbx-u-p-0    { padding: 0; }
.vbx-u-p-lg   { padding: var(--vbx-space-lg); }                                              /* AJOUT */
.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-px-xl  { padding-left: var(--vbx-space-xl);  padding-right: var(--vbx-space-xl); }   /* AJOUT */
.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); }
.vbx-u-py-xl  { padding-top: var(--vbx-space-xl);   padding-bottom: var(--vbx-space-xl); }  /* AJOUT */
.vbx-u-py-2xl { padding-top: var(--vbx-space-2xl);  padding-bottom: var(--vbx-space-2xl); } /* AJOUT */


/* ==========================================================================
   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;
}


/* ==========================================================================
   7. TYPOGRAPHIE
   ==========================================================================
   Classes utilitaires typographiques — couvrent taille, graisse, line-height,
   letter-spacing et couleur par défaut du style Figma.

   Principe : le style visuel est découplé de la balise HTML sémantique.
   On peut appliquer vbx-u-h1 sur un <h2> si le niveau visuel diffère
   du niveau sémantique — courant en Power Pages.

   Usage :
     <h2 class="vbx-u-h1">Titre visuel niveau 1</h2>
     <p class="vbx-u-body1">Texte courant</p>
     <span class="vbx-u-label">Label de champ</span>

   Source : Design system Anaïs — Figma
   ========================================================================== */

/* ─── Titres ─── */

.vbx-u-h1 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-h1);           /* 32px */
    font-weight: var(--vbx-font-weight-bold);      /* 700 */
    line-height: var(--vbx-line-height-h1);        /* 36px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

.vbx-u-h2 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-2xl);           /* 27px */
    font-weight: var(--vbx-font-weight-semibold);  /* 600 */
    line-height: var(--vbx-line-height-h2);        /* 31px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

.vbx-u-h3 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-xl);            /* 20px */
    font-weight: var(--vbx-font-weight-semibold);  /* 600 */
    line-height: var(--vbx-line-height-h3);        /* 24px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

.vbx-u-h4 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-lg);            /* 18px */
    font-weight: var(--vbx-font-weight-bold);      /* 700 */
    line-height: var(--vbx-line-height-ui);        /* 22px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

/* ─── Sous-titre ─── */

.vbx-u-sub1 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-lg);            /* 18px */
    font-weight: var(--vbx-font-weight-medium);    /* 500 */
    line-height: var(--vbx-line-height-ui);        /* 22px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

/* ─── Texte de labeur ─── */

.vbx-u-body1 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);          /* 16px */
    font-weight: var(--vbx-font-weight-normal);    /* 400 */
    line-height: var(--vbx-line-height-ui);        /* 22px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

.vbx-u-body1-medium {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);          /* 16px */
    font-weight: var(--vbx-font-weight-medium);    /* 500 */
    line-height: var(--vbx-line-height-ui);        /* 22px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

.vbx-u-body1-bold {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);          /* 16px */
    font-weight: var(--vbx-font-weight-bold);      /* 700 */
    line-height: var(--vbx-line-height-ui);        /* 22px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
}

.vbx-u-body2 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-sm);            /* 13px */
    font-weight: var(--vbx-font-weight-normal);    /* 400 */
    line-height: var(--vbx-line-height-body2);     /* 19px */
    letter-spacing: var(--vbx-letter-spacing-sm);  /* 0.25px */
    color: var(--vbx-color-text-primary);
}

.vbx-u-body2-bold {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-sm);            /* 13px */
    font-weight: var(--vbx-font-weight-bold);      /* 700 */
    line-height: var(--vbx-line-height-body2);     /* 19px */
    letter-spacing: var(--vbx-letter-spacing-sm);  /* 0.25px */
    color: var(--vbx-color-text-primary);
}

/* ─── Liens ─── */

.vbx-u-link1 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);          /* 16px */
    font-weight: var(--vbx-font-weight-normal);    /* 400 */
    line-height: var(--vbx-line-height-ui);        /* 22px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-primary);
    text-decoration: underline;
}

.vbx-u-link2 {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-sm);            /* 13px */
    font-weight: var(--vbx-font-weight-normal);    /* 400 */
    line-height: var(--vbx-line-height-body2);     /* 19px */
    letter-spacing: var(--vbx-letter-spacing-sm);  /* 0.25px */
    color: var(--vbx-color-text-primary);
    text-decoration: underline;
}

/* ─── Champs de formulaire ─── */

.vbx-u-label {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-label);         /* 15px */
    font-weight: var(--vbx-font-weight-bold);      /* 700 */
    line-height: var(--vbx-line-height-label);     /* 19px */
    letter-spacing: var(--vbx-letter-spacing-sm);  /* 0.25px */
    color: var(--vbx-color-text-primary);
}

.vbx-u-helper {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-md);            /* 14px */
    font-weight: var(--vbx-font-weight-normal);    /* 400 */
    line-height: var(--vbx-line-height-field);     /* 18px */
    letter-spacing: var(--vbx-letter-spacing-sm);  /* 0.25px */
    color: var(--vbx-color-text-secondary);        /* Grey 700 */
}

.vbx-u-placeholder {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);          /* 16px */
    font-weight: var(--vbx-font-weight-normal);    /* 400 */
    line-height: var(--vbx-line-height-input);     /* 20px */
    letter-spacing: var(--vbx-letter-spacing-none);
    color: var(--vbx-color-text-secondary);        /* Grey 700 */
}

.vbx-u-input {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);          /* 16px */
    font-weight: var(--vbx-font-weight-normal);    /* 400 */
    line-height: var(--vbx-line-height-input);     /* 20px */
    letter-spacing: var(--vbx-letter-spacing-sm);  /* 0.25px */
    color: var(--vbx-color-text-primary);
}


/* ==========================================================================
   8. ALIGNEMENT TEXTE
   ==========================================================================
   Usage : aligner du texte sans écrire de règle CSS dédiée.

   Exemple :
     <p class="vbx-u-body1 vbx-u-text-center">Texte centré</p>
   ========================================================================== */

.vbx-u-text-left   { text-align: left; }
.vbx-u-text-center { text-align: center; }
.vbx-u-text-right  { text-align: right; }