/*
	style.css
	Création: 13/05/2018
	Modification: 02/02/2023
	Camille FRONTON
*/
* {
	padding: 0px;
	margin: 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	font-size: 1.1rem;
}

body {
	word-wrap: break-word;
}

pre {
	white-space: pre-wrap;
}

/* pour firefox et les <pre> */

a {
	text-decoration: none;
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-ms-transition: background 0.5s;
	-moz-transition: background 0.5s;
}

.accueil {
	font-size: 80%;
	padding: 0.6em;
}

#laPage {
	margin-left: auto;
	margin-right: auto;
}

#hautPage {
	padding-left: 1em;
	margin-left: auto;
	margin-right: auto;
}

/*------------------------------------------*/
.contenantMenu {
	width: 100%;
}

.zoneInfosMenuHaut {
	width: 15%;
	float: left;
}

.zoneMenuHaut {
	width: 80%;
	float: right;
	background-color: #3e3a9b;
}


/*------------------------------------------*/
.contenantTitreAnime {
	width: 100%;
}

.zoneTitre {
	max-width: 236px;
	max-height: 184px;
	float: left;
}

/*------------------------------------------*/
.contenantAnime {
	width: 80%;
	float: right;
	margin: 1.5em 0 0 0;
}

.zoneAnimage {
	width: 90%;
	height: 120px;
	margin: 0.3em auto 0.3em auto;
	display: block;
	overflow: hidden;
}

.cadreDiapo {
	width: 90%;
	height: 120px;
	position: relative;
	margin: 0 auto;
}

.zoneDiaporama {
	width: 100%;
	height: 120px;
	padding: 0.5em;
}

.zoneDiaporama ul#diaporama {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 120px;
}

.zoneDiaporama ul#diaporama li.lesImages {
	padding: 0;
	margin: 0;
}

.zoneDiaporama ul#diaporama li.lesImages img {
	width: 768px;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
}

.zoneDiaporama ul#diaporama li.lesImages .legende {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	padding: 10px;
	margin: 0;
	border-top: 1px solid rgb(225, 225, 225);
	text-align: center;
	letter-spacing: 0.07em;
	word-spacing: 0.07em;
	font-family: Georgia, Times, serif;
	font-size: 75%;
	background: #fff;
	background: rgba(255, 255, 255, 0.62);
	color: #322e2e;
	text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5);
}

.zoneDiaporama ul#diaporama li.lesImages .legende {
	/* ... la propriété animation */
	animation: figcaptionner 10s infinite;
}

/* animation du bandeau */
@keyframes figcaptionner {

	0%,
	56%,
	72%,
	100% {
		bottom: -55px;
	}

	8%,
	48%,
	88%,
	95% {
		bottom: 5px;
	}
}

@-webkit-keyframes figcaptionner {

	0%,
	56%,
	72%,
	100% {
		bottom: -55px;
	}

	8%,
	48%,
	88%,
	95% {
		bottom: 5px;
	}
}

@-moz-keyframes figcaptionner {

	0%,
	56%,
	72%,
	100% {
		bottom: -55px;
	}

	/* 0%, 46%, 62%, 78%, 100% */
	8%,
	48%,
	88%,
	95% {
		bottom: 5px;
	}

	/* 15%, 28%, 36%, 52%, 82%, 95% */
}

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

#leMilieu {
	padding: 1em;
}

.stylelateralDroit {
	width: 27%;
	float: right;
	padding: 1em;
	min-height: 200px;
	height: auto;
}

.stylelateralGauche {
	width: 70%;
	float: left;
	padding: 1em;
	min-height: 200px;
	height: auto;
}

.zonelePied {
	padding: 1.5em;
	font-size: 60%;
}

.zonelePied a {
	padding: 0.2em;
	display: inline-block;
	text-decoration: none;
}

.zonelePied a:link {
	border-bottom: 1px dashed #538c54;
	line-height: 16px;
}

.zonelePied a:hover {
	border-bottom: 1px solid #60d763;
	line-height: 16px;
	box-shadow: 1px 1px 8px #848f86;
	-ms-box-shadow: 1px 1px 8px #848f86;
	-moz-box-shadow: 1px 1px 8px #848f86;
	-webkit-box-shadow: 1px 1px 8px #848f86;
}

.zonePiedDefaut {
	padding: 1.5em;
	font-size: 60%;
}

.zonePiedDefaut a {
	padding: 0.2em;
	display: inline-block;
	text-decoration: none;
}

.zonePiedDefaut a:link,
.zonePiedDefaut a:visited {
	border-bottom: 1px dotted #538c54;
	line-height: 16px;
}

.zonePiedDefaut a:hover {
	border-bottom: 1px solid #60d763;
	line-height: 16px;
	box-shadow: 1px 1px 8px #848f86;
	-ms-box-shadow: 1px 1px 8px #848f86;
	-moz-box-shadow: 1px 1px 8px #848f86;
	-webkit-box-shadow: 1px 1px 8px #848f86;
}

/*------------------------------------------------------------------*/
.conteneurAccesAdmin {
	width: 80%;
	margin: 0.9em auto;
}

.accesAdmin {
	font-size: 75%;
	padding: 0.4em;
	border: 1px solid #edf3dd;
	text-align: center;
}

.accesAdmin h3 {
	font-size: 95%;
}

.accesAdmin a {
	display: inline-block;
	font-size: 90%;
	font-weight: bold;
	padding: 0.4em;
	border: 2px solid #5f73fe;
	text-align: center;
	border-radius: 0.3em;
	-ms-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
}

.accesAdmin a:link,
.accesAdmin a:visited {
	color: #2e377d;
	background-color: #e4e7ff;
	text-shadow: 0.05em 0.08em 0.13em #868393;
	box-shadow: 2px 2px 3px #394f5a;
	-ms-box-shadow: 2px 2px 3px #394f5a;
	-moz-box-shadow: 2px 2px 3px #394f5a;
	-webkit-box-shadow: 2px 2px 3px #394f5a;
}

.accesAdmin a:hover {
	color: #e4e7ff;
	background-color: #7f8cf9;
	box-shadow: inset 2px 2px 0.5em #101858;
	-webkit-box-shadow: inset 2px 2px 0.5em #101858;
	-moz-box-shadow: inset 2px 2px 0.5em #101858;
	text-shadow: 0.2em 0.2em 0.2em #070c33;
	-ms-box-shadow: inset 2px 2px 0.5em #101858;
}

/*------------------------------------------------------------------*/
.conteneurFetesLiturgiques {
	width: 80%;
	margin: 0.4em auto;
}

.zoneFetesLiturgiques {
	font-size: 85%;
	border: 5px ridge #e4c5ff;
	background-color: #e4e7ff;
	padding: 0.4em;
}

.zoneFetesLiturgiques h3 {
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}

.zoneFetesLiturgiques p {
	text-align: center;
}

.zoneFetesLiturgiques p .enGras {
	font-size: 120%;
	font-weight: bold;
}

.zoneFetesLiturgiques p.italique {
	text-align: center;
	font-style: italic;
}

.zoneAutresFetes {
	margin-top: 1em;
	border: 1px solid #d6d6e9;
	font-size: inherit;
	text-align: center;
}

.zoneAutresFetes h3 {
	font-weight: bold;
	font-size: 1.5em;
}

.zoneAutresFetes .enGras {
	font-size: 110%;
	font-weight: bold;
}

