@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: ethnocentric;
    src: url("/ethnocentric rg.otf") format("opentype");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Poppins', sans-serif; */
    font-style: normal;
    --orange-sentionis: #fe5817;
    --bleu-sentionis: #0039AC;
    --bleu-sentionis-1: #00246b;
    --bleu-sentionis-2: #001a4d;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

span.logo {
    font-family: ethnocentric;
}

.lien {
    color: var(--orange-sentionis);
}

.orange {
    color: var(--orange-sentionis);
}

.bleu {
    color: var(--bleu-sentionis);
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100px;
    /* background-color: #f2f2f2; */
}

nav .logo img {
    width: 250px;
}

nav ul {
    display: flex;
    justify-content: space-around;
    width: 40%;
}

nav ul li {
    list-style: none;
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    letter-spacing: 2px;
    font-weight: 500;
}

nav ul li a:hover {
    color: var(--orange-sentionis);
    transition: 0.3s;
}

.barre {
    background-color: var(--bleu-sentionis);
    height: 1px;
    margin: 0 150px;
}

main .fond-bleu {
    background-color: rgba(0, 57, 172, 0.05);
    padding: 1px 0;
}

main .fond-orange {
    background-color: rgb(254, 88, 23, 0.05);
    padding: 1px 0;
}

main section {
    margin: 50px auto;
    max-width: 1000px;
}

main section h1,
main section h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

main section hr {
    width: 100px;
    height: 3px;
    background-color: var(--orange-sentionis);
    margin: 0 auto;
    margin-bottom: 20px;
    border: none;
}

main section p {
    text-align: center;
    margin-bottom: 50px;
}

main section a.btn {
    display: block;
    width: 200px;
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--orange-sentionis);
    border-radius: 5px;
    transition: 0.3s;
}

main section.introduction {
    display: flex;
}

main section.introduction .gauche {
    width: 50%;
}

main section.introduction .droite {
    width: 50%;
}

main section.introduction img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

main section.introduction h1 {
    color: var(--bleu-sentionis);
    text-align: left;
    font-size: 48px;
    line-height: 50px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: bold;
}

main section.introduction .sous-titre {
    color: #4B4B4B;
    /* font-weight: bold; */
    font-size: 1.1em;
    margin-bottom: 20px;
}

main section.introduction .boutons {
    display: flex;
}

main section.introduction .bouton {
    display: block;
    width: 190px;
    border: 1px solid var(--bleu-sentionis);
    border-radius: 10px;
    margin-right: 20px;
    text-decoration: none;
    text-align: center;
    background-color: var(--bleu-sentionis);
    color: white;
    padding: 5px 0;
    transition: 0.3s;
}

main section.introduction .bouton:hover {
    background-color: rgba(0, 57, 172, 0.7);

}

main section.introduction .bouton.inverse {
    background-color: rgba(0, 57, 172, 0.05);
    color: var(--bleu-sentionis);
}

main section.introduction .bouton.inverse:hover {
    background-color: rgba(0, 57, 172, 0.3);
}

main section.introduction .bouton span {
    font-size: 1.1em;
}

main section.presentation p.droite {
    padding-right: 30px;
    text-align: right;
    border-right: 3px solid var(--orange-sentionis);
    text-align: justify;
}

main section.presentation p.gauche {
    padding-left: 30px;
    text-align: left;
    border-left: 3px solid var(--orange-sentionis);
    text-align: justify;
}

main section a.btn:hover {
    background-color: #ff6347;
    transition: 0.3s;
}

main section.apropos {
    /* background-color: #fff7f5; */
    /* margin: 0 50px; */
    padding: 0 50px;
}

main section.apropos img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    max-width: 750px;
    margin: 20px auto;
    display: block;
    object-position: center;
}

main section.baniere {
    width: 100%;
    height: 150px;
    margin: 40px 0;
}

main section.baniere img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main section.contact .flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0;
}

main section.contact .flex>div {
    width: 45%;
}

main section.contact form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    width: 45%;
}

main section.contact form .input-group {
    margin: 10px 0;
    max-width: 750px;
    width: 100%;
}

main section.contact form .input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 1.2rem;
    font-weight: 500;
}

main section.contact form .input-group input,
main section.contact form .input-group textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #c2c2c2;
    outline: none;
    font-size: 1.2rem;
    font-weight: 500;
}

main section.contact form .input-group input:focus,
main section.contact form .input-group textarea:focus {
    border: 1px solid var(--orange-sentionis);
    transition: 0.3s;
}

main section.contact form .cta {
    display: block;
    width: 200px;
    margin: 20px 0;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--orange-sentionis);
    border-radius: 5px;
    transition: 0.3s;
    font-size: 1em;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    font-family: inherit;
}

main section.contact form .cta:hover {
    background-color: rgba(254, 88, 23, 0.7);
}

main section.contact form .cta:focus {
    outline: none;
}

main section.contact form textarea {
    resize: vertical;
}

main section.decoGauche,
main section.decoDroite {
    position: relative;
    overflow: hidden;
}

/* main section.decoGauche::before,
main section.decoDroite::before{
    content: '';
    position: absolute;
    top: 50%;
    width: 150px;
    height: 200%;
    background-color: var(--orange-sentionis);
    z-index: -1;
} */
main section.decoGauche::before {
    right: calc(50% + 450px);
    transform: rotateZ(15deg) translateY(-50%);
}

main section.decoDroite::before {
    left: calc(50% + 450px);
    transform: rotateZ(15deg) translateY(-50%);
}

/* <div class="flex">
                <div class="card">
                    <img src="website-g61c1c6079_1280.jpg" alt="">
                    <h3>Création de site web</h3>
                    <p>Nous créons des sites web sur mesure pour répondre à vos besoins.</p>
                    <a href="">En savoir plus</a>
                </div>
            </div> */
