/* =========================================================
   PERCENTAGE HERO
========================================================= */

.percentage-hero {

    --hero-primary: #687483;
    --hero-primary-dark: #465363;
    --hero-text: #537358;
    --hero-border: #687483;

    width: 100%;

    box-sizing: border-box;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


/* =========================================================
   COULEUR BARRE : ROUGE
   0% → 24%
========================================================= */

.percentage-hero--red {

    --bar-primary: #dc3545;
    --bar-primary-dark: #b02a37;
}


/* =========================================================
   COULEUR BARRE : ORANGE
   25% → 49%
========================================================= */

.percentage-hero--orange {

    --bar-primary: #f39c12;
    --bar-primary-dark: #c77d0a;
}


/* =========================================================
   COULEUR BARRE : VERT
   50% → 74%
========================================================= */

.percentage-hero--green {

    --bar-primary: #198754;
    --bar-primary-dark: #146c43;
}


/* =========================================================
   COULEUR BARRE : VERT FONCÉ
   75% → 100%
========================================================= */

.percentage-hero--dark-green {

    --bar-primary: #146c43;
    --bar-primary-dark: #0b4d2f;
}


/* =========================================================
   ICON DOT
========================================================= */

.icon-dot {

    display: block;

    width: 8px;
    height: 8px;

    background: currentColor;

    border-radius: 50%;
}


/* =========================================================
   CARD
========================================================= */

.percentage-hero__content {

    margin-top: 20px;

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 110px;

    padding: 20px 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid rgba(90, 100, 110, 0.18);

    border-radius: 12px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.06);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* =========================================================
   LIGNE DÉCORATIVE SUPÉRIEURE
   RESTE BLEUE
========================================================= */

.percentage-hero__content::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(79, 140, 255, 0.45),
            transparent);
}


/* =========================================================
   EFFET LUMINEUX DE FOND
========================================================= */

.percentage-hero__content::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -150px;
    top: -150px;

    border-radius: 50%;

    background: rgba(79, 140, 255, 0.05);

    filter: blur(20px);

    pointer-events: none;
}


/* =========================================================
   HOVER
========================================================= */

