CSS isn't working properly

[inaamLab]

hey , new one here :) 

 

i am trying to add FAQ to my cms page  ,i used a module to add css , it works but it won't display properly .

 

here is the html 

<div id="faq" class="faq-body">
<div class="faq-header">
<h3 class="faq-title">Nos conditions de ventes</h3>
<div class="seperator"></div>
<div class="faq-list">
<div><details open=""> <summary title="Avant-Propos">Avant-Propos</summary>
<p class="faq-content">- Les termes « vous » « client » et « utilisateur » désignent toute personne physique ou morale accédant sur le site Web ayant passé une commande <br /> - Les termes autour du pronom personnel « nous » désignent la société My Industrie<br /> - Le terme CGV désigne les Conditions Générales De Vente <br /> - Il est expressément demandé aux visiteurs ou clients du site de prendre connaissance et de prêter attention particulière aux présentes conditions dans leur intégralité et de les accepter formellement avant chaque demande car celles-ci ainsi que les modalités contractuelles, communiquées au client sur son compte Client et lors de l’accusé de réception de sa commande constituent des clauses contractuelles applicables à tout achat par tout utilisateur sur le site web liant la société et le client .<br /> - Toute commande passée sur le site suppose l’acceptation entière et sans réserve et sans condition des CGV en vigueur le jour de ladite commande</p>
</details></div>
<div><details> <summary title="Identification de la Société">Identification de la Société</summary>
<p class="faq-content">- Adresse du siège social : <br /> - Registre De Commerce N° :16/00-5138341A20 <br /> - NIF N° : 289164000517300000 <br /> - NIS N° : 298916380062515 <br /> - Tel: <br /> - Contact par E-mail <br /> <br /> Les Clients doivent nous adresser leurs correspondances et réclamation à l’adresse ci-dessous ou par l’intermédiaire de leur compte client créé lors de l’élaboration de leur commande.</p>
</details></div>
<div><details> <summary title="Nos produits">Nos produits</summary>
<p class="faq-content">-La Société se réserve le droit de modifier la liste des Produits proposés sur son Site, et ce sans préavis, ce que le Client accepte dès à présent, sans pouvoir réclamer à ce titre d’indemnité, notamment en cas d’interruption de l’offre à la vente d’un Produit. <br /> <br /> -Toutes les photos et renseignements portés sur les produits, les catalogues et les autres documents ne sont donnés qu'à titre indicatif, n’ont pas de caractère contractuel, notamment car les fournisseurs peuvent faire évoluer à tout moment leurs Produits (forme, matériaux, etc.) sans que leur qualité et leurs performances techniques ne soient diminuées, ce que le Client accepte dès à présent. De plus des contraintes techniques peuvent être à l’origine d’écart entre les couleurs des Produits et celles apparaissant sur les photos présentées sur le Site. Le Client ne pourra donc pas demander à ce titre la réparation d’un quelconque préjudice et / ou annuler sa commande. <br /> <br /> - Notre Société vend des Produits mais ne fournit aucun un service d’audit de conseil ou de validation d’un choix fait par le Client. Le Client est donc seul responsable de ses choix et s’engage à se faire assister lors de son choix de Produits par une personne compétente pour réaliser un audit de ses besoins et choisir le produit qui y est le mieux adapté.</p>
</details></div>
<div><details> <summary title="Disponibilité des Produits">Disponibilité des Produits</summary>
<p class="faq-content">-La disponibilité des produits est affichée sur le site sur chaque fiche produit, à cet effet, nos offres sont valables tant qu'ils sont visibles sur le site et dans la limite des stocks disponibles. <br /> <br /> - Dans le cas d'indisponibilité la mention « En rupture de stock » sera affichée sur chaque produit, avec possibilité d’alerte permettant au client d’être informer par email en priorité du réapprovisionnement dudit produit et de sa disponibilité en cliquant sur la case : <br /> <br /> 1. Maintien de la commande en instance jusqu’à réapprovisionnement dudit produit pour relancer la commande avec acceptation des nouveaux délais de livraison. <br /> 2. Proposition d’un produit équivalent avec les mêmes caractéristiques techniques d’une autre marque. <br /> 3. Annulation de Votre commande. <br /> <br /> Commande de produits Spécifiques ou obsolètes : <br /> -Les prix des produits spécifiques sur commande seront communiqués au client sous forme de devis spécial qu’il recevra sur sa boite email ou bien sur son compte client.</p>
</details></div>
<div><details> <summary title="Prix:">Prix:</summary>
<p class="faq-content">- Les prix de vente des produits sont ceux indiqués sur le site sont sous-entendus, dans l’unité monétaire du pays d’exploitation, en l’occurrence, en (DA) Dinars Algérien Toute Taxe Comprises (TVA 19% incluse) a la date mentionnée mais ne comprennent en aucun cas les frais relatives à la Livraison qui seront calculés en supplément et affichés séparément lors du processus de facturation (voir article N° XX Livraison). <br /> <br /> - Les prix affichés peuvent faire l’objet d’une révision par My Industrie à tout moment sans préavis. <br /><br /> - Ces prix fixés au moment de la commande sont fermes et définitifs. <br /><br /></p>
</details></div>
<div><details> <summary title="Cas de force majeur :">Cas de force majeur :</summary>
<p class="faq-content">Les prix sont sujet de modification en hausse ou à la baisse suite aux conséquences liées à tout changement du régime fiscal survenu au moment avant ou après la date de votre commande, un réajustement de taux de TVA sera alors effectué.</p>
</details></div>
<div><details> <summary title="Commande Et Confirmation De Commande :">Commande Et Confirmation De Commande:</summary>
<p class="faq-content">La durée de validité de l’offre est de 07 (sept) jours.</p>
</details></div>
<div><details> <summary title="Validité de l'offre:">Validité de l'offre:</summary>
<p class="faq-content">Il est indiqué que pour commander un ou plusieurs Produits, le Client doit suivre les étapes définies par la Société sur son Site et dans les présentes conditions ci-après : <br /> - Création du compte client. Le Client accepte la collecte de ses données personnelles, obligatoires pour le traitement de la commande. Ce compte permet au Client d’accéder à tout moment aux données relatives à ses commandes ainsi qu’aux données personnelles collectées par la Société <br /> <br /> Commande : <br /> - Le Client choisit son Produit et clique sur « Ajouter au panier » <br /> <br /> - La page « Voir mon panier » récapitule l’ensemble du panier. Le Client est tenu de vérifier le détail de celui-ci et de corriger d’éventuelles erreurs de saisie avant de confirmer sa commande. Le Client clique ensuite sur le bouton « Je valide ma commande » <br /> <br /> - Le Client renseigne une adresse de facturation et une adresse de livraison <br /> <br /> - Le Client choisit le mode de livraison &lt; br /&gt;&lt; br /&gt; - Le Client choisit le mode de paiement <br /> <br /> - Le Client se voit présenter un écran récapitulatif de sa commande et des modalités associées qu’il doit vérifier puis valider <br /> <br /> - Le Client accepte les conditions générales de ventes en cochant la case adéquate <br /> <br /> - Valider la commande : En cliquant sur le bouton de validation de commande, le client comprend que la passation de commande oblige à son paiement intégral. <br /> <br /> - Tout bon de commande signé du clic de validation, équivalent à une signature électronique, constitue un engagement irrévocable du Client. <br /> <br /> - Le Client recevra par mail un accusé de réception portant confirmation définitive de sa commande et de tous les éléments contractuels s'y rapportant (références commandées, prix TTC, frais de livraison, délais de livraison, etc.) et le numéro de sa commande. <br /> <br /> - Si ce courriel n’était pas reçu dans les 48 heures, il appartient au Client de contacter la Société, car il est possible que sa commande n’ait pas été enregistrée pour des raisons techniques. Si la confirmation ne peut pas être distribuée à l’adresse e-mail indiquée par le Client pour quelle que raison que ce soit, la Société pourra se prévaloir de l’inexistence de la commande et refuser celle-ci. <br /> <br /> - La Société se réserve le droit d'annuler toute commande qu'elle jugera suspecte. Lors de sa commande le Client doit fournir toutes les informations demandées par la Société. Ces informations doivent être complètes, exactes et à jour. En cas de violation du présent article découverte par la Société, cette dernière pourra refuser ou annuler la commande, sans que le Client ne puisse invoquer un quelconque préjudice.</p>
</details></div>
<div><details> <summary title="Facturation:">Facturation:</summary>
<p class="faq-content">- Les factures sont disponibles, une fois la commande effectuée sur le Site à partir du compte client. <br /> <br /> - Toutes les factures sont payables au comptant sauf conditions particulières. <br /> <br /> - Après validation de la commande, aucune modification de l'adresse de facturation n'est possible.</p>
</details></div>
<div><details> <summary title="Modalités de Paiement :">Modalités de Paiement: </summary>
<p class="faq-content">- Une fois la commande enregistrée le client peut choisir le moyen de paiement qu’il lui convienne le mieux. <br /> <br /> - Cheque ou cheque certifié : ci-après les coordonnées bancaires pour commande par chèque: <br /> Ordre : My Industrie <br /> RIB : 00200030030240075390 <br /> Code SWIFT : BEXADZAL030 <br /> <br /> - Virement bancaire : ci-après les coordonnées bancaires pour commande par virement bancaire <br /> Ordre : My Industrie <br /> RIB : 00200030030240075390 <br /> Code SWIFT : BEXADZAL030 <br /> <br /> -Espèce : Le Client peut régler sa facture au moment de la livraison par espèce. <br /> <br /> - Moyens de paiement acceptés : Espèce / virement bancaire / chèque / Cheque Certfié.</p>
</details></div>
<div><details> <summary title="Expédition, Transport et Livraison">Expédition, Transport et Livraison</summary>
<p class="faq-content">- Vos commandes seront expédiées le plus rapidement possible (sauf surcharges ponctuelles de l'activité et jours fériés). <br /> <br /> - Les expéditions se font du Dimanche au Jeudi (sauf jours fériés). <br /> <br /> - Les frais de livraison dépendent du montant de la commande et Seront communiqués au client avec le devis . Ils sont repris dans le bon de commande ainsi que la facture. <br /> <br /> -Exceptionnellement, la société offre les frais de livraison gratuit des (150 000.00 DA HT d'achat) pour la wilaya d’Alger, Boumerdès et Blida. <br /> <br /> - La date de livraison est calculée en tenant compte des délais de préparation et d’expédition auxquels est ajouté le délai de livraison du transporteur. <br /> <br /> - La Société s'engage à mettre tout en œuvre afin de livrer les commandes dans les délais escomptés et les plus courts. <br /> <br /> - Les livraisons se font sur tout le territoire national. <br /> <br /> - Les produits sont livrés à l'adresse mentionnée sur le bon de commande. <br /> <br /> - A la livraison, le Client devra vérifier le contenu, la conformité et l'état de la marchandise. S'il constate une anomalie, une réclamation concernant la livraison doit être formulée par écrit dans les 2 jours suivant la réception. <br /> <br /> - A noter : si le Client constate des avaries, des réserves sont à mentionner sur le BL Bon de Livraison. </p>
</details></div>
</div>
</div>
</div>

