/* ==========================================================================
   IA FAQ — feuille de style (namespace .iaf-)
   ADN « galerie prompts » : sombre, fluide.
   Mise en page deux colonnes (barre latérale de thèmes + contenu) sur desktop,
   une seule colonne sur mobile. Variables en haut → recoloration facile.
   ========================================================================== */

.iaf-faq {
	--iaf-bg:        #10131a;
	--iaf-surface:   #171b24;
	--iaf-surface-2: #1e2430;
	--iaf-border:    #2a3140;
	--iaf-text:      #e7ebf2;
	--iaf-muted:     #9aa4b6;
	--iaf-accent:    #8b7bff;
	--iaf-accent-st: rgba(139, 123, 255, 0.16);
	--iaf-radius:    14px;

	box-sizing: border-box !important;
	max-width: 1120px;
	margin: 0 auto !important;
	padding: 26px !important;
	background: var(--iaf-bg) !important;
	border: 1px solid var(--iaf-border) !important;
	border-radius: 20px !important;
	color: var(--iaf-text) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: 1.6;
}
.iaf-faq *, .iaf-faq *::before, .iaf-faq *::after { box-sizing: border-box; }

/* --- Structure deux colonnes --------------------------------------------- */
.iaf-shell {
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

/* --- Barre latérale des thèmes ------------------------------------------- */
.iaf-side {
	display: flex;
	flex-direction: column;
	gap: 3px;
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding-right: 4px;
}
.iaf-side-label {
	margin: 2px 10px 6px !important;
	color: var(--iaf-muted) !important;
	font-size: 12px !important;
	letter-spacing: .04em;
}
.iaf-nav {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 9px 12px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	text-align: left !important;
	color: var(--iaf-muted) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	cursor: pointer;
	transition: all .15s ease;
}
.iaf-nav:hover { background: var(--iaf-surface) !important; color: var(--iaf-text) !important; }
.iaf-nav.is-active {
	background: var(--iaf-accent-st) !important;
	border-color: var(--iaf-accent) !important;
	color: #c9c2ff !important;
}

/* --- Colonne de contenu -------------------------------------------------- */
.iaf-main { min-width: 0; }

.iaf-search { position: relative; margin-bottom: 16px; }
.iaf-search-ico {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	color: var(--iaf-muted); display: flex;
}
.iaf-search-input {
	width: 100% !important; margin: 0 !important;
	padding: 14px 16px 14px 46px !important;
	background: var(--iaf-surface) !important;
	border: 1px solid var(--iaf-border) !important;
	border-radius: 12px !important;
	color: var(--iaf-text) !important;
	font-size: 16px !important; line-height: 1.4 !important;
	outline: none !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.iaf-search-input::placeholder { color: var(--iaf-muted) !important; }
.iaf-search-input:focus {
	border-color: var(--iaf-accent) !important;
	box-shadow: 0 0 0 3px var(--iaf-accent-st) !important;
}

.iaf-count { margin: 0 0 14px !important; color: var(--iaf-muted) !important; font-size: 13px !important; }
.iaf-count-n { color: var(--iaf-text) !important; font-weight: 600; }

/* --- Groupes par thème --------------------------------------------------- */
.iaf-list { display: flex; flex-direction: column; gap: 22px; }
.iaf-group { display: flex; flex-direction: column; gap: 10px; }
.iaf-group-title {
	margin: 0 0 2px !important;
	padding: 0 !important;
	color: var(--iaf-muted) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* --- Items / questions --------------------------------------------------- */
.iaf-item {
	background: var(--iaf-surface) !important;
	border: 1px solid var(--iaf-border) !important;
	border-radius: var(--iaf-radius) !important;
	overflow: hidden;
	transition: border-color .16s ease, background .16s ease;
}
.iaf-item:hover { border-color: #3a4252 !important; }
.iaf-item.is-open { background: var(--iaf-surface-2) !important; border-color: var(--iaf-accent) !important; }

.iaf-q {
	display: flex !important; align-items: center; gap: 14px;
	width: 100% !important; margin: 0 !important; padding: 16px 18px !important;
	background: transparent !important; border: none !important; border-radius: 0 !important;
	box-shadow: none !important; text-align: left !important;
	color: var(--iaf-text) !important; font-size: 16px !important; font-weight: 600 !important;
	line-height: 1.45 !important; cursor: pointer;
}
.iaf-q-text { flex: 1; }
.iaf-q .iaf-chev { flex: 0 0 auto; color: var(--iaf-muted); transition: transform .25s ease, color .16s ease; }
.iaf-item.is-open .iaf-q .iaf-chev { transform: rotate(180deg); color: var(--iaf-accent); }

.iaf-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.iaf-item.is-open .iaf-panel { grid-template-rows: 1fr; }
.iaf-panel-inner { overflow: hidden; padding: 0 18px; }
.iaf-item.is-open .iaf-panel-inner { padding-bottom: 18px; }

.iaf-tag {
	display: inline-block; margin-bottom: 10px; padding: 4px 11px;
	background: var(--iaf-bg) !important; border: 1px solid var(--iaf-border);
	border-radius: 999px; color: var(--iaf-muted) !important; font-size: 12px; font-weight: 500;
}

/* Réponses — alignement forcé à GAUCHE (uniforme, peu importe le thème) */
.iaf-answer { color: #cdd4e0 !important; font-size: 15.5px; text-align: left !important; }
.iaf-answer p { margin: 0 0 12px !important; line-height: 1.7 !important; text-align: left !important; }
.iaf-answer p:last-child { margin-bottom: 0 !important; }
.iaf-answer a { color: var(--iaf-accent) !important; text-decoration: underline; }
.iaf-answer strong { color: var(--iaf-text) !important; }
.iaf-answer ul { margin: 0 0 12px !important; padding-left: 20px !important; text-align: left !important; }
.iaf-answer li { margin: 4px 0 !important; }
.iaf-answer code { background: var(--iaf-bg) !important; padding: 1px 6px; border-radius: 5px; font-size: 13px; }

.iaf-copy {
	display: inline-flex !important; align-items: center; gap: 6px;
	margin: 14px 0 0 !important; padding: 6px 0 !important;
	background: none !important; border: none !important; box-shadow: none !important;
	color: var(--iaf-muted) !important; font-size: 13px !important; cursor: pointer;
	transition: color .16s ease;
}
.iaf-copy:hover, .iaf-copy.is-copied { color: var(--iaf-accent) !important; }

.iaf-empty { margin: 8px 0 0 !important; padding: 24px !important; text-align: center; color: var(--iaf-muted) !important; font-size: 15px !important; }

/* --- Responsive : une seule colonne, thèmes en pastilles horizontales ---- */
@media (max-width: 860px) {
	.iaf-faq { padding: 18px !important; border-radius: 16px !important; }
	.iaf-shell { grid-template-columns: 1fr; gap: 16px; }
	.iaf-side {
		position: static; max-height: none; overflow-y: visible;
		flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
		gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
	}
	.iaf-side-label { display: none !important; }
	.iaf-nav {
		width: auto !important; flex: 0 0 auto; white-space: nowrap;
		padding: 8px 14px !important; border-radius: 999px !important;
		background: var(--iaf-surface) !important; border-color: var(--iaf-border) !important;
	}
	.iaf-q { padding: 14px 15px !important; font-size: 15px !important; }
	.iaf-panel-inner { padding: 0 15px; }
}