:root {
    --grid-margin: 10%;
    --grid-width: 100%;
    --section-title-font-size: 125%;
    --max-width: 1920px;
    --body-font-size: 20px;
    --medium-font-size: 125%;
    --title-font-size: 100%;
    --header-font-size: 250%;
    --x-large-font-size: 150%;
    --section-font-size: 100%;
    --body-margin: 5%;
    --burger-space: 8px;
    --burger-space-negative: -8px;
    --burger-size: -15px;
    --burger-size-negative: -15px;
}

@font-face {
    font-family: 'JetBrains Mono Local';
    src: url('./assets/fonts/JetBrainsMono-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-old';
    src: url('./assets/fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.scroll-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #3db7ac;
    animation: bounce 2s infinite;
    user-select: none;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #111A23;
    color: white;
    margin: 0;

    padding: 0;
    box-sizing: border-box;
    font-family: "JetBrains Mono Local", monospace;
    /* width: 100%; */
    margin: 0 auto;
    font-size: var(--body-font-size);
}

.highlight {
    color: #3db7ac;
}

section {
    display: flex;
    flex-direction: column;
    padding: 2% var(--body-margin);
}

section>* {
    max-width: var(--max-width);
    justify-content: center;
    margin: 0 auto;
}

::placeholder {
    font-family: "JetBrains Mono", monospace;
    font-size: 100px;

}

.nav {
    z-index: 999999999;
    /* l'art du z-index*/
    /* max-width: var(--max-width); */
    justify-content: center;
    width: 100%;
    height: 10%;
    position: fixed;
    text-align: center;
    align-items: center;
    background-color: #111A23;
    display: flex;
    vertical-align: middle;
    font-size: 110%;
    /* padding-bottom: 2%; */

}

.nav>* {
    max-width: var(--max-width);
}

.container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin: 0 46px;
    margin-top: 8px;
    /* padding-left: 1%; */
    /* padding-top: 2vw; */
}

.nav .logo {
    height: 100%;
    vertical-align: middle;
    align-items: center;
    width: 20%;
    display: flex;
    align-items: center;
}

.nav .logo img {
    width: 70%;
}

.nav .main_list {
    align-self: flex-end;
    justify-content: end;
    height: 100%;
    width: 80%;
    /* margin-right: 1%; */
    background-color: transparent;

}

.nav div.main_list ul {
    display: flex;
    align-items: center;
    list-style: none;
}

ul li a {
    text-decoration: none;
}

.navlinks {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
}

.nav ul a {
    margin-right: 2%;
}

.nav div.main_list ul li {
    padding-right: 4%;
}

.nav ul li a {
    color: white;
}


.nav div.main_list ul li a:hover,
.navigation-active {
    text-decoration: underline;
    text-decoration-color: #3db7ac;
    text-decoration-thickness: max(0.17vw, 0.17vh); 
    text-underline-offset: max(0.7vw, 0.7vh);
}

.nav div.main_list ul li a:hover {
    filter: brightness(0.5);

}

.space-block {
    margin-left: max(2.4vw, 2.4vh);
}

button {
    border: none;
}


.cta-button:hover,
.standard-button:hover {
    background-color: #a3d9d9;
    color: black;
}

.standard-button {
    padding: max(0.7vw, 0.7vh) max(1.3vw, 1.3vh);
    /* margin-bottom: 5%; */
    display: inline-block;
    text-wrap: nowrap;
    background-color: #3db7ac;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 150%;
    font-weight: 500;
    text-decoration: none;
    border-radius: max(0.7vw, 0.7vh);
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    cursor: pointer;
    margin-right: 0 !important;
}

.needs-section {
    height: auto;
}

.needs-body {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    gap: 2rem;
}

.needs-card {
    display: grid;
    grid-template-rows: auto min-content 1fr auto;
    height: 100%;
    text-align: center;
    color: white;
    padding-top: 4rem;
    justify-content: start;
}
.needs-card-pictography {
    margin-bottom: 7%;
}


.needs-card-description p {
    margin: 0 0;
}

.needs-card-title,
.needs-card-description {
    display: flex;
    align-items: center;
    /* center text vertically */
    justify-content: center;
    text-align: center;
    width: 100%;
}
.needs-card-description { 
    align-items: baseline;
}
.needs-card-title-container {
    min-height: 5rem;
    max-height: 5rem;
}
.needs-card-title {
    /* height: max(4vw, 4vh); */
    font-size: var(--title-font-size);
    margin: 0 0;
    min-height: 4rem; /* 👈 assure une hauteur uniforme pour l'alignement */
    display: flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
}
.needs-card-pictography {
    width: auto;
    height: 65%;
    border-radius: 5px 5px 5px 5px;
}

.section-title {
    text-align: center;
    font-weight: bolder;
    color: rgb(255, 255, 255);
    font-size: var(--section-font-size);
    /* margin-bottom: 1%; */
}

.old-new-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.new-logo {
    width: 50%;
}
.new-logo-container { 
    width: 100%;
    height: 100%;
}

.our-solution-section {
    background-color: #306062;
    scroll-margin: 50px;
    /* display:block; */
    margin-top: var(--body-margin);
    justify-content: center;
    justify-items: center;

}


.our-solution-body {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    /* margin: var(--grid-margin); */
    grid-template-columns: repeat(2, calc(var(--grid-width)/2));
    /* grid-template-rows: repeat(5, 1fr); */
    /* gap: 2%; */
    grid-auto-flow: dense;
    height: 100%;
    /* Cela garantit que le body prend toute la hauteur du viewport */
    column-gap: 4%;
}

.our-solution-card {
    text-align: center;
    transition: 500ms;
    /* height: 50vw; */
    height: auto;
    /* width: 90%; */
    /* position: relative; */
    /* display:block; */
    color: white;
    justify-content: center;
}


.our-solution-card-title {
    margin-top: 8%;
}

.our-solution-card-pictography {
    width: 100%;
    height: auto;
    /* ou un `height: 100%` selon effet recherché */
    object-fit: cover;
    /* ou `contain`, selon besoin */
    border-radius: 5px;
    display: block;
}

.our-solution-card-image-wrapper:hover .our-solution-card-pictography {
    filter: brightness(0.5);
}

.our-solution-card-image-wrapper:hover .overlay {
    opacity: 1;
}

.texthover {
    color: white;
}

.our-solution-card-image-wrapper {
    display: flex;
    position: relative;
}

.overlay {
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 90%;
    width: 100%;
    opacity: 0;
}

.overlay div {
    width: 80%;
    align-self: center;
    margin-top:10%;
}

.overlay a {
    margin-top: auto;
    align-self: center;
}

.text-black {
    color: black;
}

.proposal-section {
    height: auto;
}

.proposal-card-title {
    font-weight: bolder;
    font-size: var(--title-font-size);
}

.proposal-card p {}

.proposal-body {
    /* padding-top: 3%; */
    /* box-sizing: border-box; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(1, 1fr);
    /* grid-gap: 3rem; */
    width: 100%;
    align-items: baseline;
    /* justify-self: flex-start; */
    justify-items: flex-;
}

.proposal-card-pictography {
    width: 22%;
    /* ou 5vw si tu veux responsive */
    height: 22%;
    /* carré pour forcer l'alignement */
    object-fit: contain;
    /* l'image ne sera pas déformée */
}

/* 
.proposal-card:first-child {
    justify-self: start; 

}
.proposal-card:last-child {
    justify-self: end; 

} */

.proposal-card {
    text-align: center;
    transition: 500ms;
    width: 100%;
    /* position: relative; */
}


.proposal-card-title {
    margin-bottom: 1rem;
}

.proposal-card-description {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60px;
    /* pour aligner toutes les descriptions */
}

.form_sending_state {
    color: black;
}

.form_sending_success {
    color: green;
}

.form_sending_error {
    color: red;
}

.contact-us-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.contact-us-section {
    height: auto;
    background-color: #bae4e2;
    scroll-margin: 60px;
}

.contact-us-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}


