/* Hallmark · layout, hero H6, clusters Bento, diptyque, grille produit F6
 * Toute piste de grille portant une image utilise minmax(0, 1fr), jamais 1fr nu,
 * sinon l'image impose sa largeur intrinsèque et fait déborder la page en mobile.
 */

/* ══════════════════════════ HERO, H6 Photographique ═════════════════
   Image plein-cadre à grands rayons, contenu en overlay, carte verre en bas-droite. */

/* Le hero est plein écran, bord à bord : pas de gouttière, pas de rayon.
   La nav flottante vit dedans, posée sur la photo.
   Le fond va d'un bord à l'autre ; le CONTENU, lui, reste aligné sur la
   coque du reste du site, sinon le titre part se coller au bord de l'écran
   sur un moniteur large et la page perd son axe de lecture. */
.hero { position: relative; }

/* Le cadre est LARGE et COURT, environ 2:1, comme la référence.
   Un hero à 88svh est une autre macrostructure : il occupe tout l'écran et
   repousse la première section sous la ligne de flottaison. Ici, on veut voir
   la bande photo entière ET deviner la suite. */
.hero__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;

  /* Plein écran. svh et non vh : sur mobile, vh compte la barre d'adresse
     du navigateur et fait dépasser le hero d'une centaine de pixels. */
  min-height: 100svh;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;

  /* La gouttière latérale reprend celle de la coque et centre le contenu
     sur la même largeur maximale que le reste du site. */
  padding-block: clamp(7rem, 5rem + 5vw, 10rem) clamp(2rem, 1rem + 3vw, 4rem);
  padding-inline: max(var(--shell-pad), (100% - var(--shell-max)) / 2);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Deux voiles : un latéral pour la lisibilité du texte à gauche, un supérieur
   pour que la nav flottante ne se perde pas dans un ciel clair. */
/* ORDRE D'EMPILEMENT DU HERO, à ne pas casser :
 *   0  .hero__media   (image, le LCP)
 *   1  .hero__video   (la boucle, quand elle est prête)
 *   2  ::after        (le voile, il doit couvrir l'image ET la vidéo)
 *   3  .hero__content / .hero__social / .hero__slider
 *
 * Le voile est un pseudo-élément : à z-index égal avec le contenu, il gagne,
 * parce qu'il est peint après lui dans l'ordre du document. Donner au contenu
 * le même z-index que le voile revient donc à le cacher derrière. */
.hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to right,  oklch(18% 0.05 268 / 0.66) 0%, oklch(18% 0.05 268 / 0.30) 48%, oklch(18% 0.05 268 / 0.05) 78%),
    linear-gradient(to bottom, oklch(18% 0.05 268 / 0.42) 0%, transparent 26%);
  pointer-events: none;
}

/* Le bloc de texte est centré verticalement dans la bande, pas collé en bas. */
.hero__content {
  position: relative;
  z-index: 3;             /* au-dessus du voile (2). Voir le bloc ::after. */
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  /* Environ 60 % de la largeur du cadre, comme la référence. En ch, la mesure
     serait calculée sur la taille du corps de texte, pas sur celle du display :
     le titre se retrouverait étranglé sur cinq lignes. */
  max-width: min(46rem, 62%);
  color: var(--color-ink-on-dark);
}
.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-on-dark-2);
  margin-bottom: var(--space-sm);
}
.hero__title {
  color: var(--color-ink-on-dark);
  margin-bottom: var(--space-md);
  overflow-wrap: anywhere;
  text-wrap: balance;
  /* Un cran sous --text-display : à 76 px, une accroche de 40 caractères
     passe sur trois lignes et fait grandir la bande jusqu'à casser le
     rapport ~2:1. À 66 px, elle tient sur deux, comme la référence. */
  font-size: clamp(2.25rem, 1.15rem + 4.35vw, 4.125rem);
}
.hero__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-on-dark-2);
  max-width: var(--measure-tight);
  margin-bottom: var(--space-lg);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Rangée sociale, bas-gauche, sur la même ligne que la carte. */
.hero__social {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  gap: var(--space-2xs);
  align-self: end;
  justify-self: start;
}

/* ── Carte carrousel bas-droite ────────────────────────────────────────
   L'élément signature de la référence : vignette + titre + bouton sombre,
   compteur « 1/5 » au-dessus, et un liseré de la carte suivante qui dépasse
   du cadre. Ce dépassement est ce qui fait comprendre qu'on peut faire
   défiler, sans lui, la carte ressemble à un encart figé. */
.hero__slider {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  width: min(25rem, 100%);
}

.hero__slider-count {
  position: absolute;
  top: -1.75rem;
  right: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-on-dark-2);
}

.hero__slider-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs);
  padding-right: var(--space-sm);
  border-radius: var(--radius-lg);
}

.hero__slider-thumb {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: none;
  background: var(--color-paper-2);
}
.hero__slider-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hero__slider-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.hero__slider-label {
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
  letter-spacing: var(--tracking-label);
}
.hero__slider-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

/* Le liseré de la carte suivante, qui sort du cadre par la droite. */
.hero__slider-peek {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(var(--space-md) * -1);
  translate: 100% -50%;
  width: 9rem;
  height: 4.75rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0.9;
}
.hero__slider-peek img { width: 100%; height: 100%; object-fit: cover; }
.hero__social a {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-pill);
  background: oklch(100% 0 0 / 0.16);
  border: var(--rule-hairline) solid oklch(100% 0 0 / 0.28);
  color: var(--color-ink-on-dark);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hero__social a:hover { background: oklch(100% 0 0 / 0.3); }
.hero__social a:focus-visible { outline: var(--focus-ring) solid var(--color-accent); outline-offset: var(--focus-gap); }
.hero__social svg { width: 1rem; height: 1rem; }

