.elementor-2364 .elementor-element.elementor-element-0cd12d3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 60px;--row-gap:0px;--column-gap:60px;}.elementor-2364 .elementor-element.elementor-element-7a3dd29{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2364 .elementor-element.elementor-element-d3863c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-2364 .elementor-element.elementor-element-7a3dd29{--width:80%;}.elementor-2364 .elementor-element.elementor-element-d3863c9{--width:20%;}}@media(max-width:1024px){.elementor-2364 .elementor-element.elementor-element-0cd12d3{--gap:0px 50px;--row-gap:0px;--column-gap:50px;}}@media(max-width:767px){.elementor-2364 .elementor-element.elementor-element-0cd12d3{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}}/* Start custom CSS for container, class: .elementor-element-0cd12d3 *//* ═══════════════════════════════════════════════════════════
   KATIMINI — Player Audio : Comportement Mobile
   
   CONTEXTE :
   - Desktop : player dans une colonne droite en sticky (déjà OK)
   - Mobile : le player passe en bouton flottant fixe à droite,
     à 30% depuis le haut de l'écran (comme le bouton "retour haut")
   
   INTÉGRATION :
   Option A : Coller dans Elementor > CSS personnalisé du widget player
   Option B : Coller dans un widget HTML à côté du player
   Option C : Ajouter dans Apparence > Personnaliser > CSS additionnel
═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Le player passe en bouton flottant fixe */
  #ktm-player {
    position: fixed !important;
    right: 16px;
    top: 30vh;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(154, 66, 77, 0.35) !important;
    overflow: hidden;
    cursor: pointer;
    background: #9A424D !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    transition: all 0.3s ease;
    z-index: 9999;
  }

  /* Cacher tout sauf le bouton play */
  #ktm-player > div:first-child,     /* header (titre, vitesse) */
  #ktm-player .ktm-time,              /* temps */
  #ktm-player #ktm-progress-wrap,     /* barre de progression */
  #ktm-player .ktm-vol-btn,           /* volume */
  #ktm-player #ktm-speed {            /* vitesse */
    display: none !important;
  }

  /* Le bouton play reste visible et centré */
  #ktm-player .ktm-controls {
    gap: 0 !important;
    justify-content: center;
  }

  #ktm-player .ktm-play-btn,
  #ktm-player #ktm-play {
    width: 52px !important;
    height: 52px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  #ktm-player .ktm-play-btn svg,
  #ktm-player #ktm-play svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* ── État EXPANDED : quand on clique pour voir les contrôles ── */
  #ktm-player.ktm-expanded {
    width: calc(100vw - 32px) !important;
    height: auto !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    right: 16px;
    background: #faf7f7 !important;
    border: 1px solid #f0eaea !important;
    overflow: visible;
  }

  #ktm-player.ktm-expanded > div:first-child,
  #ktm-player.ktm-expanded .ktm-time,
  #ktm-player.ktm-expanded #ktm-progress-wrap {
    display: flex !important;
  }

  #ktm-player.ktm-expanded .ktm-controls {
    gap: 10px !important;
  }

  #ktm-player.ktm-expanded .ktm-play-btn,
  #ktm-player.ktm-expanded #ktm-play {
    width: 40px !important;
    height: 40px !important;
    background: #9A424D !important;
    box-shadow: 0 2px 8px rgba(154,66,77,0.3) !important;
  }
}/* End custom CSS */