/* ==========================================================================
   vbx-components.css
   --------------------------------------------------------------------------
   Rôle     : Composants UI génériques réutilisables dans tout le projet.
              Chaque composant définit UNIQUEMENT sa typographie et ses
              couleurs. Le placement contextuel se fait via les utilitaires
              vbx-u-* directement dans le HTML.

   Chargé   : Après vbx-tokens.css et vbx-utilities.css.
   Dépend de: vbx-tokens.css

   Nommage  : vbx-c-[composant]__[élément]--[modificateur]

   Règle    : Un composant vbx-c-* ne doit JAMAIS contenir :
              - margin (géré par vbx-u-* dans le HTML)
              - position absolute/fixed/sticky (spécifique à la page)
              - z-index (spécifique au contexte)
   --------------------------------------------------------------------------

   TABLE DES MATIÈRES
   ------------------
   1.  vbx-c-btn        — Bouton (+ vbx-btn-proxy — Proxy bouton natif Microsoft)
   2.  vbx-c-alert      — Alerte / Message contextuel
   3.  vbx-c-badge      — Badge / Étiquette de statut
   4.  vbx-c-breadcrumb — Fil d'Ariane
   5.  vbx-c-accordion  — Accordéon
   6.  vbx-c-spinner    — Loader / Indicateur de chargement
   7.  vbx-c-backdrop   — Fond semi-transparent derrière les modals
   8.  vbx-c-modal      — Modal générique

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


/* --------------------------------------------------------------------------
   1. vbx-c-btn — Bouton
   --------------------------------------------------------------------------
   Compatible : <button>, <a>, <div>, <input type="submit">
   Hiérarchie (un seul niveau 1 par écran) :
     Niveau 1   : --primary (gradient teal) | --black
     Niveau 2   : --outline | --outline-black
     Niveau 3   : --shadow | --grey | --link

   États :
     --disabled : opacity 0.5, reste cliquable pour feedback JS
     --loading  : action en cours, label + "..." animé, clics bloqués
     .is-pressed: effet tactile mobile (géré par vbx-btn.js)

   Focus ring : box-shadow double anneau blanc/noir — design system officiel
     box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000
-------------------------------------------------------------------------- */

