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

@charset "utf-8";

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;	
}

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

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

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

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

@viewport {
	width: device-width;
}

body {
	width: 100%;
	height: 100%;
	margin: 5px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	background-image: url(../images_site/siglspgrisclair.gif); /* pour centrer l'image - center top; */
	background-attachment: fixed;
	background-color: #EFEFEF; /* #f2f2f2; => original  #E9E9E9; */
	text-align: center;
	font-size: 1rem;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	line-height: 1.5;
}
/*
@media only screen and (max-width: 600px) {
body {
	padding-right: 5px;
  }
}
*/
/* Barre progression défilement */
.barre_progress {
	background-color: #0000FF;
	height: 4px;
	border-radius: 4px;
	width: 0%;
	position: fixed;
	top: 0;
	left: 0;
	z-index:9999;
}

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

#progressbarre {
	background-color: #0000FF; /* #839c49; */
	height: 4px;
	width: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999; /* Peut être important si vous avez un menu en position fixe */
}

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

#divprechargeimage2	{
	visibility: hidden;
	background-image: url(../images_site/esferaroda100esqdir.gif);
}

a {
	text-decoration: none;
}

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

ul {
	list-style: 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;
}  

/**************************************/
/*    Début du code pour les liens    */
/**************************************/

.lien {
	border-bottom: 1px dotted #0000FF;
	outline: none;
}

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

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

.lien2 {
	color: #0066CC;
	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    */
/************************************/

.fondtitre {
	background-color: #CCCCCC;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	margin-top: 7px;
	margin-bottom: 7px;
	padding-left: 8px;
	padding-top: 4px !important;
	padding-bottom:  5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

.calendrier {
	background-color: #DADEDE;
	padding-left: 0px;
	padding-right: 0px;
}

.calendrierleg {
	background-color: #E1E6E6;
	margin-left: auto;
	margin-right: auto;
}

fieldset {
	text-align: center;
	border: double;
	border-color: #4476F9;
	background-color: #E1E1E1;
	padding: 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

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

.legendfoto {
	color: #2034bd;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

@media (max-width: 575px) {
	.legendfoto {
	font-size: 10px;
  }
}
/* 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 tables */
}

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

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

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

#slider {
	overflow: hidden;
}

.cacher {
	display: none;
}

.titrepagesphoto {
	color: #2034bd;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 13px !important;
	font-weight: bold;
}

@media (max-width: 600px) {
.titrepagesphoto {
	font-size: 12px;
  }
}

@media (min-width: 600px) {
.titrepagesphoto {
	font-size: 12px;
  }
}

@media (min-width: 768px) {
.titrepagesphoto {
	font-size: 14px;
  }
}

/******************************************/
/*  Code taille cellules du tableau dico  */
/******************************************/
.colonne1 {
	width: 35%;
}

.colonne2 {
	width: 65%;
}

.couleurligne {
	background-color: #E7E7E7;
}

/* couleur de fond pour les cellules vides - pour le media=print */
.couleurligne2 {
	background-color: #E7E7E7;
}

.hautpage {
	border: 2px solid transparent;
}

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

/***************************************************************************************************/
/*  Code pour le button (boxlettre) des lettres du dictionnaire informatique dicoinformatikfr.php  */
/***************************************************************************************************/

.boxlettre {
	display: inline-table;
	width: 35px;
	height: auto;
	background-color: #F0F2F2;
	border: 1px solid #8B8B8B;
	font-size: 1.2rem;
	text-align: center;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 8px;
	padding: 0px 8px;
	border-radius: 4px;
}

.boxlettre:hover {
	background-color: #CACACA;
	color: #FF0000;
	border: 1px solid #5B5B5B;
	text-decoration: none;
}

/**************************************/
/*  Div pour le conteneur des images  */
/**************************************/
/**/
.divboximage {
	position: relative;
	width: 400px;
	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;
}

/****************************************/
/* 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: 79.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: 59.99999%; /* 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: 49.99999%; /* 69.99999%; */
  }
}

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

/**************************************/
/*  Div pour le conteneur des videos  */
/**************************************/
/**/

.divboximagev2 {
	position: relative;
	width:  39.99999% !important;
	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;
}

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

/**************************************************/
/*  media query pour le divboximagev2 responsive  */
/**************************************************/

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

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

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

