/*  https://youtu.be/IxziwuuaS3c  */

html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

@font-face {
    font-family: bakso-sapi;
    src: url(polices/baksoSapi.otf);
}

@font-face {
    font-family: mosafin;
    src: url(polices/Mosafin-Medium.ttf);
}

@font-face {
    font-family: lonzie;
    src: url(polices/Lonzies.ttf);
}

@font-face {
    font-family: optica-bold;
    src: url(polices/Desktop\ Fonts/OTF/Optika-Bold.otf);
}

@font-face {
    font-family: optica-medium;
    src: url(polices/Desktop\ Fonts/OTF/Optika-Medium.otf);
}

@font-face {
    font-family: optica-light;
    src: url(polices/Desktop\ Fonts/OTF/Optika-light.otf);
}


body{
    width: 300%;
    padding: 0px;
    margin: 0;
    background-size: cover;
    background-position: top;
    position: relative;
    height: -webkit-fill-available; 
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

#accueilContainer{
    background: linear-gradient(180deg, rgb(249, 249, 249) 0%, rgb(255, 255, 255) 100%);
    width: 33.3334%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
}

#accueilFond{
    min-width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('images/fond.svg');
    background-repeat: no-repeat;
    background-size: cover;
    /*background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(239, 241, 243) 100%);*/
}


p{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif;
    font-size: 0.95em;
    line-height: 1.4em;
    text-align: left;
    /*color: #051842;*/
    color: #103853;
}

h1{
    font-family: lonzie;
    /*color: #051842;*/
    color: #103853;
    opacity: 1;
    font-size: 2em;
}

h2{
    font-family: mosafin;
    color: #103853;
    font-size: 1.05em;
    line-height: 15px;
    opacity: 1;
}

h3{
    font-family: lonzie;
    color: #103853;
    font-size: 1.05em;
    line-height: 15px;
    opacity: 1;
}

#containerGlobal{    
    height: 80vh;
    width: 70%;
    position: relative;
    display: block;
    background-size: cover;
    /*box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.1);*/
}

#containerHaut{
    width: 100%;
    height: 30%;
    display: table-row;
}

#containerAbout{
    width: 59%;
    height: 100%;
    display: table-cell;
    position: relative;
    padding-left: 1%;
    padding-right: 1%;

}

#containerProfil{
    width: 200px;
    height: 270px;
    float: left;
}

#profil{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-image: url('images/profilPic.jpg');
    background-size: cover;
}

.descriptionContainer{
    max-width: 50%;
    height: 100%;
    padding-left: 5%;
    float: left;
    position: absolute;
    left: 200px;
    margin-left: 20px;
}

#descriptionTexte{
    width: 100%;
    height: calc(100% - 40px);
    /*background-image: url('images/fondJob.svg');*/
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
}

#description{
    padding: 0;
    margin: 0;
}

#svgJob{
    width: auto;
    height: auto;
    position: relative;
}

#job{
    position: absolute;
    top: 0px;
    width: auto;
    height: auto;
}

#Vert_F{
    transform: translate(0, 15%);
    transition: 0.3s;
}

#Vert_C{
    transform: translate(0, 15%);
    transition: 0.3s;
}

#containerAbout:hover #Vert_F{
    transform: translate(-3%, 15%);
    transition: 0.3s; 
}

#containerAbout:hover #Vert_C{
    transform: translate(2%, 18%);
    transition: 0.3s;
}

#boutonContactContainer{
    height: 40px;
    width: 120px;
    background-color: #0a5746;
    border-radius: 10px;
    position: relative;
    bottom: 0px;
    cursor: pointer;
    color: #ffffff;
    box-shadow: -5px -10px 10px rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

#boutonContactTexte{
    width: 120px;
    height: 40px;
    font-family: mosafin;
    font-size: 1.05em;
    line-height: 40px;
    text-align: center;
    float: right;
    position: relative;
}

#boutonContactContainer:hover {
    color: #023030;
    background-color: #9ae9ad;
    transition: 0.4s;
}

#boutonContactContainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #9ae9ad;
    color: #023030;
    transition: left 0.3s ease;
}

#boutonContactContainer:hover::before {
    left: 0;
}

/*#containerSkill:before{
    width: 40%;
    height: 100%;
    box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.3);
}*/


#containerSkill{
    width: 40%;
    height: 100%;
    border-radius: 10px;
    position: relative;
    display: table-cell;
    padding-top: 0px;
    padding-bottom: 1%;
    vertical-align: top;
    text-align: left;
    /*background-color: #ffffff;*/
    /*background-color: #f9f9f9;
    background-size: cover;
    box-shadow: -5px -10px 10px rgba(255, 255, 255, 0.5), 2px 3px 5px rgba(8, 37, 33, 0.02), -2px -2px 3px rgb(255, 255, 255, 0.5);
    border-top: 1px solid white;
    border-bottom: 1px solid rgb(240, 240, 240);*/
    background-color: #fcfcfc;
    background-size: cover;
    box-shadow: -2px -2px 10px rgba(255, 255, 255, 0.3), 2px 2px 2px rgba(8, 37, 33, 0.02), -1px -1px 1px rgb(255, 255, 255, 0.5);
    border-top: 1px solid white;
    border-bottom: 1px solid rgb(240, 240, 240);
}

