/* ============================================================================
   BARBIER LUXE - Système de Design CSS
   ============================================================================
   Variables CSS réutilisables pour maintenir la cohérence visuelle
   
   UTILISATION :
   - Copier ces variables au début de tout nouveau fichier CSS
   - Utiliser var(--nom-variable) dans vos styles
   
   ========================================================================= */

:root {
    /* Couleurs Principales */
    --navy:       #16213A;
    --navy-deep:  #0D1628;
    --navy-mid:   #1E2D4A;
    --navy-light: #243355;
    
    --gold:       #C9A84C;
    --gold-light: #E8C96A;
    --gold-pale:  #F5E4A8;
    --gold-dark:  #8B6A1F;
    
    --cream:      #F7F0E0;
    --cream-dim:  #C8B98A;
    
    --muted:      #7A8FA8;
    
    /* Couleurs de Statut */
    --success:    #27AE60;
    --warning:    #F39C12;
    --danger:     #E74C3C;
    --info:       #3498DB;
    
    /* Pole de Barbier */
    --red-pole:   #C0392B;
    --blue-pole:  #1A56A0;
}

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

/* Polices */
.cinzel {
    font-family: 'Cinzel', serif;
}

.raleway {
    font-family: 'Raleway', sans-serif;
}

.playfair {
    font-family: 'Playfair Display', serif;
}

.baskerville {
    font-family: 'Libre Baskerville', serif;
}

/* Titres Standard */
.section-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 3.8vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream);
    line-height: 1.05;
}

.page-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream);
}

/* Labels */
.label-gold {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ============================================================================
   COMPOSANTS RÉUTILISABLES
   ============================================================================ */

/* Badge Décoratif */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gold);
}

.badge::before,
.badge::after {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    background: var(--gold);
    opacity: 0.7;
}

/* Divider Doré */
.gold-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
}

.gold-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.gold-divider i {
    color: var(--gold);
    font-size: 0.6rem;
    opacity: 0.8;
}

/* Coins Décoratifs */
.corner-tl {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 16px;
    height: 16px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
}

.corner-br {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 16px;
    height: 16px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
}

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

/* Bouton Principal (Gold) */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    color: var(--navy-deep);
    padding: 16px 38px;
    border: none;
    cursor: pointer;
    transition: all 0.35s;
    position: relative;
    overflow: hidden;
}

.btn-gold::after {
    content: '';
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(201, 168, 76, 0.38);
}

/* Bouton Secondaire (Ghost) */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: transparent;
    color: var(--gold);
    padding: 15px 38px;
    border: 1px solid rgba(201, 168, 76, 0.5);
    cursor: pointer;
    transition: all 0.35s;
}

.btn-ghost:hover {
    background: rgba(201, 168, 76, 0.1);
    border-color: var(--gold);
}

/* ============================================================================
   CARTES & CONTENEURS
   ============================================================================ */

/* Carte Standard */
.card {
    background: var(--navy-mid);
    border: 1px solid rgba(201, 168, 76, 0.18);
    padding: 32px;
    transition: all 0.3s;
}

.card:hover {
    border-color: rgba(201, 168, 76, 0.38);
}

/* Carte avec Bordure Supérieure */
.card-top-line {
    position: relative;
}

.card-top-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ============================================================================
   BADGES DE STATUT
   ============================================================================ */

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-pending {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.status-confirmed {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-completed {
    background: rgba(122, 143, 168, 0.15);
    color: var(--muted);
}

.status-cancelled {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.text-gold { color: var(--gold); }
.text-cream { color: var(--cream); }
.text-muted { color: var(--muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

.bg-navy { background: var(--navy); }
.bg-navy-deep { background: var(--navy-deep); }
.bg-navy-mid { background: var(--navy-mid); }
.bg-navy-light { background: var(--navy-light); }

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* 
Mobile    : max-width: 640px
Tablet    : max-width: 768px
Desktop-S : max-width: 1024px
Desktop-L : max-width: 1280px
*/