/* Utilitaire : limite un texte à 2 lignes avec "..." (pour les cartes) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Styles spécifiques au contenu d'un tuto (rendu Markdown).
   Tailwind ne stylise pas le HTML brut produit par le convertisseur
   Markdown, donc on définit ici les règles pour h2, p, ul, code, etc. */

.prose-tuto {
    color: #cdd6f4;            /* text */
    font-size: 1.05rem;
    line-height: 1.7;
}

.prose-tuto h1,
.prose-tuto h2,
.prose-tuto h3,
.prose-tuto h4 {
    color: #f5c2e7;            /* pink */
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.prose-tuto h1 { font-size: 2rem; }
.prose-tuto h2 { font-size: 1.5rem; border-bottom: 1px solid #313244; padding-bottom: .25rem; }
.prose-tuto h3 { font-size: 1.25rem; }

.prose-tuto p { margin: 0.75rem 0; }

.prose-tuto a {
    color: #89b4fa;            /* blue */
    text-decoration: underline;
}
.prose-tuto a:hover { color: #b4befe; }

.prose-tuto ul,
.prose-tuto ol {
    margin: 0.75rem 0 0.75rem 1.5rem;
}
.prose-tuto ul { list-style: disc; }
.prose-tuto ol { list-style: decimal; }
.prose-tuto li { margin: 0.25rem 0; }

/* Code "inline" (entre backticks) */
.prose-tuto :not(pre) > code {
    background: #313244;
    color: #f9e2af;            /* yellow */
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-family: 'JetBrains Mono', Menlo, monospace;
    font-size: 0.92em;
}

/* Blocs de code (rendus par codehilite/Pygments) */
.prose-tuto .codehilite,
.prose-tuto pre {
    background: #181825 !important; /* mantle */
    border: 1px solid #313244;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
    font-size: 0.95rem;
    line-height: 1.55;
}
.prose-tuto pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.prose-tuto blockquote {
    border-left: 4px solid #cba6f7;
    background: #181825;
    padding: 0.6rem 1rem;
    margin: 1rem 0;
    color: #bac2de;
    border-radius: 0 6px 6px 0;
}

.prose-tuto img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem auto;
    display: block;
    border: 1px solid #313244;
}

.prose-tuto table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}
.prose-tuto th,
.prose-tuto td {
    border: 1px solid #313244;
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.prose-tuto th {
    background: #313244;
    color: #b4befe;
}

.prose-tuto hr {
    border: 0;
    border-top: 1px solid #313244;
    margin: 2rem 0;
}