/* ==========================================================================
   HARD DÉCO — HERO ACCUEIL
   ========================================================================== */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
	--hd-hero-duration: 6000ms;
	--hd-hero-fade: 1800ms;
	--hd-hero-zoom: 1.12;

	--hd-hero-accent: #27c0e2;
	--hd-hero-white: #f5f2ee;
}


/* ==========================================================================
   NORMALISATION LIMITÉE AU HERO
   ========================================================================== */

.hd-home-hero,
.hd-home-hero *,
.hd-home-hero *::before,
.hd-home-hero *::after {
	box-sizing: border-box;
}


/* ==========================================================================
   BLOCKSY — SUPPRESSION DES ESPACEMENTS SUR LA PAGE D’ACCUEIL
   ========================================================================== */

.home .ct-container-full[data-content="normal"] {
	padding-inline: 0 !important;
}

.home .ct-container-full[data-vertical-spacing="top:bottom"] {
	padding-block: 0 !important;
	margin-block: 0 !important;

	--theme-block-top-spacing: 0px !important;
	--theme-block-bottom-spacing: 0px !important;
}

.home .entry-content {
	padding: 0 !important;
}


/* ==========================================================================
   GROUPE GUTENBERG PRINCIPAL

   Classe du groupe extérieur :
   hd-home-hero
   ========================================================================== */

.home .hd-home-hero {
	position: relative;
	isolation: isolate;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	width: 100vw;
	max-width: 100vw;

	height: 100vh;
	height: 100svh;
	min-height: 600px;

	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	padding: 0 !important;

	overflow: hidden;
	background: #111;
}


/* ==========================================================================
   BLOC SHORTCODE — POSITIONNÉ EN FOND
   ========================================================================== */

.home .hd-home-hero > .wp-block-shortcode {
	position: absolute;
	inset: 0;
	z-index: 0;

	display: block;

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

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


/* ==========================================================================
   CONTENEUR DU SLIDER
   ========================================================================== */

.home .hd-hero-background {
	position: absolute;
	inset: 0;

	display: block;

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

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

	overflow: hidden;
	background: #111;
}


/* ==========================================================================
   SLIDES
   ========================================================================== */

.home .hd-hero-background__slides {
	position: absolute;
	inset: 0;

	display: block;

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

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

.home .hd-hero-slide {
	position: absolute;
	inset: 0;
	z-index: 0;

	display: block;

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

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

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity var(--hd-hero-fade) ease-in-out,
		visibility 0s linear var(--hd-hero-fade);

	will-change: opacity;
}

.home .hd-hero-slide.is-active {
	z-index: 1;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity var(--hd-hero-fade) ease-in-out,
		visibility 0s linear 0s;
}

.home .hd-hero-slide__picture {
	position: absolute;
	inset: 0;

	display: block;

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

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

	overflow: hidden;
}

.home .hd-hero-slide__image {
	display: block;

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

	margin: 0;
	padding: 0;

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

	transform-origin: center center;
	will-change: transform;
}


/* ==========================================================================
   ANIMATIONS KEN BURNS VARIÉES

   Les mouvements sont attribués automatiquement selon l’ordre des images.
   Les délais négatifs font démarrer chaque animation à un point différent.
   ========================================================================== */

/* Slide 1, 7, 13… */
.home .hd-hero-slide:nth-child(6n + 1) .hd-hero-slide__image {
	animation: hdHeroMove1 15s ease-in-out -2s infinite alternate;
}

/* Slide 2, 8, 14… */
.home .hd-hero-slide:nth-child(6n + 2) .hd-hero-slide__image {
	animation: hdHeroMove2 17s ease-in-out -7s infinite alternate;
}

/* Slide 3, 9, 15… */
.home .hd-hero-slide:nth-child(6n + 3) .hd-hero-slide__image {
	animation: hdHeroMove3 16s ease-in-out -4s infinite alternate;
}

/* Slide 4, 10, 16… */
.home .hd-hero-slide:nth-child(6n + 4) .hd-hero-slide__image {
	animation: hdHeroMove4 18s ease-in-out -9s infinite alternate;
}

/* Slide 5, 11, 17… */
.home .hd-hero-slide:nth-child(6n + 5) .hd-hero-slide__image {
	animation: hdHeroMove5 16.5s ease-in-out -5s infinite alternate;
}

/* Slide 6, 12, 18… */
.home .hd-hero-slide:nth-child(6n) .hd-hero-slide__image {
	animation: hdHeroMove6 17.5s ease-in-out -11s infinite alternate;
}


/* Zoom avant vers le haut et la gauche */
@keyframes hdHeroMove1 {
	0% {
		transform:
			scale(1.03)
			translate3d(0, 0, 0);
	}

	100% {
		transform:
			scale(1.15)
			translate3d(-1.6%, -1%, 0);
	}
}


/* Dézoom depuis la droite */
@keyframes hdHeroMove2 {
	0% {
		transform:
			scale(1.16)
			translate3d(1.5%, -0.4%, 0);
	}

	100% {
		transform:
			scale(1.04)
			translate3d(0, 0.5%, 0);
	}
}


/* Zoom diagonal du bas-gauche vers le haut-droit */
@keyframes hdHeroMove3 {
	0% {
		transform:
			scale(1.04)
			translate3d(-1%, 0.8%, 0);
	}

	100% {
		transform:
			scale(1.15)
			translate3d(1.4%, -1%, 0);
	}
}


/* Panoramique de droite à gauche */
@keyframes hdHeroMove4 {
	0% {
		transform:
			scale(1.13)
			translate3d(1.6%, 0.3%, 0);
	}

	100% {
		transform:
			scale(1.13)
			translate3d(-1.6%, -0.4%, 0);
	}
}


/* Zoom du bas-droit vers le haut-gauche */
@keyframes hdHeroMove5 {
	0% {
		transform:
			scale(1.04)
			translate3d(1%, 0.9%, 0);
	}

	100% {
		transform:
			scale(1.16)
			translate3d(-1.4%, -1%, 0);
	}
}


/* Panoramique de gauche à droite avec léger dézoom */
@keyframes hdHeroMove6 {
	0% {
		transform:
			scale(1.15)
			translate3d(-1.5%, -0.4%, 0);
	}

	100% {
		transform:
			scale(1.07)
			translate3d(1.4%, 0.5%, 0);
	}
}


/* ==========================================================================
   OVERLAY
   ========================================================================== */

.home .hd-hero-background__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;

	width: 100%;
	height: 100%;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(10, 8, 6, 0.15) 0%,
			rgba(10, 8, 6, 0.35) 50%,
			rgba(10, 8, 6, 0.72) 100%
		);
}


