/* 
	© PAVARD Pierre - Style 1
	ver. 0.1 - 05/07/2026
*/

:root {
	--color-text: #000;
	--color-bg: #ECECF4;
	--color-primary: #666699;
	--color-secondary: #565680;
	--color-bouton: #FFF;
	--content-width: 1100px;
	--content-padding: 1rem;
	--spacing: 1rem;
}

html {
	font-size: 100%;
}
html, body {
	width: 100%;
	max-width: var(--content-width);
	height: 100dvh;
	margin: 0 auto;
	padding: 0;
	min-height: 100%;
}
body {
	min-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background-color: var(--color-bg);
	font-family: Arial;
	font-size: 1rem;
	line-height: 1.6;
	color: black;
}
header {
	padding: 1rem;
}	
main {
	padding: 1rem;
}
footer {
	margin: 0 1rem; padding: 0;
	text-align: center;
	background-color: var(--color-primary);
	border-radius: 10px;
	font-size: 0.7rem;
	color: white;
}

.nowrap { white-space: nowrap; }
		
.GridBox {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
	border: 1px solid red;
}

	header .GridBox {
		background: url("../images/fond_web.webp") left/contain no-repeat;
		height: 10rem;	
	}
	
h1 {
	position: relative;
	top: -0.2em;
	display: flex;
	margin: 0 0 0 2em; padding: -2em 0;
	align-items: baseline;
	font-size: 2em;
}
	h1 span {
		margin-left: 0.1em;
		font-size: 0.8em;
	}
		h1 span.effect3D{
			position: relative;
			top: -0.05em;
			font-size: 1em;
			color: var(--color-primary);
			text-shadow: var(--color-text) 0.1rem 0.1rem 0.005rem;
			
		}
		h1 span.fontAgua {
			font-family: "AguafinaScript";
			font-size: 0.5em;
			font-weight: normal;
		}

.description {
	position: relative;
	top: -1.2em; left: 2em;
}
	.description span{
		position: relative;
		top: -0.1em;
		margin-right: 0.1em;
		color: var(--color-primary);
		text-shadow: var(--color-text) 0.1rem 0.1rem 0.005rem;
	}

nav {
	margin-top: 1rem;
}		
.menu {
	display: flex;
	margin: 0 -1rem; padding: 0;
	list-style: none;
   
}
	.menu li {
		flex: 1;	
	}
	.menu a {
		display: block;
		margin: 0.1em; padding: 0 0.2rem;
		text-align: center;
		text-decoration: none;
	}

.bouton {
	background-color: var(--color-primary);
	border-radius: 6px;
	color: var(--color-bouton);
}
	.bouton:hover {
		background-color: var(--color-secondary);
	}