/*----------------------  Comportement  ----------------------*/

:not(input) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

a:active, a:focus, canvas:active, canvas:focus  {
	outline: none;
}





/*----------------------  variables communes à tout le site  ----------------------*/

:root {
  --col_rose: #ff1949;
  --col_gris: #838383;
  --font_alternate: Verdana ,Arial, Helvetica, sans-serif;
}





/*----------------------  Polices  ----------------------*/




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

@font-face {
    font-family: 'quicksand';
    src: url('fonts/Quicksand-Medium.woff2') format('woff2'),
         url('fonts/Quicksand-Medium.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

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

@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}





/*----------------------  Styles courants  ----------------------*/

html {
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
}

body {
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	font-family: quicksand, var(--font_alternate);
	font-size: 18px;
	background-color: white;
	
	display:flex;
	flex-direction: row;
}


a {
	color: var(--col_rose);
}

a img {
  border: none;
}

a:hover {
/* 	text-decoration:underline; */
}

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}


h1, h2, h3, h4{
	font-weight:normal;
	padding:0;
	margin: 0;
}

hr {
	color:black; 
	background-color:black;
	height: 1px;
	border: 0;
	padding:0;
	margin: 30px 0;
}


/*----------------------  Maquette  ----------------------*/

canvas {
	display: block;	
	}
	

#maquette {
	flex:1 1 auto;
	margin: 0;
	padding: 0;
	filter: sepia(0.30);
	z-index:5;
	width:0;	/* Règle le bug lors du redimensionnement de la fenêtre */
	}
	
	
	
	
/*----------------------  Colonne de gauche  ----------------------*/

#col_gauche {
	flex:0 0 auto;
	width: 210px;
	box-sizing: border-box;
	z-index:10;
	background-color : white;
	
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: center;
}

#col_gauche>div {
	flex:0 1auto;
	padding: 0.5vh 10px;
/* 	background-color : yellow; */
}

#col_gauche h1 {
	color: black;
	background-color: white;
	text-align:right;
	font-size: 22px;
	line-height: 18px;
	letter-spacing : -1px;
}

#col_gauche h1 span {
	display:block;
	font-family: roboto, var(--font_alternate);	
	font-size: 30px;
	width:100%;
	height: 42px;
	line-height: 42px;
	padding-right: 10px;
	margin-bottom: 4px;
	box-sizing: border-box;
	color: white;
	background-color: var(--col_rose);
}



/*----------------------  Boutons états  ----------------------*/

#boutons_états {
	font-size: 20px;
	line-height: 17px;
	letter-spacing : -1px;
}

#boutons_états div {
	margin: 8px 0;
	padding: 0 0 0 62px;
	white-space: nowrap;
	cursor:pointer;
	background-position: left center;
	background-repeat: no-repeat;
}


#boutons_états span {
	display:block;
	font-family: roboto, var(--font_alternate);	
	font-size: 26px;
	line-height: 26px;
	letter-spacing : -2px;
	color: var(--col_rose);
}

#Etat_5 {
	background-image: url('../im/icone_etat_5_actif.png');
}
#Etat_5.etat_hidden{
	background-image: url('../im/icone_etat_5.png');
}

#Etat_4 {
	background-image: url('../im/icone_etat_4_actif.png');
}
#Etat_4.etat_hidden{
	background-image: url('../im/icone_etat_4.png');
}

#Etat_3 {
	background-image: url('../im/icone_etat_3_actif.png');
}
#Etat_3.etat_hidden{
	background-image: url('../im/icone_etat_3.png');
}


.etat_hidden, .etat_hidden span {
	color: var(--col_gris) !important;
}





/*----------------------  Boutons éléments  ----------------------*/

#elements, #niveaux_labels {
	text-align: right;
	box-sizing: border-box;
}

#niveaux_labels {
		z-index: 10;
}

.bouton_element {
	display:inline-block;
	width: 150px;
	height: 30px;
	padding: 4px 0;
	cursor: pointer;
	background-image: none;
	background-repeat: no-repeat;
	background-position: left center;
}

