/* =====================================================
   ENTÊTE DE L'EXERCICE
   ===================================================== */

.exo-entete {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 130px;
    align-items: center;

    gap: 22px;

    max-width: 850px;
    margin: 0 auto 28px;
}


/* =====================================================
   VIGNETTE
   ===================================================== */

.exo-entete-vignette {
    grid-column: 1;

    width: 130px;
    height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.exo-entete-vignette img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =====================================================
   ZONE CENTRALE
   ===================================================== */

.exo-entete-contenu {
    grid-column: 2;

    min-width: 0;

    text-align: center;
}

.exo-entete-contenu h1 {
    margin: 0 0 12px;

    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;

    color: #1e293b;
}


/* =====================================================
   CHAPITRES + NIVEAUX
   ===================================================== */

.exo-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;
}

.exo-chapitre {
    color: #2563eb;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}

.exo-chapitre:hover {
    text-decoration: underline;
}


/* Niveaux */

.exo-niveaux {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px;
}

.exo-niveau {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 9px;

    border-radius: 7px;

    background: #eff6ff;
    border: 1px solid #bfdbfe;

    color: #2563eb;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.exo-niveau:hover {
    background: #2563eb;
    color: #fff;

    transform: translateY(-1px);
}


/* =====================================================
   MESSAGE DE CONNEXION
   ===================================================== */

.exo-connexion {
    margin-top: 12px;

    font-size: 12px;
    font-weight: 600;

    color: #64748b;
}

.exo-connexion a {
    color: #2563eb;

    font-weight: 800;
    text-decoration: none;
}

.exo-connexion a:hover {
    text-decoration: underline;
}


/* =====================================================
   ZONE SCORE
   ===================================================== */

.exo-entete-score {
    grid-column: 3;

    width: 130px;
    height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =====================================================
   CERCLE
   ===================================================== */

.score {
    --progress: 0;

    position: relative;

    width: 130px;
    height: 130px;

    flex: 0 0 130px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ececec;

    isolation: isolate;
}


/* Progression circulaire */

.score::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--color, #22c55e)
            calc(var(--progress) * 1%),
            #ececec 0
        );

    animation: fill 1.2s ease forwards;
}


/* Centre blanc */

.score::after {
    content: "";

    position: absolute;
    inset: 8px;

    border-radius: 50%;

    background: #fff;

    z-index: 1;
}


/* =====================================================
   CONTENU DU CERCLE
   ===================================================== */

.score .inside {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

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

.score .value {
    position: relative;
    z-index: 2;

    font-size: 22px;
    line-height: 1;

    font-weight: 900;

    color: #334155;
}


/* =====================================================
   BADGE 100 %
   ===================================================== */

.score .badge {
    width: 24px;
    height: 24px;

    margin: 0 0 5px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #22c55e;
    color: #fff;

    font-size: 14px;
    font-weight: 900;

    animation: pop .5s .9s both;
}


/* =====================================================
   COULEURS DES SCORES
   ===================================================== */

.score-vide {
    --color: #cbd5e1;
}

.score-faible {
    --color: #fb923c;
}

.score-moyen {
    --color: #facc15;
}

.score-bon {
    --color: #84cc16;
}

.score-tres-bon {
    --color: #22c55e;
}

.score-excellent {
    --color: #eab308;
}


/* =====================================================
   HALO POUR LES BONS SCORES
   ===================================================== */

.score[style*="--value:9"],
.score[style*="--value:100"] {
    filter:
        drop-shadow(
            0 0 14px
            color-mix(
                in srgb,
                var(--color) 50%,
                transparent
            )
        );
}


/* =====================================================
   RAINBOW À 100 %
   ===================================================== */

.score.perfect::before {
    background:
        conic-gradient(
            red,
            orange,
            yellow,
            #00d95f,
            cyan,
            violet,
            red
        );

    animation:
        rainbow 1.2s linear,
        finalGreen .2s 1.2s forwards;
}


/* =====================================================
   ANIMATIONS
   ===================================================== */

@property --progress {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@keyframes fill {

    from {
        --progress: 0;
    }

    to {
        --progress: var(--value);
    }
}

@keyframes rainbow {

    to {
        transform: rotate(360deg);
    }
}

@keyframes finalGreen {

    to {
        background:
            conic-gradient(
                #22c55e 100%,
                #ececec 0
            );
    }
}

@keyframes pop {

    from {
        transform: scale(.3);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 600px) {

    .exo-entete {
        display: grid;

        grid-template-columns: 1fr 1fr;

        width: 100%;
        max-width: 100%;

        justify-content: stretch;

        row-gap: 14px;
        column-gap: 20px;

        margin-bottom: 24px;
    }

    /* =========================
       ZONE CENTRALE
       ========================= */

    .exo-entete-contenu {
        grid-column: 1 / -1;
        grid-row: 1;

        width: 100%;
        min-width: 0;

        text-align: center;
    }

    .exo-entete-contenu h1 {
        margin-bottom: 10px;
        font-size: 22px;
        line-height: 1.2;
    }


    /* =========================
       VIGNETTE
       ========================= */

    .exo-entete-vignette {
        grid-column: 1;
        grid-row: 2;

        justify-self: end;

        width: 110px;
        height: 110px;
    }


    /* =========================
       SCORE
       ========================= */

    .exo-entete-score {
        grid-column: 2;
        grid-row: 2;

        justify-self: start;

        width: 110px;
        height: 110px;
    }

    .score {
        width: 110px;
        height: 110px;
        flex-basis: 110px;
    }

    .score .value {
        font-size: 19px;
    }

    .score .badge {
        width: 21px;
        height: 21px;
        margin-bottom: 4px;
        font-size: 12px;
    }


    /* =========================
       META
       ========================= */

    .exo-meta {
        gap: 6px;
    }

    .exo-chapitre {
        font-size: 13px;
    }

    .exo-niveau {
        padding: 4px 8px;
        font-size: 11px;
    }

    .exo-connexion {
        margin-top: 10px;
        font-size: 11px;
    }
}