/* ==========================================================================
   MAGGMALIGHT — shared components: buttons, cards, form fields, badges, chips.
   Built only from tokens.css. Not in a cascade layer, so these looks win over
   the older rules (layer « legacy »), while page layouts stay as they were.

   New markup uses the component classes:
     <a class="btn btn--primary">…</a>         btn--secondary · btn--on-dark · btn--whatsapp · btn--quiet
                                               sizes: btn--sm · btn--lg · btn--block · btn--icon
     <div class="card card--interactive">…</div>  card--cream · card--dark · card__media · card__body
     <div class="field"><label class="field__label" for="x">Nom <span class="field__req">*</span></label>
       <input class="input" id="x"><p class="field__hint">…</p></div>          field--on-dark
     <label class="check"><input type="checkbox"><span>…</span></label>
     <span class="badge badge--accent">Nouveau</span>  --dark · --soft · --neutral · --success · --error
     <button class="chip" aria-pressed="true">Salon</button>
   Older classes are mapped to the same looks further down (« Older markup »),
   so the whole site already follows the system before each page is rewritten.
   ========================================================================== */

/* ---------------------------------------------------------------- Base type */
body { font-family: var(--font-sans); color: var(--color-ink); }
/* Playfair Display draws « old-style » figures by default (o1, E₂7): use regular ones everywhere. */
html { font-variant-numeric: lining-nums; }

/* ================================================================== BUTTONS */
:where(.btn,
    .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit,
    .ty-btn, .sl-btn-primary, .hero-btn, .academy-btn, .mg-cart-checkout, .mg-order-submit,
    .cart-checkout-btn,
    .btn-outline, .btn-outline-dark, .btn-wa-outline, .sl-btn-outline, .sl-btn-ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md);
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: .9375rem; font-weight: var(--weight-semibold);
  line-height: 1.2; letter-spacing: .01em; text-transform: none; text-decoration: none;
  box-shadow: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.btn { padding: 0 var(--space-6); white-space: nowrap; }
:where(.btn, .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit, .ty-btn,
    .sl-btn-primary, .hero-btn, .academy-btn, .mg-cart-checkout, .mg-order-submit, .btn-outline, .btn-outline-dark,
    .btn-wa-outline, .sl-btn-outline, .sl-btn-ghost) svg { width: 18px; height: 18px; flex-shrink: 0; }
:where(.btn, .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit, .ty-btn,
    .sl-btn-primary, .hero-btn, .academy-btn, .mg-cart-checkout, .mg-order-submit, .btn-outline, .btn-outline-dark,
    .btn-wa-outline, .sl-btn-outline, .sl-btn-ghost):hover { transform: none; box-shadow: none; }
:where(.btn, .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit, .mg-cart-checkout, .mg-order-submit):active { transform: translateY(1px); }
:where(.btn, .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit, .mg-order-submit):where(:disabled, [aria-disabled="true"]) {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* Primary: amber, ink text — one per screen, for the main action. */
:where(.btn--primary, .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit,
    .ty-btn-primary, .sl-btn-primary, .hero-btn.primary, .academy-btn-primary, .mg-cart-checkout, .mg-order-submit, .cart-checkout-btn) {
  background: var(--color-amber); border-color: var(--color-amber); color: var(--color-ink);
}
:where(.btn--primary, .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit,
    .ty-btn-primary, .sl-btn-primary, .hero-btn.primary, .academy-btn-primary, .mg-cart-checkout, .mg-order-submit, .cart-checkout-btn):hover {
  background: var(--color-amber-hover); border-color: var(--color-amber-hover); color: var(--color-ink);
}

/* Secondary: ink outline on light backgrounds. */
:where(.btn--secondary, .btn-outline-dark, .ty-btn-outline, .sl-btn-ghost) {
  background: transparent; border-color: var(--color-ink); color: var(--color-ink);
}
:where(.btn--secondary, .btn-outline-dark, .ty-btn-outline, .sl-btn-ghost):hover {
  background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper);
}

/* On dark: white outline (hero photos, dark bands). */
:where(.btn--on-dark, .btn-outline, .hero-btn.secondary, .btn-wa-outline, .sl-btn-outline, .academy-btn-light) {
  background: transparent; border-color: rgba(255, 255, 255, .7); color: #FFFFFF;
}
:where(.btn--on-dark, .btn-outline, .hero-btn.secondary, .btn-wa-outline, .sl-btn-outline, .academy-btn-light):hover {
  background: rgba(255, 255, 255, .12); border-color: #FFFFFF; color: #FFFFFF;
}

