/*
 * Émeraude template — deep-emerald statement header (~230px, the tallest
 * colored block in the catalog) over a 58/38 two-column white body. Shared by
 * browser (edit) and mPDF (pdf). No flexbox, no CSS grid, no transforms: every
 * column is a table cell, so the two renderers agree.
 *
 * The whole page is wrapped in one single-cell table (.cv-page). mPDF can only
 * break a table between <tr> rows, so a lone row has none — an overlong resume
 * is shrunk to fit one page instead of flowing, and the body can never be
 * dropped for not fitting the space the band left behind (skill §5). Hence
 * multipage:false in the registry.
 *
 * Everything on this page lives inside a <td>, so the in-td trap class
 * (2026-07 slate rework) governs the whole file: fonts are declared at td level
 * (mPDF does not inherit font-family/size into cells), every vertical gap is a
 * nested single-cell table's margin (block margins are dropped inside cells),
 * bold is always the `bold` keyword (mPDF ignores numeric weights), and the
 * bullet markers and skill bars are real cells with real glyphs/backgrounds
 * rather than CSS generated content or block borders (neither survives inside a
 * cell in mPDF).
 *
 * Font stacks lead with a DejaVu face: mPDF substitutes Arial with DejaVu Sans
 * *Condensed* regular — no bold face — so bold text would silently export at
 * regular weight without a face mPDF actually embeds. Serif is display-only
 * here (the name and the section titles), never body text.
 */

/* ---- 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-emeraude {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 0;                 /* the header band is full-bleed */
    background: #ffffff;
    color: #14201b;
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
}
/* mPDF does NOT inherit font-family/size/color into table cells — anything
   inside a <td> silently falls back to the serif document default. This
   template is tables all the way down, so the font must be declared at td level
   too. No-op in the browser, which inherits normally. */
.resume-emeraude td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #14201b;
}

/* ---- page wrapper ------------------------------------------------------- */
.resume-emeraude .cv-page {
    width: 794px;
    margin: 0;
    border-collapse: collapse;
}
.resume-emeraude .cv-page-cell {
    padding: 0;                 /* full-bleed band: no inset here */
    vertical-align: top;
}

/* ---- header band (full-bleed, ~230px, photo left) ----------------------- */
/* The background is ALSO set inline on the table and on both cells from
   settings.accentColor (emeraude.php). mPDF has dropped a band background that
   came from a CSS class only (ambre lesson), and a <div> background paints one
   rect per text line instead of spanning the band — a cell background paints as
   one contiguous rect. The value here is the fallback and what the browser
   shows if the inline value is ever absent. */
.resume-emeraude .cv-band {
    width: 794px;
    margin: 0;
    background: #065f46;
    border-collapse: collapse;
}
/* Font/color for every cell in the band, nested tables included (mPDF does not
   inherit into cells). Height and background are NOT declared here: `.cv-band
   td` is a descendant selector, so it would also hand the 230px height to each
   nested single-cell table inside the identity column — five stacked 230px
   rows, a band six times too tall (confirmed on a real export). Those two
   properties belong to the two band cells only. */
.resume-emeraude .cv-band td {
    color: #ffffff;
}
.resume-emeraude .cv-band-photo,
.resume-emeraude .cv-band-id {
    /* border-box is for the BROWSER: without it the 26px vertical padding is
       added on top of the 230px and the band grows to 282px, which eats into
       the single-page budget builder.js measures against 1123px. mPDF measures
       a td's height from its padding box either way. */
    box-sizing: border-box;
    height: 230px;
    background: #065f46;
    vertical-align: middle;
}
/* 170px = 40px page inset + a slot exactly as wide as the 130px photo. The slot
   is sized to the photo on purpose rather than left roomy and centered: the
   photo carries an inline display:block (tpl_photo), which the browser pins to
   the left of a wider slot while mPDF centers it — a 13px horizontal drift
   between the two renderers that disappears once there is no spare room. */
.resume-emeraude .cv-band-photo {
    width: 170px;
    padding: 26px 0 26px 40px;
}
/* No width/height/border-radius here: the photo carries its geometry inline and
   the pdf-mode no-photo fallback is a GD-drawn 130px circle PNG (tpl_photo's
   $initialsAsImage), because mPDF collapses a styled block div inside a cell. */
.resume-emeraude .cv-band-id {
    padding: 26px 40px 26px 14px;
    text-align: left;
}