#competences{
    width: auto;
    padding-right: 5%;
    text-align: right;
    display: inline-block;
    margin-top: 0px;
    padding-left: 5%;
}

#containerGlobalLogos{
    width: 100%;
    height: 70%;
    text-align: center;
}

#selectionContainer{
    width: 100%;
    height: 50px;
    /*background-color: #023030;*/
    border-radius: 20px;
    margin-bottom: 2%;
}

.containerLogo{
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 20px;
    padding: 5px;
    vertical-align: middle;
    box-shadow:inset 0px 0px 0px 0px #023030;
    transition: 0.1s ease-out;
    scale: 1;
}

.containerLogo:hover{
    /*box-shadow:inset 0px 0px 0px 1px #023030;*/
    /*background-color: #7df1a4;*/
    border-radius: 10px;
    scale: 1.15;
}

.containerLogoSelected{
    /*background-color: rgb(210, 238, 215);*/
    /*background-color: rgb(207, 236, 221);*/
    /*background-color: rgb(255, 255, 255);*/
    opacity: 1;
}

.containerLogoBlocked{
    filter: grayscale(30%);
    opacity: 0.4;
}

.containerLogo[title]:hover:after{
    background-color: #bcdbce;
}

#competencesContainer{
    width: 100%;
    height: 20%;
}

#competences{
    width: auto;
    padding-right: 5%;
    text-align: left;
    display: inline-block;
    margin-top: 0px;
}

#containerToRight{
    width: 50px;
    height: 50px;
    position: absolute;
    padding: 10px;
    top: 0%;
    right: 0;
}

#boutonToRight{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #ffffff;
    vertical-align: top;
    position: relative;
    transition: 0.1s;
    opacity: 0;
    scale: 0.7;
    background-image: url('images/flecheToRight.svg');
    background-size: cover;
    background-color: #0a5746;
    cursor: pointer;
}

#boutonToRight:hover{
    background-color: #9ae9ad;
    background-image: url('images/flecheToRightHover.svg');
}

#boutonToRight:not(:hover){
    transition: 0.1s linear; /* vendorless fallback */
    -o-transition: 0.1s linear; /* opera */
    -ms-transition: 0.1s linear; /* IE 10 */
    -moz-transition: 0.1s linear; /* Firefox */
    -webkit-transition: 0.1s linear; /*safari and chrome */
}

#info{
    max-width: 60%;
    height: 20%;
    display: inline-block;
    vertical-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif;
    font-size: 0.8em;
    text-align: left;
    /*color: #051842;*/
    color: #758582;
}

.logo{
    width: 100%;
    height: auto;
}

#containerBas{
    height: 70%;
    width: 100%;
    margin: 0 auto;
}

#containerDomaineSpé{
    width: 100%;
    height: 8%;
    border-radius: 30px;
    /*background: #d6d5e0;*/
    position: absolute;
    bottom: -15%;
    text-align: center;
    display: inline-block;
}

/*#spé1Container{
    width: 50%;
    height: 70%;
    vertical-align: middle;
    border-radius: 30px;
    padding-left: 1%;
    padding-right: 1%;
    transition: 0.3s;
    float: left;
    margin: 0px auto;
    background-size: cover;
    cursor: pointer;
}

.spéContainer{
    width: 10%;
    height: 70%;
    vertical-align: middle;
    border-radius: 0px;
    padding-left: 1%;
    padding-right: 1%;
    transition: 0.3s;
    float: right;
    cursor: pointer;
    background-color: antiquewhite;
    border-radius: 30px;
}

#spé1{
    color: #051842;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-size: cover;
    display: inline-block;
    text-align: center;
}

.spé{
    color: #051842;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-size: cover;
    display: inline-block;
    text-align: center;
}*/

#domaine1{
    width: 50%;
    height: 70%;
    /*display: inline-block;*/
    vertical-align: middle;
    padding-left: 1%;
    padding-right: 1%;
    transition: 0.3s;
    float: left;
    margin: 0px auto;
    background-size: cover;
    cursor: pointer;
}

.domaine{
    width: 10%;
    height: 70%;
    /*display: inline-block;*/
    vertical-align: middle;
    border-radius: 0px;
    padding-left: 1%;
    padding-right: 1%;
    transition: 0.3s;
    float: right;
    cursor: pointer;
}

.domaineActive{
    transform: scale(1.3);
    
}

#imageFocus{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: url('images/3D.jpg');
    background-size: cover;
    display: inline-block;
    text-align: center;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}

#imageDomaine2{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: url('images/web-atol-sud.jpg');
    background-size: cover;
    background-position: center;
    display: inline-block;
    text-align: center;
}

#imageDomaine3{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: url('images/Anim.png');
    background-size: cover;
    background-position: center;
    display: inline-block;
    text-align: center;
}

#imageDomaine4{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: url('images/rat-de-metal.png');
    background-size: cover;
    background-position: center;
    display: inline-block;
    text-align: center;
}

#imageDomaine5{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: url('images/Photo.jpg');
    background-size: cover;
    background-position: center;
    display: inline-block;
    text-align: center;
}

#imageFocus:hover + #spé1{
    transition: 0.3s;
}