main section.services .flex {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 20px 0;
}

main section.services .flex .card {
    width: 300px;
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    transition: 0.3s;
}

main section.services .flex .card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
}

main section.services .flex .card h3 {
    margin: 10px 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}

main section.services .flex .card p {
    margin: 10px 0;
    font-size: 1.2rem;
    font-weight: 400;
}

main section.services .flex .card a {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--orange-sentionis);
    border-radius: 5px;
    transition: 0.3s;
}

main section.services .flex .card a:hover {
    background-color: #ff6347;
    transition: 0.3s;
}

main section.services .flex .card a:focus {
    outline: none;
}

/* <section class="articles">
<h2>Articles</h2>
<hr>
<div class="flex">
    <div class="card">
        <img src="cest-quoi-un-processeur.jpg" alt="">
        <h3>Sentionis : Sensibilisation Cyber pour les TPE et PME</h3>
        <p>Un petit résumé de l'article. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque at sit quis nemo officia, necessitatibus, delectus quasi illum eum voluptatibus iure mollitia voluptatum cum reiciendis! Omnis eius non possimus nam!</p>
        <p>16/02/2024 - 3min de lecture</p>
        <a href="">Lire la suite</a>
    </div>
    <div class="card">
        <img src="istockphoto-1371213291-612x612.jpg" alt="">
        <h3>L'importance de la sensibilisation à la cybersécurité</h3>
        <p>Un petit résumé de l'article. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi ducimus nihil similique temporibus saepe, nemo, cupiditate quasi soluta beatae illum ab accusantium labore eos totam officiis dignissimos architecto. Voluptate, praesentium.</p>
        <p>16/02/2024 - 1min de lecture</p>
        <a href="">Lire la suite</a>
    </div>
</div>
</section> */
main section.articles .flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0;
}

main section.articles .flex .card {
    width: 500px;
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

main section.articles .flex .card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
}

main section.articles .flex .card h3 {
    margin: 10px 0;
    font-size: 1.5rem;
    font-weight: 500;
}

main section.articles .flex .card p {
    margin: 10px 0;
    font-size: 1.2rem;
    font-weight: 400;
}

main section.articles .flex .card a {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--orange-sentionis);
    border-radius: 5px;
    transition: 0.3s;
}

main section.articles .flex .card a:hover {
    background-color: #ff6347;
    transition: 0.3s;
}

main section.articles .flex .card a:focus {
    outline: none;
}

main section.temoignage .temoignage {
    text-align: center;
    margin: 20px 0;
}

main section.temoignage .temoignage p {
    font-size: 1.6rem;
    font-weight: 400;
    margin: 20px 50px;
}

main section.temoignage .temoignage .auteur {
    font-size: 1.2rem;
    font-weight: 500;
}

main section.confiance .logo-slider {
    width: 80%;
    margin: 0 auto;
}

main section.confiance .logo-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    /* Vous pouvez ajuster cette valeur selon la taille souhaitée des logos */
}

main section.confiance .logo-slider img {
    height: 75px;
    width: auto;
    margin: 0 15px;
    vertical-align: middle;
}

main section.soutien img {
    width: 65%;
    padding: 30px;
    margin: auto;
    display: block;
}

footer {
    background-color: var(--bleu-sentionis-1);
}

footer .infos {
    display: flex;
    padding: 50px 10%;
    justify-content: space-between;
}

/* footer .colonne{
    width: 25%;
} */

footer .colonne .logo {
    width: 200px;
    max-width: 100%;
    margin-bottom: 20px;
}

footer .colonne .titre {
    color: white;
    font-weight: bold;
    margin: 0 0 10px 0;
}

footer .colonne .item {
    display: block;
    color: #ffffffb3;
}

footer .colonne .item.lien:hover {
    color: white;
    transition: 0.3s;
    text-decoration: underline;
    cursor: pointer;
}

footer .copyright {
    text-align: center;
    color: white;
    padding: 20px 0;
    margin: 0 70px;
    border-top: 1px solid #ffffffb3;
}

@media (max-width: 1100px) {
    main section {
        margin: 30px;
    }
}

@media (max-width: 800px) {
    main section.apropos {
        padding: 0 30px;
    }

    main section.temoignage .temoignage p {
        font-size: 1.2rem;
        margin: 20px;
    }

    main section.introduction .droite {
        width: 30%;
    }

    main section.introduction .gauche {
        width: 70%;
    }

    main section.contact .flex {
        flex-direction: column;
    }

    main section.contact form {
        width: 70%;
    }
}

@media (max-width: 600px) {
    nav ul li:nth-child(1) {
        display: none;
    }

    main section.introduction {
        display: block;
    }

    main section.introduction .gauche {
        width: 100%;
    }

    main section.introduction .droite {
        width: 100%;
    }

    main section.introduction .droite img {
        top: 0;
        transform: translateY(0);
    }

    main section.contact form {
        width: 100%;
    }
}

@media (max-width: 500px) {
    main section {
        margin: 30px;
    }

    nav ul {
        display: none;
    }

    main section.apropos {
        padding: 0;
    }
}

/* apparition chillax */
.apparition {

    animation: fadein 3s;
    -moz-animation: fadein 3s;
    /* Firefox */
    -webkit-animation: fadein 3s;
    /* Safari et Chrome */
    -o-animation: fadein 3s;
    /* Opera */
    position: relative;
}

@keyframes fadein {
    from {
        opacity: 0;
        left: 50px;
    }

    to {
        opacity: 1;
        left: 0px;
    }
}

@-moz-keyframes fadein {

    /* sur Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {

    /* sur Safari et Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {

    /* sur Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}