/**
 * D&D 5e Character Creator - Styles CSS
 *
 * Design moderne, responsive et accessible pour le créateur de personnage.
 *
 * Structure :
 * 1. Variables CSS
 * 2. Reset et base
 * 3. Layout principal
 * 4. En-tête et navigation
 * 5. Barre de progression
 * 6. Formulaires
 * 7. Cartes (races, classes, etc.)
 * 8. Caractéristiques
 * 9. Compétences et sorts
 * 10. Équipement
 * 11. Récapitulatif
 * 12. Modales
 * 13. Utilitaires
 * 14. Animations
 * 15. Responsive
 *
 * @package DND_Character_Creator
 */

/* ==========================================================================
   1. VARIABLES CSS
   ========================================================================== */

:root {
    /* Couleurs principales */
    --dnd-primary: #7c3aed;
    --dnd-primary-dark: #6d28d9;
    --dnd-primary-light: #a78bfa;
    --dnd-secondary: #1e1b4b;
    --dnd-accent: #f59e0b;
    --dnd-accent-dark: #d97706;

    /* Couleurs de statut */
    --dnd-success: #047857;
    --dnd-warning: #f59e0b;
    --dnd-danger: #b91c1c;
    --dnd-info: #1d4ed8;

    /* Couleurs neutres */
    --dnd-white: #ffffff;
    --dnd-gray-50: #f9fafb;
    --dnd-gray-100: #f3f4f6;
    --dnd-gray-200: #e5e7eb;
    --dnd-gray-300: #d1d5db;
    --dnd-gray-400: #9ca3af;
    --dnd-gray-500: #6b7280;
    --dnd-gray-600: #4b5563;
    --dnd-gray-700: #374151;
    --dnd-gray-800: #1f2937;
    --dnd-gray-900: #111827;

    /* Images injectées par WordPress depuis DND_CREATOR_URL */
    --dnd-image-pattern: none;
    --dnd-image-header-desktop: none;
    --dnd-image-header-tablet: none;
    --dnd-image-header-mobile: none;

    /* Typographie */
    --dnd-font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --dnd-font-display: Georgia, 'Times New Roman', serif;

    /* Espacements */
    --dnd-spacing-xs: 0.25rem;
    --dnd-spacing-sm: 0.5rem;
    --dnd-spacing-md: 1rem;
    --dnd-spacing-lg: 1.5rem;
    --dnd-spacing-xl: 2rem;
    --dnd-spacing-2xl: 3rem;

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

    /* Ombres */
    --dnd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dnd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --dnd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --dnd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --dnd-transition-fast: 150ms ease;
    --dnd-transition-normal: 250ms ease;
    --dnd-transition-slow: 350ms ease;

    /* Z-index */
    --dnd-z-dropdown: 100;
    --dnd-z-sticky: 200;
    --dnd-z-modal: 1000;
    --dnd-z-notification: 1100;
}

/* ==========================================================================
   2. RESET ET BASE
   ========================================================================== */

.dnd-creator {
    font-family: var(--dnd-font-primary);
    font-size: 16px;
    line-height: 1.5;
    color: var(--dnd-gray-800);
    background-color: var(--dnd-gray-50);
    background-image: var(--dnd-image-pattern);
    background-repeat: repeat;
    background-size: 400px auto;
    background-attachment: scroll;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--dnd-spacing-md);
    position: relative;
}

/* Overlay subtil pour améliorer la lisibilité sur le pattern */
.dnd-creator::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(249, 250, 251, 0.85);
    pointer-events: none;
    z-index: 0;
}

/* S'assurer que le contenu est au-dessus de l'overlay */
.dnd-creator > * {
    position: relative;
    z-index: 1;
}

.dnd-creator *,
.dnd-creator *::before,
.dnd-creator *::after {
    box-sizing: border-box;
}

.dnd-creator h1,
.dnd-creator h2,
.dnd-creator h3,
.dnd-creator h4,
.dnd-creator h5,
.dnd-creator h6 {
    font-family: var(--dnd-font-display);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--dnd-spacing-md);
    color: var(--dnd-secondary);
}

.dnd-creator p {
    margin: 0 0 var(--dnd-spacing-md);
}

.dnd-creator a {
    color: var(--dnd-primary);
    text-decoration: none;
}

.dnd-creator a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   3. LAYOUT PRINCIPAL
   ========================================================================== */

.dnd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--dnd-spacing-md);
}

.dnd-loading.hidden {
    display: none;
}

.dnd-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--dnd-gray-200);
    border-top-color: var(--dnd-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.dnd-main {
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-lg);
    box-shadow: var(--dnd-shadow-md);
    padding: var(--dnd-spacing-xl);
    margin-bottom: var(--dnd-spacing-lg);
}

/* ==========================================================================
   4. EN-TÊTE ET NAVIGATION
   ========================================================================== */

.dnd-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-xl) var(--dnd-spacing-lg);
    /* Image de fond mystique - Desktop par défaut */
    background: var(--dnd-image-header-desktop) center center / cover no-repeat,
                linear-gradient(135deg, #1a1744 0%, #2d2a5e 30%, #1e1b4b 70%, #0f0d24 100%);
    color: var(--dnd-white);
    border-radius: var(--dnd-radius-lg);
    margin-bottom: var(--dnd-spacing-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

/* Effet de particules magiques en arrière-plan */
.dnd-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 215, 0, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 80% 50%, rgba(255, 215, 0, 0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 90%, rgba(255, 215, 0, 0.3) 0%, transparent 100%);
    animation: sparkle 8s ease-in-out infinite;
    pointer-events: none;
}

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

.dnd-header-content {
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Titre principal épique */
.dnd-title {
    font-family: var(--dnd-font-display);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0 0 var(--dnd-spacing-md);
    letter-spacing: 0.08em;
    line-height: 1.2;
    position: relative;
    display: inline-block;

    /* Dégradé doré luxueux */
    background: linear-gradient(
        180deg,
        #fff9e6 0%,
        #ffd700 20%,
        #daa520 40%,
        #b8860b 60%,
        #daa520 80%,
        #ffd700 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Ombres pour la profondeur et la lueur */
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));

    /* Animation d'apparition */
    animation: titleReveal 1.2s ease-out;
}

@keyframes titleReveal {
    0% {
        opacity: 0;
        transform: translateY(-20px);
        filter: drop-shadow(0 0 0 transparent);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5))
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))
                drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    }
}

/* Sous-titre élégant */
.dnd-subtitle {
    margin: 0;
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.05em;
    animation: subtitleReveal 1.2s ease-out 0.3s both;
}

@keyframes subtitleReveal {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Séparateur décoratif sous le sous-titre */
.dnd-header-content::after {
    content: '⚔ ✦ ⚔';
    display: block;
    margin-top: var(--dnd-spacing-md);
    font-size: 1.2rem;
    color: rgba(255, 215, 0, 0.6);
    letter-spacing: 0.5em;
    animation: subtitleReveal 1.2s ease-out 0.5s both;
}

.dnd-header-actions {
    display: flex;
    gap: var(--dnd-spacing-sm);
}

/* Barre MJ */
.dnd-dm-bar {
    background: linear-gradient(135deg, var(--dnd-accent) 0%, var(--dnd-accent-dark) 100%);
    color: var(--dnd-gray-900);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-dm-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
}

.dnd-dm-badge {
    background: var(--dnd-white);
    color: var(--dnd-accent-dark);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ==========================================================================
   5. BARRE DE PROGRESSION
   ========================================================================== */

.dnd-progress-bar {
    margin-bottom: var(--dnd-spacing-lg);
    padding: var(--dnd-spacing-md);
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-lg);
    box-shadow: var(--dnd-shadow-sm);
}

.dnd-progress-track {
    height: 6px;
    background: var(--dnd-gray-200);
    border-radius: var(--dnd-radius-full);
    margin-bottom: var(--dnd-spacing-md);
    overflow: hidden;
}

.dnd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dnd-primary) 0%, var(--dnd-primary-dark) 100%);
    border-radius: var(--dnd-radius-full);
    width: 0%;
    transition: width var(--dnd-transition-slow);
}

.dnd-steps-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    gap: var(--dnd-spacing-xs);
}

.dnd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    cursor: pointer;
    min-width: 70px;
    transition: all var(--dnd-transition-fast);
}

.dnd-step:hover {
    background: var(--dnd-gray-100);
    border-radius: var(--dnd-radius-md);
}

.dnd-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--dnd-gray-200);
    color: var(--dnd-gray-600);
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--dnd-transition-fast);
}

.dnd-step-label {
    font-size: 0.75rem;
    color: var(--dnd-gray-500);
    text-align: center;
    white-space: nowrap;
}

.dnd-step.active .dnd-step-number {
    background: var(--dnd-primary);
    color: var(--dnd-white);
    transform: scale(1.1);
}

.dnd-step.active .dnd-step-label {
    color: var(--dnd-primary);
    font-weight: 600;
}

.dnd-step.completed .dnd-step-number {
    background: var(--dnd-success);
    color: var(--dnd-white);
}

.dnd-step.completed .dnd-step-number::after {
    content: '✓';
}

/* ==========================================================================
   6. FORMULAIRES
   ========================================================================== */

.dnd-step-content {
    display: none;
}

.dnd-step-content.active {
    display: block;
    animation: fadeIn var(--dnd-transition-normal);
}

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

.dnd-step-header {
    margin-bottom: var(--dnd-spacing-xl);
    text-align: center;
}

.dnd-step-header h2 {
    font-size: 1.5rem;
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-help-text {
    color: var(--dnd-gray-500);
    font-size: 0.95rem;
}

.dnd-form-grid {
    display: grid;
    gap: var(--dnd-spacing-lg);
}

.dnd-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-xs);
}

.dnd-form-group-large {
    grid-column: 1 / -1;
}

/* Ligne de formulaire avec plusieurs colonnes */
.dnd-form-row {
    display: grid;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
    grid-column: 1 / -1;
}

.dnd-form-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .dnd-form-row-3 {
        grid-template-columns: 1fr;
    }
}

.dnd-form-row .dnd-form-group {
    margin-bottom: 0;
}

.dnd-form-group label {
    font-weight: 600;
    color: var(--dnd-gray-700);
    font-size: 0.9rem;
}

.dnd-required {
    color: var(--dnd-danger);
}

.dnd-form-group input[type="text"],
.dnd-form-group input[type="number"],
.dnd-form-group input[type="email"],
.dnd-form-group textarea,
.dnd-form-group select {
    width: 100%;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color var(--dnd-transition-fast), box-shadow var(--dnd-transition-fast);
    background: var(--dnd-white);
}

.dnd-form-group input:focus,
.dnd-form-group textarea:focus,
.dnd-form-group select:focus {
    outline: none;
    border-color: var(--dnd-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.dnd-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.dnd-field-help {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
    margin: 0;
}

.dnd-form-group-checkbox {
    flex-direction: row;
    align-items: center;
}

.dnd-form-group-checkbox label {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    cursor: pointer;
    font-weight: normal;
}

.dnd-form-group-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--dnd-primary);
}

/* ==========================================================================
   7. BOUTONS
   ========================================================================== */

.dnd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-lg);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
    text-decoration: none;
}

.dnd-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dnd-btn-primary {
    background: var(--dnd-primary);
    color: var(--dnd-white);
}

.dnd-btn-primary:hover:not(:disabled) {
    background: var(--dnd-primary-dark);
    transform: translateY(-1px);
}

.dnd-btn-outline {
    background: transparent;
    border-color: var(--dnd-gray-300);
    color: var(--dnd-gray-700);
}

.dnd-btn-outline:hover:not(:disabled) {
    border-color: var(--dnd-primary);
    color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.05);
}

.dnd-header .dnd-btn-outline {
    background: rgba(15, 13, 36, 0.82);
    border-color: rgba(255, 255, 255, 0.78);
    color: var(--dnd-white);
}

.dnd-header .dnd-btn-outline:hover:not(:disabled) {
    background: var(--dnd-secondary);
    border-color: #ffd700;
    color: var(--dnd-white);
}

.dnd-btn-sm {
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    font-size: 0.85rem;
}

.dnd-btn-large {
    padding: var(--dnd-spacing-md) var(--dnd-spacing-xl);
    font-size: 1.1rem;
}

.dnd-btn-random {
    background: var(--dnd-accent);
    color: var(--dnd-gray-900);
    border: none;
    margin-top: var(--dnd-spacing-xs);
}

.dnd-btn-random:hover {
    background: var(--dnd-accent-dark);
}

.dnd-btn-inline {
    display: inline-block;
    margin-left: var(--dnd-spacing-sm);
    margin-top: 0;
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    font-size: 0.8rem;
    vertical-align: middle;
}

.dnd-btn-warning {
    background: var(--dnd-warning);
    color: var(--dnd-gray-900);
}

/* Bouton Feedback */
.dnd-btn-feedback {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    color: var(--dnd-white);
    border: none;
}

.dnd-btn-feedback:hover:not(:disabled) {
    background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
    transform: translateY(-1px);
}

.dnd-btn-external {
    background: linear-gradient(135deg, var(--dnd-accent) 0%, var(--dnd-accent-dark) 100%);
    color: var(--dnd-gray-900);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    font-weight: 600;
}

.dnd-btn-external:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    color: var(--dnd-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.dnd-external-link-box {
    margin: var(--dnd-spacing-lg) 0;
    padding: var(--dnd-spacing-lg);
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 2px solid #c7d2fe;
    border-radius: var(--dnd-radius-lg);
    text-align: center;
}

.dnd-external-link-box p {
    margin-bottom: var(--dnd-spacing-md);
    color: var(--dnd-gray-700);
    font-size: 0.95rem;
}

.dnd-icon {
    font-size: 1.2em;
}

/* ==========================================================================
   8. BADGES
   ========================================================================== */

.dnd-badge {
    display: inline-block;
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    background: var(--dnd-gray-200);
    color: var(--dnd-gray-700);
    border-radius: var(--dnd-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dnd-badge-success {
    background: var(--dnd-success);
    color: var(--dnd-white);
}

.dnd-badge-warning {
    background: var(--dnd-warning);
    color: var(--dnd-gray-900);
}

.dnd-badge-info {
    background: var(--dnd-info);
    color: var(--dnd-white);
}

/* ==========================================================================
   9. CARTES DE MODE
   ========================================================================== */

.dnd-mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--dnd-spacing-lg);
}

.dnd-mode-card {
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--dnd-transition-normal);
}

.dnd-mode-card:hover {
    border-color: var(--dnd-primary-light);
    transform: translateY(-4px);
    box-shadow: var(--dnd-shadow-lg);
}

.dnd-mode-card.selected {
    border-color: var(--dnd-primary);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(124, 58, 237, 0.1) 100%);
}

.dnd-mode-icon {
    font-size: 3rem;
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-mode-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-mode-card p {
    color: var(--dnd-gray-600);
    font-size: 0.9rem;
    margin-bottom: var(--dnd-spacing-md);
}

/* ==========================================================================
   10. GRILLES DE SÉLECTION (Races, Classes, etc.)
   ========================================================================== */

.dnd-search-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-search-input {
    flex: 1;
    min-width: 200px;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    font-size: 0.95rem;
}

.dnd-filter-buttons {
    display: flex;
    gap: var(--dnd-spacing-xs);
}

.dnd-filter-btn {
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-gray-100);
    border: none;
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--dnd-transition-fast);
}

.dnd-filter-btn:hover {
    background: var(--dnd-gray-200);
}

.dnd-filter-btn.active {
    background: var(--dnd-primary);
    color: var(--dnd-white);
}

.dnd-race-grid,
.dnd-class-grid,
.dnd-background-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-race-card,
.dnd-class-card,
.dnd-background-card {
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
    text-align: center;
}

.dnd-race-card:hover,
.dnd-class-card:hover,
.dnd-background-card:hover {
    border-color: var(--dnd-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--dnd-shadow-md);
}

.dnd-race-card.selected,
.dnd-class-card.selected,
.dnd-background-card.selected {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.05);
}

