/* Hallmark · composants, boutons, cartes, verre, nav N5, footer Ft5
 * Tout élément interactif ship ses 8 états :
 * default · hover · focus-visible · active · disabled · loading · error · success
 */

/* ═══════════════════════════════ BOUTONS ═══════════════════════════════
   L'encre porte les actions, pas le vert. C'est l'insight de la référence :
   l'accent vit dans la photo et les badges, jamais en aplat de bouton. */

.btn {
  --btn-bg:     var(--color-ink);
  --btn-fg:     var(--color-ink-on-dark);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  min-height: 2.875rem;

  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--rule-hairline) solid var(--btn-border);
  border-radius: var(--radius-pill);

  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;          /* aucun libellé cliquable sur deux lignes */

  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    transform        var(--dur-instant) var(--ease-out),
    opacity          var(--dur-fast) var(--ease-out);
}

/* Une icône posée directement dans un bouton doit être bornée.
   Sans ça, le SVG n'a pas de dimension intrinsèque : dans un conteneur flex
   il prend toute la place disponible. Le bouton « Demander conseil » montait
   ainsi à 101 px de haut avec une icône WhatsApp de 75 px. */
.btn > svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* Le libellé porte une flèche circulaire, comme sur la référence. */
.btn__arrow {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: calc(var(--space-2xs) * -1);
  border-radius: var(--radius-pill);
  background: var(--color-ink-on-dark);
  color: var(--color-ink);
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn__arrow svg { width: 0.75rem; height: 0.75rem; }

.btn:hover, .btn.is-hover { --btn-bg: oklch(26% 0.088 268); }
.btn:hover .btn__arrow, .btn.is-hover .btn__arrow { transform: translateX(2px); }
.btn:focus-visible, .btn.is-focus {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-gap);
}
.btn:active, .btn.is-active { transform: translateY(1px); }

.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.btn[data-state="loading"] {
  cursor: progress;
  pointer-events: none;
  color: transparent;
}
.btn[data-state="loading"]::after {
  content: '';
  position: absolute;
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  color: var(--btn-fg);
  animation: spin 620ms linear infinite;
}
.btn[data-state="loading"] { position: relative; }

.btn[data-state="error"]   { --btn-bg: var(--color-danger); }
.btn[data-state="success"] { --btn-bg: var(--color-success); }

/* Variantes */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-border: var(--color-rule-strong);
}
.btn--ghost:hover, .btn--ghost.is-hover {
  --btn-bg: var(--color-paper-3);
  --btn-border: var(--color-ink);
}

/* Bouton clair posé sur une photographie : verre dépoli plutôt qu'aplat blanc.
   Le blanc plein découpe un rectangle mort dans l'image ; le verre laisse
   passer la scène et fait partie de la photo au lieu de s'y superposer. */
