/*
 * Corail template — an off-centre coral header block (solid #f43f5e over the
 * left 58% of the header, name and title in white) with the round portrait
 * beside it on plain white, a full-width contact line beneath, and a single
 * white column below. Shared by browser (edit) and mPDF (pdf). No flexbox, no
 * CSS grid, no transforms: floats / tables / block layout only, so the two
 * renderers agree.
 *
 * The asymmetry is the identity (template-specs/corail.yaml): the coral stops
 * at 58% and never runs full-bleed. `table-layout: fixed` on the header table
 * is what makes that promise hold in both renderers — the fill is the left
 * cell's own background, so its right edge is the cell boundary rather than a
 * rect sized to whatever text happens to sit inside.
 *
 * Palette: coral #f43f5e (the block, the section labels and rules, the entry
 * companies, the bullet markers, the contact glyphs and the level dots), rose
 * #ffe4e6 for the title inside the block (the flattened equivalent of white at
 * 85% — mPDF's handling of rgba() is not dependable), petal #fecdd3 / #fda4af
 * for chip outlines and empty dots, ink #1f2937 for the name and entry titles,
 * slate #4b5563 for body text and #6b7280 for dates. The coral is a fixed
 * design decision, not the user's settings.accentColor (a second accent would
 * fight the block), so the template passes it explicitly to tpl_icon/tpl_dots.
 *
 * multipage:true — no fixed heights outside the page-1 header, 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-corail {
    width: 794px;                /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    padding: 0;                  /* the contact line and body carry their own side
                                    padding, so the coral block can reach the top
                                    and left edges */
    background: #ffffff;
    color: #4b5563;
    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
   entry row, the section rules 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-corail td {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #4b5563;
}

/* ---- header: coral block (58%) | portrait on white (42%) -----------------
 * table-layout:fixed pins the split so the fill stops exactly at 58% however
 * long the name is. The fill lives on the <td>: mPDF paints a cell background
 * as ONE contiguous rect across the full cell, while a <div> background paints
 * one rect per rendered text line, sized to that line's own text width — a div
 * here would give a ragged shape instead of a rectangle. */
.resume-corail table.cv-head {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
/* UNPADDED on purpose: the two renderers disagree on whether a td's CSS width
   includes its padding (mPDF border-box, the browser content-box), and with
   table-layout:fixed the browser scales the over-wide columns back down — a
   padded 58% cell measured 61.4% in the browser against mPDF's 58.1%, i.e. the
   coral stopped in a different place in each renderer. The inset lives on the
   nested identity cells instead, which are not width-constrained. */
.resume-corail td.cv-head-block {
    width: 58%;
    height: 110px;
    background: #f43f5e;
    padding: 0;
    vertical-align: middle;
}
/* No fill at all: the white to the right of the block is the composition. */
.resume-corail td.cv-head-photo {
    width: 42%;
    height: 110px;
    padding: 0;
    vertical-align: middle;
}
/* Portrait slot: a shrink-to-width nested table centred with `margin: 0 auto`
   — the centring primitive mPDF honors for tables. text-align on the cell
   cannot do it: tpl_photo emits display:block in an inline style that no
   stylesheet rule can outrank. */
.resume-corail table.cv-photo-wrap {
    border-collapse: collapse;
    margin: 0 auto;
}
.resume-corail 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-corail .cv-photo,
.resume-corail .cv-photo-initials {
    display: block;
    margin: 0 auto;
}
/* Name and title 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-corail table.cv-id {
    width: 100%;
    border-collapse: collapse;
}
.resume-corail table.cv-id td {
    padding: 0 26px 0 48px;   /* the block's own inset — see .cv-head-block */
    background: #f43f5e;
}
.resume-corail td.cv-id-title {
    padding-top: 6px;
}
.resume-corail .cv-name {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 27px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: -0.2px;
    line-height: 1.12;
    margin: 0;
}
/* #ffe4e6 is white-at-85% flattened over the coral: mPDF's rgba() support is
   not dependable, and a solid value renders identically in both engines. */
.resume-corail .cv-jobtitle {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: #ffe4e6;
}

