/* ==========================================================================
   Base commune — reset et tokens de design.
   Reprend le reset appliqué par les maquettes (helmet) : sans box-sizing
   border-box, les paddings s'ajoutent aux largeurs et les grilles des
   maquettes ne tombent pas juste.

   Le legacy emploie « The New CSS Reset » (all: unset). Il n'est PAS repris :
   il retirerait la graisse des <strong> et l'italique des <em>, présents
   868 et 22 fois dans lang/*.php et content/marques/*.php — soit toute la
   mise en valeur du contenu éditorial. Seules ses trois règles réellement
   utiles sont reprises ci-dessous.
   ========================================================================== */

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

html,
body {
	margin: 0;
	padding: 0;
}

/* Garde-fou mobile : AUCUN scroll horizontal de page (règle projet). Un élément
   qui déborderait de quelques pixels ne fait plus défiler la page. Scopé mobile :
   en desktop, un overflow-x:hidden casserait les panneaux position:sticky (aside
   tunnel, nav compte) — sur mobile ils sont déjà statiques, donc sans risque. Les
   zones à défilement horizontal VOULU restent dans leur propre conteneur
   (overflow-x:auto), pas au niveau de la page. */
@media (max-width: 900px) {
	html,
	body {
		overflow-x: hidden;
	}
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

/* --- Reprises du reset legacy -------------------------------------------- */

/* Un lien ou un bouton se signale par le curseur, sans avoir à le redire dans
   chaque composant. `a` sans href reste exclu : sans destination, ce n'est
   pas une cible cliquable. */
a[href],
button {
	cursor: pointer;
}

/* Tout <button> du site est habillé par un composant ou une classe de page :
   relevé sur l'ensemble des sources, aucun ne compte sur l'apparence native.
   Le dépouillement vit donc ici, une fois, au lieu d'être réécrit dans une
   vingtaine de règles réparties sur dix feuilles.
   `font: inherit` est sans effet visible sur les boutons qui n'avaient aucune
   propriété font : ils ne portent que des icônes ou héritent de .kk-btn.
   text-align n'en fait PAS partie : le centrage natif reste utile aux boutons
   qui ne posent pas de mise en page propre. */
button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Les tableaux du site passent tous par kk-doc-tbl, qui le pose déjà ; ici
   c'est le filet pour tout tableau à venir. */
table {
	border-collapse: collapse;
}

/* Les listes de l'interface sont des grilles, des rangées ou des listes à
   pictogramme : aucune n'utilise les puces natives, et vingt-sept règles
   réécrivaient ce dépouillement.
   Le sélecteur d'attribut est délibéré : une liste SANS classe est du contenu
   éditorial (pages marques, mentions légales), où les puces sont voulues.
   :where() annule la spécificité, sans quoi ul[class] (0,1,1) l'emporterait
   sur toute règle de composant (0,1,0) et écraserait ses marges.
   figure y est joint pour le même motif : sa marge native de 40px n'a de sens
   dans aucune de nos mises en page. */
:where(ul[class], ol[class], figure) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* L'attribut `hidden` de la feuille UA ne vaut que `display: none` sur le
   sélecteur de type : la moindre classe qui pose un `display` (flex, grid…)
   le neutralise et l'élément reste visible. Le JS s'appuie sur `.hidden = true`
   (filtres de la boutique, tiroirs), donc la règle doit gagner. */
[hidden] {
	display: none !important;
}

/* Firefox atténue le texte indicatif, pas Chrome : on aligne les deux, la
   couleur venant ensuite des composants. */
::placeholder {
	opacity: 1;
}

/* --- Focus clavier -------------------------------------------------------
   Un utilisateur au clavier doit voir où il se trouve, sur toute page et tout
   composant. Le contour natif ne suffit pas : il varie d'un navigateur à
   l'autre et disparaît sur les bandes sombres du site.

   :focus-visible et non :focus — le contour n'apparaît qu'à la navigation
   clavier, pas au clic. C'est ce qui permet de ne PAS le neutraliser au coup
   par coup, comme cinq champs le faisaient encore.
   ------------------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--k-orange);
	outline-offset: 2px;
}

/* --- Tokens de design (maquettes klavkarr) ------------------------------- */

:root {
	--k-orange: #F29644;
	--k-orange-hover: #E47E12;
	--k-orange-dark: #B9690C;
	/* Orange éclairci, lisible sur les bandes sombres. */
	--k-orange-glow: #F4A445;
	/* Fonds orangés : pastilles et encarts (tint), dégradé des héros (hero). */
	--k-orange-tint: #FDF1E1;
	--k-hero-tint: #FCEAD2;

	--k-charcoal: #1E2530;
	--k-nav: #55606E;
	/* Échelle d'encre, du plus foncé au plus clair : corps de texte, texte
	   secondaire, texte atténué, texte discret (méta, légendes). */
	--k-body: #3D4753;
	--k-muted: #5B6675;
	--k-soft: #7A8694;
	--k-faint: #9AA4B0;

	--k-bg: #F4F3F0;
	/* Palette « Greige neutre » des maquettes (valeur par défaut du prop bg). */
	--k-bg-alt: #ECEAE5;
	--k-header-bg: #fff;
	/* Fond des pastilles et vignettes posées sur du blanc. */
	--k-tile: #F7F4EF;
	/* Variante plus chaude du précédent, pour une pastille qui doit se détacher
	   d'un fond déjà crème (compteur de voyants, vignette produit du sélecteur).
	   4,5 de ΔE la séparent de --k-tile : c'est visible, elle reste distincte. */
	--k-warm-tile: #F6EEE2;
	--k-hover: #F2E7D6;

	--k-blue: #1F3557;
	--k-blue-light: #2B466F;
	/* Encres posées sur les bandes sombres (bleu / charcoal), du plus contrasté
	   au plus discret : texte principal, corps de texte, texte secondaire,
	   chapô.
	   --k-dark-strong est BLANC, et c'est le seul niveau autorisé pour un titre
	   ou un texte fort sur fond sombre. Le crème #F6EEE2 le disputait à #fff
	   sans règle : dix-neuf règles écrivaient l'un, dix l'autre, pour le même
	   rôle — d'une bande à l'autre le même titre changeait de teinte. */
	--k-dark-strong: #fff;
	--k-dark-body: #C7CDD6;
	--k-dark-muted: #B6BDC7;
	--k-dark-lead: #9AA9BE;

	/* Le fond des bandes sombres. Il apparaissait onze fois recopié à
	   l'identique dans huit feuilles ; une seule y suffit. La classe qui
	   l'applique est .kk-band-dark, dans components.css. */
	--k-gradient-dark:
		radial-gradient(120% 160% at 12% 0%, var(--k-blue-light) 0%, var(--k-blue) 60%);

	/* Surfaces posées SUR une bande sombre : on éclaircit le fond plutôt que
	   d'y poser du blanc, pour que le dégradé continue de transparaître.
	   --hover et --line partagent aujourd'hui la même valeur mais pas le même
	   rôle : l'un est un fond au survol, l'autre un filet. Deux noms, pour
	   qu'ils puissent diverger sans se chercher. */
	--k-dark-surface: rgba(255, 255, 255, 0.06);
	--k-dark-surface-hover: rgba(255, 255, 255, 0.14);
	--k-dark-line: rgba(255, 255, 255, 0.14);

	/* Largeur du site. Token structurel : le header et le footer en ont besoin
	   sans passer par components.css. */
	--container: 1200px;

	/* Filets. --k-border-soft (#F0E8DA) a été fusionné dans --k-border en
	   août 2026 : 0,7 de ΔE les séparaient, soit rien de perceptible, pour deux
	   tokens à tenir en cohérence. --k-border-active marque un élément
	   sélectionné ou déplié, il est nettement plus soutenu que --k-border-warm. */
	--k-border: #EFE6D8;
	--k-border-warm: #F0DEC4;
	--k-border-active: #F0C98A;
	--k-chevron: #C3B6A2;

	/* Encre brune des encarts sur fond orangé, et or chaud des chevrons et
	   flèches. Tous deux relevés sur leurs usages réels : ils n'avaient pas de
	   token et se recopiaient de page en page. */
	--k-warm-ink: #7A5A2B;
	--k-gold: #C9A06A;

	--k-green: #2E9E6A;
	--k-green-ink: #22623F;
	--k-green-tint: #EAF6EF;
	--k-green-border: #CDEBDB;
	/* Le rouge d'alerte du site : relevé sur ses cinq usages réels (voyant
	   clignotant, champ en erreur, ligne « non inclus »). L'ancienne valeur
	   #C4553D venait d'un repli de shop.css que rien n'appliquait. */
	--k-red: #D64533;
	--k-red-tint: #FBE0DB;
	/* Encre des messages d'erreur : plus sombre que --k-red, qui manque de
	   contraste en petit corps sur fond clair. */
	--k-red-ink: #B3261E;

	--k-overlay: rgba(20, 24, 32, 0.45);

	/* Échelle des titres de section. Le site en comptait quatorze bornes hautes
	   entre 24 et 44px pour un même niveau de titre — quarante-six déclarations
	   de font-size, une par section. shop.css avait déjà posé une échelle à cinq
	   crans (.pg-head--xs à --xl) : elle est reprise ici pour tout le site.
	   Une page choisit un cran, elle n'invente pas une taille. */
	--k-h2-xs: clamp(19px, 2.4vw, 24px);
	--k-h2-s:  clamp(20px, 2.6vw, 28px);
	--k-h2-m:  clamp(22px, 3vw, 31px);
	--k-h2-l:  clamp(23px, 3.1vw, 34px);
	--k-h2-xl: clamp(26px, 3.6vw, 40px);

	/* Titres de carte et de sous-section. Sept tailles pour treize règles, entre
	   15 et 20px : trois crans suffisent. La graisse, elle, reste au choix de la
	   page — 700 pour un intitulé, 800 pour un titre de carte. */
	--k-h3-s: 16px;
	--k-h3-m: 18px;
	--k-h3-l: 20px;

	/* Échelle du texte courant. Dix-sept tailles cohabitaient entre 11 et 19px,
	   par pas d'un demi-pixel : 373 déclarations pour ce qui tient en sept
	   crans. Les valeurs sont entières — un demi-pixel ne se voit pas et se
	   rend différemment d'un navigateur à l'autre.
	   xs méta et mentions | s libellés | m texte de carte | l texte courant
	   xl texte large | 2xl accroche | 3xl chapô
	   L'INTERLIGNE ne suit pas l'échelle : un libellé de pastille demande 1.2,
	   un paragraphe 1.65. Seul celui des paragraphes est unifié (--k-lh). */
	--k-text-xs: 12px;
	--k-text-s: 13px;
	--k-text-m: 14px;
	--k-text-l: 15px;
	--k-text-xl: 16px;
	--k-text-2xl: 17px;
	--k-text-3xl: 18px;
	--k-lh: 1.65;

	/* Rayons des surfaces. Le site en comptait onze entre 11 et 26px pour trois
	   familles d'objets — la vignette, la carte, le grand panneau — et le rayon
	   dérivait d'une page à l'autre sans intention. Les valeurs viennent des
	   composants kk- : kk-icotile (13), kk-doc-scroll et kk-faq-item (16),
	   kk-card (22). Les pastilles (999px), les ronds (50%) et les petits
	   arrondis (≤10px : champs, barres, étiquettes de code) ne sont pas concernés.
	   tile 11→14  |  card 15→18  |  lg 20→26 */
	--k-r-tile: 13px;
	--k-r-card: 16px;
	--k-r-lg: 22px;

	/* Ombres. Le site en comptait quarante valeurs distinctes pour six
	   intentions : chaque page recopiait l'ombre voisine en changeant un
	   chiffre. Une intention = un token.
	   card   : surface posée sur le fond crème (cartes, tableaux, figures) ;
	   lift   : la même au survol, ou un bloc qui doit flotter ;
	   drama  : visuel de héro, produit détouré sur fond sombre ;
	   orange : bouton primaire ; -sm les petits boutons ronds ;
	   -lg    : halo d'une carte mise en avant. */
	--k-shadow-card: 0 14px 32px -28px rgba(40, 30, 15, 0.5);
	--k-shadow-lift: 0 24px 44px -24px rgba(40, 30, 15, 0.45);
	--k-shadow-drama: 0 30px 58px -30px rgba(20, 25, 35, 0.55);
	--k-shadow-orange: 0 14px 28px -10px rgba(242, 150, 68, 0.7);
	--k-shadow-orange-sm: 0 8px 16px -8px rgba(242, 150, 68, 0.8);
	--k-shadow-orange-lg: 0 26px 54px -28px rgba(242, 150, 68, 0.5);
	--k-font-title: 'Hanken Grotesk', system-ui, sans-serif;
	--k-font-body: 'Mulish', system-ui, sans-serif;
}

/* --- Points de rupture ---------------------------------------------------
   ÉCHELLE UNIQUE du site. Une media query n'accepte pas de variable CSS :
   c'est donc une convention, pas un token — mais elle se tient.

     400   très petits mobiles (rattrapages ponctuels)
     480   mobile
     560   grand mobile
     640   petite tablette
     760   tablette — bascule d'une grille à deux colonnes vers une colonne
     820   tablette large
     980   passage desktop : sommaires collants et héros à deux colonnes
     1080  bascule de la navigation (voir header.css)

   Les compléments s'écrivent en min-width à la valeur + 1 (641, 981, 1081).
   Le site en comptait vingt et un : 520 et 560, 700 et 720 et 760, 900 et 920
   et 940 cohabitaient sans raison. Ne pas en ajouter hors de cette liste.
   ------------------------------------------------------------------------ */

/* --- Mouvement réduit ----------------------------------------------------
   Politique UNIQUE du site : quand le système demande moins d'animation, on
   ramène toute transition et toute animation à une durée nulle. Les états de
   survol restent donc appliqués, mais instantanément — ce n'est plus une
   animation. Chaque feuille avait sa propre liste de composants à neutraliser
   (dtc, elm, header, video) : quatre listes à tenir à jour, et 8 feuilles qui
   animaient sans garde. Cette règle-ci couvre tout le site sans énumération.
   ------------------------------------------------------------------------ */

@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;
	}
}

/* Les titres utilisent la police de titrage : convention globale, plutôt que
   répétée dans chaque feuille de page. */
h1, h2, h3 {
	font-family: var(--k-font-title);
	letter-spacing: -0.02em;
}

/* Un titre de section est TOUJOURS en 800, un titre de carte ou de
   sous-section TOUJOURS en 700. Les deux graisses étaient répétées dans
   cinquante-deux règles, et l'interlettrage des h2 dans vingt-six. */
h2 {
	font-weight: 800;
	line-height: 1.15;
}

h3 {
	font-weight: 700;
}

body {
	background: var(--k-bg);
	color: var(--k-charcoal);
	font-family: var(--k-font-body);
	line-height: var(--k-lh);
}