/* Boutons flottants « Offre du moment » (gauche) et contact (droite) : maquette « maquette-boutons-flottants ».
   Couleurs : rose #9B1F7A, orange #E0621A, noir #16161B, vert #1E9E5A. */

.mv-fl {
  --fl-bas: 16px;
  --fl-rose: #9b1f7a;
  --fl-orange: #e0621a;
  --fl-noir: #16161b;
  --fl-vert: #1e9e5a;
}

/* Au-dessus de la barre d'achat fixe (fiche produit, article) : 16 px de marge */
body.mv-atc-on .mv-fl {
  --fl-bas: 82px;
}

body.mv-bl-barre .mv-fl {
  --fl-bas: 86px;
}

/* Menu ouvert, pied de page visible */
body.mv-lock .mv-fl,
.mv-fl.is-pied .mv-fl-offre,
.mv-fl.is-pied .mv-fl-contact {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mv-fl-offre,
.mv-fl-contact {
  transition: opacity 0.2s, visibility 0.2s, bottom 0.2s;
}

/* ---------- Offre du moment ---------- */
.mv-fl-offre {
  position: fixed;
  left: 16px;
  bottom: calc(var(--fl-bas) + 5px + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
}

.mv-fl-offre__a {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px 0 3.5px;
  border: 1.5px solid #f6d2bd;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 22, 27, 0.22);
  text-decoration: none;
  transition: padding 0.2s, gap 0.2s;
}

.mv-fl-offre__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fl-orange);
  color: #fff;
}

.mv-fl-offre__t {
  display: flex;
  flex-direction: column;
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.15;
  transition: max-width 0.2s, opacity 0.2s;
}

.mv-fl-offre__t small {
  color: var(--fl-orange);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mv-fl-offre__t strong {
  color: var(--fl-noir);
  font-size: 14px;
  font-weight: 800;
}

/* Réduit à l'icône : défilement vers le bas, carte de contact ouverte */
.mv-fl.is-rond .mv-fl-offre__a,
.mv-fl.is-carte .mv-fl-offre__a {
  gap: 0;
  padding-right: 3.5px;
}

.mv-fl.is-rond .mv-fl-offre__t,
.mv-fl.is-carte .mv-fl-offre__t {
  max-width: 0;
  opacity: 0;
}

/* ---------- Fond gris ---------- */
.mv-fl-fond {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: rgba(22, 22, 27, 0.45);
}

.mv-fl-fond[hidden] {
  display: none;
}

/* ---------- Bouton de contact ---------- */
.mv-fl-contact {
  position: fixed;
  right: 16px;
  bottom: calc(var(--fl-bas) + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
}

.mv-fl-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fl-rose);
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 22, 27, 0.25);
  cursor: pointer;
}

.mv-fl-btn:focus-visible,
.mv-fl-offre__a:focus-visible,
.mv-fl-l:focus-visible {
  outline: 3px solid #16161b;
  outline-offset: 2px;
}

.mv-fl-btn .mv-fl-ico,
.mv-fl-btn > svg:not(.mv-fl-ico) {
  grid-area: 1 / 1;
}

.mv-fl-btn > svg:not(.mv-fl-ico) {
  display: none;
}

.mv-fl-contact.is-carte .mv-fl-btn {
  background: var(--fl-noir);
}

.mv-fl-contact.is-carte .mv-fl-btn .mv-fl-ico {
  display: none;
}

.mv-fl-contact.is-carte .mv-fl-btn > svg:not(.mv-fl-ico) {
  display: block;
}

.mv-fl-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  display: none;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--fl-vert);
  box-sizing: border-box;
}

.mv-fl-dot.is-ouvert {
  display: block;
}

.mv-fl-contact.is-carte .mv-fl-dot {
  display: none;
}

/* ---------- Carte de contact ---------- */
.mv-fl-carte {
  position: absolute;
  right: 0;
  bottom: 66px;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(22, 22, 27, 0.25);
}

.mv-fl-carte[hidden] {
  display: none;
}

.mv-fl-carte__tete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mv-fl-carte__tete img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.mv-fl-carte__q {
  margin: 0;
  color: var(--fl-noir);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.mv-fl-carte__st {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: #6b6a75;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}

.mv-fl-carte__st.is-ouvert {
  color: var(--fl-vert);
}

.mv-fl-pt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.mv-fl-l {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: #f4f3f8;
  color: var(--fl-noir) !important;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mv-fl-l--wa {
  background: #e8f8ee;
}

.mv-fl-l__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fl-noir);
  color: #fff;
}

.mv-fl-l--wa .mv-fl-l__ico {
  background: #25d366;
}

.mv-fl-l--tel .mv-fl-l__ico {
  background: var(--fl-rose);
}

.mv-fl-l__t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.mv-fl-l__t strong {
  font-size: 1rem;
  font-weight: 800;
}

.mv-fl-l__t small {
  color: #6b6a75;
  font-size: 0.875rem;
}

.mv-fl--pro .mv-fl-btn,
.mv-fl--pro .mv-fl-l--tel .mv-fl-l__ico {
  background: #c11c7c;
}

@media (min-width: 640px) {
  .mv-fl-offre {
    left: 24px;
  }

  .mv-fl-contact {
    right: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-fl-offre,
  .mv-fl-contact,
  .mv-fl-offre__a,
  .mv-fl-offre__t {
    transition: none;
  }
}