/**
 * ==========================================================
 * DOUBLE DOSE
 * Événements passés
 * ==========================================================
 */


.dd-past-events {

	width: 100%;

	text-align: center;


	/*
	 * À personnaliser ensuite avec
	 * tes couleurs Double Dose.
	 */
	--dd-past-bg: #1f2042;
	--dd-past-bg-hover: #34365e;
	--dd-past-color: #ffffff;

}


/**
 * ==========================================================
 * BOUTON
 * ==========================================================
 */

.dd-past-events__button {

	appearance: none;
	-webkit-appearance: none;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	padding: 14px 26px;

	margin: 0;

	border: 0;

	border-radius: 50px;

	background:
		var(--dd-past-bg);

	color:
		var(--dd-past-color);

	font: inherit;

	font-weight: 700;

	line-height: 1.2;

	cursor: pointer;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		background-color .2s ease;

}


.dd-past-events__button:hover {

	background:
		var(--dd-past-bg-hover);

	transform:
		translateY(-2px);

	box-shadow:
		0 8px 25px
		rgba(0, 0, 0, .15);

}


.dd-past-events__button:active {

	transform:
		translateY(0);

}


.dd-past-events__button:disabled {

	cursor: wait;

}


/**
 * ==========================================================
 * FLÈCHE
 * ==========================================================
 */

.dd-past-events__arrow {

	display: inline-block;

	font-size: 18px;

	line-height: 1;

	transition:
		transform .4s
		cubic-bezier(.4, 0, .2, 1);

}


.dd-past-events.is-open
.dd-past-events__arrow {

	transform:
		rotate(180deg);

}


/**
 * ==========================================================
 * SPINNER
 * ==========================================================
 */

.dd-past-events__spinner {

	display: none;

	box-sizing: border-box;

	width: 17px;
	height: 17px;

	border:
		2px solid
		rgba(255, 255, 255, .35);

	border-top-color:
		currentColor;

	border-radius:
		50%;

	animation:
		dd-past-spinner
		.65s linear
		infinite;

}


.dd-past-events.is-loading
.dd-past-events__spinner {

	display:
		inline-block;

}


.dd-past-events.is-loading
.dd-past-events__arrow {

	display:
		none;

}


@keyframes dd-past-spinner {

	to {

		transform:
			rotate(360deg);

	}

}


/**
 * ==========================================================
 * PANNEAU
 * ==========================================================
 */

.dd-past-events__panel {

	width: 100%;

	height: 0;

	overflow: hidden;

	opacity: 0;

	transition:
		height .6s
		cubic-bezier(.4, 0, .2, 1),
		opacity .4s ease;

}


/**
 * Important :
 *
 * aucun padding ici.
 *
 * La section Divi chargée conserve
 * ses propres marges et espacements.
 */
.dd-past-events__content {

	width: 100%;

	text-align: initial;

}


/**
 * Petite animation supplémentaire
 * du contenu.
 */

.dd-past-events.is-open
.dd-past-events__content {

	animation:
		dd-past-content-in
		.55s ease
		both;

}


@keyframes dd-past-content-in {

	from {

		opacity: 0;

		transform:
			translateY(15px);

	}

	to {

		opacity: 1;

		transform:
			translateY(0);

	}

}


/**
 * ==========================================================
 * ERREUR
 * ==========================================================
 */

.dd-past-events__error {

	max-width: 600px;

	margin:
		30px auto;

	padding:
		20px;

	text-align:
		center;

}


.dd-past-events__retry {

	margin-top:
		10px;

	padding:
		8px 18px;

	border:
		1px solid
		var(--dd-past-bg);

	border-radius:
		30px;

	background:
		transparent;

	color:
		var(--dd-past-bg);

	cursor:
		pointer;

	font:
		inherit;

}


/**
 * ==========================================================
 * ACCESSIBILITÉ
 * ==========================================================
 */

@media (
	prefers-reduced-motion: reduce
) {

	.dd-past-events__button,
	.dd-past-events__arrow,
	.dd-past-events__panel,
	.dd-past-events__content {

		transition: none;
		animation: none;

	}

}