/* ==========================================================
   S2A ARTISTES
   FORMULES — QUICK LINKS + DRAG VISUEL
   ========================================================== */


/* ----------------------------------------------------------
   RACCOURCIS VIDEO / WEB
   ---------------------------------------------------------- */

article.formula-visual.has-formula-quicklinks {
  position: relative !important;
}


/*
 * La position verticale n'est plus calculée
 * en fonction du contenu de la carte.
 *
 * Le JS positionne cette zone par rapport
 * à la ligne supérieure du footer.
 */

.formula-card-quicklinks {
  position: absolute !important;

  right: 18px !important;

  z-index: 4 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 7px !important;

  margin: 0 !important;
  padding: 0 !important;

  height: 32px !important;

  pointer-events: auto;
}


.formula-card-quicklinks:empty {
  display: none !important;
}


.formula-card-quicklink {
  box-sizing: border-box !important;

  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;

  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;

  flex: 0 0 32px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border:
    1px solid
    rgba(15, 23, 42, .11) !important;

  border-radius: 9px !important;

  background:
    rgba(250, 250, 252, .96) !important;

  color: #555b6d !important;

  text-decoration: none !important;

  cursor: pointer !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease !important;
}


.formula-card-quicklink:hover {
  transform:
    translateY(-1px) !important;

  background:
    #ffffff !important;

  border-color:
    rgba(20, 18, 91, .25) !important;

  color:
    #14125b !important;

  box-shadow:
    0 4px 12px
    rgba(15, 23, 42, .08) !important;
}


.formula-card-quicklink:focus-visible {
  outline:
    2px solid
    rgba(20, 18, 91, .35) !important;

  outline-offset: 2px !important;
}


.formula-card-quicklink svg {
  width: 17px !important;
  height: 17px !important;

  display: block !important;

  fill: none !important;

  stroke:
    currentColor !important;

  stroke-width: 1.8 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;

  pointer-events:
    none !important;
}


.formula-card-quicklink-video svg {
  width: 18px !important;
  height: 18px !important;
}


/* ==========================================================
   DRAG & DROP VISUEL
   ========================================================== */

body.s2a-formula-drag-active,
body.s2a-formula-drag-active * {
  cursor:
    grabbing !important;

  user-select:
    none !important;

  -webkit-user-select:
    none !important;
}


/* Carte d'origine pendant le drag */

article.formula-visual.s2a-drag-source {
  opacity:
    .28 !important;

  filter:
    saturate(.65) !important;

  transition:
    opacity .12s ease !important;
}


/* Carte cible */

article.formula-visual.s2a-drop-target {
  box-shadow:
    0 0 0 3px
    rgba(31, 28, 116, .26),
    0 12px 28px
    rgba(31, 28, 116, .11)
    !important;

  border-color:
    rgba(31, 28, 116, .38)
    !important;

  transition:
    box-shadow .12s ease,
    border-color .12s ease
    !important;
}


/* Carte qui suit réellement le curseur */

.s2a-formula-drag-ghost {
  position:
    fixed !important;

  z-index:
    999999 !important;

  margin:
    0 !important;

  pointer-events:
    none !important;

  opacity:
    .88 !important;

  transform-origin:
    top left !important;

  transform:
    translate3d(0, 0, 0)
    scale(.94);

  box-shadow:
    0 24px 65px
    rgba(15, 18, 45, .26)
    !important;

  border:
    1px solid
    rgba(31, 28, 116, .25)
    !important;

  border-radius:
    18px !important;

  overflow:
    hidden !important;

  will-change:
    transform !important;

  transition:
    none !important;
}


/* Le ghost ne doit jamais recevoir de clic */

.s2a-formula-drag-ghost *,
.s2a-formula-drag-ghost a,
.s2a-formula-drag-ghost button {
  pointer-events:
    none !important;
}


/* La poignée est clairement draggable */

.formula-order-controls .drag-handle {
  cursor:
    grab !important;

  touch-action:
    none !important;
}


.formula-order-controls .drag-handle:active {
  cursor:
    grabbing !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  .formula-card-quicklinks {
    right:
      14px !important;

    height:
      30px !important;

    gap:
      6px !important;
  }


  .formula-card-quicklink {
    width:
      30px !important;

    min-width:
      30px !important;

    max-width:
      30px !important;

    height:
      30px !important;

    min-height:
      30px !important;

    max-height:
      30px !important;

    flex-basis:
      30px !important;

    border-radius:
      8px !important;
  }


  .formula-card-quicklink svg {
    width:
      16px !important;

    height:
      16px !important;
  }


  .s2a-formula-drag-ghost {
    opacity:
      .84 !important;

    transform:
      translate3d(0, 0, 0)
      scale(.90);
  }

}