/* div photo slide - écran tablette moyenne */
@media only screen and (min-width: 992px) {
	.divboximagev2 {
	float: none;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 39.99999% !important; /* 69.99999 49.99999%*/
  }
}

/* Div pour obliger à centrer la page sur l'écran */
.conteneur {
/*	display: inline-block;
	position: relative;
	width: 100%;
	top: 0px;
	bottom: 5px; ==> toutes ces 5 lignes ont été éfacées pour essai le 04/05/21 */
	max-width: 1024px;
	margin: 8px 0px 20px;  /* changé le 08/08/2022 8px 0px 10px 0px;  nouvelle version */
/*	margin: 2px auto 7px auto;*/
	overflow: hidden;
	zoom: 1; 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	border-radius: 20px !important;
	background-color: #F5F5F5;
	-webkit-box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 5px 12px rgba(0, 0, 0, 0.1);
}

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

/* écran desktop */
@media only screen and (max-width: 600px) {
	.conteneur {
	float: none;
	width: auto;
	bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px; /* 10px; changé le 08/08/2022 */
  }
}

/* écran desktop */
@media only screen and (min-width: 992px) {
	.conteneur {
	float: none;
	width: auto;
	bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px; /* 10px; changé le 08/08/2022 */
  }
}

/****************************/
/* Début banner Silva Paulo */
/****************************/

.banner {
	width: 99.9999%;
	background-image: url(../images_site/fondsp.png);
	background-size: 100% 100%;
	height: 120px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 10px;
	-webkit-border-radius: 0px 0px 10px 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.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);
}

.esfera {
	float:left;
	width: 100px;
	height: 100px;
	margin-top: 10px;
	margin-left: 10px;
	background-image: url(../images_site/esfera100.gif);
	filter: drop-shadow(3px 3px 0.4rem #747474);
}

.esfera:hover {
	float:left;
	background-image: url(../images_site/esferaroda100esqdir.gif);
}

@media screen and (max-width: 600px) {
   .banner {
	margin-bottom: 5px;
  }
}

@media screen and (min-width: 600px) {
   .banner {
	margin-bottom: 0px;
  }
}

@media screen and (min-width: 768px) {
   .banner {
	margin-bottom: 5px;
  }
}

@media screen and (min-width: 992px) {
   .banner {
	margin-bottom: -10px;
  }
}

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

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

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

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

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

a.infobulle2 .infobulletexte2 {
	visibility: hidden;
	width: 110px;
	background-color: #E9E9E9;
	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: 120%;
	right: 15%;
	margin-right: -12px;
	opacity: 0;
	transition: opacity 1s;
}

/* Début pour la petite flèche qui apparaît en bas de l'infobulle */
a.infobulle2 .infobulletexte2::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 15%;
	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.infobulle2:hover .infobulletexte2 {
	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.infobulle2 {
	position: relative;
	background-color: #ddd;
	display: inline-block;
	outline: none;
	border-bottom: 1px dotted #0000FF;
	cursor: pointer;
}

span.infobulle2 .infobulletexte2 {
	visibility: hidden;
	width: 110px;
	background-color: #E9E9E9;
	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: 120%;
	right: 15%;
	margin-right: -12px;
	opacity: 0;
	transition: opacity 1s;
}

/* Début pour la petite flèche qui apparaît en bas de l'infobulle */
span.infobulle2 .infobulletexte2::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 15%;
	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.infobulle2:hover .infobulletexte2 {
	visibility: visible;
	opacity: 1;
}
/* Fin infobulle2 survol lien avec le pointeur de la souris pour balise (span infobulle2) */

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

a.infobulle3 .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.infobulle3 .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.infobulle3: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.infobulle3 {
	position: relative;
	background-color: #ddd;
	display: inline-block;
	outline: none;
	border-bottom: 1px dotted #0000FF;
	cursor: help;
}

span.infobulle3 .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.infobulle3 .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.infobulle3:hover .infobulletexte {
	visibility: visible;
	opacity: 1;
}
/* Fin infobulle3 survol lien avec le pointeur de la souris pour balise (span infobulle3) fichiers dico informatique */
/*********************************************************************************************************************/

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

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; /* avant le 08/08/22 était à 10px; la faute à Edge et Chrome pour décoler le fond de la page */
	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;
	cursor: auto;
}

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

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

/* 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);
	background-image: url(fondsp.png);
	background-size: 100% 100%;
	clear: both;
} 

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

/* Début div drapeau choix langue du site */
.divdrapeau {
	position: relative;
	float: right;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 16px;
	outline: none;
}
/* Fin div drapeau choix langue du site */

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

/* Début div drapeau choix langue du site */
.divdrapeauindex {
	position: relative;
	float: left;
	width: 50px;
	height: 45px;
	margin-top: 10px;
	margin-bottom: -5px;
	margin-left: 10px;
	margin-right: 16px;
	outline: none;
}
/* Fin div drapeau choix langue du site */
@media only screen and (max-width: 600px) {
	.divdrapeauindex {
	width: 89.999%;
	height: 89.999%;
	margin-bottom: -2px;
  }
}

/* ****  **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */
/*   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: 0px;
	padding-top: 0px;
}

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

.navdroite {
	float: right;
	right: 0px;
	vertical-align: middle;
	margin-top: 0px;  /* ==> modifié le margin-top le 30/04/21 qui était à 2px ==> j'ai re-mis 0px */
	margin-bottom: 0px; /* ==> modifié le margin-bottom le 30/04/21 qui était à 2px ==> j'ai re-mis 0px */
	margin-left: 0px; /* ajouté le 01/05/2021 */
	margin-right: 0px; /* pour mettre distancé de la marge pour les boutons à gauche et à droite - avec code navmilieu - 34px; */ 
	width: auto; /* ==> modifié le width le 30/04/21 qui était à auto 12.9999%;*/
}

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

