/* Frontend styles */


/*MENU DIVI SUBMENU*/
#top-menu>li:not(.mega-menu)>ul {
    margin-top: -25px;
}


/*LOGO MOBILE MENU*/
@media (max-width: 980px) {
    .et_header_style_split #logo {
        margin-top: 8px;
    }
}

/*BOUTON DU SHORTCODE SUR TACK*/

.wk-track-actions.wk-ui-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.wk-track-actions .wk-act{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border:1px solid #ffffff;
  background:transparent;
  color:inherit;
  text-decoration:none;
  border-radius:0; /* look “squared” */
  cursor:pointer;
  font:inherit;
  line-height:1;
}

.wk-track-actions .wk-ico{
  display:inline-flex;
  width:18px;height:18px;
  align-items:center;
  justify-content:center;
}

.wk-track-actions .wk-act:hover{
  background:rgba(0,0,0,.05);
}

.wk-track-actions .wk-act.is-locked{
  opacity:.65;
}

.wk-track-actions .wk-status-loading{
  opacity:.65;
}





/*ELEMENT MENU SE CONNECTER */

/* === Alignement bouton Compte (dropdown) dans menu Divi === */

/* Ajuste le padding comme tes autres items (équivalent de l'ancien wk-menu-auth) */
#top-menu li.wk-menu-account{
  padding-right: 22px !important;
}

/* IMPORTANT : pas de flex sur le <a> sinon Divi peut décaler */
#top-menu li.wk-menu-account > a{
  display: inline-block !important;
  line-height: 1em;
}

/* Aligne le SVG comme une lettre */
#top-menu li.wk-menu-account svg{
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  position: relative;
  top: -1px;
}

/* === Alignement de la flèche Divi (dropdown indicator) ===
   Divi ajoute souvent .et_mobile_menu ou span.et-menu-child-indicator
   Selon thème/version, l’élément peut varier, donc on couvre les cas courants.
*/
#top-menu li.wk-menu-account > a .et-menu-child-indicator,
#top-menu li.wk-menu-account > a .et-menu-child-indicator-icon,
#top-menu li.wk-menu-account > a .icon_drop_down,
#top-menu li.wk-menu-account > a .et-pb-icon{
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-left: 6px;
}

/* Optionnel: évite que la flèche prenne une taille énorme selon Divi */
#top-menu li.wk-menu-account > a .et-pb-icon{
  font-size: 14px;
}

/* dropdwn menu */
#top-menu>li:not(.mega-menu)>ul {
    transform: translateX(-62px) !important;
}

#top-menu>li:not(.mega-menu)>.sub-menu:after, #top-menu>li>.children:after {
    left: 115px !important;

}



/* Espace entre le texte et l’icône dans le sous-menu Compte */
.wk-menu-account .wk-submenu-icon {
  margin-left: 8px; 
}



/*HEADER*/
.et_fixed_nav #main-header{
  background-image:
    linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)), /* voile opacité */
    url("https://www.ata-manager.com/wp-content/plugins/wildkeys-system/assets/img/header/icone-header.svg"),
    linear-gradient(180deg, #ccd0d3 0%, #fafafa 60%, #ffffff 100%);

  background-repeat: no-repeat, no-repeat, no-repeat;

  background-position:
    center, /* voile */
    calc(100% + 25px) calc(100% - 18px), /* ton SVG */
    center; /* gradient */

  background-size:
    cover,       /* voile */
    25% auto,    /* ton SVG */
    cover;       /* gradient */

  background-color: transparent;
}







/*ALBUM GRID*/
.wk-albums-grid {
  display: flex;
  flex-wrap: wrap;
}

.wk-album-card {
  width: 14.28%;
  padding: 1px;
  margin: 0;
  position: relative;
	border-radius:6px;
}

@media (max-width: 767px) {
  .wk-album-card { width: 50%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .wk-album-card { width: 25%; }
}

@media (min-width: 1025px) and (max-width: 1700px) {
  .wk-album-card { width: 20%; }
}

.wk-album-cover {
  display: block;
}

/* Réserve la place AVANT chargement => baisse le CLS */
.wk-album-cover picture {
  display: block;
  aspect-ratio: 1 / 1;
}

/* Remplit le carré */
.wk-album-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.wk-album-ref{
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 4px;
  background: #959799;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 0.72em;
  z-index: 2;
  display: none;
	
  /* 🔒 anti retour à la ligne */
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}



.wk-album-hover{
  position: absolute;
  inset: 0;
  padding: 10px;
  background: rgba(0,0,0,.85);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}


.wk-album-hover::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("/wp-content/plugins/wildkeys-system/assets/img/card/icone-hover.svg");
  background-repeat: no-repeat;
  background-position: right -230px bottom -80px; /* ajuste comme tu veux */
  background-size: 170%;                       /* ajuste taille */
  opacity: 0.18;                              /* filigrane */
  pointer-events: none;

  /* optionnel : rend le filigrane plus “fondu” */
  mix-blend-mode: screen;
}