/* ─── Base ─── */
.vbx-c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vbx-space-sm);
    padding: var(--vbx-space-md) var(--vbx-space-lg);       /* 15px 20px */
    border-radius: var(--vbx-radius-btn);                    /* 6px — CORRIGÉ radius-md→radius-btn */
    border: 1px solid transparent;
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-md);                      /* 14px */
    font-weight: var(--vbx-font-weight-bold);                /* 700 */
    line-height: var(--vbx-line-height-field);               /* 18px — CORRIGÉ line-height-ui→line-height-field */
    letter-spacing: var(--vbx-letter-spacing-btn);           /* 0.5px — CORRIGÉ 0.1→0.5 via token */
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    color: var(--vbx-color-text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    transition: background var(--vbx-transition),
                border-color var(--vbx-transition),
                color var(--vbx-transition),
                opacity var(--vbx-transition),
                box-shadow var(--vbx-transition),
                transform 80ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Les enfants héritent la couleur et ne captent pas les événements souris */
.vbx-c-btn * {
    color: inherit;
    fill: currentColor;
    pointer-events: none;
    line-height: 1;
}

/* Force la taille du SVG proportionnellement au texte */
.vbx-c-btn svg {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

/* ─── Focus ring — double anneau blanc/noir, design system officiel ─── */
/*
   CORRIGÉ : outline simple → box-shadow double anneau
   Figma : box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000
   Unifié sur toutes les variantes.
*/
.vbx-c-btn:focus { outline: none; }
.vbx-c-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000;
}

/* ─── Effet de clic desktop ─── */
.vbx-c-btn:active:not(:disabled):not(.vbx-c-btn--disabled):not(.vbx-c-btn--loading):not(.vbx-c-btn--link) {
    transform: translateY(2px) scale(0.98);
    filter: brightness(0.95);
}

/* ─── Effet de clic mobile — classe ajoutée/retirée par vbx-btn.js ─── */
.vbx-c-btn.is-pressed:not(.vbx-c-btn--disabled):not(.vbx-c-btn--loading):not(.vbx-c-btn--link) {
    transform: translateY(2px) scale(0.98);
    filter: brightness(0.92);
    transition: transform 60ms ease, filter 60ms ease;
}


/* ─── Niveau 1 : Primary (Gradient) ─── */
/*
   CORRIGÉ : suppression du trick ::before / opacity.
   Hover = gradient-dark directement, conforme Figma.
   CSS ne peut pas transitionner un gradient — on accepte
   le changement instantané, conforme au design system.
*/
.vbx-c-btn--primary {
    background: var(--vbx-blg-gradient);     /* linear-gradient(78deg, #008489 -4.87%, #00BABE 106.4%) */
    color: var(--vbx-color-white);
}
.vbx-c-btn--primary:hover {
    background: var(--vbx-blg-gradient-dark); /* linear-gradient(72deg, #017A7F 0%, #01A4A7 100%) */
}

/* ─── Niveau 1 : Black ─── */
/*
   CORRIGÉ : hover text-primary (#2D2D2D) → grey-800 (#484848)
*/
.vbx-c-btn--black {
    background: var(--vbx-color-black);      /* #0B0B0B */
    color: var(--vbx-color-white);
}
.vbx-c-btn--black:hover {
    background: var(--vbx-grey-800);         /* #484848 — CORRIGÉ text-primary→grey-800 */
}

/* ─── Niveau 2 : Outline BLG ─── */
/*
   CORRIGÉ : base transparent (pas white) + hover blg-lightest (pas blg-light)
*/
.vbx-c-btn--outline {
    background: transparent;                  /* CORRIGÉ white→transparent */
    border-color: var(--vbx-blg);            /* #008489 */
    color: var(--vbx-blg);
}
.vbx-c-btn--outline:hover {
    background: var(--vbx-blg-lightest);     /* #F2F9F9 — CORRIGÉ blg-light→blg-lightest */
}
.vbx-c-btn--outline:focus-visible {
    background: var(--vbx-color-white);
    box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000;
}

/* ─── Niveau 2 : Outline Black ─── */
/*
   CORRIGÉ : base transparent + hover grey-100 (#E4E4E4)
*/
.vbx-c-btn--outline-black {
    background: transparent;                  /* CORRIGÉ white→transparent */
    border-color: var(--vbx-color-black);    /* #0B0B0B */
    color: var(--vbx-color-black);
}
.vbx-c-btn--outline-black:hover {
    background: var(--vbx-grey-100);         /* #E4E4E4 — CORRIGÉ bg-secondary→grey-100 */
}
.vbx-c-btn--outline-black:focus-visible {
    background: var(--vbx-color-white);
    box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000;
}

/* ─── Niveau 3 : Shadow ─── */
/*
   CORRIGÉ :
   - Base : border grey-300 (#DADADA), suppression box-shadow
   - Hover : background grey-100 (#E4E4E4) + border grey-100, suppression box-shadow
   - Disabled : border grey-100
*/
.vbx-c-btn--shadow {
    background: var(--vbx-color-white);
    border-color: var(--vbx-color-border);   /* #DADADA — CORRIGÉ transparent→border + suppression shadow */
    color: var(--vbx-color-text-primary);
}
.vbx-c-btn--shadow:hover {
    background: var(--vbx-grey-100);         /* #E4E4E4 — CORRIGÉ bg-hover→grey-100 */
    border-color: var(--vbx-grey-100);       /* CORRIGÉ suppression box-shadow */
}

/* ─── Niveau 3 : Grey ─── */
/*
   Valeurs identiques — alignement sur tokens de palette brute pour lisibilité.
*/
.vbx-c-btn--grey {
    background: var(--vbx-grey-50);          /* #F2F2F2 — aligné palette brute */
    color: var(--vbx-color-text-primary);
}
.vbx-c-btn--grey:hover {
    background: var(--vbx-grey-300);         /* #DADADA — aligné palette brute */
}

/* ─── Niveau 3 : Link ─── */
/*
   CORRIGÉ :
   - padding conforme Figma : 15px 20px (pas 0)
   - focus : ajout background white
*/
.vbx-c-btn--link {
    background: transparent;
    color: var(--vbx-color-text-primary);
    padding: var(--vbx-space-md) var(--vbx-space-lg);  /* 15px 20px — CORRIGÉ 0→15px 20px */
    text-decoration: underline;
}
.vbx-c-btn--link:hover {
    text-decoration: none;
}
.vbx-c-btn--link:focus-visible {
    background: var(--vbx-color-white);               /* AJOUT — manquant */
    box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000;
}

/* ─── Pseudo-états — neutralise Bootstrap sur <a> ─────────────────────────
   Bootstrap impose ses propres couleurs sur a:hover, a:focus, a:visited.
   On surcharge par variante pour garantir la couleur attendue sur tous
   les éléments HTML (<a>, <button>, <div>...).
─────────────────────────────────────────────────────────────────────────── */
.vbx-c-btn--primary:hover,
.vbx-c-btn--primary:focus,
.vbx-c-btn--primary:active,
.vbx-c-btn--primary:visited    { color: var(--vbx-color-white); text-decoration: none; }

.vbx-c-btn--black:hover,
.vbx-c-btn--black:focus,
.vbx-c-btn--black:active,
.vbx-c-btn--black:visited      { color: var(--vbx-color-white); text-decoration: none; }

.vbx-c-btn--outline:hover,
.vbx-c-btn--outline:focus,
.vbx-c-btn--outline:active,
.vbx-c-btn--outline:visited    { color: var(--vbx-blg); text-decoration: none; }

.vbx-c-btn--outline-black:hover,
.vbx-c-btn--outline-black:focus,
.vbx-c-btn--outline-black:active,
.vbx-c-btn--outline-black:visited { color: var(--vbx-color-black); text-decoration: none; }

.vbx-c-btn--shadow:hover,
.vbx-c-btn--shadow:focus,
.vbx-c-btn--shadow:active,
.vbx-c-btn--shadow:visited     { color: var(--vbx-color-text-primary); text-decoration: none; }

.vbx-c-btn--grey:hover,
.vbx-c-btn--grey:focus,
.vbx-c-btn--grey:active,
.vbx-c-btn--grey:visited       { color: var(--vbx-color-text-primary); text-decoration: none; }

.vbx-c-btn--link:hover,
.vbx-c-btn--link:focus,
.vbx-c-btn--link:active,
.vbx-c-btn--link:visited       { color: var(--vbx-color-text-primary); text-decoration: none; }


/* ─── État désactivé ─── */
/*
   CORRIGÉ : opacity 0.45 → 0.5 (valeur exacte Figma)
   Reste cliquable (pointer-events: auto) pour que le JS puisse intercepter
   le clic et afficher un message d'erreur ou guider l'utilisateur.
*/
.vbx-c-btn:disabled,
.vbx-c-btn--disabled:not(.is-shaking) {
    opacity: 0.5;                /* CORRIGÉ 0.45→0.5 */
    cursor: not-allowed;
    pointer-events: auto;
    transform: none !important;
    filter: none !important;
}

.vbx-c-btn.vbx-c-btn--disabled {
    cursor: not-allowed;
}

/* ─── État loading ─── */
/*
   Déclenché par vbx-btn.js sur les boutons data-loading="true".
   Le label du bouton change côté HTML, les "..." sont animés en CSS.
*/
.vbx-c-btn--loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.7;
}
.vbx-c-btn--loading::after {
    content: "";
    display: inline-block;
    animation: vbx-btn-dots 1.2s steps(3, end) infinite;
    min-width: 1.2em;
    text-align: left;
    margin-left: calc(var(--vbx-space-sm) * -1);
}
@keyframes vbx-btn-dots {
    0%  { content: "."; }
    33% { content: ".."; }
    66% { content: "..."; }
}

