/* ═══════════════════════════════════════════════════════════════
   Maison Léon — boutique de démonstration OptiDress
   Feuille autonome : n'affecte aucune page du site principal.
   ─────────────────────────────────────────────────────────────
   1. base           5. pages produit
   2. en-tête        6. widget OptiDress « Essayez sur moi »
   3. hero           7. responsive
   4. catalogue
═══════════════════════════════════════════════════════════════ */

/* ═══ 1. base ═══════════════════════════════════════════════ */
:root {
  --ml-noir:   #16150f;
  --ml-encre:  #2a2822;
  --ml-gris:   #77746c;
  --ml-gris-c: #a3a099;
  --ml-trait:  #e6e3dc;
  --ml-fond:   #f6f5f1;
  --ml-carte:  #efedE7;
  --ml-bleu:   #0055FE;
  --ml-serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --ml-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ml-ease:   cubic-bezier(.22, 1, .36, 1);
  --ml-pad:    clamp(18px, 3.2vw, 46px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ml {
  margin: 0;
  background: #fff;
  color: var(--ml-encre);
  font-family: var(--ml-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.ml img { max-width: 100%; }
body.ml a { color: inherit; text-decoration: none; }
body.ml button { font: inherit; color: inherit; }
/* le reset ci-dessus est plus spécifique que les classes seules :
   on force explicitement les boutons à texte clair */
body.ml .ml-btn-cart, body.ml .ov-btn-noir, body.ml .ml-try-badge { color: #fff; }

.ml-wrap { max-width: 1400px; margin: 0 auto; padding-inline: var(--ml-pad); }

.ml-strip {
  display: block; background: var(--ml-noir); color: #fff; text-align: center;
  padding: 9px 16px; font-size: 12.5px; line-height: 1.45;
  transition: background .22s var(--ml-ease);
}
/* body.ml a { color: inherit } est plus spécifique que .ml-strip seul :
   on force le blanc sur le lien-bandeau et tout son contenu */
body.ml a.ml-strip, body.ml a.ml-strip:visited, .ml-strip * { color: #fff; }
.ml-strip:hover { background: #000; }
.ml-strip-lien { text-decoration: underline; text-underline-offset: 3px; }
.ml-strip b { font-weight: 600; }

/* ═══ 2. en-tête ════════════════════════════════════════════ */
.ml-head {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.9); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ml-trait);
}
.ml-head-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; padding: 16px 0;
}
.ml-nav { display: flex; gap: clamp(14px, 1.8vw, 30px); }
.ml-nav a {
  font-size: 13.5px; color: var(--ml-encre); white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .25s var(--ml-ease);
}
.ml-nav a:hover { border-color: var(--ml-encre); }

.ml-brand {
  font-family: var(--ml-serif); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ml-noir);
  justify-self: center; white-space: nowrap; line-height: 1;
}

.ml-tools { justify-self: end; display: flex; align-items: center; gap: 6px; }
.ml-ico {
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; color: var(--ml-encre);
  transition: background .22s var(--ml-ease);
}
.ml-ico:hover { background: var(--ml-fond); }
.ml-ico svg { width: 21px; height: 21px; }
.ml-bag { position: relative; }
.ml-badge {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: var(--ml-noir); color: #fff;
  font-size: 10.5px; font-weight: 600; display: grid; place-items: center; line-height: 1;
}
.ml-badge[hidden] { display: none; }
.ml-burger { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 10px 8px; }
.ml-burger span { display: block; height: 1.5px; background: var(--ml-encre); border-radius: 2px; margin: 4px 0; transition: transform .3s var(--ml-ease), opacity .2s; }
.ml-head.menu-open .ml-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ml-head.menu-open .ml-burger span:nth-child(2) { opacity: 0; }
.ml-head.menu-open .ml-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ═══ 3. hero ═══════════════════════════════════════════════ */
.ml-hero { padding: clamp(18px, 2.4vw, 30px) 0 0; }
.ml-hero-in {
  position: relative; overflow: hidden; border-radius: 2px;
  min-height: clamp(300px, 38vw, 480px); display: flex; align-items: center;
  background: #6a6359;
}
.ml-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.ml-hero-txt { position: relative; z-index: 2; padding: clamp(28px, 4vw, 68px); max-width: 620px; color: #fff; }
.ml-hero-kick { font-size: 13.5px; letter-spacing: .02em; opacity: .9; }
.ml-hero-h {
  font-family: var(--ml-serif); font-weight: 300; font-size: clamp(34px, 5.2vw, 66px);
  line-height: 1.02; margin: 14px 0 clamp(20px, 2.6vw, 34px); letter-spacing: -.005em;
}
.ml-hero-h em { display: block; font-style: italic; }
.ml-btn-noir {
  display: inline-flex; align-items: center; gap: 10px; background: var(--ml-noir); color: #fff;
  border: 1px solid var(--ml-noir); border-radius: 2px; padding: 14px 28px;
  font-size: 14px; font-weight: 450; cursor: pointer; transition: all .26s var(--ml-ease);
}
.ml-btn-noir:hover { background: #fff; color: var(--ml-noir); }

/* ═══ 4. catalogue ══════════════════════════════════════════ */
.ml-sec { padding-block: clamp(40px, 5vw, 74px); }
.ml-sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 2.4vw, 30px); }
.ml-sec-hd h2 { font-size: 17px; font-weight: 600; margin: 0; color: var(--ml-noir); letter-spacing: -.01em; }
.ml-voir { font-size: 13.5px; color: var(--ml-gris); border-bottom: 1px solid transparent; }
.ml-voir:hover { color: var(--ml-noir); border-color: var(--ml-noir); }

.ml-filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-filtre {
  padding: 8px 17px; border-radius: 99px; border: 1px solid var(--ml-trait); background: #fff;
  font-size: 13px; color: var(--ml-gris); cursor: pointer; transition: all .22s var(--ml-ease);
}
.ml-filtre:hover { border-color: var(--ml-noir); color: var(--ml-noir); }
.ml-filtre.on { background: var(--ml-noir); border-color: var(--ml-noir); color: #fff; }

.ml-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.7vw, 26px); }
.ml-grid-6 { grid-template-columns: repeat(4, 1fr); }

.ml-card { position: relative; }
.ml-card-ph {
  display: block; position: relative; overflow: hidden; background: var(--ml-carte);
  aspect-ratio: 4/5; border-radius: 2px;
}
.ml-card-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ml-ease); }
.ml-card:hover .ml-card-ph img { transform: scale(1.045); }
.ml-card-flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 2px; background: var(--ml-bleu); color: #fff;
}
.ml-heart {
  position: absolute; top: 10px; left: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.86); backdrop-filter: blur(4px); cursor: pointer;
  display: grid; place-items: center; color: var(--ml-encre); transition: all .22s var(--ml-ease);
}
.ml-heart svg { width: 18px; height: 18px; }
.ml-heart:hover { background: #fff; }
.ml-heart.on { color: #c0392b; }
.ml-heart.on svg path { fill: currentColor; }

/* badge OptiDress : ouvre le widget avec le vêtement de la carte */
.ml-try-badge {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: var(--ml-bleu); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -6px rgba(0,85,254,.55);
  transition: transform .22s var(--ml-ease), box-shadow .22s var(--ml-ease);
}
.ml-try-badge svg { width: 22px; height: 22px; }
.ml-try-badge:hover { transform: scale(1.08); box-shadow: 0 12px 26px -6px rgba(0,85,254,.65); }

.ml-card-nom { display: block; font-size: 13.5px; color: var(--ml-encre); margin: 14px 0 4px; }
.ml-card-nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.ml-card-prix { font-size: 13px; color: var(--ml-gris); }
.ml-dots { display: flex; gap: 6px; margin-top: 10px; }
.ml-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* bandeau rassurance */
.ml-reassure { background: var(--ml-fond); border-top: 1px solid var(--ml-trait); }
.ml-reassure-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: clamp(22px, 2.6vw, 34px); }
.ml-re { display: flex; align-items: center; gap: 13px; }
.ml-re svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--ml-encre); }
.ml-re b { display: block; font-size: 13.5px; font-weight: 500; color: var(--ml-noir); }
.ml-re span { display: block; font-size: 12.5px; color: var(--ml-gris); }

