/**
 * Koko Store — feuille principale.
 *
 * DIRECTION : « atelier de précision ».
 *
 * Le noir n'est pas une mode, c'est un plan de travail : la surface sur
 * laquelle on pose un téléphone ouvert. L'or n'est pas un jaune décoratif,
 * c'est le métal qu'on trouve à l'intérieur de l'appareil — sur les contacts,
 * les pistes, les connecteurs. Il apparaît donc là où quelque chose se
 * connecte : une action, une sélection, une ligne qui relie deux étapes.
 *
 * Trois signatures tiennent l'ensemble :
 *
 *   1. LE FILET D'OR — un trait d'1px qui structure. Sous la barre d'en-tête,
 *      devant les intitulés de section, sur l'arête des cartes au survol,
 *      le long du rail des étapes. C'est le fil conducteur littéral du site.
 *
 *   2. LES ÉQUERRES — quatre angles tracés aux coins des blocs importants,
 *      comme les repères de coupe d'un plan technique ou le cadre d'un viseur.
 *      Elles ne ferment jamais complètement le cadre : l'attention se pose au
 *      centre.
 *
 *   3. LE GRAIN — une trame de bruit très faible sur le fond, qui empêche les
 *      grands aplats noirs de paraître plats et donne à l'écran la matière
 *      d'un tapis d'établi.
 *
 * Une seule police, Montserrat, poussée en contraste extrême : 900 tendu et
 * serré pour les titres, 400 aéré pour la lecture, 600 très espacé en
 * capitales pour les étiquettes techniques. Le contraste vient de l'usage,
 * pas d'une deuxième fonte.
 *
 * SOMMAIRE
 *   1.  Jetons
 *   2.  Réinitialisation et base
 *   3.  Typographie
 *   4.  Mise en page
 *   5.  Signatures (grain, filet, équerres, étiquettes)
 *   6.  Boutons
 *   7.  Formulaires
 *   8.  En-tête
 *   9.  Pied de page
 *   10. Composants
 *   11. Sections d'accueil
 *   12. Pages intérieures et prose
 *   13. Navigation secondaire
 *   14. Mouvement
 *   15. Adaptations et préférences
 */

/* ============================================================ 1. Jetons */

:root {
	/* --- Fonds. Quatre profondeurs, jamais plus : au-delà, l'œil ne fait
	   plus la différence et la hiérarchie se dilue. --- */
	--noir: #0c0c0d;
	--noir-2: #121215;
	--noir-3: #17171c;
	--noir-4: #1e1e24;

	/* --- Or. La marque. --- */
	--or: #ebb516;
	--or-clair: #f7d97a;
	--or-sombre: #a87f0a;
	--or-voile: rgba(235, 181, 22, 0.12);
	--or-trait: rgba(235, 181, 22, 0.32);

	/* --- Texte. Trois niveaux, tous contrôlés au contraste WCAG sur --noir :
	   craie 18,9:1 — sourde 8,8:1 — faible 4,9:1. --- */
	--craie: #f7fafe;
	--craie-2: #a8aeb8;
	--craie-3: #7c8494;

	/* --- Traits. Le squelette du site. --- */
	--ligne: rgba(247, 250, 254, 0.09);
	--ligne-2: rgba(247, 250, 254, 0.16);

	/* --- États. Le bleu vient de la charte, il reste réservé à
	   l'information ; il ne concurrence jamais l'or sur une action. --- */
	--bleu: #467ff7;
	--vert: #34d399;
	--rouge: #f8746a;

	/* --- Typographie --- */
	--fonte: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--fonte-technique: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

	/* Échelle fluide : chaque palier respire entre 400px et 1440px de large,
	   sans point de rupture visible. */
	--t-micro: 0.75rem;
	--t-petit: 0.8125rem;
	--t-note: 0.9375rem;
	--t-corps: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--t-intro: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--t-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	--t-h2: clamp(1.75rem, 1.35rem + 1.9vw, 3rem);
	--t-h1: clamp(2.25rem, 1.6rem + 3.1vw, 4.25rem);
	--t-geant: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);

	/* --- Rythme. Une seule progression, utilisée partout. --- */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 3rem;
	--e-8: 4rem;
	--e-9: 6rem;
	--section: clamp(3.5rem, 2rem + 6vw, 7rem);

	/* --- Formes. Rayons faibles : un atelier de précision n'a pas des angles
	   ronds de jouet. --- */
	--r-1: 4px;
	--r-2: 8px;
	--r-3: 14px;
	--r-plein: 999px;

	/* --- Profondeur. Sur fond noir, une ombre portée ne se voit pas : c'est
	   la lumière qui crée le relief. D'où les liserés clairs en interne. --- */
	--ombre-1: 0 1px 0 rgba(247, 250, 254, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.5);
	--ombre-2: 0 1px 0 rgba(247, 250, 254, 0.07) inset, 0 24px 64px rgba(0, 0, 0, 0.65);
	--lueur-or: 0 0 0 1px var(--or-trait), 0 12px 40px rgba(235, 181, 22, 0.14);

	/* --- Largeurs --- */
	--large: 1280px;
	--moyen: 1040px;
	--texte: 68ch;

	--rythme: cubic-bezier(0.22, 0.61, 0.36, 1);
	--rythme-sec: cubic-bezier(0.32, 0.72, 0, 1);
}

/* =========================================== 2. Réinitialisation et base */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* L'en-tête n'est plus collant : une simple respiration suffit pour
	   qu'une ancre ne colle pas au bord haut. */
	scroll-padding-top: 1.5rem;
}

body {
	background: var(--noir);
	color: var(--craie);
	font-family: var(--fonte);
	font-size: var(--t-corps);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.006em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Les prix, délais et références restent alignés en colonne sans police
	   dédiée. */
	font-variant-numeric: tabular-nums;
	overflow-x: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Le grain. Posé sur le <body> plutôt que sur chaque section : une seule
   couche, jamais recalculée au défilement, invisible au pointeur. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

img {
	background-color: var(--noir-3);
}

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

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

a {
	color: var(--or);
	text-decoration-color: var(--or-trait);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color 0.18s var(--rythme), text-decoration-color 0.18s var(--rythme);
}

a:hover {
	color: var(--or-clair);
	text-decoration-color: currentColor;
}

/* L'anneau de focus est doré et net : il fait partie du langage visuel, il
   n'est pas une réparation d'accessibilité collée après coup. */
:focus-visible {
	outline: 2px solid var(--or);
	outline-offset: 3px;
	border-radius: var(--r-1);
}

::selection {
	background: var(--or);
	color: var(--noir);
}

::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-track {
	background: var(--noir);
}

::-webkit-scrollbar-thumb {
	background: var(--noir-4);
	border-radius: var(--r-plein);
	border: 3px solid var(--noir);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--or-sombre);
}

