/*
 * Sauge template — split header (white identity block left, sage photo/contact
 * block right) over a single-column body.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid, no
 * transforms: floats / tables / block layout only, so the two renderers agree.
 *
 * Palette: olive #4d7c0f (section labels, ticks, company names, glyphs, level
 * dots), deep leaf #1a2e05 for names/entry titles, sage #ecfccb for the header
 * block, #365314 for the contact text on that sage. The olive/sage pair is a
 * fixed design decision, not the user's settings.accentColor (a user accent
 * would clash with the sage), so tpl_dots is called with a null accent and the
 * dots inherit .cv-dot-on's olive.
 *
 * The sage block is a header <td> background: a cell background paints one
 * contiguous rect at the full height the row resolves to, so the block matches
 * a variable-length summary in the cell beside it. A <div> background would
 * paint one rect per rendered text line instead (skill §5).
 *
 * Section-title underlines are a 22px fixed-width rule TABLE (border-top on its
 * cell) — a heading's own border-bottom shrinks to the text width and is
 * dropped inside a <td>, and CSS generated content never renders in mPDF at all.
 *
 * multipage:true — no fixed heights anywhere, every entry block is
 * page-break-inside:avoid, and inter-block spacing is margin-TOP only (a
 * margin-bottom on a repeated avoid block double-counts in mPDF's pagination
 * estimate and opens a blank trailing page).
 *
 * Font stacks lead with a DejaVu face: mPDF substitutes Arial/Helvetica with
 * DejaVu *Condensed* (no bold face), so bold weights would silently export as
 * regular otherwise. Every bold below is the KEYWORD `bold`, never a numeric
 * 600/700 (mPDF ignores numeric weights).
 */

/* ---- page margins (multi-page) ---------------------------------------- *
 * PdfService gives mPDF margin_* = 0, so a PDF's only vertical margin is
 * this wrapper's own padding — and a wrapper's padding-top lands on page 1
 * alone, leaving every later page hard against the sheet edge.
 *
 * @page restores an identical margin on every page; `@page :first` zeroes
 * the top one so page 1 keeps using the wrapper padding it always had and
 * its output is unchanged. Left/right stay 0 — the wrapper's horizontal
 * padding already applies to every page. Inert in the browser (@page is
 * print-only), and builder.js reads these same values back out of CSSOM
 * so its page-count model matches what mPDF actually does. */
@page {
    margin: 40px 0 40px 0;
}
@page :first {
    margin-top: 0;
}

.resume-page.resume-sauge {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 0;                  /* the header band is full-bleed; the body carries its own side padding */
    background: #ffffff;
    color: #374151;
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
}
/* mPDF does NOT inherit font-family/size into table cells — anything inside a
   <td> silently falls back to the serif document default. The header, every
   entry row, the section titles and the skills/languages block are all tables
   here, so the font must be declared at td level too. No-op in the browser.
   Rules that override color inside a specific cell are ordered after this. */
.resume-sauge td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #374151;
}

/* ---- split header: identity 62% | sage block 38% ------------------------- */
.resume-sauge table.cv-head {
    width: 100%;
    border-collapse: collapse;
}
.resume-sauge td.cv-head-main {
    width: 62%;
    vertical-align: top;
    padding: 40px 28px 34px 56px;
}
/* The sage block. Background on the <td> itself (full-height contiguous paint);
   the insets are this cell's own padding, since block padding inside a cell is
   dropped by mPDF. */
.resume-sauge td.cv-head-side {
    width: 38%;
    vertical-align: top;
    padding: 34px 40px 34px 30px;
    background: #ecfccb;
}
/* Identity lines are ROWS of a nested table, not margin-stacked blocks: mPDF
   drops block margins inside a cell, so the vertical rhythm is td padding. */
