/* ==========================================================================
   SAMAKENTRA — FEUILLE DE STYLE PERSONNALISÉE
   Version consolidée et sécurisée

   IMPORTANT
   - Les règles ont été conservées dans leur ordre de cascade.
   - Lorsqu’un même sélecteur réapparaissait plus bas, les déclarations
     réellement remplacées par la version la plus récente ont été supprimées.
   - L’ordre historique reste donc intact afin d’éviter les régressions.
   - Ne pas entourer ce fichier de balises <style>.
   ========================================================================== */

/* =========================================================
   SAMAKENTRA — MENU WORDPRESS GLOBAL
   ========================================================= */

:root {
  
  --sk-primary-dark: #105e66;
  --sk-accent: #167f86;
  --sk-background: rgba(250, 252, 251, 0.96);
  --sk-muted: #71888b;
  
  --sk-shadow: 0 6px 24px rgba(16, 94, 102, 0.13);
  --sk-menu-height: 74px;
}

/* Conteneur général */

.samakentra-wordpress-nav {
  position: relative;
  z-index: 99990;
  width: 100%;
  margin: 0;
  padding: 0;
}

.samakentra-wordpress-nav,
.samakentra-wordpress-nav * {
  box-sizing: border-box;
}

/* Neutralisation de la mise en forme du widget */

.samakentra-wordpress-nav nav,
.samakentra-wordpress-nav .elementor-nav-menu--main,
.samakentra-wordpress-nav .menu-navigation-samakentra-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Liste des cinq éléments */

.samakentra-wordpress-nav ul,
.samakentra-wordpress-nav .elementor-nav-menu {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;

  width: 100% !important;
  min-height: var(--sk-menu-height);

  margin: 0 !important;
  padding: 0 max(8px, env(safe-area-inset-right, 0px))
    0 max(8px, env(safe-area-inset-left, 0px)) !important;

  list-style: none !important;

  background: var(--sk-background);
  border: 0;
  border-bottom: 1px solid var(--sk-border);
  box-shadow: var(--sk-shadow);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Chaque élément */

.samakentra-wordpress-nav li,
.samakentra-wordpress-nav .menu-item {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

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

  border: 0 !important;
}

/* Liens */

.samakentra-wordpress-nav li > a,
.samakentra-wordpress-nav .elementor-item {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  width: 100% !important;
  min-height: var(--sk-menu-height) !important;

  margin: 0 !important;
  padding: 9px 3px 7px !important;

  color: var(--sk-muted) !important;

  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-decoration: none !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;

  -webkit-tap-highlight-color: transparent;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease !important;
}

.samakentra-wordpress-nav li > a:hover,
.samakentra-wordpress-nav li > a:focus-visible,
.samakentra-wordpress-nav .elementor-item:hover,
.samakentra-wordpress-nav .elementor-item:focus-visible {
  color: var(--sk-primary) !important;
  background: rgba(22, 127, 134, 0.07) !important;
}

.samakentra-wordpress-nav li > a:active {
  transform: scale(0.96);
}

/* =========================================================
   ICÔNES AJOUTÉES PAR CSS
   ========================================================= */

.samakentra-wordpress-nav li > a::before {
  content: "";

  display: block;

  width: 24px;
  height: 24px;

  margin: 0 auto 3px;

  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Accueil */

.samakentra-wordpress-nav li:nth-child(1) > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 3l9 7.8'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 3l9 7.8'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
}

/* Catégories */

.samakentra-wordpress-nav li:nth-child(2) > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E");
}

/* Recherche */

.samakentra-wordpress-nav li:nth-child(3) > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
}

/* Favoris */

.samakentra-wordpress-nav li:nth-child(4) > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.8a5.5 5.5 0 0 0-7.8 0L12 5.9l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.4a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.8a5.5 5.5 0 0 0-7.8 0L12 5.9l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.4a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}

/* Mon espace */

.samakentra-wordpress-nav li:nth-child(5) > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
}

/* =========================================================
   PAGE ACTIVE — GÉRÉE PAR WORDPRESS
   ========================================================= */

.samakentra-wordpress-nav .current-menu-item > a,
.samakentra-wordpress-nav .current_page_item > a,
.samakentra-wordpress-nav .current-menu-parent > a,
.samakentra-wordpress-nav .current-menu-ancestor > a {
  color: var(--sk-primary-dark) !important;
  font-weight: 700 !important;
  background: rgba(22, 127, 134, 0.05) !important;
}

.samakentra-wordpress-nav .current-menu-item > a::after,
.samakentra-wordpress-nav .current_page_item > a::after {
  content: "";

  position: absolute;
  right: 30%;
  bottom: 0;
  left: 30%;

  height: 3px;

  background: var(--sk-accent);
  border-radius: 10px 10px 0 0;
}

/* =========================================================
   ORDINATEUR
   ========================================================= */

@media screen and (min-width: 1025px) {

  .samakentra-wordpress-nav ul,
  .samakentra-wordpress-nav .elementor-nav-menu {
    display: flex !important;
    justify-content: center !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  .samakentra-wordpress-nav li,
  .samakentra-wordpress-nav .menu-item {
    flex: 0 1 180px !important;
    width: 180px !important;
    max-width: 180px !important;
  }

  .samakentra-wordpress-nav li > a,
  .samakentra-wordpress-nav .elementor-item {
    min-height: 78px !important;
    font-size: 12px !important;
  }

  .samakentra-wordpress-nav li > a::before {
    width: 25px;
    height: 25px;
  }
}


/* =========================================================
   MOBILE ET TABLETTE
   ========================================================= */

@media screen and (max-width: 1024px) {

  html,
  body {
    overflow-x: clip !important;
  }

  /* Suppression de la largeur encadrée du header Elementor */
  #tahefobu-header,
  #tahefobu-header .elementor,
  #tahefobu-header .elementor-section,
  #tahefobu-header .elementor-container,
  #tahefobu-header .e-con,
  #tahefobu-header .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /*
   * Le menu sort du conteneur Elementor
   * et prend exactement toute la largeur de l’écran.
   */
  .samakentra-wordpress-nav {
    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;

    padding-right: 0 !important;
    padding-left: 0 !important;

    box-sizing: border-box !important;
  }

  .samakentra-wordpress-nav .elementor-widget-container,
  .samakentra-wordpress-nav nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Répartition parfaitement égale des cinq éléments */
  .samakentra-wordpress-nav ul,
  .samakentra-wordpress-nav .elementor-nav-menu {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;

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

    box-sizing: border-box !important;
  }

  .samakentra-wordpress-nav li,
  .samakentra-wordpress-nav .menu-item {
    flex: none !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

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

  .samakentra-wordpress-nav li > a,
  .samakentra-wordpress-nav .elementor-item {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================
   TRÈS PETITS ÉCRANS
   ========================================================= */

@media screen and (max-width: 370px) {

  .samakentra-wordpress-nav li > a,
  .samakentra-wordpress-nav .elementor-item {
    padding-right: 1px !important;
    padding-left: 1px !important;
    font-size: 9px !important;
  }

  .samakentra-wordpress-nav li > a::before {
    width: 21px;
    height: 21px;
  }
}


/* =========================================================
   ÉLÉMENTS WORDPRESS / HEADER
   ========================================================= */

.tahefobu-mobile-toggle-wrap {
  display: none !important;
}

.entry-title {
  display: none !important;
}

#tahefobu-header {
  --ta-sticky-top: -18px !important;
}


/*mobile player*/

.srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_artwork img {
    width: 70%!important;

}

/* =========================================================
   BOUTON « SUPPRIMER TOUS LES FAVORIS » — SAMAKENTRA
   ========================================================= */

.srp-fav-removeall-wrapper .srp-fav-removeall-bt {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-height: 44px;
    padding: 0 18px !important;
    margin-bottom: 16px;

    background-color: #176B70 !important;
    color: #FFFFFF !important;

    border: 1px solid #176B70 !important;
    border-radius: 12px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;

    cursor: pointer;
    box-shadow: 0 6px 18px rgba(33, 54, 56, 0.08);

    transition:
        background-color 180ms ease-out,
        color 180ms ease-out,
        border-color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 180ms ease-out;
}

/* Hover inversé */

.srp-fav-removeall-wrapper .srp-fav-removeall-bt:hover {
    background-color: #FFFFFF !important;
    color: #176B70 !important;
    border-color: #176B70 !important;

    box-shadow: 0 10px 28px rgba(33, 54, 56, 0.12);
    transform: translateY(-1px);
}

/* Clic */

.srp-fav-removeall-wrapper .srp-fav-removeall-bt:active {
    background-color: #EEF7F6 !important;
    color: #0E4A4D !important;
    border-color: #0E4A4D !important;

    box-shadow: none;
    transform: translateY(0);
}

/* Focus clavier */

.srp-fav-removeall-wrapper .srp-fav-removeall-bt:focus,
.srp-fav-removeall-wrapper .srp-fav-removeall-bt:focus-visible {
    background-color: #176B70 !important;
    color: #FFFFFF !important;
    border-color: #176B70 !important;

    outline: 2px solid #248B8E;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(36, 139, 142, 0.18);
}

/* =========================================================
   BARRE DE RECHERCHE — SAMAKENTRA
   ========================================================= */

.srp_search_main .srp_search_container .srp_search {
    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-height: 48px;

    padding: 12px 16px 12px 45px !important;

    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    color: #213638 !important;
    background-color: #FFFFFF !important;

    border: 1px solid #DFE9E8 !important;
    border-radius: 12px !important;
    outline: none !important;

    box-shadow: 0 6px 18px rgba(33, 54, 56, 0.05);

    transition:
        background-color 180ms ease-out,
        color 180ms ease-out,
        border-color 180ms ease-out,
        box-shadow 180ms ease-out;
}

/* Texte indicatif */

.srp_search_main .srp_search_container .srp_search::placeholder {
    color: #687A7B !important;
    opacity: 1;
}

/* Survol */

.srp_search_main .srp_search_container .srp_search:hover {
    color: #213638 !important;
    background-color: #EEF7F6 !important;

    border-color: #A8D3D1 !important;

    box-shadow: 0 8px 22px rgba(33, 54, 56, 0.08);
}

/* Focus / saisie */

.srp_search_main .srp_search_container .srp_search:focus {
    color: #213638 !important;
    background-color: #FFFFFF !important;

    border-color: #248B8E !important;

    box-shadow:
        0 0 0 3px rgba(36, 139, 142, 0.18),
        0 8px 22px rgba(33, 54, 56, 0.08);
}

/* Placeholder lorsque le champ est actif */

.srp_search_main .srp_search_container .srp_search:focus::placeholder {
    color: #94A5A5 !important;
}

/* =========================================================
   OPTIONS DES FILTRES — SAMAKENTRA
   ========================================================= */

/* Conteneur déroulant */

.srp-filters-container .multiselect__content-wrapper {
    background-color: #FFFFFF !important;
    border: 1px solid #DFE9E8 !important;
    border-radius: 12px !important;

    box-shadow: 0 12px 32px rgba(33, 54, 56, 0.12) !important;

    overflow: hidden;
}

/* Élément de la liste */

.srp-filters-container
.multiselect__content-wrapper
li.multiselect__element {
    color: #213638 !important;
    background-color: #FFFFFF !important;
}

/* Option normale */

.srp-filters-container .multiselect__option {
    display: flex;
    align-items: center;

    min-height: 44px;
    padding: 11px 16px !important;

    color: #213638 !important;
    background-color: #FFFFFF !important;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    transition:
        background-color 180ms ease-out,
        color 180ms ease-out;
}

/* Survol ou navigation clavier */

.srp-filters-container .multiselect__option--highlight {
    color: #176B70 !important;
    background-color: #EEF7F6 !important;
}

/* Option sélectionnée */

.srp-filters-container .multiselect__option--selected {
    color: #176B70 !important;
    background-color: #E2F2F1 !important;

    font-weight: 600 !important;
}

/* Option sélectionnée au survol */

.srp-filters-container
.multiselect__option--selected.multiselect__option--highlight {
    color: #FFFFFF !important;
    background-color: #176B70 !important;
}

/* Séparateur léger entre les options */

.srp-filters-container
.multiselect__content-wrapper
li.multiselect__element:not(:last-child) {
    border-bottom: 1px solid #EEF7F6;
}

/* Option désactivée */

.srp-filters-container .multiselect__option--disabled {
    color: #94A5A5 !important;
    background-color: #F3F6F5 !important;

    cursor: not-allowed;
    opacity: 1 !important;
}

/* =========================================================
   PASTILLES DES FILTRES ACTIFS — SAMAKENTRA
   ========================================================= */

.srp_chips .srp_chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 36px;
    padding: 7px 12px !important;

    background-color: #EEF7F6 !important;
    color: #176B70 !important;

    border: 1px solid #A8D3D1 !important;
    border-radius: 999px !important;

    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background-color 180ms ease-out,
        color 180ms ease-out,
        border-color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 180ms ease-out;
}

/* Hover inversé */

.srp_chips .srp_chip:hover {
    background-color: #176B70 !important;
    color: #FFFFFF !important;

    border-color: #176B70 !important;

    box-shadow: 0 6px 18px rgba(33, 54, 56, 0.12) !important;
    transform: translateY(-1px);
}

/* Clic */

.srp_chips .srp_chip:active {
    background-color: #0E4A4D !important;
    color: #FFFFFF !important;

    border-color: #0E4A4D !important;

    box-shadow: none !important;
    transform: translateY(0);
}

/* Icône ou croix de suppression */

.srp_chips .srp_chip i,
.srp_chips .srp_chip svg,
.srp_chips .srp_chip .srp_chip_remove,
.srp_chips .srp_chip .srp_chip-remove {
    color: #176B70 !important;
    fill: currentColor !important;

    transition:
        color 180ms ease-out,
        fill 180ms ease-out;
}

/* Icône blanche au survol */

.srp_chips .srp_chip:hover i,
.srp_chips .srp_chip:hover svg,
.srp_chips .srp_chip:hover .srp_chip_remove,
.srp_chips .srp_chip:hover .srp_chip-remove {
    color: #FFFFFF !important;
    fill: currentColor !important;
}

/* Focus clavier */

.srp_chips .srp_chip:focus-visible {
    outline: 2px solid #248B8E;
    outline-offset: 2px;

    box-shadow: 0 0 0 4px rgba(36, 139, 142, 0.18) !important;
}


/*image sticky player*/
#sonaar-player .playerNowPlaying .album-art img:not(.hover) {
border-radius: 10px;
}
#sonaar-player .playerNowPlaying .album-art img.hover {

    border-radius: 10px;
}
.srp_extendedPlayer_container .srp_extendedPlayer .srp_ext_artwork img {
    border-radius: 10px;
}

/* Centre le bouton Google sans l'étirer */
#nsl-custom-login-form-1 .nsl-container-embedded-login-layout-below,
#nsl-custom-login-form-1 .nsl-container,
div.nsl-container {
  text-align: center !important;
}

/* Le conteneur se centre, mais garde la largeur réelle du bouton */
#nsl-custom-login-form-1 .nsl-container-buttons,
div.nsl-container.nsl-container-block .nsl-container-buttons {
  display: inline-grid !important;
  grid-template-columns: auto !important;
  width: auto !important;
  max-width: max-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  justify-items: center !important;
}