/* ---- contact line: full width beneath the block, coral glyphs ------------
 * Two lines (reach-me fields, then links) rather than one wrapping line —
 * five glyphed items overflow the 698px measure, and a free wrap strands a
 * separator at the right edge. */
.resume-corail .cv-contact-wrap {
    padding: 14px 48px 0;
}
.resume-corail .cv-contact {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.7;
}
.resume-corail .cv-contact--links {
    margin-top: 1px;
}
/* Keeps a value from being split from its glyph, or from its neighbours'
   separators, at a wrap. */
.resume-corail .cv-contact-item {
    white-space: nowrap;
}
.resume-corail .cv-contact-sep {
    color: #fda4af;
}
.resume-corail .cv-icon {
    display: inline-block;
    color: #f43f5e;
}
/* The linkedin badge is a filled square carrying its own "in" text. */
.resume-corail .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-corail .cv-body {
    padding: 0 48px;
}
/* No bottom margins anywhere: the inter-section gap is the section label's own
   margin-top, so nothing reserves trailing space at the end of the flow. */
.resume-corail .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-corail .is-last {
    margin-bottom: 0;
}

/* ---- section heads: coral label over a short 20px rule -------------------
 * The label and its rule are kept in one block so a page break can never land
 * between them; page-break-after 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-corail .cv-sec-head {
    page-break-inside: avoid;
    page-break-after: avoid;
}
.resume-corail .cv-sec-title {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #f43f5e;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    line-height: 1.3;
    margin: 20px 0 0;
}
/* The 20px rule: a single-cell table drawn with the <td>'s BORDER, not a cell
   background. 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. Borders travel with the block.
   The &nbsp; keeps mPDF from collapsing the empty row, and the zeroed font
   metrics keep it from adding height of its own.
   A width on the <h2> itself would be the obvious way to shorten the underline,
   but a 20px block wraps a two-word label ("Expérience professionnelle") into a
   tower in the browser — hence a separate rule element. */
.resume-corail table.cv-sec-rule {
    width: 20px;
    border-collapse: collapse;
    margin: 7px 0 0;
}
.resume-corail table.cv-sec-rule td {
    width: 20px;
    border-top: 2px solid #f43f5e;
    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-corail .cv-section-head-group {
    page-break-inside: avoid;
}

.resume-corail .cv-summary {
    margin-top: 9px;
    line-height: 1.55;
    text-align: left;      /* ragged-right, never justify (mPDF spacing artifacts) */
}

/* ---- 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-corail .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-corail .cv-row {
    width: 100%;
    border-collapse: collapse;
}
.resume-corail .cv-row td {
    vertical-align: top;
    padding: 0;
}
.resume-corail .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-corail .cv-row-side {
    text-align: right;
    width: 30%;
}
.resume-corail .cv-item-title {
    font-weight: bold;
    color: #1f2937;
}
.resume-corail .cv-item-org {
    color: #f43f5e;
}
.resume-corail .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-corail .cv-sep-comma {
    margin-left: -4px;
}
.resume-corail .cv-item-field {
    color: #4b5563;
}
.resume-corail .cv-item-loc {
    font-size: 11.5px;
    color: #9ca3af;
}
.resume-corail .cv-dates {
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #6b7280;
}
.resume-corail .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-corail .cv-bullets {
    margin: 6px 0 0;
    padding-left: 0;
    list-style: none;
}
.resume-corail .cv-bullets li {
    position: relative;
    padding-left: 15px;
    text-indent: -15px;
    margin-bottom: 3px;
    font-size: 13px;
}
.resume-corail .cv-bk {
    color: #f43f5e;
    margin-right: 6px;
}

/* ---- skills chips -------------------------------------------------------
 * pdf mode: a 3-column grid table, one auto-width chip TABLE per cell. Chips
 * cannot be inline-blocks there — consecutive inline-blocks with no whitespace
 * merge into one undifferentiated box in mPDF, and repeated floats stack
 * instead of packing into rows. Edit mode keeps browser-only inline-block chips
 * (further down) styled to the same border, padding and type.
 * The chips are OUTLINED, never filled, for the same reason the section rules
 * are borders: the skills head-group is a page-break-inside:avoid block, and a
 * cell background inside one is painted during mPDF's trial pass and left
 * behind as a ghost rect on the previous page when the block moves. */
.resume-corail table.cv-chip-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 9px;
}
.resume-corail td.cv-chip-cell {
    width: 33.33%;
    vertical-align: top;
    padding: 0 8px 6px 0;
}
.resume-corail table.cv-chip {
    border-collapse: collapse;
}
.resume-corail .cv-chip td {
    border: 1px solid #fecdd3;
    color: #9f1239;
    padding: 3px 9px;
    font-size: 12px;
}