#imageDomaine2:hover{
    transition: 0.3s;
}

#imageDomaine3:hover{
    transition: 0.3s;
}

#imageDomaine4:hover{
    transition: 0.3s;
}

.titreDomaine{
    height: auto;
    width: auto;
    margin-top: 10px;
    position: relative;
    float: left;
    bottom: -100%;
    /*background: rgba(105, 99, 219, 0.6);*/
    border-radius: 10px;
    font-family: lonzie;
    font-size: 1em;
    line-height: 20px;
    color: #103853;
    line-height: 1.3em;
    text-align: left;
    /*text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.3);*/
    padding: 10px;
}

.bouton{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #ffffff;
    vertical-align: top;
    float: right;
    top: 86%;
    transition: 0.3s;
    opacity: 0;
    background-image: url('images/fleche3.svg');
    background-size: cover;
    margin: 10px;
}

.domaine:hover{
    width: calc(100% - 50%);
    height: 70%;
    /*display: inline-block;*/
    vertical-align: middle;
    border-radius: 50px;
    padding-left: 1%;
    padding-right: 1%;
    transition: 0.3s;
    cursor: pointer;
}

.domaine:hover .titreDomaine {
    /*background-color: rgb(0, 0, 0);*/
    transition: 0s;
    width: auto;
    color: white;
    background-color: #0a5746;
}

.domaine:hover .bouton {
    background-color: #ffffff;
    transition: ease 0s;
    opacity: 1;
}

#domaine1:hover .bouton {
    background-color: #ffffff;
    transition: ease 0s;
    opacity: 1;
}

#domaine1:hover .titreDomaine {
    /*background-color: rgb(0, 0, 0);*/
    transition: 0s;
    color: white;
    background-color: #0a5746;
}

#containerTitreDomaine{
    height: 10%;
    width: 100%;
    margin-top: 40px;
    padding-bottom: 0px;
    margin-left: 1%;
    background-image: url('images/fondProjet.svg');
    background-repeat: no-repeat;
    background-position: left;
}

#gallerieContainer{
    width: 33.3334%;
    height: 100vh;
    background: linear-gradient(180deg, #05382d 0%, #031218 100%);
    /*background-color: rgb(17, 17, 17);*/
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    left: 33.3334%;
    background-position: top;
    background-size: cover;
}

#zoomIn{
    height: 80vh;
    width: 70%;
    position: relative;
    margin-left: 5%;
    border-radius: 10px;
    background-size: cover;
    text-align: center;
}

#containerSlideBtn{
    width: 7%;
    height: auto;
    position: absolute;
    bottom: -50px;
    left: 46.5%;
}

.slideBtn{
    width: 30px;
    height: 30px;
    background-color: #04251e;
    color: white;
    border: 0;
    position: relative;
    border-radius: 30px;
}

.slideBtn:hover{
    background-color: #9ae9ad;
    transition: 0.2s;
}

#next{
    background-image: url('images/flecheToRightBlanc.svg');
    background-repeat: no-repeat;
    background-position: left;
    display: inline-block;
    right: 0px;
    margin: 5px;
}

#next:hover{
    background-image: url('images/flecheToRightGreen.svg');
    background-repeat: no-repeat;
    background-position: right;
}

#previous{
    background-image: url('images/flecheToLeftBlanc.svg');
    background-repeat: no-repeat;
    background-position: right;
    display: inline-block;
    left: 0px;
    margin: 5px;
}

#previous:hover{
    background-image: url('images/flecheToLeftGreen.svg');
    background-repeat: no-repeat;
    background-position: left;
}

#imgEnAvantDomaine{
    margin: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: -2px 2px 5px rgba(0, 12, 12, 0.4);
}

#videoEnAvantDomaine{
    margin: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: -2px 2px 5px rgba(0, 12, 12, 0.4);
    position : absolute;
    top: 0;
    left: 0;
    opacity: 1;

}

#videoEnAvantComp{
    margin: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: -2px 2px 5px rgba(0, 12, 12, 0.4);
    position : absolute;
    top: 0;
    left: 0;
    opacity: 1;

}

.videoVisible{
    margin: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    box-shadow: -2px 2px 5px rgba(0, 12, 12, 0.4);
    position : absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

@keyframes scaleAnimationForward {
    /*0% { transform: scale(1.05);}
    50% { transform: scale(0.995);}
    100% { transform: scale(1); }*/

    0% { transform: translate(5%);}
    100% { transform: translate(0%);}
}

@keyframes scaleAnimationBackward {
    0% { transform: translate(-5%);}
    100% { transform: translate(0%);}
}

.scalingEffectForward {
    animation-name: scaleAnimationForward;
    animation-duration: 0.3s; /* Durée de l'animation */
    animation-timing-function: ease-out;
}

.scalingEffectBackward {
    animation-name: scaleAnimationBackward;
    animation-duration: 0.3s; /* Durée de l'animation */
    animation-timing-function: ease-out;
}

.infosVisuelContainer{
    width: 20%;
    height: auto;
    position: relative;
    margin-right: 4%;
    margin-left: 4%; 
}

.titreVisuel{
    width: 100%;
    height: auto;
    position: relative;
    margin-right: 0%;
    margin-left: 0%;
    background-image: url('images/fondTitreProjet.svg');
    background-repeat: no-repeat;
    font-family: lonzie;
    opacity: 1;
    font-size: 2em;
    color: white;
}

.descriptionVisuel{
    width: 100%;
    height: auto;
    position: relative;
    margin-right: 0%;
    margin-left: 0%;
    margin-bottom: 50px;
    padding-top: 8%;
    color: #b6ffef;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif;
    font-size: 0.95em;
}

.logiciels{
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: relative;
    display: inline-block;
    padding-top: 0%;
    padding-bottom: 0%;
    vertical-align: top;
    text-align: left;
    backdrop-filter: blur(5px);
}


#boutonUp{
    width: 50px;
    height: 50px;
    border-radius: 0px;
    border-radius: 30px;
    background-color: #ffffff;
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0 auto;
    background-image: url('images/flecheUpVert.svg');
    background-size: cover;
    background-position: bottom;
    /*background-image: url('images/fleche3.svg');
    background-size: cover;*/
}

