/*
 * Céladon template — centered identity over a full-bleed pale-green photo
 * strip, then a single column.
 * 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: celadon #15803d (title, section labels, dates, dot gauge, glyphs),
 * strip #dcfce7, deep ink #14532d (name, entry titles), body #3f4a44, muted
 * #6b7c73. These are fixed design colors, never the user's
 * settings.accentColor — a saturated accent would fight the strip — so
 * tpl_dots is called with a null accent and the dots inherit .cv-dot-on's
 * green, tpl_icon takes the fixed green, and the photo helper is handed a data
 * copy whose accentColor is overridden.
 *
 * THE PAGE HAS NO HORIZONTAL PADDING: that is what lets the strip bleed to
 * both sheet edges (PdfService renders at zero page margins). The identity
 * block, the contact line and the body each carry their own 56px side padding
 * instead.
 *
 * 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 in the body 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).
 * The strip's 130px height is header-only — page 1 chrome, never part of the
 * flowing body — so it cannot pad or clip a later page.
 *
 * 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: 34px 0 34px 0;
}
@page :first {
    margin-top: 0;
}

.resume-page.resume-celadon {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 34px 0 0;           /* no side padding (full-bleed strip); zero bottom padding — real trailing space opens a blank final page in mPDF (multipage) */
    background: #ffffff;
    color: #3f4a44;
    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 strip, the photo
   slot, the section rules and every entry row are tables here, so the font must
   be declared at td level too. No-op in the browser. */
.resume-celadon td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #3f4a44;
}

/* ---- header: name / title, strip, contact — all centered ------------------ */
.resume-celadon .cv-id {
    padding: 0 56px;
    text-align: center;
}
.resume-celadon .cv-name {
    font-size: 28px;
    font-weight: bold;
    color: #14532d;
    letter-spacing: 0.4px;
    line-height: 1.2;
    margin: 0;
}
.resume-celadon .cv-jobtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #15803d;
    margin: 7px 0 0;
}

/* The strip: a single-cell table, the fill on the <td>. mPDF paints a cell
   background as ONE contiguous rect spanning the full cell width, while a
   <div> background behind content paints one rect per rendered line. Padding
   stays at 0 so the declared height is unambiguous in both renderers, and
   vertical-align centers the portrait in the 130px band. */
.resume-celadon table.cv-strip {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 0;
}
.resume-celadon td.cv-strip-cell {
    height: 130px;
    padding: 0;
    background: #dcfce7;
    vertical-align: middle;
}
/* Portrait slot: a shrink-to-width nested table centered with `margin: 0 auto`
   — the centering primitive mPDF honors for tables. text-align on the strip
   cell cannot do it: tpl_photo emits display:block in an inline style that no
   stylesheet rule can outrank. */
.resume-celadon table.cv-photo-wrap {
    border-collapse: collapse;
    margin: 0 auto;
}
.resume-celadon table.cv-photo-wrap td {
    padding: 0;
    text-align: center;
}
/* 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-celadon .cv-photo,
.resume-celadon .cv-photo-initials {
    display: block;
    margin: 0 auto;
}

.resume-celadon .cv-contact-wrap {
    padding: 0 56px;
    text-align: center;
}
.resume-celadon .cv-contact {
    font-size: 11px;
    color: #6b7c73;
    line-height: 1.7;
    margin: 13px 0 0;
}
/* Second contact line (the two links) sits tight under the first. */
.resume-celadon .cv-contact.cv-contact--links {
    margin-top: 1px;
}
/* Keeps a value from being split from its glyph or its neighbours' separators
   at a wrap. */
.resume-celadon .cv-contact-item {
    white-space: nowrap;
}
.resume-celadon .cv-contact-sep {
    color: #a7c3b1;
}
.resume-celadon .cv-icon {
    display: inline-block;
    color: #15803d;
}
.resume-celadon .cv-icon.cv-icon-linkedin {
    color: #ffffff;
    padding: 0 3px;
    font-size: 9px;
}

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

/* Section head: centered 13px green label over a short 26px rule. Kept
   together as one block so a page break can never land between the label and
   its rule; page-break-after:avoid lives on this div (a block) rather than on
   the rule <table>, because mPDF floods BlockTag warnings when page-break-after
   is applied to a table. */
.resume-celadon .cv-sec-head {
    text-align: center;
    page-break-inside: avoid;
    page-break-after: avoid;
}
.resume-celadon .cv-sec-title {
    font-size: 13px;
    font-weight: bold;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    line-height: 1.3;
    margin: 20px 0 0;
}
/* The 26px rule: a single-cell table drawn with the <td>'s BORDER, not a cell
   background, and centered with `margin: 0 auto` (the centering primitive mPDF
   honors for tables — a bordered div would stretch to the full column width
   instead). The border is load-bearing: this cell sits inside .cv-sec-head,
   which is page-break-inside:avoid, and a filled cell inside an avoid block is
   painted during mPDF's trial pass and flushed onto the page when that pass
   hits AddPage — so moving the head to the next page leaves the fill behind as
   a GHOST rule at the foot of the previous one (seen directly in this
   template's first _long.json export, at the page 2->3 boundary). Borders and
   images travel with the block; fills do not. The &nbsp; in the cell keeps
   mPDF from collapsing the empty row, and the zeroed font metrics keep it from
   adding height of its own. */