.resume-sauge table.cv-id {
    width: 100%;
    border-collapse: collapse;
}
.resume-sauge table.cv-id td {
    padding: 0;
}
.resume-sauge td.cv-id-title {
    padding-top: 7px;
}
.resume-sauge td.cv-id-summary {
    padding-top: 15px;
}
.resume-sauge .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #1a2e05;
    letter-spacing: 0.2px;
    line-height: 1.15;
    margin: 0;
}
.resume-sauge .cv-jobtitle {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: #4d7c0f;
}
/* Ragged-right, never justify (mPDF spacing artifacts). */
.resume-sauge .cv-summary {
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.55;
    text-align: left;
}

/* Sage-block stack: photo, then the contact lines. */
.resume-sauge table.cv-side-stack {
    width: 100%;
    border-collapse: collapse;
}
.resume-sauge table.cv-side-stack > tr > td,
.resume-sauge table.cv-side-stack td {
    padding: 0;
    background: transparent;
}
.resume-sauge td.cv-side-photo {
    text-align: center;
}
/* 100px circle, centred. Auto margins on the block image (the classic-template
   technique) plus text-align:center on the cell as a hedge. No border-radius
   here: tpl_photo emits it inline, and mPDF rounds nothing via CSS anyway. */
.resume-sauge .cv-photo,
.resume-sauge .cv-photo-initials {
    display: block;
    margin: 0 auto;
}
.resume-sauge td.cv-side-contact {
    padding-top: 20px;
}
/* One single-cell table per contact line — block margins are dropped inside a
   cell, a nested table's margin is honored. */
.resume-sauge table.cv-contact-line {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 5px;
}
.resume-sauge table.cv-contact-line td {
    padding: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #365314;
}
.resume-sauge .cv-icon {
    display: inline-block;
    color: #4d7c0f;
}
.resume-sauge .cv-icon.cv-icon-linkedin {
    color: #ffffff;
    padding: 0 3px;
    font-size: 9px;
}

/* ---- body ---------------------------------------------------------------- */
/* Side padding lives here so the header band above can reach both page edges.
   Zero bottom padding: real trailing space opens a blank final page in mPDF. */
.resume-sauge .cv-body {
    padding: 6px 56px 0;
}
/* No bottom margins anywhere: the inter-section gap is the section title's own
   margin-top, so nothing reserves trailing space at the end of the flow. */
.resume-sauge .cv-section {
    margin: 0;
}
/* pdf mode: mPDF doesn't reliably honor :last-child, so the server marks
   whichever section/item renders last with this plain class instead. Unscoped
   on purpose — it applies to whichever element carries it. Belt-and-braces
   here, since spacing is margin-top only. */
.resume-sauge .is-last {
    margin-bottom: 0;
}

/* ---- section titles: olive label + 22px olive tick ----------------------- */
/* The page-break rules live on this div (a block); mPDF floods BlockTag
   warnings when page-break-after is applied to a table. */
.resume-sauge .cv-sec-head {
    page-break-inside: avoid;
    page-break-after: avoid;
}
/* Both gaps sit on the inner TABLE, not on the avoid div above: a nested
   table's margin is the one spacing primitive honored both in the body flow and
   inside a <td> (the skills/languages cells reuse this markup). */
.resume-sauge table.cv-sec-head-t {
    width: 100%;
    border-collapse: collapse;
    margin: 19px 0 9px;
}
.resume-sauge table.cv-sec-head-t > tr > td,
.resume-sauge table.cv-sec-head-t td {
    padding: 0;
}
.resume-sauge .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #4d7c0f;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.2;
    margin: 0;
}
/* The tick: a 22px-wide cell carrying a 2px border-top. font-size/line-height
   1px keep the &nbsp; inside it from growing the row. */
.resume-sauge table.cv-sec-rule {
    border-collapse: collapse;
    table-layout: fixed;
    width: 22px;
    margin: 5px 0 0;
}
.resume-sauge table.cv-sec-rule td {
    width: 22px;
    padding: 0;
    font-size: 1px;
    line-height: 1px;
    border-top: 2px solid #4d7c0f;
}