.btn--on-photo {
  --btn-bg: var(--glass-bg);
  --btn-fg: var(--color-ink);
  --btn-border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
@supports (backdrop-filter: blur(1px)) {
  .btn--on-photo { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
}
.btn--on-photo:hover, .btn--on-photo.is-hover { --btn-bg: oklch(99% 0.002 268 / 0.94); }
.btn--on-photo .btn__arrow { background: var(--color-ink); color: var(--color-ink-on-dark); }

/* Secondaire posé sur une photo sombre : verre teinté encre plutôt que
   bordure blanche nue, qui se perd dès que la photo s'éclaircit. */
.btn--ghost-on-photo {
  --btn-bg: var(--glass-bg-dark);
  --btn-fg: var(--color-ink-on-dark);
  --btn-border: var(--glass-border);
  box-shadow: var(--glass-highlight);
}
@supports (backdrop-filter: blur(1px)) {
  .btn--ghost-on-photo { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
}
.btn--ghost-on-photo:hover, .btn--ghost-on-photo.is-hover { --btn-bg: oklch(30% 0.094 268 / 0.75); }
.btn--ghost-on-photo svg { color: var(--color-accent); }

.btn--accent {
  --btn-bg: var(--color-accent-text);
  --btn-fg: var(--color-ink-on-dark);
}
.btn--accent:hover, .btn--accent.is-hover { --btn-bg: oklch(45% 0.135 152.3); }

.btn--lg { min-height: 3.25rem; padding-inline: var(--space-lg); font-size: var(--text-base); }
.btn--sm { min-height: 2.375rem; padding-inline: var(--space-sm); font-size: var(--text-xs); }
.btn--block { width: 100%; }

/* Lien typographique, C3 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
  text-decoration: none;
  border-bottom: var(--rule-medium) solid var(--color-accent-line);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { border-color: var(--color-accent-text); gap: var(--space-2xs); }
.link-arrow:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════ VERRE ═══════════════════════════════
   Le traitement signature. Uniquement posé SUR une photographie 
   jamais sur du papier, où il n'a aucun sens optique. */

.glass {
  background: var(--glass-bg);
  border: var(--rule-hairline) solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  color: var(--color-ink);
}
@supports (backdrop-filter: blur(1px)) {
  .glass { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
}

.glass--dark {
  background: var(--glass-bg-dark);
  border-color: oklch(100% 0 0 / 0.18);
  color: var(--color-ink-on-dark);
}

/* Badge chiffré posé sur la photo, l'équivalent du « 700 kV » de la référence,
   sauf qu'ici la valeur est réelle : puissance, IP, autonomie. */
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
}
.stat-chip__icon {
  display: grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-ink);
  flex: none;
}
.stat-chip__icon svg { width: 0.875rem; height: 0.875rem; }
.stat-chip__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.stat-chip__unit { font-size: var(--text-2xs); color: var(--color-ink-3); font-weight: var(--weight-medium); }
.glass--dark .stat-chip__unit { color: var(--color-ink-on-dark-2); }

/* Jauge en arc, reprise du cadran de la référence, alimentée par une vraie valeur. */
.gauge { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; position: relative; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: oklch(100% 0 0 / 0.28); stroke-width: 6; stroke-linecap: round; }
.gauge__fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--gauge-circumference, 264);
  stroke-dashoffset: var(--gauge-circumference, 264);
  transition: stroke-dashoffset var(--dur-reveal) var(--ease-out);
}
.is-revealed .gauge__fill { stroke-dashoffset: var(--gauge-offset, 90); }
.gauge__label {
  position: absolute;
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════ CARTES ═══════════════════════════════ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--color-rule-strong); box-shadow: var(--shadow-md); }

.card--band { background: var(--color-paper-2); border-color: transparent; }
.card--ink  { background: var(--color-ink); color: var(--color-ink-on-dark); border-color: transparent; }
.card--ink .card__text { color: var(--color-ink-on-dark-2); }

.card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.card__title { font-size: var(--text-2xl); }
.card__text  { color: var(--color-ink-2); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Chip d'icône ronde, l'élément de la référence qui coiffe les cartes texte. */
.card__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
  flex: none;
}
.card--ink .card__icon { background: var(--color-accent); color: var(--color-ink); }
.card__icon svg { width: 1.25rem; height: 1.25rem; }

/* Carte-image : le contenu est incrusté dans les coins de la photo. */
/* Le texte remonte en haut de la carte, avec le dégradé.
   Un voile bleu en haut et un texte resté en bas seraient deux gestes qui
   s'ignorent : le dégradé protégerait du vide et le texte se poserait à nu
   sur la photo. Le scrim et ce qu'il éclaire vont ensemble. */
