#fondDetailsTravaux{
  width:0vw;
  height:100vh;
  background-color: #eee9e1;
    /*background-color: yellow;*/

  position: fixed;
  top: 0;
  right: 0;
  z-index: 1800;
  transition: ease-in .15s .3s;
  -webkit-transition:ease-in .15s .3s;
  -o-transition:ease-in .15s .3s;
  overflow: hidden;
  opacity: 100%;
}

.fondDetailsTravauxAnim{
  width: 100vw !important;
}

#BlocNoirFondDetailsTravaux{
  width: 0vw;
  height:100vh;
  background-color: #00f;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1700;
  transition: ease-in .35s;
  -webkit-transition:ease-in .35s;
  -o-transition:ease-in .35s;
  opacity: 100%;
}

.BlocNoirFondDetailsTravauxAnim{
  width: 100vw !important;
}

.detailTravaux{
width: 100%;
height: 40vh; 
opacity: 0;
transition: ease-in .2s;
}

.detailTravauxOpacity1{
opacity: 1;
  transition: ease-in .2s .9s;
  -webkit-transition:ease-in .2s .9s;
  -o-transition:ease-in .2s .9s;
}
/*
#clickViewBrumes{
background-image:url(../src/miniatures/brumes2.png);
}
#clickViewFamilities{
background-image:url(../src/miniatures/familities.png);
}
#clickViewLytia{
background-image:url(../src/miniatures/lytia.png);
}
#clickViewPaysages{
background-image:url(../src/paysages/affichePP01.jpg);
}
#clickViewPaques{
background-image:url(../src/miniatures/paques.png);
}
#clickViewIllu{
background-image:url(../src/illustrations/illustration06.png);
}
*/
.fermeturedetailsProjets{
width: 100px;
height: 100px;
cursor:pointer;
transition: transform .35s ease-in-out;
margin-top: 10px;
opacity: 0;
position:fixed;
top:-28px;
left:0px;
z-index:20000;
}

.fermeturedetailsProjets:hover{
transform: translateX(-10px);
}

#infoSurvol{
  position: absolute;
  left:50%;
  top:50%;
  transform:translateY(-50%) translateX(-50%);
  text-align:center;
}


.text-outer{
display: table;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
overflow: hidden;
}

.text-inner{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}


.descriptionProjetSurvol{
font-size: 1em;
font-family:"tex_gyre_cursorregular", "Cutive Mono", monospace;  
}

.containerTravaux{
top:50%;
transform: translateY(-50%);
position: fixed;
width: 66%;
}

.imageCentree, .imageCentree-x2, .imageCentreeDouble, .imageCentreePetite{
  width: 100%;
    background-size: contain;
  background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
   transition: ease-out .17s ;
  -webkit-transition:ease-out .17s ;
  -o-transition:ease-out .17s ;
  margin-top: 30px;
  background-size: 140%;
}

.containerFullSizeImage{
  height: 85vh;
  width: 100%;
  background-position: center; 
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}

/* -------------------- IMAGES --------------------- */


/* -------- PLUM CAMPAGNES --------- */
   /*
.imageCentreePlumCampagnes04, .imageCentreePlumCampagnes01Fade_2024{
  background-image:url(../src/plumcampagnes/Fauve-2024.jpg);
  background-size: contain !important;
  }
  
.imageCentreePlumCampagnes05, .imageCentreePlumCampagnes02Fade_2024{
  background-image:url(../src/plumcampagnes/Iceberg-2024.jpg);
  background-size: contain !important;
  }

.imageCentreePlumCampagnes06, .imageCentreePlumCampagnes03Fade_2024{
  background-image:url(../src/plumcampagnes/Lilas-2024.jpg);
  background-size: contain !important;
  }
    
.imageCentreePlumCampagnes07, .imageCentreePlumCampagnes04Fade_2024{
  background-image:url(../src/plumcampagnes/Oranger-2024.jpg);
  background-size: contain !important;
  }

/* -------- PLUM CHARTE RS --------- */
.imageCentreePlumCharteRS01{
  background-image:url(../src/plumcharte/Couverture-HT.jpg);
  background-size: contain !important;
  }

.imageCentreePlumCharteRS02{
  background-image:url(../src/plumcharters/Slide-bloc-olive.jpg);
  background-size: contain;
  }

.imageCentreePlumCharteRS03{
  background-image:url(../src/plumcharters/Couverture-a-la-une.jpg);
  background-size: contain;
  }

.imageCentreePlumCharteRS04{
  background-image:url(../src/plumcharters/Slide-pop.jpg);
  background-size: contain;
  }
  
.imageCentreePlumCharteRS05{
  background-image:url(../src/plumcharters/Slide-facades.jpg);
  background-size: contain;
  }

