@font-face {
	font-family: "Circula";
	src: url('../../public/css/circula.otf');
}

@font-face {
	font-family: "Montserrat";
	src: url('../../public/css/montserrat.ttf');
}

@font-face {
	font-family: "Gliker";
	src: url('../../public/css/gliker.ttf');
}

@font-face {
	font-family: "Berlin";
	src: url('../../public/css/berlin.ttf');
}

@font-face {
	font-family: "Source";
	src: url('../../public/css/source-regular.ttf');
}

@font-face {
	font-family: "SourceBlack";
	src: url('../../public/css/source-black.ttf');
}

*
{
	box-sizing: border-box;
}

:root
{
	/*--primary-bg-color: #f6f6f6;*/
	--primary-bg-color: #e8edf0;
	--primary-color: #003459;
	
	--secondary-bg-color: #003459;/*#2b4f8d;*/
	--secondary-color: #e8edf0; /*#f6f6f6;*/
	--secondary-foreground: #2B4F8D;
	
	--muted-bg-color: #049CE4;
	--muted-color: rgb(2, 201, 175);
	
	--accent-bg-color: #021035;
	--accent-color: #049CE4;
	
	--card-color: #e8edf0; /*#011034;*/
	--card-bg-color: #003459; /*rgba(2, 201, 175, 0.47);*/
	--card-border-color: #e8edf0;
	
	--primary-radius: 8px;
	--secondary-radius: 32px;
	
	--youtube-width: 465px;
	--tall-width: 535px;
	--youtube-height: 720px;
	
	--font-title: "SourceBlack";
	--font-menu: "Berlin";
	--font-site: "Source";
	
	--scene-height: 100vh;
}

html, body
{
	margin: 0;
	padding: 0;
	font-size: 18px;
	min-height: 100%;
	font-family: var(--font-site), Tahoma, Helvetica, sans-serif;
	height: 100%;
	
}

.mobile
{
	display: none;
}

.desktop
{
	display: block;
}

.theme-2, .theme-1
{
	color: var(--primary-color);
	/*background: var(--primary-bg-color);*/
	background: var(--accent-color);
	min-height: 100%;
}

.bg-1
{
	/*background: #FD93B7;*/
	background: var(--secondary-bg-color);
}

.color-1
{
	color: #FD93B7;
}



.bg-2
{
	background: #6040a5;
}

.emphasis
{
	font-size: 1.2em;
	font-weight: 600;
	max-width: 1080px;
	width: 75vw;
	margin: auto;
}

.in-bg
{
	/*text-shadow: 4px 2px 4px #B05473;
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.5;
	*/
	background: var(--primary-bg-color);
	padding: 16px 0;
}

.in-grid
{
	background: var(--primary-bg-color); /*url('../../public/images/css/grid.png') top left repeat;*/
	/*background: url('../../public/images/css/grid.png') top left repeat;*/
	padding: 40px 0;
}

.in-grid > .max
{
	width: 75vw;
	max-width: 1080px;
	margin: auto;
}

.color-2
{
	color: #6040a5;
}

.shine
{
	text-shadow: 2px 2px 2px var(--primary-color);
}

.font-2
{
	font-family: var(--font-title), sans-serif;
	letter-spacing: .1em;
}

.font-3
{
	font-family: var(--font-menu), sans-serif;
}

.icon32
{
	display: inline-block;
	width: 32px;
	height: 32px;
}

.icon64
{
	display: inline-block;
	width: 64px;
	height: 64px;
}

.icon
{
	/*font-size: 1.5em;*/
}

img.max100
{
	max-height: 100px;
}


#social .icon 
{
	font-size: 1.8em;
}

.space-lx
{
	margin-left: 24px;
}

.clock, .insta, .facebook, .linkedin, .twitter, .mail, .locked, .unlocked, .download, .edit, .rm, .tiktok
{
	background: url('../../public/images/css/icons/icons.png') top left no-repeat;
}

