*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --navy:    #0f2137;
  --blue:    #1a3a5c;
  --accent:  #2e75b6;
  --accent2: #4a9fd4;
  --gold:    #c9a84c;
  --green:   #1a6b3c;
  --orange:  #c05e00;
  --gray:    #5a6478;
  --lgray:   #e8edf3;
  --bg:      #f4f6f9;
  --white:   #ffffff;
  --text:    #1a1f2e;
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Outfit', sans-serif;
  --fm: 'DM Mono', monospace;

  /* stack colors */
  --c-angular:  #dd0031;
  --c-vue:      #41b883;
  --c-react:    #61dafb;
  --c-php:      #8892be;
  --c-python:   #ffd43b;
  --c-java:     #ed8b00;
  --c-node:     #68a063;
  --c-qa:       #9b9b9b;
  --c-devops:   #1e6fb5;

  /* ── Style Studio — variables de personnalisation CV ── */
  --cv-sidebar-bg:    #1a2332;
  --cv-sidebar-text:  #e8e4f0;
  --cv-accent:        #2e75b6;
  --cv-accent2:       #4a9fd4;
  --cv-body-bg:       #ffffff;
  --cv-body-text:     #1a1f2e;
  --cv-tag-bg:        rgba(255,255,255,.13);
  --cv-tag-border:    rgba(255,255,255,.22);
  --cv-tag-text:      inherit;
  --cv-font-main:     'Outfit', sans-serif;
  --cv-font-title:    'Outfit', sans-serif;
  --cv-font-size:     15px;

  /* ── UI sobre — palette onboarding & futurs écrans ── */
  --ui-surface:      #f7f5f2;
  --ui-surface-2:    #f0ece8;
  --ui-card:         #ffffff;
  --ui-border:       #e0dbd5;
  --ui-border-light: #ede9e4;
  --ui-red:          #c0392b;
  --ui-red-light:    #fcecea;
  --ui-red-border:   #f0b8b0;
  --ui-text-1:       #1a1a1a;
  --ui-text-2:       #666666;
  --ui-text-3:       #aaaaaa;
  --ui-green-light:  #eaf3de;
  --ui-green-text:   #27500a;
}

html { font-size:15px; background:var(--bg); scroll-behavior:smooth; }
body { font-family:var(--fb); color:var(--text); line-height:1.6; }

