/* ============================================================
   Come To Farm — components.css
   Composants réutilisables conformes à DESIGN.md
   (Organic Editorialism)

   ⚠️  Charger APRÈS tokens.css et base.css.
   ============================================================ */


/* =============================================================================
   1. BUTTONS — DESIGN.md §5 "Tactile Connection"
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: var(--touch-target-min);
  padding: var(--spacing-3) var(--spacing-6);
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  border-radius: var(--radius-pebble);                       /* "pebble-like" */
  cursor: pointer;
  text-decoration: none;
  transition:
    transform   var(--duration-fast)   var(--easing-spring),
    box-shadow  var(--duration-normal) var(--easing-out),
    background  var(--duration-fast)   var(--easing-out),
    opacity     var(--duration-fast)   var(--easing-out);
  white-space: nowrap;
  user-select: none;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); transform: none; }

/* — Primary : gradient vert forêt (CTA principal) — */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-ambient-sm);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-ambient-md);
}

/* — Secondary : ghost border, texte primary (DESIGN.md §5) — */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--border-ghost);
}
.btn-secondary:hover {
  background: var(--color-surface-container-low);
  box-shadow: inset 0 0 0 1.5px var(--border-ghost-hover);
}

/* — Tertiary : surface_container_high, pas de bordure — */
.btn-tertiary {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}
.btn-tertiary:hover {
  background: var(--color-surface-container-highest);
  transform: translateY(-1px);
}

/* — Cashback : accent doré (réservé aux actions cashback) — */
.btn-cashback {
  background: var(--color-accent-cashback);
  color: var(--color-on-accent-cashback);
  box-shadow: var(--shadow-ambient-sm);
}
.btn-cashback:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-ambient-md);
}

/* — Tailles — */
.btn-sm { min-height: 36px; padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-label-md); }
.btn-lg { min-height: 56px; padding: var(--spacing-4) var(--spacing-8); font-size: var(--text-title-md); }

/* — Block (pleine largeur sur mobile) — */
.btn-block { width: 100%; }


/* =============================================================================
   2. CARDS — Tonal Layering (DESIGN.md §4)
   "Soft Lift" : surface_container_lowest sur surface_container_high
   ========================================================================== */

.card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  padding: var(--spacing-6);
  transition:
    transform  var(--duration-normal) var(--easing-out),
    box-shadow var(--duration-normal) var(--easing-out);
}

.card-elevated {
  box-shadow: var(--shadow-ambient-sm);
}
.card-elevated:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-ambient-md);
}

.card-tinted {                                                 /* card sur teinte de surface */
  background: var(--color-surface-container-low);
}

/* — Card "How it Works" (DESIGN.md §5 — pas de divider, gap large) — */
.card-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  background: var(--color-surface-container-low);
  border-radius: var(--radius-card);
}

.card-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  border-radius: var(--radius-pebble);
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: var(--weight-bold);
}


/* =============================================================================
   3. SELECTION CHIPS (DESIGN.md §5 — catégories produits)
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  border: none;                                               /* pas de bordure 1px ! */
  border-radius: var(--radius-pebble);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-out),
              color      var(--duration-fast) var(--easing-out);
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  background: var(--color-surface-container-high);
}

.chip.active,
.chip[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.chip-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}


/* =============================================================================
   4. INPUT FIELDS & SEARCH (DESIGN.md §5)
   ========================================================================== */

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-ghost);            /* ghost border @ 15% */
  font-family: var(--font-body);
  font-size: max(1rem, 16px);                                 /* anti-zoom iOS */
  line-height: var(--leading-body);
  transition: background var(--duration-fast) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.6;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  background: var(--color-surface-bright);
  box-shadow: inset 0 0 0 2px var(--border-ghost-focus);     /* @ 40% sur focus */
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

/* — Search bar : pleine largeur, full radius — */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-5);
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-pebble);
  box-shadow: inset 0 0 0 1px var(--border-ghost);
  transition: box-shadow var(--duration-fast) var(--easing-out);
}

.search-bar:focus-within {
  background: var(--color-surface-bright);
  box-shadow: inset 0 0 0 2px var(--border-ghost-focus);
}

.search-bar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: max(1rem, 16px);
  color: var(--color-on-surface);
}


/* =============================================================================
   5. NAV — Glassmorphism (DESIGN.md §2 "Signature Textures")
   ========================================================================== */

