/* Slider des réalisations (pages Réalisations et Accueil).
   .rslider : ordinateur et tablette (≥ 768 px) — grande photo plein écran, titre et bouton qui montent,
              diapositive suivante qui glisse par le bas par-dessus la précédente.
   .mslider : mobile (≤ 767 px) — carrousel classique, flèches et puces.
   Les deux sont des Swiper initialisés par main.js (data-swiper) ; realisations-slider.js pilote
   l'entrée et le défilement automatique de .rslider. */

/* ---------- ordinateur et tablette ---------- */
.rslider { container-type: inline-size; }
.rslider__stage {
	/* Cotes d'une grille de 1240 px réduite à la largeur du slider (jamais agrandie) ;
	   grilles de 1024 px puis 778 px sous 1024 et 778 px de large (voir @container plus bas). */
	--u1: min(1px, 100cqw / 1240);
	--u: var(--u1);
	--h: calc(900 * var(--u));
	--title-size: round(calc(90 * var(--u1)), 1px);
	--title-lh: round(calc(100 * var(--u1)), 1px);
	--title-y: calc(-25 * var(--u));
	--btn-size: round(calc(20 * var(--u1)), 1px);
	--btn-lh: round(calc(50 * var(--u1)), 1px);
	--btn-pad: round(calc(20 * var(--u1)), 1px);
	--btn-x: calc(-5 * var(--u));
	--btn-top: calc(490 * var(--u));
	--arrow-x: 500px; /* décalage des flèches depuis le centre, non réduit */
	--ease-layer: cubic-bezier(.77, 0, .175, 1);
	position: relative;
	height: var(--h);
	overflow: hidden;
	contain: size layout style; /* comme l'ancien slider : les positions s'arrondissent au pixel de la même façon */
}
@container (width < 1024px) {
	.rslider__stage {
		--u: calc(100cqw / 1024);
		--h: calc(700 * var(--u));
		--title-y: calc(-50 * var(--u));
		--btn-size: round(calc(24 * var(--u)), 1px);
		--btn-lh: round(calc(50 * var(--u)), 1px);
		--btn-x: calc(-4 * var(--u));
		--btn-top: calc(349 * var(--u));
	}
}
@container (width < 778px) {
	.rslider__stage {
		--u: calc(100cqw / 778);
		--title-size: round(calc(60 * var(--u)), 1px);
		--title-lh: round(calc(70 * var(--u)), 1px);
		--title-y: calc(-37 * var(--u));
		--btn-lh: round(calc(48 * var(--u)), 1px);
		--btn-x: calc(-3 * var(--u));
		--btn-top: calc(350 * var(--u));
	}
}
/* Swiper ne déplace rien (virtualTranslate, vitesse 0) : il gère seulement la diapositive active,
   le défilement automatique, les flèches et le glissement au doigt. Les diapositives sont toutes posées
   sur la scène (pas de transform au repos, pour un rendu arrondi au pixel comme l'ancien slider) :
   l'active au-dessus, la sortante (.is-leaving) juste dessous, les autres en attente sous la scène. */
.rslider .swiper, .rslider .swiper-wrapper, .rslider .swiper-slide { position: static; transform: none; }
.rslider .swiper { height: 100%; }
.rslider__slide {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: var(--h);
	overflow: hidden;
	border-radius: 50px 50px 0 0;
	visibility: hidden; /* hors du parcours au clavier tant qu'elle n'est pas affichée */
	translate: 0 100%;
	contain: strict; /* idem */
}
.rslider .swiper-slide.is-leaving .rslider__slide { z-index: 1; visibility: visible; translate: none; }
.rslider .swiper-slide-active .rslider__slide {
	z-index: 2;
	visibility: visible;
	transition: translate 2s cubic-bezier(.645, .045, .355, 1);
}
.rslider.is-playing .swiper-slide-active .rslider__slide { translate: none; }
.rslider__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: round(var(--h), 1px); /* hauteur entière, comme le canevas de l'ancien slider */
	object-fit: cover;
}
.rslider__title {
	--from: calc(var(--h) / 2 + var(--title-lh) / 2 - var(--title-y));
	position: absolute;
	/* positions en top/left (pas de transform) : arrondies au pixel comme dans l'ancien slider ;
	   --w = largeur du texte arrondie au pixel, posée par realisations-slider.js */
	top: calc(50% - var(--title-lh) / 2 + var(--title-y));
	left: calc(50% - var(--w, 0px) / 2);
	z-index: 2;
	color: var(--white);
	font-size: var(--title-size);
	line-height: var(--title-lh);
	text-align: center;
	white-space: nowrap;
}
.rslider__btn {
	--from: calc(var(--h) - var(--btn-top));
	position: absolute;
	top: var(--btn-top);
	left: calc(50% - var(--w, 0px) / 2 + var(--btn-x));
	z-index: 1;
	margin: 0;
	padding: 0 var(--btn-pad);
	border: 0;
	border-radius: 25px;
	background: var(--blue);
	color: var(--white);
	font-family: var(--sans);
	font-size: var(--btn-size);
	font-weight: 500;
	line-height: var(--btn-lh);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s;
	transition-timing-function: cubic-bezier(.455, .03, .515, .955);
}
.rslider__btn:hover, .rslider__btn:focus-visible { background: var(--white); color: var(--black); }

