@charset "UTF-8";

/*
Theme Name: Fonds Art sans exclusion
Author: Active Creative Design
Author URI: https://www.activecreativedesign.com
Tags: Art brut, MGEN, Matmut, Inter invest, Egart, accessibilité

Fonds Art sans exclusion, (C) 2121 Active creative design
*/


/* Variables */



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


/* Document
   ========================================================================== */

:root {
	
}

.admin-bar {
	--global--admin-bar--height: 64px;
}

html {
	max-width: 100%;
    overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}
 html, body {
	/*z-index: 0 !important;*/
	/*overflow: scroll !important;*/
	overflow-x: hidden;
}
body {
	margin: 0;
}

main {
	display: block;
}

#container { display:block; }


/* fonts
   ========================================================================== */
   
@font-face {
    font-family: 'Ubuntu-Regular'; 
	src: url('../fonts/UBUNTU-REGULAR.TTF');
}
@font-face {
    font-family: 'Ubuntu-Medium'; 
	src: url('../fonts/UBUNTU-MEDIUM.TTF');
}
@font-face {
    font-family: 'NotoSerifSC-Regular'; 
	src: url('../fonts/NOTOSANS-REGULAR.TTF');
}
@font-face {
    font-family: 'NotoSerifSC-Italic'; 
	src: url('../fonts/NOTOSANS-ITALIC.TTF');
}
@font-face {
    font-family: 'NotoSerifSC-Bold'; 
	src: url('../fonts/NOTOSANS-BOLD.TTF');
}
@font-face {
    font-family: 'NotoSerifSC-BoldItalic'; 
	src: url('../fonts/NOTOSANS-BOLDITALIC.TTF');
}
@font-face {
    font-family: 'Roboto-Light'; 
	src: url('../fonts/Roboto-Light.ttf');
}
@font-face {
    font-family: 'Roboto-Regular'; 
	src: url('../fonts/Roboto-Regular.ttf');
}
@font-face {
    font-family: 'Roboto-Medium'; 
	src: url('../fonts/Roboto-Medium.ttf');
}
@font-face {
    font-family: 'Roboto-Bold'; 
	src: url('../fonts/Roboto-Bold.ttf');
}
@font-face {
    font-family: 'Banschrift'; 
	src: url('../fonts/bahnschrift.ttf');
	font-stretch: semi-condensed;
}



.fontFooter {
	font-family: 'Roboto-Light';
	font-size: 16px;
	line-height: 26px;
	color: white;
}

h1 {
	position: relative;
	margin: 0;
	font-weight: normal;
	font-family: 'Banschrift', sans-serif;
	font-size: 50px;
	letter-spacing: 12px;
}
h2 {
	margin: 0;
	font-weight: normal;
	font-family: 'NotoSerifSC-Bold', sans-serif;
	font-size: 32px;
	line-height: 40px;
	margin-top: -5px;
}
h2i {
	margin: 0;
	font-weight: normal;
	font-family: 'NotoSerifSC-Italic', sans-serif;
	font-size: 20px;
	line-height: 30px;
	margin-top: -5px;
}
h2r {
	margin: 0;
	margin-left: 10px;
	font-weight: normal;
	font-family: 'NotoSerifSC-Bold', sans-serif;
	font-size: 32px;
	line-height: 40px;
	margin-top: -5px;
	color: #bc1717;
}
h3 {
	margin: 0;
	font-weight: normal;
	font-family: 'NotoSerifSC-Bold', sans-serif;
	font-size: 24px;
	line-height: 36px;
}
h4 {
	margin: 0;
	font-weight: normal;
	font-family: 'NotoSerifSC-Regular', sans-serif;
	font-size: 24px;
	line-height: 36px;
}
h5 {
	margin: 0;
	font-weight: normal;
	font-family: 'NotoSerifSC-Bold', sans-serif;
	font-size: 18px;
	line-height: 24px;
}
h6 {
	margin: 0;
	font-weight: normal;
	font-family: 'NotoSerifSC-Regular', sans-serif;
	font-size: 18px;
	line-height: 24px;
}
h7 {
	display: block;
	margin: 0;
	margin-top: 5px;
	font-weight: normal;
	font-family: 'NotoSerifSC-Italic', sans-serif;
	font-size: 18px;
	line-height: 18px;
}
p {
	margin: 0px 0px 20px 0;
	font-weight: normal;
	font-family: 'NotoSerifSC-Regular', sans-serif;
	font-size: 18px;
	line-height: 30px;
}
citation {
	display: block;
	position: relative;
	width: 1240px;
	left: 130px;
	font-family: 'Banschrift', sans-serif;
	font-size: 42px;
	line-height: 54px;
	color: #a0a0a0;
	letter-spacing: -2px;
}
citation a{
	color: #a0a0a0;
}
citation-s {
	font-family: 'Banschrift', sans-serif;
	font-size: 48px;
	line-height: 60px;
	color: #a0a0a0;
}
cartel {
	margin: 0;
	font-weight: normal;
	font-family: 'Roboto-Regular', sans-serif;
	font-size: 22px;
	line-height: 32px;
}
m {
	margin: 0;
	font-weight: normal;
	font-family: 'Roboto-Light', sans-serif;
	font-size: 20px;
}
sm {
	margin: 0;
	font-weight: normal;
	font-family: 'Roboto-Regular', sans-serif;
	font-size: 20px;
}
af {
	margin: 0;
	margin-top: -2px;
	font-weight: normal;
	font-family: 'NotoSerifSC-Regular', sans-serif;
	font-size: 14px;
}
r {
	color: #bc1717;
}
picto {
	position: absolute;
	margin: 0;
	top: -2px;
	left: 80px;
	font-weight: normal;
	font-family: 'Roboto-Regular', sans-serif;
	font-size: 20px;
	line-height: 24px;
}
a:visited,  a:hover, a:link  {
  color: black;
  text-decoration: none;
}


