@font-face {
    font-family: KronaOne;
    font-weight: medium;
    src: url('../fonts/KronaOne-Regular.ttf');
}

@font-face {
    font-family: Raleway;
    font-weight: regular;
    src: url('../fonts/raleway/Raleway-Regular.ttf');
}

html {
    font-family: Raleway;
    color: #384A5A;
}


/*Smartphone*/


/* NAV BAR */

.topnav {
    font-family: KronaOne;
    color: #384A5A;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
}

.topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 20px;
}

a.icon {
    color: #384A5A;
}

.topnav a:visited {
    background-color: #ffffff;
}

.topnav a:link {
    background-color: #ffffff;
    color: #384A5A;
}

.topnav a:hover {
    background-color: #ddd;
    color: #384A5A;
}

.topnav a.ACTIVE_NAV {
    background-color: #ddd;
}

#nonACCUEIL {
    color: #97A0A8;
}

#ACCUEIL {
    color: #384A5A;
}

.ACTIVE_NAV {
    color: #384A5A;
}

.passive_NAV {
    color: #97A0A8;
}

.topnav a:not(:first-child) {
    display: none;
}

.topnav a.icon {
    float: right;
    display: block;
}

.topnav.responsive {
    position: relative;
}

.topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
}

.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}


/*reste du site*/

body {
    height: 100%;
    margin: 0;
}

header {
    width: 100%;
    height: 45px;
    background-color: #ffffff;
    position: fixed;
}

.img_section1 {
    display: none;
}


/* Moitié haut accueil */

.section1 {
    padding: 50px 0 50px 0;
    height: auto;
    background-color: #E8EFF6;
}

.section_blanc_accueil {
    background-color: #fff;
}

.section_rose_accueil {
    background-color: #F6EBF6;
}

.Text_prez {
    text-align: center;
    font-family: KronaOne;
    color: #384A5A;
    font-size: 20px;
    padding: 0 0 15px 0;
    margin: 20px 0;
}


/*
.esp {
    font-family: Simpel;
    border-radius: 10px;
    border: none;
    color: #ffffff;
    margin: auto;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: flex;
    font-size: 16px;
    transition-duration: 0.3s;
    cursor: pointer;
    background-color: #FFAA3B;
}

.esp:hover {
    color: #FFAA3B;
    background-color: #ffffff;
}

.aprop {
    text-decoration: none;
    color: #ffffff;
}
*/

