/**
 * Africakard Design System
 * Variables CSS globales pour tout le site
 * Basé sur StartSelect avec couleurs Africakard
 */

:root {
    /* ========================================
       COULEURS AFRICAKARD
       ======================================== */

    /* Primaire (Bleu Africakard) */
    --afk-primary: #2872fa;
    --afk-primary-dark: #1559ed;
    --afk-primary-light: #5a94fb;
    --afk-primary-lighter: #e8f1fe;

    /* Accent (Jaune/Or Africakard) */
    --afk-accent: #F0BD42;
    --afk-accent-dark: #d9a935;
    --afk-accent-light: #f5d67a;

    /* Neutres */
    --afk-white: #ffffff;
    --afk-black: #000000;
    --afk-gray-50: #fafbfc;
    --afk-gray-100: #f5f6f7;
    --afk-gray-200: #e9ecef;
    --afk-gray-300: #dee2e6;
    --afk-gray-400: #ced4da;
    --afk-gray-500: #adb5bd;
    --afk-gray-600: #6c757d;
    --afk-gray-700: #495057;
    --afk-gray-800: #343a40;
    --afk-gray-900: #212529;

    /* Sémantiques */
    --afk-success: #28a745;
    --afk-success-light: #d4edda;
    --afk-danger: #dc3545;
    --afk-danger-light: #f8d7da;
    --afk-warning: #ffc107;
    --afk-warning-light: #fff3cd;
    --afk-info: #17a2b8;
    --afk-info-light: #d1ecf1;

    /* ========================================
       BORDURES ET RAYONS
       ======================================== */

    --afk-border-color: #e9ecef;
    --afk-border-width: 1px;

    /* Bords arrondis */
    --afk-radius-sm: 4px;
    --afk-radius-md: 8px;
    --afk-radius-lg: 12px;
    --afk-radius-xl: 16px;
    --afk-radius-2xl: 20px;
    --afk-radius-full: 9999px;

    /* ========================================
       OMBRES
       ======================================== */

    --afk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --afk-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --afk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --afk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --afk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --afk-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Ombre primaire (pour focus) */
    --afk-shadow-primary: 0 0 0 3px rgba(40, 114, 250, 0.2);

    /* ========================================
       ESPACEMENT (système 8px)
       ======================================== */

    --afk-space-1: 4px;
    --afk-space-2: 8px;
    --afk-space-3: 12px;
    --afk-space-4: 16px;
    --afk-space-5: 20px;
    --afk-space-6: 24px;
    --afk-space-8: 32px;
    --afk-space-10: 40px;
    --afk-space-12: 48px;
    --afk-space-16: 64px;
    --afk-space-20: 80px;
    --afk-space-24: 96px;

    /* ========================================
       TYPOGRAPHIE
       ======================================== */

    /* Famille de polices */
    --afk-font-family: "DIN Text Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Tailles de police */
    --afk-font-size-xs: 0.75rem;     /* 12px */
    --afk-font-size-sm: 0.875rem;    /* 14px */
    --afk-font-size-base: 1rem;      /* 16px */
    --afk-font-size-lg: 1.125rem;    /* 18px */
    --afk-font-size-xl: 1.25rem;     /* 20px */
    --afk-font-size-2xl: 1.5rem;     /* 24px */
    --afk-font-size-3xl: 1.875rem;   /* 30px */
    --afk-font-size-4xl: 2.25rem;    /* 36px */

    /* Poids de police */
    --afk-font-weight-normal: 400;
    --afk-font-weight-medium: 500;
    --afk-font-weight-semibold: 600;
    --afk-font-weight-bold: 700;
    --afk-font-weight-extrabold: 800;

    /* Hauteur de ligne */
    --afk-line-height-tight: 1.25;
    --afk-line-height-normal: 1.5;
    --afk-line-height-relaxed: 1.75;

    /* ========================================
       CONTENEURS
       ======================================== */

    --afk-container-sm: 640px;
    --afk-container-md: 768px;
    --afk-container-lg: 1024px;
    --afk-container-xl: 1200px;
    --afk-container-2xl: 1400px;

    /* ========================================
       TRANSITIONS
       ======================================== */

    --afk-transition-fast: all 0.15s ease-in-out;
    --afk-transition-base: all 0.2s ease-in-out;
    --afk-transition-slow: all 0.3s ease-in-out;

    /* ========================================
       Z-INDEX
       ======================================== */

    --afk-z-dropdown: 1000;
    --afk-z-sticky: 1020;
    --afk-z-fixed: 1030;
    --afk-z-modal-backdrop: 1040;
    --afk-z-modal: 1050;
    --afk-z-popover: 1060;
    --afk-z-tooltip: 1070;
}

/* ========================================
   RESET ET STYLES DE BASE
   ======================================== */

* {
    box-sizing: border-box;
}

/* ⚠️ IMPORTANT: Ne pas appliquer la police sur body
   Cela casse Elementor et les icônes.
   La police est appliquée uniquement sur les éléments Blocksy ci-dessous */

/* ========================================
   CONTAINER
   ======================================== */

.afk-container {
    width: 100%;
    max-width: var(--afk-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--afk-space-4);
    padding-right: var(--afk-space-4);
}

@media (min-width: 640px) {
    .afk-container {
        padding-left: var(--afk-space-6);
        padding-right: var(--afk-space-6);
    }
}

