/* 
=====================================
AEES - Composants Design Moderne
Version 2.0 - Décembre 2024
=====================================
*/

/* ===== COMPOSANTS MODERNISÉS ===== */

/* Badges et Tags */
.modern-badge {
    @apply inline-block px-4 py-2 text-sm font-semibold rounded-full;
}

.modern-badge-primary {
    @apply bg-teal-100 text-teal-700;
}

.modern-badge-secondary {
    @apply bg-slate-100 text-slate-700;
}

.modern-badge-success {
    @apply bg-emerald-100 text-emerald-700;
}

.modern-badge-info {
    @apply bg-blue-100 text-blue-700;
}

.modern-badge-warning {
    @apply bg-amber-100 text-amber-700;
}

/* Cartes Modernisées */
.modern-card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-2xl transform hover:scale-105 transition duration-300 border border-slate-100;
}

.modern-card-hover-teal {
    @apply hover:border-teal-200;
}

.modern-card-hover-emerald {
    @apply hover:border-emerald-200;
}

.modern-card-hover-blue {
    @apply hover:border-blue-200;
}

.modern-card-hover-amber {
    @apply hover:border-amber-200;
}

/* Icônes dans Cercles */
.modern-icon-circle {
    @apply w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 transition duration-300;
}

.modern-icon-circle-teal {
    @apply bg-gradient-to-br from-teal-500 to-teal-600;
}

.modern-icon-circle-emerald {
    @apply bg-gradient-to-br from-emerald-500 to-emerald-600;
}

.modern-icon-circle-blue {
    @apply bg-gradient-to-br from-blue-500 to-blue-600;
}

.modern-icon-circle-amber {
    @apply bg-gradient-to-br from-amber-500 to-amber-600;
}

.modern-icon-circle-slate {
    @apply bg-gradient-to-br from-slate-500 to-slate-600;
}

.modern-icon-circle:hover {
    @apply scale-110;
}

/* Boutons Modernisés */
.modern-btn {
    @apply font-semibold px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 inline-flex items-center;
}

.modern-btn-primary {
    @apply bg-teal-600 hover:bg-teal-700 text-white;
}

.modern-btn-secondary {
    @apply bg-white hover:bg-gray-50 text-teal-600 border-2 border-teal-600;
}

.modern-btn-success {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white;
}

.modern-btn-info {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
}

.modern-btn-warning {
    @apply bg-amber-600 hover:bg-amber-700 text-white;
}

.modern-btn-gradient {
    @apply bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white;
}

/* Sections avec Backgrounds Modernes */
.modern-section-gradient-teal {
    @apply bg-gradient-to-br from-teal-600 via-teal-700 to-emerald-800;
}

.modern-section-gradient-light {
    @apply bg-gradient-to-br from-slate-50 to-teal-50;
}

.modern-section-gradient-warm {
    @apply bg-gradient-to-br from-teal-100 via-blue-50 to-emerald-100;
}

/* Headers de Page Modernes */
.modern-page-header {
    @apply py-16 md:py-24 relative overflow-hidden;
}

.modern-page-header-overlay {
    @apply absolute inset-0 bg-black/20;
}

.modern-page-header-decoration {
    @apply absolute top-0 left-0 w-full h-full;
}

/* Éléments Décoratifs */
.modern-decoration-circle-1 {
    @apply absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full;
}

.modern-decoration-circle-2 {
    @apply absolute top-32 right-20 w-16 h-16 bg-white/5 rounded-full;
}

.modern-decoration-circle-3 {
    @apply absolute bottom-20 left-1/4 w-12 h-12 bg-white/10 rounded-full;
}

.modern-decoration-circle-4 {
    @apply absolute bottom-10 right-10 w-24 h-24 bg-white/5 rounded-full;
}

/* Timeline Moderne */
.modern-timeline {
    @apply relative;
}

.modern-timeline-line {
    @apply absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-teal-400 to-emerald-400 rounded-full hidden md:block;
}

.modern-timeline-point {
    @apply absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full border-4 border-white shadow-lg hidden md:block;
}

.modern-timeline-point-teal {
    @apply bg-teal-500;
}

.modern-timeline-point-emerald {
    @apply bg-emerald-500;
}

.modern-timeline-point-blue {
    @apply bg-blue-500;
}

/* Cartes de Timeline */
.modern-timeline-card {
    @apply bg-white p-6 rounded-xl shadow-lg border border-slate-100 hover:shadow-xl transition duration-300;
}

.modern-timeline-card-header {
    @apply flex items-center mb-4;
}

.modern-timeline-card-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center mr-4;
}

/* Animations et Transitions */
.modern-hover-translate {
    @apply transform transition duration-300;
}

.modern-hover-translate:hover {
    @apply translate-x-1;
}

.modern-group-hover-translate {
    @apply transform transition duration-300;
}

