/* Feuille de style commune à toutes les fiches. Aucune ressource externe. */

:root {
    --bg: #fbfaf7;
    --surface: #ffffff;
    --text: #1f2328;
    --muted: #59636e;
    --border: #d9d6cf;
    --accent: #1d5fa8;
    --accent-soft: #e6eef8;
    --code-bg: #f3f1ec;
    --warn: #9a4d00;
    --warn-soft: #fbf0e3;
    --ok: #1b6b3a;
    --ok-soft: #e5f3ea;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #16181c;
        --surface: #1d2025;
        --text: #e6e8eb;
        --muted: #a2abb5;
        --border: #363b43;
        --accent: #7fb3ec;
        --accent-soft: #1e2b3b;
        --code-bg: #22262c;
        --warn: #f0b072;
        --warn-soft: #33281d;
        --ok: #7fd3a0;
        --ok-soft: #1b2e23;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #16181c;
    --surface: #1d2025;
    --text: #e6e8eb;
    --muted: #a2abb5;
    --border: #363b43;
    --accent: #7fb3ec;
    --accent-soft: #1e2b3b;
    --code-bg: #22262c;
    --warn: #f0b072;
    --warn-soft: #33281d;
    --ok: #7fd3a0;
    --ok-soft: #1b2e23;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 1.0625rem/1.65 var(--font);
    -webkit-text-size-adjust: 100%;
}

main {
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

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

/* En-tête de fiche */

.sheet-header {
    border-bottom: 2px solid var(--text);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

.sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.sheet-number {
    background: var(--text);
    color: var(--bg);
    font-weight: 700;
    padding: 0.1rem 0.6rem;
    border-radius: 0.25rem;
}

h1 {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.subtitle {
    font-size: 1.15rem;
    color: var(--muted);
    margin: 0;
}

h2 {
    font-size: 1.45rem;
    line-height: 1.25;
    margin: 2.75rem 0 0.75rem;
    padding-top: 0.25rem;
}

h2 .num {
    color: var(--accent);
    margin-right: 0.35rem;
}

h3 {
    font-size: 1.1rem;
    margin: 1.75rem 0 0.5rem;
}

p, ul, ol {
    margin: 0 0 1rem;
}

li + li {
    margin-top: 0.3rem;
}

/* Code */

code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--code-bg);
    padding: 0.1em 0.3em;
    border-radius: 0.2rem;
    /* Un long chemin de fichier passe à la ligne plutôt que de déborder sur mobile */
    overflow-wrap: anywhere;
}

figure {
    margin: 0 0 1.25rem;
}

figure.code + figure.output {
    margin-top: -0.75rem;
}

figcaption {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--muted);
    padding: 0.35rem 0.75rem;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 0.35rem 0.35rem 0 0;
}

pre {
    margin: 0;
    padding: 0.85rem 0.9rem;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 0 0 0.35rem 0.35rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.5;
    tab-size: 4;
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    overflow-wrap: normal;
}

/* Dans un tableau, qui défile déjà dans son cadre, le code ne se coupe pas */
td code {
    overflow-wrap: normal;
}

/* Bloc de code sans légende (pas un exemple exécuté) */
main > pre {
    border-radius: 0.35rem;
    margin-bottom: 1rem;
}

figure.output figcaption,
figure.output pre {
    background: var(--surface);
}

figure.output figcaption {
    color: var(--ok);
}

/* Encadrés */

.callout {
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    padding: 0.85rem 1rem;
    margin: 0 0 1.25rem;
    border-radius: 0 0.35rem 0.35rem 0;
}

.callout > :last-child {
    margin-bottom: 0;
}

.callout.when {
    border-color: var(--ok);
    background: var(--ok-soft);
}

.callout.security {
    border-color: var(--warn);
    background: var(--warn-soft);
}