.StickMessage {
	margin: 0.2em 0.4em;
	background-color: #e3f8da;
	padding: 0.3em;
	box-shadow: 10px 8px 15px #7a9f80;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*---------------------------------------------------------------*\
	Le bloc menu est alors automatiquement agrandit, 			 *
	et le contenu qui vient après est repoussé sans être masqué. *
	Ne pas donner de hauteur au conteneur.						 *
\*---------------------------------------------------------------*/
.cheminNavigation {
	font-size: 70%;
	background-color: inherit;
	color: #228391;
	padding: 4px;
	margin-bottom: 8px;
}

.cheminNavigation a {
	display: inline-block;
	font-size: 80%;
	text-decoration: none;
	border: 1px dashed #e2e4f8;
	border-bottom: 1px solid #37d5ec;
}

.cheminNavigation a:link,
.cheminNavigation a:visited {
	color: #228391;
	background-color: #eafbc3;
	padding: 4px;
}

.cheminNavigation a:hover {
	color: #fff;
	background-color: #cbdaa9;
	padding: 4px;
	text-shadow: 0.2em 0.2em 0.2em #070c33;
}

/*-------------------------------------------------------*/
.telechPDF {
	padding: 0.4em;
	margin: 0.4em 0;
	font-size: 75%;
}

.telechPDF a {
	text-decoration: none;
	padding: 0.3em;
}

.telechPDF a img {
	width: 10%;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

.telechPDF a:hover {
	background-color: #d8e7e4;
}

/*--------	Menu horizontal	--------*/
.menuLigne {
	width: 100%;
}

.menuLigne ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.menuLigne li {
	display: inline-block;
	padding: 4px;
	background-color: #3e3a9b;
	margin-left: 0.3em;
	font-size: 85%;
}

.menuLigne li a {
	color: #f1f1f1;
	display: inline-block;
	font-size: 85%;
	font-weight: bold;
	padding: 5px;
}

.menuLigne li a:hover {
	background-color: #c3c1e1;
	border-radius: 0px 6px;
	-webkit-border-radius: 0px 6px;
	-ms-border-radius: 0px 6px;
	-moz-border-radius: 0px 6px;
	text-shadow: 0.2em 0.3em 0.2em #070c33;
	box-shadow: inset 2px 2px 0.5em gray;
	-webkit-box-shadow: inset 2px 2px 0.5em gray;
	-ms-box-shadow: inset 2px 2px 0.5em gray;
	-moz-box-shadow: inset 2px 2px 0.5em gray;
}

li.espacePrive {
	background-color: #9b3a55;
}

/*----------	Menu vertical	----------*/
.menu {
	width: 25%;
}

.content {
	width: 75%;
}

.menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.menu li {
	padding: 8px;
	margin-bottom: 8px;
	background-color: #33b5e5;
	color: #ffffff;
}

.menu li:hover {
	background-color: #0099cc;
}

/*---------- 	Menu Vertical 2	----------*/
.zoneMenuVertic {
	width: 80%;
	margin: 4px auto;
}

.menuVertic {
	padding: 0px;
	background-color: inherit;
	-webkit-border-bottom-left-radius: 3px;
	-ms-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.menuVertic ul {
	list-style-type: none;
	/* pour ne pas avoir de puces */
	margin: 0px;
	padding: 0px;
	line-height: 14px;
	background-color: inherit;

}

.menuVertic li {
	border: 0px;
	border-bottom: #9698a9 1px solid;
	border-left: #323447 3px solid;
	text-align: right;
	line-height: 14px;
	background-color: #edf3dd;
	-webkit-border-bottom-left-radius: 3px;
	-ms-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.menuVertic li a {
	padding: 8px 5px 8px 12px;
	display: block;
	-webkit-border-bottom-left-radius: 3px;
	-ms-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;

}

.menuVertic li a:link {
	background-color: inherit;
	color: #444B55;
	font-size: 9pt;
	-webkit-border-bottom-left-radius: 3px;
	-ms-border-radius-bottom-left: 3px;
	-moz-border-radius-bottom-left: 3px;
	border-bottom-left-radius: 3px;
}

.menuVertic li a:visited {
	background-color: inherit;
	color: #557ba9;
	font-size: 9pt;
	text-decoration: none;
}

.menuVertic li a:hover {
	background-color: #bdd2bd;
	color: #ffffff;
	font-size: 90%;
	text-shadow: 0.2em 0.2em 0.2em #070c33;
	-webkit-border-bottom-left-radius: 3px;
	-ms-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
	box-shadow: inset 2px 2px 0.5em gray;
	-webkit-box-shadow: inset 2px 2px 0.5em gray;
	-ms-box-shadow: inset 2px 2px 0.5em gray;
	-moz-box-shadow: inset 2px 2px 0.5em gray;
}

.menuVertic li a:active {
	background-color: #8eb3b3;
	color: #37649b;
	font-size: 8pt;
}

.menuVertic h2 {
	background-color: #7dcecf;
	padding-left: 7px;
	padding-right: 5px;
	font-size: 10pt;
	margin: 0px;
	color: #4A4A44;
	border-top: #CCC 1px solid;
	border-bottom: #999 1px solid;
	height: 22px;
	text-align: center;
}

.ombre_interieure {
	box-shadow: inset 3px 3px 5px gray;
	-webkit-box-shadow: inset 3px 3px 5px gray;
	-moz-box-shadow: inset 3px 3px 5px gray;
	-ms-box-shadow: inset 3px 3px 5px gray;
	/* le mot-clé inset renverse l'ombre à l'intérieur */
}

.ombre_texte {
	text-shadow: 0.1em 0.2em 0.2em #070c33;
}

.ombre_boite {
	box-shadow: 3px 3px 5px gray;
	-moz-box-shadow: 3px 3px 5px gray;
	-ms-box-shadow: 3px 3px 5px gray;
	-webkit-box-shadow: 3px 3px 5px gray;
}

/*---------------------------------------------------------------*/
.zoneListePrieres {
	width: 100%;
	font-size: 80%;
	border: 1px solid #acb7ad;
	border-radius: 0.3em;
	background: rgba(84, 140, 206, 0.4);
}

.zoneListePrieres a {
	padding: 0.2em;
	border: 1px solid #fff;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-ms-border-radius: 0.2em;
}

.zoneListePrieres a:link,
.zoneListePrieres a:visited {
	color: #7f8cf9;
	background-color: #fff;
}

.zoneListePrieres a:hover {
	color: #fff;
	background-color: #7f8cf9;
	border: 1px solid #1f2fb3;
	text-shadow: 0.2em 0.2em 0.2em #070c33;
}

.zoneListeAffichePrieres,
.zoneListePortions {
	width: 90%;
	padding: 0.5em;
	margin: 0.5em auto;
	background-color: #f2fcf3;
	border-radius: 0.3em;
}

.zoneListeAffichePrieres a {
	display: block;
	padding: 0.3em;
	border-radius: 0.3em;
	-ms-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	border: 1px solid #5f73fe;
}

.zoneListeAffichePrieres a:link,
.zoneListeAffichePrieres a:visited {
	color: #2e377d;
	background-color: #e0e2fb;
	box-shadow: 2px 2px 3px #394f5a;
	-ms-box-shadow: 2px 2px 3px #394f5a;
	-moz-box-shadow: 2px 2px 3px #394f5a;
	-webkit-box-shadow: 2px 2px 3px #394f5a;
}

.zoneListeAffichePrieres a:hover {
	color: #e4e7ff;
	background-color: rgba(127, 140, 249, 0.8);
	/*#7f8cf9;*/
	border: 1px solid #1f2fb3;
	box-shadow: inset 2px 2px 0.5em #101858;
	-webkit-box-shadow: inset 2px 2px 0.5em #101858;
	-moz-box-shadow: inset 2px 2px 0.5em #101858;
	-ms-box-shadow: inset 2px 2px 0.5em #101858;
	text-shadow: 0.2em 0.2em 0.2em #070c33;
}

.zoneleContenu {
	padding: 2em;
	border: 1px solid #5f73fe;
	margin: 0 0 0.6em 0;
}

.chapoPriere {
	border-left: 1px solid #1f2fb3;
	padding: 0.4em;
	font-style: italic;
	font-size: 85%;
}

.contenuPriere {
	padding: 0.4em;
	background-color: #d5d8f2;
	font-size: 95%;
}

.zonePortionTexte {
	padding: 0.3em;
}

.zoneContact {
	width: 90%;
	float: left;
	padding: 0.5em;
	background-color: #d7d8e1;
}

.zoneContact fieldset {
	width: 95%;
}

.zoneTelechDocs,
.zoneTelechImages {
	width: 100%;
	float: left;
	text-align: center;
	padding: 0.5em;
	border: 1px solid #624584;
	border-radius: 0.3em;
	vertical-align: top;
	margin: 0.3em auto 0.3em 0.5em;
	background-color: #c1c4e8;
}

.zoneCollectionLivres,
.zonePrieresPerso {
	width: 100%;
	min-height: 350pt;
	padding: 0.5em;
	border-radius: 0.3em;
	float: left;
	margin: 0.3em auto 0.3em 0.5em;
	background-color: #c1c4e8;
}

.zoneCollectionLivres h3,
.zonePrieresPerso h3 {
	text-align: center;
}

.zonePrieresPerso a {
	display: block;
	padding: 0.2em;
	border: 1px solid #5f73fe;
	border-radius: 0.13em;
	-ms-border-radius: 0.13em;
	-moz-border-radius: 0.13em;
	-webkit-border-radius: 0.13em;
}

.zonePrieresPerso a:link,
.zonePrieresPerso a:visited {
	color: #2e377d;
	background-color: #e4e7ff;
	box-shadow: 2px 2px 3px #394f5a;
	-ms-box-shadow: 2px 2px 3px #394f5a;
	-moz-box-shadow: 2px 2px 3px #394f5a;
	-webkit-box-shadow: 2px 2px 3px #394f5a;
}

.zonePrieresPerso a:hover {
	color: #e4e7ff;
	background-color: #7f8cf9;
	box-shadow: inset 2px 2px 0.5em #101858;
	-webkit-box-shadow: inset 2px 2px 0.5em #101858;
	-ms-box-shadow: inset 2px 2px 0.5em #101858;
	-moz-box-shadow: inset 2px 2px 0.5em #101858;
	text-shadow: 0.2em 0.2em 0.2em #070c33;
}

.vignette {
	margin: 1em 0.5em 1.6em 0.5em;
	/* Espace entre images */
	padding: 0;
	float: left;
	text-decoration: none;
	line-height: normal;
	width: auto;
}

/*
*	Grille 1 d'affichage des titres
*/
.elementVignette1 {
	grid-area: vignette;
}

.elementVignette2 {
	grid-area: legende;
}

.grilleConteneur {
	display: grid;
	grid-template-areas:
		'vignette vignette vignette vignette'
		'legende legende legende legende';
	grid-gap: 10px;
	background-color: #2196F3;
	padding: 10px;
}

/*--- Grille 2 ---*/
.zoneConteneurVignette {
	display: grid;
	grid-template-columns: auto auto auto;
	/* 3 colonnes */
	background-color: #bcd7ed;
	padding: 5pt;
}

.zoneVignette {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(188, 215, 237, 0.8);
	padding: 6px;
	font-size: 95%;
	text-align: center;
}

.zoneVignette a {
	text-decoration: none;
	width: auto;
	display: inline-block;
	text-align: center;
}

.zoneVignette img,
.zoneVignette a img,
.zoneVignette a:link img {
	/* Placez le formatage de lien */
	width: auto;
	/* Largeur d'image */
	max-width: 100px;
	height: auto;
	max-height: 100px;
	/* Hauteur d'image */
	display: inline;
	padding: 8px;
	/* Pour donner l'allure de bordure d'une véritable photo */
	/* Mettre à 0px = pas de frame - mais aucune indication en survolant l'image ! Ajuster les autres largeurs ou texte ! */
	margin: 0;
	background-color: white;
	/* Fond des photos */
	border-top: 1px solid #eee;
	/* Bordures des frames de photo */
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 1px solid #eee;
	text-align: center;
}

.zoneVignette a:visited img {
	background-color: #f3f3f3;
	/* Fond des photos, souris au-dessus - sorte de gris-clair */
}

.zoneVignette a:hover img {
	background-color: #d8e7e4;
	/* Fond des photos, souris au-dessus - sorte de bleu/vert-clair */
}

.zoneVignette p {
	text-align: center;
	margin: 0 auto;
	text-indent: 0pt;
}

.zoneVignetteLegendeImage {
	font-size: 75%;
	padding: 0;
	max-width: 150px;
	/* Largeur de l'image plus 2 x remplissage pour image (espace photo) - to center text on image */
}

/*--- Grille 3 ---*/
.grilleItem {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(188, 215, 237, 0.8);
	padding: 0.2em;
	font-size: 11pt;
	text-align: center;
}

.grilleItem a {
	margin: auto;
	text-decoration: none;
}

.grilleItem a img:hover {
	box-shadow: 3px 3px 9px #aaa;
}

/*----------------*/
.vignette img,
.vignette a img,
.vignette a:link img {
	/* Placez le formatage de lien */
	width: auto;
	/* Largeur d'image */
	max-width: 100px;
	height: auto;
	max-height: 100px;
	/* Hauteur d'image */
	display: inline;
	padding: 12px;
	/* Pour donner l'allure de bordure d'une véritable photo */
	/* Mettre à 0px = pas de frame - mais aucune indication en survolant l'image ! Ajuster les autres largeurs ou texte ! */
	margin: 0;
	background-color: white;
	/* Fond des photos */
	border-top: 1px solid #eee;
	/* Bordures des frames de photo */
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 1px solid #eee;
	text-decoration: none;
	text-align: center;
}

.vignette a:visited img {
	background-color: #f3f3f3;
	/* Fond des photos, souris au-dessus - sorte de gris-clair */
}

.vignette a:hover img {
	background-color: #d8e7e4;
	/* Fond des photos, souris au-dessus - sorte de bleu/vert-clair */
}

.vignette p {
	text-align: center;
	margin: 0px;
	text-indent: 0pt;
}

.vignetteLegendeImage {
	text-align: center;
	font-size: smaller;
	margin: 0 1px 0 0;
	padding: 0;
	max-width: 150px;
	/* Largeur de l'image plus 2 x remplissage pour image (espace photo) - to center text on image */
	/* display: none;  clear:left; Pour ne pas afficher le texte */
}


/* Galerie d'images - Grandes Images */
.grandeImage {
	margin: 10px 0 5px 0;
	padding: 0;
	line-height: normal;
	text-align: center;
}

.grandeImage p {
	text-align: center;
	width: inherit;
}

.LegendegrandeImage {
	/* Nom de la grande image - endessous de l'image .grandeImageNomFichier (sans extension) */
	text-align: center;
	font-weight: bold;
	font-variant: small-caps;
	font-weight: bold;
	margin: 0 1px 0 0;
	padding: 0;
	width: 380px;
	/* Largeur d'image plus 2 x remplissage pour l'image (espace photo) - Centrer le texte par rapport à l'image */
	/* display: none;  Pour ne pas afficher le texte */
}

.grandeImage img {
	/* Préparation de la grande image */
	max-width: 300px;
	/* Largeur de la grande image */
	max-height: 400px;
	width: auto;
	height: auto;
	display: inline;
	padding: 18px;
	/* Espace pour l'image pour allure d'une photo. */
	/* En mettant à 0px = pas d'espace - mais pas d'indication de survol de l'image ! Ajuster les autres largeurs ou texte !  */
	margin: 0;
	background-color: white;
	/* Fond de photo */
	border-top: 1px solid #eee;
	/* Bordures de l'espace photo */
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 1px solid #eee;
	text-decoration: none;
	text-align: left;
}

.grandeImageNav {
	/* Informations des grandes images : 'Image 1 de 4' et navigation de galerie */
	margin: 0;
	width: 620px;
	/* Largeur d'image plus 2 x remplissage pour image (espace photo) - pour centrer le texte sur l'image */
	padding: 0;
	color: #000;
	font-size: smaller;
	line-height: normal;
	text-align: center;
	/* display: none;  Pour ne pas afficher le texte. Mais pas de Navigation ! */
}

/*------------------------------------------*/
.zoneCompteur {
	width: 80%;
	margin: 0.3em auto;
	text-align: center;
}

.zoneCompteur .chiffresCompteur {
	width: auto;
}

.zoneCompteur .infosCompteur1 {
	font-size: 8pt;
}

.zoneCompteur .infosCompteur2 {
	font-size: 7pt;
}

.zoneCompteur .chiffresCompteur img {
	width: 15px;
	height: 20px;
	vertical-align: middle;
}

.conteneurCompteur {
	width: 100%;
	text-align: center;
}

/* ---------- Les Flashes infos ---------- */
#zoneFlashsinfos a:link {
	color: #bfd4e3;
	font-size: 10pt;
	font-family: Arial;
	background-color: #398e8b;
	text-decoration: none;
	border: 1px solid #9e7cc8;
	padding-left: 5px;
	padding-right: 5px;
}

#zoneFlashsinfos a:visited {
	color: #bfd4e3;
	font-size: 10pt;
	background-color: #398e8b;
	text-decoration: none;
	border: 1px solid #9e7cc8;
	padding-left: 5px;
	padding-right: 5px;
}

#zoneFlashsinfos a:hover {
	color: #fbfdff;
	font-size: 10pt;
	background-color: #404b9a;
	text-decoration: none;
	border: 1px solid #6d489b;
	padding-left: 5px;
	padding-right: 5px;
	cursor: pointer;
}

#zoneFlashsinfos a:active {
	color: #bfd4e3;
	font-size: 10pt;
	background-color: #398e8b;
	text-decoration: none;
	border: 1px solid #9e7cc8;
	padding-left: 5px;
	padding-right: 5px;
}

