/**
 * layout_as_faq — questions/réponses dépliables (<details>/<summary> natifs)
 *
 * Palette en variables :root pour que le layout reste portable sur les autres sites du
 * parc (mêmes conventions que layout_as_simple_agenda). Valeurs par défaut = charte
 * chapelle ; un autre skin n'a qu'à redéfinir les --lfaq-*.
 *
 * ⚠ Spécificité : .chapelle-content h3 vaut 0-1-1 et écraserait un simple .lfaq-title.
 * Toutes les règles de titre sont donc portées à 0-2-0 (.lfaq .lfaq-title) — gotcha
 * documenté dans CLAUDE.md § « h2 dans les layouts vs .chapelle-content ».
 */

:root {
	--lfaq-primaire:      #1E4D0F;   /* vert forêt */
	--lfaq-primaire-dark: #123008;
	--lfaq-accent:        #4A8B2A;
	--lfaq-back:          #FFFFFF;
	--lfaq-back-alt:      #F2EFE8;   /* calcaire */
	--lfaq-border:        #DDD8CC;
	--lfaq-text:          #1F1D17;
	--lfaq-text-muted:    #5C5749;
	--lfaq-focus:         #4A87B8;   /* ciel Vercors */
}

.lfaq {
	margin: 2rem 0;
}

/* ── Un bloc question/réponse ─────────────────────────────────────────────── */

.lfaq .lfaq-item {
	border: 1px solid var(--lfaq-border);
	border-left: 4px solid var(--lfaq-primaire);
	border-radius: 3px;
	background: var(--lfaq-back);
	margin-bottom: 0.8rem;
}

