/**
 * Les Caractères - Styles des variantes
 * Highlight des variantes et menu déroulant
 */

/* ========================================
   VARIANTES - STYLES DE BASE
   ======================================== */

.variant {
    display: inline;
    position: relative;
}

/* Par défaut, pas de highlight */
.variant-edition,
.variant-copy {
    transition: all 0.2s ease;
}

/* ========================================
   VARIANTES - HIGHLIGHT DANS PARAGRAPHE ACTIF
   ======================================== */

/* Variante entre éditions - bleu */
.paragraph.active .variant-edition {
    background: linear-gradient(to bottom, transparent 60%, rgba(74, 144, 226, 0.2) 60%);
    border-bottom: 1px solid rgba(74, 144, 226, 0.4);
    padding: 0 0.1rem;
}

.paragraph.active .variant-edition:hover {
    background: rgba(74, 144, 226, 0.25);
    cursor: help;
}

/* Variante entre exemplaires - orange */
.paragraph.active .variant-copy {
    background: linear-gradient(to bottom, transparent 60%, rgba(230, 126, 34, 0.2) 60%);
    border-bottom: 1px solid rgba(230, 126, 34, 0.4);
    padding: 0 0.1rem;
}

.paragraph.active .variant-copy:hover {
    background: rgba(230, 126, 34, 0.25);
    cursor: help;
}

/* ========================================
   MENU DÉROULANT DES VARIANTES
   ======================================== */

.variant-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.5rem;
    min-width: 200px;
    z-index: 1000;
    margin-top: 0.25rem;
}

.paragraph.active .variant:hover .variant-menu {
    display: block;
}

.variant-option {
    display: block;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.variant-option:last-child {
    border-bottom: none;
}

.variant-source {
    display: inline-block;
    color: #666;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    min-width: 80px;
}

.variant-text {
    color: #333;
}

.variant-text em {
    color: #999;
}