html {
    background-size : 100%;
}
@media (min-width:1300px) {
    html{
        background-image: url("../img/wallp4.jpg");
        margin-bottom: 2rem;
    }
}

.gaucheDiv {
    text-decoration : none;
    font-size       : 1rem;
    grid-column     : 1;
    height          : 100%;
    /* background-color: #00324A; */
    background-color: #002638;
    color           : white;
    padding         : 1rem;
    border-radius   : 8px 0 0 8px;
    border          : 1px solid rgb(61, 61, 61);
}

.hautDivSmart{
    font-size       : 1rem;
    background-color: #002638;
    color           : white;
    border-radius   : 5px 5px 0 0;
}
.droiteDiv {
    text-decoration : none;
    font-size       : 1rem;
    grid-column     : 2;
    height          : 100%;
    /* background-color: #f3f3f3; */
    background-color: #fafafa;
    color           : rgb(43, 43, 43);
    padding         : 1rem;
    border-radius   : 0 8px 8px 0;
    border          : 1px solid rgb(150, 150, 150);
    box-shadow: 10px 5px 5px rgb(172, 172, 172);

}

.languageChoiceFlag {
    opacity            : 1;
    transition         : .3s ease;
    backface-visibility: hidden;
    /* padding-top     : 3px; */
    padding-left       : 5px;
    /* padding-bottom  : 1px; */
}

.languageChoiceFlag:hover {
    opacity: 0.5;
    cursor : pointer;
}

body {
    font-family: 'Nunito', 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 200;
}

/* .mainFr {
    display: inline-block;
} */

.mainEng, .mainEngSmart {
    display: none;
}

.mainJp, .mainJpSmart {
    display: none;
}

@media (max-width:960px) {
    .mainCss {
        min-height: 100vh;
        width     : 90%;
        margin    : 1rem auto;
    }
}

@media (min-width:960px) {
    .mainCss {
        min-height: 100vh;
        width     : 80%;
        margin    : 1rem auto;
    }
}

.mainFr {
    display              : grid;
    grid-template-columns: 27% 73%
}




.color-brown{
    color: rgb(158, 135, 101);
    font-weight: 800;
    font-size: 1.2rem;
}
.dialogGrid {
    display              : grid;
    grid-template-columns: 15% 85%;
    background-color: rgb(243, 243, 240);
}

@media screen and (max-width: 1280px){
    .dialogGrid {
        display              : grid;
        grid-template-columns:  auto;
        background-color: rgb(243, 243, 240);
    }
}

#mainFrDialog {
    display       : flex;
    flex-direction: column;
    font-family: 'Nunito','Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#mainEngDialog,
#mainJpDialog {
    display: none;
    font-family: 'Nunito','Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.ident {
    font-weight: 400;
    font-size  : 1.4rem;
    color      : #ebebeb;
}

.titleCategorie {
    margin-top      : 2rem;
    color           : #fff;
    background-color: #002638;
    font-size       : 1.4rem;
    font-weight     : 400;
    /* background-color: rgb(216, 216, 216); */
    padding-left    : 1rem;
    border-radius   : 0px 15px 15px 0px;
    box-shadow: 5px 5px 5px rgb(172, 172, 172);
    margin-bottom: 2rem;
    /* text-shadow: 1px 0 rgb(192, 192, 192); */
    /* font-family:'Roboto', 'Poppins Bold', 'Poppins','Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}

.titleCategorieSmart {
    color           : #fff;
    background-color: #002638;
    font-size       : 1.3rem;
    font-weight     : 400;
    box-shadow: 5px 5px 5px rgb(172, 172, 172);
    padding-left    : 1rem;
    border-radius   : 0px 15px 15px 0px;

    /* font-family:'Roboto', 'Poppins Bold', 'Poppins','Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}
.langueGrid {
    display              : grid;
    grid-template-columns: 9rem auto;
}
@media screen and (max-width: 1000px){
    .langueGrid {
        display              : grid;
        grid-template-columns: auto auto;
    }
}
.langue {
    font-weight: 400;
    margin-left: 1rem;
}

.defLangue {
    margin-left: 20px;
    /* color   : rgb(20, 54, 104); */
    color      : #002638;
    font-weight: 300;
}