.dnd-card-icon {
    font-size: 2rem;
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-card-name {
    font-weight: 600;
    color: var(--dnd-gray-800);
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-card-desc {
    font-size: 0.8rem;
    color: var(--dnd-gray-500);
    line-height: 1.4;
}

/* Cartes avec images */
.dnd-race-card.has-image,
.dnd-class-card.has-image {
    position: relative;
    min-height: 280px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dnd-card-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transition: transform var(--dnd-transition-normal);
}

.dnd-race-card.has-image:hover .dnd-card-image,
.dnd-class-card.has-image:hover .dnd-card-image {
    transform: scale(1.05);
}

.dnd-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.dnd-race-card.has-image .dnd-card-content,
.dnd-class-card.has-image .dnd-card-content {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: var(--dnd-spacing-md);
    color: var(--dnd-white);
}

.dnd-race-card.has-image .dnd-card-name,
.dnd-class-card.has-image .dnd-card-name {
    color: var(--dnd-white);
    font-size: 1.1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dnd-race-card.has-image .dnd-card-desc,
.dnd-class-card.has-image .dnd-card-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dnd-race-card.has-image .dnd-badge,
.dnd-class-card.has-image .dnd-badge {
    background: var(--dnd-primary);
    color: var(--dnd-white);
    margin-top: var(--dnd-spacing-sm);
}

.dnd-race-card.has-image.selected,
.dnd-class-card.has-image.selected {
    border-color: var(--dnd-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3), var(--dnd-shadow-lg);
}

.dnd-race-card.has-image.selected .dnd-card-overlay,
.dnd-class-card.has-image.selected .dnd-card-overlay {
    background: linear-gradient(
        to bottom,
        rgba(124, 58, 237, 0.1) 0%,
        rgba(124, 58, 237, 0.3) 40%,
        rgba(30, 27, 75, 0.95) 100%
    );
}

/* Grille ajustée pour cartes avec images */
.dnd-race-grid,
.dnd-class-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

@media (max-width: 768px) {
    .dnd-race-card.has-image,
    .dnd-class-card.has-image {
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    .dnd-race-grid,
    .dnd-class-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .dnd-race-card.has-image,
    .dnd-class-card.has-image {
        min-height: 200px;
    }

    .dnd-race-card.has-image .dnd-card-desc,
    .dnd-class-card.has-image .dnd-card-desc {
        -webkit-line-clamp: 2;
    }
}

/* Détails de sélection */
.dnd-selection-details {
    background: var(--dnd-gray-50);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-selection-details:empty {
    display: none;
}

.dnd-detail-header {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
    padding-bottom: var(--dnd-spacing-md);
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-detail-title {
    font-size: 1.25rem;
    margin: 0;
}

.dnd-detail-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-bonus-tag {
    background: var(--dnd-primary);
    color: var(--dnd-white);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.dnd-detail-traits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dnd-detail-traits li {
    padding: var(--dnd-spacing-sm) 0;
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-detail-traits li:last-child {
    border-bottom: none;
}

.dnd-trait-name {
    font-weight: 600;
    color: var(--dnd-primary-dark);
}

/* Sous-races et sous-classes */
.dnd-subrace-section,
.dnd-subclass-section {
    margin-top: var(--dnd-spacing-lg);
    padding-top: var(--dnd-spacing-lg);
    border-top: 2px dashed var(--dnd-gray-200);
}

.dnd-subrace-grid,
.dnd-subclass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--dnd-spacing-md);
}

/* ==========================================================================
   11. CARACTÉRISTIQUES
   ========================================================================== */

.dnd-method-selector {
    margin-bottom: var(--dnd-spacing-xl);
}

.dnd-method-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--dnd-spacing-md);
}

.dnd-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    padding: var(--dnd-spacing-md);
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
}

.dnd-method-btn:hover {
    border-color: var(--dnd-primary-light);
}

.dnd-method-btn.active {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.05);
}

.dnd-method-icon {
    font-size: 1.5rem;
}

.dnd-method-btn small {
    font-size: 0.75rem;
    color: var(--dnd-gray-500);
}

.dnd-points-display {
    text-align: center;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-100);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-points-counter {
    font-size: 1.1rem;
}

.dnd-points-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dnd-primary);
}

/* Affichage des ASI (Ability Score Improvements) */
.dnd-asi-display {
    text-align: center;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-lg);
    border: 1px solid var(--dnd-gray-200);
}

.dnd-asi-display.has-points {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: var(--dnd-accent);
}

.dnd-asi-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--dnd-spacing-sm);
}

.dnd-asi-icon {
    font-size: 1.5rem;
}

.dnd-asi-text {
    font-size: 1rem;
}

.dnd-asi-text strong {
    color: var(--dnd-gray-800);
}

#asi-points {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dnd-accent-dark);
}

.dnd-asi-counter {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dnd-accent-dark);
    background: var(--dnd-white);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-full);
    border: 1px solid var(--dnd-accent);
}

.dnd-asi-hint {
    width: 100%;
    font-size: 0.8rem;
    color: var(--dnd-gray-500);
    margin-top: var(--dnd-spacing-xs);
}

/* Message d'information pour le niveau 1 */
.dnd-level1-info {
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-info-highlight {
    display: flex;
    align-items: flex-start;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #3b82f6;
    border-radius: var(--dnd-radius-md);
    border-left: 4px solid #3b82f6;
}

.dnd-info-highlight-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dnd-info-highlight-text {
    font-size: 0.9rem;
    color: var(--dnd-gray-700);
    line-height: 1.5;
}

.dnd-info-highlight-text strong {
    color: #1e40af;
}

/* Tooltip au survol pour les caractéristiques */
.dnd-ability-card {
    position: relative;
}

.dnd-ability-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-900);
    color: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.dnd-ability-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--dnd-gray-900);
}

.dnd-ability-card:hover .dnd-ability-tooltip {
    opacity: 1;
    visibility: visible;
}

.dnd-ability-tooltip-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: var(--dnd-spacing-xs);
    color: var(--dnd-accent);
}

.dnd-ability-tooltip-desc {
    margin-bottom: var(--dnd-spacing-sm);
    opacity: 0.9;
}

.dnd-ability-tooltip-example {
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-style: italic;
    opacity: 0.85;
}

.dnd-ability-tooltip-example strong {
    color: var(--dnd-success-light);
    font-style: normal;
}

.dnd-abilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--dnd-spacing-md);
}

.dnd-ability-card {
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-md);
    text-align: center;
    transition: border-color var(--dnd-transition-fast);
}

.dnd-ability-card:hover {
    border-color: var(--dnd-primary-light);
}

.dnd-ability-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-ability-icon {
    font-size: 1.5rem;
}

.dnd-ability-header h4 {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dnd-ability-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dnd-spacing-sm);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-ability-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--dnd-radius-sm);
    background: var(--dnd-gray-200);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background var(--dnd-transition-fast);
}

.dnd-ability-btn:hover {
    background: var(--dnd-primary);
    color: var(--dnd-white);
}

.dnd-ability-input {
    width: 90px;
    height: 50px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-sm);
    padding: 0 10px;
    line-height: 50px;
    box-sizing: border-box;
    /* Masquer les flèches natives du champ number */
    -moz-appearance: textfield;
}

/* Masquer les flèches pour Chrome, Safari, Edge */
.dnd-ability-input::-webkit-outer-spin-button,
.dnd-ability-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dnd-ability-input:focus {
    outline: none;
    border-color: var(--dnd-primary);
}

.dnd-ability-modifier {
    font-size: 1.1rem;
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-modifier-value {
    font-weight: 700;
    color: var(--dnd-primary);
}

.dnd-ability-racial {
    font-size: 0.8rem;
    color: var(--dnd-success);
    min-height: 1.2em;
}

.dnd-ability-desc {
    font-size: 0.75rem;
    color: var(--dnd-gray-500);
    margin: 0;
}

/* En-tête de caractéristique cliquable */
.dnd-ability-header {
    cursor: pointer;
    transition: color 0.2s ease;
}

.dnd-ability-header:hover {
    color: var(--dnd-primary);
}

.dnd-ability-header:hover .dnd-ability-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Popup d'information sur les caractéristiques */
.dnd-ability-popup {
    position: fixed;
    z-index: 10000;
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 320px;
    max-width: 90vw;
    animation: popupFadeIn 0.2s ease;
}

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

.dnd-ability-popup-header {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-md);
    background: linear-gradient(135deg, var(--dnd-primary), var(--dnd-primary-dark));
    color: white;
    border-radius: var(--dnd-radius-lg) var(--dnd-radius-lg) 0 0;
}

.dnd-ability-popup-icon {
    font-size: 1.5rem;
}

.dnd-ability-popup-header h3 {
    margin: 0;
    flex: 1;
    font-size: 1.1rem;
}

.dnd-ability-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
}

.dnd-ability-popup-close:hover {
    opacity: 1;
}

.dnd-ability-popup-body {
    padding: var(--dnd-spacing-md);
}

.dnd-ability-popup-desc {
    margin: 0 0 var(--dnd-spacing-md);
    color: var(--dnd-gray-700);
    font-style: italic;
}

.dnd-ability-popup-body h4 {
    margin: 0 0 var(--dnd-spacing-sm);
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
}

.dnd-ability-popup-uses {
    margin: 0 0 var(--dnd-spacing-md);
    padding-left: var(--dnd-spacing-lg);
}

.dnd-ability-popup-uses li {
    margin-bottom: var(--dnd-spacing-xs);
    font-size: 0.85rem;
    color: var(--dnd-gray-700);
}

.dnd-ability-popup-tip {
    margin: 0;
    padding: var(--dnd-spacing-sm);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.85rem;
    color: var(--dnd-primary);
    font-weight: 500;
}

/* Boîte d'information dépliable */
.dnd-info-box {
    background: var(--dnd-gray-50);
    border: 1px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-lg);
    overflow: hidden;
}

.dnd-info-header {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-md);
    cursor: pointer;
    font-weight: 500;
    color: var(--dnd-gray-700);
    transition: background 0.2s ease;
}

.dnd-info-header:hover {
    background: var(--dnd-gray-100);
}

.dnd-info-icon {
    font-size: 1.2rem;
}

.dnd-info-toggle {
    margin-left: auto;
    color: var(--dnd-gray-400);
}

.dnd-info-content {
    padding: 0 var(--dnd-spacing-md) var(--dnd-spacing-md);
    border-top: 1px solid var(--dnd-gray-200);
}

.dnd-info-content p {
    margin: var(--dnd-spacing-sm) 0;
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
    line-height: 1.5;
}

.dnd-info-content code {
    background: var(--dnd-gray-200);
    padding: 2px 6px;
    border-radius: var(--dnd-radius-sm);
    font-size: 0.85rem;
}

.dnd-info-tip {
    color: var(--dnd-primary) !important;
    font-style: italic;
}

/* Standard Array */
.dnd-standard-array {
    text-align: center;
    padding: var(--dnd-spacing-lg);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    margin-top: var(--dnd-spacing-lg);
}

.dnd-array-values {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
    margin-top: var(--dnd-spacing-md);
}

.dnd-array-value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--dnd-primary);
    color: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: grab;
    transition: transform var(--dnd-transition-fast);
}

.dnd-array-value:hover {
    transform: scale(1.1);
}

.dnd-array-value.used {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--dnd-gray-400);
}

.dnd-array-value.selected {
    background: var(--dnd-success);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.dnd-array-value.dragging {
    opacity: 0.5;
    transform: scale(0.9);
}

/* Zone de dépôt sur les cartes de caractéristiques */
.dnd-ability-card.drag-over {
    border-color: var(--dnd-success);
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.dnd-ability-card {
    cursor: pointer;
}

/* Améliorer l'affichage de la valeur de caractéristique */
.dnd-ability-input {
    width: 90px;
    height: 50px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    border: 3px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-md);
    padding: 0 10px;
    background: var(--dnd-white);
    color: var(--dnd-gray-800);
    line-height: 44px;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.dnd-ability-input:focus {
    outline: none;
    border-color: var(--dnd-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

/* Styles pour les boutons +/- */
.dnd-ability-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-md);
    background: var(--dnd-white);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--dnd-gray-600);
    transition: all var(--dnd-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dnd-ability-btn:hover {
    background: var(--dnd-primary);
    border-color: var(--dnd-primary);
    color: var(--dnd-white);
}

/* Instructions pour le drag & drop */
.dnd-standard-array h4 {
    margin-bottom: var(--dnd-spacing-md);
    color: var(--dnd-gray-700);
}

.dnd-standard-array p {
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
    margin-top: var(--dnd-spacing-sm);
}

/* Modèle de caractéristiques v2 : base + race + ASI, sans double comptage */
.dnd-ability-total-v2 {
    min-height: 2.5em;
    margin: 0 0 var(--dnd-spacing-xs);
    padding: 0.4rem 0.5rem;
    border-radius: var(--dnd-radius-sm);
    background: var(--dnd-gray-50);
    color: var(--dnd-gray-700);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
}

.jdt-asi-control-v2 {
    display: grid;
    grid-template-columns: auto 36px 48px 36px;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0 0 var(--dnd-spacing-sm);
    color: var(--dnd-gray-600);
    font-size: 0.75rem;
    font-weight: 700;
}

.jdt-asi-input {
    width: 48px;
    height: 36px;
    padding: 0.2rem;
    border: 2px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-sm);
    background: var(--dnd-white);
    color: var(--dnd-gray-800);
    font: inherit;
    font-size: 1rem;
    text-align: center;
}

.jdt-asi-input:focus-visible,
.jdt-racial-choice-v2:focus-visible,
.jdt-migration-racial-choice:focus-visible,
.jdt-asi-button:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.25);
    outline-offset: 2px;
    border-color: var(--dnd-primary);
}

.jdt-asi-button:disabled,
.jdt-asi-input:disabled,
.dnd-method-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.jdt-racial-ability-choices-v2 {
    padding: var(--dnd-spacing-md);
    border-left: 4px solid var(--dnd-primary);
}

.jdt-racial-ability-choices-v2 h4 {
    margin: 0 0 var(--dnd-spacing-xs);
    color: var(--dnd-primary-dark);
}

.jdt-racial-ability-choices-v2 > p {
    margin: 0 0 var(--dnd-spacing-md);
    color: var(--dnd-gray-600);
    font-size: 0.9rem;
}

.jdt-racial-choice-row,
.jdt-migration-racial-choice {
    min-width: 0;
}

.jdt-racial-choice-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr);
    align-items: center;
    gap: var(--dnd-spacing-sm);
    margin-top: var(--dnd-spacing-sm);
    color: var(--dnd-gray-700);
    font-weight: 600;
}

.jdt-racial-choice-v2,
.jdt-migration-racial-choice {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-sm);
    background: var(--dnd-white);
    color: var(--dnd-gray-800);
    font: inherit;
}

.jdt-ability-errors-v2 {
    min-height: 1.5rem;
    margin: calc(-1 * var(--dnd-spacing-sm)) 0 var(--dnd-spacing-lg);
}

.jdt-ability-errors-v2 p,
.jdt-ability-error,
.jdt-ability-valid {
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-radius: var(--dnd-radius-sm);
    font-size: 0.88rem;
    line-height: 1.45;
}

.jdt-ability-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.jdt-ability-valid {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.jdt-ability-migration-banner {
    padding: var(--dnd-spacing-md);
    border-left: 4px solid var(--dnd-accent);
}

.jdt-ability-migration-banner strong,
.jdt-ability-migration-banner p {
    display: block;
    margin: 0 0 var(--dnd-spacing-sm);
}

.jdt-ability-migration-actions,
.jdt-migration-racial-choices {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-sm);
}

.jdt-ability-migration-actions {
    align-items: stretch;
    margin-top: var(--dnd-spacing-lg);
}

.jdt-ability-v2-locked {
    cursor: not-allowed !important;
    opacity: 0.65;
}

@media (max-width: 640px) {
    .jdt-racial-choice-row {
        grid-template-columns: 1fr;
    }

    .jdt-asi-control-v2 {
        grid-template-columns: auto 34px 46px 34px;
    }
}

/* ==========================================================================
   COMPOSANT : OPTIONS DE DÉCISION PAR ÉTAPE
   ========================================================================== */

.dnd-step-decision {
    margin-top: var(--dnd-spacing-xl);
    padding: var(--dnd-spacing-md);
    background: linear-gradient(135deg, var(--dnd-gray-50) 0%, var(--dnd-gray-100) 100%);
    border: 2px dashed var(--dnd-gray-300);
    border-radius: var(--dnd-radius-lg);
}

.dnd-step-decision-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dnd-gray-600);
    margin-bottom: var(--dnd-spacing-md);
    text-align: center;
}

.dnd-step-decision-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-md);
    justify-content: center;
}

.dnd-btn-help-choice {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-lg);
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dnd-gray-700);
}

.dnd-btn-help-choice:hover {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dnd-btn-help-choice.active {
    border-color: var(--dnd-primary);
    background: var(--dnd-primary);
    color: var(--dnd-white);
}

.dnd-btn-help-choice .dnd-decision-icon {
    font-size: 1.3rem;
}

.dnd-btn-help-choice[data-action="random"] .dnd-decision-icon {
    color: var(--dnd-accent);
}

.dnd-btn-help-choice[data-action="dm"] .dnd-decision-icon {
    color: var(--dnd-info);
}

.dnd-btn-help-choice.active .dnd-decision-icon {
    color: var(--dnd-white);
}

/* Style spécial pour "C'est mon MJ qui décide" quand actif */
.dnd-btn-help-choice[data-action="dm"].active {
    border-color: var(--dnd-warning);
    background: linear-gradient(135deg, var(--dnd-warning) 0%, #f59e0b 100%);
    color: var(--dnd-gray-800);
    animation: dm-btn-pulse 2s ease-in-out infinite;
}

.dnd-btn-help-choice[data-action="dm"].active .dnd-decision-icon {
    color: var(--dnd-gray-800);
}

@keyframes dm-btn-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
}

/* Hint pour les décisions d'étape */
.dnd-step-decision-hint {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
    text-align: center;
    margin-top: var(--dnd-spacing-sm);
    font-style: italic;
}

/* Hint pour les méthodes d'équipement */
.dnd-equipment-method-hint {
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border-left: 3px solid var(--dnd-primary);
    border-radius: 0 var(--dnd-radius-sm) var(--dnd-radius-sm) 0;
    margin-bottom: var(--dnd-spacing-md);
}

/* Note dans les boîtes d'explication */
.dnd-explanation-note {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
    font-style: italic;
    margin-top: var(--dnd-spacing-sm);
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px dashed var(--dnd-gray-200);
}

/* ==========================================================================
   12. COMPÉTENCES
   ========================================================================== */

.dnd-skills-info {
    text-align: center;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-info);
    color: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-lg);
}

/* Affichage des choix de compétences - Style mis en évidence */
.dnd-skills-choice-display {
    text-align: center;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid var(--dnd-info);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-lg);
    box-shadow: var(--dnd-shadow-md);
}

.dnd-skills-choice-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--dnd-spacing-sm);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-skills-choice-icon {
    font-size: 1.5rem;
}