/* Le bouton garde sa taille naturelle */
#nsl-custom-login-form-1 .nsl-button,
div.nsl-container .nsl-button {
  width: auto !important;
  max-width: max-content !important;
  min-width: unset !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* =========================================================
   BOUTON FORMULAIRE WPPB - DA SAMAKENTRA
   Centré sans étirement
   ========================================================= */

/* Base box-sizing */
.wppb-user-forms,
.wppb-user-forms * {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

/* Centre la zone du bouton */
.wppb-user-forms .form-submit,
.wppb-user-forms p.form-submit,
.wppb-user-forms .wppb-submit {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Style du bouton */
.wppb-user-forms input[type="submit"],
.wppb-user-forms button[type="submit"],
.wppb-user-forms .wppb-submit input[type="submit"] {
  width: auto !important;
  min-width: 180px !important;
  max-width: max-content !important;

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

  padding: 13px 24px !important;
  border-radius: 999px !important;

  background: #176B70 !important;
  color: #FFFFFF !important;
  border: 1px solid #176B70 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;

  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(33, 54, 56, 0.08) !important;
  transition: 
    background 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms ease-out !important;
}

/* Hover SamaKentra */
.wppb-user-forms input[type="submit"]:hover,
.wppb-user-forms button[type="submit"]:hover,
.wppb-user-forms .wppb-submit input[type="submit"]:hover {
  background: #12595D !important;
  color: #FFFFFF !important;
  border-color: #12595D !important;
  box-shadow: 0 10px 28px rgba(33, 54, 56, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* Clic */
.wppb-user-forms input[type="submit"]:active,
.wppb-user-forms button[type="submit"]:active,
.wppb-user-forms .wppb-submit input[type="submit"]:active {
  background: #0E4A4D !important;
  border-color: #0E4A4D !important;
  transform: translateY(1px) !important;
}

/* Focus clavier */
.wppb-user-forms input[type="submit"]:focus-visible,
.wppb-user-forms button[type="submit"]:focus-visible,
.wppb-user-forms .wppb-submit input[type="submit"]:focus-visible {
  outline: 2px solid #248B8E !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(36, 139, 142, 0.22) !important;
}
/* =========================================================
   SAMAKENTRA — LISTES DÉROULANTES SCROLLABLES
   ========================================================= */

.multiselect__content-wrapper {
  max-height: 320px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;

  background: #ffffff !important;
  border: 1px solid #dfe9e8 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 10px 28px rgba(33, 54, 56, 0.10) !important;

  scrollbar-width: thin;
  scrollbar-color: #a8d3d1 #eef7f6;
}

/* Liste intérieure */
.multiselect__content {
  width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 !important;
}

/* Options tactiles */
.multiselect__option {
  min-height: 44px !important;
  padding: 11px 14px !important;
  color: #213638 !important;
}

/* Option touchée ou survolée */
.multiselect__option--highlight {
  background: #eef7f6 !important;
  color: #176b70 !important;
}

/* Option sélectionnée */
.multiselect__option--selected {
  background: #e2f2f1 !important;
  color: #0e4a4d !important;
  font-weight: 600 !important;
}

/* Ascenseur Chrome / Android */
.multiselect__content-wrapper::-webkit-scrollbar {
  width: 9px;
}

.multiselect__content-wrapper::-webkit-scrollbar-track {
  background: #eef7f6;
}

.multiselect__content-wrapper::-webkit-scrollbar-thumb {
  background: #a8d3d1;
  border: 2px solid #eef7f6;
  border-radius: 999px;
}
/* =====================================================
   BOUTON DE DÉCONNEXION — SAMAKENTRA
   Profile Builder : .wppb-logout-url
===================================================== */

.wppb-logout-url {
  box-sizing: border-box !important;

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

  min-height: 44px !important;
  padding: 11px 20px !important;

  border: 1px solid #A8D3D1 !important;
  border-radius: 14px !important;

  background-color: #FFFFFF !important;
  color: #176B70 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;

  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(33, 54, 56, 0.06) !important;

  cursor: pointer !important;

  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out,
    box-shadow 180ms ease-out,
    transform 180ms ease-out !important;
}


/* =====================================================
   SURVOL
===================================================== */

.wppb-logout-url:hover {
  background-color: #EEF7F6 !important;
  border-color: #248B8E !important;
  color: #12595D !important;

  text-decoration: none !important;

  box-shadow: 0 10px 28px rgba(33, 54, 56, 0.10) !important;
  transform: translateY(-2px) !important;
}


/* =====================================================
   CLIC / ÉTAT PRESSÉ
===================================================== */

.wppb-logout-url:active {
  background-color: #E2F2F1 !important;
  border-color: #176B70 !important;
  color: #0E4A4D !important;

  box-shadow: 0 3px 10px rgba(33, 54, 56, 0.07) !important;
  transform: translateY(1px) !important;
}


/* =====================================================
   FOCUS CLAVIER / ACCESSIBILITÉ
===================================================== */

.wppb-logout-url:focus {
  color: #176B70 !important;
  text-decoration: none !important;
}

.wppb-logout-url:focus-visible {
  outline: 2px solid #248B8E !important;
  outline-offset: 3px !important;

  box-shadow:
    0 0 0 3px rgba(36, 139, 142, 0.22),
    0 6px 18px rgba(33, 54, 56, 0.06) !important;
}


/* =====================================================
   LIEN DÉJÀ VISITÉ
   Évite la couleur violette par défaut
===================================================== */

.wppb-logout-url:visited {
  color: #176B70 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 767px) {

  .wppb-logout-url {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
  }

}
/* =====================================================
   ONGLETS ELEMENTOR ATOMIQUES — SAMAKENTRA
   Messagerie · Historique · Mon profil
===================================================== */


/* =====================================================
   BARRE GÉNÉRALE DES ONGLETS
===================================================== */

.e-con.e-atomic-element.e-tabs-menu-base {
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;

  width: 100% !important;
  max-width: 720px !important;

  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;

  background: #FFFFFF !important;
  border: 1px solid #DFE9E8 !important;
  border-radius: 14px !important;

  box-shadow: 0 6px 18px rgba(33, 54, 56, 0.06) !important;

  overflow: hidden !important;
}


/* =====================================================
   CHAQUE COLONNE / WRAPPER D’ONGLET
===================================================== */

.e-con.e-atomic-element.e-tabs-menu-base > * {
  box-sizing: border-box !important;

  flex: 1 1 0 !important;

  width: 33.333% !important;
  min-width: 0 !important;
  max-width: none !important;

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

  align-self: stretch !important;
}


/* =====================================================
   VÉRITABLE DÉCLENCHEUR ELEMENTOR
===================================================== */

.e-tabs-menu-base [role="tab"] {
  box-sizing: border-box !important;

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

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 52px !important;

  margin: 0 !important;
  padding: 12px 16px !important;

  background: #FFFFFF !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: #213638 !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;

  box-shadow: none !important;
  outline: none !important;

  cursor: pointer !important;

  transition:
    background-color 180ms ease-out,
    color 180ms ease-out,
    box-shadow 180ms ease-out !important;
}


/* =====================================================
   SUPPRESSION DES PETITS CADRES INTERNES
===================================================== */

.e-tabs-menu-base :is(
  #box-message,
  #box-historique,
  #box-profil
) {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

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

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: inherit !important;

  box-shadow: none !important;
  outline: none !important;
}


/* Textes internes Elementor */

.e-tabs-menu-base [role="tab"] :is(
  p,
  span,
  a,
  div,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;

  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: center !important;

  text-decoration: none !important;
  box-shadow: none !important;
}


/* =====================================================
   SÉPARATEURS
===================================================== */

.e-tabs-menu-base > [role="tab"]:not(:last-child),
.e-tabs-menu-base > *:not(:last-child) [role="tab"] {
  border-right: 1px solid #DFE9E8 !important;
}


/* =====================================================
   SURVOL
===================================================== */

.e-tabs-menu-base [role="tab"]:hover {
  background: #EEF7F6 !important;
  color: #176B70 !important;
}


/* =====================================================
   CLIC / PRESSION
===================================================== */

.e-tabs-menu-base [role="tab"]:active {
  background: #E2F2F1 !important;
  color: #0E4A4D !important;
}


/* =====================================================
   ONGLET SÉLECTIONNÉ
===================================================== */

.e-tabs-menu-base [role="tab"][aria-selected="true"],
.e-tabs-menu-base [role="tab"][data-state="selected"] {
  background: #176B70 !important;
  color: #FFFFFF !important;

  font-weight: 600 !important;

  box-shadow: inset 0 -3px 0 #248B8E !important;
}


/* Survol de l’onglet sélectionné */

.e-tabs-menu-base [role="tab"][aria-selected="true"]:hover,
.e-tabs-menu-base [role="tab"][data-state="selected"]:hover {
  background: #12595D !important;
  color: #FFFFFF !important;
}


/* Pression de l’onglet sélectionné */

.e-tabs-menu-base [role="tab"][aria-selected="true"]:active,
.e-tabs-menu-base [role="tab"][data-state="selected"]:active {
  background: #0E4A4D !important;
  color: #FFFFFF !important;
}


/* =====================================================
   SUPPRESSION DU CONTOUR NOIR ELEMENTOR / NAVIGATEUR
===================================================== */

.e-tabs-menu-base [role="tab"]:focus {
  outline: none !important;
  border-color: transparent !important;
}


/* Focus clavier accessible */

.e-tabs-menu-base [role="tab"]:focus-visible {
  position: relative !important;
  z-index: 3 !important;

  outline: none !important;

  box-shadow:
    inset 0 0 0 3px rgba(36, 139, 142, 0.35) !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 767px) {

  .e-con.e-atomic-element.e-tabs-menu-base {
    width: 100% !important;
    max-width: 100% !important;
  }

  .e-tabs-menu-base [role="tab"] {
    min-height: 48px !important;
    padding: 10px 6px !important;

    font-size: 14px !important;
  }

}
/* =========================================================
   SAMAKENTRA — NOTIFICATION AJOUT AUX FAVORIS
   ========================================================= */

.srp-fav-notification {
    background: #FFFFFF !important;
    color: #176B70 !important;

    border: 1px solid #A8D3D1 !important;
    border-left: 4px solid #176B70 !important;
    border-radius: 14px !important;

    padding: 12px 16px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    box-shadow:
    0 14px 38px rgba(33, 54, 56, 0.24),
    0 4px 12px rgba(33, 54, 56, 0.12) !important;

    overflow: hidden !important;
}

/* Texte et liens éventuels */
.srp-fav-notification,
.srp-fav-notification p,
.srp-fav-notification span,
.srp-fav-notification a {
    color: #176B70 !important;
}

/* Icônes éventuelles */
.srp-fav-notification svg {
    color: #176B70 !important;
    fill: currentColor !important;
}

/* Bouton de fermeture éventuel */
.srp-fav-notification button {
    color: #176B70 !important;
    background: #EEF7F6 !important;
    border: 1px solid #DFE9E8 !important;
    border-radius: 8px !important;
}

/* Adaptation mobile */
@media (max-width: 600px) {
    .srp-fav-notification {
        padding: 11px 14px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }
}

/* =====================================================
   BOUTON FERMER STICKY PLAYER — SAMAKENTRA
===================================================== */

.srp_ext_featured_cta_center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    /* Dimensions compactes */
    width: fit-content !important;
    min-width: 0 !important;
    max-width: none !important;

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

    /* Empêche la forme ronde imposée par le plugin */
    aspect-ratio: auto !important;

    padding: 0 14px !important;
    margin: 8px auto 14px !important;

    box-sizing: border-box !important;

    background: #EEF7F6 !important;
    color: #176B70 !important;

    border: 1px solid #A8D3D1 !important;
    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(33, 54, 56, 0.08) !important;

    transition:
        background-color 180ms ease-out,
        border-color 180ms ease-out,
        color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 180ms ease-out !important;
}

/* Croix */
.srp_ext_featured_cta_center::before {
    content: "×";

    display: flex;
    align-items: center;
    justify-content: center;

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

    background: #176B70 !important;
    color: #FFFFFF !important;

    border-radius: 50%;

    font-size: 18px !important;
    font-weight: 400;
    line-height: 1;
}

/* Texte */
.srp_ext_featured_cta_center::after {
    content: "Fermer";
}

/* Hover ordinateur */
@media (hover: hover) {
    .srp_ext_featured_cta_center:hover {
        background: #E2F2F1 !important;
        border-color: #248B8E !important;
        color: #12595D !important;

        box-shadow: 0 6px 16px rgba(33, 54, 56, 0.13) !important;
        transform: translateY(-1px);
    }

    .srp_ext_featured_cta_center:hover::before {
        background: #12595D !important;
    }
}

/* Pression téléphone et ordinateur */
.srp_ext_featured_cta_center:active {
    background: #D8ECEA !important;
    border-color: #176B70 !important;
    color: #0E4A4D !important;

    box-shadow: 0 2px 7px rgba(33, 54, 56, 0.1) !important;
    transform: translateY(1px);
}
/* =========================================================
   SAMAKENTRA — LISTE AUDIO COMPLÈTE
   Version propre, responsive et isolée du slider

   Remplace intégralement l’ancien CSS de la playlist.
   Toutes les règles de pistes sont limitées à :
   .srp_tracklist .sr-playlist-item
========================================================= */

:root {
  --sk-primary: #176b70;
  --sk-primary-hover: #12595d;
  --sk-primary-active: #0e4a4d;
  --sk-secondary: #248b8e;
  --sk-secondary-hover: #1e7a7d;
  --sk-aqua: #a8d3d1;
  --sk-aqua-soft: #eef7f6;
  --sk-aqua-selected: #e2f2f1;
  --sk-text: #213638;
  --sk-text-muted: #687a7b;
  --sk-border: #dfe9e8;
  --sk-white: #ffffff;
  --sk-shadow-card: 0 6px 18px rgba(33, 54, 56, 0.06);
  --sk-shadow-hover: 0 11px 28px rgba(33, 54, 56, 0.10);
  --sk-transition: 180ms ease-out;
}


/* =========================================================
   1. CARTE AUDIO
========================================================= */

.srp_tracklist .sr-playlist-item {
  position: relative !important;
  box-sizing: border-box !important;
  margin-bottom: 18px !important;
  padding: 22px 24px !important;
  overflow: hidden !important;

  background: var(--sk-white) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--sk-shadow-card) !important;

  transition:
    background-color var(--sk-transition),
    border-color var(--sk-transition),
    box-shadow var(--sk-transition),
    transform var(--sk-transition) !important;
}

.srp_tracklist .sr-playlist-item::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 18px !important;
  bottom: 18px !important;
  left: 0 !important;
  width: 4px !important;

  background: var(--sk-aqua) !important;
  border-radius: 0 999px 999px 0 !important;
  opacity: 0 !important;

  transition:
    opacity var(--sk-transition),
    background-color var(--sk-transition),
    width var(--sk-transition) !important;
}

@media (hover: hover) and (pointer: fine) {
  .srp_tracklist .sr-playlist-item:hover {
    border-color: var(--sk-aqua) !important;
    box-shadow: var(--sk-shadow-hover) !important;
    transform: translateY(-2px) !important;
  }

  .srp_tracklist .sr-playlist-item:hover::before {
    opacity: 1 !important;
  }
}


/* =========================================================
   2. COVER
========================================================= */

.srp_tracklist .sr-playlist-item .sr_track_cover {
  position: relative !important;
  width: 75px !important;
  min-width: 75px !important;
  height: 75px !important;
  overflow: hidden !important;

  border-radius: 16px !important;
  box-shadow: 0 7px 18px rgba(33, 54, 56, 0.17) !important;

  transition:
    box-shadow var(--sk-transition),
    transform var(--sk-transition),
    filter var(--sk-transition) !important;
}

.srp_tracklist .sr-playlist-item .sr_track_cover img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.srp_tracklist .sr-playlist-item .sr_track_cover svg,
.srp_tracklist .sr-playlist-item .sr_track_cover i,
.srp_tracklist .sr-playlist-item .sr_track_cover [class*="play"],
.srp_tracklist .sr-playlist-item .sr_track_cover [class*="pause"] {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.52)) !important;
}

