/**
 * MaLocaTeam Shortcodes Styles
 * Optimisé conversion B2B - Standard des leaders (Stripe, HubSpot, Intercom)
 * Compatible avec le CSS blog existant
 * Version: 1.0
 */

/* ========================================
   VARIABLES COULEURS MLT
   ======================================== */
:root {
    --mlt-bleu: #6470BB;
    --mlt-bleu-hover: #4a5899;
    --mlt-marron: #877356;
    --mlt-jaune: #FBC13C;
    --mlt-vert: #48BB78;
    
    --mlt-noir: #000000;
    --mlt-gris-fonce: #2C3E50;
    --mlt-gris-moyen: #718096;
    --mlt-gris-clair: #e2e8f0;
    
    --mlt-bg-bleu: #EBF8FF;
    --mlt-bg-marron: #F5F3F0;
    --mlt-bg-jaune: #FFF9E6;
    --mlt-bg-vert: #F0FFF4;
}

/* ========================================
   1. CTA BLOCK - Layout horizontal avec emoji à gauche (Style Elementor)
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

.mlt-cta-block {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    position: relative !important;
    z-index: 1 !important;
    background: #F4F1EC !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 28px !important;
    margin: 48px 0 !important;
    max-width: 800px !important;
    min-height: 200px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    font-family: 'Montserrat', sans-serif !important;
}

.mlt-cta-block:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    border-color: #6470BB !important;
    transform: translateY(-2px) !important;
}

.mlt-cta-icone-wrapper {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 70px !important;
    height: 70px !important;
}

.mlt-cta-icone {
    font-size: 56px !important;
    line-height: 1 !important;
}

.mlt-cta-content {
    flex: 1 !important;
    max-width: 100% !important;
}

.mlt-cta-titre-text {
    margin: 0 0 6px 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #000 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.mlt-cta-texte {
    margin: 0 0 10px 0 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #2C3E50 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.mlt-cta-texte p {
    margin: 0 0 4px 0 !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.mlt-cta-texte p:last-child {
    margin-bottom: 0 !important;
}

/* Spécificité maximale pour battre les styles Elementor ultra-spécifiques */
.mlt-cta-block .mlt-cta-content a.mlt-cta-bouton.mlt-cta-bouton.mlt-cta-bouton[href],
.mlt-cta-block .mlt-cta-content a.mlt-cta-bouton.mlt-cta-bouton.mlt-cta-bouton[href]:link,
.mlt-cta-block .mlt-cta-content a.mlt-cta-bouton.mlt-cta-bouton.mlt-cta-bouton[href]:visited,
.mlt-cta-block .mlt-cta-content a.mlt-cta-bouton.mlt-cta-bouton.mlt-cta-bouton[href]:active,
.mlt-cta-block .mlt-cta-content a.mlt-cta-bouton.mlt-cta-bouton.mlt-cta-bouton[href]:focus {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #6470BB !important;
    background-color: #6470BB !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-thickness: 0px !important;
    text-underline-offset: 0px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: all 0.2s ease !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mlt-cta-block .mlt-cta-content a.mlt-cta-bouton.mlt-cta-bouton.mlt-cta-bouton[href]:hover {
    background: #4a5899 !important;
    background-color: #4a5899 !important;
    color: white !important;
    transform: translateX(4px) !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0px !important;
}

.mlt-cta-bouton-icone {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Variantes couleur CTA */
.mlt-cta-marron {
    background: var(--mlt-bg-marron) !important;
    border-left-color: var(--mlt-marron) !important;
}

.mlt-cta-marron .mlt-cta-bouton {
    background: var(--mlt-marron) !important;
    box-shadow: 0 4px 12px rgba(135, 115, 86, 0.25) !important;
}

.mlt-cta-vert {
    background: var(--mlt-bg-vert) !important;
    border-left-color: var(--mlt-vert) !important;
}

.mlt-cta-vert .mlt-cta-bouton {
    background: var(--mlt-vert) !important;
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.25) !important;
}

/* Style compact */
.mlt-cta-compact {
    padding: 28px 24px !important;
}

.mlt-cta-compact .mlt-cta-titre-text {
    font-size: 22px !important;
    margin-bottom: 12px !important;
}

.mlt-cta-compact .mlt-cta-texte {
    font-size: 16px !important;
    margin-bottom: 20px !important;
}

/* Style large */
.mlt-cta-large {
    padding: 48px 40px !important;
    text-align: center !important;
}

.mlt-cta-large .mlt-cta-titre-text {
    font-size: 32px !important;
}

.mlt-cta-large .mlt-cta-bouton {
    padding: 18px 40px !important;
    font-size: 18px !important;
}

/* ========================================
   2. INFO BOX - Encarts informatifs
   ======================================== */
.mlt-info-box {
    position: relative !important;
    background: white !important;
    border: 2px solid var(--mlt-gris-clair) !important;
    border-left: 4px solid var(--mlt-bleu) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin: 32px 0 !important;
}

.mlt-info-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.mlt-info-icone {
    font-size: 28px !important;
    line-height: 1 !important;
}

.mlt-info-titre {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--mlt-noir) !important;
}