@media (hover:hover) {
  .wk-album-card:hover .wk-album-hover{
    opacity: 1;
    pointer-events: auto;
  }
  .wk-album-card:hover .wk-album-ref{
    display: inline-flex;   /* ref visible uniquement au hover */
    align-items: center;
    justify-content: center;
  }
}

/* Mobile : pas de hover => tu cliques l’album */
@media (hover:none) {
  .wk-album-hover{ display:none; }
}

.wk-track-preview{
  list-style: none;
  margin-top: 0px;
  padding: 50px 0px 0px 0px !important; /* espace pour le #ref */
}

.wk-track-row{
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}


.wk-track-play{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, color .12s ease, background-color .12s ease;
}

.wk-track-play:hover{
  color: #959799;
  transform: scale(1.06);
}

.wk-all-tracks{
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  text-decoration: underline;
}

.wk-btn-loadmore{
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
}

/* Bouton caché seulement si l'auto-scroll est dispo (classe ajoutée en JS) */
.wk-btn-loadmore.wk-loadmore-hidden{
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.wk-loadmore-sentinel{
  width: 100%;
  height: 1px;
}


.wk-track-title{
  text-align:left;	
  font-size: 0.75em;
  line-height: 1.25;
}

/* Ordi portable / petit desktop */
@media (max-width: 1400px) {
  .wk-track-title{
    font-size: 0.68em;
  }
}

/* Tablette */
@media (max-width: 1024px) {
  .wk-track-title{
    font-size: 0.68em;
  }
}

/* Mobile (même si masqué, cohérence globale) */
@media (max-width: 767px) {
  .wk-track-title{
    font-size: 0.70em;
  }
}



.wk-svg-play{ width: 14px; height: 14px; display: block; }
.wk-play-stroke{ fill: none; stroke: currentColor; stroke-width: 2; }
.wk-play-fill{ fill: currentColor; opacity: 0; transition: opacity .12s ease; }
.wk-track-play:hover .wk-play-fill{ opacity: 1; }


/* Grand ordi : 6 tracks (par défaut) */
@media (max-width: 2560px) {
  .wk-track-preview > li:nth-child(n+7) { display: none; }
}

/* Grand Ordi : 5 tracks */
@media (max-width: 1900px) {
  .wk-track-preview > li:nth-child(n+6) { display: none; }
}

/* Ordi : 4 tracks */
@media (max-width: 1220px) {
  .wk-track-preview > li:nth-child(n+5) { display: none; }
}

/* Tablette : 4 tracks */
@media (max-width: 1024px) {
  .wk-track-preview > li:nth-child(n+5) { display: none; }
}

/* Tablette : 3 tracks */
@media (max-width: 880px) {
  .wk-track-preview > li:nth-child(n+4) { display: none; }
}

/* Mobile : aucun track */
@media (max-width: 767px) {
  .wk-track-preview { display: none; }
}







/*SHORTOCE MES PLAYLIST EMPTY*/

.wk-my-playlists-empty{
  width: 100%;
  padding: 60px 20px;
  text-align: center;
  color: #000000;
  background: #959799;
}

.wk-my-playlists-empty-title{
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 8px;
}

.wk-my-playlists-empty-text{
  font-size: 0.85em;
  opacity: .9;
}




/*SEARCH BARRE + AUTOSUGGEST*/

/* -------------------------------------------
   WildKeys Search (bar + autosuggest + results mode)
   Compatible WP/Divi linters (pas de "fr")
------------------------------------------- */

/* Root */
.wk-search{
  position: relative;
  width: 100%;
}

/* Barre */
/* Barre moderne (chips dans la barre) */
.wk-search-row{
  position: relative;
  width: 100%;
}

.wk-search-field{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.wk-search-chips-inline{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 55%;
  overflow: hidden;
}

.wk-search-input{
  flex: 1 1 auto;
  min-width: 80px;
  border: 0;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: #111;
  padding: 8px !important;
  border-radius: 4px;
}

.wk-search-input::placeholder{
  color: rgba(0,0,0,.40);
}

/* Tools à droite (Filters + clear + loupe) */
.wk-search-tools{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.wk-search-filterbtn{
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
  cursor: pointer;
  font-size: 13px;
  color: #111;
}

.wk-search-filterbtn:hover{
  background: rgba(0,0,0,.06);
}

.wk-search-clearbtn{
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #111;
}

.wk-search-clearbtn:hover{
  background: rgba(0,0,0,.06);
}

.wk-search-btn{
  width: 38px;
  height: 38px;
  border: 0;
  background: rgba(0,0,0,.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #111;
}

.wk-search-btn:hover{
  background: rgba(0,0,0,.10);
}

.wk-search-ico{
  width: 20px;
  height: 20px;
  display: block;
  color: currentColor;
}

/* Chips (même style que ta version, mais plus compact pour la barre) */
.wk-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
}

.wk-chip-label{
  font-size: 13px;
  color: #111;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wk-chip-x{
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(0,0,0,.08);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.wk-chip-x:hover{
  background: rgba(0,0,0,.14);
}

/* Tabs (affichées/masquées par le bouton Filters) */
.wk-search-tabs{
  margin-top: 10px;
}


/* --------------------
   MOBILE: barre sur 2 lignes
   - ligne 1: chips
   - ligne 2: input + tools
   - clear (croix) visuellement dans le champ
   (sans grid / sans 1fr)
-------------------- */
@media (max-width: 720px){

  /* Autorise le retour à la ligne */
  .wk-search-field{
    flex-wrap: wrap;
    gap: 10px;
    min-height: 0;
    padding: 10px;
  }

  /* Ligne 1 = chips sur 100% */
  .wk-search-chips-inline{
    order: 1;
    flex: 1 1 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  /* Ligne 2 = input */
  .wk-search-input{
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding-right: 40px; /* place pour la croix "dans" le champ */
	padding: 8px !important;
	border-radius: 4px;
  }

  /* Ligne 2 = tools (filters + clear + loupe) */
  .wk-search-tools{
    order: 3;
    flex: 0 0 auto;
    position: relative; /* ancre pour la croix absolute */
    gap: 8px;
  }

  /* Clear = petit et "dans le champ" (débord à gauche) */
  .wk-search-clearbtn{
    position: absolute;
    left: -40px;         /* rentre dans la zone input */
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .wk-search-clearbtn:hover{
    background: rgba(0,0,0,.10);
  }

  .wk-search-clearbtn .wk-search-ico{
    width: 16px;
    height: 16px;
  }

  /* Ajuste un peu les boutons à droite sur mobile */
  .wk-search-filterbtn{
    height: 38px;
  }

  .wk-search-btn{
    width: 42px;
    height: 38px;
    border-radius: 12px;
  }
}




/* Autosuggest dropdown */
/* Autosuggest dropdown (multi-colonnes) */

.wk-search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);

    /* Dégradé blanc → gris très clair */
    background: linear-gradient(180deg, #ccd0d3 0%, #fafafa 50%, #ffffff 100%);
    border: 0px solid rgba(0, 0, 0, .18);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    z-index: 999999;
    overflow: hidden;

    /* Colonnes */
	display: flex !important;
    flex-wrap: wrap;
}







/* Groupe = une "carte" */
.wk-sg-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px;
  border-right: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-sizing: border-box;

  /* 3 colonnes desktop par défaut */
  width: 33.333%;
  min-width: 0;
}

.wk-sg-group:nth-child(3n){
  border-right: 0;
}

/* Titre en haut */
.wk-sg-title{
  width: auto;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #111;
  opacity: .85;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Liste items */
.wk-sg-items{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wk-sg-item{
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 14px;
  color: #111;
  line-height: 1.2;
}

.wk-sg-item:hover{
  background: rgba(0,0,0,.05);
}

/* Tablette: 2 colonnes */
@media (max-width: 1024px){
  .wk-sg-group{
    width: 50%;
  }
  .wk-sg-group:nth-child(3n){
    border-right: 1px solid rgba(0,0,0,.08);
  }
  .wk-sg-group:nth-child(2n){
    border-right: 0;
  }
}

/* Mobile: 1 colonne */
@media (max-width: 720px){
  .wk-sg-group{
    width: 100%;
    border-right: 0;
  }
}


/* Icônes dans le titre (nécessite data-kind sur .wk-sg-title) */


.wk-sg-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,.75);
}

.wk-sg-ico svg{
  width: 16px;
  height: 16px;
  display: block;
}

.wk-sg-ico img{
  width: 16px;
  height: 16px;
  display: block;
}

/* Si l'icône ne contient rien de visible, ne pas réserver d'espace */
.wk-sg-ico:empty{
  display: none;
}

/* Si l'image est en display:none (onerror), ne pas réserver d'espace non plus */
.wk-sg-ico img[style*="display: none"]{
  display: none !important;
}



/* Mode results: chips */
.wk-search-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 2px 0 2px;
}

.wk-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  padding: 6px 10px;
}

.wk-chip-label{
  font-size: 13px;
  color: #111;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-chip-x{
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(0,0,0,.06);
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.wk-chip-x:hover{
  background: rgba(0,0,0,.12);
}

/* Mode results: tabs */
.wk-search-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 2px 0 2px;
}

.wk-search-tab{
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #111;
}

.wk-search-tab:hover{
  background: rgba(0,0,0,.04);
}

/* Panel (mega menu) */
.wk-search-panel{
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  background: #fff;
  padding: 10px 10px 12px 10px;
}

.wk-panel-head{
  font-size: 13px;
  font-weight: 600;
  color: #111;
  opacity: .85;
  padding: 4px 6px 10px 6px;
}

.wk-panel-cloud{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wk-panel-item{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #111;
}

.wk-panel-item:hover{
  background: rgba(0,0,0,.06);
}

/* Results */
.wk-search-results{
  width: 100%;
}

.wk-search-results-title{
  margin: 0 0 12px 0;
  font-size: 22px;
  line-height: 1.2;
}

.wk-search-tracks{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-search-track-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 5px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 6px;
  background: #fff;
}

.wk-search-track-row:hover{
  background: #fafafa;
}




.wk-search-track-play{
  width: 60px;
  height: 60px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wk-search-track-play:hover{
  background: rgba(0,0,0,.05);
}

/* Fix iOS/Safari: empêcher le bleu auto sur les boutons */
@media (max-width: 720px){
  .wk-search-track-play{
    color: #000 !important;
    -webkit-text-fill-color: #000; /* iOS */
  }

  .wk-search-track-play svg,
  .wk-search-track-play svg *{
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

.wk-search-track-main{
  min-width: 0;
  flex: 1 1 auto;
}

.wk-search-track-title{
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-search-track-meta{
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wk-search-track-meta-item{
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

/* Mobile */
@media (max-width: 767px){
  .wk-search-label{
    display: none;
  }

  .wk-sg-group{
    flex-direction: column;
  }

  .wk-sg-title{
    width: auto;
    flex: 0 0 auto;
  }

  .wk-chip-label{
    max-width: 160px;
  }

  .wk-search-results-title{
    font-size: 18px;
  }
}


/* Item de filtre déjà appliqué (même état visuel que "selected") */
.wk-search-panel .wk-filter-item.is-active{
  background: #111;
  color: #fff;
  border-color: #111;
}
.wk-search-panel .wk-filter-item.is-active:hover{
  background: #000;
}





/* SEARCH RESULTS: play/pause icons sizing */
.wk-search-track-play .wk-play-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wk-search-track-play .wk-play-ico svg{
  width: 30px;
  height: 30px;
  display: block;
}

/* SEARCH RESULTS: playing highlight */
.wk-search-track-row.is-playing{
  border-color: rgba(0,0,0,.22);
  background: rgba(0,0,0,.03);
}

/* Optional: playing button emphasis */
.wk-search-track-row.is-playing .wk-search-track-play{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.22);
}




/* ---------------------------
   SEARCH RESULTS: cover + actions compact
   (override minimal, sans doublons)
--------------------------- */

/* Cover plus petite */
.wk-search-track-cover{
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
}

.wk-search-track-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Masquer la cover des tracks sur mobile */
@media (max-width: 720px){
  .wk-search-track-cover{
    display: none !important;
  }
}

/* Actions à droite (icônes only + hover) */
.wk-search-track-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color:#000000;
}

/* On cache par défaut les actions "hover", et on les montre au survol de la ligne */
.wk-search-track-row .wk-actions-hover{
  opacity: 0;
  pointer-events: none;
  transform: translateY(1px);
  transition: opacity .12s ease, transform .12s ease;
}

.wk-search-track-row:hover .wk-actions-hover,
.wk-search-track-row:focus-within .wk-actions-hover{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Mode compact : icônes seules, taille cohérente */
.wk-actions-compact{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Si ton shortcode génère des boutons/liens avec une classe .wk-act (sinon on adaptera en étape PHP) */
.wk-actions-compact .wk-act{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.wk-actions-compact .wk-act:hover{
  background: #1b1b1b;
  border-color: #1b1b1b;
  color: #ffffff;
}

/* Hover sombre => badges MP3/HD lisibles */
.wk-actions-compact .wk-act:hover .wk-ico-badge{
  border-color: rgba(255,255,255,.55);
  color: #ffffff;
  background: rgba(255,255,255,.08);
}


/* Cache tous les libellés texte dans le mode compact */
.wk-actions-compact .wk-lbl{
  display: none;
}

/* Icônes (SVG) */
.wk-actions-compact .wk-ico{
  width: 18px;
  height: 18px;
  display: block;
}

/* Badges texte HD / MP3 dans l'icône si on les rend en HTML (span) */
.wk-actions-compact .wk-ico-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
   border: 0;              /* retire border */
  background: transparent;/* retire fond gris */

}



/*ACTION SUR MOBLE PAGE RESULT*/
/* ACTIONS MOBILE PAGE RESULT (popover overlay) */

/* --- Kebab button --- */
.wk-actions-menu-btn{
  display:none;
  width:36px;
  height:36px;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#000;
}

.wk-actions-menu-btn:hover{
  background:#1b1b1b;
  border-color:#1b1b1b;
  color:#fff;
}

/* Host desktop (actions à droite) */
.wk-actions-host{
  display:inline-flex;
}

/* Desktop: on garde ton hover existant */
@media (min-width: 721px){
  /* rien */
}

/* Mobile */
@media (max-width: 720px){

  /* Important: permet au popover de dépasser sans agrandir la row */
  .wk-search-track-row{
    position: relative;
    overflow: visible;
  }

  /* Cache actions hover desktop sur mobile */
  .wk-actions-host .wk-actions-hover{
    display:none !important;
    opacity: 0 !important;
    pointer-events:none !important;
  }

  /* Affiche le kebab */
  .wk-actions-menu-btn{
    display:inline-flex;
  }

  /* Drawer devient un popover overlay */
  .wk-actions-drawer{
    position: absolute;
    z-index: 9999;
    width: 220px;
    margin: 0;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }

  /* Petite flèche */
  .wk-actions-drawer:before{
    content:"";
    position:absolute;
    top:-6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background:#fff;
    border-left: 1px solid rgba(0,0,0,.12);
    border-top: 1px solid rgba(0,0,0,.12);
    transform: rotate(45deg);
  }

  /* Menu en colonne */
  .wk-actions-drawer .wk-track-actions{
    display:flex;
    flex-direction:column;
    gap: 8px;
    align-items: stretch;
    text-align: left;
  }

  /* Chaque action = ligne cliquable */
  .wk-actions-drawer .wk-track-actions a,
  .wk-actions-drawer .wk-track-actions button{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    text-decoration:none;
    color:#000;
    background:transparent;
    line-height: 1.2;
  }
	
  /* Le badge MP3 doit se comporter comme un label */
  .wk-actions-drawer .wk-track-actions .wk-ico-badge{
    display:inline-block;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
  }


	

  /* Active (mobile) */
  .wk-actions-drawer .wk-track-actions a:active,
  .wk-actions-drawer .wk-track-actions button:active{
    background:#1b1b1b;
    color:#fff;
  }

  /* Hover si device le supporte */
  @media (hover:hover){
    .wk-actions-drawer .wk-track-actions a:hover,
    .wk-actions-drawer .wk-track-actions button:hover{
      background:#1b1b1b;
      color:#fff;
    }
  }

  /* Forcer les icônes à suivre currentColor */
  .wk-actions-drawer .wk-track-actions svg{
    width:18px;
    height:18px;
    color: currentColor;
    fill: currentColor;
    flex: 0 0 auto;
  }

  /* Labels visibles dans le popover */
  .wk-actions-drawer .wk-track-actions .wk-lbl{
    display:inline !important;
    opacity:1 !important;
    visibility:visible !important;
  }
	
  /* Ajoute un espace après le badge MP3 uniquement */
  /* MP3 dans le popover : on affiche un vrai libellé comme les autres */
  .wk-actions-drawer .wk-act-mp3 .wk-lbl{
    display:inline !important;
  }

  /* Et on cache le badge "MP3" (utile sur desktop, inutile dans le popover) */
  .wk-actions-drawer .wk-act-mp3 .wk-ico-badge{
    display:none !important;
  }
}