/*
 * Marin template — white page, navy double-line motif, single column.
 * Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid: floats /
 * tables / block layout only, so the two renderers agree.
 *
 * Palette: navy #1e40af (every rule, section label, company name and level
 * dot), ink #17202e for titles, #374151 body, #6b7280 secondary. The navy is a
 * fixed design color (not the user's settings.accentColor), so tpl_dots is
 * called with a null accent and the dots inherit .cv-dot-on's navy.
 *
 * The identity motif is a DOUBLE RULE: every section label sits between two 1px
 * navy lines ~26px apart, drawn as border-top + border-bottom on a single-cell
 * table's <td> (mPDF renders no CSS generated content at all, so ::before/after
 * rules are not an option, and td borders span the full column width however the
 * label wraps). The header closes with the same pair compressed to 4px apart.
 *
 * Body is a single column that flows directly in the page (not a layout table)
 * so mPDF can paginate between blocks; this template is multipage:true, so there
 * are NO fixed heights anywhere and inter-block spacing is margin-TOP only (a
 * margin-bottom on a repeated page-break-inside: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 unless the stack pins a face mPDF embeds. 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: 38px 0 38px 0;
}
@page :first {
    margin-top: 0;
}

.resume-page.resume-marin {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 38px 56px 0;        /* zero bottom padding: real trailing space opens a blank final page in mPDF (multipage) */
    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
   section band, every entry row and the skills/languages grids are tables here,
   so the font must be declared at td level too. No-op in the browser. */
.resume-marin td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #374151;
}

/* ---- header -------------------------------------------------------------- */
/* Two cells: 95px circle photo left, identity right. */
.resume-marin table.cv-head {
    width: 100%;
    border-collapse: collapse;
}
.resume-marin td.cv-head-photo {
    width: 118px;
    padding: 0;
    vertical-align: middle;
}
.resume-marin td.cv-head-id {
    padding: 0;
    vertical-align: middle;
}
.resume-marin .cv-photo,
.resume-marin .cv-photo-initials {
    display: block;
}
/* Identity lines are ROWS, not margin-stacked blocks: mPDF drops block
   margins/padding inside a table cell, so the vertical rhythm is td padding
   (which mPDF does honor). */
.resume-marin table.cv-id {
    width: 100%;
    border-collapse: collapse;
}
.resume-marin table.cv-id td {
    padding: 0;
}
.resume-marin td.cv-id-title {
    padding-top: 5px;
}
.resume-marin td.cv-id-contact {
    padding-top: 8px;
}
.resume-marin .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #17202e;
    letter-spacing: 0.2px;
    line-height: 1.15;
    margin: 0;
}
.resume-marin .cv-jobtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #1e40af;
}
.resume-marin .cv-contact {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.6;
}
/* Keeps a value from being split from its neighbours' separators at a wrap. */
.resume-marin .cv-contact-item {
    white-space: nowrap;
}
.resume-marin .cv-contact-sep {
    color: #9ca3af;
}
/* The double rule closing the header: one 4px-high cell carrying the same
   border pair as a section band, so the two navy lines sit 4px apart. The
   &nbsp; in the cell keeps mPDF from collapsing the row; the 1px font-size
   keeps that space from growing it. */
.resume-marin table.cv-head-rule {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}
.resume-marin table.cv-head-rule td {
    height: 4px;
    line-height: 4px;
    font-size: 1px;
    padding: 0;
    border-top: 1px solid #1e40af;
    border-bottom: 1px solid #1e40af;
}

/* ---- sections ------------------------------------------------------------ */
/* No bottom margins anywhere: the inter-section gap is .cv-sec-head's own
   margin-top, so nothing can reserve trailing space at the end of the flow. */
.resume-marin .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-marin .is-last {
    margin-bottom: 0;
}

/* Section head: the label between two navy rules. page-break-after:avoid lives
   on this div (a block) rather than on the band <table>, because mPDF floods
   BlockTag warnings when page-break-after is applied to a table. */
.resume-marin .cv-sec-head {
    margin-top: 19px;
    page-break-inside: avoid;
    page-break-after: avoid;
}
.resume-marin table.cv-sec-band {
    width: 100%;
    border-collapse: collapse;
}
/* 5px + ~16px label + 5px = the ~26px gap between the two rules. Padding, not
   margin: block margins inside a <td> are dropped by mPDF. */
.resume-marin table.cv-sec-band td {
    padding: 5px 0;
    border-top: 1px solid #1e40af;
    border-bottom: 1px solid #1e40af;
}
.resume-marin .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #1e40af;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    line-height: 1.2;
    margin: 0;
}

/* ---- 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-marin .cv-section-head-group {
    page-break-inside: avoid;
}

.resume-marin .cv-summary {
    margin-top: 10px;
    color: #374151;
    line-height: 1.55;
    text-align: left;
}

/* ---- 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-marin .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-marin .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-marin .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-marin .cv-row-main {
    text-align: left;
}
/* No white-space:nowrap here: a long French date range ("septembre 2017 –
   décembre 2020") is wider than this column anyway, so nowrap wouldn't hold it
   on one line — and a nowrap cell can scale a whole layout table down in mPDF.
   The column is widened instead so most ranges fit unwrapped. */
.resume-marin .cv-row-side {
    text-align: right;
    width: 31%;
}
.resume-marin .cv-item-title {
    font-weight: bold;
    color: #17202e;
}
.resume-marin .cv-item-org {
    color: #1e40af;
}
.resume-marin .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-marin .cv-sep-comma {
    margin-left: -4px;
}
.resume-marin .cv-item-field {
    color: #4b5563;
}
.resume-marin .cv-item-loc {
    font-size: 11.5px;
    color: #6b7280;
}
.resume-marin .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #6b7280;
}
.resume-marin .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-marin .cv-bullets {
    margin: 5px 0 0;
    padding-left: 0;
    list-style: none;
}
.resume-marin .cv-bullets li {
    position: relative;
    padding-left: 14px;
    text-indent: -14px;
    margin-bottom: 2px;
    color: #374151;
    font-size: 13px;
}
.resume-marin .cv-bk {
    color: #1e40af;
    margin-right: 5px;
}

/* ---- skills: two-column grid table (pdf) --------------------------------- */
.resume-marin .cv-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 9px;
}
.resume-marin .cv-grid-col {
    width: 50%;
    vertical-align: top;
    padding: 0 12px 4px 0;
    font-size: 13px;
}

/* ---- languages: one row per language, navy dots -------------------------- */
.resume-marin table.cv-langtable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 9px;
}
.resume-marin table.cv-langtable td {
    padding: 0 0 3px;
    vertical-align: top;
}
.resume-marin td.cv-lang-name {
    width: 34%;
    color: #17202e;
}
.resume-marin td.cv-lang-level {
    color: #4b5563;
}
/* 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-marin .cv-level {
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
}
.resume-marin .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-marin .cv-dot-on {
    color: #1e40af;
}
.resume-marin .cv-dot-off {
    color: #cbd5e1;
}

/* =====================================================================
 * Edit-mode affordances (browser only — these elements are never
 * emitted in pdf mode, so none of this reaches mPDF).
 * ===================================================================== */

.resume-marin [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b4bcc8;
    font-style: italic;
    pointer-events: none;
}
.resume-marin [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-marin [contenteditable]:hover {
    box-shadow: 0 0 0 1px #c7d2fe;
}
.resume-marin [contenteditable]:focus {
    box-shadow: 0 0 0 2px #1e40af;
    background: #f8fafc;
}
.resume-marin .cv-contact [contenteditable] {
    display: inline-block;
    min-width: 40px;
}

/* Skills tag list (edit mode only — pdf mode renders the .cv-grid table). */
.resume-marin .cv-taglist {
    margin-top: 9px;
    font-size: 13px;
}
.resume-marin .cv-tag {
    display: inline-block;
    margin: 0 6px 5px 0;
    padding: 2px 8px;
    border: 1px solid #dbe2ef;
    border-radius: 3px;
    white-space: nowrap;
}

.resume-marin .cv-langs {
    margin-top: 9px;
}
.resume-marin .cv-lang-line {
    position: relative;
    margin-top: 2px;
}
.resume-marin .cv-lang-name {
    color: #17202e;
}
.resume-marin .cv-lang-sep {
    color: #9ca3af;
}

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

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

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

.resume-marin .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-marin .cv-tag:hover .cv-tag-x {
    opacity: 1;
}

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