/* Site général
   ========================================================================== */
   
.contenu {
	position: relative;
	width: 100vw;
	min-height: calc(100vh - 200px);
}
.contenu-col {
	position: relative;
	left: calc(( 100vw - 1520px) / 2);
	width: 1520px;
}
.contenu-col-dec {
	position: relative;
	left: 125px;
	width: 1270px;
}
.contenu-col-s {
	position: relative;
	width: 980px;
	left: calc((100vw - 1520px) / 2 + 270px);
}
.contenu-espace {
	position: relative;
	width: 100%;
	height: 100px;
}
.contenu-espace-s {
	position: relative;
	width: 100%;
	height: 60px;
}
.contenu-espace-xs {
	position: relative;
	width: 100%;
	height: 30px;
}
.separateur {
	position: relative;
	width: 100%;
	height: 10px;
	background: url("../medias/hash.png");
	background-repeat: repeat;
	opacity: 0.15;
}
.separateur-dec {
	position: relative;
	width: 100vw;
	left: calc((1520px - 100vw) / 2);
}
.section {
	position: relative;
	width: 100%;
}
.section-galerie {
	position: relative;
	width: 100%;
	background: rgb(255,233,255);
	background: linear-gradient(180deg, rgba(255,233,255,1) 0%, rgba(255,250,209,1) 100%);
}
.section-galerie-espace {
	position: relative;
	width: 100%;
	height: 80px;
}
.entete-image-l {
	position: relative;
	width: 100vw;
	margin-top: 0px;
	left: 0;
	overflow: hidden;
	text-align: center;
	background:  center;
	background-repeat: repeat-x;
	background-size: cover;
	height: 600px;
}
.entete-bandeau {
	position: relative;
	width: 100vw;
	height: 5px;
	background: black;
}
.entete-citation {
	position: relative;
	width: 1520px;
	left: calc((100vw - 1520px) / 2);
	margin-top: 90px;
	margin-bottom: 120px;
	text-align: center;
}
.entete-dashed {
	position: relative;
	width: 1520px;
    left: calc((100vw - 1520px) / 2);
	height: 1px;
	background-color: black;
}
.entete-dashed2 {
	position: relative;
	/*width: 1520px;*/
    /*left: calc((100vw - 1520px) / 2);*/
	height: 1px;
	background-color: black;
}
.entete-dashed3 {
	position: relative;
	/*width: 1520px;
    left: calc((100vw - 1520px) / 2);*/
	height: 1px;
	background-color: black;
}
.entete-dashed-w {
	position: relative;
	width: 100%;
	height: 1px;
	left:0;
	background: url("../medias/dash-w.png");
	background-repeat: repeat;
}
.entete-image-m {
	position: relative;
	width: 1520px;
	left: calc((100vw - 1520px) / 2);
	height: 500px;
	margin-top: 40px;
	display: flex;
	justify-content: cznter;
	object-fit: cover;
	overflow: hidden;	
}
.entete-image-m img{
	width: 1520px;
	height: auto;
	object-fit: cover;	
}
.entete-image-s {
	position: relative;
	width: 100%;
	height: 40px;
	display: flex;
	overflow: hidden;	
}
.entete-image-l {
	
}
.entete-titre {
	position: relative;
	height: auto;
	width: 1520px;
	left: calc((100vw - 1520px) / 2);
	text-transform: uppercase;
}
.skip-link {
    position: absolute;
    top:-100px;
    background-color: black;
    -webkit-box-shadow:0 0 2px 2px rgba(0,0,0,.6);
    box-shadow:0 0 2px 2px rgba(0,0,0,.6);
    color: white;
    display: block;
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left:6px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
    -webkit-transition: top .75s ease-out;
    transition: top .75s ease-out;
}
.skip-link:focus {
    color: white;
    top: 7px;
 
    -webkit-transition: top 0s;
    transition: top 0s;
}
.bouton {
	position: relative;
    margin-top: 20px;
    height: 30px;
    line-height: 30px;
    border: solid;
	border-width: 1px 0px 0px 0px;
    display: inline-block;
    padding: 5px 15px 5px 0px;
	font-family: 'Roboto-Medium',sans-serif;
    font-size: 20px;
	/*min-width: 150px;*/
}
.bouton2 {
	position: relative;
    margin-top: 10px;
    height: 30px;
    line-height: 20px;
    border: solid;
	border-width: 0px 0px 0px 0px;
    display: inline-block;
    padding: 5px 15px 5px 0px;
	font-family: 'Roboto-Medium',sans-serif;
    font-size: 16px;
	min-width: 160px;
}

