@import url('https://fonts.googleapis.com/css?family=Mali&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Charmonman&display=swap');
@import url('https://fonts.googleapis.com/css?family=Meddon&display=swap');
@import url('https://fonts.googleapis.com/css?family=The+Girl+Next+Door&display=swap');
@import url('https://fonts.googleapis.com/css?family=Aguafina+Script|Bilbo+Swash+Caps|Clicker+Script|Mrs+Saint+Delafield&display=swap');


html, body{
	/* Pour que le site s'étale sur tout l'écran */
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;	
}

header, nav, section, footer{
	/*width: 900px;*/
	/*margin: 0px auto;*/
	/*border: 1px solid #FAFAFA; /*#D8D8D8;*/
	background-color: #FAFAFA; /* FAFAFA */
}

body{
	background-color: #FAFAFA; /* #FBEFEF; #D0A9F5;*/
	display: table;
}

header{
	font-family: Montserrat&display;
	font-size: 20px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

header p{
	padding-left: 10px;
}

nav{
	padding-bottom: 10px;
	padding-top: 10px;
	border-top: 0px;
	border-bottom: 0px;	
	/*background-color: #FAFAFA;*/
	background-color: #6B6B6B; /*  header v2  */
	/* Gestion du dégradé */
	/*line-height: 2.5em;*/
	padding-bottom: 15px;
	/*background-image: linear-gradient(red 1%, blue 99%);*/
	background: linear-gradient(180deg, #6B6B6B, #6B6B6B 85%, #FAFAFA);
}

nav a{
	font-size: 22px;
	font-family: Mali;
	color: #000000;
	text-decoration: none;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;	
}

nav a:hover{
	color: #F78181; /* Pour la couleur orange rosée */
}


footer{
	font-family: Mali;
	font-size: 14px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	display: table-row;
	height: 35px;
}

/* -------------------------------------------------------- */
/* --------------------- LES CLASSES ---------------------- */
/* -------------------------------------------------------- */

.mll_header{
	float: right;
	padding-right: 10px;
	font-family: Montserrat&display;
}

/* Classe pour l'image du tableau sur la page d'accueil */
.img_accueil{
	margin-top: 40px;
	margin-bottom: 10px;
	max-width : 500px;
	max-height: 400px;
}

.img_rubrique_paysages{
	width: 139px;
	max-height: 177px;
	margin-top: 50px;
	margin-left: 20px;
	margin-right: 20px;
}

.img_rubrique_nm{
	width: 133px;
	margin-top: 50px;
	margin-left: 20px;
	margin-right: 20px;
}

.img_rubrique_mv{
	width: 133px;
	margin-top: 50px;
	margin-left: 20px;
	margin-right: 20px;
}

.img_rubrique_sv{
	/*width: 19%;*/
	width: 140px;
	height: 180px;
	margin-top: 50px;
	margin-left: 20px;
	margin-right: 20px;
}

.texte_rubrique_paysages{
	font-family: Mali;
	padding-left: 20px;
}
.texte_rubrique_nm{
	font-family: Mali;
	padding-left: 77px;
}
.texte_rubrique_mv{
	font-family: Mali;
	padding-left: 49px;
}
.texte_rubrique_sv{
	font-family: Mali;
	padding-left: 59px;
}

.texte_paysages{
	padding-left: 20px;
	font-size: 40px;
}

.miniature_paysages{
	max-width: 15%;
	max-height: 150px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	/*border: 2px solid #EEDFDC;*/
	padding: 5px 5px;
}

/* Affichage d'une toile en grand */
.grande_toile{
	max-width : 600px;
	max-height: 500px;
	margin-top: 30px;
	margin-bottom: 30px;
	/*border: 2px solid #EEDFDC;
	padding: 10px 10px;*/
}

.lien_sans_couleur{
	text-decoration: none; 
	color: white; /*par exemple*/ 
}

/* Classe utilisée pour retirer la couleur bleue et le soulignage des liens */
.lien{
	border: none;
	text-decoration: none;
	color: #424242;	
}

a:hover.lien{
	color: #F78181;	
}

/* Pour les liens des flèches permettant de modifier l'ordre d'une toile (page admin) */
.lien_ordre{
	border: none;
	text-decoration: none;
	color: #ff0000;	
	font-size: 25px;
}

a:hover.lien_ordre{
	color: /*#F78181*/ #fafafa;	
	background-color: #ff0000;
	/*font-size: 23px;*/
	border-radius: 8px;
}

/* Pour le bouton retour sur la page d'une toile */
.lien_retour{
	border: none;
	text-decoration: none;
	color: #F78181;	
}

a:hover.lien_retour{
	font-weight: bold;
	font-style: underline;
}

.infos_toile{
	font-family: Mali;
	font-style: italic;
	font-weight: bold;
	margin-bottom: 30px;	
}

.infos_toile_secondaires{
	font-family: Mali;
	font-style: italic;
	margin-bottom: 30px;	
}

.fleches_defilement{
	font-family: Times;
	font-size: 27px;
	margin-bottom: 30px;
	margin-left: 10px;
	font-weight: bold;
	color: #F78181;
}

.lien_fleches{
	border: none;
	text-decoration: none;
	color: #F78181;	
}

a:hover.lien_fleches{
	color: #000000;
}

.bouton_retour{
	font-family: Mali;
	font-size: 20px;
	color: #F78181;
	margin-left: 70px;
	margin-right: 70px;	
}

.ordre{
	margin-left: 0px;
	font-size: 20px;
	color: #FF0000;
}

.miniature_admin{
	max-width: 15%;
	max-height: 150px;
	margin-top: 20px;
	margin-bottom: -5px;
	margin-left: 20px;
	margin-right: 20px;
	/*border: 2px solid #EEDFDC;*/
	padding: 5px 5px;
}

.menu{
	display: inline;
	text-align: center;
	margin-left: 430px;
	float: right;
}

.couleur_texte_menu{
	color: #FAFAFA; /* header v2 */
}

.titre_site{
	/*font-family: 'Meddon', cursive;*/
	font-size: 25px;
	color: #fafafa; /* header v2 */
	margin-left: 10px; 
	
	text-align: left;
	/*font-family: 'The Girl Next Door', cursive;
	font-family: 'Aguafina Script', cursive;
	font-family: 'Clicker Script', cursive;
	font-family: 'Mrs Saint Delafield', cursive;*/
	/*font-family: 'Bilbo Swash Caps', cursive;*/
}

.lien_en_cours{
	color: #F78181;
	/*color: #FAFAFA;*/
}

.texte_apropos{
	font-family: Mali;
	width: 600px;
	text-align: justify;
	margin-left: 200px;
	margin-right: 200px;
	margin-top: 30px;
	margin-bottom: 30px;
	display: middle;
}

.texte_formulaire{
	font-family: Mali;
	font-size: 15px;
	/*font-weight: bold;*/
}

.texte_footer{
	font-size: 15px;
	position: absolute;
	display: inline;
}

.mll_footer{
	float: right;
	padding-right: 20px;
	font-family: Mali;
	font-size: 22px;
	padding-bottom: 0px;
}

.titre_page_admin{
	padding-bottom: 10px;
	padding-top: 10px;
	border-top: 0px;
	border-bottom: 0px;	
	/*background-color: #FAFAFA;*/
	background-color: #6B6B6B; /*  header v2  */
	font-family: Mali;
	color: #FAFAFA;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	/*border-bottom: 3px solid #F78181;*/
}

.iframe{
	width: 440px;
	height: 200px;
	border: 1px solid #999;
	font-family: Mali;
}

/* Pour le formulaire de la page Contact */
/*
form#formulaire_contact label {display: inline-block; width: 70px; padding-left: 0px;}
form#formulaire_contact input {display: inline-block;}
form#formulaire_contact label[for=email_confirme] {width: 160px;}
form#formulaire_contact input[id=email_confirme] {margin-right: 90px;}
form#formulaire_contact input[type=submit] {color: #fafafa; background-color: #6B6B6B; border: 0px; padding: 5px 7px; font-family: Mali; font-size: 16px; border-radius: 3px;}
form#formulaire_contact input[type=submit]:hover {color: #6B6B6B; background-color: #F78181;}
*/

.titre_page_contact{
	font-family: Mali;
	/*padding-top: 30px;*/
	font-size: 25px;
	color: #ffc800;
	width: 100%;
	font-weight: bold;
}

/* Formulaire de contact responsive trouvé sur internet : https://codepen.io/Zonecss/pen/WJwJqZ */
/*body {font-family: Arial, Helvetica, sans-serif;
  padding: 0px;}*/

form#formulaire_contact input[type=text], textarea, input[type=email], input[type=email_confirme], input[type=objet] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  /*margin-bottom: 16px;*/
  margin-right: 0px;
  margin-left: 0px;
  resize: vertical;
  font-family: Courier New;
}
form#formulaire_contact label{margin-right: 0px;
  margin-left: 0px;
  width: 100%;}