.card--photo { min-height: 20rem; border: 0; justify-content: flex-start; }
.card--photo > img,
.card--photo > picture > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile BLEU EN HAUT, transparent en bas.
   Le texte de la carte est blanc : sur une photo claire il se dissolvait.
   Le dégradé part dense sous le bord supérieur, là où le titre commence, et
   s'efface avant la moitié de la carte pour rendre la photographie entière.
   La chroma est volontairement plus élevée que celle de l'encre : à 0,115 le
   voile se lit comme du bleu, à 0,06 il se lisait comme du gris sale. */
.card--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    oklch(24% 0.115 268 / 0.94) 0%,
    oklch(26% 0.110 268 / 0.78) 26%,
    oklch(29% 0.100 268 / 0.36) 52%,
    oklch(31% 0.090 268 / 0.10) 74%,
    transparent 92%
  );
}
.card--photo > .card__body { position: relative; z-index: 2; color: var(--color-ink-on-dark); }
.card--photo .card__title { color: var(--color-ink-on-dark); }
.card--photo .card__text  { color: var(--color-ink-on-dark-2); }
.card--photo .card__corner {
  position: absolute;
  z-index: 3;
  right: var(--space-md);
  bottom: var(--space-md);
}

/* ═══════════════════════════ CARTE PRODUIT (F6) ═══════════════════════ */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-width: 0;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.product-card:hover { border-color: var(--color-ink-3); }
.product-card:focus-within { border-color: var(--color-focus); }

/* Fond BLANC, pas gris. Les visuels produit du catalogue sont détourés sur
   blanc : posés sur du gris, ils dessinent un carré blanc au milieu de la
   carte, ce qui se voit immédiatement et fait bricolé. Le blanc les fait
   disparaître dans la carte ; c'est le filet du bas qui sépare l'image de
   la fiche, pas un changement de fond. */
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-paper);
  border-bottom: var(--rule-hairline) solid var(--color-rule);
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--space-md);
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Zoom très contenu, 1.03, pas 1.08. Au-delà, ça devient un tic. */
.product-card:hover .product-card__media img { transform: scale(1.02); }

.product-card__flags {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  z-index: 2;
}
.flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  background: var(--color-paper);
  color: var(--color-ink-2);
  border: var(--rule-hairline) solid var(--color-rule);
}
.flag--power { background: var(--color-ink); color: var(--color-ink-on-dark); border-color: transparent; }
.flag--stock { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  flex: 1;
  min-width: 0;
}
.product-card__cat {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.product-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}
.product-card__title a { text-decoration: none; }
/* Toute la carte est cliquable, mais seul le titre porte le lien accessible. */
.product-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.product-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: var(--rule-hairline) solid var(--color-rule);
}
.product-card__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.product-card__price .woocommerce-Price-currencySymbol {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-3);
  margin-left: var(--space-3xs);
}
/* Deux actions cote a cote : prix a gauche, panier + acheter a droite.
   Sous 400 px de carte, le prix passe au-dessus et les boutons prennent
   la rangee, via flex-wrap : pas de media query, la carte decide seule. */
.product-card__cta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2xs);
  flex: 1 0 auto;
}
/* Quand le pied se replie sur deux rangées, « Acheter » occupe la place
   restante au lieu de flotter à côté de l'icône. */
.product-card__cta .btn--sm { flex: 1 1 auto; max-width: 11rem; min-height: 2.75rem; }

/* ═════════════════════════════ NAV, N5 pill ═════════════════════════ */

/* La nav suit le défilement partout : desktop, tablette, mobile.
   Sur une page à hero, elle est `fixed` : le hero occupe tout l'écran et
   n'a pas besoin qu'on lui réserve de la place au-dessus. Sur une page sans
   hero, elle est `sticky` (voir --solid) : là, la place doit être réservée,
   sinon le premier titre passe sous la barre. */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-top: var(--space-md);
  transition:
    padding var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

/* Une fois le hero quitté, la barre prend un fond de verre : sans lui, les
   liens flotteraient sur du contenu clair. La classe est posée par le JS. */