.mlt-info-contenu {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--mlt-gris-fonce) !important;
}

.mlt-info-contenu p {
    margin-bottom: 12px !important;
}

.mlt-info-contenu p:last-child {
    margin-bottom: 0 !important;
}

/* Variantes info box */
.mlt-info-success {
    background: var(--mlt-bg-vert) !important;
    border-left-color: var(--mlt-vert) !important;
}

.mlt-info-warning {
    background: var(--mlt-bg-jaune) !important;
    border-left-color: var(--mlt-jaune) !important;
}

.mlt-info-tip {
    background: var(--mlt-bg-bleu) !important;
    border-left-color: var(--mlt-bleu) !important;
}

/* ========================================
   3. DOWNLOAD BOX - Téléchargement ressources
   ======================================== */
.mlt-download-box {
    position: relative !important;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
    border: 2px solid var(--mlt-gris-clair) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    margin: 40px 0 !important;
    transition: all 0.3s ease !important;
}

.mlt-download-box:hover {
    border-color: var(--mlt-bleu) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.mlt-download-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.mlt-download-icone {
    font-size: 36px !important;
    line-height: 1 !important;
}

.mlt-download-info {
    flex: 1 !important;
}

.mlt-download-titre {
    display: block !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--mlt-noir) !important;
    margin-bottom: 4px !important;
}

.mlt-download-meta {
    display: block !important;
    font-size: 14px !important;
    color: var(--mlt-gris-moyen) !important;
    font-weight: 500 !important;
}

.mlt-download-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--mlt-gris-fonce) !important;
    margin-bottom: 24px !important;
}

.mlt-download-description p {
    margin-bottom: 12px !important;
}

.mlt-download-description p:last-child {
    margin-bottom: 0 !important;
}

.mlt-download-bouton {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: white !important;
    color: var(--mlt-bleu) !important;
    padding: 14px 28px !important;
    border: 2px solid var(--mlt-bleu) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

.mlt-download-bouton:hover {
    background: var(--mlt-bleu) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
}

.mlt-download-arrow {
    transition: transform 0.2s ease !important;
}

.mlt-download-bouton:hover .mlt-download-arrow {
    transform: translateY(2px) !important;
}

/* ========================================
   4. LIEN ARTICLE - Lien interne stylisé
   ======================================== */
.mlt-lien-article {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: white !important;
    border: 2px solid var(--mlt-gris-clair) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 24px 0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.mlt-lien-article:hover {
    border-color: var(--mlt-bleu) !important;
    box-shadow: 0 4px 16px rgba(100, 112, 187, 0.15) !important;
    transform: translateX(4px) !important;
    text-decoration: none !important;
}

.mlt-lien-icone {
    font-size: 32px !important;
    line-height: 1 !important;
}

.mlt-lien-content {
    flex: 1 !important;
}

.mlt-lien-titre {
    display: block !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--mlt-bleu) !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}

.mlt-lien-description {
    display: block !important;
    font-size: 15px !important;
    color: var(--mlt-gris-moyen) !important;
    line-height: 1.5 !important;
}

.mlt-lien-arrow {
    font-size: 20px !important;
    color: var(--mlt-gris-moyen) !important;
    transition: all 0.2s ease !important;
}

.mlt-lien-article:hover .mlt-lien-arrow {
    color: var(--mlt-bleu) !important;
    transform: translateX(4px) !important;
}

/* ========================================
   5. CHECKLIST - Liste à cocher
   ======================================== */
.mlt-checklist {
    background: white !important;
    border: 2px solid var(--mlt-gris-clair) !important;
    border-radius: 8px !important;
    padding: 28px !important;
    margin: 32px 0 !important;
}

.mlt-checklist-titre {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--mlt-noir) !important;
    margin: 0 0 20px 0 !important;
}