form#formulaire_contact input[type=submit] {
  background-color: #1255a2;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form#formulaire_contact input[type=submit]:hover {
  background-color: #1872D9;
}

.container {
  /* Ajouter box-sizing */
  box-sizing : border-box;
  border-radius:5px;
  background-color:#f2f2f2;
  padding:20px;
  width: 90%;
  /* redéfinition 400 + 2*20 */
  max-width: 440px;
  margin:0 auto;
}

.container_a_propos {
  /* Ajouter box-sizing */
  box-sizing : border-box;
  border-radius:5px;
  background-color:#f2f2f2;
  padding:20px;
  width: 90%;
  /* redéfinition 400 + 2*20 */
  max-width: 700px;
  margin:0 auto;
    margin-top: 20px;
}

/* Classe pour le message de confirmation de l'envoi correct du formulaire de contact */
.container_msg_confirmation{
  /* Ajouter box-sizing */
  box-sizing : border-box;
  border-radius:5px;
  background-color:#CEF6CE;
  padding:20px;
  width: 90%;
  /* redéfinition 400 + 2*20 */
  max-width: 440px;
  margin:0 auto;
  text-align : center;
  font-family: Mali;
  color: #6b6b6b;
}

/* Classe pour le message d'erreur envoi formulaire de contact */
.container_msg_ko{
  /* Ajouter box-sizing */
  box-sizing : border-box;
  border-radius:5px; 
  background-color:#F5A9A9;
  padding:20px;
  width: 90%;
  /* redéfinition 400 + 2*20 */
  max-width: 440px;
  margin:0 auto;
  text-align : center;
  font-family: Mali;
  color: #6b6b6b;
}


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


