html {
	scroll-behavior: smooth;
}

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

/* ca n'est plus actif - mais je vais peut etre le remettre ailleurs */
header.intro {
	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;
	display: flex;
	flex-direction: row;
}

header {
	margin: 0;
	padding: 0;
	text-align: center;

	display: flex;
	flex-direction: column;

}


header > div:first-of-type {
	height: 5em;
	background-color: var(--bg);
	background-image: url(/imgs-dark/logo.svg);
	background-repeat: no-repeat;
	background-position: 3em center;
	background-size: 5em auto;

	display: flex;
	flex-direction: row;
}

@media (prefers-color-scheme: light) {
	header > div:first-of-type {
		background-color: var(--bg);
		background-image: url(/imgs-light/logo.svg);
	}
}

header > div:first-of-type * {
	flex-grow: 1;
}

header > div:first-of-type > div.titre {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: .5em;
	padding-top: 1em;
}

header > div:first-of-type > a:first-of-type {
	width: 10em;
	flex-grow: 0;
}

header > div:first-of-type > div.titre > span {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 14px;
	letter-spacing: 0.02em;

}

header > div:first-of-type > div.titre > span:first-of-type {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 6px;
}

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

	100% {
		opacity: 1;
	}
}

/*
on conserve le H1 pour la semantique, mais il est remplace par
l'image de fond en rendu graphique 
*/
header > div:first-of-type h1 {
	margin: 0;
	padding: 0;
	display: none;
}

header div.arianne {
	/* background-color: red; */
	display: flex;
	flex-direction: row;
	gap: .5em;
	border-top: 1px solid var(--bg-content);
	font-size: small;
	padding-left: 2.5em;
}

header div.arianne span,
header div.arianne a {
	flex-grow: 0;
	font-style: italic;
	text-decoration: none;
}

header div.arianne a:hover {
	color: var(--accent)
}

header div.arianne a:after {
	content: " >";
}

/*********************** nav *************************************************/

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

	background-color: var(--bg);
	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;
	border-left: 1px solid var(--border);
}

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

@keyframes fonduNavInit {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

nav a.link {
	color: var(--accent);
	border: 1px solid var(--accent);

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

nav a.link.highlight {
	background-color: var(--accent);
}

/** masking rules. allow icons to use foreground color */
nav a.tool {
	border: none;
	color: transparent;
	width: 3em;
	height: 3em;
	visibility: visible;

	background-color: var(--accent);
	mask-image: url('/imgs/arrow_down.svg');
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

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

#hamburgerMenuBtn.active {
	mask-color: var(--bg-content);
}

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

#goUp {
	mask-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: var(--bg);
	padding: 0.5em;
	text-align: right;
	color: var(--accent);
	text-decoration: none;
	background-image: linear-gradient(to right, var(--bg-hover-accent), var(--bg-content));
	cursor: pointer;
	border-left: 1px solid var(--border);
	/* border-right: 1px solid var(--border); */
}

#mainNav span {
	flex-grow: 2;
}

#hamburgerMenu a:hover {
	color: var(--text);
}

#hamburgerMenu a:first-of-type {
	border-top-left-radius: 1em;
	border-top: 1px solid var(--border);
}

#hamburgerMenu a:last-of-type {
	border-bottom-left-radius: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--border);
}

/**********************************************************/
#central-view {
	background-color: var(--bg-content);
	display: flex;
	flex-direction: column;

	min-height: calc(100vh - 6em);
	/* 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 var(--accent);
}


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

#content[data-paginated=true] section {
	min-height: 100vh;
}

#content section.nobreak {
	min-height: 0;
}

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

/******************************** pied de page ********************************/
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: var(--accent);
}

footer#legal {
	border-top: 1px solid var(--accent);
	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;
}

footer a {
	text-decoration: none;
}

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

	/* avec filter on devrait arriver a colorer les icones. pas besoin de
	transofmer le svg 
	https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element
	*/
	/* filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); */
}

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

	/* avec filter on devrait arriver a colorer les icones. pas besoin de
	transofmer le svg 
	https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element
	*/
	/* filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); */

}

svg path {
	fill: var(--accent);
}

/******************************************************************************/

/* TODO: revoir a partir d'ici: on a fusionner deux CSS et du coup c'est un peut le merdier */

#content section#dev img {
	float: right;
	width: 10em;
	margin: 1em;
}

#content section#reprise img {
	float: left;
	width: 10em;
	margin: 2em;
	opacity: 0.8;
}

#content section#freelance img {
	float: right;
	width: 10em;
	margin: 1em;
}

body {
	background-color: var(--bg);
	color: var(--text);
}

a {
	color: var(--text);
}


nav a.link.highlight {
	color: var(--bg);
}

#central-view {
	background-color: var(--bg-content);
}

#content {
	background-image:
		linear-gradient(rgba(64, 64, 64, 0.95), rgba(64, 64, 64, 0.95)),
		url(/imgs-dark/logo.svg);
}

@media (prefers-color-scheme: light) {
	#content {
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
			url(/imgs-light/logo.svg);
	}
}

footer p,
footer a {
	background-color: var(--bg);
}

footer a:hover {
	background-color: var(--bg-hover-accent);
}

.menu-tuile {
	display: flex;
	flex-direction: row;
	gap: 1em;
	margin-top: 1em;
}

section > img {
	background: var(--tile-bg);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
}