/* Hero typographique, guides et pages institutionnelles. */
.page-hero { padding-block: var(--space-2xl) var(--space-lg); }
.page-hero__title { max-width: 22ch; margin-bottom: var(--space-md); }
.page-hero__lede {
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* ── Hero photographique de catégorie ─────────────────────────────────
   Une page listing sans image est une page de résultats, pas une page de
   marque. Le même traitement que le hero d'accueil, en plus court, avec des
   pastilles de verre qui portent des données réelles : nombre de produits,
   fourchette de prix, puissance maximale. */
.cat-hero { position: relative; }

/* Bande pleine largeur, pas plein écran : sur une page listing, ce que le
   visiteur est venu voir, ce sont les produits. Le hero pose le décor,
   il ne doit pas repousser la grille sous la ligne de flottaison. */
.cat-hero__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;

  min-height: clamp(22rem, 42vh, 30rem);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;

  padding-block: clamp(7rem, 5rem + 4vw, 9rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-inline: max(var(--shell-pad), (100% - var(--shell-max)) / 2);
}

.cat-hero__media { position: absolute; inset: 0; z-index: 0; }
.cat-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

.cat-hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,  oklch(18% 0.05 268 / 0.76) 0%, oklch(18% 0.05 268 / 0.38) 52%, oklch(18% 0.05 268 / 0.08) 82%),
    linear-gradient(to bottom, oklch(18% 0.05 268 / 0.48) 0%, transparent 28%);
}

.cat-hero__body {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  /* Les H1 de catégorie sont longs par construction : le nom de la gamme,
     puis « au Maroc », puis l'intention de recherche. « Bornes de Recharge &
     Stations d'Énergie au Maroc : Prix et achat en ligne » fait 73 signes.
     Une mesure en ch se calculerait sur le corps de texte, pas sur le display,
     et tasserait le titre sur cinq lignes. */
  max-width: min(52rem, 70%);
  color: var(--color-ink-on-dark);
}
.cat-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-on-dark-2);
  margin-bottom: var(--space-2xs);
}
.cat-hero__eyebrow svg { width: 1rem; height: 1rem; color: var(--color-accent); }
.cat-hero__title {
  color: var(--color-ink-on-dark);
  /* Un cran sous le hero d'accueil : sur une page listing, le titre situe,
     il ne proclame pas. À 44 px, un H1 de 73 signes tient sur deux lignes. */
  font-size: clamp(1.75rem, 1.05rem + 2.7vw, 2.75rem);
  line-height: var(--leading-snug);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Le silo éditorial reprend ce hero avec un chapeau : sur une page de
   guides, le titre seul ne dit pas ce qu'on va y lire. Les pages catégorie
   n'en ont pas, leur H1 est déjà descriptif. */
.cat-hero__lede {
  margin-top: var(--space-sm);
  max-width: 52ch;
  color: var(--color-ink-on-dark-2);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

@media (max-width: 53.75rem) {
  .cat-hero__lede { font-size: var(--text-base); }
}

/* Les pastilles occupent la ligne du bas, alignées à gauche puis à droite. */
.cat-hero__stats {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-self: end;
  margin-top: var(--space-md);
}

/* ═══════════════════════ CLUSTER BENTO, 1 photo + 2 textes ══════════ */

.bento-trio {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

/* ═══════════════════════════ DIPTYQUE ════════════════════════════════ */

.diptych {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: var(--space-md);
  align-items: stretch;
}
.diptych--reverse { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.diptych__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl);
  background: var(--color-paper-2);
  border-radius: var(--radius-xl);
  min-width: 0;
}
.diptych__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 24rem;
  background: var(--color-paper-2);
}
.diptych__media img { width: 100%; height: 100%; object-fit: cover; }
.diptych__overlay {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-end;
}

/* Liste à puces cochées, reprise de la référence. */
.check-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.check-list svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--color-accent-text); margin-top: 1px; }

/* ═══════════════════════ GRILLE PRODUITS, F6 ════════════════════════ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-md);
}
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ═══════════════════════ GRILLE CATÉGORIES ═══════════════════════════ */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 17rem;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink-on-dark);
  isolation: isolate;
  min-width: 0;
}
.cat-card img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cat-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, oklch(20% 0.06 268 / 0.8) 0%, oklch(20% 0.06 268 / 0.15) 58%, transparent 82%);
}
.cat-card:hover img { transform: scale(1.04); }
.cat-card:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }
.cat-card__icon {
  position: absolute;
  top: var(--space-md); left: var(--space-md);
  z-index: 2;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-pill);
  background: oklch(100% 0 0 / 0.18);
  border: var(--rule-hairline) solid oklch(100% 0 0 / 0.3);
}
.cat-card__icon svg { width: 1.125rem; height: 1.125rem; }
.cat-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-3xs); }
.cat-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.cat-card__meta { font-size: var(--text-xs); color: var(--color-ink-on-dark-2); font-variant-numeric: tabular-nums; }

/* ══════════════════════ MISE EN PAGE BOUTIQUE ════════════════════════ */

.shop-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
.shop-sidebar { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: var(--space-lg); }
.filter-group__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-sm);
}
/* Ce ul sort de fms_shop_filters() sans classe : la remise a zero
   ul[class] ne le voit pas, d'ou des puces et des marges heritees qui
   debordaient du menu deroulant mobile. */
.filter-group ul { display: flex; flex-direction: column; gap: var(--space-3xs); list-style: none; margin: 0; padding-left: 0; }
.filter-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.filter-group a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.filter-group a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: var(--weight-semibold); }
.filter-group__count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: var(--rule-hairline) solid var(--color-rule);
}
.shop-toolbar__count { font-size: var(--text-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }

/* ═══════════════════════ FICHE PRODUIT ═══════════════════════════════ */

.product-single {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* C'est la GALERIE qui suit le défilement, pas la colonne d'achat : la
   colonne d'achat est presque toujours la plus haute des deux, la coller
   ne faisait donc rien, et l'image restait plantée en haut pendant qu'on
   lisait le reste. Garde-fou de hauteur : une galerie plus haute que la
   fenêtre resterait bloquée avec ses vignettes hors de portée. */
/* 1081 px et non 62 rem : en dessous de 1081 px la fiche passe déjà sur
   une seule colonne, et coller la galerie dans une pile verticale la
   figerait pendant qu'on fait défiler le texte sous elle. */
@media (min-width: 1081px) and (min-height: 52rem) {
  .gallery { position: sticky; top: 6.5rem; }
}

.product-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-paper-2);
  margin-bottom: var(--space-sm);
  isolation: isolate;
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-2xl); }

/* Pastilles de specs posées sur la photo, le geste « 700 kV » de la
   référence, appliqué aux vraies caractéristiques du produit. */
.gallery__stats {
  position: absolute;
  z-index: 2;
  left: var(--space-md);
  bottom: var(--space-md);
  right: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  pointer-events: none;
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--space-2xs);
}
.gallery__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-2);
  border: var(--rule-medium) solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-2xs); }
.gallery__thumb:hover { border-color: var(--color-rule-strong); }
.gallery__thumb[aria-current="true"] { border-color: var(--color-ink); }
.gallery__thumb:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }

.product-summary__cat {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.product-summary__title { font-size: var(--text-4xl); }
.product-summary__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.product-summary__price .woocommerce-Price-currencySymbol {
  font-size: var(--text-lg);
  color: var(--color-ink-3);
}
.product-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Les 4 specs clés, juste sous le prix, ce qui décide l'achat, avant
   même que le visiteur ouvre la fiche technique complète. */
.spec-highlights {
  display: grid;
  /* DEUX colonnes fixes, pas un auto-fit. En auto-fit la grille passait à
     trois pistes sur grand écran et les quatre specs se rangeaient 3 + 1,
     avec une case orpheline en deuxième ligne. Deux pistes donnent un carré
     de 2 x 2, et des cases assez larges pour que « 2 200 lm, LED Nichia
     (LED commune 24 W) » tienne sur deux lignes au lieu de quatre. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}
.spec-highlight {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  min-width: 0;
}
.spec-highlight__label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
  display: block;
  margin-bottom: 2px;
}
.spec-highlight__value {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}

.buy-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
}

/* Carte englobant la fiche technique, sous la fiche produit. */
.spec-card {
  padding: var(--space-xl);
  border-radius: var(--radius-2xl);
  background: var(--color-paper-2);
}
.spec-card__title { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.spec-card .specs-table th,
.spec-card .specs-table td { border-color: var(--color-rule-strong); }
/* ── Promesses, en bande sous les deux colonnes ────────────────────────
   Elles vivaient dans la colonne d'achat, où elles ajoutaient 300 px de
   hauteur à la seule colonne déjà la plus longue. À plat sous la fiche,
   elles rééquilibrent la grille et se lisent sur trois colonnes. */
.product-promise {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hairline) solid var(--color-rule);
}

/* ── Fiche technique ───────────────────────────────────────────────────
   Multi-colonnes, pas grille : le navigateur répartit lui-même les lignes
   pour égaliser les hauteurs. Onze caractéristiques donnent 4 / 4 / 3, et
   non 4 / 4 / 1 + deux colonnes en friche, ce qui était tout le problème
   du diptyque précédent. Le nombre de colonnes suit le nombre de lignes :
   trois caractéristiques étalées sur 1 185 px ne feraient pas une fiche. */
.spec-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.spec-grid {
  columns: var(--spec-cols, 3) 20rem;
  column-gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  margin: 0;
}
.spec-grid--narrow { max-width: 46rem; }

.spec-grid__row {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: var(--rule-hairline) solid var(--color-rule-strong);
  min-width: 0;
}

.spec-grid dt {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.spec-grid dd {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

/* Filet en bas de chaque ligne, jamais en haut : en multi-colonnes, un
   :first-child ne vise que la première ligne de la liste, pas celle de
   chaque colonne. Le filet bas, lui, ferme les trois colonnes de la même
   façon quel que soit l'endroit où le navigateur décide de couper. */

@media (max-width: 53.75rem) {
  .spec-grid { columns: 1; }
  .spec-grid--narrow { max-width: none; }
  .spec-sheet__head { align-items: flex-start; flex-direction: column; }
  .product-promise { margin-top: var(--space-xl); }
}

.buy-box__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

.qty-field {
  display: inline-flex;
  align-items: center;
  border: var(--rule-hairline) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  overflow: hidden;
  flex: none;
}
.qty-field button {
  width: 2.5rem; height: 2.875rem;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.qty-field button svg { width: 1.125rem; height: 1.125rem; }
.qty-field button:hover { background: var(--color-paper-3); }
.qty-field button:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: calc(var(--focus-gap) * -1); }
.qty-field button[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Sélecteur à trois classes, et ce n'est pas de la gourmandise : le champ
   porte la bordure de « .woocommerce input[type=number] » et la largeur de
   « .woocommerce .quantity .qty », toutes deux plus spécifiques qu'une classe
   seule. Sans cela, une deuxième pilule bordée apparaissait à l'intérieur
   du widget. */
.quantity.qty-field input.qty {
  width: 3rem;
  height: 2.875rem;
  min-height: 0;
  padding: 0;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.quantity.qty-field input.qty:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: calc(var(--focus-gap) * -1);
}
.qty-field input::-webkit-outer-spin-button,
.qty-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sans bouton (lecture seule), le champ redevient la pilule entière. */
.qty-field--readonly { border: 0; }

.product-tabs { margin-top: var(--space-3xl); }
.product-tabs__nav {
  display: flex;
  gap: var(--space-2xs);
  border-bottom: var(--rule-hairline) solid var(--color-rule);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.product-tabs__nav button {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 0;
  border-bottom: var(--rule-medium) solid transparent;
  margin-bottom: -1px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.product-tabs__nav button:hover { color: var(--color-ink); }
.product-tabs__nav button[aria-selected="true"] { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.product-tabs__nav button:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: calc(var(--focus-gap) * -1); }

/* ══════════════════════════ PAGINATION ═══════════════════════════════ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3xs);
  margin-top: var(--space-2xl);
}
.pagination a, .pagination span {
  display: grid;
  place-items: center;
  min-width: 2.5rem; height: 2.5rem;
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--color-ink-2);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pagination a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.pagination .current { background: var(--color-ink); color: var(--color-ink-on-dark); }
.pagination a:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }

/* ═══════════════════════ GRILLE ARTICLES ═════════════════════════════ */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-lg);
}
.post-card { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.post-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper-2);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__meta { font-size: var(--text-2xs); color: var(--color-ink-3); letter-spacing: var(--tracking-label); }
.post-card__title { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.post-card__title a { text-decoration: none; }
.post-card__excerpt { font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-relaxed); }

/* ════════════════════════════ RESPONSIVE ═════════════════════════════
   Vérifié à 320 / 375 / 414 / 768. Aucun défilement horizontal.          */

@media (max-width: 1080px) {
  .bento-trio    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-trio > :first-child { grid-column: 1 / -1; }
  .cat-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-layout   { grid-template-columns: minmax(0, 1fr); }
  .shop-sidebar  { position: static; }
  .product-single { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .product-summary { position: static; }

  .hero__slider { width: min(21rem, 100%); }
  .hero__slider-peek { display: none; }
}

@media (max-width: 860px) {
  /* Les règles responsives de la nav vivent dans components.css, avec le
     composant : cette feuille est chargée AVANT components.css, une règle
     posée ici serait écrasée par le `.nav-links { display: flex }` de base. */

  /* En mobile, la grille repasse en colonne : texte, puis socials, puis
     carte, l'ordre de lecture naturel. Le hero reste plein écran. */
  .hero__frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: var(--space-md);
    padding-block: clamp(6.5rem, 5rem + 8vw, 8rem) var(--space-lg);
  }
  .hero__content { grid-column: 1; grid-row: 1; align-self: center; max-width: none; }
  .hero__social  { grid-column: 1; grid-row: 2; }
  .hero__slider  { grid-column: 1; grid-row: 3; width: 100%; justify-self: stretch; }
  .hero__slider-count { display: none; }

  .cat-hero__frame {
    min-height: clamp(17rem, 34vh, 22rem);
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(6.5rem, 5rem + 8vw, 8rem) var(--space-md);
  }
  .cat-hero__body { max-width: none; }

  .diptych, .diptych--reverse { grid-template-columns: minmax(0, 1fr); }
  .diptych__text  { padding: var(--space-lg); }
  .diptych__media { min-height: 18rem; }

  .product-grid--4, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery__main img { padding: var(--space-lg); }

  .section-head { margin-bottom: var(--space-xl); }
  .footer-statement { font-size: var(--text-3xl); }
}

@media (max-width: 560px) {
  .bento-trio    { grid-template-columns: minmax(0, 1fr); }
  .bento-trio > :first-child { grid-column: auto; }
  .cat-grid      { grid-template-columns: minmax(0, 1fr); }
  .product-grid, .product-grid--4, .product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }

  .product-card__body { padding: var(--space-sm); }
  .product-card__title { font-size: var(--text-sm); }
  .product-card__price { font-size: var(--text-lg); }
  .product-card__foot { flex-direction: column; align-items: stretch; gap: var(--space-2xs); }
  /* « Acheter » s'etire, l'icone panier garde son carre de 44 px : la
     regle en width:100% datait de l'epoque du bouton unique et ecrasait
     .btn--icon, moins specifique qu'elle. */
  .product-card__cta .btn--sm { width: 100%; max-width: none; }

  .hero__actions .btn { flex: 1 1 auto; }
  .wa-float { padding-right: var(--space-xs); }
  .wa-float__label { display: none; }
}

@media (max-width: 380px) {
  .product-grid, .product-grid--4, .product-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); }
}

/* Ajustements mobiles pour les blocs ajoutés au second passage. */
@media (max-width: 560px) {
  .gallery__stats { position: static; margin-top: var(--space-sm); }
  .spec-card      { padding: var(--space-lg); }
  .cat-hero__stats .stat-chip { font-size: var(--text-2xs); }
  .hero__slider-card { padding-right: var(--space-2xs); }
  .hero__slider-thumb { width: 3.5rem; height: 3.5rem; }
}

/* Le liseré est un bouton : il lui faut ses états. */
.hero__slider-peek {
  padding: 0;
  border: var(--rule-hairline) solid var(--glass-border);
  cursor: pointer;
  transition: translate var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.hero__slider-peek:hover  { translate: 92% -50%; opacity: 1; }
.hero__slider-peek:active { translate: 96% -50%; }
.hero__slider-peek:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--focus-gap);
  translate: 92% -50%;
}

/* ── Vidéo de fond du hero ─────────────────────────────────────────────
   Elle se pose par-dessus l'image, qui reste le LCP. Elle n'apparaît qu'une
   fois lisible (classe posée par le JS) : sans ça, on verrait un rectangle
   noir le temps du buffering. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }

/* L'ordre d'empilement est déclaré une seule fois, au niveau des règles de
   base du hero (voir le bloc .hero__frame::after plus haut). Le répéter ici
   en surcharge était une invitation à ce que les deux versions divergent. */

/* Mouvement réduit : la vidéo ne se charge pas du tout, l'image reste. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none !important; }
}

/* ── Fonds des visuels produit ─────────────────────────────────────────
   Les photos du catalogue sont détourées sur blanc. Toute zone média posée
   sur du gris leur dessine un carré blanc au milieu. On met du blanc partout
   où une photo produit est affichée, et on délimite par un filet. */
.gallery__main {
  background: var(--color-paper);
  border: var(--rule-hairline) solid var(--color-rule);
}
.gallery__thumb { background: var(--color-paper); }
.gallery__thumb[aria-current="true"] { border-color: var(--color-ink); }

.woocommerce table.shop_table .product-thumbnail img,
.hero__slider-thumb {
  background: var(--color-paper);
}

/* ── Marges de sécurité iOS sur les éléments fixes et pleine largeur ─── */
.wa-float {
  right:  max(var(--space-sm), env(safe-area-inset-right));
  bottom: max(var(--space-sm), env(safe-area-inset-bottom));
}

.hero__frame,
.cat-hero__frame {
  padding-left:  max(var(--shell-pad), env(safe-area-inset-left),  (100% - var(--shell-max)) / 2);
  padding-right: max(var(--shell-pad), env(safe-area-inset-right), (100% - var(--shell-max)) / 2);
}

/* ── 320 px : la largeur plancher ──────────────────────────────────────
   À cette largeur, les gouttières mangent 11 % de l'écran. On les resserre
   et on ramène les titres à une taille qui laisse deux mots par ligne. */
@media (max-width: 22.5rem) {
  :root { --shell-pad: 0.875rem; }

  .hero__title    { font-size: clamp(1.875rem, 1rem + 4.5vw, 2.25rem); }
  .cat-hero__title { font-size: clamp(1.5rem, 0.9rem + 3vw, 1.75rem); }
  .section-head__title { font-size: clamp(1.625rem, 1rem + 3.4vw, 2.05rem); }

  .hero__slider-card { gap: var(--space-2xs); }
  .hero__slider-title { font-size: var(--text-sm); }

  .stat-chip { padding-inline: var(--space-2xs); }
  .cat-hero__stats { gap: var(--space-3xs); }

  .footer-statement { font-size: var(--text-2xl); }
  .product-summary__title { font-size: var(--text-3xl); }
  .product-summary__price { font-size: var(--text-3xl); }
}


/* ═══════════════════ ARTICLE VEDETTE DU SILO ═════════════════════════
   Le premier guide passe en diptyque pleine largeur. Une grille uniforme
   dès le premier article donnerait six cartes identiques sans hiérarchie :
   l'ordre de publication du silo EST un ordre de priorité, la mise en page
   doit le dire. */

.post-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: center;
}

