/* ============================================================================
   CSS STYLE GENERAL - APPLICATION JEU VIDEO MODERNE
   Design: Gaming theme avec néons et dégradés
   Responsive: 320px  2000px (Mobile First)
   Date: 6 novembre 2025
   ============================================================================ */

/* ============================================================================
   1. RESET CSS MODERNE
   ============================================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ============================================================================
   2. VARIABLES CSS - THEME JEU VIDEO
   ============================================================================ */
/*installer la font font-arial.otf*/
@font-face {
    font-family: "ArialCustom";
    src: url("./font-arial.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
:root {
    /* === Couleurs principales === */
    --color-bg-primary: #0a0e27;
    --color-bg-secondary: #151933;
    --color-bg-tertiary: #1a1f3a;
    --color-bg-card: #1e2444;

    /* === Couleurs néon === */
    --color-neon-cyan: #00f0ff;
    --color-neon-purple: #b000ff;
    --color-neon-green: #00ff88;
    --color-neon-pink: #ff006e;
    --color-neon-yellow: #ffd000;

    /* === Dégradés === */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-neon: linear-gradient(
        135deg,
        var(--color-neon-cyan) 0%,
        var(--color-neon-purple) 100%
    );
    --gradient-success: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    --gradient-danger: linear-gradient(135deg, #ff006e 0%, #cc0057 100%);
    --gradient-dark: linear-gradient(180deg, #0a0e27 0%, #151933 100%);

    /* === Couleurs texte === */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b8c5d6;
    --color-text-muted: #7a8a9e;
    --color-text-inverse: #0a0e27;

    /* === Couleurs statut === */
    --color-success: #00ff88;
    --color-warning: #ffd000;
    --color-danger: #ff006e;
    --color-info: #00f0ff;

    /* === Ombres === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.6);

    /* === Glow effects === */
    --glow-cyan: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.3);
    --glow-purple: 0 0 10px rgba(176, 0, 255, 0.5), 0 0 20px rgba(176, 0, 255, 0.3);
    --glow-green: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(0, 255, 136, 0.3);
    --glow-pink: 0 0 10px rgba(255, 0, 110, 0.5), 0 0 20px rgba(255, 0, 110, 0.3);

    /* === Typographie === */
    --font-primary: "ArialCustom", Arial, sans-serif;
    --font-secondary: Arial, sans-serif;

    /* === Tailles de police (Mobile First) === */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* === Espacements (Mobile First) === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* === Border radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* === Transitions === */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 400ms ease-in-out;

    /* === Z-index === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* === Dimensions header/footer === */
    --header-height: 60px;
    --header-height-plus: 80px;
    --footer-height: 90px;
}
/* ============================================================================
   ANNEAUX DE PRÉSENCE - CLASSES CSS RÉCUPÉRÉES DEPUIS FRONTEND
   ============================================================================ */

/* Anneau de présence de base */
.presence-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 3px solid #6c757d;
    transition: all 0.3s ease;
}

/* États de présence */
/* Style de base pour tous les anneaux de présence */
.presence-ring {
    border: 3px solid #6c757d !important; /* gris par défaut */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Classes de présence avec spécificité maximale */
.user-card .presence-ring.online,
.presence-ring.online {
    border-color: #4caf50 !important; /* vert */
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.6) !important;
}

.user-card .presence-ring.en-jeu,
.presence-ring.en-jeu {
    border-color: #ff6b35 !important; /* orange */
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.6) !important;
}

.user-card .presence-ring.offline,
.presence-ring.offline {
    border-color: #6c757d !important; /* gris */
    opacity: 0.5 !important;
}

/* ============================================================================
   3. STYLES DE BASE
   ============================================================================ */

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--gradient-dark);
    background-attachment: fixed;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
            circle at 20% 50%,
            rgba(0, 240, 255, 0.05) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(176, 0, 255, 0.05) 0%,
            transparent 50%
        );
    pointer-events: none;
    z-index: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-3xl);
}
h2 {
    font-size: var(--font-size-2xl);
}
h3 {
    font-size: var(--font-size-xl);
}
h4 {
    font-size: var(--font-size-lg);
}
h5 {
    font-size: var(--font-size-base);
}
h6 {
    font-size: var(--font-size-sm);
}

p {
    margin-bottom: var(--spacing-md);
}

/* ============================================================================
   4. HEADER - NAVIGATION PRINCIPALE
   ============================================================================ */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: linear-gradient(
        180deg,
        rgba(10, 14, 39, 0.95) 0%,
        rgba(21, 25, 51, 0.9) 100%
    );
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 240, 255, 0.1);
    z-index: var(--z-fixed);
}

.header-container {
    max-width: 2000px;
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.left-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
}

.avatar-container {
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-base);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-neon-cyan);
    overflow: hidden;
    box-shadow: var(--glow-cyan);
    animation: avatarPulse 3s ease-in-out infinite;
    background: var(--color-bg-tertiary);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.player-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.general-stats-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.general-stats-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.general-star {
    font-size: var(--font-size-base);
}

.general-stats-value {
    font-weight: 600;
    color: var(--color-neon-yellow);
    text-shadow: 0 0 10px rgba(255, 208, 0, 0.5);
}

.right-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.right-section button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    position: relative;
}

.right-section button img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity var(--transition-base);
}

.notification {
    position: relative;
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--gradient-danger);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-pink);
    animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* ============================================================================
   5. FOOTER - NAVIGATION PRINCIPALE
   ============================================================================ */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    background: linear-gradient(
        0deg,
        rgba(10, 14, 39, 0.98) 0%,
        rgba(21, 25, 51, 0.95) 100%
    );
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 240, 255, 0.1);
    z-index: var(--z-fixed);
    padding-bottom: 30px;
}

.button-container {
    max-width: 2000px;
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--spacing-sm);
}

.button-container button {
    flex: 1;
    max-width: 80px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.button-container button::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-neon);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.button-container button img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: all var(--transition-base);
}

.button-container button.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
}

.button-container button.active img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(0, 240, 255, 1));
}

/* ============================================================================
   6. MAIN CONTENT - CONTAINER GÉNÉRAL
   ============================================================================ */

#main-content {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* Masquer toutes les sections par défaut */
#main-content > div[class^="section-"] {
    display: none;
    padding: var(--spacing-sm);
    animation: fadeIn var(--transition-slow);
}

/* Afficher uniquement la section active */
#main-content > div[class^="section-"].active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   7. SECTION HOME - CLASSEMENT JOUEURS
   ============================================================================ */

.section-home {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0;
}

.home-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.02);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.home-tabs button {
    flex: 1;
    min-width: 100px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.home-tabs button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.home-tabs button.active {
    box-shadow: 0 0 25px rgba(102, 126, 234, 0.8), 0 0 50px rgba(118, 75, 162, 0.5);
    border: 1px solid rgba(102, 126, 234, 0.5);
}

.home-tabs button.active::before {
    opacity: 0.5;
}

.home-card-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.home-user-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
    border-color: var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
}

/* Section gauche : Rank + Avatar */
.home-user-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.home-user-rank {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-neon-cyan);
    text-shadow: var(--glow-cyan);
    text-align: center;
}

.home-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-neon-purple);
    overflow: hidden;
    box-shadow: var(--glow-purple);
    flex-shrink: 0;
    background: var(--color-bg-tertiary);
}

.home-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Section droite : Info utilisateur */
.home-user-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.home-user-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Plan et Status sur la même ligne */
.home-user-plan,
.home-user-status {
    display: inline-block;
    font-size: var(--font-size-xs);
}

.home-user-plan {
    padding: 2px var(--spacing-xs);
    font-weight: 600;
    color: var(--color-text-inverse);
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    margin-right: var(--spacing-xs);
}

.home-user-status {
    color: var(--color-text-muted);
}

.home-user-points-container {
    margin-top: 2px;
}

.home-user-points {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-neon-yellow);
    text-shadow: 0 0 10px rgba(255, 208, 0, 0.5);
}

/* ============================================================================
   7.5. SECTION WINNER - GAGNANT DU TOURNOI
   ============================================================================ */

.section-winner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    padding-top: var(--header-height-plus);
}

.winner-user-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        #d4af37 0%,
        #f4e5c3 25%,
        #d4af37 50%,
        #c5a028 75%,
        #d4af37 100%
    );
    border: 2px solid rgba(212, 175, 55, 0.8);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), 0 5px 20px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    color: #000000;
}

.winner-user-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 70%
    );
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Titre en haut */
.winner-user-title {
    font-size: 0.5rem;
    font-weight: 700;
    color: #000000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Container horizontal : Avatar+Trophée | Info */
.winner-user-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

/* Section gauche : Avatar + Trophée */
.winner-user-left {
    position: relative;
    flex-shrink: 0;
}

.winner-user-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    border: 3px solid #ffd700;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
    flex-shrink: 0;
    background: var(--color-bg-tertiary);
    position: relative;
}

.winner-user-avatar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.3);
}

.winner-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border-radius: var(--radius-full);
}

.winner-trophy {
    position: absolute;
    bottom: -8px;
    left: -8px;
    font-size: 2rem;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    animation: pulse-trophy 1s ease-in-out infinite;
    transform: rotate(-15deg);
    z-index: 10;
}

@keyframes pulse-trophy {
    0%,
    100% {
        transform: rotate(-15deg) scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.55));
        opacity: 1;
    }
    50% {
        transform: rotate(-15deg) scale(1.14);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.95));
        opacity: 1;
    }
}

/* Slow gentle sway to give life */
@keyframes sway-trophy {
    0% {
        transform: rotate(-18deg) translateY(0);
    }
    25% {
        transform: rotate(-12deg) translateY(-2px);
    }
    50% {
        transform: rotate(-15deg) translateY(0);
    }
    75% {
        transform: rotate(-20deg) translateY(1px);
    }
    100% {
        transform: rotate(-18deg) translateY(0);
    }
}

/* Small sparkle: brief brightness/scale pops */
@keyframes sparkle-trophy {
    0% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.45));
    }
    40% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.45));
        transform: rotate(-15deg) scale(1);
    }
    45% {
        filter: drop-shadow(0 0 26px rgba(255, 245, 180, 0.95));
        transform: rotate(-12deg) scale(1.16);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
        transform: rotate(-15deg) scale(1.12);
    }
    55% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
        transform: rotate(-15deg) scale(1);
    }
    100% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.45));
        transform: rotate(-15deg) scale(1);
    }
}