.contact-us-description {
    width: 60%;
}

.contact-us-body {
    width: 100%;
    height: 100%;
    padding-top: 2%;
}

.contact-us-body input,
.contact-us-body textarea {
    border: none;
    text-indent: max(0.7vw, 0.7vh);
    border-radius: max(0.4vw, 0.4vh);
}

.contact-us-body input {
    height: 1.8rem;
    margin-bottom: 2%;
}

#email, #role, #object, #message {
    font-size: var(--body-font-size);
    font-family: "Jetbrains Mono Local";
}
.contact-us-body textarea {
    height: 15rem;
}

.contact-us-body input::placeholder,
.contact-us-body textarea::placeholder{ 
    color: #4d535a;
    font-size: var(--body-font-size);
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    width: 75%;
}

.form-button {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    padding: 2%;
}

.form-full-width {
    width: 98%;
}

.contact-us-card {
    /* margin: 5% 5%; */
    /* border: 3px; */
    text-align: center;
    bottom: 0;
    transition: 500ms;
    /* height: 50vh; */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-us-card-pictography {
    height: auto;
    width: 80%;
    align-items: center;
    border-radius: 5px 5px 5px 5px;
}

.meet-us-section {
    background-color: #bae4e2;
    scroll-margin: 50px;
}

.meet-us-description {
    text-align: center;
}


.meet-us-card {
    /* margin: 5% 5%; */
    /* border: 3px; */
    text-align: center;
    bottom: 0;
    transition: 500ms;
    /* height: 50vh; */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.meet-us-body {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(8, calc(95vw/8));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
}

.meet-us-card-pictography {
    width: 90%;
    align-items: center;
    margin: 0 0 0 0;
}


.faq-container {
    display: flex;
    overflow: visible;
    /* important pour permettre le dépassement vertical */
    position: relative;
    padding-top: 3%;
    padding-bottom: 3%;
}

.faq-section {
    padding-bottom: 4%;
}

.faq-section h1 {
    /* height: 100%; */
    /* margin-bottom: 0; */
    /* height: auto; */
    /* height: max-content; */
}

.faq-questions {
    width: 55%;
    height: 100%;
    background-color: #1c2a36;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    /* au-dessus du bloc réponse */

}

.faq-question,
.faq-question::after {
    transition: background 0.3s;
}

.faq-question {
    padding: 3%;
    padding-right: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 100;
    --faq-bg-color: #111A23;
    background-color: var(--faq-bg-color);

}

.chevron-rounded {
    width: max(1.6vw, 1.6vh);
    margin-left: auto;
    z-index: 2;
    filter: brightness(0) saturate(100%) invert(92%) sepia(100%) saturate(2%) hue-rotate(5deg) brightness(106%) contrast(101%);
}

.faq-question p {
    padding-left: max(0.8vw, 0.8vh);
}

.faq-question:hover {
    /* background-color: #306062; */
    --faq-bg-color: #306062;
}

.first-question {
    border-top-left-radius: max(0.8vw, 0.8vh);
}

.first-question::after {
    border-top-right-radius: max(0.8vw, 0.8vh);
}

.last-question {
    border-bottom-left-radius: max(0.8vw, 0.8vh);
}

.last-question::after {
    border-bottom-right-radius: max(0.8vw, 0.8vh);
}

.faq-question.active .cercle {
    background-color: #3db7ac;
}

.faq-question.active .chevron-rounded {
    filter: none;
}


.faq-question::after {
    content: "";
    position: absolute;
    top: 0;
    right: max(-2.8vw, -2.8vh);
    width: max(2.8vw, 2.8vh);
    height: 100%;
    background-color: var(--faq-bg-color);
    z-index: 1;
}
.faq-answer::after {
    content: "";
    position: absolute;
    bottom: 0;
    background-color: inherit;
}

.faq-answer {
    width: 45%;
    background-color: #306062;
    color: white;
    padding: 4%;

    margin-top: -3%;
    /* dépasse en haut */
    margin-bottom: -3%;
    /* dépasse en bas */
    z-index: 0;
    position: relative;
    border-radius: max(0.9vw, 0.9vh);
    box-shadow: 0 0 0.7vw rgba(0, 0, 0, 0.2);
    /* optionnel pour un peu de profondeur */
}

.faq-answer-text {
    margin-left: 5%;
}

.faq-answer h2 {
    margin-top: 0;
    color: white;
    margin-bottom: 10%;
}

.faq-answer p {
    font-weight: normal;
    line-height: 1.6;
}

.faq-question-pictography {
    width: max(2vw, 2vh);
    height: max(2vw, 2vh);
}

.cercle {
    width: max(1.2vw, 1.2vh);
    height: max(1.2vw, 1.2vh);
    background-color: white;
    border-radius: 50%;
    aspect-ratio: 1/1;
}


/* Bandeau Cookie */
.cookie-banner {
    max-width: var(--max-width);
    position: fixed;
    bottom: max(1.6vw, 1.6vh);
    left: 30%;
    transform: translateX(-20%);
    /* max-width: ; */
    background-color: #fff;
    padding: max(1.6vw, 1.6vh);
    border-radius: max(1vw, 1vh);
    box-shadow: 0 max(0.3vw, 0.3vh) max(1vw, 1vh) rgba(0, 0, 0, 0.1);
    text-align: center;
    animation: fadeIn 0.5s ease-in-out;
    z-index: 1000;
    bottom: 16px;
    /* marge en bas */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-banner button {
    font-size: var(--body-font-size) !important;

}

.cookie-banner h1 {
    margin-bottom: max(0.5vw, 0.5vh);
    color: #333;
    font-size: var(--section-title-font-size) !important;

}

.cookie-banner p {
    color: #666;
    margin-bottom: max(1.2vw, 1.2vh);
    font-size: var(--body-font-size) !important;
}

.cookie-buttons {
    display: flex;
    gap: max(0.5vw, 0.5vh);
    justify-content: center;
}

.cookie-buttons button,
.cookie-buttons a {
    padding: max(0.5vw, 0.5vh) max(1vw, 1vh);
    border: none;
    border-radius: max(0.5vw, 0.5vh);
    cursor: pointer;
    transition: 0.3s;
}

.accept-btn {
    background-color: #3db7ac;
    color: #fff;
}


.customize-btn {
    background-color: #3db7ac;
    color: #fff;
}

.reject-btn {
    background-color: #3db7ac;
    color: #fff;
}

.cookie-buttons button:hover,
.cookie-buttons a:hover {
    transform: scale(0.98);
}

/* Section de Customisation des Cookies */
.cookie-preferences {
    position: fixed;
    bottom: max(4vw, 4vh);
    /* Ajuste la position pour éviter le chevauchement */
    left: 50%;
    transform: translateX(-50%);
    max-width: var(--max-width);
    background-color: #fff;
    padding: max(1.2vw, 1.2vh);
    border-radius: max(1vw, 1vh);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1001;
    display: none;
    /* Masqué par défaut */
}

.cookie-preferences h2 {
    margin-bottom: max(0.5vw, 0.5vh);
    color: #333;
}

.preference-options {
    display: flex;
    flex-direction: column;
    gap: max(0.5vw, 0.5vh);
    margin-bottom: max(1.2vw, 1.2vh);
}

.preference-options label {
    color: #666;
    cursor: pointer;
}

.preference-buttons {
    display: flex;
    gap: max(0.5vw, 0.5vh);
    justify-content: center;
}

.save-btn,
.cancel-btn {
    padding: max(0.5vw, 0.5vh) max(1vw, 1vh);
    border: none;
    border-radius: max(0.5vw, 0.5vh);
    cursor: pointer;
    transition: 0.3s;
    background-color: #3db7ac;
    color: #fff;

}


.save-btn:hover,
.cancel-btn:hover {
    transform: scale(0.98);
}

/* Classe pour masquer les éléments */
.hidden {
    display: none;
}

.section-text-block {
    margin-left: 5%;
    margin-right: 5%;
}

.mentions-legales {
    text-align: center;
    color: #777;
    padding: max(1.6vw, 1.6vh) 0;
    padding: 2% var(--body-margin);

    background-color: #111A23;
    font-family: 'JetBrains Mono', monospace;
}

.mentions-legales a {
    color: #3db7ac;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.mentions-legales a:hover {
    color: #a3d9d9;
    cursor: pointer;
}

.section-text-block a,
.section-text-block button {
    color: #3db7ac;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.section-text-block a:hover {
    color: #a3d9d9;
}


.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.popup {
    max-width: var(--max-width);
    margin: 0 24px;
    background: #2c3e50;
    padding: max(2.5vw, 2.5vh);
    border-radius: max(2.5vw, 2.5vh);
    text-align: center;
    /* max-width: max(50vw, 50vh); */
    width: 50%;
    box-shadow: 0px max(0.6vw, 0.6vh) max(2.5vw, 2.5vh) rgba(0, 0, 0, 0.3);
    animation: expand 0.5s ease-out;
    font-size: var(--body-font-size);
}

.popup h1 {
    /* font-size: max(3vw, 3vh); */
    color: #ffffff;
    margin-bottom: 5%;
    font-weight: 700;
    position: relative;
    display: flex;
    flex-direction: column;
}

.popup p {
    margin-bottom: 5%;
}

/* Strike-through animation for Knock Knock */
.strikeout {
    display: inline-block;
    position: relative;
    animation: crossOut 2s forwards;
    color: #1eae98;
    font-family: 'Barlow-old', sans-serif;
}

/* New Haryon text fade-in */
.new-text {
    display: inline-block;
    opacity: 0;
    animation: fadeInText .3s .3s forwards;
    color: #1eae98;
    /* Your green color for Haryon */
}

/* Keyframes for animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes expand {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

/* Cross-out animation */
@keyframes crossOut {
    0% {
        text-decoration: none;
    }

    50% {
        text-decoration: line-through;
    }

    100% {
        text-decoration: line-through;
        font-size: 50%;

    }
}

/* Fade-in effect for "Haryon" */
@keyframes fadeInText {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Keyframes for fade-out */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* To make sure it fades out smoothly */
.fadeOut {
    animation: fadeOut 0.5s forwards;
    /* Fade out effect when close button is clicked */
}

.text-main-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--header-font-size);
    margin-bottom: 8%;
}

.get-started-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home {
    min-height: 100vh;
    background-color: #111A23;
    box-sizing: border-box;
}

.home>* {
    max-width: var(--max-width);
}

.home-text {
    margin-top: 10%;
}



.secondary-title-text {
    margin-top: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 125%;
}

.text-tagline {
    font-size: var(--x-large-font-size);
    font-weight: bolder;
    text-align: center;
}

.blue-text {
    color: #3db7ac;
}

.text-bold {
    font-weight: bold;
    text-align: center;
}

.text-above-button {
    text-align: center;
    margin-bottom: 1%;
    font-size: var(--medium-font-size);
}

.text-undertitle {
    font-style: normal;
    padding-bottom: 1vw;
    text-align: center;
    font-size: var(--title-font-size);
}

/* CTA Button */
.cta-button {
    background-color: #3db7ac;
    padding: 3% 3%;
    color: #ffffff;
    font-size: var(--title-font-size);
    font-weight: bold;
    border-radius: 1.3vw;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
}

.cta-button:hover {
    background-color: #2e9c93;
}


.privacy-spacer {
    height: max(10vw, 10vh);
}

.navTrigger {
    display: none;
}

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

    .nav-pc {
        display: none !important;
    }

    .container.show_list .main_list {
        height: auto;
        display: block;
    }

    .navlinks {
        justify-self: flex-end;
    }

}



/* Masquer la nav PC sur mobile */
@media screen and (max-width: 768px) {
    .home {
        padding-top: 15vh;
        padding-bottom: 30%;
    }

    .popup h1 {
        /* font-size: max(3vw, 3vh); */
        margin-bottom: 8%;
    }

    .popup p {
        margin-bottom: 10%;
    }

    .standard-button {
        font-size: 90%;
    }

    .get-started-section {
        padding-bottom: 50%;
    }

    .home-text {
        margin-top: 0;
    }

    section>* {
        margin: 0;
    }

    .proposal-card {
        margin-bottom: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .proposal-card img {
        width: 15%;
    }

    .proposal-card-title {
        font-size: var(--title-font-size);
        margin: 0;
    }

    .proposal-card-description {
        align-items: start;
    }

    .form-group input {
        height: 4vh;
        border-radius: 1.4vw;
    }

    .needs-card-pictography {
        height: 60%;
        /* margin-bottom: 5%; */
    }

    .needs-card {
        justify-content: center;
        gap: 1%;
    }

    .needs-body {
        margin: 0 10%;
    }

    .line-break {
        display: block;
    }

    .our-solution-card-image-wrapper:hover .our-solution-card-pictography {
        filter: none;
    }

    .needs-card a {
        margin-bottom: 20%;
    }

    .text-undertitle {
        margin-bottom: 8%;
    }

    .needs-card-description {}

    .needs-card-title {
        margin: 0;
    }

    .texthover {
        text-align: justify;
    }

    .proposal-card-description p {
        margin: 0;
    }

    .overlay a {
        display: none;
    }

    :root {
        --grid-margin: 10%;
        --body-margin: 10%;
        --section-title-font-size: 125%;
        --max-width: 1920px;
        --body-font-size: 1em;
        --medium-font-size: 150%;
        --title-font-size: 115%;
        --header-font-size: 3rem;
        --x-large-font-size: 175%;
        --section-font-size: 120%;
    }

    .text-main-title {
        margin-bottom: 30%;
    }

    .needs-body {
        grid-template-columns: repeat(1, calc(var(--grid-width) / 1));
    }

    .contact-us-description {
        width: 100%;
        text-align: justify;
    }

    .main_list {
        display: none;
    }

    .mobile-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 24px;
    }

    #nav-logo-mobile img {
        width: 40%;
    }

    .navTrigger {
        cursor: pointer;
        width: 30px;
        margin-left: 24px;
    }

    /* Positionnement initial du menu mobile */
    .mobile-menu {
        background-color: #306062;
        width: 80%;
        max-width: 70%;
        position: fixed;
        height: 90%;
        top: 10%;
        right: -100%;
        /* caché à droite */
        z-index: 999;
        padding: 20px;
        transition: right 0.3s ease-in-out;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }

    #nav-legal-notice {
        font-size: 60%;
    }

    .our-solution-body {
        grid-template-columns: repeat(1, var(--grid-width));
    }

    .proposal-body {
        grid-template-columns: 1fr;
    }

    .contact-us-wrapper {
        flex-direction: column;
    }

    .contact-us-text {
        align-items: center;
    }

    .form-group {
        width: 100%;
    }

    .form-button {
        justify-content: center;
    }

    .our-solution-card-image-wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .overlay {
        opacity: 1;
        position: relative;
        margin-bottom: 10%;
    }

    .overlay div {
        margin: 4%;
    }

    .nav ul a {
        margin: 0;
    }

    .our-solution-card-title {
        font-size: var(--title-font-size);
        margin-top: 0;
    }

    .overlay div {
        width: 100%;
    }

    /* Quand le menu est ouvert */
    .mobile-menu.open {
        right: 0;
    }

    /* Cacher via JS si besoin */
    .mobile-menu.hidden {
        display: none;
        /* pour initial */
    }

    .navlinks-mobile {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: baseline;
        justify-content: center;
    }

    .navlinks-mobile li {
        margin-bottom: 8%;
        font-size: var(--x-large-font-size);
    }
}

