/* ═══════════════════════════════════════════════════════════════════════════
   Casemira — Visualiseur de tapis
   UI thémable : change les variables ci-dessous pour matcher ta charte exacte.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --cmv-bg:        #f8f7f5;   /* off-white chaud (fond) */
  --cmv-surface:   #ffffff;   /* fond des panneaux      */
  --cmv-ink:       #0f1e2e;   /* navy profond (texte)   */
  --cmv-muted:     #6f7682;   /* navy-gris secondaire   */
  --cmv-line:      #e8e4de;   /* bordures taupe clair   */
  --cmv-navy:      #0f1e2e;   /* primaire / CTA         */
  --cmv-gold:      #a09584;   /* accent gold-taupe      */
  --cmv-accent:    #0f1e2e;   /* actions principales    */
  --cmv-accent-ink:#f8f7f5;   /* texte sur navy         */
  --cmv-accent-2:  #0f1e2e;   /* (compat) navy          */
  --cmv-radius:    16px;
  --cmv-shadow:    0 1px 2px rgba(15,30,46,.06), 0 12px 32px -12px rgba(15,30,46,.22), 0 32px 80px -24px rgba(15,30,46,.30);
  --cmv-shadow-sm: 0 1px 2px rgba(15,30,46,.05), 0 8px 20px -12px rgba(15,30,46,.25);
  --cmv-font:      "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cmv-serif:     "Instrument Serif", Georgia, "Times New Roman", serif;
  /* Motion : DEUX durées (micro .2s, surface .45s) + un ressort type iOS.
     Le spring est un linear() précalculé (léger dépassement puis pose). */
  --cmv-dur-tap:     .2s;
  --cmv-dur-surface: .45s;
  --cmv-ease-out:  cubic-bezier(.2,.8,.2,1);
  --cmv-spring: linear(0, 0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%, 0.671 13.6%,
    0.895 18%, 0.985 21%, 1.037 24.3%, 1.055 27.5%, 1.05 31%, 1.016 38.6%, 0.999 46%,
    0.996 52%, 1 64%, 1);
}

/* ── Bouton déclencheur sur la fiche produit ───────────────────────────────── */
.cm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;                 /* passe en width:auto pour un bouton plus étroit */
  justify-content: center;
  padding: 12px 18px;          /* cible tactile >= 44px (bouton principal du widget) */
  min-height: 44px;
  border: 1px solid var(--cmv-accent-2);
  border-radius: 4px;          /* coins quasi carrés */
  background: var(--cmv-accent-2);
  color: #fff;
  font-family: var(--cmv-font);
  font-size: 13px;             /* texte plus discret */
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none !important;   /* annule la mise en majuscules du thème */
  cursor: pointer;
  transition: transform var(--cmv-dur-tap) var(--cmv-ease-out), box-shadow var(--cmv-dur-tap) ease, background var(--cmv-dur-tap) ease;
}
.cm-trigger:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(15,30,46,.45); }
.cm-trigger:active { transform: translateY(0); }
.cm-trigger svg { width: 16px; height: 16px; }

/* ── Overlay + carte modale ────────────────────────────────────────────────── */
.cm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
  background: rgba(24, 20, 16, .55);
  backdrop-filter: blur(6px);
  font-family: var(--cmv-font);
  color: var(--cmv-ink);
  animation: cm-fade .2s ease;
}
.cm-modal.is-open { display: flex; }
.cm-modal.is-closing { animation: cm-fade-out .22s ease forwards; }
.cm-modal.is-closing .cm-card { animation: cm-card-out .22s ease-in forwards; }

.cm-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow: hidden auto;
  background: var(--cmv-bg);
  border-radius: var(--cmv-radius);
  box-shadow: var(--cmv-shadow);
  animation: cm-rise var(--cmv-dur-surface) var(--cmv-spring);
}
/* Poignée de la bottom sheet (mobile uniquement) */
.cm-handle { display: none; }

