/**
 * MyTOC Plugin - Styles Frontend
 * Utilise des divs pour éviter les conflits avec les thèmes
 */

/* Container principal */
.mys-container {
    display: block !important;
    margin: 1.5rem 0 2rem 0 !important;
    padding: 1.25rem 1.5rem !important;
    font-family: inherit;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Header avec icône et titre */
.mys-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 0 0.75rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.mys-icon {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.mys-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    border: none !important;
    background: none !important;
}

/* Liste */
.mys-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Item */
.mys-item {
    display: block !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    line-height: 1.5 !important;
    border: none !important;
    background: none !important;
}

/* Puce */
.mys-bullet {
    display: inline !important;
    margin-right: 0.5rem !important;
    opacity: 0.8 !important;
}

/* Texte */
.mys-text {
    display: inline !important;
}

/* Liens */
.mys-link {
    display: inline !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    transition: opacity 0.2s ease !important;
}

.mys-link:hover {
    opacity: 0.75 !important;
    text-decoration: underline !important;
}

/* Mode Action - Numéroté */
.mys-step-number {
    display: inline !important;
    font-weight: 600 !important;
    margin-right: 0.3rem !important;
    opacity: 0.9 !important;
}

/* Mode Action - Checklist */
.mys-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    cursor: pointer !important;
    user-select: none !important;
}

.mys-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
}

.mys-checkmark {
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    border: 2px solid currentColor !important;
    border-radius: 3px !important;
    opacity: 0.6 !important;
    transition: all 0.2s ease !important;
    margin-top: 0.2rem !important;
    background: transparent !important;
    position: relative !important;
}

.mys-checkbox:checked + .mys-checkmark {
    opacity: 1 !important;
    background-color: currentColor !important;
}

.mys-checkbox:checked + .mys-checkmark::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 0px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.mys-checkbox:checked ~ .mys-text {
    text-decoration: line-through !important;
    opacity: 0.6 !important;
}

.mys-checkbox-label:hover .mys-checkmark {
    opacity: 0.85 !important;
}

/* Animation au scroll */
@keyframes mys-highlight {
    0% { background-color: rgba(255, 220, 100, 0.4); }
    100% { background-color: transparent; }
}

.mys-target-highlight {
    animation: mys-highlight 2s ease-out !important;
}

/* Responsive */
@media (max-width: 768px) {
    .mys-container {
        margin: 1rem 0 1.5rem 0 !important;
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .mys-header {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .mys-title {
        font-size: 1rem !important;
    }
    
    .mys-item {
        padding: 0.4rem 0 !important;
    }
}

/* Print */
@media print {
    .mys-container {
        border: 1px solid #ccc !important;
        page-break-inside: avoid !important;
    }
    
    .mys-link {
        color: inherit !important;
        text-decoration: none !important;
    }
}