/* ==========================================================================
   MUSIK — Accueil et pages intérieures
   Direction « catalogue de spécimens » : chaque instrument posé seul sur une
   teinte du nuancier, à la même échelle. Les photos produit (fond pierre)
   sont multipliées sur la teinte : leur fond disparaît, l'objet reste.
   ========================================================================== */

/* Spécimen : la teinte est le fond, la photo s'y fond par multiplication. */
.specimen__tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--tint, var(--plinth));
	isolation: isolate;
	transition: background-color 1.6s ease;
}
.specimen__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	filter: var(--specimen-filter);
	transition: opacity 1.6s ease, transform 1.1s var(--ease);
}

/* --------------------------------------------------------------------------
   Hero : le titre en haut à gauche, quatre spécimens de tailles différentes.
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(1.5rem, .75rem + 2.4vw, 3rem) 0; }
.hero + .section { padding-top: clamp(6rem, 3.5rem + 5vw, 8rem); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
.hero__copy { grid-column: 1 / span 6; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); padding-right: var(--s-6); }
.hero__lead { display: grid; gap: var(--s-5); justify-items: start; }
.hero__title { font-size: var(--t-hero); line-height: .95; letter-spacing: -.035em; }
.hero__sub { font-size: var(--t-md); line-height: 1.5; max-width: 38ch; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-2); }
.hero__facts { display: flex; flex-wrap: wrap; gap: .4rem var(--s-5); font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.hero__facts span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__facts span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.hero__facts .hero__promo { color: var(--accent); }
.hero__facts .hero__promo::before { background: var(--rec); }

.hero__figure { grid-column: 7 / -1; aspect-ratio: 1; overflow: hidden; background: var(--plinth); }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 70%; }
@media (prefers-reduced-motion: no-preference) {
	.hero__figure img { animation: mk-settle 2.4s var(--ease) both; }
}
@keyframes mk-settle { from { transform: scale(1.07); } to { transform: none; } }

@media (max-width: 1023px) {
	.hero__copy { grid-column: 1 / -1; padding-right: 0; gap: var(--s-6); }
	.hero__figure { grid-column: 1 / -1; margin-top: var(--s-7); }
}
@media (max-width: 600px) {
	.hero__title { font-size: clamp(2.6rem, 11.4vw, 3.4rem); }
	.hero__actions .btn { width: 100%; }
	.hero__figure { margin-top: var(--s-6); aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   Les familles : la porte d'entrée de l'accueil. Une grande vignette, puis
   les autres, chacune sur sa teinte ; le nom et un fait sous la vignette.
   -------------------------------------------------------------------------- */
.families-home__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-7); }
.fam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
.fam:first-child { grid-column: span 2; grid-row: span 2; }
.fam a { display: flex; flex-direction: column; height: 100%; }
.fam .specimen__tile { aspect-ratio: 1; }
.fam:first-child .specimen__tile { flex: 1; aspect-ratio: auto; min-height: 320px; }
.fam__name { margin-top: .75rem; font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.fam:first-child .fam__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500; letter-spacing: -.015em; }
.fam__fact { margin-top: .15rem; font-size: var(--t-sm); color: var(--muted); }
.fam a:hover .specimen__tile img { transform: scale(1.05); }
.fam a:hover .fam__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (max-width: 1023px) {
	.fam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.fam-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-3); }
	.fam:first-child { grid-row: auto; }
	.fam:first-child .specimen__tile { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
	.fam__name { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   L'atelier : photo large avec sa légende posée, teinte et chiffres.
   -------------------------------------------------------------------------- */
.atelier__head { display: grid; gap: var(--s-5); max-width: 760px; }
.atelier__lead { font-size: var(--t-md); line-height: 1.5; max-width: 52ch; }
.atelier__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-8); align-items: start; }
.atelier__photo { position: relative; grid-column: 1 / span 8; aspect-ratio: 16 / 10; overflow: hidden; background: var(--plinth); }
.atelier__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.atelier__photo figcaption { position: absolute; top: 0; right: 0; width: min(340px, 45%); padding: var(--s-5); background: var(--paper); font-size: var(--t-base); line-height: 1.5; }
.atelier__side { grid-column: 9 / -1; display: grid; gap: var(--s-6); }
.atelier__tile { display: grid; align-content: space-between; aspect-ratio: 4 / 3; padding: var(--s-5); background: var(--tint); color: #131313; }
.atelier__tile svg { width: 64%; max-width: 240px; justify-self: center; margin-top: var(--s-4); }
.atelier__tile p { font-size: var(--t-base); font-weight: 500; }
.atelier__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-5); }
.atelier__facts dt { font-size: var(--t-sm); color: var(--muted); }
.atelier__facts dd { margin: .15rem 0 0; font-size: var(--t-base); font-weight: 500; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
	.atelier__tile circle { animation: mk-rec 2.4s ease-in-out infinite; transform-origin: 120px 16px; }
}
@keyframes mk-rec { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 899px) {
	.atelier__photo, .atelier__side { grid-column: 1 / -1; }
	.atelier__photo { aspect-ratio: auto; overflow: visible; background: none; }
	.atelier__photo img { aspect-ratio: 4 / 3; }
	.atelier__photo figcaption { position: static; width: auto; padding: var(--s-4) 0 0; background: none; }
	.atelier__tile { aspect-ratio: 3 / 2; }
	.atelier__side { margin-top: var(--s-5); }
}
@media (min-width: 600px) and (max-width: 899px) {
	.atelier__side { grid-template-columns: 1fr 1fr; align-items: center; }
	.atelier__tile { aspect-ratio: 1; }
}

