/* ==========================================================================
   HORUS — Composants UI
   Squelettes CSS correspondant aux 10 composants du design system (prompt 01).
   Le balisage PHP est livré à l'étape 06 (moteur de vues).
   ========================================================================== */

/* ── Button ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-paper);
  --btn-border: transparent;
  position: relative;  /* Ancre pour le spinner ::after de .is-loading (Phase G) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  cursor: pointer;
  user-select: none;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Verrou : quand .btn est posé sur un <a>, les règles globales
   a:hover { color: var(--color-accent) } de base.css prennent le pas
   (spécificité 0,1,1 > 0,1,0) et rendent le texte bronze-sur-bronze invisible.
   On re-affirme color + text-decoration sur tous les états. */
.btn, .btn:hover, .btn:focus, .btn:active, .btn:visited {
  color: var(--btn-fg);
  text-decoration: none;
}

.btn--primary   { --btn-bg: var(--color-ink);    --btn-fg: var(--color-paper); }
.btn--secondary { --btn-bg: var(--color-paper);  --btn-fg: var(--color-ink); --btn-border: var(--color-ink); }
.btn--accent    { --btn-bg: var(--color-bronze); --btn-fg: var(--color-ink); }
.btn--ghost     { --btn-bg: transparent;          --btn-fg: var(--color-fg); --btn-border: var(--color-border); }
.btn--link      { --btn-bg: transparent;          --btn-fg: var(--color-accent); padding: 0; border: 0; text-decoration: underline; text-underline-offset: .25em; }

/* Overrides dark warm (Phase H) :
   - primary : ring bronze subtil pour définir la forme sur bg warm (ink ≈ bg warm)
   - secondary : paper sur bg warm fait spot violent → bascule en outline fg
   - .back-to-top hérite du même override primary. */
@media (prefers-color-scheme: dark) {
  .btn--primary {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-bronze) 28%, transparent);
  }
  .btn--primary:hover:not(:disabled) {
    box-shadow: var(--shadow-md),
                inset 0 0 0 1px color-mix(in oklab, var(--color-bronze) 40%, transparent);
  }
  .btn--secondary {
    --btn-bg: transparent;
    --btn-fg: var(--color-fg);
    --btn-border: var(--color-fg);
  }
}

.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); }
.btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--fs-base); }

/* ── Badge ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  border-radius: var(--radius-sm);
  letter-spacing: .02em;
  text-transform: uppercase;
}
/* Badges — convention Phase D :
   NEW/INFO   → lapis (froid, signal d'information)
   SALE/PROMO → oxide (chaud, urgence éditoriale)
   Jamais les deux sur le même composant / même card (cf. design-system.md) */
.badge--new         { background: var(--color-lapis);     color: var(--color-paper); }
.badge--sale        { background: var(--color-oxide);     color: var(--color-paper); }
.badge--stock-low   { background: var(--color-warning);   color: var(--color-paper); animation: badge-pulse 2.4s ease-in-out infinite; }
.badge--outofstock  { background: var(--color-border);    color: var(--color-muted); }
.badge--bestseller  { background: var(--color-ink);       color: var(--color-bronze); border: 1px solid var(--color-bronze); }

/* Dark warm override : bestseller badge (ink ≈ bg warm dark), passe en bg transparent */
@media (prefers-color-scheme: dark) {
  .badge--bestseller { background: transparent; }
}

/* Pulse subtile pour le badge stock-low (signal d'urgence, cf. Phase F).
   Transform + opacity composited, composition légère même sur mobile. */
@keyframes badge-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.05); opacity: .88; }
}
@media (prefers-reduced-motion: reduce) {
  .badge--stock-low { animation: none; }
}

/* ── Card product ──────────────────────────────────────────────────── */
.card-product {
  position: relative;   /* Ancre pour le wishlist heart absolute (Phase F) */
  display: grid;
  gap: var(--s-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-product:hover { transform: translateY(-2px) scale(1.005); box-shadow: var(--shadow-cinematic); }
.card-product__media {
  aspect-ratio: 4 / 5;
  background: var(--color-sand);
  position: relative;
  overflow: hidden;
}
.card-product__media img,
.card-product__media picture {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.card-product:hover .card-product__media img,
.card-product:hover .card-product__media picture { transform: scale(1.06); }

/* Image swap hover (2e image) — si .card-product__img--hover existe, elle fade-in
   au hover pendant que la primary fade-out. Si pas de hover image, le zoom seul s'applique. */
.card-product__img {
  position: absolute;
  inset: 0;
  display: block;
}
.card-product__img img,
.card-product__img picture {
  width: 100%; height: 100%; object-fit: cover;
}
.card-product__img--primary { opacity: 1; z-index: 1; }
.card-product__img--hover   { opacity: 0; z-index: 2; }
.card-product:hover .card-product__img--primary { opacity: 0; }
.card-product:hover .card-product__img--hover   { opacity: 1; }
@media (hover: none) {
  .card-product__img--hover { display: none; }
}
.card-product__badges { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); z-index: 2; }

/* ── Profil sensoriel (Saveur + Caractère) ──────────────────────────────
   Pill compact bottom-left de l'image card. Ne masque pas l'illustration
   grâce à backdrop-filter blur + bg semi-transparent. Format sm (cards)
   ou lg (fiche produit show — affichage textué).

   Sémantique :
   - Saveur (5 gouttes) → arôme/odeur, couleur bronze chaud
   - Caractère (5 barres équalizer croissantes) → intensité globale,
     gradient bronze→oxide selon score (data-strength) pour communiquer
     la montée en puissance par la couleur sans label.

   Légal CBD : pas de mot "puissance"/"effet" dans le label. */
.product-profile {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 7px;
  background: color-mix(in oklab, var(--color-paper) 78%, transparent);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in oklab, var(--color-fg) 8%, transparent);
  pointer-events: none; /* Le tooltip natif passe quand même via title */
}
.product-profile__row {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.product-profile__icon {
  flex-shrink: 0;
  opacity: 0.85;
}
.product-profile__row--flavor   .product-profile__icon { color: var(--color-bronze); }
.product-profile__row--strength .product-profile__icon { color: var(--color-oxide); }

.product-profile__dots,
.product-profile__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

/* Gouttes — saveur */
.product-profile__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-fg) 14%, transparent);
  transition: background var(--dur-fast, 180ms) var(--ease-out, ease);
}
.product-profile__dot.is-on {
  background: var(--color-bronze);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-bronze) 40%, transparent);
}

/* Barres équalizer — caractère (hauteurs croissantes 1→5) */
.product-profile__bar {
  width: 3px;
  background: color-mix(in oklab, var(--color-fg) 14%, transparent);
  border-radius: 1px;
  transition: background var(--dur-fast, 180ms) var(--ease-out, ease);
}
.product-profile__bar--1 { height: 3px; }
.product-profile__bar--2 { height: 5px; }
.product-profile__bar--3 { height: 7px; }
.product-profile__bar--4 { height: 9px; }
.product-profile__bar--5 { height: 11px; }

/* Couleur dynamique selon le score de strength : doux → intense.
   Communique l'intensité par la couleur, sans mot ni texte. */
.product-profile[data-strength="1"] .product-profile__bar.is-on { background: color-mix(in oklab, var(--color-bronze) 60%, var(--color-success) 40%); }
.product-profile[data-strength="2"] .product-profile__bar.is-on { background: var(--color-bronze); }
.product-profile[data-strength="3"] .product-profile__bar.is-on { background: color-mix(in oklab, var(--color-bronze) 60%, var(--color-oxide) 40%); }
.product-profile[data-strength="4"] .product-profile__bar.is-on { background: color-mix(in oklab, var(--color-oxide) 70%, var(--color-bronze) 30%); }
.product-profile[data-strength="5"] .product-profile__bar.is-on { background: var(--color-oxide); box-shadow: 0 0 4px color-mix(in oklab, var(--color-oxide) 60%, transparent); }

/* Variante lg — fiche produit show, plus grand, avec labels textuels */
.product-profile--lg {
  position: static;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  pointer-events: auto;
  background: color-mix(in oklab, var(--color-bg-elevated) 92%, transparent);
}
.product-profile--lg .product-profile__row { gap: 10px; }
.product-profile--lg .product-profile__icon { width: 18px; height: 18px; }
.product-profile--lg .product-profile__dots,
.product-profile--lg .product-profile__bars {
  height: 18px; gap: 4px;
}
.product-profile--lg .product-profile__dot { width: 10px; height: 10px; }
.product-profile--lg .product-profile__bar { width: 5px; border-radius: 2px; }
.product-profile--lg .product-profile__bar--1 { height: 5px; }
.product-profile--lg .product-profile__bar--2 { height: 8px; }
.product-profile--lg .product-profile__bar--3 { height: 11px; }
.product-profile--lg .product-profile__bar--4 { height: 14px; }
.product-profile--lg .product-profile__bar--5 { height: 18px; }
.product-profile__label {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-left: 8px;
}
.product-profile__label strong {
  color: var(--color-fg);
  font-weight: var(--fw-semi);
}

@media (prefers-reduced-motion: reduce) {
  .product-profile__dot, .product-profile__bar { transition: none; }
}

/* Mobile : on déplace le badge à cheval entre l'image et la zone blanche
   du body, pour qu'il ne masque plus le sujet de l'illustration.
   Le débord est rendu possible en désactivant overflow: hidden sur le
   media en mobile — sans danger car .card-product__img--hover est masqué
   en mobile (cf @media (hover: none)) et les images ne débordent jamais
   d'elles-mêmes. */
@media (max-width: 640px) {
  /* Libérer overflow sur le media uniquement : le badge déborde dans la
     zone body, mais la card globale (qui porte border-radius) reste clip
     pour ne pas casser les coins arrondis. */
  .card-product__media { overflow: visible; }

  .product-profile--sm {
    /* Sort partiellement de l'image, pose son centre sur la limite */
    bottom: -12px;
    left: 8px;
    padding: 4px 6px;
    gap: 2px;
    /* Fond plus opaque + bordure visible : le badge est maintenant aussi
       partiellement sur la zone blanche, il doit rester un objet "posé". */
    background: var(--color-paper);
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.10),
      0 0 0 1px color-mix(in oklab, var(--color-fg) 10%, transparent);
    z-index: 3;
  }
  .product-profile--sm .product-profile__icon { width: 11px; height: 11px; }
  .product-profile--sm .product-profile__row { gap: 4px; }
  .product-profile--sm .product-profile__dots,
  .product-profile--sm .product-profile__bars { gap: 2px; height: 10px; }
  .product-profile--sm .product-profile__dot { width: 5px; height: 5px; }
  .product-profile--sm .product-profile__bar { width: 2.5px; }
  .product-profile--sm .product-profile__bar--1 { height: 3px; }
  .product-profile--sm .product-profile__bar--2 { height: 4.5px; }
  .product-profile--sm .product-profile__bar--3 { height: 6px; }
  .product-profile--sm .product-profile__bar--4 { height: 8px; }
  .product-profile--sm .product-profile__bar--5 { height: 10px; }
}

/* ── Admin profil sensoriel — radio group 1-5 stylé ───────────────────── */
.profile-radio-group {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}
.profile-radio { position: relative; cursor: pointer; }
.profile-radio input[type="radio"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%;
}
.profile-radio__face {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 1rem;
  color: var(--color-muted);
  transition: all var(--dur-fast, 180ms) var(--ease-out, ease);
}
.profile-radio:hover .profile-radio__face { border-color: var(--color-bronze); color: var(--color-fg); }
.profile-radio input[type="radio"]:checked ~ .profile-radio__face {
  background: var(--color-bronze);
  border-color: var(--color-bronze);
  color: var(--color-paper);
  box-shadow: 0 2px 6px color-mix(in oklab, var(--color-bronze) 35%, transparent);
}
.profile-radio input[type="radio"]:focus-visible ~ .profile-radio__face {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 30%, transparent);
}
.card-product__body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); }
.card-product__name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.card-product__price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.card-product__price { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.card-product__price-current { font-weight: var(--fw-semi); }
.card-product__price-compare { text-decoration: line-through; color: var(--color-muted); font-size: var(--fs-sm); }

/* ── Phase F — Narrative : quick-view overlay + wishlist heart ────────
   Zéro JS. Le quick-view est un indicateur visuel dans l'anchor existant
   (pas un bouton imbriqué — HTML invalide et a11y-foireux). Le wishlist
   est un label + checkbox-hack hors de l'anchor (position absolute).
   Persistance de l'état wishlist : non implémentée en V1 (reset au reload),
   chantier V1.1 avec localStorage ou session côté serveur. */

.card-product__quickview {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: linear-gradient(to top, rgba(11, 11, 12, .88) 0%, rgba(11, 11, 12, 0) 100%);
  color: var(--color-paper);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  pointer-events: none;  /* Ne vole jamais le click à l'anchor parent */
  z-index: 2;
}
.card-product:hover .card-product__quickview,
.card-product:focus-within .card-product__quickview {
  opacity: 1;
  transform: translateY(0);
}

.card-product__wishlist {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 3;  /* Au-dessus de quickview + badges */
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-bg-elevated) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  color: var(--color-fg);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.card-product__wishlist:hover {
  background: var(--color-bg-elevated);
  transform: scale(1.08);
}
.card-product__wishlist .wishlist-heart {
  transition: fill var(--dur-fast) var(--ease-out),
              stroke var(--dur-fast) var(--ease-out);
}
/* Cheked state : cœur plein oxide + petit pop. Sibling selector (~) depuis
   l'input checkbox sr-only vers le SVG. */
.card-product__wishlist input:checked ~ .wishlist-heart {
  fill: var(--color-oxide);
  stroke: var(--color-oxide);
  animation: heart-pop 500ms var(--ease-out);
}
@keyframes heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .card-product__media img,
  .card-product__quickview,
  .card-product__wishlist,
  .card-product__wishlist input:checked ~ .wishlist-heart {
    transition: none !important;
    animation: none !important;
  }
  .card-product:hover .card-product__media img { transform: none; }
  .card-product__wishlist:hover { transform: none; }
}