/* Name / title / summary / contact: one nested single-cell table each, because
   a nested table's margin is the only reliable vertical-gap primitive inside a
   <td> (block margins on the elements themselves are dropped in mPDF). */
.resume-emeraude .cv-name-row,
.resume-emeraude .cv-jobtitle-row,
.resume-emeraude .cv-summary-row,
.resume-emeraude .cv-contact-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-emeraude .cv-name-row {
    margin: 0 0 5px;
}
.resume-emeraude .cv-jobtitle-row {
    margin: 0 0 11px;
}
.resume-emeraude .cv-summary-row {
    margin: 0 0 11px;
}
.resume-emeraude .cv-contact-row {
    margin: 0;
}
.resume-emeraude .cv-name-row td,
.resume-emeraude .cv-jobtitle-row td,
.resume-emeraude .cv-summary-row td,
.resume-emeraude .cv-contact-row td {
    padding: 0;
}
/* `color` is set only where it survives. It used to sit in the group rule
   above, where the jobtitle/summary/contact rows each re-declare their own
   colour further down at the SAME specificity — so which one applied was
   decided by source order, and Chrome and mPDF do not reliably agree on that
   (skill §5). #ffffff was dead for those three; only the name row ever used it. */
.resume-emeraude .cv-name-row td {
    color: #ffffff;
}
/* Serif display face, declared on the cell as well as the heading: mPDF does
   not inherit a font-family into a <td>, and the heading sits inside one. */
.resume-emeraude .cv-name-row td {
    font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    line-height: 1.12;
}
.resume-emeraude .cv-name {
    font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.12;
    letter-spacing: 0.2px;
    color: #ffffff;
    margin: 0;
    padding: 0;
}
.resume-emeraude .cv-band .cv-jobtitle-row td {
    font-size: 13.5px;
    color: #a7f3d0;
}
.resume-emeraude .cv-jobtitle {
    font-size: 13.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a7f3d0;
}
.resume-emeraude .cv-band .cv-summary-row td {
    font-size: 12px;
    line-height: 1.6;
    color: #eaf7f1;         /* white at ~90% — a solid hex, not rgba */
}
.resume-emeraude .cv-summary {
    font-size: 12px;
    line-height: 1.6;
    color: #eaf7f1;
    text-align: left;       /* never justify: spacing artifacts in mPDF */
}
.resume-emeraude .cv-band .cv-contact-row td {
    font-size: 10.5px;
    color: #d1fae5;
}
.resume-emeraude .cv-contact {
    font-size: 10.5px;
    color: #d1fae5;
}
/* Literal middot separators (real text in the markup, never CSS content:). */
.resume-emeraude .cv-contact-sep {
    color: #6ee7b7;
    padding: 0 2px;
}

/* ---- body: 58% history / 38% rail --------------------------------------- */
/* Pixel widths, not percentages: 480 + 314 = 794 exactly, and each cell's page
   inset and gutter live in its own padding. box-sizing keeps the browser from
   adding that padding on top (mPDF measures from the padding box either way). */
.resume-emeraude .cv-body {
    width: 794px;
    margin: 0;
    border-collapse: collapse;
}
.resume-emeraude .cv-col-main {
    box-sizing: border-box;
    width: 480px;
    vertical-align: top;
    padding: 24px 26px 34px 46px;   /* 26px right = the inter-column gutter */
}
.resume-emeraude .cv-col-side {
    box-sizing: border-box;
    width: 314px;
    vertical-align: top;
    padding: 24px 46px 34px 0;
}
.resume-emeraude .cv-section {
    margin: 0;
}

/* Section headers: 13px serif bold emerald. The uniform margin-top is also the
   inter-section gap — no :first-child or sibling override, both unreliable in
   mPDF. Color is set inline from settings.accentColor. */
.resume-emeraude .cv-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 19px 0 9px;
}
.resume-emeraude .cv-title-row td {
    padding: 0;
    font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif;
    font-size: 13px;
}
.resume-emeraude .cv-section-title {
    font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border: none;
    margin: 0;
    padding: 0;
}

