/* ux.css — couche d'amélioration UX/UI, chargée après experience.css.
   Rien n'est supprimé dans tes fichiers existants : pour annuler, retire simplement
   la ligne <link rel="stylesheet" href="ux.css"> des pages. */

/* ---------- 1. Lisibilité : contraste et tailles minimales ---------- */
:root { --muted: #566049; }               /* 4.5:1 → 5.9:1 sur le fond crème */

.announcement,
.hero-topline .eyebrow,
.hero-scroll,
.hero-dietary,
.hero-edition,
.hero-protein > span:first-child,
.hero-protein > span:nth-last-child(2),
.hero-feature small,
.hero-corner-note,
.manifesto > .eyebrow,
.spotlight-panel > .eyebrow,
.spotlight-nutrition > div > span,
.spotlight-nutrition > span,
.spotlight-pack-note,
.flavor-footnote,
.flavor-seal > span,
.proof-row > span,
.origin-location,
.origin-copy > .text-link,
.footer-invitation > .eyebrow,
.footer-bottom,
.product-detail-copy > .eyebrow,
.nutrition-highlights > div > span,
.pack-option small,
.save-label,
.zen-form label > small,
.checkout-summary-heading > span,
.checkout-summary-footer > span { font-size: 12px; }

/* Textes secondaires devenus trop pâles */
.hero-corner-note { opacity: .8; }
.proof-row > span { opacity: .7; }
.spotlight-nutrition > span { opacity: .85; }
.footer-bottom { color: #d5dfcadd; }
.footer-invitation > .eyebrow { color: #dcecb3d0; }
.checkout-summary-heading > span { color: var(--muted); }
.announcement > span { opacity: .85; }
.zen-form input::placeholder, .zen-form textarea::placeholder { color: #737b69; }

/* ---------- 2. Accessibilité clavier ---------- */
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.campaign-footer :focus-visible,
.announcement:focus-visible,
.cookie-banner :focus-visible { outline-color: var(--lime); }

/* Bandeau d'annonce cliquable */
a.announcement { text-decoration: none; transition: background .2s; }
a.announcement:hover { background: var(--green-dark); }
a.announcement:hover .icon { transform: translate(2px, -2px); }
a.announcement .icon { transition: transform .2s; }

/* ---------- 3. Zones tactiles confortables (≥ 40–44 px) ---------- */
@media (pointer: coarse) {
  .quantity-control button { width: 44px; height: 44px; }
  .cart-item .quantity-control button,
  .checkout-line .quantity-control button { width: 40px; height: 40px; }
  .quantity-control output,
  .cart-item .quantity-control > span,
  .checkout-line .quantity-control > span { min-width: 24px; }
  .icon-button { width: 44px; height: 44px; }
  .text-link { min-height: 44px; }
  .footer-links a, .footer-bottom a { display: inline-block; padding-block: 8px; }
}

/* ---------- 4. Formulaires : erreurs claires, seulement après la saisie ---------- */
.zen-form input:user-invalid,
.zen-form select:user-invalid,
.zen-form textarea:user-invalid {
  border-color: #b3261e;
  background: #fff5f3;
  box-shadow: 0 0 0 3px #b3261e1f;
}
.zen-form input:user-valid:not([type="checkbox"]):not(:placeholder-shown),
.zen-form textarea:user-valid:not(:placeholder-shown) { border-color: #6b8a50; }
.zen-form input:focus, .zen-form textarea:focus, .zen-form select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #1c572f26;
}

/* ---------- 5. Checkout mobile : le total reste visible ---------- */
.checkout-mobile-total {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 10px 10px 20px; min-height: 60px;
  color: var(--cream); background: var(--green);
  border-radius: 100px; box-shadow: 0 14px 40px #102d1e40;
}
.checkout-mobile-total > span:first-child { display: flex; flex-direction: column; line-height: 1.2; }
.checkout-mobile-total small { font-size: 12px; opacity: .8; }
.checkout-mobile-total strong { font-size: 18px; font-weight: 600; }
.checkout-mobile-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 100px;
  background: var(--lime); color: var(--green-dark); font-size: 14px; font-weight: 600;
}
.checkout-mobile-link .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.checkout-mobile-total:focus-visible { outline-color: var(--lime); }
.checkout-page { padding-bottom: 84px; }   /* évite que la barre masque le bas de page */
body:has(.cookie-banner:not([hidden])) .checkout-mobile-total { display: none; }

@media (min-width: 850px) {
  .checkout-mobile-total { display: none !important; }
  .checkout-page { padding-bottom: 0; }
}

/* ---------- 6. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  a.announcement, a.announcement .icon { transition: none; }
}