/* MOBILE */

@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');

			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: 100vw;
				height: 800px;
				display:grid;
				grid-template-rows: 8% 2% 7.5% 3% 1% 70%;
				grid-template-columns: 11% 10% 34% 45%;
				min-width: 320px;
			}

			#cadre_semi_transparent {
				position: relative;
				grid-row: 1 / 4;
				grid-column: 1 / 6;
				background-color: rgb(0, 0, 0, 0.5);
				z-index: 100;
				display: grid;
				grid-template-rows: 23% 56% 19%;
				grid-template-columns: 24% 66% 10%;
				display: none;

			}

			#nav {
				grid-row: 1 / 2;
				grid-column: 1 / 2;
				
			}

			#cadre_bouton_menu_mobile {
				position: relative;
				margin-top: 1.5vh;
				margin-left: 2vh;
				height: 5vh;
				width: 5vh;
				pointer-events: auto;
				cursor: pointer;
			}



			#cadre_bouton_menu_mobile svg {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
			}

			#cadre_bouton_menu_mobile_hamburger {
				display: block;
			}

			#cadre_bouton_menu_mobile_x {
				display: none;
			}


	/* Infos, crédits */

		#cadre_semi_transparent, #cadre_infos_credits,#cadre_infos_credits_x, #cadre_infos_contenu, #cadre_credits_contenu {
			display: none !important;
		}



			#cadre_infos, #cadre_credits {
				display:none;
			}


			#cadre_infos_credits_mobile {
				position: relative;
				width: 100%;
				height: 100%;
				background-color:#D6E2FE;
				grid-row: 1 / 4;
				grid-column: 1 / 4;
				z-index: 100;
				display: none;
				pointer-events: auto;

			}


			#cadre_logos {
				display: inline-block;
				height: 120px;
				width: 100%;
				grid-template-columns: 29% 28% auto;
				bottom: 0px;
				text-align: left;

			}


			#cadre_logos img {
				height: 60px;
				width: auto;
				margin-right: 20px;
			}

			#cadre_logos img:nth-child(3) {
				margin-top: 10px;
				height: 40px;
				width: auto;
			}
	


			.accordeon {
				position: relative;
				background-color: black;
				width: 100%;
				height: 70px;
				border-top: 1px solid white;
				box-sizing: border-box;
				pointer-events: auto;
				cursor: pointer;

			}



			.accordeon:nth-child(3) {
				border-bottom: 1px solid white;
			}


			.sous_contenu {
				overflow-y: hidden;
				pointer-events: auto;
				text-align: justify;
				box-sizing: border-box;
				height: 0;
				overflow-y: auto;
				overflow-x: hidden;

				padding-left: 5%;
				padding-right: 5%;

				transition: 0.3s ease-out;

			}

			#bouton_infos_mobile, #bouton_credits_mobile {
				position: relative;
				height: 70%;
				top: 50%;
				transform: translateY(-50%);
			}

			#bouton_infos_mobile img, #bouton_credits_mobile img {
				height: 100%;
				width: auto;
			}

			#bouton_infos_mobile div, #bouton_credits_mobile div {
				position: absolute;
				color: white;
				display: inline;
				font-size: 20px;
				left: 13%;
				top: 50%;
				transform: translateY(-50%);
			}

			.fleche_infos_credits_mobile {
				position: absolute;
				height: 40%;
				width: auto;
				top: 50%;
				right: 1%;
				transform: translateY(-50%);
			}

			.fleche_infos_credits_mobile img {
				height: 100%;
				width: 100%;
				transform-origin: center;
			}


			/* classe onglet_mobile_actif */

			.onglet_mobile_actif + .sous_contenu {
				padding-top: 5%;
				padding-bottom: 5%;
				height: calc(100% - 140px) !important;
			}

			.onglet_mobile_actif .fleche_infos_credits_mobile img {
				transform: rotate(90deg);
			}



			#cadre_barque {
				grid-row: 2 / 5;
				grid-column: 1 / 4;
				
				z-index: 5;
			}

			#cadre_barque img {
				max-width: 100%;
				max-height: 100%;
				min-width: 165px;
			}

			#cadre_titre_projet {
				position: absolute;
				padding: 3%;
				grid-row: 1 / 4;
				grid-column: 4 / 5;
				text-align: right;
				font-size: 14px;
				word-wrap: normal;
				min-width: 110%;
				float:right;
				right: 0;
				top: 18px;
				font-size: 18px;
				line-height: 24px;
				font-weight: 300;
				letter-spacing: 2px;
			}

			#titre_marius_barbeau {
				font-weight: 400;
			}

			#fond_noir1 {
				grid-row: 3 / 4;
				grid-column: 1 / 3;
				z-index: -5;
				min-width: 120px;
			}

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

			#fond_noir2 {
				grid-row: 4 / 6;
				grid-column: 1 / 5;
				background-color: #1b2536;
				z-index: -5
			}

			#fond_noir3 {display:none;}

			#cadre_app {
				grid-row: 6 / 7;
				grid-column: 1 / 5;
				
				display: grid;
				grid-template-rows: 65% 35%;
				grid-template-columns: 100%;


			}

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

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


			#cadre_lecteur {
				z-index: -1;
				grid-row: 2 / 3;
				grid-column: 1 / 5;
				display:grid;
				grid-template-rows: 4% 4% 8% 10% 25% 30%;
				grid-template-columns: 12% 11% 13% 5% minmax(44px, 18%) 5% 13% 11% 12%;
			}

			#cadre_volume { 
				display:none;
			}




			#cadre_titre_section {
				
				grid-row:  1 / 2;	
				grid-column: 1 / 10;
				text-align: center;
				font-size: 150%;
				line-height: 200%;
				display:none;
			}


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

			}

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

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

			#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;
				transform: scale(1.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: 50%;		        
				position: absolute;  
		        top: 0;  
		        bottom: 0;  
		        left: 0;  
		        right: 0;  
		        margin: auto;
		        pointer-events: auto;
		        cursor: pointer;
			}

			.blanc {
				color: white;
			}

			/* Cadre photos */

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

			#cadre_photos_gradient {		
				grid-column: 1 / 4; 
				grid-row:  1 / 4;
				z-index: 1;
				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;
				display:block;
				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: 10%;
				right: 5%;
				width: 200px;
				height: 18px;
				color: #ffffff;
			}

			#cadre_checkbox span {
				position: relative;
				line-height: 18px;
				font-size: 15px;
				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;

			}

			#cadre_infos_credits {
				display: none;
				grid-row: 1 / 4;
				grid-column: 1 / 4;
				
			}




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

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

			}