/* Desktop, tablet */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,700;1,900&display=swap');



			:root {
				--cadre-tl-height: 12px;
			}

			body {
				display: block;
				background-color: #7F8AA6;
				margin:auto;
				user-select: none;
				font-family: 'Roboto', Arial, sans-serif;
			}


			#cadre {
				position:relative;
				overflow-x:hidden;
				overflow-y:hidden;
				width: 100%;
				height: 100vh;
				min-height: 740px;
				display:grid;
				grid-template-rows: 1.2vw min(1.8vw, 20px) min(7vw,90px) ;

				grid-template-columns: min(16vw, 180px) 6.5vw 9.5vw 60vw auto;
			}

	/* Fenêtre pop-up infos credits et background semi-transparent */
			#cadre_semi_transparent {
				position: relative;
				width: 100%;
				height: 100%;
				grid-row: 1 / 5;
				grid-column: 1 / 6;
				background-color: rgb(0, 0, 0, 0.5);
				z-index: 100;
				display: grid;
				grid-template-rows: 1.2vw min(1.8vw, 20px) min(7vw,90px);
				grid-template-columns: min(16vw, 180px) 6.5vw 9.5vw 60vw auto;
				pointer-events: auto;
				display:none;


			}

			#cadre_infos_credits_exterieur {
				position: absolute;
				margin: auto;
				width: 75%;
				grid-row: 4 / 5;
				grid-column: 2 / 6;					
				max-width: 980px;
				height: 100%;
				display:grid;
				grid-template-rows: 2.5% 80% 17.5%;
				grid-template-columns: 100%;
				pointer-events: auto;
				left: 50%;
				transform: translateX(-50%);

			}

	

			#cadre_infos_credits { 
				position:relative;
				grid-row:  1 / 3;			
				display: block;
				background-color:#d3e2fc;
				pointer-events: auto;
				overflow-y: scroll;
				font-weight:300;

			}



			#cadre_infos_credits_x_exterieur {
				display: block;
				position: absolute;
				width: 100%;
				height: 10%;
				max-width: 980px;
				top: 2%;
				left: 50%;
				transform: translateX(-50%);
				z-index: 150;
				
			}

			#cadre_infos_credits_x {
				display: block;
				position: absolute;
				width: 1.6vw;
				max-width: 25px;
				max-height: 25px;
				height: 1.6vw;
				right: 4%;
				cursor: pointer;
				pointer-events: auto;
			}


			#cadre_infos_credits_x:hover svg line {
				stroke: #aaaaaa;
			}


			#cadre_infos_contenu, #cadre_credits_contenu {
				position: absolute;
				display:block;
				left: 50%;
				transform: translateX(-50%);
				width: 80%;
				height: auto;
				font-size: 130%;
				text-align: justify;
				overflow: hidden;
				padding-bottom: 60px;

			}

			#cadre_infos_contenu {
				display:block;

			}

			#cadre_credits_contenu {
				display:none;
			}

			#cadre_logos {
				height: 60px;
				width: 100%;
				display:flex;
				flex-wrap: wrap;
				grid-template-columns: 29% 28% auto;
				bottom: 0px;
				margin-top: 20px;
			}


			#cadre_logos img {
				display:inline-block;
				height: 100%;
				width: auto;
				margin-right: 7%;
				vertical-align: middle;

			}

			#cadre_logos img:nth-child(3) {
				height: 70%;
				margin-top: 8px;
			}
	

			#cadre_infos_credits h2 {

				font-weight:300;
			}

			#cadre_infos_credits hr {
				border: 0;
				border-top: 1px solid #0c131b;
				margin-top: -9px;
				margin-bottom: 40px;
			}


			#cadre_infos_credits_x svg {
				position: relative;
				width: 100%;
				height: 100%;

			}

			#nav {

				background-color: #1b2536;
				grid-row: 4 / 5;
				grid-column: 1 / 2;
			}

			#cadre_infos_credits_mobile {
				display:none;
			}


			/* Boutons infos, credits */

			#cadre_bouton_menu_mobile {
				display:none;
			}

			#cadre_infos, #cadre_credits {
				position: relative;
				width: 90%;
				height: 4vw;
				max-height: 55px;
				min-height: 20px;
				top: 25vh;
				left: 0px;
				box-sizing: border-box;
				pointer-events: auto;
				cursor: pointer;
			}

			#cadre_credits {
				top: 30vh;
			}


			#cadre_infos img, #cadre_credits img {
				height: 100%;
				width: auto;
			}

			#cadre_infos div, #cadre_credits div {
				position: absolute;
				display: inline;
				font-size: 115%;
				color: white;
				text-align: right;
				/*font-family: Arial, sans-serif; */
				padding-left: 7%;
				box-sizing: border-box;
				top: 50%;
				transform: translateY(-50%);

			}



			#cadre_app {
				margin: auto;
				width: 75%;
				grid-row: 4 / 5;
				grid-column: 2 / 6;				
				max-width: 980px;
				height: 100%;
				display:grid;
				grid-template-rows: 2.5% 80% 17.5%;
				grid-template-columns: 100%;
				
			}

			#cadre_barque {
				position:relative;
				grid-row: 2 / 4;
				grid-column: 1 / 3;
				z-index: 8;	
				min-width: 165px;

			}

			#cadre_barque img {
				position: absolute;
				height: auto;
				width: 120%;
				max-width: 325px;
				opacity:1;

			}

			#fond_noir1 {
				display: none;
			}

			#fond_noir2 {
				display:none;
			}

			#fond_noir3 {
				position: absolute;
				grid-row: 3 / 4;
				grid-column: 1 / 2;
				width: 100%;				
				height: 100%;
				z-index: -10;

			}

			#fond_noir3 svg {
				height: 100%;
				width: 100%;
			}

			#cadre_titre_projet {

				position: absolute;
				right:0;
				left: 0;
				bottom: 15px;
				width: 75%;			
				max-width: 980px;
				grid-row: 3 / 4;
				grid-column:  2 / 6;
				text-align: right;
				margin: auto;
				letter-spacing: 1.4px;
				font-weight:300;
				font-size: min(2.6vw, 25px);
				line-height: min(3vw, 32px);
			}

			#titre_marius_barbeau {
				font-weight: 400;
			}

			#cadre_description_image {
				position: relative;
				grid-row: 3 / 4;
				grid-column: 1 / 4;
				margin:auto;
				width: 100%;
				height: 100%;
				background-color: black;
				color:white;
				font-size: 80%;
				line-height: 105%;
				text-align:center;				
				display:table-cell;
				vertical-align: middle;
				overflow: hidden;
				z-index: 10;
				padding: 2%;
				box-sizing: border-box;

			}

			.description_musee_span {
				color: darkgrey;
				font-size: 75%;
			}

			#cadre_description_image p {
				position: absolute;
				width: 100%;
				text-align: center;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}

			#cadre_lecteur {
				z-index:-1;
				grid-row:  3 / 4;
				display:grid;
				grid-template-rows: 33% 4% 8% 8% 32% 15%;
				grid-template-columns: 10% 20% 10% 5% 10% 5% 10% 20% 10%;
			}



			#cadre_volume {
				position: relative;
				grid-row: 5 / 6;
				grid-column: 9 / 10;
				
			}

			#cadre_volume svg {
				display: block;
				height: 50%;
				width: auto;
				position: absolute;  
		        top: 0;  
		        bottom: 0;  
		        left: 16%;   
		        margin: auto;
		        pointer-events: auto;
		        cursor: pointer;
			}


			#volume_x {
				display:none;
			}

			.volume_barres {
				display:auto;
			}


			#cadre_ext_slider_volume {
				position: absolute;
				display: block;
				width: auto;
				position: absolute;   
				left: 16%; 
		        margin: auto;
				height: 15vh;
				width: 3.5vh;
				bottom: 25%;
		        pointer-events: auto;
		        display:none;
		        cursor: pointer;

			}

			#cadre_int_slider_volume {
				box-sizing: border-box;
				position: absolute;
				height: 3.4vh;
				width: 11vh;
				background-color: lightgrey;
				right: 100%;
				transform:rotate(-90deg);
				transform-origin: top right;
				border-right: 1px solid #ffffff;
				border-top: 1px solid #ffffff;
				border-left: 1px solid #a6a6a6;
				border-bottom: 1px solid #a6a6a6;
				border-radius: 0.6vh;
				box-shadow: -3px 0px 6px rgba(0,0,0,0.16), -3px 0px 6px rgba(0,0,0,0.23);

			}



			#volume_input {
				position: absolute;
				height: 3.4vh;
				width: 80%;
				pointer-events: auto;
		        cursor: pointer;
		        top: 0;  
		        bottom: 0;  
		        left: 0;  
		        right: 0;  
		        margin: auto;
				-webkit-appearance: none;
				background: #d3d3d3;
				outline: none;
				-webkit-transition: .2s;
				transition: opacity .2s;
			}

			#volume_input::-webkit-slider-thumb {
				box-sizing: border-box;
				  -webkit-appearance: none;
				  appearance: none;
				  width: 1vh;
				  height: 1vh;
				  border-radius: 50%;
				  background: #ffffff;
				  cursor: pointer;
				  position: relative;
				  top:50%;
				  transform: translate(0,-50%) scale(1.5);
				  box-shadow: -1px 0px 3px rgba(0,0,0,0.12), -1px 0px 2px rgba(0,0,0,0.24);
			}

			#volume_input::-webkit-slider-runnable-track {
				background: black;
				height: 0.5vh;
				  border-right: 1px solid #a6a6a6;
				  border-top: 1px solid #a6a6a6;
				  border-left: 1px solid #ffffff;
				  border-bottom: 1px solid #ffffff;
				box-sizing: border-box;
			}


			#volume_input::-moz-range-thumb {
				  box-sizing: border-box;
				  -webkit-appearance: none;
				  appearance: none;
				  width: 1vh;
				  height: 1vh;
				  border-radius: 50%;
				  background: #ffffff;
				  cursor: pointer;
				  position: relative;
				  transform: scale(1.5);
				  box-shadow: -1px 0px 3px rgba(0,0,0,0.12), -1px 0px 2px rgba(0,0,0,0.24);
				}



			#volume_input::-moz-range-track {
				background: black;
				height: 0.5vh;
				  border-right: 1px solid #a6a6a6;
				  border-top: 1px solid #a6a6a6;
				  border-left: 1px solid #ffffff;
				  border-bottom: 1px solid #ffffff;
				box-sizing: border-box;
			}



			#cadre_titre_section {
				position: relative;
				grid-row:  1 / 2;	
				grid-column: 1 / 10;
				text-align: center;
				font-size: 120%;
				font-weight: 500;
			}

			#cadre_titre_section div {
				position: absolute;
				width: 100%;
				text-align: center;
				bottom: 0.2vh;
			}


			#compteur {
				grid-row: 3 / 4;
				grid-column: 1 / 2;
				color: white;				
				line-height: 11px;
				font-size: 11px;
				text-align: right;
				padding-right: 15%;

			}

			#duree {
				grid-row: 3 / 4;
				grid-column: 9 / 10;
				color: white;				
				line-height: 11px;
				font-size: 11px;
				text-align: left;
				padding-left: 15%;
			}



			#cadre_timeline {
				display:block;
				position:relative;
				height: var(--cadre-tl-height);
				grid-row: 3 / 4;
				grid-column: 2 / 9;
				line-height: 100%;
				z-index: -2;

			}

			#timeline {
				position: absolute;
				background-color: black;
				height: calc(var(--cadre-tl-height)/2);
				width: calc(100% - var(--cadre-tl-height));
				top: calc(var(--cadre-tl-height)/4);
				left: calc(var(--cadre-tl-height)/2);
				z-index: -1;
				pointer-events: auto;
				cursor:pointer;

			}

			#curseur {
				position: absolute;
				height: var(--cadre-tl-height);
				width: var(--cadre-tl-height);
				border-radius: 50%;
				background-color: #ffffff;
				z-index: 10 !important;
				pointer-events: auto;
				cursor:pointer;
				opacity: 0.5;

			}

			#cadre_play {
				grid-row: 5 / 6;
				grid-column: 5 / 6;
				border-radius: 50%;
				
			}


			#cadre_play img{
				height: 100%;
				width: auto;
				margin:auto;
				border-radius: 50%;
				cursor:pointer;
				pointer-events: auto;
			}



			#cadre_backward {
				position:relative;
				grid-row: 5 / 6;
				grid-column: 3 / 4;
				
			}

			#cadre_forward {
				position:relative;
				grid-row: 5 / 6;
				grid-column: 7 / 8;
				
			}

			#cadre_forward img, #cadre_backward img {
				display: block;
				height: 40%;		        
				position: absolute;  
		        top: 0;  
		        bottom: 0;  
		        left: 0;  
		        right: 0;  
		        margin: auto;
		        pointer-events: auto;
		        cursor: pointer;
			}

			.blanc {
				color: white;
			}


			#cadre_fleche_droite img:active,
			#cadre_fleche_gauche img:active,
			#cadre_play img:active,
			#cadre_forward img:active,
			#cadre_backward img:active,
			#cadre_volume svg:active {
				filter:url(#glow_pressed_button);
			}

			/* Cadre photos */


			#cadre_photos {
				position:relative;
				grid-row:  1 / 3;
				border: 1px solid black;				
				display: block;
				background-color: black;
				pointer-events: auto;
				display: grid;
				grid-template-rows: 8% 82% 10%;
				grid-template-columns: minmax(7%, 10%) minmax(80%, 100%) minmax(7%, 10%);
				overflow: hidden;

			}

			#cadre_photos_gradient {		
				grid-column: 1 / 4; 
				grid-row:  1 / 5;
				background: rgb(2,0,36);
				background: radial-gradient(circle, rgba(2,0,36,0) 7%, rgba(0,0,0,0.3364348679446103) 46%, rgba(0,0,0,1) 100%);
			}


			#cadre_photos_images {
				position: relative;
				grid-row: 2 / 3;
				grid-column: 1 / 4;

			}


			#cadre_haut_image {
				position: relative;			
				grid-row: 1 / 2;
				grid-column: 1 / 4;
				z-index: 10;
			}

			#cadre_checkbox {
				position: absolute;
				bottom: 20%;
				right: 5%;
				width: 200px;
				height: 18px;
				color: #ffffff;
			}

			#cadre_checkbox span {
				position: relative;
				line-height: 18px;
				font-size: 18px;
				right: 24px;
				float:right;

			}

			#cadre_checkbox svg {
				position: absolute;
				right: 0;
				height: 100%;
				width: auto;
				pointer-events: auto;
				cursor:pointer;
			}


			#cadre_fleche_gauche {
				position: relative;
				grid-row: 1 / 3;
				grid-column: 1 / 2;
				z-index: 10;
			}

			#cadre_fleche_gauche img {
			  	position:absolute;
			  	top: 0; bottom: 0; right: 0;
			  	margin: auto;
				width: auto;
				height: 50px;
				pointer-events: auto;
				cursor: pointer;
			}

			#cadre_fleche_droite {
				position: relative;
				grid-row: 1 / 3;
				grid-column: 3 / 4;
				z-index: 10;

			}

			#cadre_fleche_droite img {
			  	position:absolute;
			  	top: 0; bottom: 0; left: 0;
			  	margin: auto;
				width: auto;
				height: 50px;
				pointer-events: auto;
				cursor: pointer;

			}

			.boutons_cadre_photo {
				transition: 0.5s;
				opacity: 1;
			}

			.boutons_cadre_photos_invisible {
				transition-delay: 2s;
				opacity: 0;
			}