/* ==========================================================================
   MARKDOWN CONTENT & ARTICLE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE CONTAINER (Sandbox)
   -------------------------------------------------------------------------- */
.post-detail__content {
    line-height: 1.7;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   2. TEXT FORMATTING & INLINE ELEMENTS
   -------------------------------------------------------------------------- */
.post-detail__content p {
    margin: 0;
}

.post-detail__content strong {
    font-weight: 600;
    color: var(--text-main);
}

.post-detail__content em {
    font-style: normal;
    color: var(--accent-primary);
}

.post-detail__content del {
    text-decoration: line-through;
    color: var(--text-muted);
}

.post-detail__content a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-primary);
    transition: var(--transition-interactive);
}

.post-detail__content a:hover {
    color: var(--text-main);
    border-bottom: 1px solid var(--text-main);
    background-color: var(--row-hover);
}

/* --------------------------------------------------------------------------
   3. HEADINGS (h2, h3)
   -------------------------------------------------------------------------- */
.post-detail__content h2 {
    margin: 1.5rem 0 0.5rem 0;
    padding-bottom: 0.5rem;
    color: var(--accent-primary);
    font-weight: 500;
    border-bottom: 1px dashed var(--border-line);
}

.post-detail__content h2::before {
    content: "## ";
    color: var(--text-muted);
}

.post-detail__content h3 {
    margin: 1rem 0 0.5rem 0;
    color: var(--text-main);
    font-weight: 600;
}