#boutonUp:hover{
    width: 50px;
    height: 50px;
    border-radius: 0px;
    border-radius: 30px;
    background-color: #9ae9ad;
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0 auto;
    background-image: url('images/flecheUpVert.svg');
    background-size: cover;
    background-position: center;
    transition: ease 0.2s;
    cursor: pointer;
    /*background-image: url('images/fleche3.svg');
    background-size: cover;*/
}

#menuDomaineContainer{
    width: auto;
    height: auto;
    position: absolute;
    top: 0%;
    margin-left: 5%;
    display: inline-block;
}

.menuDomaine{
    height: 40px;
    position: relative;
    top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    /*background: rgba(105, 99, 219, 0.6);*/
    /*border: 1px solid #05d37d;*/
    border-radius: 10px;
    margin-top: 20px;
    margin-right: 10px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow:inset 0px 0px 0px 0px #9ae9ad;
    font-family: lonzie;
    color: #ffffff;
    font-size: 1em;
    line-height: 40px;
    opacity: 1;
    float: right;
    overflow: hidden;
    z-index: 1;
}

#menu1{
    float: left;
}

.menuDomaine::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #9ae9ad;
    transition: left 0.3s ease;
    z-index: -1;
}

.menuDomaine:hover::before{
    left: 0;
}

.menuDomaine:hover{
    color: #023030;
    border-radius: 10px;
}

.active{
    /*background: #daf275;*/
    /*color: #023030;*/
    color: #daf275;
    background-color:#0d4e41;
}

#pastilleContainer{
    width: auto;
    height: 10%;
    position:absolute;
    bottom: 0px;
    left: 5%;
    margin: 0 auto;
}

.logiciels h2{
    color: white;
}
/*.fond{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}*/



/*-----------------------------------Section Par compétences------------------------------------------*/

#parCompetenceContainer{
    background: linear-gradient(180deg, #05382d 0%, #031218 100%);
    background-position: bottom;
    background-size: cover;
    width: 33.3334%;
    height: 100vh;
    display: flex;
    justify-content: left;
    align-items: center;
    position: absolute;
    left: 66.6668%;
    top: 0;
}

#boutonBackHomeComp{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #ffffff;
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0 auto;
    background-image: url('images/flecheToLeft.svg');
    background-size: cover;
    background-position: center;
}

#menuCompetenceContainer{
    width: auto;
    height: auto;
    position: absolute;
    top: 0%;
    margin-left: 5%;
    display: inline-block;
}

.menuCompetence{
    height: 40px;
    position: relative;
    top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    /*background: rgba(105, 99, 219, 0.6);*/
    /*border: 1px solid #05d37d;*/
    border-radius: 10px;
    margin-top: 20px;
    margin-right: 10px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow:inset 0px 0px 0px 0px #9ae9ad;
    font-family: lonzie;
    color: #ffffff;
    font-size: 1em;
    line-height: 40px;
    opacity: 1;
    float: left;
    overflow: hidden;
    z-index: 1;
}

#menu1{
    float: left;
}

.menuCompetence::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #9ae9ad;
    transition: left 0.3s ease;
    z-index: -1;
}

.menuCompetence:hover::before{
    left: 0;
}

.menuCompetence:hover{
    color: #023030;
    border-radius: 10px;
}

.activeCompetence{
    /*background: #daf275;*/
    /*color: #023030;*/
    color: #daf275;
    background-color:#0d4e41;
}

#boutonBackHomeComp:hover{
    background-color: #9ae9ad;
    transition: ease 0.2s;
    cursor: pointer;
}

#zoomInCompetence{
    height: 80vh;
    width: 70%;
    position: relative;
    margin-left: 5%;
    border-radius: 10px;
    background-size: cover;
    text-align: center;
}

#imgEnAvantComp{
    margin: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: -2px 2px 5px rgba(0, 12, 12, 0.4);
}

#nextComp{
    background-image: url('images/flecheToRightBlanc.svg');
    background-repeat: no-repeat;
    background-position: left;
    display: inline-block;
    right: 0px;
    margin: 5px;
}

#nextComp:hover{
    background-image: url('images/flecheToRightGreen.svg');
    background-repeat: no-repeat;
    background-position: right;
}

