@charset "UTF-8";

@font-face {
	font-family:'Impact';
	src:local("Impact"),
		url('/assets/fonts/Impact.woff2') format('woff2'),
		url('/assets/fonts/Impact.woff') format('woff');
}

/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/

html,body,p,ol,ul,li,blockquote,figure,legend,textarea,hr,h1,h2,h3{margin:0;padding:0}button,input,textarea{margin:0}*,*:before,*:after{box-sizing:border-box}img,video,svg,iframe{display:block;height:auto;max-width:100%;border:0}

/*--------------------------------------------------------------
Vars
--------------------------------------------------------------*/

:root{
	--leading:1.75rem;

	--white:#fff;
	--primary:#ea564d;
	--secondary:#747385;
	--black:#0d0d0d;

	--youssef:#dbc174;
	--raphael:#6f5555;
	--leila:#daaabb;
	--shaina:#5c6795;
	--leo:#ee9850;

	--width:100%;

	--font_default:system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	--font_heading:Impact, Charcoal, Helvetica Inserat, "Bitstream Vera Sans Bold", "Arial Black", sans serif;
}

/*--------------------------------------------------------------
Helpers
--------------------------------------------------------------*/

html{
	scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
	html{
		 scroll-behavior:auto;
	}
	*,*::before,*::after{
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

html{
	font-size:125%;
	background:var(--color_white);
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	scroll-padding-top:calc(3rem + 73px);
}
body{
	min-height:100vh;
	text-rendering:optimizeSpeed;
	background:var(--white);
	color:var(--black);
	font-family:var(--font_default);
	font-size:1rem;
	line-height:1.75;
	overflow-x:hidden;
	margin:0 auto;
}
a{
	color:inherit;
	text-decoration:none;
}
a:focus,a:hover,a:active{
	text-decoration:underline;
}
h1{
	font-size:2.5rem;
	line-height:3.25rem;
	margin-top:1.75rem;
	margin-bottom:1.625rem;
}
h2{
	font-size:1.6875rem;
	line-height:2.4375rem;
	margin-top:1.75rem;
	margin-bottom:1.75rem;
}
h3{
	font-size:1.375rem;
	line-height:1.625rem;
	margin-top:1.75rem;
	margin-bottom:0;
}
h1,h2,h3{
	font-family:var(--font_heading);
	font-weight: 400;
	text-transform: uppercase;
}
h1,h2{
	border-bottom:10px solid currentColor;
	width:fit-content;
	margin-left:auto;
	margin-right:auto;
}
p,address,ol,ul,blockquote{
	margin-top:0;
	margin-bottom:var(--leading);
}
ul,ol{
	padding:0;
	list-style:none;
}
.lead{
	font-family:var(--font_heading);
	font-size:1.5rem;
	line-height:1.2;
}
/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

::placeholder{color:var(--black);}
.dark::placeholder{color:var(--white);}
label{
	display:block;
	cursor:pointer;
	font-weight:700;
}
[type=text],textarea,button,.btn{
	white-space:nowrap;
	font-family:inherit;
	font-size:inherit;
	vertical-align:middle;
	margin:0 0 var(--leading);
	transition:.2s;
	transition-property:background-color,color,border;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	width:100%;
	padding:1rem;
	border:10px solid var(--black);
}
textarea{
	min-height:9em;
	vertical-align:top;
	resize:vertical;
	white-space:normal
}
[type=text]:focus,textarea:focus{
	border:10px solid var(--primary);
	outline:none;
}
[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	margin: 0;
	color:currentColor;
	width:1rem;
	height:1rem;
	border:5px solid var(--black);
	position:relative;
	top:3px;
}
[type="radio"]:checked{background: var(--primary);}
.btn,button{
	background:var(--primary);
	border:10px solid var(--primary);
	display:block;
	width:fit-content;
	margin-left:auto;
	margin-right:auto;
	text-decoration:none;
	color:var(--white);
	text-transform:uppercase;
	font-family: var(--font_heading);
	font-size:1.5rem;
	line-height: 1.2;
	cursor:pointer;
}
.btn:hover,.btn:focus,button:hover,button:focus{
	background: transparent;
	color:var(--primary);
	text-decoration: none;
}

/*--------------------------------------------------------------
Images / videos
--------------------------------------------------------------*/

.video{
	position:relative;
	background: var(--black);
	padding-bottom:56.25%;
	overflow: hidden;
	height:0;
	margin-bottom:var(--leading);
}
.video iframe{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*--------------------------------------------------------------
Utilities
--------------------------------------------------------------*/

/*:focus:not(:focus-visible){outline:0;}
:focus-visible{outline-offset:5px;}
@media (prefers-reduced-motion:no-preference){
	:focus-visible{transition:outline-offset .25s ease;}
}*/
::selection{
	background:var(--primary);
	color:var(--white);
}
.screen-reader-text,.email{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
}
.screen-reader-text:focus{
	background-color:var(--white);
	clip:auto !important;
	display:block;
	width:auto;
	height:auto;
	top:0;
	left:0;
	padding:.5em 1em;
	text-decoration:none;
	z-index:999;
}
.text-center{text-align: center;}
.wrapper{
	max-width:var(--width);
	padding-left:var(--leading);
	padding-right:var(--leading);
	margin-left:auto;
	margin-right:auto;
}
.hidden-mobile{display:none;}
blockquote{
	margin:0;
	padding:0;
}
blockquote p{
	font-family:var(--font_heading);
	text-transform: uppercase;
	text-align: center;
	font-size:3rem;
	line-height: 1;
	padding:0;
	margin:0;
}
blockquote + *{
	margin-top:-.8rem;
}

/*--------------------------------------------------------------
Buttons grids
--------------------------------------------------------------*/

.btn-grid{text-align: center;}
.btn-grid > *{
	width:100%;
	max-width: 33.33%;
}

/*--------------------------------------------------------------
Sections
--------------------------------------------------------------*/

section, footer{padding:var(--leading) 0}
.dark{
	background: var(--black);
	color:var(--white);
	fill:var(--white);
}

/*--------------------------------------------------------------
Main Header
--------------------------------------------------------------*/

.main-header{
	background: var(--white);
	position: fixed;
	width:100%;
	z-index:99;
}
.main-header:after{
	content:'';
	display: block;
	width:100%;
	height:5px;
	background:linear-gradient(to right, rgba(0,0,0,0), var(--black) 50%, rgba(0,0,0,0) 100%);
}
.main-header .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo{
	border:none;
	margin:1.5rem 0;
}
.logo svg{
	height:73px;
}
.menu-toggle{
	position: relative;
	z-index: 999;
	margin:0;
	padding:24px;
	background:none;
	box-shadow: none;
	border:none;
}
.menu-toggle svg{
	fill:var(--black);
	width:36px;
}
.menu-toggle path{transition:opacity .2s, transform .2s;}
.menu-toggle[aria-expanded=true] path:nth-child(1) {
	transform: rotate(-45deg) translateX(-11px) translateY(-5px);
}
.menu-toggle[aria-expanded=true] path:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded=true] path:nth-child(3) {
	transform: rotate(45deg) translateX(4px) translateY(-6px);
}

/*--------------------------------------------------------------
Main menu
--------------------------------------------------------------*/

.menu-container{
	background: var(--white);
	padding:var(--leading) 0;
	position:fixed;
	top:calc(3rem + 78px);
	left:0;
	bottom:0;
	right:0;
	overflow-y: auto;
	z-index:998;
	opacity:0;
	transform:scale(.5);
	transform-origin:100% 0;
	visibility:hidden;
	transition:opacity .2s,transform .2s;
	text-align:center;
}
.menu-container.active{
	opacity:1;
	visibility:visible;
	transform:scale(1);
}
.menu-container ul{margin:0;}
.main-menu a{
	color:var(--black);
	font-family:var(--font_heading);
	display:block;
	text-decoration:none;
	font-size:1.6875rem;
	text-transform:uppercase;
	padding:.5rem;
	position:relative;
	background:none;
}

/*--------------------------------------------------------------
Social menu
--------------------------------------------------------------*/

.social{
	padding:.5rem;
	display:flex;
	gap:1rem;
	justify-content: center;
}
.social a{
	width:1.5rem;
}

/*--------------------------------------------------------------
Main
--------------------------------------------------------------*/

main{padding-top:calc(3rem + 73px);}

/*--------------------------------------------------------------
Main Footer
--------------------------------------------------------------*/

.main-footer{
	padding-top:140px;
	padding-bottom:120px;
	background:var(--black) url("../img/texture.png") 50% 150% no-repeat;
	background-size: 200%;
	color:var(--white);
	fill:var(--white);
}
.footer-logo svg{
	height:86px;
	fill:var(--white);
	margin:0 auto var(--leading);
}
.footer-contact address{
	text-align: center;
	font-style: normal;
	text-shadow: 0 1px 5px var(--black), 1px 1px 5px var(--black), 1px 0 5px var(--black), 0 0 5px var(--black);
}
.footer-contact a{display:block;}
.main-footer .social a{
	filter: drop-shadow(0 1px 5px rgba(13,13,13,.5)) drop-shadow(1px 1px 5px rgba(13,13,13,.5)) drop-shadow(1px 0 5px rgba(13,13,13,.5)) drop-shadow(0 0 5px rgba(13,13,13,.5));
}

/*--------------------------------------------------------------
Intro
--------------------------------------------------------------*/

.intro{
	padding-top:120px;
	background: var(--black) url("../img/persos-header.jpg") 50% 0 no-repeat;
	background-size:cover;
	position:relative;
}
.intro:before{
	content:"";
	display:block;
	position:absolute;
	height:15rem;
	left:0;
	right:0;
	bottom:0;
	background: linear-gradient(rgba(0,0,0,0), var(--black));
}
.intro blockquote{
	color:#fff;
	margin-top:220px;
	position: relative;
}

/*--------------------------------------------------------------
Jeu
--------------------------------------------------------------*/

.jeu{
	padding-bottom:120px;
	background:var(--black) url("../img/texture.png") 50% bottom no-repeat;
	background-size: 100%;
}

/*--------------------------------------------------------------
Characters
--------------------------------------------------------------*/

.characters ul{
	display:flex;
	position: relative;
}
.character{
	margin-left:-10%;
	position:relative;
}
.character button{
	border:none;
	background:transparent;
	padding:0;
	width:100%;
}
.character button img{
	filter:blur(5px);
	transition: filter .25s;
}
.character button:hover img, .character button:focus img, .character button:active img{filter:blur(0);}
.leila{
	width:21%;
	margin-top:2%;
	margin-left:0;
}
.raphael{
	width:27%;
	margin-top:5%;
	z-index:2;
}
.youssef{
	width:29%;
	margin-left:-5%;
	z-index: 3;
}
.shaina{
	width:29%;
	margin-top:10%;
	margin-left:-15%;
	z-index:2;
}
.leo{
	width:34%;
	margin-top:3%;
	color:var(--leo);
}
.characters-features{text-align: center;}
.feature{display:none;}
.feature-leila{color:var(--leila);}
.feature-raphael{color:var(--raphael);}
.feature-youssef{color:var(--youssef);}
.feature-shaina{color:var(--shaina);}
.feature-leo{color:var(--leo);}
.feature h3{font-size: 2rem;}
.feature .lead{
	text-transform: uppercase;
	font-size:1.5rem;
	margin:0;
}

/*--------------------------------------------------------------
Episodes
--------------------------------------------------------------*/

.episode + .episode{margin-top:calc(2 * var(--leading))}
.episode-link{
	position:relative;
	overflow:hidden;
	align-self: baseline;
}
.episode-link::after{
	display:block;
	position:absolute;
	width:30%;
	height:30%;
	content:"";
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0a50 50 0 1 0 50 50A50 50 0 0 0 50 0Zm27 53L37 75a4 4 0 0 1-5-4V29a4 4 0 0 1 5-4l40 22a4 4 0 0 1 0 6Z' fill='%230d0d0d'/%3E%3C/svg%3E");
	background-size:100% 100%;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	opacity:0;
	transition: opacity .25s;
}
.episode-link:hover::after,.episode-link:focus::after{
	opacity:1;
}
.episode-link img{border:5px solid var(--black)}
.episode h3 small{
	font-size:inherit;
	display:block;
	color:var(--secondary);
}

/*--------------------------------------------------------------
Scenario
--------------------------------------------------------------*/

.scenario svg{
	max-width:50%;
	margin-left:auto;
	margin-right:auto;
}

/*--------------------------------------------------------------
Shop
--------------------------------------------------------------*/

.products li{
	text-align: center;
	padding:var(--leading) 0;
}
.products h3{
	border:none;
	margin:var(--leading) 0 0;
	text-transform: none;
}

/*--------------------------------------------------------------
Proposition form
--------------------------------------------------------------*/

.proposition-theme{
	display:grid;
	column-gap:var(--leading);
	grid-template-columns: 1fr 1fr;
}
.proposition-type{
	display:flex;
	justify-content: space-between;
	margin-bottom:var(--leading);
	padding:calc(1rem + 10px) 0;
}
.full-width{grid-column-end: span 2}
.proposition-form .submit{
	margin-right:0;
}
.form-alert{
	display:grid;
	gap:calc(2 * var(--leading));
	grid-template-columns:2fr 9fr;
	align-items: center;
	margin-bottom:calc(2 * var(--leading));
}
.alert.error{
	color:var(--primary);
	font-weight: bold;
	position:relative;
	top:calc(0px - var(--leading));
}

/*--------------------------------------------------------------
Error page
--------------------------------------------------------------*/

.error strong{
	display:block;
	font-family:var(--font_heading);
	font-size:10rem;
	line-height: 1;
}

/*--------------------------------------------------------------
Media queries
--------------------------------------------------------------*/

@media (min-width:62rem){
	:root{
		--width:1380px;
	}
	.hidden-mobile{display:block;}

	h1,h2{margin-left:0;}

	blockquote p{font-size:6.5rem;}

	/* Top intro */
	.top-intro{
		position: relative;
	}
	.top-intro .wrapper{
		min-height:100vh;
		display:flex;
		flex-direction: column;
		justify-content: center;
	}
	.top-intro .video{
		position:absolute;
		opacity:0;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index: -1;
		transition: opacity .3s;
	}
	.top-intro.active .video{
		z-index: 1;
		opacity: 1;
		height:100%;
		padding:0;
	}

	/* Header */
	.main-header{
		position: sticky;
		top:0;
	}
	.main-header:before{
		content: "";
		display: block;
		width: 100%;
		height: 240px;
		position: absolute;
		left: 0;
		bottom: 100%;
		background:transparent url("../img/texture.png") 50% top no-repeat;
		background-size: 100%;
		pointer-events: none;
	}
	.menu-container{
		visibility: visible;
		position:static;
		transform: scale(1);
		opacity: 1;
		padding:0;
	}
	.menu-container .social{display: none;}
	.main-menu{
		display:flex;
		gap:var(--leading);
		align-items:center;
	}
	.main-menu a{
		font-size:1rem;
		padding:0;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
	}
	.main-menu a:hover, .main-menu a.active{border-bottom-color:currentColor;}
	.menu-toggle{display:none;}

	/* Buttons grid */
	.btn-grid{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.btn-grid > *{width:calc((100% - 2 * var(--leading)) / 3);}

	/* Main footer */
	.main-footer{
		background:var(--black) url("../img/texture.png") 50% 140px no-repeat;
		background-size:100%;
	}
	.main-footer .wrapper{
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.footer-logo svg{height:210px;}
	.footer-contact address{text-align: right;}
	.main-footer .social{justify-content: flex-end;}

	/* Main */
	main{padding-top:0;}

	/* Jeu */
	.jeu-content{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap:var(--leading);
	}

	/* Characters */
	.characters{
		display:grid;
		grid-template-columns:65% 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas: 
			"list heading"
			"list features";
		gap:var(--leading);
	}
	.characters-heading{
		grid-area:heading;
		text-align: right;
		height: min-content;
	}
	.characters-heading h2{
		margin-right: 0;
		margin-left:auto;
	}
	.characters-list{grid-area:list;}
	.characters-features{
		grid-area:features;
		text-align: right;
		align-self: start;
	}

	/* Episodes */
	.episode{
		display:grid;
		grid-template-columns: 4fr 6fr;
		gap: var(--leading);
	}
	.episode h3{margin-top:0;}

	/* Scenario */
	.scenario .wrapper{
		display:grid;
		grid-template-columns: 1fr 1fr;
		align-items:center;
	}
	.scenario svg{
		order:1;
		margin-left:auto;
		max-width:430px;
	}
	.scenario .text-center{text-align:left;}
	.scenario .btn{margin-left:0;}

	/* Shop */
	.products{
		display:grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap:var(--leading);
	}

	/* Proposition form */
	.proposition-form{
		display:grid;
		column-gap:var(--leading);
		grid-template-columns: 4fr 9fr;
		align-items: end;
	}
	.proposition-form .submit{grid-column-start: 2}
}

.cookie-modal{position:fixed;z-index:1000;width:100%;height:100%;background-color:rgba(0,0,0,.3);left:0;top:0;pointer-events:none}.cookie-modal--hidden{display:none}.cookie-modal__content{max-width:600px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);background-color:#fff;margin:15vh auto 0;pointer-events:auto}@media (min-width:400px){.cookie-modal__content{margin:22vh auto 0;padding:40px}}.cookie-modal__title{font-size:1.4rem;font-weight:700;margin-bottom:10px}.cookie-modal__text{margin-bottom:20px;line-height:1.4}.cookie-modal__text a{text-decoration:underline}.cookie-modal__options{margin-bottom:20px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.cookie-modal__options>*{width:calc(50% - 30px)}@media (min-width:400px){.cookie-modal__options>*{width:calc(33.3333% - 30px)}}.cookie-modal__option{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;cursor:pointer;margin-right:30px;margin-bottom:10px}.cookie-modal__option.disabled{opacity:.7}.cookie-modal__checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:block;width:20px;height:20px;border-radius:0;border:2px solid #000;margin-right:6px;flex-shrink:0}.cookie-modal__checkbox:checked{background-color:#000}.cookie-modal__checkbox:checked:focus{outline:none;background-color:#81a2be}.cookie-modal__checkbox:focus{outline:none;border-color:#81a2be}.cookie-modal__check{position:absolute;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:20px;height:20px;flex-shrink:0}.cookie-modal__check svg{stroke:#fff}.cookie-modal__label{line-height:22px}.cookie-modal__buttons{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start}.cookie-modal__button{display:block;margin-right:8px;padding:6px 20px;white-space:nowrap;border:2px solid #000;text-decoration:none;color:#000}@media (min-width:400px){.cookie-modal__button{margin-right:10px;padding:10px 24px}}.cookie-modal__button.primary{background-color:#000;color:#fff}.cookie-modal__button.primary:focus,.cookie-modal__button.primary:hover{background-color:#81a2be}.cookie-modal__button:focus,.cookie-modal__button:hover{outline:none;border-color:#81a2be}.cookie-modal__button.hide{display:none}