#zoneFlashsinfos .sansLien {
	color: #d4dee5;
	background-color: #85bfbd;
	text-decoration: none;
	border: 1px solid #9e7cc8;
	padding-left: 5px;
	padding-right: 5px;
}

#zoneFlashsinfos .lelien:hover {
	color: #fbfdff;
	font-size: 10pt;
	background-color: #404b9a;
	text-decoration: none;
	border: 1px solid #6d489b;
	padding-left: 5px;
	padding-right: 5px;
	cursor: pointer;
}

#zoneFlashsinfos .lelien:link,
#zoneFlashsinfos .lelien:visited {
	color: #bfd4e3;
	font-size: 10pt;
	background-color: #398e8b;
	text-decoration: none;
	border: 1px solid #9e7cc8;
	padding-left: 5px;
	padding-right: 5px;
	cursor: pointer;
}

.frmFlash {
	border-left: 2px solid #fbb306;
	/* orange */
	padding: 1em;
}

.frmFlash h4 {
	text-decoration: underline #cf2203;
	/* 1px solid #cf2203; */
	font-size: 13pt;
	font-weight: bold;
	letter-spacing: .2em;
}

/* ------------------------------------------------------------ */
.articles {
	padding-left: 1px;
}

.zone_Article {
	border: 1px solid #e9f4fd;
	background-color: #d5e9fb;
	box-shadow: 2px 2px 3px #394f5a;
	-ms-box-shadow: 2px 2px 3px #394f5a;
	-moz-box-shadow: 2px 2px 3px #394f5a;
	-webkit-box-shadow: 2px 2px 3px #394f5a;
	margin-bottom: 0.6em;
}

