@charset "UTF-8";
/* CSS Document */




#home {
	padding: 0; margin: 0;
}




#frame {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 910px;
	position: relative;
	
}



#header { 
	padding: 0; 
	margin: 0; 
	height:200px; 
	width: 910px; 
	text-align: center; 
	font-family: 'Varela Round', sans-serif, Arial, Helvetica, Verdana; 
	font-size: 23px; 
	float: left; 
	color: #f8ee81 !important;
	background-color: coral;
}



#photographie { 
	padding-top: 50px; 
	padding-right: 0px; 
	padding-bottom: 20px; 
	padding-left: 0px; 
	margin: 0; 
	width: 910px; 
color:#000000!important;
	font-family: 'Varela Round', sans-serif, Arial, Helvetica, Verdana; 
	text-align: center; 
	display:block; } 


#myname { 
	padding: 0; 
	margin: 0; 
	width: 910px; 
	font-size: 22px; 
	text-align: center; 
	font-family: 'Varela Round', sans-serif, Arial, Helvetica, Verdana;
	 color:#000000!important;
}

















	


#liste {
	padding: 0; margin: 0;
	clip: rect(0px,0px,0px,0px);
	display: inline;
	width: 910px;
	float: left;

}




.menu{
    text-align:center;
}

.menuitem{
    vertical-align: top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin-top: 17px;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 15px;
	font-size: 12px;
	font-style: normal;
	text-decoration: none;
	font-weight: normal;
	width: 910px;
	display: inline;
	list-style: none; /* nécessaire pour IE7 */
	letter-spacing: 1pt;
}






#text-about {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: justify;
	}







#text-about-formation {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}





#trait 
{ 
border-bottom: 1px solid #ff0066; 
width : 800px; 
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;	

} 

#diaporama-photo {
	/* position absolute : */
	position:relative;
	RIGHT: 0px;
	BOTTOM: 0px;
	/* styles, widths and border : */
	PADDING: 0px;
	MARGIN: 0px;
	WIDTH: 910px;
	BACKGROUND-COLOR: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	LETTER-SPACING: 0.1em;
	font-size: 16px;
	float: left;
	text-align: center; 
}





#titre {
	PADDING-LEFT: 0px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 16px;
	FLOAT: left;
	WIDTH: 910px;
	COLOR: #333333;
	PADDING-TOP: 30px;
	padding-bottom: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	LETTER-SPACING: 0.1em;
	TEXT-DECORATION: none
}




#titre-precision {
	PADDING-LEFT: 0px;
	FONT-WEIGHT: normal;
	FONT-SIZE: 16px;
	FLOAT: left;
	WIDTH: 910px;
	COLOR: #000000;
	PADDING-TOP: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
	padding-bottom: 0px;
}


#photo {
	CLEAR: none;
	FONT-WEIGHT: lighter;
	FONT-SIZE: 12px;
	FLOAT: left;
	WIDTH: 910px;
	COLOR: #999966;
	PADDING-TOP: 10px;
	LETTER-SPACING: 0.1em;
	TEXT-DECORATION: none;
	margin: 0px;
	padding-bottom: 15px;
}






#photo2 {
  display: flex;
  flex-direction: column; /* chaque div sur une ligne */
  gap: 20px; /* espace entre les lignes */
  align-items: center; /* centre horizontalement chaque div */
}

#photo2 > div {
  display: flex;
  flex-wrap: wrap; /* permet que les images passent à la ligne si petit écran */
  justify-content: center; /* centre les images dans le div */
  gap: 10px; /* espace entre images */
}

#photo2 a {
  display: block;
}


/* Desktop */
#photo2 img {
  width: 298px;
}

/* Tablette */
@media (max-width: 992px) {
  #photo2 img {
    width: 48%;
  }
}

/* Mobile */
@media (max-width: 600px) {
  #photo2 img {
    width: 100%;
  }
}





















#photo3 {
	CLEAR: none;
	FONT-WEIGHT: lighter;
	FONT-SIZE: 12px;
	WIDTH: 910px;
	COLOR: #999966;
	PADDING-TOP: 10px;
	LETTER-SPACING: 0.1em;
	TEXT-DECORATION: none;
	margin: 0px;
	padding-bottom: 15px;		
}

#photo3 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}






#photobio {
  float: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
	






#bio {
  float: none;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}




	
#contact {
	CLEAR: none;
	FONT-WEIGHT: normal;
	FONT-SIZE: 16px;
	FLOAT: right;
	WIDTH: 510px;
	PADDING-TOP: 0px;
	padding-right: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	COLOR: #000000;
	LETTER-SPACING: 0.1em;
	TEXT-DECORATION: none;
	margin: 0px;
	padding-bottom: 20px;
	text-align: center;
}	


#insta {
	CLEAR: none;
	FONT-WEIGHT: normal;
	FONT-SIZE: 12px;
	
	WIDTH: 510px;
	PADDING-TOP: 0px;
	padding-right: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	COLOR: #000000;
	LETTER-SPACING: 0.1em;
	TEXT-DECORATION: none;
	margin: 0px;
	padding-bottom: 40px;
}	
	

#faq {
	CLEAR: none;
	FONT-WEIGHT: normal;
	FONT-SIZE: 12px;
	FLOAT: right;
	WIDTH: 750px;
	PADDING-TOP: 20px;
	padding-left: 0px;
	padding-right: 80px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	COLOR: #000000;
	LETTER-SPACING: 0.1em;
	TEXT-DECORATION: none;
	margin: 0px;
	padding-bottom: 20px;
}	
















