body {
	margin: 0;
	background-color: #FFFFF0;
	}

/*faire des background-color pour ce repérer sur les différentes div,*/
/*les couleurs temporaires: # */	


.Page_accueil{	/*ceci touche uniquement le texte pas le background-color : teste div*/
	display: flex;
	justify-content:center;
	flex-direction: column;
	color:#e1f8f5;
	font-family: "DM Serif Display", serif;
}

.menu{
	/*div*/
	display: flex;
	justify-content:center;
	width: 100%;
	height: 50px;
	font-family: 'Boldonse', sans-serif;
	font-size: 60%; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	/*border-radius: 15px;*/
}



/*----------------------------------MENUE----------------------------------*/
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  height: 50px;
  background-color: #92acff;
}

.logo {
  color: #0e0929;
  font-size: 1.5rem;
  font-family: "DM Serif Display", serif;
  display: flex;
  justify-content:flex-end;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  font-family: "DM Serif Display", serif;
  font-size: 1.5rem;
}

.nav-links a {
  color: #FFFFF0;
  text-decoration: none;
  padding: 8px 12px;
  /*border-radius: 10px;*/
  transition: background 0.5s ease;
  font-family: "DM Serif Display", serif;
}

.nav-links a:hover,
.nav-links a.active {
  background: none;
  color: #0e0929;
}

/*-------------------------------FIN-MENUE---------------------------------*/

.cont_texte{ /*Contenant du titre*/
	display: flex;
	justify-content:center;
	align-items: center;
	width: 100%;
	height: 897px;
	background-color:#FFFFF0;
	
}