/* --------------------------------------------------------------------------
   Menu des budgets : les prix posés comme une carte de restaurant.
   -------------------------------------------------------------------------- */
.budget { background: var(--paper-2); }
.budget__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
.budget__intro { grid-column: 1 / span 5; display: grid; gap: var(--s-5); justify-items: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); padding-right: var(--s-6); }
.budget__intro h2 { max-width: 13ch; }
.budget__lead { font-size: var(--t-md); line-height: 1.5; max-width: 34ch; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.no-js .chips { display: none; } /* sans script : les liens des paliers mènent aux guitares */
.chip {
	min-height: 44px;
	padding: .5rem 1.05rem;
	background: var(--paper);
	color: var(--ink);
	font-size: var(--t-base);
	font-weight: 500;
	transition: background-color .25s ease, color .25s ease, transform .15s ease;
}
.chip:hover { background: var(--surface); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.tiers { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) clamp(2rem, 4vw, 4rem); }
.tier { display: flex; flex-direction: column; gap: var(--s-3); }
.tier::before { content: ""; height: 10px; margin-bottom: var(--s-3); background: var(--fin-sonic); }
.tier:nth-child(2)::before { background: var(--fin-shell); }
.tier:nth-child(3)::before { background: var(--fin-surf); }
.tier:nth-child(4)::before { background: var(--fin-butter); }
.tier__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.tier__head p { font-size: var(--t-base); font-weight: 500; white-space: nowrap; }
.tier__note { font-size: var(--t-base); color: var(--muted); flex: 1; }
.tier__count { margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--t-xl); line-height: 1; letter-spacing: -.02em; }
@media (prefers-reduced-motion: no-preference) {
	.tier__count.is-swapped { animation: mk-swap .5s var(--ease) both; }
}
@keyframes mk-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
	.budget__intro { grid-column: 1 / -1; position: static; padding-right: 0; }
	.tiers { grid-column: 1 / -1; margin-top: var(--s-7); }
}
@media (max-width: 600px) {
	.tiers { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* --------------------------------------------------------------------------
   Carte réponse : une carte de papier posée de biais sur un aplat d'encre,
   rognée par le bas de la section.
   -------------------------------------------------------------------------- */
.reply { background: var(--field-ink); color: #F2F2EF; padding-top: var(--section); overflow: hidden; }
.reply__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: end; }
.reply__aside { grid-column: 1 / span 4; margin-bottom: var(--s-8); font-size: var(--t-md); line-height: 1.5; max-width: 34ch; }
.reply__card {
	grid-column: 6 / -1;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: var(--s-4);
	min-height: 32vw;
	margin-bottom: -60px;
	padding: var(--s-7) clamp(1.5rem, 4vw, 4rem) calc(var(--s-7) + 60px);
	background: #EDEDEA;
	color: #131313;
	text-align: center;
	rotate: 2deg;
	transition: rotate .8s var(--ease);
}
.reply__card:hover { rotate: 1deg; }
.reply__card h2 { font-size: var(--t-xl); color: #131313; max-width: 16ch; }
.reply__card p { font-size: var(--t-md); line-height: 1.5; max-width: 40ch; }
.reply__time { font-weight: 600; }
.reply__card .btn--bar { margin-top: var(--s-3); max-width: 520px; }
@media (max-width: 899px) {
	.reply__aside { grid-column: 1 / -1; margin-bottom: var(--s-7); }
	.reply__card { grid-column: 1 / -1; width: 92%; justify-self: center; min-height: 0; rotate: 1deg; }
}

/* --------------------------------------------------------------------------
   Avis : trois fiches de papier déchirées, en éventail sur Sonic Blue.
   -------------------------------------------------------------------------- */
.slips { background: var(--fin-sonic); color: #131313; padding-top: var(--section); overflow: hidden; }
.slips h2 { color: #131313; max-width: 14ch; }
.slips__row { display: flex; justify-content: center; align-items: flex-start; margin-top: var(--s-8); margin-bottom: -90px; padding-inline: 3%; }
.slip {
	flex: 0 1 360px;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	min-height: 440px;
	margin-inline: -10px;
	padding: var(--s-7) var(--s-6) calc(var(--s-7) + 90px);
	background: #F4F4F2;
	color: #131313;
	clip-path: polygon(0% 9px, 4.55% 0px, 9.09% 9px, 13.6% 0px, 18.2% 9px, 22.7% 0px, 27.3% 9px, 31.8% 0px, 36.4% 9px, 40.9% 0px, 45.5% 9px, 50% 0px, 54.5% 9px, 59.1% 0px, 63.6% 9px, 68.2% 0px, 72.7% 9px, 77.3% 0px, 81.8% 9px, 86.4% 0px, 90.9% 9px, 95.5% 0px, 100% 9px, 100% calc(100% - 9px), 95.5% calc(100% - 0px), 90.9% calc(100% - 9px), 86.4% calc(100% - 0px), 81.8% calc(100% - 9px), 77.3% calc(100% - 0px), 72.7% calc(100% - 9px), 68.2% calc(100% - 0px), 63.6% calc(100% - 9px), 59.1% calc(100% - 0px), 54.5% calc(100% - 9px), 50% calc(100% - 0px), 45.5% calc(100% - 9px), 40.9% calc(100% - 0px), 36.4% calc(100% - 9px), 31.8% calc(100% - 0px), 27.3% calc(100% - 9px), 22.7% calc(100% - 0px), 18.2% calc(100% - 9px), 13.6% calc(100% - 0px), 9.09% calc(100% - 9px), 4.55% calc(100% - 0px), 0% calc(100% - 9px));
	rotate: var(--rot, 0deg);
	transition: rotate .7s var(--ease);
}
.slip:nth-child(1) { --rot: -4deg; margin-top: var(--s-6); }
.slip:nth-child(2) { --rot: 2deg; min-height: 520px; position: relative; z-index: 1; }
.slip:nth-child(3) { --rot: 5deg; min-height: 600px; margin-top: var(--s-4); }
.slip:hover { --rot: 0deg; }
.slip figcaption { display: grid; justify-items: center; gap: .1rem; text-align: center; }
.slip figcaption strong { font-size: var(--t-md); font-weight: 600; }
.slip figcaption span { font-size: var(--t-sm); color: #4F4F4B; }
.slip__meta { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }
.slip__meta .badge { background: var(--fin-sonic); color: #131313; }
.slip .stars { color: #131313; }
.slip blockquote p { font-size: var(--t-base); line-height: 1.6; }
@media (max-width: 899px) {
	.slips__row { flex-direction: column; align-items: stretch; padding-inline: 0; margin-top: var(--s-7); }
	.slip { flex: none; width: 86%; min-height: 0; margin: 0; padding-bottom: var(--s-7); }
	.slip:nth-child(2) { width: 78%; }
	.slip:nth-child(3) { width: 82%; }
	.slip:nth-child(1) { --rot: -2deg; margin-top: 0; }
	.slip:nth-child(2) { --rot: 2deg; min-height: 0; align-self: flex-end; margin-top: -24px; }
	.slip:nth-child(3) { --rot: -1.5deg; min-height: 0; margin-top: -24px; padding-bottom: calc(var(--s-7) + 90px); }
}

.slips__lead { margin-top: var(--s-4); font-size: var(--t-md); max-width: 48ch; }
.slips__lead .link, .slips__head .link { margin-left: .4rem; }
.slip__title { margin-bottom: .5rem; font-weight: 600; }

/* Fiche produit : les mêmes fiches, sur un panneau, sans rognage. */
.slips--product { margin-top: var(--s-9); padding: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.25rem, .5rem + 3vw, 3.5rem); overflow: hidden; }
.slips__head h2 { font-size: var(--t-xl); max-width: 18ch; }
.slips__head p { margin-top: var(--s-3); font-size: var(--t-md); max-width: 52ch; }
.slips--product .slips__row { margin: var(--s-7) 0 0; padding: 0; gap: var(--s-4); align-items: flex-start; }
.slips--product .slip { flex: 1 1 0; min-height: 0; margin: 0; padding: var(--s-6) var(--s-5) var(--s-7); }
.slips--product .slip:nth-child(1) { --rot: -2deg; margin-top: var(--s-4); }
.slips--product .slip:nth-child(2) { --rot: 1deg; min-height: 0; }
.slips--product .slip:nth-child(3) { --rot: 2.5deg; min-height: 0; margin-top: var(--s-2); }
@media (max-width: 899px) {
	.slips--product .slips__row { flex-direction: column; align-items: stretch; gap: 0; }
	.slips--product .slip { flex: none; width: 92%; padding-bottom: var(--s-6); }
	.slips--product .slip:nth-child(2) { align-self: flex-end; margin-top: -12px; }
	.slips--product .slip:nth-child(3) { margin-top: -12px; padding-bottom: var(--s-6); }
}

/* --------------------------------------------------------------------------
   FAQ : des fiches à onglets, rangées comme dans un tiroir.
   -------------------------------------------------------------------------- */
.drawer__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
.drawer__head { grid-column: 3 / span 8; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-7); }
.drawer__cards { grid-column: 3 / span 8; --tab-w: 200px; }
.icard { position: relative; margin-top: 30px; background: var(--tint); color: #131313; }
.icard:first-child { margin-top: 40px; }
.icard summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: 1.4rem 1.75rem 1.5rem;
	font-size: var(--t-md);
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
.icard summary::-webkit-details-marker { display: none; }
.icard summary .mk-ic { flex: none; width: 1.3rem; height: 1.3rem; transition: transform var(--dur) var(--ease); }
.icard[open] summary .mk-ic { transform: rotate(45deg); }
.icard__tab {
	position: absolute;
	top: -40px;
	left: calc(var(--i, 0) * (100% - var(--tab-w)) / 5);
	display: flex;
	align-items: center;
	width: var(--tab-w);
	height: 41px;
	padding: 0 1.2rem;
	background: var(--tint);
	font-size: var(--t-base);
	font-weight: 600;
	clip-path: polygon(0 100%, 12px 0, calc(100% - 12px) 0, 100% 100%);
}
.icard__a { padding: 0 1.75rem 1.75rem; }
.icard__a p { font-size: 1.0625rem; line-height: 1.6; max-width: 54ch; }
.icard summary:hover .icard__q { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (max-width: 1023px) {
	.drawer__head, .drawer__cards { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.drawer__cards { --tab-w: 128px; }
	.icard summary { padding: 1.2rem 1.25rem 1.3rem; font-size: 1.0625rem; }
	.icard__a { padding: 0 1.25rem 1.4rem; }
	.icard__a p { font-size: var(--t-base); }
	.icard__tab { padding: 0 .9rem; font-size: var(--t-sm); }
}

/* --------------------------------------------------------------------------
   Grille produits des pages éditoriales (Black Friday, panier vide)
   -------------------------------------------------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--s-5); }
@media (max-width: 1023px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-3); } }
.section-title { margin-bottom: var(--s-7); max-width: 20ch; }

/* --------------------------------------------------------------------------
   Pages intérieures : en-tête commun
   -------------------------------------------------------------------------- */
.page-head { padding-block: var(--s-7); }
.page-head h1 { margin-top: var(--s-4); max-width: 18ch; }
.page-head--shop h1, .page-template-template-bestsellers .page-head h1 { font-size: var(--t-hero); line-height: .95; letter-spacing: -.035em; }
.page-head--specimens .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); align-items: end; }
.page-head__specimens { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.page-head__specimens li { grid-column: auto; aspect-ratio: 4 / 3; }
.page-head--specimens h1 { max-width: 12ch; font-size: var(--t-hero); line-height: .95; letter-spacing: -.035em; }
@media (max-width: 1023px) {
	.page-head--specimens .wrap { grid-template-columns: 1fr; }
	.page-head--specimens h1 { max-width: 18ch; }
}
@media (max-width: 767px) {
	.page-head__specimens { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
	.page-head__specimens li { aspect-ratio: 1; }
}
.page-head .lead { margin-top: var(--s-4); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: var(--t-sm); color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }

/* Guide : la règle des niveaux devient quatre fiches au ton près */
.scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6) var(--s-5); }
.scale__step { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); }
.scale__step::before { content: ""; height: 10px; margin-bottom: var(--s-2); background: var(--fin-sonic); }
.scale__step:nth-child(2)::before { background: var(--fin-shell); }
.scale__step:nth-child(3)::before { background: var(--fin-surf); }
.scale__step:nth-child(4)::before { background: var(--fin-butter); }
.scale__tick { display: none; }
.scale__step h3 { font-size: var(--t-lg); }
.scale__range { font-size: var(--t-md); font-weight: 600; line-height: 1.2; }
.scale__note { color: var(--ink); font-size: var(--t-base); flex: 1; }
.scale__step .link { margin-top: var(--s-2); }
@media (max-width: 899px) { .scale { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .scale { grid-template-columns: 1fr; } }

.families { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-6); }
.family { display: grid; gap: var(--s-3); align-content: start; }
.family img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--plinth); }
.family h3 { font-size: var(--t-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.family p { color: var(--ink); font-size: var(--t-base); }
@media (max-width: 1023px) { .families { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .families { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.steps li { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); background: var(--paper-2); }
.steps strong { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500; line-height: 1.1; }
.steps span { color: var(--ink); font-size: var(--t-base); }
@media (max-width: 899px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.cta-band { display: grid; justify-items: center; gap: var(--s-4); text-align: center; padding-block: var(--s-8); background: var(--paper-2); }
.cta-band p { color: var(--ink); max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-5); margin-top: var(--s-2); }

/* Compte à rebours de la page Black Friday : une phrase, pas des cases. */
.countdown { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block: var(--s-3) var(--s-4); }
.countdown[hidden] { display: none; }
.countdown__unit { display: inline-flex; align-items: baseline; gap: .35rem; }
.countdown__n { font-size: var(--t-lg); font-weight: 500; line-height: 1; }
.countdown__l { font-size: var(--t-base); color: var(--muted); }
.countdown-line { margin-top: var(--s-4); font-size: var(--t-md); font-weight: 600; color: var(--accent); }
.countdown-line[hidden] { display: none; }

/* FAQ page */
.faq-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.faq-page__nav { position: sticky; top: calc(var(--header-h) + var(--s-6)); display: grid; gap: .4rem; font-size: var(--t-base); }
.faq-page__nav a { color: var(--ink); }
.faq-page__nav a:hover { text-decoration: underline; text-underline-offset: .25em; }
.faq-page__group + .faq-page__group { margin-top: var(--s-8); }
.faq-page__group h2 { font-size: var(--t-lg); margin-bottom: var(--s-4); }
@media (max-width: 899px) { .faq-page { grid-template-columns: 1fr; gap: var(--s-5); } .faq-page__nav { position: static; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact__aside { display: grid; gap: var(--s-6); }
.contact__aside .ticks { gap: var(--s-5); }
.contact__aside a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--line-2); }
.contact-form { display: grid; gap: var(--s-5); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.contact-form__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--ink); }
.contact-form__consent input { margin-top: .2rem; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore : champ piège invisible */
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); background: var(--paper-2); font-size: var(--t-sm); }
.notice .mk-ic { width: 1.2rem; height: 1.2rem; margin-top: .1rem; }
.notice--ok .mk-ic { color: var(--ok); }
.notice--error { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.notice--error .mk-ic { color: var(--accent); }
.field-invalid input, .field-invalid textarea { border-color: var(--accent); }
.contact-form__consent-wrap { display: grid; gap: .45rem; }
.contact-form__consent-wrap .mk-error { padding-left: calc(1rem + .7rem); }
.field-invalid input[type=checkbox] { outline: 2px solid var(--accent); outline-offset: 1px; }
#contact-form > .notice { margin-bottom: var(--s-5); }
#contact-form { scroll-margin-top: calc(var(--header-h, 72px) + var(--s-5)); }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .contact-form__row { grid-template-columns: 1fr; } }

/* 404 */
.not-found { display: grid; justify-items: center; gap: var(--s-5); text-align: center; padding-block: var(--s-10); }
.not-found h1 { font-size: var(--t-hero); }
.not-found p { color: var(--ink); max-width: 44ch; }
.not-found form { width: min(100%, 460px); }

/* Journal / archives */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-5); }
.post-card { display: grid; gap: var(--s-3); align-content: start; }
.post-card img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.post-card time { font-size: var(--t-sm); color: var(--muted); }
.post-card h2 { font-size: var(--t-lg); }
.post-card p { color: var(--ink); font-size: var(--t-base); }
@media (max-width: 899px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); }
.nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .8rem; background: var(--paper-2); font-size: var(--t-sm); }
.nav-links .current { background: var(--ink); color: var(--on-ink); }

/* Commentaires */
.comments-area { max-width: 70ch; margin: var(--s-8) auto 0; }
.comments-area h2 { font-size: var(--t-lg); margin-bottom: var(--s-5); }
.comment-list { display: grid; gap: var(--s-3); }
.comment-body { padding: var(--s-4) var(--s-5); background: var(--paper-2); }
.comment-form { display: grid; gap: var(--s-4); }
.section--wc { padding-top: var(--s-7); }