.mlt-checklist-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mlt-checklist-item {
    display: flex !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--mlt-gris-clair) !important;
}

.mlt-checklist-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.mlt-checklist-check {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    background: var(--mlt-bleu) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.mlt-checklist-text {
    flex: 1 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--mlt-gris-fonce) !important;
    padding-top: 2px !important;
}

/* Variantes couleur checklist */
.mlt-checklist-marron .mlt-checklist-check {
    background: var(--mlt-marron) !important;
}

.mlt-checklist-vert .mlt-checklist-check {
    background: var(--mlt-vert) !important;
}

/* ========================================
   6. STATS BOX - Chiffres clés
   ======================================== */
.mlt-stats-box {
    background: linear-gradient(135deg, var(--mlt-bg-bleu) 0%, white 100%) !important;
    border: 2px solid var(--mlt-bleu) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    margin: 32px 0 !important;
    text-align: center !important;
}

.mlt-stats-chiffre {
    font-size: 56px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--mlt-bleu) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em !important;
}

.mlt-stats-unite {
    font-size: 40px !important;
    margin-left: 4px !important;
}

.mlt-stats-label {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--mlt-noir) !important;
    margin-bottom: 12px !important;
}

.mlt-stats-description {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--mlt-gris-moyen) !important;
}

.mlt-stats-description p {
    margin-bottom: 8px !important;
}

.mlt-stats-description p:last-child {
    margin-bottom: 0 !important;
}

/* Variantes couleur stats */
.mlt-stats-marron {
    background: linear-gradient(135deg, var(--mlt-bg-marron) 0%, white 100%) !important;
    border-color: var(--mlt-marron) !important;
}

.mlt-stats-marron .mlt-stats-chiffre {
    color: var(--mlt-marron) !important;
}

.mlt-stats-vert {
    background: linear-gradient(135deg, var(--mlt-bg-vert) 0%, white 100%) !important;
    border-color: var(--mlt-vert) !important;
}

.mlt-stats-vert .mlt-stats-chiffre {
    color: var(--mlt-vert) !important;
}

/* ========================================
   7. HIGHLIGHT - Texte accentué inline
   ======================================== */
