/* ------------------------------------------------------------------------- */
/*  Je tiens à remercier les auteurs du site w3schools.com pour leur contenu. */
/*  C'est un des sites le plus complet que j'ai consulté jusqu'à maintenant. */
/*  Grace à eux j'ai pu construire mon site en CSS presque responsive.        */
/*  Copyright: Silva Paulo  23/03/2019                                       */
/* ------------------------------------------------------------------------- */

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

html {
	height: 100%;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	line-height: 1.15;
	box-sizing: border-box;
}

@font-face {
	font-family: "Lucida Handwriting", sans-serif;
	src:
	local("Lucida Handwriting"),
	src:
	url("../font/LHANDW.TTF")
	format("truetype");
}

@-ms-viewport {
	width: device-width;
}

@-o-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

body {
	width: 100%;
	height: 100%;
	margin: 5px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	background-image: url(../images_site/siglspgrisclair.gif);
	background-attachment: fixed;
	background-color: #f2f2f2;
	text-align: center;
	font-size: 1rem;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	line-height: 1.5;
}

#divprechargeimage1	{
	visibility: hidden;
	background-image: url(../images_site/fondsp.png);
}

/* Code pour enlever la bordure au survol d'une image avec lien hypertexte */
a img {
	border:none;
}

/* Code pour l'adaptation de l'image à la taille de l'écran (Responsive) */
img, object, embed, video, iframe {
	max-width: 100%;
	width: 100%;
	height: auto;
	vertical-align: middle;
}

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

/* Code pour l'effet de zoom de l'image avec transition - avec balise img pas de point (par ex.: img:hover et pas .img:hover)! */
.zimage {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
	-webkit-transition: all 0.7s ease; /* Safari et Chrome */
	-moz-transition: all 0.7s ease; /* Firefox */
	-ms-transition: all 0.7s ease; /* Internet Explorer 9 */
	-o-transition: all 0.7s ease; /* Opera */
	transition: all 0.7s ease;
	opacity: 1;
}

.zimage:hover {
/* L'image est grossie de 5% */
	-webkit-transform: scale(1.05); /* Safari et Chrome */
	-moz-transform: scale(1.05); /* Firefox */
	-ms-transform: scale(1.05); /* Internet Explorer 9 */
	-o-transform: scale(1.05); /* Opera */
	transform: scale(1.05);
	opacity: 0.60;
}
/* Fin du code pour l'effet de zoom */

textarea, table, td, th, code, pre,	samp {
	-webkit-hyphens: auto; /* césure propre */
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word; /* passage à la ligne forcé */
}

.row:after {
	content: "";
	clear: both;
	display: table;
}
.slide {
	display: none;/**/
}

.slide2 {
	display: none;/**/
}

/* Obs.: les 2 versions sont désactivés. La balise .zimage fonctionne pour l'effet souhaité - zoom et opacité au passage de la souris */
/* version original 
.photoopaque, .photohoveropaque:hover {
	opacity: 0.60;
}

.photoopaqueoff, .photohoveropaqueoff:hover {
	opacity: 1;
}
*/
/* version essai - inversement du code dans le photoopaque et photoopaqueoff 

.photoopaque, .photohoveropaque:hover {
	opacity: 1;
}

.photoopaqueoff, .photohoveropaqueoff:hover {
	opacity: 0.94; /* c'était à 0.60. La dernière à 0.94 
}*/
/*/**/

.cacher {
	display: none;
}

/* Div pour obliger à centrer la page sur l'écran */
.conteneur {
	display: inline-block;
	position: relative;
	width: 100%;
	top: 0px;
	bottom: 5px;
	max-width: 1024px;
	margin: 0px auto 7px auto;
	overflow: hidden;
	zoom: 1; 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	border-radius: 20px !important;
	background-color: #F5F5F5;
	-webkit-box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
}

.conteneur:after {
	content: ""; /* Important, sinon l'élément n'est pas généré. */
	display: table;
	clear: both;
}

/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** ***** */
/* Début section infobulle survol lien avec le pointeur de la souris pour balise (a) et pour (span) */
/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** ***** */

/* Début infobulle survol lien avec le pointeur de la souris pour balise (a infobulle) */
a.infobulle {
	position: relative;
	background-color: #cfcfcf;
	display: inline-block;
	border-bottom: 1px dotted #0000FF;
	outline: none;
}

a.infobulle .infobulletexte {
	visibility: hidden;
	width: 86px;
	background-color: #F0F0F0;
	font-size: 12px;
	font-weight: normal;
	color: #c64fba;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	border-radius: 6px !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
    border: 1px solid #0cf !important;
	padding: 1px 4px 3px;
	position: absolute;
	z-index: 50;
	bottom: 140%;
	left: 50%;
	margin-left: -42px; 
	opacity: 0;
	transition: opacity 1s;
}

/* Début pour la petite flèche qui apparaît en bas de l'infobulle */
a.infobulle .infobulletexte::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -7px;
	border-width: 7px;
	border-style: solid;
	border-color: #0cf transparent transparent transparent;
}
/* Fin pour la petite flèche qui apparaît en bas de l'infobulle */

a.infobulle:hover .infobulletexte {
	visibility: visible;
	opacity: 1;
}
/* Fin infobulle survol lien avec le pointeur de la souris pour balise (a infobulle) */

/* Début infobulle survol lien avec le pointeur de la souris pour balise (span infobulle normal) */
span.infobulle {
	position: relative;
	background-color: #ddd;
	display: inline-block;
	outline: none;
	border-bottom: 1px dotted #0000FF;
	cursor: help;
}

span.infobulle .infobulletexte {
	visibility: hidden;
	width: 86px;
	background-color: #F0F0F0;
	font-size: 11px;
	color: #c64fba;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	border-radius: 6px !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
 	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	border: 1px solid #0cf !important;
	padding: 1px 4px 3px;
	position: absolute;
	z-index: 23;
	bottom: 140%;
	left: 50%;
	margin-left: -42px; 
	opacity: 0;
	transition: opacity 1s;
}

/* Début pour la petite flèche qui apparaît en bas de l'infobulle */
span.infobulle .infobulletexte::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -7px;
	border-width: 7px;
	border-style: solid;
	border-color: #0cf transparent transparent transparent;
}
/* Fin pour la petite flèche qui apparaît en bas de l'infobulle */

span.infobulle:hover .infobulletexte {
	visibility: visible;
	opacity: 1;
}
/* Fin infobulle survol lien avec le pointeur de la souris pour balise (span infobulle) */

/* Début infobulle flèche survol lien avec le pointeur de la souris pour balise (span infobullefleche pour la flèche vers le haut de la page) */
span.infobullefleche {
	position: relative;
	display: inline-block;
	outline: none;
	cursor: pointer;
}

span.infobullefleche img {
	border: 0;
}

span.infobullefleche .infobulletexte {
	visibility: hidden;
	position: absolute;
	width: 36px;
	margin-left: -19px;
	background-color: #E9E9E9;
	font-size: 10px;
	color: #c64fba;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	border-radius: 6px !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.08);
    border: 1px solid #0cf !important;
	padding: 2px 3px 2px 4px;
	z-index: 23;
	bottom: 147%;
	left: 50%;
	opacity: 0;
	transition: opacity 1s;
}

/* Début pour la petite flèche qui apparaît en bas de l'infobulle */
span.infobullefleche .infobulletexte::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -7px;
	border-width: 7px;
	border-style: solid;
	border-color: #0cf transparent transparent transparent;
}
/* Fin pour la petite flèche qui apparaît en bas de l'infobulle */

