/*
Page d'accueil.

Astra enferme le contenu dans `#content > .ast-container`, qui a une largeur maximale
et des marges latérales. On la neutralise uniquement sur l'accueil, pour que les
sections gèrent elles-mêmes leur pleine largeur et leurs marges intérieures. Ça évite
les bricolages en 100vw, qui provoquent un défilement horizontal à cause de la barre
de défilement.
*/
body.home #content > .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.home #content {
	padding-top: 0;
	padding-bottom: 0;
}

/*
Astra applique `margin: 4em 0` à #primary dans sa mise en page « conteneur séparé »
(vérifié dans astra/assets/css/minified/style.min.css). Sur l'accueil, ça créait une
bande vide au-dessus de l'accroche et sous la dernière section.

`body #primary.ls-home` vaut un cran de spécificité de plus que le
`.ast-separate-container #primary` d'Astra, donc il passe devant sans !important.
*/
body #primary.ls-home {
	margin: 0;
	padding: 0;
	border: 0;
}

.ls-home {
	--ls-gutter: var(--space-5);
	--ls-measure: 1180px;
}

@media (min-width: 768px) {
	.ls-home {
		--ls-gutter: var(--space-8);
	}
}

/* ---------- Éléments partagés ---------- */

.ls-eyebrow {
	display: block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-accent-text);
	margin-bottom: var(--space-3);
}

.ls-section {
	max-width: var(--ls-measure);
	margin: 0 auto;
	padding: var(--space-8) var(--ls-gutter);
}

.ls-section__head {
	margin-bottom: var(--space-6);
}

.ls-home .ls-section__title {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: var(--font-weight-heading);
	line-height: var(--line-height-heading);
	color: var(--color-text);
	margin: 0;
}

/* Lien d'appel discret, souligné : le vocabulaire de l'imprimé, pas du bouton. */
.ls-home .ls-link {
	display: inline-block;
	margin-top: var(--space-5);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-accent-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
Bouton principal. Préfixé par `body` pour dépasser le style que Astra applique à tous
les liens et boutons depuis sa CSS en ligne (voir inc/astra-integration.php).
*/
body .ls-button {
	display: inline-block;
	background-color: var(--color-accent-button);
	color: var(--color-surface);
	border: 0;
	border-radius: var(--radius-sm);
	padding: var(--space-4) var(--space-6);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--transition-base);
}

body .ls-button:hover,
body .ls-button:focus {
	background-color: var(--color-accent-hover);
	color: var(--color-surface);
}

/*
Pas de traitement particulier de l'en-tête sur l'accueil : il reste le bandeau normal
d'Astra, dans le flux. Une version flottante puis collante a été essayée et écartée —
elle se battait avec le menu d'Astra pour un gain esthétique qui n'en valait pas le
désordre.
*/

/* ---------- 1. Accroche ---------- */

.ls-hero {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.ls-hero__media {
	position: relative;
	overflow: hidden;
	background-color: var(--color-surface-alt);
	/*
	Sur téléphone, la photo occupe toute la largeur. À 58vw, le recadrage ne gardait
	qu'une bande au milieu de la pièce : on monte à 80vw, presque carré comme la photo,
	pour que le soutien-gorge se lise en entier avant le titre.
	*/
	min-height: 80vw;
}

.ls-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	La photo est carrée et la pièce est posée au centre : on garde le centre, seul
	cadrage qui survive aussi bien à la colonne presque carrée du grand écran qu'à la
	bande large et basse du téléphone.
	*/
	object-position: 50% 50%;
}

.ls-hero__text {
	padding: var(--space-8) var(--ls-gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ls-home .ls-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: var(--font-weight-heading);
	line-height: 1.08;
	color: var(--color-text);
	margin: 0 0 var(--space-4);
	max-width: 22ch;
}

.ls-hero__lead {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-body);
	margin: 0 0 var(--space-6);
	max-width: 44ch;
}

.ls-hero .ls-button {
	align-self: flex-start;
}