/* AUCUN fond ajouté : la barre ne fait que flouter ce qui passe dessous.
   Une couche claire, même à 62 %, reste une couche claire posée sur du
   papier clair : elle n'apporte rien et se voit comme du blanc.
   Le verre, c'est le flou qui prend la couleur de ce qu'il y a derrière. */
.site-header.is-stuck {
  padding-block: var(--space-2xs);
  background: transparent;
  border-bottom: var(--rule-hairline) solid var(--glass-border-ink);
  box-shadow: var(--glass-shadow-soft);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-stuck { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
}
/* Sur les pages sans hero photo, la nav retombe dans le flux. Verre dépoli
   plutôt que blanc plein : c'est ici que le flou sert vraiment à quelque
   chose, puisque le contenu défile dessous. */
/* Même principe sur les pages sans hero : pas de fond, seulement le flou.
   La barre prend la couleur du contenu qui défile dessous. */
.site-header--solid {
  position: sticky;
  top: 0;
  background: transparent;
  border-bottom: var(--rule-hairline) solid var(--glass-border-ink);
  box-shadow: var(--glass-shadow-soft);
  padding-block: var(--space-xs);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header--solid { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
}

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: var(--rule-hairline) solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
@supports (backdrop-filter: blur(1px)) {
  .nav-pill { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
}
.site-header--solid .nav-pill {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding-inline: 0;
}

.nav-brand { display: flex; align-items: center; flex: none; }
.nav-brand img, .nav-brand svg { height: 2.25rem; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  min-width: 0;
}
.nav-links a {
  display: block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-on-dark-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink-on-dark); background: oklch(100% 0 0 / 0.09); }
.nav-links a:focus-visible { outline: var(--focus-ring) solid var(--color-accent); outline-offset: -1px; }
.nav-links .current-menu-item > a,
.nav-links [aria-current="page"] {
  background: oklch(100% 0 0 / 0.16);
  color: var(--color-ink-on-dark);
}

.nav-actions { display: flex; align-items: center; gap: var(--space-2xs); flex: none; }

/* Boutons d'icône de la nav : verre, pas blanc plein. Sur le hero ils
   laissent voir la photo ; sur papier, le liseré encré et l'ombre courte
   suffisent à les détacher. */
.nav-icon-btn {
  display: grid;
  place-items: center;
  width: 2.625rem; height: 2.625rem;
  border-radius: var(--radius-pill);
  border: var(--rule-hairline) solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow-soft);
  color: var(--color-ink);
  cursor: pointer;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) {
  .nav-icon-btn { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
}
.nav-icon-btn:hover { background: oklch(99% 0.002 268 / 0.95); border-color: var(--glass-border-ink); }

/* Sur papier, le blanc translucide sur blanc ne se voit pas : on remonte le
   liseré pour que le bouton reste un bouton. */
.site-header--solid .nav-icon-btn { border-color: var(--color-rule); }
.nav-icon-btn:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }
.nav-icon-btn:active { transform: translateY(1px); }
.nav-icon-btn svg { width: 1.125rem; height: 1.125rem; }

.cart-count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 1.15rem; height: 1.15rem;
  padding-inline: var(--space-3xs);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent-text);
  color: var(--color-ink-on-dark);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.cart-count[data-empty="true"] { display: none; }

.nav-toggle { display: none; }

/* ════════════════════════════ FOOTER, Ft5 ═══════════════════════════ */

.site-footer {
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
  padding-block: var(--space-3xl) var(--space-lg);
  margin-top: var(--space-3xl);
}
.footer-statement {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
  margin-bottom: var(--space-2xl);
  overflow-wrap: anywhere;
}
.footer-statement em {
  font-style: normal;                    /* jamais d'italique sur du display */
  color: var(--color-accent);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  border-top: var(--rule-hairline) solid oklch(100% 0 0 / 0.14);
}
.footer-col__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-on-dark);
  margin-bottom: var(--space-sm);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-ink-on-dark-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--color-accent); }