.nav-glass {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
  min-height: 64px;
  padding: var(--spacing-3) var(--section-padding-x);
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  /* PAS de bordure 1px (DESIGN.md "No-Line Rule") — la séparation se fait
     par contraste de surface avec la section suivante. */
}


/* =============================================================================
   6. BADGE / PILL
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  border-radius: var(--radius-pebble);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge-cashback {
  background: var(--color-accent-cashback);
  color: var(--color-on-accent-cashback);
}

.badge-success { background: var(--color-success); color: var(--color-on-success); }
.badge-warning { background: var(--color-warning); color: var(--color-on-warning); }
.badge-error   { background: var(--color-error);   color: var(--color-on-error);   }


/* =============================================================================
   7. ÉTAT — empty / loading / error
   ========================================================================== */

.state-empty,
.state-loading,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-12) var(--spacing-6);
  text-align: center;
  color: var(--color-on-surface-variant);
}


/* =============================================================================
   8. UTILITAIRES TYPOGRAPHIQUES
   ========================================================================== */

.text-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-weight: var(--weight-extrabold); }
.text-display-md { font-family: var(--font-display); font-size: var(--text-display-md); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-weight: var(--weight-bold); }
.text-display-sm { font-family: var(--font-display); font-size: var(--text-display-sm); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-weight: var(--weight-bold); }
.text-headline-lg { font-family: var(--font-display); font-size: var(--text-headline-lg); letter-spacing: var(--tracking-headline); }
.text-headline-md { font-family: var(--font-display); font-size: var(--text-headline-md); letter-spacing: var(--tracking-headline); }
.text-body-lg     { font-size: var(--text-body-lg); }
.text-body-md     { font-size: var(--text-body-md); }
.text-eyebrow {                                                /* DESIGN.md — pré-titre uppercase */
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-container);
}

.text-muted   { color: var(--color-on-surface-variant); }
.text-primary { color: var(--color-primary); }


/* =============================================================================
   9. UTILITAIRES LAYOUT
   ========================================================================== */

.stack       { display: flex; flex-direction: column; gap: var(--spacing-4); }
.stack-sm    { display: flex; flex-direction: column; gap: var(--spacing-2); }
.stack-lg    { display: flex; flex-direction: column; gap: var(--spacing-8); }
.row         { display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-6);
}


/* ── Catalogue & Liste conso (Temps 1) ── */

/* Grille responsive des tuiles produit */
.catalogue-grid {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (max-width: 479px) {
  .catalogue-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
  }
}

/* Tuile produit individuelle */
.catalogue-product-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-ambient-sm);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  /* Pas de bordure 1px (DESIGN.md "No-Line Rule") */
}

/* Titre du produit */
.catalogue-product-title {
  font-family: var(--font-display);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface);
  line-height: var(--leading-headline);
}

/* Prix indicatif — atténué via surface-variant (jamais de gris pur) */
.catalogue-product-price {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface-variant);
}

/* Ligne stepper quantité : boutons − / + + compteur centré */
.cart-stepper {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.cart-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  border: none;
  border-radius: var(--radius-pebble);
  font-size: var(--text-title-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--easing-out),
              transform  var(--duration-fast) var(--easing-spring);
}
.cart-stepper button:hover  { background: var(--color-surface-container-highest); }
.cart-stepper button:active { transform: scale(0.92); }
.cart-stepper span {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface);
  min-width: 1.5rem;
}

/* Champ poids compact (pricing par kg) */
input.cart-weight {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-ghost);
  font-family: var(--font-body);
  font-size: max(1rem, 16px);  /* anti-zoom iOS */
  transition: background var(--duration-fast) var(--easing-out),
              box-shadow  var(--duration-fast) var(--easing-out);
}
input.cart-weight:focus {
  outline: none;
  background: var(--color-surface-bright);
  box-shadow: inset 0 0 0 2px var(--border-ghost-focus);
}

/* Carte récapitulatif panier */
.cart-summary {
  background: var(--color-surface-container);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-ambient-sm);
  padding: var(--spacing-5) var(--spacing-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}
.cart-summary strong {
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
}