/* ========================================
   BOUTONS
   ======================================== */

.afk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--afk-space-2);
    padding: var(--afk-space-3) var(--afk-space-5);
    font-size: var(--afk-font-size-base);
    font-weight: var(--afk-font-weight-medium);
    /* font-family: var(--afk-font-family); */ /* DÉSACTIVÉ POUR TESTS */
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: var(--afk-radius-lg);
    cursor: pointer;
    transition: var(--afk-transition-base);
    white-space: nowrap;
    user-select: none;
}

.afk-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Bouton primaire */
.afk-btn-primary {
    background-color: var(--afk-primary);
    color: var(--afk-white);
}

.afk-btn-primary:hover:not(:disabled) {
    background-color: var(--afk-primary-dark);
    box-shadow: var(--afk-shadow-md);
    transform: translateY(-1px);
}

.afk-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Bouton secondaire */
.afk-btn-secondary {
    background-color: var(--afk-gray-200);
    color: var(--afk-gray-900);
}

.afk-btn-secondary:hover:not(:disabled) {
    background-color: var(--afk-gray-300);
}

/* Bouton outline */
.afk-btn-outline {
    background-color: transparent;
    color: var(--afk-primary);
    border: 1px solid var(--afk-primary);
}

.afk-btn-outline:hover:not(:disabled) {
    background-color: var(--afk-primary);
    color: var(--afk-white);
}

/* Bouton danger */
.afk-btn-danger {
    background-color: var(--afk-danger);
    color: var(--afk-white);
}

.afk-btn-danger:hover:not(:disabled) {
    background-color: #c82333;
}

/* Tailles de boutons */
.afk-btn-sm {
    padding: var(--afk-space-2) var(--afk-space-3);
    font-size: var(--afk-font-size-sm);
}

.afk-btn-lg {
    padding: var(--afk-space-4) var(--afk-space-6);
    font-size: var(--afk-font-size-lg);
}

/* ========================================
   CARTES
   ======================================== */

.afk-card {
    background-color: var(--afk-white);
    border-radius: var(--afk-radius-xl);
    box-shadow: var(--afk-shadow-sm);
    overflow: hidden;
    transition: var(--afk-transition-base);
}

.afk-card:hover {
    box-shadow: var(--afk-shadow-md);
}

/* ========================================
   BADGES
   ======================================== */

.afk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--afk-space-1);
    padding: var(--afk-space-1) var(--afk-space-2);
    font-size: var(--afk-font-size-xs);
    font-weight: var(--afk-font-weight-semibold);
    border-radius: var(--afk-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.afk-badge-primary {
    background-color: var(--afk-primary-lighter);
    color: var(--afk-primary);
}

.afk-badge-success {
    background-color: var(--afk-success-light);
    color: var(--afk-success);
}

.afk-badge-danger {
    background-color: var(--afk-danger-light);
    color: var(--afk-danger);
}

.afk-badge-warning {
    background-color: var(--afk-warning-light);
    color: var(--afk-warning);
}

/* ========================================
   CHAMPS DE FORMULAIRE
   ======================================== */

.afk-input,
.afk-select,
.afk-textarea {
    width: 100%;
    padding: var(--afk-space-3) var(--afk-space-4);
    font-size: var(--afk-font-size-base);
    /* font-family: var(--afk-font-family); */ /* DÉSACTIVÉ POUR TESTS */
    color: var(--afk-gray-900);
    background-color: var(--afk-white);
    border: 1px solid var(--afk-border-color);
    border-radius: var(--afk-radius-lg);
    transition: var(--afk-transition-base);
}

.afk-input:focus,
.afk-select:focus,
.afk-textarea:focus {
    outline: none;
    border-color: var(--afk-primary);
    box-shadow: var(--afk-shadow-primary);
}

.afk-input::placeholder,
.afk-textarea::placeholder {
    color: var(--afk-gray-400);
}

/* ========================================
   UTILITAIRES
   ======================================== */

/* Texte */
.afk-text-center { text-align: center; }
.afk-text-left { text-align: left; }
.afk-text-right { text-align: right; }

.afk-font-bold { font-weight: var(--afk-font-weight-bold); }
.afk-font-semibold { font-weight: var(--afk-font-weight-semibold); }
.afk-font-medium { font-weight: var(--afk-font-weight-medium); }

/* Marges */
.afk-mt-0 { margin-top: 0; }
.afk-mt-2 { margin-top: var(--afk-space-2); }
.afk-mt-4 { margin-top: var(--afk-space-4); }
.afk-mt-6 { margin-top: var(--afk-space-6); }
.afk-mt-8 { margin-top: var(--afk-space-8); }

.afk-mb-0 { margin-bottom: 0; }
.afk-mb-2 { margin-bottom: var(--afk-space-2); }
.afk-mb-4 { margin-bottom: var(--afk-space-4); }
.afk-mb-6 { margin-bottom: var(--afk-space-6); }
.afk-mb-8 { margin-bottom: var(--afk-space-8); }

/* Padding */
.afk-p-0 { padding: 0; }
.afk-p-2 { padding: var(--afk-space-2); }
.afk-p-4 { padding: var(--afk-space-4); }
.afk-p-6 { padding: var(--afk-space-6); }
.afk-p-8 { padding: var(--afk-space-8); }