/* Ceramispot — Blocs d'article : à retenir, questions fréquentes, sources.
 *
 * Trois blocs qui interrompent volontairement la lecture. Ils doivent se distinguer du
 * corps du texte sans le concurrencer : un encadré plus voyant que l'article lui-même
 * détourne le lecteur au lieu de l'aider.
 */

.csp-retenir,
.csp-faq,
.csp-sources {
	--a-terra: var(--cs-terracotta, #c96a3a);
	--a-brown: var(--cs-brown-dark, #2d1810);
	--a-line:  #e8ddd2;
	--a-text:  #3a2a1a;
	--a-muted: #7a6a5a;
}

/* ─── À retenir ───────────────────────────────────────────────────────────────
   Placé en tête d'article. Trois à cinq points, la réponse tout de suite. On croit
   perdre le lecteur en lui donnant la conclusion d'emblée ; c'est l'inverse — il sait
   en dix secondes qu'il est au bon endroit, et il reste. */

.csp-retenir {
	margin: 0 0 34px;
	padding: 22px 26px;
	background: #fdf6f0;
	border-left: 4px solid var(--a-terra);
	border-radius: 4px 12px 12px 4px;
}

.csp-retenir-titre {
	margin: 0 0 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--a-terra) !important;
	font-family: inherit !important;
}

.csp-retenir ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csp-retenir li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 20px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--a-text);
}

.csp-retenir li:last-child { margin-bottom: 0; }

.csp-retenir li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--a-terra);
}

/* ─── Questions fréquentes ────────────────────────────────────────────────────
   En <details> natif : le contenu reste dans le HTML — donc lu par Google et par les
   moteurs conversationnels — il s'ouvre sans JavaScript, le clavier fonctionne, et
   Chrome déplie automatiquement une réponse pour y montrer un résultat de recherche
   dans la page. Un accordéon maison perd ces quatre propriétés. */

.csp-faq { margin: 44px 0; }

.csp-faq-titre {
	margin: 0 0 18px !important;
	color: var(--a-brown) !important;
}

.csp-faq-item {
	border: 1px solid var(--a-line);
	border-radius: 10px;
	margin-bottom: 10px;
	background: #fff;
	overflow: hidden;
}

.csp-faq-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 46px 16px 18px;
	position: relative;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--a-brown);
	transition: background .16s;
}

.csp-faq-item > summary::-webkit-details-marker { display: none; }
.csp-faq-item > summary:hover { background: #fdf6f0; }

.csp-faq-item > summary:focus-visible {
	outline: 3px solid rgba(201, 106, 58, .4);
	outline-offset: -3px;
}

/* Le chevron est dessiné en CSS : une image de plus à charger pour une flèche serait
   un aller-retour réseau gaspillé. */
.csp-faq-item > summary::after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--a-terra);
	border-bottom: 2px solid var(--a-terra);
	transform: rotate(45deg);
	transition: transform .18s;
}

.csp-faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.csp-faq-item[open] > summary { background: #fdf6f0; }

.csp-faq-reponse {
	padding: 2px 18px 18px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--a-text);
}

.csp-faq-reponse > *:last-child { margin-bottom: 0; }

/* ─── Sources ─────────────────────────────────────────────────────────────────
   En céramique, une valeur fausse fait rater une fournée : citer d'où vient un chiffre
   est d'abord une question d'honnêteté. Discret par construction — on le consulte, on
   ne le lit pas. */

.csp-sources {
	margin: 44px 0 0;
	padding: 20px 24px;
	background: #faf7f4;
	border: 1px solid var(--a-line);
	border-radius: 12px;
}

.csp-sources-titre {
	margin: 0 0 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--a-muted) !important;
	font-family: inherit !important;
}

.csp-sources ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csp-sources li {
	margin: 0 0 7px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--a-muted);
	/* Une URL longue ne doit pas élargir la page sur mobile. */
	overflow-wrap: anywhere;
}

.csp-sources li:last-child { margin-bottom: 0; }
.csp-sources a { color: var(--a-terra); text-decoration: underline; }

/* ─── Sommaire rendu côté serveur ─────────────────────────────────────────────
   Les liens existent maintenant dans le HTML. Sur mobile le sommaire latéral n'a pas
   sa place : il devient un bloc repliable en tête d'article. */

.csp-toc-srv { list-style: none; margin: 0; padding: 0; }

@media (max-width: 700px) {
	.csp-retenir { padding: 18px 20px; margin-bottom: 26px; }
	.csp-sources { padding: 16px 18px; }
	.csp-faq-item > summary { padding: 14px 40px 14px 15px; font-size: 15px; }
	.csp-faq-reponse { padding: 2px 15px 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.csp-faq-item > summary,
	.csp-faq-item > summary::after { transition: none !important; }
}

/* ─── Impression ──────────────────────────────────────────────────────────────
   Un céramiste imprime un article pour l'emporter à l'atelier. Les questions doivent
   toutes être dépliées sur le papier. */

@media print {
	.csp-faq-item { border: 1px solid #999; page-break-inside: avoid; }
	.csp-faq-item > summary::after { display: none; }
	.csp-faq-reponse { display: block !important; }
	.csp-retenir { border: 1px solid #999; background: #fff; }
}