/* ── Card article ──────────────────────────────────────────────────── */
.card-article {
  display: grid;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
}
.card-article__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-sand);
}
.card-article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card-article:hover .card-article__media img { transform: scale(1.03); }
.card-article__meta { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .1em; }
.card-article__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
.card-article__excerpt { color: var(--color-muted); }

/* ── Breadcrumb ────────────────────────────────────────────────────── */
.breadcrumb { font-size: var(--fs-sm); color: var(--color-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s-2); color: var(--color-border); }
.breadcrumb a { text-decoration: none; color: inherit; }
.breadcrumb a:hover { color: var(--color-fg); }
.breadcrumb [aria-current="page"] { color: var(--color-fg); }

/* ── Form fields (input / textarea / select) ───────────────────────── */
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field > .help { font-size: var(--fs-xs); color: var(--color-muted); }
.field > .error { font-size: var(--fs-xs); color: var(--color-danger); }

.input, .textarea, .select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 25%, transparent);
}
.input:user-invalid, .textarea:user-invalid, .select:user-invalid {
  border-color: var(--color-danger);
  animation: field-shake 220ms ease-out;
}
.textarea { min-height: 8rem; resize: vertical; }

/* ── Field toggle (on/off) — settings admin ──────────────────────────── */
.field--toggle { cursor: pointer; user-select: none; }
.field--toggle .field__toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.field--toggle .field__toggle-label {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.field--toggle .field__toggle-switch { position: relative; flex-shrink: 0; }
.field--toggle .field__toggle-switch input[type="checkbox"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0;
}
.field--toggle .field__toggle-track {
  display: inline-block; width: 44px; height: 24px;
  background: color-mix(in oklab, var(--color-fg) 18%, transparent);
  border-radius: 999px; position: relative;
  transition: background var(--dur-fast) var(--ease-out);
}
.field--toggle .field__toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: var(--color-bg-elevated); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.field--toggle .field__toggle-switch input[type="checkbox"]:checked ~ .field__toggle-track {
  background: var(--color-accent);
}
.field--toggle .field__toggle-switch input[type="checkbox"]:checked ~ .field__toggle-track .field__toggle-thumb {
  transform: translateX(20px);
}
.field--toggle .field__toggle-switch input[type="checkbox"]:focus-visible ~ .field__toggle-track {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 30%, transparent);
}

/* ── Phase G — Forms délicieux ────────────────────────────────────────
   1. Floating labels : trick :placeholder-shown (l'input DOIT avoir
      placeholder=" " pour que la pseudo-class fonctionne quand il est vide).
   2. Validation native :user-invalid (déclenchée post-interaction) +
      shake subtil ; :user-valid + checkmark SVG draw-on via stroke-dashoffset.
   3. Submit loading : classe .is-loading posée par ui.js au submit,
      masque le texte et révèle un spinner ::after. ──────────────────── */

.field--floating {
  position: relative;
}
.field--floating > .input,
.field--floating > .textarea {
  padding-top: calc(var(--s-5) + var(--s-1));
  padding-bottom: var(--s-2);
}
.field--floating > label {
  position: absolute;
  top: calc(var(--s-3) + var(--s-1) / 2);
  left: var(--s-4);
  font-size: var(--fs-base);
  color: var(--color-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 160ms var(--ease-out), color 160ms var(--ease-out);
}
.field--floating > .input:focus ~ label,
.field--floating > .textarea:focus ~ label,
.field--floating > .input:not(:placeholder-shown) ~ label,
.field--floating > .textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-14px) scale(0.78);
  color: var(--color-accent);
}

/* Shake au :user-invalid (transform ≈ composited, 220ms, discret) */
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* Checkmark draw-on visible quand le field contient un input :user-valid.
   :has() évite un sibling selector qui ne franchit pas le <label>. */
.field__check {
  position: absolute;
  top: 50%;
  right: var(--s-4);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0;
  color: var(--color-success);
  pointer-events: none;
  transition: opacity 160ms var(--ease-out);
}
.field__check path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 400ms var(--ease-out);
}
.field--floating:has(> .input:user-valid) .field__check,
.field--floating:has(> .textarea:user-valid) .field__check {
  opacity: 1;
}
.field--floating:has(> .input:user-valid) .field__check path,
.field--floating:has(> .textarea:user-valid) .field__check path {
  stroke-dashoffset: 0;
}

/* Submit loading : .is-loading toggled par ui.js au submit d'un form valide.
   Texte masqué (color: transparent), spinner ::after révélé, clics bloqués. */
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  cursor: wait;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  /* Le spinner utilise --btn-fg (pas currentColor qui serait transparent). */
  border: 2px solid var(--btn-fg);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .field--floating > label,
  .field__check,
  .field__check path { transition: none !important; }
  .input:user-invalid,
  .textarea:user-invalid,
  .select:user-invalid { animation: none !important; }
  .btn.is-loading::after { animation: none !important; }
}

/* ── Flash ─────────────────────────────────────────────────────────── */
.flashes {
  padding-top: var(--s-3);
  display: grid; gap: var(--s-2);
}
.flash {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-border);
  background: var(--color-bg-elevated);
  font-size: var(--fs-sm);
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  /* Animation d'apparition */
  animation: flash-slide-in 280ms var(--ease-out, ease) both;
}
.flash.is-hiding {
  animation: flash-slide-out 320ms var(--ease-out, ease) both;
  pointer-events: none;
}
.flash__icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  font-size: 1rem;
  border-radius: 50%;
  font-weight: var(--fw-semi);
  margin-top: 1px;
}
.flash__message { flex: 1; min-width: 0; }
.flash__close {
  flex-shrink: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  color: var(--color-muted);
  padding: 0 6px; margin: -4px -6px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast, 180ms) var(--ease-out, ease),
              color var(--dur-fast, 180ms) var(--ease-out, ease);
}
.flash__close:hover { background: color-mix(in oklab, var(--color-fg) 8%, transparent); color: var(--color-fg); }

.flash--success {
  border-left-color: var(--color-success);
  background: color-mix(in oklab, var(--color-success) 8%, var(--color-bg-elevated));
}
.flash--success .flash__icon { background: var(--color-success); color: white; }

.flash--warning {
  border-left-color: var(--color-warning);
  background: color-mix(in oklab, var(--color-warning) 8%, var(--color-bg-elevated));
}
.flash--warning .flash__icon { background: var(--color-warning); color: white; }

.flash--error {
  border-left-color: var(--color-danger);
  background: color-mix(in oklab, var(--color-danger) 8%, var(--color-bg-elevated));
}
.flash--error .flash__icon { background: var(--color-danger); color: white; }

.flash--info {
  border-left-color: var(--color-info);
  background: color-mix(in oklab, var(--color-info) 6%, var(--color-bg-elevated));
}
.flash--info .flash__icon { background: var(--color-info); color: white; }

.flash--urgent {
  border-left-color: var(--color-urgent);
  background: color-mix(in oklab, var(--color-oxide) 6%, var(--color-bg-elevated));
}
.flash--urgent .flash__icon { background: var(--color-urgent); color: white; }

@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flash-slide-out {
  from { opacity: 1; transform: translateY(0); max-height: 200px; padding-top: var(--s-3); padding-bottom: var(--s-3); }
  to   { opacity: 0; transform: translateY(-8px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .flash.is-hiding { animation: none; opacity: 0; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
/* Le hero empile 4 couches (bas → haut) :
     1. fond solide encre (safety net si image ne charge pas)
     2. .hero__media = image (background-size: cover), pleine opacité
     3. ::before = voile vertical (lisibilité titre, sobre)
     4. ::after  = overlay gradient duotone (cool par défaut, warm variant), 50% max
*/
.hero {
  position: relative;
  min-height: 38vh;            /* refonte UX/CRO 2026-04-25 v2 : produits visibles dans le fold desktop */
  display: grid;
  align-items: end;
  padding: var(--s-5) 0 var(--s-5);
  color: var(--color-paper);
  background: var(--color-ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__title { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; max-width: 22ch; padding-bottom: .14em; }
.hero__lede  { font-size: var(--fs-base); max-width: 52ch; margin-top: var(--s-3); }
.hero__cta   { margin-top: var(--s-4); }

@media (max-width: 768px) {
  /* Hero mobile minimaliste — la nav primaire (chips bar + mega-menu burger)
     suffit à orienter l'utilisateur vers les produits. Le hero ne sert qu'à
     poser l'identité de marque en 1 phrase. */
  .hero { min-height: 22vh; padding: var(--s-3) 0 var(--s-3); }
  .hero__title { font-size: clamp(1.3rem, 5.4vw, 1.65rem); max-width: none; line-height: 1.12; padding-bottom: 0; }
  .hero__lede  {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 8px;
    color: color-mix(in oklab, var(--color-paper) 88%, transparent);
    max-width: 36ch;
  }
  .hero .hero__cta { display: none !important; }   /* CTA hero supprimé mobile : redondant avec chips + burger */
  .hero__scroll-indicator { display: none; }
  /* Réduction de la poussière dorée (perf + visuel propre) */
  .horus-dust__particle { display: none; }
  .horus-dust__particle:nth-child(-n+8) { display: block; }
}
.hero__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-hero-veil);
  pointer-events: none;
  z-index: 1;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-hero-cool);
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
.hero--warm::after { background: var(--gradient-hero-warm); opacity: .45; }
.hero__content { position: relative; z-index: 3; }
.hero__title { letter-spacing: -.02em; }   /* font-size + line-height + max-width gérés plus haut (mobile + desktop) */
.hero__cta   { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ── Hero cinématique (Phase B) ───────────────────────────────────────
   5 éléments orchestrés : parallax image, overlay qui respire, titre
   stagger par mot, CTA magnetic-lite, scroll indicator. Tout en CSS pur.
   prefers-reduced-motion désactive tout (bloc dédié en bas).
   ──────────────────────────────────────────────────────────────── */

/* 1. Parallax image — scroll-driven, progressive enhancement.
      Sur navigateurs sans animation-timeline (Safari/FF stable),
      l'image reste simplement statique. Pas de fallback JS. */
@supports (animation-timeline: view()) {
  .hero__media {
    animation: hero-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }
}
@keyframes hero-parallax {
  from { transform: translateY(-4%) scale(1.08); }
  to   { transform: translateY(4%)  scale(1.08); }
}

/* 2. Overlay qui respire — shift subtil du gradient (8s ease-in-out).
      background-size: 200% → la position se déplace sans changer la teinte. */
.hero::after {
  background-size: 200% 200%;
  animation: hero-breath 8s ease-in-out infinite;
}
@keyframes hero-breath {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* 3. Titre stagger par mot — fade + blur, opacity uniquement pour préserver
      le gradient text continu sur le h1 (spans restent inline).
      L'ordre des mots est donné via --i sur chaque span. */
.hero__title-word {
  animation: hero-word-in 700ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
@keyframes hero-word-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0);   }
}

/* Lede et CTA : délai après le titre pour une orchestration posée. */
.hero__lede { animation: hero-fade-up 700ms var(--ease-out) 700ms both; }
.hero__cta  { animation: hero-fade-up 700ms var(--ease-out) 900ms both; }
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4. CTA magnetic-lite (CSS pur) — amplifie le hover standard avec un
      translate + scale + shadow plus marqués. Pas de JS : le gain visuel
      d'un vrai effet magnétique ne justifie pas le poids en Phase B. */
.btn--magnetic {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.btn--magnetic:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-cinematic);
}
.btn--magnetic:active:not(:disabled) { transform: translateY(-1px) scale(1.01); }

/* 5. Scroll indicator — chevron currentColor qui bounce. */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--color-paper);
  pointer-events: none;
  opacity: 0;
  animation: hero-fade-in 600ms var(--ease-out) 1400ms both;
}
.hero__scroll-indicator svg {
  display: block;
  animation: chevron-bounce 2.2s ease-in-out infinite;
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: .75; }
}
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(-2px); opacity: .55; }
  50%      { transform: translateY(6px);  opacity: 1;   }
}

/* Respect strict de prefers-reduced-motion pour TOUTE l'orchestration hero.
   Le reset global couvre la durée ; ici on désactive aussi animation-timeline
   (qui n'est pas une animation-duration), et on fixe des états finaux lisibles. */
@media (prefers-reduced-motion: reduce) {
  .hero__media          { animation: none !important; transform: none !important; }
  .hero::after          { animation: none !important; background-size: 100% 100%; }
  .hero__title-word,
  .hero__lede,
  .hero__cta            { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__scroll-indicator        { animation: none !important; opacity: .75; }
  .hero__scroll-indicator svg    { animation: none !important; transform: none !important; }
}

/* ── Section split (image + texte) ─────────────────────────────────── */
.section-split__media img { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; object-fit: cover; }
.section-split__content   { display: grid; gap: var(--s-4); }

/* ── Section divider (Phase C) — ligne fine fade + emblème Œil d'Horus ─── */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-6);
  color: var(--color-bronze);
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border) 50%, transparent);
}
/* Emblème Œil d'Horus — PNG canonique utilisé en mask-image pour hériter
   de currentColor (ici bronze via .section-divider). Plus fidèle qu'un SVG
   line-art tracé main, et re-colorisable. Ratio natif du PNG ~1.25:1. */
