body{
    /*padding-top: 60px;*/
    padding-top: 3rem;
    margin: 0;
    font-family: Arial, helvetica, sans-serif;
}
body.no-scroll{
    overflow: hidden;
}
/* HEADER */
/* Navigation */
.header-container{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    border-bottom-left-radius: 999px;
    border-top-left-radius: 999px;
    overflow: hidden;
}
.navbar {
    /*max-width: 1200px;*/
    max-width: 75rem;
    /*height: 60px;*/
    height: 4rem;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.menu-btn{
    display: none;
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
}
.navbar img {
    /*height: 60px;*/
    height: 4rem;
    width: auto;
}
.nav-links ul {
    list-style: none;
    display: flex;
    align-items: stretch;
    /*height: 100px;*/
    height: 6rem;
}
.band{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 85px;*/
    width: 5.3rem;
    height: 100%;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    /*letter-spacing: 1px;*/
    text-transform: uppercase;
    transform: skew(-30deg);
    filter: saturate(80%);
    transition: filter 0.3s ease;
}
.band:hover{
    filter: saturate(125%);
}
.band span {
    transform: rotate(-90deg) skew(-20deg);
    display: block;
}
.band-red{
    background-color: #e10600;
}
.band-black{
    background-color: #000;
}
.band-yellow{
    background-color: #e6d800;
    color: #000;
}
.band-blue{
    background-color: #0055a4;
}
/*.btn-nav {*/
/*    padding: 8px 16px;*/
/*    border: 1px solid black;*/
/*    border-radius: 4px;*/
/*}*/

.winny {
    display: none;
}

@media screen and (max-width: 768px){
    .menu-btn{
        display: block;
    }
    .header-container{
        overflow: visible;
    }
    .nav-links{
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: none;
    }
    .band{
        transform: skew(-30deg);
    }
    .band span{
        transform: rotate(0) skew(30deg);
    }
    .nav-links.active{
        display: block;
    }
    .nav-links ul{
        display: flex;
        flex-direction: column;
        margin: 0;
        /*padding: 0 15px;*/
        padding: 0 1rem;
        gap: 0;
        list-style: none;
        background: transparent;
    }
    .nav-links li{
        width: 100%;
    }
    .nav-links a{
        display: flex;
        align-items: center;
        width: 100%;
        /*min-height: 60px;*/
        min-height: 4rem;
        /*padding: 0 20px;*/
        padding: 0 1.4rem;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
        transition: filter 0.3s ease;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }
    .nav-links a:hover, .nav-links a:active, .nav-links a:focus{
        filter: saturate(125%);
    }
    .nav-links a:active{
        transform: scale(0.98);
    }
}
/* HERO */
.hero{
    background-image: url("/images/hero.jpg");
    background-size: cover;
    background-position: center;
}
.hero-content{
    min-height: 100vh;
    /*max-width: 1200px;*/
    max-width: 75rem;
    margin: 0 auto;
    /*padding: 0 60px 60px;*/
    padding: 0 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-content h1{
    font-size: 3rem;
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.hero-content p{
    font-size: 1.2rem;
    max-width: 600px;
    /*margin-bottom: 30px;*/
    margin-bottom: 2rem;
}
.btn-primary{
    display: inline-block; /* Pas compris son utilité, Ca à l'air de marché aussi sans*/
    text-decoration: none;
    background-color: #000;
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    width: fit-content; /* Je ne comprend pas pourquoi ici c'est nécessaire et pas pour le btn-nav*/
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover{
    background-color: #333;
    transform: translateY(-2px);
}
.btn-primary:active{
    transform: translateY(0);
}
.btn-primary:focus{
    outline: 2px solid #000;
    outline-offset: 3px;
}
button.btn-primary{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border: none;
}

/* ABOUT */
.about{
    min-height: 100vh;
    /*padding: 100px 60px;*/
    /*max-width: 1200px;*/
    padding: 4rem;
    max-width: 75rem;
    margin: 0 auto;
}
.about h2{
    font-size: 2.5rem;
    /*margin-bottom: 60px;*/
    margin-bottom: 4rem;
}
.about-block{
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.about-block h3{
    font-size: 1.8rem;
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.about-block p{
    /*max-width: 1200px;*/
    max-width: 75rem;
    line-height: 1.5;
    text-align: justify;
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.about-team{
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.about-team h3{
    font-size: 1.8rem;
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.team-members{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.member{
    /*max-width: 200px;*/
    max-width: 12rem;
}
.member img{
    /*width: 200px;*/
    /*height: 200px;*/
    width: 12rem;
    height: 12rem;
    object-fit: cover;
    border-radius: 50%;
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.member h4{
    font-size: 1.2rem;
    /*margin-bottom: 10px;*/
    margin-bottom: 1rem;
}
.member p{
    max-width: 175px;
    font-size: 1rem;
    text-align: justify;
}

/* SERVICES */
.services{
    min-height: 100vh;
    /*padding: 100px 60px;*/
    padding: 6rem 4rem;
    background-color: #f8f8f8;
}
.services h2{
    /*max-width: 1200px;*/
    max-width: 75rem;
    /*margin: 0 auto 60px;*/
    margin: 0 auto 4rem;
    font-size: 2.5rem;
}
.services-cards{
    /*max-width: 1200px;*/
    max-width: 75rem;
    /*margin: 0 auto 20px;*/
    margin: 0 auto 1rem;
    display: flex;
    flex-wrap: wrap;
    /*gap: 30px;*/
    gap: 2rem;
    justify-content: space-around;
}
.service-card{
    background-color: #fff;
    /*padding: 20px 40px;*/
    /*max-width: 250px;*/
    /*min-height: 400px;*/
    padding: 1rem 2rem;
    max-width: 15rem;
    min-height: 25rem;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    display: flex;
    flex-direction: column;
}
.service-card:hover{
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}
.service-card h3{
    /*margin: 20px auto;*/
    margin: 1rem auto;
}
.service-card p{
    /*margin: 20px auto;*/
    margin: 1rem auto;
    text-align: justify;
    line-height: 1.5;
}
.service-card a{
    margin: auto;
}
.btn-devis{
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    /*padding: 10px 20px;*/
    padding: 1rem 2rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
}
.btn-devis:hover{
    background-color: #333;
    transform: translateY(-2px);
    color: #fff;
}
.service-contact{
    display: flex;
    /*gap: 20px;*/
    gap: 2rem;
    flex-wrap: wrap;
    /*max-width: 1200px;*/
    /*margin:0 auto 80px;*/
    max-width: 75rem;
    margin:0 auto 5rem;
}
.service-example{
    /*max-width: 1200px;*/
    /*margin: 0 auto 20px;*/
    max-width: 75rem;
    margin:0 auto 2rem;
}
.service-example h3{
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.service-example p{
    line-height: 1.5;
}

/* FOOTER */
.footer{
    background-color: #000;
    color: #fff;
    /*padding: 40px 20px 1px;*/
    padding: 1rem;
}
.footer-top{
    display: flex;
    /*gap: 40px;*/
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: center;

    /*max-width: 1200px;*/
    max-width: 75rem;
    margin: 0 auto;
}
.footer-top strong{
    font-size: 1.5rem;
}
.footer-container{
    display: flex;
    /*gap: 40px;*/
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    /*max-width: 1200px;*/
    max-width: 75rem;
    margin: 0 auto;
    /*padding: 0 20px;*/
    padding: 0 1rem;
}
.footer-contacts{
    display: flex;
    flex-wrap: wrap;
    /*gap: 40px;*/
    gap: 2.5rem;
}
.footer-contact{
    display: flex;
    flex-direction: column;
    /*max-width: 300px;*/
    /*padding: 20px 40px;*/
    max-width: 19rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    border: 1px solid #fff;
}
.footer-contact h4{
    /*margin: 0 auto 20px;*/
    margin: 0 auto 1rem;
}
.footer-contact a{
    text-decoration: none;
    color: #fff;
    /*margin-bottom: 10px;*/
    margin-bottom: 1rem;
}
.footer-contact p{
    margin: 0.2rem 0;
}
.highlight:hover{
    text-decoration: underline;
}
.footer-links li{
    list-style: none;
}
.footer-links a{
    text-decoration: none;
    color: #fff;
}
.footer-bottom{
    text-align: center;
}

/* POPUP CONTACT */
.modal{
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
.modal-content{
    background-color: #fff;
    /*padding: 40px;*/
    padding: 2rem;
    border-radius: 8px;
    /*max-width: 600px;*/
    max-width: 37.5rem;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.modal-close{
    position: absolute;
    /*top: 15px;*/
    /*right: 15px;*/
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
}
.modal.is-open{
    display: flex;
    opacity: 1;
    pointer-events: auto;
}
.confirmation-message{
    font-size: 1.2rem;
    color: #111;
    background-color: #e0ffe0;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-top: 1rem;
    text-align: center;
}

/* PAGE CONTACT */
.contact-page{
    min-height: 100vh;
    /*padding: 80px 60px;*/
    /*max-width: 1200px;*/
    padding: 5rem 4rem;
    max-width: 75rem;
    margin: 0 auto;
}
.contact-page h1{
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.contact-intro{
    /*margin-bottom: 20px;*/
    margin-bottom: 2rem;
    line-height: 1.6;
}
.contact-form{
    display: flex;
    flex-direction: column;
    /*gap: 25px;*/
    gap: 2rem;
    /*max-width: 500px;*/
    max-width: 31rem;
    margin: 0 auto;
}
.form-row{
    display: flex;
    gap: 20px;
    flex: 1;
    flex-wrap: wrap;
}
.form-group{
    display: flex;
    flex-direction: column;
    /*gap: 8px;*/
    gap: 0.5rem;
    flex: 1;
}
.form-checkbox{
    text-align: justify;
    margin-bottom: 0;
}
.form-checkbox p{
    font-style: italic;
    font-size: 0.9rem;
}
.form-checkbox a{
    color: #000;
}
.contact-form input, .contact-form textarea, .contact-form button, .contact-form select{
    /*padding: 12px;*/
    padding: 1rem;
    font-family: inherit;
    font-size: 1rem;
    border: 2px solid #ccc;
}
input:focus, textarea:focus, select:focus{
    outline: none;
    border: 2px solid #000;
}
input:invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown),
select:invalid:not(:focus){
    border-color: #c0392b;
}
input[required]:valid:not(:focus),
textarea[required]:valid:not(:focus),
select[required]:valid:not(:focus){
    border-color: #2ecc71;
}
.form-group select:invalid{
    border-color: #ccc;
}
.form-group select:invalid:focus{
    border-color: #c0392b;
}

/* SERVICES VISION*/
.services-vision{
    padding: 4rem 2rem;
    /*max-width: 1200px;*/
    max-width: 75rem;
    margin: 0 auto;
    /*min-height: 100vh;*/
}

.services-vision-intro{
    /*max-width: 700px;*/
    margin-bottom: 3rem;
    text-align: justify;
}
.services-vision-intro h2{
    margin-bottom: 0.5rem;
}
.services-vision-content{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    padding: 0 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.services-vision-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1.5;
}
.services-vision-text, .services-vision-text-item{
    margin-bottom: 2rem;
    text-align: justify;
}
.services-vision-text h3{
    margin-bottom: 0.5rem;
}
.services-vision-visual{
    display: flex;
    align-items: center;
    justify-content: center;
}
.services-vision-visual-img{
    max-width: 100%;
}
.services-vision-visual-img img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.services-vision-outro{
    margin-top: 3rem;
    font-style: italic;
    text-align: justify;
}
@media screen and (max-width: 768px){
    .services-vision-content{
        grid-template-columns: 1fr;
    }
    .services-vision-visual{
        display: none;
        margin-top: 1em;
    }
}

/* SERVICES CUSTOM */
.services-custom{
    background-color: #f8f8f8;
    padding: 4rem 2rem 1rem;
    /*max-width: 1200px;*/
    max-width: 75rem;
    margin: 0 auto;
    /*min-height: 100vh;*/
}
.services-custom-intro{
    /*max-width: 700px;*/
    margin-bottom: 3rem;
    text-align: justify;
}
.services-custom-intro h2{
    margin-bottom: 0.5rem;
    font-size: 2rem;
    color: grey;
}
.services-custom-intro h3{
    border-top: 1px solid #ddd;
    padding-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}
.services-custom-content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    /*padding: 0 2rem;*/
}
.services-custom-content-block{
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    background-color: #fff;
    padding: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 10px;
    line-height: 1.5;
}
.services-custom-content-block h4{
    font-size: 1.5rem;
    margin: 0 auto 0.5rem;
}
.services-custom-content-block p{
    margin-bottom: 2rem;
    text-align: justify;
}
.services-custom-content-block ul{
    padding-left: 0;
}
.services-custom-content-block-list{
    margin: 0 auto 2rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.services-custom-content-block-list li{
    padding: 0.4rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 0.9rem;
    white-space: pre-wrap;
}
.services-custom-content-block-img{
    max-width: 100%;
}
.services-custom-content-block-img img{
    width: 50%;
    height: auto;
    display: block;
    object-fit: cover;
    margin: 0 auto;
}
.services-custom-outro{
    margin-top: 3rem;
    font-style: italic;
    text-align: justify;
}
@media screen and (max-width: 768px){
    .services-custom-content{
        grid-template-columns: 1fr;
    }
}

/* SERVICES MATOS */
.services-matos{
    background-color: #f8f8f8;
    padding: 1rem 2rem 4rem;
    /*max-width: 1200px;*/
    max-width: 75rem;
    margin: 0 auto;
    /*min-height: 100vh;*/
}
.services-matos-intro{
    /*max-width: 700px;*/
    margin-bottom: 2rem;
}
.services-matos-intro h3{
    border-top: 1px solid #ddd;
    padding-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}
.services-matos-intro p{
    line-height: 1.5;
    text-align: justify;
    margin: 0;
}
.services-matos-intro-content{
    line-height: 1.5;
    font-style: italic;
}
.services-matos-content{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    padding: 0 1rem;
    margin-bottom: 3rem;
}
.services-matos-content-block-admin, .services-matos-content-block-creation, .services-matos-content-block-performance{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /*justify-content: space-between;*/
    /*background-color: #fff;*/
    background-size: cover;
    background-position: center;
    padding: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 20px;
    line-height: 1.5;
}
.services-matos-content-block-admin{
    background-image: url("/images/servicesAdministratif30.png");
}
.services-matos-content-block-creation{
    background-image: url("/images/servicesCreation30.png");
}
.services-matos-content-block-performance{
    position: relative;
    z-index: 0;
}
.services-matos-content-block-performance:before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/servicesPerformance30.png");
    background-size: cover;
    background-position: center;
    opacity: 0.8;
    z-index: -1;
}
@media screen and (max-width: 768px){
    .services-matos-content{
        grid-template-columns: 1fr;
    }
}
.services-matos-content-block-admin h3, .services-matos-content-block-creation h3, .services-matos-content-block-performance h3{
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}
.services-matos-content-block-admin h4, .services-matos-content-block-creation h4, .services-matos-content-block-performance h4{
    font-size: 1.1rem;
    margin: 0 auto 0.5rem;
    border: 1px solid #ddd;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    width: fit-content;
    color: #111;
    text-shadow:
        0 0 2px rgba(255,255,255,0.4),
        0 2px 4px rgba(0,0,0,0.5);
}
.services-matos-content-block-admin h5, .services-matos-content-block-creation h5, .services-matos-content-block-performance h5{
    font-size: 1rem;
    margin-bottom: 0;
    color: #111;
    text-shadow:
        0 0 2px rgba(255,255,255,0.4),
        0 2px 4px rgba(0,0,0,0.5);
}
.services-matos-content-block-admin ul, .services-matos-content-block-creation ul, .services-matos-content-block-performance ul{
    margin-bottom: 1rem;
    /*text-align: justify;*/
    list-style: none;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    color: #111;
}
.services-matos-btn{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.services-matos-outro{
    border: 1px solid #ddd;
    padding: 1rem 2rem;
    border-radius: 10px;
}
.services-matos-outro p{
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 0.5rem;
}
.services-matos-outro-list{
    margin: 2rem auto 2rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0;
}
.services-matos-outro-list li{
    padding: 0.4rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 0.9rem;
    white-space: pre-line;
}

/* MENTIONS LÉGALES */
.mentions-legales-page{
    min-height: 100vh;
    /*padding: 80px 60px;*/
    /*max-width: 1200px;*/
    padding: 5rem 4rem;
    max-width: 75rem;
    margin: 0 auto;
}
.mentions-legales-content{
    margin-bottom: 3rem;
    line-height: 1.5;
    text-align: justify;
}
.mentions-legales-content h2{
    border-top: 1px solid #ddd;
    padding-top: 2rem;
}

/* POLITIQUE DE CONFIDENTIALITÉ */
.politique-page{
    min-height: 100vh;
    /*padding: 80px 60px;*/
    /*max-width: 1200px;*/
    padding: 5rem 4rem;
    max-width: 75rem;
    margin: 0 auto;
}
.politique-content{
    margin-bottom: 2rem;
    line-height: 1.5;
    text-align: justify;
}
.politique-content h2{
    border-top: 1px solid #ddd;
    padding-top: 2rem;
}

/* PAGE DEVIS */
.devis-page{
    min-height: 100vh;
    /*max-width: 1200px;*/
    max-width: 75rem;
    margin: 0 auto;
    /*padding: 0 60px 60px;*/
    padding: 0 4rem 4rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.devis-page h1{
    font-size: 3rem;
    /*margin-bottom: 20px;*/
    margin-bottom: 1rem;
}
.devis-page p{
    font-size: 1.2rem;
    /*max-width: 1200px;*/
    max-width: 75rem;
    /*margin-bottom: 30px;*/
    margin-bottom: 2rem;
}