/* ============================================================
   EKD — TUNNEL de personnalisation semi (wizard + aperçu live)
   Coloris (zones) → Modèle → Finition → Perso → Récap
   ============================================================ */

.tnl{max-width:780px;margin:0 auto;padding:24px 0 70px}

/* ── Barre de progression ── */
.tnl-prog{display:flex;align-items:flex-start;margin-bottom:34px}
.pstep{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;cursor:pointer;position:relative}
.pstep .circ{width:38px;height:38px;border-radius:50%;border:2px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:17px;color:var(--muted-2);background:var(--black);z-index:2;transition:.2s}
.pstep.active .circ{border-color:var(--orange);background:var(--orange);color:#fff}
.pstep.done .circ{border-color:var(--orange);color:var(--orange)}
.pstep .lab{font-family:var(--f-cond);font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:11px;color:var(--muted-2);text-align:center}
.pstep.active .lab{color:#fff}
.pstep::before{content:"";position:absolute;top:18px;left:-50%;width:100%;height:2px;background:var(--gray3);z-index:1}
.pstep:first-child::before{display:none}
.pstep.done::before{background:var(--orange)}
/* barre à peu d'étapes (semi, 2 pas) : centrée horizontalement */
.tnl-prog-center{max-width:420px;margin-left:auto;margin-right:auto}

/* ── Étapes ── */
.tnl-step{display:none}
.tnl-step.active{display:block;animation:fadeIn .35s}
.tnl-step .step-tag{font-family:var(--f-cond);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange);font-size:12px;margin-bottom:8px}
.tnl-step h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:6px}
.tnl-step .step-sub{color:var(--muted-2);font-size:14px;margin-bottom:24px;max-width:520px}

/* ── Zones de couleur ── */
.zone{margin-bottom:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--gray);padding:18px 20px}
.zone .zh{font-family:var(--f-cond);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.zone .zh .zv{color:var(--orange);font-size:13px}
.zone-sws{display:flex;gap:12px;flex-wrap:wrap}
.zone-sw{width:40px;height:40px;border-radius:50%;cursor:pointer;position:relative;transition:.15s}
.zone-sw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;transition:.15s}
.zone-sw:hover{transform:scale(1.09)}
.zone-sw.active::after{border-color:var(--orange)}

