/* ---------------------------------------------------------------------------*/
/*                    Feuille de style CSS Visiteur                           */
/* ---------------------------------------------------------------------------*/



@import url(/Commun_Versions/Fonts/Roboto/Roboto.css);

/* encodage utf-8 */
@charset "utf-8";

/*      Variables css     */
:root {

  /* Codes des Couleurs */
	--beige: #fee27f;
	--blanc: #ffffff;
	--blanc_casse: #f8efd6;
	--bleu: #0000ff;
	--bleu_ciel: #6c88f4;
	--bleu_clair: #48a6df;
	--bleu_fonce: #1f386e;
	--bleu_pale: #5881c0;
	--bleu_tres_pale: #eef5ff;
	--bleu_sombre: #4c79b0;
	--blond: #f3c773;
	--brun: #cd853f;
	--creme: #ffeecc;
	--gris: #f6f6f6;
	--gris_clair: #dddddd;
	--jaune: #ffff00;
	--marron: #752000;
	--noir: #000000;
  --olive: #75742c;
  --rouge: #ff0000;
  --rose: #ffd4d4;
	--vert: #007030;
	--vert_pale: #bff8aa;
	--vert_clair: #01ae4b;
	--violet: #bd212d;

}

* {
	box-sizing: border-box;
}

html {
	margin: 0px;
	padding: 0px;
}

html {
	margin:0;
	padding:0;
	font: normal 16px 'Open Sans', sans-serif;
}

body {
	background: var(--blanc);
	font-size: calc(0.8rem + 0.4vw);
 }

body a {
	text-decoration: none;
	transition: 0.5s all;
}

#global {
	max-width: 1450px;
  margin: auto;
}

h1, h2, h3, h4, h5, h6 {
	margin:0;
}

p {
	border: 0px;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0px;
	outline: 0px;
	padding: 0px;
}

ul {
	margin: 0;
	padding: 0;
}

.align_left {
	text-align: left !important;
}

.align_center {
	text-align: center;
}

.align_right {
	text-align: right;
}

.red {
	color: var(--rouge) !important;
}

/* Animation css */
@keyframes scaleDown {
	0% { transform: scale(10,10); opacity: 0; }
	100% { transform: scale(1,1); opacity: 1; }
}

/* ---------------------------- Liste à Puces ------------------------*/

ul.puce {
	margin-left: 40px;
	padding-left: 0px;
	font-weight: 600;
}

ul.puce li {
	padding: 10px 0px 10px 5px;
	list-style-type: disc;
	line-height: 25px;
}

ul.puce li ul {
	margin: 5px 0px 0px 15px;
	padding-left: 5px;
}

ul.puce li ul li {
	list-style-type: circle;
}

/*------------------------------- Banniére du haut de page -----------*/

.banniere {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}

.titre_banniere {
	width: fit-content;
}

.titre_banniere h2 {
  color: #6680d0;
  font-size: calc(1rem + 0.6vw);
  text-transform: uppercase;
  display: inline-block;
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 10px;
  border: solid 2px #6680d0;
  line-height: 2rem;
  text-align: center;
}

.titre_banniere a {
	color: #c6c6c6;
	font-size: 1rem;
	display: block;
	text-decoration: none;
}

.titre_banniere a:hover {
	color: var(--blanc);
}

/*------------------------------- Menu Horizontal --------------------*/

.top-menu {
	margin-right: 50px !important;
}

.top-menu .navbar {
	padding-left: 1rem;
}

.navbar-expand-lg {
	background-color: var(--blanc) !important;
	border-radius: 10px;
}

.top-menu li.nav-item {
	line-height: 2.3rem;
}

.top-menu li.nav-item a, .top-menu li.nav-item span {
	display: block;
  font-size: 0.92rem;
	color: #7d7d7d;
	margin: 0 0.5rem;
	font-weight: 600;
	text-decoration: none;
	padding: 0px 1rem;
}

.top-menu ul li.active a {
	color: #4d4d4d;
	border-bottom: 2.5px solid #33d6ff;
}

.top-menu li.nav-item a:hover {
  border-bottom: 2.5px solid #797979;
  background-color: #797979;
	color: var(--blanc);
	border-radius: 10px;
}

