/* ============================================
   CSS FRACTIONS PARFAIT v2.0
   Affichage optimal des fractions en HTML et à l'impression
   ============================================ */

/* ============================================
   FRACTIONS ROBUSTES (écran + impression)
   ============================================ */

.fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 0.15em;
    line-height: 1;
    font-size: 1em;
    position: relative;
}

.fraction .numerator {
    padding: 0 0.2em;
    font-size: 0.85em;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.fraction .denominator {
    padding: 0 0.2em;
    font-size: 0.85em;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

/* Ligne de fraction robuste avec multiple fallbacks */
.fraction::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: currentColor;
    transform: translateY(-50%);
    z-index: 0;
}

/* Alternative pour navigateurs qui ne supportent pas ::after sur inline-flex */
.fraction .fraction-line {
    position: absolute;
    top: 50%;
    left: 0.2em;
    right: 0.2em;
    height: 1px;
    background-color: currentColor;
    transform: translateY(-50%);
    z-index: 0;
    display: none; /* Masqué par défaut, activé si besoin */
}

/* ============================================
   IMPRESSION PDF - OPTIMISATION MAXIMALE
   ============================================ */

@media print {
    /* Style spécifique pour impression */
    .fraction {
        display: inline-table !important;
        text-align: center;
        vertical-align: middle;
        margin: 0 0.2em !important;
        font-size: 1em !important;
        line-height: 1.2 !important;
        border-collapse: collapse;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* Supprimer le ::after pour impression */
    .fraction::after {
        display: none;
    }
    
    /* Utiliser une vraie bordure pour impression */
    .fraction .numerator {
        display: table-row !important;
        padding: 0 0.3em 0.1em 0.3em !important;
        border-bottom: 1.5px solid #000000 !important;
        font-size: 0.9em !important;
        line-height: 1.1 !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .fraction .denominator {
        display: table-row !important;
        padding: 0.1em 0.3em 0 0.3em !important;
        font-size: 0.9em !important;
        line-height: 1.1 !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Force les couleurs noires pour toutes les fractions */
    .fraction,
    .math-frac,
    .frac-simple {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }
    
    /* Style spécifique pour .math-frac à l'impression */
    .math-frac {
        display: inline-table !important;
        border-collapse: collapse;
        text-align: center;
        margin: 0 0.2em !important;
    }
    
    .math-frac .num {
        display: table-row !important;
        border-bottom: 1.5px solid #000000 !important;
        padding: 0 0.3em 0.1em 0.3em !important;
        color: #000000 !important;
        font-size: 0.9em !important;
        -webkit-print-color-adjust: exact !important;
    }
    
    .math-frac .den {
        display: table-row !important;
        padding: 0.1em 0.3em 0 0.3em !important;
        color: #000000 !important;
        font-size: 0.9em !important;
        -webkit-print-color-adjust: exact !important;
    }
}

/* ============================================
   SOLUTION ALTERNATIVE : SVG POUR LES FRACTIONS
   (Garantie d'affichage dans tous les PDF)
   ============================================ */

.fraction-svg {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.15em;
    font-size: 1em;
}

.fraction-svg svg {
    width: 2em;
    height: 1.5em;
    vertical-align: middle;
}

.fraction-svg .num-text,
.fraction-svg .den-text {
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    text-anchor: middle;
    dominant-baseline: central;
}

/* ============================================
   FALLBACK ULTIME : IMAGE BASE64
   ============================================ */

.fraction-image {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2em;
    height: 1.2em;
}

/* ============================================
   UTILITAIRES POUR IMPRESSION
   ============================================ */

.print-optimized {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

.no-break {
    white-space: nowrap;
    page-break-inside: avoid;
    break-inside: avoid;
}

.avoid-page-break {
    page-break-inside: avoid;
    break-inside: avoid;
}