#previousComp{
    background-image: url('images/flecheToLeftBlanc.svg');
    background-repeat: no-repeat;
    background-position: right;
    display: inline-block;
    left: 0px;
    margin: 5px;
}

#previousComp:hover{
    background-image: url('images/flecheToLeftGreen.svg');
    background-repeat: no-repeat;
    background-position: left;
}

.infosVisuelContainer{
    width: 20%;
    height: auto;
    position: absolute;
    right: 0;
    top: 10%;
    margin-right: 3%;
    margin-left: 3%; 
}

.logiciels{
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: relative;
    display: inline-block;
    padding-top: 0%;
    padding-bottom: 0%;
    vertical-align: top;
    text-align: left;
    backdrop-filter: blur(5px);
}


/*-----------------------------------Section Form------------------------------------------*/

#formContainerGlobal{
    background: linear-gradient(180deg, rgb(249, 249, 249) 0%, rgb(255, 255, 255) 100%);
    width: 33.3334%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    left: 0;
    float: left;
}

label{
    font-family: lonzie;
}

#formContainer{
    background-image: url('images/fondForm.svg');
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    left: 0;
    float: left;
    margin: 0 auto;
}

#boutonBackHomeForm{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #0a5746;
    position: absolute;
    right: 10px;
    top: 10px;
    margin: 0 auto;
    background-image: url('images/flecheToRight.svg');
    background-size: cover;
    background-position: center;
}

#boutonBackHomeForm:hover{
    background-color: #9ae9ad;
    background-image: url('images/flecheToRightGreen.svg');
    transition: ease 0.2s;
    cursor: pointer;
}

#contactForm{
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif;
    font-size: 0.95em;
    line-height: 1.4em;
    text-align: left;
    /*color: #051842;*/
    color: #2c3950;
}

#prenom{
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0px;
    width: 500px;
    height: 30px;
    margin-top: 10px;
    /*background-color: #eaeaea;*/
    background-color: #fafafa;
    border-top: 1px solid rgb(230, 230, 230);
    padding-left: 15px;
    /*border: 1px solid #c6c6c6;*/
}

#nom{
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0px;
    width: 500px;
    height: 30px;
    margin-top: 10px;
    background-color: #fafafa;
    border-top: 1px solid rgb(230, 230, 230);
    padding-left: 15px;
    /*border: 1px solid #c6c6c6;*/
}

#mail{
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0px;
    width: 500px;
    height: 30px;
    margin-top: 10px;
    background-color: #fafafa;
    border-top: 1px solid rgb(230, 230, 230);
    padding-left: 15px;
}

#message{
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0px;
    width: 500px;
    height: 200px;
    margin-top: 10px;
    background-color: #fcfcfc;
    border-bottom: 3px solid rgb(255, 255, 255);
    border-top: 1px solid rgb(230, 230, 230);
    padding: 15px;
    resize: none;
}

:where(textarea),
:where(input[type="text"],input[type="search"],input[type="password"],input[type="url"]){
  box-shadow: -5px -10px 10px rgba(255, 255, 255, 0.5)inset, 2px 3px 5px rgba(209, 211, 211, 0.123) inset, -2px -2px 3px rgb(255, 255, 255, 0.5)inset/*, 1px 2px 2px rgb(255, 255, 255) inset*/;
    border-top: 1px solid white;
    border-bottom: 1px solid rgb(239, 245, 244);
}


:where(textarea):focus,
:where(input[type="text"],input[type="search"],input[type="password"],input[type="url"]):focus{
  appearance: 1px solid #0a5746;
  border-style: 1px solid #0a5746;
  outline: 1px solid #6fc082;
  border-top: 2px solid white;;
}

input[type="submit"]{
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    outline: none !important;
    border: 0px;
    font-family: mosafin;
    font-size: 1.05em;
    line-height: 40px;
    text-align: center;
    background-color: #0a5746;
    color: white;
    float: right;
}

input[type="submit"]:hover{
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    outline: none !important;
    border: 0px;
    background-color: #9ae9ad;
    color: #2c3950;
    transition: 0.1s ease-out;
}

#formTitre{
    width: 500px;
    height: 50px;
    text-align: left;
    float: left;
    margin: 0 auto;
    margin-bottom: 50px;
    background-image: url('images/fondFormulaire.svg');
    background-repeat: no-repeat;
}

/*-----------------------------------Page remerciements------------------------------------------*/


#containerGlobalThank{
    width: 33.3%;
    height: 99vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgb(249, 249, 249) 0%, rgb(255, 255, 255) 100%);
}

#containerThank{
    width: 600px;
    height: 500px;
    /*background-color: #fcfcfc;*/
    background-size: cover;
}

#containerImgThank{
    width: 600px;
    height: 400px;
    background-image: url('images/fondMerci.svg');
    box-shadow: -2px -2px 10px rgba(255, 255, 255, 0.3), 2px 2px 2px rgba(8, 37, 33, 0.02), -1px -1px 1px rgb(255, 255, 255, 0.5);
    border-top: 1px solid white;
    border-bottom: 1px solid rgb(240, 240, 240);
    border-radius: 10px
}

