@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

:root {
    --bg-color: #ffffff; /* #f4f4ff */
    --font-color: #000000;

    --bt-bg: #001f61;

    --main-color: #3c60b0; /* #3c60b0  */
    --main-color-90: #36569e;
    --main-darker: #001f61;
    --sec-color: #ff4338;
}

[data-theme="dark"] {
    --bg-color: #161618;
    --font-color: #ffffff;
}

html {
    scroll-behavior: smooth !important;
}

body {
    background-color: var(--bg-color);
    font-family: 'Montserrat' !important;
    scroll-behavior: smooth !important;
    overflow-y: auto;
}

button {
    color: var(--bg-color);
    cursor: pointer;
    background-color: var(--main-color);
    border: none;
    padding: 5px 10px;
    font-size: 1.2em;
    font-family: 'Montserrat';
    border-radius: 4px;
    transition: all .2s ease-in-out;
}
button:hover {
    border-radius: 7px;
    filter:brightness(0.95);
}

#above {
    width: 100%;
    height: 20px;
}




section#accueil {
    padding-top:5rem;
    padding-bottom:5rem;
    background-color: var(--bg-color) !important;
}
#solutions {
    background-color: var(--main-darker) !important;
}
#ressources {
    background-color: var(--main-darker) !important;
    /* box-shadow: 0 1px 3px 0px #001f61; */
}

nav {
    top: 0;
    overflow: hidden;
    position: sticky;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    background-color: var(--bg-color);
    z-index: 1001;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
}
nav .logo {
    height: 2em;
    margin-left: 0;
    cursor:pointer;
}
nav .logo.long {
    display: block;
}
nav .logo.short {
    display: none;
}
nav #buttons {
    /*margin-left: 5em;*/
    display: flex;
    flex-direction: row;
}
nav #buttons button {
    margin: 0 5px;
    background: transparent;
    border: none;
    padding: 0 7px;
    font-size: 1.2em;
    position: relative;
    color: var(--main-darker);
    font-weight: 550;
}
nav #buttons button.active {
    color:var(--sec-color);
}
nav #buttons button.active::after {
    width:0 !important;
    /*left:0;
    width: 100%;
    background-color: var(--sec-color);*/
}
nav #buttons button::after {
    content:"";
    display: block;
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: var(--main-darker);
    left:50%;
    transition: width .2s ease-in-out, left .2s ease-in-out;
}
nav #buttons button:hover::after {
    left:0;
    width: 100%;
}
nav #contactbutton {
    --bot-rad: 8px;
    border-bottom-left-radius: var(--bot-rad);
    border-bottom-right-radius: var(--bot-rad);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    transition: all .2s ease-in-out;
    padding-right:10px;
    /*margin-left: 2em;*/
}
nav #contactbutton:hover {
    --bot-rad: 14px;
}

.bigp {
    font-size: 2.5em;
    font-family: 'Montserrat';
    color: var(--main-color);
    font-weight: 500;
    max-width: 50%;
}
.bigp p {
    font-size: .5em;
    color: var(--main-darker);
    margin-top: 1.5em;
    width: 100%;
    line-height: calc(1.5em);
}

hl {
    color:var(--sec-color);
    font-weight: 600;
}

space {
    width:100%;
    margin:0;
    padding:0;
}

section {
    width: 100%;
    margin: 0;
    padding: 0;
    /*padding: 5rem 0;*/

    background-color: white;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: flex-start;
}

/*section:nth-child(2n) {
    background-color: var(--main-darker) !important;
}*/

#accueil_top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}

#illu_ctn {
    position: relative;
    height: 22em;
    width: 22em;
    max-width: 100%;
}
/*
@keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-10px);
    }
    100% {
      transform: translatey(0px);
    }
  }
*/
#illu {
    height: 100%;
    animation: float 4s ease-in-out infinite;
    position: absolute;
    left: 50%;
    translate: calc(-50% - 0px);
/*    bottom: 11px; */

    max-width: 100%;
    object-fit: contain;
}

#illu_shadow {
    height: 100%;

    max-width: 100%;
    object-fit: contain;
}

