/*
 * Le gabarit guide — issue 24. Référence : maquette 14, planche 7.
 * Balisage : inc/guide.php ; le corps est le contenu de l'article, habillé
 * ici (titres, tableau, FAQ). Questions de FAQ : css/evenement.css (pel-faq).
 *
 * Valeurs de la maquette ramenées à l'échelle : question 44 → titre de page,
 * réponse 20 → 22, textes 14,5-16,5 → 14 et 17, sommaire 280 → 280.
 * Surtitre et en-têtes de tableau en encre douce, pas en bronze.
 */

/* --- pel-guide-head ------------------------------------------------------------ */
.pel-guide-head__surtitre {
	margin: var(--pel-space-s) 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales);
	text-transform: uppercase;
}

.pel-guide-head__question {
	max-width: calc(var(--pel-container) * 0.7);
	margin: 0 0 var(--pel-space-m);
	font-size: var(--pel-fs-h1);
	line-height: var(--pel-lh-titre);
}

/* La réponse d'abord : c'est le chiffre qu'on est venu chercher. */
.pel-guide-head__reponse {
	max-width: calc(var(--pel-container) * 0.6);
	margin: 0 0 var(--pel-space-s);
	padding-left: var(--pel-space-s);
	border-left: var(--pel-trait) solid var(--pel-terre-cuite);   /* décoratif */
	color: var(--pel-encre);
	font-size: var(--pel-fs-h3);
	font-weight: 500;
	line-height: var(--pel-lh-texte);
}

.pel-guide-head__meta {
	margin: 0;
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

/* --- Le corps ---------------------------------------------------------------- */
.pel-guide.has-toc {
	display: grid;
	grid-template-columns: calc(var(--pel-container) * 0.22) minmax(0, 1fr);
	gap: var(--pel-space-xl);
	align-items: start;
}

.pel-guide__corps {
	max-width: calc(var(--pel-container) * 0.6);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-guide__corps h2 {
	margin: var(--pel-space-xl) 0 var(--pel-space-s);
	color: var(--pel-encre);
	scroll-margin-top: calc(var(--header-h, var(--pel-entete-h)) + var(--pel-space-m));
}

.pel-guide__corps > :first-child {
	margin-top: 0;
}

.pel-guide__corps p,
.pel-guide__corps ul,
.pel-guide__corps ol {
	margin: 0 0 var(--pel-space-s);
}

.pel-guide__corps a {
	color: var(--pel-terre-foncee);
	text-underline-offset: var(--pel-soulignement);
}

/* Le tableau récapitulatif : une zone qui défile seule, atteignable au clavier. */
.pel-guide__tableau {
	overflow-x: auto;
	margin: var(--pel-space-m) 0;
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-guide__tableau table {
	width: 100%;
	border-collapse: collapse;
	color: var(--pel-encre);
	font-size: var(--pel-fs-small);
}

.pel-guide__tableau caption {
	padding-bottom: var(--pel-space-s);
	font-family: var(--pel-font-titre);
	font-size: var(--pel-fs-h3);
	font-weight: 600;
	text-align: left;
}

.pel-guide__tableau th,
.pel-guide__tableau td {
	padding: var(--pel-space-xs) var(--pel-space-s) var(--pel-space-xs) 0;
	border-bottom: var(--pel-filet) solid var(--pel-lin);
	text-align: left;
	vertical-align: top;
}

/* En-tête de colonne : dans les tableaux des guides, les th ne sont que dans thead. */
.pel-guide__tableau th {
	border-bottom-color: var(--pel-encre);
	color: var(--pel-encre-douce);
	font-weight: 600;
}

/* Les blocs « Détails » du contenu deviennent une pel-faq (inc/guide.php) : ses règles
   sont celles de css/evenement.css. Ici, seulement l'écart qui la suit. */
.pel-guide__corps .pel-faq {
	margin-bottom: var(--pel-space-m);
}

/* --- pel-toc --------------------------------------------------------------------- */
.pel-toc {
	position: sticky;
	top: calc(var(--header-h, var(--pel-entete-h)) + var(--pel-space-m));
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-sable);
}

.pel-toc__titre {
	margin: 0 0 var(--pel-space-xs);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	font-weight: 600;
	letter-spacing: var(--pel-capitales);
	text-transform: uppercase;
}

.pel-toc__liste {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-toc__lien {
	display: flex;
	align-items: center;
	min-height: var(--pel-cible);
	color: var(--pel-terre-foncee);
	line-height: var(--pel-lh-titre);
	text-underline-offset: var(--pel-soulignement);
}

@media (max-width: 991px) {
	.pel-guide.has-toc {
		grid-template-columns: minmax(0, 1fr);
	}

	.pel-toc {
		position: static;
	}
}

@media (max-width: 767px) {
	.pel-guide__tableau {
		padding: var(--pel-space-s);
	}
}