.cm-card { scrollbar-width: thin; scrollbar-color: rgba(160,149,132,.45) transparent; }
.cm-card::-webkit-scrollbar { width: 6px; }
.cm-card::-webkit-scrollbar-thumb { background: rgba(160,149,132,.45); border-radius: 999px; }
.cm-card::-webkit-scrollbar-track { background: transparent; }

.cm-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--cmv-line);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  color: var(--cmv-ink);
  cursor: pointer;
  z-index: 5;
  transition: background var(--cmv-dur-tap) ease, transform var(--cmv-dur-tap) var(--cmv-ease-out);
}
.cm-close:hover { background: #fff; transform: scale(1.06); }
.cm-close:active { transform: scale(.96); }

.cm-head {
  padding: 24px 30px 0;
  text-align: center;
}
.cm-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
}
.cm-brand img {
  height: 22px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
.cm-brand span {
  font-family: var(--cmv-font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .46em;
  text-indent: .46em;           /* compense le tracking du dernier caractère */
  text-transform: uppercase;
  color: var(--cmv-gold);
}
.cm-title {
  font-family: var(--cmv-font);     /* Instrument Sans, comme la charte Casemira */
  font-size: 27px;
  font-weight: 600;                /* "Visualisez ce tapis" en gras */
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cmv-ink);
  margin: 0;
  padding: 0 24px;                 /* pour ne pas passer sous la croix de fermeture */
}
.cm-title em {                     /* "chez vous" en serif italique */
  font-family: var(--cmv-serif);
  font-style: italic;
  font-weight: 400;
}
.cm-sub { color: var(--cmv-muted); font-size: 13.5px; line-height: 1.45; margin: 9px 0 0; padding: 0 6px; }
.cm-card.cm-done .cm-title, .cm-card.cm-done .cm-sub { display: none; }
.cm-card.cm-done .cm-head { padding-top: 14px; }
.cm-card.cm-done .cm-brand { margin-bottom: 4px; }

.cm-body { padding: 22px 30px calc(30px + env(safe-area-inset-bottom, 0px)); }

/* ── Étapes (on n'affiche qu'une à la fois) ────────────────────────────────── */
.cm-step { display: none; }
/* Cabine d'essayage : consentement discret, oubli de la pièce, étape « pièce prête » */
.cm-room-consent { font-size: 12px; line-height: 1.45; color: #5a6672; margin: -6px 0 14px; text-align: center; }
.cm-room-forget { display: block; margin: 8px auto 0; background: none; border: 0; padding: 6px 10px; color: #5a6672; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 44px; }
.cm-room-forget:hover { color: var(--cmv-navy, #0F1E2E); }
.cm-room-ready { text-align: center; padding: 6px 0 4px; }
.cm-room-ready img { width: 100%; height: auto; max-height: 46vh; object-fit: cover; border-radius: 14px; border: 1px solid var(--cmv-line); display: block; margin: 0 auto 14px; }
/* Tunnel d'essayage : vue « Comparer » (2 à 4 rendus de la session, côte à côte) */
.cm-card.cm-comparing .cm-work-grid, .cm-card.cm-comparing .cm-caption, .cm-card.cm-comparing .cm-more { display: none !important; }
.cm-compare-panel { margin-bottom: 16px; }
.cm-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.cm-compare-grid figure { margin: 0; min-width: 0; }
.cm-compare-grid img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--cmv-line); display: block; }
.cm-compare-grid figure.is-current img { outline: 3px solid var(--cmv-navy, #0F1E2E); outline-offset: -3px; }
.cm-compare-grid figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13px; margin-top: 6px; }
.cm-compare-grid figcaption span { font-weight: 600; min-width: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-compare-grid figcaption a { color: var(--cmv-navy, #0F1E2E); text-decoration: underline; white-space: nowrap; }
@media (min-width: 861px) { .cm-card.cm-wide .cm-compare-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.cm-room-ready h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.cm-room-ready p { margin: 0 0 16px; color: var(--cmv-muted); font-size: 14px; }
.cm-card.cm-capture .cm-rug-chip, .cm-card.cm-capture .cm-qr { display: none; }
.cm-step.is-active { display: block; animation: cm-step-in .3s cubic-bezier(.2,.8,.2,1); }

/* Aperçu du tapis sélectionné */
.cm-rug-chip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--cmv-surface);
  border: 1px solid var(--cmv-line);
  border-radius: 12px;
  margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(15,30,46,.05);
}
.cm-rug-chip img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.cm-rug-chip .l { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #5a6672; font-weight: 600; }
.cm-rug-chip .n { font-weight: 600; font-size: 14px; }

/* Conseils de prise de vue */
.cm-tips {
  display: grid;
  gap: 13px;
  margin-bottom: 24px;
}
.cm-tip {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: var(--cmv-ink);
}
.cm-tip .dot {
  flex: 0 0 26px; height: 26px;
  display: grid; place-items: center;
  background: #ede9e2;
  color: var(--cmv-gold);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}

/* Mention RGPD sous les conseils : lien à la charte (pas de bleu navigateur) */
.cm-import-info a { color: var(--cmv-muted); text-decoration: underline; text-underline-offset: 2px; }
.cm-import-info a:hover { color: var(--cmv-ink); }

/* Boutons de sélection de source */
.cm-actions { display: grid; gap: 12px; }
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  min-height: 48px;                  /* cible tactile confortable */
  text-transform: none !important;   /* annule la mise en majuscules du thème */
  transition: transform var(--cmv-dur-tap) var(--cmv-ease-out), box-shadow var(--cmv-dur-tap) ease, background var(--cmv-dur-tap) ease, border-color var(--cmv-dur-tap) ease;
  font-family: var(--cmv-font);
}
.cm-btn svg { width: 19px; height: 19px; }
.cm-btn--primary { background: var(--cmv-accent); color: var(--cmv-accent-ink); }
.cm-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px var(--cmv-accent); }
.cm-btn--ghost { background: var(--cmv-surface); color: var(--cmv-ink); border-color: var(--cmv-line); }
.cm-btn--ghost:hover { border-color: var(--cmv-gold); }
.cm-btn--block { width: 100%; }
.cm-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.cm-modal :focus-visible, .cm-lightbox :focus-visible,
.cm-btn:focus-visible, .cm-trigger:focus-visible, .cm-close:focus-visible,
.cm-expand:focus-visible, .cm-lightbox-close:focus-visible {
  outline: 2px solid var(--cmv-gold);
  outline-offset: 2px;
}
.cm-btn:active:not([disabled]) { transform: translateY(1px); }
.cm-btn--ghost:hover { background: #fbfaf7; }
.cm-btn--primary { box-shadow: var(--cmv-shadow-sm); }

.cm-desktop-only { display: none; }
.cm-mobile-only  { display: grid; }
body.cm-is-desktop .cm-desktop-only { display: grid; }
body.cm-is-desktop .cm-mobile-only  { display: none; }

/* QR : relais desktop → mobile */
.cm-qr { margin-top: 18px; }
.cm-qr-sep {
  display: flex; align-items: center; gap: 12px;
  color: var(--cmv-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 16px;
}
.cm-qr-sep::before, .cm-qr-sep::after { content: ""; flex: 1; height: 1px; background: var(--cmv-line); }
.cm-qr-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--cmv-surface); border: 1px solid var(--cmv-line);
  border-radius: 12px; padding: 12px;
  box-shadow: 0 1px 3px rgba(15,30,46,.05);
}
.cm-qr-img { width: 124px; height: 124px; flex: 0 0 auto; border-radius: 6px; background: #fff; display: block; }
.cm-qr-txt { display: flex; flex-direction: column; gap: 4px; }
.cm-qr-txt strong { font-size: 13.5px; color: var(--cmv-ink); }
.cm-qr-txt span { font-size: 12px; color: var(--cmv-muted); line-height: 1.45; }

/* Aperçu de la photo + résultat (aspect naturel, centré, sans rognage) */
.cm-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #efe9e0;
  border: 1px solid var(--cmv-line);
  margin-bottom: 20px;
  min-height: 180px;
}
.cm-preview img { width: 100%; height: auto; max-height: 64vh; object-fit: cover; display: block; transition: filter var(--cmv-dur-surface) ease, transform var(--cmv-dur-surface) ease; will-change: filter, transform; }
/* Pendant la génération, la pièce se floute (le rendu net la remplacera) ;
   la légère mise à l'échelle cache la frange du flou sur les bords. */
.cm-preview img.cm-generating {
  filter: blur(6px) saturate(1.06);
  transform: scale(1.04);
  animation: cm-kenburns 16s ease-in-out infinite alternate;
}
.cm-preview img.is-clickable { cursor: zoom-in; }

/* ── Reveal avant/après : pile d'images + pill de comparaison ─────────────── */
.cm-imgwrap { position: relative; display: block; line-height: 0; }
#cmXfade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-height: none; object-fit: cover;
  opacity: 0;
  pointer-events: none;
  will-change: clip-path, opacity;
}
/* ── Comparaison par maintien : pill stable + badge AVANT sur l'image ────── */
.cm-compare {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  min-height: 44px;
  background: rgba(15,30,46,.78); color: #fff;
  font-family: var(--cmv-font); font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer; z-index: 3;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  text-transform: none !important;   /* annule la mise en majuscules du thème */
  transition: background var(--cmv-dur-tap) ease, transform var(--cmv-dur-tap) var(--cmv-ease-out);
}
.cm-compare:hover { background: rgba(15,30,46,.92); }
.cm-compare svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cm-compare.is-holding { background: var(--cmv-gold); color: var(--cmv-ink); border-color: transparent; transform: translateX(-50%) scale(.97); }
@media (max-width: 380px) {
  .cm-compare { font-size: 11.5px; padding: 10px 14px; gap: 6px; max-width: calc(100% - 16px); }
}
.cm-avant-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(248,247,245,.94); color: var(--cmv-ink);
  font-family: var(--cmv-font); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--cmv-dur-tap) ease, transform var(--cmv-dur-tap) var(--cmv-ease-out);
  pointer-events: none;
}
.cm-avant-tag.is-on { opacity: 1; transform: none; }

/* ── Rebond best-sellers : vignettes défilantes, un appui = nouveau rendu ── */
.cm-more { margin: 4px 0 18px; max-width: 100%; overflow: hidden; }
.cm-more-t { font-size: 13px; font-weight: 600; color: var(--cmv-ink); margin: 0 0 10px; text-align: center; }
.cm-more-viewport {
  overflow: hidden;
  max-width: 100%;
  touch-action: pan-y;          /* l'horizontal est piloté, le vertical scrolle */
  cursor: grab;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.cm-more-viewport:active { cursor: grabbing; }
.cm-more-strip {
  display: flex; gap: 10px; width: max-content; padding: 2px;
  will-change: transform;
  user-select: none; -webkit-user-select: none;
}
/* Vignette blindée contre le CSS du thème hôte : cadre image FIXE,
   l'image ne peut ni déborder ni couper la carte. */
/* Vignette au format 3/4 des packshots. TOUT est en pixels FIXES avec
   !important : le CSS du thème hôte écrasait largeur et hauteur. */
.cm-more-item {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: auto !important;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  margin: 0 !important;
  background: var(--cmv-surface);
  border: 1px solid var(--cmv-line) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  font-family: var(--cmv-font);
  line-height: 1.2;
  text-transform: none !important;
  transition: transform var(--cmv-dur-tap) var(--cmv-ease-out), border-color var(--cmv-dur-tap) ease, box-shadow var(--cmv-dur-tap) ease;
}
.cm-more-item:hover { transform: translateY(-2px); border-color: var(--cmv-gold) !important; box-shadow: var(--cmv-shadow-sm); }
.cm-more-item:active { transform: translateY(0); }
.cm-more-item .pic {
  display: block !important;
  width: 96px !important;
  height: 126px !important;      /* 3/4 en dur : le thème ne peut plus l'aplatir */
  overflow: hidden !important;
  background: #f4f1ec;
}
.cm-more-item .pic img {
  width: 96px !important;
  height: 126px !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  display: block !important;
  -webkit-user-drag: none;
}
.cm-more-item .nom {
  display: block;
  padding: 6px 7px 1px;
  font-size: 11px; font-weight: 600; color: var(--cmv-ink);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-more-item .coul {
  display: block;
  padding: 0 7px 7px;
  font-size: 10px; font-weight: 500; color: #5a6672;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Disclaimer sous le rendu : lisible, sans encombrer */
.cm-caption {
  margin: -8px 0 16px;
  font-size: 12.5px; line-height: 1.5;
  color: #5a6672; text-align: center;
}
.cm-caption strong { color: var(--cmv-ink); font-weight: 600; }

/* Bouton « agrandir » sur le rendu */
.cm-expand {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(15,30,46,.6);
  color: #fff; border: none; border-radius: 8px;
  cursor: pointer; z-index: 3;
  backdrop-filter: blur(2px);
  transition: background var(--cmv-dur-tap) ease;
}
.cm-expand:hover { background: rgba(15,30,46,.88); }
.cm-expand svg { width: 18px; height: 18px; }

/* Champ email invalide (formulaire du panneau d'attente) */
.cm-wait-lead input.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.25); }
/* Mode « rendu prêt » : le scan s'arrête, le panneau se fait discret */
.cm-loading.is-ready .cm-scan { display: none; }
.cm-loading.is-ready .cm-pct, .cm-loading.is-ready .cm-progress { display: none; }
.cm-loading.is-ready .msg { font-size: 15px; font-weight: 600; }

/* Plein écran (lightbox) */
.cm-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: none;
  grid-template-rows: minmax(0, 1fr) auto;
  /* dvh suit la barre d'outils mobile, contrairement à vh : sans ça, le bas de
     la vue passait sous le navigateur et il fallait scroller. */
  height: 100dvh;
  overflow: hidden;
  background: rgba(8,14,22,.985);
  animation: cm-fade .2s ease;
  touch-action: none;              /* les gestes (zoom, swipe) sont gérés en JS */
}
.cm-lightbox.is-closing { animation: cm-fade-out .2s ease forwards; }
/* L'image prend toute la première rangée, la barre d'actions vit en flux. */
.cm-lightbox img {
  grid-row: 1;
  width: 100%; height: 100%;
  min-height: 0;
  object-fit: contain;
  will-change: transform;
  transform-origin: 0 0;
}
.cm-lightbox-acts {
  grid-row: 2;
  display: flex; gap: 10px;
  width: min(380px, calc(100% - 32px));
  margin: 12px auto max(14px, env(safe-area-inset-bottom, 0px));
  justify-content: center;
}
.cm-lightbox-acts .cm-btn {
  flex: 1 1 0; min-width: 0;
  background: rgba(15,30,46,.78); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
.cm-lightbox-acts .cm-btn:hover { background: rgba(15,30,46,.75); border-color: rgba(255,255,255,.4); }
.cm-lightbox-close {
  position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); right: 18px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(15,30,46,.72); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%; cursor: pointer;
  z-index: 2;
  transition: background var(--cmv-dur-tap) ease, transform var(--cmv-dur-tap) var(--cmv-ease-out);
}
.cm-lightbox-close:hover { background: rgba(15,30,46,.75); transform: scale(1.06); }
.cm-lightbox-dl { text-decoration: none; min-width: 200px; }

/* État de chargement */
.cm-loading {
  position: absolute; inset: 0;
  display: grid; place-items: safe center;
  overflow-y: auto;
  background: rgba(15,30,46,.30);
  padding: 14px;
}
.cm-loading .panel {
  text-align: center; color: #fff;
  padding: 20px 22px; width: 100%; max-width: 320px;
  background: rgba(15,30,46,.82);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  animation: cm-rise var(--cmv-dur-surface) var(--cmv-spring);
}
.cm-pct {
  font-family: var(--cmv-serif);
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.cm-loading .msg { font-size: 14px; font-weight: 500; min-height: 20px; opacity: .95; }
.cm-loading .msg.is-swap { animation: cm-msg-in .3s ease; }
.cm-progress {
  position: relative;
  height: 5px;
  width: 100%;
  margin: 14px 0 8px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  overflow: hidden;
}
.cm-progress::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  transform: translateX(-100%);
  animation: cm-shimmer 1.8s ease-in-out infinite;
}
.cm-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--cmv-gold);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
  will-change: transform;
}
.cm-loading .hint { font-size: 12px; opacity: .92; margin-top: 4px; }