/* ---- section head group (multipage: keep the head with its first entry) ----
 * page-break-after:avoid on the title alone is not reliable in mPDF — the
 * page-break-inside:avoid here is what actually holds the head and its first
 * entry together on one page. */
.resume-sauge .cv-section-head-group {
    page-break-inside: avoid;
}

/* ---- entries ------------------------------------------------------------- */
/* Inter-entry spacing is an UNCONDITIONAL margin-top on every entry (never
   margin-bottom, which double-counts in mPDF's pagination estimate; and never a
   conditional first-item override, which revives that same blank page when two
   avoid blocks nest). */
.resume-sauge .cv-item {
    position: relative;
    page-break-inside: avoid;
    margin-top: 11px;
}
/* Two-column "title left / dates right" via table (mPDF-safe, no float — a
   float inside a page-break-inside:avoid block makes mPDF miscalculate the
   block height and duplicate content). */
.resume-sauge .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-sauge .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-sauge .cv-row-main {
    text-align: left;
}
/* No white-space:nowrap: a long French range ("septembre 2017 – décembre 2020")
   is wider than this column anyway, and a nowrap cell can scale a whole layout
   table down in mPDF. The column is widened instead. */
.resume-sauge .cv-row-side {
    text-align: right;
    width: 31%;
}
.resume-sauge .cv-item-title {
    font-weight: bold;
    color: #1a2e05;
}
.resume-sauge .cv-item-org {
    color: #4d7c0f;
}
.resume-sauge .cv-item-sep {
    color: #9ca3af;
}
/* edit mode only: the comma between an editable school and field sits on its
   own source line, so it pulls back over that newline's rendered space. In pdf
   mode the comma is emitted glued inside the school span and never uses this. */
.resume-sauge .cv-sep-comma {
    margin-left: -4px;
}
.resume-sauge .cv-item-field {
    color: #4b5563;
}
.resume-sauge .cv-item-loc {
    font-size: 11.5px;
    color: #6b7280;
}
.resume-sauge .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #6b7280;
}
.resume-sauge .cv-item-details {
    margin-top: 3px;
    font-size: 12.5px;
    color: #4b5563;
}

/* Bullets: native <ul>/<li> with a real • marker span and a hanging indent
   (padding-left + negative text-indent). Native list items let mPDF estimate
   the enclosing avoid block's height accurately, and the marker is real HTML
   text — a CSS content: marker renders nothing at all in mPDF. */
.resume-sauge .cv-bullets {
    margin: 5px 0 0;
    padding-left: 0;
    list-style: none;
}
.resume-sauge .cv-bullets li {
    position: relative;
    padding-left: 14px;
    text-indent: -14px;
    margin-bottom: 2px;
    color: #374151;
    font-size: 13px;
}
.resume-sauge .cv-bk {
    color: #4d7c0f;
    margin-right: 5px;
}

/* ---- skills + languages, side by side ------------------------------------
 * In pdf mode this table is built one <tr> PER LINE (both titles and the first
 * item of each column share row 0). A section rendered as one tall <tr> can be
 * dropped outright from a multipage export when it doesn't fit the space left
 * on the page — one row per line always gives mPDF a break point. */
.resume-sauge table.cv-duo {
    width: 100%;
    border-collapse: collapse;
}
.resume-sauge td.cv-duo-l {
    width: 58%;
    vertical-align: top;
    padding: 0 20px 3px 0;
    font-size: 13px;
}
.resume-sauge td.cv-duo-r {
    width: 42%;
    vertical-align: top;
    padding: 0 0 3px;
    font-size: 13px;
}
.resume-sauge .cv-lang-name {
    color: #1a2e05;
}
.resume-sauge .cv-lang-sep {
    color: #9ca3af;
}
/* Full-width fallback grid, used when only one of the two sections has content
   (mPDF cannot pack repeated floats into rows and supports no CSS columns). */
