/**
 * Design system — Annuaire Pro Belgique
 *
 * Fichier de référence pour Bricks Builder.
 * Définit les variables CSS du projet (palette, typographie, espacement).
 * Chargé sur toutes les pages frontend avant frontend.css.
 *
 * Conventions de nommage :
 *   --apb-*  = variables du plugin (ne pas confondre avec --color-* de Bricks)
 *
 * @package AnnuairePro
 */

/* =========================================================================
   Palette — Design system officiel hommeatoutfaire.be
   Source : CLAUDE.md section "DESIGN — PALETTE CONFIRMÉE"
   ========================================================================= */
:root {

    /* Couleurs principales */
    --apb-primary:       #185FA5;   /* Boutons principaux, liens, header, tabs actifs */
    --apb-primary-dark:  #0C447C;   /* Hover boutons primaires */
    --apb-accent:        #E6892A;   /* CTA secondaires, badges premium, inscription pro */
    --apb-accent-dark:   #C96F15;   /* Hover accent */

    /* Fonds */
    --apb-bg:            #F7F8FA;   /* Fond de page général */
    --apb-surface:       #FFFFFF;   /* Cards, modals, inputs */

    /* Texte */
    --apb-text:          #1A1A2E;   /* Texte principal */
    --apb-text-muted:    #6B7280;   /* Labels, texte secondaire */

    /* Feedback */
    --apb-success:       #639922;   /* Badge TVA vérifiée, confirmations */
    --apb-danger:        #DC2626;   /* Erreurs */
    --apb-warning:       #E6892A;   /* Avertissements (= accent) */

    /* Bordures */
    --apb-border:        #E2E6EA;   /* Bordures cards et inputs */

    /* Border radius */
    --apb-radius-card:   16px;      /* Cards */
    --apb-radius-btn:    10px;      /* Boutons */
    --apb-radius-input:  8px;       /* Inputs */
    --apb-radius-badge:  6px;       /* Badges */
    --apb-radius:        8px;       /* Défaut générique */
    --apb-radius-sm:     4px;
    --apb-radius-lg:     12px;

    /* Ombres */
    --apb-shadow:        0 2px 8px rgba(0, 0, 0, .08);
    --apb-shadow-md:     0 4px 16px rgba(0, 0, 0, .10);
    --apb-shadow-lg:     0 8px 32px rgba(0, 0, 0, .14);

    /* Espacement */
    --apb-space-xs:  .25rem;   /*  4px */
    --apb-space-sm:  .5rem;    /*  8px */
    --apb-space-md:  1rem;     /* 16px */
    --apb-space-lg:  1.5rem;   /* 24px */
    --apb-space-xl:  2rem;     /* 32px */
    --apb-space-2xl: 3rem;     /* 48px */

    /* Typographie */
    --apb-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --apb-font-size-base: 16px;     /* Taille minimum accessibilité */
    --apb-btn-height:     48px;     /* Touch-friendly */

    /* Transitions */
    --apb-transition: .15s ease;
}

/* =========================================================================
   Boutons — base commune
   ========================================================================= */
.apb-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .5em;
    min-height:      var(--apb-btn-height);
    padding:         .65em 1.5em;
    border:          none;
    border-radius:   var(--apb-radius-btn);
    font-family:     var(--apb-font);
    font-size:       1rem;
    font-weight:     600;
    line-height:     1.2;
    text-decoration: none;
    cursor:          pointer;
    transition:      background var(--apb-transition), color var(--apb-transition),
                     box-shadow var(--apb-transition);
    white-space:     nowrap;
}

.apb-btn--primary {
    background: var(--apb-primary);
    color:      #fff;
}
.apb-btn--primary:hover,
.apb-btn--primary:focus-visible {
    background:  var(--apb-primary-dark);
    color:       #fff;
    box-shadow:  0 4px 12px rgba(24, 95, 165, .3);
}

.apb-btn--accent {
    background: var(--apb-accent);
    color:      #fff;
}
.apb-btn--accent:hover,
.apb-btn--accent:focus-visible {
    background: var(--apb-accent-dark);
    color:      #fff;
    box-shadow: 0 4px 12px rgba(230, 137, 42, .35);
}

.apb-btn--outline {
    background:  transparent;
    color:       #fff;
    border:      2px solid rgba(255, 255, 255, .7);
}
.apb-btn--outline:hover,
.apb-btn--outline:focus-visible {
    background:  rgba(255, 255, 255, .12);
    border-color:#fff;
    color:       #fff;
}

.apb-btn--lg {
    min-height: 54px;
    padding:    .75em 2em;
    font-size:  1.05rem;
}