/* Pour le formulaire d'ajout de toile (page admin) */
form#ajout_toile label {display: inline-block; width: 80px; padding-left: 0px;}
form#ajout_toile input {display: inline-block;}
form#ajout_toile input[type=submit] {color: #fafafa; background-color: #6B6B6B; border: 0px; padding: 5px 7px; font-family: Mali; font-size: 16px; border-radius: 3px;}
form#ajout_toile input[type=submit]:hover {color: #6B6B6B; background-color: #F78181;}
form#ajout_toile select[id=rubrique] {margin-right: 45px;}
form#ajout_toile label[for=rubrique] {padding-right: 15px;}
form#ajout_toile label[for=support] {padding-right: 15px;}
form#ajout_toile input[id=support] {margin-right: 15px;}
form#ajout_toile label[for=dimensions] {padding-right: 15px;}
form#ajout_toile input[id=dimensions] {margin-right: 15px;}
form#ajout_toile input[id=envoi_fichier] {margin-left: 0px;}
form#ajout_toile label[for=envoi_fichier] {padding-left: 10px; width: 150px;}

/* Pour le formulaire Connexion page Admin */
form#form_connexion_admin label[for=pseudo] {margin-right: 0px; margin-bottom: 5px;}
form#form_connexion_admin input[id=pseudo] {margin-left: 37px; margin-bottom: 5px;}
form#form_connexion_admin label[for=pass] {padding-right: 30px;}
form#form_connexion_admin input[id=pass] {margin-right: 30px;}



.message_connexion{
	font-family: Mali;
	font-size: 20px;
	margin-top: 10px;
	color: red;
}

.message_connexion_ok{
	font-family: Mali;
	font-size: 20px;
	margin-top: 10px;
	color: #34C924;
}

