/* =========================================================================
   Sporae — catalogue public + fiche produit modale
   N'introduit aucune nouvelle couleur en dur : tout dérive des variables de
   theme.css (--color-*, --radius-*, --space-*, --shadow-*). Les rares tons
   qui n'existent pas encore comme variables (vert "bio"/succès) reprennent
   exactement les valeurs déjà utilisées ailleurs dans theme.css (.alert--ok),
   pour rester cohérent avec la palette existante sans en inventer une autre.
   ========================================================================= */

/* ---- Extension locale des boutons (theme.css n'a pas ces variantes) ---- */
.btn--block { flex: 1; }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-300); }
.btn svg { width: 18px; height: 18px; }

/* Bascule de démo (pas d'auth réelle en increment 1) -------------------- */
.demo-toggle {
  font-size: var(--fs-300); color: var(--color-primary-darker);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  border: 1px dashed var(--color-primary-dark);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer; font-weight: 700;
}
.demo-toggle:hover { background: var(--color-surface); }

/* ---- En-tête de page centré (spécifique au catalogue) ------------------- */
.page-hero { text-align: center; }
.page-hero .lead { margin-left: auto; margin-right: auto; }

/* ---- Grille catalogue (centrée, équilibrée même avec peu de produits) --- */
.catalogue-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.catalogue-grid .refcard { width: 280px; max-width: 100%; }

.refcard {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden; padding: 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.refcard:hover, .refcard:focus-visible { box-shadow: var(--shadow); transform: translateY(-3px); }

.refcard__thumb {
  position: relative; aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--color-accent-soft), var(--color-surface-alt));
  display: grid; place-items: center;
  padding: var(--space-4);
}
.refcard__thumb img { width: 100%; height: 100%; object-fit: contain; }
.refcard__bio {
  /* Aligné sur le padding du conteneur (var(--space-4)) pour que la puce
     reste flush avec le coin visible de l'image, au lieu de flotter dans
     la zone de padding avec un décalage arbitraire (ancien 10px non issu
     des tokens d'espacement, qui donnait un cadrage bancal). */
  position: absolute; top: var(--space-4); left: var(--space-4);
  z-index: 2; max-width: calc(100% - var(--space-4) * 2);
}

.refcard__body { padding: var(--space-4) var(--space-5) var(--space-5); text-align: center; }
.refcard__body h3 { margin: 0 0 2px; font-size: var(--fs-500); }
.refcard__body em { color: var(--color-text-muted); font-size: var(--fs-300); font-style: italic; }
.refcard__forms { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Badges (réutilisent la palette existante) ------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-300); font-weight: 700; line-height: 1;
  padding: .38rem .7rem; border-radius: var(--radius-pill);
  color: var(--color-primary-dark); background: var(--color-accent-soft);
}
.badge--bio { color: #245a24; background: #eef6ee; } /* mêmes tons que .alert--ok de theme.css */
.badge--outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text-muted); }

/* =========================================================================
   MODALE — fiche produit (une seule instance, réhydratée par produit)
   ========================================================================= */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--color-primary-darker) 55%, rgba(20,12,8,.6));
  backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }

.modal {
  position: relative;
  width: min(920px, 100%);
  max-height: min(88vh, 760px);
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .overlay { animation: pm-overlay-in .18s ease both; }
  .modal { animation: pm-modal-in .22s cubic-bezier(.16,.84,.44,1) both; }
}
@keyframes pm-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.modal__media {
  position: relative; min-height: 320px;
  background: linear-gradient(160deg, var(--color-accent-soft), var(--color-surface-alt));
  display: grid; place-items: center; padding: var(--space-6);
}
.modal__media img { width: 100%; height: 100%; object-fit: contain; }
.modal__media .refcard__bio { top: var(--space-6); left: var(--space-6); max-width: calc(100% - var(--space-6) * 2); }

.modal__body {
  padding: var(--space-6);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-pill); cursor: pointer;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  border: 1px solid var(--color-border); color: var(--color-text);
}
.modal__close:hover { background: var(--color-surface); }