/* Section droite : Informations du gagnant */
.winner-user-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
}

.winner-user-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #000000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Container horizontal pour les deux groupes de points */
.winner-user-points-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
    align-items: flex-start;
    width: 100%;
}

.winner-user-points-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.winner-user-details {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.winner-user-points-container {
    margin: 0;
}

.winner-user-points,
.winner-user-points-tournoi {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #000000;
    text-shadow: none;
    display: inline-block;
}

.winner-user-congrats-message {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #000000;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-full);
    font-style: italic;
}

/* === Responsive Winner === */
@media (max-width: 768px) {
    .section-winner {
        padding: var(--spacing-md);
        padding-top: var(--header-height-plus);
    }

    .winner-user-card {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .winner-user-content {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .winner-user-info {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .winner-user-points-row {
        flex-direction: row;
        gap: var(--spacing-md);
        justify-content: flex-start;
        width: 100%;
    }

    .winner-user-points-group {
        align-items: flex-start;
        text-align: left;
        flex: 1;
    }

    .winner-user-avatar {
        width: 70px;
        height: 70px;
    }

    .winner-trophy {
        font-size: 1.75rem;
        bottom: -6px;
        left: -6px;
    }

    .winner-user-name {
        font-size: var(--font-size-base);
    }

    .winner-user-points,
    .winner-user-points-tournoi {
        font-size: var(--font-size-base);
    }

    .winner-user-congrats-message {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .section-winner {
        padding: var(--spacing-sm);
        padding-top: var(--header-height-plus);
    }

    .winner-user-card {
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .winner-user-title {
        font-size: 0.5rem;
    }

    .winner-user-content {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .winner-user-info {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .winner-user-points-row {
        flex-direction: row;
        gap: var(--spacing-sm);
        justify-content: flex-start;
    }

    .winner-user-points-group {
        flex: 1;
        align-items: flex-start;
        text-align: left;
    }

    .winner-user-avatar {
        width: 60px;
        height: 60px;
    }

    .winner-trophy {
        font-size: 1.5rem;
        bottom: -5px;
        left: -5px;
    }

    .winner-user-name {
        font-size: var(--font-size-sm);
    }

    .winner-user-details {
        font-size: 10px;
    }

    .winner-user-points,
    .winner-user-points-tournoi {
        font-size: var(--font-size-sm);
    }

    .winner-user-congrats-message {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ============================================================================
   8. SECTION SUCCESS - SYSTÈME DE SUCCÈS
   ============================================================================ */

.section-success {
    max-width: 1400px;
    margin: 0 auto;
}

.success-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.success-tabs-up,
.success-tabs-down {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.success-tabs button {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    white-space: nowrap;
    text-align: center;
}

.success-tabs button.active {
    color: var(--color-text-primary);
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
}

.button-success-points,
.button-success-vitesse,
.button-success-parties,
.button-success-amis,
.button-success-defis,
.button-success-mysteres,
.button-success-connexions,
.button-success-perfection {
    /* Styles spécifiques si nécessaire */
}

.success-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.success-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
}

.success-card-icon {
    font-size: var(--font-size-3xl);
    flex-shrink: 0;
    filter: grayscale(1) opacity(0.5);
    transition: filter var(--transition-base);
}

.success-card-text-and-bar-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.success-card-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.success-card-condition {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.success-card-progress-number {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}

.success-card-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.success-card-progress-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--gradient-success);
    border-radius: var(--radius-full);
    box-shadow: var(--glow-green);
    transition: width 0.6s ease-out;
}

@keyframes progressPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* ============================================================================
   9. SECTION PLAY - MODES DE JEU
   ============================================================================ */

.section-play {
    max-width: 1000px;
    margin: 0 auto;
}

.section-play-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-sm) 0;
    padding-top: 0px;
    min-height: 60vh;
}

.section-play-container h2 {
    font-size: var(--font-size-sm);
    text-align: center;
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
}

.play-buttons-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 600px;
    padding: 0 var(--spacing-md);
}

.play-buttons-container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.play-buttons-container button {
    width: 100%;
    aspect-ratio: 1;
    max-width: 180px;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.8) 0%,
        rgba(26, 31, 58, 0.6) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.play-buttons-container button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all var(--transition-slow);
}

.play-solo-button {
    border-color: rgba(0, 240, 255, 0.3);
}

.play-time-button {
    border-color: rgba(255, 208, 0, 0.3);
}

.play-friends-button {
    border-color: rgba(176, 0, 255, 0.3);
}

.play-tournament-button {
    border-color: rgba(0, 255, 136, 0.3);
}

.play-game-icon {
    font-size: 5rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.play-buttons-container small {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
}

/* ============================================================================
   10. SECTION FRIENDS - AMIS ET STATISTIQUES SOCIALES
   ============================================================================ */

.section-friends {
    max-width: 1400px;
    margin: 0 auto;
}

/* === Recherche et ajout === */
.section-friends-search-add {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.4) 0%,
        rgba(26, 31, 58, 0.2) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
}

.friends-search-title {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.friends-search-add-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.friends-search-input-container {
    display: flex;
    gap: var(--spacing-sm);
    box-sizing: border-box;
    width: 100%;
}

.username-input {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-sizing: border-box;
}

.username-input:focus {
    outline: none;
    border-color: var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
    background: rgba(255, 255, 255, 0.08);
}

.username-input::placeholder {
    color: var(--color-text-muted);
}

.friends-button-search {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    background: var(--gradient-neon);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--glow-cyan);
    box-sizing: border-box;
}

/* === Onglets === */
.friends-tab-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 100%;
}

.friends-tab-buttons button {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.friends-tab-buttons button.active {
    color: var(--color-text-primary);
    background: rgba(0, 240, 255, 0.15);
    box-shadow: var(--glow-cyan);
}

.friends-button-all,
.friends-button-online,
.friends-button-stats {
    /* Styles spécifiques si nécessaire */
}

/* === Container de cartes === */
.friends-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.friend-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Section gauche : Rank + Avatar */
.friend-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.friends-rank-badge {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-neon-cyan);
    text-shadow: var(--glow-cyan);
    text-align: center;
}

.friends-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-neon-purple);
    overflow: hidden;
    box-shadow: var(--glow-purple);
    flex-shrink: 0;
    background: var(--color-bg-tertiary);
}

.friends-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Section centrale : Info utilisateur */
.friend-card-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.friends-username-friendship-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.friends-username {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-friendship-emoji {
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* Plan et Status sur la même ligne */
.friend-card-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.friends-plan-badge {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-inverse);
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
}

.friends-status-text {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.friends-points-container {
    margin-top: 2px;
}

.friends-meta.points {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-neon-yellow);
    text-shadow: 0 0 10px rgba(255, 208, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Section droite : Bouton défier */
.friends-challenge-button {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--gradient-danger);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--glow-pink);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

/* === Panneau stats === */
.stats-tab-panel {
    display: none;
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.4) 0%,
        rgba(26, 31, 58, 0.2) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    text-align: center;
}

.stats-tab-panel.active {
    display: block;
}

.no-data {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    padding: var(--spacing-xl);
}

/* === Statistiques === */
.friends-stats-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.friends-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-lg);
}

.friends-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.stats-card-icon {
    font-size: var(--font-size-3xl);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.stats-card-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neon-cyan);
    text-shadow: var(--glow-cyan);
}

.stats-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

.friends-recent-challenges-section {
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.4) 0%,
        rgba(26, 31, 58, 0.2) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
}

.friends-recent-challenges-section h3 {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.recent-challenges-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* === Responsive Design === */

/* Mobile: 320px - 480px */
@media (max-width: 480px) {
    .section-friends-search-add {
        padding: var(--spacing-md);
        margin-bottom: 5px;
    }

    .friends-search-input-container {
        gap: var(--spacing-xs);
    }

    .username-input {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .friends-button-search {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-lg);
    }

    .friends-tab-buttons {
        padding: var(--spacing-xxs);
        gap: var(--spacing-xs);
        margin-bottom: 5px;
    }

    .friends-tab-buttons button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
}

/* ============================================================================
   11. SECTION SETTINGS - PARAMÈTRES (73 CLASSES)
   ============================================================================ */

.section-settings {
    max-width: 1200px;
    margin: 0 auto;
}

.settings-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* === Profil === */
.settings-profile-container {
    padding: var(--spacing-md);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.settings-profile-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

/* Container haut : Avatar (gauche) + Infos (droite) */
.settings-profile-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

/* Section gauche : Avatar + bouton */
.settings-profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Section droite : Infos de base uniquement */
.settings-profile-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
}

.settings-avatar-container {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    border: 3px solid var(--color-neon-cyan);
    overflow: hidden;
    box-shadow: var(--glow-cyan);
    background: var(--color-bg-tertiary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.settings-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    background: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.2) 0%,
        rgba(118, 75, 162, 0.2) 100%
    );
}

.settings-photo-upload-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    background: var(--gradient-neon);
    border-radius: var(--radius-full);
    box-shadow: var(--glow-cyan);
    transition: all var(--transition-base);
}

.settings-choose-avatar-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    white-space: nowrap;
}

.settings-username {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

/* === Email section === */
.settings-email-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.settings-email-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.settings-email-display p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.settings-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    text-align: center;
    white-space: nowrap;
}

.settings-btn-edit {
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.3);
}

.settings-btn-success {
    background: var(--gradient-success);
    border: none;
    box-shadow: var(--glow-green);
}

.settings-btn-cancel {
    background: var(--gradient-danger);
    border: none;
    box-shadow: var(--glow-pink);
}

.settings-btn-save {
    background: var(--gradient-primary);
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
}

.settings-email-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.settings-email-form input {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.settings-email-form input:focus {
    outline: none;
    border-color: var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
    background: rgba(255, 255, 255, 0.08);
}

.settings-member-since,
.settings-friend-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Container horizontal pour amis + plan */
.settings-stats-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.settings-plan-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-inverse);
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--glow-purple);
}