.cl {
	background-color: #285C5C;
	color: white;
}

 
/* Site header
   ========================================================================== */

.header {
	position: relative;
	height: 200px;
	width: 100vw;
	z-index: 999;
	background-color: white;
}
.header-contenu {
	position: relative;
	height: 160px;
	width: 1520px;
	top: 0;
	left: calc((100vw - 1520px) / 2);
}
.header-logo {
	position: absolute;
	height: 160px;
	width: 360px;
	top: 0;
	left: 0;
	background: url("../medias/fase_logo_160.png") no-repeat;
	background-size: contain;
}
.header-falc {
	position: absolute;
    height: 70px;
    width: 200px;
    top: 60px;
    right: 0;
    border: 0px solid;
	background-color: black;
}
.header-falc-texte {
	position: absolute;
    height: 85px;
    width: 200px;
    top: 5px;
    right: 0;
    text-align: center;
	color : white;
}
.header-falc-texte p{
	font-family: 'Roboto-Medium', sans-serif;
	margin: 0;
	line-height: 28px;
}


/* Menu start
   ========================================================================== */
   
.menu {
	position: absolute;
	height: 40px;
	width: 100vw;
	background-color: black;
	color: white;
	line-height: 40px;
	z-index: 1000;
	top: 160px;	
}
.menu-contenu {
	position: absolute;
	height: 40px;
	width: 1520px;
	left: calc((100vw - 1520px) / 2);
	display: flex;
	flex-wrap: wrap;
}
.menu-items {
	display: flex;
	position: absolute;
	top: 0px;
	left : 125px;
	width: 100%;	
	color: white;
	z-index: 998;
	flex-wrap: wrap;
}
.menu-item {
	position: relative;	
	height: 40px;
	padding: 0px 50px 0px 0px;
	color: white;
}
.menu-item a {
	color: white;
	text-decoration: none;
}
.menu-picto {
	position: relative;
	height: 40px;
	width: 40px;
	top: 0;
	left: 0;
	background: url("../medias/PictoSearch.png") no-repeat;
	background-size: contain;
}
.sous-menu {
	display: block;
	position: absolute;
	height: 40px;
	top: 0px;
	width: 100vw;
	background-color: white;
	color: black;
	line-height: 40px;
	z-index: 999;
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
	
}
.sous-menu-contenu {
	position: relative;
	height: 40px;
	width: 1520px;
	left: calc((100vw - 1520px) / 2);
	display: flex;
	flex-wrap: wrap;
}
.sous-menu-items {
	display: flex;
	position: absolute;
	left : 125px;
	width: 1520px;	
	color: white;
	z-index: 998;
	flex-wrap: wrap;
}

.sous-menu-item {
	position: relative;	
	height: 40px;
	padding: 0px 30px 0px 0px;
	color: black;
	line-height: 40px;
}
.sous-menu-item a {
	color: black;
	text-decoration: none;
	display: inline;
}