#containerBtnThank{
    width: 600px;
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#backThank{
    width: auto;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    background-color: #0a5746;
    color: white;
    outline: none !important;
    border: 0px;
    line-height: 40px;
    font-family: mosafin;
    font-size: 1.05em;
}

#backThank:hover {
    color: #023030;
    background-color: #9ae9ad;
    transition: 0.1s;
}

/*#backThank::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #9ae9ad;
    color: #023030;
    transition: left 0.3s ease;
}

#boutonContactContainer:hover::before {
    left: 0;
}*/



/*---- MacBook Pro 14" ----*/
@media (max-width: 1512px) and (max-height: 982px){

    #containerGlobal{    
        height: 80vh;
        width: 90%;
        position: relative;
        display: block;
        /*box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.1);*/
    }

    #containerSkill{
        width: 40%;
        height: 100%;
        border-radius: 20px;
        position: relative;
        display: table-cell;
        padding-top: 0px;
        padding-bottom: 1%;
        vertical-align: top;
        text-align: left;
        background-position: right;
        background-color: #fcfcfc; /*fcfcfc*/
        background-size: cover;
        box-shadow: -5px -10px 10px rgba(255, 255, 255, 0.5), 2px 3px 5px rgba(8, 37, 33, 0.03), -2px -2px 3px rgb(255, 255, 255, 0.5)/*, 1px 2px 2px rgb(255, 255, 255) inset*/;
        border-top: 1px solid white;
        border-bottom: 1px solid rgb(234, 236, 236);
    }

    #competences{
        width: auto;
        padding-right: 5%;
        text-align: right;
        display: inline-block;
        margin-top: 0px;
        padding-left: 5%;
    }

    .containerLogo{
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 20px;
        vertical-align: middle;
    }

    p{
        font-size: 0.9em;
    }

    h1{
        font-size: 1.7em;
    }

    h2{
        font-size: 0.9em;
    }

    .domaine:hover{
        width: calc(100% - 50%);
        height: 70%;
        /*display: inline-block;*/
        vertical-align: middle;
        border-radius: 50px;
        padding-left: 1%;
        padding-right: 1%;
        transition: 0.3s;
        cursor: pointer;
    }

    .titreDomaine{
        height: auto;
        width: auto;
        margin-top: 10px;
        position: relative;
        float: left;
        bottom: -100%;
        /*background: rgba(105, 99, 219, 0.6);*/
        border-radius: 10px;
        font-family: lonzie;
        font-size: 1em;
        line-height: 20px;
        color:#0a3d32;
        line-height: 1.3em;
        text-align: left;
        /*text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.3);*/
        padding: 10px;
        /*white-space: nowrap;
        overflow: hidden;*/
        /*background-color: #fdfdfd;*/
    }

    #titreDomaine1{
        width: auto;
    }

    .domaine:hover .titreDomaine {
        /*background-color: rgb(0, 0, 0);*/
        transition: 0s;
        width: auto;
    }

    #domaine1 .titreDomaine {
        /*background-color: rgb(0, 0, 0);*/
        transition: 0s;
        width: auto;
    }

    .menuDomaine{
        border-radius: 10px;
        font-family: lonzie;
        display: flex;
        float: right;
    }

    #containerSlideBtn{
        width: 10%;
        height: auto;
        position: absolute;
        bottom: -50px;
        left: 46.5%;
    }

    #info{
        max-width: 60%;
        height: 20%;
        display: inline-block;
        vertical-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif;
        font-size: 0.7em;
        line-height: 1.4em;
        text-align: right;
        /*color: #051842;*/
        margin-right: 20px;
        color: #758582;
    }
}

