/* EmploiZen — feuilles de style des modèles de CV (écran + impression A4).
   Toutes les tailles en pt / mm pour un rendu identique entre l'aperçu et le PDF. */

.cv {
  --c: #16a34a; --font: "Inter"; --fs: 10pt; --lh: 1.4; --pad: 14mm; --sp: 1;
  --ink: #1f2933; --mute: #5f6b76; --line: #e3e8ec;
  /* --soft, --soft2, --deep, --tint, --grad2, --ring sont calculées par cv-render.js (compatibles export PDF) */
  --soft: #e3f4ea; --soft2: #f1faf5; --deep: #12632f; --tint: #b9e3c9; --grad2: #9fb0a0; --ring: rgba(22,163,74,.55);
  position: relative; box-sizing: border-box;
  width: 210mm; min-height: 297mm; background: #fff; color: var(--ink);
  font-family: var(--font), "Helvetica Neue", Arial, sans-serif; font-size: var(--fs); line-height: var(--lh);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  text-align: left; overflow: hidden;
}
.cv *, .cv *::before, .cv *::after { box-sizing: border-box; }
.cv h1, .cv h2, .cv h3, .cv p, .cv ul { margin: 0; padding: 0; }
.cv :where(h1, h2, h3) { color: inherit; font-family: inherit; letter-spacing: normal; line-height: 1.25; font-size: 1em; }
.cv { display: flex; flex-direction: column; }
.cv > .cv-main, .cv > .cv-cols { flex: 1 0 auto; }
.cv-header { position: relative; z-index: 1; }
.cv ul { list-style: none; }
.cv .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Structure ---------- */
.cv-header { display: flex; align-items: center; gap: 6mm; padding: var(--pad) var(--pad) calc(6mm * var(--sp)); }
.cv-id { flex: 1; min-width: 0; }
.cv-name { font-size: 2.4em; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
.cv-headline { font-size: 1.2em; margin-top: 1.5mm; color: var(--c); font-weight: 600; }
.cv-contact { display: flex; flex-wrap: wrap; gap: 1.2mm 4mm; font-size: .9em; color: var(--mute); }
.cv-contact li { display: flex; align-items: center; gap: 1.5mm; min-width: 0; }
.cv-contact span { overflow-wrap: anywhere; }
.cv-ico { width: 1.05em; height: 1.05em; flex: none; color: var(--c); }
.cv-header > .cv-contact { flex-basis: 100%; }
.cv-header--side, .cv-header--side .cv-contact, .cv-side .cv-contact { flex-wrap: nowrap; }
.cv-header--side > .cv-contact { flex-basis: auto; }
.cv-header { flex-wrap: wrap; }

.cv-photo { flex: none; width: 30mm; height: 30mm; overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.cv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-photo--circle { border-radius: 50%; }
.cv-photo--rounded { border-radius: 4mm; }
.cv-photo--square { border-radius: 0; }
.cv-photo--initials span { font-weight: 800; font-size: 2.2em; color: var(--c); letter-spacing: .02em; }

.cv-main { padding: 0 var(--pad) var(--pad); min-width: 0; }
.cv-cols { display: grid; position: relative; }
.cv--left .cv-cols { grid-template-columns: 34% 1fr; }
.cv--right .cv-cols { grid-template-columns: 1fr 34%; }
.cv-side { padding: 6mm 6mm var(--pad); min-width: 0; }
.cv--left .cv-main, .cv--right .cv-main { padding-top: 6mm; }
.cv-cols > .cv-side, .cv-cols > .cv-main { position: relative; z-index: 1; }
.cv-sidebg { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 0; }
.cv--left .cv-sidebg { left: 0; } .cv--right .cv-sidebg { right: 0; }

.cv-sec { margin-bottom: calc(5.5mm * var(--sp)); break-inside: auto; }
.cv-h { font-size: 1.15em; font-weight: 800; color: var(--c); margin-bottom: calc(2.5mm * var(--sp)); letter-spacing: .01em; break-after: avoid; }
.cv-item { margin-bottom: calc(3.5mm * var(--sp)); break-inside: avoid; }
.cv-item:last-child { margin-bottom: 0; }
.cv-item__head { display: flex; justify-content: space-between; gap: 4mm; align-items: baseline; }
.cv-item__main { min-width: 0; }
.cv-item__title { font-size: 1.05em; font-weight: 700; }
.cv-item__sub { color: var(--c); font-weight: 600; }
.cv-item__meta { text-align: right; color: var(--mute); font-size: .9em; white-space: nowrap; display: flex; flex-direction: column; flex: none; }
.cv-rich { margin-top: calc(1.2mm * var(--sp)); }
.cv-rich p + p { margin-top: 1mm; }
.cv-rich ul { margin: .8mm 0 0; }
.cv-rich li { position: relative; padding-left: 4mm; margin-bottom: .6mm; }
.cv-rich li::before { content: ""; position: absolute; left: .6mm; top: .62em; width: 1.4mm; height: 1.4mm; border-radius: 50%; background: var(--c); }
.cv-item--compact .cv-item__title { font-size: 1em; }
.cv-ref { color: var(--mute); font-size: .9em; }

.cv-skills li, .cv-langs li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8mm 3mm; margin-bottom: calc(2mm * var(--sp)); }
.cv-skill__name, .cv-lang__name { font-weight: 600; }
.cv-skill__kw { grid-column: 1 / -1; color: var(--mute); font-size: .88em; }
.cv-lang__lvl { color: var(--mute); font-size: .9em; }
.cv-langs .cv-bar, .cv-langs .cv-dots, .cv-skills .cv-bar { grid-column: 1 / -1; }
.cv-skills .cv-dots { grid-column: 2; }
.cv-bar { display: block; height: 1.5mm; background: var(--soft); border-radius: 1mm; overflow: hidden; width: 100%; }
.cv-bar i { display: block; height: 100%; background: var(--c); border-radius: 1mm; }
.cv-dots { display: inline-flex; gap: 1mm; }
.cv-dots i { width: 2.2mm; height: 2.2mm; border-radius: 50%; background: var(--soft); }
.cv-dots i.on { background: var(--c); }
.cv-tags { display: flex; flex-wrap: wrap; gap: 1.5mm; }
.cv-tags li { margin: 0; padding: .8mm 2.6mm; border-radius: 3mm; background: var(--soft); color: var(--deep); font-weight: 600; font-size: .92em; }
.cv-tags--soft li { background: transparent; border: .25mm solid var(--line); color: var(--ink); font-weight: 500; }
.cv-skilltext li { margin-bottom: 1.2mm; }
.cv-brand { position: absolute; bottom: 4mm; left: 0; right: 0; text-align: center; font-size: 7pt; color: #9aa5b1; z-index: 2; }

/* Single-column : compétences en grille pour gagner de la place */
.cv--single .cv-skills, .cv--single .cv-langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8mm; }

/* Chronologie */
.cv--timeline .cv-sec--experience .cv-items, .cv--timeline .cv-sec--education .cv-items { border-left: .5mm solid var(--soft); padding-left: 5mm; margin-left: 1.2mm; }
.cv--timeline .cv-sec--experience .cv-item, .cv--timeline .cv-sec--education .cv-item { position: relative; }
.cv--timeline .cv-sec--experience .cv-item::before, .cv--timeline .cv-sec--education .cv-item::before {
  content: ""; position: absolute; left: calc(-5mm - 1.75mm); top: .35em; width: 2.5mm; height: 2.5mm; border-radius: 50%; background: #fff; border: .6mm solid var(--c);
}

/* ================= MODÈLES ================= */

/* Moderne — bandeau de couleur pleine largeur */
.tpl-moderne .cv-header--band { background: var(--c); color: #fff; padding-bottom: var(--pad); margin-bottom: 7mm; }
.tpl-moderne .cv-header--band .cv-headline { color: #fff; opacity: .9; }
.tpl-moderne .cv-header--band .cv-contact, .tpl-moderne .cv-header--band .cv-ico { color: #fff; }
.tpl-moderne .cv-header--band .cv-photo { border: 1mm solid rgba(255,255,255,.6); background: rgba(255,255,255,.2); }
.tpl-moderne .cv-header--band .cv-photo--initials span { color: #fff; }
.tpl-moderne .cv-h { border-bottom: .4mm solid var(--soft); padding-bottom: 1.2mm; }

/* Moderne Duo — colonne gauche teintée */
.tpl-moderne-duo .cv-header--top { border-bottom: .5mm solid var(--c); margin: 0 var(--pad); padding-left: 0; padding-right: 0; }
.tpl-moderne-duo .cv-sidebg { background: var(--soft2); top: 0; }
.tpl-moderne-duo .cv-side { padding-left: var(--pad); }
.tpl-moderne-duo .cv-cols { margin-top: 0; }
.tpl-moderne-duo .cv-h { text-transform: none; position: relative; padding-left: 3.5mm; }
.tpl-moderne-duo .cv-h::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 1.2mm; border-radius: 1mm; background: var(--c); }

/* Zen — sobriété totale, 100 % ATS */
.tpl-zen { --c: #111827; }
.tpl-zen .cv-header--plain { display: block; text-align: left; border-bottom: .3mm solid var(--ink); margin: 0 var(--pad) 6mm; padding: var(--pad) 0 4mm; }
.tpl-zen .cv-header .cv-photo { display: none; }
.tpl-zen .cv-name { font-weight: 700; font-size: 2.1em; }
.tpl-zen .cv-headline { color: var(--ink); font-weight: 500; }
.tpl-zen .cv-contact { margin-top: 2.5mm; }
.tpl-zen .cv-ico { display: none; }
.tpl-zen .cv-contact li + li::before { content: "|"; margin-right: 3mm; color: var(--line); }
.tpl-zen .cv-h { color: var(--ink); text-transform: uppercase; font-size: 1em; letter-spacing: .08em; border-bottom: .25mm solid var(--line); padding-bottom: 1mm; }
.tpl-zen .cv-item__sub { color: var(--ink); font-style: italic; font-weight: 500; }
.tpl-zen .cv-rich li::before { background: var(--ink); width: 1.1mm; height: 1.1mm; }

/* Horizon — colonne gauche couleur pleine, photo ronde */
.tpl-horizon .cv-sidebg { background: var(--c); }
.tpl-horizon .cv-side { color: #fff; padding-top: var(--pad); }
.tpl-horizon .cv-header--side { flex-direction: column; text-align: center; padding: 0 0 6mm; gap: 3mm; }
.tpl-horizon .cv-header--side .cv-photo { width: 34mm; height: 34mm; border: 1.2mm solid rgba(255,255,255,.35); background: rgba(255,255,255,.15); }
.tpl-horizon .cv-header--side .cv-photo--initials span { color: #fff; }
.tpl-horizon .cv-name { font-size: 1.9em; }
.tpl-horizon .cv-headline { color: #fff; opacity: .85; font-weight: 500; }
.tpl-horizon .cv-side .cv-contact { flex-direction: column; text-align: left; color: #fff; font-size: .88em; }
.tpl-horizon .cv-side .cv-ico, .tpl-horizon .cv-side .cv-lang__lvl, .tpl-horizon .cv-side .cv-skill__kw { color: #fff; opacity: .85; }
.tpl-horizon .cv-side .cv-h { color: #fff; border-bottom: .3mm solid rgba(255,255,255,.35); padding-bottom: 1mm; }
.tpl-horizon .cv-side .cv-bar, .tpl-horizon .cv-side .cv-dots i { background: rgba(255,255,255,.25); }
.tpl-horizon .cv-side .cv-bar i, .tpl-horizon .cv-side .cv-dots i.on { background: #fff; }
.tpl-horizon .cv-side .cv-tags li { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.tpl-horizon .cv-side .cv-item__sub, .tpl-horizon .cv-side .cv-item__meta { color: #fff; opacity: .85; }
.tpl-horizon .cv-main { padding-top: var(--pad); }
.tpl-horizon .cv-main .cv-h { font-size: 1.3em; }
.tpl-horizon .cv-main .cv-h span { box-shadow: inset 0 -1.6mm 0 var(--soft); }

/* Atlas — bandeau sombre + colonne droite */
.tpl-atlas .cv-header--band { background: var(--c); color: #fff; padding-bottom: 8mm; }
.tpl-atlas .cv-header--band .cv-headline { color: var(--tint); letter-spacing: .04em; }
.tpl-atlas .cv-header--band .cv-contact, .tpl-atlas .cv-header--band .cv-ico { color: #fff; }
.tpl-atlas .cv-header--band .cv-photo { border-radius: 2mm; background: rgba(255,255,255,.12); }
.tpl-atlas .cv-header--band .cv-photo--initials span { color: #fff; }
.tpl-atlas .cv-sidebg { background: #f4f5f7; top: 0; }
.tpl-atlas .cv-cols { margin-top: 0; }
.tpl-atlas .cv-h { color: var(--c); text-transform: uppercase; letter-spacing: .12em; font-size: .95em; }
.tpl-atlas .cv-main .cv-h::after { content: ""; display: block; width: 10mm; height: .8mm; background: var(--c); margin-top: 1.2mm; }
.tpl-atlas .cv-item__sub { color: var(--mute); }

/* Aurore — en-tête dégradé + chronologie */
.tpl-aurore .cv-header--gradient { background: linear-gradient(120deg, var(--c), var(--grad2)); color: #fff; padding-bottom: 9mm; margin-bottom: 7mm; border-radius: 0 0 10mm 0; }
.tpl-aurore .cv-header--gradient .cv-headline, .tpl-aurore .cv-header--gradient .cv-contact, .tpl-aurore .cv-header--gradient .cv-ico { color: #fff; }
.tpl-aurore .cv-header--gradient .cv-photo { border: 1mm solid #fff; }
.tpl-aurore .cv-h { display: flex; align-items: center; gap: 3mm; }
.tpl-aurore .cv-h::after { content: ""; flex: 1; height: .3mm; background: var(--soft); }

/* Sakura — colonne droite douce */
.tpl-sakura .cv-header--top { background: var(--soft2); }
.tpl-sakura .cv-header--top .cv-photo { border: 1.2mm solid #fff; box-shadow: 0 0 0 .4mm var(--soft); }
.tpl-sakura .cv-name { font-weight: 700; color: var(--deep); }
.tpl-sakura .cv-sidebg { border-left: .3mm solid var(--soft); background: #fff; }
.tpl-sakura .cv-h { font-weight: 700; }
.tpl-sakura .cv-h span { background: var(--soft); padding: .6mm 3mm; border-radius: 3mm; }
.tpl-sakura .cv-tags li { border-radius: 5mm; }

/* Exécutif — classique centré, empattements */
.tpl-executive .cv-header--center { flex-direction: column; text-align: center; gap: 2mm; border-bottom: .8mm double var(--c); margin: 0 var(--pad) 6mm; padding: var(--pad) 0 5mm; }
.tpl-executive .cv-header .cv-photo { display: none; }
.tpl-executive .cv-name { font-weight: 700; font-size: 2.3em; color: var(--c); letter-spacing: .02em; }
.tpl-executive .cv-headline { color: var(--ink); font-style: italic; font-weight: 400; }
.tpl-executive .cv-contact { justify-content: center; }
.tpl-executive .cv-h { text-align: center; color: var(--c); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .95em; display: flex; align-items: center; gap: 3mm; }
.tpl-executive .cv-h::before, .tpl-executive .cv-h::after { content: ""; flex: 1; height: .25mm; background: var(--line); }
.tpl-executive .cv-item__sub { color: var(--ink); font-style: italic; font-weight: 400; }
.tpl-executive .cv-rich li::before { border-radius: 0; width: 1.2mm; height: 1.2mm; transform: rotate(45deg); }

/* Pixel — audacieux, blocs de couleur */
.tpl-pixel .cv-sidebg { background: #14161a; }
.tpl-pixel .cv-side { color: #e9ecef; padding-top: var(--pad); }
.tpl-pixel .cv-header--side { flex-direction: column; align-items: flex-start; padding: 0 0 6mm; gap: 3mm; }
.tpl-pixel .cv-header--side .cv-photo { border-radius: 0; width: 28mm; height: 28mm; box-shadow: 2mm 2mm 0 var(--c); }
.tpl-pixel .cv-name { font-size: 2em; color: #fff; text-transform: uppercase; line-height: .98; }
.tpl-pixel .cv-headline { background: var(--c); color: #14161a; display: inline-block; padding: .5mm 2mm; font-weight: 700; }
.tpl-pixel .cv-side .cv-contact { flex-direction: column; color: #cfd4da; }
.tpl-pixel .cv-side .cv-h { color: var(--c); }
.tpl-pixel .cv-side .cv-bar, .tpl-pixel .cv-side .cv-dots i { background: #2c3036; }
.tpl-pixel .cv-side .cv-tags li { background: #2c3036; color: #fff; border-color: #2c3036; }
.tpl-pixel .cv-side .cv-lang__lvl, .tpl-pixel .cv-side .cv-item__meta, .tpl-pixel .cv-side .cv-skill__kw { color: #aab2bb; }
.tpl-pixel .cv-main { padding-top: var(--pad); }
.tpl-pixel .cv-main .cv-h { display: inline-block; background: var(--c); color: #14161a; padding: .8mm 3mm; text-transform: uppercase; letter-spacing: .06em; font-size: 1em; }
.tpl-pixel .cv-main .cv-item__sub { color: var(--ink); }
.tpl-pixel .cv-main .cv-item__title { color: #14161a; }
.tpl-pixel .cv-rich li::before { border-radius: 0; }

/* Orbite — bande étroite de couleur + chronologie */
.tpl-orbite { padding-left: 4mm; }
.tpl-orbite::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4mm; background: var(--c); z-index: 2; }
.tpl-orbite .cv-header--top { padding-bottom: 6mm; }
.tpl-orbite .cv-name { color: var(--deep); }
.tpl-orbite .cv-sidebg { background: var(--soft2); }
.tpl-orbite .cv-h { color: var(--deep); }
.tpl-orbite .cv-h span { border-bottom: .8mm solid var(--c); padding-bottom: .4mm; }

/* Nordique — minimal, filet fin, petites capitales */
.tpl-nordique .cv-sidebg { background: #f7f8fa; }
.tpl-nordique .cv-side { padding-top: var(--pad); }
.tpl-nordique .cv-header--side { flex-direction: column; align-items: flex-start; padding: 0 0 6mm; gap: 3mm; border-bottom: .25mm solid var(--line); margin-bottom: 5mm; }
.tpl-nordique .cv-header--side .cv-photo { width: 26mm; height: 26mm; filter: grayscale(.2); }
.tpl-nordique .cv-name { font-weight: 300; font-size: 2.2em; letter-spacing: .02em; }
.tpl-nordique .cv-name { text-transform: none; }
.tpl-nordique .cv-headline { color: var(--c); font-weight: 600; text-transform: uppercase; font-size: .9em; letter-spacing: .08em; }
.tpl-nordique .cv-side .cv-contact { flex-direction: column; }
.tpl-nordique .cv-h { text-transform: uppercase; font-size: .92em; letter-spacing: .12em; color: var(--ink); font-weight: 700; font-size: 1.05em; }
.tpl-nordique .cv-main { padding-top: var(--pad); }
.tpl-nordique .cv-main .cv-sec { border-top: .25mm solid var(--line); padding-top: 3mm; }
.tpl-nordique .cv-main .cv-sec:first-child { border-top: 0; padding-top: 0; }
.tpl-nordique .cv-item__sub { color: var(--mute); }

/* Cascade — en-tête diagonal, puces dynamiques */
.tpl-cascade .cv-header--diag { position: relative; color: #fff; padding-bottom: 10mm; margin-bottom: 12mm; background: var(--c); }
.tpl-cascade .cv-header--diag::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0; border-top: 8mm solid var(--c); border-right: 210mm solid transparent; }
.tpl-cascade .cv-header--diag .cv-headline, .tpl-cascade .cv-header--diag .cv-contact, .tpl-cascade .cv-header--diag .cv-ico { color: #fff; }
.tpl-cascade .cv-header--diag .cv-photo { border: 1mm solid #fff; }
.tpl-cascade .cv-header--diag .cv-photo--initials span { color: var(--c); }
.tpl-cascade .cv-header--diag .cv-photo--initials { background: #fff; }
.tpl-cascade .cv-h { color: var(--deep); font-size: 1.25em; }
.tpl-cascade .cv-h span::before { content: ""; display: inline-block; width: 3mm; height: 3mm; background: var(--c); transform: skewX(-15deg); margin-right: 2.2mm; }
.tpl-cascade .cv-rich li::before { border-radius: 0; transform: skewX(-15deg); }

/* ---------- Interaction dans l'éditeur ---------- */
.cv--interactive [data-sec] { cursor: pointer; transition: outline-color .15s; outline: .5mm dashed transparent; outline-offset: 1mm; border-radius: 1mm; }
.cv--interactive [data-sec]:hover { outline-color: var(--ring); }
.cv--interactive .cv-sec { cursor: grab; }
.cv--interactive .sortable-ghost { opacity: .35; }
.cv--interactive .cv-item.sortable-chosen { background: var(--soft2); }

/* ---------- Impression A4 ---------- */
@media print {
  @page { size: A4; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .cv { width: 210mm; min-height: 297mm; overflow: visible; box-shadow: none !important; }
  .tpl-orbite::before { position: fixed; height: 100vh; }
  .cv-brand { position: fixed; bottom: 3mm; }
}