html {
	/* lire la doc la dessus i- en tou cas ca fonctionne*/
	scroll-behavior: smooth;
}

body {
	padding           : 0;
	margin            : 0;
	display           : flex;
	flex-direction    : column;
	min-height: 100vh;
}

header {
	margin                : 0;
	padding               : 0;
	text-align            : center;
	height                : 100vh;

	background-repeat     : no-repeat;
	background-position   : center;
	background-size       : 50vmin 50vmin;
	animation             : fonduLogoInit 2s;

	transition   : height 0.35s ease; /* <<< celle la ne fonctionne pas */
	transition   : background-position 0.5s ease;

	transition   : background 0.5s ease;
	/*position     : sticky;
	top          : 0;
	left         : 0;
	right        : 0;*/

	display : flex;
	flex-direction: row;
}

/*body.scrolled header {
	height                : 3em;
	background-size       : auto 80%;
	background-position   : left center;
	padding-left: 1em;
	padding-right: 1em;
	background-origin: content-box;
}*/
/*
body.top header {
	border-bottom : none;
	box-shadow: none;
}*/

header * {
	flex-grow: 1;
}

@keyframes fonduLogoInit {
	  0% { opacity : 0; }
	100% { opacity : 1; }
}

/*
on conserve le H& pour la semantique, mais il est rempalce par
l'image de fond en rendu graphique 
*/
header h1 {
	margin  : 0;
	padding : 0;
	display : none;
}
/*********************** nav *************************************************/

nav {
	position                 : fixed;
	bottom                   : 0;
	right                    : 0;
	top                      : 0;
	width                    : 3.2em;

	background-color         : #202020;
	display                  : flex;
	flex-direction           : column;
	gap                      : 1em;
	align-items              : flex-end;
	align-content            : center;
	justify-content          : flex-end;
	flex-wrap                : wrap;
	
}

nav#mainNav {
	animation-name           : fonduNavInit;
	animation-duration       : 2s;
	animation-iteration-count: 1;
}

/*
body.scrolled nav {
	display : none;
}*/

@keyframes fonduNavInit {
	  0% { opacity : 0; }
	 50% { opacity : 0; }
	100% { opacity : 1; }
}

nav a.link {
	color       : #FF8000;
	border : 1px solid #FF8000;

	text-decoration  : none;
	padding : 0.5em;
	border-radius : 1em;
}

nav a.link.highlight {
	background-color : #FF8000;
}

nav a.tool {
	border              : none;
	background-image    : url('/imgs/arrow_down.svg');
	background-size     : contain;
	color               : transparent;
	background-repeat   : no-repeat;
	background-position : center;

	width               : 3em;
	height              : 3em;
	visibility          : visible;
}

#hamburgerMenuBtn {
	background-image    : url('/imgs/hamburger.svg');
}

#hamburgerMenuBtn.active {
	background-color : #404040;
}

#goDown {
	background-image    : url('/imgs/arrow_down.svg');
}

#goUp {
	background-image    : url('/imgs/arrow_up.svg');
	visibility          : hidden;
}

nav#hamburgerMenu {
	background-color : transparent;
	right            : 3.2em;
	width            : auto;
	justify-content  : flex-start;
	/*padding-right    : 1em;*/
	gap              : 0;
	align-items      : stretch;
	display          : none;
	z-index          : 30;
}

nav#hamburgerMenu.active {
	display          : flex;
}

#hamburgerMenu a {
	background-color : #202020;
	padding          : 0.5em;
	text-align       : right;
	color            : #FF8000;
	text-decoration  : none;
	background-image : linear-gradient(to right, #202020, #404040);
	cursor           : pointer;
}

#mainNav span {
	flex-grow :2;
}

#hamburgerMenu a:hover {
	color : white;
}

#hamburgerMenu a:first-of-type {
	border-top-left-radius : 1em;
}

#hamburgerMenu a:last-of-type {
	border-bottom-left-radius : 1em;
	margin-bottom   : 1em;
}

/**********************************************************/
#central-view {
	background-color : #404040;
	display          : flex;
	flex-direction   : column;

	min-height       : calc(100vh - 3em);
    min-height: 100vh;

	/* taille de nav */
	padding-right : 3.2em;
}

#content {
	flex-grow             : 1;
	flex-shrink             : 1;
	background-repeat     : no-repeat;
	background-position   : center;
	background-attachment : fixed;
	background-size       : 50vmin;
	padding               : 0.5em;
	border-bottom    : 1px solid #FF8000;
}


#content section {
	border-bottom : 1px solid #AAAAAA;
	padding-left : 1em;
	padding-right : 1em;
	min-height : 100vh;
}

/* tuile speciale qui marque le site comme etant en construction */
#coding {
	background-color          : rgba(255,128,0,0.5);
	color                     : white;
	border-left               : 1px solid #FF8000;
	border-bottom             : 1px solid #FF8000;
	border-bottom-left-radius : 1em;

	/* on place la tuile en haut a droite en permanence  */
	position                  : fixed;
	top                       : 0;
	right                     : 3.2em;

	background-image          : url(/imgs/under-construction.svg);
	background-repeat         : no-repeat;
	background-position       : -1.5em center;
	padding-left              : 2em;
	padding-right             : 0.5em;
	background-size           : 1em;
	background-origin         : content-box;

	box-sizing: border-box;
}

#content section:last-child {
	border-bottom : unset;
}

footer {
	/* on utilise la couleur de fond pour mieux placer les liseret entre les tuiles */
	background-color : #FF8000;
	overflow : hidden;
}

footer#contact {
	display               : grid;
	/*grid-template-columns : 20% 20% 20% 20% 20%;*/
	grid-template-columns : 33% 33% 33%;
	gap        : 0.2em;

	/* on utilise la couleur de fond pour mieux placer les liserets
	entre les tuiles */
	background-color : #FF8000;
}

footer#legal {
	border-top: 1px solid #FF8000;
	font-size: small;
}

footer p, footer a {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	text-align     : center;
	margin         : 0;
	padding        : 0.2em;
	overflow       : hidden;
	text-overflow  : ellipsis;
	/*
	word-wrap: break-word;
	word-break: break-all;
	*/
}

footer a {
	text-decoration : none;
}

footer img {
	margin     : 0.5em;
	max-width  : 1.5em;
	max-height : 1.5em;
}

/******************************************************************************/
#content section#dev img {
	float: right;
	width : 10em;
	margin : 1em;
}
#content section#reprise img {
	float: left;
	width : 10em;
	margin : 1em;
	opacity : 0.8;
}
#content section#freelance img {
	float: right;
	width : 10em;
	margin : 1em;
}