/* ============================================================================
   CABINET — feuille de styles
   Blueprint §19. Servie telle quelle : aucune compilation, aucun Node.

   Écrite à la main plutôt que générée. Le catalogue de classes est petit et
   fermé — toutes employées — et un générateur imposerait une étape de build que
   la plateforme de déploiement ne sait pas exécuter : elle ne construit qu'un
   environnement Python. Une feuille compilée absente ou périmée laisse le site
   sans styles sans que rien ne lève.

   Toute valeur de design vient de tokens.css. Aucune couleur, aucune taille et
   aucune durée n'est écrite en dur ici — la porte G10 le vérifie.

   RESPONSIVE — règle structurante (§19.3) : une seule rupture change la mise en
   page, à 1024px. Tout le reste s'adapte sans media query, par clamp(),
   minmax() et auto-fill. Ce n'est pas une contrainte subie : une grille qui se
   réorganise d'elle-même n'a pas de largeur où elle casse.

   Ordre du fichier : remise à zéro, base, mise en page, typographie, couleurs,
   composants, variantes responsives, impression.
   ========================================================================== */

/* ── Remise à zéro ────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-padding-top: calc(var(--height-header) + var(--space-8));
}

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

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

p,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

summary::-webkit-details-marker {
  display: none;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Le focus reste visible partout : c'est la seule affordance dont dispose une
   navigation au clavier (§19.5, WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

::selection {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Respecte une préférence système explicite : une animation non désirée peut
   déclencher des troubles vestibulaires (WCAG 2.3.3). */
@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;
  }

  .marquee__track {
    animation-play-state: paused !important;
  }
}

/* ── Mise en page ─────────────────────────────────────────────────────────── */

.page {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.page--wide { max-width: var(--container-wide); }
.page--prose { max-width: var(--width-prose); }
.page--form { max-width: var(--width-form); }

/* Une section pleine largeur qui échappe au conteneur sans provoquer de
   défilement horizontal : la marge négative est calculée, pas devinée. */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.contents { display: contents; }

.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-none { flex: none; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.text-center { text-align: center; }

/* Grilles intrinsèques : la densité suit la largeur disponible, sans rupture.
   auto-fill plutôt que auto-fit — une rangée d'un seul produit ne doit pas
   s'étirer sur toute la page. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-12);
}

.grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-4);
}

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-full { grid-column: 1 / -1; }

.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }

.sticky { position: sticky; }
.relative { position: relative; }
.top-0 { top: 0; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-16 { margin-bottom: var(--space-16); }

.p-0 { padding: 0; }
.pb-4 { padding-bottom: var(--space-4); }
.pb-16 { padding-bottom: var(--space-16); }
.py-2 { padding-block: var(--space-2); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-10 { padding-block: var(--space-10); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }

/* Respiration entre sections. Elle porte le calme : c'est le seul « décor »
   que s'autorise une page sans ombres ni boîtes. */
.section {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}

.section--tight {
  padding-block: clamp(var(--space-8), 4vw, var(--space-16));
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

/* ── Typographie ──────────────────────────────────────────────────────────── */

.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.tracking-caps { letter-spacing: var(--tracking-caps); }
.uppercase { text-transform: uppercase; }
.underline { text-decoration-line: underline; }
.no-underline { text-decoration-line: none; }
.font-medium { font-weight: var(--weight-medium); }
.font-strong { font-weight: var(--weight-strong); }
.serif { font-family: var(--font-serif); }
.balance { text-wrap: balance; }

/* Le cartouche à graisses mixtes (§19.5, geste n°2) : dans une même ligne, les
   mots porteurs passent en 600, le reste reste en 400. Le titre accessible
   complet vit dans un .sr-only ; la version composée est aria-hidden. */
.display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: clamp(var(--text-4xl), 6.2vw, var(--text-5xl));
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.display--xl { font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl)); }
.display--sm { font-size: clamp(var(--text-2xl), 3.6vw, var(--text-4xl)); }

.display em {
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-display);
}

.lede {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  max-width: 46ch;
}

/* Sous chaque filet, un libellé en capitales avec interlettre large (§19.5). */
.eyebrow {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--color-muted);
}

.eyebrow--ink { color: var(--color-ink); }

/* Les chiffres alignés sont indispensables partout où des montants se
   superposent : sans eux, une colonne de prix ondule. */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.strike { text-decoration: line-through; }

