@font-face {
    font-family: "NuritoBlack";
    src: url("ressources/font/NunitoSans-Black.ttf");
}

@font-face {
    font-family: "NuritoExtraBold";
    src: url("ressources/font/NunitoSans-ExtraBold.ttf");
}

@font-face {
    font-family: "NuritoBold";
    src: url("ressources/font/NunitoSans-Bold.ttf");
}

@font-face {
    font-family: "NuritoSemiBold";
    src: url("ressources/font/NunitoSans-SemiBold.ttf");
}

@font-face {
    font-family: "NuritoRegular";
    src: url("ressources/font/NunitoSans-Regular.ttf");
}


/* ===================================== */
/* ===================================== */
/* ============== GENERAL ============== */
/* ===================================== */
/* ===================================== */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    margin: 0;
    font-family: "NuritoRegular";
    font-size: 14px;
    color: #1F2845;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #1F2845;
}

p {
    margin: 0;
}

p a {
    color: #0B5CDF;
    text-decoration: underline;
}



.gros-texte {
    font-family: "NuritoBold";
    font-size: 2em;    
    margin: 0 0 0.5em;
}

.gros-texte span {
    color: #0B5CDF;
}

h3 {
    font-family: "NuritoExtraBold";
    text-transform: uppercase;
    font-size: 4em;
    margin: 0 0 0.5em;
}

h4 {
    font-family: "NuritoBold";
    font-size: 2em; 
    margin: 0 0 0.5em;
}

h5 {
    font-family: "NuritoBold";
    font-size: 1.2em; 
    color: #E3323B;
    margin: 0;
    margin: 1.5em 0 0.2em;
}



/* Bouton vide à bord rouge */
button {
    font-family: "NuritoSemiBold";
    font-size: 1em;
    border-radius: 100px;
    padding: 1em 1.5em;
    cursor: pointer;
    animation-duration: 0.3s;
    color: #E3323B;
    background: none;
    border: solid 2px #E3323B;
}

button:hover {
    color: white;
    border-color: white;
    background: linear-gradient(#F75443, #CF1133);
}

@keyframes clickBouton {
    0% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0 0 0 5px rgba(227, 50, 59, 0.3);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(227, 50, 59, 0.3), 0 0 0 10px rgba(227, 50, 59, 0.3);
    }
}

button:active {
    border-color: rgba(227, 50, 59, 0.3);
    box-shadow: 0 0 0 5px rgba(227, 50, 59, 0.3), 0 0 0 10px rgba(227, 50, 59, 0.3);
    animation-name: clickBouton;
}


/* Bouton rouge */