/* bandeau OptiDress : l'export exact de la maquette, cliquable sur son CTA */
.ml-od { padding-block: clamp(28px, 3.5vw, 54px); }
.ml-od-cadre { position: relative; border-radius: 14px; overflow: hidden; }
.ml-od-img { display: block; width: 100%; height: auto; }
.ml-od-hit {
  position: absolute; left: 5%; top: 73%; width: 20%; height: 15%;
  cursor: pointer; border-radius: 8px;
}
.ml-od-hit:focus-visible { outline: 2px solid var(--ml-bleu); outline-offset: 2px; }

/* pied de page boutique */
.ml-foot { border-top: 1px solid var(--ml-trait); padding-block: clamp(36px, 4.4vw, 62px) 26px; }
.ml-foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.ml-foot-brand .ml-brand { font-size: 21px; display: block; margin-bottom: 12px; }
.ml-foot-brand p { font-size: 13px; line-height: 1.6; color: var(--ml-gris); margin: 0; max-width: 34ch; }
.ml-foot h4 { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ml-gris-c); margin: 0 0 14px; font-weight: 500; }
.ml-foot a { display: block; font-size: 13.5px; color: var(--ml-gris); margin-bottom: 9px; }
.ml-foot a:hover { color: var(--ml-noir); }
.ml-foot-bottom {
  margin-top: clamp(28px, 3.4vw, 46px); padding-top: 20px; border-top: 1px solid var(--ml-trait);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ml-gris-c);
}
.ml-foot-bottom a { display: inline; text-decoration: underline; text-underline-offset: 3px; }

/* ═══ 5. page produit ═══════════════════════════════════════ */
.ml-fil { font-size: 12.5px; color: var(--ml-gris-c); padding-top: 22px; }
.ml-fil a:hover { color: var(--ml-noir); }
.ml-fil span { margin: 0 7px; }

.ml-prod { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(26px, 4vw, 70px); padding-block: clamp(22px, 2.6vw, 34px) clamp(46px, 5vw, 80px); align-items: start; }
.ml-gal { display: grid; grid-template-columns: 74px 1fr; gap: 14px; }
.ml-gal-solo { grid-template-columns: 1fr; }
.ml-gal-thumbs { display: flex; flex-direction: column; gap: 10px; }
.ml-thumb { border: 1px solid var(--ml-trait); border-radius: 2px; overflow: hidden; background: var(--ml-carte); padding: 0; cursor: pointer; aspect-ratio: 4/5; }
.ml-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-thumb.on { border-color: var(--ml-noir); }
.ml-gal-main { position: relative; background: var(--ml-carte); border-radius: 2px; overflow: hidden; aspect-ratio: 4/5; }
.ml-gal-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ml-pi-brand { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ml-gris-c); }
.ml-pi-h { font-family: var(--ml-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; margin: 12px 0 10px; color: var(--ml-noir); }
.ml-pi-prix { font-size: 18px; color: var(--ml-noir); }
.ml-pi-taxe { font-size: 12px; color: var(--ml-gris-c); margin: 4px 0 24px; }
.ml-pi-desc { font-size: 14.5px; line-height: 1.68; color: var(--ml-gris); margin: 0 0 28px; }

.ml-bloc { margin-bottom: 24px; }
.ml-bloc-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ml-gris-c); margin-bottom: 12px; }
.ml-bloc-lab b { color: var(--ml-noir); font-weight: 500; font-size: 13.5px; text-transform: none; letter-spacing: .01em; }
.ml-guide { font-size: 11px; color: var(--ml-gris); text-decoration: underline; text-underline-offset: 3px; letter-spacing: .04em; text-transform: none; }
.ml-guide:hover { color: var(--ml-noir); }