.footer-col a:focus-visible { outline: var(--focus-ring) solid var(--color-accent); outline-offset: var(--focus-gap); }
.footer-col address { font-style: normal; font-size: var(--text-sm); color: var(--color-ink-on-dark-2); line-height: var(--leading-relaxed); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: var(--rule-hairline) solid oklch(100% 0 0 / 0.14);
  font-size: var(--text-xs);
  color: var(--color-ink-on-dark-2);
}
.footer-pay { display: flex; align-items: center; gap: var(--space-2xs); }
.footer-pay svg { flex: none; width: 1rem; height: 1rem; color: var(--color-accent); }

/* ══════════════════════════ WHATSAPP FLOTTANT ════════════════════════
   Canal n°1 au Maroc. Visible en priorité sur mobile. */

.wa-float {
  position: fixed;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: var(--z-drawer);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.wa-float:hover { background: oklch(26% 0.088 268); }
.wa-float:active { transform: translateY(1px); }

/* Sur l'accueil, le bouton n'apparaît qu'une fois le hero dépassé : le hero
   porte déjà son propre « Demander conseil », et deux appels WhatsApp
   superposés se neutralisent.
   L'état masqué est conditionné à `.js-motion` : sans JavaScript, le bouton
   reste visible en permanence plutôt que de disparaître pour toujours. */
.js-motion .wa-float[data-hide-over-hero] {
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.js-motion .wa-float[data-hide-over-hero].is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .wa-float[data-hide-over-hero] { transform: none; }
}
.wa-float:focus-visible { outline: var(--focus-ring) solid var(--color-accent); outline-offset: var(--focus-gap); }
.wa-float__icon {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-ink);
  flex: none;
}
.wa-float__icon svg { width: 1.125rem; height: 1.125rem; }

/* ═══════════════════════════ BANDEAU RÉASSURANCE ═════════════════════ */

.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-md);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  border: var(--rule-hairline) solid var(--color-rule);
  min-width: 0;
}
.trust-item__icon {
  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;
}
.trust-item__icon svg { width: 1.125rem; height: 1.125rem; }
.trust-item__title { font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--space-3xs); }
.trust-item__text  { font-size: var(--text-xs); color: var(--color-ink-2); line-height: var(--leading-normal); }

/* ═══════════════════════════════ FAQ ═════════════════════════════════ */