.post-detail__content h3::before {
    content: "### ";
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. BLOCKQUOTES
   -------------------------------------------------------------------------- */
.post-detail__content blockquote {
    margin: 0;
    padding: 1.2rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-line);
    border-radius: 4px;
    color: var(--text-main);
    font-size: var(--text-sm);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.post-detail__content blockquote p {
    margin: 0;
    line-height: 1.6;
}

.post-detail__content blockquote p:first-child::before {
    content: "❯ ";
    margin-right: 0.5rem;
    color: var(--accent-primary);
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   5. LISTS (ul, ol, li)
   -------------------------------------------------------------------------- */
/* Structure générale */
.post-detail__content ul,
.post-detail__content ol {
    margin: 0;
    padding-left: 2rem;
    color: var(--text-main);
    list-style: none;
}

.post-detail__content li {
    margin-bottom: 0.5rem;
    position: relative; /* Nécessaire pour les pseudo-éléments absolus */
}

.post-detail__content li:last-child {
    margin-bottom: 0;
}

/* Listes non ordonnées (ul) - Style Terminal */
.post-detail__content ul > li::before {
    content: "•";
    position: absolute;
    left: -1rem;
    color: var(--accent-primary);
    font-weight: bold;
}

.post-detail__content ul ul {
    margin: 0.5rem 0; /* Marge réduite pour sous-listes */
}

.post-detail__content ul ul > li::before {
    content: "◦";
    color: var(--accent-primary);    
}

.post-detail__content ul ul ul > li::before {
    content: "⬝";
    top: -0.2em;
    color: var(--accent-primary);
}

/* Listes ordonnées (ol) */
.post-detail__content ol {
    counter-reset: terminal-counter;
}

.post-detail__content ol > li {
    counter-increment: terminal-counter;
}

.post-detail__content ol > li::before {
    content: counter(terminal-counter) ".";
    position: absolute;
    left: -2rem;
    width: 1.5rem;
    text-align: right;
    color: var(--accent-primary);
}

.post-detail__content ol ol {
    margin: 0.5rem 0;
    counter-reset: terminal-subcounter;
}

.post-detail__content ol ol > li {
    counter-increment: terminal-subcounter;
}

.post-detail__content ol ol > li::before {
    content: counter(terminal-subcounter, lower-alpha) ".";
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   6. TABLES
   -------------------------------------------------------------------------- */
.post-detail__content table {
    width: max-content;
    max-width: 100%;
    margin: 2rem auto;
    border-collapse: collapse;
    font-size: var(--text-sm);
    color: var(--text-main);
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.post-detail__content thead {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--accent-primary);
}

.post-detail__content th {
    padding: 0.8rem 1rem;
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px dashed var(--border-line);
}

.post-detail__content th:last-child {
    border-right: none;
}

.post-detail__content tbody tr {
    border-bottom: 1px solid var(--border-line);
    transition: var(--transition-interactive);
}

.post-detail__content tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

.post-detail__content tbody tr:hover {
    background-color: var(--row-hover);
}

.post-detail__content td {
    padding: 0.8rem 1rem;
    border-right: 1px dashed var(--border-line);
}

.post-detail__content td:last-child {
    border-right: none;
}

/* --------------------------------------------------------------------------
   7. CODE (Inline & Blocks via Pygments)
   -------------------------------------------------------------------------- */
/* Base (Police et taille) */
.post-detail__content code,
.post-detail__content pre {
    font-family: inherit;
    font-size: var(--text-sm);
}

/* Code Inline */
.post-detail__content code {
    padding: 0.1rem 0.3rem;
    background-color: var(--bg-secondary);
    color: var(--accent-primary);
    border: 1px solid var(--border-line);
    border-radius: 4px;
    white-space: nowrap;
}

/* Code inline dans les tableaux */
.post-detail__content td code {
    white-space: normal;
    word-break: break-word;
}

/* Blocs de code - Conteneur (.codehilite) */
.post-detail__content .codehilite {
    margin: 0;
    background-color: #05080c !important;
    border: 1px solid var(--border-line);
    border-radius: 6px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Blocs de code - Contenu (pre) */
.post-detail__content .codehilite pre {
    margin: 0;
    padding: 1.5rem;
    background-color: transparent !important;
    border: none;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: var(--border-line) transparent;
}

/* Annulation du style inline pour le code dans un bloc pre */
.post-detail__content pre code {
    padding: 0;
    background-color: transparent;
    color: inherit;
    border: none;
    white-space: inherit;
}

/* Scrollbar personnalisée (Webkit) */
.post-detail__content .codehilite pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.post-detail__content .codehilite pre::-webkit-scrollbar-track {
    background: transparent;
}

.post-detail__content .codehilite pre::-webkit-scrollbar-thumb {
    background-color: var(--border-line);
    border-radius: 4px;
}

.post-detail__content .codehilite pre::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   8. ADMONITIONS (!!! note, !!! warning, etc.)
   -------------------------------------------------------------------------- */
.post-detail__content .admonition {
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    color: var(--text-main);
    font-size: var(--text-sm);
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--border-line);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-detail__content .admonition p:last-child {
    margin-bottom: 0;
}

.post-detail__content .admonition-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    color: inherit;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Exception : code inline dans les admonitions */
.post-detail__content .admonition code {
    white-space: normal;
    word-break: break-word;
}

/* Couleurs spécifiques et icônes textuelles */
/* NOTE & INFO (Cyan) */
.post-detail__content .admonition.note,
.post-detail__content .admonition.info {
    border-left-color: var(--accent-primary);
}

.post-detail__content .admonition.note .admonition-title,
.post-detail__content .admonition.info .admonition-title {
    color: var(--accent-primary);
}

.post-detail__content .admonition.note .admonition-title::before,
.post-detail__content .admonition.info .admonition-title::before {
    content: "[i]";
}

/* TIP & SUCCESS (Vert) */
.post-detail__content .admonition.tip,
.post-detail__content .admonition.success {
    border-left-color: var(--terminal-success);
}

.post-detail__content .admonition.tip .admonition-title,
.post-detail__content .admonition.success .admonition-title {
    color: var(--terminal-success);
}

.post-detail__content .admonition.tip .admonition-title::before,
.post-detail__content .admonition.success .admonition-title::before {
    content: "[+]";
}

/* WARNING & CAUTION (Jaune) */
.post-detail__content .admonition.warning,
.post-detail__content .admonition.caution {
    border-left-color: var(--terminal-warning);
}

.post-detail__content .admonition.warning .admonition-title,
.post-detail__content .admonition.caution .admonition-title {
    color: var(--terminal-warning);
}

.post-detail__content .admonition.warning .admonition-title::before,
.post-detail__content .admonition.caution .admonition-title::before {
    content: "[!]";
}

/* DANGER & ERROR (Rouge) */
.post-detail__content .admonition.danger,
.post-detail__content .admonition.error {
    background-color: rgba(239, 68, 68, 0.05);
    border-left-color: var(--terminal-error);
}

.post-detail__content .admonition.danger .admonition-title,
.post-detail__content .admonition.error .admonition-title {
    color: var(--terminal-error);
}

.post-detail__content .admonition.danger .admonition-title::before,
.post-detail__content .admonition.error .admonition-title::before {
    content: "[x]";
}

/* --------------------------------------------------------------------------
   9. MEDIA & SEPARATORS (img, hr)
   -------------------------------------------------------------------------- */
.post-detail__content hr {
    position: relative;
    margin: 2rem 0;
    border: none;
    border-top: 1px dashed var(--border-line);
    overflow: visible;
}

.post-detail__content hr::after {
    content: "< / >";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 1rem;
    background-color: var(--bg-main);
    color: var(--text-muted);
    font-size: var(--text-sm);
    letter-spacing: 2px;
}

.post-detail__content img {
    display: block;
    width: auto;
    max-width: min(100%, 70ch);
    height: auto;
    margin: 2rem auto;
    padding: 0.25rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-line);
    opacity: 0.8;
    transition: all var(--transition-interactive);
}

.post-detail__content img:hover {
    border-color: var(--accent-primary);
    opacity: 1;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}