.ml-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.ml-sw { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ml-trait); background: #fff; padding: 3px; cursor: pointer; transition: border-color .2s var(--ml-ease); }
.ml-sw i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.ml-sw:hover { border-color: var(--ml-gris-c); }
.ml-sw.on { border-color: var(--ml-noir); border-width: 1.5px; }

.ml-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-size { min-width: 52px; padding: 11px 13px; border-radius: 2px; border: 1px solid var(--ml-trait); background: #fff; font-size: 13.5px; color: var(--ml-gris); cursor: pointer; transition: all .2s var(--ml-ease); }
.ml-size:hover { border-color: var(--ml-noir); color: var(--ml-noir); }
.ml-size.on { background: var(--ml-noir); border-color: var(--ml-noir); color: #fff; }

.ml-actions { display: grid; gap: 10px; margin-top: 28px; }
.ml-btn {
  width: 100%; border-radius: 2px; padding: 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .24s var(--ml-ease);
  border: 1px solid transparent;
}
.ml-btn-cart { background: var(--ml-noir); color: #fff; border-color: var(--ml-noir); }
.ml-btn-cart:hover { background: #fff; color: var(--ml-noir); }
.ml-btn-cart.done { background: #fff; color: var(--ml-noir); }
.ml-btn-try { background: #fff; color: var(--ml-noir); border-color: var(--ml-noir); }
.ml-btn-try:hover { background: var(--ml-fond); }
.ml-btn-try img { height: 15px; width: auto; }
.ml-btn-try[disabled] { border-color: var(--ml-trait); color: var(--ml-gris-c); cursor: not-allowed; }
.ml-btn-try[disabled] img { opacity: .35; }
.ml-note { font-size: 12px; line-height: 1.55; color: var(--ml-gris-c); text-align: center; margin: 12px 0 0; }

.ml-acc { border-top: 1px solid var(--ml-trait); margin-top: 30px; }
.ml-acc details { border-bottom: 1px solid var(--ml-trait); }
.ml-acc summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 13.5px; font-weight: 500; color: var(--ml-noir); display: flex; justify-content: space-between; align-items: center; }
.ml-acc summary::-webkit-details-marker { display: none; }
.ml-acc summary::after { content: '+'; font-size: 17px; color: var(--ml-gris-c); font-weight: 300; }
.ml-acc details[open] summary::after { content: '−'; }
.ml-acc p { font-size: 13.5px; line-height: 1.65; color: var(--ml-gris); margin: 0 0 16px; }

/* ═══ 6. widget OptiDress ═══════════════════════════════════ */
.ov { position: fixed; inset: 0; z-index: 300; display: none; font-family: var(--ml-sans); }
.ov.is-open { display: block; }
.ov-scrim { position: absolute; inset: 0; background: rgba(30,28,22,.5); backdrop-filter: blur(2px); opacity: 0; animation: ovFade .3s var(--ml-ease) forwards; }
@keyframes ovFade { to { opacity: 1; } }

.ov-panel {
  position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(468px, calc(100vw - 28px));
  background: #fff; border-radius: 22px; box-shadow: 0 30px 90px rgba(20,18,14,.3);
  display: flex; flex-direction: column; padding: 12px 0 0;
  transform: translateX(24px); opacity: 0; animation: ovIn .42s var(--ml-ease) forwards;
}
@keyframes ovIn { to { transform: none; opacity: 1; } }

.ov-grab { width: 44px; height: 4px; border-radius: 99px; background: #dedbd4; margin: 0 auto 10px; display: block; flex: 0 0 auto; }

.ov-top { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; padding: 0 18px; flex: 0 0 auto; }
.ov-titre { font-size: 16px; font-weight: 600; text-align: center; margin: 0; color: var(--ml-noir); }
.ov-nav { width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ml-encre); transition: background .2s var(--ml-ease); }
.ov-nav:hover { background: var(--ml-fond); }
.ov-nav svg { width: 20px; height: 20px; }
.ov-nav[hidden] { visibility: hidden; }

/* message de prévention (gabarit générique) */
.ov-note {
  display: flex; gap: 10px; align-items: center;
  margin: 10px 20px 0; padding: 10px 12px; flex: 0 0 auto;
  background: #eef3ff; border: 1px solid rgba(0,85,254,.16); border-radius: 12px;
}
.ov-note[hidden] { display: none; }
.ov-note svg { width: 17px; height: 17px; color: var(--ml-bleu); flex: 0 0 auto; }
.ov-note p { margin: 0; flex: 1; font-size: 11.5px; line-height: 1.45; color: #3b4763; }
.ov-note b { color: var(--ml-noir); }
body.ml .ov-note button {
  border: 0; background: var(--ml-bleu); color: #fff; border-radius: 8px;
  padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
}
/* quand la note est visible, l'avatar de l'étape 1 se resserre : pas de scroll */
.ov-panel:has(.ov-note:not([hidden])) .ov-avatar img { height: clamp(150px, calc(100vh - 585px), 330px); }

.ov-sous { text-align: center; font-size: 13px; line-height: 1.5; color: var(--ml-gris); margin: 6px auto 0; padding: 0 34px; max-width: 340px; flex: 0 0 auto; }

.ov-steps { list-style: none; display: flex; align-items: center; justify-content: center; gap: 0; margin: 13px 0 0; padding: 0 34px; flex: 0 0 auto; }
.ov-step { display: flex; align-items: center; }
.ov-step span {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ml-trait); background: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ml-gris-c);
  transition: all .3s var(--ml-ease); flex: 0 0 auto;
}
.ov-step + .ov-step::before { content: ''; width: clamp(28px, 8vw, 62px); height: 1.5px; background: var(--ml-trait); transition: background .3s var(--ml-ease); }
.ov-step.is-on span { background: var(--ml-noir); border-color: var(--ml-noir); color: #fff; }
.ov-step.is-done span { background: var(--ml-noir); border-color: var(--ml-noir); color: transparent; position: relative; }
.ov-step.is-done span::after {
  content: ''; position: absolute; width: 9px; height: 5px; border-left: 1.7px solid #fff; border-bottom: 1.7px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.ov-step.is-done + .ov-step::before, .ov-step.is-done::before { background: var(--ml-noir); }

.ov-body { flex: 1 1 auto; overflow-y: auto; padding: 0 20px 8px; min-height: 0; scrollbar-width: thin; }
.ov-body::-webkit-scrollbar { width: 5px; }
.ov-body::-webkit-scrollbar-thumb { background: #e0ddd6; border-radius: 99px; }

.ov-vue { display: none; padding-top: 14px; }
.ov-vue.is-on { display: block; animation: ovVue .34s var(--ml-ease); }
@keyframes ovVue { from { opacity: 0; transform: translateY(8px); } }

.ov-h { font-size: 19px; font-weight: 600; text-align: center; color: var(--ml-noir); margin: 0; letter-spacing: -.01em; }
.ov-h-sous { text-align: center; font-size: 13px; color: var(--ml-gris); margin: 7px 0 0; }
.ov-opt { display: block; width: max-content; margin: 10px auto 0; font-size: 11.5px; color: var(--ml-gris); background: var(--ml-fond); border-radius: 99px; padding: 4px 12px; }

.ov-avatar { display: grid; place-items: center; margin: 10px 0 14px; }
.ov-avatar img { height: clamp(180px, calc(100vh - 480px), 330px); width: auto; object-fit: contain; }
.ov-avatar-sm img { height: clamp(120px, calc(100vh - 610px), 250px); }
.ov-avatar-xs img { height: clamp(70px, calc(100vh - 830px), 150px); }

.ov-row {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  border: 1px solid var(--ml-trait); border-radius: 14px; background: #fff; padding: 13px 15px;
  cursor: pointer; margin-bottom: 10px; transition: all .22s var(--ml-ease);
}
.ov-row:hover { border-color: var(--ml-noir); }
.ov-row-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--ml-fond); display: grid; place-items: center; flex: 0 0 auto; color: var(--ml-encre); }
.ov-row-ic svg { width: 22px; height: 22px; }
.ov-row b { flex: 1; font-size: 15px; font-weight: 600; color: var(--ml-noir); }
.ov-chev { width: 19px; height: 19px; color: var(--ml-gris-c); flex: 0 0 auto; }

.ov-card { border: 1px solid var(--ml-trait); border-radius: 14px; padding: 12px 16px 8px; margin-bottom: 10px; }
.ov-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ov-card-hd b { font-size: 14.5px; font-weight: 600; color: var(--ml-noir); }
.ov-val { display: inline-flex; align-items: center; gap: 7px; background: var(--ml-fond); border-radius: 99px; padding: 5px 12px; font-size: 13.5px; font-weight: 500; color: var(--ml-noir); }
.ov-val svg { width: 14px; height: 14px; color: var(--ml-gris); }

.ov-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 99px; background: var(--ml-trait); outline: none; margin: 0; cursor: pointer; }
.ov-range::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; border-radius: 50%; background: var(--ml-noir); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.28); cursor: grab; }
.ov-range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--ml-noir); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.28); cursor: grab; }
.ov-ticks { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.ov-ticks span { font-size: 10.5px; color: var(--ml-gris-c); }
.ov-ticks i { width: 1px; height: 5px; background: var(--ml-trait); display: block; }

.ov-btn { width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: all .22s var(--ml-ease); margin-top: 6px; }
.ov-btn-noir { background: var(--ml-noir); color: #fff; }
.ov-btn-noir:hover { background: #000; }
.ov-btn-noir[disabled] { background: #dedbd4; color: #fff; cursor: not-allowed; }
.ov-lien { display: block; width: 100%; background: none; border: 0; margin: 14px 0 0; font-size: 13.5px; font-weight: 500; color: var(--ml-noir); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ov-mini { font-size: 11px; line-height: 1.5; color: var(--ml-gris-c); text-align: center; margin: 8px 0 0; }

.ov-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.ov-tile {
  position: relative; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--ml-trait); border-radius: 12px; background: #fff; padding: 12px 12px;
  cursor: pointer; transition: all .22s var(--ml-ease);
}
.ov-tile:hover { border-color: var(--ml-gris-c); }
.ov-tile.is-on { background: var(--ml-fond); border-color: var(--ml-noir); }
.ov-sil { width: 22px; height: 34px; color: #56534b; flex: 0 0 auto; }
.ov-tile b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ml-noir); }
.ov-tile em { display: block; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--ml-gris); margin-top: 2px; }
.ov-check { position: absolute; top: 9px; right: 9px; width: 17px; height: 17px; border-radius: 50%; background: var(--ml-noir); opacity: 0; transition: opacity .2s var(--ml-ease); }
.ov-check::after { content: ''; position: absolute; inset: 0; margin: auto; width: 7px; height: 4px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg) translate(1px, -1.5px); }
.ov-tile.is-on .ov-check { opacity: 1; }

.ov-unit { display: flex; width: max-content; margin: 0 0 12px auto; background: var(--ml-fond); border-radius: 99px; padding: 3px; }
.ov-unit button { border: 0; background: none; border-radius: 99px; padding: 5px 15px; font-size: 12.5px; color: var(--ml-gris); cursor: pointer; transition: all .2s var(--ml-ease); }
.ov-unit button.is-on { background: #fff; color: var(--ml-noir); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.09); }

.ov-mes { display: grid; gap: 7px; margin-bottom: 6px; }
.ov-mrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ml-trait); border-radius: 12px; padding: 7px 12px; cursor: text; }
.ov-mrow:focus-within { border-color: var(--ml-noir); }
.ov-mic { width: 34px; height: 34px; border-radius: 9px; background: var(--ml-fond); display: grid; place-items: center; flex: 0 0 auto; color: #56534b; }
.ov-mic svg { width: 21px; height: 17px; }
.ov-mrow b { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--ml-noir); }
.ov-mval { display: inline-flex; align-items: baseline; gap: 3px; background: var(--ml-fond); border-radius: 99px; padding: 5px 11px; font-size: 13px; font-weight: 500; color: var(--ml-noir); }
.ov-mval input { width: 38px; border: 0; background: none; font: inherit; text-align: right; padding: 0; color: inherit; -moz-appearance: textfield; }
.ov-mval input::-webkit-outer-spin-button, .ov-mval input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ov-mval input:focus { outline: none; }
.ov-mval i { font-style: normal; font-size: 11.5px; color: var(--ml-gris); }
.ov-pen { width: 15px; height: 15px; color: var(--ml-gris-c); flex: 0 0 auto; }

