/*
  Styles spécifiques à la page d'accueil : hero, texte d'introduction et image de profil.
*/

#accueil {
    animation: fadeIn 0.8s ease forwards;
    text-align: center;
    padding-top: 40px;
}

#accueil h1 {
    font-size: 2.8rem;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(124, 92, 191, 0.25);
}

.home-text {
    font-size: 1.4rem;
    color: rgb(225, 199, 199);
    margin-bottom: 20px;
}

#accueil img {
    max-width: 260px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 0 25px rgba(124, 92, 191, 0.4);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#accueil img:hover {
    transform: scale(1.06);
    box-shadow: 0 0 45px rgba(124, 92, 191, 0.7);
}

.boutons a {
    text-decoration: none;
    margin: 0 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

#accueil {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem) !important;
    text-align: left;
    background: linear-gradient(120deg, rgba(17, 24, 39, .82), rgba(30, 27, 75, .48));
    border: 1px solid var(--border);
    border-radius: 2rem;
    box-shadow: var(--shadow);
}

#accueil::after {
    position: absolute;
    right: -5rem;
    bottom: -8rem;
    width: 20rem;
    height: 20rem;
    border: 1px solid rgba(34, 211, 238, .22);
    border-radius: 50%;
    content: "";
}

#accueil h1 { max-width: 650px; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; }
.home-text { max-width: 560px; color: var(--text-muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
#accueil img { position: relative; z-index: 1; max-width: 290px; border: 6px solid rgba(167, 139, 250, .35); box-shadow: 0 0 0 14px rgba(139, 92, 246, .08), 0 25px 65px rgba(0, 0, 0, .45); }
#accueil img:hover { box-shadow: 0 0 0 18px rgba(34, 211, 238, .08), 0 25px 65px rgba(0, 0, 0, .55); }

@media (max-width: 767px) {
    #accueil { text-align: center; }
    #accueil .d-flex { justify-content: center; flex-wrap: wrap; }
    #accueil img { max-width: 220px; }
}