/* ─── Modificateurs layout ─── */
.vbx-c-btn--block { width: 100%; display: flex; }

/*
   --icon : hauteur fixe 48px pour les boutons avec icône en mode desktop.
   Sur mobile, la hauteur est gérée par le contenu (pas de hauteur fixe).
*/
.vbx-c-btn--icon { height: 48px; }

@media (max-width: 1024px) {
    .vbx-c-btn--icon { height: auto; }
}

.vbx-c-btn--icon-left  svg,
.vbx-c-btn--icon-left  [class*="vbx-icons"] { order: -1; }
.vbx-c-btn--icon-right svg,
.vbx-c-btn--icon-right [class*="vbx-icons"] { order: 1; }

/* ─── Shake — feedback visuel sur clic d'un bouton désactivé ─── */
.vbx-c-btn.is-shaking {
    animation: vbx-btn-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
@keyframes vbx-btn-shake {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    20%       { transform: translateX(-6px); opacity: 0.5; }
    40%       { transform: translateX(6px); opacity: 0.5; }
    60%       { transform: translateX(-4px); opacity: 0.5; }
    80%       { transform: translateX(4px); opacity: 0.5; }
}

/* ─── Proxy bouton natif Microsoft ─── */
/*
   Caché dès le chargement CSS — avant tout rendu JS — pour éviter le flash.
   visibility:hidden préserve l'espace dans le layout (pas de saut visuel).
   Le fallback JS (3s) restaure visibility:visible si le script plante.
*/
.vbx-btn-proxy {
    visibility: hidden;
    position: absolute;
}


/* --------------------------------------------------------------------------
   2. vbx-c-alert — Alerte / Message contextuel
   --------------------------------------------------------------------------
   Variantes : --warning | --info | --error | --success

   Icônes : sprite SVG défini dans VBX - Icons, appelé via <use href="#id">
   Couleurs de fond : Alert Light, Positive Light, Error Light, Neutral Light
   Couleur du label : toujours --vbx-color-text-primary (#2D2D2D)
   Couleur des icônes : propre à chaque variante (pas currentColor)

   Usage :
     <div class="vbx-c-alert vbx-c-alert--warning">
       <svg aria-hidden="true"><use href="#vbx-icon-alert-warning"/></svg>
       <span>Ce service n'est pas disponible dans votre contexte.</span>
     </div>
   -------------------------------------------------------------------------- */

.vbx-c-alert {
    display: flex;
    align-items: center;
    gap: var(--vbx-space-sm);
    padding: var(--vbx-space-sm) var(--vbx-space-md);
    border-radius: var(--vbx-radius-md);
    border: 1px solid transparent;
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);
    font-weight: var(--vbx-font-weight-normal);
    line-height: var(--vbx-line-height-body);        /* 22px */
    color: var(--vbx-color-text-primary);            /* Label toujours #2D2D2D — design system */
}

