/*@font-face {
    font-family: 'Archivo Regular';
    src: url('../fonts/Archivo-Regular.woff2') format('woff2'),
        url('../fonts/Archivo-Regular.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo Black';
    src: url('../fonts/Archivo-Black.woff2') format('woff2'),
        url('../fonts/Archivo-Black.woff') format('woff');
    font-weight: 500;
    font-style: normal; 
}

@font-face {
    font-family: 'Archivo Black Italic';
    src: url('../fonts/Archivo-BlackItalic.woff2') format('woff2'),
        url('../fonts/Archivo-BlackItalic.woff') format('woff');
    font-weight: 500;
    font-style: normal; 
}

@font-face {
    font-family: 'Archivo Italic';
    src: url('../fonts/Archivo-Italic.woff2') format('woff2'),
        url('../fonts/Archivo-Italic.woff') format('woff');
    font-weight: 500;
    font-style: normal; 
}  */


body{
    color: black;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #dfdfdf;
}

a{
    text-decoration: none;
    color: black;
}

main{
    width: 100%;
    max-width: 100%;
    margin: none;

}

.tete_3d_fonds{
    position:fixed;
    width: 100%;
    height: 100%;
}

model-viewer{
    width: 100%;
    height: 100%;
}

////////////////////////*menu*/


header{
    z-index: 10;
}

#TTmobile{
    display: none;
}

#menu_burger{
    display: none;
}


#menu_commun{
    z-index: 10;
    width: 100%;
    position: fixed;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: black;
}

.menu_normal{
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 98%;
    height: 50px;
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#menu_burger{
    display: none;
}

.mySidenav{
    display: none;
}

#sidenav{
    display: none;
}


#NOMsite h1{
    line-height: normal;
    margin: 0 0 0 0;
    text-decoration: underline;
    font-family: "Fugue";
    font-style:   normal;
    font-weight:  normal;
    font-stretch: normal;
    font-size: 1.5rem;
}

#NOMsite h1:hover{
    font-family: "Fugue";
    font-style:   italic;
    font-weight:  normal;
    font-stretch: normal;
}


#menu_commun h2{
    font-size: 1rem;
    text-decoration: underline;
    font-family: "Fugue";
    font-style:   normal;
}

#deroulant{
    display: flex;
    justify-content: flex-start;
    width: 200px;
}

.menu_normal #sousmenu{
    display: none;
    padding: 0;
    margin: 0;
    position: absolute;
    color: black;
}

.menu_normal #sousmenu li{
    float:none
}

.menu_normal li:hover #sousmenu{
    display: block;
    justify-content: flex-start;
    margin: 40px 0 0 0;
    list-style: none;
    width: 200px;
    background-color: #f0f0f0;
}

#sousmenu h3{
    font-size: 0.75rem;
    margin: 10px 10px 0 0; 
    text-decoration: underline;
    font-family: "Fugue";
    font-style:   normal;
}

#sousmenu h3:hover{
    font-family: "Fugue";
    font-style:   italic;
}

#deroulant h2:hover{
    font-family: "Fugue";
    font-style:   italic;
    cursor: pointer;

}

.Gliens{
    display: flex;
    justify-content: space-between;
    text-align: end;
    width: 25%;
}

.MenuLiens{
    justify-content: center;
}

.MenuLiens a:hover{
    font-family: "Fugue";
    font-style:   italic;
}

////////////////////////*menu*/

.titre_projet{
    margin: 0 0 50px 0;
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.reponses h2{
    margin: 15px 0 25px 0; 
}

.reponses h2{
    font-size: 1em;
}

.presentation{
    margin: 100px 0 0 0;
}

.texte_pre_AP{
    font-family: "Fugue";
    font-style:   normal;
    padding: 0 0 0 100px;
    margin: 0 0 50px 0;
}

.texte_pre_AP p{
    font-size: 1em;
    line-height: normal;
    margin-bottom: 50px;
}

.texte_pre_AP p a:hover{
    color: black;
}

.presentation_accueil{
    position: absolute;
    display: block;
}


.projets_boite{
    position: absolute;
    display: block;
    justify-content: flex-start;
    background-color: #f0f0f0;
}

.img_pre{
    height: 200px;
    width: auto;
    border-bottom: 10px black;
}

.prjt_infos{
    display: none;
}


#prjt1{
    z-index: auto;
    position: absolute;
    margin: 100px 0 0 50px;
}
#prjt1:hover{
    z-index: 5
}