/* génération */
.ov-vue-load { text-align: center; }
.ov-load-ic { display: grid; place-items: center; width: 56px; height: 46px; margin: 6px auto 20px; color: var(--ml-encre); }
.ov-load-ic svg { width: 44px; height: 38px; }
.ov-avatar-load { position: relative; margin: 16px 0 22px; }
.ov-avatar-load img { height: clamp(180px, calc(100vh - 440px), 300px); }
.ov-ring { position: absolute; bottom: 6px; left: 50%; width: 190px; height: 44px; margin-left: -95px; border: 1.5px solid rgba(22,21,15,.14); border-radius: 50%; animation: ovRing 2.6s var(--ml-ease) infinite; }
.ov-ring-2 { animation-delay: 1.3s; }
@keyframes ovRing { 0% { transform: scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.ov-bar { height: 5px; border-radius: 99px; background: var(--ml-trait); overflow: hidden; }
.ov-bar i { display: block; height: 100%; width: 0; background: var(--ml-noir); border-radius: 99px; transition: width .35s linear; }
.ov-load-msg { font-size: 14px; color: var(--ml-encre); margin: 18px 0 0; }

/* résultat */
.ov-res-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ov-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ml-trait); border-radius: 99px; background: #fff; padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--ml-noir); cursor: pointer; transition: all .22s var(--ml-ease); }
.ov-pill:hover { border-color: var(--ml-noir); }
.ov-pill svg { width: 17px; height: 17px; }
.ov-res-acts { display: flex; gap: 8px; }
.ov-sq { width: 38px; height: 38px; border: 1px solid var(--ml-trait); border-radius: 10px; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ml-encre); transition: all .22s var(--ml-ease); }
.ov-sq:hover { border-color: var(--ml-noir); }
.ov-sq svg { width: 18px; height: 18px; }

