:root{
    --headerHeight: 254px;
}

.tinyhidden1{ position:absolute; width:2%; top:57%; left:94%; display:block; z-index:100;  }
.tinyhidden2{ position:absolute; width:3%; top:57%; left:97%; display:block; z-index:100;  }

html, body {
    font-family: 'helvetica';
    font-size: 1.2vw;
    margin: 0; padding: 0; width: 100%; height: 100%; 
}
/* Login */
#plateau{ width: 100%; min-height:360px; margin:auto; padding:auto; text-align: center; border-spacing: 0px;  }
#plateau #contain_login{ display: block; margin: 0 auto; margin-top:1%; width:40%; text-align: center; }
#plateau #contain_login form{ width:100%; text-align: left; font-size:2.8vh; }
#plateau #contain_login form label{ display:block; width:95%; padding: 0%; margin-top:3%;  }                     
#plateau #contain_login form input[type="text"] { position: relative; width: 95%; margin-top:0%; font-size: 2.8vh; }
#plateau #contain_login form input[type="password"] { position: relative; width: 95%; margin-top:0%; font-size: 2.8vh; } 
#logintitle{ width: 100%; text-align: center; margin-top: 3%; font-size:3.8vh; }
#contain_forgotpass { width: 100%; text-align: center; margin-top: 10%; }
#contain_forgotpass a { text-decoration: none;	font-size: 1vw; }
#contain_forgotpass a:hover{ color:blue; } 
	
#dialog_forgotpass{ width:80%; height:70%; margin:auto; background:#F0F0F0; border:4px solid #d3bdbd; border-style: inset;  }
#fermedialog{ display:block; margin-left:94%; } 
#fermedialog:hover{ cursor:pointer; } 
	
#contain_forgotemail{ width:100%; text-align:center; margin-top:4%; padding:0%; }
#contain_forgotemail a{ text-decoration:none; font-size:1.8vw; }
#contain_forgotemail a:hover{ color:blue; } 	


/* #plateau #contain_login form #community{ text-transform: lowercase; } */
#plateau #contain_login form #email{ text-transform: lowercase; }

#plateau #contain_login form #submit{ text-align: center;  }
#plateau #contain_login form input[type="submit"] { position: relative; width: auto; text-align: center; margin-top: 1%; padding: 5%; font-size: 17px;  } 

#plateau #liens{ display:block; width:100%; background:#cacaca; margin:1%; padding:0%; }
#plateau #liens .liens{ display:inline-table; margin:0%; padding:1%; text-decoration:none; }

/* Menu */
nav #burger{ display: none; }
#menu {
    display: inline-block;               
    padding:1%; margin:0%;            
    background-color: #d5d5d5;       
    width:100%; 
    text-align: left;
}
#menu li {
    display: inline-block; 
    list-style-type: none ;       /* Suppression des puces */
    margin:0%;
    padding:0%;
    width:auto;
}
#menu a {
    display:block;            /* Transformation en block */
    min-width: 13vw;           /* Largeur minimale des liens */      
    margin: 0%;               /* Marges externes */
    padding: 1%;            /* Marges internes */
    text-align: center;           /* Centrage du texte */   
    /* background-color: #1ABC9C; */    /* Arrière-plan */
    color: #000;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    /* border: 1px solid #fff; */       /* Ajout d'une bordure */
    /* border-radius: 4%; */           /* Arrondis des bordures */
    
    transition: all 1s ;          /* Ajout des effets de transition */
}
#menu a.actif {    
    background-color: #000 ; 
    color: #1ABC9C ;
    border-color: #1ABC9C ;
}
#menu a:hover,
#menu a:hover.actif{
    /* background-color: #ed2794; */
    color: #fff;
    border-color: #ffe843;
}
/* header login */
#header_login{ position: relative; display: block; width:100%; margin: 0 auto; padding: 0px; text-align:center;}
#header_login #logoLG{ position:absolute; left:3%; top:5%; width:8%; }
#header_login img{ width: 100%; }
/* header */
#header_section{ position: relative; display: block; width:100%; margin: 0px; padding: 0px; aspect-ratio: 6 / 1; overflow:hidden;}
    #headerPN{ position:absolute; left:77%; top:55%; width:auto; margin:1%; padding:1%; z-index:13; font-size:1.8vw; background:#fefefe; opacity:0.4;}
	#avatar{ position:absolute; width:17%; left:0%; top:0%; z-index: 11;  }
        #headerAvatar{ width:90%; margin-left:2%; padding:4%; }
    
    #header{ position:absolute; left:0%; top:0%; width:100%; z-index: 10;  }
        #headerHeader{ width:100%;  }
    
    #logo{ position: absolute; width:17%; right:0%; top:0%; z-index: 12;  }
        #headerLogo{ width: 90%; margin-right:2%; padding:4%;  }        