/* === Description === */
.settings-description-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.settings-description-box label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.settings-description-input {
    width: 100%;
    min-height: 100px;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: all var(--transition-base);
}

.settings-description-input:focus {
    outline: none;
    border-color: var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
    background: rgba(255, 255, 255, 0.08);
}

.settings-char-counter {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
}

.settings-char-counter span {
    color: var(--color-neon-cyan);
    font-weight: 700;
}

/* === Tabs === */
.settings-tabs {
    display: flex;
    gap: var(--spacing-xs);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.settings-tab-btn {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-tab-btn.active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

/* === Tab content === */
.settings-tab-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.settings-tab-panel {
    display: none;
    animation: fadeIn var(--transition-slow);
}

.settings-tab-panel.active {
    display: block;
}

/* === Category === */
.settings-category {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.4) 0%,
        rgba(26, 31, 58, 0.2) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
}

.settings-category h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.settings-category-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

/* === Settings items === */
.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-sizing: border-box;
}

.settings-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.settings-item-info label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
}

.settings-item-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.settings-item-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

/* === Select === */
.settings-select {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    box-sizing: border-box;
    min-width: 0;
}

.settings-select:focus {
    outline: none;
    border-color: var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
}

/* === Switch === */
.settings-switch-container {
    position: relative;
}

.settings-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch-label {
    display: block;
    cursor: pointer;
}

.settings-switch-button {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.settings-switch-button::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: var(--color-text-secondary);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.settings-switch-input:checked + .settings-switch-label .settings-switch-button {
    background: var(--gradient-success);
    border-color: var(--color-neon-green);
    box-shadow: var(--glow-green);
}

.settings-switch-input:checked
    + .settings-switch-label
    .settings-switch-button::after {
    transform: translateX(30px);
    background: var(--color-text-primary);
}

.settings-switch-input:focus + .settings-switch-label .settings-switch-button {
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.3);
}

/* === Action buttons === */
.settings-action-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.settings-action-btn.primary {
    background: var(--gradient-primary);
    border: none;
    box-shadow: var(--glow-purple);
}

.settings-action-btn.danger {
    background: var(--gradient-danger);
    border: none;
    box-shadow: var(--glow-pink);
}

/* === Notifications status === */
.settings-notification-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.status-indicator {
    width: 12px;
    height: 12px;
    background: var(--color-text-muted);
    border-radius: var(--radius-full);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-indicator.enabled {
    background: var(--color-success);
    box-shadow: var(--glow-green);
}

@keyframes statusPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.settings-status-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* === Support badge === */
.support-badge {
    display: inline-block;
    padding: 2px var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-inverse);
    background: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

.support-badge.supported {
    background: var(--gradient-success);
    box-shadow: var(--glow-green);
}

.settings-device-count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-neon-cyan);
}

/* === Color picker === */
.settings-color-picker-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.settings-color-input {
    width: 100px;
    height: 50px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.settings-color-presets {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.settings-color-preset {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.settings-color-preset.active {
    border-color: var(--color-neon-cyan);
    box-shadow: var(--glow-cyan);
}

/* ============================================================================
   12. SECTION FULLSTATISTICS - STATISTIQUES COMPLÈTES (62 CLASSES)
   ============================================================================ */

.section-fullStatistics {
    max-width: 1400px;
    margin: 0 auto;
}

.fullStatistics-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.fullStatistics-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* === Tabs === */
.fullStatistics-tabs {
    display: flex;
    gap: var(--spacing-xs);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fullStatistics-tab-btn {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.1) 0%,
        rgba(118, 75, 162, 0.1) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    overflow: hidden;
}

.fullStatistics-tab-btn.active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

.fullStatistics-tab-panel {
    display: none;
    animation: fadeIn var(--transition-slow);
}

.fullStatistics-tab-panel.active {
    display: block;
}

/* === Filter buttons === */
.fullStatistics-filter-buttons {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.fullStatistics-filter-btn {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fullStatistics-filter-btn.active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

/* === Grid de cartes === */
.fullStatistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.fullStatistics-card {
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
}

.fullStatistics-card.clickable-stat {
    cursor: pointer;
}

.fullStatistics-card-icon {
    font-size: var(--font-size-3xl);
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

.fullStatistics-card-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.fullStatistics-card-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-neon-cyan);
    text-shadow: var(--glow-cyan);
}

.fullStatistics-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* === Gameplay Container === */
.fullStatistics-gameplay-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.fullStatistics-gameplay-section {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.4) 0%,
        rgba(26, 31, 58, 0.2) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
}

.fullStatistics-gameplay-header {
    margin-bottom: var(--spacing-lg);
}

.fullStatistics-gameplay-header h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.fullStatistics-section-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.fullStatistics-gameplay-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.fullStatistics-grid-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.fullStatistics-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.fullStatistics-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.fullStatistics-card-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* === Series === */
.fullStatistics-series-section {
    background: linear-gradient(
        135deg,
        rgba(0, 255, 136, 0.05) 0%,
        rgba(0, 204, 106, 0.05) 100%
    );
    border-color: rgba(0, 255, 136, 0.2);
}

.fullStatistics-series-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.fullStatistics-series-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.fullStatistics-series-icon {
    font-size: var(--font-size-4xl);
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
}

.fullStatistics-series-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.fullStatistics-series-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.fullStatistics-series-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-neon-green);
    text-shadow: var(--glow-green);
}

.fullStatistics-series-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* === Social Container === */
.fullStatistics-social-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.fullStatistics-social-section {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.4) 0%,
        rgba(26, 31, 58, 0.2) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
}

.fullStatistics-friends-section {
    border-color: rgba(176, 0, 255, 0.2);
}

.fullStatistics-challenges-section {
    border-color: rgba(255, 0, 110, 0.2);
}

.fullStatistics-engagement-section {
    border-color: rgba(0, 240, 255, 0.2);
}

.fullStatistics-social-header {
    margin-bottom: var(--spacing-lg);
}

.fullStatistics-social-header h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.fullStatistics-social-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.fullStatistics-challenges-stats,
.fullStatistics-engagement-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.fullStatistics-social-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.fullStatistics-social-icon {
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

.fullStatistics-social-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.fullStatistics-social-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.fullStatistics-social-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-neon-purple);
}

.fullStatistics-social-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ============================================================================
   13. SECTION TOURNAMENTS - TOURNOIS
   ============================================================================ */

.section-tournaments {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* === Container === */
.tournaments-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* === Action Container === */
.tournaments-action-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* === Planned Tournament === */
.tournaments-planned {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.tournaments-planned-info h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tournaments-planned-info p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* === Countdown === */
.tournaments-countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tournaments-countdown-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tournaments-countdown-timer {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-neon-cyan);
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
    font-family: "Courier New", monospace;
}

/* === Roulette Section === */
.tournaments-roulette-section {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.1) 0%,
        rgba(118, 75, 162, 0.05) 100%
    );
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    text-align: center;
}

.tournaments-roulette-section.disabled {
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.tournaments-roulette-info h3 {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.tournaments-roulette-info p {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* === Tabs === */
.tournaments-tabs {
    display: flex;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    align-items: center;
}

.tournaments-tab-btn {
    flex: 1;
    min-width: 120px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tournaments-tab-btn.active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6), 0 0 40px rgba(118, 75, 162, 0.3);
}

/* === Tab Content === */
.tournaments-tab-content {
    margin-top: var(--spacing-xl);
}

.tournaments-tab-panel {
    display: none;
}

.tournaments-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Tournament Card === */
.tournaments-card {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-base);
}

.tournaments-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.tournaments-card-title {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tournaments-expand-icon {
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    transition: transform var(--transition-base);
    cursor: pointer;
}

/* === Status Badges === */
.tournaments-status {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tournaments-status.status-en-cours {
    background: linear-gradient(135deg, #00f5a0 0%, #00d9f5 100%);
    color: var(--color-dark);
    box-shadow: var(--glow-green);
}

.tournaments-status.status-archived {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
}

.tournaments-status.status-termine {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--color-text-primary);
}

/* === Card Info === */
.tournaments-card-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.tournaments-info-item {
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.tournaments-info-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tournaments-info-value {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* === Rules === */
.tournaments-rules {
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.tournaments-rules-title {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.tournaments-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tournaments-rules-list li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text-secondary);
    position: relative;
}

.tournaments-rules-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-neon-green);
    font-weight: 700;
}

/* === Stats === */
.tournaments-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.tournaments-stat-item {
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    text-align: center;
}

.tournaments-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
    display: block;
}

.tournaments-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    display: block;
}

/* === Dates === */
.tournaments-dates {
    display: flex;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.tournaments-date-info {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.tournaments-date-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 600;
}

.tournaments-date-value {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

/* === Actions === */
.tournaments-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* === Buttons === */
.tournaments-button-disabled,
.tournaments-button-primary,
.tournaments-button-secondary,
.tournaments-button-outline {
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-width: 150px;
}

.tournaments-button-disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    opacity: 0.5;
}

.tournaments-button-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--color-text-primary);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.4);
    border: none;
}

.tournaments-button-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tournaments-button-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid rgba(102, 126, 234, 0.5);
}

/* === Qualification Progress === */
.tournaments-qualification-container {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
}

.tournaments-qualification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.tournaments-qualification-header h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tournaments-qualification-status {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.tournaments-qualification-status.in-progress {
    background: linear-gradient(135deg, #00f5a0 0%, #00d9f5 100%);
    color: var(--color-dark);
}

/* === Progress Grid === */
.tournaments-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.tournaments-progress-item {
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    transition: all var(--transition-base);
}

.tournaments-progress-icon {
    font-size: var(--font-size-3xl);
    flex-shrink: 0;
}

.tournaments-progress-info {
    flex: 1;
}

.tournaments-progress-info h4 {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.tournaments-progress-count {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-neon-cyan);
    margin-bottom: var(--spacing-sm);
}

.tournaments-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.tournaments-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 245, 160, 0.5);
}