.percentage-hero__content:hover {

    transform: translateY(-2px);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   ICON
   RESTE VERTE
========================================================= */

.percentage-hero__icon {

    flex: 0 0 auto;

    display: flex;

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

    margin-right: 14px;
}


.percentage-hero__icon-circle {

    display: flex;

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

    width: 17px;
    height: 17px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #007a2d,
            #004015);

    border-radius: 50%;

    box-shadow:
        0 4px 12px rgba(70, 80, 90, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.percentage-hero__content:hover .percentage-hero__icon-circle {

    transform:
        scale(1.06) rotate(-4deg);

    box-shadow:
        0 6px 16px rgba(70, 80, 90, 0.28);
}


/* =========================================================
   TEXT
   RESTE IDENTIQUE
========================================================= */

.percentage-hero__text {

    position: relative;

    z-index: 2;

    flex: 1 1 auto;

    padding-right: 35px;

    color: var(--hero-text);

    font-size: 16px;

    line-height: 1.7;

    font-weight: 400;

    letter-spacing: -0.01em;
}


.percentage-hero__text strong {

    color: #465363;

    font-weight: 700;
}


/* =========================================================
   POURCENTAGE DANS LE TEXTE
   RESTE GRIS
========================================================= */

.hero-percentage-text {

    position: relative;

    display: inline-block;

    color: #3f4c5a;

    font-weight: 700;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   SOULIGNEMENT DU POURCENTAGE
   RESTE BLEU
========================================================= */

.hero-percentage-text::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(90deg,
            #4f8cff,
            #76a9ff);

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.3s ease;
}


.percentage-hero__content:hover .hero-percentage-text::after {

    transform: scaleX(1);
}


/* =========================================================
   CONTAINER BARRE
========================================================= */

.percentage-hero__progress {

    position: relative;

    z-index: 2;

    flex: 0 0 48%;

    min-width: 280px;

    max-width: 800px;
}


/* =========================================================
   TRACK
========================================================= */

.percentage-hero__track {

    position: relative;

    width: 100%;

    height: 26px;

    background: #eeeeee;

    border-radius: 4px;

    overflow: hidden;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   BARRE REMPLIE
   SEULE CETTE PARTIE CHANGE DE COULEUR
========================================================= */

.percentage-hero__fill {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: 0;

    height: 100%;

    border-radius: 3px;

    background:
        linear-gradient(90deg,
            var(--bar-primary-dark) 0%,
            var(--bar-primary) 50%,
            var(--bar-primary-dark) 100%);

    box-shadow:
        0 0 12px rgba(80, 95, 110, 0.20);

    animation:
        percentageFill 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


/* =========================================================
   ANIMATION REMPLISSAGE
========================================================= */

@keyframes percentageFill {

    0% {
        width: 0;

        opacity: 0.5;
    }

    60% {
        opacity: 1;
    }

    100% {
        width: var(--percentage);

        opacity: 1;
    }
}


/* =========================================================
   SHINE
   RESTE BLANC
========================================================= */

.percentage-hero__shine {

    position: absolute;

    top: 0;
    bottom: 0;

    left: -100px;

    width: 70px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.40),
            transparent);

    transform: skewX(-20deg);

    animation:
        percentageShine 2.5s ease-in-out 1.2s infinite;
}


@keyframes percentageShine {

    0% {
        left: -100px;
    }

    45%,
    100% {
        left: calc(100% + 100px);
    }
}


/* =========================================================
   GLOW
========================================================= */

.percentage-hero__glow {

    position: absolute;

    top: 0;
    right: 0;

    width: 35px;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.18));

    filter: blur(3px);
}


/* =========================================================
   VALEUR DANS LA BARRE
========================================================= */

.percentage-hero__value {

    position: relative;

    z-index: 5;

    display: block;

    padding: 0 10px;

    color: #ffffff;

    font-size: 13px;

    line-height: 26px;

    font-weight: 700;

    white-space: nowrap;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.20);

    animation:
        percentageValue 0.8s ease 1.1s both;
}


@keyframes percentageValue {

    from {

        opacity: 0;

        transform:
            translateX(6px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .percentage-hero__content {

        padding: 20px;
    }


    .percentage-hero__text {

        font-size: 15px;

        padding-right: 20px;
    }


    .percentage-hero__progress {

        flex-basis: 42%;

        min-width: 230px;
    }
}


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

@media (max-width: 768px) {

    .percentage-hero__content {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

        min-height: auto;

        padding: 20px;
    }


    .percentage-hero__icon {

        justify-content: flex-start;

        margin-right: 0;
    }


    .percentage-hero__text {

        padding-right: 0;

        font-size: 15px;

        line-height: 1.65;
    }


    .percentage-hero__progress {

        width: 100%;

        min-width: 0;

        max-width: none;

        flex: none;
    }


    .percentage-hero__track {

        height: 24px;
    }


    .percentage-hero__value {

        line-height: 24px;

        font-size: 12px;
    }
}


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

@media (max-width: 480px) {

    .percentage-hero__content {

        padding: 17px;

        border-radius: 10px;
    }


    .percentage-hero__icon-circle {

        width: 32px;

        height: 32px;
    }


    .percentage-hero__text {

        font-size: 14px;
    }


    .percentage-hero__track {

        height: 22px;
    }


    .percentage-hero__value {

        line-height: 22px;

        font-size: 11px;
    }
}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .percentage-hero__fill,
    .percentage-hero__shine,
    .percentage-hero__value {

        animation: none;
    }


    .percentage-hero__fill {

        width: var(--percentage);
    }


    .percentage-hero__content,
    .percentage-hero__icon-circle {

        transition: none;
    }
}