/* Lien d'évitement : premier élément atteignable au clavier. */
.k-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--e-3) var(--e-5);
	background: var(--or);
	color: var(--noir);
	font-weight: 700;
	border-radius: 0 0 var(--r-2) 0;
}

.k-evitement:focus {
	left: 0;
}

.k-invisible {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==================================================== 3. Typographie */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 800;
	line-height: 1.08;
	/* Le resserrement croît avec la taille : à 4rem, l'espacement par défaut
	   de Montserrat fait flotter les mots. */
	letter-spacing: -0.03em;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-h1);
	font-weight: 900;
	letter-spacing: -0.04em;
}

h2 {
	font-size: var(--t-h2);
	font-weight: 900;
	letter-spacing: -0.035em;
}

h3 {
	font-size: var(--t-h3);
}

h4 {
	font-size: var(--t-h4);
	letter-spacing: -0.02em;
}

p {
	text-wrap: pretty;
}

/* Le gras appuie, il ne repeint pas : la couleur reste celle du texte autour.
   Forcer la craie ici rendait les prix invisibles dans les encarts clairs
   (panier du tunnel, cartes blanches). */
strong,
b {
	font-weight: 700;
	color: inherit;
}

small {
	font-size: var(--t-petit);
}

/* Un mot mis en or dans un titre : la couleur souligne le bénéfice, pas le
   verbe. À n'utiliser qu'une fois par titre. */
.k-or {
	color: var(--or);
}

/* Variante « soulignée à la main » : un trait d'or tracé sous le mot, comme
   au feutre sur une fiche d'atelier. */
.k-souligne {
	position: relative;
	white-space: nowrap;
}

.k-souligne::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.06em;
	height: 0.09em;
	background: var(--or);
	border-radius: var(--r-plein);
	transform-origin: left;
	animation: k-tracer 0.7s var(--rythme-sec) 0.35s both;
}

@keyframes k-tracer {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Chiffre de lecture d'instrument : un prix, un délai, une garantie. */
.k-mesure {
	font-family: var(--fonte-technique);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* ==================================================== 4. Mise en page */

.k-conteneur {
	width: 100%;
	max-width: var(--large);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.k-conteneur--moyen {
	max-width: var(--moyen);
}

.k-conteneur--texte {
	max-width: calc(var(--texte) + 6rem);
}

.k-section {
	padding-block: var(--section);
	position: relative;
}

.k-section--serree {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Une section posée sur un fond légèrement plus clair, séparée du reste par
   deux filets. Sert à isoler une preuve : avis, garanties, chiffres. */
.k-section--releve {
	background: var(--noir-2);
	border-block: 1px solid var(--ligne);
}

.k-grille {
	display: grid;
	gap: var(--e-5);
}

.k-grille--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.k-grille--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.k-grille--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

.k-pile {
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
}

.k-rang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-3);
}

/* =========================================== 5. Signatures du thème */

/* --- L'étiquette de section. Capitales très espacées, précédées d'un tiret
   d'or. On sait immédiatement où l'on est dans la page. --- */
.k-etiquette {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--or);
	margin-bottom: var(--e-4);
}

.k-etiquette::before {
	content: '';
	width: 2rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--or));
	flex: none;
}

.k-etiquette--centre {
	justify-content: center;
}

.k-etiquette--centre::after {
	content: '';
	width: 2rem;
	height: 1px;
	background: linear-gradient(90deg, var(--or), transparent);
	flex: none;
}

/* --- L'en-tête de section. --- */
.k-entete {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.k-entete--centre {
	margin-inline: auto;
	text-align: center;
}

.k-entete__intro {
	margin-top: var(--e-4);
	font-size: var(--t-intro);
	color: var(--craie-2);
	line-height: 1.6;
	max-width: 42rem;
}

.k-entete--centre .k-entete__intro {
	margin-inline: auto;
}

/* --- Les équerres. Quatre angles, jamais un cadre fermé. --- */
.k-equerres {
	position: relative;
}

.k-equerres::before,
.k-equerres::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1px solid var(--or-trait);
	pointer-events: none;
	transition: border-color 0.3s var(--rythme);
}

.k-equerres::before {
	top: -1px;
	left: -1px;
	border-right: 0;
	border-bottom: 0;
}

.k-equerres::after {
	bottom: -1px;
	right: -1px;
	border-left: 0;
	border-top: 0;
}

/* --- Le filet. Séparateur horizontal qui s'éteint aux extrémités. --- */
.k-filet {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--ligne-2) 18%, var(--ligne-2) 82%, transparent);
	margin-block: var(--e-6);
}

.k-filet--or {
	background: linear-gradient(90deg, transparent, var(--or-trait) 25%, var(--or-trait) 75%, transparent);
}

/* --- La trame technique. Fond de section : un quadrillage de plan, si faible
   qu'on le perçoit sans le lire. --- */
.k-trame {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--ligne) 1px, transparent 1px),
		linear-gradient(90deg, var(--ligne) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
	opacity: 0.6;
}

/* --- La lueur. Un halo d'or diffus, placé derrière un contenu clé. --- */
.k-lueur {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(235, 181, 22, 0.16), transparent 68%);
	filter: blur(30px);
}

/* ==================================================== 6. Boutons */

.k-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	padding: 0.95rem 1.75rem;
	border-radius: var(--r-2);
	font-size: var(--t-note);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid transparent;
	transition:
		transform 0.2s var(--rythme),
		box-shadow 0.24s var(--rythme),
		background-color 0.2s var(--rythme),
		border-color 0.2s var(--rythme),
		color 0.2s var(--rythme);
}

.k-bouton:active {
	transform: translateY(1px);
}

/* --- Action principale. Un seul par écran de contenu. --- */
.k-bouton--or {
	background: var(--or);
	color: var(--noir);
	box-shadow: 0 8px 24px rgba(235, 181, 22, 0.2);
}

.k-bouton--or:hover {
	color: var(--noir);
	background: var(--or-clair);
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(235, 181, 22, 0.32);
}

/* Le balayage : une lumière traverse le bouton au survol, comme un reflet sur
   du métal poli. C'est la seule animation « décorative » du thème, et elle
   est réservée à l'action qui compte. */
.k-bouton--or::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.6s var(--rythme-sec);
}

.k-bouton--or:hover::before {
	transform: translateX(120%);
}

/* --- Action secondaire : le filet d'or, vide. --- */
.k-bouton--trait {
	background: transparent;
	color: var(--craie);
	border-color: var(--ligne-2);
}

.k-bouton--trait:hover {
	color: var(--or);
	border-color: var(--or);
	background: var(--or-voile);
	transform: translateY(-2px);
}

/* --- Action tertiaire : texte seul, avec une flèche qui avance. --- */
.k-bouton--nu {
	padding-inline: 0;
	background: none;
	color: var(--or);
	gap: var(--e-2);
}

