/* ========================================
   ESPACE ACADÉMIE - BRAND COLORS & STYLES
   ======================================== */

:root {
    /* Couleurs principales du logo */
    --brand-blue-primary: #1E3A8A;    /* Bleu foncé du logo */
    --brand-blue-light: #2563EB;      /* Bleu moyen du logo */
    --brand-blue-lighter: #3B82F6;    /* Bleu clair */
    --brand-blue-lightest: #93C5FD;   /* Bleu très clair */

    --brand-green-primary: #16A34A;   /* Vert foncé du logo */
    --brand-green-light: #22C55E;     /* Vert moyen du logo */
    --brand-green-lighter: #4ADE80;   /* Vert clair */
    --brand-green-lightest: #BBF7D0;  /* Vert très clair */

    /* Couleurs neutres complémentaires */
    --brand-gray-900: #111827;
    --brand-gray-800: #1F2937;
    --brand-gray-700: #374151;
    --brand-gray-600: #4B5563;
    --brand-gray-500: #6B7280;
    --brand-gray-400: #9CA3AF;
    --brand-gray-300: #D1D5DB;
    --brand-gray-200: #E5E7EB;
    --brand-gray-100: #F3F4F6;
    --brand-gray-50: #F9FAFB;

    /* Couleurs fonctionnelles */
    --brand-success: var(--brand-green-primary);
    --brand-warning: #F59E0B;
    --brand-error: #DC2626;
    --brand-info: var(--brand-blue-light);

    /* Ombres personnalisées */
    --shadow-brand-sm: 0 1px 3px rgba(30, 58, 138, 0.1);
    --shadow-brand: 0 4px 6px rgba(30, 58, 138, 0.15);
    --shadow-brand-lg: 0 10px 25px rgba(30, 58, 138, 0.2);
    --shadow-brand-xl: 0 20px 40px rgba(30, 58, 138, 0.25);

    /* Gradients de marque */
    --gradient-brand-primary: linear-gradient(135deg, var(--brand-blue-primary) 0%, var(--brand-blue-light) 100%);
    --gradient-brand-secondary: linear-gradient(135deg, var(--brand-green-primary) 0%, var(--brand-green-light) 100%);
    --gradient-brand-mixed: linear-gradient(135deg, var(--brand-blue-primary) 0%, var(--brand-green-primary) 100%);
    --gradient-brand-hero: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-green-light) 100%);
    --gradient-brand-subtle: linear-gradient(135deg, rgba(30, 58, 138, 0.05) 0%, rgba(22, 163, 74, 0.05) 100%);
}

/* ========================================
   CLASSES UTILITAIRES PERSONNALISÉES
   ======================================== */

/* Couleurs de texte */
.text-brand-blue { color: var(--brand-blue-primary); }
.text-brand-blue-light { color: var(--brand-blue-light); }
.text-brand-green { color: var(--brand-green-primary); }
.text-brand-green-light { color: var(--brand-green-light); }

/* Couleurs de fond */
.bg-brand-blue { background-color: var(--brand-blue-primary); }
.bg-brand-blue-light { background-color: var(--brand-blue-light); }
.bg-brand-green { background-color: var(--brand-green-primary); }
.bg-brand-green-light { background-color: var(--brand-green-light); }

/* Gradients */
.gradient-brand-primary { background: var(--gradient-brand-primary); }
.gradient-brand-secondary { background: var(--gradient-brand-secondary); }
.gradient-brand-mixed { background: var(--gradient-brand-mixed); }
.gradient-brand-hero { background: var(--gradient-brand-hero); }
.gradient-brand-subtle { background: var(--gradient-brand-subtle); }

/* Bordures */
.border-brand-blue { border-color: var(--brand-blue-light); }
.border-brand-green { border-color: var(--brand-green-light); }

/* Ombres */
.shadow-brand { box-shadow: var(--shadow-brand); }
.shadow-brand-lg { box-shadow: var(--shadow-brand-lg); }
.shadow-brand-xl { box-shadow: var(--shadow-brand-xl); }

/* ========================================
   COMPOSANTS PERSONNALISÉS
   ======================================== */

/* Boutons de marque */
.btn-brand-primary {
    background: var(--gradient-brand-primary);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-brand-primary:hover {
    background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-blue-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-lg);
}

.btn-brand-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-brand);
}

.btn-brand-secondary {
    background: var(--gradient-brand-secondary);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-brand-secondary:hover {
    background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-lg);
}