/* textes : montent depuis le bas en apparaissant, s'effacent quand la diapositive part */
.rslider.is-playing .swiper-slide-active .rslider__title { animation: rslider-in 1s var(--ease-layer) .52s both; }
.rslider.is-playing .swiper-slide-active .rslider__btn { animation: rslider-in 1s var(--ease-layer) 1.02s both; }
.rslider .is-leaving :is(.rslider__title, .rslider__btn) { animation: rslider-out .3s var(--ease-layer) both; }
@keyframes rslider-in { from { opacity: 0; transform: translateY(var(--from)); } }
@keyframes rslider-out { to { opacity: 0; } }

.rslider__arrow {
	position: absolute;
	top: calc(50% - 20px);
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50px;
	background: rgba(255, 255, 255, .9);
	cursor: pointer;
}
.rslider__arrow:hover { background: var(--white); }
.rslider__arrow--prev { left: calc(50% - var(--arrow-x) - 20px); }
.rslider__arrow--next { left: calc(50% + var(--arrow-x) - 20px); }
.rslider__arrow svg { display: block; width: 40px; height: 40px; fill: var(--black); }

html.no-js .rslider .swiper-slide:first-child .rslider__slide { visibility: visible; translate: none; }
@media (prefers-reduced-motion: reduce) {
	.rslider .swiper-slide-active .rslider__slide { transition-duration: 1ms; }
	.rslider .rslider__title, .rslider .rslider__btn { animation: none !important; }
}

/* ---------- mobile ---------- */
.mslider {
	position: relative;
	display: none;
	height: 700px;
	--swiper-pagination-bullet-size: 6px;
	--swiper-pagination-bullet-horizontal-gap: 6px;
	--swiper-pagination-bullet-inactive-color: var(--white);
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-color: var(--blue);
}
@media (max-width: 767px) {
	.rslider { display: none; }
	.mslider { display: block; }
}
.mslider .swiper { height: 100%; border-radius: 50px 50px 0 0; }
.mslider .swiper-slide { background: var(--white); }
.mslider__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* tout le visuel ouvre la galerie, comme sur l'ancien site */
.mslider__link {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
	color: var(--white);
	text-align: center;
}
.mslider__content { max-width: 100%; }
/* le texte de la diapositive active remonte une fois le glissement terminé (0,5 s) ; sans « fill »
   après la fin, comme l'ancien site : le texte retrouve alors un lissage net */
.mslider .swiper-slide:not(.swiper-slide-active) .mslider__content { visibility: hidden; }
.mslider .swiper-slide-active .mslider__content { animation: fadeInUp 1.25s .5s backwards; }
.mslider__title {
	margin-bottom: 30px;
	font-size: 45px;
	line-height: 1;
	text-transform: uppercase;
}
.mslider__btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 25px;
	background: var(--blue);
	font-family: "Raleway-Medium", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	transition: all .3s;
}
.mslider__btn:hover { background: var(--black); }
.mslider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(237, 237, 237, .9);
	font-size: 25px;
	translate: 0 -50%;
	cursor: pointer;
}
.mslider__arrow--prev { left: 10px; }
.mslider__arrow--next { right: 10px; }
.mslider__arrow svg { width: 1em; height: 1em; fill: currentColor; }
.mslider .slider-dots {
	position: absolute;
	bottom: 5px;
	left: 0;
	z-index: 10;
	width: 100%;
	text-align: center;
}