.post-feature__media {
  display: block;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-paper-2);
  aspect-ratio: 16 / 11;
}
.post-feature__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.post-feature:hover .post-feature__media img { transform: scale(1.02); }

.post-feature__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.post-feature__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.post-feature__title a { text-decoration: none; }
.post-feature__excerpt {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

@media (max-width: 53.75rem) {
  .post-feature { grid-template-columns: minmax(0, 1fr); }
  .post-feature__media { aspect-ratio: 16 / 10; order: -1; }
  .post-feature__title { font-size: var(--text-3xl); }
  .post-feature__excerpt { font-size: var(--text-base); }
}

@media (hover: none) {
  .post-feature:hover .post-feature__media img { transform: none; }
}

/* ═════════════════ GUIDE DE CATÉGORIE ════════════════════════════════
   Même vocabulaire que les sections de l'accueil : cartes photo à pastille
   de verre, carte encrée, bande claire, listes cochées.
   Le rythme vient de l'ALTERNANCE des traitements. Cinq blocs au même
   traitement resteraient de la prose habillée, quelle que soit la finesse
   des marges. */

.guide__list { display: flex; flex-direction: column; gap: var(--space-md); }

.guide__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-lg), 3.5vw, var(--space-2xl));
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.guide__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); }

.guide__title {
  position: relative;
  font-size: var(--text-3xl);
  letter-spacing: -0.028em;
  line-height: var(--leading-snug);
  padding-top: var(--space-md);
  overflow-wrap: anywhere;
}
.guide__title::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2.25rem;
  height: var(--rule-medium);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.guide__prose { color: var(--color-ink-2); max-width: var(--measure); }
