/* ========== DISPOSITION "SCENARIO_INFO" : hero + grille 2 colonnes ========== */
        .profile-hero {
            position: relative;
            min-height: 320px;
            background-size: cover;
            background-position: center;
            border-radius: 25px;
            overflow: hidden;
            margin: 20px 0 30px 0;
        }
        .profile-hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(26, 45, 71, 0.95) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2em;
        }
        .profile-hero-content {
            max-width: 900px;
            display: flex;
            align-items: flex-end;
            gap: 1.5em;
            flex-wrap: wrap;
        }
        .profile-hero-avatar {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #7fd8ff;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            flex-shrink: 0;
            display: block;
        }
        .profile-hero-initial {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            border: 3px solid #7fd8ff;
            background: linear-gradient(135deg, #7fd8ff, #4fc3f7);
            color: #0a223a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5em;
            font-weight: bold;
            flex-shrink: 0;
        }
        .profile-hero-main { flex: 1; min-width: 250px; }
        .profile-hero-title {
            font-size: 2.2em;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 2px 20px rgba(0,0,0,0.5);
            margin-bottom: 0.2em;
        }
        .profile-hero-email {
            color: #b2eaff;
            opacity: 0.85;
            margin-bottom: 0.6em;
        }

        .profile-content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2em;
            margin-bottom: 2em;
        }
        @media (max-width: 900px) {
            .profile-content-grid { grid-template-columns: 1fr; }
        }
        .content-card {
            background: linear-gradient(180deg, #22334a 0%, #1a2d47 100%);
            border: 1px solid rgba(127, 216, 255, 0.15);
            border-radius: 20px;
            padding: 1.5em;
            margin-bottom: 1.5em;
        }
        .content-card h2 {
            color: #7fd8ff;
            font-size: 1.3em;
            margin-bottom: 1em;
            padding-bottom: 0.5em;
            border-bottom: 1px solid rgba(127, 216, 255, 0.2);
            display: flex;
            align-items: center;
            gap: 0.5em;
        }
        .info-grid { display: grid; gap: 1em; }
        .info-item {
            display: flex;
            align-items: center;
            gap: 1em;
            padding: 0.8em;
            background: rgba(0,0,0,0.2);
            border-radius: 12px;
        }
        .info-icon {
            width: 40px; height: 40px;
            background: rgba(127, 216, 255, 0.15);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: #7fd8ff;
            flex-shrink: 0;
        }
        .info-content { flex: 1; min-width: 0; }
        .info-label { font-size: 0.8em; color: #7fd8ff; opacity: 0.7; }
        .info-value { color: #fff; font-weight: 500; word-break: break-word; }

        .scenario-meta-badges { display: flex; flex-wrap: wrap; gap: 0.8em; }
        .meta-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4em;
            background: rgba(127, 216, 255, 0.15);
            border: 1px solid rgba(127, 216, 255, 0.3);
            color: #b2eaff;
            padding: 0.4em 1em;
            border-radius: 20px;
            font-size: 0.9em;
        }
        .meta-badge i { color: #7fd8ff; }

        .hero-actions { display: flex; gap: 1em; margin-top: 0.5em; flex-wrap: wrap; }
        .hero-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            padding: 0.8em 1.8em;
            border-radius: 30px;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        .hero-btn.primary { background: linear-gradient(135deg, #7fd8ff, #4fc3f7); color: #1a2d47; }
        .hero-btn.primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(127, 216, 255, 0.4); text-decoration: none; color: #1a2d47; }
        .hero-btn.secondary { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
        .hero-btn.secondary:hover { background: rgba(255,255,255,0.2); text-decoration: none; color: #fff; }
        .hero-btn.warning { background: linear-gradient(135deg, #ffc107, #ffaa00); color: #1a2d47; }
        .hero-btn.success { background: linear-gradient(135deg, #28a745, #20c997); color: #fff; }
        .hero-btn.disabled { background: rgba(100,100,100,0.3); color: #ccc; cursor: not-allowed; }

        /* Assure le bon fonctionnement du scroll */
        html, body {
            overflow-x: hidden !important;
            overflow-y: auto !important;
            height: auto !important;
            min-height: 100vh;
        }
        
        /* Assure que les conteneurs ne limitent pas la hauteur */
        .profile-container, .profile-character-main-card {
            height: auto !important;
            min-height: auto !important;
        }

        /* ========== AMELIORATIONS ERGONOMIQUES ========== */
        
        /* Stats en badges */
        .profile-stats-row {
            display: flex;
            justify-content: center;
            gap: 1.5em;
            flex-wrap: wrap;
            margin: 1em 0;
        }
        .profile-stat-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(127, 216, 255, 0.15);
            border-radius: 12px;
            padding: 0.8em 1.5em;
            min-width: 90px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .profile-stat-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(127, 216, 255, 0.25);
        }
        .profile-stat-number {
            font-size: 1.6em;
            font-weight: bold;
            color: #7fd8ff;
        }
        .profile-stat-label {
            font-size: 0.85em;
            color: #b2eaff;
            margin-top: 0.2em;
        }

        /* Onglets modernisés */
        .profile-tabs {
            display: flex;
            background: rgba(22, 36, 58, 0.95);
            border-radius: 16px;
            padding: 0.5em;
            gap: 0.4em;
            margin-bottom: 1.5em;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: #7fd8ff #22334a;
            -webkit-overflow-scrolling: touch;
        }
        .profile-tabs::-webkit-scrollbar {
            height: 4px;
        }
        .profile-tabs::-webkit-scrollbar-thumb {
            background: #7fd8ff;
            border-radius: 4px;
        }
        .profile-tab {
            flex: 1 1 auto;
            min-width: max-content;
            text-align: center;
            padding: 0.8em 1.2em;
            cursor: pointer;
            font-weight: 600;
            color: #b2eaff;
            border: none;
            border-radius: 12px;
            transition: all 0.25s ease;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5em;
            white-space: nowrap;
        }
        .profile-tab i {
            font-size: 1.1em;
        }
        .profile-tab:hover {
            background: rgba(127, 216, 255, 0.1);
            color: #7fd8ff;
        }
        .profile-tab.active {
            background: linear-gradient(135deg, #7fd8ff 0%, #6ec4e8 100%);
            color: #0a223a;
            box-shadow: 0 4px 15px rgba(127, 216, 255, 0.3);
        }

        /* Boutons d'action améliorés */
        .profile-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5em;
            padding: 0.7em 1.5em;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.2s;
            text-decoration: none;
            border: none;
            cursor: pointer;
        }
        .profile-action-btn.primary {
            background: linear-gradient(135deg, #7fd8ff 0%, #6ec4e8 100%);
            color: #0a223a;
        }
        .profile-action-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(127, 216, 255, 0.4);
        }
        .profile-action-btn.secondary {
            background: rgba(127, 216, 255, 0.15);
            color: #7fd8ff;
            border: 1px solid rgba(127, 216, 255, 0.3);
        }
        .profile-action-btn.success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: #fff;
        }
        .profile-action-btn.warning {
            background: linear-gradient(135deg, #ffc107 0%, #ffdb4d 100%);
            color: #0a223a;
        }
        .profile-action-btn.disabled {
            background: rgba(100, 100, 100, 0.3);
            color: #888;
            cursor: not-allowed;
        }

        /* Amélioration carte profil principale */
        .profile-character-main-card {
            max-width: 520px;
            margin: 40px auto 30px auto;
            background: linear-gradient(180deg, #22334a 0%, #1a2d47 100%);
            border: 1px solid rgba(127, 216, 255, 0.2);
        }

        /* Actions du profil */
        .profile-actions-row {
            display: flex;
            justify-content: center;
            gap: 1em;
            flex-wrap: wrap;
            margin-top: 1.5em;
        }

        /* Responsive pour mobile */
        @media (max-width: 600px) {
            .profile-stats-row {
                gap: 0.8em;
            }
            .profile-stat-badge {
                padding: 0.6em 1em;
                min-width: 75px;
            }
            .profile-stat-number {
                font-size: 1.3em;
            }
            .profile-tab {
                padding: 0.6em 0.9em;
                font-size: 0.9em;
            }
            .profile-tab span.tab-text {
                display: none;
            }
            .profile-tab i {
                font-size: 1.2em;
            }
            .profile-actions-row {
                gap: 0.6em;
            }
            .profile-action-btn {
                padding: 0.5em 1em;
                font-size: 0.9em;
            }
        }
        
        /* Badge Premium inline à côté du nom */
        .premium-badge-inline {
            display: inline-flex;
            align-items: center;
            gap: 0.3em;
            background: linear-gradient(135deg, #ffd700, #ffaa00);
            color: #1a1a2e;
            padding: 0.2em 0.7em;
            border-radius: 15px;
            font-size: 0.6em;
            font-weight: bold;
            margin-left: 0.5em;
            vertical-align: middle;
            box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
            animation: social-user-profile-inline--premium-glow 2s ease-in-out infinite alternate;
        }
        .premium-badge-inline i {
            font-size: 0.9em;
        }
        @keyframes social-user-profile-inline--premium-glow {
            from { box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4); }
            to { box-shadow: 0 2px 20px rgba(255, 215, 0, 0.7); }
        }