@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
@import url('../css/reset.css');

/* Définition de variables */
:root {
	--largeur: 100%; /* largeur de l'affichage */
}

html {
  scroll-behavior: smooth;
}


body {
	margin: 0;
	padding: 0;
	
	background: #efefef url('../img/fond2.jpg') no-repeat fixed top left;
	background-size: cover;
	
    font-family: 'Trebuchet MS', Arial, sans-serif;
	font-size: 20px;
}

#container {
	
	display: grid;	
	width: var(--largeur);
	margin: auto;
}
.titre {
	font-family: 'Akaya Kanadaka', cursive;
	font-size: 50px;
	text-align: center;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	font-size: 3vw;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	text-shadow: 4px 4px 0px #00f, -4px -4px 0px #00f ;
	text-shadow: #FF4A77 6px 0px 0px, #FF4A77 5.91686px 0.995377px 0px, #FF4A77 5.66974px 1.96317px 0px, #FF4A77 5.2655px 2.87655px 0px, #FF4A77 4.71532px 3.71022px 0px, #FF4A77 4.03447px 4.44106px 0px, #FF4A77 3.24181px 5.04883px 0px, #FF4A77 2.35931px 5.51667px 0px, #FF4A77 1.41143px 5.83163px 0px, #FF4A77 0.424423px 5.98497px 0px, #FF4A77 -0.574341px 5.97245px 0px, #FF4A77 -1.55719px 5.79441px 0px, #FF4A77 -2.49688px 5.45578px 0px, #FF4A77 -3.36738px 4.96596px 0px, #FF4A77 -4.14455px 4.33852px 0px, #FF4A77 -4.80686px 3.59083px 0px, #FF4A77 -5.33596px 2.74364px 0px, #FF4A77 -5.71718px 1.8204px 0px, #FF4A77 -5.93995px 0.84672px 0px, #FF4A77 -5.99811px -0.150428px 0px, #FF4A77 -5.89004px -1.14341px 0px, #FF4A77 -5.61874px -2.1047px 0px, #FF4A77 -5.19172px -3.00766px 0px, #FF4A77 -4.62082px -3.82727px 0px, #FF4A77 -3.92186px -4.54081px 0px, #FF4A77 -3.11421px -5.12852px 0px, #FF4A77 -2.22026px -5.57409px 0px, #FF4A77 -1.26477px -5.86518px 0px, #FF4A77 -0.274238px -5.99373px 0px, #FF4A77 0.723898px -5.95617px 0px, #FF4A77 1.70197px -5.75355px 0px, #FF4A77 2.63288px -5.39147px 0px, #FF4A77 3.49082px -4.87998px 0px, #FF4A77 4.25202px -4.23324px 0px, #FF4A77 4.89538px -3.46919px 0px, #FF4A77 5.40307px -2.60899px 0px, #FF4A77 5.76102px -1.67649px 0px, #FF4A77 5.95932px -0.697531px 0px;
	
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 0px 5px 0px;
	background: #fafafaff;
	width: 100%;
	height: auto;
	box-shadow: 0px 2px 5px #3c1a19;
	border-radius: 10px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 200;
}
header img{
	padding: 10px 0px 10px 30px;
	width: 9vw;
	height: auto;
}

nav {
	width: 100%;
	font-family: 'Akaya Kanadaka', cursive;
	font-weight: bold;
	color: #202020;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 3.5vw;
	text-shadow: 4px 4px 0px #00f, -4px -4px 0px #00f ;
	text-shadow: #FF4A77 6px 0px 0px, #FF4A77 5.91686px 0.995377px 0px, #FF4A77 5.66974px 1.96317px 0px, #FF4A77 5.2655px 2.87655px 0px, #FF4A77 4.71532px 3.71022px 0px, #FF4A77 4.03447px 4.44106px 0px, #FF4A77 3.24181px 5.04883px 0px, #FF4A77 2.35931px 5.51667px 0px, #FF4A77 1.41143px 5.83163px 0px, #FF4A77 0.424423px 5.98497px 0px, #FF4A77 -0.574341px 5.97245px 0px, #FF4A77 -1.55719px 5.79441px 0px, #FF4A77 -2.49688px 5.45578px 0px, #FF4A77 -3.36738px 4.96596px 0px, #FF4A77 -4.14455px 4.33852px 0px, #FF4A77 -4.80686px 3.59083px 0px, #FF4A77 -5.33596px 2.74364px 0px, #FF4A77 -5.71718px 1.8204px 0px, #FF4A77 -5.93995px 0.84672px 0px, #FF4A77 -5.99811px -0.150428px 0px, #FF4A77 -5.89004px -1.14341px 0px, #FF4A77 -5.61874px -2.1047px 0px, #FF4A77 -5.19172px -3.00766px 0px, #FF4A77 -4.62082px -3.82727px 0px, #FF4A77 -3.92186px -4.54081px 0px, #FF4A77 -3.11421px -5.12852px 0px, #FF4A77 -2.22026px -5.57409px 0px, #FF4A77 -1.26477px -5.86518px 0px, #FF4A77 -0.274238px -5.99373px 0px, #FF4A77 0.723898px -5.95617px 0px, #FF4A77 1.70197px -5.75355px 0px, #FF4A77 2.63288px -5.39147px 0px, #FF4A77 3.49082px -4.87998px 0px, #FF4A77 4.25202px -4.23324px 0px, #FF4A77 4.89538px -3.46919px 0px, #FF4A77 5.40307px -2.60899px 0px, #FF4A77 5.76102px -1.67649px 0px, #FF4A77 5.95932px -0.697531px 0px;
}

nav ul {
	display: flex;
	justify-content: space-around;
	margin: 0;
	padding: 0;
	list-style-type: none;
	width : 100%:
}

nav ul a {
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
/* on prévoit une petite transition (lueur) */
	transition: all 0.8s; 
}

nav ul  a:hover {
	color: #700000;
	transition: all 0.3s; 
	

/*	border-top: 3px solid transparent;
	border-bottom: 3px solid #760001;
*/
}

figure {
	width: 100%;
	margin-top: 20px;
	overflow: hidden;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 10px #eee solid;
}

figure img {
	width: 100%;
}

div#admission:target, div#formation:target, div#orientation:target {
	padding-top: 90px;
	margin-top: -90px;
}
article {
	box-sizing: border-box;
	margin-top: 20px;
	border: solid;
	padding: 25px 25px 25px 25px;
	font-size: 20px;
	text-align: justify;
	word-spacing: 4px;
	letter-spacing: .5px;
	line-height: 25px;
	color: #222;
	background: #fafafa55;
	width: 100%;
	height: auto;
	box-shadow: 0px 2px 5px #3c1a19;
	border-radius: 10px;
}
article h1 {
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 10px;
}

article ul {
	list-style-type: disc;
	margin-left: 50px;
}

p {
	padding-top: 20px;
	
}


footer {
	font-style: italic;
	margin-top: 30px;
	padding-bottom: 100px;
	text-align: center;
	background: url("../img/separateur.png") repeat-x;
	height: 15px;
	border: none;
	width: 100%;
}

footer::after {
	content: 'Graphique, design et contenu : Christine & Michel Riquart - 2021';
	margin-bottom: 100px;

 }