/* ACCUEIL */
.content-container-background-img h1{
    font-family: "Montserrat Bold", sans-serif;
    color: #ffffff;
    font-size: calc(2rem + 2vw);
    font-weight: 700;
    text-shadow: 2px 2px 12px rgba(0,0,0,0.3);
    margin-bottom: 1.5rem;
}

.content-container-background-img h2{
    color: #ffffff;
    font-size: calc(1rem + 0.5vw);
    font-weight: 400;
    text-shadow: 1px 1px 12px rgba(0,0,0,0.3);
    margin-bottom: 2rem;
    margin-left: 0;
    margin-right: auto;
}

#img-home {
    min-height: 100vh;
    width: 100vw;
    position: relative;
    background-image: url('../../banner/optimized-background-accueil.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10%;
}

.planifie-echange {
    max-width: 20.5rem;
}

.content-container-background-img {
    position: relative;
    max-width: 50%;
    text-align: left;
}

#img-home::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.05);
}


@media (max-width: 991px) {
    .content-container-background-img h1, .content-container-background-img h2 {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.75);
    }

    .content-container-background-img {
        max-width: unset;
        text-align: center;
    }

    #img-home {
        padding: 10%;
        background-position: 75%;
        align-items: flex-start;
    }
}

#clients, #post, #contact, #prestations{
    scroll-snap-align: center;
}

/* NOTRE APPROCHE (EQUATION) */

#notre-approche {
    padding-block: 6rem;
    background: linear-gradient(135deg, #052557 0%, #1a4c8c 100%);
}

#notre-approche h2 {
    font-family: 'Montserrat ExtraBold', sans-serif;
    letter-spacing: 0.5rem;
}

/* CONTACT */
#contact h5 {
    font-family: 'Montserrat Bold', sans-serif;
}

/* NOTRE EQUIPE */
/* Styles pour la nouvelle section équipe */
.title-font {
    font-family: 'Montserrat Bold', sans-serif;
    font-size: clamp(2rem, 6vh, 5rem);
    font-weight: bold;
    color: #052557;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.team-text-vertical {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: clamp(2rem, 7vh, 5rem);
    letter-spacing: clamp(4px, 1vh, 12px);
    display: flex;
}

.team-text-1 {
    opacity: 0.2;
    left: 10%;
}

.team-text-2 {
    opacity: 0.45;
    left: 30%;
}

.team-text-3 {
    opacity: 0.65;
    left: 50%;
}

.team-text-4 {
    opacity: 1;
    left: 70%;
}

.team-profile-card {
    background: linear-gradient(135deg, #052557 0%, #1a4c8c 100%);
    border-radius: 15px;
    padding: 40px 30px;
    color: white;
    box-shadow: 0 10px 30px rgba(5, 37, 87, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1;
    display: flex;
    align-items: center;
}

.profile-content {
    text-align: left;
    width: 100%;
}

.profile-name {
    font-size: 1.8rem;
    font-family: 'Montserrat Light', sans-serif;
    margin-bottom: 15px;
    color: #ffffff;
    letter-spacing: 1px;
}

.profile-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e8f4fd;
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .team-text-2 {
        left: 10%;
    }

    .team-text-3 {
        left: 40%;
    }
}

@media (max-width: 991px) {    
    .profile-name {
        font-size: 1.5rem;
    }
    
    .profile-description {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {     
    .profile-name {
        font-size: 1.3rem;
    }
}

.expert-hover {
    cursor: default;
}

.expert-hover:hover {
    color: #c7c7c7ff;
}

.expert-image-overlay {
    position: fixed;
    padding: 10px;
    display: none;
    pointer-events: none;
    z-index: 9999;
}

.expert-photo {
    width: 150px;
    height: 200px;
    object-fit: cover;
}

@media (max-width: 991px){
    .background-img {
        height: unset;
    }

    .content-container-background-img{
        margin-top: 25vw;
        height: unset;
    }

    .content-container-background-img img{
        display: none;
    }

    .content-container-background-img p{
        bottom: -32vw;
        right: 1vw;
        font-size: calc(0.25rem + 0.85vw);
    }

    .home-title{
        height: auto;
        padding-block: 2em;
    }

    .home-title h1{
        position: relative;
        z-index: 1;
        letter-spacing: 5px;
    }

    #prestations {
        scroll-snap-align: unset;
    }

    #our-team{
        scroll-snap-align: center;
        min-height: auto;
    }

    .inner-team{
        display: none;
    }

    .nos-experts{
        position: relative;
        gap: unset;
        min-height: 10vw;
    }

    .nos-experts h4{
        font-size: 2.5vw;
    }

    .nos-experts .sebastien-becuwe h4{
        letter-spacing: unset;
        font-size: 3vw;
        max-width: unset;
    }

    .nos-experts .david-pruvot h4{
        letter-spacing: unset;
        font-size: 3vw;
        max-width: 25vw;
    }

    .nos-experts h3{
        font-size: 3vw;
        max-width: 30vw;
    }

    .nos-experts svg{
        width: 6vw;
        height: 6vw;
    }

    .nos-experts svg:hover{
        transition: unset;
        transform: unset;
    }

    .nos-experts svg:active{
        animation: unset;
    }

    .icon-nos-experts{
        display: none;
    }

    .nos-experts img{
        width: 50%;
    }

    .dark-btn{
        font-size: 12px;
        margin-top: 30px;
    }

    .dark-btn:hover{
        background: black;
        transform: scale(1);
    }

    .dark-btn:active{
        transform: scale(0.975);
        opacity: 0.85;
    }

    #post h2, #our-team h2, #contact h2{
        letter-spacing: 2px;
    }
}

#prestations h2 {
    font-family: 'Montserrat Bold', sans-serif;
    min-height: 5.75rem;
}

/* ANIMATION FLECHES BAS */
.arrows {
    width: 60px;
    height: 72px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    bottom: 40px;
}

.arrows path {
    stroke: #ffffff;
    fill: transparent;
    stroke-width: 3px;  
    animation: arrow 3s infinite;
    -webkit-animation: arrow 3s infinite; 
}

@keyframes arrow {
    0% {opacity:0}
    40% {opacity:1}
    80% {opacity:0}
    100% {opacity:0}
}

@-webkit-keyframes arrow  {
    0% {opacity:0}
    40% {opacity:1}
    80% {opacity:0}
    100% {opacity:0}
}

.arrows path.a1 {
    animation-delay:-1s;
    -webkit-animation-delay:-1s; 
}

.arrows path.a2 {
    animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s; 
}

.arrows path.a3 { 
    animation-delay:0s;
    -webkit-animation-delay:0s; 
}