/* ==========================================================================
   MUSIK — Fondation
   Polices, jetons, reset, typographie, boutons, formulaires, utilitaires.

   Direction : « salle d'essai ». Gris pierre froid, encre presque noire,
   un seul accent (le rouge du voyant REC) réservé aux promotions et aux
   états actifs. Un seul rayon (2 px) pour tout ce qui a un bord.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (Fontshare, licence ITF FFL : usage commercial
   gratuit). Melodrama pour les titres, Switzer pour le texte et les prix.
   Melodrama dessine un zéro barré : ses chiffres sont remplacés, dans la même
   famille CSS, par ceux de Switzer Light (unicode-range).
   -------------------------------------------------------------------------- */
@font-face { font-family: "Melodrama"; src: url("../fonts/melodrama-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-002F, U+003A-10FFFF; }
@font-face { font-family: "Melodrama"; src: url("../fonts/melodrama-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-002F, U+003A-10FFFF; }
@font-face { font-family: "Melodrama"; src: url("../fonts/melodrama-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-002F, U+003A-10FFFF; }
/* Chiffres des titres : Switzer Light, au gris du trait fin de Melodrama.
   Une déclaration par graisse, descripteurs identiques à la face Melodrama
   correspondante : le navigateur les combine au lieu de choisir l'une ou l'autre. */
@font-face { font-family: "Melodrama"; src: url("../fonts/switzer-300.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0030-0039; size-adjust: 96%; }
@font-face { font-family: "Melodrama"; src: url("../fonts/switzer-300.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0030-0039; size-adjust: 96%; }
@font-face { font-family: "Melodrama"; src: url("../fonts/switzer-300.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0030-0039; size-adjust: 96%; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   2. Jetons
   -------------------------------------------------------------------------- */
:root {
	color-scheme: light;

	--paper:      #EEEEEB;
	--paper-2:    #E4E4E0;
	--plinth:     #E2E2DE; /* fond des photos produit : les vignettes s'y fondent */
	--surface:    #F8F8F6;
	--ink:        #161616;
	--ink-2:      #3B3B39;
	--muted:      #62625E;
	--line:       rgb(22 22 22 / .11);
	--line-2:     rgb(22 22 22 / .22);
	--accent:     #B8321F;
	--on-accent:  #FFFFFF;
	--on-ink:     #F4F4F1;
	--ok:         #2E6A4C;
	--scrim:      rgb(14 14 14 / .55);
	--shadow:     0 1px 2px rgb(22 22 22 / .04), 0 12px 32px -12px rgb(22 22 22 / .18);
	--img-filter: none;

	--font-display: "Melodrama", "Switzer", ui-sans-serif, system-ui, sans-serif;
	--font-body:    "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Échelle fluide : du téléphone (360 px) au grand écran (1440 px). */
	--t-xs:   .78rem;
	--t-sm:   .875rem;
	--t-base: 1rem;
	--t-md:   1.125rem;
	--t-lg:   clamp(1.3rem, 1.12rem + .7vw, 1.6rem);
	--t-xl:   clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	--t-2xl:  clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem);
	--t-hero: clamp(2.75rem, 1.4rem + 4.9vw, 5.5rem);

	--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
	--s-6: 2rem;   --s-7: 3rem; --s-8: 4rem;  --s-9: 6rem; --s-10: 8rem;
	--section: clamp(4rem, 2.5rem + 6vw, 8rem);

	--wrap: 1360px;
	--gutter: clamp(1rem, .5rem + 2.6vw, 3rem);
	--r: 2px;
	--header-h: 68px;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--dur: .45s;
}

/* Sombre : suit le système. Les photos sont légèrement atténuées pour ne pas
   éblouir sur fond noir. */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--paper:      #111111;
		--paper-2:    #191918;
		--plinth:     #1F1F1E;
		--surface:    #1D1D1C;
		--ink:        #ECECE8;
		--ink-2:      #C4C4BF;
		--muted:      #9B9B96;
		--line:       rgb(236 236 232 / .1);
		--line-2:     rgb(236 236 232 / .2);
		--accent:     #F0604C;
		--on-accent:  #121212;
		--on-ink:     #121212;
		--ok:         #6FC69A;
		--scrim:      rgb(0 0 0 / .62);
		--shadow:     0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -16px rgb(0 0 0 / .7);
		--img-filter: brightness(.88) contrast(1.04);
	}
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--t-base);
	line-height: 1.6;
	font-feature-settings: "kern", "liga";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
img { filter: var(--img-filter); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(ul, ol)[class] { list-style: none; margin: 0; padding: 0; }
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
::selection { background: var(--ink); color: var(--on-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }

.mk-ic { width: 1.15em; height: 1.15em; flex: none; }

/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, .display {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -.018em;
	line-height: 1.1;
	color: var(--ink);
	text-wrap: balance;
}
h1, .h1 { font-size: var(--t-2xl); }
h2, .h2 { font-size: var(--t-xl); line-height: 1.12; }
h3, .h3 { font-size: var(--t-lg); line-height: 1.15; letter-spacing: -.01em; }
h4, h5, h6 { font-family: var(--font-body); font-size: var(--t-base); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
p { text-wrap: pretty; }
.lead { font-size: var(--t-md); color: var(--ink-2); line-height: 1.55; max-width: 52ch; }
.muted { color: var(--muted); }
.num, .price, .amount { font-variant-numeric: tabular-nums lining-nums; }

/* Surtitre : rationné (un pour trois sections au plus). */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.eyebrow--accent { color: var(--accent); }

.link {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .32em;
	text-decoration-color: var(--line-2);
	transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }
.link .mk-ic { transition: transform var(--dur) var(--ease); }
.link:hover .mk-ic { transform: translateX(3px); }

/* Contenu éditorial (pages légales, articles). */
.entry-content { max-width: 70ch; margin-inline: auto; color: var(--ink-2); }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: var(--t-lg); margin-top: 2.2em; color: var(--ink); }
.entry-content h3 { font-size: var(--t-md); font-family: var(--font-body); font-weight: 600; margin-top: 1.8em; color: var(--ink); letter-spacing: 0; }
.entry-content a { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--line-2); }
.entry-content a:hover { text-decoration-color: currentColor; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content li + li { margin-top: .35em; }
.entry-content strong { color: var(--ink); font-weight: 600; }
.entry-content blockquote { border-left: 1px solid var(--ink); padding-left: var(--s-5); font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); }
.entry-content table th, .entry-content table td { border-bottom: 1px solid var(--line); padding: .7em .5em; text-align: left; }
.entry-content img { border-radius: var(--r); }

/* --------------------------------------------------------------------------
   5. Mise en page
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--tint { background: var(--paper-2); }
.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }
.sr-only, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: .7rem 1rem; border-radius: var(--r); }
.skip-link:focus { top: var(--s-4); }

/* En-tête de section : titre, puis éventuel lien aligné à droite. */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); }
.section-head h2 { max-width: 20ch; }
.section-head .lead { margin-top: var(--s-4); }
@media (max-width: 767px) { .section-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--s-6); } }

/* --------------------------------------------------------------------------
   6. Boutons — une mécanique unique pour tout le thème
   -------------------------------------------------------------------------- */
.btn,
.button,
button.button,
input[type="submit"],
.wp-element-button {
	--btn-bg: var(--ink);
	--btn-fg: var(--on-ink);
	--btn-bd: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	padding: .8rem 1.4rem;
	border: 1px solid var(--btn-bd);
	border-radius: var(--r);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-size: var(--t-sm);
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .15s ease;
}
.btn:hover, .button:hover, input[type="submit"]:hover { --btn-bg: var(--ink-2); --btn-bd: var(--ink-2); }
.btn:active, .button:active, input[type="submit"]:active { transform: translateY(1px); }
.btn .mk-ic { transition: transform var(--dur) var(--ease); }
.btn:hover .mk-ic { transform: translateX(3px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--on-ink); --btn-bd: var(--ink); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--accent:hover { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: var(--on-ink); }
.btn--lg { min-height: 54px; padding: .95rem 1.7rem; font-size: var(--t-base); }
.btn--sm { min-height: 40px; padding: .55rem 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .button:disabled, .button.disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   7. Formulaires
   -------------------------------------------------------------------------- */
.mk-field { display: grid; gap: .45rem; align-content: start; }
.mk-label, .woocommerce form .form-row label { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.mk-help { font-size: var(--t-xs); color: var(--muted); }
.mk-error { font-size: var(--t-xs); color: var(--accent); }

.mk-input,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"], input[type="date"],
select, textarea {
	width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	color: var(--ink);
	font-size: var(--t-base);
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
textarea { min-height: 140px; resize: vertical; }
select {
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2362625E'%3E%3Cpath d='M212.24 100.24l-80 80a6 6 0 0 1-8.48 0l-80-80a6 6 0 0 1 8.48-8.48L128 167.51l75.76-75.75a6 6 0 0 1 8.48 8.48Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 14px;
}
::placeholder { color: var(--muted); opacity: 1; }
.mk-input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--line); }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); margin: 0; }

/* Recherche */
.mk-search-form, .woocommerce-product-search { display: flex; gap: var(--s-2); }
.mk-search-form input, .woocommerce-product-search input[type="search"] { flex: 1; }
.mk-search-form button, .woocommerce-product-search button { min-height: 48px; padding: 0 1.2rem; border-radius: var(--r); background: var(--ink); color: var(--on-ink); font-size: var(--t-sm); font-weight: 500; }

/* --------------------------------------------------------------------------
   8. Composants partagés
   -------------------------------------------------------------------------- */
.badge {
	display: inline-flex; align-items: center; gap: .35em;
	padding: .2rem .5rem;
	border-radius: var(--r);
	background: var(--paper);
	color: var(--ink);
	font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}
.badge--sale { color: var(--accent); }
.badge--soft { background: transparent; border: 1px solid var(--line-2); color: var(--muted); font-weight: 500; }

.stars { display: inline-flex; gap: 1px; color: var(--ink); }
.stars .mk-ic { width: .9em; height: .9em; }
.stars .mk-ic + .mk-ic { margin-left: 0; }

/* Liste à icônes (réassurance, arguments). */
.ticks { display: grid; gap: var(--s-4); }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.ticks .mk-ic { width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--ink); }
.ticks strong { display: block; font-weight: 600; }
.ticks span span, .ticks small { display: block; color: var(--muted); font-size: var(--t-sm); }

/* Accordéon (FAQ) */
.faq-list { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
	padding: 1.25rem 0;
	font-size: var(--t-md); font-weight: 500; line-height: 1.4;
	cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .mk-ic { width: 1.1rem; height: 1.1rem; color: var(--muted); transition: transform var(--dur) var(--ease); }
.faq-item[open] summary .mk-ic { transform: rotate(45deg); color: var(--ink); }
.faq-item__body { padding: 0 3rem 1.4rem 0; color: var(--ink-2); max-width: 64ch; }

/* --------------------------------------------------------------------------
   9. Apparition au défilement
   Le contenu n'est masqué QUE si le script tourne (classe .js posée dans
   <head>) : sans JavaScript, tout reste lisible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
	.js [data-reveal].is-in { opacity: 1; transform: none; }
}