.vbx-c-alert svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* ─── Warning / Avertissement — fond Alert Light ─── */
.vbx-c-alert--warning {
    background: var(--vbx-color-warning-bg);         /* #FFF9EF — CORRIGÉ via tokens */
    border-color: var(--vbx-color-warning-border);   /* #FDE68A */
}

/* ─── Success / Succès — fond Positive Light ─── */
.vbx-c-alert--success {
    background: var(--vbx-color-success-bg);         /* #F0FFFF — CORRIGÉ via tokens */
    border-color: var(--vbx-color-success-border);   /* #A7F3D0 */
}

/* ─── Error / Erreur — fond Error Light ─── */
.vbx-c-alert--error {
    background: var(--vbx-color-danger-light);       /* #FFEAEA — CORRIGÉ via tokens */
    border-color: var(--vbx-color-danger);           /* #FF0000 — CORRIGÉ via tokens */
}

/* ─── Info / Information — fond Neutral Light ─── */
.vbx-c-alert--info {
    background: var(--vbx-color-neutral-light);      /* #E6F2FD */
    border-color: var(--vbx-color-neutral);          /* #0030A6 */
}


/* --------------------------------------------------------------------------
   3. vbx-c-badge — Badge / Étiquette de statut
   --------------------------------------------------------------------------
   Variantes : --primary | --neutral | --warning | --danger | --success

   Usage :
     <span class="vbx-c-badge vbx-c-badge--primary">En cours</span>
     <span class="vbx-c-badge vbx-c-badge--danger">Refusé</span>
   -------------------------------------------------------------------------- */

