/* couleurs */
:root {
    --primary-color: #1e3a8a;
    --secondary-color: #4567c9;
    --accent-color: #e11d48;
    --text-color: #0b1120;
    --white-color: #f9fafb;
    --gris-clair-color: #cbd5e1;
    --gris-fonce-color: #6a7480;
}

/* Déclaration de la police Poppins (Regular 400) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-regular.woff2') format('woff2'),
        url('../fonts/poppins-regular.woff') format('woff');
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.text-center {
    display: block;
    width: 100%;
    text-align: center;
}

.btn {
    text-decoration: none;
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--white-color);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    transition: background-color 0.3s ease;

    @media screen and (max-width: 768px) {
        font-size: 1rem;
        padding: 0.25rem 0.75rem;
    }
}

.desktop-only {
    display: inline-block;

    @media screen and (max-width: 768px) {
        display: none;
    }
}

.mobile-only {
    display: none;

    @media screen and (max-width: 768px) {
        display: inline-block;
    }
}

.bck-highlight {
    background-color: var(--secondary-color);
    padding: 2.5rem 0rem;
    margin: 2rem 0 0 0 !important;
    /* border-radius: 8px; */
    text-align: center;

    @media screen and (max-width: 768px) {
        padding: 2rem;
    }

    h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--white-color);
        margin: 0 0 1rem 0;
    }

}

.text-small {
    font-size: 0.9rem;
    font-weight: 100;
    display: block;
    margin-bottom: 0.5rem;
}

/* Styles globaux */
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', Arial, sans-serif;
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 16px;
    color: #222;
    margin: 0;
    padding: 0;
}

.logo {
    margin-top: 2rem;
    text-align: center;

    img {
        width: 460px;
        height: auto;
    }

    @media screen and (max-width: 768px) {
        img {
            width: 360px;
            height: auto;
        }
    }
}

.intro {
    text-align: center;
    margin: 2rem 1rem;
    padding: 1rem 1rem;

    h1 {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 0rem;

        @media screen and (max-width: 768px) {
            font-size: 2rem;
        }
    }

    h2 {
        font-size: 1.5rem;
        color: var(--secondary-color);
        margin-top: 0.5rem;
        margin-bottom: 1.5rem;

        @media screen and (max-width: 768px) {
            font-size: 1.2rem;
        }
    }

    p {
        margin: 1.5rem auto;
        max-width: 50%;
        font-size: 1.2rem;
        color: var(--text-color);
        text-align: justify;

        @media screen and (max-width: 768px) {
            max-width: 100%;
            font-size: 1rem;
        }
    }
}

.logo-os {
    margin: 2rem 0;

    .ico-os {
        width: 64px;
        height: 64px;
        display: inline-block;
        margin: 0 1rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        opacity: 0.65;
        transition: opacity 0.3s ease, transform 0.3s ease;

        @media screen and (max-width: 768px) {
            width: 48px;
            height: 48px;
            margin: 0 0.5rem;
        }

        &:hover {
            transform: scale(1.2);
            opacity: 0.95;
        }
    }

    .windows {
        background-image: url('../imgs/windows.svg');
    }

    .linux {
        background-image: url('../imgs/linux.svg');
    }

    .macos {
        background-image: url('../imgs/apple.svg');
    }
}

.call-to-action {
    text-align: center;
    margin: 2rem 1rem;

    a,
    p {
        background-image: url('../imgs/ico-phone.svg');
        background-repeat: no-repeat;
        background-size: 48px 48px;
        background-position: 16px center;
        padding: 1rem 2rem;
        padding-left: 80px;
        text-align: left;

        @media screen and (max-width: 768px) {
            background-size: 32px 32px;
            padding: 0.75rem 0.5rem;
            padding-left: 58px;
            text-align: center;
            font-size: 1rem;
        }
    }


    p,
    a {
        /* display: inline-block; */
        background-color: var(--accent-color);
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--white-color);
        text-decoration: none;

        @media screen and (max-width: 768px) {
            text-align: center;
            font-size: 1.2rem;
        }
    }
}

