/*
Theme Name: Divi Child
Theme URI: https://fabien-seo.com
Description: Thème enfant de divi par Fabien SEO
Author: Fabien SCHNEIDER - Fabien SEO
Author URI: https://fabien-seo.com
Template: Divi
Version: 1.0
*/

/* FAQ DT4 DESIGN */
.dt4-faq-wrapper { max-width: 100%; margin: 20px auto; font-family: sans-serif; }
.dt4-item { background: #ffffff; border: 1px solid #e1e8f0; border-radius: 8px; margin-bottom: 12px; transition: all 0.3s ease; overflow: hidden; }
.dt4-item:hover { border-color: #1abc9c; box-shadow: 0 4px 12px rgba(30,89,168,0.1); }
.dt4-input { display: none; }
.dt4-header { padding: 18px 25px; background: #fff; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #0a2342; font-weight: 700; transition: background 0.3s; }
.dt4-header:after { content: '+'; color: #1abc9c; font-size: 22px; transition: transform 0.3s; }
.dt4-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); background: #fcfdfe; }
.dt4-inner { padding: 20px 25px; border-top: 1px solid #f0f4f8; color: #444; line-height: 1.7; }
.dt4-inner ul { margin: 10px 0; padding-left: 20px; }
.dt4-inner li { margin-bottom: 8px; list-style-type: none; position: relative; }
.dt4-inner li:before { content: '•'; color: #1abc9c; position: absolute; left: -15px; font-weight: bold; }
/* État ouvert */
.dt4-input:checked ~ .dt4-content { max-height: 1000px; transition: max-height 1s ease-in-out; }
.dt4-input:checked ~ .dt4-header { background: #f8fafc; color: #1e59a8; }
.dt4-input:checked ~ .dt4-header:after { transform: rotate(45deg); color: #1e59a8; }

.mouse-scroll {
  width: 26px;
  height: 42px;
  border: 2px solid #ffffff; /* Couleur blanche */
  border-radius: 15px;
  display: block;
  margin: 0 auto;
  position: relative;
}

.wheel {
  width: 4px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-anim 1.5s infinite; /* L'animation tourne en boucle */
}

@keyframes scroll-anim {
  0% {
    opacity: 1;
    top: 8px;
  }
  100% {
    opacity: 0;
    top: 25px; /* La molette descend */
  }
}