@media only screen and (max-width: 600px) {
	.navbarre {
/*	background-color: red; fuchsia;/**/
	margin-top: 0px; /* modifié le 20/03/21 ==> était à 5px  modifié le 30/04/21 ==> était à -7px -3px */
	margin-bottom: 0px; /* ajouté le 30/04/21 */
	padding-top: 0px; /* ajouté le 20/03/21 ==>  modifié le 30/04/21 ==> était à 7px */
	padding-bottom: 0px; /* ajouté le 30/04/21 */
  }
}

@media only screen and (min-width: 600px) {
	.navbarre {
/*	background-color: green;*/
	margin-top: 0px; /* modifié le 20/03/21 ==> était à 5px */
	padding-top: 0px; /* ajouté le 20/03/21   ==>  modifié le 30/04/21 ==> était à 7px */
  }
}

@media only screen and (min-width: 620px) {
	.navbarre {
/*	background-color: yellow; red; /*fuchsia;/**/
	margin-top: 0px; /* modifié le 20/03/21 ==> était à 5px  modifié le 30/04/21 ==> était à -7px -3px */
	margin-bottom: 0px; /* ajouté le 30/04/21 */
	padding-top: 0px; /* ajouté le 20/03/21 ==>  modifié le 30/04/21 ==> était à 7px */
	padding-bottom: 0px; /* ajouté le 30/04/21 */
  }
}

@media only screen and (min-width: 768px) {
	.navbarre {
/*	background-color: pink;*/
	margin-top: -5px; /* modifié le 09/01/21 ==> était à 1px   ==>  modifié le 30/04/21 ==> était à  -5px 0px */
	padding-top: 0px; /* ajouté le 20/03/21  ==>  modifié le 30/04/21 ==> était à 7px */
  }
}

@media only screen and (min-width: 992px) {
	.navbarre {
/*	background-color: aqua;*/
	margin-top: 6px; /* modifié le 09/01/21 ==> était à 1px  ==>  modifié le 30/04/21 ==> était à 0px */
	padding-top: 0px; /* ==>  modifié le 30/04/21 ==> était à 7px */
  }
}

 /* ajouté le 30/04/21 */
@media only screen and (max-width: 600px) {
	.navmilieu {
/*	background-color: lime;*/
	float: none;
	margin: 0px 0px 4px; /* modifié le 30/04/21 ==> était à 4px  0px 4px */
	width: 99.9999%;  
  }
}

 /* ajouté le 30/04/21 */
@media only screen and (min-width: 600px) {
	.navmilieu {
/*	background-color: silver;*/
	float: left;
	width: auto;
	margin-top: 4px !important;  /* ;modifié le 20/03/21 ==> était à 5px ==>  modifié le 30/04/21 ==> était à 3px */
	margin-bottom: 2px;
	margin-left: 0px; /* ajouté le 01/02/21 */
	margin-right: 0px; /* ajouté le 01/02/21 */
/*	padding-top: 7px;  ajouté le 20/03/21 */
  }
}

 /* ajouté le 30/04/21 */