.ov-stage { position: relative; background: var(--ml-fond); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 14px; height: clamp(210px, calc(100vh - 556px), 350px); overflow: hidden; }
.ov-stage-img { max-height: 100%; max-width: 100%; min-height: 0; object-fit: contain; border-radius: 12px; }
.ov-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ml-trait); background: rgba(255,255,255,.94); cursor: pointer; display: grid; place-items: center; color: var(--ml-encre); z-index: 3; transition: all .2s var(--ml-ease); }
.ov-arrow:hover { border-color: var(--ml-noir); }
.ov-arrow svg { width: 17px; height: 17px; }
.ov-arrow-l { left: 10px; }
.ov-arrow-r { right: 10px; }

.ov-drag { position: absolute; top: 16px; left: 16px; width: 78px; height: 78px; border-radius: 10px; border: 1px solid var(--ml-trait); background: #fff; padding: 5px; cursor: grab; z-index: 4; box-shadow: 0 6px 18px rgba(20,18,14,.1); transition: box-shadow .2s var(--ml-ease); }
.ov-drag:active { cursor: grabbing; }
.ov-drag.is-drag { box-shadow: 0 14px 30px rgba(20,18,14,.22); }
.ov-drag img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.ov-hand { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; color: var(--ml-noir); pointer-events: none; }
.ov-hint { position: absolute; top: 104px; left: 16px; width: 92px; text-align: center; color: var(--ml-gris-c); pointer-events: none; z-index: 3; }
.ov-hint svg { width: 58px; height: 44px; display: block; margin: 0 auto 2px; }
.ov-hint span { font-size: 11px; line-height: 1.3; display: block; }
/* la vignette reste visible une fois le vêtement porté (on peut re-glisser) ;
   seule l'indication texte s'efface pour ne pas gêner la lecture du rendu */
.ov-stage.is-worn .ov-hint { opacity: .45; }

.ov-prod { display: flex; align-items: center; gap: 13px; border: 1px solid var(--ml-trait); border-radius: 12px; padding: 9px 12px; margin: 12px 0 13px; }
.ov-prod img { width: 50px; height: 62px; object-fit: cover; border-radius: 6px; background: var(--ml-carte); flex: 0 0 auto; }
.ov-prod b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ml-noir); }
.ov-prod span { display: block; font-size: 13.5px; color: var(--ml-gris); margin-top: 2px; }