.bouton-rouge {
    color: white;
    border: none;
    margin: 2px;
    background: linear-gradient(#F75443, #CF1133);
}

.bouton-rouge:hover {
    background: linear-gradient(#333, #000);
}

@keyframes clickBoutonRouge {
    0% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0 0 0 5px rgba(26, 26, 26, 0.3);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(26, 26, 26, 0.3), 0 0 0 10px rgba(26, 26, 26, 0.3);
    }
}

.bouton-rouge:active {
    box-shadow: 0 0 0 5px rgba(26, 26, 26, 0.3), 0 0 0 10px rgba(26, 26, 26, 0.3);
    animation-name: clickBoutonRouge;
}


/* Bouton bleu */

.bouton-bleu {
    color: #0B5CDF;
    border-color: #0B5CDF;
}

.bouton-bleu:hover {
    color: white;
    border: none;
    margin: 4px;
    background: linear-gradient(#0C69FF, #0951BC);
}

@keyframes clickBoutonBleu {
    0% {
        box-shadow: none;
    }

    25% {
        box-shadow: 0 0 0 5px rgba(11, 92, 223, 0.3);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(11, 92, 223, 0.3), 0 0 0 10px rgba(11, 92, 223, 0.3);
    }
}

.bouton-bleu:active {
    border-color: rgba(11, 92, 223, 0.3);
    box-shadow: 0 0 0 5px rgba(11, 92, 223, 0.3), 0 0 0 10px rgba(11, 92, 223, 0.3);
    animation-name: clickBoutonBleu;
}





/* ===================================== */
/* ===================================== */
/* ============== CLASSES ============== */
/* ===================================== */
/* ===================================== */

.displayFlex {
    display: flex;
}

.directionColumn {
    flex-direction: column;
}

.justifyContentBetween {
    justify-content: space-between;
}

.justifyContentCenter {
    justify-content: center;
}

.alignItemsCenter {
    align-items: center;
}

.flex1 {
    flex: 1;
}

.flexWrap {
    flex-wrap: wrap;
}



.maxWidth {
    max-width: 1650px;
    margin: 0 auto;
    padding: 0 30px;
}

.maxWidthMedium {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 30px;
}

.maxWidthSmall {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 30px;
}

.spaceTop120 {
    margin-top: 6em;
}

.spaceBottom120 {
    margin-bottom: 6em;
}

.spaceBottom250 {
    margin-bottom: 12.5em;
}

.gridRow2, .gridRow3, .gridRow4, .gridRow5, .gridRow6 {
    display: grid;
    gap: 1em;
}

.gridRow2 {
    grid-template-columns: repeat(2, 1fr);
}

.gridRow3 {
    grid-template-columns: repeat(3, 1fr);
}

.gridRow4 {
    grid-template-columns: repeat(4, 1fr);
}

.gridRow5 {
    grid-template-columns: repeat(5, 1fr);
}

.gridRow6 {
    grid-template-columns: repeat(6, 1fr);
}



.div-fond-gris {
    position: relative;
}

.div-fond-gris > div:nth-child(1) {
    background-color: #EEF1F6;
    position: absolute;
    height: 100%;
    width: 70%;
    z-index: -1;
}

.div-fond-gris .div-fond-gris-droit {
    right: 0;
}

.div-fond-gris > div:nth-child(2) {
    padding: 5em 0;
}



.div-titre-principal {
    font-size: 0.4em;
    height: 9.7em;
}

.div-titre-principal h3 {
    display: inline;
    font-family: "NuritoBlack";
    font-size: 6.5em;
    margin: 0;
    color: #CEDEF9;
    text-transform: uppercase;
    position: relative;
}

.div-titre-principal > div:nth-child(2) {
    position: relative;
    bottom: 4em;
}

.div-titre-principal p {
    display: inline;
    font-family: "NuritoExtraBold";
    font-size: 3.5em;
    margin: 0;
    position: relative;
}





/* ==================================== */
/* ==================================== */
/* ============== HEADER ============== */
/* ==================================== */
/* ==================================== */

header {
    overflow-x: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    background-color: rgba(31,40,69,0.8);
    color: white;
}



/* ------------------------------ */
/* -------- Arrière-plan -------- */
/* ------------------------------ */

header .iframe-animation-entete {
    z-index: -1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
}



/* ---------------------------- */
/* -------- Navigation -------- */
/* ---------------------------- */

header .div-nav-fixe {
    position: relative;
    height: 4.5em;
}

header nav {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    font-family: "NuritoSemiBold";
    transition: height 0.3s ease-in-out;
}

header nav > div {
    display: flex;
    justify-content: space-between;
}

/* Logo */
header nav > div > .div-logo a {
    display: flex;
    margin: 0.75em 0;
}

header nav > div > .div-logo img {
    height: 3em;
}

/* Listes rubriques menu */
header nav > div > ul {
    display: none;
    align-items: center;
}

header nav > div > ul > li {
    height: 100%;
    box-sizing: border-box;
}

header nav > div > ul > li a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1em;
    box-sizing: border-box;
    color: white;
    transition: color 0.2s ease-in-out;
}

header nav > div > ul > li a:hover {
    color: #6E8EC6;
}

header nav > div > ul > a {
    margin-left: 1em;
}

/* Menu burger */
header nav > div > .div-menu-burger {
    display: flex;
    align-items: center;
    margin: 0.75em 0;
    height: 3em;
}

header nav > div > .div-menu-burger > div {
    width: 3em;
    height: 2em;
    cursor: pointer;
    position: relative;
}

header nav > div > .div-menu-burger > div span {
    display: block;
    width: 100%;
    height: 0.25em;
    border-radius: 2.5px;
    background-color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s ease-in-out; /* anim affichage barre milieu du burger */
}

header nav > div > .div-menu-burger > div span::before, header nav > div > .div-menu-burger > div span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.25em;
    border-radius: 2.5px;
    background-color: white;
    transition: transform 0.4s ease-in-out /* anim rotation barres de la croix *//*, background-color 3s ease-in-out*/;
}

header nav > div > .div-menu-burger > div span::before {
    transform: translateY(-0.75em);
}

header nav > div > .div-menu-burger > div span::after {
    transform: translateY(0.75em);
}

/* Animations aux clics */
header nav > div > .div-menu-burger > div.open span {
    background-color: transparent;
}

header nav > div > .div-menu-burger > div.open span::before {
    transform: translateY(0px) rotateZ(45deg);
}

header nav > div > .div-menu-burger > div.open span::after {
    transform: translateY(0px) rotateZ(-45deg);
}



/* Menu dynamique */
@keyframes animNavMobile {
    0% {
        top: -90px;
    }
    
    100% {
        top: 0px;
    }
}

