/**
 * TUTORIAL.CSS - Composants specifiques aux tutoriels
 *
 * Inclus automatiquement pour les pages avec contentType: "tutorial"
 * Herite de article.css (qui est inclus via ogType: article)
 *
 * Composants:
 * - .tutorial-prerequisites : box prerequis avant de commencer
 * - .tutorial-validation    : checkpoint de verification apres chaque etape
 * - .tutorial-troubleshooting : depannage si erreur
 * - .tutorial-recap         : recapitulatif final des acquis
 */

/* ==========================================================================
   PREREQUISITES BOX
   Affiche les prerequis avant le tutoriel
   ========================================================================== */

.tutorial-prerequisites {
    background: linear-gradient(135deg, var(--oi-dragee) 0%, rgba(188, 228, 254, 0.5) 100%);
    border: 1px solid rgba(188, 228, 254, 0.6);
    border-left: 4px solid var(--oi-marine);
    border-radius: 8px;
    padding: 24px 28px;
    margin: 24px 0;
}

.tutorial-prerequisites h4::before {
    content: "\25B6";  /* right-pointing triangle */
    margin-right: 8px;
    font-size: 0.7rem;
}

.tutorial-prerequisites h4 {
    font-family: var(--font-h2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oi-marine);
    margin: 0 0 16px 0;
    font-weight: 700;
}

.tutorial-prerequisites ul {
    margin: 0;
    padding-left: 20px;
}

.tutorial-prerequisites li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.tutorial-prerequisites li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   VALIDATION CHECKPOINT
   Vert - confirme que l'etape est reussie
   ========================================================================== */

.tutorial-validation {
    background: #f0f7f1;
    border-left: 4px solid var(--oi-empire);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
}

.tutorial-validation h4::before {
    content: "\2713";  /* check mark */
    margin-right: 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.tutorial-validation h4 {
    font-family: var(--font-h2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oi-empire);
    margin: 0 0 12px 0;
    font-weight: 700;
}

.tutorial-validation p {
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.tutorial-validation p:last-child {
    margin-bottom: 0;
}

.tutorial-validation pre {
    margin: 12px 0;
    font-size: 0.82rem;
}

.tutorial-validation code:not(pre code) {
    background: rgba(0, 86, 27, 0.1);
    color: var(--oi-empire);
    font-weight: 500;
}

/* ==========================================================================
   TROUBLESHOOTING BOX
   Rouge doux - aide si erreur
   ========================================================================== */

.tutorial-troubleshooting {
    background: #fdf2f2;
    border-left: 4px solid var(--oi-rouge);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
}

.tutorial-troubleshooting h4::before {
    content: "\26A0";  /* warning triangle */
    margin-right: 8px;
    font-size: 0.85rem;
}

.tutorial-troubleshooting h4 {
    font-family: var(--font-h2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oi-rouge);
    margin: 0 0 12px 0;
    font-weight: 700;
}

.tutorial-troubleshooting p {
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.tutorial-troubleshooting p:last-child {
    margin-bottom: 0;
}

.tutorial-troubleshooting pre {
    margin: 12px 0;
    font-size: 0.82rem;
}

.tutorial-troubleshooting code:not(pre code) {
    background: rgba(211, 47, 47, 0.08);
    color: var(--oi-rouge);
}

/* ==========================================================================
   RECAP BOX
   Resume final de ce que le lecteur a appris
   ========================================================================== */

.tutorial-recap {
    background: linear-gradient(135deg, #f0f7f1 0%, #f6fce6 100%);
    border: 1px solid rgba(0, 86, 27, 0.15);
    border-radius: 8px;
    padding: 24px 28px;
    margin: 24px 0;
}

.tutorial-recap h4::before {
    content: "\2630";  /* trigram / list icon */
    margin-right: 8px;
    font-size: 0.85rem;
}

.tutorial-recap ol {
    margin: 0;
    padding-left: 24px;
}

.tutorial-recap li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tutorial-recap li:last-child {
    margin-bottom: 0;
}

.tutorial-recap li strong {
    color: var(--oi-empire);
}

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

@media (max-width: 640px) {
    .tutorial-prerequisites,
    .tutorial-validation,
    .tutorial-troubleshooting,
    .tutorial-recap {
        padding: 16px 20px;
    }
}