.resume-celadon table.cv-sec-rule {
    width: 26px;
    border-collapse: collapse;
    margin: 8px auto 0;
}
.resume-celadon table.cv-sec-rule td {
    width: 26px;
    border-top: 2px solid #15803d;
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    padding: 0;
}

/* ---- section head group (multipage: keep the head with its first entry) ----
 * page-break-after:avoid on the label 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-celadon .cv-section-head-group {
    page-break-inside: avoid;
}

.resume-celadon .cv-summary {
    margin-top: 10px;
    color: #46524b;
    line-height: 1.55;
    text-align: left;      /* ragged-right, never justify (mPDF spacing artifacts) */
}

/* ---- entries: standard alignment, only the heads above are centered ------- */
/* 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-celadon .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-celadon .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-celadon .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-celadon .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-celadon .cv-row-side {
    text-align: right;
    width: 31%;
}
.resume-celadon .cv-item-title {
    font-weight: bold;
    color: #14532d;
}
.resume-celadon .cv-item-org {
    color: #4b5c52;
}
/* Literal separators are real HTML text in the markup (mPDF renders no CSS
   generated content at all); this only colors them. */
.resume-celadon .cv-item-sep {
    color: #8fa397;
}
/* 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-celadon .cv-sep-comma {
    margin-left: -4px;
}
.resume-celadon .cv-item-field {
    color: #4b5c52;
}
.resume-celadon .cv-item-loc {
    font-size: 11.5px;
    color: #8fa397;
}
.resume-celadon .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #15803d;
}
.resume-celadon .cv-item-details {
    margin-top: 3px;
    font-size: 12.5px;
    color: #4b5c52;
}

/* 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-celadon .cv-bullets {
    margin: 4px 0 0;
    padding-left: 0;
    list-style: none;
}
.resume-celadon .cv-bullets li {
    position: relative;
    padding-left: 14px;
    text-indent: -14px;
    margin-bottom: 2px;
    color: #46524b;
    font-size: 13px;
}
.resume-celadon .cv-bk {
    color: #15803d;
    margin-right: 6px;
}

/* ---- skills: one centered comma run -------------------------------------- */
.resume-celadon .cv-skills-run {
    margin-top: 10px;
    text-align: center;
    color: #46524b;
    line-height: 1.7;
}
.resume-celadon .cv-run-sep {
    color: #8fa397;
}

/* ---- languages: centered "Name — level" lines ---------------------------- */
.resume-celadon .cv-langs {
    margin-top: 10px;
    text-align: center;
}
.resume-celadon .cv-lang-line {
    position: relative;
    page-break-inside: avoid;
    margin-top: 2px;
}
.resume-celadon .cv-lang-name {
    color: #14532d;
}
.resume-celadon .cv-lang-sep {
    color: #a7c3b1;
}
/* 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-celadon .cv-level {
    font-size: 12px;
    color: #6b7c73;
    white-space: nowrap;
}
.resume-celadon .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-celadon .cv-dot-on {
    color: #15803d;
}
.resume-celadon .cv-dot-off {
    color: #bbf7d0;
}

/* =====================================================================
 * 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-celadon [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #a9bcaf;
    font-style: italic;
    pointer-events: none;
}
.resume-celadon [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-celadon [contenteditable]:hover {
    box-shadow: 0 0 0 1px #cfe8d8;
}
.resume-celadon [contenteditable]:focus {
    box-shadow: 0 0 0 2px #15803d;
    background: #f6fdf8;
}
.resume-celadon .cv-contact [contenteditable] {
    display: inline-block;
    min-width: 40px;
}

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

.resume-celadon .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px dashed #cfe8d8;
    background: #ffffff;
    color: #15803d;
    border-radius: 4px;
    cursor: pointer;
}
.resume-celadon .cv-add:hover {
    background: #f0fdf4;
    border-color: #15803d;
}
.resume-celadon .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

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

.resume-celadon .cv-dot-btn,
.resume-celadon .cv-level-toggle {
    font-family: inherit;
    border: none;
    background: none;
    padding: 0 1px;
    cursor: pointer;
    font-size: 10px;
}
.resume-celadon .cv-dot-btn.cv-dot-on {
    color: #15803d;
}
.resume-celadon .cv-dot-btn.cv-dot-off {
    color: #bbf7d0;
}
.resume-celadon .cv-level-toggle {
    font-size: 9px;
    color: #8fa397;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-celadon .cv-skill:hover .cv-level-toggle,
.resume-celadon .cv-lang-line:hover .cv-level-toggle {
    opacity: 1;
}