/**
 * Moteur V4 — components.css
 *
 * EXTRAIT de medson-clinical, prive de ses regles .med-* : ce fichier habille
 * la MECANIQUE des blocs et du chrome, jamais une identite.
 *
 * Éléments réutilisables d'une page à l'autre : boutons, carte produit,
 * intertitres de section, fil d'Ariane.
 *
 * 🔴 LA CARTE PRODUIT EST CELLE DU SOCLE.
 * `front/theme/_v4/_partials/product-card.php` rend le markup (`.sws-product-card__*`)
 * AVEC le câblage des favoris, du comparateur, de la vue rapide et de l'ajout au
 * panier. On l'HABILLE ici, on ne le réécrit pas : une carte propre au thème
 * perdrait ce câblage sans que rien ne le signale.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `.sws-product-card__cta` N'EST PAS UN BOUTON — c'est la RANGÉE qui
   contient le bouton d'ajout et le lien « détail ». L'inclure ici peignait la
   rangée entière en bleu, et le lien détail avec (constaté au rendu réel). */
.med-btn,
/* 🔴 LE BOUTON D'UNE CARTE EST UN BOUTON : il suit `--button-background`
   comme tous les autres, pas `--color-primary`.

   Mesuré le 2026-09-27 sur la page catégorie : « Ajouter au panier » rendait
   en brun `rgb(43,29,22)` — la couleur PRIMAIRE de la marque, celle du texte
   et du pied — là où la production pose l'orange d'accent `rgb(229,118,46)`.
   La couleur primaire d'un thème n'est pas sa couleur d'action : le bouton
   disparaissait dans l'identité au lieu d'appeler au clic.

   `--button-background` est absent par défaut (token OPT-IN) : un thème qui ne
   le règle pas retombe donc sur `--color-primary` et rend EXACTEMENT comme
   avant. Seul un preset qui déclare la couleur de ses boutons change.

   Au survol, `--color-primary-dark` n'est déclaré par AUCUN thème du parc —
   le fond devenait transparent au passage de la souris. On reprend le même
   repli en cascade que le reste du moteur. */
.sws-product-card__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-family-base);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--button-text, #fff);
  background: var(--button-background, var(--color-primary));
  border: 1px solid var(--button-background, var(--color-primary));
  border-radius: var(--button-radius, var(--btn-radius, 999px));
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.med-btn:hover,
.sws-product-card__add:hover {
  background: var(--button-hover-background, var(--color-primary-dark, var(--color-primary)));
  border-color: var(--button-hover-background, var(--color-primary-dark, var(--color-primary)));
  color: var(--button-text, #fff);
}


/* ═══════════════════════════════════════════════════════════════════════════
   INTERTITRES DE SECTION
   ═══════════════════════════════════════════════════════════════════════════
   `.mnx-section__title` / `__subtitle` sont émis par `V4BlockCategoryGrid`.
   Le bloc pose déjà `font-family`, `font-weight` et `color` en ligne : on ne
   règle donc ici que ce qu'il ne touche PAS (taille, marges, alignement) —
   un style en ligne l'emporterait sur toute règle concurrente.
   ═══════════════════════════════════════════════════════════════════════════ */

.mnx-section__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: var(--letter-spacing-heading, -0.015em);
}

.mnx-section__subtitle {
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════════════════

   🔴 CES RÈGLES MANQUAIENT AU SOCLE.
   `.sws-btn` n'était défini que dans le `components.css` de CHAQUE thème V3.
   Les thèmes V4 chargent le components.css DU SOCLE, pas le leur : leurs
   cartes produit portaient donc `sws-btn sws-btn-accent sws-btn--sm` sans
   qu'aucune règle ne réponde — le bouton « Commander » rendait en texte nu.
   Les quatre thèmes V4 étaient touchés, pas un seul.

   Un bouton est un composant du socle, pas une particularité de thème : le
   redéfinir dans chaque thème recréerait le doublon qu'on vient de retirer.
   Les couleurs viennent des tokens, donc chaque thème garde son identité. */

.sws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, .5rem);
  min-height: 48px;
  padding: 1.2rem 2.6rem;
  border: 1px solid transparent;
  border-radius: var(--button-radius, 4px);
  background: transparent;
  color: var(--color-text, #1a1a1a);
  font-family: var(--font-family-base, inherit);
  font-size: var(--font-size-sm, .875rem);
  font-weight: var(--font-weight-heading, 600);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sws-btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent, #fff);
}

