:root {
  --primary-dark: color-mix(in srgb, var(--primary) 70%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 12%, white);
  --text: #1f2328;
  --muted: #5b636b;
  --bg: #faf9f7;
  --card: #ffffff;
  --border: #e4e0d8;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 2px; }

.container { max-width: 1100px; margin-inline: auto; padding: 1rem; }

/* En-tête */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1rem;
  padding: .75rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.brand { font-size: 1.4rem; font-weight: 700; color: var(--primary-dark); }
.site-header nav { display: flex; gap: .5rem; }
.site-header nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: .5rem .9rem; border-radius: 999px;
}
.site-header nav a:hover { background: var(--primary-soft); }
.language-form { display: flex; align-items: center; gap: .4rem; }
.language-form label { color: var(--muted); font-size: .9rem; }
.language-form select {
  width: auto;
  min-height: 40px;
  padding: .35rem 2rem .35rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font: inherit;
}
.language-submit {
  min-height: 40px;
  padding: .35rem .75rem;
  border: 0;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.language-submit:hover { background: var(--primary); color: #fff; }

/* Catégories */
.categories { display: flex; gap: .5rem; overflow-x: auto; padding-block: .25rem 1rem; }
.categories a {
  flex: none; display: inline-flex; align-items: center;
  min-height: 44px; padding: .5rem 1.1rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
}
.categories a.active {
  background: var(--primary-dark); border-color: var(--primary-dark); color: #fff;
}

/* Produits */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
}

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.card img, .no-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.no-image {
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: 3rem; font-weight: 700;
}
.card h3 { margin: .75rem .9rem .25rem; font-size: 1.05rem; }
.price { margin: 0 .9rem .9rem; font-weight: 700; color: var(--primary-dark); }

/* Boutons (pour les prochaines parties) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .6rem 1.3rem;
  border: 0; border-radius: var(--radius);
  background: var(--primary-dark); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.whatsapp-link { background: #128c4a; }

.site-footer {
  margin-top: 2rem; padding: 1.5rem 1rem; text-align: center;
  color: var(--muted); border-top: 1px solid var(--border);
}
/* Messages */
.flashes { margin-bottom: 1rem; }
.flash { margin: 0 0 .5rem; padding: .75rem 1rem; border: 1px solid; border-radius: var(--radius); }
.flash.success { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.flash.error { background: #fdecea; border-color: #f5c2c0; color: #8a1c14; }
.flash.info { background: #e8f1fb; border-color: #9fc5ed; color: #164b7a; }

/* Compteur panier et badge */
.count {
  display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem;
  margin-inline-start: .4rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--primary-dark); color: #fff; font-size: .85rem;
}
.card { position: relative; }
.badge {
  position: absolute; top: .5rem; inset-inline-start: .5rem; z-index: 1;
  padding: .15rem .6rem; border-radius: 999px;
  background: #8a1c14; color: #fff; font-size: .85rem;
}

/* Page produit */
.back { display: inline-block; margin-bottom: 1rem; color: var(--muted); }
.product { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .product { grid-template-columns: 1fr 1fr; align-items: start; } }
.product-media img, .product-media .no-image { border-radius: var(--radius); }
.product-gallery-main {
  display: block; width: 100%; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--radius); background: var(--card);
  cursor: zoom-in;
}
.product-gallery-main img {
  display: block; width: 100%; max-height: 620px; aspect-ratio: 1 / 1;
  object-fit: contain; background: #fff;
}
.product-gallery-thumbnails {
  display: flex; gap: .6rem; overflow-x: auto; padding: .7rem .1rem;
}
.product-gallery-thumbnail {
  flex: 0 0 72px; width: 72px; height: 72px; padding: 3px;
  border: 2px solid var(--border); border-radius: 10px;
  background: var(--card); cursor: pointer;
}
.product-gallery-thumbnail.active,
.product-gallery-thumbnail[aria-pressed="true"] { border-color: var(--primary-dark); }
.product-gallery-thumbnail img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.product-image-dialog {
  position: fixed; width: min(96vw, 1100px); max-width: none;
  max-height: 94dvh; padding: 2.5rem .75rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
}
.product-image-dialog::backdrop { background: rgb(0 0 0 / 82%); }
.product-image-dialog img {
  display: block; max-width: 100%; max-height: calc(94dvh - 4rem);
  margin-inline: auto; object-fit: contain;
}
.product-image-dialog-close {
  position: absolute; inset-block-start: .35rem; inset-inline-end: .5rem;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #eee; font-size: 1.8rem; cursor: pointer;
}
.product-admin-gallery { display: grid; gap: .5rem; }
.product-admin-gallery-image { display: grid; gap: .25rem; }
.product-admin-gallery-image img {
  width: 100px; height: 100px; border-radius: 8px; object-fit: cover;
}
.product-admin-gallery-image span { display: flex; align-items: center; gap: .35rem; }
.product-admin-gallery-image input { width: 20px; height: 20px; }
.product-recommendations { margin-block: 2rem; }
.product-recommendations > h2 { margin-block-end: .75rem; }
.product-recommendations > p { margin-block: 0 .75rem; color: var(--muted); }
.home-banner {
  display: grid; gap: 1rem; overflow: hidden; margin-block: .5rem 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
.home-banner > img {
  display: block; width: 100%; max-height: 320px; object-fit: cover;
}
.home-banner-content { align-self: center; padding: 1.25rem; }
.home-banner-content h1 { margin: 0 0 .5rem; color: var(--primary-dark); }
.home-banner-content p { white-space: pre-line; }
.home-banner-content .btn { margin-top: .5rem; }
@media (min-width: 700px) {
  .home-banner.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-banner > img { height: 100%; max-height: 360px; }
}
.store-page { max-width: 800px; margin-inline: auto; }
.store-page h1 { color: var(--primary-dark); }
.store-page-content { white-space: pre-line; }
.store-page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.store-page-links a { min-height: 44px; padding: .5rem; text-decoration: underline; text-underline-offset: .2em; }
.product-info h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.price.big { margin: 0 0 1rem; font-size: 1.4rem; }
.buy-form { display: grid; gap: .5rem; max-width: 360px; margin-top: 1rem; }
.buy-form label { margin-top: .5rem; font-weight: 600; }
.buy-form .btn { margin-top: 1rem; }
.out { color: #8a1c14; font-weight: 700; }
.restock-form {
  display: grid; gap: .5rem; max-width: 360px; margin-block: 1rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
.restock-form label { margin-top: .25rem; font-weight: 600; }
.restock-form p { margin: 0; color: var(--muted); font-size: .9rem; }

select, input[type="number"], input[type="text"], input[type="tel"], textarea {
  width: 100%; min-height: 44px; padding: .5rem .75rem;
  font: inherit; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
}

.cart-layout, .checkout-layout { display: grid; gap: 1.5rem; }
@media (min-width: 760px) {
  .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.cart-items { display: grid; gap: 1rem; }
.cart-item, .cart-summary, .checkout-form, .confirmation {
  padding: 1.25rem; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cart-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.cart-item h2, .cart-summary h2 { margin: 0; font-size: 1.1rem; }
.cart-item p, .cart-summary p { margin: .35rem 0; }
.cart-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.cart-actions label { flex-basis: 100%; font-weight: 600; }
.cart-actions input { width: 6rem; }
.btn-secondary { background: var(--muted); }
.cart-summary { position: sticky; top: 5rem; }
.cart-summary .btn { width: 100%; margin-top: .75rem; }
.checkout-form { display: grid; gap: .5rem; }
.checkout-form label { margin-top: .5rem; font-weight: 600; }
.checkout-form textarea { min-height: 5rem; resize: vertical; }
.checkout-form .btn { margin-top: .75rem; }
.track-form { max-width: 480px; margin-block: 1.5rem; }
.confirmation { max-width: 640px; margin: 1rem auto; text-align: center; }

.try-on-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--primary-dark);
  border-radius: var(--radius);
  color: var(--primary-dark);
  font-weight: 650;
  text-align: center;
}
.try-on-link:hover { background: var(--primary-soft); }
.try-on-unavailable { color: var(--muted); font-size: .9rem; }
.try-on-page { max-width: 1100px; margin-inline: auto; }
.try-on-heading { max-width: 700px; margin-bottom: 1.5rem; }
.try-on-heading h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.try-on-heading > p:last-child { margin-top: .45rem; color: var(--muted); }
.try-on-eyebrow { margin: 0 0 .25rem; color: var(--primary-dark); font-size: .75rem; font-weight: 750; letter-spacing: .14em; }
.try-on-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 820px) { .try-on-layout { grid-template-columns: minmax(0, 1.1fr) minmax(290px, .9fr); } }
.try-on-stage {
  position: relative;
  overflow: hidden;
  width: min(100%, 560px);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 42%, #fff 0, #f5f0e9 64%, #eee8df 100%);
  box-shadow: 0 18px 45px #33281914;
  isolation: isolate;
}
.try-on-stage [hidden] { display: none !important; }
.try-on-mockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.try-on-mockup[data-mockup="wrist"], .try-on-mockup[data-mockup="bracelet"] { object-position: 55% 50%; }
.try-on-mockup[data-mockup="hand"] { object-position: center 48%; }
.try-on-mockup[data-mockup="neck"] { object-position: 45% 55%; }
.try-on-mockup[data-mockup="ear"] { object-position: 42% 45%; }
.try-on-mockup[data-mockup="suit"] { object-position: center 30%; }
.try-on-mockup[data-mockup="dress"] { object-position: center 42%; }
.try-on-mockup[data-mockup="glasses"] { object-position: center 38%; }
.try-on-photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8c837a;
  font-size: .9rem;
}
.try-on-photo-placeholder span { padding: .5rem .75rem; border-radius: 999px; background: #fff9; }
.try-on-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f5f0e9;
}
.try-on-product {
  position: absolute;
  z-index: 2;
  display: block;
  left: 50%;
  top: 47%;
  width: 42%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: translate(-50%, -50%);
}
.try-on-product.is-dragging { cursor: grabbing; }
.try-on-product img {
  display: block;
  width: 100%;
  max-height: 75vh;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 6px 10px #33281940);
}
.try-on-hint {
  position: absolute;
  z-index: 3;
  inset-inline: 1rem;
  bottom: .4rem;
  width: fit-content;
  margin-inline: auto;
  padding: .35rem .75rem;
  border-radius: 999px;
  color: #4d463f;
  background: #fffdf5e8;
  font-size: .78rem;
  pointer-events: none;
}
.try-on-disclaimer { margin: .65rem 0 0; color: var(--muted); font-size: .82rem; text-align: center; }
.try-on-controls { display: grid; gap: 1rem; }
.try-on-agent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2rem .75rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, white);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary-soft), #fff 75%);
}
.try-on-agent-icon {
  display: grid;
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  color: var(--primary-dark);
  background: #fff;
  font-size: 1.4rem;
}
.try-on-agent h2 { margin: 0; font-size: 1rem; }
.try-on-agent [data-agent-status] { margin: .2rem 0; color: var(--muted); font-size: .88rem; }
.try-on-agent .btn, .try-on-agent-privacy { grid-column: 1 / -1; }
.try-on-agent .btn { width: 100%; margin-top: .5rem; }
.try-on-agent-privacy { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; }
.try-on-controls fieldset, .try-on-upload, .try-on-product-info {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.try-on-controls legend { padding-inline: .3rem; font-weight: 700; }
.mockup-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mockup-choice {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.mockup-choice.is-active { border-color: var(--primary-dark); color: var(--primary-dark); background: var(--primary-soft); font-weight: 700; }
.try-on-upload { display: grid; gap: .45rem; }
.try-on-upload > label, .try-on-adjust > label { font-weight: 650; }
.try-on-upload input[type="file"] { max-width: 100%; font: inherit; }
.try-on-upload p { margin: 0; color: var(--muted); font-size: .82rem; }
.try-on-adjust { display: grid; gap: .55rem; }
.try-on-adjust input[type="range"] { width: 100%; accent-color: var(--primary-dark); }
.try-on-text-button { width: fit-content; min-height: 40px; padding: .4rem .7rem; border: 0; color: var(--primary-dark); background: transparent; font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.try-on-product-info { display: grid; gap: .25rem; }
.try-on-product-info > strong { font-size: 1.1rem; }
.try-on-product-info > span { color: var(--primary-dark); font-weight: 700; }
.try-on-product-info .btn { margin-top: .5rem; }
.try-on-missing { max-width: 620px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); text-align: center; }
.try-on-missing h2 { margin-top: 0; }
.try-on-missing p { color: var(--muted); }