:root {
	--largeurConteneur:740px;
	--marginStd:50px;
	--beige:#faeecb;
	--bleu-cyan:#00ace2;
	--rougeVif: #e5231d;
	--orange: #df5d32;
}


body { 
	margin:0; 
}
header, nav, div {
	box-sizing: border-box;
	border:solid 0px lightgrey;
}
.clear { clear:both; }


/* __________________________________


INDEX 

__________________________________ */

#index-fond {
	position:fixed;
	top:0;left:0;width:100vw;height:100vh;
	background-image:url(imgs/template_bitmapmonochrome_beige.png);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

#index-fond-2 {
	position:fixed;
	top:0;left:0;width:100vw;height:100vh;
	background: #FFF;
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	z-index: 2;
}

header {
	position:relative;
	width:100vw;height:70px;
	padding:var(--marginStd);
	z-index: 10000;
}
header a { 
	text-decoration: none;
	transition:  all 0.2s ease-in;
}
header a:link, header a:visited { color:#000; }
header a:hover, header a:active { color:var(--bleu-cyan); }
header a.on { color:var(--bleu-cyan); }

.container {
	position:relative;margin:0 auto;
	width:var(--largeurConteneur);
	z-index: 1000;
	font-family: 'LibreFranklin-ExtraLight';
	font-size: 14px;

}
.containerTop { padding:75px 0; }



/* __________________________________

NAV LARGE, MEDIUM and SMALL
__________________________________ */

#nav-large #nav-container, 
#nav-medium #nav-container, 
#nav-small #nav-container {
	display:flex;
	justify-content: flex-start;
}

/* __________________________________

NAV LARGE > 1024px 
__________________________________ */


#nav-large .container .nav-item { 
	font-family: 'Adelphe-Trouble-FlorealRegular';
	font-size:30px;
	width:33%;padding-left:10px;text-align:center; 
}
/*
.nav-item#logo { width:18%; }
#logo img { width:80px;margin-top:-15px;margin-left:8px; }
*/
#nav-large #nav-logo {
	position:absolute;
	left: -100px;top: -15px;
	display: flex;justify-content: flex-end;
	border: solid 0px red;
}
#nav-large #nav-logo img { width:80px; }
#nav-large #nav-support {
	font-family: 'Adelphe-Trouble-FlorealRegular';
	font-size:30px;
	position:absolute;right:var(--marginStd);
}

/* __________________________________

NAV MEDIUM > 760px && < 1024px
__________________________________ */
#nav-medium { display:none; }
#nav-medium .container .nav-item { 
	font-family: 'Adelphe-Trouble-FlorealRegular';
	font-size:26px;
	width:22%;padding-left:10px;text-align:center; 
	height: 45px;
}
#nav-medium .container .nav-item:first-child { width:100px; }
#nav-medium #logo img { width:100px;margin-top:-27px;  }



/* __________________________________

NAV SMALL < 760px 
__________________________________ */
#nav-small { display:none; }
#nav-small .container .nav-item { 
	font-family: 'Adelphe-Trouble-FlorealRegular';
	font-size:20px;
	width:27%;height: 30px;padding-left:0px;text-align:center; 
}
#nav-small .container .nav-item:first-child { width:100px; }
#nav-small #logo img { width:100px;margin-top:-35px;  }







#index-grid {
	
}
.case, .case-unit { 
	position:relative;
	height:auto;
	cursor:pointer;
	float:left;
	width:33.33%;padding:0% 2% 2% 2%;
}
.case img, .case-unit img { width:100%; }
.case-vignette { width:100%; }
.case-titre, .case-legende {
	position: relative;
	font-family: 'LibreFranklin-Regular';
	font-size:12px;
}
.case-titre { margin-top: 10px; }

.case-titre.hexa { margin-top:-5px; }

.case-duree {
	position: absolute;
	right: 10px;
	bottom: 80px;
	width: fit-content;height: 20px;
	background-color: var(--rougeVif);
	color: #fff;
	font-family: 'Fraunces72ptSoft-Light';
	font-size: 11px;
	padding: 4px 2px 5px 1px;
	border-radius: 3px;
	cursor: pointer;
	z-index: 10000;
}
.shape-box.hex .case-duree { bottom:90px; }
.case-duree-play {
	position: relative;
	display: inline-block;
	width: 12px;height: 10px;
	background-image:  url(imgs/play-small-white.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}


/* ________________________

SVG MASKS
________________________ */


/* SVG fills whatever the container is */
svg {
    width: 100%;
    height: 100%;
    display: block;
}

.shape-box {
    border: solid 0px tomato;
    /* Change these freely — the SVG and its masks adapt */
    
    max-width: 250px;
    max-height: 250px;
    
}

/* different sizes per shape */

.shape-box.square   { width: 214px; height: 214px; }
.shape-box.circle   { width: 215px; height: 215px; }


.shape-box.triangle { width: 236px; height: 213px;margin-left:-12px; }
.shape-box.hex      { width: 216px; height: 228px; }

/* Different sizes in workshop, see below */





/* ________________________

FILTERS
________________________ */

#filters {
	position:fixed;
	right:10px;
	bottom:10px;
	width:240px;height:380px;
	padding: 10px;
	background-color:var(--beige);
	border-radius:15px;
	border:solid 0.5px var(--bleu-cyan);
	z-index: 5000;
	cursor: move;
}

