body {
    background-color: rgba(108, 121, 138, 1);
    /* backdrop-filter: blur(4px); */
}

/* Container */
.socials {
    margin-top: 2rem;
}

/* par défaut, visible */
.accordion-button-project .text-end {
    opacity: 1;
    max-width: 100%;
    transition: opacity 0.4s ease, max-width 0.4s ease;
    overflow: hidden;
}

/* quand l'accordéon est ouvert (bouton non-collapsed) */
.accordion-button-project:not(.collapsed) .text-end {
    opacity: 0;
    /* max-width: 0; */
}

/* Boutons ronds */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #fff;
    /* fond neutre */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.social-btn img {
    width: 24px;
    height: 24px;
}

/* Hover / effet */
.social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Optionnel : changer le fond selon la marque */
.social-btn.linkedin:hover {
    background-color: #0A66C2;
}

.social-btn.github:hover {
    background-color: #181717;
}

.social-btn.gmail:hover {
    background-color: #EA4335;
}

/* Image en blanc sur hover si fond coloré */
.social-btn:hover img {
    filter: brightness(0) invert(1);
}

.section-primary {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    width: calc(100% - 4rem);
    margin: 0 auto;
    margin-bottom: 0px;
    background: rgba(var(--bs-tertiary-bg-rgb));
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.section-primary h2 span {
    background: rgba(240, 240, 240);
    font-weight: 400 !important;
    border-radius: 5px;
    padding: .2rem 2rem;
    margin-left: 1.5rem;
}

.section-primary h2 {
    margin-bottom: 2rem;
    font-weight: 300;
}

.hero-section {
    background-image: url('/images/wallpaper.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.content-box {
    backdrop-filter: blur(4px);
}

textarea {
    height: 100% !important;
}

#competence-section,
#introduction-section,
#contact-section,
#feedback-section,
#projet-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}