@import url("../style.css");

@font-face {
    font-family: 'SF Mono Regular';
    font-style: normal;
    font-weight: normal;
    src: local('SF Mono Regular'), url('../fonts/SFMonoRegular.woff') format('woff');
}


/* ==================== */
/* 🎨 VARIABLES & RESET */
/* ==================== */
:root {
    --bg-color: #fdfbf7;
    --text-color: #2c3e50;
    --accent-green: #2ecc71;
    --accent-blue: #2980b9;
    --dark-accent: #1e272e;
    --light-grey: #f9f6f0;
    --border-color: #e6dfd3;
    --code-bg-inline: #e8e8e8;    /* Gris clair mais visible */
    --code-text-inline: #600078;  /* Gris foncé pour contraste */
    --code-bg-block: #f0f0f0;     /* Fond légèrement plus clair pour les blocs */
    --code-text-block: #2c3e50;  /* Texte foncé pour lisibilité */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono Regular', monospace;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    padding-bottom: 40px;
}


/* ==================== */
/* 📜 CONTENU MARKDOWN */
/* ==================== */
.container {
    max-width: 1050px;
    margin: 40px auto;
    padding: 0 20px;
}

/* --- Titres --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--dark-accent);
    line-height: 1.3;
}
h1 { font-size: 2.2em; border-bottom: 2px solid var(--accent-green); padding-bottom: 0.3em; }
h2 { font-size: 1.8em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; color: var(--accent-blue); }

/* --- Paragraphes --- */
p {
    margin: 1em 0;
    text-align: justify;
    hyphens: auto;
}

/* --- Emphase --- */
strong, b {
    font-weight: bold;
    color: var(--dark-accent);
}

em, i {
    color: var(--accent-blue);
    font-style: italic;
}



/* --- Listes --- */
.container ul, .container ol {
    margin: 1em 0;
    padding-left: 2em;
}
.container ul { list-style-type: disc; }
.container ol { list-style-type: decimal; }
.container li { margin: 0.5em 0; line-height: 1.6; }

/* --- Blockquotes --- */
blockquote {
    border-left: 4px solid var(--accent-green);
    padding: 1em 1.5em;
    margin: 1.5em 0;
    background-color: var(--light-grey);
    font-style: italic;
    color: #5c6b73;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
blockquote p:last-child { margin-bottom: 0; }

/* --- Séparateurs --- */
hr {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin: 2em 0;
}


code {
    font-size: 12pt;
    font-family: var(--font-mono);
}

/* --- Blocs de code (<pre>) --- */
pre {
    background-color: var(--code-bg-block);
    color: var(--code-text-block);
    padding: 1.25em;
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: 1.5;
    margin: 1.5em 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* --- Code en ligne (<code>) --- */
code:not(pre > code) {
    background-color: var(--code-bg-inline);
    color: var(--code-text-inline);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
}


/*!Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15

Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/
.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_ {
    color:#d73a49
}
.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_ {
    color:#6f42c1
}
.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable {
    color:#005cc5
}
.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {
    color:#03aa00
}
.hljs-built_in,.hljs-symbol {
    color:#e36209
}
.hljs-code,.hljs-comment,.hljs-formula {
    color:#6a737d
}
.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag {
    color:#22863a
}
.hljs-subst {
    color:#24292e
}

.hljs-section {
    color:#005cc5;font-weight:700
}
.hljs-bullet {
    color:#735c0f
}

.hljs-emphasis {
    color:#24292e;
    font-style:italic
}
.hljs-strong {
    color:#24292e;
    font-weight:700
}

.hljs-addition {
    color:#22863a;
    background-color:#f0fff4
}

.hljs-deletion {
    color:#b31d28;
    background-color:#ffeef0
}




/* --- Images --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}