/* Barre de scan animée pendant la génération */
.cm-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(160,149,132,.40), transparent);
  animation: cm-scan 2.2s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

.cm-result-actions { display: grid; gap: 12px; }
.cm-result-actions > * { min-width: 0; }   /* le marquee ne dicte pas la largeur */
.cm-result-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-result-note {
  font-size: 13px; color: var(--cmv-ink); line-height: 1.45;
  background: #f6f3ec; border: 1px solid #ece6da;
  border-radius: 10px; padding: 11px 13px; margin: 0 0 12px;
}
.cm-result-note strong { color: var(--cmv-gold); }
.cm-retry-hint { font-size: 12.5px; color: var(--cmv-muted); text-align: center; margin: 0 0 2px; line-height: 1.4; }
.cm-error {
  background: #fbeae5; color: #9a3412;
  border: 1px solid #f3c4b4;
  padding: 12px 14px; border-radius: 10px;
  font-size: 13.5px; margin-bottom: 14px;
  line-height: 1.45;
}
.cm-foot {
  text-align: center; font-size: 12px; color: var(--cmv-muted);
  margin-top: 20px;
}
.cm-foot strong { color: var(--cmv-ink); }

/* Signature « Propulsé par Vumira » — discrète, cliquable (lead B2B) */
.cm-vumira {
  display: block; text-align: center;
  margin-top: 10px;
  font-size: 12px; letter-spacing: .02em;
  color: var(--cmv-muted); text-decoration: none;
  opacity: .92; transition: opacity var(--cmv-dur-tap) ease;
}
.cm-vumira strong { font-weight: 600; color: var(--cmv-ink); }
.cm-vumira:hover { opacity: 1; }
.cm-vumira:hover strong { text-decoration: underline; text-underline-offset: 2px; }

