@charset "utf-8";
/* CSS Document */

html {
 font-size:16px;  /* test taille police racine, les tailles en rem se rapportent à cette valeur*/
/* font-size: 32px; */ /* 1 vw  vaut 1% de la largeur de viewport*/

 /* Vous pouvez également utiliser les unités viewport (vw, vh, vmin, vmax) pour créer une taille de police responsive qui s'adapte proportionnellement à la taille de l'écran. Par exemple :*/
/* font-size: calc(0.75em + 1vw);  */

/*  La fonction clamp() permet de définir une taille de police qui ne descend pas en dessous d'une certaine valeur et ne dépasse pas une autre, tout en s'adaptant dynamiquement à la largeur de l'écran */
/* font-size: clamp(16px, 1rem + 1vw, 24px); */
}


html, body{
    height: 100%;
}
     
body{
	margin: 0px;
	padding: 0px;
	/* [disabled]background: #ebe8e5; */
	font-family: helvetica neue,helvetica,arial,sans-serif;
	/* [disabled]display: inline; */
	/* [disabled]background : url(s1_large.jpg) 0 0 fixed no-repeat; */
	/* [disabled]z-index: 4; */
	/* [disabled]position: relative; */
	background-color: #FFF;
}

body {
  overscroll-behavior: none;
}
         
h1, h2, h3{
    margin: 0;
    padding: 0;
    color: #404040;
}
     
p, ol, ul{
    margin-top: 0;
}
 
 
ol, ul{
	padding: 0;
	list-style: none;
	text-decoration: none;
}
     
.container{   
    /* Set width of container to
        1200px and align center */
    margin: 0px auto;
    width: 800px;
}
/*************************/
/*    Styling  Header    */
/*************************/
header{
	overflow: hidden;
	z-index: 2;
	width: 100%;
}
 
#top-header{
	text-align: right;
	height: 30px;
	/* [disabled]margin-left: auto; */
	/* [disabled]margin-right: auto; */
	/* [disabled]width: 100%; */
	background-color: transparent;
	position: relative;
	z-index: 4;
	display: block;
}
 
/****************/   
/* Styling Logo */
/****************/
#logo{
	float: left;
	padding: none;
	margin: none;
	height: 60px;
	width: 5%;
}
 
#logo img{
    width: 60%;
    float: left;
    padding: 10px 0px;
}   
 
/***************************/
/* Styling Navigation Menu */
/***************************/
#menu{
	float: left;
	width: 70%;
	height: 100%;
	margin: none;
	font-size: 0.75rem;
}
     
#menu ul{
	text-align: left;
	float: right;
	margin: none;
}
     
#menu li{
	display: inline-block;
	padding: none;
	margin: none;
}
     
#menu li a, #menu li span{
	display: inline-block;
	padding: 0em 1.5em;
	text-decoration: none;
	/* [disabled]font-weight: 600; */
	line-height: 30px;
}
/*
a{
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
}
*/     
#menu li a{
	color: #666;
	text-decoration: none;
}
#titre1{
	width: 100%;
	color: #F4F4F4;
	text-align: left;
	padding-bottom: 650px;
	font-size: 2.25rem;
	padding-top: 150px;
	margin-left: 250px;
	position: relative;
	z-index: 100;
	font-family: helvetica neue,helvetica,arial,sans-serif;
}

#titre_haut_page{
	width: 100%;
	color: #000;
	text-align: left;
	font-size: 2.625em;
	position: fixed;
	z-index: 4;
	font-family: helvetica neue,helvetica,arial,sans-serif;
}

.titre {
	position: relative;
	top: 3%;
	left: 5%;
	width: 60%;
	z-index: 100;

	}

.titre2{
	width: 100%;
	color: #666;
	text-align: left;
	font-size: 1.125rem;
	/* [disabled]padding-top: 0px; */
	position: relative;
	z-index: 7;
	font-style: normal;
	font-family: helvetica neue,helvetica,arial,sans-serif;
	font-weight: 600;
	text-decoration: none;
	/* [disabled]padding-left: 0px; */
	/* [disabled]margin-top: 0px; */
	/* [disabled]margin-bottom: 5%; */
}

 #titre_nom{
	width: 250px;
	height: auto;
	z-index: 300;
	 }

.img_titre{
	width: 20%;
	height: auto;
	}    
	
#menu li:hover a, #menu li span{
	/*background: #E7E7E4;*/
	color: #AA472F;
	border-left: 1px solid #0074D9;
	text-decoration: none;
}

#img_agr{
	display: none;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 200;
	}

.div_img_agr{
	}
	
.img_grand {
	display: block;
	margin: 0 auto;
	max-height: 85%;
	max-width: 85%;
	height: auto;
	cursor: pointer;
	margin-top: 3%;
	}
	