header .navDynamique {
    position: fixed;
    background-color: white;
    box-shadow: 0px -8px 10px #1a1a1a;
    animation-duration: 0.8s;
    animation-name: animNavMobile;
}

header .navDynamique li {
    box-sizing: border-box;
    border-bottom: solid 5px white;
}

header .navDynamique li a {
    color: #1F2845;;
    /*transform: color 10s ease;*/
}

header .navDynamique .active {
    box-sizing: border-box;
    border-bottom: solid 5px #E3323B;
}

header .navDynamique .active a {
    color: #E3323B;
}

header .navDynamique > div > .div-menu-burger > div span {
    background-color: #1F2845;
}

header .navDynamique > div > .div-menu-burger > div span::before, header .navDynamique > div > .div-menu-burger > div span::after {
    background-color: #1F2845;
}

/* Menu responsive */
header .navResponsive {
    position: fixed;
    background-color: white;
    height: 100vh;
}

header .navResponsive > div > ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 90px 0;
}

header .navResponsive > div > ul > li {
    border: none;
    margin-bottom: 1em;
}

header .navResponsive > div > ul > li a {
    color: #1F2845;
    padding: 1em 1.5em;
}

header .navResponsive > div > ul > .active {
    border: none;
}

header .navResponsive > div > ul > .active a {
    color: #1F2845;
}

header .navResponsive > div > ul > a {
    margin-left: 0;
}

header .navResponsive > div > .div-menu-burger > div span {
    background-color: #1F2845;
}

header .navResponsive > div > .div-menu-burger > div span::before, header .navResponsive > div > .div-menu-burger > div span::after {
    background-color: #1F2845;
}





/* ----------------------- */
/* -------- Titre -------- */
/* ----------------------- */

header .div-titre {
    margin: 5em 0 8em;
}

header .div-titre h1 {
    display: flex;
    flex-direction: column;
    font-family: "NuritoBlack";
    font-size: 3em;
    color: white;
    margin: 0;
    line-height: 1.25em;
}

header .div-titre h1 span {
    font-size: 1.25em;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 0.01em white;
}

header .div-titre p {
    font-family: "NuritoSemiBold";
    font-size: 1.3em;
}


header .div-titre h2 {
    display: flex;
    flex-direction: column;
    font-family: "NuritoBlack";
    font-size: 2em;
    margin: 0;
    color: white;
    text-align: center;
}

header .div-titre h2 span {
    font-family: "NuritoSemiBold";
    font-size: 0.5em;
}



/* ------------------------- */
/* -------- Options -------- */
/* ------------------------- */

header .div-options {
    margin-bottom: 1.5em;
}

header .div-options > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .div-options .div-contact {
    display: flex;
}

header .div-options .div-contact div:nth-child(1) {
    margin-right: 1em;
}

header .div-options .div-contact > div a {
    display: flex;
}

header .div-options .div-contact > div img {
    height: 2.5em;
}



header .div-options .div-mode {
    display: flex;
    align-items: center;
}

header .div-options .div-mode > div {
    display: flex;
}

header .div-options .div-mode > div:nth-child(1) img {
    height: 35px;
}

header .div-options .div-mode > div:nth-child(2) img {
    height: 30px;
    margin-left: 1em;
}





/* ================================== */
/* ================================== */
/* ============== MAIN ============== */
/* ================================== */
/* ================================== */

.div-return-top {
    text-align: right;
    position: sticky;
    bottom:0;
}

.div-return-top button {
    padding: 1em;
    margin: 0 1em 1em 0;
}

.div-return-top div {
    height: 1.5em;
}

.div-return-top img {
    width: 1.5em;
}



/* ------------------------------ */
/* -------- Présentation -------- */
/* ------------------------------ */

.section-presentation > div .div-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 2em;
}

.section-presentation > div .div-image img {
    width: 100%;
    max-width: 400px;
}

.section-presentation > div .div-details button {
    margin-top: 2em;
}

.section-presentation > div .div-details > div a:nth-child(1) button  {
    margin-right: 1em;
}



/* --------------------------------------- */
/* -------- Réalisation & Projets -------- */
/* --------------------------------------- */

#page-realisations .div-liste-realisations .div-realisation,
#page-projets .div-liste-projets .div-projet {
    display: grid;
    gap: 1em 2.5em;
    grid-template-columns: repeat(1, 1fr);
}

#page-realisations .div-liste-realisations .div-realisation .div-illustration,
#page-projets .div-liste-projets .div-projet .div-illustration {
    display: flex;
    justify-content: center;
}

#page-realisations .div-liste-realisations .div-realisation .div-illustration img,
#page-projets .div-liste-projets .div-projet .div-illustration img {
    width: 100%;
    max-width: 400px;
}

