/* ============================================================
   CVFrontalier.ch — outil.css
   Styles spécifiques au wizard et aux templates CV
   ============================================================ */

/* ── Utilitaires ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
kbd {
  display: inline-block; padding: 1px 5px;
  background: #f0ede8; border: 1px solid #ccc;
  border-radius: 3px; font-size: .8em; font-family: monospace;
}

/* ── Body outil ───────────────────────────────────────────── */
.tool-body { background: #F0EEE8; }

/* ========================================================
   HEADER OUTIL
   ======================================================== */
.tool-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,246,241,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  height: 58px;
}
.tool-header__inner {
  display: flex; align-items: center; gap: 20px;
  height: 100%; padding: 0 20px;
}
.tool-header__inner .logo { font-size: 1.1rem; gap: 8px; }
.tool-header__inner .logo__text strong { color: var(--red); }

/* Barre de progression dans le header */
.tool-header__progress {
  flex: 1; display: flex; align-items: center; gap: 12px;
  max-width: 400px;
}
.tool-header__step-label { font-size: .85rem; color: var(--text-light); white-space: nowrap; }
.tool-header__step-label strong { color: var(--text); }
.tool-header__bar {
  flex: 1; height: 6px;
  background: var(--border); border-radius: 3px; overflow: hidden;
}
.tool-header__bar-fill {
  height: 100%; background: var(--red); border-radius: 3px;
  transition: width .4s ease;
  width: 14.28%; /* 1/7 */
}

.tool-header__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Badge autosave */
.autosave-badge {
  font-size: .75rem; color: #6b7280;
  transition: opacity .3s;
  white-space: nowrap;
}
.autosave-badge.is-saved { color: #22c55e; }

/* ========================================================
   WIZARD LAYOUT — deux panneaux
   ======================================================== */
.wizard-layout {
  display: flex;
  height: calc(100vh - 58px);
  overflow: hidden;
}

/* Panneau gauche — formulaire */
.wizard-panel {
  width: 52%;
  min-width: 380px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 0 0 24px;
}

/* Panneau droit — aperçu */
.preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #E8E5DF;
  overflow: hidden;
}

/* ========================================================
   STEPS NAVIGATOR
   ======================================================== */
.steps-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  flex-shrink: 0;
}
.steps-nav__list {
  display: flex; gap: 0; list-style: none;
  position: relative;
}
.steps-nav__list::before {
  content: ''; position: absolute;
  top: 18px; left: 18px; right: 18px; height: 2px;
  background: var(--border); z-index: 0;
}

.steps-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1; position: relative; z-index: 1;
}
.steps-nav__num {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
  background: var(--white); border: 2px solid var(--border);
  color: var(--text-light);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.steps-nav__label {
  font-size: .7rem; color: var(--text-light); font-weight: 600;
  white-space: nowrap;
}

/* ── Bouton de navigation ── */
.steps-nav__btn {
  background: none; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: default; /* surchargé selon l'état ci-dessous */
}

/* États */
.steps-nav__item.is-active .steps-nav__num {
  background: var(--red); border-color: var(--red); color: var(--white);
}
.steps-nav__item.is-active .steps-nav__label { color: var(--red); }
.steps-nav__item.is-active .steps-nav__btn { cursor: default; }

/* Étape terminée — fond solide (évite que la ligne passe à travers) */
.steps-nav__item.is-done .steps-nav__num {
  background: #e8fdf0;         /* vert clair SOLIDE, pas de transparence */
  border-color: #22c55e;
  color: transparent;          /* cacher le chiffre */
  position: relative;
}
/* Afficher ✓ par pseudo-élément */
.steps-nav__item.is-done .steps-nav__num::before {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #16a34a; font-size: 15px; font-weight: 700;
}
.steps-nav__item.is-done .steps-nav__label { color: #16a34a; }

/* Étapes terminées : curseur pointer + hover */
.steps-nav__item.is-done .steps-nav__btn { cursor: pointer; }
.steps-nav__item.is-done .steps-nav__btn:hover .steps-nav__num {
  background: #bbf7d0;
  transform: scale(1.08);
  transition: transform .15s, background .15s;
}

/* Étapes futures — non cliquables */
.steps-nav__item:not(.is-done):not(.is-active) .steps-nav__btn { cursor: default; }

/* ========================================================
   WIZARD STEPS
   ======================================================== */
.wizard-step {
  padding: 32px 28px 0;
  flex: 1;
}
.wizard-step[hidden] { display: none; }

.step-header { margin-bottom: 28px; }
.step-header h2 {
  font-size: 1.4rem; margin-bottom: 6px;
}
.step-header p {
  font-size: .9rem; color: var(--text-light); line-height: 1.55;
}

/* ── Navigation Précédent / Suivant ── */
.wizard-nav-row {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 28px 0;
  border-top: 1px solid var(--border);
  margin-top: 32px;
  flex-shrink: 0;
}

/* ========================================================
   FORM ELEMENTS
   ======================================================== */
.form-group { margin-bottom: 20px; }
.form-row { display: grid; gap: 16px; }
.form-row--2 { grid-template-columns: 1fr 1fr; }

.form-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--text);
  margin-bottom: 7px;
}
.req { color: var(--red); }
.opt { font-size: .8rem; color: var(--text-light); font-weight: 400; }

.form-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body); font-size: .95rem;
  color: var(--text); background: var(--white);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  -webkit-appearance: none;
}
.form-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(204,0,0,.1);
}
.form-input::placeholder { color: #aaa; }
.form-input.is-error { border-color: #ef4444; }

.form-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

.form-hint { font-size: .8rem; color: var(--text-light); margin-top: 6px; }

/* Compteur de caractères */
.char-counter {
  text-align: right; font-size: .78rem; color: var(--text-light);
  margin-top: 5px;
}

/* ── Info bubble ── */
.info-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: rgba(44,44,44,.1); border-radius: 50%;
  font-size: .75rem; font-weight: 700; color: var(--text-light);
  cursor: help; position: relative;
}
.info-bubble__tip {
  display: none;
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--text); color: var(--white);
  font-size: .78rem; line-height: 1.4; font-weight: 400;
  padding: 8px 12px; border-radius: 6px;
  width: 220px; z-index: 50;
  white-space: normal; pointer-events: none;
}
.info-bubble__tip--left {
  left: auto; right: 0; transform: none;
}
.info-bubble:hover .info-bubble__tip,
.info-bubble:focus .info-bubble__tip { display: block; }

/* ── Photo upload ── */
.photo-zone {
  display: flex; gap: 20px; align-items: center;
  padding: 16px; background: var(--white);
  border: 1.5px dashed var(--border); border-radius: 10px;
}
.photo-zone__preview {
  width: 80px; height: 104px;
  border-radius: 6px; overflow: hidden;
  background: #f0ede8;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  flex-shrink: 0;
  color: var(--text-light); font-size: .7rem; text-align: center;
  border: 1px solid var(--border);
}
.photo-zone__preview img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 5px;
}
.photo-zone__preview small { font-size: .62rem; color: #aaa; }
.photo-zone__actions { display: flex; flex-direction: column; gap: 8px; }
.btn--ghost { background: none; border: none; color: #ef4444; font-size: .8rem; padding: 4px 8px; }
.btn--ghost:hover { text-decoration: underline; }

/* ── Highlight checkbox (Permis G, références) ── */
.highlight-check {
  background: rgba(204,0,0,.04);
  border: 1.5px solid rgba(204,0,0,.2);
  border-radius: 10px; padding: 14px 16px;
}
.highlight-check__label {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
}
.highlight-check__label input[type=checkbox] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--red); cursor: pointer;
}
.highlight-check__body { flex: 1; }
.highlight-check__body strong { display: block; margin-bottom: 3px; font-size: .95rem; }
.highlight-check__body span { font-size: .85rem; color: var(--text-light); }

/* ── Pill checkboxes (cantons, permis conduire) ── */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: .875rem; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.pill-check:hover { border-color: var(--red); color: var(--red); }
.pill-check input { accent-color: var(--red); }
.pill-check:has(input:checked) {
  background: rgba(204,0,0,.08); border-color: var(--red); color: var(--red); font-weight: 600;
}

/* ── Aide box ── */
.aide-box {
  background: rgba(201,168,76,.1); border-left: 3px solid var(--gold);
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  font-size: .875rem; color: var(--text);
  margin-bottom: 12px; line-height: 1.5;
}

/* ── Suggestion chips ── */
.suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: .8rem; font-weight: 600; color: var(--text);
  cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--red); color: var(--red); background: rgba(204,0,0,.05); }

/* ── Dynamic items (expériences, formations, langues) ── */
.dynamic-item {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 20px; margin-bottom: 14px;
  position: relative;
}
.dynamic-item__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; cursor: pointer;
}
.dynamic-item__title {
  font-weight: 600; font-size: .95rem; color: var(--text);
}
.dynamic-item__remove {
  background: none; border: none;
  color: var(--text-light); font-size: .8rem;
  cursor: pointer; padding: 4px 8px; border-radius: 4px;
  transition: color .15s, background .15s;
}
.dynamic-item__remove:hover { color: #ef4444; background: rgba(239,68,68,.08); }

.dynamic-item__body { display: flex; flex-direction: column; gap: 14px; }

/* En cours checkbox */
.en-cours-check {
  display: flex; align-items: center; gap: 8px;
  font-size: .875rem; cursor: pointer;
}
.en-cours-check input { accent-color: var(--red); }

/* Equivalence suisse — aide auto */
.equiv-hint {
  font-size: .78rem; color: var(--red); margin-top: 4px; font-style: italic;
}

/* Tableau équivalences */
.equiv-table-block {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  margin-bottom: 20px;
}
.equiv-table-block summary {
  font-size: .875rem; font-weight: 600; cursor: pointer;
  color: var(--text); list-style: none;
}
.equiv-table-block summary::-webkit-details-marker { display: none; }
.equiv-table-inner { margin-top: 14px; overflow-x: auto; }
.equiv-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.equiv-table th {
  background: rgba(204,0,0,.06); text-align: left;
  padding: 8px 12px; font-weight: 700; font-size: .8rem; color: var(--text);
}
.equiv-table td { padding: 7px 12px; border-top: 1px solid var(--border); }
.equiv-table tr:hover td { background: var(--bg); }

/* Add item button */
.add-item-btn {
  width: 100%; justify-content: center; gap: 8px;
  margin-top: 4px;
}

/* ── Tags input (compétences) ── */
.tags-box {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; background: var(--white);
  border: 1.5px solid var(--border); border-radius: 8px;
  min-height: 48px;
  transition: border-color .15s, box-shadow .15s;
}
.tags-box:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(204,0,0,.1);
}
.tags-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-item {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(204,0,0,.08); color: var(--red);
  border: 1px solid rgba(204,0,0,.2);
  padding: 3px 10px 3px 10px; border-radius: 20px;
  font-size: .82rem; font-weight: 600;
}
.tag-item__remove {
  background: none; border: none; color: var(--red);
  cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 0 0 0 2px;
  opacity: .7;
}
.tag-item__remove:hover { opacity: 1; }
.tags-input {
  flex: 1; min-width: 140px; border: none; outline: none;
  font-family: var(--font-body); font-size: .9rem;
  color: var(--text); background: transparent;
  padding: 2px 0;
}

/* ── Langue row ── */
.langue-row {
  display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
}
.langue-row .form-input { flex: 1; }
.langue-row select.form-input { width: 140px; flex: none; }
.langue-row .btn--ghost { flex-shrink: 0; }