.pctctn {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: center;

    gap: 3em;
    max-width: 85%;
    margin-top: 8em;
    margin-bottom: 3em;
}
.bigpct {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.bigpct h1 {
    font-size: 4em;
    font-weight: 800;
    color: var(--main-color);
}
.bigpct .pct {
    font-size: 2.5rem;
    margin-left: 3px;
}
.bigpct p {
    color: var(--main-darker);
    font-weight: 500;
    text-align: center;
}

.bigicon_ctn {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: flex-start;

    gap: 3em;
    max-width: 85%;
    padding-top: 5em;
    margin-bottom: 3em;
}
.bigicon {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.bigicon .illu {
    height: 9em;
    aspect-ratio: 1/1;
    object-fit: contain;
    /*fill: var(--sec-color);*/
    fill: var(--bg-color);
    transition: scale .4s ease-in-out;
}
.bigicon .illu:hover {
    scale: 1.1;
}
.bigicon h2 {
    color: var(--main-color);
    font-size: 1.5em;
    text-align: center;
    margin-top: .3em;
    font-weight: 600;
}
.bigicon p {
    width: 80%;
    margin-top: 5px;
    color: var(--bg-color);
    font-weight: 550;
    text-align: justify;
}

.section_wave {
    fill: var(--main-darker);
    display: block;
    background-color: var(--bg-color);
    width:100%;
}


.cards_ctn {
    width: 70%;

    /* margin: 0 auto; */
    display: none; /* display: flex;*/
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: var(--gap);
}
.cards_subctn {
    width: 100%;
    gap: var(--gap);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
}
.cards_ctn .cards_subctn > div {
    height: 16vw;

    /* min-width: 200px; */
    background-color: #d1d1d5;
    /* background-color: #16316d; */
    /* background-color: #d1d1d5; */
    flex: var(--size);
    overflow: hidden;
    border-radius: 1em;
    transition: transform .2s ease-in-out;
    cursor:pointer;
    position: relative;
}
.cards_ctn .cards_subctn > div:hover {
    /*transform: scale(1.02);*/
}
.cards_ctn h2 {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 99;
    color: white;
    font-size: 2em;
    /* height: 100%; */
    max-height: 100%;
    width: 100%;
    text-align: center;
    /* margin: auto; */
    translate: 0 -50%;
    opacity:0;
    transition: opacity .2s ease-in-out;
    font-weight:600;
}
.cards_ctn .cards_subctn > div:hover h2 {
    opacity:1;
}
.cards_ctn img {
    object-fit: cover;
    max-width: 100%;
    width:100%;
    height: 100%;
    transition: scale .2s ease-in-out, filter .2s ease-in-out;
}
.cards_ctn .cards_subctn > div:hover img {
    filter: blur(4px) brightness(0.9);
    scale: 1.05;
}

#becalled {
    width: 46%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    align-content: center;
    padding-bottom: 5em;
    max-width: 550px !important;
}
#becalled .left {
    flex:1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    gap:1em;
}
#becalled a {
    text-decoration: none;
    color:var(--main-color);
    font-weight: 500;
    transition: all .2s ease-in-out;
}
#becalled a span {
    position: relative;
}
#becalled a span::after {
    content:"";
    display: block;
    position: absolute;
    bottom:-1px;
    left:0;
    height:1px;
    background-color:var(--main-color);

    opacity: 0;
    width:0;

    transition: opacity .2s ease-in-out, width .2s ease-in-out;
}
#becalled a:hover span::after {
    opacity:1;
    width:100%;
}
#becalled .left > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
}
#becalled .left svg {
    fill: var(--main-color);
    height: 2em;
    width: 2em;
}
#becalled .right {
    flex:1;
}
#becalled .right h2 {
    font-size: 2em;
    text-align: left;
    margin-bottom: 1em;
}
#becalled .right form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: stretch;
    gap: .5em;
}
#becalled .right form input[type='submit'] {
    color: var(--bg-color);
    cursor: pointer;
    background-color: var(--main-darker);
    border: none;
    padding: 5px 10px;
    font-size: 1.2em;
    font-family: 'Montserrat';
    margin-top: .6em;
    --bot-rad: 8px;
    border-bottom-left-radius: var(--bot-rad);
    border-bottom-right-radius: var(--bot-rad);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: .3em 0;

    transition: all .2s ease-in-out;
}
#becalled .right form input[type='submit']:hover {
    --bot-rad: 15px;
}
#becalled .right input {
    border-radius: 13px;
    padding: 8px 12px;
    font-size: 1em;
    border: solid 1px #727272;
    color: var(--font-color);
    transition: border .2s ease-in-out;
    position: relative;
}
#becalled .right label {
    position: absolute;
    translate: 4px calc(-100% - 5px);
    /* left: 0; */
    font-size: .9em;
}
#becalled .right input:focus {
    border: solid 1px black;
    outline:none;
}
#becalled .minputs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5em;
}