.zone_Article a {
	padding: 0.3em;
}

.zone_Article a:link {
	color: #104874;
	border-bottom: 1px dashed #104874;
}

.zone_Article a:visited {
	color: #104874;
	border-bottom: 1px dashed #104874;
}

.zone_Article a:hover {
	border-bottom: 3px solid #419fe8;
	background-color: #2d74ab;
	color: #b0d7fb;
	box-shadow: 1px 1px 8px #848f86;
	-ms-box-shadow: 1px 1px 8px #848f86;
	-moz-box-shadow: 1px 1px 8px #848f86;
	-webkit-box-shadow: 1px 1px 8px #848f86;
}

.zone_Article h2 {
	font-size: 116%;
}

.leContenu {
	font-size: 90%;
	padding: 0.4em;
}

/*---------------------*/
.leCommentaire {
	background-color: #f6feff;
	width: 95%;
	padding: 0.6em;
	margin: 0.4em auto;
	border: 1px dashed #848f86;
	font-size: 85%;
}

.leCommentaire .stylezoneCommentaire {
	margin-left: 4em;
	border: 1px solid #7e808c;
	padding-left: 0.3em;
	font-size: 11pt;
	color: #0000ff;
	background-color: #ffffff;
}

.leCommentaire .stylezoneCommentaire input,
.leCommentaire .stylezoneCommentaire textarea {
	width: auto;
	background-color: #e8f0f3;
	color: #105163;
	font-size: 95%;
}

.leCommentaire .styleformulaireCommentaire {
	border-left: 3px solid #57a65b;
	border-top: 1px solid #57a65b;
	border-bottom: 1px solid #57a65b;
	padding-bottom: 5px;
	padding-left: 3px;
}

.leCommentaire .styleformulaireCommentaire table td {
	font-size: 85%;
}

.leCommentaire .styleformulaireCommentaire table td.btnEnvoi {
	text-align: right;
	padding-right: 3em;
}

.leCommentaire .styleformulaireCommentaire table td.btnEnvoi input {
	border-radius: 0.3em;
	margin: 2em 0;
	box-shadow: 1px 1px 8px #848f86;
	-ms-box-shadow: 1px 1px 8px #848f86;
	-moz-box-shadow: 1px 1px 8px #848f86;
	-webkit-box-shadow: 1px 1px 8px #848f86;
	cursor: pointer;
}

.leCommentaire .styleformulaireCommentaire .messageCache {
	padding: 0.3em;
	margin: 0.3em auto;
	text-align: center;
	background-color: #a4001e;
	color: #f6feff;
}

.leCommentaire .stylezoneleCommentaire {
	width: 90%;
	height: auto;
	margin-left: 2em;
	margin-bottom: 1em;
	border-left: 3px solid #57a65b;
	border-bottom: 1px solid #57a65b;
	padding: 0px 0px 10px 10px;
	color: #000;
	background-color: #fef6ff;
	font-size: 10pt;
}

.leCommentaire .stylezoneleCommentaire .auteurdate {
	background-color: #fff6bf;
	margin-bottom: 10px;
	padding: 2px 0px 2px 5px;
}

.leCommentaire .stylezoneleCommentaire .nummessage {
	color: #015f82;
	font-weight: bold;
}

.leCommentaire .stylezoneleCommentaire .auteurmessage {
	font-size: 11pt;
	font-weight: bold;
}

.leCommentaire .stylezoneleCommentaire .datemessage {
	font-size: 10pt;
}

.leCommentaire .stylezoneleCommentaire .message {
	margin-bottom: 10px;
}

.stylemessageEnregistre {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	min-height: 40px;
	height: auto;
	color: #32ff10;
	background-color: #fefff6;
	text-align: center;
}

.stylemessageRetour {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	min-height: 40px;
	height: auto;
	color: #129112;
	background-color: #fefff6;
	text-align: center;
}

/* ----------------------------------------------------------------------- */
.stylezoneChapo {
	border-left: 1px solid #8f697d;
	border-bottom: 2px solid #8f697d;
	padding-left: 3px;
	padding-right: 6px;
	margin-left: 2em;
	width: 90%;
	background-color: #d1e1c6;
	font-style: italic;
	font-weight: bold;
}

