/* Carousel de la page d'accueil (slides gérées dans l'admin, module "slideshow") */

.home-carousel {
	--hc-pink : #FC93F3;
	--hc-ink  : #333333;
	--hc-gap  : clamp(12px, 2vw, 24px);
	background    : #F7F6F2;
	color         : var(--hc-ink);
	font-family   : 'Lato', sans-serif;
	padding       : clamp(22px, 3.4vw, 44px) 0 clamp(26px, 3.6vw, 44px);
	margin-bottom : clamp(16px, 3vw, 40px);
	overflow      : hidden;
}

/* ---------- photos ---------- */

.hc-view {
	position     : relative;
	width        : 62%;
	margin       : 0 auto;
	aspect-ratio : 3 / 2;
}

.hc-slide {
	position            : absolute;
	top                 : 0;
	right               : 0;
	bottom              : 0;
	left                : 0;
	border-radius       : 20px;
	overflow            : hidden;
	opacity             : 0;
	background-size     : cover;
	background-position : 50% 50%;
	background-repeat   : no-repeat;
	box-shadow          : 0 34px 50px -34px rgba(110, 50, 95, 0.55);
	cursor              : pointer;
	transition          : opacity 0.6s ease, transform 0.85s cubic-bezier(0.65, 0, 0.25, 1);
}

.hc-slide.is-active {
	opacity : 1;
	cursor  : default;
}

/* ---------- texte ---------- */

.hc-row {
	width                 : 62%;
	margin                : 26px 0 0 19%;
	display               : grid;
	grid-template-columns : minmax(0, 1fr) auto;
	gap                   : 20px 28px;
	align-items           : end;
}

.hc-copies {
	display : grid;
}

.hc-copy {
	grid-area  : 1 / 1;
	opacity    : 0;
	visibility : hidden;
	transform  : translateY(12px);
	transition : opacity 0.4s ease, transform 0.5s ease, visibility 0s 0.4s;
}

.hc-copy.is-active {
	opacity    : 1;
	visibility : visible;
	transform  : none;
	transition : opacity 0.5s ease 0.25s, transform 0.6s ease 0.25s;
}

.hc-copy h3 {
	font           : 900 clamp(24px, 3.1vw, 40px) / 1.05 'Lato', sans-serif;
	letter-spacing : -0.015em;
	color          : var(--hc-ink);
	margin         : 0 0 10px;
	text-wrap      : balance;
}

.hc-desc {
	font      : 400 16px / 1.6 'Lato', sans-serif;
	color     : #555555;
	max-width : 52ch;
}

.hc-desc p {
	margin : 0 0 0.6em;
}

.hc-desc p:last-child {
	margin-bottom : 0;
}

.hc-cta {
	display                 : inline-flex;
	align-items             : center;
	gap                     : 8px;
	margin-top              : 14px;
	font                    : italic 400 21px 'Playfair Display', serif;
	color                   : var(--hc-ink);
	text-decoration         : underline;
	text-decoration-color   : var(--hc-pink);
	text-decoration-thickness : 3px;
	text-underline-offset   : 6px;
	transition              : gap 0.25s ease;
}

.hc-cta:hover,
.hc-cta:focus {
	gap             : 14px;
	color           : var(--hc-ink);
	text-decoration : underline;
}

.hc-arrow {
	width  : 18px;
	height : 18px;
	flex   : none;
}

/* ---------- commandes ---------- */

.hc-side {
	display       : grid;
	gap           : 14px;
	justify-items : end;
}

.hc-count {
	font  : italic 400 16px 'Playfair Display', serif;
	color : #777777;
}

.hc-count b {
	font           : inherit;
	font-size      : 30px;
	font-weight    : 400;
	color          : var(--hc-ink);
	margin-right   : 3px;
	vertical-align : -3px;
}

.hc-arrows {
	display : flex;
	gap     : 8px;
}

.hc-arrows button {
	width         : 48px;
	height        : 48px;
	padding       : 0;
	border-radius : 50%;
	display       : grid;
	place-items   : center;
	background    : none;
	border        : 1.5px solid var(--hc-ink);
	color         : var(--hc-ink);
	cursor        : pointer;
	transition    : background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hc-arrows button:hover {
	background   : var(--hc-pink);
	border-color : var(--hc-pink);
}

.hc-arrows button:active {
	transform : scale(0.95);
}

.hc-arrows .hc-prev svg {
	transform : scaleX(-1);
}

.hc-lines {
	grid-column : 1 / -1;
	display     : flex;
	gap         : 8px;
	margin-top  : 4px;
}

.hc-lines button {
	flex       : 0 0 44px;
	padding    : 8px 0;
	background : none;
	border     : 0;
	position   : relative;
	cursor     : pointer;
}

.hc-lines button::before {
	content    : "";
	display    : block;
	height     : 3px;
	background : #D9D4C8;
}

.hc-lines i {
	position   : absolute;
	left       : 0;
	top        : 8px;
	height     : 3px;
	width      : 0;
	background : var(--hc-pink);
}

.hc-lines i.run {
	animation : hc-fill var(--hc-dur, 6500ms) linear forwards;
}

.home-carousel.is-paused .hc-lines i.run {
	animation-play-state : paused;
}

@keyframes hc-fill {
	from { width : 0; }
	to { width : 100%; }
}

.home-carousel button:focus-visible,
.home-carousel a:focus-visible {
	outline        : 2px solid var(--hc-ink);
	outline-offset : 3px;
}

/* ---------- mobile / tablette ---------- */

@media (max-width : 760px) {
	.hc-view {
		width         : 80%;
	}

	.hc-slide {
		border-radius : 14px;
	}

	.hc-row {
		width                 : 80%;
		margin-left           : 10%;
		grid-template-columns : 1fr;
	}

	.hc-copy h3 {
		font-size : 24px;
	}

	.hc-side {
		justify-items   : start;
		grid-auto-flow  : column;
		align-items     : center;
		justify-content : space-between;
	}

	.hc-arrows button {
		width  : 44px;
		height : 44px;
	}
}

@media (prefers-reduced-motion : reduce) {
	.hc-slide,
	.hc-copy,
	.hc-copy.is-active {
		transition : none;
	}

	.hc-lines i.run {
		animation : none;
		width     : 100%;
	}
}