.k-bouton--nu .k-fleche {
	transition: transform 0.24s var(--rythme);
}

.k-bouton--nu:hover .k-fleche {
	transform: translateX(4px);
}

.k-bouton--large {
	width: 100%;
}

.k-bouton--grand {
	padding: 1.15rem 2.25rem;
	font-size: var(--t-corps);
}

.k-bouton--petit {
	padding: 0.6rem 1.1rem;
	font-size: var(--t-petit);
}

.k-bouton[disabled],
.k-bouton[aria-disabled='true'] {
	opacity: 0.45;
	pointer-events: none;
}

.k-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	align-items: center;
}

/* ==================================================== 7. Formulaires */

.k-champ {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
}

.k-champ__intitule {
	font-size: var(--t-petit);
	font-weight: 600;
	color: var(--craie-2);
	letter-spacing: 0.01em;
}

.k-champ__requis {
	color: var(--or);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='search'],
input[type='number'],
input[type='password'],
input[type='date'],
textarea,
select {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--noir-2);
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-2);
	color: var(--craie);
	font-size: var(--t-note);
	transition: border-color 0.18s var(--rythme), background-color 0.18s var(--rythme), box-shadow 0.18s var(--rythme);
	appearance: none;
}

textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.6;
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23a8aeb8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--or);
	background: var(--noir-3);
	box-shadow: 0 0 0 3px var(--or-voile);
}

::placeholder {
	color: var(--craie-3);
	opacity: 1;
}

.k-aide {
	font-size: var(--t-petit);
	color: var(--craie-3);
}

/* Cases et boutons radio dessinés : les contrôles natifs sur fond noir sont
   soit invisibles, soit blancs et brutaux. */
input[type='checkbox'],
input[type='radio'] {
	appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	border: 1px solid var(--ligne-2);
	background: var(--noir-2);
	cursor: pointer;
	transition: all 0.16s var(--rythme);
	position: relative;
}

input[type='checkbox'] {
	border-radius: var(--r-1);
}

input[type='radio'] {
	border-radius: 50%;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
	background: var(--or);
	border-color: var(--or);
}

input[type='checkbox']:checked::after {
	content: '';
	position: absolute;
	left: 0.34rem;
	top: 0.14rem;
	width: 0.3rem;
	height: 0.55rem;
	border: solid var(--noir);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type='radio']:checked::after {
	content: '';
	position: absolute;
	inset: 0.3rem;
	border-radius: 50%;
	background: var(--noir);
}

/* ==================================================== 8. En-tête */

/* La barre reste en haut de page et s'en va au défilement. Collante, elle
   mangeait un dixième de la hauteur utile sur un portable — de quoi gêner
   sérieusement le tunnel de réservation, qui a besoin de tout l'écran. Le
   menu se retrouve en remontant, ce que tout le monde sait faire. */
.k-entete-site {
	position: relative;
	z-index: 900;
	background: var(--noir);
	border-bottom: 1px solid var(--ligne);
}

/* --- Bandeau supérieur : preuve et contact, avant même le menu. --- */
.k-bandeau {
	background: var(--noir-2);
	border-bottom: 1px solid var(--ligne);
	font-size: var(--t-micro);
	color: var(--craie-2);
}

.k-bandeau__interieur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	min-height: 2.4rem;
	padding-block: var(--e-1);
}

.k-bandeau__arguments {
	display: flex;
	gap: var(--e-5);
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.k-bandeau__arguments li {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	white-space: nowrap;
}

.k-bandeau__arguments svg {
	color: var(--or);
	flex: none;
}

.k-bandeau__contact {
	display: flex;
	align-items: center;
	gap: var(--e-4);
}

.k-bandeau a {
	color: var(--craie-2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
}

.k-bandeau a:hover {
	color: var(--or);
}

/* Pastille d'état d'ouverture : le point vert qui bat vaut mieux qu'un
   tableau d'horaires. */
.k-etat {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-weight: 600;
}

.k-etat__point {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--craie-3);
	flex: none;
}

.k-etat--ouvert .k-etat__point {
	background: var(--vert);
	box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
	animation: k-pulse 2.4s var(--rythme) infinite;
}

.k-etat--ouvert {
	color: var(--vert);
}

@keyframes k-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
	}
}

/* --- Barre principale --- */
.k-barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-5);
	min-height: 4.5rem;
}

.k-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	text-decoration: none;
	color: var(--craie);
	flex: none;
}

.k-logo img {
	max-height: 46px;
	width: auto;
}

/* Logo de repli quand aucun fichier n'est chargé dans WordPress : le nom
   composé, avec « Store » en or. Le site n'est jamais sans identité. */
.k-logo__texte {
	font-size: 1.3rem;
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1;
}

.k-logo__texte span {
	color: var(--or);
}

.k-logo__baseline {
	display: block;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--craie-3);
	margin-top: 3px;
}

/* --- Navigation principale --- */
.k-nav {
	display: flex;
	align-items: center;
	margin-inline: auto;
}

.k-nav__liste {
	display: flex;
	align-items: center;
	gap: var(--e-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-nav__liste a {
	display: block;
	padding: 0.6rem 0.9rem;
	color: var(--craie-2);
	text-decoration: none;
	font-size: var(--t-note);
	font-weight: 600;
	border-radius: var(--r-2);
	position: relative;
	transition: color 0.18s var(--rythme), background-color 0.18s var(--rythme);
}

.k-nav__liste > li > a::after {
	content: '';
	position: absolute;
	left: 0.9rem;
	right: 0.9rem;
	bottom: 0.28rem;
	height: 1.5px;
	background: var(--or);
	border-radius: var(--r-plein);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.26s var(--rythme-sec);
}

.k-nav__liste > li > a:hover,
.k-nav__liste > li.current-menu-item > a,
.k-nav__liste > li.current-menu-ancestor > a,
.k-nav__liste > li.current-page-ancestor > a {
	color: var(--craie);
}

.k-nav__liste > li > a:hover::after,
.k-nav__liste > li.current-menu-item > a::after,
.k-nav__liste > li.current-menu-ancestor > a::after,
.k-nav__liste > li.current-page-ancestor > a::after {
	transform: scaleX(1);
}

/* --- Sous-menus. Panneau sombre, filet d'or en tête. --- */
.k-nav__liste li {
	position: relative;
}

.k-nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	min-width: 15rem;
	background: var(--noir-3);
	border: 1px solid var(--ligne-2);
	border-top: 1px solid var(--or);
	border-radius: var(--r-2);
	box-shadow: var(--ombre-2);
	padding: var(--e-2);
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s var(--rythme), transform 0.2s var(--rythme), visibility 0.2s;
	z-index: 20;
}

.k-nav li:hover > .sub-menu,
.k-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.k-nav .sub-menu a {
	padding: 0.55rem 0.75rem;
	border-radius: var(--r-1);
	font-weight: 500;
}

.k-nav .sub-menu a:hover {
	background: var(--or-voile);
	color: var(--or);
}

/* La description d'un élément de menu, saisie dans WordPress, s'affiche sous
   son intitulé : le méga-menu se construit depuis l'administration, sans
   toucher au code. */
.k-nav__description {
	display: block;
	font-size: var(--t-micro);
	font-weight: 400;
	color: var(--craie-3);
	margin-top: 2px;
	line-height: 1.4;
}

/* --- Outils à droite : recherche, compte, panier, appel. --- */
.k-outils {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	flex: none;
}

.k-icone-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--r-2);
	color: var(--craie-2);
	text-decoration: none;
	position: relative;
	transition: color 0.18s var(--rythme), background-color 0.18s var(--rythme);
}

