/*
 * SECTION DOMAINES (Accordéon)
 *
 * Section sur fond teal foncé avec un titre centré et un accordéon
 * dont les en-têtes sont vertes. Un seul item ouvert à la fois.
 *
 * États visuels :
 *   - fermé : header vert, pleinement arrondi (border-radius: 999px)
 *   - ouvert : header blanc avec texte vert, coins arrondis (radius-lg)
 */

.domains {
	background: var(--teal);
	color: var(--white);
	padding: 96px 0;
}

.domains h2 {
	color: var(--white);
	text-align: center;
	font-size: clamp(32px, 4vw, 48px);
}

.domains-lede {
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto 56px;
	line-height: 1.7;
}

/* === Accordéon === */
.accordion {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.accordion-item {
	border-radius: 999px;
	overflow: hidden;
	transition: border-radius .3s ease;
}

.accordion-item.open { border-radius: var(--radius-lg); }

.accordion-header {
	width: 100%;
	padding: 24px 32px;
	background: var(--green);
	color: var(--white);
	font-size: 17px;
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	gap: 24px;
	transition: background .2s ease;
}

.accordion-header:hover { background: var(--green-dark); }

.accordion-item.open .accordion-header {
	background: var(--white);
	color: var(--green);
	padding-bottom: 16px;
}

/* === Icônes (chevron / moins) === */
.accordion-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.accordion-icon-minus { display: none; }
.accordion-icon-chevron { display: block; }
.accordion-item.open .accordion-icon-minus { display: block; }
.accordion-item.open .accordion-icon-chevron { display: none; }

/* === Corps de l'accordéon === */
.accordion-body {
	max-height: 0;
	overflow: hidden;
	background: var(--white);
	color: var(--text-muted);
	transition: max-height .35s ease, padding .35s ease;
}

.accordion-item.open .accordion-body {
	max-height: 800px;
	padding: 0 32px 28px;
}

.accordion-body p {
	font-size: 15px;
	line-height: 1.7;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 968px) {
	.domains { padding: 64px 0; }
}

@media (max-width: 540px) {
	.accordion-header { padding: 18px 22px; font-size: 14px; gap: 16px; }
	.accordion-item.open .accordion-body { padding: 0 22px 22px; }
	.accordion-body p { font-size: 14px; }
}