/* ============================================
   CONTENU PRINCIPAL
   ============================================ */

.content {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.container {
    max-width: 1400px;
}

/* ============================================
   EFFETS DE SCROLL
   ============================================ */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Piste : plus sombre que le fond de la page */
::-webkit-scrollbar-track {
    background: #000000;
}

/* Curseur : un peu plus clair que le fond, bleu nuit discret */
::-webkit-scrollbar-thumb {
    min-height: 48px;
    min-width: 48px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: #1b2352;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #2a3878;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: #3a4d9c;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: #000000;
}

/* Firefox ne gère pas ::-webkit-scrollbar : version fine aux mêmes couleurs */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #1b2352 #000000;
    }
}

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

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

.card {
    animation: fadeIn 0.5s ease;
}

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

@media (max-width: 768px) {
    .card {
        border-radius: 15px;
    }
    
    .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}

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

.d-flex {
    display: flex;
}

.justify-content-end {
    justify-content: flex-end;
}

.gap-2 {
    gap: 0.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.text-end {
    text-align: right;
}

.text-center {
    text-align: center;
}