.ov-taille-hd { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ml-noir); margin-bottom: 10px; }
.ov-info { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--ml-trait); background: #fff; font-size: 10px; color: var(--ml-gris); cursor: help; display: grid; place-items: center; padding: 0; }
.ov-tailles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.ov-t { border-radius: 10px; border: 1px solid; padding: 10px 4px; text-align: center; background: #fff; cursor: pointer; transition: transform .18s var(--ml-ease); }
.ov-t:hover { transform: translateY(-2px); }
.ov-t b { display: block; font-size: 15px; font-weight: 600; }
.ov-t span { display: block; font-size: 9.5px; line-height: 1.25; margin-top: 3px; }
.ov-t-ok   { border-color: #a9d6b4; background: #f0f9f2; }
.ov-t-ok b, .ov-t-ok span { color: #2c7a48; }
.ov-t-warn { border-color: #f0cfa2; background: #fdf7ee; }
.ov-t-warn b, .ov-t-warn span { color: #a5711f; }
.ov-t-bad  { border-color: #f0b8b8; background: #fdf1f1; }
.ov-t-bad b, .ov-t-bad span { color: #b8443f; }
.ov-t.on { outline: 1.5px solid var(--ml-noir); outline-offset: 1px; }

.ov-btn-pay { background: #fff; border-color: var(--ml-trait); color: var(--ml-noir); font-size: 13.5px; font-weight: 500; margin-top: 10px; }
.ov-btn-pay:hover { border-color: var(--ml-noir); }
.ov-apple { width: 13px; height: 16px; }
.ov-sep { width: 1px; height: 15px; background: var(--ml-trait); display: inline-block; }
.ov-g { font-weight: 700; color: #4285f4; }

.ov-pied { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--ml-gris); margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--ml-trait); flex: 0 0 auto; }
.ov-pied svg { width: 15px; height: 15px; }
/* pendant la génération et sur le résultat, l'écran reste épuré (cf. maquettes) */
.ov-panel:has(.ov-vue-load.is-on) .ov-pied,
.ov-panel:has(.ov-vue-res.is-on) .ov-pied { display: none; }

/* ═══ avis boutique de test : pop-up centrée à l'arrivée ═══ */
.ml-avis {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 260;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  width: min(440px, calc(100vw - 32px)); padding: 20px 20px 16px;
  background: #fff; border: 1px solid var(--ml-trait); border-radius: 18px;
  /* 1er box-shadow = voile plein écran derrière la carte */
  box-shadow: 0 0 0 200vmax rgba(15, 17, 26, .38),
              0 30px 70px -20px rgba(20, 18, 14, .4);
  animation: mlAvisIn .45s var(--ml-ease) both;
}
@keyframes mlAvisIn { from { transform: translate(-50%, -50%) scale(.94); opacity: 0; } }
.ml-avis[hidden] { display: none; }
.ml-avis-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: #eef3ff; display: grid; place-items: center; color: var(--ml-bleu); }
.ml-avis-ico svg { width: 19px; height: 19px; }
.ml-avis p { margin: 0; flex: 1 1 280px; font-size: 12.5px; line-height: 1.5; color: #3b4763; }
.ml-avis b { color: var(--ml-noir); }
body.ml .ml-avis button {
  flex: 0 0 auto; margin-left: auto; border: 0; cursor: pointer;
  background: var(--ml-bleu); color: #fff; border-radius: 999px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 600;
}
body.ml .ml-avis .ml-avis-x {
  position: absolute; top: 10px; right: 10px; margin: 0; padding: 0;
  width: 28px; height: 28px; border-radius: 999px;
  background: #f1f2f6; color: #3b4763;
  display: grid; place-items: center;
}
.ml-avis-x svg { width: 12px; height: 12px; }

/* ═══ 6a. bandeau retour vers OptiDress + démo ══════════════ */
.ml-site {
  position: relative; overflow: hidden;
  background: #0b0d12; color: #fff; text-align: center;
}
.ml-site::before {
  content: ''; position: absolute; left: 50%; top: -40%; transform: translateX(-50%);
  width: 900px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,85,254,.32), transparent 65%);
  pointer-events: none;
}
.ml-site-in { position: relative; z-index: 1; padding-block: clamp(52px, 6.5vw, 96px); max-width: 720px; margin-inline: auto; }
.ml-site-logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.ml-site h2 {
  font-family: var(--ml-serif); font-weight: 300; font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06; letter-spacing: -.01em; margin: 22px 0 14px;
}
.ml-site h2 em { font-style: italic; }
.ml-site p { font-size: 15px; line-height: 1.65; color: #aab0bf; margin: 0 auto 32px; max-width: 52ch; }
.ml-site-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ml-site-ctas a {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 14px 26px; font-size: 15px; font-weight: 500;
  letter-spacing: -.005em; transition: all .24s var(--ml-ease);
}
.ml-cta-demo { background: var(--ml-bleu); color: #fff; box-shadow: 0 14px 34px -10px rgba(0,85,254,.6); }
.ml-cta-demo:hover { background: #0044d1; transform: translateY(-1px); }
.ml-cta-site { border: 1px solid rgba(255,255,255,.28); color: #fff; }
.ml-cta-site:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ═══ 6b. pied de page OptiDress (repris du site principal) ══ */
.footer {
  --ink: #0A0C12; --ink-2: #1A1E27; --ink-3: #4A5060;
  --accent: #0055FE; --ease: cubic-bezier(.22,.61,.36,1);
  background: #fff; color: var(--ink); padding: 80px 0 40px;
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(10,12,18,.08);
  font-family: var(--ml-sans);
}
.footer .container { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); position: relative; z-index: 1; }
.footer-top {
  display: grid; grid-template-columns: 1fr 2fr; gap: 60px;
  padding-bottom: 60px; border-bottom: 1px solid rgba(10,12,18,.08);
}
.footer-brand p { font-size: 14px; color: var(--ink-3); max-width: 280px; margin: 20px 0 0; line-height: 1.55; }
.footer .nav-logo { color: var(--ink); display: inline-block; }
.footer .nav-logo-img { height: 28px; width: auto; display: block; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 10px; }
.footer-h {
  font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 6px;
}
.footer-cols a { font-size: 14px; color: var(--ink-2); transition: color .25s var(--ease); }
.footer-cols a:hover { color: var(--accent); }
.footer-mega { text-align: center; padding: 30px 0 22px; user-select: none; line-height: 0; }
.footer-mega img { width: min(820px, 86%); height: auto; opacity: .12; display: inline-block; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-3);
  padding-top: 24px; border-top: 1px solid rgba(10,12,18,.08);
}

/* objets flottants du pied de page */
.footer-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fd-orb { position: absolute; border-radius: 50%; filter: blur(46px); }
.fd-orb-1 { width: 300px; height: 300px; top: -70px; right: 4%; background: radial-gradient(circle, rgba(0,85,254,.28), transparent 70%); }
.fd-orb-2 { width: 240px; height: 240px; bottom: 6%; left: -50px; background: radial-gradient(circle, rgba(0,85,254,.16), transparent 70%); }
.fd-glass {
  position: absolute; border-radius: 22px; background: rgba(233,240,255,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(0,85,254,.14);
  box-shadow: 0 26px 50px -24px rgba(0,85,254,.34), inset 0 1px 0 rgba(255,255,255,.85);
  transform: rotate(var(--r,0deg)); animation: odFloat var(--d,9s) ease-in-out infinite var(--dl,0s);
  display: grid; place-items: center;
}
.fd-glass img { width: 64%; height: 64%; object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(10,12,18,.30));
  transform: rotate(calc(var(--r, 0deg) * -0.35)); }
.fd-glass-1 { --r:-12deg; --d:9s;  --dl:0s; width: 112px; height: 112px; bottom: 30%; left: 6%; }
.fd-glass-2 { --r: 14deg; --d:8s;  --dl:1s; width: 84px;  height: 84px;  bottom: 22%; right: 9%; }
.fd-clo {
  position: absolute; width: 120px; aspect-ratio: 3/4; right: 4%; top: 30%; --r: 9deg; --d: 8s; --dl: .5s;
  border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, #F3F5FA, #E6ECF7);
  box-shadow: 0 30px 54px -26px rgba(10,12,18,.30), inset 0 0 0 1px rgba(255,255,255,.6);
  transform: rotate(var(--r)); animation: odFloat var(--d) ease-in-out infinite var(--dl);
}
.fd-clo img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(10,12,18,.22)); }
.fd-spark { position: absolute; fill: var(--accent, #0055FE); animation: odTwinkle 3.6s ease-in-out infinite; }
.fd-spark-1 { width: 20px; right: 24%; bottom: 46%; }
.fd-spark-2 { width: 15px; left: 32%; bottom: 34%; animation-delay: 1.4s; }
@keyframes odFloat { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }
@keyframes odTwinkle { 0%,100% { opacity: .18; transform: scale(.8); } 50% { opacity: .6; transform: scale(1.1); } }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .fd-glass, .fd-clo, .fd-spark { animation: none !important; } }

/* écrans peu hauts : compléments anti-scroll du widget, par paliers */
@media (max-height: 899px) {
  .ov-avatar-xs { display: none; }   /* le mini-avatar de l'étape 4 est redondant */
}
@media (max-height: 819px) {
  .ov-h { font-size: 17.5px; }
  .ov-h-sous { margin: 4px 0 0; }
  .ov-mes { gap: 6px; }
  .ov-mrow { padding: 5px 11px; }
  .ov-mic { width: 30px; height: 30px; }
  .ov-unit { margin-bottom: 8px; }
  .ov-btn { padding: 12px; }
  .ov-lien { margin: 8px 0 0; }
  .ov-mini { margin: 6px 0 0; font-size: 10.5px; }
  .ov-opt { margin: 6px auto 0; }
  .ov-t b { font-size: 14px; }
  .ov-prod img { width: 42px; height: 52px; }
  .ov-card { padding: 10px 14px 7px; }
  .ov-ticks { margin-top: 5px; }
}
@media (max-height: 739px) {
  .ov-grab { display: none; }
  .ov-sous { display: none; }
  .ov-steps { margin: 8px 0 0; }
  .ov-vue { padding-top: 10px; }
}

/* ═══ 7. responsive ═════════════════════════════════════════ */
@media (max-width: 1180px) {
  .ml-nav { gap: 14px; }
  .ml-nav a { font-size: 12.5px; }
}

@media (max-width: 980px) {
  .ml-head-in { grid-template-columns: auto 1fr auto; }
  .ml-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--ml-trait); flex-direction: column; gap: 0; padding: 6px 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .26s var(--ml-ease), transform .26s var(--ml-ease), visibility .26s;
  }
  .ml-head.menu-open .ml-nav { opacity: 1; visibility: visible; transform: none; }
  .ml-nav a { padding: 13px var(--ml-pad); font-size: 14.5px; border-bottom: 0; }
  .ml-brand { justify-self: start; grid-column: 2; }
  .ml-burger { display: block; }
  .ml-tools .ml-ico:not(.ml-bag) { display: none; }

  .ml-grid, .ml-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .ml-reassure-in { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ml-od-in { grid-template-columns: 1fr; padding-bottom: 64px; }
  .ml-od-vis { order: 2; min-height: 0; }
  .ml-od-avatar { height: clamp(260px, 60vw, 340px); }
  .ml-od-chip { left: 2%; }
  .ml-od-by { bottom: 10px; }
  .ml-foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; }

  .ml-prod { grid-template-columns: 1fr; }
  .ml-gal { grid-template-columns: 1fr; }
  .ml-gal-thumbs { flex-direction: row; order: 2; }
  .ml-thumb { width: 68px; }
}

@media (max-width: 640px) {
  .ml-hero-in { min-height: 420px; align-items: flex-end; }
  .ml-hero-img { object-position: 76% center; }
  .ml-hero-txt { padding: 22px 20px 26px; }
  .ml-hero-in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,22,17,.72) 0%, rgba(24,22,17,.1) 62%); z-index: 1; }
  .ml-reassure-in { grid-template-columns: 1fr; gap: 14px; }
  .ml-foot-cols { grid-template-columns: 1fr; }
  .ml-sec-hd { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* tablette : même position qu'en desktop (tiroir à droite), un peu plus large */
@media (min-width: 641px) and (max-width: 1024px) {
  .ov-panel { width: min(540px, 64vw); }
}

/* téléphone : feuille basse agrandie (72 dvh), la boutique reste visible au-dessus */
@media (max-width: 640px) {
  .ov-scrim { background: rgba(20, 19, 15, .28); backdrop-filter: none; }
  .ov-panel {
    top: 28vh; top: 28dvh;
    left: 0; right: 0; bottom: 0;
    width: 100vw; border-radius: 20px 20px 0 0;
  }
  /* embed (cadre téléphone du site OptiDress) : feuille un peu plus haute,
     bandeau de démonstration masqué (le contexte est déjà donné par la page) */
  body.is-embed .ov-panel { top: 16vh; top: 16dvh; }
  body.is-embed .ml-strip { display: none; }
  /* typo + boutons réduits : chaque étape tient SANS défilement */
  .ov-titre { font-size: 15px; }
  .ov-sous { font-size: 11px; white-space: nowrap; max-width: none; padding: 0 8px; margin-top: 2px; }
  .ov-steps { padding: 0 18px; margin-top: 8px; }
  .ov-step span { width: 22px; height: 22px; font-size: 11px; }
  .ov-step + .ov-step::before { width: clamp(20px, 6.5vw, 44px); }
  .ov-h { font-size: 16px; }
  .ov-h-sous { margin: 3px 0 0; font-size: 11.5px; }
  .ov-vue { padding-top: 8px; }
  .ov-avatar { margin: 6px 0 8px; }
  .ov-avatar img { height: min(190px, 23dvh); }
  .ov-avatar-sm img { height: min(84px, 10dvh); }
  .ov-avatar-xs { display: none; }
  .ov-avatar-load img { height: min(200px, 24dvh); }
  .ov-row { padding: 8px 12px; margin-bottom: 7px; }
  .ov-row-ic { width: 32px; height: 32px; }
  .ov-row-ic svg { width: 19px; height: 19px; }
  .ov-row b { font-size: 14px; }
  .ov-btn { padding: 10px; margin-top: 2px; font-size: 13.5px; }
  .ov-card { padding: 9px 13px 5px; margin-bottom: 7px; }
  .ov-card-hd { margin-bottom: 7px; }
  .ov-ticks { margin-top: 3px; }
  /* tuiles morpho compactes */
  .ov-grille { gap: 7px; margin-bottom: 5px; }
  .ov-tile { padding: 7px 9px; gap: 8px; }
  .ov-tile b { font-size: 12px; }
  .ov-tile em { font-size: 10px; }
  .ov-sil { width: 17px; height: 26px; }
  /* étape mensurations : lignes serrées */
  .ov-mes { gap: 3px; }
  .ov-mrow { padding: 2px 10px; gap: 8px; }
  .ov-opt { display: none; }          /* le sous-titre le dit déjà */
  .ov-mic { width: 22px; height: 22px; }
  .ov-mval { padding: 1px 8px; }
  .ov-unit { margin-bottom: 5px; }
  .ov-lien { margin: 5px 0 0; font-size: 11px; }
  .ov-mini { font-size: 9.5px; line-height: 1.35; margin: 3px 0 0; }

  /* ── résultat réorganisé : avatar à GAUCHE (étroit, haut),
       fiche produit + reco de taille à DROITE ─────────────── */
  .ov-vue-res.is-on {
    display: grid;
    grid-template-columns: 46% 1fr;
    grid-template-areas:
      "top    top"
      "stage  prod"
      "stage  hd"
      "stage  tailles"
      "add    add"
      "pay    pay";
    grid-template-rows: auto auto auto 1fr auto auto;
    column-gap: 10px;
    align-content: start;
  }
  .ov-res-top { grid-area: top; margin-bottom: 8px; }
  .ov-pill { padding: 7px 12px; font-size: 12px; }
  .ov-sq { width: 32px; height: 32px; }
  .ov-vue-res .ov-stage { grid-area: stage; height: clamp(230px, 36dvh, 420px); padding: 6px; }
  .ov-vue-res .ov-prod { grid-area: prod; margin: 0 0 8px; padding: 6px 9px; gap: 9px; }
  .ov-prod img { width: 38px; height: 47px; }
  .ov-prod b { font-size: 12.5px; }
  .ov-prod span { font-size: 11.5px; margin-top: 1px; }
  .ov-vue-res .ov-taille-hd { grid-area: hd; margin-bottom: 6px; font-size: 12px; }
  .ov-vue-res .ov-tailles { grid-area: tailles; grid-auto-flow: row; grid-template-columns: 1fr; gap: 6px; margin: 0; align-content: start; }
  .ov-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; text-align: left; }
  .ov-t b { font-size: 13.5px; }
  .ov-t span { margin-top: 0; text-align: right; }
  #ovAdd { grid-area: add; margin-top: 10px; }
  #ovPay { grid-area: pay; margin-top: 8px; }
  .ov-hint { display: none; }
  .ov-drag { width: 54px; height: 54px; top: 10px; left: 10px; }
  .ov-hand { width: 18px; height: 18px; }
  .ov-arrow { width: 28px; height: 28px; }
  .ov-arrow svg { width: 14px; height: 14px; }
  .ov-arrow-l { left: 6px; }
  .ov-arrow-r { right: 6px; }
}

@media (max-width: 400px) {
  .ml-grid, .ml-grid-6 { grid-template-columns: 1fr; }
  .ov-t span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ml *, .ov * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}