.vbx-c-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--vbx-space-xs);
    padding: var(--vbx-space-xs) var(--vbx-space-btn);   /* 5px 10px */
    border-radius: var(--vbx-radius-round);
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-sm);
    font-weight: var(--vbx-font-weight-medium);
    line-height: 1.6;                                     /* Valeur fixe design system — pas de token */
    white-space: nowrap;
}

.vbx-c-badge--primary {
    background: var(--vbx-color-primary-light);           /* #DCECEC */
    color: var(--vbx-color-primary);                      /* #008489 */
}
.vbx-c-badge--neutral {
    background: var(--vbx-color-bg-secondary);            /* #F2F2F2 */
    color: var(--vbx-color-text-secondary);               /* #767676 */
}
.vbx-c-badge--warning {
    background: var(--vbx-color-warning-bg);              /* #FFF9EF — CORRIGÉ via tokens */
    color: var(--vbx-color-warning-text);                 /* #F67E2E */
}
.vbx-c-badge--danger {
    background: var(--vbx-color-danger-light);            /* #FFEAEA — CORRIGÉ via tokens */
    color: var(--vbx-color-danger);                       /* #FF0000 — CORRIGÉ via tokens */
}
.vbx-c-badge--success {
    background: var(--vbx-color-success-bg);              /* #F0FFFF — CORRIGÉ via tokens */
    color: var(--vbx-color-success-text);                 /* #009D74 — CORRIGÉ via tokens */
}


/* --------------------------------------------------------------------------
   4. vbx-c-breadcrumb — Fil d'Ariane
   --------------------------------------------------------------------------
   Usage :
     <nav class="vbx-c-breadcrumb" aria-label="Fil d'Ariane">
       <ol class="vbx-c-breadcrumb__list">
         <li class="vbx-c-breadcrumb__item">
           <a class="vbx-c-breadcrumb__link" href="/">Accueil</a>
         </li>
         <li class="vbx-c-breadcrumb__item">
           <a class="vbx-c-breadcrumb__link" href="/services">Tous nos services</a>
         </li>
         <li class="vbx-c-breadcrumb__item vbx-c-breadcrumb__item--active">
           Mariage
         </li>
       </ol>
     </nav>
   -------------------------------------------------------------------------- */

.vbx-c-breadcrumb {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-sm);
    color: var(--vbx-color-text-secondary);
}

.vbx-c-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vbx-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.vbx-c-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--vbx-space-xs);
}

.vbx-c-breadcrumb__item + .vbx-c-breadcrumb__item::before {
    content: "›";
    color: var(--vbx-color-border-dark);
}

.vbx-c-breadcrumb__link {
    color: var(--vbx-color-text-secondary);
    text-decoration: none;
    transition: color var(--vbx-transition);
}
.vbx-c-breadcrumb__link:hover {
    color: var(--vbx-color-primary);
    text-decoration: underline;
}

.vbx-c-breadcrumb__item--active {
    color: var(--vbx-color-text-primary);
    font-weight: var(--vbx-font-weight-medium);
}


