.faq h3{text-align: center;}

.faq .blocQuestionRep{text-align: left; margin-bottom: 35px;}

.faq .blocQuestionRep p{margin-bottom: 0;}

.faq .blocQuestionRep .boxQuestion,
.faq .blocQuestionRep .boxReponse{display: inline-block;padding: 15px;padding-right: 25px; padding-left: 25px; border-radius: 10px;}

.faq .blocQuestionRep .boxQuestion{background: var(--color1);color: var(--color2);}
.faq .blocQuestionRep .boxReponse{ width: auto ;max-width: 70%;text-align: left;background: var(--color2);color: var(--color1);}

.faq .wrapperQuestion{margin-bottom: 10px;}

.faq .blocQuestionRep p.question,
.faq .blocQuestionRep p.reponse{position: relative;}

/* style de base nécessaire au before, pour ne pas se répéter à chaque règle */
.faq.shapeChange[data-shape] .blocQuestionRep p.question::before,
.faq.shapeChange[data-shape] .blocQuestionRep p.reponse::before{content: "";display: inline-block;width: 50px;height: 50px;position: absolute;left: -90px;top: -15px;}

/* Shape 1 et 2 ont les même icones, aussi bien l'icone question que réponse. Même chose pour Shape 3 et 4 etc... */
.faq.shapeChange[data-shape="1"] .blocQuestionRep p.question::before,
.faq.shapeChange[data-shape="2"] .blocQuestionRep p.question::before{background: url(_img/1/b.svg) no-repeat;}

.faq.shapeChange[data-shape="1"] .blocQuestionRep p.reponse::before,
.faq.shapeChange[data-shape="2"] .blocQuestionRep p.reponse::before{background: url(_img/1/a.svg) no-repeat;}

.faq.shapeChange[data-shape="3"] .blocQuestionRep p.question::before,
.faq.shapeChange[data-shape="4"] .blocQuestionRep p.question::before{background: url(_img/2/a.svg) no-repeat;}

.faq.shapeChange[data-shape="3"] .blocQuestionRep p.reponse::before,
.faq.shapeChange[data-shape="4"] .blocQuestionRep p.reponse::before{background: url(_img/2/b.svg) no-repeat;}

.faq.shapeChange[data-shape="5"] .blocQuestionRep p.question::before,
.faq.shapeChange[data-shape="6"] .blocQuestionRep p.question::before{background: url(_img/3/a.svg) no-repeat;}

.faq.shapeChange[data-shape="5"] .blocQuestionRep p.reponse::before,
.faq.shapeChange[data-shape="6"] .blocQuestionRep p.reponse::before{background: url(_img/3/b.svg) no-repeat;}

/* Padding gauche nécessaire pour l'affichage de l'icone question à gauche du p pour les data-shape impair */
.faq.shapeChange[data-shape="1"] .blocQuestionRep .wrapperQuestion,
.faq.shapeChange[data-shape="3"] .blocQuestionRep .wrapperQuestion,
.faq.shapeChange[data-shape="5"] .blocQuestionRep .wrapperQuestion{padding-left: 65px;}

/* L'icone question est affichée à droite pour les data-shape pair */
.faq.shapeChange[data-shape="2"] .blocQuestionRep p.question::before,
.faq.shapeChange[data-shape="4"] .blocQuestionRep p.question::before,
.faq.shapeChange[data-shape="6"] .blocQuestionRep p.question::before{left: auto;right: -70px;}


.faq .blocQuestionRep .wrapperReponse{text-align: right;}

.faq .blocQuestionRep:hover>i[class*="icon-"]{display:block}
.editableZone .faq .blocQuestionRep:hover{background-color: rgba(255,64,233, 0.1);}

/* ------------------------------
*         
*			Animations
*
*  -------------------------------*/
/*attente*/
.faq .blocQuestionRep.anim .boxQuestion{/*0*/}
.faq .blocQuestionRep.anim .boxQuestion p.question{transition-delay: 0.3s;}
.faq .blocQuestionRep.anim .boxReponse{transition-delay: 0.6;}
.faq .blocQuestionRep.anim .boxReponse p.reponse{transition-delay: 0.9s}

.faq .blocQuestionRep.anim .boxQuestion,
.faq .blocQuestionRep.anim .boxReponse,
.faq .blocQuestionRep.anim .boxQuestion p.question,
.faq .blocQuestionRep.anim .boxReponse p.reponse{
opacity: 0;transition-property: transform, opacity; transition-duration: 0.5s;}

.faq .blocQuestionRep.anim .boxQuestion{transform: translate(0px, 60px)}
.faq .blocQuestionRep.anim .boxReponse{transform: translateX(60px); }

.faq .blocQuestionRep.anim.animDone .boxQuestion p.question,
.faq .blocQuestionRep.anim.animDone .boxQuestion,
.faq .blocQuestionRep.anim.animDone .boxReponse,
.faq .blocQuestionRep.anim.animDone .boxReponse p.reponse{opacity: 1; transform: none;}