.section-divider__emblem {
  flex-shrink: 0;
  display: inline-block;
  width: 80px;
  height: 64px;
  opacity: .75;
  background-color: currentColor;
  -webkit-mask-image: url("/assets/img/eye-of-horus.png");
          mask-image: url("/assets/img/eye-of-horus.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

/* ── Icône de catégorie (Phase C) — cercle sobre au-dessus du titre ─── */
.category-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-bronze) 12%, transparent);
  color: var(--color-bronze);
  margin: 0 auto var(--s-3);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.category-card:hover .category-card__icon {
  transform: scale(1.08) rotate(-3deg);
  background: color-mix(in oklab, var(--color-bronze) 20%, transparent);
}

/* ── Motifs décoratifs (Phase C) — mask-image pour hériter de currentColor ─
   Application via `.pattern-*` sur une section ; le motif prend la couleur
   du parent (color: ...) à 8% d'opacité. Mask-size contrôle la densité.
   ────────────────────────────────────────────────────────────────── */
.pattern-botanical,
.pattern-art-deco,
.pattern-eye-horus {
  position: relative;
  isolation: isolate;
}
.pattern-botanical::before,
.pattern-art-deco::before,
.pattern-eye-horus::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: .06;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}
.pattern-botanical::before {
  -webkit-mask-image: url("/assets/img/patterns/botanical.svg");
          mask-image: url("/assets/img/patterns/botanical.svg");
  -webkit-mask-size: 140px 140px;
          mask-size: 140px 140px;
}
.pattern-art-deco::before {
  -webkit-mask-image: url("/assets/img/patterns/art-deco.svg");
          mask-image: url("/assets/img/patterns/art-deco.svg");
  -webkit-mask-size: 80px 80px;
          mask-size: 80px 80px;
}
/* Pattern Œil d'Horus — PNG canonique utilisé en mask, taille généreuse
   pour préserver la silhouette lisible dans la répétition. */
.pattern-eye-horus::before {
  -webkit-mask-image: url("/assets/img/eye-of-horus.png");
          mask-image: url("/assets/img/eye-of-horus.png");
  -webkit-mask-size: 120px auto;
          mask-size: 120px auto;
}

/* ── Motion design d'entrée (Phase E) — scroll-driven reveals CSS pur ───
   Les éléments apparaissent selon leur progression d'entrée dans le viewport.
   Progressive enhancement via @supports : navigateurs sans animation-timeline
   (ex: Safari stable) → affichage immédiat sans animation, zéro flicker, pas
   d'intersection observer, pas de polyfill JS.
   ────────────────────────────────────────────────────────────────── */
@supports (animation-timeline: view()) {
  /* 1. Reveal générique (titres de section, ledes, blocs éditoriaux).
        Opt-in via la classe .reveal-up dans le markup. */
  .reveal-up {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }

  /* 2. Cards (produit, article, catégorie) — auto.
        On anime la PROPRIÉTÉ scale, pas transform, pour se composer sans
        conflit avec le transform: translateY + scale du :hover. */
  .card-product,
  .card-article,
  .category-card {
    animation: reveal-card linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 15%;
  }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-card {
  from { opacity: 0; scale: 0.98; }
  to   { opacity: 1; scale: 1; }
}

/* Respect strict de prefers-reduced-motion.
   Le reset global couvre animation-duration mais pas animation-timeline ;
   on neutralise explicitement et on fige les états finaux lisibles. */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .card-product,
  .card-article,
  .category-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    scale: 1 !important;
  }
}

/* ── Back to top — bouton flottant bottom-right ──────────────────────
   Par défaut : visible (fallback pour navigateurs sans animation-timeline:scroll()).
   Sur navigateurs modernes (Chrome 115+, FF 137+) : apparaît progressivement
   au scroll au-delà de 400px via animation-timeline: scroll().
   Le lien pointe vers #top posé sur .site-header ; scroll-behavior smooth (cf. base.css). */
.back-to-top {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-5);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  box-shadow: var(--shadow-cinematic);
  z-index: var(--z-sticky);
  /* États invisible/visible contrôlés par .is-visible, toggled par un script
     inline de 4 lignes dans public.php (scrollY > 400). Choix vanilla plutôt
     qu'animation-timeline:scroll() pour couvrir Firefox (où scroll() est
     derrière flag dans beaucoup de versions) et Safari uniformément. */
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              translate var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.back-to-top.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-2px);
  background: var(--color-bronze);
  color: var(--color-ink);
}
/* Dark warm : même problème que .btn--primary, ring bronze pour délimiter */
@media (prefers-color-scheme: dark) {
  .back-to-top {
    box-shadow: var(--shadow-cinematic),
                inset 0 0 0 1px color-mix(in oklab, var(--color-bronze) 28%, transparent);
  }
}
.back-to-top,
.back-to-top:hover,
.back-to-top:focus,
.back-to-top:active { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none !important; }
}

/* ── Admin tabs génériques (utilisables sur SEO, Paramètres, etc.) ──
   Pattern HTML :
     <nav class="admin-tabs" role="tablist" data-admin-tabs>
       <button class="admin-tab" role="tab" aria-selected="true"  data-admin-tab="a">A</button>
       <button class="admin-tab" role="tab" aria-selected="false" data-admin-tab="b">B</button>
     </nav>
     <section class="admin-panel" data-admin-panel="a" role="tabpanel">…</section>
     <section class="admin-panel" data-admin-panel="b" role="tabpanel" hidden>…</section>
*/
.admin-tabs {
  display: flex;
  gap: var(--s-1);
  margin-bottom: var(--s-5);
  padding-bottom: 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  overflow-x: auto;
}
.admin-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  top: 1px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.admin-tab:hover { color: var(--color-fg); background: color-mix(in oklab, var(--color-border) 30%, transparent); }
.admin-tab[aria-selected="true"] {
  color: var(--color-fg);
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  border-bottom-color: var(--color-bg-elevated);
  font-weight: var(--fw-semi);
}
.admin-panel { animation: admin-panel-in 200ms var(--ease-out); }
@keyframes admin-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-panel { animation: none; }
}
/* Heading de sous-section dans un panel (ex : "🇫🇷 Français" / "🇬🇧 English"
   dans l'onglet Contenu). Léger, non concurrent des h1/h2 de la page admin. */
.admin-panel__heading {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: -.005em;
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
}
/* Badge "N erreurs" sur un onglet quand la validation échoue */
.admin-tab__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--color-paper);
  background: var(--color-danger);
  border-radius: 999px;
}

/* ── Admin tables (tri cliquable + recherche live) ────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.admin-table thead {
  background: color-mix(in oklab, var(--color-border) 40%, transparent);
}
.admin-table th,
.admin-table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: middle;
}
.admin-table tr:not(:first-child) td { border-top: 1px solid var(--color-border); }
.admin-th--right, .admin-td--right   { text-align: right; }
.admin-th--center, .admin-td--center { text-align: center; }

/* Headers sortables : curseur + indicateur de direction via ::after */
.admin-th--sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.admin-th--sortable:hover { color: var(--color-accent); }
.admin-th--sortable::after {
  content: "⇅";
  margin-left: .4em;
  opacity: .35;
  font-size: .8em;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.admin-th--sortable[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; color: var(--color-accent); }
.admin-th--sortable[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--color-accent); }

/* Vignette + nom dans la liste admin produits : la cellule "Nom" est un
   lien complet vers /admin/products/{id}/edit pour zone cliquable large.
   Vignette 48×48 carrée, fallback initiale en bronze. */
.admin-row-product {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--color-fg);
  font-weight: var(--fw-medium);
  min-width: 0;
}
.admin-row-product,
.admin-row-product:hover,
.admin-row-product:focus,
.admin-row-product:visited { text-decoration: none; }
.admin-row-product:hover .admin-row-product__name,
.admin-row-product:focus-visible .admin-row-product__name { color: var(--color-accent); }
.admin-row-product__thumb {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-sand);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  color: var(--color-bronze);
  font-size: 18px;
  letter-spacing: 0;
}
.admin-row-product__thumb--placeholder {
  background: color-mix(in oklab, var(--color-bronze) 10%, var(--color-sand));
}
.admin-row-product__thumb.is-missing {
  opacity: .65;
  filter: saturate(.5);
}
.admin-row-product__name {
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Badges de statut : conteneur inline-flex centré V + H. Gère 1 OU 2 badges. */
.admin-status-badges {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  flex-wrap: nowrap;
}

/* Badge toggle (clic pour publier/dépublier) — héritage de .badge en taille
   et padding, mais cliquable + état on/off + feedback réseau. */
.badge--toggle {
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.badge--toggle.is-on {
  background: color-mix(in oklab, var(--color-success) 20%, transparent);
  color: var(--color-success);
  border-color: color-mix(in oklab, var(--color-success) 35%, transparent);
}
.badge--toggle.is-off {
  background: var(--color-border);
  color: var(--color-muted);
  border-color: color-mix(in oklab, var(--color-muted) 25%, transparent);
}
.badge--toggle:hover { transform: translateY(-1px); }
.badge--toggle.is-on:hover {
  background: color-mix(in oklab, var(--color-success) 32%, transparent);
}
.badge--toggle.is-off:hover {
  background: color-mix(in oklab, var(--color-muted) 18%, transparent);
  color: var(--color-fg);
}
.badge--toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.badge--toggle.is-saving { opacity: .55; cursor: wait; transform: none; }
.badge--toggle.is-error {
  background: color-mix(in oklab, var(--color-danger) 25%, transparent) !important;
  color: var(--color-danger) !important;
  animation: badge-shake 220ms ease-in-out;
}
@keyframes badge-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Row hidden par recherche : pas display:none pour garder le layout stable
   (aria-hidden préserve accessibilité) */
.admin-table tr[hidden] { display: none; }

/* ── Admin form sections (Phase 1.2) ─────────────────────────────────
   Sections pliables en <details>, grille 2 colonnes, variants table. */
.admin-form { display: grid; gap: var(--s-4); max-width: 1100px; }
.admin-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s-4) var(--s-5);
}
.admin-section > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  padding: var(--s-2) 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.admin-section > summary::-webkit-details-marker { display: none; }
.admin-section > summary::marker { content: ""; }
.admin-section > summary::before {
  content: "▸";
  font-size: .8em;
  color: var(--color-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}
.admin-section[open] > summary::before { transform: rotate(90deg); }
.admin-section > summary + * { margin-top: var(--s-4); }

.admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 720px) {
  .admin-grid-2 { grid-template-columns: 1fr 1fr; }
}

.admin-form .field span:first-child {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-2);
}
.admin-form .field span em { color: var(--color-danger); font-style: normal; }
.admin-form .field .help {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-top: var(--s-1);
}
.admin-form .field .error {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-danger);
  margin-top: var(--s-1);
}
.admin-form .field.checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0; /* hauteur ~= input/select pour aligner en grille */
}
.admin-form .field.checkbox input {
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}
.admin-form .field.checkbox span:first-child {
  margin-bottom: 0;
  font-weight: var(--fw-regular);
  color: var(--color-fg);
}
/* Dans une grille admin-grid-2, chaque cellule aligne son contenu en haut
   sinon les champs avec texte d'aide se décalent visuellement vs les
   champs sans. */
.admin-form .admin-grid-2 > .field,
.admin-form .admin-grid-2 > label.field,
.admin-form .admin-grid-2 > .field-group { align-self: start; }

/* Hint court en inline après un label ("interne, jamais public", "home,
   best-sellers"…). Moins lourd que l'<em> italique + sans surcharger le
   span d'attributs inline style. */
.admin-form .field__hint-inline {
  display: inline;
  margin-left: 6px;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  font-style: normal;
}

/* Group de plusieurs checkboxes/toggles dans une même cellule de grille.
   Utile quand on veut aligner 2 cases sous un seul emplacement. */
.admin-form .field-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-top: calc(var(--s-1) + 4px); /* aligne 1re ligne avec l'input voisin */
}

/* Cellule stock éditable dans la liste produits admin.
   Input compact aligné à droite, feedback visuel sur save. */
.stock-cell__input {
  width: 70px;
  padding: 4px 6px;
  text-align: right;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.stock-cell__input:hover        { border-color: var(--color-border); background: var(--color-bg); }
.stock-cell__input:focus        { outline: none; border-color: var(--color-accent); background: var(--color-bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.stock-cell__input.is-saving    { border-color: var(--color-border); opacity: .6; }
.stock-cell__input.is-saved     { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.stock-cell__input.is-error     { border-color: var(--color-danger);  background: color-mix(in srgb, var(--color-danger)  10%, transparent); }
.stock-cell--multi { color: var(--color-muted); cursor: help; }
.stock-cell--multi small { font-size: var(--fs-xs); opacity: .7; }

/* Image picker (visual chooser for category hero, etc.) */
.image-picker {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  background: var(--color-bg-elevated);
  min-width: 0;
  max-width: 100%;
}
.image-picker__legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 0 var(--s-2);
  display: inline-flex;
  gap: var(--s-2);
  align-items: baseline;
}
.image-picker__hint {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}
.image-picker__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.image-picker__controls .image-picker__search { flex: 1 1 220px; min-width: 0; }
.image-picker__controls .image-picker__filter { flex: 0 0 auto; min-width: 200px; }
.image-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-2);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  align-content: start;
}
/* (Bloc content-visibility supprimé : conflit connu avec aspect-ratio des
   enfants dans certains navigateurs, créait des items hauts de 0 px.) */
.image-picker__item {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-elevated);
  transition: border-color .15s ease, transform .15s ease;
  min-width: 0;
}
.image-picker__item:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  transform: translateY(-1px);
}
.image-picker__item.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.image-picker__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.image-picker__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-bg);
}
.image-picker__item .image-picker__meta {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-muted);
  padding: 4px 6px;
  border-top: 1px solid var(--color-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.image-picker__item.is-selected .image-picker__meta {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-text);
}
.image-picker__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  background: repeating-linear-gradient(45deg, var(--color-bg) 0 8px, var(--color-bg-elevated) 8px 16px);
  margin: 0;
}
.image-picker__item[hidden] { display: none !important; }

