/* ============================================================
   STYLES CONTENU TUTORIELS — Badge série, Astuces, CTA suite
   ============================================================ */

/* ---- Badge "Partie X sur Y" ------------------------------ */
.tuto-serie-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E1F5EE;
    color: #1A7A5E;
    border: 1px solid #A7E8D0;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ---- Encadré "Astuce / À retenir" (💡) -------------------- */
.tuto-astuce {
    background: #F0FBF9;
    border-left: 4px solid #38B2AC;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #2D3748;
}

.tuto-astuce strong {
    display: inline-block;
    color: #1A5276;
    margin-bottom: 4px;
}

/* ---- Encadré "Avertissement / Important" (⚠️) ------------- */
.tuto-avertissement {
    background: #FFF9E6;
    border-left: 4px solid #F39C12;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #2D3748;
}

.tuto-avertissement strong {
    display: inline-block;
    color: #7B5B00;
    margin-bottom: 4px;
}

/* ---- Bloc CTA vers la partie suivante --------------------- */
.tuto-cta-suite {
    background: linear-gradient(135deg, #2D3748, #1A202C);
    color: #F7FAFC;
    padding: 20px 24px;
    border-radius: 12px;
    margin-top: 32px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.tuto-cta-suite strong {
    color: #2DB87A;
}

/* ---- Ajustements généraux du contenu tutoriel ------------- */
.tuto-contenu pre {
    background: #1A202C;
    color: #E2E8F0;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
    margin: 16px 0;
}

.tuto-contenu code {
    background: #EDF2F7;
    color: #C0392B;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Consolas', 'Monaco', monospace;
}

.tuto-contenu pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .tuto-astuce,
    .tuto-avertissement,
    .tuto-cta-suite {
        padding: 14px 16px;
        font-size: 14px;
    }
}