/* Maison d'Mist — additive language and appearance experience. */
.language-select {
  position: relative;
  display: inline-flex;
  flex: none;
}

.language-current {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .35rem 0;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: .76rem;
  letter-spacing: .12em;
  cursor: pointer;
  white-space: nowrap;
}

.language-current:hover,
.language-current[aria-expanded="true"] {
  color: var(--olive-deep);
  border-block-end-color: var(--olive);
}

.language-chevron {
  font-size: .9em;
  line-height: 1;
  transition: transform .2s var(--ease);
}

.language-current[aria-expanded="true"] .language-chevron {
  transform: rotate(180deg);
}

.language-menu {
  position: absolute;
  z-index: 80;
  inset-block-start: calc(100% + .55rem);
  inset-inline-end: 0;
  width: 190px;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow);
}

.language-menu[hidden] { display: none; }

.language-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  padding: .55rem .65rem;
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--body);
  font-size: .86rem;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}

.language-menu a:hover,
.language-menu a:focus-visible {
  background: var(--cream-warm);
  color: var(--olive-deep);
}

.language-menu a[aria-current="page"] {
  color: var(--olive);
}

.language-menu a[aria-current="page"]::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--olive);
}

.language-menu a[aria-current="page"] span:first-child {
  flex: 1;
}

html[lang="ar"] .language-current,
html[lang="ar"] .language-menu a {
  font-size: .9rem;
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .language-menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + .55rem);
  }
}

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #15170f;
  --cream-warm: #1c1e16;
  --cream-deep: #24261d;
  --olive: #b3a05f;
  --olive-deep: #f1ecdf;
  --olive-soft: #c1b47a;
  --sage: #b6a06a;
  --sage-pale: #665c3f;
  --ink: #eee9dc;
  --muted: #b5b09f;
  --line: #45422f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cream: #15170f;
    --cream-warm: #1c1e16;
    --cream-deep: #24261d;
    --olive: #b3a05f;
    --olive-deep: #f1ecdf;
    --olive-soft: #c1b47a;
    --sage: #b6a06a;
    --sage-pale: #665c3f;
    --ink: #eee9dc;
    --muted: #b5b09f;
    --line: #45422f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .42);
  }
}

.theme-select {
  min-height: 38px;
  max-width: 150px;
  padding: .35rem .2rem;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: .76rem;
  cursor: pointer;
  white-space: nowrap;
}

.theme-select:hover { color: var(--olive-deep); }
.theme-select option { background: var(--cream); color: var(--ink); }
html[lang="ar"] .theme-select { font-size: .9rem; }

:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .hero__logo,
:root[data-theme="dark"] .story__art img {
  filter: brightness(0) invert(1);
}

:root[data-theme="dark"] .site-footer { background: var(--cream-deep); }
/* Dark Luxury turns --cream-warm dark too, so the footer's text, links and
   icons switch to the light ink; they were dark on dark before 0.31. */
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .site-footer a,
:root[data-theme="dark"] .site-footer .socials a { color: var(--ink); }
:root[data-theme="dark"] .site-footer .socials a { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
:root[data-theme="dark"] .site-footer .socials a:hover { background: var(--ink); color: var(--cream-deep); border-color: var(--ink); }
:root[data-theme="dark"] .footer__fine { border-block-start-color: color-mix(in srgb, var(--ink) 18%, transparent); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img,
  :root:not([data-theme="light"]) .hero__logo,
  :root:not([data-theme="light"]) .story__art img {
    filter: brightness(0) invert(1);
  }
  :root:not([data-theme="light"]) .site-footer { background: var(--cream-deep); }
  :root:not([data-theme="light"]) .site-footer,
  :root:not([data-theme="light"]) .site-footer a,
  :root:not([data-theme="light"]) .site-footer .socials a { color: var(--ink); }
  :root:not([data-theme="light"]) .site-footer .socials a { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
  :root:not([data-theme="light"]) .site-footer .socials a:hover { background: var(--ink); color: var(--cream-deep); border-color: var(--ink); }
  :root:not([data-theme="light"]) .footer__fine { border-block-start-color: color-mix(in srgb, var(--ink) 18%, transparent); }
}

@media (max-width: 860px) {
  .theme-select { max-width: 180px; font-size: 1rem; }
  html[lang="ar"] .theme-select { font-size: 1.05rem; }
}

.product-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080a07;
}

.product-stage video,
.product-stage .product-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080a07;
}

.media-play {
  position: absolute;
  z-index: 3;
  inset-inline-end: 12px;
  inset-block-end: 12px;
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding: .4rem .65rem;
  border: 1px solid var(--sage-pale);
  border-radius: 999px;
  background: var(--olive);
  color: var(--cream);
  font-family: var(--body);
  font-size: .72rem;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}

.media-play:hover { transform: translateY(-2px); }
.product-stage.is-playing .media-play { background: var(--olive-deep); }
.media-play[hidden] { display: none; }

.media-error {
  position: absolute;
  z-index: 4;
  inset-inline: 10px;
  inset-block-end: 10px;
  margin: 0;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  font-size: .78rem;
}

.media-error[hidden] { display: none; }

.ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-block-start: 1rem;
}

.ingredient {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 32px;
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--muted);
  font-family: var(--body);
  font-size: .7rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.ingredient:hover,
.ingredient.is-active {
  border-color: var(--olive);
  color: var(--olive-deep);
  transform: translateY(-1px);
}

.ingredient__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}

.ingredient__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ingredient__name { white-space: nowrap; }

.ingredient-detail {
  margin-block-start: .85rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--line);
}

.ingredient-detail strong {
  display: block;
  color: var(--olive-deep);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
}

.ingredient-detail p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
}

html[lang="ar"] .ingredient { font-size: .78rem; }