.guide__prose > * + * { margin-top: var(--space-md); }

/* Traitements 1 et 3 : diptyque photo */
.guide__item--feature,
.guide__item--feature-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  background: var(--color-paper-2);
}
.guide__item--feature-flip .guide__media { order: -1; }

.guide__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-paper-3);
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.guide__media img { width: 100%; height: 100%; object-fit: cover; }

.guide__figure { position: absolute; z-index: 2; left: var(--space-md); bottom: var(--space-md); }

/* Traitement 2 : carte encrée */
.guide__item--ink {
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
}
.guide__item--ink .guide__title { color: var(--color-ink-on-dark); }
.guide__item--ink .guide__prose { color: var(--color-ink-on-dark-2); max-width: none; }
.guide__item--ink .guide__prose strong { color: var(--color-ink-on-dark); }
.guide__item--ink .guide__prose a { color: var(--color-accent); }
.guide__item--ink .check-list li { color: var(--color-ink-on-dark-2); }
.guide__item--ink .check-list svg { color: var(--color-accent); }
.guide__item--ink .specs-table th { color: var(--color-ink-on-dark); }
.guide__item--ink .specs-table td { color: var(--color-ink-on-dark-2); }
.guide__item--ink .specs-table th,
.guide__item--ink .specs-table td { border-color: oklch(100% 0 0 / 0.16); }

/* Le texte encré passe en deux colonnes sur grand écran : un pavé pleine
   largeur sur fond sombre est nettement plus fatigant à lire. */
@media (min-width: 60rem) {
  .guide__item--ink .guide__prose { columns: 2; column-gap: var(--space-2xl); }
  .guide__item--ink .guide__prose > *:first-child { margin-top: 0; }
  .guide__item--ink .check-list { break-inside: avoid; }
}

/* Traitement 4 : bande claire */
.guide__item--band {
  background: var(--color-paper-2);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

/* Traitement 5 : carte bordée */
.guide__item--plain {
  background: var(--color-paper);
  border: var(--rule-hairline) solid var(--color-rule);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
}


@media (max-width: 53.75rem) {
  .guide__item--feature,
  .guide__item--feature-flip { grid-template-columns: minmax(0, 1fr); }
  .guide__item--feature-flip .guide__media { order: 0; }
  .guide__media { aspect-ratio: 16 / 10; }
  .guide__title { font-size: var(--text-2xl); }
}

/* ── Traitement tarifaire ──────────────────────────────────────────────
   La section qui parle de prix reçoit le tableau du catalogue sous sa
   prose. Fond encré : le tableau est le point d'arrêt du guide, il doit
   trancher sur la succession de bandes claires qui le précède. */
.guide__item--pricing {
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  gap: var(--space-lg);
}
.guide__item--pricing .guide__title { color: var(--color-ink-on-dark); }
.guide__item--pricing .guide__prose { color: var(--color-ink-on-dark-2); }
.guide__item--pricing .guide__prose strong { color: var(--color-ink-on-dark); }
.guide__item--pricing .guide__prose a { color: var(--color-accent); }

/* ── Tableau de prix ───────────────────────────────────────────────────
   Vrai <table> : lecture en colonnes sur grand écran, cartes empilées
   sous 54rem. Les chiffres sont en chasse fixe tabulaire, sinon les
   dirhams ne s'alignent pas d'une ligne à l'autre et la comparaison
   verticale, qui est tout l'intérêt du tableau, ne se fait plus. */
.price-table {
  --pt-rule: oklch(100% 0 0 / 0.14);
  min-width: 0;
}

.price-table__scroll {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: oklch(100% 0 0 / 0.04);
  border: var(--rule-hairline) solid var(--pt-rule);
  -webkit-overflow-scrolling: touch;
}

.price-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.price-table thead th {
  position: sticky;
  top: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-on-dark-2);
  background: oklch(28% 0.085 268);
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
}
.price-table thead th.is-num { text-align: right; }

.price-table tbody th,
.price-table tbody td {
  padding: var(--space-sm);
  border-top: var(--rule-hairline) solid var(--pt-rule);
  color: var(--color-ink-on-dark-2);
  vertical-align: middle;
  text-align: left;
  font-weight: var(--weight-regular);
}
.price-table tbody td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.price-table tbody tr:hover { background: oklch(100% 0 0 / 0.05); }

/* La ligne au meilleur rapport est calculée, pas choisie : elle mérite
   un repère visuel, pas une couleur de promotion. */
.price-table tbody tr.is-best { background: oklch(68.8% 0.159 152.3 / 0.10); }
.price-table tbody tr.is-best:hover { background: oklch(68.8% 0.159 152.3 / 0.15); }
.price-table tbody tr.is-best th { box-shadow: inset 3px 0 0 var(--color-accent); }