.search-field {
	padding-block: 2px;
	padding-inline: 4px;
	background-color: white;
	border-width: 1px;
	border-color:grey;
	font-family: 'Roboto-Light', sans-serif;
    font-size: 20px;
}

.search-submit {
	padding-block: 4px;
	padding-inline: 2px;
	background-color: black;
	border-width: 1px;
	border-color:grey;
	font-family: 'Roboto-Medium', sans-serif;
    font-size: 16px;
	color: white;
}


/* Site accueil
   ========================================================================== */

.accueil-rubriques {
	position: relative;
    width: 1520px;
    left: calc((100vw - 1520px) / 2);
    display: flex;
    flex-wrap: wrap;
    gap: 70px 70px;
    margin-top: 100px;
	margin-bottom: 70px;
}

.accueil-projet {
	position: relative;
	width: 460px;
	margin-bottom: 70px;
}
.accueil-projet-image {
	position: relative;
	width: 460px;
	height: 310px;
}
.accueil-projet-image img{
	width: 100%;
	max-height: 100%;
	display: block;
	object-fit: cover;
}
.accueil-projet-titre {
	position: relative;
	margin-top: 50px;
	width: 410px;
}
.accueil-projet-texte {
	position: relative;
	margin-top: 20px;
	width: 410px;
}

.accueil-collection-image {
	position: relative;
	width: 460px;
	height: 460px;
}
.accueil-collection-image img{
	width: 100%;
	max-height: 100%;
	display: block;
	object-fit: cover;
}
.accueil-collection-texte-g {
	position: relative;
	width: 460px;
	height: 460px;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	text-align: left;
}
.accueil-collection-texte-d {
	position: relative;
	width: 460px;
	height: 460px;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	text-align: right;
}
.accueil-collection-dashed {
	position: absolute;
	width: 100%;
	height: 1px;
	left:0;
	/*background: url("../medias/dash.png");
	background-repeat: repeat;*/
	/*background-color: grey;*/
	bottom: 0px;
}
.accueil-collection-titre {
	position: relative;
	width : 350px;
}
.accueil-collection-texte {
	position: relative;
	margin-top: 20px;
	width : 400px;
}