/* ----------------------------------------------------------------------- */
.arrondiBasG {
	-webkit-border-radius: 0 0 0 4px;
	-moz-border-radius: 0 0 0 4px;
	border-radius: 0 0 0 4px;
	-ms-border-radius: 0 0 0 4px;
}

.arrondiBasD {
	-webkit-border-bottom-right-radius: 0 0 4px 0;
	-moz-border-bottom-right-radius: 0 0 4px 0;
	border-bottom-right-radius: 0 0 4px 0;
	-ms-border-bottom-right-radius: 0 0 4px 0;
}


/*---------------------*/
.leChapo {
	font-style: italic;
	font-size: 75%;
	margin-left: 2em;
	margin-bottom: 0.7em;
	border-left: 1px dashed #104874;
	padding-left: 0.3em;
	padding-right: 0.3em;
}

.infos_Article {
	margin-top: 12px;
	padding: 5px;
	font-style: italic;
	font-size: 70%;
}

#listeArticles {
	float: right;
	width: 25%;
	margin-left: 8px;
}

/* ------------------------------------------------------------ */
.articles .zoneEdito {
	border: 1px solid #e9f4fd;
	background-color: #f0f8ff;
	box-shadow: 2px 2px 3px #394f5a;
	margin-bottom: 0.6em;
	padding: 0.6em;
}

.articles .zoneEdito a {
	padding: 0.3em;
}

.articles .zoneEdito a:link {
	color: #104874;
	border-bottom: 1px dashed #104874;
}

.articles .zoneEdito a:visited {
	color: #104874;
	border-bottom: 1px dashed #104874;
}

.articles .zoneEdito a:hover {
	border-bottom: 3px solid #419fe8;
	background-color: #2d74ab;
	color: #b0d7fb;
	box-shadow: 1px 1px 8px #848f86;
	-ms-box-shadow: 1px 1px 8px #848f86;
	-moz-box-shadow: 1px 1px 8px #848f86;
	-webkit-box-shadow: 1px 1px 8px #848f86;
}

.articles .zoneEdito h2 {
	font-size: 116%;
}

.articles .zoneEdito .imageEditoFigure {
	display: block;
	/* vertical-align: text-top; */
	margin: 0;
	max-width: 100%;
}

.articles .zoneEdito .imageEdito {
	float: right;
	max-width: 90px;
	height: auto;
}

.articles .zoneEdito .imageEdito img {
	width: 90%;
	height: auto;
}

.articles .zoneEdito .imageEdito .imageEditoOmbre::before,
.articles .zoneEdito .imageEdito .imageEditoOmbre::after {
	content: "";
	/*position:absolute;*/
	box-shadow: 0 15px 10px rgba(0, 0, 0, .6);
	left: 3px;
	right: 50%;
	bottom: 6px;
	height: 25%;
	z-index: -1;
	border-radius: inherit;
	transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform: skewY(-6deg);
	-ms-transform: skewY(-6deg);
	-moz-transform: skewY(-6deg);
	-webkit-transform: skewY(-6deg);
}

.articles .zoneEdito .imageEdito .imageEditoOmbre:after {
	left: 50%;
	right: 3px;
	transform: skewY(6deg);
	-ms-transform: skewY(6deg);
	-moz-transform: skewY(6deg);
	-webkit-transform: skewY(6deg);
	transform-origin: 100% 0;
	-ms-transform-origin: 100% 0;
	-moz-transform-origin: 100% 0;
	-webkit-transform-origin: 100% 0;
}

.articles .zoneEdito .chapoEdito {
	font-style: italic;
	font-size: 75%;
	margin: 1em 0 0.7em 0;
	border-left: 2px solid #104874;
	box-shadow: 2px 2px 3px #394f5a;
	padding: 0 0.3em;
	width: 80%;
}

.articles .zoneEdito .contenuEdito {
	font-size: 95%;
}

.articles .zoneEdito .signatureEdito {
	font-size: 80%;
	font-weight: bold;
	text-align: right;
	margin: 0.6em 0.3em 0.6em auto;
}

.articles .zoneEdito .dateEdito {
	font-size: 70%;
	font-style: italic;
	text-align: right;
	margin: 0.2em 0.3em 0.2em auto;
}

.articles .zoneEdito .infosEdito {
	margin: 0.12em 0 0 0;
	padding: 5px;
	font-style: italic;
	font-size: 70%;
}

/* ------------------------------------------------------------ */
.lesNeuvaines {
	font-size: 95%;
}

.lesNeuvaines ul {
	margin-left: 3px;
}

.lesNeuvaines li {
	list-style-type: none;
	background-color: inherit;
	margin-bottom: 0.6em;
}

.lesNeuvaines a:link {
	font-weight: bold;
	color: #f6feff;
	border-left: 4px solid #d4bb9b;
	padding-left: 3px;
	padding-right: 3px;
}

.lesNeuvaines a:visited {
	font-weight: bold;
	color: #fffef6;
	border-left: 4px solid #d4bb9b;
	padding-left: 3px;
	padding-right: 3px;
}

.lesNeuvaines a:hover {
	font-weight: bold;
	color: #ffffff;
	background-color: #a0a0ec;
	border-left: 4px solid #d2330e;
	padding-left: 3px;
	padding-right: 3px;
}

.zoneInfosNeuvaine {
	margin: 0.7em auto;
	width: 90%;
	padding: 0.5em;
	border: 1px solid #cfcfed;
	color: #fff;
	background-color: #4c4cea;
	border-radius: 0.3em;
	box-shadow: 0.2em 0.3em 0.53em #0f0f64;
}

/* ------------------------------------------------------------ */
.FondContenant1 {
	background-color: #3636c1;
	color: #ffff66;
	font-size: 95%;
	padding: 0.6em;
}

.FondContenant1 h2 {
	font-size: 127%;
	font-weight: bold;
	color: #efefef;
	margin-top: 0px;
	text-align: center;
	text-shadow: 0.06em 0.06em 0.095em #08033a;
}

.FondPriere {
	background-color: #000099;
	color: #ffff66;
	padding: 5px;
	border: 1px solid #ff9933;
	font-size: 95%;
}

/* ------------------------------------------------------------ */
.listeGauche {
	font-size: 95%;
}

.listeGauche h2 {
	text-align: center;
}

.listeGauche header {
	float: none;
}

#apercuArticles {
	float: left;
	width: 65%;
}

dl,
dt,
dd,
ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

/* #lesArticles {}

#lesArticles dl {} */

#lesArticles dt {
	cursor: pointer;
	min-height: 10pt;
	margin: 4px 2px 0px 0px;
	padding: 2px 5px 0px 10px;
	text-align: left;
}

/* ------------------------------------------------------------ */
.zoneSPConnexion {
	width: 85%;
	padding: 0.7em;
	text-align: center;
	background-color: #a47300;
	border-radius: 0.3em;
	margin: 0.6em auto;
	box-shadow: inset 2px 2px 0.5em gray;
	-webkit-box-shadow: inset 2px 2px 0.5em gray;
	-ms-box-shadow: inset 2px 2px 0.5em gray;
	-moz-box-shadow: inset 2px 2px 0.5em gray;
}

.zoneInfosSPConnexion {
	margin: 0.8em 0.5em 0.4em 0.5em;
	padding: 0.6em;
	border: 1px solid #9f3564;
	background-color: #ffefc3;
	border-radius: 0.3em;
	-ms-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	box-shadow: 2px 2px 3px #394f5a;
}

.zoneInfosSPConnexionOff {
	margin: 0.8em 0.5em 0.4em 0.5em;
	padding: 0.6em;
	border: 1px solid #799f35;
	background-color: #e9ffc3;
	border-radius: 0.3em;
	-ms-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	box-shadow: 2px 2px 3px #465d1f;
}

