/**
 * KINGSEVEN 2026 — Page d'accueil
 */

/* ==================================================================
 * Bandeau
 * ================================================================== */
.ks-hero {
	position: relative;
	display: grid;
	/* L'image et le contenu occupent la même cellule : le texte se superpose
	   sans positionnement absolu, donc sans risque de débordement. */
	grid-template-areas: 'stack';
	align-items: center;
	min-height: clamp(420px, 52vw, 640px);
	background: var(--ks-bg-media);
	overflow: hidden;
}

.ks-hero__media,
.ks-hero__scrim,
.ks-hero__inner {
	grid-area: stack;
}

.ks-hero__media {
	position: relative;
	height: 100%;
}

/* <picture> est un conteneur en ligne sans hauteur propre : sans cette règle,
   le `height: 100%` de l'image se résout contre une hauteur automatique et
   l'image ne remplit pas le bandeau. */
.ks-hero__media picture {
	display: block;
	height: 100%;
}

.ks-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Le sujet des photos lifestyle est à gauche : on garde ce bord visible
	   quel que soit le recadrage. */
	object-position: center left;
}

/*
 * Voile clair côté texte.
 *
 * Sur la maquette, le texte tombe sur une zone de ciel naturellement claire.
 * L'image étant administrable, rien ne garantit que la prochaine photo offrira
 * la même zone calme : sans voile, un titre noir peut devenir illisible. Le
 * dégradé est transparent sur les deux tiers gauches, donc la photographie
 * reste pleinement visible.
 */
.ks-hero__scrim {
	z-index: 1;
	/* `align-items: center` sur le conteneur donnerait une hauteur nulle à un
	   élément vide : il faut l'étirer explicitement. */
	align-self: stretch;
	background: linear-gradient(
		270deg,
		rgba(253, 253, 252, 0.94) 0%,
		rgba(253, 253, 252, 0.82) 26%,
		rgba(253, 253, 252, 0.35) 44%,
		rgba(253, 253, 252, 0) 62%
	);
	pointer-events: none;
}

.ks-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.ks-hero__content {
	max-width: 30rem;
	/* Le texte est à droite sur la maquette desktop. */
	margin-left: auto;
}

.ks-hero__signature {
	width: clamp(130px, 15vw, 190px);
	height: auto;
	margin: 0 0 var(--ks-space-5) auto;
	/*
	 * La signature est un tracé blanc. Posée sur le ciel clair de la photo, et
	 * par-dessus le voile de lisibilité, elle disparaît presque. Une ombre
	 * portée douce lui redonne un contour sans l'alourdir, quelle que soit
	 * l'image choisie en administration.
	 */
	filter: drop-shadow(0 1px 3px rgba(17, 17, 17, 0.55))
		drop-shadow(0 0 12px rgba(17, 17, 17, 0.25));
}

.ks-hero__eyebrow {
	margin-bottom: var(--ks-space-4);
	font-size: var(--ks-text-xs);
	font-weight: var(--ks-weight-medium);
	letter-spacing: var(--ks-tracking-wider);
	text-transform: uppercase;
	color: var(--ks-ink);
}

.ks-hero__title {
	margin-bottom: var(--ks-space-5);
	font-size: var(--ks-text-3xl);
	font-weight: var(--ks-weight-bold);
	line-height: 1.02;
}

.ks-hero__text {
	margin-bottom: var(--ks-space-8);
	font-size: var(--ks-text-md);
	color: var(--ks-ink);
	max-width: 24rem;
}

@media (max-width: 767px) {
	/* Le texte passe sous l'image : plus rien à protéger. */
	.ks-hero__scrim {
		display: none;
	}

	.ks-hero {
		min-height: 0;
		/* En portrait, le texte passe SOUS l'image dans un bloc sombre plutôt
		   que par-dessus : c'est la disposition de la maquette mobile, et cela
		   garantit le contraste quelle que soit la photo. */
		grid-template-areas:
			'media'
			'content';
		align-items: stretch;
	}

	.ks-hero__media {
		grid-area: media;
		aspect-ratio: 4 / 5;
	}

	.ks-hero__inner {
		grid-area: content;
		padding-block: var(--ks-space-6) var(--ks-space-8);
	}

	.ks-hero__content {
		max-width: none;
		margin-left: 0;
	}

	.ks-hero__text {
		max-width: none;
		margin-bottom: var(--ks-space-6);
	}

	/* La signature manuscrite reste sur la photo, en bas à gauche. */
	.ks-hero__signature {
		position: absolute;
		left: var(--ks-gutter);
		bottom: var(--ks-space-4);
		z-index: 3;
		margin: 0;
		filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
	}

	.ks-hero__cta {
		width: 100%;
	}
}