.k-icone-bouton:hover {
	color: var(--or);
	background: var(--or-voile);
}

.k-pastille {
	position: absolute;
	top: 0.25rem;
	right: 0.15rem;
	min-width: 1.05rem;
	height: 1.05rem;
	padding-inline: 0.2rem;
	display: grid;
	place-items: center;
	background: var(--or);
	color: var(--noir);
	font-size: 0.625rem;
	font-weight: 800;
	border-radius: var(--r-plein);
	line-height: 1;
}

/* --- Bouton hamburger : trois traits qui deviennent une croix. --- */
.k-hamburger {
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--r-2);
	position: relative;
	color: var(--craie);
}

.k-hamburger span {
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	height: 1.5px;
	background: currentColor;
	border-radius: var(--r-plein);
	transition: transform 0.3s var(--rythme-sec), opacity 0.2s var(--rythme);
}

.k-hamburger span:nth-child(1) {
	top: 0.85rem;
}

.k-hamburger span:nth-child(2) {
	top: 1.2rem;
}

.k-hamburger span:nth-child(3) {
	top: 1.55rem;
}

.k-hamburger[aria-expanded='true'] span:nth-child(1) {
	transform: translateY(0.35rem) rotate(45deg);
}

.k-hamburger[aria-expanded='true'] span:nth-child(2) {
	opacity: 0;
}

.k-hamburger[aria-expanded='true'] span:nth-child(3) {
	transform: translateY(-0.35rem) rotate(-45deg);
}

/* --- Panneau mobile --- */
.k-mobile {
	position: fixed;
	inset: 0;
	z-index: 950;
	background: var(--noir);
	display: flex;
	flex-direction: column;
	padding: var(--e-5) 0 var(--e-6);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1rem);
	transition: opacity 0.28s var(--rythme), transform 0.28s var(--rythme-sec), visibility 0.28s;
}

.k-mobile.est-ouvert {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.k-mobile__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-mobile__liste a {
	display: block;
	padding: var(--e-4) 0;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--craie);
	text-decoration: none;
	border-bottom: 1px solid var(--ligne);
}

.k-mobile__liste .sub-menu {
	list-style: none;
	padding: 0 0 var(--e-3) var(--e-4);
	margin: 0;
	border-left: 1px solid var(--or-trait);
	margin-left: var(--e-1);
}

.k-mobile__liste .sub-menu a {
	font-size: var(--t-note);
	font-weight: 500;
	color: var(--craie-2);
	padding: var(--e-2) 0;
	border: 0;
}

.k-mobile__pied {
	margin-top: auto;
	padding-top: var(--e-6);
	display: grid;
	gap: var(--e-3);
}

/* ==================================================== 9. Pied de page */

.k-pied {
	margin-top: auto;
	background: var(--noir-2);
	border-top: 1px solid var(--ligne);
	position: relative;
}

/* Le filet d'or qui court sur toute la largeur, au-dessus du pied : la
   dernière occurrence de la signature, elle referme la page. */
.k-pied::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--or-trait) 30%, var(--or-trait) 70%, transparent);
}

.k-pied__haut {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--e-7) var(--e-5);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.k-body--pied-3col .k-pied__haut {
	grid-template-columns: 1.5fr 1fr 1fr;
}

.k-pied__titre,
.k-widget__titre {
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or);
	margin-bottom: var(--e-4);
}

.k-pied__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--e-3);
}

.k-pied__liste a,
.k-widget a {
	color: var(--craie-2);
	text-decoration: none;
	font-size: var(--t-note);
	transition: color 0.18s var(--rythme), padding-left 0.18s var(--rythme);
	display: inline-block;
}

.k-pied__liste a:hover,
.k-widget a:hover {
	color: var(--or);
	padding-left: 4px;
}

.k-pied__pitch {
	color: var(--craie-2);
	font-size: var(--t-note);
	margin-block: var(--e-4);
	max-width: 32ch;
}

.k-pied__coord {
	display: grid;
	gap: var(--e-3);
	font-size: var(--t-note);
	color: var(--craie-2);
	font-style: normal;
}

.k-pied__coord a {
	color: var(--craie);
	text-decoration: none;
	font-weight: 600;
}

.k-pied__coord a:hover {
	color: var(--or);
}

.k-pied__ligne {
	display: flex;
	gap: var(--e-3);
	align-items: flex-start;
}

.k-pied__ligne svg {
	color: var(--or);
	flex: none;
	margin-top: 3px;
}

/* Tableau des horaires : le jour fermé est visible, pas absent. */
.k-horaires {
	display: grid;
	gap: var(--e-1);
	font-size: var(--t-petit);
	margin: 0;
}

.k-horaires__jour {
	display: flex;
	justify-content: space-between;
	gap: var(--e-4);
	padding: 0.25rem 0;
	color: var(--craie-2);
	border-bottom: 1px solid transparent;
}

.k-horaires__jour--auj {
	color: var(--craie);
	font-weight: 700;
	border-bottom-color: var(--or-trait);
}

.k-horaires__jour--ferme {
	color: var(--craie-3);
}

.k-horaires__valeur {
	font-family: var(--fonte-technique);
	font-size: 0.75rem;
	white-space: nowrap;
}

.k-reseaux {
	display: flex;
	gap: var(--e-2);
	margin-top: var(--e-5);
}

.k-reseaux a {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-2);
	color: var(--craie-2);
	transition: all 0.2s var(--rythme);
}

.k-reseaux a:hover {
	color: var(--noir);
	background: var(--or);
	border-color: var(--or);
	transform: translateY(-2px);
	padding-left: 0;
}

.k-pied__bas {
	border-top: 1px solid var(--ligne);
	padding-block: var(--e-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3) var(--e-5);
	align-items: center;
	justify-content: space-between;
	font-size: var(--t-petit);
	color: var(--craie-3);
}

