/* ═══ LA CARTE « EN DIRECT » ═══

   Elle se pose en bas à GAUCHE : le coin droit est déjà pris
   par le chat et, sur l'accueil, par le ticket doré. */
/* ⚠️ REMONTÉE AU-DESSUS DES BOUTONS DE LA PAGE.

   Collée en bas, elle recouvrait la barre d'achat, le panier
   et le chat. On la place à mi-hauteur, sur le côté gauche —
   visible sans rien bloquer.

   Et en rectangle : de la place pour un aperçu du direct. */
.lc{
  /* ⚠️ MÊME LARGEUR QUE LA VIGNETTE VIDÉO, ET AU-DESSUS.

     Elle faisait 74 px contre 54 pour la vignette : les deux
     paraissaient dépareillées. Elles s empilent maintenant,
     le direct en haut — c est lui qui prime. */
  position:fixed;left:16px;z-index:129;
  bottom:calc(112px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
  width:54px;
  padding:0;overflow:hidden;
  /* ⚠️ Plus de bloc vert plein : un fond clair et translucide
     se pose sur la page sans l'alourdir. */
  background:rgba(253,250,245,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(42,61,47,.1);
  border-radius:14px;
  box-shadow:0 10px 28px -12px rgba(30,40,32,.35);
  text-decoration:none;
  opacity:0;transform:translateY(14px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1);
}

/* L'aperçu du direct, en haut de la carte. */
.lc-shot{
  position:relative;
  width:100%;aspect-ratio:1/1;
  background:#141C16;overflow:hidden;
}
.lc-shot iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:max(100%, calc(100% * 9 / 16));
  height:max(100%, calc(74px * 16 / 9));
  border:0;pointer-events:none;
}
.lc.on{opacity:1;transform:none}

/* ⚠️ Elle s'efface au défilement, comme le ticket doré et le
   bouton de chat. Une carte collée à l'écran pendant qu'on
   lit, c'est une carte de trop. */
.lc.on.away,
.lc.away{
  opacity:0 !important;
  transform:translateX(-80px) !important;
  pointer-events:none;
}

.lc-dot{
  position:absolute;top:8px;left:8px;z-index:2;
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#D64545;animation:lcPulse 1.8s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(20,28,22,.5);
}
@keyframes lcPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

.lc-body{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  padding:5px 6px 6px;
}
.lc-k{
  /* ⚠️ Espacement resserré : à 54 px de large, « En direct »
     déborde avec un letter-spacing de .14em. */
  font-family:'Inter',sans-serif;font-size:7px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--sage,#8FA47A);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lc-n{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:11px;color:var(--forest,#2A3D2F);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.lc-x{
  position:absolute;top:4px;right:4px;z-index:2;
  background:rgba(20,28,22,.5);border:none;cursor:pointer;
  border-radius:50%;
  padding:4px;display:grid;place-items:center;
}
.lc-x svg{
  width:10px;height:10px;fill:none;stroke:rgba(253,250,245,.5);
  stroke-width:2;stroke-linecap:round;
}
.lc-x:active svg{stroke:#FDFAF5}

/* Elle s'efface quand le panier ou le chat s'ouvre : deux
   couches flottantes l'une sur l'autre, c'est une de trop. */
body.locked .lc,
body.drawer-locked .lc,
body.hiw-locked .lc{opacity:0;pointer-events:none}


/* ── RIEN SUR LA PAGE DE PAIEMENT ──

   ⚠️ Les pastilles se posaient sur le formulaire et masquaient
   ce que la cliente doit lire : adresse, total, conditions.
   Une distraction à ce moment-là coûte une vente. */
body.checkout .lc,
body.no-float .lc{ display:none !important }

/* ── QUAND UNE BARRE OCCUPE LE BAS ──

   ⚠️ La vignette vidéo remonte à 88 px dans ce cas (voir
   videos.css). La carte restait à 112 et se posait DESSUS.

   88 + 84 de vignette + 12 d écart = 184. */
body.has-bottom-bar .lc{
  bottom:calc(184px + env(safe-area-inset-bottom));
}

/* ⚠️ ET S IL N Y A PAS DE VIGNETTE VIDÉO SUR LA PAGE,
   la carte descend prendre sa place. */
body.no-video-float .lc{
  bottom:calc(16px + env(safe-area-inset-bottom));
}


/* ── LE FLUX DE LA VIGNETTE ──
   ⚠️ Même cadrage que l ancienne iframe : elle remplit le
   carré sans déformer. */
.lc-v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;display:block;background:#141C16;
}