/* ------------------------------------------------------------------------- */
/*  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"); /* modifié le 06/05/2020 - au lieu du ";" il y avait une "," */
	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: 10px;*/
	padding-top: 10px;
	padding-bottom: 20px !important;
	padding-left: 10px;
	padding-right: 10px;
	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;
}

a:title {
	text-align: center;
}

.hautpage {
	padding-top: 0px;
	padding-bottom: 0px;	
	border: 2px solid transparent;
}

/* Barre progression défilement */
.barre_progress {
	background: #0000FF;
	height: 5px;
	border-radius: 4px;
	width: 0%;
	position: fixed;
	top: 0;
	left: 0;
	z-index:9999;
}

@media only screen and (max-width: 600px) {
	.barre_progress {
	width: 50%;
	left: 0;
	right: 50%;
  }
}

.conteneur {
	display: block;
/*	float: none;*/
	max-width: 1024px;
/*	top: 0px;
	bottom: 5px;
	width: auto; 70%; /*80%; /* %; 77.84*/
	margin: -8px -5px 10px -5px;
/*	margin-top: -8px;
/*	margin-left: -5px; /* auto;  modifié le 03/05/21 */
/*	margin-right: -5px; /* auto;  modifié le 03/05/21 */
/*	margin-bottom: 20px !important;*/
	padding: 20px;
	background-color: #E1EAEA; /* lightgray;#FF0000;  */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	-webkit-box-shadow: 0px 0px 7px 7px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 7px 7px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 0px 7px 7px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 7px 7px rgba(0,0,0,0.1);
	border: 1px solid #999999 !important;
	overflow-x: hidden;
	outline: none;
}

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

