/* ============================================
   FAQ SECTION
   Nécessite main.css (DESIGN SYSTEM - Variables CSS)
   - STYLES
	   .faq-section
	   .faq-title
	   .faq-accordion
	   .faq-item / .faq-item:hover
	   .faq-question / .faq-question:hover
	   .faq-icon
	   .faq-question[aria-expanded="true"] .faq-icon
	   .faq-answer / .faq-answer p
	   .faq-item.active .faq-answer
   - Code HTML
		<section class="faq-section">
			<h2 class="faq-title">Les questions que vous pourriez vous poser</h2>		
			<div class="faq-accordion">			
				<div class="faq-item">
					<button class="faq-question" aria-expanded="false">
						<span>Que propose Adapertus exactement ?</span>
						<svg class="faq-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
							<polyline points="6 9 12 15 18 9"></polyline>
						</svg>
					</button>
					<div class="faq-answer">
						<p>Adapertus vous accompagne dans votre transformation digitale en développant des solutions IA sur mesure adaptées à vos besoins spécifiques.</p>
					</div>
				</div>
			</div>
		</section>  
   ============================================ */

.faq-section {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-4);
    /* border-top: 1px solid var(--color-neutral-200); */
}

.faq-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.faq-item {
    background: white;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.faq-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
	cursor: no-drop;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5);
    background: none;
    border: none;
    cursor: help;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    text-align: left;
    transition: all var(--transition-base);
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-slow);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 var(--spacing-5) var(--spacing-5);
}

.faq-answer p {
    color: var(--color-neutral-600);
    line-height: 1.7;
    font-size: var(--font-size-base);
}