/* ════════════════════════════════════════════════════════════════════════════════
   🔄 CIVIC OS - COUCHE DE COMPATIBILITÉ
   Assure la rétrocompatibilité avec les anciens styles pendant la migration
   ════════════════════════════════════════════════════════════════════════════════ */

/* 🏗️ ALIASES POUR RÉTROCOMPATIBILITÉ */
.glass--pro {
    /* Ancien style → Nouveau Civic OS */
    background: var(--civic-bg-navbar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--civic-shadow-soft);
    transition: all var(--civic-anim-smooth);
}

.glass--ultra {
    /* Ancien style ultra → Nouveau Civic OS card */
    background: var(--civic-bg-card);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--civic-radius-lg);
    box-shadow: var(--civic-shadow-deep);
    padding: var(--civic-space-xl);
}

.glass--light,
.glass--lite {
    /* Ancien style light → Nouveau Civic OS card leger */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--civic-radius-md);
    box-shadow: var(--civic-shadow-soft);
}

/* 🎯 BOUTONS RÉTROCOMPATIBLES */
.btn-glass {
    /* Ancien btn-glass → Nouveau civic-btn--secondary */
    background: var(--civic-bg-glass);
    color: var(--civic-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 12px 24px;
    border-radius: var(--civic-radius-sm);
    transition: all var(--civic-anim-smooth);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--civic-cyan);
    color: var(--civic-cyan);
    transform: translateY(-2px);
    box-shadow: var(--civic-glow-cyan);
}

.btn-glass-secondary {
    /* Ancien btn-glass-secondary → Nouveau civic-btn--secondary */
    background: rgba(255, 255, 255, 0.1);
    color: var(--civic-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 12px 24px;
    border-radius: var(--civic-radius-sm);
    transition: all var(--civic-anim-smooth);
    font-weight: 500;
}

.btn-glass-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--civic-text-primary);
    transform: translateY(-2px);
}

.btn-constitutional {
    /* MonarkQuebec constitutional → Civic OS */
    background: var(--civic-gradient-gold);
    color: var(--civic-primary-imperial);
    border: none;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--civic-radius-sm);
    transition: all var(--civic-anim-smooth);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.btn-constitutional:hover {
    background: linear-gradient(135deg, #F4D03F, #E6C200);
    color: var(--civic-primary-imperial);
    transform: translateY(-3px);
    box-shadow: var(--civic-shadow-authority);
}

/* 🏛️ CARTES RÉTROCOMPATIBLES */
.card-constitutional {
    /* MonarkQuebec card → Civic OS */
    background: var(--civic-bg-card);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--civic-radius-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--civic-space-xl);
    transition: all var(--civic-anim-authority);
}

.card-constitutional:hover {
    transform: translateY(-5px);
    background: rgba(6, 62, 61, 0.4);
    border-color: var(--civic-gold);
    box-shadow: var(--civic-shadow-authority);
}

.card-biq {
    /* BIQ card → Civic OS */
    background: var(--civic-bg-card);
    border: 1px solid rgba(0, 230, 195, 0.2);
    border-radius: var(--civic-radius-md);
    padding: var(--civic-space-xl);
    transition: all var(--civic-anim-smooth);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.card-biq:hover {
    transform: translateY(-8px);
    border-color: var(--civic-cyan);
    box-shadow: var(--civic-glow-cyan);
}

.card-rdkq {
    /* République card → Civic OS */
    background: var(--civic-bg-card);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--civic-radius-md);
    padding: var(--civic-space-xl);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--civic-shadow-soft);
    transition: all var(--civic-anim-smooth);
}

.card-rdkq:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--civic-gold);
    transform: translateY(-8px);
    box-shadow: var(--civic-shadow-authority);
}