.msg_ok{
	font-family: Mali;
	font-size: 20px;
	margin-top: 10px;
	color: #34C924;
	text-align: center;
}

.msg_ko{
	font-family: Mali;
	font-size: 20px;
	margin-top: 10px;
	color: red;
}

.texte_actuel{
	border: 2px solid #6B6B6B;
	padding: 10px;
}

.boutons_admin{
	color: #fafafa; background-color: #6B6B6B; border: 0px; font-family: Mali; font-size: 15px; 
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	text-decoration: none;
	margin-right: 5px;
	padding-left: 2px;
	padding-right: 4px;
	padding-bottom: 3px;
}

.boutons_admin:hover{
	color: #6B6B6B; background-color: #F78181;
	border-top: 3px solid #fafafa;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	/*border-style: dashed;*/
}

.lien_sans_bleu{
	text-decoration: none;
	color: #4198D3;
}

.lien_sans_bleu:hover{
	color: #fafafa;
	background-color: #4198D3;
	padding: 0px;
	border-radius: 3px;
}

.lien_sans_bleu_confirme{
	text-decoration: none;
	color: #4198D3;
	font-size: 20px;
}

.lien_sans_bleu_confirme:hover{
	color: #fafafa;
	background-color: #4198D3;
	padding: 0px;
	border-radius: 3px;
}

/* Pour les caractères de séparation, page admin, gestion des toiles, pour séparer les actions pour une toile */
.separation{
	color: #6B6B6B;
}

.nom_toile_liste{
	color: #fafafa;
	background-color: #F78181;
	border-radius: 7px;
	padding: 2px;
}

.lien_retour_admin{
	text-decoration: none; color: #fafafa; background-color: #6B6B6B; padding: 3px; border-radius: 3px;
	padding-left: 5px;
	padding-right: 5px;
}

.lien_retour_admin:hover{
	color: #6B6B6B;
	background-color: #F78181;
}

.titre_rubriques_galleries{
	width: 250px;
	font-family: Mali;
	text-align: center;
	/*margin-top: 5px;*/
	margin-bottom: 10px;
	font-size: 18px;
	color: #fafafa;
	/*text-decoration: underline;
	font-style: italic;*/
	/*border-bottom: 2px solid #6B6B6B;*/
	padding-bottom: 3px;
	padding-top: 1px;
	background-color: #F78181;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	border-top: 2px solid #fafafa;
	margin-top: -5px;
	/*background: linear-gradient(180deg, #F78181, #F78181 90%, #FAFAFA);*/
	margin-left: auto;
    margin-right: auto;
}

.signature_mll{
	font-family: Mali;
	font-size: 25px;
	text-align: center;
	padding-left: 500px;
	font-style: italic;
	padding-top: 40px;
}

.img_accueil{
	max-width : 700px; max-height : 600px; padding-top: 30px; padding-bottom: 50px;
}

/* Pour aligner les images de rubriques sur la page tableaux.php */
.inline-block{
	display: inline-block;
	font-family: Mali;
	font-size: 14px;
	font-weight: bold;
}

.centrage_page_contact{
	color: red;
}








/* ------------------------------------------------------------------- */
/* ----------------------- GESTION DU RESPONSIVE --------------------- */
/* ------------------------------------------------------------------- */


