@charset "utf-8";

:root {
    --ps-col-0: #74AFFF; --ps-col-1: #4E8EF2; --ps-col-2: #2662CD;
    --ps-col-3: #184AB5; --ps-col-4: #173796; --ps-col-5: #6A4CBA;
    --ps-col-6: #7F3098; --ps-col-7: #CB3D75; --ps-col-8: #C63155;
    --ps-col-9: #A3112F; --ps-col-10: #7C0016;
}

.ps-container {
    max-width: 80%;
    margin: 50px auto;
    font-family: sans-serif;
    position: relative;
    user-select: none;
    font-family: "Nunito", Arial, "sans-serif";
}

.ps-track-wrapper {
    position: relative;
    height: 35px;
    background: #ddd;
    border-radius: 20px;
    margin-bottom: 150px; 
    -webkit-box-shadow:inset 0 3px 6px 0 rgba(0,0,0,0.53);
    box-shadow:inset 0 3px 6px 0 rgba(0,0,0,0.53);
}

.ps-track-fill {
    position: absolute;
    left: 0; 
    top: 0; 
    height: 100%;
    width: 0%; 
    border-radius: 20px;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}
.ps-track-gradient {
    position: absolute;
    left: 0;
    top: 0 !important;
    height: 100%;
    width: 100%; 
    min-width: 100%; /* Force une largeur pour que le dégradé ne se compresse pas */
    background: linear-gradient(90deg, 
        var(--ps-col-0) 0%,   var(--ps-col-1) 10%,  var(--ps-col-2) 20%, 
        var(--ps-col-3) 30%,  var(--ps-col-4) 40%,  var(--ps-col-5) 50%, 
        var(--ps-col-6) 60%,  var(--ps-col-7) 70%,  var(--ps-col-8) 80%, 
        var(--ps-col-9) 90%,  var(--ps-col-10) 100%
    ) !important;
    border-radius: 20px;
    -webkit-box-shadow:inset 0 3px 6px 0 rgba(0,0,0,0.53);
    box-shadow:inset 0 3px 6px 0 rgba(0,0,0,0.53);
}
.ps-points {
    display: flex !important;
    justify-content: space-between !important;
    position: absolute;
    width: calc(100% + 45px) !important; 
    left: -22.5px !important; 
    top: 80px;
}

.ps-step-dot {
    position: relative;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,0.35);
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.35);
    cursor: pointer;
    font-weight: 500;
    font-family: 'Volte', Arial, "sans-serif";
}
.ps-step-dot::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0,0,0,0.35);
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.35);
    top: -10px;
    left: -10px;
    z-index: -1;
}
.ps-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ps-handle::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    background: #F4F0F2;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}
.ps-handle-play-svg {
    position: relative;
    width: 40px; /* Taille ajustée pour tenir dans le cercle */
    height: 40px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
    overflow: visible;
    margin-left: 2px; /* Centrage optique du triangle */
    animation: ps-pulse 3s ease-in-out infinite;
    transform-origin: center center;
}

.ps-svg-bg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 12; /* "Gonfle" le triangle blanc pour créer l'arrondi et la bordure */
    stroke-linejoin: round;
}

.ps-svg-fill {
    /* Utilise la variable ou un fallback si le JS n'a pas encore chargé */
    fill: var(--ps-color, #74AFFF); 
    stroke: var(--ps-color, #74AFFF);
    stroke-width: 4; /* Arrondit l'intérieur */
    stroke-linejoin: round;
    transition: fill 0.3s ease, stroke 0.3s ease;
}
@keyframes ps-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; } /* Grossit légèrement et s'estompe */
    100% { transform: scale(1); opacity: 1; }
}
.ps-tooltip-area {
    background: #d84167;
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    min-height: 100px;
    position: relative;
}