/* ── Champs ── */
.tnl-field{margin-bottom:18px}
.tnl-field label{display:block;font-family:var(--f-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12.5px;color:var(--muted-2);margin-bottom:8px}
.tnl-field label .opt{color:var(--muted);font-weight:600}
.tnl-field input,.tnl-field select,.tnl-field textarea{width:100%;background:var(--gray);border:1px solid var(--border-2);border-radius:var(--radius);color:#fff;font-family:var(--f-body);font-size:15px;padding:13px 15px;transition:.2s}
.tnl-field input:focus,.tnl-field select:focus,.tnl-field textarea:focus{outline:none;border-color:var(--orange)}
.tnl-field textarea{min-height:130px;resize:vertical;line-height:1.5}
.tnl-field label .opt{color:var(--muted);font-weight:600}
.tnl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── Finition ── */
.fin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fin-card{border:1px solid var(--border-2);border-radius:var(--radius);padding:22px 18px;cursor:pointer;transition:.2s;text-align:center;background:var(--gray)}
.fin-card:hover{border-color:#fff;transform:translateY(-3px)}
.fin-card.active{border-color:var(--orange);background:var(--orange-soft)}
.fin-card .fn{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:16.5px}
.fin-card .fp{color:var(--orange);font-family:var(--f-display);font-size:26px;margin-top:8px}
.fin-card .fp.inc{color:var(--green);font-family:var(--f-cond);font-size:13px;letter-spacing:.5px}

/* ── Vignettes photo (matière + finition) ── */
.fin-card .thumb,.mat-card .thumb{display:block;width:100%;height:130px;object-fit:cover;border-radius:8px;margin-bottom:13px;background:#0d0d0d;border:1px solid var(--border)}
.fin-card.active .thumb,.mat-card.active .thumb{border-color:var(--orange)}

/* ── Matière (même rendu que la finition, groupe distinct) ── */
.fin-card,.mat-card{position:relative}
.mat-card{border:1px solid var(--border-2);border-radius:var(--radius);padding:22px 18px;cursor:pointer;transition:.2s;text-align:center;background:var(--gray)}
.mat-card:hover{border-color:#fff;transform:translateY(-3px)}
.mat-card.active{border-color:var(--orange);background:var(--orange-soft)}
.mat-card .fn{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:16.5px}
.mat-card .fp{color:var(--orange);font-family:var(--f-display);font-size:26px;margin-top:8px}
.mat-card .fp.inc{color:var(--green);font-family:var(--f-cond);font-size:13px;letter-spacing:.5px}
.opt-badge{position:absolute;top:7px;right:7px;font-family:var(--f-cond);font-weight:700;font-size:9px;letter-spacing:1px;text-transform:uppercase;background:var(--orange);color:#fff;padding:2px 7px;border-radius:3px;line-height:1.4}
/* prix promo : ancien prix barré au-dessus du prix actuel */
.fp .old{display:block;font-family:var(--f-cond);font-weight:600;font-size:13px;letter-spacing:.5px;color:var(--muted);text-decoration:line-through;line-height:1;margin-bottom:1px}
/* ── Option Fluo (100% custom — cartes compactes, sans vignette) ── */
.fluo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fluo-card{border:1px solid var(--border-2);border-radius:var(--radius);padding:16px 12px;cursor:pointer;transition:.2s;text-align:center;background:var(--gray);position:relative}
.fluo-card:hover{border-color:#fff;transform:translateY(-3px)}
.fluo-card.active{border-color:var(--orange);background:var(--orange-soft)}
.fluo-card .fn{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:14px}
.fluo-card .fp{color:var(--orange);font-family:var(--f-display);font-size:23px;margin-top:5px}
.fluo-card .fp.inc{color:var(--muted-2);font-family:var(--f-cond);font-size:13px;letter-spacing:.5px}
.fin-block{margin-bottom:24px}
.fin-block>.fbl{font-family:var(--f-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px;color:var(--muted-2);margin-bottom:12px;display:block}

/* ── Boîte d'achat (étape finale) ── */
.buy-box{border:1px solid var(--border);border-radius:var(--radius);background:var(--gray);padding:22px;margin-top:6px}
.buy-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.buy-total .l{font-family:var(--f-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:14px}
.buy-total .v{font-family:var(--f-display);font-size:42px;color:var(--orange);line-height:1}
.buy-klarna{display:flex;align-items:center;gap:8px;color:var(--muted-2);font-size:12.5px;margin-bottom:16px}
.buy-klarna b{color:#fff}
.buy-klarna .kl{background:#ffb3c7;color:#0a0a0a;font-family:var(--f-cond);font-weight:800;font-size:11px;letter-spacing:.5px;padding:2px 7px;border-radius:4px}
.buy-atc{width:100%;justify-content:center;font-size:16px;padding:16px}
.buy-secure{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted-2);font-size:12px;margin-top:12px}
.buy-secure svg.ic{width:15px;height:15px;color:var(--green)}
.buy-stars{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;color:var(--muted-2);font-size:12.5px}
.buy-stars .stars{display:inline-flex;gap:2px}
.buy-stars .stars svg.ic{width:15px;height:15px;color:#f5b301}

/* ── FAQ (étape finale) ── */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 2px;font-family:var(--f-cond);font-weight:700;letter-spacing:.3px;font-size:15.5px;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{color:var(--orange);font-size:22px;font-weight:400;transition:.2s;flex:none}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq .ans{color:var(--muted-2);font-size:13.5px;line-height:1.6;padding:0 2px 16px}
.faq .ans strong{color:#fff}

/* ── Upload sponsors ── */
.dropz{border:1.5px dashed var(--border-2);border-radius:var(--radius);padding:30px;text-align:center;color:var(--muted-2);cursor:pointer;transition:.2s;position:relative}
.dropz:hover{border-color:var(--orange);color:#fff}
.dropz svg.ic{width:30px;height:30px;color:var(--orange);margin-bottom:10px}
.dropz input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dz-files{margin-top:10px;font-size:12.5px;color:var(--orange);font-family:var(--f-cond);font-weight:600}

/* ── Navigation ── */
.tnl-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}

/* ── Aperçu + récap (aside) ── */
.tnl-aside{position:sticky;top:calc(var(--nav-h) + 18px);display:flex;flex-direction:column;gap:18px}
.tnl-preview{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--gray)}
.tnl-pv-media{position:relative;aspect-ratio:4/3;background:#0d0d0d}
.tnl-pv-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.04) contrast(1.05)}
.tnl-tint{position:absolute;inset:0;mix-blend-mode:color;pointer-events:none;background:#FF4D00}
.tnl-pv-badge{position:absolute;top:12px;left:12px;z-index:3;display:flex;align-items:center;gap:6px;background:rgba(8,8,8,.7);border:1px solid var(--border);border-radius:40px;padding:5px 12px;font-size:11px;font-family:var(--f-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff}
.tnl-pv-badge .live{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:pulse 1.4s infinite}
.tnl-pv-zones{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;gap:7px}
.tnl-pv-zones .z{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(0,0,0,.4)}

.recap{border:1px solid var(--border);border-radius:var(--radius);background:var(--gray);padding:22px}
.recap h3{font-family:var(--f-cond);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:15px;margin-bottom:16px}
.recap-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted-2)}
.recap-row b{color:#fff;font-weight:600;text-align:right}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:4px}
.recap-total .l{font-family:var(--f-cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:14px}
.recap-total .v{font-family:var(--f-display);font-size:40px;color:var(--orange)}
.recap-re{display:flex;align-items:center;gap:8px;color:var(--muted-2);font-size:12px;margin-top:12px}
.recap-re svg.ic{width:15px;height:15px;color:var(--orange);flex:none}

/* ── Récap : boutons modifier + groupes ── */
.recap-row .rv{display:flex;align-items:center;gap:12px}
.recap-edit{font-family:var(--f-cond);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:10.5px;color:var(--orange);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:0;transition:.15s;white-space:nowrap}
.recap-edit:hover{color:#fff}
.recap-edit svg.ic{width:13px;height:13px}
.recap-grp{padding:11px 0;border-bottom:1px solid var(--border)}
.recap-grp-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.recap-grp-h .gl{font-family:var(--f-cond);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:12px;color:#fff}
.recap-sub{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted-2);padding:3px 0}
.recap-sub b{color:#fff;font-weight:600}

@media(max-width:980px){
  .tnl{grid-template-columns:1fr;gap:24px}
  .tnl-aside{position:static}
  .recap{max-width:560px}
}
@media(max-width:560px){
  .fin-grid{grid-template-columns:1fr 1fr}
  .fluo-grid{grid-template-columns:1fr 1fr}
  .tnl-row{grid-template-columns:1fr}
  .pstep .lab{display:none}
  .pstep::before{top:18px}
  .zone-sw{width:36px;height:36px}
  /* nav wizard : boutons à largeur partagée (ne débordent plus à l'étroit) */
  .tnl-nav{gap:10px}
  .tnl-nav .btn{flex:1;min-width:0;justify-content:center;padding-left:14px;padding-right:14px}
}
@media(max-width:360px){
  /* très petit écran : on empile (CTA principal au-dessus, Précédent dessous) */
  .tnl-nav{flex-direction:column-reverse}
  .tnl-nav .btn{width:100%}
}