/* Desktop, étape "work" : carte élargie, UNE colonne (image en haut, actions dessous). */
body.cm-is-desktop .cm-card.cm-wide { max-width: min(700px, 92vw); }
body.cm-is-desktop .cm-card.cm-wide .cm-work-grid { display: block; }
body.cm-is-desktop .cm-card.cm-wide .cm-preview { margin-bottom: 16px; min-width: 0; }
/* L'image s'affiche en entier quelle que soit l'orientation (paysage OU portrait), sans rognage. */
body.cm-is-desktop .cm-card.cm-wide .cm-preview { display: grid; place-items: center; }
body.cm-is-desktop .cm-card.cm-wide .cm-preview img { width: auto; height: auto; max-width: 100%; max-height: 50vh; object-fit: contain; }
body.cm-is-desktop .cm-card.cm-wide.cm-done .cm-preview img { max-height: 60vh; }
/* En-tête compacté en étape work (même logique que mobile) : les actions restent visibles sans scroll */
body.cm-is-desktop .cm-card.cm-wide .cm-sub { display: none; }
body.cm-is-desktop .cm-card.cm-wide .cm-brand { margin-bottom: 6px; gap: 3px; } body.cm-is-desktop .cm-card.cm-wide .cm-brand img { height: 17px !important; } body.cm-is-desktop .cm-card.cm-wide .cm-brand span { font-size: 8px; }
body.cm-is-desktop .cm-card.cm-wide .cm-title { font-size: 21px; }
body.cm-is-desktop .cm-card.cm-wide .cm-head { padding-top: 18px; }
body.cm-is-desktop .cm-card.cm-wide .cm-rug-chip { margin-bottom: 14px; padding: 10px; }
body.cm-is-desktop .cm-card.cm-wide .cm-work-side { display: flex; flex-direction: column; gap: 12px; }