.k-pied__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-pied__legal a {
	color: var(--craie-3);
	text-decoration: none;
}

.k-pied__legal a:hover {
	color: var(--or);
}

.k-paiements {
	display: flex;
	gap: var(--e-2);
	align-items: center;
	flex-wrap: wrap;
}

.k-paiements span {
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--ligne);
	border-radius: var(--r-1);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--craie-3);
	letter-spacing: 0.02em;
}

/* ==================================================== 10. Composants */

/* --- La carte. Brique de base : produit, service, article, argument. --- */
.k-carte {
	position: relative;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	padding: var(--e-5);
	transition:
		transform 0.28s var(--rythme),
		border-color 0.28s var(--rythme),
		background-color 0.28s var(--rythme),
		box-shadow 0.28s var(--rythme);
	overflow: hidden;
}

/* Au survol, l'arête supérieure s'allume : la carte « prend le courant ». */
.k-carte::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--or), transparent);
	opacity: 0;
	transition: opacity 0.3s var(--rythme);
}

.k-carte:hover,
.k-carte:focus-within {
	transform: translateY(-4px);
	border-color: var(--ligne-2);
	background: var(--noir-3);
	box-shadow: var(--ombre-1);
}

.k-carte:hover::before,
.k-carte:focus-within::before {
	opacity: 1;
}

.k-carte__icone {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--r-2);
	background: var(--or-voile);
	border: 1px solid var(--or-trait);
	color: var(--or);
	margin-bottom: var(--e-4);
	flex: none;
}

.k-carte__titre {
	font-size: var(--t-h4);
	font-weight: 800;
	margin-bottom: var(--e-2);
}

.k-carte__titre a {
	color: inherit;
	text-decoration: none;
}

/* Le lien qui couvre toute la carte : on clique n'importe où, mais un seul
   lien est annoncé par le lecteur d'écran. */
.k-carte__titre a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.k-carte__texte {
	color: var(--craie-2);
	font-size: var(--t-note);
	line-height: 1.6;
}

.k-carte__pied {
	margin-top: var(--e-4);
	padding-top: var(--e-4);
	border-top: 1px solid var(--ligne);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
}

/* --- La carte tarif : celle qui porte un prix « à partir de ». --- */
.k-prix {
	display: inline-flex;
	align-items: baseline;
	gap: 0.25rem;
	font-family: var(--fonte-technique);
	font-weight: 700;
	color: var(--or);
	font-size: 1.35rem;
	letter-spacing: -0.03em;
}

.k-prix__avant {
	font-family: var(--fonte);
	font-size: var(--t-micro);
	font-weight: 600;
	color: var(--craie-3);
	letter-spacing: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.k-prix__barre {
	font-size: var(--t-note);
	color: var(--craie-3);
	text-decoration: line-through;
	font-weight: 500;
}

/* --- Les puces d'argument (pastilles). --- */
.k-puce {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: 0.35rem 0.75rem;
	border-radius: var(--r-plein);
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.02em;
	border: 1px solid var(--ligne-2);
	color: var(--craie-2);
	background: var(--noir-3);
}

.k-puce--or {
	background: var(--or-voile);
	border-color: var(--or-trait);
	color: var(--or);
}

.k-puce--vert {
	background: rgba(52, 211, 153, 0.1);
	border-color: rgba(52, 211, 153, 0.3);
	color: var(--vert);
}

.k-puce--rouge {
	background: rgba(248, 116, 106, 0.1);
	border-color: rgba(248, 116, 106, 0.3);
	color: var(--rouge);
}

/* --- Liste à coches dorées. --- */
.k-coches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--e-3);
}

.k-coches li {
	display: flex;
	gap: var(--e-3);
	align-items: flex-start;
	color: var(--craie-2);
	font-size: var(--t-note);
	line-height: 1.55;
}

.k-coches li::before {
	content: '';
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.18rem;
	border-radius: 50%;
	background: var(--or-voile);
	border: 1px solid var(--or-trait);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' fill='none'%3E%3Cpath d='M1 4.6 3.9 7.5 10 1.4' stroke='%23ebb516' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* --- Les chiffres clés. --- */
.k-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 1px;
	background: var(--ligne);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	overflow: hidden;
}

.k-chiffre {
	background: var(--noir-2);
	padding: var(--e-5) var(--e-4);
	text-align: center;
	transition: background-color 0.25s var(--rythme);
}

.k-chiffre:hover {
	background: var(--noir-3);
}

.k-chiffre__valeur {
	display: block;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--or);
	font-variant-numeric: tabular-nums;
}

.k-chiffre__intitule {
	display: block;
	margin-top: var(--e-2);
	font-size: var(--t-petit);
	color: var(--craie-2);
	line-height: 1.4;
}

/* --- Le rail des étapes. La ligne d'or qui relie les numéros est la
   signature appliquée à un processus. --- */
.k-rail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--e-5);
	position: relative;
	counter-reset: etape;
}

.k-etape {
	position: relative;
	padding-top: var(--e-6);
	counter-increment: etape;
}

/* Le trait qui relie cette étape à la suivante. Il s'arrête à la dernière. */
.k-etape::before {
	content: '';
	position: absolute;
	top: 1.4rem;
	left: 3.2rem;
	right: calc(var(--e-5) * -1);
	height: 1px;
	background: linear-gradient(90deg, var(--or-trait), var(--ligne));
}

.k-etape:last-child::before {
	display: none;
}

.k-etape__numero {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.8rem;
	height: 2.8rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--or-trait);
	background: var(--noir);
	color: var(--or);
	font-family: var(--fonte-technique);
	font-size: var(--t-note);
	font-weight: 700;
	transition: all 0.3s var(--rythme);
}

.k-etape__numero::after {
	content: counter(etape, decimal-leading-zero);
}

.k-etape:hover .k-etape__numero {
	background: var(--or);
	color: var(--noir);
	box-shadow: 0 0 24px rgba(235, 181, 22, 0.35);
}

.k-etape__titre {
	font-size: var(--t-h4);
	font-weight: 800;
	margin-bottom: var(--e-2);
	padding-top: var(--e-2);
}

.k-etape__texte {
	color: var(--craie-2);
	font-size: var(--t-note);
	line-height: 1.6;
}

/* --- L'accordéon FAQ. Balisé en <details> : il fonctionne sans une ligne
   de JavaScript, et les moteurs lisent la réponse même repliée. --- */
.k-faq {
	display: grid;
	gap: var(--e-3);
}

.k-question {
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	background: var(--noir-2);
	overflow: hidden;
	transition: border-color 0.24s var(--rythme), background-color 0.24s var(--rythme);
}

.k-question[open] {
	border-color: var(--or-trait);
	background: var(--noir-3);
}