/* === Completion Cards === */
.tournaments-completion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.tournaments-completion-card {
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.tournaments-card-icon {
    font-size: var(--font-size-4xl);
    flex-shrink: 0;
}

.tournaments-card-content {
    flex: 1;
}

.tournaments-card-content h4 {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tournaments-card-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.tournaments-position-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
}

.tournaments-position-badge.position-pending {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
}

.tournaments-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

/* === Archived Message === */
.tournaments-archived-message {
    padding: var(--spacing-2xl);
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    text-align: center;
}

.tournaments-archived-message h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.tournaments-archived-message p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.tournaments-archived-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

/* === Containers === */
.tournaments-actuel-container,
.tournaments-participants-container,
.tournaments-mes-tournois-container,
.tournaments-historique-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* === Responsive Mobile (≤ 480px) === */
@media (max-width: 480px) {
    .section-tournaments {
        padding: var(--spacing-md);
    }

    .tournaments-tabs {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }

    .tournaments-tab-btn {
        flex: 1 1 auto;
        min-width: 100px;
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .tournaments-card {
        padding: var(--spacing-md);
    }

    .tournaments-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .tournaments-card-title {
        font-size: var(--font-size-xl);
    }

    .tournaments-card-info {
        grid-template-columns: 1fr;
    }

    .tournaments-card-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .tournaments-countdown-timer {
        font-size: var(--font-size-2xl);
    }

    .tournaments-planned {
        padding: var(--spacing-md);
    }

    .tournaments-dates {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .tournaments-actions {
        flex-direction: column;
    }

    .tournaments-button-disabled,
    .tournaments-button-primary,
    .tournaments-button-secondary,
    .tournaments-button-outline {
        width: 100%;
        min-width: unset;
    }

    .tournaments-progress-grid {
        grid-template-columns: 1fr;
    }

    .tournaments-completion-cards {
        grid-template-columns: 1fr;
    }

    .tournaments-completion-card {
        padding: var(--spacing-md);
    }

    .tournaments-qualification-container {
        padding: var(--spacing-md);
    }

    .tournaments-qualification-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* === Responsive Tablet (481px - 768px) === */
@media (min-width: 481px) and (max-width: 768px) {
    .section-tournaments {
        padding: var(--spacing-lg);
    }

    .tournaments-tabs {
        flex-wrap: wrap;
    }

    .tournaments-tab-btn {
        flex: 1 1 calc(33.333% - var(--spacing-sm));
        min-width: 100px;
        font-size: var(--font-size-sm);
    }

    .tournaments-card-info {
        grid-template-columns: repeat(2, 1fr);
    }

    .tournaments-card-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .tournaments-progress-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tournaments-completion-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === Responsive Desktop (≥ 769px) === */
@media (min-width: 769px) {
    .tournaments-card-info {
        grid-template-columns: repeat(3, 1fr);
    }

    .tournaments-card-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === Responsive Large Desktop (≥ 1025px) === */
@media (min-width: 1025px) {
    .section-tournaments {
        max-width: 1600px;
    }

    .tournaments-card-title {
        font-size: var(--font-size-3xl);
    }

    .tournaments-progress-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tournaments-completion-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================================
   14. SECTION NOTIFICATIONS
   ============================================================================ */

.section-notifications {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* === Container === */
.notifications-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* === Tabs === */
.notifications-tabs {
    display: flex;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.notifications-tab-btn {
    flex: 1;
    min-width: 120px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.notifications-tab-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    background: rgba(102, 126, 234, 0.2);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
}

.notifications-tab-btn.active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6), 0 0 40px rgba(118, 75, 162, 0.3);
}

.notifications-tab-btn.active span {
    background: rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

/* === Actions === */
.notifications-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.notifications-button-mark-read,
.notifications-button-clear {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.notifications-button-mark-read {
    color: var(--color-text-primary);
    background: linear-gradient(
        135deg,
        rgba(0, 240, 255, 0.15) 0%,
        rgba(0, 180, 255, 0.05) 100%
    );
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.notifications-button-clear {
    color: var(--color-text-primary);
    background: linear-gradient(
        135deg,
        rgba(255, 0, 110, 0.15) 0%,
        rgba(200, 0, 80, 0.05) 100%
    );
    border: 1px solid rgba(255, 0, 110, 0.3);
}

/* === Modales === */
.notifications-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity var(--transition-base);
}

.notifications-modal.hidden {
    display: none;
    opacity: 0;
}

.notifications-modal-card {
    position: relative;
    max-width: 500px;
    width: 90%;
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.95) 0%,
        rgba(26, 31, 58, 0.95) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(102, 126, 234, 0.2);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notifications-modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    cursor: pointer;
}

.notifications-modal-card h2 {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.notifications-modal-card p {
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* === Modal Actions === */
.notifications-modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

.notifications-button-cancel,
.notifications-button-delete,
.notifications-button-reject,
.notifications-button-accept {
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    min-width: 100px;
}

.notifications-button-cancel,
.notifications-button-reject {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.notifications-button-delete {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #ff006e 0%, #c80050 100%);
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.4);
}

.notifications-button-accept {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #00f5a0 0%, #00d9f5 100%);
    box-shadow: var(--glow-green);
}

/* === Invite Content === */
.notifications-invite-content {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    min-height: 100px;
}

/* ============================================================================
   15. AMÉLIORATION VISIBILITÉ DES BOUTONS - COULEURS VIVES
   ============================================================================ */

/* Boutons Home avec dégradés colorés */
/* Boutons Home - Couleur unifiée (Assiduité) */
.button-home-global,
.button-home-moi,
.button-home-amis {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: var(--color-text-primary) !important;
}

/* Boutons Success - Couleur unifiée (Assiduité) */
.button-success-points,
.button-success-vitesse,
.button-success-parties,
.button-success-amis,
.button-success-defis,
.button-success-mysteres,
.button-success-connexions,
.button-success-perfection {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: var(--color-text-primary) !important;
}

/* Boutons Friends avec couleurs distinctes */
.friends-button-all,
.friends-button-online,
.friends-button-stats {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Boutons Play avec bordures colorées épaisses */
.play-solo-button {
    border-width: 3px !important;
    border-color: var(--color-neon-cyan) !important;
    background: linear-gradient(
        135deg,
        rgba(0, 240, 255, 0.15) 0%,
        rgba(0, 184, 204, 0.1) 100%
    ) !important;
}

.play-time-button {
    border-width: 3px !important;
    border-color: var(--color-neon-yellow) !important;
    background: linear-gradient(
        135deg,
        rgba(255, 208, 0, 0.15) 0%,
        rgba(204, 157, 0, 0.1) 100%
    ) !important;
}

.play-friends-button {
    border-width: 3px !important;
    border-color: var(--color-neon-purple) !important;
    background: linear-gradient(
        135deg,
        rgba(176, 0, 255, 0.15) 0%,
        rgba(136, 0, 204, 0.1) 100%
    ) !important;
}

.play-tournament-button {
    border-width: 3px !important;
    border-color: var(--color-neon-green) !important;
    background: linear-gradient(
        135deg,
        rgba(0, 255, 136, 0.15) 0%,
        rgba(0, 204, 106, 0.1) 100%
    ) !important;
}

/* ============================================================================
   16. RESPONSIVE DESIGN - 320px À 2000px (MOBILE FIRST)
   ============================================================================ */

/* === MOBILE (320px - 480px) : Déjà pris en charge par défaut === */

/* Amélioration pour très petits écrans */
@media (max-width: 480px) {
    .header-container {
        padding: 0 var(--spacing-sm);
    }

    .avatar {
        width: 35px;
        height: 35px;
    }

    .right-section button {
        width: 35px;
        height: 35px;
    }

    .right-section button img {
        width: 18px;
        height: 18px;
    }

    .player-name {
        font-size: var(--font-size-sm) !important;
        max-width: 70px;
    }

    .general-stats-value {
        font-size: var(--font-size-xs) !important;
    }

    /* SUCCESS TABS : Maintenir 4+4 layout sur mobile */
    .success-tabs-up,
    .success-tabs-down {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }

    .success-tabs button {
        padding: var(--spacing-sm) var(--spacing-xs);
        font-size: var(--font-size-xs);
        white-space: normal;
        word-break: break-word;
        min-height: 45px;
    }

    /* HOME TABS : Responsive mobile */
    .home-tabs {
        flex-direction: row;
        gap: var(--spacing-xs);
    }

    .home-tabs button {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
        min-width: 0;
        flex: 1;
    }

    /* SUCCESS CARD : Layout mobile compact */
    .success-card {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .success-card-icon {
        font-size: var(--font-size-2xl);
    }

    .success-card-title {
        font-size: var(--font-size-sm);
    }

    .success-card-condition {
        font-size: 0.7rem;
    }

    .success-card-progress-number {
        font-size: 0.65rem;
    }

    .success-card-progress-bar {
        height: 3px;
    }

    /* PLAY SECTION : Mobile responsive */
    .section-play-container {
        min-height: 50vh;
    }

    .section-play-container h2 {
        font-size: var(--font-size-sm);
    }

    .play-buttons-container {
        gap: var(--spacing-sm);
        max-width: 100%;
    }

    .play-buttons-container button {
        max-width: 100px;
        padding: var(--spacing-sm);
    }

    .play-game-icon {
        font-size: 3.5rem;
    }

    .play-buttons-container small {
        font-size: var(--font-size-xs);
    }

    /* fullStatistics tabs responsive mobile */
    .fullStatistics-tabs {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }

    .fullStatistics-tab-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    /* fullStatistics filter buttons responsive mobile */
    .fullStatistics-filter-buttons {
        gap: var(--spacing-xs);
    }

    .fullStatistics-filter-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    /* FOOTER : Ajustement critique pour mobile */
    .button-container {
        padding: 0 var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .button-container button {
        max-width: 55px;
        height: 45px;
        min-width: 50px;
    }

    .button-container button img {
        width: 20px;
        height: 20px;
    }

    /* SETTINGS : Layout vertical pour mobile */
    .settings-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .settings-item-info {
        width: 100%;
    }

    .settings-item-controls {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .settings-select {
        width: 100%;
        box-sizing: border-box;
    }

    .settings-switch-container {
        align-self: flex-start;
    }

    /* NOTIFICATIONS : Responsive mobile */
    .section-notifications {
        padding: var(--spacing-md);
    }

    .notifications-tabs {
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }

    .notifications-tab-btn {
        min-width: 0;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .notifications-tab-btn span {
        min-width: 20px;
        height: 20px;
        font-size: var(--font-size-xs);
    }

    .notifications-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .notifications-button-mark-read,
    .notifications-button-clear {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .notifications-modal-card {
        width: 95%;
        padding: var(--spacing-lg);
    }

    .notifications-modal-card h2 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
    }

    .notifications-modal-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .notifications-button-cancel,
    .notifications-button-delete,
    .notifications-button-reject,
    .notifications-button-accept {
        width: 100%;
        min-width: 0;
    }
}

/* === SMALL TABLETS (481px+) === */
@media (min-width: 481px) {
    :root {
        --header-height: 65px;
        --footer-height: 95px;
        --font-size-xs: 0.8rem;
        --font-size-sm: 0.9rem;
        --font-size-base: 1.05rem;
        --font-size-lg: 1.2rem;
        --font-size-xl: 1.35rem;
        --font-size-2xl: 1.6rem;
        --font-size-3xl: 2rem;
        --font-size-4xl: 2.4rem;
    }

    .avatar {
        width: 45px;
        height: 45px;
    }

    /* SUCCESS TABS : Maintenir 4+4 layout */
    .success-tabs-up,
    .success-tabs-down {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-sm);
    }

    .success-tabs button {
        padding: var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* HOME TABS : Responsive tablette */
    .home-tabs {
        flex-direction: row;
    }

    .home-tabs button {
        padding: var(--spacing-md);
        font-size: var(--font-size-base);
    }

    /* SUCCESS CARD : Layout tablette */
    .success-card {
        padding: var(--spacing-md);
    }

    .success-card-icon {
        font-size: var(--font-size-3xl);
    }

    .success-card-title {
        font-size: var(--font-size-base);
    }

    .success-card-condition {
        font-size: var(--font-size-xs);
    }

    /* PLAY SECTION : Tablette responsive */
    .play-buttons-container button {
        max-width: 160px;
    }

    .play-game-icon {
        font-size: 3.5rem;
    }

    .play-buttons-container small {
        font-size: var(--font-size-sm);
    }

    /* FRIEND CARD : Tablette responsive */
    .friend-card {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .friends-avatar {
        width: 70px;
        height: 70px;
    }

    .friends-rank-badge {
        font-size: var(--font-size-base);
    }

    .friends-username {
        font-size: var(--font-size-lg);
    }

    .friends-meta.points {
        font-size: var(--font-size-base);
    }

    .friends-challenge-button {
        padding: var(--spacing-md) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* Footer amélioré pour small tablets */
    .button-container {
        padding: 0 var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .button-container button {
        max-width: 70px;
        height: 52px;
    }

    .button-container button img {
        width: 22px;
        height: 22px;
    }

    .home-card-container {
        gap: var(--spacing-lg);
    }

    .success-card-container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .friends-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .play-buttons-container {
        max-width: 500px;
    }

    /* fullStatistics tabs responsive 481px */
    .fullStatistics-tabs {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .fullStatistics-tab-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-base);
    }

    /* fullStatistics filter buttons responsive 481px */
    .fullStatistics-filter-buttons {
        gap: var(--spacing-sm);
    }

    .fullStatistics-filter-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* Settings profile responsive 481px */
    .settings-profile-top {
        flex-direction: row;
        gap: var(--spacing-lg);
    }

    .settings-avatar-container {
        width: 100px;
        height: 100px;
    }

    .settings-username {
        font-size: var(--font-size-xl);
    }

    /* Settings tabs responsive 481px */
    .settings-tabs {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .settings-tab-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}

/* === TABLETS (769px+) === */
@media (min-width: 769px) {
    :root {
        --header-height: 70px;
        --footer-height: 80px;
        --spacing-xs: 0.3rem;
        --spacing-sm: 0.6rem;
        --spacing-md: 1.2rem;
        --spacing-lg: 1.8rem;
        --spacing-xl: 2.4rem;
        --spacing-2xl: 3.6rem;
        --spacing-3xl: 4.8rem;
    }

    .header-container {
        padding: 0 var(--spacing-xl);
    }

    .avatar {
        width: 50px;
        height: 50px;
    }

    /* CORRECTION: Réafficher player-info à partir de 769px */
    .player-info {
        display: flex !important;
        flex-direction: column;
        gap: var(--spacing-xs);
        min-width: 0;
    }

    .player-name {
        font-size: var(--font-size-lg);
        max-width: none;
    }

    .general-stats-container {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .general-stats-value {
        font-size: var(--font-size-base);
    }

    .button-container {
        padding: 0 var(--spacing-xl);
        gap: var(--spacing-md);
    }

    .button-container button {
        max-width: 100px;
        height: 60px;
    }

    .button-container button img {
        width: 28px;
        height: 28px;
    }

    /* Sections en 2 colonnes */
    .home-tabs {
        flex-direction: row;
    }

    .home-tabs button {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-lg);
    }

    /* SUCCESS CARD : Layout desktop */
    .success-card {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .success-card-icon {
        font-size: var(--font-size-4xl);
    }

    .success-card-title {
        font-size: var(--font-size-lg);
    }

    .success-card-condition {
        font-size: var(--font-size-sm);
    }

    .success-card-progress-bar {
        height: 5px;
    }

    /* PLAY SECTION : Desktop responsive */
    .section-play-container {
        min-height: 60vh;
    }

    .section-play-container h2 {
        font-size: var(--font-size-sm);
    }

    .play-buttons-container button {
        max-width: 180px;
    }

    .play-game-icon {
        font-size: 3.5rem;
    }

    .play-buttons-container small {
        font-size: var(--font-size-base);
    }

    /* FRIEND CARD : Desktop responsive */
    .friend-card {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .friends-avatar {
        width: 80px;
        height: 80px;
    }

    .friends-rank-badge {
        font-size: var(--font-size-lg);
    }

    .friends-username {
        font-size: var(--font-size-xl);
    }

    .friends-meta.points {
        font-size: var(--font-size-lg);
    }

    .friends-challenge-button {
        padding: var(--spacing-md) var(--spacing-xs);
        font-size: var(--font-size-sm);
    }

    /* Avatar plus grand sur tablette */
    .home-user-avatar {
        width: 70px;
        height: 70px;
    }

    .home-user-rank {
        font-size: var(--font-size-base);
    }

    .home-user-name {
        font-size: var(--font-size-lg);
    }

    .home-user-points {
        font-size: var(--font-size-xl);
    }

    .success-tabs-up,
    .success-tabs-down {
        grid-template-columns: repeat(4, 1fr);
    }

    .success-card-container {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .friends-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .friends-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Settings tabs responsive 769px */
    .settings-tabs {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .settings-tab-btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
    }

    .settings-item {
        flex-direction: row;
        align-items: center;
    }

    .fullStatistics-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    /* fullStatistics tabs responsive 769px */
    .fullStatistics-tabs {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .fullStatistics-tab-btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-lg);
    }

    /* fullStatistics filter buttons responsive 769px */
    .fullStatistics-filter-btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    /* Play buttons en grille 2x2 */
    .section-play-container {
        padding: var(--spacing-sm) 0;
    }

    .play-buttons-container {
        max-width: 600px;
    }

    /* NOTIFICATIONS : Responsive tablet */
    .notifications-tabs {
        flex-direction: row;
    }

    .notifications-tab-btn {
        min-width: 140px;
    }

    .notifications-actions {
        flex-direction: row;
    }

    .notifications-button-mark-read,
    .notifications-button-clear {
        width: auto;
    }

    .notifications-modal-actions {
        flex-direction: row;
    }

    .notifications-button-cancel,
    .notifications-button-delete,
    .notifications-button-reject,
    .notifications-button-accept {
        width: auto;
    }
}

/* === LAPTOPS (1025px+) === */
@media (min-width: 1025px) {
    :root {
        --header-height: 75px;
        --footer-height: 85px;
        --font-size-base: 1.1rem;
        --font-size-lg: 1.3rem;
        --font-size-xl: 1.5rem;
        --font-size-2xl: 1.75rem;
        --font-size-3xl: 2.25rem;
        --font-size-4xl: 2.75rem;
    }

    .header-container {
        padding: 0 var(--spacing-2xl);
    }

    .avatar {
        width: 55px;
        height: 55px;
    }

    /* Player info visible et bien stylé sur laptop */
    .player-info {
        display: flex !important;
    }

    .player-name {
        font-size: var(--font-size-lg);
    }

    .general-stats-value {
        font-size: var(--font-size-base);
    }

    /* Footer laptop - plus d'espace */
    .button-container button {
        max-width: 90px;
        height: 62px;
    }

    .button-container button img {
        width: 26px;
        height: 26px;
    }

    #main-content > div[class^="section-"] {
        padding: var(--spacing-2xl);
    }

    /* SUCCESS CARD : Layout laptop */
    .success-card-icon {
        font-size: 3rem;
    }

    .success-card-title {
        font-size: var(--font-size-xl);
    }

    .success-card-progress-bar {
        height: 6px;
    }

    /* PLAY SECTION : Laptop responsive */
    .section-play-container h2 {
        font-size: var(--font-size-sm);
    }

    .play-buttons-container button {
        max-width: 200px;
    }

    .play-game-icon {
        font-size: 3.5rem;
    }

    .play-buttons-container small {
        font-size: var(--font-size-lg);
    }

    /* FRIEND CARD : Laptop responsive */
    .friend-card {
        padding: var(--spacing-lg);
    }

    .friends-avatar {
        width: 90px;
        height: 90px;
    }

    .friends-rank-badge {
        font-size: var(--font-size-xl);
    }

    .friends-username {
        font-size: var(--font-size-2xl);
    }

    .friends-plan-badge,
    .friends-status-text {
        font-size: var(--font-size-sm);
    }

    .friends-meta.points {
        font-size: var(--font-size-xl);
    }

    .friends-challenge-button {
        padding: var(--spacing-md) var(--spacing-xs);
        font-size: var(--font-size-sm);
    }

    /* fullStatistics tabs responsive 1025px */
    .fullStatistics-tab-btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-lg);
    }

    /* fullStatistics filter buttons responsive 1025px */
    .fullStatistics-filter-btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
    }

    /* Layout optimisé 3 colonnes */
    .home-card-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: var(--spacing-xl);
    }

    .home-tabs button {
        padding: var(--spacing-lg);
        font-size: var(--font-size-xl);
    }

    /* Avatar encore plus grand sur laptop */
    .home-user-avatar {
        width: 80px;
        height: 80px;
    }

    .home-user-rank {
        font-size: var(--font-size-lg);
    }

    .home-user-name {
        font-size: var(--font-size-xl);
    }

    .home-user-plan,
    .home-user-status {
        font-size: var(--font-size-sm);
    }

    .home-user-points {
        font-size: var(--font-size-2xl);
    }

    .success-card-container {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }

    .friends-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .friends-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Settings en 2 colonnes pour certains éléments */
    .settings-profile-container {
        padding: var(--spacing-xl);
    }

    .settings-profile-top {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--spacing-xl);
    }

    .settings-avatar-container {
        width: 120px;
        height: 120px;
    }

    .settings-choose-avatar-btn {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .settings-username {
        font-size: var(--font-size-xl);
    }

    .settings-stats-row {
        gap: var(--spacing-lg);
    }

    .settings-member-since,
    .settings-friend-count {
        font-size: var(--font-size-base);
    }

    .settings-plan-badge {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    /* Settings tabs responsive 1025px */
    .settings-tab-btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }

    .settings-email-display {
        padding: var(--spacing-md);
    }

    .settings-email-display p {
        font-size: var(--font-size-sm);
    }

    .settings-description-box label {
        font-size: var(--font-size-sm);
    }

    .settings-avatar-container {
        width: 140px;
        height: 140px;
    }

    .settings-item {
        padding: var(--spacing-xl);
    }

    /* FullStatistics optimisé */
    .fullStatistics-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .fullStatistics-social-stats {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    /* Play buttons en ligne */
    .play-buttons-container {
        max-width: 800px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .play-buttons-container button {
        flex: 1 1 calc(50% - var(--spacing-sm));
        min-width: 250px;
    }
}

/* === LARGE SCREENS (1441px+) === */
@media (min-width: 1441px) {
    :root {
        --header-height: 80px;
        --footer-height: 90px;
        --font-size-base: 1.125rem;
        --font-size-lg: 1.375rem;
        --font-size-xl: 1.625rem;
        --font-size-2xl: 1.875rem;
        --font-size-3xl: 2.5rem;
        --font-size-4xl: 3rem;
        --spacing-xl: 2.5rem;
        --spacing-2xl: 4rem;
        --spacing-3xl: 5.5rem;
    }

    .header-container {
        padding: 0 var(--spacing-3xl);
    }

    .avatar {
        width: 60px;
        height: 60px;
    }

    /* Player info visible sur large desktop */
    .player-info {
        display: flex !important;
    }

    .player-name {
        font-size: var(--font-size-lg);
    }

    .button-container {
        padding: 0 var(--spacing-3xl);
    }

    .button-container button {
        max-width: 120px;
        height: 65px;
    }

    .button-container button img {
        width: 32px;
        height: 32px;
    }

    /* Sections max-width augmentée */
    .section-home {
        max-width: 1400px;
        padding-top: 0;
    }

    /* Avatar grand sur large desktop */
    .home-user-avatar {
        width: 90px;
        height: 90px;
    }

    .home-user-rank {
        font-size: var(--font-size-xl);
    }

    .home-user-name {
        font-size: var(--font-size-2xl);
    }

    .home-user-points {
        font-size: var(--font-size-3xl);
    }

    .section-success {
        max-width: 1600px;
    }

    .section-friends {
        max-width: 1600px;
    }

    .section-settings {
        max-width: 1400px;
    }

    .section-fullStatistics {
        max-width: 1600px;
    }

    /* Grilles 4+ colonnes */
    .home-card-container {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    }

    .success-card-container {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }

    .friends-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }

    .friends-stats-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .fullStatistics-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .settings-avatar-container {
        width: 160px;
        height: 160px;
    }

    /* Play buttons 4 colonnes */
    .play-buttons-container {
        max-width: 1000px;
        flex-direction: row;
    }

    .play-buttons-container button {
        flex: 1 1 calc(25% - var(--spacing-sm));
        max-width: none;
    }
}

/* === ULTRA WIDE (1920px+) === */
@media (min-width: 1920px) {
    :root {
        --header-height: 90px;
        --font-size-base: 1.2rem;
        --font-size-lg: 1.5rem;
        --font-size-xl: 1.75rem;
        --font-size-2xl: 2rem;
        --font-size-3xl: 2.75rem;
        --font-size-4xl: 3.5rem;
    }

    .avatar {
        width: 70px;
        height: 70px;
    }

    /* Avatar maximum sur ultra wide */
    .home-user-avatar {
        width: 100px;
        height: 100px;
    }

    .home-user-rank {
        font-size: var(--font-size-2xl);
    }

    .home-user-name {
        font-size: var(--font-size-3xl);
    }

    .home-user-points {
        font-size: var(--font-size-4xl);
    }

    /* Player info visible sur ultra wide */
    .player-info {
        display: flex !important;
    }

    .player-name {
        font-size: var(--font-size-xl);
    }

    .general-stats-value {
        font-size: var(--font-size-lg);
    }

    .section-home,
    .section-settings {
        max-width: 1600px;
        padding-top: 0;
    }

    .section-success,
    .section-friends,
    .section-fullStatistics {
        max-width: 1800px;
    }

    .home-card-container {
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    }

    .success-card-container {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }

    .friends-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }

    .fullStatistics-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .settings-avatar-container {
        width: 180px;
        height: 180px;
    }
}

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

/* Masquer sur mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .header-container {
        gap: var(--spacing-sm);
    }

    /* CORRECTION: Garder player-info visible sur mobile mais compact */
    /* .player-info { display: none; } ← COMMENTÉ */

    .player-info {
        /* Réduire la taille sur mobile au lieu de masquer */
        font-size: 0.8rem;
    }

    .player-name {
        font-size: var(--font-size-sm) !important;
        max-width: 80px;
    }

    .general-stats-container {
        font-size: var(--font-size-xs);
    }
}

/* Afficher seulement sur desktop */
@media (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Touch optimizations pour mobile */
@media (hover: none) and (pointer: coarse) {
    button {
        min-height: 44px;
        min-width: 44px;
    }

    .settings-switch-button {
        width: 70px;
        height: 36px;
    }

    .settings-switch-button::after {
        width: 30px;
        height: 30px;
    }

    .settings-switch-input:checked
        + .settings-switch-label
        .settings-switch-button::after {
        transform: translateX(34px);
    }
}

/* ============================================================================
   17. ÉTATS FOCUS ACCESSIBILITÉ
   ============================================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-neon-cyan);
    outline-offset: 2px;
}

/* ============================================================================
   18. ANIMATIONS PERFORMANCE
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   19. PAGE CONNEXION/INSCRIPTION
   ============================================================================ */

/* === Container principal === */
.connexion-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--gradient-dark);
    background-attachment: fixed;
}

.connexion-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.connexion-title h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
}

/* === Tabs === */
.connexion-tabs {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-xl);
}

.connexion-tabs > div:first-child {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.connexion-tabs button[data-tab] {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.connexion-tabs button[data-tab].active {
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

/* === Form container === */
.connexion-form-container {
    margin-bottom: var(--spacing-xl);
}

.form-login,
.form-register {
    display: none;
}

.form-login.active,
.form-register.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

/* === Form group === */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.form-group label input[type="checkbox"] {
    margin-right: var(--spacing-xs);
}

/* === Form inputs === */
.form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-neon-cyan);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--glow-cyan);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

/* === Password container === */
.password-container {
    position: relative;
}

.password-input {
    padding-right: 50px;
}

.password-toggle {
    position: absolute;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    z-index: 1;
}

.voir-password {
    font-size: var(--font-size-lg);
}

/* === Password strength === */
.password-strength-container {
    margin-top: var(--spacing-xs);
}

.strength-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--spacing-xs);
}

.strength-fill {
    height: 100%;
    width: 0%;
    background: var(--gradient-danger);
    transition: all var(--transition-base);
    border-radius: var(--radius-full);
}

.strength-fill.weak {
    width: 33%;
    background: var(--gradient-danger);
}

.strength-fill.medium {
    width: 66%;
    background: var(--gradient-secondary);
}

.strength-fill.strong {
    width: 100%;
    background: var(--gradient-success);
}

.strength-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* === Photo upload === */
.photo-upload {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.photo-upload span {
    color: var(--color-danger);
}

.photo-upload-container {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.photo-preview {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    border: 3px solid var(--color-neon-cyan);
    overflow: hidden;
    background: var(--color-bg-tertiary);
    position: relative;
    align-self: center;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    transition: all var(--transition-base);
}

.form-img {
    font-size: var(--font-size-4xl);
}

.photo-placeholder span {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    padding: 0 var(--spacing-xs);
}

.form-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.form-preview-image.show {
    display: block;
}

.photo-placeholder.hidden {
    display: none;
}

.photo-input {
    display: none;
}

.photo-upload-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--glow-purple);
    align-self: center;
}

.photo-help {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
}

/* === Buttons === */
.connexion-btn-connexion,
.connexion-btn-register {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    margin-top: var(--spacing-sm);
}

.connexion-btn-connexion {
    background: var(--gradient-neon);
    box-shadow: var(--glow-cyan);
}

.connexion-btn-register {
    background: var(--gradient-success);
    box-shadow: var(--glow-green);
}

/* === Forgot password === */
.forgot-password {
    text-align: center;
    margin-top: var(--spacing-md);
}

.forgot-link {
    font-size: var(--font-size-sm);
    color: var(--color-neon-cyan);
    cursor: pointer;
    transition: all var(--transition-base);
}

/* === OAuth section === */
.oauth-section {
    margin-top: var(--spacing-xl);
}

.oauth-divider {
    position: relative;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.oauth-divider::before,
.oauth-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.oauth-divider::before {
    left: 0;
}

.oauth-divider::after {
    right: 0;
}

.oauth-divider span {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: transparent;
    padding: 0 var(--spacing-sm);
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.oauth-btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.oauth-btn img {
    width: 20px;
    height: 20px;
}

/* === Responsive Connexion Page === */

/* Tablet (481px+) */
@media (min-width: 481px) {
    .connexion-container {
        padding: var(--spacing-xl);
    }

    .connexion-title h1 {
        font-size: var(--font-size-4xl);
    }

    .connexion-tabs {
        max-width: 520px;
        padding: var(--spacing-lg);
    }

    .connexion-tabs button[data-tab] {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
    }

    .form-input {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .photo-preview {
        width: 150px;
        height: 150px;
    }

    .connexion-btn-connexion,
    .connexion-btn-register {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-lg);
    }

    .oauth-btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }

    .oauth-btn img {
        width: 24px;
        height: 24px;
    }
}

/* Desktop (769px+) */
@media (min-width: 769px) {
    .connexion-tabs {
        max-width: 560px;
        padding: var(--spacing-xl);
    }

    .photo-preview {
        width: 180px;
        height: 180px;
    }

    .photo-upload-container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}

/* Laptop (1025px+) */
@media (min-width: 1025px) {
    .connexion-tabs {
        max-width: 600px;
        padding: var(--spacing-2xl);
    }
}

/* ============================================================================
   15. PAGE GAME - JEU
   ============================================================================ */

/* === Game Specific Styles === */
.game-back-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-timer-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

#game-timer {
    font-weight: 600;
    color: var(--color-neon-cyan);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    font-family: "Courier New", monospace;
}

.game-points-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

#game-header-score {
    font-weight: 600;
    color: var(--color-neon-yellow);
    text-shadow: 0 0 10px rgba(255, 208, 0, 0.5);
}

#game-notif-btn,
#style-selector-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    position: relative;
    cursor: pointer;
    font-size: var(--font-size-lg);
}

/* ============================================================================
   GAME CONTAINER - MAIN
   ============================================================================ */

.game-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* ============================================================================
   GAME GRIDS - GRILLES DE JEU
   ============================================================================ */

/* === Grid Containers === */
.game-grande-grille,
.game-moyenne-grille,
.game-petite-grille {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.game-grande-grille-section,
.game-moyenne-grille-section,
.game-petite-grille-section,
.game-grid-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* === Grid Container === */
.game-grid-container {
    display: grid;
    gap: 4px;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Grid sizes */
.game-grid-container[data-grid-size="small"] {
    grid-template-columns: repeat(7, 1fr);
    max-width: 400px;
}

.game-grid-container[data-grid-size="medium"] {
    grid-template-columns: repeat(9, 1fr);
    max-width: 500px;
}

.game-grid-container[data-grid-size="large"] {
    grid-template-columns: repeat(11, 1fr);
    max-width: 650px;
}

/* === Grid Cell === */
.game-grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    text-transform: uppercase;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-5deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
    75% {
        transform: scale(1.2) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* === Word Strikes Container === */
.game-word-strikes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* ============================================================================
   WORDS SECTION - LISTE DES MOTS
   ============================================================================ */

.game-words-section {
    padding: var(--spacing-xl);
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.6) 0%,
        rgba(26, 31, 58, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.game-words-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: var(--spacing-md);
}

.game-words-header h3 {
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.game-words-progress {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    font-weight: 600;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

#game-words-progress-text {
    color: var(--color-neon-cyan);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* === Words Grid === */
.game-words-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

/* === Word Item === */
.game-words-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.game-words-item.found {
    background: linear-gradient(135deg, #00f5a0 0%, #00d9f5 100%);
    border-color: #00f5a0;
    color: var(--color-dark);
    text-decoration: line-through;
    box-shadow: var(--glow-green);
    cursor: default;
    animation: wordFound 0.5s ease;
}

@keyframes wordFound {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.15) rotate(-3deg);
    }
    50% {
        transform: scale(1.1) rotate(3deg);
    }
    75% {
        transform: scale(1.15) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ============================================================================
   RESPONSIVE - GAME PAGE
   ============================================================================ */

/* ============================================================================
   GAME PAGE - RESPONSIVE
   ============================================================================ */

/* === Mobile (≤ 480px) === */
@media (max-width: 480px) {
    .game-container {
        padding: var(--spacing-md);
        gap: var(--spacing-lg);
    }

    .game-grande-grille-section,
    .game-moyenne-grille-section,
    .game-petite-grille-section,
    .game-grid-section {
        padding: var(--spacing-sm);
    }

    .game-grid-container {
        gap: 2px;
        padding: var(--spacing-xs);
    }

    .game-grid-cell {
        font-size: var(--font-size-sm);
        border-width: 1px;
    }

    .game-grid-container[data-grid-size="small"] {
        max-width: 280px;
    }

    .game-grid-container[data-grid-size="medium"] {
        max-width: 320px;
    }

    .game-grid-container[data-grid-size="large"] {
        max-width: 100%;
    }

    .game-words-section {
        padding: var(--spacing-md);
    }

    .game-words-header h3 {
        font-size: var(--font-size-xl);
    }

    .game-words-grid {
        gap: var(--spacing-xs);
    }

    .game-words-item {
        padding: var(--spacing-xs);
        font-size: 10px;
    }
}

/* === Tablet (481px - 768px) === */
@media (min-width: 481px) and (max-width: 768px) {
    .game-container {
        padding: var(--spacing-lg);
    }

    .game-grid-container[data-grid-size="small"] {
        max-width: 350px;
    }

    .game-grid-container[data-grid-size="medium"] {
        max-width: 450px;
    }

    .game-grid-container[data-grid-size="large"] {
        max-width: 550px;
    }
}

/* === Desktop (≥ 769px) === */
@media (min-width: 769px) {
    .game-header-container {
        padding: var(--spacing-lg) var(--spacing-2xl);
    }

    .game-grid-cell {
        font-size: var(--font-size-xl);
    }
}

/* === Large Desktop (≥ 1025px) === */
@media (min-width: 1025px) {
    .game-container {
        max-width: 1800px;
    }

    .game-grid-container[data-grid-size="large"] {
        max-width: 750px;
    }
}

/* === Extra Large Desktop (≥ 1400px) === */
@media (min-width: 1400px) {
    .game-grid-container[data-grid-size="large"] {
        max-width: 800px;
    }

    .game-grid-cell {
        font-size: var(--font-size-2xl);
    }
}

/* ============================================================================
   SECTION PLANS - TARIFICATION ET ABONNEMENTS
   Design cohérent avec le thème gaming néon
   Responsive: Mobile First (320px → 2000px)
   ============================================================================ */

.section-plans {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    padding-top: var(--header-height-plus);
}

.plans-container {
    width: 100%;
}

.plans-subscription-container {
    width: 100%;
}

/* === Header de la section === */
.plans-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding: 0 var(--spacing-md);
}

.plans-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    background: var(--gradient-neon);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
}

.plans-header .subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* === Grille des plans === */
.plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

/* === Cartes de plans === */
.plans-card {
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.8) 0%,
        rgba(26, 31, 58, 0.6) 100%
    );
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
}

.plans-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
    pointer-events: none;
}

/* === Styles spécifiques par plan === */
.plans-card.basic {
    border-color: rgba(102, 126, 234, 0.4);
}

.plans-card.pro {
    border-color: rgba(176, 0, 255, 0.5);
    position: relative;
}

.plans-card.elite {
    border-color: rgba(255, 208, 0, 0.5);
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(30, 36, 68, 0.8) 50%
    );
}

/* === Badge Populaire === */
.plans-card-popular-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--gradient-secondary);
    color: var(--color-text-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--glow-pink);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 110, 0.8);
    }
}

/* === Header de la carte === */
.plans-card-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.plans-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
    background: var(--gradient-neon);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-cyan);
}

.plans-card-name {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === Prix === */
.plans-card-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.plans-card-price .currency {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-neon-cyan);
}

.plans-card-price .amount {
    font-size: var(--font-size-4xl);
    font-weight: 900;
    color: var(--color-text-primary);
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.plans-card-price .period {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* === Badge Plan Actuel === */
.plans-card-badge {
    display: inline-block;
    background: var(--gradient-success);
    color: var(--color-text-inverse);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
    box-shadow: var(--glow-green);
}

.plans-card-badge.hidden {
    display: none;
}

/* === Fonctionnalités === */
.plans-card-features {
    flex: 1;
    margin-bottom: var(--spacing-xl);
}

.plans-card-features h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.plans-card-features h3:first-child {
    margin-top: 0;
}

.plans-card-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plans-card-features li {
    position: relative;
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    transition: color var(--transition-base);
}

.plans-card-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-success);
    font-weight: 700;
    font-size: var(--font-size-lg);
    text-shadow: var(--glow-green);
}

.plans-card-features ul.restrictions li::before {
    content: "✗";
    color: var(--color-danger);
    text-shadow: var(--glow-pink);
}

/* === Section Exclusivités Elite === */
.plans-card-elite-exclusive {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(
        135deg,
        rgba(255, 208, 0, 0.1) 0%,
        rgba(212, 175, 55, 0.05) 100%
    );
    border: 1px solid rgba(255, 208, 0, 0.3);
    border-radius: var(--radius-lg);
    position: relative;
}

.plans-card-elite-exclusive::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 208, 0, 0.2),
        transparent
    );
    border-radius: var(--radius-lg);
    z-index: -1;
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.plans-card-elite-exclusive h3 {
    color: var(--color-neon-yellow);
    text-shadow: 0 0 10px rgba(255, 208, 0, 0.5);
    margin-top: 0;
}

