/* ============================================
 *  FEUILLE DE STYLE COMPLÈTE PANDOC MARKDOWN
 *  ============================================ */

/* === VARIABLES CSS === */
:root {
    /* Couleurs */
    --couleur-primaire: #2c3e50;
    --couleur-secondaire: #3498db;
    --couleur-accent: #e74c3c;
    --couleur-texte: #333333;
    --couleur-texte-clair: #666666;
    --couleur-fond: #ffffff;
    --couleur-fond-alt: #f8f9fa;
    --couleur-bordure: #dee2e6;
    --couleur-code-fond: #f4f4f4;
    --couleur-code-bordure: #cccccc;

    /* Typographie */
    --police-principale: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --police-titre: 'Georgia', serif;
    --police-code: 'Courier New', 'Consolas', 'Monaco', monospace;

    /* Espacements */
    --espacement-xs: 0.25rem;
    --espacement-sm: 0.5rem;
    --espacement-md: 1rem;
    --espacement-lg: 1.5rem;
    --espacement-xl: 2rem;
    --espacement-xxl: 3rem;

    /* Tailles */
    --largeur-max: 800px;
    --rayon-bordure: 4px;
    --hauteur-ligne: 1.6;
}

/* === RESET ET BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--police-principale);
    line-height: var(--hauteur-ligne);
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: var(--espacement-xl) var(--espacement-lg);
}

/* === TITRES === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-titre);
    color: var(--couleur-primaire);
    font-weight: 700;
    line-height: 1.3;
    margin-top: var(--espacement-xl);
    margin-bottom: var(--espacement-md);
}

h1 {
    font-size: 2.5rem;
    border-bottom: 3px solid var(--couleur-primaire);
    padding-bottom: var(--espacement-sm);
    margin-top: 0;
}

h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--couleur-bordure);
    padding-bottom: var(--espacement-xs);
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
    color: var(--couleur-texte-clair);
    font-weight: 600;
}

/* Titres avec IDs (pour ancres) */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
    position: relative;
}

h1[id]:hover::before,
h2[id]:hover::before,
h3[id]:hover::before,
h4[id]:hover::before,
h5[id]:hover::before,
h6[id]:hover::before {
    content: "#";
    position: absolute;
    left: -1.5rem;
    color: var(--couleur-secondaire);
    opacity: 0.5;
    font-weight: normal;
}

/* === PARAGRAPHES === */
p {
    margin-bottom: var(--espacement-md);
    text-align: justify;
    hyphens: auto;
}

/* Espacement après les titres */
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
    margin-top: var(--espacement-sm);
}

/* === FORMATAGE INLINE === */

/* Emphase et importance */
em {
    font-style: italic;
}

strong {
    font-weight: 700;
    color: var(--couleur-primaire);
}

strong em,
em strong {
    font-weight: 700;
    font-style: italic;
}

/* Texte barré */
s, del, strike {
    text-decoration: line-through;
    color: var(--couleur-texte-clair);
}

/* Code inline */
code {
    font-family: var(--police-code);
    font-size: 0.9em;
    background-color: var(--couleur-code-fond);
    padding: 0.2em 0.4em;
    border-radius: var(--rayon-bordure);
    border: 1px solid var(--couleur-code-bordure);
    color: var(--couleur-accent);
}

/* Exposant et indice */
sup {
    font-size: 0.75em;
    vertical-align: super;
}

sub {
    font-size: 0.75em;
    vertical-align: sub;
}

/* Mark (surligné) */
mark, .mark {
    background-color: #fff3cd;
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

/* Petites majuscules */
.smallcaps {
    font-variant: small-caps;
}

/* Souligné */
u, .underline {
    text-decoration: underline;
    text-decoration-color: var(--couleur-secondaire);
    text-decoration-thickness: 2px;
}

/* === LIENS === */
a {
    color: var(--couleur-secondaire);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--couleur-primaire);
    border-bottom-color: var(--couleur-secondaire);
}

a:visited {
    color: #8e44ad;
}

a:active {
    color: var(--couleur-accent);
}

/* Liens externes (avec icône optionnelle) */
a[href^="http"]::after {
    content: " ↗";
    font-size: 0.8em;
    opacity: 0.6;
}

/* Liens internes (ancres) */
a[href^="#"]::after {
    content: "";
}

/* === IMAGES === */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--espacement-lg) auto;
    border-radius: var(--rayon-bordure);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Images avec classes */
img.center, img.centre {
    margin-left: auto;
    margin-right: auto;
}

img.left, img.gauche {
    float: left;
    margin-right: var(--espacement-md);
    margin-bottom: var(--espacement-md);
}

img.right, img.droite {
    float: right;
    margin-left: var(--espacement-md);
    margin-bottom: var(--espacement-md);
}