.imageCentreePlumCharteRS06{
  background-image:url(../src/plumcharters/Slide-bloc-terra.jpg);
  background-size: contain;
  }  

.imageCentreePlumCharteRS07{
  background-image:url(../src/plumcharters/Colorblock\ sombre.jpg);
  background-size: contain;
  }
    
.imageCentreePlumCharteRS08{
  background-image:url(../src/plumcharters/Shopping-List-Liste.jpg);
  background-size: contain;
  }
    
.imageCentreePlumCharteRS09{
  background-image:url(../src/plumcharters/Shopping-List-Budget.jpg);
  background-size: contain;
  }


/* -------- BRUMES --------- */
.imageCentreeBrumes01{
background-image:url(../src/brumes/logo-simple-bleu.png);
}

.imageCentreeBrumes02{
background-image:url(../src/brumes/logo-simple-transparent.png);
}

.imageCentreeBrumes04{
background-image:url(../src/brumes/logo-complet-bleu.png);

}

.imageCentreeBrumes05{
background-image:url(../src/brumes/logo-complet-transparent.png);
}

.imageCentreeBrumes06{
background-image:url(../src/brumes/brumes03.jpg);
}

.fullSizeImageBrumes01{
background-image:url(../src/brumes/brumes04.jpg);
}


/* -------- LYTIA --------- */
.imageCentreeLytia01{
background-image:url(../src/lytia/lytia-6A.png);
background-size: 110%;
}

.imageCentreeLytia02{
background-image:url(../src/lytia/lytia-full-M.png);
}

.imageCentreeLytia03{
background-image:url(../src/lytia/lytia-elements.png);
}

.imageCentreeLytia04{
background-image:url(../src/lytia/lytia-gris.png);
}

.imageCentreeLytia05{
background-image:url(../src/lytia/lytia-M+A.png);
}

.imageCentreeLytia06{
background-image:url(../src/lytia/mock-up-poster.jpg);
background-size: 90%;
overflow: hidden
}

.mockUpLytiaDesktop{
display: none;
}

.mockUpLytiaMobile{
  width: 300px;
  margin:auto;
}

.filtreCouleur{
  width: 300px;
  height: 410px;
  background-color: #fff;
  mix-blend-mode: multiply;
    transition: 5s linear;
  -webkit-transition:5s linear;
  -o-transition:5s linear;
  /*transform: translateY(-50%);*/
    margin:auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);}

.filtreMagenta{
  background-color: #f0f;
}

.filtreCyan{
  background-color: #0fff;
}

/* -------- MARGUERITE  --------- */

.imageCentreeMarguerite01{
  background-image:url(../src/marguerite/logos-marguerite.png);
  background-size: contain;
}

.imageCentreeMarguerite02{
  background-image:url(../src/marguerite/icone-marguerite.png);
  background-size: contain;
  height: 18vh !important;
  margin-bottom: 30px;
}

.imageCentreeMarguerite03{
  background-image:url(../src/marguerite/user-journey-site.png);
  background-size: contain;
}

.imageCentreeMarguerite04{
  background-image:url(../src/marguerite/composants-site.png);
  background-size: contain;
}

.imageCentreeMarguerite05{
  background-image:url(../src/marguerite/typos-marguerite.png);
  background-size: contain;
}

.imageCentreeMarguerite06{
  background-image:url(../src/marguerite/couleurs-marguerite.png);
  background-size: contain;
}

.imageCentreeMarguerite07, .imageCentreeMarguerite08, .imageCentreeMarguerite09, .imageCentreeMarguerite10, .imageCentreeMarguerite11, .imageCentreeMarguerite12, .imageCentreeMarguerite13, .imageCentreeMarguerite14, .imageCentreeMarguerite15{
  background-size: contain;
}

.imageCentreeMarguerite07{
  background-image:url(../src/marguerite/accueil.png);
}

.imageCentreeMarguerite08{
  background-image:url(../src/marguerite/accueil-1.png);
}

.imageCentreeMarguerite09{
  background-image:url(../src/marguerite/accueil-2.png);
}

.imageCentreeMarguerite10{
  background-image:url(../src/marguerite/recette-3.png);
}

.imageCentreeMarguerite11{
  background-image:url(../src/marguerite/recette.png);
  transition-delay: .1s
}

.imageCentreeMarguerite12{
  background-image:url(../src/marguerite/recette-2.png);
  transition-delay: .2s
}

.imageCentreeMarguerite13{
  background-image:url(../src/marguerite/edition-creation-de-recette.png);
}

.imageCentreeMarguerite14{
  background-image:url(../src/marguerite/edition-creation-de-recette-1.png);
  transition-delay: .1s
}