.zoneAdminAlerte {
	width: 100%;
	background-color: #a47300;
	border: 1px solid #759f99;
	border-radius: 0.3em;
	margin: 0.6em 0;
}

.zoneMsgAlerte {
	margin: 0.8em 0.5em 0.4em 0.5em;
	border: 1px solid #9f3564;
	border-left: 3px solid #759f99;
	padding: 0.6em;
	font-size: 75%;
	background-color: #ffefc3;
	border-radius: 0.3em;
	-ms-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	box-shadow: 2px 2px 3px #394f5a;
}

.zoneMsgAlerte .laPunaise {
	width: 32px;
	height: 32px;
	margin: 0.2em auto;
}

.zoneMsgAlerte .laPunaise img {
	width: 32px;
	height: 32px;
}

.zoneMsgAlerte a {
	display: block;
	padding: 0.4em;
	border: 2px solid #5f73fe;
	text-align: center;
	border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
}

.zoneMsgAlerte a:link,
.zoneMsgAlerte a:visited {
	color: #2e377d;
	background-color: #e4e7ff;
	box-shadow: 2px 2px 3px #394f5a;
	-ms-box-shadow: 2px 2px 3px #394f5a;
	-moz-box-shadow: 2px 2px 3px #394f5a;
	-webkit-box-shadow: 2px 2px 3px #394f5a;
}

.zoneMsgAlerte a:hover {
	color: #e4e7ff;
	background-color: #7f8cf9;
	box-shadow: inset 2px 2px 0.5em #101858;
	-webkit-box-shadow: inset 2px 2px 0.5em #101858;
	-ms-box-shadow: inset 2px 2px 0.5em #101858;
	-moz-box-shadow: inset 2px 2px 0.5em #101858;
	text-shadow: 0.2em 0.2em 0.2em #070c33;
	-webkit-box-shadow: inset 2px 2px 0.5em #101858;
	-ms-box-shadow: inset 2px 2px 0.5em #101858;
	-moz-box-shadow: inset 2px 2px 0.5em #101858;
}

/* ------------------------------------------------------------ */
.zoneLiens {
	border-left: 3px solid #759f99;
	border-top: 1px dashed #759f99;
	border-right: 1px solid #759f99;
	border-bottom: 1px dashed #759f99;
	background-color: #edf3dd;
	height: auto;
}

.zoneLiens h4 {
	font-size: 13pt;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 4px;
	color: #1c1fa2;
	text-shadow: 0.04em 0.096em 0.094em #868393;
	border-bottom: 1px dashed #759f99;
}

.styleLiens a {
	font-size: 80%;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding: 0.13em;
}

.styleLiens a:link,
.styleLiens a:visited {
	color: #636844;
	background-color: inherit;
	text-shadow: 0.02em 0.08em 0.13em #868393;
}

.styleLiens a:hover,
.styleLiens a:active {
	color: #21630a;
	background-color: #d3dbbc;
	text-shadow: 0.04em 0.09em 0.13em #f6feff;
}

/* ------------------------------------------------------------ */
.zoneLiensTitre {
	margin: 0.9em auto;
}

.zoneLiensTitre h3 {
	text-align: center;
}

.zoneLiensUtiles {
	display: grid;
	grid-template-columns: auto auto auto;
	background-color: #bcd7ed;
	padding: 5pt;
}

.grilleItem {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(188, 215, 237, 0.8);
	padding: 0.2em;
	font-size: 11pt;
	text-align: center;
}

.grilleItem a {
	margin: auto;
	text-decoration: none;
}

.grilleItem a img:hover {
	box-shadow: 3px 3px 9px #aaa;
}

/* ------------------------------------------------------------ */
.zoneAffichage {
	font-size: 80%;
	color: #002699;
	padding-bottom: 2em;
}

/* ------------------------------------------------------------ */
.leSaint {
	background-color: #e9f4fd;
	font-size: 90%;
	padding: 0.5em;
	font-style: normal;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-ms-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
}

.arrondi-top {
	-webkit-border-radius: 8px 8px 8px 8px;
	-ms-border-radius: 8px 8px 8px 8px;
	-moz-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
}

.arrondi-bas {
	-webkit-border-radius: 0px 0px 8px 8px;
	-ms-border-radius: 0px 0px 8px 8px;
	-moz-border-radius: 0px 0px 8px 8px;
	border-radius: 0px 0px 8px 8px;
}

.arrondi-bas-gauche {
	border-radius: 0px 0px 0px 6px;
	-webkit-border-radius: 0px 0px 0px 6px;
	-ms-border-radius: 0px 0px 0px 6px;
	-moz-border-radius: 0px 0px 0px 6px;
}

/* ------------------------------------------------------------ */
#listeInfos {
	width: 80%;
	padding: 4px 3px 4px 6px;
	margin-bottom: 6px;
	margin-left: auto;
	margin-right: auto;
}

#listeInfos dt {
	border-top: 1px dashed #195511;
	cursor: pointer;
	min-height: 12pt;
	margin: 4px 2px 0px 2px;
	padding: 2px 13px 0px 20px;
	text-align: left;
}

#listeInfos h2 {
	margin-top: 3px;
	margin-bottom: 1px;
	text-align: center;
	font-size: 90%;
	border-radius: 0.5em 1em 1em 0.5em;
	-webkit-border-radius: 0.5em 1em 1em 0.5em;
	-ms-border-radius: 0.5em 1em 1em 0.5em;
	-moz-border-radius: 0.5em 1em 1em 0.5em;
	background-color: #bdc7e3;
	color: #10308a;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

.stylelisteInfos {
	font-size: 70%;
	background-color: inherit;
	border-bottom: 1px dashed #545511;
}

.stylelisteInfos li {
	border-top: 1px dashed #545511;
}

.filFlashInfos {
	margin-bottom: 1em;
	border: 1px solid #c3e0f8;
	background-color: #e9f4fd;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.filFlashInfos>.contenu {
	background-color: #f2f9ff;
	font-size: 75%;
	padding: 3px;
	margin: 0 0 1.2em 0;
	box-shadow: 1px 1px 3px #a1a9ac inset;
}

.filFlashInfos p {
	color: #4c0557;
	font-size: 70%;
}

.filFlashInfos h2 {
	margin-bottom: 1em;
	font-size: 95%;
	text-align: center;
	font-weight: bold;
	color: #1a0557;
	display: block;
	background-color: #d6e9f9;
	line-height: 1.5em;
	border-radius: 0 0 2px 2px;
	-webkit-border-radius: 0 0 2px 2px;
	-ms-border-radius: 0 0 2px 2px;
	-moz-border-radius: 0 0 2px 2px;
	border-bottom: 1px solid #c3e0f8;
	border-left: 1px solid #c3e0f8;
	border-right: 1px solid #c3e0f8;
	box-shadow: 2px 2px 3px #394f5a;
}

.filFlashInfos h5 {
	margin: 0 0 0.4em 0;
	font-size: 75%;
	text-align: center;
}

.filFlashInfos:hover {
	background-color: #f1ffdb;
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-ms-transition: background 0.5s;
	-moz-transition: background 0.5s;
}

.filFlashInfos:hover>h2 {
	color: #d6e9f9;
	background-color: #5b8a15;
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-ms-transition: background 0.5s;
	-moz-transition: background 0.5s;
}

.filFlashInfos:hover>.contenu {
	background-color: #e3ffb9;
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-ms-transition: background 0.5s;
	-moz-transition: background 0.5s;
}

.conteneurFlashs {
	border: 1px solid #fff;
	background-color: #f1f7fc;
	padding: 0.3em;
}

.contenuduFlash {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
}

.infosduFlash {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	background-color: #c1c6de;
	text-align: center;
	color: #0f28a7;
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}

.stylelesInfos {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	margin-bottom: 1.4em;
}

