@import url(https://db.onlinewebfonts.com/c/0e0f094e0c53c2f7f9bbf436f922875b?family=Foundry+Context+W03+Demi);

@font-face {
    font-family: "Foundry Context W03 Demi";
    src: url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.eot");
    src: url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.svg#Foundry Context W03 Demi")format("svg");
}

@font-face {
    font-family: "Foundry Context W03 Regular";
    src: url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.eot");
    src: url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.eot?#iefix") format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.woff2") format("woff2"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.woff") format("woff"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.ttf") format("truetype"),
        url("https://db.onlinewebfonts.com/t/0e0f094e0c53c2f7f9bbf436f922875b.svg#Foundry Context W03 Regular") format("svg");
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200&display=swap');

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    max-width: 100vw;

    font-family: 'Foundry Context W03 Demi', sans-serif;
    color: #121212;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(40, 60, 113) white;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: white;
}

*::-webkit-scrollbar-thumb {
    background-color: #001449;
    border-radius: 20px;
    border: 2px solid #ffffff;
}


body {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    background-color: white;
    overflow-x: hidden;
    /*background-color: #012e7c*/
    /*background: rgb(4, 0, 66);
    background: linear-gradient(180deg, rgba(4, 0, 66, 1) 0%, rgba(4, 0, 66, 1) 20%, rgba(5, 1, 143, 1) 34%, rgba(3, 94, 192, 1) 63%, rgba(125, 200, 218, 1) 100%);
*/
    }

.content_container {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}


.background_top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    height: auto;
    min-height: 61vh;
    background: no-repeat url('../img/background_cut_top_bottom_filter_blue.png');
    background-position: center;
    background-size: cover;
    border-bottom: 3px solid rgb(51, 89, 160);
    margin-top: 149px;
}

.content {
    display: flex;
    max-width: 2000px;
    flex-direction: column;
    justify-content: start;
    margin-bottom: 6%;
}

.menu_hamburger {
    display: none;
}

/* HEADER */

/* ".navbar_top" correspond à la première barre de navigation */
.navbar_top_container {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 2;
}

.navbar_top {
    position: fixed;
    top: 0;
    width: 100vw;
    max-width: 2250px;
    height: 54px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar_top div {
    padding: 0 2vw;
}

.navbar_top div ul {
    display: flex;
}

.navbar_top div ul li {
    margin-right: 0px;
}


.navbar_top .left ul li {
    margin-right: 40px;
}

.navbar_top .left ul li a {
    font-size: 0.85em;
    color: rgb(0, 20, 73);
    transition: linear 0.1s;
}

.navbar_top .left ul li a:hover {
    color: rgba(42, 76, 181, 0.9);
    transition: linear 0.1s;
}

.navbar_top .right ul li {
    margin-left: 20px;
}

.navbar_top .right ul li a {
    height: auto;
    color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 500;
    padding: 7px 20px;
    background-color: rgba(42, 76, 181, 0.9);
    border-radius: 50px;
    transition: linear 0.1s;
}

.navbar_top .right ul li a:hover {
    color: rgba(0, 20, 73, 0.8);
    background-color: rgba(125, 200, 218, 1);
    transition: linear 0.1s;
}

/* "header nav" correspond à la seconde barre de navigation */
header nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 65px;
    background-color: rgba(0, 20, 73, 1);
    padding: 15px 0;
    position: fixed;
    top: 54px;
    left: 0;
    z-index: 1;
    box-shadow: 0px -30px 40px 50px rgba(0, 20, 73, 0.75);
    border-bottom: 1px solid rgb(20, 40, 93);
}

header nav ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100vw;
    height: auto;
    max-width: 2250px;
    padding: 0 5px;
}

header nav ul .navlink {
    min-height: 5vh;
    width: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    transition: all ease .1s;
}

header nav ul .navlink:hover {
    box-shadow: 0px 0px 40px 0px rgba(0, 20, 73, 0.75);
    transition: all ease .1s;
}

header nav ul .important {
    border-radius: 10px;
    transition: all linear 0.2s;
}