#testimonials {
    padding-top: 10em;
    padding-bottom: 7em;
}
#testimonials_ctn {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    gap: 2em;
    width: 100%;
    flex-wrap: wrap;
}
.testimonial {
    aspect-ratio: 1 / 1;
    height: 20em;
    /* box-shadow: 0 0 5px rgba(75, 75, 75, .07); */
    box-shadow: 0 4px 17px 0px #dcdcdc;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;

    transition: box-shadow .5s ease-in-out;
}
.testimonial:hover {
    box-shadow: 0 4px 17px 0px #acacac;
}
.testimonial svg {
    fill:#ff423a; /* #ff423a #fad085 */
    height:2em;
}
.testimonial h2 {
    font-size: 1.3em;
    font-weight: 500;
    width: 80%;
    text-align: left;
}
.testimonial p {
    width: 80%;
    text-align: left;
}

#articles {
    display:none; /* à enlever pour afficher les ressources RS & marketing */
    margin-top: 7em;
}


.socials {
    height: 2em;
    width: 2em;
    object-fit: contain;
    cursor: pointer;
    transition: scale .2s ease-in-out;
}
.socials:hover {
    scale:1.1;
}

footer {
    padding-top: 2em;
    padding-bottom:1em;
    background-color: #f8f8f8;
}
footer #socials {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
footer #cards_ctn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: stretch;
}
footer #cards_ctn > div {
    display: flex;
    width: 30%;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: center;
    justify-content: flex-start;
    gap: .5em;
}
footer #cards_ctn div h2 {
    font-size: 1.2em;
    font-weight: 550;
    color: var(--main-color);
    margin-bottom: 5px;
}
footer #cards_ctn div p {
    font-size: 1em;
    color: var(--font-color);
}
footer #cards_ctn div ul {
    list-style-type: none;
}
footer #cards_ctn div ul li {
    text-indent: 10px;
}
ul.dashed {
    list-style-type: none;
}
ul.dashed li {
    text-indent: 15px !important;
}
ul.dashed li:before {
    content: "- ";
    text-indent: -5px;
}
footer a {
    text-decoration: none;
    transition: all .2s ease-in-out;
    color:var(--font-color);
    font-weight: 500;
}
footer a:hover {
    color:var(--main-color);
}
footer #copyrights {
    text-align: center;
    font-size: 1em;
    font-weight: 500;
    margin-top: 1.3em;
}

footer #tdv {
    align-items: stretch !important;
}

.footer_card {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
}

.footer_card svg {
    fill: var(--main-color);
    height: 2em;
    width: 2em;
}

#burger {
    display: none;
    height: 5px;
    width: 41px;
    background-color: var(--main-darker);
    border-radius: 200em;
    position: relative;
    cursor: pointer;
    

    --dist:12px;
    margin:calc(var(--dist)) 0;
    margin-right: 10px;
    transition: all .2s ease-in-out;
}
#burger::after {
    display: block;
    position: absolute;
    content: "";
    height: 5px;
    width: 41px;
    background-color: var(--main-darker);
    bottom: calc(-1 * var(--dist));
    border-radius: 200em;
    transition: all .2s ease-in-out;
}
#burger::before {
    display: block;
    position: absolute;
    content: "";
    height: 5px;
    width: 41px;
    background-color: var(--main-darker);
    top: calc(-1 * var(--dist));
    border-radius: 200em;
    transition: all .2s ease-in-out;
}
#burger.active {
    background-color: var(--bg-color);
}
#burger.active::after {
    transform: rotate(-45deg);
    bottom:0;
}
#burger.active::before {
    transform: rotate(45deg);
    top:0;
}

@media screen and (max-aspect-ratio: 1/1) {

}

