/*
    Homepage progress summary (compProgressSummary): counter, gauge, radar chart and section list.
    Exclusive <details name="pd"> + :has() to highlight the radar icon; a radar icon click toggles its section (progress-summary_controller.js).
*/

@keyframes pd-in {
    from {
        opacity: 0;
        translate: 0 -0.4rem;
    }
}

/* ========== Summary ========== */

.pd {
    margin-top: 2.4rem;
    container-type: inline-size;
    text-align: left;
    line-height: 1.4;

    & summary {
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }

        &:focus-visible {
            outline: 2px solid var(--blue-light);
            outline-offset: 2px;
        }
    }

    & ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & li {
        margin: 0;
    }
}

.pd-num {
    font-family: var(--font-title);
    font-size: 11rem;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--gradient-blue), var(--gradient-violet));
    background-clip: text;
    color: transparent;
}

.pd-count {
    display: flex;
    align-items: flex-end;
    gap: 1.6rem;
    text-align: left;
}

.pd-side {
    padding-bottom: 0.4rem;
    color: var(--grey-blue-dark);
    font-size: 1.5rem;
    line-height: 1.35;
}

.pd-side-total {
    color: var(--blue-dark);
    font-family: var(--font-title);
    font-size: 2.8rem;
    font-weight: 700;
}

/* Two stacked copies of the label: dark on the white track, white on the gradient fill clipped to --p % */
.pd-gauge {
    display: grid;
    width: 100%;
    max-width: 36rem;
    height: 2.4rem;
    color: var(--blue-dark);
    background-color: #fff;
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 99px;
    box-shadow: inset 0 1px 3px rgb(10 44 98 / 15%);
    overflow: hidden;

    & span {
        display: grid;
        place-items: center;
        grid-area: 1 / 1;
    }

    & span + span {
        color: #fff;
        background: linear-gradient(90deg, var(--gradient-blue), var(--gradient-violet));
        clip-path: inset(0 calc((100 - var(--p)) * 1%) 0 0 round 99px);
    }
}

.pd-body {
    display: grid;
    grid-template-columns: 26rem 1fr;
    align-items: center;
    gap: 2.4rem;
    margin-top: 3.2rem;
}

/* ---------- Radar ---------- */

.pd-chart {
    padding: 1.4rem;
}

/* Reference box of the icons: --x / --y are % of the SVG viewBox */
.pd-plot {
    position: relative;
    margin: 1.2rem;

    & svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }
}

.pd-grad-from {
    stop-color: var(--gradient-blue);
}

.pd-grad-to {
    stop-color: var(--gradient-violet);
}

.pd-grid {
    fill: none;
    stroke: #9fb0c8;
    stroke-width: 1;
}

.pd-shape {
    fill: url(#pd-grad);
    fill-opacity: 0.28;
    stroke: url(#pd-grad);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.pd-guest .pd-shape {
    fill: #94a3b8;
    fill-opacity: 0.12;
    stroke: #94a3b8;
    stroke-dasharray: 5 4;
}

.pd-sample {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.2rem 0.9rem;
    color: var(--grey-dark);
    background-color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 99px;
    box-shadow: var(--shadow);
    translate: -50% -50%;
}

.pd-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--c);
    background-color: color-mix(in srgb, var(--c) 12%, #fff);
    border-radius: 0.9rem;
    transition: color 0.15s ease, background-color 0.15s ease, scale 0.2s ease;

    & svg {
        width: 1.9rem;
        height: 1.9rem;
    }
}

.pd-tip {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: 3rem;
    height: 3rem;
    color: #fff;
    background-color: var(--c);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--c) 70%, transparent);
    translate: -50% -50%;
    padding: 0;
    cursor: pointer;

    & svg {
        width: 1.6rem;
        height: 1.6rem;
    }
}

/* One selector per enSection case */
.pd:has(details[data-s="algebre"][open]) .pd-tip[data-s="algebre"],
.pd:has(details[data-s="arithmetique"][open]) .pd-tip[data-s="arithmetique"],
.pd:has(details[data-s="geometrie"][open]) .pd-tip[data-s="geometrie"],
.pd:has(details[data-s="probabilite"][open]) .pd-tip[data-s="probabilite"],
.pd:has(details[data-s="statistique"][open]) .pd-tip[data-s="statistique"],
.pd:has(details[data-s="technologie"][open]) .pd-tip[data-s="technologie"] {
    scale: 1.25;
}

/* ---------- Section list ---------- */

.pd-item {
    border-bottom: 1px solid #c9d3e3;

    &:first-child {
        border-top: 2px solid var(--blue-dark);
    }

    & summary {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        padding: 1.1rem 0.2rem;
    }

    &:is([open], :hover) .pd-name {
        color: var(--c);
    }

    &:is([open], :hover) .pd-icon {
        color: #fff;
        background-color: var(--c);
    }
}

.pd-name {
    color: var(--blue-dark);
    font-family: var(--font-title);
    font-size: 1.9rem;
    font-weight: 700;
    transition: color 0.15s ease;
}

.pd-leader {
    flex: 1;
    min-width: 1rem;
    border-bottom: 2px dotted #c9d3e3;
}

.pd-val {
    color: var(--blue-dark);
    font-family: var(--font-title);
    font-size: 1.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;

    & span {
        color: var(--grey-dark);
        font-size: 1.4rem;
        font-weight: 500;
    }
}

.pd .pd-chapters {
    padding: 0 0 1.6rem 4.4rem;
    animation: pd-in 0.25s ease;

    & li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 0;
        font-size: 1.45rem;
        background:
            linear-gradient(var(--c), var(--c)) no-repeat left bottom / calc(var(--p) * 1%) 2px,
            linear-gradient(#dbe3ef, #dbe3ef) no-repeat left bottom / 100% 2px;
    }
}

.pd-ch-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@container (max-width: 560px) {
    .pd-body {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .pd-chart {
        width: 100%;
        max-width: 26rem;
        margin: 0 auto;
    }
}

@container (max-width: 480px) {
    .pd-num {
        font-size: 8rem;
    }

    .pd-item summary {
        gap: 0.8rem;
    }

    .pd-name {
        font-size: 1.7rem;
    }

    .pd .pd-chapters {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd *,
    .pd *::before,
    .pd *::after {
        animation: none !important;
        transition: none !important;
    }
}