.modal__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.modal__title { margin: 0; font-size: var(--fs-700); line-height: 1.15; }
.modal__latin { margin: 0; color: var(--color-text-muted); font-style: italic; font-size: var(--fs-500); }
.modal__desc { margin: 0; color: var(--color-text); }

/* dl de spécifications — nom distinct de `.specs` (theme.css, tableau gamme) */
.pm-specs { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); font-size: var(--fs-300); margin: 0; }
.pm-specs dt { color: var(--color-primary-dark); font-weight: 700; }
.pm-specs dd { margin: 0; color: var(--color-text-muted); }

.divider { height: 1px; background: var(--color-border); border: 0; margin: var(--space-1) 0; }

/* ---- Bloc traçabilité (visible dans les deux états) --------------------- */
.trace {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.trace__head { display: flex; align-items: center; gap: .6em; font-weight: 700; color: var(--color-primary-dark); }
.trace__head svg { width: 20px; height: 20px; flex: 0 0 auto; }
.trace p { margin: 0; font-size: var(--fs-300); color: var(--color-text-muted); }
.trace a.dl {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-300); font-weight: 700; color: var(--color-primary-dark);
  text-decoration: none; padding: .35rem 0;
}
.trace a.dl:hover { color: var(--color-primary-darker); text-decoration: underline; }
.trace a.dl[aria-disabled="true"] { color: var(--color-text-muted); cursor: not-allowed; }
.trace a.dl svg { width: 16px; height: 16px; }

/* ---- État PUBLIC : prix verrouillé --------------------------------------- */
.pricelock {
  border: 1px dashed var(--color-primary-light);
  background: color-mix(in srgb, var(--color-accent-soft) 45%, transparent);
  border-radius: var(--radius); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3); text-align: center;
}
.pricelock__price { display: flex; align-items: baseline; justify-content: center; gap: .5em; color: var(--color-text-muted); }
.pricelock__blur { font-size: var(--fs-700); font-weight: 800; letter-spacing: .1em; filter: blur(6px); user-select: none; color: var(--color-text); }
.pricelock p { margin: 0; font-size: var(--fs-300); color: var(--color-text-muted); }
.pricelock .btn { align-self: center; }

/* ---- État PRO : prix HT dominant + MOQ + panier -------------------------- */
.proband {
  background: var(--color-surface-alt);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: var(--radius); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.proband__toprow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.price .price__ht { font-size: var(--fs-800); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--color-text); }
.price .price__unit { font-size: var(--fs-400); font-weight: 600; color: var(--color-text-muted); }
.price .price__ttc { font-size: var(--fs-300); color: var(--color-text-muted); margin-top: 2px; }
.stock { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-300); font-weight: 700; color: #245a24; }
.stock .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.stock--soon { color: var(--color-primary-dark); }

.proband__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); font-size: var(--fs-300); }
.proband__meta div span { display: block; color: var(--color-text-muted); }
.proband__meta div strong { color: var(--color-text); }

.proband__buy { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden; }
.stepper button { width: 40px; height: 44px; border: 0; background: transparent; cursor: pointer; font-size: var(--fs-500); color: var(--color-primary-dark); }
.stepper button:hover { background: var(--color-surface-alt); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper input {
  width: 64px; height: 44px; border: 0; text-align: center; font: inherit; font-weight: 700;
  background: transparent; color: var(--color-text); -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__unit { padding-right: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-300); }
.moqnote { font-size: var(--fs-300); color: var(--color-text-muted); margin: 0; }
.moqnote.is-warn { color: var(--color-primary); font-weight: 700; }

.hidden { display: none !important; }

/* ---- Toast confirmation --------------------------------------------------
   Réutilise les tons de .alert--ok (theme.css) plutôt qu'une nouvelle couleur. */
.toast {
  position: fixed; z-index: 210; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: .6em;
  background: #eef6ee; color: #245a24; border: 1.5px solid #bcd9bc;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  box-shadow: var(--shadow); font-weight: 700; font-size: var(--fs-300);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .overlay, .modal, .toast { animation: none !important; transition: none !important; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .modal { grid-template-columns: 1fr; max-height: 92vh; }
  .modal__media { min-height: 180px; max-height: 34vh; }
  .modal__title { font-size: var(--fs-600); }
  .proband__toprow { align-items: flex-start; }
}