.mlt-highlight {
    color: var(--mlt-bleu) !important;
    font-weight: 600 !important;
    background: rgba(100, 112, 187, 0.08) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

.mlt-highlight-marron {
    color: var(--mlt-marron) !important;
    background: rgba(135, 115, 86, 0.08) !important;
}

.mlt-highlight-vert {
    color: var(--mlt-vert) !important;
    background: rgba(72, 187, 120, 0.08) !important;
}

/* ========================================
   8. QUOTE - Citation stylisée
   ======================================== */
.mlt-quote-box {
    background: white !important;
    border-left: 4px solid var(--mlt-bleu) !important;
    border-radius: 8px !important;
    padding: 32px !important;
    margin: 40px 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.mlt-quote-contenu {
    font-size: 20px !important;
    font-style: italic !important;
    line-height: 1.7 !important;
    color: var(--mlt-gris-fonce) !important;
    margin-bottom: 20px !important;
}

.mlt-quote-contenu p {
    margin-bottom: 16px !important;
}

.mlt-quote-contenu p:last-child {
    margin-bottom: 0 !important;
}

.mlt-quote-auteur {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mlt-quote-auteur strong {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--mlt-noir) !important;
}

.mlt-quote-fonction {
    font-size: 14px !important;
    color: var(--mlt-gris-moyen) !important;
}

/* Variantes couleur quote */
.mlt-quote-marron {
    border-left-color: var(--mlt-marron) !important;
}

.mlt-quote-vert {
    border-left-color: var(--mlt-vert) !important;
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */
@media screen and (max-width: 767px) {
    /* CTA Block */
    .mlt-cta-block {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 24px !important;
        margin: 32px 0 !important;
        border-radius: 8px !important;
        min-height: auto !important;
    }

    .mlt-cta-icone-wrapper {
        width: 56px !important;
        height: 56px !important;
    }

    .mlt-cta-icone {
        font-size: 44px !important;
    }

    .mlt-cta-titre-text {
        font-size: 18px !important;
    }

    .mlt-cta-texte,
    .mlt-cta-texte p {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    .mlt-cta-bouton {
        padding: 11px 20px !important;
        font-size: 14px !important;
    }

    .mlt-cta-large {
        padding: 24px 20px !important;
    }

    .mlt-cta-large .mlt-cta-titre-text {
        font-size: 19px !important;
    }
    
    /* Info Box */
    .mlt-info-box {
        padding: 20px !important;
        margin: 24px 0 !important;
    }
    
    .mlt-info-header {
        gap: 10px !important;
    }
    
    .mlt-info-icone {
        font-size: 24px !important;
    }
    
    .mlt-info-titre {
        font-size: 16px !important;
    }
    
    .mlt-info-contenu {
        font-size: 15px !important;
    }
    
    /* Download Box */
    .mlt-download-box {
        padding: 24px 20px !important;
        margin: 32px 0 !important;
    }
    
    .mlt-download-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .mlt-download-icone {
        font-size: 32px !important;
    }
    
    .mlt-download-titre {
        font-size: 18px !important;
    }
    
    .mlt-download-bouton {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
    
    /* Lien Article */
    .mlt-lien-article {
        padding: 16px !important;
        gap: 12px !important;
    }
    
    .mlt-lien-icone {
        font-size: 28px !important;
    }
    
    .mlt-lien-titre {
        font-size: 16px !important;
    }
    
    .mlt-lien-description {
        font-size: 14px !important;
    }
    
    /* Checklist */
    .mlt-checklist {
        padding: 20px !important;
        margin: 24px 0 !important;
    }
    
    .mlt-checklist-titre {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
    
    .mlt-checklist-item {
        padding: 10px 0 !important;
    }
    
    .mlt-checklist-text {
        font-size: 15px !important;
    }
    
    /* Stats Box */
    .mlt-stats-box {
        padding: 24px !important;
        margin: 24px 0 !important;
    }
    
    .mlt-stats-chiffre {
        font-size: 44px !important;
    }
    
    .mlt-stats-unite {
        font-size: 32px !important;
    }
    
    .mlt-stats-label {
        font-size: 16px !important;
    }
    
    .mlt-stats-description {
        font-size: 14px !important;
    }
    
    /* Quote */
    .mlt-quote-box {
        padding: 24px 20px !important;
        margin: 32px 0 !important;
    }
    
    .mlt-quote-contenu {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
}

/* ========================================
   TABLET (768px - 1023px)
   ======================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .mlt-cta-titre-text {
        font-size: 24px !important;
    }

    .mlt-cta-large .mlt-cta-titre-text {
        font-size: 28px !important;
    }
    
    .mlt-download-header {
        gap: 14px !important;
    }
    
    .mlt-stats-chiffre {
        font-size: 50px !important;
    }
}

/* ========================================
   PRINT (pour PDF, optionnel)
   ======================================== */
@media print {
    .mlt-cta-block,
    .mlt-info-box,
    .mlt-download-box,
    .mlt-lien-article,
    .mlt-checklist,
    .mlt-stats-box,
    .mlt-quote-box {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    
    .mlt-cta-bouton,
    .mlt-download-bouton {
        display: none !important;
    }
}