/* ── Couleurs de surface ──────────────────────────────────────────────────── */

.bg-paper { background-color: var(--color-paper); }
.bg-cream { background-color: var(--color-cream); }
.bg-sand { background-color: var(--color-sand); }
.bg-ink { background-color: var(--color-ink); }

.text-ink { color: var(--color-ink); }
.text-paper { color: var(--color-paper); }
.text-muted { color: var(--color-muted); }
.text-signal { color: var(--color-signal); }
.text-gold-ink { color: var(--color-gold-ink); }

/* Sur fond sombre, le gris secondaire n'existe pas : muted sur ink tombe à
   3,02:1. Le texte secondaire y devient un filet clair, et l'accent doré n'est
   lisible QUE là — 7,79:1 (§19.1, règle n°1). */
.on-ink { color: var(--color-paper); }
.on-ink .text-muted { color: var(--color-line); }
.on-ink .eyebrow { color: var(--color-gold); }

/* ── Bordures et filets ───────────────────────────────────────────────────── */

.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--color-line); }
.border-b { border-bottom: 1px solid var(--color-line); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-card { border-radius: var(--radius-card); }
.rounded-pill { border-radius: var(--radius-pill); }

/* La profondeur vient du filet et de l'alternance paper/cream, jamais d'une
   ombre portée (§19.3). */
.rule {
  height: 1px;
  margin-block: clamp(var(--space-10), 5vw, var(--space-16));
  border: 0;
  background: var(--color-line);
}

/* ══ Composants ═══════════════════════════════════════════════════════════ */

/* ── C-01 · Bandeau d'annonce ─────────────────────────────────────────────── */

.announce {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-ink);
  color: var(--color-paper);
}

.announce[hidden] { display: none; }

.announce__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: var(--height-announcement);
  padding-block: var(--space-2);
}

/* Les messages sont empilés au même endroit ; un seul porte data-current.
   Une hauteur de ligne fixe évite que la page saute au changement. */
.announce__slot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 1.25rem;
}

.announce__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(0.55rem);
  pointer-events: none;
  transition:
    opacity var(--duration-slow) var(--ease-brand),
    transform var(--duration-slow) var(--ease-brand);
}

.announce__msg[data-current="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.announce__msg strong {
  font-weight: var(--weight-strong);
  color: var(--color-gold);
}

.announce__close {
  flex: none;
  padding: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-paper);
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-brand);
}

.announce__close:hover,
.announce__close:focus-visible { opacity: 1; }

.announce__close svg { width: 1rem; height: 1rem; }

/* ── C-02 · En-tête collant ───────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  transition: transform var(--duration-base) var(--ease-brand);
}

/* Masqué au défilement descendant, rendu au premier geste vers le haut. */
.masthead[data-hidden="true"] { transform: translateY(-100%); }

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--height-header);
}

.brandmark {
  flex: none;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

/* ── C-03 · Navigation et méga-menu ───────────────────────────────────────── */

/* Rendu serveur, présent dans le HTML initial : un méga-menu construit en JS
   est invisible pour les moteurs et inutilisable sans script (§19.7, C-03).
   Le panneau s'ouvre au survol ET au focus — jamais l'un sans l'autre. */
.nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.nav__item { position: static; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border: 0;
  background: transparent;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-brand);
}

.nav__link:hover { color: var(--color-gold-ink); }

.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.45em;
}

.nav__chevron {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-brand);
}

.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--duration-fast) var(--ease-brand),
    transform var(--duration-fast) var(--ease-brand),
    visibility var(--duration-fast) var(--ease-brand);
}

.nav__item:hover .megamenu,
.nav__item:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__item:hover .nav__chevron,
.nav__item:focus-within .nav__chevron {
  transform: translateY(0.08em) rotate(225deg);
}

.megamenu__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-10);
  padding-block: var(--space-10);
}

.megamenu__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.megamenu__link {
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-brand);
}

.megamenu__link:hover,
.megamenu__link:focus-visible { color: var(--color-gold-ink); }

.megamenu__feature {
  display: grid;
  align-content: end;
  gap: var(--space-2);
  min-height: 11rem;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--tile-amber);
  text-decoration: none;
}