.accueil-galerie {
	position: relative;
	width: 1520px;
	left: calc((100vw - 1520px) / 2);
	display: flex;
	margin-bottom: 70px;
}
.accueil-galerie-image {
    position: relative;
    width: 990px;
	height: 560px;
    margin-top: 100px;   
    overflow: hidden;
}
.accueil-galerie-image img{
	position: relative;
    height: 560px;
	width: 990px;
    object-fit: cover;
}
.accueil-galerie-contenu {
	position: relative;
	margin-left: 70px;
	margin-top: 100px;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.accueil-galerie-titre {
	position: relative;
	width : 400px;
}
.accueil-galerie-texte {
	position: relative;
	margin-top: 20px;
	width : 400px;
}


/* Site projet
   ========================================================================== */
   
.projet-menu {
	position: absolute;
	left: calc(( 100vw - 1520px) / 2);
	width: 350px;
	text-align: right;
}
.projet-menu-mobile {
	display: none;	
}
.projet-menu-item {
	position: relative;
	width: 350px;
	height: 40px;
}
.projet-contenu {
	position: relative;
	left: calc(( 100vw - 1520px) / 2 + 450px);
	width: 1070px;
}
.projet-contenu-titre {
	position: relative;
	margin-bottom: 50px;
}
.projet-contenu-citation {
	position: relative;
	margin-bottom: 30px;
}
.projet-contenu-texte {
	position: relative;
	margin-bottom: 80px;
}
.projet-contenu-image {
	position: relative;
	width: 100%;
	margin-bottom: 80px;
}
.projet-contenu-image img{
	width: 100%;
	height: auto;
}
.projet-contenu-fondateur-logo {
	position: absolute;
	left: 100px;
}
.projet-contenu-fondateur-citation {
	position: relative;
	left: 420px;
	width: 650px;
	margin-bottom: 20px;
}
.projet-contenu-fondateur-auteur {
	position: relative;
	left: 680px;
	width: 390px;
	margin-bottom: 90px;
}
.projet-menu-pdf {
	position: relative;
	color: white;
	background: black;
	padding: 10px;
	text-align : center;
}
.projet-menu-pdf p{
	font-family: 'Roboto-Medium', sans-serif;
    margin: 0;
    line-height: 20px;
}




/* Site artistes
   ========================================================================== */

.artistes-menu {
	position: relative;
	height: 40px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0 15px;	
}
.artistes-menu-item {
	position: relative;
	height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px solid;
}
#item1 {
	background-color: black;
	color: white;
}
#item2 {
	background-color: white;
	color: black;
}
.artistes-themas {
	position: relative;
	width: 100%;
}
.artistes-thema {
	position: relative;
	width: 1520px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.artistes-thema-cartel {
	position: relative;
	width: 620px;
}
.artistes-thema-titre {
	position: relative;
	width: 560px;
}
.artistes-thema-texte {
	position: relative;
	width: 450px;
	margin-top: 50px;
	left: 50px;
}
.artistes-thema-cont {
		width: 900px;
	}
.artistes-thema-liste {
	position: relative;
	width: 900px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0; 
	margin-top: 100px;
}
.artistes-thema-artiste {
	position: relative;
	width: 300px;
	height: 300px;
	display: flex;
	align-items: center;
    justify-content: center;
}
.artistes-thema-artiste-image {
	position: absolute;
	width: 260px;
	text-align: center;
}
.artistes-thema-artiste-image img{
	width: auto;
    height: auto;
    max-width: 260px;
    max-height: 200px;
}
.artistes-thema-artiste-nom {
	margin-top: 20px;
	height: 40px;
	line-height: 40px;
	border: 1px solid;
	display: inline-block;
	padding: 0 10px 0 10px;
}
.artistes-espace {
	position: relative;
	width: 100vw;
	height: 100px;
}


/* Site artiste
   ========================================================================== */

.artiste-titre {
	position: relative;
	width: 710px;
}
.artiste-audio {
	position: absolute;
    width: 640px;
    height: 150px;
    left: 0px;
    top: -75px;
}
.artiste-audio-image {
	position: relative;
	width: 165px;
	height: 45px;
	background: url("../medias/picto_audiodescription.png") no-repeat;
	background-size: contain;
}
.artiste-texte {
	position: relative;
    margin-top: 100px;
    width: 100%;
    columns: 2;
    column-gap: 100px;
}
.artiste-oeuvres-titre {
	position: relative;
}
.artiste-oeuvres-items {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0;
	margin-bottom: 60px;
}
.artiste-oeuvres-item {
	position: relative;
	width: 380px;
	display: flex;
	align-items: center;
    justify-content: center;
}
.artiste-oeuvres-item-image {
	position: relative;
	width: 280px;
	text-align: center;
}
.artiste-oeuvres-item-image img{
	width: auto;
    height: auto;
    max-width: 280px;
    max-height: 250px;
}
.artiste-oeuvres-item-titre {
	margin-top: 0px;
	width: 280px;
}
.artiste-oeuvres-item-titre p{
	padding: 0px 0px 10px 0px;
	font-family: 'Roboto-Medium',sans-serif;
    font-size: 18px;
}


/* Site oeuvres
   ========================================================================== */

.oeuvres-artistes {
	position: relative;
	width: 1520px;
}
.oeuvres-artiste {
	position: relative;
	width: 100%;
}
.oeuvres-artiste-espace {
	position: relative;
	width: 100%;
	height: 60px;
}
.oeuvres-artiste-nom {
	position: relative;
}
.oeuvres-artiste-items {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0;
}
.oeuvres-artiste-item {
	position: relative;
	width: 380px;
	height: 380px;
	display: flex;
	align-items: center;
    justify-content: center;
}
.oeuvres-artiste-item-image {
	position: absolute;
	width: 280px;
	text-align: center;
}
.oeuvres-artiste-item-image img{
	width: auto;
    height: auto;
    max-width: 280px;
    max-height: 250px;
}
.oeuvres-artiste-item-titre {
	margin-top: 20px;
	width: 280px;
}


/* Site oeuvre
   ========================================================================== */

.oeuvre-fs {
	display: none;
	position: fixed;
	width: 100vw;
	height: calc(100vh - calc(100vh - 100%));
	top: 0;
	background-color: white;
	z-index: 1000;
}
.oeuvre-fs-image {
	position: relative;
	width: 90vw;
	height: calc((100vh - calc(100vh - 100%)) * 0.95 - 100px);
	left: 5vw;
	top: 5vh;
	overflow: hidden;
}
.oeuvre-fs-zoom {
	display: absolute;
	position: relative;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
}
.oeuvre-fs-drag {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	align-items: center;
    justify-content: center;
	z-index: 2000;
	text-align: center;
}
.oeuvre-fs-image img {
	position: relative;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
.oeuvre-fs-cartel {
	position: absolute;
	width: 1000px;
	bottom: 100px;
	left: calc((100vw - 1000px) / 2);
	text-align: center;
}
.oeuvre-fs-titre {
	position: absolute;
	width: 1000px;
	top: 20px;
	text-align: center;
}
.oeuvre-fs-artiste {
	position: absolute;
	width: 1000px;
	top:50px;
	text-align: center;
}
.oeuvre-fs-plus {
	position: absolute;
	width: 40px;
	height: 40px;
	right: calc(5vw + 50px);
	bottom: 30px;
	background: url("../medias/picto_plus.png") no-repeat;
	background-size: contain;
	z-index: 3000;
}
.oeuvre-fs-moins {
	position: absolute;
	width: 40px;
	height: 40px;
	right: calc(5vw + 100px);
	bottom: 30px;
	background: url("../medias/picto_moins.png") no-repeat;
	background-size: contain;
	z-index: 3000;
}
.oeuvre-fs-close {
	position: absolute;
	width: 40px;
	height: 40px;
	right: calc(5vw);
	bottom: 30px;
	background: url("../medias/picto_close.png") no-repeat;
	background-size: contain;
	z-index: 3000;
}

.oeuvre-3d {
	display: none;
	position: fixed;
	width: 100vw;
	height: calc(100vh - calc(100vh - 100%));
	top: 0;
	background-color: #d7d7d7;	
	z-index: 1000;
}
.oeuvre-3d-image {
	display: flex;
	position: relative;
	width: 90vw;
	height: calc((100vh - calc(100vh - 100%)) * 0.95 - 100px);
	left: 5vw;
	top: 5vh;
	align-items: center;
    justify-content: center;
}
.oeuvre-3d-image img {
	position: relative;
	width: auto;
	height: auto;
	max-width: 90vw;
	max-height: calc((100vh - calc(100vh - 100%)) * 0.95 - 100px);
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(255,255,255,1) 100%);
}
.oeuvre-3d-bt-fermer {
	position: absolute;
	width: 60px;
	height: 60px;
	right: 30px;
	bottom: 30px;
	background: url("../medias/picto_fermer.png") no-repeat;
	background-size: contain;
}

.oeuvre-contenu-t {
	position: relative;
	width: 860px;
}
.oeuvre-contenu-t-artiste {
	position: relative;
	width: 540px;
	margin-bottom: 10px;
}
.oeuvre-contenu-t-titre {
	position: relative;
	width: 540px;
	margin-bottom: 20px;
}
.oeuvre-contenu-t-technique {
	position: relative;
	width: 540px;
}
.oeuvre-contenu-t-date {
	position: relative;
	width: 540px;
	margin-bottom: 40px;
}
.oeuvre-contenu-c {
	position: relative;
	width: 1520px;
	display: flex;
	flex-direction: row;
}
.oeuvre-contenu-g {
	position: relative;
	width: 860px;
}
.oeuvre-contenu-g-image {
	position: relative;
	width: 860px;
}
.oeuvre-contenu-g-image img{
	position: relative;
	width: auto;
	height: auto;
	max-width: 860px;
	max-height: 680px;
}

.oeuvre-contenu-g-explorer {
	position: relative;
	width: 180px;
	height: 55px;
	margin-top: 50px;
	background: url("../medias/picto_explorer.png") no-repeat;
	background-size: contain;
}
.oeuvre-contenu-d {
	position: relative;
	width: 660px;
}
.oeuvre-contenu-d-audio {
	position: absolute;
	width: 660px;
	top: -100px;
}
.oeuvre-contenu-d-audio-image {
	position: relative;
	width: 220px;
	height: 60px;
	left: 100px;
	background: url("../medias/picto_audiodescription.png") no-repeat;
	background-size: contain;
}
.oeuvre-contenu-d-texte {
	position: relative;
	left: 100px;
	width: 560px;
}
.oeuvre-contenu-d-texte p{
	margin-top: 0;
	margin-bottom: 30px;
}


/* Audio
   ========================================================================== */
   
.audio-espace {
	position: relative;
	width: 100%;
	height: 50px;
}
.audio-rubrique {
	position: relative;
	width: 980px;
	left: 0px;
}
.audio-rubrique-picto {
	position: absolute;
	width: 60px;
	height: 45px;
	top: 0px;
	right: -100px;
	background: url("../medias/picto_audio_liste.png") no-repeat;
	background-size: contain;
}
.audio-rubrique-nom {
	position: relative;
	width: 880px;
	left: 0px;
	margin-bottom: 20px;
}
.audio-rubrique-oeuvre {
	position: relative;
	left: 90px;
	width: 790px;
	margin-bottom: 20px;
}
.audio-rubrique-theme {
	position: relative;
	width: 880px;
	left: 0px;
	margin-bottom: 30px;
}

/* Audio player
   ========================================================================== */
   
#audio-player-container {
  --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
	
}
#audio-player-container::before {
    position: absolute;
    content: '';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    left: -2px;
    top: -2px;
    // background: linear-gradient(to left, #007db5, #ff8a00);
    z-index: -1;
}
.lecteur-audio {
	display: none;
	position: fixed;
	width: 100vw;
	height: 60px;
	bottom: 0;
	background-color: black;
	z-index: 500;
}
.lecteur-audio-player {
	position: absolute;
	width: 1520px;
	left: calc((100vw - 1520px) / 2 );
	top: 10px;
	height: 40px;
}
.play-icon {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 5px;
	outline: none;
	border: none;
	background-size: contain;
}
#play-icon {
	background: url("../medias/picto_play.png") no-repeat;
	background-size: contain;
}
.mute-icon {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 5px;
	right: 0px;
	background-color: white;
	outline: none;
	border: none;
}
#mute-icon {
	background: url("../medias/picto_audio_on.png") no-repeat;
	background-size: contain;
}
.seek-slider {
	position: absolute;
	left: 100px;
	top: 15px;
	width: 1170px;
	height: 5px;
}
input[type='range'] {
  -webkit-appearance: none;
  background-color: grey;
  height: 10px;
  /*overflow: hidden;*/
}
input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 10px;
  border: 0;
  box-shadow: none;
  decoration: none;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: white;
  /*border-radius: 50%;*/
  cursor: pointer;
  margin-top: -7px;
  height: 24px;
  width: 5px;
  border: 0;
  decoration: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.current-time {
	position: absolute;
	left: 40px;
	top: 10px;
	width: 50px;
	text-align: right;
	color: white;
}
.duration {
	position: absolute;
	top: 10px;
	right: 200px;
	width: 50px;
	text-align: right;
	color: white;
}
.volume-slider {
	position: absolute;
	right: 50px;
	top: 15px;
	width: 100px;
}