.faq-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.faq-item {
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.faq-item[open] { border-color: var(--color-rule-strong); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--color-paper-2); }
.faq-item summary:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: calc(var(--focus-gap) * -1); }
.faq-item summary::after {
  content: '';
  width: 0.625rem; height: 0.625rem;
  border-right: var(--rule-medium) solid var(--color-ink-3);
  border-bottom: var(--rule-medium) solid var(--color-ink-3);
  transform: rotate(45deg) translateY(-2px);
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq-item__answer {
  padding: 0 var(--space-lg) var(--space-md);
  color: var(--color-ink-2);
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}

/* ═══════════════════════════ FIL D'ARIANE ════════════════════════════ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  padding-block: var(--space-md);
}
.breadcrumb a { text-decoration: none; color: var(--color-ink-2); white-space: nowrap; }
.breadcrumb a:hover { color: var(--color-accent-text); }
.breadcrumb__sep { color: var(--color-rule-strong); }

/* ══════════════════════════════ NOTICES ══════════════════════════════ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.notice--info    { background: var(--color-paper-2);      color: var(--color-ink-2); }
.notice--success { background: var(--color-success-soft); color: var(--color-success); }
.notice--error   { background: var(--color-danger-soft);  color: var(--color-danger); }
.notice--warning { background: var(--color-warning-soft);  color: var(--color-warning); }

/* ════════════════ Nav responsive, N5 en mode mobile ══════════════════
   Ces règles doivent vivre ICI et pas dans layout.css : components.css est
   chargée après, donc une media query posée là-bas serait écrasée par le
   `.nav-links { display: flex }` déclaré plus haut dans ce fichier. */

@media (max-width: 860px) {
  .nav-links  { display: none; }
  .nav-toggle { display: grid; }
  .nav-pill   { position: relative; }

  .nav-links.is-open {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: calc(100% + var(--space-2xs));
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3xs);
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.is-open a {
    padding: var(--space-sm) var(--space-md);
    white-space: normal;
  }
}

/* ════════════════════ RESPONSIVE, plancher Hallmark ═══════════════════
   Vérifié à 320 / 375 / 414 / 768 px : pas de défilement horizontal, pas de
   libellé cliquable sur deux lignes, cibles tactiles d'au moins 44 px. */

/* ── Nav compacte sous 480 px ──────────────────────────────────────────
   À 320 px, la coque fait 284 px. Le logo (164) plus les trois boutons
   d'icône (142) plus les gouttières dépassaient de 78 px et faisaient
   défiler toute la page horizontalement. On resserre au lieu de masquer :
   les trois actions (menu, recherche, panier) restent accessibles. */
@media (max-width: 30rem) {
  .nav-pill {
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-2xs);
  }
  .nav-brand img,
  .nav-brand svg { height: 1.625rem; }

  .nav-actions { gap: var(--space-3xs); }
  .nav-icon-btn { width: 2.25rem; height: 2.25rem; }
  .nav-icon-btn svg { width: 1rem; height: 1rem; }
}

/* Sous 360 px, la recherche passe dans le menu plutôt que de comprimer
   davantage : trois cibles de 36 px collées sont plus pénibles qu'une de
   moins. Le lien reste dans le DOM pour la navigation clavier. */
@media (max-width: 22.5rem) {
  .nav-actions .nav-icon-btn[href*="?s="] { display: none; }
}

/* ── Cibles tactiles ───────────────────────────────────────────────────
   Sur écran tactile, la zone touchable est étendue par un pseudo-élément
   transparent : la cible atteint 44 px sans que le bouton grossisse
   visuellement, ce qui serait impossible à caser à 320 px. */
@media (pointer: coarse) {
  .btn { min-height: 3rem; }
  .btn--sm { min-height: 2.75rem; }

  .nav-icon-btn::after,
  .hero__social a::after,
  .gallery__thumb::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
  }
  .hero__social a,
  .gallery__thumb { position: relative; }

  .qty button { width: 3rem; }
}

/* ── Survol réservé aux dispositifs qui survolent ──────────────────────
   Sur tactile, un effet de survol reste « collé » après le tap : l'image
   zoomée ne redescend qu'au tap suivant, ailleurs. */
@media (hover: none) {
  .product-card:hover .product-card__media img,
  .cat-card:hover img,
  .post-card:hover .post-card__media img { transform: none; }
}

/* ════════════════════════ VERRE, réglages fins ════════════════════════
   Les commandes (boutons, icônes de nav) utilisent la variante la plus
   opaque : leur libellé est de l'encre foncée et doit rester lisible quelle
   que soit la photo derrière. Les surfaces décoratives peuvent descendre
   plus bas puisqu'elles ne portent pas de texte critique. */

.btn--on-photo,
.nav-icon-btn {
  --btn-bg: var(--glass-bg-strong);
  background: var(--glass-bg-strong);
}

/* Le liseré de réfraction, sur toutes les surfaces vitrées. */
.glass,
.btn--on-photo,
.nav-icon-btn,
.hero__slider-peek {
  box-shadow: var(--glass-shadow);
}

.site-header--solid { box-shadow: var(--glass-shadow-soft); }

/* Les pastilles sombres posées sur photo suivent la même logique. */
.glass--dark { box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.22), 0 8px 30px oklch(20% 0.06 268 / 0.28); }

