/* Docs Utiles — éditeur de CV */
.cved-intro{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:34px 0 30px}
.cved-intro h1{font-size:clamp(26px,3.6vw,38px);margin-bottom:12px}
.cved-intro .eyebrow{color:#ffb36b}
.cved-pluses{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.cved-pluses li::before{content:"✓ ";color:#ffb36b;font-weight:700}
.cved-intro .alert{margin:14px 0 0;color:var(--ink)}
.cved{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;padding-top:24px;padding-bottom:110px;align-items:start}
.cved-form{display:grid;gap:12px}
.cved-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 18px}
.cved-step[open]{padding-bottom:18px}
.cved-step summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:600;padding:15px 0;font-size:16px}
.cved-step summary::-webkit-details-marker{display:none}
.cved-step summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted)}
.cved-step[open] summary::after{content:"–"}
.cved-step summary span{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.cved-step summary .tag{font-style:normal;font-size:11px;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;padding:2px 8px}
.cved-step label{margin-bottom:10px}
.cved .g2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.cved .g2 .full{grid-column:1/-1}
.hint{font-size:13px;color:var(--muted);margin:4px 0 10px}
.linkbtn{background:none;border:0;padding:0;color:var(--brand);font:600 13px Inter,sans-serif;cursor:pointer;text-decoration:underline}
.btn-add{background:var(--bg);border:1px dashed #c9c2b5;border-radius:10px;padding:10px 14px;font:600 14px Inter,sans-serif;color:var(--ink);cursor:pointer}
.btn-add:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn-ghost:hover{background:#eef6ee;color:var(--brand-2)}

.photo-zone{display:flex;gap:18px;align-items:center;margin-bottom:12px}
.photo-prev{width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--bg);border:2px dashed #c9c2b5;display:grid;place-items:center;text-align:center;font-size:12px;color:var(--muted);flex:none}
.photo-prev img{width:100%;height:100%;object-fit:cover}
.btn-sm-file{display:inline-flex;cursor:pointer;padding:10px 16px;font-size:14px}
.tips{background:#f4f8f2;border:1px solid #d5e7d2;border-radius:10px;padding:12px 16px;font-size:13.5px}
.tips ul{margin:6px 0 0;padding-left:18px}
.tips li{margin:3px 0}

.rep{border:1px solid var(--line);border-radius:10px;padding:10px 12px 2px;margin-bottom:10px;background:#fcfbf8}
.rep-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rep-head button{background:none;border:1px solid var(--line);border-radius:6px;width:28px;height:28px;cursor:pointer;margin-left:4px;color:var(--muted)}
.rep-head button:hover{border-color:var(--ink);color:var(--ink)}
.chips-edit{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips-edit span{background:#eef6ee;border:1px solid #cfe5cf;border-radius:999px;padding:4px 6px 4px 12px;font-size:13px;display:inline-flex;align-items:center;gap:4px}
.chips-edit button{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);padding:0 4px}
.add-row{display:flex;gap:8px}
.add-row input{flex:1}
.sugg{margin-top:12px;font-size:13.5px}
.sugg-p{background:#fff8ef;border:1px solid #f3dcc0;border-radius:10px;padding:10px 12px;margin:8px 0}
.sugg-p p{margin:0 0 6px}
.sugg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sugg-chips button{border:1px solid #f3dcc0;background:#fff8ef;border-radius:999px;padding:5px 11px;font:500 13px Inter,sans-serif;cursor:pointer}
.sugg-chips button:hover{border-color:var(--accent)}

.cved-preview{position:sticky;top:120px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.pv-tabs{display:flex;gap:4px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:12px}
.pv-tabs button{flex:1;border:0;background:none;padding:8px;border-radius:8px;font:600 14px Inter,sans-serif;color:var(--muted);cursor:pointer}
.pv-tabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.pv-designs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
.pv-designs button{border:2px solid var(--line);background:#fff;border-radius:8px;padding:5px 3px 4px;cursor:pointer;display:grid;gap:3px;justify-items:center;font:500 11px Inter,sans-serif;color:var(--ink)}
.pv-designs button.on{border-color:var(--accent)}
.mini{display:block;width:100%;max-width:46px;aspect-ratio:3/4;border-radius:3px;background:#eef0ef;position:relative;overflow:hidden}
.mini-abidjan{background:linear-gradient(90deg,#177a1c 34%,#fff 34%)}
.mini-plateau{background:linear-gradient(180deg,#177a1c 26%,#fff 26%)}
.mini-cocody{background:radial-gradient(circle at 50% 18%,#177a1c 12%,transparent 13%),linear-gradient(180deg,#fff 34%,#ddd 34%,#ddd 35%,#fff 35%)}
.mini-lagune{background:linear-gradient(180deg,#e2f0e2 30%,#fff 30%);border-left:5px solid #177a1c}
.mini-prestige{background:linear-gradient(180deg,#1d2421 28%,#f07c14 28%,#f07c14 31%,#fff 31%)}
.mini-yamoussoukro{background:linear-gradient(90deg,#1f2a2e 36%,#fff 36%)}
.mini-bassam{background:linear-gradient(180deg,#fff 26%,#177a1c 26%,#177a1c 32%,#fff 32%)}
.mini-sanpedro{background:linear-gradient(170deg,#177a1c 28%,#fff 28.5%)}
.mini-korhogo{background:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #177a1c}
.mini-bouake{background:linear-gradient(180deg,#177a1c 6%,#fff 6%,#fff 28%,#eef1ef 28%)}
.mini-daloa{background:radial-gradient(circle at 78% 16%,#9aa29e 10%,transparent 11%),linear-gradient(180deg,#fff 30%,#ddd 30%,#ddd 31%,#fff 31%)}
.mini-treichville{background:linear-gradient(135deg,#f07c14 14%,transparent 14%),linear-gradient(90deg,#26292c 36%,#fff 36%)}
.mini-marcory{background:radial-gradient(ellipse 40% 22% at 22% 14%,#2a2d31 98%,transparent 100%),linear-gradient(90deg,#fff 4%,#2a2d31 4%,#2a2d31 38%,#fff 38%)}
.mini-riviera{background:radial-gradient(circle at 22% 16%,#177a1c 11%,transparent 12%),linear-gradient(180deg,#fff 33%,#eee 33%,#eee 38%,#fff 38%)}
.mini-adjame{background:linear-gradient(180deg,#1f2629 26%,#177a1c 26%,#177a1c 31%,#fff 31%)}
.mini-gagnoa{background:linear-gradient(90deg,#111 38%,#f6f6f6 38%)}
.mini-odienne{background:radial-gradient(circle at 24% 18%,#7ec27f 14%,transparent 15%),#fffaf4}
.mini-abobo{background:radial-gradient(circle at 26% 22%,#fff 9%,#ccc 10%,#ccc 12%,transparent 13%),linear-gradient(180deg,#fff 26%,transparent 26%),linear-gradient(90deg,#fff 6%,#f07c14 6%,#f07c14 40%,#f5f6f5 40%)}
.mini-bingerville{background:radial-gradient(circle at 20% 15%,#9fb9d6 9%,transparent 10%),linear-gradient(90deg,#e8f0f8 36%,#fff 36%)}
.mini-essentiel{background:repeating-linear-gradient(180deg,#fff 0 6px,#dfe3e1 6px 7px);border-top:5px solid #fff}
.pv-colors{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--muted)}
.pv-colors button{width:24px;height:24px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.pv-colors button.on{box-shadow:0 0 0 2px var(--ink)}
.pv-warn{background:#fff7e6;border:1px solid #f0d9a7;border-radius:8px;padding:8px 12px;font-size:13px;margin-bottom:10px}
.pv-frame{position:relative;overflow:hidden;border-radius:6px;background:#eef0ee}
.pv-scale .cvpage{box-shadow:0 2px 16px rgba(0,0,0,.12)}
.pv-scale{transform-origin:0 0;width:794px;position:absolute;top:0;left:0}
.pv-note{font-size:12px;color:var(--muted);margin:10px 0 0}

.cved-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line)}
.cved-bar-in{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.save-st{margin-right:auto;font-size:13px;color:var(--muted)}
.show-mobile{display:none}

.modal{border:0;border-radius:16px;padding:0;max-width:560px;width:calc(100% - 24px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-wide{max-width:980px}
.modal::backdrop{background:rgba(15,25,20,.55)}
.modal-in{padding:22px;display:grid;gap:12px;max-height:calc(100vh - 40px);overflow:auto}
.modal h2{margin:0;font-size:24px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.crop-wrap{position:relative;width:min(100%,300px);margin:0 auto;aspect-ratio:1}
.crop-wrap canvas{width:100%;height:100%;display:block;border-radius:12px;touch-action:none;cursor:grab}
.crop-ring{position:absolute;inset:0;border-radius:12px;pointer-events:none;box-shadow:inset 0 0 0 9999px rgba(0,0,0,0);background:radial-gradient(circle at 50% 50%,transparent 49%,rgba(255,255,255,.65) 50%)}
.zoom{display:flex;align-items:center;gap:10px}
.zoom input{flex:1;padding:0}
.checks{list-style:none;padding:0;margin:0;font-size:13.5px;display:grid;gap:4px}
.checks .ok{color:var(--ok)}
.checks .ko{color:#8a5a00}
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.offer{position:relative;border:2px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;display:block;font-weight:400}
.offer:has(input:checked){border-color:var(--brand);background:#f4f9f3}
.offer input{position:absolute;top:16px;right:16px;width:auto}
.offer b{display:block;font-size:16px;padding-right:24px}
.offer-price{display:block;font-size:24px;font-weight:700;color:var(--brand);margin:4px 0 8px}
.offer ul{margin:0;padding-left:16px;font-size:13px;color:#3e4643}
.offer li{margin:3px 0}
.offer-best{border-color:var(--accent)}
.offer-tag{position:absolute;top:-11px;left:14px;background:var(--accent);color:#fff;font-style:normal;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.offer-off{opacity:.55;cursor:default}
.compare{font-size:13.5px}
.compare summary{cursor:pointer;font-weight:600;color:var(--brand)}
.compare table{width:100%;border-collapse:collapse;margin-top:8px}
.compare th,.compare td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.compare td:last-child{color:var(--ok);font-weight:600}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

@media (max-width:900px){
  .cved{grid-template-columns:1fr}
  .cved-preview{position:static;display:none}
  body.show-pv .cved-preview{display:block}
  body.show-pv .cved-form{display:none}
  .show-mobile{display:inline-flex}
  .hide-mobile{display:none}
  .offers,.g3{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cved .g2{grid-template-columns:1fr}
  .pv-designs{grid-template-columns:repeat(3,1fr)}
  .cved-bar .btn{padding:11px 14px;font-size:14px}
  .save-st{flex-basis:100%;text-align:center}
}
/* Pas d'impression de l'aperçu gratuit */
@media print{ body *{visibility:hidden} body::after{content:"Utilisez le bouton « Télécharger mon CV » pour obtenir votre PDF.";visibility:visible;position:fixed;top:40%;left:0;right:0;text-align:center;font:20px Arial} }

/* Exemples de CV (profils fictifs) */
.cvx-sec{padding:34px 0 120px}
.cvx-sec h2{margin:0 0 6px}
.cvx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:18px}
.cvx{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.cvx-page{aspect-ratio:794/1123;overflow:hidden;position:relative;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.1);background:#fff}
.cvx-scale{width:794px;transform-origin:0 0;position:absolute;top:0;left:0}
.cvx figcaption{display:grid;gap:8px;margin-top:10px;font-size:13.5px}

.pv-custom{position:relative;width:24px;height:24px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);cursor:pointer;border:3px solid #fff}
.pv-custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pv-custom.on{box-shadow:0 0 0 2px var(--ink)}
.pv-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.pv-opts select{width:100%;padding:6px 8px;font-size:13px}
.recap{background:#f6f8f6;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:6px 0 10px;display:grid;gap:4px;font-size:14px}
.recap .sw-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:4px}
.confirm-choice{display:flex !important;gap:10px;align-items:flex-start;font-weight:500;margin:6px 0 12px}
.confirm-choice input{width:auto;margin-top:3px}

/* Étape 1 : choix du modèle dans le formulaire */
.pv-designs-big{grid-template-columns:repeat(3,1fr) !important;gap:8px}
.pv-designs-big button{padding:8px 6px;text-align:center}
.pv-designs-big button small{font-size:10px;color:var(--muted);line-height:1.25;font-weight:400}
.pv-designs-big .mini{max-width:58px}