/*
 * Slider de la page d'accueil : réglages d'affichage.
 *
 * Valeurs reprises de la configuration de l'ancienne extension Advanced post
 * slider. Chargé après style.css, à la place du bloc <style> que l'extension
 * écrivait dans la page. Voir inc/slider-accueil.php.
 */

/* Conteneur et fondu entre les diapositives */
#advps_container1 {
	overflow: hidden;
	max-width: 1200px;
	margin: auto;
}

#advps_container1 .bx-wrapper {
	max-width: 100%;
}

#advps_container1 .bx-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	touch-action: pan-y;
	background: #fff;
}

/* Les diapositives sont empilées dans la même case de grille. */
#advps_container1 .vdr-slider-piste {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Fondu de 2 s (même courbe que jQuery). La durée est aussi dans slider-accueil.js. */
#advps_container1 .advps-slide {
	grid-area: 1 / 1;
	position: relative;
	min-width: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 2s cubic-bezier(.37, 0, .63, 1), visibility 0s linear 2s;
}

#advps_container1 .advps-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 2s cubic-bezier(.37, 0, .63, 1), visibility 0s;
}

/* Image toujours au format 1060 x 402, même si le fichier est un peu plus petit. */
#advps_container1 .advps-slide img {
	height: auto;
	aspect-ratio: 1060 / 402;
	object-fit: cover;
}

/* Bandeau rouge à droite, titre et extrait */
#advps_container1 .advps-excerpt-one {
	top: 0;
	right: 0;
	width: 40%;
	height: 100%;
}

#advps_container1 .advps-overlay-one {
	background-color: #a02323;
	opacity: .8;
}

#advps_container1 .advps-excerpt-block-one {
	color: #fff;
	text-align: left;
	opacity: 1;
}

#advps_container1 .advs-title,
#advps_container1 .advs-title a {
	margin: 5px 0 10px;
	color: #fff;
}

#advps_container1 .advs-title a:hover {
	color: #c9c9c9;
}

#advps_container1 .advs-title,
#advps_container1 .advs-title a {
	font-size: 32px;
	line-height: 40px;
}

#advps_container1 .advps-slide p {
	font-size: 15px;
	line-height: 14px;
}

/* Puces sous le slider */
#advps_container1 .bx-wrapper .bx-pager {
	bottom: -55px;
	z-index: 999;
	text-align: center;
}

#advps_container1 .bx-wrapper .bx-pager.bx-default-pager a {
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	border-radius: 5px;
	background: #666;
	text-indent: -9999px;
	text-align: left;
}

#advps_container1 .bx-wrapper .bx-pager.bx-default-pager a:hover,
#advps_container1 .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* Repère visible pour la navigation au clavier uniquement */
#advps_container1 .bx-wrapper .bx-controls a:focus-visible {
	outline: 2px solid #a02323;
	outline-offset: 2px;
}

/*
 * Mobile (767 px et moins) : la photo en haut, le bandeau rouge en dessous.
 * Le texte n'est plus coupé et la photo n'est plus masquée. L'extrait est
 * limité à 4 lignes pour garder un slider compact. Les !important passent
 * devant ceux de style.css (largeur et position du bandeau).
 */
@media screen and (max-width: 767px) {
	#advps_container1 .advps-slide {
		display: flex;
		flex-direction: column;
	}

	#advps_container1 .advps-excerpt-one {
		position: relative;
		flex: 1 0 auto;
		top: auto !important;
		right: auto;
		bottom: auto !important;
		width: 100% !important;
		height: auto;
	}

	#advps_container1 .advps-excerpt-block-one {
		padding: 10px 20px 15px;
	}

	#advps_container1 .vdr-slider-extrait {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
		line-height: 20px;
	}

	/* Flèches centrées sur la photo, et non plus sur toute la diapositive */
	#advps_container1 .bx-controls-direction {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		aspect-ratio: 1060 / 402;
		pointer-events: none;
	}

	#advps_container1 .bx-controls-direction a {
		pointer-events: auto;
	}
}

/* Tailles de texte selon la largeur d'écran */
@media screen and (max-width: 1024px) {
	#advps_container1 .advs-title,
	#advps_container1 .advs-title a {
		font-size: 28px;
		line-height: 28px;
	}

	#advps_container1 .advps-slide p {
		font-size: 13px;
		line-height: 12px;
	}
}

@media screen and (max-width: 768px) {
	#advps_container1 h2.advs-title,
	#advps_container1 h2.advs-title a {
		font-size: 24px;
		line-height: 28px;
	}

	#advps_container1 .advps-slide p {
		font-size: 12px;
		line-height: 12px;
	}
}

@media screen and (max-width: 650px) {
	#advps_container1 h2.advs-title,
	#advps_container1 h2.advs-title a {
		font-size: 21px;
		line-height: 23px;
	}

	#advps_container1 .advps-slide p {
		font-size: 12px;
		line-height: 12px;
	}
}

@media screen and (max-width: 480px) {
	#advps_container1 h2.advs-title,
	#advps_container1 h2.advs-title a {
		font-size: 15px;
		line-height: 23px;
	}

	#advps_container1 .advps-slide p {
		font-size: 12px;
		line-height: 12px;
	}
}

@media screen and (max-width: 320px) {
	#advps_container1 h2.advs-title,
	#advps_container1 h2.advs-title a {
		font-size: 14px;
		line-height: 15px;
	}

	#advps_container1 .advps-slide p {
		font-size: 12px;
		line-height: 12px;
	}
}