/* ==========================================================================
   FreeProTools — CV Builder (tool-specific styles)
   Loaded only on /outils/cv.html to keep the rest of the site lean.
   ========================================================================== */

.tool-shell{
  padding: 20px 0 clamp(48px, 6vw, 88px);
}
.tool-shell .wrap{ max-width: 1400px; }

.tool-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom: 20px;
}
.tool-topbar .breadcrumb{ font-size:.86rem; color: var(--text-faint); }
.tool-topbar .breadcrumb a{ color: var(--text-muted); }
.tool-topbar .breadcrumb a:hover{ color: var(--text); }
.tool-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Mobile tab switcher */
.builder-tabs{ display:none; gap:8px; margin-bottom:16px; }
.builder-tabs button{
  flex:1; padding:12px; border-radius: 10px; border:1px solid var(--line);
  background: var(--surface); color: var(--text-muted); font-weight:600; cursor:pointer;
  min-height:44px;
}
.builder-tabs button[aria-selected="true"]{ background: var(--gold); color:#1A1305; border-color: var(--gold); }

.builder-shell{
  display:grid; grid-template-columns: 420px 1fr; gap: 24px; align-items:start;
}
@media (max-width: 980px){
  .builder-shell{ grid-template-columns: 1fr; }
  .builder-tabs{ display:flex; }
  .builder-pane[data-pane="form"], .builder-pane[data-pane="preview"]{ display:none; }
  .builder-pane[data-pane="form"].active, .builder-pane[data-pane="preview"].active{ display:block; }
}

/* ---------- Form panel ---------- */
.cv-form{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(18px, 2.5vw, 26px);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  position: sticky; top: 88px;
}
@media (max-width: 980px){ .cv-form{ position:static; max-height:none; } }

.form-section{ border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 18px; }
.form-section:first-child{ border-top:none; padding-top:0; margin-top:0; }
.form-section h2{ font-size: 1rem; margin-bottom: 14px; display:flex; align-items:center; gap:8px; }
.form-section h2 svg{ width:18px; height:18px; color: var(--gold); }

.field{ margin-bottom: 14px; }
.field label{ display:block; font-size:.82rem; font-weight:600; color: var(--text-muted); margin-bottom:6px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="month"], textarea, select{
  width:100%; background: var(--bg-alt); border:1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-family: var(--font-body); font-size: .92rem;
  transition: border-color .15s ease;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--gold); }
textarea{ resize: vertical; min-height: 78px; line-height:1.5; }
::placeholder{ color: var(--text-faint); }