.k-question summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	padding: var(--e-4) var(--e-5);
	cursor: pointer;
	font-weight: 700;
	font-size: var(--t-note);
	list-style: none;
	transition: color 0.2s var(--rythme);
}

.k-question summary::-webkit-details-marker {
	display: none;
}

.k-question summary:hover {
	color: var(--or);
}

/* La croix qui devient un moins. */
.k-question__signe {
	flex: none;
	position: relative;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--or);
}

.k-question__signe::before,
.k-question__signe::after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: var(--r-plein);
	transition: transform 0.28s var(--rythme-sec);
}

.k-question__signe::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 1.5px;
	transform: translateY(-50%);
}

.k-question__signe::after {
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1.5px;
	transform: translateX(-50%);
}

.k-question[open] .k-question__signe::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

.k-question__reponse {
	padding: 0 var(--e-5) var(--e-5);
	color: var(--craie-2);
	font-size: var(--t-note);
	line-height: 1.7;
}

.k-question__reponse > * + * {
	margin-top: var(--e-3);
}

/* --- Les avis clients. --- */
.k-avis {
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	padding: var(--e-5);
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
	position: relative;
}

.k-avis__etoiles {
	display: flex;
	gap: 2px;
	color: var(--or);
}

.k-avis__texte {
	color: var(--craie);
	font-size: var(--t-note);
	line-height: 1.7;
	flex: 1;
}

.k-avis__auteur {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding-top: var(--e-4);
	border-top: 1px solid var(--ligne);
}

.k-avis__initiale {
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--or-voile);
	border: 1px solid var(--or-trait);
	color: var(--or);
	font-weight: 800;
	flex: none;
}

.k-avis__nom {
	font-weight: 700;
	font-size: var(--t-note);
	line-height: 1.3;
}

.k-avis__meta {
	font-size: var(--t-micro);
	color: var(--craie-3);
}

/* --- L'encadré d'appel à l'action. --- */
.k-appel {
	position: relative;
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--or-trait);
	border-radius: var(--r-3);
	padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	text-align: center;
}

.k-appel::before {
	content: '';
	position: absolute;
	top: -60%;
	left: 50%;
	width: 60rem;
	height: 40rem;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(235, 181, 22, 0.13), transparent 62%);
	pointer-events: none;
}

.k-appel > * {
	position: relative;
}

.k-appel__titre {
	font-size: var(--t-h2);
	margin-bottom: var(--e-4);
}

.k-appel__texte {
	color: var(--craie-2);
	font-size: var(--t-intro);
	max-width: 44rem;
	margin: 0 auto var(--e-6);
}

.k-appel .k-actions {
	justify-content: center;
}

/* --- Note d'information en ligne. --- */
.k-note {
	display: flex;
	gap: var(--e-3);
	padding: var(--e-4);
	border-radius: var(--r-2);
	border: 1px solid var(--ligne-2);
	background: var(--noir-2);
	font-size: var(--t-note);
	color: var(--craie-2);
	line-height: 1.6;
}

.k-note svg {
	flex: none;
	margin-top: 2px;
	color: var(--or);
}

.k-note--info {
	border-color: rgba(70, 127, 247, 0.3);
	background: rgba(70, 127, 247, 0.07);
}

.k-note--info svg {
	color: var(--bleu);
}

/* --- Le tableau. --- */
.k-tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-note);
}

.k-tableau caption {
	text-align: left;
	color: var(--craie-3);
	font-size: var(--t-petit);
	padding-bottom: var(--e-3);
}

.k-tableau th,
.k-tableau td {
	padding: var(--e-3) var(--e-4);
	text-align: left;
	border-bottom: 1px solid var(--ligne);
}

.k-tableau th {
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--or);
	border-bottom-color: var(--or-trait);
}

.k-tableau td {
	color: var(--craie-2);
}

.k-tableau tbody tr:hover td {
	background: var(--noir-2);
	color: var(--craie);
}

.k-tableau__enveloppe {
	overflow-x: auto;
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
}

/* --- Le média : une image encadrée d'équerres. --- */
.k-media {
	position: relative;
	border-radius: var(--r-3);
	overflow: hidden;
	background: var(--noir-3);
	border: 1px solid var(--ligne);
}

.k-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--rythme);
}

.k-media:hover img {
	transform: scale(1.03);
}

/* Une image sans fichier associé : plutôt qu'un carré vide, un motif d'atelier
   avec l'initiale. Le site ne montre jamais de trou. */
.k-media--vide {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle at 50% 40%, rgba(235, 181, 22, 0.08), transparent 60%),
		repeating-linear-gradient(45deg, var(--noir-3) 0 10px, var(--noir-2) 10px 20px);
	color: var(--craie-3);
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: -0.04em;
}

/* ============================================ 11. Sections d'accueil */

/* --- La bannière. Asymétrique : le texte tient 7 colonnes, le visuel 5 et
   déborde vers la droite. La symétrie parfaite est ce qui fait ressembler
   une page d'accueil à toutes les autres. --- */
.k-banniere {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 1.5rem + 7vw, 7rem) clamp(3.5rem, 2rem + 6vw, 6.5rem);
	border-bottom: 1px solid var(--ligne);
}

.k-banniere__fond {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.k-banniere__lueur {
	position: absolute;
	top: -18rem;
	right: -12rem;
	width: 46rem;
	height: 46rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(235, 181, 22, 0.18), rgba(235, 181, 22, 0.04) 45%, transparent 68%);
	filter: blur(20px);
}

.k-banniere__interieur {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
	position: relative;
}

.k-banniere__titre {
	font-size: var(--t-geant);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.98;
	margin-bottom: var(--e-5);
}

.k-banniere__intro {
	font-size: var(--t-intro);
	color: var(--craie-2);
	line-height: 1.6;
	max-width: 34rem;
	margin-bottom: var(--e-6);
}

.k-banniere__preuves {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-5);
	margin-top: var(--e-7);
	padding-top: var(--e-5);
	border-top: 1px solid var(--ligne);
}

.k-banniere__preuve {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.k-banniere__preuve strong {
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--or);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.k-banniere__preuve span {
	font-size: var(--t-micro);
	color: var(--craie-3);
	letter-spacing: 0.03em;
}

/* Le visuel : une carte de diagnostic, comme la fiche posée à côté de
   l'appareil sur l'établi. C'est ce qui rend la promesse concrète. */
.k-fiche {
	position: relative;
	background: linear-gradient(160deg, var(--noir-3), var(--noir-2));
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-3);
	padding: var(--e-5);
	box-shadow: var(--ombre-2);
}

.k-fiche::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--r-3);
	padding: 1px;
	background: linear-gradient(160deg, var(--or-trait), transparent 40%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.k-fiche__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
	padding-bottom: var(--e-4);
	margin-bottom: var(--e-4);
	border-bottom: 1px solid var(--ligne);
}