/* ==================================================================
 * Barre de réassurance
 * ================================================================== */
.ks-reassurance {
	background: var(--ks-bg-alt);
	padding-block: var(--ks-space-5);
}

.ks-reassurance__list {
	display: grid;
	grid-template-columns: repeat(var(--ks-trust-cols, 4), minmax(0, 1fr));
	gap: var(--ks-space-4) var(--ks-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-reassurance__item {
	display: flex;
	align-items: center;
	gap: var(--ks-space-3);
	justify-content: center;
}

.ks-reassurance__item svg {
	flex: none;
	stroke-width: 1.2;
	color: var(--ks-black);
}

.ks-reassurance__title {
	display: block;
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-semibold);
	color: var(--ks-black);
	line-height: var(--ks-leading-snug);
}

.ks-reassurance__sub {
	display: block;
	font-size: var(--ks-text-xs);
	color: var(--ks-text-muted);
	line-height: var(--ks-leading-snug);
}

@media (max-width: 767px) {
	/* Défilement horizontal plutôt que quatre colonnes illisibles. */
	.ks-reassurance__list {
		display: flex;
		overflow-x: auto;
		gap: var(--ks-space-6);
		margin-inline: calc(var(--ks-gutter) * -1);
		padding-inline: var(--ks-gutter);
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	.ks-reassurance__list::-webkit-scrollbar {
		display: none;
	}

	.ks-reassurance__item {
		flex: 0 0 auto;
		flex-direction: column;
		text-align: center;
		gap: var(--ks-space-2);
		max-width: 8.5rem;
		scroll-snap-align: center;
	}
}

/* ==================================================================
 * Collections : bannière éditoriale + univers
 * ================================================================== */
.ks-collections__split {
	display: grid;
	grid-template-columns: 4fr 6fr;
	align-items: stretch;
}

.ks-collections__split--single {
	grid-template-columns: 1fr;
}

/* --- Bannière éditoriale --------------------------------------- */
.ks-editorial {
	position: relative;
	display: grid;
	grid-template-areas: 'stack';
	align-items: center;
	min-height: clamp(260px, 26vw, 340px);
	background: var(--ks-ink);
	overflow: hidden;
}

.ks-editorial__img {
	grid-area: stack;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ks-editorial__content {
	grid-area: stack;
	position: relative;
	z-index: 2;
	padding: var(--ks-space-8) clamp(1.5rem, 3vw, 3rem);
	color: var(--ks-white);
	max-width: 26rem;
}

/* Voile dégradé : sans lui, un titre blanc sur une photo claire devient
   illisible. Le dégradé conserve la lecture de l'image à droite. */
.ks-editorial::after {
	content: '';
	grid-area: stack;
	z-index: 1;
	align-self: stretch;
	background: linear-gradient(90deg, rgba(17, 17, 17, 0.72) 0%, rgba(17, 17, 17, 0.35) 55%, rgba(17, 17, 17, 0.1) 100%);
}

.ks-editorial__title {
	color: var(--ks-white);
	font-size: var(--ks-text-2xl);
	margin-bottom: var(--ks-space-3);
}

.ks-editorial__text {
	margin-bottom: var(--ks-space-6);
	font-size: var(--ks-text-md);
	line-height: var(--ks-leading-snug);
	color: rgba(255, 255, 255, 0.92);
}

/* --- Nos univers ------------------------------------------------ */
.ks-universes {
	padding: var(--ks-space-8) var(--ks-gutter);
}

.ks-universes__grid {
	display: grid;
	grid-template-columns: repeat(var(--ks-cols, 3), minmax(0, 1fr));
	gap: var(--ks-space-4);
}

.ks-universe__link {
	position: relative;
	display: grid;
	grid-template-areas: 'stack';
	align-items: end;
	aspect-ratio: 3 / 4;
	border-radius: var(--ks-radius);
	overflow: hidden;
	background: var(--ks-bg-media);
}

.ks-universe__img {
	grid-area: stack;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ks-duration-slow) var(--ks-ease);
}

.ks-universe__link:hover .ks-universe__img {
	transform: scale(1.04);
}

.ks-universe__link::after {
	content: '';
	grid-area: stack;
	align-self: stretch;
	background: linear-gradient(180deg, transparent 45%, rgba(17, 17, 17, 0.7) 100%);
}

.ks-universe__content {
	grid-area: stack;
	position: relative;
	z-index: 2;
	padding: var(--ks-space-5);
	color: var(--ks-white);
}

.ks-universe__title {
	display: block;
	font-size: var(--ks-text-lg);
	font-weight: var(--ks-weight-bold);
	line-height: 1.1;
}

.ks-universe__text {
	display: block;
	font-size: var(--ks-text-sm);
	color: rgba(255, 255, 255, 0.85);
}

.ks-universe__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ks-space-2);
	margin-top: var(--ks-space-3);
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-medium);
}