/* ── Recherche et actions d'en-tête ───────────────────────────────────────── */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.searchbox {
  display: none;
  align-items: center;
  min-width: 13rem;
}

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-brand);
}

.iconbtn:hover,
.iconbtn:focus-visible { background: var(--color-cream); }

.iconbtn svg { width: 1.25rem; height: 1.25rem; }

.iconbtn__badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1.05rem;
  padding-inline: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-2xs);
  line-height: 1.05rem;
  text-align: center;
}

.iconbtn__badge[data-empty="true"] { display: none; }

/* ── C-10 · La pastille inversée (geste signature n°1, §19.5) ─────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sans cet écart, « Ajouter au panier » et le prix se collent en
     « AJOUTER AU PANIER50,00 € » (ADR-0054). */
  gap: var(--space-3);
  min-height: var(--height-btn);
  padding-inline: var(--space-6);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--duration-base) var(--ease-brand),
    color var(--duration-base) var(--ease-brand),
    border-color var(--duration-base) var(--ease-brand);
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink);
}

.btn:disabled,
.btn[disabled] {
  border-color: var(--color-line-strong);
  background: var(--color-line-strong);
  color: var(--color-paper);
  cursor: not-allowed;
}

/* Secondaire : part de paper bordé ink. Après inversion, les deux variantes
   sont visuellement interchangeables — c'est ce qui crée l'effet. */
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Sur un visuel sombre ou une bande d'encre. */
.btn--light {
  border-color: var(--color-paper);
  background: var(--color-paper);
  color: var(--color-ink);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: transparent;
  color: var(--color-paper);
}

.btn--outline-light {
  border-color: var(--color-paper);
  background: transparent;
  color: var(--color-paper);
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
  background: var(--color-paper);
  color: var(--color-ink);
}

.btn--card {
  min-height: var(--height-btn-card);
  padding-inline: var(--space-4);
}

.btn--small {
  min-height: var(--height-btn-small);
  padding-inline: var(--space-4);
}

.btn--block { width: 100%; }

/* Le prix est un élément propre, poussé à droite de la pastille : c'est le
   premier critère de comparaison d'une grille, il ne s'enfouit pas dans un
   libellé d'action (ADR-0054). */
.btn__price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

/* Contenance retenue : l'inversion signale la sélection sans recourir à la
   couleur seule (WCAG 1.4.1), et aria-pressed porte la même information. */
.btn[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Contenance épuisée : barrée et atténuée, mais toujours cliquable — le client
   doit pouvoir consulter le prix d'un format qu'il ne peut pas commander. */
.btn[data-depleted="true"] {
  text-decoration: line-through;
  opacity: 0.55;
}

.linkline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-underline-offset: 0.5em;
}

/* ── Pastilles d'information ──────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.pill--gold { background: var(--color-gold); color: var(--color-ink); }
.pill--signal { background: var(--color-signal); color: var(--color-paper); }
.pill--ink { background: var(--color-ink); color: var(--color-paper); }

.pill--outline {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
}

/* ── Héros ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-cream);
}

.hero__media {
  grid-area: 1 / 1;
  aspect-ratio: var(--ratio-hero);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le voile ne s'applique qu'au bas du visuel : assombrir toute la photographie
   pour y poser trois lignes de texte est un aveu de composition. */
.hero__scrim {
  grid-area: 1 / 1;
  background: var(--scrim);
}

.hero__panel {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(var(--space-6), 4vw, var(--space-16));
  max-width: 46rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Variante éditoriale : visuel d'un côté, panneau crème de l'autre. Empilée
   sous 1024px, côte à côte au-delà — la seule bascule de mise en page. */
.hero--split {
  grid-template-columns: 1fr;
  background: var(--color-cream);
}

.hero--split .hero__media {
  grid-area: auto;
  aspect-ratio: var(--ratio-tile);
  /* contain, pas cover : le visuel d'un flacon est un objet détouré, pas une
     photographie d'ambiance. Le recadrer lui coupe le bouchon. */
  object-fit: contain;
  background: var(--tile-linen);
}

.hero--split .hero__panel {
  grid-area: auto;
  align-self: center;
  align-content: center;
  color: var(--color-ink);
}

/* ── C-09 · Carrousel CSS pur ─────────────────────────────────────────────── */

/* Swiper.js pèse ~140 Ko pour ce que scroll-snap fait nativement. Les flèches
   tiennent en quelques lignes de JavaScript et restent facultatives : sans
   elles, le rail se fait glisser au doigt, à la molette ou au clavier. */
.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.rail__nav {
  display: none;
  gap: var(--space-2);
}

.rail__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-brand),
    color var(--duration-fast) var(--ease-brand);
}