.services {
    text-align: center;
    margin: 2rem 0;
    padding: 2rem 0;
    background-color: var(--secondary-color);

    h2 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--white-color);
        margin-top: 0;
        margin-bottom: 2.5rem;
        text-transform: uppercase;
    }

    .image {
        width: 100%;
        text-align: center;
        margin: 1rem auto;

        img {
            width: 600px;
            height: auto;

            @media screen and (max-width: 768px) {
                max-width: 85%;
            }
        }
    }

    .services-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        max-width: 60%;
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            max-width: 80%;
            gap: 0;
            background-color: var(--white-color);
            border-radius: 8px;
        }

        .services-content {
            flex: 1;
            width: 100%;
            background-color: var(--white-color);
            border-radius: 8px;
            padding: 1.5rem;
            width: 300px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

            @media screen and (max-width: 768px) {
                border-radius: 0;
                box-shadow: none;
            }

            h3 {
                font-size: 1.5rem;
                color: var(--accent-color);
                margin-bottom: 1rem;
            }

            p {
                width: 100%;
                font-size: 1rem;
                color: var(--text-color);
                text-align: justify;
            }

            ul {
                text-align: left;
                padding-left: 1.2rem;
                margin-top: 0.5rem;
                list-style: none;

                @media screen and (max-width: 768px) {
                    margin: 0;
                    padding: 0;
                }

                li {
                    position: relative;
                    margin-bottom: 0.5rem;
                    font-size: 1rem;
                    color: var(--text-color);
                    padding-left: 26px;
                }

                li::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 4px;
                    width: 18px;
                    height: 18px;
                    background-image: url(../imgs/check.webp);
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
        }
    }
}

.tarifs {
    text-align: center;
    margin: 2rem 1rem;

    h2 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-top: 0;
        margin-bottom: 2.5rem;
        text-transform: uppercase;
    }

    h3 {
        font-size: 1.5rem;
        color: var(--primary-color);
        margin-bottom: 0rem;
    }

    p {
        font-size: 1rem;
        line-height: 1.2rem;
        font-style: italic;
        font-weight: 100;
        color: var(--secondary-color);
        text-align: justify;
        max-width: 60%;
        margin: 0 auto;
    }

    table {
        /* width: 80%; */
        margin: 2rem auto;
        border-collapse: collapse;
        border-radius: 8px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

        @media screen and (max-width: 768px) {
            box-shadow: none;
        }

        th,
        td {
            /* border: 1px solid var(--gris-clair-color); */
            padding: 0.75rem;
            text-align: left;

            @media screen and (max-width: 768px) {
                padding: 0rem;
            }
        }

        th {
            /* background-color: var(--gris-clair-color); */
            color: var(--text-color);
            padding: 0 2rem 2.25rem 2rem;

            @media screen and (max-width: 768px) {
                padding: 0 0.5rem 0.75rem 0.5rem;
            }

            h3 {
                @media screen and (max-width: 768px) {
                    font-size: 1.15rem;
                }
            }

            p {
                margin: 0;
                padding: 0;

                @media screen and (max-width: 768px) {
                    text-align: left;
                    font-size: 0.95rem;
                    max-width: 100%;
                }
            }
        }

        .price {
            text-align: left;
            font-size: 1.55rem;
            font-weight: 900;
            color: var(--secondary-color);

            @media screen and (max-width: 768px) {
                font-size: 1.45rem;
            }
        }

        td {
            text-align: left;
            background-color: var(--white-color);
            color: var(--text-color);


        }
    }
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--primary-color);
    color: var(--white-color);

    .author {
        margin-top: 0.5rem;
        font-size: 0.75rem;

        @media screen and (max-width: 768px) {
            font-size: 0.55rem;
        }

    }

    a {
        color: var(--gris-clair-color);
        text-decoration: none;
    }

    @media screen and (max-width: 768px) {
        font-size: 0.55rem;
    }


}

.legal-page {
    padding: 0 15px;
}