#filters-infos {
	position: absolute;
	width: 220px;
	top: -20px;
	font-family: 'LibreFranklin-Bold';
	font-size:10px;
	text-transform: uppercase;
	color: var(--bleu-cyan);
}
#filters-infos div { display:flex;align-items:center; }
#filters-infos img { height:16px;margin-right:5px; }
#filters-infos-move { position:absolute;right:0; }
#filters-infos-shrink { position:absolute;right:0; }

#filters-search {
	position: relative;
	width: 220px;height: 37px;
	border-bottom: solid 1px var(--bleu-cyan);
	display: flex;align-items: center;
}
#filters-type {
	background-color: transparent;
	border: 0;outline:0;
	font-family: 'LibreFranklin-Regular';
	font-size:14px;
	color: var(--bleu-cyan);	
	margin-top: -5px;
}
#filters-search-icon { 
	position: absolute;
	right: 0;top: 0px;
	width:24px;height:24px;
}
#filters-search-icon img { width: 100%; }

#filters #filters-container {
	position: absolute;
	top: 70px;
	width: 220px;height: 300px;
	border: solid 0px tomato;
	overflow: auto;
}
#filters-container::-webkit-scrollbar {
	display: none;
}
#filters-top #filters-container {
	position:relative;height: 150px;
	overflow: auto;
}
#filters-container img, 
#all-filters img { height:16px; }
.filter-title {
	position: relative;margin: 10px 0;
	/* font-family: 'LibreFranklin-ExtraLight'; */
	font-family: 'Escabeau-Regular';
	font-size:13px;

}

.filter-type-ligne {
	position: relative;width: 100%;margin-bottom: 4px;
}

.filter-type {
	font-family: 'Escabeau-Regular';
	font-size: 15px;
	width: fit-content;
	color:var(--bleu-cyan);
	text-transform: uppercase;
	text-align: right;
	letter-spacing: 0.05em;
	padding: 2px;margin: 2px;
}
.filter-type:hover {
	color: #fff;
	background-color: var(--bleu-cyan);
}
.filter {
	position: relative;display: inline;
	padding: 2px;
	font-family: 'Fraunces72ptSoft-ExtraLight';
	font-size: 15px;
	color: var(--bleu-cyan);
	background-color: transparent;
}
#filter-duree .filter {
	display: block;line-height:0.95em;
}
.filter:hover {
	background-color: var(--bleu-cyan);
	color: #fff;
}


#filters-resp-container {
	z-index: 2000;
}

#filters-resp {
	position:relative;	
	width:100%;height: 40px;
	margin: 0px 15px;padding: 0px 10px;
	z-index: 5000;
}
#all-filters { 
	position: relative;display:none; 
	border: solid 2px red;
	top: 45px;left: -15px;
	background-color:var(--beige);
	border-radius:15px;
	border:solid 0.5px var(--bleu-cyan);
	padding: 10px;
}
#filters-showFilters {
	position: absolute;
	top: 0px;left: 135px;width: 250px;
	font-family: 'Fraunces72ptSoft-Regular';
	font-size: 18px;
	color: var(--bleu-cyan);
	cursor: pointer;
}
#filters-showFilters img { 
	position: relative;
	height:20px;top: 4px;padding-right: 10px; 
}
#filters-showFilters #filters-show, 
#filters-showFilters #filters-hide {
	display: inline;
}
#filters-showFilters #filters-hide {
	display: none;
}

/* ________________________

PLAYER
________________________ */

#player {
	position:fixed;
	left:50%;margin-left:-340px;
	bottom:15px;
	width:680px;height:68px;
	padding: 10px;
	background-color:var(--beige);
	border-radius:15px;
	border:solid 0.5px var(--bleu-cyan);
	overflow: hidden;	
	z-index: 7000;
}

#player-topBar {
	position: relative;width: 100%;
	top: 5px;left: 0;
	border: solid 0px red;
	display: flex;align-items: center;
}

#player-play {
	position: relative;
	width: 125px;height: 100%;
	display: flex;justify-content: center;align-items: center;
	cursor: pointer;
}
#player-play-container {
	position: relative;
	width: 40px;height: 40px;
}
#player-play-container .play, #player-play-container .pause {
	position: absolute; top: 0;left: 0;width: 100%;height: 100%;
}
#player-play-container .pause {
	display: none;
}
#player-title {
	position: relative;
	width: 375px;height: 100%;
	font-family: 'LibreFranklin-Regular';
	font-size: 12px;
	display: flex;align-items:center;
	
}
#player-title-conteneur { z-index:200; }