.rail__arrow:hover,
.rail__arrow:focus-visible {
  background: var(--color-ink);
  color: var(--color-paper);
}

.rail__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.rail__arrow svg { width: 0.9rem; height: 0.9rem; }

.swimlane {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(16rem, 74vw), 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--space-4);
  padding-bottom: var(--space-4);
  overscroll-behavior-x: contain;
}

.swimlane > * { scroll-snap-align: start; }

.swimlane--wide { grid-auto-columns: minmax(min(26rem, 86vw), 1fr); }

/* ── C-08 · Carte produit, variante grille ────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-cream);
  text-decoration: none;
}

.card__img {
  aspect-ratio: var(--ratio-card);
  width: 100%;
  height: auto;
  /* contain, pas cover : un flacon est un objet vertical, et un recadrage lui
     coupe le bouchon et le socle. Le fond teinté du visuel prolonge celui du
     cadre, donc la lettre de côté ne se voit pas (ADR-0049). */
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-brand);
}

.card:hover .card__img { transform: scale(1.03); }

.card__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-6));
}

.card__body {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
}

.card__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.card__name a { text-decoration: none; }

/* Toute la carte est cliquable sans imbriquer un lien dans un lien : le
   pseudo-élément couvre la carte, les boutons restent au-dessus. */
.card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.card__cta {
  position: relative;
  z-index: 1;
  margin-top: var(--space-3);
}

/* ── C-07 · Carte produit, variante surimpression (carrousel) ─────────────── */

.showcard {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-cream);
  text-decoration: none;
}

.showcard__img {
  grid-area: 1 / 1;
  aspect-ratio: var(--ratio-tile);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-brand);
}

.showcard:hover .showcard__img { transform: scale(1.04); }

.showcard__scrim {
  grid-area: 1 / 1;
  background: var(--scrim);
}

.showcard__caption {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
}

/* Superpositions sur visuel : deux thèmes explicites plutôt qu'un calcul de
   luminance au rendu — le piège C-07 du blueprint. */
.overlay-light { color: var(--color-paper); }
.overlay-dark { color: var(--color-ink); }

/* ── C-14 · Tuile éditoriale ──────────────────────────────────────────────── */

.tile {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--space-2);
  min-height: 17rem;
  padding: clamp(var(--space-5), 3vw, var(--space-10));
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--tile-linen);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-brand);
}

.tile:hover { transform: translateY(-2px); }

.tile--linen { background: var(--tile-linen); }
.tile--amber { background: var(--tile-amber); }
.tile--ash { background: var(--tile-ash); }
.tile--clay { background: var(--tile-clay); }
.tile--ink { background: var(--tile-ink); color: var(--color-paper); }

.tile__img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  max-width: 17rem;
  object-fit: contain;
  pointer-events: none;
}

.tile__body {
  position: relative;
  display: grid;
  gap: var(--space-2);
  max-width: 24ch;
}

/* Tuile de catégorie, plus compacte : une vignette et un libellé. */
.catcard {
  display: grid;
  gap: var(--space-3);
  text-decoration: none;
}

.catcard__media {
  aspect-ratio: var(--ratio-card);
  width: 100%;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: var(--tile-linen);
  transition: transform var(--duration-base) var(--ease-brand);
}

.catcard:hover .catcard__media { transform: translateY(-3px); }

/* ── C-11 · Étoiles d'avis, rendues par nous ──────────────────────────────── */

.stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  color: var(--color-line);
}

.stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-gold-ink);
}

.stars svg {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
}

.ratingline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

/* Répartition des notes : une barre par niveau. */
.meter {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-line);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-gold-ink);
}

/* Un remplissage se mesure en pourcentage, et un pourcentage écrit en attribut
   `style` est interdit par la CSP du §18 comme par la porte G10. Le pas de 10 %
   — une demi-étoile — est déclaré ici, une fois, et l'attribut ne fait que
   choisir. Sans JavaScript, la note s'affiche quand même. */