/* ==========================================================================
   CONTENU GUTENBERG

   Classe du groupe de contenu :
   hd-home-hero__content
   ========================================================================== */

.home .hd-home-hero__content {
	position: relative;
	z-index: 20;

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

	width: var(--theme-container-width, calc(100% - 40px));
	max-width: 1280px;

	margin: 0 auto !important;

	padding-top: 120px;
	padding-right: 0;
	padding-bottom: 20vh;
	padding-left: 0;
}


/*
 * Empêche les blocs enfants de passer derrière le fond.
 */
.home .hd-home-hero__content > * {
	position: relative;
	z-index: 1;
}


/* ==========================================================================
   APPARITION DU CONTENU

   Classes Gutenberg :
   hd-home-hero__title
   hd-home-hero__subtitle
   hd-home-hero__actions
   ========================================================================== */

.home .hd-home-hero__title,
.home .hd-home-hero__subtitle,
.home .hd-home-hero__actions {
	position: relative;
	z-index: 2;

	visibility: visible !important;
	opacity: 0;

	transform: translate3d(0, 22px, 0);
	will-change: opacity, transform;

	animation-name: hdHeroFadeUp;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.home .hd-home-hero__title {
	display: block !important;

	max-width: 14ch;

	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 1.4rem !important;
	margin-left: 0 !important;

	color: var(--hd-hero-white);

 
	font-size: clamp(2.8rem, 6.5vw, 4rem);
	font-weight: 650;
	line-height: 1.08;

	animation-delay: 0.35s;
}

.home .hd-home-hero__title em,
.home .hd-home-hero__title strong {
	color: var(--hd-hero-accent);
	font-style: italic;
}


/* ==========================================================================
   SOUS-TITRE
   ========================================================================== */

.home .hd-home-hero__subtitle {
	display: block !important;

	max-width: 46ch;

	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 2.6rem !important;
	margin-left: 0 !important;

	color: rgba(255, 255, 255, 0.82);

	font-size: clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 300;
	line-height: 1.7;

	animation-delay: 0.65s;
}


/* ==========================================================================
   BLOC BOUTONS
   ========================================================================== */

.home .hd-home-hero__actions {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;

	width: auto;

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

	animation-delay: 0.95s;
}


/*
 * Gutenberg peut ajouter son propre conteneur ou des styles internes.
 * On force les boutons à rester visibles.
 */
.home .hd-home-hero__actions > .wp-block-button,
.home .hd-home-hero__actions .wp-block-button {
	display: block;

	margin: 0;

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


/* ==========================================================================
   BOUTONS GUTENBERG
   ========================================================================== */

.home .hd-home-hero__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;

	min-height: 46px;
	padding: 0.85rem 2rem;

	border: 1px solid transparent;
	border-radius: 2px;


	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;

	opacity: 1 !important;
	visibility: visible !important;

	transition:
		color 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.3s ease;
}


/* Premier bouton : contour blanc */
.home .hd-home-hero__actions
.wp-block-button:first-child
.wp-block-button__link {
	color: var(--hd-hero-white);
	background: transparent;
	border-color: rgba(245, 242, 238, 0.55);
}

.home .hd-home-hero__actions
.wp-block-button:first-child
.wp-block-button__link:hover {
	color: var(--hd-hero-white);
	background: rgba(245, 242, 238, 0.1);
	border-color: var(--hd-hero-white);

	transform: translateY(-2px);
}


/* Deuxième bouton : bleu principal */
.home .hd-home-hero__actions
.wp-block-button:nth-child(2)
.wp-block-button__link {
	color: #102029;
	background: var(--hd-hero-accent);
	border-color: var(--hd-hero-accent);
}

.home .hd-home-hero__actions
.wp-block-button:nth-child(2)
.wp-block-button__link:hover {
	color: #102029;
	background: #59d1eb;
	border-color: #59d1eb;

	box-shadow: 0 8px 30px rgba(39, 192, 226, 0.3);
	transform: translateY(-2px);
}


/* ==========================================================================
   POINTS DE NAVIGATION
   ========================================================================== */

.home .hd-hero-background__dots {
	position: absolute;
	right: clamp(2rem, 5vw, 4rem);
	bottom: clamp(1.5rem, 3vh, 2.5rem);
	z-index: 20;

	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.home .hd-hero-dot {
	appearance: none;

	display: block;

	width: 6px;
	height: 6px;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(245, 242, 238, 0.35);
	cursor: pointer;

	transition:
		width 0.4s ease,
		background-color 0.4s ease,
		transform 0.25s ease;
}

.home .hd-hero-dot:hover,
.home .hd-hero-dot:focus-visible {
	background: rgba(245, 242, 238, 0.8);
	transform: scale(1.25);

	outline: none;
}

.home .hd-hero-dot.is-active {
	width: 22px;

	border-radius: 3px;
	background: var(--hd-hero-accent);
}


/* ==========================================================================
   INDICATION DE SCROLL
   ========================================================================== */

.home .hd-hero-background__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 3vh, 2.5rem);
	z-index: 20;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;

	transform: translateX(-50%);
	pointer-events: none;
}

