* 
{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

html,body
{
	width:100%;
	min-height: 100vh;
}


div#haut
{
	width:90vw;
	height:18vh;
	background-color:white;
	margin:auto;
	display:grid;
	grid-template-columns: 30% 30% 40%;
	grid-template-rows: 100%;
	justify-content: center;
	align-items: center;
}

div#logo
{
	width:100%;
/*	height:calc(min(25vw,15vh));*/
	background-color:cornsilk;	
}

div#logo img
{
    width:100%;
}

div#renseignements
{
    background-color:white;
    color:black;
    width:100%;
	height:18vh;
	text-align:right;
	font-family : arial, sans-serif;
	line-height:1.6;
	padding-top:10pt;
}

div#titre
{
	width:100%;
	height:18vh;
	background-color:white;
	display:grid;
	justify-content: center;
	align-items: center;
}

div#titre img
{
    height:18vh;
}

nav#menuHaut
{
	width:90vw;
	height:8vh;
	background-color:#174860;
	margin:auto;
	display:grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 100%;
}

p#FC
{
    text-align:center;
    width:90vw;
    color:red;
    display:flex;
    font-size:clamp(2rem,6vw,4rem);
    justify-content:center;
    font-weight:bold;
}
p#phrase
{
    text-align: center;
    width:90vw;
    margin:2vh auto;
    font-size:clamp(1.5rem,4vw,3rem);
    font-weight:bold;
    color:#174860;
    display:flex;
    justify-content:center;
}
    

section#nav01
{
    color:white;
    margin:auto;
}

section#nav02
{
    color:white;
    margin:auto;
}

section#nav03
{
    color:white;
    margin:auto;
}

section#nav04
{
    color:white;
    margin:auto;
}

div#CCs
{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto;
    width:90vw;
    margin:auto;
    
}

div#CCs section
{
    display:grid;
    place-items:center;
    text-align:center;
    width:100%;
    
}

section#CC4
{
    background-color:red;
}

div#CCs section img
{
    height:70px;
    margin-bottom:11px;
    align-items:center;
    justify-items:center;
}

div#CCs section p
{
    margin:auto;
    color:black;
}


main
{
	width:90vw;
	height:60vh;
	background-color:white;
	margin:2vh auto;

	display:grid;
	/* on définit une grille de 3 lignes et 4 colonnes */
	grid-template-columns: repeat(4,25%); 
	grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
}

section{
	color:white;
	justify-content:space-between;
	height: 12vh;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}

section#section01
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:15px;
    margin:auto;
    width:15vw;
	
}

section#section02
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    width:15vw;
    padding:15px;
    margin:auto;
}

section#section03
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:15px;
    margin:auto;
    width:15vw;
}
section#section04
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    display:flex;
    gap:15px;
    padding:15px;
    margin:auto;
    width:15vw;
}
section#section05
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:20px;
    margin:auto;
    width:15vw;
}
section#section06
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:20px;
    margin:auto;
    width:15vw;
}
section#section07
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:20px;
    width:15vw;
    margin:auto;
}
section#section08
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:20px;
    margin:auto;
    width:15vw;
}
section#section09
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:20px;
    margin:auto;
    width:15vw;
}
section#section10
{
	background-color:#174860;
	color:white;
    box-shadow:8px 8px 2px 1px grey;
    gap:15px;
    padding:20px;
    margin:auto;
    width:15vw;
}
section#section11
{
	background-color:#174860;
	color:white;
    
}
section#section12
{
	background-color:thistle;
	color:white;
    
}

div#handicap{
    display:grid;
    grid-template-columns: 1fr 1fr;
    width:90vw;
    margin:60px auto;
    height:450px;              /* hauteur claire */
    background-color:white;
    overflow:hidden;
}

/* Colonne texte */
section#handicap01{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:40px 10%;
    gap:25px;
    background-color:#f8f8f8;
    color:black;
}

/* Colonne image */
section#handicap02{
    height:100%;
    width:100%;
    overflow:hidden;
}

/* Image bien cadrée */
section#handicap02 img
{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}



p#pHA
{
    font-size:20pt;
    color:black;
    width:90vw;
}



h2#h2HA
{
    font-size:25pt;
    font-weight:bold;
    color:black;
    width:90vw;
}

div#formation
{
    display:grid;
	grid-template-columns: 60% 40%;
	grid-template-rows: 100%;
	margin-top:8px;
	background-color:green;
}

section#formation01
{
    display:grid;
    grid-template-rows:80% 20%;
    justify-content:space-between;
    padding:80px 10%;
    background-color:#f8f8f8;
    gap:60px;
    color:black;
}
section#formation02 img
{
    width:30vw;
}

h2#h2F01
{
    font-size:25pt;
    font-weight:bold;
    color:black;
    width:90vw;
}

footer
{
	width:90vw;
	height:10vh;
	background-color:#174860;
	color:#white;
	padding : 30px 60px;
	font-family:Arial, sans-serif;
    font-size:5vmin;
}
div#BAS
{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:40px;
}
h3#b01
{
    color:white;
    margin-bottom:10px;
    font-size:16px;
}
h3#b02
{
    color:white;
    margin-bottom:10px;
    font-size:16px;
}
h3#b03
{
    color:white;
    margin-bottom:10px;
    font-size:16px;
}
a
{
    color:#174860;
    margin-bottom:6px;
    font-size:14px;
    display:block;
}