:root {
    --orange:#FF4500;
    --bleu: #50E6E6;
}




/* Service */
@media screen {

    
    #service .contenu .icone {
        background: var(--bleu);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-bottom: 1rem;
        width: 125px;
        height: 125px;
    }

    #service .contenu .icone svg {
        width: 88px;
        color: #000;
    }

    #service .contenu h4 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        color: #000;
        text-wrap: balance;
    }

    #service .contenu p {
        font-size: 1.3rem;
        line-height: 1.6;
    }
}











/* Services */
@media screen {

    #services {
        /* padding: 5rem 0; */
        background: #fff;
    }

    #services h5 {
        position: relative;
    }

    #services h5::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -.5rem;
        background: var(--bleu);
        width: 150px;
        height: 5px;
        border-radius: 16px;
        transition: width .3s ease;
    }

    #services .service {
        background: #000;
        margin-bottom: 2rem;
        border-radius: 32px;
        border-bottom-left-radius: 32px;
        border-bottom-right-radius: 32px;
        cursor: pointer;
        transition: all .3s ease;
        /* box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.175); */
        /* box-shadow: 3px 2px 2px 2px rgb(131 125 125 / 33%); */
        cursor: not-allowed;
    }

    #services .service:hover {
        border-top: 5px solid #000;
        border-bottom: 5px solid #000;
        background: #fff;
        transform: translateY(-12px);
        box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.175);
    }

    #services .service:hover .icone { background: #FF4500; }
    #services .service:hover .icone svg { color: #fff; }

    #services .service:hover h6 {
        color: #000;
    }

    #services .service .icone {
        background: #fff;
        width: 85px;
        height: 85px;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }

    #services .service .icone svg {
        width: 45px;
        color: #000;
    }

    #services .service h6 {
        font-size: 1.30rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 1rem;
    }

    /*  */

    #services .lignes {
        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    #services .lignes .ligne {
        margin-bottom: .5rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    #services .lignes .ligne svg {
        width: 22px;
        color: #fff;
    }

    #services .service:hover .ligne svg {
        color: #000;
    }

    #services .lignes .ligne span {
        font-size: 1.15rem;
        font-weight: 400;
        margin-bottom: 0;
        text-wrap: balance;
        color: #fff;
    }

    #services .service:hover .ligne span {
        color: #000;
    }

    /*  */
    
    #services .service a {
        display: block;
        margin-top: .5rem;
        width: 100%;
        text-align: center;
        text-decoration: none;
        background: #fff;
        color: #000;
        font-size: 1.25rem;
        border-radius: 8px;
        padding: 4px;
        border: 2px solid transparent;
        transition: all .3s ease;
    }    

    #services .service:hover a {
        background: #000;
        color: #fff;
    }

    #services .service a:hover {
        border: 2px solid transparent;
        background: var(--bleu);
        color: #000;
    }
}