/*************FONTS**********************/

@import url("https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap");



:root {
  /* Start with axis defaults. Exclude weight, which is better controlled via the usual font-weight CSS property */
  --MONO: 0;   /* Monospace    */
  --CASL: 0;   /* Casual       */
  --slnt: 0;   /* Upright      */
  --CRSV: 0.5; /* Auto Cursive */
}

*,
*:before,
*:after {
  font-variation-settings: 
    "MONO" var(--MONO), "CASL" var(--CASL),
    "slnt" var(--slnt), "CRSV" var(--CRSV);
}





.font1 {
 	font-family: "Recursive", monospace;
	font-weight: 450;
	font-size: 50px;
	color: black;

		--CASL: 1;   /* Casual       */
	  --slnt: 0;  /* About 5deg   */
	  --MONO: 1;   /* Monospace      */
	  word-break: break-all;
	  line-height: 1;
	/*   animation: weightShift 5s infinite alternate; */
	  font-weight: 300;
	  transition: 0.75s;
	  margin: 0;
	  text-align: center;
}


.font2 {
 	font-family: "Recursive", monospace;
	font-weight: 350;
	font-size: 20px;
	line-height: 1.3;
	color: black;

	--CASL: 1;   /* Casual       */
  --slnt: 0;  /* About 5deg   */
  --MONO: 0;   /* Monospace      */
}


.font3 {
 	font-family: "Recursive", monospace;
	font-size: 30px;
	font-weight: 450;
	color: black;

	--CASL: 1;   /* Casual       */
  --slnt: 0;  /* About 5deg   */
  --MONO: 1;   /* Monospace      */
}

.font4 {
 	font-family: "Recursive", monospace;
	font-weight: 450;
	font-size: 30px;
	color: black;

	--CASL: 1;   /* Casual       */
  --slnt: 0;  /* About 5deg   */
  --MONO: 1;   /* Monospace      */
}

.font5 {
 	font-family: "Recursive", monospace;
	font-weight: 350;
	font-size: 18px;
	color: black;	
}

.font6 {
 	font-family: "Recursive", monospace;
 	font-weight: 350;
	font-size: 30px;
	line-height: 1.3;
	color: black;	
}


/*************GENERAL**********************/

/*section {
border: solid 1px blue;
}

div {

	border: solid 1px red;
}

main {

	border: solid 1px orange;
}*/


main {
	margin-top: 0;
}

body {
	margin:0;  /* Reset les marges par défaut */
	padding:0; /* Reset les marges par défaut */
	height:100%; /* Pleine hauteur */
	}

html {
	font-size:62.5%; /* 1em = 10px */
	padding: 0;	
	}

body { 
	font-size:1.8em; /* = 18px */
	background: #cbcbcb;
	}


* {
	box-sizing:border-box;
	}


img {
	width:100%;

}


.item-entete {
	padding-bottom: 0;
	border-bottom: 2px solid black;
}

.item-parcours p{
	margin:1vw;

}

/****************HEADER******************/

.text-right {
	text-align: right;
}


header {
	position:fixed;
	background: #cbcbcb;
	padding-top:2vw;
	padding-bottom:1vw; 
	border-bottom: 2px solid black;
	margin-top: 0;
	}	


/*************GRID**********************/	

main,
section.grid,
.header h1 {
	margin:0;
	padding:0;
	}

header,
main {
	width:80%;
	}

main {
	width:80%;
	margin-left:auto;
	margin-right:auto; 
	margin-bottom:3vw;
	}


.intro {
	padding-top:8vw;
	}


header,
.grid section.chercher,
.grid section.creer,
.grid section.organiser,
.grid section.coordonner,
.grid section.ecrire,
.grid section.partager,
.grid section.collaborer {
    display:grid; /* Aligne les sous-blocs sous forme de grille */
    grid-template-columns:1fr 1fr 1fr; /* Largeur des colonnes */
    grid-gap:2vw; /* Gouttières / marges internes */
    }


.grid .item-entete { 
	grid-column-start:1; 
	grid-column-end:4; /* Va de 1 à 4 en largeur */
	}



/****************FIGURES******************/

figure {
	justify-content:space-between;
	margin:0;
	padding:0;
	width:100%;
	}

/****************LINKS******************/

a {
	color: black;
}

a:hover {
	text-decoration: none;
}


figure a {
	text-decoration: underline black;
	color: black;

}

figure a:hover {
	text-decoration: none;	
}


/****************FOOTER******************/

footer {
	align-content: center;
}


.footer ul li {
	text-decoration: none;
	list-style-type: none;
}

.footer ul {
	padding: 0;
}


.footer a {
	text-decoration: underline;
	
}

.footer a:hover {
	text-decoration: none;
}


.credits,
.medias {
	border-top: 2px solid black;
	margin-top: 1vw;
}


/****************PAGES-ANNEXES******************/
.annexe-texte {
	margin-bottom: 3vw;
	width: 63%;
}

.annexe-titre {
	width: 63%;
	padding-top: 8vw;
}

.annexe-images {
	width: 63%;

}

.annexe-images figure {
margin-bottom: 2vw;
}

.shadow {
	box-shadow: 1px 1px 12px #555;
	margin-left: 12px;
}	

/****************RESPONSIVE******************/


@media screen and (max-width:828px) {
/* Entre 0px et 375px */
    /* Mobiles portrait */
    /* iPhone 6+ portrait = 540px */
    /* iPhone 6 portrait = 375px */
    /* iPhone 4 & iPhone 5 portrait = 320px */


main {
	width:90%;
	}

header {
	position: static;
	width: 100%;
	}


.text-right {
	text-align: left;
	font-size: 1em;
	border-top: 2px solid black;
	padding-top: 3vw;

}

.font6 {
	font-size: 18px;
}

.font2 {
	font-size: 18px;
 }


.font3 {
	font-size: 18px;	
 }

.font5 {
	font-size: 18px;
 }


.item-projet{
	margin-top: 2vw;
}

.item-entete {
	margin-bottom: 4vw;
	margin-top: 8vw;
}



.intro {
	padding-top:0;
	}


.annexe-texte {
	width: 90%;
}

.annexe-titre {
	width: 90%;
}

.annexe-images {
	width: 90%;

}


header,
.grid section.chercher,
.grid section.creer,
.grid section.organiser,
.grid section.coordonner,
.grid section.ecrire,
.grid section.partager,
.grid section.collaborer {
    display:block; /* Aligne les sous-blocs sous forme de grille */
    }

.grid section.projets-images {
	margin-bottom: 2vw;
	}


header,
.grid section.chercher,
.grid section.creer,
.grid section.organiser,
.grid section.coordonner,
.grid section.ecrire,
.grid section.partager,
.grid section.collaborer { 
	grid-column-start:1; 
	grid-column-end:2; /* Va de 1 à 4 en largeur */
	}