/* Conteneur de section catalogue */
.farm-catalogue {
  padding: var(--spacing-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* ── Lignes de l'éditeur catalogue agriculteur ── */

/* Ligne produit de l'éditeur (mise en page flex horizontale) */
.catalogue-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-ambient-xs);
  transition: box-shadow var(--duration-fast) var(--easing-out);
}
.catalogue-row:hover {
  box-shadow: var(--shadow-ambient-sm);
}

/* Zone principale : info produit + champs */
.catalogue-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Actions à droite (bouton supprimer / toggle actif) */
.catalogue-row-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

/* État de visibilité du produit (Visible / Masqué) — libellé explicite pour que
   l'agri voie d'un coup d'œil si ses clients verront le produit. */
.catalogue-status {
  font-size: 0.78rem;
  font-weight: 600;
}
.catalogue-status.is-visible { color: var(--color-success); }
.catalogue-status.is-masked { color: var(--color-warning); }
/* Ligne entière atténuée quand le produit est masqué (sans gris : on baisse l'opacité). */
.catalogue-row.is-masked { opacity: 0.68; }

/* Badge d'alerte : produit dont le taux TVA n'est plus compatible avec la ferme.
   Surface teintée erreur (pas de bordure 1px ni d'ombre — cf. DESIGN.md). */
.catalogue-badge-warn {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-card);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-error);
  background: var(--surface-error-soft);
}

/* Responsive : passe en colonne sur mobile */
@media (max-width: 479px) {
  .catalogue-row {
    flex-direction: column;
  }
  .catalogue-row-actions {
    align-self: flex-end;
  }
}

/* ── Formulaire catalogue : champs label-au-dessus (scopé pour ne pas impacter
   les autres pages qui utilisent .field avec leurs propres styles inline). ── */
#catalogue-form .field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-4);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
}
#catalogue-form .field input,
#catalogue-form .field select {
  font-weight: var(--weight-regular);
}
/* Le champ Nom est enveloppé dans .autocomplete → on reporte la marge sur le wrapper. */
#catalogue-form .autocomplete { margin-bottom: var(--spacing-4); }
#catalogue-form .autocomplete .field { margin-bottom: 0; }

/* ── Autocomplétion du libellé produit (formulaire catalogue) ──────────────── */
/* Conteneur positionnant la liste de suggestions sous le champ Nom. */
.autocomplete {
  position: relative;
}
/* Liste flottante : surface tonale + ombre ambiante (pas de bordure 1px ni gris — DESIGN.md). */
.autocomplete-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-ambient-md);
}
.autocomplete-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: calc(var(--radius-card) - 6px);
  cursor: pointer;
}
/* Survol/sélection clavier : shift de surface (pas de couleur d'accent agressive). */
.autocomplete-item:hover,
.autocomplete-item.is-active {
  background: var(--color-surface-container-high);
}
.autocomplete-item__name {
  font-weight: 600;
}
.autocomplete-item__meta {
  font-size: 0.78rem;
  color: var(--color-on-surface-variant); /* texte secondaire lisible (contraste WCAG AA) */
}

/* Message d'alerte du formulaire (ex. taux TVA non activé) — visible côté agri. */
.msg.error {
  margin: 0.25rem 0 0;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-card);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-error);
  background: var(--surface-error-soft);
}

/* Case « Utiliser la totalité de mon avoir » (carte rendue par scripts/avoir-declare.js).
   display:flex => l'étiquette occupe sa propre ligne, sinon ce <label> inline se collerait
   au champ « Avoir que vous souhaitez utiliser ici » qui précède. */
.avoir-declare .avoir-all-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
.avoir-declare .avoir-all-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* ── Lignes pré-remplissage panier (scan.html) ── */

/* Ligne produit dans le bloc cart-prefill */
.cart-prefill-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  /* séparation via espace vertical (DESIGN.md — pas de divider 1px) */
}

/* Libellé produit dans la ligne pré-remplissage */
.cart-prefill-line > span {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Input quantité compact dans le pré-remplissage */
.cart-prefill-qty {
  width: 72px;
  flex-shrink: 0;
  min-height: 40px;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border-ghost);
  font-family: var(--font-body);
  font-size: max(1rem, 16px);
  text-align: center;
  transition: background var(--duration-fast) var(--easing-out),
              box-shadow  var(--duration-fast) var(--easing-out);
}
.cart-prefill-qty:focus {
  outline: none;
  background: var(--color-surface-bright);
  box-shadow: inset 0 0 0 2px var(--border-ghost-focus);
}