.bouton_element:first-child {
	background-image: url('../im/slider_thumb.png');
}

#niveaux_labels .bouton_element {
	padding-left:40px;
}

.bouton_element span {
	display:block;
	height: 30px;
	box-sizing: border-box;
	padding: 0 0 0 45px;
	font-size: 18px;
	font-weight: bold;
	line-height: 29px;
	text-align: left;
	color: white;
	background-color: var(--col_rose);
	border-radius:5px;
	background-image: url('../im/icone_oeil.png');
	background-position: 10px center;
	background-repeat: no-repeat;
}


.element_hidden span {
	background-image: url('../im/icone_oeil_barre.png');
	background-color: var(--col_gris);
}



/* Slider range pour les niveaux */

#niveaux_container {
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
}

#niveaux_container>div {
	flex:1 1 auto;
}


#niveaux_slider_container {
	position:absolute;
	height:100%;
	width:40px;
	padding: 8px 0 8px 10px;
	box-sizing: border-box;
	z-index: 10;
/* 	background-color: beige; */
}

#niveaux_slider {
	width:7px;
	height:100%;
	box-sizing: border-box;
	background-color: white;
	border: 2px solid black;
	border-radius: 10px;
}



/* Logos en footer, ou header pour responsive  */

#header a {
	display: blaock;
}

#logos_footer {
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

#logos_footer a {
	flex:0 0 auto;
}

#logos_header {
	display:none;
	flex-direction: row;
	justify-content: space-between;
}

#logos_header a {
	flex:0 0 auto;
}








/*----------------------  Boutons en haut à droite  ----------------------*/



#aides {
	position : absolute;
	top : 25px;
	right : 25px;
	z-index: 50;
}


#fullscreen {
	background: center / contain no-repeat url("../im/bouton_fullscreen.png");
}

#interface {
	background: center / contain no-repeat url("../im/bouton_interface.png");
}

#parametres {
	background: center / contain no-repeat url("../im/bouton_parametres.png");
}

#aides_fps {
	display : none;
	position : absolute;
	top : 0px;
	right : 70px;
	width : 210px;
	border: 2px solid black;
	border-radius: 5px;
	padding : 15px 40px 15px 20px;
	background-color : white;
	cursor: pointer;
	background-image: url("../im/chevron_droite.png"); 
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: top 69px right 5px;
}

.bouton {
	width : 56px;
	height : 56px;
	margin-bottom: 4px;
	cursor: pointer;
}









/*----------------------  Helpers  ----------------------*/



#helpers {
	position : absolute;
	bottom:50px;
	right:0px;
	width:40px;
	text-align: center;
	color: white;
	background-color: purple;
	padding:5px;
}





/*----------------------  Encart d'intro  ----------------------*/


#intro_container {
	padding: 0;
	margin: 0 auto;
	width: 80vw;
	max-width: 650px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}

#intro_container h1 {
	text-align:center;
	padding: 0;
	margin: 0;
}

#intro_container img {
	width: 100%;
	max-width: 408px;
}

#intro_contenu {
	flex:0 1 auto;
	padding: 30px 10px;
	box-sizing: border-box;
	overflow-y: auto;
}

#intro_chargement {
	text-align : center;
	margin : 10px 0 0 0;
}

#progress{
	padding-top : 1vh;
	font-size: 18px;
	font-style: italic;
	color: black;
}

#conteneur_progress_bar{
	width:90%;
	max-width:405px;
	height:15px;
	background-color:white;
	border:2px solid black;
	display:inline-block;
}

#progress_bar{
	background-color: var(--col_rose);
	width:3%;
	height:15px;
	border:1px solid white;
	box-sizing: border-box;
}

#progress_go{
	display : inline-block;
	margin: 0;
	padding: 1% 4%;
	border-radius: 6px;
	font-size: min(9vw, 26px);
	line-height: min(10vw, 36px);
	font-weight: bold;
	color: white;
	box-sizing: border-box;
	background-color: var(--col_rose);
	cursor:pointer;
}