header nav ul .important a:first-child {
    color: rgba(125, 200, 218, 1);
}

header nav ul .important:hover {
    background-color: #EDEDED;
    box-shadow: 0px 0px 15px 0px rgba(125, 200, 218, 1);
    transition: all linear 0.2s;
}

header nav ul .important:hover a:first-child {
    color: rgb(0, 20, 73) !important;

}

header nav ul .navlink img[src*="img/fleche_navbar_bleuclair.png"] {
    display: none;
}

header nav ul .navlink:hover img[src*="img/fleche_navbar_bleuclair.png"] {
    display: block;
}

header nav ul .navlink:hover img[src*="img/fleche_navbar.png"] {
    display: none;
}

header nav ul .navlink:hover a:first-child {
    color: rgba(125, 200, 218, 1);
}

header nav ul .navlink a {
    color: whitesmoke;
    height: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
    font-weight: 300;
    font-size: 0.8em;
    text-align: center;
    cursor: default;
}

header nav ul .navlink img {
    width: 10px;
}

header nav ul .navbar_logo {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 15px;
}

header nav ul .navbar_logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}

header nav ul .navbar_logo a img {
    width: calc(100px + 5vw);
}

/* Sous menu */

/* Correspond à l'encadré qui apparait lorsque l'on passe la souris sur la rubrique du menu */
header nav ul li .sous_menu {
    visibility: hidden;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 5vh;
    right: auto;
    width: max-content;
    background-color: white;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 40px 0px rgba(0, 20, 73, 0.75);
    gap: 15px;
}

header nav ul li:last-child .sous_menu {
    right: 5px;
}

/* permet d'afficher l'encadré correspondant uniquement lorsque la rubrique est survolée */
header nav ul li:hover .sous_menu {
    visibility: visible;
    background-color: #F1FAFF;
}

/* Correspond à chaque ligne à l'interieur des sous menus */
header nav ul li .sous_menu li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: 0 10px
}

/* Correspond aux petites flèches bleus dans les rubriques des sous menus */
header nav ul li .sous_menu li .fleche_sous_menu {
    width: 10px;
    height: 10px;
    display: block;
    margin-left: 5px;
}

/* Correspond aux icones à gauche de chaque rubrique */
header nav ul li .sous_menu li img[src*="img/icons"] {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

/* Correspond à chaque rubrique des sous menus */
header nav ul li .sous_menu li button,
header nav ul li .sous_menu li a {
    color: rgb(0, 20, 73);
    font-size: .9em;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

header nav ul li .sous_menu li a {
    padding: 6px 0;
}

header nav ul li .sous_menu li button {
    background: none;
    padding: 10px 0;
}

header nav ul li .sous_menu li:hover {
    background-color: rgba(125, 200, 218, .4);
    border-radius: 5px;
    transition: all ease .2s;
}

/* Correspond à chaque menu déroulant à l'interieur des sous menus */
header nav ul li .sous_menu .rubrique_deroulante {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 90%;
    margin-top: -10px;
    position: relative;
    gap: 5px;
}

header nav ul li .sous_menu .rubrique_deroulante li:first-child {
    margin-top: 8px;
}

/* Correspond à chaque ligne des menus déroulants à l'interieur des sous menus */
header nav ul li .sous_menu .rubrique_deroulante li {
    display: flex;
    width: max-content;
    height: max-content;
}

/* Correspond à chaque rubrique des menus déroulants à l'interieur des sous menus */
header nav ul li:hover .sous_menu .rubrique_deroulante li a {
    color: rgb(0, 20, 73);
    font-size: .9em;
    height: max-content;
    padding: 3px 0;
}

header nav ul li .sous_menu .rubrique_deroulante:not(:last-child) li:last-child {
    margin-bottom: 8px;
}


/* FIN HEADER */


/* HOVER BUTTONS */

.hover_buttons ul {
    position: fixed;
    top: 60vh;
    right: -250px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1;
}

.hover_buttons ul li {
    width: 300px;
    background-color: rgba(42, 76, 181, 0.9);
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 50px 0 0 50px;
    box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.75);
    transition: all ease 0.3s;
}

.hover_buttons ul li:hover {
    transform: translateX(-200px);
    transition: all ease 0.5s;
}

.hover_buttons ul li img {
    width: 30px;
    margin-left: 10px;
}

.hover_buttons ul li a {
    color: whitesmoke;
    display: flex;
    align-items: center;
    margin-left: 30px;
}

/* FIN HOVER BUTTONS */


.grande_image_container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6% 0;
}