@keyframes cm-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cm-step-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes cm-msg-in { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }
@keyframes cm-rise { from { opacity: 0; transform: translateY(16px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes cm-scan { 0% { transform: translateY(-100%) } 100% { transform: translateY(250%) } }
@keyframes cm-kenburns { from { transform: scale(1.02) } to { transform: scale(1.06) } }
@keyframes cm-shimmer { 0% { transform: translateX(-100%) } 55%, 100% { transform: translateX(100%) } }
@keyframes cm-fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes cm-card-out { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(14px) scale(.985) } }
@keyframes cm-sheet-in { from { transform: translateY(100%) } to { transform: none } }
@keyframes cm-sheet-out { from { transform: none } to { transform: translateY(105%) } }

/* ── Capture email pendant l'attente (dans le panneau de chargement) ─────── */
.cm-wait-lead { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 12px; }
.cm-wait-lead .t { font-size: 12.5px; font-weight: 600; margin: 0 0 8px; }
.cm-wait-lead-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cm-wait-lead input {
  width: 100%; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
  background: rgba(255,255,255,.96); color: var(--cmv-ink);
  font-family: var(--cmv-font); font-size: 16px;      /* 16px : pas d'auto-zoom iOS */
}
.cm-wait-lead button {
  padding: 10px 14px; border: none; border-radius: 8px;
  background: var(--cmv-gold); color: var(--cmv-ink);
  font-family: var(--cmv-font); font-size: 13px; font-weight: 600;
  cursor: pointer; min-height: 44px;
}
.cm-wait-lead .ok { font-size: 12px; margin: 6px 0 0; opacity: .95; }
.cm-wait-lead .note { font-size: 10.5px; line-height: 1.4; margin: 8px 0 0; opacity: .8; }
.cm-wait-lead .note a { color: #fff; text-decoration: underline; }
.cm-wait-cancel {
  margin-top: 10px; background: none; border: none;
  color: rgba(255,255,255,.85); font-family: var(--cmv-font);
  font-size: 12px; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; padding: 6px 10px;
}
.cm-wait-cancel:hover { color: #fff; }

@media (max-width: 520px) {
  /* Panneau d'attente compacté : tout visible sans défiler, Annuler compris */
  .cm-loading .panel { padding: 14px 16px; }
  .cm-pct { font-size: 32px; margin-bottom: 6px; }
  .cm-progress { margin: 10px 0 6px; }
  .cm-wait-lead { margin-top: 10px; padding-top: 10px; }
  .cm-wait-lead .note { font-size: 10px; margin-top: 6px; }
  .cm-wait-cancel { margin-top: 6px; padding: 4px 10px; }
  /* L'image laisse plus de hauteur au panneau pendant la génération */
  .cm-card.cm-wide .cm-preview img.cm-generating { max-height: 52vh; }

  /* Bottom sheet : ancrée en bas, poignée, entrée en ressort, geste de fermeture (JS) */
  .cm-modal { align-items: flex-end; padding: 0; }
  .cm-card {
    max-width: 100%;
    max-height: 94vh; max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    animation: cm-sheet-in var(--cmv-dur-surface) var(--cmv-spring);
    will-change: transform;
  }
  .cm-modal.is-closing .cm-card { animation: cm-sheet-out .26s ease-in forwards; }
  .cm-card.is-dragging { animation: none; transition: none; }
  .cm-handle {
    display: block;
    width: 40px; height: 5px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: rgba(15,30,46,.18);
  }
  .cm-brand { margin-bottom: 8px; gap: 3px; } .cm-brand img { height: 19px !important; } .cm-brand span { font-size: 8.5px; }
  .cm-title { font-size: 22px; padding-left: 18px; padding-right: 18px; }
  .cm-sub { font-size: 13px; }
  .cm-body { padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .cm-head { padding: 20px 20px 0; }
  .cm-rug-chip { margin-bottom: 16px; padding: 10px; }
  .cm-rug-chip img { width: 46px; height: 46px; }
  .cm-tips { margin-bottom: 18px; gap: 11px; }
  .cm-preview img { max-height: 44vh; }

  /* Étape "work" (photo importée) : en-tête compacté pour voir les boutons sans scroller */
  .cm-card.cm-wide .cm-sub { display: none; }
  .cm-card.cm-wide .cm-brand { margin-bottom: 5px; gap: 2px; } .cm-card.cm-wide .cm-brand img { height: 15px !important; } .cm-card.cm-wide .cm-brand span { font-size: 7.5px; }
  .cm-card.cm-wide .cm-title { font-size: 19px; }
  .cm-card.cm-wide .cm-head { padding-top: 16px; }
  .cm-card.cm-wide .cm-rug-chip { margin-bottom: 12px; }
  .cm-card.cm-wide .cm-preview img { max-height: 40vh; }
  .cm-card.cm-wide.cm-done .cm-preview img { max-height: 58vh; }
}

@media (max-width: 380px) {
  .cm-title { font-size: 20px; }
  .cm-card.cm-wide .cm-title { font-size: 18px; }
  .cm-card.cm-wide .cm-preview img { max-height: 36vh; }
}

/* ── Consentement RGPD (avant upload) ───────────────────────────────────── */
.cm-consent{
  display:flex; align-items:flex-start; gap:9px;
  margin:4px 0 14px; padding:11px 13px;
  background:rgba(15,30,46,.04); border:1px solid rgba(15,30,46,.12);
  border-radius:12px; cursor:pointer;
  font-size:13px; line-height:1.4; color:#31414f;
}
.cm-consent input[type="checkbox"]{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px;
  accent-color:#0F1E2E; cursor:pointer;
}
.cm-consent .cm-consent-txt a{ color:#0F1E2E; text-decoration:underline; }
.cm-consent-err{
  margin:-8px 0 13px; padding-left:3px;
  color:#b00000; font-size:13px; font-weight:600;
}

/* ── Mouvement réduit : on coupe toutes les animations décoratives ────────── */
@media (prefers-reduced-motion: reduce) {
  .cm-modal, .cm-card, .cm-step.is-active, .cm-lightbox,
  .cm-modal.is-closing, .cm-modal.is-closing .cm-card, .cm-lightbox.is-closing { animation: none !important; }
  .cm-scan { display: none; }
  .cm-preview img.cm-generating { animation: none !important; }
  .cm-progress::after { animation: none !important; }
  .cm-loading .panel { animation: none !important; }
  .cm-btn, .cm-trigger, .cm-progress-bar, .cm-preview img { transition: none !important; }
  .cm-loading .msg.is-swap { animation: none !important; }
  #cmXfade { transition: none !important; }
}

/* Formulaire DE : largeur contenue sur mobile. */
.cm-newsletter-de .panel { box-sizing: border-box; min-width: 0; }
.cm-newsletter-de .cm-wait-lead-row { grid-template-columns: minmax(0, 1fr) auto; }
.cm-newsletter-de .cm-wait-lead-row input { box-sizing: border-box; min-width: 0; }