.dnd-skills-choice-text {
    font-size: 1.1rem;
    color: var(--dnd-secondary);
}

.dnd-skills-choice-text strong {
    color: var(--dnd-primary-dark);
}

.dnd-skills-choice-counter {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dnd-info);
    background: var(--dnd-white);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-full);
    border: 1px solid var(--dnd-info);
}

.dnd-skills-choice-display .dnd-skills-legend {
    font-size: 0.85rem;
    color: var(--dnd-gray-600);
    margin: 0;
}

/* Affichage des compétences d'historique sur l'étape Historique */
.dnd-background-skills-info {
    text-align: center;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid var(--dnd-success);
    border-radius: var(--dnd-radius-md);
    margin: var(--dnd-spacing-lg) 0;
    box-shadow: var(--dnd-shadow-md);
}

.dnd-background-skills-info .dnd-skills-choice-counter {
    color: var(--dnd-success);
    border-color: var(--dnd-success);
}

.dnd-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--dnd-spacing-sm);
    margin-bottom: var(--dnd-spacing-xl);
}

.dnd-skill-item {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
}

.dnd-skill-item:hover {
    border-color: var(--dnd-primary-light);
}

.dnd-skill-item.selected {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.1);
}

.dnd-skill-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dnd-skill-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--dnd-primary);
}

.dnd-skill-name {
    flex: 1;
    font-weight: 500;
}

.dnd-skill-ability {
    font-size: 0.75rem;
    color: var(--dnd-gray-500);
    text-transform: uppercase;
}

.dnd-skill-bonus {
    font-weight: 700;
    color: var(--dnd-primary);
}

/* Tooltip des compétences */
.dnd-skill-item {
    position: relative;
}

.dnd-skill-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    max-width: 90vw;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-800);
    color: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
    z-index: var(--dnd-z-dropdown);
    box-shadow: var(--dnd-shadow-lg);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-skill-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--dnd-gray-800);
}

.dnd-skill-item:hover .dnd-skill-tooltip {
    display: block;
    animation: fadeIn var(--dnd-transition-fast);
}

.dnd-skill-description {
    margin: 0 0 var(--dnd-spacing-sm) 0;
}

.dnd-skill-example {
    margin: 0;
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid var(--dnd-gray-600);
    font-style: italic;
    color: var(--dnd-gray-300);
}

/* Boîte d'explication pour néophytes */
.dnd-explanation-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: var(--dnd-radius-lg);
    margin-bottom: var(--dnd-spacing-xl);
    overflow: hidden;
}

.dnd-explanation-header {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    background: rgba(14, 165, 233, 0.1);
    cursor: pointer;
}

.dnd-explanation-title {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    color: var(--dnd-gray-800);
}

.dnd-explanation-icon {
    font-size: 1.5rem;
}

.dnd-explanation-toggle {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--dnd-gray-600);
    cursor: pointer;
    padding: var(--dnd-spacing-xs);
    transition: transform var(--dnd-transition-fast);
}

.dnd-explanation-toggle[aria-expanded="false"] {
    transform: rotate(-90deg);
}

.dnd-explanation-content {
    padding: var(--dnd-spacing-lg);
}

.dnd-explanation-content p {
    margin: 0 0 var(--dnd-spacing-md) 0;
    color: var(--dnd-gray-700);
    line-height: 1.7;
}

.dnd-explanation-content p:last-child {
    margin-bottom: 0;
}

.dnd-explanation-example {
    background: var(--dnd-white);
    border-left: 4px solid #0ea5e9;
    padding: var(--dnd-spacing-md);
    margin: var(--dnd-spacing-md) 0;
    border-radius: 0 var(--dnd-radius-md) var(--dnd-radius-md) 0;
}

.dnd-explanation-example ul {
    margin: var(--dnd-spacing-sm) 0 0 var(--dnd-spacing-lg);
    padding: 0;
}

.dnd-explanation-example li {
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-explanation-tip {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    color: var(--dnd-gray-800);
}

/* Mini explication (pour langues et maîtrises) */
.dnd-explanation-mini {
    display: flex;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-md);
    align-items: flex-start;
}

.dnd-explanation-mini .dnd-explanation-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.dnd-explanation-mini p {
    margin: 0;
    color: var(--dnd-gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

.dnd-proficiency-explain {
    margin: var(--dnd-spacing-sm) 0 0 var(--dnd-spacing-lg);
    padding: 0;
}

.dnd-proficiency-explain li {
    margin-bottom: var(--dnd-spacing-xs);
    color: var(--dnd-gray-600);
    font-size: 0.9rem;
}

.dnd-skills-legend {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: var(--dnd-spacing-xs);
}

/* Langues */
.dnd-languages-section,
.dnd-proficiencies-section {
    margin-top: var(--dnd-spacing-xl);
    padding-top: var(--dnd-spacing-lg);
    border-top: 1px solid var(--dnd-gray-200);
}

.dnd-languages-list,
.dnd-proficiencies-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
}

.dnd-language-tag,
.dnd-proficiency-tag {
    background: var(--dnd-gray-100);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-full);
    font-size: 0.9rem;
}

.dnd-language-tag.selectable {
    cursor: pointer;
    border: 2px solid transparent;
}

.dnd-language-tag.selectable:hover {
    border-color: var(--dnd-primary-light);
}

.dnd-language-tag.selected {
    background: var(--dnd-primary);
    color: var(--dnd-white);
}

/* ==========================================================================
   13. ÉQUIPEMENT
   ========================================================================== */

.dnd-equipment-choice {
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-choice-buttons {
    display: flex;
    gap: var(--dnd-spacing-sm);
}

.dnd-choice-btn {
    flex: 1;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-100);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--dnd-transition-fast);
}

.dnd-choice-btn:hover {
    border-color: var(--dnd-primary-light);
}

.dnd-choice-btn.active {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.1);
}

.dnd-equipment-choices {
    display: grid;
    gap: var(--dnd-spacing-md);
}

.dnd-equipment-option {
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
}

.dnd-equipment-option h4 {
    margin-bottom: var(--dnd-spacing-sm);
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
}

.dnd-equipment-choices-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
}

.dnd-eq-choice {
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
}

.dnd-eq-choice:hover {
    border-color: var(--dnd-primary-light);
}

.dnd-eq-choice.selected {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.1);
}

/* Sections d'équipement de classe */
.dnd-equipment-section {
    background: var(--dnd-white);
    border: 1px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-equipment-section h4 {
    margin: 0 0 var(--dnd-spacing-sm) 0;
    font-size: 1.1rem;
    color: var(--dnd-gray-800);
}

.dnd-equipment-hint {
    color: var(--dnd-gray-500);
    font-size: 0.9rem;
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-equipment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dnd-equipment-list li {
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
}

.dnd-equipment-list li::before {
    content: '•';
    color: var(--dnd-primary);
    font-weight: bold;
}

.dnd-default-equipment li {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left: 3px solid var(--dnd-success);
}

/* Choix d'équipement interactifs */
.dnd-equipment-choices-list {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-md);
}

.dnd-equipment-choice {
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    border: 1px solid var(--dnd-gray-200);
}

.dnd-choice-label {
    font-weight: 600;
    color: var(--dnd-primary);
    margin-bottom: var(--dnd-spacing-sm);
    font-size: 0.9rem;
}

.dnd-choice-options {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-sm);
}

.dnd-equipment-option {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
}

.dnd-equipment-option:hover {
    border-color: var(--dnd-primary-light);
    background: rgba(124, 58, 237, 0.02);
}

.dnd-equipment-option.selected {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.1);
}

.dnd-option-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--dnd-gray-400);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dnd-transition-fast);
}

.dnd-equipment-option.selected .dnd-option-radio {
    border-color: var(--dnd-primary);
}

.dnd-equipment-option.selected .dnd-option-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--dnd-primary);
    border-radius: 50%;
}

.dnd-option-content {
    flex: 1;
    font-size: 0.95rem;
    color: var(--dnd-gray-700);
}

.dnd-no-equipment {
    text-align: center;
    color: var(--dnd-gray-500);
    padding: var(--dnd-spacing-xl);
    font-style: italic;
}

/* Inventaire */
.dnd-inventory {
    margin-top: var(--dnd-spacing-xl);
    padding: var(--dnd-spacing-lg);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-lg);
}

.dnd-inventory h3 {
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-inventory-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-md);
    padding-bottom: var(--dnd-spacing-md);
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-inventory-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--dnd-spacing-xs);
}

.dnd-inventory-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dnd-spacing-sm);
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-sm);
}

.dnd-inventory-list li button {
    background: var(--dnd-danger);
    color: var(--dnd-white);
    border: none;
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
}

/* Options d'or */
.dnd-gold-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dnd-spacing-md);
    margin-top: var(--dnd-spacing-sm);
}

.dnd-gold-separator {
    color: var(--dnd-gray-500);
    font-style: italic;
}

.dnd-gold-manual {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
}

.dnd-gold-input {
    width: 100px;
    padding: var(--dnd-spacing-sm);
    border: 2px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-md);
    font-size: 1rem;
    text-align: center;
}

.dnd-gold-input:focus {
    border-color: var(--dnd-primary);
    outline: none;
}

/* Boutique */
.dnd-shop-section {
    margin-top: var(--dnd-spacing-lg);
}

.dnd-shop-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-xs);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-shop-cat {
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-gray-200);
    border: none;
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--dnd-transition-fast);
}

.dnd-shop-cat.active {
    background: var(--dnd-primary);
    color: var(--dnd-white);
}

.dnd-shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--dnd-spacing-md);
    max-height: 500px;
    overflow-y: auto;
    padding: var(--dnd-spacing-sm);
}

.dnd-shop-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-md);
    background: var(--dnd-white);
    border: 1px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    transition: all var(--dnd-transition-fast);
}

.dnd-shop-item:hover {
    border-color: var(--dnd-primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dnd-shop-item-info {
    flex: 1;
}

.dnd-shop-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-shop-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dnd-gray-800);
}

.dnd-shop-item-cost {
    font-weight: 700;
    color: var(--dnd-accent);
    font-size: 0.9rem;
}

.dnd-shop-item-stats {
    font-size: 0.75rem;
    color: var(--dnd-gray-600);
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-shop-item-desc {
    font-size: 0.8rem;
    color: var(--dnd-gray-500);
    line-height: 1.4;
    font-style: italic;
}

.dnd-shop-add-btn {
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-success);
    color: var(--dnd-white);
    border: none;
    border-radius: var(--dnd-radius-sm);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    min-width: 40px;
    transition: all var(--dnd-transition-fast);
}

.dnd-shop-add-btn:hover {
    background: var(--dnd-success-dark, #059669);
    transform: scale(1.1);
}

/* Contrôles de tri boutique */
.dnd-shop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-shop-sort {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    font-size: 0.85rem;
}

.dnd-shop-sort label {
    color: var(--dnd-gray-600);
    font-weight: 500;
}

.dnd-shop-sort select {
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border: 1px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.85rem;
    background: var(--dnd-white);
    cursor: pointer;
}

/* Badges de popularité */
.dnd-pop-badge {
    display: inline-block;
    margin-left: var(--dnd-spacing-xs);
    font-size: 0.7rem;
    vertical-align: middle;
}

.dnd-pop-high {
    color: #f59e0b;
}

.dnd-pop-medium {
    color: #6b7280;
}

.dnd-pop-low {
    color: #d1d5db;
}

/* ==========================================================================
   14. SORTS
   ========================================================================== */

.dnd-no-spells {
    text-align: center;
    padding: var(--dnd-spacing-xl) var(--dnd-spacing-lg);
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid var(--dnd-danger);
    border-radius: var(--dnd-radius-lg);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-no-spells-icon {
    font-size: 3rem;
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-no-spells h3 {
    color: var(--dnd-danger);
    font-size: 1.3rem;
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-no-spells p {
    color: var(--dnd-gray-700);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-no-spells-hint {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
    font-style: italic;
    margin-top: var(--dnd-spacing-md);
}

.dnd-spells-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-xl);
    padding: var(--dnd-spacing-lg);
    background: linear-gradient(135deg, var(--dnd-secondary) 0%, #312e81 100%);
    border-radius: var(--dnd-radius-lg);
    color: var(--dnd-white);
}

.dnd-spell-stat {
    text-align: center;
}

.dnd-stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.dnd-spell-slots {
    margin-bottom: var(--dnd-spacing-xl);
}

.dnd-spell-slots-summary {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border: 2px solid var(--dnd-primary);
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-spell-slots-summary h4 {
    text-align: center;
    margin: 0 0 var(--dnd-spacing-md) 0;
    color: var(--dnd-primary-dark);
    font-size: 1.1rem;
}

.dnd-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-md);
    justify-content: center;
}

.dnd-slot-group {
    text-align: center;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: white;
    border-radius: var(--dnd-radius-md);
    min-width: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dnd-slot-group.cantrips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.dnd-slot-group.cantrips .dnd-slot-count {
    color: #b45309;
}

.dnd-slot-level {
    font-size: 0.75rem;
    color: var(--dnd-gray-600);
    font-weight: 600;
}

.dnd-slot-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dnd-primary);
}

.dnd-slot-hint {
    font-size: 0.65rem;
    color: var(--dnd-gray-400);
}

/* Message pour niveaux sans sorts */
.dnd-no-spells-level {
    text-align: center;
    color: var(--dnd-gray-400);
    font-style: italic;
    padding: var(--dnd-spacing-md);
}

/* Info sorts connus/préparés */
.dnd-spells-known-info {
    text-align: center;
    margin-bottom: var(--dnd-spacing-lg);
}

/* Types de magie (explication) */
.dnd-magic-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--dnd-spacing-md);
    margin: var(--dnd-spacing-md) 0;
}

.dnd-magic-type {
    padding: var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
}

.dnd-magic-type h4 {
    margin: 0 0 var(--dnd-spacing-sm) 0;
    font-size: 1rem;
    color: var(--dnd-gray-800);
}

.dnd-magic-type p {
    margin: 0 0 var(--dnd-spacing-xs) 0;
    font-size: 0.9rem;
}

.dnd-magic-type.cantrip-type {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 4px solid var(--dnd-success);
}

.dnd-magic-type.spell-type {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-left: 4px solid var(--dnd-primary);
}

.dnd-magic-example {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
    font-style: italic;
}

.dnd-spellcasting-stats-explain {
    margin-top: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
}

.dnd-spellcasting-stats-explain ul {
    margin: var(--dnd-spacing-sm) 0 0 var(--dnd-spacing-lg);
    padding: 0;
}

.dnd-spellcasting-stats-explain li {
    margin-bottom: var(--dnd-spacing-xs);
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
}

/* Quota info (tours de magie et sorts) */
.dnd-quota-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 2px solid #facc15;
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-quota-label {
    font-weight: 600;
    color: var(--dnd-gray-700);
}

.dnd-quota-value {
    font-size: 1.1rem;
    color: var(--dnd-primary);
}

.dnd-quota-hint {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-full);
}

.dnd-cantrips-section,
.dnd-level-spells-section {
    margin-bottom: var(--dnd-spacing-xl);
}

/* Note sur les quotas de sorts */
.dnd-quota-note {
    background: linear-gradient(135deg, #1a3a2a 0%, #0d2818 100%);
    border: 1px solid #2a6b4a;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #a8d5ba;
    font-style: italic;
}

.dnd-spells-filter {
    display: flex;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-filter-select {
    padding: var(--dnd-spacing-sm);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    background: var(--dnd-white);
}

.dnd-spells-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--dnd-spacing-sm);
}

.dnd-spell-card {
    display: flex;
    align-items: flex-start;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
}

.dnd-spell-card:hover {
    border-color: var(--dnd-primary-light);
    box-shadow: var(--dnd-shadow-sm);
}

.dnd-spell-card.selected {
    border-color: var(--dnd-primary);
    background: rgba(124, 58, 237, 0.1);
}

.dnd-spell-checkbox {
    margin-top: 2px;
}

.dnd-spell-info {
    flex: 1;
}

.dnd-spell-name {
    font-weight: 600;
    color: var(--dnd-gray-800);
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-spell-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
    font-size: 0.75rem;
    color: var(--dnd-gray-500);
}

.dnd-spell-school {
    background: var(--dnd-gray-100);
    padding: 2px 6px;
    border-radius: var(--dnd-radius-sm);
}

.dnd-spell-details-btn {
    font-size: 0.75rem;
    color: var(--dnd-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Tags de sorts (Concentration, Rituel) */
.dnd-spell-tag {
    font-size: 0.65rem;
    padding: 1px 4px;
    border-radius: var(--dnd-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.dnd-spell-tag.concentration {
    background: var(--dnd-warning);
    color: var(--dnd-gray-800);
}

.dnd-spell-tag.ritual {
    background: var(--dnd-info);
    color: var(--dnd-white);
}

/* Tooltip des sorts (comme pour les compétences) */
.dnd-spell-card {
    position: relative;
}

.dnd-spell-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    max-width: 90vw;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-800);
    color: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
    z-index: var(--dnd-z-dropdown);
    box-shadow: var(--dnd-shadow-lg);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-spell-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--dnd-gray-800);
}

.dnd-spell-card:hover .dnd-spell-tooltip {
    display: block;
    animation: fadeIn var(--dnd-transition-fast);
}

.dnd-spell-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dnd-spacing-sm);
    padding-bottom: var(--dnd-spacing-sm);
    border-bottom: 1px solid var(--dnd-gray-600);
}

.dnd-spell-tooltip-header strong {
    color: var(--dnd-primary-light);
}