.lfaq .lfaq-item[open] {
	border-left-color: var(--lfaq-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── En-tête cliquable ────────────────────────────────────────────────────── */

.lfaq .lfaq-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 1.2rem;
	padding: 1.2rem 4rem 1.2rem 1.6rem;
	position: relative;
	cursor: pointer;
	background: var(--lfaq-back-alt);
	list-style: none;          /* Firefox */
}

/* Le marqueur natif est remplacé par le chevron ci-dessous */
.lfaq .lfaq-summary::-webkit-details-marker {
	display: none;
}

.lfaq .lfaq-summary:hover {
	background: #E9E4D8;
}

/* Anneau de focus visible — le <summary> est l'élément qui reçoit le focus clavier,
   ne jamais le supprimer : c'est le seul repère pour qui navigue sans souris (RGAA 10.7) */
.lfaq .lfaq-summary:focus-visible {
	outline: 3px solid var(--lfaq-focus);
	outline-offset: -3px;
}

/* Chevron maison, purement décoratif (le <details> annonce déjà son état) */
.lfaq .lfaq-summary::after {
	content: "";
	position: absolute;
	right: 1.6rem;
	top: 1.7rem;
	width: 0.9rem;
	height: 0.9rem;
	border-right: 2px solid var(--lfaq-primaire);
	border-bottom: 2px solid var(--lfaq-primaire);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.lfaq .lfaq-item[open] > .lfaq-summary::after {
	transform: rotate(-135deg);
	top: 2rem;
}

@media (prefers-reduced-motion: reduce) {
	.lfaq .lfaq-summary::after {
		transition: none;
	}
}

/* ── Titre ────────────────────────────────────────────────────────────────── */

.lfaq .lfaq-title {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 1.8rem;
	line-height: 1.35;
	color: var(--lfaq-primaire-dark);
	font-weight: 600;
}

.lfaq .lfaq-date {
	font-size: 1.3rem;
	color: var(--lfaq-text-muted);
	white-space: nowrap;
}

/* ── État de publication ──────────────────────────────────────────────────────
   Visible des seuls rédacteurs : un visiteur ne reçoit jamais ces pages dans la
   liste. Le libellé est en toutes lettres et le fond est hachuré — l'information
   ne repose ni sur la seule couleur (RGAA 3.1) ni sur une icône muette, contrairement
   au DRAFT_FLAG du core. */

.lfaq .lfaq-badge {
	display: inline-block;
	padding: 0.2rem 0.9rem;
	border-radius: 999px;
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: #FFF;
}

.lfaq .lfaq-badge--draft     { background: #8A6D1F; }   /* ocre — 4.6:1 sur blanc */
.lfaq .lfaq-badge--scheduled { background: #2F6690; }   /* ardoise */
.lfaq .lfaq-badge--expired   { background: #8C3B3B; }   /* brique */

/* Hachures diagonales discrètes sur l'en-tête, pour repérer le bloc d'un coup d'œil
   même quand il est replié et que le badge sort du champ de lecture. */
.lfaq .lfaq-item--draft > .lfaq-summary,
.lfaq .lfaq-item--scheduled > .lfaq-summary,
.lfaq .lfaq-item--expired > .lfaq-summary {
	background-image: repeating-linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.045) 0,
		rgba(0, 0, 0, 0.045) 6px,
		transparent 6px,
		transparent 12px
	);
}

.lfaq .lfaq-item--draft     { border-left-color: #8A6D1F; }
.lfaq .lfaq-item--scheduled { border-left-color: #2F6690; }
.lfaq .lfaq-item--expired   { border-left-color: #8C3B3B; }

/* Le bord gauche « ouvert » ne doit pas reprendre le vert et masquer l'état */
.lfaq .lfaq-item--draft[open]     { border-left-color: #8A6D1F; }
.lfaq .lfaq-item--scheduled[open] { border-left-color: #2F6690; }
.lfaq .lfaq-item--expired[open]   { border-left-color: #8C3B3B; }

/* ── Réponse ──────────────────────────────────────────────────────────────── */

.lfaq .lfaq-answer {
	padding: 1.4rem 1.6rem 0.4rem 1.6rem;
	color: var(--lfaq-text);
}

.lfaq .lfaq-answer > *:first-child {
	margin-top: 0;
}

.lfaq .lfaq-answer .introduction {
	font-size: 1.7rem;
	color: var(--lfaq-text-muted);
	margin-bottom: 1rem;
}

.lfaq .lfaq-empty {
	color: var(--lfaq-text-muted);
	font-style: italic;
}

/* ── Documents liés ───────────────────────────────────────────────────────── */

.lfaq .lfaq-files {
	margin: 1.2rem 0 0.6rem 0;
	padding: 0.8rem 1.2rem;
	background: var(--lfaq-back-alt);
	border-radius: 3px;
}

.lfaq .lfaq-files-title {
	margin: 0 0 0.4rem 0;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--lfaq-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.lfaq .lfaq-files ul {
	margin: 0;
	padding-left: 1.8rem;
}

/* ── Lien de modification (éditeurs) ──────────────────────────────────────────
   Rendu en fin de panneau, jamais servi à un visiteur : le PHP ne l'émet que si
   Articles::allow_modification() est vrai. Discret par défaut — c'est un outil
   d'édition, pas un appel à l'action de la page. */

.lfaq .lfaq-actions {
	margin: 0 0 1.2rem 0;
	padding-bottom: 0.8rem;
	border-bottom: 1px dashed var(--lfaq-border);
	text-align: right;
}

/* 0-2-1 : bat .chapelle-content a / .y-main a (0-1-1), qui imposeraient
   la couleur de lien et un soulignement — gotcha « liens blocs » du CLAUDE.md.
   :visited couvert, sinon le lien vire au violet après le premier usage. */
.lfaq .lfaq-actions a.lfaq-edit,
.lfaq .lfaq-actions a.lfaq-edit:visited {
	display: inline-block;
	padding: 0.4rem 1.2rem;
	border: 1px solid var(--lfaq-primaire);
	border-radius: 3px;
	background: var(--lfaq-back);
	color: var(--lfaq-primaire);
	font-size: 1.3rem;
	font-weight: 600;
	text-decoration: none;
}

.lfaq .lfaq-actions a.lfaq-edit:hover,
.lfaq .lfaq-actions a.lfaq-edit:focus {
	background: var(--lfaq-primaire);
	color: #FFF;
	text-decoration: none;
}

.lfaq .lfaq-actions a.lfaq-edit:focus-visible {
	outline: 3px solid var(--lfaq-focus);
	outline-offset: 2px;
}

/* Complément d'intitulé réservé aux lecteurs d'écran (RGAA 6.2) : le layout doit
   rester portable, on ne dépend pas du .chapelle-sr-only du skin. */
.lfaq .lfaq-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Impression : tout déplié, sinon la page imprimée est vide ────────────── */

@media print {
	.lfaq .lfaq-item > .lfaq-answer {
		display: block !important;
	}
	.lfaq .lfaq-summary::after {
		display: none;
	}
	/* Un lien d'édition n'a aucun sens sur papier */
	.lfaq .lfaq-actions {
		display: none;
	}
}