/* inscription (register) user */
/*
#registeruser{ margin-top:3%;}
#sliderR_gauche{ display: inline-block; width:1%; border-right: 0px solid gray; text-align: center;padding: 1%;}
     #compte_avatar{ width: 40%!important; }
     #compte_presentation{ width: 99%; margin:1%; padding: 1%; text-align: left; }       
#sliderR_milieu{ display: inline-block; width:67%; text-align: left; vertical-align: top; padding: 1%; }
#sliderR_droite{ position:fixed; display: inline-block; width:25%; height:70vh; overflow:auto; background:red; text-align: left; vertical-align: top; border-left: 1px solid gray; padding:1%; }
*/
#registeruser {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 0; /* évite un décalage parasite */
}

/* ===== Colonne gauche ===== */
#sliderR_gauche {
  width: 1%;
  background-color: #f8f8f8;
}

/* ===== Colonne milieu ===== */
#sliderR_milieu {
  width: 67%;
  background-color: #fff;
  padding: 10px;
}

/* ===== Colonne droite (fixe) ===== */
#sliderR_droite {
	position: fixed;
	right: 0;
	width: 25%;
	overflow-y: auto;
	background-color: #fafafa;
	box-shadow: -4px 0 10px rgba(0,0,0,0.1);
	padding: 20px;
	transition: top 0.2s ease, height 0.2s ease;
	top: 16.6vw; /* correspond à 1/6 de la largeur de la fenêtre */
	height: calc(100vh - 16.6vw);
}
     
	 
	 
	 #form_user{  }
	 #form_user #titreform { position: relative; width: 95%; font-size: 1.7vw; text-align: center;  margin-top:0%; } 
	 #form_user #amountText { position: relative; width: 98%; font-size: 1.3vw; text-align: left; margin:0%; padding:0%; border:0px;  } 	 
     #form_user #amountText pre{ font-family:helvetica; font-size:1.3vw; }
	 #form_user label{ display:block; width:95%; padding: 0%; margin-top:6%; }                     
     #form_user input[type="text"] { position: relative; width: 95%; font-size: 1.4vw; margin-top:0%; } 
	 #form_user input[type="password"] { position: relative; width: 95%; font-size: 1.4vw; margin-top:0%; } 
     #form_user input[type="submit"] { position: relative; width: auto; text-align: center; margin-top: 7%; padding: 3%; } 
	 
	 /* Profile affiliate */
	 #form_aff{ 
		width: 92%; margin-left:1%; margin-top:0%; padding:1%; vertical-align: top; background-color: #cacaca;
        border: 2px solid gray; border-radius: 2rem; box-shadow: 0 0 25px rgba(0,0,0,0.8);
        font-size: 1.0vw; color: rgb(52, 73, 94);	 
	 }
	 
     #form_aff #titreform { position: relative; width: 95%; font-size: 1.7vw; text-align: center;  margin-top:0%; }       
     #form_aff label{ display:block; width:95%; padding: 0%; margin-top:1%; text-align:left; }                     
     #form_aff input[type="text"] { position: relative; width: 95%; font-size: 1.4vw; margin-top:0%; } 
     #form_aff input[type="submit"] { position: relative; width: auto; text-align: center; margin-top: 7%; padding: 3%; } 	 

/* signup pour les admin*/
#header_sectionSI{ position: relative; width: 100%;  }
#logoSI{ position: absolute; top:14%; left:2%; width: 5%; z-index:10; }
    #logoSI img{ width: 100%!important; }
#headerSI{ position: relative; width: 100%; text-align: center; }
    #headerSI img{ width: 100%!important; }