/* WhatsApp: its own green, ink text. */
.btn--whatsapp { background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: var(--color-ink); }
.btn--whatsapp:hover { background: #1FBE5B; border-color: #1FBE5B; }

/* Quiet: a text action (« Voir tout », « Annuler »). */
.btn--quiet { min-height: auto; padding: var(--space-1) var(--space-1); border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--color-bronze); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn--quiet:hover { color: var(--color-ink); }

/* Sizes */
.btn--sm { min-height: var(--control-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: var(--control-lg); padding: 0 var(--space-8); font-size: var(--text-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--control-md); padding: 0; }
.btn--icon.btn--sm { width: var(--control-sm); }

/* Older full-width form buttons keep their width, at the large size. */
:where(.order-modal-submit, .form-submit, .lead-submit, .mg-cart-checkout, .mg-order-submit, .cart-checkout-btn) {
  min-height: var(--control-lg); font-size: var(--text-md);
}
/* The product page's main button shares a row with the quantity on phones: it keeps its compact padding there. */
@media (max-width: 640px) {
  .btn-wa-main { font-size: var(--text-sm); }
}

/* Small add-to-cart button of the home product cards: secondary, small. */
.product-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-sm); border-radius: var(--radius-pill);
  background: var(--color-paper); border: 1.5px solid var(--color-line-strong); color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: .01em; text-transform: none;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.product-add-btn:hover { background: var(--color-amber); border-color: var(--color-amber); color: var(--color-ink); }
/* Cart icon of the catalogue cards: a small amber square. */
.mini-cart { width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-sm); background: var(--color-amber); color: var(--color-ink);
  transition: background-color var(--duration-fast) var(--ease); }
.mini-cart:hover { background: var(--color-amber-hover); }
/* Page numbers */
.page-btn { min-width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-sm); border-color: var(--color-line-strong); font-weight: var(--weight-semibold); }
.page-btn.active, .page-btn[aria-current="page"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* Product page « Demander un devis »: two lines, secondary look. */
.btn-quote { border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-sans); font-weight: var(--weight-semibold); min-height: var(--control-md);
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
.btn-quote:hover { background: var(--color-ink); color: var(--color-paper); }

/* ==================================================================== CARDS */
:where(.card, .product-card, .cat-product-card, .similar-card, .pg-card) {
  background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  box-shadow: none; overflow: hidden;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.card__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-sand); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.card--cream { background: var(--color-cream); }
.card--dark { background: var(--color-dark-2); border-color: rgba(248, 247, 244, .12); color: var(--color-on-dark); }
/* Cards that open something: a soft lift on hover (no lift when motion is reduced, see site.css). */
:where(.card--interactive, .product-card, .cat-product-card, .similar-card, a.pg-card):hover {
  border-color: var(--color-line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px);
}
.pg-card { background: var(--color-cream); padding: var(--space-6); }
.pg-card.dark { background: var(--color-dark-2); border-color: rgba(248, 247, 244, .12); }
.pg-card-img { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2); border-radius: 0; }

/* Product cards: one typography for name and price everywhere. */
:where(.product-card .product-name, .cat-product-name, .similar-card-name) {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  line-height: 1.4; color: var(--color-ink); letter-spacing: 0;
}
:where(.product-card .product-price, .cat-product-price, .similar-card-price) {
  font-family: var(--font-sans); font-size: .9375rem; font-weight: var(--weight-bold); color: var(--color-ink);
}
.product-card .product-info, .similar-card-body { padding: var(--space-4); }
.cat-product-info { padding: var(--space-4) var(--space-4) var(--space-3); }

/* =============================================================== FORM FIELDS */
.field { display: grid; gap: 6px; align-content: start; }
:where(.field__label, .form-label, .lead-field label) {
  display: block; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--color-ink);
}
.field__req { color: var(--color-bronze); margin-left: 2px; }
:where(.field__optional, .lead-optional) { font-weight: var(--weight-regular); color: var(--color-muted); }
.field__hint { font-size: .8125rem; line-height: 1.45; color: var(--color-muted); margin: 0; }
.field__error { font-size: .8125rem; line-height: 1.45; color: var(--color-error); font-weight: var(--weight-medium); margin: 0; }
.field__error:empty { display: none; }