#page-realisations .div-liste-realisations .div-realisation .div-illustration .div-annee,
#page-projets .div-liste-projets .div-projet .div-details .div-annee {
    font-family: "NuritoExtraBold";
    font-size: 2.5em;
    color: #0B5CDF;
}

#page-realisations .div-liste-realisations .div-realisation .div-details,
#page-projets .div-liste-projets .div-projet .div-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#page-realisations .div-liste-realisations .div-realisation .div-details > div a:nth-child(1) button,
#page-projets .div-liste-projets .div-projet .div-details > div a:nth-child(1) button {
    margin-right: 1em;
}

#page-realisations .div-liste-realisations .div-realisation .div-details .div-tags,
#page-projets .div-liste-projets .div-projet .div-details .div-tags {
    text-transform: uppercase;
    margin-bottom: 1.5em;
}

#page-realisations .div-liste-realisations .div-realisation .div-details button,
#page-projets .div-liste-projets .div-projet .div-details button {
    margin-top: 2em;
}





/* -------------------------------------- */
/* -------------------------------------- */
/* --------------- ACCUEIL -------------- */
/* -------------------------------------- */
/* -------------------------------------- */

#page-accueil .section-realisations .div-apercu-realisations > div:nth-child(2) > div,
#page-accueil .section-projets .div-apercu-projets > div:nth-child(2) > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page-accueil .section-realisations .div-apercu-realisations .div-liste-realisations,
#page-accueil .section-projets .div-apercu-projets .div-liste-projets {
    display: grid;
    gap: 1em;
}

#page-accueil .section-realisations .div-apercu-realisations .div-liste-realisations img,
#page-accueil .section-projets .div-apercu-projets .div-liste-projets img {
    width: 100%;
}

#page-accueil .section-realisations .div-apercu-realisations button,
#page-accueil .section-projets .div-apercu-projets button {
    margin-top: 3em;
}

#page-accueil .section-realisations .div-apercu-realisations button:hover,
#page-accueil .section-projets .div-apercu-projets button:hover {
    border-color: #EEF1F6;
}

#page-accueil .section-realisations .div-apercu-realisations button:active,
#page-accueil .section-projets .div-apercu-projets button:active {
    border-color: rgba(227, 50, 59, 0.3);
}


/* ------------------------------ */
/* -------- Réalisations -------- */
/* ------------------------------ */

#page-accueil .section-realisations .div-apercu-realisations .div-liste-realisations {
    grid-template-columns: repeat(1, 1fr);
}


/* ------------------------ */
/* -------- Projet -------- */
/* ------------------------ */

#page-accueil .section-projets .div-apercu-projets .div-liste-projets {
    grid-template-columns: repeat(1, 1fr);
}



/* -------------------------------------- */
/* -------------------------------------- */
/* --------------- PROFIL --------------- */
/* -------------------------------------- */
/* -------------------------------------- */

/* ------------------------------ */
/* -------- Présentation -------- */
/* ------------------------------ */

#page-profil .section-presentation > div .div-image {
    box-shadow: 0.25px 0.25px 1.5em #D3D3D3;
    padding: 1.2em 1.2em 2em;
    max-width: 400px;
}

#page-profil .section-presentation > div > .div-image > div:nth-child(2) {
    text-align: center;
    margin-top: 1.2em;
    width: 100%;
}

#page-profil .section-presentation > div > .div-image > div:nth-child(2) p:nth-child(1) {
    font-family: "NuritoSemiBold";
    font-size: 1.5em;
    margin-bottom: 0.5em;
}


/* ------------------------------- */
/* -------- CV interactif -------- */
/* ------------------------------- */

#page-profil .section-cv-interactif {
    background-image: url("ressources/img/illustrations/CV-INTERACTIF-arriere-plan.png");
    background-position: center;
    background-size: cover;
}

#page-profil .section-cv-interactif > div {
    padding: 10em 0;
    background-color: rgba(11, 92, 223, 0.5);
    width: 100%;
    height: 100%;
}

#page-profil .section-cv-interactif img {
    width: 25em;
}

#page-profil .section-cv-interactif button {
    margin-top: 4em;
}


/* -------------------------- */

#page-profil .section-qualites .div-qualites,
#page-profil .section-competences .div-competences {
    text-align: center;
}

#page-profil .section-qualites .div-qualites .div-liste-qualites,
#page-profil .section-competences .div-competences .div-liste-competences {
    display: grid;
    gap: 1em;
}

#page-profil .section-qualites .div-qualites .div-liste-qualites img,
#page-profil .section-competences .div-competences .div-liste-competences img {
    height: 6em;
}