/* ---- languages grid ------------------------------------------------------
 * 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-corail table.cv-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 9px;
}
.resume-corail td.cv-grid-col {
    width: 50%;
    vertical-align: top;
    padding: 0 14px 4px 0;
    font-size: 13px;
}
.resume-corail .cv-lang-name {
    color: #1f2937;
}
.resume-corail .cv-lang-sep {
    color: #d1d5db;
}
/* 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-corail .cv-level {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}
.resume-corail .cv-dot {
    font-size: 10px;
    letter-spacing: 1px;
}
.resume-corail .cv-dot-on {
    color: #f43f5e;
}
.resume-corail .cv-dot-off {
    color: #fecdd3;
}

/* =====================================================================
 * 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-corail [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #c9ced6;
    font-style: italic;
    pointer-events: none;
}
.resume-corail [contenteditable] {
    outline: none;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-corail [contenteditable]:hover {
    box-shadow: 0 0 0 1px #fda4af;
}
.resume-corail [contenteditable]:focus {
    box-shadow: 0 0 0 2px #f43f5e;
    background: #fff1f2;
}
/* Inside the coral block the same affordances need light-on-dark values. These
   block-scoped rules are deliberately written at TWO levels
   (`.cv-head-block [contenteditable]…`, no `.resume-corail` prefix), matching
   graphite/onyx/slate. Written as three levels
   (`.resume-corail .cv-head-block [contenteditable]:focus`) mPDF resolves away
   the chunk it can't parse and applies the rule to the block <td> itself — on
   graphite a focus rule's translucent amber repainted the whole dark panel in
   a real export. None of this markup ever reaches mPDF (edit mode only); all
   that matters is that no selector can collapse onto a pdf-mode element. */
.cv-head-block [contenteditable][data-ph]:empty:before {
    color: #ffe4e6;
}
.cv-head-block [contenteditable]:hover {
    box-shadow: 0 0 0 1px #ffe4e6;
}
.cv-head-block [contenteditable]:focus {
    box-shadow: 0 0 0 2px #ffffff;
    background: #fb7185;
}

/* Skills chips, edit mode only (pdf mode renders the chip-table grid above). */
.resume-corail .cv-chip-list {
    font-size: 12px;
    margin-top: 9px;
}
/* Outlined, not filled — matching the pdf-mode chip tables exactly (see the
   chip-grid note above for why those carry no fill). */
.resume-corail .cv-chip-edit {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 9px;
    border: 1px solid #fecdd3;
    background: #ffffff;
    color: #9f1239;
    font-size: 12px;
    white-space: nowrap;
}
.resume-corail .cv-langs {
    font-size: 13px;
    margin-top: 9px;
}
.resume-corail .cv-lang-line {
    position: relative;
    margin-bottom: 3px;
}

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

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

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

.resume-corail .cv-chip-x {
    font-family: inherit;
    border: none;
    background: none;
    color: #b00;
    cursor: pointer;
    padding: 0 0 0 3px;
    opacity: 0;
    font-size: 13px;
}
.resume-corail .cv-chip-edit:hover .cv-chip-x {
    opacity: 1;
}

.resume-corail .cv-dot-btn,
.resume-corail .cv-level-toggle {
    font-family: inherit;
    border: none;
    background: none;
    padding: 0 1px;
    cursor: pointer;
    font-size: 10px;
}
.resume-corail .cv-dot-btn.cv-dot-on {
    color: #f43f5e;
}
.resume-corail .cv-dot-btn.cv-dot-off {
    color: #fecdd3;
}
.resume-corail .cv-level-toggle {
    font-size: 9px;
    color: #9ca3af;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.resume-corail .cv-chip-edit:hover .cv-level-toggle,
.resume-corail .cv-lang-line:hover .cv-level-toggle {
    opacity: 1;
}