.ps-floating-tooltip {
    position: absolute;
    top: 210px;
    left: 0;
    width: 300px;
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    transform: translateX(-50%);
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    pointer-events: none;
    background: var(--ps-color, #d84167);
    transition: background 0.3s ease;
    border: solid 3px #fff;
}

.ps-arrow-up {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-arrow-up::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.ps-arrow-up::after {
    content: '';
    position: absolute;
    width: calc(100% - 6px); 
    height: calc(100% - 3px);
    bottom: 0;
    background-color: var(--ps-color, #d84167);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transition: background-color 0.3s ease;
}

.ps-title { 
    margin: 0 0 8px 0; 
    text-transform: uppercase; 
    font-size: 16px; 
    font-weight: 800; 
    line-height: 1.2;
}

h4.ps-title  {
    color: #fff;
}

.ps-desc { 
    margin: 0; 
    font-size: 14px; 
    line-height: 1.4; 
}


@media (max-width: 768px) {
    /* 1. Le rail gris (Référentiel fixe) */
    .ps-track-wrapper {
        height: 500px;
        width: 40px;
        position: relative;
        margin: 50px auto 120px 25%; /* Ajusté selon ton dernier CSS */
        overflow: visible; /* Indispensable pour voir le curseur et la bulle */
        border-radius: 20px;
        background: #ddd;
        box-shadow: inset 0 3px 6px rgba(0,0,0,0.3);
        touch-action: none; /* Améliore la réactivité tactile */
    }

    /* 2. Le masque mobile (La fenêtre qui monte) */
    .ps-track-fill {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0%; /* Piloté par le JS */
        overflow: hidden; /* COUPE le dégradé qui est à l'intérieur */
        border-radius: 20px;
        z-index: 2;
        transition: none !important;
    }

    /* 3. Le dégradé (Compensé par le JS pour rester fixe) */
    .ps-track-gradient {
        position: absolute;
        top: 0 !important; /* Ancré en haut du masque pour la compensation */
        left: 0;
        width: 100% !important;
        height: 500px !important; /* Doit faire la taille totale du rail gris */
        background: linear-gradient(0deg, 
            var(--ps-col-0) 0%,   var(--ps-col-1) 10%,  var(--ps-col-2) 20%, 
            var(--ps-col-3) 30%,  var(--ps-col-4) 40%,  var(--ps-col-5) 50%, 
            var(--ps-col-6) 60%,  var(--ps-col-7) 70%,  var(--ps-col-8) 80%, 
            var(--ps-col-9) 90%,  var(--ps-col-10) 100%
        ) !important;
        transform-origin: top left;
    }

    /* 4. Alignement des points (00 à 10) */
    .ps-points {
        display: flex !important;
        flex-direction: column-reverse !important;
        justify-content: space-between !important;
        height: 520px !important;
        position: absolute !important;
        left: -65px !important;
        top: -10px !important;
        width: 40px !important;
        z-index: 5;
    }

    .ps-step-dot {
        margin: 0 auto !important;
        width: 30px !important;
        height: 30px !important;
    }
    .ps-step-dot::before {
        width: 40px;
        height: 40px;
        top: -5px;
        left: -5px;
    }
    /* 5. Le Curseur (Bouton Play) - FIX POSITION */
    .ps-handle {
        width: 70px;
        height: 70px;
        z-index: 10;
        margin: 0 !important;
        /* Le transform est géré dans le JS pour le centrage parfait */
    }

    /* 6. L'infobulle (Tooltip) */
    .ps-floating-tooltip {
        width: 240px;
        position: absolute;
        left: 85px !important;
        z-index: 100;
        /* Le transform est géré dans le JS pour le centrage parfait */
    }

    /* 7. La flèche de l'infobulle */
    .ps-arrow-up {
        top: 50% !important;
        left: -24px !important;
        transform: translateY(-50%) rotate(-90deg) !important;
    }
}
@media (max-width: 480px) {
    .ps-track-wrapper {
        margin: 50px auto 120px 12%;
    }
    .ps-floating-tooltip {
        width: 180px;
        padding: 10px;
    }
}

/*----------------------------*/
/*      [pain-scale]          */
/*----------------------------*/

.pain-scale-wrapper {
    width: 100%;
    max-width: 1080px;
    margin: 2em auto;
    display: flex;
    flex-direction: column;
    gap: 1em; /* Espace entre les blocs */
}

.pain-scale-item {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--item-color);
    border-radius: 1.5em;
    padding: 1em 2em 1em 3em; /* Padding gauche large pour laisser place au numéro */
    color: #fff;
    margin-left: 30px; /* Laisse de la place pour le dépassement du numéro */
}

/* Le conteneur du numéro qui chevauche */
.pain-scale-number-wrap {
    position: absolute;
    left: -20px; /* Chevauchement vers la gauche */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}


.pain-scale-content {
    padding: 0.5em 0;
    flex: 1;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pain-scale-content p {
    padding-bottom: 0 !important;
}
.pain-scale-title {
    margin: 0 0 0.15em 0;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1em;
    line-height: 1.05em;
    color: #fff;
}

.pain-scale-desc {
    margin: 0;
    font-size: 1em;
    line-height: 1.25;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 600px) {
    .pain-scale-item {
        padding: 15px 25px 15px 45px;
        border-radius: 1em;
    }
    .pain-scale-dot {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}