/* --------------------------------------------------------------------------
   5. vbx-c-accordion — Accordéon
   --------------------------------------------------------------------------
   Le chevron est un SVG injecté par addCollapse() — sa rotation est gérée
   en CSS via aria-expanded.

   Usage :
     <div class="vbx-c-accordion">
       <div class="vbx-c-accordion__item">
         <button class="vbx-c-accordion__toggle" aria-expanded="false">
           <span>Conditions</span>
           <span class="vbx-c-accordion__chevron" aria-hidden="true">SVG</span>
         </button>
         <div class="vbx-c-accordion__body">
           <p>Contenu...</p>
         </div>
       </div>
     </div>
   -------------------------------------------------------------------------- */

.vbx-c-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vbx-c-accordion__item {
    width: 100%;
}

.vbx-c-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--vbx-space-lg) 0;
    border: none;
    border-bottom: 1px solid var(--vbx-color-border-dark);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-xl);                  /* 20px — H3 */
    font-weight: var(--vbx-font-weight-semibold);        /* 600 */
    line-height: var(--vbx-line-height-h3);              /* 24px */
    color: var(--vbx-color-text-primary);
    transition: color var(--vbx-transition);
}

.vbx-c-accordion__toggle:hover {
    color: var(--vbx-color-primary);
}

.vbx-c-accordion__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000;
}

/* Chevron — taille calée sur l'icône SVG injectée (20px) */
.vbx-c-accordion__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--vbx-space-lg);
    height: var(--vbx-space-lg);
    transition: transform var(--vbx-transition);
}

.vbx-c-accordion__toggle[aria-expanded="true"] .vbx-c-accordion__chevron {
    transform: rotate(-180deg);
}

.vbx-c-accordion__body {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-base);
    line-height: var(--vbx-line-height-body);            /* 22px */
    color: var(--vbx-color-text-primary);
    padding-top: var(--vbx-space-sm);
    padding-bottom: var(--vbx-space-lg);
    border-bottom: 1px solid var(--vbx-color-border-dark);
}


/* --------------------------------------------------------------------------
   6. vbx-c-spinner — Loader / Indicateur de chargement
   --------------------------------------------------------------------------
   Usage :
     <div class="vbx-c-spinner" role="status">
       <span class="vbx-u-sr-only">Chargement...</span>
     </div>
   -------------------------------------------------------------------------- */

.vbx-c-spinner {
    display: inline-block;
    width: 40px;          /* Valeur fixe design — pas de token */
    height: 40px;         /* Valeur fixe design — pas de token */
    border: 3px solid var(--vbx-color-primary-light);
    border-top: 3px solid var(--vbx-color-primary);
    border-radius: 50%;
    animation: vbx-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.vbx-c-spinner--sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}
.vbx-c-spinner--lg {
    width: 64px;
    height: 64px;
    border-width: 4px;
}

@keyframes vbx-spin {
    to { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   7. vbx-c-backdrop — Fond semi-transparent derrière les modals
   --------------------------------------------------------------------------
   Utilisé par vbx-c-modal et tout autre composant nécessitant un overlay.

   Usage :
     <div class="vbx-c-backdrop" data-vbx-modal-backdrop="modal-id"></div>

   État actif : la classe --active est ajoutée par JS.
   -------------------------------------------------------------------------- */

.vbx-c-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--vbx-z-modal-backdrop);
    background: var(--vbx-color-text-primary);   /* #2D2D2D — Grey 900 */
    opacity: 0;
    transition: opacity var(--vbx-transition);
}

.vbx-c-backdrop.vbx-c-backdrop--active {
    display: block;
    opacity: 0.3;
}


