/* =====================================================
   Fiche Critique — CSS avec variables Astra
   Design moderne inspiré de hero-cinematique et tableau-comparatif
   ===================================================== */

/* Variables Astra utilisées :
   --ast-body-font-size       : taille de base du corps
   --ast-body-line-height     : hauteur de ligne
   font-family: inherit       : reprend la fonte Astra automatiquement
*/

.critique,
.critique * {
    box-sizing: border-box;
}

.critique {
    font-family: inherit;
    line-height: var(--ast-body-line-height, 1.6);
    color: #1a1a2e;
    border: 1px solid #000000;
}

/* =====================================================
   GRID LAYOUT
   ===================================================== */

.critique-grid {
    display: flex;
    gap: 32px;
    margin-bottom: 0;
    align-items: stretch;
}

.critique-image-col {
    flex: 0 0 auto;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.critique-points-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* =====================================================
   IMAGE PRODUIT
   ===================================================== */

.critique-image-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 100%;
}

.ao-fiche-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin-top: 20px;
}

/* Badge meilleur qualité/prix */
.tc-best-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    font-size: calc(var(--ast-body-font-size, 15px) * 0.7);
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 3px;
    background: #FFD166;
    color: #111827;
    margin: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* =====================================================
   POINTS FORTS / FAIBLES
   ===================================================== */

.points-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    background-color: #f4f6f8;
    padding: 24px;
    flex: 1;
}

.points-forts-box,
.points-faibles-box {
    flex: 1;
    min-width: 280px;
    padding: 0;
}

.points-forts-box {
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e6f0;
}

.points-faibles-box {
    padding-top: 20px;
}

.points-forts-box h3,
.points-faibles-box h3 {
    font-size: var(--ast-body-font-size, 15px);
    font-weight: 700;
    margin: 0 0 20px 0;
    letter-spacing: 0.02em;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

.points-forts-box h3 {
    color: #1a1a2e;
}

.points-faibles-box h3 {
    color: #1a1a2e;
}

.point-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 10px;
}

.point-item:last-child {
    margin-bottom: 0;
}

.point-item .icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.point-item.positive .icon svg {
    display: none;
}

.point-item.positive .icon::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #007bff;
    border-radius: 50%;
}

.point-item.negative .icon svg {
    display: none;
}

.point-item.negative .icon::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #007bff;
    border-radius: 50%;
}

.point-item span {
    font-size: var(--ast-body-font-size, 15px);
    line-height: var(--ast-body-line-height, 1.6);
    color: #1a1a2e;
    font-family: inherit;
}

/* =====================================================
   AMAZON PRICE BOX
   ===================================================== */

.amazon-price-box {
    background-color: #0a1014;
    padding: 24px;
    margin: 0;
}

.amazon-header {
    margin-bottom: 20px;
}

.amazon-header p {
    color: #ffffff;
    font-size: var(--ast-body-font-size, 15px);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.02em;
    font-family: inherit;
    text-align: center;
}

.amazon-price-box h3 {
    color: #ffffff;
    font-size: var(--ast-body-font-size, 15px);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.02em;
    font-family: inherit;
    text-align: center;
}

/* =====================================================
   AMAZON ACHAT ITEMS
   ===================================================== */

.amazon-achat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #ffffff;
    cursor: pointer;
}

.amazon-achat-item:hover {
}

.amazon-achat-item:last-child {
    border-bottom: none;
}

.amazon-achat-left {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}

.amazon-achat-custom {
    font-weight: 700;
    font-size: var(--ast-body-font-size, 15px);
    color: #0069e3;
    white-space: nowrap;
    font-family: inherit;
}

.amazon-link-title {
    font-size: var(--ast-body-font-size, 15px);
    color: #ffffff;
    font-family: inherit;
    line-height: var(--ast-body-line-height, 1.6);
}

.amazon-achat-item:hover .amazon-link-title,
.amazon-achat-item:hover .amazon-achat-price {
    text-decoration: underline;
}

.amazon-achat-price {
    font-weight: 700;
    font-size: var(--ast-body-font-size, 15px);
    color: #007bff;
    white-space: nowrap;
    text-align: right;
    font-family: inherit;
}

.amazon-price-box.has-badge .amazon-achat-price {
    color: #FFD166;
}

.amazon-achat-price[style*="color: #f0ad4e"] {
color: #f0ad4e;
font-style: italic;
}

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

@media (max-width: 768px) {
.critique-grid {
flex-direction: column;
gap: 24px;
margin-bottom: 24px;
}
    
    .critique-image-col {
        max-width: 100%;
        width: 100%;
    }

    .critique-points-col {
        width: 100%;
        min-width: 100%;
    }
    
    .points-container {
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 16px;
    }

    .points-forts-box,
    .points-faibles-box {
        padding: 0;
        min-width: 100%;
        flex: none;
        width: 100%;
        margin: 0;
    }

    .points-forts-box {
        padding-bottom: 16px;
    }

    .points-faibles-box {
        padding-top: 16px;
    }
    
    .amazon-price-box {
        padding: 16px;
        margin: 0;
    }
    
    .amazon-price-box h3 {
        font-size: var(--ast-body-font-size, 15px);
    }
    
    .amazon-achat-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0;
    }
    
    .amazon-achat-left {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 10px;
    }
    
    .amazon-achat-custom,
    .amazon-link-title,
    .amazon-achat-price {
        width: 100%;
    }
    
    .amazon-achat-price {
        text-align: left;
    }
}