/*
 * Soleil template — numbered-section student editorial: a square portrait on a
 * solid yellow block beside the identity lines, over a single white column
 * whose every section head carries a two-digit numeral.
 * 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: sun #eab308 (the header block behind the portrait, bullet markers,
 * level dots), pale sun #fef9c3 (the numeral squares), amber #a16207 (job
 * title, company and school names, contact glyphs), near-black #111827 for the
 * name, the numerals and the section labels. The yellow pair is a fixed design
 * decision, not the user's settings.accentColor (a second accent would fight
 * the blocks), so tpl_dots is called with a null accent and the dots inherit
 * .cv-dot-on's sun.
 *
 * Both yellows are <td> backgrounds: a cell background paints one contiguous
 * rect at the full height the row resolves to, while a <div> background paints
 * one rect per rendered text line (skill §5).
 *
 * 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-soleil {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 0;                  /* the header and body carry their 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
   section head, every entry row and both grids are tables here, so the font
   must be declared at td level too. No-op in the browser. Rules that override
   size/color inside a specific cell are ordered after this. */
.resume-soleil td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #374151;
}

/* ---- header: yellow photo block | identity ------------------------------- */
.resume-soleil .cv-header {
    padding: 42px 52px 6px;
}
.resume-soleil table.cv-head {
    width: 100%;
    border-collapse: collapse;
}
/* The sun block IS this cell: its own background, its own 10px inset around a
   95px square portrait. Block padding inside a cell is dropped by mPDF, so the
   inset has to be the cell's.
   No width declared on purpose: the two renderers disagree on whether a td's
   CSS width includes its padding (mPDF border-box, the browser content-box),
   so a declared 115px painted a 115px block in the export and a 135px one in
   the browser. Left to shrink-to-fit, both size the cell to the 95px portrait
   plus its 10px inset — 115px square in each. */
.resume-soleil td.cv-head-photo {
    vertical-align: top;
    padding: 10px;
    background: #eab308;
}
.resume-soleil td.cv-head-id {
    vertical-align: middle;
    padding: 0 0 0 26px;
}
/* No width/height here: tpl_photo emits both inline (and the pdf-mode initials
   fallback is a GD PNG, which keeps its geometry inside a cell). */
.resume-soleil .cv-photo,
.resume-soleil .cv-photo-initials {
    display: block;
}
/* 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-soleil table.cv-id {
    width: 100%;
    border-collapse: collapse;
}
.resume-soleil table.cv-id td {
    padding: 0;
}
.resume-soleil td.cv-id-title {
    padding-top: 6px;
}
.resume-soleil td.cv-id-contact {
    padding-top: 12px;
}
/* Second contact line (website + linkedin) — see the template's header note on
   why the contact block is two fixed rows rather than one wrapping line. */
.resume-soleil td.cv-id-links {
    padding-top: 3px;
}
.resume-soleil .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #111827;
    letter-spacing: -0.2px;
    line-height: 1.1;
    margin: 0;
}
.resume-soleil .cv-jobtitle {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #a16207;
}
.resume-soleil .cv-contact {
    font-size: 11.5px;
    line-height: 1.8;
    color: #4b5563;
}
.resume-soleil .cv-contact-sep {
    color: #d1d5db;
}
.resume-soleil .cv-icon {
    display: inline-block;
    color: #a16207;
}
.resume-soleil .cv-icon.cv-icon-linkedin {
    color: #ffffff;
    padding: 0 3px;
    font-size: 9px;
}

/* ---- body ---------------------------------------------------------------- */
/* Zero bottom padding: real trailing space opens a blank final page in mPDF. */
.resume-soleil .cv-body {
    padding: 0 52px;
}
/* No bottom margins anywhere: the inter-section gap is the section head's own
   margin-top, so nothing reserves trailing space at the end of the flow. */
.resume-soleil .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-soleil .is-last {
    margin-bottom: 0;
}

/* ---- numbered section heads ---------------------------------------------
 * "01" in near-black on a 34px pale-yellow square, then the label.
 *
 * The square is a <td>-shaped box in BOTH renderers, but it is filled two
 * different ways, and the reason is a real mPDF trap (probed directly,
 * 2026-07): a table CELL BACKGROUND inside a page-break-inside:avoid block is
 * painted during mPDF's trial pass and FLUSHED onto the page at the AddPage
 * the trial triggers — when the block is then moved to the next page, the rect
 * stays behind as a ghost square on the previous page. Div backgrounds are
 * suppressed during that trial (PaintDivBB returns early) but never paint a
 * 34px box: a block div collapses inside a cell and an inline span's
 * background hugs the glyphs, ignoring width and padding. An <img> is moved
 * with the block like ordinary content and leaves nothing behind, so pdf mode
 * fills the cell with a GD-rendered numeral PNG and the CSS fill below is what
 * the browser (edit mode) draws instead — same 34px square, same colours.
 *
 * The page-break rules live on the wrapping div — mPDF floods BlockTag
 * warnings when page-break-after is applied to a table. */