@media only screen and (max-width: 1280px) {
    #becalled {
        width: 70%;
    }
}

@media only screen and (max-width: 1120px) { /* short logo, illu break line */
    #becalled {
        width: 75%;
    }

    .bigicon {
        width: 45%;
    }

    .bigicon_ctn {
        
    }

    .cards_ctn {
        width: 80%;
    }
    .cards_ctn .cards_subctn > div {
        height: 18vw;
    }

    nav .logo.long {
        display: none;
    }
    nav .logo.short {
        display: block;
        margin-left: 1.5em;
    }

    section#accueil {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
        align-items: center;
        justify-content: center;
    }

    #accueil_top {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: center;
    }

    #illu_ctn {
        margin-top: 4rem;
        margin-left: 35%;
    }

    .bigp {
        max-width: 85%;
    }
}

@media only screen and (max-width: 950px) { /* burger menu */
    .bigp {
        max-width: 90%;
    }

    .bigpct {
        width: 45%;
    }

    #becalled {
        width: 85%;
    }

    .cards_ctn h2 {
        font-size:1.2em;
    }

    nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: space-between;
    }

    nav #buttons {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start;
        position: fixed;
        left: 0;
        background-color: var(--bg-color);
        width: 100%;
        top: calc(2em + 14px);
        gap: .6em;
    }

    nav .logo.short {
        margin-left: 0;
    }

    nav #buttons.active {
        display:flex;
    }

    nav #buttons button {
        font-size: 1.6em;
    }

    nav #buttons button.active {
        color: var(--main-darker);
    }

    #above {
        display: none;
    }

    #burger {
        display: block;
    }

    .cards_ctn {
        --gap: 7px !important;
        width: 90%;
    }
}

@media only screen and (max-width: 850px) {
    footer #tdv {
        width: 90% !important;
        margin-bottom: 3em;
    }
    footer #cards_ctn {
        justify-content: space-evenly;
    }

    #becalled {
        width: 90%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        align-content: center;
        padding-bottom: 5em;
        /*gap: 3em;*/
    }

    #becalled .minputs {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5em;
    }

    .cards_ctn .cards_subctn > div {
        height: 13em;
    }
}

@media only screen and (max-width: 630px) {
    #illu_ctn {
        max-width: 90%;
        right: auto;
        margin-left: auto;
        margin-top: 1rem;
        height: 17em;
    }

    .bigicon_ctn {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        gap: 3em;
        max-width: 100%;
        padding-top: 5em;
        margin-bottom: 3em;
    }

    .bigicon p {
        width:85%;
    }

    .bigicon {
        width: 90%;
    }

    .pctctn {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 3em;
        max-width: 85%;
        margin-top: 8em;
        margin-bottom: 3em;
    }

    .bigpct {
        width: 85%;
    }

    .bigp p {
        display: none;
    }
}

/* Styles pour la section des mentions légales & confidentialité - unique partie modifiée par Wandrille*/ 
.legal, #devis {
    width: 100%;
    max-width: 85%;
    margin: 0 auto;
    padding: 5rem 0;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--font-color);
}

#devis {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

#devis h1 {
    text-align: center; /* Centre le texte à l'intérieur de l'élément */
    margin-bottom: 2rem; /* Ajuster si tu veux plus d'espace en dessous */
}

.legal h1, #devis h1 {
    font-size: 2.5em;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 1em;
}

.legal h2 {
    font-size: 2em;
    font-weight: 500;
    color: var(--main-darker);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.legal p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--font-color);
}

.legal ul {
    list-style-type: disc;
    padding-left: 0;
    margin: 0;
    margin-left: 2%;
}

.legal ul li {
    margin-bottom: 0.5rem;
    font-size: 1.2em;
    line-height: 1.6;
}

.legal strong {
    font-weight: bold;
    color: var(--main-darker);
}

.legal a {
    color: var(--main-color);
    text-decoration: none;
}

.legal a:hover {
    text-decoration: underline;
}

/* Responsivité */
@media only screen and (max-width: 850px) {
    .legal {
        max-width: 90%;
        padding: 3rem 0;
    }

    .legal h1 {
        font-size: 2.5em;
    }

    .legal h2 {
        font-size: 1.8em;
    }

    .legal p,
    .legal ul li {
        font-size: 1.1em;
    }
}