/* ==================================================
   RESET
   ================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f5f5f5;

    color: #222;

}


/* ==================================================
   HEADER
   ================================================== */

header {

    padding:
        45px 20px;

    text-align: center;

    background: #111;

    color: white;

}


header h1 {

    margin:
        0 0 10px;

    font-size: 32px;

}


header p {

    margin: 0;

    color: #aaa;

}


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

.container {

    width:
        min(
            1200px,
            calc(100% - 40px)
        );

    margin:
        40px auto;

}


/* ==================================================
   PRODUCTS
   ================================================== */

.products {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap: 24px;

}


.product-card {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.08
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.product-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 24px
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.product-card a {

    display: block;

    color: inherit;

    text-decoration: none;

}


.product-image {

    width: 100%;

    height: 220px;

    background: #eee;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}


.no-image {

    color: #999;

    font-size: 14px;

}


.product-content {

    padding: 18px;

}


.product-content h2 {

    margin:
        0 0 12px;

    font-size: 18px;

    line-height: 1.4;

}


.price {

    margin: 0;

    font-size: 20px;

    font-weight: bold;

    color: #111;

}


/* ==================================================
   HISTORY
   ================================================== */

.history {

    margin-top: 60px;

    background: white;

    border-radius: 16px;

    padding: 30px;

    box-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.history > h2 {

    margin:
        0 0 12px;

    font-size: 24px;

}


.history-description {

    margin:
        0 0 25px;

    color: #777;

    font-size: 14px;

}


/* ==================================================
   LÉGENDE
   ================================================== */

.chart-legend {

    display: flex;

    flex-wrap: wrap;

    gap:
        12px 24px;

    margin-bottom: 25px;

    padding:
        15px 18px;

    background: #f8f8f8;

    border-radius: 10px;

}


.legend-item {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

}


.legend-color {

    width: 12px;

    height: 12px;

    flex:
        0 0 12px;

    border-radius: 50%;

}


/*
   Couleurs du graphique.
   Le Python attribue une classe chart-color-N
   à chaque produit.
*/

.chart-color-0 {
    background: #0078ff;
}

.chart-color-1 {
    background: #e63946;
}

.chart-color-2 {
    background: #2a9d8f;
}

.chart-color-3 {
    background: #f4a261;
}

.chart-color-4 {
    background: #9b5de5;
}

.chart-color-5 {
    background: #ff006e;
}

.chart-color-6 {
    background: #06a77d;
}

.chart-color-7 {
    background: #f77f00;
}

.chart-color-8 {
    background: #457b9d;
}

.chart-color-9 {
    background: #8338ec;
}

.chart-color-10 {
    background: #3a86ff;
}

.chart-color-11 {
    background: #fb5607;
}

.chart-color-12 {
    background: #43aa8b;
}

.chart-color-13 {
    background: #577590;
}

.chart-color-14 {
    background: #ef476f;
}

.chart-color-15 {
    background: #118ab2;
}

.chart-color-16 {
    background: #06d6a0;
}

.chart-color-17 {
    background: #7209b7;
}

.chart-color-18 {
    background: #f72585;
}

.chart-color-19 {
    background: #4cc9f0;
}


/* ==================================================
   LEGEND TITLES
   ================================================== */

.legend-title {

    font-size: 13px;

    color: #444;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 300px;

}


/* ==================================================
   GRAPHIQUE
   ================================================== */

.chart-wrapper {

    width: 100%;

    overflow-x: auto;

}


.price-chart {

    display: block;

    width: 100%;

    min-width: 700px;

    height: auto;

}


.grid-line {

    stroke: #eeeeee;

    stroke-width: 1;

}


.axis-line {

    stroke: #cccccc;

    stroke-width: 1;

}


.axis-label {

    fill: #777;

    font-size: 12px;

}


.date-label {

    font-size: 11px;

}


.chart-line {

    fill: none;

    stroke-width: 3;

    stroke-linejoin: round;

    stroke-linecap: round;

}


.chart-point {

    fill: white;

    stroke-width: 2;

}


/*
   Couleurs SVG.
   Ces classes remplacent les anciens
   style="stroke: ...".
*/

.chart-line.chart-color-0,
.chart-point.chart-color-0 {
    stroke: #0078ff;
}

.chart-line.chart-color-1,
.chart-point.chart-color-1 {
    stroke: #e63946;
}

.chart-line.chart-color-2,
.chart-point.chart-color-2 {
    stroke: #2a9d8f;
}

.chart-line.chart-color-3,
.chart-point.chart-color-3 {
    stroke: #f4a261;
}

.chart-line.chart-color-4,
.chart-point.chart-color-4 {
    stroke: #9b5de5;
}

.chart-line.chart-color-5,
.chart-point.chart-color-5 {
    stroke: #ff006e;
}

.chart-line.chart-color-6,
.chart-point.chart-color-6 {
    stroke: #06a77d;
}

.chart-line.chart-color-7,
.chart-point.chart-color-7 {
    stroke: #f77f00;
}

.chart-line.chart-color-8,
.chart-point.chart-color-8 {
    stroke: #457b9d;
}

.chart-line.chart-color-9,
.chart-point.chart-color-9 {
    stroke: #8338ec;
}

.chart-line.chart-color-10,
.chart-point.chart-color-10 {
    stroke: #3a86ff;
}

.chart-line.chart-color-11,
.chart-point.chart-color-11 {
    stroke: #fb5607;
}

.chart-line.chart-color-12,
.chart-point.chart-color-12 {
    stroke: #43aa8b;
}

.chart-line.chart-color-13,
.chart-point.chart-color-13 {
    stroke: #577590;
}

.chart-line.chart-color-14,
.chart-point.chart-color-14 {
    stroke: #ef476f;
}

.chart-line.chart-color-15,
.chart-point.chart-color-15 {
    stroke: #118ab2;
}

.chart-line.chart-color-16,
.chart-point.chart-color-16 {
    stroke: #06d6a0;
}

.chart-line.chart-color-17,
.chart-point.chart-color-17 {
    stroke: #7209b7;
}

.chart-line.chart-color-18,
.chart-point.chart-color-18 {
    stroke: #f72585;
}

.chart-line.chart-color-19,
.chart-point.chart-color-19 {
    stroke: #4cc9f0;
}


/* ==================================================
   EMPTY
   ================================================== */

.empty,
.empty-history {

    text-align: center;

    padding:
        60px 20px;

    color: #777;

}


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

@media (max-width: 600px) {

    header {

        padding:
            30px 15px;

    }


    header h1 {

        font-size: 26px;

    }


    .container {

        width:
            calc(100% - 24px);

        margin:
            24px auto;

    }


    .products {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;

    }


    .product-image {

        height: 160px;

    }


    .product-content {

        padding: 12px;

    }


    .product-content h2 {

        font-size: 15px;

    }


    .price {

        font-size: 17px;

    }


    .history {

        margin-top: 35px;

        padding: 18px;

    }


    .history > h2 {

        font-size: 20px;

    }


    .chart-legend {

        flex-direction:
            column;

        gap: 10px;

    }


    .legend-title {

        max-width: 250px;

    }


    .price-chart {

        min-width: 650px;

    }

}