.group:hover .modern-group-hover-translate {
    @apply translate-x-1;
}

/* Glassmorphism */
.modern-glass {
    @apply bg-white/60 backdrop-blur-sm;
}

.modern-glass-white {
    @apply bg-white/90 backdrop-blur-sm;
}

.modern-glass-dark {
    @apply bg-black/20 backdrop-blur-sm;
}

/* Grilles Responsive Standardisées */
.modern-grid-responsive {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8;
}

.modern-grid-responsive-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8;
}

.modern-grid-responsive-4 {
    @apply grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8;
}

/* Stats Modernes */
.modern-stats-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-6;
}

.modern-stats-item {
    @apply text-center bg-white/60 backdrop-blur-sm p-4 rounded-xl border border-white/20;
}

.modern-stats-number {
    @apply text-2xl md:text-3xl font-bold mb-2;
}

.modern-stats-label {
    @apply text-sm text-slate-600;
}

/* Citations et Blockquotes */
.modern-quote {
    @apply bg-slate-50 p-4 rounded-lg italic text-slate-600 leading-relaxed;
}

.modern-quote-highlight {
    @apply bg-gradient-to-br from-teal-50 to-emerald-50 p-8 rounded-2xl border border-teal-100;
}

/* Navigation et Breadcrumb */
.modern-breadcrumb {
    @apply flex items-center space-x-2 text-sm;
}

.modern-breadcrumb-link {
    @apply text-teal-600 hover:text-teal-700 font-medium;
}

.modern-breadcrumb-separator {
    @apply text-slate-400;
}

/* Cartes Membre */
.modern-member-card {
    @apply bg-white p-8 rounded-3xl shadow-xl border border-slate-100 hover:shadow-2xl transition duration-300 text-center;
}

.modern-member-avatar {
    @apply w-24 h-24 rounded-full mx-auto object-cover shadow-lg;
}

.modern-member-role-badge {
    @apply text-sm font-semibold px-3 py-1 rounded-full;
}

.modern-member-badge-primary {
    @apply bg-teal-100 text-teal-700;
}

.modern-member-badge-success {
    @apply bg-emerald-100 text-emerald-700;
}

.modern-member-badge-info {
    @apply bg-blue-100 text-blue-700;
}

.modern-member-badge-warning {
    @apply bg-amber-100 text-amber-700;
}

/* ===== UTILITIES CUSTOM ===== */

/* Text Gradients */
.text-gradient-teal {
    @apply bg-gradient-to-r from-teal-600 to-emerald-600 bg-clip-text text-transparent;
}

.text-gradient-blue {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent;
}

/* Ring Effects */
.modern-ring-teal {
    @apply ring-4 ring-teal-200;
}

.modern-ring-emerald {
    @apply ring-4 ring-emerald-200;
}

.modern-ring-blue {
    @apply ring-4 ring-blue-200;
}

.modern-ring-amber {
    @apply ring-4 ring-amber-200;
}

/* Responsive Text Sizes */
.modern-text-responsive-xl {
    @apply text-3xl md:text-4xl;
}

.modern-text-responsive-lg {
    @apply text-2xl md:text-3xl;
}

.modern-text-responsive-md {
    @apply text-xl md:text-2xl;
}

/* ===== DARK MODE SUPPORT (Futur) ===== */
@media (prefers-color-scheme: dark) {
    .modern-card {
        @apply bg-slate-800 border-slate-700;
    }
    
    .modern-text-dark {
        @apply text-slate-200;
    }
    
    .modern-bg-dark {
        @apply bg-slate-900;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .modern-decoration-circle-1,
    .modern-decoration-circle-2,
    .modern-decoration-circle-3,
    .modern-decoration-circle-4,
    .modern-page-header-decoration {
        display: none;
    }
    
    .modern-card {
        @apply shadow-none border border-slate-300;
    }
}

/* ===== ANIMATIONS AVANCÉES ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.modern-pulse-soft {
    animation: pulse-soft 2s infinite;
}

/* ===== FOCUS STATES POUR ACCESSIBILITÉ ===== */
.modern-focus {
    @apply focus:ring-2 focus:ring-teal-500 focus:outline-none;
}

.modern-focus-visible {
    @apply focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:outline-none;
}

/* ===== ÉTATS LOADING ===== */
.modern-loading {
    @apply opacity-50 pointer-events-none;
}

.modern-skeleton {
    @apply bg-slate-200 animate-pulse rounded;
}

/* ===== VARIABLES CSS CUSTOM ===== */
:root {
    --modern-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --modern-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --modern-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --modern-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --modern-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --modern-transition: all 0.3s ease;
    --modern-border-radius: 0.75rem;
    --modern-border-radius-lg: 1rem;
    --modern-border-radius-xl: 1.5rem;
}