.resume-soleil .cv-sec-head {
    page-break-inside: avoid;
    page-break-after: avoid;
}
.resume-soleil table.cv-sec-head-t {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 20px 0 9px;
}
.resume-soleil table.cv-sec-head-t td {
    padding: 0;
}
/* Browser fill (edit mode + any live render of the numerals). */
.resume-soleil td.cv-sec-num {
    width: 34px;
    height: 34px;
    padding: 7px 0;
    background: #fef9c3;
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    color: #111827;
}
/* pdf-mode cell: the PNG carries the fill and the numeral, so the cell itself
   stays transparent and unpadded. */
.resume-soleil td.cv-sec-numi {
    width: 34px;
    padding: 0;
    vertical-align: middle;
}
.resume-soleil td.cv-sec-label {
    vertical-align: middle;
    padding-left: 14px;
}
.resume-soleil .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #111827;
    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 head 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-soleil .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-soleil .cv-item {
    position: relative;
    page-break-inside: avoid;
    margin-top: 12px;
}
/* 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-soleil .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-soleil .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-soleil .cv-row-main {
    text-align: left;
}
/* No white-space:nowrap: a long French range ("septembre 2021 – juin 2024") 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-soleil .cv-row-side {
    text-align: right;
    width: 30%;
}
.resume-soleil .cv-item-title {
    font-weight: bold;
    color: #111827;
}
.resume-soleil .cv-item-org {
    color: #a16207;
}
.resume-soleil .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-soleil .cv-sep-comma {
    margin-left: -4px;
}
.resume-soleil .cv-item-field {
    color: #4b5563;
}
.resume-soleil .cv-item-loc {
    font-size: 11.5px;
    color: #6b7280;
}
.resume-soleil .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #6b7280;
}
.resume-soleil .cv-item-details {
    margin-top: 3px;
    font-size: 12.5px;
    color: #4b5563;
}
/* Ragged-right, never justify (mPDF spacing artifacts). */
.resume-soleil .cv-summary {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.55;
    text-align: left;
}

/* 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-soleil .cv-bullets {
    margin: 6px 0 0;
    padding-left: 0;
    list-style: none;
}
.resume-soleil .cv-bullets li {
    position: relative;
    padding-left: 15px;
    text-indent: -15px;
    margin-bottom: 3px;
    color: #374151;
    font-size: 13px;
}
.resume-soleil .cv-bk {
    color: #eab308;
    margin-right: 6px;
}

/* ---- skills / languages grids -------------------------------------------
 * Two real table columns, never repeated floats (mPDF stacks those instead of
 * packing them into rows) and never CSS columns (unsupported). One <tr> per
 * pair also gives mPDF a break point inside the section. */
.resume-soleil table.cv-grid {
    width: 100%;
    border-collapse: collapse;
}
.resume-soleil td.cv-grid-col {
    width: 50%;
    vertical-align: top;
    padding: 0 14px 4px 0;
    font-size: 13px;
}
.resume-soleil .cv-lang-name {
    color: #111827;
}
.resume-soleil .cv-lang-sep {
    color: #9ca3af;
}
/* 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-soleil .cv-level {
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
}
.resume-soleil .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-soleil .cv-dot-on {
    color: #eab308;
}
.resume-soleil .cv-dot-off {
    color: #e5e7eb;
}

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

/* Skills tag list (edit mode only — pdf mode renders the two-column grid). */
.resume-soleil .cv-taglist {
    font-size: 13px;
}
.resume-soleil .cv-tag {
    display: inline-block;
    margin: 0 6px 5px 0;
    padding: 2px 8px;
    border: 1px solid #fde68a;
    border-radius: 3px;
    background: #fefce8;
    white-space: nowrap;
}
.resume-soleil .cv-langs {
    font-size: 13px;
}
.resume-soleil .cv-lang-line {
    position: relative;
    margin-bottom: 3px;
}

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

.resume-soleil .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px dashed #facc15;
    background: #ffffff;
    color: #a16207;
    border-radius: 4px;
    cursor: pointer;
}
.resume-soleil .cv-add:hover {
    background: #fefce8;
    border-color: #eab308;
}
.resume-soleil .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}

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

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

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