.faq {
background: #ffffff;
border-radius: 20px;
margin: 20px 0;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
border: 1px solid #d4e8cc;
overflow: hidden;
}
.faq:hover {
box-shadow: 0 12px 22px -12px rgba(85, 130, 65, 0.18);
border-color: #aed49b;
}
.faq-question,
.faq-question h3 {
font-weight: 600;
font-size: 16px;
margin: 0;
padding: 10px 10px;
background: #fefef9;
color: #1f4020;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
user-select: none;
transition: background 0.2s;
border-left: 4px solid transparent;
}
.faq-question:hover,
.faq-question:hover h3 {
background: #f6fef2;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
background: #ffffff;
border-top: none;
}
.faq-answer.expanded {
max-height: 600px;
}
.faq-answer p {
font-size: 16px;
color: #2a3b27;
background: #ffffff;
margin: 0;
padding: 8px 24px 24px 24px;
border-top: 1px solid #e8f3e2;
}
.faq-answer p::before {
content: "R\E9ponse";
font-weight: 600;
color: #548c42;
font-size: 16px;
letter-spacing: 0.2px;
background: #edf8e7;
padding: 3px 12px;
border-radius: 30px;
margin-right: 10px;
margin-bottom: 8px;
border: 0.5px solid #cde2c2;
}
.faq-answer p::after {
content: "";
display: block;
width: 42px;
height: 2px;
background: #cde5c2;
margin-top: 16px;
border-radius: 4px;
}
@keyframes fadeAnswer {
0% {
opacity: 0;
transform: translateY(-6px);
}
100% {
opacity: 1;
 transform: translateY(0);
 }
}
.faq-answer.expanded p {
animation: fadeAnswer 0.25s ease-out forwards;
}