/* Pattern des pages solutions */
.title_container {
    display: flex;
    max-width: 2000px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100vw;
    min-height: 42vh;
    max-height: 400px;
    /*margin-top: 149px;*/
    margin-top: 120px;
    margin-bottom: 50px;
    padding: 25px 0;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(3, 94, 192, 1);
    background-image: url("../img/background_cut_top_bottom_filter_blue.png");
}

.title_container .title {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 25px;
    border-radius: 15px;

}

.title_container h1 {
    width: 100%;
    font-size: 3.5em;
    font-weight: 600;
    color: white;
    text-align: center;
}

.title_container h2 {
    font-size: 1.6em;
    font-weight: 600;
    color: rgb(1, 166, 207);
    text-shadow: rgb(0, 20, 73) 0px 0 5px;
    text-align: center;
    width: 75%;
}

.content {
    display: flex;
    justify-content: center;
    width: 67%;
    font-size: 1.1em;
    /*background: white;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.25);*/
    border-radius: 10px;
    padding: 40px;
    padding-bottom: 50px;
}

.content .ancre {
    margin-top: -8%;
}

.content h2 {
    font-size: 1.7em;
    color: rgba(42, 76, 181, 0.9);
    margin-bottom: 15px;
}

.content .categorie_title h2 {
    font-size: 2.1em;
    color: rgba(0, 20, 73, 1);
    margin-bottom: 15px;
}

.content .categorie_title p {
    text-align: justify;
    line-height: 130%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 17px;
}

.content table ul {
    margin: 2% 0 0 0;
}

.content ul {
    margin: 0;
}

.content table ul li:first-child {
    margin: 20px 0 15px 0;
}

.content ul li:first-child {
    margin: 15px 0 0 0;
}

.content ul li {
    margin: 15px 0 0 0;
    line-height: 130%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
}

.content .small-list li {
    list-style: inside;
    padding: 0 15px;
    margin-top: 10px;
}

.content p {
    text-align: justify;
    line-height: 140%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
}

.content .outbox-p {
    margin: 40px 0 0 0
}

.content p a {
    font-weight: 700;
    transition: all ease .2s;
}

.content p a:hover {
    color: rgb(1, 166, 207);
    transition: all ease .2s;
}

.content img {
    width: 85%;
}

.content table {
    margin-top: 16%;
}

.content .last {
    margin-bottom: 50px;
}

.content table tr {
    display: flex;
    justify-content: space-between;
}

.content table tr td {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
}

.content table tr td:has(img) {
    width: 35%;
}

.content table tr td:has(p) {
    width: 65%;
}


.basic_container {
    width: auto;
    border: 1px solid rgba(0, 20, 73, .0);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.25);
    background-color: white;
}


.dark_container {
    margin: 8vh 0;
    color: #0E1726;
    width: 75vw;
    max-height: 55vh;
    max-width: 1500px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: rgb(0, 20, 73);
    border-radius: 10px;
    padding: 60px 20px;
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
}