span.infobullefleche:hover .infobulletexte {
	visibility: visible;
	opacity: 1;
}
/* Fin infobulle flèche survol lien avec le pointeur de la souris pour balise (span infobullefleche pour la flèche vers le haut de la page) */

/* Fin section infobulles survol lien avec le pointeur de la souris pour balises (a), span) et flèche */

/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/* Début code pour la flèche qui scrolle pour faire monter la page vers le haut ensemble avec script imgscroll.js */
/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
span.cacheboutons {
	visibility: hidden;
}

#flechescroll {
	opacity: 0;
	height: 29px;
	width: 29px;
	background: #FEFEFE;
	position: fixed;
	z-index: 100;
	bottom: 10px;
	right: 10px;
	padding: 0px 6px 4px 8px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	border: 1px solid #0cf !important;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#flechescroll:hover {
	background: #D7D7D7;
}

/* Fin code pour la flèche qui scrolle pour faire monter la page vers le haut */

/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*  Début du banner en-tête pour la sphere SP, le titre Silva Paulo et le drapeau langue  */
/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* Début div sphere SP  */
.spheresp {
	position: absolute;
	display: block;
	top: 0px;
	width: 100px;
	height: 100px;
	text-align: center;
	margin-top: 10px;
	margin-left: 11px;
	filter: drop-shadow(3px 3px 0.4rem #747474);
}

.cachespheresp {
	position: absolute;
	margin: 0px auto;
	left: -999em;
}

.spheresp:hover .cachespheresp {
	position: absolute;
	width: 100px;
	height: 100px;
	left: 0px;
	top: 0px;
}

.spheresp:hover img {
	cursor: default;
}
/* Fin div sphere SP  */

/* Début div Silva Paulo */
.bannerentete {
	display: inline-block;
	top: 0px;
	left: 0px;
	right: 0px;
	float: left;
	width: 100%;
	height: 120px;
	margin: 0px auto 1px;
	padding-top: 34px;
	font-size: 30px;
	font-style: italic;
	font-family:  "Comic Sans MS", "Lucida Handwriting"; /* Lucida Handwriting" avec cette police, enlever le font-style: italic. Incompatible avec Safari pour iPhone */
	color: #FFFFFF;
	letter-spacing: 0.2rem;
	text-shadow: 1px 1px 2px #000, 0px 0px 25px #0000FF, 0px 0px 5px #00008B;
	text-align: center;
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	-ms-border-radius: 23px;
	border-radius: 23px !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.12);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.12);
/*	-webkit-background-image: linear-gradient(to right, rgba(0,191,255,1), rgba(135,206,0.2), rgba(224,255,255,0), rgba(224,255,255,0), rgba(135,206,0,0.9), rgba(0,191,255,1));
	background-image: linear-gradient(to right, rgba(0,191,255,1), rgba(135,206,0.2), rgba(224,255,255,0), rgba(224,255,255,0), rgba(135,206,0,0.9), rgba(0,191,255,1));*/
	background-image: url(../images_site/fondsp.png);
	background-size: 100% 100%;
	clear: both;
} 

.effettexte {
	-webkit-animation: effettexte 7s ease-in-out infinite alternate;
	-moz-animation: effettexte 7s ease-in-out infinite alternate;
	-ms-animation: effettexte 7s ease-in-out infinite alternate;
	animation: effettexte 7s ease-in-out infinite alternate;
}

@-webkit-keyframes effettexte {
  	from {
	text-shadow: 1px 1px 2px #000, 0px 0px 25px #0000FF, 0px 0px 5px #00008B;
  }
  	to {
    text-shadow: 1px 1px 5px #000, 0 0 10px #00008B, 0 0 15px #00008B, 0 0 20px #00008B;
  }
}
/* Fin div Silva Paulo  */

/* Début div drapeau choix langue du site */
.divdrapeaufr {
	position: absolute;
	float: right;
	right: 0px;
	width: 30px;
	height: 25px;
	margin-top: -6px;
	margin-right: 10px;
	outline: none;
}
/* Fin div drapeau choix langue du site */

/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*   Fin du banner en-tête pour la sphere SP, le titre Silva Paulo e le drapeau langue   */
/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*       Début des divs pour les boutons de navigation du menu      */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** */