.dnd-spell-tooltip-school {
    font-style: italic;
    color: var(--dnd-gray-400);
    font-size: 0.8rem;
    text-transform: capitalize;
}

.dnd-spell-tooltip-details {
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-spell-tooltip-details p {
    margin: 0 0 var(--dnd-spacing-xs) 0;
    font-size: 0.8rem;
}

.dnd-spell-tooltip-description {
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid var(--dnd-gray-600);
}

.dnd-spell-tooltip-description p {
    margin: 0;
    color: var(--dnd-gray-200);
}

.dnd-spell-tooltip-damage {
    margin-top: var(--dnd-spacing-sm);
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid var(--dnd-gray-600);
    color: var(--dnd-danger-light);
}

/* Sorts personnalisés */
.dnd-custom-spells-section {
    margin-top: var(--dnd-spacing-xl);
    padding-top: var(--dnd-spacing-lg);
    border-top: 2px dashed var(--dnd-gray-200);
}

.dnd-custom-spells-section h3 {
    margin-bottom: var(--dnd-spacing-sm);
    color: var(--dnd-gray-700);
}

.dnd-custom-spell-form {
    background: var(--dnd-gray-50);
    padding: var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-custom-spell-form .dnd-form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-custom-spell-form .dnd-form-group {
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-custom-spell-form .dnd-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--dnd-spacing-xs);
    font-size: 0.85rem;
    color: var(--dnd-gray-700);
}

.dnd-custom-spell-form .dnd-input,
.dnd-custom-spell-form .dnd-select,
.dnd-custom-spell-form .dnd-textarea {
    width: 100%;
    padding: var(--dnd-spacing-sm);
    border: 1px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.9rem;
}

.dnd-custom-spell-form .dnd-textarea {
    resize: vertical;
    min-height: 60px;
}

.dnd-custom-spells-list {
    margin-top: var(--dnd-spacing-md);
}

.dnd-custom-spell-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-white);
    border: 1px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-sm);
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-custom-spell-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
    align-items: center;
}

.dnd-custom-spell-name {
    font-weight: 600;
    color: var(--dnd-gray-800);
}

.dnd-custom-spell-level {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: var(--dnd-primary-light);
    color: var(--dnd-primary-dark);
    border-radius: var(--dnd-radius-sm);
}

.dnd-custom-spell-desc {
    width: 100%;
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
    font-style: italic;
}

.dnd-no-custom-spells {
    text-align: center;
    color: var(--dnd-gray-400);
    font-style: italic;
    padding: var(--dnd-spacing-md);
}

/* Section "Ce que vous devez choisir" */
.dnd-spells-to-choose {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid var(--dnd-success);
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-spells-to-choose h4 {
    color: var(--dnd-success-dark);
    margin: 0 0 var(--dnd-spacing-sm) 0;
    font-size: 1.1rem;
}

.dnd-choose-explanation {
    color: var(--dnd-gray-600);
    margin-bottom: var(--dnd-spacing-md);
    font-size: 0.9rem;
}

.dnd-choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--dnd-spacing-md);
}

.dnd-choose-item {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    background: var(--dnd-white);
    padding: var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    box-shadow: var(--dnd-shadow-sm);
}

.dnd-choose-item.cantrips {
    border-left: 4px solid var(--dnd-accent);
}

.dnd-choose-item.spells {
    border-left: 4px solid var(--dnd-primary);
}

.dnd-choose-icon {
    font-size: 2rem;
}

.dnd-choose-info {
    flex: 1;
}

.dnd-choose-label {
    font-size: 0.85rem;
    color: var(--dnd-gray-600);
    margin-bottom: 2px;
}

.dnd-choose-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dnd-gray-800);
    line-height: 1;
}

.dnd-choose-hint {
    font-size: 0.75rem;
    color: var(--dnd-gray-500);
    margin-top: 4px;
}

/* Section emplacements de sorts */
.dnd-spell-slots-summary {
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-spell-slots-summary h4 {
    color: var(--dnd-gray-700);
    margin: 0 0 var(--dnd-spacing-xs) 0;
    font-size: 1rem;
}

.dnd-slots-subtitle {
    font-weight: 400;
    color: var(--dnd-gray-500);
    font-size: 0.85rem;
}

.dnd-slots-explanation {
    color: var(--dnd-gray-500);
    font-size: 0.85rem;
    margin-bottom: var(--dnd-spacing-md);
}

/* Compteurs de sélection améliorés */
.dnd-selection-counter {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    border: 2px solid var(--dnd-gray-200);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-selection-counter.complete {
    border-color: var(--dnd-success);
    background: #f0fdf4;
}

.dnd-counter-box {
    display: flex;
    align-items: baseline;
    gap: 2px;
    background: var(--dnd-primary-light);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
}

.dnd-selection-counter.complete .dnd-counter-box {
    background: var(--dnd-success);
}

.dnd-selection-counter.complete .dnd-counter-current,
.dnd-selection-counter.complete .dnd-counter-separator,
.dnd-selection-counter.complete .dnd-counter-max {
    color: var(--dnd-white);
}

/* Style pour dépassement du nombre recommandé */
.dnd-selection-counter.exceeds {
    border-color: var(--dnd-warning);
    background: #fffbeb;
}

.dnd-selection-counter.exceeds .dnd-counter-box {
    background: var(--dnd-warning);
}

.dnd-selection-counter.exceeds .dnd-counter-current,
.dnd-selection-counter.exceeds .dnd-counter-separator,
.dnd-selection-counter.exceeds .dnd-counter-max {
    color: var(--dnd-gray-800);
}

.dnd-counter-current {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dnd-primary-dark);
}

.dnd-counter-separator {
    font-size: 1.2rem;
    color: var(--dnd-primary);
}

.dnd-counter-max {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dnd-primary-dark);
}

.dnd-counter-label {
    font-weight: 600;
    color: var(--dnd-gray-700);
}

.dnd-counter-hint {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
}

/* Section des sorts à choisir */
.dnd-spells-selection-summary {
    margin: var(--dnd-spacing-lg) 0;
}

.dnd-spells-selection-summary h3 {
    margin-bottom: var(--dnd-spacing-sm);
    color: var(--dnd-gray-700);
}

/* Tooltips équipement */
.dnd-equipment-item-hover {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--dnd-primary);
    transition: color var(--dnd-transition-fast);
}

.dnd-equipment-item-hover:hover {
    color: var(--dnd-primary);
}

.dnd-equipment-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-800);
    color: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    box-shadow: var(--dnd-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--dnd-transition-fast);
    z-index: var(--dnd-z-dropdown);
    pointer-events: none;
    margin-bottom: var(--dnd-spacing-sm);
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.4;
}

.dnd-equipment-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--dnd-gray-800);
}

.dnd-equipment-item-hover:hover .dnd-equipment-tooltip {
    opacity: 1;
    visibility: visible;
}

.dnd-equipment-tooltip-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--dnd-spacing-xs);
    color: var(--dnd-accent);
}

.dnd-equipment-tooltip-desc {
    margin-bottom: var(--dnd-spacing-sm);
    color: var(--dnd-gray-200);
}

.dnd-equipment-tooltip-details {
    font-size: 0.8rem;
    color: var(--dnd-gray-400);
    padding-top: var(--dnd-spacing-xs);
    border-top: 1px solid var(--dnd-gray-600);
}

/* ==========================================================================
   15. RÉCAPITULATIF
   ========================================================================== */

.dnd-character-sheet {
    background: var(--dnd-white);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-lg);
    overflow: hidden;
}

.dnd-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-lg);
    background: linear-gradient(135deg, var(--dnd-secondary) 0%, #312e81 100%);
    color: var(--dnd-white);
}

.dnd-sheet-name h3 {
    margin: 0 0 var(--dnd-spacing-xs);
    color: var(--dnd-white);
    font-size: 1.5rem;
}

.dnd-sheet-name p {
    margin: 0;
    opacity: 0.9;
}

.dnd-sheet-quick-stats {
    display: flex;
    gap: var(--dnd-spacing-md);
}

.dnd-quick-stat {
    text-align: center;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--dnd-radius-md);
}

.dnd-qs-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.dnd-qs-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.8;
}

.dnd-sheet-section {
    padding: var(--dnd-spacing-lg);
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-sheet-section:last-child {
    border-bottom: none;
}

.dnd-sheet-section h4 {
    margin-bottom: var(--dnd-spacing-md);
    padding-bottom: var(--dnd-spacing-sm);
    border-bottom: 2px solid var(--dnd-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dnd-summary-abilities {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--dnd-spacing-sm);
}

.dnd-summary-ability {
    text-align: center;
    padding: var(--dnd-spacing-sm);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
}

.dnd-summary-ability .name {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--dnd-gray-500);
}

.dnd-summary-ability .value {
    font-size: 1.25rem;
    font-weight: 700;
}

.dnd-summary-ability .mod {
    font-size: 0.9rem;
    color: var(--dnd-primary);
}

.dnd-summary-skills,
.dnd-summary-equipment,
.dnd-summary-spells,
.dnd-summary-traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
}

.dnd-summary-tag {
    background: var(--dnd-gray-100);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.85rem;
}

.dnd-summary-tag.spell {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--dnd-primary-light);
}

/* En-tête complet avec portrait */
.dnd-sheet-header-full {
    display: flex;
    gap: var(--dnd-spacing-lg);
    padding: var(--dnd-spacing-lg);
    background: linear-gradient(135deg, var(--dnd-secondary) 0%, #312e81 100%);
    color: var(--dnd-white);
}

.dnd-sheet-portrait {
    flex-shrink: 0;
}

.dnd-portrait-placeholder {
    width: 120px;
    height: 160px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--dnd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.dnd-portrait-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: var(--dnd-radius-lg);
}

.dnd-portrait-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.dnd-sheet-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dnd-sheet-header-info .dnd-sheet-name h3 {
    margin: 0 0 var(--dnd-spacing-xs);
    color: var(--dnd-white);
    font-size: 1.5rem;
}

.dnd-sheet-header-info .dnd-sheet-name p {
    margin: 0;
    opacity: 0.9;
}

.dnd-sheet-alignment {
    margin-top: var(--dnd-spacing-xs) !important;
    font-style: italic;
    opacity: 0.8;
    font-size: 0.9rem;
}

.dnd-sheet-header-info .dnd-sheet-quick-stats {
    margin-top: var(--dnd-spacing-md);
}

/* Langues et maîtrises */
.dnd-summary-languages,
.dnd-summary-saves,
.dnd-summary-proficiencies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
}

/* Personnalité */
.dnd-summary-personality {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dnd-spacing-md);
}

.dnd-personality-item {
    background: var(--dnd-gray-50);
    padding: var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    border-left: 3px solid var(--dnd-primary);
}

.dnd-personality-item strong {
    display: block;
    color: var(--dnd-primary-dark);
    margin-bottom: var(--dnd-spacing-xs);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.dnd-personality-item p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dnd-gray-700);
}

/* Histoire du personnage */
.dnd-summary-story p {
    background: var(--dnd-gray-50);
    padding: var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    margin: 0;
    font-style: italic;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Historique */
.dnd-summary-background p {
    margin: 0;
    font-size: 0.95rem;
}

.dnd-summary-background span {
    color: var(--dnd-primary-dark);
    font-weight: 600;
}

/* Actions finales */
.dnd-final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dnd-spacing-md);
    margin-top: var(--dnd-spacing-xl);
    padding-top: var(--dnd-spacing-xl);
    border-top: 2px dashed var(--dnd-gray-200);
}

/* ==========================================================================
   15b. FICHE DE PERSONNAGE OFFICIELLE D&D
   ========================================================================== */

.dnd-official-sheet {
    background: #fdf8f0;
    border: 3px solid #58180d;
    border-radius: 0;
    font-family: 'Crimson Text', 'Times New Roman', serif;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

/* Box-sizing pour tous les éléments de la fiche officielle */
.dnd-official-sheet *,
.dnd-official-sheet *::before,
.dnd-official-sheet *::after {
    box-sizing: border-box;
}

/* EN-TÊTE OFFICIEL */
.dnd-sheet-header-official {
    display: flex;
    gap: var(--dnd-spacing-lg);
    padding: var(--dnd-spacing-lg);
    background: linear-gradient(180deg, #f0e6d2 0%, #e8dcc8 100%);
    border-bottom: 2px solid #58180d;
}

.dnd-sheet-portrait-box {
    flex-shrink: 0;
    text-align: center;
}

.dnd-sheet-portrait-box .dnd-portrait-placeholder {
    width: 100px;
    height: 130px;
    background: #fff;
    border: 2px solid #58180d;
    border-radius: 4px;
}

.dnd-sheet-portrait-box .dnd-portrait-placeholder img {
    border-radius: 2px;
}

.dnd-portrait-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #58180d;
    margin-top: 4px;
    font-weight: 600;
}

.dnd-sheet-header-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-sm);
}

.dnd-header-row {
    display: flex;
    gap: var(--dnd-spacing-md);
}

.dnd-header-row-name {
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-header-field {
    flex: 1;
    border-bottom: 1px solid #58180d;
    padding-bottom: 2px;
}

.dnd-header-field-name {
    flex: 2;
}

.dnd-field-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    min-height: 1.2em;
}

.dnd-header-field-name .dnd-field-value {
    font-size: 1.4rem;
    font-weight: 700;
}

.dnd-field-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #58180d;
    margin-top: 2px;
}

/* MENSURATIONS (HAUT DROITE) */
.dnd-sheet-measurements-box {
    flex-shrink: 0;
    min-width: 100px;
    background: #fff;
    border: 2px solid #58180d;
    border-radius: 4px;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    text-align: center;
}

.dnd-measurements-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #58180d;
    font-weight: 700;
    border-bottom: 1px solid #c9ad6a;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.dnd-measurements-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dnd-measurement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.dnd-measurement-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
}

.dnd-measurement-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
}

/* CORPS 3 COLONNES */
.dnd-sheet-body-3col {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    overflow: hidden;
}

.dnd-sheet-col {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-md);
    min-width: 0;
    overflow: hidden;
}

/* BOÎTES COMMUNES */
.dnd-sheet-box {
    background: #fff;
    border: 1px solid #c9ad6a;
    border-radius: 4px;
    padding: var(--dnd-spacing-md);
    min-width: 0;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dnd-box-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #58180d;
    font-weight: 700;
    margin: 0 0 var(--dnd-spacing-sm);
    padding-bottom: var(--dnd-spacing-xs);
    border-bottom: 2px solid #c9ad6a;
    letter-spacing: 0.5px;
}

/* COLONNE GAUCHE - CARACTÉRISTIQUES */
.dnd-abilities-box {
    background: transparent;
    border: none;
    padding: 0;
}

.dnd-official-sheet .dnd-summary-abilities {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-sm);
}

.dnd-ability-block {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #58180d;
    border-radius: 4px;
    padding: var(--dnd-spacing-sm);
    position: relative;
}

.dnd-ability-block::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 6px;
    background: #58180d;
    border-radius: 0 0 4px 4px;
}

.dnd-ability-name {
    width: 40px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #58180d;
}

.dnd-ability-mod {
    flex: 1;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
}

.dnd-ability-score {
    width: 30px;
    height: 30px;
    background: #f0e6d2;
    border: 1px solid #58180d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Bonus de maîtrise */
.dnd-prof-bonus {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    margin-top: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-sm);
    background: #fff;
    border: 2px solid #58180d;
    border-radius: 4px;
}

.dnd-prof-value {
    width: 40px;
    height: 40px;
    background: #58180d;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.dnd-prof-label {
    flex: 1;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #58180d;
    font-weight: 600;
}

/* JETS DE SAUVEGARDE ET COMPÉTENCES */
.dnd-saves-list,
.dnd-skills-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
}

.dnd-save-item,
.dnd-skill-item {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    padding: 2px 0;
}

.dnd-save-item .dnd-proficiency-dot,
.dnd-skill-item .dnd-proficiency-dot {
    width: 10px;
    height: 10px;
    border: 1px solid #58180d;
    border-radius: 50%;
    flex-shrink: 0;
}

.dnd-save-item .dnd-proficiency-dot.proficient,
.dnd-skill-item .dnd-proficiency-dot.proficient {
    background: #58180d;
}

.dnd-save-item .dnd-save-mod,
.dnd-skill-item .dnd-skill-mod {
    width: 30px;
    text-align: right;
    font-weight: 600;
}

.dnd-save-item .dnd-save-name,
.dnd-skill-item .dnd-skill-name {
    flex: 1;
}

.dnd-skill-item .dnd-skill-ability {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
}

/* Perception passive */
.dnd-passive-perception {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    margin-top: var(--dnd-spacing-md);
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid #c9ad6a;
}

.dnd-passive-value {
    width: 30px;
    height: 30px;
    background: #f0e6d2;
    border: 1px solid #58180d;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.dnd-passive-label {
    flex: 1;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #58180d;
}

/* COLONNE CENTRALE - COMBAT */
.dnd-combat-stats {
    display: flex;
    justify-content: space-between;
    gap: var(--dnd-spacing-sm);
}

.dnd-combat-stat-box {
    flex: 1;
    text-align: center;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-sm);
    background: #fff;
    border: 2px solid #58180d;
    border-radius: 4px;
    position: relative;
}

.dnd-combat-stat-box::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 8px solid #58180d;
}

.dnd-combat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
}

.dnd-combat-label {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #58180d;
    margin-top: 4px;
}

/* Points de vie */
.dnd-hp-box {
    margin-top: var(--dnd-spacing-md);
}

.dnd-hp-max {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--dnd-spacing-sm);
    border-bottom: 1px solid #c9ad6a;
}

