Petit problème de CSS sur une page cms

[dkbane]

Hello !

 

J'ai un petit problème de CSS qui me bouffe la vie sur une page cms (presta 1.6).

 

La page : http://www.dev-bgc.eu/fr/content/4-about-us

 

Le css que je veux faire : https://codepen.io/Idered/pen/AeBgF

 

J'ai adapté en mettant des <div> à la place des <p> car prestashop formate automatiquement la page autrement, cela devrait marcher mais il n'en est rien !

 

Merci d'avance pour votre aide =)

 

Le code de la page :

<h1 class="page-heading bottom-indent">Oeliatec</h1>
<div><input type="checkbox" class="read-more-state" id="post-1" value="" />
<h3 id="titre" class="page-subheading">Notre société</h3>
<div class="read-more-wrap">
<p style="text-align: justify;">blablabla</p>
<p style="text-align: justify;">blablabla</p>
<p style="text-align: justify;">blablabla</p>
<div class="read-more-target">
<p style="text-align: justify;">blablabla</p>
<p style="text-align: justify;">blablabla</p>
</div>
</div>
<label class="read-more-trigger"></label></div>

Le css :

.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: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  width: 50px;
    height: 15px;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}