body {
    background-image: url('../img/vecteezy_black-chalk-gradient-background-blurry-effect-dark-design_16704424.jpg');
    background-size: cover; /* L'image s'adapte pour couvrir tout l'écran */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche l'image de se répéter en mosaïque */
    background-attachment: fixed; /* Rend l'image statique par rapport à la page */
    min-height: 100vh; /* S'assure que le fond prend au minimum toute la hauteur de l'écran */
    font-family: '',monospace;
}

/* 1. Le conteneur global (fond sombre, bords très arrondis) */
.custom-pills {
    background-color: #1c1c1e;
    border-radius: 50px;
    padding: 6px;
    display: inline-flex;

    /* Ajout de la bordure blanche sur tout le contour */
    border: 1px solid #ffffff;
}

/* 2. Le style des boutons inactifs (texte gris, sans fond) */
.custom-pills .nav-link {
    color: #8e8e93;
    border-radius: 40px;
    padding: 8px 24px;
    font-weight: 600;
    position: relative; /* Nécessaire pour placer le trait lumineux ensuite */
    background-color: transparent;
    transition: all 0.3s ease;
}

/* Effet au survol des boutons inactifs */
.custom-pills .nav-link:hover {
    color: #ffffff; /* Le texte devient blanc */
    background-color: rgba(255, 255, 255, 0.1); /* Ajoute un fond blanc très léger */
}

/* Optionnel : Empêcher le hover de modifier le bouton déjà actif */
.custom-pills .nav-link.active:hover {
    background-color: #2c2c2e; /* Garde la couleur active normale */
    cursor: default;
}

/* 3. Le style du bouton actif (fond légèrement plus clair, texte blanc) */
.custom-pills .nav-link.active {
    background-color: #2c2c2e;
    color: #ffffff;
}

/* 4. Le petit trait lumineux au-dessus du bouton actif */
.custom-pills .nav-link.active::before {
    content: "";
    position: absolute;
    top: 0; /* Placé tout en haut du bouton */
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 2px 6px 1px rgba(255, 255, 255, 0.6); /* Effet "Glow" */
}

::-webkit-scrollbar {
    display: none;
}

/* Activer le défilement fluide sur toute la page */
html {
    scroll-behavior: smooth;
}

/* Style du bouton retour en haut */
.btn-up {
    width: 50px;
    height: 50px;
    background-color: #1c1c1e; /* Même fond que ta pill bar */
    border: 2px solid #ffffff; /* Bordure rouge */
    font-size: 1.5rem;
    z-index: 1000; /* Pour qu'il reste au-dessus du reste */
    transition: all 0.3s ease;
}

.btn-up:hover {
    background-color: #ffffff;
    color: #1c1c1e !important;
}

/* 1. L'enveloppe extérieure (comme .custom-pills) */
.content-box {
    background-color: #1c1c1e;
    border: 1px solid #ffffff;
    border-radius: 50px; /* Même arrondi que ta barre de navigation */
    padding: 6px; /* Même espacement intérieur que ta barre */
}

/* 2. L'intérieur avec le contenu (comme .nav-link.active) */
.tab-content {
    border-radius: 44px; /* Un peu plus petit que 50px pour s'emboîter parfaitement */
    padding: 3rem; /* Pour garder de l'espace autour de ton texte (équivalent du p-5) */
    min-height: 300px; /* Optionnel : donne une hauteur minimum agréable visuellement */
}

/* --- Animations d'entrée --- */

/* Définition de l'animation : part d'en bas (30px) et invisible (opacity 0)
   vers sa position normale (0px) et visible (opacity 1) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classe à appliquer sur les éléments qu'on veut animer */
.animate-fade-up {
    opacity: 0; /* Invisible au tout début */
    animation: fadeInUp 0.8s ease-out forwards; /* forwards permet de garder l'état final (visible) */
}

/* Classes pour décaler l'animation dans le temps (effet d'escalier) */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }