/*
 * Brume template — two-column body (62/38) with fog-grey rules that CROSS the
 * gutter at every left-column section boundary.
 * 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: slate #64748b (section labels, contact, dates, dot gauge, glyphs),
 * ink #1e293b (name, entry titles), body #334155, rules #cbd5e1. The fog greys
 * are a fixed design decision, not the user's settings.accentColor — a
 * saturated accent would break the grey continuity the template is built on —
 * so tpl_dots/tpl_icon take the fixed slate and the photo helper receives a
 * data copy whose accentColor is overridden.
 *
 * The body is ONE page-spanning table. Each left-column section is a <tbody>
 * band opening with a colspan=2 rule row: as a real table row the rule paints
 * edge to edge across BOTH columns, which a <div> border (confined to its own
 * column) could never do. Inside a band there is one <tr> PER ENTRY — a <tr>
 * holding a whole section does not paginate in mPDF, it silently shrinks the
 * table's font until it fits (see brume.php's structure note) — and the band's
 * first row carries the section title, its first entry and the right column's
 * sections together, which is what keeps a title from being orphaned at a page
 * foot. That row-level grouping replaces the usual .cv-section-head-group
 * wrapper; a <tr> is already atomic in mPDF.
 *
 * SPACING RULE for this file: every gap is either a <td>'s own padding or a
 * nested table cell's padding. Block margins are dropped inside a <td> by
 * mPDF, and item-level margin-bottom on repeated page-break-inside:avoid
 * blocks double-counts in its pagination estimate and opens a blank trailing
 * page — neither failure mode can occur when no block carries a margin at all.
 *
 * multipage:true — no fixed heights anywhere; pagination happens at the <tr>
 * boundary after every entry.
 *
 * Font stacks lead with 'DejaVu Sans': mPDF substitutes Arial/Helvetica with
 * DejaVu *Condensed* (which has 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 entirely).
 */

/* ---- 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-brume {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 0;                  /* header and body carry their own side padding */
    background: #ffffff;
    color: #334155;
    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. In this template
   every scrap of content lives in a cell, so the td-level declaration is what
   actually styles the page. No-op in the browser, which inherits normally. */
.resume-brume td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #334155;
    vertical-align: top;
}

/* ---- header: photo | name + title | contact ------------------------------ */
.resume-brume .cv-header {
    padding: 31px 56px 0;
}
.resume-brume table.cv-head {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume td.cv-head-photo {
    width: 90px;
    vertical-align: middle;
    padding: 0;
}
.resume-brume td.cv-head-id {
    vertical-align: middle;
    padding: 0 24px;
}
.resume-brume td.cv-head-contact {
    width: 33%;
    vertical-align: middle;
    text-align: right;
    padding: 0;
}
/* No border-radius here: tpl_photo emits the circle inline, and the pdf-mode
   initials fallback is a GD-drawn PNG (mPDF rounds nothing via CSS anyway). */
.resume-brume .cv-photo,
.resume-brume .cv-photo-initials {
    display: block;
}
.resume-brume .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #1e293b;
    letter-spacing: 0.2px;
    line-height: 1.15;
    margin: 0;
}
/* The name -> title gap is this nested table cell's padding, not a block
   margin (dropped inside a <td>). */
.resume-brume table.cv-jobtitle-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume table.cv-jobtitle-row td {
    padding: 7px 0 0;
}
.resume-brume .cv-jobtitle {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #64748b;
    line-height: 1.4;
}
/* One single-cell table per contact line — same reason as above. */
.resume-brume table.cv-contact-line {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume table.cv-contact-line td {
    padding: 0 0 3px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #64748b;
    text-align: right;
}
.resume-brume .cv-icon {
    display: inline-block;
    color: #64748b;
}
.resume-brume .cv-icon.cv-icon-linkedin {
    color: #ffffff;
    padding: 0 3px;
    font-size: 9px;
}

/* ---- body: one page-spanning table --------------------------------------- */
.resume-brume .cv-body {
    padding: 0 56px;
}
.resume-brume table.cv-body-t {
    width: 100%;
    border-collapse: collapse;
}
/* The gutter-crossing rule. A colspan=2 row so the line spans both columns;
   the padding-top is the air ABOVE the line (a border-bottom sits below the
   cell's padding box), and the next band's cells supply the air below it. */
.resume-brume td.cv-rule-cell {
    border-bottom: 1px solid #cbd5e1;
    padding: 13px 0 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}
/* Column split: 62/38 with the gutter cut out of the left cell's padding.
   The uniform padding-top is BOTH the air under a rule and the gap between
   two entry rows, so no block in this template needs a margin. */
.resume-brume td.cv-col-l {
    width: 64%;
    padding: 9px 27px 0 0;
}
.resume-brume td.cv-col-r {
    width: 36%;
    padding: 9px 0 0;
}
/* pdf mode: mPDF doesn't honor :last-child, so the server marks the band that
   actually renders last with this plain class. Unscoped on purpose — it
   applies to whichever element carries it. Belt-and-braces: nothing in this
   file sets a bottom margin in the first place. */
.resume-brume .is-last {
    margin-bottom: 0;
}

/* ---- section labels: 12px uppercase slate, identical in both columns ------
 * page-break-after lives on this div, never on a table (mPDF floods BlockTag
 * warnings when it is applied to one). */
.resume-brume .cv-sec-head {
    page-break-inside: avoid;
    page-break-after: avoid;
}
.resume-brume table.cv-sec-head-t {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume table.cv-sec-head-t td {
    padding: 0 0 5px;
}
/* Right-column sections after the first in a band get their separation here
   (a server-added class — :first-child is unreliable in mPDF). */
.resume-brume table.cv-sec-head-t--gap td {
    padding-top: 20px;
}
.resume-brume .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    line-height: 1.3;
    margin: 0;
}

/* Ragged-right, never justify (mPDF spacing artifacts). */
.resume-brume .cv-summary {
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    text-align: left;
}

/* ---- left-column entries -------------------------------------------------- */
.resume-brume table.cv-item {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: avoid;
}
.resume-brume td.cv-item-cell {
    position: relative;
    padding: 0;
}
/* 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-brume table.cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume table.cv-row td {
    padding: 0;
}
.resume-brume td.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 one nowrap cell can scale a whole
   layout table down in mPDF. The column is widened instead. */
.resume-brume td.cv-row-side {
    text-align: right;
    width: 34%;
}
.resume-brume .cv-item-title {
    font-weight: bold;
    color: #1e293b;
}
.resume-brume .cv-item-org {
    color: #475569;
}
/* Literal separators are real HTML text in the markup (mPDF renders no CSS
   generated content at all); this only colors them. */
.resume-brume .cv-sep {
    color: #94a3b8;
}
/* edit mode only: the comma between two editable spans 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 preceding span and never uses this. */
.resume-brume .cv-sep-comma {
    margin-left: -4px;
}
.resume-brume .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #64748b;
}
.resume-brume .cv-item-loc {
    font-size: 11.5px;
    color: #94a3b8;
}
.resume-brume .cv-item-details {
    font-size: 12.5px;
    color: #475569;
}

/* Bullets: two-cell tables (marker cell + text cell). An <li> hanging indent
   collapses inside a <td>, and the marker is real HTML text — a CSS content:
   marker renders nothing at all in mPDF. */
.resume-brume table.cv-bullet {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume td.cv-bullet-mk {
    width: 13px;
    padding: 2px 0 0;
    color: #94a3b8;
    font-size: 12px;
}
.resume-brume td.cv-bullet-tx {
    position: relative;
    padding: 2px 0 0;
    font-size: 13px;
    color: #334155;
}

/* ---- right column --------------------------------------------------------- */
.resume-brume table.cv-r-item {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume table.cv-r-item td {
    position: relative;
    padding: 8px 0 0;
}
.resume-brume .cv-r-title {
    font-size: 13px;
    font-weight: bold;
    color: #1e293b;
}
.resume-brume .cv-r-org {
    font-size: 12.5px;
    color: #475569;
}
.resume-brume .cv-r-meta {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #64748b;
}
.resume-brume .cv-r-note {
    font-size: 11.5px;
    color: #94a3b8;
}
/* Skills: a plain one-per-line list, no level gauge (the gauge is reserved for
   languages, so the narrow column reads clean). */
.resume-brume table.cv-r-line {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume table.cv-r-line td {
    position: relative;
    padding: 2px 0 0;
    font-size: 13px;
    color: #334155;
}
.resume-brume table.cv-lang {
    width: 100%;
    border-collapse: collapse;
}
.resume-brume td.cv-lang-n {
    position: relative;
    padding: 5px 0 0;
    font-size: 13px;
    color: #334155;
}
.resume-brume td.cv-lang-l {
    padding: 5px 0 0;
    width: 52%;
    text-align: right;
}
/* 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-brume .cv-level {
    font-size: 12px;
    color: #64748b;
}
.resume-brume .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-brume .cv-dot-on {
    color: #64748b;
}
.resume-brume .cv-dot-off {
    color: #e2e8f0;
}

/* =====================================================================
 * 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-brume [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b4bfcc;
    font-style: italic;
    pointer-events: none;
}
.resume-brume [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-brume [contenteditable]:hover {
    box-shadow: 0 0 0 1px #dbe3ec;
}
.resume-brume [contenteditable]:focus {
    box-shadow: 0 0 0 2px #64748b;
    background: #f8fafc;
}

.resume-brume .edit-controls {
    position: absolute;
    top: -2px;
    right: -46px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-brume .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.resume-brume .cv-item-cell:hover > .edit-controls,
.resume-brume .cv-bullet-tx:hover > .edit-controls,
.resume-brume .cv-r-item td:hover > .edit-controls,
.resume-brume .cv-r-line td:hover > .edit-controls,
.resume-brume .cv-lang-n:hover > .edit-controls,
.resume-brume .edit-controls:hover {
    opacity: 1;
}
.resume-brume .edit-controls button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #475569;
    border-radius: 3px;
    cursor: pointer;
}
.resume-brume .edit-controls button:hover {
    background: #64748b;
    border-color: #64748b;
    color: #ffffff;
}

.resume-brume .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px dashed #cbd5e1;
    background: #ffffff;
    color: #64748b;
    border-radius: 4px;
    cursor: pointer;
}
.resume-brume .cv-add:hover {
    background: #f8fafc;
    border-color: #64748b;
}
.resume-brume .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

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