style.css

	@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,300;0,500;1,100;1,300;1,500&display=swap');

	/*	https://codepoints.net/U+2192 & https://github.com/weiweihuanghuang/Work-Sans/issues/31
	https://stackoverflow.com/questions/40822458/styled-unicode-arrows-not-showing-up-with-google-fonts-web-font/40822459	*/
	@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&&text=%E2%86%90|%E2%86%92');


	/*	-	-	-	-	-	-	-	-	-	-	-	*/
	/* Design */

	body {
		font-family: 'Work Sans', sans-serif;
		font-weight: 300;
		line-height: 1.33em;
		color: #444;
	}
	h1, h2, h3, h4, h5, h6 {
		line-height: 100%;
		margin: 0;
		margin-bottom: 1rem;
	}
	p {
		line-height: 120%;
		margin: 0;
		margin-bottom: 1rem;
	}

	#Intro h1 {	font-weight: 100;	font-size: 4rem;	line-height: 100%;	}
	#Intro h2 {	font-weight: 300;	font-size: 2rem;	line-height: 100%;	}
	#Intro h3 {	font-weight: 300;	font-size: 1.25rem;	line-height: 100%;	font-style: italic; }


	/* section blocs en couleurs alternées */
	main > section:nth-of-type(even) {
		background-color: rgba(0,0,0,0.05);
	}
	main > section:nth-of-type(even) img {
		outline: 4px solid rgba(255,255,255,1);
	}


	a,
	a:link,
	a:hover,
	a:active,
	a:visited{
		color: #224466;
	}

	nav.pageNav a,
	nav.pageNav a:link,
	nav.pageNav a:hover,
	nav.pageNav a:active,
	nav.pageNav a:visited{
		color: #224466;
		padding-left: 0.5em;
		padding.right: 0.5em;
		text-decoration: none;
	}

	nav.pageNav a.disabled { color: #CCC; }
	nav.pageNav a.active   { color: #000; border-bottom: 2px solid; }
	nav.pageNav a.disabled, 
	nav.pageNav a.active {
		cursor: default;
	}

	html, body {
		scroll-behavior: smooth;
		/*	Safari does not support scroll-behavior: smooth;
			https://stackoverflow.com/questions/56011205/is-there-a-safari-equivalent-for-scroll-behavior-smooth/56011281
			https://css-tricks.com/snippets/jquery/smooth-scrolling/	*/
	}

	/*	-	-	-	-	-	-	-	-	-	-	-	*/
	/* Mise en page générale */

	/* box-sizing: content-box|border-box */

	body, main, section {
		 margin: 0;
		padding: 0;
	}

	img { width: 100%; }
	img.verticalImage { width: 67%; }

	section {
		min-height: 100vh;
	}




	/*	-	-	-	-	-	-	-	-	-	-	-	*/
	/* marges et disposition image & text utilisant calc() et var() */

	:root {
		--gutter: 1rem;
	}

	section {
		padding: calc( var(--gutter) / 2 );	
	}

	section div.image, section div.text {
		 margin: calc( var(--gutter) / 2 );
		padding: calc( var(--gutter) / 2 );
	}

	@media (min-width: 640px) {
		section { display: flex; }
		section div.image, section div.text { flex: 0 0 auto; }

		       #IntroText { width: calc(60% - calc( var(--gutter) * 2 ) ); }
		section div.image { width: calc(60% - calc( var(--gutter) * 2 ) ); }
		section div.text  { width: calc(40% - calc( var(--gutter) * 2 ) ); }
	}




	/*	-	-	-	-	-	-	-	-	-	-	-	*/
	/* Images seules */

	body.imagesOnly {}

	body.imagesOnly section div.text {
		display: none;
	}

	body.imagesOnly section div.image {
		width: calc(100% - calc( var(--gutter) * 2 ) );
	}




	/*	-	-	-	-	-	-	-	-	-	-	-	*/
	/* Vertical gallery layout */

	.vertical section {
		min-height: 100vh;
		scroll-snap-align: start;
	}

	html, body { scroll-snap-type: y proximity; }
	/*	html won't work in Chrome…
		body won't work in Safari… 
		…but using them *both* works in *both* browsers…
		(and apparently does not interfere with a horizontal layout)
		¯\_(ツ)_/¯
	*/

	/*	html, body { scroll-snap-type: y mandatory; }	*/
	/*	manditory has issues when content > 100vh…		*/


	/* ajouter un mention "↓ scroll… ↓" */
	.vertical #IntroText::after {
		display: block;
		width: 100%;
		content: "↓";
		text-align: left;
		font-weight: 100;
		font-size: 2rem;
		color: #999;
	}




	/*	-	-	-	-	-	-	-	-	-	-	-	*/
	/* Horizontal gallery layout */
	.horizontal main {
		display: flex;
		flex-wrap: nowrap;
	}
	.horizontal section {
		width: calc(100vw - calc( var(--gutter) * 4 ) ); /* les blocs sont -un peu- moins large que la fenetre… */
		width: calc(100vw); /* les blocs sont -exactement- le meme taille que la fenetre… */
		flex: 0 0 auto;
	}

	/* Horizontal Scrolling gallery… */
	body.horizontal {
		overflow: hidden;
	}
	.horizontal main {
		overflow: scroll;
		overflow-x: scroll;
		/*scroll-snap-type: x proximity;*/
		scroll-snap-type: x mandatory;
	}
	.horizontal section {
		scroll-snap-align: center;
	}

	/* ajouter un mention "scroll… →" */
	.horizontal #IntroText::after {
		display: block;
		width: 100%;
		content: "→";
		text-align: right;
		font-weight: 100;
		font-size: 2rem;
		color: #999;
	}

	/* horizontal TO-DO */

	/*	Problème: si le contenu est plus grand que 100vh, pas de scroll vertical…
		j'ai essayé 
			.horizontal section { overflow-y: scroll; }
		sans succès…
	*/

	/*	Problème: UI/UX clusterfuck: this does NOT work with a "mouse" mouse… */

	/*	Problème: alignement centrement vertical du contenu
		un flexbox à l'interieure d'un section div crée d'autres problèmes… */