.dnd-hp-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #58180d;
}

.dnd-hp-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #58180d;
}

.dnd-hp-current {
    padding: var(--dnd-spacing-md) 0;
}

.dnd-hp-current-box {
    height: 50px;
    background: #f9f5ed;
    border: 1px dashed #c9ad6a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: var(--dnd-spacing-sm);
}

.dnd-hp-current-label {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
}

.dnd-hp-temp {
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid #c9ad6a;
    text-align: left;
    padding-left: var(--dnd-spacing-sm);
}

.dnd-hp-temp-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #666;
}

/* Dés de vie et jets contre la mort */
.dnd-sheet-box-row {
    display: flex;
    gap: var(--dnd-spacing-sm);
}

.dnd-hitdice-box,
.dnd-deathsaves-box {
    flex: 1;
    text-align: center;
}

.dnd-hitdice-label,
.dnd-deathsaves-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #58180d;
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-hitdice-value {
    font-size: 1.1rem;
    font-weight: 700;
}

.dnd-deathsaves {
    font-size: 0.75rem;
}

.dnd-deathsaves-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.dnd-deathsaves-circles {
    letter-spacing: 2px;
}

/* Attaques */
.dnd-attacks-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.dnd-attacks-table th {
    text-align: left;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #58180d;
    padding: 4px;
    border-bottom: 1px solid #c9ad6a;
}

.dnd-attacks-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #f0e6d2;
}

.dnd-attacks-table tbody tr:last-child td {
    border-bottom: none;
}

/* Équipement */
.dnd-equipment-list {
    font-size: 0.85rem;
    line-height: 1.6;
}

.dnd-equipment-list .dnd-summary-tag {
    background: #f0e6d2;
    border: 1px solid #c9ad6a;
    margin: 2px;
}

.dnd-money {
    margin-top: var(--dnd-spacing-sm);
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid #c9ad6a;
    display: flex;
    justify-content: space-between;
}

.dnd-money-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #58180d;
}

.dnd-money-value {
    font-weight: 700;
}

/* COLONNE DROITE - PERSONNALITÉ */
.dnd-personality-box {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-md);
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.dnd-personality-field {
    border-bottom: 1px solid #c9ad6a;
    padding-bottom: var(--dnd-spacing-sm);
}

.dnd-personality-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dnd-personality-field h5 {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #58180d;
    margin: 0 0 var(--dnd-spacing-xs);
    font-weight: 700;
}

.dnd-personality-field p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #333;
    font-style: italic;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Traits et capacités */
.dnd-traits-section {
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-traits-section:last-child {
    margin-bottom: 0;
}

.dnd-traits-section h5 {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #58180d;
    margin: 0 0 var(--dnd-spacing-xs);
    font-weight: 700;
}

.dnd-traits-list {
    font-size: 0.8rem;
    line-height: 1.5;
}

.dnd-trait-item {
    margin-bottom: 4px;
    padding-left: var(--dnd-spacing-sm);
    position: relative;
}

.dnd-trait-item::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #58180d;
}

/* SECTION 2 COLONNES (LANGUES/ÉQUIPEMENT) */
.dnd-sheet-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    padding-top: 0;
}

.dnd-proficiencies-box .dnd-box-title {
    margin-top: var(--dnd-spacing-md);
}

.dnd-proficiencies-box .dnd-box-title:first-child {
    margin-top: 0;
}

.dnd-languages-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.85rem;
}

.dnd-languages-list .dnd-summary-tag {
    background: #f0e6d2;
    border: 1px solid #c9ad6a;
}

.dnd-proficiencies-detail {
    font-size: 0.85rem;
}

.dnd-prof-category {
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-prof-category strong {
    color: #58180d;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.dnd-equipment-detailed h5 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #58180d;
    margin: var(--dnd-spacing-sm) 0 var(--dnd-spacing-xs);
}

.dnd-equipment-detailed h5:first-child {
    margin-top: 0;
}

.dnd-equipment-detailed ul {
    margin: 0;
    padding-left: var(--dnd-spacing-md);
    font-size: 0.85rem;
}

.dnd-equipment-detailed li {
    margin-bottom: 2px;
}

/* SECTION SORTS */
.dnd-spells-section {
    margin: var(--dnd-spacing-md);
    margin-top: 0;
}

.dnd-spellcasting-info {
    display: flex;
    justify-content: space-around;
    padding: var(--dnd-spacing-sm) 0;
    margin-bottom: var(--dnd-spacing-md);
    border-bottom: 2px solid #c9ad6a;
}

.dnd-spellcast-stat {
    text-align: center;
}

.dnd-spellcast-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #58180d;
}

.dnd-spellcast-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 2px;
}

.dnd-spells-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--dnd-spacing-md);
}

.dnd-spell-level-group {
    background: #f9f5ed;
    border: 1px solid #c9ad6a;
    border-radius: 4px;
    padding: var(--dnd-spacing-sm);
}

.dnd-spell-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dnd-spacing-xs);
    padding-bottom: var(--dnd-spacing-xs);
    border-bottom: 1px solid #c9ad6a;
}

.dnd-spell-level-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #58180d;
}

.dnd-spell-slots {
    font-size: 0.7rem;
    color: #666;
}

.dnd-spell-list {
    font-size: 0.8rem;
}

.dnd-spell-item {
    padding: 2px 0;
}

/* SECTION HISTOIRE */
.dnd-story-section {
    margin: var(--dnd-spacing-md);
    margin-top: 0;
}

.dnd-story-background {
    margin-bottom: var(--dnd-spacing-md);
    font-size: 0.9rem;
}

.dnd-story-background strong {
    color: #58180d;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.dnd-story-content {
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-story-content:last-child {
    margin-bottom: 0;
}

.dnd-story-content h5 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #58180d;
    margin: 0 0 var(--dnd-spacing-xs);
}

.dnd-story-content p {
    margin: 0;
    padding: var(--dnd-spacing-sm);
    background: #f9f5ed;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* RESPONSIVE FICHE OFFICIELLE */
@media (max-width: 1024px) {
    .dnd-sheet-body-3col {
        grid-template-columns: 1fr 1fr;
    }

    .dnd-sheet-col-right {
        grid-column: span 2;
    }

    .dnd-sheet-col-right .dnd-personality-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--dnd-spacing-md);
    }

    .dnd-sheet-col-right .dnd-personality-field {
        border-bottom: none;
        border-right: 1px solid #c9ad6a;
        padding-right: var(--dnd-spacing-md);
    }

    .dnd-sheet-col-right .dnd-personality-field:nth-child(2n) {
        border-right: none;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .dnd-sheet-header-official {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dnd-header-row {
        flex-direction: column;
        gap: var(--dnd-spacing-sm);
    }

    .dnd-sheet-body-3col {
        grid-template-columns: 1fr;
    }

    .dnd-sheet-col-right {
        grid-column: auto;
    }

    .dnd-sheet-col-right .dnd-personality-box {
        grid-template-columns: 1fr;
    }

    .dnd-sheet-col-right .dnd-personality-field {
        border-right: none;
        border-bottom: 1px solid #c9ad6a;
        padding-right: 0;
        padding-bottom: var(--dnd-spacing-sm);
    }

    .dnd-sheet-row-2col {
        grid-template-columns: 1fr;
    }

    .dnd-combat-stats {
        flex-wrap: wrap;
    }

    .dnd-combat-stat-box {
        min-width: calc(50% - var(--dnd-spacing-sm));
    }
}

/* ==========================================================================
   16. NAVIGATION FOOTER
   ========================================================================== */

.dnd-footer {
    position: sticky;
    bottom: 0;
    background: var(--dnd-white);
    padding: var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-lg);
    box-shadow: var(--dnd-shadow-lg);
}

.dnd-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--dnd-spacing-md);
}

/* ==========================================================================
   17. MODALES
   ========================================================================== */

.dnd-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--dnd-z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--dnd-spacing-md);
}

.dnd-modal.active {
    display: flex;
}

.dnd-modal-content {
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn var(--dnd-transition-normal);
}

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

.dnd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-modal-header h3 {
    margin: 0;
}

.dnd-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dnd-gray-500);
    padding: 0;
    line-height: 1;
}

.dnd-modal-close:hover {
    color: var(--dnd-gray-800);
}

.dnd-modal-body {
    padding: var(--dnd-spacing-lg);
    overflow-y: auto;
}

/* Liste des personnages */
.dnd-characters-list {
    display: grid;
    gap: var(--dnd-spacing-md);
}

.dnd-character-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: background var(--dnd-transition-fast);
}

.dnd-character-item:hover {
    background: var(--dnd-gray-100);
}

.dnd-character-info h4 {
    margin: 0 0 var(--dnd-spacing-xs);
    font-size: 1rem;
}

.dnd-character-meta {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
}

.dnd-character-date {
    font-size: 0.8rem;
    color: var(--dnd-gray-400);
    margin-top: var(--dnd-spacing-xs);
}

.dnd-modifier-player {
    color: var(--dnd-primary);
    font-weight: 500;
}

.dnd-modifier-dm {
    color: var(--dnd-warning-dark, #d97706);
    font-weight: 600;
}

/* Barre d'outils de sélection des personnages */
.dnd-characters-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-gray-100);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-md);
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
}

.dnd-characters-select-all {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
}

.dnd-characters-select-all input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.dnd-characters-select-all label {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
}

.dnd-characters-toolbar .dnd-characters-count {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
}

/* Checkbox dans les items de personnage */
.dnd-character-checkbox-wrapper {
    display: flex;
    align-items: center;
    padding-right: var(--dnd-spacing-md);
}

.dnd-character-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--dnd-primary);
}

.dnd-character-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dnd-spacing-md);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    transition: background var(--dnd-transition-fast);
}

/* Actions reçues - pour les partages */
.dnd-share-received-actions {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
}

.dnd-share-received-info {
    flex: 1;
}

/* Partage */
.dnd-share-options {
    display: grid;
    gap: var(--dnd-spacing-lg);
}

.dnd-share-option label {
    display: block;
    margin-bottom: var(--dnd-spacing-sm);
    font-weight: 600;
}

.dnd-share-link-group {
    display: flex;
    gap: var(--dnd-spacing-sm);
}

.dnd-share-link-group input {
    flex: 1;
    padding: var(--dnd-spacing-sm);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    background: var(--dnd-gray-50);
}

/* Section lien joueur dans la modale de partage */
.dnd-share-player-section {
    margin-top: var(--dnd-spacing-lg);
    padding-top: var(--dnd-spacing-lg);
    border-top: 2px dashed var(--dnd-gray-200);
}

.dnd-share-player-header label {
    color: var(--dnd-primary, #7c3aed);
    font-size: 1.1rem;
}

.dnd-share-help {
    font-size: 0.9rem;
    color: var(--dnd-gray-500);
    margin-bottom: var(--dnd-spacing-md);
    font-weight: normal;
}

.dnd-share-locks {
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-share-locks-title {
    font-weight: 600;
    margin-bottom: var(--dnd-spacing-sm);
    font-size: 0.9rem;
    color: var(--dnd-gray-700);
}

.dnd-share-locks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dnd-spacing-xs) var(--dnd-spacing-md);
}

.dnd-share-lock-item {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: normal;
}

.dnd-share-lock-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Modal connexion requise */
.dnd-login-required-content {
    text-align: center;
    padding: var(--dnd-spacing-lg);
}

.dnd-login-icon {
    font-size: 4rem;
    margin-bottom: var(--dnd-spacing-lg);
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.dnd-login-required-content p {
    font-size: 1.1rem;
    color: var(--dnd-gray-600);
    margin-bottom: var(--dnd-spacing-xl);
    line-height: 1.6;
}

.dnd-login-buttons {
    display: flex;
    gap: var(--dnd-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.dnd-login-buttons .dnd-btn {
    min-width: 160px;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-xl);
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dnd-login-buttons .dnd-btn-primary {
    background: linear-gradient(135deg, var(--dnd-primary) 0%, var(--dnd-primary-dark) 100%);
    color: var(--dnd-white);
    border: none;
    border-radius: var(--dnd-radius-md);
    box-shadow: var(--dnd-shadow-md);
    transition: all var(--dnd-transition-fast);
}

.dnd-login-buttons .dnd-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--dnd-shadow-lg);
}

.dnd-login-buttons .dnd-btn-secondary {
    background: var(--dnd-white);
    color: var(--dnd-primary);
    border: 2px solid var(--dnd-primary);
    border-radius: var(--dnd-radius-md);
    transition: all var(--dnd-transition-fast);
}

.dnd-login-buttons .dnd-btn-secondary:hover {
    background: var(--dnd-primary);
    color: var(--dnd-white);
    border-color: var(--dnd-primary);
}

/* Connexion sociale */
.dnd-social-login {
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-social-login-title {
    font-size: 0.9rem !important;
    color: var(--dnd-gray-500) !important;
    margin-bottom: var(--dnd-spacing-md) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.dnd-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    border-radius: var(--dnd-radius-md);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--dnd-transition-fast);
    cursor: pointer;
}

.dnd-social-btn svg {
    flex-shrink: 0;
}

.dnd-social-google {
    background: var(--dnd-white);
    color: var(--dnd-gray-700);
    border: 2px solid var(--dnd-gray-200);
}

.dnd-social-google:hover {
    background: var(--dnd-gray-50);
    border-color: var(--dnd-gray-300);
    transform: translateY(-2px);
    box-shadow: var(--dnd-shadow-md);
}

.dnd-social-facebook {
    background: #1877f2;
    color: var(--dnd-white);
    border: 2px solid #1877f2;
}

.dnd-social-facebook:hover {
    background: #166fe5;
    border-color: #166fe5;
    transform: translateY(-2px);
    box-shadow: var(--dnd-shadow-md);
}

.dnd-login-divider {
    display: flex;
    align-items: center;
    margin: var(--dnd-spacing-lg) 0;
}

.dnd-login-divider::before,
.dnd-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--dnd-gray-200);
}

.dnd-login-divider span {
    padding: 0 var(--dnd-spacing-md);
    color: var(--dnd-gray-400);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.dnd-login-info {
    font-size: 0.95rem !important;
    margin-bottom: var(--dnd-spacing-md) !important;
}

.dnd-login-note {
    font-size: 0.85rem !important;
    color: var(--dnd-gray-400) !important;
    margin-top: var(--dnd-spacing-md) !important;
    margin-bottom: 0 !important;
}

.dnd-login-restore-info {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: var(--dnd-radius-sm);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md) !important;
    color: var(--dnd-success) !important;
    font-weight: 500;
}

.dnd-login-saved-msg {
    font-size: 1.2rem !important;
    color: var(--dnd-success) !important;
    font-weight: 600;
    margin-bottom: var(--dnd-spacing-sm) !important;
}

.dnd-login-saved-msg.dnd-login-save-error {
    color: var(--dnd-danger, #c62828) !important;
}

.dnd-login-after-info {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.4);
    border-radius: var(--dnd-radius-sm);
    padding: var(--dnd-spacing-md);
    margin-top: var(--dnd-spacing-lg);
    text-align: center;
}

.dnd-login-after-info p {
    font-size: 0.9rem !important;
    color: var(--dnd-success-dark, #2e7d32) !important;
    margin: 0 0 var(--dnd-spacing-sm) 0 !important;
    line-height: 1.5;
}

.dnd-btn-success {
    background: var(--dnd-success);
    color: white;
    border: none;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-lg);
    border-radius: var(--dnd-radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.dnd-btn-success:hover {
    background: var(--dnd-success-dark, #2e7d32);
}

.dnd-login-warning {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.4);
    border-radius: var(--dnd-radius-sm);
    padding: var(--dnd-spacing-md);
    margin-top: var(--dnd-spacing-md);
}

.dnd-login-warning p {
    font-size: 0.85rem !important;
    color: var(--dnd-warning-dark, #e65100) !important;
    margin: 0 !important;
    line-height: 1.5;
}

.dnd-login-quit {
    margin-top: var(--dnd-spacing-md);
    text-align: center;
}

.dnd-btn-link {
    background: none;
    border: none;
    color: var(--dnd-gray-500);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    padding: var(--dnd-spacing-sm);
}

.dnd-btn-link:hover {
    color: var(--dnd-gray-700);
}

.dnd-modal-login .dnd-login-icon {
    font-size: 3rem;
    margin-bottom: var(--dnd-spacing-sm);
}

/* Page de connexion requise (pour liens de partage) */
.dnd-login-required-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--dnd-spacing-xl);
}

.dnd-login-required-box {
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-lg);
    box-shadow: var(--dnd-shadow-lg);
    padding: var(--dnd-spacing-xl);
    max-width: 500px;
    text-align: center;
}

.dnd-login-icon-large {
    font-size: 4rem;
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-login-required-box h2 {
    margin: 0 0 var(--dnd-spacing-md) 0;
    color: var(--dnd-primary);
}

.dnd-login-required-box p {
    margin: 0 0 var(--dnd-spacing-sm) 0;
    color: var(--dnd-text);
}

.dnd-login-subtitle {
    font-size: 0.9rem;
    color: var(--dnd-gray-600) !important;
}

.dnd-login-buttons-page {
    margin: var(--dnd-spacing-lg) 0;
}

.dnd-login-buttons-page .dnd-btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.dnd-login-buttons-page .dnd-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4) !important;
}

.dnd-login-note-page {
    font-size: 0.85rem;
    color: var(--dnd-gray-500) !important;
    margin-top: var(--dnd-spacing-md) !important;
}

/* ==========================================================================
   18. NOTIFICATIONS
   ========================================================================== */