/* Generic nested-table gap wrapper (custom-item detail text). */
.resume-emeraude .cv-block {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.resume-emeraude .cv-block td {
    padding: 0;
}

/* ---- main-column entries ------------------------------------------------ */
.resume-emeraude .cv-item {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 13px;
}
.resume-emeraude .cv-item-cell {
    position: relative;
    padding: 0;
}

/* Two-column "title left / dates right" via table (mPDF-safe: a float in an
   entry header miscalculates height and can duplicate content on export). */
.resume-emeraude .cv-row {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.resume-emeraude .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-emeraude .cv-row-main {
    text-align: left;
}
/* No white-space:nowrap and no explicit width on the date column, both
   deliberate: an unbreakable run wider than its share makes mPDF shrink the
   WHOLE layout table's font, and a declared width wraps a French date range
   ("septembre 2016 – mars 2020") onto two lines. Left auto, the cell takes its
   content width and the range stays on one line. */
.resume-emeraude .cv-row-side {
    text-align: right;
    color: #5b6b64;
    font-size: 10.5px;
}
.resume-emeraude .cv-sub {
    width: 100%;
    border-collapse: collapse;
    margin: 1px 0 5px;
}
.resume-emeraude .cv-sub td {
    padding: 0;
    font-size: 12px;
}
.resume-emeraude .cv-item-title {
    font-weight: bold;
    color: #14201b;
}
.resume-emeraude .cv-item-org {
    font-weight: bold;
    color: #4a5b54;
}
.resume-emeraude .cv-item-sep {
    font-weight: normal;
    font-style: normal;
    color: #7d8c86;
}
.resume-emeraude .cv-item-field {
    color: #4a5b54;
}
.resume-emeraude .cv-item-loc {
    font-style: italic;
    color: #7d8c86;
}
.resume-emeraude .cv-dates {
    font-weight: bold;
}
.resume-emeraude .cv-item-details {
    font-size: 11.5px;
    color: #4a5b54;
}

/* Bullets: one two-cell table each — the fixed-width marker cell gives a
   hanging indent both renderers honor (li padding-left and negative-margin
   markers don't survive mPDF inside a table cell). The marker is a real bullet
   glyph colored on the <td>, never a CSS :before. */
.resume-emeraude .cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 3px;
}
.resume-emeraude .cv-bullet-mk {
    width: 13px;
    vertical-align: top;
    padding: 0;
    font-size: 11px;
    line-height: 17px;  /* centers the dot on the first 12.5px/1.45 text line */
}
.resume-emeraude .cv-bullet-tx {
    vertical-align: top;
    position: relative;
    padding: 0;
    font-size: 12.5px;
}

/* ---- side rail ---------------------------------------------------------- */
/* Education: one line per field, each its own nested table. */
.resume-emeraude .cv-edu {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 11px;
}
.resume-emeraude .cv-edu-cell {
    position: relative;
    padding: 0;
}
.resume-emeraude .cv-edu-line {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.resume-emeraude .cv-edu-line td {
    padding: 0;
    font-size: 11.5px;
}
/* Dates and details rows. The small grey treatment sits on a class of its own
   rather than on `.cv-edu .cv-dates`: mPDF does not resolve three-level
   selectors, so a descendant override loses to the two-level rule it meant to
   beat and the export comes out bold and black where the browser is grey. */
.resume-emeraude .cv-edu-line .cv-edu-sub td {
    font-size: 10.5px;
    font-weight: normal;
    color: #7d8c86;
}

/* Skills: a thin emerald bar left of each name. The bar is a narrow cell with
   an accent background, not a border-left on a block — mPDF drops block borders
   and margins inside a table cell, while a cell background paints as one
   contiguous rect the full height of its row. The cell carries a literal &nbsp;
   because mPDF drops a genuinely empty cell; the 1px font keeps that space from
   widening it. */
.resume-emeraude .cv-skill {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 6px;
}
.resume-emeraude .cv-skill-bar {
    width: 2px;
    padding: 0;
    font-size: 1px;
    line-height: 1px;
}
.resume-emeraude .cv-skill-tx {
    padding: 0 0 0 9px;
    vertical-align: top;
    position: relative;
    font-size: 11.5px;
}

/* Languages: name left, dots right, one table per language. */
.resume-emeraude .cv-lang {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 5px;
}
.resume-emeraude .cv-lang-name {
    padding: 0;
    vertical-align: top;
    position: relative;
    font-size: 11.5px;
    font-weight: bold;
    color: #14201b;
}
.resume-emeraude .cv-lang-level {
    padding: 0;
    vertical-align: top;
    width: 42%;
    text-align: right;      /* no nowrap: a written level is free text */
    color: #4a5b54;
    font-size: 10.5px;
}
.resume-emeraude .cv-dot {
    font-size: 8px;
    letter-spacing: 1px;
}
.resume-emeraude .cv-dot-off {
    color: #d7e3dd;
}

/* Certifications in the rail: name on its own line, issuer + date beneath. */
.resume-emeraude .cv-cert {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 9px;
}
.resume-emeraude .cv-cert-cell {
    position: relative;
    padding: 0;
}
.resume-emeraude .cv-cert-line {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.resume-emeraude .cv-cert-line td {
    padding: 0;
    font-size: 11.5px;
}
/* Issuer + date line — same two-level rule as .cv-edu-sub, same reason. */
.resume-emeraude .cv-cert-line .cv-cert-sub td {
    font-size: 10.5px;
    font-weight: normal;
    color: #7d8c86;
}

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

/* Kept at two levels deep, never three: mPDF resolves a selector chunk it can't
   parse away and can end up applying the rule to a real pdf-mode element (a
   three-level [contenteditable]:focus rule once repainted a whole panel).
   Nothing here is emitted in pdf mode, so the only thing that matters is that
   no selector can collapse onto an element that exists there. */
.resume-emeraude [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b7c2bd;
    font-style: italic;
    pointer-events: none;
}
.resume-emeraude [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-emeraude [contenteditable]:hover {
    box-shadow: 0 0 0 1px #a7f3d0;
}
.resume-emeraude [contenteditable]:focus {
    box-shadow: 0 0 0 2px #065f46;
    background: #ecfdf5;
}
/* On the emerald band the same states need light-on-dark treatment. They hang
   off .cv-inv — a class emitted ONLY in edit mode (emeraude.php) — instead of
   `.cv-band-id [contenteditable]`: .cv-band-id is a real pdf-mode element, so a
   three-level rule mPDF can't fully parse could collapse onto it and repaint
   the band (skill §5, edit-CSS selector leak). Collapsed to .cv-inv these match
   nothing in the export. */
.resume-emeraude .cv-inv[data-ph]:empty:before {
    color: #a7f3d0;
}
.resume-emeraude .cv-inv:hover {
    box-shadow: 0 0 0 1px #6ee7b7;
}
.resume-emeraude .cv-inv:focus {
    box-shadow: 0 0 0 2px #ffffff;
    background: #04503b;
}

.resume-emeraude .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-emeraude .edit-controls--inline {
    position: absolute;
    left: -24px;
    right: auto;
    top: 0;
}
.resume-emeraude .cv-item-cell:hover > .edit-controls,
.resume-emeraude .cv-edu-cell:hover > .edit-controls,
.resume-emeraude .cv-cert-cell:hover > .edit-controls,
.resume-emeraude .cv-bullet-tx:hover > .edit-controls,
.resume-emeraude .cv-skill-tx:hover > .edit-controls,
.resume-emeraude .cv-lang-name:hover > .edit-controls,
.resume-emeraude .edit-controls:hover {
    opacity: 1;
}
.resume-emeraude .edit-controls button {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #ccc;
    background: #fff;
    color: #444;
    border-radius: 3px;
    cursor: pointer;
}
.resume-emeraude .edit-controls button:hover {
    background: #065f46;
    border-color: #065f46;
    color: #fff;
}

.resume-emeraude .cv-add {
    font-family: inherit;
    font-size: 12px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #cfe0d8;
    background: #fff;
    color: #065f46;
    border-radius: 4px;
    cursor: pointer;
}
.resume-emeraude .cv-add:hover {
    background: #ecfdf5;
    border-color: #065f46;
}
.resume-emeraude .cv-add--sm {
    font-size: 11px;
    padding: 2px 8px;
}

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

.resume-emeraude .cv-level {
    white-space: nowrap;
}
.resume-emeraude .cv-dot-btn {
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    padding: 0 1px;
    border: none;
    background: none;
    cursor: pointer;
    color: #cfdcd6;
}
.resume-emeraude .cv-dot-btn.cv-dot-on {
    color: #065f46;
}
.resume-emeraude .cv-level-toggle {
    font-family: inherit;
    font-size: 10px;
    margin-left: 5px;
    padding: 0 4px;
    border: 1px solid #cfe0d8;
    background: transparent;
    color: #7d8c86;
    border-radius: 3px;
    cursor: pointer;
}
.resume-emeraude .cv-level-toggle:hover {
    border-color: #065f46;
    color: #065f46;
}