/* Galerie
   ========================================================================== */
   
.galerie-logo {
	position: fixed;
	width: 360px;
	height: 160px;
	left: 50px;
	top: 0px;
	z-index: 2000;
	background: url("../medias/fase_logo_160.png") no-repeat;
	background-size: contain;	
}
.galerie-loader {
	position: fixed;
	width: 100vw;
	left: 0;
	height: 100vh;
	background-color: rgba(255, 255, 255, 1.0);
	z-index: 1000;
	display: flex;
	align-items: center;
    justify-content: center;
	flex-direction: row;
	background: rgb(255,233,255);
	background: linear-gradient(180deg, rgba(255,233,255,1) 0%, rgba(255,250,209,1) 100%);
}
.galerie-pleinEcran {
	position: fixed;
	width: 100vw;
	left: 0;
	height: 100vh;
	background-color: rgba(255, 255, 255, 1.0);
	z-index: 1000;
	display: none;
	align-items: center;
    justify-content: center;
	flex-direction: row;
	background: rgb(255,233,255);
	background: linear-gradient(180deg, rgba(255,233,255,1) 0%, rgba(255,250,209,1) 100%);
}
#bouton-fullscreen {
	width: 400px;
	height: auto;
	padding: 10px 25px 10px 25px;
	text-align: center;
	border: solid 1px;
	cursor:pointer;
}
#warning-message {
	display: none;
	width: 100vw;
	height: 100vh;
	background-color: white;
	align-items: center;
    justify-content: center;
	text-align: center;
}
#warning-message-texte {
	width: 400px;
	height: auto;
	text-align: center;
}
@media only screen and (orientation:portrait){

	#wrapper { display:none; }

	#warning-message { display:flex; }

}
@media only screen and (orientation:landscape){

	#warning-message { display:none; }

}
.galerie-menu {
	position: fixed;
	width: 40vw;
	left: 60vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 1.0);
	z-index: 9999;
	display: none;
	align-items: center;
    justify-content: center;
	flex-direction: row;
	background: rgb(255,233,255);
	background: linear-gradient(180deg, rgba(255,233,255,1) 0%, rgba(255,250,209,1) 100%);
}
.galerie-menu-items {
	position: absolute;
	width: 20vw;
	left: 10vw;
	
}
.galerie-menu-titre {
	position: relative;
	text-align: center;
	width: 20vw;
	height: 150px;	
}
.galerie-menu-titre h1{
	font-size: 60px;
	top: -20px;
	line-height: 30px;
	text-align: center;
	position: relative;
	margin: 0;
}
.galerie-menu-item {
	position: relative;
	text-align: center;
	width: 20vw;
	height: 30px;
	cursor: pointer;	
}
.galerie-menu-item h3{
	line-height: 30px;
}
.galerie-menu-items a{
	color: black;
}
.galerie-menu-espace {
	position: relative;
	width: 20vw;
	height: 20px;	
}
#galerie-3d {
	position: relative;
	width: 100vw;
	height: 100vh;
}
#galerie-3d canvas {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}
#galerie-3d-fermer {
	position: absolute;
	width: 60px;
	height: 60px;
	bottom: 15px;
	right: 15px;
	background: url("../medias/picto_close_white.png") no-repeat;
	background-size: contain;
	z-index: 8999;
	cursor: pointer;
}


