/* ═══════════════════════════════════════════════════════════════════════════
   review.css  –  Avis / Reviews cards
   Two themes: .rv-style-dc  (Dien Chan)  and  .rv-style-cb  (Chan'beauté)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme: DC (Dien Chan) ─────────────────────────────────────────────── */
.rv-style-dc {
    --rv-primary:      #007ABC;
    --rv-accent:       #990033;
    --rv-badge-text:   #ffffff;
    --rv-btn-bg:       #007ABC;
    --rv-btn-text:     #ffffff;
}

/* ── Theme: CB (Chan'beauté) ───────────────────────────────────────────── */
.rv-style-cb {
    --rv-primary:      #C50F90;
    --rv-accent:       #CDDFF7;
    --rv-badge-text:   #C50F90;
    --rv-btn-bg:       #C50F90;
    --rv-btn-text:     #ffffff;
}

/* ── Body background per style (full-page mode only) ───────────────────── */
body.rv-style-dc { background-color: #cddff7; }
body.rv-style-cb { background-color: #e5d5db; }

/* ══════════════════════════════════════════════════════════════════════════
   CSS SCOPE ISOLATION
   Neutralise le CSS du site hôte (Bootstrap, reset, styles custom, etc.)
   quand review.php est inclus via PHP file_get_contents() + ?fragment=1.

   Technique correcte :
   1. all:initial  → coupe TOUTE l'héritage du parent (font, color, etc.)
      Les propriétés custom (--rv-*) sont exemptées par la spec CSS.
   2. Sélecteurs .rv-wrapper .rv-*  (spécificité 0,2,0)
      → l'emportent sur Bootstrap 0,0,1 (élément) et 0,1,0 (classe).
   ══════════════════════════════════════════════════════════════════════════ */

.rv-wrapper {
    all: initial;       /* coupe l'héritage + reset toutes les propriétés    */
    display: block;     /* all:initial force display:inline — on corrige      */

    /* ── Design tokens ─────────────────────────────────────────────────── */
    --rv-star-on:      #F5A623;
    --rv-star-off:     #d8d8d8;
    --rv-card-bg:      #ffffff;
    --rv-shadow:       0 2px 14px rgba(0, 0, 0, .09);
    --rv-shadow-hover: 0 5px 22px rgba(0, 0, 0, .16);
    --rv-text:         #222222;
    --rv-muted:        #888888;
    --rv-verified:     #2e7d32;
    --rv-radius:       .8rem;

    /* ── Layout ─────────────────────────────────────────────────────────── */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size:   16px;          /* base explicite pour les rem/em internes   */
    line-height: 1.5;
    color:       #222222;
    padding:     2.5rem 1.25rem;
    max-width:   1280px;
    margin:      0 auto;
    box-sizing:  border-box;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.rv-wrapper .rv-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    text-align: center;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--rv-primary);
    margin: 0 0 1.75rem;
    padding: 0;
    border: none;
    text-transform: none;
    letter-spacing: normal;
    box-sizing: border-box;
}

/* Aggregate rating summary (inline next to heading) */
.rv-wrapper .rv-aggregate {
    display: inline-flex;
    align-items: center;
    gap: .25rem .35rem;
    font-size: .88rem;
    font-weight: normal;
    color: var(--rv-muted);
    flex-wrap: wrap;
}

.rv-wrapper .rv-aggregate__stars {
    display: inline-flex;
    gap: .05em;
    font-size: 1rem;
}

.rv-wrapper .rv-aggregate__score {
    font-weight: 700;
    color: var(--rv-text);
    font-size: .95rem;
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.rv-wrapper .rv-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .45rem;
    margin: -.75rem 0 1.5rem;
    padding: 0;
    list-style: none;
    border: none;
}

.rv-wrapper .rv-filter-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1.5px solid #cccccc;
    color: var(--rv-muted);
    border-radius: 2em;
    padding: .28em 1em;
    font-size: .72rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
}

.rv-wrapper .rv-filter-btn:hover {
    color: var(--rv-primary);
    border-color: var(--rv-primary);
    text-decoration: none;
}

.rv-wrapper .rv-filter-btn--active {
    background: var(--rv-primary);
    border-color: var(--rv-primary);
    color: #ffffff;
}

/* ── Stars ─────────────────────────────────────────────────────────────── */
.rv-wrapper .rv-star--on  { color: var(--rv-star-on); }
.rv-wrapper .rv-star--off { color: var(--rv-star-off); }

/* ── Grid ──────────────────────────────────────────────────────────────── */
.rv-wrapper .rv-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
    box-sizing: border-box;
    border: none;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.rv-wrapper .rv-card {
    position: relative;
    background: var(--rv-card-bg);
    border-radius: var(--rv-radius);
    box-shadow: var(--rv-shadow);
    border-top: 3px solid var(--rv-primary);
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 1.4rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    transition: box-shadow .2s ease, transform .15s ease;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
}

.rv-wrapper .rv-card:hover {
    box-shadow: var(--rv-shadow-hover);
    transform: translateY(-2px);
}

/* ── Corner avatar / image ─────────────────────────────────────────────── */
.rv-wrapper .rv-card__corner {
    position: absolute;
    top: -1.1rem;
    left: 1.1rem;
}

.rv-wrapper .rv-card__img {
    width:  56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--rv-primary);
    background: #f0f0f0;
    display: block;
    max-width: none;    /* annule le max-width:100% de Bootstrap sur img */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.rv-wrapper .rv-card__avatar {
    width:  56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--rv-primary);
    background: var(--rv-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    box-sizing: border-box;
}