/* ==== BASE RESPONSIVE ajoute par Pask en dec 2025 pr gsm et tablettes==== */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* On enlève les largeurs fixes */
#frame,
#header,
#photographie,
#myname,
#mail,
#instagram,
#copyright,
#liste,
#diaporama-photo,
#titre,
#titre-precision,
#photo {
  width: 100%;
}
#photo2 {
  width: 100%;
}



/* ==== GALERIE PHOTO pour 1 photo par ligne et 2 par ligne pour tablettes==== */

#photo > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#photo a {
  display: block;
}

/* Desktop */
#photo img {
  width: 298px;
}







/* Tablette */
@media (max-width: 992px) {
  #photo img {
    width: 48%;
  }
}

@media (max-width: 992px) {
  #photo2 img {
    width: 48%;
  }
}


/* Mobile */
@media (max-width: 600px) {
  #photo img {
    width: 100%;
  }
}


@media (max-width: 600px) {
  #photo2 img {
    width: 100%;
  }
}


/* ==== MENU lisible sur gsm et tablettes ==== */

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.menuitem {
  width: auto;
}

/* Mobile */
@media (max-width: 600px) {
  .menu {
    flex-direction: column;
    align-items: center;
  }

  .menuitem {
    margin: 10px 0;
    font-size: 14px;
  }
}





/* ==== AJUSTEMENT TYPO MOBILE pour gsm et tablettes ==== */

@media (max-width: 600px) {
  #photographie {
    font-size: 22px;
    padding-top: 20px;
  }

  #myname {
    font-size: 20px;
  }

  #titre {
    font-size: 14px;
  }

  #titre-precision {
    font-size: 13px;
  }
}






/* SUPPRESSION DES FLOATS POUR LE RESPONSIVE */
#photo, #photo2, #photobio, #bio, #contact, #insta, #faq {
  float: none !important;
  margin: 0 auto;
}

/* LARGEUR MAXIMUM ET IMAGES */
#frame, #header, #photo, #photo2, #photobio, #bio, #contact {
  width: 100% !important;
  max-width: 100%;
}

#photo img, #photobio img {
  width: 100% !important;
  height: auto !important;
}




#liste {
  clip: auto !important;
  display: block !important;
}

#photo > div {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 10px;
}
#photo a {
  display: block;
}
#photo img {
  max-width: 100% !important;
  height: auto !important;
}














/* Footer principal */
#footer { 
	padding: 0; 
	margin: 0; 
	height:560px; 
	width: 910px; 
	text-align: center; 
	font-family: 'Varela Round', sans-serif, Arial, Helvetica, Verdana; 
	font-size: 25px; 
	float: right; 
	background-color:#2A2926;
}

#footer > div {
  margin: 5px 0;            /* espace entre les éléments internes */
}

/* Si tu veux forcer la largeur maximale sur mobile/desktop */
#footer, #footer > div {
  width: 100%;
  max-width: 100%;
}



#instagram { 
	padding-top: 50px; 
	margin: 0; 
	width: 910px; 
	height:40px; 
	text-align: center; 
	font-family: 'Varela Round', sans-serif, Arial, Helvetica, Verdana; 
	font-size: 25px; 
	float: left; } 


#instagram a {
    display: inline-block;   /* pour que le lien englobe bien l'image */
    z-index: 10;             /* s'assurer qu'il est au-dessus */
    position: relative;      /* nécessaire pour que z-index fonctionne */
}

#instagram img {
    width: 40px;             /* ou la taille que tu veux */
    height: auto;
    cursor: pointer;         /* indique que c’est cliquable */
}







#copyright { 
	padding-top: 70px; 
	margin: 0; 
	width: 910px; 
	height:10px; 
	text-align: center; 
	font-family: 'Varela Round', sans-serif, Arial, Helvetica, Verdana; 
	font-size: 11px; 
	color:#ffffff!important; 
	float: left; }




#mail {
	margin: 0;
	padding-top: 80px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	width: 910px;
	font-size: 22px;
	text-align: center;
	color:#ffffff!important; 
}


#footer #mail a {
    color: #ffffff !important;
    text-decoration: none;
}
#footer #mail a:hover {
    color: #ff0066 !important; /* ou la couleur que tu souhaites au survol */
}



/* Ordinateur / desktop */
#mail a {
    font-size: 22px;
    color: #ffffff !important;
    text-decoration: none;
}

/* Tablette (max-width: 992px) */
@media (max-width: 992px) {
    #mail a {
        font-size: 18px;
    }
}

/* Smartphone (max-width: 600px) */
@media (max-width: 600px) {
    #mail a {
        font-size: 16px;
    }
}











/* Texte bio responsive pour tablettes et smartphones pour la page BIO */
@media (max-width: 992px) {
  #text-about,
  #text-about-formation {
    padding-left: 15px;
    padding-right: 15px;
  }
}



/* AJUSTEMENT HEADER COLORé POUR TABLETTES ET SMARTPHONE */

/* Tablette */
@media (max-width: 992px) {
    #header {
        height: 150px; /* réduire un peu */
    }
}

/* Smartphone */
@media (max-width: 600px) {
    #header {
        height: 130px; /* encore plus réduit */
        padding-top: 10px; /* ajuster le padding si besoin */
        padding-bottom: 10px;
    }
    
    #photographie {
        padding-top: 10px; /* ajuster le titre */
        font-size: 22px;
    }
    
    #myname {
        font-size: 20px;
    }
}