#signupview{ margin-top:5%; }
#signup_title{ width:100%; font-size: 4.5vw; text-align: center; }
#signup_free{ width:100%; text-align: center; }
    #signup_free img{ width:30%;  }
#signupG{ display: inline-block; width: 40%; margin-left:8%; padding:1%; vertical-align: top;} 
    .signuptextcontent{ font-size: 5.5vh;}
    .signuptextcontentT{ color: rgb(52, 73, 94); font-size: 1.8vw;}

#signupD{ display: inline-block; width: 40%; margin-right:5%; padding:1%; vertical-align: top; 
            border: 2px solid gray; border-radius: 2rem; box-shadow: 0 0 25px rgba(0,0,0,0.8);
            font-size: 1.5vw; color: rgb(52, 73, 94);
        }
        
    #signupD label{ display:block; width:95%; padding: 1%; }                     
    #signupD input[type="text"] { position: relative; width: 95%; height: 10vh; margin-top:0%; font-size: 4vh; } 
    #signupD input[type="submit"] { position: relative; width: 40%; height: 10vh; margin-top:3%; font-size: 2.2vw;
                                    border: 2px solid gray; border-radius: 2rem; box-shadow: 0 0 15px rgba(0,0,0,0.8);
                                    text-align: center;        
                                  }                           

/* home */   
#typeconnect{ position: absolute; left:10%; top:0%; font-size: 5vh; color: red; z-index: 10; }            
#slider_gauche{ display: inline-block; width:20%; height:80%; margin-left:1%; text-align: center;}
    #compte_avatar{ width: 40%; }
    #compte_presentation{ position:fixed; width: 99%; margin:1%; padding: 1%; text-align: left; }
#slider_droite{ display:inline-block; width:75%; height: 80%; min-height:360px; margin:0%; padding: 1%; vertical-align: top; border-right: 1px solid gray;}
/* KNOWLEDGE */
#slider_gaucheKNW{ width:20%; height:80%; margin-left:1%; text-align: center;}
#slider_droiteKNW{ width:75%; height: 80%; min-height:360px; margin:0%; padding: 1%; vertical-align: top; border-right: 1px solid gray;}	

#help_triangle{ position:absolute; width:100%; left:1%; top:1%; font-size:1vh; }
.result_knowledge{ position:relative; }
.contain_media{ width:100%; }
.KNW_topic{ margin-left:2%;  }
.KNW{ width:96%; margin-left:4%; }
.KNW:hover{	cursor: pointer;	}

.KNWB , .KNWD { position:absolute; left:0%; top:0%; }
.KNWB::before { content: "\25BC"; 		}
.KNWB:hover{	cursor: pointer;	}
.KNWD::before {	content: "\25B6"; 		}
.KNWD:hover{	cursor: pointer;	}


/* LES posts */
#lblprivate{ position:relative; display:block; margin-left:0%; padding:0%; }
#privatecontain{ width:35%; min-height:2vh; margin:0%; padding:1%; overflow:auto; font-size: 1.1vw; background: #afafaf; z-index: 10; }

#postview{ }
#modifAnPost { width: 100%; margin: auto; padding: 0%; background: #f9fafb;    }
#modifAnPost::backdrop {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}
#form_post{ width: 96%; margin:0%; padding:2%;}
#fetch_post, #fetch_comment { position:relative; width:100%; height:93vh; }
#fermedialogMAP{ position:absolute; display:block; top:6%; left:95%; z-index:1; } 
#fermedialogMAP:hover{ cursor:pointer; } 	

#media_tool{ display:none; width:95%; margin-left:-1%; padding:1%; }
#media_tool #mediaWidth{ width:75%; }
#media_tool #tool_width{ display:inline-block; width:10%; margin-left:3%; vertical-align:top; }
#media_tool #media_width{ display:inline-block; width:50%; }
#media_tool .align_icon{ display:inline-block; width:10%; margin-left:8%; }
#media_tool .align_icon img{ width:25%; }	
	
#support_media{ position:relative; width:100%; border:1px solid #cacaca;  }
#align_media{ position:relative; width:100%; border:1px solid black; }
#align_media img, #align_media video, #align_media audio {  width:100%;  }	

.datepost{  }

.unpost{ position: relative;}
.support_avatar{ position:relative; display:inline-block; }
.support_avatar img{ width:90px; height:90px; border-radius: 50%; background-color: gray; }