/* Asset orphelin : ligne DB sans fichier sur disque (import Shopify cassé,
   FK orpheline). Filet visuel pour qu'Ed les identifie et les nettoie. */
.image-picker__item.is-missing img {
  opacity: .55;
  filter: saturate(.6);
}
.image-picker__item.is-missing::after {
  content: "orphelin";
  position: absolute;
  top: 4px; left: 4px;
  background: color-mix(in oklab, var(--color-danger, #c24) 90%, transparent);
  color: #fff;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  pointer-events: none;
}

/* ═══ Aperçu de l'image actuellement sélectionnée — bandeau au-dessus du picker ═══
   Layout flex horizontal : vignette 160px à gauche + meta + actions à droite.
   En mobile : empile verticalement. */
.image-current {
  display: flex;
  gap: var(--s-4);
  align-items: stretch;
  padding: var(--s-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.image-current__frame {
  flex: 0 0 160px;
  width: 160px; height: 160px;
  background: var(--color-sand);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.image-current__frame img {
  width: 100%; height: 100%; object-fit: contain;
  background: var(--color-sand);
}
.image-current__empty {
  font-size: var(--fs-xs); color: var(--color-muted);
  text-align: center; padding: var(--s-3);
}
.image-current__info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.image-current__eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted); font-weight: var(--fw-semi);
  margin: 0;
}
.image-current__title {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: var(--fw-semi);
  margin: 0; color: var(--color-fg);
}
.image-current__meta {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 2px var(--s-3);
  margin: 0;
  font-size: var(--fs-xs);
}
.image-current__meta dt {
  font-weight: var(--fw-semi); color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
}
.image-current__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--color-fg);
  word-break: break-all;
}
.image-current__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: auto; }

@media (max-width: 720px) {
  .image-current { flex-direction: column; }
  .image-current__frame { flex: 0 0 auto; width: 100%; height: 200px; }
}

/* Zone d'upload drag-drop */
.image-picker__uploader {
  position: relative;
  display: block;
  margin-bottom: var(--s-3);
  padding: var(--s-4);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.image-picker__uploader:hover,
.image-picker__uploader.is-dragover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.image-picker__file {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.image-picker__upload-cta {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  color: var(--color-muted);
  pointer-events: none;
}
.image-picker__upload-cta strong { color: var(--color-fg); font-weight: var(--fw-semi); display: block; }
.image-picker__upload-hint { font-size: var(--fs-xs); margin-top: 2px; }
.image-picker__upload-progress {
  margin-top: var(--s-2);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-muted);
}
.image-picker__upload-progress.is-ok   { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.image-picker__upload-progress.is-warn { background: color-mix(in srgb, var(--color-bronze) 15%, transparent);  color: var(--color-fg); }
.image-picker__upload-progress.is-err  { background: color-mix(in srgb, var(--color-danger) 12%, transparent);  color: var(--color-danger); }

/* ── Media Manager ────────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}
.media-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.media-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.media-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg);
}
.media-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card__body {
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-xs);
  display: grid;
  gap: 2px;
  line-height: 1.35;
}
.media-card__ctx { font-weight: var(--fw-semi); color: var(--color-fg); }
.media-card__hash { font-family: var(--font-mono); color: var(--color-muted); font-size: 10px; }
.media-card__dim { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.media-card__actions {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2) var(--s-2);
  border-top: 1px solid var(--color-border);
}
.media-card__actions .btn { flex: 1; padding-inline: 0; }

/* Fiche détail (show) */
.media-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 900px) {
  .media-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.media-detail__preview {
  margin: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.media-detail__preview img { width: 100%; height: auto; display: block; }
.media-detail__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  margin: 0;
}
.media-detail__meta dt {
  font-weight: var(--fw-semi);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--fs-xs);
  padding-top: 2px;
}
.media-detail__meta dd { margin: 0; }

/* Grille de cases à cocher pour assigner les catégories d'un produit. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-2);
}
.category-grid__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.category-grid__item:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); }
.category-grid__item.is-checked {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.category-grid__item input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}
.category-grid__name {
  flex: 1;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.category-grid__count {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Variants table dense */
.admin-variants-table th {
  text-align: left;
  padding: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--color-border);
}
.admin-variants-table td {
  padding: var(--s-1);
  vertical-align: middle;
}
.admin-variants-table .input {
  padding: var(--s-2);
  font-size: var(--fs-sm);
}
.admin-variants-table tr:not(:first-child) td {
  border-top: 1px solid color-mix(in oklab, var(--color-border) 50%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   Phase I — Signatures identitaires égyptiennes
   ══════════════════════════════════════════════════════════════════════ */

/* ── I.C — Poussière dorée ambient (hero homepage) ────────────────────
   15-18 particules bronze qui flottent verticalement de bas en haut dans le hero.
   Effet "poussière qui danse dans la lumière des temples". Pas de smoke/haze.
   Chaque particule reçoit 6 custom properties inline : --dl (left), --dd (delay),
   --du (duration), --do (opacity), --ds (size), --dx (drift horizontal).
   Désactivé sur prefers-reduced-motion. Réduit à 10 particules sur mobile. */
.horus-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;          /* au-dessus de l'overlay duotone ::after (z-index:2 aussi,
                          mais dust est un enfant DOM empilé après) */
  overflow: hidden;
}
.horus-dust__particle {
  position: absolute;
  left: var(--dl, 50%);
  top: 100%;
  width: var(--ds, 4px);
  height: var(--ds, 4px);
  background: var(--color-bronze);
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.4px) drop-shadow(0 0 5px color-mix(in oklab, var(--color-bronze) 35%, transparent));
  animation: horus-dust-float var(--du, 18s) linear infinite;
  animation-delay: var(--dd, 0s);
  will-change: transform, opacity;
}
/* Keyframes : montée verticale full-hero + drift horizontal en 4 waypoints
   (sinusoïdale visuelle sans JS). Opacity : fade-in bas / fade-out haut. */
@keyframes horus-dust-float {
  0%   { transform: translate3d(0, 0, 0);                              opacity: 0; }
  10%  { opacity: var(--do, 0.5); }
  25%  { transform: translate3d(var(--dx, 10px), -30vh, 0); }
  50%  { transform: translate3d(calc(var(--dx, 10px) * -1), -60vh, 0); opacity: var(--do, 0.5); }
  75%  { transform: translate3d(var(--dx, 10px), -90vh, 0); }
  90%  { opacity: var(--do, 0.5); }
  100% { transform: translate3d(0, -120vh, 0);                         opacity: 0; }
}

/* Dark mode : opacité renforcée + glow plus étendu (fond sombre = contraste plus difficile) */
@media (prefers-color-scheme: dark) {
  .horus-dust__particle {
    filter: blur(0.4px) drop-shadow(0 0 6px color-mix(in oklab, var(--color-bronze) 45%, transparent));
  }
}

/* Mobile : réduction à 10 particules max (GPU + batterie) */
@media (max-width: 768px) {
  .horus-dust__particle:nth-child(n+11) { display: none; }
}

/* Reduced motion : effet ambient = sacrifiable → coupe net */
@media (prefers-reduced-motion: reduce) {
  .horus-dust { display: none; }
}

/* ── Pagination ────────────────────────────────────────────────────── */
.pagination {
  display: flex; justify-content: center; gap: var(--s-2);
  margin-top: var(--s-6); list-style: none; padding: 0;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 var(--s-2);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--color-fg);
  border: 1px solid transparent;
}
.pagination a:hover { border-color: var(--color-border); }
.pagination [aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }

/* Dark warm : current page ink ≈ bg → bascule en bronze (accent Horus cohérent) */
@media (prefers-color-scheme: dark) {
  .pagination [aria-current="page"] { background: var(--color-bronze); color: var(--color-ink); }
}

/* ── Micro-interactions ────────────────────────────────────────────── */
@supports (view-transition-name: none) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: var(--dur-base);
    animation-timing-function: var(--ease-out);
  }
}
@starting-style {
  .flash { opacity: 0; transform: translateY(-6px); }
}
.flash { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }

/* ══════════════════════════════════════════════════════════════════════
   Fiche produit — layout compact 2 colonnes (galerie / info+CTA)
   ══════════════════════════════════════════════════════════════════════ */
/* Section fiche produit : breadcrumb juste sous le header, le hero éditorial
   de .section (padding-block s-8) est superflu ici — on veut du commerce, pas
   de la mise en scène. */
.product-page { padding-block-start: var(--s-4); }
.product-page .breadcrumb { margin-bottom: var(--s-3); }
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.product-detail > * { min-width: 0; }
@media (min-width: 900px) {
  .product-detail {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--s-7);
  }
  /* Info column sticky si le content est plus grand que la galerie */
  .product-info { position: sticky; top: calc(var(--s-6) + 60px); align-self: start; }
}

/* ── Galerie ─────────────────────────────────────────────────────── */
.product-gallery__main {
  position: relative;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.product-gallery__main img,
.product-gallery__main picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery--out-of-stock .product-gallery__main img,
.product-gallery--out-of-stock .product-gallery__main picture {
  filter: grayscale(.7);
  opacity: .75;
}
.product-gallery__out-badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px color-mix(in oklab, black 30%, transparent);
}
.product-gallery__thumbs {
  list-style: none;
  padding: 0; margin: var(--s-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--s-2);
}
.product-gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--color-bg-elevated);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.product-gallery__thumb:hover { border-color: color-mix(in oklab, var(--color-bronze) 50%, transparent); }
.product-gallery__thumb.is-active { border-color: var(--color-bronze); }
.product-gallery__thumb img, .product-gallery__thumb picture { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Info / CTA ──────────────────────────────────────────────────── */
.product-info { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.product-info > * { min-width: 0; max-width: 100%; }
/* Titre produit : retenu (commerce), pas hero éditorial.
   Le prix reste proéminent — c'est lui qui dirige la conversion. */
.product-info__title {
  font-family: var(--font-display);
  font-size: 1.875rem;     /* 30px — équilibré avec le prix 32px */
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.product-info__lede {
  color: var(--color-muted);
  font-size: var(--fs-base);
  margin: 0;
  line-height: 1.5;
}
.product-info__price { display: flex; align-items: baseline; gap: var(--s-3); }
.product-info__price-current {
  font-family: var(--font-display);
  font-size: 2rem;          /* 32px — hiérarchie produit */
  font-weight: var(--fw-bold);
  color: var(--color-fg);
  letter-spacing: -.01em;
  line-height: 1;
}
.product-info__price-compare { text-decoration: line-through; color: var(--color-muted); font-size: var(--fs-md); }

/* Variant pills — grille cartes radio (style cbd.fr) */
.variant-grid { border: 0; padding: 0; margin: 0; }
.variant-grid__legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-fg);
  padding: 0 0 var(--s-2);
}
.variant-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-2);
}
.variant-pill {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-bg-elevated);
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.variant-pill input { position: absolute; opacity: 0; pointer-events: none; }
.variant-pill:hover { border-color: color-mix(in oklab, var(--color-bronze) 60%, transparent); }
.variant-pill.is-active {
  border-color: var(--color-bronze);
  background: color-mix(in oklab, var(--color-bronze) 8%, var(--color-bg-elevated));
  box-shadow: 0 0 0 1px var(--color-bronze);
}
.variant-pill.is-disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.variant-pill__name  { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.variant-pill__price { font-weight: var(--fw-bold); font-size: var(--fs-md); justify-self: end; color: var(--color-fg); }
.variant-pill__unit  { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--fs-xs); }

/* CTA : qty stepper + submit */
.product-cta {
  display: flex;
  gap: var(--s-3);
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.product-cta__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
}
.product-cta__qty-btn {
  width: 40px; height: 48px;
  border: none;
  background: transparent;
  font-size: var(--fs-lg);
  color: var(--color-fg);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.product-cta__qty-btn:hover { background: var(--color-sand); }
.product-cta__qty-input {
  width: 50px;
  height: 48px;
  border: none;
  text-align: center;
  background: transparent;
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  -moz-appearance: textfield;
}
.product-cta__qty-input::-webkit-outer-spin-button,
.product-cta__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-cta__submit {
  flex: 1 1 auto;
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}
.product-cta__price { font-weight: var(--fw-bold); opacity: .85; }

/* Stock */
.product-stock { margin-top: calc(var(--s-2) * -1); }
.product-stock__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.product-stock__tag--ok  { color: color-mix(in oklab, #2d7a4f 85%, var(--color-fg)); }
.product-stock__tag--low { color: var(--color-bronze); }
.product-stock__tag--out {
  background: color-mix(in oklab, var(--color-ink) 12%, transparent);
  color: var(--color-muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* Trust signals — mini USP sous le CTA. Grille fixe : 3 cols (desktop) → 1 col (mobile). */
.product-trust {
  list-style: none;
  padding: var(--s-3) 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2) var(--s-3);
}
.product-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  min-width: 0;
}
.product-trust li span {
  white-space: nowrap;       /* pas de split '60 €' → '60' / '€' */
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-trust li svg { color: var(--color-bronze); flex: 0 0 auto; }
@media (max-width: 560px) {
  .product-trust { grid-template-columns: 1fr; }
  .product-trust li span { white-space: normal; }
}

/* Attributs */
.product-attrs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-5);
  row-gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-sm);
}
.product-attrs dt { color: var(--color-muted); }
.product-attrs dd { margin: 0; font-weight: var(--fw-medium); }

/* Description longue */
.product-description {
  margin-top: var(--s-6);
  max-width: 72ch;
  line-height: 1.65;
}
.product-description h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;        /* 24px — lisible sans dominer */
  letter-spacing: -.01em;
  margin: 0 0 var(--s-3);
}
.product-description__body > :first-child { margin-top: 0; }
.product-description__body > :last-child  { margin-bottom: 0; }
.product-description p { margin: 0 0 var(--s-3); }