.photo-upload{ display:flex; align-items:center; gap:14px; }
.photo-preview{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: var(--bg-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color: var(--text-faint);
}
.photo-preview img{ width:100%; height:100%; object-fit:cover; }
.photo-upload .btn{ font-size:.84rem; }

.repeat-item{
  background: var(--bg-alt); border:1px solid var(--line-soft); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; position:relative;
}
.repeat-item .remove-item{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  background: var(--surface-2); border:1px solid var(--line); color: var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem;
}
.repeat-item .remove-item:hover{ color: var(--danger); border-color: var(--danger); }

.add-item-btn{
  width:100%; padding: 10px; border-radius:10px; border:1px dashed var(--line);
  background:transparent; color: var(--text-muted); font-weight:600; font-size:.88rem; cursor:pointer;
  transition: border-color .15s, color .15s;
}
.add-item-btn:hover{ border-color: var(--gold); color: var(--gold-soft); }

.level-row{ display:flex; align-items:center; gap:10px; }
.level-row input[type="range"]{ flex:1; accent-color: var(--gold); }
.level-row span{ font-size:.82rem; color: var(--text-faint); width: 24px; text-align:right; }

.tag-input-row{ display:flex; gap:8px; margin-bottom:10px; }
.tag-input-row input{ flex:1; }
.tag-input-row button{
  padding: 0 16px; border-radius:10px; border:1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-weight:600; cursor:pointer; flex-shrink:0;
}
.tag-editable-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-editable{
  display:flex; align-items:center; gap:6px; background: var(--bg-alt); border:1px solid var(--line-soft);
  border-radius:999px; padding: 6px 8px 6px 14px; font-size:.86rem;
}
.tag-editable button{
  width:18px; height:18px; border-radius:50%; border:none; background: var(--surface-2);
  color: var(--text-faint); cursor:pointer; font-size:.78rem; line-height:1;
}

/* ---------- Preview panel ---------- */
.preview-scroll{
  overflow-x: auto;
  padding-bottom: 8px;
}
.cv-page{
  width: 794px;
  height: 1123px;
  background: #ffffff;
  color: #1c2530;
  margin: 0 auto;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55);
  position: relative;
  overflow: hidden;
  font-family: "Inter", "Segoe UI", sans-serif;
}
.cv-pages{ display:flex; flex-direction:column; align-items:center; gap: 28px; }
.cv-page-number{
  text-align:center; font-size:.72rem; color: var(--text-faint); margin-top:-14px;
}
.cv-page.continuation .cv-body{ height: 1123px; }
.cv-cont-note{ margin:0; font-size:.82rem; color:#5c6b7a; }
.cv-cont-header{
  height: 56px; display:flex; align-items:center; justify-content:space-between;
  padding: 0 40px; border-bottom: 1px solid #e7e9ec; margin-bottom: 24px;
  font-size:.82rem; color:#5c6b7a;
}
.cv-cont-header b{ color:#16324f; }

.cv-banner{
  position:relative; height: 168px; overflow:hidden;
  /* Bandeau entièrement bleu (plus de diagonale bleu/clair). */
  background:#16324f;
}
.cv-banner-name{
  position:absolute; right: 40px; top: 34px; text-align:right; z-index:2; max-width: 56%;
}
.cv-banner-name .cv-name{
  font-family: Georgia, "Times New Roman", serif; font-size: 2.1rem; font-weight:400;
  color:#ffffff; margin:0 0 6px; line-height:1.1; word-break: break-word;
}
.cv-banner-name .cv-title{
  font-size: .95rem; font-weight:500; letter-spacing:.04em; color:#ffffff; text-transform: uppercase;
}

.cv-photo-wrap{
  position:absolute; left: 40px; top: 26px; width: 132px; height: 132px; z-index:3;
  border-radius:50%; background:#eef0f2; border: 6px solid #eef0f2;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35);
}
.cv-photo-wrap img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.cv-photo-wrap .cv-photo-placeholder{ color:#9aa4b2; }
.cv-photo-wrap .cv-photo-placeholder svg{ width:46px; height:46px; }

.cv-body{ display:grid; grid-template-columns: 258px 1fr; height: calc(1123px - 168px); }

.cv-sidebar{ background:#f4f5f7; padding: 26px 26px 40px; }
.cv-main{ padding: 30px 40px 40px; }

.cv-sec{ margin-bottom: 26px; }
.cv-sec:last-child{ margin-bottom:0; }
.cv-sec h3{
  font-size: .92rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:#16324f; margin:0 0 12px; padding-bottom:8px; border-bottom: 2px solid #16324f;
}
.cv-sidebar .cv-sec h3{ border-bottom-color:#16324f; }

.cv-contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cv-contact-list li{ display:flex; align-items:flex-start; gap:9px; font-size:.82rem; color:#33404d; word-break:break-word; }
.cv-contact-list svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; color:#16324f; }

.cv-lang-list{ display:flex; flex-direction:column; gap:12px; }
.cv-lang-item .cv-lang-label{ font-size:.84rem; font-weight:600; color:#33404d; margin-bottom:2px; }
.cv-lang-item .cv-lang-level{ font-size:.8rem; color:#6b7683; }

.cv-bullet-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cv-bullet-list li{ font-size:.84rem; color:#33404d; padding-left:14px; position:relative; }
.cv-bullet-list li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:#16324f; }

.cv-main .cv-profile-text{ font-size:.87rem; line-height:1.6; color:#33404d; margin:0; max-width:none; }

.cv-entry{ margin-bottom: 20px; }
.cv-entry:last-child{ margin-bottom:0; }
.cv-entry .cv-entry-title{ font-size:.98rem; font-weight:700; color:#16324f; margin-bottom:2px; }
.cv-entry .cv-entry-meta{ font-size:.82rem; color:#5c6b7a; margin-bottom:8px; }
.cv-entry .cv-entry-meta b{ font-style:italic; color:#33404d; }
.cv-entry ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cv-entry ul li{ font-size:.83rem; color:#33404d; padding-left:14px; position:relative; line-height:1.5; }
.cv-entry ul li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:#16324f; }

.cv-empty-hint{ color:#9aa4b2; font-size:.83rem; font-style:italic; }

/* ---------- Print ---------- */
@media print{
  body *{ visibility:hidden; }
  .cv-pages, .cv-pages *{ visibility:visible; }
  .cv-pages{ gap:0; }
  .cv-page{ box-shadow:none; margin:0; break-after: page; page-break-after: always; }
  .cv-page:last-child{ break-after: auto; page-break-after: auto; }
  .cv-page-number{ display:none; }
  @page{ size: A4; margin:0; }
}