.price-table__product {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  color: var(--color-ink-on-dark);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.price-table__product:hover .price-table__name { color: var(--color-accent); }
.price-table__product:focus-visible {
  outline: var(--rule-medium) solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.price-table__thumb {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-paper);
  display: grid;
  place-items: center;
}
.price-table__thumb img { width: 100%; height: 100%; object-fit: contain; }

.price-table__name {
  min-width: 0;
  display: block;
  line-height: var(--leading-snug);
  transition: color var(--dur-fast) var(--ease-out);
}

.price-table__flag {
  display: inline-block;
  margin-top: var(--space-3xs);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: oklch(20% 0.05 152.3);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.price-table__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink-on-dark);
  letter-spacing: -0.01em;
}

.price-table__void { color: var(--color-ink-3); }

.price-table__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-ink-on-dark-2);
}
.price-table__note svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 2px;
  color: var(--color-accent);
}

/* Repli en cartes. Un tableau à cinq colonnes qui défile latéralement sur
   375 px n'est lu par personne : chaque ligne devient une carte, chaque
   cellule reprend son intitulé de colonne en data-label. */
@media (max-width: 53.75rem) {
  .price-table__scroll {
    overflow-x: visible;
    border: 0;
    background: none;
    border-radius: 0;
  }
  .price-table table,
  .price-table tbody,
  .price-table tbody tr,
  .price-table tbody th,
  .price-table tbody td { display: block; width: 100%; }

  .price-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .price-table tbody tr {
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-lg);
    border: var(--rule-hairline) solid var(--pt-rule);
    background: oklch(100% 0 0 / 0.04);
    overflow: hidden;
  }
  .price-table tbody tr.is-best {
    border-color: oklch(68.8% 0.159 152.3 / 0.45);
  }
  .price-table tbody tr.is-best th { box-shadow: none; }

  .price-table tbody th { border-top: 0; padding-bottom: var(--space-xs); }

  .price-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    border-top: 0;
    text-align: right;
  }
  .price-table tbody td:last-child { padding-bottom: var(--space-sm); }
  .price-table tbody td.is-num { text-align: right; }

  .price-table tbody td::before {
    content: attr(data-label);
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-3);
  }

  .price-table tbody td[data-label="Prix"] {
    margin-top: var(--space-3xs);
    padding-top: var(--space-2xs);
    border-top: var(--rule-hairline) solid var(--pt-rule);
  }
}

/* ── Bannière de clôture ───────────────────────────────────────────────
   Image plein cadre, texte centré par-dessus. C'est la dernière chose
   que le visiteur voit avant la FAQ : elle porte l'argument du paiement
   à la réception, pas une carte de plus dans la pile. */
.guide-banner {
  position: relative;
  isolation: isolate;
  margin-top: var(--space-xl);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-ink);
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 30vw, 27rem);
}

/* Le visuel passe par un cadre positionné plutôt que d'être lui-même en
   absolu. Un pourcentage de hauteur ne se résout pas contre une bannière
   dont la hauteur vient du contenu : l'image retombait sur son ratio
   intrinsèque et débordait de 78 px par le bas, coupant le sujet. Le cadre,
   lui, tient sa hauteur de ses quatre décalages : elle est définie. */
.guide-banner__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Sélecteur à deux classes, et non une : WooCommerce pose un
   « .woocommerce-page img { height: auto } » qui bat une classe seule et
   renvoyait l'image à son ratio intrinsèque. */
.guide-banner .guide-banner__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deux voiles superposés : un aplat qui garantit le contraste du texte
   partout, un dégradé qui rend au bas de l'image sa densité. Un seul
   aplat suffisamment opaque pour le texte éteindrait la photo. */
.guide-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 55%, oklch(20% 0.05 268 / 0.78) 0%, oklch(20% 0.05 268 / 0.52) 55%, oklch(20% 0.05 268 / 0.62) 100%),
    linear-gradient(to top, oklch(18% 0.045 268 / 0.55), transparent 55%);
}
.guide-banner--flat::after {
  background: linear-gradient(160deg, oklch(38% 0.10 268), oklch(28% 0.085 268));
}

.guide-banner__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: clamp(var(--space-lg), 5vw, var(--space-3xl)) clamp(var(--space-md), 4vw, var(--space-2xl));
  max-width: 44rem;
}

.guide-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-dark);
  border: var(--rule-hairline) solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-highlight);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-on-dark);
}
.guide-banner__eyebrow svg { width: 1rem; height: 1rem; color: var(--color-accent); }

.guide-banner__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-ink-on-dark);
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 24px oklch(18% 0.045 268 / 0.5);
}

.guide-banner__text {
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-on-dark-2);
  text-wrap: pretty;
}

.guide-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

@media (max-width: 40rem) {
  .guide-banner { min-height: 0; }
  .guide-banner__title { font-size: var(--text-3xl); }
  .guide-banner__text { font-size: var(--text-base); }
  .guide-banner__actions { width: 100%; flex-direction: column; }
  .guide-banner__actions .btn { width: 100%; }
}

/* ── Introduction de catégorie ─────────────────────────────────────────
   Attaque éditoriale : le premier paragraphe en gros corps, le reste en
   colonne secondaire. Un bloc de prose uniforme ne donne aucun point
   d'entrée au regard. */
.cat-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
/* Un chapeau seul, sans colonne secondaire, prend toute la largeur avec
   une mesure de lecture bornée : sinon il reste coincé dans la colonne
   gauche et la page semble amputée de sa moitié droite. */
.cat-intro__lede:only-child {
  grid-column: 1 / -1;
  max-width: 68ch;
}
.cat-intro__lede p {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin: 0;
}
.cat-intro__lede strong { font-weight: var(--weight-bold); }
.cat-intro__rest {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  padding-top: var(--space-3xs);
}
.cat-intro__rest > * + * { margin-top: var(--space-sm); }

@media (max-width: 53.75rem) {
  .cat-intro { grid-template-columns: minmax(0, 1fr); }
  .cat-intro__lede p { font-size: var(--text-lg); }
  .cat-intro__rest { font-size: var(--text-base); }
}

/* La liste cochée apparaît aussi dans les guides : elle doit y tenir sur
   fond clair comme sur fond encré. */
.guide__prose .check-list li { align-items: flex-start; }
.guide__prose .check-list svg { margin-top: 2px; }

/* ── Description produit, traitée comme un guide ───────────────────────
   Mêmes classes .guide__item--* que les guides de catégorie : les deux
   pages doivent parler la même langue. Ne sont ajoutés ici que le chapeau
   et le cadrage des visuels produit. */