/* === FIGURES === */
figure {
    margin: var(--espacement-xl) 0;
    text-align: center;
}

figure img {
    margin-bottom: var(--espacement-sm);
}

figcaption {
    font-size: 0.9em;
    color: var(--couleur-texte-clair);
    font-style: italic;
    margin-top: var(--espacement-sm);
}

/* === LISTES === */

/* Listes non ordonnées */
ul {
    list-style-type: disc;
    margin-left: var(--espacement-xl);
    margin-bottom: var(--espacement-md);
}

ul ul {
    list-style-type: circle;
    margin-top: var(--espacement-sm);
    margin-bottom: var(--espacement-sm);
}

ul ul ul {
    list-style-type: square;
}

/* Listes ordonnées */
ol {
    list-style-type: decimal;
    margin-left: var(--espacement-xl);
    margin-bottom: var(--espacement-md);
}

ol ol {
    list-style-type: lower-alpha;
    margin-top: var(--espacement-sm);
    margin-bottom: var(--espacement-sm);
}

ol ol ol {
    list-style-type: lower-roman;
}

/* Éléments de liste */
li {
    margin-bottom: var(--espacement-sm);
    line-height: 1.8;
}

li > p {
    margin-bottom: var(--espacement-sm);
}

/* Derniers éléments sans marge */
li:last-child {
    margin-bottom: 0;
}

/* Listes compactes (sans paragraphes) */
li > ul,
li > ol {
    margin-top: var(--espacement-xs);
}

/* Listes de définitions */
dl {
    margin-bottom: var(--espacement-md);
}

dt {
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-top: var(--espacement-md);
}

dd {
    margin-left: var(--espacement-xl);
    margin-bottom: var(--espacement-sm);
    padding-left: var(--espacement-md);
    border-left: 3px solid var(--couleur-bordure);
}

/* === TABLES === */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--espacement-xl) 0;
    font-size: 0.95em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: var(--rayon-bordure);
}

/* Caption */
caption {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--couleur-primaire);
    margin-bottom: var(--espacement-md);
    text-align: left;
    caption-side: top;
}

/* En-tête de table */
thead {
    background-color: var(--couleur-primaire);
    color: white;
}

thead tr {
    border: none;
}

th {
    padding: var(--espacement-md);
    text-align: left;
    font-weight: 600;
    border: none;
}

/* Corps de table */
tbody tr {
    border-bottom: 1px solid var(--couleur-bordure);
    transition: background-color 0.2s ease;
}

tbody tr:hover {
    background-color: var(--couleur-fond-alt);
}

tbody tr:last-child {
    border-bottom: none;
}

td {
    padding: var(--espacement-md);
    border: none;
}

/* Lignes alternées */
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

tbody tr:nth-child(even):hover {
    background-color: #e9ecef;
}

/* Alignement des colonnes */
th[align="left"],
td[align="left"] {
    text-align: left;
}

th[align="center"],
td[align="center"] {
    text-align: center;
}

th[align="right"],
td[align="right"] {
    text-align: right;
}

/* Table responsive */
@media (max-width: 768px) {
    table {
        font-size: 0.85em;
    }

    th, td {
        padding: var(--espacement-sm);
    }
}

/* === CITATIONS === */
blockquote {
    margin: var(--espacement-xl) 0;
    padding: var(--espacement-md) var(--espacement-lg);
    border-left: 4px solid var(--couleur-secondaire);
    background-color: var(--couleur-fond-alt);
    font-style: italic;
    color: var(--couleur-texte-clair);
    border-radius: 0 var(--rayon-bordure) var(--rayon-bordure) 0;
}