#prjt3{
    position: absolute;
    margin: 100px 0 0 400px;
}
#prjt3:hover{
    z-index: 5
}

#prjt4{
    position: absolute;
    margin: 100px 0 0 750px;
}
#prjt4:hover{
    z-index: 5
}

#prjt5{
    position: absolute;
    margin: 100px 0 0 1150px;
}
#prjt5:hover{
    z-index: 5;
    
}

.prjt_info {
    display: none;
    width: auto;
    height: auto;
    background-color: #f0f0f0;
    height: 200px;
}

.projets_boite:hover .prjt_info {
    display: block;
}

.prjt_info h1{
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    font-size: 1em;
}

.prjt_info h2{
    font-family: "Fugue";
    font-style:   normal;
    font-size: 1em;
}

.prjt_info h3{
    font-family: "Fugue";
    font-style:   normal;
    font-size: 0.7em;
}

/*
//////////////////
/////////////////
*/







@media all and (max-width: 815px){
    
    
    /*/////////////////////menu//////////////////////*/

    
.menu_normal #sousmenu{
    display: none;
    padding: 0;
    margin: 0;
    position: absolute;
    color: black;
}
    
.menu_normal li #sousmenu{
    display: block;
    justify-content: flex-start;
    margin: 40px 0 0 0;
    list-style: none;
    width: 200px;
    background-color: #f0f0f0;
}
    
#sousmenu h3{
    font-size: 0.75rem;
    margin: 10px 10px 0 0; 
    text-decoration: underline;
    font-family: "Fugue";
    font-style:   normal;
}
    
   /*/////////////////////menu//////////////////////*/ 
    

    
#deroulant h2:hover{
    font-family: "Fugue";
    font-style:   italic;
}   
    
.mySidenav{
    display: block;
}
#sidenav{
    display: block;
}
  
    /* Sidenav menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  justify-content: flex-end;
  z-index: 1;
  top: 0;
  right: -250px;
  background-color: #e8e8e8;
  padding-top: 60px;
  transition: right 0.5s ease;
}

/* Sidenav menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #111;
}

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

/* Active class */
.sidenav.active {
  left: 0;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

/* Icône burger */
.burger-icon span {
  display: block;
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
    
    
    
    
.presentation_accueil{
    position: absolute;
    display: flex;
}


.projets_boite{
    position: absolute;
    display: block;
    justify-content: flex-start;
    background-color: #f0f0f0;
}

.img_pre{
    height: 200px;
    width: auto;
    border-bottom: 10px black;
}

.prjt_info{
    display: block;
}


#prjt1{
    z-index: auto;
    position: absolute;
    margin: 50px 0 0 50px;
}


#prjt3{
    position: absolute;
    margin: 100px 0 0 350px;
}


#prjt4{
    position: absolute;
    margin: 500px 0 0 50px;
}


#prjt5{
    position: absolute;
    margin: 600px 0 0 350px;
}

    
} 






    
/*
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
*/

@media all and (max-width: 451px){ 
    
   /* ////////////////////// menu /////////////////// */

.tete_3d_fonds{
    display: none;
}

#TTmobile{
     display:block;
     z-index: 10;
    position: fixed; 
    } 
    
#TTmobile h1{
    font-size: 1.5rem;
    line-height: normal;
    margin: 0 0 0 0;
    text-decoration: underline;
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;   
    }
    
    
    #menu_burger{
     display:block;
     z-index: 10;
    position: fixed; 
    right: 1px;
    } 
    
.sims_img{
    width: 40px;
    height: 50px;
}

.sims_img img{
    width: 100%;
    height: 100%;
}
    
#NOMsite h1{
       display: none; 
    }   
    
    
.menu_normal{
    position: fixed;
    display: block;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color: #ffffff; 
    width: 210px;
    height: auto;
    margin: 30px 0 0 30px;
    right: 15px;
    font-size: 2rem;
    z-index: 8;
}
    
.Gliens{
display: block;
    margin: 0 0 0 0;
    }
    
/* Style pour le menu burger */
#menu_burger {
    cursor: pointer;
    font-size: 1.5rem;
    line-height: normal;
    margin: 0 0 0 0;
    text-decoration: underline;
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; 
    padding: 10px;
}