.product-story__head {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
  margin-bottom: var(--space-lg);
}
.product-story__lede p {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin: 0;
}
.product-story__lede p + p { margin-top: var(--space-sm); }

/* Le visuel vient de la galerie : photo d'objet détourée sur fond clair.
   Le « cover » des guides la rognerait par les bords ; il lui faut du
   « contain » et de la marge, comme dans la galerie du haut de page. */
.guide__media--product {
  aspect-ratio: 4 / 3;
  background: var(--color-paper);
}
.guide__media--product img {
  object-fit: contain;
  padding: clamp(var(--space-md), 3vw, var(--space-xl));
}

@media (max-width: 53.75rem) {
  .product-story__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .product-story__lede p { font-size: var(--text-lg); }
}

/* ═══════════════════════════ PAGE CONTACT ════════════════════════════
   Les canaux sont des cartes cliquables en entier, pas des paragraphes
   avec un numéro dedans. Sur un téléphone, la cible tactile fait toute
   la carte : c'est là que se joue la prise de contact au Maroc. */

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
  gap: var(--space-sm);
}

.channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
}

.channel__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  flex: none;
}
.channel__icon svg { width: 1.25rem; height: 1.25rem; }

.channel__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* Le numéro est l'information, pas la décoration : il prend la taille
   d'un titre et la chasse tabulaire, pour se lire chiffre par chiffre. */
.channel__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.channel__alt {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}

.channel__note {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.channel__cta {
  margin-top: auto;
  padding-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-accent-text);
}
.channel__cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* WhatsApp est le canal le plus rapide et celui par lequel les clients
   commandent réellement : il est traité en carte principale plutôt que
   posé au même niveau que les trois autres. */
.channel--whatsapp {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-line);
}
.channel--whatsapp .channel__icon {
  background: var(--color-accent-text);
  color: var(--color-ink-on-dark);
}

/* Les quatre états d'un lien. Pas d'états disabled, loading, error ou
   success ici : une carte de contact ne change jamais d'état. */
.channel:hover, .channel.is-hover {
  border-color: var(--color-rule-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.channel:hover .channel__cta svg, .channel.is-hover .channel__cta svg { transform: translateX(3px); }
.channel--whatsapp:hover, .channel--whatsapp.is-hover { border-color: var(--color-accent-text); }

.channel:focus-visible, .channel.is-focus {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-gap);
}
.channel:active, .channel.is-active { transform: translateY(0); box-shadow: none; }

@media (hover: none) {
  /* Sur un écran tactile, le survol n'existe pas : le décalage se déclenche
     au doigt posé et donne l'impression que la carte saute. */
  .channel:hover { transform: none; box-shadow: none; }
}

/* ── Magasin et horaires ───────────────────────────────────────────── */

.visit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}

.visit__address {
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
}

.visit__note {
  margin-top: var(--space-md);
  max-width: var(--measure);
  color: var(--color-ink-2);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.visit__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.visit__hours { padding: clamp(var(--space-md), 2.4vw, var(--space-lg)); }
.visit__hours:hover { border-color: var(--color-rule); box-shadow: none; }

.visit__hours-title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.visit__hours-title svg { width: 1.125rem; height: 1.125rem; color: var(--color-accent-text); flex: none; }

.hours { margin: 0; }
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  border-bottom: var(--rule-hairline) solid var(--color-rule);
  font-size: var(--text-sm);
}
.hours__row:last-child { border-bottom: 0; }
.hours dt { color: var(--color-ink-2); display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap; }
.hours dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* « Est-ce ouvert maintenant » est la seule question que pose vraiment
   cette liste : le jour courant sort du lot. */
.hours__row.is-today {
  background: var(--color-accent-soft);
  border-bottom-color: transparent;
}
.hours__row.is-today dt { color: var(--color-ink); font-weight: var(--weight-bold); }
.hours__row.is-today dd { color: var(--color-accent-text); }

.hours__flag {
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-text);
  color: var(--color-ink-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hours__closed { color: var(--color-ink-3); font-weight: var(--weight-regular); }

.visit__hours-note {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--rule-hairline) solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: var(--leading-normal);
}

@media (max-width: 53.75rem) {
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit__address { font-size: var(--text-lg); }
  .visit__actions .btn { flex: 1 1 12rem; }
}

@media (max-width: 30rem) {
  .channel { padding: var(--space-md); }
  .visit__actions { flex-direction: column; }
  /* flex: none et pas seulement width: 100%. Le flex-basis de 12 rem posé
     plus haut s'applique à l'axe principal : en colonne, c'est la HAUTEUR,
     et les boutons montaient à 192 px. */
  .visit__actions .btn { width: 100%; flex: none; }
}

/* ── Bandeau de chiffres ───────────────────────────────────────────────
   Utilisé sur la page À propos. Les valeurs viennent du catalogue, pas du
   gabarit : c'est ce qui permet de les afficher gros sans risquer de mentir
   le jour où une référence entre ou sort. */
.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-sm);
}

.figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
}

.figure__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-accent-text);
  flex: none;
}
.figure__icon svg { width: 1.125rem; height: 1.125rem; }

.figure__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.figure__unit {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: var(--leading-normal);
}

/* ═══════════════════════ ARTICLE DU SILO CONSEILS ═════════════════════
   Un guide de 700 mots à sept intertitres se lit par sections, pas en
   continu : sommaire collant à gauche, texte à droite, mesure de lecture
   contrainte. Sur mobile le sommaire se replie au-dessus du texte, où il
   sert de résumé plutôt que de navigation. */

.cat-hero--article .cat-hero__frame { min-height: clamp(20rem, 34vh, 26rem); }
.cat-hero--article .cat-hero__eyebrow a { color: inherit; text-decoration: none; }
.cat-hero--article .cat-hero__eyebrow a:hover { color: var(--color-accent); }
.cat-hero--article .cat-hero__title {
  font-size: clamp(1.75rem, 1.05rem + 2.8vw, 3rem);
  max-width: 20ch;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  align-items: start;
}

.article-toc {
  position: sticky;
  top: 6.5rem;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
}
.article-toc__title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-sm);
}

.article-toc .article-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.article-toc__list a {
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.article-toc__list a:hover { background: var(--color-paper); color: var(--color-ink); }
.article-toc__list a:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }

/* La numérotation est du contenu de repérage, pas de la décoration : deux
   chiffres en chasse fixe, alignés, pour qu'on suive la colonne du regard. */
.article-toc__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
  padding-top: 2px;
}