here is the css 

:focus {
    outline: none;
}




p {
    line-height: 1.8;
    color: black;
}

.faq-title {
    font-size: 2em;
    margin: 0.4em 0;
}

div.seperator {
    width: 7.5em;
    background-color: #FF4F4F;
    height: 0.07em;
    margin-left: -1.8em;
}

.faq-list > div {
    border-bottom: 0.07em solid #ededed;
    padding: 1em 0em;
} 

.faq-list > div:last-child {
    border: initial;
}

summary {
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; 
    user-select: none;
}

summary:hover {
    color: #e31b1b;
    transition: all 0.3s ease;
}

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 55px}
}

details[open] summary {
  color: #e31b1b;
}

details[open] p {
    border-left: 2px solid #FF4F4F;
    margin-left: 55px;
    padding-left: 25px;
    opacity: 100;
    transition: all 3s ease;
}

details[open] summary:after {
    content: "-";
    font-size: 3.2em;
    margin: -0.5em 0.14em 0 0;
    font-weight: 200;
}

.faq-body {
    width: 70em;
    margin: 4em auto;
    box-shadow: 0px 0px 16px #5b5b5b;
    border-radius: 0.2em;
    padding: 5em;
    background-color: #fff;
}

.faq-list {
    width: 55em;
    margin: 1em auto;
    padding: 2em 0;
}

summary::-webkit-details-marker {
    display: none;
}

summary:after {
    background: transparent;
    border-radius: 0.3em;
    content: "+";
    color: #e31b1b;
    float: left;
    font-size: 1.8em;
    font-weight: bold;
    margin: -0.3em 0.25em 0 0;
    padding: 0;
    text-align: center;
    width: 25px;
}

here is the result : http://ctrl-lab.com/myindustrie/fr/content/3-conditions-utilisation 

 

any help please 

[musicmaster]

When you have problems with a module the logical next step is to ask its developer.

In this case my impression is that everything is ok except for the fact that a left margin is missing. It shouldn't be hard to add that.

[inaamLab]

Thank you