.dnd-notifications {
    position: fixed;
    top: 100px; /* Position sous l'en-tête du site WordPress */
    right: var(--dnd-spacing-lg);
    z-index: var(--dnd-z-notification);
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-sm);
}

.dnd-notification {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    background: var(--dnd-white);
    border-radius: var(--dnd-radius-md);
    box-shadow: var(--dnd-shadow-lg);
    animation: notificationSlideIn var(--dnd-transition-normal);
    max-width: 350px;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dnd-notification.success {
    border-left: 4px solid var(--dnd-success);
}

.dnd-notification.error {
    border-left: 4px solid var(--dnd-danger);
}

.dnd-notification.warning {
    border-left: 4px solid var(--dnd-warning);
}

.dnd-notification.info {
    border-left: 4px solid var(--dnd-info);
}

/* ==========================================================================
   19. TOOLTIP
   ========================================================================== */

.dnd-tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--dnd-gray-400);
}

.dnd-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dnd-gray-800);
    color: var(--dnd-white);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--dnd-transition-fast);
    z-index: 10;
}

.dnd-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

/* Tablette */
@media (max-width: 1024px) {
    .dnd-header {
        /* Image de fond mystique - Tablette */
        background: var(--dnd-image-header-tablet) center center / cover no-repeat,
                    linear-gradient(135deg, #1a1744 0%, #2d2a5e 30%, #1e1b4b 70%, #0f0d24 100%);
        min-height: 250px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .dnd-creator {
        padding: var(--dnd-spacing-sm);
        background-size: 300px auto;
    }

    .dnd-header {
        flex-direction: column;
        text-align: center;
        padding: var(--dnd-spacing-lg) var(--dnd-spacing-md);
        /* Image de fond mystique - Mobile */
        background: var(--dnd-image-header-mobile) center center / cover no-repeat,
                    linear-gradient(135deg, #1a1744 0%, #2d2a5e 30%, #1e1b4b 70%, #0f0d24 100%);
        min-height: 220px;
    }

    .dnd-title {
        font-size: 1.5rem;
        line-height: 1.3;
        letter-spacing: 0.04em;
    }

    .dnd-subtitle {
        font-size: 0.95rem;
    }

    /* Séparateur plus petit sur mobile */
    .dnd-header-content::after {
        font-size: 1rem;
        letter-spacing: 0.3em;
    }

    .dnd-steps-list {
        justify-content: flex-start;
        padding-bottom: var(--dnd-spacing-sm);
    }

    .dnd-step {
        min-width: 60px;
    }

    .dnd-step-label {
        font-size: 0.65rem;
    }

    .dnd-main {
        padding: var(--dnd-spacing-md);
    }

    .dnd-mode-cards {
        grid-template-columns: 1fr;
    }

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

    .dnd-summary-abilities {
        grid-template-columns: repeat(3, 1fr);
    }

    .dnd-sheet-header {
        flex-direction: column;
        text-align: center;
    }

    .dnd-sheet-header-full {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dnd-sheet-header-info {
        align-items: center;
    }

    .dnd-portrait-placeholder {
        width: 80px;
        height: 80px;
    }

    .dnd-portrait-icon {
        font-size: 2.5rem;
    }

    .dnd-summary-personality {
        grid-template-columns: 1fr;
    }

    .dnd-sheet-quick-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dnd-navigation {
        flex-direction: column;
    }

    .dnd-navigation .dnd-btn {
        width: 100%;
    }

    .dnd-btn-text {
        display: none;
    }

    .dnd-notifications {
        top: 70px; /* Position sous l'en-tête mobile (plus petit) */
        left: var(--dnd-spacing-sm);
        right: var(--dnd-spacing-sm);
    }

    .dnd-notification {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .dnd-creator {
        background-size: 200px auto;
    }

    .dnd-title {
        font-size: 1.3rem;
    }

    .dnd-abilities-grid {
        grid-template-columns: 1fr;
    }

    .dnd-summary-abilities {
        grid-template-columns: repeat(2, 1fr);
    }

    .dnd-race-grid,
    .dnd-class-grid,
    .dnd-background-grid {
        grid-template-columns: 1fr;
    }

    .dnd-spells-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   21. MODE-SPECIFIC STYLES
   ========================================================================== */

/* Mode Indicator */
.dnd-mode-indicator {
    margin-top: var(--dnd-spacing-sm);
}

.dnd-mode-indicator .dnd-badge {
    font-size: 0.85rem;
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-md);
}

/* MODE JOUEURS */
.dnd-mode-player .dnd-explanation-box {
    display: block;
}

.dnd-mode-player .dnd-field-help {
    display: block;
}

.dnd-mode-player .dnd-help-text {
    display: block;
}

.dnd-mode-player .dnd-step-content {
    border-left: 4px solid var(--dnd-success);
}

/* MODE MJ (Collaboratif) */
.dnd-mode-dm .dnd-step-content {
    border-left: 4px solid var(--dnd-info);
}

.dnd-mode-dm .dnd-dm-lock-btn {
    display: inline-flex;
}

.dnd-mode-dm .dnd-dm-section-indicator {
    display: block;
}

/* DM Lock Button */
.dnd-dm-lock-btn {
    display: none;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    background: var(--dnd-info);
    color: white;
    border: none;
    border-radius: var(--dnd-radius-md);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dnd-dm-lock-btn:hover {
    background: var(--dnd-info-dark, #1565c0);
}

.dnd-dm-lock-btn.locked {
    background: var(--dnd-warning);
}

/* Section locked by DM */
.dnd-section-locked {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
}

.dnd-section-locked::after {
    content: "🔒 Verrouillé par le MJ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 193, 7, 0.9);
    color: #333;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-lg);
    border-radius: var(--dnd-radius-md);
    font-weight: 600;
    z-index: 10;
}

/* DM Section Indicator */
.dnd-dm-section-indicator {
    display: none;
    font-size: 0.85rem;
    color: var(--dnd-info);
    margin-top: var(--dnd-spacing-xs);
}

.dnd-dm-section-indicator::before {
    content: "👑 ";
}

/* Waiting for DM indicator */
.dnd-waiting-dm {
    display: inline-flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    background: var(--dnd-warning-light, #fff3cd);
    color: var(--dnd-warning-dark, #856404);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Mode badge colors */
.dnd-badge-success {
    background-color: var(--dnd-success) !important;
    color: white !important;
}

.dnd-badge-info {
    background-color: var(--dnd-info) !important;
    color: white !important;
}

.dnd-badge-warning {
    background-color: var(--dnd-warning) !important;
    color: #333 !important;
}

/* DM How-to section */
.dnd-dm-howto {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-dm-howto h5 {
    color: var(--dnd-info);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-dm-howto-content {
    padding: var(--dnd-spacing-sm) 0;
}

.dnd-dm-howto-steps {
    margin: 0;
    padding-left: var(--dnd-spacing-lg);
    list-style: decimal;
}

.dnd-dm-howto-steps li {
    margin-bottom: var(--dnd-spacing-xs);
    line-height: 1.6;
}

.dnd-dm-howto-steps li strong {
    color: var(--dnd-accent);
}

.dnd-dm-howto-note {
    margin-top: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-sm);
    background: rgba(255, 193, 7, 0.15);
    border-left: 3px solid var(--dnd-warning);
    border-radius: 0 var(--dnd-radius-sm) var(--dnd-radius-sm) 0;
    font-size: 0.9rem;
    color: var(--dnd-gray-700);
}

/* Mode cards styling */
.dnd-mode-card {
    transition: all 0.3s ease;
}

.dnd-mode-card[data-mode="guided"]:hover,
.dnd-mode-card[data-mode="player"]:hover,
.dnd-mode-card[data-mode="player"].selected {
    border-color: var(--dnd-success);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.dnd-mode-card[data-mode="random"]:hover,
.dnd-mode-card[data-mode="random"].selected {
    border-color: var(--dnd-warning);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

.dnd-mode-card[data-mode="dm_managed"]:hover,
.dnd-mode-card[data-mode="dm_managed"].selected {
    border-color: var(--dnd-info);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

/* Section requise en surbrillance */
.dnd-highlight-required {
    animation: pulseHighlight 1s ease-in-out 3;
    border: 2px solid var(--dnd-warning) !important;
    border-radius: 8px;
}

@keyframes pulseHighlight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0.6);
    }
}

/* Modes verrouillés (pour les personnages partagés) */
.dnd-mode-card.dnd-mode-locked {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(80%);
}

.dnd-mode-card.dnd-mode-locked:hover {
    transform: none;
    box-shadow: none;
}

.dnd-mode-card.dnd-mode-locked::after {
    content: "🔒";
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.2rem;
}

/* Read-only mode (viewer link) */
.dnd-read-only .dnd-form-group input,
.dnd-read-only .dnd-form-group select,
.dnd-read-only .dnd-form-group textarea {
    background-color: var(--dnd-gray-100) !important;
    cursor: not-allowed !important;
}

.dnd-read-only .dnd-card:not(.selected) {
    opacity: 0.5;
}

.dnd-read-only .dnd-card.selected {
    pointer-events: none;
}

.dnd-read-only .dnd-header::after {
    content: "Mode Visualisation";
    display: inline-block;
    background: var(--dnd-info);
    color: white;
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    margin-left: var(--dnd-spacing-md);
}

/* Viewer-only mode (lien de visualisation - récapitulatif uniquement) */
.dnd-viewer-only .dnd-header::after {
    content: "Fiche de personnage";
    display: inline-block;
    background: var(--dnd-primary);
    color: white;
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    margin-left: var(--dnd-spacing-md);
}

.dnd-viewer-only .dnd-character-sheet {
    border: none;
    box-shadow: var(--dnd-shadow-lg);
}

.dnd-viewer-only #step-summary {
    padding-top: var(--dnd-spacing-lg);
}

/* Mode MJ - Surbrillance des étapes en attente */
.dnd-dm-mode .dnd-header::after {
    content: "Mode MJ";
    display: inline-block;
    background: var(--dnd-warning);
    color: var(--dnd-gray-800);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: var(--dnd-spacing-md);
}

/* Masquer le bouton "C'est mon MJ qui décide" en mode MJ */
.dnd-dm-mode .dnd-btn-help-choice[data-action="dm"],
.dnd-mode-dm .dnd-btn-help-choice[data-action="dm"] {
    display: none !important;
}

/* Navigation - Étapes en attente du MJ (pastilles) */
.dnd-step.dnd-dm-pending {
    position: relative;
}

.dnd-step.dnd-dm-pending::before {
    content: "⚠️";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.8rem;
    z-index: 10;
}

.dnd-steps-list .dnd-step.dnd-dm-pending .dnd-step-number {
    background: linear-gradient(135deg, var(--dnd-warning) 0%, #f59e0b 100%) !important;
    color: var(--dnd-gray-800) !important;
    border-color: var(--dnd-warning) !important;
    animation: dm-pulse 2s ease-in-out infinite;
}

.dnd-steps-list .dnd-step.dnd-dm-pending .dnd-step-label {
    color: var(--dnd-warning-dark, #d97706);
    font-weight: 600;
}

@keyframes dm-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

/* Contenu des étapes en attente du MJ */
.dnd-step-content.dnd-dm-pending {
    border: 3px solid var(--dnd-warning);
    border-radius: var(--dnd-radius-lg);
    background: linear-gradient(to bottom, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
}

.dnd-step-content.dnd-dm-pending .dnd-step-header {
    position: relative;
}

/* Badge "À compléter par le MJ" */
.dnd-dm-badge {
    display: inline-block;
    background: var(--dnd-warning);
    color: var(--dnd-gray-800);
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: var(--dnd-spacing-md);
    animation: dm-badge-pulse 1.5s ease-in-out infinite;
}

@keyframes dm-badge-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Bouton de validation MJ */
.dnd-btn-dm-validate {
    display: inline-block;
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
    color: #ffffff !important;
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-md) !important;
    border-radius: var(--dnd-radius-md) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-left: var(--dnd-spacing-md) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.dnd-btn-dm-validate:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Sections masquées par le MJ */
.dnd-hidden-by-dm .dnd-step-number {
    background: var(--dnd-gray-400) !important;
    color: var(--dnd-gray-600) !important;
    border-color: var(--dnd-gray-400) !important;
}

.dnd-hidden-indicator {
    font-size: 0.7rem;
    margin-left: var(--dnd-spacing-xs);
}

.dnd-hidden-section-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: var(--dnd-spacing-xl);
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: var(--dnd-radius-lg);
}

.dnd-hidden-original-content {
    display: none !important;
}

.dnd-hidden-section-message .dnd-hidden-icon {
    font-size: 4rem;
    margin-bottom: var(--dnd-spacing-lg);
    opacity: 0.6;
}

.dnd-hidden-section-message h3 {
    color: var(--dnd-gray-700);
    margin-bottom: var(--dnd-spacing-md);
    font-size: 1.5rem;
}

.dnd-hidden-section-message p {
    color: var(--dnd-gray-600);
    margin-bottom: var(--dnd-spacing-sm);
    max-width: 400px;
}

.dnd-hidden-section-message .dnd-hidden-hint {
    font-style: italic;
    color: var(--dnd-gray-500);
    font-size: 0.9rem;
}

/* ==========================================================================
   22. PRINT STYLES
   ========================================================================== */

/* ==========================================================================
   PANNEAU DE CONTRÔLE MJ
   ========================================================================== */

.dnd-dm-panel {
    margin-top: var(--dnd-spacing-xl);
    border: 3px solid var(--dnd-info);
    border-radius: var(--dnd-radius-lg);
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    overflow: hidden;
}

.dnd-dm-panel-header {
    background: var(--dnd-info);
    color: white;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
}

.dnd-dm-panel-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.dnd-dm-panel-content {
    padding: var(--dnd-spacing-lg);
}

.dnd-dm-section {
    margin-bottom: var(--dnd-spacing-lg);
    padding-bottom: var(--dnd-spacing-lg);
    border-bottom: 1px dashed var(--dnd-gray-300);
}

.dnd-dm-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.dnd-dm-section h5 {
    font-size: 1rem;
    color: var(--dnd-gray-800);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-dm-help {
    font-size: 0.85rem;
    color: var(--dnd-gray-600);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-dm-locks,
.dnd-dm-visibility {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-spacing-sm);
}

.dnd-dm-lock-item,
.dnd-dm-visibility-item {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: white;
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all var(--dnd-transition-fast);
}

.dnd-dm-lock-item:hover,
.dnd-dm-visibility-item:hover {
    border-color: var(--dnd-info);
}

.dnd-dm-lock-item:has(input:checked),
.dnd-dm-visibility-item:has(input:checked) {
    border-color: var(--dnd-info);
    background: rgba(33, 150, 243, 0.1);
}

.dnd-dm-link-output {
    margin-top: var(--dnd-spacing-md);
    display: flex;
    gap: var(--dnd-spacing-sm);
}

.dnd-dm-link-output input {
    flex: 1;
    padding: var(--dnd-spacing-sm);
    border: 2px solid var(--dnd-gray-300);
    border-radius: var(--dnd-radius-md);
    font-size: 0.85rem;
    background: white;
}

/* Étapes verrouillées */
.dnd-step.dnd-locked {
    opacity: 0.6;
    pointer-events: none;
}

.dnd-step.dnd-locked::after {
    content: "🔒";
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.7rem;
}

.dnd-step-content.dnd-locked {
    position: relative;
    pointer-events: none;
    user-select: none;
}

.dnd-step-content.dnd-locked::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.dnd-step-content.dnd-locked::after {
    content: "🔒 Verrouillé par le MJ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--dnd-warning);
    color: var(--dnd-gray-900);
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    border-radius: var(--dnd-radius-lg);
    font-weight: 600;
    font-size: 1.1rem;
    z-index: 101;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Permettre l'interaction avec les boutons de navigation même sur une page verrouillée */
.dnd-step-content.dnd-locked ~ .dnd-footer,
.dnd-step-content.dnd-locked + .dnd-navigation {
    pointer-events: auto;
}

/* Éléments masqués par le MJ */
.dnd-dm-hidden {
    display: none !important;
}

/* Mode MJ visible uniquement pour le MJ */
.dnd-mode-dm .dnd-dm-panel {
    display: block;
}

/* ==========================================================================
   BOUTON DE VERROUILLAGE D'ÉTAPE (MODE MJ)
   ========================================================================== */

.dnd-btn-lock-step {
    display: none;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    margin-top: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: linear-gradient(135deg, var(--dnd-info), #2563eb);
    color: white;
    border: none;
    border-radius: var(--dnd-radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
    box-shadow: var(--dnd-shadow-sm);
}

.dnd-btn-lock-step:hover {
    background: linear-gradient(135deg, #2563eb, var(--dnd-info));
    transform: translateY(-1px);
    box-shadow: var(--dnd-shadow-md);
}

.dnd-btn-lock-step.dnd-locked {
    background: linear-gradient(135deg, var(--dnd-danger), #dc2626);
}

.dnd-btn-lock-step.dnd-locked:hover {
    background: linear-gradient(135deg, #dc2626, var(--dnd-danger));
}

.dnd-btn-lock-step .dnd-lock-icon {
    font-size: 1.1em;
}

.dnd-btn-lock-step .dnd-lock-text {
    font-size: 0.85rem;
}

/* Afficher les boutons de verrouillage en mode MJ */
.dnd-mode-dm .dnd-btn-lock-step {
    display: inline-flex;
}

/* En mode joueur, ne pas afficher les boutons de verrouillage */
.dnd-mode-player .dnd-btn-lock-step {
    display: none !important;
}

/* Bannière de rôle pour les personnages partagés chargés depuis le tableau de bord */
.dnd-share-role-banner {
    color: white;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-lg);
    border-radius: var(--dnd-radius-md);
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    box-shadow: var(--dnd-shadow-md);
    animation: slideInBanner 0.4s ease-out;
}

.dnd-share-role-banner.dnd-role-dm {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.dnd-share-role-banner.dnd-role-player {
    background: linear-gradient(135deg, var(--dnd-info), #1e40af);
}

.dnd-share-role-banner.dnd-role-player-edit {
    background: linear-gradient(135deg, #047857, #065f46);
}

.dnd-share-role-banner.dnd-role-owner-restricted {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--dnd-gray-900);
}

.dnd-share-role-banner .dnd-banner-icon {
    font-size: 1.8rem;
    animation: bounceIcon 0.6s ease-out 0.2s both;
}

.dnd-share-role-banner .dnd-banner-text {
    flex: 1;
}

.dnd-share-role-banner .dnd-banner-text strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: var(--dnd-spacing-xs);
}

.dnd-share-role-banner .dnd-banner-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

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

@keyframes bounceIcon {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* Panneau MJ pour personnage partagé reçu */
.dnd-dm-shared-panel,
.dnd-dm-creator-panel {
    background: linear-gradient(135deg, #f3e8ff, #fae8ff);
    border: 2px solid #a855f7;
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-lg);
    margin: var(--dnd-spacing-xl) 0;
}

.dnd-dm-shared-header {
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-dm-shared-header h4 {
    color: #7c3aed;
    margin: 0 0 var(--dnd-spacing-xs);
    font-size: 1.2rem;
}

.dnd-dm-shared-help {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.dnd-dm-shared-content .dnd-share-sections-config {
    display: flex;
    gap: var(--dnd-spacing-lg);
    flex-wrap: wrap;
}

.dnd-dm-shared-content .dnd-share-section-column {
    flex: 1;
    min-width: 200px;
    background: white;
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
}

.dnd-dm-shared-content .dnd-share-section-column h5 {
    margin: 0 0 var(--dnd-spacing-xs);
    color: #374151;
}

.dnd-dm-note {
    margin-top: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: rgba(168, 85, 247, 0.1);
    border-radius: var(--dnd-radius-md);
    font-size: 0.9rem;
    color: #7c3aed;
}

/* Tableau de restrictions simplifié */
.dnd-restrictions-table {
    background: white;
    border-radius: var(--dnd-radius-md);
    overflow: hidden;
    border: 1px solid var(--dnd-gray-200);
}

.dnd-restrictions-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-gray-100);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dnd-gray-700);
    border-bottom: 2px solid var(--dnd-gray-200);
}

.dnd-restrictions-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    align-items: center;
    border-bottom: 1px solid var(--dnd-gray-100);
    transition: background var(--dnd-transition-fast);
}

.dnd-restrictions-row:last-child {
    border-bottom: none;
}

.dnd-restrictions-row:hover {
    background: var(--dnd-gray-50);
}

.dnd-restrictions-section-name {
    font-weight: 500;
    color: var(--dnd-gray-800);
}

.dnd-restrictions-option {
    text-align: center;
    font-size: 0.8rem;
    color: var(--dnd-gray-600);
}

.dnd-restrictions-radio {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding: var(--dnd-spacing-xs);
}

.dnd-restrictions-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--dnd-primary);
}

/* État sélectionné pour les lignes de restrictions */
.dnd-restrictions-row:has(input[value="locked"]:checked) {
    background: rgba(239, 68, 68, 0.05);
}

.dnd-restrictions-row:has(input[value="hidden"]:checked) {
    background: rgba(168, 85, 247, 0.05);
}

/* Responsive pour le tableau de restrictions */
@media (max-width: 480px) {
    .dnd-restrictions-header,
    .dnd-restrictions-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        font-size: 0.8rem;
        padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    }

    .dnd-restrictions-option {
        font-size: 0.7rem;
    }
}

/* Panneau de restrictions des joueurs partagés */
.dnd-shared-player-restrictions {
    background: white;
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
    border: 1px solid var(--dnd-gray-200);
}

.dnd-shared-player-restrictions:last-child {
    margin-bottom: 0;
}

.dnd-shared-player-header {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
    padding-bottom: var(--dnd-spacing-sm);
    border-bottom: 1px solid var(--dnd-gray-100);
}

.dnd-shared-player-info {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    flex-wrap: wrap;
}

.dnd-shared-player-info strong {
    color: var(--dnd-gray-800);
}

.dnd-shared-player-actions {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    margin-top: var(--dnd-spacing-md);
    padding-top: var(--dnd-spacing-sm);
    border-top: 1px solid var(--dnd-gray-100);
}

.dnd-shared-player-actions .dnd-save-status {
    font-size: 0.9rem;
}

.dnd-shared-player-actions .dnd-success {
    color: var(--dnd-success);
}

.dnd-shared-player-actions .dnd-error {
    color: var(--dnd-danger);
}

.player-restrictions-table {
    margin-top: var(--dnd-spacing-sm);
}

/* Badge de notification sur le bouton partage */
.dnd-share-notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--dnd-danger);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-badge 2s infinite;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
    }
}

/* v1.9.15: Panneau de notification détaillé pour le partage */
.dnd-share-notification-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--dnd-spacing-sm);
    background: var(--dnd-white);
    border: 1px solid var(--dnd-danger);
    border-radius: var(--dnd-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 350px;
    z-index: 1000;
    overflow: hidden;
}

.dnd-notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: var(--dnd-danger);
    color: var(--dnd-white);
}

.dnd-notification-header strong {
    font-size: 0.9rem;
}

.dnd-notification-close {
    background: none;
    border: none;
    color: var(--dnd-white);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.dnd-notification-close:hover {
    opacity: 1;
}

.dnd-notification-content {
    padding: var(--dnd-spacing-md);
}

.dnd-notification-info {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-xs);
    margin-bottom: var(--dnd-spacing-sm);
}

.dnd-notification-modifier {
    font-weight: 600;
    color: var(--dnd-gray-800);
}

.dnd-notification-date {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
}

.dnd-notification-steps-toggle {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    cursor: pointer;
    padding: var(--dnd-spacing-xs) 0;
    color: var(--dnd-primary);
    font-size: 0.9rem;
    user-select: none;
}

.dnd-notification-steps-toggle:hover {
    text-decoration: underline;
}

.dnd-notification-caret {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.dnd-notification-steps-list {
    padding: var(--dnd-spacing-sm);
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-sm);
    margin-top: var(--dnd-spacing-xs);
}

.dnd-notification-steps-list ul {
    margin: 0;
    padding-left: var(--dnd-spacing-md);
    list-style-type: disc;
}

.dnd-notification-steps-list li {
    font-size: 0.85rem;
    color: var(--dnd-gray-700);
    padding: 2px 0;
}

/* Indicateur de sections verrouillées dans la barre de progression */
.dnd-step.dnd-player-locked {
    position: relative;
}

.dnd-step.dnd-player-locked .dnd-step-number {
    background: var(--dnd-gray-400);
}

.dnd-step.dnd-player-locked::after {
    content: "✓";
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.7rem;
    background: var(--dnd-success);
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Message de transfert réussi */
.dnd-transfer-success {
    background: linear-gradient(135deg, var(--dnd-success), #059669);
    color: white;
    padding: var(--dnd-spacing-lg);
    margin: var(--dnd-spacing-lg) 0;
    border-radius: var(--dnd-radius-lg);
    text-align: center;
    box-shadow: var(--dnd-shadow-lg);
    animation: dnd-fade-in 0.5s ease;
}

.dnd-transfer-success h3 {
    margin: 0 0 var(--dnd-spacing-sm) 0;
    font-size: 1.3rem;
}

.dnd-transfer-success p {
    margin: 0;
    opacity: 0.9;
}

@keyframes dnd-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media print {
    .dnd-creator {
        max-width: none;
        padding: 0;
    }

    .dnd-header,
    .dnd-progress-bar,
    .dnd-footer,
    .dnd-header-actions,
    .dnd-final-actions,
    .dnd-dm-bar,
    .dnd-dm-panel {
        display: none !important;
    }

    .dnd-main {
        box-shadow: none;
        border: none;
    }

    .dnd-character-sheet {
        border: 1px solid #000;
    }
}

/* =====================================================================
   SYSTEME DE PARTAGE v2.0
   ===================================================================== */

/* Onglets de navigation */
.dnd-share-tabs {
    display: flex;
    gap: var(--dnd-spacing-sm);
    border-bottom: 2px solid var(--dnd-gray-200);
    margin-bottom: var(--dnd-spacing-lg);
    padding-bottom: var(--dnd-spacing-sm);
}

.dnd-share-tab {
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    background: none;
    border: none;
    border-radius: var(--dnd-radius-md) var(--dnd-radius-md) 0 0;
    cursor: pointer;
    font-family: var(--dnd-font-heading);
    font-size: 0.95rem;
    color: var(--dnd-gray-600);
    transition: all var(--dnd-transition-fast);
    position: relative;
}

.dnd-share-tab:hover {
    color: var(--dnd-primary);
    background: var(--dnd-primary-light);
}

.dnd-share-tab.active {
    color: var(--dnd-primary-dark);
    background: var(--dnd-primary-light);
}

.dnd-share-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dnd-primary);
    border-radius: var(--dnd-radius-sm) var(--dnd-radius-sm) 0 0;
}

/* Panneaux de contenu */
.dnd-share-panel {
    display: none;
}

.dnd-share-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Formulaire d'ajout */
.dnd-share-add-form {
    background: var(--dnd-gray-50);
    padding: var(--dnd-spacing-lg);
    border-radius: var(--dnd-radius-lg);
    margin-bottom: var(--dnd-spacing-lg);
    border: 1px solid var(--dnd-gray-200);
}

.dnd-share-add-form h4 {
    margin: 0 0 var(--dnd-spacing-xs) 0;
    color: var(--dnd-gray-800);
    font-family: var(--dnd-font-heading);
}

.dnd-share-help {
    color: var(--dnd-gray-600);
    font-size: 0.9rem;
    margin: 0 0 var(--dnd-spacing-md) 0;
}

.dnd-share-help-sm {
    color: var(--dnd-gray-500);
    font-size: 0.8rem;
    margin: 0 0 var(--dnd-spacing-sm) 0;
}

.dnd-share-form-row {
    display: flex;
    gap: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-share-form-row .dnd-input {
    flex: 1;
}

.dnd-share-form-row .dnd-select {
    min-width: 220px;
}

/* Options avancees */
.dnd-share-advanced {
    margin-top: var(--dnd-spacing-md);
    padding-top: var(--dnd-spacing-md);
    border-top: 1px dashed var(--dnd-gray-300);
}

.dnd-share-sections-config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dnd-spacing-lg);
}

.dnd-share-section-column h5 {
    margin: 0 0 var(--dnd-spacing-xs) 0;
    color: var(--dnd-gray-700);
    font-size: 0.95rem;
}

.dnd-share-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--dnd-spacing-xs);
}

.dnd-share-checkboxes label {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    font-size: 0.9rem;
    color: var(--dnd-gray-700);
    cursor: pointer;
}

.dnd-share-checkboxes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--dnd-primary);
}

/* Status message */
.dnd-share-status {
    margin-top: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    font-size: 0.9rem;
    display: none;
}

.dnd-share-status.success {
    display: block;
    background: var(--dnd-success-light);
    color: var(--dnd-success-dark);
    border: 1px solid var(--dnd-success);
}

.dnd-share-status.error {
    display: block;
    background: var(--dnd-danger-light);
    color: var(--dnd-danger-dark);
    border: 1px solid var(--dnd-danger);
}

/* Liste des partages */
.dnd-share-list {
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-share-list h4 {
    margin: 0 0 var(--dnd-spacing-sm) 0;
    color: var(--dnd-gray-700);
    font-family: var(--dnd-font-heading);
    font-size: 1rem;
}

.dnd-share-list-container {
    border: 1px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    max-height: 300px;
    overflow-y: auto;
}

.dnd-share-loading,
.dnd-share-empty {
    padding: var(--dnd-spacing-lg);
    text-align: center;
    color: var(--dnd-gray-500);
    font-style: italic;
}

/* Item de partage */
.dnd-share-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dnd-spacing-md);
    border-bottom: 1px solid var(--dnd-gray-100);
    transition: background var(--dnd-transition-fast);
}

.dnd-share-item:last-child {
    border-bottom: none;
}

.dnd-share-item:hover {
    background: var(--dnd-gray-50);
}

.dnd-share-item-info {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    flex: 1;
}

.dnd-share-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dnd-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--dnd-primary-dark);
    font-size: 1rem;
}

.dnd-share-item-details {
    flex: 1;
}

.dnd-share-item-name {
    font-weight: 600;
    color: var(--dnd-gray-800);
    margin-bottom: 2px;
}

.dnd-share-item-email {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
}

.dnd-share-item-actions {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
}

.dnd-share-item-role {
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Badges de role */
.dnd-share-role-badge {
    padding: var(--dnd-spacing-xs) var(--dnd-spacing-sm);
    border-radius: var(--dnd-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.dnd-role-creator {
    background: linear-gradient(135deg, #ffd700, #ffb347);
    color: #7c5a00;
}

.dnd-role-guardian {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.dnd-role-scribe {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: white;
}

.dnd-role-observer {
    background: var(--dnd-gray-200);
    color: var(--dnd-gray-700);
}

/* Bouton de suppression */
.dnd-share-item-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--dnd-gray-100);
    color: var(--dnd-gray-500);
    cursor: pointer;
    transition: all var(--dnd-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.dnd-share-item-remove:hover {
    background: var(--dnd-danger-light);
    color: var(--dnd-danger);
}

/* Liens publics */
.dnd-share-public-info {
    background: var(--dnd-gray-50);
    padding: var(--dnd-spacing-lg);
    border-radius: var(--dnd-radius-lg);
    margin-bottom: var(--dnd-spacing-lg);
    text-align: center;
}

.dnd-share-public-info h4 {
    margin: 0 0 var(--dnd-spacing-xs) 0;
}

.dnd-share-link-item {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
    padding: var(--dnd-spacing-md);
    border-bottom: 1px solid var(--dnd-gray-100);
}

.dnd-share-link-item:last-child {
    border-bottom: none;
}

.dnd-share-link-url {
    flex: 1;
    padding: var(--dnd-spacing-sm);
    background: var(--dnd-gray-100);
    border-radius: var(--dnd-radius-sm);
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--dnd-gray-700);
    word-break: break-all;
}

.dnd-share-link-info {
    font-size: 0.8rem;
    color: var(--dnd-gray-500);
}

.dnd-share-link-active {
    color: var(--dnd-success);
}

.dnd-share-link-inactive {
    color: var(--dnd-danger);
    text-decoration: line-through;
}

/* Legende des roles */
.dnd-share-roles-legend {
    margin-top: var(--dnd-spacing-lg);
    padding-top: var(--dnd-spacing-lg);
    border-top: 1px solid var(--dnd-gray-200);
}

.dnd-share-roles-legend h5 {
    margin: 0 0 var(--dnd-spacing-sm) 0;
    color: var(--dnd-gray-600);
    font-size: 0.9rem;
}

.dnd-share-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--dnd-spacing-sm);
}

.dnd-share-role-item {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    font-size: 0.85rem;
    color: var(--dnd-gray-600);
}

/* Partages recus */
.dnd-share-received-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dnd-spacing-md);
    border-bottom: 1px solid var(--dnd-gray-100);
    cursor: pointer;
    transition: background var(--dnd-transition-fast);
}

.dnd-share-received-item:hover {
    background: var(--dnd-primary-light);
}

.dnd-share-received-item.dnd-clickable-card {
    border-left: 3px solid var(--dnd-primary);
}

.dnd-share-received-item.dnd-clickable-card:hover {
    border-left-color: var(--dnd-primary-dark);
}

.dnd-share-click-hint {
    display: inline-block;
    background: linear-gradient(135deg, var(--dnd-primary), var(--dnd-primary-dark));
    color: white;
    padding: 4px 10px;
    border-radius: var(--dnd-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    margin-right: var(--dnd-spacing-sm);
    animation: pulseHint 2s ease-in-out infinite;
}

@keyframes pulseHint {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.dnd-share-received-item:hover .dnd-share-click-hint {
    animation: none;
    background: linear-gradient(135deg, var(--dnd-primary-dark), #5b21b6);
}

.dnd-share-received-item:last-child {
    border-bottom: none;
}

.dnd-share-received-info {
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-share-received-info h4 {
    margin: 0 0 var(--dnd-spacing-xs) 0;
}

.dnd-share-received-name {
    font-weight: 600;
    color: var(--dnd-gray-800);
}

.dnd-share-received-owner {
    font-size: 0.85rem;
    color: var(--dnd-gray-500);
}

/* Invitations */
.dnd-share-pending,
.dnd-share-my-invitations {
    margin-top: var(--dnd-spacing-lg);
}

.dnd-share-invitation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--dnd-spacing-md);
    border-bottom: 1px solid var(--dnd-gray-100);
    background: var(--dnd-warning-light);
}

.dnd-share-invitation-item:last-child {
    border-bottom: none;
}

.dnd-share-invitation-actions {
    display: flex;
    gap: var(--dnd-spacing-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .dnd-share-tabs {
        flex-wrap: wrap;
    }

    .dnd-share-tab {
        flex: 1;
        text-align: center;
        font-size: 0.85rem;
        padding: var(--dnd-spacing-sm);
    }

    .dnd-share-form-row {
        flex-direction: column;
    }

    .dnd-share-form-row .dnd-select {
        min-width: 100%;
    }

    .dnd-share-sections-config {
        grid-template-columns: 1fr;
    }

    .dnd-share-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dnd-spacing-sm);
    }

    .dnd-share-item-actions {
        width: 100%;
        justify-content: space-between;
    }

    .dnd-share-roles-grid {
        grid-template-columns: 1fr;
    }
}

/* Badge de notification */
.dnd-badge-notification {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--dnd-danger);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    animation: badge-pulse 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

#dnd-sharing-dashboard {
    position: relative;
}

/* Sections du tableau de bord */
.dnd-dashboard-section {
    margin-bottom: var(--dnd-spacing-xl);
    padding-bottom: var(--dnd-spacing-lg);
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-dashboard-section:last-of-type {
    border-bottom: none;
}

.dnd-dashboard-section h4 {
    margin: 0 0 var(--dnd-spacing-xs) 0;
    color: var(--dnd-gray-800);
    font-family: var(--dnd-font-heading);
}

.dnd-dashboard-section .dnd-share-help {
    margin-bottom: var(--dnd-spacing-md);
}

/* ==========================================================================
   19. FEEDBACK (BUGS/SUGGESTIONS)
   ========================================================================== */

.dnd-feedback-intro {
    text-align: center;
    margin-bottom: var(--dnd-spacing-lg);
    padding: var(--dnd-spacing-md);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-radius: var(--dnd-radius-md);
}

.dnd-feedback-intro p {
    margin: 0 0 var(--dnd-spacing-xs) 0;
    color: var(--dnd-gray-700);
}

.dnd-feedback-subtitle {
    font-size: 0.9rem;
    color: var(--dnd-gray-500) !important;
}

/* Champ anti-spam hors écran : il reste dans le DOM, mais ne perturbe ni le
   parcours clavier ni les technologies d'assistance. */
.dnd-feedback-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
.dnd-feedback-form .dnd-form-group {
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-feedback-form label {
    display: block;
    margin-bottom: var(--dnd-spacing-xs);
    font-weight: 600;
    color: var(--dnd-gray-700);
}

.dnd-feedback-form label .required {
    color: var(--dnd-danger);
}

.dnd-feedback-type-selector {
    display: flex;
    gap: var(--dnd-spacing-md);
    flex-wrap: wrap;
}

.dnd-feedback-type-option {
    flex: 1;
    min-width: 150px;
    cursor: pointer;
}

.dnd-feedback-type-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dnd-feedback-type-label {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
    padding: var(--dnd-spacing-md);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    transition: all var(--dnd-transition-fast);
    background: var(--dnd-white);
}

.dnd-feedback-type-option input:checked + .dnd-feedback-type-label {
    border-color: var(--dnd-success);
    background: rgba(16, 185, 129, 0.1);
}

.dnd-feedback-type-option input:focus-visible + .dnd-feedback-type-label {
    outline: 3px solid var(--dnd-primary);
    outline-offset: 3px;
}

.dnd-feedback-type-icon {
    font-size: 1.5rem;
}

.dnd-feedback-form textarea {
    width: 100%;
    padding: var(--dnd-spacing-sm);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    min-height: 120px;
    transition: border-color var(--dnd-transition-fast);
}

.dnd-feedback-form textarea:focus {
    outline: none;
    border-color: var(--dnd-primary);
}

.dnd-feedback-form input[type="email"] {
    width: 100%;
    padding: var(--dnd-spacing-sm);
    border: 2px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    font-size: 1rem;
    transition: border-color var(--dnd-transition-fast);
}

.dnd-feedback-form input[type="email"]:focus {
    outline: none;
    border-color: var(--dnd-primary);
}

.dnd-feedback-status {
    padding: var(--dnd-spacing-sm) var(--dnd-spacing-md);
    border-radius: var(--dnd-radius-md);
    margin-bottom: var(--dnd-spacing-md);
    text-align: center;
}

.dnd-feedback-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid #059669;
}

.dnd-feedback-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--dnd-danger);
    border: 1px solid var(--dnd-danger);
}

/* Override cursor for feedback form (not affected by read-only mode) */
.dnd-feedback-form textarea,
.dnd-feedback-form input {
    cursor: text !important;
}

.dnd-form-actions {
    text-align: center;
    margin-top: var(--dnd-spacing-lg);
}

/* ==========================================================================
   BONUS INFO BOX (Étape caractéristiques)
   ========================================================================== */

.dnd-bonus-info {
    background: linear-gradient(135deg, #f5f3ff 0%, #e0e7ff 100%);
    border: 2px solid var(--dnd-primary-light);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-bonus-info-content {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-sm);
}

.dnd-bonus-info-icon {
    font-size: 1.5rem;
}

.dnd-bonus-info-text {
    font-size: 0.95rem;
    color: var(--dnd-gray-700);
}

/* ==========================================================================
   ROLL EXPLANATION (Explication lancer de dés)
   ========================================================================== */

.dnd-roll-explanation {
    background: var(--dnd-gray-50);
    border: 1px solid var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-roll-explanation p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dnd-gray-600);
    line-height: 1.5;
}

/* ==========================================================================
   SPELL ATTACK ROW (Sorts dans tableau d'attaques)
   ========================================================================== */

.dnd-spell-attack {
    background: rgba(124, 58, 237, 0.05);
}

.dnd-spell-attack td {
    color: var(--dnd-primary);
}

/* ==========================================================================
   PROFICIENCY BADGES (Badges de maîtrise d'équipement)
   ========================================================================== */

/* Badge de maîtrise dans le shop */
.dnd-shop-item-prof {
    margin-top: 4px;
}

.dnd-prof-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dnd-prof-badge.dnd-prof-yes {
    background-color: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.dnd-prof-badge.dnd-prof-no {
    background-color: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Badge de maîtrise dans l'inventaire */
.dnd-inv-prof {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 6px;
}

.dnd-inv-prof.dnd-prof-yes {
    background-color: rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

.dnd-inv-prof.dnd-prof-no {
    background-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

/* Style des items d'inventaire amélioré */
.dnd-inventory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-inventory-item:last-child {
    border-bottom: none;
}

.dnd-inv-name {
    display: flex;
    align-items: center;
}

.dnd-inv-remove {
    background: none;
    border: none;
    color: var(--dnd-gray-400);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.dnd-inv-remove:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Indicateur de maîtrise dans le tableau d'attaques */
.dnd-attack-prof {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: bold;
    margin-right: 4px;
    vertical-align: middle;
}

.dnd-attack-prof.dnd-prof-yes {
    background-color: rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

.dnd-attack-prof.dnd-prof-no {
    background-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

/* Ligne d'attaque sans maîtrise */
.dnd-no-proficiency {
    background-color: rgba(239, 68, 68, 0.05);
}

.dnd-no-proficiency td {
    color: var(--dnd-gray-500);
}

/* ==========================================================================
   MODALE D'IMPRESSION SUR FICHE VIERGE
   ========================================================================== */

.dnd-modal-print .dnd-modal-fullscreen {
    width: 98vw;
    max-width: 1800px;
    height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

.dnd-print-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.dnd-print-actions-header {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-md);
}

.dnd-print-modal-body {
    flex: 1;
    overflow: hidden;
    padding: var(--dnd-spacing-md) !important;
}

.dnd-print-layout {
    display: flex;
    height: 100%;
    gap: var(--dnd-spacing-lg);
}

/* Panneau de contrôle (gauche) */
.dnd-print-controls {
    width: 280px;
    flex-shrink: 0;
    background: var(--dnd-gray-50);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
    overflow-y: auto;
    border: 1px solid var(--dnd-gray-200);
}

.dnd-print-controls-header h4 {
    margin: 0 0 var(--dnd-spacing-xs);
    font-size: 1rem;
    color: var(--dnd-secondary);
}

.dnd-print-controls-help {
    font-size: 0.8rem;
    color: var(--dnd-gray-500);
    margin-bottom: var(--dnd-spacing-md);
}

.dnd-print-control-group {
    margin-bottom: var(--dnd-spacing-md);
    padding-bottom: var(--dnd-spacing-md);
    border-bottom: 1px solid var(--dnd-gray-200);
}

.dnd-print-control-group:last-of-type {
    border-bottom: none;
}

.dnd-print-control-group h5 {
    font-size: 0.85rem;
    color: var(--dnd-primary);
    margin: 0 0 var(--dnd-spacing-sm);
    font-weight: 600;
}

.dnd-print-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dnd-print-checkboxes label {
    display: flex;
    align-items: center;
    gap: var(--dnd-spacing-xs);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: var(--dnd-radius-sm);
    transition: background-color 0.15s;
}

.dnd-print-checkboxes label:hover {
    background-color: var(--dnd-gray-100);
}

.dnd-print-checkboxes input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--dnd-primary);
}

.dnd-print-quick-actions {
    display: flex;
    gap: var(--dnd-spacing-sm);
    margin-top: var(--dnd-spacing-md);
}

.dnd-print-quick-actions .dnd-btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 6px 8px;
}

/* Zone d'aperçu (droite) */
.dnd-print-preview-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dnd-print-page-nav {
    display: flex;
    gap: var(--dnd-spacing-sm);
    margin-bottom: var(--dnd-spacing-md);
    flex-shrink: 0;
}

.dnd-print-page-nav .dnd-btn {
    flex: 1;
    max-width: 150px;
}

.dnd-print-page-nav .dnd-btn.active {
    background-color: var(--dnd-primary);
    color: white;
    border-color: var(--dnd-primary);
}

.dnd-print-preview-container {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--dnd-gray-200);
    border-radius: var(--dnd-radius-md);
    padding: var(--dnd-spacing-md);
}

/* Pages d'impression */
.dnd-print-page {
    position: relative;
    background: white;
    box-shadow: var(--dnd-shadow-lg);
    /* Dimensions A4 approximatives en ratio 1:1.414 */
    width: 595px;
    height: 842px;
    flex-shrink: 0;
}

.dnd-print-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.dnd-print-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Éléments de données positionnés sur la fiche */
.dnd-print-field {
    position: absolute;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #000;
    overflow: hidden;
    word-wrap: break-word;
    line-height: 1.2;
    pointer-events: none;
}

/* Tailles de police adaptatives */
.dnd-print-field.dnd-pf-xs {
    font-size: 7px;
}

.dnd-print-field.dnd-pf-sm {
    font-size: 9px;
}

.dnd-print-field.dnd-pf-md {
    font-size: 11px;
}

.dnd-print-field.dnd-pf-lg {
    font-size: 14px;
}

.dnd-print-field.dnd-pf-xl {
    font-size: 18px;
}

.dnd-print-field.dnd-pf-2xl {
    font-size: 24px;
}

/* Alignements */
.dnd-print-field.dnd-pf-center {
    text-align: center;
}

.dnd-print-field.dnd-pf-right {
    text-align: right;
}

/* Styles spéciaux */
.dnd-print-field.dnd-pf-bold {
    font-weight: bold;
}

.dnd-print-field.dnd-pf-multiline {
    white-space: pre-wrap;
}

/* Cercles pour les maîtrises */
.dnd-print-proficiency-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #000;
}

.dnd-print-proficiency-dot.dnd-ppd-empty {
    background-color: transparent;
    border: 1px solid #000;
}

/* Cases cochables pour jets de sauvegarde */
.dnd-print-checkbox {
    position: absolute;
    width: 8px;
    height: 8px;
}

.dnd-print-checkbox.checked::after {
    content: '●';
    font-size: 10px;
    line-height: 8px;
}

/* Responsive pour la modale d'impression */
@media (max-width: 1200px) {
    .dnd-print-layout {
        flex-direction: column;
    }

    .dnd-print-controls {
        width: 100%;
        max-height: 200px;
    }

    .dnd-print-control-group {
        display: inline-block;
        width: 48%;
        vertical-align: top;
        margin-right: 2%;
    }

    .dnd-print-page {
        width: 100%;
        max-width: 595px;
        height: auto;
        aspect-ratio: 595 / 842;
    }
}

@media (max-width: 768px) {
    .dnd-modal-print .dnd-modal-fullscreen {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .dnd-print-controls {
        max-height: 150px;
    }

    .dnd-print-control-group {
        width: 100%;
    }

    .dnd-print-page-nav {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   STYLES D'IMPRESSION (pour window.print())
   ========================================================================== */

@media print {
    /* Cacher tout sauf la zone d'impression */
    body * {
        visibility: hidden;
    }

    #character-sheet,
    #character-sheet * {
        visibility: visible;
    }

    #character-sheet {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: white !important;
        padding: 0 !important;
    }

    .dnd-print-page {
        page-break-after: always;
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
    }

    .dnd-print-page:last-child {
        page-break-after: avoid;
    }

    /* Afficher toutes les pages lors de l'impression */
    .dnd-print-page {
        display: block !important;
    }

    /* Cacher les contrôles */
    .dnd-print-controls,
    .dnd-print-page-nav,
    .dnd-print-header,
    .dnd-modal-close,
    .dnd-btn-print-dialog {
        display: none !important;
    }

    /* Assurer les bonnes proportions */
    @page {
        size: A4;
        margin: 0;
    }
}

/* ==========================================================================
   SECTIONS MASQUÉES DANS LE RÉCAPITULATIF
   ========================================================================== */

/* Éléments masqués dans le récap */
.dnd-hidden-in-summary {
    display: none !important;
}

/* Notice pour les sections masquées */
.dnd-hidden-summary-notice {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #4a90a4;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e0e0e0;
    font-size: 14px;
}

.dnd-hidden-summary-notice .dnd-notice-icon {
    font-size: 18px;
}

/* Section masquée par le MJ (dans les étapes) */
.dnd-hidden-section-message {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px;
    border: 1px dashed #4a90a4;
}

.dnd-hidden-section-message .dnd-hidden-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.dnd-hidden-section-message h3 {
    color: #e0e0e0;
    margin-bottom: 8px;
}

.dnd-hidden-section-message p {
    color: #b0b0b0;
    margin: 0;
}

.dnd-hidden-section-message .dnd-hidden-hint {
    font-style: italic;
    margin-top: 12px;
    font-size: 13px;
}

/* ==========================================================================
   AMÉLIORATIONS PARTAGE v1.8.7
   ========================================================================== */

/* Boutons d'invitation (accepter/refuser) */
.dnd-share-invitation-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mes partages actifs - item cliquable */
.dnd-share-my-item.dnd-clickable-card {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dnd-share-my-item.dnd-clickable-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--dnd-primary);
}

.dnd-share-my-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.dnd-share-my-recipients {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 12px;
}

.dnd-share-recipient-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.dnd-share-recipient-name {
    flex: 1;
}

/* Boutons d'action partage */
.dnd-btn-danger {
    background: var(--dnd-danger);
    color: white;
    border: none;
}

.dnd-btn-danger:hover {
    background: #c62828;
}

/* Amélioration des badges de rôle */
.dnd-share-role-badge-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
}

.dnd-share-role-badge-small.dnd-role-dm {
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

.dnd-share-role-badge-small.dnd-role-player,
.dnd-share-role-badge-small.dnd-role-player_edit {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}


/* ==========================================================================
   RANDOM FULL CHARACTER BUTTON
   ========================================================================== */

.dnd-random-full-character {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 100%);
    border: 2px dashed var(--dnd-warning);
    border-radius: var(--dnd-radius-lg);
    padding: var(--dnd-spacing-lg);
    margin-bottom: var(--dnd-spacing-xl);
    text-align: center;
}

.dnd-random-full-character .dnd-btn-random {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: white;
    border: none;
    font-size: 1.1rem;
    padding: var(--dnd-spacing-md) var(--dnd-spacing-xl);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dnd-random-full-character .dnd-btn-random:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5);
}

.dnd-random-full-character .dnd-help-text {
    margin-top: var(--dnd-spacing-sm);
    margin-bottom: 0;
    color: var(--dnd-gray-600);
}

/* Mode cards with only 2 cards */
.dnd-mode-cards-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dnd-spacing-lg);
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .dnd-mode-cards-2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FIRST SAVE SHARING MODAL
   ========================================================================== */

