/* ===== Tatou Google Rating — Public ===== */

/* Wrapper centrage */
.tgr-wrapper { display: block; width: 100%; }
.tgr-align-center { text-align: center; }
.tgr-align-left   { text-align: left; }
.tgr-align-right  { text-align: right; }

/* Widget base : inline-flex pour rester auto-width */
.tgr-widget {
    color: #202124;
    display: inline-flex;
    font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}
.tgr-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
}

/* ================================================
   THÈMES
================================================ */

/* -- Google blanc -- */
.tgr-theme-google {
    background: #ffffff !important;
    border: 1px solid #e8eaed;
    color: #202124 !important;
}
.tgr-theme-google::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4285F4 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%);
}

/* -- Dark -- */
.tgr-theme-dark {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    background-color: #1a1a2e !important; /* fallback si dégradé ignoré */
    border: 1px solid rgba(255,255,255,.07) !important;
    color: #ffffff !important;
}
.tgr-theme-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4285F4, #34A853);
}

/* -- Dark : forcer toutes les couleurs de texte -- */
.tgr-theme-dark .tgr-score,
.tgr-theme-dark .tgr-count-big,
.tgr-theme-dark .tgr-count-sub,
.tgr-theme-dark .tgr-label,
.tgr-theme-dark .tgr-score-label,
.tgr-theme-dark .tgr-rect-right .tgr-score { color: #ffffff !important; }

/* -- CTA bouton rect hover thèmes clairs : texte blanc sur fond bleu -- */
.tgr-theme-google .tgr-cta-rect:hover,
.tgr-theme-white  .tgr-cta-rect:hover {
    background-color: #1a73e8 !important;
    color: #ffffff !important;
    border-color: #1a73e8 !important;
}

/* -- Google blanc : forcer toutes les couleurs de texte -- */
.tgr-theme-google .tgr-score,
.tgr-theme-google .tgr-count-big,
.tgr-theme-google .tgr-count-sub,
.tgr-theme-google .tgr-rect-right .tgr-score { color: #202124 !important; }
.tgr-theme-google .tgr-label,
.tgr-theme-google .tgr-score-label { color: #5f6368 !important; }
.tgr-theme-google .tgr-cta { color: #4285F4 !important; }
.tgr-theme-google .tgr-cta-rect:not(:hover) { color: #4285F4 !important; }

/* -- Épuré -- */
.tgr-theme-white {
    background: #f8f9fa !important;
    border: 1px solid #dadce0;
    color: #202124 !important;
}
/* Forcer toutes les couleurs de texte pour le thème épuré */
.tgr-theme-white .tgr-score,
.tgr-theme-white .tgr-count-big,
.tgr-theme-white .tgr-count-sub,
.tgr-theme-white .tgr-rect-right .tgr-score { color: #202124 !important; }
.tgr-theme-white .tgr-label,
.tgr-theme-white .tgr-score-label { color: #5f6368 !important; }
.tgr-theme-white .tgr-cta { color: #4285F4 !important; }
.tgr-theme-white .tgr-cta-rect:not(:hover) { color: #4285F4 !important; }

/* ================================================
   LAYOUT CARRÉ (vertical)
================================================ */

.tgr-layout-square {
    flex-direction: column;
    align-items: center;
    padding: 20px 26px 16px;
    min-width: 190px;
    max-width: 260px;
    text-align: center;
}

/* Header logo + label */
.tgr-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.tgr-google-logo { width: 52px; height: auto; display: block; flex-shrink: 0; }
.tgr-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f6368;
}
.tgr-theme-dark .tgr-label { color: rgba(255,255,255,.45); }

/* Grande note */
.tgr-layout-square .tgr-score {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    color: #202124;
    margin-bottom: 8px;
}
.tgr-theme-dark .tgr-score { color: #ffffff; }

/* Étoiles */
.tgr-stars {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-bottom: 8px;
}
.tgr-star { width: 24px; height: 24px; display: block; }

/* Nombre d'avis */
.tgr-count-big {
    font-size: 20px;
    font-weight: 700;
    color: #202124;
    margin-bottom: 4px;
}
.tgr-theme-dark .tgr-count-big { color: #ffffff; }

/* CTA */
.tgr-cta {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #4285F4;
    text-decoration: none;
    letter-spacing: .02em;
    transition: color .15s;
}
.tgr-cta:hover { color: #1a73e8 !important; text-decoration: underline; }
.tgr-theme-google .tgr-cta:hover,
.tgr-theme-white  .tgr-cta:hover { color: #1a73e8 !important; }
.tgr-theme-dark .tgr-cta { color: #8ab4f8; }

/* ================================================
   LAYOUT RECTANGULAIRE (horizontal)
================================================ */

.tgr-layout-rect {
    flex-direction: row;
    align-items: center;
    padding: 14px 20px;
    gap: 0;
    min-width: 360px;
    max-width: 520px;
}

/* Sections gauche / centre / droite */
.tgr-rect-left,
.tgr-rect-center,
.tgr-rect-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    gap: 3px;
}

.tgr-rect-left { min-width: 80px; }
.tgr-rect-center { flex: 1; }
.tgr-rect-right { min-width: 64px; }

.tgr-rect-left .tgr-google-logo { width: 46px; }
.tgr-rect-left .tgr-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f6368;
}
.tgr-theme-dark .tgr-rect-left .tgr-label { color: rgba(255,255,255,.4); }

.tgr-rect-center .tgr-stars { margin-bottom: 2px; gap: 2px; }
.tgr-rect-center .tgr-star  { width: 20px; height: 20px; }

.tgr-count-sub {
    font-size: 13px;
    font-weight: 600;
    color: #202124;
}
.tgr-theme-dark .tgr-count-sub { color: #fff; }

.tgr-rect-right .tgr-score {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    color: #202124;
}
.tgr-theme-dark .tgr-rect-right .tgr-score { color: #fff; }

.tgr-score-label {
    font-size: 12px;
    color: #5f6368;
    font-weight: 500;
}
.tgr-theme-dark .tgr-score-label { color: rgba(255,255,255,.4); }

/* Séparateur vertical */
.tgr-rect-divider {
    width: 1px;
    height: 36px;
    background: #e0e0e0;
    flex-shrink: 0;
}
.tgr-theme-dark .tgr-rect-divider { background: rgba(255,255,255,.12); }

/* CTA rect */
.tgr-cta-rect {
    margin-top: 0;
    margin-left: 16px;
    padding: 6px 14px;
    border: 1px solid #4285F4;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #4285F4;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.tgr-cta-rect:hover { background: #4285F4 !important; color: #fff !important; }
.tgr-theme-dark .tgr-cta-rect { border-color: #8ab4f8; color: #8ab4f8; }
.tgr-theme-dark .tgr-cta-rect:hover { background: #8ab4f8 !important; color: #1a1a2e !important; }
.tgr-theme-google .tgr-cta-rect:hover,
.tgr-theme-white  .tgr-cta-rect:hover { background: #1a73e8 !important; color: #fff !important; }

/* ================================================
   TAILLE COMPACTE
================================================ */

/* Carré compact */
.tgr-layout-square.tgr-size-compact {
    padding: 14px 18px 12px;
    min-width: 150px;
}
.tgr-layout-square.tgr-size-compact .tgr-score { font-size: 36px; }
.tgr-layout-square.tgr-size-compact .tgr-star  { width: 18px; height: 18px; }
.tgr-layout-square.tgr-size-compact .tgr-count-big { font-size: 15px; }
.tgr-layout-square.tgr-size-compact .tgr-google-logo { width: 40px; }

/* Rect compact */
.tgr-layout-rect.tgr-size-compact {
    padding: 10px 14px;
    min-width: 300px;
}
.tgr-layout-rect.tgr-size-compact .tgr-rect-right .tgr-score { font-size: 28px; }
.tgr-layout-rect.tgr-size-compact .tgr-star  { width: 16px; height: 16px; }
.tgr-layout-rect.tgr-size-compact .tgr-google-logo { width: 38px; }
.tgr-layout-rect.tgr-size-compact .tgr-rect-left,
.tgr-layout-rect.tgr-size-compact .tgr-rect-center,
.tgr-layout-rect.tgr-size-compact .tgr-rect-right { padding: 0 12px; }

/* ================================================
   ANIMATION
================================================ */

@keyframes tgrFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tgr-widget { animation: tgrFadeUp .35s ease forwards; }

/* Étoiles animation au scroll (classe ajoutée par JS) */
.tgr-star.tgr-star-visible {
    animation: tgrStarPop .25s ease forwards;
}
@keyframes tgrStarPop {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: scale(1); }
}