:root {
    --noir: #333333;
	--color-cgt: #f03e3e;	
	--color-cgt-clair: #b92b2b;	
	--nav : #033d66;	
	--ombre: rgba(185, 43, 43, 0.3);
    --rouge-ombrager: #914a4a;
    --menu-texte: #FFFFFF;
    --tBlanc: rgba(255, 255, 255, 0.8);
    --hauteurMenu : 4rem;
	--hauteurPresentation: 8rem;
	--hauteurHeader : 12rem;
	--titre1: #f03e3e;
	--titre2: #e67e7e;
	--titre3: #faa1a1;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	
}

*, *::after, *::before {
	box-sizing: inherit;
}

html {
    /*font-size: 100%; /* 16px = 1rem*/
    font-size: 62.5%;   /* 10px = 1 rem */
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: var(--black);
    font-size: 1.6rem;
}

/*********************************************************
*          Entête
**********************************************************/
header
{
	display: grid;
	justify-items: center;
	/*position: fixed;
	top: 0;*/
	width: 100%;
	background-color: white;
}

header #presentation
{
	display: flex;
	align-items: center;
	gap: 3rem;
}

header #presentation img
{
	height: 10rem;
}

header #presentation h1
{
	font-size: 3rem;
	color: var(--color-cgt);
}

nav
{
	background-color: var(--color-cgt);
	/*width: 100%;*/
	/*max-width: 100%;*/
	display: flex;
	justify-content: center;
	font-size: 1.6rem;
	position: sticky;
	top:0;
}

nav ul.menu
{
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

nav ul.menu li
{
	position: relative;
	top: 0;
}

nav ul.sousMenu
{
	/*display: flex;*/
	flex-direction: column;
	list-style: none;
	position: absolute;
	background-color: var(--color-cgt-clair);
	padding: 0;
	display: none;
	z-index: 10;
}


nav ul li a 
{
	text-decoration: none;
	color: var(--menu-texte);
	display: block;
	padding: 1.5rem;
}

nav ul li a:hover
{
	background-color: rgb(231, 121, 121);
	/*text-decoration: underline;*/
}

nav ul li:hover .sousMenu
{
	display: block;
	min-width: 100px;
}

/*********************************************************
*          Contenu
**********************************************************/
section 
{
	padding: 1.6rem;
	width: 80%;
	margin: 0 auto 5rem;
	/*margin: 0 auto 5rem;*/
}

section h1
{
	text-align: center;
	font-size: 2.2rem;
	color: var(--titre1);
	border: 1px solid var(--color-cgt);
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 30px;
	box-shadow: 8px 8px 4px var(--color-cgt-clair);
}

section h2
{
	font-size: 1.8rem;
	color: var(--titre1);
	/*text-shadow: 2px 4px 3px rgba(185, 43, 43, 0.3) ;*/
	text-shadow: 2px 4px 3px var(--ombre);
	margin-top: 5rem;
}

section h3
{
	font-size: 1.6rem;
	color: var(--titre2);
}

section .evolution
{
	/*display: flex;
	flex-wrap: wrap;*/
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	column-gap: 2rem;
	justify-items: center;
}

section .evolution .grade
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

section table
{
	border-collapse: collapse;
	text-align: center;
	font-size: 1.4rem;
}

section table td, section table th
{
	
	border: solid 1px var(--rouge-ombrager);
	padding: 0.5rem;
	
}

div img.img_text {
    width: 300px;
    height: auto;
    float: left;
    margin-right: 2rem;
	margin-bottom: 1rem;
}

div img.img_text ~ div {
	clear: both;
}

/*********************************************************
*          Pied de page
**********************************************************/
footer
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: var(--color-cgt);
	color: var(--menu-texte);
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 1rem;
	height: 4rem;
}

footer p
{
	line-height: 1.5rem;
}

footer a
{
	text-decoration: none;
	color: var(--menu-texte);
}

/*********************************************************
*          Formulaire de contact
**********************************************************/
section .message
{
	font-size: 1.3rem;
	font-style: italic;
	border: 1px solid #ececec;
	background-color: #ececec;
	width: 70%;
	margin: 0 auto 20px;
	padding: 10px;
	border-radius: 10px;
}


.form_contact 
{
	display: flex;
	flex-direction: column;
	width: 70%;
	margin: 0 auto;
}

.form_contact .form_cacher
{
	display: none;
}

.form_contact .form_contenu
{
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
	justify-content: right;
}

.form_contact .form_contenu .form_nom,
.form_contact .form_contenu .form_prenom
{
	display: flex;
}

.form_contact .form_contenu label
{
	width: 150px;
}

.form_contact .form_contenu input 
{
	width: 100%;
	padding: 5px;
}

.form_contact .form_contenu textarea 
{
	width: 100%;
	height: 150px;
	resize: none;
}

.form_contact .form_contenu button 
{
	padding: 10px 20px;
}