/* ==========================================================================
   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]
              "c" = component — signal immédiat que c'est un composant
              générique partagé entre toutes les pages du projet.

   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)
              Exception documentée : vbx-c-btn--primary utilise position/z-index
              pour animer le gradient sans flash (voir commentaire inline).
   --------------------------------------------------------------------------

   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

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


/* --------------------------------------------------------------------------
   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
     Sémantique : --danger

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

   Exception position/z-index documentée : --primary utilise un ::before
   en position absolute pour animer le gradient sans flash au hover.
   Les descendants reçoivent position:relative + z-index:1 pour passer
   au-dessus de ce calque.
-------------------------------------------------------------------------- */

/* ─── Base ─── */
.vbx-c-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vbx-space-sm);
    padding: var(--vbx-space-md) var(--vbx-space-lg);
    border-radius: var(--vbx-radius-md);
    border: 1px solid transparent;
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-md);
    font-weight: var(--vbx-font-weight-bold);
    line-height: var(--vbx-line-height-ui);
    letter-spacing: var(--vbx-letter-spacing-btn);
    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 — évite les décalages de hauteur */
.vbx-c-btn svg {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

/* ─── Focus ring — design system officiel, accessibilité clavier ─── */
.vbx-c-btn:focus { outline: none; }
.vbx-c-btn:focus-visible {
    outline: 2px solid var(--vbx-color-focus-ring-solid);
    outline-offset: 3px;
}

/* ─── 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);
    box-shadow: none;
    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) ─── */
/*
   Technique anti-flash : le gradient est posé sur un ::before en opacity:1.
   Au hover, opacity passe à 0 pour révéler le fond uni --primary-hover.
   On ne peut pas transitionner un gradient directement en CSS.
*/
.vbx-c-btn--primary {
    background: var(--vbx-color-primary-hover);
    color: var(--vbx-color-white);
    overflow: hidden;
}
.vbx-c-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vbx-color-primary-gradient);
    opacity: 1;
    transition: opacity var(--vbx-transition);
}
.vbx-c-btn--primary * {
    position: relative;
    z-index: 1;
}
.vbx-c-btn--primary:hover::before { opacity: 0; }

/* ─── Niveau 1 : Black ─── */
.vbx-c-btn--black {
    background: var(--vbx-color-black);
    color: var(--vbx-color-white);
}
.vbx-c-btn--black:hover { background: var(--vbx-color-text-primary); }

/* ─── Niveau 2 : Outline (teal) ─── */
.vbx-c-btn--outline {
    background: var(--vbx-color-white);
    border-color: var(--vbx-color-primary);
    color: var(--vbx-color-primary);
}
.vbx-c-btn--outline:hover { background: var(--vbx-color-primary-light); }

/* ─── Niveau 2 : Outline Black ─── */
.vbx-c-btn--outline-black {
    background: var(--vbx-color-white);
    border-color: var(--vbx-color-black);
    color: var(--vbx-color-black);
}
.vbx-c-btn--outline-black:hover { background: var(--vbx-color-bg-secondary); }

/* ─── Niveau 3 : Shadow ─── */
.vbx-c-btn--shadow {
    background: var(--vbx-color-white);
    color: var(--vbx-color-text-primary);
    box-shadow: var(--vbx-shadow-sm);
}
.vbx-c-btn--shadow:hover { box-shadow: var(--vbx-shadow-md); background: var(--vbx-color-bg-hover); }

/* ─── Niveau 3 : Grey ─── */
.vbx-c-btn--grey {
    background: var(--vbx-color-bg-secondary);
    color: var(--vbx-color-text-primary);
}
.vbx-c-btn--grey:hover { background: var(--vbx-color-border); }

/* ─── Niveau 3 : Link ─── */
.vbx-c-btn--link {
    background: transparent;
    color: var(--vbx-color-text-primary);
    padding: 0;
}
.vbx-c-btn.vbx-c-btn--link {
    text-decoration: underline;
}
.vbx-c-btn.vbx-c-btn--link:hover {
    text-decoration: none;
    color: var(--vbx-color-text-primary);
}

/* ─── 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-color-primary); 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é ─── */
/*
   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.45;
    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;
}
@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).
   Usage : ajouter --icon sur tout bouton qui contient une icône SVG.
*/
.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-config.liquid, 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-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);
    color: var(--vbx-color-text-primary); /* Label toujours noir — 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);       /* #FFF5D8 */
    border-color: var(--vbx-color-warning-border);  /* #FDE68A */
}

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

/* ─── Error / Erreur — fond Error Light ─── */
.vbx-c-alert--error {
    background: var(--vbx-color-danger-light);      /* #FFD3D3 */
    border-color: var(--vbx-color-danger);          /* #AA0000 */
}

/* ─── 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);
    color: var(--vbx-color-primary);
}
.vbx-c-badge--neutral {
    background: var(--vbx-color-bg-secondary);
    color: var(--vbx-color-text-secondary);
}
.vbx-c-badge--warning {
    background: var(--vbx-color-warning-bg);
    color: var(--vbx-color-warning-text);
}
.vbx-c-badge--danger {
    background: var(--vbx-color-danger-light);
    color: var(--vbx-color-danger);
}
.vbx-c-badge--success {
    background: var(--vbx-color-success-bg);
    color: var(--vbx-color-success-text);
}


/* --------------------------------------------------------------------------
   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);
    font-weight: var(--vbx-font-weight-semibold);
    line-height: var(--vbx-line-height-body);
    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: 2px solid var(--vbx-color-focus-ring-solid);
    outline-offset: 3px;
}

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