/*---------------------------------------------------------------*/
.arrondi_coins {
	-webkit-border-radius: 5px 5px 0 0;
	-ms-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.arrondiPied {
	-webkit-border-radius: 8px 8px 0 0;
	-ms-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}

.ombreBoite {
	box-shadow: 1px 1px 12px #555;
	-ms-box-shadow: 1px 1px 12px #555;
	-moz-box-shadow: 1px 1px 12px #555;
	-webkit-box-shadow: 1px 1px 12px #555;
}

/* ------------------------------------------------------ */
.bicolor1 {
	color: #006699;
	font-size: small;
	background-color: #cdd4d4;
}

.bicolor2 {
	color: #006699;
	font-size: small;
	background-color: #bec3c3;
}

.ligne-dessus {
	color: #0000ff;
	font-size: small;
	background-color: #e6e784;
}

/*
	TAILLES DES ÉCRANS
	------------------
	
	Ecran d’ordinateur (que l’on appelle « Desktop » )
	------------------
	
	On distingue 2 sortes d’écran différents: les écrans « normaux » (15, 17 pouces) et les grands écrans (21 pouce et + ).
	Ce qui intéresse, c’est la taille de la fenêtre et non celle de l’écran. On considère ces 2 largeurs d’écran:
	
	– 1024px
	– 1600px
	
	Tablette
	--------

	Malgré l’existence de nombreuses tablettes différentes, on retrouve généralement les tailles suivantes:
	
	– 1024px de largeur (format paysage)
	– 740px de largeur (format portrait)
	
	Smartphone
	----------
	
	Pour les smartphones, c’est encore pire, on peut tout trouver coté taille d’écran. Mais encore une fois, on peut isoler les grandes tendances:
	
	– 720px (format paysage)
	– 480px (format portrait et format paysage de la taille en dessous)
	– 320px (format portrait)
	
	
	Les points de rupture
	---------------------
	
	Jusqu’à 479px : smartphone en portrait
	De 480px à 959px : smartphone en paysage, tablette en portrait et petite tablette en paysage
	De 960px à 1280px : tablette en paysage, écran d’ordinateur de taille petite et moyenne
	1281px et au delà : grand écran d’ordinateur (21″ et + en plein écran )
	
	Exemple pour la Télé
	--------------------
	
	@media tv (min-width:1919px) and (max-resolution:72dpi) {
		...
	}

*/

@media only screen and (max-width:800px) {
	body {
		background-color: black;
		color: #535a8c;
	}

	#laPage {
		width: 100%;
	}

	#hautPage {
		/* width:auto;100%; */
		padding: 1em;
	}

	.zoneTitre {
		max-width: 100%;
		max-height: 100%;
		float: none;
		text-align: center;
	}

	.zoneTitre img {
		margin: 0 auto;
	}

	.zoneMenuHaut {
		width: 100%;
		float: none;
		background-color: #3e3a9b;
	}

	.stylelateralDroit {
		width: 100%;
		float: none;
		padding: 1em;
	}

	.stylelateralGauche {
		width: 100%;
		float: none;
		padding: 1em;
	}

	.zonelePied {
		padding: 1.5em;
		font-size: 60%;
	}

	#listeArticles {
		float: none;
		width: 100%;
		margin: 0;
	}

	#apercuArticles {
		float: none;
		width: 100%;
	}

	.contenantAnime {
		width: 100%;
		float: none;
		margin: 0.5em 0 0 0;
	}

	.zoneFetesLiturgiques h3 {
		text-align: center;
		font-weight: bold;
		font-size: 120%;
	}

	.zoneAutresFetes h3 {
		font-weight: bold;
		font-size: 115%;
	}

	/*------------------------------------------------------------*/
	.articles .zoneEdito h2 {
		font-size: 100%;
	}

	.articles .zoneEdito .imageEdito {
		float: right;
		max-width: 60px;
		height: auto;
	}

	.articles .zoneEdito .imageEdito img {
		width: 90%;
		height: auto;
	}

	/*------------------------------------------------------------*/
	.zoneAnimage {
		width: 90%;
		height: 10%;
		margin: 0.3em auto 0.3em auto;
		display: block;
		overflow: hidden;
	}

	.zoneDiaporama {
		width: 100%;
		height: auto;
		padding: 0.5em;
	}

	.zoneDiaporama ul#diaporama li.lesImages img {
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.zoneDiaporama ul#diaporama li.lesImages .legende {
		font-size: 65%;
		padding: 1px;
	}

	.cadreDiapo {
		width: 100%;
		height: auto;
		position: static;
		margin: 0;
	}

	/*------------------------------------------------------------*/
	.bandeau-saint {
		font-size: 80%;
		padding: 0.5em;
		background-color: #e9f4fd;
	}

	.zoneMenuVertic {
		width: 100%;
		margin: 0;
	}

	/*--------	Menu horizontal	--------*/
	.menuLigne {
		width: 100%;
	}

	.menuLigne ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	.menuLigne li,
	.menuLigne li a {
		display: inline-block;
		padding: 4px;
		background-color: #3e3a9b;
		color: #f1f1f1;
		margin-left: 0.3em;
		font-size: 85%;
	}

	.menuLigne li:hover,
	.menuLigne li a:hover {
		background-color: #c3c1e1;
	}

	/*--------	Menu vertical	--------*/
	.menu {
		width: 45%;
	}

	.content {
		width: 65%;
	}

	.menu ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	.menu li {
		padding: 8px;
		margin-bottom: 8px;
		background-color: #33b5e5;
		color: #ffffff;
		display: block;
	}

	.menu li:hover {
		background-color: #0099cc;
	}

	.zoneContact {
		width: 100%;
		float: none;
		padding: 0.5em;
		background-color: #d7d8e1;
	}

	.zoneContact fieldset {
		width: 100%;
	}

	.zoneConteneurVignette {
		display: grid;
		grid-template-columns: auto auto;
		/* 2 colonnes */
		background-color: #bcd7ed;
		padding: 3pt;
	}

	.zoneListeAffichePrieres a {
		font-size: 75%;
	}
}