.resume-sauge table.cv-grid {
    width: 100%;
    border-collapse: collapse;
}
.resume-sauge td.cv-grid-col {
    width: 50%;
    vertical-align: top;
    padding: 0 14px 4px 0;
    font-size: 13px;
}
/* The level slot holds EITHER dot glyphs or free text (tpl_dots passes text
   through untouched), so the tracking that spaces the dots apart lives on the
   dots themselves — otherwise a written level like "C1 - Autonome" exports as
   letterspaced small type. */
.resume-sauge .cv-level {
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
}
.resume-sauge .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-sauge .cv-dot-on {
    color: #4d7c0f;
}
.resume-sauge .cv-dot-off {
    color: #cbd5b5;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never
 * emitted in pdf mode, so none of this reaches mPDF).
 * Every [contenteditable]/[data-ph] rule stays at ONE level below the page
 * class: mPDF can't parse those chunks and applies the declaration to a
 * two-or-more-level prefix instead, repainting whatever pdf-mode element that
 * prefix names (confirmed on graphite, 2026-07).
 * ===================================================================== */

.resume-sauge [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b0bda3;
    font-style: italic;
    pointer-events: none;
}
.resume-sauge [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-sauge [contenteditable]:hover {
    box-shadow: 0 0 0 1px #d9f99d;
}
.resume-sauge [contenteditable]:focus {
    box-shadow: 0 0 0 2px #4d7c0f;
    background: #f7fee7;
}

/* Skills tag list (edit mode only — pdf mode renders one skill per table row). */
.resume-sauge .cv-taglist {
    font-size: 13px;
}
.resume-sauge .cv-tag {
    display: inline-block;
    margin: 0 6px 5px 0;
    padding: 2px 8px;
    border: 1px solid #dbe5cc;
    border-radius: 3px;
    white-space: nowrap;
}
.resume-sauge .cv-langs {
    font-size: 13px;
}
.resume-sauge .cv-lang-line {
    position: relative;
    margin-bottom: 3px;
}

.resume-sauge .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-sauge .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.resume-sauge .cv-item:hover > .edit-controls,
.resume-sauge .cv-lang-line:hover > .edit-controls,
.resume-sauge .cv-bullets li:hover > .edit-controls,
.resume-sauge .edit-controls:hover {
    opacity: 1;
}
.resume-sauge .edit-controls button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #dbe5cc;
    background: #ffffff;
    color: #3f4a37;
    border-radius: 3px;
    cursor: pointer;
}
.resume-sauge .edit-controls button:hover {
    background: #4d7c0f;
    border-color: #4d7c0f;
    color: #fff;
}

.resume-sauge .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px dashed #c3d99a;
    background: #ffffff;
    color: #4d7c0f;
    border-radius: 4px;
    cursor: pointer;
}
.resume-sauge .cv-add:hover {
    background: #f7fee7;
    border-color: #4d7c0f;
}
.resume-sauge .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

.resume-sauge .cv-current {
    display: block;
    font-family: inherit;
    font-size: 11px;
    font-weight: normal;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    cursor: pointer;
}
.resume-sauge .cv-current input {
    vertical-align: middle;
}

.resume-sauge .cv-tag-x {
    font-family: inherit;
    border: none;
    background: none;
    color: #b00;
    cursor: pointer;
    padding: 0 0 0 3px;
    opacity: 0;
    font-size: 13px;
}
.resume-sauge .cv-tag:hover .cv-tag-x {
    opacity: 1;
}

.resume-sauge .cv-dot-btn,
.resume-sauge .cv-level-toggle {
    font-family: inherit;
    border: none;
    background: none;
    padding: 0 1px;
    cursor: pointer;
    font-size: 10px;
}
.resume-sauge .cv-dot-btn.cv-dot-on {
    color: #4d7c0f;
}
.resume-sauge .cv-dot-btn.cv-dot-off {
    color: #cbd5b5;
}
.resume-sauge .cv-level-toggle {
    font-size: 9px;
    color: #94a3b8;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-sauge .cv-tag:hover .cv-level-toggle,
.resume-sauge .cv-lang-line:hover .cv-level-toggle {
    opacity: 1;
}