#menu_burger {
    margin: -15px 5px 0 0;
    padding: 10px;
}


/* Pour que le menu initialement soit caché */
#menu_commun {
    display: none; /* Menu caché par défaut */
}

/* Quelques améliorations de style pour le menu */
#menu_commun ul {
    list-style-type: none;
    padding: 0;
}
    
.Glien{
       margin: 0;
       padding: 0;
    }
    
#deroulant{
    position: relative;
}
#sousmenu {
      background-color: crimson;
    }
    
#menu_commun h2{
    font-size: 1.75rem;
    text-decoration: underline;
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    margin: 0 0 0 0;
    padding: 0 0 0 5px;
    width: 0;
}
    
.menu_normal #sousmenu{
    position: inherit;
    z-index: 9;
    margin: 0 0 0 -75px;
    padding: 0;
}
    
#sousmenu h3{
      font-size: 1rem; 
        margin: 25px;
    width: 100%;
    }

    
    /* ////////////////////// menu ////////////////// */

#prjt1{
    z-index: auto;
    position: absolute;
    margin: 50px 0 0 50px;
}


#prjt3{
    position: absolute;
    margin: 500px 0 0 50px;
}


#prjt4{
    position: absolute;
    margin: 1000px 0 0 50px;
}


#prjt5{
    position: absolute;
    margin: 1500px 0 0 50px;
}   
    
}

/*
///////////////////////////////////////////
//////////////////////////////////////////////
////////////////////////////////////////////////
//////////////////////////////////////////////////
///////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////
//////////////////////////////////////////////////
///////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////
//////////////////////////////////////////////////
///////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
///////////////////////////////////////


page PROJETS

*/

.corp_page{
    position: absolute;
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 0;
    margin: 70px 0 0 0;
    width: 100%;
    height: auto;
    
}


.infosT_projet {
    position: fixed;
    justify-content: flex-end;
    margin: none; padding: none;
    width: 25%;
    margin 0 0 0 5%; 
}

.titre_projet{
    line-height: 1rem;
    width: 80%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.infosT_projet h1{
    font-size: 1.75rem;
    line-height: 1.75rem;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.sous_titre{
    font-size: 1rem;
    line-height: 1rem;
    font-family: "Fugue";
    font-style:   normal;
}

.petitesInfos_projet{
    display: block;
    justify-content: flex-start;
    margin: 0 0 0 0;
}

.bouton_elements{
    display: flex;
    justify-content: flex-start;
    margin: 100px 0 0 0;
}

.openButton{
    font-family: "Fugue";
    font-style:   normal;
    display: block;
    justify-content: space-between;
    text-decoration: underline;
    font-size: 1rem;
    background-color: #f0f0f0;
    border: none;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: black;
}

.openButton:hover{
    background-color: none;
    font-family: "Fugue";
    font-style:   italic;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.boxpopup{
    background-color: chocolate;
    position: fixed;
    width: 90%;
    
}

.popup {
    display: none; /* Caché par défaut */
    position: absolute;
    width: 300px;
    height: auto;
    padding: 20px; 
    border: 1px solid #888;
    background-color: #fefefe;
    
}

#window2 .fenetre_popup{ 
    overflow-y: scroll;
    font-family: "Fugue";
    font-style:   normal;
    height: 500px;
}

.fenetre_popup{
    margin: 50px 0 0 0;
}

#window1 {
    top: 0px;
    left: 300px;
    z-index: 10;
}

#window2 {
    top: 0px;
    left: 400px;
    z-index: 20;
}

#window3 {
    top: 0px;
    left: 500px;
    z-index: 30;
    width: auto;
}

#window4 {
    top: 0px;
    left: 600px;
    z-index: 40;
    width: auto;
}

.close {
    color: #aaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.pinfos{
    display:flex;
    justify-content: flex-start;
    margin:0 0 0 0;
    padding: 0 0 0 0;
}

