/* ==========================================================
   S2A ARTISTES
   FORMULES — UI CLEAN FIX 2
   ========================================================== */


/* ----------------------------------------------------------
   ÉLÉMENTS À MASQUER
   ---------------------------------------------------------- */

.s2a-force-hide,
.s2a-formula-kicker-700.s2a-force-hide,
.s2a-formula-intro-700.s2a-force-hide {
  display: none !important;
}


/* Le kicker V7.0.0 est définitivement masqué.
   Le grand titre devient l'unique titre de la fenêtre. */

.s2a-formula-kicker-700 {
  display: none !important;
}


/* ----------------------------------------------------------
   TITRE PRINCIPAL
   ---------------------------------------------------------- */

.s2a-formula-main-title-700 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  line-height: 1.08 !important;
}


/* ----------------------------------------------------------
   DUPLICATION
   ---------------------------------------------------------- */

.s2a-dup-card-700 {
  margin-top: 4px !important;
}

.s2a-dup-toggle-700 {
  width: 100% !important;
  min-height: 64px !important;

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

  gap: 18px !important;

  padding: 14px 18px !important;

  text-align: left !important;
}

.s2a-dup-toggle-copy-700 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  gap: 3px !important;

  min-width: 0 !important;
}

.s2a-dup-title-700,
.s2a-dup-toggle-title-700 {
  display: block !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  line-height: 1.25 !important;

  opacity: 1 !important;
}

.s2a-dup-help-700,
.s2a-dup-toggle-help-700 {
  display: block !important;

  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1.3 !important;

  opacity: .62 !important;
}

.s2a-dup-icon-700,
.s2a-dup-toggle-icon-700 {
  flex: 0 0 auto !important;
}


/* ----------------------------------------------------------
   CARTES FORMULES — BARRE DE TRI
   ---------------------------------------------------------- */

.formula-order-controls {
  box-sizing: border-box !important;

  width: 100% !important;

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

  gap: 6px !important;

  padding: 7px 12px !important;

  min-height: 48px !important;
}


/* Tous les contrôles deviennent compacts */

.formula-order-controls > button {
  box-sizing: border-box !important;

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

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

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

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

  flex: 0 0 34px !important;

  border-radius: 10px !important;

  font-size: 17px !important;
  line-height: 1 !important;
}


/* ----------------------------------------------------------
   POIGNÉE DRAG & DROP
   ---------------------------------------------------------- */

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

  font-size: 0 !important;

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

  touch-action: none !important;
}

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

.s2a-drag-dots {
  width: 12px !important;
  height: 18px !important;

  display: grid !important;

  grid-template-columns:
    repeat(2, 4px) !important;

  grid-template-rows:
    repeat(3, 4px) !important;

  gap: 3px 4px !important;

  align-content: center !important;
  justify-content: center !important;

  pointer-events: none !important;
}

.s2a-drag-dots > i {
  display: block !important;

  width: 4px !important;
  height: 4px !important;

  min-width: 4px !important;
  min-height: 4px !important;

  border-radius: 50% !important;

  background: currentColor !important;

  opacity: .65 !important;

  pointer-events: none !important;
}


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

@media (max-width: 700px) {

  .formula-order-controls {
    gap: 5px !important;
    padding: 7px 10px !important;
    min-height: 46px !important;
  }

  .formula-order-controls > button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

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

    flex-basis: 32px !important;

    border-radius: 9px !important;
  }

  .s2a-dup-toggle-700 {
    padding: 13px 15px !important;
  }

  .s2a-formula-main-title-700 {
    margin-bottom: 17px !important;
  }
}