.k-fiche__ref {
	font-family: var(--fonte-technique);
	font-size: var(--t-micro);
	color: var(--craie-3);
	letter-spacing: 0.06em;
}

.k-fiche__lignes {
	display: grid;
	gap: var(--e-3);
	margin-bottom: var(--e-5);
}

.k-fiche__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	font-size: var(--t-note);
}

.k-fiche__cle {
	color: var(--craie-3);
	font-size: var(--t-petit);
}

.k-fiche__valeur {
	font-weight: 700;
	font-family: var(--fonte-technique);
	font-size: var(--t-petit);
	color: var(--craie);
}

.k-fiche__valeur--or {
	color: var(--or);
}

/* --- Le sélecteur d'appareil : la grille d'entrée du parcours. --- */
.k-appareils {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: var(--e-3);
}

.k-appareil {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-5) var(--e-3);
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-3);
	text-align: center;
	text-decoration: none;
	color: var(--craie);
	font-weight: 700;
	font-size: var(--t-note);
	transition: all 0.26s var(--rythme);
	overflow: hidden;
}

.k-appareil::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: var(--or);
	transform: scaleX(0);
	transition: transform 0.3s var(--rythme-sec);
}

.k-appareil:hover {
	color: var(--craie);
	border-color: var(--or-trait);
	background: var(--noir-3);
	transform: translateY(-4px);
}

.k-appareil:hover::after {
	transform: scaleX(1);
}

.k-appareil__icone {
	color: var(--craie-2);
	transition: color 0.26s var(--rythme), transform 0.32s var(--rythme-sec);
}

.k-appareil:hover .k-appareil__icone {
	color: var(--or);
	transform: translateY(-2px) scale(1.06);
}

.k-appareil__depuis {
	font-size: var(--t-micro);
	font-weight: 600;
	color: var(--craie-3);
	font-family: var(--fonte-technique);
}

/* --- Bande de garanties, en une ligne. --- */
.k-garanties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--e-5);
}

.k-garantie {
	display: flex;
	gap: var(--e-4);
	align-items: flex-start;
}

.k-garantie svg {
	color: var(--or);
	flex: none;
	margin-top: 2px;
}

.k-garantie__titre {
	font-weight: 800;
	font-size: var(--t-note);
	margin-bottom: 2px;
}

.k-garantie__texte {
	font-size: var(--t-petit);
	color: var(--craie-3);
	line-height: 1.5;
}

/* --- Le bloc « deux colonnes » texte/visuel. --- */
.k-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}

.k-duo--inverse > :first-child {
	order: 2;
}

/* ================================== 12. Pages intérieures et prose */

/* --- Le bandeau de titre des pages intérieures. --- */
.k-titre-page {
	position: relative;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	border-bottom: 1px solid var(--ligne);
	overflow: hidden;
	background: var(--noir-2);
}

.k-titre-page__interieur {
	position: relative;
	max-width: 52rem;
}

.k-titre-page h1 {
	margin-block: var(--e-3);
}

.k-titre-page__intro {
	font-size: var(--t-intro);
	color: var(--craie-2);
	max-width: 44rem;
	line-height: 1.6;
}

/* --- La prose : tout ce qui sort de l'éditeur WordPress. --- */
.k-prose {
	max-width: var(--texte);
	font-size: var(--t-corps);
	line-height: 1.75;
	color: var(--craie-2);
}

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

.k-prose h2 {
	margin-top: var(--e-8);
	margin-bottom: var(--e-4);
	color: var(--craie);
	font-size: var(--t-h2);
	scroll-margin-top: 7rem;
}

/* Le filet d'or devant chaque H2 de prose : la signature descend jusque dans
   le corps du texte. */
.k-prose h2::before {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--or);
	border-radius: var(--r-plein);
	margin-bottom: var(--e-4);
}

.k-prose h3 {
	margin-top: var(--e-6);
	margin-bottom: var(--e-3);
	color: var(--craie);
	scroll-margin-top: 7rem;
}

.k-prose h4 {
	margin-top: var(--e-5);
	margin-bottom: var(--e-2);
	color: var(--craie);
}

.k-prose ul,
.k-prose ol {
	padding-left: var(--e-5);
	display: grid;
	gap: var(--e-2);
}

.k-prose li::marker {
	color: var(--or);
}

.k-prose a {
	color: var(--bleu);
	text-decoration: underline;
	text-decoration-color: rgba(70, 127, 247, 0.4);
}

.k-prose a:hover {
	color: var(--or);
}

.k-prose blockquote {
	margin-block: var(--e-6);
	padding: var(--e-4) var(--e-5);
	border-left: 2px solid var(--or);
	background: var(--noir-2);
	border-radius: 0 var(--r-2) var(--r-2) 0;
	color: var(--craie);
	font-size: var(--t-intro);
	line-height: 1.6;
}

.k-prose blockquote cite {
	display: block;
	margin-top: var(--e-3);
	font-size: var(--t-petit);
	font-style: normal;
	color: var(--craie-3);
}

.k-prose img,
.k-prose figure {
	border-radius: var(--r-3);
	margin-block: var(--e-6);
}

.k-prose figcaption {
	margin-top: var(--e-3);
	font-size: var(--t-petit);
	color: var(--craie-3);
	text-align: center;
}

.k-prose code {
	font-family: var(--fonte-technique);
	font-size: 0.9em;
	background: var(--noir-3);
	padding: 0.15em 0.4em;
	border-radius: var(--r-1);
	color: var(--or-clair);
	border: 1px solid var(--ligne);
}

.k-prose hr {
	border: 0;
	height: 1px;
	background: var(--ligne-2);
	margin-block: var(--e-7);
}

.k-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-note);
	margin-block: var(--e-5);
}

.k-prose th,
.k-prose td {
	padding: var(--e-3);
	border: 1px solid var(--ligne);
	text-align: left;
}

.k-prose th {
	background: var(--noir-2);
	color: var(--craie);
	font-weight: 700;
}

.k-prose .alignwide {
	max-width: var(--moyen);
	margin-inline: calc(50% - 50vw);
	margin-inline: auto;
}

/* --- Le sommaire ancré, colonne de droite sur les pages longues. --- */
.k-page-avec-sommaire {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16rem;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: start;
}

.k-sommaire {
	position: sticky;
	top: 7rem;
	padding: var(--e-4);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	background: var(--noir-2);
	font-size: var(--t-petit);
}

.k-sommaire__titre {
	font-size: var(--t-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--or);
	margin-bottom: var(--e-3);
}

.k-sommaire ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--e-2);
	counter-reset: som;
}

.k-sommaire a {
	color: var(--craie-2);
	text-decoration: none;
	display: block;
	padding-left: var(--e-3);
	border-left: 1px solid var(--ligne);
	line-height: 1.4;
	transition: all 0.18s var(--rythme);
}

