.expertises{
    min-height: 100vh;
    width: 100vw;
    background: url('../assets/Background/Pattern-gradient-down.png');
    display: flow-root; /* Evite le margin-collapse */
}

.content_expertises{
    margin: 120px 80px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 56px;
    flex: 1 0 0;
    flex-wrap: wrap;
}

.content_expertises .texte_expertises{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.content_expertises .titre_expertises{
    color: #FFF;
    /* Large title */
    font-family: "Manrope", sans-serif;
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 66px; /* 117.857% */
    letter-spacing: -2px;
}

.content_expertises .sous_titre_expertises{
    color: #FFF;
    /* Medium title */
    font-family: "Manrope", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 46px; /* 127.778% */
}

.content_expertises .cards_expertises{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.content_expertises .cards_expertises .card_expertises{
    display: flex;
    padding: 30px 90px;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    border-radius: 15px;
    height: 250px;
    text-decoration: none;
    /* Texte des cards */
    color: #FFF;
    text-align: center;

    /* Medium emphasis content */
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;

    /* Pour les textes au hover */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* Contenu visible par défaut */
.card_expertises .content_default {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Contenu affiché au hover */
.card_expertises .content_hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgb(0, 0, 0);
    display: flex;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    opacity: 0;
    z-index: 2;
    padding: 20px;
    background: white;
    transition: opacity 0.6s ease-in-out;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 30px;
}

/* Hover effect : on cache le contenu par défaut et on affiche celui du hover */
.card_expertises:hover .content_default {
    opacity: 0;
}

.card_expertises:hover .content_hover {
    opacity: 1;
}

.card_expertises .content_hover .titre{
    background: linear-gradient(90deg, #159EA9 0%, #082459 100%);
    font-weight: 700;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.card_expertises .content_hover .content{
    text-align: start;;
    color: #4C4956;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}


.content_cards{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.content_cards .content_little_cards{
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.content_expertises .cards_expertises .gr_rec_h{
    width: 36vw;
}

.content_expertises .cards_expertises .gr_rec_v{
    width: auto;
    height: 515px;
}

.content_expertises .cards_expertises .m_rec_h{
    width: 34vw;
}

.content_expertises .cards_expertises .pt_cr{
    width: 17.5vw;
}

#dev {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(8, 36, 89, 0.8) 100%),
                url('../assets/Images/dev_bg.jpg') 50% 40% / cover no-repeat;
}

#wifi {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(8, 36, 89, 0.8) 100%),
                url('../assets/Images/wifi_bg.png') 50% / cover no-repeat;
}

#video-surveillance {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(8, 36, 89, 0.8) 100%),
                url('../assets/Images/video_bg.png') 50% / cover no-repeat;
}

#parc {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(8, 36, 89, 0.8) 100%),
                url('../assets/Images/parc.png') 15% / cover no-repeat;
}

#stockage {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(8, 36, 89, 0.8) 100%),
                url('../assets/Images/stockage_bg.png') 50% 20% / cover no-repeat;
}

#assistance {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(8, 36, 89, 0.8) 100%),
                url('../assets/Images/assistance_bg.jpg') 50% / cover no-repeat;
}

/* Responsive design */
@media screen and (min-width: 1921px) {
    .expertises{
        background: linear-gradient(90deg, #159EA9 0%, #082459 100%);
    }
}

@media screen and (max-width: 1250px) {
    .expertises {
        height: auto;
        padding: 40px 0;
    }

    .content_expertises {
        margin: 40px 24px;
        gap: 32px;
    }

    .content_expertises .texte_expertises {
        text-align: center;
        align-items: center;
    }

    .content_expertises .titre_expertises {
        font-size: 42px;
        line-height: 52px;
        text-align: center;
    }

    .content_expertises .sous_titre_expertises {
        font-size: 28px;
        line-height: 36px;
        text-align: center;
    }

    .content_expertises .cards_expertises {
        flex-direction: column;
        width: 100%;
        gap: 24px;
    }

    .content_cards {
        width: 100%;
    }

    .content_cards .content_little_cards {
        flex-direction: column;
        width: 100%;
    }

    /* Réinitialisation des largeurs pour mobile */
    .content_expertises .cards_expertises .gr_rec_h,
    .content_expertises .cards_expertises .gr_rec_v,
    .content_expertises .cards_expertises .m_rec_h,
    .content_expertises .cards_expertises .pt_cr {
        width: 100%;
        height: 200px;
        padding: 20px;
    }

    .card_expertises .content_hover {
        padding: 16px;
    }
}

@media screen and (max-width: 768px) {
    .content_expertises {
        margin: 24px 16px;
    }

    .content_expertises .titre_expertises {
        font-size: 36px;
        line-height: 44px;
    }

    .content_expertises .sous_titre_expertises {
        font-size: 24px;
        line-height: 32px;
    }

    .card_expertises {
        font-size: 24px;
    }

    .card_expertises .content_hover .titre {
        font-size: 20px;
    }

    .card_expertises .content_hover .content {
        font-size: 16px;
        line-height: 22px;
    }
}

@media screen and (max-width: 480px) {
    .content_expertises {
        margin: 16px 12px;
    }

    .content_expertises .titre_expertises {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .content_expertises .sous_titre_expertises {
        font-size: 20px;
        line-height: 28px;
    }

    .content_expertises .cards_expertises .gr_rec_h,
    .content_expertises .cards_expertises .gr_rec_v,
    .content_expertises .cards_expertises .m_rec_h,
    .content_expertises .cards_expertises .pt_cr {
        height: 180px;
    }

    .card_expertises {
        font-size: 20px;
    }

    .card_expertises .content_hover .titre {
        font-size: 18px;
    }

    .card_expertises .content_hover .content {
        font-size: 14px;
        line-height: 20px;
    }
}