/* === Bouton de sélection === */
.plans-card-button {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    background: var(--gradient-primary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.plans-card-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: -1;
}

.plans-card-button:active {
    transform: translateY(0);
}

/* Boutons spécifiques par plan */
.plans-card.basic .plans-card-button {
    background: var(--gradient-primary);
}

.plans-card.pro .plans-card-button {
    background: linear-gradient(135deg, #b000ff 0%, #764ba2 100%);
}

.plans-card.elite .plans-card-button {
    background: linear-gradient(135deg, #ffd000 0%, #d4af37 100%);
    color: var(--color-text-inverse);
}

/* === Footer de la section === */
.plans-footer {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    margin-top: var(--spacing-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.plans-footer-security-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.plans-footer-support-info {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.plans-footer-support-info .support-link {
    color: var(--color-neon-cyan);
    text-decoration: underline;
    transition: color var(--transition-base);
}

/* ============================================================================
   RESPONSIVE - SECTION PLANS
   ============================================================================ */

/* === Tablet (481px - 768px) === */
@media (min-width: 481px) {
    .plans-header h1 {
        font-size: var(--font-size-4xl);
    }

    .plans-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .plans-card {
        padding: var(--spacing-2xl);
    }

    .plans-card-name {
        font-size: var(--font-size-3xl);
    }

    .plans-card-price .amount {
        font-size: 3rem;
    }
}

/* === Desktop (769px - 1024px) === */
@media (min-width: 769px) {
    .section-plans {
        padding: var(--spacing-2xl);
        padding-top: var(--header-height-plus);
    }

    .plans-header h1 {
        font-size: 3rem;
    }

    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }

    .plans-card.pro {
        grid-column: span 2;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* === Large Desktop (1025px - 1399px) === */
@media (min-width: 1025px) {
    .plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .plans-card.pro {
        grid-column: span 1;
        max-width: none;
        margin: 0;
    }

    .plans-card {
        min-height: 700px;
    }
}

/* === Extra Large Desktop (≥ 1400px) === */
@media (min-width: 1400px) {
    .section-plans {
        padding: var(--spacing-3xl);
        padding-top: calc(var(--header-height) + var(--spacing-3xl));
    }

    .plans-header h1 {
        font-size: 3.5rem;
    }

    .plans-header .subtitle {
        font-size: var(--font-size-xl);
    }

    .plans-grid {
        gap: var(--spacing-2xl);
    }

    .plans-card {
        padding: var(--spacing-3xl);
    }

    .plans-card-icon {
        width: 80px;
        height: 80px;
    }

    .plans-card-name {
        font-size: 2.5rem;
    }

    .plans-card-price .amount {
        font-size: 3.5rem;
    }

    .plans-card-features li {
        font-size: var(--font-size-lg);
    }

    .plans-card-button {
        font-size: var(--font-size-xl);
        padding: var(--spacing-lg) var(--spacing-2xl);
    }
}

/* === Animation d'entrée === */
@media (prefers-reduced-motion: no-preference) {
    .plans-card {
        animation: fadeInUp 0.6s ease-out backwards;
    }

    .plans-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .plans-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .plans-card:nth-child(3) {
        animation-delay: 0.3s;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ===============================================
   STYLE AMÉLIORÉ POUR LE LOGO DE CONNEXION  
   =============================================== */
.logo-border-frame {
    position: relative;
    display: inline-block;
    padding: 20px;
    background: linear-gradient(135deg, #1a1f3a 0%, #252b52 50%, #1a1f3a 100%);
    border-radius: 20px;
    border: 3px solid;
    border-image: linear-gradient(45deg, #00f0ff, #00cc6a, #ffaa00, #ff6b9d) 1;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4);
    margin-bottom: 1.5rem;
    animation: logoGlow 3s ease-in-out infinite alternate;
}

.logo-border-frame::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #00f0ff, #00cc6a, #ffaa00, #ff6b9d);
    border-radius: 23px;
    z-index: -1;
    animation: borderRotate 4s linear infinite;
}

.logo-border-frame::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background: radial-gradient(
        circle,
        transparent 60%,
        rgba(0, 240, 255, 0.1) 70%,
        transparent 80%
    );
    border-radius: 25px;
    z-index: -2;
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes logoGlow {
    0% {
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.3),
            inset 0 0 20px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.4);
    }
    100% {
        box-shadow: 0 0 50px rgba(0, 240, 255, 0.6),
            inset 0 0 30px rgba(0, 0, 0, 0.2), 0 12px 48px rgba(0, 0, 0, 0.6);
    }
}

@keyframes borderRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {
    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.connexion-logo {
    width: 120px;
    height: 120px;
    display: block;
    transition: transform 0.3s ease;
    /* SVG maintenant transparent - effet gaming */
    filter: drop-shadow(0 4px 12px rgba(0, 240, 255, 0.4))
        drop-shadow(0 0 8px rgba(0, 204, 106, 0.3)) brightness(1.1) contrast(1.1);
    /* Fond complètement transparent */
    background: transparent;
}

.logo-border-frame:hover .connexion-logo {
    transform: scale(1.05);
}

.connexion-title {
    text-align: center;
    margin-bottom: 2rem;
}

.connexion-title h1 {
    color: #00f0ff;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 240, 255, 0.4);
    margin-top: 1rem;
    background: linear-gradient(135deg, #00f0ff 0%, #00cc6a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

/* Amélioration du centrage des formulaires */
.connexion-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    max-width: 500px;
    margin: 0 auto;
}

.connexion-form-container {
    width: 100%;
    max-width: 400px;
}

.connexion-tabs {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 400px;
}

.connexion-tabs div {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.connexion-tabs button {
    flex: 1;
    padding: 0.8rem 1.5rem;
    border: 2px solid rgba(0, 240, 255, 0.3);
    background: rgba(26, 31, 58, 0.8);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.connexion-tabs button.tab-active,
.connexion-tabs button:hover {
    border-color: #00f0ff;
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    transform: translateY(-2px);
}

/* Overlay SVG pour les traits de sélection */
.selection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* État de sélection de la cellule de départ */
.game-grid-cell.selecting {
    background: rgba(0, 240, 255, 0.3) !important;
    transform: scale(1.05);
    transition: all 0.15s ease-out;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 240, 255, 0.5) !important;
}

/* Animation pour les lignes de sélection */
.word-selection-line {
    transition: stroke-width 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Curseur pour indiquer la sélection possible */
.game-grid-cell {
    cursor: pointer;
    user-select: none;
    color: #000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15),
        inset 0 -1px 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.game-grid-cell:hover {
    transition: all 0.15s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 -1px 1px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   SECTION VALIDATION EMAIL
   ============================================================================ */

.email-validation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    backdrop-filter: blur(8px);
}

.email-validation-content {
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.95) 0%,
        rgba(26, 31, 58, 0.9) 100%
    );
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

.email-validation-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
            circle at 20% 50%,
            rgba(0, 240, 255, 0.1) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(176, 0, 255, 0.1) 0%,
            transparent 50%
        );
    pointer-events: none;
}

.validation-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
    color: var(--color-success);
    text-shadow: var(--glow-green);
    animation: pulse 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.validation-icon.error {
    color: var(--color-danger);
    text-shadow: var(--glow-pink);
}

#validation-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
    background: var(--gradient-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

#validation-title.error {
    background: var(--gradient-danger);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#validation-message {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.validation-actions {
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

.validation-btn {
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.validation-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.validation-countdown {
    color: var(--color-neon-cyan);
    font-size: var(--font-size-sm);
    position: relative;
    z-index: 1;
}

#countdown-timer {
    font-weight: 700;
    text-shadow: var(--glow-cyan);
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .email-validation-content {
        padding: var(--spacing-lg);
    }

    .validation-icon {
        font-size: 3rem;
    }

    #validation-title {
        font-size: var(--font-size-xl);
    }

    #validation-message {
        font-size: var(--font-size-base);
    }
}

/* ============================================================================
   LOGO DE CONNEXION
   ============================================================================ */

.logo-container {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.connexion-logo {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.4));
    animation: logoGlow 3s ease-in-out infinite alternate;
    transition: all var(--transition-base);
}

.connexion-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 25px rgba(0, 240, 255, 0.6));
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.4));
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.5));
    }
}

/* Responsive pour le logo */
@media (max-width: 480px) {
    .connexion-logo {
        width: 80px;
        height: 80px;
    }
}

/* ============================================================================
   SECTION VALIDATION EMAIL DANS INDEX.HTML
   ============================================================================ */

.email-verification-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0e27 0%, #151933 100%);
    background-image: radial-gradient(
            circle at 20% 50%,
            rgba(0, 240, 255, 0.05) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(176, 0, 255, 0.05) 0%,
            transparent 50%
        );
}

