/* ------------- ------------- */
/* Zoom image avec fenêtre     */
/* modale « responsive ».      */
/* Trucsweb.com : Django Blais */
/* ------------- ------------- */
#figure {max-width:250px;}
.twAudessus {
  /* Le trame de fond */
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0,0,0,0.7);
  /*-webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in; */
}
.twAudessus a {
  /* Le truc pour centrer l’image */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
.twAudessus img {
  /* Le contour de l’image */
  max-width:1200px;
  padding: 10px;
 /* -webkit-border-radius: 10px;
  -moz-border-radius: 10px;*/
  background: #ffffff;
}
.twAudessus:target {
  /* Affichage de l’image */
  display: table;
   -webkit-transition: width 2s;
    transition: width 2s;
}
@media screen and (max-width: 1600px){.twAudessus img { max-width:1000px; }}
@media screen and (max-width: 1024px){.twAudessus img { max-width:700px; }}
@media screen and (max-width: 800px){.twAudessus img { max-width:500px; }}
@media screen and (max-width: 600px){.twAudessus img { max-width:400px; }}
@media screen and (max-width: 500px){.twAudessus img { max-width:250px; }}

.twpop{
margin-left: -42px;
}

.imggauche{
		float: left;
		margin: 5px 15px 0px 40px; 
}

.imgdroite{
		float: right;
		margin: 5px 0px 0px 60px;
}

/*effet zoom sur titres 2*/

.zoom {
padding-top: 16px;
width: 465px;
height: 90px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 500ms ease; /* Safari et Chrome */
-moz-transition: all 500ms ease; /* Firefox */
-ms-transition: all 500ms ease; /* Internet Explorer 9 */
-o-transition: all 500ms ease; /* Opera */
transition: all 500ms ease;
}
.image:hover img {
/* L'image est grossie de 18% */
-webkit-transform:scale(1.18); /* Safari et Chrome */
-moz-transform:scale(1.18); /* Firefox */
-ms-transform:scale(1.18); /* Internet Explorer 9 */
-o-transform:scale(1.18); /* Opera */
transform:scale(1.18);
}

/*effet zoom page accueil*/

.zoom2 {
width: 215px;
height: 40px;
}
.image2 {
width: 100%;
height: 100%;
}
.image2 img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 300ms ease; /* Safari et Chrome */
-moz-transition: all 300ms ease; /* Firefox */
-ms-transition: all 300ms ease; /* Internet Explorer 9 */
-o-transition: all 300ms ease; /* Opera */
transition: all 300ms ease;
}
.image2:hover img {
/* L'image est grossie de 5% */
-webkit-transform:scale(1.20); /* Safari et Chrome */
-moz-transform:scale(1.20); /* Firefox */
-ms-transform:scale(1.20); /* Internet Explorer 9 */
-o-transform:scale(1.20); /* Opera */
transform:scale(1.20);
}

/*infobulles*/

.pk2 a{
	color:#990000;
}

.pk22 a{
	color: black;
	font-style: normal;
}

/*illustrations popup*/

.imgpk2{
	width: 98%;
	margin-left: 2px;
}

.pk2 a:hover span, a:focus span {
     transform:scale(1) rotate(0);
     opacity:1;       
}

.pk22 a:hover span, a:focus span {
     transform:scale(1) rotate(0);
     opacity:1;       
}

.pk2 a span{
	position:absolute;
	margin-top:23px;
    margin-left:-40px;
	max-width: 220px;
	font-family: arial, verdana, sans-serif;
	font-style: normal;
	text-align: left;
	line-height: 22px;
    color:yellow;
	text-indent: 0px;
    background:#990000;
    padding: 10px;
   	border-radius:5px;
    transform:scale(0) rotate(-12deg); 
	transition:all .25s;
	opacity:0;
}

.pk22 a span{
	position:absolute;
	margin-top:23px;
    margin-left:-40px;
	max-width: 220px;
	font-family: arial, verdana, sans-serif;
	font-style: normal;
	text-align: left;
	line-height: 22px;
    color:yellow;
	text-indent: 0px;
    background:#990000;
    padding: 10px;
   	border-radius:5px;
    transform:scale(0) rotate(-12deg); 
	transition:all .25s;
	opacity:0;
}