/* ==========================================================================
   Lot 1.1.1 — Détail bien premium : hero unifié + galerie + badge qualité.
   Tokenisé STOP-3 : aucune valeur hex (tokens --re-* + rgba()).
   Classes non scopées (cohérent avec .real-ui-pcard / .real-ui-pill).
   ========================================================================== */

/* --- Hero (titre/specs/prix + galerie sur une seule colonne responsive) --- */
.real-ui-pdetail-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--re-space-xl);
    margin-bottom: var(--re-space-xl);
}

.real-ui-pdetail-summary {
    flex: 1 1 280px;
    min-width: 0;
}

.real-ui-pdetail-gallery {
    flex: 2 1 420px;
    min-width: 0;
}

/* Image principale */
.real-ui-pdetail-main {
    background: var(--re-bg-muted);
    border: 1px solid var(--re-border-soft);
    border-radius: var(--re-radius-lg);
    display: block;
    margin-bottom: var(--re-space-md);
    overflow: hidden;
    position: relative;
}

.real-ui-pdetail-main .tab-pane > img,
.real-ui-pdetail-main img {
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* Bandeau de vignettes */
.real-ui-pdetail-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--re-space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.real-ui-pdetail-thumb {
    border: 2px solid transparent;
    border-radius: var(--re-radius-md);
    cursor: pointer;
    flex: 0 0 auto;
    height: 64px;
    overflow: hidden;
    transition: border-color var(--re-motion-fast) var(--re-ease-out), transform var(--re-motion-fast) var(--re-ease-out);
    width: 84px;
}

.real-ui-pdetail-thumb:hover {
    border-color: var(--re-info);
    transform: translateY(-2px);
}

.real-ui-pdetail-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* « +N » sur la 4e vignette quand il reste des images */
.real-ui-pdetail-more {
    align-items: center;
    background: rgba(15, 23, 42, 0.55);
    border-radius: var(--re-radius-md);
    color: var(--re-text-inverse);
    display: flex;
    font-weight: 700;
    inset: 0;
    justify-content: center;
    position: absolute;
}

/* --- Badge qualité client (signal de confiance) --- */
.real-ui-qbadge {
    align-items: center;
    border: 1px solid var(--re-border-soft);
    border-radius: 999px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    margin-bottom: var(--re-space-md);
    padding: 6px 14px;
}

.real-ui-qbadge i {
    font-size: 15px;
}

.real-ui-qbadge--verified {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.22);
    color: var(--re-success);
}

.real-ui-qbadge--complete {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.22);
    color: var(--re-info);
}