/**
 * SCT Réalisations — Explorer d'autres univers
 * Version finale premium
 *
 * Structure Divi attendue :
 *
 * .sct-explorer
 * ├── .sct-explorer__heading
 * └── .sct-explorer__grid
 *     └── .sct-explorer-card
 *         ├── .sct-explorer-card__media
 *         └── .sct-explorer-card__content
 *             ├── .sct-explorer-card__title
 *             └── .sct-explorer-card__tagline
 */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.sct-explorer {
	--sct-explorer-ink: #08132a;
	--sct-explorer-blue: #203d85;
	--sct-explorer-surface: #f4f6f9;

	--sct-explorer-overlay: 5 12 28;

	--sct-explorer-gap: clamp(18px, 1.8vw, 30px);
	--sct-explorer-card-pad: clamp(20px, 1.7vw, 28px);
	--sct-explorer-arrow-size: clamp(21px, 1.5vw, 26px);

	/*
	 * Courbe volontairement souple :
	 * démarrage rapide, décélération longue.
	 * Sensation proche des interfaces Apple/iOS.
	 */
	--sct-explorer-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;

	padding-block: clamp(72px, 7vw, 108px);

	background: var(--sct-explorer-surface);
	color: var(--sct-explorer-ink);
}


/* ==========================================================================
   2. NORMALISATION DES ROWS DIVI
   ========================================================================== */

/*
 * Divi ajoute ses propres paddings verticaux aux Rows.
 * La section possède déjà son rythme vertical :
 * on évite donc les doubles espacements.
 */
.sct-explorer > .et_pb_row {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* ==========================================================================
   3. TITRE DE SECTION
   ========================================================================== */

.sct-explorer .sct-explorer__heading {
	margin: 0 0 clamp(42px, 4vw, 64px) !important;
	padding: 0 !important;
}


/*
 * Spécificité renforcée pour battre proprement
 * les styles typographiques dynamiques de Divi 5.
 */
body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer__heading
.et_pb_module_header,
body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer__heading
:is(h1, h2, h3, h4) {
	margin: 0 !important;
	padding: 0 !important;

	color: var(--sct-explorer-ink) !important;

	font-family: inherit !important;
	font-size: clamp(2.5rem, 1.9rem + 2.15vw, 4rem) !important;
	font-weight: 700 !important;
	line-height: 0.98 !important;
	letter-spacing: -0.035em !important;

	text-wrap: balance;
}


/* ==========================================================================
   4. GRILLE
   ========================================================================== */

.sct-explorer .sct-explorer__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	gap: var(--sct-explorer-gap) !important;
}