.fleches_agr{
	display: block;
	width: 90%;
	height: 30px;
	position: absolute;
	top: 40%;
	left: 5%;
	color: #666;
	z-index: 100;
	}
.fleches_gauche_agr {
	height: 5%;
	position: absolute;
	z-index: 250;
	display: block;
	top: 40%;
	cursor: pointer;
	font-size: 1.5rem;
	left: 5%;
	width: 10%;
	text-align: left;
	cursor: pointer;
}
.fleches_droite_agr {
	height: 5%;
	position: absolute;
	z-index: 250;
	display: block;
	top: 40%;
	cursor: pointer;
	font-size: 1.5rem;
	left: 85%;
	width: 10%;
	text-align: right;
	cursor: pointer;

}

	
#precedent, #suivant {
	display: block;
	position: absolute;
	top: 50%;
	height: 20px;
	width: 10%;
	cursor: pointer;
	z-index: 100; 
	}
#precedent {
	left: 14%;
	text-align: right;	
	}
#suivant {
	left: 76%;
	text-align: left;
	}

#myModal{
	top: 10%;
	}
#myModal_bis{
	top: 10%;
	z-index: 100;
	}

/* The Modal (background) */
.modal {
	display: block;
	position: absolute;
	z-index: 10;
	width: 60%;
	left: 20%;
	height: 70%;
	text-align: center;
	background-color: transparent;
}

#mod-cont {
		}


/* Modal Content */
.modal-content {
	display: block;
	position: relative;
	margin: auto;
	text-align: center;
	background-color: transparent;
	/* [disabled]height: 100%; */
	/*	height: 50%; */
	width: 80%;
	height: 100%;
	max-height: 100%;
	z-index: 12;/*	
	position: relative;
	background-color: transparent;
	margin: auto;
	padding: 0;
	height: 500px;
	width: 100%;
	max-width: 80%;
	margin-top: 10px;
	z-index: 12;  
*/
}

#tactile {
	position: relative;
	background-color: transparent;
	height: 50px;
	width: 100%;
	display: none;
	/* [disabled]top: 110%; */
	z-index: 25;
	}
.tact {
	position: relative;
	display: none;
	background-color: transparent;
	height: 50px;
	width: 100%;
	z-index: 25;
	margin-top: 0.5rem;
	color: #999;
	}
#slides {
	}

.mySlides {
	display: none;
	position:relative;
	text-align: center;
	background-color: transparent;
	/* [disabled]height: 100%; */
	/*	max-height: 500px; */
	max-width: 100%;
	height: 100%;
	z-index: 2;
	cursor: pointer;
}

.img_diaporama{
	position: relative;
	max-height: 100%;
	/* [disabled]width: 100%; */
	max-width: 100%;
	box-shadow: -0.1rem 0.1rem 1rem 0.3rem #C0C0C0;
	background-color: transparent;
	}


.int_1{
	width: 90%;
	text-align: center;
	display: inline;
	/* [disabled]padding-left: 100px; */
	/* [disabled]margin: auto; */
	/* [disabled]padding-bottom: 50px; */
	/* [disabled]padding-right: 100px; */
	/* [disabled]padding-top: 50px; */
	position: absolute;
	left: 10%;
	z-index: 8;
	margin-top: 20px;
}


.categorie{
}

.column {
	width: 50%;
	color: #999;
	/* [disabled]background-color: #CFCFD1; */
	display: inline;
	margin-top: 50px;
	position: relative;
	z-index: 4;
}

.column_d {
	width: 50%;
	color: #999;
	/* [disabled]background-color: #CFCFD1; */
	display: inline;
	margin-top: 50px;
}


.column2 {
	/* [disabled]float: left; */
	/* [disabled]width: 10%; */
	padding: 5px 5px 5px 5px;
	background-color: transparent;
	z-index: 12;
	margin-top: 10px;
	display: inline-block;
	position: relative;
	/* [disabled]margin-left: 10px; */
	white-space: nowrap;
	max-height: 10%;
}

.miniatures{
	width: 100%;
	height: 200px;
	display: inline-block;
/*	margin-left: 10px; */
	max-height: 150px;
	margin-top: 10px;

}

div.miniatures{
	overflow: auto;
	white-space: nowrap;
	margin-top: 15px;
	z-index: 70;
}

.scroller {
	/* [disabled]width: 300px; */
	/* [disabled]height: 100px; */
	overflow-y: scroll;
/*	scrollbar-color: rebeccapurple green; */
	scrollbar-color: dark light;
	scrollbar-width: thin;
}

.img_mini{
	max-height: 100px;
	opacity: 0.6;
	width: auto;
	overflow: hidden;
	height: 100%;
	}
.img_mini:hover{
	opacity: 1;
	text-decoration: none;
}