#page-profil .section-qualites .div-qualites .div-liste-qualites > div,
#page-profil .section-competences .div-competences .div-liste-competences > div {
    padding: 3em 1em;
}

/* -------------------------- */
/* -------- Qualites -------- */
/* -------------------------- */

#page-profil .section-qualites .div-qualites .div-liste-qualites {
    grid-template-columns: repeat(1, 1fr);
}

#page-profil .section-qualites .div-qualites .div-liste-qualites > div {
    background-color: white;
    box-shadow: 5px 5px 20px #D3D3D3;
}


/* ----------------------------- */
/* -------- Competences -------- */
/* ----------------------------- */

#page-profil .section-competences .div-competences .div-liste-competences {
    grid-template-columns: repeat(2, 1fr);
}

#page-profil .section-competences .div-competences button {
    margin-top: 2em;
}

#page-profil .section-competences .div-competences button:hover {
    border-color: #EEF1F6;
}

#page-profil .section-competences .div-competences button:active {
    border-color: rgba(227, 50, 59, 0.3);
}





/* ------------------------- */
/* -------- Contact -------- */
/* ------------------------- */

#page-profil .section-contact img {
    width: 400px;
}

#page-profil .section-contact > div > div > div:nth-child(2) {
    margin-left: 2.5em;
}

#page-profil .section-contact button {
    margin-top: 2em;
}



/* -------------------------------------- */
/* -------------------------------------- */
/* ------------ REALISATIONS ------------ */
/* -------------------------------------- */
/* -------------------------------------- */

/* ------------------------- */
/* -------- Filtres -------- */
/* ------------------------- */

#page-realisations .div-filtres {
    display: flex;
    flex-wrap: wrap;
}

#page-realisations .div-filtres .bouton-bleu {
    display: flex;
    align-items: center;
    margin: 0;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

#page-realisations .div-filtres .bouton-bleu svg {
    height: 1.3em;
    fill: #0B5CDF;
    margin-right: 0.5em;
}

#page-realisations .div-filtres .bouton-bleu:hover svg {
    fill: white;
}

#page-realisations .div-filtres .active {
    color: white;
    background: linear-gradient(#0C69FF, #0951BC);
    border: none;
}

#page-realisations .div-filtres .active svg {
    fill: white;
}


/* ----------------------------- */
/* -------- Realisation -------- */
/* ----------------------------- */

#page-realisations .div-liste-realisations .div-realisation .div-illustration p {
    writing-mode : vertical-rl;
}

/* -------------------------------------- */
/* -------------------------------------- */
/* --------------- PROJETS -------------- */
/* -------------------------------------- */
/* -------------------------------------- */

#page-projets .div-liste-projets .div-projet .div-details .div-annee {
    font-size: 1.5em;
}



/* -------------------------------------- */
/* -------------------------------------- */
/* -------------- CONTACT --------------- */
/* -------------------------------------- */
/* -------------------------------------- */

/* ----------------------------- */
/* ------- Moyen contact ------- */
/* ----------------------------- */

#page-contact .section-moyen-contact > div .div-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 2em;
}

#page-contact .section-moyen-contact > div .div-image img {
    width: 100%;
    max-width: 400px;
}

#page-contact .section-moyen-contact > div .div-details .div-contact {
    display: flex;
    align-items: center;
}

#page-contact .section-moyen-contact > div .div-details .div-contact:nth-child(2) {
    margin-bottom: 1em;
}

#page-contact .section-moyen-contact > div .div-details .div-contact img {
    height: 2.5em;
    margin-right: 1em;
}

#page-contact .section-moyen-contact > div .div-details a {
    color: #0B5CDF;
    text-decoration: underline;
}



/* ----------------- */
/* ------ FAQ ------ */
/* ----------------- */

#page-contact .div-discussion img {
    height: 2.5em;
    border-radius: 50%;
}

#page-contact .div-discussion > div {
    display: flex;
    margin-bottom: 1.5em;
}

#page-contact .div-discussion p {
    max-width: 900px;
    padding: 0.8em 1em;
}


#page-contact .div-discussion .div-question p {
    background-color: #CEDEF9;
    border-radius: 1.5em 0.2em 1.5em 1.5em;
}

#page-contact .div-discussion .div-question {
    justify-content: flex-end;
}

#page-contact .div-discussion .div-question img {
    margin-left: 1em;
    order: 1;
}


#page-contact .div-discussion .div-reponse p {
    background-color: #EEF1F6;
    border-radius: 0.2em 1.5em 1.5em 1.5em;
}

#page-contact .div-discussion .div-reponse img {
    margin-right: 1em;
}





