/* Bloc cnd/faq — enveloppe de la liste de questions. L'accordéon lui-même (.cnd-accordion-*)
   est un composant de base partagé (canidelite-design-system.css), réutilisable hors FAQ.
   Racine scopée .cnd.cnd-faq (correctif post-QA). */
.cnd.cnd-faq {
	display: flex;
	flex-direction: column;
	/* Largeur validée (décision Emmanuel, 2026-10-14) : 760px est la valeur de référence du
	   composant FAQ, cohérente avec la règle du design system (colonne de lecture ~65 caractères).
	   Aucune maquette FAQ trouvée dans l'échantillon disponible pour la confirmer visuellement,
	   mais ce n'est plus un défaut provisoire — c'est la référence du bloc. Item blanc bordé +
	   déclencheur transparent pleine largeur déjà conformes via .cnd-accordion-item/
	   .cnd-accordion-trigger (canidelite-design-system.css). */
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Deux colonnes (v0.5.0, maquette ACACED) : piles indépendantes, pleine largeur. ---------- */
.cnd.cnd-faq.cnd-faq--2-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 0 var(--s-4);
	max-width: none;
}
@media (max-width: 767px) {
	.cnd.cnd-faq.cnd-faq--2-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}
.cnd.cnd-faq .cnd-faq__col {
	min-width: 0;
}
/* Question ouverte : bordure de l'univers (maquette). */
.cnd.cnd-faq .cnd-accordion-item:has(> .cnd-accordion-trigger[aria-expanded="true"]) {
	border-color: var(--brand-border);
}

/* Section titrée (v0.13.0, centre d'aide) : titre et lien « Voir aussi » dans l'univers du bloc. */
.cnd.cnd-faq-section { margin: 0; }
.cnd.cnd-faq-section h2.cnd-faq-section__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-h2);
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 var(--s-4);
}
.cnd.cnd-faq-section .cnd-faq-section__more { margin: var(--s-4) 0 0; }
.cnd.cnd-faq-section .cnd.cnd-faq { margin-left: 0; margin-right: 0; }

/* Recherche (v0.13.1) : sans JavaScript, absente (classe cnd-js posée dans <head>, aucun décalage). */
html:not(.cnd-js) .cnd.cnd-faq-search { display: none; }
.cnd.cnd-faq-search {
	max-width: 640px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.cnd.cnd-faq-search label.cnd-faq-search__label {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-h3);
	line-height: 1.2;
	color: var(--ink);
	margin: 0;
}
.cnd.cnd-faq-search .cnd-faq-search__hint,
.cnd.cnd-faq-search .cnd-faq-search__words-label {
	font-family: var(--font-body);
	font-size: var(--t-small);
	color: var(--ink-3);
	margin: 0;
}
.cnd.cnd-faq-search input.cnd-faq-search__input { width: 100%; }
.cnd.cnd-faq-search .cnd-faq-search__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-1);
}
.cnd.cnd-faq-search button.cnd-filter-pill {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--t-small);
	line-height: 1.2;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	padding: 6px 12px;
	margin: 0;
	cursor: pointer;
}
.cnd.cnd-faq-search button.cnd-filter-pill:hover { border-color: var(--brand-border); }
.cnd.cnd-faq-search button.cnd-filter-pill:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
/* Ligne de statut réservée : le compteur apparaît sans décaler la page. */
.cnd.cnd-faq-search .cnd-faq-search__status {
	min-height: 1.5em;
	font-family: var(--font-body);
	font-size: var(--t-small);
	color: var(--ink-2);
	margin: 0;
}
.cnd.cnd-faq-search .cnd-faq-search__empty {
	font-family: var(--font-body);
	font-size: var(--t-body);
	color: var(--ink);
	margin: 0;
}
.cnd.cnd-faq-search .cnd-faq-search__empty[hidden] { display: none; }
/* Entrées et sections masquées par la recherche (attribut hidden). */
.cnd .cnd-accordion-item[hidden],
.cnd.cnd-faq[hidden],
.cnd.cnd-faq-section[hidden] { display: none; }

/* ---------- Section FAQ « titre à gauche » (v0.23.0, maquettes Éducation, Sport, ACACED,
   éducateur) : un groupe qui pose un titre puis le bloc FAQ dispose le titre à gauche (260 à
   360 px) et l'accordéon, sur une colonne, à droite. Flex replié comme la maquette : sous ~790 px
   de large, le titre repasse au-dessus, sans media query. Les sections FAQ titrées par le bloc
   lui-même (centre d'aide) gardent leur disposition. ---------- */
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group:has(> .wp-block-heading + .cnd.cnd-faq) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--s-6);
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group:has(> .wp-block-heading + .cnd.cnd-faq) > :not(.cnd-faq) {
	flex: 1 1 260px;
	min-width: 0;
	max-width: 360px;
	margin: 0;
}
:is(body.cnd-site .cnd-site-main, .editor-styles-wrapper) .wp-block-group:has(> .wp-block-heading + .cnd.cnd-faq) > .cnd.cnd-faq {
	flex: 2 1 460px;
	min-width: 0;
	max-width: none;
	margin: 0;
}