/* FALC
   ========================================================================== */
   
.falc-logo {
	position: absolute;
	width: 200px;
	height: 200px;
	left: calc((100vw - 1520px) / 2);
}
.falc-logo img{
	position: absolute;
	width: 200px;
	height: auto;
}
.falc-col{
	position: relative;
	width: 1070px;
	left: calc((100vw - 1520px) / 2 + 450px);
}
.falc-sousTitre {
	position: relative;
	margin-bottom: 50px;
}
.falc-items {
	position: relative;
}
.falc-item {
	position: relative;
}
.falc-item-titre {
	position: absolute;
	width: 250px;
	text-align: right;
}
.falc-item-texte {
	position: relative;
	width: 770px;
	left: 300px;
	margin-bottom: 50px;
}
.falc-item-texte p{
	font-size: 24px;
	line-height: 40px;
}


/* Site A propos
   ========================================================================== */

.com-menu {
	position: absolute;
	left: calc(( 100vw - 1520px) / 2);
	width: 450px;	
}
.com-menu-item {
	position: relative;
	width: 400px;
	margin-bottom: 15px;
}
.com-menu-item h3, .com-menu-item h4{
	line-height: 32px;
}
.com-contenu {
	position: relative;
	left: calc(( 100vw - 1520px) / 2 + 450px);
	width: 1070px;
}
.com-contenu-titre {
	position: relative;
}
.com-contenu-titre h1{
	position: relative;
	top: 0;
	font-size: 50px;
	font-family: 'Roboto-Bold', sans-serif;
	margin-bottom: 30px;
}
.com-contenu-texte {
	position: relative;
	margin-bottom: 80px;
}
.com-contenu-texte h2{
	margin-bottom: 10px;
}
.com-contenu-texte h3{
	margin-top: 10px;
}

