/* 
 * DOCUMENTATION JP — CSS RÉORGANISÉ
 * ----------------------------------------------------------
 * Fichier : assets/css/jp-qualites.css
 * Rôle : Section Qualités.
 *
 * Lecture conseillée :
 * 1. fondations et structure du composant ;
 * 2. éléments internes et états ;
 * 3. adaptations responsive et compatibilité.
 *
 * IMPORTANT : l'ordre de cascade est volontairement préservé lorsqu'un déplacement
 * pourrait modifier le rendu. Les doublons retirés sont uniquement ceux dont une
 * déclaration strictement identique existe plus loin dans le même contexte CSS.
  */

/* * FICHIER CSS RÉORGANISÉ
 * Fichier : assets/css/jp-qualites.css
 * Rôle : Styles du composant ou du module indiqué par le nom du fichier.
 *
 * Organisation :
 * 1. Styles de base du module
 * 2. États et interactions
 * 3. Adaptations responsives, dans l’ordre du fichier d’origine
 *
 * Maintenance : l’ordre des règles est conservé afin de respecter la cascade CSS.
 * Les doublons strictement identiques dans un même bloc ont été supprimés. */

/* *
 * jp-qualites.css
 * Rôle : Module Qualités.
 *
 * Organisation du fichier :
 * 1. Variables et fondations éventuelles
 * 2. Structure principale du composant
 * 3. États, variantes et interactions
 * 4. Adaptations responsives
 *
 * Les doublons strictement identiques ont été supprimés. Les surcharges
 * volontaires et les fallbacks compatibles ont été conservés pour ne pas
 * modifier le rendu ou le comportement existant. */

/* =========================================================
   QUALITÉS : barres de progression
   ========================================================= */

/* Ligne d’une qualité */

.jp-quality {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 14px;
        align-items: center;
        margin-bottom: 18px;
}

/*  CIBLE — Qualités : .jp-quality:last-child  */

.jp-quality:last-child {
        margin-bottom: 20px;
}

/* Icône de qualité */

.jp-quality-icon {
        width: 40px;
        height: 40px;
        background: var(--jp-main);
        -webkit-mask: var(--icon) center / contain no-repeat;
        mask: var(--icon) center / contain no-repeat;
}

/* Texte et barre de la qualité */

.jp-quality-content {
        min-width: 0;
}

/* Ligne titre + pourcentage */

.jp-quality-top {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        font-size: 13px;
        font-weight: 900;
        margin-bottom: 8px;
}

/*  CIBLE — Icônes : .jp-quality-no-icon  */

.jp-quality-no-icon {
        grid-template-columns: 1fr;
}

/*  CIBLE — Icônes : .jp-quality-no-icon .jp-quality-content  */

.jp-quality-no-icon .jp-quality-content {
        grid-column: 1;
}

/* Rail de la barre de progression */

.jp-bar {
        height: 12px;
        background: #e8edf4;
        border-radius: 999px;
        overflow: hidden;
}

/* Barre de progression animée par JavaScript */

.jp-bar span {
        display: block;
        height: 100%;
        background: var(--jp-main);
        width: 0 !important;
        transition: width 1.4s ease-out;
}

/*  CIBLE — Composant : .jp-bar span.jp-bar-visible  */

.jp-bar span.jp-bar-visible {
        width: var(--jp-width) !important;
}