/* écran smartphone petit
@media only screen and (min-width: 768px) {
	.conteneur {
	float: none;
	width: auto;
	margin-top: 0px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
  }
}
*/
/* écran smartphone petit*/
@media only screen and (min-width: 992px) {
	.conteneur {
	float: none;
	width: auto;
/*	margin-top: -8px;*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
  }
}
	
/* Header/Blog Title */
/*
.header {
	position: relative;
  padding: 30px 20px 20px;  30px; 
  text-align: center;
  background: lightblue;
  margin-bottom: 10px;  20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
}

.header h1 {
  font-size: 1.5rem;
}
*/
.banner {
	background-image: url(../images_site/fondsp.png);
	background-size: 100% 100%;
/*	background-color:#fff; */
	height: 120px; /* original: 170px; */
	margin-top: 0px; /* -20px; */
/*	margin-bottom: -30px;  original: -30px; */
	padding-top: 0px;
	padding-bottom: 0px;
	-webkit-border-radius: 0px 0px 10px 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
}

.banner h1 {
  font-size: 2rem;
margin-left: 25%;
margin-right: 25%;
}

.subbanner{
	background-color: #D7D7D7; /* #CCCCCC #666666; */
	height: 40px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	-webkit-border-radius:  0px 0px 10px 10px;
	-moz-border-radius:  0px 0px 10px 10px;
	-ms-border-radius:  0px 0px 10px 10px;
	border-radius:  0px 0px 10px 10px !important;

}

.esfera {
	float:left;
	width: 100px; /* original: 142px; */
	height: 100px; /* original: 142px; */
	margin-top: 10px; /* original: 14px; */
	margin-left: 10px; /* original: 14px; */
/*	margin-bottom: -20px;*/
/*	padding: 20px 0px 0px 20px;  H D B G */
	background-image: url(../images_site/esfera100.gif);
	filter: drop-shadow(3px 3px 0.4rem #747474);
}

.esfera:hover {
	float:left;
/*	padding: 14px 0px 0px 14px; */
	background-image: url(../images_site/esferaroda100esqdir.gif);
}

/* Style the top navigation bar 	
*/
.topnav {
	margin-top: 20px; /* 50px; */
	overflow: hidden;
	background-color: #fff; /* #333; */
	padding: 0px;/*12px 16px 14px; /*12px 16px 14px;/* Haut DroiteGauche Bas  == HautBas DroiteGauche */
	-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;
	border: double blue;
}

/* Style the topnav links */
.topnav a {
	float: left;
	background-color: #ddd;
	display: block;
	color: blue; /* #f2f2f2;*/
	text-align: center;
	margin-left: auto;
	margin-right: 10px;
	padding: 8px 8px 10px 4px !important; /* 10px 8px 12px 4px !important; /*12px 15px 14px; /*12px 16px 14px;/* Haut DroiteGauche Bas  == HautBas DroiteGauche */
	text-decoration: none;
	-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;
	border: 2px solid #1F85E0 !important;
/*  border: 2px solid violet;*/
}

/* Change color on hover */
.topnav a:hover {
	background-color: #608FE8;
	/*background-color: red;  #ddd; */
	color: white;
	-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;
	-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);
}

.boutontopnav {
/*	color: red;*/
}

.boutontopnav a {
/*	color: red;
	border: 2px solid violet;
  background-color: #ddd;*//**/
}

.boutontopnav a:hover {
/*  color: white;
	border: 2px solid red;*/
/*  background-color: red;#ddd;*/
}

button {
	width: 30px;
	height: 27px; /*auto;*/
	color: #2034bd;
	font-size: 1rem; /* 1.2rem; */
	text-align: center;
	margin-bottom: 7px;
	padding-left: 0px;
	padding-right: 0px;
	cursor: pointer;
	line-height: 0px;
}

button:hover {
	color: #FF0000;
	text-decoration: none;
}

.fondtitre {
	background-color: #CCCCCC;
	font-size: 13px; /* ajouté le 19_01_21 à 23h00  à voir pour les problèmes de taille dans les lignes suivantes */
	font-weight: bold;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 8px;
	padding-top: 5px;  /* 3px; */
	padding-bottom:  5px;  /* 3px; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

/* Create two unequal columns that floats next to each other */

/* Colonne gauche */
.colonnegauche {   
  float: left;
  background-color: transparent;
/*  visibility: hidden;*/
  position: relative;
/*  margin-left: -20px;  ajouté après avoir mis le background-color pour approcher le div avec le fieldset de la marge du conteneur */
  width: 44.9999%; /* 49.99%; /* 75%; */
/*  background-color: transparent;#red;  #eaeaea; #f1f1f1; */
}

/* Colonne milieu */
.colonnemilieu {
  float: none;
  width: 49.9999%;
  margin-left: auto;
  margin-right: auto; /* /* 33.333% 25%; */
/*  background-color: #green; /* #f1f1f1; */
/*  padding-left: 20px;/**/
}

/* Colonne milieu plus large
.colonnemilieubis {
  float: none;
  width: 69.9999%;
  margin-left: auto;
  margin-right: auto;*/ /* /* 33.333% 25%; */
/*  background-color: #green; /* #f1f1f1; */
/*  padding-left: 20px;/*
}*/

/* Colonne droite */
.colonnedroite {
  float: right; /* left; */
  position: relative;
/*  margin-right: -20px;  ajouté après avoir mis le background-color pour approcher le div avec le fieldset de la marge du conteneur */
  width: 44.9999%; /* 49.99%; /* 25%; */
/*  background-color: #blue;  #f1f1f1; */
  padding-left: 20px;
}

/* Colonne droite bis*/
.colonnedroitebis {
  float: right; /* left; */
  position: relative;
/*  margin-right: -20px;  enlevé le 30/12/20 == ajouté après avoir mis le background-color pour approcher le div avec le fieldset de la marge du conteneur */
  width: 34.9999%; /* 49.99%; /* 25%; */
/*  background-color: #blue;  #f1f1f1; */
  padding-left: 20px;
}

.colonnettlargeur {
	float: none; /* right; */
	width: 99.9999%; /*81.99999%;77.99999%; 62.49999%;   */
/*	background-color: #c8dcee;  #e1ebeb; */
	font-size: 0.8rem;
	color: #000099;
	margin-left: 0px;/* -5px; auto;-20px; 10.99999%; 18.99999%;  8.99999%; */
	margin-right: 0px;/* -5px; auto;-100px; 19.99999%; 19.24999%; */
	margin-top: 0px;  /*30px; */
	margin-bottom: 10px; /*10px; */
	padding-top: 0px;/**/
/*	padding-bottom: 7px; */
	padding-left: 0px;
	padding-right: 0px;/**/
	text-align: center;
/*	-webkit-border-radius: 10px 10px 0px 0px;  7px; 
	-moz-border-radius: 10px 10px 0px 0px;
	-ms-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px !important;*/
	overflow: hidden;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 /*
.fakeimg::after {
  content: ""; Important, sinon l'élément n'est pas généré.
  display: table;
  clear: both;
}
 */
/* Add a boxtxt effect for articles */
.boxtxt {
  background-color: transparent; /* white; */
  padding: 20px; /* 15px;  */
  padding-bottom: 0px;
  margin-top: 10px; /* 20px  */
  z-index: 100;
}

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

.boxtxt img {
	margin-top: 5px;
/*	padding-top: 5px;*/
	border: 6px solid #FFFFFF;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

/* Add a boxtxt effect for articles */
.boxtxt2 {
  background-color: transparent; /* #c8dcee; white; */
/*  padding: 20px;*/
	margin-top: 10px; /*  20px; */
	margin-left: 0px; /* */
	margin-right: 0px;
/*  margin-bottom: -20px;*/
  z-index: 100;
}

/* Add a boxtxt effect for articles */
.boxtxt3 {
	width: auto;
  background-color: transparent; /* #c8dcee; white; */
/*  padding: 20px;*/
	margin-top: 10px; /*  20px; */
	margin-left: 15%; /* */
	margin-right: 15%;
/*  margin-bottom: -20px;*/
  z-index: 100;
}
/*
.boxtxtvide::after {
  content: "";  Important, sinon l'élément n'est pas généré. 
  display: table;
  clear: both;
}
*/
/* -------------------------------------------------------------- */
/* div pour la photo à droite sur la page - Ex.: page photos.html */
/* -------------------------------------------------------------- */

.boximage {
/*	display: inline-block; */
	float: right;
/*	position: relative; */
	width: 400px;
	height: auto;
	margin-top: 0px;/**/
	margin-left: auto; /* 0px; */
	margin-right: auto; /* 0px; */
/*	padding-top: 20px;
	padding: 30px 0px 0px;
	line-height: 1.7;*/
	background-color: transparent;
 /*	border: 6px solid #FFFFFF; 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);*/
}

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

.boximage img {
/*	position: relative; */
	width: 99.9999%;
	height: auto;
/*	margin-top: 0px;*/
	margin-left: auto; /* 0px; */
	margin-right: auto; /* 0px; */
/*	padding: 0px 0px 0px;*/
	line-height: 1.7;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 6px solid #FFFFFF; /* transparent !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);*/
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.boximage {
	float: none;/**/
	margin-top: 0px; /**/
	margin-left: auto; /* 0px; */
	margin-right: auto; /* 0px; */
	margin-bottom: 0px;/* -20px; 0px; */
/*	padding-bottom: 0px;
	padding: 20px;*/
	width: 89.99999%;
/*	background: lightpink;*/
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	.boximage {
	float: none;/**/
	margin-top: 0px;
	margin-left: auto; /* 0px; */
	margin-right: auto; /* 0px; */
	margin-bottom: -10px;
	padding: 20px;
	width: 79.99999%;
/*	background: lightgreen;*/
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	.boximage {
	float: none;/**/
	margin-top: 0px;
/*	margin-left: 10%; 25%; */
/*	margin-right: 30%;  25%; */
	margin-bottom: 0px;
	width: 69.99999%; /* 49.99999% */
/*	background: lightgray;*/
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 992px) {
	.boximage {
	float: right;
	margin-top: 0px;
/*	margin-left: auto;10%;    0px; */
/*	margin-right: auto;20%;  0px; */
	margin-bottom: -10px;
/*	margin-left: 0px;*/
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 20px;
	width: 37.99999%; /* 34.99999% */
/*	background: lightblue;*/
  }
}

/* écran smartphone petit  img */
@media only screen and (max-width: 600px) {
	.boximage img {
/*	float: none; */
	margin-top: 5px;
/*	margin-left: auto;  0px; */
/*	margin-right: auto;  0px; */
/*	padding: 20px;
	width: 99.99999%;
	background: lightpink; */
  }
}

/* écran smartphone petit  img */
@media only screen and (min-width: 600px) {
	.boximage img {
/*	float: none; */
	margin-top: 5px;
/*	margin-left: auto;  0px; */
/*	margin-right: auto;  0px; */
/*	padding: 20px;
	width: 99.99999%;
	background: lightpink; */
  }
}

/* écran smartphone petit  img */
@media only screen and (min-width: 768px) {
	.boximage img {
/*	float: none; */
	margin-top: 5px;
/*	margin-left: auto;  0px; */
/*	margin-right: auto;  0px; */
/*	padding: 20px;
	width: 99.99999%;
	background: lightpink; */
  }
}

/* écran laptops/desktop  img */
@media only screen and (min-width: 992px) {
	.boximage img {
	float: right;
/*	margin-top: 10px;*/
	margin-left: auto;/*10%;    0px; */
	margin-right: auto;/*20%;  0px; */
	margin-top: 5px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 99.99999%;
	height: auto;
/*	background: lightblue;*/
  }
}

/*
@media only screen and (min-width: 992px) {
	.boximage {
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
  }
}
*/

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #acc; /* #ddd; */
  margin-top: 20px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
}

/* Début div Silva Paulo */
.effettexte {
	margin-left: 25%;/*auto;50%;   */
	margin-right: 25%; /*auto; */
	padding-top: 33px; /* original:  62px; */
	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-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  */


/**/
@media only screen and (max-width: 600px) {
	.effettexte  {
	float: none;
	font-size: 22px;
	letter-spacing: 0.15rem;
	margin-left: 39.999% !important;
	margin-right: auto;
  }
}

/* div pour la date en haut à droite box centrale */
.divmsgtrdate1 {
	/*display: block;*/
	background-color: #CCCCCC; /* #999999; */
	float: right;
	position: relative;
	width: auto;
	height: auto;
	margin-top: 0.75rem; /* original: 31px; */
	margin-bottom: -30px;
	margin-right: 7px; /*/* modifie le 01/01/21 /* original: 9px; */
/*	margin-right: -0.52rem;*/
	padding: 0.09rem 0.2rem 0.08rem; /* c'était padding: 0rem 0.7rem 0.08rem; essais le 24/05/20 */
	/*font-size: 0.7rem;*/
	text-align: center;
	line-height: 1.7;
	text-decoration: none;
/*	background-color: #e1e1e1;*/
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	-ms-border-radius: 9px;
	border-radius: 9px !important; 
	border: ridge  #70C5FF !important; /* 1px #70C5F8 #0080FF  #0673EA*/
/*	-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); */
	outline: none;
	overflow: hidden;   /* ajouté le 24/05/2020 pour l'effet de défilement de la date ==> ensemble avec la class defile. Ligne obligatoire dans le div où défile le texte */
}

.divmsgtrdate1:hover {
	background: #D7D7D7;
	text-decoration: none;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16); /* 06 */
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16); /* 06 */
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16); /* 06 */
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.16); /* 06 */
	outline: none;
}

/* div pour la date en haut à droite box centrale */
.divmsgtrdate {
	/*display: block;*/
	float: right;
	position: relative;
	width: auto;
	height: auto;
	margin-top: 9px;
	margin-bottom: auto;
	margin-right: 9px;/*rem;/*
	margin-right: -0.52rem;*/
	padding: 0rem 0.2rem 0.08rem; /* c'était padding: 0rem 0.7rem 0.08rem; essais le 24/05/20 */
	/*font-size: 0.7rem;*/
	text-align: center;
	line-height: 1.7;
	text-decoration: none;
/*	background-color: #e1e1e1;*/
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	-ms-border-radius: 9px;
	border-radius: 9px !important; 
	border: ridge  #70C5F8 !important; /* 1px  #0080FF  #0673EA*/
/*	-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); */
	outline: none;
	overflow: hidden;   /* ajouté le 24/05/2020 pour l'effet de défilement de la date ==> ensemble avec la class defile. Ligne obligatoire dans le div où défile le texte */
}

.divmsgtrdate:hover {
	background: #D7D7D7;
	text-decoration: none;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	outline: none;
}
/* **** **** **** **** **** **** **** **** **** **** */
/*      Début div défilement de textes et images     */
/* **** **** **** **** **** **** **** **** **** **** */

.defile {
/*	display: block; 
	width: 25%;*/
	padding: 0px 0px 0px 5.5px;
	-webkit-animation: defiletxt linear 12s infinite alternate; /* alternate; */
	-moz-animation: defiletxt linear  12s infinite alternate; /* alternate; */
	-o-animation: defiletxt linear 12s infinite alternate; /* alternate; */ 
	-ms-animation: defiletxt linear 12s infinite alternate; /* alternate; */
	animation: defiletxt linear 12s infinite alternate; /* alternate; */
/* 	animation-direction: alternate; reverse; */
	animation-timing-function: ease; /* linear; ease-in-out;*/
	animation-iteration-count: 1; /* 3; */
	animation-fill-mode: forwards; /* both; */
	white-space: nowrap;
/*	margin-left: -200%;*/
/*	padding: 0; /* Avec  98%; le texte s'affiche completement et commence à défiler vers la gauche 
/*	text-align: left;
	height:25px;	*/	
}
/*
.defile div {
	position: absolute;
	min-width: 200%;
}
*/
.defile::after {
	position: relative;
	content: attr(data-text);
	display: inline-block;
	white-space: nowrap;
	animation: defiletxt linear 12s infinite alternate;
	top: 0; left: 0;
}

.defile:hover {
	animation-play-state: paused;
}

/*
.defile div:after {
	position: absolute;
	animation: defiletxt 12s infinite linear;

	padding-left: 10px;
}
*/

@-webkit-keyframes defiletxt {
	0% {margin-left: 99.99%;} /* 0%, 100% {margin-left: 0; */
	99.99% {margin-left: 0%;} /* 99.99% {margin-left: -100%; */
	100% {-webkit-transform: rotate(360deg);} /* rotation de l'image */
	100% {-moz-transform: rotate(360deg);} /* rotation de l'image */
	100% {-ms-transform: rotate(360deg);} /* rotation de l'image */
	100% {-o-transform: rotate(360deg);} /* rotation de l'image */
 	100% {transform: rotate(360deg);}  /* rotation de l'image */
 }

@-moz-keyframes defiletxt {
	0% {margin-left: 99.99%;} /* 0%, 100% {margin-left: 0; */
	99.99% {margin-left: 0%;} /* 99.99% {margin-left: -100%; */
	100% {-webkit-transform: rotate(360deg);} /* rotation de l'image */
	100% {-moz-transform: rotate(360deg);} /* rotation de l'image */
	100% {-ms-transform: rotate(360deg);} /* rotation de l'image */
	100% {-o-transform: rotate(360deg);} /* rotation de l'image */
 	100% {transform: rotate(360deg);}  /* rotation de l'image */
 }
 
@-o-keyframes defiletxt {
	0% {margin-left: 99.99%;} /* 0%, 100% {margin-left: 0; */
	99.99% {margin-left: 0%;} /* 99.99% {margin-left: -100%; */
	100% {-webkit-transform: rotate(360deg);} /* rotation de l'image */
	100% {-moz-transform: rotate(360deg);} /* rotation de l'image */
	100% {-ms-transform: rotate(360deg);} /* rotation de l'image */
	100% {-o-transform: rotate(360deg);} /* rotation de l'image */
 	100% {transform: rotate(360deg);}  /* rotation de l'image */
 }
 
@-ms-keyframes defiletxt {
	0% {margin-left: 99.99%;} /* 0%, 100% {margin-left: 0; */
	99.99% {margin-left: 0%;} /* 99.99% {margin-left: -100%; */
	100% {-webkit-transform: rotate(360deg);} /* rotation de l'image */
	100% {-moz-transform: rotate(360deg);} /* rotation de l'image */
	100% {-ms-transform: rotate(360deg);} /* rotation de l'image */
	100% {-o-transform: rotate(360deg);} /* rotation de l'image */
 	100% {transform: rotate(360deg);}  /* rotation de l'image */
 }
/*  */
@keyframes defiletxt {
/*	0%   { text-indent: 100%; }*/
/*    100% { text-indent: 0%; }*/
	0% {margin-left: 99.99%; } /*, 100% si on mets 0 il va de gauche à droite */
	99.99% {margin-left: 0%; } /* 99.99% {margin-left: -100%; -3*/
	100% {-webkit-transform: rotate(360deg);} /* rotation de l'image */
	100% {-moz-transform: rotate(360deg);} /* rotation de l'image */
	100% {-ms-transform: rotate(360deg);} /* rotation de l'image */
	100% {-o-transform: rotate(360deg);} /* rotation de l'image */
 	100% {transform: rotate(360deg);}  /* rotation de l'image */
 }

/* **** **** **** **** **** **** **** **** **** **** */
/*      Fin div défilement de textes et images       */
/* **** **** **** **** **** **** **** **** **** **** */

@media only screen and (max-width: 600px) {
   .banner {
   margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
  }
}

@media only screen and (min-width: 600px) {
   .banner {
   margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
  }
}

@media only screen and (min-width: 768px) {
   .banner {
	margin-top: 20px; /* 20px; */
 	margin-left: 20px; /* 20px; */
	margin-right: 20px; /* 20px; */
 }
}

@media only screen and (min-width: 962px) {
   .banner {
	margin-top: 0px; /* 20px; */
 	margin-left: 0px; /* 20px; */
	margin-right: 0px; /* 20px; */
 }
}
/*
@media screen and (max-width: 962px) {
   .banner {
	margin-top: 20px;
  }
}
*/

@media only screen and (max-width: 600px) {
	.esfera  {
/*	display: none; */
	margin-top: 30px;
	margin-left: 30px;

  }
}
/**/

@media only screen and (min-width: 600px) {
   .esfera {
	margin-top: 30px;
	margin-left: 30px;
  }
}

@media only screen and (min-width: 768px) {
   .esfera {
	margin-top: 30px;
	margin-left: 30px;
  }
}


@media only screen and (min-width: 962px) {
   .esfera {
	margin-top: 30px;
	margin-left: 10px;
  }
}
/*
@media screen and (min-width: 768px) {  
   .esfera {
	margin-top: 30px;
  }
}
*/

@media only screen and (min-width: 962px) {
   .esfera {
	margin-top: 10px;
  }
}

/*
@media only screen and (max-width: 768px) {
	.effettexte  {
	margin-left: auto; 
	margin-right: auto;
  }
}
*/

/*
@media only screen and (max-width: 768px) {
	.effettexte  {
	margin-left: auto; 
	margin-right: auto;
  }
}
*/

/* écran laptops/desktop */
@media screen and (max-width: 962px) {
   .conteneur {   /* leftcolumn, .rightcolumn,  .colonnemilieu .colonnemilieu, .colonnegauche, , .colonnedroite.boxtxt */
    width: 99.9999%;
    padding: 0px;
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.topnav a {
    float: none;
    width: 100%;
	margin-bottom: 5px;
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	.topnav a {
/*    float: none;
    width: 100%; */
	padding: 8px 10px 10px;/* 10px 10px 12px; 12px 16px 14px; Haut DroiteGauche Bas  == HautBas DroiteGauche */
/*	margin-bottom: 5px;*/
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	.topnav a {
	padding: 8px 15px 10px; /* 10px 15px 12px; 12px 16px 14px;/* Haut DroiteGauche Bas  == HautBas DroiteGauche */
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	a[class="active"] {
/*    float: none;
    width: 100%; */
	padding: 8px 10px 10px;/* 10px 10px 12px; 12px 16px 14px; Haut DroiteGauche Bas  == HautBas DroiteGauche */
/*	margin-bottom: 5px;*/
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	a[class="active"] {
	padding:  8px 15px 10px; /* 10px 15px 12px; 12px 16px 14px;/* Haut DroiteGauche Bas  == HautBas DroiteGauche */
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.boxtxt {
/*	float: none;*/
	margin-top: 0px;
	margin-left: 0px; /* ajouté le 16/11/2020 */
/*	margin-right: 25%; */
	padding-top: 10px;
	width: 100%; /* modifié le 16/11/2020 auto; */
/*	background: pink; */
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	.boxtxt {
/*	float: none;*/
	margin-top: 0px;
/*	margin-left: 0px; 10%; 25%; */
/*	margin-right: 30%;  25%; */
	width: 99.99999%; /* 49.99999% */
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
/*	background: pink; */
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
   .boxtxt {
/*    float: right; */
    width: 99.9999%;
	margin-top: 0px;
/*	margin-left: 20px;
	margin-right: 20px;*/
	padding-top: 10px;
	padding-left: 15px;
	padding-right: 15px;
/* 	background: pink; */
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 962px) {
   .boxtxt {
/*    float: right; */
    width: 99.9999%;
	margin-top: 0px; /* ajouté le 16/11/2020 */
/*	margin-left: auto;0px;; 20px; */
/*	margin-right: 0px;
	padding: 20px;*/
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 0px;
/*	background: pink; */
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.boxtxtvide {
	display: none;
	}
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
   .colonnedroitebis {
    float: none; /* left; */
    width: 99.99999%;
	margin-top: 20px;/*-5px  modifié le 16/11/2020 10px; */
	margin-left: auto;/*20%; 8% 20%;     0px; */
	margin-right: auto;/*20%; 15% auto; 0px; */
	margin-bottom: 0px; /* 20px;*/
	padding-left: 0px;
	padding-right: 0px;/**/
	padding-bottom: 0px;
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
   .colonnedroitebis {
    float: none; /* left; */
    width: 89.99999%;
	margin-top: 10px;/*-5px  modifié le 16/11/2020 10px; */
	margin-left: auto;/*20%; 8% 20%;     0px; */
	margin-right: auto;/*20%; 15% auto; 0px; */
	margin-bottom: 0px; /* 20px;*/
	padding-left: 0px;
/*	padding-right: 0px;*/
	padding-bottom: 0px;
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
   .colonnedroitebis {
    float: none; /* left; */
    width: 79.99999%; /* 85%; */
	margin-top: 10px;/*-5px  modifié le 16/11/2020 10px; */
/*	margin-left: auto;20%; 8% 20%;     0px; */
/*	margin-right: auto;20%; 15% auto; 0px; */
	margin-bottom: 0px; /* 20px;*/
	padding-left: 0px;
/*	padding-right: 0px;*/
	padding-bottom: 0px;
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 962px) {
   .colonnedroitebis {
    float: right; /* left; */
    width: 34.99999%;
	margin-top: 0px;/*-5px  modifié le 16/11/2020 10px; */
/*	margin-left: auto;20%; 8% 20%;     0px; */
/*	margin-right: 20px;auto;20%; 15% auto; 0px; */
	margin-bottom: 0px; /* 20px;*/
	padding-left: 0px;
	padding-right: 0px;/**/
	padding-bottom: 0px;
  }
}

/* @media screen and (min-width: 768px) and (max-width: 962px) {  
   .colonnedroitebis {
    float: none; left; */
/*     width: 85%;
	padding-top: 8px;
	margin-top: -10px;/*
	margin-left: 5%;
	margin-right: 20%;
  }
}
*/
/*@media screen and (max-width: 767px) {  
   .colonnedroitebis {*/
/*    float:left;  none; 
    width: 100%;  */
/*	padding-top: 8px;
	margin-top: -10px;
	margin-left: 20px; /* 7.5% */
/* 	margin-right: 20px; 7.5% 
  }
}*/

/*@media screen and (max-width: 962px) {
   .colonnettlargeur {
/*    float: none; */
 /*   width: 99.9999%;
	padding: 0px;*/
/*	margin-left: 0px;  0px; 
	margin-right: 20px;
  }
}
*/

@media only screen and (max-width: 600px) {
   .boxtxt2 {
/*    float: none; */
    width: 99.9999%;
	padding: 20px; /* 20px; */
	margin-left: 0px; /* 0px; */
	margin-right: 20px;
  }
}

@media only screen and (min-width: 600px) {
   .boxtxt2 {
/*    float: none; */
    width: 99.9999%;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
/*	padding:  10px;  20px; */
	margin-left: 0px; /* 0px; */
	margin-right: 20px;
  }
}

@media only screen and (min-width: 768px) {
   .boxtxt2 {
/*    float: none; */
    width: 99.9999%;
	padding:  10px; /* 20px; */
	margin-left: 0px; /* 0px; */
	margin-right: 20px;
  }
}

@media only screen and (min-width: 962px) {
   .boxtxt2 {
/*    float: none; */
    width: 99.9999%;
	padding:  10px; /* 20px; */
	margin-left: 0px; /* 0px; */
	margin-right: 20px;
  }
}

@media only screen and (max-width: 600px) {
   .boxtxt3 {
/*    float: none; */
    width: 99.9999%;
	padding: 10px; /* 20px; */
	margin-left: 0px; /* 0px; */
	margin-right: 0px;
  }
}

@media only screen and (min-width: 600px) {
   .boxtxt3 {
/*    float: none; */
    width: 99.9999%;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
/*	padding:  10px;  20px; */
	margin-left: auto; /*0px; /* 0px; */
	margin-right: auto; /*20px; */
  }
}

@media only screen and (min-width: 768px) {
   .boxtxt3 {
/*    float: none; */
    width: auto; /*59.9999%;*/
	padding:  10px; /* 20px; */
	margin-left: auto; /*0px; /* 0px; */
	margin-right: auto; /*20px; */
  }
}

@media only screen and (min-width: 962px) {
   .boxtxt3 {
/*    float: none; */
    width: auto;
	padding:  10px; /* 20px; */
	margin-left: 15%; /* 0px; */
	margin-right: 15%;
  }
}

@media only screen and (max-width: 962px) {
   .boxtxt2 {
    float: none; 
    width: 99.9999%;
	padding: 20px;
	margin-left: 0px; /* 0px;*/
	margin-right: 20px;
  }
}

@media only screen and (max-width: 963px) {
   .colonnettlargeur {
    float: none; 
    width: 99.9999%;
	padding: 0px;
	margin-left: auto;
	margin-right: 40px;
  }
}

@media only screen and (max-width: 961px) {
   .boxtxt2, .colonnettlargeur {
    float: none;
    width: 99.9999%;
	padding: 10px;
	margin-left: 0px;
	margin-right: 0px;
  }
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
   .colonnemilieu {
    float: none;/* */
    width: 100%; /*99.9999%;*/
	/*margin-top: 10px;*/
	margin-left: auto;
	margin-right: auto;
/*	background-color: red;*/
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
   .colonnemilieu {
    float: none;/* */
    width: 79.9999%;
	margin-left: auto;
	margin-right: auto;
/*	background-color: green;*/
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
   .colonnemilieu {
    float: none; /**/
    width: 69.9999%;
	margin-left: auto;
	margin-right: auto;
/*	background-color: blue;*/
  }
}

@media only screen and (min-width: 962px) {
   .colonnemilieu {
    float: none; /**/
    width: 49.9999%;
	margin-left: auto;
	margin-right: auto;
/*	background-color: orange;*/
  }
}

/* écran smartphone petit 
@media only screen and (max-width: 600px) {
   .colonnemilieubis {
    float: none;
    width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
  }
}*/

/* écran tablette portrait et smartphone large 
@media only screen and (min-width: 600px) {
   .colonnemilieubis {
    float: none;
    width: 89.9999%;
	margin-left: auto;
	margin-right: auto;
  }
}*/

/* écran tablette paysage et smartphone large 
@media only screen and (min-width: 768px) {
   .colonnemilieubis {
    float: none;
    width: 79.9999;
	margin-left: auto;
	margin-right: auto;
  }
}

@media only screen and (min-width: 962px) {
   .colonnemilieubis {
    float: none;
    width: 69.9999%;
	margin-left: auto;
	margin-right: auto;
  }
}*/

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
   .colonnettlargeur {
    float: none;
    width: 99.9999%;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding-bottom: 0px;
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
   .colonnettlargeur {
    float: none;
    width: 99.9999%; /* 94.9999%; */
	margin-top: 10px; /*10px;  20px; */
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 0px;
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
   .colonnettlargeur {
    float: none;
    width: 99.9999%; /* 94.9999%; */
	margin-top: 0px; /* 10px; 20px; */
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 962px) {
   .colonnettlargeur {
    float: none;
    width: 99.9999%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 0px;
  }
}

/**************************************************************************/
/*     Code @media pour le boximage - photo au hasard (haut à droite)     */
/**************************************************************************/

/* div photo du jour - smartphone + écran petite tablette 
@media only screen and (max-width: 575px) { 
	.boximage {
	float: none;
	margin-top: 100px;
	margin-left: auto; 0px;
	margin-right: auto;  0px; 
	width: 100%;
  }
}
*/
/* div photo du jour - écran plus grand  +- 13"  */
/*@media only screen and (max-width: 768px) {
	.colonnegauche {
	float: none;
	margin-top: 0px;
	margin-left: 10%;
	margin-right: 40%; 
	width: 59.99999%;
  }
}
*/
/* div photo du jour - écran plus grand  +- 13"  */
/*@media only screen and (max-width: 768px) {
	.colonnedroite {
	float: none;
	margin-top: 0px;
	margin-left: 30%;
	margin-right: 10%;
	width: 59.99999%;
  }
}
*/

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.colonnegauche {
	float: none;/**/
	margin-top: 10px; /* 0px avnt modification 16/11/2020 /*
	margin-left: auto; /* 10%;*/
	margin-right: auto;/*40%;*/
	margin-bottom: 0px;
	padding-bottom: 20px;/**/
	width: 99.99999%;
/*	background: red;*/
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	.colonnegauche {
	float: none;
	margin-top: 10px; /* modifié le 16/11/2020 10px; */
	margin-left: auto;/*20%; 8% 20%;  6%   0px; */
	margin-right: auto;/*20%; 15% ; 0px; */
/*	margin-bottom: 5px;*/
	padding-top: 0px;
	padding-bottom: 20px;
	width: 79.99999%;
/*	background: green;*/
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	.colonnegauche {
/*	float: none;*/
	margin-top: 10px; /* modifié le 16/11/2020 10px; */
/*	margin-left: auto;20%; 8% 20%;     0px; */
/*	margin-right: auto;18%20%; 15% ; 0px; */
/*	margin-bottom: 5px;*/
	padding-left: 0px;/*  modifié le 16/11/2020 20px; */
	padding-right: 0px;
	width: 69.99999%;
/*	background: blue;*/
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 962px) {
	.colonnegauche {
	float: left;
	margin-top: 10px;/*-5px  modifié le 16/11/2020 10px; */
/*	margin-left: auto;20%; 8% 20%;     0px; */
/*	margin-right: auto;20%; 15% auto; 0px; */
	margin-bottom: 0px; /* 20px;*/
	padding-left: 0px;
/*	padding-right: 0px;*/
	padding-bottom: 0px;
	width: 44.99999%;
/*	background: orange;*/
  }
}

/* écran très large 
@media only screen and (min-width: 1200px) {
	.colonnegauche {
	float: left;
	margin-top: 0px;
	width: 99.99999%;
  }
}
*/

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.colonnedroite {
	float: none;
	margin-top: 0px;
/*	margin-left: -5%;*/
/*	margin-left: auto; /* 10%;*/
/*	margin-right: auto;40%;*/
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
/*	padding-right: 60px;*/
	width: 99.99999%;
/*	background: red;*/
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	.colonnedroite {
	float: none;
/*	margin-top: 10px;*/
	margin-left: auto;/*20%; 8% 20%;  6%   0px; */
	margin-right: auto;/*20%; 15% ; 0px; */
	margin-bottom: 0px;
	padding-left: 0px;
/*	padding-right: 50px;
	padding-bottom: 20px;*/
	width: 79.99999%;
/*	background: green;*/
  }
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	.colonnedroite {
	float: none;/**/
	margin-top: 0px;
	margin-left: auto;/*;5% -2%  10%;*/
 	margin-right:auto;
	padding-left: 0px;/* (modifié le 16/11/2020 20px;) -5%;  20%; /*40%;*/
	width: 69.99999%;
/*	background: blue;*/
  }
}

/* écran laptops/desktop */
@media only screen and (min-width: 962px) {
	.colonnedroite {
	float: right;
	margin-top: 10px; /*15px modifié le 16/11/2020 10px; */
	margin-left: 0px;/*auto;20%;  20%; 20%    0px; */
/*	margin-right: auto;;18% 15%;   20%0px; */
	margin-bottom: 20px;/**/
	padding-left: 0px;
	width: 44.99999%;
/*	background: orange;*/
  }
}

/* écran très large 
@media only screen and (min-width: 1200px) {
	.colonnedroite {
	float: none;
	margin-top: 0px;
	margin-left: -5%;
	width: 99.99999%;
  }
}
*/

#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;
}  

fieldset {
	text-align: center; /*justify; */
	border: double #4476F9; /* dashed 1px;*/
/*	border-color: #4476F9;  #FF0000; */
/*	margin-top: 10px; */
	margin-left: auto;
	margin-right: auto;
	background-color:  #E1E1E1;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

legend {
/*	margin:0 auto; */
    font-size: 0.92rem;
    text-align: center;
    padding: 0.3% 0.8%;
    width: 60%;
    margin:0 20%;/* 0 34.6%; */
    border: 1px solid #0000FF;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
/*    border-radius: 5px;*/
}

#convertfdt {
	width: 80%;
	background: #ECECEC;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	padding: 0px;
}

/* 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é */
	table-layout: fixed; /* fixer la largeur des table - ajouté aujourd'hui 29/04/2020 */
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

/* 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;
}

/************************************************************/
/*                       CALENDRIER                         */
/************************************************************/

.titremois  { font-family: Helvetica, Arial; font-size: 13px; font-weight: bold; color: #000000; background: #808080 }
/*.titremois:link  { font-family: Helvetica, Arial; font-size: 13px; font-weight: bold; color: #000000; background: #808080; text-decoration: none }
.titremois:visited  { font-family: Helvetica, Arial; font-size: 13px; font-weight: bold; color: #0000000; background: #808080; text-decoration: none }
.titremois:hover  { font-family: Helvetica, Arial; font-size: 13px; font-weight: bold; color: #000000; background: #808080; text-decoration: underline }*/

.titrejours  { font-family: Helvetica, Arial; font-size: 9px; color: #000000; background: #808080 }
.titrenum  { font-family: Helvetica, Arial; font-size: 11px; color: #ffffff; background: #808080 }
.titrenum2  { font-family: Helvetica, Arial; font-size: 11px; color: #808080; background: #808080}
.titreweek  { font-family: Helvetica, Arial; font-size: 9px; color: #606060; background: #808080 }
.titreweek2  { font-family: Helvetica, Arial; font-size: 11px; color: #606060; background: #808080 }
.titrewend  { font-family: Helvetica, Arial; font-size: 11px; color: #666666; background: #808080 }
.titrewend2  { font-family: Helvetica, Arial; font-size: 11px; color: #808080; background: #808080 }
.titrenow  { font-family: Helvetica, Arial; font-size: 11px; color: #888888; background: #ffffff }

/************************************************************/
/*                       CALENDRIER                         */
/************************************************************/

/* 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);
} */

/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** ***** */
/* 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;
/*	color: #0000FF; */
	outline: none;
	cursor: help; /* pointer; */
}

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: help; /* 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;
} 

/* 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: #000000;
	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: #FF0000;
	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: #FF0000 !important;
	margin: 0px 4px 0px;
	padding: 7px 10px;
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton1:hover {
	background-color: #608FE8;
	color: #FFFFFF !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; */
	color: #0000FF !important;
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton2:hover, .bouton2bis:hover {
	background-color: #608FE8;
	padding: 6px 4px 8px;
	color: #FFFFFF !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 */

a[class="active"] {
	padding: 8px 15px 10px; /* 10px 15px 12px; 12px 15px 14px; /*12px 16px 14px;/* Haut DroiteGauche Bas  == HautBas DroiteGauche */
/*	padding: 6px 4px 8px;*/
	background-color: #ADD8E6;
	color: #0000FF !important;
	outline: none;
}

.active:hover {
	color: #FFFFFF !important; /* #0000FF */
	outline: none;
}

/*a[class="active:hover"] {
	padding: 12px 16px 14px; Haut DroiteGauche Bas  == HautBas DroiteGauche */
/*	padding: 6px 4px 8px;*/
/*	background-color: #ADD8E6;
	color: white !important;  #0000FF  
	outline: none;
}
*/
/* début section bouton2pt pour les pages en portugais */
.bouton2pt, .bouton2ptbis {
	width: 102px;
	height: 20px;
	line-height: 20px;
	padding: 6px 10px 8px;
	color: #000000 !important; 
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton2pt:hover, .bouton2ptbis:hover {
	background-color: #608FE8;
	padding: 6px 10px 8px;
	color: #FFFFFF !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: #000000; 
	padding: 7px 10px;
	background-color: #FAFAFA;
	border: 2px solid #1F85E0 !important;
	outline: none;
}

.bouton3:hover {
	background-color: #608FE8;
	color: #FFFFFF;
	-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: #000000;
	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: #FFFFFF;
	-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: #000000 !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: #FFFFFF !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;
}

.titrepagesphoto {
	color: #2034bd;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 13px; /* 14px; modifié pour 13px le 19/01/21 - à voir pour les problèmes de taille dans certaines pages */
	font-weight: bold;
}

@media only screen and (max-width: 600px) {
	.titrepagesphoto {
/*	margin-left: 4.7%;  14%; */
	font-size: 12px;
  }
}

@media only screen and (min-width: 600px) {
	.titrepagesphoto {
/*	margin-left: 4.7%;  14%; */
	font-size: 12px;
  }
}

@media only screen and (min-width: 768px) {
	.titrepagesphoto {
/*	margin-left: 4.7%;  14%; */
	font-size: 14px;
  }
}

/* **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*      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; en réserve depuis le 23/10/2021
	-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; */
}

.divcontenucontact {
	padding-left: 0px;
	padding-right: 0px;
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.divcontenucontact {
/*	float: none;*/
	padding-left: 20px;
	padding-right: 20px;
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
	.divcontenucontact {
	float: none;/**/
	width: 69.9999%;
	padding-left: 20px;
	padding-right: 20px;/**/
  }
}

/* écran tablette paysage et smartphone large*/
@media only screen and (min-width: 768px) {
	.divcontenucontact {
	float: none;/* */
	width: 59.9999%;
	margin-top: 10px;
	padding-left: 20px;
	padding-right: 20px;/**/
  }
}

/* écran laptops/desktop  img */
@media only screen and (min-width: 962px) {
	.divcontenucontact {
/*	float: right;*/
	width: 99.9999%;
	padding-left: 5px;
	padding-right: 5px;
  }
}

/**************************************/
/*      Div code pour les slides      */
/**************************************/

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

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

#slider {
	overflow: hidden;
}

/*
#slider {
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
}
*/
/**************************************/
/*   Div pour numération des images   */
/**************************************/

.numphoto {
  color: #F4F4F4;
  font: 0.9rem Verdana, sans-serif;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/**************************************/
/*  Div pour le conteneur des images  */
/**************************************/
/**/
.divboximage {
	position: relative;
	width: 450px; /*450px;*/
/*	height: auto;*/
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	line-height: 1.7;
	background-color: #e9e9e9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 6px solid #FFFFFF !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	-moz-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	-ms-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	cursor: pointer;
}
/**/

.divboximage2 {
	position: relative;
	width: 400px; /*450px;*/
/*	height: auto;*/
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	line-height: 1.7;
	background-color: #e9e9e9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	border: 6px solid #FFFFFF !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	-moz-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	-ms-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9);
	cursor: pointer;
}


/* div photo slide - écran tablette moyenne */
@media only screen and (max-width: 600px) {
	.divboximage2 {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 87.99999%;
  }
}

/****************************************/
/* Fin Div pour le conteneur des images */
/****************************************/

/************************************************/
/*  media query pour le divboximage responsive  */
/************************************************/

/* div photo slide - écran tablette moyenne */
@media only screen and (max-width: 600px) {
	.divboximage {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 87.99999%;
  }
}

/* div photo slide - écran tablette moyenne */
@media only screen and (min-width: 600px) {
	.divboximage {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 88.99999%; /* 79.99999%; */
  }
}

/* div photo slide - écran tablette moyenne 
@media only screen and (max-width: 768px) {
	.divboximage {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 79.99999%;
  }
}
*/

/* div photo slide - écran tablette moyenne */
@media only screen and (min-width: 768px) {
	.divboximage {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 89.99999%; /* 69.99999%; */
  }
}

/* div photo slide - écran tablette moyenne */
@media only screen and (min-width: 962px) {
	.divboximage {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 94.99999%; /* 69.99999%; */
  }
}

/* div photo slide - écran tablette moyenne 
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.divboximage {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 69.99999%;
  }
}
*/
/* div pour barre de recherches */

.divbarrecherche {
	position: relative;
	width: 570px; /*450px;*/
	height: auto;
	text-align: center;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 0px 10px;
	line-height: 1.7;
	background-color: transparent;
	cursor: auto;
}

/**/
@media only screen and (max-width: 600px) {
	.divbarrecherche {
	margin-top: 0px;
	margin-bottom: 12px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	width: 99.99999%;
  }
}

@media only screen and (min-width: 600px) {
	.divbarrecherche {
	margin-top: 0px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 12px;
	padding-left: 16px;
	padding-right: 16px;
	width: 450px;
  }
}

@media only screen and (min-width: 768px) {
	.divbarrecherche {
	margin-top: 0px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;
	width: 450px;
  }
}

@media only screen and (min-width: 992px) {
	.divbarrecherche {
	margin-top: 0px;
	margin-bottom: 8px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 12px;
	width: 570px; /* 450px; */
  }
}

/* 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 - box invisible */
.divtexteimage1bis {
/* premier ancien code	*/
	float: left;
	margin-top: 15px;
	padding: 0px 1px 0px; /* 0px 7px 0px; */
	/**/
	position: relative;
	width: 400px; /* 400px; */
	height: auto;
/* code original avant modifications
	margin-top: 0px;
	margin-left: 24.3%;
	margin-right: 30.7%;
	padding: 0px 6px 0px 11px;
*/  /* ces mesures de margins sont pour la largeur à 520px sem float
	margin-top: 0px;
	margin-left: 24%;
	margin-right: 31%;
	padding: 0px 6px 0px 11px; */
	text-align: justify; /* 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 */
.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 - box invisible*/
.divtexteimage2bis {
	float: right;
	position: relative;
	width: 400px;
	height: auto;
	margin-top: 15px;
	padding: 0px 1px 0px; /* 0px 7px 0px; */
	text-align: justify; /* 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.php */
/* ------------------------------------------------ */

.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 */

.divimage7v3 {
	position: relative;
	width: 720px; /* 560px; */
	height: auto;
	margin-top: 20px;
	margin-left: auto; /*22%; /*24.1%; /* 24.3%; */
	margin-right: auto; /*33%; /*30.9%; /*30.7%;*/
	padding: 0px 6px 0px 11px;
	line-height: 1.7;
	background-color: transparent; /*#e9e9e9;*/
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
	.divimage7v3 {
	float: none;
	margin-top: 0px;
	margin-left: 25%;
	margin-right: 25%;
	width: 49.99999%;
  }
}

@media only screen and (max-width: 991px) {
	.divimage7v3 {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 99.99999%;
  }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* ------------------------------------------------------------------- */
/* div pour la photo seule sur la page - Ex.: pages codesansifr/pt.php */
/* ------------------------------------------------------------------- */

.divimage7v5 {
	position: relative;
	width: 540px;
	height: auto;
	margin-top: 0px;
	margin-left: auto;  /*auto;/* 27.5%; */
	margin-right: auto; /*auto; /* 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: 6px solid #FFFFFF !important; /* 1px #666 */
	-webkit-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
	-moz-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
	-ms-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
	box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
}

.divimage7v5 img {
	position: relative;
	width: 540px;
	height: auto;
	margin-top: 15px;
	margin-left: auto; /* 0px; */
	margin-right: auto; /* 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);*/
}

.divimage7v5: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: auto; /* 27.5%; */
	margin-right: auto; /* 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: 6px solid #FFFFFF !important; /* 1px #666 */
	-webkit-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9); /*  0px 0px 0px 5px */
	-moz-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9); /*  0px 0px 0px 5px */
	-ms-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9); /*  0px 0px 0px 5px */
	box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.9); /*  0px 0px 0px 5px */
/*	cursor: pointer;*/
}

.divimage7v7 {
	position: relative;
	width: 640px;
	height: auto;
	margin-top: 0px;
	margin-left: auto;/* 27.5%; */
	margin-right: auto; /* 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: 6px solid #FFFFFF !important; /* 1px #666 */
	-webkit-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
	-moz-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
	-ms-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
	box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7); /*  0px 0px 0px 5px */
}

@media only screen and (max-width: 600px) { 
.divimage7v7 {
	float: none;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 99.99999%; 
  }
}

@media only screen and (min-width: 600px) { 
.divimage7v7 {
	float: none;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 99.99999%;
  }
}

@media only screen and (min-width: 768px) { 
.divimage7v7 {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 640px;
  }
}

/* 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             */
/* --------------------------------------------------------------------------- */

.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);
}

/* **** **** **** **** **** **** **** **** **** **** **** */
/*  Début code pour les 4 colonnes des photos miniatures  */
/* **** **** **** **** **** **** **** **** **** **** **** */

.colonnemin 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;
}

.colonnemin 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   */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*   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;
}

.pieddepage1 {
/*	float: left;*/
	width: 79.99999%; /* 77.99999%; 62.49999%;  81.99999%; */
	background-color: #c8dcee; /* #e1ebeb; */
	font-size: 10px;
	color: #000099;
	margin-left: auto;
	margin-right: auto;
/*	margin-left: 9.9999%; /*10.99999%; /* 18.99999%;  8.99999%; */
/*	margin-right: 19.99999%; /* 19.24999%; */
	margin-top: 10px;
	margin-bottom: 0px; /*10px; */
	padding-bottom: 0px;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 1px;
	padding-right: 1px;
	text-align: center;
	-webkit-border-radius: 10px 10px 0px 0px; /* 7px; */
	-moz-border-radius: 10px 10px 0px 0px;
	-ms-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px !important;
	overflow-x: hidden;
}

.pieddepage2 {
/*	float: left;*/
	width: 79.99999%; /* 77.99999%; 62.49999%;  81.99999%; */
	background-color: #c8dcee; /* #e1ebeb; */
	font-size: 10px;
	color: #000099;
	margin-left: auto;
	margin-right: auto;
/*	margin-left: 9.9999%; /*10.99999%; /* 18.99999%;  8.99999%; */
/*	margin-right: 19.99999%; /* 19.24999%; */
	margin-top: 0px; /* 7px; */
	margin-bottom: 0px; /* 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;
}

.pieddepage3 {
/*	float: left;*/
	width: 79.99999%; /* 77.99999%; 62.49999%;  81.99999%; */
	background-color: #c8dcee; /* #e1ebeb; */
	font-size: 10px;
	color: #000099;
	margin-left: auto;
	margin-right: auto;
/*	margin-left: 9.9999%; /*10.99999%; /* 18.99999%;  8.99999%; */
/*	margin-right: 19.99999%; /* 19.24999%; */
	margin-top: 0px; /* 7px; */
/*	margin-bottom: 10px;*/
	padding-top: 2px;
	padding-bottom: 4px;
	padding-left: 1px;
	padding-right: 1px;
	text-align: center;
	-webkit-border-radius: 0px 0px 10px 10px; /* 7px;*/
	-moz-border-radius: 0px 0px 10px 10px;
	-ms-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px !important;
	overflow-x: hidden;
}

@media only screen and (max-width: 600px) { /* max-width: 962px */
	.pieddepage1 {
	width: auto; /* 99.9999% */
	margin-top: 5px;
	margin-left: 6%; /* 5%; */
	margin-right: 6%; /* 5%; */
/*	padding-bottom: 20px;
	margin-bottom: 20px; */
  }
}

@media only screen and (max-width: 600px) { /* max-width: 962px */
	.pieddepage2 {
	width: auto; /* 99.9999% */
	margin-left: 6%; /* 5%; */
	margin-right: 6%; /* 5%; */
/*	padding-bottom: 20px;
	margin-bottom: 20px; */
  }
}

@media only screen and (max-width: 600px) { /* max-width: 962px */
	.pieddepage3 {
	width: auto; /* 99.9999% */
	margin-left: 6%; /* 5%; */
	margin-right: 6%; /* 5%; */
/*	padding-bottom: 20px;*/ 
	margin-bottom: 20px;
  }
}

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

/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*  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;
	width: auto;
	margin-left: 9%; /* 7.5%; */
	margin-top: 21px; /* 15px; */
	margin-bottom: 21px; /* 15px; */
}
	
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*  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 only screen and (max-width: 480px) {
	.divcopyright {
	margin-left: 4.7%;
	font-size: 8.5px;
  }
}

@media only screen and (max-width: 600px) {
	.divcopyright2 {
/*	margin-left: 4.7%;  14%; */
	font-size: 9px;
  }
}

@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) { 
	.divtexteimage1bis .divimage6 img, .divimage7 img, .divimage7v2 img, .divimage7v5 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 575*/
@media only screen and (max-width: 600px) {
	.boutonversgauche, .boutonversdroite {
	/*top: -20%; -10px*/
	margin-top: 8%; /*0px;-15%;*/
  }
}

/* position flèche vers la gauche et vers la droite pages photos 575*/
@media only screen and (min-width: 600px) 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, .divimage7v5 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, .divimage7v5, .divimage7v2 img, .divimage7v5 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, .divimage7v5: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, .divimage7v5, .divimage7v2:hover, .divimage7v5:hover, .divimage7bis {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 99.99999%;
  }
}

/* .divmsgtrdate,  */
@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 (max-width: 992px) {
	.divmsgtrdate {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: -7px;
	margin-bottom: 5px;
	width: auto;
  }
}*/

@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 :link ,:link a:visited*/

.lien {
	color: #2034BD;/* #0066CC; */
	border-bottom: none;
	text-decoration: none;
	outline: none;
}

.lien:hover {
	color: #2034BD; /* #0066CC; */
	text-decoration: none;
}

.lien1 {
	color:  #0066CC; /* blue; */
	border-bottom: 1px dotted #0000FF;
	text-decoration: none;
	outline: none;
}

.lien1:hover {
	color: #FF0000;
	text-decoration: none;
}

.lien2 {
	color: #0066CC; /* #0000ff; */
	text-decoration: none;
}

.lien2:hover {
	color: #FF0000;
	text-decoration: 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;													
}																										

.bullecliqueminesq {
	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;													
}																										

.bullecliqueminesq:hover {
	background: #D7D7D7;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
}

.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;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.06);
}

/* 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 pour les anecdotes      */
/* **** **** **** **** **** **** **** **** */

.titreanecdote {
	background-color: #D5D5D5; /*#CACACA; /*#D9D9D9; /*#CCCCCC; /*#E6E6E6; /*#D0D0D0; /* #D1D1D1; */
	font-size: 1rem;
	font-variant: small-caps;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 15px;
	padding: 0px 10px 2px; /* 0px 10px 0px; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

.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    */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

#monModal:target {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
}

/* 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 */
}

.modalfmv-content a:focus img {
	display: block;
}

/* 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-y: scroll;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE 10+ */
/*	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  */
/* **** **** **** **** **** **** **** **** */

/* pour mettre une bordure colorée dans un div */

#bordergrad {
	border: 2px solid;
	border-radius: 12px;
	border-image: linear-gradient(to right, #EE82EE, #4B0082, #0000FF, #008000, #FFFF00, #FFA500, #FF0000) 1 10;
/*	border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1 10; */
/*	border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 4 5 25% round; répète le gradient plusieurs fois (1 5 10%) */
  padding: 5px;
  }  

/******************************************************************/	
/* pour la page des calculs conversion px rem points et pourcents */
/******************************************************************/	
/*
input[type=text]:focus {
  background-color: #E1F1F9;
}

#pixels {
	height: 40px;
	width: 90px;
	border: 2px solid #1746AC;
	font-size: 18px;
	padding: 5px;
	border-radius: 7px;
}

#pixels:focus {
  background-color: #E1F1F9;
}

#rem1, #point1, #pourcent1, #mm1 {
	width: 150px;
	height: 30px;
	background-color: #F0F0F0;
	text-align: center;
	border: 2px solid #0066CC;
	font-size: 16px;
	color: #1746AC;
	padding: 5px;
}

#rems{
	height: 40px;
	width: 90px;
	border: 2px solid #1746AC;
	font-size: 18px;
	padding: 5px;
	border-radius: 7px;
}

#pixel2, #point2, #pourcent2, #mm2 {
	width: 150px;
	height: 30px;
	background-color: #F0F0F0;
	text-align: center;
	border: 2px solid #0066CC;
	font-size: 16px;
	color: #1746AC;
	padding: 5px;
}

#pts{
	height: 40px;
	width: 90px;
	border: 2px solid #1746AC;
	font-size: 18px;
	padding: 5px;
	border-radius: 7px;
}

#rem3, #pixel3, #pourcent3, #mm3 {
	width: 150px;
	height: 30px;
	background-color: #F0F0F0;
	text-align: center;
	border: 2px solid #0066CC;
	font-size: 16px;
	color: #1746AC;
	padding: 5px;
}

#prcts{
	height: 40px;
	width: 90px;
	border: 2px solid #1746AC;
	font-size: 18px;
	padding: 5px;
	border-radius: 7px;
}

#rem4, #pixel4, #point4, #mm4 {
	width: 150px;
	height: 30px;
	background-color: #F0F0F0;
	text-align: center;
	border: 2px solid #0066CC;
	font-size: 16px;
	color: #1746AC;
	padding: 5px;
}

#mms{
	height: 40px;
	width: 90px;
	border: 2px solid #1746AC;
	font-size: 18px;
	padding: 5px;
	border-radius: 7px;
}

#rem5, #pixel5, #point5, #pourcent5, #mm5 {
	width: 150px;
	height: 30px;
	background-color: #F0F0F0;
	text-align: center;
	border: 2px solid #0066CC;
	font-size: 16px;
	color: #1746AC;
	padding: 5px;
}
*/

.imageavatarft {
	width: 70px;
	padding-right: 14px;
}

#convertfdtgen {
	width: 40% !important;
	background: #ECECEC;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
}

@media only screen and (max-width: 600px) {
	#convertfdtgen {
	width: 69.9999% !important; /* 69.9999%; */
	margin-left: auto;
	margin-right: auto;
  }
}

.ansitd {
	padding-left: 0px;
	padding-right: 0px;
}

.ansidiv1 {
	text-align: center;
	margin-top: 4px;
	margin-bottom: 4px;
	padding: 0px 5px;
}

.ansidiv2 {
	text-align: justify;
	margin-top: 4px;
	margin-bottom: 4px;
	padding: 0px 5px;
}

.ansidiv3 {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px 5px;
}

.ansidiv4 {
	text-align: center;
	margin-top: -5px;
	margin-bottom: -5px;
	padding: 0px 5px;
}

.ansidiv5 {
	text-align: center;
	margin-top: -5px;
	margin-bottom: 0px;
	padding: 0px 5px;
}

.ansidiv6 {
	text-align: center;
	margin-top: -2px;
	margin-bottom: 0px;
	padding: 0px 5px;
}

.ansidiv7 {
	text-align: center;
	margin-top: 0px;
	margin-bottom: -10px;
	padding: 0px 5px;
}

.ansidiv8 {
	text-align: center;
	margin-top: -7px;
	margin-bottom: 0px;
	padding: 0px 5px;
}

.ansidiv9 {
	text-align: center;
	margin-top: -10px;
	margin-bottom: -5px;
	padding: 0px 5px;
}

#ansititres {
	text-align: center;
	font-size: 90%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 3px;
	padding-bottom: 4px;
}

#ptitre {
	text-align: center;
/*	font-size: 90%;*/
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 3px;
	padding-bottom: 4px;/**/
}

#phautpage {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 1px;
}