/* Afficher la nav PC sur desktop */
@media screen and (min-width: 769px) {

    /* .mobile-nav,
    .mobile-menu {
        display: none;
    } */
    .mobile-nav-container {
        display: none;
    }
}

.standard-button {
    font-size: 90%;
}

#nav-logo-mobile {
    height: 100%;
    width: 60%;
    object-fit: fill;
    vertical-align: middle;
    align-items: center;
}

.nav-container .standard-button {
    /* margin-left:auto; */
    margin-right: 10%;
}

.nav-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 100%;
}

.nav-container>* {
    height: 100%;
    /* width: 100%; */
}

.navTrigger {
    cursor: pointer;
    width: 12%;
    height: 12%;
    /* position: absolute; */
    right: 30px;
    top: 0;
    bottom: 0;
}

.navTrigger i {
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 3px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(var(--burger-space)) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(var(--burger-space)) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(var(--burger-space)) rotate(0deg);
    }

    100% {
        transform: translateY(var(--burger-space)) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(var(--burger-space)) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(var(--burger-space)) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(var(--burger-space)) rotate(0deg);
    }

    100% {
        transform: translateY(var(--burger-space)) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(var(--burger-space-negative)) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(var(--burger-space-negative)) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(var(--burger-space-negative)) rotate(0deg);
    }

    100% {
        transform: translateY(var(--burger-space-negative)) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(var(--burger-space-negative)) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(var(--burger-space-negative)) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(var(--burger-space-negative)) rotate(0deg);
    }

    100% {
        transform: translateY(var(--burger-space-negative)) rotate(135deg);
    }
}