/* ----------------------------------------- */
/* ----------------------------------------- */
/* -------------- PROCESSING --------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */

#page-processing header {
    min-height: auto;
}

#page-processing header .navDynamique {
    animation: none;
}

#page-processing .section-activite > div {
    display: grid;
    gap: 2.5em 1.25em;
    grid-template-columns: repeat(2, 1fr);
}

#page-processing .section-activite > div > div {
    box-shadow: 5px 5px 20px #D3D3D3;
    max-width: 400px;
    margin: 0 auto;
}

#page-processing .section-activite img {
    width: 100%;
}

#page-processing .section-activite > div > div > a > div:nth-child(2) {
    text-align: center;
    padding: 1em 1em 1.5em;
}

#page-processing .section-activite h5 {
    margin-top: 0;
}





/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* -------------- DETAIL REALISATION --------------- */
/* ------------------------------------------------- */
/* ------------------------------------------------- */

#page-detail-projet header {
    min-height: auto;
}

#page-detail-projet header .navDynamique {
    animation: none;
}



#page-detail-projet .section-entete {
    position: relative;
}

#page-detail-projet .section-entete .div-image {
    display: flex;
    justify-content: center;
}

#page-detail-projet .section-entete .div-image > div {
    z-index: -1;
    background-position: center;
    background-size: cover;
    filter: blur(50px);
    position: absolute;
    width: 100%;
    height: 100%;
}


#page-detail-projet .section-entete .div-image img {
    height: auto;
    max-height: calc(100vh - 2em - 4.5em );
    max-width: calc(100% - 2em);
    padding: 1em;
}


#page-detail-projet .section-entete .div-titre {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#page-detail-projet .section-entete .div-titre > div {
    max-width: 1200px;
    margin: auto;
}

#page-detail-projet .section-entete .div-titre > div > div {
    padding: 1.35em 2em;
    max-width: 600px;
}

#page-detail-projet .section-entete .div-titre h2 {
    font-size: 2em;
    font-family: "NuritoExtraBold";
    display: inline;
    padding: .25em 0;
    background: white;
    box-shadow: 0.5em 0 0 white, -0.5em 0 0 white;
    line-height: 1.5em;
}



#page-detail-projet .section-infos-principales {
    position: relative;
}

#page-detail-projet .section-infos-principales .div-fond-gris-haut {
    background-color: #EEF1F6;
    position: absolute;
    height: calc(100% - 150px - 5em);
    width: 100%;
    z-index: -1;
}

#page-detail-projet .section-infos-principales > div:nth-child(2) {
    padding: 5em 0;
}

#page-detail-projet .section-infos-principales .div-infos {
    display: grid;
    gap: 1em;    
    grid-template-columns: 1fr 1fr 2fr;
}

#page-detail-projet .section-infos-principales .div-infos p {
    text-transform: uppercase;
}

#page-detail-projet .section-infos-principales .div-mockups {
    display: flex;
    justify-content: center;
}

#page-detail-projet .section-infos-principales .div-mockups img {
    height: 300px;
    margin-top: 3em;
}


#page-detail-projet .section-description > div {
    display: flex;
}

#page-detail-projet .section-description h3 {
    writing-mode : vertical-rl;
    margin-right: 0.5em;
}



#page-detail-projet .section-explication > div > div > div > div {
    margin-bottom: 2em;
}

#page-detail-projet .section-explication > div > div > div > div:nth-last-child(1) {
    margin-bottom: 0;
}

#page-detail-projet .section-explication img {
    width: 100%;
}



#page-detail-projet .div-article-suivant-precedent > div {
    display: grid;
    gap: 1em 2.5em;
    grid-template-columns: repeat(2, 1fr);
}

#page-detail-projet .div-article-suivant-precedent > div > div a {
    display: flex;
    box-shadow: 0.25px 0.25px 1.5em #D3D3D3;
}

#page-detail-projet .div-article-suivant-precedent > div > div img {
    width: 40%;
}

#page-detail-projet .div-article-suivant-precedent > div > div h2 {
    margin: auto 0.6em;
}

#page-detail-projet .div-article-suivant-precedent > div > div:nth-child(2) img {
    order: 1;
}





/* ==================================== */
/* ==================================== */
/* ============== FOOTER ============== */
/* ==================================== */
/* ==================================== */

footer {
    overflow-x: hidden;
    color: white;
    text-align: center;
    position: relative;
    bottom: -3px;
}

footer > div:nth-child(1) {
    background-color: #1F2845;
    font-family: "NuritoSemiBold";
}

footer > div:nth-child(1) > div {
    padding: 3em 0 3.5em;
}

footer > div:nth-child(1) img {
    height: 3em;
    margin-bottom: 2em;
}