.imageCentreeMarguerite15{
  background-image:url(../src/marguerite/edition-creation-de-recette-2.png);
  transition-delay: .2s
}


/* -------- CARTE CADEAU  --------- */
.fullSizeImageCarte01{
  background-image:url(../src/cartecadeau/carte-cadeau-background.png);
}

.imageCentreeCarte02{
  background-image:url(../src/cartecadeau/scan-illu.jpg);
}

.imageCentreeCarte03{
  background-image:url(../src/cartecadeau/cartecadeau3.png);
  background-size: 100% !important;
}
.imageCentreeCarte04{
  background-image:url(../src/cartecadeau/cartecadeau4.png);
  background-size: 100% !important;
}
.imageCentreeCarte05{
  background-image:url(../src/cartecadeau/cartecadeau5.png);
  background-size: 100% !important;

}

img, .marginImages{
  margin-bottom:40px
}


.imagesSuperposeesVerticales{
position: absolute;
top:0px;
left:50%;
transition: ease-out .17s ;
-webkit-transition:ease-out .17s ;
-o-transition:ease-out .17s ;
height: 100%;
width: auto;
transform: translateX(-50%);
}


.imagesSuperposees{
  position: absolute;
  transition: ease-out .17s ;
  -webkit-transition:ease-out .17s ;
  -o-transition:ease-out .17s ;
  width: 100%;
}

.imageCentreeCarte06{
  background-image:url(../src/cartecadeau/mock-upcarte-cadeau.jpg);
}



/* -------- PAQUES --------- */

.fullSizeImagePaques01{
  background-image:url(../src/paques/paques-background.png);
}



.imageCentreePaques01{
background-image:url(../src/paques/paques-carre.png);
}

.imageCentreePaques02{
background-image:url(../src/paques/paques-couleurs.png);
background-size: 110%;
}

.imageCentreePaques03{
background-image:url(../src/paques/Paques-01.png);
background-size: 110%;
}

.imageCentreePaques04{
background-image:url(../src/paques/Paques-03.png);
background-size: 110%;
}


/* -------- ILLUSTRATIONS --------- */

.contain{
  background-size: cover;
}

.fullSizeImageIllu01{
background-image:url(../src/illustrations/rainbow.jpg);
}

.imageCentreeIllu02{
background-image:url(../src/illustrations/illustration02.jpg);
display: none;
}

.imageCentreeIllu03{
background-image:url(../src/illustrations/illustration05.jpg);
height: 95vh;
background-size: contain !important;
}

.imageCentreeIllu04{
background-image:url(../src/illustrations/gradient.jpg);
height: 95vh;
background-size: contain !important;
}

.imageCentreeIllu05{
background-image:url(../src/illustrations/dots.jpg);
display: none;
}

.imageCentreeIllu06{
background-image:url(../src/illustrations/arms.jpg);
}

.fullSizeImageIllu07{
background-image:url(../src/illustrations/illustration01.jpg);
}

.fullSizeImageIllu08{
background-image:url(../src/illustrations/visage-fleuri.jpg);
background-size: cover;
}

.displayBlock{
  display: block !important;
}

.displayNone{
  display: none !important;
}

.height0{
  height: 0px;
  overflow: hidden;
  padding-top: 0px;
}

.numeroDetails, .titreProjetSurvol, .categorieProjetSurvol, .paragrapheDetails, .paragrapheDetailsP0, .contexte, .role, .indicationAffiche{
transition: .3s ease-out;
}

.paddingDetailsTravaux{
transform: translateX(24px);
opacity: 0;
}

.numeroDetails{
color:#00f;
font-family: 'Playfair Display', serif;
font-weight: 900;
margin-left: -5px;
margin-bottom: -10px;
font-size:42pt;
width: 50px;
margin-top: 40px;
}

.paragrapheDetailsP0{
text-align: justify;
}

.titreProjetSurvol{
font-family: "Playfair Display", serif;
font-weight: 900;
font-style:italic;
color:#1e1e1e;
line-height: 1.3em;
font-size:32pt;
text-align: center;
}

.categorieProjetSurvol, .indicationAffiche{
font-family: 'Jost', sans-serif;
font-weight: 700;
color:#1e1e1e;
line-height: 1.2;
font-size:16pt;
text-align: center;
letter-spacing: 0.05em;
margin-top: 15px;
}

.contexte, .role{
font-family: 'Jost', sans-serif;
font-weight: 700;
color:#1e1e1e;
font-size:14pt;
text-align: center;
letter-spacing: 0.05em;
margin-top: 10px;
}

.textCenter{
text-align: center;
}

.paragrapheDetails, .paragrapheDetailsP0{
font-family: 'Playfair Display', serif;
font-weight: 500;
color:#1e1e1e;
line-height: 1.2;
font-size: 10pt;
}

