/*
 * Aestivo - Mailjet
 * Liste des newsletters envoyées.
 */

.aestivo-mailjet {
	--aestivo-mailjet-accent: #82c0c7;
	--aestivo-mailjet-encre: #1c2b30;
	--aestivo-mailjet-doux: #6b7d83;
	--aestivo-mailjet-trait: #e4eaec;

	color: var(--aestivo-mailjet-encre);
}


/* ------------------------------------------------------------------ */
/* Années                                                              */
/* ------------------------------------------------------------------ */

.aestivo-mailjet-annee + .aestivo-mailjet-annee {
	margin-top: 34px;
}

.aestivo-mailjet .aestivo-mailjet-annee-titre {
	margin: 0 0 6px 0;
	padding: 0 0 8px 0;
	border-bottom: 2px solid var(--aestivo-mailjet-accent);
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.2;
	color: var(--aestivo-mailjet-encre);
}


/* ------------------------------------------------------------------ */
/* Liste                                                               */
/* ------------------------------------------------------------------ */

.aestivo-mailjet .aestivo-mailjet-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aestivo-mailjet .aestivo-mailjet-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--aestivo-mailjet-trait);
	list-style: none;
}

.aestivo-mailjet-item a {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 14px 6px;
	color: inherit;
	text-decoration: none;
	transition: background-color .2s ease;
}

.aestivo-mailjet-item a:hover,
.aestivo-mailjet-item a:focus-visible {
	background-color: rgba(130, 192, 199, .1);
}

.aestivo-mailjet-date {
	flex: 0 0 9.5em;
	font-size: .9em;
	color: var(--aestivo-mailjet-doux);
	font-variant-numeric: tabular-nums;
}

.aestivo-mailjet-sujet {
	flex: 1 1 auto;
	font-weight: 600;
}

.aestivo-mailjet-action {
	flex: 0 0 auto;
	font-size: .85em;
	font-weight: 600;
	white-space: nowrap;
	color: var(--aestivo-mailjet-accent);
}

.aestivo-mailjet-action::after {
	content: ' \2192';
	display: inline-block;
	transition: transform .2s ease;
}

.aestivo-mailjet-item a:hover .aestivo-mailjet-action::after {
	transform: translateX(3px);
}


/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 780px) {
	.aestivo-mailjet-item a {
		flex-wrap: wrap;
		gap: 2px 12px;
	}

	.aestivo-mailjet-date {
		flex-basis: 100%;
	}

	.aestivo-mailjet .aestivo-mailjet-annee-titre {
		font-size: 1.35em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aestivo-mailjet-item a,
	.aestivo-mailjet-action::after {
		transition: none;
	}
}