/* =====================================================================
   Avis Google — CSS Public  v1.0.0
   Préfixe : .agg-
   Toutes les couleurs passent par des variables CSS pour la personnalisation.
   Aucune règle globale — zéro conflit avec n'importe quel thème WordPress.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Reset minimal — uniquement nos éléments                              */
/* ------------------------------------------------------------------ */

.agg-ticker,
.agg-ticker *,
.agg-sticky,
.agg-sticky *,
.agg-badge,
.agg-badge * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/* Étoiles SVG — partagées entre tous les modules                       */
/* ------------------------------------------------------------------ */

.agg-stars {
    display:     inline-flex;
    align-items: center;
    gap:         1px;
    line-height: 1;
    flex-shrink: 0;
}

.agg-star {
    display:        inline-block;
    vertical-align: middle;
    flex-shrink:    0;
}

/* =====================================================================
   MODULE 1 — TICKER DÉFILANT  (animation 100% CSS, zéro JS)
   Variables CSS injectées inline par PHP :
     --agg-tk-bg        fond
     --agg-tk-color     texte
     --agg-tk-radius    border-radius
     --agg-tk-fs        font-size
     --agg-tk-pad       padding vertical
     --agg-tk-duration  durée d'un cycle (calculée depuis speed)
   =====================================================================
   PRINCIPE SEAMLESS :
   Le template PHP répète le contenu 4 fois dans le track.
   L'animation translateX(0) → translateX(-25%) déplace exactement
   d'une copie (25% du track = 1/4 du total).
   Boucle parfaite, aucune mesure JS nécessaire.
   ===================================================================== */

@keyframes agg-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-12.5%); }
}

.agg-ticker {
    --agg-tk-bg:       #1a73e8;
    --agg-tk-color:    #ffffff;
    --agg-tk-radius:   0px;
    --agg-tk-fs:       14px;
    --agg-tk-pad:      10px;
    --agg-tk-duration: 20s;

    background-color: var(--agg-tk-bg);
    color:            var(--agg-tk-color);
    font-size:        var(--agg-tk-fs);
    border-radius:    var(--agg-tk-radius);
    padding:          var(--agg-tk-pad) 0;
    overflow:         hidden;
    width:            100%;
    position:         relative;
    user-select:      none;
    font-family:      inherit;
    line-height:      1.4;
}

/* Dégradé de fondu sur les bords */
.agg-ticker::before,
.agg-ticker::after {
    content:        '';
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          48px;
    z-index:        2;
    pointer-events: none;
}
.agg-ticker::before {
    left:       0;
    background: linear-gradient(to right, var(--agg-tk-bg) 10%, transparent);
}
.agg-ticker::after {
    right:      0;
    background: linear-gradient(to left, var(--agg-tk-bg) 10%, transparent);
}

/* Track — 4 reels côte à côte, animé via CSS */
.agg-ticker__track {
    display:   flex;
    width:     max-content;
    animation: agg-ticker-scroll var(--agg-tk-duration) linear infinite;
}

/* Reel — une copie du contenu */
.agg-ticker__reel {
    display:     flex;
    align-items: center;
    white-space: nowrap;
    padding:     0 32px;
    flex-shrink: 0;
}

/* Segment individuel */
.agg-ticker__segment {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     0 20px;
    white-space: nowrap;
}

.agg-ticker__segment--rating { gap: 8px; }

/* Séparateur • */
.agg-ticker__sep {
    color:       var(--agg-tk-color);
    opacity:     .4;
    font-size:   .75em;
    padding:     0 2px;
    flex-shrink: 0;
}

.agg-ticker__rating         { font-weight: 700; letter-spacing: .3px; }
.agg-ticker__count          { opacity: .85; }
.agg-ticker__count strong   { font-weight: 700; }
.agg-ticker .agg-stars      { font-size: 1.1em; }

/* Pause au survol et au focus — 100% CSS, aucun JS */
.agg-ticker:hover .agg-ticker__track,
.agg-ticker:focus-within .agg-ticker__track {
    animation-play-state: paused;
}

