/* ========= FUTURISTIC GLASS / PREMIUM ========= */
  #grx{ padding:28px 16px; position:relative; }
  #grx, #grx *{ box-sizing:border-box; }

  #grx .grx-shell{
    max-width:1100px; margin:0 auto;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    background:
      radial-gradient(800px 280px at 20% 0%, rgba(26,115,232,.20), transparent 60%),
      radial-gradient(700px 260px at 80% 0%, rgba(251,188,4,.12), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    box-shadow:
      0 26px 80px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
  }

  #grx .grx-head{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:18px 18px 12px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
    border-bottom:1px solid rgba(255,255,255,.14);
  }

  #grx .grx-glow{
    position:absolute; inset:-2px;
    background: radial-gradient(450px 140px at 18% 0%, rgba(26,115,232,.25), transparent 70%);
    pointer-events:none;
    filter: blur(10px);
    opacity:.9;
    animation: grxGlow 4.5s ease-in-out infinite alternate;
  }
  @keyframes grxGlow { from{ transform:translateY(-6px); opacity:.75 } to{ transform:translateY(0); opacity:1 } }

  #grx .grx-title{ display:flex; align-items:center; gap:12px; min-width:280px; position:relative; z-index:1; }
  #grx .grx-titleText{ min-width:0; }
  #grx .grx-h{ font-weight:900; letter-spacing:.2px; font-size:18px; color:#0b1220; }
  #grx .grx-subline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
  #grx .grx-sub{ font-size:13px; color:rgba(11,18,32,.72); }

  #grx .grx-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(26,115,232,.08);
    border:1px solid rgba(26,115,232,.18);
    box-shadow: 0 10px 22px rgba(26,115,232,.10);
    color:#0b1220;
    font-weight:800;
    white-space:nowrap;
  }
  #grx .grx-score{ font-size:13px; }
  #grx .grx-count{ font-size:12px; font-weight:800; color:rgba(11,18,32,.70); }

  /* Badge Google */
  #grx .grx-badge{
    width:42px; height:42px; border-radius:14px;
    background:#fff; border:1px solid rgba(26,115,232,.16);
    display:grid; place-items:center; position:relative;
    box-shadow: 0 12px 28px rgba(26,115,232,.10);
  }
  #grx .grx-dot{ width:9px; height:9px; border-radius:999px; position:absolute; }
  #grx .grx-dot--b{ background:#1a73e8; top:12px; left:12px }
  #grx .grx-dot--r{ background:#ea4335; top:12px; right:12px }
  #grx .grx-dot--y{ background:#fbbc04; bottom:12px; left:12px }
  #grx .grx-dot--g{ background:#34a853; bottom:12px; right:12px }

  /* Actions */
  #grx .grx-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
  #grx .grx-arrow{
    width:42px; height:42px; border-radius:14px;
    border:1px solid rgba(26,115,232,.22);
    background:#fff; color:#1a73e8;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(26,115,232,.10);
    display:grid; place-items:center;
    transition: transform 140ms ease, filter 140ms ease;
  }
  #grx .grx-arrow svg{ width:18px; height:18px; }
  #grx .grx-arrow:hover{ filter:brightness(1.02); transform: translateY(-1px); }
  #grx .grx-arrow:active{ transform: translateY(0); }

  #grx .grx-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border-radius:14px;
    background: linear-gradient(135deg, #1a73e8, #2b8cff);
    color:#fff; text-decoration:none; font-weight:900;
    box-shadow:0 16px 36px rgba(26,115,232,.28);
    border:1px solid rgba(26,115,232,.35);
    white-space:nowrap;
    transition: transform 140ms ease, filter 140ms ease;
  }
  #grx .grx-btn:hover{ filter:brightness(1.03); transform: translateY(-1px); }
  #grx .grx-btn:active{ transform: translateY(0); }

  /* Viewport + Track (translateX = ultra fluide) */
  #grx .grx-viewport{
    overflow:hidden;
    padding:16px 18px 18px 18px;
  }
  #grx .grx-track{
    display:flex; flex-wrap:nowrap; gap:14px; align-items:stretch;
    will-change: transform;
    transform: translate3d(0,0,0);
    min-height: 220px;
  }
  #grx .grx-track.grx-track--snap{
    transition: transform 320ms cubic-bezier(.2,.9,.2,1);
  }

  /* Cartes */
  #grx .grx-card{
    flex:0 0 auto;
    width: var(--grx-card-w, 360px);
    border-radius:18px;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(26,115,232,.14);
    box-shadow:
      0 18px 44px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.55);
    padding:14px 14px 12px 14px;
    position:relative;
    transform: translateZ(0);
    backface-visibility:hidden;
    overflow:hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  #grx .grx-card:before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(260px 80px at 30% 0%, rgba(26,115,232,.18), transparent 65%);
    opacity:.8;
    pointer-events:none;
  }

  #grx .grx-card:hover{
    transform: translateY(-2px);
    box-shadow:
      0 22px 54px rgba(0,0,0,.16),
      0 14px 36px rgba(26,115,232,.12);
  }

  @media (max-width: 980px){ #grx .grx-card{ width: min(82vw, 420px);} }
  @media (max-width: 860px){
    #grx .grx-head{ align-items:flex-start; flex-direction:column; }
    #grx .grx-actions{ width:100%; justify-content:flex-start; }
  }

  /* Top row */
  #grx .grx-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
  #grx .grx-user{ display:flex; align-items:center; gap:10px; min-width:0; }
  #grx .grx-avatar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width:40px; height:40px; border-radius:14px;
  }
  #grx .grx-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  #grx .grx-name{ font-weight:900; color:#0b1220; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #grx .grx-when{ font-size:12px; color:rgba(11,18,32,.62); margin-top:2px; }

  /* Stars */
  #grx .grx-starsRow{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  #grx .grx-stars{ display:inline-flex; gap:2px; }
  #grx .grx-star{ width:14px; height:14px; display:inline-block; }
  #grx .grx-starsNum{ font-size:12px; color:rgba(11,18,32,.70); font-weight:900; }

  /* Text */
  #grx .grx-text{
    margin-top:10px;
    font-size:13.5px; line-height:1.48; color:rgba(11,18,32,.90);
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
    position:relative; z-index:1;
  }
  #grx .grx-more{
    margin-top:10px;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    position:relative; z-index:1;
  }
  #grx .grx-toggle{
    border:none; background:transparent; color:#1a73e8;
    font-weight:900; cursor:pointer; padding:0;
    transition: transform 140ms ease;
  }
  #grx .grx-toggle:hover{ transform: translateY(-1px); }
  #grx .grx-quote{ font-size:22px; color:rgba(26,115,232,.22); font-weight:900; line-height:1; }

  /* Skeleton */
  #grx .grx-skel{
    min-height:190px;
    background:
      linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.08), rgba(0,0,0,.04));
    background-size:200% 100%;
    animation: grxShimmer 1.15s infinite linear;
    border:1px solid rgba(0,0,0,.06);
  }
  @keyframes grxShimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

  /* Footer */
  #grx .grx-foot{
    display:flex; justify-content:space-between; gap:12px;
    padding:12px 18px 16px 18px;
    color:rgba(255,255,255,.78);
    font-size:12px;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.24));
    border-top:1px solid rgba(255,255,255,.10);
  }
  #grx .grx-source{ display:inline-flex; align-items:center; gap:8px; }
  #grx .grx-source:before{
    content:""; width:8px; height:8px; border-radius:999px;
    background:#1a73e8; opacity:.9;
    box-shadow: 0 0 0 4px rgba(26,115,232,.18);
  }

  /* Modal */
  #grx .grx-modal{ position:fixed; inset:0; z-index:999999; }
  #grx .grx-modal[hidden]{ display:none; }
  #grx .grx-modal__backdrop{
    position:absolute; inset:0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
  }
  #grx .grx-modal__panel{
    position:absolute; left:50%; top:50%;
    transform: translate(-50%,-50%);
    width: min(720px, calc(100vw - 26px));
    max-height: min(78vh, 720px);
    overflow:auto;
    border-radius:22px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
    border:1px solid rgba(255,255,255,.20);
    box-shadow: 0 26px 90px rgba(0,0,0,.35);
    padding:18px 18px 16px 18px;
  }
  #grx .grx-modal__close{
    position:absolute; top:12px; right:12px;
    width:40px; height:40px; border-radius:14px;
    border:1px solid rgba(26,115,232,.22);
    background:#fff; color:#1a73e8;
    cursor:pointer;
    display:grid; place-items:center;
    box-shadow:0 12px 26px rgba(26,115,232,.10);
  }
  #grx .grx-modal__close svg{ width:18px; height:18px; }
  #grx .grx-modal__top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-right:48px; }
  #grx .grx-modal__who{ display:flex; align-items:center; gap:10px; min-width:0; }
  #grx .grx-modal__text{ margin-top:14px; color:rgba(11,18,32,.92); font-size:14px; line-height:1.55; white-space:pre-wrap; }
  
  /* --- Perf: fluidité du défilement (avatars) --- */
#grx .grx-viewport { 
  contain: paint;           /* isole la zone pour éviter des repaints lourds */
}

#grx .grx-track{
  will-change: transform;
  transform: translate3d(0,0,0);
}

#grx .grx-card{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#grx .grx-avatar,
#grx .grx-avatar img{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}