.paragrapheDetails{
opacity: 0;
transform: translateY(40px);
  transition: ease-in .4s;
  -webkit-transition:ease .4s;
  -o-transition:ease-in .4s;
}

.testLytia{
height:500px;
color:green;
line-height: 1em;
font-family:"lytiamedium";
text-transform: uppercase;
color:blue;
font-size:36pt;
width: 100%;
border:none;
padding:0 80px;
}

.essaiLytia{
  color:#1E1E1E;
  font-size:12pt;
  text-align:  left;
}

.essaiLytia p{
  display: none;
}





/*------------ ANIMATION SCROLL TRAVAUX ------------*/

.paragrapheDetailsAnim{
opacity: 1;
transform: translateY(0);
}

.imageCentreePetite{
  height:450px;
}
.imageCentree{
  height: 450px;
  background-size: contain;
  }

.imageCentreeGrandFormat{
  height: 500px;
  background-size: contain;
}

.heightS0{
  /*height: 88vh;*/
}

.presentationProjet {
  margin: 80px 0px;
}

/*------------ RESPONSIVE -------------*/
@media (min-width: 576px) {

  .heightS0{
    height: 88vh;
  }

.imageCentreeIllu02{
display: block;
}

.imageCentreeIllu05{
display: block;
}

.contain{
  background-size: contain;
}

  .slider-nav > div {
    margin: 0 15px;
    width: 2px;
  }

  .essaiLytia p{
    display: block;
    padding: 0px 100px 30px;
  }

    .testLytia{
  font-size:48pt;
  }

  .imageCentree, .imageCentree-x2{
    height:400px;
    }    


} 


@media (min-width: 700px) {
  
   .detailTravaux{
  height: 60vh;  
  }

  .testLytia{
  font-size:72pt;
  }  
 
}

@media (min-width: 768px) {

  .categorieProjetSurvol, .titreProjetSurvol, .contexte, .role{
    text-align: left;
  }

  .presentationProjet {
    /*margin:100px 0px;*/
    position: relative;
    top:50%;
    transform: translateY(-50%);
    margin: 0 -15px;
  }  

  .imageCentreePetite{
    height:340px;
  } 

  .imageCentree, .imageCentree-x2{
    height: 340px;
  } 

  .imageCentreeGrandFormat{
    height: 620px;
  }

.imageCentreeDouble{
 height:8px;
}  

  .paragrapheDetails{
    text-align: right;
    } 

  .paragrapheDetailsDroite{
  text-align: left;
  } 
 
}




@media (min-width: 992px) {

  img, .marginImages{
    margin-bottom:100px
  }  

  .imageCentreePetite{
    height:400px;
  } 

  .imageCentree, .imageCentree-x2{
    background-size: contain;
    height: 500px;
  } 

  .imageCentreeGrandFormat{
    height: 620px;
  }

.mockUpLytiaDesktop{
display: block;
margin: auto;
width: 800px;
}
  .filtreCouleur{
  width: 800px;
  height: 534px;
  }

.mockUpLytiaMobile{
display: none;
}

.imageCentreeLytia06{
/*background-image:url(../src/lytia/couleurs-lytia-horizontal.gif);*/
background-size: 100%;
}

  .titreProjetSurvol{
  font-size: 80pt;
  }

  .categorieProjetSurvol, .indicationAffiche{
  font-size: 20pt;
  margin-top: 15px;
  }

  .contexte, .role{
  font-size:16pt;
  margin-top: 50px;
  }

  .role{
    font-size:16pt;
    margin-top: 30px;
    }

  .paragrapheDetails, .paragrapheDetailsP0{
    font-size: 12pt;
  }

.paragrapheDetailsP0{
    margin-top: 10px;
  }

  .margeDetailsprojets{
    top:38vh;
    position: relative;
  }

  .detailTravaux{
  height: 95vh;  
  }

  .essaiLytia p{
    padding: 50px 100px 30px;
  }

}


@media (min-width: 1200px) {

  .imageCentreePetite{
    height:500px;
  } 

  .imageCentree, .imageCentree-x2{
    height:600px;
  } 

  .imageCentreeGrandFormat{
    height: 740px;
  }

.fermeturedetailsProjets{
width: 120px;
height: 120px;
}


@media (min-width: 1500px) {

  .imageCentreePetite{
    height:600px;
  }   

  .imageCentree, .imageCentree-x2{
    height:720px;
  }  

  .imageCentreeGrandFormat{
    height: 820px;
  }

  .mockUpLytiaDesktop{
    width: 1140px;
    height: auto;
    margin:auto;
  }

  .filtreCouleur{
  width: 1140px;
  height: 761px;
  }
}