Arf! J'ai eu une distraction en même temps que j'écrivais mon message!
Voilà:
code html racourci
<section class="select">
<article class="popup" id="XHD-CAM3">
<h1><img width="100" alt="" src="/images/products/installation/XHD-CAM3.png">
Fixation adhésive incurvée</h1>
<p>Fixations adhésive incurvée pour le support amovible</p>
<p>Inclus 3 fixations adhésives incurvées</p>
<div class="descr">
<a aria-hidden="true" title="fermer" class="right close ico_close"><span class="visuallyhidden">fermer</span></a>
<h2>Fixation adhésive incurvée</h2>
<div>
<img alt="" src="/images/products/installation/XHD-CAM3_inst.png">
</div>
<div class="texte">
<p>Fixations adhésive incurvée pour le support amovible</p><p>Inclus 3 fixations adhésives incurvées</p>
<h3>Installation:</h3>
<ol>
<li>Retirer la pellicule et coller la fixation sur une surface incurvée (casque)</li>
<li>Glisser le support amovible sur la fixation adhésive incurvée</li>
</ol>
<p class="clear">* Compatible avec le support amovible <span class="mc">XCEL</span></p>
<p>(#XHD-CAM3)</p>
</div>
</div>
</article>
<article class="popup" id="XHD-FAM3">
<h1><img width="100" alt="" src="/images/products/installation/XHD-FAM3.png">
Fixation adhésive plate</h1>
<p>Fixations adhésive incurvée pour le support amovible </p>
<p>Inclus 3 fixations adhésives plates</p>
<div class="descr">
<a aria-hidden="true" title="fermer" class="right close ico_close"><span class="visuallyhidden">fermer</span></a>
<h2>Fixation adhésive plate</h2>
<div>
<img alt="" src="/images/products/installation/XHD-FAM3_inst.png">
</div>
<div class="texte">
<p>Fixations adhésive incurvée pour le support amovible </p><p>Inclus 3 fixations adhésives plates</p>
<h3>Installation:</h3>
<ol>
<li>Retirer la pellicule et coller la fixation sur une surface plane</li>
<li>Glisser le support amovible sur la fixation adhésive plate</li>
</ol>
<p class="clear">* Compatible avec le support amovible <span class="mc">XCEL</span></p>
<p>(#XHD-FAM3)</p>
</div>
</div>
</article>
</section>
css, raccourci aussi:
.select{position: relative;}
.popup .descr{
background-color: #F4F4F4;
border: 1px solid #F78E1E;
cursor: pointer;
margin: 0;
overflow: auto;
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
z-index: 900;
max-height: 75%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 60%;
}
#IE8 .popup .descr{
margin-left: -25%;
margin-top: -25%;
}
.popup .descr div{
display: inline-block;
vertical-align: top;
}
a.close{
cursor: pointer;
margin: -15px -15px 0 0;
}
.popup .descr img {
max-height: 280px;
max-width: 100%;
}
.popup a.lien {width: auto;}
#accessoires section{
background-color: rgba(244,244,244,0.7);
margin-bottom: 20px;
padding: 20px 20px 0;
}
#accessoires article{
display: inline-block;
padding: 0;
vertical-align: top;
cursor: pointer;
}
#accessoires article h1, #accessoires section.autres h1{
text-align: left;
font-size: 1em;
padding: 0;
}
#accessoires article h1{margin-top: 0;}
#accessoires article h1, #accessoires article h2{ color:#F78E1E;}
#accessoires article:hover h1{ color: #F78E1E;}
#accessoires article h2, #accessoires article h3{font-weight: bold;}
#accessoires article h2{
font-size: 1em;
margin-top: 0;
}
#accessoires article h3{
font-size: 0.8em;
text-align: left;
}
#accessoires article img{
display: block;
float: left;
margin: 0 3% 3% 0;
vertical-align: top;
}
#accessoires article{
padding: 0 15px 20px 0;
width: 49%;
}
#accessoires article:nth-child(2n+2){
padding-right: 0;
padding-left: 15px;
}
#accessoires article .descr img.exception{width: 45%;}
#accessoires article .descr img{
margin: 0 3% 3% 0;
max-height: 280px;
max-width: 100%;
}
#accessoires article ol{
margin: 0 0 8px 0;
padding-left: 20px;
}
#accessoires article p{
margin: 0 0 5px;
}