/* Mise en page éditoriale du copy IA — formaté par format_product_description(). */
.product-description__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  margin: 0 0 var(--s-4);
  color: var(--color-fg);
  letter-spacing: -.01em;
}
.product-description__h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--fw-semi);
  line-height: 1.3;
  margin: var(--s-5) 0 var(--s-2);
  color: var(--color-bronze);
  letter-spacing: .005em;
}
.product-description__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: grid;
  gap: var(--s-2);
}
.product-description__list > li {
  padding: var(--s-2) var(--s-3);
  background: color-mix(in oklab, var(--color-bronze) 5%, var(--color-bg-elevated));
  border-left: 2px solid color-mix(in oklab, var(--color-bronze) 35%, transparent);
  border-radius: 4px;
  line-height: 1.5;
  font-size: .95rem;
}

@media (max-width: 640px) {
  .product-description__h2 { font-size: 1.25rem; line-height: 1.25; }
  .product-description__h3 { font-size: 1rem; }
  .product-description__list > li { padding: var(--s-2); font-size: .9rem; }
  .product-description { line-height: 1.55; }
}
.product-description .rich-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: grid;
  gap: var(--s-1);
}
.product-description .rich-bullets > li {
  padding: .25rem 0 .25rem var(--s-3);
  border-left: 2px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  line-height: 1.55;
}
.product-description .rich-bullets + p { margin-top: var(--s-4); }
.product-section-title {
  font-family: var(--font-display);
  font-size: 1.5rem;        /* 24px — cohérent avec "À propos" */
  letter-spacing: -.01em;
  margin: 0 0 var(--s-4);
}

/* Mobile refinements — compactage pour que 'Ajouter au panier' soit au-dessus du fold.
   Hauteur image contrainte + typographie resserrée. */
@media (max-width: 899px) {
  .product-info__title         { font-size: 1.625rem; }   /* 26px */
  .product-info__price-current { font-size: 1.75rem; }    /* 28px */
  .product-gallery__main       {
    aspect-ratio: auto;
    height: 32vh;
    min-height: 180px;
    max-height: 260px;
  }
  .product-gallery__thumbs     { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
  .product-cta__submit         { min-width: 0; padding: var(--s-3) var(--s-3); font-size: var(--fs-sm); }
  .product-cta__submit svg     { width: 16px; height: 16px; }
  .product-cta__submit .product-cta__price { display: none; } /* prix déjà visible au-dessus, on allège */
  .product-cta__qty-btn        { width: 34px; height: 44px; }
  .product-cta__qty-input      { width: 38px; height: 44px; }
  .variant-grid__list          { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .variant-pill                { padding: var(--s-2) var(--s-3); }
  .variant-pill__name, .variant-pill__price { font-size: var(--fs-sm); }
  .product-detail              { gap: var(--s-4); }
  .product-info                { gap: var(--s-3); }
}

/* ══════════════════════════════════════════════════════════════════════
   Page d'accueil — USP strip, catégories compactes, FAQ accordion
   ══════════════════════════════════════════════════════════════════════ */

/* USP strip — 4 engagements conversion, sous le hero.
   Bande fine, icônes bronze, responsive 2x2 mobile → 1x4 desktop. */
.usp-strip {
  background: color-mix(in oklab, var(--color-bronze) 6%, var(--color-bg));
  border-top: 1px solid color-mix(in oklab, var(--color-bronze) 20%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--color-bronze) 20%, transparent);
  padding: var(--s-4) 0;
}
.usp-strip__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: center;
}
.usp-strip__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.usp-strip__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-bronze) 15%, transparent);
  color: var(--color-bronze);
}
.usp-strip__text { min-width: 0; }
.usp-strip__title { font-weight: var(--fw-semi); font-size: var(--fs-sm); line-height: 1.25; }
.usp-strip__sub   { color: var(--color-muted); font-size: var(--fs-xs); margin-top: 2px; }
@media (max-width: 768px) {
  /* Mobile : strip horizontal scrollable ultra-compact (~44 px de hauteur
     totale). Chaque item est une pill avec icône + titre 1 ligne. La sub
     est masquée. Objectif : signal de confiance instant sans voler de place
     aux produits. */
  .usp-strip { padding: 8px 0; border-top-width: 1px; border-bottom-width: 1px; }
  .usp-strip > .container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  }
  .usp-strip > .container::-webkit-scrollbar { display: none; }
  .usp-strip__list {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .usp-strip__item {
    flex: 0 0 auto;
    gap: 6px;
    padding: 5px 12px 5px 6px;
    background: var(--color-bg-elevated);
    border: 1px solid color-mix(in oklab, var(--color-bronze) 22%, var(--color-border));
    border-radius: var(--radius-pill);
  }
  .usp-strip__icon { width: 24px; height: 24px; }
  .usp-strip__icon svg { width: 14px; height: 14px; }
  .usp-strip__title { font-size: 12px; font-weight: var(--fw-semi); line-height: 1; }
  .usp-strip__sub   { display: none; }
}

/* Grille catégories — 9 cats en 3×3 sur tous les viewports (carré éditorial).
   Évite la ligne incomplète qu'aurait donné 6+3 ou 4+4+1. Image de fond,
   overlay gradient vertical pour lisibilité titre, icône + label en overlay bas. */
.cat-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.cat-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-paper);
  background: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  isolation: isolate;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cat-tile__media { position: absolute; inset: 0; z-index: 0; }
.cat-tile__media img, .cat-tile__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--color-ink) 0%, transparent) 35%,
    color-mix(in oklab, var(--color-ink) 85%, transparent) 100%);
}
.cat-tile__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.cat-tile__icon {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-bronze) 85%, transparent);
  color: var(--color-ink);
  margin-bottom: var(--s-1);
}
.cat-tile__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-md); line-height: 1.1; letter-spacing: -.01em; }
.cat-tile__count { font-size: var(--fs-xs); color: color-mix(in oklab, var(--color-paper) 80%, transparent); }
@media (max-width: 768px) {
  .cat-grid { gap: var(--s-2); }
  .cat-tile__body { padding: var(--s-2); }
  .cat-tile__name { font-size: var(--fs-xs); line-height: 1.1; }
  .cat-tile__icon { width: 24px; height: 24px; margin-bottom: 2px; }
  .cat-tile__icon svg { width: 14px; height: 14px; }
  .cat-tile__count { display: none; }
}

/* Grille produits dense (best-sellers + boutique) — 4 cols desktop / 2 cols mobile */
.grid-cards--dense {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 1024px) {
  .grid-cards--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid-cards--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
}

/* Grille catalogue (categories/show + products/index) — explicitement 2-col mobile
   pour montrer 4 cards visibles dans 2 rangées avant scroll. Avant : 1 col par défaut. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 1280px) {
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
}
@media (max-width: 768px) {
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Cards plus compactes en mobile : padding body + texte ajustés */
  .grid-cards .card-product__body { padding: 10px; }
  .grid-cards .card-product__name { font-size: 13px; line-height: 1.25; }
  .grid-cards .card-product__price-current { font-size: 14px; font-weight: var(--fw-semi); }
  .grid-cards .card-product__price-compare { font-size: 12px; }
  .grid-cards .card-product__action { width: 32px; height: 32px; }
  .grid-cards .card-product__action svg { width: 14px; height: 14px; }
  .grid-cards .card-product__badges { gap: 4px; top: 6px; left: 6px; }
  .grid-cards .badge { font-size: 9px; padding: 2px 6px; letter-spacing: .04em; }
  .grid-cards .card-product__wishlist { top: 6px; right: 6px; width: 28px; height: 28px; }
  .grid-cards .card-product__wishlist svg { width: 14px; height: 14px; }
}

/* ═══ Hero page (catégorie / sous-page) — minimaliste, juste un titre court ═══
   Pas de description SEO dans le hero (déplacée en bas via .cat-seo-text).
   Hauteur très réduite pour ne pas masquer les produits sur le fold. */
.hero--page {
  min-height: 22vh;
  padding: var(--s-5) 0 var(--s-4);
  align-items: center;
}
@media (max-width: 768px) {
  .hero--page { min-height: 16vh; padding: var(--s-4) 0 var(--s-3); }
}
.hero__title--page {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  max-width: 22ch;
  margin: 0;
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .hero__title--page { font-size: clamp(1.4rem, 5.6vw, 1.8rem); }
}

/* Description SEO de catégorie — placée en bas de page, lisible mais discrète */
.cat-seo-text {
  max-width: 70ch;
  margin: 0 auto;
}
.cat-seo-text__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.005em;
  margin: 0 0 var(--s-3);
  color: var(--color-fg);
}
.cat-seo-text__body {
  color: var(--color-muted);
  line-height: 1.7;
  font-size: var(--fs-base);
}
.cat-seo-text__body strong { color: var(--color-fg); font-weight: var(--fw-semi); }
@media (max-width: 768px) {
  .cat-seo-text__body { font-size: var(--fs-sm); line-height: 1.65; }
}

/* Grille articles — 3 cols desktop / 2 cols mobile */
.grid-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 768px) {
  .grid-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .grid-articles .card-article__title { font-size: var(--fs-md); }
  .grid-articles .card-article__excerpt { display: none; } /* compact mobile */
  .grid-articles .card-article__meta { font-size: var(--fs-xs); }
}

/* Card-product — action compacte (icône ronde alignée droite sur la ligne du prix).
   Mono-variant : + (AJAX +panier). Multi-variant : icône liste (lien fiche produit).
   Tooltip custom sur [data-tooltip] ; aria-label mobile. */
.card-product__action-form { margin: 0; flex: 0 0 auto; }
.card-product__action {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--color-ink) 20%, transparent);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card-product__action:hover {
  background: var(--color-bronze);
  color: var(--color-ink);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px color-mix(in oklab, var(--color-bronze) 35%, transparent);
}
.card-product__action:active { transform: translateY(0); }
.card-product__action--add.is-added {
  background: color-mix(in oklab, #2d7a4f 75%, var(--color-paper));
  color: var(--color-paper);
  box-shadow: 0 3px 10px color-mix(in oklab, #2d7a4f 40%, transparent);
}
.card-product__action-ico--done { display: none; }
.card-product__action.is-added .card-product__action-ico--default { display: none; }
.card-product__action.is-added .card-product__action-ico--done    { display: inline-block; }
.card-product__action--disabled {
  background: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.card-product__action--disabled:hover {
  background: var(--color-border);
  transform: none;
  box-shadow: none;
}
@media (max-width: 768px) {
  .card-product__action { width: 34px; height: 34px; }
  .card-product__action svg { width: 16px; height: 16px; }
}

/* État rupture : désature l'image, opacité légère. Badge "Rupture" géré en tant
   que <span class="badge badge--outofstock"> dans .card-product__badges. */
.card-product--out-of-stock .card-product__img,
.card-product--out-of-stock picture {
  filter: grayscale(.7);
  opacity: .7;
}
.card-product--out-of-stock .card-product__name { color: var(--color-muted); }

/* Tooltip générique — affiché au hover (desktop), invisible sur tactile.
   Usage : [data-tooltip="..."]. Custom pour éviter le title natif moche. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  z-index: 10;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translateY(0); }
@media (hover: none) { [data-tooltip]::after { display: none; } }

/* FAQ home — accordéon visuel, numérotation 01..05, icône ronde par question,
   chevron rotate, left border accent bronze qui s'illumine sur [open]. */
.faq-home {
  background: linear-gradient(180deg, var(--color-bg) 0%, color-mix(in oklab, var(--color-bronze) 5%, var(--color-bg)) 100%);
}
.faq-home__container { max-width: 860px; margin-inline: auto; }
.faq-home__head { text-align: center; margin-bottom: var(--s-6); }
.faq-home__kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: var(--fs-xs);
  color: var(--color-bronze);
  font-weight: var(--fw-semi);
  padding: var(--s-1) var(--s-3);
  border: 1px solid color-mix(in oklab, var(--color-bronze) 30%, transparent);
  border-radius: var(--radius-pill);
  margin-bottom: var(--s-3);
}
.faq-home__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  margin: 0 0 var(--s-2) 0;
  text-wrap: balance;
}
.faq-home__lede { color: var(--color-muted); margin: 0; }

/* Bloc d'entête de la section Journal (home) — flex avec wrap mobile pour
   ne pas pousser le viewport quand le bouton "Tous les articles" tient
   mal à côté du h2 sur 360 px. */
.home-journal-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  color: var(--color-paper);
  flex-wrap: wrap;
}
.home-journal-head__title { margin: 0; color: var(--color-paper); }
.home-journal-head__lede  { color: var(--color-sand); margin-top: var(--s-2); }
.home-journal-head__cta   { color: var(--color-paper); border-color: var(--color-paper); flex-shrink: 0; }
@media (max-width: 640px) {
  /* Mobile : titre serré, lede compacte, CTA pleine largeur sous le titre */
  .faq-home__head { margin-bottom: var(--s-4); }
  .faq-home__title { font-size: clamp(1.4rem, 6vw, 1.75rem); line-height: 1.18; }
  .faq-home__lede { font-size: 14px; line-height: 1.5; }
  .faq-home__kicker { font-size: 10.5px; padding: 2px var(--s-2); }

  .home-journal-head { gap: var(--s-3); margin-bottom: var(--s-4); }
  .home-journal-head__title { font-size: clamp(1.4rem, 6vw, 1.7rem); line-height: 1.18; }
  .home-journal-head__lede { font-size: 13px; line-height: 1.45; }
  .home-journal-head > .reveal-up { flex: 1 1 100%; min-width: 0; }
  .home-journal-head__cta { align-self: flex-start; }
}
.faq-home__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.faq-home__item {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid color-mix(in oklab, var(--color-bronze) 30%, transparent);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.faq-home__item:hover { border-left-color: var(--color-bronze); }
.faq-home__item:has(details[open]) {
  border-left-color: var(--color-bronze);
  box-shadow: 0 6px 22px color-mix(in oklab, var(--color-bronze) 10%, transparent);
}
.faq-home__item details { }
.faq-home__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-4);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
}
.faq-home__item summary::-webkit-details-marker { display: none; }
.faq-home__item summary::marker { content: ""; }
.faq-home__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: color-mix(in oklab, var(--color-bronze) 70%, var(--color-muted));
  font-weight: var(--fw-bold);
  min-width: 2ch;
  letter-spacing: -.02em;
}
.faq-home__icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-bronze) 12%, transparent);
  color: var(--color-bronze);
  flex: 0 0 auto;
}
.faq-home__q { font-weight: var(--fw-semi); line-height: 1.3; }
.faq-home__chevron {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-sand);
  color: var(--color-fg);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.faq-home__item details[open] summary .faq-home__chevron { transform: rotate(180deg); background: var(--color-bronze); color: var(--color-ink); }
