/* ============ CV Gratuit — styles principaux ============ */
:root {
  --primary: #1a56db;
  --primary-dark: #123fa8;
  --accent: #0ea5e9;
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e3e8f0;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(20, 40, 90, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

a { color: var(--primary); }

/* ---------- Header ---------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.brand { font-size: 1.35rem; text-decoration: none; color: var(--text); }
.main-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.main-nav a {
  text-decoration: none;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
}
.main-nav a:hover { background: #eef3fd; }
.main-nav a.active { background: var(--primary); color: #fff; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #1a56db 0%, #0ea5e9 100%);
  color: #fff;
  text-align: center;
  padding: 56px 0;
}
.hero h1 { margin: 0 0 8px; font-size: 2.2rem; }
.hero .tagline { font-size: 1.2rem; opacity: .95; margin: 0 0 16px; }
.hero-points { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; font-weight: 500; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .05s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #e8eefb; color: var(--primary-dark); }
.btn-secondary:hover { background: #dbe6fa; }
.btn-danger { background: #fdeaea; color: #b42323; }
.btn-danger:hover { background: #fbdcdc; }
.btn-lg { font-size: 1.15rem; padding: 14px 30px; }
.btn-small { padding: 8px 14px; font-size: .9rem; }
.hero .btn-primary { background: #fff; color: var(--primary-dark); }
.hero .btn-primary:hover { background: #f0f4ff; }

/* ---------- Builder ---------- */
.builder-section { padding: 36px 0 10px; }
.builder-section h2 { margin-top: 0; }

.template-picker {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.tpl-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  width: 150px;
  text-align: center;
  box-shadow: var(--shadow);
}
.tpl-card[aria-checked="true"] { border-color: var(--primary); outline: 2px solid rgba(26,86,219,.25); }
.tpl-name { display: block; margin-top: 8px; font-weight: 600; }
.tpl-mini { display: block; height: 110px; border-radius: 6px; border: 1px solid var(--border); position: relative; overflow: hidden; background: #fff; }
.tpl-mini-moderne::before { content:""; position:absolute; left:0; top:0; bottom:0; width:38%; background:#1a56db; }
.tpl-mini-moderne::after { content:""; position:absolute; right:8%; top:12px; left:46%; height:8px; background:#dbe4f5; box-shadow:0 18px 0 #eef2fa, 0 36px 0 #eef2fa, 0 54px 0 #eef2fa; }
.tpl-mini-classique::before { content:""; position:absolute; top:10px; left:20%; right:20%; height:10px; background:#334155; border-radius:4px; }
.tpl-mini-classique::after { content:""; position:absolute; top:34px; left:10%; right:10%; height:6px; background:#cbd5e1; box-shadow:0 16px 0 #e2e8f0, 0 32px 0 #e2e8f0, 0 48px 0 #e2e8f0; }
.tpl-mini-minimal::before { content:""; position:absolute; top:12px; left:10%; width:40%; height:8px; background:#111827; }
.tpl-mini-minimal::after { content:""; position:absolute; top:32px; left:10%; right:10%; height:5px; background:#e5e7eb; box-shadow:0 14px 0 #f0f2f7, 0 28px 0 #f0f2f7, 0 42px 0 #f0f2f7, 0 56px 0 #f0f2f7; }
.tpl-mini-moderne-bleu::before { content:""; position:absolute; top:0; left:0; right:0; height:34%; background:linear-gradient(120deg,#1d4ed8,#3b82f6); }
.tpl-mini-moderne-bleu::after { content:""; position:absolute; top:46%; left:10%; right:30%; height:6px; background:#dbeafe; box-shadow:0 16px 0 #eff6ff, 0 32px 0 #eff6ff, 0 48px 0 #eff6ff; }
.tpl-mini-classique-serif::before { content:""; position:absolute; top:10px; left:25%; right:25%; height:10px; background:#7f1d1d; border-radius:4px; }
.tpl-mini-classique-serif::after { content:""; position:absolute; top:34px; left:12%; right:12%; height:6px; background:#d8b4b4; box-shadow:0 16px 0 #f3e2e2, 0 32px 0 #f3e2e2, 0 48px 0 #f3e2e2; }
.tpl-mini-minimaliste::before { content:""; position:absolute; top:14px; left:12%; width:34%; height:7px; background:#222; }
.tpl-mini-minimaliste::after { content:""; position:absolute; top:36px; left:12%; right:12%; height:4px; background:#eee; box-shadow:0 14px 0 #f7f7f7, 0 28px 0 #f7f7f7, 0 42px 0 #f7f7f7; }
.tpl-mini-creatif::before { content:""; position:absolute; top:0; left:0; right:0; height:34%; background:linear-gradient(120deg,#7c3aed,#db2777,#f59e0b); }
.tpl-mini-creatif::after { content:""; position:absolute; top:46%; left:10%; width:26%; height:12px; border-radius:8px; background:#e9d5ff; box-shadow:34px 0 0 #fbcfe8, 0 22px 0 #fde68a, 34px 22px 0 #ddd6fe; }
.tpl-mini-noir-or::before { content:""; position:absolute; left:0; top:0; bottom:0; width:38%; background:#141414; }
.tpl-mini-noir-or::after { content:""; position:absolute; left:6%; top:14px; width:26%; height:26%; border-radius:50%; border:2px solid #c9a227; box-shadow:0 40px 0 -6px rgba(201,162,39,.5); }
.tpl-mini-dynamique::before { content:""; position:absolute; top:0; left:0; right:0; height:32%; background:linear-gradient(100deg,#0d9488,#84cc16); border-radius:0 0 12px 12px; }
.tpl-mini-dynamique::after { content:""; position:absolute; top:44%; left:10%; width:30%; height:12px; border-radius:8px; background:#0d9488; box-shadow:0 22px 0 #ecfccb, 0 22px 0 2px #84cc16; }
.tpl-mini-corporate::before { content:""; position:absolute; left:0; top:0; bottom:0; width:38%; background:#475569; }
.tpl-mini-corporate::after { content:""; position:absolute; right:8%; top:12px; left:46%; height:7px; background:#cbd5e1; box-shadow:0 18px 0 #e2e8f0, 0 36px 0 #e2e8f0, 0 54px 0 #e2e8f0; }
.tpl-mini-pastel::before { content:""; position:absolute; top:0; left:0; right:0; height:36%; background:linear-gradient(120deg,#fce7f3,#e0f2fe,#f3e8ff); border-radius:0 0 14px 14px; }
.tpl-mini-pastel::after { content:""; position:absolute; top:16%; left:38%; width:24%; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(180,140,180,.4); }
.tpl-mini-contraste::before { content:""; position:absolute; top:12px; left:10%; right:10%; height:14px; background:#000; }
.tpl-mini-contraste::after { content:""; position:absolute; top:40px; left:10%; right:10%; height:8px; background:#000; box-shadow:0 20px 0 #000, 0 40px 0 #e5e5e5, 0 56px 0 #e5e5e5; }
.tpl-mini-timeline::before { content:""; position:absolute; top:12px; bottom:12px; left:22%; width:3px; background:#bae6fd; }
.tpl-mini-timeline::after { content:""; position:absolute; top:16px; left:calc(22% - 5px); width:13px; height:13px; border-radius:50%; background:#0ea5e9; box-shadow:0 30px 0 #0ea5e9, 0 60px 0 #0ea5e9; }
.tpl-mini-compact::before { content:""; position:absolute; left:0; top:0; bottom:0; width:34%; background:#1f2937; }
.tpl-mini-compact::after { content:""; position:absolute; right:6%; top:8px; left:40%; height:4px; background:#9ca3af; box-shadow:0 12px 0 #d1d5db, 0 24px 0 #d1d5db, 0 36px 0 #e5e7eb, 0 48px 0 #e5e7eb, 0 60px 0 #e5e7eb, 0 72px 0 #f3f4f6; }
.tpl-mini-photo-ronde::before { content:""; position:absolute; top:8px; left:32%; width:36%; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#99f6e4,#5eead4); border:3px solid #fff; box-shadow:0 2px 8px rgba(13,148,136,.35); }
.tpl-mini-photo-ronde::after { content:""; position:absolute; top:56%; left:20%; right:20%; height:6px; background:#99f6e4; border-radius:3px; box-shadow:0 16px 0 #ccfbf1, 0 32px 0 #f0fdfa; }

.builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px;
  align-items: start;
}

/* ---------- Formulaire ---------- */
fieldset {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 18px;
  box-shadow: var(--shadow);
}
legend { font-weight: 700; padding: 0 8px; font-size: 1.05rem; }
.field { margin-bottom: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: #fbfcfe;
}
input:focus, textarea:focus { outline: 2px solid rgba(26,86,219,.35); border-color: var(--primary); }
textarea { resize: vertical; }

.repeater-item {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fbfcfe;
  position: relative;
}
.repeater-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.repeater-head strong { font-size: .95rem; }
.btn-remove {
  background: #fdeaea; color: #b42323; border: none; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: .85rem; font-weight: 600;
}
.photo-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
#photo-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 2px solid var(--border); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.autosave-note { color: var(--muted); font-size: .88rem; }

/* ---------- Aperçu ---------- */
.preview-label { font-weight: 700; margin-bottom: 10px; color: var(--muted); text-transform: uppercase; font-size: .85rem; letter-spacing: .05em; }
.preview-col { position: sticky; top: 76px; }

.cv-paper {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 30px rgba(20, 40, 90, .15);
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1f2937;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ----- Modèle MODERNE ----- */
.template-moderne { display: grid; grid-template-columns: 230px 1fr; min-height: 700px; }
.template-moderne .cv-side { background: #1a56db; color: #fff; padding: 28px 20px; }
.template-moderne .cv-side h3 { color: #fff; border-bottom: 2px solid rgba(255,255,255,.35); padding-bottom: 6px; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.template-moderne .cv-side a { color: #fff; }
.template-moderne .cv-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255,255,255,.6); display: block; margin: 0 auto 16px; }
.template-moderne .cv-main { padding: 30px 28px; }
.template-moderne .cv-name { font-size: 1.9rem; margin: 0; color: #1a56db; }
.template-moderne .cv-title { font-size: 1.05rem; color: #4b5563; margin: 2px 0 18px; font-weight: 600; }
.template-moderne .cv-main h3 { color: #1a56db; border-bottom: 2px solid #dbe4f5; padding-bottom: 5px; text-transform: uppercase; font-size: .95rem; letter-spacing: .06em; }
.template-moderne .skill-tag { background: rgba(255,255,255,.18); }

/* ----- Modèle CLASSIQUE ----- */
.template-classique { padding: 36px 40px; font-family: Georgia, "Times New Roman", serif; }
.template-classique .cv-header { text-align: center; border-bottom: 3px double #334155; padding-bottom: 14px; margin-bottom: 18px; }
.template-classique .cv-name { font-size: 2rem; margin: 0; }
.template-classique .cv-title { font-style: italic; color: #475569; margin: 4px 0 8px; }
.template-classique .cv-contact { font-size: .88rem; color: #475569; }
.template-classique h3 { font-variant: small-caps; letter-spacing: .08em; border-bottom: 1px solid #94a3b8; padding-bottom: 4px; color: #1e293b; }
.template-classique .cv-photo { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 10px; }
.template-classique .skill-tag { background: #eef2f7; color: #1e293b; }

/* ----- Modèle MINIMAL ----- */
.template-minimal { padding: 40px 44px; }
.template-minimal .cv-name { font-size: 2rem; margin: 0; font-weight: 800; letter-spacing: -.01em; }
.template-minimal .cv-title { color: var(--muted); margin: 2px 0 6px; font-size: 1.05rem; }
.template-minimal .cv-contact { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.template-minimal h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: #9ca3af; border: none; margin: 22px 0 8px; padding: 0; }
.template-minimal .cv-item { border: none; padding: 0; margin-bottom: 14px; }
.template-minimal .cv-item-head { display: flex; justify-content: space-between; align-items: baseline; }
.template-minimal .cv-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; float: right; margin: 0 0 10px 16px; }
.template-minimal .skill-tag { background: #f3f4f6; color: #111827; border: 1px solid #e5e7eb; }

/* ----- Modèle MODERNE BLEU ----- */
.template-moderne-bleu { font-size: 13px; }
.template-moderne-bleu .cv-banner { background: linear-gradient(120deg, #1d4ed8, #3b82f6); color: #fff; padding: 26px 30px; display: flex; gap: 20px; align-items: center; }
.template-moderne-bleu .cv-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.7); flex: none; }
.template-moderne-bleu .cv-name { margin: 0; font-size: 1.9rem; }
.template-moderne-bleu .cv-title { opacity: .92; font-weight: 600; margin: 2px 0 6px; }
.template-moderne-bleu .cv-contact { font-size: .85rem; opacity: .92; }
.template-moderne-bleu .cv-cols { display: grid; grid-template-columns: 1fr 210px; }
.template-moderne-bleu .cv-main { padding: 24px 28px; }
.template-moderne-bleu .cv-side { background: #eff6ff; padding: 24px 18px; }
.template-moderne-bleu h3 { color: #1d4ed8; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid #bfdbfe; padding-bottom: 5px; }
.template-moderne-bleu .skill-tag { background: #dbeafe; color: #1e40af; }

/* ----- Modèle CLASSIQUE SERIF ----- */
.template-classique-serif { padding: 38px 44px; font-family: Georgia, "Times New Roman", serif; color: #3f2d2d; }
.template-classique-serif .cv-header { text-align: center; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px solid #7f1d1d; }
.template-classique-serif .cv-photo { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 10px; border: 2px solid #7f1d1d; }
.template-classique-serif .cv-name { font-size: 2.1rem; margin: 0; color: #7f1d1d; }
.template-classique-serif .cv-title { font-style: italic; color: #6b4a4a; margin: 4px 0 8px; }
.template-classique-serif .cv-contact { font-size: .88rem; color: #6b4a4a; }
.template-classique-serif h3 { color: #7f1d1d; font-size: 1.02rem; letter-spacing: .04em; border-bottom: 1px solid #d8b4b4; padding-bottom: 4px; }
.template-classique-serif .skill-tag { background: #faf3f3; color: #7f1d1d; border: 1px solid #e5c9c9; }
.template-classique-serif .cv-item-title { color: #4a2222; }

/* ----- Modèle MINIMALISTE ----- */
.template-minimaliste { padding: 44px 48px; color: #222; }
.template-minimaliste .cv-photo { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; float: right; margin: 0 0 12px 18px; filter: grayscale(100%); }
.template-minimaliste .cv-name { font-size: 2.1rem; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.template-minimaliste .cv-title { color: #555; margin: 2px 0 8px; }
.template-minimaliste .cv-contact { font-size: .86rem; color: #777; margin-bottom: 24px; }
.template-minimaliste h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; color: #999; border: none; border-bottom: 1px solid #eee; margin: 26px 0 10px; padding: 0 0 6px; }
.template-minimaliste .cv-item { border: none; padding: 0; margin-bottom: 12px; }
.template-minimaliste .cv-desc { color: #444; }
.template-minimaliste .skill-tag { background: none; border: 1px solid #ddd; color: #333; border-radius: 4px; }
.template-minimaliste .cv-lang-list { list-style: none; padding: 0; }
.template-minimaliste .cv-lang-list li { display: inline; }
.template-minimaliste .cv-lang-list li + li::before { content: " · "; color: #bbb; }

/* ----- Modèle CRÉATIF COLORÉ ----- */
.template-creatif { font-size: 13px; }
.template-creatif .cv-banner { background: linear-gradient(120deg, #7c3aed, #db2777 55%, #f59e0b); color: #fff; padding: 26px 30px; display: flex; gap: 20px; align-items: center; }
.template-creatif .cv-photo { width: 104px; height: 104px; border-radius: 24px; object-fit: cover; border: 3px solid rgba(255,255,255,.8); flex: none; transform: rotate(-3deg); }
.template-creatif .cv-name { margin: 0; font-size: 2rem; font-weight: 800; }
.template-creatif .cv-title { font-weight: 600; opacity: .95; margin: 2px 0 6px; }
.template-creatif .cv-contact { font-size: .85rem; opacity: .93; }
.template-creatif .cv-cols { display: grid; grid-template-columns: 1fr 215px; }
.template-creatif .cv-main { padding: 24px 28px; }
.template-creatif .cv-side { background: linear-gradient(180deg, #fdf4ff, #fff7ed); padding: 24px 18px; }
.template-creatif h3 { font-size: .95rem; color: #7c3aed; margin-bottom: 8px; }
.template-creatif .cv-main h3 { border-left: 5px solid #db2777; padding-left: 10px; }
.template-creatif .cv-side h3 { border-bottom: 2px dashed #f0abfc; padding-bottom: 5px; }
.template-creatif .skill-tag { background: linear-gradient(120deg, #7c3aed, #db2777); color: #fff; font-weight: 600; }
.template-creatif .cv-item-title { color: #6d28d9; }

/* ----- Modèle ÉLÉGANT NOIR ET OR ----- */
.template-noir-or { display: grid; grid-template-columns: 240px 1fr; min-height: 700px; font-size: 13px; }
.template-noir-or .cv-side { background: #141414; color: #e8e0cf; padding: 30px 22px; }
.template-noir-or .cv-photo { width: 130px; height: 130px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 18px; border: 3px solid #c9a227; }
.template-noir-or .cv-side .cv-name { font-size: 1.5rem; margin: 0; text-align: center; color: #f5ecd7; font-family: Georgia, serif; }
.template-noir-or .cv-side .cv-title { text-align: center; color: #c9a227; font-size: .9rem; margin: 4px 0 18px; letter-spacing: .06em; text-transform: uppercase; }
.template-noir-or .cv-side h3 { color: #c9a227; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; border-bottom: 1px solid rgba(201,162,39,.4); padding-bottom: 6px; }
.template-noir-or .cv-side .cv-contact p { color: #cfc6ae; }
.template-noir-or .cv-side .skill-tag { background: rgba(201,162,39,.15); color: #f0dfae; border: 1px solid rgba(201,162,39,.5); }
.template-noir-or .cv-side .cv-lang-list { color: #cfc6ae; }
.template-noir-or .cv-side .cv-empty { color: #6b6250; }
.template-noir-or .cv-main { padding: 32px 30px; }
.template-noir-or .cv-main h3 { color: #141414; font-family: Georgia, serif; font-size: 1.05rem; border-bottom: 2px solid #c9a227; padding-bottom: 5px; }
.template-noir-or .cv-main .cv-desc { color: #3a3a3a; }

/* ----- Modèle JEUNE ET DYNAMIQUE ----- */
.template-dynamique { font-size: 13.5px; }
.template-dynamique .cv-banner { background: linear-gradient(100deg, #0d9488, #84cc16); color: #fff; padding: 28px 32px; display: flex; gap: 20px; align-items: center; border-radius: 0 0 26px 26px; }
.template-dynamique .cv-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.template-dynamique .cv-name { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -.01em; }
.template-dynamique .cv-title { font-weight: 700; margin: 2px 0 6px; font-size: 1.05rem; }
.template-dynamique .cv-contact { font-size: .87rem; font-weight: 500; }
.template-dynamique > *:not(.cv-banner) { margin-left: 32px; margin-right: 32px; }
.template-dynamique { padding-bottom: 26px; }
.template-dynamique h3 { display: inline-block; background: #0d9488; color: #fff; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; padding: 5px 14px; border-radius: 20px; margin: 20px 0 10px; }
.template-dynamique .skill-tag { background: #ecfccb; color: #3f6212; border: 2px solid #84cc16; font-weight: 700; }
.template-dynamique .cv-item { background: #f8fafc; border-radius: 12px; padding: 12px 14px; }
.template-dynamique .cv-item-title { color: #0f766e; }

/* ----- Modèle CORPORATE GRIS ----- */
.template-corporate { display: grid; grid-template-columns: 230px 1fr; min-height: 700px; font-size: 13px; color: #1e293b; }
.template-corporate .cv-side { background: #475569; color: #f1f5f9; padding: 28px 20px; }
.template-corporate .cv-photo { width: 118px; height: 118px; object-fit: cover; border-radius: 8px; display: block; margin: 0 auto 16px; border: 2px solid rgba(255,255,255,.35); }
.template-corporate .cv-side h3 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; border-bottom: 2px solid #94a3b8; padding-bottom: 6px; }
.template-corporate .cv-side .cv-contact p { color: #e2e8f0; }
.template-corporate .cv-side .skill-tag { background: rgba(255,255,255,.14); color: #fff; border-radius: 4px; }
.template-corporate .cv-side .cv-lang-list { color: #e2e8f0; }
.template-corporate .cv-side .cv-empty { color: #94a3b8; }
.template-corporate .cv-main { padding: 30px 30px; }
.template-corporate .cv-name { font-size: 2rem; margin: 0; color: #0f172a; font-weight: 800; }
.template-corporate .cv-title { color: #475569; font-weight: 600; margin: 2px 0 16px; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
.template-corporate .cv-main h3 { color: #0f172a; font-size: .88rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid #cbd5e1; padding-bottom: 5px; }
.template-corporate .cv-dates { color: #64748b; font-weight: 600; }

/* ----- Modèle DOUX PASTEL ----- */
.template-pastel { font-size: 13.5px; color: #4a4458; background: #fffdfb; }
.template-pastel .cv-banner { background: linear-gradient(120deg, #fce7f3, #e0f2fe 60%, #f3e8ff); text-align: center; padding: 30px 30px 24px; border-radius: 0 0 30px 30px; }
.template-pastel .cv-photo { width: 118px; height: 118px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 12px; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(180,140,180,.25); }
.template-pastel .cv-name { margin: 0; font-size: 2rem; color: #6b4a6e; font-weight: 700; }
.template-pastel .cv-title { color: #8a7d99; margin: 2px 0 8px; font-weight: 600; }
.template-pastel .cv-contact { font-size: .87rem; color: #8a7d99; }
.template-pastel .cv-section { background: #fff; border-radius: 16px; padding: 16px 20px; margin: 14px 28px; box-shadow: 0 2px 10px rgba(180,150,190,.12); }
.template-pastel h3 { color: #9a6aa0; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 0; }
.template-pastel .skill-tag { background: #f3e8ff; color: #7c3aed; }
.template-pastel .cv-item-title { color: #5b4a63; }

/* ----- Modèle FORT CONTRASTE ----- */
.template-contraste { padding: 36px 40px; color: #000; }
.template-contraste .cv-photo { width: 110px; height: 110px; object-fit: cover; border-radius: 0; float: right; margin: 0 0 12px 18px; border: 4px solid #000; filter: grayscale(100%) contrast(1.15); }
.template-contraste .cv-name { font-size: 2.6rem; margin: 0; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1; }
.template-contraste .cv-title { font-weight: 800; font-size: 1.1rem; margin: 4px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.template-contraste .cv-contact { font-weight: 700; font-size: .9rem; border-top: 4px solid #000; border-bottom: 4px solid #000; padding: 8px 0; margin: 14px 0 20px; }
.template-contraste h3 { background: #000; color: #fff; display: inline-block; padding: 5px 16px; font-size: .92rem; text-transform: uppercase; letter-spacing: .1em; margin: 22px 0 10px; }
.template-contraste .cv-item { border-left: 5px solid #000; padding-left: 12px; }
.template-contraste .cv-dates { color: #000; font-weight: 800; }
.template-contraste .skill-tag { background: #000; color: #fff; border-radius: 0; font-weight: 700; }
.template-contraste .cv-lang-list { font-weight: 600; }

/* ----- Modèle TIMELINE VERTICALE ----- */
.template-timeline { padding: 34px 40px; font-size: 13.5px; }
.template-timeline .cv-header { display: flex; gap: 20px; align-items: center; border-bottom: 3px solid #0ea5e9; padding-bottom: 16px; margin-bottom: 20px; }
.template-timeline .cv-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid #0ea5e9; }
.template-timeline .cv-name { margin: 0; font-size: 1.9rem; color: #0c4a6e; }
.template-timeline .cv-title { color: #0369a1; font-weight: 600; margin: 2px 0 6px; }
.template-timeline .cv-contact { font-size: .86rem; color: #475569; }
.template-timeline h3 { color: #0284c7; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; }
.template-timeline .tl .cv-item { position: relative; padding-left: 28px; margin-bottom: 16px; }
.template-timeline .tl .cv-item::before { content: ""; position: absolute; left: 5px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: #0ea5e9; box-shadow: 0 0 0 3px #e0f2fe; }
.template-timeline .tl .cv-item::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: -16px; width: 2px; background: #bae6fd; }
.template-timeline .tl .cv-item:last-child::after { display: none; }
.template-timeline .cv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.template-timeline .skill-tag { background: #e0f2fe; color: #075985; }

/* ----- Modèle COMPACT UNE PAGE ----- */
.template-compact { display: grid; grid-template-columns: 195px 1fr; min-height: 700px; font-size: 12px; line-height: 1.4; color: #1f2937; }
.template-compact .cv-side { background: #1f2937; color: #e5e7eb; padding: 20px 14px; }
.template-compact .cv-photo { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 12px; border: 2px solid #6b7280; }
.template-compact .cv-side h3 { color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid #4b5563; padding-bottom: 4px; margin: 14px 0 6px; }
.template-compact .cv-side .cv-contact p { font-size: .78rem; color: #d1d5db; margin: 1px 0; }
.template-compact .cv-side .skill-tag { background: #374151; color: #f3f4f6; font-size: .72rem; padding: 2px 8px; }
.template-compact .cv-side .cv-lang-list { font-size: .8rem; color: #d1d5db; padding-left: 14px; }
.template-compact .cv-side .cv-empty { color: #6b7280; }
.template-compact .cv-side .cv-section { margin-bottom: 10px; }
.template-compact .cv-main { padding: 20px 22px; }
.template-compact .cv-name { font-size: 1.55rem; margin: 0; color: #111827; }
.template-compact .cv-title { font-size: .88rem; color: #4b5563; font-weight: 600; margin: 1px 0 10px; }
.template-compact .cv-main h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #111827; border-bottom: 2px solid #111827; padding-bottom: 3px; margin: 14px 0 6px; }
.template-compact .cv-main .cv-section { margin-bottom: 8px; }
.template-compact .cv-item { margin-bottom: 8px; }
.template-compact .cv-desc { font-size: .85em; }
.template-compact .cv-dates { font-size: .78em; }

/* ----- Modèle PHOTO RONDE CENTRÉE ----- */
.template-photo-ronde { padding: 0 0 30px; font-size: 13.5px; }
.template-photo-ronde .cv-header { text-align: center; background: linear-gradient(180deg, #ccfbf1, #fff); padding: 34px 30px 22px; }
.template-photo-ronde .cv-photo { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 14px; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(13,148,136,.3); }
.template-photo-ronde .cv-name { margin: 0; font-size: 2.1rem; color: #115e59; }
.template-photo-ronde .cv-title { color: #0d9488; font-weight: 600; margin: 3px 0 8px; font-size: 1.05rem; }
.template-photo-ronde .cv-contact { font-size: .88rem; color: #475569; }
.template-photo-ronde .cv-section { margin: 0 34px 16px; }
.template-photo-ronde h3 { text-align: center; color: #0d9488; font-size: .88rem; text-transform: uppercase; letter-spacing: .14em; }
.template-photo-ronde h3::after { content: ""; display: block; width: 52px; height: 3px; background: #5eead4; margin: 6px auto 0; border-radius: 2px; }
.template-photo-ronde .cv-item { text-align: left; }
.template-photo-ronde .skill-tags { justify-content: center; }
.template-photo-ronde .skill-tag { background: #ccfbf1; color: #115e59; font-weight: 600; }
.template-photo-ronde .cv-lang-list { list-style: none; padding: 0; text-align: center; }
.template-photo-ronde .cv-lang-list li { display: inline; }
.template-photo-ronde .cv-lang-list li + li::before { content: " · "; color: #99f6e4; }

/* ----- Éléments communs du CV ----- */
.cv-section { margin-bottom: 18px; }
.cv-item { margin-bottom: 14px; }
.cv-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cv-item-title { font-weight: 700; }
.cv-item-sub { color: #4b5563; font-size: .92em; }
.cv-dates { font-size: .85em; color: #6b7280; white-space: nowrap; }
.cv-desc { margin: 4px 0 0; white-space: pre-line; font-size: .93em; }
.cv-contact p { margin: 2px 0; font-size: .9em; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 6px 0; list-style: none; }
.skill-tag { padding: 4px 10px; border-radius: 20px; font-size: .82rem; }
.cv-lang-list { margin: 6px 0; padding-left: 18px; font-size: .92em; }
.cv-empty { color: #9ca3af; font-style: italic; }

/* ---------- FAQ ---------- */
.faq { padding: 40px 0 50px; }
.faq h2 { text-align: center; }
.faq details {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.faq summary { font-weight: 700; cursor: pointer; }

/* ---------- Pages de contenu ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; padding: 30px 0 50px; }
.article { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 34px; box-shadow: var(--shadow); }
.article h1 { margin-top: 0; }
.article h2 { margin-top: 30px; color: var(--primary-dark); }
.article .lead { font-size: 1.12rem; color: #374151; }
.sidebar .ad-slot, .ad-slot {
  background: #eef1f6; border: 1px dashed #b9c3d4; border-radius: 8px;
  color: #8a94a8; text-align: center; padding: 26px 10px; font-size: .85rem; margin-bottom: 20px;
}
.example-card { background: #f8fafd; border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; }
.example-card h3 { margin-top: 0; }
.cta-box { background: linear-gradient(135deg, #1a56db, #0ea5e9); color: #fff; border-radius: var(--radius); padding: 26px; text-align: center; margin: 30px 0; }
.cta-box .btn-primary { background: #fff; color: var(--primary-dark); }

/* ---------- Footer ---------- */
.site-footer { background: #111c33; color: #cbd5e1; margin-top: 20px; }
.footer-inner { padding-top: 30px; padding-bottom: 24px; display: grid; gap: 14px; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: #e2e8f0; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.copyright { font-size: .85rem; color: #94a3b8; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .builder-grid { grid-template-columns: 1fr; }
  .preview-col { position: static; }
  .article-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 1.7rem; }
  .field-row { grid-template-columns: 1fr; }
  .template-moderne { grid-template-columns: 1fr; }
  .template-noir-or, .template-corporate, .template-compact { grid-template-columns: 1fr; }
  .template-moderne-bleu .cv-cols, .template-creatif .cv-cols, .template-timeline .cv-cols { grid-template-columns: 1fr; }
  .template-moderne .cv-side { padding: 20px; }
  .template-classique, .template-minimal { padding: 24px; }
  .tpl-card { width: calc(50% - 7px); }
  .article { padding: 22px; }
}

/* Emplacements publicitaires (remplacer par le code AdSense) */
.ad-slot {
  border: 2px dashed #b0b7c3;
  background: #f4f6f9;
  color: #8a93a3;
  text-align: center;
  padding: 28px 12px;
  margin: 24px auto;
  max-width: 970px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ---------- Capture PDF : mise en page desktop forcée ----------
   Le PDF est généré depuis un clone hors écran large de 794 px :
   il reprend toujours la maquette desktop du modèle (ex. barre
   latérale à gauche), même sur un téléphone qui affiche la
   version empilée en une colonne. */
.pdf-capture { position: fixed; left: -10000px; top: 0; width: 794px; }
.pdf-capture .cv-paper { width: 794px !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; }
.pdf-capture .template-moderne { grid-template-columns: 230px 1fr !important; }
.pdf-capture .template-moderne .cv-side { padding: 28px 20px !important; }
.pdf-capture .template-noir-or { grid-template-columns: 240px 1fr !important; }
.pdf-capture .template-corporate { grid-template-columns: 230px 1fr !important; }
.pdf-capture .template-compact { grid-template-columns: 195px 1fr !important; }
.pdf-capture .template-moderne-bleu .cv-cols { grid-template-columns: 1fr 210px !important; }
.pdf-capture .template-creatif .cv-cols { grid-template-columns: 1fr 215px !important; }
.pdf-capture .template-timeline .cv-cols { grid-template-columns: 1fr 1fr !important; }

/* ---------- Aperçu « comme le PDF » ----------
   Sur petit écran, l'aperçu en direct est rendu à largeur desktop fixe
   (794 px, exactement comme la capture PDF) puis réduit à l'écran par
   transform : ce qu'on voit correspond au PDF téléchargé. */
.preview-scale { width: 100%; overflow: hidden; }
#cv-paper.pdf-like {
  width: 794px !important;
  max-width: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform-origin: top left;
}
#cv-paper.pdf-like.template-moderne { grid-template-columns: 230px 1fr !important; }
#cv-paper.pdf-like.template-moderne .cv-side { padding: 28px 20px !important; }
#cv-paper.pdf-like.template-noir-or { grid-template-columns: 240px 1fr !important; }
#cv-paper.pdf-like.template-corporate { grid-template-columns: 230px 1fr !important; }
#cv-paper.pdf-like.template-compact { grid-template-columns: 195px 1fr !important; }
#cv-paper.pdf-like.template-moderne-bleu .cv-cols { grid-template-columns: 1fr 210px !important; }
#cv-paper.pdf-like.template-creatif .cv-cols { grid-template-columns: 1fr 215px !important; }
#cv-paper.pdf-like.template-timeline .cv-cols { grid-template-columns: 1fr 1fr !important; }