/**
 * PERSONNALY - Styles de texte pour personnalisation
 *
 * CHANGEMENT DE DIRECTION (2026-01):
 * - Le configurateur est INDICATIF, pas photoréaliste
 * - Aucun effet matière CSS (broderie, flex, flock, sublimation)
 * - Texte propre, lisible, position fidèle
 * - Le rendu matière réel passe par des photos dans un modal séparé
 */

/* ============================================
   BASE - Texte de personnalisation
   Style propre, lisible sur tous fonds
   ============================================ */
.preview-text,
.lightbox-text {
    /* Transitions fluides */
    transition: all 0.2s ease;

    /* Ombre légère pour lisibilité sur tous fonds */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 0 1px rgba(255, 255, 255, 0.5);

    /* Police nette et lisible */
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* État vide / placeholder */
.preview-text.empty {
    opacity: 0.5;
    font-style: italic;
}

/* État en drag */
.preview-text.dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.02);
}

/* ============================================
   INDICATEUR VISUEL DE TECHNIQUE
   Simple badge informatif
   ============================================ */
.technique-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(4px);
}

/* Affichage au hover */
.product-preview:hover .technique-indicator,
.lightbox-image-container:hover .technique-indicator {
    opacity: 1;
}

/* Couleurs par technique - simple différenciation visuelle */
.technique-indicator[data-technique="broderie"],
.technique-indicator.broderie {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.9), rgba(160, 82, 45, 0.9));
}

.technique-indicator[data-technique="flex"],
.technique-indicator.flex {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.9), rgba(255, 20, 147, 0.9));
}

.technique-indicator[data-technique="flock"],
.technique-indicator.flock {
    background: linear-gradient(135deg, rgba(147, 112, 219, 0.9), rgba(138, 43, 226, 0.9));
}

.technique-indicator[data-technique="sublimation"],
.technique-indicator.sublimation {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.9), rgba(30, 144, 255, 0.9));
}

/* ============================================
   COMPATIBILITÉ - Classes legacy
   Pour éviter les erreurs si ancien code utilise
   ces classes (elles n'ont plus d'effet visuel)
   ============================================ */
.technique-broderie,
.technique-Broderie,
.technique-flex,
.technique-flock,
.technique-sublimation {
    /* Pas d'effet spécial - rendu indicatif uniquement */
}