:root{
    --primary-color:#1e3a8a; --secondary-color:#2563eb;
    --right-text-color:#111827; --left-text-color:#ffffff;
    --line-height:1.4;
    --letter-spacing:0px; --base-font-size:13.5px;
    --a4-width:210mm; --a4-height:297mm; --cv-scale:1;
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Open Sans', sans-serif;
  }
  
  /* Reset RENFORCÉ */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:var(--body-font,'Raleway'),sans-serif;
    background:
      radial-gradient(1200px 800px at -10% -10%,#dbeafe 0%,transparent 60%),
      radial-gradient(900px 700px at 110% 10%,#e0e7ff 0%,transparent 55%),
      #e2e8f0;
    color:#0f172a;
    overflow-x:hidden;
  }
  
  /* Reset spécifique CV */
  .cv-preview * { margin: 0; padding: 0; box-sizing: border-box; line-height: inherit; }
  .cv-preview h1, .cv-preview h2, .cv-preview h3, .cv-preview p, .cv-preview ul, .cv-preview li { margin: 0; padding: 0; list-style: none; }
  
  /* Topbar */
  .topbar{
    position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; background:#ffffffcc; backdrop-filter:blur(10px); border-bottom:1px solid #e5e7eb;
  }
  .brand-link { text-decoration: none; color: inherit; }
  .brand{display:flex;align-items:center;gap:10px;color:#0f172a;font-weight:700;letter-spacing:.3px}
  .brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--secondary-color),#60a5fa);box-shadow:0 0 12px #60a5fa}
  .topbar-actions{display:flex; align-items: center; gap:12px;flex-wrap:wrap}
  .account-btn {
    display: inline-block; padding: 8px 18px; font-size: 14px; font-weight: 600;
    color: #8B5CF6; background-color: #f5f3ff; border: 2px solid #8B5CF6;
    border-radius: 12px; text-decoration: none; transition: all 0.2s ease-in-out;
  }
  .account-btn:hover { background-color: #e9e2ff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
  
  /* ─── Anti-saut : désactive le scroll-anchoring auto du navigateur
     sur tous les conteneurs scrollables de l'éditeur. Sinon il se bat
     avec notre restauration explicite de scrollTop dans snapCvHeight()
     → provoque le sautillement quand on tape ou clique près du bas. ─── */
  html, body, .side-panel, .preview-wrap, .right-column-stack,
  .tab-content, .font-dropdown { overflow-anchor: none; }

  /* Layout */
  .app-shell{ display:grid; grid-template-columns: 280px minmax(760px,1fr) 280px; gap:16px; padding:16px; max-width:1600px; margin:0 auto; }
  
  /* Side panel */
  .side-panel{
    width:280px; background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; overflow:hidden;
    position:sticky; top:84px; align-self:start; height:calc(100vh - 102px);
    box-shadow:0 12px 30px rgba(15,23,42,.12); min-width:0; display:flex; flex-direction:column;
  }
  .template-modal-trigger { flex-shrink: 0; margin: 8px 12px 0; box-sizing: border-box; width: calc(100% - 24px); }
  .tab{flex:1;padding:10px 12px;background:none;border:0;color:#334155;font-weight:600;cursor:pointer}
  .tab.active{color:#0f172a;background:#fff;border-bottom:2px solid var(--secondary-color)}
  .tab:focus{outline:2px solid #60a5fa;outline-offset:-2px}
  .tab-content{display:none;padding:12px;overflow:auto;flex:1;min-height:0; overscroll-behavior:contain;}
  .tab-content.active{display:block}
  .tabs{display:none;}
  .panel-block{
    background:#fff; border:1px solid #cbd5e1; border-radius:12px;padding:12px;margin-bottom:12px;
    box-shadow:0 4px 15px rgba(15,23,42,.08); overflow:visible; display:flex; flex-direction:column; gap:12px;
  }
  .panel-block h2{margin:0 0 6px;font-family:var(--heading-font,'Playfair Display'),serif;color:#0f172a;font-size:1.05rem; font-weight: 600;}
  .muted{color:#64748b;font-size:.9em;margin:.25rem 0 0}
  
  /* Templates grid */
  .cv-templates{display:grid;grid-template-columns:1fr;gap:10px}
  @media (min-width:520px){ .cv-templates{grid-template-columns:1fr} }
  .cv-template{border:1px solid #e6eaf1;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:transform .18s, box-shadow .18s, border-color .18s; display:block; text-align:left;}
  .cv-template:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(2,6,23,.06);border-color:#dbe2ee}
  .cv-template.active{border-color:#60a5fa; box-shadow:0 0 0 2px rgba(96,165,250,.25) inset}
  .template-preview{height:120px;background:#f0f5ff;border-bottom:1px solid #eef2f7; position: relative;}
  .template-preview img{width:100%;height:100%;object-fit:cover}
  .template-info{padding:8px 10px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
  .template-name{font-weight:600; color:#0f172a;font-family:var(--heading-font,'Playfair Display'),serif;font-size:.95em}
  
  /* Customization UI */
  .color-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
  .color-grid label{display:flex;align-items:center;justify-content:space-between;border:1px solid #e6eaf1;border-radius:10px;padding:8px 10px;background:#fff;gap:10px;min-width:0}
  .color-grid input[type="color"]{appearance:none;width:40px;height:26px;border-radius:10px;border:1px solid #e6eaf1;background:#fff;cursor:pointer;box-shadow:0 1px 2px rgba(2,6,23,.04) inset;flex-shrink:0}
  .color-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .preset-button{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e6eaf1;border-radius:10px;background:#fff;color:#334155;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cp{width:14px;height:14px;border-radius:999px;display:inline-block;border:1px solid rgba(0,0,0,.08)}
  .font-selector{border:1px solid #e6eaf1;border-radius:12px;background:#fff;padding:10px;max-width:100%; position:relative;}
  .font-dropdown{display:none;margin-top:8px;max-height:240px;overflow:auto;overscroll-behavior:contain; position:relative; z-index:5;}
  .font-preset-button{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid #eef2f7;border-radius:10px;background:#fff;color:#334155;cursor:pointer;margin-bottom:8px}
  .font-preview.heading-preview{font-weight:600;font-size:1rem;color:#0f172a}
  .font-preview.body-preview{color:#64748b;font-size:.9rem}
  .font-size-option,.spacing-option{display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,1fr) 56px;align-items:center;gap:8px;border:1px solid #e6eaf1;border-radius:10px;padding:8px;background:#fff}
  .font-size-option label,.spacing-option label{margin:0;color:#334155;font-size:.9em}
  .font-size-value,.spacing-value{min-width:52px;text-align:center;padding:3px 8px;border-radius:10px;background:#eef2ff;border:1px solid #e2e8f0;color:#1e3a8a;font-weight:700;font-size:.78em}
  input[type="range"]{width:100%;background:transparent;height:28px}
  input[type="range"]::-webkit-slider-runnable-track{height:6px;background:#e6eaf1;border-radius:999px}
  input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border-radius:50%;background:var(--secondary-color);border:2px solid #fff;box-shadow:0 1px 3px rgba(2,6,23,.15)}
  .shape-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .shape-options label{padding:8px 10px;border:1px solid #e6eaf1;border-radius:9999px;background:#fff;color:#334155;display:flex;align-items:center;justify-content:center;gap:8px; transition: opacity 0.3s;}
  .shape-options input[type="radio"]{accent-color:var(--secondary-color)}
  .toggle-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .toggle-list label{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid #e6eaf1;border-radius:10px;background:#fff;color:#334155}
  
  /* Aperçu */
  .preview-wrap{display:flex;align-items:flex-start;justify-content:center}
  .cv-preview{
    width:var(--a4-width); height:var(--a4-height); background:#fff; border-radius:0;
    outline:1px solid #cbd5e1; box-shadow:0 25px 50px rgba(15,23,42,.25);
    transform: scale(var(--cv-scale)); transform-origin: top center; overflow:visible; margin:0 auto;
    position: relative;
  }
  
  /* Contenu Principal */
  .cv-content{
    display:flex; height:100%; width:100%; align-items:stretch;
    line-height:var(--line-height); letter-spacing:var(--letter-spacing); font-size:var(--base-font-size);
    color:var(--right-text-color);
  }
  .cv-left-panel{
      flex:1; background:var(--primary-color);
      padding:18px;
      color:var(--left-text-color); overflow:visible;
  }
  .cv-right-panel{
      flex:2; padding:20px 26px;
      color:var(--right-text-color); overflow:visible; background:#fff;
  }
  
  /* Variantes */
  .cv-content.template-classic .cv-left-panel{background:#ffffff;color:#111827;border-right:1px solid var(--primary-color)}
  .cv-content.template-elegant .cv-left-panel{background:#f9f5f0;color:#1f2937;border-right:1px solid var(--secondary-color)}
  
  /* TECH */
  .cv-content.template-tech{ display:flex; background: linear-gradient(180deg, var(--primary-color), #0b132b); }
  .cv-content.template-tech .cv-left-panel, .cv-content.template-tech .cv-right-panel{ background: transparent; color: var(--left-text-color); }
  .cv-content.template-tech .cv-right-panel .cv-section h2{ color: var(--secondary-color); }
  .cv-content.template-tech .cv-right-panel .skill-level-bar, .cv-content.template-tech .cv-right-panel .level-segment{ background:rgba(255,255,255,.28); }
  .cv-content.template-tech .cv-right-panel .level-segment.active{ background:#ffffff; }
  
  /* Titres - Ajustement Harmonieux */
  .cv-left-panel .cv-section h2, .cv-right-panel .cv-section h2{
    font-family:var(--heading-font,'Playfair Display'),serif; font-size:.98em; 
    margin:0 0 8px;
    padding-bottom:4px; border-bottom:1px solid currentColor; font-weight: 600;
  }
  .cv-right-panel .cv-section h2{ color:var(--secondary-color); }
  
  /* En-tête */
  .cv-header{margin-bottom:10px;}
  .cv-header h1, .cv-header h2{
    margin:0 0 4px 0; font-family:var(--heading-font,'Playfair Display'),serif; color:var(--right-text-color);
  }
  .cv-header h1{font-size:1.8em; font-weight: 700; line-height: 1.1;}
  .cv-header h2{font-size:1.05em; font-weight:500;}
  
  /* Infos perso */
  .info-items{display:flex;flex-direction:column;gap:4px;}
  .cv-left-panel .info-items .editable{ margin:0; padding:0 2px; line-height:1.3; font-size: 0.95em; }
  
  /* Sections */
  .cv-section{margin-bottom:12px;}
  
  .skill-section,.language-section,.interests-section,.custom-section{display:flex;flex-direction:column;gap:5px;}
  .skill-item,.language-item,.interest-item,.custom-item{display:flex;flex-direction:column;gap:2px; position:relative;background:transparent}
  .skill-name,.language-name,.interest-name,.custom-item-name{font-weight:600;margin-bottom:2px; font-size: 0.95em;}
  .skill-level-container{width:100%;padding:2px 0}
  .custom-layout-text p.editable { line-height: 1.4; }
  
  .custom-section.columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .custom-section.columns-2 .custom-item { gap: 2px; }
  
  /* Barres */
  .cv-right-panel .skill-level-bar{display:flex;gap:3px;width:100%;height:5px;background:rgba(0,0,0,.15);border-radius:4px;overflow:hidden; cursor: pointer;}
  .cv-right-panel .level-segment{flex:1;height:100%;background:rgba(0,0,0,.15);cursor:pointer;transition:transform .08s}
  .cv-right-panel .level-segment.active{background:#111827}
  .cv-left-panel .skill-level-bar{ display:flex;gap:3px;width:100%;height:5px;border-radius:4px;overflow:hidden; background:rgba(255,255,255,.28); cursor: pointer;}
  .cv-left-panel .level-segment{ flex:1;height:100%; background:rgba(255,255,255,.28); cursor:pointer; transition:transform .08s; }
  .cv-left-panel .level-segment.active{ background:#ffffff; }
  
  /* Variantes gauche claire */
  .cv-content.template-classic .cv-left-panel .skill-level-bar, .cv-content.template-elegant .cv-left-panel .skill-level-bar{ background: rgba(0,0,0,.15); }
  .cv-content.template-classic .cv-left-panel .level-segment, .cv-content.template-elegant .cv-left-panel .level-segment{ background: rgba(0,0,0,.15); }
  .cv-content.template-classic .cv-left-panel .level-segment.active, .cv-content.template-elegant .cv-left-panel .level-segment.active{ background:#111827; }
  .level-segment:hover{transform:scaleY(1.2)}
  
  /* ── Espacements resserrés pour gagner de la place sur la page 1 ── */
  .experience-section,.education-section{display:flex;flex-direction:column;gap:4px;}
  .experience-item,.education-item{margin:0;padding:0 0 3px; border-bottom:1px solid #e5e7eb;position:relative;background:transparent}
  .experience-item:last-child,.education-item:last-child{border-bottom:none; padding-bottom: 0;}
  .experience-title,.education-degree{color:var(--right-text-color);font-size:1em;font-weight:700;font-family:var(--heading-font,'Playfair Display'),serif;margin-bottom:1px}
  .experience-company,.education-school{color:var(--right-text-color);font-weight:600;margin-bottom:1px; font-size: 0.9em;}

  /* DATES */
  .inline-dates{display:flex;align-items:center;gap:6px;color:var(--right-text-color);font-size:.85em;margin-bottom:2px;}
  .inline-dates .editable{display:inline-block;min-width:2ch}
  
  /* Description */
  .experience-description,.education-description{color:var(--right-text-color);line-height:1.45; font-size: 0.95em;}
  
  /* Boutons */
  .add-button{
    background:linear-gradient(180deg,#fff,#f8fafc); border:1.2px dashed #93c5fd;
    color:#2563eb; padding:6px 10px; border-radius:7px; cursor:pointer; width:100%; font-size:.85em; margin-top:8px;
    transition:transform .15s, box-shadow .15s, border-color .2s;
  }
  .add-button:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(2,6,23,.06);border-color:#60a5fa}
  .remove-button{
    position:absolute; top:0; right:0; background:none; border:none; color:#ef4444; cursor:pointer; padding:2px 4px; border-radius:6px; opacity:0; z-index:2;
    transition:opacity .2s, background-color .2s; font-size:15px; line-height:1;
  }
  .experience-item:hover .remove-button, .education-item:hover .remove-button, .skill-item:hover .remove-button, .language-item:hover .remove-button, .interest-item:hover .remove-button, .custom-item:hover .remove-button {opacity:1}
  
  /* Photo */
  .photo-container {
    width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px;
    border: 3px solid var(--secondary-color); cursor: pointer; transition: all 0.2s; position: relative; background: transparent;
  }
  .photo-container:hover{transform:scale(1.03)}
  .photo-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-container.shape-round{border-radius:50% !important}
  .photo-container.shape-square{border-radius:10px !important}
  
  /* Placeholders */
  .editable{min-height:1em;padding:1px 2px;border-radius:3px;cursor:text;outline:none;transition:background-color .2s}
  .cv-left-panel .editable:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.65)}
  .cv-right-panel .editable:empty::before{content:attr(data-placeholder);color:rgba(0,0,0,.45)}
  .cv-left-panel .custom-layout-text p.editable:empty::before { content:attr(data-placeholder); color:rgba(255,255,255,.65); }
  .cv-content.template-classic .cv-left-panel .editable:empty::before, .cv-content.template-elegant .cv-left-panel .editable:empty::before{color:rgba(0,0,0,.45)}
  .editable:hover{background:rgba(0,0,0,.04)}
  .cv-left-panel .editable:hover{background:rgba(255,255,255,.12)}
  .editable:focus{background:rgba(0,0,0,.07); outline:2px solid #a5b4fc; outline-offset:1px;}
  .cv-left-panel .editable:focus{background:rgba(255,255,255,.18)}
  .cv-left-panel .editable, .cv-left-panel .cv-section h2, .cv-left-panel .info-items p, .cv-left-panel .link-section, .cv-left-panel .skill-name, .cv-left-panel .language-name, .cv-left-panel .interest-name, .cv-left-panel .custom-item-name, .cv-left-panel .custom-layout-text p { color: var(--left-text-color) !important; caret-color: var(--left-text-color); }
  .cv-left-panel .custom-content.editable { line-height: 1.4; }
  .template{ display:none !important; }
  
  /* Actions */
  .download-pdf{
    appearance:none;border:0;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;
    font-weight:700;font-size:14px;background:var(--secondary-color);color:#fff;box-shadow:0 10px 22px rgba(2,6,23,.15), 0 0 0 1px rgba(0,0,0,.06) inset;cursor:pointer;
  }
  .ghost-btn{appearance:none;border:1px solid #e5e7eb;background:#fff;color:#0f172a;padding:9px 12px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer}
  .ghost-btn:hover{border-color:#cbd5e1}
  
  /* Side Panels */
  .right-column-stack { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; }
  .personnalisation-2-panel, .tips-panel{ width:280px; position: static; align-self:start; height:auto; display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
  .tips-panel { flex-shrink: 1; min-height: 0; overflow: hidden; }
  .tips-block{background:#fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 4px 15px rgba(15,23,42,.08);}
  .tips-block.collapsed .tips-grid { display: none; }
  .tips-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0}
  .tip-card{display:flex;align-items:center;gap:6px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:6px 8px;font-size:.85em;color:#334155}
  .tip-card span{flex:1;line-height:1.3}
  .quick-add{display:flex;flex-wrap:wrap;gap:8px}
  .visually-hidden-file{ position:absolute; left:-99999px; width:1px; height:1px; opacity:0; pointer-events:none; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  
  @media (max-width: 1180px){ .app-shell{grid-template-columns: 280px 1fr; } .right-column-stack { order: 2; } .personnalisation-2-panel { order: 1; position: static; width: auto; } .tips-panel{ order: 2; position:static; width:auto} }
  @media (max-width: 880px){ .app-shell{grid-template-columns:1fr} .side-panel{position:static;height:auto} .cv-preview{--cv-scale:.85} .right-column-stack { width: 100%; } }
  @media (max-width: 720px){ .cv-preview{--cv-scale:.75} }
  @media (max-width: 600px){ .cv-preview{--cv-scale:.68} }
  
  /* Styles spécifiques pour compacter les titres à bulles (notamment Bubbles) */
  .cv-content.template-bubbles .cv-section h2 {
      padding: 4px 14px;
      border-radius: 16px;
      font-weight: 600;
      font-size: 0.85em;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      min-width: 80px;
  }
  .cv-content.template-bubbles .cv-header { margin-bottom: 10px; padding-top: 10px; }
  .cv-content.template-bubbles .cv-header h1 { font-size: 2em; letter-spacing: 0.5px; }
  .cv-content.template-bubbles .cv-left-panel { padding: 16px; }
  .cv-content.template-bubbles .cv-right-panel { padding: 20px; }
  .cv-content.template-bubbles .photo-container { margin: 0 auto 16px; width: 110px; height: 110px; }
  
  /* Styles spécifiques pour compacter les titres "Chic" */
  .cv-content.template-chic .cv-right-panel .cv-section h2 {
      padding: 3px 10px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 0.9em;
  }
  .cv-content.template-chic .cv-header { padding: 14px 20px; margin-bottom: 12px; }
  .cv-content.template-chic .cv-section { padding: 0 20px; margin-bottom: 10px; }
  
  /* Styles spécifiques pour compacter "Compact" */
  .cv-content.template-compact .cv-left-panel { padding: 14px; }
  .cv-content.template-compact .cv-right-panel { padding: 14px 18px; }
  .cv-content.template-compact .cv-header { margin-bottom: 10px; padding-bottom: 8px; }
  .cv-content.template-compact .cv-right-panel .cv-section h2 { margin-bottom: 8px; font-size: 1em; }
  
  /* Autres ajustements */
  .cv-content.template-tech .cv-right-panel{ color: var(--left-text-color) !important; }
  .cv-left-panel .add-button{ color:#2563eb !important; background:linear-gradient(180deg,#fff,#f8fafc) !important; border-color:#93c5fd !important; }
  .cv-left-panel .editable:empty::before{ color:rgba(255,255,255,.70) !important; }
  .cv-content.template-tech .cv-right-panel .editable:empty::before{ color:rgba(255,255,255,.70) !important; }
  .cv-content.template-classic .cv-left-panel, .cv-content.template-elegant .cv-left-panel { color:#111827 !important; }
  .cv-content.template-classic .cv-left-panel .editable, .cv-content.template-elegant .cv-left-panel .editable { color:#111827 !important; }
  .cv-content.template-classic .cv-left-panel .editable:empty::before, .cv-content.template-elegant .cv-left-panel .editable:empty::before { color:rgba(0,0,0,.45) !important; }
  .panel-block{ display:flex; flex-direction:column; gap:12px; }
  .color-grid,.color-presets,.shape-options,.toggle-list,.grid-2{ display:flex !important; flex-direction:column !important; gap:10px !important; }
  .color-grid label,.shape-options label,.toggle-list label,.preset-button{ width:100%; justify-content:space-between; }
  .font-size-option,.spacing-option{ display:flex; flex-direction:column; gap:6px; }
  .pdf-generating-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(249, 250, 251, 0.8); backdrop-filter: blur(4px); z-index: 10000; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; font-weight: bold; color: #111827; }
  body.print-mode .topbar, body.print-mode .side-panel, body.print-mode .tips-panel, body.print-mode .personnalisation-2-panel, body.print-mode .right-column-stack { display: none; }
  body.print-mode .app-shell { display: block; padding: 0; }
  body.print-mode .preview-wrap { padding: 0; margin: 0; }
  body.print-mode .cv-preview { transform: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; }
  body.print-mode .add-button, body.print-mode .remove-button { display: none !important; }
  
  /* Infographic */
  .cv-content.template-infographic { flex-direction: row-reverse; }
  .cv-content.template-infographic .cv-left-panel { flex: 0 0 35%; background-color: #f8fafc; color: #1e293b; border-left: 2px solid var(--primary-color); }
  .cv-content.template-infographic .cv-right-panel { background-color: #ffffff; }
  .cv-content.template-infographic .cv-header { text-align: center; padding: 12px; border-bottom: 2px solid var(--secondary-color); margin-bottom: 10px; }
  .cv-content.template-infographic .cv-left-panel .photo-container { width: 120px; height: 120px; border-width: 4px; border-color: var(--primary-color); margin-bottom: 16px; }
  .cv-content.template-infographic .cv-left-panel, .cv-content.template-infographic .cv-left-panel .editable { color: #1e293b !important; }
  .cv-content.template-infographic .cv-left-panel .editable:empty::before { color: rgba(0,0,0,.45) !important; }
  .cv-content.template-infographic .cv-left-panel .cv-section h2 { color: var(--primary-color) !important; border-bottom: 2px solid var(--secondary-color); padding-bottom: 4px; margin-bottom: 6px; }
  .cv-content.template-infographic .cv-left-panel .skill-level-bar { background: rgba(0,0,0,.15); }
  .cv-content.template-infographic .cv-left-panel .level-segment { background: rgba(0,0,0,.15); }
  .cv-content.template-infographic .cv-left-panel .level-segment.active { background: var(--primary-color); }
  
  /* Personnalisation 2 */
  /* CORRECTION : Masquer les barres - sélecteur plus spécifique avec !important */
  .cv-content.hide-progress-bars .skill-level-container { display: none !important; }
  
  /* CORRECTION Style Ligne : gap 0 ET segments inactifs transparents */
  .cv-content.style-bar-thin .skill-level-bar { gap: 0; height: 4px; border-radius: 2px; }
  .cv-content.style-bar-thin .level-segment { background-color: transparent !important; }
  
  /* Panneaux droits (fond clair) → segment actif en primary-color visible sur fond blanc */
  .cv-content.style-bar-thin .cv-right-panel .skill-level-bar { background-color: rgba(0,0,0,.12); }
  .cv-content.style-bar-thin .cv-right-panel .level-segment.active { background-color: var(--primary-color) !important; }
  /* Panneaux gauches (fond = primary-color sombre) → segment actif blanc */
  .cv-content.style-bar-thin .cv-left-panel .skill-level-bar { background-color: rgba(255,255,255,.25); }
  .cv-content.style-bar-thin .cv-left-panel .level-segment.active { background-color: #ffffff !important; }
  /* Templates où le panneau gauche EST clair/blanc → segment actif en primary-color */
  .cv-content.style-bar-thin.template-classic .cv-left-panel .skill-level-bar,
  .cv-content.style-bar-thin.template-elegant .cv-left-panel .skill-level-bar,
  .cv-content.style-bar-thin.template-infographic .cv-left-panel .skill-level-bar { background: rgba(0,0,0,.12); }
  .cv-content.style-bar-thin.template-classic .cv-left-panel .level-segment.active,
  .cv-content.style-bar-thin.template-elegant .cv-left-panel .level-segment.active,
  .cv-content.style-bar-thin.template-infographic .cv-left-panel .level-segment.active { background: var(--primary-color) !important; }
  /* Tech : panneau droit sombre → actif blanc */
  .cv-content.style-bar-thin.template-tech .cv-right-panel .skill-level-bar { background-color: rgba(255,255,255,.25); }
  .cv-content.style-bar-thin.template-tech .cv-right-panel .level-segment.active { background-color: #ffffff !important; }
  /* Reflex : les deux panneaux clairs → primary-color teal */
  .cv-content.style-bar-thin.template-reflex .skill-level-bar { background: rgba(0,0,0,.12); }
  .cv-content.style-bar-thin.template-reflex .level-segment.active { background-color: var(--primary-color) !important; }
  /* Bubbles : fond uniforme clair → primary-color */
  .cv-content.style-bar-thin.template-bubbles .skill-level-bar { background: rgba(0,0,0,.10); }
  .cv-content.style-bar-thin.template-bubbles .level-segment.active { background-color: var(--primary-color) !important; }
  /* Bordered : fond uniforme clair → primary-color */
  .cv-content.style-bar-thin.template-bordered .skill-level-bar { background: rgba(0,0,0,.10); }
  .cv-content.style-bar-thin.template-bordered .level-segment.active { background-color: var(--primary-color) !important; }
  /* Cyber : fond sombre → primary-color cyan */
  .cv-content.style-bar-thin.template-cyber .skill-level-bar { background-color: rgba(255,255,255,.10); }
  .cv-content.style-bar-thin.template-cyber .level-segment.active { background-color: var(--primary-color) !important; }
  /* Geometric : style Ligne */
  .cv-content.style-bar-thin.template-geometric .cv-left-panel .skill-level-bar { background-color: rgba(255,255,255,.25); height: 4px; gap: 0; border-radius: 2px; }
  .cv-content.style-bar-thin.template-geometric .cv-left-panel .level-segment { border-right: none !important; background-color: transparent !important; }
  .cv-content.style-bar-thin.template-geometric .cv-left-panel .level-segment.active { background-color: #ffffff !important; }
  
  /* Chic */
  .cv-content.template-chic .cv-left-panel { background: var(--primary-color); color: #ffffff; flex: 0 0 35%; padding-top: 24px; }
  .cv-content.template-chic .photo-container { border-color: #ffffff; background: #ffffff; border-width: 4px; width: 120px; height: 120px; }
  .cv-content.template-chic .cv-left-panel .cv-section h2 { color: var(--secondary-color) !important; border-bottom: none; font-family: var(--body-font,'Raleway'),sans-serif; font-weight: 700; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 16px; }
  .cv-content.template-chic .cv-left-panel .cv-section.infos h2, .cv-content.template-chic .cv-left-panel .cv-section.links h2 { font-size: 0.9em; }
  .cv-content.template-chic .cv-left-panel .cv-section.infos .info-items { gap: 6px; font-size: 0.9em; }
  .cv-content.template-chic .cv-left-panel .skill-level-bar { background: rgba(255,255,255,.2); }
  .cv-content.template-chic .cv-left-panel .level-segment { background: rgba(255,255,255,.2); }
  .cv-content.template-chic .cv-left-panel .level-segment.active { background: var(--secondary-color); }
  .cv-content.template-chic.style-bar-thin .cv-left-panel .skill-level-bar { background-color: rgba(255,255,255,.2); }
  .cv-content.template-chic.style-bar-thin .cv-left-panel .level-segment { background-color: transparent; }
  .cv-content.template-chic.style-bar-thin .cv-left-panel .level-segment.active { background-color: var(--secondary-color); }
  .cv-content.template-chic .cv-section.langs .language-item, .cv-content.template-chic .cv-section.interests .interest-item, .cv-content.template-chic .cv-section.custom .custom-item { position: relative; }
  .cv-content.template-chic .cv-section.langs .language-name, .cv-content.template-chic .cv-section.interests .interest-item, .cv-content.template-chic .cv-section.custom .custom-item-name { font-weight: 400; padding-left: 16px; }
  .cv-content.template-chic .cv-section.langs .language-item::before, .cv-content.template-chic .cv-section.interests .interest-item::before, .cv-content.template-chic .cv-section.custom .custom-item::before { content: '■'; color: var(--secondary-color); position: absolute; left: 0; top: 0.35em; font-size: 0.8em; display: block; }
  .cv-content.template-chic .cv-section.langs .language-item.template::before, .cv-content.template-chic .cv-section.interests .interest-item.template::before, .cv-content.template-chic .cv-section.custom .custom-item.template::before { display: none; }
  .cv-content.template-chic:not(.hide-progress-bars) .cv-section.langs .language-item::before { display: none; }
  .cv-content.template-chic:not(.hide-progress-bars) .cv-section.langs .language-name { padding-left: 0; }
  .cv-content.template-chic:not(.hide-progress-bars) .cv-section.skills .skill-item::before { display: none; }
  .cv-content.template-chic:not(.hide-progress-bars) .cv-section.skills .skill-name { padding-left: 0; }
  .cv-content.template-chic .cv-right-panel { background: #ffffff; color: var(--primary-color); padding: 0; }
  .cv-content.template-chic .cv-header { background: var(--secondary-color); padding: 16px 22px; margin: 0 0 10px 0; }
  .cv-content.template-chic .cv-header h1 { color: #ffffff !important; font-size: 2em; font-family: var(--body-font,'Raleway'),sans-serif; font-weight: 700; text-transform: uppercase; }
  .cv-content.template-chic .cv-header h2 { color: #ffffff !important; font-weight: 400; font-size: 1.1em; }
  .cv-content.template-chic .cv-section { padding: 0 20px; margin-bottom: 10px; }
  .cv-content.template-chic .cv-right-panel .cv-section h2 { background: var(--secondary-color); color: #ffffff; padding: 6px 16px; border-bottom: none; display: inline-block; border-radius: 6px; font-family: var(--body-font,'Raleway'),sans-serif; font-size: 0.95em; font-weight: 700; letter-spacing: 0.2px; text-transform: none; }
  .cv-content.template-chic .experience-item, .cv-content.template-chic .education-item { border-bottom: 1px solid #eef2f7; padding-bottom: 8px; margin-bottom: 8px; }
  
  /* Compact */
  .cv-content.template-compact .cv-left-panel { background: var(--primary-color); flex: 0 0 32%; padding: 16px; color: #ffffff; }
  .cv-content.template-compact .cv-right-panel { background: #ffffff; padding: 16px 22px; }
  .cv-content.template-compact .photo-container { width: 120px; height: 120px; border: 4px solid var(--secondary-color); float: right; margin-left: 20px; margin-bottom: 10px; }
  .cv-content.template-compact .cv-header { border-bottom: 3px solid var(--secondary-color); padding-bottom: 8px; margin-bottom: 12px; }
  .cv-content.template-compact .cv-header h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 2.2em; color: var(--primary-color); }
  .cv-content.template-compact .cv-header h2 { color: #555; font-size: 1.1em; font-weight: 500; letter-spacing: 1px; margin-top: 5px; }
  .cv-content.template-compact .cv-left-panel .cv-section h2 { color: var(--secondary-color) !important; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 5px; font-weight: 700; text-transform: uppercase; font-size: 0.95em; }
  .cv-content.template-compact .cv-left-panel .editable { color: rgba(255,255,255,0.9) !important; }
  .cv-content.template-compact .cv-right-panel .cv-section h2 { color: var(--primary-color) !important; border-left: 4px solid var(--secondary-color); padding-left: 10px; border-bottom: none; font-weight: 800; text-transform: uppercase; font-size: 1.1em; margin-bottom: 8px; }
  .cv-content.template-compact .experience-item, .cv-content.template-compact .education-item { padding-left: 15px; border-left: 2px solid #f0f0f0; margin-bottom: 8px; padding-bottom: 5px; }
  .cv-content.template-compact .experience-title { color: var(--primary-color); font-weight: 700; }
  .cv-content.template-compact .experience-company { font-weight: 600; color: #555; }
  
  /* Architect */
  .cv-content.template-architect .cv-left-panel { background: #1c1c1c; color: #ffffff; flex: 0 0 30%; padding: 20px 14px; }
  .cv-content.template-architect .cv-right-panel { background: #ffffff; padding: 20px 22px; }
  .cv-content.template-architect .cv-header { margin-bottom: 12px; text-align: left; }
  .cv-content.template-architect .cv-header h1 { color: #ffffff !important; font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 2.5em; line-height: 0.9; margin-bottom: 10px; }
  .cv-content.template-architect .cv-header h2 { color: var(--secondary-color) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9em; }
  .cv-content.template-architect .photo-container { border: 5px solid var(--secondary-color); margin-bottom: 12px; }
  .cv-content.template-architect .cv-left-panel .cv-section h2 { color: #fff !important; border-bottom: 2px solid var(--secondary-color); padding-bottom: 5px; margin-bottom: 8px; text-transform: uppercase; font-weight: 700; font-size: 0.9em; }
  .cv-content.template-architect .cv-left-panel .editable { color: #d1d5db !important; }
  .cv-content.template-architect .cv-left-panel .skill-level-bar { background: rgba(255,255,255,0.2); height: 6px; }
  .cv-content.template-architect .cv-left-panel .level-segment.active { background: var(--secondary-color); }
  .cv-content.template-architect .cv-right-panel .cv-section h2 { background: #1c1c1c; color: var(--secondary-color) !important; padding: 8px 15px; display: inline-block; text-transform: uppercase; font-weight: 800; font-size: 1.1em; margin-bottom: 6px; border: none; transform: skewX(-10deg); }
  .cv-content.template-architect .cv-right-panel .experience-item, .cv-content.template-architect .cv-right-panel .education-item { border-left: 4px solid var(--secondary-color); padding-left: 20px; margin-bottom: 10px; padding-bottom: 0; border-bottom: none; }
  .cv-content.template-architect .experience-title, .cv-content.template-architect .education-degree { font-size: 1.2em; font-weight: 800; text-transform: uppercase; }
  .cv-content.template-architect .experience-company { color: #555; font-style: italic; font-weight: 600; }
  
  /* Créatif */
  .cv-content.template-creative .cv-left-panel { background: var(--primary-color); border-top-right-radius: 60px; margin-right: 10px; padding-top: 30px; }
  .cv-content.template-creative .cv-right-panel { position: relative; padding-top: 30px; }
  .cv-content.template-creative .cv-right-panel::before { content: ''; position: absolute; top: -30px; right: -30px; width: 200px; height: 200px; background: var(--secondary-color); border-radius: 0 0 0 100%; z-index: 0; }
  .cv-content.template-creative .photo-container { border: 6px solid #fff; transform: rotate(-3deg); box-shadow: 0 10px 20px rgba(0,0,0,0.1); margin-bottom: 12px; }
  .cv-content.template-creative .cv-header { position: relative; z-index: 1; }
  .cv-content.template-creative .cv-header h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #111827; }
  .cv-content.template-creative .cv-section h2 { text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }
  .cv-content.template-creative .cv-right-panel .cv-section h2 { border-left: 5px solid var(--secondary-color); padding-left: 10px; border-bottom: none; color: var(--primary-color); }
  .cv-content.template-creative .cv-left-panel .editable { color: #ccfbf1 !important; }
  
  /* Géométrique */
  .cv-content.template-geometric { background-color: #ffffff; background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 20px 20px; }
  .cv-content.template-geometric .cv-left-panel { background: var(--primary-color); color: #ffffff; flex: 0 0 32%; padding: 16px; position: relative; overflow: hidden; }
  .cv-content.template-geometric .cv-left-panel::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 100px 0 0 100px; border-color: transparent transparent transparent rgba(255,255,255,0.1); }
  .cv-content.template-geometric .cv-left-panel .editable { color: rgba(255,255,255,0.95) !important; }
  .cv-content.template-geometric .cv-left-panel .editable:empty::before { color: rgba(255,255,255,0.5) !important; }
  .cv-content.template-geometric .cv-left-panel h2 { color: var(--secondary-color) !important; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 4px; margin-top: 8px; }
  /* CORRECTION : PAS de background sur le container, seulement sur la barre */
  .cv-content.template-geometric .cv-left-panel .skill-level-container { background: transparent !important; }
  .cv-content.template-geometric .cv-left-panel .skill-level-bar { background: rgba(0,0,0,0.2); height: 5px; border-radius: 0; }
  .cv-content.template-geometric .cv-left-panel .level-segment.active { background: #ffffff; }
  .cv-content.template-geometric .cv-right-panel { background: transparent; padding: 22px; position: relative; }
  .cv-content.template-geometric .cv-right-panel::before { content: ''; position: absolute; top: 0; right: 0; width: 130px; height: 130px; background: var(--secondary-color); opacity: 0.15; border-bottom-left-radius: 100%; z-index: 0; pointer-events: none; }
  .cv-content.template-geometric .cv-header { margin-bottom: 12px; position: relative; z-index: 1; border-left: 5px solid var(--secondary-color); padding-left: 16px; }
  .cv-content.template-geometric .cv-header h1 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 2.2em; color: var(--primary-color); }
  .cv-content.template-geometric .cv-header h2 { font-family: 'Inconsolata', monospace; color: #555; letter-spacing: 3px; font-size: 1rem; text-transform: uppercase; }
  .cv-content.template-geometric .photo-container { width: 160px; height: 160px; margin: 0 auto 16px; border: 4px solid #ffffff; box-shadow: 5px 5px 0px rgba(0,0,0,0.2); background: #ccc; }
  .cv-content.template-geometric .cv-right-panel .cv-section h2 { display: flex; align-items: center; gap: 8px; color: var(--primary-color) !important; font-weight: 700; text-transform: uppercase; border: none; font-size: 1.1rem; margin-bottom: 6px; }
  .cv-content.template-geometric .cv-right-panel .cv-section h2::before { content: ''; display: block; width: 10px; height: 10px; background: var(--secondary-color); }
  .cv-content.template-geometric .experience-item, .cv-content.template-geometric .education-item { position: relative; padding-left: 20px; border-left: 1px dashed #ccc; margin-left: 4px; padding-bottom: 8px; }
  .cv-content.template-geometric .experience-item::before, .cv-content.template-geometric .education-item::before { content: ''; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; background: #fff; border: 2px solid var(--primary-color); border-radius: 50%; }
  .cv-content.template-geometric .experience-item:last-child, .cv-content.template-geometric .education-item:last-child { border-left: 1px solid transparent; }
  .cv-content.template-geometric .experience-title { font-weight: 700; font-size: 1rem; color: #000; }
  .cv-content.template-geometric .experience-company { font-weight: 600; color: var(--primary-color); }
  .cv-content.template-geometric .inline-dates { font-size: 0.85em; background: #eee; display: inline-block; padding: 2px 6px; border-radius: 4px; margin-top: 4px; color: #555; }
  
  /* Diagonal */
  .cv-content.template-diagonal { background: #ffffff; }
  .cv-content.template-diagonal .cv-left-panel { background: var(--primary-color) !important; color: #ffffff !important; flex: 0 0 32%; padding: 20px 14px; text-align: left; }
  .cv-content.template-diagonal .cv-left-panel *, .cv-content.template-diagonal .cv-left-panel .editable, .cv-content.template-diagonal .cv-left-panel .skill-name, .cv-content.template-diagonal .cv-left-panel .language-name, .cv-content.template-diagonal .cv-left-panel .info-items p { color: #ffffff !important; caret-color: #ffffff; text-shadow: none; }
  .cv-content.template-diagonal .cv-left-panel .editable:empty::before { color: rgba(255, 255, 255, 0.7) !important; }
  .cv-content.template-diagonal .cv-left-panel .cv-section h2 { color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 8px; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; background: transparent; }
  .cv-content.template-diagonal .cv-left-panel .skill-level-bar { background: rgba(0,0,0,0.2) !important; border-radius: 2px; height: 6px; }
  .cv-content.template-diagonal .cv-left-panel .level-segment.active { background: #ffffff !important; }
  .cv-content.template-diagonal .cv-right-panel { background: #ffffff !important; color: #333333 !important; padding: 24px 24px 16px 24px; position: relative; overflow: hidden; }
  .cv-content.template-diagonal .cv-right-panel::before { content: ''; position: absolute; top: -80px; right: -80px; width: 200px; height: 200px; background: var(--secondary-color); transform: rotate(45deg); opacity: 0.8; z-index: 0; }
  .cv-content.template-diagonal .cv-right-panel::after { content: ''; position: absolute; top: -120px; right: -40px; width: 300px; height: 300px; background: var(--primary-color); transform: rotate(45deg); opacity: 0.15; z-index: 0; pointer-events: none; }
  .cv-content.template-diagonal .cv-header { margin-bottom: 12px; padding-right: 60px; position: relative; z-index: 1; text-align: left; }
  .cv-content.template-diagonal .cv-header h1 { color: var(--primary-color) !important; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.8em; text-transform: uppercase; line-height: 1; margin-bottom: 5px; }
  .cv-content.template-diagonal .cv-header h2 { color: var(--secondary-color) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; }
  .cv-content.template-diagonal .photo-container { width: 150px; height: 150px; border: 4px solid #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.15); margin: 0 auto 30px auto; background: #fff; }
  .cv-content.template-diagonal .photo-container.shape-round { border-radius: 50%; }
  .cv-content.template-diagonal .photo-container.shape-square { border-radius: 12px; }
  .cv-content.template-diagonal .cv-right-panel .cv-section h2 { color: var(--secondary-color) !important; font-weight: 800; text-transform: uppercase; font-size: 1.1em; border-bottom: 2px solid var(--primary-color); display: inline-block; padding-bottom: 5px; margin-bottom: 6px; margin-top: 4px; position: relative; z-index: 1; }
  .cv-content.template-diagonal .cv-right-panel .experience-item, .cv-content.template-diagonal .cv-right-panel .education-item { margin-bottom: 10px; padding-left: 15px; border-left: 2px solid #f3f4f6; }
  .cv-content.template-diagonal .experience-title, .cv-content.template-diagonal .education-degree { font-weight: 700; color: #111827; font-size: 1.05em; }
  .cv-content.template-diagonal .experience-company { color: var(--primary-color); font-weight: 600; }
  .cv-content.template-diagonal .inline-dates { color: #6b7280; font-size: 0.9em; font-style: italic; }
  
  /* Bubbles */
  .cv-content.template-bubbles { background: #ffffff; position: relative; overflow: hidden; }
  .cv-content.template-bubbles::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: var(--primary-color); border-radius: 50%; opacity: 0.8; z-index: 0; }
  .cv-content.template-bubbles::after { content: ''; position: absolute; bottom: -50px; left: -50px; width: 250px; height: 250px; background: var(--primary-color); border-radius: 50%; opacity: 0.8; z-index: 0; }
  .cv-content.template-bubbles .cv-right-panel::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 200px; height: 200px; background: var(--secondary-color); border-radius: 50%; opacity: 0.9; z-index: 0; pointer-events: none; }
  .cv-content.template-bubbles .cv-left-panel { background: transparent; flex: 0 0 35%; padding: 20px 14px; z-index: 1; }
  .cv-content.template-bubbles .cv-right-panel { background: transparent; padding: 20px; z-index: 1; position: relative; }
  .cv-content.template-bubbles .photo-container { width: 130px; height: 130px; border: 3px solid var(--primary-color); padding: 0; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; }
  .cv-content.template-bubbles .cv-header { margin-bottom: 10px; padding-top: 15px; }
  .cv-content.template-bubbles .cv-header h1 { color: #333 !important; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 2.3em; text-transform: uppercase; letter-spacing: 1px; }
  .cv-content.template-bubbles .cv-header h2 { color: #666 !important; font-weight: 600; font-size: 1em; letter-spacing: 2px; text-transform: uppercase; }
  .cv-content.template-bubbles .cv-section h2 { background: #e5e7eb; color: #374151 !important; padding: 8px 18px; border-radius: 20px; font-weight: 700; text-transform: uppercase; font-size: 0.9em; letter-spacing: 1px; margin-bottom: 8px; display: inline-block; width: auto; min-width: 100px; text-align: center; border: none; }
  .cv-content.template-bubbles .cv-left-panel .cv-section h2 { width: 100%; text-align: center; }
  .cv-content.template-bubbles .cv-left-panel, .cv-content.template-bubbles .cv-left-panel .editable, .cv-content.template-bubbles .cv-left-panel h2 { color: #333 !important; }
  .cv-content.template-bubbles .cv-left-panel .editable:empty::before { color: rgba(0,0,0,0.4) !important; }
  .cv-content.template-bubbles .experience-item, .cv-content.template-bubbles .education-item { position: relative; padding-left: 20px; margin-bottom: 10px; border: none; }
  .cv-content.template-bubbles .experience-item::before, .cv-content.template-bubbles .education-item::before { content: '•'; color: var(--primary-color); font-size: 2em; position: absolute; left: 0; top: -5px; line-height: 1; }
  .cv-content.template-bubbles .experience-title { font-weight: 700; color: #333; }
  .cv-content.template-bubbles .experience-company { font-style: italic; color: #666; }
  .cv-content.template-bubbles .skill-level-bar { background: #e5e7eb; border-radius: 10px; height: 8px; }
  .cv-content.template-bubbles .level-segment.active { background: var(--primary-color); }
  
  /* Bordered */
  .cv-content.template-bordered { align-items: stretch; }
  .cv-content.template-bordered .cv-left-panel { background: transparent !important; flex: 0 0 32%; padding: 24px 14px; margin-top: 120px; border: 2px solid var(--primary-color); border-right: none; position: relative; color: #333 !important; overflow: visible; }
  .cv-content.template-bordered .cv-right-panel { background: transparent !important; padding: 24px 14px; margin-top: 120px; border: 2px solid var(--primary-color); border-left: 1px solid var(--primary-color); position: relative; color: #333 !important; overflow: visible; }
  .cv-content.template-bordered .photo-container { width: 140px; height: 140px; border: 4px solid var(--secondary-color); position: absolute; top: -120px; left: 20px; box-shadow: -5px 5px 0 var(--primary-color); }
  .cv-content.template-bordered .cv-header { position: absolute; top: -100px; left: 0; width: 100%; text-align: left; padding-left: 0; }
  .cv-content.template-bordered .cv-header h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 2.3em; color: #333 !important; letter-spacing: 2px; }
  .cv-content.template-bordered .cv-header h2 { color: #555 !important; font-weight: 500; font-size: 1em; letter-spacing: 1px; text-transform: uppercase; }
  .cv-content.template-bordered .cv-left-panel .cv-section h2 { color: var(--primary-color) !important; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--secondary-color); padding-bottom: 5px; margin-bottom: 8px; }
  .cv-content.template-bordered .cv-left-panel .editable { color: #333 !important; }
  .cv-content.template-bordered .cv-left-panel .editable:empty::before { color: rgba(0,0,0,0.4) !important; }
  .cv-content.template-bordered .skill-level-bar { background: #e5e7eb; height: 6px; }
  .cv-content.template-bordered .level-segment.active { background: var(--primary-color); }
  .cv-content.template-bordered .cv-right-panel .cv-section h2 { color: var(--primary-color) !important; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--secondary-color); padding-bottom: 4px; margin-bottom: 6px; font-size: 1.1em; }
  .cv-content.template-bordered .experience-item, .cv-content.template-bordered .education-item { margin-bottom: 10px; padding-left: 15px; border-left: 2px solid var(--secondary-color); }
  .cv-content.template-bordered .experience-title { font-weight: 700; color: #111; }
  .cv-content.template-bordered .experience-company { font-style: italic; color: #555; }
  
  /* Cyber */
  .cv-content.template-cyber { background-color: #050a14; color: #fff; }
  .cv-content.template-cyber .cv-left-panel { background: transparent; padding: 20px; flex: 0 0 35%; }
  .cv-content.template-cyber .cv-right-panel { background: transparent; padding: 20px 30px; }
  .cv-content.template-cyber .cv-header { text-align: center; margin-bottom: 12px; }
  .cv-content.template-cyber .photo-container { width: 130px; height: 130px; border: 2px solid var(--secondary-color); box-shadow: 0 0 15px var(--secondary-color), 0 0 5px var(--primary-color) inset; margin: 0 auto 15px; }
  .cv-content.template-cyber .cv-header h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; color: var(--primary-color) !important; text-shadow: 0 0 5px var(--primary-color); font-size: 2.2em; letter-spacing: 1px; }
  .cv-content.template-cyber .cv-header h2 { color: #fff !important; font-family: 'Inconsolata', monospace; font-size: 1em; letter-spacing: 1px; }
  .cv-content.template-cyber .cv-section { background: rgba(16, 24, 40, 0.6); border: 1px solid rgba(34, 211, 238, 0.3); box-shadow: 0 0 10px rgba(34, 211, 238, 0.1); border-radius: 12px; padding: 15px; margin-bottom: 10px; position: relative; overflow: hidden; }
  .cv-content.template-cyber .cv-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); }
  .cv-content.template-cyber h2 { color: var(--secondary-color) !important; font-family: 'Inconsolata', monospace; text-transform: uppercase; font-size: 1.1em; border-bottom: none; margin-bottom: 12px; text-shadow: 0 0 3px var(--secondary-color); }
  .cv-content.template-cyber .editable { color: #e2e8f0 !important; font-family: 'Roboto', sans-serif; }
  .cv-content.template-cyber .editable:empty::before { color: rgba(255,255,255,0.3) !important; }
  .cv-content.template-cyber .skill-level-bar { background: #1e293b; height: 6px; border-radius: 3px; overflow: hidden; }
  .cv-content.template-cyber .level-segment { background: transparent; }
  .cv-content.template-cyber .level-segment.active { background: var(--primary-color); box-shadow: 0 0 8px var(--primary-color); }
  .cv-content.template-cyber .experience-section, .cv-content.template-cyber .education-section { border-left: 2px solid var(--secondary-color); padding-left: 20px; margin-left: 5px; }
  .cv-content.template-cyber .experience-item, .cv-content.template-cyber .education-item { position: relative; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
  .cv-content.template-cyber .experience-item::before, .cv-content.template-cyber .education-item::before { content: ''; position: absolute; left: -26px; top: 5px; width: 10px; height: 10px; background: #050a14; border: 2px solid var(--secondary-color); border-radius: 50%; box-shadow: 0 0 5px var(--secondary-color); }
  .cv-content.template-cyber .experience-title, .cv-content.template-cyber .education-degree { color: var(--primary-color); font-weight: 700; text-shadow: 0 0 2px var(--primary-color); }
  .cv-content.template-cyber .experience-company { color: #fff; }
  
  /* ==== MODÈLE VOGUE (CORRIGÉ: HEADER À DROITE) ==== */
  .cv-content.template-vogue .cv-left-panel {
      background: #111111;
      color: #f0f0f0;
      flex: 0 0 38%;
      padding: 24px 18px;
      border-right: 1px solid #333;
      display: flex;
      flex-direction: column;
  }
  
  .cv-content.template-vogue .cv-right-panel {
      background: #ffffff;
      color: #000000;
      padding: 24px 24px;
      display: flex;
      flex-direction: column;
  }
  
  .cv-content.template-vogue .cv-header {
      margin-bottom: 50px;
      text-align: left;
      border-bottom: 4px double #000;
      padding-bottom: 20px;
  }
  .cv-content.template-vogue .cv-header h1 {
      font-family: 'Cinzel', serif;
      font-weight: 900;
      font-size: 3.2em;
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 1;
      color: #000;
      margin-bottom: 10px;
  }
  .cv-content.template-vogue .cv-header h2 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 4px;
      font-size: 0.85em;
      color: #666;
  }
  
  .cv-content.template-vogue .photo-container {
      width: 180px;
      height: 220px;
      border: none;
      border-radius: 0;
      margin: 0 auto 40px;
      position: relative;
      box-shadow: 10px 10px 0 var(--secondary-color);
      overflow: visible;
  }
  .cv-content.template-vogue .photo-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%);
  }
  
  .cv-content.template-vogue .cv-left-panel .cv-section h2 {
      font-family: 'Cinzel', serif;
      color: var(--secondary-color) !important;
      font-size: 1.1em;
      text-transform: uppercase;
      letter-spacing: 2px;
      border-bottom: 1px solid #444;
      padding-bottom: 8px;
      margin-bottom: 8px;
      text-align: center;
  }
  
  .cv-content.template-vogue .cv-right-panel .cv-section h2 {
      font-family: 'Cinzel', serif;
      color: #000 !important;
      font-size: 1.4em;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-bottom: none;
      margin-bottom: 10px;
      position: relative;
      display: inline-block;
  }
  .cv-content.template-vogue .cv-right-panel .cv-section h2::after {
      content: '';
      display: block;
      width: 40px;
      height: 2px;
      background: var(--secondary-color);
      margin-top: 5px;
  }
  
  .cv-content.template-vogue .cv-left-panel .editable {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      font-size: 0.9em;
      text-align: center;
      color: #ddd !important;
  }
  .cv-content.template-vogue .cv-left-panel .skill-level-bar {
      background: #333;
      height: 2px;
      margin-top: 5px;
  }
  .cv-content.template-vogue .cv-left-panel .level-segment.active {
      background: var(--secondary-color);
  }
  
  .cv-content.template-vogue .experience-item,
  .cv-content.template-vogue .education-item {
      margin-bottom: 12px;
      padding-left: 20px;
      border-left: 1px solid #eee;
  }
  .cv-content.template-vogue .experience-title,
  .cv-content.template-vogue .education-degree {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      font-size: 1.1em;
      color: #000;
      text-transform: uppercase;
  }
  .cv-content.template-vogue .experience-company {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 0.85em;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--secondary-color);
      margin-bottom: 5px;
      display: block;
  }
  .cv-content.template-vogue .inline-dates {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.8em;
      color: #999;
      font-style: italic;
      margin-bottom: 10px;
  }
  .cv-content.template-vogue .experience-description {
      font-family: 'Cardo', serif;
      font-size: 0.95em;
      line-height: 1.6;
      color: #444;
      text-align: justify;
  }
  
  /* ==== MODÈLE PRESTIGE ==== */
  .cv-content.template-prestige .cv-left-panel {
      background: var(--primary-color);
      color: #ffffff;
      flex: 0 0 35%;
      padding: 18px;
      display: flex;
      flex-direction: column;
  }
  
  .cv-content.template-prestige .cv-right-panel {
      background: #ffffff;
      padding: 24px;
  }
  
  /* ── Prestige : photo en losange via ROTATION (pas clip-path).
     html2canvas ne rend pas fiablement clip-path polygon → le losange
     redevenait carré dans le PDF. La rotation est parfaitement supportée. ── */
  .cv-content.template-prestige .photo-container {
      width: 110px;
      height: 110px;
      border: 2px solid var(--primary-color);
      background: #fff;
      border-radius: 0 !important;          /* annule shape-square forcé */
      clip-path: none;                       /* annule tout clip-path hérité */
      transform: rotate(45deg);
      margin: 35px auto 50px;                /* espace pour les pointes du losange */
      box-shadow: none;
      overflow: hidden;
  }
  .cv-content.template-prestige .photo-container img {
      transform: rotate(-45deg) scale(1.5);  /* contre-rotation + zoom pour remplir */
      transform-origin: center;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .cv-content.template-prestige .cv-header {
      border-bottom: 2px solid var(--primary-color);
      padding-bottom: 15px;
      margin-bottom: 12px;
  }
  .cv-content.template-prestige .cv-header h1 {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 2.2em;
      letter-spacing: 3px;
      color: var(--primary-color);
  }
  .cv-content.template-prestige .cv-header h2 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 5px;
      font-size: 0.9em;
      color: #666;
      margin-top: 5px;
  }
  
  .cv-content.template-prestige .cv-right-panel .cv-section h2 {
      font-family: 'Cinzel', serif;
      color: #000;
      font-size: 1.1em;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 5px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
  }
  .cv-content.template-prestige .cv-right-panel .cv-section h2::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      background: var(--secondary-color);
      margin-right: 10px;
      transform: rotate(45deg);
  }
  
  .cv-content.template-prestige .experience-item,
  .cv-content.template-prestige .education-item {
      margin-bottom: 10px;
      border-bottom: 1px solid #f9f9f9;
      padding-bottom: 15px;
  }
  .cv-content.template-prestige .experience-title, 
  .cv-content.template-prestige .education-degree {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: var(--primary-color);
      text-transform: uppercase;
      font-size: 0.95em;
      letter-spacing: 1px;
  }
  .cv-content.template-prestige .experience-company {
      font-style: italic;
      color: #555;
      font-family: 'Playfair Display', serif;
      font-weight: 600;
  }
  
  .cv-content.template-prestige .cv-left-panel .cv-section h2 {
      color: var(--secondary-color) !important;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      padding-bottom: 5px;
      font-family: 'Cinzel', serif;
      letter-spacing: 2px;
  }
  .cv-content.template-prestige .cv-left-panel .editable {
      text-align: center;
      color: #e0e0e0 !important;
  }
  .cv-content.template-prestige .cv-left-panel .skill-level-bar {
      background: rgba(0,0,0,0.3);
  }
  .cv-content.template-prestige .cv-left-panel .level-segment.active {
      background: #fff;
  }
  
  /* ==== MODÈLE REFLEX (INVERSÉ) ==== */
  .cv-content.template-reflex {
      flex-direction: row-reverse;
  }
  .cv-content.template-reflex .cv-left-panel {
      background: #f3f4f6;
      color: #1f2937;
      flex: 0 0 32%;
      padding: 18px 14px;
      border-left: 1px solid #e5e7eb;
  }
  .cv-content.template-reflex .cv-right-panel {
      background: #ffffff;
      padding: 18px 24px;
      color: #111827;
  }
  
  .cv-content.template-reflex .cv-header {
      border-bottom: 2px solid #e5e7eb;
      padding-bottom: 15px;
      margin-bottom: 12px;
  }
  .cv-content.template-reflex .cv-header h1 {
      font-family: 'Lato', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 2.5em;
      color: var(--primary-color);
      letter-spacing: 1px;
  }
  .cv-content.template-reflex .cv-header h2 {
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      font-size: 1.1em;
      color: #6b7280;
      margin-top: 5px;
  }
  
  .cv-content.template-reflex .cv-section h2 {
      font-family: 'Lato', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 1em;
      letter-spacing: 1px;
      color: #111827 !important;
      border-bottom: none;
      display: inline-block;
      position: relative;
      z-index: 1;
      margin-bottom: 8px;
      padding: 0 5px;
  }
  .cv-content.template-reflex .cv-section h2::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 0;
      width: 100%;
      height: 8px;
      background: var(--secondary-color);
      z-index: -1;
      opacity: 0.6;
  }
  
  .cv-content.template-reflex .cv-left-panel .editable {
      color: #374151 !important;
  }
  .cv-content.template-reflex .cv-left-panel .editable:empty::before {
      color: rgba(0,0,0,0.4) !important;
  }
  .cv-content.template-reflex .experience-title {
      font-weight: 800;
      color: #111827;
  }
  .cv-content.template-reflex .experience-company {
      color: var(--primary-color);
      font-weight: 600;
  }
  .cv-content.template-reflex .photo-container {
      border-radius: 12px;
      border: none;
      box-shadow: 5px 5px 0 var(--secondary-color);
      margin-bottom: 10px;
  }
  .cv-content.template-reflex .skill-level-bar {
      background: #d1d5db;
      border-radius: 2px;
  }
  .cv-content.template-reflex .level-segment.active {
      background: var(--primary-color);
  }
  
  /* ==== MODÈLE AÉRO ==== */
  .cv-content.template-aero {
      background: #ffffff;
      display: grid;
      grid-template-columns: 35% 65%;
      gap: 0;
  }
  
  .cv-content.template-aero .cv-left-panel {
      background: var(--primary-color) !important;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }
  
  .cv-content.template-aero .cv-section {
      border: 2px solid rgba(255,255,255,0.2);
      border-radius: 20px 0 20px 0;
      padding: 15px;
      margin-bottom: 10px;
      background: rgba(255,255,255,0.05);
  }
  
  .cv-content.template-aero .cv-left-panel h2 {
      color: #22d3ee !important;
      text-transform: uppercase;
      font-size: 0.85em;
      border-bottom: 1px solid #22d3ee;
      display: flex;
      align-items: center;
      gap: 8px;
  }
  
  .cv-content.template-aero .cv-right-panel {
      padding: 16px;
      background: #f8fafc;
      position: relative;
  }
  
  .cv-content.template-aero .cv-header h1 {
      color: var(--primary-color);
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 2.2em;
      text-align: right;
  }
  
  .cv-content.template-aero .experience-section {
      position: relative;
      padding-left: 30px;
      margin-top: 8px;
  }
  
  .cv-content.template-aero .experience-section::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 5px;
      bottom: 5px;
      width: 2px;
      background: var(--primary-color);
  }
  
  .cv-content.template-aero .experience-item {
      position: relative;
      margin-bottom: 10px;
      border-bottom: none;
  }
  
  .cv-content.template-aero .experience-item::before {
      content: '';
      position: absolute;
      left: -25px;
      top: 5px;
      width: 12px;
      height: 12px;
      background: #22d3ee;
      border: 3px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 2px var(--primary-color);
  }
  
  .cv-content.template-aero .skill-item {
      background: rgba(34, 211, 238, 0.1);
      border-radius: 5px;
      padding: 5px;
      margin-bottom: 5px;
  }
  
  .cv-content.template-aero .photo-container {
      border: 4px solid #22d3ee;
      border-radius: 15px 0 15px 0;
      width: 120px;
      height: 120px;
  }
  
  .cv-content.template-aero .education-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      border-top: 2px solid #e2e8f0;
      padding-top: 15px;
  }
  

  /* ========================================= */
/* BOUTONS DE SAUVEGARDE AMÉLIORÉS */
/* ========================================= */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Compteur de CV */
.cv-counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: #f0fdf4;
    border-radius: 10px;
    border: 1.5px solid #10b981;
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
    white-space: nowrap;
    transition: border-color .2s, background .2s;
}
.cv-counter-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Bouton Sauvegarder */
.btn-save-cv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity .18s, transform .12s;
    box-shadow: 0 2px 8px rgba(102,126,234,.28);
    white-space: nowrap;
}
.btn-save-cv:hover  { opacity: .86; transform: translateY(-1px); }
.btn-save-cv:active { transform: translateY(0); }
.btn-save-cv svg    { width: 14px; height: 14px; flex-shrink: 0; }

/* Bouton Mes CV */
.btn-my-cvs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .18s, background .18s;
    white-space: nowrap;
}
.btn-my-cvs:hover { background: #f8fafc; border-color: #94a3b8; color: #1e293b; }
.btn-my-cvs svg   { width: 14px; height: 14px; flex-shrink: 0; }

/* Bouton connexion */
.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    background: #f5f3ff;
    color: #7c3aed;
    border: 1.5px solid #c4b5fd;
    border-radius: 10px;
    text-decoration: none;
    transition: background .18s, border-color .18s;
    white-space: nowrap;
}
.btn-login:hover { background: #ede9fe; border-color: #7c3aed; }
.btn-login svg   { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 768px) {
    .btn-save-cv, .btn-my-cvs, .btn-login { padding: 6px 11px; font-size: 12px; }
    .cv-counter-badge { padding: 6px 10px; font-size: 12px; }
}
  /* Mini-CV Preview System */
  .mcv{display:flex;width:100%;height:100%;font-size:0;line-height:0}
  .mcv-side{display:flex;flex-direction:column;align-items:center;padding:7px 5px;gap:3px;width:34%}
  .mcv-main{flex:1;padding:7px 6px;display:flex;flex-direction:column;gap:2px}
  .mcv-photo{width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-bottom:2px}
  .mcv-photo.sq{border-radius:4px}
  .mcv-photo.diamond{border-radius:0;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);width:20px;height:20px}
  .mcv-bar{height:3px;border-radius:2px;width:80%}
  .mcv-bar.w60{width:60%}.mcv-bar.w70{width:70%}.mcv-bar.w50{width:50%}.mcv-bar.w90{width:90%}.mcv-bar.w100{width:100%}.mcv-bar.w45{width:45%}.mcv-bar.w65{width:65%}.mcv-bar.w85{width:85%}
  .mcv-name{height:7px;border-radius:1px;margin-bottom:1px}
  .mcv-sub{height:3px;border-radius:1px;margin-bottom:4px}
  .mcv-line{height:2.5px;border-radius:1px}
  .mcv-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
  .mcv-exp{display:flex;gap:4px;align-items:flex-start;margin-top:3px}
  .mcv-exp-lines{flex:1;display:flex;flex-direction:column;gap:2px}
  .mcv-timeline{display:flex;flex-direction:column;align-items:center;gap:0;width:6px;flex-shrink:0;padding-top:1px}
  .mcv-timeline .mcv-dot{margin-bottom:0}
  .mcv-timeline-line{width:1px;height:12px;margin-top:-1px}
  .mcv-skill{display:flex;align-items:center;gap:3px;width:82%}
  .mcv-skill-track{flex:1;height:3px;border-radius:2px;overflow:hidden;display:flex}
  .mcv-skill-fill{height:100%;border-radius:2px}
  .mcv-sep{width:60%;height:1px;margin:2px 0}
  .mcv-grid{display:flex;gap:3px;margin-top:auto}
  .mcv-grid-cell{flex:1;height:14px;border-radius:3px;border:1px solid}

  /* Aurora — gradient sidebar violet→cyan→vert, fond lavande clair */
  .cv-content.template-aurora { background: #faf5ff; }
  .cv-content.template-aurora .cv-left-panel { background: linear-gradient(180deg, #7c3aed, #06b6d4, #10b981); color: #ffffff; flex: 0 0 34%; padding: 30px 20px; }
  .cv-content.template-aurora .cv-left-panel .editable { color: rgba(255,255,255,0.95) !important; }
  .cv-content.template-aurora .cv-left-panel .editable:empty::before { color: rgba(255,255,255,0.5) !important; }
  .cv-content.template-aurora .cv-left-panel h2 { color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 6px; margin-bottom: 12px; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1.5px; }
  .cv-content.template-aurora .cv-left-panel .skill-level-bar { background: rgba(255,255,255,0.2); height: 6px; border-radius: 3px; }
  .cv-content.template-aurora .cv-left-panel .level-segment { background: rgba(255,255,255,0.2); }
  .cv-content.template-aurora .cv-left-panel .level-segment.active { background: rgba(255,255,255,0.85); }
  .cv-content.template-aurora .photo-container { border: 3px solid rgba(255,255,255,0.6); box-shadow: 0 0 15px rgba(124,58,237,0.3); margin-bottom: 10px; }
  .cv-content.template-aurora .cv-right-panel { background: #faf5ff; padding: 35px 30px; }
  .cv-content.template-aurora .cv-header { margin-bottom: 10px; border-left: 4px solid transparent; border-image: linear-gradient(180deg, #7c3aed, #06b6d4) 1; padding-left: 15px; }
  .cv-content.template-aurora .cv-header h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #7c3aed !important; font-size: 2.2em; }
  .cv-content.template-aurora .cv-header h2 { color: #06b6d4 !important; font-weight: 500; letter-spacing: 1px; font-size: 1em; }
  .cv-content.template-aurora .cv-right-panel .cv-section h2 { color: #7c3aed !important; font-weight: 700; text-transform: uppercase; font-size: 1em; letter-spacing: 0.5px; border-bottom: none; padding-bottom: 0; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
  .cv-content.template-aurora .cv-right-panel .cv-section h2::before { content: ''; display: block; width: 20px; height: 2px; background: linear-gradient(90deg, #7c3aed, #06b6d4); border-radius: 1px; }
  .cv-content.template-aurora .experience-item, .cv-content.template-aurora .education-item { position: relative; padding-left: 18px; margin-bottom: 14px; border-left: 2px solid #e9d5ff; }
  .cv-content.template-aurora .experience-item::before, .cv-content.template-aurora .education-item::before { content: ''; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; background: linear-gradient(135deg, #7c3aed, #06b6d4); border-radius: 50%; }
  .cv-content.template-aurora .experience-title, .cv-content.template-aurora .education-degree { font-weight: 700; color: #1e1b4b; }
  .cv-content.template-aurora .experience-company { color: #7c3aed; font-weight: 600; }
  .cv-content.template-aurora .inline-dates { color: #06b6d4; font-size: 0.9em; font-style: italic; }
  .cv-content.template-aurora.style-bar-thin .cv-left-panel .skill-level-bar { background-color: rgba(255,255,255,0.2); }
  .cv-content.template-aurora.style-bar-thin .cv-left-panel .level-segment.active { background-color: rgba(255,255,255,0.85); }

  /* Horizon — L-shaped accent: white sidebar with thick left bar, colored header band, card sections */
  .cv-content.template-horizon { background: #f8f6f3; }
  .cv-content.template-horizon .cv-left-panel { background: #ffffff; color: #334155; flex: 0 0 33%; padding: 20px 14px 20px 20px; border-left: 6px solid #f97316; position: relative; }
  .cv-content.template-horizon .cv-left-panel::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, #f97316, #ec4899, #8b5cf6, transparent); }
  .cv-content.template-horizon .cv-left-panel .editable { color: #334155 !important; }
  .cv-content.template-horizon .cv-left-panel .editable:empty::before { color: rgba(0,0,0,0.35) !important; }
  .cv-content.template-horizon .cv-left-panel .cv-section { background: #fafaf9; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; border: 1px solid #f0ede8; }
  .cv-content.template-horizon .cv-left-panel h2 { color: #f97316 !important; font-weight: 800; text-transform: uppercase; font-size: 0.75em; letter-spacing: 2px; border-bottom: none; padding: 3px 8px; margin-bottom: 6px; margin-top: 0; background: linear-gradient(90deg, rgba(249,115,22,0.1), transparent); border-radius: 4px; display: inline-block; }
  .cv-content.template-horizon .cv-left-panel .skill-level-bar { background: #f0ede8; height: 5px; border-radius: 3px; }
  .cv-content.template-horizon .cv-left-panel .level-segment { background: #f0ede8; }
  .cv-content.template-horizon .cv-left-panel .level-segment.active { background: #f97316; }
  .cv-content.template-horizon .cv-left-panel .skill-item { margin-bottom: 4px; }
  .cv-content.template-horizon .cv-left-panel .info-items { gap: 4px; font-size: 0.85em; }
  .cv-content.template-horizon .photo-container { width: 100px; height: 100px; border: 3px solid #f97316; box-shadow: 4px 4px 0 #fde1c5; margin-bottom: 12px; }
  .cv-content.template-horizon .cv-right-panel { background: #f8f6f3; padding: 0 20px 20px; }
  .cv-content.template-horizon .cv-header { background: linear-gradient(135deg, #f97316, #ec4899); margin: 0 -20px 14px; padding: 18px 22px; }
  .cv-content.template-horizon .cv-header h1 { font-family: 'Montserrat', sans-serif; font-weight: 900; color: #ffffff !important; font-size: 1.7em; text-transform: uppercase; line-height: 1.1; letter-spacing: 1px; }
  .cv-content.template-horizon .cv-header h2 { color: rgba(255,255,255,0.85) !important; font-weight: 400; letter-spacing: 2px; font-size: 0.9em; text-transform: uppercase; }
  .cv-content.template-horizon .cv-right-panel .cv-section { background: #ffffff; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid #f0ede8; position: relative; overflow: hidden; }
  .cv-content.template-horizon .cv-right-panel .cv-section::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 4px 0 0 4px; }
  .cv-content.template-horizon .cv-right-panel .cv-section.experience::before { background: #f97316; }
  .cv-content.template-horizon .cv-right-panel .cv-section.education::before { background: #ec4899; }
  .cv-content.template-horizon .cv-right-panel .cv-section.custom::before { background: #8b5cf6; }
  .cv-content.template-horizon .cv-right-panel .cv-section.interests::before { background: #06b6d4; }
  .cv-content.template-horizon .cv-right-panel .cv-section.langs::before { background: #10b981; }
  .cv-content.template-horizon .cv-right-panel .cv-section h2 { color: #1e293b !important; font-weight: 800; text-transform: uppercase; font-size: 0.85em; letter-spacing: 1.5px; border-bottom: none; margin-bottom: 6px; padding-left: 6px; }
  .cv-content.template-horizon .cv-right-panel .editable { color: #475569 !important; }
  .cv-content.template-horizon .cv-right-panel .editable:empty::before { color: rgba(0,0,0,0.3) !important; }
  .cv-content.template-horizon .experience-item, .cv-content.template-horizon .education-item { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed #f0ede8; }
  .cv-content.template-horizon .experience-item:last-child, .cv-content.template-horizon .education-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .cv-content.template-horizon .experience-title, .cv-content.template-horizon .education-degree { font-weight: 700; color: #1e293b; font-size: 0.95em; }
  .cv-content.template-horizon .experience-company { color: #f97316; font-weight: 600; }
  .cv-content.template-horizon .inline-dates { color: #ec4899; font-size: 0.8em; font-family: 'Inconsolata', monospace; background: #fef2f2; padding: 1px 6px; border-radius: 4px; display: inline-block; }
  .cv-content.template-horizon .experience-description, .cv-content.template-horizon .education-description { font-size: 0.88em; }
  .cv-content.template-horizon.style-bar-thin .cv-left-panel .skill-level-bar { background-color: #f0ede8; }
  .cv-content.template-horizon.style-bar-thin .cv-left-panel .level-segment.active { background-color: #f97316; }

  /* Mosaic — dark elegant mode, colored tile sections, magazine grid feel */
  .cv-content.template-mosaic { background: #18181b; color: #e4e4e7; }
  .cv-content.template-mosaic .cv-left-panel { background: transparent; color: #e4e4e7; flex: 0 0 34%; padding: 24px 18px; border-right: 1px solid rgba(255,255,255,0.06); }
  .cv-content.template-mosaic .cv-left-panel .editable { color: #e4e4e7 !important; }
  .cv-content.template-mosaic .cv-left-panel .editable:empty::before { color: rgba(255,255,255,0.3) !important; }
  .cv-content.template-mosaic .cv-left-panel h2 { color: #e11d48 !important; font-weight: 700; text-transform: uppercase; font-size: 0.85em; letter-spacing: 2px; border-bottom: 1px solid rgba(225,29,72,0.3); padding-bottom: 5px; margin-bottom: 12px; }
  .cv-content.template-mosaic .cv-left-panel .skill-level-bar { background: rgba(255,255,255,0.08); height: 5px; border-radius: 2px; }
  .cv-content.template-mosaic .cv-left-panel .level-segment { background: rgba(255,255,255,0.08); }
  .cv-content.template-mosaic .cv-left-panel .level-segment.active { background: #e11d48; }
  .cv-content.template-mosaic .photo-container { border: none; border-radius: 6px; background: #e11d48; box-shadow: 0 4px 15px rgba(225,29,72,0.25); }
  .cv-content.template-mosaic .cv-right-panel { background: transparent; padding: 28px 24px; }
  .cv-content.template-mosaic .cv-header { margin-bottom: 10px; padding-left: 14px; border-left: 4px solid #e11d48; }
  .cv-content.template-mosaic .cv-header h1 { color: #ffffff !important; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 2em; letter-spacing: 1px; }
  .cv-content.template-mosaic .cv-header h2 { color: rgba(255,255,255,0.5) !important; font-weight: 400; letter-spacing: 2px; font-size: 0.95em; text-transform: uppercase; }
  .cv-content.template-mosaic .cv-right-panel .cv-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; position: relative; overflow: hidden; }
  .cv-content.template-mosaic .cv-right-panel .cv-section.experience { border-color: rgba(225,29,72,0.2); }
  .cv-content.template-mosaic .cv-right-panel .cv-section.experience::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #e11d48; }
  .cv-content.template-mosaic .cv-right-panel .cv-section.education { border-color: rgba(245,158,11,0.2); }
  .cv-content.template-mosaic .cv-right-panel .cv-section.education::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #f59e0b; }
  .cv-content.template-mosaic .cv-right-panel .cv-section.custom { border-color: rgba(16,185,129,0.2); }
  .cv-content.template-mosaic .cv-right-panel .cv-section.custom::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #10b981; }
  .cv-content.template-mosaic .cv-right-panel .cv-section.interests { border-color: rgba(59,130,246,0.2); }
  .cv-content.template-mosaic .cv-right-panel .cv-section.interests::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #3b82f6; }
  .cv-content.template-mosaic .cv-right-panel .cv-section h2 { color: #ffffff !important; font-weight: 700; text-transform: uppercase; font-size: 0.9em; letter-spacing: 1.5px; border-bottom: none; margin-bottom: 6px; }
  .cv-content.template-mosaic .cv-right-panel .editable { color: #d4d4d8 !important; }
  .cv-content.template-mosaic .cv-right-panel .editable:empty::before { color: rgba(255,255,255,0.25) !important; }
  .cv-content.template-mosaic .experience-item, .cv-content.template-mosaic .education-item { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .cv-content.template-mosaic .experience-title, .cv-content.template-mosaic .education-degree { font-weight: 700; color: #ffffff; }
  .cv-content.template-mosaic .experience-company { color: #e11d48; font-weight: 600; }
  .cv-content.template-mosaic .inline-dates { color: rgba(255,255,255,0.4); font-size: 0.85em; font-family: 'Inconsolata', monospace; }
  .cv-content.template-mosaic.style-bar-thin .cv-left-panel .skill-level-bar { background-color: rgba(255,255,255,0.08); }
  .cv-content.template-mosaic.style-bar-thin .cv-left-panel .level-segment.active { background-color: #e11d48; }

/* Topbar unified buttons */
.topbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 8px 16px;
    font-size: 13px; font-weight: 600;
    border-radius: 10px; cursor: pointer;
    transition: opacity .18s, transform .12s;
    white-space: nowrap; text-decoration: none; border: none;
}
.topbar-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.topbar-btn.btn-save-cv {
    background: linear-gradient(135deg, #667eea, #764ba2); color: #fff;
    box-shadow: 0 2px 8px rgba(102,126,234,.28); font-weight: 700;
}
.topbar-btn.btn-save-cv:hover { opacity: .88; transform: translateY(-1px); }

.topbar-btn.download-pdf {
    background: var(--secondary-color, #0d9488); color: #fff;
    box-shadow: 0 2px 8px rgba(13,148,136,.25); font-weight: 700;
}
.topbar-btn.download-pdf:hover { opacity: .88; transform: translateY(-1px); }

.topbar-btn.btn-mycvs {
    background: #fff; color: #475569;
    border: 1.5px solid #e2e8f0;
}
.topbar-btn.btn-mycvs:hover { background: #f8fafc; border-color: #94a3b8; color: #1e293b; }

.topbar-btn.btn-dashboard {
    background: #0f172a; color: #fff;
    margin-left: 4px;
}
.topbar-btn.btn-dashboard:hover { background: #1e293b; transform: translateY(-1px); }

.topbar-btn.btn-login {
    background: #f5f3ff; color: #7c3aed;
    border: 1.5px solid #c4b5fd;
}
.topbar-btn.btn-login:hover { background: #ede9fe; border-color: #7c3aed; }



/* ========================================= */
/* FORMAT EXPERIENCE & FORMATION OPTIONS */
/* ========================================= */
/* Format preview cards */
.format-previews {
    display: flex; flex-direction: column; gap: 6px;
}
.format-card {
    display: flex; align-items: center; gap: 10px;
    border: 2px solid #e2e8f0; border-radius: 10px;
    padding: 8px 10px; cursor: pointer; transition: all .15s;
    background: #fff;
}
.format-card:hover { border-color: #93c5fd; background: #f8fafc; }
.format-card.active { border-color: #3b82f6; background: #eff6ff; }
.format-mini {
    flex: 0 0 130px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 6px; padding: 6px 8px; line-height: 1.3;
}
.format-label {
    font-size: 0.82rem; color: #334155; font-weight: 500;
}

/* Experience format: inline-header (date à droite du titre SUR LA MÊME LIGNE)
   Grid en 2 colonnes : titre à gauche (flexible), dates à droite (auto).
   Company et description passent en pleine largeur via grid-column: 1 / -1. */
.cv-content.exp-inline-header .experience-item {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 0;
    align-items: baseline;
}
.cv-content.exp-inline-header .experience-item .experience-title {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
}
.cv-content.exp-inline-header .experience-item .inline-dates {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    white-space: nowrap;
    font-style: italic;
    opacity: 0.85;
}
.cv-content.exp-inline-header .experience-item .experience-company,
.cv-content.exp-inline-header .experience-item .experience-description,
.cv-content.exp-inline-header .experience-item .remove-button {
    grid-column: 1 / -1;
}

/* Experience format: compact-line (titre | entreprise sur même ligne) */
.cv-content.exp-compact-line .experience-item .experience-title,
.cv-content.exp-compact-line .experience-item .experience-company {
    display: inline-block;
    vertical-align: baseline;
}
.cv-content.exp-compact-line .experience-item .experience-title::after {
    content: '  |  ';
    color: #94a3b8;
    pointer-events: none;
    font-weight: 400;
}
.cv-content.exp-compact-line .experience-item .inline-dates {
    display: block;
    clear: both;
}

/* Education format: inline-header (date à droite du diplôme SUR LA MÊME LIGNE) */
.cv-content.edu-inline-header .education-item {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 0;
    align-items: baseline;
}
.cv-content.edu-inline-header .education-item .education-degree {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
}
.cv-content.edu-inline-header .education-item .inline-dates {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    white-space: nowrap;
    font-style: italic;
    opacity: 0.85;
}
.cv-content.edu-inline-header .education-item .education-school,
.cv-content.edu-inline-header .education-item .education-description,
.cv-content.edu-inline-header .education-item .remove-button {
    grid-column: 1 / -1;
}

/* Education format: compact-line */
.cv-content.edu-compact-line .education-item .education-degree,
.cv-content.edu-compact-line .education-item .education-school {
    display: inline-block;
    vertical-align: baseline;
}
.cv-content.edu-compact-line .education-item .education-degree::after {
    content: '  |  ';
    color: #94a3b8;
    pointer-events: none;
    font-weight: 400;
}
.cv-content.edu-compact-line .education-item .inline-dates {
    display: block;
    clear: both;
}

/* Custom section right panel */
.cv-section.custom-right .custom-right-layout-text,
.cv-section.custom-right .custom-right-layout-list { }

.custom-right-section { display: flex; flex-direction: column; gap: 4px; }
.custom-right-section.columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }

/* ========================================= */
/* TEMPLATE MODAL */
/* ========================================= */
.template-modal-trigger {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px; margin-bottom: 8px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 10px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all .15s; box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.template-modal-trigger:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow: 0 4px 14px rgba(37,99,235,.4);
    transform: translateY(-1px);
}
.template-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.template-modal-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
}
.template-modal-content {
    position: relative; z-index: 1;
    background: #fff; border-radius: 16px;
    width: 90vw; max-width: 820px; max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    overflow: hidden;
}
.template-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid #e5e7eb;
}
.template-modal-header h2 {
    font-size: 1.2rem; font-weight: 700; color: #1e293b; margin: 0;
}
.template-modal-close {
    width: 36px; height: 36px; border: none; background: #f1f5f9;
    border-radius: 50%; font-size: 1.4rem; color: #64748b;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.template-modal-close:hover { background: #e2e8f0; color: #1e293b; }
.template-modal-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    padding: 20px 24px; overflow-y: auto;
}
.template-modal-card {
    border: 2px solid #e5e7eb; border-radius: 12px;
    background: #fff; cursor: pointer; padding: 0;
    transition: all .15s; display: flex; flex-direction: column;
    overflow: hidden;
}
.template-modal-card:hover { border-color: #93c5fd; box-shadow: 0 4px 12px rgba(59,130,246,.15); transform: translateY(-2px); }
.template-modal-card.active { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.template-modal-img {
    width: 100%; aspect-ratio: 210/297; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.template-modal-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.template-modal-img img[src=""] {
    display: none;
}
.template-modal-img:has(img[src=""]) {
    display: flex; align-items: center; justify-content: center;
}
.template-modal-img:has(img[src=""])::after {
    content: 'Aperçu';
    color: #94a3b8; font-size: 13px; font-weight: 500;
}
.template-modal-card span {
    padding: 8px 10px; font-size: 0.85rem; font-weight: 600;
    color: #334155; text-align: center; border-top: 1px solid #f1f5f9;
}
@media (max-width: 600px) {
    .template-modal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .template-modal-content { width: 95vw; max-height: 90vh; }
}
/* ═══════════════════════════════════════════════════════════
   LIENS & RÉSEAUX — items avec icône + picker modal
   ═══════════════════════════════════════════════════════════ */
.social-links-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.social-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    position: relative;
    font-size: .85em;
    color: var(--right-text-color);
}
.cv-left-panel .social-link-item { color: inherit; }
.social-link-item .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity .15s;
}
.social-link-item .social-icon:hover { opacity: .7; }
.social-link-item .social-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.social-link-item .social-url {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    outline: none;
}
.social-link-item .social-url:empty:before {
    content: attr(data-placeholder);
    opacity: .5;
    font-style: italic;
}
.social-link-item .remove-button {
    position: static;
    opacity: 0;
    flex-shrink: 0;
    font-size: 14px;
    padding: 0 4px;
}
.social-link-item:hover .remove-button { opacity: 1; }

/* ─── PDF mode : cacher les remove-buttons et hover effects ─── */
body.pdf-mode .social-link-item .remove-button { display: none !important; }
body.pdf-mode .social-link-item .social-icon { cursor: default; }

/* ═══════════════════════════════════════════════════════════
   MODALE PICKER D'ICÔNES
   ═══════════════════════════════════════════════════════════ */
.icon-picker-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}
.icon-picker-modal.open { display: flex; }
.icon-picker-content {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .35);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.icon-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}
.icon-picker-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 600;
}
.icon-picker-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
}
.icon-picker-close:hover { background: #f1f5f9; color: #0f172a; }
.icon-picker-search {
    margin: 12px 18px 0;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: .9rem;
    outline: none;
}
.icon-picker-search:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.15); }
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    padding: 14px 18px 18px;
    overflow-y: auto;
}
.icon-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
    font-size: .72rem;
    color: #334155;
}
.icon-picker-item:hover {
    border-color: #60a5fa;
    background: #f0f9ff;
    transform: translateY(-1px);
}
.icon-picker-item svg {
    width: 24px;
    height: 24px;
    fill: #0f172a;
}
.icon-picker-item span {
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
@media (max-width: 480px) {
    .icon-picker-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .icon-picker-content { max-height: 80vh; }
}