/* ============================================================
   Lingorama – Carrousel Avis Google
   Style : cards drop-shadow, identique Trustindex style 5
   ============================================================ */

/* ----- Variables ----------------------------------------- */
.lgr-wrapper {
    --lgr-primary:      #4285F4;
    --lgr-star:         #F4B400;
    --lgr-text:         #3c4043;
    --lgr-muted:        #70757a;
    --lgr-bg:           #ffffff;
    --lgr-border:       #e8eaed;
    --lgr-radius:       12px;
    --lgr-shadow:       0 2px 10px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    --lgr-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family:        var(--lgr-font);
    color:              var(--lgr-text);
    max-width:          100%;
    box-sizing:         border-box;
}
.lgr-wrapper *, .lgr-wrapper *::before, .lgr-wrapper *::after {
    box-sizing: inherit;
}

/* ----- Header -------------------------------------------- */
.lgr-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    padding:         16px 4px 20px;
}
.lgr-header__brand {
    display:     flex;
    align-items: center;
    gap:         12px;
}
.lgr-header__logo {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--lgr-border);
    flex-shrink:   0;
}
.lgr-header__meta {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.lgr-header__name {
    font-size:   15px;
    font-weight: 600;
    color:       var(--lgr-text);
    line-height: 1.2;
}
.lgr-header__rating {
    display:     flex;
    align-items: center;
    gap:         6px;
}
.lgr-header__score {
    font-size:   16px;
    font-weight: 700;
    color:       var(--lgr-text);
}
.lgr-header__count {
    font-size: 13px;
    color:     var(--lgr-muted);
}
.lgr-header__actions {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.lgr-btn-write {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          8px 16px;
    background:       var(--lgr-primary);
    color:            #fff !important;
    border-radius:    8px;
    font-size:        13px;
    font-weight:      500;
    text-decoration:  none;
    transition:       background .2s, transform .15s;
    white-space:      nowrap;
}
.lgr-btn-write:hover {
    background:  #3367d6;
    transform:   translateY(-1px);
}
.lgr-btn-write svg {
    width:  15px;
    height: 15px;
    flex-shrink: 0;
}
.lgr-google-badge {
    display:    flex;
    align-items: center;
}
.lgr-google-badge svg {
    width:  28px;
    height: 28px;
}

/* ----- Étoiles ------------------------------------------- */
.lgr-stars {
    display:     inline-flex;
    align-items: center;
    gap:         1px;
}
.lgr-star {
    width:  18px;
    height: 18px;
    flex-shrink: 0;
}
.lgr-star--full  { fill: var(--lgr-star); color: var(--lgr-star); }
.lgr-star--half  { fill: none; color: var(--lgr-star); }
.lgr-star--empty { fill: #e0e0e0; color: #e0e0e0; }

/* En-tête : étoiles plus grandes */
.lgr-header__rating .lgr-star { width: 20px; height: 20px; }

/* ----- Carousel ------------------------------------------ */
.lgr-carousel {
    position: relative;
    display:  flex;
    align-items: center;
    gap: 8px;
}
.lgr-track-outer {
    overflow:  hidden;
    flex:      1;
    min-width: 0;
}
.lgr-track {
    display:            flex;
    gap:                16px;
    transition:         transform .45s cubic-bezier(.25,.46,.45,.94);
    will-change:        transform;
}

/* ----- Card ---------------------------------------------- */
.lgr-card {
    background:    var(--lgr-bg);
    border:        1px solid var(--lgr-border);
    border-radius: var(--lgr-radius);
    box-shadow:    var(--lgr-shadow);
    padding:       20px;
    flex:          0 0 calc(33.333% - 11px);
    min-width:     260px;
    display:       flex;
    flex-direction: column;
    gap:            12px;
    transition:    transform .2s, box-shadow .2s;
}
.lgr-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.1);
}

.lgr-card__top {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.lgr-card__avatar {
    width:         42px;
    height:        42px;
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
}
.lgr-card__avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.lgr-avatar-initials {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           42px;
    height:          42px;
    border-radius:   50%;
    color:           #fff;
    font-size:       16px;
    font-weight:     600;
}
.lgr-card__meta {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.lgr-card__name {
    font-size:     14px;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.lgr-card__date {
    font-size: 12px;
    color:     var(--lgr-muted);
}
.lgr-card__google svg {
    width:  22px;
    height: 22px;
    opacity: .85;
    transition: opacity .2s;
}
.lgr-card__google:hover svg { opacity: 1; }

.lgr-card__text {
    font-size:   14px;
    line-height: 1.55;
    color:       var(--lgr-text);
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.lgr-card__reply {
    background:    #f8f9fa;
    border-left:   3px solid var(--lgr-primary);
    border-radius: 0 6px 6px 0;
    padding:       10px 12px;
    font-size:     13px;
    color:         var(--lgr-muted);
}
.lgr-card__reply p {
    margin: 4px 0 0;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.lgr-card__reply-label {
    font-weight: 600;
    font-size:   12px;
    color:       var(--lgr-primary);
    display:     block;
}

/* ----- Arrows -------------------------------------------- */
.lgr-arrow {
    width:            38px;
    height:           38px;
    border-radius:    50%;
    border:           1px solid var(--lgr-border);
    background:       var(--lgr-bg);
    box-shadow:       0 1px 4px rgba(0,0,0,.12);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    flex-shrink:      0;
    transition:       background .2s, box-shadow .2s, opacity .2s;
    padding:          0;
    z-index:          2;
}
.lgr-arrow:hover {
    background:  #f1f3f4;
    box-shadow:  0 3px 8px rgba(0,0,0,.18);
}
.lgr-arrow:disabled { opacity: .3; cursor: default; }
.lgr-arrow svg {
    width:  18px;
    height: 18px;
    stroke: var(--lgr-text);
}

/* ----- Dots ---------------------------------------------- */
.lgr-dots {
    display:         flex;
    justify-content: center;
    gap:             6px;
    margin-top:      16px;
}
.lgr-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    border:        none;
    background:    var(--lgr-border);
    padding:       0;
    cursor:        pointer;
    transition:    background .25s, transform .25s;
}
.lgr-dot--active {
    background:    var(--lgr-primary);
    transform:     scale(1.3);
}

/* ----- Footer -------------------------------------------- */
.lgr-footer {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      14px;
    font-size:       12px;
    color:           var(--lgr-muted);
}
.lgr-footer__google {
    width:  18px;
    height: 18px;
}
.lgr-footer strong { color: var(--lgr-text); }

/* ----- Empty --------------------------------------------- */
.lgr-empty { text-align: center; color: var(--lgr-muted); padding: 24px; }

/* ----- Responsive ---------------------------------------- */
@media (max-width: 900px) {
    .lgr-card { flex-basis: calc(50% - 8px); }
}
@media (max-width: 580px) {
    .lgr-card { flex-basis: calc(100% - 0px); min-width: 0; }
    .lgr-header { flex-direction: column; align-items: flex-start; }
    .lgr-arrow { width: 32px; height: 32px; }
    .lgr-btn-write { font-size: 12px; padding: 7px 12px; }
}