/* --------------------------------------------------------------------------
   8. vbx-c-modal — Modal générique
   --------------------------------------------------------------------------
   Variantes :
     (aucun modificateur) — modal centré desktop, bottom sheet mobile

   Éléments :
     __dialog     — fenêtre blanche (max 560px desktop, 100% mobile)
     __header     — titre + bouton fermer
     __title      — typographie H4
     __close      — bouton fermer (cercle 40px)
     __body       — contenu scrollable

   Déclencheur :
     data-vbx-modal-trigger="[id]"   — ouvre le modal
     data-vbx-modal-close            — ferme le modal

   Usage :
     <button data-vbx-modal-trigger="mon-modal">Ouvrir</button>

     <div class="vbx-c-modal" id="mon-modal" role="dialog"
          aria-modal="true" aria-labelledby="mon-modal-title">
       <div class="vbx-c-modal__dialog">
         <div class="vbx-c-modal__header">
           <h2 class="vbx-c-modal__title" id="mon-modal-title">Titre</h2>
           <button class="vbx-c-modal__close" data-vbx-modal-close
                   aria-label="Fermer">
             <svg aria-hidden="true" focusable="false">
               <use href="#vbx-icon-ui-close"></use>
             </svg>
           </button>
         </div>
         <div class="vbx-c-modal__body">
           Contenu...
         </div>
       </div>
     </div>
   -------------------------------------------------------------------------- */

/* ── Wrapper positionné — backdrop + dialog ── */
.vbx-c-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--vbx-z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--vbx-space-lg);
}

.vbx-c-modal.vbx-c-modal--active {
    display: flex;
}

/* ── Dialog ── */
.vbx-c-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: calc(100vw - var(--vbx-space-3xl));
    max-height: calc(100vh - var(--vbx-space-3xl));
    border-radius: var(--vbx-radius-md);
    background: var(--vbx-color-white);
    box-shadow: var(--vbx-shadow-md);
}

/* ── Header ── */
.vbx-c-modal__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    padding: var(--vbx-space-lg) 80px var(--vbx-space-lg) var(--vbx-space-3xl);   /* 20px 80px 20px 40px */
    border-bottom: 1px solid var(--vbx-color-border);
    flex-shrink: 0;
}

/* ── Titre — H4 ── */
.vbx-c-modal__title {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-lg);            /* 18px — H4 */
    font-weight: var(--vbx-font-weight-bold);      /* 700 — H4 */
    line-height: var(--vbx-line-height-ui);        /* 22px */
    color: var(--vbx-color-text-primary);
    margin: 0;
    align-self: flex-start;
}

/* ── Bouton fermer — cercle 40px ── */
.vbx-c-modal__close {
    display: flex;
    width: 40px;
    height: 40px;
    padding: var(--vbx-space-btn);                 /* 10px */
    justify-content: center;
    align-items: center;
    position: absolute;
    right: var(--vbx-space-lg);                    /* 20px */
    top: 11px;                                     /* valeur Figma exacte */
    border-radius: var(--vbx-radius-round);
    border: none;
    background: var(--vbx-color-bg-secondary);    /* #F2F2F2 */
    cursor: pointer;
    transition: background var(--vbx-transition);
    flex-shrink: 0;
}

.vbx-c-modal__close svg {
    width: 24px;
    height: 24px;
    color: var(--vbx-color-text-primary);
}

.vbx-c-modal__close:hover {
    background: var(--vbx-color-border);
}

.vbx-c-modal__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #000, 0 0 0 4px #000;
}

/* ── Body — contenu scrollable ── */
.vbx-c-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    overflow-y: auto;
    background: var(--vbx-color-white);
    padding: var(--vbx-space-lg) var(--vbx-space-3xl) var(--vbx-space-3xl);
    border-radius: 0 0 var(--vbx-radius-md) var(--vbx-radius-md);
}

/* ── Mobile — bottom sheet ── */
@media (max-width: 767px) {
    .vbx-c-modal__dialog,
    .vbx-c-modal__dialog--compact {
        max-width: 100%;
        width: 100%;
        max-height: 85vh;
    }

    .vbx-c-modal__header {
        align-items: flex-start;
        padding-left: var(--vbx-space-lg);
    }

    .vbx-c-modal__title {
        align-self: flex-start;
    }

    .vbx-c-modal__body {
        padding: var(--vbx-space-2xl) var(--vbx-space-lg);
    }
}