/* Mouvement réduit — on arrête et on masque les copies */
@media (prefers-reduced-motion: reduce) {
    .agg-ticker__track                    { animation: none; }
    .agg-ticker__reel[aria-hidden="true"] { display: none; }
}

/* =====================================================================
   MODULE 2 — WIDGET STICKY BAS D'ÉCRAN
   Variables CSS (injectées inline ou via thème) :
     --agg-st-bg        fond
     --agg-st-color     texte
     --agg-st-star      étoiles
     --agg-st-border    bordure
     --agg-st-radius    border-radius
   ===================================================================== */

/* --- Base (light par défaut) --- */
.agg-sticky {
    --agg-st-bg:     #ffffff;
    --agg-st-color:  #3c4043;
    --agg-st-star:   #fbbc04;
    --agg-st-border: #e8eaed;
    --agg-st-radius: 12px;

    position:    fixed;
    bottom:      20px;
    z-index:     99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Animation d'entrée */
    transform:   translateY(calc(100% + 36px));
    opacity:     0;
    transition:  transform .42s cubic-bezier(.34,1.56,.64,1),
                 opacity   .3s  ease;
    will-change: transform, opacity;
}

.agg-sticky.is-visible {
    transform: translateY(0);
    opacity:   1;
}

.agg-sticky.is-hidden {
    transform:      translateY(calc(100% + 36px));
    opacity:        0;
    pointer-events: none;
}

/* Positions */
.agg-sticky--left  { left:  20px; }
.agg-sticky--right { right: 20px; }

/* --- Thème Dark --- */
.agg-sticky--dark {
    --agg-st-bg:     #202124;
    --agg-st-color:  #e8eaed;
    --agg-st-border: #3c4043;
}

/* Inner — div ou <a> */
.agg-sticky__inner {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 14px;
    background:      var(--agg-st-bg);
    color:           var(--agg-st-color);
    border:          1.5px solid var(--agg-st-border);
    border-radius:   var(--agg-st-radius);
    box-shadow:      0 4px 18px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.07);
    text-decoration: none;
    cursor:          default;
    min-width:       160px;
    transition:      box-shadow .2s ease, transform .2s ease;
    position:        relative;
}

a.agg-sticky__inner { cursor: pointer; }

a.agg-sticky__inner:hover {
    box-shadow: 0 7px 22px rgba(0,0,0,.18);
    transform:  translateY(-2px);
}