.faq-home__a {
  padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 2ch + var(--s-3) + 36px + var(--s-3));
  color: var(--color-fg);
  line-height: 1.6;
}
.faq-home__a p { margin: 0 0 var(--s-2) 0; }
.faq-home__a a { color: var(--color-bronze); }
/* Smooth open/close animation (progressive enhancement) */
@supports selector(::details-content) {
  .faq-home__item details::details-content {
    opacity: 0;
    block-size: 0;
    overflow: hidden;
    transition: opacity var(--dur-base) var(--ease-out), block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
    interpolate-size: allow-keywords;
  }
  .faq-home__item details[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}
@media (max-width: 768px) {
  .faq-home__item summary { padding: var(--s-3); grid-template-columns: auto auto 1fr auto; gap: var(--s-2); }
  .faq-home__num { font-size: var(--fs-lg); }
  .faq-home__icon { width: 30px; height: 30px; }
  .faq-home__q { font-size: var(--fs-sm); }
  .faq-home__chevron { width: 28px; height: 28px; }
  .faq-home__a { padding: 0 var(--s-3) var(--s-3) calc(var(--s-3) + 2ch + var(--s-2) + 30px + var(--s-2)); font-size: var(--fs-sm); }
}
.faq-home__more { text-align: center; margin-top: var(--s-5); }

/* ── Modale "Ajouté au panier" ─────────────────────────────────────
   Slide-in depuis le haut à l'ajout AJAX, reste ouverte jusqu'à action user.
   2 CTA : Voir le panier (redirige) / Continuer mes achats (dismiss).
   Close : X, backdrop, Escape, bouton "Continuer". Scroll-lock via
   html.is-modal-open. Construction dynamique côté ui.js (CSP-safe). */
html.is-modal-open { overflow: hidden; }
.cart-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9999);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.cart-modal.is-visible { opacity: 1; pointer-events: auto; }
.cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--color-ink) 45%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cart-modal__panel {
  position: relative;
  width: min(720px, calc(100% - var(--s-6)));
  margin-top: var(--s-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-5) var(--s-4);
  box-shadow: var(--shadow-cinematic);
  transform: translateY(-24px);
  transition: transform 320ms var(--ease-out);
}
.cart-modal.is-visible .cart-modal__panel { transform: translateY(0); }
.cart-modal__close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-modal__close:hover { background: var(--color-sand); color: var(--color-fg); }
.cart-modal__status {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: color-mix(in oklab, #2d7a4f 80%, var(--color-fg));
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
  padding-right: 40px;  /* laisse place au X */
}
.cart-modal__status-icon {
  display: inline-flex;
  width: 24px; height: 24px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, #2d7a4f 25%, transparent);
  color: #2d7a4f;
}
.cart-modal__product {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.cart-modal__thumb {
  width: 96px; height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-sand);
}
.cart-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-modal__info { min-width: 0; }
.cart-modal__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-lg);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: var(--s-1);
  color: var(--color-fg);
}
.cart-modal__meta {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: var(--s-1);
}
.cart-modal__price {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--color-bronze);
}

/* Suggestions produits sous la fiche ajoutée (papier, grinder, etc.) */
.cart-modal__suggestions {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-border);
}
.cart-modal__suggestions-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--s-3);
}
.cart-modal__suggestions-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.cart-modal__suggestion {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.cart-modal__suggestion:hover,
.cart-modal__suggestion:focus {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  color: inherit;
  text-decoration: none;
}
.cart-modal__suggestion-thumb {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-elevated);
}
.cart-modal__suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-modal__suggestion-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-modal__suggestion-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cart-modal__suggestion-price {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--color-bronze);
}

.cart-modal__actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}
.cart-modal__actions > * { flex: 1 1 180px; text-align: center; }
@media (max-width: 540px) {
  .cart-modal__panel { width: 100%; margin-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--s-4); }
  .cart-modal__product { grid-template-columns: 72px 1fr; gap: var(--s-3); padding: var(--s-3) 0; }
  .cart-modal__thumb { width: 72px; height: 72px; }
  .cart-modal__name { font-size: var(--fs-md); }
  .cart-modal__actions { flex-direction: column-reverse; gap: var(--s-2); }
  .cart-modal__actions > * { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-modal, .cart-modal__panel { transition: opacity 120ms linear; }
  .cart-modal__panel { transform: none; }
}

/* Toast mini — notification discrète (coin bas-droit) pour +panier AJAX */
.horus-toast {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-5);
  z-index: var(--z-toast, 9999);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-cinematic);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
  max-width: 320px;
}
.horus-toast.is-visible { opacity: 1; transform: translateY(0); }
.horus-toast--success { border-left: 3px solid color-mix(in oklab, #2d7a4f 80%, var(--color-paper)); }
.horus-toast--error   { border-left: 3px solid var(--color-bronze); }
@media (max-width: 768px) {
  .horus-toast { bottom: var(--s-4); right: var(--s-4); left: var(--s-4); max-width: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Page À propos — layout éditorial dédié (SEO local Boulogne-sur-Gesse /
   L'Isle en Dodon). Tokens existants réutilisés ; nouveaux helpers
   génériques (.eyebrow, .section-header, .section-lede) utilisables
   ailleurs si besoin.
   ───────────────────────────────────────────────────────────────────── */

.lede { font-size: var(--fs-lg); line-height: 1.55; color: var(--color-muted); }
.section-header { max-width: 56ch; margin: 0 auto var(--s-6); text-align: center; }
.section-header > h2 { margin: 0 0 var(--s-3); }
.section-lede { font-size: var(--fs-md); line-height: 1.6; color: var(--color-muted); margin: 0; }
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-bronze);
}

/* About-hero — pattern éditorial commun (about / faq / shipping / blog).
   Aligné sur les dimensions de .hero--compact (38vh desktop / 22vh mobile)
   pour que l'utilisateur voie le contenu utile dans le premier scroll.
   Refondu 2026-04-26 : avant, padding s-10/s-9 hors scope mobile-first. */
.about-hero {
  position: relative;
  isolation: isolate;
  min-height: 38vh;
  display: grid;
  align-items: end;
  padding: var(--s-5) 0 var(--s-5);
  color: var(--color-paper);
  background: var(--color-ink);
  overflow: hidden;
}
.about-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.about-hero__bg img, .about-hero__bg picture {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.about-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--gradient-hero-veil);
  pointer-events: none;
}
.about-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: var(--gradient-hero-cool);
  opacity: .55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.about-hero__inner { position: relative; z-index: 3; max-width: 52rem; }
.about-hero__eyebrow {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-bronze) 85%, var(--color-paper));
}
.about-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(1.7rem, .9rem + 2.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 var(--s-3);
  padding-bottom: .08em;
}
.about-hero__lede {
  font-size: clamp(.98rem, .85rem + .35vw, 1.15rem);
  line-height: 1.5;
  color: color-mix(in oklab, var(--color-paper) 92%, transparent);
  max-width: 44rem;
  margin: 0 0 var(--s-4);
}
.about-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.about-hero__cta .btn--ghost {
  color: var(--color-paper);
  border-color: color-mix(in oklab, var(--color-paper) 45%, transparent);
}
.about-hero__cta .btn--ghost:hover {
  background: color-mix(in oklab, var(--color-paper) 10%, transparent);
  color: var(--color-paper);
}
@media (max-width: 768px) {
  /* Mobile : strict alignement avec .hero (22vh, lede clamp 2 lignes,
     CTA cachés — la chips bar + le mega-menu suffisent à orienter). */
  .about-hero { min-height: 22vh; padding: var(--s-3) 0 var(--s-3); }
  .about-hero__title {
    font-size: clamp(1.3rem, 5.4vw, 1.65rem);
    line-height: 1.12;
    padding-bottom: 0;
    margin-bottom: var(--s-2);
  }
  .about-hero__lede {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    margin: 8px 0 0;
    max-width: 36ch;
  }
  .about-hero__cta { display: none !important; }
}

.about-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.about-figure img, .about-figure picture {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.about-shops {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .about-shops { grid-template-columns: 1fr 1fr; }
}
.about-shop {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.about-shop:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.about-shop__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-sand); }
.about-shop__media img, .about-shop__media picture {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.about-shop__body { padding: var(--s-5) var(--s-5) var(--s-6); display: grid; gap: var(--s-3); }
.about-shop__tag {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-bronze);
}
.about-shop__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + .5vw, 1.9rem);
  font-weight: var(--fw-semi);
  letter-spacing: -.01em;
  margin: 0;
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
}
.about-shop__cp {
  font-family: var(--font-mono);
  font-size: .75em;
  color: var(--color-muted);
  letter-spacing: .05em;
}
.about-shop__address { font-style: normal; line-height: 1.55; color: var(--color-fg); }
.about-shop__region { color: var(--color-muted); font-size: var(--fs-sm); }
.about-shop__meta { margin: 0; font-size: var(--fs-sm); color: var(--color-fg); }
.about-shop__hours {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
}
.about-shop__hours dt {
  font-weight: var(--fw-semi);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--fs-xs);
  padding-top: 2px;
}
.about-shop__hours dd { margin: 0; }
.about-shop__hours ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 3px;
}
.about-shop__hours li {
  display: grid;
  grid-template-columns: minmax(8.5rem, auto) 1fr;
  gap: var(--s-3);
  color: var(--color-fg);
}
.about-shop__hours li span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg);
  font-weight: var(--fw-medium);
}
.about-shop__hours-closed span { color: var(--color-muted); font-style: italic; font-weight: var(--fw-regular) !important; }
.about-shop__phone {
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.about-shop__phone:hover { border-bottom-color: var(--color-accent); color: var(--color-accent); }
.about-shop__phone small { font-family: var(--font-base); font-weight: var(--fw-regular); color: var(--color-muted); margin-left: 4px; }
.about-shop__link {
  align-self: start;
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: var(--color-accent);
  border-bottom: 1px solid color-mix(in oklab, var(--color-accent) 40%, transparent);
  padding-bottom: 1px;
}
.about-shop__link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.about-grid-families {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}
.about-family {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.about-family:hover,
.about-family:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: inherit;
  text-decoration: none;
}
.about-family__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  margin-bottom: var(--s-1);
}
.about-family__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  margin: 0;
  letter-spacing: -.005em;
}
.about-family__body {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}
.about-family__more {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
}

.about-commitments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  max-width: 64rem;
  margin: 0 auto;
}
.about-commitments article {
  padding: var(--s-4);
  border-left: 3px solid var(--color-bronze);
  background: var(--color-bg-elevated);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.about-commitments h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--s-2);
  letter-spacing: -.005em;
}
.about-commitments p { margin: 0; color: var(--color-muted); line-height: 1.6; }

.about-faq { display: grid; gap: var(--s-2); }
.about-faq__item {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
  transition: border-color var(--dur-base) var(--ease-out);
}
.about-faq__item[open] { border-color: color-mix(in oklab, var(--color-accent) 50%, var(--color-border)); }
.about-faq__item > summary {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: -.005em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.about-faq__item > summary::-webkit-details-marker { display: none; }
.about-faq__item > summary::marker { content: ''; }
.about-faq__item > summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.4em;
  color: var(--color-bronze);
  transition: transform var(--dur-base) var(--ease-out);
}
.about-faq__item[open] > summary::after { content: '–'; }
.about-faq__item > p {
  margin: var(--s-3) 0 var(--s-2);
  line-height: 1.65;
  color: var(--color-muted);
}

