body, html{
	margin:0;
	padding:0;
}

body{
	background-color:#93C5C7;
}

/*===================================================================Header===============================================================================*/
header{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

header > article:nth-of-type(1){
	width:100%;
	display:flex;
	justify-content:center;
}

header > article:nth-of-type(2){
	position: absolute;
	top: 80px; 
	right: 50px;
}

header > article:nth-of-type(3){
	position: absolute;
	top: 80px; 
	left: 50px;
}

header > article:nth-of-type(1) > article {
	width:50%;
	display:flex;
	justify-content:center;
	background-color:#C9E4E7;
	border-radius: 15px;
	margin-top:20px;
	margin-bottom:20px;
	box-shadow: 10px 10px 10px rgba(0,0,0,.15);
}

header > article:nth-of-type(1) > article > h1{
	font-size:7vw;
	margin:0;
	font-weight:bold;	
	padding:2% 5%;
	
}

header > article:nth-of-type(2) img{
	width:80%;
}


header > form > article:nth-of-type(2){
	width:100%;
	display:flex;
	justify-content:center;
	margin-top:20px;
	margin-bottom:20px;
}

header > form > article:nth-of-type(1){
	width:45%;
	display:flex;
	justify-content:flex-end;
	margin-top:20px;
	margin-bottom:20px;
	padding-right:30px;
}

header > form {
	width:100%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

header > form > article:nth-of-type(1) > input{
	width:60%;
	height:50px;
	font-size:20px;
}

header > form > article:nth-of-type(2){
	width:45%;
	display:flex;
	justify-content:flex-start;
	margin-top:20px;
	margin-bottom:20px;
	padding-left:30px;
}

header > form > article:nth-of-type(2) > select{
	width:56%;
	height:50px;
	font-size:20px;
}

header > form > article:nth-of-type(3){
	width:40%;
}

header > form > article:nth-of-type(3) button{
	width:100%;
	border-radius:15px;
	border:none;
	height:50px;
	background-color:cadetblue;
	cursor:pointer;
	
}

/* Styles pour les écrans de taille moyenne (par exemple, tablettes) */
@media screen and (min-width: 481px) and (max-width: 910px) {
	header > form > article:nth-of-type(1) {
		width:100%;
		justify-content: center;
		padding-right:0;
	}
	
	header > form > article:nth-of-type(2) {
		width:100%;
		justify-content: center;
		padding-left:0;
	}
	
	header > form > article:nth-of-type(1) > input {
		width:40%;
	}
	
	header > form > article:nth-of-type(2) > select {
		width:40%;
	}
	
	header > article:nth-of-type(2) {
		right:0;
	}
}

/* Styles pour les écrans de petite taille (par exemple, smartphones) */
@media screen and (max-width: 480px) {
	
	header > form{
		margin-top:100px;
	}
	
	header > form > article:nth-of-type(1) {
		width:100%;
		justify-content: center;
		padding-right:0;
	}
	
	header > form > article:nth-of-type(2) {
		width:100%;
		justify-content: center;
		padding-left:0;
	}
	
	header > form > article:nth-of-type(3) {
		width:80%;
	}
	
	header > form > article:nth-of-type(1) > input {
		width:80%;
	}
	
	header > form > article:nth-of-type(2) > select {
		width:80%;
	}
	
	header > article:nth-of-type(2) {
		right:0;
	}
}

/*===================================================================Corps principal avec tout les articles===============================================================================*/
body > main {
	background-color: #C9E4E7;
	width: 80%;
	border-radius: 15px;
	text-align: center;
	margin-top: 20px;
	margin-bottom:100px;
	align-items: center;
	margin-left: 10%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	padding-bottom:20px;
}
/*===================================================================Chaques articles (Personnes)===============================================================================*/
body > main > section{
	width:45%;
	background-color:cadetblue;
	margin-top:20px;
	border-radius: 15px;
	padding:20px;
	display:flex;
	flex-wrap:wrap;
	height:680px;
	justify-content:center;
	box-shadow: 10px 10px 10px rgba(0,0,0,.15);
}

p{
	color:#C9E4E7;
	margin:5px;
	font-size:20px;
	font-weight:bold;
}

body > main > section > article:nth-of-type(1) p{
	font-size:25px;
	font-weight:bold;
}

body > main > section > article{
	width:100%;
}

body > main > section > article:nth-of-type(1){
	background-color:#3B8184;
	margin-bottom:5px;
}

body > main > section > article:nth-of-type(n+6):nth-of-type(-n+10){
	width:40%;
}

body > main > section hr{
	border:1px solid #C9E4E7;
}
/*===================================================================Reseaux sociaux===============================================================================*/
.reseaux{
	width:19%;
	margin-top:2px;
	margin-bottom:5px;
}
/*===================================================================Boutton modifier / supprimer===============================================================================*/
body > main > section > article button{
	background-color: #C9E4E7;
	border-radius: 15px;
	width:80%;
	height:50px;
	cursor: pointer;
}

body > main > section > article button > p{
	color:black;
	font-size:18px;
}

@media screen and (min-width: 911px) and (max-width: 1016px) {
	body > main {
		justify-content:center;
	}
	
	body > main > section {
		width: 80%; /* Réduire la largeur des sections */
		height: auto; /* Ajuster la hauteur automatiquement */
		margin: 20px 0; /* Ajuster la marge */
	}
	
}
/* Styles pour les écrans de taille moyenne (par exemple, tablettes) */
@media screen and (min-width: 481px) and (max-width: 910px) {
  body > main {
    width: 90%; /* Réduire la largeur du conteneur principal */
    margin-left: 5%;
	justify-content:center;
  }

  body > main > section {
    width: 80%; /* Réduire la largeur des sections */
    height: auto; /* Ajuster la hauteur automatiquement */
    margin: 20px 0; /* Ajuster la marge */
  }

  body > main > section > article:nth-of-type(n+6):nth-of-type(-n+10) {
    width: 100%; /* Utiliser la largeur complète pour certains articles */
  }
}

/* Styles pour les écrans de petite taille (par exemple, smartphones) */
@media screen and (max-width: 480px) {
  body > main {
    width: 90%; /* Utiliser la largeur complète du conteneur principal */
    margin-left: 5%;
	justify-content:center;
  }

  body > main > section {
    width: 80%; /* Utiliser la largeur complète pour les sections */
    height: auto; /* Ajuster la hauteur automatiquement */
    margin: 20px 0; /* Ajuster la marge */
    padding: 10px; /* Réduire le padding */
  }

  body > main > section > article:nth-of-type(n+6):nth-of-type(-n+10) {
    width: 100%; /* Utiliser la largeur complète pour certains articles */
  }

  body > main > section > article button {
    width: 100%; /* Utiliser la largeur complète pour les boutons */
  }

  body > main > section > article button > p {
    font-size: 16px; /* Réduire la taille de la police pour les boutons */
  }
}