.introduction{
  background-image: url(../img/introduction_faq.jpg);
}

/* Espacement entre les questions */
.faq-section{
        margin: 40px 0;
        width: 480px;
}

/* Masquer les checkbox et les paragraphes */
.faq-section input,
.faq-section p,
.faq-section a,
.faq-section .repons  e{
        display: none;
}

.faq-section p{
  margin-top: 10px;
}

/* Si le checkbox est coché, montrer tous les elements */
.faq-section .checkbox:checked~*{
        display: block;
        font-size: 1.2em;
        line-height: 1.2;
        /* Restaurer le texte entier */
        text-overflow: clip;
        white-space: normal;
        overflow: visible;
}

/* Style des label */
.faq-section label{
        font-size: 1.2em;
        cursor: pointer;
        background: #EEE;
        display: block;
        position: relative;
        padding: 7px 10px;
        font-weight: bold;
        border: 1px solid #DDD;
        border-left: 3px solid #888;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        transition: all .15s ease-out;
}

/* Éviter de sélectionner le texte en cliquant plusieurs fois */
.faq-section label::selection{
        background: none;
}

.faq-section label:hover{
        background: #FFF;
}

/* Style du label si le checkbox est coché */
.faq-section .checkbox:checked~label{
        border-color: #FDA100;
        background: #FDA100;
        box-shadow: 0 0 1px rgba(0,0,0,0.4);
        color: #FFF;
}

/* Flèche du label par défaut */
.faq-section label::before{
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        margin-top: -6px;
        border: 6px solid transparent;
        border-left-color: #000;
}

/* Flèche du label sélectionné */
.faq-section .checkbox:checked~label::before{
        border: 6px solid transparent;
        border-top-color: #FFF;
        margin-top: -3px;
        right: 10px;
}

.faq{
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #FFF;
  border-radius: 25px;
}

.faq a{
  text-decoration: none;
  color : #0C6F95;
}
/* Gestion de la scrollbar de la FAQ */
.faq .zone_question{
  height: 400px;
  overflow-y: scroll;
}

.zone_question::-webkit-scrollbar {
    width: 1em;
}

.zone_question::-webkit-scrollbar-thumb {
  background-color: #999;
  outline: 1px solid red;
  border-radius: 10px;
}