[data-fill="0"] { width: 0; }
[data-fill="10"] { width: 10%; }
[data-fill="20"] { width: 20%; }
[data-fill="30"] { width: 30%; }
[data-fill="40"] { width: 40%; }
[data-fill="50"] { width: 50%; }
[data-fill="60"] { width: 60%; }
[data-fill="70"] { width: 70%; }
[data-fill="80"] { width: 80%; }
[data-fill="90"] { width: 90%; }
[data-fill="100"] { width: 100%; }

/* ── C-12 · Barre de facettes ─────────────────────────────────────────────── */

.filterbar {
  position: sticky;
  top: var(--height-header);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-brand),
    color var(--duration-fast) var(--ease-brand);
}

.chip:hover { background: var(--color-cream); }

.chip[aria-current="page"],
.chip[data-selected="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

/* Le panneau de filtres est un <details> unique, rendu une seule fois.
   L'afficher deux fois — une version mobile repliée, une version bureau en
   colonne — dupliquait chaque `id` du formulaire : deux `<label for="tri">`
   pointaient vers deux `<select id="tri">`, et cliquer sur un libellé pouvait
   activer le mauvais champ. C'est la porte G14 qui l'a signalé.

   Au-delà de la rupture, le résumé disparaît et le contenu se déplie sans
   JavaScript : `::details-content` pour les navigateurs récents, `display` sur
   l'enfant pour les autres. Là où ni l'un ni l'autre n'est compris, le panneau
   reste replié derrière son résumé — dégradé, mais utilisable. */
.facetbox {
  min-width: 0;
}

.facetbox > summary {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.facets {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-6);
}

.facets__group {
  border: 0;
  padding: 0;
  margin: 0;
}

.facets__list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-ink);
  flex: none;
}

/* ── Accordéon (fiche produit) ────────────────────────────────────────────── */

.accordion { border-bottom: 1px solid var(--color-line); }

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.accordion__summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-brand);
}

.accordion[open] .accordion__summary::after {
  transform: translateY(0.1em) rotate(225deg);
}

.accordion__body {
  padding-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── Fiche produit ────────────────────────────────────────────────────────── */

.pdp {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

.gallery {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.gallery__main {
  aspect-ratio: var(--ratio-card);
  width: 100%;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: var(--color-cream);
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--space-2);
}

.gallery__thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-brand);
}

.gallery__thumb:hover,
.gallery__thumb[data-active="true"] { border-color: var(--color-ink); }

.buybox {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.priceline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.trustrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-2xs);
  color: var(--color-muted);
  text-align: center;
}

.trustrow svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-inline: auto;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

/* Pyramide olfactive : trois colonnes, tête · cœur · fond. */
.pyramid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-8);
}

.pyramid__col {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.pyramid__disc {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-pill);
  background: var(--tile-amber);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}

/* ── Avis clients (§5.8) ──────────────────────────────────────────────────── */

/* La distribution vit à côté de la moyenne, jamais à sa place : une note de
   4,2 peut recouvrir vingt avis tièdes comme dix enthousiastes et dix furieux,
   et le client a le droit de voir lequel des deux il achète. */
.reviews__summary {
  display: grid;
  gap: var(--space-8);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border-radius: var(--radius-card);
  background: var(--color-cream);
}

.reviews__score {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  line-height: var(--leading-none);
  font-variant-numeric: tabular-nums;
}

.reviews__bars {
  display: grid;
  gap: var(--space-2);
}

.reviews__bar {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

.review {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.review__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.review__body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ── C-15 · Bandeau défilant ──────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.marquee__track {
  display: flex;
  gap: var(--space-10);
  width: max-content;
  animation: marquee 44s linear infinite;
}

.marquee__track > * {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Formulaires ──────────────────────────────────────────────────────────── */

/* La bordure atteint le seuil de contraste des éléments non textuels (3:1,
   WCAG 1.4.11) — d'où line-strong et non line. Un formulaire ne se pose jamais
   sur sand : la bordure y tomberait à 2,88:1. */
.field {
  display: block;
  width: 100%;
  min-height: var(--height-btn);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base); /* 16px : en dessous, iOS zoome au focus */
}

.field:focus-visible {
  border-color: var(--color-ink);
  outline: 2px solid var(--color-ink);
  outline-offset: 1px;
}

.field--pill {
  border-radius: var(--radius-pill);
  padding-inline: var(--space-5);
}

.field--inline { min-height: var(--height-btn-card); }

.formrow { display: grid; gap: var(--space-2); }

/* ── Tiroirs : panier et navigation mobile ────────────────────────────────── */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(28rem, 100vw);
  background: var(--color-paper);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-brand);
}