/* Site Recherche
   ========================================================================== */

.recherche-espace {
	position: relative;
	height: 40px;	
}

.recherche-item {
	position: relative;
	width: 600px;	
}

.recherche-barre {
	position: absolute;
	left: -50px;
	top: 5px;
	width : 30px;
	height: 30px;
	background-color: #a0a0a0;
	background: url("../medias/FASE_logo_carre_alpha.png") no-repeat;
	background-size: contain;
}


/* Footer
   ========================================================================== */
   
.footer-image {
	position: relative;
	width: 100vw;
	height: 240px;
	overflow: hidden;
}
.footer-image img{
	width: 100vw;
	object-fit: cover;
}
.footer {
	position: relative;
	width: 100vw;
	background-color: black;
	padding-bottom: 40px;
}
.footer-contenu {
	position: relative;
	width: 1320px;
	left: calc((100vw - 1520px) / 2 + 200px);
	top: 40px;
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 0px 50px;
}
.footer-contenu p{
	margin: 0;
	font-family: 'Roboto-Light';
	font-size: 16px;
	line-height: 26px;
	color: white;
}
.footer-contenu a{
	color: white;
}
.footer-logo {
	position: absolute;
	left: -200px;
	width: 60px;
	height: 60px;
}
.footer-logo img{
	width: 100%;
	object-fit: cover;
}
.footer-colonne {
	margin-top: 0px;
	width: 300px;
}
.footer-colonne-1 {
	position: absolute;
    margin-left: -150px;
    width: 130px;
    text-align: right;	
}
.footer-colonne-2 {
	position: relative;
	margin-left: 120px;
	margin-bottom: 0px;
}