/**
 * KINGSEVEN 2026 — Structure de page
 *
 * Conteneurs, grilles, rythme vertical des sections, en-têtes de section.
 */

/* ------------------------------------------------------------------
 * Conteneurs
 * ------------------------------------------------------------------ */
.ks-container {
	width: 100%;
	max-width: var(--ks-container);
	margin-inline: auto;
	padding-inline: var(--ks-gutter);
}

.ks-container--narrow {
	max-width: var(--ks-container-narrow);
}

/* Pleine largeur d'écran, sans gouttière : bannières et hero. */
.ks-bleed {
	width: 100%;
}

/* ------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------ */
.ks-section {
	padding-block: var(--ks-section-y);
}

.ks-section--tight {
	padding-block: calc(var(--ks-section-y) * 0.6);
}

.ks-section--alt {
	background: var(--ks-bg-alt);
}

/*
 * En-tête de section des maquettes : titre à gauche suivi d'un filet
 * horizontal court, lien d'action à droite.
 *
 *   Nos iconiques ———————          Voir tous les modèles →
 */
.ks-section-head {
	display: flex;
	align-items: baseline;
	gap: var(--ks-space-4);
	margin-bottom: var(--ks-space-8);
}

.ks-section-head__title {
	margin: 0;
	font-size: var(--ks-text-xl);
	font-weight: var(--ks-weight-bold);
	white-space: nowrap;
}

/* Le filet occupe l'espace restant mais s'efface si la place manque. */
.ks-section-head__rule {
	flex: 1 1 auto;
	min-width: 0;
	height: 1px;
	background: var(--ks-border);
	/* Aligné sur la ligne de base optique du titre plutôt qu'au centre. */
	transform: translateY(-0.35em);
}

.ks-section-head__link {
	flex: none;
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-medium);
	color: var(--ks-text-muted);
	white-space: nowrap;
}

.ks-section-head__link:hover {
	color: var(--ks-black);
}

/* Un seul libellé visible à la fois : le long au-dessus de 768 px, le court
   en dessous — celui des maquettes mobiles. */
.ks-section-head__label--short {
	display: none;
}

@media (max-width: 767px) {
	.ks-section-head {
		gap: var(--ks-space-3);
		margin-bottom: var(--ks-space-5);
	}

	.ks-section-head__title {
		font-size: var(--ks-text-lg);
	}

	/* Sur mobile les maquettes suppriment le filet : titre + « Voir tout ». */
	.ks-section-head__rule {
		display: none;
	}

	.ks-section-head__label--long {
		display: none;
	}

	.ks-section-head__label--short {
		display: inline;
	}

	/* Filet de sécurité : si un titre de section devenait trop long, l'en-tête
	   passe sur deux lignes plutôt que de faire déborder la page. */
	.ks-section-head {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------------
 * Grilles
 * ------------------------------------------------------------------ */
.ks-grid {
	display: grid;
	gap: var(--ks-space-6);
}

/*
 * Grille de produits. Le nombre de colonnes est piloté par --ks-cols, ce qui
 * permet aux gabarits (boutique, produits similaires, iconiques) de réutiliser
 * la même classe avec des densités différentes.
 *
 * Mobile : 2 colonnes, conformément au cahier des charges §27.
 */
.ks-grid--products {
	grid-template-columns: repeat(var(--ks-cols, 4), minmax(0, 1fr));
	gap: var(--ks-space-6) var(--ks-space-5);
}

@media (max-width: 1023px) {
	.ks-grid--products {
		grid-template-columns: repeat(min(var(--ks-cols, 4), 3), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ks-grid--products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ks-space-5) var(--ks-space-3);
	}
}

/* ------------------------------------------------------------------
 * Carrousel horizontal tactile
 *
 * Utilisé sur mobile pour « Nos iconiques » et « Produits similaires »
 * (cahier des charges §7 et §26). Défilement natif avec accrochage : aucun
 * JavaScript, donc aucun coût de performance ni de fiabilité.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.ks-scroller {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		gap: var(--ks-space-3);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		/* Débordement volontaire jusqu'aux bords de l'écran : la carte
		   suivante « dépasse », ce qui signale qu'on peut faire défiler. */
		margin-inline: calc(var(--ks-gutter) * -1);
		padding-inline: var(--ks-gutter);
		padding-bottom: var(--ks-space-2);
		scrollbar-width: none;
	}

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

	.ks-scroller > * {
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------------
 * Fil d'Ariane
 * ------------------------------------------------------------------ */
.ks-breadcrumb {
	padding-block: var(--ks-space-4);
	font-size: var(--ks-text-sm);
	color: var(--ks-text-muted);
}

.ks-breadcrumb a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ks-breadcrumb__sep {
	display: inline-block;
	margin-inline: var(--ks-space-2);
	color: var(--ks-gray-300);
}

@media (max-width: 767px) {
	/* Le fil d'Ariane devient une seule ligne défilante plutôt que de casser
	   la mise en page sur trois lignes. */
	.ks-breadcrumb {
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

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

/* ------------------------------------------------------------------
 * Contenu éditorial (pages, description produit, articles)
 * ------------------------------------------------------------------ */
.ks-prose {
	max-width: 68ch;
	line-height: var(--ks-leading-relaxed);
	color: var(--ks-text);
}

.ks-prose > * + * {
	margin-top: var(--ks-space-4);
}

.ks-prose h2 {
	margin-top: var(--ks-space-10);
	font-size: var(--ks-text-lg);
}

.ks-prose h3 {
	margin-top: var(--ks-space-8);
	font-size: var(--ks-text-md);
}

.ks-prose ul,
.ks-prose ol {
	padding-left: 1.25em;
}

.ks-prose li + li {
	margin-top: var(--ks-space-2);
}

.ks-prose img {
	border-radius: var(--ks-radius);
}

/* ------------------------------------------------------------------
 * Grille WooCommerce
 *
 * `ul.products` est le conteneur produit de WooCommerce : boutique,
 * catégories, recherche, produits similaires et ventes additionnelles
 * l'utilisent tous. La règle vit donc dans la feuille chargée partout, pas
 * dans celle d'un gabarit particulier.
 * ------------------------------------------------------------------ */
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--ks-cols, 4), minmax(0, 1fr));
	gap: var(--ks-space-6) var(--ks-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1023px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ks-space-5) var(--ks-space-3);
	}
}