/**
 * CSS Frontend pour module contact-protection Sisme
 * 
 * @file modules/contactprotection/assets/css/frontend.css
 */

/* === CONTACTS PROTÉGÉS === */
.sisme-contact-protected {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    text-decoration: underline;
    color: #0073aa;
    transition: color 0.2s ease;
    display: inline;
    background: none;
    border: none;
    font: inherit;
}

.sisme-contact-protected:hover {
    color: #005177;
}

/* === CONTACTS RÉVÉLÉS === */
.sisme-revealed {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* === LIENS DE CONTACTS RÉVÉLÉS === */
.sisme-contact-link {
    color: #0073aa !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    display: inline !important;
    background: none !important;
    border: none !important;
    font: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sisme-contact-link:hover {
    color: #005177 !important;
    text-decoration: none !important;
}

.sisme-contact-link:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.sisme-contact-link:active {
    color: #0073aa !important;
}

.sisme-contact-link:visited {
    color: #0073aa !important;
}

/* === MESSAGES D'ERREUR === */
.sisme-contact-error {
    color: #dc3232;
    font-style: italic;
    cursor: not-allowed;
}

/* === ANIMATIONS === */
.sisme-contact-protected,
.sisme-contact-link {
    transition: opacity 0.2s ease, color 0.2s ease;
}

.sisme-contact-protected.sisme-loading {
    opacity: 0.6;
    cursor: wait;
}

/* === ACCESSIBILITÉ === */
.sisme-contact-protected:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

/* === PROTECTION CONTRE L'INSPECTION === */
.sisme-contact-protected {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .sisme-contact-protected,
    .sisme-contact-link {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    }
}

/* === PRINT === */
@media print {
    .sisme-contact-protected {
        color: black !important;
        text-decoration: none !important;
    }
    
    .sisme-contact-protected::after {
        content: " [Contact protégé]";
        font-size: 0.8em;
        color: #666;
    }
}