/*---- Iphone 15" ----*/
@media (max-width: 800px) and (max-height: 1000px){

    body{
        width: 300%;
        overflow-y: scroll;
    }

    #containerGlobal{    
        height: 90vh;
        width: 90%;
        position: relative;
        display: block;
        /*border: 1px solid;*/
        /*box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.1);*/
    }

    #containerHaut{
        width: 100%;
        height: 100%;
        display: block;
    }
    
    #containerAbout{
        width: 100%;
        height: 60%;
        display: block;
        position: relative;
        margin-bottom: 10%;
    }
    
    #containerProfil{
        width: 200px;
        height: 210px;
    }
    
    #profil{
        width: 200px;
        height: 200px;
        border-radius: 10px;
        background-image: url('images/profilPic.jpg');
        background-size: cover;
        margin-left: 10%;
    }
    
    .descriptionContainer{
        max-width: 100%;
        height: auto;
        left: 0;
        position: relative;
    }
    
    #descriptionTexte{
        width: 100%;
        height: auto;
        /*background-image: url('images/fondJob.svg');*/
        background-repeat: no-repeat;
        background-position: top;
        position: relative;
    }
    
    #description{
        padding: 0;
        margin: 0;
    }

    #boutonContactContainer{
        height: 40px;
        width: 120px;
        background-color: #0a5746;
        border-radius: 10px;
        position: absolute;
        top: -104%;
        right: 5%;
        cursor: pointer;
        color: #ffffff;
        box-shadow: -5px -10px 10px rgba(255, 255, 255, 0.5);
        overflow: hidden;
    }

    #containerSkill{
        width: 40%;
        height: 40%;
        border-radius: 20px;
        position: relative;
        display: table-cell;
        padding-top: 0px;
        padding-bottom: 1%;
        vertical-align: top;
        text-align: left;
        /*background-color: #ffffff;*/
        /*background-color: #f9f9f9;
        background-size: cover;
        box-shadow: -5px -10px 10px rgba(255, 255, 255, 0.5), 2px 3px 5px rgba(8, 37, 33, 0.02), -2px -2px 3px rgb(255, 255, 255, 0.5);
        border-top: 1px solid white;
        border-bottom: 1px solid rgb(240, 240, 240);*/
        background-color: rgb(255, 255, 255, 0);
        background-size: cover;
        box-shadow: -2px -2px 10px rgba(255, 255, 255, 0), 2px 2px 2px rgba(8, 37, 33, 0), -1px -1px 1px rgb(255, 255, 255, 0);
        border-top: 1px solid white;
        border-bottom: 0px solid rgb(240, 240, 240);
    }

    #competences{
        width: auto;
        height: auto;
        padding-right: 5%;
        text-align: right;
        display: inline-block;
        margin-top: 0px;
        padding-left: 5%;
        margin-bottom: 0;
    }
    
    #containerGlobalLogos{
        width: 100%;
        height: 70%;
        text-align: center;
    }
    
    #selectionContainer{
        width: 100%;
        height: 50px;
        /*background-color: #023030;*/
        border-radius: 20px;
        margin-bottom: 0%;
    }

    #containerBas{
        height: 60%;
        width: 100%;
        margin: 0 auto;
        display: block;
        position: relative;
        overflow: hidden;
    }
    
    #containerDomaineSpé{
        width: 100%;
        height: 8%;
        border-radius: 30px;
        /*background: #d6d5e0;*/
        position: absolute;
        text-align: center;
        display: inline-block;
    }

    #domaine1{
        width: 50%;
        height: 70%;
        /*display: inline-block;*/
        vertical-align: middle;
        border-radius: 30px;
        padding-left: 1%;
        padding-right: 1%;
        transition: 0.3s;
        float: left;
        margin: 0px auto;
        background-size: cover;
        cursor: pointer;
    }
    
    .domaine{
        width: 50%;
        height: 70%;
        display: inline-block;
        border-radius: 0px;
        padding-left: 1%;
        padding-right: 1%;
        cursor: pointer;
    }
    
    .domaineActive{
        transform: scale(1.3);
        
    }
    
    #imageFocus{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-image: url('images/3D.jpg');
        background-size: cover;
        display: inline-block;
        text-align: center;
        /*display: flex;
        justify-content: center;
        align-items: center;*/
    }
    
    #imageDomaine2{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-image: url('images/MacBook.png');
        background-size: cover;
        background-position: center;
        display: inline-block;
        text-align: center;
    }
    
    #imageDomaine3{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-image: url('images/Anim.png');
        background-size: cover;
        background-position: center;
        display: inline-block;
        text-align: center;
    }
    
    #imageDomaine4{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-image: url('images/rat-de-métal.png');
        background-size: cover;
        background-position: center;
        display: inline-block;
        text-align: center;
    }
    
    #imageDomaine5{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-image: url('images/Photo.jpg');
        background-size: cover;
        background-position: center;
        display: inline-block;
        text-align: center;
    }
    
    #imageFocus:hover + #spé1{
        transition: 0.3s;
    }
    
    #imageDomaine2:hover{
        transition: 0.3s;
    }
    
    #imageDomaine3:hover{
        transition: 0.3s;
    }
    
    #imageDomaine4:hover{
        transition: 0.3s;
    }
    
    .titreDomaine{
        height: auto;
        width: auto;
        margin-top: 10px;
        position: relative;
        float: left;
        bottom: -100%;
        /*background: rgba(105, 99, 219, 0.6);*/
        border-radius: 25px;
        font-family: lonzie;
        font-size: 1em;
        line-height: 20px;
        color:#0a3d32;
        line-height: 1.3em;
        text-align: left;
        /*text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.3);*/
        padding: 10px;
    }
    
    .bouton{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: #ffffff;
        vertical-align: top;
        float: right;
        top: 86%;
        transition: 0.3s;
        opacity: 0;
        background-image: url('images/fleche3.svg');
        background-size: cover;
        margin: 10px;
        opacity: 0;
    }
    
    .domaine:hover{
        width: calc(100% - 50%);
        height: 70%;
        /*display: inline-block;*/
        vertical-align: middle;
        border-radius: 50px;
        padding-left: 1%;
        padding-right: 1%;
        transition: 0.3s;
        cursor: pointer;
    }
    
    .domaine:hover .titreDomaine {
        /*background-color: rgb(0, 0, 0);*/
        transition: 0s;
        width: auto;
        background-color: #daf275;
    }
    
    .domaine:hover .bouton {
        background-color: #ffffff;
        transition: ease 0s;
        opacity: 0;
    }
    
    #domaine1:hover .bouton {
        background-color: #ffffff;
        transition: ease 0s;
        opacity: 0;
    }
    
    #domaine1:hover .titreDomaine {
        /*background-color: rgb(0, 0, 0);*/
        transition: 0s;
        background-color: #daf275;
    }

    #zoomIn{
        height: 70vh;
        width: 100%;
        position: relative;
        margin-left: 5%;
        border-radius: 20px;
        background-size: cover;
        text-align: center;
    }

    #zoomInCompetence{
        height: 70vh;
        width: 100%;
        position: relative;
        margin-left: 5%;
        border-radius: 20px;
        background-size: cover;
        text-align: center;
    }

    #containerSlideBtn{
        width: 10%;
        height: auto;
        position: absolute;
        bottom: -50px;
        left: 46.5%;
    }

    #boutonUp{
        width: 0px;
        height: 0px;
        border-radius: 0px;
        border-radius: 30px;
        background-color: #ffffff;
        position: absolute;
        left: 10px;
        top: 10px;
        margin: 0 auto;
        background-image: url('images/flecheUpVert.svg');
        background-size: cover;
        background-position: bottom;
        opacity: 0;
        /*background-image: url('images/fleche3.svg');
        background-size: cover;*/
    }

    .infosVisuelContainer{
        width: 0%;
        height: auto;
        position: relative;
        opacity: 0;
    }
    
    .titreVisuel{
        width: 100%;
        height: auto;
        position: relative;
        margin-right: 0%;
        margin-left: 0%;
        background-image: url('images/fondTitreProjet.svg');
        background-repeat: no-repeat;
        font-family: lonzie;
        opacity: 1;
        font-size: 2em;
        color: white;
    }
    
    .descriptionVisuel{
        width: 100%;
        height: auto;
        position: relative;
        margin-right: 0%;
        margin-left: 0%;
        margin-bottom: 50px;
        padding-top: 8%;
        color: #b6ffef;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica, sans-serif;
        font-size: 0.95em;
    }
    
    .logiciels{
        width: 100%;
        height: 100%;
        border-radius: 30px;
        position: relative;
        display: inline-block;
        padding-top: 0%;
        padding-bottom: 0%;
        vertical-align: top;
        text-align: left;
        backdrop-filter: blur(5px);
    }

    #menuDomaineContainer{
        width: 100%;
        height: auto;
        position: absolute;
        top: 0%;
        margin: 0;
        text-align: center;
        display: inline-block;
        padding: 1%;
        padding-top: 0;
    }
    
    .menuDomaine{
        height: 40px;
        position: relative;
        top: 0px;
        padding-left: 2%;
        padding-right: 2%;
        /*background: rgba(105, 99, 219, 0.6);*/
        /*border: 1px solid #05d37d;*/
        border-radius: 10px;
        margin-top: 20px;
        cursor: pointer;
        transition: 0.2s;
        box-shadow:inset 0px 0px 0px 0px #9ae9ad;
        font-family: lonzie;
        color: #ffffff;
        font-size: 1em;
        line-height: 40px;
        opacity: 1;
        float: left;
        overflow: hidden;
        z-index: 1;
    }

    #containerSlideBtn{
        width: 100%;
        height: auto;
        position: absolute;
        bottom: -50px;
        left: 0;
        border: 1px solid red;
    }

    .slideBtn{
        width: 50px;
        height: 50px;
        background-color: #04251e;
        color: white;
        border: 0;
        position: relative;
        bottom: 0;
        border-radius: 30px;
        margin-top: 20px;
        margin: 15px;
    }

    .slideBtn:hover{
        background-color: #9ae9ad;
        transition: 0.2s;
        width: 50px;
    }

    #imgEnAvantDomaine{
        margin: auto;
        width: 100%;
        height: auto;
        border-radius: 20px;
        box-shadow: -2px 2px 5px rgba(0, 12, 12, 0.4);
    }

    #imgEnAvantComp{
        margin: auto;
        width: 100%;
        height: auto;
        border-radius: 20px;
        box-shadow: -2px 2px 5px rgba(0, 12, 12, 0.4);
    }

    #prenom{
        margin-bottom: 20px;
        border-radius: 10px;
        border: 0px;
        width: 300px;
        height: 30px;
        margin-top: 10px;
        /*background-color: #eaeaea;*/
        background-color: #fafafa;
        border-top: 1px solid rgb(230, 230, 230);
        padding-left: 15px;
        /*border: 1px solid #c6c6c6;*/
    }
    
    #nom{
        margin-bottom: 20px;
        border-radius: 10px;
        border: 0px;
        width: 300px;
        height: 30px;
        margin-top: 10px;
        background-color: #fafafa;
        border-top: 1px solid rgb(230, 230, 230);
        padding-left: 15px;
        /*border: 1px solid #c6c6c6;*/
    }
    
    #mail{
        margin-bottom: 20px;
        border-radius: 10px;
        border: 0px;
        width: 300px;
        height: 30px;
        margin-top: 10px;
        background-color: #fafafa;
        border-top: 1px solid rgb(230, 230, 230);
        padding-left: 15px;
    }
    
    #message{
        margin-bottom: 20px;
        border-radius: 10px;
        border: 0px;
        width: 300px;
        height: 200px;
        margin-top: 10px;
        background-color: #fcfcfc;
        border-bottom: 3px solid rgb(255, 255, 255);
        border-top: 1px solid rgb(230, 230, 230);
        padding: 15px;
        resize: none;
    }
}