/* Tablette */
@media (min-width: 768px) {
	.sct-explorer .sct-explorer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* Desktop */
@media (min-width: 1100px) {
	.sct-explorer .sct-explorer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* ==========================================================================
   5. CARTE
   ========================================================================== */

.sct-explorer .sct-explorer-card {
	position: relative !important;
	isolation: isolate;
	overflow: hidden;

	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	aspect-ratio: 16 / 10;

	border: 0 !important;
	border-radius: 0 !important;

	background: var(--sct-explorer-ink);

	box-shadow: none !important;

	cursor: pointer;

	/*
	 * Évite quelques micro-artefacts de compositing
	 * pendant le scale de l'image.
	 */
	transform: translateZ(0);
}


/* ==========================================================================
   6. IMAGE
   ========================================================================== */

.sct-explorer .sct-explorer-card__media {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0;

	display: block !important;

	width: 100% !important;
	max-width: none !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* Wrapper Divi */
.sct-explorer
.sct-explorer-card__media
.et_pb_image_wrap {
	position: absolute !important;
	inset: 0 !important;

	display: block !important;

	width: 100% !important;
	max-width: none !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* Image native */
.sct-explorer
.sct-explorer-card__media
img {
	position: absolute !important;
	inset: 0 !important;

	display: block;

	width: 100% !important;
	max-width: none !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	object-fit: cover;
	object-position: center;

	transform: scale(1);
	transform-origin: center;

	backface-visibility: hidden;

	transition:
		transform 700ms var(--sct-explorer-ease),
		filter 500ms var(--sct-explorer-ease);
}


/* ==========================================================================
   7. OVERLAY PHOTOGRAPHIQUE
   ========================================================================== */

.sct-explorer .sct-explorer-card::after {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			180deg,
			rgb(var(--sct-explorer-overlay) / 0) 20%,
			rgb(var(--sct-explorer-overlay) / 0.04) 38%,
			rgb(var(--sct-explorer-overlay) / 0.18) 54%,
			rgb(var(--sct-explorer-overlay) / 0.55) 74%,
			rgb(var(--sct-explorer-overlay) / 0.94) 100%
		);

	opacity: 0.96;

	pointer-events: none;

	transition:
		opacity 500ms var(--sct-explorer-ease),
		background 500ms var(--sct-explorer-ease);
}


/* ==========================================================================
   8. CONTENU
   ========================================================================== */

body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__content {
	position: absolute !important;

	top: auto !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	z-index: 2;

	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;

	gap: clamp(7px, 0.55vw, 10px) !important;

	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;

	padding:
		var(--sct-explorer-card-pad)
		calc(
			var(--sct-explorer-card-pad) * 2
			+ var(--sct-explorer-arrow-size)
		)
		var(--sct-explorer-card-pad)
		var(--sct-explorer-card-pad)
		!important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	transform: translateY(0);

	transition:
		transform 500ms var(--sct-explorer-ease);
}


/*
 * Neutralise le comportement flex propre
 * aux modules Divi placés dans le Group.
 */
body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__content
> .et_pb_module {
	flex: 0 0 auto !important;

	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* ==========================================================================
   9. TITRE DE CARTE
   ========================================================================== */

body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__title {
	flex: 0 0 auto !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #fff !important;
}


body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__title
.et_pb_heading_container {
	width: 100%;

	margin: 0 !important;
	padding: 0 !important;
}


/*
 * Le contexte #et-boc / .et-l est volontaire :
 * Divi 5 génère ses couleurs de Heading avec
 * une très forte spécificité et !important.
 */
body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__title
.et_pb_module_header {
	max-width: 15ch;

	margin: 0 !important;
	padding: 0 !important;

	color: #fff !important;

	font-family: inherit !important;

	font-size:
		clamp(
			1.375rem,
			1.12rem + 0.65vw,
			1.875rem
		)
		!important;

	font-weight: 600 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.025em !important;

	text-decoration: none !important;

	text-wrap: balance;
}


/* Si Divi transforme un jour le titre en lien */
body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__title
a {
	color: inherit !important;
	text-decoration: none !important;
}


/* ==========================================================================
   10. TAGLINE
   ========================================================================== */

body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__tagline {
	flex: 0 0 auto !important;

	width: 100% !important;
	max-width: 34ch !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	color: rgb(255 255 255 / 0.82) !important;

	transition:
		color 400ms var(--sct-explorer-ease),
		opacity 400ms var(--sct-explorer-ease);
}


body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__tagline
.et_pb_text_inner,
body.et-db #et-boc .et-l
.sct-explorer
.sct-explorer-card
.sct-explorer-card__tagline
p {
	margin: 0 !important;
	padding: 0 !important;

	color: inherit !important;

	font-family: inherit !important;
	font-size: clamp(0.9375rem, 0.89rem + 0.16vw, 1.0625rem) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;

	letter-spacing: 0 !important;

	text-wrap: pretty;
}


/* ==========================================================================
   11. FLÈCHE
   ========================================================================== */

.sct-explorer
.sct-explorer-card__content::before {
	content: "";

	position: absolute;

	top: var(--sct-explorer-card-pad);
	right: var(--sct-explorer-card-pad);

	width: var(--sct-explorer-arrow-size);
	height: var(--sct-explorer-arrow-size);

	/*
	 * Flèche ↗ dessinée uniquement en CSS :
	 * - trait horizontal
	 * - trait vertical
	 * - diagonale
	 */
	background:
		linear-gradient(
			#fff,
			#fff
		)
		top right / 58% 1.5px no-repeat,

		linear-gradient(
			#fff,
			#fff
		)
		top right / 1.5px 58% no-repeat,

		linear-gradient(
			to bottom right,
			transparent calc(50% - 0.75px),
			#fff calc(50% - 0.75px),
			#fff calc(50% + 0.75px),
			transparent calc(50% + 0.75px)
		);

	opacity: 0.92;

	pointer-events: none;

	transform: translate3d(0, 0, 0);

	transition:
		transform 350ms var(--sct-explorer-ease),
		opacity 350ms var(--sct-explorer-ease);
}


/* ==========================================================================
   12. HOVER — MICRO-INTERACTIONS
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

	/*
	 * Zoom photographique très léger.
	 * 1.03 maximum pour ne pas donner un effet galerie "cheap".
	 */
	.sct-explorer
	.sct-explorer-card:hover
	.sct-explorer-card__media
	img {
		transform: scale(1.032);
	}


	/*
	 * L'overlay gagne juste assez de contraste
	 * pour accompagner l'interaction.
	 */
	.sct-explorer
	.sct-explorer-card:hover::after {
		opacity: 1;
	}


	/*
	 * Le contenu monte de seulement 2px.
	 * Cela donne une sensation de réponse sans faire bouger la carte.
	 */
	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card:hover
	.sct-explorer-card__content {
		transform: translateY(-2px);
	}


	/*
	 * La tagline devient légèrement plus lumineuse.
	 */
	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card:hover
	.sct-explorer-card__tagline {
		color: rgb(255 255 255 / 0.94) !important;
	}


	/*
	 * Micro mouvement diagonal de la flèche.
	 */
	.sct-explorer
	.sct-explorer-card:hover
	.sct-explorer-card__content::before {
		opacity: 1;

		transform:
			translate3d(
				3px,
				-3px,
				0
			);
	}
}


/* ==========================================================================
   13. FOCUS CLAVIER
   ========================================================================== */

.sct-explorer
.sct-explorer-card:focus-within,
.sct-explorer
.sct-explorer-card:focus-visible {
	outline: 2px solid var(--sct-explorer-blue);
	outline-offset: 4px;
}


/* ==========================================================================
   14. APPARITION AU SCROLL — PROGRESSIVE ENHANCEMENT
   ========================================================================== */

/*
 * Sur les navigateurs prenant en charge les View Timelines,
 * le titre et les cartes apparaissent subtilement lorsqu'ils
 * entrent dans le viewport.
 *
 * Aucun JS.
 * Aucun impact sur les navigateurs qui ne supportent pas cette API.
 */

@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.sct-explorer .sct-explorer__heading {
			animation-name: sct-explorer-heading-reveal;
			animation-duration: 1ms;
			animation-fill-mode: both;

			animation-timeline: view();
			animation-range:
				entry 5%
				cover 28%;
		}


		.sct-explorer
		.sct-explorer__grid
		> .sct-explorer-card {
			animation-name: sct-explorer-card-reveal;
			animation-duration: 1ms;
			animation-fill-mode: both;

			animation-timeline: view();
			animation-range:
				entry 4%
				cover 26%;
		}
	}
}


@keyframes sct-explorer-heading-reveal {

	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


@keyframes sct-explorer-card-reveal {

	from {
		opacity: 0;

		transform:
			translateY(24px)
			scale(0.985);
	}

	to {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}


/* ==========================================================================
   15. TABLETTE
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1099px) {

	.sct-explorer {
		--sct-explorer-card-pad: 22px;
		--sct-explorer-arrow-size: 22px;
	}

}


/* ==========================================================================
   16. MOBILE
   ========================================================================== */

@media (max-width: 767px) {

	.sct-explorer {
		--sct-explorer-card-pad: 18px;
		--sct-explorer-arrow-size: 20px;

		padding-block:
			clamp(
				56px,
				12vw,
				72px
			);
	}


	.sct-explorer
	.sct-explorer__heading {
		margin-bottom:
			clamp(
				30px,
				8vw,
				42px
			) !important;
	}


	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer__heading
	.et_pb_module_header,
	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer__heading
	:is(h1, h2, h3, h4) {
		font-size:
			clamp(
				2.2rem,
				9vw,
				3rem
			)
			!important;

		line-height: 1 !important;
	}


	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card
	.sct-explorer-card__content {
		gap: 7px !important;
	}


	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card
	.sct-explorer-card__title
	.et_pb_module_header {
		max-width: 16ch;

		font-size:
			clamp(
				1.25rem,
				5.6vw,
				1.625rem
			)
			!important;
	}


	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card
	.sct-explorer-card__tagline
	p {
		font-size: 0.9375rem !important;
		line-height: 1.35 !important;
	}
}


/* ==========================================================================
   17. REDUCED MOTION
   ========================================================================== */

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

	.sct-explorer
	.sct-explorer-card__media
	img,

	.sct-explorer
	.sct-explorer-card::after,

	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card
	.sct-explorer-card__content,

	.sct-explorer
	.sct-explorer-card__content::before,

	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card
	.sct-explorer-card__tagline {
		transition: none !important;
	}


	.sct-explorer
	.sct-explorer-card:hover
	.sct-explorer-card__media
	img,

	body.et-db #et-boc .et-l
	.sct-explorer
	.sct-explorer-card:hover
	.sct-explorer-card__content,

	.sct-explorer
	.sct-explorer-card:hover
	.sct-explorer-card__content::before {
		transform: none !important;
	}


	.sct-explorer
	.sct-explorer__heading,

	.sct-explorer
	.sct-explorer__grid
	> .sct-explorer-card {
		animation: none !important;

		opacity: 1 !important;
		transform: none !important;
	}
}