@media (min-width: 900px) {
	.ls-hero {
		grid-template-columns: 1.1fr 1fr;
		min-height: min(78vh, 720px);
	}

	.ls-hero__media {
		min-height: 0;
	}

	.ls-hero__text {
		padding: var(--space-8);
		max-width: 40rem;
	}
}


.ls-stitch--band {
	max-width: var(--ls-measure);
	margin: 0 auto;
	padding: var(--space-6) var(--ls-gutter);
	box-sizing: border-box;
}

/*
Dans la section « comment ça se passe », le fil traverse les trois étapes : il les
coud ensemble, littéralement. Il est décoratif, donc posé derrière et hors du flux.
*/
.ls-steps__inner {
	position: relative;
}

/*
Le fil est centré sur le milieu des numéros, pas posé à une hauteur fixe : la hauteur
du SVG dépend de la largeur de la colonne (rapport 20:1), donc une valeur en dur le
faisait descendre sur les titres dès que l'écran s'élargissait. `translateY(-50%)`
recentre quelle que soit cette hauteur.
*/
.ls-stitch--connector {
	position: absolute;
	/* 1.5rem = la moitié des 3rem de haut d'un numéro. */
	top: 1.5rem;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
}

/*
Sous 800px les étapes s'empilent : un fil horizontal ne relierait plus rien, il ne
traverserait que la première. On le retire plutôt que de le laisser décorer au hasard.
*/
@media (max-width: 799px) {
	.ls-stitch--connector {
		display: none;
	}
}

/* ---------- 2. Dernières créations ---------- */

/*
La grille est définie ici plutôt que laissée à WooCommerce : les CSS de boutique ne
sont pas chargées sur l'accueil, et on veut trois colonnes prévisibles.
*/
.ls-home ul.products.ls-creations__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.ls-home ul.products.ls-creations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.ls-home ul.products.ls-creations__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ls-home ul.products.ls-creations__grid li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	list-style: none;
}

.ls-home ul.products.ls-creations__grid li.product a img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--space-3);
	background-color: var(--color-surface-alt);
}

.ls-home ul.products.ls-creations__grid li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
	color: var(--color-text);
	margin: 0 0 var(--space-1);
	padding: 0;
}

.ls-home ul.products.ls-creations__grid li.product .price {
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* La carte entière est un lien : pas de soulignement, sinon tout est souligné. */
.ls-home ul.products.ls-creations__grid li.product a.woocommerce-LoopProduct-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/*
Le bouton « Ajouter au panier » de la grille n'a pas de sens ici : sur une pièce sur
mesure, il faut passer par la fiche pour saisir les mesures.
*/
.ls-home ul.products.ls-creations__grid li.product a.add_to_cart_button,
.ls-home ul.products.ls-creations__grid li.product a.button {
	display: none;
}

/* ---------- 3. Comment ça se passe ---------- */

.ls-steps__list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

@media (min-width: 800px) {
	.ls-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6);
	}
}

.ls-step {
	list-style: none;
	margin: 0;
}

/*
Le numéro est un carré plein sur le fond : c'est lui qui « interrompt » le fil de
couture qui passe derrière, et qui donne l'impression que le fil relie les étapes.
*/
.ls-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background-color: var(--color-block);
	color: var(--color-surface);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	margin-bottom: var(--space-4);
}

.ls-home .ls-step__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	line-height: 1.25;
	color: var(--color-text);
	margin: 0 0 var(--space-2);
}

.ls-step__text {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-body);
	margin: 0;
}

/* ---------- 4. Le parti pris ---------- */

.ls-craft {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: center;
	border-top: 1px solid var(--color-border);
}

.ls-craft__media img {
	display: block;
	width: 100%;
	height: auto;
	background-color: var(--color-surface-alt);
}

.ls-craft__text p {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text-body);
	margin: 0 0 var(--space-4);
	max-width: 46ch;
}

@media (min-width: 800px) {
	.ls-craft {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: var(--space-8);
	}
}