blockquote p {
    margin-bottom: var(--espacement-sm);
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Citations imbriquées */
blockquote blockquote {
    margin-top: var(--espacement-md);
    border-left-color: var(--couleur-accent);
    background-color: #fff;
}

/* Citation avec auteur */
blockquote footer,
blockquote cite {
    display: block;
    margin-top: var(--espacement-sm);
    font-size: 0.9em;
    text-align: right;
    font-style: normal;
    color: var(--couleur-texte);
}

blockquote footer::before,
blockquote cite::before {
    content: "— ";
}

/* === BLOCS DE CODE === */
pre {
    background-color: var(--couleur-code-fond);
    border: 1px solid var(--couleur-code-bordure);
    border-left: 4px solid var(--couleur-primaire);
    border-radius: var(--rayon-bordure);
    padding: var(--espacement-md);
    margin: var(--espacement-xl) 0;
    overflow-x: auto;
    font-family: var(--police-code);
    font-size: 0.9em;
    line-height: 1.5;
}

pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Code avec numérotation de lignes */
pre.numberSource {
    padding-left: 3em;
    position: relative;
}

pre.numberSource code {
    counter-reset: source-line;
}

pre.numberSource code .sourceLine {
    counter-increment: source-line;
    position: relative;
}

pre.numberSource code .sourceLine::before {
    content: counter(source-line);
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: var(--couleur-texte-clair);
    border-right: 1px solid var(--couleur-bordure);
    padding-right: 0.5em;
    margin-right: 0.5em;
}

/* Coloration syntaxique - Classes génériques */
.kw { color: #007020; font-weight: bold; } /* Keyword */
.dt { color: #902000; } /* DataType */
.dv { color: #40a070; } /* DecVal */
.bn { color: #40a070; } /* BaseN */
.fl { color: #40a070; } /* Float */
.ch { color: #4070a0; } /* Char */
.st { color: #4070a0; } /* String */
.co { color: #60a0b0; font-style: italic; } /* Comment */
.ot { color: #007020; } /* Other */
.al { color: #ff0000; font-weight: bold; } /* Alert */
.fu { color: #06287e; } /* Function */
.er { color: #ff0000; font-weight: bold; } /* Error */
.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
.cn { color: #880000; } /* Constant */
.sc { color: #4070a0; } /* SpecialChar */
.vs { color: #4070a0; } /* VerbatimString */
.ss { color: #bb6688; } /* SpecialString */
.im { } /* Import */
.va { color: #19177c; } /* Variable */
.cf { color: #007020; font-weight: bold; } /* ControlFlow */
.op { color: #666666; } /* Operator */
.bu { } /* BuiltIn */
.ex { } /* Extension */
.pp { color: #bc7a00; } /* Preprocessor */
.at { color: #7d9029; } /* Attribute */
.do { color: #ba2121; font-style: italic; } /* Documentation */
.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */

/* === LIGNE HORIZONTALE === */
hr {
    border: none;
    border-top: 2px solid var(--couleur-bordure);
    margin: var(--espacement-xxl) 0;
}

/* === NOTES DE BAS DE PAGE === */

/* Référence dans le texte */
a.footnote-ref {
    font-size: 0.8em;
    vertical-align: super;
    text-decoration: none;
    padding: 0 0.2em;
}

a.footnote-ref:hover {
    background-color: var(--couleur-fond-alt);
    border-radius: 3px;
}

/* Section des notes */
section.footnotes {
    margin-top: var(--espacement-xxl);
    padding-top: var(--espacement-xl);
    border-top: 2px solid var(--couleur-bordure);
    font-size: 0.9em;
}

section.footnotes::before {
    content: "Notes";
    display: block;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--couleur-primaire);
    margin-bottom: var(--espacement-md);
}

section.footnotes ol {
    margin-left: var(--espacement-lg);
}

section.footnotes li {
    margin-bottom: var(--espacement-md);
}

section.footnotes p {
    display: inline;
}

/* Lien de retour */
a.footnote-back {
    text-decoration: none;
    margin-left: var(--espacement-xs);
    font-size: 0.9em;
}

a.footnote-back:hover {
    background-color: var(--couleur-fond-alt);
    border-radius: 3px;
    padding: 0 0.2em;
}

/* === TABLE DES MATIÈRES === */
#TOC, nav#TOC {
background-color: var(--couleur-fond-alt);
border: 2px solid var(--couleur-bordure);
border-radius: var(--rayon-bordure);
padding: var(--espacement-lg);
margin: var(--espacement-xl) 0 var(--espacement-xxl) 0;
}

#TOC::before, nav#TOC::before {
content: "Table des matières";
display: block;
font-size: 1.2em;
font-weight: 700;
color: var(--couleur-primaire);
margin-bottom: var(--espacement-md);
padding-bottom: var(--espacement-sm);
border-bottom: 2px solid var(--couleur-bordure);
}

#TOC ul, nav#TOC ul {
list-style-type: none;
margin-left: 0;
}

#TOC > ul, nav#TOC > ul {
margin-left: 0;
}

#TOC li, nav#TOC li {
margin-bottom: var(--espacement-sm);
}

#TOC ul ul, nav#TOC ul ul {
margin-left: var(--espacement-lg);
margin-top: var(--espacement-xs);
}

#TOC a, nav#TOC a {
color: var(--couleur-texte);
text-decoration: none;
display: block;
padding: var(--espacement-xs) 0;
transition: all 0.2s ease;
}

#TOC a:hover, nav#TOC a:hover {
color: var(--couleur-secondaire);
padding-left: var(--espacement-xs);
border-bottom: none;
}

/* === CONTENEURS DIV ET SPAN === */
div {
    margin-bottom: var(--espacement-md);
}

/* Line blocks (poésie) */
.line-block {
    margin: var(--espacement-lg) 0;
    padding-left: var(--espacement-lg);
    border-left: 3px solid var(--couleur-bordure);
    font-family: var(--police-titre);
    line-height: 1.8;
}

/* Classes utilitaires communes */
.center, .centre {
    text-align: center;
}

.right, .droite {
    text-align: right;
}

.left, .gauche {
    text-align: left;
}

.justify {
    text-align: justify;
}

/* Conteneurs avec classes personnalisées */
.note, .info {
    background-color: #d1ecf1;
    border-left: 4px solid #0c5460;
    padding: var(--espacement-md);
    margin: var(--espacement-lg) 0;
    border-radius: var(--rayon-bordure);
}

.warning, .attention {
    background-color: #fff3cd;
    border-left: 4px solid #856404;
    padding: var(--espacement-md);
    margin: var(--espacement-lg) 0;
    border-radius: var(--rayon-bordure);
}

.error, .danger {
    background-color: #f8d7da;
    border-left: 4px solid #721c24;
    padding: var(--espacement-md);
    margin: var(--espacement-lg) 0;
    border-radius: var(--rayon-bordure);
}

.success {
    background-color: #d4edda;
    border-left: 4px solid #155724;
    padding: var(--espacement-md);
    margin: var(--espacement-lg) 0;
    border-radius: var(--rayon-bordure);
}

/* === MÉTADONNÉES DOCUMENT === */

/* Titre du document */
header.title-block-header {
    text-align: center;
    margin-bottom: var(--espacement-xxl);
    padding-bottom: var(--espacement-xl);
    border-bottom: 3px solid var(--couleur-primaire);
}

.title {
    font-size: 2.5rem;
    color: var(--couleur-primaire);
    margin-bottom: var(--espacement-md);
}

.subtitle {
    font-size: 1.5rem;
    color: var(--couleur-texte-clair);
    font-style: italic;
    margin-bottom: var(--espacement-md);
}

.author {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--espacement-sm);
}

.date {
    font-size: 0.95rem;
    color: var(--couleur-texte-clair);
    font-style: italic;
}

/* === ACCESSIBILITÉ === */

/* Focus visible pour navigation clavier */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--couleur-secondaire);
    outline-offset: 2px;
}

/* Saut de contenu pour lecteurs d'écran */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--couleur-primaire);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* === RESPONSIVE === */

/* Tablettes */
@media (max-width: 768px) {
    :root {
        font-size: 15px;
    }

    body {
        padding: var(--espacement-lg) var(--espacement-md);
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    ul, ol {
        margin-left: var(--espacement-lg);
    }

    blockquote {
        padding: var(--espacement-sm) var(--espacement-md);
    }

    pre {
        font-size: 0.85em;
        padding: var(--espacement-sm);
    }

    #TOC, nav#TOC {
    padding: var(--espacement-md);
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        font-size: 14px;
    }

    body {
        padding: var(--espacement-md) var(--espacement-sm);
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    ul, ol {
        margin-left: var(--espacement-md);
    }

    table {
        font-size: 0.8em;
    }

    pre {
        font-size: 0.8em;
    }

    img.left, img.gauche,
    img.right, img.droite {
        float: none;
        margin: var(--espacement-md) auto;
    }
}

/* === IMPRESSION === */
@media print {
    body {
        max-width: 100%;
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: #000;
    }

    img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    pre, blockquote, table {
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    #TOC, nav#TOC {
    border: 1px solid #000;
    }

    .footnotes {
        page-break-before: always;
    }
}

/* === THÈME SOMBRE (optionnel) === */
@media (prefers-color-scheme: dark) {
    :root {
        --couleur-primaire: #5dade2;
        --couleur-secondaire: #85c1e9;
        --couleur-accent: #ec7063;
        --couleur-texte: #e8e8e8;
        --couleur-texte-clair: #b0b0b0;
        --couleur-fond: #1e1e1e;
        --couleur-fond-alt: #2a2a2a;
        --couleur-bordure: #404040;
        --couleur-code-fond: #2a2a2a;
        --couleur-code-bordure: #404040;
    }

    img {
        opacity: 0.9;
    }

    thead {
        background-color: #2c3e50;
    }

    tbody tr:nth-child(even) {
        background-color: #2a2a2a;
    }

    tbody tr:hover {
        background-color: #333333;
    }

    .note, .info {
        background-color: #1a3a3a;
        border-left-color: #5dade2;
    }

    .warning, .attention {
        background-color: #3a3a1a;
        border-left-color: #f39c12;
    }

    .error, .danger {
        background-color: #3a1a1a;
        border-left-color: #ec7063;
    }

    .success {
        background-color: #1a3a1a;
        border-left-color: #52be80;
    }
}