.k-sommaire a:hover,
.k-sommaire a.est-actif {
	color: var(--or);
	border-left-color: var(--or);
}

/* ============================================ 13. Navigation secondaire */

.k-ariane {
	font-size: var(--t-petit);
	color: var(--craie-3);
	padding-block: var(--e-4);
}

.k-ariane ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-ariane li {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
}

.k-ariane li + li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 1px solid var(--craie-3);
	border-right: 1px solid var(--craie-3);
	transform: rotate(45deg);
	opacity: 0.6;
}

.k-ariane a {
	color: var(--craie-3);
	text-decoration: none;
}

.k-ariane a:hover {
	color: var(--or);
}

.k-ariane [aria-current='page'] {
	color: var(--craie-2);
}

.k-pagination {
	display: flex;
	justify-content: center;
	gap: var(--e-2);
	margin-top: var(--e-7);
	flex-wrap: wrap;
}

.k-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: var(--e-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	color: var(--craie-2);
	text-decoration: none;
	font-size: var(--t-note);
	font-weight: 600;
	transition: all 0.2s var(--rythme);
}

.k-pagination .page-numbers:hover {
	border-color: var(--or-trait);
	color: var(--or);
	background: var(--or-voile);
}

.k-pagination .page-numbers.current {
	background: var(--or);
	border-color: var(--or);
	color: var(--noir);
}

.k-pagination .dots {
	border: 0;
}

/* --- Recherche --- */
.k-recherche {
	display: flex;
	gap: var(--e-2);
	max-width: 32rem;
}

.k-recherche input {
	flex: 1;
}

/* Le tiroir de recherche déployé depuis l'en-tête. */
.k-tiroir-recherche {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.32s var(--rythme-sec);
	border-top: 1px solid transparent;
}

.k-tiroir-recherche.est-ouvert {
	grid-template-rows: 1fr;
	border-top-color: var(--ligne);
}

.k-tiroir-recherche__interieur {
	overflow: hidden;
}

.k-tiroir-recherche .k-recherche {
	max-width: none;
	padding-block: var(--e-4);
}

/* ==================================================== 14. Mouvement */

/* Révélation au défilement. L'état initial n'est posé que si le JavaScript a
   pris la main (classe sur <html>) : sans lui, tout est visible d'emblée. */
.js .k-reveler {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s var(--rythme), transform 0.7s var(--rythme-sec);
}

.js .k-reveler.est-visible {
	opacity: 1;
	transform: none;
}

/* Décalage en cascade pour les grilles : les enfants arrivent l'un après
   l'autre, ce qui donne le sentiment que la page se compose. */
.js .k-cascade > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--rythme), transform 0.6s var(--rythme-sec);
}

.js .k-cascade.est-visible > * {
	opacity: 1;
	transform: none;
}

.js .k-cascade.est-visible > :nth-child(1) { transition-delay: 0.04s; }
.js .k-cascade.est-visible > :nth-child(2) { transition-delay: 0.1s; }
.js .k-cascade.est-visible > :nth-child(3) { transition-delay: 0.16s; }
.js .k-cascade.est-visible > :nth-child(4) { transition-delay: 0.22s; }
.js .k-cascade.est-visible > :nth-child(5) { transition-delay: 0.28s; }
.js .k-cascade.est-visible > :nth-child(6) { transition-delay: 0.34s; }
.js .k-cascade.est-visible > :nth-child(7) { transition-delay: 0.4s; }
.js .k-cascade.est-visible > :nth-child(8) { transition-delay: 0.46s; }

/* Entrée de la bannière : jouée une fois, au chargement. */
.k-banniere__interieur > * > .k-anime {
	animation: k-monter 0.8s var(--rythme-sec) both;
}

.k-banniere .k-etiquette { animation: k-monter 0.7s var(--rythme-sec) 0.05s both; }
.k-banniere__titre { animation: k-monter 0.8s var(--rythme-sec) 0.12s both; }
.k-banniere__intro { animation: k-monter 0.8s var(--rythme-sec) 0.2s both; }
.k-banniere .k-actions { animation: k-monter 0.8s var(--rythme-sec) 0.28s both; }
.k-banniere__preuves { animation: k-monter 0.8s var(--rythme-sec) 0.36s both; }
.k-banniere .k-fiche { animation: k-monter-fiche 1s var(--rythme-sec) 0.32s both; }

@keyframes k-monter {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes k-monter-fiche {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ======================================= 15. Adaptations et préférences */

@media (max-width: 1080px) {
	.k-pied__haut,
	.k-body--pied-3col .k-pied__haut {
		grid-template-columns: repeat(2, 1fr);
	}

	.k-page-avec-sommaire {
		grid-template-columns: 1fr;
	}

	.k-sommaire {
		position: static;
		order: -1;
	}
}

@media (max-width: 960px) {
	.k-nav,
	.k-bandeau__arguments li:nth-child(n + 3) {
		display: none;
	}

	.k-hamburger {
		display: block;
	}

	.k-banniere__interieur {
		grid-template-columns: 1fr;
	}

	.k-banniere .k-fiche {
		max-width: 26rem;
	}

	.k-etape::before {
		display: none;
	}

	.k-duo--inverse > :first-child {
		order: 0;
	}
}

@media (max-width: 700px) {
	.k-bandeau__arguments {
		display: none;
	}

	.k-bandeau__interieur {
		justify-content: center;
	}

	.k-pied__haut,
	.k-body--pied-3col .k-pied__haut {
		grid-template-columns: 1fr;
		gap: var(--e-6);
	}

	.k-pied__bas {
		flex-direction: column;
		align-items: flex-start;
	}

	.k-outils .k-bouton {
		display: none;
	}

	.k-actions .k-bouton {
		width: 100%;
	}

	.k-chiffres {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.k-appareils {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Certains visiteurs paient le mouvement en nausées ou en migraines. On coupe
   tout, sans exception, plutôt que de « réduire ». */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.js .k-reveler,
	.js .k-cascade > * {
		opacity: 1;
		transform: none;
	}
}

/* Le grain et les lueurs disparaissent en contraste élevé : ils y sont du
   bruit, au sens propre. */
@media (prefers-contrast: more) {
	:root {
		--craie-2: #d7dbe2;
		--craie-3: #b4bac4;
		--ligne: rgba(247, 250, 254, 0.22);
		--ligne-2: rgba(247, 250, 254, 0.4);
	}

	body::before,
	.k-trame,
	.k-lueur,
	.k-banniere__lueur {
		display: none;
	}
}

@media print {
	body {
		background: #fff;
		color: #000;
	}

	body::before,
	.k-entete-site,
	.k-pied,
	.k-appel,
	.k-actions {
		display: none !important;
	}

	.k-prose {
		max-width: none;
	}
}