.dropdown-item {
  border: none !important;
  background-color: #f5f5f5 !important;
  color: var(--noir) !important;
  width: 90% !important;
  margin: 5px auto !important;
  border-radius: 10px !important;
}
.dropdown-item:hover {
  background-color: #797979 !important;
	color: var(--blanc) !important;
}

/* bouton menu ecran telephone */
.navbar-toggler {
	margin-bottom: 1rem !important;
}

	/*------------------------------- Titre des Pages --------------------*/

.titre_page {
	display: block;
	background-color: var(--creme);
	color: var(--marron);
  font-size: calc(1.5rem + 0.7vw);
  font-weight: bold;
  line-height: 6rem;
  text-align: center;
  width: fit-content;
  margin: 3rem auto 7rem auto;
  padding: 0px 2rem;
  border: solid 1px var(--marron);
  border-radius: 0.5rem;
}

/*------------------------------- Titre Paragraphe -------------------*/

.titre_paragraphe {
	line-height: 4rem;
	font-size: 1.3rem;
	text-decoration: underline; /* le texte est soulignés */
}


#contenu_page {
	width: 70%;
	margin: auto;
	font-size: calc(0.5rem + 0.6vw);
}

#contenu_page h2 {
	text-decoration: underline;
}

*------------------------------- Pied de Page -----------------------*/

.footer {
	display: block;
}

.liens_pied {
	font-size: calc(0.4rem + 0.5vw);
	line-height: 3rem;
	width: 70%;
	margin: 6rem auto 2rem auto;
	text-align: center;
	text-transform: uppercase;
	background-color: #f8f9fa;
  border-radius: 15px;
}

.liens_pied a {
  display: inline-block;
  line-height: 2.2rem;
  width: fit-content;
  color: #808080;
  margin: 0px 5% 0px 5%;
  padding: 0px 0.5rem;
}

.liens_pied a:hover {
  border-bottom: 2.5px solid #797979;
  background-color: #797979;
	color: var(--blanc);
	border-radius: 10px;
}

#case_menu_pied_choisi {
	font-weight: 600;
	color: #4d4d4d;
	border-bottom: 2.5px solid #33d6ff;
}

#case_menu_pied_choisi:hover {
	color: var(--blanc);
	border: none;
}

.copyright {
	font-size: calc(0.4rem + 0.4vw);
	width: 100%;
	text-align: center;
	font-weight: 100;
  color: #808080;
	padding: 1rem 0;
}

/*-------------------- Liens vers Popup ou Page du Site --------------*/

.lien_fenetre, .lien_page {
	text-decoration: none;
	padding: 0px 5px 0px 5px;
	line-height: 30px;
	display: inline-block;
	border-radius: 10px;
}

.lien_page {
	text-align: center;
	color: var(--noir);
}

.lien_fenetre:hover, .lien_page:hover {
	background-color: #797979;
	color: var(--blanc);
}

.lien_page img, .lien_fenetre img {
	vertical-align: middle;
  padding: 5px;
}

/*----------------------------- Accueil ------------------------------*/

.tableaux_accueil {
	margin: 0px auto 4rem auto !important;
	border-color: var(--blanc) !important;
}

.tableaux_accueil img {
	border-radius: 15px;
	width: 100% !important;
  height: auto !important;
	max-width: 400px;
}

/*----------------------------- Galerie Photos -----------------------*/

.galerie {
  width: 90%;
  display: block;
  min-height: 500px;
  margin: auto;
}

.conteneur_image_galerie {
	background-color: var(--bleu_tres_pale);
  height: auto;
  width: 275px;
	padding: 1.5rem;
	border-radius: 15px;
}

.contenu_image {
	height: 260px;
  display: grid;
}

.galerie img {
  transition: 1s;
  border-radius: 0.9rem;
	margin: auto;
}

.galerie img:hover{
	filter: grayscale(0);
	transform: scale(1.1);
}

.titre_image {
  display: block;
  width: 100%;
	font-size: 1rem;
	text-transform: uppercase;
  height: 60px;
  text-align: center;
}

.description_image {
	font-family: Helvetica, Arial, sans-serif;
	font-size: min(3.3vw, 1.2rem);
	line-height: 1.75;
	min-width: 50em;
	min-height: 15em;
	padding: 20px;
	border-radius: 15px;
}