/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 15px;
	right: 25px;
	font-size: 2.18rem;
	font-weight: bold;
}

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


.cursor {
	cursor: pointer;
	color: #999;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	color: #999;
	font-weight: bold;
	font-size: 1.25rem;
	transition: 0.6s ease;
	z-index: 50;
/*	draggable: true; */

}

/* Position the "next button" to the right */
.next {
	left: 90%;
}
.prev {
	left: 10%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	color: #666; /* background-color: rgba(0, 0, 0, 0.8);*/
}

/* Number text (1/3 etc) */
.numbertext {
	color: #666;
	font-size: 0.875rem;
	/*	padding: 8px 12px; */
	position: absolute;
	top: 0;
	text-align: left;
	margin-left: -30px;
}


.caption-container {
	text-align: right;
	background-color: #ebe8e5;
	padding: 2px 16px;
	color: #CCC;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
	text-decoration: none;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.en_situation {
	margin-top: 20px; 
}


principal {
	background-color: #CCC;
}

.pos_fixe {
	position: fixed;
	height: 100vh;
	/* [disabled]background-color: #666; */
	width: 100%;
	z-index: 0;
}

.menu_vertical{
	display: block;
	width: 100%;
	height: 400px;
	/* [disabled]background-color: #D8C2C0; */
	top: 100px;
	position: absolute;
	z-index: 7;
}

.div_menu_vertical{
	display: inline;
	width: 100%;
	height:400px;
	background-color: transparent;
	top: 10%;
	position: absolute;
	z-index: 10;
	/* [disabled]left: 10px; */
	font-family:  helvetica neue,helvetica,arial,sans-serif;
	text-decoration: none;
	/* [disabled]margin-left: 25px; */
}
.fleches{
	width: 60%;
	height: 30px;
	position: absolute;
	top: 60%;
	left: 20%;
	color: #CCC;
	display: block;
	z-index: 25;
	}
	

.fleches_gauche {
	height: 100%;
	position: absolute;
	z-index: 25;
	display: inline;
	top: 0%;
	cursor: pointer;
	font-size: 1.5rem;
	left: 0%;
	width: 30%;
	text-align: left;
	cursor: pointer;


}
.fleches_droite{
	height: 100%;
	position: absolute;
	z-index: 25;
	display: inline;
	top: 0%;
	cursor: pointer;
	font-size: 1.5rem;
	left: 70%;
	width: 30%;
	text-align: right;
	cursor: pointer;

}


.titre_haut {
	color: #666;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: lighter;
	}
	
.img_titre{
	width: 250px;
	height: auto;
	}
	
button{
	color: #666;
	}	
.dropbtn {
	background-color: transparent;
	/* [disabled]color: #000; */
	padding: 0px;
	font-size: 1rem;
	border: none;
	cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
	background-color: transparent;
}

.menu_deroulant {
	background-color: transparent;
	width: 100%;
	height: 400px;
	display: block;
	position: relative;
	/* [disabled]margin-left: auto; */
	/* [disabled]margin-right: auto; */
}

.dropdown_1, .dropdown_2, .dropdown_3, .dropdown_4, .dropdown_5, .dropdown_6 {
	position: relative;
	display: block;
	font-family: helvetica neue,helvetica,arial,sans-serif;
	font-variant: normal;
	font-size: 0.75rem;
	background-color: transparent;
	padding-top: 10px;
	margin-top: 10px;
	/* [disabled]margin-bottom: 10px; */
	padding-bottom: 5px;

}

.dropdown-content {
	display: none;
	position: relative;
	background-color: transparent;
	min-width: 100px;
	overflow: auto;
	/*	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
	z-index: 1;
	margin-left: 10px;
}

.dropdown_1:hover .dropdwon-content {
  display: block;
  background-color: transparent;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, max-height 0.5s ease;
}

.dropdown_1:hover .dropdwon-content {
  opacity: 1;
  max-height: 200px; /* Ajustez cette valeur selon la hauteur de votre sous-menu */
  background-color: transparent;
}







.dropdown-content a {
	color: #666;
	/*  padding: 12px 16px; */
  text-decoration: none;
	display: block;
	padding-top: 7px;
}
/* couleur survol lien */
.dropdown_1 a:hover, .dropdown_2 a:hover, .dropdown_3 a:hover, .dropdown_4 a:hover, .dropdown_5 a:hover, .dropdown_6 a:hover {
	/* [disabled]background-color: #FFF; */
	background-color: transparent;
	color: #C52525;
}

:hover {
	/* [disabled]background-color: #FFF; */
	/* [disabled]color: #C52525; */
}

.show {
	display: block;
	transition: heigth 2s;
}


.partie_gauche{
	display: block;
	left: 5%;
	top: 8%;
	position: absolute;
	width: 20%;
	height: 400px;
	z-index: 20;
	}

.categorie_tableaux{
	width: 30%;
	position: relative;
	height: 20px;
	font-size: 0.75rem;
	color: #BBB;
	left: 0%;
	margin-top:5px;
	text-align: left;
	}
	
	
.hamburger-icon::before { /* Exemple de style pour l'icône */
/* content: "\2261"; */ /* Unicode pour un hamburger */
content: "__"; 
font-size: 30px;
display: block;
}
.hamburger-icon { /* Exemple de style pour l'icône */
display: block;
}
#bt_hamburger {
	position: relative;
	left: 3%;
	background-image: url(ham_o.png);
	background-repeat: no-repeat;
	height: 30px;
	width: 30px;
	cursor: pointer;
    display: none;
}
.classBtHamburger {
  }
