/* RESET */
* { padding:0; margin:0; border:0; outline:0; font-size:100%; box-sizing:border-box; }


/* VARIABLES */
html {
	/* Colors */
	--mainColor: rgba(22, 78, 149, 1);			/* Bleu de Prusse */
	--secondColor1: rgba(152, 120, 216, 1);		/* Violet d'outremer */
	--secondColor2: rgba(251, 237, 71, 1);		/* Aureoline */
	--neutralColor1: rgba(79, 63, 95, 1);		/* Moonglow */
	--neutralColor2: rgba(67, 63, 78, 1);		/* Neutral tint */
		--neutralColor2-75: rgba(67, 63, 78, 0.75);
		--neutralColor2-25: rgba(67, 63, 78, 0.25);
	--neutralColor3: rgba(27, 28, 22, 1);		/* Nour de Mars */
	--white: rgba(253, 253, 252, 1);			/* Blanc Canson */

	/* Transition */
	--transition500msEase: all 0.5s ease;

	/* Width, Padding and Margin */
	--bodyMaxWidth: 1280px;
	--bodyMinWidth: 320px;
	--spacing10: 10px;
	--spacing20: 20px;
	--spacing30: 30px;
	--spacing50: 50px;

	/* Border radius  */
	--radius: 8px;
}


/* CORRECTION STYLE */
.toCorrect, .toCorrect a { background-color:yellow; color:black; }


/* BASIC STYLE */
html { scroll-behavior:smooth; }
body { background-color:var(--white); font-family:Verdana, Arial, sans-serif; font-size:18px; color:var(--black); text-align:justify; }

h1 { font-family:Georgia, "Times New Roman", serif; font-size:3.33em; /* 60px / 18px  */ font-weight:bold; color:var(--mainColor); line-height:140%; text-align:left; margin-bottom:var(--spacing30); }
h2 { font-family:Georgia, "Times New Roman", serif; font-size:1.78em; /* 32px / 18px  */ font-weight:bold; color:var(--mainColor); line-height:140%; text-align:left; }
h3 { font-family:Georgia, "Times New Roman", serif; font-size:1.33em; /* 24px / 18px  */ font-weight:bold; color:var(--mainColor); line-height:140%; text-align:left; margin:var(--spacing50) 0 var(--spacing20) 0; }
h4 { font-family:Georgia, "Times New Roman", serif; font-size:1.22em; /* 22px / 18px  */ font-weight:bold; color:var(--neutralColor2); line-height:140%; text-align:left; margin:var(--spacing30) 0 var(--spacing20) 0; }

p { margin:1em 0; line-height:140%; }

sup { vertical-align:super; font-size:smaller; }

.smallText { font-size:0.89em; /* 16px / 18px */ color:var(--neutralColor2); }
.bigText { font-size:1.22em; /* 22px / 18px */ }

.subtitle { font-family:Georgia, "Times New Roman", serif; font-size:1.44em; /* 26px / 18px  */ margin:0; margin-bottom:1.11em; /* 20px / 18px */ }

.left { text-align:left; }
.right { text-align:right; }

a, a:active, a:visited { color:var(--mainColor); text-decoration:underline; padding:0 3px; -webkit-border-radius:calc(var(--radius) / 2); -moz-border-radius:calc(var(--radius) / 2); border-radius:calc(var(--radius) / 2); -webkit-transition:var(--transition500msEase); -moz-transition:var(--transition500msEase); transition:var(--transition500msEase); }
a:hover, a:focus { color:var(--white); text-decoration:none; background-color:var(--mainColor); }

	.header a, .header a:active, .header a:visited { text-decoration:none; padding:0; }
	.header a:hover, .header a:focus { text-decoration:none; background-color:transparent; }

.button { cursor:pointer; }

img { image-rendering:smooth; }

.insideTextlist ul, .insideTextlist ol { margin:1em 0; padding-left:2em; line-height:140%; }

header { padding-top:var(--spacing10); padding-bottom:var(--spacing10); }
section { padding-top:var(--spacing50); padding-bottom:var(--spacing50); }
footer { padding-top:var(--spacing20); padding-bottom:var(--spacing20); }

.mainWrapper { width:100%; max-width:var(--bodyMaxWidth); margin:0 auto; padding-left:var(--spacing20); padding-right:var(--spacing20); }
.contentWrapper { padding-left:calc(var(--spacing20) * 2); padding-right:calc(var(--spacing20) * 2); }