.bouton3D_2 {
    padding: 15px 0 50px 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.txt_accueil_moi {
    text-align: center;
    font-size: 20px;
    margin: 0;
    padding: 50px 25px 15px 25px;
}

.txt_accueil_moi_1 {
    text-align: center;
    font-size: 20px;
    margin: 0;
    padding: 50px 25px;
}

.bouton3D_1 {
    display: flex;
    justify-content: center;
}

.Esp_b {
    display: flex;
    height: 50px;
    transition-duration: 0.4s;
}

.Esp_b .b_back {
    display: none;
    height: 50px;
    position: absolute;
}

.Esp_b:hover .b_back {
    display: inline;
}


/* Moitié bas accueil */

.section2 {
    background-color: #ffffff;
}

.proj {
    margin: 0 0 25px 0;
    padding: 50px 0 0 10px;
    font-family: KronaOne;
    font-size: 25px;
}

.icone_accueil {
    display: block;
    margin: 10px auto;
    height: 250px;
}

.proj_1 {
    margin: 50px 0;
}

h2 {
    margin: 5px 20px;
    text-align: center;
}

.projdesc {
    margin: 25px 20px;
    text-align: center;
}

.desc {
    margin: 5px 20px;
    text-align: center;
}

iframe {
    display: block;
    margin: 25px auto;
    width: 384px;
    height: 216px;
}

h3,
h5 {
    text-align: center;
    color: #384A5A;
}

h3 {
    font-family: KronaOne;
}

h5 {
    font-family: Raleway;
    font-weight: 200;
}

.lien_ref {
    color: #384A5A;
    text-decoration: none;
}

.lien_ref:hover {
    color: #6FB5F6;
    text-decoration: none;
}


/* FOOTER */

footer {
    width: auto;
    background-color: #fff;
}

.footer_p {
    padding: 5px 0 25px 0;
    margin: 0;
    text-align: center;
    font-size: 15px;
    color: #384A5A;
}

.lien_footer {
    color: #384A5A;
    text-decoration: none;
}

.lien_footer:hover {
    color: #6FB5F6;
}

.bouton3D_3 {
    padding: 25px 0 5px 0;
    display: flex;
    justify-content: center;
}

.nom {
    color: #384A5A;
    font-family: KronaOne;
    font-size: 20px;
    text-align: center;
}

.cont_b {
    color: #384A5A;
    font-weight: 900;
}

.back_img {
    display: block;
    margin: 0 auto;
    width: 90%;
}

.desc_moi {
    margin: 35px;
    text-align: center;
}

.titre_cv {
    padding: 25px 0 20px 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

li {
    padding: 15px 0;
    margin: 0;
    list-style: none;
}

ul {
    margin: 0;
    padding: 0 0 20px 40px;
}

.dates {
    font-size: 12px;
    font-family: KronaOne;
    margin: 2px 0;
}

.txt_cv {
    padding: 4px 25px 0 0;
    margin: 0;
}

.images_projets_desc {
    display: block;
    margin: 25px auto;
    height: 216px;
}

.img_prez {
    color: #384A5A;
    text-decoration: none;
}

.img_prez:hover {
    color: #6FB5F6;
}

.img_proj1 {
    margin: 35px 0;
    display: grid;
    grid: auto auto auto/1fr 1fr;
}

.Iproj1_1 {
    display: block;
    margin: 0 auto;
    grid-area: 1/1;
    height: 125px;
}

.Iproj1_2 {
    display: block;
    margin: 0 auto;
    grid-area: 1/2;
    height: 125px;
}

.Iproj1_3 {
    display: block;
    margin: 0 auto;
    grid-area: 3/1;
    height: 125px;
}

.Iproj1_4 {
    display: block;
    margin: 0 auto;
    grid-area: 3/2;
    height: 125px;
}

.Pproj1 {
    text-align: center;
    grid-area: 2/span 2;
}

.anchorProj {
    color: #FFAA3B;
    text-align: center;
    font-family: KronaOne;
    font-size: 20px;
    margin: 80px auto 30px auto;
}

.imgPgs,
.imgCS {
    display: none;
}

.FORMATION_bg {
    padding: 15px 0;
    background-color: #F6EBF6;
}

.EXPERIENCE_bg {
    padding: 15px 0;
    background-color: #E8EFF6;
}

.COMPETENCE_bg {
    padding: 15px 0;
    background-color: #FFFCDB;
}

.CENTRE_bg {
    padding: 15px 0;
    background-color: #F6EBF6;
}

.contactermoi {
    margin: 25px 0;
    text-align: center;
    font-size: 18px;
}

.sectionJCONT {
    background-color: #FFFCDB;
}

.containerCONT {
    background-color: #F6EBF6;
}

.num,
.mail,
.adresse {
    text-align: center;
    padding: 30px 0;
    margin: 0;
}

.logo_cont1,
.logo_cont2,
.logo_cont3 {
    display: block;
    padding: 30px 0;
    margin: 0 auto;
    height: 100px;
}

.container_video {
    background-color: #FFFCDB;
    padding: 25px 0;
}
.container_video2 {
    background-color: #e8eff6;
    padding: 25px 0;
}

.Container_imgdesc_p1 {
    padding: 25px 0;
    background-color: #F6EBF6;
}

.img_proj1_container {
    display: grid;
    margin: 35px 0;
    grid-gap: 10px;
    grid: auto auto / 1fr 1fr;
}

.container_imgproj {
    padding: 25px 0;
    background-color: #F6EBF6;
}

.Iproj6_1 {
    display: block;
    margin: 0 auto;
    height: 216px;
}
.Iproj6_SM3D {
    display: block;
    height: auto;
    width: 75%;
    margin: 25px auto;
}
.IprojSM3D1{
  display: block;
  margin: 0 auto;
  width: 75%;
}
.IprojSM3D2 {
    display: block;
    margin: 0 auto;
  width: 75%;
}
.duoproj1 {
    background-color: #F6EBF6;
    padding: 25px 0;
}

.duoproj2 {
    background-color: #FFFCDB;
    padding: 25px 0;
}

.duoproj3 {
    background-color: #E8EFF6;
    padding: 25px 0;
}

.duoproj4 {
    background-color: #F6EBF6;
    padding: 25px 0;
}

.img_famileo {
    display: block;
    margin: 20px auto;
    height: 300px;
}

.container_imgproj_fam {
    padding: 50px 5%;
    background-color: #F6EBF6;
    display: block;
}

.formation,
.exp_pro,
.comp,
.centre_int {
    margin: 0;
    padding: 0 0 15px 40px;
}

.Iproj5_1 {
    display: block;
    margin: 20px auto;
    height: 216px;
}

.Moveheader {
    padding: 45px 0 0 0;
}


/*Desktop*/

@media screen and (min-width:500px)
/*a modifier quand le mode tablette sera activé*/

{
    body {
        margin: 0;
    }
    header {
        width: 100%;
        height: 59px;
    }
    /*Responsive menu*/
    .topnav a:not(:first-child) {
        display: block;
    }
    .topnav a.icon {
        display: none;
    }
    .topnav a {
        float: left;
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 25px;
    }
    .topnav a:not(.ACCUEIL) {
        float: right;
        display: block;
    }
    .topnav a.icon {
        display: none;
    }
    /* reste du site*/
    .section1 {
        grid-gap: 10px;
        display: grid;
        grid: auto / auto;
    }
    .section_blanc_accueil {
        display: grid;
        padding: 50px 10%;
        grid: auto / 1fr 1fr;
    }
    .section_rose_accueil {
        display: grid;
        padding: 50px 10%;
        grid: auto / 1fr 1fr;
    }
    .imgCS,
    .imgPgs {
        display: block;
        margin: auto auto;
    }
    .txt_accueil_moi {
        text-align: center;
        font-size: 22px;
        margin: 0;
        padding: 0;
    }
    .txt_accueil_moi_1 {
        text-align: center;
        font-size: 22px;
        margin: 0;
        padding: 10% 20%;
    }
    .elmtrose {
        padding: 10% 20%;
    }
    .leftgrid {
        justify-content: center;
        align-content: center;
        grid-area: 1/1;
    }
    .Text_prez {
        font-size: 35px;
        padding: 0;
        margin: 175px 0 50px 0;
    }
    .Esp_b {
        height: 75px;
    }
    .Esp_b .b_back {
        height: 75px;
    }
    .img_section1 {
        grid-area: 1/2;
        margin: 0;
        display: block;
        height: 500px;
    }
    footer {
        width: auto;
        background-color: #fff;
    }
    .footer_p {
        margin: auto;
        text-align: center;
        font-size: 17px;
    }
    .bouton3D_3 {
        padding: 25px 0 5px 0;
        display: flex;
        justify-content: center;
    }
    h3 {
        margin: 20px auto;
        font-size: 30px;
    }
    h5 {
        margin: 20px auto;
        font-size: 20px;
    }
    .projdesc {
        font-size: 20px;
        margin: 50px 22% 50px 22%;
    }
    .desc {
        padding: 0;
        margin: 5px 25px;
    }
    .anchorProj {
        color: #384A5A;
        font-size: 25px;
        margin: 80px 60px 30px 60px;
        text-align: center;
    }
    .icone_accueil {
        display: block;
        margin: 10px auto;
        height: 350px;
    }
    .proj_1 {
        margin: 25px 0;
    }
    .nom {
        font-size: 30px;
    }
    .logo_cont {
        display: block;
        margin: 30px auto;
        height: 50px;
    }
    .cont_b {
        color: #384A5A;
        font-weight: 900;
    }
    .back_img {
        display: block;
        margin: 0 auto;
        width: 50%;
    }
    .liencont1 {
        grid-area: 1/ 1;
    }
    .liencont2 {
        grid-area: 1/2;
    }
    .liencont3 {
        grid-area: 1/3;
    }
    .bigcontainer {
        display: grid;
        grid: auto auto/ 1fr 1fr;
    }
    .FORMATION_bg {
        padding: 25px 0;
        background-color: #F6EBF6;
    }
    .EXPERIENCE_bg {
        padding: 25px 0;
        background-color: #E8EFF6;
    }
    .COMPETENCE_bg {
        padding: 25px 0;
        background-color: #FFFCDB;
    }
    .CENTRE_bg {
        padding: 25px 0;
        background-color: #F6EBF6;
    }
    .desc_moi {
        font-size: 20px;
        margin: 50px 35%;
        text-align: center;
    }
    .titre_cv {
        text-align: center;
        padding: 25px 0 20px 10px;
        margin: 0;
        font-size: 22px;
        font-weight: 900;
    }
    li {
        text-align: center;
        padding: 15px 0;
        margin: 0;
        list-style: none;
    }
    ul {
        margin: 0;
        padding: 0 0 15px 40px;
    }
    .dates {
        font-size: 14px;
        font-family: KronaOne;
        margin: 2px 0;
    }
    .txt_cv {
        font-size: 18px;
        padding: 4px 20% 0 20%;
        margin: 0;
    }
    .petitul {
        margin: 0;
        padding: 0;
    }
    .petitLI {
        padding: 0px 0;
        margin: 0;
    }
    .pticontainerCTRINTER {
        padding: 15px 0 0 0;
    }
    .pticontainerFORM {
        padding: 50px 0 0 0;
    }
    .contactermoi {
        text-align: center;
        font-size: 22px;
        margin: 45px 0;
    }
    .sectionJCONT {
        background-color: #FFFCDB;
    }
    .containerCONT {
        background-color: #F6EBF6;
        display: grid;
        grid-area: auto / 1fr 1fr 1fr;
        grid-gap: 25px;
        padding: 75px 30%;
        margin: 0;
    }
    .logo_cont1,
    .logo_cont2,
    .logo_cont3 {
        display: block;
        padding: 30px 0;
        margin: 0 auto;
        height: 100px;
    }
    .num,
    .mail,
    .adresse {
        font-size: 20px;
        text-align: center;
        padding: 30px 0;
        margin: 0;
    }
    .container_video {
        background-color: #FFFCDB;
        padding: 50px 0;
    }
    .container_video2 {
        background-color: #e8eff6;
        padding: 50px 0;
    }
    .container_SM3D1{
      display: flex;
       align-items: center;
    }
    .Container_imgdesc_p1 {
        padding: 25px 0;
        background-color: #F6EBF6;
    }
    .img_proj1_container {
        display: grid;
        margin: 35px 0;
        grid-gap: 10px;
        grid: auto auto / 1fr 1fr;
    }
    .img_proj1 {
        margin: 0 0;
        display: grid;
        grid: auto auto auto/1fr 1fr;
    }
    .Iproj1_1 {
        display: block;
        margin: 0 75px 0 auto;
        grid-area: 1/1;
        height: 350px;
    }
    .Iproj1_2 {
        display: block;
        margin: 0 auto 0 75px;
        grid-area: 1/2;
        height: 350px;
    }
    .Iproj1_3 {
        display: block;
        margin: 0 75px 0 auto;
        grid-area: 3/1;
        height: 350px;
    }
    .Iproj1_4 {
        display: block;
        margin: 0 auto 0 75px;
        grid-area: 3/2;
        height: 350px;
    }
    .Pproj1 {
        font-size: 25px;
        margin: 0 auto;
        padding: 50px 0;
        text-align: center;
        grid-area: 2/span 2;
    }
    iframe {
        display: block;
        padding: auto;
        margin: 25px auto;
        width: 1200px;
        height: 675px;
    }
    .images_projets_desc {
        display: block;
        margin: 25px auto;
        height: 450px;
    }
    .Iproj6_1 {
        display: block;
        margin: 0 auto;
        height: 675px;
    }
    .Iproj6_SM3D {
        display: block;
        margin: 0 auto;
        height: 675px;
    }
    .IprojSM3D1{
      display: block;
      margin: 0 auto;
      height: 675px;
      width: auto;
    }
    .container_SM3D2{
      display: grid;
      justify-content: center;
      margin:25px auto;
      width: 80%;
      grid:auto/1fr 1fr;
      grid-gap: 25px;
    }
    .container_imgproj {
        padding: 50px 0;
        background-color: #F6EBF6;
    }
    .duoproj1,
    .duoproj2,
    .duoproj3,
    .duoproj4 {
        display: grid;
        grid-gap: 5%;
        padding: 0 10%;
        grid: auto/ 1fr 1fr;
    }
    .container_imgproj_fam {
        padding: 50px 5%;
        background-color: #F6EBF6;
        display: grid;
        grid: auto / 1fr 1fr 1fr;
    }
    .img_famileo {
        height: 450px;
    }
    .formation,
    .exp_pro,
    .comp,
    .centre_int {
        margin: 0;
        padding: 0;
    }
    .Iproj5_1 {
        display: block;
        margin: 50px auto;
        height: 675px;
    }
    .Moveheader {
        padding: 59px 0 0 0;
    }
}


/*Tablette*/

@media screen and (min-width:500px) and (max-width:900px) {}