@media only screen and (min-width: 768px) {
	.navmilieu {
/*	background-color: olive;*/
	float: left;
	width: auto;
	margin-top: 2px;  /*!important; modifié le 20/03/21 ==> était à 5px ==>  modifié le 30/04/21 ==> était à 3px 0.3rem*/
	margin-bottom: 3px; /* ==>  modifié le 01/05/21 ==> était à 2px */
	margin-left: 25%; /* 0px;  ajouté le 01/02/21 */
/*	margin-right: 25%;  0px;  ajouté le 01/02/21 */
	padding-top: 0px; /* ajouté le 20/03/21  ==>  modifié le 30/04/21 ==> était à 7px */
  }
}

 /* ajouté le 30/04/21 */
@media only screen and (min-width: 992px) {
	.navmilieu {
/*	background-color: teal;*/
	width: auto;
	margin-left: 28%;
/*	margin-right: 20%;*/
	margin-top: 5px !important; /* modifié le 20/03/21 ==> était à 5px */
	margin-bottom: 4px; /* ==>  modifié le 01/05/21 ==> était à 3px */
/*	padding-top: 7px;  ajouté le 20/03/21 */
  }
}

 /* ajouté le 30/04/21 */
@media only screen and (max-width: 600px) {
	.navdroite {
/*	background-color: gray;*/
	float: none;
	margin-top: 4px; /*!important;   ajouté le 01/05/21 */
	margin-bottom: 4px; /* ajouté le 30/04/21 */
	padding-top: 0px;
	padding-bottom: 0px; /* ajouté le 30/04/21 */
	width: 99.9999%;  
  }
}

 /* ajouté le 30/04/21  ==> modifié le 01/02/21 */
@media only screen and (min-width: 600px) {
	.navdroite {
/*	background-color: blue;*/
	float: right !important; /* à réussi à corriger l'étirement du bouton "Contact" (les autres étaient normaux) */
	margin-top: 5px; /* ajouté le 30/04/21 ==> modifié le 01/05/21 était à 4px; 0.3rem */
	margin-bottom: 0px !important;; /* ajouté le 30/04/21 était à 3px*/
	margin-right: 0px; /* ajouté le 01/05/21 aucun effet */
/*	width: auto;  ajouté le 30/04/21 aucun effet */
  }
}

 /* ajouté le 01/05/21 note: sans effet */
@media only screen and (min-width: 768px) {
	.navdroite {
/*	background-color: blue;*/
	float: right;
	margin-top: 0.35rem; /* ajouté le 30/04/21 */
	margin-bottom: 0px !important; /* ajouté le 30/04/21  étatit à 3px*/
	padding-bottom: 0px;
/*	width: auto;  ajouté le 30/04/21 aucun effet */
  }
}

 /* ajouté le 01/05/21 note: sans effet */
@media only screen and (min-width: 992px) {
	.navdroite {
/*	background-color: blue;*/
	float: right;
	margin-top: 0.3rem; /* ajouté le 30/04/21 0.25*/
	margin-bottom: 0px !important; /* ajouté le 30/04/21  étatit à 3px*/
	padding-bottom: 0px;
/*	width: auto;  ajouté le 30/04/21 aucun effet */
  }
}

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

.boutonnav {
	display: inline-table;
	background-color: #DDDDDD;
	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;
	background-color: #DDDDDD;
	border: none;
	vertical-align: middle;
	width: 102px;
	height: 20px;
	line-height: 20px;
	padding: 6px 10px 8px;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	font-family: 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-size: 14px;
	font-family: Verdana, sans-serif;
	text-align: center;
	outline: none;
}

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

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

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

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

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

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

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

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

.bouton2:hover, .bouton2bis:hover {
	background-color: #608FE8;
	padding: 6px 4px 8px;
	color: white !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);	
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
/*	transition: background-color 250ms ease-out, border-radius 2s ease-in-out;*/
	outline: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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: 600px) { /* /* max-width: 575px ==> modifié le 30/04/21.navmilieu, .navdroite  */ 
	.boutonnav, .boutonnavpt {
	margin: 4px 0px 4px;
	float: none;
	width: 99.9999%;
  }
}

@media only screen and (min-width: 600px) { /* /ajouté le 01/05/21 .navmilieu, .navdroite  */ 
	.boutonnav, .boutonnavpt {
	margin: 4px 0px 4px;
/*	float: right;*/
/*	width: 99.9999%; */
  }
}

