/* =====================================================================================================================
   Documents — A4 pages to print or export to PDF (procedures, attestations, product presentations). Optional, linked
   after css/components.css instead of css/app.css. Uses tokens only. A document page is always light:
   <html lang="fr" data-theme="light"> — paper never follows the system's dark setting.

   Screen: a 210mm sheet on a sunken background. Print: the sheet is the page. Page 1 shows .doc__header (the logo);
   every next page gets a running header, and every page a footer with « n / N », from the @page margin boxes.
   Margin boxes only print text (Chromium paints no image there), so their text comes from three custom properties set
   once on <html style="…">: --doc-title, --doc-ref and --doc-footer (on screen, --doc-footer ends the sheet).
   With js/document.js, a screen wide enough for a sheet shows the print layout itself: A4 pages, as they print.
   ===================================================================================================================== */

/* The page context inherits from the root element: this gives the margin boxes (page number) the body font. */
:root:has(body.document) {
    font-family: var(--font-sans);
    color: var(--text-muted);
}

body.document {
    background: var(--surface-sunken);
}

/* The sheet ------------------------------------------------------------------------------------------------------- */

.doc {
    display: flex;
    flex-direction: column;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: var(--space-8) auto;
    padding: 18mm 18mm 14mm;
    background: var(--brand-paper);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.doc h1 { font-size: var(--text-3xl); }
.doc h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
.doc h3 { font-size: var(--text-lg); margin-top: var(--space-4); }
.doc p, .doc ul, .doc ol { margin-bottom: var(--space-3); }

.doc__body {
    flex: 1;
}

/* Running header: logo left, document title / reference right */
.doc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-6);
    border-bottom: 2px solid var(--brand-green);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.doc__header img {
    height: 9mm;
    width: auto;
}

.doc__header-meta {
    text-align: right;
}

/* Footer on screen: --doc-footer at the bottom of the sheet (print uses the margin boxes instead) */
.doc::after {
    content: var(--doc-footer, "MasterIT · masterit.fr");
    padding-top: var(--space-2);
    margin-top: var(--space-6);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Cover block: first page title area */
.doc-cover {
    padding: var(--space-8) 0 var(--space-6);
}

/* Compact cover: forms and letters, where the text must start on page 1 */
.doc-cover--compact { padding: var(--space-2) 0 var(--space-3); }
.doc-cover--compact h1 { font-size: var(--text-2xl); }
.doc-cover--compact p { margin-bottom: 0; }

.doc-cover__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-4);
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
}

.doc-cover__meta dt { color: var(--text-muted); }
.doc-cover__meta dd { margin: 0; font-weight: var(--weight-medium); }