/* ── NAV BAR ─────────────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:100;
  background:#ffffff;
  border-bottom: 1px solid #e0e0e0;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px;
  height:auto; min-height:58px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.topbar-name {
  font-family:var(--fb); font-size:1rem; font-weight:100;
  color:#1a1a1a; letter-spacing:-.2px;
  display:flex; flex-direction:column; gap:2px;
}
.topbar-name span {
  color:#666; font-style:normal; font-weight:400; font-size:.82rem;
}

/* View switcher topbar — caché, remplacé par nav-bar en bas */
.view-switcher-wrap { display: none; }
.view-switcher      { display: none; }
.view-btn           { display: none; }
.topbar-contact {
  display:flex; gap:16px; align-items:center;
}
.tc { font-family:var(--fm); font-size:.68rem; color:#888; }
.tc a { color:#c0392b; text-decoration:none; }

/* ── VIEWS ───────────────────────────────────────────────────────────── */
/* Vues — display contrôlé uniquement via .active, jamais par ID seul */
.view { display:none; }
.view.active { display:block; }
#view-fiche.active  { display:block; }
#view-carte.active  { display:flex; align-items:center; justify-content:center; min-height:70vh; padding:32px 24px 100px; }
#view-fiche  { max-width:720px; margin:0 auto; padding:32px 24px 100px; }

/* ── FILTER BAR ──────────────────────────────────────────────────────── */
.filter-bar {
  background:var(--white);
  border-bottom:1px solid var(--lgray);
  padding:12px 32px;
  display:flex; align-items:center; gap:10px;
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  position:sticky; top:52px; z-index:90;
}
.filter-bar::-webkit-scrollbar { display:none; }
.fpill { white-space:nowrap; flex-shrink:0; }
.filter-label { font-family:var(--fm); font-size:.65rem; color:var(--gray); letter-spacing:.08em; text-transform:uppercase; margin-right:4px; }
.fpill {
  font-family:var(--fm); font-size:.68rem; font-weight:500;
  padding:4px 12px; border-radius:12px; border:1.5px solid transparent;
  cursor:pointer; transition:all .18s; background:var(--lgray); color:var(--gray);
}
.fpill.active, .fpill:hover { color:var(--white); border-color:transparent; }
.fpill[data-stack="all"]          { background:#1a3a5c; color:white; }
.fpill[data-stack="all"].inactive { background:var(--lgray); color:var(--gray); }
.fpill[data-stack="Angular"]  { --sc:#dd0031; }
.fpill[data-stack="Vue"]      { --sc:#2e9e6b; }
.fpill[data-stack="React"]    { --sc:#0a9ab5; }
.fpill[data-stack="PHP"]      { --sc:#6457a6; }
.fpill[data-stack="Python"]   { --sc:#c8a200; }
.fpill[data-stack="Java"]     { --sc:#c07000; }
.fpill[data-stack="Node"]     { --sc:#3d7a39; }
.fpill[data-stack="DevOps"]   { --sc:#1e6fb5; }
.fpill.active { background:var(--sc); border-color:var(--sc); color:white; }
.fpill:not([data-stack="all"]):hover { background:var(--sc); color:white; }
/* Tout afficher désactivé quand aucun filtre actif */
.fpill-disabled { opacity:.3; pointer-events:none; cursor:default; }

/* ── CV VIEW ─────────────────────────────────────────────────────────── */
/* Fond gris sidebar print-only — invisible en mode screen */
#print-sidebar-bg { display: none; }

/* ══ STRUCTURE UNIFIÉE CV — sidebar pleine hauteur ══════════════════════
   cv-wrap = grille 2 colonnes : sidebar | cv-right(header + main)
   Valable pour TOUS les thèmes. CSS par thème surcharge couleurs/typo.
════════════════════════════════════════════════════════════════════════ */
.cv-wrap {
  max-width: 960px;
  margin: 36px auto 80px;
  background: var(--white);
  box-shadow: 0 4px 32px rgba(0,0,0,.09);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 255px 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
  font-family: var(--cv-font-main, var(--fb));
  font-size: var(--cv-font-size, 15px);
}

/* Colonne droite — empile header + main verticalement */
.cv-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── THÈME TECH (défaut) — header 2 colonnes : left | contact ──────── */
.cv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: #1a3556;
  padding: 26px 36px 22px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.header-left { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; }

/* ── Photo en haut de sidebar — toujours présente ── */
.side-photo-wrap {
  display: none; /* caché si pas de photo */
  justify-content: center;
  margin: 20px auto 45px;
}
.side-photo-wrap.visible { display: flex; }
.side-photo {
  width: 90px; height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cv-accent);
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  display: block;
}

/* Placeholder cercle quand pas de photo */
.side-photo-placeholder {
  display: block; /* toujours visible sauf si photo présente */
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #c8d6e8 60%, #8ba3be 100%);
  border: 3px solid var(--cv-accent);
  margin: 20px auto 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.side-photo-placeholder.hidden { display: none !important; }
/* Masquer le placeholder quand la photo est visible */
.side-photo-wrap.visible ~ .side-photo-placeholder { display: none !important; }

/* Variante industrie */
.theme-industrie .side-photo-placeholder {
  background: radial-gradient(circle at 35% 35%, #fff 0%, #d0d0d0 60%, #a0a0a0 100%);
  border-color: var(--cv-accent);
}

@media print {
  /* Style Studio — masqué à l'impression */
  .ss-fab, .ss-drawer, .ss-overlay, .ss-toast,
  .ss-name-overlay, .ss-name-modal { display: none !important; }
  .header-style-badge { display: none !important; }

  .side-photo   { width:82px; height:82px; }
  .header-version-badge { display:none !important; }
}
.cv-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cv-accent),var(--gold),var(--cv-accent2)); }
.header-name { font-family:var(--fb); font-size:2.8rem; font-weight:800; color:var(--white); letter-spacing:-.5px; line-height:1; margin-bottom:7px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.header-title { font-family:var(--fb); font-size:1.2rem; font-style:normal; color:var(--cv-accent2); margin-bottom:10px; }
.badge-exemple { font-family:var(--fm); font-style: normal !important; font-size:.65rem; font-weight:500; padding:3px 9px; border-radius:4px; background:linear-gradient(135deg,#f59e0b,#eab308); color:white !important; text-transform:uppercase; letter-spacing:.06em; box-shadow:0 2px 6px rgba(245,158,11,.4); }
.header-tagline { font-size:.78rem; color:rgba(255,255,255,.45); font-family:var(--fm); }
.header-contact { display:flex; flex-direction:column; gap:7px; align-items:flex-end; justify-content:center; }
.contact-item { font-size:.78rem; color:rgba(255,255,255,.72); font-family:var(--fm); }
.contact-item a { color:var(--cv-accent2); text-decoration:none; }

/* cv-body supprimé — structure gérée par cv-wrap grid + cv-right flex */
.cv-sidebar { background:var(--cv-sidebar-bg); padding:32px 26px; border-right:1px solid rgba(0,0,0,.08); min-height:100%; color:var(--cv-sidebar-text); }
.cv-sidebar .skill-tag { background:var(--cv-tag-bg); border-color:var(--cv-tag-border); color:var(--cv-tag-text, var(--cv-sidebar-text)); }
.cv-sidebar .skill-tag.star { background:var(--cv-tag-bg); border-color:var(--cv-tag-border); color:var(--cv-tag-text, var(--cv-sidebar-text)); font-weight:100; }
.cv-sidebar .sidebar-section > div,
.cv-sidebar .sidebar-section span:not(.skill-tag):not(.badge-ai) { color:var(--cv-sidebar-text); }
.sidebar-section { margin-bottom:28px; }
.sidebar-title { font-family:var(--fm); font-size:.63rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--cv-accent); border-bottom:none; padding-bottom:5px; margin-bottom:12px; position:relative; }
.sidebar-title::after { content:''; display:block; position:absolute; bottom:0; left:0; width:50%; height:1px; background:var(--cv-accent); }
.skill-group { margin-bottom:13px; }
.skill-group-label { font-size:.7rem; font-weight:100; color:var(--cv-sidebar-text, var(--blue)); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.skill-tags { display:flex; flex-wrap:wrap; gap:4px; }
.skill-tag { font-family:var(--fm); font-size:.66rem; padding:2px 9px; border-radius:6px; background:var(--cv-tag-bg); border:1px solid var(--cv-tag-border); color:var(--cv-tag-text, var(--text)); }
.skill-tag.star { background:var(--cv-tag-bg); border-color:var(--cv-tag-border); color:var(--cv-tag-text, var(--cv-sidebar-text)); font-weight:100; }
.formation-item { margin-bottom:11px; }
.formation-year { font-family:var(--fm); font-size:.66rem; color:var(--cv-accent); font-weight:500; }
.formation-name { font-size:.76rem; color:var(--cv-sidebar-text, var(--text)); font-weight:500; line-height:1.4; }
.portfolio-link { display:block; font-size:.73rem; font-family:var(--fm); color:var(--cv-accent); text-decoration:none; padding:5px 0; border-bottom:1px dashed rgba(0,0,0,.12); transition:color .15s; page-break-inside:avoid; break-inside:avoid; }
.portfolio-link:last-child { border-bottom:none; }
.portfolio-link:hover { color:var(--gold); }
.portfolio-url { display:flex; align-items:center; gap:5px; font-weight:500; }
.portfolio-desc { display:block; font-size:.65rem; color:var(--cv-sidebar-text, var(--gray)); margin-top:2px; padding-left:12px; line-height:1.4; opacity:.75; }
.badge-ai { display:block; font-family:var(--fm); font-size:.6rem; padding:1px 6px; border-radius:2px; background:#e8f0e8; color:var(--green); border:1px solid #b5d4b5; margin-top:3px; margin-left:12px; width:fit-content; }
.dot { width:5px; height:5px; border-radius:50%; background:var(--cv-accent); flex-shrink:0; }
.ai-note { margin-top:8px; padding:7px 9px; background:#f0f8e8; border-radius:3px; border:1px solid #c0d8b0; font-size:.68rem; color:var(--gray); line-height:1.5; }
.ai-note strong { color:var(--green); font-size:.63rem; display:block; margin-bottom:3px; }

.cv-main { padding:64px 38px 32px; background:var(--cv-body-bg, #ffffff); color:var(--cv-body-text, #1a1f2e);}
/* Tags dans le contenu CV : fond clair adapté au fond de page */
.cv-main .skill-tag { background:var(--cv-body-bg, #f4f6f9); border-color:rgba(0,0,0,.12); color:var(--cv-body-text, #1a1f2e); opacity:.9; }
.cv-main .skill-tag.star { background:transparent; border-color:var(--cv-accent); color:var(--cv-accent); opacity:1; font-weight:100; }
.accroche { font-family:var(--fb); font-size:1.02rem; font-style:normal; color:#2a3245; line-height:1.7; padding:14px 18px; border-left:3px solid var(--gold); background:#fafbfc; margin-bottom:28px; border-radius:0 4px 4px 0; }
.section-title { font-family:var(--fm); font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cv-accent); border-bottom:1px solid var(--lgray); padding-bottom:6px; margin-bottom:18px; margin-top:28px; display:flex; align-items:center; gap:9px; }
.section-title::before { content:''; display:block; width:18px; height:2px; background:linear-gradient(90deg,var(--cv-accent),var(--cv-accent2)); flex-shrink:0; }

.job { margin-bottom:22px; padding-bottom:22px; border-bottom:1px dashed #e0e6ef; transition:opacity .25s; }
.job:last-child { border-bottom:none; }
.job.dimmed { opacity:.18; }
.job-header { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px; margin-bottom:2px; }
.job-title { font-family:var(--fb); font-size:1.05rem; font-weight:100; color:var(--blue); }
.job-dates { font-family:var(--fm); font-size:.68rem; color:var(--gray); white-space:nowrap; }
.job-company { font-size:.8rem; font-weight:500; color:var(--cv-accent); margin-bottom:7px; }
.job-desc { font-size:.78rem; color:var(--gray); font-style:italic; margin-bottom:7px; line-height:1.5; }
.job-bullets { list-style:none; margin-bottom:7px; }
.job-bullets li { font-size:.8rem; color:var(--text); padding:2px 0 2px 15px; position:relative; line-height:1.5; }
.job-bullets li::before { content:'▸'; position:absolute; left:0; color:var(--cv-accent); font-size:.68rem; top:4px; }
.job-bullets li.hl { color:var(--blue); font-weight:100; }
.job-bullets li.hl::before { color:var(--cv-accent); }
.job-stack { font-family:var(--fm); font-size:.66rem; color:var(--gray); padding:4px 9px; background:var(--bg); border-left:2px solid var(--cv-accent2); border-radius:0 3px 3px 0; line-height:1.6; }
.job-stack strong { color:var(--cv-accent); }
.job-stack-pills { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.stack-pill { font-family:var(--fm); font-size:.6rem; padding:1px 6px; border-radius:10px; font-weight:100; color:white; }

.gap-box { background:#fff8f0; border:1px solid #f0d4b0; border-radius:4px; padding:14px 18px; margin-top:24px; }
.gap-title { font-family:var(--fm); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:10px; font-weight:500; }
.gap-row { display:flex; gap:10px; margin-bottom:9px; align-items:flex-start; }
.gap-label { font-family:var(--fm); font-size:.7rem; font-weight:100; min-width:68px; padding:2px 5px; border-radius:2px; text-align:center; }
.gap-label.ok { background:#e0f0e8; color:var(--green); border:1px solid #b5d4b5; }
.gap-label.gap { background:#fff0e0; color:var(--orange); border:1px solid #f0d4b0; }
.gap-text { font-size:.76rem; color:var(--text); line-height:1.5; }

/* ══════════════════════════════════════════════════════════════════════
   STRUCTURE THÈME INDUSTRIE — sidebar sombre
   Header vertical dans cv-right, sidebar fixe à gauche,
   contacts en ligne sous le titre.
══════════════════════════════════════════════════════════════════════ */

/* Header : colonne verticale (titre → poste → tagline → contacts) */
.theme-industrie .cv-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  border-bottom: none;
  overflow: visible;
  flex-shrink: 0;
}

/* Nom : flex pour accueillir le badge EXEMPLE */
.theme-industrie .header-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Contacts : ligne horizontale wrappable */
.theme-industrie .header-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* Chaque item de contact : icône + texte */
.theme-industrie .contact-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fb);
}

/* Sidebar : min-height pleine hauteur, pas de bordure droite */
.theme-industrie .cv-sidebar {
  border-right: none;
  min-height: 100%;
}

/* Titre sidebar : caps + ligne dégradée en dessous */
.theme-industrie .sidebar-title {
  font-family: var(--fb);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: none;
  padding-bottom: 6px;
  margin-bottom: 12px;
  position: relative;
}
.theme-industrie .sidebar-title::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
}

/* Labels de groupe de compétences */
.theme-industrie .skill-group-label {
  font-size: .65rem;
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Tags de compétences */
.theme-industrie .skill-tag {
  font-size: .66rem;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid transparent;
}

/* Formations sidebar */
.theme-industrie .formation-year {
  font-family: var(--fb);
  font-size: .64rem;
  font-weight: 600;
}
.theme-industrie .formation-name {
  font-size: .74rem;
  line-height: 1.4;
}

/* Section title main : flex avec picto à gauche */
.theme-industrie .section-title {
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ══════════════════════════════════════════════════════════════════════
   THÈME INDUSTRIE — sidebar sombre, photo, accent orange terrain
   Inspiré CV classique FR/CH (Benjamin Montillot style)
══════════════════════════════════════════════════════════════════════ */

/* ── Variables internes du thème ─────────────────────────────────────── */
.theme-industrie {
  --ind-dark:    #2c2c2c;
  --ind-mid:     #3d3d3d;
  --ind-orange:  #e07b39;
  --ind-orange2: #c96920;
  --ind-light:   #f5f2ee;
  --ind-border:  #d4cdc6;
  --ind-text:    #2c2c2c;
  --ind-gray:    #6a6459;
  --ind-sidebar: #2c2c2c;
}

/* ── Wrap ─────────────────────────────────────────────────────────────── */
.theme-industrie .cv-wrap {
  font-family: var(--fb);
  box-shadow: 0 4px 40px rgba(0,0,0,.14);
  grid-template-columns: 240px 1fr;
}

/* ── Header — blanc, ligne dégradée en bas ───────────────────────────── */
.theme-industrie .cv-header {
  background: #fff; padding: 28px 36px 22px;
}
.theme-industrie .cv-header::after { display: none; }
.theme-industrie .cv-header::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--cv-accent), var(--cv-accent2), var(--ind-dark));
}
.theme-industrie .header-name {
  font-size: 2.8rem; font-weight: 900;
  color: var(--ind-dark); letter-spacing: -.02em; line-height: 1;
  margin-bottom: 8px; text-transform: uppercase; gap: 14px;
}
.theme-industrie .header-title {
  font-size: .88rem; font-weight: 700;
  color: var(--cv-accent); font-style: normal; margin-bottom: 4px;
  letter-spacing: .14em; text-transform: uppercase;
}
.theme-industrie .header-tagline {
  font-size: .78rem; color: var(--ind-gray); letter-spacing: .02em;
}
.theme-industrie .header-contact {
  gap: 6px 22px; margin-top: 16px;
}
.theme-industrie .contact-item {
  font-size: .78rem; color: var(--ind-gray);
}
.theme-industrie .contact-item a { color: var(--cv-accent); text-decoration: none; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.theme-industrie .cv-sidebar {
  background: var(--cv-sidebar-bg); padding: 48px 22px 32px;
}
.theme-industrie .cv-sidebar::before { display: none; }

/* Titres de sections sidebar */
.theme-industrie .sidebar-title {
  font-size: .6rem; font-weight: 800;
  color: var(--cv-accent);
}
.theme-industrie .sidebar-title::after {
  background: linear-gradient(90deg, var(--cv-accent), transparent);
}

/* Skill tags sidebar */
.theme-industrie .skill-group-label {
  color: var(--cv-sidebar-text, rgba(255,255,255,.5)); opacity:.6;
}
.theme-industrie .skill-tag {
  background: var(--cv-tag-bg);
  border-color: var(--cv-tag-border); color: var(--cv-tag-text, var(--cv-sidebar-text));
}
.theme-industrie .skill-tag.star { color: var(--cv-tag-text, var(--cv-sidebar-text)); border-color: var(--cv-tag-border); }

/* Textes sidebar */
.theme-industrie .sidebar-section { margin-bottom: 26px; }
.theme-industrie .formation-year  { color: var(--cv-accent); }
.theme-industrie .formation-name  { color: var(--cv-sidebar-text, rgba(255,255,255,.75)); font-weight: 400; }
.theme-industrie .portfolio-link  { color: var(--cv-sidebar-text, rgba(255,255,255,.6)); opacity:.8; border-bottom-color: var(--cv-tag-border); }
.theme-industrie .portfolio-link:hover { color: var(--cv-accent); }
.theme-industrie .sidebar-section #sideLanguages { color: var(--cv-sidebar-text, rgba(255,255,255,.7)); font-size: .78rem; line-height: 1.8; opacity:.85; }

/* ── Main ─────────────────────────────────────────────────────────────── */
.theme-industrie .cv-main { padding: 32px 40px 40px; background: var(--cv-body-bg, #fff); }

/* Accroche */
.theme-industrie .accroche {
  font-size: .88rem; font-style: normal;
  color: var(--ind-text); line-height: 1.75; padding: 16px 20px;
  border-left: 1px solid var(--cv-accent); background: var(--ind-light);
  border-radius: 0 4px 4px 0; margin-bottom: 28px;
}

/* Titres de sections main */
.theme-industrie .section-title {
  font-size: .65rem; font-weight: 800;
  color: var(--ind-dark); border-bottom: 1px solid var(--ind-dark);
  padding-bottom: 7px; margin-bottom: 20px; margin-top: 30px;
}
.theme-industrie .section-title::before {
  content: ''; display: block; width: 14px; height: 14px; flex-shrink: 0;
  background: var(--cv-accent); border-radius: 2px;
}

/* Jobs */
.theme-industrie .job {
  margin-bottom: 22px; padding-bottom: 22px;
  border-bottom: 1px solid var(--ind-border);
}
.theme-industrie .job:last-child { border-bottom: none; }
.theme-industrie .job.dimmed { opacity: .15; }
.theme-industrie .job-title   { font-size: 1rem; font-weight: 700; color: var(--ind-dark); }
.theme-industrie .job-dates   { font-size: .72rem; color: #fff; background: var(--cv-accent); padding: 2px 10px; border-radius: 2px; font-weight: 400; white-space: nowrap; }
.theme-industrie .job-company { font-size: .82rem; font-weight: 600; color: var(--cv-accent); margin-bottom: 8px; }
.theme-industrie .job-desc    { font-size: .8rem; color: var(--ind-gray); margin-bottom: 8px; line-height: 1.6; font-style: italic; }
.theme-industrie .job-bullets li { font-size: .8rem; color: var(--ind-text); line-height: 1.6; padding-left: 16px; }
.theme-industrie .job-bullets li::before { color: var(--cv-accent); content: '▸'; }
.theme-industrie .job-bullets li.hl { color: var(--ind-dark); font-weight: 600; }
.theme-industrie .job-stack {
  margin-top: 8px; border-left: 1px solid var(--cv-accent);
  background: var(--ind-light); padding: 5px 10px;
  border-radius: 0 3px 3px 0; font-size: .74rem; color: var(--ind-gray);
}

/* Preview miniature dans le sélecteur de thème */
.theme-preview-industrie {
  background: #fff;
  display: flex; overflow: hidden; height: 90px;
}
.tp-ind-sidebar {
  width: 34%; background: #2c2c2c;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px; gap: 5px;
}
.tp-ind-photo {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a5a5a, #2c2c2c);
  border: 2px solid #e07b39; flex-shrink: 0;
}
.tp-ind-sideline {
  width: 80%; height: 5px; border-radius: 1px;
  background: rgba(224,123,57,.4);
}
.tp-ind-sideline.sm { width: 65%; background: rgba(255,255,255,.15); height: 4px; }
.tp-ind-main { flex: 1; padding: 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.tp-ind-name { height: 10px; width: 75%; background: #2c2c2c; border-radius: 1px; }
.tp-ind-title { height: 6px; width: 60%; background: #e07b39; border-radius: 1px; margin-bottom: 3px; }
.tp-ind-line { height: 4px; background: #e8e4e0; border-radius: 1px; }
.tp-ind-bar { height: 20px; background: #f5f2ee; border-radius: 2px; border-left: 3px solid #e07b39; margin-top: 3px; }
/* Preview miniature thème Fiche dans le sélecteur */
.theme-preview-fiche {
  background: #fff;
  display: flex; flex-direction: column;
  padding: 8px 10px; gap: 5px; overflow: hidden; height: 90px;
}
.tp-fiche-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.tp-fiche-photo {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ccc, #888);
  border: 1.5px solid #2e75b6; flex-shrink: 0;
}
.tp-fiche-info { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tp-fiche-name { height: 7px; width: 70%; background: #1a3556; border-radius: 1px; }
.tp-fiche-title { height: 5px; width: 55%; background: #4a9fd4; border-radius: 1px; }
.tp-fiche-line { height: 4px; background: #e8edf3; border-radius: 1px; width: 90%; }
.tp-fiche-line.sm { width: 70%; background: #f0f4f9; }



/* ── SÉLECTEUR DE THÈME ──────────────────────────────────────────────── */
.theme-picker-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  z-index: 400;
}
.theme-picker-overlay.open { display: block; }
.theme-picker-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 401;
  background: #fff; border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,1,.46,1);
}
.theme-picker-sheet.open { transform: translateY(0); }
.theme-picker-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #e2e8f0; margin: 12px auto 4px;
}
.theme-picker-title {
  font-family: var(--fb); font-size: .72rem; font-weight: 700;
  color: #94a3b8; text-transform: uppercase; letter-spacing: .1em;
  text-align: center; padding: 4px 0 16px;
}
.theme-picker-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; padding: 0 16px 24px;
}
.theme-card {
  border: 2px solid #e2e8f0; border-radius: 14px;
  padding: 0; overflow: hidden; cursor: pointer;
  transition: all .18s; background: #fff;
}
.theme-card.active { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.theme-card:hover { border-color: #c4b5fd; }
.theme-card-preview {
  height: 90px; position: relative; overflow: hidden;
}
/* Preview thème Tech */
.theme-preview-tech {
  background: #1a3556;
  display: flex; flex-direction: column;
  padding: 10px 12px; gap: 4px;
}
.tp-tech-name { height: 10px; width: 60%; background: rgba(255,255,255,.8); border-radius: 2px; }
.tp-tech-title { height: 7px; width: 80%; background: rgba(74,159,212,.6); border-radius: 2px; }
.tp-tech-tags { display: flex; gap: 3px; margin-top: 2px; }
.tp-tech-tag { height: 6px; width: 22px; background: rgba(255,255,255,.25); border-radius: 1px; }
.tp-tech-body { display: flex; gap: 6px; margin-top: 6px; flex: 1; }
.tp-tech-sidebar { width: 28%; background: rgba(255,255,255,.07); border-radius: 2px; }
.tp-tech-main { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 4px; background: rgba(255,255,255,.04); border-radius: 2px; }
.tp-tech-line { height: 5px; background: rgba(255,255,255,.15); border-radius: 1px; }

.theme-card-label {
  padding: 8px 12px; display: flex; justify-content: space-between; align-items: center;
}
.theme-card-name { font-family: var(--fb); font-size: .82rem; font-weight: 700; color: #1a1a2e; }
.theme-card-desc { font-size: .68rem; color: #94a3b8; }
.theme-card-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: #7C3AED; display: none;
  align-items: center; justify-content: center;
}
.theme-card.active .theme-card-check { display: flex; }
.theme-card-check svg { width: 11px; height: 11px; stroke: white; stroke-width: 3; }
#view-timeline { max-width:1100px; margin:0 auto; padding:36px 32px 80px; }

.tl-header { margin-bottom:28px; }
.tl-title { font-family:var(--fd); font-size:2rem; font-weight:700; color:var(--blue); margin-bottom:4px; }
.tl-subtitle { font-size:.85rem; color:var(--gray); }

.tl-legend {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;
  background:var(--white); border-radius:6px; padding:12px 16px;
  border:1px solid var(--lgray);
}
.tl-legend-title { font-family:var(--fm); font-size:.63rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gray); width:100%; margin-bottom:4px; }
.legend-item { display:flex; align-items:center; gap:5px; font-family:var(--fm); font-size:.68rem; color:var(--text); }
.legend-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* Timeline canvas area */
.tl-canvas {
  background:var(--white); border-radius:8px; border:1px solid var(--lgray);
  padding:24px 20px 20px; overflow-x:auto; position:relative;
}
.tl-year-axis {
  display:flex; margin-bottom:8px; padding-left:160px; position:relative;
  border-bottom:1px solid var(--lgray); padding-bottom:8px;
}
.tl-year-label { font-family:var(--fm); font-size:.62rem; color:var(--gray); text-align:center; flex-shrink:0; }
.tl-year-tick { position:absolute; bottom:0; width:1px; background:var(--lgray); }

.tl-rows { display:flex; flex-direction:column; gap:6px; min-width:800px; }
.tl-row { display:flex; align-items:center; height:36px; position:relative; }
.tl-row-label {
  width:155px; flex-shrink:0; padding-right:12px;
  font-size:.72rem; font-weight:500; color:var(--blue); text-align:right;
  line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-track { flex:1; position:relative; height:36px; }
.tl-bar {
  position:absolute; top:6px; height:24px; border-radius:4px;
  cursor:pointer; transition:filter .18s, opacity .25s, transform .12s;
  display:flex; align-items:center; padding:0 8px; overflow:hidden;
  min-width:6px;
}
.tl-bar:hover { filter:brightness(1.12); transform:scaleY(1.08); z-index:10; }
.tl-bar.dimmed { opacity:.12; }
.tl-bar-label { font-family:var(--fm); font-size:.6rem; font-weight:500; color:rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }

/* Tooltip */
.tl-tooltip {
  position:fixed; pointer-events:none; z-index:500;
  background:var(--navy); color:var(--white);
  border-radius:6px; padding:10px 14px;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  max-width:280px; opacity:0; transition:opacity .12s;
}
.tl-tooltip.visible { opacity:1; }
.tt-title { font-family:var(--fd); font-size:1rem; font-weight:100; margin-bottom:2px; }
.tt-dates { font-family:var(--fm); font-size:.65rem; color:var(--accent2); margin-bottom:6px; }
.tt-desc { font-size:.75rem; line-height:1.5; color:rgba(255,255,255,.8); margin-bottom:7px; }
.tt-pills { display:flex; flex-wrap:wrap; gap:3px; }
.tt-pill { font-family:var(--fm); font-size:.6rem; padding:1px 6px; border-radius:10px; font-weight:100; color:white; }

/* Today marker */
.tl-today { position:absolute; top:0; bottom:0; width:1px; background:var(--gold); opacity:.7; pointer-events:none; z-index:5; }
.tl-today::before { content:'now'; position:absolute; top:-16px; left:-10px; font-family:var(--fm); font-size:.58rem; color:var(--gold); }

/* ── STORY VIEW ──────────────────────────────────────────────────────── */
#view-story { max-width: 720px; margin: 0 auto; padding: 80px 24px 100px;}

.story-header { text-align: center; margin-bottom: 52px; }
.story-header-name { font-family: var(--fd); font-size: 2.4rem; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.story-header-sub  { font-size: .85rem; color: var(--gray); font-family: var(--fm); margin-bottom: 12px; }
.story-order-btn {
  font-family: var(--fm); font-size: .7rem; font-weight: 500;
  padding: 6px 16px; border-radius: 16px; border: 1.5px solid var(--cv-accent);
  background: transparent; color: var(--cv-accent); cursor: pointer;
  transition: all .18s; letter-spacing: .04em;
}
.story-order-btn:hover { background: var(--cv-accent); color: white; }
.story-order-btn.desc { border-color: var(--gold); color: var(--gold); }
.story-order-btn.desc:hover { background: var(--gold); color: white; }

/* Axe central */
.story-feed { position: relative; }
.story-feed::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--lgray));
  transform: translateX(-50%);
}

/* Card */
.story-card {
  position: relative;
  width: calc(50% - 32px);
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--lgray);
  padding: 16px 18px;
  margin-bottom: 28px;
  transition: opacity .25s, box-shadow .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.story-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.10); }
.story-card.dimmed { opacity: .15; }

/* Alternance gauche / droite */
.story-card.left  { margin-left: 0; margin-right: auto; }
.story-card.right { margin-left: auto; margin-right: 0; }

/* Connecteur vers l'axe */
.story-card.left::after {
  content: '';
  position: absolute;
  right: -34px; top: 20px;
  width: 34px; height: 2px;
  background: var(--lgray);
}
.story-card.right::before {
  content: '';
  position: absolute;
  left: -34px; top: 20px;
  width: 34px; height: 2px;
  background: var(--lgray);
}

/* Point sur l'axe */
.story-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--accent);
  background: var(--accent);
  z-index: 2;
  top: 22px;
}
.story-item { position: relative; }

/* Année flottante sur l'axe */
.story-year {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-family: var(--fm);
  font-size: .62rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  z-index: 3;
  top: -10px;
}

/* Contenu card */
.sc-dates  { font-family: var(--fm); font-size: .63rem; color: var(--accent2); margin-bottom: 4px; font-weight: 500; }
.sc-title  { font-family: var(--fd); font-size: 1rem; font-weight: 600; color: var(--blue); line-height: 1.3; margin-bottom: 3px; }
.sc-company{ font-size: .75rem; font-weight: 500; color: var(--cv-accent); margin-bottom: 8px; }
.sc-bullets{ list-style: none; margin-bottom: 8px; }
.sc-bullets li { font-size: .74rem; color: var(--text); padding: 2px 0 2px 12px; position: relative; line-height: 1.5; }
.sc-bullets li::before { content: '▸'; position: absolute; left: 0; color: var(--cv-accent); font-size: .6rem; top: 4px; }
.sc-bullets li.hl { color: var(--blue); font-weight: 600; }
.sc-bullets li.hl::before { color: var(--cv-accent); }
.sc-stack  { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.sc-pill   { font-family: var(--fm); font-size: .58rem; padding: 1px 6px; border-radius: 10px; color: white; font-weight: 600; }
.sc-duration { font-family: var(--fm); font-size: .6rem; color: var(--gray); margin-top: 6px; }

/* Mobile story */
@media (max-width: 640px) {
  .story-feed::before { left: 16px; }
  .story-card { width: calc(100% - 40px); margin-left: 40px !important; margin-right: 0 !important; }
  .story-card.left::after, .story-card.right::before { display: none; }
  .story-card.right::after {
    content: '';
    position: absolute;
    left: -26px; top: 20px;
    width: 26px; height: 2px;
    background: var(--lgray);
  }
  .story-dot { left: 16px; }
  .story-year { left: 16px; transform: translateX(-50%); }
}

/* ── SYSTÈME D'AIDE ──────────────────────────────────────────────────── */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(74,159,212,.25); color: var(--accent2);
  font-size: .6rem; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(74,159,212,.4); line-height: 1;
  flex-shrink: 0; transition: all .18s; user-select: none;
  vertical-align: middle; margin-left: 5px;
}
.help-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

/* Tooltip générique */
.help-tooltip {
  position: fixed; z-index: 900;
  background: var(--navy); border: 1px solid rgba(74,159,212,.35);
  border-radius: 8px; padding: 12px 16px; max-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  font-size: .75rem; color: rgba(255,255,255,.85); line-height: 1.6;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  display: none;
}
.help-tooltip.visible { opacity: 1; pointer-events: auto; display: block; }
.help-tooltip-title {
  font-family: var(--fm); font-size: .65rem; color: var(--accent2);
  letter-spacing: .08em; margin-bottom: 7px; text-transform: uppercase;
}
.help-tooltip-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; font-size: .8rem; padding: 2px 4px;
  pointer-events: auto;
}
.help-tooltip-close:hover { color: white; }
.help-tooltip code {
  background: rgba(255,255,255,.08); border-radius: 3px;
  padding: 1px 5px; font-family: var(--fm); font-size: .7rem;
  color: var(--gold);
}

/* Guide éditeur intégré */
.editor-guide {
  background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 16px; display: none; flex-direction: column; gap: 8px;
  font-size: .72rem;
}
.editor-guide.open { display: flex; }
.editor-guide-toggle {
  background: none; border: none; color: var(--accent2); cursor: pointer;
  font-family: var(--fm); font-size: .6rem; letter-spacing: .08em;
  padding: 4px 0; text-align: left; display: flex; align-items: center; gap: 6px;
}
.editor-guide-toggle:hover { color: white; }
.guide-row { display: flex; gap: 10px; align-items: baseline; }
.guide-code { font-family: var(--fm); color: var(--gold); font-size: .68rem; flex-shrink: 0; min-width: 100px; }
.guide-desc { color: rgba(255,255,255,.6); font-size: .68rem; line-height: 1.5; }

/* print — voir bloc consolidé en fin de CSS */

/* ── EXPORT MODAL ─────────────────────────────────────────────────────── */
/* ── EXPORT MODAL — style welcomeScreen blanc/rouge ─────────────────── */
.export-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 500;
  align-items: flex-end; justify-content: center;
}
.export-overlay.open { display: flex; }

.export-modal {
  background: #f4f6f4;
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  box-shadow: 0 -8px 48px rgba(0,0,0,.18);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Handle bar */
.export-modal::before {
  content: ''; display: block;
  width: 40px; height: 4px;
  background: rgba(0,0,0,.15); border-radius: 2px;
  margin: 12px auto 0;
}

.export-head {
  padding: 16px 20px 8px;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
}
.export-head-title {
  font-family: var(--fb); font-size: 1.1rem; font-weight: 700;
  color: #1a1a1a; letter-spacing: -.01em;
}
.export-head-title .material-icons-round {
  font-size: 20px; vertical-align: middle;
  margin-right: 6px; color: #c0392b;
}

.export-body { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 12px; }

.export-option {
  display: flex; align-items: center; gap: 14px;
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 16px; padding: 16px 18px; cursor: pointer;
  transition: all .18s; text-decoration: none; width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.export-option:hover {
  border-color: #c0392b;
  box-shadow: 0 4px 16px rgba(192,57,43,.15);
  transform: translateY(-1px);
}
.export-option:active { transform: scale(.98); }

.export-option-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(192,57,43,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.export-option-icon .material-icons-round {
  font-size: 20px; color: #c0392b;
}

.export-option-label {
  font-family: var(--fb); font-size: .92rem; font-weight: 700;
  color: #1a1a1a; margin-bottom: 2px;
}
.export-option-desc {
  font-family: var(--fm); font-size: .76rem; color: #777; line-height: 1.4;
}

/* Email form */
.export-mail-form {
  display: none; flex-direction: column; gap: 10px;
  padding: 16px 18px; background: #ffffff;
  border: 2px solid #c0392b; border-radius: 16px;
  box-shadow: 0 4px 16px rgba(192,57,43,.12);
}
.export-mail-form.open { display: flex; }

.export-input {
  background: #f4f6f4; border: 1.5px solid rgba(0,0,0,.12);
  border-radius: 10px; padding: 11px 14px; color: #1a1a1a;
  font-family: var(--fm); font-size: .85rem; outline: none; width: 100%;
  transition: border-color .15s;
}
.export-input:focus { border-color: #c0392b; }
.export-input::placeholder { color: #aaa; }

.export-status {
  font-family: var(--fm); font-size: .75rem; padding: 8px 12px;
  border-radius: 8px; display: none; line-height: 1.5;
}
.export-status.visible { display: block; }
.export-status.loading { color: #555; background: rgba(0,0,0,.05); }
.export-status.success { color: #1e7a52; background: rgba(30,122,82,.08); }
.export-status.error   { color: #c0392b; background: rgba(192,57,43,.08); }

.export-foot { display: none; }

.ebtn-export {
  background: #c0392b; color: #fff;
  font-family: var(--fb); font-size: .9rem; font-weight: 700;
  border: none; border-radius: 12px; padding: 12px 22px;
  cursor: pointer; align-self: stretch; text-align: center;
  transition: background .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(192,57,43,.3);
}
.ebtn-export:hover { background: #a93226; box-shadow: 0 6px 20px rgba(192,57,43,.42); }

/* Close button override */
.export-head .ebtn-close {
  background: rgba(0,0,0,.07); border: none; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #555; font-size: .85rem; padding: 0 !important;
  transition: background .15s;
}
.export-head .ebtn-close:hover { background: rgba(0,0,0,.14); }

@media (min-width: 600px) {
  .export-overlay { align-items: center; }
  .export-modal { border-radius: 24px; max-width: 460px; }
  .export-modal::before { display: none; }
}

@media (max-width: 768px) {
  .ebtn-export { font-size: .85rem; padding: 11px 18px; }
}

/* ── COMPTEUR CRÉDITS IA ─────────────────────────────────────────────── */
.ai-credits-bar {
  margin: 0 18px 8px;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #eef4ff 0%, #e8f2fb 100%);
  border: 1.5px solid #c8d8f0;
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
/* Accent gauche coloré */
.ai-credits-bar::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2));
  border-radius: 16px 0 0 16px;
}
.ai-credits-info { display: flex; align-items: center; gap: 12px; flex: 1; }
.ai-credits-dots {
  display: flex; gap: 5px; flex-shrink: 0;
}
.ai-credits-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); opacity: 1; transition: all .2s;
}
.ai-credits-dot.used {
  background: #d0d8e8; opacity: .5;
}
.ai-credits-text {
  font-family: var(--fb); font-size: .85rem; color: #0f2137; font-weight: 700;
}
.ai-credits-sub { font-size: .72rem; color: #5a7a9a; margin-top: 1px; }
.ai-credits-buy {
  background: var(--accent); color: white; border: none; border-radius: 10px;
  padding: 8px 14px; font-family: var(--fb); font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.ai-credits-buy:hover { background: var(--accent2); transform: translateY(-1px); }

/* Quand crédits épuisés */
.ai-credits-bar.empty {
  background: linear-gradient(135deg, #fff0ee 0%, #fde8e4 100%);
  border-color: #f0b8a8;
}
.ai-credits-bar.empty::before { background: linear-gradient(to bottom, #e05040, #e87060); }
.ai-credits-bar.empty .ai-credits-text { color: #7a1a10; }
.ai-credits-bar.empty .ai-credits-sub  { color: #b05040; }
.ai-credits-bar.empty .ai-credits-buy  { background: #c0392b; }
.ai-credits-bar.empty .ai-credits-buy:hover { background: #e04030; }

/* ── MODAL ACHAT CRÉDITS ─────────────────────────────────────────────── */
.credits-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,33,55,.6); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:600; align-items:flex-end; justify-content:center; padding:0;
}
.credits-overlay.open { display:flex; }
.credits-modal {
  background:#fff; width:100%; max-width:480px;
  border-radius:24px 24px 0 0;
  box-shadow:0 -4px 40px rgba(0,0,0,.18);
  display:flex; flex-direction:column; overflow:hidden; max-height:88vh;
}
@media (min-width:600px) {
  .credits-overlay { align-items:center; padding:24px; }
  .credits-modal { border-radius:20px; }
}
.credits-handle {
  width:40px; height:4px; border-radius:2px;
  background:#dde3ea; margin:12px auto 0; flex-shrink:0;
}
.credits-head {
  padding:20px 22px 10px;
  display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0;
}
.credits-head-title {
  font-family:var(--fb); font-size:1.15rem; font-weight:700; color:#0f2137; margin-bottom:4px;
}
.credits-head-sub { font-size:.8rem; color:#6b7a8d; line-height:1.4; }
.credits-head-close {
  background:#f0f3f7; border:none; cursor:pointer; width:32px; height:32px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#6b7a8d; flex-shrink:0; margin-left:12px; transition:all .15s;
}
.credits-head-close:hover { background:#e2e8f0; color:#0f2137; }
.credits-body { padding:0 18px 8px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; }
.credits-offer {
  background:#f6f8fb; border:2px solid #e0e8f0; border-radius:16px;
  padding:18px; display:flex; align-items:center; gap:16px;
  cursor:pointer; transition:all .15s;
}
.credits-offer.selected, .credits-offer:hover { border-color:var(--accent); background:#e8f2fb; }
.credits-offer-icon {
  width:52px; height:52px; border-radius:14px; background:#e8f2fb;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.5rem;
}
.credits-offer-title { font-family:var(--fb); font-size:.95rem; font-weight:700; color:#0f2137; }
.credits-offer-desc  { font-size:.78rem; color:#6b7a8d; line-height:1.4; margin-top:2px; }
.credits-offer-price {
  margin-left:auto; font-family:var(--fd); font-size:1.4rem; font-weight:700;
  color:var(--accent); flex-shrink:0;
}
.credits-foot { padding:12px 18px 20px; display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.credits-pay-btn {
  width:100%; padding:15px; border:none; border-radius:12px; cursor:pointer;
  background:#00A0E6; color:white; font-family:var(--fb); font-size:.95rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .18s; box-shadow:0 4px 18px rgba(0,160,230,.3);
}
.credits-pay-btn:hover { background:#0090d0; transform:translateY(-1px); }
.credits-cancel-btn {
  background:none; border:none; cursor:pointer; font-family:var(--fb);
  font-size:.8rem; color:#b0b8c4; padding:4px; text-align:center; transition:color .15s;
}
.credits-cancel-btn:hover { color:#6b7a8d; }


/* ── PANNEAU LATÉRAL MÉTIERS ─────────────────────────────────────────── */
.metiers-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; z-index: 200;
  background: var(--white);
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
  transform: translateX(-280px);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--lgray);
}
.metiers-panel.open { transform: translateX(0); }

.metiers-panel-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--lgray);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy);
}
.metiers-panel-title {
  font-family: var(--fm); font-size: .7rem; color: var(--accent2);
  letter-spacing: .1em;
}
.metiers-panel-close {
  background: none; border: none; color: rgba(255,255,255,.5);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px;
  border-radius: 4px; transition: all .15s;
}
.metiers-panel-close:hover { color: white; background: rgba(255,255,255,.1); }

.metiers-panel-hint {
  font-size: .72rem; color: var(--gray); padding: 12px 20px 8px;
  line-height: 1.5; border-bottom: 1px solid var(--lgray);
}

.metiers-panel-grid {
  flex: 1; overflow-y: auto; padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.metiers-panel-grid .metier-card {
  background: var(--bg); border: 1px solid var(--lgray);
  border-radius: 8px; padding: 14px 8px 10px; text-align: center;
  cursor: pointer; transition: all .18s;
}
.metiers-panel-grid .metier-card:hover {
  background: var(--lgray); border-color: var(--accent);
  transform: translateY(-1px);
}
.metiers-panel-grid .metier-card.active {
  background: rgba(46,117,182,.08); border-color: var(--accent);
}
.metiers-panel-grid .metier-emoji { font-size: 1.6rem; margin-bottom: 6px; display: block; }
.metiers-panel-grid .metier-nom { font-size: .7rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.metiers-panel-grid .metier-metier { font-size: .62rem; color: var(--gray); }

/* Bouton toggle fixe à gauche */
.metiers-toggle-btn {
  position: fixed; left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 199;
  background: var(--navy); color: var(--accent2);
  border: none; cursor: pointer;
  width: 22px; height: 64px;
  border-radius: 0 6px 6px 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; writing-mode: vertical-rl;
  letter-spacing: .1em; font-family: var(--fm);
  box-shadow: 2px 0 8px rgba(0,0,0,.15);
  transition: all .2s;
}
.metiers-toggle-btn:hover { background: var(--blue); color: white; width: 26px; }
.metiers-toggle-btn.panel-open { left: 280px; border-radius: 0 6px 6px 0; }

/* Overlay quand panneau ouvert */
.metiers-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 190; background: rgba(0,0,0,.25);
}
.metiers-overlay.open { display: block; }




/* ── DRAWER MÉTIERS ──────────────────────────────────────────────────── */
.drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 200;
  backdrop-filter: blur(2px);
}
.drawer-overlay.open { display: block; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; z-index: 201;
  background: var(--white); box-shadow: 4px 0 32px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  background: var(--navy); padding: 18px 16px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.drawer-head-title {
  font-family: var(--fm); font-size: .7rem; color: var(--accent2);
  letter-spacing: .1em;
}
.drawer-close {
  background: none; border: none; color: rgba(255,255,255,.5);
  font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 6px;
  transition: color .15s;
}
.drawer-close:hover { color: white; }
.drawer-hint {
  font-size: .7rem; color: var(--gray); padding: 10px 16px 6px;
  border-bottom: 1px solid var(--lgray); flex-shrink: 0;
}
.drawer-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 12px; overflow-y: auto; flex: 1;
}
.metier-card {
  background: var(--bg); border: 1px solid var(--lgray);
  border-radius: 8px; padding: 12px 6px 10px; text-align: center;
  cursor: pointer; transition: all .18s; user-select: none;
}
.metier-card:hover { background: var(--lgray); border-color: var(--accent); transform: translateY(-1px); }
.metier-card.active { background: rgba(46,117,182,.1); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(46,117,182,.2); }
.metier-emoji { font-size: 1.6rem; margin-bottom: 5px; display: block; }
.metier-nom { font-size: .7rem; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.metier-metier { font-size: .6rem; color: var(--gray); }

/* Bouton flottant pour ouvrir le drawer */
.drawer-fab {
  position: fixed; left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 199;
  background: var(--navy); color: var(--accent2);
  border: none; border-radius: 0 8px 8px 0;
  padding: 14px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 2px 0 12px rgba(0,0,0,.2);
  transition: background .18s;
}
.drawer-fab:hover { background: var(--blue); }
.drawer-fab-icon { font-size: 1rem; }
.drawer-fab-label {
  font-family: var(--fm); font-size: .55rem; color: rgba(255,255,255,.6);
  writing-mode: vertical-rl; letter-spacing: .1em; text-transform: uppercase;
}



/* #view-fiche et #view-carte gérés via .active ci-dessus */
.fiche-wrap {
  background: var(--white); border-radius: 4px;
  box-shadow: 0 4px 32px rgba(0,0,0,.12);
  padding: 36px 40px; font-family: var(--fb); color: var(--text);
}
.fiche-name {
  font-family: var(--fd); font-size: 2rem; font-weight: 700;
  color: var(--navy); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .03em;
}
.fiche-title {
  font-size: .85rem; color: var(--accent); font-weight: 600;
  margin-bottom: 14px; letter-spacing: .05em; text-transform: uppercase;
}
.fiche-contact-row {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: .75rem; color: var(--gray); margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 2px solid var(--accent);
}
.fiche-contact-row a { color: var(--gray); text-decoration: none; }
.fiche-section-title {
  font-size: .65rem; font-weight: 700; color: var(--accent);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 20px 0 10px; padding-bottom: 4px;
  border-bottom: 1px solid var(--lgray);
}
.fiche-accroche {
  font-size: .8rem; line-height: 1.7; color: var(--text);
  margin-bottom: 4px;
}
.fiche-job { margin-bottom: 14px; }
.fiche-job:last-of-type { margin-bottom: 0; }
.fiche-job-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.fiche-job-title { font-size: .85rem; font-weight: 700; color: var(--navy); }
.fiche-job-dates { font-size: .7rem; color: var(--gray); font-family: var(--fm); }
.fiche-job-company { font-size: .75rem; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.fiche-job-bullets { list-style: none; }
.fiche-job-bullets li {
  font-size: .75rem; color: var(--text); padding: 2px 0 2px 12px;
  position: relative; line-height: 1.5;
}
.fiche-job-bullets li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.fiche-skills-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-skill {
  font-size: .7rem; padding: 3px 10px; border-radius: 2px;
  background: var(--lgray); color: var(--navy); font-weight: 500;
}
.fiche-formation { font-size: .78rem; color: var(--text); padding: 3px 0; }
.fiche-formation-year { font-family: var(--fm); font-size: .68rem; color: var(--gray); }

/* ── VUE CARTE DE VISITE ─────────────────────────────────────────────── */
/* #view-carte géré via .active ci-dessus */
.carte-wrap {
  width: 100%; max-width: 380px;
  background: linear-gradient(145deg, var(--navy) 0%, var(--blue) 100%);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  border: 1px solid rgba(74,159,212,.3);
}
.carte-top {
  padding: 32px 28px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.carte-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 1.8rem; font-weight: 700;
  color: white; margin: 0 auto 14px; letter-spacing: .05em;
}
.carte-name {
  font-family: var(--fd); font-size: 1.5rem; font-weight: 700;
  color: white; margin-bottom: 4px; letter-spacing: .02em;
}
.carte-title {
  font-size: .78rem; color: var(--accent2);
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.carte-skills {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin-top: 14px;
}
.carte-skill {
  font-size: .65rem; padding: 3px 10px; border-radius: 10px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.12);
}
.carte-bottom { padding: 20px 28px; display: flex; flex-direction: column; gap: 10px; }
.carte-contact {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; color: rgba(255,255,255,.7); text-decoration: none;
}
.carte-contact-icon { font-size: .9rem; width: 18px; text-align: center; flex-shrink: 0; }
.carte-qr {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
}
.carte-qr-text { font-size: .65rem; color: rgba(255,255,255,.4); line-height: 1.5; }
.carte-share-btn {
  background: var(--accent); color: white; border: none;
  border-radius: 6px; padding: 7px 14px; font-size: .7rem;
  cursor: pointer; font-weight: 600; transition: all .18s;
}
.carte-share-btn:hover { background: var(--accent2); }

/* ── Print : masquer les nouvelles vues ─────────────────────────────── */


/* ── PAYMENT MODAL ───────────────────────────────────────────────────── */
/* ── MODALE PAIEMENT — light mode ────────────────────────────────────── */
.pay-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,33,55,.6); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:600; align-items:flex-end; justify-content:center; padding:0;
}
.pay-overlay.open { display:flex; }
.pay-modal {
  background:#ffffff; width:100%; max-width:480px;
  border-radius:24px 24px 0 0;
  box-shadow:0 -4px 40px rgba(0,0,0,.18);
  overflow:hidden; display:flex; flex-direction:column;
  max-height:92vh; min-height:0; height:92vh;
}
@media (min-width:600px) {
  .pay-overlay { align-items:center; padding:24px; }
  .pay-modal { border-radius:20px; max-height:88vh; }
}
.pay-handle {
  width:40px; height:4px; border-radius:2px;
  background:#dde3ea; margin:12px auto 0; flex-shrink:0;
}
@media (min-width:600px) { .pay-handle { display:none; } }
.pay-head {
  padding:20px 22px 12px;
  display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0;
}
.pay-head-text { flex:1; }
.pay-head-title {
  font-family:var(--fb); font-size:1.15rem; font-weight:700;
  color:#0f2137; line-height:1.2; margin-bottom:5px;
}
.pay-head-sub { font-size:.8rem; color:#6b7a8d; line-height:1.45; }
.pay-head-close {
  background:#f0f3f7; border:none; cursor:pointer;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#6b7a8d; flex-shrink:0; margin-left:12px; transition:all .15s;
}
.pay-head-close:hover { background:#e2e8f0; color:#0f2137; }
.pay-body { padding:0 18px 20px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:10px; flex:1 1 0; min-height:0; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain; }
#payScreen { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }

/* Aperçu flou */
.pay-preview-box {
  background:#fff; border:1.5px solid #e2e8f0;
  border-radius:14px; position:relative; overflow:hidden;
  height:320px;
  flex-shrink:0;
}
/* Miniature du vrai CV rendu, mis à l'échelle */
.pay-cv-mini-wrap {
  position:absolute; top:0; left:0;
  width:960px; /* largeur native du .cv-wrap */
  transform-origin:top left;
  pointer-events:none;
  user-select:none;
}
/* Filigrane diagonal "APERÇU" — visible mais discret */
.pay-watermark {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:4;
  overflow:hidden;
}
.pay-watermark svg {
  width:100%; height:100%;
  position:absolute; top:0; left:0;
}

/* Prix */
.pay-price-row { display:flex; align-items:baseline; justify-content:center; gap:6px; }
.pay-price { font-family:var(--fd); font-size:2.8rem; font-weight:700; color:#0f2137; display: none;}
.pay-price-currency { font-size:1.2rem; color:var(--accent); font-weight:500; display: none;}
.pay-price-desc { font-size:.75rem; color:#8a96a6; line-height:1.5; text-align:center; }

/* TWINT */
.pay-twint-btn {
  width:100%; padding:16px; border:none; border-radius:14px; cursor:pointer;
  background:#00A0E6; color:white; font-size:1rem; font-weight:700;
  font-family:var(--fb); display:flex; align-items:center; justify-content:center;
  gap:10px; transition:all .18s; box-shadow:0 4px 18px rgba(0,160,230,.3);
}
.pay-twint-btn:hover { background:#0090d0; box-shadow:0 6px 26px rgba(0,160,230,.45); transform:translateY(-1px); }
.pay-twint-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.pay-twint-btn svg { width:20px; height:20px; flex-shrink:0; }
.pay-twint-logo { font-size:1rem; font-weight:900; letter-spacing:-.03em; }

/* Status + polling */
.pay-status { font-family:var(--fm); font-size:.72rem; padding:10px 14px; border-radius:10px; display:none; line-height:1.5; text-align:center; }
.pay-status.visible { display:block; }
.pay-status.loading { color:#1a5fa8; background:#e8f2fb; }
.pay-status.success { color:#1a6b3c; background:#e8f5ee; }
.pay-status.error   { color:#c0392b; background:#fdecea; }
.pay-polling { display:none; align-items:center; justify-content:center; gap:8px; font-size:.78rem; color:#8a96a6; }
.pay-polling.visible { display:flex; }
.pay-polling-dot { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:pollingPulse 1.2s ease-in-out infinite; }
.pay-polling-dot:nth-child(2) { animation-delay:.2s; }
.pay-polling-dot:nth-child(3) { animation-delay:.4s; }
@keyframes pollingPulse { 0%,100%{opacity:.3;transform:scale(.8);} 50%{opacity:1;transform:scale(1.2);} }

/* Footer */
.pay-foot { padding:12px 18px 20px; display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.pay-cancel-btn {
  background:none; border:none; cursor:pointer; font-family:var(--fb);
  font-size:.8rem; color:#b0b8c4; padding:4px; text-align:center; transition:color .15s;
}
.pay-cancel-btn:hover { color:#6b7a8d; }

/* Bloc paiement international (carte / Apple Pay / Google Pay) */
.pay-intl-sep {
  display:flex; align-items:center; gap:10px; margin:10px 0 8px;
}
.pay-intl-sep-line {
  flex:1; height:1px; background:#e4e9f0;
}
.pay-intl-sep-text {
  font-size:.72rem; color:#aab4c0; white-space:nowrap; font-family:var(--fm);
}
.pay-intl-btn {
  width:100%; padding:14px 16px; border:2px solid #e0e6ef; border-radius:14px;
  cursor:pointer; background:#fff; color:#1a2a3a; font-size:.9rem; font-weight:600;
  font-family:var(--fb); display:flex; align-items:center; justify-content:center;
  gap:10px; transition:all .18s; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.pay-intl-btn:hover { border-color:#1a56a0; color:#1a56a0; box-shadow:0 4px 14px rgba(26,86,160,.12); transform:translateY(-1px); }
.pay-intl-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
#payIntlElement {
  margin:12px 0 8px; min-height:44px;
}
.pay-intl-confirm-btn {
  width:100%; padding:15px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg,#1a56a0,#1e6fd4); color:white;
  font-size:1rem; font-weight:700; font-family:var(--fb);
  transition:all .18s; box-shadow:0 4px 18px rgba(26,86,160,.3); margin-top:4px;
}
.pay-intl-confirm-btn:hover { box-shadow:0 6px 26px rgba(26,86,160,.45); transform:translateY(-1px); }
.pay-intl-confirm-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* Écran succès — light */
.pay-success-screen { display:none; text-align:center; padding:28px 18px 8px; flex-direction:column; align-items:center; gap:12px; }
.pay-success-screen.visible { display:flex; }
.pay-success-anim {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg, #e8f5ee, #d0edd8);
  border:2px solid #a8d8b8;
  display:flex; align-items:center; justify-content:center; font-size:2.2rem;
  animation:successPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes successPop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
.pay-success-msg { font-family:var(--fb); font-size:1.25rem; font-weight:700; color:#0f2137; }
.pay-success-sub { font-size:.84rem; color:#6b7a8d; line-height:1.55; max-width:280px; }
.pay-download-btn {
  width:100%; padding:16px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, #1a8048, #27a05a); color:white;
  font-family:var(--fb); font-size:1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .18s; box-shadow:0 4px 18px rgba(26,128,72,.28);
}
.pay-download-btn:hover { background:linear-gradient(135deg,#27a05a,#33c46e); transform:translateY(-1px); box-shadow:0 6px 26px rgba(26,128,72,.4); }
.pay-download-btn svg { width:20px; height:20px; flex-shrink:0; }

@page {
  margin: 0;
}
@page :left  { margin: 0; }
@page :right { margin: 0; }


/* ── NAV BAR VUES — grande, lisible, Léon-friendly ─────────────────── */
.nav-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  display: flex; align-items: stretch;
  height: 72px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  border: none; background: transparent; cursor: pointer;
  padding: 8px 4px 10px; transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.nav-btn:active { background: rgba(0,0,0,.04); }

/* Indicateur actif — fond coloré sur l'icône */
.nav-btn.active::before { display: none; }

/* Icône SVG Material */
.nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: #f0f0f0;
  transition: background .15s, transform .15s;
}
.nav-icon svg { width: 24px; height: 24px; }
.nav-btn .nav-icon svg { stroke: #777; transition: stroke .15s; }
.nav-btn.active .nav-icon { background: #fdecea; }
.nav-btn.active .nav-icon svg { stroke: #c0392b; }
.nav-btn.active .nav-icon { transform: scale(1.06); }
.nav-btn:active .nav-icon { transform: scale(.88); }

.nav-label {
  font-family: var(--fb); font-size: .78rem; font-weight: 500;
  color: #888; line-height: 1; transition: color .15s;
}
.nav-btn.active .nav-label { color: #c0392b; font-weight: 700; }

/* ── Bouton Scanner — CTA proéminent ─────────────────────────────── */
.nav-btn-scan {
  flex: 1.2;
}
.nav-btn-scan .nav-icon {
  width: 52px; height: 52px;
  background: #c0392b;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(192,57,43,.4);
  margin-top: -4px;
}
.nav-btn-scan .nav-icon svg { stroke: white; width: 24px; height: 24px; }
.nav-btn-scan .nav-label { color: #c0392b; font-weight: 700; font-size: .76rem; }
.nav-btn-scan.active .nav-icon { background: #a0291f; }
.nav-btn-scan.active .nav-icon svg { stroke: white; }
.nav-btn-scan::before { display: none; }

/* Bouton "Plus" */
.nav-btn-more .nav-icon { background: #f0f0f0; }
.nav-btn-more .nav-icon svg { stroke: #999; }
.nav-btn-more .nav-label { color: #999; }

body { padding-bottom: 72px; }

/* ── SHEET ACTIONS ("Plus") ──────────────────────────────────────────── */
.actions-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 400; background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.actions-overlay.open { display: block; }
.actions-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 401;
  background: #fff; border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,1,.46,1);
}
.actions-sheet.open { transform: translateY(0); }
.actions-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #dde3ea; margin: 12px auto 4px;
}
.actions-sheet-title {
  font-family: var(--fb); font-size: .7rem; font-weight: 600;
  color: #6b7a8d; text-transform: uppercase; letter-spacing: .1em;
  text-align: center; padding: 4px 0 12px;
}
.actions-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 0 16px 24px;
}
.action-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border-radius: 16px; cursor: pointer;
  border: none; background: #f6f8fb; transition: all .15s;
  font-family: var(--fb);
}
.action-item:hover, .action-item:active { background: #e8f2fb; transform: scale(.97); }
.action-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.action-icon svg { width: 24px; height: 24px; }
.action-icon.ic-edit   { background: #e8f2fb; }
.action-icon.ic-share  { background: #e8f5ee; }
.action-icon.ic-print  { background: #fff3e0; }
.action-icon.ic-metier { background: #fdecea; }
.action-icon.ic-chrono { background: #f0f4ff; }
.action-label {
  font-size: .75rem; font-weight: 600; color: #0f2137; text-align: center;
}

/* ── Actions grid — Progressive disclosure ────────────────────────── */
.actions-grid-primary {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 0 16px 0;
}
.actions-more-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 16px 30px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.actions-more-line {
  flex: 1; height: 1px; background: #e4e9f0;
}
.actions-more-label {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--fb); font-size: .82rem; font-weight: 700;
  color: #5a6e8a; white-space: nowrap;
  transition: color .15s;
}
.actions-more-divider:active .actions-more-label { color: #2e75b6; }
.actions-more-chevron {
  width: 18px; height: 18px; color: #5a6e8a;
  transition: transform .3s cubic-bezier(.4,0,.2,1), color .15s;
  flex-shrink: 0;
}
.actions-more-chevron.open { transform: rotate(180deg); }
.actions-grid-secondary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 0 16px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .25s ease, padding .3s ease;
}
.actions-grid-secondary.open {
  max-height: 500px; opacity: 1;
  padding: 10px 16px 8px;
}
.action-item-sm {
  padding: 12px 6px 10px !important;
  gap: 6px !important;
  border-radius: 14px !important;
}
.action-icon-sm {
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
}
.action-icon-sm svg { width: 20px !important; height: 20px !important; }
.action-item-sm .action-label { font-size: .7rem !important; }


/* ── Ancienne bottom-bar — masquée ──────────────────────────────────── */
.bottom-bar { display: none !important; }




/* ── BOTTOM SHEET MÉTIERS ─────────────────────────────────────────────── */
.bs-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 400; background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.bs-overlay.open { display: block; }

.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 401;
  background: var(--white);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,1,.46,1);
  display: flex; flex-direction: column;
  max-height: 78vh;
  /* safe area */
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-sheet.open { transform: translateY(0); }

.bs-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--lgray); margin: 10px auto 0; flex-shrink: 0;
}
.bs-head {
  padding: 12px 18px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--lgray); flex-shrink: 0;
}
.bs-title {
  font-family: var(--fm); font-size: .72rem; font-weight: 500;
  color: var(--navy); letter-spacing: .08em; text-transform: uppercase;
}
.bs-close {
  background: var(--lgray); border: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: var(--gray); transition: all .15s;
}
.bs-close:hover { background: #d0d8e4; color: var(--text); }
.bs-hint {
  font-size: .72rem; color: var(--gray); padding: 8px 18px 6px;
  flex-shrink: 0;
}
.bs-grid {
  overflow-y: auto; padding: 12px 14px 16px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  -webkit-overflow-scrolling: touch;
}
/* Sur desktop, plus de colonnes */
@media (min-width: 640px) {
  .bs-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .bs-grid { grid-template-columns: repeat(5, 1fr); }
  .bottom-sheet { max-height: 60vh; }
}

/* Edit-bar : masquée (remplacée) */
.edit-bar  { display: none !important; }
.drawer-fab { display: none !important; }




/* ── EDITOR MODAL ─────────────────────────────────────────────────────── */
/* ── ÉDITEUR CV — option 3 light mode ───────────────────────────────── */
.editor-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,33,55,.6); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:400; align-items:flex-end; justify-content:center; padding:0;
}
.editor-overlay.open { display:flex; }
.editor-modal {
  background:#f6f8fb; width:100%; max-width:560px;
  border-radius:24px 24px 0 0;
  box-shadow:0 -4px 40px rgba(0,0,0,.15);
  display:flex; flex-direction:column; overflow:hidden;
  max-height:92vh;
  position:relative;
}
@media (min-width:600px) {
  .editor-overlay { align-items:center; padding:24px; }
  .editor-modal { border-radius:20px; max-height:88vh; }
}

/* Handle */
.editor-handle {
  width:40px; height:4px; border-radius:2px;
  background:#dde3ea; margin:12px auto 0; flex-shrink:0;
}
@media (min-width:600px) { .editor-handle { display:none; } }

/* Header */
.editor-head {
  padding:18px 22px 10px;
  display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0;
}
.editor-head-text { flex:1; }
.editor-head-title {
  font-family:var(--fb); font-size:1.15rem; font-weight:700;
  color:#0f2137; margin-bottom:4px;
}
.editor-head-sub { font-size:.8rem; color:#6b7a8d; line-height:1.4; }
.editor-head-close {
  background:#e8edf3; border:none; cursor:pointer;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#6b7a8d; flex-shrink:0; margin-left:12px; transition:all .15s;
}
.editor-head-close:hover { background:#d8e0ea; color:#0f2137; }

/* Résumé visuel du CV */
.editor-summary {
  padding:0 18px 4px; overflow-y:auto; flex:1;
  display:flex; flex-direction:column; gap:10px;
}
.editor-summary-name {
  font-family:var(--fd); font-size:1.4rem; font-weight:700;
  color:#0f2137; text-align:center; padding:4px 0 2px;
}
.editor-summary-title {
  font-size:.82rem; color:var(--accent); font-weight:100;
  text-align:center; margin-bottom:4px;
}

/* Cards expériences */
.editor-jobs { display:flex; flex-direction:column; gap:8px; }
.editor-job-card {
  background:#ffffff; border:1.5px solid #e8edf3;
  border-radius:12px; padding:12px 14px;
}
.editor-job-card-title {
  font-size:.85rem; font-weight:700; color:#0f2137; margin-bottom:2px;
}
.editor-job-card-meta {
  font-size:.72rem; color:#6b7a8d; margin-bottom:6px;
}
.editor-job-card-bullets {
  list-style:none; display:flex; flex-direction:column; gap:3px;
}
.editor-job-card-bullets li {
  font-size:.75rem; color:#3a4a5c; padding-left:14px; position:relative; line-height:1.4;
}
.editor-job-card-bullets li::before {
  content:'▸'; position:absolute; left:0; color:var(--accent); font-size:.65rem; top:2px;
}

/* Section compétences */
.editor-skills-wrap {
  background:#ffffff; border:1.5px solid #e8edf3;
  border-radius:12px; padding:12px 14px;
}
.editor-section-label {
  font-family:var(--fm); font-size:.62rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.editor-skill-tags { display:flex; flex-wrap:wrap; gap:5px; }
.editor-skill-tag {
  font-size:.72rem; padding:3px 10px; border-radius:20px;
  /* background:#e8f2fb;  */
  color:#1a4a7a; font-weight:500; border:none;
}

/* Zone IA — champ texte libre */
.editor-ai-zone {
  padding:0 18px; flex-shrink:0;
}
.editor-ai-label {
  font-family:var(--fb); font-size:.82rem; font-weight:700;
  color:#0f2137; margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.editor-ai-label span { font-size:.75rem; font-weight:400; color:#6b7a8d; }
.editor-ai-chips {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;
}
.editor-ai-chip {
  font-size:.73rem; padding:5px 12px; border-radius:20px;
  border:1.5px solid #c8d8e8; background:#f0f4f8; color:#3a5a7a;
  cursor:pointer; transition:all .15s; font-family:var(--fb);
}
.editor-ai-chip:hover { background:#e8f2fb; border-color:var(--accent); color:#0f2137; }
.editor-ai-textarea {
  width:100%; border:1.5px solid #d0d8e4; border-radius:12px;
  padding:12px 14px; font-family:var(--fb); font-size:.88rem;
  color:#0f2137; background:#ffffff; resize:none; outline:none;
  line-height:1.5; min-height:72px;
  transition:border-color .15s, box-shadow .15s;
}
.editor-ai-textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,117,182,.1);
}
.editor-ai-textarea::placeholder { color:#aab4c0; }
.editor-ai-status {
  font-size:.75rem; padding:8px 12px; border-radius:8px;
  display:none; line-height:1.5; margin-top:6px;
}
.editor-ai-status.visible { display:block; }
.editor-ai-status.loading { color:#1a5fa8; background:#e8f2fb; }
.editor-ai-status.success { color:#1a6b3c; background:#e8f5ee; }
.editor-ai-status.error   { color:#c0392b; background:#fdecea; }

/* Footer */
.editor-foot {
  padding:12px 18px 20px; background:#f6f8fb;
  border-top:1px solid #e8edf3;
  display:flex; gap:10px; flex-shrink:0;
}
.editor-ai-btn {
  flex:1; padding:14px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg, #1a5fa8, #2e75b6);
  color:white; font-family:var(--fb); font-size:.92rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .18s; box-shadow:0 4px 16px rgba(46,117,182,.3);
}
.editor-ai-btn:hover { background:linear-gradient(135deg, #2e75b6, #4a9fd4); }
.editor-ai-btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.editor-ai-btn svg { width:18px; height:18px; flex-shrink:0; }
.editor-cancel-btn {
  background:#e8edf3; border:none; cursor:pointer;
  border-radius:12px; padding:14px 18px;
  font-family:var(--fb); font-size:.88rem; color:#6b7a8d;
  font-weight:100; transition:all .15s;
}
.editor-cancel-btn:hover { background:#d8e0ea; color:#0f2137; }

/* Spinner */
.editor-spinner {
  width:16px; height:16px; border:2.5px solid rgba(255,255,255,.3);
  border-top-color:white; border-radius:50%;
  animation:spin .7s linear infinite; display:none; flex-shrink:0;
}

/* ── Shield IA — overlay interne bloquant pendant le traitement ──────── */
.editor-ai-shield {
  display:none; position:absolute; inset:0;
  border-radius:24px 24px 0 0;
  background:rgba(246,248,251,.88);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:10;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; pointer-events:all;
}
.editor-ai-shield.active { display:flex; }
.editor-ai-shield-ring {
  width:48px; height:48px; border-radius:50%;
  border:3px solid rgba(46,117,182,.15);
  border-top-color:var(--accent,#2e75b6);
  animation:spin .75s linear infinite;
}
.editor-ai-shield-label {
  font-family:var(--fb,inherit); font-size:.92rem;
  font-weight:700; color:#0f2137; letter-spacing:-.01em;
}
.editor-ai-shield-sub {
  font-size:.76rem; color:var(--accent,#2e75b6);
  margin-top:-6px;
  animation:shieldPulse 1.6s ease-in-out infinite;
}
@media (min-width:600px) { .editor-ai-shield { border-radius:20px; } }
@keyframes shieldPulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* Legacy cachés */
.editor-head-hint { display:none; }
.editor-guide     { display:none !important; }
/* #mdEditor géré par switchEditorMode — visible uniquement en mode raw */
.ebtn-close, .ebtn-apply { display:none; }

/* ── Mode tabs ───────────────────────────────────────────────────────── */
.editor-mode-tabs {
  display:flex; margin:0 18px 10px; gap:8px; flex-shrink:0;
}
.editor-mode-tab {
  flex:1; padding:10px 8px; border-radius:12px; border:2px solid #e0e8f0;
  background:#fff; cursor:pointer; text-align:center; transition:all .18s;
  font-family:var(--fb);
}
.editor-mode-tab.active { border-color:var(--accent); background:#e8f2fb; }
.editor-mode-tab-icon  { font-size:1.2rem; display:block; margin-bottom:3px; }
.editor-mode-tab-label { font-size:.78rem; font-weight:700; color:#0f2137; display:block; }
.editor-mode-tab-desc  { font-size:.65rem; color:#6b7a8d; display:block; margin-top:1px; }
.editor-mode-tab.active .editor-mode-tab-label { color:var(--accent); }

/* ── Corps scrollable ────────────────────────────────────────────────── */
.editor-body { flex:1; overflow-y:auto; padding:0 18px 8px; display:flex; flex-direction:column; gap:10px; }

/* ── Panneau "Aide automatique" ──────────────────────────────────────── */
.editor-auto-panel { display:flex; flex-direction:column; gap:10px; }
.editor-request-label {
  font-family:var(--fb); font-size:.85rem; font-weight:700; color:#0f2137;
  display:flex; align-items:center; gap:6px;
}
.editor-request-label small { font-size:.73rem; font-weight:400; color:#6b7a8d; }
.editor-chips { display:flex; flex-wrap:wrap; gap:6px; }
.editor-chip {
  font-size:.73rem; padding:6px 13px; border-radius:20px;
  border:1.5px solid #c8d8e8; background:#f0f4f8; color:#3a5a7a;
  cursor:pointer; transition:all .15s; font-family:var(--fb);
}
.editor-chip:hover { background:#e8f2fb; border-color:var(--accent); }
.editor-textarea {
  width:100%; border:1.5px solid #d0d8e4; border-radius:12px;
  padding:12px 14px; font-family:var(--fb); font-size:.9rem;
  color:#0f2137; background:#fff; resize:none; outline:none;
  line-height:1.5; min-height:72px; transition:border-color .15s, box-shadow .15s;
}
.editor-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,117,182,.1); }
.editor-textarea::placeholder { color:#aab4c0; }
.editor-request-status {
  font-size:.75rem; padding:8px 12px; border-radius:8px; display:none; line-height:1.5;
}
.editor-request-status.visible { display:block; }
.editor-request-status.loading { color:#1a5fa8; background:#e8f2fb; }
.editor-request-status.success { color:#1a6b3c; background:#e8f5ee; }
.editor-request-status.error   { color:#c0392b; background:#fdecea; }
.editor-offline-banner {
  display:none; background:#fff8e6; border:1.5px solid #f0d080;
  border-radius:10px; padding:10px 14px; font-size:.78rem; color:#7a5800; line-height:1.5;
}
.editor-offline-banner.visible { display:block; }

/* ── Panneau "Modifier moi-même" ─────────────────────────────────────── */
.editor-manual-panel { display:none; flex-direction:column; gap:10px; }
.editor-manual-panel.active { display:flex; }
.editor-field-group {
  background:#fff; border:1.5px solid #e8edf3; border-radius:12px; overflow:hidden;
}
.editor-field-row {
  display:flex; align-items:flex-start; border-bottom:1px solid #f0f4f8;
}
.editor-field-row:last-child { border-bottom:none; }
.editor-field-label {
  font-size:.7rem; font-weight:100; color:#6b7a8d;
  padding:13px 12px 11px 14px; min-width:90px; flex-shrink:0; line-height:1.4;
}
.editor-field-input {
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--fb); font-size:1rem; color:#0f2137;
  padding:11px 14px 11px 0; line-height:1.5; resize:none; min-height:52px;
}
.editor-field-input:focus { background:#f0f6ff; }
.editor-manual-job {
  background:#f8fafc; border:1.5px solid #e2e8f0;
  border-radius:14px; overflow:hidden; margin-top:8px;
}
.editor-manual-job-header {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.67rem; font-weight:700; letter-spacing:.07em;
  color:#64748b; text-transform:uppercase;
  padding:6px 8px 6px 14px; background:#f1f5f9;
  border-bottom:1px solid #e2e8f0;
}
.mf-job-delete-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px;
  border:none; background:transparent; cursor:pointer;
  color:#94a3b8; transition:background .15s, color .15s;
}
.mf-job-delete-btn:hover { background:#fee2e2; color:#dc2626; }
.mf-job-delete-btn:active { background:#fecaca; }
.mf-job-delete-btn .material-icons-round { font-size:17px; }

/* ── Jobs réduits par défaut — header section + collapse body ───── */
.mf-jobs-expand-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 4px 4px 2px; margin-top:4px;
}
.mf-jobs-expand-label {
  font-size:.63rem; font-weight:700; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.05em;
}
.mf-expand-all-btn {
  display:flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:8px;
  border:1.5px solid #e2e8f0; background:#f8fafc;
  font-size:.7rem; font-weight:600; color:#475569;
  cursor:pointer; transition:background .15s, color .15s;
}
.mf-expand-all-btn:hover { background:#e2e8f0; color:#1e293b; }
.mf-expand-all-btn .material-icons-round { font-size:15px; }

/* header du job : curseur pointer, label prend tout l'espace */
.editor-manual-job-header {
  cursor:pointer; user-select:none;
  gap:6px;
}
.mf-job-header-label {
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.67rem;
}
.mf-job-header-company { font-weight:400; color:#94a3b8; }

/* chevron individuel */
.mf-job-chevron { font-size:16px !important; color:#94a3b8; flex-shrink:0;
  transition:transform .2s ease; }
.mf-job-chevron.expanded { transform:rotate(90deg); }

/* body collapsed/expanded */
.mf-job-body { overflow:hidden; }
.mf-job-body.collapsed { display:none; }

.mf-job-flagged-title {
  color: #e53935;
  font-size: 0.78rem;
  font-weight: 500;
  margin-left: 0.4em;
  opacity: 0.9;
}

/* ── Highlights postes — rows tap ─────────────────────────────── */
.mf-hl-label {
  font-size:.63rem; font-weight:700; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.05em;
  padding:8px 14px 2px; background:#fafbfc;
  border-top:1px solid #e2e8f0;
}
.mf-highlight-row {
  background:#fafbfc;
  border-bottom:1px solid #f1f5f9;
}
.mf-highlight-row:last-of-type { border-bottom:none; }
.mf-hl-tap {
  display:flex; align-items:center; gap:10px;
  padding:12px 12px 12px 14px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .12s;
}
.mf-hl-tap:active { background:#eef2ff; }
.mf-hl-num {
  flex-shrink:0; width:22px; height:22px;
  background:#e2e8f0; border-radius:50%;
  font-size:.63rem; font-weight:700; color:#64748b;
  display:flex; align-items:center; justify-content:center;
}
.mf-hl-tap-text {
  flex:1; font-size:.95rem; color:#0f2137;
  line-height:1.45; word-break:break-word;
}
.mf-hl-tap-placeholder { color:#94a3b8; font-style:italic; }
.mf-hl-chevron {
  flex-shrink:0; font-size:18px; color:#cbd5e1;
}
.mf-add-highlight-btn {
  display:flex; align-items:center; gap:6px;
  width:100%; background:none; border:none;
  border-top:1px dashed #e2e8f0;
  padding:13px 14px; cursor:pointer;
  font-size:.88rem; color:var(--accent); font-weight:600;
  font-family:var(--fb);
}
.mf-add-highlight-btn .material-icons-round { font-size:20px; }

/* ── Modal highlight plein écran ──────────────────────────────── */
.mf-hl-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.45);
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; pointer-events:none;
  transition:opacity .22s;
}
.mf-hl-modal-overlay.mf-hl-modal-active {
  opacity:1; pointer-events:all;
}
.mf-hl-modal-sheet {
  background:#fff; border-radius:20px 20px 0 0;
  display:flex; flex-direction:column;
  max-height:90vh;
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.mf-hl-modal-overlay.mf-hl-modal-active .mf-hl-modal-sheet {
  transform:translateY(0);
}
.mf-hl-modal-handle {
  width:36px; height:4px; border-radius:2px;
  background:#e2e8f0; margin:10px auto 0; flex-shrink:0;
}
.mf-hl-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid #e2e8f0; flex-shrink:0;
}
.mf-hl-modal-header-left { display:flex; flex-direction:column; gap:2px; }
.mf-hl-modal-ctx {
  font-size:.72rem; color:#64748b; font-weight:500;
}
.mf-hl-modal-title {
  font-size:1.05rem; font-weight:700; color:#0f2137;
}
.mf-hl-modal-close {
  width:38px; height:38px; border-radius:10px;
  border:1px solid #e2e8f0; background:#f8fafc;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.mf-hl-modal-close .material-icons-round { font-size:20px; color:#64748b; }
.mf-hl-modal-body {
  flex:1; padding:16px; overflow-y:auto;
}
.mf-hl-modal-ta {
  width:100%; border:1.5px solid #e2e8f0; border-radius:12px;
  font-family:var(--fb); font-size:1rem; color:#0f2137;
  background:#f8fafc; padding:14px; line-height:1.65;
  resize:none; outline:none; min-height:220px;
  box-sizing:border-box;
}
.mf-hl-modal-ta:focus {
  border-color:var(--accent); background:#fff;
}
.mf-hl-modal-hint {
  font-size:.78rem; color:#94a3b8;
  margin-top:8px; padding:0 2px; line-height:1.5;
}
.mf-hl-modal-footer {
  display:flex; gap:10px;
  padding:12px 16px 28px;
  border-top:1px solid #e2e8f0; flex-shrink:0;
}
.mf-hl-modal-del {
  display:flex; align-items:center; gap:6px;
  padding:0 18px; height:52px; flex-shrink:0;
  border-radius:12px; border:1px solid #fca5a5;
  background:#fef2f2; font-size:.9rem; font-weight:600;
  color:#dc2626; font-family:var(--fb); cursor:pointer;
}
.mf-hl-modal-del .material-icons-round { font-size:18px; }
.mf-hl-modal-save {
  flex:1; height:52px; border-radius:12px;
  border:none; background:var(--accent);
  font-size:1rem; font-weight:700; color:#fff;
  font-family:var(--fb); cursor:pointer;
  transition:filter .15s;
}
.mf-hl-modal-save:active { filter:brightness(.9); }

/* ── Accordéons Compétences / Formations / Portfolio ─────────────── */
.mf-accordion-btn {
  display:flex; align-items:center; gap:10px;
  width:100%; background:#f1f5f9;
  border:1.5px solid #e2e8f0; border-radius:14px;
  padding:13px 16px; margin-top:10px;
  cursor:pointer; text-align:left;
  transition:background .15s, border-color .15s;
  font-family:var(--fb);
}
.mf-accordion-btn:active { background:#e2e8f0; }
.mf-acc-ico { font-size:21px; color:#64748b; flex-shrink:0; }
.mf-acc-label {
  flex:1; font-size:.9rem; font-weight:700;
  color:#1e293b; letter-spacing:.01em;
}
.mf-acc-chevron { font-size:22px; color:#94a3b8; transition:transform .22s; flex-shrink:0; }
.mf-accordion-btn[aria-expanded="true"] .mf-acc-chevron { transform:rotate(180deg); }
.mf-accordion-btn[aria-expanded="true"] { border-color:var(--accent); background:#eff6ff; }
.mf-accordion-btn[aria-expanded="true"] .mf-acc-ico,
.mf-accordion-btn[aria-expanded="true"] .mf-acc-label { color:var(--accent); }
.mf-accordion-body { display:none; padding:0; }
.mf-accordion-body.open { display:block; }

/* ── Sections internes skills/formations/portfolio ───────────────── */
.mf-section-inner {
  background:#f8fafc; border:1.5px solid #e2e8f0;
  border-radius:14px; overflow:hidden; margin-top:6px;
}
.mf-skill-group { border-bottom:1px solid #e2e8f0; }
.mf-skill-group:last-child { border-bottom:none; }
.mf-skill-group-label {
  font-size:.63rem; font-weight:700; letter-spacing:.06em;
  color:#64748b; text-transform:uppercase;
  padding:8px 14px 4px; background:#f1f5f9;
  border-bottom:1px solid #f1f5f9;
}
.mf-list-row {
  display:flex; align-items:flex-start;
  padding:8px 14px; gap:8px;
  border-bottom:1px solid #f1f5f9;
}
.mf-list-row:last-of-type { border-bottom:none; }
.mf-list-ico { flex-shrink:0; color:#94a3b8; padding-top:2px; }
.mf-list-ico .material-icons-round { font-size:17px; }
.mf-add-btn {
  display:flex; align-items:center; gap:6px;
  width:100%; background:none; border:none;
  border-top:1px dashed #e2e8f0;
  padding:9px 14px; cursor:pointer;
  font-size:.82rem; color:var(--accent); font-weight:600;
  font-family:var(--fb);
}
.mf-add-btn .material-icons-round { font-size:18px; }
.mf-empty-hint {
  padding:14px 16px; font-size:.82rem; color:#94a3b8;
  font-style:italic; text-align:center;
}

/* ── Bouton principal vert (mode manuel) ─────────────────────────────── */
.editor-primary-btn {
  flex:1; padding:14px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg, #1a5fa8, #2e75b6);
  color:white; font-family:var(--fb); font-size:.92rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .18s; box-shadow:0 4px 16px rgba(46,117,182,.3);
}
.editor-primary-btn:hover { background:linear-gradient(135deg, #2e75b6, #4a9fd4); }
.editor-primary-btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.editor-primary-btn.green {
  background:linear-gradient(135deg, #1a8048, #27a05a);
  box-shadow:0 4px 16px rgba(26,128,72,.3);
}
.editor-primary-btn.green:hover { background:linear-gradient(135deg,#27a05a,#33c46e); }

/* ── INFOS SECTION ───────────────────────────────────────────────────── */
.info-item {
  font-size: .76rem; color: var(--text);
  padding: 3px 0 3px 14px; position: relative; line-height: 1.5;
}
.info-item::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--green); font-size: .65rem; top: 5px;
}

/* ── AI PARSER BUTTON ────────────────────────────────────────────────── */
.ebtn-ai {
  background: linear-gradient(135deg, #1a3a5c, #2e75b6);
  color: white; position: relative; overflow: hidden;
}
.ebtn-ai:hover { background: linear-gradient(135deg, #2e75b6, #4a9fd4); }
.ebtn-ai::before {
  content: '✦';
  margin-right: 5px; font-size: .75rem;
  animation: pulse-star 2s ease-in-out infinite;
}
@keyframes pulse-star {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.6; transform:scale(1.3); }
}

/* ── AI PARSER MODAL ─────────────────────────────────────────────────── */
/* ── MODALE PHOTO CV — light mode ────────────────────────────────────── */
.ai-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,33,55,.6); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:500; align-items:flex-end; justify-content:center; padding:0;
}
.ai-overlay.open { display:flex; }
.ai-modal {
  background:#ffffff;
  width:100%; max-width:480px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -4px 40px rgba(0,0,0,.18);
  border-radius:24px 24px 0 0;
  max-height:92vh;
  min-height:220px;
}
@media (min-width:600px) {
  .ai-overlay { align-items:center; padding:24px; }
  .ai-modal { border-radius:20px; max-height:95vh; }
}
.ai-modal-handle {
  flex-shrink: 0;
  width: 100%;
  padding: 10px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ai-modal-drag-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.18);
  transition: background .15s;
}
.ai-modal-handle:hover .ai-modal-drag-bar,
.ai-modal-handle:active .ai-modal-drag-bar {
  background: rgba(0,0,0,.35);
}
@media (min-width:600px) { .ai-modal-handle { display:none; } }

/* Header */
.ai-modal-head {
  padding:20px 22px 14px;
  display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0;
}
.ai-modal-head-text { flex:1; }
.ai-modal-title {
  font-family:var(--fb); font-size:1.15rem; font-weight:700;
  color:#0f2137; line-height:1.2; margin-bottom:5px;
}
.ai-modal-subtitle {
  font-size:.8rem; color:#6b7a8d; line-height:1.45;
}
.ai-modal-close {
  background:#f0f3f7; border:none; cursor:pointer;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#6b7a8d; font-size:.85rem; flex-shrink:0;
  transition:all .15s; margin-left:12px;
}
.ai-modal-close:hover { background:#e2e8f0; color:#0f2137; }

/* ── Stepper bar ── */
.ai-stepper {
  display:flex; align-items:center;
  padding:0 24px 16px; gap:0; flex-shrink:0;
}
.ai-step-node {
  display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto;
}
.ai-step-bubble {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.ai-step-bubble .material-icons-round { font-size:17px; }
.ai-step-bubble.active {
  background:#c0392b; color:#fff;
  box-shadow:0 0 0 4px rgba(192,57,43,.15);
}
.ai-step-bubble.done   { background:#27ae60; color:#fff; }
.ai-step-bubble.idle   { background:#f0f0f0; color:#ccc; }
.ai-step-node-label {
  font-size:.58rem; font-weight:700; color:#ccc;
  text-align:center; max-width:70px; line-height:1.3;
  transition:color .3s; font-family:var(--fb);
}
.ai-step-node-label.active { color:#c0392b; }
.ai-step-node-label.done   { color:#27ae60; }
.ai-step-line {
  flex:1; height:2px; background:#f0f0f0;
  margin:0 8px; margin-bottom:22px;
  border-radius:2px; overflow:hidden; position:relative;
}
.ai-step-line-fill {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:#27ae60; border-radius:2px;
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.ai-step-line-fill.full { width:100%; }

/* ── Panels ── */
.ai-panel { display:none; }
.ai-panel.active { display:flex; }
@keyframes aiSlideIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes aiSlideBack { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
.ai-panel.active { animation:aiSlideIn .25s cubic-bezier(.4,0,.2,1); }
.ai-panel.slide-back { animation:aiSlideBack .25s cubic-bezier(.4,0,.2,1); }

/* ── Step 2 header ── */
.ai-step2-header {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; flex-shrink:0;
}
.ai-step2-icon {
  width:36px; height:36px; border-radius:10px;
  background:rgba(245,200,66,.25);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ai-step2-icon .material-icons-round { font-size:20px; color:#b8900a; }
.ai-step2-text { flex:1; min-width:0; }
.ai-step2-title {
  font-size:.85rem; font-weight:900; color:#1a1a1a;
  font-family:var(--fb); line-height:1.3;
}
/* .ai-step2-sub { font-size:.65rem; color:#aaa; font-weight:600; margin-top:2px; } */
.ai-optional-badge {
  display:inline-block;
  font-size:.55rem; font-weight:900;
  background:#f0f0f0; color:#aaa;
  padding:2px 7px; border-radius:10px;
  letter-spacing:.6px; text-transform:uppercase;
  vertical-align:middle; margin-left:4px;
}

/* ── Textarea pleine largeur step 2 — accessibilité Georges ── */
.ai-job-textarea-full {
  width:100%; min-height:160px; max-height:240px; resize:vertical;
  /* border:2px solid #2e75b6;  */
  border-radius:14px;
  padding:13px 14px; font-size:.9rem;
  color:#e8f0f8; line-height:1.7; 
  /* background:#192c45; */
  transition:border-color .2s, box-shadow .2s, background .2s;
  box-sizing:border-box; outline:none;
}
.ai-job-textarea-full:focus {
  border-color:#4a9fd4;
  box-shadow:0 0 0 3px rgba(74,159,212,.22);
  background:#1e3352;
}
.ai-job-textarea-full.filled { border-color:#1a6b3c; background:#0f2e1a; color:#c8ecd4; }
.ai-job-textarea-full::placeholder { color:#6a90b8; font-style:italic; }

/* ── Bouton retour step ── */
.ai-back-btn {
  display:flex; align-items:center; justify-content:center; gap:4px;
}

/* Étapes (ancien — conservé pour compatibilité éventuelle) */
.ai-steps { display:none; }

/* Body */
.ai-modal-body { padding:0 18px 16px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; }

/* Drop zone */
.ai-drop-zone {
  border:none; border-radius:16px;
  padding:16px 24px; text-align:center; cursor:pointer;
  transition:background .2s, transform .15s, box-shadow .2s;
  background: #c0392b;
  box-shadow: 0 6px 20px rgba(192,57,43,.3);
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px;
}
.ai-drop-zone:hover, .ai-drop-zone.drag-over {
  background:#a93226;
  box-shadow: 0 10px 28px rgba(192,57,43,.42);
  transform: translateY(-2px);
}
.ai-drop-zone:active { transform: translateY(0); }
.ai-drop-zone-icon {
  width:auto; height:auto; border-radius:0;
  background:none;
  display:flex; align-items:center; justify-content:center;
}
.ai-drop-zone-icon .material-icons-round { font-size:22px; color:rgba(255,255,255,.85); }
.ai-drop-zone-title {
  font-family:var(--fb); font-size:1rem; font-weight:700; color:#fff;
}
.ai-drop-zone-hint { font-size:.75rem; color:rgba(255,255,255,.75); line-height:1.45; }

.ai-preview {
  display:none; position:relative; border-radius:12px; max-height:210px;
}
.ai-preview img { width:100%; object-fit:contain; max-height:180px; border-radius:12px; }
.ai-preview-remove {
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.5); color:white; border:none;
  border-radius:50%; width:28px; height:28px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.ai-status {
  font-family:var(--fm); font-size:.72rem; padding:10px 14px;
  border-radius:10px; display:none; line-height:1.6;
  white-space: pre-line;
}
.ai-status.visible { display:block; }
.ai-status.loading { color:#1a5fa8; background:#e8f2fb; }
.ai-status.success { color:#1a6b3c; background:#e8f5ee; }
.ai-status.error   { color:#c0392b; background:#fdecea; }

/* ── Card Boost "Adapter mon CV à un poste" ──────────────────────────── */
.ai-job-boost {
  border-radius:16px;
  background:linear-gradient(135deg,#1a2e48 0%,#152438 100%);
  border:2px solid #2e75b6;
  overflow:hidden;
  transition:border-color .3s, background .3s, box-shadow .3s;
  cursor:pointer;
  user-select:none;
  box-shadow:0 2px 12px rgba(46,117,182,.22);
}
.ai-job-boost.active {
  border-color:#1a6b3c;
  background:linear-gradient(135deg,#0f2e1a 0%,#0a2014 100%);
  box-shadow:0 2px 16px rgba(26,107,60,.25);
}
.ai-job-boost-header {
  display:flex; align-items:center; gap:10px;
  padding:13px 14px 11px;
}
.ai-job-boost-icon {
  width:38px; height:38px; border-radius:12px;
  background:rgba(201,168,76,.2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .3s;
}
.ai-job-boost.active .ai-job-boost-icon { background:rgba(26,107,60,.3); }
.ai-job-boost-icon .material-icons-round {
  font-size:22px; color:#c9a84c;
  transition:color .3s;
}
.ai-job-boost.active .ai-job-boost-icon .material-icons-round { color:#4caf88; }
.ai-job-boost-text { flex:1; min-width:0; }
.ai-job-boost-title {
  font-size:.88rem; font-weight:900; color:#e8f0f8;
  line-height:1.2; font-family:var(--fb);
}
.ai-job-boost-sub {
  font-size:.68rem; color:#7a9fc0; font-weight:600; margin-top:2px;
  transition:color .2s;
}
.ai-job-boost.active .ai-job-boost-sub { color:#4caf88; font-weight:700; }
.ai-job-boost-pill {
  font-size:.58rem; font-weight:900;
  background:#c9a84c; color:#1a0f00;
  padding:3px 9px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.8px;
  white-space:nowrap; flex-shrink:0;
  transition:background .3s, color .3s;
}
.ai-job-boost.active .ai-job-boost-pill { background:#1a6b3c; color:#fff; }
.ai-job-boost-chevron {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s;
}
.ai-job-boost-chevron .material-icons-round {
  font-size:18px; color:#6a90b8;
  transition:transform .3s cubic-bezier(.4,0,.2,1), color .2s;
}
.ai-job-boost.open .ai-job-boost-chevron .material-icons-round { transform:rotate(180deg); color:#4a9fd4; }
.ai-job-boost:hover .ai-job-boost-chevron { background:rgba(255,255,255,.12); }

/* Corps accordéon */
.ai-job-boost-body {
  max-height:0; overflow:hidden;
  transition:max-height .38s cubic-bezier(.4,0,.2,1), padding .38s;
  padding:0 14px;
}
.ai-job-boost.open .ai-job-boost-body {
  max-height:320px;
  padding-bottom:14px;
}
.ai-job-boost-textarea {
  width:100%; min-height:90px; max-height:200px; resize:vertical;
  border:2px solid #2e75b6; border-radius:12px;
  padding:10px 13px; font-size:.85rem; font-family:var(--fm);
  color:#e8f0f8; line-height:1.7; background:#1a2e48;
  transition:border-color .2s, background .2s, box-shadow .2s;
  box-sizing:border-box; outline:none;
}
.ai-job-boost.active .ai-job-boost-textarea { border-color:#1a6b3c; background:#0f2e1a; color:#c8ecd4; }
.ai-job-boost-textarea:focus { border-color:#4a9fd4; box-shadow:0 0 0 3px rgba(74,159,212,.18); }
.ai-job-boost.active .ai-job-boost-textarea:focus { border-color:#4caf88; box-shadow:0 0 0 3px rgba(76,175,136,.15); }
.ai-job-boost-textarea::placeholder { color:#5a7a9a; font-style:italic; }
.ai-job-boost-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px;
}
.ai-job-boost-hint {
  display:flex; align-items:center; gap:4px;
  font-size:.63rem; color:#5a7a9a; font-weight:600;
}
.ai-job-boost-hint .material-icons-round { font-size:13px; }
.ai-job-boost-char { font-size:.63rem; color:#4a9fd4; font-weight:600; }
.ai-job-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:#e8f5ee; color:#1a6b3c;
  font-size:.7rem; font-weight:700; font-family:var(--fb);
  padding:4px 10px; border-radius:20px; border:1px solid #c0e8d0;
}
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ MODAL RÉCUPÉRATION CV ══════════════════════════════════════════════ */
/* ── RECOVER MODAL — style welcomeScreen blanc/rouge ─────────────────── */
.recover-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 600;
  align-items: flex-end; justify-content: center;
}
.recover-overlay.open { display: flex; }

.recover-modal {
  background: #f4f6f4;
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  overflow: hidden;
  box-shadow: 0 -8px 48px rgba(0,0,0,.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: recoverSlideUp .32s cubic-bezier(.32,1,.58,1);
}
@keyframes recoverSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Handle bar */
.recover-modal::before {
  content: ''; display: block;
  width: 40px; height: 4px;
  background: rgba(0,0,0,.15); border-radius: 2px;
  margin: 12px auto 0;
}

/* Hero section */
.recover-hero {
  padding: 20px 24px 16px; text-align: center;
  background: transparent;
}
.recover-hero-icon {
  width: 64px; height: 64px; border-radius: 20px;
  background: rgba(192,57,43,.1);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.recover-hero-icon .material-icons-round {
  font-size: 30px; color: #c0392b;
}
.recover-hero-icon svg { display: none; }

.recover-hero-title {
  font-family: var(--fb); font-size: 1.3rem; font-weight: 800;
  color: #1a1a1a; line-height: 1.2; margin-bottom: 6px;
}
.recover-hero-sub {
  font-family: var(--fm); font-size: .85rem; color: #777; line-height: 1.55;
}

/* Form body */
.recover-body {
  padding: 16px 20px 8px;
  display: flex; flex-direction: column; gap: 14px;
}

.recover-row { display: flex; gap: 10px; }
.recover-row .recover-field { flex: 1; }

.recover-field { display: flex; flex-direction: column; gap: 6px; }
.recover-label {
  font-family: var(--fm); font-size: .72rem; font-weight: 700;
  color: #999; text-transform: uppercase; letter-spacing: .08em;
}
.recover-input {
  width: 100%; padding: 13px 14px; border: 1.5px solid rgba(0,0,0,.1);
  border-radius: 12px; font-size: .95rem; font-family: var(--fb);
  color: #1a1a1a; background: #fff; outline: none;
  transition: border-color .18s, box-shadow .18s; box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.recover-input:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}
.recover-input::placeholder { color: #bbb; font-weight: 400; }
.recover-input.error { border-color: #c0392b; background: #fff8f7; }

/* Footer */
.recover-foot {
  padding: 12px 20px 24px;
  display: flex; flex-direction: column; gap: 10px;
}

.recover-btn {
  width: 100%; padding: 16px; border: none; border-radius: 16px;
  font-family: var(--fb); font-size: 1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .18s;
}
.recover-btn-primary {
  background: #c0392b; color: #fff;
  box-shadow: 0 6px 24px rgba(192,57,43,.3);
}
.recover-btn-primary:hover  { background: #a93226; box-shadow: 0 8px 28px rgba(192,57,43,.42); transform: translateY(-1px); }
.recover-btn-primary:active { transform: scale(.97); }
.recover-btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.recover-btn-ghost {
  background: none; color: #999;
  font-size: .9rem; font-weight: 500;
}
.recover-btn-ghost:hover { color: #333; }

.recover-status {
  font-family: var(--fm); font-size: .8rem; padding: 10px 13px;
  border-radius: 10px; display: none; line-height: 1.55; text-align: center;
}
.recover-status.open    { display: block; }
.recover-status.success { background: rgba(30,122,82,.08); color: #1e7a52; }
.recover-status.error   { background: rgba(192,57,43,.08); color: #c0392b; }
.recover-status.loading { background: rgba(0,0,0,.05); color: #555; }

.recover-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; display: none; flex-shrink: 0;
}
.recover-spinner.on { display: block; }

/* ── Boutons de choix (écran 1) ──────────────────────────────────────── */
.recover-choice-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  background: #fff; border: 1.5px solid rgba(0,0,0,.1);
  border-radius: 16px; cursor: pointer; text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .12s;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.recover-choice-btn:hover {
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transform: translateY(-1px);
}
.recover-choice-btn:active { transform: scale(.98); }

.recover-choice-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.recover-choice-icon .material-icons-round { font-size: 24px; }

.recover-choice-text { flex: 1; }
.recover-choice-title {
  font-family: var(--fb); font-size: .95rem; font-weight: 700;
  color: #1a1a1a; margin-bottom: 2px;
}
.recover-choice-sub {
  font-family: var(--fm); font-size: .78rem; color: #888;
}
.recover-choice-arrow {
  font-size: 20px; color: #bbb; flex-shrink: 0;
}

/* ── Tip / conseil ───────────────────────────────────────────────────── */
.recover-tip {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 13px; border-radius: 11px;
  background: rgba(180,83,9,.08);
  font-family: var(--fm); font-size: .8rem;
  color: #7c4b0a; line-height: 1.5;
}

/* ── Bouton retour ───────────────────────────────────────────────────── */
.recover-back-btn {
  display: flex; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  font-family: var(--fb); font-size: .85rem; font-weight: 600;
  color: #c0392b; padding: 0; margin: 0 auto 0 0;
}
.recover-back-btn .material-icons-round { font-size: 16px; }

@media (min-width: 600px) {
  .recover-overlay { align-items: center; }
  .recover-modal { border-radius: 24px; max-width: 420px; }
  .recover-modal::before { display: none; }
  @keyframes recoverSlideUp {
    from { transform: scale(.93) translateY(12px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
  }
}

/* Footer */
.ai-modal-foot {
  padding:12px 18px 20px; background:#f8fafc;
  border-top:1px solid #edf0f4;
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.ai-cta-btn {
  width:100%; padding:16px; border:none; border-radius:14px; cursor:pointer;
  background:#c0392b;
  color:white; font-family:var(--fb); font-size:1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .18s; box-shadow:0 4px 18px rgba(46,117,182,.3);
}
.ai-cta-btn:hover  { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(192,57,43,.45); }
.ai-cta-btn:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.ai-cta-btn svg { width:20px; height:20px; flex-shrink:0; }
.ai-cta-price { font-size:.75rem; opacity:.75; font-weight:400; margin-left:4px; }
.ai-cta-hint {
  font-size:.76rem; color:#8a96a6; text-align:center;
  line-height:1.4; padding:0 4px;
}

.ai-cancel-btn {
  background:none; border:none; cursor:pointer;
  font-family:var(--fb); font-size:.8rem;
  color:#b0b8c4; padding:4px; text-align:center; transition:color .15s;
}
.ai-cancel-btn:hover { color:#6b7a8d; }

/* Boutons dev */
.ai-dev-row { display:none; gap:8px; }
.ai-dev-row.dev-visible { display:flex; }
.ai-dev-btn {
  flex:1; padding:9px; border:none; border-radius:8px; cursor:pointer;
  font-family:var(--fm); font-size:.62rem; font-weight:500; color:white;
  display:flex; align-items:center; justify-content:center; gap:5px; transition:all .15s;
}
.ai-dev-btn.dev-bypass { background:#9a5200; }
.ai-dev-btn.dev-bypass:hover { background:#b86200; }
.ai-dev-btn.dev-stripe { background:#5b2d8a; }
.ai-dev-btn.dev-stripe:hover { background:#7040aa; }
.ai-dev-label {
  font-family:var(--fm); font-size:.58rem; color:#b07800;
  text-align:center; letter-spacing:.06em; text-transform:uppercase;
}

.ebtn-ai-run { display:none; }
.ai-spinner {
  width:18px; height:18px; border:2.5px solid rgba(255,255,255,.3);
  border-top-color:white; border-radius:50%;
  animation:spin .7s linear infinite; display:none; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:768px) {
  .ebtn-ai { font-size:.6rem; padding:6px 10px; }
}
/* ── BOUTON MÉTIERS TOPBAR (supprimé — dans bottom bar) ─────────────── */
.topbar-metiers-btn { display: none; }

@media (max-width: 768px) {

  /* Topbar : 1 ligne compacte */
  .topbar {
    flex-wrap: nowrap;
    height: auto; min-height: 48px;
    padding: 8px 14px;
    gap: 8px;
    align-items: center;
  }
  .topbar-row1 { display: contents; } /* inline — pas de wrapper visuel */
  .topbar-name { font-size: .88rem; flex-shrink: 0; }
  .topbar-name span { display: none; }
  .topbar-contact { display: none; }
  .view-switcher-wrap { flex: 1; min-width: 0; }
  .view-switcher { gap: 2px; padding: 2px; }
  .view-btn { font-size: .62rem; padding: 5px 9px; }
  .topbar > .help-btn { display: none; }

  /* Filter bar : scroll horizontal */
  .filter-bar {
    padding: 10px 14px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 52px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-label { display: none; }
  .fpill { white-space: nowrap; font-size: .7rem; padding: 4px 11px; flex-shrink: 0; }

  /* CV wrap : plein écran, pas de marges latérales */
  .cv-wrap { margin: 0; border-radius: 0; }

  /* Header : colonne unique */
  .cv-header {
    grid-template-columns: 1fr;
    padding: 20px 18px 16px;
    gap: 12px;
  }
  .header-name { font-size: 2.1rem; }
  .header-title { font-size: 1rem; }
  .header-tagline { font-size: .72rem; }
  .header-contact {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .contact-item { font-size: .75rem; }

  /* Body : colonne unique, sidebar au-dessus */
  .cv-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  /* Sidebar : affichage horizontal compact */
  .cv-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--lgray);
    padding: 18px 16px;
    background: #f0f4f9;
  }

  /* Skills : grille compacte */
  .skill-group { margin-bottom: 10px; }
  .skill-group-label { font-size: .65rem; }
  .skill-tag { font-size: .62rem; padding: 2px 6px; }

  /* Portfolio : plus compact */
  .portfolio-link { padding: 4px 0; }
  .portfolio-url { font-size: .7rem; }
  .portfolio-desc { font-size: .62rem; }
  .badge-ai { font-size: .58rem; }

  /* Sections sidebar : accordéon sur mobile */
  .sidebar-section { margin-bottom: 0; 
    /* border-bottom: 1px dashed var(--lgray);  */
    padding-bottom: 14px; margin-bottom: 14px; }
  .sidebar-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

  /* Main : padding réduit */
  .cv-main { padding: 18px 16px; }

  /* Accroche */
  .accroche { font-size: .92rem; padding: 12px 14px; margin-bottom: 20px; }

  /* Jobs */
  .job { margin-bottom: 18px; padding-bottom: 18px; }
  .job-header { flex-direction: column; gap: 2px; }
  .job-title { font-size: .95rem; }
  .job-dates { font-size: .65rem; }
  .job-company { font-size: .76rem; }
  .job-bullets li { font-size: .76rem; }
  .job-stack { font-size: .62rem; }

  /* Section title */
  .section-title { font-size: .6rem; margin-top: 20px; margin-bottom: 14px; }

  /* Gap box */
  .gap-box { padding: 12px 14px; }
  .gap-label { min-width: 56px; font-size: .65rem; }
  .gap-text { font-size: .72rem; }

  /* Timeline */
  #view-timeline { padding: 20px 14px 60px; }
  .tl-title { font-size: 1.4rem; }
  .tl-canvas { padding: 16px 10px 12px; overflow-x: auto; }
  .tl-rows { min-width: 600px; }
  .tl-row-label { width: 110px; font-size: .65rem; }
  .tl-bar-label { font-size: .55rem; }

  /* Edit bar : plus petit, collé en bas */
  .edit-bar { bottom: 14px; right: 14px; gap: 6px; }
  .ebtn { font-size: .65rem; padding: 7px 12px; }

  /* Editor modal : plein écran sur mobile */
  .editor-modal { max-height: 95vh; border-radius: 0; }
  #mdEditor { font-size: .72rem; min-height: 300px; }
  .editor-head-hint { display: none; }

  /* ── Thèmes avec sidebar : colonne unique, sidebar AU-DESSUS du main ── */
  /* Thème tech (défaut) */
  /* Sidebar : transformée en drawer — voir règles .sidebar-drawer-mobile ci-dessous */

  /* cv-wrap mobile : colonne unique car la sidebar est en drawer (position:fixed) */
  .cv-wrap {
    display: block !important;
    grid-template-columns: unset !important;
  }
  /* cv-right prend toute la largeur */
  .cv-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  /* Thème industrie — padding spécifique dans le drawer */
  .theme-industrie .cv-sidebar {
    padding-top: 56px !important;
  }
}

/* ── SIDEBAR DRAWER MOBILE ───────────────────────────────────────────── */

/* Overlay sombre derrière le drawer */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1100;
  opacity: 0;
  transition: opacity .3s ease;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* Bouton toggle dans le header — caché sur desktop */
.sidebar-drawer-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  flex-shrink: 0;
  color: #fff;
  transition: background .2s;
}
.sidebar-drawer-toggle:active { background: rgba(255,255,255,.28); }
.sidebar-drawer-toggle .material-icons-round { font-size: 1.2rem; }

/* Bouton ✕ dans le drawer — caché sur desktop */
.sidebar-drawer-close {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,.12);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: inherit;
  z-index: 2;
  transition: background .2s;
}
.sidebar-drawer-close:active { background: rgba(0,0,0,.22); }
.sidebar-drawer-close .material-icons-round { font-size: 1.1rem; }

@media (max-width: 768px) {
  /* Activer le bouton toggle */
  .sidebar-drawer-toggle { display: flex; }

  /* Positionnement absolu dans le header pour tous les thèmes */
  .cv-header {
    position: relative;
  }
  .sidebar-drawer-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  /* Thème Industrie : header blanc → bouton sombre */
  .theme-industrie .sidebar-drawer-toggle {
    background: rgba(0,0,0,.08);
    color: var(--ind-dark, #2c2c2c);
  }
  .theme-industrie .sidebar-drawer-toggle:active {
    background: rgba(0,0,0,.16);
  }

  /* Thème Artisan / Elegant / Service : adapter si nécessaire */


  /* Activer le bouton fermeture dans le drawer */
  .sidebar-drawer-close { display: flex; }

  /* Transformer la sidebar en drawer */
  .cv-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 85% !important;
    max-width: 340px !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    z-index: 1200 !important;
    transform: translateX(-100%) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
    order: unset !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-top: 56px !important;
    box-shadow: none;
  }
  .cv-sidebar.drawer-open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.22) !important;
  }

  /* Le cv-body reprend toute la largeur (plus de sidebar inline) */
  .cv-body {
    display: block !important;
  }
  .cv-main {
    order: unset !important;
    width: 100% !important;
  }


}

/* ── BOUTON AIDE TOPBAR ──────────────────────────────────────────────── */
.topbar-help-btn {
  background: rgba(0,0,0,.07); border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: .9rem; font-weight: 700;
  flex-shrink: 0; transition: all .15s; font-family: var(--fb);
}
.topbar-help-btn:hover { background: rgba(0,0,0,.13); color: #111; }

/* ── BOUTON DOWNLOAD TOPBAR ──────────────────────────────────────────── */
.topbar-dl-btn {
  display: none; /* piloté par _updateFabVisibility() */
  align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent, #2196f3); color: #fff;
  flex-shrink: 0; transition: all .15s;
}
.topbar-dl-btn:hover { background: var(--accent2, #1769aa); }

/* ── ÉCRAN D'ACCUEIL — version Léon (60+) ───────────────────────────── */
#welcomeScreen {
  position: fixed; inset: 0; z-index: 999;
  background: #1a1018;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 100px 0px 0;
  text-align: center;
  transition: opacity .4s ease, transform .4s ease;
  opacity: 1; transform: scale(1);
  overflow: hidden;
}

/* ── HERO IMAGE — photo de couverture plein-écran ───────────────────── */
.wc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.wc-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(.82) saturate(.9);
}
/* Dégradé protecteur : image visible en haut, texte lisible en bas (pour Gérard) */
.wc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 10, 25, 0.06)  0%,
    rgba(15, 10, 25, 0.06) 22%,
    rgba(15, 10, 25, 0.42) 48%,
    rgba(15, 10, 25, 0.84) 68%,
    rgba(15, 10, 25, 0.97) 100%
  );
}
/* Le contenu passe au-dessus de l'image */
#welcomeScreen .wc-content {
  position: relative;
  z-index: 1;
}
#welcomeScreen.hiding {
  opacity: 0; transform: scale(.97); pointer-events: none;
}
#welcomeScreen.hidden { display: none; }

/* ── SPLASH SCREEN — retour utilisateur connu ───────────────────────── */
#splashScreen {
  position: fixed; inset: 0; z-index: 1000;
  background: #f4f6f4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  pointer-events: all;
  opacity: 1; transition: opacity .6s ease;
}
#splashScreen.fade-out { opacity: 0; pointer-events: none; }
#splashScreen.hidden   { display: none; }

.splash-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fb); font-size: 1.6rem; font-weight: 800;
  color: white; letter-spacing: -.02em;
  box-shadow: 0 4px 20px rgba(46,117,182,.25);
  animation: splashPulse .6s ease forwards .2s;
  opacity: 0;
}
@keyframes splashPulse {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.splash-greeting {
  font-family: var(--fb); font-size: 1.5rem; font-weight: 700;
  color: #1a1a1a; letter-spacing: -.01em;
  opacity: 0; animation: splashFadeUp .45s ease forwards .35s;
}
.splash-greeting em { color: #c0392b; font-style: normal; }
.splash-saved-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: #888;
  font-family: var(--fm); letter-spacing: .04em;
  opacity: 0; animation: splashFadeUp .45s ease forwards .5s;
}
.splash-saved-badge .material-icons-round {
  font-size: 14px; color: #22c55e;
}
/* Ancien .splash-sub gardé pour compat */
.splash-sub {
  font-size: .82rem; color: #888;
  font-family: var(--fm); letter-spacing: .04em;
  opacity: 0; animation: splashFadeUp .45s ease forwards .5s;
}
.splash-btn {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  background: #c0392b;
  border: none;
  border-radius: 14px;
  padding: 14px 28px;
  color: white;
  font-family: var(--fb); font-size: 1rem; font-weight: 600;
  cursor: pointer;
  opacity: 0; animation: splashFadeUp .45s ease forwards .7s;
  transition: background .2s, box-shadow .2s, transform .15s;
  letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(192,57,43,.3);
}
.splash-btn:hover {
  background: #a93226;
  box-shadow: 0 10px 32px rgba(192,57,43,.42);
  transform: translateY(-2px);
}
.splash-btn:active { transform: translateY(0); }
.splash-btn .material-icons-round {
  font-size: 22px; color: rgba(255,255,255,.85);
}
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.splash-btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px;
  background: none;
  border: 2px solid #c0392b;
  border-radius: 14px;
  padding: 12px 28px;
  color: #c0392b;
  font-family: var(--fb); font-size: 1rem; font-weight: 600;
  cursor: pointer;
  opacity: 0; animation: splashFadeUp .45s ease forwards .85s;
  transition: background .2s, color .2s, transform .15s;
  letter-spacing: .01em;
}
.splash-btn-secondary:hover {
  background: rgba(192,57,43,.07);
  transform: translateY(-1px);
}
.splash-btn-secondary:active { transform: translateY(0); }
.splash-btn-secondary .material-icons-round { font-size: 20px; }
/* wc-skip dans le splash : fond clair → texte sombre */
#splashScreen .wc-skip        { color: rgba(0,0,0,.45); }
#splashScreen .wc-skip:hover  { color: rgba(0,0,0,.75); }
#splashScreen .wc-legal-link  { color: rgba(0,0,0,.4); }
#splashScreen .wc-legal-link:hover { color: #c0392b; }

.wc-illustration {
  display: none;
}

/* ── Mini-preview CV ───────────────────────────────────────────── */
.wc-cv-preview {
  position: relative;
  width: 200px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  overflow: visible;
  display: flex;
  animation: floatA 4s ease-in-out infinite;
  margin-bottom: 20px;
}
.wc-cv-sidebar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 66px;
  background: #c0392b;
  border-radius: 14px 0 0 14px;
}
.wc-cv-left {
  width: 66px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; padding: 14px 8px; gap: 9px;
  position: relative; z-index: 1;
}
.wc-cv-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
}
.wc-cv-avatar .material-icons-round { color: rgba(255,255,255,.7); font-size: 24px; }
.wc-cv-dot {
  width: 26px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.2);
}
.wc-cv-dot.full  { background: rgba(255,255,255,.7); }
.wc-cv-dot.half  { width: 16px; background: rgba(255,255,255,.5); }
.wc-cv-right {
  flex: 1; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.wc-cv-name    { width: 78%; height: 8px; background: #1a1a1a; border-radius: 4px; }
.wc-cv-job     { width: 52%; height: 5px; background: #c0392b; border-radius: 3px; opacity: .7; }
.wc-cv-section { width: 38%; height: 4px; background: #ddd; border-radius: 3px; margin-top: 3px; }
.wc-cv-line    { height: 4px; background: #eee; border-radius: 3px; }
.wc-cv-line.w90 { width: 90%; }
.wc-cv-line.w70 { width: 70%; }
.wc-cv-line.w80 { width: 80%; }

/* Badge IA flottant sur la preview */
.wc-cv-ai-badge {
  position: absolute;
  bottom: -13px; right: -13px;
  background: #fff;
  border: 1.5px solid #ececec;
  border-radius: 50px;
  padding: 5px 11px 5px 7px;
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  color: #c0392b; font-family: var(--fb);
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  white-space: nowrap; z-index: 2;
}
.wc-cv-ai-badge .material-icons-round { font-size: 13px; }

@keyframes floatA {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.wc-content { padding: 0 24px 80px; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; }


/* ── Bloc promesse ──────────────────────────────────────────────────── */
.wc-promise-block {
  width: 100%;
  margin-bottom: 4px;
  text-align: center;
}
.wc-promise-line {
  font-family: var(--fb);
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  margin: 0 0 2px;
  line-height: 1.3;
}
.wc-promise-line-red {
  color: #ff6b5b;
}
.wc-promise-sub {
  font-family: var(--fb);
  font-size: .82rem;
  color: #666;
  font-weight: 400;
  margin: 6px 0 0;
  line-height: 1.45;
  padding: 0 8px;
}

/* ── Sous-titre ─────────────────────────────────────────────────── */
.wc-subtitle {
  font-family: var(--fb);
  font-size: .95rem;
  color: #666;
  font-weight: 400;
  margin-top: -18px;
  margin-bottom: 20px;
  text-align: center;
}

/* ── Badge IA ────────────────────────────────────────────────────── */
.wc-badge-ia {
  display: inline-flex;
  align-items: center; gap: 7px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 50px;
  padding: 7px 14px 7px 10px;
  font-size: .78rem; font-weight: 500;
  color: #444; font-family: var(--fb);
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.wc-badge-ia .material-icons-round {
  font-size: 16px; color: #c0392b;
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* ── CV À 2 BALLES™ — bloc slogan rouge ─────────────────────────────── */
.wc-title {
    font-family: 'Georgia', var(--fd), serif;
    font-size: 2rem;
    font-weight: 900;
    font-style: italic;
    color: #ffffff;
    line-height: 1.1;
    background: rgba(255,255,255,0.10);
    padding: 15px 24px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    letter-spacing: -0.5px;
    transform: rotate(353deg);
}
.wc-title::after {
  content: '';
  position: absolute; inset: 7px;
  /* border: 2.5px dashed rgba(255,255,255,.55); */
  border-radius: 12px;
  pointer-events: none;
}
.wc-title em { color: #fff; font-style: italic; }

.wc-cta-primary {
  width: 100%; padding: 20px 24px; border: none; border-radius: 50px;
  background: #c0392b;
  color: white; font-family: var(--fb); font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; margin-bottom: 14px;
  box-shadow: 0 8px 28px rgba(192,57,43,.35); transition: all .2s;
  position: relative; overflow: visible;
}
.wc-price-badge {
    position: absolute;
    top: 27px;
    right: 34px;
    background: #309bedcc;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
    padding: 19px 8px;
    border-radius: 30px;
    border: 2px solid #fff2f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .20);
    pointer-events: none;
}
.wc-cta-primary:hover  { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(192,57,43,.5); }
.wc-cta-primary:active { transform: scale(.97); }
.wc-cta-primary svg { width: 22px; height: 22px; flex-shrink: 0; }
.wc-cta-primary .material-icons-round { font-size: 22px; }
.wc-cta-secondary {
  width: 100%; padding: 18px 24px; border: 2.5px solid rgba(255,255,255,.75);
  border-radius: 50px; background: rgba(255,255,255,.10);
  color: #ffffff; font-family: var(--fb); font-size: 1.05rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; margin-bottom: 14px; transition: all .2s;
}
.wc-cta-secondary:hover  { background: rgba(255,255,255,.18); }
.wc-cta-secondary:active { transform: scale(.97); }
.wc-cta-secondary svg { width: 20px; height: 20px; flex-shrink: 0; }
.wc-cta-secondary .material-icons-round { font-size: 20px; }
.wc-skip {
  font-size: 1rem; color: rgba(255,255,255,.55);
  background: none; border: none; cursor: pointer;
  font-family: var(--fb); padding: 4px; transition: color .15s;
  text-decoration: underline;
}
.wc-skip:hover { color: rgba(255,255,255,.85); }

.wc-legal-link {
  font-size: .72rem; color: rgba(255,255,255,.35);
  font-family: var(--fb);
  text-decoration: none;
  padding: 4px 8px;
  transition: color .15s;
  letter-spacing: .01em;
}
.wc-legal-link:hover { color: rgba(255,255,255,.65); }

/* ══════════════════════════════════════════════════════════════════════
   BOUTON "MON TÉLÉPHONE A COUPÉ" — welcome screen
══════════════════════════════════════════════════════════════════════ */
.wc-phone-cut {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; padding: 0;
  font-size: .82rem; color: rgba(255,255,255,.4);
  background: none; border: none; cursor: pointer;
  font-family: var(--fb); transition: color .15s;
  text-decoration: underline; text-underline-offset: 2px;
}
.wc-phone-cut:hover { color: rgba(255,255,255,.75); }
.wc-phone-cut .material-icons-round { font-size: 1rem; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════════════
   STEPPER 3 ÉTAPES — welcome screen
══════════════════════════════════════════════════════════════════════ */
.wc-stepper {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 0; width: 100%; margin: 14px 0 40px;
}
.wc-stepper-item {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; position: relative;
}
.wc-stepper-item:not(:last-child)::after {
  content: ''; position: absolute;
  top: 15px; left: calc(50% + 16px); right: calc(-50% + 16px);
  height: 1px; background: rgba(255,255,255,.2);
}
.wc-stepper-bubble {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgb(255 255 255 / 57%);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; margin-bottom: 7px; flex-shrink: 0;
}
.wc-stepper-label {
  font-size: 9px; color: rgba(255,255,255,.5);
  text-align: center; line-height: 1.4; padding: 0 3px;
}
.wc-stepper-label strong {
  display: block; font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,.85); margin-bottom: 1px;
}

/* ══════════════════════════════════════════════════════════════════════
   BOUTON "VOIR UN EXEMPLE" — welcome screen
══════════════════════════════════════════════════════════════════════ */
.wc-exemple-btn {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px; padding: 10px 14px;
  width: 100%; cursor: pointer; margin-bottom: 6px;
  transition: background .15s; font-family: var(--fb);
  text-decoration: none;
}
.wc-exemple-btn:hover  { background: rgba(255,255,255,.16); }
.wc-exemple-btn:active { background: rgba(255,255,255,.2); }
.wc-exemple-thumb {
  width: 36px; height: 46px;
  background: rgba(255,255,255,.08);
  border: 0.5px solid rgba(255,255,255,.15);
  border-radius: 6px; overflow: hidden;
  flex-shrink: 0; display: flex; flex-direction: column;
  padding: 5px; gap: 3px;
}
.wc-et-name  { height: 3px; background: rgba(255,255,255,.7); border-radius: 1px; width: 90%; }
.wc-et-red   { height: 2px; background: #c0392b; border-radius: 1px; width: 60%; }
.wc-et-line  { height: 2px; background: rgba(255,255,255,.2); border-radius: 1px; }
.wc-et-line.s { width: 70%; }
.wc-exemple-text { flex: 1; text-align: left; }
.wc-exemple-title {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.9); margin-bottom: 1px;
}
.wc-exemple-sub { font-size: 10px; color: rgba(255,255,255,.45); }
.wc-exemple-arrow {
  font-size: 18px; color: rgba(255,255,255,.4); flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   MODALE "EXEMPLE DE CV" — exemple-modal
══════════════════════════════════════════════════════════════════════ */
.exemple-modal-overlay {
  position: fixed; inset: 0; z-index: 2500;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.exemple-modal-overlay.open { opacity: 1; pointer-events: auto; }
.exemple-modal-sheet {
  background: var(--ui-surface, #f7f5f2);
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 540px;
  max-height: 88vh; overflow-y: auto;
  transform: translateY(40px);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.exemple-modal-overlay.open .exemple-modal-sheet {
  transform: translateY(0);
}
.exemple-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 0.5px solid var(--ui-border-light, #ede9e4);
  position: sticky; top: 0;
  background: var(--ui-surface, #f7f5f2);
  z-index: 1;
}
.exemple-modal-title {
  font-size: 16px; font-weight: 500;
  color: var(--ui-text-1, #1a1a1a);
}
.exemple-modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ui-surface-2, #f0ece8);
  border: none; color: var(--ui-text-2, #666);
  font-size: 16px; cursor: pointer; font-family: var(--fb);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.exemple-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.exemple-cv-card {
  background: var(--ui-card, #fff);
  border: 0.5px solid var(--ui-border, #e0dbd5);
  border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.ecv-top { display: flex; gap: 12px; align-items: flex-start; }
.ecv-avatar {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--ui-surface-2, #f0ece8);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ecv-avatar .material-icons-round { font-size: 22px; color: var(--ui-text-3, #aaa); }
.ecv-name { font-size: 14px; font-weight: 500; color: var(--ui-text-1, #1a1a1a); }
.ecv-role { font-size: 10px; color: var(--ui-red, #c0392b); margin: 1px 0 2px; }
.ecv-contact { font-size: 10px; color: var(--ui-text-3, #aaa); }
.ecv-divider { height: 0.5px; background: var(--ui-border-light, #ede9e4); }
.ecv-section-label {
  font-size: 9px; color: var(--ui-text-3, #aaa);
  letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.ecv-job-title { font-size: 11px; font-weight: 500; color: var(--ui-text-1, #1a1a1a); }
.ecv-job-date  { font-size: 9px; color: var(--ui-text-3, #aaa); margin: 1px 0 4px; }
.ecv-line { height: 1.5px; background: var(--ui-border-light, #ede9e4); border-radius: 1px; margin: 2px 0; }
.ecv-line.s { width: 65%; }
.ecv-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.ecv-tag {
  background: var(--ui-red-light, #fcecea);
  border: 0.5px solid var(--ui-red-border, #f0b8b0);
  border-radius: 6px; padding: 2px 8px;
  font-size: 9px; color: #993c1d;
}
.exemple-caption {
  font-size: 12px; color: var(--ui-text-3, #aaa);
  text-align: center; line-height: 1.6;
}
.exemple-caption strong { color: var(--ui-text-1, #1a1a1a); font-weight: 500; }
.exemple-modal-cta { padding: 0 20px 20px; }
.exemple-modal-cta-btn {
  width: 100%; height: 50px; border: none; border-radius: 50px;
  background: var(--ui-red, #c0392b); color: #fff;
  font-size: 15px; font-weight: 500; font-family: var(--fb);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: opacity .15s;
}
.exemple-modal-cta-btn:active { opacity: .85; }
.exemple-modal-cta-btn .material-icons-round { font-size: 20px; }

/* ══════════════════════════════════════════════════════════════════════
   MODAL "MON TÉLÉPHONE A COUPÉ" — phoneCutOverlay
══════════════════════════════════════════════════════════════════════ */
.pco-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.pco-overlay.open { opacity: 1; pointer-events: auto; }
.pco-sheet {
  background: #fff; border-radius: 20px 20px 0 0;
  width: 100%; max-width: 540px;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  max-height: 80vh; overflow-y: auto;
  transform: translateY(40px);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.pco-overlay.open .pco-sheet { transform: translateY(0); }

.pco-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.pco-header-icon {
  font-size: 1.8rem; color: #c0392b; flex-shrink: 0;
}
.pco-title {
  font-size: 1rem; font-weight: 700; color: #1a1a1a;
  font-family: var(--fb);
}
.pco-sub {
  font-size: .72rem; color: #888; margin-top: 2px;
}
.pco-close {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: #999; padding: 4px;
  display: flex; align-items: center;
}
.pco-close:hover { color: #333; }

.pco-status {
  padding: 20px 18px; font-size: .88rem; color: #888;
  text-align: center; font-family: var(--fb);
}
.pco-status.loading { color: #c0392b; }
.pco-status.empty   { color: #aaa; }
.pco-status.error   { color: #e57373; }

.pco-list { padding: 8px 12px 4px; }

.pco-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 10px;
  background: #fafafa; border: 1.5px solid #eee;
  border-radius: 12px; margin-bottom: 8px;
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
  font-family: var(--fb);
}
.pco-item:hover   { border-color: #c0392b; background: #fff5f5; }
.pco-item:active  { transform: scale(.98); }
.pco-item-icon    { font-size: 1.5rem; color: #c0392b; flex-shrink: 0; }
.pco-item-info    { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pco-item-name    { font-size: .92rem; font-weight: 700; color: #1a1a1a; }
.pco-item-title   { font-size: .75rem; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pco-item-age     { font-size: .68rem; color: #aaa; }
.pco-item-arrow   { font-size: 1.2rem; color: #ccc; flex-shrink: 0; }
.pco-item:hover .pco-item-arrow { color: #c0392b; }

.pco-footer {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 18px 16px;
  font-size: .68rem; color: #bbb;
  font-family: var(--fb);
  border-top: 1px solid #f4f4f4;
}

/* ══════════════════════════════════════════════════════════════════════
   IMPRESSION — bloc consolidé, unique, exhaustif
   Objectif : CV complet seul sur la page, rien d'autre
══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   THÈME FICHE — CV classique une colonne, sobre et universel
══════════════════════════════════════════════════════════════════════ */
.theme-fiche .cv-wrap {
  display: block;
  max-width: 760px;
  font-family: var(--fb);
}
.theme-fiche .cv-sidebar { display: none !important; }
.theme-fiche .cv-right   { display: block; }
.theme-fiche .cv-header  {
  background: #fff !important;
  border-bottom: 2px solid #2e75b6;
  padding: 28px 36px 20px;
}
.theme-fiche .cv-header::after { display: none; }
.theme-fiche .header-name  { color: #0f2137 !important; font-size: 2rem !important; }
.theme-fiche .header-title { color: #2e75b6 !important; font-style: normal !important; }
.theme-fiche .header-tagline { color: #5a6478 !important; }
.theme-fiche .contact-item   { color: #5a6478 !important; }
.theme-fiche .cv-main  { padding: 24px 36px 36px; }
.theme-fiche .accroche {
  font-size: .88rem; font-style: normal;
  color: #2a3245; line-height: 1.7;
  padding: 12px 16px;
  border-left: 3px solid #2e75b6;
  background: #f4f6f9;
  border-radius: 0 4px 4px 0;
  margin-bottom: 24px;
}
.theme-fiche .section-title {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #1a3a5c;
  border-bottom: 1.5px solid #1a3a5c;
  padding-bottom: 5px; margin-bottom: 16px; margin-top: 26px;
}
.theme-fiche .section-title::before { display: none; }
.theme-fiche .job { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed #e0e6ef; }
.theme-fiche .job:last-child { border-bottom: none; }
.theme-fiche .job-title  { font-size: .96rem; font-weight: 700; color: #0f2137; }
.theme-fiche .job-dates  { font-size: .7rem; color: #5a6478; }
.theme-fiche .job-company { font-size: .8rem; color: #2e75b6; font-weight: 600; }
.theme-fiche .job-bullets li { font-size: .78rem; color: #1a1f2e; }
.theme-fiche .job-stack  { font-size: .68rem; color: #5a6478; border-left: 2px solid #4a9fd4; background: #f4f6f9; padding: 4px 8px; }
@media print {

  /* ══ 0. Page & base ════════════════════════════════════════════════════ */
  html { font-size: 10pt !important; }
  html, body { background: white !important; margin: 0 !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* ── 1. Masquer UI ──────────────────────────────────────────────────── */
  .topbar, .filter-bar, .view-switcher, .nav-bar,
  .actions-overlay, .actions-sheet, .bottom-bar, .bottom-sheet,
  .bs-overlay, .theme-picker-overlay, .theme-picker-sheet,
  .editor-overlay, .pay-overlay, .credits-overlay,
  .ai-overlay, .export-overlay, .help-tooltip, .help-btn,
  .editor-guide, .drawer, .drawer-overlay, .drawer-fab,
  .metiers-panel, .metiers-toggle-btn, .metiers-overlay,
  .splashScreen, #splashScreen, #welcomeScreen, #partnerBanner,
  .tl-tooltip, .edit-bar, .gap-box, .badge-exemple,
  .versions-overlay, .versions-sheet, #print-sidebar-bg,
  .sidebar-overlay, .sidebar-drawer-toggle, .sidebar-drawer-close { display: none !important; }

  /* ── 2. Vues ────────────────────────────────────────────────────────── */
  .view    { display: none !important; }
  #view-cv { display: block !important; }

  /* Exception : impression depuis "Ma fiche" */
  body.printing-fiche #view-cv    { display: none !important; }
  body.printing-fiche #view-fiche { display: block !important; position: static !important; top: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; overflow: visible !important; }
  body.printing-fiche .fiche-wrap { box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 16mm 18mm !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  body.printing-fiche .topbar, body.printing-fiche .nav-bar,
  body.printing-fiche .filter-bar, body.printing-fiche .view-switcher,
  body.printing-fiche .bottom-bar, body.printing-fiche .edit-bar,
  body.printing-fiche #partnerBanner { display: none !important; }

  /* ── 3. CV wrap — quasi-identique à l'écran, juste reset marges/ombre ─ */
  body .cv-wrap {
    display: grid !important;
    grid-template-columns: 255px 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    background: linear-gradient(to right, #f0f4f9 255px, #ffffff 255px) !important;
    position: static !important;
  }
  body.theme-industrie .cv-wrap {
    grid-template-columns: 240px 1fr !important;
    background: linear-gradient(to right, var(--cv-sidebar-bg, #2c2c2c) 240px, var(--cv-body-bg, #ffffff) 240px) !important;
  }
  body.theme-fiche .cv-wrap {
    grid-template-columns: 1fr !important;
    background: #fff !important;
  }

  /* ── 4. Sidebar — reset drawer mobile uniquement ───────────────────── */
  body .cv-wrap .cv-sidebar {
    position: relative !important;
    top: auto !important; left: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    transition: none !important;
    z-index: auto !important;
    box-shadow: none !important;
    border-right: none !important;
    background: var(--cv-sidebar-bg, #2c2c2c) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 20px 18px !important;
  }
  body.theme-fiche .cv-wrap .cv-sidebar { display: none !important; }

  /* ── 5. cv-right — flex column comme en écran ───────────────────────── */
  body .cv-wrap .cv-right {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* ── 6. Header — conserver les couleurs écran exactement ───────────── */
  .cv-header {
    padding: 22px 28px 18px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    break-after: avoid !important; page-break-after: avoid !important;
    break-inside: avoid !important; page-break-inside: avoid !important;
  }

  /* Fiche — header */
  body.theme-fiche .cv-wrap .cv-right { margin-left: 0 !important; }

  /* ── 7. Main ─────────────────────────────────────────────────────────── */
  .cv-main { padding: 0 28px 24px !important; }

  /* ── 8. Sidebar — texte sur fond sombre industrie ────────────────────── */
  body.theme-industrie .cv-sidebar .sidebar-title        { color: var(--cv-accent, #e07b39) !important; }
  body.theme-industrie .cv-sidebar .skill-tag            { background: var(--cv-tag-bg, #3d3d3d) !important; color: var(--cv-tag-text, rgba(255,255,255,.85)) !important; border-color: var(--cv-tag-border, transparent) !important; }
  body.theme-industrie .cv-sidebar .skill-tag.star       { color: var(--cv-tag-text, var(--cv-sidebar-text)) !important; border-color: var(--cv-tag-border) !important; }
  body.theme-industrie .cv-sidebar .formation-name       { color: var(--cv-sidebar-text, rgba(255,255,255,.75)) !important; }
  body.theme-industrie .cv-sidebar .skill-group-label    { color: var(--cv-sidebar-text, rgba(255,255,255,.5)) !important; opacity:.6; }
  body.theme-industrie .cv-sidebar .sidebar-title::after { background: linear-gradient(90deg, var(--cv-accent, #e07b39), transparent) !important; }

  /* ── 9. Photo ────────────────────────────────────────────────────────── */
  .side-photo             { width: 78px !important; height: 78px !important; }
  .side-photo-placeholder { width: 70px !important; height: 70px !important; margin: 16px auto 14px !important; }

  /* ── 10. Skill tags — conserver les couleurs écran ─────────────────── */

  /* ── 11. Coupures de page ────────────────────────────────────────────── */
  .job, .formation-item, .portfolio-link, .fiche-job {
    page-break-inside: avoid !important; break-inside: avoid !important;
  }
  .sidebar-section {
    page-break-inside: auto !important; break-inside: auto !important;
  }
  .job { margin-top: 18px !important; padding-top: 14px !important; }
  .job:first-child { margin-top: 0 !important; padding-top: 0 !important; }
  .cv-header { break-after: avoid !important; }
  #cv-jobs { margin-top: 6mm; }

  /* ── 12. Liens ───────────────────────────────────────────────────────── */
  a[href]::after { content: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════
   CRÉER MON CV — ÉCRAN COMPLET (mode guidé + libre)
══════════════════════════════════════════════════════════════════════ */

/* Bouton tertiaire accueil */
.wc-cta-tertiary {
  width: 100%; padding: 17px 24px; border: 2.5px solid rgba(255,255,255,.45);
  border-radius: 50px; background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85); font-family: var(--fb); font-size: 1.05rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; margin-bottom: 14px; transition: all .2s;
}
.wc-cta-tertiary svg { width: 20px; height: 20px; flex-shrink: 0; }
.wc-cta-tertiary .material-icons-round { font-size: 20px; }
.wc-cta-tertiary:hover  { background: rgba(255,255,255,.16); }
.wc-cta-tertiary:active { transform: scale(.97); }

/* Overlay principal */
.create-screen {
  position: fixed; inset: 0; z-index: 1001;
  background: #f7f7f5;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  opacity: 0; transform: translateY(40px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.create-screen.hidden { display: none; }
.create-screen.open   { opacity: 1; transform: translateY(0); pointer-events: all; }
.create-screen.hiding { opacity: 0; transform: translateY(30px); pointer-events: none; }

.create-step {
  width: 100%; max-width: 520px; height: 100dvh;
  display: flex; flex-direction: column;
}
.create-step.hidden { display: none; }

/* ── CHOIX DU MODE ─────────────────────────────────────────────────── */
.cmc-wrap {
  align-items: stretch;
}
.cmc-top {
  padding: 52px 24px 0;
  display: flex; align-items: center;
}
.cmc-body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 16px 24px 48px; text-align: center; gap: 0;
}
.cmc-icon { font-size: 3.6rem; margin-bottom: 20px; }
.cmc-icon .material-icons-round { font-size: 3.6rem; color: #c0392b; }
.cmc-title {
  font-family: var(--fb); font-size: 2rem; font-weight: 800;
  color: #1a1a1a; letter-spacing: -.03em; margin-bottom: 8px;
}
.cmc-sub {
  font-size: 1rem; color: #888; margin-bottom: 36px; font-family: var(--fm);
}

.cmc-card {
  width: 100%; display: flex; align-items: center; gap: 16px;
  background: #fff; border: 2px solid #ebebeb;
  border-radius: 20px; padding: 20px 20px;
  cursor: pointer; text-align: left;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  margin-bottom: 14px;
}
.cmc-card:hover { border-color: #c0392b; box-shadow: 0 6px 24px rgba(192,57,43,.12); transform: translateY(-2px); }
.cmc-card:active { transform: scale(.98); }

.cmc-card--guided { border-color: #c0392b; box-shadow: 0 4px 18px rgba(192,57,43,.10); }

.cmc-card-icon { font-size: 2rem; flex-shrink: 0; }
.cmc-card-icon .material-icons-round { font-size: 2rem; color: #c0392b; }
.cmc-card-text { flex: 1; }
.cmc-card-text strong {
  display: block; font-family: var(--fb); font-size: 1.05rem; font-weight: 700;
  color: #1a1a1a; margin-bottom: 3px;
}
.cmc-card-text span {
  font-family: var(--fm); font-size: .88rem; color: #888;
}
.cmc-card-arrow { width: 20px; height: 20px; flex-shrink: 0; stroke: #ccc; }
.cmc-card:hover .cmc-card-arrow { stroke: #c0392b; }

/* ── MODE GUIDÉ — chat ──────────────────────────────────────────────── */
/* Barre de progression */
.cg-progress-bar {
  width: 100%; height: 4px; background: #ebebeb; flex-shrink: 0;
}
.cg-progress-fill {
  height: 100%; background: #c0392b; border-radius: 2px;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

/* Header */
.cg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 8px; flex-shrink: 0;
}
.cg-step-label {
  font-family: var(--fm); font-size: .82rem; color: #aaa; letter-spacing: .04em;
}
.cg-skip-btn {
  font-family: var(--fm); font-size: .88rem; color: #aaa;
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  transition: color .15s; border-radius: 8px;
}
.cg-skip-btn:hover { color: #555; background: #f0f0f0; }

/* Zone chat scrollable */
.cg-chat {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 20px 16px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}

/* Bulles */
.cg-bubble { display: flex; align-items: flex-start; gap: 12px; }
.cg-bubble--q { align-self: flex-start; max-width: 90%; }
.cg-bubble--a { align-self: flex-end; flex-direction: row-reverse; max-width: 85%; }

.cg-bubble-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 2px solid #ebebeb;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cg-bubble-content { display: flex; flex-direction: column; gap: 5px; }
.cg-bubble-text {
  background: #fff; border-radius: 0 16px 16px 16px;
  padding: 14px 18px;
  font-family: var(--fb); font-size: 1.15rem; font-weight: 700;
  color: #1a1a1a; line-height: 1.4;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1.5px solid #ebebeb;
}
.cg-bubble-tip {
  font-family: var(--fm); font-size: .82rem; color: #aaa;
  padding: 0 4px; line-height: 1.4;
}
.cg-bubble-answer {
  background: #c0392b; color: #fff;
  border-radius: 16px 0 16px 16px;
  padding: 12px 16px;
  font-family: var(--fm); font-size: .97rem; line-height: 1.5;
  word-break: break-word;
  box-shadow: 0 2px 10px rgba(192,57,43,.22);
}

/* Barre de saisie fixe en bas */
.cg-input-bar {
  flex-shrink: 0;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 16px 24px;
  background: #f7f7f5;
  border-top: 1px solid #ebebeb;
}
.cg-textarea-wrap { flex: 1; position: relative; }
.cg-answer-input {
  width: 100%; min-height: 48px; max-height: 140px;
  padding: 13px 52px 13px 18px;
  border: 2px solid #e0e0e0; border-radius: 24px;
  background: #fff; font-size: 1rem; font-family: var(--fm);
  color: #1a1a1a; line-height: 1.5; resize: none; overflow-y: auto;
  outline: none; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.cg-answer-input:focus {
  border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}
.cg-answer-input::placeholder { color: #c0c0c0; font-style: italic; }

/* Micro dans la barre guidée */
.cg-mic-btn {
  position: absolute; right: 8px; bottom: 6px;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: #1a1a1a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
  overflow: visible; flex-shrink: 0;
}
.cg-mic-btn svg { width: 17px; height: 17px; }
.cg-mic-btn.recording { background: #c0392b; }
.cg-mic-btn:not(.recording):hover { background: #333; }

/* Bouton envoyer */
.cg-send-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: #c0392b; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(192,57,43,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.cg-send-btn svg { width: 20px; height: 20px; margin-left: 2px; }
.cg-send-btn:hover  { background: #a93226; transform: scale(1.05); }
.cg-send-btn:active { transform: scale(.95); }

/* Indicateur micro live */
.cg-mic-live {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 20px 2px;
  font-family: var(--fm); font-size: .82rem; color: #c0392b;
  flex-shrink: 0;
}

/* Pulse micro universel */
.mic-pulse {
  display: none; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid #c0392b;
  animation: micRipple 1.2s ease-out infinite;
  pointer-events: none;
}
@keyframes micRipple {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ── MODE LIBRE ─────────────────────────────────────────────────────── */
.create-header {
  display: flex; align-items: center; padding: 52px 24px 0; flex-shrink: 0;
}
.create-body {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 28px 24px 32px; text-align: center; overflow-y: auto;
}
.create-emoji-big { font-size: 3.6rem; margin-bottom: 16px; line-height: 1; }
.create-title {
  font-family: var(--fb); font-size: 1.75rem; font-weight: 800;
  color: #1a1a1a; line-height: 1.2; margin-bottom: 10px; letter-spacing: -.02em;
}
.create-sub {
  font-size: 1rem; color: #666; line-height: 1.55;
  margin-bottom: 24px; max-width: 320px;
}
.create-back-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.create-back-btn:hover { background: #f0f0f0; }
.create-back-btn svg { width: 20px; height: 20px; stroke: #1a1a1a; }

.create-textarea-wrap {
  width: 100%; position: relative; margin-bottom: 14px;
}
.create-textarea {
  width: 100%; min-height: 200px;
  padding: 18px 60px 18px 18px;
  border: 2px solid #e0e0e0; border-radius: 20px;
  background: #fff; font-size: 1rem; font-family: var(--fm);
  color: #1a1a1a; line-height: 1.65; resize: vertical;
  outline: none; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.create-textarea:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.10); }
.create-textarea::placeholder { color: #c0c0c0; font-style: italic; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-6px); }
  40%,80%  { transform: translateX(6px); }
}
.create-textarea--shake {
  border-color: #c0392b !important;
  animation: shake .4s ease;
}
.cg-answer-input.create-textarea--shake {
  border-color: #c0392b !important;
  animation: shake .4s ease;
}

/* Micro mode libre */
.create-mic-btn {
  position: absolute; right: 12px; bottom: 12px;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #1a1a1a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.2); overflow: visible;
}
.create-mic-btn svg { width: 20px; height: 20px; }
.create-mic-btn.recording { background: #c0392b; }
.create-mic-btn:not(.recording):hover { background: #333; }
.mic-icon-stop.hidden, .mic-icon-normal.hidden { display: none; }

.create-mic-status {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: #c0392b; font-family: var(--fm);
  margin-bottom: 12px;
}
.mic-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #c0392b;
  animation: micBlink .9s ease-in-out infinite; flex-shrink: 0;
}
@keyframes micBlink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

.create-generate-btn {
  width: 100%; padding: 20px; border: none; border-radius: 18px;
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  color: #fff; font-family: var(--fb); font-size: 1.1rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; box-shadow: 0 8px 32px rgba(192,57,43,.38);
  transition: all .2s; margin-top: auto;
}
.create-generate-btn:hover  { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(192,57,43,.5); }
.create-generate-btn:active { transform: scale(.97); }

/* ── CHARGEMENT ─────────────────────────────────────────────────────── */
.create-loading-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 32px; text-align: center;
}
.create-loading-anim {
  position: relative; width: 100px; height: 100px; margin-bottom: 36px;
}
.create-loading-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid #e0e0e0; border-top-color: #c0392b;
  animation: createSpin 1s linear infinite;
}
@keyframes createSpin { to { transform: rotate(360deg); } }
.create-loading-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; animation: createPulseEmoji 2s ease-in-out infinite;
}
@keyframes createPulseEmoji { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.create-loading-title {
  font-family: var(--fb); font-size: 1.6rem; font-weight: 800;
  color: #1a1a1a; margin-bottom: 10px;
}
.create-loading-sub { font-size: .97rem; color: #777; line-height: 1.6; margin-bottom: 36px; }
.create-loading-steps {
  width: 100%; max-width: 300px;
  display: flex; flex-direction: column; gap: 12px;
}
.create-ls-item {
  padding: 12px 18px; border-radius: 12px;
  background: #f0f0f0; color: #aaa;
  font-family: var(--fm); font-size: .92rem;
  transition: all .5s ease;
}
.create-ls-item.active {
  background: #fff; color: #c0392b; font-weight: 700;
  box-shadow: 0 2px 12px rgba(192,57,43,.15);
}
.create-ls-item.done { background: #eefaf2; color: #27a05a; font-weight: 600; }
.create-ls-item.done::before { content: '✓ '; }
/* ════════════════════════════════════════════════════════════
   MES CVs — VERSIONING SHEET
   ════════════════════════════════════════════════════════════ */
.versions-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1199; opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.versions-overlay.open { opacity: 1; pointer-events: all; }

.versions-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-height: 85vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  z-index: 1200;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,1,.55,1);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.versions-sheet.open { transform: translateY(0); }

.versions-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #ddd; margin: 12px auto 0; flex-shrink: 0;
}

.versions-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 8px; flex-shrink: 0;
}
.versions-title {
  font-family: var(--fb); font-size: 1.25rem; font-weight: 800;
  color: #1a1a1a;
}

.versions-save-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 16px 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #1b8a4c, #27ae60);
  color: #fff; border: none; border-radius: 14px;
  font-family: var(--fb); font-size: 1rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(39,174,96,.35);
  transition: transform .15s, box-shadow .15s;
  text-align: left;
}
.versions-save-btn:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px rgba(39,174,96,.2);
}
.versions-save-btn .material-icons-round { font-size: 22px; }

.versions-list {
  overflow-y: auto; padding: 0 16px 20px;
  flex: 1; display: flex; flex-direction: column; gap: 12px;
}

.version-card {
  background: #f7f8fa;
  border-radius: 16px;
  border: 2px solid transparent;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
  position: relative;
}
.version-card:active { transform: scale(.98); }
.version-card.is-current {
  border-color: #1565c0;
  background: #e8f4fd;
}

.version-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  background: #e3edf7;
}
.version-card.is-current .version-card-icon {
  background: #1565c0;
  color: #fff;
}

.version-card-body { flex: 1; min-width: 0; overflow: hidden; }

/* Ligne titre + numéro de version */
.version-card-header-row {
  display: flex; align-items: center; gap: 6px;
}
.version-card-name {
  font-family: var(--fb); font-size: .95rem; font-weight: 700;
  color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
/* Badge numéro de version (v1, v2…) — masqué en mobile (doublon avec vc-meta-vnum) */
@media (max-width: 600px) {
  .vc-num-badge { display: none; }
}
.vc-num-badge {
  flex-shrink: 0;
  font-family: var(--fm, sans-serif);
  font-size: .65rem; font-weight: 700; letter-spacing: .02em;
  color: #6b7a99; background: #eef1f8;
  border-radius: 6px; padding: 1px 5px;
}
.version-card.is-current .vc-num-badge {
  color: #1565c0; background: #dceeff;
}
.version-card-meta {
  font-size: .8rem; color: #666; margin-top: 3px;
  display: flex; align-items: center; gap: 5px;
}
.version-card-meta strong {
  color: #333; font-weight: 600;
}

/* ── Badge numéro de version dans le header CV ──────────────────────── */
.header-version-badge {
  display: inline-flex;
  align-items: center;
  background: #dceeff;
  color: #1565c0;
  font-family: var(--fm, sans-serif);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 6px;
  margin: 4px 0 6px;
  width: fit-content;
}

/* ── Badge vX inline dans la meta de la version card ────────────────── */
.vc-meta-vnum {
  font-family: var(--fm, sans-serif);
  font-size: .65rem;
  font-weight: 700;
  color: #6b7a99;
  background: #eef1f8;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.version-card.is-current .vc-meta-vnum {
  color: #1565c0;
  background: #dceeff;
}
.version-card-current-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #1565c0; color: #fff;
  border-radius: 20px; font-size: .7rem; font-weight: 700;
  padding: 2px 9px; margin-top: 5px;
}

.version-card-actions {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.vc-action-btn {
  width: 34px; height: 34px; border-radius: 10px;
  border: none; background: #ececec;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, transform .1s;
  color: #555;
}
.vc-action-btn:active { transform: scale(.9); }
.vc-action-btn.load { background: #e8f4fd; color: #1565c0; }
.vc-action-btn.del  { background: #fdecea; color: #c0392b; }
.vc-action-btn .material-icons-round { font-size: 18px; }

.versions-empty { padding: 24px 20px 8px; flex-shrink: 0; }

/* ── Rename modal ── */
.versions-rename-modal {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px 20px 0 0; overflow: hidden;
}
.vrm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
}
.vrm-box {
  position: relative; background: #fff;
  border-radius: 18px; padding: 24px 22px 20px;
  width: calc(100% - 48px); max-width: 340px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.vrm-title {
  font-family: var(--fb); font-size: 1.1rem; font-weight: 800;
  margin-bottom: 14px; color: #1a1a1a;
}
.vrm-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 12px;
  border: 2px solid #e0e0e0; font-size: 1rem;
  font-family: var(--fm); outline: none;
  transition: border-color .18s;
}
.vrm-input:focus { border-color: #1565c0; }
.vrm-actions {
  display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end;
}
.vrm-cancel {
  padding: 10px 18px; border-radius: 10px;
  border: 2px solid #e0e0e0; background: #fff;
  font-family: var(--fb); font-size: .9rem; color: #555;
  cursor: pointer;
}
.vrm-confirm {
  padding: 10px 20px; border-radius: 10px;
  border: none; background: #1565c0; color: #fff;
  font-family: var(--fb); font-size: .9rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
}

/* Toast micro-feedback */
.version-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: #1a1a1a; color: #fff;
  padding: 10px 22px; border-radius: 30px;
  font-family: var(--fm); font-size: .92rem;
  z-index: 9999; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  transform: translateX(-50%) translateY(6px);
  display: flex; align-items: center; gap: 8px;
}
.version-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL LETTRE DE POSTULATION
   ═══════════════════════════════════════════════════════════════════════ */

.letter-modal-backdrop {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px);
}

.letter-modal-box {
  background: #fff;
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  padding: 28px 24px 36px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  overflow: hidden;
}

/* ── Écrans ── */
.letter-screen {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: 100%;
}

/* ── Écran 1 : lancement ── */
.letter-modal-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, #fff0f6, #fce4ec);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.letter-modal-icon .material-icons-round {
  font-size: 36px; color: #c0185a;
}
.letter-modal-title {
  font-family: var(--fb, sans-serif);
  font-size: 1.35rem; font-weight: 700;
  color: #1a1a2e; margin: 0; text-align: center;
}
.letter-modal-sub {
  font-family: var(--fm, sans-serif);
  font-size: 1rem; color: #555;
  text-align: center; margin: 0; line-height: 1.5;
}
.letter-info-box {
  width: 100%; background: #f7f9fc;
  border: 1.5px solid #e0e8f5; border-radius: 14px;
  padding: 13px 16px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fm, sans-serif);
  font-size: .98rem; color: #333;
}
.letter-info-icon { font-size: 20px !important; color: #1565c0; flex-shrink: 0; }

/* ── Boutons ── */
.letter-btn-primary {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, #c0185a, #e91e8c);
  color: #fff; border: none; border-radius: 16px;
  font-family: var(--fb, sans-serif); font-size: 1.1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 10px; box-shadow: 0 4px 16px rgba(192,24,90,.3);
  margin-top: 4px;
  transition: transform .15s, box-shadow .15s;
}
.letter-btn-primary:active {
  transform: scale(.97); box-shadow: 0 2px 8px rgba(192,24,90,.2);
}
.letter-btn-primary .material-icons-round { font-size: 22px; }

.letter-btn-cancel {
  background: none; border: none;
  font-family: var(--fm, sans-serif); font-size: .95rem; color: #888;
  cursor: pointer; padding: 8px; text-decoration: underline;
}

/* ── Écran 2 : chargement ── */
.letter-loading-orb {
  position: relative; width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  margin: 20px 0 8px;
}
.letter-loading-icon {
  font-size: 36px !important; color: #c0185a; z-index: 1;
}
.letter-loading-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #c0185a;
  animation: letter-spin 1s linear infinite;
}
@keyframes letter-spin { to { transform: rotate(360deg); } }

.letter-loading-label {
  font-family: var(--fb, sans-serif); font-size: 1.15rem;
  font-weight: 700; color: #1a1a2e; margin: 0; text-align: center;
}
.letter-loading-sub {
  font-family: var(--fm, sans-serif); font-size: .95rem;
  color: #888; margin: 0; text-align: center;
}

/* ── Écran 3 : résultat ── */
.letter-result-header {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.letter-result-icon { font-size: 26px !important; color: #1a8048; }
.letter-result-title {
  font-family: var(--fb, sans-serif); font-size: 1.15rem;
  font-weight: 700; color: #1a1a2e; margin: 0;
}

.letter-result-scroll {
  width: 100%;
  max-height: 44vh;
  overflow-y: auto;
  background: #f7f9fc;
  border: 1.5px solid #e0e8f5;
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.letter-result-text {
  font-family: var(--fm, sans-serif);
  font-size: 1rem; color: #222;
  line-height: 1.65; white-space: pre-wrap;
}
.letter-result-text p {
  margin: 0 0 1em;
}
.letter-result-text p:last-child { margin-bottom: 0; }

.letter-result-actions {
  display: flex; gap: 10px; width: 100%;
}
.letter-btn-copy {
  flex: 1; padding: 14px;
  background: #1565c0; color: #fff;
  border: none; border-radius: 14px;
  font-family: var(--fb, sans-serif); font-size: 1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: background .2s;
}
.letter-btn-copy:active { background: #0d47a1; }
.letter-btn-copy .material-icons-round { font-size: 20px; }

.letter-btn-regen {
  padding: 14px 18px;
  background: #f0f4f9; color: #555;
  border: 2px solid #e0e8f5; border-radius: 14px;
  font-family: var(--fm, sans-serif); font-size: .95rem;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: background .2s;
}
.letter-btn-regen:active { background: #e0e8f5; }
.letter-btn-regen .material-icons-round { font-size: 18px; }

/* ── Écran 4 : erreur ── */
.letter-error-icon-wrap .material-icons-round { font-size: 44px !important; }
.letter-error-msg {
  font-family: var(--fm, sans-serif); font-size: 1rem;
  color: #c0392b; text-align: center; margin: 0; line-height: 1.5;
}

/* ── Bouton "Ma lettre" dans le menu actions — badge rose ── */
.action-item-letter .action-icon {
  position: relative;
}
.action-item-letter::after {
  content: 'NOUVEAU';
  position: absolute; top: 4px; right: 4px;
  background: #c0185a; color: #fff;
  font-size: .55rem; font-weight: 700;
  padding: 2px 5px; border-radius: 6px;
  letter-spacing: .04em;
}
.action-item-letter { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   CHECKBOX "RÉDIGER MA LETTRE" — dans le panel poste visé
   ═══════════════════════════════════════════════════════════════════════ */

.ai-letter-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  margin-top: 10px;
  padding: 8px 14px;
  background: #fff8fd;
  border: 2px solid #f0c8e0;
  border-radius: 14px;
  box-sizing: border-box;
  user-select: none;
  transition: background .15s, border-color .15s;
}
.ai-letter-check:active { background: #fceef8; }

.ai-letter-check-box {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 2.5px solid #d0a0c0;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.ai-letter-check-box.checked {
  background: #c0185a;
  border-color: #c0185a;
}
.ai-letter-check-box .material-icons-round {
  font-size: 18px; color: #fff;
  transition: opacity .15s;
}

.ai-letter-check-text {
  display: flex; flex-direction: column; gap: 2px;
}
.ai-letter-check-title {
  font-family: var(--fb, sans-serif);
  font-size: 1rem; font-weight: 700;
  color: #1a1a2e; line-height: 1.3;
}
.ai-letter-check-hint {
  font-family: var(--fm, sans-serif);
  font-size: .85rem; color: #888; line-height: 1.3;
}

/* ── Checkbox rawMode (Modifs IA post-traitement) ── */
.ai-rawmode-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  margin-top: 10px;
  padding: 8px 14px;
  background: #f0f6ff;
  border: 2px solid #bfcfea;
  border-radius: 14px;
  box-sizing: border-box;
  user-select: none;
  transition: background .15s, border-color .15s;
}
.ai-rawmode-check:active { background: #e4edfc; }
.ai-rawmode-check[data-checked="1"] {
  background: #eaf1ff;
  border-color: #3b82f6;
}
.ai-rawmode-check-box {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 2.5px solid #93b4de;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.ai-rawmode-check[data-checked="1"] .ai-rawmode-check-box {
  background: #2563eb;
  border-color: #2563eb;
}
.ai-rawmode-check-box .material-icons-round {
  font-size: 18px; color: #fff;
  transition: opacity .15s;
}
.ai-rawmode-check-title {
  font-family: var(--fb, sans-serif);
  font-size: 1rem; font-weight: 700;
  color: #1a1a2e; line-height: 1.3;
}

/* ── Bouton "Affiner" sur les job cards (panel auto) ── */
.editor-job-card-refine {
  display: flex; align-items: center; gap: 5px;
  margin-top: 8px;
  padding: 5px 10px;
  background: none;
  border: 1.5px solid #d1d9e6;
  border-radius: 8px;
  font-family: var(--fm, sans-serif);
  font-size: .72rem; font-weight: 600;
  color: #3a6bc0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.editor-job-card-refine:active {
  background: #edf2ff;
  border-color: #3b82f6;
}
.editor-job-card-refine .material-icons-round { font-size: 13px; }

/* ── Modal édition par expérience ── */
.exp-edit-modal {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin: 0 0 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.exp-edit-modal-head {
  display: flex; align-items: center; justify-content: space-between;
}
.exp-edit-modal-title {
  font-family: var(--fb, sans-serif);
  font-size: .82rem; font-weight: 700; color: #0f2137;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; padding-right: 8px;
}
.exp-edit-modal-close {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: #6b7a8d; display: flex; align-items: center;
}
.exp-edit-modal-close .material-icons-round { font-size: 18px; }
.exp-edit-modal-ta {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid #d1d9e6; border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--fm, sans-serif); font-size: .8rem; color: #0f172a;
  background: #fff; resize: none; outline: none; line-height: 1.5;
  transition: border-color .15s;
}
.exp-edit-modal-ta:focus { border-color: #2563eb; }
.exp-edit-modal-status {
  font-size: .75rem; min-height: 16px;
  color: #6b7a8d; font-family: var(--fm, sans-serif);
}
.exp-edit-modal-status.error  { color: #c0392b; }
.exp-edit-modal-status.success { color: #1a8048; }
.exp-edit-modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
}
.exp-edit-cancel-btn {
  padding: 8px 14px; border-radius: 9px;
  border: 1.5px solid #d1d9e6; background: #fff;
  font-family: var(--fm, sans-serif); font-size: .78rem; color: #6b7a8d;
  cursor: pointer;
}
.exp-edit-apply-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  font-family: var(--fb, sans-serif); font-size: .8rem;
  font-weight: 700; color: #fff; cursor: pointer;
  transition: opacity .15s;
}
.exp-edit-apply-btn:disabled { opacity: .55; cursor: not-allowed; }
.exp-edit-apply-btn .material-icons-round { font-size: 15px; }
.exp-edit-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
  display: none; flex-shrink: 0;
}

/* ── Options lettre (ton + reconversion) dans l'ai-modal ── */
.ai-letter-opts {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
  background: #fdf4fa;
  border: 1.5px solid #f0c8e0;
  border-radius: 14px;
  padding: 12px 14px;
  box-sizing: border-box;
  margin-top: 2px;
}

.ai-lopt-row {
  display: flex; align-items: center; gap: 8px;
}
.ai-lopt-icon {
  font-size: 16px !important; color: #c0185a; flex-shrink: 0;
}
.ai-lopt-label {
  font-family: var(--fb, sans-serif);
  font-size: .83rem; font-weight: 700; color: #3a1a2e;
}

/* Pills ton */
.ai-tone-pills {
  display: flex; gap: 6px;
}
.ai-tone-pill {
  flex: 1;
  padding: 7px 4px;
  background: #fff;
  border: 1.5px solid #e0c0d8;
  border-radius: 9px;
  font-family: var(--fm, sans-serif); font-size: .8rem; color: #666;
  cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.ai-tone-pill.active {
  background: #c0185a; border-color: #c0185a;
  color: #fff; font-weight: 700;
}
.ai-tone-pill:active { transform: scale(.95); }

/* Rangée reconversion */
.ai-reconv-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer;
}
.ai-reconv-left {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.ai-reconv-hint {
  display: block;
  font-family: var(--fm, sans-serif); font-size: .75rem; color: #a07090;
  margin-top: 1px; line-height: 1.3;
}

/* Toggle reconversion */
.ai-reconv-toggle {
  position: relative; flex-shrink: 0;
  width: 42px; height: 24px;
  background: #d0b8c8; border-radius: 12px;
  transition: background .2s;
  cursor: pointer;
}
.ai-reconv-toggle.on { background: #c0185a; }
.ai-reconv-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s;
}
.ai-reconv-toggle.on .ai-reconv-knob { transform: translateX(18px); }

/* ── Zone angle stratégique ── */
.ai-angle-block {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%;
  background: #f0f4ff;
  border: 1.5px solid #c5d3f5;
  border-radius: 11px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.ai-angle-header { margin-bottom: 2px; }
.ai-angle-header .ai-lopt-icon { color: #3b5cc4; }
.ai-angle-header .ai-lopt-label { color: #1a2e6e; }
.ai-angle-optional {
  font-family: var(--fm, sans-serif);
  font-size: .72rem; font-weight: 500;
  color: #7a90cc; background: #dde6fa;
  border-radius: 5px; padding: 1px 6px;
  margin-left: 5px; vertical-align: middle;
  text-transform: lowercase; letter-spacing: .01em;
}
.ai-angle-textarea {
  width: 100%; min-height: 62px; max-height: 110px;
  resize: vertical;
  border: 1.5px solid #c5d3f5; border-radius: 8px;
  padding: 8px 10px; box-sizing: border-box;
  font-family: var(--fm, sans-serif); font-size: .83rem; color: #1a1a2e;
  background: #fff; line-height: 1.4;
  outline: none; transition: border-color .15s;
}
.ai-angle-textarea:focus { border-color: #3b5cc4; }
.ai-angle-textarea::placeholder { color: #aab3d0; font-style: italic; }
.ai-angle-count {
  font-family: var(--fm, sans-serif); font-size: .72rem;
  color: #9aabcc; text-align: right; margin-top: -2px;
}
.ai-angle-hint {
  font-family: var(--fm, sans-serif); font-size: .75rem;
  color: #6a7ebc; line-height: 1.35;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGES LETTRE sur les cartes de version
   ═══════════════════════════════════════════════════════════════════════ */

.vc-letter-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fm, sans-serif);
  font-size: .75rem; font-weight: 600;
  color: #c0185a;
  background: #fff0f6;
  border: 1px solid #f0c8e0;
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 3px;
  width: fit-content;
}
.vc-letter-badge.draft {
  color: #7b4f00;
  background: #fffbf0;
  border-color: #f5d580;
}
/* Badge "CV + Lettre liés" — liaison visuelle forte */
.vc-letter-badge.linked {
  color: #1a6e3c;
  background: #f0faf4;
  border-color: #8fd4b0;
  font-weight: 700;
}
/* Chip poste cible — identifiant du bucket CV+Lettre */
.vc-job-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--fm, sans-serif);
  font-size: .7rem; font-weight: 500;
  color: #4a5a7a;
  background: #f0f4fc;
  border: 1px solid #d0dcf0;
  border-radius: 20px;
  padding: 2px 7px;
  margin-top: 3px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Version card avec lettre : légère bordure gauche colorée pour identification rapide */
.version-card.has-letter {
  border-left: 3px solid #8fd4b0;
}

.vc-action-btn.letter {
  color: #c0185a;
  background: #fff0f6;
}
.vc-action-btn.letter:hover {
  background: #fce4ec;
}

/* ═══════════════════════════════════════════════════════════════════════
   ÉCRAN 5 — ÉDITION LETTRE
   ═══════════════════════════════════════════════════════════════════════ */

.letter-edit-area {
  width: 100%;
  min-height: 42vh;
  max-height: 52vh;
  border: 1.5px solid #e0e8f5;
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
  font-family: var(--fm, sans-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: #222;
  resize: vertical;
  background: #f7f9fc;
  -webkit-overflow-scrolling: touch;
}
.letter-edit-area:focus {
  outline: none;
  border-color: #1565c0;
  background: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════
   ZONE LETTRE — écran succès paiement
   ═══════════════════════════════════════════════════════════════════════ */

.pay-letter-loading {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px;
  background: #fff8fd;
  border: 2px solid #f0c8e0;
  border-radius: 14px;
  font-family: var(--fm, sans-serif);
  font-size: .95rem; color: #c0185a;
  box-sizing: border-box;
}
.pay-letter-spinner {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2.5px solid #f0c8e0;
  border-top-color: #c0185a;
  border-radius: 50%;
  animation: letter-spin 1s linear infinite;
}

.pay-letter-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #c0185a, #e91e8c);
  color: #fff; border: none; border-radius: 16px;
  font-family: var(--fb, sans-serif); font-size: 1.05rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(192,24,90,.3);
  transition: transform .15s;
  box-sizing: border-box;
}
.pay-letter-btn:active { transform: scale(.97); }
.pay-letter-btn .material-icons-round { font-size: 22px; }

.pay-letter-error {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  padding: 12px 14px;
  background: #fff5f5;
  border: 1.5px solid #fca5a5;
  border-radius: 12px;
  font-family: var(--fm, sans-serif);
  font-size: .88rem; color: #c0392b;
  box-sizing: border-box;
}
.pay-letter-error button {
  background: #c0392b; color: #fff;
  border: none; border-radius: 8px;
  padding: 5px 12px; font-size: .85rem;
  cursor: pointer; font-family: var(--fb, sans-serif);
}

/* ══════════════════════════════════════════════════════════════
   BOUTON PDF LETTRE
══════════════════════════════════════════════════════════════ */
.letter-btn-pdf {
  width: 100%;
  padding: 17px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  color: #fff;
  border: none; border-radius: 16px;
  font-family: var(--fb, sans-serif); font-size: 1.1rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 18px rgba(27,94,32,.35);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .01em;
}
.letter-btn-pdf:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px rgba(27,94,32,.25);
}
.letter-btn-pdf .material-icons-round { font-size: 24px; }

/* ══════════════════════════════════════════════════════════════
   IMPRESSION LETTRE — masque tout sauf la lettre
   Déclenché par downloadLetterPDF() via body.printing-letter
══════════════════════════════════════════════════════════════ */
@media print {
  body.printing-letter * { visibility: hidden !important; }
  body.printing-letter #letter-print-area,
  body.printing-letter #letter-print-area * { visibility: visible !important; }
  body.printing-letter #letter-print-area {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    padding: 36px 48px !important;
    background: #fff !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 12pt !important;
    line-height: 1.8 !important;
    color: #111 !important;
  }
  body.printing-letter #letter-print-area .lp-date {
    text-align: right;
    margin-bottom: 32px;
    font-size: 11pt;
    color: #444;
  }
  body.printing-letter #letter-print-area .lp-body {
    white-space: pre-wrap;
    font-size: 12pt;
    line-height: 1.85;
    color: #111;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PRINT FINAL — .printing-sidebar-top
   Classe ajoutée par doPrint() JS sur cv-wrap et cv-body.
   Spécificité de .cv-body.printing-sidebar-top (2 classes) bat
   .cv-body (1 classe) — annule display:block!important du drawer mobile.
   cv-header est déplacé dans cv-body par le JS avant l'impression.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Notif save (dans le drawer, bien visible) ───────────────────────── */
.ss-save-notif {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 14px 12px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 12px;
  color: #166534;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  font-family: var(--fb);
}
.ss-save-notif.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ss-save-notif-title {
  font-size: .85rem;
  font-weight: 700;
  color: #14532d;
}
.ss-save-notif-sub {
  font-size: .72rem;
  color: #166534;
  margin-top: 2px;
}

/* ── Bouton "Sauvegarder comme" ─────────────────────────────────────── */
.ss-btn-saveas {
  flex: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b7280;
  transition: all .15s;
  flex-shrink: 0;
}
.ss-btn-saveas:hover {
  border-color: var(--cv-accent, #2e75b6);
  color: var(--cv-accent, #2e75b6);
  background: rgba(46,117,182,.06);
}

/* ── Modal "Sauvegarder comme..." ────────────────────────────────────── */
.ss-name-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}
.ss-name-overlay.open { display: block; }

.ss-name-modal {
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1401;
  width: min(340px, 92vw);
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.2);
  transition: bottom .3s cubic-bezier(.22,1,.36,1);
  font-family: var(--fb);
}
.ss-name-modal.open {
  bottom: 0;
}
.ss-name-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1f2e;
  margin-bottom: 18px;
}
.ss-name-input {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  font-family: var(--fb);
  color: #1a1f2e;
  outline: none;
  transition: border-color .18s;
  box-sizing: border-box;
}
.ss-name-input:focus {
  border-color: var(--cv-accent, #2e75b6);
}
.ss-name-input::placeholder {
  color: #9ca3af;
}
.ss-name-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.ss-name-cancel {
  flex: 0;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: transparent;
  font-size: .85rem;
  color: #6b7280;
  cursor: pointer;
  font-family: var(--fb);
  transition: all .15s;
}
.ss-name-cancel:hover { background: #f9fafb; }
.ss-name-confirm {
  flex: 1;
  padding: 11px 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--cv-sidebar-bg, #1a2332), var(--cv-accent, #2e75b6));
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fb);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity .15s;
}
.ss-name-confirm:hover { opacity: .9; }

/* ── Palettes perso — delete btn ─────────────────────────────────────── */
.ss-palette-custom { position: relative; }
.ss-palette-del {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  z-index: 2;
  padding: 0;
}
.ss-palette-custom .ss-palette-del { opacity: .8; }
.ss-palette-custom:hover .ss-palette-del { opacity: 1; }


/* ── Badge style courant dans le header CV ─────────────────────────── */
.header-style-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fm);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.3);
  margin: 0 0 4px 0;
  cursor: pointer;
  width: fit-content;
  transition: background .15s;
}
.header-style-badge:hover {
  background: rgba(255,255,255,.28);
}
@media print {
  /* cv-wrap : flux normal (pas de grille parasitaire) */
  .cv-wrap.printing-sidebar-top {
    display: block !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
  }

  /* cv-body : grille 255px / reste — bat .cv-body { display:block } */
  .cv-body.printing-sidebar-top {
    display: grid !important;
    grid-template-columns: 255px 1fr !important;
    grid-template-rows: auto 1fr !important;
    align-items: start !important;
    width: 100% !important;
  }

  /* header déplacé dans cv-body : colonne droite, ligne 1 */
  .cv-body.printing-sidebar-top .cv-header {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }

  /* sidebar : colonne gauche toute la hauteur, annuler drawer */
  .cv-body.printing-sidebar-top .cv-sidebar {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    position: relative !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    transition: none !important;
    padding: 24px 20px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* main : colonne droite, ligne 2 */
  .cv-body.printing-sidebar-top .cv-main {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    width: auto !important;
  }

  /* Industrie : fond sombre conservé */
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar {
    background: #2c2c2c !important;
    color: rgba(255,255,255,.85) !important;
  }
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar .sidebar-title { color: #e07b39 !important; }
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar .skill-group-label { color: rgba(255,255,255,.6) !important; }
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar .skill-tag {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.82) !important;
    border-color: rgba(255,255,255,.2) !important;
  }
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar .skill-tag.star {
    background: var(--cv-tag-bg) !important;
    color: var(--cv-tag-text, var(--cv-sidebar-text)) !important;
    border-color: var(--cv-tag-border) !important;
  }
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar .formation-year { color: #e07b39 !important; }
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar .formation-name { color: rgba(255,255,255,.75) !important; }
  .theme-industrie .cv-body.printing-sidebar-top .cv-sidebar .portfolio-link { color: rgba(255,255,255,.75) !important; }

  /* Masquer le fond fixe inutile */
  body.sidebar-to-top-active #print-sidebar-bg { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   STYLE STUDIO v2 — FAB + Drawer latéral droit
   ════════════════════════════════════════════════════════════════════════ */

/* ── FAB (bouton flottant discret) ───────────────────────────────────── */
.ss-fab {
  display: none; /* caché par défaut — affiché uniquement via .ss-fab--visible */
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 10px);
  right: 14px;
  z-index: 1100;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ss-fab--visible {
  display: flex !important;
}
.ss-fab:hover  { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,.22); }
.ss-fab:active { transform: scale(.94); }
.ss-fab-inner {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ss-fab .material-icons-round {
  font-size: 20px;
  color: var(--cv-accent, #2e75b6);
  transition: color .3s ease;
}

/* ── Overlay (léger, semi-transparent) ───────────────────────────────── */
.ss-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1149;
  background: rgba(0,0,0,.15);
}
.ss-overlay.open { display: block; }

/* ── Drawer latéral droit ────────────────────────────────────────────── */
.ss-drawer {
  position: fixed;
  top: auto;           /* ancré en bas */
  bottom: 0;
  right: 0;
  z-index: 1150;
  width: min(360px, 90vw);   /* max sur mobile */
  height: 38vh;              /* ~1/3 hauteur mobile — modifiable par drag */
  min-height: 120px;
  max-height: none;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px 0 0 0;  /* coin haut-gauche arrondi */
  box-shadow: -4px -4px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.ss-drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
}

/* Desktop : 1/4 hauteur, collé en bas à droite */
@media screen and (min-width: 769px) {
  .ss-drawer {
    width: min(340px, 32vw);
    height: 28vh;
    min-height: 120px;
    max-height: none;
    bottom: 0;
    border-radius: 16px 0 0 0;
  }
  .ss-fab {
    bottom: 24px;
    right: 18px;
  }
}

/* ── Drag handle ─────────────────────────────────────────────────────── */
.ss-drag-handle {
  flex-shrink: 0;
  width: 100%;
  padding: 8px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ss-drag-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.18);
  transition: background .15s;
}
.ss-drag-handle:hover .ss-drag-bar,
.ss-drag-handle:active .ss-drag-bar {
  background: rgba(0,0,0,.35);
}

/* ── Header drawer ───────────────────────────────────────────────────── */
.ss-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.ss-drawer-title {
  font-family: var(--fb);
  font-size: .8rem;
  font-weight: 700;
  color: #1a1f2e;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ss-drawer-title-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cv-accent, #2e75b6), var(--cv-sidebar-bg, #1a2332));
}
.ss-drawer-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(0,0,0,.04);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #6b7280;
  font-size: 14px;
  transition: background .15s;
  padding: 0;
}
.ss-drawer-close:hover { background: rgba(0,0,0,.09); }

/* ── Corps scrollable ────────────────────────────────────────────────── */
.ss-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 8px 0 10px;
}

/* ── Palettes row ────────────────────────────────────────────────────── */
.ss-palettes {
  display: flex;
  gap: 7px;
  padding: 4px 14px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ss-palettes::-webkit-scrollbar { display: none; }

.ss-palette {
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9px;
  overflow: visible;
  border: 2px solid transparent;
  transition: border-color .18s, transform .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  position: relative;
}
.ss-palette:hover { transform: translateY(-2px); }
.ss-palette.active {
  border-color: var(--cv-accent, #2e75b6);
  box-shadow: 0 0 0 3px rgba(46,117,182,.2), 0 2px 8px rgba(0,0,0,.15);
  transform: translateY(-2px);
}
.ss-palette.active .ss-palette-name {
  color: var(--cv-accent, #2e75b6);
  font-weight: 700;
}
.ss-palette.active::after {
  content: "\2713";
  position: absolute;
  top: -7px; left: -7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cv-accent, #2e75b6);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  line-height: 1;
}

.ss-palette-preview {
  width: 56px; height: 36px; display: flex;
  border-radius: 7px;
  overflow: hidden;
}
.ss-palette-sidebar { height: 100%; width: 34px; }
.ss-palette-accent  { height: 100%; flex: 1; }
.ss-palette-bar     { height: 6px; background: #f3f4f6; }
.ss-palette-name {
  font-family: var(--fm);
  font-size: .55rem;
  color: #6b7280;
  text-align: center;
  padding: 2px 2px 4px;
  background: #fff;
  white-space: nowrap;
}

/* ── Section label ───────────────────────────────────────────────────── */
.ss-section-label {
  font-family: var(--fm);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 6px 14px 4px;
}

/* ── Lignes de contrôle ──────────────────────────────────────────────── */
.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  gap: 10px;
}
.ss-row-label {
  font-family: var(--fb);
  font-size: .78rem;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.ss-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Color swatch inline */
.ss-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .14s;
  flex-shrink: 0;
}
.ss-swatch:hover { transform: scale(1.12); }
.ss-swatch input[type=color] {
  position: absolute;
  inset: -8px;
  opacity: 0;
  cursor: pointer;
  width: 200%; height: 200%;
}
.ss-hex {
  font-family: var(--fm);
  font-size: .64rem;
  color: #9ca3af;
  min-width: 48px;
  text-align: right;
}

/* Font pills compactes */
.ss-font-pills {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-font-pills::-webkit-scrollbar { display: none; }
.ss-font-pill {
  font-size: .68rem;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-family: inherit;
  flex-shrink: 0;
}
.ss-font-pill.active {
  background: rgba(var(--cv-accent-rgb, 46,117,182),.1);
  color: var(--cv-accent, #2e75b6);
  border-color: var(--cv-accent, #2e75b6);
  font-weight: 600;
}

/* Taille stepper compact */
.ss-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ss-step {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: transparent;
  font-size: 16px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .14s;
  padding: 0;
}
.ss-step:hover { background: #f3f4f6; }
.ss-size-val {
  font-family: var(--fm);
  font-size: .78rem;
  font-weight: 600;
  color: #374151;
  min-width: 28px;
  text-align: center;
}

/* ── Pied du drawer ──────────────────────────────────────────────────── */
.ss-drawer-foot {
  display: flex;
  gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.ss-btn-reset {
  flex: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: transparent;
  font-size: .72rem;
  color: #6b7280;
  cursor: pointer;
  font-family: var(--fb);
  white-space: nowrap;
  transition: all .15s;
}
.ss-btn-reset:hover { border-color: #d1d5db; background: #f9fafb; }
.ss-btn-save {
  flex: 1;
  padding: 9px 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--cv-sidebar-bg, #1a2332), var(--cv-accent, #2e75b6));
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--fb);
  cursor: pointer;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ss-btn-save:hover  { opacity: .9; }
.ss-btn-save.saving { opacity: .6; pointer-events: none; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.ss-toast {
  position: fixed;
  bottom: 90px;
  right: 16px;
  background: #1a1f2e;
  color: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: .75rem;
  font-family: var(--fb);
  opacity: 0;
  pointer-events: none;
  z-index: 1300;
  transition: all .28s ease;
  transform: translateY(8px);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ss-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ── Accordéon niveau 2 ──────────────────────────────────────────────── */
.ss-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  font-family: var(--fb);
  font-size: .78rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  text-align: left;
  border-top: 1px solid rgba(0,0,0,.07);
  margin-top: 4px;
  transition: color .15s;
}
.ss-advanced-toggle:hover { color: #374151; }
.ss-advanced-chevron {
  font-size: 18px !important;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.ss-advanced-chevron.open { transform: rotate(180deg); }

.ss-advanced-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.22,1,.36,1);
}
.ss-advanced-panel.open {
  max-height: 400px;
}

/* Brancher --cv-body-text sur les textes du main CV */
.cv-main { color: var(--cv-body-text, #1a1f2e); }
.cv-main .job-title  { color: var(--cv-body-text, #1a1f2e); }
.cv-main .job-bullets li { color: var(--cv-body-text, #1a1f2e); }
.cv-main .accroche   { color: var(--cv-body-text, #1a1f2e); }
.cv-main .formation-name { color: var(--cv-body-text, #1a1f2e); }
/* ── Code promo dans modal paiement ───────────────────────────────── */
.pay-promo-row {
  margin: 4px 0 8px;
}
.pay-promo-input-wrap {
  display: flex;
  gap: 8px;
}
.pay-promo-input-wrap input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--border, #dde3ec);
  border-radius: 10px;
  font-size: .88rem;
  font-family: inherit;
  background: var(--bg, #fff);
  color: var(--text, #1a1a2e);
  outline: none;
  transition: border-color .2s;
  letter-spacing: .05em;
}
.pay-promo-input-wrap input:focus {
  border-color: var(--accent, #4a6fa5);
}
.pay-promo-input-wrap button {
  padding: 9px 14px;
  border: none;
  border-radius: 10px;
  background: var(--accent, #4a6fa5);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s;
}
.pay-promo-input-wrap button:disabled {
  opacity: .5;
  cursor: default;
}
.pay-promo-feedback {
  min-height: 1.3em;
  margin-top: 5px;
  font-size: .82rem;
  padding-left: 2px;
}
.pay-promo-feedback.ok  { color: #2e9e6b; }
.pay-promo-feedback.err { color: #c0392b; }
.pay-price-original {
  font-size: .85rem;
  color: var(--text-muted, #888);
  text-decoration: line-through;
  margin-right: 6px;
}