.navbarre {
	display: inline-table;
	float:left;
	width: 99.99999%;
	vertical-align: middle;
	margin-top: 1px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.navmilieu {
	float:left;
	vertical-align: middle;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 24.99999%;
	width: 49.99999%;
}

.navdroite {
	float: right;
	right: 0px;
	vertical-align: middle;
	margin-right: 0px;
	margin-bottom: 0px;
	width: auto;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*        Fin des divs pour les boutons de navigation du menu       */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* ****  **** **** **** **** **** **** * **** **** **** **** **** **** **** */
/*   Début du code pour les boutons de navigation après le div Silva Paulo  */
/* ****  **** **** **** **** **** **** * **** **** **** **** **** **** **** */

.boutonnav {
	display: inline-table;
	border: none;
	vertical-align: middle;
	width: 102px;
	height: 20px;
	line-height: 20px;
	padding: 6px 4px 8px;
	text-align: center;
	text-decoration: none;
	font: 14px Verdana, sans-serif;
	letter-spacing: 1px;
	margin: 6px 0px 6px 8px;
	-webkit-transition: background-color 0.4s;
	-moz-transition: background-color 0.4s;
	-ms-transition: background-color 0.4s;
	transition: background-color 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	border-radius: 12px !important;
	cursor: pointer;
	outline: none;
}

.boutonnavpt {
	display: inline-table;
	border: none;
	vertical-align: middle;
	width: 102px;
	height: 20px;
	line-height: 20px;
	padding: 6px 10px 8px;
	text-align: center;
	text-decoration: none;
	font: 14px Verdana, sans-serif;
	letter-spacing: 1px;
	margin: 6px 0px 6px 8px;
	-webkit-transition: background-color 0.4s;
	-moz-transition: background-color 0.4s;
	-ms-transition: background-color 0.4s;
	transition: background-color 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	border-radius: 12px !important;
	cursor: pointer;
	outline: none;
}

/* Début du code pour le boutons de navigation active */
.boutonactive3 {
	font-family: 14px Verdana, sans-serif;
	text-align: center;
	outline: none;
}

.boutonactive3 a {
	display: inline-block;
	color: black;
	padding: 7px 10px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	border: 1px solid #1F85E0 !important;
	outline: none;
	cursor: pointer;
}

.boutonactive3 a:hover {
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	outline: none;
}

.boutonactive3 a.active {
	background-color: #ADD8E6;
	color: #0000FF;
	border: 1px solid #1F85E0 !important;
	outline: none;
}

.boutonactive3 a:hover:not(.active) {
	color: red;
	border: 1px solid #1F85E0 !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	outline: none;
}

/* Fin du code pour le boutons de navigation active */

/* Début du code pour le boutons de navigation */
.bouton1 { 
	width: 108px;
	color: black !important;
	margin: 0px 4px 0px;
	padding: 7px 10px;
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton1:hover {
	background-color: #608FE8;
	color: white !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	outline: none;
}

/* début section bouton2 pour les pages en français */
/* les boutons 2 et 3 (même code que bouton1) sont pour mettre chaque bouton different si besoin sinon, utiliser le code du bouton1 */
.bouton2, .bouton2bis {
	width: 102px;
	height: 20px;
	line-height: 20px;
	padding: 6px 4px 8px;
	color: black !important; 
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton2:hover, .bouton2bis:hover {
	background-color: #608FE8;
	padding: 6px 4px 8px;
	color: white !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);	
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	outline: none;
}

a[class="boutonnav bouton2 active"] {
	padding: 6px 4px 8px;
	background-color: #ADD8E6;
	color: #0000FF !important;
	outline: none;
}

a[class="boutonnav bouton2bis active"] {
	padding: 6px 4px 8px;
	background-color: #ADD8E6;
	color: #0000FF !important;
	outline: none;
}
/* fin section bouton2 */

/* début section bouton2pt pour les pages en portugais */
.bouton2pt, .bouton2ptbis {
	width: 102px;
	height: 20px;
	line-height: 20px;
	padding: 6px 10px 8px;
	color: black !important; 
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton2pt:hover, .bouton2ptbis:hover {
	background-color: #608FE8;
	padding: 6px 10px 8px;
	color: white !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);	
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	outline: none;
}

a[class="boutonnavpt bouton2pt active"] {
	padding: 6px 10px 8px;
	background-color: #ADD8E6;
	color: #0000FF !important;
	outline: none;
}

a[class="boutonnavpt bouton2ptbis active"] {
	padding: 6px 10px 8px;
	background-color: #ADD8E6;
	color: #0000FF !important;
	outline: none;
}
/* fin section bouton2pt pour les pages en portugais */

.bouton3 {
	width: 102px;
	color: black; 
	padding: 7px 10px;
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton3:hover {
	background-color: #608FE8;
	color: white;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	outline: none;
}

.bouton4 {
	width: 102px;
	font: 14px Verdana, sans-serif;
	color: black;
	padding: 7px 10px;
	background-color: #FAFAFA;
	text-align: center;
	text-decoration: none;
	letter-spacing: 1px;
	transition: background-color 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	border-radius: 12px !important;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton4:hover {
	background-color: #608FE8;
	color: white;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);	
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	outline: none;
}

/* bouton "Contact" */
.bouton5 {
	width: 102px;
	color: black !important;
	margin: 8px 0px 0px 0px;
	margin-right: 0px;
	padding: 7px 10px;
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton5:hover {
	background-color: #608FE8;
	color: white !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	outline: none;
}

/* ****  **** **** **** **** **** **** * **** **** **** **** **** **** **** **** */
/*  Fin du code pour les boutons de navigation en-tête après le div Silva Paulo  */
/* ****  **** **** **** **** **** **** * **** **** **** **** **** **** **** **** */

span.xdtri {
	font-size: 13px;
	font-weight: bold;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*      Début de la colonne centrale pour les textes et images      */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** */

.colonnecentrale {
	float: left;
	width: 99.99999%;
	margin-top: 1px;
	margin-bottom: 3px;
	margin-left: 0px;
	padding: 10px 16px;
	font-size: 1rem;
	background-color: #E1EAEA;
	border: 1px solid #999999 !important;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
	overflow-x: hidden;
	outline: none;
}

/* div pour le formulaire */
.divformulaire {
	float: left;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 15px;
	margin-bottom: 0px;
	padding: 0px 7px 0px;
	text-align: justify;
	line-height: 1.7;
	background-color: #e1e1e1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
/*	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7); */
}

/* div pour le texte en haut à droite */
.divmsgtr {
	float: right;
	position: relative;
	width: 410px;
	height: auto;
	margin-top: 15px;
	padding: 0px 7px 0px;
	font-size: 0.9rem;
	text-align: left;
	line-height: 1.7;
	background-color: #e1e1e1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* div pour le texte en haut à gauche */
.divtexteimage1 {
	float: left;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 15px;
	padding: 0px 7px 0px;
	text-align: justify;
	line-height: 1.7;
	background-color: #e1e1e1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* div pour le texte en haut à gauche */
.divtexteimage1bis {
	float: left;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 15px;
	padding: 0px 7px 0px;
	text-align: justify;
	line-height: 1.7;
	background-color: #e1e1e1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* div pour le texte en haut à droite */
.divtexteimage2 {
	float: right;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 15px;
	padding: 0px 7px 0px;
	text-align: left;
	line-height: 1.7;
	background-color: #e1e1e1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* div pour le texte en haut à droite */
.divtexteimage2bis {
	float: right;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 15px;
	padding: 0px 7px 0px;
	text-align: left;
	line-height: 1.7;
	background-color: #e1e1e1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* div pour la météo position à gauche */
.divtexteimage3 {
	float: left;
	position: relative;
	width: 400px;
	height: 310px;
	margin-top: 15px;
	padding: 4px 4px 8px; /*0px 4px 0px;*/
	line-height: 1.7;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}


/* div pour la météo position à droite */
.divtexteimage3posdr {
	float: right;
	position: relative;
	width: 400px;
	height: 310px;
	margin-top: 15px;
	padding: 4px 4px 8px; /*0px 4px 0px;*/
	line-height: 1.7;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* div pour la météo position à gauche */
.divtexteimage3v2 {
	float: left;
	position: relative;
	width: 400px;
	height: 370px;
	margin-top: 15px;
	padding: 4px 4px 8px; /*0px 4px 0px;*/
	line-height: 1.7;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}


/* div pour la météo position à droite */
.divtexteimage3posdrv2 {
	float: right;
	position: relative;
	width: 400px;
	height: 370px;
	margin-top: 15px;
	padding: 4px 4px 8px; /*0px 4px 0px;*/
	line-height: 1.7;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* div invisible pour séparation */
.divtexteimage4 {
	float: left;
	position: relative;
	width: 99.99999%;
	height: auto;
	margin-top: 7px;
	margin-bottom: 7px;
	padding: 0px;
	line-height: 1.7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	visibility: hidden;/**/
}

/* div invisible pour séparation de chaque ligne des 5 photos dans les pages des miniatures */
.divtexteimage4b {
	float: left;
	position: relative;
	width: 99.99999%;
	height: auto;
	margin-top: 1px;
	margin-bottom: 1px;
	padding: 0px;
	line-height: 1.7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	visibility: hidden;/**/
}

/* div pour le texte en bas */
.divtexteimage5 {
	float: left;
	position: relative;
	width: 99.99999%;
	height: auto;
	margin-top: 15px;
	padding: 12px;
	font-size: 0.9rem;
	font-weight: normal;
	color: #000;
	text-align: justify;
	line-height: 1.7;
	background-color: #ececec;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/*                        Divs pour les photos                            */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* ------------------------------------------------ */
/* div pour la photo du jour - Ex.: page index.html */
/* ------------------------------------------------ */

.divimage6 {
	float: right;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 10px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

.divimage6 img {
	float: right;
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	border-radius: 20px !important;
	/*border: 1px solid #666 !important;
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

.divimage6:hover {/**/
	display: inline-block;
	position: relative;
	/*width: 400px;*/ /* ===>> Obs.: avec ce width à 100%, on obtient un effet de zoom <<=== */
	/*height: auto;*/
	margin-top: 0px; /* 10px; */
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px 7px 0px;
	text-decoration: none;
	line-height: 1.7;
	background-color: #F2F2F2;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;/**/
	border: 1px solid #666 !important;/*red*/
/*	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);*/
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* --------------------------------------------------------------- */
/* div pour la photo seule sur la page - Ex.: page photomavie.html */
/* --------------------------------------------------------------- */

.divimage7 {
	position: relative;
	width: 450px;
	height: auto;
	margin-top: 0px;
	margin-left: 27.5%;
	margin-right: 27.5%;
	padding: 0px 6px 0px 11px;
	line-height: 1.7;
	background-color: #e9e9e9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

.divimage7 img {
	position: relative;
	width: 450px;
	height: auto;
	margin-top: 15px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	padding: 0px 9px 0px 5px;
	line-height: 1.7;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px !important;
	/*border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

.divimage7:hover {
	position: relative;/**/
	/*width: 400px;/*  auto;100%; - Obs.: avec ce width à 100%, on obtient un effet de zoom */
	/*height: auto;*/
	margin-top: 0px;
	margin-left: 27.5%;
	margin-right: 27.5%;
	margin-bottom: 0px;
	padding: 0px 6px 0px 11px;
	line-height: 1.7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	cursor: pointer;
}

.divimage7bis {
	position: relative;
	width: 520px;
	height: auto;
	margin-top: 0px;
	margin-left: 24.3%;
	margin-right: 30.7%;
	padding: 0px 6px 0px 11px;
	line-height: 1.7;
	background-color: #e9e9e9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

/*
.divimage7bis img {
	position: relative;
	width: 520px;
	height: auto;
	margin-top: 15px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	padding: 0px 9px 0px 5px;
	line-height: 1.7;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}
*/

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* --------------------------------------------------------------- */
/* div pour la photo seule sur la page - Ex.: page photomavie.html */
/* --------------------------------------------------------------- */

.divimage7v2 {
	position: relative;
	width: 450px;
	height: auto;
	margin-top: 0px;
	margin-left: 27.5%;
	margin-right: 27.5%;
	padding: 0px 6px 0px 11px;
	line-height: 1.7;
	background-color: #e9e9e9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

.divimage7v2 img {
	position: relative;
	width: 450px;
	height: auto;
	margin-top: 15px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 9px 0px 5px;
	line-height: 1.7;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px !important;
	/*border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

.divimage7v2:hover {
	position: relative;/**/
	/*width: 400px;/*  auto;100%; - Obs.: avec ce width à 100%, on obtient un effet de zoom */
	/*height: auto;*/
	margin-top: 0px;
	margin-left: 27.5%;
	margin-right: 27.5%;
	margin-bottom: 0px;
	padding: 0px 6px 0px 11px;
	line-height: 1.7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
/*	cursor: pointer;*/
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* -------------------------------------------------------------- */
/* div pour la photo à droite sur la page - Ex.: page photos.html */
/* -------------------------------------------------------------- */

.divimage8 {
	display: inline-block;
	float: right;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	background-color: transparent;
	border: 1px solid transparent !important;
/*	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;*/
/*	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

.divimage8 img {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px !important;
	/*border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

/*.divimage8:hover {*/
/* code activé 	display: inline-block;
	position: relative;jusqu'ici */
	/*width: 400px;*/ /* ===>> Obs.: avec ce width à 100%, on obtient un effet de zoom <<=== */
	/*height: auto;*/
/* code activé 		margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px 7px 0px;
	text-decoration: none;
	line-height: 1.7;jusqu'ici */
/*	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;/**/
/*	border: 1px solid #666 !important;red*/
/*	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
}*/

.divimage8esq {
	display: inline-block;
	float: left;
	position: relative;
	width: 200px;
	height: auto;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	background-color: transparent;
	border: 1px solid transparent !important;
/*	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;*/
/*	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

.divimage8esq img {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	/*border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}


.divimage8dir {
	display: inline-block;
	float: left;
	position: relative;
	width: 250px;
	height: auto;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	background-color: transparent;
	border: 1px solid transparent !important;
/*	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;*/
/*	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

.divimage8dir img {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	padding: 0px 7px 0px;
	line-height: 1.7;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px !important;
	/*border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

/* --------------------------------------------------------------------------- */
/* div pour la photo à droite sur la page avec bordure - Ex.: page humour.html */
/* --------------------------------------------------------------------------- */

.divimage9 {
	display: inline-block;
	float: right;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 7px 7px;
	line-height: 1.7;
	background-color: transparent;
	border: 1px solid #666 !important;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
}

.divimage9 img {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 7px 7px;
	line-height: 1.7;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px !important;
/*	border: 1px solid #666 !important;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.7);*/
}

/*code activé.divimage9:hover {		
	display: inline-block;
	position: relative;jusqu'ici*/
	/*width: 400px;*/ /* ===>> Obs.: avec ce width à 100%, on obtient un effet de zoom <<=== */
	/*height: auto;*/
/* code activé	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px 7px 0px;
	text-decoration: none;
	line-height: 1.7; jusqu'ici */	
/*	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;/**/
/*	border: 1px solid #666 !important;red*/
/*	-webkit-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-moz-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	-ms-box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
	box-shadow: 0px 0px 0px 5px rgba(169, 169, 169, 0.9);
}*/

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/*                     Fin des divs pour les photos                       */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*       Fin de la colonne centrale pour les textes et images       */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*  Début des colonnes situés après la colonne centrale pour les 5 divs de photos miniatures */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

.colonne img {
	position: relative;
	display: inline-block;
  	float: left;
  	width: 18.40%;/* c'était 18.40%. À 18,44% marche encore */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0.86%;
	margin-right: 0.7%;
	background-color: #F5F5F5;
	padding: 4px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px !important;
	border: 1px solid #999999 !important;
	overflow: hidden;
}

.colonne img:hover {
	border: 1px solid #4B4B4B !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
}

.colonne2 img {
	position: relative;
	display: inline-block;
  	float: left;
  	width: 23.35%;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0.86%;
	margin-right: 0.7%;
	background-color: #F5F5F5;
	padding: 4px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px !important;
	border: 1px solid #999999 !important;
	overflow: hidden;
}

.colonne2 img:hover {
	border: 1px solid #4B4B4B !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
}


/* Clearfix (clear floats) */
.row::after {
	content: "";
	clear: both;
	display: table;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*   Fin des colonnes situés après la colonne centrale pour les 5 divs de photos miniatures  */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*   Début du div pour les boutons navigation des pages du site et pages photos avant le pied de page  */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

.navnumpage {
	float: left;
	width: 62.49999%;
	margin-top: 5px;
	margin-left: 18.99999%;
	margin-right: 19.24999%;
	padding: 10px 5px 8px 5px;
	background-color: #c8dcee;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px !important;
	overflow-x: hidden;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*    Fin du div pour les boutons navigation des pages du site et pages photos avant le pied de page   */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */


/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*    Début du code pour les boutons précédent, suivant, numéros de pages et les 3 points    */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

.boutonprecsuiv {
	display: inline-block;
	font-family: Verdana, sans-serif, bold; 
	font-size: 0.9rem;
	text-align: center;
	outline: none;
}

.boutonprecsuiv a {
	color: black;
	float: left;
	padding: 1px 8px 2px; /* 2px 8px 3px; */
	margin: 0.1rem 0.20rem -0.25rem 0.20rem;
	text-align: center;
	text-decoration: none;
	background-color: #FAFAFA;
	transition: background-color .3s;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	border: 1px solid #999999 !important;
	outline: none;
}

.boutonprecsuiv a.active {
	background-color: #ADD8E6;
	color: #0000FF;
	padding: 1px 8px 2px; /* 2px 8px 3px; */
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	border: 1px solid #1F85E0 !important;
	outline: none;
}

.boutonprecsuiv a:hover:not(.active) {
	background-color: #ddd;
	border: 1px solid #1F85E0 !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16);
	outline: none;
}

/* Div pour les 3 points entre les numeros des pages */
div.bouton7 {
	display: inline;
	font-size: 14px;
	font-weight: bold;
	color: #0000FF;
	margin-left: 4px;
	margin-right: 0px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	border: none;
	outline: none;
}
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*   Fin du code pour les boutons précédent, suivant, numéros de pages et les 3 points  */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*   Début du div pied de page pour la dernière modification, le copyright et nombre de visites   */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

.pieddepage {
	float: left;
	width: 62.49999%;
	background-color: #e1ebeb;
	font-size: 10px;
	color: #000099;
	margin-left: 18.99999%;
	margin-right: 19.24999%;
	margin-top: 7px;
	margin-bottom: 10px;
	padding-bottom: 0px;
	padding-left: 1px;
	padding-right: 1px;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px !important;
	overflow-x: hidden;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*  Début du code pour les divs dernière modification, copyright et nombre visites */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

.divdernieremodif {
	float: left;
	width: 132px;
	height: 42px;
	margin-top: 8px;
	margin-left: 5px;
	margin-bottom: 3px;
	padding-top: 6px;
	padding-bottom: 2px;
	font-size: 9px;
	color: #0000FF;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px !important;
	border: 1px solid #0066cc !important;
	background-color: #E1EBEE;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.10);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.10);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.10);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.10);
}

.divvisite { 
	float: right;
	width: 132px;
	height: 42px;
	margin-right: 5px;
	margin-top: 8px;
	margin-bottom: 7px;
	padding-top: 2px;
	padding-bottom: 3px;
	font-size: 9px;
	color: #0000FF;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px !important;
	border: 1px solid #0066cc !important;
	background-color: #E1EBEE;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.10);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.10);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.10);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.10);
}

div.divvisite img {
	height: 19px;
	width: 88px;
	border: 0px;
	margin-top: 4px;
}

.divcopyright {
	display: inline-block;
	float: left;
	margin-left: 9%;
	margin-top: 21px;
	margin-bottom: 21px;
}	
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*  Fin du  code pour les divs dernière modification, copyright et nombre visites  */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */


 /*---------------------------*\
*     Début des media query     *
 \*---------------------------*/

@media only screen and (max-width: 480px) {
	.spheresp  {
	display: none; 
  }
}

@media (max-width: 480px) {
	.divcopyright {
	margin-left: 4.7%;
	font-size: 8.5px;
  }
}

@media only screen and (max-width: 575px) {
	.boutonactive, .boutonactive a, .boutonactive2, .boutonactive2 a, .divimage6:hover, .colonnecentrale {
	margin: 2px 0px 2px;
	float: none;
	width: 99.99999%;
  }
}

@media only screen and (max-width: 575px) {
	.boutonnav, .boutonnavpt, .navmilieu, .navdroite {
	margin: 4px 0px 4px;
	float: none;
	width: 99.99999%;
  }
}

/*div bouton contact - smartphone, tablette moyenne */
@media only screen and (max-width: 575px) {
	.bouton2, .bouton2 a, .bouton2pt, .bouton2pt a {
	margin: 2px 0px 2px;
	float: none;
  }
}

@media only screen and (max-width: 575px) {
	.bouton2bis, .bouton2bis a, .bouton2ptbis, .bouton2ptbis a {
	margin: -0.20rem 0px 2px;
	float: none;
	width: 99.99999%;
  }
}

/*div bouton contact - smartphone, tablette moyenne + petit écran 13" 991px) */
@media only screen and (min-width: 575px) and (max-width: 768px) {
	.bouton2bis, .bouton2bis a, .bouton2ptbis, .bouton2ptbis a {
 	margin: 2px 0px 2px;
	float: none;
  }
}

/*div bouton contact - smartphone, tablette moyenne + petit écran 13" 991px) */
@media only screen and (min-width: 575px) and (max-width: 992px) {
	.bouton2, .bouton2 a, .bouton2bis, .bouton2bis a, .bouton2pt, .bouton2pt a, .bouton2ptbis, .bouton2ptbis a{
 	margin: 2px 4px 2px;
	float: none;
  }
}

/* div photo du jour - smartphone + écran petite tablette */
@media only screen and (max-width: 575px) { 
	.divimage6 img, .divimage7 img, .divimage7v2 img, .divimage8 img, .divimage8esq img, .divimage8dir img, .divimage9 img {
	float: none;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 189.99999%;
  }
}

/* formulaire responsive */
@media only screen and (max-width: 600px) {
	.textegauche, .textedroite {
	width: 99.99999%;
	margin-top: 0px;
  }
}

/* formulaire responsive */
@media only screen and (max-width: 600px) {
	input[type=submit], input[type=submit]:hover {
	background-color: #005CB9;/*  #001BD5!important; */
	width: 49.99999%;
	height: 42px;
	margin-top: 0px;
  }
}

/* position flèche vers la gauche et vers la droite pages photos */
@media only screen and (max-width: 575px) {
	.boutonversgauche, .boutonversdroite {
	/*top: -20%;*/
	margin-top: -10%;
  }
}

/* position flèche vers la gauche et vers la droite pages photos */
@media only screen and (min-width: 575px) and (max-width: 768px) {
	.boutonversgauche, .boutonversdroite {
	/*top: -20%;*/
	/*margin-top: -10%;*/
	margin: auto 0px;
  }
}

/* cacher les deux divs de overlay dans les petits écrans */
@media only screen and (max-width: 992px) {
	.texteaudessus, .texte, .cacher {
	visibility: hidden;
	display: none;/*	*/
  }
}

/* div photo du jour - écran tablette moyenne */
@media only screen and (min-width: 575px) and (max-width: 768px) {
	.divimage6 img, .divimage7 img, .divimage7v2 img, .divimage8 img, .divimage8esq img, .divimage8dir img, .divimage9 img {
	float: none;
	margin-top: 0px;
	margin-left: 25%;
	margin-right: 25%;
	width: 49.99999%;
  }
}

/* div photo du jour - écran plus grand  +- 13"  */
@media only screen and (min-width: 768px) and (max-width: 992px) {
	.divimage6 img, .divimage7, .divimage7 img, .divimage7bis, .divimage7v2, .divimage7v2 img, .divimage8 img, .divimage8, .divimage8esq img, .divimage8esq, .divimage8dir img, .divimage8dir, .divimage9 img, .divimage9 {
	float: none;
	margin-top: 0px;
	margin-left: 25%;
	margin-right: 25%;
	width: 49.99999%;
  }
}

@media only screen and (max-width: 992px) {
	.divimage6:hover .texteaudessus, .divimage7:hover .texteaudessus, .divimage7v2:hover .texteaudessus, .divimage8:hover .texteaudessus, .divimage8esq:hover .texteaudessus .divimage8dir:hover .texteaudessus {
	display: block;
	float: none;
	margin-top: 0px;/**/
	margin-left: 28.5%;
	margin-right: 50%;
	margin-bottom: 0px;
	width: 43%;
  }
}

/* zone de texte, en-tête, boutons de navigation et box photo des pages photo au hasard */
@media only screen and (max-width: 991px) {
	.colonnecentrale, .bannerentete, .navmilieu, .navdroite, .divimage7, .divimage7:hover, .divimage7v2, .divimage7v2:hover, .divimage7bis {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 99.99999%;
  }
}

@media only screen and (max-width: 992px) {
	.divformulaire, .divmsgtr, .divtexteimage1, .divtexteimage1bis, .divtexteimage2, .divtexteimage2bis, .divtexteimage4, .divtexteimage5, .divimage6, .divimage6:hover, .divimage8, .divimage8esq, .divimage8dir, .divimage9 {
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 99.99999%;
  }
}

@media only screen and (min-width: 992px) {
	.divimage6, .divimage6:hover, .divimage8, .divimage8:hover, .divimage8esq, .divimage8esq:hover, .divimage8dir, .divimage8dir:hover, .divimage9, .divimage9:hover {
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
  }
}

/* Div météo position à gauche */
@media only screen and (max-width: 992px) {
	.divtexteimage3, .divtexteimage3v2 {
	clear: both;
	float: none;
	margin-top: 50px;
	margin-left: 0px;
	margin-right: 0px;
	width: 99.99999%;
  }
}

/* Div météo position à droite */
@media only screen and (max-width: 992px) {
	.divtexteimage3posdr, .divtexteimage3posdrv2 {
	clear: both;
	float: none;
	margin-top: 50px;
	margin-left: 0px;
	margin-right: 0px;
	width: 99.99999%;
  }
}

@media only screen and (max-width: 992px) {
	.navnumpage, .pieddepage {
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5px;
	width: 89.48%;
  }
}

/* www.KNACSS.com v7.1.1 (december, 10 2018) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/*/
@media print {
	* {
    background: transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
	box-shadow: none !important;
    text-shadow: none !important;
  }
	body {
    width: auto;
    margin: auto;
    font-family: serif;
    font-size: 12pt;
  }
	p, .p-like, h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, blockquote, label, ul, ol {
    color: #000;
    margin: auto;
  }
	.print {
    display: block;
  }
	.no-print {
    display: none;
  }
  /* no orphans, no widows */
	p, .p-like, blockquote {
    orphans: 3;
    widows: 3;
  }
  /* no breaks inside these elements */
	blockquote, ul, ol {
    page-break-inside: avoid;
  }
  /* page break before main headers
  h1,
  .h1-like {
    page-break-before: always;
  }
  */
  /* no breaks after these elements */
	h1, .h1-like, h2, .h2-like, h3, .h3-like, caption {
    page-break-after: avoid;
  }
	a {
    color: #000;
  }
  /* displaying URLs
  a[href]::after {
    content: " (" attr(href) ")";
  }
  */
  	a[href^="javascript:"]::after,
  	a[href^="#"]::after {
    content: "";
  }
}

 /*-------------------------*\
*     Fin des media query     * 
 \*-------------------------*/


/* **** **** **** **** **** **** **** **** **** */
/*   Début du code pour l'overlay et les liens  */
/* **** **** **** **** **** **** **** **** **** */

/* Début du code pour l'overlay */
.texteaudessus {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 88%;
	height: 0;
	margin-left: 6%;
	margin-right: 50%;
	margin-bottom: 0px;
	background-color: #008CBA;
	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	-ms-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px !important;
	overflow: hidden;
	transition: .5s ease;
	opacity: 0.6;
	transition: opacity 0.5s;
	/* pour Internet Explorer */
	filter: alpha(opacity=50);
	/* Déclenche "hasLayout" dans IE 7 et antérieurs */
	zoom: 1; 
	outline: none;
}

.divimage6:hover .texteaudessus {
	height: 15%;
	margin-bottom: 0.75rem;
	overflow: hidden;
	/* pour Internet Explorer */
	filter: alpha(opacity=50);
	zoom: 1;
	outline: none;
 }

.divimage7:hover .texteaudessus {
	height: 15%;
	margin-bottom: 0.75rem;
	overflow: hidden;
	/* pour Internet Explorer */
	filter: alpha(opacity=50);
	zoom: 1;
	outline: none;
 }

.divimage8:hover .texteaudessus {
	height: 16%;
	margin-bottom: 0px;
	overflow: hidden;
	/* pour Internet Explorer */
	filter: alpha(opacity=50);
	zoom: 1;
 	outline: none;
}

.divimage8esq:hover .texteaudessus {
	height: 16%;
	margin-bottom: 0px;
	overflow: hidden;
	/* pour Internet Explorer */
	filter: alpha(opacity=50);
	zoom: 1;
 	outline: none;
}

.divimage8dir:hover .texteaudessus {
	height: 16%;
	margin-bottom: 0px;
	overflow: hidden;
	/* pour Internet Explorer */
	filter: alpha(opacity=50);
	zoom: 1;
 	outline: none;
}
.texte {
	white-space: nowrap; 
	color: white;
	font-size: 1rem;
	position: absolute;
	margin-bottom: 0px;
	overflow: hidden;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 1;
	outline: none;
}
/* Fin du code pour l'overlay */

/* Début du code pour les liens */
.lien{
	border-bottom: 1px dotted #0000FF;
	outline: none;
}
  		  
a:link    {color:#0066CC; text-decoration:none;}
a:visited {color:#0066CC; text-decoration:none;}
a:hover   {color:#FF0000; text-decoration:none;}
a:lien    {text-decoration:none;}
/* Fin du code pour les liens */

/* **** **** **** **** **** **** **** **** **** */
/*    Fin du code pour l'overlay et les liens   */
/* **** **** **** **** **** **** **** **** **** */


/* **** **** **** **** **** **** **** **** **** */
/*    Début des boutons de navigation photos    */
/* **** **** **** **** **** **** **** **** **** */

.boutonversgauche {
	position: absolute;
	width: 30px;
	height: 45px;
	top: 35%;
	left: 8px;
	font-size: 2rem;
	color: black;
	padding-top: 2px;
	-webkit-transform: translate(-42%, -42%);
	-moz-transform: translate(-42%, -42%);
	-ms-transform: translate(-42%, -42%);
	transform: translate(-42%, -42%);
 	-webkit-border-radius: 0px 50% 50% 0px;
	-moz-border-radius: 0px 50% 50% 0px;
	-ms-border-radius: 0px 50% 50% 0px;
	border-radius: 0px 50% 50% 0px !important;
	opacity: 0.6;
	cursor: pointer;
	outline: none;
}

.boutonversgauche:hover {
	color: #0000FF;
	opacity: 1;
	outline: none;
}

.boutonversdroite {
	position: absolute;
	width: 30px;
	height: 45px;
	top: 35%;
	right: -17px;
	font-size: 2rem;
	color: black;
	padding-top: 2px;
	-webkit-transform: translate(-42%, -42%);
	-moz-transform: translate(-42%, -42%);
	-ms-transform: translate(-42%, -42%);
	transform: translate(-42%, -42%);
 	-webkit-border-radius: 50% 0px 0px 50%;
	-moz-border-radius: 50% 0px 0px 50%;
	-ms-border-radius: 50% 0px 0px 50%;
	border-radius: 50% 0px 0px 50% !important;
	opacity: 0.6;
	cursor: pointer;
	outline: none;
}

.boutonversdroite:hover {
	color: #0000FF;
	opacity: 1;
	outline: none;
}

/* **** **** **** **** **** **** **** **** */
/*   Fin des boutons de navigation photos  */
/* **** **** **** **** **** **** **** **** */


/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*       Début du code pour les boutons précédent et suivant en haut avant la photo     */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

.boutonprecsuivhaut {
	display: inline-block;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 16px;
	text-align: center;
	outline: none;
}

.boutonprecsuivhaut a {
	color: black;
	padding: 7px 10px 9px;
	margin: 0.1rem 0.25rem -0.25rem 0.25rem;
	text-align: center;
	text-decoration: none;
	background-color: #D3D3D3;
	transition: background-color .3s;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	border: 1px solid #999999 !important;
	outline: none;
}

.boutonprecsuivhaut a.active {
	background-color: #ADD8E6;
	color: #0000FF;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	border: 1px solid #1F85E0 !important;
	outline: none;
}

.boutonprecsuivhaut a:hover {
	background-color: #F5F5F5;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50% !important;
	border: 0.09rem solid #1F85E0 !important;
	color: #0000FF;
	outline: none;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*       Fin du code pour les boutons précédent et suivant en haut avant la photo       */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */


/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*     Début du code pour les infobulles des pages précédente et suivante     */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* Bulle cliquez dans la miniature */
.bullecliquemin {
	display: inline-block;
	float: none;
	position: relative;
	margin-bottom: 0.9rem;
	padding-bottom: 0.15rem;
	font-size: 12px;
	font-weight: normal;
	color: #2034bd;					 					
	background: #E9E9E9;								
	border: 2px solid #00CCFF;													
}																										

.bullecliquemindir {
	display: inline-block;
	float: none;
	position: relative;
	margin-bottom: 0.9rem;
	padding-bottom: 0.15rem;
	font-size: 12px;
	font-weight: normal;
	color: #2034bd;					 					
	background: #E9E9E9;								
	border: 2px solid #00CCFF;													
}																										

.bullecliquemindir:hover {
		background: #D7D7D7;
}

/* flèche vers le bas dans l'infobulle */
.flecheinfobullepp, .flecheinfobulleps { 
	display: inline-block;
	float: none;
	position: relative;
	margin-bottom: 0.9rem;								/*==================================================================================================*/
	padding-bottom: 0.15rem;							/*																									*/
	font-size: 12px;									/*					Pour changer la position de la pointe de la flèche								*/
	font-weight: normal;								/*																									*/
	color: #2034bd;					 					/*==================================================================================================*/
	background: #E9E9E9;								/*																									*/
	border: 2px solid #00CCFF;							/*					Pour changer la position de la pointe de la flèche								*/						
}														/*																									*/												
.flecheinfobullepp:after, .flecheinfobullepp:before {	/*		  en bas -->       top: 100%  left: 50%														*/ 	 
	top: 100%;											/*		 en haut -->	bottom: 100%  left: 50%	  													*/
	left: 37%;											/*		à gauche -->  	 right: 100%   top: 50%                                        		 		*/      
	border: solid transparent;							/*		à droite -->   	  left: 100%   top: 50%                                       	    		*/
	content: " ";										/*                                                     												*/
	height: 0;											/*	Autres valeurs à changer:	   																	*/
	width: 0;											/* 									 		  														*/
	position: absolute;									/*	.fecheinfobullexx:after																			*/
	pointer-events: none;								/*													   												*/
}														/*		  en bas -->	border-top-color: #0000E0;													*/
.flecheinfobullepp:after  { 							/*		 en haut -->	border-bottom-color: #0000E0;												*/
	border-color: rgba(136, 183, 213, 0);				/*		à gauche -->	border-right-color: #0000E0; 												*/
	border-top-color: #0000E0;							/*		à droite -->	border-left-color: #0000E0;													*/
	border-width: 7px;									/*														   											*/
	margin-left: -7px;									/*	.flecheinfobullexx:before												   						*/
}														/*																									*/
.flecheinfobullepp:before  {							/*		  en bas -->	border-top-color: #C2E1F5;													*/
	border-color: rgba(194, 225, 245, 0);				/*		 en haut -->	border-bottom-color: #C2E1F5;												*/
	border-top-color: #c2e1f5;							/*		à gauche -->	border-right-color: #C2E1F5;												*/
	border-width: 7px;									/*		à droite -->	border-left-color: #C2E1F5;													*/
	margin-left: -7px;									/*																									*/
}														/*==================================================================================================*/

.flecheinfobulleps:after, .flecheinfobulleps:before { 
	top: 100%;
	left: 58%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;	
	pointer-events: none;
}

.flecheinfobulleps:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #0000E0;
	border-width: 7px;
	margin-left: -7px;
}

.flecheinfobulleps:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 7px;
	margin-left: -7px;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*      Fin du code pour les infobulles des pages précédente et suivante      */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */


/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*    Début du code pour les infobulles des pages précédente et suivante pages en PT    */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* flèche vers le bas dans l'infobulle */
.flecheinfobullepppt, .flecheinfobullepspt { 
	display: inline-block;
	float: none;
	position: relative;
	margin-bottom: 0.9rem;
	padding-bottom: 0.15rem;
	font-size: 12px;
	font-weight: normal;
	color: #2034bd;
	background: #E9E9E9;
	border: 2px solid #00CCFF;						
}
.flecheinfobullepppt:after, .flecheinfobullepppt:before {
	top: 100%;
	left: 41%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.flecheinfobullepppt:after  {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #0000E0;
	border-width: 7px;
	margin-left: -7px;
}
.flecheinfobullepppt:before  {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 7px;
	margin-left: -7px;
}

.flecheinfobullepspt:after, .flecheinfobullepspt:before { 
	top: 100%;
	left: 62%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;	
	pointer-events: none;
}

.flecheinfobullepspt:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #0000E0;
	border-width: 7px;
	margin-left: -7px;
}

.flecheinfobullepspt:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #c2e1f5;
	border-width: 7px;
	margin-left: -7px;
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*      Fin du code pour les infobulles des pages précédente et suivante pages en PT    */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** */
/*    Début code section pour les formulaires   */
/* **** **** **** **** **** **** **** **** **** */

input[type=text] {
	width: 100%;
	padding: 12px;
	color: #000000;
	text-align: left;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 0.9rem;
	border: 1px solid #ccc;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px;
	resize: none;
	outline: none;
}

label {
	height: 20px;
	line-height: 20px;
	padding: 12px 12px 12px 0px;
	display: inline-block;
	outline: none;
}

::-moz-placeholder {
	text-align: left;
} 

:-ms-input-placeholder {
	text-align: left;
} 

input:-moz-placeholder {
	text-align: left;
}

textarea {
	width: 100%;
	padding: 12px 10px 10px;/**/
	color: #000000;
	text-align: justify;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 0.9rem;
	border: 1px solid #ccc;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	resize: none;
	outline: none;
}

input[type=checkbox] {
	font-size: 2rem;
	margin-left: 5px;
	box-shadow: 0 0 10px 2px #4B95E7;
}

input[type=submit] {
	-webkit-appearance: none;
	background-color: #1B77CB;
	color: white;
	height: 42px;
	line-height: 42px;
	padding: 0px 20px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	float: right;
	outline: none;
}

input[type=submit]:hover {
	-webkit-appearance: none;
	background-color: #4B95E7;
	outline: none;
}

input[type=reset] {
	-webkit-appearance: none;
	background-color: #4B95E7;
	color: white;
	height: 25px;
	line-height: 25px;
	padding: 0px 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	float: left;
	outline: none;
}

input[type=reset]:hover {
	-webkit-appearance: none;
	background-color: #89BAEF;
	outline: none;
}

.conteneurform {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px !important;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	outline: none;
}

.texterror {
	color: blue;
	font-size: 11px;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	outline: none;
}

.textform {
	color: black;
	font-size: 0.9rem;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	outline: none;
}

.textegauche {
	float: left;
	width: 50%;
	margin-top: 8px;
	outline: none;
}

.textedroite {
	float: left;
	width: 100%;
	margin-top: 0px;
	outline: none;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
/* **** **** **** **** **** **** **** **** **** */
/*     Fin code section pour les formulaires    */
/* **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** */
/*      Début code pour les anecdotes      */
/* **** **** **** **** **** **** **** **** */

.titreanecdote{
	font-size: 1rem;
	font-variant: small-caps;
	text-align: left;
	padding: 0px 10px 0px;
}

.txtanecdote {
	text-align: justify;
	padding: 0px 10px 4px;"
}

/* **** **** **** **** **** **** **** **** */
/*       Fin code pour les anecdotes       */
/* **** **** **** **** **** **** **** **** */

.txtsurimg {
	position:absolute;
	z-index:10;
	background:transparent;
}
/* ///////////////////////////////////////******\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*     Début code pour l'image modal - nouvelle page ouverte quand click sur l'image    */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* La fenêtre Modal et l'arrière-plan) */
.modal {
	display: none; /* Cachée par défaut */
	position: fixed; /* Reste en place */
	z-index: 10; /* Devant la fenêtre principale */
	padding-top: 100px; /* Position de la box image */
	left: 0;
	top: 0;
	width: 100%; /* Occupe la totalité de la largeur de l'écran */
	height: 100%; /* Occupe la totalité de la hauteur de l'écran */
	overflow: auto; /* Si besoin met la barre de scroll */
	background-color: rgb(0,0,0); /* Couleur de l'arrière-plan */
	background-color: rgba(0,0,0,0.9); /* Transparence de la couleur de l'arrière-plan (ici = noir) c'était à 0.9 */
}

/* Modal Contenu (image) */
.modal-content {
	z-index: 10; /* Devant la fenêtre principale */
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}
/* Caption pour Modal Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: white; /* #ccc; */
	padding: 8px 16px; /* 10px 0; */
/*	height: 150px;*/
}

/* Ajouter Animation */
.modal-content, #caption {  
	-webkit-animation-name: zoom;
	animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
	from {-webkit-transform: scale(0)} 
	to {-webkit-transform: scale(1)}
}

@keyframes zoom {
	from {transform: scale(0)} 
	to {transform: scale(1)}
}

.fermer {
	position: absolute;
	top: 25px;
	right: 35px;
	-webkit-transition: 0.3s; /* Safari et Chrome */
	-moz-transition: 0.3s; /* Firefox */
	-ms-transition: 0.3s; /* Internet Explorer 9 */
	-o-transition: 0.3s; /* Opera */
	transition: 0.3s;
}

.fermer:hover, .fermer:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.8;
	-webkit-transform: rotate(360deg); /* rotation de l'image */
	-moz-transform: rotate(360deg); /* rotation de l'image */
	-ms-transform: rotate(360deg); /* rotation de l'image */
	-o-transform: rotate(360deg); /* rotation de l'image */
  	transform: rotate(360deg);
}

.fermertxt {
	position: absolute;
	top: 5px;
	right: 1.75rem;
	color: #f1f1f1;
	font-size: 14px;
	-webkit-transition: 0.3s; /* Safari et Chrome */
	-moz-transition: 0.3s; /* Firefox */
	-ms-transition: 0.3s; /* Internet Explorer 9 */
	-o-transition: 0.3s; /* Opera */
	transition: 0.3s;
}

/* 100% largeur image pour les petits écrans */
@media only screen and (max-width: 700px) {
	.modal, .modal-content {
	width: 100%;
  }
}

/* Code pour les pages photos de ma vie et autres - image plus petite en modal */

/* La fenêtre Modal et l'arrière-plan) */
.modalfmv {
	display: none; /* Cachée par défaut */
	position: fixed; /* Reste en place */
	z-index: 10; /* Devant la fenêtre principale */
	padding-top: 100px; /* Position de la box image */
	left: 0;
	top: 0;
	width: 100%; /* Occupe la totalité de la largeur de l'écran */
	height: 100%; /* Occupe la totalité de la hauteur de l'écran */
	overflow: auto; /* Si besoin met la barre de scroll */
	background-color: rgb(0,0,0); /* Couleur de l'arrière-plan */
	background-color: rgba(0,0,0,0.9); /* Transparence de la couleur de l'arrière-plan (ici = noir) */
	/*opacity: 1;*/
}

/* Modal Contenu (image) */
.modalfmv-content {
	z-index: 10; /* Devant la fenêtre principale */
	margin: auto;
	display: block;
	width: 30%;
	max-width: 480px; /* pour limiter la taille dans la fenêtre modal // avant = 700px 480px\\ */
}

/* 100% largeur image pour les petits écrans */
@media only screen and (max-width: 575px) {
	.modalfmv-content {
	width: 100%; /* 80%; */
	max-width: 380px; /* 300px */
  }
}

/* 100% largeur image pour les petits écrans 	.modalfmv,;(max-width: 700px)*/
@media only screen and and (min-width: 575px) and (max-width: 992px) {
	.modalfmv-content  {
	width: 100%;
  }
}


/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 480px) and (max-width: 992px) {
	.modalfmv, .modalfmv-content  {
	width: 100%;
  }
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*      Fin code pour l'image modal - nouvelle page ouverte quand click sur l'image     */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** */
/*    Début des boutons de navigation photos image modal   */
/* **** **** **** **** **** **** **** **** **** */

/* 100% largeur image pour les petits écrans */
@media only screen and (max-width: 700px) {
	.boutonversgauchemodal, 
	.boutonversdroitemodal {
	bottom: 56%;
	margin-left: -15px;
	margin-right: -15px;
	background-color: transparent !important;
	opacity: 1;
  }
}

/* 100% largeur image pour les petits écrans */
@media only screen and (max-width: 700px) {
	.boutonversgauchemodal:hover, 
	.boutonversdroitemodal:hover {
	padding: 0.8rem 1rem 0.8rem 1rem;
	background-color: rgba(254,254,254,0.1)
  }
}


/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 700px) {
	.boutonversgauchemodal,	
	.boutonversdroitemodal {
	bottom: 50%;
	margin-left: 15px;
	margin-right: 15px;
	opacity: 1;
  }
}

/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 700px) {
	.boutonversgauchemodal:hover {
	bottom: 50%;
	padding: 0.8rem 1rem 0.8rem 1rem;	
	margin-left: 15px;
	margin-right: 15px;
	background-color: rgba(0,0,0,0.1) !important;
	opacity: 1;
  }
}

/* 100% largeur image pour les petits écrans */
@media only screen and (min-width: 700px) {
	.boutonversdroitemodal:hover {
	bottom: 50%;
	padding: 0.8rem 1rem 0.8rem 1rem;	
	margin-left: 15px;
	margin-right: 15px;
	background-color: rgba(0,0,0,0.5) !important;
	opacity: 1;
  }
}

.boutonversgauchemodal {
	position: absolute;
	width: auto;
	z-index: 23;
	left: 0;
	font-weight: bold;
	font-size: 2rem;
	color: #DADADA;
	padding: 0.8rem 1rem 0.8rem 1rem;
	margin-top: -50%;
	opacity: 0.9; /* c'était à 0.5 */
 	-webkit-border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	-ms-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px !important;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	outline: none;
}

.boutonversdroitemodal {
	position: absolute;
	width: auto;
	z-index: 1000;
	right: 0;
	font-weight: bold;
	font-size: 2rem;
	color: #D0D0D0;
	padding: 0.8rem 1rem 0.8rem 1rem;
	margin-top: -50%;
	opacity: 0.9; /* c'était à 0.6 */
 	-webkit-border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	-ms-border-radius: 0px 3px 3px 0px;
	border-radius: 0px 3px 3px 0px !important;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	outline: none;
}

.boutonversgauchemodal:hover, .boutonversgauchemodal:focus {
	opacity: 0.8;
	background-color: rgba(0,0,0,0.5) !important;
	outline: none;
}

.boutonversdroitemodal:hover, .boutonversdroitemodal:focus {
	opacity: 1;
	background-color: rgba(0,0,0,0.6) !important;
	outline: none;
}

.caption-conteneur {
	text-align: center;
	background-color: black;
	padding: 2px 16px;
	color: white;
}

/* **** **** **** **** **** **** **** **** */
/*   Fin des boutons de navigation photos  */
/* **** **** **** **** **** **** **** **** */