#myDropdown_0{}

.dropdown_0{
	z-index: 20;
	}
#im1, #im2, #im3, #im4, #im5, #im6 {
	cursor: pointer;
	}
#im1_t {display: none;}
#im2_t {display: none;}
#im3_t {display: none;}
#im4_t {display: none;}
#im5_t {display: none;}
#im6_t {display: none;}
#im1_t, #im2_t, #im3_t, #im4_t, #im5_t, #im6_t{
	position: absolute;
	z-index: 50;
	background-color: white;
	opacity: 0.5;
	font-size: 1.5rem;
	left: 30%;
	width: 40%;
	justify-content: center;
	align-items: center;
	height: 100%; /* Pour centrer verticalement sur toute la hauteur */
	color: #000;
	font-size: 2rem;
    }

#biographie{
	width: 100%;
	position: relative;
	height: 600px;
	font-size: 1rem;
	color: #333;
	left: 0%;
	margin-top:50px;
	text-align: left;
	}
.imcartouche{
	position: absolute;
	display: inline;
	height: 40px;
	}
#serie1{
	position: absolute;
	width: 80%;
	}	
.imserie1{
	width: 100%;
	height: 100%;
	}
.tableserie1{
	width: 100%;
	border: 0px;
	}
.contact{
	position: absolute;
	left: 20%;
	display: block;
	width: 60%;
	margin-top:50px;
	text-align:center;
	color: #ADA9A3;
	}
#imct{
	display: block;
	width: 20%;
	margin: auto;
	min-width: 200px;
	}	
.img_diaporama_ct{
	position: relative;
	max-height: 100%;
	/* [disabled]width: 100%; */
	max-width: 100%;
	box-shadow: -0.1rem 0.1rem 1rem 0.3rem #C0C0C0;
	background-color: transparent;
	margin-bottom: 30px;
}
/* Globalement, on part du principe qu'il y a plus ou moins 3 tailles d'écran en général PC ( >1024px ) , Tablette ( > 600px ) , Smartphone ( > 320px ), de ce constat-là, tu peux éditer les règles qu'il faut pour adapter ton site ou ton affichage.
*/
/* 
https://mekalab.fr/taille-des-ecrans-responsive-design-et-point-de-rupture/
Voici donc les points de rupture souvent utilisés pour un affichage « normal »  basé sur 1024px de largeur:

Jusqu'à 767px : smartphone en portrait & paysage
De 768px à 1023px : tablette en portrait et petite tablette en paysage, petit écran, ou navigation sur une petite fenêtre.
De 1024px à 1280px : tablette en paysage, écran d'ordinateur de taille petite et moyenne
1281px et au delà : grand écran d'ordinateur (21″ et + en plein écran )

Donc pour résumer : 768px | 1024px ( à moduler selon votre design )  | 1281px
#myDropdown_0 {display: none;}

*/



@media screen and (max-width: 767px) {
  #bt_hamburger {
    display: block;
  }
  div.partie_gauche {
	width: 60%;
	z-index: 2;
	}
  div.modal {
	width: 100%;
	left: 0%;
	}
  #myModal {
	top: 15%; 
	width: 100%; 
	  }
  div.fleches {
	display: none; 
	width: 100%;;
	left: 0%;
	}
  div.img_diaporama {
	box-shadow: -0.01rem 0.01rem 0.2rem 0.05rem #C0C0C0;
	}
  div.titre {
	top: 2%;
	}
  img.img_diaporama {
	pointer-events: none;
	cursor: default;
    }
  #tactile {
 	display: block;
	}
  #precedent, #suivant {
	display: none;  
	}
  #img_grand {
	display: none;  
	}
  .mySlides {
	cursor: default;
	}
 .imcartouche{
	position: absolute;
	display: block;
	height: 40px;
	}
 #imct{
	display: block;
	width: 60%;
	margin: auto;
	min-width: 200px;
	}	

 
}

@media screen and (min-width: 767px) {
  #bt_hamburger {display: none;}
  #myDropdown_0 {display: inline;}
}