:root {
    --main-color: #007BFF;
    /* Bleu vif tech – couleur principale */
    --main-selected-color: #339CFF;
    /* Bleu plus clair pour le hover/actif */
    --shadow-color: rgba(0, 123, 255, 0.3);
    /* Ombre douce bleutée */
    --selected-color: rgb(245, 250, 255);
    /* Blanc bleuté très léger */
    /* --main-color: #ff7200;
    --main-selected-color: #ff7d13;
    --shadow-color: rgba(255, 166, 0, 0.705);
    --selected-color: rgb(255, 252, 246); */
    --reduct-price: rgb(175, 175, 175);
}

p,
h3,
h4 {
    margin: 0;
}

.product-page {
    display: flex;
    justify-content: center;

    width: 100%;
}

.products-pp {
    display: flex;
    flex-direction: row;
    padding: 40px;
    width: 100%;
    max-width: 1050px;
    gap: 30px;
    justify-content: space-between;
}

.product-img-pp {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-page-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-page-info-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-title-pp {
    font-size: 30px;
}

.product-description-pp {
    color: #7c7c7c;
}

.product-page-info-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
}

.pc-components-pp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    color: #7c7c7c;
    font-size: 15px;
}

.product-price-pp {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
}

.price-pp {
    font-size: 30px;
    font-weight: bold;
    color: var(--main-color);
}

.old-price-pp {
    font-size: 30px;
    font-weight: bold;
    color: var(--reduct-price);
    font-weight: lighter;
    text-decoration: line-through;
}

.button-pp {
    background: var(--main-color);
    color: white;
    border: none;
    padding: 15px;
    /* margin: 10px 20px 0px 20px; */
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
}

.button-pp:hover {
    background: var(--main-selected-color);
}

.compnents-list-pp {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.compnents-list-pp-zoulou {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 1050px;
}

.section-title h2 span {
    color: var(--main-color);
}

.compnents-list-pp-djany {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1050px;
    min-height: 88px;
}

.compnents-list-pp-djany-component {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 17px;
    min-height: 68px;
}

.compnents-list-pp-djany-component img {
    width: 60px;
}

.cta-amazon-btn {
    /* background-color: orange; */
    border: 1px solid var(--shadow-color);
    width: 250px;
    padding: 35px 20px 35px 20px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-amazon-btn:hover {
    /* background-color: orange; */
    border: 1px solid var(--shadow-color);
    color: black;
    background-color: var(--selected-color);
}

.component-price-pp {
    font-size: 25px;
    font-weight: bold;
    color: var(--main-color);
    margin-right: 20px;
}

.component-div-price-pp {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.component-oldprice-price-pp {
    font-size: 20px;
    font-weight: bold;
    color: var(--reduct-price);
    font-weight: lighter;
    text-decoration: line-through;
    margin-right: 20px;
}

.compnents-list-pp-djany-component-description {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 550px;
}

/* Responsive : version mobile */
@media (max-width: 768px) {
    .products-pp {
        flex-direction: column;
        padding: 20px;
    }

    .compnents-list-pp {
        padding: 20px;
        box-sizing: border-box;
    }

    .compnents-list-pp-djany {
        flex-direction: column;
        /* Le bouton Amazon passe en dessous du composant */
        align-items: stretch;
        gap: 10px;
    }

    .compnents-list-pp-djany-component {
        flex-direction: row;
        flex-wrap: wrap;
        /* Si le texte est long, il va se couper à la ligne */
        justify-content: flex-start;
        gap: 10px;
        padding: 10px;
    }

    .compnents-list-pp-djany-component img {
        width: 50px;
        flex-shrink: 0;
    }

    .compnents-list-pp-djany-component-description {
        flex-direction: column;
        /* Nom + modèle l’un sous l’autre */
        min-width: unset;
        /* On supprime la largeur fixe */
        flex: 1;
        /* Prend tout l’espace restant */
    }

    .component-div-price-pp {
        flex-direction: column;
        /* Prix + ancien prix côte à côte */
        align-items: center;
        min-width: unset;
        gap: 8px;
    }

    .component-price-pp {
        font-size: 18px;
        margin: 0;
    }

    .component-oldprice-price-pp {
        font-size: 15px;
        margin: 0;
    }

    .cta-amazon-btn {
        width: 100%;
        /* Le bouton prend toute la largeur dispo */
        padding: 15px;
        font-size: 16px;
    }

    .compnents-list-pp,
    .compnents-list-pp-djany,
    .cta-amazon-btn,
    .compnents-list-pp-djany-component {
        max-width: 100%;
        box-sizing: border-box;
        /* padding + border comptés dans la largeur */
    }

}