/**
 * Cabine.ai — Share Modal — v1.3.3
 */

.mtvfs-overlay {
  --w: #ffffff;
  --b: #0d0d0d;
  --g1: #f6f5f3;
  --g2: #ebe9e5;
  --g3: #ccc9c2;
  --g5: #908d86;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ══ Overlay ══ */
.mtvfs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99900;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: mtvfs-ov-in 240ms var(--ease) forwards;
}
.mtvfs-overlay[hidden] { display: none; }
@keyframes mtvfs-ov-in { from { opacity: 0; } to { opacity: 1; } }

/* ══ Modal desktop — grille 2 colonnes, hauteur fixe ══ */
.mtvfs-modal {
  position: relative;
  width: 100%;
  max-width: 940px;
  height: min(90vh, 680px);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 52% 48%;
  box-shadow: 0 48px 120px rgba(0,0,0,.45), 0 4px 20px rgba(0,0,0,.2);
  animation: mtvfs-mo-in 340ms var(--spring) forwards;
}
@keyframes mtvfs-mo-in {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ══ Bouton fermer ══ */
.mtvfs-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms, transform 200ms;
}
.mtvfs-close svg { width: 12px; height: 12px; }
.mtvfs-close:hover { background: rgba(255,255,255,.24); transform: scale(1.1); }

/* ══ Colonne gauche — visuel essayage, pleine hauteur ══ */
.mtvfs-fitting {
  position: relative;
  overflow: hidden;
  background: #0e0e0e;
}

.mtvfs-fitting__bg {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center top;
  filter: blur(28px) brightness(.25) saturate(.5);
  z-index: 0;
}

.mtvfs-fitting__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;   /* photo portrait alignée en haut */
  justify-content: center;
}

.mtvfs-fitting__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 500ms var(--ease);
  opacity: 0;
}
.mtvfs-fitting__img.loaded { opacity: 1; }

/* Badge centré en bas */
.mtvfs-fitting__badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 48px 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 600 8px/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.mtvfs-fitting__badge svg { width: 11px; height: 11px; opacity: .5; }

/* ══ Colonne droite — flex colonne, prend toute la hauteur ══ */
.mtvfs-product {
  display: flex;
  flex-direction: column;
  height: 100%;            /* prend toute la hauteur de la grille */
  background: var(--w);
  overflow: hidden;
}

/* Header */
.mtvfs-product__header {
  flex-shrink: 0;
  padding: 32px 28px 20px;
  text-align: center;
}

.mtvfs-product__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 500 7.5px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--g3);
  margin: 0 0 12px;
}
.mtvfs-product__eyebrow::before,
.mtvfs-product__eyebrow::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--g3);
  flex-shrink: 0;
}

.mtvfs-product__headline {
  font: 300 28px/1.15 var(--serif);
  color: var(--b);
  margin: 0;
  letter-spacing: .01em;
}

/* Corps — flex 1, prend tout l'espace restant ══ */
.mtvfs-product__body {
  flex: 1;
  min-height: 0;
  padding: 0 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;       /* pas de scroll — le contenu doit tenir */
}

/* Photo produit — occupe tout l'espace disponible en portrait */
.mtvfs-product__thumb {
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--g1);
  border: 1px solid var(--g2);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.mtvfs-product__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 400ms;
  opacity: 0;
}
.mtvfs-product__thumb-img.loaded { opacity: 1; }

/* Skeleton */
.mtvfs-thumb-skel {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--g2) 25%, var(--g1) 50%, var(--g2) 75%);
  background-size: 200% 100%;
  animation: mtvfs-skel 1.4s ease infinite;
}
@keyframes mtvfs-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Infos produit sous la photo */
.mtvfs-product__card-info {
  flex-shrink: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mtvfs-product__name {
  font: 400 12.5px/1.35 var(--sans);
  color: var(--b);
  margin: 0;
  letter-spacing: .01em;
}

.mtvfs-product__price {
  font: 500 14px/1 var(--sans);
  color: var(--b);
  letter-spacing: .02em;
  margin: 0;
}

/* Footer — collé en bas, un seul CTA ══ */
.mtvfs-product__footer {
  flex-shrink: 0;
  padding: 0 20px 24px;
}

.mtvfs-cta--primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: var(--w);
  color: var(--b);
  border: 1.5px solid var(--b);
  border-radius: 100px;
  font: 500 9.5px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 220ms var(--ease);
}
.mtvfs-cta--primary:hover {
  background: var(--b);
  color: var(--w)!important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  span{
     color: var(--w)!important;
  }
}
.mtvfs-cta--primary:hover svg { stroke: var(--w); }
.mtvfs-cta--primary span { font: inherit; letter-spacing: inherit; color: inherit; }
.mtvfs-cta--primary svg {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: var(--b);
  fill: none;
  transition: transform 220ms var(--ease), stroke 220ms;
}
.mtvfs-cta--primary:hover svg { transform: translateX(3px); }


/* ══════════════════════════════════════════
   MOBILE — Full screen, layout vertical simple
   ══════════════════════════════════════════ */
@media (max-width: 720px) {

  /* Overlay sans padding — prend tout l'écran */
  .mtvfs-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  /* Modal : plein écran, flex colonne */
  .mtvfs-modal {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;   /* image : flex; footer : auto */
    box-shadow: none;
    animation: mtvfs-mo-mob-in 300ms var(--spring) forwards;
  }
  @keyframes mtvfs-mo-mob-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
  }

  /* Colonne gauche : pleine largeur, occupe tout l'espace */
  .mtvfs-fitting {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Colonne droite masquée — remplacée par overlay en bas */
  .mtvfs-product {
    display: none;
  }

  /* Overlay mobile — titre + CTA par-dessus l'image */
  .mtvfs-mobile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 48px 24px 40px;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .mtvfs-mobile-title {
    font: 300 32px/1.1 var(--serif);
    color: var(--w);
    text-align: center;
    margin: 0;
    letter-spacing: .01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
  }

  .mtvfs-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    height: 54px;
    padding: 0 24px;
    background: var(--w);
    color: var(--b);
    border: none;
    border-radius: 100px;
    font: 500 9.5px/1 var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,.28);
    transition: all 220ms var(--ease);
  }
  .mtvfs-mobile-cta:hover {
    background: var(--g1);
    transform: translateY(-2px);
  }
  .mtvfs-mobile-cta svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Badge masqué sur mobile (remplacé par overlay) */
  .mtvfs-fitting__badge { display: none; }

  /* Bouton fermer visible sur fond image */
  .mtvfs-close {
    top: 16px;
    right: 16px;
    z-index: 20;
    background: rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.3);
  }
}