.about-cta {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--s-10);
}
.about-cta__inner { text-align: center; max-width: 48rem; margin: 0 auto; }
.about-cta h2 {
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
  letter-spacing: -.01em;
  margin: 0 0 var(--s-3);
  padding-bottom: .08em;
}
.about-cta .section-lede {
  color: color-mix(in oklab, var(--color-paper) 80%, transparent);
  margin: 0 0 var(--s-6);
}
.about-cta__buttons {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.about-cta__buttons .btn--ghost {
  color: var(--color-paper);
  border-color: color-mix(in oklab, var(--color-paper) 45%, transparent);
}
.about-cta__buttons .btn--ghost:hover {
  background: color-mix(in oklab, var(--color-paper) 10%, transparent);
  color: var(--color-paper);
}
.about-cta__legal {
  font-size: var(--fs-xs);
  color: color-mix(in oklab, var(--color-paper) 60%, transparent);
  margin: 0;
}

/* Mobile éditorial — typo plus serrée pour about / faq / shipping. Aligné
   sur le barème pages légales (≤640px : body 14px, h2 ~1.05rem, h3 ~0.95rem),
   et reformatage de la grille horaires des cartes boutique pour ne plus
   rogner la colonne heures sur 360 px. */
@media (max-width: 640px) {
  /* Body courant des sections éditoriales (split, content, FAQ inline) */
  .about-hero ~ .section h2,
  .about-hero ~ .section .section-header h2 {
    font-size: clamp(1.2rem, 5vw, 1.45rem) !important;
    line-height: 1.2;
    margin-bottom: var(--s-2);
  }
  .about-hero ~ .section h3 { font-size: 1rem !important; line-height: 1.25; }
  .about-hero ~ .section p,
  .about-hero ~ .section li,
  .about-hero ~ .section dd,
  .about-hero ~ .section dt { font-size: 14px; line-height: 1.55; }
  .about-hero ~ .section .lede,
  .about-hero ~ .section .section-lede,
  .about-hero ~ .section .eyebrow + h2 + .section-lede { font-size: 14px; }
  .about-hero ~ .section .eyebrow { font-size: 11px; letter-spacing: .14em; }
  /* Filets anti-overflow horizontaux pour les sections éditoriales : grid-split,
     paragraphes longs, mots composés ("Saint-Bertrand-de-Comminges"). Sans
     ces overrides la grille parente avait min-width:auto et poussait le
     contenu au-delà du viewport sur 360 px. */
  .about-hero ~ .section .grid-split,
  .about-hero ~ .section .grid-split > * { min-width: 0; }
  .about-hero ~ .section .container,
  .about-hero ~ .section .container > * { min-width: 0; max-width: 100%; }
  .about-hero ~ .section p,
  .about-hero ~ .section li,
  .about-hero ~ .section dd { overflow-wrap: anywhere; hyphens: auto; }

  /* Cartes boutique — fix garanti : on supprime overflow hidden de la card
     (qui clippait sans rien empêcher de déborder), et on impose width
     contrainte au viewport via max-width sur la grille, plus min-width: 0
     en cascade pour que les grid items shrinkent. */
  .about-shops {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-4);
  }
  .about-shop {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .about-shop__media {
    aspect-ratio: 16 / 9;
    min-width: 0;
    max-width: 100%;
  }
  .about-shop__media img,
  .about-shop__media picture {
    min-width: 0;
    max-width: 100%;
  }
  .about-shop__body {
    padding: var(--s-4);
    gap: var(--s-2);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .about-shop__body > * { min-width: 0; max-width: 100%; }
  /* Tous les blocs texte de la card cassent les mots longs plutôt que de
     pousser la card au-delà du viewport (cas "Saint-Bertrand-de-Comminges"
     etc. observés à 360 px). */
  .about-shop__body p,
  .about-shop__body address,
  .about-shop__body dd,
  .about-shop__body dt,
  .about-shop__body h3 {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .about-shop__body h3 { font-size: 1.15rem !important; gap: var(--s-1); }
  .about-shop__cp { font-size: .65em; }
  .about-shop__address { font-size: 13px; line-height: 1.5; }
  .about-shop__address .about-shop__region { font-size: 12px; }
  .about-shop__tag {
    font-size: 10px;
    letter-spacing: .04em;
    line-height: 1.4;
    margin: 0;
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Horaires : on aplatit le <dl> en vertical (label dt PUIS valeur dd
     pleine largeur) — sur 360 px les 3 colonnes label/jours/heures
     forçaient des wraps successifs sur "13:00 – 18:30" et les jours.
     Maintenant la valeur dispose de toute la largeur de la card. */
  .about-shop__hours {
    display: block;
    font-size: 13px;
  }
  .about-shop__hours dt {
    font-size: 10.5px;
    padding: 0;
    margin: var(--s-3) 0 var(--s-1);
  }
  .about-shop__hours dt:first-of-type { margin-top: 0; }
  .about-shop__hours dd { margin: 0 0 var(--s-1); }
  .about-shop__hours ul { gap: 4px; }
  /* Stack vertical de chaque créneau — "Mar., jeu., ven., sam." sur une
     ligne, "13:00 – 18:30" en gras juste dessous. Plus lisible sur 360 px
     que la course aux deux colonnes qui était systématiquement clippée. */
  .about-shop__hours li {
    display: block;
    grid-template-columns: none;
    padding: 4px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent);
  }
  .about-shop__hours li:last-child { border-bottom: none; }
  .about-shop__hours li > span:first-child {
    display: block;
    color: var(--color-muted);
    font-size: 12px;
    margin-bottom: 1px;
  }
  .about-shop__hours li > span:last-child {
    display: block;
    font-size: 14px;
    font-weight: var(--fw-semi);
    color: var(--color-fg);
    white-space: nowrap;
  }
  .about-shop__hours-closed span:last-child {
    font-style: italic;
    font-weight: var(--fw-regular) !important;
    color: var(--color-muted);
  }
  .about-shop__phone { font-size: 14px; }
  .about-shop__link { font-size: 13px; }

  /* Familles produits */
  .about-grid-families { grid-template-columns: 1fr; gap: var(--s-3); }
  .about-family { padding: var(--s-3) var(--s-4) var(--s-4); }
  .about-family__title { font-size: 1rem !important; }
  .about-family__body { font-size: 13px; line-height: 1.5; }
  .about-family__more { font-size: 12px; }

  /* Engagements */
  .about-commitments { grid-template-columns: 1fr; gap: var(--s-4); }
  .about-commitments h3 { font-size: 1rem !important; }
  .about-commitments p { font-size: 13px; line-height: 1.55; }

  /* CTA final */
  .about-cta { padding-block: var(--s-7); }
  .about-cta h2 { font-size: clamp(1.3rem, 5.6vw, 1.6rem) !important; }
  .about-cta .section-lede { font-size: 14px; margin-bottom: var(--s-4); }
}

/* ── Page Livraison ──────────────────────────────────────────────── */
.ship-freebar {
  background: var(--color-bronze);
  color: var(--color-ink);
  padding: var(--s-3) 0;
}
.ship-freebar__inner {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.ship-freebar__icon { font-size: 1.4rem; }
.ship-freebar__sub { color: color-mix(in oklab, var(--color-ink) 75%, transparent); font-weight: var(--fw-regular); }

.ship-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.ship-option {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ship-option:hover { border-color: color-mix(in oklab, var(--color-accent) 50%, var(--color-border)); transform: translateY(-2px); }
.ship-option__icon { font-size: 2rem; line-height: 1; }
.ship-option h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.005em;
  margin: 0;
}
.ship-option__price { margin: 0; font-size: var(--fs-md); }
.ship-option__price strong { color: var(--color-bronze); font-size: 1.4rem; font-weight: var(--fw-bold); }
.ship-option__delay {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ship-option__list {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.ship-option__highlight {
  color: var(--color-bronze);
  font-weight: var(--fw-semi);
}
.ship-option__sub { color: var(--color-muted); font-style: italic; }

.ship-table-wrap { overflow-x: auto; margin: 0 auto; max-width: 64rem; }
.ship-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.ship-table th, .ship-table td {
  padding: var(--s-3) var(--s-4);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}
.ship-table th:first-child, .ship-table td:first-child { text-align: left; }
.ship-table thead th {
  background: var(--color-sand);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
  border-bottom: 2px solid var(--color-border);
}
.ship-table tbody tr:last-child td { border-bottom: none; }
.ship-table tbody tr:hover { background: color-mix(in oklab, var(--color-accent) 4%, transparent); }
.ship-intl-list {
  margin: var(--s-5) auto 0;
  max-width: 56rem;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.ship-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  counter-reset: ship-step;
}
.ship-steps__item {
  position: relative;
  padding: var(--s-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--s-2);
}
.ship-steps__num {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-bronze);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.1rem;
}
.ship-steps__item h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--fw-semi);
  margin: 0;
}
.ship-steps__item p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  line-height: 1.55;
}

/* ── Page FAQ — nav par thèmes ─────────────────────────────────── */
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
}
.faq-nav__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.faq-nav__chip:hover {
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent) 6%, transparent);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--color-fg);
}
.faq-nav__count {
  background: var(--color-sand);
  color: var(--color-muted);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}

/* ═══ Pages CMS légales — typo lisible, hiérarchie, tableaux, definitions ═══ */
.page-header { margin-bottom: var(--s-6); max-width: 64ch; }
.page-header h1 { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: clamp(1.5rem, 3.6vw, 2.5rem); letter-spacing: -.015em; line-height: 1.15; }
.page-header .lede { margin: 0; font-size: var(--fs-md); color: var(--color-muted); line-height: 1.55; }

.page-body { line-height: 1.65; color: var(--color-fg); font-size: var(--fs-base); }
/* Le texte courant est constraint à 64ch pour le confort de lecture, MAIS les tables et blocs riches gardent leur largeur. */
.page-body--legal > p,
.page-body--legal > h2,
.page-body--legal > h3,
.page-body--legal > h4,
.page-body--legal > ul,
.page-body--legal > ol,
.page-body--legal > dl,
.page-body--legal > details,
.page-body--legal > pre,
.page-body--legal > blockquote { max-width: 70ch; }
.page-body--legal h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-semi);
  letter-spacing: -.005em;
  margin: var(--s-6) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-border);
}
.page-body--legal h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.page-body--legal h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--fw-semi);
  margin: var(--s-5) 0 var(--s-2);
}
.page-body--legal p { margin: 0 0 var(--s-3); }
.page-body--legal ul,
.page-body--legal ol { margin: 0 0 var(--s-4) var(--s-4); padding: 0; }
.page-body--legal li { margin-bottom: var(--s-2); }
.page-body--legal a { color: var(--color-accent); border-bottom: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent); }
.page-body--legal a:hover { border-bottom-color: var(--color-accent); }
.page-body--legal code {
  background: var(--color-sand);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
}

/* Mobile : typo plus serrée pour les pages légales. Override avec
   spécificité forte (.page-body--legal + descendants directs) pour
   neutraliser tout héritage de --fs-base (17 px) qui rendait le texte
   visuellement énorme sur 360 px de viewport. */
@media (max-width: 640px) {
  .page-header { margin-bottom: var(--s-4); max-width: 100%; }
  .page-header h1 { font-size: clamp(1.35rem, 5.4vw, 1.75rem) !important; line-height: 1.18; }
  .page-header .lede { font-size: 14px !important; line-height: 1.5; }

  .page-body--legal { font-size: 14px !important; line-height: 1.6; }
  .page-body--legal p,
  .page-body--legal li,
  .page-body--legal dd,
  .page-body--legal dt,
  .page-body--legal td,
  .page-body--legal th { font-size: 14px !important; line-height: 1.55; }
  .page-body--legal .lede { font-size: 14px !important; }

  .page-body--legal h2 {
    font-size: 1.05rem !important;
    margin: var(--s-5) 0 var(--s-2);
    padding-top: var(--s-3);
    line-height: 1.25;
  }
  .page-body--legal h3 { font-size: .95rem !important; margin: var(--s-4) 0 var(--s-1); }
  .page-body--legal ul,
  .page-body--legal ol { margin-left: var(--s-3); }
  .page-body--legal li { margin-bottom: var(--s-1); }
  .page-body--legal details summary { font-size: .95rem !important; }
  .page-body--legal pre { font-size: 11.5px !important; padding: var(--s-3); overflow-x: auto; }
  .page-body--legal code { font-size: .9em !important; }
  .page-body--legal table { font-size: 12.5px !important; }
}

/* details / summary — pour FAQ et autres collapsibles dans les pages légales */
.page-body--legal details {
  border-top: 1px solid var(--color-border);
  padding: var(--s-3) 0;
}
.page-body--legal details:last-of-type { border-bottom: 1px solid var(--color-border); }
.page-body--legal details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-weight: var(--fw-semi);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-fg);
  padding-right: var(--s-2);
}
.page-body--legal details summary::-webkit-details-marker { display: none; }
.page-body--legal details summary::after {
  content: "";
  width: 14px; height: 14px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform .2s var(--ease-out);
  flex: 0 0 auto;
}
.page-body--legal details[open] summary::after { transform: rotate(-135deg); }
.page-body--legal details > *:not(summary) { margin-top: var(--s-3); }