.dark_container .image {
    width: 26vw;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark_container .image img {
    width: 26vw;
    max-width: 450px;
    border-radius: 15px;
}

.dark_container .text {
    width: 40vw;
}

.dark_container h2 {
    color: #FEFEFE;
    padding-top: 20px;
    font-size: 35px;
}

.dark_container h3 {
    color: #FEFEFE;
    font-size: 20px;
    color: turquoise;
}

.dark_container p {
    color: #FEFEFE;
    line-height: 150%;
    padding: 30px 20px 20px 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 17px;
}



footer {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: no-repeat url('../img/background_cut_top_bottom_filter_blue.png');
    background-size: cover;
    border-top: 3px solid rgb(51, 89, 160);
}

footer .footer_container {
    width: 65vw;
    max-width: 2000px;
    height: auto;
    padding: 6vh 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

footer .footer_container table {
    width: 100%;
}

footer .footer_container table tbody {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: start;
}

footer .footer_container #footer_logo {
    width: calc(75px + 6vw);
    margin-bottom: 25px;
    margin-left: 2%;
}

footer .footer_container table tr {
    display: flex;
    align-items: start;
    justify-content: space-around;
    flex-direction: row;
    width: 50%;
}

footer .footer_container table tr td {
    width: max-content;
}

footer .footer_container table tr td #num_tel {
    margin: 5px 0
}

footer .footer_container table tr td #title_agence {
    margin-top: 50px;
}

footer .footer_container table tr td a img {
    width: 30px;
    margin-bottom: 25px;
}

footer .footer_container table tr td p {
    color: whitesmoke;
    font-size: .8em;
    font-weight: 400;
}

footer .footer_container table tr td h2 {
    color: rgba(125, 200, 218, 1);
    text-shadow: rgba(125, 200, 218, 1) 0px 0 5px;
    font-size: 1.2em;
    font-weight: 400;
}

footer .footer_container table tr td ul {
    display: flex;
    flex-direction: column;
    gap: 2vh
}

footer .footer_container table tr td ul li:first-child {
    margin-top: 1vh;
}

footer .footer_container table tr td ul li a {
    color: whitesmoke;
    font-size: 0.8em;
    font-weight: 300;
    cursor: pointer;
}

footer .footer_container table tr td ul li a:hover {
    color: rgba(125, 200, 218, 1);
}





footer .footer_container table tr td .nos_solutions li button {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    padding-left: 2px;
    background: none;
    border: none;
    color: whitesmoke;
    font-weight: 500;
}

footer .footer_container table tr td .nos_solutions li button img {
    width: 10px;
    padding-left: 5px;
}

footer .footer_container table tr td .nos_solutions li button img[src*="img/fleche_navbar_bleuclair.png"] {
    display: none;
}

footer .footer_container table tr td .nos_solutions li button:hover img[src*="img/fleche_navbar_bleuclair.png"] {
    display: block;
}

footer .footer_container table tr td .nos_solutions li button:hover img[src*="img/fleche_navbar.png"] {
    display: none;
}

footer .footer_container table tr td .nos_solutions li .sous_rubrique_deroulante_footer li:first-child {
    margin-top: 0vh;
}

footer .footer_container table tr td .nos_solutions li .sous_rubrique_deroulante_footer li:last-child {
    margin-bottom: 1vh;
}

footer .footer_container table tr td .nos_solutions li button:hover {
    color: rgba(125, 200, 218, 1);
}

footer .footer_container table tr td .nos_solutions .rubrique_deroulante_footer {
    display: none;
    margin-left: 15px;
    gap: 0.3vh;
}

footer .footer_container table tr td .nos_solutions .sous_rubrique_deroulante_footer {
    display: none;
    margin-left: 15px;
    gap: 0vh;
}






footer .bottom_footer {
    width: calc(100vw - 4vh);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vh;
    border-top: 1px solid rgba(125, 200, 218, 1);
    box-shadow: 4px 8px 30px 0px rgba(125, 200, 218, 1);
    background-color: rgb(0, 0, 40);
}

footer .bottom_footer ul {
    width: 90vw;
    max-width: 2250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .bottom_footer ul li {
    color: rgba(125, 200, 218, 1);
    font-size: .7em;
    font-weight: 300;
    width: 25vw;
}

footer .bottom_footer ul li p {
    color: rgba(125, 200, 218, 1) !important;
}

footer .bottom_footer #bottom_footer_right {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
    gap: 1.5vw;
    width: 70vw;
}

footer .bottom_footer #bottom_footer_right li {
    width: fit-content;
}

footer .bottom_footer #bottom_footer_right li a {
    color: rgba(125, 200, 218, 1);
}