.article-toc__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hairline) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-accent-text);
  text-decoration: none;
}
.article-toc__cta svg { flex: none; width: 1rem; height: 1rem; }
.article-toc__cta:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.article-body { max-width: var(--measure); }

/* Le titre visé par une ancre ne doit pas se coller sous le header collant :
   scroll-margin réserve la hauteur du header plus une respiration. */
.article-body h2 { scroll-margin-top: 7rem; }

@media (max-width: 61.25rem) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { position: static; }
  /* Replié au-dessus du texte, le sommaire redevient un résumé : deux
     colonnes de liens plutôt qu'une longue liste à faire défiler. */
  .article-toc .article-toc__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-3xs) var(--space-sm);
  }
  .article-body { max-width: none; }
}

/* ── Guides voisins ────────────────────────────────────────────────────
   Cartes de NAVIGATION et non cartes d article : vignette de 5,5 rem et
   mise en ligne. En format article, deux visuels de 576 x 360 px fermaient
   la page sur des images plus grandes que celle du guide qu on vient de
   lire, et la navigation ressemblait a deux nouveaux articles. */
.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-sm);
}

.post-nav__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
}
.post-nav__card:hover {
  border-color: var(--color-rule-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.post-nav__card:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }
.post-nav__card:active { transform: translateY(0); box-shadow: none; }
@media (hover: none) {
  .post-nav__card:hover { transform: none; box-shadow: none; }
}

.post-nav__media {
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-2);
}
.post-nav__media img { width: 100%; height: 100%; object-fit: cover; }

.post-nav__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }

.post-nav__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.post-nav__arrow { display: grid; place-items: center; }
.post-nav__arrow svg { width: 0.875rem; height: 0.875rem; }
/* La fleche du precedent pointe vers la gauche : c est la seule chose qui
   distingue les deux cartes au premier coup d oeil. */
.post-nav__card--prev .post-nav__arrow svg { transform: scaleX(-1); }

.post-nav__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}
.post-nav__card:hover .post-nav__title { color: var(--color-accent-text); }

/* ── Signature des guides ──────────────────────────────────────────────
   L'attribution est un signal GEO de premier ordre : les assistants citent
   les sources identifiables. Carte discrète, pas d'auto-célébration. */
.byline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
}
.byline__badge {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  flex: none;
}
.byline__badge svg { width: 1.125rem; height: 1.125rem; }
.byline__who  { margin: 0; font-weight: var(--weight-bold); }
.byline__what { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.byline__when { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-ink-3); }
.byline__when a { color: var(--color-accent-text); }

/* ── Le magasin sur la carte, pied de page ─────────────────────────────
   Carte à gauche, fiche à droite. L'iframe est bornée en hauteur : une
   carte trop haute transforme le footer en page à part entière. */
.footer-map {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  margin-block: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--rule-hairline) solid oklch(100% 0 0 / 0.14);
}
.footer-map__frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 240px;
  border: var(--rule-hairline) solid oklch(100% 0 0 / 0.18);
}
.footer-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
  /* La carte claire hurle sur le footer encré : on la tamise un peu. */
  filter: saturate(0.85) contrast(0.95);
}
.footer-map__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  justify-content: center;
}
.footer-map__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink-on-dark);
}
.footer-map__rating { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; font-size: var(--text-sm); }
.footer-map__stars { color: var(--color-accent); letter-spacing: 0.1em; }
.footer-map__rating a { color: var(--color-ink-on-dark); opacity: 0.85; }
.footer-map__rating a:hover { opacity: 1; }
.footer-map__facts { list-style: none; margin: var(--space-2xs) 0 var(--space-sm); padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-map__facts li { display: flex; align-items: flex-start; gap: var(--space-2xs); font-size: var(--text-sm); opacity: 0.85; }
.footer-map__facts svg { width: 1rem; height: 1rem; flex: none; margin-top: 2px; color: var(--color-accent); }
.footer-map .btn--ghost {
  align-self: flex-start;
  --btn-fg: var(--color-ink-on-dark);
  --btn-border: oklch(100% 0 0 / 0.3);
}
.footer-map .btn--ghost:hover { --btn-bg: oklch(100% 0 0 / 0.08); --btn-border: oklch(100% 0 0 / 0.5); }

@media (max-width: 44rem) {
  .footer-map { grid-template-columns: minmax(0, 1fr); }
  .footer-map__frame { min-height: 200px; }
}

/* ── Filtres boutique en menus déroulants ──────────────────────────────
   <details> natif : au-dessus de 1080 px les deux groupes restent ouverts
   et le résumé redevient un simple titre ; en dessous, chaque groupe est
   un menu déroulant fermé par défaut (voir initFiltresMobiles). */
summary.filter-group__title {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}
summary.filter-group__title::-webkit-details-marker { display: none; }
.filter-group__chevron { display: none; }

@media (min-width: 1081px) {
  /* Toujours ouvert : le résumé n'est plus un bouton. */
  summary.filter-group__title { pointer-events: none; }
}

@media (max-width: 1080px) {
  summary.filter-group__title {
    cursor: pointer;
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-hairline) solid var(--color-rule-strong);
    border-radius: var(--radius-lg);
    background: var(--color-paper);
    font-size: var(--text-sm);
    user-select: none;
  }
  summary.filter-group__title:hover { background: var(--color-paper-2); }
  summary.filter-group__title:focus-visible {
    outline: var(--focus-ring) solid var(--color-focus);
    outline-offset: var(--focus-gap);
  }

  .filter-group__chevron {
    display: block;
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--color-ink-3);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .filter-group[open] > summary .filter-group__chevron { transform: rotate(180deg); }
  .filter-group[open] > summary.filter-group__title {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom-color: transparent;
  }

  .filter-group[open] > ul {
    border: var(--rule-hairline) solid var(--color-rule-strong);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-2xs);
    background: var(--color-paper);
  }

  /* Les deux menus côte à côte quand la place le permet. */
  .shop-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); align-items: start; }
  .shop-sidebar > :not(.filter-group) { grid-column: 1 / -1; }
}

@media (max-width: 34rem) {
  .shop-sidebar { grid-template-columns: minmax(0, 1fr); }
}

/* Le titre de filtre est un vrai <h2> DANS le résumé : la conversion en
   <details> avait retiré les h2 et cassé la hiérarchie h1 -> h3 sur les
   pages catalogue. Le h2 hérite tout du résumé, il n'apporte que la
   sémantique. */
summary.filter-group__title h2 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}