/* 📝 TEXTES ET GRADIENTS RÉTROCOMPATIBLES */
.text-gradient {
    /* Ancien text-gradient → Civic OS */
    background: var(--civic-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.hero-title {
    /* Ancien hero-title → Civic OS h1 */
    font-family: 'Cinzel', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--civic-gold);
    text-transform: uppercase;
    text-shadow: var(--civic-glow-gold);
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.hero-lead {
    /* Ancien hero-lead → Civic OS lead */
    color: var(--civic-text-secondary);
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* 🎭 SECTIONS SPÉCIALISÉES RÉTROCOMPATIBLES */
.hero-section {
    /* Ancien hero-section → Civic OS section */
    padding: var(--civic-space-4xl) 0;
    text-align: center;
    color: var(--civic-text-primary);
    background: rgba(6, 62, 61, 0.1);
    position: relative;
    overflow: hidden;
}

.indigenous-section {
    /* MonarkQuebec indigenous → Civic OS */
    background: linear-gradient(135deg,
        rgba(240, 147, 251, 0.1) 0%,
        rgba(102, 126, 234, 0.05) 50%,
        rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(240, 147, 251, 0.2);
    border-radius: var(--civic-radius-lg);
    padding: var(--civic-space-2xl);
    margin: var(--civic-space-xl) 0;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* 📱 NAVIGATION RÉTROCOMPATIBLE */
.navbar-brand {
    /* Ancien navbar-brand → Civic OS */
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--civic-gold) !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all var(--civic-anim-smooth);
}

.navbar-brand:hover {
    color: var(--civic-gold-light) !important;
    transform: translateY(-2px);
    text-shadow: var(--civic-glow-gold);
}

.nav-link {
    /* Ancien nav-link → Civic OS */
    font-weight: 500;
    color: var(--civic-text-secondary) !important;
    padding: var(--civic-space-sm) var(--civic-space-md) !important;
    border-radius: var(--civic-radius-sm);
    transition: all var(--civic-anim-smooth);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.nav-link:hover {
    color: var(--civic-cyan) !important;
    background: rgba(0, 255, 200, 0.1);
    box-shadow: var(--civic-glow-cyan);
}

/* 🎨 ANIMATIONS DE COMPATIBILITÉ */
.fade-in {
    /* Ancien fade-in → Animation Civic OS */
    opacity: 0;
    transform: translateY(30px);
    animation: civicReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.constitutional-pulse {
    /* MonarkQuebec pulse → Civic OS */
    animation: civic-pulse-gold 3s infinite;
}

.biq-fade-in {
    /* BIQ fade → Civic OS */
    opacity: 0;
    transform: translateY(30px);
    animation: civicReveal var(--civic-anim-authority) forwards;
}

.rdkq-fade-in {
    /* République fade → Civic OS */
    opacity: 0;
    transform: translateY(30px);
    animation: civicReveal var(--civic-anim-authority) forwards;
}

/* 📊 UTILITAIRES DE COMPATIBILITÉ */
.content-wrapper {
    /* Ancien content-wrapper → Civic OS */
    padding-top: 80px;
    min-height: 100vh;
}

.section-separator {
    /* Ancien séparateur → Civic OS */
    height: 2px;
    background: var(--civic-gradient-accent);
    margin: var(--civic-space-2xl) 0;
    border-radius: 1px;
}

/* 🔧 VARIABLES DE COMPATIBILITÉ */
:root {
    /* Mappage des anciennes variables vers Civic OS */
    --uman-primary: var(--civic-primary-imperial);
    --uman-light: var(--civic-text-primary);
    --uman-success: var(--civic-success);
    --uman-warning: var(--civic-warning);
    --uman-danger: var(--civic-danger);
    --uman-info: var(--civic-info);
    
    --glass-bg-pro: var(--civic-bg-navbar);
    --glass-bg-standard: var(--civic-bg-card);
    --glass-bg-lite: var(--civic-bg-glass);
    
    --radius-sm: var(--civic-radius-sm);
    --radius-md: var(--civic-radius-md);
    --radius-lg: var(--civic-radius-lg);
    
    --duration-normal: var(--civic-anim-smooth);
    --duration-fast: var(--civic-anim-lightning);
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🚨 MESSAGES D'AVERTISSEMENT POUR DÉVELOPPEURS */
.glass--pro::before,
.btn-glass::before {
    content: '';
    /* Utiliser .civic-navbar et .civic-btn à la place */
}

/*
    📢 NOTICE POUR DÉVELOPPEURS :
    
    Ce fichier assure la rétrocompatibilité pendant la migration vers Civic OS.
    
    RECOMMANDÉ :
    - Migrer progressivement vers les classes .civic-*
    - Utiliser /static/civic-os.css comme référence
    - Consulter le guide : /static/CIVIC-OS-MIGRATION-GUIDE.md
    
    ANCIEN → NOUVEAU :
    .glass--pro → .civic-navbar
    .btn-glass → .civic-btn--secondary  
    .card-constitutional → .civic-card
    .text-gradient → .civic-text-gradient
*/