.linkedin.icon32 { background-position: 0px 0; }
.clock.icon32 { background-position: -32px 0; }
.mail.icon32 { background-position: -64px 0; }
.facebook.icon32 { background-position: -96px 0; }
.twitter.icon32 { background-position: -128px 0; }
.insta.icon32 { background-position: -160px 0; }
.locked.icon32 { background-position: -192px 0; }
.unlocked.icon32 { background-position: -224px 0; }
.download.icon32 { background-position: -256px 0; }
.edit.icon32 { background-position: -288px 0; }
.rm.icon32 { background-position: -320px 0; }
.tiktok.icon32 { background-position: -352px 0; }
.linkedin.icon64 { background-position: 0px -32px; }
.clock.icon64 { background-position: -64px -32px; }
.mail.icon64 { background-position: -128px -32px; }
.insta.icon64 { background-position: -192px -32px; }
.twitter.icon64 { background-position: -256px -32px; }
.facebook.icon64 { background-position: -320px -32px; }
.tiktok.icon64 { background-position: -384px -32px; }

.photo-demo
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.photo-ref
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.photo-network
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.photo-studio
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.photo-tarifs
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.photo-contact
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.photo-legal
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.main-bg
{
	background-size: cover;
	background-attachment: fixed;
	background-position: top center;
}

.bg-holder
{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -50;
	background-attachment: local;
}

.photo-scene
{
	min-height: calc(var(--scene-height) - 40px);
}

.g-recaptcha > div
{
	margin: auto;
}

.box
{
	margin: 0 120px;
	padding-bottom: 20px;
}

.spacer
{
	margin-top: 60px;
}

.inspacer
{
	padding-top: 60px;
}

.bluebox
{
	background: #2b4f8dba;
	padding: 10px 0;
	margin-bottom: 10px;
	min-height: 200px;
	display: flex;
}

.bluebox > div
{
	max-width: 1080px;
	margin: auto;
	justify-content: center;
}

.hidden
{
	display: none;
}

.message
{
	background: var(--accent-color);
	border-radius: 4px;
	padding: 4px;
	color: var(--accent-bg-color);
}

.colgroup > div
{
	border-right: 1px solid var(--primary-color);
	padding: 8px;
}

.colgroup > div:last-child
{
	border: 0;
}

body > header > div, body > header #diaporama, body > header #title
{
	height: 100%;
}

body > header
{
	height: 100%;
	position: relative;
}

header a, footer a, #horaires a
{
	text-decoration: none;
}

footer .underline a
{
	text-decoration: underline;
}

#menu
{
	position: absolute;
	width: 100%;
	top: -50px;
	z-index: 10;
	background: transparent;
}

/*#menu nav, #submenu nav
{
	margin: 0 120px;
}
*/

#menu.scrolling, #submenu
{
	position: fixed;
	top: 0px;
	background:  var(--secondary-bg-color);
	transition: background 1s ease 0s;
	transition: top 1s ease 0s;
	z-index: 250;
}

#menu ul, #submenu ul
{
	list-style: inside none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}

#menu li, #submenu li
{
	/*margin: 0 10px;*/
	/*font-size: 24px;*/
	color: var(--primary-bg-color);
}

#menu a, #submenu a, #horaires a, 
{
	color: var(--primary-bg-color);
	text-decoration: none;
}

.phone
{
	padding-left: 4px;
}

#menu a:hover, #menu a.active, #submenu a:hover
{
	color: var(--accent-color);
	text-decoration: underline;
}

#menu .onscroll, #submenu .onscroll
{
	display: none;
	flex-grow: 1;
}

#menu.scrolling .onscroll, #submenu .onscroll
{
	display: inherit;
}

#menu.scrolling ul, #submenu ul
{
	top: 0;
}

#submenu
{
	width: 100%;
}

section, div.section
{
	padding-bottom: 60px;
}

.section section
{
	padding: 0;
}

section > div
{
	padding: 16px 8px;
}

#horaires
{
	position: fixed;
	top: 0;
	width: 100%;
	height: 40px;
	padding: 4px;
	background: var(--secondary-bg-color); /*linear-gradient(
	#B05473 10%,
	#049CE4 70%);*/
	box-shadow: 0 2px 2px #333;
	color: var(--primary-bg-color);
	z-index: 99;
}