#previewNP{ max-width: 20%; max-height: 10%;}
.POSTB, .POSTD { position:absolute; left:-75%; top:22%;	}
.POSTB::before { content: "\25BC"; 		}
.POSTB:hover{	cursor: pointer;	}
.POSTD::before { content: "\25B6"; 		}
.POSTD:hover{	cursor: pointer;	}    
	#postview{ display: inline-block; width:100%; height: 80%; margin:1%; padding: 0%; vertical-align: top;  }
	#postview #posttool{ position:absolute; width:40%; left: 50%; }
	#postview #postsearch{ position:relative; width:92%; height:32px;}
	#postview .postloupe{ position:relative; width:5%; vertical-align:middle; }
	#postview .postloupe:hover{ cursor:pointer; box-shadow: 3px 3px 9px 3px #000000; }
	#postview #postsearchresult{ position:relative; width:96%; height:30vh; margin:0%; padding:1%; 
									overflow:scroll; border:1px solid #cacaca; background:#fdfdfd; z-index:10; }
	#postview .linksearch{ display:block; width:98%; overflow:hidden; height:2.5vh; font-size:2vh; margin-top:1%; padding:0%; }
	#postview .linksearch:hover{ cursor:pointer; box-shadow: 1px 1px 3px 1px orange; }
	
	#postview #epingletool{ position:relative; width:40%; background-repeat:no-repeat; }
	#etatepingle{ position:relative; display:inline-block; width:32px; height:32px; left:1%;   }
	#postepingle{ font-size:1.8vh; margin-left:2%; }
	#postview #epingleresult{ position:relative; width:96%; height:30vh; margin:0%; padding:1%; 
									overflow:scroll; border:1px solid #cacaca; background:#fdfdfd; z-index:10; }
	
		
	.epingler{ position:absolute; width:32px; height:32px; left:97%; top:2%; background-repeat: no-repeat;   }
	
	.epingleon{ background: url("/image/img/icons/pin_up.png");   }
	.epingleoff{ background: url("/image/img/icons/pin_down.png"); }
	.epingleon:hover, .epingleoff:hover{ cursor:pointer;  }									
	
	.media_contain{display:inline-block; margin-left:2%; width:10%; vertical-align:top; }
	.media_contain:hover{ cursor:pointer; }
		.text_contain{display:inline-block; width:80%; margin-left:2%; margin:0%; padding:1%; position:relative;	}
		.posthtm{ position:relative;  background:#E8F8FF; padding:1%; }
		/*
		.posthtm:before { content: "";	width: 0px;  height: 0px;position: absolute; left: -0px; top: 6%;
			border-left: 10px solid transparent; border-right: 10px solid #E8F8FF; border-top: 10px solid #E8F8FF; border-bottom: 10px solid transparent;
		}
		*/
        #postview .unpost{ position:relative; width: 94%; margin:1%; padding: 1%; border: 2px solid #cacaca; border-radius: 1vw;}
		
        #postview textarea{ width: 80%; margin:1%; padding: 1%; border: 1px solid #cacaca; }
        .mediaimage{ width:10%;}
    .audioimg{ width: 100%; }
    .videoimg{ width: 100%; }
        .videoimg video{ width:100%; }
    .pdf { width: 100%; }
        .pdf img { width: 100%; }
	.pdf:hover{ cursor:pointer; }	
    .image{ width: 100%; }
        .image img{ width: 100%; margin-left:0%; margin-top:0%; }
.postTool{ width: 99.7%; margin: 0%; padding: 0%; border: 1px solid #fafafa; }
	.postTool a{ text-decoration:none; margin:0%; padding:0%; }
    .toolBt{ width: 3%; margin: 1%; vertical-align: bottom; text-decoration:none; }
	.postTool a { text-decoration:none; }

/* LES COMMENTAIRES*/
.containcomment{ margin-left: 10%; width: 90%; background-color: #F8F2E6;}
.datecomment{ display:block;font-size:0.9vw; }
.lblcomment{ display:inline-block; width:85%; margin:1%;  }
.imgcomment{ width:100%; vertical-align: middle; }
.nombrecomment{ margin-left:1%;  }

.uncomment{ position:relative; }
.cmtBt{ position:relative; display: flex; width:6%; text-decoration:none; align-items: center;/* vertical */   }
.cmtBt img{ width:60%; }
/* les LIKES */
.likepost { position: absolute; width: 100%; left: 35%; top:0%; background: repeating-linear-gradient( 45deg, #fceabb, #fceabb 20px, #f2ede8 20px, #e1d9d0 40px ); z-index:10; }
.contain_postlikes{ position:relative;	display: flex; Width:200%; margin:1%; font-size:1.8vh; align-items: center;/* vertical */  }
.finger{ display:inline; width:15%; text-decoration:none; }
.finger img{ width:100%; }
.fingerCMT{ display:inline; width:5%; text-decoration:none; }
.fingerCMT img{ width:100%; }
.nombrelikes{ display:inline; margin-left:1%;font-size:4vh; text-decoration:none; }

.contain_commentlikes{ position:absolute; top:0%; left:30%;	display: flex; Width:90%; margin:1%; align-items:flex-start;/* vertical */  }
.likecomment {	display: inline-table; width: 60%; position: relative; margin-left: 1%; background: repeating-linear-gradient( 45deg, #fceabb, #fceabb 20px, #f2ede8 20px, #e1d9d0 40px ); }

.imgW{ width: 40px;	height: 40px; border-radius: 50%; margin-left:1%; vertical-align:middle; background-color: gray; }/* whoami */
.NP{ margin-left:2%;} /* Nom Prenom */

/*LES BOUTONS*/
.btnew{ display:block; width:35%; margin:1px; padding:1%; color:blue; font-size:3.5vh; text-align:left;  }
.btnew:hover{ cursor:pointer; color:magenta;  }
.bouton{ width:30%; margin:1%; padding:1%; font-size:2.2vh;  }

/* PROFILE */
.topicUSR{ font-size:1.2vw; }
#form_header{ width:100%; }
#previewHDR{ max-width: 79%; margin:1% }
#previewLG{ max-width: 20%; margin:1%; }
#previewAVTU{ max-width: 20%; margin:1%; }
#previewAVT{ max-width: 20%; margin=1%; }


main{ min-height:80vh; }
#maininvite{ margin-left:3%; }
#mainevents{ margin-left:3%; }
#gauche{ width: 70%; display: inline-block; vertical-align: top; margin:0%; padding:0%;   }
	#imgprofilpage{ width:70%; }
	div.profile{ margin-top:3%; }
	.profile { width: 92%; margin-left: 1%; padding: 1%; vertical-align: top;
			background-color: beige; border: 2px solid gray; border-radius: 2rem;box-shadow: 0 0 25px rgba(0,0,0,0.8);
			font-size: 1.0vw; color: rgb(52, 73, 94);
	}
	.totries{ display:block; font-size:3.5vh; text-decoration:none; color:blue;  margin:1px; padding:1%; text-align:left;  }
	.totries:hover{ cursor:pointer; color:magenta;  }

    #plateau #section_users{ margin-top:2%; text-align: left;}
	#form_users{ width:100%; border:1px solid #cacaca; margin:1%; }	
	#titreuser{ font-size:3.5vh; font-weight:bold; text-align:left;}
	#registeruser{ display:inline-block; width:100%; text-align:left; text-decoration:none;    }
    #plateau #users{ width:99%; text-align: left; font-size: 1.5vh; }
    
	#plateau #users .userval{ display:inline-block; width: 100%; font-size:0.9vw; }                            
    #plateau #users .datasval{ display:inline-block; width:15%; margin:1%; }
	#plateau #users .datasval_nom{ display:inline-block; width:25%; margin:0.4%; }
	#plateau #users .datasval_prenom{ display:inline-block; width:25%; margin:0.4%; }	
	#plateau #users .datasval_email{ display:inline-block; width:25%; margin:0.4%; }
	#plateau #users .datasval_cds{ display:inline-block; width:5%; margin:0.4%; }
	#plateau #users .datasval_long{ display:inline-block; width:30%; margin:0.4%; }
	#plateau #users .datasval_date{ display:inline-block; width:9%; margin:0.4%; font-weight:bold; }
	#plateau #users .PROM{ display:inline-block; width:9%; margin:0.4%; }
	#plateau #users .COM{ display:inline-block; width:30%; margin:0.4%; }

	
    #plateau .usersbt{ display:inline-block; width:10%; text-align: right; }
	.usersavatar{ width:7%; margin-left:2%; vertical-align: middle; }
	.selectNoir{ display: inline-block; background: black; border-radius: 50%; height: 2vh; width: 2vh;  margin: 1%;  }
	.selectVert{ display: inline-block; background: blue; border-radius: 50%; height: 2vh; width: 2vh;  margin: 1%; }	

#droite{ width: 24%; border-spacing: 0px; display: inline-block; vertical-align: top; font-size:0.9vw;  }
    #droite article{ width:20%; margin:1%; padding:0%; display:inline-block; text-align:center;  }
	.profileImg{ width:96%; }
	.profileImg:hover{ border-radius: 21%; box-shadow: 0 0 15px rgba(0,0,0,0.8); }		
	/* form coordonnées */
    #form_account{ width: 92%; margin-left:1%; padding:1%; vertical-align: top; background-color: beige;
                border: 2px solid gray; border-radius: 2rem; box-shadow: 0 0 25px rgba(0,0,0,0.8);
                font-size: 1.0vw; color: rgb(52, 73, 94);
            } 
		#form_account #account_title{ text-align:left; }		
        #form_account label{ display:block; width:95%; padding: 0%; text-align:left; }                     
        #form_account input[type="text"] { position: relative; width: 95%; height: 5vh; margin-top:0%; } 

        #form_account ul{ display: inline-block; width: 95%; list-style: none; padding-left: 0; } 
        #form_account ul li{ display:inline-block; width:auto; border: 1px solid gray; } 


        #form_account input[type="submit"] { position: relative; width: 40%; height: 10vh; margin-top:3%; font-size: 2.2vw;
                                        border: 2px solid gray; border-radius: 2rem; box-shadow: 0 0 15px rgba(0,0,0,0.8);
                                        text-align: center;        
                                      }                     	
	
	
	
	
	/* formulaire information dans profile */ 
    #form_informations{ position:relative; width: 92%; margin-left:1%; padding:1%; vertical-align: top; background-color: #cacaca;
        border: 2px solid gray; border-radius: 2rem; box-shadow: 0 0 25px rgba(0,0,0,0.8);
        font-size: 1.0vw; color: rgb(52, 73, 94);
    }            
    #form_informations label{ display:block; width:95%; padding: 0%; text-align:left; }                     
    #form_informations input[type="text"] { position: relative; width: 95%; height: 5vh; margin-top:0%; } 
    #form_informations input[type="submit"] { position: relative; width: 40%; height: 10vh; margin-top:3%; font-size: 2.2vw;
                                    border: 2px solid gray; border-radius: 2rem; box-shadow: 0 0 15px rgba(0,0,0,0.8);
                                    text-align: center;        
                                }
	#form_informations input[type="password"] { position: relative; width: 95%; margin-top:0%; font-size: 2.8vh; } 	
	
	
	/* Les boutons de copy */
	#contain_lnk{ display:block; Width:100%; }
	#contain_lnk a.bt, #contain_lnk a.copy{ display:block; width:100%; padding:2%; margin:0%; text-align:center;  } 
	#contain_lnk .copy{ text-align:center!important;  } 
	#contain_lnk .copy img{ padding:0%; margin:0%;  } 



/* FOOTER */
#showfooter{ width:15%; }
	#showfooter img{ width:100%; }
	#ifr{ border:0; }
#footerCMN{ display:block; margin-left:5%; font-size:3.5vh; }
#linksF{ display:block; width:100%; margin-left:1.5%; }
	#linksF li{ list-style-type: none; margin:1%; }
	.marge10{ padding-top:2%; margin-left:10%; }
	.marge11{ margin-left:7.7%; }
.toifr{ display:block; color:black; }	
footer{ margin-top:10%; font-size:2.5vh; }
#footer{ width:80%; height:90%; overflow: hidden;  }





#contain_exemplemedia{ position:relative; width:100%; text-align:center; }
#contain_exemplemedia img{ width:5%; margin:1%; padding:1%; }

/* HOME TEXT */
#topicHT{ width:60%; margin:1%; padding:1%; }
.topic{ width:80%!important; font-size:2.5vh!important; font-weight:bold!important; text-decoration: none; margin:1%; padding:auto; text-align:left;   }
#modifHT{ width: 95%; margin: 1%;   }
#contain_typeHT{ position:relative; display: flex; width:100%; align-items: center;     /* Centre verticalement */ }
#contain_typeHT #type_fermeHT{ position:absolute; left:60%; top:5%; width:40%; z-index:100; }
#contain_typeHT img{ width:5%; }

#contain_IVAHT{ position:relative; width:90%; border:1px solid #c9c9c9; }
#contain_mediaHT{ position:relative; width:100%; }
#contain_mediaHT #align_mediaHT{ position:relative; width:100%; border:1px solid #cacaca; }
#contain_mediaHT #align_mediaHT img, #contain_mediaHT #align_mediaHT video, #contain_media #align_mediaHT audio{  width:100%;  }

#media_toolHT {display: flex; justify-content: center; /* Centre horizontalement */ align-items: center;     /* Centre verticalement */ width:50%; }
#media_toolHT #tool_width{ Width:30%; }
#media_toolHT .align_icon{ display: inline-block; width:7%; margin:7%; }
#media_toolHT .align_icon img{ width:100%; }

/* KNOWLEDGE */
#topicKNW{ width:60%; margin:1%; padding:1%; }
.topic{ width:80%!important; font-size:2.5vh!important; font-weight:bold!important; text-decoration: none; margin:1%; padding:auto; text-align:left;   }
#modifKNW{ width: 95%; margin: 1%;   }
#contain_typeKNW{ position:relative; display: flex; width:100%; align-items: center;     /* Centre verticalement */ }
#contain_typeKNW #type_ferme{ position:absolute; left:60%; top:5%; width:40%; }
#contain_typeKNW img{ width:5%; }
	
#contain_IVA{ position:relative; width:60%;}
#contain_mediaKNW{ position:relative; width:100%; }
#contain_mediaKNW #align_media{ position:relative; border:1px solid #cacaca; }
#contain_mediaKNW #align_media img, #contain_media #align_media video, #contain_media #align_media audio{  width:100%;  }
	
#media_toolKNW{ display:inline-block; width:80%; margin-left:-1%; padding:1%; }
#media_toolKNW #mediaWidth{ width:75%; }
#media_toolKNW #tool_width{ display:inline-block; width:20%; vertical-align:top; }
#media_toolKNW .align_icon{ display:inline-block; width:10%; margin-left:4%; }
#media_toolKNW .align_icon img{ width:25%; }		
	

/* USER RECEPTION(register) */
#topicUSR{ width:60%; margin:1%; padding:1%; }
.topic{ width:80%!important; font-size:2.5vh!important; font-weight:bold!important; text-decoration: none; margin:1%; padding:auto; text-align:left;   }
#modifUSR{ width: 95%; margin: 1%; padding:1%;  }

#contain_typeUSR{ position:relative; display: flex; width:100%; align-items: center;     /* Centre verticalement */ }
#contain_typeUSR #type_ferme{ position:absolute; left:60%; top:5%; width:40%; }
#contain_typeUSR img{ width:5%; }

#media_toolUSR{ display:inline-block; width:80%; margin-left:-1%; padding:1%; }
#media_toolUSR #tool_width{ display:inline-block; width:20%; vertical-align:top; }
#media_toolUSR .align_icon{ display:inline-block; width:10%; margin-left:4%; }
#media_toolUSR .align_icon img{ width:25%; }		

#contain_mediaUSR{ position:relative; width:60%; }
#contain_mediaUSR #align_mediaUSR{ position:relative; border:1px solid #cacaca; }
#contain_mediaUSR #align_mediaUSR img, #contain_mediaUSR #align_mediaUSR video, #contain_mediaUSR #align_mediaUSR audio{  width:100%;  }
	


.result_knowledge{ margin:1%; padding:1%; border:0px solid #cacaca; text-align:left; }

.media_pdf:hover{ cursor:pointer; }							


.imagesize{ display:block; text-align:center; font-size:0.9vw; }
.noimage{ font-size:0.9vw; margin-left:1%; }
.hautdepage{ position:absolute; left:85%; top:0%; text-decoration:none;}