/* Logo */
.agg-sticky__logo {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

/* Contenu */
.agg-sticky__content {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    min-width:      0;
}

.agg-sticky__stars {
    display:     flex;
    align-items: center;
    gap:         5px;
}

.agg-sticky__stars .agg-stars { font-size: 13px; }

.agg-sticky__rating {
    font-size:   14px;
    font-weight: 700;
    color:       var(--agg-st-color);
    line-height: 1;
}

.agg-sticky__count {
    font-size:   11px;
    color:       var(--agg-st-color);
    opacity:     .68;
    white-space: nowrap;
}

/* Bouton fermer */
.agg-sticky__close {
    position:        absolute;
    top:             -9px;
    right:           -9px;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      var(--agg-st-color);
    border:          2px solid var(--agg-st-bg);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    opacity:         .55;
    transition:      opacity .2s ease, transform .2s ease;
    z-index:         1;
}

.agg-sticky__close svg          { fill: var(--agg-st-bg); display: block; }
.agg-sticky__close:hover        { opacity: 1; transform: scale(1.15); }
.agg-sticky__close:focus-visible {
    outline:        2px solid var(--agg-st-star);
    outline-offset: 2px;
}

/* Responsive mobile */
@media (max-width: 480px) {
    .agg-sticky             { bottom: 12px; }
    .agg-sticky--left       { left:  12px;  }
    .agg-sticky--right      { right: 12px;  }
    .agg-sticky__inner      { padding: 8px 12px; gap: 8px; min-width: 140px; }
    .agg-sticky__rating     { font-size: 13px; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .agg-sticky { transition: opacity .2s ease; transform: none !important; }
}

/* =====================================================================
   MODULE 3 — WIDGET BADGE PLAÇABLE
   Variables CSS (injectées inline ou via thème) :
     --agg-bd-bg        fond
     --agg-bd-color     texte
     --agg-bd-star      étoiles (via SVG fill)
     --agg-bd-border    bordure
     --agg-bd-radius    border-radius
     --agg-bd-maxw      max-width
   ===================================================================== */

.agg-badge {
    --agg-bd-bg:     #ffffff;
    --agg-bd-color:  #3c4043;
    --agg-bd-border: #e8eaed;
    --agg-bd-radius: 8px;
    --agg-bd-maxw:   320px;

    display:     block;
    width:       100%;
    max-width:   var(--agg-bd-maxw);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Alignement */
.agg-badge--align-left   { margin-right: auto; }
.agg-badge--align-center { margin-left: auto; margin-right: auto; }
.agg-badge--align-right  { margin-left: auto; }

/* Thème Dark */
.agg-badge--dark {
    --agg-bd-bg:     #202124;
    --agg-bd-color:  #e8eaed;
    --agg-bd-border: #3c4043;
}

/* Inner */
.agg-badge__inner {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             10px;
    padding:         20px 22px;
    background:      var(--agg-bd-bg);
    color:           var(--agg-bd-color);
    border-radius:   var(--agg-bd-radius);
    text-decoration: none;
    transition:      box-shadow .2s ease, transform .2s ease;
    position:        relative;
    overflow:        hidden;
}

/* Ombre */
.agg-badge--shadow .agg-badge__inner {
    box-shadow: 0 4px 20px rgba(0,0,0,.09), 0 1px 5px rgba(0,0,0,.06);
}
.agg-badge--shadow a.agg-badge__inner:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.14);
    transform:  translateY(-2px);
}

/* Bordure */
.agg-badge--bordered .agg-badge__inner {
    border: 1.5px solid var(--agg-bd-border);
}

/* Logo */
.agg-badge__logo {
    display:     flex;
    align-items: center;
    gap:         7px;
}
.agg-badge__logo-svg {
    width:       32px;
    height:      32px;
    flex-shrink: 0;
}
.agg-badge__logo--icon .agg-badge__logo-svg { width: 26px; height: 26px; }
.agg-badge__logo-text {
    font-size:      18px;
    font-weight:    500;
    color:          var(--agg-bd-color);
    letter-spacing: -.3px;
}

/* Note + étoiles */
.agg-badge__rating-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.agg-badge__rating-number {
    font-size:      32px;
    font-weight:    700;
    color:          var(--agg-bd-color);
    line-height:    1;
    letter-spacing: -1px;
}
.agg-badge__stars .agg-stars { font-size: 18px; }

/* Count + sous-texte */
.agg-badge__count {
    font-size: 13px;
    color:     var(--agg-bd-color);
    opacity:   .7;
}
.agg-badge__sub-text {
    font-size:   13px;
    font-style:  italic;
    color:       var(--agg-bd-color);
    opacity:     .75;
    line-height: 1.45;
}

/* Lien label */
.agg-badge__link-label {
    font-size:   12px;
    font-weight: 600;
    color:       #1a73e8;
    margin-top:  2px;
}
a.agg-badge__inner:hover .agg-badge__link-label { text-decoration: underline; }

/* Thème Dark — surcharge link-label */
.agg-badge--dark .agg-badge__link-label { color: #8ab4f8; }

/* Responsive */
@media (max-width: 480px) {
    .agg-badge                   { max-width: 100%; }
    .agg-badge__rating-number    { font-size: 26px; }
    .agg-badge__inner            { padding: 16px 18px; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .agg-badge--shadow a.agg-badge__inner { transition: none; }
}