.categorie{
    font-size: 0.75rem;
    line-height: 0rem;
    width: 45%;
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.reponses{
    width: 55%;
    height: auto;
    font-family: "Fugue";
    font-style:   normal;
    margin: 0 0 5% 0;
}

.reponses h2{
    font-size: 0.75rem;
    margin: 0 0 0 0;
}

.texte_projet h1{
    font-family: "Fugue";
    font-style:   normal;
    font-size: 1.5rem;
    margin: 0 0 0 27px;
}

.carousel {
    width: 500px;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-images img {
    width: 500px;
    height: auto;
    display: none;
}

.carousel-images img.active {
    display: block;
}

.prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    font-size: 2em;
    cursor: pointer;
    left: 10px;
}

.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    font-size: 2em;
    cursor: pointer;
    right: 10px;
}

.projet{  
    margin: 0 0 0 30%;
    padding: 0 0 0 0; 
    width: 80%;
    height: 80%;
    
}

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

#SDCD_ordi{
        display: block
    }

#SDCD_mobile{
        display: none
    }






/*
//////////////////
/////////////////
*/

/* page projet mobil*/

@media all and (max-width: 815px){
    
.corp_page{
    position: absolute;
    display: block;
    justify-content: center;
    padding: 0 0 0 0;
    margin: 10% 0 0 0;
    width: 100%;
    height: auto;   
}
    
.infosT_projet {
    position: relative;
    justify-content: center;
    margin: none; padding: none;
    width: 90%;
    margin 0 0 0 10%; 
   }
    
    
.titre_projet{
    line-height: 1rem;
    width: 85%;
    margin: 5% 0 0 10%;
    padding: 0 0 0 0;
}
    
.projet{  
    margin: 0 0 0 5%;
    padding: 0 0 0 0;   
}
    
.Gimages_pre{
        width: 80%;
        height: 80%;
    }
    
    .Gimages_pre img{
       width: 100%;
        height: 100%; 
    }
    
#window1 {
    top: -50px;
    left: 50px;
    z-index: 10;
}

#window2 {
    top: -50px;
    left: 100px;
    z-index: 20;
}

#window3 {
    top: -50px;
    left: 150px;
    z-index: 30;
    width: auto;
}

#window4 {
    top: -50px;
    left: 200px;
    z-index: 40;
    width: auto;
}
    
.bouton_elements{
       margin: 100px 0 50px 50px; 
    }
    
#SDCD_ordi{
        display: none
    }

#SDCD_mobile{
        display: block
    }
    
}

/*
//////////////////
/////////////////
*/

@media screen and (max-width:451px){

    .corp_page{
    position: absolute;
    display: block;
    justify-content: center;
    padding: 0 0 0 0;
    margin: 10% 0 0 0;
    width: 100%;
    height: auto;   
}

#TTmobile h1{
    font-size: 1.25rem;
}

#menu_burger {
    margin: 0px 5px 0 0;
    padding: 10px;
}

    
.infosT_projet {
    position: relative;
    justify-content: center;
    margin: none; padding: none;
    width: 90%;
    margin 0 0 0 10%; 
   }
    
    
.titre_projet{
    line-height: 1rem;
    width: 85%;
    margin: 5% 0 0 10%;
    padding: 0 0 0 0;
}
    
.bouton_elements{
       margin: 100px 0 50px 25px; 
    }
    
.projet{  
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
    height: 100%;   
}
    
.Gimages_pre{
        width: 95%;
        height: 95%;
    }
    
    .Gimages_pre img{
       width: 100%;
        height: 100%; 
    }
    
#window1 {
    top: -50px;
    left: 15px;
    z-index: 10;
}

#window2 {
    top: -50px;
    left: 30px;
    z-index: 20;
}

#window3 {
    top: -50px;
    left: 45px;
    z-index: 30;
    width: auto;
}

#window4 {
    top: -50px;
    left: 60px;
    z-index: 40;
    width: auto;
}
    
.carousel {
    width: 300px;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-images img {
    width: 300px;
    height: auto;
    display: none;
}
    
}



/*
////////////////// page Infos
/////////////////
*/

.Infos_Textes{
    width: 75%;
    height: auto;
}

.Infos_Ttitres{
    font-family: "Fugue";
    font-style:   normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.Infos_Ttextes{
    font-family: "Fugue";
    font-style:   normal;
}


/*/////////////////////////
/////////////////////////

tablette

/////////////////////////*/

@media all and (max-width: 815px){

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

}



/*
//////////////////////
///////////////////////
/////////////////

téléphone

*/

@media all and (max-width: 451px){ 

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

}