.boutons_galerie {
  padding-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.images_galerie {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2.5rem;
	padding-top: 20px;
}

.images_galerie h3 {
  margin: 50px auto;
  width: fit-content;
  padding: 3rem;
  border: 1px solid var(--noir);
  border-radius: 1rem;
}

/* Style des boutons de la galerie */
.label_btn_galerie {
  width: fit-content;
  font-weight: bold;
  margin-top: 1rem;
}

.boutons_galerie {
	padding: 1rem 2rem 3rem 0;
}

.boutons_galerie .btn {
  width: fit-content;
  border-radius: 10px;
  padding: 0.5em 1.5em;
}

.boutons_galerie .btn_galerie:hover {
  background-color: var(--gris_clair);
	color: var(--noir);
}

.boutons_galerie .btn_galerie {
  background-color: #1f1f1f;
  color: var(--blanc);
}

.boutons_galerie .btn_galerie.actived {
  background-color: var(--rouge);
  color: var(--blanc);
}

.conteneur_description {
	color: var(--marron) !important;
}

@media screen and (max-width: 880px) {
	.description_image {
		width: auto;
	}
}
		
.lien_description {
  font-size: 0.9em;
	font-weight: bolder;
  border: solid 1px var(--marron);
  border-radius: 10px;
  padding: 5px 30px;
  line-height: 30px;
  display: block;
  width: 150px;
  margin: 0px auto 10px auto;
	cursor: pointer;
}

.lien_description:hover {
	background-color: var(--gris_clair) !important;
}

.titre_description {
	font-family: "Mynerve", cursive, Helvetica, sans-serif;
	background-color: var(--creme);
  width: fit-content;
  text-align: center;
  border: solid 2px var(--marron);
	border-radius: 1rem;
  margin: 50px auto 50px auto;
  padding: 1rem 2rem;
}

.pagination_images {
	text-align: center;
	padding: 2rem 0;
	width: fit-content;
  margin: auto;
}

.pagination_images label{
	line-height: 3rem;
	color: var(--bs-primary);
}

/*----------------------------- Contact ------------------------------*/

.conteneur_formulaire {
	max-width: 400px;
	width: 100%;
	min-height: 500px;
	margin: 0px auto;
	position: relative;
}

#contact {
	background: #f7f7f7;
	padding: 1.5rem;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
	font: 400 14px/16px "Roboto", Helvetica, Arial, sans-serif;
	color: #752000;
}

#contact h3 {
	display: block;
	font-weight: 600;
	color: #1b1bca;
	margin-bottom: 30px;
	background-color: #f7f797;
	text-align: center;
	border: 1px solid black;
	border-radius: 10px;
	line-height: 80px;
}

#contact h4 {
	margin: 0.3rem 0px 1rem 0px;
	display: block;
	font-size: 0.85rem;
	font-weight: 400;
	color: #752000;
}

#contact fieldset {
	border: medium none !important;
	margin: 0px 0px 10px 0px;
	min-width: 100%;
	padding: 0px;
	width: 100%;
	text-align: center;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
	width: 100%;
	border: 1px solid #ccc;
	background: var(--blanc);
	margin: 0px 0px 5px 0px;
	padding: 0.6rem;
	border-radius: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
	transition: border-color 0.3s ease-in-out;
	border: 1px solid #aaaaaa;
}

#contact textarea {
	height: 7rem;
	max-width: 100%;
	resize: none;
}

#contact button[type="submit"] {
	font-size: 1rem;
	width: fit-content;
	border: none;
	background: #4caf50;
	color: var(--blanc);
	padding: 1rem 2rem;
	border-radius: 10px;
	cursor: pointer;
}

#contact button[type="submit"]:hover {
	background: #43a047;
	transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
	outline: 0px;
	border: 1px solid #aaaaaa;
}

input::placeholder {
	color: #888888;
}

/*---------------------------- Plan du Site --------------------------*/

#plan_site {
	margin: auto;
	width: fit-content;
	min-height: 500px;
}

#plan_site a {
	line-height: 50px;
	font-weight: 600;
}

#plan_site ul li ul {
	list-style-type: square;
	margin-left: 0px;
	padding-left: 30px;
}

/*----------------------------- Mentions Légales ---------------------*/