/* ── Stars row (leave room left for corner avatar) ────────────────────── */
.rv-wrapper .rv-card__stars {
    display: flex;
    gap: .05em;
    font-size: 1.2rem;
    line-height: 1;
    padding-left: 3.75rem;
    padding-top: .15rem;
    padding-right: 0;
    padding-bottom: 0;
}

/* ── Review title ──────────────────────────────────────────────────────── */
.rv-wrapper .rv-card__title {
    font-weight: 700;
    font-size: .97rem;
    color: var(--rv-primary);
    margin: 0;
    padding: 0;
    border: none;
    overflow-wrap: break-word;
    word-break: break-word;
    text-transform: none;
    letter-spacing: normal;
}

/* ── Review body (blockquote) ──────────────────────────────────────────── */
.rv-wrapper .rv-card__body {
    font-style: italic;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--rv-text);
    margin: 0;
    padding: 0;
    border: none;
    border-left: none;  /* annule le border-left des blockquote host CSS */
    background: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

.rv-wrapper .rv-card__body::before {
    content: '\201C';   /* " */
    font-size: 2rem;
    line-height: .35;
    vertical-align: -.45em;
    color: var(--rv-primary);
    opacity: .35;
    margin-right: .08em;
    font-style: normal;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.rv-wrapper .rv-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .45rem;
    margin-top: .35rem;
    padding-top: .6rem;
    border-top: 1px solid #eeeeee;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-size: .8rem;
    color: var(--rv-muted);
    background: none;
}

.rv-wrapper .rv-card__author {
    font-weight: 700;
    font-size: .84rem;
    color: var(--rv-text);
}

.rv-wrapper .rv-card__location::before,
.rv-wrapper .rv-card__date::before {
    content: '·\00a0';
}

/* ── Category badge ────────────────────────────────────────────────────── */
.rv-wrapper .rv-card__badge {
    display: inline-block;
    padding: .18em .6em;
    border-radius: 2em;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--rv-accent);
    color: var(--rv-badge-text);
    box-sizing: border-box;
    border: none;
    text-decoration: none;
}

/* DC: accent is dark red → white text (also covers fragment mode where
   .rv-style-dc is on .rv-wrapper itself) */
.rv-style-dc .rv-wrapper .rv-card__badge,
.rv-wrapper.rv-style-dc .rv-card__badge {
    color: #ffffff;
}

/* ── Verified purchase ─────────────────────────────────────────────────── */
.rv-wrapper .rv-card__verified {
    display: inline-flex;
    align-items: center;
    gap: .22em;
    color: var(--rv-verified);
    font-size: .77rem;
}

.rv-wrapper .rv-card__verified svg {
    flex-shrink: 0;
}

/* ── "See all" button ──────────────────────────────────────────────────── */
.rv-wrapper .rv-see-all-wrap {
    text-align: center;
    margin-top: .25rem;
    padding-bottom: 1rem;
}

.rv-wrapper .rv-see-all {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: var(--rv-btn-bg);
    color: var(--rv-btn-text);
    border: none;
    border-radius: 2em;
    padding: .7em 2.2em;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s ease, transform .12s ease;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
}

.rv-wrapper .rv-see-all:hover  { opacity: .86; transform: translateY(-2px); text-decoration: none; }
.rv-wrapper .rv-see-all:active { transform: translateY(0); }

.rv-wrapper .rv-see-all__count {
    opacity: .7;
    font-weight: 400;
    font-size: .85em;
}

/* ── Hidden cards & pop-in animation ───────────────────────────────────── */
.rv-wrapper .rv-card--hidden {
    display: none;
}

/*
 * rv-card--pop: zoom + translateY from slightly below center
 * --rv-delay is set per-card in JS for the stagger effect
 */
@keyframes rv-card-pop {
    from {
        opacity: 0;
        transform: scale(0.35) translateY(60px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.rv-wrapper .rv-card--pop {
    animation: rv-card-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
               var(--rv-delay, 0s) both;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.rv-wrapper .rv-empty {
    text-align: center;
    color: var(--rv-muted);
    font-style: italic;
    padding: 2.5rem 1rem;
}

/* ── Defensive reset: pseudo-elements du host (drop-cap, etc.) ─────────── */
/* p:first-of-type::first-letter du host = spécificité 0,1,1              */
/* .rv-wrapper p:first-of-type::first-letter = 0,2,1 → on gagne toujours  */
.rv-wrapper p::first-letter,
.rv-wrapper p:first-of-type::first-letter {
    float: none;
    font-size: 1em;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet: 2 columns minimum */
@media (min-width: 40em) {
    .rv-wrapper .rv-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Large screens: up to 3 columns */
@media (min-width: 60em) {
    .rv-wrapper .rv-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile: single column, smaller avatar */
@media (max-width: 39.99em) {
    .rv-wrapper .rv-grid {
        grid-template-columns: 1fr;
    }

    .rv-wrapper .rv-card__corner {
        top: -.9rem;
        left: .9rem;
    }

    .rv-wrapper .rv-card__img,
    .rv-wrapper .rv-card__avatar {
        width:  48px;
        height: 48px;
        font-size: 1.15rem;
    }

    .rv-wrapper .rv-card__stars {
        padding-left: 3.25rem;
        font-size: 1.05rem;
    }
}