.pwa-update {
  position: fixed;
  z-index: 200;
  left: 50%;
  inset-block-end: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  font-size: .85rem;
}

.pwa-update button {
  border: 1px solid var(--olive);
  background: var(--olive);
  color: var(--cream);
  padding: .45rem .8rem;
  cursor: pointer;
  font-family: var(--body);
  white-space: nowrap;
}

.pwa-update button:disabled { opacity: .6; cursor: wait; }

/* Narrow phones: the longest labels ("Découvrir la collection") must stay on
   one line at 320 px. The release checks test every width from 320 to 1440. */
@media (max-width: 400px) {
  .btn { padding-inline: 1.1rem; letter-spacing: .08em; }
  /* "Commander sur WhatsApp" inside a 320 px card. */
  .card__action .btn { padding-inline: .7rem; letter-spacing: .04em; }
}

/* Release number in the footer, at full strength so it can be read at a glance.
   The release checks hold it equal to the VERSION file. */
.footer__version {
  opacity: 1; font-weight: 500; letter-spacing: .06em;
  border: 1px solid currentColor; border-radius: 999px; padding: .1rem .6rem;
}

/* ---------- Category filter ---------- */

.filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-block: calc(clamp(2.5rem, 5vw, 4rem) * -.45) clamp(1.8rem, 4vw, 2.6rem);
}
.filter {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--olive-deep); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
html[lang="ar"] .filter { text-transform: none; letter-spacing: 0; font-size: .92rem; }
.filter:hover { border-color: var(--olive); }
.filter[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--cream); }
.filter__count {
  font-size: .68rem; letter-spacing: 0; min-width: 1.5em; text-align: center;
  padding: .05rem .4rem; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent);
}
.card[hidden] { display: none; }
@media (max-width: 400px) {
  .filter { padding: .5rem .8rem; letter-spacing: .06em; }
}

/* ---------- Animated product stage (products without a film) ---------- */

.anim-stage { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer; }
.anim-stage > img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform 6.5s cubic-bezier(.2, .6, .3, 1);
}
.anim-stage.is-playing > img { transform: scale(1.08); }

/* a soft light passing across the sticker */
.anim-stage::after {
  content: ""; position: absolute; inset: -10% -60%; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%);
  transform: translateX(-70%); opacity: 0;
}
.anim-stage.is-playing::after { animation: mdm-sheen 1.8s ease-in-out .4s 1 both; }
@keyframes mdm-sheen {
  0% { transform: translateX(-70%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(70%); opacity: 0; }
}

/* nine lanes, each carrying one bubble or petal across the picture */
.anim-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.anim-layer b { position: absolute; inset: 0; }
.anim-layer i { position: absolute; inset-inline-start: var(--x); width: var(--s); height: var(--s); opacity: 0; }
.anim-layer b:nth-child(1) { --x: 8%;  --s: 26px; --d: 4.6s; --w: .2s; }
.anim-layer b:nth-child(2) { --x: 22%; --s: 14px; --d: 4.0s; --w: .9s; }
.anim-layer b:nth-child(3) { --x: 34%; --s: 34px; --d: 5.2s; --w: .5s; }
.anim-layer b:nth-child(4) { --x: 47%; --s: 18px; --d: 4.4s; --w: 1.4s; }
.anim-layer b:nth-child(5) { --x: 58%; --s: 28px; --d: 4.9s; --w: .1s; }
.anim-layer b:nth-child(6) { --x: 69%; --s: 12px; --d: 3.8s; --w: 1.1s; }
.anim-layer b:nth-child(7) { --x: 78%; --s: 22px; --d: 4.7s; --w: .7s; }
.anim-layer b:nth-child(8) { --x: 88%; --s: 16px; --d: 4.2s; --w: 1.7s; }
.anim-layer b:nth-child(9) { --x: 15%; --s: 20px; --d: 4.5s; --w: 2.0s; }

/* bubbles: rise from below the bar to above the picture, swaying */
.anim--bubbles .anim-layer i {
  bottom: -12%; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 12%, rgba(255,255,255,.25) 32%, rgba(200,225,235,.12) 60%, rgba(255,255,255,0) 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 0 6px rgba(255,255,255,.25);
}
.anim--bubbles.is-playing .anim-layer b { animation: mdm-rise var(--d) cubic-bezier(.3, .1, .6, 1) var(--w) 1 both; }
.anim--bubbles.is-playing .anim-layer i { animation: mdm-sway 1.6s ease-in-out var(--w) 3 alternate both, mdm-fade var(--d) linear var(--w) 1 both; }
@keyframes mdm-rise { from { transform: translateY(0); } to { transform: translateY(-118%); } }

/* petals: drift down from above, turning */
.anim--petals .anim-layer i {
  top: -10%; border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, #f3b6c0, #c2405a 70%);
  box-shadow: inset -2px -2px 3px rgba(80, 10, 20, .25);
}
.anim--petals.is-playing .anim-layer b { animation: mdm-fall var(--d) cubic-bezier(.4, .1, .7, 1) var(--w) 1 both; }
.anim--petals.is-playing .anim-layer i { animation: mdm-turn 2.2s ease-in-out var(--w) 2 alternate both, mdm-fade var(--d) linear var(--w) 1 both; }
@keyframes mdm-fall { from { transform: translateY(0); } to { transform: translateY(118%); } }
@keyframes mdm-turn { from { transform: translateX(0) rotate(0deg); } to { transform: translateX(26px) rotate(160deg); } }

@keyframes mdm-sway { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes mdm-fade { 0% { opacity: 0; } 12% { opacity: .95; } 80% { opacity: .9; } 100% { opacity: 0; } }

.anim-stage.is-playing .media-play { background: var(--olive-deep); }