@media only screen and (max-device-width:480px) {
	body {
		background-color: black;
		color: #535a8c;
		font-size: 70%;
	}

	h1 {
		font-size: 90%;
	}

	h2 {
		font-size: 80%;
	}

	p {
		font-size: 65%;
	}

	#laPage {
		width: 100%;
	}

	#hautPage {
		padding: 1em;
	}

	.zoneTitre {
		max-width: 100%;
		max-height: 100%;
		float: none;
		text-align: center;
	}

	.zoneTitre img {
		margin: 0 auto;
	}

	.zoneMenuHaut {
		width: 100%;
		float: none;
		background-color: #3e3a9b;
	}

	/*------------------------------------------------------------*/
	.contenantAnime {
		width: 100%;
		float: none;
		margin: 0.5em 0 0 0;
	}

	.zoneAnimage {
		width: 100%;
		height: 100%;
		margin: 0.3em auto 0.3em auto;
		display: block;
		overflow: hidden;
	}

	.zoneDiaporama {
		width: 100%;
		height: auto;
		padding: 0.5em;
	}

	.zoneDiaporama ul#diaporama li.lesImages img {
		width: auto;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.zoneDiaporama ul#diaporama li.lesImages .legende {
		font-size: 65%;
		padding: 1px;
	}

	.cadreDiapo {
		width: 100%;
		height: auto;
		position: static;
		margin: 0;
	}

	.zoneFetesLiturgiques h3 {
		text-align: center;
		font-weight: bold;
		font-size: 120%;
	}

	.zoneAutresFetes h3 {
		font-weight: bold;
		font-size: 115%;
	}

	/*------------------------------------------------------------*/
	.articles .zoneEdito h2 {
		font-size: 100%;
	}

	.articles .zoneEdito .imageEdito {
		float: right;
		max-width: 60px;
		height: auto;
	}

	.articles .zoneEdito .imageEdito img {
		width: 90%;
		height: auto;
	}

	/*------------------------------------------------------------*/
	.stylelateralDroit {
		width: 100%;
		float: none;
		padding: 1em;
	}

	.stylelateralGauche {
		width: 100%;
		float: none;
		padding: 1em;
	}

	.zonelePied {
		padding: 1.5em;
		font-size: 50%;
	}

	#listeArticles {
		float: none;
		width: 100%;
		margin: 0;
	}

	#apercuArticles {
		float: none;
		width: 100%;
	}

	.bandeau-saint {
		font-size: 80%;
		padding: 0.5em;
		background-color: #e9f4fd;
	}

	.zoneMenuVertic {
		width: 100%;
		margin: 0;
	}

	.menuLigne {
		width: 100%;
	}

	.menuLigne ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	.menuLigne li,
	.menuLigne li a {
		display: inline-block;
		padding: 4px;
		background-color: #3e3a9b;
		color: #f1f1f1;
		margin-left: 0.3em;
		font-size: 85%;
	}

	.menuLigne li:hover,
	.menuLigne li a:hover {
		background-color: #c3c1e1;
	}

	/*--------	Menu vertical	--------*/
	.menu {
		width: 45%;
	}

	.content {
		width: 65%;
	}

	.menu ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	.menu li {
		padding: 8px;
		margin-bottom: 8px;
		background-color: #33b5e5;
		color: #ffffff;
		display: block;
	}

	.menu li:hover {
		background-color: #0099cc;
	}

	.zoneContact {
		width: 100%;
		float: none;
		padding: 0.5em;
		background-color: #d7d8e1;
	}

	.zoneContact fieldset {
		width: 100%;
	}

	.zoneConteneurVignette {
		display: grid;
		grid-template-columns: auto auto;
		/* 2 colonnes */
		background-color: #bcd7ed;
		padding: 3pt;
	}

	.zoneListeAffichePrieres a {
		font-size: 75%;
	}
}

@media only screen and (max-width:600px) {
	#laPage {
		width: 100%;
	}

	#hautPage {
		padding: 1em;
	}

	.zoneMenuVertic {
		width: 100%;
		margin: 0;
	}

	.zoneContact {
		width: 100%;
		float: none;
		padding: 0.5em;
		background-color: #d7d8e1;
	}

	.zoneContact fieldset {
		width: 100%;
	}

	/*------------------------------------------------------------*/
	.contenantAnime {
		width: 100%;
		float: none;
		margin: 0.5em 0 0 0;
	}

	.zoneAnimage {
		width: 100%;
		height: auto;
		margin: 0.3em auto 0.3em auto;
		display: block;
		overflow: hidden;
	}

	.cadreDiapo {
		width: 100%;
		height: auto;
		position: static;
		margin: 0;
	}

	.zoneDiaporama {
		width: 100%;
		height: auto;
		padding: 0.5em;
	}

	.zoneDiaporama ul#diaporama li.lesImages img {
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.zoneDiaporama ul#diaporama li.lesImages .legende {
		font-size: 65%;
		padding: 1px;
	}

	.zoneFetesLiturgiques h3 {
		text-align: center;
		font-weight: bold;
		font-size: 120%;
	}

	.zoneAutresFetes h3 {
		font-weight: bold;
		font-size: 115%;
	}

	/*------------------------------------------------------------*/
	.articles .zoneEdito h2 {
		font-size: 100%;
	}

	.articles .zoneEdito .imageEdito {
		float: right;
		max-width: 60px;
		height: auto;
	}

	.articles .zoneEdito .imageEdito img {
		width: 90%;
		height: auto;
	}

	/*------------------------------------------------------------*/
	#listeArticles {
		float: none;
		width: 100%;
		margin: 0;
	}

	#apercuArticles {
		float: none;
		width: 100%;
	}

	.zoneConteneurVignette {
		display: grid;
		grid-template-columns: auto auto;
		/* 2 colonnes */
		background-color: #bcd7ed;
		padding: 3pt;
	}

	.zoneListeAffichePrieres a {
		font-size: 75%;
	}
}

@media only screen and (max-device-width:980px) {
	body {
		font-size: 120%;
	}

	#laPage {
		width: 100%;
	}

	#hautPage {
		padding: 1em;
	}

	.zoneTitre {
		max-width: 100%;
		max-height: 100%;
		float: none;
		text-align: center;
	}

	.zoneTitre img {
		margin: 0 auto;
	}

	.zoneMenuHaut {
		width: 100%;
		float: none;
		background-color: #3e3a9b;
	}

	/*------------------------------------------------------------*/
	.contenantAnime {
		width: 100%;
		float: none;
		margin: 0.5em 0 0 0;
	}

	.zoneAnimage {
		width: 100%;
		height: 100%;
		margin: 0.3em auto 0.3em auto;
		display: block;
		overflow: hidden;
	}

	.cadreDiapo {
		width: 100%;
		height: auto;
		position: static;
		margin: 0;
	}

	.zoneDiaporama {
		width: 100%;
		height: auto;
		padding: 0.2em;
	}

	.zoneDiaporama ul#diaporama li.lesImages img {
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.zoneDiaporama ul#diaporama li.lesImages .legende {
		font-size: 65%;
		padding: 1px;
	}

	.zoneFetesLiturgiques h3 {
		text-align: center;
		font-weight: bold;
		font-size: 120%;
	}

	.zoneAutresFetes h3 {
		font-weight: bold;
		font-size: 115%;
	}

	/*------------------------------------------------------------*/
	.articles .zoneEdito h2 {
		font-size: 100%;
	}

	.articles .zoneEdito .imageEdito {
		float: right;
		max-width: 60px;
		height: auto;
	}

	.articles .zoneEdito .imageEdito img {
		width: 90%;
		height: auto;
	}

	/*------------------------------------------------------------*/
	.stylelateralDroit {
		width: 100%;
		float: none;
		padding: 1em;
	}

	.stylelateralGauche {
		width: 100%;
		float: none;
		padding: 1em;
	}

	.zonelePied {
		padding: 1.5em;
		font-size: 60%;
	}

	#listeArticles {
		float: none;
		width: 100%;
		margin: 0;
	}

	#apercuArticles {
		float: none;
		width: 100%;
	}

	.bandeau-saint {
		font-size: 80%;
		padding: 0.5em;
		background-color: #e9f4fd;
	}

	.zoneMenuVertic {
		width: 100%;
		margin: 0;
	}

	.menuLigne {
		width: 100%;
	}

	.menuLigne ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	.menuLigne li,
	.menuLigne li a {
		display: inline-block;
		padding: 4px;
		background-color: #3e3a9b;
		color: #f1f1f1;
		margin-left: 0.3em;
		font-size: 85%;
	}

	.menuLigne li:hover,
	.menuLigne li a:hover {
		background-color: #c3c1e1;
	}

	/*--------	Menu vertical	--------*/
	.menu {
		width: 45%;
	}

	.content {
		width: 65%;
	}

	.menu ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	.menu li {
		padding: 8px;
		margin-bottom: 8px;
		background-color: #33b5e5;
		color: #ffffff;
		display: block;
	}

	.menu li:hover {
		background-color: #0099cc;
	}

	.zoneContact {
		width: 100%;
		float: none;
		padding: 0.5em;
		background-color: #d7d8e1;
	}

	.zoneContact fieldset {
		width: 100%;
	}

	.zoneConteneurVignette {
		display: grid;
		grid-template-columns: auto auto;
		/* 2 colonnes */
		background-color: #bcd7ed;
		padding: 3pt;
	}

	.zoneListeAffichePrieres a {
		font-size: 75%;
	}
}


*,
*:before,
*:after {
	box-sizing: border-box;
}


/*--- le nettoyeur ---*/
.nettoyeur {
	clear: both;
	visibility: hidden;
}