/*div bouton contact - smartphone, tablette moyenne */
@media only screen and (max-width: 600px) { /* max-width: 575px ==> modifié le 30/04/21 */
	.bouton2, .bouton2 a, .bouton2pt, .bouton2pt a {
	margin: 2px 0px 2px;
	float: none;
  }
}

/*div bouton contact - smartphone, tablette moyenne + petit écran 13" 991px) */
@media only screen and (max-width: 600px) { /* max-width: 575px ==> modifié le 30/04/21 */
	.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: 600px) { /* (min-width: 575px) and (max-width: 768px) ==> modifié le 30/04/21 */
	.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: 992px) { /* (min-width: 575px) and (max-width: 992px) ==> modifié le 30/04/21 */
	.bouton2, .bouton2 a, .bouton2bis, .bouton2bis a, .bouton2pt, .bouton2pt a, .bouton2ptbis, .bouton2ptbis a {
 	margin: 2px 3px 2px; /* ==> modifié le 30/04/21  était à 4px; */
	float: none;
  }
}

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

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

.colonnecentrale {
	float: left;
	width: 99.99999%;
	margin-top: 1px;
	margin-bottom: 10px; /* 3px modifié le 07/08/22 */
	margin-left: 0px;
	margin-right: 0px; /* ajouté le 29/04/21 */
	padding: 15px 16px 10px; /* 10px 16px; */
	font-size: 1rem;
	background-color: #E1E6E6; /* #E1EAEA;*/
	border: 1px solid #999999 !important;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
	overflow-x: hidden;
	outline: none;
}

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

/*********************************************/
/*           Début colonne gauche            */
/*********************************************/
      
.colonnegauche {   
	float: left;
	position: relative;
	background-color: transparent;
/*	margin-top: 10px;  !important;*/
/*  visibility: hidden;*/
	margin-left: 0px; /* ajouté le 29/04/21 */
	margin-right: 0px; /* ajouté le 29/04/21 */
/*  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; */
}

/*********************************************/
/*           Début colonne droite            */
/*********************************************/

.colonnedroite {
	float: right; /* left; */
	position: relative;
	background-color: transparent;
	margin-left: 0px; /* ajouté le 29/04/21 */
	margin-right: 0px; /* ajouté le 29/04/21 */
/*	margin-top: 10px;*/
/*  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;*/
}

/****************************************************/
/*           Début colonne toute largeur            */
/****************************************************/

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

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

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

/*******************************************************************************************/
/*           Début media query colonnes gauche, droite, milieu et toute largeur            */
/*******************************************************************************************/

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.colonnegauche {
	float: none;/**/
	width: 99.99999%;
/*	margin-top: 10px;  0px avant modification 16/11/2020 */
	margin-left: 0px; /* auto; /*10px;  /*  20px; /* 10%; ==> était en auto, modifié en 0px le 29/04/21 */
	margin-right: 0px; /* auto;   10px;/*  20px;/*40%; ==> était en auto, modifié en 0px le 29/04/21 */
	margin-bottom: 0px;
	padding-left: 0px; /* ajouté le 29/04/21 */
	padding-right: 0px; /* ajouté le 29/04/21 */
	padding-bottom: 20px;/**/
/*	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;
	width: 99.99999%;
/*	margin-top: 0px;*/
/*	margin-left: -5%;*/
	margin-left: 0px; /* auto; 20px; /* 10%; ==> était en auto, modifié en 0px le 29/04/21 */
	margin-right: 0px; /* auto;20px;40%; ==> était en auto, modifié en 0px le 29/04/21 */
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px; /* ajouté le 28/04/21 */
/*	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: auto;0px;20%;  20%; 20%    0px; */
/*	margin-right: 0px !important; auto;;18% 15%;   20%0px; */
	margin-bottom: 20px;/**/
	padding-left: 0px;/**/
	padding-right: 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%;
  }
}
*/

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

/* é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;
/*	background-color: blue;*/
  }
}

/* é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;
/*	background-color: green;*/
  }
}

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

/* é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 screen and (min-width: 962px) {
   .colonnemilieu {
    float: none; /**/
    width: 69.9999%; /* 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%; /*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) {
   .colonnemilieubis {
    float: none;/* */
    width: 64.9999%; /* 79.9999%;  */
	margin-left: auto;
	margin-right: auto;