.verification-content {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(30, 36, 68, 0.95) 0%,
        rgba(26, 31, 58, 0.9) 100%
    );
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-xl);
}

.verification-header {
    margin-bottom: var(--spacing-2xl);
}

.verification-logo {
    margin-bottom: var(--spacing-lg);
}

.verification-logo img {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.4));
}

.verification-app-title {
    font-size: var(--font-size-2xl);
    font-weight: 900;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, #00f0ff 0%, #00cc6a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.verification-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}

.verification-loading,
.verification-success,
.verification-error {
    margin-bottom: var(--spacing-xl);
}

.loading-spinner {
    margin-bottom: var(--spacing-lg);
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 240, 255, 0.2);
    border-top: 3px solid var(--color-neon-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-title,
.success-title,
.error-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.success-title {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title {
    color: var(--color-danger);
}

.loading-text,
.success-message,
.error-message {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.success-icon,
.error-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
}

.success-icon {
    color: var(--color-success);
    text-shadow: var(--glow-green);
}

.error-icon {
    color: var(--color-danger);
    text-shadow: var(--glow-pink);
}

.info-box {
    background: linear-gradient(
        135deg,
        rgba(0, 240, 255, 0.1) 0%,
        rgba(0, 255, 136, 0.05) 100%
    );
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.info-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-neon-cyan);
    margin-bottom: var(--spacing-sm);
}

.info-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.verification-btn {
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    margin: var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.verification-btn-primary {
    background: linear-gradient(135deg, #00f0ff 0%, #00cc6a 100%);
    color: #0a0e27;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.verification-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
}

.redirect-info {
    margin-top: var(--spacing-lg);
    color: var(--color-neon-cyan);
    font-size: var(--font-size-sm);
}

.verification-footer {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .verification-content {
        width: 95%;
        padding: var(--spacing-lg);
    }

    .verification-logo img {
        width: 60px;
        height: 60px;
    }

    .verification-app-title {
        font-size: var(--font-size-xl);
    }

    .success-icon,
    .error-icon {
        font-size: 3rem;
    }
}

/* ============================================================================
   FIN DU FICHIER CSS
   Toutes les classes HTML sont maintenant stylées (y compris section plans, sélection de mots, validation email et logo)
   Responsive complet : 320px → 2000px
   ============================================================================ */