.apb-btn--full { width: 100%; }

/* =========================================================================
   [apb_stats_bar] — barre statistiques homepage
   ========================================================================= */
.apb-stats-bar {
    display:          flex;
    flex-wrap:        wrap;
    justify-content:  center;
    gap:              var(--apb-space-lg);
    background:       var(--apb-primary);
    color:            #fff;
    padding:          var(--apb-space-lg) var(--apb-space-xl);
    border-radius:    var(--apb-radius-card);
    text-align:       center;
}

.apb-stats-bar > div {
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           .2em;
    min-width:     140px;
    font-size:     2rem;
    font-weight:   800;
    line-height:   1.1;
    letter-spacing: -.02em;
}

.apb-stats-bar > div span {
    font-size:   .875rem;
    font-weight: 400;
    opacity:     .85;
    letter-spacing: 0;
}

@media (max-width: 600px) {
    .apb-stats-bar {
        flex-direction: column;
        gap:            var(--apb-space-md);
        padding:        var(--apb-space-lg);
    }
    .apb-stats-bar > div {
        flex-direction: row;
        gap:            .5em;
        font-size:      1.5rem;
        min-width:      0;
    }
}

/* =========================================================================
   [apb_categories_grid] — grille catégories
   ========================================================================= */
.apb-categories-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:                   var(--apb-space-md);
}

.apb-categories-grid__item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             .4em;
    padding:         var(--apb-space-lg) var(--apb-space-md);
    background:      var(--apb-surface);
    border:          1.5px solid var(--apb-border);
    border-radius:   var(--apb-radius-card);
    text-decoration: none;
    color:           var(--apb-text);
    text-align:      center;
    transition:      border-color var(--apb-transition),
                     box-shadow   var(--apb-transition),
                     transform    var(--apb-transition);
}

.apb-categories-grid__item:hover,
.apb-categories-grid__item:focus-visible {
    border-color: var(--apb-primary);
    box-shadow:   var(--apb-shadow-md);
    transform:    translateY(-2px);
    color:        var(--apb-text);
}

.apb-categories-grid__icone {
    font-size: 2rem;
    line-height: 1;
}

.apb-categories-grid__nom {
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--apb-text);
}

.apb-categories-grid__count {
    font-size: .78rem;
    color:     var(--apb-text-muted);
    background: var(--apb-bg);
    padding:    .15em .5em;
    border-radius: var(--apb-radius-badge);
}

.apb-categories-grid__vide {
    color:       var(--apb-text-muted);
    font-style:  italic;
    text-align:  center;
    padding:     var(--apb-space-xl);
}

/* =========================================================================
   [apb_cta_pro] — bloc CTA inscription professionnel
   ========================================================================= */
.apb-cta-pro {
    background:    linear-gradient(135deg, var(--apb-primary) 0%, var(--apb-primary-dark) 100%);
    border-radius: var(--apb-radius-card);
    padding:       var(--apb-space-2xl);
    color:         #fff;
    overflow:      hidden;
    position:      relative;
}

/* Décoration de fond */
.apb-cta-pro::before {
    content:       '';
    position:      absolute;
    top:           -60px;
    right:         -60px;
    width:         200px;
    height:        200px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, .06);
    pointer-events:none;
}

.apb-cta-pro__inner {
    position:       relative;
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    gap:            var(--apb-space-xl);
    flex-wrap:      wrap;
}

.apb-cta-pro__contenu { flex: 1; min-width: 260px; }

.apb-cta-pro__titre {
    font-size:     1.6rem;
    font-weight:   800;
    margin:        0 0 .4em;
    line-height:   1.2;
    color:         #fff;
}

.apb-cta-pro__sous-titre {
    font-size:   1rem;
    opacity:     .88;
    margin:      0 0 var(--apb-space-md);
    font-weight: 500;
}

.apb-cta-pro__avantages {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        .4em .875em;
}

.apb-cta-pro__avantages li {
    font-size:   .875rem;
    opacity:     .9;
}

.apb-cta-pro__avantages li::before {
    content:      '✓ ';
    font-weight:  700;
    color:        #a3d977;
}

.apb-cta-pro__actions {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--apb-space-sm);
    flex-shrink:0;
}

@media (max-width: 640px) {
    .apb-cta-pro { padding: var(--apb-space-xl) var(--apb-space-lg); }
    .apb-cta-pro__titre { font-size: 1.3rem; }
    .apb-cta-pro__actions { width: 100%; }
    .apb-cta-pro__actions .apb-btn { flex: 1; justify-content: center; }
}

/* =========================================================================
   Accessibilité
   ========================================================================= */
.apb-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;
}