ul.puce_mentions {
	margin: 0.6rem 0px 0.6rem 2.5rem;
	padding: 0px 0px 0px 5px;
	font-weight: bold;
}

/*------------------------ Politique Confidentialité -----------------*/

#politique_confidentialite {
	padding: 0 1.3rem;
}

#politique_confidentialite h1 {
	font-size: 1.3rem;
	font-style: italic;
	text-decoration: underline;
	line-height: 2rem;
	margin: 3rem 0px;
	color: var(--vert);
}

#politique_confidentialite h2 {
	font-size: 1rem;
	line-height: 1.6rem;
	text-decoration: underline;
	font-style: italic;
	padding: 1rem 0 1rem 0;
}

#politique_confidentialite h3 {
	font-size: 1rem;
	font-style: italic;
	line-height: 1.3rem;
	padding: 1rem 0 1rem 2rem;
}

#politique_confidentialite p, #politique_confidentialite li{
	line-height: 1.3rem;
}

#politique_confidentialite .decalage {
	padding-left: 2rem;
}

#politique_confidentialite .decalage_2 {
	padding-left: 4rem;
}

#politique_confidentialite ul li:first-child {
	padding-top: 1rem;
}

#politique_confidentialite li ul li:first-child {
	padding-top: 1rem;
}

/*------------------------------- Pages Erreurs ----------------------*/

#contenu_page_erreur {
	display: flex;
	min-height: 550px;
}

.msg_page_erreur {
  margin: auto;
  display: flex;
  flex-direction: column;
}

.msg_page_erreur p {
	font: normal 20px Arial, Helvetica, sans-serif;
	color: var(--marron);
}

#btn_OK_page_erreur {
	margin: 100px auto 20px auto;
  width: 70px;
  line-height: 40px;
  background-color: #0000ff;
  color: var(--blanc);
}

@media (max-width: 768px) {

	.entete {
		padding-top: 2.5rem;
	}

	.top-menu ul li a {
		font-size: 1em;
		margin: 0 0.5rem;
		padding: 0 0.7rem 3rem 0.7rem;
	}

}

@media (max-width: 640px) {

	.top-menu ul li a {
		font-size: 0.55rem;
		margin: 0 0.4rem;
		padding: 0 0.7rem 2.1rem 0.7rem;
	}

	.entete {
		padding-top: 2rem;
	}

	.titre_banniere a {
		font-size: 0.8rem;
	}

	.titre_banniere h2 {
		font-size: 1.2rem;
	}

/*------------------------------- Pages Erreurs ----------------------*/

	#contenu_page_erreur {
		float: left;
		width: 100%;
		border: none;
		margin: auto;
	}

	.msg_page_erreur {
		width: 90%;
	}

}

@media (max-width:480px) {

	.entete {
		text-align: center;
	}

	.top-menu {
		float: none;
	}

	.top-menu ul li a {
		padding: 0 0.7rem 1.7rem 0.7rem;
	}

	.galerie {
		margin-top: 2rem;
	}

	.footer {
		padding: 6% 0;
	}

}

@media (max-width:320px) {

	.entete {
		text-align: left;
	}

	.titre_banniere a {
		font-size: 0.77rem;
		margin-bottom:0.5rem;
	}

	.top-menu{
		float: none;
	}

	.top-menu ul{
		display: none;
		background: #252525;
		width: 100%;
		float: right;
	}

	.top-menu ul li a{
		border-bottom:none;
		display: block;
		width: 100%;
		padding: 0;
		color: #fff;
		margin: 0;
	}

	.top-menu ul li {
		padding: 10px 0 0 0px;
		width: 100%;
		text-align: center;
	}

	.top-menu span.menu{
		display: block;
		text-align: center;
		margin: 1em 0 0.5rem 0;
		height: 23px;
	}

	.top-menu span.menu:before {
		content: url("../images/nav-icon.png") no-repeat 0px 0px;
		cursor: pointer;
		text-align:center;
	}

	.top-menu lable {
		display: none;
	}

	.top-menu ul li.active a,.top-menu ul li a:hover{
		border-bottom:none;
		color:#808080;
	}

}

@media screen and (max-width: 600px) {

  .top-menu ul li a{
		font-size:0.55rem;
	}

}