/* =========================================
   ONEPAY - GLOBAL DESIGN SYSTEM (CORE)
   ========================================= */

:root {
    /* --- COULEURS --- */
    --primary-color: #0d6efd;
    --primary-dark: #0a58ca;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --light-bg: #f8f9fa;
    --dark-text: #1F2937;

    /* --- DIMENSIONS & ARRONDIS (Source Unique) --- */
    --onepay-radius: 12px; /* L'arrondi "Loyalty" appliqué partout */
    --card-radius: var(--onepay-radius); /* Alias pour compatibilité */
    --btn-radius: 12px;

    /* --- OMBRES & TYPO --- */
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: var(--light-bg);
    color: var(--dark-text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- TYPOGRAPHIE --- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--dark-text); }
a { text-decoration: none; transition: color 0.2s; }

/* --- COMPOSANTS GLOBAUX --- */

/* 1. Carte Standard OnePay */
.card-onepay {
    background: #fff;
    border: none;
    border-radius: var(--onepay-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

/* 2. Boutons */
.btn { 
    border-radius: var(--btn-radius); 
    font-weight: 600; 
    padding: 10px 20px; 
}

.btn-lg {
    border-radius: var(--btn-radius);
}

.btn-onepay {
    background: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
    transition: all 0.2s ease;
}
.btn-onepay:hover { 
    background: var(--primary-dark); 
    color: white; 
    transform: translateY(-2px); 
}

/* 3. Formulaires */
.form-control {
    border-radius: 12px; /* Un peu plus arrondi pour matcher */
    padding: 12px;
    border: 1px solid #e0e0e0;
}
.form-control:focus {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
    border-color: var(--primary-color);
}

/* --- UTILITIES --- */
.text-primary-onepay { color: var(--primary-color) !important; }
.fw-800 { font-weight: 800; }

/* ============================================================
   🟢 FORCEURS GLOBAUX (APPLIQUER LE STYLE LOYALTY PARTOUT)
   ============================================================ */

/* Force l'arrondi sur tous les conteneurs principaux du site */
.card, 
.card-onepay,
.capsule-card,      /* Dashboard */
.scan-container,    /* Page Scan */
.ad-widget,         /* Pubs */
.alert,             /* Messages */
.loyalty-card,      /* Fidélité */
.reward-card,
.modal-content {    /* Modales Bootstrap */
    border-radius: var(--onepay-radius) !important;
    overflow: hidden; /* Important pour que l'image/header ne dépasse pas */
}

/* Corrige les en-têtes (Header) pour suivre l'arrondi du haut */
.card-header, 
.card-header-onepay,
.capsule-header {
    border-top-left-radius: var(--onepay-radius) !important;
    border-top-right-radius: var(--onepay-radius) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Corrige les pieds de page (Footer) pour suivre l'arrondi du bas */
.card-footer {
    border-bottom-left-radius: var(--onepay-radius) !important;
    border-bottom-right-radius: var(--onepay-radius) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* ANIMATIONS DASHBOARD */

/* Effet de rebond vers le haut au survol */
.hover-scale:hover { 
    transform: translateY(-3px); 
}

/* Transition douce pour les mouvements */
.transition-transform { 
    transition: transform 0.2s ease; 
}

/* Ombre portée au survol */
.hover-shadow:hover { 
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; 
}

/* Fond gris clair au survol des listes */
.hover-bg-light:hover { 
    background-color: #f8f9fa; 
}

/* Transition douce pour les couleurs */
.transition-colors {
    transition: background-color 0.2s ease;
}

/* Dimensions fixes pour le bouton avatar */
.btn-avatar {
    width: 48px; 
    height: 48px;
}