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

html,body
{
	width:100vw;
	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:10vh;
    justify-content:center;
    font-weight:bold;
}
p#phrase
{
    text-align: center;
    width:90vw;
    margin:2vh auto;
    font-size:6vh;
    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
    align-items:center;
    justify-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;
	width:  15vw;
	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;
	
}

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

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

div#handicap
{
    display:grid;
	grid-template-columns: 60% 40%;
	grid-template-rows: 100%;
	margin-bottom:15px;
	background-color:orange;

}

section#handicap01
{
    display:grid;
    grid-template-rows:repeat(3,calc(100% / 3));
    justify-content:space-between;
    padding:80px 10%;
    background-color:#f8f8f8;
    gap:60px;
    color:black;
}

section#handicap02 img
{
/*    width:30vw;*/
    height:100%;
}
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;
    flex-wrap:wrap;
}
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-item: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;
}