/* CSS Document */

/* Couleur ciel : #000 */
/* Couleur fenêtre : #383838 */
/* Couleur bordure fenêtre : #0e0e0e */
/* Couleur liens : #188aff */

/* Couleur panneau blanc : #ededed */
/* Couleur panneau bleu : #0068ff */
/* Couleur panneau rouge : #ff0000 */
/* Couleur panneau orange : #ff7f00 */
/* Couleur panneau jaune : #eddd00 */


<style type="text/css">

	*, *:before, *:after {
  	box-sizing: inherit;
	}
	
	.titre {
		text-align: left;
		line-height:.85;
		font-size: 40px;
		font-weight:700;
	}	

	.h2,.h2_left {
		position: absolute;
		top: 50%;
		transform: translateY(-48%);
		left: 33%;
		text-transform: uppercase;
		font-family: 'Montserrat', sans-serif;
		font-weight:700;
		cursor:pointer;
	}	
	.panneau {
		cursor:pointer;
	}
	.h2 {
		text-align:center;
		width: 35%;
	}
	.h2_left {
		width: 29%;
		text-align:left;
		padding-left:9%;
	}
	.h3 {
		position: absolute;
		top: 50%;
		transform: translateY(-48%);
		left: 28.75%;
		font-family: 'Montserrat', sans-serif;
		font-weight:500;
		width: 42.5%;
	}
	
	.Rangee1 { 
		top: calc(50% + 1px);
	}
	.Rangee3 {
		top: calc(50% - 1px);
	}	
	
	td,th {
		font-family: Arial, Helvetica, sans-serif;
		color: #ffffff;
	}
	.entete {
		font-size: 16px;
		text-align:left;
	}	
	table, th, td {
		border: 0px;
		padding: 0px;
		border-spacing: 0px;
    border-collapse: separate;
	}	
	table {
		width:100%;
	}
	
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 22px;
		color: #ffffff;
		text-align:justify;
		
		/* Cacher les scrollbars */
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
		background-position:center;
		background-repeat:none;
		background-attachment:fixed;
		background-position:center top;
		background-color:#000 !important;
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}

	.menu_fenetre a:link,.projet_fenetre a:link,.projet_fenetre_full a:link {
		color: #188aff;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
	}
	.menu_fenetre a:visited,.projet_fenetre a:visited,.projet_fenetre_full a:visited {
		color: #188aff;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
	}	
	.menu_fenetre a:hover,.projet_fenetre a:hover,.projet_fenetre_full a:hover {
		color: #ffffff;
		text-shadow: 0 0 0 #ffffff;
	}	
	.menu_fenetre a:active,.projet_fenetre a:active,.projet_fenetre_full a:active {
		color: #ffffff;
		text-shadow: 0 0 0 #ffffff;
	}	
		
	a:link {
		text-decoration: none;
		transition: color 200ms;
	}
	a:visited {
		transition: color 200ms;	
	}
	a:hover {
		color: #ffffff;
		text-decoration: bold;
		transition: color 200ms,text-shadow 300ms;
		text-shadow: 0 0 2px #ffffff;		
	}
	
	a:active {
		color: #ffffff;
		text-decoration: bold;
		transition: color 200ms,text-shadow 300ms;
		text-shadow: 0 0 2px #ffffff;
	}
	
	.ArtVisuel_E,.ArtNumerique_E,.Performance_E,.Ecrit_E,.Permanent_E,.Collectif_E,.Tous_E {
		text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
		line-height:.95;
	}
	
	.Types_E {
		color:#cdcdcd;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
		line-height:.95;
	}	
	.Types_E_desactive {
		color:#fff;
		border: 1px solid #cdcdcd;
		text-shadow: 1px 1px 3px rgba(200,200,200,0.5);
		line-height:.95;
	}
	.Types_E_desactive:hover {
		color:#fff;
		text-shadow: 1px 1px 3px rgba(200,200,200,0.5);
	}
	
	.ArtVisuel_E {
		color:#000000;
		transition: opacity 300ms, text-shadow 300ms;
	}
	.ArtNumerique_E {
		color:#ffffff;
		transition: opacity 300ms, text-shadow 300ms;
	}	
	.Performance_E {
		color:#ffffff;
		transition: opacity 300ms, text-shadow 300ms;
	}	
	.Ecrit_E {
		color:#ffffff;
		transition: opacity 300ms, text-shadow 300ms;
	}
	.Collectif_E {
		color:#000000;
		transition: opacity 300ms, text-shadow 300ms;
	}		
	.Permanent_E {
		color:#000000;
		transition: opacity 300ms, text-shadow 300ms;
	}
	.Types_E:hover {
		color:#d1d1d1;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 0 0 5px #ffffff;
		opacity:1;
	}	
	.ArtVisuel_E:hover {
		color:#000000;
		opacity:1;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 0 0 6px #ffffff,0 0 3px #ffffff;
		opacity:1;
	}
	.Performance_E:hover {
		color:#ffffff;
		opacity:1;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 0 0 5px #ffffff;
		opacity:1;
	}
	.ArtNumerique_E:hover {
		color:#ffffff;
		opacity:1;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 0 0 5px #ffffff;
		opacity:1;
	}	
	.Ecrit_E:hover {
		color:#ffffff;
		opacity:1;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 0 0 5px #ffffff;
		opacity:1;
	}
	.Collectif_E:hover {
		color:#000000;
		opacity:1;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 0 0 5px #ffffff;
		opacity:1;
	}		
	.Permanent_E:hover {
		color:#000000;
		opacity:1;
		transition: opacity 300ms, text-shadow 300ms;
		text-shadow: 0 0 5px #ffffba,0 0 5px #ffffba;
		opacity:1;
	}
	
	* { margin: 0; padding: 0; }
	
	article, aside, figure, footer, header, hgroup,
	menu, nav, section { display: block; }

	.page_container {
		position:absolute;
		top: 0px;
		left: 0px;
		vertical-align:bottom;
		width:100%;
		height:auto;
		overflow-x:hidden;
		overflow-y:visible;
		z-index:0;
	}

	.page {
		position:relative;
		overflow:visible;
		bottom:0px;
		top:160px;
		text-align:center;
		vertical-align:bottom;
		left:12.5%;
		width:75%;
		height:100%;
		z-index:2;
		display:none;
	}
	
	.menu {
		left:50px;
		top:50px;
		height:auto;
		width:100px;
		overflow:hidden;
		text-align:left;
		z-index:20;
		position:fixed;
		display:none;
	}
	.menu_centre {
		left:calc(50% - 25px);
		top:60px;
		height:auto;
		width:50px;
		overflow:hidden;
		text-align:left;
		z-index:1;
		position:fixed;
	}	
	
	.menu_fenetre {
		left:0px;
		top:0px;
		background: rgba(40, 40, 40, 0.8);
		backdrop-filter: blur(25px);	
		transition: backdrop-filter 250ms;
		width:85%;
		max-width:750px;
		height:100%;
		text-align:left;
		z-index:13;
		position:fixed;
		display:none;
		color: #ffffff;
		-webkit-box-shadow:inset 0px 0px 0px 15px #0e0e0e;
  	-moz-box-shadow:inset 0px 0px 0px 15px #0e0e0e;
  	box-shadow:inset 0px 0px 0px 15px #0e0e0e;
	}

	.projet_fenetre {
		display:none;
	}
	
	.projet_fenetre,.projet_fenetre_full,.contenuMenuPanneau,.contenuProjetPanneau { /* Remove scrollbars */
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
	}
	
	.projet_fenetre,.projet_fenetre_full {   
    background-color: rgba(40, 40, 40,.8);
		backdrop-filter: blur(25px);	
		transition: backdrop-filter 250ms;
		-webkit-box-shadow:inset 0px 0px 0px 15px #0e0e0e;
  	-moz-box-shadow:inset 0px 0px 0px 15px #0e0e0e;
  	box-shadow:inset 0px 0px 0px 15px #0e0e0e;
	}	
			
	.projet_fenetre {
		left:100%;
		top:0px;
		width:85%;
		height:100%;		
		text-align:justify;
		z-index:50;
		position:fixed;
		color: #ffffff;
	}
	
	.projet_fenetre_full {
		left:18.5%;
		top:0px;
		width:81.5%;
		height:100%;
		text-align:justify;
		z-index:5;
		position:fixed;
		color: #ffffff;
	}
	
	.contenuMenuPanneau {  /* Interieur de page */
		left:0px;
		top:15px;
		margin-right:50px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
		height: calc(100% - 30px);
		word-wrap: break-word;
		text-align:justify;
		font-size: 20px;
		z-index:25;
		position:absolute;
		color: #ffffff;
	}
	
	.contenuProjetPanneau {  /* Interieur de page */
		left: 7.5%;
		top: 60px;
		width: 84%;
		height: calc(100% - 75px);
		word-wrap: break-word;
		text-align:justify;
		font-size: 20px;
		vertical-align:top;
		z-index:25;
		position:relative;
		color: #ffffff;
	}
	
	.contenuPanneauEmail {  /* Interieur de page de menu */
		left:50px;
		top:140px;
		margin-right:50px;
		overflow:hidden;
		text-align:left;
		z-index:35;
		position:absolute;
		color: #ffffff;
		font-size: 12px;
	}
	
	.typesProjets {
		position:fixed;
		z-index:8;
		width:200px;
		height:auto;
		left:40px;
		top:150px;
		overflow:auto;
		text-align:left;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		line-height:2.35;
		z-index:10;
		display:none;
	}
	
	.contenuPhotoVideo {
		position:relative;
		left:0px;
		top:auto;
		width:100%;
		height:auto;
		text-align:center;
		font-size: 14px;
		z-index:28;
	}
	
	.contenuTexte {
		position:relative;
		left:50px;
		top:68px;
		margin-right:100px;
		margin-bottom:100px;
		height:auto;
		text-align:justify;
		font-size: 22px;
		z-index:28;
		color: #ffffff;
	}
	
	.citation {
		padding-top:25px;
		position: relative;
		text-align: left;
		top:0px;
		left:50%;
		width:50%;
		font-size: 15px;
		z-index:28;
		color: #ffffff;
	}
	.sous_texte {
		padding-top:5px;
		width:100%;
		text-align:center;
		font-size: 13px;
	}
		
	.iframe {
		pointer-events: none;
	}
	
	.fond_enlever,.fond_enlever_menu,.fond_revenir {
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		overflow:hidden;
		background-origin:content-box;
		-webkit-background-origin:content-box; /* Safari */
		position:fixed;
		backdrop-filter: blur(4px);
		transition: backdrop-filter 500ms;
		cursor:pointer;
	}
	.fond_enlever,.fond_enlever_menu {
		display:none;
	}	
	.fond_revenir {
		background-color:rgba(0, 0, 0, 0.6);
	}		
	.fond_enlever {
		z-index:15;
	}		
	.fond_enlever_menu {
		z-index:9;
	}	
	
	.fond_enlever:hover,.fond_enlever_menu:hover,.fond_revenir:hover {
		backdrop-filter: blur(0px);
		transition: backdrop-filter 500ms;
		cursor:pointer;
	}

	.image_dans_menu {
		-webkit-filter: drop-shadow(0 0 10px #ffffff);
		filter: drop-shadow(0 0 10px #ffffff);
	}
	
	.heading, .heading_bord, .lien_menu {
		margin: 0px;
		padding: 0px 0px;
		cursor: pointer;
		position: relative;
		color: #188aff;
		left:0px;
		overflow:hidden;
		text-decoration:none;
		text-align:left;
		vertical-align:top;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 26px;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
		transition: color 200ms;
	}
	
	.heading_bord {
		border: 1px solid #188aff;
		transition: border 200ms;
		padding:10px;
	}
	.heading_bord:hover {
		border: 1px solid #ffffff;
		transition: border 200ms;
	}
	.heading:hover, .heading_bord:hover {
		color: #ffffff;
		text-shadow: 0 0 0 #ffffff;
		transition: color 200ms;
	}

	.content {
		padding: 30px 60px 45px 30px;
		text-align:justify;
		word-wrap: break-word;
		vertical-align:top;
		font-size: 20px;
	}
	.content_bord {
		padding: 45px 25px 25px 25px;
		text-align:justify;
		vertical-align:top;
		font-size: 20px;
	}	
	.content_bord {
		border: 1px solid #ffffff;
	}

	.bouton {
		width:100%;
		text-align:center;
		font-size:24px;
		margin-bottom:10px;
	}
	
	.bouton_menu,.bouton_menu_bas {
		margin: 0px;
		padding: 0px 0px;
		cursor: pointer;
		position: fixed;
		color: #188aff;
		overflow:hidden;
		text-decoration:none;
		text-align:right;
		vertical-align:top;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 20px;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
	}
	.bouton_menu {	
		right: 50px;
		top: 50px;
		width: 20px;
		z-index:100;
	}
	.bouton_menu_bas {
		left:45px;
		bottom:40px;
	}
	
	.p {
		padding: 0px 0px;
	}
	
	.prev, .next {
		position:fixed;
	}
	
	.prev {
		top:0px;
	}
	.next {
		bottom:0px;
	}
	
	.TextWrap {
		float:left;
		margin: 0px;
	}
		
	.image {
		position: relative;
		width:100%;
		height:auto;
	}
	
	.text {
		-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
		text-align:center;
		z-index:12;
	}

	.vid_container {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}
	
	/* Then style the iframe to fit in the container div with full height and width */
	.vid_iframe {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.contenu_flottant,.contenu_flottant_bas {  /* Interieur de page */
		height:auto;
		background-repeat:none;
		background-size:cover;
		background-position:center center;
		background-origin:content-box;
		-webkit-background-origin:content-box; /* Safari */
		overflow:visible;
		word-wrap: break-word;
		text-align:left;
		z-index:3;
		padding:10px;
		padding-bottom:5px;
		width: 50px;
		text-align:center;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
		font-size: 30px;
		cursor:auto;
		z-index:45;
	}
	
	.contenu_flottant a:link, .contenu_flottant a:visited,.contenu_flottant_bas a:link,.contenu_flottant_bas a:visited{
		color:#ffffff;
		cursor:pointer;
		transition: color 200ms;
	}
	.contenu_flottant a:hover, .contenu_flottant a:active,.contenu_flottant_bas a:hover,.contenu_flottant_bas a:active{
		color:#ffffff;
		cursor:pointer;
		transition: color 200ms;
	}		
	
	.contenu_flottant {  /* Interieur de page */
		left:0px;
		bottom:0px;
		position:absolute;
		width:40px;	
	}
	
	.contenu_flottant_bas {  /* Interieur de page */
		right:35px;
		bottom:35px;
		position:fixed;
		width:40px;	
	}

	.hov {
		opacity: 0;
		transition: opacity 250ms ease-out;
	}
	.hov:hover {
		opacity: 1;
	}

	.pop,.pop_photo {  /* Fenêtre popup (background) */
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		overflow:hidden;
		position:fixed;
		opacity:1;
		cursor:pointer;
		display:none;
		backdrop-filter: blur(25px);
		background-color:rgba(0, 0, 0, 0.3);		
	}
	.pop {  /* FenÍtre popup (background) */
		z-index:1000;
		display:none;
		transition: backdrop-filter 500ms;
	}
	.pop_photo {  /* Photo popup */
		z-index:1001;
		display:none;
	}
	
	.photo_pleine_etiquette {  /* Légende (photo pleine) */
		z-index:1002;
		bottom:15px;
		width:100%;
		font-size: 14px;
		position:fixed;
		color:#ffffff;
	}
	.etiquette {  /* Légende (photo pleine) */
		z-index:100;
		padding-top:10px;
		padding-bottom:10px;
		width:100%;
		font-size: 14px;
		position:relative;
		text-align:center;
		color:#ffffff;
	}
	.merci {  /* Légende (photo pleine) */
		z-index:100;
		width:100%;
		font-size: 14px;
		position:relative;
		text-align:left;
		color:#ffffff;
	}
	.playlist {  /* Légende (photo pleine) */
		z-index:100;
		width:100%;
		height:250px;
		font-size: 14px;
		position:relative;
		text-align:left;
		color:#ffffff;
		overflow-x:hidden;
		overflow-y:scroll;
	}		
	
	.avertissement {  /* Avertissement */
		z-index:100;
		padding:10px;
		font-size: 14px;
		position:relative;
		left:25%;
		width:50%;
		text-align:center;
		color:#ffff00;
		border: 1px solid #ffff00;
	}
		
	.photo_pleine {  /* Img_photo */
		left:5%;
		top:5%;
		width:90%;
		height:90%;
		object-fit: contain;
		overflow:hidden;
		position:fixed;
	}
	
	.logo_E {  /* Logo ‡ côté d'un titre sur l'enseigne principale */
		left:-10px;
		top:calc(12.5% + 2px);
		width:75%;
		height:75%;
		position: absolute;
		object-fit: contain;
		overflow: hidden;
		filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.1));
	}
	.logo_projet {  /* Logo ‡ côté d'un titre dans la description du projet */
		width:75px;
		height:auto;
	}	
	
	.thumb,.thumb_1,.thumb_2 {  /* Photo cliquable intégrée au texte */
		border:0px;
		top:0px;
		object-fit: cover;
		overflow:hidden;
		z-index:3;
		position:relative;
		display: inline-block; /* En ligne, mais avec width et height */
		cursor:pointer;
		background-color:rgba(32, 32, 32, 0.50);
	}
	.thumb {
	  width:31%;
	  margin-left:1%;
	  margin-right:1%;
	  margin-bottom:2%;
	  height:150px;
	}	
	.thumb_1 {
	  width:100%;
	  height:300px;
	}	
	.thumb_2 {
	  width:45%;
	  margin-left:1%;
	  margin-right:1%;
	  height:200px;
	}			
	
	img:not([src]) {
		 visibility: hidden;
	}	
		
	#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; }
	
	#fil_d_ariane {margin: 0px; left:0px; bottom:-1px; position:fixed; z-index:12;}
	#breadcrumbs {margin: 0px; left:0px; bottom:-1px; position:fixed; z-index:12;}
	
	.breadcrumb { 
		list-style: none;
		overflow: hidden;
		font: 12px Helvetica, Arial, Sans-Serif;
	}
	
	.breadcrumb li { 
		float: left;
	}
	
	.breadcrumb li a { /* BoÓtes */
		color: #ffffff; /* couleur du texte */
		text-decoration: none;
		margin-left: -10px;
		padding: 16px 0 16px 25px; /* taille des boÓtes carrées */
		background: hsla(190,85%,35%,1);/* fallback color */
		background: hsla(190,85%,35%,1); /* Première boÓte foncée */ 
		position: relative;
		display: block;
		float: right;
		z-index: 8;
		padding-left: 35px;
	}
	
	.breadcrumb li a:after { /* TOUS LES TRIANGLES */
		content: ""; 
		display: block; 
		width: 0; height: 0;
		border-top: 25px solid transparent; /* Go big on the size, and let overflow hide */
		border-bottom: 25px solid transparent;
		border-left: 25px solid hsla(190,85%,35%,1); /* Angle du triangle */
		position:absolute;
		top: 50%;
		margin-top: -25px; 
		left: 100%;
	}
	
	.breadcrumb li a:before { /* BoÓte */
		content: ""; 
		display:inherit ; 
		width: 0; height: 0;
		border-top: 25px solid transparent;/* Go big on the size, and let overflow hide */
		border-bottom: 25px solid transparent;
		position:absolute;
		top: 50%;
		margin-top: -25px; 
		margin-left: 0px;
		left: 100%; 
	}	
	
	/*COULEURS entre les deux*/
	.breadcrumb li:nth-child(2) a       { background:        hsla(190,75%,45%,1); z-index:7}
	.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(190,75%,45%,1); z-index:7}
	.breadcrumb li:nth-child(3) a       { background:        hsla(190,75%,65%,1); z-index:6}
	.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(190,75%,65%,1); z-index:6}
	.breadcrumb li:nth-child(4) a       { background:        hsla(190,75%,75%,1); z-index:5}
	.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(190,75%,75%,1); z-index:5}
	.breadcrumb li:nth-child(5) a       { background:        hsla(190,85%,35%,1); z-index:4}
	.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(190,85%,35%,1); z-index:4}
	
	/*PREMIER 100%*/
	.breadcrumb li:first-child a {
		color: #ffffff; /* couleur du texte */
		text-decoration: none; 
		padding: 16px 0 16px 25px; /* taille des boîtes carrées */
		background: hsla(190,85%,35%,1);/* fallback color */
		background: hsla(190,85%,35%,1); /* Première boÓte foncée */ 
		position: relative; 
		display: block;
		float: right;
		padding-left: 35px; /* Espace de la marge */
		z-index: 10; 
	}
	
	/*DERNIER BLANC*/
	.breadcrumb li:last-child a {
		background: #ffffff !important;
		color: black;
		pointer-events: none;
		cursor: default;
		opacity:.75;
		padding-left: 35px;
		left: -7px;
		z-index: 0; 
	}
	.breadcrumb li:last-child a:after {border:100%;border-left-color:white;}
	
	/* COULEUR CURSEUR MOUSEOVER */
	.breadcrumb li a:hover { background: hsla(190,25%,85%,1); }
	.breadcrumb li a:hover:after { border-left-color: hsla(190,25%,85%,1) !important; }
	
</style>