/* ========================================
 CSS GAMEPLAY & GAME DESIGN (2024)
 Template: Eranews - Joomla 5
 Thème : Analyse, Mécaniques, Narration, Pop Culture
 Version : Pro Mobile Optimized
 ======================================== */

/* PALETTE : Blanc, gris doux, bleu nuit, orange doux, violet, jaune accent */
:root {
 --gplay-bg: #fcfcfd;
 --gplay-bg-soft: #f5f6fa;
 --gplay-bg-card: #fff;
 --gplay-bg-accent: #f3f0ff;
 --gplay-surface: #f1f2f6;

 --gplay-primary: #1e293b;   /* Bleu nuit */
 --gplay-secondary: #7c3aed;  /* Violet doux */
 --gplay-accent: #ffb300;   /* Jaune/or accent */
 --gplay-orange: #ff7849;   /* Orange doux */
 --gplay-info: #2563eb;    /* Bleu accent */
 --gplay-success: #10b981;   /* Vert */
 --gplay-muted: #64748b;    /* Gris texte */
 --gplay-border: #e5e7eb;
 --gplay-border-strong: #c7d2fe;

 --gplay-gradient: linear-gradient(90deg, #7c3aed 0%, #ffb300 100%);
 --gplay-gradient-accent: linear-gradient(90deg, #ffb300 0%, #ff7849 100%);
 --gplay-gradient-card: linear-gradient(135deg, #fff 0%, #f5f6fa 100%);

 --gplay-shadow-xs: 0 1px 3px 0 rgba(30,41,59,0.06);
 --gplay-shadow-sm: 0 2px 8px 0 rgba(30,41,59,0.10);
 --gplay-shadow-md: 0 8px 24px -4px rgba(30,41,59,0.13);
 --gplay-shadow-lg: 0 16px 40px -8px rgba(30,41,59,0.16);

 --gplay-blur: blur(8px);
 --gplay-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== CONTENEUR PRINCIPAL ========== */
.category-gplay {
 background: var(--gplay-bg);
 border: 2px solid var(--gplay-border);
 border-radius: 28px;
 box-shadow: var(--gplay-shadow-lg);
 margin-bottom: 48px;
 transition: var(--gplay-transition);
 position: relative;
 overflow: hidden;
 backdrop-filter: var(--gplay-blur);
}

.category-gplay:hover {
 box-shadow: 0 0 0 4px #ffb30033, var(--gplay-shadow-lg);
 border-color: var(--gplay-accent);
}

/* Barre accent en haut */
.category-gplay::after {
 content: "";
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 5px;
 background: var(--gplay-gradient);
 box-shadow: 0 0 18px #ffb30022;
 z-index: 10;
 animation: gplayPulse 4s infinite ease-in-out;
}

/* ========== TITRES ========== */
.category-gplay h1,
.category-gplay .article-title {
 color: var(--gplay-primary);
 font-family: 'JetBrains Mono', 'Poppins', 'Segoe UI', Arial, sans-serif;
 font-weight: 900;
 font-size: 2.4rem;
 margin-bottom: 30px;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 background: var(--gplay-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0 3px 8px #ffb30011);
 position: relative;
 z-index: 2;
}

.category-gplay h1::before {
 content: "🎮 ";
 color: var(--gplay-accent);
 font-size: 0.9em;
 margin-right: 10px;
 animation: gplayBlink 1.8s infinite;
}

.category-gplay h2 {
 color: var(--gplay-secondary);
 font-family: 'Poppins', 'Inter', Arial, sans-serif;
 font-weight: 800;
 font-size: 1.5rem;
 margin: 38px 0 18px 0;
 padding-left: 22px;
 position: relative;
 text-transform: uppercase;
 letter-spacing: 1.1px;
 background: var(--gplay-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.category-gplay h2::before {
 content: "";
 position: absolute;
 left: 0; top: 50%;
 transform: translateY(-50%);
 width: 7px; height: 70%;
 background: var(--gplay-gradient-accent);
 border-radius: 4px;
 box-shadow: 0 0 10px #ffb30033;
}

.category-gplay h3 {
 color: var(--gplay-orange);
 font-family: 'Poppins', Arial, sans-serif;
 font-weight: 700;
 font-size: 1.18rem;
 margin: 28px 0 14px 0;
 text-transform: uppercase;
 letter-spacing: 0.7px;
 position: relative;
}

.category-gplay h3::before {
 content: "★ ";
 color: var(--gplay-accent);
 font-size: 0.8em;
 margin-right: 7px;
}

/* ========== CONTENU ARTICLE ========== */
.category-gplay .article-content {
 background: var(--gplay-bg-card);
 color: var(--gplay-primary);
 padding: 44px 40px 36px 40px;
 border-radius: 22px;
 font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
 font-size: 1.07rem;
 line-height: 1.85;
 position: relative;
 box-shadow: var(--gplay-shadow-sm);
 font-style: normal;
 z-index: 2;
}

.category-gplay .article-content p {
 margin-bottom: 22px;
 text-align: justify;
 font-size: 1.05em;
 font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
 line-height: 1.8;
}

.category-gplay .article-content p strong {
 font-weight: 700;
 color: var(--gplay-primary);
}

/* ========== LISTES ========== */
.category-gplay .article-content ul,
.category-gplay .article-content ol {
 font-size: 1em;
 line-height: 1.9;
 margin-bottom: 20px;
 font-family: 'Inter', Arial, sans-serif;
 color: var(--gplay-primary);
 padding-left: 28px;
}
.category-gplay .article-content ul li,
.category-gplay .article-content ol li {
 margin-bottom: 8px;
 position: relative;
}
.category-gplay .article-content ul li::before {
 content: "→";
 color: var(--gplay-orange);
 font-weight: bold;
 margin-right: 8px;
 font-size: 1em;
 position: absolute;
 left: -22px;
 top: 0;
}
.category-gplay .article-content ol li::marker {
 color: var(--gplay-secondary);
 font-weight: bold;
}

/* ========== HR ========== */
.category-gplay .article-content hr {
 border: none;
 border-top: 2px dashed var(--gplay-accent);
 margin: 36px 0 32px 0;
 opacity: 0.7;
}

/* ========== INFO BOXES (5 types disponibles) ========== */

/* 1. INFO-BOX 🕹️ - Infos générales, contexte, anecdotes */
.category-gplay .info-box {
 background: linear-gradient(90deg, #f5f6fa 80%, #fffbe6 100%);
 border: 2px solid var(--gplay-accent);
 border-left: 7px solid var(--gplay-secondary);
 padding: 26px 30px;
 border-radius: 16px;
 margin: 32px 0;
 font-family: 'Inter', Arial, sans-serif;
 box-shadow: 0 2px 10px #7c3aed08;
 font-size: 1.05em;
 line-height: 1.7;
 position: relative;
}
.category-gplay .info-box::before {
 content: "🕹️";
 position: absolute;
 top: 10px;
 right: 18px;
 font-size: 1.4rem;
 opacity: 0.18;
}

/* 2. TIP-BOX 💡 - Conseils, astuces, tips */
.category-gplay .tip-box {
 background: linear-gradient(90deg, #e0f7fa 80%, #fff 100%);
 border: 2px solid var(--gplay-info);
 border-left: 7px solid var(--gplay-info);
 padding: 26px 30px;
 border-radius: 16px;
 margin: 32px 0;
 font-family: 'Inter', Arial, sans-serif;
 box-shadow: 0 2px 10px #2563eb08;
 font-size: 1.05em;
 line-height: 1.7;
 position: relative;
}
.category-gplay .tip-box::before {
 content: "💡";
 position: absolute;
 top: 10px;
 right: 18px;
 font-size: 1.4rem;
 opacity: 0.18;
}

/* 3. WARNING-BOX ⚠️ - Attention, précautions, points importants */
.category-gplay .warning-box {
 background: linear-gradient(90deg, #fff0f0 80%, #fff 100%);
 border: 2px solid #ef4444;
 border-left: 7px solid #ef4444;
 padding: 26px 30px;
 border-radius: 16px;
 margin: 32px 0;
 font-family: 'Inter', Arial, sans-serif;
 box-shadow: 0 2px 10px #ef444408;
 font-size: 1.05em;
 line-height: 1.7;
 position: relative;
}
.category-gplay .warning-box::before {
 content: "⚠️";
 position: absolute;
 top: 10px;
 right: 18px;
 font-size: 1.4rem;
 opacity: 0.18;
}

/* 4. NOSTALGIA-BOX 🎮 - Souvenirs, à l'époque, rétro gaming */
.category-gplay .nostalgia-box {
 background: linear-gradient(90deg, #fffbea 80%, #fff 100%);
 border: 2px solid var(--gplay-accent);
 border-left: 7px solid var(--gplay-accent);
 padding: 26px 30px;
 border-radius: 16px;
 margin: 32px 0;
 font-family: 'Inter', Arial, sans-serif;
 box-shadow: 0 2px 10px #ffb30008;
 font-size: 1.05em;
 line-height: 1.7;
 position: relative;
}
.category-gplay .nostalgia-box::before {
 content: "💾";
 position: absolute;
 top: 10px;
 right: 18px;
 font-size: 1.4rem;
 opacity: 0.18;
}

/* 5. QUOTE-BOX 💬 - Citations courtes (différente du blockquote) */
.category-gplay .quote-box {
 background: linear-gradient(90deg, #fff5e6 80%, #fff 100%);
 border: 2px solid var(--gplay-orange);
 border-left: 7px solid var(--gplay-orange);
 padding: 26px 30px;
 border-radius: 16px;
 margin: 32px 0;
 font-family: 'Inter', Arial, sans-serif;
 box-shadow: 0 2px 10px #ff784908;
 font-size: 1.05em;
 line-height: 1.7;
 position: relative;
 font-style: italic;
}
.category-gplay .quote-box::before {
 content: "💬";
 position: absolute;
 top: 10px;
 right: 18px;
 font-size: 1.4rem;
 opacity: 0.18;
}

/* ========== BLOCKQUOTE (pour citations longues) ========== */
.category-gplay blockquote {
 font-style: italic;
 color: var(--gplay-secondary);
 border-left: 6px solid var(--gplay-accent);
 padding: 22px 32px;
 margin: 32px 0;
 background: #f8fafc;
 border-radius: 14px;
 font-family: 'Inter', Arial, sans-serif;
 font-size: 1.15rem;
 position: relative;
 box-shadow: 0 2px 10px #ffb3000a;
}
.category-gplay blockquote::before {
 content: "\201C";
 font-size: 2.5rem;
 color: var(--gplay-accent);
 position: absolute;
 top: 6px;
 left: 12px;
 opacity: 0.13;
 font-family: Georgia, serif;
}
.category-gplay blockquote .quote-text {
 font-size: 1.13em;
 font-weight: 600;
 display: block;
 margin-bottom: 8px;
 position: relative;
 z-index: 1;
}

/* ========== IMAGE GALLERY ========== */

.category-gplay .image-gallery {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 22px;
 margin: 20px 0;
 width: 100%;
 justify-items: center;
 align-items: stretch;
 justify-content: center;
}

.category-gplay .image-gallery .gallery-image,
.category-gplay .image-gallery img {
 max-width: 420px;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 display: block;
}

.category-gplay .image-gallery img {
 width: 100%;
 height: auto;
 max-width: 100%;
 border-radius: 14px;
 transition: box-shadow 0.22s, filter 0.22s;
 display: block;
 object-fit: contain;
 filter: saturate(1.08) brightness(0.98) contrast(1.06);
 background: transparent;
}

.category-gplay .gallery-image {
 cursor: pointer;
 outline: none;
 z-index: 1;
 position: relative;
 max-width: 420px;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
}

.category-gplay .gallery-image:hover {
 box-shadow: 0 0 0 4px #ffb30099, 0 10px 32px #7c3aed11;
 filter: saturate(1.18) brightness(1.04) contrast(1.13);
 transform: scale(1.04) rotateX(1deg);
 z-index: 3;
}

/* Règle pour image seule : conserve sa taille et est centrée */
.category-gplay .image-gallery:has(.gallery-image:only-child) {
 display: flex;
 justify-content: center;
 grid-template-columns: unset;
 width: fit-content;
 max-width: 420px;
 margin-left: auto;
 margin-right: auto;
}

/* Règle pour 2 images côte à côte */
.category-gplay .image-gallery:has(.gallery-image:nth-child(2):last-child) {
 display: flex;
 justify-content: center;
 align-items: flex-start;
 grid-template-columns: unset;
 max-width: 100%;
}

/* ========== FIGCAPTION ========== */
.category-gplay figcaption {
 padding: 12px 15px;
 font-size: 0.95em;
 color: var(--gplay-muted);
 text-align: center;
 line-height: 1.5;
 flex-grow: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 font-style: italic;
}

/* ========== VIDEO CONTAINER ========== */
.video-container {
 position: relative;
 width: 100%;
 padding-bottom: 56.25%; /* Ratio 16:9 */
 height: 0;
 overflow: hidden;
 margin: 40px auto;
 background-color: var(--gplay-bg-soft);
 border-radius: 8px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.video-container iframe,
.video-container object,
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 0;
}

/* ========== TABLEAUX ========== */
.flow-table-wrapper td,
.flow-table th {
 padding: 14px 18px;
 vertical-align: top;
 line-height: 1.6;
}
.flow-table tr {
 border-bottom: 1px solid #e0e0e0;
}
.flow-table tbody tr:last-child {
 border-bottom: none;
}

/* ========== TAGS ========== */
.category-gplay .article-tags {
 margin-top: 38px;
 padding-top: 18px;
 border-top: 2px dashed var(--gplay-accent);
 display: flex;
 flex-wrap: wrap;
 gap: 13px;
}
.category-gplay .tag-item {
 background: #f5f6fa;
 color: var(--gplay-secondary);
 border: 2px solid #e0e7ef;
 padding: 10px 22px;
 border-radius: 20px;
 font-size: 0.95rem;
 font-weight: 700;
 text-decoration: none;
 transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
 display: inline-flex;
 align-items: center;
 gap: 7px;
 font-family: 'JetBrains Mono', monospace;
 text-transform: uppercase;
 letter-spacing: 0.3px;
}
.category-gplay .tag-item::before {
 content: "▲";
 font-weight: 900;
 color: var(--gplay-accent);
 margin-right: 4px;
}
.category-gplay .tag-item:hover {
 background: var(--gplay-accent);
 color: #fff;
 border-color: var(--gplay-accent);
 transform: translateY(-2px) scale(1.07);
 box-shadow: 0 0 0 2px #ffb30044;
}

/* ========================================
 RESPONSIVE MOBILE - PRO OPTIMIZED
 ======================================== */

/* TABLETTES (1024px) */
@media (max-width: 1024px) {
 .category-gplay {
  border-radius: 20px;
  margin-bottom: 32px;
 }

 .category-gplay .article-content {
  padding: 36px 32px;
 }

 .category-gplay h1 {
  font-size: 2rem;
 }

 .category-gplay h2 {
  font-size: 1.4rem;
  margin: 32px 0 16px 0;
 }

 .category-gplay h3 {
  font-size: 1.15rem;
 }

 .category-gplay .image-gallery {
  gap: 18px;
  /* grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); <- SUPPRIMÉ pour utiliser la règle de base en 2 colonnes */
 }
}

/* MOBILE MODERNE (768px) - Style "Le Monde" */
@media (max-width: 768px) {
 /* Container pleine largeur */
 .category-gplay {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  background: transparent;
 }

 /* Barre accent reste visible */
 .category-gplay::after {
  height: 4px;
 }

 /* Hover désactivé en mobile */
 .category-gplay:hover {
  box-shadow: none;
  border-color: transparent;
 }

 /* Content avec marges pro */
 .category-gplay .article-content {
  padding: 32px 16px;
  border-radius: 0;
  box-shadow: none;
  font-size: 1rem;
  background: transparent;
 }
}

 /* Titres optimisés */
 .category-gplay h1 {
  font-size: 1.6rem;
  margin-bottom: 24px;
  letter-spacing: 1px;
 }

 .category-gplay h2 {
  font-size: 1.25rem;
  padding-left: 18px;
  margin: 28px 0 14px 0;
  letter-spacing: 0.8px;
 }

 .category-gplay h2::before {
  width: 6px;
 }

 .category-gplay h3 {
  font-size: 1.1rem;
  margin: 24px 0 12px 0;
 }

 /* Paragraphes optimisés */
 .category-gplay .article-content p {
  font-size: 1em;
  line-height: 1.75;
  text-align: left;
  margin-bottom: 18px;
 }

 /* Galerie 2 colonnes (règle de base appliquée - on neutralise l'ancienne) */
 .category-gplay .image-gallery {
  /* grid-template-columns: repeat(2, 1fr); <- SUPPRIMÉ (car c'est la règle de base) */
  gap: 14px;
  margin: 24px -4px;
 }

 .category-gplay .image-gallery img {
  border-radius: 10px;
 }

 /* Figcaption */
 .category-gplay figcaption {
  font-size: 0.9em;
  padding: 12px 8px;
 }

 /* Boxes optimisées */
 .category-gplay .info-box,
 .category-gplay .tip-box,
 .category-gplay .warning-box,
 .category-gplay .nostalgia-box,
 .category-gplay .quote-box {
  padding: 20px 18px;
  font-size: 0.98em;
  border-radius: 12px;
  margin: 24px 0;
 }

 .category-gplay blockquote {
  padding: 18px 20px;
  font-size: 1.05rem;
  border-radius: 12px;
 }

 /* Video responsive */
 .video-container {
  margin: 28px 0;
  border-radius: 6px;
 }

 /* Tags en colonne */
 .category-gplay .article-tags {
  margin-top: 32px;
  padding-top: 16px;
  gap: 10px;
 }

 .category-gplay .tag-item {
  font-size: 0.9rem;
  padding: 9px 18px;
 }
}

/* PETIT MOBILE (480px) - Standards iOS/Android */
@media (max-width: 480px) {
 /* Marges standard mobile */
 .category-gplay .article-content {
  padding: 28px 12px;
  font-size: 0.95rem;
 }

 /* Titres compacts mais lisibles */
 .category-gplay h1 {
  font-size: 1.4rem;
  letter-spacing: 0.7px;
  margin-bottom: 20px;
 }

 .category-gplay h1::before {
  font-size: 0.85em;
  margin-right: 8px;
 }

 .category-gplay h2 {
  font-size: 1.15rem;
  padding-left: 16px;
  margin: 24px 0 12px 0;
  letter-spacing: 0.6px;
 }

 .category-gplay h2::before {
  width: 5px;
 }

 .category-gplay h3 {
  font-size: 1.05rem;
  margin: 20px 0 10px 0;
 }

 /* Paragraphes optimisés */
 .category-gplay .article-content p {
  font-size: 0.98em;
  line-height: 1.7;
  margin-bottom: 16px;
 }

 /* Galerie 1 colonne */
 .category-gplay .image-gallery {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
 }

 /* NOUVEAU: Neutralise la règle d'image pleine largeur sur mobile 1 colonne */
   .category-gplay .image-gallery .gallery-image {
       grid-column: auto !important;
   }

 .category-gplay .image-gallery img {
  max-width: 100%;
  border-radius: 8px;
 }

 /* Figcaption compact */
 .category-gplay figcaption {
  font-size: 0.85em;
  padding: 10px 6px;
 }

 /* Boxes compactes */
 .category-gplay .info-box,
 .category-gplay .tip-box,
 .category-gplay .warning-box,
 .category-gplay .nostalgia-box,
 .category-gplay .quote-box {
  padding: 18px 16px;
  font-size: 0.95em;
  border-radius: 10px;
  margin: 20px 0;
  border-left-width: 5px;
 }

 .category-gplay blockquote {
  padding: 16px 18px;
  font-size: 1rem;
  border-radius: 10px;
 }

 /* Video */
 .video-container {
  margin: 24px 0;
  border-radius: 4px;
 }

 /* Tags full width */
 .category-gplay .article-tags {
  margin-top: 28px;
  padding-top: 14px;
  gap: 8px;
 }

 .category-gplay .tag-item {
  font-size: 0.85rem;
  padding: 10px 16px;
  width: 100%;
  justify-content: center;
 }

 /* Listes optimisées */
 .category-gplay .article-content ul,
 .category-gplay .article-content ol {
  padding-left: 24px;
  font-size: 0.95em;
 }
}

/* ========== ANIMATIONS ========== */
@keyframes gplayPulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.7; }
}

@keyframes gplayBlink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}

/* ========================================
 IMAGE GALLERY - LÉGENDE UNIQUE SOUS 2 IMAGES
 Ajout personnalisé pour galeries avec légende commune
 ======================================== */

/* Conteneur des images (sans figcaption) */
.category-gplay .gallery-images {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 10px;
}

/* Images dans le conteneur .gallery-images */
.category-gplay .gallery-images .gallery-image {
    flex: 1;
    max-width: 49%;
}

/* Assure que les images restent responsive */
.category-gplay .gallery-images img {
    width: 100%;
    height: auto;
}

/* Figcaption unique après .gallery-images */
.category-gplay .image-gallery > figcaption {
    text-align: center;
    font-style: italic;
    color: var(--gplay-muted);
    font-size: 0.95em;
    margin-top: 10px;
    padding: 12px 15px;
}

/* ========== RESPONSIVE ========== */

/* Tablettes */
@media (max-width: 1024px) {
    .category-gplay .gallery-images {
        gap: 18px;
    }
}

/* Mobile moderne */
@media (max-width: 768px) {
    .category-gplay .gallery-images {
        gap: 14px;
    }
    
    .category-gplay .gallery-images .gallery-image {
        max-width: 48%;
    }
}

/* Petit mobile - passage en colonne */
@media (max-width: 480px) {
    .category-gplay .gallery-images {
        flex-direction: column;
        gap: 12px;
    }
    
    .category-gplay .gallery-images .gallery-image {
        max-width: 100%;
    }
}

        /* Barres de benchmark gaming */

        .category-gplay .benchmark-container {

            background: var(--gplay-bg-soft);

            padding: 20px;

            border-radius: 16px;

            margin: 24px 0;

            border: 1px solid var(--gplay-border);

        }



        .category-gplay .benchmark-label {

            font-size: 1rem;

            font-weight: 600;

            color: var(--gplay-primary);

            margin-bottom: 8px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            font-family: 'Inter', Arial, sans-serif;

        }



        .category-gplay .benchmark-bar {

            background: var(--gplay-bg-accent);

            height: 16px;

            border-radius: 8px;

            overflow: hidden;

            margin-bottom: 16px;

            position: relative;

            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

            border: 1px solid var(--gplay-border);

        }



        .category-gplay .benchmark-fill {

            height: 100%;

            background: var(--gplay-gradient-accent);

            border-radius: 8px;

            position: relative;

            width: 0%; /* Commence à 0 pour l'animation */

            animation: benchmarkFill 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;

            box-shadow: 0 0 10px rgba(34, 211, 238, 0.3);

        }



        .category-gplay .benchmark-fill::after {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);

            animation: benchmarkShine 2s ease-in-out infinite;

        }



        /* Version statique pour debug */

        .category-gplay .benchmark-fill-static {

            height: 100%;

            background: var(--gplay-gradient-accent);

            border-radius: 8px;

            position: relative;

            width: var(--fill-width, 75%);

            box-shadow: 0 0 10px rgba(34, 211, 238, 0.3);

        }



        /* KEYFRAMES ESSENTIELLES */

        @keyframes benchmarkFill {

            from {

                width: 0%;

            }

            to {

                width: var(--fill-width, 75%);

            }

        }



        @keyframes benchmarkShine {

            0% {

                transform: translateX(-100%);

            }

            100% {

                transform: translateX(100%);

            }

        }



        @keyframes gplayBlink {

            0%, 100% {

                opacity: 1;

            }

            50% {

                opacity: 0.7;

            }

        }



        /* Style pour le texte final */

        .final-text {

            text-align: center;

            font-size: 1.2rem;

            font-weight: 600;

            color: var(--gplay-primary);

            margin-top: 20px;

            font-family: 'Inter', Arial, sans-serif;

        }