/*	background-color: green;*/
  }
}

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

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

/*****************************************************************************************/
/*           Fin media query colonnes gauche, droite, milieu et toute largeur            */
/*****************************************************************************************/

/* Add a boxtxt effect for articles */
.boxtxt {
  background-color: transparent; /* white; */
  width: 99.9999%; /* ajoutés le 29/04/21 */
/*  padding: 20px; /* 15px;  */
  padding-left: 10px; /* 20px; ajoutés le 27/04/21 vu qu'il y avait contradiction entre le padding seul et padding-bottom */
  padding-right: 10px; /* 20px; */
  padding-top: 20px;
  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;
}

/* écran smartphone petit */
@media only screen and (max-width: 600px) {
	.boxtxt {
	width: 99.9999%; /* modifié le 16/11/2020 auto; */
/*	float: none;*/
	margin-top: 0px;
	margin-left: 0px; /* ajouté le 16/11/2020 */
	margin-right: 0px;  /* ajouté le 29/04/2021 */
/*	margin-right: 25%; */
	padding-top: 10px;
/*	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.9999%; /* 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: 992px) {
   .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;
	}
}

/* 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: 10px;/*0.65rem;  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 !important;
/*	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 !important;
	-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: -0.13rem;
	margin-right: -0.52rem;
	padding: 0.01rem 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;
}

@media only screen and (max-width: 992px) {
	.divmsgtrdate {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: -7px;
	margin-bottom: 5px;
	width: auto;
  }
}

/* **** **** **** **** **** **** **** **** **** **** */
/*      Début div défilement de textes et images     */
/* **** **** **** **** **** **** **** **** **** **** */

.defile {
/*	display: block; 
	width: 25%;*/
	padding-top: 0px;
	padding-bottom: 2px;
	text-decoration: none;
	-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;
	text-decoration: none !important;
}

.defile:hover {
	animation-play-state: paused;
	text-decoration: none !important;
}

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

/* 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: none; /* left; ==> avec none; page chateaux lux ne fonctionne pas avant essai du 21/01/21 */
	position: relative;
	width: 99.9999%; /* 400px; ==> modifié le 29/04/21 */
	height: auto;
	margin-top: 15px; /*/* 0px 15px;*/
	margin-left: 0px;/* auto;0px;  ==> était en auto ==> modifié le 28/04/21 */
	margin-right:  0px;/* auto;0px;  ==> était en auto ==> modifié le 28/04/21 */
	padding: 0px 10px 12px; /* les valeurs suivantes modifiés le 28/01/21 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: none;  /* right; avant essai du 21/01/21 */
	position: relative;
	width: 99.9999%; /* 400px; ==> modifié le 29/04/21 */
	height: auto;
	margin-top: 15px; /*0px; 15px;*/
	margin-left: 0px; /* ==> ajouté le 29/04/21 */
	margin-right: 0px !important;
	padding: 0px 10px 12px; /* les valeurs suivantes modifiés le 28/01/21 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: auto; /* 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: auto;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	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: 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 */
	cursor: auto;
}

.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: 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: auto; /*pointer;*//* modifié le 09/06/2021 */ 
}

.divimage7bis {
	position: relative;
	width: 560px; /* 520px; */
	height: auto;
	margin-top: 0px;
	margin-left: auto;  /* avant 24.1%; mais pas centré, pourquoi? /* 24.3%; */
	margin-right: auto; /* avant 30.9%; mais pas centré, pourquoi? /* 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);
}
*/

/*******************************************/
/* Div pour le tableau unités informatique */
/*******************************************/

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

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

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

/***********************************************/
/* Fin div pour le tableau unités informatique */
/***********************************************/

/*************************************/
/* Div pour le défilement des images */
/*************************************/

.divimage7bisv2 {
	position: relative;
	width: 450px;
	height: auto;
	margin-top: 0px;
	margin-left: auto; /* 27.5%; /* 24.3%; */
	margin-right: auto; /* 27.5%; /* 30.7%; */
	padding: 10px; /* 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 solid #666 !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;
}

/*****************************************/
/* Fin Div pour le défilement des images */
/*****************************************/

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

.divimage7v2 {
	position: relative;
	width: 450px;
	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 */
}

.divimage7v2 img {
	position: relative;
	width: 450px;
	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);*/
}

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

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


.divimage7trsp {
	position: relative;
	width: 450px;
	height: auto;
	margin-top: 30px;
	margin-left: 27.5%;
	margin-right: 27.5%;
	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.7);
	-moz-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7);
	-ms-box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7);
	box-shadow: 0px 0px 5px 5px rgba(169, 169, 169, 0.7);
	cursor: auto;