.btn-brand-outline {
    background: transparent;
    color: var(--brand-blue-primary);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 2px solid var(--brand-blue-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-brand-outline:hover {
    background: var(--brand-blue-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand);
}

/* Cards avec style de marque */
.card-brand {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-brand-sm);
    border: 1px solid var(--brand-gray-200);
    transition: all 0.3s ease;
}

.card-brand:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-brand-lg);
    border-color: var(--brand-blue-lighter);
}

.card-brand-featured {
    background: var(--gradient-brand-subtle);
    border: 2px solid var(--brand-blue-lightest);
}

/* Navigation avec style de marque */
.nav-brand-link {
    color: var(--brand-gray-700);
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
}

.nav-brand-link:hover {
    color: var(--brand-blue-primary);
    background-color: rgba(30, 58, 138, 0.05);
}

.nav-brand-link.active {
    color: var(--brand-blue-primary);
    background-color: rgba(30, 58, 138, 0.1);
}

.nav-brand-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--gradient-brand-primary);
    border-radius: 1px;
}

/* Badges et tags */
.badge-brand-blue {
    background: rgba(30, 58, 138, 0.1);
    color: var(--brand-blue-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge-brand-green {
    background: rgba(22, 163, 74, 0.1);
    color: var(--brand-green-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Alertes avec style de marque */
.alert-brand-success {
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid var(--brand-green-lightest);
    color: var(--brand-green-primary);
    padding: 1rem;
    border-radius: 0.75rem;
    border-left: 4px solid var(--brand-green-primary);
}

.alert-brand-info {
    background: rgba(30, 58, 138, 0.1);
    border: 1px solid var(--brand-blue-lightest);
    color: var(--brand-blue-primary);
    padding: 1rem;
    border-radius: 0.75rem;
    border-left: 4px solid var(--brand-blue-primary);
}

/* ========================================
   ANIMATIONS PERSONNALISÉES
   ======================================== */

@keyframes brand-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(30, 58, 138, 0);
    }
}

@keyframes brand-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.animate-brand-pulse {
    animation: brand-pulse 2s infinite;
}

.animate-brand-bounce {
    animation: brand-bounce 1s infinite;
}

/* Effet de survol pour les éléments interactifs */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-brand-lg);
}

/* ========================================
   COMPOSANTS SPÉCIAUX
   ======================================== */

/* Logo avec effet */
.logo-brand {
    transition: all 0.3s ease;
}

.logo-brand:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Dividers avec style de marque */
.divider-brand {
    height: 2px;
    background: var(--gradient-brand-mixed);
    border: none;
    border-radius: 1px;
    margin: 2rem 0;
}

/* Section hero avec effet parallax */
.hero-brand {
    background: var(--gradient-brand-hero);
    position: relative;
    overflow: hidden;
}

.hero-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .btn-brand-primary,
    .btn-brand-secondary,
    .btn-brand-outline {
        padding: 0.625rem 1.25rem;
        font-size: 0.9rem;
    }

    .card-brand {
        padding: 1rem;
    }

    .hero-brand::before {
        display: none; /* Désactiver l'animation sur mobile pour les performances */
    }
}

/* ========================================
   FOCUS ET ACCESSIBILITÉ
   ======================================== */

.btn-brand-primary:focus,
.btn-brand-secondary:focus,
.btn-brand-outline:focus {
    outline: 2px solid var(--brand-blue-lighter);
    outline-offset: 2px;
}

.nav-brand-link:focus {
    outline: 2px solid var(--brand-blue-lighter);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Mode sombre (optionnel) */
@media (prefers-color-scheme: dark) {
    .card-brand {
        background: var(--brand-gray-800);
        border-color: var(--brand-gray-700);
        color: var(--brand-gray-100);
    }

    .nav-brand-link {
        color: var(--brand-gray-300);
    }

    .nav-brand-link:hover {
        color: var(--brand-blue-lighter);
        background-color: rgba(59, 130, 246, 0.1);
    }
}

/* ========================================
   CLASSES UTILITAIRES SUPPLÉMENTAIRES
   ======================================== */

.text-gradient-brand {
    background: var(--gradient-brand-mixed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.border-gradient-brand {
    border: 2px solid transparent;
    background: linear-gradient(white, white), var(--gradient-brand-mixed);
    background-clip: padding-box, border-box;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--brand-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-brand-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-brand-mixed);
}