footer > div:nth-child(1) ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer > div:nth-child(1) li {
    margin-bottom: 0.5em;
}

footer > div:nth-child(1) a {
    color: white;
}

footer > div:nth-child(2) {
    background-color: #0B5CDF;
    font-size: 0.8em;
}

footer > div:nth-child(2) p {
    padding: 1em 0;
}















/* =============================================== */
/* =============================================== */
/* ============== RESPONSIVE DESIGN ============== */
/* =============================================== */
/* =============================================== */

@media (min-width: 425px) {

    /* ===================================== */
    /* ===================================== */
    /* ============== GENERAL ============== */
    /* ===================================== */
    /* ===================================== */

    .div-titre-principal {
        font-size: 0.6em;
    }

    

    /* ==================================== */
    /* ==================================== */
    /* ============== HEADER ============== */
    /* ==================================== */
    /* ==================================== */

    /* ----------------------- */
    /* -------- Titre -------- */
    /* ----------------------- */

    header .div-titre h1 {
        font-size: 4em;
    }

    header .div-titre h2 {
        font-size: 3em;
    }



    /* ==================================== */
    /* ==================================== */
    /* ============== FOOTER ============== */
    /* ==================================== */
    /* ==================================== */

    footer > div:nth-child(1) ul {
        display: flex;
        flex-direction: row;
    }

    footer > div:nth-child(1) li {
        margin-bottom: 0;
        margin-right: 1em;
    }

    footer > div:nth-child(1) li:last-child {
        margin-right: 0;
    }

}



/* TABLETTE */
@media (min-width: 768px) {

    /* ===================================== */
    /* ===================================== */
    /* ============== GENERAL ============== */
    /* ===================================== */
    /* ===================================== */

    body {
        font-size: 16px;
    }
    
    .div-titre-principal {
        font-size: 0.8em;
    }



    /* ==================================== */
    /* ==================================== */
    /* ============== HEADER ============== */
    /* ==================================== */
    /* ==================================== */

    /* ----------------------- */
    /* -------- Titre -------- */
    /* ----------------------- */

    header .div-titre h1 {
        font-size: 5em;
    }

    header .div-titre h2 {
        font-size: 4em;
    }

    /* ================================== */
    /* ================================== */
    /* ============== MAIN ============== */
    /* ================================== */
    /* ================================== */

    /* ------------------------------ */
    /* -------- Présentation -------- */
    /* ------------------------------ */

    .section-presentation > div {
        display: flex;
        align-items: center;
    }

    .section-presentation > div .div-image {
        margin: 0 2.5em 0 0;
    }
    
    .section-presentation > div .div-image img {
        width: 300px;
    }



    /* -------------------------------------- */
    /* -------------------------------------- */
    /* --------------- ACCUEIL -------------- */
    /* -------------------------------------- */
    /* -------------------------------------- */

    /* ------------------------------ */
    /* -------- Réalisations -------- */
    /* ------------------------------ */

    #page-accueil .section-realisations .div-apercu-realisations .div-liste-realisations {
        grid-template-columns: repeat(3, 1fr);
    }


    /* ------------------------ */
    /* -------- Projet -------- */
    /* ------------------------ */

    #page-accueil .section-projets .div-apercu-projets .div-liste-projets {
        grid-template-columns: repeat(2, 1fr);
    }


    /* -------------------------------------- */
    /* -------------------------------------- */
    /* --------------- PROFIL --------------- */
    /* -------------------------------------- */
    /* -------------------------------------- */

    /* -------------------------- */
    /* -------- Qualites -------- */
    /* -------------------------- */

    #page-profil .section-qualites .div-qualites .div-liste-qualites {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ----------------------------- */
    /* -------- Competences -------- */
    /* ----------------------------- */

    #page-profil .section-competences .div-competences .div-liste-competences {
        grid-template-columns: repeat(3, 1fr);
    }





    /* -------------------------------------- */
    /* -------------------------------------- */
    /* ------------ REALISATIONS ------------ */
    /* -------------------------------------- */
    /* -------------------------------------- */

    #page-realisations .div-liste-realisations .div-realisation {
        grid-template-columns: repeat(2, 1fr);
    }

    #page-realisations .div-liste-realisations .div-realisation:nth-child(2n) .div-illustration,
    #page-realisations .div-liste-realisations .div-realisation:nth-child(2n) .div-illustration p {
        order: 1;
    }

    #page-realisations .div-liste-realisations .div-realisation .div-illustration img {
        max-width: none;
    }





    /* -------------------------------------- */
    /* -------------------------------------- */
    /* --------------- PROJETS -------------- */
    /* -------------------------------------- */
    /* -------------------------------------- */

    #page-projets .div-liste-projets .div-projet:nth-child(2n) {
        grid-template-columns: 3fr 4fr;
    }

    #page-projets .div-liste-projets .div-projet:nth-child(2n+1) {
        grid-template-columns: 4fr 3fr;
    }

    #page-projets .div-liste-projets .div-projet:nth-child(2n) .div-illustration {
        order: 1;
    }

    #page-projets .div-liste-projets .div-projet .div-illustration img {
        max-width: none;
    }





    /* -------------------------------------- */
    /* -------------------------------------- */
    /* -------------- CONTACT --------------- */
    /* -------------------------------------- */
    /* -------------------------------------- */

    /* ----------------------------- */
    /* ------- Moyen contact ------- */
    /* ----------------------------- */

    #page-contact  .section-moyen-contact > div {
        display: flex;
        align-items: center;
    }

    #page-contact .section-moyen-contact > div .div-image {
        margin: 0 0 0 2.5em;
        order: 1;
    }
    
    #page-contact .section-moyen-contact > div .div-image img {
        width: 300px;
    }





    /* ----------------------------------------- */
    /* ----------------------------------------- */
    /* -------------- PROCESSING --------------- */
    /* ----------------------------------------- */
    /* ----------------------------------------- */

    #page-processing .section-activite > div {
        grid-template-columns: repeat(3, 1fr);
    }





    /* ==================================== */
    /* ==================================== */
    /* ============== FOOTER ============== */
    /* ==================================== */
    /* ==================================== */

    footer > div:nth-child(1) li {
        margin-right: 2em;
    }

}



