header {
    background-color: #333;
    color: white;
    padding: 15px 20px;
    text-align: center;
    border-radius: 20px;
    width: auto;
}

header nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}
/*header test animation début*/
.menu {
    
    perspective: 800px;     
    display: flex;
    justify-content: space-evenly; 
    margin-top: 10px; 
}

.menu a {   
    display: flex;
    padding: 10px 15px; 
    text-decoration: none; 
    color: white; 
    transition: transform 0.4s ease-out, color 0.4s;
    transform-style: preserve-3d;
}

.menu a:hover {   
    transform: rotateY(15deg) scale(1.1); 
    color: #ffd700;
    z-index: 10;
}
/*animation du header fin*/
.logo{
    height: 120px;
}
/* partie header on touche plus */
body{
    font-family: "Roboto Slab", serif;
    font-style: normal;
}
.titre2{
color: black;
font-size: 56px;
margin-left: 70rem;
position: relative;
top: 150px;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content:flex-start; /* sert à rien */
  width: auto;
  height: auto;
  background-color: #507dbc;
   /* bord du conteneur */
  justify-content: space-evenly;
  border-radius:20px;
  margin-left:0px;
}

.container .item:nth-child(2){
  margin-left: 70rem;
  width: 700px;
  height: auto;
  background-color:rgb(230, 224, 225);
  position:relative;
  top:150px;
}
/*mon image d'intro */
.container .item:nth-child(3) {
  width: 1000px;
  height: 600px;
  margin-left: 1rem;
  position:relative;
  bottom:500px;
  border-radius: 20px;
}
/*mon image d'intro */


.container .item:nth-child(5) {
  margin-left: 1rem;
  width: 700px;
  height:auto;
  background-color:rgb(143, 230, 140);
  position:relative; /* pour rendre libre le parent */
  bottom: 250px; /* top ou bottom pour la hauteur */

}
.container .item:nth-child(6) {
  width: 700px;
  height: 400px;
  margin-left: 47rem;
  position:relative;
  bottom:1020px;
  border-radius: 20px;
}
.container .item:nth-child(7){
  margin-left: 47rem;
  width: 1100px;
  height: auto;
  background-color:rgb(230, 224, 225);
  position:relative;
  bottom:920px;
}
.container .item:nth-child(8){
  margin-left: 1rem;
  width: 700px;
  height: 600px;
  position:relative;
  bottom:1600px;
  border-radius: 20px;
}
.container .item:nth-child(9){
  margin-left: 12rem;
  width: 1500px;
  height: auto;
  background-color:rgb(129, 83, 255);
  position:relative;
  bottom:800px;
}
.container .item:nth-child(10){
  margin-left: 12rem;
  width: 1500px;
  height: auto;
  position:relative;
  bottom:1900px;
  border-radius: 20px;
}

.container .item:nth-child(11){
  margin-left: 12rem;
  width: 1500px;
  height: auto;
  background-color:rgb(77, 196, 186);
  position:relative;
  bottom:620px;
}
.container .item:nth-child(12){
  margin-left: 12rem;
  width: 1500px;
  height: auto;
  position:relative;
  bottom:1800px;
  border-radius: 20px;
}




.titre3{
color: black;
font-size: 56px;
margin-left: 1rem;
position: relative;
bottom: 250px;
}




.item p{
  color:black;
  font: size 24px;
  /* word-break: break-all; pour forcer un passage à la ligne mais pas utile pour le moment */
  margin: 10px;
}

.item{
  width: 200px;
  height: 200px;
  
  /* je vois pas la diff du flex shrink à approfondire */
  flex-shrink: 0px; 
  background-color: #4CAF50;
  justify-content: space-between;
  border: solid white 5px;/* petit bord entre mes carrés */
  color: yellow;
  font-size: 40px;
  /* ici sa centre ce que j'écris */
  display: flex;
  justify-content: center;
  align-items: center;
}

footer{
    background-color: #dae3e5;
    color: rgb(0, 0, 0);
    text-align: center;
    font-weight: 200;
    max-width: none;
    margin-top: auto;
}