/*----------------------  Notices  ----------------------*/

#notice {
   	/* display:none; */
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:3050;
}

#notice_masque {
	position:fixed;
	width:100%;
	height:100%;
	background-color : black;
	opacity:0.8;
	z-index:105;
}

#notice_container {
	position:relative;
	width:92vw;
	max-width:1250px;
	border-radius: 6px;
	text-align:justify;
	height:86%;
	color: black;
	background-color: white;
	z-index:3060;
	margin: 7vh auto;
}

#notice_contenu {
	height:100%;
	font-size:18px;
	overflow: hidden;
/* 	background-color: yellow; */
}

#notice_header {
	position:relative;
/* 	min-height: 47px; */
	padding: 9px 0;
	box-sizing: border-box;
	background-color: var(--col_rose);
	border-radius: 5px 5px 0 0;
}

#notice_header h1 {
	font-family: roboto, var(--font_alternate);	
	font-size: 30px;
	line-height: 28px;
	text-align: left;
	color: white;
	margin: 0 60px 0 30px;
}

#notice_fermer {
	position : absolute;
	top: 6px;
	right: 10px;
	cursor: pointer;
}

#notice_corps {
	height: 100%;
	overflow-y: auto;
	padding : 40px 5vw 30px 5vw;
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 3vw;
	opacity: 0;
/* 	background-color: beige; */
}

#notice_corps.notice_simple {
	display:block;
}


#notice_col_gauche {
	width:60%;
	flex: 1 1 auto;
}

#notice_col_droite {
	width:40%;
	flex: 1 1 auto;
}


#notice_chapo {
	font-family: roboto, var(--font_alternate);	
	font-weight: bold;
	font-size: 20px;
	line-height: 30px;
	color: var(--col_gris);
}

#notice h2 {
	font-family: roboto, var(--font_alternate);	
	font-size: 22px;
	line-height: 20px;
	text-align: left;
	color: var(--col_rose);
	margin: 0;
}

/* Galerie des notices */

#notice_galerie_pref {
	margin-bottom: 14px !important;
}

#notice_col_droite figure, #notice_col_droite img{
	width:100%;
	margin:0;
	padding:0;
}

#notice_galerie_min {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap ;
	justify-content: space-evenly;
	gap:14px;
}

#notice_galerie_min figure {
	flex: 0 0 auto;
	margin : 0px;
	width : 120px;
	/* background-color : red; */
}

.deux_min figure {
/* 	Cas particulier de 2 miniatures seulement */
	width : 180px !important;
}


#notice_galerie_min figure a {
	margin : 0;
	padding : 0;
}



/*----------------------  Customisation lightgallery  ----------------------*/


.lightbox {
	position:relative;
}

.lightbox::after {
	content: url(../im/bouton_loupe_plus.png);
	position:absolute;
	right: 7px;
	bottom: 7px;
}

/* Lightgallery, gestion des z-index pour passer devant la notice */

 .lg-outer {
	z-index:4050 !important;
}
.lg-progressbar, .lg-controls, .lg-toolbar, .lg-subhtml, .lg-thumbnail, .lg-pager, .lg-playbutton, .lg-icon {
	z-index:4080 !important;
}
.lg-item {
	z-index:4060 !important;
}
.lg-backdrop {
	z-index:4040 !important;
}

/* Légende */
.lg-components {
	z-index:4080 !important;
	background: rgba(0, 0, 0, 0.5);	
	opacity: 0.6;
}



/* Lightgallery, taille des boutons et couleur */
.lg-icon {
	font-size: 30px !important;
	height: 50px !important;
	width: 50px !important;
	font-weight: bold !important;
	background-color : white !important;
	color : black !important;
	border-radius:999px !important;
	margin:5px;
}


/* Mise en forme du crédit photo */
.lg-sub-html i {
	display : block;
	color: rgba(255, 255, 255, 0.5);
}