/* LAPTOP */
@media (min-width: 1024px) {

    /* ===================================== */
    /* ===================================== */
    /* ============== GENERAL ============== */
    /* ===================================== */
    /* ===================================== */

    body {
        font-size: 18px;
    }

    .div-titre-principal {
        font-size: 1em;
    }



    /* ==================================== */
    /* ==================================== */
    /* ============== HEADER ============== */
    /* ==================================== */
    /* ==================================== */

    header {
        min-height: 100vh;
    }

    /* ---------------------------- */
    /* -------- Navigation -------- */
    /* ---------------------------- */

    /* Listes rubriques menu */
    header nav > div > ul {
        display: flex;
    }

    /* Menu burger */
    header nav > div > .div-menu-burger {
        display: none;
    }



    /* ================================== */
    /* ================================== */
    /* ============== MAIN ============== */
    /* ================================== */
    /* ================================== */

    /* ------------------------------ */
    /* -------- Présentation -------- */
    /* ------------------------------ */

    .section-presentation > div .div-image img {
        width: 400px;
    }

    /* -------------------------------------- */
    /* -------------------------------------- */
    /* --------------- PROFIL --------------- */
    /* -------------------------------------- */
    /* -------------------------------------- */

    /* ----------------------------- */
    /* -------- Competences -------- */
    /* ----------------------------- */

    #page-profil .section-competences .div-competences .div-liste-competences {
        grid-template-columns: repeat(4, 1fr);
    }





    /* -------------------------------------- */
    /* -------------------------------------- */
    /* -------------- CONTACT --------------- */
    /* -------------------------------------- */
    /* -------------------------------------- */

    /* ----------------------------- */
    /* ------- Moyen contact ------- */
    /* ----------------------------- */   

    #page-contact .section-moyen-contact > div .div-image img {
        width: 400px;
    }





    /* ----------------------------------------- */
    /* ----------------------------------------- */
    /* -------------- PROCESSING --------------- */
    /* ----------------------------------------- */
    /* ----------------------------------------- */

    #page-processing .section-activite > div {
        grid-template-columns: repeat(4, 1fr);
    }

}



/* LARGE LAPTOP */
@media (min-width: 1440px) {

    /* ===================================== */
    /* ===================================== */
    /* ============== GENERAL ============== */
    /* ===================================== */
    /* ===================================== */

    body {
        font-size: 20px;
    }



    /* ================================== */
    /* ================================== */
    /* ============== MAIN ============== */
    /* ================================== */
    /* ================================== */

    /* -------------------------------------- */
    /* -------------------------------------- */
    /* --------------- PROFIL --------------- */
    /* -------------------------------------- */
    /* -------------------------------------- */

    /* -------------------------- */
    /* -------- Qualites -------- */
    /* -------------------------- */

    #page-profil .section-qualites .div-qualites .div-liste-qualites {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ----------------------------- */
    /* -------- Competences -------- */
    /* ----------------------------- */

    #page-profil .section-competences .div-competences .div-liste-competences {
        grid-template-columns: repeat(5, 1fr);
    }

}