@media screen and (max-width: 1000px){
    .titreXp {
        color      : rgb(156, 53, 53);
        font-weight: 400;
        font-size  : 1.2rem;
        text-align : center;
        font-family: 'Nunito','Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}
@media screen and (min-width: 1000px){
    .titreXp {
        color      : rgb(156, 53, 53);
        font-weight: 400;
        font-size  : 1.6rem;
        text-align : center;
        font-family: 'Nunito','Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}

.expPro {
    display              : grid;
    grid-template-columns: 8rem auto;
    grid-auto-flow       : column;
    font-family          :  'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@media screen and (max-width: 1000px){
    .expPro {
        display              : grid;
        grid-template-columns:  auto;
        grid-auto-flow       : column;
        font-family          :  'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}


.leftExpPro {
    color      : rgb(156, 53, 53);
    font-weight: 400;
    font-size  : 1.2rem;
}

@media screen and (max-width: 1000px){
    .leftExpPro {
        color      : rgb(156, 53, 53);
        font-weight: 400;
        font-size  : 1rem;
    }
}



.rightExpPro {
    /* font-family: 'Poppins','Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    /* color      : rgb(100, 31, 31); */
    /* color : rgb(156, 53, 53); */
    font-weight: 600;
    font-size  : 1.1rem;
    margin-left: 1rem;
color: #002638;
/* background-color: #6c848f; */
background-color: rgb(243, 243, 240);
    /* background-color: #e9e9e9; */
    /* border-radius   : 0px 15px 15px 0px; */
    /* box-shadow: 5px 5px 5px rgb(172, 172, 172); */

}
.lienRightExpPro {
    color      : rgb(207, 0, 0);
    font-weight: 200;
    font-size  : 1.1rem;
    vertical-align: middle;
}

.expProDetail {
    font-weight: 300;
    font-size  : 1rem;
    margin-left: 1rem;
}

.diplome {
    padding: 0;
    margin : 0;
}

.diplomeDetail {
    padding: 0;
    margin : 0;
}

.hobbies,
.education {
    /* font-family:'Poppins','Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-weight: 300;
    font-size  : 1rem;
    margin-left: 1rem;
    /* border  : 1px solid rgb(61, 61, 61); */
}

.listeProDetail {
    list-style  : none outside;
    padding-left: 7rem;
    padding-top: 0.7rem;
}
@media screen and (max-width: 1000px){
    .listeProDetail {
       
        padding-left: 0rem;
        padding-top: 0.7rem;
       
    }
}

.imgFlag {
    margin        : 0 auto;
    vertical-align: middle;
}

a {
    text-decoration: none;
    color          : rgb(20, 54, 104);
    font-weight    : 400;
    font-size      : 1rem;
    /* margin-left : 1rem; */
}

.jpTitreIdent {
    font-weight : 400;
    font-size   : 1rem;
    color       : rgb(231, 228, 228);
    padding-bottom: 1rem;
    /* margin-right: 0.1rem; */
}

.tableauGaucheDiv {
    display              : grid;
    grid-template-columns: 8rem auto;
}


.infoDivBlock {
    /* opacity: 0.8; */
    z-index         : 2;
    position        : absolute;
    width           : 30vw;
    height          : 30vh;
    top             : 50vh;
    left            : 50vw;
    border          : 1px dashed #990000;
    background-color: #ffdddd;
    text-align      : center;
    /* visibility   : hidden; */
    display         : none;
}

.bg-beige{
    background-color: rgb(243, 243, 240);
}
.modal {
    transition: opacity 0.25s ease;
}

body.modal-active {
    overflow-x: hidden;
    overflow-y: visible !important;
}

body.modal-devis-active {
    overflow-x: hidden;
    overflow-y: visible !important;
}
body.modal-devis-video-active {
    overflow-x: hidden;
    overflow-y: visible !important;
}

.menuTitreGauche {
    width        : 100%;
    text-align   : center;
    border-bottom: 1px solid #fff;
    line-height  : 0.1em;
    margin       : 10px 0 20px;
}

.menuTitreGauche span {
    color           : #fff;
    background-color: #002638;
    padding         : 0 15px;

}
.font-info-perso{
    font-size: 1 rem;
    color: white;
    line-height: 1.5rem;
    font-weight: 400;
    font-family: 'Spartan', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.colorFondBleue{
    background-color: #205168;
}
.nomPrenom {
    font-family: 'Spartan', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.competences {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    text-align: center;
}

.gridCompetences {
    display              : grid;
    grid-template-columns: 75% 25%;
}

.colorDebug {
    background-color: chartreuse;
}


.swiper-container {
    width : 600px;
    height: 300px;
}

.dialog-size-devis {
    width : 1050px;
    height: 650px;
}

.dialog-video-size-devis {
    width : 1024;
    height: 576;
}

.img_devis {
    width     : 100%;
    height    : 100%;
    object-fit: contain;

}

.grid-devis-img:hover {
    -webkit-transform: scale(1.1);
    transform        : scale(1.1);

}



.grid-devis-img {
    border-radius: 2px;
    border       : 1px solid rgb(17, 17, 17);
    width        : 160px;
    height       : 90px;
    transition   : transform 0.25s ease;
    align-items  : center;
}

.grid-devis-img-big {
    padding-top: 1rem;

    width : 640px;
    height: 360px;

    align-items: center;
}

.img_devis_big{
    max-width:100%;
    max-height:100%;
}

.colorTitre{
    /* background-color: #3d8fb4; */
    background-color: rgb(170, 109, 109);
    border-radius: 10px;
    box-decoration-break: clone;
    display: inline-block;
    /* width: 100%; */
}

@media screen and (max-width: 1000px){
    .colorTitre{
        background-color: rgb(170, 109, 109);
        border-radius: 10px;
        box-decoration-break: clone;
        display: block;
    }
}
.colorTitreFont{
    font-weight: 400;
    font-size  : 1.1rem;
    font-family: 'Nunito','Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}
.colorMainTitre{
    background-color: #b42a2a;
    border-radius: 10px;
}

.imgSvgWhite{
    filter: invert(1)
}



li > button {
  
    height: 1.4rem;
    width: 1.6rem;
    align-items: center;
    justify-content: center;
    background-color: rgb(170, 109, 109);
    border-radius: 3px;
    /* letter-spacing: 1px; */
    transition: all 0.2s linear;
    cursor: pointer;
    border: none;
    background: rgb(170, 109, 109);
   }

   li > button > img {
    margin: 1px;
    filter: invert(1);
   }

  

   li > button:hover {
    box-shadow: 3px 3px 20px #bdbdbd, -3px -3px 20px #e9e8e8;
    transform: translateX(+2px);
   }