Modèle:Lettrine/styles.css

/* =====================================================
   LETTRINE - STYLES DE BASE
   ===================================================== */

.lettrine-conteneur {
    display: inline;
    line-height: 1;
}

.lettrine {
    float: left;
    font-size: 3.5em;
    line-height: 0.85em;
    margin: 0.05em 0.1em 0 0;
    font-weight: bold;
    font-family: "Crimson Text", "Sorts Mill Goudy", Georgia, serif;
}

.lettrine-texte {
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

/* =====================================================
   VARIANTES DE STYLE
   ===================================================== */

/* Style enluminé */
.lettrine-enluminee .lettrine {
    background: linear-gradient(135deg, 
        rgba(218, 165, 32, 0.2) 0%, 
        rgba(218, 165, 32, 0.05) 100%);
    padding: 0.1em 0.15em;
    border-radius: 4px;
}

/* Style avec bordure */
.lettrine-bordure .lettrine {
    padding: 0.05em 0.12em;
    border-radius: 3px;
}

/* Style avec ombre */
.lettrine-ombre .lettrine {
    padding: 0.05em 0.1em;
}

/* Style floral */
.lettrine-floral .lettrine {
    position: relative;
}

.lettrine-floral .lettrine::before {
    content: '❦';
    position: absolute;
    top: -0.3em;
    left: -0.3em;
    font-size: 0.4em;
    opacity: 0.3;
    color: inherit;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    .lettrine {
        font-size: 2.8em;
        margin: 0.05em 0.08em 0 0;
    }
}

@media (max-width: 480px) {
    .lettrine {
        font-size: 2.2em;
        margin: 0.03em 0.06em 0 0;
    }
    
    .lettrine-texte {
        letter-spacing: 0.03em;
    }
}

/* =====================================================
   IMPRESSION
   ===================================================== */

@media print {
    .lettrine {
        font-size: 3em;
    }
    
    .lettrine-enluminee .lettrine {
        background: none !important;
        text-shadow: none !important;
    }
}