.home .hd-hero-background__scroll > span:first-child {
	color: rgba(245, 242, 238, 0.5);

	font-size: 0.65rem;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
}

.home .hd-hero-background__scroll-line {
	display: block;

	width: 1px;
	height: 36px;

	background:
		linear-gradient(
			to bottom,
			var(--hd-hero-accent),
			transparent
		);

	transform-origin: top center;
	animation: hdHeroScrollPulse 2s 2.5s ease-in-out infinite;
}


/* ==========================================================================
   ANIMATIONS DU CONTENU
   ========================================================================== */

@keyframes hdHeroFadeUp {
	0% {
		visibility: visible;
		opacity: 0;

		transform: translate3d(0, 22px, 0);
	}

	100% {
		visibility: visible;
		opacity: 1;

		transform: translate3d(0, 0, 0);
	}
}

@keyframes hdHeroScrollPulse {
	0%,
	100% {
		opacity: 0.4;
		transform: scaleY(1);
	}

	50% {
		opacity: 1;
		transform: scaleY(1.15);
	}
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1024px) {

	.home .hd-home-hero__content {
		width: calc(100% - 48px);

		padding-top: 110px;
		padding-bottom: 16vh;
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

	.home .hd-home-hero {
		height: 100svh;
		min-height: 620px;
	}

	.home .hd-home-hero__content {
		align-items: center;

		width: 100%;

		padding-top: 110px;
		padding-right: 1.5rem;
		padding-bottom: 15vh;
		padding-left: 1.5rem;

		text-align: center;
	}

	.home .hd-home-hero__title {
		max-width: 20ch;

		margin-right: auto !important;
		margin-left: auto !important;

		font-size: clamp(2.2rem, 9vw, 3rem);
	}

	.home .hd-home-hero__subtitle {
		max-width: 38ch;

		margin-right: auto !important;
		margin-left: auto !important;
	}

	.home .hd-home-hero__actions {
		justify-content: center;

		width: 100%;
	}

	.home .hd-home-hero__actions .wp-block-button {
		width: 100%;
	}

	.home .hd-home-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.home .hd-hero-background__dots {
		right: 50%;
		bottom: 1rem;

		transform: translateX(50%);
	}

	.home .hd-hero-background__scroll {
		display: none;
	}
}


/* ==========================================================================
   TRÈS PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 380px) {

	.home .hd-home-hero__content {
		padding-right: 1rem;
		padding-bottom: 13vh;
		padding-left: 1rem;
	}

	.home .hd-home-hero__title {
		font-size: 2rem;
	}

	.home .hd-home-hero__subtitle {
		margin-bottom: 1.8rem !important;

		font-size: 0.92rem;
	}
}


/* ==========================================================================
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   ========================================================================== */

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

	.home .hd-hero-slide,
	.home .hd-hero-slide__image,
	.home .hd-hero-background__scroll-line,
	.home .hd-home-hero__title,
	.home .hd-home-hero__subtitle,
	.home .hd-home-hero__actions {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.home .hd-hero-slide__image {
		transform: scale(1.03) !important;
	}

	.home .hd-home-hero__title,
	.home .hd-home-hero__subtitle,
	.home .hd-home-hero__actions {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}
}