/**
 * KINGSEVEN 2026 — Réinitialisation et styles de base
 */

/* ------------------------------------------------------------------
 * Police auto-hébergée
 * Inter variable : un seul fichier couvre 100 à 900, ce qui répond au
 * « limiter le nombre de graisses chargées » du cahier des charges.
 * font-display: swap → le texte est peint immédiatement (LCP).
 * ------------------------------------------------------------------ */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Compense la hauteur du header collant pour les ancres. */
	scroll-padding-top: calc(var(--ks-header-h) + var(--ks-space-4));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--ks-bg);
	color: var(--ks-text);
	font-family: var(--ks-font);
	font-size: var(--ks-text-base);
	font-weight: var(--ks-weight-regular);
	line-height: var(--ks-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Aucun débordement horizontal, à aucune largeur (cahier des charges §33). */
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--ks-space-4);
	font-weight: var(--ks-weight-bold);
	line-height: var(--ks-leading-tight);
	letter-spacing: var(--ks-tracking-tight);
	color: var(--ks-black);
	text-wrap: balance;
}

h1 {
	font-size: var(--ks-text-2xl);
}
h2 {
	font-size: var(--ks-text-xl);
}
h3 {
	font-size: var(--ks-text-lg);
}
h4,
h5,
h6 {
	font-size: var(--ks-text-md);
	font-weight: var(--ks-weight-semibold);
}

p {
	margin: 0 0 var(--ks-space-4);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ks-duration-fast) var(--ks-ease),
		opacity var(--ks-duration-fast) var(--ks-ease);
}

a:hover {
	color: var(--ks-black);
}

/* Le contenu éditorial garde des liens soulignés : sans soulignement, un lien
   dans un paragraphe n'est signalé que par la couleur, ce qui échoue au
   critère WCAG 1.4.1 (l'information ne doit pas reposer sur la seule couleur). */
.ks-prose a,
.woocommerce-product-details__short-description a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

svg {
	fill: none;
	stroke: currentColor;
	flex: none;
}

/* Les icônes pleines (logos de paiement, étoiles) redéfinissent ce défaut. */
svg.ks-icon--filled {
	fill: currentColor;
	stroke: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0 0 var(--ks-space-4);
	padding-left: 1.25em;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--ks-border);
	margin: var(--ks-space-8) 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ------------------------------------------------------------------
 * Accessibilité
 * ------------------------------------------------------------------ */

/* Anneau de focus visible partout. :focus-visible évite de l'afficher au clic
   souris tout en le gardant au clavier. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ks-black);
	outline-offset: 3px;
	border-radius: var(--ks-radius-sm);
}

/* Masqué visuellement mais lu par les lecteurs d'écran. */
.screen-reader-text,
.ks-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement : invisible jusqu'au focus clavier. */
.ks-skip-link {
	position: absolute;
	top: var(--ks-space-2);
	left: var(--ks-space-2);
	z-index: var(--ks-z-modal);
	padding: var(--ks-space-3) var(--ks-space-5);
	background: var(--ks-black);
	color: var(--ks-white);
	border-radius: var(--ks-radius);
	transform: translateY(-200%);
	transition: transform var(--ks-duration) var(--ks-ease);
}

.ks-skip-link:focus {
	transform: translateY(0);
	color: var(--ks-white);
}

/* Empêche le défilement de l'arrière-plan quand un tiroir ou une modale est
   ouverte, sans provoquer de saut dû à la disparition de la scrollbar. */
body.ks-scroll-locked {
	overflow: hidden;
	/* scrollbar-gutter réserve la gouttière : pas de décalage horizontal. */
	scrollbar-gutter: stable;
}

::selection {
	background: var(--ks-black);
	color: var(--ks-white);
}