#horaires.dark-bg-2
{
	background: #432D73;
}

#horaires > div
{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

#horaires ul, #social ul
{
	list-style: outside none;
	padding: 0;
	margin: 0;
}

#horaires ul
{
	display: flex;
	flex-direction: row;
	gap: 4px;
	align-items: center;
	height: 100%;
}


#social a
{
	display: inline-block;
	margin: 8px auto;
}

.social a
{
	text-decoration: none;
}

.theme-2 .card a
{
	color: var(--card-color);
}

.theme-2 a, .theme-1 a
{
	color: var(--primary-color);
}

.contrast, a.contrast, .theme-1 a.contrast, .theme-2 .contrast a
{
	color: var(--secondary-color);
}

.theme-2 a:hover, .theme-1 a:hover
{
	color: var(--accent-color);
}

.social a:hover, #social a:hover
{
	color: var(--accent-color);
}


.theme-2 a.elephant
{
	display: inline-block;
	padding: 16px;
	margin: 8px 0;
	background: var(--muted-bg-color);
	color: var(--primary-color);
	font-size: 1.2em;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 2px 3px 6px var(--accent-bg-color);
}

.card.gcal
{
	background: #f0f4f9;
}

.theme-2 a.elephant:hover
{
	text-decoration: underline;
	color: var(--secondary-color);
}

#horaires p
{
	margin: 0;
	line-height: 32px;
	color: var(--primary-bg-color);
}

#horaires a
{
	display: inline-block;
	color: var(--primary-bg-color);
	margin-left: 8px;
	padding-left: 8px;
	text-transform: uppercase;
}

#horaires .social a
{
	padding-left: 0;
}

#horaires a:hover, .theme-2 footer a:hover, .theme-2 .socials a:hover
{
	color: var(--accent-color);
}

#social
{
	position: fixed;
	top: 0;
	bottom: 0;
	right: -250px;
	width: 50px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	z-index: 50;
	transition: right 1s ease 0s;
}

#social.scrolling
{
	right: 0px;
	transition: right 1s ease 0s;
}

#social nav
{
	background: #666;
	padding: 8px;
	flex: 0 0 auto;
	border: 1px solid #111;
	border-right: 0;
	border-radius: 4px 0 0 4px;
}

#top
{
	position: relative;
}

#top audio, #top video
{
	width: 450px;
}

#diaporama
{
	/* background: url('../../public/images/css/hd2.webp') top left no-repeat; */
	background-size: cover;
	position: relative;
	display: flex;
}

#title
{
	display: flex;
	flex-direction: column;
	width: 25%;
	position: absolute;
	top: 0;
	right: 120px;
	align-items: center;
	justify-content: center;
}
	
#title nav
{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
}

#title nav a
{
	flex-basis: 225px;
}

#filters
{
	max-width: 1080px;
	width: 70vw;
	margin: auto;
}

a.button, button
{
	border: 2px solid var(--primary-bg-color);
	border-radius: 4px;
	padding: 4px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	line-height: 30px;
}

a.button:hover, button:hover
{
	cursor: pointer;
	color: var(--accent-color);
	text-decoration: underline;
}

a.button.contrast, button
{
	border: 2px solid var(--primary-bg-color);
	
}

button.bg-1
{
	color: var(--secondary-color);
}

button
{
	line-height: inherit;
	/*color: var(--secondary-color);*/
	font-variant: small-caps;
	/*background: var(--secondary-bg-color);*/
}

button:hover
{
	cursor: pointer;
}

button[disabled], input[disabled]
{
	cursor: default;
	background: #333;
	color: #666;
	border-color: #666;
}

form input, form textarea
{
	font-family: Tahomas, Helvetica, sans-serif;
	font-size: 1em;
	border: solid 2px #011034;
	border-radius: 4px;
	padding: 4px 8px;
	margin: 4px;
	display: inline-block;
}

.g-recaptcha
{
	margin: 4px 0;
}

form input.error, form textarea.error, .g-recaptcha.error > div
{
	border-color: red;
	border-style: dotted;
}

h1
{
	font-size: 60px;
	text-align: center;
	line-height: 0.75;
	text-shadow: 4px 6px 6px #011034;
	text-transform: uppercase;
	color: #f3f3f3;
	
	text-transform: uppercase;
}

h1 .sub
{
	font-size: 45px;
}

h2, h3
{
	text-align: center;
	padding: 10px 0;
	font-size: 34px;
	margin: 0;
	margin-bottom: 10px;
	text-transform: uppercase;
}

h3
{
	font-size: 28px;
	text-align: left;
}

/*
.in-grid h1, .in-grid h2, .in-grid h3
{
	color: #011034;
}
*/

.bg-1.contrast, .bg-1 h3.contrast
{
	color: #f3f3f3;
}

.line
{
	display: inline-block;
	width: 150px;
	border-top: 2px solid #000;
	height: 10px;
}

.line.contrast
{
	border-color: #f3f3f3;
}

h1.contrast
{
	font-size: 45px;
	margin-top: 0;
	line-height: 1;
	padding: 20px 0;
}

.bg-1 .line.contrast
{
	border-color: #333;
}

.line.color-1
{
	border-color: #FD93B7;
}

.line.color-2
{
	border-color: #6040a5;
}

#bio aside img
{
	margin: 0 10px 10px 0;
	border: solid 2px #f3f3f3;
	border-radius: 4px;
	line-height: 0;
}

.network-card img
{	
	border-radius: 4px;
}



#bio .flex
{
	gap: 2em;
}

.tech
{
	font-size: 1.33em;
}

.tech em
{
	font-size: 0.66em;
}

.sideline:first-child
{
	border-left: 1px solid var(--primary-color);
}	

.langs
{
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	text-align: center;
}

.langs > span
{
	width: 40px;
	display: none;
	padding: 8px;
	background: var(--accent-color);
}

.langs > span:first-child
{
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.langs > span:last-child
{
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
	

.langs:hover > span
{
	display: block;
	position: relative;
	top: -8px;
}

#horaires .langs a
{
	margin: 0;
	padding: 0;
}

.langs > span:hover
{
	background: var(--primary-bg-color);
}

.invert, a.button.invert
{
	border-color: var(--secondary-bg-color);
	background: var(--primary-bg-color);
}

a.invert:hover
{
	background: var(--accent-color);
	color: var(--primary-bg-color);
}

#studiopics
{
	display: flex;
	flex-flow: column wrap;
	height: var(--youtube-height);
	justify-content: space-between;
	align-content: center;
}

#studiopics img
{
	max-width: var(--youtube-width);
	margin: 0 5px;
}

#studiopics .wide
{
	max-width: var(--tall-width);
	flex-grow: 2;
}

#studiopics > div
{
	width: var(--youtube-width);
	max-height: 300px;
	flex-grow: 1;
	margin: 0 5px;
	padding: 10px;
}

#studiopics img
{
	overflow: hidden;
	border-radius: 16px;
}

.topic
{
	border: 2px solid #f3f3f3;
	border-radius: 4px;
}

.topic.item-theme-2
{
	background: #111;
	border-radius: 16px;
}

.topic > div
{
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	height: 100%;
}

#studiopics p
{
	text-align: justify;
}

#studio #montage
{
	/*width: 465px;*/
	padding: 0;
}

#studio #montage .player
{
	height: 261px;
}
	

/* PLAYLIST */
.playlist
{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
}

.media
{
	border: 2px solid #f3f3f3;
	aspect-ratio: 400/227;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: black;
}

.media:hover
{
	cursor: pointer;
}

.media.active
{
	border-color: #FD93B7;
}

.media .player
{
	overflow: hidden;
	position: absolute;
	height: 100%;
	width: 100%;
}
}

.media.audio .player
{
	display: flex;
	flex-flow: column nowrap;
	opacity: 0.5;
}

.media.audio .player, .media.video .player .icon
{
	opacity: 0.75;
}

.media.audio audio
{
	width: 100%;
}

.media.audio canvas
{
	height: calc(100% - 40px);
	width: 100%;
}

.media video, .media iframe, .media video:hover
{
	width: 100%;
	height: 100%;
}

.media p
{
	padding: 10px 5px;
	background: var(--primary-bg-color);
	margin: 0;
	box-shadow: 0 2px 2px #666;
	z-index: 100;
	position: absolute;
	top: -80px;
	width: 100%;
}

.media .cover
{
	position: absolute;
	top: 0;
	z-index: 0;
}

.dlfile
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
}

.dlfile a
{
	background: rgba(0,0,0,0.6);
}

/* REF */
#references
{
	margin-top: 60px;
}

#reflist
{
	position: relative;
}

#reflist > div
{
	position: relative;
	width: 100%;
}

#reflist ul
{
	display: flex;
	list-style: outside none;
	flex-flow: row nowrap;
	width: 100%;
	padding: 10px 0;
	align-items: center;
}

#reflist li
{
	margin: 10px;
}

#reflist img
{
	min-width: 150px;
	max-width: 150px;
}

.grid
{
	display: grid;
	gap: 10px;
	justify-content: center;
	/*align-items: center;*/
}

.grid-2
{
	grid-template-columns: repeat(2, 1fr);
}

.grid-3
{
	grid-template-columns: repeat(3, 1fr);
}

.grid-8
{
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
}

.card
{
	background: var(--card-bg-color);
	color: var(--card-color);
	border: 2px solid var(--card-border-color);
	border-radius: 32px;
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.card .title
{
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 8px;
}

.card .content
{
	text-align: justify;
	padding: 4px 0;
}

.card .pres
{
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex-grow: 1;
}

.card .pres > div:first-child
{
	flex: 1;
}

.card .pres img
{
	object-fit: contain;
	width: 100%;
}

.card .pres > div
{
	display: flex;
	flex-direction: column;
	flex: 2;
}

.card .pres > div:first-child, .card .pres aside
{
	justify-content: center;
}

#avis
{
	padding: 8px;
}

#avis .arrow {
    font-size: 3em;
    display: flex;
    align-items: center;
    text-shadow: 0 0 0 rgba(0,0,0,0);
    transition: color 0.3s ease;
}

#avis .arrow:hover {
    color: var(--accent-color);
}

