.et_animated{opacity:0;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both!important;animation-fill-mode:both!important}.et_animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.et_had_animation{position:relative}@-webkit-keyframes et_pb_fade{to{opacity:1}}@keyframes et_pb_fade{to{opacity:1}}.et_animated.fade{-webkit-animation-name:et_pb_fade;animation-name:et_pb_fade}@-webkit-keyframes et_pb_fadeTop{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes et_pb_fadeTop{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.et_animated.fadeTop{-webkit-animation-name:et_pb_fadeTop;animation-name:et_pb_fadeTop}@-webkit-keyframes et_pb_fadeRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes et_pb_fadeRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.et_animated.fadeRight{-webkit-animation-name:et_pb_fadeRight;animation-name:et_pb_fadeRight}@-webkit-keyframes et_pb_fadeBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes et_pb_fadeBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.et_animated.fadeBottom{-webkit-animation-name:et_pb_fadeBottom;animation-name:et_pb_fadeBottom}@-webkit-keyframes et_pb_fadeLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes et_pb_fadeLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.et_animated.fadeLeft{-webkit-animation-name:et_pb_fadeLeft;animation-name:et_pb_fadeLeft}@-webkit-keyframes et_pb_slide{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes et_pb_slide{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}.et_animated.slide{-webkit-animation-name:et_pb_slide;animation-name:et_pb_slide}@-webkit-keyframes et_pb_slideTop{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes et_pb_slideTop{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.et_animated.slideTop{-webkit-animation-name:et_pb_slideTop;animation-name:et_pb_slideTop}@-webkit-keyframes et_pb_slideRight{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes et_pb_slideRight{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.et_animated.slideRight{-webkit-animation-name:et_pb_slideRight;animation-name:et_pb_slideRight}@-webkit-keyframes et_pb_slideBottom{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes et_pb_slideBottom{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.et_animated.slideBottom{-webkit-animation-name:et_pb_slideBottom;animation-name:et_pb_slideBottom}@-webkit-keyframes et_pb_slideLeft{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes et_pb_slideLeft{to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.et_animated.slideLeft{-webkit-animation-name:et_pb_slideLeft;animation-name:et_pb_slideLeft}@-webkit-keyframes et_pb_bounce{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes et_pb_bounce{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.et_animated.bounce{-webkit-animation-name:et_pb_bounce;animation-name:et_pb_bounce}@-webkit-keyframes et_pb_bounceTop{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-200px,0);transform:translate3d(0,-200px,0)}60%{-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_bounceTop{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-200px,0);transform:translate3d(0,-200px,0)}60%{-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none;opacity:1}}.et_animated.bounceTop{-webkit-animation-name:et_pb_bounceTop;animation-name:et_pb_bounceTop}@-webkit-keyframes et_pb_bounceRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(200px,0,0);transform:translate3d(200px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_bounceRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(200px,0,0);transform:translate3d(200px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}.et_animated.bounceRight{-webkit-animation-name:et_pb_bounceRight;animation-name:et_pb_bounceRight}@-webkit-keyframes et_pb_bounceBottom{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}60%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes et_pb_bounceBottom{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}60%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.et_animated.bounceBottom{-webkit-animation-name:et_pb_bounceBottom;animation-name:et_pb_bounceBottom}@-webkit-keyframes et_pb_bounceLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_bounceLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none;opacity:1}}.et_animated.bounceLeft{-webkit-animation-name:et_pb_bounceLeft;animation-name:et_pb_bounceLeft}@-webkit-keyframes et_pb_zoom{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes et_pb_zoom{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}.et_animated.zoom{-webkit-animation-name:et_pb_zoom;animation-name:et_pb_zoom}@-webkit-keyframes et_pb_zoomTop{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes et_pb_zoomTop{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}.et_animated.zoomTop{-webkit-animation-name:et_pb_zoomTop;animation-name:et_pb_zoomTop;-webkit-transform-origin:top;transform-origin:top}@-webkit-keyframes et_pb_zoomRight{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes et_pb_zoomRight{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}.et_animated.zoomRight{-webkit-animation-name:et_pb_zoomRight;animation-name:et_pb_zoomRight;-webkit-transform-origin:right;transform-origin:right}@-webkit-keyframes et_pb_zoomBottom{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes et_pb_zoomBottom{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}.et_animated.zoomBottom{-webkit-animation-name:et_pb_zoomBottom;animation-name:et_pb_zoomBottom;-webkit-transform-origin:bottom;transform-origin:bottom}@-webkit-keyframes et_pb_zoomLeft{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes et_pb_zoomLeft{to{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}.et_animated.zoomLeft{-webkit-animation-name:et_pb_zoomLeft;animation-name:et_pb_zoomLeft;-webkit-transform-origin:left;transform-origin:left}@-webkit-keyframes et_pb_flip{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes et_pb_flip{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}.et_animated.flip{-webkit-animation-name:et_pb_flip;animation-name:et_pb_flip}@-webkit-keyframes et_pb_flipTop{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes et_pb_flipTop{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}.et_animated.flipTop{-webkit-animation-name:et_pb_flipTop;animation-name:et_pb_flipTop;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes et_pb_flipRight{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}@keyframes et_pb_flipRight{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}.et_animated.flipRight{-webkit-animation-name:et_pb_flipRight;animation-name:et_pb_flipRight;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes et_pb_flipBottom{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes et_pb_flipBottom{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}.et_animated.flipBottom{-webkit-animation-name:et_pb_flipBottom;animation-name:et_pb_flipBottom;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes et_pb_flipLeft{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}@keyframes et_pb_flipLeft{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}.et_animated.flipLeft{-webkit-animation-name:et_pb_flipLeft;animation-name:et_pb_flipLeft;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes et_pb_fold{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}@keyframes et_pb_fold{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}.et_animated.fold{-webkit-transform-origin:center;transform-origin:center;-webkit-animation-name:et_pb_fold;animation-name:et_pb_fold}@-webkit-keyframes et_pb_foldTop{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes et_pb_foldTop{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}.et_animated.foldTop{-webkit-transform-origin:top;transform-origin:top;-webkit-animation-name:et_pb_foldTop;animation-name:et_pb_foldTop}@-webkit-keyframes et_pb_foldRight{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}@keyframes et_pb_foldRight{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}.et_animated.foldRight{-webkit-transform-origin:right;transform-origin:right;-webkit-animation-name:et_pb_foldRight;animation-name:et_pb_foldRight}@-webkit-keyframes et_pb_foldBottom{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes et_pb_foldBottom{to{opacity:1;-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}.et_animated.foldBottom{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-animation-name:et_pb_foldBottom;animation-name:et_pb_foldBottom}@-webkit-keyframes et_pb_foldLeft{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}@keyframes et_pb_foldLeft{to{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}.et_animated.foldLeft{-webkit-transform-origin:left;transform-origin:left;-webkit-animation-name:et_pb_foldLeft;animation-name:et_pb_foldLeft}@-webkit-keyframes et_pb_roll{0%{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_roll{0%{-webkit-transform-origin:center;transform-origin:center}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.et_animated.roll{-webkit-animation-name:et_pb_roll;animation-name:et_pb_roll}@-webkit-keyframes et_pb_rollTop{0%{-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform-origin:top;transform-origin:top;-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_rollTop{0%{-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform-origin:top;transform-origin:top;-webkit-transform:none;transform:none;opacity:1}}.et_animated.rollTop{-webkit-animation-name:et_pb_rollTop;animation-name:et_pb_rollTop}@-webkit-keyframes et_pb_rollRight{0%{-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform-origin:right;transform-origin:right;-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_rollRight{0%{-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform-origin:right;transform-origin:right;-webkit-transform:none;transform:none;opacity:1}}.et_animated.rollRight{-webkit-animation-name:et_pb_rollRight;animation-name:et_pb_rollRight}@-webkit-keyframes et_pb_rollBottom{0%{-webkit-transform-origin:bottom;transform-origin:bottom}to{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_rollBottom{0%{-webkit-transform-origin:bottom;transform-origin:bottom}to{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:none;transform:none;opacity:1}}.et_animated.rollBottom{-webkit-animation-name:et_pb_rollBottom;animation-name:et_pb_rollBottom}@-webkit-keyframes et_pb_rollLeft{0%{-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform-origin:left;transform-origin:left;-webkit-transform:none;transform:none;opacity:1}}@keyframes et_pb_rollLeft{0%{-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform-origin:left;transform-origin:left;-webkit-transform:none;transform:none;opacity:1}}.et_animated.rollLeft{-webkit-animation-name:et_pb_rollLeft;animation-name:et_pb_rollLeft}
.et_parallax_bg.et_parallax_bg__sticky,.et_pb_sticky.et_pb_section_parallax_sticky .et_parallax_bg:not(.et_parallax_bg__sticky),.et_pb_sticky .et_pb_section_parallax_sticky .et_parallax_bg:not(.et_parallax_bg__sticky){display:none}.et_pb_sticky.et_pb_section_parallax_sticky .et_parallax_bg.et_parallax_bg__sticky,.et_pb_sticky .et_pb_section_parallax_sticky .et_parallax_bg.et_parallax_bg__sticky{display:block}.et_builder_inner_content.has_et_pb_sticky{z-index:inherit}.et-db #et-boc .et-l #et-fb-app .et_pb_column.has_et_pb_sticky,.et_pb_column.has_et_pb_sticky{z-index:20}.et-l--header .et-db #et-boc .et-l #et-fb-app .et_pb_column.has_et_pb_sticky,.et-l--header .et_pb_column.has_et_pb_sticky{z-index:30}.et-l--footer .et-db #et-boc .et-l #et-fb-app .et_pb_column.has_et_pb_sticky,.et-l--footer .et_pb_column.has_et_pb_sticky{z-index:10}.et_pb_sticky_placeholder{opacity:0!important}.et_pb_sticky .et_overlay.et_pb_inline_icon_sticky:before,.et_pb_sticky .et_pb_inline_icon_sticky:before{content:attr(data-icon-sticky)!important}body .et-script-temporary-measurement{opacity:0}/* ==========================================================================
   CHAPITRE 1 : LA CONFIGURATION (Le cerveau du design)
   Ici, on définit les couleurs et polices une fois pour toutes.
   Si tu changes une couleur ici, ça change partout.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Reem+Kufi");

:root {
    /* -- Couleurs de l'interface -- */
    --player-bg: #ffffff;       /* Fond général blanc */
    --dark-section-bg: #222;    /* Fond de la partie haute (derrière l'image) */
    --primary-color: #333;      /* Couleur principale (boutons, textes) */
    --accent-color: #888;       /* Couleur secondaire (textes moins importants) */
    --text-color: #333;         /* Couleur du texte général */
    
    /* -- Barre de progression -- */
    --progress-bg: #eee;        /* Fond de la barre (gris clair) */
    --progress-fill: #333;      /* Remplissage de la barre (gris foncé) */
    
    /* -- Formes et Tailles -- */
    --border-radius-main: 15px; /* Arrondi des coins du lecteur */
    --font-family: 'Reem Kufi', sans-serif;
    
    /* -- Paramètres des Vagues (Couleurs HSL) -- */
    --wave-color-base: 60;      /* La teinte (60 = jaune/ocre) */
    --wave-saturation: 40%;     /* L'intensité de la couleur */
    --wave-lightness: 85%;      /* La clarté */
    --wave-lightness-dark: 75%; /* La version un peu plus sombre */
}

/* ==========================================================================
   CHAPITRE 2 : LA STRUCTURE PRINCIPALE (Le corps du lecteur)
   ========================================================================== */

/* L'en-tête (au dessus de la carte, s'il y en a une) */
.player-header {
    z-index: 20;
    width: 100%;
    flex-shrink: 0;   
    margin-top: 5px; 
    padding: 0px 0px 5px 0px;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
}

/* La CARTE PRINCIPALE (Le conteneur de tout le lecteur) */
.music-card {
    font-family: var(--font-family);
    margin: 40px auto;          /* Centré dans la page */
    width: 340px;               /* Largeur fixe */
    height: 600px;              /* Hauteur fixe */
    background: var(--player-bg);
    box-shadow: 0px 15px 35px rgba(0,0,0,0.2); /* L'ombre portée derrière */
    border-radius: var(--border-radius-main);
    overflow: hidden;           /* Ce qui dépasse est coupé (important pour les vagues) */
    position: relative;
    display: flex;
    flex-direction: column;     /* Empile les éléments (Haut puis Bas) */
    margin-bottom: 100px;
}

/* ==========================================================================
   CHAPITRE 3 : LA ZONE HAUTE (Image & Vagues)
   C'est la partie sombre en haut qui contient la pochette et l'animation.
   ========================================================================== */

/* Le conteneur de la zone haute (environ 57% de la hauteur totale) */
.visual-top {
    position: relative;
    width: 100%;
    height: 55%; 
    z-index: 500; /* Z-INDEX MOYEN : Au dessus du fond, mais sous les menus */
    background: white /*(--dark-section-bg)*/;
    overflow: hidden; 
}

/* L'image de la pochette d'album */
#stp #player-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* L'image remplit tout sans se déformer */
    display: block !important;
    z-index: 1; /* Tout au fond de la zone haute */
}

/* Effet de disparition (utilisé parfois par le JS) */
.fade-out {
    opacity: 0 !important;
    transform: scale(1.05) !important; /* Zoom léger en disparaissant */
}

/* --- ANIMATION DES VAGUES --- */
/* La définition du mouvement (tourne en rond) */
@keyframes wave {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Style général d'une vague */
.wave {
    position: absolute;
    height: 750px;
    width: 780px;
    opacity: 0.6;
    left: 0;
    top: -510px;      /* Positionnée haut pour ne montrer que le bas du rond */
    margin-left: -65%;
    border-radius: 40%; /* Forme ovale irrégulière */
    animation: wave 80s infinite linear; /* Ça tourne ! */
    
    /* Couleur de la vague (Dégradé) */
    background: linear-gradient(
        180deg,
        hsl(var(--wave-color-base), var(--wave-saturation), var(--wave-lightness)),
        hsl(var(--wave-color-base), var(--wave-saturation), var(--wave-lightness-dark))
    );
    filter: blur(2px); /* Léger flou pour faire plus liquide */
    z-index: 10;
}

/* Décalage des vagues 2 et 3 pour qu'elles ne soient pas superposées */
.wave:nth-child(2),
.wave:nth-child(3) {
    /* top: 10px; */ /* (Code original commenté) */
}

/* VITESSE LENTE (Quand la musique est en pause) */
.wave:nth-child(1) { animation-duration: 35s; }
.wave:nth-child(2) { animation-duration: 45s; }
.wave:nth-child(3) { animation-duration: 65s; }

/* VITESSE RAPIDE (Quand la classe .playing est ajoutée par le JS) */
.playing .visual-top .wave:nth-child(1) { animation-duration: 15s; }
.playing .visual-top .wave:nth-child(2) { animation-duration: 20s; }
.playing .visual-top .wave:nth-child(3) { animation-duration: 30s; }

.image {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1; 
    margin-bottom: 10px;
    /* display: none; */ 
}

/* Cible les icônes SVG dans ta liste de lecture */
.playlist-item svg, 
.playlist-item img[src$=".svg"] {
    position: relative;
    /* Ajuste la valeur (ex: -2px pour monter, 2px pour descendre) */
    transform: translateY(-52px) !important; 
}

/* ==========================================================================
   CHAPITRE 4 : LA ZONE BASSE (Contrôles & Textes)
   C'est la partie blanche/grise en bas.
   ========================================================================== */

.controls-bottom {
    width: 100% !important;
    margin: 0 !important;
    padding: 0; 
    flex-grow: 1;           /* Prend tout l'espace restant en bas */
    position: relative;
    z-index: 100;           /* Au dessus des vagues, mais sous la playlist */
    
    /* Le fameux dégradé gris fluide */
    background: linear-gradient(
        to bottom,
        #ffffff 0%,    /* Blanc pur (jonction) */
        #f4f4f4 12%,   
        #ececec 45%,   /* Gris relief */
        #e0e0e0 100%
    );
    border: none !important;
    border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
    box-shadow: none !important;
}

/* Le conteneur interne pour mettre un peu de marge sur les côtés */
.controls-inner {
    background: transparent !important;
    padding: 10px 25px 20px 25px;
    border: none !important;
    box-shadow: none !important;
}

/* Zone du bouton pour ouvrir la playlist (le petit trait en haut du gris) */
.open-playlist-area {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    align-items: flex-end;
    z-index: 600;
    margin-top: -15px;
    margin-bottom: 2px;
    pointer-events: none;
}

/* Le titre du morceau */
.track-title-display {
    display: block;
    text-align: center;
    width: 100%;
    padding-top: -15px;
    padding-bottom: -15px;
    margin-top: -5px;        /* Éloigne le titre du haut (zone image) */
    margin-bottom: -10px;     /* Éloigne le titre de la barre de progression **/
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-color);
    border-radius: 8px; 
}

/* La barre de progression (Temps écoulé) */
.progress-bar-area {
    width: 100%;
    margin: 0px 0;
}

/* --- La barre de progression --- */
.progress-bar-wrapper {
    width: 100%;
    height: 6px;
    background: var(--progress-bg);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 10px;       /* Espace généreux avant les boutons du bas */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Petit creux pour le réalisme */
}

.progress-bar-fill {
    height: 100%;
    width: 0%;      /* Change dynamiquement via JS */
    background: var(--progress-fill);
    border-radius: 3px;
}

/* --- La ligne des temps --- */
.time-row {
    display: flex;
    justify-content: space-between;
    font-size: 9px;             /* Un peu plus petit pour le look pro */
    font-family: monospace;    /* Police type compteur digital */
    color: var(--accent-color);
    margin-bottom: 4px;        /* Espace avec la barre juste en dessous */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================================
   CHAPITRE 5 : LES BOUTONS (Structure 3 Colonnes & Design 3D)
   ========================================================================== */

/* 1. LE CONTENEUR GLOBAL (Grille EP-133) */

.center-complex {
    display: flex;
    align-items: center;
    gap: 8px; /* L'espace entre PREV, PLAY et NEXT */
    margin: -8px 8px; /* <--- AJOUTE CECI : Crée l'espace entre les carrés et les verticaux */
}

.ep-133-grid {
    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 0;
    width: 100%;
    padding: 10px 20px; /* 15px d'air sur les bords extérieurs */
    /* gap: 10px; */ 
    margin-bottom: -6px !important;
    background: transparent;
}

/* 1.1 REC/VID */

/* conteneur btn rec/vid */
.small-btns-row {
    width: 110px !important;    /* Largeur exacte du bouton PLAY au-dessus */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Pousse REC à gauche et VID à droite */
    align-items: center !important;
    margin: 0 auto !important;   /* Centre la ligne dans la pile */
}

/* Le mini-boîtier noir pour REC/VID */
.case-mini {
    flex: 0 0 50px !important; /* Pour qu'ils partagent la largeur équitablement */
    height: 18px; 
    width: 50px !important;
    background: #111;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}

/* Ajustement du bouton à l'intérieur */
.btn-mini {
    flex: 0 0 47px !important;
    width: 47px !important;  
    height: 15px !important;
    border-radius: 2px !important;
    border: none;
    cursor: pointer;
    font-size: 7px;
    font-weight: bold;
    /*background-color: #1a1a1a; */
    /* color: #888; */
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 4px;
    transition: all 0.2s ease;
}

.btn-mini.btn-rec {
    background-color: #2a0505 ; 
    color: #666 ;
}

/* Le style btn-bounce est maintenant dans la section BOUNCE plus bas */


/* 2. LES BOITIERS (CADRES NOIRS INCRUSTÉS) */

.case-square { 
    width: 40px !important;       /* Largeur fixe du cadre */
    height: 55px !important; 
    flex: 0 0 40px !important;    /* FORCE Flexbox à ne pas étirer (Grow: 0, Shrink: 0) */
    background: #111; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
    border-radius: 3px;
}

.case-vert   { 
    width: 40px;
    height: 55px;
    background: #111;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
}

.case-long   { 
    width: 50px;
    height: 55px;
    flex: 0 0 50px !important;
    background: black;
    border-radius: 3px;
    display: flex !important;
    /*background: transparent !important;*/
    align-items: center;
    border: none !important;
    justify-content: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
}

/* 3. LES TOUCHES (STYLE 3D RÉ-INJECTÉ) */
.ep-btn {
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.05s, box-shadow 0.05s;
}

/* Touches Carrées (Click & Loop) */
.btn-square { 
    width:  37px !important; height: 52px !important; border-radius: 6px; /*padding-top: 8px;*/
    min-width: 0 !important; 
    flex: none !important;
    /* On remet tes ombres ici */
    box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 8px, 
                inset 1.5px 1.5px 2px rgba(255,255,255,0.2); 
}

/* Touches Verticales (Prev & Next) */
.btn-vert { 
    width: 37px; height: 52px; border-radius: 6px; padding-top: 12px;
    box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 8px, 
                inset 1.5px 1.5px 2px rgba(255,255,255,0.2);
}

/* Touches Play & Stop */
.btn-long {
    width: 47px !important;
    height: 53px !important;
    border-radius: 6px;
    position: relative;
    border: none;
    background: #545252;
    cursor: pointer;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}

/* --- LE BOÎTIER DOUBLE (LIST + BOUNCE) --- */

/* On s'assure que la rangée du bas fait la même largeur que le bouton PLAY au dessus */

.small-btns-row {
    width: 110px !important; 
    display: flex !important;
    gap: 8px !important;
    margin: 0px auto !important; /* Un peu d'air au dessus et en dessous */
}

/* --- 1. ÉTAT ÉTEINT / BASIQUE --- */

/*#btn-bounce.is-disabled {
    background-color: #222 !important;
    cursor: not-allowed;
    pointer-events: none;
    border: none !important;
}*/


#stp-open-playlist .button_text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;    /* Plus petit que les autres boutons */
    font-weight: bold !important;    /* Un peu de poids pour la lisibilité en petite taille */
    letter-spacing: 0.5px !important; /* Très espacé pour le look "sérigraphie" */
    color: #1a0f1a !important;  /* Très foncé, presque noir */
    text-transform: uppercase !important;
    pointer-events: none;           /* Évite d'interférer avec le clic */
    
    /* Centrage parfait dans le bouton fin */
    display: block;
    line-height: 1;
    /*margin-top: 1px; */
}

#stp-open-playlist {
    background-color: #8a576f !important; /* vintage purple */
}

/* LE PURPLE GLOW FIXE */
#stp-open-playlist.active {
    background-color: #8422bd !important;
    box-shadow: 0 0 15px rgba(181,83, 255, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.5) !important;
    border-color: #c870fa ! important;
    animation: none !important;
    color: #ffffff !important; 
}

#stp-open-playlist.active .button_text,
#stp-open-playlist.active i {
    color: #ffffff !important;
}

/* Relief 3D Touches Carrées (Click & Loop) et Verticales (Prev & Next) */
.btn-square, .btn-vert { 
    /* --- AJOUT RELIEF UNIQUEMENT --- */
    border-top: 1px solid rgba(255,255,255,0.2) !important; /* Le reflet */
    border-bottom: 4px solid rgba(0,0,0,0.3) !important;    /* L'épaisseur */
    /* ------------------------------- */
    
    box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 8px, 
                inset 1.5px 1.5px 2px rgba(255,255,255,0.2); 
}

/* Correction de la netteté pour le bouton CLICK */
#stp-click-toggle.green-btn {
    /* On remplace la bordure transparente par une bordure opaque plus sombre */
    border-bottom: 4px solid #304d2d !important; 
    
    /* On resserre l'ombre externe (moins de flou, plus de force) */
    box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 8px, 
                inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.2) !important;
}

/* Relief 3D Touche Longue (Play) */
.btn-long { 
    /* --- AJOUT RELIEF UNIQUEMENT --- */
    border-top: 2px solid rgba(255,255,255,0.15) !important;
    border-bottom: 3px solid rgba(0,0,0,0.4) !important;
    /* ------------------------------- */

    box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 8px, 
                inset 1.5px 1.5px 2px rgba(255,255,255,0.1);
}

/* Animation de chargement sur le bouton Play */
#stp-play.is-loading {
    opacity: 0.5;
    pointer-events: none; /* Empêche de cliquer 10 fois pendant le chargement */
    animation: pulseLoading 1s infinite ease-in-out;
}

@keyframes pulseLoading {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); opacity: 0.3; }
    100% { transform: scale(1); }
}

/* 4. LES COULEURS (On garde tes réglages précis) */
.grey-btn   { background-color: #c7c3c0; }
.orange-btn { background-color: #d35400; }
.black-btn  { background-color: #545251; }
.green-btn  { background-color: #6b8e23; }

/* 5. BLOC CENTRAL & MINI BTNS */
.center-complex { display: flex; align-items: center; gap: 5px; }
.play-stack { display: flex; flex-direction: column; gap: 5px; align-items: center; }

/* --- Groupe Play/Stop spécifique --- */
.play-stop-group {
    display: flex;      /* Aligne en ligne */
    gap: 10px;           /* Espace entre Play et Stop */
    margin-bottom: 2px !important; /* Espace avec les boutons LIST/BOUNCE en dessous */
}

.small-btns-row { display: flex; gap: 8px; width: 110px; }

.btn-mini {
    flex: 1; height: 20px; border-radius: 6px; font-size: 7px; font-weight: bold; border: none; cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 4px;
}

/* 6. TEXTES & ETATS */
.button_text {
    font-size: 7px; color: rgba(255,255,255,0.7); text-transform: uppercase;
    font-weight: bold; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px;
}
.black-btn .button_text, .orange-btn .button_text, .green-btn .button_text { color: #eee; }
.grey-btn .button_text { color: #666; }
/* --- FIX : TEXTE STABLE ET NET AU CLIC --- */
.ep-btn:active, .btn-mini:active {
    /* On utilise translateY au lieu de scale pour ne pas déformer les lettres */
    transform: translateY(2px) !important; 
    
    /* On réduit l'épaisseur du bas pour simuler l'enfoncement */
    border-bottom-width: 1px !important;
    
    /* On s'assure que le texte ne change pas de graisse (force le rendu net) */
    -webkit-font-smoothing: antialiased;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5) !important;
}

/* Stabilisation du conteneur de texte */
.button_text {
    display: block !important;
    line-height: 1 !important; /* Force la hauteur de ligne pour éviter le décalage */
    pointer-events: none;      /* Empêche le curseur de considérer le texte comme un objet à part */
}
/* On cible les deux boutons carrés (CLICK et LOOP) */
#stp-click-toggle, 
#stp-loop {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important; /* Répartit l'espace en haut, au milieu et en bas */
    align-items: center !important;
    padding: 6px 0 !important; /* Un peu de padding interne pour décoller du bord du bouton */
}

/* On s'assure que les LED ont la même taille et ne flottent pas */
.click-led, 
.loop-led-status {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50%;
    background-color: #222; /* Couleur éteinte par défaut */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
    flex-shrink: 0; /* Empêche la LED de s'écraser */
}

/* --- Alignement des boutons verticaux (PREV / NEXT) --- */
.btn-vert {
    display: flex !important;
    flex-direction: column !important;
    /* On utilise le padding-top pour caler le texte à la même hauteur que CLICK */
    justify-content: flex-start !important; 
    padding-top: 6px !important; /* Ajuste ce chiffre (10px, 11px ou 12px) pour l'aligner à l'oeil sur CLICK */
    align-items: center !important;
}

/* On s'assure que le texte lui-même ne crée pas de décalage */
.btn-vert .button_text {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Recentrage spécifique pour le bouton PLAY */
#stp-play {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centre tout verticalement */
    align-items: center !important;
    padding-top: 8px !important; /* Ajuste selon tes préférences pour descendre le texte */
}

#stp-play .button_text {
    margin-bottom: 4px !important; /* Crée un petit espace entre le texte et la LED */
}

/* Recentrage spécifique pour le bouton STOP (identique à PLAY) */
#stp-stop {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 🔥 Centre comme PLAY */
    align-items: center !important;
    padding-top: 8px !important; /* 🔥 Même padding que PLAY */
}

#stp-stop .button_text {
    margin-bottom: 4px !important; /* 🔥 Même marge que PLAY */
}

/* ==========================================================================
   CHAPITRE 6 : BOUTONS SPÉCIAUX (Click & Loop)
   ========================================================================== */

/* --- LE MÉTRONOME (Click) --- */
/* Le bouton vert sans image de fond */
.green-btn {
    background-color: #6b8e23;
    background-image: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    padding-top: 8px;
    
    /* On garde l'ombre portée identique aux autres, 
       mais on nettoie les insets pour enlever le blanc/gris */
    box-shadow: rgba(0, 0, 0, 0.3) 6px 6px 8px, 
                inset 0 1px 1px rgba(255,255,255,0.2), /* Un micro reflet haut quasi invisible */
                inset 0 -2px 4px rgba(0,0,0,0.3);      /* Une ombre basse interne pour la base */
}

/* On s'assure que le texte est bien blanc et lisible sur le vert */
.green-btn .button_text {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-bottom: 2px;
    
}

/* --- LE LOOP (Boucle) --- */
.loop-btn {
    opacity: 1; 
    transition: opacity 0.2s, color 0.2s;
    position: relative;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Masquer les anciennes icônes si présentes */
.control-btn .icon {
    /* display: none; */ 
}

/* États du Loop (Rien, 1, Tout) */
.loop-btn[data-loop-state="none"] {
    color: var(--primary-color);
    background-image: url(https://cordesetbaguettes.com/wp-content/uploads/2025/12/loop-none-1.svg); 
}

.loop-btn[data-loop-state="one"] {
    color: var(--primary-color);
    background-image: url(https://cordesetbaguettes.com/wp-content/uploads/2025/12/loop-one.svg); 
    filter: drop-shadow(0 0 5px rgba(0, 150, 255, 0.6));
}

.loop-btn[data-loop-state="all"] {
    color: var(--primary-color);
    background-image: url(https://cordesetbaguettes.com/wp-content/uploads/2025/12/loop-all.svg);
    filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.6));
}

/* ==========================================================================
   CHAPITRE 7 : LES SLIDERS (Tempo & Volumes)
   Les 4 lignes de réglages en bas
   ========================================================================== */

/* --- LE CHEF D'ORCHESTRE (Force l'alignement en ligne) --- */
.tempo-controls-area, 
.volume-controls-area, 
.mixer-row {
    display: flex; 
    align-items: center;   /* Aligne verticalement au milieu */
    justify-content: space-between; 
    width: 100%;
    padding: 0px 20px;
    gap: 4px;             /* Espace entre label, slider et valeur */
    margin-bottom: 6px;   /* Espace entre chaque ligne de réglage */
    box-sizing: border-box;
    position: relative;
}

/* Espace entre le bloc boutons et le bloc réglages */
.tempo-controls-area {
    /*margin-top: -5px !important; */
    /*padding-top: -5px; */
}

/* 1. LE CONTENEUR (LA FENTE) */
.tempo-slider,
.volume-slider,
.mixer-slider {
    -webkit-appearance: none;
    flex-grow: 1;
    width: 100%; 
    height: 12px; /* Un peu plus large pour l'effet creusé */
    background: #8f8c8c; /* Couleur de la carrosserie */
    border-radius: 10px;
    padding: 2px; /* Crée l'espace pour la fente */
    cursor: pointer;
    outline: none;
}

/* 2. LA PISTE (L'INTÉRIEUR NOIR DU RAIL) */
.tempo-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #1a1a1a; /* Fond noir profond */
    border-radius: 50px;
    /* L'ombre magique qui crée le creux */
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 
                inset 0 -1px 1px rgba(255,255,255,0.2);
    border: 1px solid #333;
}

/* 3. LE BOUTON (LE DISQUE GRIS CLAIR) */
.tempo-slider::-webkit-slider-thumb,
.volume-slider::-webkit-slider-thumb,
.mixer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;           /* Taille du bouton */
    width: 12px;
    background: #e0e0e0;    /* Gris clair */
    border-radius: 50%;     /* Bien rond */
    
    /* LE BORD PLUS FONCÉ */
    border: 2px solid #8f8c8c; /* Épaisseur et couleur grise foncée */
    
    /* Ombre portée pour le relief */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    
    margin-top: -4px;      /* Pour le centrer verticalement dans le rail */ 
    cursor: grab;
    transition: all 0.1s ease;*/
}

/* Petit effet quand on attrape le bouton */
.tempo-slider:active::-webkit-slider-thumb,
.volume-slider:active::-webkit-slider-thumb,
.mixer-slider:active::-webkit-slider-thumb {
    background: #d0d0d0;    /* Devient un poil plus sombre au clic */
    cursor: grabbing;
}
/* Effet au clic (le bouton s'enfonce légèrement) */
.tempo-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(0.9);
    background: #f0f0f0;
}

/* Le texte à gauche (Label) */
/*.tempo-controls-area span:first-child, 
.volume-controls-area i,
.volume-controls-area span:first-child,
.mixer-row .control-label {
    flex: 0 0 45px !important;
    margin-right: 10px !important;
    font-size: 10px;
    text-transform: lowercase;
    color: var(--accent-color);
    letter-spacing: 1px;
    height: 20px;
}*/
.tempo-controls-area span:first-child, 
.volume-controls-area i,
.volume-controls-area span:first-child,
.mixer-row .control-label {
    /* Police identique aux boutons mais en version fine */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 7px !important;
    font-weight: bold !important;      /* Poids normal, pas de gras */
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important;    /* On augmente l'espace pour compenser la finesse */
    color: var(--primary-color);                  /* Un gris un peu plus doux */
    
    /* Alignement parfait */
    flex: 0 0 40px !important;       /* Un peu plus large pour laisser respirer l'espacement */
    display: flex;
    align-items: center;
    height: 20px;
    opacity: 0.8;                    /* Donne un aspect sérigraphié plus naturel */
}

/* Le texte à droite (La valeur, ex: 100%) */
.tempo-value, 
.volume-value,
.mixer-value {
    flex: 0 0 40px;
    text-align: right;
    font-size: 10px;
    font-family: monospace;
    color: var(--primary-color);
}

/* Fix pour Firefox */
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* ==========================================================================
   CHAPITRE 8 : LES MENUS DÉROULANTS (Overlays)
   Tout ce qui s'ouvre par dessus (Playlist, Infos, Outils)
   ========================================================================== */


/* --- 4. LES AUTRES MENUS (Info, Outils, Settings) --- */
/* Style commun */
.overlay-top {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    transform: translateY(-100%); /* Caché en haut */
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay-top.is-open {
    transform: translateY(0);
    visibility: visible;
}

/* Spécificités pour l'animation (Slide Gauche/Droite) */
#stp-info-overlay { transform: translateX(-100%); } /* Vient de gauche */
#stp-info-overlay.is-open { transform: translateX(0); }

#stp-settings-overlay { transform: translateX(100%); } /* Vient de droite */
#stp-settings-overlay.is-open { transform: translateX(0); }
 
/* ==========================================================================
    CHAPITRE 9 : PANNEAU DE CONTRÔLE TOP (Fente Unique)
========================================================================== */

.nav-top-bar-vertical {
 position: absolute;
 top: 7px;
 right: 7px;
 z-index: 2000;
}

/* LA GRANDE FENTE NOIRE UNIQUE */
.case-top-vertical {
 width: 28px;
 padding: 1px 1px; /* Espace en haut et en bas dans la fente */
 background: #000;
 border-radius: 2px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1px; /* Espace entre les boutons à l'intérieur du rail */
 box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
 border: 1px solid #222;
}

/* LE BOUTON (L'OBJET GRIS DANS LA FENTE) */
.btn-top-carre {
 width: 26px;
 height: 26px;
 background: #c7c3c0;
 border: none !important;
 border-radius: 4px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 box-shadow: 3px 3px 6px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,255,255,0.1);
 transition: transform 0.05s ease;
}

.inner-circle {
 width: 21px;
 height: 21px;
 background: linear-gradient(145deg, #d1d1d1, #c7c3c0);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 2px 2px 4px #000, -1px -1px 2px #555;
}

.inner-circle img {
 width: 12px !important;
 height: 12px !important;
 filter: none(1);
}

/* EFFET CLIC */
.btn-top-carre:active {
 transform: scale(0.95);
 box-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* ==========================================================================
   CHAPITRE 10 : CONTENU DES OUTILS (Accordeur & Métronome visuel)
   ========================================================================== */

/* Les onglets */
.tools-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    background: #eee;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 12px;
    transition: all 0.3s;
}

.tab-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Le contenu des onglets */
.tool-tab-content {
    display: none;
    width: 100%;
    text-align: center;
}

.tool-tab-content.active {
    display: block;
}

/* Styles Métronome Visuel */
#metronome-light {
    width: 20px;
    height: 20px;
    background: #ddd;
    border-radius: 50%;
    margin: 10px auto;
    transition: background 0.1s;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Styles Accordeur */
.tuner-gauge {
    position: relative;
    width: 200px;
    height: 100px;
    border: 2px solid #ddd;
    border-radius: 100px 100px 0 0;
    margin: 20px auto;
    overflow: hidden;
    background: #f9f9f9;
}

.tuner-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: 80px;
    background: #ff4444;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.1s ease-out;
}

.tuner-note {
    font-size: 40px;
    font-weight: bold;
    color: var(--primary-color);
}

/* ==========================================================================
   CHAPITRE 11 : LES INDICATEURS LUMINEUX (LEDs)
   ========================================================================== */

.led {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    margin-top: auto !important;
    margin-bottom: 4px !important;
    background-color: #1a1a1a !important; /* Éteint (Noir profond) */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease;
}

/* --- LED CLICK (FLUO INTENSE) --- */
#stp-click-toggle.active .click-led {
    background-color: #39ff14 !important;
    /* On augmente le rayon à 15px et l'opacité à 0.8 */
    box-shadow: 0 0 4px #fff, 
                0 0 10px #39ff14, 
                0 0 20px rgba(57, 255, 20, 0.8) !important;
}

/* --- LED LOOP (ORANGE CHAUD) --- */
[data-loop-state="one"] .loop-led-status {
    background-color: #ffea00 !important;
    box-shadow: 0 0 4px #fff, 0 0 10px #ffea00, 0 0 20px rgba(255, 234, 0, 0.8) !important;
}
[data-loop-state="all"] .loop-led-status {
    background-color: #ff6600 !important;
    box-shadow: 0 0 4px #fff, 0 0 10px #ff6600, 0 0 20px rgba(255, 102, 0, 0.8) !important;
}

/* --- LED PLAY (CYAN ÉLECTRIQUE) --- */
#stp-play.is-playing .play-led {
    background-color: #00d2ff !important;
    box-shadow: 0 0 4px #fff, 0 0 10px #00d2ff, 0 0 20px rgba(0, 210, 255, 0.8) !important;
}
/* État actif quand la musique joue */
#stp-play.is-playing .play-led {
    background-color: #00d2ff !important; /* Bleu Électrique / Cyan */
    box-shadow: 0 0 12px #00d2ff, 
                0 0 20px rgba(0, 210, 255, 0.4), 
                0 0 2px #ffffff inset !important;
}

/* --- ANIMATION POUR LE BOUTON STOP --- */

@keyframes blink-stop {
    0% { background-color: #1a1a1a !important; box-shadow: none !important; }
    50% { background-color: #ff4400 !important; /* Orange/Rouge TE */
        box-shadow: 0 0 12px #ff4400, 0 0 4px #fff !important; }
    100% { background-color: #1a1a1a !important; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5) !important; }
}

/* Cette classe est ajoutée par le JS pendant 300ms */
.stop-blink {
    animation: blink-stop 0.3s ease-out !important;
    display: block !important; /* Au cas où un display:none traîne */
}

--------------------------------------------------------
/* --- BOUTONS MINI (REC & VID) - LOGIQUE UNIFIÉE --- */
--------------------------------------------------------

/* 1. ÉTAT "NUIT" (Par défaut : éteints mais teintés) */
.btn-rec {
    background-color: #2a0505 !important; 
    color: #666 !important;            
    border: 1px solid #1a0202 !important;
    transition: all 0.2s ease;
}

.btn-vid {
    background-color: #05101a !important; 
    color: #666 !important;            
    border: 1px solid #02080f !important;
    transition: all 0.2s ease;
}

/* 2. ÉTAT "ARMÉ" (Clignotement d'attente) */

/* REC Armé : Clignote Rouge */
.btn-rec.rec-armed {
    animation: neon-blink-red 0.8s infinite ease-in-out !important;
}


/* VID Armé : Clignote Cyan (Prêt pour le futur) */
.btn-vid.vid-armed {
    animation: neon-blink-cyan 0.8s infinite ease-in-out !important;
}

/* 3. ÉTAT "ACTIF" (Allumage Fixe & Intense) */

/* REC Actif : Rouge Fixe (Enregistrement en cours) */
.btn-rec.active {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    /* La lueur (Glow) */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 
                inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
    border-color: #ff5555 !important;
    
    /* TRÈS IMPORTANT : On tue l'animation armed ici */
    animation: none !important; 
    opacity: 1 !important;
}

/* VID Actif : Cyan Fixe (Vidéo active) */
.btn-vid.active {
    background-color: #00d2ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.5) !important;
    border-color: #55e6ff !important;
    animation: none !important;
}

/* ========== BOUTON BOUNCE (Or/Gold) ========== */

/* 1. ÉTAT "INACTIF" (Sombre or, par défaut) */
#btn-bounce {
    background-color: #4a3c1a; 
    color: #b8902e;            
    border: 1px solid #2a2010;
    transition: all 0.2s ease;
}

/* 2. ÉTAT "BOUNCE-READY" (Le clignotement fluide) */
#btn-bounce.bounce-ready {
    /* On ne met PAS de background-color ici, l'animation s'en occupe */
    animation: neon-blink-gold 0.8s infinite ease-in-out !important;
    cursor: pointer;
}

/* 3. ÉTAT "BOUNCE-ACTIVE" (Or fixe pendant l'export) */

/* État actif pendant l'export */
#btn-bounce.bounce-active {
    background-color: #FFD700 !important; /* Ton Or actuel (fixe par défaut) */
    
    /* On ajoute le remplissage dynamique via un dégradé */
    background-image: linear-gradient(to right, 
        #FFD700 var(--progress, 100%), 
        #2a2a2a var(--progress, 100%)) !important;
        
    color: #000 !important;
    cursor: wait; /* Plus pro que le sens interdit */
    border-color: #FFA500 !important;
    transition: none !important; /* Pour une progression fluide sans lag */
}

/*#btn-bounce.bounce-active {
    background-color: #FFD700 !important;
    color: #000000 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 
                inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
    border-color: #FFA500 !important;
    animation: none !important; 
    opacity: 1 !important;
    cursor: not-allowed;
}*/

/* --- ANIMATION BOUNCE (Nettoyée) --- */
@keyframes neon-blink-gold {
    0%, 100% { 
        background-color: #4a3c1a; /* Couleur sombre */
        color: #b8902e;
        box-shadow: none;
        border-color: #2a2010;
    }
    50% { 
        background-color: #FFD700; /* Couleur Or vive */
        color: #000000;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); 
        border-color: #FFA500;
    }
}
@keyframes neon-blink-red {
    0%, 100% { 
        background-color: #2a0505; 
        color: #664444; 
        box-shadow: none; 
        border-color: #1a0202;
    }
    50% { 
        background-color: #ff0000; 
        color: #ffffff; 
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.7); 
        border-color: #ff5555;
    }
}

@keyframes neon-blink-cyan {
    0%, 100% { 
        background-color: #05101a; 
        color: #445566; 
        box-shadow: none; 
        border-color: #02080f;
    }
    50% { 
        background-color: #00d2ff; 
        color: #ffffff; 
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.7); 
        border-color: #55e6ff;
    }
}

/* ==========================================================================
   CHAPITRE 12 : LA PLAYLIST-OVERLAY (Structure, Titres et Vagues)
   ========================================================================== */

/* 1. Le fond de la playlist (L'écran qui monte) */
#playlist-overlay {
    position: absolute;
    bottom: 0;
    /*top: 46%;*/
    left: 0;
    width: 100%;
    height: 52%;
    background: transparent !important; 
    z-index: 9999;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex !important;
    flex-direction: column;
    transform: translateY(100%) !important; 
    opacity: 0 !important;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 2s ease-out !important;*/
}

/* Style de la barre de défilement (Chrome/Safari) */
#stp .playlist-list-scrollable::-webkit-scrollbar { width: 4px; }
#stp .playlist-list-scrollable::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 0px;
}

/* État quand la playlist est affichée */
#stp #playlist-overlay.is-open {
    transform: translateY(0) !important; /* Remonte fluidement */
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* Les Vagues du bas (Spécifiques à la Playlist) */
.visual-bottom {
    position: absolute;
    width: 100%;
    height: 100%; /* Doit faire 100% pour remplir tout le fond */
    top: 0; 
    left: 0;
    /*background: rgba(255, 255, 255, 0.1); /* Fond blanc très léger */
    z-index: 500; /* Derrière les titres */
    overflow: hidden;
    pointer-events: none;
    background: transparent; 
}

.visual-bottom::after {
    content: '';
    position: absolute;
    width: 150%; /* Plus large pour déborder */
    height: 100%;
    top: 0;
    left: -10%; /* Centré */
    background: white;
    z-index: -1;
    border-radius: 50% 50% 0 0 / 18% 18% 0 0; /* Arrondi fort */
    filter: blur(2px)
}

/* Couleur spécifique pour les vagues du bas (plus claires) */
.visual-bottom .wave {
    /*background: radial-gradient(
        hsl(var(--wave-color-base), 10%, 90%), 
        hsl(var(--wave-color-base), 20%, 80%)
    );*/
    /* Inversion de position pour qu'elles soient en bas */
    top: 15%; 
    margin-top: 0; 
    margin-left: -65%; 
    z-index: 1000; 
    animation: wave 30s infinite linear;
    opacity: 1;
}

/* Vitesses des vagues du bas */
.visual-bottom .wave:nth-child(1) { animation-duration: 35s; }
.visual-bottom .wave:nth-child(2) { animation-duration: 45s; }
.visual-bottom .wave:nth-child(3) { animation-duration: 65s; }

.playing .visual-bottom .wave:nth-child(1) { animation-duration: 15s; }
.playing .visual-bottom .wave:nth-child(2) { animation-duration: 20s; }
.playing .visual-bottom .wave:nth-child(3) { animation-duration: 30s; }

/* 2. La liste des morceaux (le conteneur du JS) */
.playlist-list-scrollable {
    list-style: none !important;
    margin: 50px 0 0 0 !important; /* Reset toutes les marges */
    margin-top: 100px;
    padding: 0 !important;
    width: 100% !important; /* PREND TOUTE LA LARGEUR */
    overflow-y: auto; /* Active le défilement */
    flex-grow: 1; /* Prend toute la place dispo */
    text-align: center;
    position: relative;
    z-index: 2002; /* Passe DEVANT les vagues */
}


/* Le style de chaque morceau */
.playlist-item, #stp-playlist-list li {
    display: block; /* FORCE LA LARGEUR TOTALE */
    width: 100% !important;    /* PREND TOUTE LA WIDTH */
    box-sizing: border-box; /* Évite que le padding ne fasse déborder */
    padding: 8px 20px;     /* Plus confortable pour cliquer */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: 14px;
    color: #ffffff !important; 
    /* transition: all 0.2s ease;*/
}

/* 3. SURVOL (Le rectangle blanc qui bouge) */
.playlist-item:hover, 
#stp-playlist-list li:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ==========================================================================
   CHAPITRE VU-METER : L'INTERFACE LED PROTOOLS (FIXED)
   ========================================================================== */

/* Le rail gris (carrosserie) */
.slider-rail-container {
    position: relative;
    flex: 1;                /* Pour s'étendre comme les autres */
    height: 12px;
    background: #8f8c8c;
    border-radius: 10px;
    margin: 0 5px;         /* Même marge que tes autres tempo-controls-area */
    display: flex;
    align-items: center;
    overflow: visible !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.vu-meter-bar {
    position: absolute;
    /* On laisse un petit espace de 2px en haut et en bas pour voir le gris autour */
    top: 3px;
    bottom: 3px;
    /* On décale de 2px des bords gauche et droit */
    left: 2px;
    right: 2px;
    
    background: #000000 !important;
    z-index: 1;
    overflow: hidden;
    
    /* On ajoute un arrondi pour épouser la forme du rail gris */
    border-radius: 4px; 
    
    /* Optionnel : une ombre interne pour l'effet "creusé" */
    /*box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);*/
    
    /*width: auto; /* Important pour que left/right fonctionnent ensemble */
}

.vu-meter-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; height: 100%; width: 100%;
    
    background: linear-gradient(to right, 
        #34704d 0%, #34704d 48%,
        #1fff26 48%, #1fff26 81%,
        #ffea00 81%, #ffea00 96%, 
        #ff3c00 96%, #ff3c00 100%
    );

    /* FILTRE : On évite le bleu, on reste sur du blanc pour le glow */
    filter: brightness(1.6) saturate(2.5) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    
    -webkit-mask-image: repeating-linear-gradient(
        to right, 
        black 0px, black 7.5px,       
        transparent 7.5px, transparent 8px 
    );

    clip-path: inset(0 calc(100% - var(--vu-width, 0%)) 0 0);
    transition: clip-path 0.05s ease-out;
    
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.7);
}

/* L'AURA D'AMBIANCE (Le "Glow" qui bave sur le fond noir) */
/* On l'applique sur le container pour simuler la lumière qui éclaire le rail */
.slider-rail-container::before {
    content: "";
    position: absolute;
    top: -5px;    /* On sort un peu vers le haut */
    bottom: -5px; /* On sort un peu vers le bas */
    left: 0;
    width: var(--vu-width, 0%);
    
    /* Dégradé de lueur qui suit tes couleurs PT (Vert/Jaune/Rouge) */
    background: linear-gradient(to right, 
        rgba(0, 255, 106, 0.4) 0%, 
        rgba(0, 255, 106, 0.4) 70%, 
        rgba(255, 234, 0, 0.4) 70%, 
        rgba(255, 234, 0, 0.4) 88%, 
        rgba(255, 60, 0, 0.5) 88%
    );
    
    filter: blur(10px); /* Le flou qui crée l'aura */
    opacity: 0.6;
    z-index: -1; /* Derrière le rail pour ne pas cacher les briques */
    pointer-events: none;
    transition: width 0.05s ease-out;
    display:;
}

/* 2. LA LUEUR EXTERNE (L'aura qui sort de la fente) */
.slider-rail-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--vu-width, 0%);
    
    /* On crée un dégradé flou qui suit la progression */
    background: linear-gradient(
        to right, 
        rgba(0, 255, 0, 0.3), 
        rgba(255, 234, 0, 0.3) 80%, 
        rgba(255, 60, 0, 0.5)
    );
    
    /* C'est ici qu'on règle l'étalement de la lueur */
    filter: blur(8px); 
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
    transition: width 0.05s ease-out;
}

/* Slider invisible (On ne garde que le bouton) */
.slider-rail-container .tempo-slider {
    position: relative;
    z-index: 2;
    width: 100% !important;
    background: transparent !important;
    margin: 0 !important;
    cursor: pointer;
}

.slider-rail-container .tempo-slider::-webkit-slider-runnable-track {
    background: transparent !important;
    border: none !important;
}

/* --- MODE LECTURE (Normal) --- */
#vu-record::after {
    /* Garde tes réglages par défaut (Vert/Jaune/Rouge) */
    transition: background 0.3s ease; 
}

/* --- MODE ENREGISTREMENT (Blue/Purple Neon) --- */
/* Si le bouton REC a la classe 'rec-active' ou 'rec-armed', on change le VU */
.btn-mini.btn-rec.rec-active ~ .sliders-container #vu-record::after,
.btn-mini.btn-rec.rec-armed ~ .sliders-container #vu-record::after,
.rec-mode-active #vu-record::after { 
    background: linear-gradient(to right,
    
        #2b0742 0%, #2b0742 48%,  /* Blue Neon */
        #9d00ff 48%, #ff00ff 81%,
        #00d4ff 81%, #00d4ff 96%,
        #ff3c00 96%, #ff3c00 100% /* Purple/Magenta */
    ) !important;
    
    filter: brightness(1.7) saturate(2.5) drop-shadow(0 0 5px rgba(0, 212, 255, 0.6)) !important;
}/*
Theme Name: Divi Enfant
Theme URI: https://cordesetbaguettes.com/
Description: Thème enfant pour Divi
Author: Matt Angeletti
Template: Divi
Version: 1.0
*/