@media (hover: hover) and (pointer: fine) {
  .srp_tracklist .sr-playlist-item:hover .sr_track_cover {
    box-shadow: 0 9px 22px rgba(33, 54, 56, 0.22) !important;
    transform: scale(1.025) !important;
  }
}


/* =========================================================
   3. TITRE, DURÉE, DESCRIPTION ET FAVORI
========================================================= */

.srp_tracklist .sr-playlist-item .tracklist-item-title {
  color: var(--sk-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  transition: color var(--sk-transition) !important;
}

@media (hover: hover) and (pointer: fine) {
  .srp_tracklist .sr-playlist-item:hover .tracklist-item-title {
    color: var(--sk-primary-hover) !important;
  }
}

.srp_tracklist .sr-playlist-item .srp_tracklist-item-time {
  padding: 5px 8px !important;
  color: var(--sk-primary) !important;
  background: var(--sk-aqua-soft) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.srp_tracklist .sr-playlist-item .srp_track_description {
  margin-top: 16px !important;
  padding-top: 15px !important;
  border-top: 1px solid #edf3f2 !important;

  color: var(--sk-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.srp_tracklist .sr-playlist-item .srp_track_description:empty {
  display: none !important;
}

.srp_tracklist .sr-playlist-item .store-list {
  color: var(--sk-text-muted) !important;
  transition:
    color var(--sk-transition),
    transform var(--sk-transition),
    filter var(--sk-transition) !important;
}

.srp_tracklist .sr-playlist-item .store-list svg,
.srp_tracklist .sr-playlist-item .store-list i {
  width: 22px !important;
  height: 22px !important;
}

@media (hover: hover) and (pointer: fine) {
  .srp_tracklist .sr-playlist-item .store-list:hover {
    color: var(--sk-primary) !important;
    transform: scale(1.10) !important;
    filter: drop-shadow(0 3px 5px rgba(33, 54, 56, 0.16)) !important;
  }
}


/* =========================================================
   4. TAXONOMIES — MODE DESKTOP
========================================================= */

.srp_tracklist .sr-playlist-item .sr-playlist-cf-child {
  color: var(--sk-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance,
.srp_tracklist .sr-playlist-item .sr-playlist-cf--voix,
.srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument {
  color: #2f6669 !important;
}


/* =========================================================
   5. PISTE ACTIVE
========================================================= */

.srp_tracklist .sr-playlist-item.current {
  background: linear-gradient(135deg, #ffffff 0%, #f2faf9 100%) !important;
  border-color: var(--sk-secondary) !important;
  border-width: 2px !important;
  box-shadow:
    0 12px 34px rgba(33, 54, 56, 0.15),
    0 0 0 2px rgba(36, 139, 142, 0.08) !important;
}

.srp_tracklist .sr-playlist-item.current::before {
  width: 6px !important;
  opacity: 1 !important;
  background: var(--sk-secondary) !important;
}

.srp_tracklist .sr-playlist-item.current .sr_track_cover {
  transform: scale(1.045) !important;
  box-shadow:
    0 0 0 5px rgba(36, 139, 142, 0.32),
    0 0 0 9px rgba(168, 211, 209, 0.22),
    0 14px 30px rgba(33, 54, 56, 0.30) !important;
  filter: saturate(1.05) contrast(1.03) !important;
}

.srp_tracklist .sr-playlist-item.current .tracklist-item-title {
  color: var(--sk-primary-active) !important;
}

.srp_tracklist .sr-playlist-item.current .srp_tracklist-item-time {
  color: var(--sk-primary-active) !important;
  background: var(--sk-aqua-selected) !important;
}


/* =========================================================
   6. EN-TÊTE DES COLONNES — DESKTOP
========================================================= */

.sr-cf-heading {
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;

  background: linear-gradient(135deg, #ffffff 0%, var(--sk-aqua-soft) 100%) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 14px rgba(33, 54, 56, 0.045) !important;
}

.sr-cf-heading .sr-playlist-heading-child {
  color: var(--sk-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

.sr-cf-heading .sr-playlist-cf--title,
.sr-cf-heading [data-sort="sr-playlist-cf--playlist-category"] {
  color: var(--sk-primary) !important;
}

.sr-cf-heading .sr-playlist-heading-child::after {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 3px !important;
  margin-top: 7px !important;

  background: var(--sk-aqua) !important;
  border-radius: 999px !important;
  opacity: 0.95 !important;
}

.sr-cf-heading .sr-playlist-cf--title::after,
.sr-cf-heading [data-sort="sr-playlist-cf--playlist-category"]::after {
  width: 28px !important;
  background: var(--sk-secondary) !important;
}

@media (min-width: 1200px) {
  .sr-cf-heading .sr-playlist-cf--title {
    box-sizing: border-box !important;
    padding-left: 122px !important;
  }
}


/* =========================================================
   7. TABLETTE + MOBILE
   Sous 1200 px : affichage en cartes et badges
========================================================= */

@media (max-width: 1199px) {
  .sr-cf-heading {
    display: none !important;
  }

  .srp_tracklist .sr-playlist-item {
    padding: 20px !important;
    border-radius: 19px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-item-flex {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
  }

  .srp_tracklist .sr-playlist-item .sr_track_cover {
    order: 1 !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    border-radius: 15px !important;
  }

  .srp_tracklist .sr-playlist-item .srp_audio_trigger.audio-track {
    order: 2 !important;
    flex: 1 1 180px !important;
    min-width: 0 !important;
  }

  .srp_tracklist .sr-playlist-item .store-list {
    order: 3 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
  }

  /* Grille des badges */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container {
    order: 4 !important;
    position: static !important;
    display: grid !important;
    grid-template-columns: 160px 200px 170px !important;
    align-items: start !important;
    justify-content: center !important;
    column-gap: 8px !important;
    row-gap: 30px !important;

    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;

    margin: 2px 0 0 !important;
    padding: 24px 0 0 !important;

    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container .sr-playlist-cf-child {
    display: none !important;
  }

  /* Badges visibles */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--playlist-category,

  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--thematique,

  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--ambiance,

  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument,

  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix {
    position: relative !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 6px 9px !important;

    color: var(--sk-primary) !important;
    border-radius: 14px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Placement première ligne */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category {
    grid-column: 1 !important;
    grid-row: 1 !important;
    background: var(--sk-aqua-soft) !important;
    border: 1px solid var(--sk-border) !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: var(--sk-white) !important;
    border: 1px solid var(--sk-aqua) !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance {
    grid-column: 3 !important;
    grid-row: 1 !important;
    color: #2f6669 !important;
    background: #f6faf9 !important;
    border: 1px solid #cddfdd !important;
  }

  /* Voix : deuxième ligne, centrée */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: center !important;

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

    color: var(--sk-primary) !important;
    background: var(--sk-aqua-soft) !important;
    border: 1px solid var(--sk-border) !important;
  }

  /* Repères intérieurs */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 7px !important;
    background: var(--sk-secondary) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(36, 139, 142, 0.11) !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique::before {
    content: "" !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 7px !important;
    height: 7px !important;
    margin-right: 7px !important;
    background: var(--sk-white) !important;
    border: 2px solid var(--sk-secondary) !important;
    border-radius: 50% !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 3px !important;
    margin-right: 7px !important;
    background: var(--sk-aqua) !important;
    border-radius: 999px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument::before {
    content: "" !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 7px !important;
    height: 7px !important;
    margin-right: 7px !important;
    background: var(--sk-aqua-soft) !important;
    border: 2px solid var(--sk-secondary) !important;
    border-radius: 2px !important;
    transform: rotate(45deg) !important;
  }

  /* Icône voix simple et lisible */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix::before {
    content: "≋" !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 7px 0 0 !important;

    color: var(--sk-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  /* Libellés au-dessus */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix::after {
    position: absolute !important;
    top: -21px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 4px 4px !important;

    color: var(--sk-text-muted) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--sk-aqua) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category::after {
    content: "Type" !important;
    color: var(--sk-primary) !important;
    border-bottom-color: var(--sk-secondary) !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique::after {
    content: "Thématique" !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance::after {
    content: "Ambiance" !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument::after {
    content: "Instruments" !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix::after {
    content: "Voix" !important;
    color: var(--sk-primary) !important;
    border-bottom-color: var(--sk-secondary) !important;
  }

  /* Champs vides */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category:empty,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique:empty,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance:empty,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument:empty,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix:empty {
    display: none !important;
  }
}


/* =========================================================
   8. TABLETTE
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container {
    grid-template-columns: 160px 200px 170px !important;
    justify-content: center !important;
  }

  .srp_tracklist .sr-playlist-item .tracklist-item-title {
    font-size: 18px !important;
  }

  .srp_tracklist .sr-playlist-item .srp_tracklist-item-time {
    padding: 4px 7px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   9. MOBILE
========================================================= */

@media (max-width: 767px) {
  .srp_tracklist .sr-playlist-item {
    margin-bottom: 14px !important;
    padding: 18px 16px !important;
    border-radius: 19px !important;
    box-shadow: 0 5px 15px rgba(33, 54, 56, 0.065) !important;
  }

  .srp_tracklist .sr-playlist-item::before {
    top: 14px !important;
    bottom: 14px !important;
    width: 3px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-item-flex {
    column-gap: 14px !important;
    row-gap: 8px !important;
  }

  .srp_tracklist .sr-playlist-item .sr_track_cover {
    flex-basis: 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    height: 70px !important;
  }

  .srp_tracklist .sr-playlist-item .srp_audio_trigger.audio-track {
    box-sizing: border-box !important;
    padding-right: 44px !important;
  }

  /* Favori à droite, sous la durée */
  .srp_tracklist .sr-playlist-item .store-list {
    position: absolute !important;
    z-index: 5 !important;
    top: 42px !important;
    right: 0 !important;
    left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    column-gap: 6px !important;
    row-gap: 29px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument {
    padding: 5px 7px !important;
    font-size: 11.5px !important;
  }

  /*
   * Voix sur 2/3 de la ligne ET réellement centrée.
   * Elle occupe toute la grille, puis sa largeur est limitée à 2/3.
   */
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;

    width: calc((100% - 6px) * 2 / 3) !important;
    min-width: 0 !important;
    max-width: calc((100% - 6px) * 2 / 3) !important;

    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .srp_tracklist .sr-playlist-item .tracklist-item-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .srp_tracklist .sr-playlist-item .srp_tracklist-item-time {
    padding: 4px 7px !important;
    font-size: 12px !important;
  }

  .srp_tracklist .sr-playlist-item .srp_track_description {
    margin-top: 15px !important;
    padding-top: 14px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .srp_tracklist .sr-playlist-item .store-list svg,
  .srp_tracklist .sr-playlist-item .store-list i {
    width: 21px !important;
    height: 21px !important;
  }

  .srp_tracklist .sr-playlist-item.current .sr_track_cover {
    transform: scale(1.035) !important;
    box-shadow:
      0 0 0 4px rgba(36, 139, 142, 0.34),
      0 0 0 7px rgba(168, 211, 209, 0.22),
      0 12px 26px rgba(33, 54, 56, 0.29) !important;
  }
}


/* =========================================================
   10. TRÈS PETITS TÉLÉPHONES
========================================================= */

@media (max-width: 380px) {
  .srp_tracklist .sr-playlist-item {
    padding: 15px 13px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-item-flex {
    column-gap: 11px !important;
  }

  .srp_tracklist .sr-playlist-item .sr_track_cover {
    flex-basis: 62px !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
  }

  .srp_tracklist .sr-playlist-item .store-list {
    top: 34px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .srp_tracklist .sr-playlist-item .srp_audio_trigger.audio-track {
    padding-right: 40px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf-container {
    column-gap: 5px !important;
    row-gap: 27px !important;
    padding-top: 22px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument {
    padding: 5px 6px !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    border-radius: 12px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix {
    width: calc((100% - 5px) * 2 / 3) !important;
    max-width: calc((100% - 5px) * 2 / 3) !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    border-radius: 12px !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--playlist-category::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--thematique::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--ambiance::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--instrument::after,
  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix::after {
    top: -19px !important;
    padding-bottom: 3px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.055em !important;
  }

  .srp_tracklist .sr-playlist-item .sr-playlist-cf--voix::before {
    margin-right: 6px !important;
    font-size: 14px !important;
  }

  .srp_tracklist .sr-playlist-item .tracklist-item-title {
    font-size: 16px !important;
  }

  .srp_tracklist .sr-playlist-item .srp_tracklist-item-time {
    font-size: 11px !important;
  }

  .srp_tracklist .sr-playlist-item .srp_track_description {
    font-size: 14.5px !important;
  }
}


/* =========================================================
   11. ACCESSIBILITÉ
========================================================= */

.srp_tracklist .sr-playlist-item:focus-within {
  outline: 2px solid var(--sk-secondary) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  .srp_tracklist .sr-playlist-item,
  .srp_tracklist .sr-playlist-item::before,
  .srp_tracklist .sr-playlist-item .sr_track_cover,
  .srp_tracklist .sr-playlist-item .tracklist-item-title,
  .srp_tracklist .sr-playlist-item .store-list {
    transition: none !important;
  }

  .srp_tracklist .sr-playlist-item:hover,
  .srp_tracklist .sr-playlist-item:hover .sr_track_cover,
  .srp_tracklist .sr-playlist-item .store-list:hover {
    transform: none !important;
  }
}
/* =========================================================
   PATCH FINAL — INSTRUMENTS VIDES + VOIX MOBILE ADAPTATIVE
========================================================= */


/* =========================================================
   1. INSTRUMENTS VIDES
   Le plugin ajoute .srp_hidden aux champs sans contenu.
========================================================= */

@media (max-width: 1199px) {

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument.srp_hidden,

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument:empty {
    display: none !important;
  }

  /*
   * L’instrument ne réapparaît que lorsqu’il n’est pas
   * marqué comme masqué par le plugin.
   */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument:not(.srp_hidden):not(:empty) {
    display: inline-flex !important;
  }
}


/* =========================================================
   2. VOIX SUR TÉLÉPHONE
   Largeur adaptée au texte, avec maximum de 2/3
========================================================= */

@media (max-width: 767px) {

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    justify-self: center !important;

    /*
     * La pastille suit la longueur réelle du texte.
     */
    width: fit-content !important;
    min-width: 0 !important;

    /*
     * Elle ne dépassera jamais les deux tiers de la ligne.
     */
    max-width: calc((100% - 6px) * 2 / 3) !important;

    padding: 7px 14px !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}


/* Très petits téléphones */
@media (max-width: 380px) {

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix {
    width: fit-content !important;
    max-width: calc((100% - 5px) * 2 / 3) !important;

    padding: 6px 11px !important;
  }
}
/* =========================================================
   PATCH — MASQUER LES TAXONOMIES VIDES
   Instruments + Thématique + Voix
========================================================= */

@media (max-width: 1199px) {

  /* Masquage si réellement vide */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument:empty,

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--thematique:empty,

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix:empty {
    display: none !important;
  }


  /* Masquage si le plugin ajoute la classe srp_hidden */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument.srp_hidden,

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--thematique.srp_hidden,

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix.srp_hidden {
    display: none !important;
  }


  /* Réaffichage uniquement si le champ contient réellement quelque chose */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument:not(.srp_hidden):not(:empty),

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--thematique:not(.srp_hidden):not(:empty),

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix:not(.srp_hidden):not(:empty) {
    display: inline-flex !important;
  }
}
/* =========================================================
   CORRECTION TAXONOMIES RESPONSIVES
   srp_hidden peut être ajouté par le responsive du plugin.
   Un champ est masqué uniquement lorsqu’il est réellement vide.
========================================================= */

@media (max-width: 1199px) {

  /* -------------------------------------------------------
     INSTRUMENTS
     Réaffiché même si le plugin ajoute srp_hidden,
     à condition qu’il contienne réellement du texte.
  ------------------------------------------------------- */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument:not(:empty) {
    display: inline-flex !important;
  }


  /* -------------------------------------------------------
     THÉMATIQUE
  ------------------------------------------------------- */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--thematique:not(:empty) {
    display: inline-flex !important;
  }


  /* -------------------------------------------------------
     VOIX
  ------------------------------------------------------- */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix:not(:empty) {
    display: inline-flex !important;
  }


  /* -------------------------------------------------------
     SEULS LES CHAMPS RÉELLEMENT VIDES DISPARAISSENT
  ------------------------------------------------------- */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument:empty,

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--thematique:empty,

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix:empty {
    display: none !important;
  }
}
/* =========================================================
   SAMAKENTRA — CONTOUR DISCRET DU PLAY/PAUSE DU SLIDER
   Slider uniquement
   Aucun déplacement, aucune modification de taille
========================================================= */

.srp_swiper
.srp_swiper-control
.srp_play {
  background: transparent !important;

  /* Cercle blanc natif conservé */
  border-color: #ffffff !important;

  /* Contour noir très léger + ombre discrète */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.24),
    0 1px 3px rgba(0, 0, 0, 0.22) !important;

  filter: none !important;

  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* Triangle Play et barres Pause */
.srp_swiper
.srp_swiper-control
.srp_play
.sricon-play,

.srp_swiper
.srp_swiper-control
.srp_play
.sricon-pause {
  color: #ffffff !important;

  /* Juste assez d’ombre pour détacher l’icône */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.45) !important;

  filter: none !important;
}
.srp_swiper-album-art .srp_swiper-control {
  transform: scale(1.6) !important;
  top: 22px !important;
}
.iron-audioplayer .sr_track_cover .srp_play {
  transform: scale(0.9)!important;
}
/* Mobile uniquement */
@media (max-width: 767px) {
  .srp_swiper-album-art .srp_swiper-titles {
    height: 115% !important;
  }
}
/* =========================================================
   SAMAKENTRA — BETTER MESSAGES
   Feuille complète, propre et sans doublons

   Diagnostic de l’artefact flou en plein écran :
   - le backdrop-filter appliqué à la fenêtre du chat ;
   - et surtout le backdrop-filter d’un toast Toastify fixé à l’écran
     peuvent laisser une couche de composition floue après disparition.
   Cette version supprime backdrop-filter partout dans Better Messages
   et conserve l’effet premium avec fonds translucides et ombres.
========================================================= */


/* =========================================================
   1. VARIABLES ET FENÊTRE GÉNÉRALE
========================================================= */

.bp-messages-wrap {
  --bm-sk-primary: #176b70;
  --bm-sk-primary-hover: #12595d;
  --bm-sk-primary-active: #0e4a4d;
  --bm-sk-secondary: #248b8e;

  --bm-sk-aqua: #a8d3d1;
  --bm-sk-aqua-soft: #eef7f6;
  --bm-sk-aqua-selected: #e2f2f1;

  --bm-sk-text: #213638;
  --bm-sk-muted: #687a7b;
  --bm-sk-border: #dfe9e8;
  --bm-sk-white: #ffffff;

  box-sizing: border-box !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.985) !important;
  border: 1px solid rgba(168, 211, 209, 0.95) !important;
  border-radius: 20px !important;

  box-shadow:
    0 10px 30px rgba(33, 54, 56, 0.08),
    0 3px 10px rgba(33, 54, 56, 0.05) !important;

  /*
   * Important : aucun backdrop-filter.
   * Il provoquait vraisemblablement l’artefact flou en plein écran.
   */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* =========================================================
   2. EN-TÊTE DE CONVERSATION
========================================================= */

.bp-messages-wrap .chat-header {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--bm-sk-primary) 0%,
      var(--bm-sk-secondary) 100%
    ) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}


/* Texte et liens du header */
.bp-messages-wrap .chat-header,
.bp-messages-wrap .chat-header a,
.bp-messages-wrap .chat-header span,
.bp-messages-wrap .chat-header div,
.bp-messages-wrap .chat-header .name,
.bp-messages-wrap .chat-header .user,
.bp-messages-wrap .chat-header .username,
.bp-messages-wrap .chat-header .bm-thread-info-action-label {
  color: #ffffff !important;
}


/* Icônes du header */
.bp-messages-wrap .chat-header svg,
.bp-messages-wrap .chat-header i {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* Label utilisé hors du header */
.bp-messages-wrap .bm-thread-info-action-label {
  color: var(--bm-sk-primary) !important;
  font-weight: 700 !important;
}


/* =========================================================
   3. BULLES DE MESSAGES
========================================================= */

/* Messages de l’autre personne : vert SamaKentra, texte blanc */
.bp-messages-wrap
.bm-message:not(.my)
.bm-message-content {
  color: #ffffff !important;

  background: var(--bm-sk-primary) !important;
  border: 1px solid var(--bm-sk-primary) !important;
  border-radius: 6px 16px 16px 16px !important;

  box-shadow:
    0 4px 12px rgba(23, 107, 112, 0.18) !important;
}


/* Tout contenu interne des messages foncés reste blanc */
.bp-messages-wrap
.bm-message:not(.my)
.bm-message-content,
.bp-messages-wrap
.bm-message:not(.my)
.bm-message-content * {
  color: #ffffff !important;
}


/* Mes messages : fond clair, texte foncé */
.bp-messages-wrap
.bm-message.my
.bm-message-content {
  color: var(--bm-sk-text) !important;

  background: var(--bm-sk-aqua-soft) !important;
  border: 1px solid var(--bm-sk-border) !important;
  border-radius: 16px 6px 16px 16px !important;

  box-shadow:
    0 3px 10px rgba(33, 54, 56, 0.06) !important;
}


/* Tout contenu interne des messages clairs reste foncé */
.bp-messages-wrap
.bm-message.my
.bm-message-content,
.bp-messages-wrap
.bm-message.my
.bm-message-content * {
  color: var(--bm-sk-text) !important;
}


/* Messages pouvant recevoir une réponse */
.bp-messages-wrap .bm-message-content.reply-enabled {
  position: relative !important;
}


/* =========================================================
   4. NOMS DES AUTEURS
========================================================= */

.bp-messages-wrap .bm-message .user,
.bp-messages-wrap .bm-message .user-name,
.bp-messages-wrap .bm-message .username,
.bp-messages-wrap .bm-message .name,
.bp-messages-wrap .bm-message .author,
.bp-messages-wrap .bm-message .sender {
  color: var(--bm-sk-primary) !important;
  font-weight: 700 !important;
}


/* =========================================================
   5. CHAMP DE SAISIE
========================================================= */

.bp-messages-wrap textarea,
.bp-messages-wrap [contenteditable="true"],
.bp-messages-wrap .bm-editor {
  box-sizing: border-box !important;

  color: var(--bm-sk-text) !important;
  caret-color: var(--bm-sk-primary) !important;
  cursor: text !important;

  background: rgba(238, 247, 246, 0.92) !important;
  border: 1px solid var(--bm-sk-border) !important;
  border-radius: 14px !important;

  box-shadow:
    inset 0 1px 2px rgba(33, 54, 56, 0.03) !important;

  outline: none !important;

  transition:
    color 180ms ease-out,
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 180ms ease-out !important;
}


/* Texte interne de l’éditeur */
.bp-messages-wrap .bm-editor,
.bp-messages-wrap .bm-editor *,
.bp-messages-wrap .bm-editor p,
.bp-messages-wrap .bm-editor div,
.bp-messages-wrap .bm-editor span {
  color: var(--bm-sk-text) !important;
  caret-color: var(--bm-sk-primary) !important;
  cursor: text !important;
}


/* Survol */
.bp-messages-wrap textarea:hover,
.bp-messages-wrap [contenteditable="true"]:hover,
.bp-messages-wrap .bm-editor:hover {
  color: var(--bm-sk-text) !important;
  background: #e7f3f2 !important;
  border-color: var(--bm-sk-aqua) !important;
}


/* Focus */
.bp-messages-wrap textarea:focus,
.bp-messages-wrap [contenteditable="true"]:focus,
.bp-messages-wrap .bm-editor:focus,
.bp-messages-wrap .bm-editor:focus-visible,
.bp-messages-wrap .bm-editor[contenteditable="true"]:focus {
  color: var(--bm-sk-text) !important;
  caret-color: var(--bm-sk-primary) !important;

  background: #ffffff !important;
  border-color: var(--bm-sk-secondary) !important;

  outline: none !important;

  box-shadow:
    0 0 0 3px rgba(36, 139, 142, 0.14) !important;
}


/* Placeholder de l’éditeur */
.bp-messages-wrap textarea::placeholder,
.bp-messages-wrap .bm-editor:empty::before,
.bp-messages-wrap .bm-editor[data-placeholder]::before {
  color: var(--bm-sk-muted) !important;
  opacity: 0.76 !important;
}


/* =========================================================
   6. BOUTON ENVOYER
   Icône seule, zone cliquable conservée
========================================================= */

.bp-messages-wrap .bm-send-message {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

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

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

  color: var(--bm-sk-primary) !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;

  transition:
    color 180ms ease-out,
    transform 180ms ease-out,
    opacity 180ms ease-out !important;
}


/* Icône interne */
.bp-messages-wrap .bm-send-message svg,
.bp-messages-wrap .bm-send-message i,
.bp-messages-wrap .bm-send-message span,
.bp-messages-wrap .bm-send-message::before,
.bp-messages-wrap .bm-send-message::after {
  color: var(--bm-sk-primary) !important;
  fill: currentColor !important;
  stroke: currentColor !important;

  opacity: 1 !important;
  visibility: visible !important;
}


@media (hover: hover) and (pointer: fine) {
  .bp-messages-wrap .bm-send-message:hover {
    color: var(--bm-sk-primary-hover) !important;
    background: transparent !important;
    transform: scale(1.06) !important;
  }

  .bp-messages-wrap .bm-send-message:hover svg,
  .bp-messages-wrap .bm-send-message:hover i,
  .bp-messages-wrap .bm-send-message:hover span,
  .bp-messages-wrap .bm-send-message:hover::before,
  .bp-messages-wrap .bm-send-message:hover::after {
    color: var(--bm-sk-primary-hover) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}


.bp-messages-wrap .bm-send-message:active {
  color: var(--bm-sk-primary-active) !important;
  transform: scale(0.96) !important;
}


/* =========================================================
   7. DATES ET PETITS LABELS
========================================================= */

.bp-messages-wrap .date,
.bp-messages-wrap .date-separator,
.bp-messages-wrap .messages-date,
.bp-messages-wrap .bm-date {
  padding: 4px 10px !important;

  color: var(--bm-sk-primary) !important;
  background: var(--bm-sk-aqua-selected) !important;
  border: 1px solid var(--bm-sk-aqua) !important;
  border-radius: 999px !important;

  font-weight: 700 !important;
}


/* =========================================================
   8. NOTIFICATION DE MESSAGE REÇU — TOASTIFY
   Sans backdrop-filter pour éviter l’artefact de composition
========================================================= */

.bm-toasts-container .Toastify__toast,
.Toastify__toast.bm-toast-site-message,
.Toastify__toast.Toastify__toast-theme--colored.Toastify__toast--default.bm-toast-site-message {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(23, 107, 112, 0.96) 0%,
      rgba(36, 139, 142, 0.94) 100%
    ) !important;

  border: 1px solid rgba(168, 211, 209, 0.46) !important;
  border-radius: 16px !important;

  box-shadow:
    0 10px 26px rgba(14, 74, 77, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.18) !important;

  overflow: hidden !important;

  /*
   * Important : aucun blur sur ce composant fixé à l’écran.
   * C’est le candidat principal à l’artefact persistant.
   */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* Corps du toast */
.bm-toasts-container .Toastify__toast-body,
.Toastify__toast.bm-toast-site-message .Toastify__toast-body {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
}


/* Structure interne */
.bm-toast-site-message-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
}


/* Avatar du toast */
.bm-toast-site-message-avatar .avatar,
.bm-toast-site-message-avatar img {
  border-radius: 12px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
}


/* Texte du toast */
.bm-toast-site-message-info {
  min-width: 0 !important;
  color: #ffffff !important;
}

.bm-toast-site-message-title {
  margin-bottom: 2px !important;

  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.bm-toast-site-message-content {
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.bm-toast-site-message-container,
.bm-toast-site-message-container * {
  color: #ffffff !important;
}


/* Fermeture et progression */
.Toastify__close-button,
.Toastify__close-button > svg {
  color: #ffffff !important;
  fill: currentColor !important;
  opacity: 0.92 !important;
}

.Toastify__close-button:hover {
  opacity: 1 !important;
}

.Toastify__progress-bar {
  background: rgba(255, 255, 255, 0.42) !important;
}


@media (hover: hover) and (pointer: fine) {
  .Toastify__toast.bm-toast-site-message:hover,
  .bm-toasts-container .Toastify__toast:hover {
    box-shadow:
      0 12px 30px rgba(14, 74, 77, 0.34),
      0 6px 16px rgba(0, 0, 0, 0.20) !important;
  }
}


/* =========================================================
   9. MENU DÉROULANT DE CONVERSATION
========================================================= */

.bp-messages-wrap .bpbm-dropdown-menu {
  box-sizing: border-box !important;
  min-width: 250px !important;
  padding: 7px !important;

  color: var(--bm-sk-primary) !important;
  background: rgba(255, 255, 255, 0.99) !important;

  border: 1px solid var(--bm-sk-aqua) !important;
  border-top-color: var(--bm-sk-secondary) !important;

  /* Haut gauche, haut droit, bas droit, bas gauche */
  border-radius: 0 0 0 14px !important;

  box-shadow:
    0 8px 22px rgba(33, 54, 56, 0.12),
    0 2px 7px rgba(33, 54, 56, 0.07) !important;

  overflow: hidden !important;

  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* Éléments du menu */
.bp-messages-wrap
.bpbm-dropdown-menu
.bpbm-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 9px 11px !important;

  color: var(--bm-sk-primary) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;

  cursor: pointer !important;

  transition:
    color 180ms ease-out,
    background-color 180ms ease-out,
    transform 180ms ease-out !important;
}


/* Libellé */
.bp-messages-wrap
.bpbm-dropdown-menu
.bpbm-dropdown-item-label {
  color: var(--bm-sk-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}


/* Icône */
.bp-messages-wrap
.bpbm-dropdown-menu
.bpbm-dropdown-item-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;

  color: var(--bm-sk-secondary) !important;
}

.bp-messages-wrap
.bpbm-dropdown-menu
.bpbm-dropdown-item-icon svg,
.bp-messages-wrap
.bpbm-dropdown-menu
.bpbm-dropdown-item-icon i {
  color: var(--bm-sk-secondary) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


@media (hover: hover) and (pointer: fine) {
  .bp-messages-wrap
  .bpbm-dropdown-menu
  .bpbm-dropdown-item:hover {
    color: var(--bm-sk-primary-hover) !important;
    background: var(--bm-sk-aqua-soft) !important;
    transform: translateX(2px) !important;
  }

  .bp-messages-wrap
  .bpbm-dropdown-menu
  .bpbm-dropdown-item:hover
  .bpbm-dropdown-item-label,

  .bp-messages-wrap
  .bpbm-dropdown-menu
  .bpbm-dropdown-item:hover
  .bpbm-dropdown-item-icon,

  .bp-messages-wrap
  .bpbm-dropdown-menu
  .bpbm-dropdown-item:hover
  .bpbm-dropdown-item-icon svg,

  .bp-messages-wrap
  .bpbm-dropdown-menu
  .bpbm-dropdown-item:hover
  .bpbm-dropdown-item-icon i {
    color: var(--bm-sk-primary-hover) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}


.bp-messages-wrap
.bpbm-dropdown-menu
.bpbm-dropdown-item:active {
  color: var(--bm-sk-primary-active) !important;
  background: var(--bm-sk-aqua-selected) !important;
  transform: translateX(0) !important;
}


.bp-messages-wrap
.bpbm-dropdown-menu
.bpbm-dropdown-item:focus-visible {
  outline: 2px solid var(--bm-sk-secondary) !important;
  outline-offset: -2px !important;
  background: var(--bm-sk-aqua-soft) !important;
}


/* =========================================================
   10. PLEIN ÉCRAN
   Neutralisation des effets de composition problématiques
========================================================= */

:fullscreen .bp-messages-wrap,
:-webkit-full-screen .bp-messages-wrap,
.bp-messages-wrap:fullscreen,
.bp-messages-wrap:-webkit-full-screen {
  background: #ffffff !important;

  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  /*
   * L’ombre extérieure est inutile en plein écran.
   * Sa suppression évite aussi certains artefacts de couche GPU.
   */
  box-shadow: none !important;
}


/* Le toast reste net en plein écran */
:fullscreen .bm-toasts-container .Toastify__toast,
:-webkit-full-screen .bm-toasts-container .Toastify__toast {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 767px) {
  .bp-messages-wrap {
    border-radius: 16px !important;
  }
}
/* =========================================================
   SAMAKENTRA — ONGLET HISTORIQUE
   Élargissement de la playlist sur mobile uniquement
========================================================= */

@media (max-width: 767px) {

  /*
   * Zone Elementor contenant les onglets.
   * On retire uniquement l’espace horizontal lorsque
   * l’onglet Historique fait partie de cette zone.
   */
  .e-tabs-content-area-base:has(
    > [id="4adf063-tab-content-1"]
  ) {
    padding-left: 0 !important;
    padding-right: 0 !important;

    max-width: none !important;
  }


  /*
   * Onglet Historique uniquement.
   * La syntaxe [id="..."] évite le problème d’un identifiant
   * CSS commençant par un chiffre.
   */
  [id="4adf063-tab-content-1"] {
    box-sizing: border-box !important;

    width: calc(100vw - 12px) !important;
    width: calc(100dvw - 12px) !important;

    max-width: none !important;
    min-width: 0 !important;

    margin-left: calc(50% - 50vw + 6px) !important;
    margin-left: calc(50% - 50dvw + 6px) !important;

    margin-right: calc(50% - 50vw + 6px) !important;
    margin-right: calc(50% - 50dvw + 6px) !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* Conteneur interne de l’onglet Historique */
  [id="4adf063-tab-content-1"]
  .elementor-element-e34bc87 {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* Widget du lecteur présent dans l’historique */
  [id="4adf063-tab-content-1"]
  .elementor-element-5fb80eb,
  [id="4adf063-tab-content-1"]
  .elementor-element-5fb80eb
  > .elementor-widget-container {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* Lecteur et playlist */
  [id="4adf063-tab-content-1"]
  .iron-audioplayer,

  [id="4adf063-tab-content-1"]
  .playlist,

  [id="4adf063-tab-content-1"]
  .srp_tracklist {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
/* =========================================================
   SAMAKENTRA — FILTRES DE LA PLAYLIST
   Version complète et propre

   Desktop  : filtres côte à côte
   Tablette : 3 colonnes
   Mobile   : 2 colonnes
========================================================= */


/* =========================================================
   1. VARIABLES
========================================================= */

.srp-filters-container {
  --sk-filter-primary: #176b70;
  --sk-filter-primary-hover: #12595d;
  --sk-filter-primary-active: #0e4a4d;

  --sk-filter-secondary: #248b8e;

  --sk-filter-aqua: #a8d3d1;
  --sk-filter-aqua-soft: #eef7f6;
  --sk-filter-aqua-selected: #e2f2f1;

  --sk-filter-text: #213638;
  --sk-filter-muted: #687a7b;
  --sk-filter-border: #dfe9e8;
  --sk-filter-white: #ffffff;
}


/* =========================================================
   2. CONTENEUR GÉNÉRAL
========================================================= */

.srp-filters-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;

  gap: 10px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   3. CHAQUE FILTRE
========================================================= */

.srp-filters-container .srp-filters-widget {
  flex: 1 1 150px !important;

  width: auto !important;
  min-width: 130px !important;
  max-width: 210px !important;

  box-sizing: border-box !important;

  margin: 0 !important;
}


.srp-filters-container
.srp-filters-widget
.multiselect {
  

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  box-sizing: border-box !important;

  
}


/* =========================================================
   4. BOUTON PRINCIPAL DU FILTRE
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__select {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  
  min-height: 46px !important;

  

  padding: 10px 38px 10px 14px !important;

  color: var(--sk-filter-primary) !important;

  

  border: 1px solid var(--sk-filter-border) !important;
  border-radius: 12px !important;

  box-shadow:
    0 3px 10px rgba(33, 54, 56, 0.045) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;

  

  transition:
    color 180ms ease-out,
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    box-shadow 180ms ease-out !important;
}


/* =========================================================
   5. TITRES DES FILTRES
   Ambiance, Thématique, Type de pratique, etc.
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__placeholder,

.srp-filters-container
.srp-filters-widget
.multiselect__single,

.srp-filters-container
.srp-filters-widget
.multiselect__input,

.srp-filters-container
.srp-filters-widget
.multiselect__tags,

.srp-filters-container
.srp-filters-widget
.multiselect__select,

.srp-filters-container
.srp-filters-widget
.multiselect__select * {
  color: var(--sk-filter-primary) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;

  opacity: 1 !important;
}


/* Suppression des éventuelles couleurs blanches héritées */
.srp-filters-container
.srp-filters-widget
.multiselect__placeholder *,

.srp-filters-container
.srp-filters-widget
.multiselect__single *,

.srp-filters-container
.srp-filters-widget
.multiselect__tags * {
  color: var(--sk-filter-primary) !important;
}


/* =========================================================
   6. SURVOL ET FILTRE OUVERT
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .srp-filters-container
  .srp-filters-widget
  .multiselect__select:hover {
    color: var(--sk-filter-primary-hover) !important;

    background: var(--sk-filter-aqua-soft) !important;
    border-color: var(--sk-filter-aqua) !important;

    box-shadow:
      0 5px 14px rgba(33, 54, 56, 0.075) !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__select:hover
  .multiselect__placeholder,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__select:hover
  .multiselect__single {
    color: var(--sk-filter-primary-hover) !important;
  }
}


/* Filtre ouvert */
.srp-filters-container
.srp-filters-widget
.multiselect--active
.multiselect__select {
  color: var(--sk-filter-primary) !important;

  background: var(--sk-filter-aqua-soft) !important;
  border-color: var(--sk-filter-secondary) !important;

  box-shadow:
    0 0 0 3px rgba(36, 139, 142, 0.12) !important;
}


/* =========================================================
   7. FLÈCHE
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__select::after {
  border-color:
    var(--sk-filter-muted)
    transparent
    transparent !important;
}


.srp-filters-container
.srp-filters-widget
.multiselect--active
.multiselect__select::after {
  border-color:
    transparent
    transparent
    var(--sk-filter-primary) !important;
}


/* =========================================================
   8. MENU DÉROULANT
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__content-wrapper {
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: min(300px, calc(100vw - 24px)) !important;

  margin-top: 5px !important;

  background: rgba(255, 255, 255, 0.99) !important;

  border: 1px solid var(--sk-filter-aqua) !important;
  border-radius: 0 0 13px 13px !important;

  box-shadow:
    0 10px 24px rgba(33, 54, 56, 0.13),
    0 3px 8px rgba(33, 54, 56, 0.06) !important;

  overflow-x: hidden !important;
}


/* Liste interne */
.srp-filters-container
.srp-filters-widget
.multiselect__content {
  width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;

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


/* =========================================================
   9. OPTIONS DU DROPDOWN
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__option {
  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  min-height: 42px !important;

  box-sizing: border-box !important;

  padding: 11px 14px !important;

  color: var(--sk-filter-text) !important;
  background: var(--sk-filter-white) !important;

  border-bottom: 1px solid #edf3f2 !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;

  white-space: normal !important;
  overflow: visible !important;

  overflow-wrap: anywhere !important;
  word-break: normal !important;

  text-overflow: unset !important;

  transition:
    color 160ms ease-out,
    background-color 160ms ease-out !important;
}


/* Textes internes */
.srp-filters-container
.srp-filters-widget
.multiselect__option * {
  color: inherit !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}


/* Dernière option */
.srp-filters-container
.srp-filters-widget
.multiselect__option:last-child {
  border-bottom: 0 !important;
}


/* =========================================================
   10. SUPPRESSION COMPLÈTE DU JAUNE
========================================================= */

/*
 * Option survolée ou active :
 * remplacement de toutes les couleurs natives du plugin.
 */
.srp-filters-container
.srp-filters-widget
.multiselect__option--highlight,

.srp-filters-container
.srp-filters-widget
.multiselect__option--highlight::after,

.srp-filters-container
.srp-filters-widget
.multiselect__option:hover,

.srp-filters-container
.srp-filters-widget
.multiselect__option:focus {
  color: var(--sk-filter-primary) !important;
  background: var(--sk-filter-aqua-soft) !important;

  font-weight: 700 !important;
}


/* Option sélectionnée */
.srp-filters-container
.srp-filters-widget
.multiselect__option--selected {
  color: var(--sk-filter-primary-active) !important;
  background: var(--sk-filter-aqua-selected) !important;

  font-weight: 700 !important;
}


/* Option sélectionnée + survolée */
.srp-filters-container
.srp-filters-widget
.multiselect__option--selected.multiselect__option--highlight,

.srp-filters-container
.srp-filters-widget
.multiselect__option--selected:hover {
  color: var(--sk-filter-primary-active) !important;
  background: #d8ecea !important;

  font-weight: 700 !important;
}


/*
 * Certains plugins ajoutent des états natifs
 * avec du jaune ou une couleur d’avertissement.
 */
.srp-filters-container
.srp-filters-widget
.multiselect__option[aria-selected="true"],

.srp-filters-container
.srp-filters-widget
.multiselect__option.is-selected,

.srp-filters-container
.srp-filters-widget
.multiselect__option.active {
  color: var(--sk-filter-primary-active) !important;
  background: var(--sk-filter-aqua-selected) !important;
}


/* =========================================================
   11. TABLETTE
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

  .srp-filters-container {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
  }


  .srp-filters-container
  .srp-filters-widget {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* =========================================================
   12. MOBILE
   Toujours deux colonnes régulières
========================================================= */

@media (max-width: 767px) {

  .srp-filters-container {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 10px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
  }


  .srp-filters-container
  .srp-filters-widget {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__select {
    min-height: 44px !important;

    padding: 9px 32px 9px 11px !important;

    border-radius: 10px !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
  }


  /* Titres visibles en vert sur mobile */
  .srp-filters-container
  .srp-filters-widget
  .multiselect__placeholder,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__single,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__select {
    color: var(--sk-filter-primary) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
  }


  /*
   * Le menu peut dépasser légèrement la largeur
   * du bouton, mais jamais sortir de l’écran.
   */
  .srp-filters-container
  .srp-filters-widget
  .multiselect__content-wrapper {
    width: max-content !important;
    min-width: 100% !important;
    max-width: calc(100vw - 28px) !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__option {
    min-height: 44px !important;

    padding: 11px 13px !important;

    color: var(--sk-filter-text) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
}


/* =========================================================
   13. TRÈS PETITS TÉLÉPHONES
========================================================= */

@media (max-width: 380px) {

  .srp-filters-container {
    gap: 8px !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__select {
    min-height: 42px !important;

    padding-left: 9px !important;
    padding-right: 28px !important;

    font-size: 12px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__placeholder,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__single {
    font-size: 12px !important;
    font-weight: 700 !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__option {
    padding: 10px 12px !important;

    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
}
/* =========================================================
   SAMAKENTRA — TITRES ET Z-INDEX DES FILTRES
   - titres toujours visibles ;
   - flèche toujours dégagée ;
   - dropdown au-dessus de tous les autres filtres.
========================================================= */


/* =========================================================
   1. ORDRE DES COUCHES
========================================================= */

.srp-filters-container .srp-filters-widget {
  
  z-index: 1 !important;
}


/*
 * Le filtre actuellement ouvert passe devant
 * tous les filtres voisins.
 */
.srp-filters-container
.srp-filters-widget:has(.multiselect--active) {
  
}


.srp-filters-container
.srp-filters-widget
.multiselect {
  
  z-index: 1 !important;

  color: #176b70 !important;
}


/* Le multiselect ouvert devient la couche dominante */
.srp-filters-container
.srp-filters-widget
.multiselect.multiselect--active {
  z-index: 1001 !important;
}


/* Le menu déroulant passe devant tous les titres voisins */
.srp-filters-container
.srp-filters-widget
.multiselect__content-wrapper {
  
  
}


/* =========================================================
   2. ZONE DU TITRE
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__tags {
  
  

  
  

  
  

  

  /*
   * Espace réservé à droite pour la flèche.
   */
  

  color: #176b70 !important;

  
  

  
  

  
  
}


/* =========================================================
   3. TITRE / PLACEHOLDER
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__placeholder,

.srp-filters-container
.srp-filters-widget
.multiselect__single {
  

  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;

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

  color: #176b70 !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;

  opacity: 1 !important;
  visibility: visible !important;

  white-space: normal !important;
  overflow: hidden !important;

  overflow-wrap: break-word !important;
  word-break: normal !important;

  pointer-events: none !important;
}


/* Éléments internes éventuels */
.srp-filters-container
.srp-filters-widget
.multiselect__tags *,

.srp-filters-container
.srp-filters-widget
.multiselect__placeholder *,

.srp-filters-container
.srp-filters-widget
.multiselect__single * {
  color: #176b70 !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* =========================================================
   4. ZONE CLIQUABLE ET FLÈCHE
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__select {
  
  

  

  
  

  

  /*
   * Fond transparent pour ne pas masquer le titre.
   */
  background: transparent !important;

  
}


/*
 * La flèche reste au-dessus du titre et conserve
 * une zone entièrement dégagée à droite.
 */
.srp-filters-container
.srp-filters-widget
.multiselect__select::before,

.srp-filters-container
.srp-filters-widget
.multiselect__select::after {
  
  z-index: 6 !important;

  
  
  

  

  

  
}


/* =========================================================
   5. CHAMP TECHNIQUE
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__input {
  

  
  

  
  

  
  
}


/* =========================================================
   6. MOBILE
========================================================= */

@media (max-width: 767px) {

  .srp-filters-container
  .srp-filters-widget
  .multiselect__tags {
    min-height: 44px !important;

    padding-left: 11px !important;
    padding-right: 44px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__placeholder,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__single {
    color: #176b70 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::before,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::after {
    right: 12px !important;
  }
}


/* =========================================================
   7. TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 380px) {

  .srp-filters-container
  .srp-filters-widget
  .multiselect__tags {
    padding-left: 9px !important;
    padding-right: 38px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__placeholder,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__single {
    font-size: 12px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::before,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::after {
    right: 10px !important;
  }
}
/* =========================================================
   SAMAKENTRA — LIBELLÉS STABLES DES FILTRES
   Remplace tous les anciens correctifs de titres
========================================================= */


/* =========================================================
   1. COUCHES DES FILTRES
========================================================= */

.srp-filters-container .srp-filters-widget {
  position: relative !important;
}


/* Le filtre ouvert passe au-dessus des filtres voisins */
.srp-filters-container
.srp-filters-widget:has(.multiselect--active) {
  z-index: 1000 !important;
}


.srp-filters-container
.srp-filters-widget
.multiselect {
  position: relative !important;
}


/* =========================================================
   2. FOND CLIQUABLE DU FILTRE
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__select {
  position: absolute !important;
  z-index: 1 !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  box-sizing: border-box !important;

  cursor: pointer !important;
}


/* =========================================================
   3. ZONE DU LIBELLÉ
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__tags {
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  min-height: 44px !important;

  box-sizing: border-box !important;

  /*
   * 42 px réservés à droite pour la flèche.
   */
  padding: 0 42px 0 12px !important;

  background: transparent !important;
  border: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;

  overflow: hidden !important;
  pointer-events: none !important;
}


/* Masquage des libellés natifs instables du plugin */
.srp-filters-container
.srp-filters-widget
.multiselect__placeholder,

.srp-filters-container
.srp-filters-widget
.multiselect__single {
  display: none !important;
}


/* =========================================================
   4. STYLE DU LIBELLÉ RECRÉÉ
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__tags::before {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  color: #176b70 !important;
  -webkit-text-fill-color: #176b70 !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;

  text-align: left !important;

  white-space: normal !important;
  overflow: hidden !important;

  overflow-wrap: break-word !important;
  word-break: normal !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;

  transition:
    color 160ms ease-out,
    font-weight 160ms ease-out !important;
}


/* =========================================================
   5. CONTENU DES SIX LIBELLÉS
========================================================= */

.srp-filters-container
.multiselect[data-label="Ambiance"]
.multiselect__tags::before {
  content: "Ambiance" !important;
}


.srp-filters-container
.multiselect[data-label="Thématique"]
.multiselect__tags::before {
  content: "Thématique" !important;
}


.srp-filters-container
.multiselect[data-label="Type de pratique"]
.multiselect__tags::before {
  content: "Type de pratique" !important;
}


.srp-filters-container
.multiselect[data-label="Voix"]
.multiselect__tags::before {
  content: "Voix" !important;
}


.srp-filters-container
.multiselect[data-label="Durée"]
.multiselect__tags::before {
  content: "Durée" !important;
}


.srp-filters-container
.multiselect[data-label="Instruments"]
.multiselect__tags::before {
  content: "Instruments" !important;
}


/* Compatibilité si le plugin utilise un libellé sans accent */
.srp-filters-container
.multiselect[data-label="Duree"]
.multiselect__tags::before {
  content: "Durée" !important;
}


/* =========================================================
   6. SURVOL ET FILTRE OUVERT
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect:hover
.multiselect__tags::before {
  color: #12595d !important;
  -webkit-text-fill-color: #12595d !important;

  font-weight: 800 !important;
}


.srp-filters-container
.srp-filters-widget
.multiselect.multiselect--active
.multiselect__tags::before {
  color: #176b70 !important;
  -webkit-text-fill-color: #176b70 !important;

  font-weight: 800 !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* =========================================================
   7. FLÈCHE
========================================================= */

/*
 * Le libellé se termine avant cette zone grâce
 * au padding-right de .multiselect__tags.
 */
.srp-filters-container
.srp-filters-widget
.multiselect__select::before,

.srp-filters-container
.srp-filters-widget
.multiselect__select::after {
  position: absolute !important;

  top: 50% !important;
  right: 13px !important;
  left: auto !important;

  margin: 0 !important;

  transform: translateY(-50%) !important;

  pointer-events: none !important;
}


/* =========================================================
   8. DROPDOWN AU-DESSUS DE TOUS LES LIBELLÉS
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__content-wrapper {
  position: absolute !important;
  z-index: 100 !important;
}


.srp-filters-container
.srp-filters-widget
.multiselect.multiselect--active
.multiselect__content-wrapper {
  z-index: 1100 !important;
}


/* =========================================================
   9. CHAMP TECHNIQUE DU PLUGIN
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

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

  opacity: 0 !important;
  pointer-events: none !important;
}


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width: 767px) {

  .srp-filters-container
  .srp-filters-widget
  .multiselect__tags {
    min-height: 44px !important;

    padding-left: 11px !important;
    padding-right: 40px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__tags::before {
    color: #176b70 !important;
    -webkit-text-fill-color: #176b70 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect:hover
  .multiselect__tags::before,

  .srp-filters-container
  .srp-filters-widget
  .multiselect.multiselect--active
  .multiselect__tags::before {
    color: #12595d !important;
    -webkit-text-fill-color: #12595d !important;

    font-weight: 800 !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::before,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::after {
    right: 11px !important;
  }
}


/* =========================================================
   11. TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 380px) {

  .srp-filters-container
  .srp-filters-widget
  .multiselect__tags {
    padding-left: 9px !important;
    padding-right: 36px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__tags::before {
    font-size: 12px !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::before,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__select::after {
    right: 9px !important;
  }
}

/*selecteur de rechercher, modification de marge*/
.srp_search_main .srp_search_container .srp_search {

  margin-bottom: 8px !important;
}
/* =========================================================
   SAMAKENTRA — BOUTON MOBILE « TOUCHER POUR OUVRIR »
========================================================= */
/* =========================================================
   SAMAKENTRA — SURCOUCHE MOBILE DE LA MESSAGERIE
   Texte forcé par CSS, centrage natif préservé
========================================================= */

@media (max-width: 767px) {

  .bp-messages-mobile-tap {
    background-color: rgba(255, 255, 255, 0.94) !important;

    /*
     * Masque uniquement le texte original.
     * Aucun changement de position ou de dimensions.
     */
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;

    text-align: center !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }


  /* Nouveau texte affiché */
  .bp-messages-mobile-tap::before {
    content:
      "Une question ou un besoin d’accompagnement ? \A \A "
      "Touchez ici pour échanger directement avec Rayan Gori, l'Hypno-Alchimiste." !important;

    display: inline-block !important;

    max-width: 330px !important;

    color: #176b70 !important;

    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    text-align: center !important;
    white-space: pre-line !important;

    pointer-events: none !important;
  }


  /* Masque un éventuel enfant contenant l’ancien texte */
  .bp-messages-mobile-tap > * {
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
  }
}


/* Très petits téléphones */
@media (max-width: 380px) {

  .bp-messages-mobile-tap::before {
    max-width: 290px !important;
    font-size: 18px !important;
  }
}
/* =========================================================
   SAMAKENTRA — CARTES GLASS PREMIUM
   VERSION FINALE RESPONSIVE

   - Mobile conservé
   - Tablette harmonisée
   - Ordinateur harmonisé
========================================================= */


/* =========================================================
   1. CARTES « BESOINS DU MOMENT »
========================================================= */

.sk-home-card {
  /* Valeurs mobiles — rendu actuellement validé */
  --sk-home-image-scale: 1.026;
  --sk-home-image-hover-scale: 1.034;

  position: relative !important;
  display: block !important;
  isolation: isolate !important;
  overflow: hidden !important;

  border: 0 !important;
  border-radius: 18px !important;

  background: #ffffff !important;

  box-shadow:
    0 10px 26px rgba(33, 54, 56, 0.10),
    0 3px 8px rgba(33, 54, 56, 0.045) !important;

  line-height: 0 !important;

  transform: translateZ(0) !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out !important;
}


/*
 * Bordure unique placée au-dessus de l’image.
 * Aucun double contour dans les angles.
 */
.sk-home-card::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  border: 1px solid rgba(168, 211, 209, 0.88) !important;
  border-radius: inherit !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(23, 107, 112, 0.04) !important;

  pointer-events: none !important;
  z-index: 10 !important;

  transition:
    border-color 220ms ease-out,
    box-shadow 220ms ease-out !important;
}


/* =========================================================
   2. IMAGE DES CARTES « BESOINS »
========================================================= */

.sk-home-card__image {
  position: relative !important;
  z-index: 1 !important;

  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

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

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  transform:
    scale(var(--sk-home-image-scale))
    translateZ(0) !important;

  transform-origin: center center !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  will-change: transform !important;

  filter:
    saturate(1.025)
    contrast(1.01) !important;

  transition:
    transform 260ms ease-out,
    filter 260ms ease-out !important;
}


/*
 * Sécurité lorsque .sk-home-card__image
 * est un conteneur autour de l’image réelle.
 */
.sk-home-card__image img,
.sk-home-card__image picture,
.sk-home-card__image picture img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

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

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   3. CARTES CATÉGORIES ET THÉMATIQUES
========================================================= */

.sk-category-card,
.sk-theme-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  border: 1px solid rgba(168, 211, 209, 0.68) !important;
  border-radius: 20px !important;

  background:
    radial-gradient(
      circle at 12% 4%,
      rgba(168, 211, 209, 0.25) 0%,
      rgba(168, 211, 209, 0) 38%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(247, 250, 249, 0.92) 52%,
      rgba(238, 247, 246, 0.80) 100%
    ) !important;

  box-shadow:
    0 13px 34px rgba(33, 54, 56, 0.095),
    0 3px 9px rgba(33, 54, 56, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(23, 107, 112, 0.055) !important;

  -webkit-backdrop-filter:
    blur(15px)
    saturate(125%) !important;

  backdrop-filter:
    blur(15px)
    saturate(125%) !important;

  transform: translateZ(0) !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transition:
    transform 220ms ease-out,
    border-color 220ms ease-out,
    box-shadow 220ms ease-out,
    background 220ms ease-out !important;
}


/* =========================================================
   4. REFLET SUPÉRIEUR
========================================================= */

.sk-category-card::before,
.sk-theme-card::before {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;

  height: 42% !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0.16) 48%,
      rgba(255, 255, 255, 0) 100%
    ) !important;

  opacity: 0.58 !important;

  pointer-events: none !important;
  z-index: 2 !important;
}


/* =========================================================
   5. HALO AQUA
========================================================= */

.sk-category-card::after,
.sk-theme-card::after {
  content: "" !important;

  position: absolute !important;
  top: -75px !important;
  right: -65px !important;

  width: 155px !important;
  height: 155px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(36, 139, 142, 0.13) 0%,
      rgba(168, 211, 209, 0.08) 44%,
      rgba(168, 211, 209, 0) 72%
    ) !important;

  filter: blur(6px) !important;
  opacity: 0.8 !important;

  pointer-events: none !important;
  z-index: 1 !important;

  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out !important;
}


/*
 * Les contenus restent au-dessus
 * des effets décoratifs.
 */
.sk-category-card > *,
.sk-theme-card > * {
  position: relative !important;
  z-index: 3 !important;
}


/* =========================================================
   6. IMAGES DES THÉMATIQUES
========================================================= */

.sk-theme-card img {
  position: relative !important;
  z-index: 3 !important;

  display: block !important;

  border-radius: 14px !important;

  box-shadow:
    0 8px 20px rgba(33, 54, 56, 0.10),
    0 2px 5px rgba(33, 54, 56, 0.05) !important;

  filter:
    saturate(1.025)
    contrast(1.01) !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transition:
    transform 260ms ease-out,
    filter 260ms ease-out,
    box-shadow 260ms ease-out !important;
}


/* =========================================================
   7. IMAGES DES CATÉGORIES
========================================================= */

.sk-category-card img {
  position: relative !important;
  z-index: 3 !important;

  display: block !important;

  filter:
    drop-shadow(0 8px 12px rgba(33, 54, 56, 0.09))
    saturate(1.025) !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transition:
    transform 260ms ease-out,
    filter 260ms ease-out !important;
}


/* =========================================================
   8. TABLETTE
   À partir de 768 px
========================================================= */

@media (min-width: 768px) {

  /* -----------------------------------------
     Besoins du moment
  ----------------------------------------- */

  .sk-home-card {
    --sk-home-image-scale: 1.055;
    --sk-home-image-hover-scale: 1.065;

    box-shadow:
      0 14px 34px rgba(33, 54, 56, 0.12),
      0 4px 10px rgba(33, 54, 56, 0.055) !important;
  }


  .sk-home-card::after {
    border-color: rgba(168, 211, 209, 0.92) !important;
  }


  /* -----------------------------------------
     Catégories et thématiques
  ----------------------------------------- */

  .sk-category-card,
  .sk-theme-card {
    border-color: rgba(168, 211, 209, 0.76) !important;

    box-shadow:
      0 16px 40px rgba(33, 54, 56, 0.12),
      0 5px 12px rgba(33, 54, 56, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(23, 107, 112, 0.06) !important;
  }


  /*
   * Sur les grandes cartes, le reflet doit également
   * occuper une plus grande surface.
   */
  .sk-category-card::before,
  .sk-theme-card::before {
    height: 48% !important;
    opacity: 0.64 !important;
  }


  /*
   * Halo défini en pourcentage afin de conserver
   * la même proportion qu’en version mobile.
   */
  .sk-category-card::after,
  .sk-theme-card::after {
    top: -20% !important;
    right: -16% !important;

    width: 58% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

    filter: blur(8px) !important;
    opacity: 0.9 !important;
  }


  .sk-theme-card img {
    box-shadow:
      0 10px 26px rgba(33, 54, 56, 0.12),
      0 3px 7px rgba(33, 54, 56, 0.06) !important;
  }


  .sk-category-card img {
    filter:
      drop-shadow(0 10px 15px rgba(33, 54, 56, 0.12))
      saturate(1.025) !important;
  }

}


/* =========================================================
   9. ORDINATEUR
   À partir de 1100 px
========================================================= */

@media (min-width: 1100px) {

  /* -----------------------------------------
     Besoins du moment
  ----------------------------------------- */

  .sk-home-card {
    --sk-home-image-scale: 1.062;
    --sk-home-image-hover-scale: 1.074;

    box-shadow:
      0 16px 40px rgba(33, 54, 56, 0.13),
      0 5px 12px rgba(33, 54, 56, 0.06) !important;
  }


  /* -----------------------------------------
     Catégories et thématiques
  ----------------------------------------- */

  .sk-category-card,
  .sk-theme-card {
    box-shadow:
      0 18px 46px rgba(33, 54, 56, 0.13),
      0 6px 14px rgba(33, 54, 56, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(23, 107, 112, 0.065) !important;
  }


  .sk-category-card::before,
  .sk-theme-card::before {
    height: 50% !important;
    opacity: 0.68 !important;
  }


  .sk-category-card::after,
  .sk-theme-card::after {
    width: 62% !important;
    filter: blur(9px) !important;
  }


  .sk-theme-card img {
    box-shadow:
      0 12px 30px rgba(33, 54, 56, 0.13),
      0 4px 9px rgba(33, 54, 56, 0.065) !important;
  }


  .sk-category-card img {
    filter:
      drop-shadow(0 12px 18px rgba(33, 54, 56, 0.13))
      saturate(1.025) !important;
  }

}


/* =========================================================
   10. HOVER ORDINATEUR
========================================================= */

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {

  /* -----------------------------------------
     Besoins du moment
  ----------------------------------------- */

  .sk-home-card:hover {
    box-shadow:
      0 22px 48px rgba(33, 54, 56, 0.16),
      0 7px 16px rgba(33, 54, 56, 0.075) !important;

    transform:
      translateY(-5px)
      translateZ(0) !important;
  }


  .sk-home-card:hover::after {
    border-color: rgba(36, 139, 142, 0.82) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(23, 107, 112, 0.07) !important;
  }


  .sk-home-card:hover .sk-home-card__image {
    transform:
      scale(var(--sk-home-image-hover-scale))
      translateZ(0) !important;

    filter:
      saturate(1.05)
      contrast(1.02) !important;
  }


  /* -----------------------------------------
     Catégories et thématiques
  ----------------------------------------- */

  .sk-category-card:hover,
  .sk-theme-card:hover {
    border-color: rgba(36, 139, 142, 0.78) !important;

    background:
      radial-gradient(
        circle at 12% 4%,
        rgba(168, 211, 209, 0.40) 0%,
        rgba(168, 211, 209, 0) 44%
      ),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(247, 250, 249, 0.97) 48%,
        rgba(226, 242, 241, 0.88) 100%
      ) !important;

    box-shadow:
      0 0 0 3px rgba(36, 139, 142, 0.74),
      0 0 0 7px rgba(36, 139, 142, 0.13),
      0 24px 54px rgba(33, 54, 56, 0.17),
      0 8px 18px rgba(33, 54, 56, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(23, 107, 112, 0.07) !important;

    transform:
      translateY(-5px)
      translateZ(0) !important;
  }


  .sk-category-card:hover::after,
  .sk-theme-card:hover::after {
    opacity: 1 !important;

    transform:
      translate(-5%, 5%)
      scale(1.10) !important;
  }


  .sk-theme-card:hover img {
    transform:
      scale(1.018)
      translateZ(0) !important;

    filter:
      saturate(1.055)
      contrast(1.02) !important;

    box-shadow:
      0 15px 34px rgba(33, 54, 56, 0.15),
      0 5px 11px rgba(33, 54, 56, 0.075) !important;
  }


  .sk-category-card:hover img {
    transform:
      translateY(-3px)
      scale(1.025)
      translateZ(0) !important;

    filter:
      drop-shadow(0 14px 20px rgba(33, 54, 56, 0.15))
      saturate(1.055) !important;
  }

}


/* =========================================================
   11. CLIC / FOCUS TABLETTE ET ORDINATEUR
   Reproduit le retour visuel validé sur mobile
========================================================= */

@media (min-width: 768px) {

  .sk-category-card:active,
  .sk-category-card:focus-visible,
  .sk-category-card:focus-within,
  .sk-theme-card:active,
  .sk-theme-card:focus-visible,
  .sk-theme-card:focus-within {
    outline: 0 !important;

    border-color: rgba(36, 139, 142, 0.90) !important;

    box-shadow:
      0 0 0 3px rgba(36, 139, 142, 0.78),
      0 0 0 7px rgba(36, 139, 142, 0.15),
      0 18px 42px rgba(33, 54, 56, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 1) !important;

    transform:
      translateY(-2px)
      translateZ(0) !important;
  }


  .sk-home-card:active,
  .sk-home-card:focus-visible,
  .sk-home-card:focus-within {
    outline: 0 !important;

    box-shadow:
      0 0 0 3px rgba(36, 139, 142, 0.72),
      0 0 0 7px rgba(36, 139, 142, 0.13),
      0 18px 42px rgba(33, 54, 56, 0.15) !important;

    transform:
      translateY(-2px)
      translateZ(0) !important;
  }


  .sk-home-card:active::after,
  .sk-home-card:focus-visible::after,
  .sk-home-card:focus-within::after {
    border-color: rgba(36, 139, 142, 0.90) !important;
  }

}


/* =========================================================
   12. PRESSION MOBILE
   Rendu mobile conservé
========================================================= */

@media (max-width: 767px) {

  .sk-home-card:active,
  .sk-category-card:active,
  .sk-theme-card:active {
    box-shadow:
      0 5px 14px rgba(33, 54, 56, 0.10),
      inset 0 2px 6px rgba(33, 54, 56, 0.05) !important;

    transform:
      translateY(-1px)
      scale(0.992)
      translateZ(0) !important;
  }


  .sk-home-card:active::after {
    border-color: rgba(23, 107, 112, 0.72) !important;
  }


  .sk-category-card:active,
  .sk-theme-card:active {
    border-color: rgba(23, 107, 112, 0.72) !important;
  }


  .sk-home-card:focus-visible,
  .sk-home-card:focus-within,
  .sk-category-card:focus-visible,
  .sk-category-card:focus-within,
  .sk-theme-card:focus-visible,
  .sk-theme-card:focus-within {
    outline: 2px solid #248B8E !important;
    outline-offset: 4px !important;

    box-shadow:
      0 16px 36px rgba(33, 54, 56, 0.13),
      0 0 0 4px rgba(36, 139, 142, 0.16) !important;
  }

}


/* =========================================================
   13. RÉDUCTION DES ANIMATIONS
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sk-home-card,
  .sk-home-card::after,
  .sk-home-card__image,
  .sk-category-card,
  .sk-theme-card,
  .sk-category-card::after,
  .sk-theme-card::after,
  .sk-category-card img,
  .sk-theme-card img {
    transition: none !important;
  }


  .sk-home-card:hover,
  .sk-category-card:hover,
  .sk-theme-card:hover,
  .sk-category-card:hover img,
  .sk-theme-card:hover img {
    transform: none !important;
  }


  /*
   * Le zoom de l’image d’accueil reste actif,
   * car il masque le contour intégré à l’image.
   */
  .sk-home-card__image,
  .sk-home-card:hover .sk-home-card__image {
    transform:
      scale(var(--sk-home-image-scale))
      translateZ(0) !important;
  }

}
/* =========================================================
   PATCH PC — dernière carte "Se décharger"
========================================================= */

@media (min-width: 1100px) {

  /* Un peu plus d’air dans la carte */
  .sk-home-card:last-child {
    padding-right: 4px !important;
  }

  /* Titre : réduction très légère */
  .sk-home-card:last-child .sk-home-card__title,
  .sk-home-card:last-child h3,
  .sk-home-card:last-child .elementor-heading-title {
    font-size: 0.96em !important;
    line-height: 1.02 !important;
  }

  /* Sous-titre : réduction très légère */
  .sk-home-card:last-child .sk-home-card__subtitle,
  .sk-home-card:last-child p,
  .sk-home-card:last-child .elementor-widget-text-editor,
  .sk-home-card:last-child .elementor-widget-text-editor p {
    font-size: 0.97em !important;
    line-height: 1.12 !important;
  }

}
/* =========================================================
   SAMAKENTRA — IMAGE DU LECTEUR ÉTENDU
========================================================= */

@media (max-width: 767px) {

  /* Conteneur de l’image */
  .srp_extendedPlayer_container
  .srp_extendedPlayer
  .srp_ext_artwork {

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 12px 14px 0 14px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

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

    flex: 0 0 auto !important;
    overflow: visible !important;
  }


  /* Image réelle */
  .srp_extendedPlayer_container
  .srp_extendedPlayer
  .srp_ext_artwork img {

    display: block !important;

    width: 100% !important;
    max-width: 430px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: cover !important;
    object-position: center !important;

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

    border-radius: 18px !important;

    transform: none !important;
    filter: none !important;
    opacity: 1 !important;

    image-rendering: auto !important;
  }
}
/* =========================================================
   SAMAKENTRA — TITRE ET ARTISTE DU PLAYER
========================================================= */


/* =========================================================
   1. PETIT PLAYER FIXE — TITRE DE LA PISTE
========================================================= */

#sonaar-player .playerNowPlaying .metadata .track-name,
.sonaar-player .playerNowPlaying .metadata .track-name {
  display: block !important;

  color: #176B70 !important;

  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;

  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}


/* Hérite correctement si le titre contient un lien ou un span */
#sonaar-player .playerNowPlaying .metadata .track-name a,
#sonaar-player .playerNowPlaying .metadata .track-name span,
.sonaar-player .playerNowPlaying .metadata .track-name a,
.sonaar-player .playerNowPlaying .metadata .track-name span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
}


/* Survol discret */
#sonaar-player .playerNowPlaying .metadata .track-name a:hover,
.sonaar-player .playerNowPlaying .metadata .track-name a:hover {
  color: #12595D !important;
}


/* =========================================================
   2. GRAND PLAYER — TITRE DE LA PISTE
========================================================= */

.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_track_title {
  display: block !important;

  color: #176B70 !important;

  font-family: inherit !important;
  font-size: clamp(18px, 1.25vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;

  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;

  margin: 0 0 4px 0 !important;
  padding: 0 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;

  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}


/* Titre cliquable */
.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_track_title a,
.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_track_title span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
}


/* Survol du titre */
.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_track_title a:hover {
  color: #12595D !important;
}


/* =========================================================
   3. GRAND PLAYER — ARTISTE
========================================================= */

.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_artist {
  display: block !important;

  color: #687A7B !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;

  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  font-style: normal !important;

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

  white-space: normal !important;
  overflow-wrap: anywhere !important;

  opacity: 1 !important;

  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}


/* Supprime le bleu et le soulignement si l’artiste est un lien */
.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_artist a,
.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_artist span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
}


/* Survol de l’artiste */
.srp_extendedPlayer_container
.srp_extendedPlayer
.srp_artist a:hover {
  color: #176B70 !important;
}


/* =========================================================
   4. AJUSTEMENT MOBILE
========================================================= */

@media (max-width: 767px) {

  #sonaar-player .playerNowPlaying .metadata .track-name,
  .sonaar-player .playerNowPlaying .metadata .track-name {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .srp_extendedPlayer_container
  .srp_extendedPlayer
  .srp_track_title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
  }

  .srp_extendedPlayer_container
  .srp_extendedPlayer
  .srp_artist {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}
/* =========================================================
   SAMAKENTRA — CORRECTION TITRE CACHÉ DU PLAYER MOBILE
========================================================= */
@media (max-width: 767px) {

  .srp_extendedPlayer_container
  .srp_extendedPlayer
  .srp_ext_primary
  > .srp_ext_header
  .srp_playlist_title {
    display: none !important;
  }

}
/* =========================================================
   SAMAKENTRA — SUPPRESSION DU CARRÉ BLEU AU TOUCHER
   Mobile / PWA Android
========================================================= */

/* =========================================================
   SAMAKENTRA — SUPPRESSION DU CARRÉ BLEU AU TOUCHER
   Mobile / PWA Android
========================================================= */

@media (hover: none) and (pointer: coarse) {

  /* Éléments interactifs généraux */
  a,
  button,
  [role="button"],
  input,
  label,
  img,

  /* Lecteurs Sonaar */
  .srp_extendedPlayer_container *,
  .srp_ext_artwork *,
  .srp_player_boxed *,
  .srp_tracklist_grid *,

  /* Titre cliquable des pistes */
  .tracklist-item-title,
  .tracklist-item-title *,
  .srp_track_title,
  .srp_track_title *,
  .srp_playlist_title,
  .srp_playlist_title *,
  #sonaar-player .playerNowPlaying .metadata .track-name,

  /* Favoris */
  .song-store.srp-fav-bt,
  .song-store.srp-fav-bt *,
  .srp-fav-bt,
  .srp-fav-bt *,
  .sricon-heart,
  .sricon-heart-fill,

  /* Dropdowns SFP / Vue Multiselect */
  .multiselect,
  .multiselect *,
  .multiselect__tags,
  .multiselect__select,
  .multiselect__content-wrapper,
  .multiselect__content,
  .multiselect__element,
  .multiselect__option,
  .multiselect__option * {

    -webkit-tap-highlight-color: transparent !important;
  }

}

/* =========================================================
   SAMAKENTRA — CORRECTIF TACTILE DES PISTES DE LA LISTE
   Sans toucher au sticky player
========================================================= */

@media (hover: none) and (pointer: coarse) {

  /* Zone qui lance une piste depuis la liste */
  .sr-playlist-item .srp_audio_trigger,
  .sr-playlist-item .srp_audio_trigger *,

  /* Cover et Play sur la petite image */
  .sr-playlist-item .sr_track_cover,
  .sr-playlist-item .sr_track_cover *,
  .sr-playlist-item .srp_play,
  .sr-playlist-item .srp_play *,

  /* Titre cliquable */
  .sr-playlist-item .tracklist-item-title,
  .sr-playlist-item .tracklist-item-title *,

  /* Favoris dans la liste */
  .sr-playlist-item .store-list,
  .sr-playlist-item .store-list *,
  .sr-playlist-item .song-store-list-container,
  .sr-playlist-item .song-store-list-container *,
  .sr-playlist-item .song-store,
  .sr-playlist-item .song-store *,
  .sr-playlist-item .srp-fav-bt,
  .sr-playlist-item .srp-fav-bt *,
  .sr-playlist-item .sricon-heart,
  .sr-playlist-item .sricon-heart-fill {
    -webkit-tap-highlight-color: transparent !important;
  }

}
/* =========================================================
   SAMAKENTRA — CORRECTION FINALE DES OPTIONS DROPDOWN
   - Supprime le rectangle autour de la coche
   - Évite le faux hover persistant de Vue Multiselect
   - Conserve un vrai hover uniquement à la souris
========================================================= */


/* =========================================================
   1. BASE DES OPTIONS
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__option {
  position: relative !important;

  /*
   * Espace réservé pour la coche située à droite.
   */
  padding-right: 42px !important;
}


/* =========================================================
   2. NEUTRALISATION DU FAUX HOVER VUE MULTISELECT
========================================================= */

/*
 * Vue Multiselect conserve parfois la classe
 * .multiselect__option--highlight après le départ
 * de la souris.
 *
 * Cette classe seule ne doit donc plus créer
 * un fond de survol.
 */
.srp-filters-container
.srp-filters-widget
.multiselect__option--highlight:not(
  .multiselect__option--selected
) {
  color: #213638 !important;
  background: #FFFFFF !important;

  font-weight: 600 !important;
}


/* Une option sélectionnée reste simplement sélectionnée,
   même si Vue lui laisse également la classe highlight. */
.srp-filters-container
.srp-filters-widget
.multiselect__option--selected,

.srp-filters-container
.srp-filters-widget
.multiselect__option--selected.multiselect__option--highlight {
  color: #0E4A4D !important;
  background: #E2F2F1 !important;

  font-weight: 700 !important;
}


/* =========================================================
   3. VRAI HOVER — ORDINATEUR UNIQUEMENT
========================================================= */

@media (hover: hover) and (pointer: fine) {

  /* Option normale réellement survolée */
  .srp-filters-container
  .srp-filters-widget
  .multiselect__option:hover:not(
    .multiselect__option--selected
  ) {
    color: #176B70 !important;
    background: #EEF7F6 !important;

    font-weight: 700 !important;
  }


  /* Option sélectionnée réellement survolée */
  .srp-filters-container
  .srp-filters-widget
  .multiselect__option--selected:hover,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__option--selected.multiselect__option--highlight:hover {
    color: #0E4A4D !important;
    background: #D8ECEA !important;

    font-weight: 700 !important;
  }

}


/* =========================================================
   4. TÉLÉPHONE / ÉCRAN TACTILE
   Empêche les états hover collants après un toucher
========================================================= */

@media (hover: none), (pointer: coarse) {

  .srp-filters-container
  .srp-filters-widget
  .multiselect__option:hover:not(
    .multiselect__option--selected
  ),

  .srp-filters-container
  .srp-filters-widget
  .multiselect__option--highlight:not(
    .multiselect__option--selected
  ) {
    color: #213638 !important;
    background: #FFFFFF !important;

    font-weight: 600 !important;
  }


  .srp-filters-container
  .srp-filters-widget
  .multiselect__option--selected:hover,

  .srp-filters-container
  .srp-filters-widget
  .multiselect__option--selected.multiselect__option--highlight {
    color: #0E4A4D !important;
    background: #E2F2F1 !important;

    font-weight: 700 !important;
  }

}


/* =========================================================
   5. COCHE DE L’OPTION SÉLECTIONNÉE
   Aucun fond indépendant : donc plus de rectangle coupé
========================================================= */

.srp-filters-container
.srp-filters-widget
.multiselect__option::after {
  content: "" !important;

  position: absolute !important;

  top: 50% !important;
  right: 14px !important;
  left: auto !important;

  width: auto !important;
  height: auto !important;

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

  color: inherit !important;
  background: transparent !important;

  line-height: 1 !important;

  transform: translateY(-50%) !important;

  pointer-events: none !important;
}


/* Coche propre et constante */
.srp-filters-container
.srp-filters-widget
.multiselect__option--selected::after {
  content: "✓" !important;

  color: #176B70 !important;
  background: transparent !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}
/* =========================================================
   SAMAKENTRA — AGRANDIR LE BOUTON OUVRIR / FERMER LE PLAYER
========================================================= */

/* Taille générale du bouton */
#sonaar-player .close.btn-player {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;

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

  box-sizing: border-box !important;
}

/* Icône en forme de flèche */
#sonaar-player .close.btn-player::before {
  font-size: 23px !important;
  line-height: 1 !important;
}

/* Icône SVG affichée dans certains états du player */
#sonaar-player .close.btn-player svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* Taille tactile confortable sur téléphone et tablette */
@media (max-width: 1024px) {

  #sonaar-player .close.btn-player {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #sonaar-player .close.btn-player::before {
    font-size: 25px !important;
  }

  #sonaar-player .close.btn-player svg {
    width: 26px !important;
    height: 26px !important;
  }
}
/* =========================================================
   SAMAKENTRA — DESCRIPTION DES PISTES JUSTIFIÉE
   Mobile + tablette
========================================================= */

@media (max-width: 1024px) {

  .srp_track_description {
    text-align: justify !important;
    text-align-last: left !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: normal;
  }

}
/* =========================================================
   SAMAKENTRA — TEXTE JUSTIFIÉ
   Liste + sticky player
   Mobile et tablette
========================================================= */

@media (max-width: 1024px) {

  /* Description dans la liste */
  .srp_track_description,

  /* Contenu textuel du sticky player */
  .srp_extendedPlayer_container .srp_ext_section,
  .srp_extendedPlayer .srp_ext_section {
    text-align: justify !important;
    text-align-last: left !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: normal !important;
  }

  /* Force aussi les éléments enfants éventuels */
  .srp_extendedPlayer_container .srp_ext_section p,
  .srp_extendedPlayer_container .srp_ext_section div,
  .srp_extendedPlayer .srp_ext_section p,
  .srp_extendedPlayer .srp_ext_section div {
    text-align: inherit !important;
  }

}
/* =========================================================
   SAMAKENTRA — BANNIÈRE HOME GLASS PREMIUM
   Mobile · Tablette · Ordinateur
========================================================= */

.sk-home-banner {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  border: 1px solid rgba(168, 211, 209, 0.72) !important;
  border-radius: 20px !important;

  background-color: rgba(255, 255, 255, 0.72) !important;

  box-shadow:
    0 12px 30px rgba(33, 54, 56, 0.09),
    0 3px 9px rgba(33, 54, 56, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(23, 107, 112, 0.04) !important;

  -webkit-backdrop-filter:
    blur(14px)
    saturate(120%) !important;

  backdrop-filter:
    blur(14px)
    saturate(120%) !important;

  transform: translateZ(0) !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transition:
    transform 220ms ease-out,
    border-color 220ms ease-out,
    box-shadow 220ms ease-out !important;
}


/* =========================================================
   REFLET GLASS SUPÉRIEUR
========================================================= */

.sk-home-banner::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.52) 0%,
      rgba(255, 255, 255, 0.16) 38%,
      rgba(255, 255, 255, 0) 68%
    ) !important;

  opacity: 0.72 !important;

  pointer-events: none !important;
  z-index: 1 !important;
}


/* =========================================================
   HALO AQUA DISCRET
========================================================= */

.sk-home-banner::after {
  content: "" !important;

  position: absolute !important;
  top: -50% !important;
  right: -12% !important;

  width: 52% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(36, 139, 142, 0.14) 0%,
      rgba(168, 211, 209, 0.09) 42%,
      rgba(168, 211, 209, 0) 72%
    ) !important;

  filter: blur(12px) !important;
  opacity: 0.72 !important;

  pointer-events: none !important;
  z-index: 1 !important;

  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out !important;
}


/* Le contenu de la bannière reste au-dessus des effets */
.sk-home-banner > * {
  position: relative !important;
  z-index: 2 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .sk-home-banner {
    border-radius: 18px !important;

    box-shadow:
      0 10px 24px rgba(33, 54, 56, 0.08),
      0 3px 7px rgba(33, 54, 56, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;

    -webkit-backdrop-filter:
      blur(10px)
      saturate(115%) !important;

    backdrop-filter:
      blur(10px)
      saturate(115%) !important;
  }

  .sk-home-banner::after {
    top: -35% !important;
    right: -18% !important;

    width: 64% !important;

    filter: blur(9px) !important;
    opacity: 0.62 !important;
  }

}


/* =========================================================
   TABLETTE
========================================================= */

@media (min-width: 768px) and (max-width: 1099px) {

  .sk-home-banner {
    border-radius: 22px !important;

    box-shadow:
      0 16px 38px rgba(33, 54, 56, 0.11),
      0 5px 12px rgba(33, 54, 56, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      inset 0 -1px 0 rgba(23, 107, 112, 0.05) !important;
  }

  .sk-home-banner::before {
    opacity: 0.76 !important;
  }

  .sk-home-banner::after {
    width: 56% !important;
    opacity: 0.78 !important;
  }

}


/* =========================================================
   ORDINATEUR
========================================================= */

@media (min-width: 1100px) {

  .sk-home-banner {
    border-radius: 24px !important;

    box-shadow:
      0 18px 46px rgba(33, 54, 56, 0.12),
      0 6px 15px rgba(33, 54, 56, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(23, 107, 112, 0.055) !important;
  }

  .sk-home-banner::before {
    opacity: 0.80 !important;
  }

  .sk-home-banner::after {
    width: 58% !important;

    filter: blur(15px) !important;
    opacity: 0.82 !important;
  }

}


/* =========================================================
   HOVER TABLETTE AVEC SOURIS + ORDINATEUR
========================================================= */

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {

  .sk-home-banner:hover {
    border-color: rgba(36, 139, 142, 0.68) !important;

    box-shadow:
      0 24px 54px rgba(33, 54, 56, 0.15),
      0 8px 18px rgba(33, 54, 56, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(23, 107, 112, 0.065) !important;

    transform:
      translateY(-4px)
      translateZ(0) !important;
  }

  .sk-home-banner:hover::after {
    opacity: 1 !important;

    transform:
      translate(-4%, 5%)
      scale(1.08) !important;
  }

}


/* =========================================================
   PRESSION TACTILE
========================================================= */

.sk-home-banner:active {
  border-color: rgba(23, 107, 112, 0.72) !important;

  box-shadow:
    0 6px 16px rgba(33, 54, 56, 0.09),
    inset 0 2px 6px rgba(33, 54, 56, 0.04) !important;

  transform:
    translateY(-1px)
    scale(0.995)
    translateZ(0) !important;
}


/* =========================================================
   FOCUS CLAVIER
========================================================= */

.sk-home-banner:focus-visible {
  outline: 2px solid #248B8E !important;
  outline-offset: 4px !important;

  box-shadow:
    0 16px 36px rgba(33, 54, 56, 0.13),
    0 0 0 4px rgba(36, 139, 142, 0.16) !important;
}


/* =========================================================
   RÉDUCTION DES ANIMATIONS
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sk-home-banner,
  .sk-home-banner::after {
    transition: none !important;
  }

  .sk-home-banner:hover,
  .sk-home-banner:active {
    transform: none !important;
  }

}
/* =========================================================
   PATCH — INVERSER VOIX ET INSTRUMENTS
   Tablette + mobile

   Ligne 1 : Type | Voix | Ambiance
   Ligne 2 : Instruments centré
========================================================= */

@media (max-width: 1199px) {

  /* -------------------------------------------------------
     VOIX AU CENTRE DE LA PREMIÈRE LIGNE
  ------------------------------------------------------- */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 6px 9px !important;
  }


  /* -------------------------------------------------------
     INSTRUMENTS SUR LA DEUXIÈME LIGNE
  ------------------------------------------------------- */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;

    width: fit-content !important;
    min-width: 200px !important;
    max-width: min(440px, 80%) !important;

    padding: 7px 14px !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  /* Voix dans la colonne centrale */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 5px 7px !important;
    font-size: 11.5px !important;
  }


  /* Instruments en dessous, avec davantage de largeur */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;

    width: fit-content !important;
    min-width: 0 !important;
    max-width: 86% !important;

    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   TRÈS PETITS TÉLÉPHONES
========================================================= */

@media (max-width: 380px) {

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--voix {
    padding: 5px 5px !important;
    font-size: 10.5px !important;
  }

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container
  .sr-playlist-cf-child.sr-playlist-cf--instrument {
    max-width: 92% !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}
/* =========================================================
   PATCH CONDITIONNEL — THÉMATIQUE OU INSTRUMENTS

   Avec thématique :
   Type | Thématique | Ambiance
          Voix

   Avec instruments :
   Type | Voix | Ambiance
        Instruments
========================================================= */

@media (max-width: 1199px) {

  /* =======================================================
     CAS 1 — UNE THÉMATIQUE EST PRÉSENTE
  ======================================================= */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container:has(
    .sr-playlist-cf--thematique:not(:empty)
  )
  .sr-playlist-cf--thematique {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  /* Voix replacée sur la deuxième ligne */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container:has(
    .sr-playlist-cf--thematique:not(:empty)
  )
  .sr-playlist-cf--voix {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;

    width: fit-content !important;
    min-width: 0 !important;
    max-width: 66.666% !important;

    padding: 7px 14px !important;
  }


  /* =======================================================
     CAS 2 — DES INSTRUMENTS SONT PRÉSENTS
     ET AUCUNE THÉMATIQUE N’EST AFFICHÉE
  ======================================================= */

  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container:not(
    :has(.sr-playlist-cf--thematique:not(:empty))
  ):has(
    .sr-playlist-cf--instrument:not(:empty)
  )
  .sr-playlist-cf--voix {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 6px 9px !important;
  }


  /* Instruments sur la deuxième ligne */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container:not(
    :has(.sr-playlist-cf--thematique:not(:empty))
  ):has(
    .sr-playlist-cf--instrument:not(:empty)
  )
  .sr-playlist-cf--instrument {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;

    width: fit-content !important;
    min-width: 200px !important;
    max-width: min(440px, 86%) !important;

    padding: 7px 14px !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  /* Avec thématique : voix centrée en dessous */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container:has(
    .sr-playlist-cf--thematique:not(:empty)
  )
  .sr-playlist-cf--voix {
    width: fit-content !important;
    max-width: 66.666% !important;

    padding: 7px 12px !important;
    font-size: 12px !important;
  }


  /* Avec instruments : voix au centre de la première ligne */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container:not(
    :has(.sr-playlist-cf--thematique:not(:empty))
  ):has(
    .sr-playlist-cf--instrument:not(:empty)
  )
  .sr-playlist-cf--voix {
    width: 100% !important;
    max-width: 100% !important;

    padding: 5px 7px !important;
    font-size: 11.5px !important;
  }


  /* Instruments élargis en dessous */
  .srp_tracklist
  .sr-playlist-item
  .sr-playlist-cf-container:not(
    :has(.sr-playlist-cf--thematique:not(:empty))
  ):has(
    .sr-playlist-cf--instrument:not(:empty)
  )
  .sr-playlist-cf--instrument {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 90% !important;

    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}