/* Rapport imprimable — A4 portrait, pensé pour une lecture par un financeur. */

:root {
    --ink: #14181C;
    --ink-2: #5A6472;
    --line: #DDE2E9;
    --accent: #0F4C3A;
    --accent-2: #1C7256;
    --accent-soft: #E9F2EE;
    --ocre: #B36A24;
    --ocre-soft: #FBF0E3;
    --warn: #B3261E;
}

@page { size: A4 portrait; margin: 16mm 14mm 14mm; }

* { box-sizing: border-box; }

body {
    margin: 0; background: #f0f1f4; color: var(--ink);
    font: 11pt/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------- toolbar */

.toolbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 11px 20px; background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line); font-size: 13px;
}
.toolbar .retour {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent); text-decoration: none; font-weight: 600;
    padding: 8px 12px; border-radius: 8px;
}
.toolbar .retour:hover { background: var(--accent-soft); }
.toolbar span { color: var(--ink-2); font-size: 12px; flex: 1; min-width: 220px; }
.toolbar span strong { color: var(--ink); }
.toolbar button {
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; font-size: 14px; font-weight: 650; padding: 10px 18px; border: none;
    border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 76, 58, .3);
}
.toolbar button:hover { background: #0B3B2D; }

/* ------------------------------------------------------ rapport exemple */

.bandeau-exemple {
    max-width: 210mm; margin: 18px auto -6px; padding: 14px 18px;
    background: var(--ocre-soft); border: 1px solid #EBD3B4;
    border-left: 4px solid var(--ocre); border-radius: 8px;
    font-size: 13.5px; line-height: 1.5; color: #6B4415;
}
.bandeau-exemple strong { color: #7A4A12; }
.bandeau-exemple em { font-style: normal; font-weight: 600; }
.bandeau-exemple a { color: var(--ocre); font-weight: 700; white-space: nowrap; }

.ruban-exemple {
    align-self: flex-start; margin: 8mm 0 0; padding: 3mm 6mm;
    background: var(--ocre); color: #fff; border-radius: 2mm;
    font-size: 10pt; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
}

/* Marquage discret mais présent sur chaque page du PDF exemple : il ne doit
   jamais pouvoir être confondu avec le dossier réel. */
.est-exemple .page { position: relative; }
.est-exemple .page::before {
    content: "Exemple — données fictives";
    position: absolute; top: 6mm; right: 14mm;
    color: var(--ocre); font-size: 8pt; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; opacity: .8;
}

/* ----------------------------------------------------------- pagination */

.page {
    width: 210mm; min-height: 297mm;
    margin: 18px auto; padding: 16mm 14mm;
    background: #fff; box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
    break-after: page;
}
.page:last-of-type { break-after: auto; }

/* ------------------------------------------------------------ couverture */

.cover { display: flex; flex-direction: column; }
.cover-top { border-bottom: 3px solid var(--accent); padding-bottom: 14px; }
.cover-marque {
    display: flex; align-items: center; gap: 9px; margin-bottom: 12mm;
}
.cover-marque span {
    font-size: 10pt; font-weight: 700; color: var(--ink-2);
    letter-spacing: .02em;
}
.eyebrow {
    margin: 0 0 6px; color: var(--ocre); font-size: 9.5pt;
    text-transform: uppercase; letter-spacing: .18em; font-weight: 700;
}
.cover h1 { margin: 0; font-size: 30pt; line-height: 1.08; letter-spacing: -.022em; }
.cover .sub { margin: 8px 0 0; color: var(--ink-2); font-size: 12.5pt; }

.cover-img {
    width: 100%; height: 78mm; object-fit: cover;
    margin: 12mm 0; border-radius: 3mm;
}

.cover-amount {
    background: linear-gradient(135deg, #0F4C3A 0%, #0B3B2D 100%);
    color: #fff; border-radius: 3mm;
    padding: 8mm; text-align: center; margin-bottom: 10mm;
    border-top: 3px solid var(--ocre);
}
.cover-amount span {
    display: block; font-size: 9.5pt; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 700; color: #A9CDBC;
}
.cover-amount strong {
    display: block; margin-top: 5px; font-size: 26pt; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

.cover-meta { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.cover-meta th, .cover-meta td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.cover-meta th { color: var(--ink-2); font-weight: 600; width: 24%; }
.cover-meta td { font-weight: 600; }
.cover-foot {
    margin-top: auto; padding-top: 10mm; color: var(--ink-2); font-size: 9.5pt;
    border-top: 1px solid var(--line);
}
.doc-foot { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------- titres */

.h-section {
    margin: 0 0 6mm; padding-bottom: 3mm;
    border-bottom: 2px solid var(--accent);
    font-size: 16pt; letter-spacing: -.01em;
}
.h-phase {
    display: flex; align-items: center; gap: 8px;
    margin: 8mm 0 3mm; padding: 6px 9px;
    background: var(--accent-soft); border-left: 3px solid var(--accent);
    border-radius: 0 1.5mm 1.5mm 0;
    font-size: 12pt; break-after: avoid;
}
.h-phase .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 5px;
    background: var(--accent); color: #fff; font-size: 9pt; font-weight: 700;
}
.h-phase .amount { margin-left: auto; font-variant-numeric: tabular-nums; }

.lead { color: var(--ink-2); font-size: 10.5pt; margin: 0 0 6mm; max-width: 62em; }
.muted { color: var(--ink-2); font-size: 9.5pt; }
.note { font-style: italic; }

/* --------------------------------------------------------------- tuiles */

.tiles { display: flex; gap: 4mm; margin-bottom: 8mm; }
.tile { flex: 1; border: 1px solid var(--line); border-radius: 2.5mm; padding: 5mm; }
.tile span { display: block; color: var(--ink-2); font-size: 9pt; text-transform: uppercase; letter-spacing: .05em; }
.tile strong { display: block; margin: 3px 0 2px; font-size: 15pt; font-variant-numeric: tabular-nums; }
.tile small { color: var(--ink-2); font-size: 9pt; }
.tile.major {
    background: linear-gradient(135deg, #0F4C3A, #0B3B2D);
    border-color: #0B3B2D; color: #fff;
}
.tile.major span, .tile.major small { color: #A9CDBC; }

/* -------------------------------------------------------------- tableaux */

.tbl { width: 100%; border-collapse: collapse; font-size: 10pt; margin-bottom: 6mm; }
.tbl caption {
    text-align: left; font-weight: 700; font-size: 11pt; padding-bottom: 3mm;
}
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th {
    font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-2); border-bottom: 1.5px solid var(--ink);
}
.tbl tfoot th, .tbl tfoot td {
    font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none;
    background: var(--accent-soft);
}
.tbl tbody tr:nth-child(even) td { background: #fafbfc; }
.tbl .sub-row td { font-style: italic; color: var(--ink-2); }
.r { text-align: right; }
.c { text-align: center; }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 700; }
.w-num { width: 8mm; }
.w-bar { width: 30mm; }

.bar {
    display: block; height: 6px; border-radius: 3px; min-width: 2px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.detail { margin-bottom: 4mm; break-inside: avoid; }
.detail .cat-row th {
    background: #f2f4f7; border-bottom: 1px solid var(--line);
    font-size: 10pt; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700;
}
.detail .cols th { font-size: 8pt; }
.phase-block { break-inside: avoid-page; }

.pill { display: inline-block; padding: 1.5px 8px; border-radius: 10px; font-size: 8pt; font-weight: 700; }
.pill.prevu  { background: #EEF1F5; color: var(--ink-2); }
.pill.engage { background: var(--ocre-soft); color: var(--ocre); }
.pill.paye   { background: var(--accent-soft); color: var(--accent); }

.callout {
    padding: 4mm 5mm; background: var(--accent-soft);
    border-left: 3px solid var(--accent); border-radius: 0 2mm 2mm 0; font-size: 10.5pt;
}
.callout.warn { background: #fdecea; border-color: var(--warn); }

/* ------------------------------------------------- le projet en images */

.vitrine-une { margin: 0 0 5mm; break-inside: avoid; }
.vitrine-une img {
    width: 100%; height: 95mm; object-fit: cover; display: block;
    border-radius: 2mm; background: #EEF1F5;
}
.vitrine-une figcaption { padding: 3mm 0 0; font-size: 10pt; }
.vitrine-une figcaption strong { display: block; font-size: 11.5pt; }
.vitrine-une figcaption span { color: var(--ink-2); }

.vitrine-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.vitrine-grille figure { margin: 0; break-inside: avoid; }
.vitrine-grille img {
    width: 100%; height: 52mm; object-fit: cover; display: block;
    border-radius: 2mm; background: #EEF1F5;
}
.vitrine-grille figcaption { padding: 2mm 0 0; font-size: 9.5pt; }
.vitrine-grille figcaption strong { display: block; }
.vitrine-grille figcaption span { color: var(--ink-2); }

.echeance { color: var(--ink-2); font-size: 9pt; white-space: nowrap; }

/* --------------------------------------------------------------- annexe */

.annexe-groupe { break-inside: avoid; margin-bottom: 8mm; }
.planches { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.planches figure { margin: 0; break-inside: avoid; border: 1px solid var(--line); border-radius: 2mm; overflow: hidden; }
.planches img { width: 100%; height: 62mm; object-fit: cover; display: block; }
.planches figcaption { padding: 3mm 4mm; font-size: 9.5pt; }
.planches figcaption strong { display: block; }
.planches figcaption span { color: var(--ink-2); }

.doc-foot {
    max-width: 210mm; margin: 0 auto 30px; padding: 0 14mm 20px;
    color: var(--ink-2); font-size: 9pt;
}

/* ------------------------- lecture à l'écran sur petit appareil -----------
   Le rapport reste strictement A4 à l'impression ; seule sa prévisualisation
   s'adapte à la largeur du téléphone pour éviter le défilement horizontal. */

@media screen and (max-width: 800px) {
    body { font-size: 10.5pt; }
    .page { width: auto; min-height: 0; margin: 10px; padding: 20px 16px; }
    .bandeau-exemple { margin: 10px; padding: 12px 14px; font-size: 13px; }
    .est-exemple .page::before { top: 8px; right: 12px; font-size: 7pt; }
    .ruban-exemple { font-size: 9pt; padding: 2mm 4mm; }
    .doc-foot { padding: 0 16px 20px; }
    .cover h1 { font-size: 22pt; }
    .cover-amount strong { font-size: 19pt; }
    .cover-img { height: 45mm; margin: 6mm 0; }
    .tiles { flex-direction: column; gap: 8px; }
    .planches { grid-template-columns: 1fr; }
    .planches img { height: 48mm; }
    .vitrine-grille { grid-template-columns: 1fr; }
    .vitrine-une img { height: 58mm; }
    .vitrine-grille img { height: 50mm; }
    .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .toolbar button { min-height: 46px; font-size: 15px; }
    .cover-meta, .cover-meta tbody, .cover-meta tr { display: block; }
    .cover-meta th, .cover-meta td { display: block; padding: 2px 0; }
    .cover-meta th { border: none; }
    .cover-meta td { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
    /* Les montants ne se coupent pas : plutôt que de déformer le tableau, on le
       rend défilable dans son propre cadre — la page, elle, ne défile jamais
       horizontalement. La mise en page A4 imprimée n'est pas affectée. */
    .tbl {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
        font-size: 9.5pt;
    }
    .tbl th, .tbl td { padding: 5px 3px; }
    /* La colonne « poids » est décorative : on la retire à l'écran étroit
       pour que le tableau tienne dans la largeur du téléphone. */
    .tbl .w-bar { display: none; }
    .tbl .w-num { width: 6mm; }
    .h-phase { flex-wrap: wrap; }
    .h-phase .amount { margin-left: 0; width: 100%; font-size: 10.5pt; }
    .cover-marque { margin-bottom: 8mm; }
    .cover h1 { letter-spacing: -.02em; }
}

/* ------------------------------------------------------------ impression */

@media print {
    body { background: #fff; }
    .no-print { display: none !important; }
    .page {
        width: auto; min-height: 0; margin: 0; padding: 0;
        box-shadow: none; break-after: page;
    }
    .doc-foot { padding: 0; margin: 0; }
    .h-section, .h-phase, .tbl caption { break-after: avoid; }
    .tbl thead { display: table-header-group; }
    .tbl tr { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}