/*
 * Riviera template — soft teal full-height left sidebar, plain-header main
 * column. Shared by browser (edit) and mPDF (pdf). No flexbox, no CSS grid:
 * the two columns are a single table (30% / 70%), so the two renderers agree.
 */

/* ---- 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. */
/* The teal wash. An @page background covers the FULL sheet — it ignores the
   page margins above and is repainted per page — so the band reaches the very
   bottom of every page including the last, which the old fixed-height <td>
   background could never do beyond page 1.
   Basepath-relative URL: PdfService calls SetBasePath(public/); a root-relative
   '/assets/...' silently resolves to nothing and the band renders white.
   Regenerate with scripts/generate-band-assets.php — the band x-position must
   stay in lockstep with .cv-sidebar's width below. */
@page {
    margin: 40px 0 40px 0;
    background: url('assets/img/templates/bands/riviera.png');
    background-image-resize: 6;
}
@page :first {
    margin-top: 0;
}

/* Edit mode only: @page is print-only, so the builder canvas would show white
   where the wash belongs. Never emitted in pdf mode (riviera.php adds the class
   only when $edit). */
.cv-layout--edit {
    background-image: linear-gradient(to right, #f0fdfa 0, #f0fdfa 30%, #ffffff 30%);
}

.resume-page.resume-riviera {
    width: 794px;               /* A4 @ 96dpi -> fills A4 width in mPDF */
    box-sizing: border-box;
    /* Deliberately NO background: a background on this wrapper paints over the
       @page band for the whole extent of the flowed content — measured symptom
       was the wash showing only at the very top and bottom of each page, with
       white behind every line of text. The sheet colour comes from the band PNG
       (white outside the band) in pdf mode, and from .cv-layout--edit's
       gradient in edit mode. */
    color: #1f2937;
    font-family: 'DejaVu Sans', Helvetica, Arial, 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 (in-td trap
   class, 2026-07 slate rework). This template's whole layout is a table, so
   the font must be declared at td level too. No-op in the browser. */
.resume-riviera td {
    font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1f2937;
}

/* ---- two-column layout: float, NOT a table ----------------------------
 * Was a two-cell single-row <table> so the sidebar <td> could carry a fixed
 * height + background and paint the wash down the whole page. That shape cannot
 * paginate: mPDF only breaks a table between <tr> boundaries, so a lone row has
 * none and a long resume was font-shrunk to fit (measured: 4pt against a
 * declared 10.13pt). The wash now comes from the @page band above. */
.cv-layout {
    width: 100%;
    border-collapse: collapse;
}
/* Each cell rule is self-sufficient (vertical-align on the td itself): a
   `> tr > td` child combinator never matches in the browser (it inserts
   <tbody>), and without vertical-align:top mPDF centers the shorter column
   vertically in the full-height row (td default is middle). */

/* ---- sidebar (left, 30%, soft teal wash, full page height) --------------
 * RETIRED technique, kept here only as a warning: the wash used to be a
 * `height` + `background` on the sidebar <td>. That painted correctly but
 * forced the whole page to be one single-row <table>, and mPDF has no row
 * boundary to break at within a lone <tr> — so overlong content was shrunk by
 * mPDF's built-in table auto-shrink to fit one page rather than flowing to a
 * second (measured: 4pt body text against a declared 10.13pt). The wash is now
 * an @page background band at the top of this file, which is independent of
 * the layout and paints on every sheet (cvg-template skill §7a.2).
 */
/* ---- sidebar (left, 30%) ----------------------------------------------
 * No background and no height here any more: both used to be what painted the
 * wash, and both are what forced the un-paginatable table. The colour is now
 * the @page band, independent of how far the content reaches. */
.cv-sidebar {
    float: left;
    width: 30%;
    box-sizing: border-box;
    padding: 34px 22px;
}
.cv-sidebar-inner {
    box-sizing: border-box;
}
.resume-riviera .cv-sidebar td {
    color: #1f2937;
}

/* Photo slot: single-cell table so the slot keeps its geometry inside the
   sidebar cell (block margins are dropped there in mPDF). */
.cv-photo-wrap {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}
.cv-photo-wrap td {
    padding: 0 0 6px;
    text-align: center;
}
.cv-photo,
.cv-photo-initials {
    margin: 0 auto;
}

/* Side sections: the inter-section gap is the title row's uniform
   margin-top (block margins on the .cv-side-section div are dropped inside
   the sidebar cell in mPDF; a nested table's margin renders in both). */
.cv-side-section {
    margin-bottom: 0;
}
.cv-side-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 10px;
}
.cv-side-title-row td {
    border-bottom: 1px solid #99d8d0;
    padding: 0 0 6px;
}
.cv-side-title {
    font-size: 11.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0f766e;
    border-bottom: none;
    margin: 0;
    padding: 0;
}

/* Contact list: glyph + text, each on its own line, 12px. Single-cell table
   per line (block margins are dropped inside a <td> in mPDF); the icon-text
   gap is a literal space — inline-block margins are dropped there too. */
.cv-contact-list {
    font-size: 12px;
}
.cv-contact-item {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 7px;
}
.resume-riviera .cv-sidebar .cv-contact-item td {
    padding: 0;
    font-size: 12px;
    color: #334155;
    word-wrap: break-word;
}
.cv-icon {
    display: inline-block;
    margin-right: 4px;
}
.cv-icon.cv-icon-linkedin {
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 8px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    border-radius: 2px;
    margin-right: 4px;
}

/* Languages: name bold, dot proficiency indicator beneath. Divs stack as
   plain blocks even though their margins are dropped inside a td — line
   breaks still happen, just no gap between them (relying on font-size /
   line-height for the visual gap, same as onyx/regal/slate side items). */
.cv-side-lang {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.cv-side-lang td {
    position: relative;
    padding: 0;
}
.cv-side-lang-name {
    font-weight: bold;
    color: #1f2937;
    font-size: 12.5px;
}
.cv-side-lang-level {
    font-size: 11px;
    margin-top: 2px;
}
.cv-dot {
    font-size: 9px;
    margin-right: 1px;
}
.cv-dot-off {
    color: #cbd5e1;
}
.cv-dot-btn {
    font-family: inherit;
    font-size: 11px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 1px;
    color: #cbd5e1;
}
.cv-dot-btn.cv-dot-on {
    color: #0e7490;
}

/* Skills: plain names, one per line, 13px. */
.cv-side-list {
    font-size: 13px;
}
.cv-side-plain {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6px;
}
.cv-side-plain td {
    position: relative;
    padding: 0;
    color: #1f2937;
}

/* ---- main column (right, 70%) -------------------------------------------- */
/* margin-left (not a width) keeps the column clear of the floated sidebar on
   page 1 AND holds the same indent on pages 2+, where the float no longer
   exists but the @page band still paints under that strip. */
.cv-main {
    margin-left: 30%;
    box-sizing: border-box;
}

/* Header: single-cell table so the column padding survives inside the
   .cv-main cell (a nested div's padding is dropped there in mPDF). */
.cv-header-table {
    width: 100%;
    border-collapse: collapse;
}
.cv-header-cell {
    padding: 34px 36px 0;
}
.cv-name {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.15;
    margin: 0 0 4px;
    color: #1f2937;
}
.cv-jobtitle {
    font-size: 15px;
    font-weight: normal;
}
/* pdf-mode decorative rule: a content-less div's width/height collapse
   inside the header cell in mPDF and nothing paints — a fixed-layout
   single-cell table with the width on the td and the line as the cell's own
   top border draws it reliably (table-layout:fixed keeps mPDF from
   shrinking the table to its &nbsp; content). */
.cv-header-rule {
    border-collapse: collapse;
    table-layout: fixed;
    width: 40px;
    margin: 12px 0 0;
}
.resume-riviera .cv-header-rule td {
    width: 40px;
    padding: 0;
    font-size: 1px;
    line-height: 1px;
    border-top: 2px solid;
}

/* Body: single-cell table so the column padding survives inside the
   .cv-main cell (same reason as the header). */
/* .cv-body / .cv-body-cell are gone from pdf markup — that single-cell table
   wrapped EVERY section in one <tr>, leaving mPDF no break point. Its padding
   now sits on .cv-main-body, a plain block that paginates. */
.cv-main-body {
    padding: 20px 36px 36px;
}

/* Inter-section gap is a LEADING margin-top here, never a trailing
   margin-bottom, and it is declared in exactly one place. mPDF does not
   collapse adjacent margins and a browser does (measured in isolation:
   an 18px margin-bottom meeting the next section's 18px title-row
   margin-top is 18px in the browser and 36px in the export), so carrying
   the gap on both elements drifted the export ~18px further down per
   section boundary — 4 boundaries put a real entry past the page-1 edge
   and boundary-test failed. It also left an 18px trailing margin under the
   last section, the blank-trailing-page shape from skill §5. The sidebar
   already worked this way (.cv-side-section above); this matches it.
   Carried by the section — not by .cv-title-row — because a custom section
   with an empty title renders no title row at all and would otherwise butt
   straight against the section above it. */
.cv-section {
    margin-top: 18px;
}

/* pdf-mode section title rows: a heading's border-bottom shrinks to its
   text width and its margins are dropped inside the body cell in mPDF —
   both here are avoided entirely by using a short fixed-width rule table
   (same technique as .cv-header-rule) instead of a border-bottom, so the
   underline stays a deliberate 28px tick rather than a full-width line.
   The inter-section gap lives on .cv-section's margin-top, NOT here: mPDF
   adds adjacent margins where the browser collapses them, so a gap declared
   on both elements is 18px on the canvas and 36px in the export. */
.cv-title-row {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
}
.cv-title-row td {
    padding: 0;
}
.cv-section-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
}
.cv-title-rule {
    border-collapse: collapse;
    table-layout: fixed;
    width: 28px;
    margin: 5px 0 0;
}
.resume-riviera .cv-title-rule td {
    width: 28px;
    padding: 0;
    font-size: 1px;
    line-height: 1px;
    border-top: 2px solid;
}

/* ---- items (div in edit mode / table in pdf mode, same class) --------- */
/* Keep-together (skill §7): each entry is its own single-row table, so
   without avoid mPDF can split an entry's title from its bullets.
   Spacing is margin-TOP via additive sibling selectors, never margin-bottom:
   a margin-bottom on a many-times-repeated page-break-inside:avoid block is
   double-counted in mPDF's pagination estimate and opens a blank trailing page
   (measured here: a blank page 5 on the long sample). Because the rule only
   ever ADDS a margin between siblings, the first item in a section never
   matches it and needs no competing override — and such an override is itself
   the documented trigger for the same bug (skill §5). */
.cv-item {
    position: relative;
    page-break-inside: avoid;
}
.cv-section-head-group + .cv-item,
.cv-item + .cv-item {
    margin-top: 14px;
}
/* mPDF ignores page-break-after:avoid on a heading by itself, so the heading
   and the first entry travel as one block instead. */
.cv-section-head-group {
    page-break-inside: avoid;
}
.cv-item:last-child {
    margin-bottom: 0;
}
table.cv-item {
    width: 100%;
    border-collapse: collapse;
}
.cv-item-cell {
    position: relative;
    padding: 0;
}

/* Two-column "title left / dates right" via table (mPDF-safe). */
.cv-row {
    width: 100%;
    border-collapse: collapse;
}
.cv-row td {
    vertical-align: top;
    padding: 0;
}
.cv-row-main {
    text-align: left;
}
.resume-riviera .cv-row-side {
    text-align: right;
    /* NO white-space:nowrap. A nowrap cell wider than its column makes mPDF
       scale the whole cv-item table down instead of wrapping (measured on the
       FR sample: entries rendered at 9.4 / 7.5 / 6.9pt against a declared
       10.13pt, shrinking in step with the date string's length — "septembre
       2016 – février 2019" was the worst). A long French range exceeds 32%
       anyway, so it wraps to a second right-aligned line instead. */
    width: 32%;
    color: #6b7280;
    font-size: 12px;
}
.cv-item-title {
    font-weight: bold;
}
.cv-item-org {
    font-style: italic;
    color: #4b5563;
}
.cv-item-sep {
    color: #4b5563;
    font-style: normal;
}
.cv-item-loc {
    font-style: italic;
}
.cv-dates {
    font-weight: bold;
}
.cv-item-details {
    margin-top: 3px;
}

/* Bullets — marker-span pattern: a two-cell table per bullet (fixed-width
   marker cell + text cell). mPDF drops li hanging indents and ignores
   `list-style: none` on the li inside a table cell, so a real <ul> would
   both misindent and grow a stray default marker; the marker lives in its
   own td instead, giving an identical hanging indent in both renderers. */
.cv-bullets {
    margin: 5px 0 0;
}
.cv-bullet {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2px;
}
.cv-bullet-mk {
    width: 16px;
    vertical-align: top;
    padding: 0;
}
.cv-bullet-tx {
    vertical-align: top;
    position: relative;
    padding: 0;
}

/* Certifications (pdf mode: two-cell table — a float:right date doesn't
   float inside the body cell in mPDF). */
.cv-inline-item {
    position: relative;
    margin-bottom: 4px;
}
.cv-item-side {
    float: right;
    width: 70px;
    color: #6b7280;
    font-size: 12px;
}
.cv-cert-row {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
}
.cv-cert-row td {
    vertical-align: top;
    padding: 0;
}
.resume-riviera .cv-cert-side {
    width: 70px;
    text-align: right;
    color: #6b7280;
    font-size: 12px;
}
.cv-muted {
    color: #6b7280;
}

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

.resume-riviera [contenteditable][data-ph]:empty:before {
    content: attr(data-ph);
    color: #b7b7b7;
    font-style: italic;
    pointer-events: none;
}
.resume-riviera [contenteditable] {
    outline: none;
    border-radius: 2px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
}
.resume-riviera [contenteditable]:hover {
    box-shadow: 0 0 0 1px #d6e2ff;
}
.resume-riviera [contenteditable]:focus {
    box-shadow: 0 0 0 2px #2563eb;
    background: #f5f9ff;
}

.resume-riviera .edit-controls {
    position: absolute;
    top: -2px;
    right: -44px;
    opacity: 0;
    transition: opacity 0.12s ease;
    white-space: nowrap;
    z-index: 5;
}
.resume-riviera .edit-controls--inline {
    position: absolute;
    left: -26px;
    right: auto;
    top: 0;
}
.resume-riviera .cv-sidebar .edit-controls--inline {
    left: auto;
    right: -20px;
}
.resume-riviera .cv-item:hover > .edit-controls,
.resume-riviera .cv-side-lang td:hover > .edit-controls,
.resume-riviera .cv-side-plain td:hover > .edit-controls,
.resume-riviera .cv-inline-item:hover > .edit-controls,
.resume-riviera .cv-bullet-tx:hover > .edit-controls,
.resume-riviera .edit-controls:hover {
    opacity: 1;
}
.resume-riviera .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-riviera .edit-controls button:hover {
    background: #0e7490;
    border-color: #0e7490;
    color: #fff;
}

.resume-riviera .cv-add {
    font-family: inherit;
    font-size: 12.5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed #99d8d0;
    background: #fff;
    color: #0e7490;
    border-radius: 4px;
    cursor: pointer;
}
.resume-riviera .cv-add:hover {
    background: #f0fdfa;
    border-color: #0e7490;
}
.resume-riviera .cv-add--sm {
    font-size: 11.5px;
    padding: 2px 8px;
}
.resume-riviera .cv-add--side {
    border-color: #99d8d0;
    background: #fff;
    color: #0e7490;
}

.resume-riviera .cv-level-toggle {
    font-family: inherit;
    font-size: 9px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #6b7280;
    border-radius: 2px;
    padding: 0 3px;
    margin-left: 3px;
    cursor: pointer;
}

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