/* .lg-sub-html i:before {
	content: '© ';
} */



/*----------------------  Notices aide  ----------------------*/


#notice table {
border-collapse:collapse;
}

#notice td img {
	width: min(10vw, 90px);
}

#notice th, td {
border:1px solid #a0a0a0;
vertical-align: middle;
padding: min(10px, 2vw);
}

#notice th {
font-weight:bold;
}

#params_radio div {
	margin : 30px 0 0 3vw;
}

#params_radio table td {
	border-width:0px; 
	padding: 5px;
}

#params_radio label {
	display:inline-block;
	text-align:left;
}



/*----------------------  Notices quartier  ----------------------*/




.notice_corps_quartier {
	display: block !important;
	padding: 10px min(2vw, 25px) !important;
}

#chrono_onglets {
	width: 100%;
	margin: 0 0 -2px 0;
	box-sizing: border-box;	
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0.4vw;
}

#chrono_onglets div {
	display:flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0.2vw;
	padding :  5px 0.5vw; 
	box-sizing: border-box;	
	font-family: roboto, var(--font_alternate);	
	font-size: min(5vw, 18px);
	line-height: min(5vw, 18px);
	letter-spacing: -1px;
	color: var(--col_gris);
	text-align: center;
	border-width: 2px; 
	border-color: var(--col_gris) var(--col_gris) black var(--col_gris); 
	border-style: solid;
	border-radius: 5px 5px 0 0;
	cursor: pointer;
}

.onglet_actif {
	color : black !important;
	border-color: black black white black !important; 
}


.chrono_container {
	display:none;
/* 	display:flex; */
	padding : 20px 2vw 20px 1vw;
	box-sizing:border-box;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 1vw;
 	border: 2px solid black;
	border-radius: 0 0 5px 5px;
}

.chrono_container_actif {
 	display: flex !important;
}


.chrono_col_gauche {
	width:60%;
	flex: 1 1 auto;
}

.chrono_col_gauche img {
	width:100%;
}

.chrono_col_droite {
	width:40%;
	flex: 1 1 auto;
}

.chrono_col_droite h1 {
	color: black;
	text-align:left;
	font-size: 22px;
	font-weight: bold;
	letter-spacing : -1px;
}

.chrono_col_droite h1 span {
	display:block;
	font-family: roboto, var(--font_alternate);	
	font-size: 28px;
	line-height: 28px;
	color: var(--col_rose);
}

.num_01, .num_02, .num_03, .num_04, .num_05, .num_06, .num_07, .num_08, .num_09 {
	font-weight: bold;
	
}

.num_01::after, .num_02::after, .num_03::after, .num_04::after, .num_05::after, .num_06::after, .num_07::after, .num_08::after, .num_09::after {
	content: '';
	display: inline-block;
	width:22px;
	height:22px;
	margin: 0 0 -4px 5px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center; 
}

.num_01::after {
	background-image: url('../notices/carte_num_01.png');
}
.num_02::after {
	background-image: url('../notices/carte_num_02.png');
}
.num_03::after {
	background-image: url('../notices/carte_num_03.png');
}
.num_04::after {
	background-image: url('../notices/carte_num_04.png');
}
.num_05::after {
	background-image: url('../notices/carte_num_05.png');
}
.num_06::after {
	background-image: url('../notices/carte_num_06.png');
}
.num_07::after {
	background-image: url('../notices/carte_num_07.png');
}
.num_08::after {
	background-image: url('../notices/carte_num_08.png');
}
.num_09::after {
	background-image: url('../notices/carte_num_09.png');
}

.chrono_col_droite .lightbox {
	position:relative;
	font-weight: bold;
}

.chrono_col_droite .lightbox::after {
	content: '';
	position:relative;
	right: 0;
	bottom: 0;
	display: inline-block;
	width:22px;
	height:22px;
	background-image: url('../im/bouton_loupe_plus.png');
	margin: 0 0 -4px 5px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center; 
}