/* Les puces sociales du hero rejoignent le système plutôt que de garder
   leur propre blanc translucide. */
.hero__social a {
  background: oklch(100% 0 0 / 0.14);
  border-color: oklch(100% 0 0 / 0.34);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.30);
}
@supports (backdrop-filter: blur(1px)) {
  .hero__social a { backdrop-filter: blur(12px) saturate(var(--glass-saturate)); }
}
.hero__social a:hover { background: oklch(100% 0 0 / 0.28); }


/* ═══════════ NAV : FOND TOTALEMENT TRANSPARENT ═══════════════════════
   Ni fond, ni flou, ni ombre, ni liseré.
   Le `backdrop-filter` ne colore pas : il reprend ce qu'il y a dessous.
   Au-dessus de pages en papier clair, il PRODUIT donc exactement le blanc
   flouté qu'on cherchait à supprimer. Le retirer est le seul moyen d'avoir
   une barre réellement transparente.
   Ce qui porte la lisibilité, ce sont les éléments eux-mêmes : la pilule de
   liens est encrée, les boutons d'icône sont vitrés, le logo porte une ombre
   portée pour survivre au-dessus de n'importe quel contenu. */
.site-header,
.site-header.is-stuck,
.site-header--solid {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 0;
}

/* Le logo est le seul élément nu de la barre : sans fond derrière lui, il
   doit tenir seul au-dessus d'un texte qui défile. */
.nav-brand img,
.nav-brand svg {
  filter: drop-shadow(0 1px 2px oklch(20% 0.04 268 / 0.28));
}

/* ── Liste cochée dessinée en CSS ──────────────────────────────────────
   Variante utilisée dans les contenus éditoriaux, qui passent par
   wp_kses_post() : une icône SVG inline y serait supprimée, la liste
   blanche de WordPress ne l'autorise pas. La coche est donc un
   pseudo-élément, deux traits pivotés. */
.check-list--css { list-style: none; padding-left: 0; }
.check-list--css li {
  position: relative;
  display: block;
  padding-left: 1.75rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.check-list--css li + li { margin-top: var(--space-2xs); }
.check-list--css li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.5em;
  width: 0.4rem;
  height: 0.7rem;
  border-right: 2px solid var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-text);
  transform: rotate(45deg) translate(-1px, -2px);
}
.guide__item--ink .check-list--css li::before { border-color: var(--color-accent); }

/* Bouton à icône seule : carré arrondi, 44 px de cible tactile. Le libellé
   vit dans l'aria-label, l'œil lit l'icône. */
.btn--icon {
  min-height: 2.75rem;
  width: 2.75rem;
  padding: 0;
  flex: none;
}
.btn--icon > svg { width: 1.25rem; height: 1.25rem; }
/* Pendant l'ajout AJAX, le spinner remplace l'icône, pas le texte. */
.btn--icon[data-state="loading"] > svg { opacity: 0; }

/* « Acheter maintenant » sur la fiche : sous le bouton panier, pleine
   largeur, l'accent vert que la charte réserve à l'action décisive. */
.woocommerce .product form.cart .buy-now {
  flex: 1 1 100%;
  min-height: 3.25rem;
  font-size: var(--text-base);
}

/* WooCommerce injecte un lien « Voir le panier » après chaque ajout AJAX.
   Le compteur de la nav rend déjà ce service ; dans le pied de carte, le
   lien cassait l'alignement des deux boutons. */
.product-card__cta .added_to_cart { display: none; }

/* ── Chips des pages puissance, sous l'intro de catégorie ────────────── */
.power-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}
.power-links__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-3);
  margin-right: var(--space-3xs);
}
.power-links__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-sm);
  border: var(--rule-hairline) solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.power-links__chip svg { width: 0.875rem; height: 0.875rem; color: var(--color-accent-text); }
.power-links__chip:hover { background: var(--color-paper-2); border-color: var(--color-ink); }
.power-links__chip:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }