/**
 * SPD FAQ — Homepage « FAQ & Aide Commande »
 * =============================================
 * Phase 3h component styles. Reproduces the React "FAQ Compacte
 * (3-4 Questions Indispensables)" section (HomePage.tsx, section 6.3)
 * using the centralized SPD design-system tokens for typography /
 * radius / shadow, with React-reference-exact brand colors scoped to
 * .spd-faq only (the global SPD tokens are untouched).
 *
 * The React site is the visual source of truth.
 *
 * Loaded after spd-testimonials.css.
 */

.spd-faq {
	/* Section-scoped brand colors — reference the centralized UI tokens
	   (defined in spd-design-system.css) so the validated React values
	   live in one place. */
	--spd-faq-blue:    var(--spd-ui-blue); /* eyebrow, CTA link, open chevron, hover question */
	--spd-faq-blue-50: var(--spd-ui-blue-soft); /* (reserved — not used in the compact section) */

	/* Neutrals (Tailwind slate scale, raw values). */
	--spd-faq-slate-50:   #F8FAFC;
	--spd-faq-slate-100: #F1F5F9;
	--spd-faq-slate-200: #E2E8F0;
	--spd-faq-slate-400: #94A3B8;
	--spd-faq-slate-500: #64748B;
	--spd-faq-slate-600: #475569;
	--spd-faq-slate-800: #1E293B;
	--spd-faq-slate-900: #0F172A;

	/* py-10 | bg-slate-50/60 (slate-50 at 60% opacity over the page bg).
	   The page background is white, so slate-50/60 ≈ #FAFBFC. */
	padding-top: 40px;    /* py-10 → 2.5rem */
	padding-bottom: 40px;
	background-color: rgba(248, 250, 252, 0.60); /* bg-slate-50/60 */
}

/* React uses `max-w-4xl mx-auto px-4 sm:px-6` (max-w-4xl = 56rem = 896px).
   The default .spd-container max-width is 1280px; scope a narrower max-width
   inside .spd-faq so the accordion matches the React centered column. */
.spd-faq .spd-container {
	max-width: 896px; /* max-w-4xl → 56rem */
}

@media (min-width: 1024px) {
	.spd-faq .spd-container {
		padding-left: 24px;  /* sm:px-6 → 1.5rem */
		padding-right: 24px;
	}
}

/* ============================================================
   1. Header — text-center mb-6
   ============================================================ */
.spd-faq__header {
	text-align: center; /* text-center */
	margin-bottom: 24px; /* mb-6 → 1.5rem */
}

/* Eyebrow — text-[11px] font-black uppercase tracking-wider text-[#0F5B94] */
.spd-faq__eyebrow {
	display: block;
	font-size: 11px; /* text-[11px] */
	font-weight: var(--spd-font-weight-black); /* font-black → 900 */
	text-transform: uppercase;
	letter-spacing: 0.05em; /* tracking-wider */
	color: var(--spd-faq-blue); /* text-[#0F5B94] */
}

/* Title — text-xl sm:text-2xl font-black text-slate-900 tracking-tight mt-0.5.
   Color set explicitly because Astra's global `h2` rule (element
   selector) would otherwise override the inherited color. */
.spd-faq__title {
	margin: 0;
	margin-top: 2px; /* mt-0.5 → 0.125rem */
	font-size: var(--spd-font-size-xl); /* text-xl → 1.25rem (20px) */
	font-weight: var(--spd-font-weight-black); /* font-black → 900 */
	line-height: 1.2;
	letter-spacing: var(--spd-tracking-tight); /* tracking-tight */
	color: var(--spd-faq-slate-900); /* text-slate-900 */
}

@media (min-width: 640px) {
	.spd-faq__title {
		font-size: var(--spd-font-size-2xl); /* sm:text-2xl → 1.5rem (24px) */
	}
}

/* ============================================================
   2. Accordion list — space-y-3
   ============================================================ */
.spd-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px; /* space-y-3 → 0.75rem */
}

/* ============================================================
   3. Item — bg-white rounded-2xl border border-slate-200
   overflow-hidden shadow-2xs transition-all
   ============================================================ */
.spd-faq__item {
	background-color: #FFFFFF; /* bg-white */
	border: 1px solid var(--spd-faq-slate-200); /* border border-slate-200 */
	border-radius: var(--spd-radius-xl); /* rounded-2xl → 16px */
	overflow: hidden; /* overflow-hidden (clips the open panel radius) */
	/* shadow-2xs — Tailwind's smallest shadow, very subtle. */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
	transition: box-shadow var(--spd-transition-fast), border-color var(--spd-transition-fast);
}

.spd-faq__item.is-open {
	/* Slightly stronger border/shadow when open to echo the React
	   "transition-all" lift, while staying faithful to the subtle look. */
	border-color: var(--spd-faq-slate-200);
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
}

/* ============================================================
   4. Trigger button — w-full text-left px-5 py-4 flex items-center
   justify-between gap-4 font-bold text-xs sm:text-sm text-slate-800
   hover:text-[#0F5B94] transition-colors cursor-pointer
   ============================================================ */
.spd-faq__trigger {
	display: flex;
	width: 100%;
	align-items: center; /* items-center */
	justify-content: space-between; /* justify-between */
	gap: 16px; /* gap-4 → 1rem */
	padding: 16px 20px; /* px-5 py-4 → 1.25rem 1rem */
	border: 0;
	background: none;
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.4;
	text-align: left; /* text-left */
	color: var(--spd-faq-slate-800); /* text-slate-800 */
	cursor: pointer; /* cursor-pointer */
	transition: color var(--spd-transition-fast), background-color var(--spd-transition-fast); /* transition-colors */
}

@media (min-width: 640px) {
	.spd-faq__trigger {
		font-size: var(--spd-font-size-sm); /* sm:text-sm → 14px */
	}
}

/* Hover : fond bleu SPD + texte blanc (surcharge demandée du React qui ne
   faisait que passer le texte au bleu). Le chevron suit la couleur du
   texte via currentColor. */
.spd-faq__trigger:hover {
	color: #FFFFFF; /* texte blanc */
	background-color: var(--spd-faq-blue); /* fond bleu SPD */
}

.spd-faq__trigger:focus-visible {
	outline: none;
	box-shadow: var(--spd-focus-ring);
	border-radius: var(--spd-radius-sm);
}

/* Question text — wraps naturally, takes the available space. */
.spd-faq__question {
	flex: 1 1 auto;
	min-width: 0;
}

/* Chevron — ChevronDown size={17} text-slate-400 shrink-0
   transition-transform duration-200; rotate-180 + text-[#0F5B94] when open. */
.spd-faq__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* shrink-0 */
	color: var(--spd-faq-slate-400); /* text-slate-400 */
	transition: transform 200ms ease, color var(--spd-transition-fast); /* transition-transform duration-200 */
}

.spd-faq__chevron .spd-icon {
	width: 17px; /* ChevronDown size={17} */
	height: 17px;
}

.spd-faq__item.is-open .spd-faq__chevron {
	transform: rotate(180deg); /* rotate-180 */
	color: var(--spd-faq-blue); /* text-[#0F5B94] */
}

/* Au hover du trigger, le chevron devient blanc (suit le texte blanc
   sur fond bleu). Prime sur la couleur slate-400 par spécificité. */
.spd-faq__trigger:hover .spd-faq__chevron {
	color: #FFFFFF;
}

/* ============================================================
   5. Answer panel — px-5 pb-4 text-xs sm:text-sm text-slate-600
   leading-relaxed border-t border-slate-100 pt-3
   ============================================================ */
.spd-faq__panel {
	border-top: 1px solid var(--spd-faq-slate-100); /* border-t border-slate-100 */
}

/* React uses `animate-in fade-in duration-150` on the open panel. We
   reproduce a subtle fade-in when the panel becomes visible (the `hidden`
   attribute is removed by JS / the server markup for the first item).
   The animation only plays on open, matching the React mount behavior. */
@keyframes spd-faq-fade-in {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}

.spd-faq__item.is-open .spd-faq__panel {
	animation: spd-faq-fade-in 150ms ease;
}

.spd-faq__answer {
	padding: 12px 20px 16px; /* pt-3 px-5 pb-4 → 0.75rem 1.25rem 1rem */
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	line-height: var(--spd-line-height-relaxed); /* leading-relaxed → 1.625 */
	color: var(--spd-faq-slate-600); /* text-slate-600 */
}

@media (min-width: 640px) {
	.spd-faq__answer {
		font-size: var(--spd-font-size-sm); /* sm:text-sm → 14px */
	}
}

/* The answer comes from the WordPress editor (the_content). Reset
   paragraph margins so the panel matches the React single-block text. */
.spd-faq__answer > *:first-child {
	margin-top: 0;
}
.spd-faq__answer > *:last-child {
	margin-bottom: 0;
}
.spd-faq__answer p {
	margin: 0 0 8px;
}
.spd-faq__answer p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   6. CTA — text-center mt-5; text-xs font-bold text-[#0F5B94]
   hover:underline inline-flex items-center gap-1
   ============================================================ */
.spd-faq__cta-wrap {
	text-align: center; /* text-center */
	margin-top: 20px; /* mt-5 → 1.25rem */
}

.spd-faq__cta {
	display: inline-flex; /* inline-flex */
	align-items: center; /* items-center */
	gap: 4px; /* gap-1 → 0.25rem */
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.25;
	text-decoration: none;
	color: var(--spd-faq-blue); /* text-[#0F5B94] */
	transition: color var(--spd-transition-fast);
}

.spd-faq__cta:hover,
.spd-faq__cta:focus {
	text-decoration: underline; /* hover:underline */
	color: var(--spd-faq-blue);
}

.spd-faq__cta .spd-icon {
	width: 13px; /* ArrowRight size={13} */
	height: 13px;
	flex-shrink: 0;
}

.spd-faq__cta:focus-visible {
	outline: none;
	box-shadow: var(--spd-focus-ring);
	border-radius: var(--spd-radius-sm);
}

/* ============================================================
   7. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.spd-faq__trigger,
	.spd-faq__chevron,
	.spd-faq__cta,
	.spd-faq__item {
		transition: none;
	}
	.spd-faq__item.is-open .spd-faq__panel {
		animation: none;
	}
}