/*
 * Les pages événement — issue 22. Référence : maquette 12, planche 7.
 * Balisage : inc/evenement.php. Sélecteur de dates : css/dates.css ;
 * bandeau de fin : css/elements.css.
 *
 * Valeurs de la maquette ramenées à l'échelle : titre 52 → titre de page,
 * titres de moment 19 → 22 (Fraunces jamais sous 22), textes 13,5-18 → 14 et
 * 17, marges 12-20 → 16 et 24. Surtitres en encre douce, pas en bronze.
 */

/* --- La page ---------------------------------------------------------------- */
.pel-evenement__titre {
	max-width: calc(var(--pel-container) * 0.7);
	margin: var(--pel-space-s) 0;
	font-size: var(--pel-fs-display);
	line-height: var(--pel-lh-titre);
}

.pel-evenement__chapo,
.pel-evenement__intro {
	max-width: calc(var(--pel-container) * 0.55);
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-evenement__realisations {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-evenement__faq {
	max-width: calc(var(--pel-container) * 0.7);
}

/* --- pel-proof-bar ------------------------------------------------------------ */
.pel-proof-bar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-proof-bar__item {
	padding-left: var(--pel-space-s);
	border-left: var(--pel-trait) solid var(--pel-champagne);   /* décoratif */
}

.pel-proof-bar__titre {
	margin: 0 0 var(--pel-space-3xs);
	color: var(--pel-encre);
	font-family: var(--pel-font-titre);
	font-size: var(--pel-fs-h3);
	font-weight: 600;
}

.pel-proof-bar__texte {
	margin: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* Quatre faits (« Réponse sous 24 h », #402) : quatre colonnes. */
.pel-proof-bar:has(> .pel-proof-bar__item:nth-child(4)) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Le même bandeau écrit dans Bricks (pages Mariage et ville : grille de 3,
   classes globales) : quatre faits sur une rangée. Sélecteur plus précis que
   les classes Bricks, chargées après le thème. */
ul.pel-grid.pel-grid--3-1m:has(> li.pel-chiffres__item:nth-child(4)) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --- pel-avis (#402) ---------------------------------------------------------- */
.pel-avis__titre {
	margin: 0 0 var(--pel-space-xs);
}

.pel-avis__note {
	margin: 0 0 var(--pel-space-m);
	color: var(--pel-encre-douce);
}

.pel-avis__etoiles {
	color: var(--pel-champagne);
}

.pel-avis__valeur {
	color: var(--pel-encre);
}

.pel-avis__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-avis__citation {
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: var(--pel-space-m);
	border-radius: var(--pel-radius-l);
	background: var(--pel-sable);
}

.pel-avis__texte {
	margin: 0 0 var(--pel-space-xs);
	color: var(--pel-encre);
	line-height: var(--pel-lh-texte);
}

.pel-avis__auteur {
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
}

/* --- pel-timeline ------------------------------------------------------------- */
.pel-timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--pel-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-timeline__moment {
	padding: var(--pel-space-m);
	overflow: hidden;
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
	transition: border-color var(--pel-duree-courte);
}

/* Les rubriques sont la porte du catalogue (#324) : la carte réagit. */
.pel-timeline__moment:hover,
.pel-timeline__moment:focus-within {
	border-color: var(--pel-terre-cuite);
}

/* Une photo du moment, en tête de carte, bord à bord (#324). Décorative. */
.pel-timeline__photo {
	display: block;
	width: calc(100% + 2 * var(--pel-space-m));
	max-width: none;
	height: auto;
	margin: calc(-1 * var(--pel-space-m)) calc(-1 * var(--pel-space-m)) var(--pel-space-s);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

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

.pel-timeline__titre {
	margin: var(--pel-space-3xs) 0 var(--pel-space-s);
}

/* Les rubriques : des liens qui se voient, une ligne chacune, avec une flèche (#324).
   « ol.pel-timeline » : plus précis que les classes globales Bricks (.x.brxe-div), en ligne après le thème (#326). */
ol.pel-timeline .pel-timeline__materiel {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--pel-encre);
	font-size: var(--pel-fs-body);
	line-height: var(--pel-lh-texte);
}

ol.pel-timeline .pel-timeline__materiel > li {
	border-top: var(--pel-filet) solid var(--pel-lin);   /* décoratif */
}

ol.pel-timeline .pel-timeline__lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pel-space-2xs);
	padding: var(--pel-space-2xs) 0;
	color: var(--pel-encre);
	font-weight: 600;
	text-decoration: none;
}

ol.pel-timeline .pel-timeline__lien::after {
	content: "→";
	color: var(--pel-terre-cuite);
	transition: transform var(--pel-duree-courte);
}

ol.pel-timeline .pel-timeline__lien:hover,
ol.pel-timeline .pel-timeline__lien:focus-visible {
	color: var(--pel-terre-foncee);
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

ol.pel-timeline .pel-timeline__lien:hover::after {
	transform: translateX(var(--pel-space-3xs));
}

@media (prefers-reduced-motion: reduce) {
	.pel-timeline__moment,
	ol.pel-timeline .pel-timeline__lien::after {
		transition: none;
	}
}

/* --- pel-inspiration-card ----------------------------------------------------- */
.pel-inspiration-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-xs);
	padding: var(--pel-space-xs) var(--pel-space-xs) var(--pel-space-s);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-inspiration-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pel-radius-m);
}

.pel-inspiration-card__titre {
	margin: 0;
	padding-inline: var(--pel-space-2xs);
}

/* La ligne : lieu · occasion · mois, ou « Ambiance » (inc/realisations.php). */
.pel-inspiration-card__ligne {
	margin: 0;
	padding-inline: var(--pel-space-2xs);
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
}

.pel-inspiration-card__lien {
	display: inline-flex;
	align-items: center;
	min-height: var(--pel-cible);
	padding-inline: var(--pel-space-2xs);
}

/* --- pel-faq ------------------------------------------------------------------ */
/* Le filet entre deux questions est l'écart de la pile, laissé voir sur le fond de
   lin : aucune règle « question suivant une question » (issue 221). */
.pel-faq {
	display: flex;
	flex-direction: column;
	gap: var(--pel-filet);
	overflow: hidden;
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-lin);
}