/* Tableau de données réutilisable (politique, RGPD, livraison, dosage) */
.data-table {
  width: 100%;
  max-width: 100% !important;        /* surpasse le 70ch ci-dessus si appliqué */
  border-collapse: collapse;
  margin: var(--s-3) 0 var(--s-5);
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.data-table thead th {
  background: var(--color-sand);
  color: var(--color-fg);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.data-table td {
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: color-mix(in oklab, var(--color-sand) 35%, transparent); }
@media (max-width: 760px) {
  .data-table { font-size: 13px; }
  .data-table thead th, .data-table td { padding: var(--s-2); }
}

/* Definition list "rights-dl" : liste de droits/définitions pédagogiques */
.rights-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  margin: var(--s-3) 0 var(--s-5);
}
.rights-dl dt {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  font-size: 1.025rem;
}
.rights-dl dd { margin: 0; color: var(--color-fg); }
@media (max-width: 600px) {
  .rights-dl { grid-template-columns: 1fr; gap: var(--s-1) 0; }
  .rights-dl dt { margin-top: var(--s-2); }
}

/* Marker CMS-todo — placeholders éditoriaux explicites en attente de remplissage */
.cms-todo {
  background: color-mix(in oklab, var(--color-promo, var(--color-accent)) 16%, transparent);
  color: var(--color-fg);
  border-bottom: 2px dotted color-mix(in oklab, var(--color-promo, var(--color-accent)) 60%, transparent);
  padding: 0 4px;
  border-radius: 3px;
  font-style: italic;
  font-weight: var(--fw-semi);
  font-size: .92em;
}
.cms-todo::before { content: "✎ "; opacity: .7; }
@media print { .cms-todo { background: #ffeaea; color: #6d1e1e; } }

/* Bloc SEO local sous les catégories : pourquoi nous + boutiques + livraison */
.cat-seo {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cat-seo { grid-template-columns: repeat(3, 1fr); }
}
.cat-seo__col h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semi);
  margin: 0 0 var(--s-3);
  letter-spacing: -.005em;
}
.cat-seo__col p { margin: 0 0 var(--s-3); line-height: 1.55; color: var(--color-fg); }
.cat-seo__col ul { margin: 0 0 var(--s-3); padding-left: var(--s-4); display: grid; gap: var(--s-2); }
.cat-seo__col li { line-height: 1.5; color: var(--color-fg); }
.cat-seo__col strong { color: var(--color-fg); font-weight: var(--fw-semi); }

/* ── Page 404 ── */
.error-404__inner { text-align: center; padding-block: var(--s-6); }
.error-404__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: var(--fw-bold);
  color: var(--color-bronze);
  letter-spacing: -.04em;
  line-height: 1;
  margin: 0 0 var(--s-3);
  opacity: .85;
}
.error-404__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: var(--fw-semi);
  letter-spacing: -.01em;
  margin: 0 0 var(--s-3);
}
.error-404__lede {
  font-size: var(--fs-md);
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0 0 var(--s-6);
  max-width: 52ch;
  margin-inline: auto;
}
.error-404__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.error-404__links {
  text-align: left;
  max-width: 36rem;
  margin: 0 auto;
  padding: var(--s-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.error-404__links h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-semi);
  margin: 0 0 var(--s-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
}
.error-404__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-4);
}
@media (max-width: 540px) {
  .error-404__links ul { grid-template-columns: 1fr; }
}
.error-404__links a {
  color: var(--color-fg);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
}
.error-404__links a:hover { color: var(--color-accent); }
.error-404__contact {
  margin: var(--s-6) auto 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  max-width: 52ch;
}
.error-404__contact a { color: var(--color-accent); }

/* ═══ Page Recherche — header narrative + form proéminent + résultats en cards ═══ */
.search-page__head { text-align: center; margin-bottom: var(--s-5); }
.search-page__eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-muted); margin: 0 0 var(--s-2); font-weight: var(--fw-semi);
}
.search-page__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: var(--fw-semi);
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-fg);
}
.search-page__q { color: var(--color-accent); font-style: italic; }

.search-page__form {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px var(--s-4);
  margin: var(--s-4) auto 0;
  max-width: 600px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.search-page__form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 20%, transparent);
}
.search-page__icon { flex: 0 0 auto; color: var(--color-muted); }
.search-page__input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-fg);
  padding: 10px 0;
}
.search-page__input::placeholder { color: var(--color-muted); }
.search-page__submit { flex: 0 0 auto; padding: 9px 18px; }
.search-page__count {
  text-align: center;
  margin: var(--s-4) 0 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* Pages / articles : cards éditoriales */
.search-page__pages {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.search-page__page-card {
  display: block;
  padding: var(--s-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-fg);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.search-page__page-card,
.search-page__page-card:hover,
.search-page__page-card:focus,
.search-page__page-card:visited { text-decoration: none; }
.search-page__page-card:hover, .search-page__page-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--color-accent) 50%, var(--color-border));
  box-shadow: var(--shadow-md);
}
.search-page__page-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: var(--fw-semi);
  margin: 0 0 var(--s-2);
  letter-spacing: -.005em;
  color: var(--color-fg);
}
.search-page__page-card p {
  margin: 0 0 var(--s-3);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.search-page__page-cta {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
}

/* État vide */
.search-page__empty { text-align: center; padding-block: var(--s-6); }
.search-page__empty-icon {
  display: inline-flex;
  width: 80px; height: 80px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-bronze) 12%, transparent);
  color: var(--color-bronze);
  margin: 0 auto var(--s-4);
}
.search-page__empty h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 var(--s-3);
}
.search-page__empty p {
  color: var(--color-muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .search-page__form { padding: 4px 4px 4px var(--s-3); }
  .search-page__submit { padding: 8px 14px; font-size: var(--fs-sm); }
}

/* ═══ Home — header de section uniformisé (titre + lede + CTA "Boutique →") ═══
   Layout flex desktop : titre/lede à gauche, CTA à droite.
   Mobile : titre compact, lede masquée, CTA optionnel via --hide-mobile. */
.home-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.home-section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: var(--fw-semi);
  letter-spacing: -.005em;
  line-height: 1.15;
}
.home-section-head__lede {
  color: var(--color-muted);
  margin: var(--s-2) 0 0;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.home-section-head__cta { flex: 0 0 auto; }

@media (max-width: 768px) {
  .home-section-head { margin-bottom: var(--s-3); gap: var(--s-2); align-items: center; }
  .home-section-head__title { font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
  .home-section-head__lede  { display: none; }   /* lede masquée mobile */
  .home-section-head__cta { padding: 5px 12px; font-size: 12px; }
  /* CTA "Boutique →" supprimé uniquement à côté de "Nos catégories"
     (les 9 catégories sont déjà cliquables direct juste en dessous). */
  .home-section-head__cta--hide-mobile { display: none; }
}

/* ═══ Onglet Images produit — split sticky preview + bibliothèque multi-select ═══
   Pattern Shopify Admin / WP Media. La preview à gauche reste visible quand
   on scroll dans la grille à droite. Multi-select = checkbox d'inclusion +
   bouton ★ pour marquer la principale.
   IMPORTANT : le fix global `fieldset { min-width: 0 }` dans base.css est
   indispensable pour que le grid 320px / minmax(0,1fr) fonctionne. */
.image-tab {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
}
@media (max-width: 960px) {
  .image-tab { grid-template-columns: 1fr; gap: var(--s-4); }
}

.image-tab__selected {
  position: sticky;
  top: var(--s-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
@media (max-width: 960px) { .image-tab__selected { position: static; } }

.image-tab__selected-head { display: flex; flex-direction: column; gap: 2px; }
.image-tab__selected-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted); font-weight: var(--fw-semi);
}
.image-tab__selected-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-semi);
  margin: 0;
  color: var(--color-fg);
  letter-spacing: -.005em;
}

.image-tab__selected-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-sand);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.image-tab__selected-frame img { width: 100%; height: 100%; object-fit: contain; background: var(--color-sand); }
.image-tab__selected-empty {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-2);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--s-4);
}
.image-tab__selected-empty svg { color: color-mix(in oklab, var(--color-muted) 60%, transparent); }

.image-tab__selected-meta { margin: 0; display: grid; gap: 4px; font-size: var(--fs-xs); }
.image-tab__selected-meta > div { display: grid; grid-template-columns: 70px 1fr; gap: var(--s-2); align-items: baseline; }
.image-tab__selected-meta dt {
  font-weight: var(--fw-semi); color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
}
.image-tab__selected-meta dd { margin: 0; color: var(--color-fg); font-family: var(--font-mono); word-break: break-all; }
.image-tab__hash { color: var(--color-muted) !important; }

.image-tab__selected-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.image-tab__selected-actions .btn { flex: 1 1 auto; }

/* Galerie additionnelle — strip horizontal de petites vignettes synchronisé
   en JS avec les checkboxes du picker. */
.image-tab__gallery {
  margin-top: var(--s-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--s-3);
}
.image-tab__gallery-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-muted); font-weight: var(--fw-semi);
  margin: 0 0 var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.image-tab__gallery-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px;
  border-radius: 999px;
  background: var(--color-bronze); color: var(--color-ink);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0;
}
.image-tab__gallery-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 40px;
}
.image-tab__gallery-list li {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-sand);
}
.image-tab__gallery-list li img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-tab__gallery-hint {
  margin: var(--s-2) 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-muted);
}

/* Bibliothèque (côté droit) */
.image-tab__library { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.image-tab__library-head { display: flex; flex-direction: column; gap: 2px; }
.image-tab__library-head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: var(--fw-semi); margin: 0;
}
.image-tab__library-hint { margin: 0; font-size: var(--fs-xs); color: var(--color-muted); }

/* Le combo (grid 2 cols parent + grid auto-fill enfant + max-height +
   overflow scroll + aspect-ratio des items) compresse les cellules à
   0 px. Solution : un WRAPPER (.image-tab__library-scroll) qui porte
   le max-height + overflow scroll, et la grille interne sans contrainte
   de hauteur. L'aspect-ratio des cellules est respecté, le wrapper
   clippe et scrolle.
   Bénéfice UX : les boutons Enregistrer/Annuler restent accessibles
   sans descendre toute la page. */
.image-tab__library .image-picker__grid {
  max-height: none;
  overflow: visible;
}
.image-tab__library-scroll {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: var(--s-2);
  /* Scrollbar discrète */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.image-tab__library-scroll::-webkit-scrollbar { width: 8px; }
.image-tab__library-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
.image-tab__library-scroll::-webkit-scrollbar-track { background: transparent; }
/* La grille de base a son propre padding 8px et sa propre bordure : on
   les annule quand elle est dans le wrapper scroll (sinon doublon visuel). */
.image-tab__library-scroll .image-picker__grid {
  padding: 0;
  border: none;
  background: transparent;
}

/* États multi-select sur les vignettes du picker */
.image-picker__item.is-included { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.image-picker__item.is-primary { border-color: var(--color-bronze); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-bronze) 50%, transparent); }
.image-picker__item input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.image-picker__check {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-paper);
  display: none;
  align-items: center; justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.image-picker__item.is-included .image-picker__check { display: inline-flex; }
.image-picker__star {
  position: absolute;
  top: 6px; left: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: color-mix(in oklab, var(--color-bg) 80%, transparent);
  color: var(--color-muted);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.image-picker__star:hover { background: var(--color-bronze); color: var(--color-paper); transform: scale(1.05); }
.image-picker__item.is-primary .image-picker__star {
  background: var(--color-bronze);
  color: var(--color-paper);
}

/* ── Settings Mon compte (Vague 2) — pages détaillées RGPD ──────────────
   Pattern commun aux 5 sous-pages settings_info/addresses/security/
   preferences/privacy. Mobile-first, font-size 16px (anti zoom iOS),
   tap targets >= 52px. */
.settings-page { padding: var(--s-5) 0 var(--s-7); }
.settings-page h1 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin: 0 0 var(--s-4);
  line-height: 1.2;
}
.settings-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.5vw, 1.2rem);
  font-weight: var(--fw-semi);
  margin: 0 0 var(--s-3);
  color: var(--color-fg);
}
.settings-back {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: var(--s-3);
  padding: var(--s-1) 0;
}
.settings-back:hover { color: var(--color-fg); }
.settings-meta { color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* Form commun */
.settings-form { max-width: 480px; }
.settings-form .field { margin: 0; }
.settings-form .field input.input,
.settings-form .field select.select {
  font-size: 16px;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
}
.settings-form .btn--primary { width: 100%; min-height: 56px; font-size: var(--fs-md); }
.settings-form .field-error { color: var(--color-danger); font-size: var(--fs-xs); margin-top: var(--s-1); }

.settings-form__row {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
}
.settings-form__defaults {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
  margin: 0;
}
.settings-form__defaults legend {
  padding: 0 var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.settings-form__actions {
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
}

/* Toggle simple (cases à cocher stylées) */
.settings-toggle {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0;
  cursor: pointer; font-size: var(--fs-sm);
}
.settings-toggle input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0;
  accent-color: var(--color-bronze);
  cursor: pointer;
}
.settings-toggle span { line-height: 1.4; }

/* Liste d'adresses */
.settings-empty {
  padding: var(--s-5);
  background: var(--color-bg-elevated);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-muted);
}
.settings-addresses { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-3); }
.settings-address {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
}
.settings-address__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2);
}
.settings-address__badges { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.settings-address__lines { margin: 0 0 var(--s-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-fg); }
.settings-address__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Cards privacy (export + delete) */
.settings-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.settings-card h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 var(--s-2);
}
.settings-card p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: 0 0 var(--s-3);
  color: var(--color-muted);
}
.settings-card--danger {
  background: color-mix(in oklab, var(--color-danger) 5%, var(--color-bg-elevated));
  border-color: color-mix(in oklab, var(--color-danger) 30%, var(--color-border));
}
.settings-card--danger h2 { color: var(--color-danger); }

/* Tablette / desktop */
@media (min-width: 640px) {
  .settings-page { padding: var(--s-6) 0; }
  .settings-form .btn--primary { width: auto; min-width: 200px; }
  .settings-form__row { grid-template-columns: 160px 1fr; }
}