.titre_principal h1 {
	/*texte: PORTFOLIO*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1000px;
	height: 100px;
	
	color:#0e0929;
	font-family: "DM Serif Display", serif;
	font-size: 1500%;
	text-align: center;
}

.titre_principal p {
	/*texte: CHN TR*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1000px;
	height: 10px;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 350%;
	text-align: center;
}

/*-----------------------A PROPOS---------------------------------*/

.Page_profil{	/*A PROPOS DE MOI*/
	display: flex;
	width: 100%;
	height: 1000px;
	align-items: flex-end;
	flex-direction: column;
	gap: 10px; /*séparateur*/
	background-color: #92acff;
}

.profil_cont_gd{
	width: 100%;
	height: 250px;
	display: flex;
	justify-content:center;
	gap: 30px; /*séparateur*/
}

.profil_titre{	/*ceci touche uniquement le texte pas le background-color : teste div*/
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	font-family: "DM Serif Display", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
}

.profil_gauche{
	width: 48%;
	height: 500px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #FFFFF0;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.profil_droite{	/*ceci touche uniquement le texte pas le background-color : teste div*/
	width: 48%;
	height: 500px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #FFFFF0;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/*-------------------------PARCOURS-----------------------------------*/

.Page_parcours{	/*MON PARCOURS (avec les infos dans établissement et en milieu pro*/
	display: flex;
	width: 100%;
	height: 2200px;
	align-items: flex-end;
	flex-direction: column;
	/*gap: 5px; séparateur*/
	background-color: #FFFFF0;
}

.parcours_cont{
	width: 100%;
	height: 1900px;
	display: flex;
	align-items:center;
	flex-direction: column;
	gap: 30px; /*séparateur*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.parcours_titre{	/*ceci touche uniquement le texte pas le background-color : teste div*/
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	align-items:center;
	font-family: "DM Serif Display", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/*---------------------------parcours_scolaire------------------------*/

.parcours_scolaire{
	width: 95%;
	height: 700px;
	display: flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	gap: 20px;
}

.titre_scolaire {
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	align-items:flex-end;
	font-family: "DM Serif Display", sans-serif;
	font-size: 50px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scoB {
	width: 100%;
	height: 500px;
	display: flex;
	justify-content:center;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	gap: 60px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scolaire1{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scolaire2{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scolaire3{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scolaire4{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scolaire5{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/*---------------------Parcours_professionel----------------------------*/

.parcours_pro{
	width: 95%;
	height: 1010px;
	display: flex;
	
	align-items:center;
	flex-direction: column;
	
	justify-content:center;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	gap: 20px;
}

.titre_pro {
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	align-items:flex-end;
	font-family: "DM Serif Display", sans-serif;
	font-size: 50px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.proH{ /*div du haut*/
	width: 90%;
	height: 500px;
	display: flex;
	justify-content:center;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	gap: 60px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pro1{
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pro2{
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pro3{
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pro4{
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.proB{ /*div du haut*/
	width: 90%;
	height: 500px;
	display: flex;
	justify-content:center;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	gap: 60px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pro5{
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pro6{
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pro7{
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/*------------------------------PROJETS--------------------------------*/

.Page_projet{
	display: flex;
	width: 100%;
	height: 1000px;
	justify-content:center;
	flex-direction: column;
	color:#e1f8f5;
	font-family: "DM Serif Display", serif;
	background-color: #92acff;
}

/*------------------------------------------------------------------------*/

.Page_certification{	/*CERTIFICATION*/
	display: flex;
	width: 100%;
	height: 1000px;
	flex-direction: column;
	align-items:flex-start;
	color:#0e0929;
	font-family: "DM Serif Display", serif;
	background-color: #FFFFF0;
	gap: 2%; /*séparateur*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	
}

.certif_titre{
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	align-items:center;
	font-family: "DM Serif Display", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.certif_cont{
	width: 100%;
	height: 500px;
	display: flex;
	justify-content:center;
	align-items:center;
	gap: 10%; /*séparateur*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.certif1 {
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.certif2 {
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.certif3 {
	width: 20%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/*-------------------------------VEILLE----------------------------*/

.Page_veille{
	display: flex;
	width: 100%;
	height: 2000px;
	justify-content:center;
	flex-direction: column;
	color:#e1f8f5;
	font-family: "DM Serif Display", serif;
	background-color: #0e0929;
}

.veille_titre{	/*ceci touche uniquement le texte pas le background-color : teste div*/
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	align-items:center;
	font-family: "DM Serif Display", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	background-color: #FFFFF0;
}

.veille_cont{
	width: 100%;
	height: 1900px;
	display: flex;
	align-items:center;
	flex-direction: column;
	gap: 30px; /*séparateur*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.veille_techno{
	width: 95%;
	height: 700px;
	display: flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	gap: 20px;
}

.titre_techno {
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	align-items:flex-end;
	font-family: "DM Serif Display", sans-serif;
	font-size: 50px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.technoH {
	width: 100%;
	height: 500px;
	display: flex;
	justify-content:center;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	gap: 60px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.techno1{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.techno2{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.techno3{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.techno4{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.techno5{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
 
/*-----------------------------------Veille Juridique---------------------*/

.veille_juri{
	width: 95%;
	height: 700px;
	display: flex;
	justify-content:center;
	align-items:center;
	flex-direction: column;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	gap: 20px;
}

.titre_juri {
	width: 100%;
	height: 200px;
	display: flex;
	justify-content:center;
	align-items:flex-end;
	font-family: "DM Serif Display", sans-serif;
	font-size: 50px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.juriB { /*--------changer la disposition--------*/
	width: 100%;
	height: 500px;
	display: flex;
	justify-content:center;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	align-items:center;
	gap: 60px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.juri1{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.juri2{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.juri3{
	width: 30%;
	height: 400px;
	display: flex;
	justify-content:center;
	color:#0e0929;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #92acff;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/*------------------------------------------------------------------------*/

.Page_compétences{	/*COMPETENCES*/
	display: flex;
	width: 100%;
	height: 1000px;
	justify-content:center;
	flex-direction: column;
	color:#e1f8f5;
	font-family: "DM Serif Display", serif;
	background-color: #0e0929;
}

/*------------------------------------------------------------------------*/

.Page_contact{	/*CONTACT*/
	display: flex;
	width: 100%;
	height: 200px;
	justify-content:center;
	flex-direction: column;
	color:#0e0929;
	font-family: "DM Serif Display", serif;
	background-color: #FFFFF0;
}

.contact_cont{
	width: 100%;
	height: 500px;
	display: flex;
	justify-content:center;
	align-items:center;
	gap: 15%; /*séparateur*/
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.contact1 {
	width: 20%;
	height: 150px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.contact2 {
	width: 20%;
	height: 150px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.contact3 {
	width: 20%;
	height: 150px;
	display: flex;
	justify-content:center;
	color:#FFFFF0;
	font-family: "DM Sans", sans-serif;
	font-size: 30px; /*le texte, mais permet aussi de réduire la div également*/
	background-color: #0e0929;
	align-items:center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ================= RESPONSIVE ================= */

/* Empêche les débordements horizontaux */
html, body {
	overflow-x: hidden;
}

/* Images adaptables */
img {
	max-width: 100%;
	height: auto;
}

/* Tablette */
@media screen and (max-width: 1024px) {

	.navbar {
		width: 100%;
		padding: 0 20px;
	}

	.logo {
		font-size: 1.2rem;
	}

	.nav-links {
		gap: 10px;
		font-size: 1rem;
	}

	.titre_principal h1 {
		width: 100%;
		font-size: 900%;
	}

	.titre_principal p {
		width: 100%;
		font-size: 250%;
	}

	.scoB,
	.proH,
	.proB,
	.technoH,
	.juriB,
	.certif_cont,
	.contact_cont {
		flex-wrap: wrap;
		height: auto;
		padding: 30px 0;
	}

	.scolaire1,
	.scolaire2,
	.scolaire3,
	.scolaire4,
	.scolaire5,
	.pro1,
	.pro2,
	.pro3,
	.pro4,
	.pro5,
	.pro6,
	.pro7,
	.techno1,
	.techno2,
	.techno3,
	.techno4,
	.techno5,
	.juri1,
	.juri2,
	.juri3,
	.certif1,
	.certif2,
	.certif3,
	.contact1,
	.contact2,
	.contact3 {
		width: 40%;
	}
}

/* Téléphone */
@media screen and (max-width: 768px) {

	.menu {
		height: auto;
	}

	.navbar {
		flex-direction: column;
		height: auto;
		padding: 15px;
		gap: 15px;
	}

	.logo {
		font-size: 1.5rem;
		text-align: center;
	}

	.nav-links {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		font-size: 1.2rem;
	}

	.nav-links a {
		padding: 5px;
	}

	.cont_texte {
		height: 600px;
		padding: 20px;
	}

	.titre_principal h1 {
		width: 100%;
		height: auto;
		font-size: 450%;
	}

	.titre_principal p {
		width: 100%;
		height: auto;
		font-size: 180%;
	}

	.Page_profil,
	.Page_parcours,
	.Page_certification,
	.Page_veille,
	.Page_contact,
	.Page_projet,
	.Page_compétences {
		height: auto;
		min-height: 100vh;
		padding-bottom: 40px;
	}

	.profil_cont_gd {
		flex-direction: column;
		align-items: center;
		height: auto;
	}

	.profil_gauche,
	.profil_droite {
		width: 90%;
		height: auto;
		min-height: 250px;
		font-size: 20px;
		padding: 20px;
		text-align: center;
	}

	.parcours_cont,
	.veille_cont {
		height: auto;
		padding-bottom: 40px;
	}

	.parcours_scolaire,
	.parcours_pro,
	.veille_techno,
	.veille_juri {
		width: 90%;
		height: auto;
	}

	.scoB,
	.proH,
	.proB,
	.technoH,
	.juriB,
	.certif_cont,
	.contact_cont {
		flex-direction: column;
		height: auto;
		gap: 25px;
		padding: 30px 0;
	}

	.scolaire1,
	.scolaire2,
	.scolaire3,
	.scolaire4,
	.scolaire5,
	.pro1,
	.pro2,
	.pro3,
	.pro4,
	.pro5,
	.pro6,
	.pro7,
	.techno1,
	.techno2,
	.techno3,
	.techno4,
	.techno5,
	.juri1,
	.juri2,
	.juri3,
	.certif1,
	.certif2,
	.certif3,
	.contact1,
	.contact2,
	.contact3 {
		width: 85%;
		height: 250px;
		font-size: 22px;
	}

	.profil_titre,
	.parcours_titre,
	.certif_titre,
	.veille_titre {
		height: auto;
		padding: 40px 20px;
		font-size: 22px;
		text-align: center;
	}

	.titre_scolaire,
	.titre_pro,
	.titre_techno,
	.titre_juri {
		height: auto;
		padding: 30px 10px;
		font-size: 35px;
		text-align: center;
	}
}

/* solution pour les petits écrans au cas où */
@media screen and (max-width: 480px) {

	.titre_principal h1 {
		font-size: 300%;
	}

	.titre_principal p {
		font-size: 140%;
	}

	.logo {
		font-size: 1.2rem;
	}

	.nav-links {
		font-size: 1rem;
	}

	.scolaire1,
	.scolaire2,
	.scolaire3,
	.scolaire4,
	.scolaire5,
	.pro1,
	.pro2,
	.pro3,
	.pro4,
	.pro5,
	.pro6,
	.pro7,
	.techno1,
	.techno2,
	.techno3,
	.techno4,
	.techno5,
	.juri1,
	.juri2,
	.juri3,
	.certif1,
	.certif2,
	.certif3,
	.contact1,
	.contact2,
	.contact3 {
		width: 90%;
		height: 220px;
		font-size: 18px;
	}
}
html {
	scroll-behavior: smooth;
}