.sws-btn-accent:hover {
  background: var(--color-accent-ink, var(--color-accent));
  border-color: var(--color-accent-ink, var(--color-accent));
  color: var(--color-on-accent, #fff);
}

.sws-btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sws-btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.sws-btn-dark {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background, #fff);
}

.sws-btn-dark:hover { opacity: .88; color: var(--color-background, #fff); }

/* `--sm` reste >= 48px : c'est un CTA tactile (carte produit), pas un lien. */
.sws-btn--sm { min-height: 48px; padding: 1rem 2rem; font-size: var(--font-size-sm, .875rem); }
.sws-btn--lg { min-height: 56px; padding: 1.6rem 3.2rem; font-size: var(--font-size-base, 1rem); }

/* ═══════════════════════════════════════════════════════════════════════════
   CARTE PRODUIT
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🔴 `--color-surface` ET NON `--color-background`. Une carte se DÉTACHE du
   fond de page ; `--color-background` EST ce fond, donc une carte qui le porte
   devient invisible. Mesuré le 2026-09-27 sur la page catégorie : carte crème
   `#FFF9F2` sur page crème, là où la production pose du blanc sur crème.
   Même défaut que celui corrigé dans `V4BlockFeatureGrid` — il vivait aussi
   ici.

   `--border-radius` ET NON `--radius` : ce dernier n'existe PAS au design
   system (`ThemeDesignSystem::tokenKeys()` ne le déclare pas), la carte
   retombait donc sur le repli du navigateur. Un token inventé ne se voit pas :
   le CSS reste valide et le rendu paraît « juste un peu différent ».

   Le `padding` manquait : la source en pose un (`var(--space-3)`), sans quoi
   l'image touche les bords de la carte et le titre n'a pas d'air. */
.sws-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .75em;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg, var(--border-radius, 8px));
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sws-product-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

/* 🔴 CARRÉE, comme la production. Le 4/3 avait été posé contre des cartes de
   ~470px de haut — mais la cause était ailleurs : sans `padding` ni fond
   propre, la carte ne bornait rien. Mesuré le 2026-09-27 : la production rend
   269×269 (ratio 1.00), le socle 230×173 (1.33). Un visuel de produit est
   photographié carré ; le recadrer en 4/3 coupe l'objet. */
.sws-product-card__image-wrap {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt, var(--color-surface, #f7f7f7));
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
}
.sws-product-card__image-link { display: block; height: 100%; }
.sws-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.sws-product-card:hover .sws-product-card__image { transform: scale(1.03); }

.sws-product-card__badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 4px 9px;
  background: var(--color-success);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  z-index: 2;
}

/* Favoris / comparateur / vue rapide : discrets au repos, visibles au survol. */
.sws-product-card__wishlist,
.sws-product-card__actions {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
}
.sws-product-card__wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.sws-product-card__wishlist:hover,
.sws-product-card__wishlist.full { color: var(--color-danger); border-color: var(--color-danger); }

.sws-product-card__actions {
  top: 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.sws-product-card:hover .sws-product-card__actions,
.sws-product-card:focus-within .sws-product-card__actions {
  opacity: 1;
  transform: translateX(0);
}
.sws-product-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.sws-product-card__action:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Sur écran tactile il n'y a pas de survol : les actions restent visibles. */
@media (hover: none) {
  .sws-product-card__actions { opacity: 1; transform: none; }
}

.sws-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 16px;
  flex: 1 1 auto;
}

.sws-product-card__title {
  font-family: var(--font-family-heading);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary-dark);
  margin: 0;
}
.sws-product-card__title a { color: inherit; }
.sws-product-card__title a:hover { color: var(--color-primary); }

/* La marque de la maquette (« Lipoelastic ») — rendue par le socle quand la
   donnée existe, masquée sinon. */
.sws-product-card__detail {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin: 0;
}

.sws-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.sws-product-card__price {
  font-family: var(--font-family-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
/* Prix barré : le moteur de promotion décide de sa présence, pas le thème. */
.sws-product-card__price del,
.sws-product-card__price .old {
  font-size: .875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* `__cta` est une RANGÉE de deux liens : le bouton d'ajout, et `__detail` —
   une flèche qui mène à la fiche. Sans mise en forme, la flèche se collait au
   bouton comme un appendice. On en fait un bouton secondaire carré. */
.sws-product-card__cta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.sws-product-card__add {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font-size: 14px;
}

.sws-product-card__detail {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius);
  color: var(--color-text-muted);
}
.sws-product-card__detail:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-surface);
}

/* 🔴 LE SOCLE REND DEUX LIBELLÉS DANS LE MÊME BOUTON.
   `product-card.php` émet `__add-full` (« Ajouter au panier ») ET `__add-short`
   (« + au panier ») : c'est au THÈME d'en masquer un selon la largeur. Sans ces
   règles, le bouton affiche les deux à la suite — « Ajouter au panier Ajouter »
   (constaté au rendu réel, boutique 1000056). */
.sws-product-card__add-short { display: none; }

@media (max-width: 480px) {
  .sws-product-card__add-full  { display: none; }
  .sws-product-card__add-short { display: inline; }
}

.sws-product-card__rank {
  font-size: .75rem;
  color: var(--color-text-muted);
}

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

/* Le socle rend `.mnx-breadcrumb` avec, EN PLUS du fil, un lien promo
   `.mnx-breadcrumb__deals`. Sans mise en forme, « Offres du jour → » se collait
   au nom du produit et se lisait comme une partie du fil
   (« Volume Plein Offres du jour → ») — ce n'était pas une donnée parasite,
   juste un lien non stylé. On le repousse à droite, en lien accentué.

   🔴 `--color-text-muted` ET NON `--color-border`. Mesuré le 2026-09-27 : les
   liens du fil rendaient en `#EADFD0` — la couleur des BORDURES — sur un fond
   de page `#FFF9F2`. Contraste 1,26:1, là où WCAG AA exige 4,5. Le fil était
   donc illisible : on voyait le nom du produit (en couleur de texte) et rien
   devant lui.

   Une couleur de bordure n'est pas une couleur de texte : elle est calibrée
   pour se voir À PEINE, c'est tout son rôle. `--color-text-muted` donne 5,10:1
   sur le même fond — atténué, mais lisible. */
.mnx-breadcrumb,
.sws-v4-slot--breadcrumb,
.mnx-breadcrumb a,
.sws-v4-slot--breadcrumb a,
.mnx-breadcrumb__sep { color: var(--color-text-muted, #6b6b6b); }
/* Au survol, l ACCENT : c est ce que fait la source (.sws-breadcrumb a:hover).
   Un lien qui ne reagit pas au survol ne se signale pas comme cliquable. */
.mnx-breadcrumb a:hover,
.sws-v4-slot--breadcrumb a:hover { color: var(--color-accent, var(--color-text)); }
.mnx-breadcrumb__current { color: var(--color-text); font-weight: 600; }

.mnx-breadcrumb__deals {
  margin-inline-start: auto;
  font-weight: 600;
  color: var(--color-primary) !important;
}
.mnx-breadcrumb__deals:hover { color: var(--color-primary-dark) !important; }

/* ── Le fil d'Ariane respire ───────────────────────────────────────────────
   🔴 Il n'avait QUE des couleurs, aucune marge. Mesuré le 2026-09-27 sur la
   fiche produit : 27px entre le fil et la galerie, contre 76 en production —
   le fil se lisait comme une ligne collée au contenu plutôt que comme un
   repère de navigation.

   `em` et non `rem` : trois thèmes du parc posent `html{font-size:62.5%}` et
   un `rem` y vaudrait 10px au lieu de 16. */
.sws-v4-slot--breadcrumb {
  display: block;
  padding-block: 1.25em 2em;
}