:where(.input, .form-input, .form-select, .form-textarea, .lead-field input, .lead-field select, .lead-field textarea,
    .mg-order-form input[type=text], .mg-order-form input[type=tel], .mg-order-form input[type=email]) {
  width: 100%; min-height: var(--control-md); padding: var(--space-3) 14px;
  background: var(--color-paper); color: var(--color-ink);
  border: 1.5px solid var(--color-field-border); border-radius: var(--radius-field);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: 1.4;
  box-shadow: none; outline: none;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
:where(textarea.input, .form-textarea, .lead-field textarea) { min-height: 104px; resize: vertical; }
:where(select.input, .form-select, .lead-field select) {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D1D1B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
:where(.input, .form-input, .form-select, .form-textarea, .lead-field input, .lead-field select, .lead-field textarea, .mg-order-form input)::placeholder {
  color: var(--color-muted); opacity: 1;
}
:where(.input, .form-input, .form-select, .form-textarea, .lead-field input, .lead-field select, .lead-field textarea,
    .mg-order-form input[type=text], .mg-order-form input[type=tel], .mg-order-form input[type=email]):hover { border-color: var(--color-ink-2); }
:where(.input, .form-input, .form-select, .form-textarea, .lead-field input, .lead-field select, .lead-field textarea,
    .mg-order-form input[type=text], .mg-order-form input[type=tel], .mg-order-form input[type=email]):focus {
  border-color: var(--color-ink); box-shadow: var(--ring);
}
:where(.input, .form-input, .form-select, .form-textarea, .lead-field input, .lead-field select, .lead-field textarea, .mg-order-form input)[aria-invalid="true"] {
  border-color: var(--color-error); background: #FFFBFA;
}

/* On dark backgrounds (contact page form). */
.field--on-dark :where(.field__label, .form-label), .form-label.on-dark { color: var(--color-on-dark); }
.field--on-dark .field__hint { color: var(--color-on-dark-muted); }
:where(.field--on-dark .input, .lead-input, .lead-select, .lead-textarea) {
  width: 100%; min-height: var(--control-md); padding: var(--space-3) 14px;
  background: rgba(255, 255, 255, .06); color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, .45); border-radius: var(--radius-field);
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.4;
}
:where(.field--on-dark .input, .lead-input, .lead-select, .lead-textarea)::placeholder { color: rgba(255, 255, 255, .7); }
:where(.field--on-dark .input, .lead-input, .lead-select, .lead-textarea):hover { border-color: rgba(255, 255, 255, .75); }
:where(.field--on-dark .input, .lead-input, .lead-select, .lead-textarea):focus { border-color: var(--color-amber); box-shadow: var(--ring); }
.lead-select option { color: var(--color-ink); }

/* Checkbox with its sentence. */
:where(.check, .order-confirm-check, .mg-order-check) {
  display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer;
  font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2);
}
:where(.check, .order-confirm-check, .mg-order-check) input[type=checkbox] {
  appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--color-field-border); border-radius: 6px; background: var(--color-paper);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
:where(.check, .order-confirm-check, .mg-order-check) input[type=checkbox]:checked { background: var(--color-ink); border-color: var(--color-ink); }
:where(.check, .order-confirm-check, .mg-order-check) input[type=checkbox]:checked::after {
  content: ''; width: 6px; height: 11px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px;
}
.order-confirm-check { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-field); background: var(--color-cream); }
.order-confirm-check > span { font-weight: var(--weight-semibold); color: var(--color-ink); }
.order-confirm-check small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: var(--weight-regular); color: var(--color-muted); }

/* =================================================================== BADGES */
:where(.badge, .product-badge, .product-showroom-badge) {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 3px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1.3; letter-spacing: .02em; text-transform: none; white-space: nowrap;
}
:where(.badge, .product-showroom-badge) svg { width: 14px; height: 14px; flex-shrink: 0; }
:where(.badge--accent, .product-badge.bestseller) { background: var(--color-amber); color: var(--color-ink); }
:where(.badge--dark, .product-badge.new) { background: var(--color-ink); color: #FFFFFF; }
:where(.badge--soft, .product-showroom-badge) { background: var(--color-amber-soft); color: var(--color-bronze); }
.badge--neutral { background: var(--color-sand); color: var(--color-ink-2); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
:where(.badge--error, .product-badge.promo) { background: var(--color-error-soft); color: var(--color-error); }

/* ==================================================================== CHIPS */
:where(.chip, .filter-btn) {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  background: var(--color-paper); border: 1px solid var(--color-line-strong); color: var(--color-ink);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none;
  box-shadow: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
:where(.chip, .filter-btn):hover { border-color: var(--color-ink); background: var(--color-paper); color: var(--color-ink); box-shadow: none; }
:where(.chip[aria-pressed="true"], .chip.is-active, .filter-btn.active) { background: var(--color-ink); border-color: var(--color-ink); color: #FFFFFF; }
.chip svg { width: 14px; height: 14px; }

/* =========================================================== EYEBROW & TITLES */
.eyebrow { display: block; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-bronze); }
.title-1 { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.title-2 { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.title-3 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-ink-2); }

/* Motion: no lift for visitors who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  :where(.card--interactive, .product-card, .cat-product-card, .similar-card, a.pg-card):hover,
  :where(.btn, .btn-primary, .btn-wa-main, .order-modal-submit, .form-submit, .lead-submit, .cp-submit, .mg-cart-checkout, .mg-order-submit):active { transform: none; }
}

/* Field details on dark backgrounds. */
.field--on-dark .field__req { color: var(--color-amber); }
.field--on-dark :where(.field__optional, .lead-optional) { color: var(--color-on-dark-muted); }
/* Drop-down lists on dark backgrounds: white chevron. */
:where(.lead-select, .field--on-dark select.input) {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}