@media (max-width: 1023px) {
	.ks-collections__split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/* Maquette mobile : grandes cartes verticales successives, pleine largeur. */
	.ks-universes__grid {
		grid-template-columns: 1fr;
	}

	.ks-universe__link {
		aspect-ratio: 16 / 9;
	}

	.ks-universe__cta {
		/* Sur mobile la maquette remplace le libellé par une pastille fléchée
		   en bout de carte. */
		position: absolute;
		right: var(--ks-space-4);
		bottom: var(--ks-space-4);
		width: 40px;
		height: 40px;
		justify-content: center;
		border-radius: var(--ks-radius-pill);
		background: var(--ks-white);
		color: var(--ks-black);
		font-size: 0;
		margin: 0;
	}

	.ks-universe__cta span[aria-hidden] {
		font-size: var(--ks-text-md);
	}
}

/* ==================================================================
 * Avis
 * ================================================================== */
.ks-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: var(--ks-space-8);
	align-items: start;
}

.ks-review {
	margin: 0;
	display: grid;
	gap: var(--ks-space-3);
}

.ks-review__text {
	margin: 0;
	font-size: var(--ks-text-sm);
	line-height: var(--ks-leading-relaxed);
	color: var(--ks-text);
	quotes: '«\00a0' '\00a0»';
}

.ks-review__text::before {
	content: open-quote;
}

.ks-review__text::after {
	content: close-quote;
}

.ks-review__author {
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-semibold);
	color: var(--ks-black);
}

.ks-reviews__summary {
	display: grid;
	gap: var(--ks-space-1);
	justify-items: start;
	padding-left: var(--ks-space-8);
	border-left: 1px solid var(--ks-border);
}

.ks-reviews__score {
	margin: 0;
	font-size: var(--ks-text-lg);
	color: var(--ks-black);
}

.ks-reviews__meta {
	margin: 0;
	font-size: var(--ks-text-xs);
	color: var(--ks-text-muted);
}

@media (max-width: 1023px) {
	.ks-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ks-space-6);
	}

	.ks-reviews__summary {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--ks-border);
		padding-top: var(--ks-space-5);
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {
	.ks-reviews__grid {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================
 * Newsletter
 * ================================================================== */
.ks-newsletter {
	background: var(--ks-bg-alt);
}

.ks-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr minmax(320px, 460px) auto;
	align-items: center;
	gap: var(--ks-space-8);
}

.ks-newsletter__title {
	margin-bottom: var(--ks-space-2);
	font-size: var(--ks-text-lg);
}

.ks-newsletter__desc {
	margin: 0;
	font-size: var(--ks-text-sm);
	color: var(--ks-text-muted);
}

/* Habillage du formulaire rendu par l'extension newsletter : on ne touche
   pas à son balisage, seulement à son apparence. */
.ks-newsletter__form form {
	display: flex;
	gap: 0;
	background: var(--ks-white);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
	overflow: hidden;
}

.ks-newsletter__form input[type='email'],
.ks-newsletter__form input[type='text'] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
}

.ks-newsletter__form input[type='submit'],
.ks-newsletter__form button[type='submit'] {
	flex: none;
	padding: 0 var(--ks-space-8);
	min-height: 48px;
	background: var(--ks-black);
	color: var(--ks-white);
	border: 0;
	border-radius: 0;
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-semibold);
	cursor: pointer;
}

.ks-newsletter__form label {
	display: contents;
}

@media (max-width: 1023px) {
	.ks-newsletter__inner {
		grid-template-columns: 1fr;
		gap: var(--ks-space-5);
	}

	.ks-newsletter__socials {
		justify-content: flex-start;
	}
}

/* ==================================================================
 * Contenu de référencement, en bas de page
 * ================================================================== */
.ks-home-seo {
	background: var(--ks-offwhite);
	border-top: 1px solid var(--ks-border);
	font-size: var(--ks-text-sm);
	color: var(--ks-text-muted);
}

.ks-home-seo .ks-prose h1,
.ks-home-seo .ks-prose h2 {
	font-size: var(--ks-text-md);
	color: var(--ks-text);
}