/* Creatic FAQ — styles de base.
 * Tout est piloté par des variables CSS : les réglages d'admin (FAQ → Apparence)
 * les surchargent via un bloc <style> inline, un thème peut faire de même. */

.cfaq {
	/* Général */
	--cfaq-toolbar-gap: 1.5rem;
	--cfaq-focus: 2px solid currentColor;
	--cfaq-open-duration: 250ms; /* animation d'ouverture des réponses (faq.js) */

	/* Titre principal (h1) et introduction (options title / intro) */
	/* Par défaut, le h1 reprend couleur, police, taille et graisse des titres de catégorie. */
	--cfaq-header-title-color: var(--cfaq-group-title-color);
	--cfaq-header-title-font-family: var(--cfaq-group-title-font-family);
	--cfaq-header-title-size: var(--cfaq-group-title-size);
	--cfaq-header-title-weight: var(--cfaq-group-title-weight);
	--cfaq-header-intro-color: inherit;
	--cfaq-header-intro-font-family: inherit;
	--cfaq-header-intro-size: inherit;

	/* Titres de catégorie (affichage regroupé) */
	--cfaq-group-gap: 3rem;
	--cfaq-group-title-color: inherit;
	--cfaq-group-title-font-family: inherit;
	--cfaq-group-title-size: 1.5em;
	--cfaq-group-title-weight: 700;
	--cfaq-group-title-align: left;
	--cfaq-group-title-margin: 1.25rem;
	/* Sous-catégories : par défaut rendues exactement comme les catégories principales
	   (les réglages ci-dessus s'appliquent aux deux). Ces variables permettent de les
	   différencier si besoin — réglages « Apparence » ou surcharge du thème. */
	--cfaq-group-child-indent: 0px;                                 /* décalage par niveau */
	--cfaq-group-child-gap: var(--cfaq-group-gap);                  /* espace avant une sous-catégorie */
	--cfaq-group-child-title-size: var(--cfaq-group-title-size);

	/* Bloc question / réponse */
	--cfaq-item-gap: 0.75rem;
	--cfaq-item-radius: 0.5rem;
	--cfaq-item-border-width: 1px;
	--cfaq-item-border-color: color-mix(in srgb, currentColor 20%, transparent);
	--cfaq-item-shadow: none;

	/* Question */
	--cfaq-q-bg: transparent;
	--cfaq-q-bg-hover: var(--cfaq-q-bg);
	--cfaq-q-bg-open: var(--cfaq-q-bg);
	--cfaq-q-color: inherit;
	--cfaq-q-color-open: var(--cfaq-q-color);
	--cfaq-q-font-family: inherit;
	--cfaq-q-font-size: 1em;
	--cfaq-q-font-weight: 600;
	--cfaq-q-padding-y: 1rem;
	--cfaq-q-padding-top: var(--cfaq-q-padding-y);
	--cfaq-q-padding-bottom: var(--cfaq-q-padding-y);
	--cfaq-q-padding-x: 1.25rem;

	/* Réponse */
	--cfaq-a-bg: transparent;
	--cfaq-a-color: inherit;
	--cfaq-a-font-family: inherit;
	--cfaq-a-font-size: 1em;
	--cfaq-a-padding-y: 1rem;
	--cfaq-a-padding-top: calc(var(--cfaq-a-padding-y) / 2);
	--cfaq-a-padding-bottom: var(--cfaq-a-padding-y);
	--cfaq-a-padding-x: 1.25rem;

	/* Icône */
	--cfaq-icon-size: 1.25em;
	--cfaq-icon-color: currentColor;
	--cfaq-icon-order: 1;
	--cfaq-icon-transition: transform 0.2s ease;

	/* Filtres */
	--cfaq-filter-bg: color-mix(in srgb, currentColor 8%, transparent);
	--cfaq-filter-color: inherit;
	--cfaq-filter-border-color: transparent;
	--cfaq-filter-hover-bg: var(--cfaq-filter-bg);
	--cfaq-filter-hover-color: var(--cfaq-filter-color);
	--cfaq-filter-active-bg: var(--wp--preset--color--contrast, #1a1a1a);
	--cfaq-filter-active-color: var(--wp--preset--color--base, #fff);
	--cfaq-filter-active-border-color: var(--cfaq-filter-active-bg);
	--cfaq-filter-radius: 999px;
	--cfaq-filter-font-family: inherit;
	--cfaq-filter-font-size: 0.9em;
	--cfaq-filter-padding-y: 0.4em;
	--cfaq-filter-padding-x: 0.9em;
	--cfaq-filters-justify: flex-start;

	/* Éléments collants (barre d'ancres, titres en colonnes) : ils se collent sous le header
	   fixe / collant du thème et la barre d'admin, mesurés par faq.js (--cfaq-sticky-auto).
	   Le réglage « Décalage » (--cfaq-sticky-offset) force une valeur à la place. */
	--cfaq-sticky-top: var(--cfaq-sticky-offset, var(--cfaq-sticky-auto, 0px));

	/* Barre d'ancres */
	/* Fond de la barre : celui de la page (mesuré par faq.js), opaque pour masquer le contenu
	   qui défile dessous ; le réglage « Fond de la barre » le remplace. */
	--cfaq-anchors-bg: var(--cfaq-anchors-bg-auto, var(--wp--preset--color--base, #fff));
	--cfaq-anchors-border-color: color-mix(in srgb, currentColor 15%, transparent);
	--cfaq-anchors-color: inherit;
	--cfaq-anchors-hover-color: var(--cfaq-anchors-active-color);
	--cfaq-anchors-active-color: var(--wp--preset--color--primary, currentColor);
	--cfaq-anchors-indicator-color: var(--cfaq-anchors-active-color);
	--cfaq-anchors-indicator-size: 3px;     /* contraste RGAA 3.3 : couleur du soulignement ≥ 3:1 avec le fond */
	--cfaq-anchors-arrow-size: 1.75rem;     /* chevrons de défilement (souris) */
	--cfaq-anchors-arrow-bg: #fff;          /* rond derrière les chevrons */
	--cfaq-anchors-font-family: inherit;
	--cfaq-anchors-font-size: 0.95em;
	--cfaq-anchors-font-weight: 600;
	--cfaq-anchors-padding-y: 1.1rem;
	--cfaq-anchors-padding-x: clamp(0.75rem, 2vw, 1.25rem); /* resserré sur mobile */
	--cfaq-anchors-gap: clamp(0.5rem, 1.5vw, 1rem); /* espace minimal : les soulignements de deux liens voisins ne se touchent pas */
	--cfaq-anchors-justify: space-between;  /* liens répartis sur la largeur */
	--cfaq-anchors-bleed: 100vmax;          /* fond + trait bas sur toute la largeur de l'écran (0px = largeur de la FAQ) */

	/* Mise en page « Colonnes » */
	--cfaq-columns-title-width: 33%;
	--cfaq-columns-gap: 3rem;
	--cfaq-sticky-gap: 2rem;              /* espace entre la barre d'ancres (ou le header) et un titre collé / une section atteinte */

}

.cfaq *,
.cfaq *::before,
.cfaq *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Barre d'outils
 * ------------------------------------------------------------------------ */

.cfaq-toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: var(--cfaq-toolbar-gap);
}

.cfaq-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--cfaq-filters-justify);
	gap: 0.375rem;
}

.cfaq-filter {
	display: inline-flex;
	align-items: center;
	padding: var(--cfaq-filter-padding-y) var(--cfaq-filter-padding-x);
	font: inherit;
	font-family: var(--cfaq-filter-font-family);
	font-size: var(--cfaq-filter-font-size);
	line-height: 1;
	color: var(--cfaq-filter-color);
	background: var(--cfaq-filter-bg);
	border: 1px solid var(--cfaq-filter-border-color);
	border-radius: var(--cfaq-filter-radius);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cfaq-filter:hover {
	color: var(--cfaq-filter-hover-color);
	background: var(--cfaq-filter-hover-bg);
}

.cfaq-filter:focus-visible {
	outline: var(--cfaq-focus);
	outline-offset: 2px;
}

.cfaq-filter.is-active,
.cfaq-filter.is-active:hover {
	color: var(--cfaq-filter-active-color);
	background: var(--cfaq-filter-active-bg);
	border-color: var(--cfaq-filter-active-border-color);
}

/* ---------------------------------------------------------------------------
 * Barre d'ancres (navigation « Ancres »)
 * ------------------------------------------------------------------------ */

.cfaq-anchors {
	position: sticky;
	top: var(--cfaq-sticky-top);
	z-index: 20; /* sous le header du thème, au-dessus du contenu */
	margin-bottom: var(--cfaq-group-gap);
	background: var(--cfaq-anchors-bg);
	/* Pleine largeur d'écran sans débordement horizontal : le fond est prolongé par une ombre et
	   le trait bas par border-image-outset (ni l'un ni l'autre ne crée de barre de défilement),
	   clip-path coupe l'ombre en haut et en bas. */
	border-bottom: 1px solid var(--cfaq-anchors-border-color);
	border-image: linear-gradient(var(--cfaq-anchors-border-color), var(--cfaq-anchors-border-color)) 0 0 1 / 0 0 1px / 0 var(--cfaq-anchors-bleed);
	box-shadow: 0 0 0 var(--cfaq-anchors-bleed) var(--cfaq-anchors-bg);
	clip-path: inset(0 calc(-1 * var(--cfaq-anchors-bleed)));
}

/* Défilement horizontal (doigt, molette, clavier) quand les liens ne tiennent pas. */
.cfaq-anchors__list {
	position: relative;
	display: flex;
	justify-content: var(--cfaq-anchors-justify);
	gap: var(--cfaq-anchors-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.cfaq-anchors__list::-webkit-scrollbar {
	display: none;
}

.cfaq-anchors__list > li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* États du lien neutralisés (couleur « visité / cliqué », contour, bordure, surbrillance au
   toucher du thème) : seul le soulignement signale le lien actif — et le focus clavier, atténué. */
.cfaq .cfaq-anchor,
.cfaq .cfaq-anchor:visited,
.cfaq .cfaq-anchor:focus,
.cfaq .cfaq-anchor:focus-visible,
.cfaq .cfaq-anchor:active {
	display: block;
	padding: var(--cfaq-anchors-padding-y) var(--cfaq-anchors-padding-x);
	font-family: var(--cfaq-anchors-font-family);
	font-size: var(--cfaq-anchors-font-size);
	font-weight: var(--cfaq-anchors-font-weight);
	line-height: 1.2;
	white-space: nowrap;
	color: var(--cfaq-anchors-color);
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: inset 0 calc(-1 * var(--cfaq-anchors-indicator-size)) 0 transparent;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.15s, box-shadow 0.15s;
}

.cfaq .cfaq-anchor:focus-visible {
	box-shadow: inset 0 calc(-1 * var(--cfaq-anchors-indicator-size)) 0 color-mix(in srgb, var(--cfaq-anchors-indicator-color) 35%, transparent);
}

@media (hover: hover) {
	.cfaq .cfaq-anchor:hover {
		color: var(--cfaq-anchors-hover-color);
		box-shadow: inset 0 calc(-1 * var(--cfaq-anchors-indicator-size)) 0 var(--cfaq-anchors-indicator-color);
	}
}

.cfaq .cfaq-anchor.is-active {
	color: var(--cfaq-anchors-active-color);
	box-shadow: inset 0 calc(-1 * var(--cfaq-anchors-indicator-size)) 0 var(--cfaq-anchors-indicator-color);
}

/* Suit le header quand il se réduit ou se masque au défilement. */
.cfaq-anchors,
.cfaq--layout-columns .cfaq-groups > .cfaq-group > .cfaq-group__title {
	transition: top 0.2s ease;
}

/* Liens qui dépassent (mobile) : fondu sur le bord pour indiquer qu'on peut faire défiler. */
.cfaq-anchors.has-more-end .cfaq-anchors__list {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

.cfaq-anchors.has-more-start .cfaq-anchors__list {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}

.cfaq-anchors.has-more-start.has-more-end .cfaq-anchors__list {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

/* Chevrons de défilement : appareils à souris uniquement, visibles s'il reste des liens de ce
   côté. Simple chevron posé sur le fondu du bord de la barre (pas de bouton visible). */
.cfaq-anchors__arrow {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.cfaq .cfaq-anchors__arrow {
		position: absolute;
		top: 0;
		bottom: 1px;
		z-index: 1;
		display: flex;
		align-items: center;
		width: calc(var(--cfaq-anchors-arrow-size) * 1.4 + 3rem); /* rond + fondu */
		margin: 0;
		padding: 0;
		color: var(--cfaq-anchors-color);
		background: none;
		border: 0;
		border-radius: 0;
		outline: none;
		box-shadow: none;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s, visibility 0.15s, color 0.15s;
		-webkit-tap-highlight-color: transparent;
	}

	/* Chevron dans un rond (lisible au-dessus des liens qui défilent dessous). */
	.cfaq .cfaq-anchors__arrow svg {
		box-sizing: content-box;
		width: var(--cfaq-anchors-arrow-size);
		height: var(--cfaq-anchors-arrow-size);
		padding: calc(var(--cfaq-anchors-arrow-size) * 0.2);
		background: var(--cfaq-anchors-arrow-bg);
		border-radius: 50%;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}

	.cfaq .cfaq-anchors__arrow:hover {
		color: var(--cfaq-anchors-hover-color);
	}

	/* Fondu sous le chevron : les liens s'effacent progressivement au lieu d'être coupés net. */
	.cfaq .cfaq-anchors__arrow--prev,
	.cfaq .cfaq-anchors__arrow--prev:hover {
		left: 0;
		justify-content: flex-start;
		background: linear-gradient(to right, var(--cfaq-anchors-bg) 45%, transparent);
	}

	.cfaq .cfaq-anchors__arrow--next,
	.cfaq .cfaq-anchors__arrow--next:hover {
		right: 0;
		justify-content: flex-end;
		background: linear-gradient(to left, var(--cfaq-anchors-bg) 45%, transparent);
	}

	.cfaq .cfaq-anchors.has-more-start .cfaq-anchors__arrow--prev,
	.cfaq .cfaq-anchors.has-more-end .cfaq-anchors__arrow--next {
		opacity: 1;
		visibility: visible;
	}
}

/* Un clic sur une ancre amène la section sous la barre, pas derrière. */
.cfaq--nav-anchors .cfaq-group {
	scroll-margin-top: calc(var(--cfaq-sticky-top) + var(--cfaq-anchors-height, 3.5rem) + var(--cfaq-sticky-gap));
}

/* ---------------------------------------------------------------------------
 * Liste
 * ------------------------------------------------------------------------ */

.cfaq-list {
	display: flex;
	flex-direction: column;
	gap: var(--cfaq-item-gap);
}

/* Affichage regroupé par catégorie */
.cfaq-groups {
	display: flex;
	flex-direction: column;
	gap: var(--cfaq-group-gap);
}

/* Sous-catégories : mêmes titres et mêmes espacements que les catégories, sauf si les
   variables --cfaq-group-child-* sont personnalisées (retrait, espace, taille du titre). */
.cfaq-group {
	padding-inline-start: calc(var(--cfaq-level, 0) * var(--cfaq-group-child-indent));
}

/* Sous-catégorie : rendue dans la section parente, après les questions du parent. */
.cfaq-group--child {
	margin-top: var(--cfaq-group-child-gap);
}

.cfaq-group--child > .cfaq-group__title {
	font-size: var(--cfaq-group-child-title-size);
}

.cfaq-group__title {
	margin: 0 0 var(--cfaq-group-title-margin);
	color: var(--cfaq-group-title-color);
	font-family: var(--cfaq-group-title-font-family);
	font-size: var(--cfaq-group-title-size);
	font-weight: var(--cfaq-group-title-weight);
	text-align: var(--cfaq-group-title-align);
	line-height: 1.25;
}

.cfaq-item {
	border: var(--cfaq-item-border-width) solid var(--cfaq-item-border-color);
	border-radius: var(--cfaq-item-radius);
	box-shadow: var(--cfaq-item-shadow);
	overflow: hidden;
}

.cfaq-item__question {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: var(--cfaq-q-padding-top) var(--cfaq-q-padding-x) var(--cfaq-q-padding-bottom);
	font-family: var(--cfaq-q-font-family);
	font-size: var(--cfaq-q-font-size);
	font-weight: var(--cfaq-q-font-weight);
	color: var(--cfaq-q-color);
	background: var(--cfaq-q-bg);
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s, color 0.15s;
}

.cfaq-item__question::-webkit-details-marker {
	display: none;
}

.cfaq-item[open] > .cfaq-item__question {
	color: var(--cfaq-q-color-open);
	background: var(--cfaq-q-bg-open);
}

.cfaq-item__question:hover {
	background: var(--cfaq-q-bg-hover);
}

.cfaq-item__question:focus-visible {
	outline: var(--cfaq-focus);
	outline-offset: -2px;
}

.cfaq-item__title {
	flex: 1 1 auto;
	min-width: 0;
}

/* En-tête : titre <h1> + introduction (titres de catégorie en <h2>, questions en <h3>). */
.cfaq-header {
	margin-bottom: var(--cfaq-group-gap);
}

.cfaq-header__title {
	margin: 0 0 1rem;
	color: var(--cfaq-header-title-color);
	font-family: var(--cfaq-header-title-font-family);
	font-size: var(--cfaq-header-title-size);
	font-weight: var(--cfaq-header-title-weight);
	line-height: 1.2;
}

.cfaq-header__intro {
	color: var(--cfaq-header-intro-color);
	font-family: var(--cfaq-header-intro-font-family);
	font-size: var(--cfaq-header-intro-size);
}

.cfaq-header__intro > * {
	color: inherit;
	font-family: inherit;
}

.cfaq-header__intro > :last-child {
	margin-bottom: 0;
}

/* La question est un <h3> (SEO) : neutralise les styles de titre du thème. */
.cfaq .cfaq-item__title {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* Icône */
.cfaq-item__icon {
	flex: 0 0 auto;
	order: var(--cfaq-icon-order);
	display: inline-flex;
	width: var(--cfaq-icon-size);
	height: var(--cfaq-icon-size);
	color: var(--cfaq-icon-color);
}

.cfaq-item__icon-closed,
.cfaq-item__icon-open {
	display: block;
	width: 100%;
	height: 100%;
}

.cfaq-item__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cfaq-item__icon--rotate .cfaq-item__icon-closed {
	transition: var(--cfaq-icon-transition);
}

.cfaq-item[open] > .cfaq-item__question .cfaq-item__icon--rotate .cfaq-item__icon-closed {
	transform: rotate(180deg);
}

.cfaq-item__icon--swap .cfaq-item__icon-open {
	display: none;
}

.cfaq-item[open] > .cfaq-item__question .cfaq-item__icon--swap .cfaq-item__icon-closed {
	display: none;
}

.cfaq-item[open] > .cfaq-item__question .cfaq-item__icon--swap .cfaq-item__icon-open {
	display: block;
}

/* Réponse */
.cfaq-item__answer {
	padding: var(--cfaq-a-padding-top) var(--cfaq-a-padding-x) var(--cfaq-a-padding-bottom);
	font-family: var(--cfaq-a-font-family);
	font-size: var(--cfaq-a-font-size);
	color: var(--cfaq-a-color);
	background: var(--cfaq-a-bg);
}

.cfaq-item__answer > :first-child {
	margin-top: 0;
}

.cfaq-item__answer > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Mise en page « Colonnes » : titre de catégorie à gauche (collant), questions à droite.
 * Sous 768px (tablette portrait, mobile), retour à l'empilement titre → questions.
 * ------------------------------------------------------------------------ */

/* Titres alignés à gauche en colonnes (et une fois empilés sur mobile), quel que soit le réglage
   « Alignement », conçu pour la mise en page Liste. */
.cfaq--layout-columns .cfaq-group__title {
	text-align: start;
}

@media (min-width: 768px) {
	.cfaq--layout-columns .cfaq-groups > .cfaq-group {
		display: grid;
		grid-template-columns: minmax(0, var(--cfaq-columns-title-width)) minmax(0, 1fr);
		column-gap: var(--cfaq-columns-gap);
		align-items: start;
		padding-inline-start: 0;
	}

	/* Titre de catégorie collé pendant toute la lecture de la section, sous-catégories comprises
	   (elles sont dans la colonne de droite, sous les questions du parent, avec leur propre titre). */
	.cfaq--layout-columns .cfaq-groups > .cfaq-group > .cfaq-group__title {
		position: sticky;
		top: calc(var(--cfaq-sticky-top) + var(--cfaq-anchors-height, 0px) + var(--cfaq-sticky-gap));
		margin: 0;
	}

	.cfaq--layout-columns .cfaq-group--child {
		padding-inline-start: 0;
	}
}

/* ---------------------------------------------------------------------------
 * États
 * ------------------------------------------------------------------------ */

.cfaq-item[hidden] {
	display: none;
}

.cfaq .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cfaq-filter,
	.cfaq-anchor,
	.cfaq-item__question,
	.cfaq-item__icon--rotate .cfaq-item__icon-closed {
		transition: none;
	}
}