#avis > .flex
{
	flex-direction: row;
}

#avis .rel
{
	overflow: hidden;
}

#avis .track {
    display: flex;
    transition: transform 0.4s ease;
	width: 100%;
}

#avis .group > .grid
{
	transition: transform 0.4s ease;
}

#avis .group {
    width: 100%;
	flex: 0 0 100%;
	align-content: center;
}


/* CONTACT */
#contact form
{
	width: 80%;
	margin: auto;
	padding: 10px 0;
	text-align: center;
	
}

.feed
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	max-width: 350px;
	margin: auto;
}

/* FOOTER */
.theme-2 > footer, .theme-1 > footer
{
	background: var(--secondary-bg-color);
}

.theme-1 footer
{
	background: #021035;
}

#contact .item-theme-1
{
	background: #111;
}

footer
{
	padding-top: 20px;
	padding-bottom: 100px;
}

footer > div
{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	
}

footer > div > *:last-child
{
	align-items: flex-end;
}

footer > div > *
{
	flex: 1;
}

footer ul
{
	list-style: outside none;
	padding-left: 8px;
	margin: 0;
}

footer .cgv ul
{
	display: flex;
	justify-content: center;
}

footer .cgv a
{
	text-decoration: none;
}

footer .bio
{
	flex: 4;
	border-left: 1px solid var(--secondary-color);
	border-right: 1px solid var(--secondary-color);
	padding: 0 20px;
}

footer .bio em
{
	font-size: 0.7em;
}

footer li
{
	padding: 4px 0;
}

footer h2
{
	text-align: left;
	font-size: 24px;
}


/* COOKIES */
#cookieprivacy
{
	position: fixed;
	bottom: 0;
	padding: 0 10px;
	background: orange;
	border: 2px solid black;
	width: 100%;
	font-size: 12px;
	z-index: 100;
	color: #333;
}

#cookieprivacy a
{
	color: #666;
}