/* Signature box: a blank area to sign by hand */
.doc-sign {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

.doc-sign__box {
    min-height: 30mm;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* A blank line to fill in by hand (« Nom : ______ ») */
.doc-field {
    display: inline-block;
    min-width: 12em;
    border-bottom: 1px dotted var(--text-muted);
}

/* With a hint inside (« NOM Prénom »): the hint stays readable but light, to be replaced or written over */
.doc-field:not(:empty) {
    min-width: 0;
    padding: 0 var(--space-6) 0 var(--space-1);
    background: var(--surface-sunken);
    font-size: 0.85em;
    color: var(--text-muted);
}

/* A whole blank line to write on (lists, free text) */
.doc-field--line {
    display: block;
    min-height: 1.75em;
}

/* Source / legal reference line, at the end of the document */
.doc-source {
    margin-top: var(--space-6);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* A list that completes a sentence of a form (« les fonctionnalités suivantes : ») */
.doc-scope {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-6);
}

.doc-scope li { margin-bottom: var(--space-1); }

/* Footnotes: « (1) … » under a short rule */
.doc-notes {
    margin: var(--space-4) 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    max-width: 100%;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.doc-notes p { margin-bottom: var(--space-1); }

/* An optional paragraph the author may keep or drop (the model's [ … ] mention) */
.doc-optional {
    padding-left: var(--space-3);
    border-left: 2px dashed var(--border);
    color: var(--text-muted);
}

/* Procedure steps: <ol class="doc-steps"><li class="doc-step"><h3>…</h3><p>…</p> [figure.doc-shot | .code-block]</li> */
.doc-steps {
    counter-reset: doc-step;
    list-style: none;
    margin: var(--space-4) 0;
    padding: 0;
}

.doc-step {
    counter-increment: doc-step;
    position: relative;
    padding: 0 0 var(--space-4) calc(2.25rem + var(--space-4));
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.doc-step:last-child { border-bottom: 0; }

.doc-step::before {
    content: counter(doc-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--accent-text);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
}

.doc-step > h3 {
    margin: var(--space-1) 0 var(--space-2);
}

.doc-step .code-block,
.doc-step .alert {
    margin: var(--space-3) 0;
}

/* Row variant: short steps side by side (brochures), number above the title; one column on phones */
@media (min-width: 30rem) {
    .doc-steps--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

.doc-steps--row .doc-step {
    padding: calc(2.25rem + var(--space-2)) 0 0;
    margin: 0;
    border: 0;
}

.doc-steps--row .doc-step p { margin: 0; }

/* Screenshot with its caption */
.doc-shot {
    margin: var(--space-3) 0;
}

.doc-shot img {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.doc-shot figcaption {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Screenshots side by side (brochures); stacked on phones */
.doc-shots {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-3) 0;
}

@media (min-width: 30rem) {
    .doc-shots { grid-template-columns: 1fr 1fr; }
}

.doc-shots .doc-shot { margin: 0; }

/* Checklist ticked by hand (prerequisites, acceptance) */
.doc-checklist {
    list-style: none;
    margin: var(--space-3) 0;
    padding: 0;
}

.doc-checklist li {
    position: relative;
    padding-left: calc(1rem + var(--space-3));
    margin-bottom: var(--space-2);
}

.doc-checklist li::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--text-muted);
    border-radius: var(--radius-sm);
}

/* Brochure: brand band, feature grid, contact block (product presentations) --------------------------------------- */

/* Full width of the sheet (cancels .doc's side padding on screen; in print the page margins frame it) */
.doc-hero {
    margin: 0 -18mm var(--space-6);
    padding: var(--space-8) 18mm;
    background: var(--gradient-brand);
    color: var(--on-brand);
}

.doc-hero h1 {
    margin: var(--space-4) 0 var(--space-3);
    color: var(--on-brand);
}

.doc-hero p {
    max-width: 38em;
    margin: 0;
    font-size: var(--text-base);
}

/* Leaf + product name + « by MasterIT », in white: leaf-mono.svg as a mask (DS-12: mono logo on the green band) */
.doc-hero__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
}

.doc-hero__leaf {
    width: 1.4rem;
    aspect-ratio: 122.9 / 198.8;
    background: currentColor;
    -webkit-mask: url("../assets/logo/leaf-mono.svg") center / contain no-repeat;
    mask: url("../assets/logo/leaf-mono.svg") center / contain no-repeat;
}

.doc-hero__by {
    padding-left: var(--space-2);
    border-left: 1px solid currentColor;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
}

/* Key benefits: big figure or word + one line */
.doc-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0 var(--space-6);
}

.doc-benefits strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--accent);
}

/* Feature grid: compact cards, 2 columns from 30rem */
.doc-features {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-6);
}

@media (min-width: 30rem) {
    .doc-features { grid-template-columns: 1fr 1fr; }
    .doc-shots { grid-template-columns: 1fr 1fr; }
    .doc-steps--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
    .doc-steps--row .doc-step { padding: calc(1.75rem + var(--space-2)) 0 0; }
}

.doc-features .card {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    box-shadow: none;
}

.doc-features .card__icon { flex: none; width: 2.25rem; height: 2.25rem; }
.doc-features .card__title { font-size: var(--text-base); margin-bottom: var(--space-1); }
.doc-features .card__text { margin: 0; font-size: var(--text-sm); }

/* Closing contact block */
.doc-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
}

.doc-contact h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.doc-contact p { margin: 0; }

/* Page-break helpers (no effect on screen) */
.doc-break { break-before: page; }
.doc-keep { break-inside: avoid; }   /* also applied to tables, figures, alerts in print */

/* Narrow screens: the sheet shrinks, margins follow */
@media (max-width: 48rem) {
    .doc-hero { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }

    .doc {
        min-height: 0;
        margin: 0;
        padding: var(--space-6) var(--space-4);
    }
}