*/
}

/*
@media only screen and (max-width: 600px) { 
.divimage7trsp {
border: 1px solid red;
	width: 480px;
	position: relative;
	margin-top: 30px;
	padding-top: 20px;
	margin-left: -5px !important;
	margin-right: -20px !important;
}
}
*/

.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;
	color: #1746AC;
	background-color: transparent;
	border: 1px solid transparent !important;
	word-break: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	table-layout: fixed;
/*	-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);*/
}
/*
@media only screen and (max-width: 600px) { 
.divimage8esq {
	word-break: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	table-layout: fixed;
  }
}
*/
.divimage8gauquest {
	display: inline-block;
	position: relative;
	width: 100%; /* 200px; */
	height: auto;
	text-align: justify; /*left;*/
	padding: 5px;/* 0px 2px 0px;  0px 7px 0px; */
	line-height: 1.7;
	background-color: transparent;
	border: 1px solid transparent !important;
	word-break: break-word;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	table-layout: fixed;
}

.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;
	color: #1746AC;
	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);*/
}

.divimage8droquest {
	display: inline-block;
	position: relative;
	width: 100%; /* 200px; */
	height: auto;
	text-align: left;
	padding: 5px; /* 5px 0px 7px 5px; */
	line-height: 1.7;
	background-color: transparent;
	border: 1px solid transparent !important;
}

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

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

/* div photo du jour - smartphone + écran petite tablette à utiliser pour un tableau à 4 colonnes
@media only screen and (max-width: 600px) { 
	.divimage7v5 {
	float: none;
	font-size: 10px !important;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 99.99999%;
  }
}
*/

/* 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, .divimage7trsp, .divimage7trsp2, .divimage7 img, .divimage7bis, .divimage7v2, .divimage7v5, .divimage7v3, .divimage7v2 img, .divimage7v5 img, .divimage8, .divimage8 img, .divimage8esq img, .divimage8esq, .divimage8gauquest, .divimage8dir img, .divimage8dir, .divimage8droquest, .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 .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  .navmilieu, .navdroite, .colonnecentrale, .bannerentete, */
@media only screen and (max-width: 991px) {
	.divimage7, .divimage7trsp, .divimage7trsp2, .divimage7:hover, .divimage7v2, .divimage7v2:hover, .divimage7v5, .divimage7v5:hover, .divimage7bis, .divimage7v3 {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 99.99999%;
  }
}

/**/
@media only screen and (max-width: 600px) {
	.divtexteimage1, .divtexteimage2 {
	margin-top: 0px;
	margin-left: 0px; /* 0px; auto; modifié le 28/04/21 */
	margin-right: 0px; /* 0px; auto; modifié le 28/04/21 */
	width: 99.99999%;
  }
}

@media only screen and (min-width: 600px) {
	.divtexteimage1, .divtexteimage2 {
	margin-top: 0px;
	margin-left: auto; /* 0px; modifié le 28/04/21 */
	margin-right: auto; /* 0px; modifié le 28/04/21 */
	width: 99.99999%;
  }
}

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

@media only screen and (min-width: 962px) {
	.divimage6, .divimage6:hover {
	margin-top: 0px;
  }
}
	
@media only screen and (min-width: 992px) {/* .divimage6, .divimage6:hover, */
	.divimage8, .divimage8:hover, .divimage8esq, .divimage8esq:hover, .divimage8gauquest, .divimage8gauquest:hover, .divimage8dir, .divimage8dir:hover, .divimage8droquest, .divimage8gauquest: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: 600px) {
	.divtexteimage3v2 {
	float: none;/**/
	width: 15% !important;;
	margin-left: auto; /* 0px !important; */
	margin-right: auto; /* 0px !important; */
  }
}

/* Div météo position à gauche */
@media only screen and (max-width: 600px) {
	.divtexteimage3 {
	float: none;/**/
	margin-left: 0px !important; /* auto;*/
	margin-right: 0px !important; /*auto;*/
  }
}

/* Div météo position à gauche max*/
@media only screen and (min-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%;
  }
}