.drawer--left {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

/* Ouvert seulement s'il contient quelque chose : un panneau vide qui glisse à
   l'écran au chargement est une nuisance, pas une confirmation (ADR-0052). */
.drawer[data-open="true"] { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-6);
}

.drawer__foot {
  padding: var(--space-6);
  border-top: 1px solid var(--color-line);
  background: var(--color-cream);
}

.drawer__veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  background: var(--veil);
}

.drawer__veil[hidden] { display: none; }

.mobilenav { display: grid; gap: var(--space-1); }

.mobilenav a {
  display: block;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  text-decoration: none;
}

/* ── Panier ───────────────────────────────────────────────────────────────── */

.cartline {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.cartline__img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.qty input {
  width: 3rem;
  min-height: var(--height-btn-small);
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.totals { display: grid; gap: var(--space-2); }

.totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.totals__row--strong {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

/* ── Tunnel ───────────────────────────────────────────────────────────────── */

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.summary {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-cream);
}

.notice {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  font-size: var(--text-sm);
}

.notice--error {
  background: var(--color-paper);
  border: 1px solid var(--color-signal);
  color: var(--color-signal);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ── C-16 · Pied de page ──────────────────────────────────────────────────── */

.footer {
  margin-top: clamp(var(--space-16), 8vw, var(--space-32));
  border-top: 1px solid var(--color-line);
  background: var(--color-cream);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-10);
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}

.footer__list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.footer__list a { text-decoration: none; }
.footer__list a:hover { text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

/* ── Divers ───────────────────────────────────────────────────────────────── */

.prose { max-width: var(--width-prose); }

.prose p + p { margin-top: var(--space-4); }

/* Lien d'évitement : premier élément focalisable, invisible jusqu'au focus. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -4rem;
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-brand);
}

.skip-link:focus { top: var(--space-2); }

/* Visible pour un lecteur d'écran, absent de l'affichage. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Variantes responsives ────────────────────────────────────────────────────
   Une seule rupture STRUCTURELLE, à 1024px (§19.3) : c'est la seule qui change
   la mise en page. Les ruptures 768px et 1280px n'ajustent que la densité d'une
   grille, ce qui ne réorganise rien — et le test de contrat
   test_a_single_breakpoint_changes_the_layout le vérifie propriété par
   propriété. Tout le reste s'adapte par clamp() et minmax(), sans rupture. */

@media (width >= 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (width >= 1024px) {
  .page { padding-inline: var(--space-6); }

  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .nav { display: flex; }
  .searchbox { display: flex; }
  .rail__nav { display: flex; }

  .hero__media { aspect-ratio: var(--ratio-hero-wide); }
  .hero--split { grid-template-columns: 1.05fr 1fr; }
  .hero--split .hero__media { aspect-ratio: auto; height: 100%; min-height: 32rem; }

  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

  /* La galerie suit la lecture de la colonne droite, plus longue. */
  .gallery { position: sticky; top: calc(var(--height-header) + var(--space-6)); }

  .listing { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-12); align-items: start; }

  /* Contenu à gauche, récapitulatif à droite : panier et tunnel. */
  .withside { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-10); align-items: start; }
  .withside > aside { position: sticky; top: calc(var(--height-header) + var(--space-6)); }

  .facets { position: sticky; top: calc(var(--height-header) + var(--space-6)); border-top: 0; padding-block: 0; }

  .reviews__summary { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: center; }

  .facetbox > summary { display: none; }
  .facetbox::details-content { content-visibility: visible; }
  .facetbox > .facets { display: block; }
}

@media (width >= 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Impression ───────────────────────────────────────────────────────────────
   Une commande se garde sur papier : l'en-tête, le pied et les commandes
   d'interface n'y ont rien à faire. */

@media print {
  .skip-link,
  .announce,
  .masthead,
  .footer,
  .drawer,
  .drawer__veil,
  .btn,
  form {
    display: none !important;
  }

  body {
    background: var(--color-paper);
    color: var(--color-ink);
  }
}