/* A4 preview (js/document.js): Paged.js lays the sheet out in pages, using the print rules below on screen too. It drops
   width media queries (hence the brochure grids repeated under @media print) and keeps a block only if its media list
   names `pagedjs-ignore`: this one frames the pages on screen and never prints. */
@media screen, pagedjs-ignore {
    :root body.document {
        background: var(--surface-sunken);
    }

    .pagedjs_pages {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-8);
        padding: var(--space-8) 0;
    }

    .pagedjs_page {
        background: var(--brand-paper);
        box-shadow: var(--shadow);
    }
}

/* Print ----------------------------------------------------------------------------------------------------------- */

@page {
    size: A4;
    margin: 22mm 18mm 18mm;
    /* Margin boxes can't be grouped with commas: each one is written out */
    @top-left     { content: var(--doc-title, ""); font-size: 8pt; vertical-align: bottom; padding-bottom: 2mm; border-bottom: 2px solid var(--brand-green); }
    @top-center   { content: "";                    vertical-align: bottom; padding-bottom: 2mm; border-bottom: 2px solid var(--brand-green); }
    @top-right    { content: var(--doc-ref, "");   font-size: 8pt; vertical-align: bottom; padding-bottom: 2mm; border-bottom: 2px solid var(--brand-green); }
    @bottom-left  { content: var(--doc-footer, "MasterIT · masterit.fr"); font-size: 8pt; vertical-align: top; padding-top: 3mm; }
    @bottom-right { content: counter(page) " / " counter(pages);           font-size: 8pt; vertical-align: top; padding-top: 3mm; }
}

/* Page 1 carries .doc__header with the logo: no running header there */
@page :first {
    @top-left   { content: none; border: 0; }
    @top-center { content: none; border: 0; }
    @top-right  { content: none; border: 0; }
}

@media print {
    body.document {
        background: none;
    }

    .doc {
        display: block;
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
        font-size: 10pt;
    }

    .doc::after { content: none; }

    /* Brochure: the band keeps the page margins; blocks never split */
    .doc-hero { margin: 0 0 var(--space-6); padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); }
    .doc-features, .doc-shots { grid-template-columns: 1fr 1fr; }
    .doc-steps--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
    .doc-steps--row .doc-step { padding: calc(1.75rem + var(--space-2)) 0 0; }
    .doc-hero, .doc-benefits, .doc-features .card, .doc-contact { break-inside: avoid; }

    /* Dense: forms whose every part must fit its page (attestations) */
    .doc--dense { font-size: 9pt; }
    .doc--dense h2 { margin-top: var(--space-4); }
    .doc--dense .doc-sign { margin: var(--space-3) 0; }
    .doc--dense .doc-sign__box { min-height: 20mm; }
    .doc--dense .alert { padding-block: var(--space-2); margin-block: var(--space-2); }
    .doc--dense .doc-notes { margin: var(--space-2) 0; }
    .doc--dense .doc-notes p { margin: 0; }
    .doc--dense .doc-cover--compact { padding-top: 0; }
    .doc--dense .doc__header { margin-bottom: var(--space-3); }
    .doc--dense h1 { font-size: 15pt; }
    .doc--dense p, .doc--dense .doc-scope { margin-bottom: var(--space-2); }
    .doc--dense .doc-scope li { margin-bottom: 0; }

    .doc h2, .doc h3 { break-after: avoid; }
    .doc table, .doc figure, .doc .alert, .doc .code-block, .doc-keep, .doc-sign, .doc-step, .doc-checklist, .doc-notes { break-inside: avoid; }
    .doc-step { padding-left: calc(1.75rem + var(--space-3)); }
    .doc-step::before { width: 1.75rem; height: 1.75rem; font-size: 9pt; }

    /* Paper can't scroll: long commands wrap, screenshots stay a third of a page at most */
    .doc .code-block pre { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
    .doc-shot img { width: auto; max-width: 100%; max-height: 80mm; }

    /* Keep brand fills and alert tints in the PDF */
    .doc * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .doc a { color: inherit; text-decoration: none; }
    .skip-link, [data-theme-toggle] { display: none; }
}