/* --------------------------------------  */
/* Responsive pour mobile avec écrans de petite taille */
/* --------------------------------------- */
@media all and (max-width: 421px)
{
	.img_accueil{max-width : 450px; max-height : 350px; }
	nav a{font-size: 18px; color: #ff0000;}
	a[href="home.php"] { margin-left: auto; margin-right: auto; display: block ; width: 300px; }
	.menu{ padding-bottom: 10px; text-align: center; margin-right: auto; margin-left: auto; display: block; width: 300px; color: #ff0000; float: none; }
	/*.couleur_texte_menu{color: #00ff00; }*/
	.titre_site{text-align: center; padding-top: 0px; margin-left: 0px;display: block; margin-left: auto; margin-right: auto; margin-bottom: -5px;}
	.texte_apropos{width: 300px;margin-left: 0px;margin-right: 0px;margin-top: 30px;margin-bottom: 0px;display: middle;}
	.signature_mll{display: none;}
	
	.texte_rubrique_nm{position: absolute;top: 330px; left: 225px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	.texte_rubrique_mv{position: absolute;top: 565px; left: 45px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	.texte_rubrique_sv{position: absolute;top: 565px; left: 225px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	.texte_rubrique_paysages{position: absolute;top: 330px; left: 70px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	
	.grande_toile{max-width : 350px;max-height: 400px;margin-top: 30px;margin-bottom: 30px;}
	.miniature_paysages{max-width: 25%;max-height: 80px;margin-top: 10px;margin-bottom: 10px;margin-left: 10px;margin-right: 10px;padding: 5px 5px;}
	/*form#formulaire_contact textarea {max-width: 50%;}
	form#formulaire_contact label[for=email_confirme] {width: 100px;}
	form#formulaire_contact input[id=email_confirme] {margin-right: 28px;}*/

}	


/* ----------------------  */
/* Responsive pour mobile */
/* ------------------------ */
@media all and (max-width: 480px)
{
	.img_accueil{max-width : 450px; max-height : 350px; }
	nav a{font-size: 18px; color: #ff0000;}
	/*titre_site{margin-left: auto; margin-right: auto; display: block ; width: 100px; color: red;}*/
	a[href="home.php"] { margin-left: auto; margin-right: auto; display: block ; width: 300px; }
	.menu{ padding-bottom: 10px; text-align: center; margin-right: auto; margin-left: auto; display: block; width: 300px; color: #ff0000; float: none; }
	/*.couleur_texte_menu{color: #00ff00; }*/
	.titre_site{text-align: center; padding-top: 0px; margin-left: 0px;display: block; margin-left: auto; margin-right: auto; margin-bottom: -5px;}
	.texte_apropos{width: 300px;margin-left: 0px;margin-right: 0px;margin-top: 30px;margin-bottom: 0px;display: middle;}
	.signature_mll{display: none;}
	
	.texte_rubrique_nm{position: absolute;top: 530px; left: 125px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	.texte_rubrique_mv{position: absolute;top: 565px; left: 45px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	.texte_rubrique_sv{position: absolute;top: 565px; left: 225px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	.texte_rubrique_paysages{position: absolute;top: 330px; left: 70px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}
	
	.grande_toile{max-width : 350px;max-height: 400px;margin-top: 30px;margin-bottom: 30px;}
	.miniature_paysages{max-width: 15%;max-height: 80px;margin-top: 10px;margin-bottom: 10px;margin-left: 10px;margin-right: 10px;padding: 5px 5px;}
	/*form#formulaire_contact textarea {max-width: 50%;}
	form#formulaire_contact label[for=email_confirme] {width: 100px;}
	form#formulaire_contact input[id=email_confirme] {margin-right: 28px;}*/

}
	


/* ------------------------  */
/* Responsive pour tablettes */
/* ------------------------  */
@media (min-width: 480px) and (max-width: 780px)
{
	.img_accueil{
		max-width : 400px; max-height : 300px;
	}
	nav a{font-size: 18px; color: #ff0000;}
	.menu{ margin-left: 0px; color: #ff0000; }
	.signature_mll{display: none;}
}
/* ------------------------  */
/* Responsive pour tablettes */
/* ------------------------  */
@media (min-width: 781px) and (max-width: 979px)
{
	.img_accueil{max-width : 500px; max-height : 400px;}
	nav a{font-size: 18px; color: #ff0000;}
	.menu{ margin-left: 0px; color: #ff0000; }
	.signature_mll{display: none;}
}

/* -----------------------------------------------  */
/* Responsive pour ordis portables (par ex le mien) */
/* -----------------------------------------------  */
@media (min-width: 980px) and (max-width: 1100px)
{
	.img_accueil{
		max-width : 500px; max-height : 400px;
	}
	.texte_footer{
		font-size: 12px;
	}
	.mll_footer{		
		font-size: 17px;
	}
	nav a{font-size: 18px; color: #ff0000;}
	.menu{ margin-left: 0px; color: #ff0000; }
	.signature_mll{display: none;}
}