/* 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 p {
	display: inline-block;
  	float: left;
  	width: 23.35%;
	margin-top: 0px;
	margin-bottom: 6px;
	margin-left: 0.86%;
	margin-right: 0.7%;
	background-color: #F5F5F5;
	padding: 2px; /* 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 {
	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   */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

.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: 77.99999%; /* 62.49999%;  81.99999%; */
	background-color: #c8dcee; /* #e1ebeb; */
	font-size: 10px;
	color: #000099;
	margin-left: auto;
	margin-right: auto;
/*	margin-left: 10.99999%; /* 18.99999%;  8.99999%; */
/*	margin-right: 19.99999%; /* 19.24999%; */
	margin-top: 7px;
	margin-bottom: 0px; /*10px; */
	/*padding-bottom: 0px;*/ /* en trop - à voir dans la salle */
	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: 77.99999%; /* 62.49999%;  81.99999%; */
	background-color: #c8dcee; /* #e1ebeb; */
	font-size: 10px;
	color: #000099;
	margin-left: auto;
	margin-right: auto;
/*	margin-left: 10.99999%; /* 18.99999%;  8.99999%; */
/*	margin-right: 19.99999%; /* 19.24999%; */
	margin-top: 0px; /* 7px; */
	margin-bottom: 0px; /* 10px; */
	padding-top: 0px; /* ajouté le 6/10/20 */
	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: 77.99999%; /* 62.49999%;  81.99999%; */
	background-color: #c8dcee; /* #e1ebeb; */
	font-size: 10px;
	color: #000099;
	margin-left: auto;
	margin-right: auto;
/*	margin-left: 10.99999%; /* 18.99999%;  8.99999%; */
/*	margin-right: 19.99999%; /* 19.24999%; */
	margin-top: 0px; /* 7px; */
	margin-bottom: 10px;
	padding-top: 0px; /* avant le 6/10/20 - 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: 20px;
	margin-left: 5%;
	margin-right: 5%;
/*	padding-bottom: 20px;
	margin-bottom: 20px; */
  }
}

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

@media only screen and (max-width: 600px) { /* max-width: 962px */
	.pieddepage3 {
	width: auto; /* 99.9999% */
	margin-left: 5%;
	margin-right: 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  */
/* **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** **** */

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

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

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

.titreanecdote {
	background-color: #D5D5D5;
	font-size: 1.1rem;
	font-variant: small-caps;
	text-align: left !important;
	margin-top: 0px; /* modifié le 28/01/21 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;
}

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

.txtanecdote {
/*	background-color: #DDDDDD;*/
	text-align: justify;
	margin-top: -10px;
	margin-bottom: 2px;
	padding: 0px 10px 4px;
}

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

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

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

/* **** **** **** **** **** **** **** **** **** */
/*    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: 6px; /* 8px; */
	font-size: 2.3rem;
	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: -19px; /* -17px; */
	font-size: 2.3rem;
	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;
}

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

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

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

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

#boutonversgauche {
	position: absolute;
	width: 30px;
	height: 45px;
	top: 35%;
	left: 6px; /* 8px; */
	font-size: 2.3rem;
	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: -19px; /* -17px; */
	font-size: 2.3rem;
	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;
}

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

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

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


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

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

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


/* pour faire tourner un symbole */

.tourner {
	transform: rotate(0.28turn);
	}
	
/* pour mettre une bordure colorée dans un div */

#bordergrad {
	padding: 5px;
	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%)
    -webkit-animation: borderanim 59s ease infinite;
    -moz-animation: borderanim 59s ease infinite; */
    animation: borderanim 20s ease infinite;
  }

@keyframes borderanim { 
    0%{background-position:0% 2%}
    50%{background-position:100% 99%}
    100%{background-position:0% 2%}
}

.duplosublinhado {
    text-decoration: underline;
    border-bottom: 1px solid; /* #000;*/
}

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

/* avatar au fond de la page
@media only screen and (max-width: 600px) {
.imageavatarft 	{
	width: 64.99999%;
	height: auto;
  }
}
 */
/* avatar au fond de la page 
@media only screen and (min-width: 600px) {
.imageavatarft 	{
	width: 70px;
	height: auto;
	padding-right: 15px;
  }
}
*/

#convertfdtgen {
	width: 40% !important;
	background: #ECECEC;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: -10px;
	padding: 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%;
	padding-top: 3px;
	padding-bottom: 4px;
}

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