.page .text_intro p {margin-top:10px; line-height:24px}
.page > p:last-of-type {text-align:center}
.max > p {margin-bottom:20px}
.page > h2 {padding-bottom:20px;}
.bloc-content {position:absolute; width: 100%; height: 100%;}
.grid {max-width:100%; display:grid; grid-template-columns:repeat(3, 1fr); grid-column-gap :20px; column-gap :20px; grid-row-gap:20px; row-gap:20px; margin-top:50px}
.grid > div {border-bottom: 1px dotted #CCC; padding-bottom:15px; position:relative; background: #FFF; /*transition: all 0.5s ease 0s;*/}
.grid h3 { font-family:'open_sansextrabold', Arial, Helvetica, sans-serif; margin-bottom:10px; margin-top:5px; text-transform: uppercase}
.bloc-1 {position:relative; display:block; padding:0; width:100%; height:auto; overflow:hidden;}
.bloc-1:after {content:''; display:block; padding-bottom:100%;}
.bloc-content {position:absolute; width: 100%; height: 100%;}
.bloc-1 img {height:100%; width:100%; position:absolute; top:0; left:0; transition: all 0.5s ease 0s}
.bloc-1 img.sans {height:auto; width:100%}
.bloc-2 {padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:25px}
.bloc-2 span {font-size:12px;}
.bloc-2 h3 {font-size:24px; line-height:24px;}
.bloc-2 p:last-of-type {width:100%; position:absolute; bottom:5px; left:0} 
.bloc-2 p a {transition:all 0.5s ease 0s; display:block; background-color:#ffed00; background-image:url("../imgs/ap_titre_noir.png"); background-position: right; background-repeat:no-repeat; color:#000; height:27px; padding-top: 5px;}
.bloc-2 p a span {font-size:14px; position:absolute; right:10px; transition:all 0.5s ease 0s}
.bloc-2 p a:hover {background-position:-460px}
.bloc-2 p a:hover span {right:50%; margin-right:-55px}
.bloc-1 span {position:absolute; width:100%; height:100%; background-color:rgba(0,0,0,0.25);  z-index:1; background-image: url(../imgs/zoom.svg); background-size:60px; background-repeat:no-repeat; background-position: center center; top:-100%; opacity:0.5; transition: all 0.5s ease 0s}
/*.bloc-1 p {margin:auto; border:1px solid rgba(255,255,255,0.75); display:block; height:30px; width:30px; border-radius:15px;}
.bloc-1 p {animation: 1s zoom infinite;}*/
@keyframes zoom {
0% {height:30px; width:30px;}	
50% {height:40px; width:40px; border-radius:20px; line-height:40px; border-color:rgba(255,255,255,0);}		
100% {height:30px; width:30px; border-color:rgba(255,255,255,0.75);}	
}
.bloc-1 a:hover span {top:0%; opacity:1;}
.bloc-1 a:hover img {-moz-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25);}
.focus {-moz-box-shadow: 1px 1px 10px 0px #656565; -webkit-box-shadow: 1px 1px 10px 0px #656565; -o-box-shadow: 1px 1px 10px 0px #656565; box-shadow: 1px 1px 10px 0px #656565; filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10);}

#nav {clear:both; margin-top:35px}
#nav ul {text-align:center; font-size:0px}
#nav ul li {display:inline; font-size:12px; height:27px}
#nav ul a {display:inline-block; padding:10px; height:17px; color:#FFF; font-size:14px; background:#000;}
#nav ul a.suiv, #nav ul a.prec {color:#000; background:#ffed00; width:70px; text-align:center; transition: all 0.25s ease-in-out 0s}
#nav ul a.suiv:hover, #nav ul a.prec:hover {color:#ffed00; background:#000;}

@media screen and (min-width: 480px) {
.text_intro {padding:5px 30px 15px 30px; border-left:1px solid #CCC; border-right:1px solid #CCC; margin-bottom:30px; background:url(../imgs/bordure.png) no-repeat top right, url(../imgs/bordure.png) no-repeat top left, url(../imgs/bordure.png) no-repeat bottom right,  url(../imgs/bordure.png) no-repeat bottom left; text-align:justify;}
}
@media screen and (max-width:539px){
.grid {max-width:100%; display:grid; grid-template-columns:repeat(1, 1fr);}
}
@media screen and (min-width:540px) and (max-width:979px){
.grid {max-width:100%; display:grid; grid-template-columns:repeat(2, 1fr);}
}