.dnd-first-save-share-modal .dnd-modal-content {
    max-width: 500px;
}

.dnd-first-save-share-content {
    text-align: center;
    padding: var(--dnd-spacing-lg);
}

.dnd-first-save-share-content h4 {
    margin-bottom: var(--dnd-spacing-md);
    font-size: 1.2rem;
}

.dnd-first-save-share-content p {
    color: var(--dnd-gray-600);
    margin-bottom: var(--dnd-spacing-lg);
}

.dnd-first-save-share-buttons {
    display: flex;
    gap: var(--dnd-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Fix modal header cut-off */
.dnd-modal-large .dnd-modal-header {
    flex-shrink: 0;
}

.dnd-modal-large .dnd-modal-body {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

/* Restriction permission indicators */
.dnd-restriction-locked-by-other {
    opacity: 0.6;
    pointer-events: none;
}

.dnd-restriction-locked-by-other::after {
    content: " (défini par MJ)";
    font-size: 0.85em;
    color: var(--dnd-gray-500);
    font-style: italic;
}

.dnd-restrictions-row.dnd-locked-by-dm {
    background: rgba(33, 150, 243, 0.1);
    border-left: 3px solid var(--dnd-primary);
}

.dnd-restrictions-row.dnd-locked-by-dm input[type="radio"] {
    pointer-events: none;
    opacity: 0.5;
}

.dnd-dm-lock-indicator {
    font-size: 0.75rem;
    color: var(--dnd-primary);
    margin-left: 4px;
}