.pel-faq__item {
	background: var(--pel-blanc);
}

.pel-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pel-space-s);
	min-height: var(--pel-cible);
	padding: var(--pel-space-s) var(--pel-space-m);
	color: var(--pel-encre);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.pel-faq__question::-webkit-details-marker {
	display: none;
}

/* Le signe dit l'état : + fermé, − ouvert (pas la couleur seule). */
.pel-faq__question::after {
	content: "+";
	flex-shrink: 0;
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-h3);
	line-height: 1;
}

.pel-faq__item[open] > .pel-faq__question::after {
	content: "−";
}

.pel-faq__question:focus-visible {
	outline-offset: calc(var(--pel-focus-epaisseur) * -1);
}

.pel-faq__reponse {
	max-width: calc(var(--pel-container) * 0.6);
	margin: 0;
	padding: 0 var(--pel-space-m) var(--pel-space-m);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}


@media (max-width: 991px) {
	.pel-proof-bar:has(> .pel-proof-bar__item:nth-child(4)),
	ul.pel-grid.pel-grid--3-1m:has(> li.pel-chiffres__item:nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pel-evenement__realisations,
	.pel-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pel-proof-bar,
	.pel-proof-bar:has(> .pel-proof-bar__item:nth-child(4)),
	ul.pel-grid.pel-grid--3-1m:has(> li.pel-chiffres__item:nth-child(4)),
	.pel-avis__liste,
	.pel-evenement__realisations,
	.pel-timeline {
		grid-template-columns: minmax(0, 1fr);
	}

	.pel-faq__question {
		padding-inline: var(--pel-space-s);
	}

	.pel-faq__reponse {
		padding: 0 var(--pel-space-s) var(--pel-space-s);
	}
}