/* ── Template grid ── */
.template-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 4px;
}
.tpl-card {
  background: var(--white); border: 2px solid var(--border);
  border-radius: 10px; overflow: hidden; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-align: center; padding: 0;
}
.tpl-card:hover { border-color: #aaa; transform: translateY(-2px); box-shadow: var(--shadow); }
.tpl-card.is-selected {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(204,0,0,.15);
}
.tpl-card__thumb { height: 90px; overflow: hidden; }
.tpl-card__footer {
  padding: 8px 4px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.tpl-card__name { font-size: .8rem; font-weight: 700; color: var(--text); }
.tpl-badge { font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.tpl-badge--free     { background: rgba(34,197,94,.12);  color: #16a34a; }
.tpl-badge--premium  { background: rgba(201,168,76,.15); color: #a8882a; }
.tpl-badge--unlocked { background: rgba(34,197,94,.12);  color: #16a34a; }

/* Mini thumbs des templates */
.tpl-thumb { width: 100%; height: 90px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }

.tpl-thumb--classique { background: #fff; }
.tpl-thumb--classique .tpl-thumb__top { height: 20px; background: #2C2C2C; border-radius: 2px; margin-bottom: 2px; }
.tpl-thumb--classique .tpl-thumb__divider { height: 2px; background: var(--red); margin: 2px 0; }
.tpl-thumb__line { height: 5px; background: #e0ddd6; border-radius: 2px; }
.tpl-thumb__line--short { width: 55%; }
.tpl-thumb__line--medium { width: 75%; }

.tpl-thumb--geneve { background: #fff; display: flex; gap: 0; padding: 0; border-left: 4px solid var(--red); }
.tpl-thumb--geneve .tpl-thumb__main { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; }

.tpl-thumb--alpin { background: #fff; padding: 0; }
.tpl-thumb--alpin .tpl-thumb__header-alpin { height: 24px; background: #1a2744; }
.tpl-thumb--alpin .tpl-thumb__cols { display: flex; gap: 4px; padding: 8px; }
.tpl-thumb--alpin .tpl-thumb__col-left { width: 40%; display: flex; flex-direction: column; gap: 4px; }
.tpl-thumb--alpin .tpl-thumb__col-right { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.tpl-thumb--executive { background: #2C2C2C; }
.tpl-thumb--executive .tpl-thumb__exec-top { height: 18px; background: #444; margin-bottom: 4px; border-radius: 2px; }
.tpl-thumb--executive .tpl-thumb__gold-rule { height: 1px; background: var(--gold); margin: 4px 0; }
.tpl-thumb--executive .tpl-thumb__line { background: #555; }

/* ── Download options ── */
.dl-options { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 16px; }
.dl-option {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px 18px;
  position: relative;
}
.dl-option--featured { border-color: var(--red); }
.dl-option--premium { border-color: var(--gold); }
.dl-option__badge {
  position: absolute; top: -11px; left: 18px;
  background: var(--red); color: var(--white);
  font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 10px;
}
.dl-option__info { flex: 1; }
.dl-option__info h4 { font-size: .95rem; margin-bottom: 2px; }
.dl-option__info p { font-size: .82rem; color: var(--text-light); }
.dl-reassurance {
  font-size: .8rem; color: var(--text-light); text-align: center; line-height: 1.5;
}

/* ========================================================
   PANNEAU APERÇU (droite)
   ======================================================== */
.preview-panel__toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(248,246,241,.95);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.preview-panel__title { font-size: .85rem; font-weight: 700; color: var(--text); flex: 1; }

.zoom-controls { display: flex; align-items: center; gap: 8px; }
.zoom-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--white);
  font-size: 1rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.zoom-btn:hover { border-color: var(--red); color: var(--red); }
.zoom-level { font-size: .8rem; color: var(--text-light); min-width: 36px; text-align: center; }

.preview-close-btn {
  display: none; /* visible seulement sur mobile */
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--border); border: none;
  font-size: .9rem; cursor: pointer;
}

.preview-panel__body {
  flex: 1;
  min-height: 0;           /* indispensable : permet au flex-item de se contracter */
  overflow-y: auto;        /* scrollbar verticale quand le CV dépasse la hauteur */
  overflow-x: auto;        /* scrollbar horizontale si panneau < largeur CV (794px) */
  padding: 24px;
  /* Scroll natif fluide — iOS et desktop */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
/* Scrollbar stylisée — visible mais discrète (verticale + horizontale) */
.preview-panel__body::-webkit-scrollbar       { width: 6px; height: 6px; }
.preview-panel__body::-webkit-scrollbar-track { background: transparent; }
.preview-panel__body::-webkit-scrollbar-thumb {
  background: rgba(44,44,44,.2); border-radius: 3px;
}
.preview-panel__body::-webkit-scrollbar-thumb:hover {
  background: rgba(44,44,44,.4);
}
.preview-panel__body::-webkit-scrollbar-corner { background: transparent; }

.preview-scaler {
  transform-origin: top left;
  /* display: block par défaut — ne pas remettre display:flex ici */
}

/* ── Filigrane preview (templates non débloqués) ─────── */
.preview-watermark {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.preview-watermark[hidden] { display: none; }
.preview-watermark__inner {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 48px,
    rgba(204,0,0,.0) 48px,
    rgba(204,0,0,.0) 50px
  );
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
}
/* Généré via JS — on utilise un pseudo-pattern CSS + content SVG */
.preview-watermark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='180'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' transform='rotate(-35 210 90)' font-family='Arial,sans-serif' font-size='18' font-weight='700' fill='rgba(204%2C0%2C0%2C0.22)' letter-spacing='2'%3ECVFrontalier.ch%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 420px 180px;
}

/* Overlay mobile */
.preview-overlay {
  display: none; /* géré par JS */
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 149;
}

/* ========================================================
   CV PAGE — styles communs
   ======================================================== */
.cv-page {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  color: #2C2C2C;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 4px 32px rgba(0,0,0,.15);
  /* Texte net (style AttractiveCV) : lissage en niveaux de gris au lieu du
     sous-pixel, qui paraît épais/flou surtout en blanc sur fond sombre. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Placeholder (données non remplies) */
.cv-placeholder { color: #ccc; font-style: italic; }
.cv-photo-placeholder {
  width: 100%; height: 100%; background: #f0ede8;
  display: flex; align-items: center; justify-content: center;
}

/* Divider visuel entre sections majeures */
.cv-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.08), transparent);
  margin: 16px 0;
}

/* ── Section commune ── */
.cv-sec { margin-bottom: 10px; }
.cv-sec-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 5px;
  padding-bottom: 3px;
}
.cv-line { height: 1px; background: currentColor; opacity: .2; margin-bottom: 8px; }
.cv-exp-item, .cv-form-item { margin-bottom: 9px; }
.cv-exp-item:last-child, .cv-form-item:last-child { margin-bottom: 0; }
.cv-exp-head { display: flex; justify-content: space-between; gap: 8px; }
.cv-exp-title { font-weight: 700; font-size: 10.5px; }
.cv-exp-dates { font-size: 9.5px; color: #666; white-space: nowrap; }
.cv-exp-company { font-size: 10px; color: #555; margin-bottom: 3px; }
.cv-exp-desc { font-size: 10px; color: #444; line-height: 1.45; }
.cv-exp-bullets {
  list-style: disc inside;
  margin: 4px 0 0 0; padding-left: 8px;
  font-size: 11px; color: #444; line-height: 1.7;
}
.cv-exp-bullets li { margin-bottom: 2px; }
.cv-badge-permis {
  display: inline-block; background: rgba(0,0,0,.05); color: var(--cv-accent, #CC0000);
  border: 1px solid rgba(0,0,0,.18); border-radius: 3px;
  font-size: 8.5px; font-weight: 700; padding: 1px 6px;
  vertical-align: middle; margin-right: 4px;
}
.cv-canton-list { font-size: 9px; color: #888; }
.cv-lang-row { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 3px; }
.cv-lang-level { color: #777; font-style: italic; font-size: 9.5px; }
.cv-skill-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-skill-tag {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  font-size: 9px; font-weight: 600;
}
.cv-complement { font-size: 10px; color: #444; margin-bottom: 4px; line-height: 1.65; }
.cv-accroche-txt { font-size: 10.5px; color: #333; line-height: 1.55; }

/* ========================================================
   TEMPLATE : Classique — Premium Clean
   Inspiré Zety Simple / Canva Clean
   ======================================================== */
.cv-page.tpl-classique { padding: 44px 46px 44px; }

.cv-cl-header {
  display: flex; gap: 18px; justify-content: space-between;
  align-items: flex-start; padding-bottom: 14px;
  border-bottom: 2px solid #CC0000; margin-bottom: 18px;
}
.cv-cl-hd-info  { flex: 1; }
.cv-cl-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(22px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a;
  line-height: 1.1; margin-bottom: 3px; letter-spacing: .01em;
}
.cv-cl-jobtitle {
  font-size: calc(10.5px * var(--cv-fs, 1)); color: #CC0000; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px;
}
.cv-cl-contact {
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  font-size: 9px; color: #555; margin-bottom: 5px;
}
.cv-cl-contact-dot { color: #ccc; margin: 0 2px; }
.cv-cl-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.cv-cl-permis {
  font-size: 8px; font-weight: 700; padding: 1px 7px; border-radius: 2px;
  background: rgba(204,0,0,.07); color: #CC0000; border: 1px solid rgba(204,0,0,.2);
}
.cv-cl-canton  { font-size: 8.5px; color: #999; }
.cv-cl-photo {
  width: 88px; height: 114px; flex-shrink: 0; border-radius: 3px;
  overflow: hidden; border: 1px solid #e0ddd6;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.cv-cl-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-cl-photo-ph {
  width: 100%; height: 100%; background: #f2eeea;
  display: flex; align-items: center; justify-content: center;
}

/* Sections — espacements & police pilotés par les sliders d'ajustement (Classique) */
.cv-cl-sec   { margin-bottom: calc(18px * var(--cv-sec-gap, 1)); break-inside: avoid; page-break-inside: avoid; }
.cv-cl-sec-title {
  font-size: calc(10px * var(--cv-fs, 1)); font-weight: 900; text-transform: uppercase;
  letter-spacing: .12em; color: #CC0000;
  border-left: 3px solid #CC0000; padding-left: 7px;
  padding-bottom: 4px; margin-bottom: 12px; line-height: 1;
}
.cv-cl-accroche { font-size: calc(11.5px * var(--cv-fs, 1)); color: #333; line-height: var(--cv-lh, 1.75); }

/* Expériences */
.cv-cl-exp { margin-bottom: calc(14px * var(--cv-item-gap, 1)); }
.cv-cl-exp-head {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.cv-cl-exp-title   { font-size: calc(12px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-cl-exp-dates   { font-size: 9px; color: #999; white-space: nowrap; flex-shrink: 0; }
.cv-cl-exp-co      { font-size: calc(10.5px * var(--cv-fs, 1)); color: #CC0000; font-style: italic; margin-bottom: 2px; }
.cv-cl-exp-desc    { font-size: calc(11px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.7); }
.cv-cl-form        { margin-bottom: calc(12px * var(--cv-item-gap, 1)); }

/* Compétences & Langues */
.cv-cl-skills   { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-cl-skill {
  background: rgba(204,0,0,.07); color: #CC0000;
  border: 1px solid rgba(204,0,0,.18);
  padding: 2px 8px; border-radius: 2px; font-size: calc(10px * var(--cv-fs, 1)); font-weight: 600;
}
.cv-cl-lang-row {
  display: flex; justify-content: space-between;
  font-size: calc(9.5px * var(--cv-fs, 1)); margin-bottom: 3px; color: #333;
}
.cv-cl-lang-level { color: #999; font-style: italic; font-size: 9px; }
.cv-cl-cols       { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.cv-cl-compl      { font-size: 9.5px; color: #444; margin-bottom: 3px; line-height: 1.65; }


/* ========================================================
   SYSTÈME 2 COLONNES — Genève · Alpin · Executive
   Sidebar 35% colorée + contenu principal 65% blanc
   ======================================================== */
.cv-page.tpl-geneve,
.cv-page.tpl-alpin,
.cv-page.tpl-executive { padding: 0; }

.cv-2col { display: flex; min-height: 1123px; }

/* ── Refonte AttractiveCV (calibrée A4) : hiérarchie nette, lignes fines,
      hiérarchie par graisse plutôt qu'italique, espacement généreux ── */
.cv-2col__left {
  width: 34%; flex-shrink: 0;
  padding: 42px 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.cv-2col__right {
  flex: 1; background: #fff;
  padding: 42px 34px;
  display: flex; flex-direction: column; gap: 0;
}

/* Photo circulaire, anneau fin + ombre subtile */
.cv-2col__photo-wrap { display: flex; justify-content: center; margin-bottom: 6px; }
.cv-2col__photo {
  width: 106px; height: 106px; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 3px 14px rgba(0,0,0,.18);
}
.cv-2col__photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-2col__photo-ph {
  width: 100%; height: 100%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}

/* Identité sidebar — nom prominent */
.cv-2col__identity { text-align: center; }
.cv-2col__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(21px * var(--cv-fs, 1)); font-weight: 700; color: #fff;
  line-height: 1.15; margin-bottom: 5px; letter-spacing: .01em;
}
.cv-2col__jobtitle {
  font-size: calc(9px * var(--cv-fs, 1)); color: rgba(255,255,255,.72);
  text-transform: uppercase; letter-spacing: .16em; margin-bottom: 9px;
}
.cv-2col__permis-badge {
  display: inline-block;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.32); border-radius: 3px;
  font-size: 8px; font-weight: 600; padding: 2px 9px; letter-spacing: .03em;
}
.cv-2col__canton { font-size: 8px; color: rgba(255,255,255,.5); margin-top: 5px; }

/* Blocs sidebar — titres nets, ligne fine 1px */
.cv-2col__block { display: flex; flex-direction: column; }
.cv-2col__sec-title {
  font-size: calc(8.5px * var(--cv-fs, 1)); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 6px; margin-bottom: 10px;
}
.cv-2col__contact-item { font-size: calc(8.5px * var(--cv-fs, 1)); color: rgba(255,255,255,.92); line-height: 1.9; word-break: break-word; }

/* Tags compétences — géométriques, épurés */
.cv-2col__skill-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-2col__skill-tag {
  font-size: calc(8px * var(--cv-fs, 1)); font-weight: 600;
  background: rgba(255,255,255,.16); color: #fff;
  border-radius: 3px; padding: 3px 8px;
}

/* Langues + dots CECR */
.cv-2col__lang-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 7px;
}
.cv-2col__lang-name  { font-size: calc(9px * var(--cv-fs, 1)); color: rgba(255,255,255,.96); }
.cv-2col__lang-dots  { display: flex; gap: 2.5px; }
.cv-2col__lang-dot   { width: 7px; height: 7px; border-radius: 50%; }
.cv-2col__lang-dot--full  { background: rgba(255,255,255,.85); }
.cv-2col__lang-dot--empty { background: rgba(255,255,255,.16); }

/* Colonne droite : sections — air généreux, titre net, filet 1px */
.cv-2col__right-sec { margin-bottom: calc(22px * var(--cv-sec-gap, 1)); }
.cv-2col__right-title {
  font-size: calc(11px * var(--cv-fs, 1)); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; border-bottom: 1px solid;
  padding-bottom: 6px; margin-bottom: 13px;
}
.cv-2col__accroche { font-size: calc(10px * var(--cv-fs, 1)); color: #333; line-height: var(--cv-lh, 1.75); }

/* Expériences — hiérarchie par graisse (pas d'italique) */
.cv-2col__exp       { margin-bottom: calc(15px * var(--cv-item-gap, 1)); }
.cv-2col__exp-head  { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-2col__exp-title { font-size: calc(11px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-2col__exp-dates { font-size: calc(8.5px * var(--cv-fs, 1)); color: #999; white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.cv-2col__exp-co    { font-size: calc(9.5px * var(--cv-fs, 1)); font-weight: 600; color: #555; margin-bottom: 4px; }
.cv-2col__exp-bullets { margin: 3px 0 0; padding-left: 13px; }
.cv-2col__exp-bullet  { font-size: calc(10px * var(--cv-fs, 1)); color: #333; line-height: var(--cv-lh, 1.6); margin-bottom: 2px; }

/* Formation */
.cv-2col__form       { margin-bottom: calc(11px * var(--cv-item-gap, 1)); }
.cv-2col__form-head  { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-2col__form-title { font-size: calc(11px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-2col__form-year  { font-size: calc(8.5px * var(--cv-fs, 1)); color: #999; white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.cv-2col__form-co    { font-size: calc(9.5px * var(--cv-fs, 1)); color: #777; }
.cv-2col__form-equiv { font-style: italic; font-size: calc(8.5px * var(--cv-fs, 1)); }
.cv-2col__compl      { font-size: calc(10px * var(--cv-fs, 1)); color: #333; margin-bottom: 3px; line-height: var(--cv-lh, 1.7); }

/* Bullet points template Classique */
.cv-cl-exp-bullets { margin: 2px 0 0; padding-left: 11px; }
.cv-cl-exp-bullet  { font-size: calc(11px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.7); margin-bottom: 1px; }

/* ── Couleurs Genève : bordeaux ── */
.tpl-geneve .cv-2col__left          { background: #7A1A1A; }
.tpl-geneve .cv-2col__right-title   { color: #7A1A1A; border-bottom-color: rgba(122,26,26,.22); }
.tpl-geneve .cv-2col__exp-dates     { color: #7A1A1A; }
.tpl-geneve .cv-2col__exp-co        { color: #7A1A1A; }
.tpl-geneve .cv-2col__form-equiv    { color: #7A1A1A; }
.tpl-geneve .cv-2col__form-year     { color: #7A1A1A; }

/* ── Couleurs Alpin : navy + or ── */
.tpl-alpin .cv-2col__left           { background: #1a2744; }
.tpl-alpin .cv-2col__lang-dot--full { background: #C9A84C; }
.tpl-alpin .cv-2col__skill-tag      { background: rgba(201,168,76,.2); color: #C9A84C; }
.tpl-alpin .cv-2col__right-title    { color: #1a2744; border-bottom-color: rgba(26,39,68,.22); }
.tpl-alpin .cv-2col__exp-co         { color: #1a2744; }
.tpl-alpin .cv-2col__form-equiv     { color: #C9A84C; }
.tpl-alpin .cv-2col__form-year      { color: #1a2744; }

/* ── Couleurs Executive : anthracite + or ── */
.tpl-executive .cv-2col__left           { background: #1C1C2E; }
.tpl-executive .cv-2col__lang-dot--full { background: #C9A84C; }
.tpl-executive .cv-2col__skill-tag      { background: rgba(201,168,76,.18); color: #C9A84C; }
.tpl-executive .cv-2col__right-title    { color: #C9A84C; border-bottom-color: rgba(201,168,76,.3); }
.tpl-executive .cv-2col__exp-dates      { color: #C9A84C; font-weight: 600; }
.tpl-executive .cv-2col__exp-co         { color: #C9A84C; }
.tpl-executive .cv-2col__form-year      { color: #C9A84C; font-weight: 600; }
.tpl-executive .cv-2col__form-equiv     { color: #C9A84C; }

/* (anciennes classes gv2/al/ex conservées pour compatibilité — inutilisées) */

/* ========================================================
   DATE SELECTS (Mois + Année)
   ======================================================== */
.date-selects { display: flex; gap: 6px; }
.date-sel { padding: 10px 10px; font-size: .875rem; }

/* Période : ligne début → fin */
.date-range-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.date-range-sep { color: #aaa; font-size: .85rem; flex-shrink: 0; }

/* Badge "Présent" — remplace les selects quand enCours = true */
.present-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 18px;
  background: rgba(34,197,94,.08);
  color: #16a34a;
  border: 1.5px solid rgba(34,197,94,.3);
  border-radius: 8px;
  font-size: .9rem; font-weight: 700;
  letter-spacing: .02em;
}

/* ========================================================
   SUGGESTIONS COMPÉTENCES PAR SECTEUR
   ======================================================== */
.skill-sector-list { display: flex; flex-direction: column; gap: 10px; }
.skill-sector-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.skill-sector__label {
  font-size: .78rem; font-weight: 700; color: var(--text-light);
  min-width: 72px; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Tag ajouté : coché visuellement */
.chip--skill.is-added {
  background: rgba(204,0,0,.12);
  border-color: var(--red);
  color: var(--red);
}
.chip--skill.is-added::after { content: ' ✓'; font-size: .75em; }

/* ========================================================
   SUGGESTIONS LOISIRS (centres d'intérêt)
   ======================================================== */
.hobby-chips { margin-bottom: 10px; }
.chip--hobby {
  font-size: .8rem;
  transition: background .15s, border-color .15s, transform .1s;
}
.chip--hobby:hover { transform: translateY(-1px); }
.chip--hobby.is-added {
  background: rgba(201,168,76,.15);
  border-color: var(--gold);
  color: var(--gold-dark);
}

/* ========================================================
   MODALE PLEIN ÉCRAN — APERÇU CV
   ======================================================== */
.cv-fullscreen {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(18,18,18,.96);
  display: flex; flex-direction: column;
  animation: fs-fade-in .2s ease;
}
.cv-fullscreen[hidden] { display: none; }

@keyframes fs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cv-fullscreen__bar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.cv-fullscreen__title {
  flex: 1; color: rgba(255,255,255,.75);
  font-size: .875rem; font-weight: 600;
}
.cv-fullscreen__body {
  flex: 1; overflow-y: auto; overflow-x: auto;
  padding: 40px 24px;
  display: flex; justify-content: center; align-items: flex-start;
  -webkit-overflow-scrolling: touch;
}
.cv-fullscreen__scaler {
  transform-origin: top center;
  flex-shrink: 0;
}

/* Surcharge des contrôles zoom dans la modale */
.cv-fullscreen .zoom-btn {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.cv-fullscreen .zoom-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}
.cv-fullscreen .zoom-level { color: rgba(255,255,255,.6); }
.cv-fullscreen__close {
  color: rgba(255,255,255,.8) !important;
  border-color: rgba(255,255,255,.3) !important;
  background: transparent !important;
}
.cv-fullscreen__close:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* ========================================================
   RESPONSIVE
   ======================================================== */

/* Tablette (≤ 1024px) : preview moins large */
@media (max-width: 1024px) {
  .wizard-panel { width: 55%; }
}

/* ≤ 900px : layout vertical, preview en overlay mobile */
@media (max-width: 900px) {
  .wizard-layout { height: auto; flex-direction: column; overflow: visible; }

  .wizard-panel {
    width: 100%; min-width: 0;
    height: auto; overflow-y: visible;
    border-right: none; border-bottom: 1px solid var(--border);
  }

  /* Preview en position fixe (drawer) sur mobile */
  .preview-panel {
    position: fixed; inset: 0;
    z-index: 150;
    transform: translateX(100%);
    transition: transform .3s ease;
    width: 100%;
  }
  .preview-panel.is-open { transform: translateX(0); }

  .preview-overlay { display: block; }
  .preview-overlay[hidden] { display: none; }

  .preview-close-btn { display: flex; align-items: center; justify-content: center; }

  #previewToggleBtn { display: flex; }

  .template-grid { grid-template-columns: repeat(2, 1fr); }

  .form-row--2 { grid-template-columns: 1fr; }

  .steps-nav__label { display: none; }
  .steps-nav { padding: 12px 16px; }
}

@media (max-width: 600px) {
  .wizard-step { padding: 24px 16px 0; }
  .wizard-nav-row { padding: 16px 16px 0; }
  .steps-nav { padding: 10px 12px; }
  .dl-option { flex-direction: column; text-align: center; }
  .dl-option .btn { width: 100%; justify-content: center; }
}

/* ========================================================
   ÉTAPE 0 — SÉLECTEUR DE STYLE
   ======================================================== */
.wizard-step--style { padding-bottom: 16px; }

/* ── Grille de structures (10 layouts) ─────────────────── */
.struct-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.struct-grid--sm {
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.struct-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-align: center;
}
.struct-card:hover { border-color: #aaa; transform: translateY(-2px); box-shadow: var(--shadow); }
.struct-card.is-selected {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(204,0,0,.15);
}
.struct-card__label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 4px 6px;
  border-top: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; color: var(--text);
}
.struct-card--sm .struct-card__label { padding: 3px 2px 4px; font-size: .65rem; }

/* ── Template verrouillé ──────────────────────────────── */
.struct-card--locked {
  opacity: .72;
  cursor: pointer;
  position: relative;
}
.struct-card--locked:hover {
  border-color: #CC0000;
  box-shadow: 0 4px 12px rgba(204,0,0,.18);
  transform: translateY(-2px);
  opacity: 1;
}
.struct-card__lockicon {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* ── Modal verrouillage template ─────────────────────── */
.tpl-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.tpl-modal.is-open { display: flex; }
.tpl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}
.tpl-modal__box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 2rem 1.75rem 1.5rem;
  max-width: 400px;
  width: calc(100% - 2rem);
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1)  translateY(0);    }
}
.tpl-modal__icon { font-size: 2rem; margin-bottom: .5rem; }
.tpl-modal__title {
  font-size: 1.2rem; font-weight: 800; color: #1a1a1a;
  margin: 0 0 .2rem;
}
.tpl-modal__name {
  font-size: .9rem; color: #CC0000; font-weight: 700;
  margin: 0 0 .6rem;
}
.tpl-modal__desc {
  font-size: .85rem; color: #666; line-height: 1.55;
  margin: 0 0 1.4rem;
}
.tpl-modal__actions { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.tpl-modal__btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; font-family: inherit; transition: transform .15s, box-shadow .15s;
  text-align: left;
}
.tpl-modal__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.tpl-modal__btn--essentiel { background: #fffbf0; border-color: #f0c040; }
.tpl-modal__btn--premium   { background: #CC0000; border-color: #CC0000; color: #fff; }
.tpl-modal__price { font-size: 1.25rem; font-weight: 800; white-space: nowrap; }
.tpl-modal__offer { font-size: .75rem; opacity: .85; line-height: 1.35; max-width: 200px; }
.tpl-modal__cancel {
  background: none; border: none; color: #aaa;
  font-size: .82rem; cursor: pointer; font-family: inherit; padding: .3rem 1rem;
}
.tpl-modal__cancel:hover { color: #555; }

/* ── Miniatures de structures ──────────────────────────── */
.struct-thumb {
  width: 100%; height: 80px;
  display: flex; flex-direction: column;
  padding: 7px; gap: 3px;
  background: #fff; overflow: hidden;
}
.struct-card--sm .struct-thumb { height: 60px; padding: 5px; gap: 2px; }

/* Lignes génériques */
.sth__l { height: 5px; background: #ddd; border-radius: 2px; width: 100%; }
.sth__l--md { width: 70%; }
.sth__l--sm { width: 45%; }
.sth__l--wh { background: rgba(255,255,255,.6); }

/* Classique */
.struct-thumb--classique { }
.sth__cl-head { height: 14px; background: #2C2C2C; border-radius: 2px; margin-bottom: 2px; }
.sth__cl-rule { height: 2px; background: var(--tpl-accent, #CC0000); margin-bottom: 3px; }

/* Minimaliste */
.struct-thumb--minimaliste { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sth__mn-name { height: 9px; width: 60%; background: #2C2C2C; border-radius: 2px; margin-bottom: 3px; }
.sth__mn-rule { height: 1px; width: 80%; background: #ccc; margin-bottom: 0; }

/* Bicolonne */
.struct-thumb--bicolonne { flex-direction: row; padding: 0; gap: 0; }
.sth__bc-sidebar { width: 36%; background: var(--tpl-sidebar, #2C2C2C); flex-shrink: 0; }
.sth__bc-content { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 4px; }

/* Modern */
.struct-thumb--modern { padding: 0; gap: 0; }
.sth__mod-hdr {
  height: 28px; background: var(--tpl-accent, #2C2C2C);
  display: flex; align-items: center; gap: 6px; padding: 0 8px; flex-shrink: 0;
}
.sth__mod-circle {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.35); flex-shrink: 0;
}
.sth__mod-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }

/* Compact */
.struct-thumb--compact { }
.sth__cmp-head { height: 10px; background: #2C2C2C; border-radius: 2px; margin-bottom: 2px; }
.sth__cmp-lines { display: flex; flex-direction: column; gap: 2px; }

/* Élégant */
.struct-thumb--elegant { align-items: center; justify-content: center; }
.sth__elg-name { height: 9px; width: 55%; background: #1a1a1a; border-radius: 2px; margin-bottom: 3px; }
.sth__elg-sep  { height: 1px; width: 70%; background: var(--tpl-accent, #2C2C2C); margin-bottom: 3px; }

/* Corporate */
.struct-thumb--corporate { }
.sth__corp-hdr { height: 18px; background: var(--tpl-accent, #2C2C2C); border-radius: 2px; margin-bottom: 3px; }
.sth__corp-sep { height: 1px; background: var(--tpl-accent, #2C2C2C); opacity: .3; margin: 2px 0; }

/* Créatif */
.struct-thumb--creative { flex-direction: row; padding: 0; }
.sth__crea-bar { width: 8px; background: var(--tpl-accent, #2C2C2C); flex-shrink: 0; }
.sth__crea-body { flex: 1; padding: 7px; display: flex; flex-direction: column; gap: 3px; }

/* Executive */
.struct-thumb--executive { padding: 0; }
.sth__exec-hdr {
  height: 24px; background: #1a1a1a;
  display: flex; align-items: center; gap: 6px; padding: 0 7px; flex-shrink: 0;
}
.sth__exec-ph { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.25); flex-shrink: 0; }
.sth__exec-nm { flex: 1; height: 6px; background: rgba(255,255,255,.5); border-radius: 2px; }
.sth__exec-rule { height: 1.5px; background: var(--tpl-accent, #B8960C); flex-shrink: 0; }
.sth__exec-hdr + .sth__exec-rule + div { padding: 5px 8px; }

/* Swiss */
.struct-thumb--swiss { flex-direction: row; padding: 0; }
.sth__sw-wrap { display: flex; flex-direction: row; width: 100%; height: 100%; }
.sth__sw-bar { width: 4px; background: var(--tpl-accent, #CC0000); flex-shrink: 0; }
.sth__sw-body { flex: 1; padding: 7px; display: flex; flex-direction: column; gap: 3px; }

/* ── Palette de couleurs (12 swatches) ─────────────────── */
.color-palette {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.color-swatch {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  cursor: pointer; font-size: .78rem; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.color-swatch:hover { border-color: #aaa; }
.color-swatch.is-selected {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(204,0,0,.12);
  font-weight: 600;
}
.color-swatch--sm { padding: 4px 8px; font-size: .72rem; }
.color-swatch__dot {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0; border: 1px solid rgba(0,0,0,.1);
}
.color-swatch--sm .color-swatch__dot { width: 12px; height: 12px; }
.color-swatch__name { white-space: nowrap; }
.color-swatch__lock { font-size: .75rem; opacity: .5; }
.color-swatch--locked {
  opacity: .65;
  cursor: pointer;
}
.color-swatch--locked:hover {
  border-color: #CC0000;
  opacity: 1;
}

/* ── Notice gratuit (étape 0) ───────────────────────────── */
.style-free-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.3);
  border-radius: 8px; padding: 10px 14px;
  font-size: .82rem; color: var(--text);
  margin-top: 4px;
}
.style-free-notice__badge {
  background: #22c55e; color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
}
.style-free-notice__sep { color: #ccc; }

/* ========================================================
   CSS VARIABLES PAR DÉFAUT sur .cv-page
   (overridées par JS pour chaque couleur choisie)
   ======================================================== */
.cv-page {
  --cv-accent:  #2C2C2C;
  --cv-sidebar: #2C2C2C;
}

/* ========================================================
   TEMPLATE : Classique — mise à jour CSS vars
   ======================================================== */
.tpl-classique .cv-cl-header      { border-bottom-color: var(--cv-accent); }
.tpl-classique .cv-cl-sec-title   { color: var(--cv-accent); border-left-color: var(--cv-accent); }
.tpl-classique .cv-cl-jobtitle    { color: var(--cv-accent); }
.tpl-classique .cv-cl-exp-co      { color: var(--cv-accent); }
.tpl-classique .cv-cl-skill       { color: var(--cv-accent); border-color: rgba(0,0,0,.15); background: rgba(0,0,0,.05); }
.tpl-classique .cv-cl-permis      { color: var(--cv-accent); border-color: rgba(0,0,0,.15); background: rgba(0,0,0,.05); }

/* ========================================================
   TEMPLATE : Bicolonne — CSS vars (remplace tpl-geneve/alpin/executive)
   ======================================================== */
.tpl-bicolonne .cv-2col__left              { background: var(--cv-sidebar); }
.tpl-bicolonne .cv-2col__right-title       { color: var(--cv-accent); border-bottom-color: rgba(0,0,0,.12); }
.tpl-bicolonne .cv-2col__exp-dates         { color: var(--cv-accent); }
.tpl-bicolonne .cv-2col__exp-co            { color: var(--cv-accent); }
.tpl-bicolonne .cv-2col__form-equiv        { color: var(--cv-accent); }
.tpl-bicolonne .cv-2col__form-year         { color: var(--cv-accent); }
.tpl-bicolonne .cv-2col__lang-dot--full    { background: rgba(255,255,255,.85); }
.tpl-bicolonne .cv-2col__skill-tag         { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }

/* ========================================================
   TEMPLATE : Minimaliste
   ======================================================== */
.cv-page.tpl-minimaliste { padding: 0; }
.cv-mn-wrap  { padding: 48px 56px 40px; }
.cv-mn-header { margin-bottom: 4px; }
.cv-mn-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px; font-weight: 400; color: #1a1a1a;
  letter-spacing: .02em; margin-bottom: 3px;
}
.cv-mn-job {
  font-size: 10px; font-weight: 600; color: var(--cv-accent);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px;
}
.cv-mn-contact {
  font-size: 8.5px; color: #888; margin-bottom: 5px;
  display: flex; flex-wrap: wrap; gap: 0;
}
.cv-mn-dot { color: #ddd; margin: 0 5px; }
.cv-mn-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cv-mn-permis {
  font-size: 7.5px; font-weight: 700; padding: 1px 6px; border-radius: 2px;
  color: var(--cv-accent); border: 1px solid currentColor; background: rgba(0,0,0,.04);
}
.cv-mn-canton { font-size: 8px; color: #bbb; }
.cv-mn-rule   { height: 1px; background: #e0ddd6; margin: 12px 0 16px; }
.cv-mn-sec    { margin-bottom: 14px; }
.cv-mn-sec-title {
  font-size: 7.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--cv-accent);
  margin-bottom: 8px;
}
.cv-mn-accroche { font-size: 9.5px; color: #444; line-height: 1.65; }
.cv-mn-exp      { margin-bottom: 9px; }
.cv-mn-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-mn-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-mn-exp-date  { font-size: 8.5px; color: #bbb; white-space: nowrap; flex-shrink: 0; }
.cv-mn-exp-co    { font-size: 9px; color: #888; margin-bottom: 2px; }
.cv-mn-bullets   { padding-left: 10px; margin: 2px 0 0; }
.cv-mn-bullet    { font-size: 9px; color: #555; line-height: 1.45; margin-bottom: 1px; }
.cv-mn-form      { margin-bottom: 6px; }
.cv-mn-equiv     { font-size: 8.5px; color: var(--cv-accent); font-style: italic; }
.cv-mn-skills    { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-mn-skill {
  font-size: 8.5px; padding: 2px 9px; border-radius: 20px;
  border: 1px solid var(--cv-accent); color: var(--cv-accent);
  background: rgba(0,0,0,.03);
}
.cv-mn-cols    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cv-mn-lang    { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 3px; }
.cv-mn-lang-lv { color: #aaa; font-style: italic; }
.cv-mn-compl   { font-size: 9px; color: #555; margin-bottom: 3px; }

/* ========================================================
   TEMPLATE : Modern — header pleine largeur, photo ronde
   ======================================================== */
.cv-page.tpl-modern { padding: 0; }
.cv-mod-header {
  display: flex; align-items: center; gap: 18px;
  background: var(--cv-accent); color: #fff;
  padding: 22px 28px;
}
.cv-mod-photo {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,.3); flex-shrink: 0;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.cv-mod-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-mod-hd-info { flex: 1; }
.cv-mod-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px; font-weight: 700; color: #fff;
  line-height: 1.1; margin-bottom: 2px;
}
.cv-mod-job     { font-size: 9px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.cv-mod-contact { font-size: 8px; color: rgba(255,255,255,.75); }
.cv-mod-badges  { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.cv-mod-permis {
  font-size: 7.5px; font-weight: 700; padding: 1px 7px; border-radius: 2px;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3);
}
.cv-mod-canton  { font-size: 7.5px; color: rgba(255,255,255,.55); }
.cv-mod-body    { padding: 20px 28px; }
.cv-mod-sec     { margin-bottom: 12px; }
.cv-mod-sec-title {
  font-size: 8px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cv-accent);
  border-bottom: 1.5px solid var(--cv-accent);
  padding-bottom: 3px; margin-bottom: 7px; opacity: .9;
}
.cv-mod-accroche { font-size: 9.5px; color: #333; line-height: 1.6; }
.cv-mod-exp      { margin-bottom: 8px; }
.cv-mod-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-mod-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-mod-exp-date  { font-size: 8.5px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-mod-exp-co    { font-size: 9px; color: var(--cv-accent); font-style: italic; margin-bottom: 2px; }
.cv-mod-bullets   { padding-left: 10px; margin: 2px 0 0; }
.cv-mod-bullet    { font-size: 9px; color: #444; line-height: 1.45; margin-bottom: 1px; }
.cv-mod-form      { margin-bottom: 6px; }
.cv-mod-equiv     { font-size: 8.5px; color: var(--cv-accent); font-style: italic; }
.cv-mod-skills    { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-mod-skill     { font-size: 8.5px; padding: 2px 8px; border-radius: 2px; background: rgba(0,0,0,.06); color: var(--cv-accent); font-weight: 600; }
.cv-mod-twocol    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cv-mod-lang      { display: flex; justify-content: space-between; font-size: 9.5px; margin-bottom: 3px; }
.cv-mod-lang-lv   { color: #999; font-style: italic; font-size: 9px; }

/* ========================================================
   TEMPLATE : Compact — dense, petites marges
   ======================================================== */
.cv-page.tpl-compact { padding: 20px 28px 20px; font-size: 9px; }
.cv-cmp-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 8px; border-bottom: 1.5px solid var(--cv-accent); margin-bottom: 10px;
}
.cv-cmp-hd-info { flex: 1; }
.cv-cmp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px; font-weight: 700; color: #1a1a1a;
  line-height: 1.1; margin-bottom: 2px;
}
.cv-cmp-job     { font-size: 8.5px; color: var(--cv-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.cv-cmp-contact { font-size: 7.5px; color: #666; margin-bottom: 3px; }
.cv-cmp-badges  { display: flex; gap: 4px; margin-top: 2px; }
.cv-cmp-permis  { font-size: 7px; font-weight: 700; padding: 1px 5px; border-radius: 2px; color: var(--cv-accent); border: 1px solid currentColor; background: rgba(0,0,0,.04); }
.cv-cmp-canton  { font-size: 7px; color: #bbb; }
.cv-cmp-photo {
  width: 60px; height: 78px; flex-shrink: 0; border-radius: 3px;
  overflow: hidden; border: 1px solid #e0ddd6; margin-left: 12px;
}
.cv-cmp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-cmp-photo-ph { width: 100%; height: 100%; background: #f2eeea; display: flex; align-items: center; justify-content: center; }
.cv-cmp-sec      { margin-bottom: 8px; }
.cv-cmp-sec-title {
  font-size: 7px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cv-accent);
  border-left: 2px solid var(--cv-accent); padding-left: 5px;
  margin-bottom: 5px; line-height: 1;
}
.cv-cmp-accroche { font-size: 9px; color: #333; line-height: 1.5; }
.cv-cmp-exp      { margin-bottom: 5px; }
.cv-cmp-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-cmp-exp-title { font-size: 9px; font-weight: 700; color: #1a1a1a; }
.cv-cmp-exp-date  { font-size: 7.5px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-cmp-exp-co    { font-size: 8px; color: var(--cv-accent); font-style: italic; margin-bottom: 1px; }
.cv-cmp-desc      { font-size: 8px; color: #444; line-height: 1.4; }
.cv-cmp-bullets   { list-style: disc inside; margin: 2px 0 0; padding-left: 6px; }
.cv-cmp-bullet    { font-size: 8px; color: #444; line-height: 1.45; margin-bottom: 1px; }
.cv-cmp-form      { margin-bottom: 3px; font-size: 8.5px; }
.cv-cmp-equiv     { font-size: 8px; color: var(--cv-accent); font-style: italic; }
.cv-cmp-skills    { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-cmp-skill     { font-size: 8px; padding: 1px 7px; border-radius: 2px; background: rgba(0,0,0,.06); color: var(--cv-accent); font-weight: 600; border: 1px solid rgba(0,0,0,.1); }
.cv-cmp-langs     { display: flex; flex-direction: column; gap: 2px; }
.cv-cmp-lang      { font-size: 8.5px; }
.cv-cmp-lang-lv   { color: #999; font-style: italic; font-size: 8px; }
.cv-cmp-bottom-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ========================================================
   TEMPLATE : Élégant — serif centré, lignes fines
   ======================================================== */
.cv-page.tpl-elegant { padding: 0; }
.cv-elg-wrap    { padding: 44px 52px 36px; font-family: 'Playfair Display', Georgia, serif; }
.cv-elg-header  { text-align: center; margin-bottom: 6px; }
.cv-elg-name    { font-size: 24px; font-weight: 400; color: #1a1a1a; letter-spacing: .03em; margin-bottom: 4px; }
.cv-elg-job     { font-size: 9px; color: var(--cv-accent); letter-spacing: .15em; text-transform: uppercase; font-weight: 400; margin-bottom: 6px; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-contact { font-size: 8.5px; color: #888; margin-bottom: 5px; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-badges  { display: flex; justify-content: center; gap: 8px; }
.cv-elg-permis  { font-size: 7.5px; font-weight: 600; padding: 1px 7px; border-radius: 2px; color: var(--cv-accent); border: 1px solid currentColor; background: rgba(0,0,0,.04); font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-canton  { font-size: 8px; color: #bbb; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-rule-main { height: 1px; background: var(--cv-accent); margin: 12px 0 20px; opacity: .3; }
.cv-elg-sec      { margin-bottom: 16px; }
.cv-elg-sec-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.cv-elg-sec-title {
  font-size: 8px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .18em; color: var(--cv-accent);
  white-space: nowrap; font-family: 'Source Sans Pro', Arial, sans-serif;
}
.cv-elg-sec-rule { flex: 1; height: 1px; background: var(--cv-accent); opacity: .2; }
.cv-elg-accroche { font-size: 9.5px; color: #444; line-height: 1.7; font-weight: 400; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-exp      { margin-bottom: 10px; }
.cv-elg-exp-row  { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cv-elg-exp-left { flex: 1; }
.cv-elg-exp-title { font-size: 10px; font-weight: 600; color: #1a1a1a; }
.cv-elg-exp-co    { font-size: 9px; color: #888; font-style: italic; margin-bottom: 3px; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-exp-date  { font-size: 8.5px; color: var(--cv-accent); white-space: nowrap; flex-shrink: 0; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-exp-desc  { font-size: 9px; color: #555; line-height: 1.55; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-bullets   { list-style: disc inside; margin: 4px 0 0; padding-left: 8px; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-bullet    { font-size: 9px; color: #555; line-height: 1.6; margin-bottom: 2px; }
.cv-elg-equiv     { font-size: 8.5px; color: var(--cv-accent); font-style: italic; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-form      { margin-bottom: 6px; }
.cv-elg-skills    { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.cv-elg-skill     { font-size: 8.5px; padding: 2px 10px; border: 1px solid var(--cv-accent); color: var(--cv-accent); border-radius: 20px; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-langs     { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-family: 'Source Sans Pro', Arial, sans-serif; }
.cv-elg-lang      { text-align: center; }
.cv-elg-lang-n    { font-size: 9.5px; display: block; margin-bottom: 1px; }
.cv-elg-lang-lv   { font-size: 8px; color: #aaa; font-style: italic; }

/* ========================================================
   TEMPLATE : Corporate — barres de titre colorées
   ======================================================== */
.cv-page.tpl-corporate { padding: 0; }
.cv-corp-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  background: var(--cv-sidebar); color: #fff;
  padding: 22px 28px 18px;
}
.cv-corp-hd-info { flex: 1; }
.cv-corp-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px; font-weight: 700; color: #fff;
  line-height: 1.1; margin-bottom: 3px;
}
.cv-corp-job     { font-size: 9px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 6px; font-weight: 600; }
.cv-corp-contact { font-size: 8px; color: rgba(255,255,255,.7); }
.cv-corp-badges  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cv-corp-permis  { font-size: 7.5px; font-weight: 700; padding: 1px 7px; border-radius: 2px; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.cv-corp-canton  { font-size: 7.5px; color: rgba(255,255,255,.45); }
.cv-corp-photo   { width: 76px; height: 96px; flex-shrink: 0; border-radius: 3px; overflow: hidden; border: 2px solid rgba(255,255,255,.2); margin-left: 16px; }
.cv-corp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-corp-photo-ph { width: 100%; height: 100%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.cv-corp-sec     { margin-bottom: 10px; }
.cv-corp-sec-bar { background: var(--cv-accent); padding: 3px 28px; margin: 0 0 8px; }
.cv-corp-sec-title { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.cv-corp-sec > *:not(.cv-corp-sec-bar) { padding: 0 28px; }
.cv-corp-accroche { font-size: 9.5px; color: #333; line-height: 1.6; }
.cv-corp-exp      { margin-bottom: 7px; }
.cv-corp-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-corp-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-corp-exp-date  { font-size: 8.5px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-corp-exp-co    { font-size: 9px; color: var(--cv-accent); font-style: italic; margin-bottom: 2px; }
.cv-corp-bullets   { padding-left: 10px; margin: 2px 0 0; }
.cv-corp-bullet    { font-size: 9px; color: #444; line-height: 1.45; margin-bottom: 1px; }
.cv-corp-form      { margin-bottom: 6px; }
.cv-corp-equiv     { font-size: 8.5px; color: var(--cv-accent); font-style: italic; }
.cv-corp-skills    { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-corp-skill     { font-size: 8.5px; padding: 2px 8px; border-radius: 2px; background: rgba(0,0,0,.06); color: var(--cv-accent); font-weight: 600; }
.cv-corp-langs     { display: flex; flex-direction: column; gap: 3px; }
.cv-corp-lang      { display: flex; justify-content: space-between; font-size: 9.5px; }
.cv-corp-lang-lv   { color: #999; font-style: italic; font-size: 9px; }
.cv-corp-twocol    { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cv-corp-twocol .cv-corp-sec { margin-bottom: 10px; }

/* ========================================================
   TEMPLATE : Créatif — barre gauche + 2 colonnes
   ======================================================== */
.cv-page.tpl-creative { padding: 0; }
.cv-crea-layout { display: flex; min-height: 1123px; }
.cv-crea-accent-bar { width: 10px; background: var(--cv-accent); flex-shrink: 0; }
.cv-crea-body   { flex: 1; display: flex; flex-direction: column; padding: 28px 22px 28px 18px; }
.cv-crea-header { margin-bottom: 14px; border-bottom: 1px solid #e8e5df; padding-bottom: 12px; }
.cv-crea-name   {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 700; color: #1a1a1a;
  line-height: 1.1; margin-bottom: 3px;
}
.cv-crea-job    { font-size: 9px; color: var(--cv-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.cv-crea-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-crea-permis { font-size: 7.5px; font-weight: 700; padding: 1px 7px; border-radius: 2px; color: var(--cv-accent); border: 1px solid currentColor; background: rgba(0,0,0,.04); }
.cv-crea-canton { font-size: 7.5px; color: #bbb; }
.cv-crea-cols   { display: flex; gap: 16px; flex: 1; }
.cv-crea-left   { width: 38%; flex-shrink: 0; border-right: 1px solid #e8e5df; padding-right: 14px; }
.cv-crea-right  { flex: 1; }
.cv-crea-sec    { margin-bottom: 12px; }
.cv-crea-sec-r  { margin-bottom: 12px; }
.cv-crea-sec-title   { font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--cv-accent); margin-bottom: 6px; }
.cv-crea-sec-title-r { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--cv-accent); border-bottom: 1.5px solid var(--cv-accent); padding-bottom: 3px; margin-bottom: 7px; opacity: .9; }
.cv-crea-contacts   { display: flex; flex-direction: column; gap: 3px; }
.cv-crea-contact-item { font-size: 8px; color: #555; }
.cv-crea-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-crea-skill  { font-size: 7.5px; padding: 2px 7px; border-radius: 2px; background: rgba(0,0,0,.06); color: var(--cv-accent); font-weight: 600; border: 1px solid rgba(0,0,0,.08); }
.cv-crea-lang   { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 3px; }
.cv-crea-lang-lv { color: #aaa; font-style: italic; font-size: 8.5px; }
.cv-crea-interets { font-size: 8.5px; color: #555; line-height: 1.5; }
.cv-crea-accroche { font-size: 9.5px; color: #444; line-height: 1.6; }
.cv-crea-exp      { margin-bottom: 8px; }
.cv-crea-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-crea-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-crea-exp-date  { font-size: 8.5px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-crea-exp-co    { font-size: 9px; color: var(--cv-accent); font-style: italic; margin-bottom: 2px; }
.cv-crea-bullets   { padding-left: 10px; margin: 2px 0 0; }
.cv-crea-bullet    { font-size: 9px; color: #444; line-height: 1.45; margin-bottom: 1px; }
.cv-crea-equiv     { font-size: 8.5px; color: var(--cv-accent); font-style: italic; }
.cv-crea-form      { margin-bottom: 6px; }

/* ========================================================
   TEMPLATE : Executive — header sombre, règles décoratives
   ======================================================== */
.cv-page.tpl-executive { padding: 0; }
.cv-exec-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  background: var(--cv-sidebar); color: #fff;
  padding: 26px 32px 22px;
}
.cv-exec-hd-info { flex: 1; }
.cv-exec-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(24px * var(--cv-fs, 1)); font-weight: 700; color: #fff;
  line-height: 1.1; margin-bottom: 4px; letter-spacing: .01em;
}
.cv-exec-job    { font-size: calc(9.5px * var(--cv-fs, 1)); color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 7px; }
.cv-exec-contact { font-size: calc(8px * var(--cv-fs, 1)); color: rgba(255,255,255,.65); }
.cv-exec-badges  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.cv-exec-permis  { font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 700; padding: 1px 8px; border-radius: 2px; background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.25); }
.cv-exec-canton  { font-size: calc(7.5px * var(--cv-fs, 1)); color: rgba(255,255,255,.4); }
.cv-exec-photo   { width: 82px; height: 104px; flex-shrink: 0; border-radius: 3px; overflow: hidden; border: 2px solid rgba(255,255,255,.2); margin-left: 20px; }
.cv-exec-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-exec-photo-ph { width: 100%; height: 100%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.cv-exec-accent-line { height: 2px; background: var(--cv-accent); }
.cv-exec-body   { padding: 22px 32px; }
.cv-exec-rule-wrap {
  display: flex; align-items: center; gap: 10px;
  margin: calc(10px * var(--cv-sec-gap, 1)) 0 calc(8px * var(--cv-sec-gap, 1));
}
.cv-exec-rule-title { font-size: calc(8px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--cv-accent); white-space: nowrap; }
.cv-exec-rule-line  { flex: 1; height: 1px; background: var(--cv-accent); opacity: .25; }
.cv-exec-accroche   { font-size: calc(9.5px * var(--cv-fs, 1)); color: #333; line-height: var(--cv-lh, 1.65); }
.cv-exec-exp        { margin-bottom: calc(9px * var(--cv-item-gap, 1)); }
.cv-exec-exp-head   { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-exec-exp-title  { font-size: calc(10.5px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-exec-exp-date   { font-size: calc(8.5px * var(--cv-fs, 1)); color: var(--cv-accent); white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.cv-exec-exp-co     { font-size: calc(9px * var(--cv-fs, 1)); color: #666; font-style: italic; margin-bottom: 3px; }
.cv-exec-bullets    { padding-left: 10px; margin: 2px 0 0; }
.cv-exec-bullet     { font-size: calc(9px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.45); margin-bottom: 1px; }
.cv-exec-equiv      { font-size: calc(8.5px * var(--cv-fs, 1)); color: var(--cv-accent); font-style: italic; }
.cv-exec-form       { margin-bottom: calc(7px * var(--cv-item-gap, 1)); }
.cv-exec-bottom     { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cv-exec-skills     { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-exec-skill      { font-size: calc(8.5px * var(--cv-fs, 1)); padding: 2px 9px; border-radius: 2px; background: rgba(0,0,0,.06); color: var(--cv-accent); font-weight: 600; border: 1px solid rgba(0,0,0,.1); }
.cv-exec-lang       { display: flex; justify-content: space-between; font-size: calc(9.5px * var(--cv-fs, 1)); margin-bottom: 3px; }
.cv-exec-lang-lv    { color: #999; font-style: italic; font-size: calc(9px * var(--cv-fs, 1)); }
.cv-exec-langs      { display: flex; flex-direction: column; }
.cv-exec-compl      { font-size: calc(9px * var(--cv-fs, 1)); color: #444; margin-bottom: 3px; }

/* ========================================================
   TEMPLATE : Swiss — barre verticale, grille stricte
   ======================================================== */
.cv-page.tpl-swiss  { padding: 0; }
.cv-page.tpl-luxury { padding: 0; }
.cv-page.tpl-tech   { padding: 0; }
.cv-page.tpl-warm   { padding: 0; }
.cv-sw-layout { display: flex; min-height: 1123px; }
.cv-sw-bar    { width: 4px; background: var(--cv-accent); flex-shrink: 0; }
.cv-sw-main   { flex: 1; padding: 32px 32px 32px 24px; }
.cv-sw-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid #ddd;
}
.cv-sw-hd-text { flex: 1; }
.cv-sw-name    {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: calc(22px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a;
  line-height: 1.1; margin-bottom: 3px; letter-spacing: -.01em;
}
.cv-sw-job     { font-size: calc(9px * var(--cv-fs, 1)); color: var(--cv-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.cv-sw-badges  { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-sw-permis  { font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 700; padding: 1px 7px; border-radius: 2px; color: var(--cv-accent); border: 1px solid currentColor; background: rgba(0,0,0,.04); }
.cv-sw-canton  { font-size: calc(8px * var(--cv-fs, 1)); color: #bbb; }
.cv-sw-photo   { width: 74px; height: 96px; flex-shrink: 0; border-radius: 2px; overflow: hidden; border: 1px solid #e0ddd6; margin-left: 16px; }
.cv-sw-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-sw-photo-ph { width: 100%; height: 100%; background: #f2eeea; display: flex; align-items: center; justify-content: center; }
.cv-sw-row     { display: flex; gap: 0; margin-bottom: calc(12px * var(--cv-sec-gap, 1)); }
.cv-sw-label   {
  width: 90px; flex-shrink: 0;
  font-size: calc(6.5px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cv-accent);
  padding-top: 2px; padding-right: 12px;
  border-right: 2px solid var(--cv-accent); margin-right: 14px;
}
.cv-sw-content  { flex: 1; }
.cv-sw-accroche { font-size: calc(9.5px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.65); }
.cv-sw-exp      { margin-bottom: calc(8px * var(--cv-item-gap, 1)); }
.cv-sw-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-sw-exp-title { font-size: calc(10px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-sw-exp-date  { font-size: calc(8.5px * var(--cv-fs, 1)); color: var(--cv-accent); white-space: nowrap; flex-shrink: 0; font-weight: 600; }
.cv-sw-exp-co    { font-size: calc(9px * var(--cv-fs, 1)); color: #777; font-style: italic; margin-bottom: 2px; }
.cv-sw-bullets   { padding-left: 10px; margin: 2px 0 0; }
.cv-sw-bullet    { font-size: calc(9px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.45); margin-bottom: 1px; }
.cv-sw-equiv     { font-size: calc(8.5px * var(--cv-fs, 1)); color: var(--cv-accent); font-style: italic; }
.cv-sw-form      { margin-bottom: calc(5px * var(--cv-item-gap, 1)); }
.cv-sw-skills    { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-sw-skill     { font-size: calc(8.5px * var(--cv-fs, 1)); padding: 2px 8px; border-radius: 2px; background: rgba(0,0,0,.06); color: var(--cv-accent); font-weight: 600; }
.cv-sw-lang      { display: flex; justify-content: space-between; align-items: center; font-size: calc(9.5px * var(--cv-fs, 1)); margin-bottom: 4px; }
.cv-sw-lang-dots { display: flex; gap: 2.5px; }
.cv-sw-contact-item { font-size: calc(9px * var(--cv-fs, 1)); color: #444; margin-bottom: 2px; }
.cv-sw-compl     { font-size: calc(9px * var(--cv-fs, 1)); color: #444; margin-bottom: 2px; }

/* ── Swiss : la couleur des dots de langue ─── */
.tpl-swiss .cv-2col__lang-dot--full,
.tpl-swiss .cv-sw-lang-dots .cv-2col__lang-dot--full { background: var(--cv-accent); }

/* ========================================================
   IMPRESSION / PDF  (window.print via downloadFree)
   ======================================================== */
@media print {
  @page { size: A4; margin: 0; }

  /* Masquer tout sauf le panneau d'aperçu */
  .tool-header,
  .wizard-panel,
  .preview-panel__toolbar,
  .preview-overlay,
  .cv-fullscreen,
  .zoom-controls,
  .preview-close-btn,
  #previewCloseBtn { display: none !important; }

  /* Réinitialiser la mise en page générale */
  body,
  .wizard-layout,
  .preview-panel,
  #previewBody { display: block !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; }

  /* Annuler le transform de zoom du scaler */
  #previewScaler { transform: none !important; transform-origin: unset !important; width: 210mm !important; margin: 0 !important; }

  /* Page CV à format A4 exact */
  #cvPage {
    width: 210mm !important;
    min-height: 297mm !important;
    box-shadow: none !important;
    margin: 0 !important;
    page-break-after: avoid;
  }

  /* Filigrane (plan gratuit) */
  body.cv-print-watermark #cvPage::after {
    content: 'cvfrontalier.ch';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 64px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
  }
}

/* ========================================================
   THUMBNAILS — Luxury / Tech / Warm
   ======================================================== */
/* Luxury */
.struct-thumb--luxury { padding: 0; gap: 0; flex-direction: column; }
.sth__lx-hdr { height: 22px; background: var(--tpl-sidebar, #2C2C2C); flex-shrink: 0; }
.sth__lx-body { flex: 1; display: flex; flex-direction: row; overflow: hidden; }
.sth__lx-main { flex: 1; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; }
.sth__lx-side { width: 22px; background: #f5f3ef; border-left: 1px solid #e8e5df; padding: 5px 4px; display: flex; flex-direction: column; gap: 2px; }
/* Tech */
.struct-thumb--tech { padding: 0; gap: 0; flex-direction: row; }
.sth__tc-wrap { display: flex; flex-direction: row; width: 100%; height: 100%; }
.sth__tc-bar { width: 24px; background: var(--tpl-sidebar, #2C2C2C); flex-shrink: 0; }
.sth__tc-main { flex: 1; padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; }
/* Warm */
.struct-thumb--warm { padding: 0; gap: 0; flex-direction: column; }
.sth__wm-hdr { height: 22px; background: var(--tpl-accent, #C4622D); flex-shrink: 0; border-radius: 2px 2px 0 0; }
.sth__wm-card { height: 14px; background: #fafafa; border-left: 2px solid var(--tpl-accent, #C4622D); border-radius: 1px; }

/* ========================================================
   CV — Template LUXURY  (794×1123px A4, zoom 52%)
   header sombre pleine largeur + body 2 colonnes
   ======================================================== */
.cv-lx-wrap { font-family: Georgia,'Times New Roman',serif; font-size: calc(10px * var(--cv-fs, 1)); color: #1a1a1a; background: #fff; min-height: 1123px; display: flex; flex-direction: column; }

/* Header */
.cv-lx-header { display: flex; background: var(--cv-sidebar, #2C2C2C); color: #fff; }
.cv-lx-hd-left { width: 190px; flex-shrink: 0; background: rgba(0,0,0,.15); padding: 28px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cv-lx-hd-right { flex: 1; padding: 32px 36px 24px; }
.cv-lx-photo { width: 80px; height: 100px; border-radius: 4px; overflow: hidden; border: 2px solid rgba(255,255,255,.3); flex-shrink: 0; }
.cv-lx-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-lx-photo-ph { width: 100%; height: 100%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.cv-lx-contacts { width: 100%; }
.cv-lx-contact-item { font-size: calc(8px * var(--cv-fs, 1)); color: rgba(255,255,255,.72); word-break: break-all; line-height: var(--cv-lh, 1.65); text-align: center; }
.cv-lx-badge { display: inline-block; font-size: calc(7.5px * var(--cv-fs, 1)); background: rgba(255,255,255,.15); border-radius: 3px; padding: 2px 6px; color: #fff; margin: 1px 0; }
.cv-lx-name { font-size: calc(26px * var(--cv-fs, 1)); font-weight: 700; letter-spacing: .02em; color: #fff; margin: 0 0 5px; line-height: 1.2; }
.cv-lx-job { font-size: calc(11px * var(--cv-fs, 1)); color: rgba(255,255,255,.78); letter-spacing: .05em; margin-bottom: 12px; font-style: italic; }
.cv-lx-rule-gold { height: 2px; background: linear-gradient(to right, var(--cv-accent, #B8960C), transparent); margin-bottom: 10px; opacity: .8; }
.cv-lx-accroche { font-size: calc(9.5px * var(--cv-fs, 1)); color: rgba(255,255,255,.8); margin: 0; line-height: var(--cv-lh, 1.55); font-style: italic; }

/* Body 2 colonnes */
.cv-lx-body { display: flex; flex: 1; align-items: stretch; }
.cv-lx-main { flex: 1; padding: 26px 28px; }
.cv-lx-side { width: 190px; flex-shrink: 0; padding: 26px 20px; background: #f9f7f4; border-left: 1px solid #ece9e3; }

/* Sections */
.cv-lx-sec { margin-bottom: calc(20px * var(--cv-sec-gap, 1)); }
.cv-lx-sec-title { font-size: calc(8px * var(--cv-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--cv-accent, #B8960C); margin-bottom: 4px; }
.cv-lx-sec-line { height: 1px; background: linear-gradient(to right, var(--cv-accent, #B8960C), transparent); margin-bottom: 10px; }
.cv-lx-exp, .cv-lx-form { margin-bottom: calc(12px * var(--cv-item-gap, 1)); }
.cv-lx-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-lx-exp-title { font-weight: 700; font-size: calc(10px * var(--cv-fs, 1)); }
.cv-lx-exp-date { font-size: calc(8.5px * var(--cv-fs, 1)); color: #888; flex-shrink: 0; white-space: nowrap; }
.cv-lx-exp-co { font-size: calc(9px * var(--cv-fs, 1)); color: var(--cv-accent, #B8960C); margin-bottom: 3px; font-style: italic; }
.cv-lx-equiv { font-size: calc(8px * var(--cv-fs, 1)); color: #aaa; }
.cv-lx-bullets { margin: 3px 0 0 10px; padding: 0; list-style: none; }
.cv-lx-bullet { font-size: calc(9px * var(--cv-fs, 1)); color: #333; line-height: var(--cv-lh, 1.5); padding-left: 10px; position: relative; margin-bottom: 1px; }
.cv-lx-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #B8960C); }
.cv-lx-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-lx-skill { font-size: calc(8px * var(--cv-fs, 1)); background: var(--cv-accent, #B8960C); color: #fff; border-radius: 2px; padding: 2px 6px; }
.cv-lx-lang { display: flex; justify-content: space-between; align-items: center; font-size: calc(8.5px * var(--cv-fs, 1)); margin-bottom: 5px; }
.cv-lx-lang-dots { flex-shrink: 0; }
.cv-lx-compl { font-size: calc(8.5px * var(--cv-fs, 1)); color: #555; line-height: var(--cv-lh, 1.55); margin-bottom: 2px; }

/* ========================================================
   CV — Template TECH  (794×1123px A4, zoom 52%)
   sidebar sombre full-height + zone principale
   ======================================================== */
.cv-tc-wrap { font-family: 'Segoe UI',Arial,sans-serif; font-size: calc(10px * var(--cv-fs, 1)); color: #1e1e1e; background: #fff; display: flex; min-height: 1123px; }

/* Sidebar */
.cv-tc-sidebar { width: 210px; flex-shrink: 0; background: var(--cv-sidebar, #2C2C2C); color: #fff; padding: 28px 18px; }
.cv-tc-photo { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.25); margin: 0 auto 16px; }
.cv-tc-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-tc-photo-ph { width: 100%; height: 100%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.cv-tc-contact-list { margin-bottom: 16px; }
.cv-tc-ci { font-size: calc(8px * var(--cv-fs, 1)); color: rgba(255,255,255,.7); word-break: break-all; line-height: var(--cv-lh, 1.7); }
.cv-tc-badge { font-size: calc(7.5px * var(--cv-fs, 1)); background: rgba(255,255,255,.14); border-radius: 3px; padding: 2px 6px; color: #fff; display: inline-block; margin: 2px 0; }
.cv-tc-sec--side { margin-bottom: calc(16px * var(--cv-sec-gap, 1)); }
.cv-tc-sec--side .cv-tc-sec-title { font-size: calc(8px * var(--cv-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.15); }
.cv-tc-sec--side .cv-tc-arrow { display: none; }
.cv-tc-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-tc-skill { font-size: calc(8px * var(--cv-fs, 1)); background: rgba(255,255,255,.16); border-radius: 3px; padding: 2px 6px; color: #fff; }
.cv-tc-lang { display: flex; justify-content: space-between; align-items: center; font-size: calc(8.5px * var(--cv-fs, 1)); color: rgba(255,255,255,.85); margin-bottom: 5px; }
.cv-tc-lang-dots { flex-shrink: 0; }

/* Zone principale */
.cv-tc-main { flex: 1; padding: 32px 30px; }
.cv-tc-header { border-left: 4px solid var(--cv-accent, #1565C0); padding-left: 14px; margin-bottom: 20px; }
.cv-tc-name { font-size: calc(22px * var(--cv-fs, 1)); font-weight: 700; color: var(--cv-sidebar, #2C2C2C); margin: 0 0 3px; letter-spacing: -.01em; }
.cv-tc-job { font-size: calc(10px * var(--cv-fs, 1)); color: var(--cv-accent, #1565C0); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.cv-tc-accroche { font-size: calc(9.5px * var(--cv-fs, 1)); background: #f5f5f5; border-left: 3px solid var(--cv-accent, #1565C0); padding: 8px 12px; margin-bottom: 20px; line-height: var(--cv-lh, 1.6); color: #444; font-style: italic; }
.cv-tc-sec { margin-bottom: calc(18px * var(--cv-sec-gap, 1)); }
.cv-tc-sec-title { font-size: calc(8.5px * var(--cv-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cv-sidebar, #2C2C2C); margin-bottom: 8px; }
.cv-tc-arrow { color: var(--cv-accent, #1565C0); margin-right: 5px; font-size: calc(8px * var(--cv-fs, 1)); }
.cv-tc-exp, .cv-tc-form { margin-bottom: calc(10px * var(--cv-item-gap, 1)); padding-left: 10px; border-left: 2px solid #e8e8e8; }
.cv-tc-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-tc-exp-title { font-weight: 700; font-size: calc(10px * var(--cv-fs, 1)); }
.cv-tc-exp-date { font-size: calc(8.5px * var(--cv-fs, 1)); color: var(--cv-accent, #1565C0); flex-shrink: 0; white-space: nowrap; }
.cv-tc-exp-co { font-size: calc(9px * var(--cv-fs, 1)); color: #777; margin-bottom: 3px; }
.cv-tc-equiv { font-size: calc(8.5px * var(--cv-fs, 1)); color: #aaa; }
.cv-tc-bullets { margin: 3px 0 0 10px; padding: 0; list-style: none; }
.cv-tc-bullet { font-size: calc(9px * var(--cv-fs, 1)); color: #333; line-height: var(--cv-lh, 1.5); padding-left: 12px; position: relative; margin-bottom: 1px; }
.cv-tc-bullet::before { content: '>'; position: absolute; left: 0; color: var(--cv-accent, #1565C0); font-weight: 700; }
.cv-tc-compl { font-size: calc(8.5px * var(--cv-fs, 1)); color: #555; line-height: var(--cv-lh, 1.55); margin-bottom: 2px; }

/* ========================================================
   CV — Template WARM  (794×1123px A4, zoom 52%)
   header coloré arrondi + cartes border-left
   ======================================================== */
.cv-wm-wrap { font-family: 'Segoe UI',Arial,sans-serif; font-size: calc(10px * var(--cv-fs, 1)); color: #2d2d2d; background: #fff; min-height: 1123px; }

/* Header */
.cv-wm-header { background: var(--cv-sidebar, #C4622D); color: #fff; padding: 24px 36px; display: flex; align-items: center; gap: 24px; }
.cv-wm-hd-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid rgba(255,255,255,.3); }
.cv-wm-hd-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-wm-photo-ph { width: 100%; height: 100%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.cv-wm-hd-info { flex: 1; }
.cv-wm-name { font-size: calc(24px * var(--cv-fs, 1)); font-weight: 700; color: #fff; margin: 0 0 3px; line-height: 1.2; }
.cv-wm-job { font-size: calc(10.5px * var(--cv-fs, 1)); color: rgba(255,255,255,.82); font-weight: 500; margin-bottom: 8px; }
.cv-wm-contacts { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 6px; }
.cv-wm-ci { font-size: calc(8.5px * var(--cv-fs, 1)); color: rgba(255,255,255,.78); }
.cv-wm-sep { margin: 0 7px; color: rgba(255,255,255,.4); }
.cv-wm-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-wm-badge { font-size: calc(7.5px * var(--cv-fs, 1)); background: rgba(255,255,255,.2); border-radius: 12px; padding: 2px 8px; color: #fff; }

/* Accroche */
.cv-wm-accroche { font-size: calc(9.5px * var(--cv-fs, 1)); background: #fafafa; border-top: 3px solid var(--cv-accent, #C4622D); padding: 14px 36px; margin: 0; color: #555; line-height: var(--cv-lh, 1.6); font-style: italic; }

/* Body */
.cv-wm-body { padding: 20px 36px 28px; }
.cv-wm-sec { margin-bottom: calc(18px * var(--cv-sec-gap, 1)); }
.cv-wm-sec-title { font-size: calc(8.5px * var(--cv-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--cv-accent, #C4622D); border-bottom: 2px solid var(--cv-accent, #C4622D); padding-bottom: 3px; margin-bottom: 10px; }

/* Cartes expérience / formation */
.cv-wm-card { background: #fafafa; border-radius: 4px; border-left: 4px solid var(--cv-accent, #C4622D); padding: 10px 14px; margin-bottom: calc(8px * var(--cv-item-gap, 1)); }
.cv-wm-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-wm-card-title { font-weight: 700; font-size: calc(10px * var(--cv-fs, 1)); }
.cv-wm-card-date { font-size: calc(8.5px * var(--cv-fs, 1)); color: #888; flex-shrink: 0; white-space: nowrap; }
.cv-wm-card-co { font-size: calc(9px * var(--cv-fs, 1)); color: var(--cv-accent, #C4622D); font-weight: 500; margin-bottom: 3px; }
.cv-wm-equiv { font-size: calc(8.5px * var(--cv-fs, 1)); color: #aaa; }
.cv-wm-bullets { margin: 3px 0 0 10px; padding: 0; list-style: none; }
.cv-wm-bullet { font-size: calc(9px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.5); padding-left: 10px; position: relative; margin-bottom: 1px; }
.cv-wm-bullet::before { content: '●'; position: absolute; left: 0; color: var(--cv-accent, #C4622D); font-size: calc(6px * var(--cv-fs, 1)); top: 2px; }

/* Compétences + Langues */
.cv-wm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cv-wm-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.cv-wm-skill { font-size: calc(8.5px * var(--cv-fs, 1)); background: var(--cv-accent, #C4622D); color: #fff; border-radius: 12px; padding: 2px 10px; }
.cv-wm-lang { display: flex; justify-content: space-between; align-items: center; font-size: calc(9px * var(--cv-fs, 1)); margin-bottom: 5px; }
.cv-wm-lang-dots { flex-shrink: 0; }
.cv-wm-compl { font-size: calc(8.5px * var(--cv-fs, 1)); color: #555; line-height: var(--cv-lh, 1.55); margin-bottom: 2px; }

/* ========================================================
   RESPONSIVE — Step 0
   ======================================================== */
@media (max-width: 900px) {
  .struct-grid,
  .struct-grid--sm { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .color-palette    { gap: 6px; }
}
@media (max-width: 600px) {
  .struct-grid,
  .struct-grid--sm { grid-template-columns: repeat(4, 1fr); }
  .struct-thumb     { height: 64px; }
}

/* Miniatures struct — nouveaux templates */
.struct-thumb--timeline{flex-direction:row;padding:0;gap:0;overflow:hidden}
.sth__tl-sidebar{width:32%;background:#f5f3ef;padding:5px;display:flex;flex-direction:column;gap:2px}
.sth__tl-line{flex:1;position:relative;padding:5px 5px 5px 14px;display:flex;flex-direction:column;gap:5px}
.sth__tl-line::before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:1.5px;background:var(--tpl-accent,#2C2C2C);opacity:.4}
.sth__tl-dot{width:5px;height:5px;border-radius:50%;background:var(--tpl-accent,#2C2C2C);margin-left:-4px}
.struct-thumb--rightside{flex-direction:row;padding:0;gap:0}
.sth__rs-main{flex:1;padding:5px;display:flex;flex-direction:column;gap:3px}
.sth__rs-sidebar{width:32%;background:var(--tpl-sidebar,#2C2C2C);padding:5px;display:flex;flex-direction:column;gap:2px}
.struct-thumb--minimal2{align-items:center;justify-content:center}
.sth__m2-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.sth__m2-name{height:8px;width:55%;background:#2C2C2C;border-radius:1px}
.sth__m2-rule{height:1px;width:80%;background:var(--tpl-accent,#2C2C2C);opacity:.3}
.sth__m2-cols{display:flex;gap:3px;margin-top:4px;width:90%}
.sth__m2-col{flex:1;display:flex;flex-direction:column;gap:2px}
.struct-thumb--tricol{flex-direction:row;padding:0;gap:0}
.sth__tr-c1{width:28%;background:#f5f3ef;padding:4px 3px;display:flex;flex-direction:column;gap:2px;align-items:center}
.sth__tr-circle{width:14px;height:14px;border-radius:50%;background:#ddd;flex-shrink:0}
.sth__tr-c2{flex:1;padding:4px 3px;display:flex;flex-direction:column;gap:2px}
.sth__tr-c3{width:28%;padding:4px 3px;display:flex;flex-direction:column;gap:2px;border-left:1px solid #e8e5df}
.struct-thumb--cards{padding:0;gap:0}
.sth__cd-hdr{height:20px;background:var(--tpl-sidebar,#2C2C2C);flex-shrink:0}
.sth__cd-body{flex:1;padding:4px 5px;display:flex;flex-direction:column;gap:3px}
.sth__cd-card{height:10px;background:#f5f3ef;border-radius:2px;border-left:2px solid var(--tpl-accent,#2C2C2C)}
.struct-thumb--hero{padding:0;gap:0}
.sth__hr-hero{height:26px;background:var(--tpl-sidebar,#2C2C2C);flex-shrink:0;display:flex;align-items:center;padding:0 6px;gap:4px}
.sth__hr-circle{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0}
.sth__hr-body{flex:1;padding:4px 6px;display:flex;gap:4px}
.sth__hr-col{flex:1;display:flex;flex-direction:column;gap:2px}
.struct-thumb--dark{background:#1e1e30;flex-direction:row;padding:0;gap:0}
.sth__dk-side{width:32%;background:#161622;padding:4px;display:flex;flex-direction:column;gap:2px;align-items:center}
.sth__dk-circle{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.15)}
.sth__dk-main{flex:1;padding:4px;display:flex;flex-direction:column;gap:2px}
.sth__dk-l{height:4px;background:rgba(255,255,255,.12);border-radius:1px}
.sth__dk-lh{height:5px;background:var(--tpl-accent,#5B8CFF);border-radius:1px;opacity:.6}
.struct-thumb--asym{flex-direction:row;padding:0;gap:0}
.sth__as-bar{width:6px;background:var(--tpl-accent,#2C2C2C);flex-shrink:0}
.sth__as-body{flex:1;padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.sth__as-name{height:10px;width:70%;background:#2C2C2C;border-radius:1px}
.struct-thumb--flat{padding:0}
.sth__fl-hdr{height:16px;background:#fff;border-bottom:2px solid var(--tpl-accent,#2C2C2C);padding:4px 5px;display:flex;gap:2px;align-items:center}
.sth__fl-circle{width:10px;height:10px;border-radius:50%;background:#e0ddd6}
.sth__fl-grid{display:grid;grid-template-columns:1fr 1fr;padding:4px;gap:3px}
.sth__fl-cell{height:12px;background:#f5f3ef;border-radius:1px}
.sth__fl-cell--wide{grid-column:1/-1;height:8px}
.struct-thumb--academic{align-items:center;justify-content:center;background:#fff}
.sth__ac-inner{display:flex;flex-direction:column;align-items:center;gap:2px;width:80%}
.sth__ac-rule{height:1.5px;background:#2C2C2C;width:100%}
.sth__ac-rule--thin{height:0.5px;background:#2C2C2C;width:100%}
.sth__ac-name{height:7px;width:70%;background:#2C2C2C;border-radius:1px}
.sth__ac-sub{height:4px;width:50%;background:#aaa;border-radius:1px}
.sth__ac-entry{height:3px;width:90%;background:#ddd;border-radius:1px}


/* ============================================================
   NOUVEAUX TEMPLATES (10) — styles ajoutés automatiquement
   ============================================================ */

/* ============================================================
   cv-templates-new.css
   10 nouveaux templates CV — À merger dans outil.css
   ============================================================ */

/* =========================================================
   1. TIMELINE — Expériences en timeline verticale
   ========================================================= */
.cv-tl-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: calc(10px * var(--cv-fs, 1)); color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex; flex-direction: column;
}

.cv-tl-header {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 28px 32px 20px; border-bottom: 2px solid var(--cv-accent, #2C2C2C);
}
.cv-tl-photo {
  width: 76px; height: 100px; border-radius: 4px; overflow: hidden;
  flex-shrink: 0; border: 1px solid #e0ddd6;
}
.cv-tl-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-tl-photo-ph {
  width: 100%; height: 100%; background: #f0ede8;
  display: flex; align-items: center; justify-content: center;
}
.cv-tl-hinfo { flex: 1; }
.cv-tl-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(24px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a;
  line-height: 1.1; margin-bottom: 3px;
}
.cv-tl-job {
  font-size: calc(10px * var(--cv-fs, 1)); color: var(--cv-accent, #2C2C2C);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.cv-tl-contact { font-size: calc(8.5px * var(--cv-fs, 1)); color: #666; line-height: var(--cv-lh, 1.7); }
.cv-tl-cdot { color: #ccc; margin: 0 2px; }
.cv-tl-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.cv-tl-badge {
  font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 700; padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.06); color: var(--cv-accent, #2C2C2C);
  border: 1px solid rgba(0,0,0,.12);
}
.cv-tl-accroche { font-size: calc(9.5px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.6); margin-top: 7px; font-style: italic; }

.cv-tl-body { display: flex; flex: 1; align-items: stretch; }

.cv-tl-main {
  flex: 1; padding: 22px 24px;
  border-right: 1px solid #ece9e3;
}
.cv-tl-sec-lbl {
  font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--cv-accent, #2C2C2C);
  margin-bottom: 12px;
}
.cv-tl-sec-lbl--gap { margin-top: 20px; }

.cv-tl-line-wrap { position: relative; padding-left: 58px; }
.cv-tl-line-wrap::before {
  content: ''; position: absolute;
  left: 34px; top: 4px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom, var(--cv-accent, #2C2C2C) 0%, rgba(0,0,0,.1) 100%);
}

.cv-tl-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: calc(13px * var(--cv-item-gap, 1)); }
.cv-tl-yr {
  position: absolute; left: 0; width: 28px; text-align: right;
  font-size: calc(7.5px * var(--cv-fs, 1)); color: #aaa; font-weight: 600; line-height: 1;
  padding-top: 2px;
}
.cv-tl-dot {
  position: absolute; left: 29px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cv-accent, #2C2C2C);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--cv-accent, #2C2C2C);
  margin-top: 1px; z-index: 1; flex-shrink: 0;
}
.cv-tl-dot--form {
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--cv-accent, #2C2C2C);
}
.cv-tl-cnt { flex: 1; padding-bottom: 6px; }
.cv-tl-item-title { font-size: calc(10px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; margin-bottom: 1px; }
.cv-tl-item-co { font-size: calc(9px * var(--cv-fs, 1)); color: var(--cv-accent, #2C2C2C); font-style: italic; margin-bottom: 2px; }
.cv-tl-item-dates { font-size: calc(8px * var(--cv-fs, 1)); color: #aaa; font-style: normal; }
.cv-tl-equiv { font-size: calc(8px * var(--cv-fs, 1)); color: #aaa; }
.cv-tl-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-tl-bullet { font-size: calc(9px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.45); margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-tl-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }

.cv-tl-sidebar { width: 180px; flex-shrink: 0; padding: 22px 16px; background: #f9f7f4; }
.cv-tl-sb-sec { margin-bottom: calc(16px * var(--cv-sec-gap, 1)); }
.cv-tl-sb-lbl {
  font-size: calc(6.5px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--cv-accent, #2C2C2C);
  border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 3px; margin-bottom: 7px;
}
.cv-tl-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-tl-skill {
  font-size: calc(8px * var(--cv-fs, 1)); padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.07); color: #333; font-weight: 600;
}
.cv-tl-lang { display: flex; justify-content: space-between; align-items: center; font-size: calc(8.5px * var(--cv-fs, 1)); margin-bottom: 5px; }
.cv-tl-lang-dots { flex-shrink: 0; }
.cv-tl-compl { font-size: calc(8.5px * var(--cv-fs, 1)); color: #555; line-height: var(--cv-lh, 1.55); margin-bottom: 2px; }

/* =========================================================
   2. RIGHTSIDE — Sidebar colorée à DROITE
   ========================================================= */
.cv-rs-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: calc(10px * var(--cv-fs, 1)); color: #1a1a1a; background: #fff;
  display: flex; min-height: 1123px; align-items: stretch;
}

.cv-rs-left { flex: 1; padding: 0; display: flex; flex-direction: column; }

.cv-rs-header {
  padding: 30px 28px 20px; border-bottom: 2px solid var(--cv-accent, #2C2C2C);
  margin-bottom: 4px;
}
.cv-rs-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(26px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a;
  line-height: 1.1; margin-bottom: 3px;
}
.cv-rs-job {
  font-size: calc(10px * var(--cv-fs, 1)); text-transform: uppercase; letter-spacing: .08em;
  color: var(--cv-accent, #2C2C2C); margin-bottom: 6px;
}
.cv-rs-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.cv-rs-badge-main {
  font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 700; padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.06); color: var(--cv-accent, #2C2C2C); border: 1px solid rgba(0,0,0,.12);
}

.cv-rs-left-sec { padding: calc(12px * var(--cv-sec-gap, 1)) 28px; }
.cv-rs-left-title {
  font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cv-accent, #2C2C2C);
  margin-bottom: 8px;
}
.cv-rs-accroche { font-size: calc(9.5px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.6); font-style: italic; margin: 0; }
.cv-rs-exp { margin-bottom: calc(10px * var(--cv-item-gap, 1)); }
.cv-rs-form { margin-bottom: calc(8px * var(--cv-item-gap, 1)); }
.cv-rs-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-rs-exp-title { font-size: calc(10px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-rs-exp-date { font-size: calc(8.5px * var(--cv-fs, 1)); color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-rs-exp-co { font-size: calc(9px * var(--cv-fs, 1)); color: var(--cv-accent, #2C2C2C); font-style: italic; margin-bottom: 2px; }
.cv-rs-equiv { font-size: calc(8px * var(--cv-fs, 1)); color: #aaa; font-style: italic; }
.cv-rs-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-rs-bullet { font-size: calc(9px * var(--cv-fs, 1)); color: #444; line-height: var(--cv-lh, 1.45); margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-rs-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }

.cv-rs-right {
  width: 210px; flex-shrink: 0;
  background: var(--cv-sidebar, #2C2C2C); color: #fff;
  padding: 28px 18px; display: flex; flex-direction: column; gap: 0;
}
.cv-rs-photo-wrap {
  width: 80px; height: 100px; border-radius: 4px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.2); margin: 0 auto 16px;
}
.cv-rs-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.cv-rs-photo-ph {
  width: 100%; height: 100%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.cv-rs-sb-sec { margin-bottom: calc(16px * var(--cv-sec-gap, 1)); }
.cv-rs-sb-lbl {
  font-size: calc(6.5px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 3px; margin-bottom: 7px;
}
.cv-rs-ci { font-size: calc(8px * var(--cv-fs, 1)); color: rgba(255,255,255,.78); line-height: var(--cv-lh, 1.65); word-break: break-all; }
.cv-rs-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-rs-skill {
  font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 600; padding: 2px 6px; border-radius: 2px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.85);
}
.cv-rs-lang { display: flex; justify-content: space-between; align-items: center; font-size: calc(8.5px * var(--cv-fs, 1)); margin-bottom: 5px; color: rgba(255,255,255,.85); }
.cv-rs-compl { font-size: calc(8px * var(--cv-fs, 1)); color: rgba(255,255,255,.65); line-height: var(--cv-lh, 1.6); margin-bottom: 2px; }

/* =========================================================
   3. MINIMAL2 — 2 colonnes épurées, typographie pure
   ========================================================= */
.cv-m2-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 10px; color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex; flex-direction: column;
  padding: 44px 48px 36px;
}

.cv-m2-header { text-align: center; margin-bottom: 12px; }
.cv-m2-name {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 28px; font-weight: 300; letter-spacing: .04em;
  color: #1a1a1a; margin-bottom: 4px;
}
.cv-m2-job {
  font-size: 10px; font-weight: 700; color: var(--cv-accent, #2C2C2C);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px;
}
.cv-m2-contact { font-size: 8.5px; color: #888; }
.cv-m2-sep { color: #ddd; }
.cv-m2-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 5px; }
.cv-m2-badge {
  font-size: 7.5px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--cv-accent, #2C2C2C); color: var(--cv-accent, #2C2C2C);
}
.cv-m2-rule {
  height: 1.5px; background: var(--cv-accent, #2C2C2C);
  margin: 10px 0; opacity: .18;
}
.cv-m2-rule--thin { height: 1px; opacity: .1; }
.cv-m2-accroche {
  font-size: 9.5px; color: #555; line-height: 1.65; font-style: italic;
  text-align: center; margin-bottom: 10px;
}
.cv-m2-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; flex: 1; }
.cv-m2-col-left, .cv-m2-col-right { display: flex; flex-direction: column; gap: 0; }

.cv-m2-sec { margin-bottom: 16px; }
.cv-m2-sec-title {
  font-size: 7.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--cv-accent, #2C2C2C);
  border-left: 2px solid var(--cv-accent, #2C2C2C);
  padding-left: 6px; margin-bottom: 10px;
}
.cv-m2-exp, .cv-m2-form { margin-bottom: 10px; }
.cv-m2-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-m2-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-m2-exp-date { font-size: 8.5px; color: #bbb; white-space: nowrap; flex-shrink: 0; }
.cv-m2-exp-co { font-size: 9px; color: #888; margin-bottom: 2px; }
.cv-m2-equiv { font-size: 8px; color: var(--cv-accent, #2C2C2C); font-style: italic; }
.cv-m2-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-m2-bullet { font-size: 9px; color: #555; line-height: 1.45; margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-m2-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }
.cv-m2-skills { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-m2-skill {
  font-size: 8.5px; padding: 2px 9px; border-radius: 20px;
  border: 1px solid rgba(0,0,0,.15); color: #333;
}
.cv-m2-lang { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 4px; }
.cv-m2-lang-name { color: #1a1a1a; font-weight: 600; }
.cv-m2-lang-lv { color: #999; font-style: italic; }
.cv-m2-compl { font-size: 9px; color: #555; margin-bottom: 2px; }

/* =========================================================
   4. TRICOL — 3 colonnes distinctes
   ========================================================= */
.cv-tr-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 10px; color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex; flex-direction: column;
}
.cv-tr-top-bar { height: 6px; background: var(--cv-accent, #2C2C2C); }
.cv-tr-cols { display: flex; flex: 1; align-items: stretch; }

.cv-tr-col1 {
  width: 190px; flex-shrink: 0; padding: 22px 16px;
  background: #f5f3ef; border-right: 1px solid #e8e5df;
  display: flex; flex-direction: column; gap: 0;
}
.cv-tr-photo {
  width: 72px; height: 96px; border-radius: 3px; overflow: hidden;
  border: 1px solid #ddd; margin: 0 auto 12px;
}
.cv-tr-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-tr-photo-ph {
  width: 100%; height: 100%; background: #e8e5df;
  display: flex; align-items: center; justify-content: center;
}
.cv-tr-name-block { text-align: center; margin-bottom: 14px; }
.cv-tr-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; font-weight: 700; color: #1a1a1a; line-height: 1.2;
}
.cv-tr-job {
  font-size: 8px; color: var(--cv-accent, #2C2C2C);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}
.cv-tr-sec { margin-bottom: 14px; }
.cv-tr-sec-title {
  font-size: 6.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--cv-accent, #2C2C2C);
  border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 3px; margin-bottom: 6px;
}
.cv-tr-sec-title--gap { margin-top: 14px; }
.cv-tr-ci { font-size: 8px; color: #555; line-height: 1.65; }
.cv-tr-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-tr-skill {
  font-size: 7.5px; padding: 2px 6px; border-radius: 2px;
  background: rgba(0,0,0,.07); color: #333; font-weight: 600;
}

.cv-tr-col2 {
  flex: 1; padding: 22px 20px;
  border-right: 1px solid #e8e5df;
}
.cv-tr-accroche {
  font-size: 9.5px; color: #444; line-height: 1.6; font-style: italic;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #ece9e3;
}
.cv-tr-exp { margin-bottom: 10px; }
.cv-tr-form { margin-bottom: 8px; }
.cv-tr-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-tr-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-tr-exp-date { font-size: 8.5px; color: #bbb; white-space: nowrap; flex-shrink: 0; }
.cv-tr-exp-co { font-size: 9px; color: var(--cv-accent, #2C2C2C); font-style: italic; margin-bottom: 2px; }
.cv-tr-equiv { font-size: 8px; color: #aaa; font-style: italic; }
.cv-tr-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-tr-bullet { font-size: 9px; color: #444; line-height: 1.45; margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-tr-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }

.cv-tr-col3 { width: 185px; flex-shrink: 0; padding: 22px 16px; }
.cv-tr-lang { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; margin-bottom: 5px; }
.cv-tr-lang-name { color: #1a1a1a; font-weight: 600; }
.cv-tr-lang-dots { flex-shrink: 0; }

/* =========================================================
   5. CARDS — Sections en cartes avec accent gauche
   ========================================================= */
.cv-cd-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: calc(10px * var(--cv-fs, 1)); color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex; flex-direction: column;
}

.cv-cd-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 28px 32px 18px; background: var(--cv-sidebar, #2C2C2C); color: #fff;
}
.cv-cd-hd-info { flex: 1; }
.cv-cd-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(24px * var(--cv-fs, 1)); font-weight: 700; color: #fff;
  line-height: 1.1; margin-bottom: 3px;
}
.cv-cd-job {
  font-size: calc(9.5px * var(--cv-fs, 1)); text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.75); margin-bottom: 6px;
}
.cv-cd-contact { font-size: calc(8px * var(--cv-fs, 1)); color: rgba(255,255,255,.85); }
.cv-cd-cdot { color: rgba(255,255,255,.3); margin: 0 3px; }
.cv-cd-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.cv-cd-badge {
  font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 700; padding: 2px 7px; border-radius: 2px;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.cv-cd-accroche { font-size: calc(9px * var(--cv-fs, 1)); color: rgba(255,255,255,.82); line-height: var(--cv-lh, 1.55); margin-top: 8px; font-style: italic; }
.cv-cd-photo {
  width: 76px; height: 100px; border-radius: 4px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.2); flex-shrink: 0; margin-left: 18px;
}
.cv-cd-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-cd-photo-ph {
  width: 100%; height: 100%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}

.cv-cd-body { display: flex; flex: 1; align-items: stretch; }
.cv-cd-main { flex: 1; padding: 20px 24px; }
.cv-cd-aside { width: 200px; flex-shrink: 0; padding: 20px 18px; background: #f8f6f1; border-left: 1px solid #ece9e3; }

.cv-cd-sec-title {
  font-size: calc(7.5px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cv-accent, #2C2C2C);
  margin-bottom: calc(10px * var(--cv-sec-gap, 1));
}
.cv-cd-card {
  display: flex; gap: 0; margin-bottom: calc(9px * var(--cv-item-gap, 1));
  border: 1px solid #ece9e3; border-radius: 4px; overflow: hidden;
  background: #fff;
}
.cv-cd-card-bar { width: 4px; flex-shrink: 0; background: var(--cv-accent, #2C2C2C); }
.cv-cd-card-body { padding: 9px 11px; flex: 1; }
.cv-cd-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-cd-card-title { font-size: calc(10px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-cd-card-date { font-size: calc(8.5px * var(--cv-fs, 1)); color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-cd-card-co { font-size: calc(9px * var(--cv-fs, 1)); color: var(--cv-accent, #2C2C2C); font-style: italic; margin-bottom: 2px; }
.cv-cd-bullets { margin: 3px 0 0; padding-left: 10px; list-style: none; }
.cv-cd-bullet { font-size: calc(9px * var(--cv-fs, 1)); color: #333; line-height: var(--cv-lh, 1.45); margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-cd-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }

.cv-cd-aside-block { margin-bottom: calc(14px * var(--cv-sec-gap, 1)); }
.cv-cd-aside-title {
  font-size: calc(6.5px * var(--cv-fs, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--cv-accent, #2C2C2C);
  border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 3px; margin-bottom: 7px;
}
.cv-cd-form { margin-bottom: calc(7px * var(--cv-item-gap, 1)); }
.cv-cd-form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-cd-form-title { font-size: calc(9.5px * var(--cv-fs, 1)); font-weight: 700; color: #1a1a1a; }
.cv-cd-form-year { font-size: calc(8.5px * var(--cv-fs, 1)); color: #aaa; flex-shrink: 0; }
.cv-cd-form-school { font-size: calc(8.5px * var(--cv-fs, 1)); color: #777; font-style: italic; }
.cv-cd-equiv { font-size: calc(8px * var(--cv-fs, 1)); color: var(--cv-accent, #2C2C2C); font-style: italic; }
.cv-cd-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-cd-skill {
  font-size: calc(8px * var(--cv-fs, 1)); padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.06); color: #333; font-weight: 600;
}
.cv-cd-lang { display: flex; justify-content: space-between; align-items: center; font-size: calc(8.5px * var(--cv-fs, 1)); margin-bottom: 5px; }
.cv-cd-lang-lv { flex-shrink: 0; }
.cv-cd-compl { font-size: calc(8.5px * var(--cv-fs, 1)); color: #555; margin-bottom: 2px; }

/* =========================================================
   6. HERO — Grand header pleine largeur coloré
   ========================================================= */
.cv-hr-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 10px; color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex; flex-direction: column;
}

.cv-hr-hero {
  display: flex; align-items: center; gap: 22px;
  background: var(--cv-sidebar, #2C2C2C); color: #fff;
  padding: 36px 36px 30px; min-height: 260px;
}
.cv-hr-hero-info { flex: 1; }
.cv-hr-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px; font-weight: 700; color: #fff;
  line-height: 1.1; margin-bottom: 4px;
}
.cv-hr-job { font-size: 10px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.cv-hr-contact { font-size: 8.5px; color: rgba(255,255,255,.65); margin-bottom: 8px; }
.cv-hr-csep { color: rgba(255,255,255,.25); margin: 0 4px; }
.cv-hr-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cv-hr-badge {
  font-size: 7.5px; font-weight: 700; padding: 2px 8px; border-radius: 2px;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.cv-hr-accroche { font-size: 9.5px; color: rgba(255,255,255,.75); line-height: 1.6; font-style: italic; }
.cv-hr-photo {
  width: 90px; height: 90px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
}
.cv-hr-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-hr-photo-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.cv-hr-body { display: flex; flex: 1; align-items: stretch; }
.cv-hr-col-main { flex: 1; padding: 22px 28px; }
.cv-hr-col-side { width: 210px; flex-shrink: 0; padding: 22px 18px; background: #f8f6f1; border-left: 1px solid #ece9e3; }

.cv-hr-sec { margin-bottom: 14px; }
.cv-hr-sec-title {
  font-size: 7.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cv-accent, #2C2C2C);
  border-bottom: 1.5px solid var(--cv-accent, #2C2C2C);
  padding-bottom: 3px; margin-bottom: 8px; opacity: .85;
}
.cv-hr-exp, .cv-hr-form { margin-bottom: 9px; }
.cv-hr-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-hr-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-hr-exp-date { font-size: 8.5px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-hr-exp-co { font-size: 9px; color: var(--cv-accent, #2C2C2C); font-style: italic; margin-bottom: 2px; }
.cv-hr-equiv { font-size: 8px; color: #aaa; font-style: italic; }
.cv-hr-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-hr-bullet { font-size: 9px; color: #444; line-height: 1.45; margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-hr-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }
.cv-hr-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-hr-skill {
  font-size: 8px; padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.07); color: #333; font-weight: 600;
}
.cv-hr-lang { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; margin-bottom: 5px; }
.cv-hr-compl { font-size: 8.5px; color: #555; margin-bottom: 2px; }

/* =========================================================
   7. DARK — Full dark mode
   ========================================================= */
.cv-dk-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 10px; color: rgba(255,255,255,.85); background: #161622;
  display: flex; min-height: 1123px; align-items: stretch;
}

.cv-dk-sidebar {
  width: 210px; flex-shrink: 0;
  background: #1e1e30; border-right: 1px solid rgba(255,255,255,.06);
  padding: 28px 18px; display: flex; flex-direction: column;
}
.cv-dk-photo {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15); margin: 0 auto 14px;
}
.cv-dk-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-dk-photo-ph {
  width: 100%; height: 100%; background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
}
.cv-dk-identity { text-align: center; margin-bottom: 18px; }
.cv-dk-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; font-weight: 700; color: #fff;
  line-height: 1.2; margin-bottom: 2px;
}
.cv-dk-job {
  font-size: 7.5px; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .07em;
}
.cv-dk-sb-sec { margin-bottom: 16px; }
.cv-dk-sb-lbl {
  font-size: 6.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--cv-accent, #5B8CFF);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-bottom: 3px; margin-bottom: 7px;
}
.cv-dk-ci { font-size: 8px; color: rgba(255,255,255,.55); line-height: 1.65; word-break: break-all; }
.cv-dk-badge {
  display: inline-block; font-size: 7.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 2px; margin: 2px 0;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.12);
}
.cv-dk-mob { margin-bottom: 12px; }
.cv-dk-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-dk-skill {
  font-size: 7.5px; font-weight: 600; padding: 2px 6px; border-radius: 2px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
}
.cv-dk-lang { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; margin-bottom: 5px; color: rgba(255,255,255,.75); }
.cv-dk-lang-dots { flex-shrink: 0; }
.cv-dk-compl { font-size: 8px; color: rgba(255,255,255,.5); margin-bottom: 2px; }

.cv-dk-main { flex: 1; padding: 28px 26px; }
.cv-dk-accroche {
  font-size: 9.5px; color: rgba(255,255,255,.6); line-height: 1.6;
  font-style: italic; margin-bottom: 18px;
  border-left: 2px solid var(--cv-accent, #5B8CFF); padding-left: 12px;
}
.cv-dk-sec { margin-bottom: 18px; }
.cv-dk-sec-title {
  font-size: 7.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cv-accent, #5B8CFF);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 4px; margin-bottom: 9px;
}
.cv-dk-exp, .cv-dk-form { margin-bottom: 10px; }
.cv-dk-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-dk-exp-title { font-size: 10px; font-weight: 700; color: #fff; }
.cv-dk-exp-date { font-size: 8.5px; color: rgba(255,255,255,.35); white-space: nowrap; flex-shrink: 0; }
.cv-dk-exp-co { font-size: 9px; color: var(--cv-accent, #5B8CFF); margin-bottom: 2px; font-style: italic; }
.cv-dk-equiv { font-size: 8px; color: rgba(255,255,255,.35); font-style: italic; }
.cv-dk-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-dk-bullet { font-size: 9px; color: rgba(255,255,255,.55); line-height: 1.45; margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-dk-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #5B8CFF); }

/* =========================================================
   8. ASYM — Asymétrique : grande barre + nom décalé
   ========================================================= */
.cv-as-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 10px; color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex;
}

.cv-as-bar { width: 14px; flex-shrink: 0; background: var(--cv-accent, #2C2C2C); }

.cv-as-body { flex: 1; padding: 0; display: flex; flex-direction: column; }

.cv-as-top {
  display: flex; gap: 0; align-items: stretch;
  border-bottom: 1px solid #e8e5df;
}
.cv-as-top-left {
  width: 180px; flex-shrink: 0; padding: 28px 20px;
  background: #f5f3ef; border-right: 1px solid #e8e5df;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cv-as-photo {
  width: 76px; height: 100px; border-radius: 4px; overflow: hidden;
  border: 2px solid #ddd; flex-shrink: 0;
}
.cv-as-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-as-photo-ph {
  width: 100%; height: 100%; background: #e8e5df;
  display: flex; align-items: center; justify-content: center;
}
.cv-as-contact { width: 100%; }
.cv-as-ci { font-size: 8px; color: #666; line-height: 1.7; word-break: break-all; }
.cv-as-bgs { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.cv-as-badge {
  font-size: 7.5px; font-weight: 700; padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.07); color: var(--cv-accent, #2C2C2C); border: 1px solid rgba(0,0,0,.12);
}

.cv-as-top-right { flex: 1; padding: 36px 32px 24px; display: flex; flex-direction: column; justify-content: center; }
.cv-as-name-block { margin-bottom: 6px; }
.cv-as-prenom { display: block; font-size: 14px; font-weight: 300; color: #555; letter-spacing: .05em; }
.cv-as-nom {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px; font-weight: 700; color: #1a1a1a; line-height: 1.0;
}
.cv-as-job { font-size: 10px; color: var(--cv-accent, #2C2C2C); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.cv-as-accroche { font-size: 9.5px; color: #555; line-height: 1.6; font-style: italic; }

.cv-as-rule { height: 1px; background: #e8e5df; }
.cv-as-cols { display: flex; flex: 1; align-items: stretch; }
.cv-as-col-main { flex: 1; padding: 22px 28px; }
.cv-as-col-side { width: 200px; flex-shrink: 0; padding: 22px 18px; border-left: 1px solid #e8e5df; }

.cv-as-sec { margin-bottom: 16px; }
.cv-as-sec-title {
  font-size: 7.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cv-accent, #2C2C2C);
  margin-bottom: 8px;
}
.cv-as-exp, .cv-as-form { margin-bottom: 10px; }
.cv-as-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-as-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-as-exp-date { font-size: 8.5px; color: #aaa; white-space: nowrap; flex-shrink: 0; }
.cv-as-exp-co { font-size: 9px; color: var(--cv-accent, #2C2C2C); font-style: italic; margin-bottom: 2px; }
.cv-as-equiv { font-size: 8px; color: #aaa; font-style: italic; }
.cv-as-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-as-bullet { font-size: 9px; color: #444; line-height: 1.45; margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-as-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }
.cv-as-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-as-skill {
  font-size: 8px; padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.07); color: #333; font-weight: 600;
}
.cv-as-lang { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; margin-bottom: 5px; }
.cv-as-compl { font-size: 8.5px; color: #555; margin-bottom: 2px; }

/* =========================================================
   9. FLAT — Modern flat scandinave
   ========================================================= */
.cv-fl-wrap {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 10px; color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex; flex-direction: column;
  padding: 0;
}

.cv-fl-header {
  display: flex; gap: 16px; align-items: center;
  padding: 26px 32px 18px;
}
.cv-fl-photo {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 2px solid #e0ddd6; flex-shrink: 0;
}
.cv-fl-photo img { width: 100%; height: 100%; object-fit: cover; }
.cv-fl-photo-ph {
  width: 100%; height: 100%; background: #f0ede8;
  display: flex; align-items: center; justify-content: center;
}
.cv-fl-hinfo { flex: 1; }
.cv-fl-name {
  font-size: 20px; font-weight: 700; color: #1a1a1a; letter-spacing: .01em; margin-bottom: 1px;
}
.cv-fl-job { font-size: 9.5px; color: var(--cv-accent, #2C2C2C); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.cv-fl-contact { font-size: 8.5px; color: #888; }
.cv-fl-cdot { color: #ddd; margin: 0 3px; }
.cv-fl-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.cv-fl-badge {
  font-size: 7.5px; padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--cv-accent, #2C2C2C); color: var(--cv-accent, #2C2C2C);
}

.cv-fl-accent-bar { height: 3px; background: var(--cv-accent, #2C2C2C); margin: 0; }
.cv-fl-accroche {
  font-size: 9.5px; color: #555; line-height: 1.65; font-style: italic;
  padding: 12px 32px; border-bottom: 1px solid #ece9e3;
}
.cv-fl-grid {
  flex: 1; padding: 18px 28px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; align-content: start;
}

.cv-fl-sec {
  padding: 14px 14px 10px 0; border-bottom: 1px solid #ece9e3;
}
.cv-fl-sec--wide { grid-column: 1 / -1; }
.cv-fl-sec:nth-child(even):not(.cv-fl-sec--wide) { padding-left: 20px; border-left: 1px solid #ece9e3; }

.cv-fl-sec-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.cv-fl-icon { font-size: 9px; color: var(--cv-accent, #2C2C2C); flex-shrink: 0; }
.cv-fl-sec-title {
  font-size: 7.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cv-accent, #2C2C2C);
}
.cv-fl-sec-body { padding-left: 16px; }

.cv-fl-exp, .cv-fl-form { margin-bottom: 9px; }
.cv-fl-exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cv-fl-exp-title { font-size: 10px; font-weight: 700; color: #1a1a1a; }
.cv-fl-exp-date { font-size: 8.5px; color: #bbb; white-space: nowrap; flex-shrink: 0; }
.cv-fl-exp-co { font-size: 9px; color: #888; margin-bottom: 2px; }
.cv-fl-equiv { font-size: 8px; color: var(--cv-accent, #2C2C2C); font-style: italic; }
.cv-fl-bullets { margin: 2px 0 0; padding-left: 10px; list-style: none; }
.cv-fl-bullet { font-size: 9px; color: #444; line-height: 1.45; margin-bottom: 1px; padding-left: 8px; position: relative; }
.cv-fl-bullet::before { content: '–'; position: absolute; left: 0; color: var(--cv-accent, #2C2C2C); }
.cv-fl-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.cv-fl-skill {
  font-size: 8px; padding: 2px 7px; border-radius: 2px;
  background: rgba(0,0,0,.06); color: #333; font-weight: 600;
}
.cv-fl-lang { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; margin-bottom: 4px; }
.cv-fl-compl { font-size: 8.5px; color: #555; margin-bottom: 2px; }

/* =========================================================
   10. ACADEMIC — Formel, académique, serif centré
   ========================================================= */
.cv-ac-wrap {
  font-family: 'Times New Roman', Times, serif;
  font-size: 10px; color: #1a1a1a; background: #fff;
  min-height: 1123px; display: flex; flex-direction: column;
  padding: 40px 52px 36px;
}

.cv-ac-header { text-align: center; margin-bottom: 18px; }
.cv-ac-top-rule {
  height: 2px; background: #1a1a1a; margin-bottom: 14px;
}
.cv-ac-top-rule--thin { height: 1px; margin-top: 8px; margin-bottom: 6px; }
.cv-ac-name {
  font-size: 22px; font-weight: 700; letter-spacing: .04em;
  color: #1a1a1a; margin-bottom: 4px; text-transform: uppercase;
}
.cv-ac-job {
  font-size: 10px; color: var(--cv-accent, #2C2C2C); font-style: italic;
  letter-spacing: .02em; margin-bottom: 2px;
}
.cv-ac-contact-line { font-size: 8.5px; color: #555; line-height: 1.7; }
.cv-ac-permis-g { font-weight: 700; color: var(--cv-accent, #2C2C2C); }

.cv-ac-accroche {
  font-size: 10px; color: #333; line-height: 1.7;
  font-style: italic; text-align: center;
  margin-bottom: 18px; padding: 10px 20px;
  border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
}

.cv-ac-sec { margin-bottom: 18px; }
.cv-ac-sec-title {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #1a1a1a; margin-bottom: 4px;
}
.cv-ac-rule-double {
  height: 3px;
  border-top: 1.5px solid #1a1a1a;
  border-bottom: 0.5px solid #1a1a1a;
  margin-bottom: 10px;
}

.cv-ac-entry { display: flex; gap: 16px; margin-bottom: 10px; align-items: flex-start; }
.cv-ac-entry-dates {
  font-size: 9px; color: var(--cv-accent, #2C2C2C); white-space: nowrap;
  min-width: 130px; flex-shrink: 0; padding-top: 1px; font-style: italic;
}
.cv-ac-entry-body { flex: 1; }
.cv-ac-entry-title { font-size: 10.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 1px; }
.cv-ac-entry-inst { font-size: 9.5px; color: #555; font-style: italic; margin-bottom: 2px; }
.cv-ac-equiv { font-size: 8.5px; color: var(--cv-accent, #2C2C2C); font-style: italic; }
.cv-ac-bullets { margin: 3px 0 0; padding-left: 14px; list-style: disc; }
.cv-ac-bullet { font-size: 9px; color: #444; line-height: 1.5; margin-bottom: 1px; }

.cv-ac-inline-row { font-size: 9.5px; color: #333; margin-bottom: 6px; line-height: 1.55; }
.cv-ac-inline-label { font-weight: 700; color: #1a1a1a; }
.cv-ac-ref-item { font-size: 9px; color: #444; margin-bottom: 4px; }

/* =========================================================
   MINIATURES pour la grille de sélection (étape 0)
   ========================================================= */

/* Timeline */
.struct-thumb--timeline { flex-direction: row; padding: 0; gap: 0; overflow: hidden; }
.sth__tl-sidebar { width: 32%; background: #f5f3ef; padding: 5px; display: flex; flex-direction: column; gap: 2px; }
.sth__tl-line { flex: 1; position: relative; padding: 5px 5px 5px 14px; display: flex; flex-direction: column; gap: 5px; }
.sth__tl-line::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 1.5px; background: var(--tpl-accent, #2C2C2C); opacity: .4; }
.sth__tl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tpl-accent, #2C2C2C); margin-left: -4px; }

/* RightSide */
.struct-thumb--rightside { flex-direction: row; padding: 0; gap: 0; }
.sth__rs-main { flex: 1; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.sth__rs-sidebar { width: 32%; background: var(--tpl-sidebar, #2C2C2C); padding: 5px; display: flex; flex-direction: column; gap: 2px; }

/* Minimal2 */
.struct-thumb--minimal2 { align-items: center; justify-content: center; }
.sth__m2-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sth__m2-name { height: 8px; width: 55%; background: #2C2C2C; border-radius: 1px; }
.sth__m2-rule { height: 1px; width: 80%; background: var(--tpl-accent, #2C2C2C); opacity: .3; }
.sth__m2-cols { display: flex; gap: 3px; margin-top: 4px; width: 90%; }
.sth__m2-col { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* TriCol */
.struct-thumb--tricol { flex-direction: row; padding: 0; gap: 0; }
.sth__tr-c1 { width: 28%; background: #f5f3ef; padding: 4px 3px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.sth__tr-circle { width: 14px; height: 14px; border-radius: 50%; background: #ddd; flex-shrink: 0; }
.sth__tr-c2 { flex: 1; padding: 4px 3px; display: flex; flex-direction: column; gap: 2px; }
.sth__tr-c3 { width: 28%; padding: 4px 3px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid #e8e5df; }

/* Cards */
.struct-thumb--cards { padding: 0; gap: 0; }
.sth__cd-hdr { height: 20px; background: var(--tpl-sidebar, #2C2C2C); flex-shrink: 0; }
.sth__cd-body { flex: 1; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; }
.sth__cd-card { height: 10px; background: #f5f3ef; border-radius: 2px; border-left: 2px solid var(--tpl-accent, #2C2C2C); }

/* Hero */
.struct-thumb--hero { padding: 0; gap: 0; }
.sth__hr-hero { height: 26px; background: var(--tpl-sidebar, #2C2C2C); flex-shrink: 0; display: flex; align-items: center; padding: 0 6px; gap: 4px; }
.sth__hr-circle { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.25); flex-shrink: 0; }
.sth__hr-body { flex: 1; padding: 4px 6px; display: flex; gap: 4px; }
.sth__hr-col { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* Dark */
.struct-thumb--dark { background: #1e1e30; flex-direction: row; padding: 0; gap: 0; }
.sth__dk-side { width: 32%; background: #161622; padding: 4px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.sth__dk-circle { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.15); }
.sth__dk-main { flex: 1; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.sth__dk-l { height: 4px; background: rgba(255,255,255,.12); border-radius: 1px; }
.sth__dk-lh { height: 5px; background: var(--tpl-accent, #5B8CFF); border-radius: 1px; opacity: .6; }

/* Asym */
.struct-thumb--asym { flex-direction: row; padding: 0; gap: 0; }
.sth__as-bar { width: 6px; background: var(--tpl-accent, #2C2C2C); flex-shrink: 0; }
.sth__as-body { flex: 1; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; }
.sth__as-name { height: 10px; width: 70%; background: #2C2C2C; border-radius: 1px; }

/* Flat */
.struct-thumb--flat { padding: 0; }
.sth__fl-hdr { height: 16px; background: #fff; border-bottom: 2px solid var(--tpl-accent, #2C2C2C); padding: 4px 5px; display: flex; gap: 2px; align-items: center; }
.sth__fl-circle { width: 10px; height: 10px; border-radius: 50%; background: #e0ddd6; }
.sth__fl-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 3px; }
.sth__fl-cell { height: 12px; background: #f5f3ef; border-radius: 1px; }
.sth__fl-cell--wide { grid-column: 1/-1; height: 8px; }

/* Academic */
.struct-thumb--academic { align-items: center; justify-content: center; background: #fff; }
.sth__ac-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 80%; }
.sth__ac-rule { height: 1.5px; background: #2C2C2C; width: 100%; }
.sth__ac-rule--thin { height: 0.5px; background: #2C2C2C; width: 100%; }
.sth__ac-name { height: 7px; width: 70%; background: #2C2C2C; border-radius: 1px; }
.sth__ac-sub { height: 4px; width: 50%; background: #aaa; border-radius: 1px; }
.sth__ac-entry { height: 3px; width: 90%; background: #ddd; border-radius: 1px; }