#barreProgression_conteneur {
	position: absolute;
	left: -25px;
	z-index: 100;
	width: 100%;height: 40px;
	background-color: #f3e8c4;
}
#barreProgression_conteneur:hover { cursor:pointer; }
#barreProgression {
    position:absolute;top:0;left:0;height:100%;width:0px;
    background-color: #f29b75;
    opacity: 0.2;
    
}


#player-buttons {
	position: relative;
	height: 100%;
	display: flex;align-items:center;
}
#player-buttons img { height:20px; }
#player-buttons .playlist-previous,
#player-buttons .playlist-next { 
	width: 8px;
	cursor: pointer;
}
#player-buttons .playing-time { 
	width: 100px;
	font-family: 'Adelphe-Trouble-FlorealRegular';
	font-size:12px;
	text-align: center;
	color: var(--rougeVif) 
}
#player-buttons .playlist-open {
	position: relative;padding-left: 17px;
	width: 35px;
	text-align: right;
	cursor: pointer;
}
#player-buttons .playlist-open img { height: 15px; }


.pause { display:none; }

#player-items {
	position: relative;
	margin-top: 20px;
	border-top:  solid 1px var(--bleu-cyan);
	padding-top: 4px;
}
.player-item {
	position: relative;
	font-family: 'LibreFranklin-Regular';
	font-size: 12px;
	height: 30px;
	padding-top: 5px;
	border-radius: 7px;
	transition: all 0.2s ease-in;
	display: flex;
}
.player-item:hover {
	background-color: #FEF8EA;
}
.player-item a { text-decoration: none;transition:all 0.2s ease-in; }
.player-item a:link, .player-item a:visited { color:#000; }
.player-item a:hover, .player-item a:active { color:var(--rougeVif); }

.player-item-duree-container {
	position: relative;width: 125px;
}
.player-item-duree {
	position: relative;
	
	width: fit-content;height: 20px;
	background-color: var(--orange);
	color: #fff;
	font-family: 'Fraunces72ptSoft-Light';
	font-size: 11px;
	margin:  0 37px;
	padding: 4px 2px 5px 1px;
	border-radius: 3px;
	cursor: pointer;
	z-index: 10000;
	transition: all 0.2s ease-in;
}
.player-item-duree:hover { background-color: var(--rougeVif); }

.player-item-titre { padding-top:4px; }




/* ________________________

LAYOUT
________________________ */

h1, h2, h3, h4 { margin: 0; }
h1 {
	font-family: 'Fraunces72ptSoft-Black';
	font-size: 40px;
	color: var(--bleu-cyan);
}
h2 {
	font-family: 'Fraunces72ptSoft-Black';
	font-size: 40px;
	color: var(--orange);
}
h3 {
	font-family: 'Adelphe-Trouble-FlorealRegular';
	font-size:30px;
	line-height: 1.2em;
}
h4 {
	font-family: 'Adelphe-Trouble-FlorealRegular';
	font-size:26px;
	line-height: 1.2em;
}
.legende {
	font-family: 'Fraunces72ptSoft-ExtraLight';
	font-size: 15px;
	color: var(--bleu-cyan);
}

ol, ul {
	font-family: 'LibreFranklin-Light';
	font-size: 14px;
}
li { margin:5px 0; }

.citation {
	font-family: 'Escabeau-Regular';
	font-size: 15px;
	color: var(--rougeVif);
}
.lettrine {
	font-family: 'Adelphe Trouble Germinal';
	font-size: 96px;

	float:left;
    margin-right: 12px;
    
    margin-top: -30px;    
    margin-bottom: -25px;
}




/* __________________________________


ATELIERS 

__________________________________ */


.ateliers-ligne {
	position: relative;
	margin-bottom:  var(--marginStd);
}
.ateliers-vignette {
	position: relative;
	float: left;
	width: 275px;
}
.ateliers-contenu {
	position: relative;
	margin-left: 275px;
	width: 460px;
	color: var(--bleu-cyan);
}
.ateliers-titre { 
	position: relative;
	margin-bottom:5px;
	color: #000;
}
.ateliers-chapeau { 
	position: relative;
	margin-bottom:15px;
	font-size: 16px;
	color: #000;
}


.ateliers-vignette .shape-box.square   { width: 240px; height: 240px;max-width:240px;max-height:240px; }
.ateliers-vignette .shape-box.circle   { width: 185px; height: 185px; }
.ateliers-vignette .shape-box.triangle { width: 240px; height: 220px; }
.ateliers-vignette .shape-box.hex      { width: 200px; height: 180px; }