<!--
						
						/*  (Pour travail sur les cadres)   border:1px solid red;  */
						/* BLEU #C1DDFF(RGB(193,221,255) - E4EFFF #C1DDFF  8FABCD - 5D799B - 2B4769 */


			/* SITE - DEBUT CODES POUR MOBILES */
			/* initialement au début mais supprimé : @media (max-width: 640px) {* {box-sizing: border-box;} */


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

                         /*     SITE - EXEMPLE DE MENU DEROULANT CSS    */
 nav {text-align:center;}
.menu {display:inline-block;}
.menu > li {float:left; color:#e298e1; width:600px; height:40px; line-height:40px; background:rgba(250,250,250,1); cursor:pointer; font-size:40px;}
.sub-menu {transform:scale(0); transform-origin:top center; transition: all 1000ms ease-in-out;}
.sub-menu li {font-size:40px; background:rgba(250,250,250,1); padding:10px 0; color:red; border-bottom:1px solid rgba(255,255,255, 0.2); transform:scale(0);  transform-
origin:top center;
transition:all 1000ms ease-in-out;}
.sub-menu li:last-child{border-bottom:0;}
.sub-menu li:hover{background:#C8E6C9;}
.menu > li:hover .sub-menu li {transform: scale(1);}
.menu > li:hover .sub-menu{transform: scale(1);}


/*------------------------------ SITE - DEBUT MENU CSSPLAY-RESPONSIVE-UNIVERSAL-DROPLIS----------------------*/


			/* SITE - MENU - TITRE TOBACOSTOP EN HAUT DU MENU */
.menulogo {text-align:center; font-size:20px; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; text-shadow: 0px 0px 15px #FFFFFF;}

			/* SITE - MENU - COULEUR ET TAILLE TEXTES SOUS-MENUS : "TESTS"-"EXTRAS"-"DIVERS" */
.menutest {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-align:center; color:#FFFFFF; font-size:16px; text-transform:uppercase;  font-style:italic;}

			/* SITE - MENU - INSERTION DES LOGOS OISEAUX HAUT ET BAS */
			/* ça ouvre un bloc large 100%, haut de 100 pixels où on centre l'image qui ne se répète pas    */
#menulog1 {background-image: url('images/oiseau.gif'); background-repeat: no-repeat; background-position: center; width: 100%; height: 50px; }
#menulog2 {background-image: url('images/oiseau2.gif'); background-repeat: no-repeat; background-position: center; width: 100%; height: 30px; }


			/* SITE - MENU CSSPLAY-RESPONSIVE-UNIVERSAL-DROPLIST */
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-responsive-universal-droplist.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
===================================================================8FABCD - 5D799B - 2B4769 */


/* TAILLE COULEUR ET OMBRE FOND MENU (décalage horizontal à droite, décalage vertical en bas, force du dégradé, couleur) */
.menu {width:310px; /* largeur menu, va avec right ci-dessous */ background: linear-gradient(to bottom left, #FFFFCC, #8FABCD 20%); height:85%; box-shadow: 00px 14px 20px #000000; overflow:auto; position:fixed;
bottom:100px; right:-330px; /* retrait hors d'écran, va avec width ci-dessus */ z-index:500;
top:50px;
-webkit-transition:0.5s;
transition:0.5s;}

/* COULEUR FOND ALINEAS */
.menu ul li a {display:block; background:#2B4769; font:bold 14px/30px arial, sans-serif; /* taille police alinéas */ color:#EEE; text-decoration:none; border-bottom:1px solid #666; text-align:left;}
.menu ul li a:hover {color:#fff; text-decoration:underline;}
.menu ul li label {display:block; font:bold 14px/30px arial, sans-serif; /* taille police titres */ color:#FFF; cursor:pointer; background:#333; border-bottom:1px solid #666;
text-transform:uppercase; text-align:left;
-webkit-transition:0.5s;
transition:0.5s;}

/* COULEUR FOND ALINEAS LA LOI - paramètres du sous-menu "la loi" - couleur de fond et style de police pas en majuscule */
.menu ul ul li label {display:block; background:#5D799B; font:bold 14px/30px arial, sans-serif; color:#FFF; cursor:pointer; border-bottom:1px solid #666;
text-transform:none; text-align:left;
-webkit-transition:0.5s;
transition:0.5s;}

/* PETITES FLECHES A DROITE DES MENUS */
.menu ul li label:after {content:""; display:block; width:6px; height:6px; border:3px solid #888; border-color:transparent transparent #888 #888;
float:right; margin-top:9px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transition:0.5s;
transition:0.5s;}

.menu ul li label:hover {color:#fff; background:#444;}

.menu input {position:absolute; left:-9999px; display:none;}

.menu ul > li > a {padding:0 10px;}
.menu ul ul > li > a {padding:0 10px 0 20px;}
.menu ul ul ul > li > a {padding:0 10px 0 30px;}
.menu ul ul ul ul > li > a {padding:0 10px 0 40px;}

.menu ul > li > label {padding:0 10px;}
.menu ul ul > li > label {padding:0 10px 0 20px;}
.menu ul ul ul > li > label {padding:0 10px 0 30px;}
.menu ul ul ul ul > li > label {padding:0 10px 0 40px;}

.menu ul {padding:0; margin:0; list-style:none;}
.menu ul ul {position:relative; max-height:0; overflow:hidden;
-webkit-transition:0.4s;
transition:0.4s;
}

/* HAUTEUR DE DEROULEMENT DES MENUS SUIVANT LE NOMBRE DES ALINEAS */
.menu ul input:checked ~ ul {max-height:2000px; /* make this higher than the highest sub menu */
transition:1s;
-webkit-transition:1s;
}

.menu ul input:checked + label {background:#555; padding-left:20px;}
.menu ul ul input:checked + label {background:#666; padding-left:30px;}
.menu ul ul ul input:checked + label {background:#777; padding-left:40px;}

.menu ul input:checked + label:after {border-color:transparent transparent #eee #eee;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}

.menu ul:after {content:""; display:block; width:1px; height:100%; background:#666; position:absolute; top:0; left:0;}
.menu ul ul:after {width:10px; background:#555; box-shadow:5px 0 5px -2px rgba(0,0,0,0.4);}
.menu ul ul ul:after {width:20px; background:#666;}
.menu ul ul ul ul:after {width:30px; background:#777;}


 /* MOT "Menu" AU-DESSUS DE MENU */
.miniou {display:block; width:50px; height:10px;   position:fixed; right:-6px; top:8px;  z-index:500;}
.ftminiou {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center;}


/* BOUTON HAMBURGER D'OUVERTURE */
#menuopenclose {position:absolute; left:-9999px; display:none;}
.menuopenclose span {position:absolute; left:-9999px;}
.menuopenclose {display:block; width:30px; height:15px; border:5px solid #000; border-width:5px 0; box-shadow: 3px 5px 5px #888; /* décalage horizontal droite, décalage vertical bas, force dégradé, couleur */ position:fixed; right:10px; top:25px; cursor:pointer; z-index:500;
-webkit-transition:0.5s;
transition:0.5s;
}
.menuopenclose:before,
.menuopenclose:after {content:""; display:block; width:30px; height:5px; background:#000; position:absolute; left:0; top:5px;}

/* BOUTON HAMBURGER DE FERMETURE (ANCIENNEMENT UNE CROIX ROUGE) */
#menuopenclose:checked ~ .menu {right:0;}
#menuopenclose:checked ~ .menuopenclose {right:10px; border-color:transparent; border-radius:30px;  box-shadow: 3px 5px 5px #888; /* décalage horizontal droite, décalage vertical bas, force dégradé, couleur */}

#menuopenclose:checked ~ .menuopenclose:before {background:#000; box-shadow: 3px 5px 5px #888; /* décalage horizontal droite, décalage vertical bas, force dégradé, couleur */
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#menuopenclose:checked ~ .menuopenclose:after {background:#000; box-shadow: 3px 5px 5px #888; /* décalage horizontal droite, décalage vertical bas, force dégradé, couleur */
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}


			/* MENU - ARRETER - couleur du titre "COMMENT ARRÊTER DE FUMER" du MENU */
.ftartime {color:#fff59d;}
			/* MENU - ARRETER - couleur de la ligne du MENU pour la page pour la section "COMMENT ARRÊTER DE FUMER" */
.ftarlime {color:#fff59d;}
			/* MENU - DANGERS - couleur du titre "DANGERS DU TABAC" du MENU */
.ftdatime {color:#fff59d;}
			/* MENU - DANGERS - couleur de la ligne du MENU pour la page pour la section "IMAGES TABAGIQUES" */
.ftdalime {color:#fff59d;}
			/* MENU - IMAGES - couleur du titre "IMAGES TABAGIQUES" du MENU */
.ftimtime {color:#fff59d;}
			/* MENU - IMAGES - couleur de la ligne du MENU pour la page pour la section "IMAGES TABAGIQUES" */
.ftimlime {color:#fff59d;}
			/* - MENU - ADAGES couleur du titre "CITATIONS ILLUSTRES" du MENU */
.ftadtime {color:#fff59d;}
			/* MENU - ADAGES - couleur de la ligne du MENU pour la page pour la section "CITATIONS ILLUSTRES" */
.ftadlime {color:#fff59d;}
			/* MENU - BONUS - couleur du titre "BONUS" du MENU et SOUS-TITRES */
.ftbotime {color:#fff59d;}
			/* MENU - BONUS - couleur de la ligne du MENU pour la page pour la section "BONUS" */
.ftbolime {color:#fff59d;}


			/* MENU - ICONE "INFORMATIONS LEGALES" DU MENU */
			/* https://cssicon.space/#/icon/mail */			
.infolega1 {color:#FFFFFF; position:absolute; margin-left:6px; /* -> positionnement horizontal*/ margin-top:11px; /* -> positionnement vertical*/ width:17px; height:5px; border-top:solid 1px currentColor; border-bottom:solid 1px currentColor;}
.infolega1:before {content:''; position:absolute; top:2px; left:0; width:11px; height:5px; border-top:solid 1px currentColor; border-bottom:solid 1px currentColor;}
			
.infolega {color:#FFFFFF; /*couleur icône*/ position:absolute; margin-left:8px; /* -> positionnement horizontal*/ margin-top:11px; /* -> positionnement vertical*/ width:14px; height:2px; border-radius:1px; border:solid 1px currentColor; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.infolega:before {content:''; position:absolute; left:-12px; top:-1px; width:0px; height:0px; border-left:solid 5px transparent; border-right:solid 5px currentColor; border-top:solid 2px transparent; border-bottom:solid 2px transparent;}

			/* MENU - ICONE "LIENS" DU MENU */
			/* https://cssicon.space/#/icon/mail */
.lien {color:#FFFFFF; /*couleur icône*/ position:absolute; margin-left:11px; /* -> positionnement horizontal*/ margin-top:14px;/* -> positionnement vertical*/ width:7px; height:1px; background-color:currentColor;  -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.lien:before {content:''; position:absolute; top:-3px; left:-7px; width:8px; height:5px; border-radius:2px; border:solid 1px currentColor;}
.lien:after {content:''; position:absolute; top:-3px; right:-7px; width:8px; height:5px; border-radius:2px; border:solid 1px currentColor;}

			/* MENU - ICONE "CONTACT" DU MENU */
			/* https://cssicon.space/#/icon/mail */
			
.contact {color:#FFFFFF; /*couleur icône*/ position:absolute; margin-left:7px; /* -> positionnement horizontal*/ margin-top:9px; /* -> positionnement vertical*/ width:15px; height:10px; border-radius:1px; border:solid 1px currentColor;}
.contact:before {content:''; position:absolute; left:7px; top:-4px; width:1px; height:10px; background-color:currentColor; -webkit-transform-origin:bottom; transform-origin:bottom; -webkit-transform:rotate(-54deg); transform:rotate(-54deg);}
.contact:after {content:''; position:absolute; left:7px; top:-4px; width:1px; height:10px; background-color:currentColor; -webkit-transform-origin:bottom; transform-origin:bottom; -webkit-transform:rotate(54deg); transform:rotate(54deg);}

			/* MENU - ICONE "ACCUEIL" DU MENU */
			/* https://cssicon.space/#/icon/paperclip*/
			
.accueil {color:#FFFFFF; /*couleur icône*/ position:absolute; margin-left:12px; /* -> positionnement horizontal*/ margin-top:8px; /* -> positionnement vertical*/ width:6px; height:12px; border-radius:4px 4px 0 0; border-left:solid 1px currentColor; border-right:solid 1px currentColor; border-top:solid 1px currentColor; -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.accueil:before {content:''; position:absolute; top:11px; left:-1px; width:4px; height:6px; border-radius:0 0 3px 3px; border-left:solid 1px currentColor; border-right:solid 1px currentColor; border-bottom:solid 1px currentColor;}
.accueil:after {content:''; position:absolute; left:1px; top:1px; width:2px; height:10px; border-radius:4px 4px 0 0; border-left:solid 1px currentColor; border-right:solid 1px currentColor; border-top:solid 1px currentColor;}


/*----------------    FIN   MENU CSSPLAY-RESPONSIVE-UNIVERSAL-DROPLIST     --------------------------*/

			/* SITE - ICONE "CONTACT" DES COPYRIGHT DE BAS DE PAGE */
			/* https://cssicon.space/#/icon/mail */
			
.contactb {color:#FFFFFF; /*couleur icône*/ position:absolute; margin-left:7px; /* -> positionnement horizontal*/ margin-top:7px; /* -> positionnement vertical*/ width:15px; height:10px; border-radius:1px; border:solid 1px currentColor;}
.contactb:before {content:''; position:absolute; left:7px; top:-4px; width:1px; height:10px; background-color:currentColor; -webkit-transform-origin:bottom; transform-origin:bottom; -webkit-transform:rotate(-54deg); transform:rotate(-54deg);}
.contactb:after {content:''; position:absolute; left:7px; top:-4px; width:1px; height:10px; background-color:currentColor; -webkit-transform-origin:bottom; transform-origin:bottom; -webkit-transform:rotate(54deg); transform:rotate(54deg);}


									/*  POUR TOUT PETITS ECRANS  */
									
/*-------POUR TOUT PETITS ECRANS- SITE - DEBUT MENU CSSPLAY-RESPONSIVE-UNIVERSAL-DROPLIS-POUR TOUT PETITS ECRANS------*/

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

/* TAILLE COULEUR ET OMBRE FOND MENU (décalage horizontal à droite, décalage vertical en bas, force du dégradé, couleur) */
.menu {width:188px; /* largeur menu, va avec right ci-dessous */ background: linear-gradient(to bottom left, #FFFFCC, #8FABCD 20%); height:85%; box-shadow: 00px 14px 20px #000000; overflow:auto; position:fixed;
bottom:100px; right:-200px; /* retrait hors d'écran, va avec width ci-dessus */ z-index:500;
top:50px;
-webkit-transition:0.5s;
transition:0.5s;}
}
@media screen and (max-width:190px) {

/* TAILLE COULEUR ET OMBRE FOND MENU (décalage horizontal à droite, décalage vertical en bas, force du dégradé, couleur) */
.menu {width:140px; /* largeur menu, va avec right ci-dessous */ background: linear-gradient(to bottom left, #FFFFCC, #8FABCD 20%); height:85%; box-shadow: 00px 14px 20px #000000; overflow:auto; position:fixed;
bottom:100px; right:-160px; /* retrait hors d'écran, va avec width ci-dessus */ z-index:500;
top:50px;
-webkit-transition:0.5s;
transition:0.5s;}
}
/*----------------    FIN   MENU CSSPLAY-RESPONSIVE-UNIVERSAL-DROPLIST POUR TOUT PETITS ECRANS  --------------------------*/


/*-------------------  SITE - MEDIA QUERY------------------------------------------------*/

			/*        SITE - MEDIA QUERY (FORMULATION CONDITIONNELLE EN FONCTION DE LA TAILLE DE L'ECRAN)    Exemple de Peril17.html : @media screen and
			(min-width:1500px)
			{.imagmarg {margin-top:5em;  margin-right:9em; margin-bottom:2em; margin-left:9em;}.cldablan {flex:4; padding-top:1em;  padding-right:5em;
			padding-bottom:10em;
			padding-left:5em;}}
			Quand la page se rétrécie, les images s'adaptent avec largeur "100%" et hauteur "auto".	*/


@media screen and (min-width:1500px)		/*   Si on n'est plus sur un portable ni une tablette     */
	{

	.ftfleche {color:#FFFFFF;} 		/*   PAGE TEMOINS.HTML : disparition des flèches du tableau des drogues     */
	
	
			/* TOUT LE SITE : apparition des bulles menus flèches bas de page */

 			/* BULLES GAUCHES  */
	div.bulleg span {transform:scale(0) rotate(15deg); transition:all .3s; opacity:0;}
	div.bulleg:hover span, div.conteneur:focus span{transform:scale(1); opacity:1; font-size: 20px; position:absolute; margin-top:0px; left:80px;}

 			/* BULLES DROITES  */
	div.bulled span{transform:scale(0) rotate(-15deg); transition:all .3s; opacity:0;}

	div.bulled:hover span, div.conteneur:focus span{transform:scale(1); opacity:1; font-size: 20px; position:absolute; margin-top:0px; right:340px;}

					/*FIN - apparition des bulles menus flèches bas de page   */

	}			/* FIN - MEDIA QUERY - FIN */

/*-----------------------------    FIN SITE - MEDIA QUERY--------------------------------------------*/


/*-------------------------------------------------    DEBUT SITE ----------------------------------------------------*/


/*--------------------------------- A UTILISER SI PROBLEME AVEC LES BULLES LIENS STATIQUES et NOIRES---------------------------*/
/*--------------------------------- BULLES DE LIENS PAGE AVANT ET PAGE ARRIERE DE BAS DE PAGE----------*/
/*------------------------------------    CODE A INSERER DANS LES PAGES AVANT LE COPYRIGHT-------------------------
			  		  			  
													<DIV CLASS="sparblpa"></DIV>
													
<DIV CLASS="flotgauc liensbas"><A HREF="jourjc.html" CLASS="liensbas" TITLE="Bouton page pr&eacute;c&eacute;dente&nbsp;: Apr&egrave;s le jour J.">&lt;&minus;&nbsp;Apr&egrave;s le jour&nbsp;J</A></DIV>
<DIV CLASS="flotdroi liensbas"><A HREF="peril.html" CLASS="liensbas" TITLE="Bouton page suivante&nbsp;: Dangers du tabac.">Dangers du tabac&nbsp;&minus;&gt;</A></DIV>

													<DIV STYLE="clear:both"></DIV>												

													<DIV CLASS="sparblpa"></DIV>													
															
<DIV CLASS="copyrigh">Copyright &copy; 2002<SCRIPT TYPE="text/javascript" SRC="copyrigh.txt"></SCRIPT> Tobacostop.<BR />
Tous droits r&eacute;serv&eacute;s.</DIV>*/
/*-----------------------------    FIN SITE - BULLES DE LIENS PAGE AVANT PAGE ARRIERE DE BAS DE PAGE----------*/


.liensbas {background-color:#FFFFFF; border-radius:20px; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:16px; font-weight:bold; padding-left:6px; padding-top:4px; padding-right:6px; padding-bottom:4px;}
a:link.liensbas    {color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif;}
a:visited.liensbas {color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif;}
a:hover.liensbas   {color:#FF0000; font-family:Arial, Helvetica Neue, Helvetica, sans-serif;}
a:active.liensbas  {color:#00FF00; font-family:Arial, Helvetica Neue, Helvetica, sans-serif;}


/*---------------------------------------   IMAGES SITE DESSINS PHOTOS ILLUSTRATIONS  -----------------*/


			/* FLECHES : taille, rondeur, ombre (décalage horizontal à droite, décalage vertical en bas, force du dégradé, couleur) */
.fleche {width:35px; height:35px; border-radius:50%; box-shadow: 3px 5px 5px #888;}

			/*                       SITE -  IMAGES POSITIONNEMENT DES FLECHES DE NAVIGATION EN BAS D'ECRAN */
.fixflega {position:fixed; bottom:-210px; left:24px; z-index:600;}
.fixfledr {position:fixed; bottom:-210px; right:-226px; z-index:600;}


			/* SITE - FLECHES GROSSISSSANTES RAPIDES    utiliser : <SPAN CLASS="zoomvite"> juste avant l'image */
.zoomvite {width: 100%; height: 100%;}
.zoomvite img {						/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée de 3 secondes. */
-webkit-transition: all 0.3s ease;	/* Safari et Chrome */
-moz-transition: all 0.3s ease;		/* Firefox */
-ms-transition: all 0.3s ease;		/* Internet Explorer 9 */
-o-transition: all 0.3s ease;		/* Opera */
transition: all 0.3s ease;}
.zoomvite:hover img {				/* L'image est agrandie par 2 */
-webkit-transform:scale(2);			/* Safari et Chrome */
-moz-transform:scale(2);			/* Firefox */
-ms-transform:scale(2);				/* Internet Explorer 9 */
-o-transform:scale(2);				/* Opera */
transform:scale(2);}


/*----------------------SITE - BULLES POUR PORTABLES DES IMAGES FLECHES DE NAVIGATION EN BAS D'ECRAN à GAUCHE */


			/*Commençons par définir l’élément div conteneur. Rien de particulier…*/
div.bulleg {
	margin: 20 auto;
	width: 18rem;
	height: 18rem;
	color: navy;
	}
			/*Passons ensuite à son élément enfant. Il possède une position absolue, ajustée ici en bas de l’image à l'aide de la propriété margin. Un léger
			décalage permettra au contenu d’être un peu éloigné des bords de l’infobulle.*/
div.bulleg span{
	position:absolute;
	margin-top:40px;
	left:00px;
	padding: 5px
	}
			/*Nous ajoutons ensuite les propriétés fondamentales de l’infobulle : l’alignement du texte, sa couleur, un ombrage du texte ainsi que de la boîte de l’élément, une bordure à coins arrondis et un fond en dégradé radial partant à 45° du coin supérieur gauche. C’est la partie cosmétique que vous pourriez (et devriez) modifier selon vos goûts ou vos besoins.*/
div.bulleg span{
	text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size: 14px;
	/*text-shadow:0 2px 0 black;*/
	box-shadow: 3px 5px 5px #888;  /* décalage horizontal à droite, décalage vertical en bas, force du dégradé, couleur */
	border:1px;
	border-radius:15px;
	background: radial-gradient(0px 0px, #043152, #000000);
	}
			/*Enfin, nous définissons une transformation initiale avec une taille nulle et une rotation de 15 degrés, un temps de transition de 0,3 seconde,
			ainsi qu’une
			transparence totale : initialement, l’infobulle n’est pas affichée.*/
/*div.bulleg span{
	transform:scale(0) rotate(15deg);
	transition:all .3s;
	opacity:0;
	}*/
			/*Vient enfin la dernière partie : lorsque le pointeur est sur l’élément div ou que celui-ci possède le focus, nous redonnons à l’élément sa
			taille normale et
			l’affichons sans rotation avec une transparence nulle.*/
/*div.bulleg:hover span, div.conteneur:focus span{
	transform:scale(1);
	opacity:1;
	}*/


/*----------------------SITE -  BULLES POUR PORTABLES DES IMAGES FLECHES DE NAVIGATION EN BAS D'ECRAN à DROITE  */


			/*Commençons par définir l’élément div conteneur. Rien de particulier…*/
div.bulled {
	margin: 20 auto;
	width: 18rem;
	height: 18rem;
	color: navy;
	}
			/*Passons ensuite à son élément enfant. Il possède une position absolue, ajustée ici en bas de l’image à l'aide de la propriété margin. Un léger
			décalage
			permettra au contenu d’être un peu éloigné des bords de l’infobulle.*/
div.bulled span{
	position:absolute;
	margin-top:40px;
	right:252px;
	padding:5px
	}
			/*Nous ajoutons ensuite les propriétés fondamentales de l’infobulle : l’alignement du texte, sa couleur, un ombrage du texte ainsi que de la
			boîte de l’élément,
			une bordure à coins arrondis et un fond en dégradé radial partant à 45° du coin supérieur gauche. C’est la partie cosmétique que vous pourriez
			(et devriez)
			modifier selon vos goûts ou vos besoins.*/
div.bulled span{
	text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size: 14px; word-break: normal; /* pour arrêter la césure automatique qui fout le texte du bouton en l'air */
  -webkit-hyphens: none; /* idem, etc.  */
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
	/*text-shadow:0 2px 0 black;*/
	box-shadow: 3px 5px 5px #888;  /* décalage horizontal droite, décalage vertical bas, force dégradé, couleur */
	border:1px;
	border-radius:15px;
	background: radial-gradient(0px 0px, #043152, #000000);
	}
			/*Enfin, nous définissons une transformation initiale avec une taille nulle et une rotation de 15 degrés, un temps de transition de 0,3 seconde,
			ainsi qu’une
			transparence totale : initialement, l’infobulle n’est pas affichée.*/
/*div.bulled span{
	transform:scale(0) rotate(-15deg);
	transition:all .3s;
	opacity:0;
	}*/
			/*Vient enfin la dernière partie : lorsque le pointeur est sur l’élément div ou que celui-ci possède le focus, nous redonnons à l’élément sa
			taille normale et
			l’affichons sans rotation avec une transparence nulle.*/
/*div.bulled:hover span, div.conteneur:focus span{
	transform:scale(1);
	opacity:1;
	}*/


/*----------------------------SITE - BULLES DES IMAGES-----------------------*/


			/*L’élément HTML img dispose d’attributs permettant d’afficher soit une description (attribut title), soit un texte alternatif (attribut alt) affiché lorsque l’image ne peut pas l’être.
			Le comportement varie toutefois selon les navigateurs. S’il est possible de jouer sur la mise en forme du texte affiché, le comportement reste figé et prévisible. Le but est ici de créer une infobulle donnant une description mieux mise en valeur.
			L’élément img ne permettant pas de spécifier de texte (autre que celui des deux attributs déjà cités), il faudra l’inclure dans un élément conteneur div.
			L’attribut title ne sera pas employé : le texte de l’infobulle à afficher sera placé dans un élément span, affiché uniquement lors le pointeur est au-dessus de l’élément conteneur.
			Le code HTML est le suivant :
				<div class="bulle">
				<img src="adresse image" alt="texte alternatif">
				<span>Contenu de l’infobulle</span>
				</div>
			Remarquez que l’infobulle pourrait donc contenir du texte, une image ou un contenu mixte. Une souplesse dont sont dépourvu les attributs title et alt.

			/*Commençons par définir l’élément div conteneur. Rien de particulier…*/
	/*   SUPPRIME : div.bulle {margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto; width:auto; height:auto; border:1px solid  red;}   */

			/*Passons ensuite à son élément enfant. Il possède une position absolue, ajustée ici en bas de l’image à l'aide de la propriété margin. Un léger décalage permettra au contenu d’être un peu éloigné des bords de l’infobulle.*/
div.bulle span {position:absolute; margin-left:26px; margin-right:26px; padding:0px}

			/*Nous ajoutons ensuite les propriétés fondamentales de l’infobulle : l’alignement du texte, sa couleur, un ombrage du texte ainsi que de la boîte de l’élément, une bordure à coins arrondis et un fond en dégradé radial partant à 45° du coin supérieur gauche. C’est la partie cosmétique que vous pourriez (et devriez) modifier selon vos goûts ou vos besoins.*/
div.bulle span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000;
										/* décalage horizontal droite, décalage vertical bas, force dégradé, couleur */
border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%); padding:4px;}

			/*Enfin, nous définissons une transformation initiale avec une taille nulle et une rotation de 15 degrés, un temps de transition de 0,3 seconde, ainsi qu’une transparence totale : initialement, l’infobulle n’est pas affichée.*/
div.bulle span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}

			/*Vient enfin la dernière partie : lorsque le pointeur est sur l’élément div ou que celui-ci possède le focus, nous redonnons à l’élément sa taille normale et l’affichons sans rotation avec une transparence nulle.*/
div.bulle:hover span,
div.bulle:focus span{transform:scale(1); opacity:1;}


			/* SITE - BULLES BLEUES 1 DES IMAGES (pour bulles différentes) */
										
div.bulle1 span {position:absolute; padding:5px}
div.bulle1 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle1 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle1:hover span,
div.bulle1:focus span{transform:scale(1); opacity:1;}

			/*SITE - BULLES BLEUES 2 DES IMAGES (pour bulles différentes) */
										
div.bulle2 span {position:absolute; padding:5px}
div.bulle2 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle2 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle2:hover span,
div.bulle2:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 3 DES IMAGES (pour bulles différentes) */

div.bulle3 span {position:absolute; padding:5px}
div.bulle3 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle3 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle3:hover span,
div.bulle3:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 4 DES IMAGES (pour bulles différentes) */

div.bulle4 span {position:absolute; padding:5px}
div.bulle4 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle4 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle4:hover span,
div.bulle4:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 5 DES IMAGES (pour bulles différentes) */

div.bulle5 span {position:absolute; padding:5px}
div.bulle5 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle5 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle5:hover span,
div.bulle5:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 6 DES IMAGES (pour bulles différentes) */

div.bulle6 span {position:absolute; padding:5px}
div.bulle6 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle6 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle6:hover span,
div.bulle6:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 7 DES IMAGES (pour bulles différentes) */

div.bulle7 span {position:absolute; padding:5px}
div.bulle7 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle7 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle7:hover span,
div.bulle7:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 8 DES IMAGES (pour bulles différentes) */

div.bulle8 span {position:absolute; padding:5px}
div.bulle8 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle8 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle8:hover span,
div.bulle8:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 9 DES IMAGES (pour bulles différentes) */

div.bulle9 span {position:absolute; padding:5px}
div.bulle9 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle9 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle9:hover span,
div.bulle9:focus span{transform:scale(1); opacity:1;}

			/* SITE - BULLES BLEUES 10 DES IMAGES (pour bulles différentes) */

div.bulle10 span {position:absolute; padding:5px}
div.bulle10 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #5D799B 40%);}
div.bulle10 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bulle10:hover span,
div.bulle10:focus span{transform:scale(1); opacity:1;}


/*------------------------------EFFETS SUR IMAGE--------------------------------*/


			/* SITE - IMAGES GROSSISSSANTES LENTES */
			/* <SPAN, P ou DIV CLASS="zoom"> juste avant l'image */
			/* cf. image00-Intro, image08-Skieuse x 5, image21-Radio, image32-Atlas, image35-Hécatombe */
			/* SUPPRIMES : .zoom {width:100%; height:100%;} devenu : .zoom {width:auto; height:auto;} */

.zoom img {							/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée de 3 secondes. */
-webkit-transition: all 3s ease;    /* Safari et Chrome */
-moz-transition: all 3s ease;       /* Firefox */
-ms-transition: all 3s ease;        /* Internet Explorer 9 */
-o-transition: all 3s ease;         /* Opera */
transition: all 3s ease;}
.zoom:hover img {                   /* L'image est agrandie par 2 */
-webkit-transform:scale(2);         /* Safari et Chrome */
-moz-transform:scale(2);            /* Firefox */
-ms-transform:scale(2);             /* Internet Explorer 9 */
-o-transform:scale(2);              /* Opera */
transform:scale(2);}


			/* SITE - IMAGE EFFET DEVENANT RONDE */
			/* <P ou DIV CLASS="sarrondi"> juste avant l'image */
			/* cf. image07-Talleyrand, image12-Foetus, image13-Allaitement */
			/* 4. Image ronde (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */

.sarrondi img {-webkit-transition: 3s ease-in-out !important; transition: 3s ease-in-out !important;}
.sarrondi:hover img:hover {border-radius: 50%;}


			/* SITE - IMAGE EFFET DEVENANT ETROITE */
			/* <P ou DIV CLASS="retrecit"> juste avant l'image */
			/* pas utilisé */

.retrecit img {-webkit-transition: 3s ease; transition: 3s ease;}
.retrecit:hover img:hover, img:focus {width: 200px; height:50px;}


			/* SITE - IMAGE EFFET ROTATIVE PUIS RONDE (ou pas) */
			/* <P ou DIV CLASS="virevolt"> juste avant l'image */
			/* cf. image05-Vauquelin, image16-Sand, image21-Radio, image31-Poubelle */
			/* 10. Morph (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */

.virevolt img {-webkit-filter: grayscale(0) blur(0px); filter: grayscale(0) blur(0px); -webkit-transition: all 5s ease; transition: all 5s ease;} /* durée */
.virevolt:hover img {border-radius: 50%; /* arrondit l'image */ -webkit-transform: rotate(360deg); /* rotation de l'image */ transform: rotate(360deg);} /* on peut faire rotateY ou rotateZ pour flipper */


			/* SITE - IMAGE EFFET ROTATION D'UN SEUL TOUR SANS MARCHE ARRIERE */
			/* <P ou DIV CLASS="rotation"> juste avant l'image */
			/* cf. peril22.html-les drapeaux */
			/* https://forum.alsacreations.com/topic-4-58211-1-CSS3-transition--ne-pas-revenir-a-letat-initiale-apres-hover.html */
			/* https://jsfiddle.net/EWD8X/1/ */

@keyframes rotate {0% {transform: rotate(0); -webkit-transform: rotate(0);}100% {transform: rotate(360deg); -webkit-transform: rotate(360deg);}}
.rotation img:hover {animation: rotate 1s; -webkit-animation: rotate 1s;} /* durée d'une seconde */ /* on peut faire rotateY ou rotateZ pour flipper */


			/* SITE - IMAGE EFFET REFLET SUR IMAGE */
			/* <P ou DIV CLASS="reflet"> juste avant l'image */
			/* cf. image22-Coupe */
			/* 14. Reflet (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */

.reflet {position:relative;}
.reflet::before {position:absolute; top:0; left:-75%; z-index: 2; display:block; content:''; width:50%; height:100%; background:-webkit-linear-gradient(left, rgba(255,25
5,255,0) 0%, rgba(255,255,255,.3) 100%); background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform:skewX(-25deg);
transform:skewX(-25deg);}
.reflet:hover::before {-webkit-animation:reflet 4s; animation:reflet 4s;}   /* durée du reflet */
@-webkit-keyframes reflet {50% {left:40%;}}
@keyframes reflet {50% {left:40%;}}


			/*    SITE - IMAGE EFFET FLASH SUR IMAGE */
			/* <P ou DIV CLASS="flash"> juste avant l'image */
			/* non utilisé */
			/* 13. Flash (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */

.flash:hover img {opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s;}
@-webkit-keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}}
@keyframes flash {0% {opacity: .4;} 100% {opacity: 1;}}


			/* SITE - IMAGE EFFET HALO BLANC BREF SUR IMAGE */
			/* <P ou DIV CLASS="halo"> juste avant l'image */
			/* cf. image06-Claride, image20-Artères, image35-Hécatombe */
			/* 15. Halo lumineux (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */

.halo {position:relative;}
.halo::before {position:absolute; top:50%; left:50%; z-index: 2; display:block; content:''; width:0; height:0; background:rgba(255,255,255,.8); border-radius:100%; -
webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%);  /* réglages horizontal et vertical */ opacity:0;}
.halo:hover::before {-webkit-animation:circle .75s; animation:circle .75s;}
@-webkit-keyframes circle {0% {opacity:1;} 40% {opacity:1;} 100% {width:200%; height:200%; opacity:0;}}
@keyframes circle {0% {opacity:1;} 40% {opacity:1;} 100% {width:100%; height:200%; opacity:0;}}


			/* SITE - IMAGE EFFET HALO NOIR BREF SUR IMAGE */
			/* <P ou DIV CLASS="halonoir"> juste avant l'image */
			/* cf. image14-Enfumeur,  */
			/* 15. Halo lumineux (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */
.halonoir {position:relative;}
.halonoir::before {position:absolute; top:50%; left:50%; z-index: 2; display:block; content:''; width:0; height:0; background:rgba(51,0,51,10); border-radius:100%; -
webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); opacity:0;}
.halonoir:hover::before {-webkit-animation:circle 2.75s; animation:circle 2.75s;}
@-webkit-keyframes circle {0% {opacity:1;} 40% {opacity:1;} 100% {width:200%; height:200%; opacity:0;}}
@keyframes circle {0% {opacity:1;} 40% {opacity:1;} 100% {width:100%; height:200%; opacity:0;}}


			/* SITE - IMAGE EFFET INCLINAISON DE L'IMAGE */
			/* <P ou DIV CLASS="incline"> juste avant l'image */
			/* cf. image10-Allumette, image24-fusillade, image25-Remord, image26-Souricière */
			/* 2. Rotation (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */

.incline img {-webkit-transition:all 3s ease;}  /* durée */
.incline:hover img {-webkit-transform:rotate(-15deg); transform:rotate(-15deg);} /* degré d'inclinaison */


			/* SITE - IMAGE EFFET OPACITE DE L'IMAGE */
			/* <P ou DIV CLASS="opacite"> juste avant l'image */
			/* cf. image28-Mutilée */
			/* 11. Opacité (https://www.web-eau.net/blog/15-effets-css3-pour-vos-images) */
			/* - Une valeur de 1 n'effecte pas l'image
			   - Une valeur supérieure l'assombrira (1.3, par exemple)
			   - et une valeur inférieur va l'éclaircir (.5, par exemple) */

.opacite img {opacity:1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.opacite:hover img {opacity: .05;}


			/* SITE - IMAGE EFFET BRANLE VERTICAL DE L'IMAGE */
			/* CLASS="image brvertic" après image;gif" */
			/* cf. image09-Accident */
			/* Wobble Vertical (https://ianlunn.github.io/Hover/) */
			
@-webkit-keyframes brvertic {
  16.65% {-webkit-transform: translateY(8px); transform: translateY(8px);}
  33.3% {-webkit-transform: translateY(-6px); transform: translateY(-6px);}
  49.95% {-webkit-transform: translateY(4px); transform: translateY(4px);}
  66.6% {-webkit-transform: translateY(-2px); transform: translateY(-2px);}
  83.25% {-webkit-transform: translateY(1px); transform: translateY(1px);}
  100% {-webkit-transform: translateY(0); transform: translateY(0);}}
@keyframes hvr-wobble-vertical {
  16.65% {-webkit-transform: translateY(8px); transform: translateY(8px);}
  33.3% {-webkit-transform: translateY(-6px); transform: translateY(-6px);}
  49.95% {-webkit-transform: translateY(4px); transform: translateY(4px);}
  66.6% {-webkit-transform: translateY(-2px); transform: translateY(-2px);}
  83.25% {-webkit-transform: translateY(1px); transform: translateY(1px);}
  100% {-webkit-transform: translateY(0); transform: translateY(0);}}
.brvertic {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0);}
.brvertic:hover, .brvertic:focus, .brvertic:active {-webkit-animation-name:brvertic; animation-name:brvertic; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function:
ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}/* REGLAGES CI-DESSUS  */


			/* SITE - IMAGE EFFET BRANLE OBLIQUE DE L'IMAGE DU HAUT DROITE AU BAS GAUCHE */
			/* CLASS="image brobhtdr" après image;gif" */
			/* cf. image01-Seringue */
			/* Wobble To Top Right (https://ianlunn.github.io/Hover/) */
			
@-webkit-keyframes brobhtdr {
  16.65% {-webkit-transform: translate(8px, -8px); transform: translate(8px, -8px);}
  33.3% {-webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px);}
  49.95% {-webkit-transform: translate(4px, -4px); transform: translate(4px, -4px);}
  66.6% {-webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px);}
  83.25% {-webkit-transform: translate(1px, -1px); transform: translate(1px, -1px);}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}}
@keyframes brobhtdr {
  16.65% {-webkit-transform: translate(8px, -8px); transform: translate(8px, -8px);}
  33.3% {-webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px);}
  49.95% {-webkit-transform: translate(4px, -4px); transform: translate(4px, -4px);}
  66.6% {-webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px);}
  83.25% {-webkit-transform: translate(1px, -1px); transform: translate(1px, -1px);}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}}
.brobhtdr {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0
1px rgba(0, 0, 0, 0);}
.brobhtdr:hover, .brobhtdr:focus, .brobhtdr:active {-webkit-animation-name: brobhtdr; animation-name: brobhtdr; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function:
ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 2; animation-iteration-count: 2;}/* REGLAGES CI-DESSUS  */


			/* SITE - IMAGE EFFET BALANCE DE L'IMAGE */
			/* CLASS="image balance" après image;gif" */
			/* cf. image02-Balance */
			/* Buzz Out (https://ianlunn.github.io/Hover/) */
			
@-webkit-keyframes balance {
  10% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  20% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  30% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  40% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  50% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  60% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  70% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  80% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  90% {-webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0);}
  100% {-webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0);}}
@keyframes balance {
  10% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  20% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  30% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  40% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  50% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  60% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  70% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  80% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  90% {-webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0);}
  100% {-webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0);}}
.balance {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0);}
.balance:hover,
.balance:focus,
.balance:active {-webkit-animation-name:balance; animation-name:balance; -webkit-animation-duration: 7.5s; animation-duration: 7.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;} /* REGLAGES CI-DESSUS  */


			/* SITE - IMAGE EFFET BALANCE RAPIDE DE L'IMAGE */
			/* CLASS="image balance" après image;gif" */
			/* cf. image04-Nicotiana, peril04-Courbe cardiogramme */
			/* Buzz Out (https://ianlunn.github.io/Hover/) */
			
@-webkit-keyframes balancvi {
  10% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  15% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  20% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  25% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  30% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  35% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  40% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  45% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  50% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  55% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  60% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  65% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  70% {-webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0);}
  80% {-webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0);}
  85% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  90% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  95% {-webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0);}
  100% {-webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0);}}
@keyframes balancvi {
  10% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  15% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  20% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  25% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  30% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  35% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  40% {-webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg);}
  45% {-webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg);}
  50% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  55% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  60% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  65% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  70% {-webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0);}
  80% {-webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0);}
  85% {-webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg);}
  90% {-webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg);}
  95% {-webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0);}
  100% {-webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0);}}
.balancvi {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0);}
.balancvi:hover,
.balancvi:focus,           
.balancvi:active {-webkit-animation-name:balancvi; animation-name:balancvi; -webkit-animation-duration: 1.75s; animation-duration: 1.75s;-webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;} /* BALANCE PLUS RAPIDE QUE LA BALANCE  */


			/* SITE - IMAGE EFFET RECUL-AVANCE DE L'IMAGE */
			/* CLASS="image reculava" après image;gif" */
			/* cf. image03-Lapins, image23-Poumons, image31-Poubelle */
			/* Pulse Shrink (https://ianlunn.github.io/Hover/) */

@-webkit-keyframes reculava {to {webkit-transform: scale(0.01); transform: scale(0.01);}}
@keyframes reculava {to {-webkit-transform: scale(0.01); transform: scale(0.01);}}
.reculava {display:inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0
1px rgba(0, 0, 0, 0);}
.reculava:hover, .reculava:focus, .reculava:active {-webkit-animation-name: reculava; animation-name: reculava; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-direction:alternate; animation-direction: alternate;}  /* REGLAGES CI-DESSUS  */  /* 1 remplace infinite dans animation-iteration-count */


			/* SITE - IMAGE EFFET COIN HAUT GAUCHE ECORNE */
			/* <P ou DIV CLASS="cornehg"> avant <IMG SRC="... */
			/* BLEU#C1DDFF(RGB(193,221,255) - 8FABCD - 5D799B - 2B4769  */
			/* cf. image11-Affiche */
			/* Curl Top Left (https://ianlunn.github.io/Hover/) */

.cornehg {display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0); position:relative;}
.cornehg:before {pointer-events:none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: white;
  /* IE9 */ background: linear-gradient(135deg, #E4EFFF 45%, #aaa 50%, #ccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient
  (GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s;  transition-duration: 0.3s; -webkit-transition-property:
  width, height; transition-property: width, height;}
.cornehg:hover:before, .cornehg:focus:before, .cornehg:active:before {width:25%; height:25%;}


			/* SITE - IMAGE EFFET AVANCE-RECUL DE L'IMAGE */
			/* CLASS="(image) avanrecu" après ...image.gif" */
			/* cf. image15-Tasse */
			/* Pop (https://ianlunn.github.io/Hover/) */

@-webkit-keyframes avanrecu {50% {-webkit-transform:scale(1.1); transform:scale(1.1);}}
@keyframes avanrecu {50% {-webkit-transform:scale(1.1); transform:scale(1.1);}}
.avanrecu {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.avanrecu:hover, .avanrecu:focus, .avanrecu:active {-webkit-animation-name: avanrecu; animation-name:avanrecu; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-
function:linear; animation-timing-function:linear; -webkit-animation-iteration-count: 2; animation-iteration-count: 2;}


			/* SITE - IMAGE EFFET OMBRE SOUS IMAGE SOULEVEE */
			/* <P ou DIV CLASS="ombrsous"> avant <IMG SRC="... */
			/* cf. image19-Cils */
			/* Float Shadow (https://ianlunn.github.io/Hover/) */

.ombrsous {display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position:relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property:transform;}
.ombrsous:before {pointer-events:none; position:absolute; z-index: -1; content: ''; top:100%; left:5%; height:10px; width:90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) /*réglage de l'ombre*/ 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity;}
.ombrsous:hover, .ombrsous:focus, .ombrsous:active {-webkit-transform: translateY(-5px); transform: translateY(-5px);  /* move the element up by 5px */}
.ombrsous:hover:before, .ombrsous:focus:before, .ombrsous:active:before {opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's
attached to the element that also moves up 5px) */}


			/* SITE - IMAGE EFFET ENCADREMENT IMAGE QUI S'ECARTE */
			/* <P ou DIV CLASS="cadrloin"> avant <IMG SRC="... */
			/* cf. image19-Cils */
			/* Outline Out (https://ianlunn.github.io/Hover/ */

.cadrloin {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0); position:relative;}
.cadrloin:before {content: ''; position:absolute; border:#000000 solid 4px; top:0; right:0; bottom:0; left:0; -webkit-transition-duration: 0.3s; transition-duration: 0.
3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left;}
.cadrloin:hover:before, .cadrloin:focus:before, .cadrloin:active:before {top:-8px; right:-8px; bottom:-8px; left:-8px;}


			/* SITE - IMAGE EFFET IMAGE QUI SE DEPLACE A DROITE ou A GAUCHE SANS POINT DE DEPART MAIS AVEC POINT D'ARRIVEE */
			/* Le point de départ est là où est l'image dans le html */
			/* <P ou DIV CLASS="bougeg"> juste avant l'image */
			/* cf. image05-Vauquelin, image10-L'allumette, image35-Hécatombe */
			/* Forward (https://ianlunn.github.io/Hover/) */

.bougeg {display:inline-block;  vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0); -webkit-transition-duration: 3.3s; transition-duration: 3.3s; -webkit-transition-property: transform; transition-property: transform;}
.bougeg:hover, .bougeg:focus, .bougeg:active {-webkit-transform: translateX(-150px); transform: translateX(-150px);}    /* FAIRE REGLAGE NEGATIF ou POSITIF */


			/* SITE - IMAGE EFFET QUI POINTE EN BAS - effet bulle BD */
			/* <P ou DIV CLASS="pointeb"> juste avant l'image */
			/* cf. image13-Allaitement */
			/* Bubble Bottom (https://ianlunn.github.io/Hover/) */

.pointeb {display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0); position:relative;}
.pointeb:before {pointer-events:none; position:absolute; z-index: -1; content: ''; border-style:solid; -webkit-transition-duration: 1.3s; transition-duration: 1.3s;
  -webkit-transition-property:transform; transition-property:transform; left:calc(50% - 100px); bottom: 0; border-width: 100px 100px 0 100px; /* taille du triangle */
  border-color: #F06292 transparent transparent transparent;}
.pointeb:hover:before, .pointeb:focus:before, .pointeb:active:before {-webkit-transform:translateY(20px); transform:translateY(20px);} /* décalage du triangle vers le bas */


			/* SITE - IMAGE EFFET CERCLAGE DE L'IMAGE */
			/* <P ou DIV CLASS="focale"> juste avant l'image */
			/* cf. image29-Amputée  */
			/* 20. Focus Effect (https://www.sanwebcorner.com/2017/12/20-simple-css-hover-effect-using-pure.html) */
			
.focale {-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
.focale:hover {border: 7px double #1B5E20; border-radius: 50%; overflow:hidden;}


			/* SITE - IMAGE EFFET LIGNE A GAUCHE DE L'IMAGE A PARTIR DU CENTRE */
			/* <P ou DIV CLASS="traitgc"> juste avant l'image */
			/* (cf. ) pas encore utilisé - machicouli perso à partir de Underline From Center (https://ianlunn.github.io/Hover/ */
			
.traitgc {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateY(0);
  transform: perspective(1px) translateY(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.traitgc:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 51%;
  bottom: 51%;
  background: #000000;
  width: 4px;
  -webkit-transition-property: top, bottom;
  transition-property: top, bottom;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; 
}
.traitgc:hover:before, .traitgc:focus:before, .traitgc:active:before {
  top: 0;
  bottom: 0;
}


			/* SITE - IMAGE EFFET SE DETACHE DU FOND */
			/* <P ou DIV CLASS="levefond"> juste avant l'image */
			/* cf. image17-Ventes */
			/* Glow (https://ianlunn.github.io/Hover/) */


.levefond {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.7s; transition-duration: 0.7s; -webkit-transition-property: box-shadow; transition-property: box-shadow;}
.levefond:hover, .levefond:focus, .levefond:active {box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);}


			/* SITE - IMAGE EFFET LIGNE AU-DESSUS DE L'IMAGE DE GAUCHE A DROITE */
			/* <P ou DIV CLASS="traithgd"> juste avant l'image */
			/* cf. image18-Cancers */
			/* Overline From Left (https://ianlunn.github.io/Hover/) */

.traithgd {
  display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);  box-shadow: 0 0 1px rgba(0, 0, 0, 0); position:relative; overflow:hidden; padding-top:30px; margin-top:20px; /* distance du trait */}
.traithgd:before {content: ""; position: absolute; z-index: -1; left: 0; right: 100%; top: 0; background: #FFFFCC; /* couleur du trait */ height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 2.3s; transition-duration: 2.3s; /* vitesse du trait */ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.traithgd:hover:before, .traithgd:focus:before, .traithgd:active:before {right: 0;}


			/* SITE - IMAGE EFFET LIGNE AU-DESSOUS DE L'IMAGE DE DROITE A GAUCHE */
			/* <P ou DIV CLASS="traitbdg"> juste avant l'image */
			/* cf. image18-Cancers */
			/* Underline From Right (https://ianlunn.github.io/Hover/) */

.traitbdg {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; padding-bottom:10px; /* distance du trait */}
.traitbdg:before {content: ""; position: absolute; z-index: -1; left: 100%; right: 0; bottom: 0; background: #FF8F00; /* couleur du trait */ height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 2.3s; transition-duration: 2.3s; /* vitesse du trait */ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.traitbdg:hover:before, .traitbdg:focus:before, .traitbdg:active:before {left: 0;}


			/* SITE - IMAGE EFFET PULSATION BICOLORE DE L'IMAGE */
			/* <P ou DIV CLASS="pulse"> juste avant l'image */ 
			/* cf. image23-Poumons */
			/* Back Pulse (https://ianlunn.github.io/Hover/) */

@-webkit-keyframes pulse {50% {background-color: rgba(32, 152, 209, 0.75);}}
@keyframes pulse {50% {background-color: rgba(32, 152, 209, 0.75);}}
.pulse {display:inline-block;  vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow:hidden; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-property: color, background-color; transition-property: color, background-color;}
.pulse:hover, .pulse:focus, .pulse:active {-webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-timing-function:linear; animation-timing-function:linear; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; background-color:#c1ddff; background-color:#b71c1c; color:white;border-radius:3%; padding:10px;}


			/* SITE - IMAGE EFFET FOND QUI S'ETIRE ET REBONDIT VERS LA DROITE DE L'IMAGE */
			/* <P ou DIV CLASS="etired"> juste avant l'image */
			/* cf. image27-Gangrène */
			/* Bounce To Right (https://ianlunn.github.io/Hover/) */	

.etired {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
.etired:before {content: ""; position:absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #8FABCD; /* couleur du bandeau */ -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform;  transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border-radius:3%;}
.etired:hover, .etired:focus, .etired:active {color: white;}
.etired:hover:before, .etired:focus:before, .etired:active:before {-webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}


			/* SITE - IMAGE EFFET VOLET QUI S'ETIRE VERS LE BAS DE L'IMAGE */
			/* <P ou DIV CLASS="voletb"> juste avant l'image */
			/* cf. image33-1=20, image34-1=10  */
			/* Sweep To Bottom (https://ianlunn.github.io/Hover/) */

.voletb {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 2.3s; transition-duration: 2.3s; padding:10px;}
.voletb:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #FFFFFF; /* couleur du volet */ -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 2.3s; transition-duration: 2.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border-radius:1%; border-bottom: double 5px #2B4769;}
.voletb:hover, .voletb:focus, .voletb:active {color: white;}
.voletb:hover:before, .voletb:focus:before, .voletb:active:before {-webkit-transform: scaleY(1); transform: scaleY(1);}


			/* SITE - IMAGE EFFET QUI S'INCLINE A GAUCHE */
			/* <P ou DIV CLASS="inclineg"> juste avant l'image */
			/* cf. image30-3615 Sex  */
			/* Skew Backward (https://ianlunn.github.io/Hover/) */		

.inclineg {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px)  translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%;}
.inclineg:hover, .inclineg:focus, .inclineg:active {-webkit-transform: skew(10deg); transform: skew(10deg);}	


			/* SITE - IMAGE EFFET QUI S'INCLINE A DROITE ET A GAUCHE */
			/* <P ou DIV CLASS="inclinedg"> juste avant l'image */
			/* cf. image34-1=10 */
			/* Wobble Top (https://ianlunn.github.io/Hover/) */
			
@-webkit-keyframes inclindg {
  16.65% {-webkit-transform: skew(-12deg); transform: skew(-12deg);}
  33.3% {-webkit-transform: skew(10deg); transform: skew(10deg);}
  49.95% {-webkit-transform: skew(-6deg); transform: skew(-6deg);}
  66.6% {-webkit-transform: skew(4deg); transform: skew(4deg);}
  83.25% {-webkit-transform: skew(-2deg); transform: skew(-2deg);}
  100% {-webkit-transform: skew(0); transform: skew(0);}}
@keyframes inclindg {
  16.65% {-webkit-transform: skew(-12deg); transform: skew(-12deg);}
  33.3% {-webkit-transform: skew(10deg); transform: skew(10deg);}
  49.95% {-webkit-transform: skew(-6deg); transform: skew(-6deg);}
  66.6% {-webkit-transform: skew(4deg); transform: skew(4deg);}
  83.25% {-webkit-transform: skew(-2deg); transform: skew(-2deg);}
  100% {-webkit-transform: skew(0); transform: skew(0);}}
.inclindg {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);  box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 0 100%; transform-origin: 0 100%;}
.inclindg:hover, .inclindg:focus, .inclindg:active {-webkit-animation-name: inclindg; animation-name: inclindg; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}


			/* SITE - IMAGE EFFET GROSSISSEMENT ET PIVOT A GAUCHE */
			/* <P ou DIV CLASS="grospivg"> juste avant l'image */
			/* cf. image35-Hécatombe */
			/* Grow Rotate (https://ianlunn.github.io/Hover/) */	

.grospivg {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 2.3s; transition-duration: 2.3s; -webkit-transition-property: transform; transition-property: transform;}
.grospivg:hover, .grospivg:focus, .grospivg:active {-webkit-transform: scale(1.2) rotate(-45deg); transform: scale(1.2) rotate(-45deg);} /* zoom et pivotement */


			/* SITE - IMAGE EFFET GROSSISSEMENT ET OMBRE */
			/* <P ou DIV CLASS="grosombr"> juste avant l'image */
			/* cf. image35-Hécatombe */
			/* Grow Shadow (https://ianlunn.github.io/Hover/) */

.grosombr {
  display: inline-block; width:100%; /* pour étalage des croix */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 5s;
  transition-duration: 5s; /*durée */
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.grosombr:hover, .grosombr:focus, .grosombr:active {
  box-shadow: 0px -170px 10px 250px rgba(0, 0, 0, 1); /* x, y, flou, étendue, couleur rgba(1=noir complet, sinon 0.5 par exemple) */
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}		


			/* SITE - IMAGE EFFET OMBRE ARRIVANT */
			/* <P ou DIV CLASS="ombvient"> juste avant l'image */
			/* non utilisé */	
			/* Box Shadow Outset (https://ianlunn.github.io/Hover/) */

.ombvient {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property:box-shadow; transition-property:box-shadow;}
.ombvient:hover, .ombvient:focus, .ombvient:active {box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);}


			/* SITE - IMAGE EFFET OMBRE ARRIVANT DEDANS */
			/* <P ou DIV CLASS="ombentre"> juste avant l'image */
			/* cf. image08-Skieuse-maison */
			/* Box Shadow Inset (https://ianlunn.github.io/Hover/) */

.ombentre {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 3s; transition-duration: 3s;  -webkit-transition-property: box-shadow; transition-property: box-shadow; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); border-radius: 50%;} /* Hack to improve aliasing on mobile/tablet devices */
.ombentre:hover, .ombentre:focus, .ombentre:active {box-shadow: inset 80px 150px 30px rgba(0, 51, 102, 0.8), /* intérieur, gauche, haut, diffusion, couleur */  0 0 1px rgba(0, 0, 0, 0); border-radius: 50%;}/* Hack to improve aliasing on mobile/tablet devices */


			/* SITE - IMAGE EFFET OSCILLATION DISTORDANTE */
			/* <P ou DIV CLASS="oscille"> juste avant l'image ou CLASS="(image) oscille" après ...image.gif" */
			/* cf. section Arrêter de fumer */
			/* Wobble Skew (https://ianlunn.github.io/Hover/) */

@-webkit-keyframes oscille {
  16.65% {-webkit-transform: skew(-12deg); transform: skew(-12deg);}
  33.3% {-webkit-transform: skew(10deg); transform: skew(10deg);}
  49.95% {-webkit-transform: skew(-6deg); transform: skew(-6deg);}
  66.6% {-webkit-transform: skew(4deg); transform: skew(4deg);}
  83.25% {-webkit-transform: skew(-2deg); transform: skew(-2deg);}
  100% {-webkit-transform: skew(0); transform: skew(0);}}
@keyframes oscille {
  16.65% {-webkit-transform: skew(-12deg); transform: skew(-12deg);}
  33.3% {-webkit-transform: skew(10deg); transform: skew(10deg);}
  49.95% {-webkit-transform: skew(-6deg); transform: skew(-6deg);}
  66.6% {-webkit-transform: skew(4deg); transform: skew(4deg);}
  83.25% {-webkit-transform: skew(-2deg); transform: skew(-2deg);}
  100% {-webkit-transform: skew(0); transform: skew(0);}}
.oscille {display:inline-block; vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.oscille:hover, .oscille:focus, .oscille:active {-webkit-animation-name: oscille; animation-name: oscille; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}


			/* SITE - IMAGE EN MOUVEMENT ALLER RETOUR HORIZONTAL AVEC POINT DE DEPART ET POINT D'ARRIVEE */
			/* <P ou DIV CLASS="bougeh"> juste avant l'image ou CLASS="bougeh" après ...image.gif" */
			/* cf. adage.html, image.html, peril.html */
@-webkit-keyframes webkit-mouvement-allerretour {
0% 		{-webkit-animation-timing-function: linear; -webkit-transform: translateX(-500px);}
50% 	{-webkit-animation-timing-function:linear; -webkit-transform: translateX(600px);}
100% 	{-webkit-animation-timing-function: linear; -webkit-transform: translateX(-1000px);}}
@keyframes mouvement-allerretour {
0% 		{animation-timing-function:linear; transform: translateX(-500px);}
50% 	{animation-timing-function:linear; transform: translateX(600px);}
100% 	{animation-timing-function:linear; transform: translateX(-1000px);}}
.bougeh {animation: mouvement-allerretour 20s infinite; -webkit-animation: webkit-mouvement-allerretour 20s infinite;
position:fixed; z-index:0;}


			/* SITE - IMAGE EFFET IMAGE QUI SE DEPLACE A DROITE ou A GAUCHE AVEC POINT DE DEPART ET POINT D'ARRIVEE */
			/* <P ou DIV CLASS="bougeg"> juste avant l'image */
			/* cf. nuages de la section DANGERS DU TABAC */
			/* Forward (https://ianlunn.github.io/Hover/) */

@-webkit-keyframes webkit-mouvement-uniforme {
0% 		{-webkit-animation-timing-function: linear; -webkit-transform: translateX(-200px);}
100% 	{-webkit-animation-timing-function: linear; -webkit-transform: translateX(1500px);}}
@keyframes mouvement-uniforme {
0% 		{animation-timing-function:linear; transform: translateX(-200px);}
100% 	{animation-timing-function:linear; transform: translateX(-1500px);}}
.defiled {animation: mouvement-uniforme 150s infinite; -webkit-animation: webkit-mouvement-uniforme 150s infinite;
position:fixed; top:-10px; z-index:-1;}

	
/*--------------------------------IMAGES REGLAGES-----------*/


			/* SITE - IMAGE FLOAT - IMAGE FLOTTANTE A GAUCHE OU A DROITE DU TEXTE */
			/* (On peut mettre aussi du texte sur 2 ou 3 colonnes avec Float) */
			/* Mettre <P> et </P> avant et après ou <DIV></DIV>  */
			/* ajouter CLASS="imagmarg" dans l'image */
			/* A la fin du bloc paragraphe concerné clôturer le système avec <DIV STYLE="clear:both"></DIV> */
			
.flotgauc {float:left;}
.flotdroi {float:right;}


			/* SITE - IMAGE RONDE VALABLE POUR LES IMAGES CARREES, SINON OVALE */
			/* ajouter : CLASS="imagmarg imagrond" juste après xxxxx.gif */
.imagrond {border-radius: 50%;}

			/* SITE - MARGES DES IMAGES */
			/* ne pas mettre de pourcentage, ça ne marche pas, contrairement à padding */
.imagmarg {margin-top:20px; margin-right:20px; margin-bottom:20px; margin-left:20px;}


			/* IMAGES RESPONSIVES */
.image {max-height:450px; width:auto; max-width:100%;}


			/* SITE - OMBRE SUR IMAGE */
			/* non utilisé */
			/* ombre à droite, bas, flou, couleur */
.ombre {box-shadow: 00px 25px 20px #000000;}


			/*   BALISE <IMG> OU FEUILLE DE STYLE CSS ? */
			
			/*  À partir du moment où l'image est informative et fait partie intégrante du contenu :
			(une photo, un bouton d'action, un logo), ou lorsqu'elle a un rôle fonctionnel (image lien),
			il faut que cette information puisse être véhiculée même si les styles CSS sont désactivés ou sur les navigateurs non graphiques.
			Il faut donc faire apparaitre l'image dans la structure HTML à l'aide de la balise <img> dûment renseignée avec l'attribut "alt" correspondant,
			pour en donner un équivalent textuel. Ceci est particulièrement important quand une image est le seul contenu d'un élément lien <a> : elle ne
			doit alors en aucun cas être gérée en tant qu'image d'arrière-plan CSS.
			<img src="image.jpg" alt="Alternative texte de l'image" />                */
			/*   Si l'image est décorative, il peut s'agir d'illustration de fond, de bordures, d'arrondis, de puces.
			On peut utiliser <img> avec un alt vide <img src="fond.jpg" alt="" />, mais,
			pour améliorer la séparation structure/présentation, cette image décorative gagne à être gérée à l'aide de la propriété CSS background, en tant
			qu'image d'arrière-plan CSS, dans une feuille de style externe, de la manière suivante.           */

			/* EN REALITE, passer par un affichage d'image en fond de bloc est un bricolage absurde, avec toutes les difficultés que cela représente. (faut-
			il utiliser un flexbox pour aligner trois misérables billes minuscules ?) En fait le CSS n'a pas prévu l'insertion d'image.
			MIEUX vaut ne réserver cela QUE pour les images qui se répètent partout et susceptibles d'être changées, genre logo.    */


			/* LOGO HAUT DE PAGE DU SITE EN FORME D'OISEAU */
			/* les logos du menu sont avec le code du menu, au début   */
			
#logosite {background-image: url('images/oiseau.gif'); background-repeat:no-repeat; background-position:center; width:100%; height:59px;}


/*-----------------------FIN DE SITE IMAGES DESSINS PHOTOS ILLUSTRATIONS------------------*/


/*-------------------------------------------------DEBUT SITE---------------------------------------*/


			          /* SITE - LA PAGE EN GENERAL : MARGES, COULEUR ET IMAGE DE FOND*/
		              /* ôté : background-image:url(images/fondpage.gif);  */
			          /* Suggestions BLEU#C1DDFF(RGB(193,221,255) - 8FABCD - 5D799B - 2B4769 */
			          /* BEIGE#BCAAA4    */
					  
					  
					  /* MARGES FONDS ET CESURE AUTOMATIQUE DANS TOUT LE SITE */
body {margin-top:1px; margin-bottom:0px; margin-left:1%; margin-right:1%; background:linear-gradient(120deg, #FFEB3B, #C1DDFF 10%);
	word-break: break-word; /* solution de contournement de cesure pour Chrome */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
 -o-hyphens: auto;
  hyphens: auto;}	

					  /* MARGES PAS TROP GRANDES A TOUTES LARGEURS dans TOUT LE SITE */
@media screen and (min-width:700px)	and (max-width:800px)
	{body {margin-left:5%; margin-right:5%;}}
@media screen and (min-width:800px)	and (max-width:900px)
	{body {margin-left:10%; margin-right:10%;}}
@media screen and (min-width:900px)	and (max-width:1000px)
	{body {margin-left:15%; margin-right:15%;}}
@media screen and (min-width:1000px)
	{body {margin-left:20%; margin-right:20%;}}  
  
					/* POUR ARRETER UNE CESURE AUTOMATIQUE A LA DEMANDE */
.nocesure {word-break: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;}

					/* POUR FAIRE UNE CESURE AUTOMATIQUE A LA DEMANDE */
.cesure {word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;}
  
					/* POUR ARRETER LA CESURE AUTOMATIQUE SUR TRES PETITS ECRANS */  
@media screen and (min-width:1px)	and (max-width:200px) /* CESURE QUI COMMENCE SEULEMENT A 201PX D'ECRAN */
	{.ces200 {word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;}}
	
@media screen and (min-width:1px)	and (max-width:250px) /* CESURE QUI COMMENCE SEULEMENT A 251PX D'ECRAN */
	{.ces250 {word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;}}
	
@media screen and (min-width:1px)	and (max-width:300px) /* CESURE QUI COMMENCE SEULEMENT A 351PX D'ECRAN */
	{.ces300 {word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;}}
	
@media screen and (min-width:1px)	and (max-width:350px) /* CESURE QUI COMMENCE SEULEMENT A 351PX D'ECRAN */
	{.ces350 {word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;}}
	
@media screen and (min-width:1px)	and (max-width:400px) /* CESURE QUI COMMENCE SEULEMENT A 351PX D'ECRAN */
	{.ces400 {word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;}}
	
@media screen and (min-width:1px)	and (max-width:500px) /* CESURE QUI COMMENCE SEULEMENT A 501PX D'ECRAN */
	{.ces500 {word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;}}
	
@media screen and (min-width:1px)	and (max-width:650px) /* CESURE QUI COMMENCE SEULEMENT A 651PX D'ECRAN */
	{.ces650 {word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;}}	
	

			/* SITE - CESURE : &shy; POUR SUGGERER L'ENDROIT OU FAIRE LA CESURE LE CAS ECHEANT */
			/* &shy; exemple : exem&shy;ple */
			
			
			/* SITE - DES PETITS TRIANGLE DROITE BAS GAUCHE ET HAUT DEVANT UN TEXTE  */
.triangle {border: solid #00CCCC; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}
.adroite {transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.agauche {transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.enhaut {transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
.enbas {transform: rotate(45deg); -webkit-transform: rotate(45deg);}

/*.arrow {border: solid #00CCCC; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}
.right {transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.left {transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.up {transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
.down {transform: rotate(45deg); -webkit-transform: rotate(45deg);}*/


			/* SITE - LETTRINES N&B- COMMENCER PAR : <P id="lettrinb"> pour un paragraphe */
#lettrinb:first-letter {border:1.5px inset #455A64; font-family:Times New Roman, Times, serif; font-size:30px; color:#455A64; padding:0px 6px 0px 6px; margin-right:5px; float:left; text-shadow:#78909C 2px 2px;
background: linear-gradient(135deg, #78909C 0 , #FFFFFF 60% 100%); opacity:1;}

			/* SITE - LETTRINES COULEURS- COMMENCER PAR : <P id="lettrine"> pour un paragraphe */
#lettrine:first-letter {border:1.5px inset #E65100; font-family:Times New Roman, Times, serif; font-size:30px; color:#FFC107; padding:0px 6px 0px 6px; margin-right:5px; float:left; text-shadow:#BF360C 2px 2px;
background: linear-gradient(135deg, #C5E1A5 0 , #FFFFFF 60% 100%); opacity:1;}


			/* SITE - TITRE DU SITE */
			/* "text-shadow" = ombre à droite, en bas, flou, couleur */
.tsite {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:18px; font-weight:bold; text-align:center; margin-top:0px; margin-bottom:0px; text-shadow: 2px 2px 2px #FFFFFF; text-transform:uppercase; margin-top:10px; margin-bottom:3px; display:inline-block; /* Ce dernier sert à faire coller le div au contenu */}

			/* SITE - TITRE TOBACOSTOP */
.ttobaco {font-family:Times New Roman, Times, serif; color:#7986CB; font-size:18px; font-weight:bold; text-align:center; text-transform:uppercase; margin-bottom:5px;  display:inline-block; /* Ce dernier sert à faire coller le div au contenu */}

			/* SITE - TITRE DE LA SECTION */
.tsection {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:16px; font-weight:bold; text-align:center; margin-top:0px; margin-bottom:0px; text-transform:uppercase; font-style:normal; border:1px solid #7986CB; border-radius:3px; padding: 0px 7px 0px 6px; /* H, D, B, G */ margin-bottom:5px; display:inline-block; /* Ce dernier sert à faire coller le div au contenu */}

			/* SITE - TITRE DE LA PAGE */
.tpage {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:16px; font-weight:bold; text-align:center; margin-bottom:0px; display:inline-block; /* Ce dernier sert à faire coller le div au contenu */}

			
			/* SITE - COULEURS GENERIQUES DES LIENS DANS LE SITE */
a:link {color:#0000FF; text-decoration:none;}
a:visited {color:#0000FF; text-decoration:none;}
a:hover {color:#FF0000; text-decoration:none;}
a:active {color:#00FF00; text-decoration:none;}

			/* SITE - COULEURS DES LIENS DES QUIZ DANS LE SITE */
a:link.quiz {color:#00CCCC;}
a:visited.quiz {color:#00CCCC;}
a:hover.quiz {color:#00CCCC;}
a:active.quiz {color:#00CCCC;}


			/* SITE - DATE DU JOUR (inutilisé pour le moment) */
.fontdate {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:20px; font-style: italic;}


			/* SITE - POLICE TELETYPE - effet d'une machine à écrire - (<TT> est devenu obsolète en HTML5) */
.tt	{font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size:8px;}

			/* SITE - RETRAIT GAUCHE DE PARAGRAPHE (<BLOCKQUOTE> est réservé aux citations) */
.retrait {margin-left:5%;}


/*------QUIZ------*/


			/* DANGERS - PROGRAMME LIRE PLUS - LIRE MOINS DE "DANGERS 11-LES COMPOSANTS"  */
			/* https://stackoverflow.com/questions/31968211/how-to-implement-read-more-read-less-in-pure-css*/
			/* Le contenu de content:""; doit être encodé en ENCODAGE CSS */ 
			/* ENCODAGE CSS : https://outils-javascript.aliasdmc.fr/encodage-caracteres-accentues/encode-caractere-00E9-html-css-js-autre.html */
			
			/* Prog. Lire+ Lire- CORRECTEMENT ENCODE en CSS pour DANGER 11 (TOUS LES PETITS PLUS) */
.bittt {display:none;} 
.biggg {opacity:0; max-height:0; font-size:0; transition:1s ease 0s;} 
.bittt:checked ~ .biwww .biggg {opacity:1; font-size:inherit; max-height:999em;} 
.bittt ~ .birrr:before {content:'\00002B'; color:#0000FF; font-size:13px; font-weight: normal;}  
.bittt:checked ~ .birrr:before {content:'\002212'; color:#0000FF; font-size:13px; font-weight: normal;}  
.birrr {cursor:pointer; display:inline-block; padding-top:0px; padding-right:5px; padding-bottom:0px; padding-left:4px; color:#666; font-size:inherit; line-height:1; border-color:#999999; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-radius:20%; box-shadow: 0px 1px 4px #aaa; background: #FFFFFF;}

			/* Prog. Lire+ Lire- CORRECTEMENT ENCODE en CSS */
			/* pour DANGERS : 2, 5, 10, 13, 20, 22 */
			/* pour ARRETER : édito, 01a, 01b, 03a, 03b, 04b, Excuses, 07a, 07b, 08b, 09a, 09b */
.reptt {display:none;} 
.repgg {opacity:0; max-height:0; font-size:0; transition:1s ease 0s;} 
.reptt:checked ~ .repww .repgg {opacity:1; font-size:16px; max-height:999em;} 
.reptt ~ .reprr:before {content:'\0025B6\0000A0R\0000E9ponse'; color:#00CCCC; font-size:16px; font-weight: normal;} 
.reptt:checked ~ .reprr:before {content:'\0025BC\0000A0R\0000E9ponse'; color:#00CCCC; font-size:16px; font-weight: normal;} 
.reprr {cursor:pointer; display:inline-block; padding-top:0px; padding-right:5px; padding-bottom:0px; padding-left:3px; color:#666; font-size:inherit; line-height:1;}

			/* DANGERS - PROGRAMME LIRE PLUS-LIRE MOINS ORIGINAL - non utilisé en l'état */
			/* https://stackoverflow.com/questions/31968211/how-to-implement-read-more-read-less-in-pure-css */
.read-more-state {display: none;}
.read-more-target {opacity: 0; max-height: 0; font-size: 0; transition: .25s ease;}
.read-more-state:checked ~ .read-more-wrap .read-more-target {opacity: 1; font-size: inherit; max-height: 999em;}
.read-more-state ~ .read-more-trigger:before {content: 'Read more';}
.read-more-state:checked ~ .read-more-trigger:before {content: 'Read less';}
.read-more-trigger {cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 1px solid #ddd;  border-radius: .25em;}


.quiz {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#00CCCC; font-size:16px;}


			/* SITE - QUIZZ GRAND RETRAIT GAUCHE CONDITIONNEL DE PARAGRAPHE (<BLOCKQUOTE> est réservé aux citations) */
@media screen and (min-width:100px) and (max-width:150px){.retrair1 {margin-left:0%;}}
@media screen and (min-width:150px) and (max-width:200px){.retrair1 {margin-left:5%;}}
@media screen and (min-width:200px) and (max-width:250px){.retrair1 {margin-left:10%;}}
@media screen and (min-width:250px) and (max-width:300px){.retrair1 {margin-left:20%;}}
@media screen and (min-width:300px) and (max-width:400px){.retrair1 {margin-left:30%;}}
@media screen and (min-width:400px) and (max-width:500px){.retrair1 {margin-left:40%;}}
@media screen and (min-width:500px) and (max-width:600px){.retrair1 {margin-left:44%;}}
@media screen and (min-width:600px) and (max-width:800px){.retrair1 {margin-left:45%;}}
@media screen and (min-width:800px){.retrair1 {margin-left:45%;}}	

			/* SITE - QUIZZ MOYEN RETRAIT GAUCHE CONDITIONNEL DE PARAGRAPHE (<BLOCKQUOTE> est réservé aux citations) */
@media screen and (min-width:100px) and (max-width:200px){.retrair2 {margin-left:0%;}}
@media screen and (min-width:200px) and (max-width:250px){.retrair2 {margin-left:5%;}}
@media screen and (min-width:250px) and (max-width:300px){.retrair2 {margin-left:15%;}}
@media screen and (min-width:300px) and (max-width:350px){.retrair2 {margin-left:20%;}}
@media screen and (min-width:350px) and (max-width:400px){.retrair2 {margin-left:25%;}}
@media screen and (min-width:400px) and (max-width:500px){.retrair2 {margin-left:30%;}}
@media screen and (min-width:500px) and (max-width:600px){.retrair2 {margin-left:35%;}}
@media screen and (min-width:600px) and (max-width:700px){.retrair2 {margin-left:38%;}}
@media screen and (min-width:700px) and (max-width:800px){.retrair2 {margin-left:39%;}}
@media screen and (min-width:800px){.retrair2 {margin-left:41%;}}	

			/* SITE - QUIZZ PETIT GAUCHE CONDITIONNEL DE PARAGRAPHE (<BLOCKQUOTE> est réservé aux citations) */
@media screen and (min-width:100px) and (max-width:200px){.retrair3 {margin-left:0%;}}
@media screen and (min-width:200px) and (max-width:350px){.retrair3 {margin-left:0%;}}
@media screen and (min-width:350px) and (max-width:400px){.retrair3 {margin-left:5%;}}
@media screen and (min-width:400px) and (max-width:500px){.retrair3 {margin-left:15%;}}
@media screen and (min-width:500px) and (max-width:600px){.retrair3 {margin-left:25%;}}
@media screen and (min-width:600px) and (max-width:700px){.retrair3 {margin-left:28%;}}
@media screen and (min-width:700px) and (max-width:800px){.retrair3 {margin-left:29%;}}
@media screen and (min-width:800px){.retrair3 {margin-left:35%;}}	

			/* SITE - RETRAIT DROIT CONDITIONNEL DE PARAGRAPHE */
@media screen and (min-width:100px) and (max-width:150px){.retraird {margin-right:0%;}}
@media screen and (min-width:150px) and (max-width:200px){.retraird {margin-right:10%;}}
@media screen and (min-width:200px) and (max-width:300px){.retraird {margin-right:20%;}}
@media screen and (min-width:300px) and (max-width:400px){.retraird {margin-right:30%;}}
@media screen and (min-width:400px) and (max-width:500px){.retraird {margin-right:35%;}}
@media screen and (min-width:500px) and (max-width:600px){.retraird {margin-right:38%;}}
@media screen and (min-width:600px) and (max-width:700px){.retraird {margin-right:39%;}}
@media screen and (min-width:700px) and (max-width:800px){.retraird {margin-right:40%;}}
@media screen and (min-width:800px){.retraird {margin-right:41%;}}	


			/* SITE - SOULIGNER UN TEXTE */
.souligne {text-decoration:underline;}

			/* SITE - ENCADRER UN TEXTE */
.encadrer{border:1px solid black; padding:1px;} 

			/* SITE - CENTRER HORIZONTALEMENT OBJETS (oiseau bleu, images, menus déroulants, billes - <P CLASS="alignec">) */
.alignec {text-align:center;}

			/* (SITE - CENTRER HORIZONTALEMENT OBJETS (oiseau bleu, images, menus déroulants, billes) - à remplacer par ci-dessus) */
.aligner {text-align:center;}

			/* SITE - OBJETS HORIZONTALEMENT A GAUCHE (texte, image) */
.aligneg {text-align:left;}

			/* SITE - OBJETS HORIZONTALEMENT A DROITE (texte, image) */
.aligned {text-align:right;}

			/* SITE - CENTRER VERTICALEMENT OBJETS (texte, image) */
.alignev {vertical-align:center}

			/* SITE - FONCTIONNEMENT DE LA FONCTION MASQUER-MONTRER UN TEXTE (OU AUTRE) TRES LONG */
.plus {color:blue; cursor:pointer;}
.plus:hover {color:red; cursor:pointer;}

			/* SITE - LOGO "TABACOSTOP", "text-shadow" = ombre à droite, en bas, flou, couleur */
			/* On peut mettre une seconde ou d'autres ombres, séparées de la première par une virgule+espace */
.logoA {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; text-shadow:3px 2px 2px #0099FF, 0px 0px 15px #33FFFF; text-align:center; margin-
bottom:10px;}

			/*    SITE - LOGO "PARCE QUE NOTRE SANTE LE VAUT BIEN" (va avec fichier logoB.txt) "text-shadow" = ombre à droite, bas, flou, couleur*/
			/*     On peut mettre une seconde ou d'autres ombres, séparées de la première par une virgule+espace     */
.logoB {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:14px; text-shadow:1px 1px 2px #0099FF, 0px 0px 15px #33FFFF; text-align:center;
margin-bottom:0px;}

			/*     (SITE - TITRE DU CHAPITRE EN HAUT   -  "text-shadow" = ombre à droite, bas, flou, couleur)   */
.titrchap {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:16px; font-weight:bold; text-align:center;
margin-top:2rem; margin-bottom:2rem; text-shadow: 0px 0px 20px #FFFFFF;}

			/*     SITE - TITRE DE SECTION, HAUT DE PAGE  -  "text-shadow" = ombre à droite, en bas, flou, couleur */
.titrsect {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:16px; font-weight:bold; text-align:center;
margin-top:2rem; margin-bottom:2rem; text-shadow: 0px 0px 20px #FFFFFF;}


			/*     SITE - LIEN GAUCHE du BLOC DE NAVIGATION HAUT et BAS DE PAGE, c'est-à-fire la flèche gauche    */
a:link.navipagg   { color:#5069AB; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }
a:visited.navipagg  { color:#5069AB; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }
a:hover.navipagg  { color:#FFFFFF; background-color:#000080;  font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }
a:active.navipagg  { color:#OOFFOO; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }
			/*     SITE - MENU DEROULANT DU CHAPITRE    */
.menuchap {  width: 700px; font-family: Arial,sans-serif;  font-size: 30pt; color:#000000; text-align: center; box-shadow: 2px 2px 2px #000000; margin-top: 1rem; margin-
bottom: 1rem;
margin:0px; padding: 0px; border: 0px solid #990000; background-image: url(images/.gif);}
			/*     SITE - LIEN DROIT du BLOC DE NAVIGATION HAUT et BAS DE PAGE, c'est-à-fire la flèche droite*/
a:link.navipagd   { color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }
a:visited.navipagd  { color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }
a:hover.navipagd  { color:#FFFFFF; background-color:#000080;  font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }
a:active.navipagd  { color:#OOFFOO; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:30pt; }

			/* SITE - ESPACE INTERBLOC VERTICAL SOUS MENU DU CHAPITRE HAUT DE PAGE    */
.spacemeh { margin-top: 5rem; }

			/* SITE -  "D'ABORD UN PEU DE THEORIE" et "APRES LA THEORIE LA PRATIQUE"  etc.     */
.fonttheo { font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size: 40px; font-weight: bold; text-align: center; margin-top: 4rem; margin-bottom: 4rem;
}

			/* SITE - BLOC de PARAGRAPHE     */
.blocpara {background-color:#FFFFFF; padding-top:20px; padding-bottom:20px; padding-right:20px; padding-left:20px; text-align: left; width: 100%; margin-left: auto; margin-right: auto;}

			/* SITE - TEXTE du BLOC de PARAGRAPHE    */
.fontpara { font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size: 30px; text-align: left; }

			/* SITE - ITALIQUE (<I> et <EM> servent à renforcer un passage et ne sont donc pas forcément de l'italique) */
			/* <SPAN CLASS="italique"> */
.italique {font-style:italic;}

			/* SITE - GRAS (<B> et <STRONG> servent à renforcer un passage et ne sont donc pas forcément du gras) */
			/* <SPAN CLASS="gras"> */
.gras {font-weight:bold;}
.nongras {font-weight:normal;}

			/* SITE - EXPOSANT km2, COULEUR TEXTE (fonctionne avec SPAN CLASS ou sup class sans lien : <SUP CLASS="sup">1</SUP>) */
.sup {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-weight:none; vertical-align:super; font-size:70%; line-height:0; position:relative; z-index:1;}


			/* SITE - EXPOSANT km2 POUR LIENS, COULEUR LIENS (fonctionne avec SPAN CLASS ou sup class, mais lien dessus ne fonctionne pas) : <SUP CLASS="exposant">1</SUP>) */
.exposant {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#0000FF; font-weight:none; vertical-align:super; font-size:70%; line-height:0; position:relative; z-index:1;}


			/* SITE - INDICE H2O, COULEUR TEXTE (fonctionne avec SPAN CLASS ou sub class sans lien : <SUB CLASS="sub">1</SUB>) */
.sub {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:none; vertical-align:sub; font-size:70%; line-height:0; position:relative; z-index:1;}

			/* SITE - INDICE H2O POUR LIENS, COULEUR LIENS (fonctionne avec SPAN CLASS ou sub class, mais lien dessus ne fonctionne pas) : <SUB CLASS="indice">1</SUB>) */
.indice {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#0000FF; font-weight:none; vertical-align:sub; font-size:70%; line-height:0; position:relative; z-index:1;}

			/* SITE - CLIGNOTEMENT D'UN ELEMENT (fonctionne avec SPAN CLASS ou IMG CLASS) */
.clignote {color:green; animation: clignote 3s linear infinite;}
@keyframes clignote {  
  0%   { opacity:1; }
  20%   {opacity:0; }
  40% { opacity:1; }}

			/* SITE - COULEURS */
.bleu {color:blue;}

  
  			/* SITE - INFO BULLE */
			
			/* http://kazzkiq.github.io/balloon.css/ */
			/* Positionnement infobulle : data-balloon-pos= + up, down, left, right, up-left, up-right, down-left or down-right. */
			/* <SPAN aria-label="je suis écrit dans la bulle" data-balloon-pos="up">Hover me!</SPAN> */
			/* Longueur infobulle : data-balloon-length= + small, medium, large, xlarge or fit.  */
			/* <SPAN data-balloon-length="small" aria-label="Hi." data-balloon-pos="up">I'm a medium tooltip</SPAN> */
			/* Pas d'animation : data-balloon-blunt */
			/* <SPAN data-balloon-blunt aria-label="No animation!" data-balloon-pos="up">No animation!</SPAN>*/
			/* Infobulle toujours visible : data-balloon-visible   */
			/* <SPAN data-balloon-visible aria-label="I am always visible!" data-balloon-pos="up">Always visible!</SPAN> */
			/* Customiser par page : Balloon.css exposes three CSS variables to make it easier to customize tooltips: --balloon-color, --balloon-font-size and --balloon-move. This way you can use custom CSS to make your own tooltip styles: */
			/* Add this to your CSS .tooltip-red {--balloon-color: red;}
									.tooltip-big-text {--balloon-font-size: 20px;}
									.tooltip-slide {--balloon-move: 30px;} */
			/*  <SPAN aria-label="I am red!" class="tooltip-red">I am red!</SPAN>
				<SPAN aria-label="I have big text!" class="tooltip-big-text">I have big text!</SPAN>
				<SPAN aria-label="I move a lot!" class="tooltip-slide">I move a lot!</SPAN> */
			/* Ajout de catactères spécuaux :   */
			/* <SPAN aria-label="HTML special characters: &#9787; &#9986; &#9820;" data-balloon-pos="up">Hover me!</SPAN> */
			/* <SPAN aria-label="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</SPAN> */
			/* <SPAN class="font-awesome" aria-label="Font Awesome: &#xf030; &#xf133; &#xf1fc; &#xf03e; &#xf1f8;" data-balloon-pos="up">Hover me!</SPAN> */
			
.masq {font-size:0;} /* Sert à cacher les espaces insécables nécessaires pour le bon fontionnement des infobulles  */
						/* Ces espaces &nbsp; sont à mettre devant le mot bullé et devant l'exposant "info"   couleur ocre : #9e9d24*/
			
:root {
  --balloon-border-radius: 5px;
  --balloon-color: #CC0033;
  --balloon-text-color: #fff;
  --balloon-font-size: 16px;
  --balloon-move: -40px; }

button[aria-label][data-balloon-pos] {
  overflow: visible; }

[aria-label][data-balloon-pos] {
  position: relative;
  cursor: pointer; }
  [aria-label][data-balloon-pos]:after {
    opacity: 0;
	box-shadow: 0px 0px 0px #B0BEC5;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
    text-indent: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: none;
    font-size: var(--balloon-font-size);
    background: var(--balloon-color);
    border-radius: 2px;
    color: var(--balloon-text-color);
    border-radius: var(--balloon-border-radius);
    content: attr(aria-label);
    padding-top: 2px; padding-right: 4px;  padding-bottom: 4px;  padding-left: 6px;
    position: absolute;
    white-space: nowrap;
    z-index: 10; }
  [aria-label][data-balloon-pos]:before {
    width: 0;
    height: 4; /* Permet de régler la hauteur de la flèche */
	/* les 3 suivants sont la taille du triangle. Par défaut : border: 6px solid transparent; Ici plus de réglages */
    border-top : 10px solid transparent;
	border-right : 8px solid transparent;    /* Gauche et droite règle la pointe de la flèche, large ou fine  */
	border-left : 8px solid transparent;     /* Gauche et droite règle la pointe de la flèche, large ou fine  */
    border-top-color: var(--balloon-color);
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
    content: "";
    position: absolute;
    z-index: 10; }
  [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
    opacity: 1;
    pointer-events: none; }
  [aria-label][data-balloon-pos].font-awesome:after {
    font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
  [aria-label][data-balloon-pos][data-balloon-break]:after {
    white-space: pre; }
  [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
    white-space: pre-line;
    word-break: break-word; }
  [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
    transition: none; }
  [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
    transform: translate(-50%, 0); }
  [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
    transform: translate(-50%, 0); }
  [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
    left: 0; }
  [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
    left: 5px; }
  [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
    right: 0; }
  [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
    right: 5px; }
  [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
    transform: translate(0, 0); }
  [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
    transform: translate(0, 0); }
  [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
    bottom: 60%; /* Positionne la bulle en hauteur. Par défaut : 100% */
    transform-origin: top;
    transform: translate(0, var(--balloon-move)); }
  [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
    margin-bottom: 10px; }
  [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
    left: 50%;
    transform: translate(-50%, var(--balloon-move)); }
  [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
    top: 100%;
    transform: translate(0, calc(var(--balloon-move) * -1)); }
  [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
    margin-top: 10px; }
  [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: var(--balloon-color); }
  [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
    left: 50%;
    transform: translate(-50%, calc(var(--balloon-move) * -1)); }
  [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
    transform: translate(0, -50%); }
  [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
    transform: translate(0, -50%); }
  [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
    right: 100%;
    top: 50%;
    transform: translate(var(--balloon-move), -50%); }
  [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
    margin-right: 10px; }
  [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: var(--balloon-color); }
  [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
    left: 100%;
    top: 50%;
    transform: translate(calc(var(--balloon-move) * -1), -50%); }
  [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
    margin-left: 10px; }
  [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: var(--balloon-color); }
  [aria-label][data-balloon-pos][data-balloon-length]:after {
    white-space: normal; }
  [aria-label][data-balloon-pos][data-balloon-length="small"]:after {
    width: 100px; }
  [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
    width: 150px; }
  [aria-label][data-balloon-pos][data-balloon-length="large"]:after {
    width: 260px; }
  [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
    width: 380px; }
    @media screen and (max-width: 768px) {
      [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
        width: 90vw; } }
  [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
    width: 100%; }


			/* SITE - BLOC SANS MARGE EN HAUT et TRAIT DU BLOC NOTE DE TEXTE A 26px */
.trait {background-image:url(images/sousmain.gif); font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:26px; text-align:left; padding-top:0px; padding-right:20px; padding-bottom:20px; padding-left:20px;}


                         /*   SITE - LIENS de NOTES DE BAS DE PAGE   */
a:link.renvoi    {color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; text-align: left; }
a:visited.renvoi   {color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; text-align: left; }
a:hover.renvoi   { color:#FF0000; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; text-align: left; }
a:active.renvoi  { color:#00FF00; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; text-align: left; }

                          /*    SITE - BLOC IMAGE sur ou sous BLOC PARAGRAPHE  (Quand la page se rétrécie, les images s'adaptent avec largeur "100%" et hauteur "auto".)
                          */
.blocimag {background-image:url(images/sousmain.gif); padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; text-align: center; width: 100%; margin-left: auto; margin-right: auto;}

                         /*   SITE - LEGENDE IMAGE du BLOC IMAGE sous BLOC PARAGRAPHE     */
.fontimag {font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size:26px; text-align:center; margin-top:1rem; margin-bottom:1rem;}

                         /*    SITE -  ESPACE INTERBLOC VERTICAL SOUS BLOCS PARAGRAPHES     */
.spacepar { margin-top: 3rem; }

                          /*    SITE - BOUTONS RADIO DES TESTS      */
input[type="radio"] {
    -ms-transform: scale(1);     /*    IE 9     */
    -webkit-transform: scale(1);     /*     Chrome, Safari, Opera     */
    transform: scale(1); }
input[type="button"] {
    -ms-transform: scale(1.5);  color:#235285;   /*    IE 9     */
    -webkit-transform: scale(1.5);  color:#235285;   /*     Chrome, Safari, Opera     */
    transform: scale(1.5);  color:#235285; }

                         /*    SITE - "PLAN DU SITE" (va avec plansite.txt)      */
.plansite { font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size: 25px; font-weight: bold; text-align: center;  margin-top: 4rem; margin-bottom:
2rem; }

                         /*    SITE - TITRES des 5 MENUS DU SITE DANS LE BLOC DES 5 MENUS DU SITE (va avec menudang.txt, menuimag.txt, menucita.txt, menuarre.txt,
                         menubonu.txt)      */
.fontmenu { font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size: 25px; font-weight: bold; text-align: center;  margin-top: 1rem; }

                         /*     SITE - LES 5 MENUS DU SITE, situés en BAS      */
.menusite { font-family: Arial,sans-serif;  font-size: 25pt; color:#000000; text-align: center; box-shadow: 2px 2px 2px #000000; }

                         /*     SITE- ESPACE INTERBLOC VERTICAL SOUS LES 5 MENUS DU SITE    */
.spacemen { text-align: center; margin-top: 3rem; }

                          /*    SITE - COPYRIGHT      */
.copyrigh {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size: 14px; text-align: center;}

                         /*     SITE- BLOC COPYRIGHT DE BAS DE PAGE    */
.bloccopy { color:#235285; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 26px; text-align: center;  }

                         /*   SITE - LIENS DU BLOC COPYRIGHT DE BAS DE PAGE      */
a:link.infos    { color:#235285; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 26px; text-align: center; font-weight: none; }
a:visited.infos { color:#235285; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 26px; text-align: center; }
a:hover.infos   { color:#FF0000; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 26px; text-align: center; font-weight: none; }
a:active.infos  { color:#00FF00; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 26px; text-align: center; }


/*----------------------------------------SECTION COMMENT ARRETER DE FUMER-----------------------------------------------------*/
/*		ft=fonte	ar=arreter		ti=titre		me=menu			se=section		bl=bloc 	*/
/*		pg=page 	im=image		rg=rouge		vt=vert			pa=paragraphe	sp=espace	*/
/*		bu=bulle	le=legende		th=théorie		bd=bandeau		li=ligne


			/* ARRETER - PHRASE DE REPETITION DU META TAG DE DESCRIPTION */
.couleurs {animation: color-change 5s infinite;} /* Animation colorée */
@keyframes color-change {skew(20deg)
  0% { color:noir;}
	  40% { color:red;}
	  50% { color:blue;}
	  60% { color:orange;}
  100% { color:noir;} }			
			

			/* ARRETER - TITRE SECTION - "TOBACOSTOP - ARRÊTER DE FUMER" DE LA SECTION EN HAUT */
			/* "text-shadow" = ombre à droite, en bas, flou, couleur */
.ftartise {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:14px; font-weight:bold; text-align:center;
margin-top:0px; margin-bottom:1px; text-shadow: 0px 0px 20px #FFFFFF;}

			/* ARRETER - BLOC TITRE DE PAGE */
.blartipg { background-image:url(images/sousmain.gif); padding-top:1px; padding-bottom:20px; padding-right:20px; padding-left:20px;}

			/* ARRETER - BLOC PARAGRAPHE */
.blarpa {background-color:#FFFFFF; padding-top:1%; padding-right:5%; padding-bottom:1%; padding-left:5%; text-align:left;}

			/* ARRETER - BLOC IMAGE */
.blarim {background-image:url(images/sousmain.gif); padding-top:1%; padding-right:5%; padding-bottom:1%; padding-left:5%; text-align:left; text-align: center;}

			/* ARRETER - TITRE ROUGE du BLOC TITRE - pages "coupables" */
			/* text-shadow = ombre = bas, droite, flou, couleur */
			/* On peut mettre une seconde ombre séparée de la première par une virgule+espace */
.ftartirg {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:30px; font-weight:bold; text-shadow: 0px 0px 20px #FF0000; text-align:center;}

			/* ARRETER - TITRE VERT du BLOC TITRE - pages "solutions" */
			/* text-shadow = ombre = bas, droite, flou, couleur */
			/* On peut mettre une seconde ombre séparée de la première par une virgule+espace */
.ftartivt {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:30px; font-weight:bold; text-shadow: 0px 0px 20px #00FF33; text-align:center;}

			/* ARRETER - PARAGRAPHE du BLOC TITRE AU CENTRE */
.ftarpati {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; font-weight:bold; text-align:center;  padding-top:0px; padding-bottom:0px; padding-right:10%; padding-left:10%;}

			/* ARRETER - PARAGRAPHE du BLOC TITRE A GAUCHE */
.ftarpatg {font-family:"Arial", Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; font-weight:bold; text-align:left;  padding-top:0px; padding-bottom:0px; padding-right:0%; padding-left:0%;}

			/* ARRETER - TITRE BLOC PARAGRAPHE */
.ftartipa {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; font-weight:bold; text-align:left;}

			/* ARRETER - PARAGRAPHE de PAGE ALIGNE A GAUCHE */
.ftarpa {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; text-align:left;}

			/* ARRETER - PARAGRAPHE de PAGE ALIGNE A GAUCHE */
.ftarpag {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; text-align:left;}

			/* ARRETER - PARAGRAPHE de PAGE ALIGNE AU CENTRE */
.ftarpac {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; text-align:center;}

			/* ARRETER - PARAGRAPHE de PAGE ALIGNE A DROITE */
.ftarpad {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; text-align:right;}

			/* ARRETER - ESPACE INTERBLOC VERTICAL SOUS BLOC TITRE */
.sparblti {margin-top:30px;}

			/* ARRETER - ESPACE INTERBLOC VERTICAL SOUS BLOC PARAGRAPHE */
.sparblpa {margin-top:20px;}

			/* ARRETER -  ESPACE BAS DE PAGE SOUS L'OISEAU POUR LIRE DIRECTEMENT LA DERNIERE NOTE DE BAS DE PAGE */
.sparbapa {margin-top:1000px;}

			/* ARRETER - LEGENDE IMAGE */
.learim { font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size: 16px; text-align: center; margin-top: 1rem; margin-bottom: 1rem; }

			/* ARRETER - IMAGE DE LA BULLE */
.imarbu {width:96px; height:96px; margin-top:2px;}

			/* ARRETER - BULLES MARRON */
			
div.bullear span {position:absolute; padding:5px}
div.bullear span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFFCC, #8D6E63 40%);}
div.bullear span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out;}
div.bullear:hover span,
div.bullear:focus span{transform:scale(1); opacity:1;}


			/* ARRETER - "BATONNIER", "D'ABORD UN PEU DE THEORIE", "APRES LA THEORIE LA PRATIQUE" */
			
.ftarth {font-family:Arial, Helvetica Neue, Helvetica, sans-serif;  color:#fff; text-transform:uppercase; font-size:18px; font-weight:bold; text-align:center; margin-top:2rem; margin-bottom:2rem;}


			/* ARRETER - EFFET LETTRES QUI TOURNENT SUR ELLES-MÊME */
			/* Réglage d'origine {animation: flip 5s infinite; animation-delay: calc(.2s * var(--i))} */
			/* https://alvarotrigo.com/blog/css-text-animations/ */
			
.toupies {position: relative;}
.toupies span {position: relative; display: inline-block; 
animation: flip 10s infinite;			/* temps de démarrage et vitesse de rotation des lettres */
animation-delay: calc(.4s * var(--i))}	/* temps pour changer de lettre */
@keyframes flip {0%,80% {transform: rotateY(360deg)}}


			/* ARRETER - EFFET LETTRES QUI SAUTILLENT AVEC LEGER EFFET DE REFLET */
			/* Réglage d'origine {animation: waviy 1s infinite; animation-delay: calc(.1s * var(--i));} */
			/* https://alvarotrigo.com/blog/css-text-animations/ */
			
.sautille {position:relative; -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));}
.sautille span {position:relative; display:inline-block;
animation: waviy 3s infinite;
animation-delay: calc(.05s * var(--i));}
@keyframes waviy {0%,40%,100% {transform: translateY(0)} 20% {transform: translateY(-20px)}}


			/* ARRETER - BANDEAU BLOC TEXTE QUI MONTE EN BAS DE L'IMAGE */
			/* cf. soluce1b.html, */
			/* https://www.designlabthemes.com/text-over-image-css/ */

.wp-caption1 {margin-left:auto; margin-right:auto; position: relative; padding: 0; margin: 0;} 
.wp-caption1 img {margin-left:auto; margin-right:auto; display: block; height: auto;}
.wp-caption1-text {text-align:center; opacity:0; width:100%; color:#fff; position:relative; left:0; bottom:0; padding:0.75em 1em; font-weight:700; z-index:2; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:rgba(153,102,0,0.5);}
.wp-caption1:hover .wp-caption1-text {margin-left:auto; margin-right:auto; text-align:center;
opacity:1; transform:translateY(-40px); -webkit-transform:translateY(-40px);transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; border-radius:0;}

.wp-caption2 {margin-left:auto; margin-right:auto; position: relative; padding: 0; margin: 0;} 
.wp-caption2 img {margin-left:auto; margin-right:auto; display: block; height: auto;}
.wp-caption2-text {text-align:center;opacity:0; width:100%; color:#fff; position:relative; left:0; bottom:0; padding:0.75em 1em; font-weight:700; z-index:2; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:rgba(153,102,0,0.5);}
.wp-caption2:hover .wp-caption2-text {margin-left:auto; margin-right:auto; text-align:center;
opacity:1; transform:translateY(-40px); -webkit-transform:translateY(-40px);transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; border-radius:0;}

.wp-caption3 {margin-left:auto; margin-right:auto; position: relative; padding: 0; margin: 0;} 
.wp-caption3 img {margin-left:auto; margin-right:auto; display: block; height: auto;}
.wp-caption3-text {text-align:center;opacity:0; width:100%; color:#fff; position:relative; left:0; bottom:0; padding:0.75em 1em; font-weight:700; z-index:2; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:rgba(153,102,0,0.5);}
.wp-caption3:hover .wp-caption3-text {margin-left:auto; margin-right:auto; text-align:center;
opacity:1; transform:translateY(-40px); -webkit-transform:translateY(-40px);transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; border-radius:0;}

.wp-caption4 {margin-left:auto; margin-right:auto; position: relative; padding: 0; margin: 0;} 
.wp-caption4 img {margin-left:auto; margin-right:auto; display: block; height: auto;}
.wp-caption4-text {text-align:center;opacity:0; width:100%; color:#fff; position:relative; left:0; bottom:0; padding:0.75em 1em; font-weight:700; z-index:2; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:rgba(153,102,0,0.5);}
.wp-caption4:hover .wp-caption4-text {margin-left:auto; margin-right:auto; text-align:center;
opacity:1; transform:translateY(-40px); -webkit-transform:translateY(-40px);transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; border-radius:0;}			

.ftarbd {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:1rem; font-weight:bold; text-align:center;}


			/* DANGERS - BLOC NOTE DE BAS DE PAGE SANS MARGE EN HAUT - et POLICE A 14px */
.blarno {background-image:url(images/sousmain.gif); padding-top:0px; padding-right:5%; padding-bottom:4px; padding-left:5%; font-weight:normal;}

.ftarnog {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:14px; text-align:left; font-weight:normal;}


/*----------------------------------------SECTION DANGERS DU TABAC-----------------------------------------------------*/
							/* DANGERS - LA PAGE TEMOIGNAGES EN FAIT PARTIE */
/*		rg=rangée		cl=colonne		vi=vide			tr=translucide		op=opaque		re=responsive	mv=mouvement */   
/*		ft=fonte		no=note			im=images		pa=paragraphe		bl=bloc			se=section		*/
/*		le=légende		ti=titre		c=centre		g=gauche			d=droite		ma=marge		*/   
/*		ba=barre		bu=bulle		me=menu			st=sous-titre		sp=espace		pg=page			ta=tableau	*/


			/* DANGERS - FLEXBOX : POUR DES BLOCS EN RANGEES (rangee, qui est un bloc conteneur pour des colonnes), AVEC COLONNES  (cl,etc., les colonnes proprement dites)
         ---  (les <DIV CLASS="cl..."> en sous-ensembles de <DIV CLASS="rangee">)
         ---  "wrap" pour que la colonne ne sorte pas de la page mais passe en dessous,
         ---  "flex:1" prend toute la largeur possible, "flex:2" prend 2 fois plus de largeur qu'un autre flex:1", etc.
         ---  "   border:1px solid red;  " permet de voir ce qu'on fait,
         ---  Réglages colonnes : {flex: 0 0 60px;}=>{flex: flex-grow (facteur d'agrandissement) flex-shrink (facteur de réduction) flex-basis (taille initiale)}
         ---  Une colonne vide peut faire un espace inter-colonne, sinon elles sont systématiquement collées (.colcourt {flex:1; max-width:20px;}   <DIV CLASS="colcourt"></DIV>) */
		 
/*--------------------------------------------------------------------------------*/		 
			/* Les colonnes ont la même taille en préréglage, sans alignement vertical.
			L'alignement vertical, dit "secondaire", texte ou image, peut se faire  dans .rangee pour toutes les colonnes d'un coup (.rangee {align-items:center;} mais ça ne centre que les colonnes je crois -> problème CSS : les colonnes n'ont pas la même hauteur, du coup à éviter, et mettre par colonne, plus pratique et efficace :
			
			flex:1; display:flex; (flex-direction:column); align-items:center; ou (justify-content:center); MAIS LES POLICES CHANGENT DE TAILLE SUR MOBILE =======>>>>>> FAIRE PRECEDER PAR UN JEU DE COLONNES VIDES !!!!!

			Exemple : peril10.html */
/*--------------------------------------------------------------------------------*/

			/* ou, si plusieurs blocs verticaux dans une colonne :
			1) rang horizontal normal   (.rangee {display:flex; flex-wrap:wrap;})   puis
			2) colonne-rang verticale (.clraver {flex:1; display:flex; (flex-direction:column); align-items:center; ou (justify-content:center);}), et
			3) les colonnes finales qui s'empilent verticalement en plusieurs blocs (flex:) dont il faut refaire une colonne-rang verticale pour centrer à nouveau le contenu. MAIS LES POLICES CHANGENT DE TAILLE SUR MOBILE */

.rgda {display:flex; flex-wrap:wrap;}
.cldavi {flex:1; padding:1%;} 
.cldatr {flex:1; background-image:url(images/sousmain.gif); padding:1%;}
.cldaop {flex:1; background-color:#FFFFFF; padding:1%;}

			/* DANGERS - PAGES DES LOIS - volume des colonnes selon la taille de l'écran */
.cldalotr {flex:1; padding:3%; background-image:url(images/sousmain.gif); }
.cldaloop {flex:12; padding:3%; background-color:#FFFFFF;}
@media screen and (min-width: 640px) {.cldaloop {flex:4;}}


			/* DANGERS - MEDIA QUERY - Formulation conditionnelle en fonction de la taille de l'écran */
			/* Exemple de Peril17.html :
			@media screen and (min-width: 700px) {.imagmarg {margin-top:5em;  margin-right:9em; margin-bottom:2em; right:5em; padding-
bottom:10em; padding-left:5em;}}
			Quand la page se rétrécie, les images s'adaptent avec largeur "100%" et hauteur "auto".	*/
			
			
/*-------------------*/


			/* DANGERS - TITRE SECTION - "TOBACOSTOP - DANGERS DU TABAC" DE LA SECTION EN HAUT */
			/* "text-shadow" = ombre à droite, en bas, flou, couleur */
.ftdatise {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:14px; font-weight:bold; text-align:center;
margin-top:0px; margin-bottom:1px; text-shadow: 0px 0px 20px #FFFFFF;}


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


			/* DANGERS - BLOC TITRE PAGE */
.bldatipg {background-image:url(images/sousmain.gif); text-align:center; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;}

			/* DANGERS - BLOC TITRE PARAGRAPHE */
.bldatipa {background-image:url(images/sousmain.gif); text-align:center; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;}

			/* DANGERS - BLOC VIDE */
.bldavi /*bldavide*/ { padding-top:20px; padding-right:5%; padding-bottom:20px; padding-left:5%;}

			/* DANGERS - BLOC TRANSLUCIDE */
.bldatr /*blocdatr */ {background-image:url(images/sousmain.gif); padding-top:20px; padding-right:5%; padding-bottom:20px; padding-left:5%;}

			/* DANGERS - BLOC OPAQUE */
.bldaop /*blocdaop*/ {background-color:#FFFFFF; padding-top:20px; padding-right:5%; padding-bottom:20px; padding-left:5%;}

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

			/*( DANGERS - TITRE PAGE INTRODUCTION */
.ftdatiin {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; text-align:center; font-style:italic;}

			/*( DANGERS - SOUS-TITRE PAGE INTRODUCTION */
.ftdastin {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:20px; text-align:center;}

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

			/* DANGERS - TITRE DES PAGES */
.ftdatipg /*fontdatp*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; color:#235285; text-align:center;}

			/* DANGERS - TITRE DU BLOC PARAGRAPHE A GAUCHE */
.ftdatig /*fontdatg*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:20px; text-align:left;}

			/* DANGERS - TITRE DU BLOC PARAGRAPHE AU CENTRE */
.ftdatic /*fontdatc*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:20px; text-align:center;}

			/* DANGERS - TEXTE DU BLOC PARAGRAPHE A GAUCHE */
.ftdapag /*fontdapg*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:16px; /* 1em (1rem ?) = 16px */  text-align:left;}

			/* DANGERS - TEXTE DU BLOC PARAGRAPHE A DROITE */
.ftdapad /*fontdapd*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:16px; text-align:right;}

			/* DANGERS - TEXTE DU BLOC PARAGRAPHE AU CENTRE */
.ftdapac /*fontdapc*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:16px; text-align:center;}

			/* DANGERS - TEXTE DU BLOC PARAGRAPHE JUSTIFIE */
.ftdapaj /*fontdapj*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:16px; text-align:justify;}

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

			/* DANGERS -  ESPACE INTERBLOC VERTICAL SOUS BLOC TITRE */
.spdablti /*spdatitr*/ {margin-top:30px;}

			/* DANGERS -  ESPACE INTERBLOC VERTICAL SOUS BLOCS PARAGRAPHES */
.spdablpa /*spdapara*/ {margin-top:20px;}

			/* DANGERS -  ESPACE BAS DE PAGE SOUS L'OISEAU POUR LIRE DIRECTEMENT LA DERNIERE NOTE DE BAS DE PAGE */
.spdabapa /*spdapara*/ {margin-top:1000px;}

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

			/* DANGERS - MARGE DES IMAGES */
			/* ne pas mettre de pourcentage, ça ne marche pas, contrairement à padding */
.imdamaim /*imagmarg*/ {margin-top:20px; margin-right:20px; margin-bottom:20px; margin-left:20px;}

			/* DANGERS - IMAGES RESPONSIVES */
			/* Prend toute la place avec maximum 450px */
.imdaimre {width:100%; height:auto; max-height:450px;}

			/* DANGERS - IMAGE DE LA BULLE */
.imdabu {width:37px; height:76px; margin-top:2px; z-index:10;}

			/* DANGERS - LEGENDE IMAGE */
.ftdaleim {font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size:14px; text-align:center; margin-top:5px; margin-bottom:5px;}


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

			/* DANGERS - BLOC NOTE DE BAS DE PAGE SANS MARGE EN HAUT - et POLICE A 14px */
.bldabano {background-image:url(images/sousmain.gif); font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:26px; text-align:left; padding-top:0px; padding-right:5%; padding-bottom:20px; padding-left:5%; font-weight:normal;}/* A enlever quand toutes les notes du sites sont rectifiées */


.bldano {background-image:url(images/sousmain.gif); padding-top:0px; padding-right:5%; padding-bottom:4px; padding-left:5%; font-weight:normal;}

.ftdanog {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:14px; text-align:left; font-weight:normal;}

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

			/* DANGERS - TRAIT HORIZONTAL DE SEPARATION */
			/* <HR /> */
			/* peril07.html ; pages des lois : les traits de séparation pour les 6 pays */
			/* "hr" est surané paraît-il, c'est trop simple et efficace, et maintenant le trait aurait une signification sémantique */
			/* Une autre façon de faire les traits figure en en-tête de la page "temoins.html" avec la balise "article". */
hr{width:10%;}

			/* DANGERS - TRAIT HORIZONTAL DE SEPARATION */
			/* <P CLASS="article">&nbsp;</P> */
			/* peril07.html */
.article {margin: 3px 0px; border-bottom:7px double #235285;}
.article:after {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; font-style:italic; color:#BCAAA4; background:#FFF; content:'Entrefilet Tobacostop'; padding:0 8px; position:relative; top:16px;}


/*-------BULLES---------*/

			/* DANGERS - DEPLACEMENT DES BULLES VERS LA GAUCHE POUR RECADRAGE (pour peril02, peril05) */

.mvdag {display:inline-block;  vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0); -webkit-transition-duration: 3s; transition-duration: 3s; -webkit-transition-property: transform; transition-property: transform; z-index:50;}
.mvdag:hover, .mvdag:focus, .mvdag:active {-webkit-transform: translateX(-50px); transform: translateX(-50px); z-index:50;} /* FAIRE REGLAGE NEGATIF ou POSITIF */

			/* DANGERS - DEPLACEMENT DES BULLES VERS LA DROITE POUR RECADRAGE (pour peril02, peril05) */

.mvdad {display:inline-block;  vertical-align:middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px
rgba(0, 0, 0, 0); -webkit-transition-duration: 3s; transition-duration: 3s; -webkit-transition-property: transform; transition-property: transform; z-index:50;}
.mvdad:hover, .mvdad:focus, .mvdad:active {-webkit-transform: translateX(50px); transform: translateX(50px); z-index:50;} /* FAIRE REGLAGE NEGATIF ou POSITIF */


			/* DANGERS - BULLE IMAGE 1 (pour images d'une même page) */
										
div.budaim1 span {position:absolute; padding:5px; z-index:50;}
div.budaim1 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim1 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim1:hover span,
div.budaim1:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 2 (pour images d'une même page) */
										
div.budaim2 span {position:absolute; padding:5px; z-index:50;}
div.budaim2 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim2 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim2:hover span,
div.budaim2:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 3 (pour images d'une même page) */

div.budaim3 span {position:absolute; padding:5px; z-index:50;}
div.budaim3 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim3 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim3:hover span,
div.budaim3:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 4 (pour images d'une même page) */

div.budaim4 span {position:absolute; padding:5px; z-index:50;}
div.budaim4 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim4 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim4:hover span,
div.budaim4:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 5 (pour images d'une même page) */

div.budaim5 span {position:absolute; padding:5px; z-index:50;}
div.budaim5 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim5 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim5:hover span,
div.budaim5:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 6 (pour images d'une même page) */

div.budaim6 span {position:absolute; padding:5px; z-index:50;}
div.budaim6 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim6 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim6:hover span,
div.budaim6:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 7 (pour images d'une même page) */

div.budaim7 span {position:absolute; padding:5px; z-index:50;}
div.budaim7 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim7 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim7:hover span,
div.budaim7:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 8 (pour images d'une même page) */

div.budaim8 span {position:absolute; padding:5px; z-index:50;}
div.budaim8 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim8 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim8:hover span,
div.budaim8:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 9 (pour images d'une même page) */

div.budaim9 span {position:absolute; padding:5px; z-index:50;}
div.budaim9 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim9 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim9:hover span,
div.budaim9:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 10 (pour images d'une même page) */

div.budaim10 span {position:absolute; padding:5px; z-index:50;}
div.budaim10 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim10 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim10:hover span,
div.budaim10:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 11 (pour images d'une même page) */
										
div.budaim11 span {position:absolute; padding:5px; z-index:50;}
div.budaim11 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim11 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim11:hover span,
div.budaim11:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 12 (pour images d'une même page) */
										
div.budaim12 span {position:absolute; padding:5px; z-index:50;}
div.budaim12 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim12 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim12:hover span,
div.budaim12:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 13 (pour images d'une même page) */

div.budaim13 span {position:absolute; padding:5px; z-index:50;}
div.budaim13 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim13 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim13:hover span,
div.budaim13:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 14 (pour images d'une même page) */

div.budaim14 span {position:absolute; padding:5px; z-index:50;}
div.budaim14 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim14 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim14:hover span,
div.budaim14:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 15 (pour images d'une même page) */

div.budaim15 span {position:absolute; padding:5px; z-index:50;}
div.budaim15 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim15 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim15:hover span,
div.budaim15:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 16 (pour images d'une même page) */

div.budaim16 span {position:absolute; padding:5px; z-index:50;}
div.budaim16 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim16 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim16:hover span,
div.budaim16:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 17 (pour images d'une même page) */

div.budaim17 span {position:absolute; padding:5px; z-index:50;}
div.budaim17 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim17 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim17:hover span,
div.budaim17:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 18 (pour images d'une même page) */

div.budaim18 span {position:absolute; padding:5px; z-index:50;}
div.budaim18 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim18 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim18:hover span,
div.budaim18:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 19 (pour images d'une même page) */

div.budaim19 span {position:absolute; padding:5px; z-index:50;}
div.budaim19 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim19 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim19:hover span,
div.budaim19:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 20 (pour images d'une même page) */

div.budaim20 span {position:absolute; padding:5px; z-index:50;}
div.budaim20 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim20 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim20:hover span,
div.budaim20:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 21 (pour images d'une même page) */

div.budaim21 span {position:absolute; padding:5px; z-index:50;}
div.budaim21 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim21 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim21:hover span,
div.budaim21:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 22 (pour images d'une même page) */

div.budaim22 span {position:absolute; padding:5px; z-index:50;}
div.budaim22 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim22 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim22:hover span,
div.budaim22:focus span{transform:scale(1); opacity:1; z-index:50;}

			/* DANGERS - BULLE IMAGE 23 (pour images d'une même page) */

div.budaim23 span {position:absolute; padding:5px; z-index:50;}
div.budaim23 span {text-align:center; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#FFFFFF; font-size:24px; box-shadow: 1px 14px 20px #000000; border:1px; border-radius:15px; background:linear-gradient(160deg, #FFFF00, #880E4F 40%); z-index:50;}
div.budaim23 span {transform:scale(0); transform-origin:top center; transition:all 500ms ease-in-out; z-index:50;}
div.budaim23:hover span,
div.budaim23:focus span{transform:scale(1); opacity:1; z-index:50;}


/*----------------------------------------SECTION IMAGES TABAGIQUES-----------------------------------------------------*/
/*		rg=rangée		cl=colonne		vi=vide			tr=translucide		op=opaque	*/   
/*		ft=fonte		no=note			im=images		pa=paragraphe		bl=bloc		*/
/*		le=légende		ti=titre		c=centre		g=gauche			d=droite	*/   
/*		ba=barre		bu=bulle		me=menu			st=sous-titre		sp=espace	*/


			/* IMAGES - TITRE SECTION - "TOBACOSTOP - IMAGES TABAGIQUES" DE LA SECTION EN HAUT */
			/* "text-shadow" = ombre à droite, en bas, flou, couleur */
.ftimtise {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:14px; font-weight:bold; text-align:center;
margin-top:0px; margin-bottom:1px; text-shadow: 0px 0px 20px #FFFFFF;}


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


			/* IMAGES - BLOC IMAGE au-dessus du BLOC PARAGRAPHE */
.blimim {background-image:url(images/sousmain.gif); padding-top:20px; padding-bottom:20px; padding-right:5%; padding-left:5%; text-align:center;}

			/* IMAGES - BLOC PARAGRAPHE au-dessous du BLOC IMAGE) */
.blimpa {background-color:#FFFFFF; padding-top:20px; padding-bottom:20px; padding-right:5%; padding-left:5%; text-align:left;}

			/* IMAGES - BLOC VIDE */
.blimvi {padding-top:20px; padding-bottom:20px; padding-right:5%; padding-left:5%;}

			/* IMAGES - IMAGE DANS LA BULLE DE L'IMAGE */
.imimbu {width:27px; height:37px; margin-top:2px;}

			/* IMAGES - LEGENDE IMAGE du BLOC IMAGE sous L'IMAGE */
.ftimle {font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size:16px; text-align:center; margin-top:1rem; margin-bottom:1rem;}

			/* IMAGES - TITRE DU BLOC IMAGE PAGE D'INTRODUCTION */
.ftimti {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; text-align:center; font-style:italic;}

			/* IMAGES - SOUS-TITRE DU BLOC IMAGE PAGE D'INTRODUCTION "image" et BLOCS PARAGRAPHE "image04-05-07" */
.ftimst {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:20px; color:#235285; text-align:center;}

			/* IMAGES - TEXTE DU BLOC PARAGRAPHE AU CENTRE */
.ftimpac {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:16px; text-align:center;}

			/* IMAGES - TEXTE DU BLOC PARAGRAPHE A GAUCHE */
.ftimpag {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:16px; text-align:left;}

			/* IMAGES - BARRE DU BLOC NOTE DE TEXTE - spécifique section image et adage à cause du fond) */
.baimno   {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:16px; text-align:left; padding-top:0px;
padding-right:0px; padding-left:0px; padding-bottom:0px; }

			/* IMAGES - ESPACE INTERBLOC VERTICAL SOUS BLOC PARAGRAPHE */
.spimblpa {margin-top:3rem;}

			/* IMAGES -  ESPACE BAS DE PAGE SOUS L'OISEAU POUR LIRE DIRECTEMENT LA DERNIERE NOTE DE BAS DE PAGE */
.spimbapa /*spdapara*/ {margin-top:1000px;}

			/* DANGERS - BLOC NOTE DE BAS DE PAGE SANS MARGE EN HAUT - et POLICE A 14px */
.blimno {background-image:url(images/sousmain.gif); padding-top:0px; padding-right:5%; padding-bottom:4px; padding-left:5%; font-weight:normal;}

.ftimnog {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:14px; text-align:left; font-weight:normal;}


/*----------------------------------------SECTION CITATIONS ILLUSTRES-------------------------------------*/
/*	ti=titre	ad=adages		me=menu		bl=bloc		pa=paragraphe */
/*	ft=fonte	st=sous-titre	au=auteur	c=centre 	g=gauche */


			/* ADAGES - TITRE SECTION - "TOBACOSTOP - CITATIONS ILLUSTRES" DE LA SECTION EN HAUT */
			/* "text-shadow" = ombre à droite, en bas, flou, couleur */
.ftadtise {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:14px; font-weight:bold; text-align:center; margin-top:0px; margin-bottom:1px; text-shadow: 0px 0px 20px #FFFFFF;}


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


			/* ADAGES - BLOC CITATION */
.bladad {background-image:url(images/sousmain.gif); padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; text-align:center;}

			/* ADAGES - BLOC PARAGRAPHE - au-dessous du BLOC CITATION - Pages intro, 11, 15 et 17) */
.bladpa {background-color:#FFFFFF; padding-top:20px; padding-bottom:20px; padding-right:20px; padding-left:20px; text-align: left;}

			/* ADAGES - INTRO - TITRE DU BLOC CITATION PAGE D'INTRODUCTION */
.ftadti {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; text-align:center; font-style:italic;}

			/* ADAGES - INTRO - SOUS-TITRE DU BLOC CITATION PAGE D'INTRODUCTION */
.ftadst {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:20px; color:#235285; text-align:center;}

			/* ADAGES - CITATION - DU BLOC CITATION */
.ftadad { font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 20px; text-align: center; font-style: italic; font-weight:bold; }

			/* ADAGES - AUTEUR - DU BLOC CITATION     */
.ftadau {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 16px; text-align: center;}

			/* ADAGES - TEXTE DU PRINCIPE DE LA PAGE     */
.ftadtt	{font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size:14px;}

			/* ADAGES - TEXTE DU BLOC PARAGRAPHE AU CENTRE */
.ftadpac {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size: 16px; text-align: center;}

			/* ADAGES - TEXTE DU BLOC PARAGRAPHE A GAUCHE */
.ftadpag {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size: 16px;}

			/* IMAGES - BARRE DU BLOC NOTE DE TEXTE - spécifique section adage et image à cause du fond) */
.baadno {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:25px; text-align:left; padding-top:0px;
padding-right:0px; padding-left:0px; padding-bottom:0px;}

			/* ADAGES - ESPACE INTERBLOC VERTICAL SOUS BLOC PARAGRAPHE */
.spadblpa {margin-top:20px;}


			/* ADAGES - IMAGES GROSSISSSANTES LENTES A TAILLE VARIABLE SUIVANT TAILLE ECRAN */
			/* <P ou DIV CLASS="zoom"> juste avant l'image */
			/* SUPPRIMES : .zoom {width:100%; height:100%;} devenu : .zoom {width:auto; height:auto;} */

.zoomad img {							/* La transition s'applique à la fois sur la largeur et la hauteur, durée de 3 secondes */
-webkit-transition: all 3s ease;		/* Safari et Chrome */
-moz-transition: all 3s ease;			/* Firefox */
-ms-transition: all 3s ease;			/* Internet Explorer 9 */
-o-transition: all 3s ease;				/* Opera */
transition: all 3s ease;}
.zoomad:hover img {						/* L'image est agrandie par 1.3 */
-webkit-transform:scale(1.3);			/* Safari et Chrome */
-moz-transform:scale(1.3);				/* Firefox */
-ms-transform:scale(1.3);				/* Internet Explorer 9 */
-o-transform:scale(1.3);				/* Opera */
transform:scale(1.3);}
@media screen and (min-width:640px) {	/* Si largeur écran supérieure à 640px */
.zoomad:hover img {						/* L'image est agrandie par 1.9 */
-webkit-transform:scale(1.9);			/* Safari et Chrome */
-moz-transform:scale(1.9);				/* Firefox */
-ms-transform:scale(1.9);				/* Internet Explorer 9 */
-o-transform:scale(1.9);				/* Opera */
transform:scale(1.9);}}


/*----------------------------------------SECTION BONUS DU TABAC-----------------------------------------------------*/

							/* BONUS - LA PAGE TEMOIGNAGES EN FAIT PARTIE */
/*		rg=rangée		cl=colonne		vi=vide			tr=translucide		op=opaque		re=responsive	bo=bonus */   
/*		ft=fonte		no=note			im=images		pa=paragraphe		bl=bloc			se=section		*/
/*		le=légende		ti=titre		c=centre		g=gauche			d=droite		ma=marge		*/   
/*		ba=barre		bu=bulle		me=menu			st=sous-titre		sp=espace		pg=page			ta=tableau	*/


			/* BONUS - PAGE INDEX : RUBAN  */
			/* https://css-tricks.com/snippets/css/ribbon/ */
.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width: 50%;
    
 position: relative;
 background:linear-gradient(to right, #ab47bc, #e1bee7, #ab47bc, #ab47bc, #ab47bc, #e1bee7, #ab47bc); /* couleur du 1er plan (origine : #ba89b6) */
 color: #fff;
 text-align: center;
 padding: 15px 10px; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #9933cc;  /* couleur du 3ème plan (origine : 986794)  */
 z-index: -1;
transform: rotate(-20deg) skew(-20deg, 10deg); /* truc que j'ai rajouté */
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c  transparent transparent transparent;   /* couleur du 2ème plan (origine : 804f7c )  */
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}


			/* BONUS - FLEXBOX : POUR DES BLOCS EN RANGEES (rangee, qui est un bloc conteneur pour des colonnes), AVEC COLONNES  (cl,etc., les colonnes proprement dites)
         ---  (les <DIV CLASS="cl..."> en sous-ensembles de <DIV CLASS="rangee">)
         ---  "wrap" pour que la colonne ne sorte pas de la page mais passe en dessous,
         ---  "flex:1" prend toute la largeur possible, "flex:2" prend 2 fois plus de largeur qu'un autre flex:1", etc.
         ---  "   border:1px solid red;  " permet de voir ce qu'on fait,
         ---  Réglages colonnes : {flex: 0 0 60px;}=>{flex: flex-grow (facteur d'agrandissement) flex-shrink (facteur de réduction) flex-basis (taille initiale)}
         ---  Une colonne vide peut faire un espace inter-colonne, sinon elles sont systématiquement collées (.colcourt {flex:1; max-width:20px;}   <DIV CLASS="colcourt"></DIV>) */
		 
/*--------------------------------------------------------------------------------*/		 
			/* Les colonnes ont la même taille en préréglage, sans alignement vertical.
			L'alignement vertical, dit "secondaire", texte ou image, peut se faire  dans .rangee pour toutes les colonnes d'un coup (.rangee {align-items:center;} mais ça ne centre que les colonnes je crois -> problème CSS : les colonnes n'ont pas la même hauteur, du coup à éviter, et mettre par colonne, plus pratique et efficace :
			
			flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;

			Exemple : peril10.html */
/*--------------------------------------------------------------------------------*/

			/* ou, si plusieurs blocs verticaux dans une colonne :
			1) rang horizontal normal   (.rangee {display:flex; flex-wrap:wrap;})   puis
			2) colonne-rang verticale (.clraver {flex:1; display:flex; flex-direction:column; justify-content:center;}), et
			3) les colonnes finales qui s'empilent verticalement en plusieurs blocs (flex:) dont il faut refaire une colonne-rang verticale pour centrer à nouveau le contenu. */

.rgbo {display:flex; flex-wrap:wrap; flex-shrink:0; /* pour non rétrécissement du contenu */ min-width:0; min-height:0;}
.clbovi /*cldavide*/ {flex:1; padding:1%; box-sizing:border-box; /* pour que le contenu ne dépasse pas */ flex-shrink:0; min-width:0; min-height:0;} 
.clbotr /*cldatran*/ {flex:1; background-image:url(images/sousmain.gif); padding:1%; box-sizing:border-box; flex-shrink:0; min-width:0; min-height:0;}
.clboop /*cldaopaq - cldablan*/ {flex:1; background-color:#FFFFFF; padding:2%; box-sizing:border-box; flex-shrink:0; min-width:0; min-height:0;}


			/* BONUS - MEDIA QUERY - Formulation conditionnelle en fonction de la taille de l'écran */
			/* Exemple de Peril17.html :
			@media screen and (min-width: 700px) {.imagmarg {margin-top:5em;  margin-right:9em; margin-bottom:2em; right:5em; padding-
bottom:10em; padding-left:5em;}}
			Quand la page se rétrécie, les images s'adaptent avec largeur "100%" et hauteur "auto".	*/
			
			
/*-------------------*/			


			/* BONUS - TITRE SECTION - "TOBACOSTOP - BONUS" DE LA SECTION EN HAUT */
			/* "text-shadow" = ombre à droite, en bas, flou, couleur */
.ftbotise {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#7986CB; font-size:14px; font-weight:bold; text-align:center;
margin-top:0px; margin-bottom:1px; text-shadow: 0px 0px 20px #FFFFFF;}


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


			/* BONUS - BLOC TITRE PAGE */
.blbotipg {background-image:url(images/sousmain.gif); text-align:center; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;}

			/* BONUS - BLOC TITRE PARAGRAPHE */
.blbotipa {background-image:url(images/sousmain.gif); text-align:center; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;}

			/* BONUS - BLOC VIDE */
.blbovi /*bldavide*/ { padding-top:20px; padding-right:5%; padding-bottom:20px; padding-left:5%;}

			/* BONUS - BLOC TRANSLUCIDE */
.blbotr /*blocdatr */ {background-image:url(images/sousmain.gif); padding-top:20px; padding-right:5%; padding-bottom:20px; padding-left:5%;}

			/* BONUS - BLOC OPAQUE */
.blboop /*blocdaop*/ {background-color:#FFFFFF; padding-top:20px; padding-right:5%; padding-bottom:20px; padding-left:5%;}

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

			/*( BONUS - TITRE PAGE INTRODUCTION */
.ftbotiin {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; text-align:center; font-style:italic;}

			/*( BONUS - SOUS-TITRE PAGE INTRODUCTION */
.ftbostin {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:20px; text-align:center;}

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

			/* BONUS - TITRE DES PAGES */
.ftbotipg /*fontdatp*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; color:#235285; text-align:center;}

			/* BONUS - TITRE DU BLOC PARAGRAPHE A GAUCHE */
.ftbotig /*fontdatg*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:20px; text-align:left;}

			/* BONUS - TITRE DU BLOC PARAGRAPHE AU CENTRE */
.ftbotic /*fontdatc*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:20px; text-align:center;}

			/* BONUS - TEXTE DU BLOC PARAGRAPHE A GAUCHE */
.ftbopag /*fontdapg*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; /* 1em = 16px */ font-size: 100%; text-align:left;}

			/* BONUS - TEXTE DU BLOC PARAGRAPHE A DROITE */
.ftbopad /*fontdapd*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; /* 1em = 16px */ font-size: 100%; text-align:right;}

			/* BONUS - TEXTE DU BLOC PARAGRAPHE AU CENTRE */
.ftbopac /*fontdapc*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; /* 1em = 16px */ font-size: 100%; text-align:center;}

			/* BONUS - TEXTE DU BLOC PARAGRAPHE JUSTIFIE */
.ftbopaj /*fontdapj*/ {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:1rem; /* 1em = 16px */ font-size: 100%; text-align:justify;}

			/* BONUS - POLICE TELETYPE - effet d'une machine à écrire - (<TT> est devenu obsolète en HTML5) */
.ftbomono	{font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size:14px; font-style:normal;}

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

			/* BONUS -  ESPACE INTERBLOC VERTICAL SOUS BLOC TITRE */
.spboblti /*spdatitr*/ {margin-top:20px;}

			/* BONUS -  ESPACE INTERBLOC VERTICAL SOUS BLOCS PARAGRAPHES */
.spboblpa /*spdapara*/ {margin-top:20px;}

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

			/* BONUS - MARGE DES IMAGES */
			/* ne pas mettre de pourcentage, ça ne marche pas, contrairement à padding */
.imbomaim /*imagmarg*/ {margin-top:20px; margin-right:20px; margin-bottom:20px; margin-left:20px;}

			/* BONUS - IMAGES RESPONSIVES */
			/* Prend toute la place avec maximum 450px */
.imboimre {width:100%;  height:auto;}

			/* BONUS - IMAGE DE LA BULLE */
.imbobu {width:37px; height:76px; margin-top:2px; z-index:10;}

			/* BONUS - LEGENDE IMAGE */
.ftboleim {font-family:"Courier New", Courier, "Liberation Mono", monospace; color:#235285; font-size:12px; text-align:center; margin-top:5px; margin-bottom:5px;}


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

			/* BONUS - BLOC NOTE DE BAS DE PAGE SANS MARGE EN HAUT ET A 26PX POUR BARRE DU BLOC NOTE */
.blbobano {background-image:url(images/sousmain.gif); font-family:Arial, Helvetica Neue, Helvetica, sans-serif; color:#235285; font-size:26px; text-align:left; padding-top:0px; padding-right:5%; padding-bottom:20px; padding-left:5%;}

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

			/* BONUS - TRAIT HORIZONTAL DE SEPARATION */
			/* <HR /> */
			/* peril07.html ; pages des lois : les traits de séparation pour les 6 pays */
			/* "hr" est surané paraît-il, c'est trop simple et efficace, et maintenant le trait aurait une signification sémantique */
			/* Une autre façon de faire les traits figure en en-tête de la page "temoins.html" avec la balise "article". */
hr{width:10%;}

			/* BONUS - TRAIT HORIZONTAL DE SEPARATION */
			/* <P CLASS="article">&nbsp;</P> */
			/* peril07.html */
.article {margin: 3px 0px; border-bottom:7px double #235285;}
.article:after {font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30px; font-style:italic; color:#BCAAA4; background:#FFF; content:'Entrefilet Tobacostop'; padding:0 8px; position:relative; top:16px;}


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


                         /*   LIENS PARTICULIERS DE LA PAGE PERIL.HTML   */
a:link.motifs { color:#FF1493;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:24pt; text-decoration:none; }
a:visited.motifs { color:#FF1493;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:24pt; text-decoration:none; }
a:hover.motifs { color:#0000FF;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30pt; text-decoration:none; }
a:active.motifs { color:#OOFFOO;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:24pt; text-decoration:none; }

                         /*   LIENS PARTICULIERS DE LA PAGE IMAGE.HTML     */
a:link.dessins { color:#009900;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:24pt; text-decoration:none; }
a:visited.dessins { color:#009900;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:24pt; text-decoration:none; }
a:hover.dessins { color:#0000FF;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:30pt; text-decoration:none; }
a:active.dessins { color:#OOFFOO;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:24pt; text-decoration:none; }

                         /*   LIENS PARTICULIERS DE LA PAGE LIENS.HTML     */
a:link.liens    { color:#FF0000;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:visited.liens { color:#FF0000;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:hover.liens   { color:#FFFFFF; background-color:#A52A2A;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:active.liens  { color:#00FF00;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }


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


			/* INDEX - LOGO AVEC REFLETS */
			/* https://frontendresource.com/css-ribbons/?utm_content=cmp-true */

.ribbon-wrapper {position:relative; z-index:8;}
.ribbon-front {background-color:#cc3333; /* couleur du bandeau central - le haut et le bas sont dans le HTML */ height:50px; width:220px; position:relative; left:-10px; z-index:2; font:20px/50px bold Verdana, Geneva, sans-serif; color:#f8f8f8; /* titre */ text-align:center; text-shadow: 0px 1px 2px #cc6666;}
.ribbon-front,
.ribbon-back-left,
.ribbon-back-right
{-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);}
.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright

{position:absolute; z-index:1; border-style:solid; height:0px; width:0px;}

.ribbon-edge-topleft,
.ribbon-edge-topright {}
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {top: 50px;}
.ribbon-edge-topleft,
.ribbon-edge-bottomleft {left: -10px; border-color: transparent #9B1724 transparent transparent;} /* ombre angle gauche */
.ribbon-edge-topleft {top: -5px; border-width: 5px 10px 0 0;}
.ribbon-edge-bottomleft {border-width: 0 10px 0px 0;}
.ribbon-edge-topright,
.ribbon-edge-bottomright {left: 200px; border-color: transparent transparent transparent #9B1724;} /* ombre angle droit */
.ribbon-edge-topright {top: 0px; border-width: 0px 0 0 10px;}
.ribbon-edge-bottomright { border-width: 0 0 5px 10px;}
  
@-webkit-keyframes flow {
  0% { left:-20px;opacity: 0;}
  50% {left:100px;opacity: 0.3;}
    100%{ left:180px;opacity: 0;}}
@keyframes flow {
  0% { left:-20px;opacity: 0;}
  50% {left:100px;opacity: 0.3;}
    100%{ left:180px;opacity: 0;}}

.glow{ background: rgb(255,255,255); width:40px; height:100%; z-index:9; position:absolute;-webkit-animation: flow 2.5s linear infinite;-moz-animation: flow 2.5s linear infinite;-webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
       -o-transform: skew(20deg);background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ border-left:1px solid #fff;}

.ftlogo {font-family:Times; color:#235285; font-size:20px; font-weight:bold; text-align:center; font-style:italic;}


			/* INDEX - BOUTON ENTRER */
			/* https://dev.to/webdeasy/top-20-css-buttons-animations-f41 */
.clic{
  position:relative;
  display:inline-block;
  margin:20px;
}

.clic a{
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:36px;
  text-align: center;
  text-decoration:none;
  background-color:#00bfa5; /* couleur principale du bouton */
  display:block;
  position:relative;
  padding:20px 40px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 0px 0 #FFE5C4, 0 10px 0 #00695c; /* couleur de l'ombre sous le bouton */
  -moz-box-shadow:inset 0 0px 0 #FFE5C4, 0 10px 0 #00695c; /* couleur de l'ombre sous le bouton */
  box-shadow:inset 0 0px 0 #FFE5C4, 0 10px 0 #00695c; /* couleur de l'ombre sous le bouton */
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.clic a:active{
  top:10px;
  background-color:#64ffda; /* couleur du bouton appuyé */
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #00bfa5; /* couleur de l'ombre sous le bouton appuyé */
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #00bfa5; /* couleur de l'ombre sous le bouton appuyé */
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #00bfa5; /* couleur de l'ombre sous le bouton appuyé */
}

.clic:after{
  content:"";
  height:100%;
  width:100%;
  padding:4px;
  position: absolute;
  bottom:-15px;
  left:-4px;
  z-index:-1;
  background-color:#2B1800;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}


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


                         /*   LIENS de CHAPITRES des BAS de PAGE   */
a:link.navigbas    { color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:7pt; text-decoration:none; }
a:visited.navigbas { color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:7pt; text-decoration:none; }
a:hover.navigbas   { color:#FFFFFF; background-color:#000080; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:7pt; text-decoration:none; }
a:active.navigbas  { color:#OOFFOO; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-weight:bold; font-size:7pt; text-decoration:none; }


a:link.indextit    { color:#FF0000;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }
a:visited.indextit { color:#FF0000;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }
a:hover.indextit   { color:#FFFFFF; background-color:#A52A2A;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }
a:active.indextit  { color:#00FF00;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }

a:link.indexnew    { color:#72BE4C;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }
a:visited.indexnew { color:#72BE4C;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }
a:hover.indexnew   { color:#72BE4C;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }
a:active.indexnew  { color:#00FF00;
      font-family:Arial, Helvetica,sans-serif; text-decoration:none; }


a:link.indexpag {color:#0000FF;  font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:visited.indexpag {color:#0000FF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:hover.indexpag {color:#FFFFFF; font-family:Arial, Helvetica Neue, Helvetica, sans-serif;text-decoration:none; background-color:navy; }
a:active.indexpag {color:#00FF00; font-family:Arial, Helvetica Neue, Helvetica, sans-serif;text-decoration:none; }


a:link.lois    { color:#E9BB00;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:visited.lois { color:#E9BB00;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:hover.lois   { color:#FF0000;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }
a:active.lois  { color:#00FF00;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; text-decoration:none; }

a:link.bons    { color:#FFFFFF; font-weight:bold; }
a:visited.bons { color:#FFFFFF; font-weight:bold; }
a:hover.bons   { color:#00FF00; font-weight:bold; background-color: #000000;}
a:active.bons  { color:#FFFF00; font-weight:bold; }

a:link.nonadmis    { color:#DDDDDD; font-weight:bold; }
a:visited.nonadmis { color:#DDDDDD; font-weight:bold; }
a:hover.nonadmis   { color:#FF0000; font-weight:bold; }
a:active.nonadmis  { color:#FFFF00; font-weight:bold; }


a:link.sortie    { color:#999999;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }
a:visited.sortie { color:#999999;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }
a:hover.sortie   { color:#333333;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }
a:active.sortie  { color:#OOFFOO;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }

a:link.retour { color:#FFFFFF;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }
a:visited.retour { color:#FFFFFF;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }
a:hover.retour { color:#FF0000;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }
a:active.retour { color:#OOFFOO;
      font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:8pt; text-decoration:none; }


-->