.callout-title {
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

/* Tableaux : défilement horizontal dans leur cadre, jamais la page */

.table-wrap {
    overflow-x: auto;
    margin: 0 0 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.93rem;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

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

th {
    background: var(--code-bg);
}

td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Checklist */

.checklist {
    list-style: none;
    padding-left: 0;
}

.checklist li {
    padding-left: 1.75rem;
    position: relative;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.3em;
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid var(--muted);
    border-radius: 0.2rem;
}

/* Sommaire */

.toc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
}

.toc-title {
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.toc ol {
    margin: 0;
    padding-left: 1.5rem;
}

.toc-extra {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid var(--border);
}

/* Le lien vers le sommaire général ne sert que dans la colonne fixe */
.toc-home {
    display: none;
}

h2, h3 {
    scroll-margin-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Grand écran : le sommaire devient une colonne fixe à gauche, visible pendant le défilement */
@media (min-width: 72rem) {
    :root {
        --sidebar-width: 15rem;
        --sidebar-gap: 3rem;
        /* Bord gauche de l'ensemble « colonne + texte » (15 + 3 + 50 rem), centré */
        --layout-left: max(1.5rem, calc((100vw - 68rem) / 2));
    }

    main:has(> .toc) {
        margin-left: calc(var(--layout-left) + var(--sidebar-width) + var(--sidebar-gap));
        margin-right: auto;
    }

    main:has(> .toc) > .back {
        display: none;
    }

    .toc {
        position: fixed;
        top: 0;
        left: var(--layout-left);
        width: var(--sidebar-width);
        max-height: 100vh;
        overflow-y: auto;
        margin: 0;
        padding: 2rem 0.5rem 2rem 0;
        background: none;
        border: none;
        border-radius: 0;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .toc-home {
        display: block;
        margin-bottom: 1.5rem;
    }

    .toc ol {
        padding-left: 1.4rem;
    }

    .toc a {
        color: var(--muted);
        text-decoration: none;
    }

    .toc a:hover,
    .toc a:focus-visible {
        color: var(--accent);
        text-decoration: underline;
    }

    /* Section en cours de lecture, marquée par assets/toc.js */
    .toc a[aria-current] {
        color: var(--accent);
        font-weight: 700;
    }
}

.series {
    list-style: none;
    padding: 0;
}

.series li {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.series .n {
    font-weight: 700;
    min-width: 1.75rem;
    color: var(--muted);
}

.series .soon {
    color: var(--muted);
}

.back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.sheet-footer {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.9rem;
}

/* Impression A4 : enregistrer en PDF depuis le navigateur */

@page {
    size: A4;
    margin: 16mm 15mm 18mm;
}

@media print {
    :root {
        --bg: #ffffff;
        --surface: #ffffff;
        --text: #000000;
        --muted: #444444;
        --border: #bbbbbb;
        --accent: #1d5fa8;
        --accent-soft: #eef3fa;
        --code-bg: #f5f5f5;
        --warn-soft: #fbf3ea;
        --ok-soft: #eef7f1;
        color-scheme: light;
    }

    body {
        font-size: 10.5pt;
        line-height: 1.5;
    }

    main {
        max-width: none;
        padding: 0;
    }

    .back, .toc {
        display: none;
    }

    h2 {
        margin-top: 1.5rem;
    }

    h2, h3, figcaption, .callout-title {
        break-after: avoid;
    }

    /* Un long bloc de code peut se couper : sinon il laisse une demi-page vide */
    figure.output, .callout, tr, .checklist li {
        break-inside: avoid;
    }

    pre {
        orphans: 4;
        widows: 4;
    }

    /* Un encadré qui contient un exemple est trop haut pour rester d'un bloc */
    .callout:has(figure) {
        break-inside: auto;
    }

    /* À l'impression, le code passe à la ligne au lieu de déborder */
    pre {
        overflow: visible;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font-size: 8pt;
    }

    .table-wrap {
        overflow: visible;
    }

    a {
        color: inherit;
    }

    .links a::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: var(--muted);
        overflow-wrap: anywhere;
    }
}

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Petits écrans : le code passe à la ligne, pour ne pas cacher les commentaires */
@media (max-width: 40rem) {
    pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font-size: 0.75rem;
        padding: 0.75rem;
    }

    table {
        font-size: 0.85rem;
    }

    th, td {
        padding: 0.45rem 0.55rem;
    }
}

/* Un schéma en texte ne doit jamais passer à la ligne : il défile dans son cadre */
pre.diagram {
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* Une sortie de programme est du texte : elle passe à la ligne plutôt que de déborder */
figure.output pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Un tableau de résultats SQL garde ses colonnes alignées : il défile au lieu de passer à la ligne */
figure.output pre.result-table {
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

@media print {
    /* Les résultats SQL sont souvent longs : ils peuvent se couper entre deux pages */
    figure.output:has(pre.result-table) {
        break-inside: auto;
    }
}

/* Schémas en SVG, insérés par le marqueur <!-- schema: … -->.
   Leurs couleurs viennent des variables du thème : clair, sombre et impression. */
figure.schema {
    margin: 0 0 1.5rem;
    padding: 0.75rem 0.75rem 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    scroll-margin-top: 1rem;
}

figure.schema .schema-scroll {
    overflow-x: auto;
}

figure.schema svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--font);
    font-size: 13px;
}

figure.schema figcaption {
    padding: 0.5rem 0 0.25rem;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 0.85rem;
    color: var(--muted);
}

figure.schema figcaption strong {
    color: var(--text);
}

/* Sur un petit écran, le schéma garde une taille lisible et défile dans son cadre */
@media (max-width: 40rem) {
    figure.schema svg {
        min-width: 540px;
    }
}

.d-box { fill: var(--bg); stroke: var(--border); stroke-width: 1.5; }
.d-group { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 6 4; }
.d-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.d-warn { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1.5; }
.d-ok { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 1.5; }
.d-text { fill: var(--text); }
.d-muted { fill: var(--muted); font-size: 12px; }
.d-strong { fill: var(--text); font-weight: 700; }
.d-code { fill: var(--text); font-family: var(--mono); font-size: 11.5px; }
.d-warn-text { fill: var(--warn); font-weight: 700; }
.d-ok-text { fill: var(--ok); font-weight: 700; }
.d-accent-text { fill: var(--accent); font-weight: 700; }
.d-line { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.d-line-accent { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.d-line-warn { fill: none; stroke: var(--warn); stroke-width: 1.8; }
.d-line-ok { fill: none; stroke: var(--ok); stroke-width: 1.8; }
.d-dashed { stroke-dasharray: 5 4; }
.d-life { stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 4 4; }
.d-head { fill: var(--muted); }
.d-head-accent { fill: var(--accent); }
.d-head-warn { fill: var(--warn); }
.d-head-ok { fill: var(--ok); }

/* La liste des schémas dans le sommaire */
.toc-figures {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid var(--border);
}

@media print {
    figure.schema {
        break-inside: avoid;
    }
}