.bgMainColor { background-color:var(--mainColor); color:var(--white); }
	.bgMainColor a, .bgMainColor a:active, .bgMainColor a:visited { color:var(--white); }
	.bgMainColor a:hover, .bgMainColor a:focus { color:var(--mainColor); background-color:var(--white); }
	.bgMainColor h1, .bgMainColor h2, .bgMainColor h3 { color:var(--white); }

.bgImgMainColor { background-image:url("../images/bg_paintBlue.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; }

.bgSecondColor1 { background-color:var(--secondColor1); color:var(--white); }
	.bgSecondColor1 a, .bgSecondColor1 a:active, .bgSecondColor1 a:visited { color:var(--white); }
	.bgSecondColor1 a:hover, .bgSecondColor a:focus { color:var(--secondColor1); background-color:var(--white); }
	.bgSecondColor1 h1, .bgSecondColor1 h2, .bgSecondColor1 h3 { color:var(--white); }

.bgImgSecondColor1 { background-image:url("../images/bg_paintPurple.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; }

.bgNeutralColor2 { background-color:var(--neutralColor2); color:var(--white); }
	.bgNeutralColor2 a, .bgNeutralColor2 a:active, .bgNeutralColor2 a:visited { color:var(--white); }
	.bgNeutralColor2 a:hover, .bgNeutralColor2 a:focus { color:var(--neutralColor2); background-color:var(--white); }
	.bgNeutralColor2 h1, .bgNeutralColor2 h2, .bgNeutralColor2 h3 { color:var(--white); }

.bgWhite { background-color:var(--white); color:var(--neutralColor2); }
	.bgWhite a, .bgWhite a:active, .bgWhite a:visited { color:var(--neutralColor2); }
	.bgWhite a:hover, .bgWhite a:focus { color:var(--white); background-color:var(--neutralColor2); }


.desktop, .show { display:block; }
.mobile, .hide { display:none; }

.fadeIn { visibility:visible; opacity:1; }
.fadeOut { visibility:hidden; opacity:0; }

.draggedElement { cursor:grabbing; user-select:none; }

/* Grid  */
.gridWrapper { display:grid; }
	.gridWrapper.cols1-1 { grid-template-columns:50% 50%; }		
	.gridWrapper.cols1-2 { grid-template-columns:25% 75%; }
	.gridWrapper.cols2-1 { grid-template-columns:75% 25%; }
		.gridWrapper.cols1-1 > div:nth-child(1), .gridWrapper.cols1-2 > div:nth-child(1), .gridWrapper.cols2-1 > div:nth-child(1) { margin-right:var(--spacing10); }
		.gridWrapper.cols1-1 > div:nth-child(2), .gridWrapper.cols1-2 > div:nth-child(2), .gridWrapper.cols2-1 > div:nth-child(2) { margin-left:var(--spacing10); }

/* Flexbox */
.flexWrapper { display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; }
	.flexWrapper.cols1-1 > div { flex-grow:1; flex-basis:48%; }
	.flexWrapper.cols1-1 > div:nth-child(1) { margin-right:var(--spacing10); }
	.flexWrapper.cols1-1 > div:nth-child(2) { margin-left:var(--spacing10); }

	.flexWrapper.cols1-2 > div:nth-child(1) { flex-grow:1; flex-basis:23%; margin-right:var(--spacing10); }
	.flexWrapper.cols1-2 > div:nth-child(2) { flex-grow:2; flex-basis:73%; margin-left:var(--spacing10); }

	.flexWrapper.cols2-1 > div:nth-child(1) { flex-grow:2; flex-basis:63%; margin-right:var(--spacing10); }
	.flexWrapper.cols2-1 > div:nth-child(2) { flex-grow:1; flex-basis:33%; margin-left:var(--spacing10); }

/* Social media list */
.sMediaList { list-style-type:none; }
	.sMediaList li { display:inline; margin-right:calc(var(--spacing20) - 6px); }
	.sMediaList li:last-child { margin-right:0; }
	.sMediaList li a, .sMediaList li a:hover, .sMediaList li a:visited { padding:0; background-color:transparent; }


/* HEADER */
.header { position:sticky; left:0; top:0; width:100%; z-index:100; box-shadow:0 4px 4px -4px var(--neutralColor2-25); }
.header .flexWrapper.cols1-1 > div { flex-basis:auto; }

.header .logo img { width:auto; max-width:100%; }
.header .logo a, .header .logo a:hover, .header .logo a:visited { background-color:transparent; }

.header .menuWrapper { text-align:right; }
.header .menuContent { display:inline-block; vertical-align:top; }

.header .switchLang { display:inline-block; list-style-type:none; margin-right:30px; text-align:right; }
	.header .switchLang li { display:inline-block; width:40px; line-height:40px; text-align:center; font-size:0.89em; /* 16px / 18px */ font-weight:bold; margin-right:3px; -webkit-border-radius:var(--radius); -moz-border-radius:var(--radius); border-radius:var(--radius); }
	.header .switchLang li:last-child { margin-right:0; }
	.header .switchLang li a, .header .switchLang li a:active, .header .switchLang li a:visited { text-decoration:none; display:block; }
	.header .switchLang li a:hover, .header .switchLang li a:focus { background-color:var(--neutralColor2); color:var(--white); }
	.header .switchLang li.isActive { color:var(--neutralColor2); border:3px solid var(--neutralColor2); box-sizing:border-box; line-height:34px; }
/* Colored bg header */
	.header.bgMainColor .switchLang li a:hover, .header.bgMainColor .switchLang li a:focus { background-color:var(--white); color:var(--neutralColor2); }
	.header.bgMainColor .switchLang li.isActive { color:var(--white); border-color:var(--white); }

.header .menuNav { display:inline-block; list-style-type:none; text-align:right; }
	.header .menuNav li { display:inline-block; margin-left:var(--spacing20); line-height:40px; text-align:center; font-size:0.89em; /* 16px / 18px */ font-weight:bold; color:var(--neutralColor2); -webkit-border-radius:var(--radius); -moz-border-radius:var(--radius); border-radius:var(--radius); }
	.header .menuNav li a, .header .menuNav li a:active, .header .menuNav li a:visited { padding:0 var(--spacing10); display:block; text-decoration:none; }
	.header .menuNav li a:hover, .header .menuNav li a:focus { color:var(--white); background-color:var(--neutralColor2); }
/* Colored bg header */
	.header.bgMainColor .menuNav li { color:var(--white); }
	.header.bgMainColor .menuNav li a:hover, .header.bgMainColor .menuNav li a:focus { color:var(--neutralColor2); background-color:var(--white); }

.header .menuBtn { display:inline-block; text-align:right; margin-left:var(--spacing20); }


/* MENU */
#mainMenuNav { width:100%; height:100vh; z-index:500; position:fixed; top:0; left:0; padding-top:var(--spacing10); padding-bottom:var(--spacing20); overflow:auto; -webkit-transition:var(--transition500msEase); -moz-transition:var(--transition500msEase); transition:var(--transition500msEase); }

#mainMenuNav .closeBtn { position:sticky; top:0; width:50px; margin:auto 0 auto auto; text-align:right; margin-bottom:var(--spacing20); }
	#mainMenuNav .closeBtn a { padding:0; background-color:transparent; }

#mainMenuNav nav { font-size:1.22em; /* 22px */ font-weight:bold; text-align:center; }
	#mainMenuNav nav ul { list-style-type:none; }
	#mainMenuNav nav ul li { margin-bottom:var(--spacing30); }
	#mainMenuNav nav ul li a { text-decoration:none; }

#mainMenuNav .sMediaList { text-align:center; margin-top:var(--spacing50); }


/* MENU TABLE OF CONTENTS */
.tableContents { margin-top:calc(var(--spacing50) * 1.5); position:sticky; top:calc(var(--spacing50) * 2); }
	.tableContents ul { list-style-type:none; }
		.tableContents ul li { margin:var(--spacing10) 0; }
		.tableContents a, .tableContents a:active, .tableContents a:visited { color:var(--neutralColor2); text-decoration:none; display:block; padding:calc(var(--spacing10) / 2) var(--spacing10); }
			.tableContents a:hover, .tableContents a:focus, .tableContents a.isActive:hover, .tableContents a.isActive:focus { background-color:var(--secondColor1); color:var(--mainColor); }
		.tableContents a.isActive, .tableContents a.isActive:active, .tableContents a.isActive:visited { color:var(--secondColor1); border:3px solid var(--secondColor1); box-sizing:border-box; font-weight:bold; }

.tableContents .linkList {}
	.tableContents .linkList li {}

.tableContents .sublinkList { margin-left:var(--spacing20); }
	.tableContents .sublinkList li {}
	.tableContents .sublinkList a { display:inline-block; width:90%; }


/* HOME PAGE */
.home {}
.home .contentWrapper { }
.home p { line-height:120%; }
.home .sMediaList { margin-top:var(--spacing30); }
.home div:nth-child(2) img { max-width:100%; }


/* PORTFOLIO PAGE */
.portfolio { padding-top:var(--spacing30); }

.slideshowWrapper { position:relative; }
	.slideshow { overflow:hidden; scroll-behavior:smooth; scroll-snap-type:x mandatory; cursor:grab; }
		.slideshow .artworkWrapper { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; height:85vh; max-height:800px; }
			.slideshow .artwork { position:relative; margin:0 calc(var(--spacing50) * 2); scroll-snap-align:center; opacity:0.5; -webkit-transition:var(--transition500msEase); -moz-transition:var(--transition500msEase); transition:var(--transition500msEase); }
			.slideshow .artwork:first-child { margin-left:30%; }
			.slideshow .artwork:last-child { margin-right:0; padding-right:30%; }
			.slideshow .artwork.isActive { opacity:1; }		
				.slideshow .artwork img { display:block; width:auto; height:auto; max-height:85vh; }
				.slideshow .artwork .description { background-color:var(--neutralColor2-75); display:none; font-size:0.89em; /* 16px */ color:var(--white); text-align:center; position:absolute; top:0; left:0; padding:10px; width:100%; height:100%; align-content:center; -webkit-transition:var(--transition500msEase); -moz-transition:var(--transition500msEase); transition:var(--transition500msEase); }
					.slideshow .artwork .title { font-weight:bold; font-size:1.15em; }
				.slideshow .artwork.isActive:hover .description, .slideshow .artwork.isActive:focus .description { display:block; }
	.slideshow.draggedElement { cursor:grabbing; user-select:none; }
		.slideshow.draggedElement .artwork.isActive .description { display:none; }
	.slideshowControls { z-index:5; }
		.slideshowControls img { display:block; }
		.slideshowControls .button {}
		.slideshowControls .prevBtn, .slideshowControls .nextBtn { position:absolute; top:45%; opacity:0.65; webkit-border-radius:var(--radius); -moz-border-radius:var(--radius); border-radius:var(--radius); box-shadow:0 4px 8px rgba(0, 0, 0, 0.25); -webkit-transition:var(--transition500msEase); -moz-transition:var(--transition500msEase); transition:var(--transition500msEase); }	
		.slideshowControls .prevBtn { left:-25px; }			
		.slideshowControls .nextBtn { right:-25px; }
			.slideshowControls .prevBtn:hover, .slideshowControls .prevBtn:focus, .slideshowControls .nextBtn:hover, .slideshowControls .nextBtn:focus { opacity:1; }


/* COMICS PAGE  */
.comics {}
.comics .tilesWrapper { display:flex; flex-wrap:wrap; justify-content:center; }
.comics .tiles { overflow:hidden; width:250px; height:350px; position:relative; margin:var(--spacing20); -webkit-border-radius:calc(var(--radius) * 3); -moz-border-radius:calc(var(--radius) * 3); border-radius:calc(var(--radius) * 3); -webkit-transition:var(--transition500msEase); -moz-transition:var(--transition500msEase); transition:var(--transition500msEase); }
	.comics .tiles img { width:100%; height:100%; object-fit:cover; position:absolute; display:block; }
	.comics .tiles .description { display:none; padding:var(--spacing20); background-color:var(--neutralColor2-75); position:absolute; top:0; left:0; height:100%; font-size:0.89em; /* 16px */ text-align:left; color:var(--white); -webkit-transition:var(--transition500msEase); -moz-transition:var(--transition500msEase); transition:var(--transition500msEase); }
		.comics .tiles .description .title { font-weight:bold; margin:0; margin-bottom:1em; }
		.comics .tiles .description .summary { max-height:70%; overflow:hidden; -webkit-mask-image:linear-gradient(black 87%, transparent); mask-image:linear-gradient(black 87%, transparent); }
			.comics .tiles .description .summary p:first-child { margin-top:0; }
		.comics .tiles .description a.button, .comics .tiles .description a.button:active, .comics .tiles .description a.button:visited { background-color:var(--white); color:var(--neutralColor2); text-align:center; font-weight:bold; text-decoration:none; display:block; width:100%; padding:var(--spacing10) 0; }
			.comics .tiles .description a.button:hover, .comics .tiles .description a.button:focus { background-color:var(--secondColor1); color:var(--white); }
	.comics .tiles:hover .description, .comics .tiles:focus .description { display:block; }

.singleComic {}
	.singleComic .comicPage { margin:var(--spacing20); }
		.singleComic .comicPage img { margin:0 auto; display:block; max-width:100%; width:auto; height:auto; max-height:85vh; }


/* ABOUT PAGE */
#about {}
#about .photo { max-width:200px; min-height:250px; overflow:hidden; background-color:var(--neutalColor2); -webkit-border-radius:calc(var(--radius) * 3); -moz-border-radius:calc(var(--radius) * 3); border-radius:calc(var(--radius) * 3); }
	#about .photo img { width:100%; height:100%; object-fit:cover }
#about .description {}


/* CONTACT PAGE */
#contact {}
#contact .flexWrapper { align-items:center; }
#contact .contactInfoWrapper.flexWrapper.cols1-1 > div { flex-basis:auto; }
#contact .contactEmail {}
	#contact .contactEmail ul { list-style-type:none; font-size:0; }
		#contact .contactEmail ul li { display:inline-block; vertical-align:middle; font-size:18px; }
		#contact .contactEmail ul li img { display:block; margin:0 var(--spacing10); }
#contact .contactOther { text-align:right; }
#contact p { margin:0; }


/* FOOTER */
.footer { font-size:0.78em; /* 14px / 18px */ text-align:left; }
.footer.bgNeutralColor2 { padding-top:var(--spacing20); padding-bottom:var(--spacing20); }
.footer p { margin:0; }
	.footer .flexWrapper div:nth-child(2) { text-align:right; }
.footer .linkList { list-style-type:none; }
	.footer .linkList li { display:inline; margin-right:var(--spacing10); }
	.footer .linkList li:last-child { margin-right:0; }



/* RESPONSIVE */
@media screen and (max-width:992px){
	header {}

	/* PORTFOLIO */
	.slideshow .artwork { margin:var(--spacing20); }
		.slideshow .artwork img { max-width:78vw; }
	.slideshow .artwork:first-child { margin-left:0; padding-left:0; }
	.slideshow .artwork:last-child { margin-right:0; padding-right:0; }
}


@media screen and (max-width:768px){
	.desktop { display:none; }
	.mobile { display:block; }

	header {}

	h1 { margin-bottom:var(--spacing30); }
	h2 { margin-bottom:var(--spacing30); }

	#about h2, #contact h2 { text-align:center; }

	section, .home { padding-top:var(--spacing30); padding-bottom:var(--spacing30); }
	.mainWrapper, .contentWrapper { padding-left:var(--spacing10); padding-right:var(--spacing10); }

	.header .menuContent { display:none; }

	/* Flexbox */
	.flexWrapper:not(.header .flexWrapper) { display:block; }
		.flexWrapper.cols1-1 > div, .flexWrapper.cols1-1 > div:nth-child(n), .flexWrapper.cols1-2 > div, .flexWrapper.cols1-2 > div:nth-child(n) { margin-left:0; margin-right:0; }


	/* HOME PAGE */
	.home .sMediaList { margin-top:var(--spacing30); }


	/* PORTFOLIO PAGE */
			.slideshow .artwork .description { padding:5px; }
	.slideshowControls { }
	.slideshowControls .prevBtn { left:0; }			
	.slideshowControls .nextBtn { right:0; }


	/* CONTACT PAGE */
	#contact { text-align:center; }
	#contact .contactOther { text-align:center; margin-top:var(--spacing20); }


	/* FOOTER */
	.footer { text-align:center; }
	.footer .flexWrapper div:nth-child(2) { text-align:center; margin-top:var(--spacing20); }
	.footer .linkList li { display:block; margin:var(--spacing10) 0; }
}

@media screen and (max-width:576px){
	header {}

	/* PORTFOLIO */
	.slideshow .artwork { margin:0; }
}