:root{
  --bg:#EFF2F5;
  --card:#ffffff;
  --border:#C5CDD6;
  --borderLight:#D8DEE6;
  --inputBg:#ffffff;
  --text:#101828;
  --muted:#667085;
  --green:#19B26B;
  --greenSoft:#E9F7EF;
  --shadow: 0 2px 8px rgba(16,24,40,0.08);
  --shadow2: 0 6px 20px rgba(16,24,40,0.12);
  --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
*{-webkit-tap-highlight-color:transparent}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

img,svg,canvas,video{
  max-width:100%;
  height:auto;
}

button,a,input,select,textarea{touch-action:manipulation}
button,.btn-primary,.typeCard,.tap-target{min-height:44px}
button:active,.btn-primary:active,.typeCard:active,a:active{transform:scale(0.98)}

input,select,textarea{font-size:16px}

/* ================================
   Mobile dashboard sidebar (PHP + appearance dashboard mode)
================================ */
.dash-sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  z-index:120;
  display:none;
}
.dash-sidebar-backdrop.is-open{display:block}

.dash-mobile-toggle{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.dash-mobile-toggle:hover{border-color:rgba(25,178,107,.35); color:var(--green)}

@media (max-width: 1024px){
  .dash-mobile-toggle{display:flex}
}

/* TOPBAR */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--card);
  border-bottom:1px solid var(--border);
  box-shadow: 0 2px 10px rgba(16,24,40,0.04);
}
.topbar__inner{
  width:min(1200px,96%);
  margin:0 auto;
  height:64px;
  display:flex;
  align-items:center;
  gap:16px;
}

/* Brand (clickable link) */
.brand{
  display:flex;align-items:center;gap:10px;min-width:190px;
  text-decoration:none;color:inherit;
  border-radius:10px;padding:4px 6px;margin:-4px -6px;
  transition:background .15s ease, color .15s ease;
}
.brand:hover{background:var(--greenSoft);}
.brand:hover .brand__name2{color:var(--green);}
.brand__icon{
  width:34px;height:34px;border-radius:10px;
  background:var(--greenSoft);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:4px;
  padding:7px;
}
.brand__icon span{display:block;background:var(--green);border-radius:3px}
.brand__text{line-height:1.25}
.brand__name{font-weight:800;font-size:15px;color:var(--text)}
.brand__name2{font-weight:800;font-size:15px;color:var(--green)}

/* Stepper */
.stepper{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:flex-end;
  min-width:0;
  overflow:auto;
  padding:0 24px;
  position:relative;
  z-index:1;
  background:var(--card);
}
.step{display:flex;align-items:center;gap:10px;white-space:nowrap}
.step__dot{
  width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;
  color:#64748B;
  border:2px solid #CBD5E1;
  background:#fff;
}
.step__label{font-size:12px;color:#475569;font-weight:600;letter-spacing:0.01em}
.step__line{
  width:28px;height:2px;
  background:#E2E8F0;
  flex:0 0 auto;
}
.step--done .step__dot{
  color:#fff;
  background:var(--green);
  border-color:var(--green);
}
.step--done .step__label{color:var(--text);font-weight:600}
.step--active .step__dot{
  color:#fff;
  background:var(--green);
  border-color:var(--green);
}
.step--active .step__label{color:var(--text);font-weight:700}

/* Right icon */
.iconBtn{
  width:34px;height:34px;border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  color:#667085;
  margin-right:-14px;
}
.iconBtn:hover{border-color:rgba(25,178,107,.35); color:var(--green)}

@media (max-width: 640px){
  .statsRow{flex-direction:column; gap:12px !important;}
  .stat-card{padding:14px !important; gap:12px !important;}
  .stat-card .text-3xl{font-size:22px !important; line-height:1.1 !important;}
  .stat-card p{font-size:12px !important; line-height:1.25 !important;}

  /* Remove burger/toggle on mobile (APK-like: navigation is bottom) */
  #dashToggle{display:none !important;}

  #dashMain{padding:16px !important;}

  #dashMain .min-w-\[250px\]{min-width:0 !important;}
  #dashMain .w-40{width:100% !important;}

  #dashMain .grid-cols-2{grid-template-columns:1fr !important;}
  #dashMain .gap-6{gap:12px !important;}

  #dashMain .text-2xl{font-size:20px !important;}
  #dashMain .text-xl{font-size:18px !important;}
  #dashMain .text-sm{font-size:13px !important;}
  #dashMain .text-xs{font-size:12px !important;}
  #dashMain .text-\[11px\]{font-size:11px !important;}

  #dashMain .text-green-500, #dashMain .text-green-600, #dashMain .text-blue-600{word-break:break-word; overflow-wrap:anywhere;}
  #dashMain a, #dashMain h4, #dashMain p{min-width:0;}

  /* Mes codes QR: stop overflow + prevent overlap */
  #dashMain .qrItemRow{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }
  #dashMain .qrItemRow > .flex-1{
    width:100% !important;
  }
  #dashMain .qrItemRow .grid{
    min-width:0 !important;
  }
  #dashMain .qrTarget{
    display:block !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  #dashMain .qrItemRow .flex.items-center.gap-2,
  #dashMain .qrItemRow .flex.items-center.gap-4{
    flex-wrap:wrap !important;
  }
  #dashMain .qrItemRow .flex.items-center.gap-2:last-child{
    justify-content:flex-start !important;
  }
  #dashMain .qrItemRow .flex.items-center.gap-2 a,
  #dashMain .qrItemRow .flex.items-center.gap-2 button{
    width:100% !important;
    justify-content:center !important;
  }

  /* QR item "..." menu: make it visible and not clipped on mobile */
  #dashMain .qrItemRow .flex.items-center.gap-2 .relative{
    width:100% !important;
  }
  #dashMain .qrItemRow .flex.items-center.gap-2 .relative > .btn-menu{
    width:100% !important;
    height:46px !important;
    border-radius:12px !important;
  }
  #dashMain .qrItemRow .flex.items-center.gap-2 .relative > .action-menu{
    position:static !important;
    width:100% !important;
    margin-top:8px !important;
  }

  /* Page actions fixed bar (above bottom nav) */
  .pageMobileActions{
    position:fixed;
    left:0;
    right:0;
    bottom:calc(82px + env(safe-area-inset-bottom));
    z-index:81;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:10px 12px;
    background:rgba(255,255,255,0.96);
    border-top:1px solid #e5e7eb;
    box-shadow:0 -10px 24px rgba(0,0,0,0.08);
    backdrop-filter:blur(8px);
  }
  .pageMobileActions__btn{
    min-height:46px;
    border-radius:12px;
    font-weight:800;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid transparent;
    width:100%;
  }
  .pageMobileActions__btn--primary{
    background:#63ca7d;
    color:#fff;
  }
  .pageMobileActions__btn--secondary{
    background:#fff;
    color:#10b981;
    border-color:#10b981;
  }
}

/* Page */
.page{
  padding:26px 0 48px;
}
.page__inner{width:min(1200px,92%);margin:0 auto}

/* Headline */
.headline{
  text-align:center;
  font-size:30px;
  margin:22px 0 22px;
  font-weight:800;
}
.headline__green{color:var(--green)}

/* Layout */
.layout{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:22px;
  align-items:start;
}

/* Left side */
.left{position:relative}
.callout{
  position:absolute;
  left:0;
  top:62px; /* remonte vers le titre "Créez facilement" */
  width:220px;
  pointer-events:none;
}
.callout__badge{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
  color:var(--green);
  box-shadow:var(--shadow);
  display:inline-block;
  line-height:1.15;
}
.callout__arrow{
  position:absolute;
  left:70px;
  top:-78px;   /* la queue part plus haut (vers le titre) */
  width:280px; /* flèche plus longue */
  height:180px;
}

/* Grid */
.typeGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  padding-left:230px; /* laisse la place au callout */
}

@media (max-width: 1024px){
  .page{padding:16px 0 22px}
  .headline{font-size:22px; margin:16px 0 14px;}
  .layout{grid-template-columns:1fr;}
  .callout{display:none;}
  .typeGrid{
    grid-template-columns:repeat(2, 1fr);
    padding-left:0;
    gap:12px;
  }
  .typeCard{min-height:118px;}
}

/* Cards */
.typeCard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 14px;
  text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-height:132px;
}
.typeCard:hover{
  transform: translateY(-2px);
  border-color: rgba(25,178,107,.35);
  box-shadow:var(--shadow2);
}
.typeCard.is-selected{
  border-color: rgba(25,178,107,.55);
  box-shadow:var(--shadow2);
}
.typeCard__icon{
  width:40px;height:40px;border-radius:12px;
  background:var(--greenSoft);
  color:var(--green);
  display:grid;place-items:center;
  font-weight:800;
  margin-bottom:10px;
}
.typeCard__icon svg{
  width:22px;height:22px;
}
.typeCard__icon--text{
  font-size:20px;
  font-weight:800;
  color:var(--green);
}
.typeCard__title{font-weight:800;font-size:15px;margin-bottom:6px}
.typeCard__desc{font-size:12px;color:var(--muted);line-height:1.35}

/* Right */
.right{display:flex;flex-direction:column;gap:18px}

/* Phone mock */
.phone{
  background:transparent;
  display:flex;
  justify-content:center;
}
.phone__screen{
  width:360px;
  height:740px;
  border-radius:52px;
  background:#fff;
  border:10px solid #111827;
  box-shadow: 0 14px 40px rgba(16,24,40,0.12);
  position:relative;
  overflow:hidden;
}
.phone__screen:before{
  content:"";
  position:absolute;
  top:10px; left:50%;
  transform:translateX(-50%);
  width:120px;height:22px;border-radius:999px;
  background:#111827;
}
.phone__qrWrap{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  padding:26px;
}
.phone__qrInner{
  width:100%;
  max-width:240px;
  background:#fff;
  border:1px solid #EEF2F6;
  border-radius:18px;
  padding:18px;
  text-align:center;
}
.phone__hint{color:var(--muted);font-weight:700;font-size:14px;line-height:1.2}
.phone__qr{width:100%;height:auto;border-radius:14px}
.phone__qrFrame{min-height:160px;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box}
.phone__qrFrame--none{border:none;background:transparent}
.phone__qrFrame--simple{border:3px solid #344054;border-radius:12px;background:#fff}
.phone__qrFrame--rounded{border:3px solid #19B26B;border-radius:20px;background:#fff}
.phone__qrFrame--double{border:6px double #344054;border-radius:14px;background:#fff}
#qrPreviewContainer{display:flex;align-items:center;justify-content:center}
#qrPreviewContainer canvas{max-width:100%;height:auto;border-radius:8px}
.phone__qrInner .phone__hint[hidden]{display:none}

/* Panel */
.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}

/* Your existing form styles adjusted */
.form{display:block}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field:last-child{margin-bottom:0}
label{font-size:13px;font-weight:700;color:#344054;letter-spacing:-0.01em}
input, select, textarea{
  width:100%;
  border:2px solid var(--border);
  border-radius:10px;
  padding:11px 14px;
  font: inherit;
  background:var(--inputBg);
  outline:none;
  transition:all 0.2s;
  font-size:14px;
}
input[type="file"]{
  padding:12px 14px;
  border:2px dashed var(--border);
  border-radius:10px;
  background:var(--inputBg);
  width:100%;
  cursor:pointer;
  font-size:13px;
  color:var(--muted);
}
input[type="file"]:hover{
  border-color:#19B26B;
  background:var(--greenSoft);
  color:var(--text);
}
.fileUploadWrap input[type="file"]{
  display:block;
}
input:hover:not([type="file"]), select:hover, textarea:hover{
  border-color:#A8B3C0;
  background:var(--inputBg);
}
input:focus:not([type="file"]), select:focus, textarea:focus{
  border-color:#19B26B;
  box-shadow: 0 0 0 3px rgba(25,178,107,.15);
  background:var(--inputBg);
}
.hint{color:var(--muted);font-size:12px;margin-top:4px}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.hex{margin-top:6px}

/* Color picker amélioré */
.colorSection{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin:12px 0;
}
.colorField{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wifi-block,
.vcard-block {
  background: var(--inputBg);
  border:2px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.colorPickerWrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  background:var(--inputBg);
  border:2px solid var(--border);
  border-radius:12px;
  transition:all 0.2s;
}
.colorPickerWrap:focus-within{
  border-color:#19B26B;
  box-shadow:0 0 0 3px rgba(25,178,107,0.1);
}
.colorPreview{
  width:48px;
  height:48px;
  border-radius:10px;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  flex-shrink:0;
  cursor:pointer;
  transition:transform 0.2s;
}
.colorPreview:hover{
  transform:scale(1.05);
}
.colorInput{
  width:60px;
  height:40px;
  border:1px solid #E6ECF2;
  border-radius:8px;
  padding:2px;
  background:#fff;
  cursor:pointer;
  flex-shrink:0;
}
.colorInput::-webkit-color-swatch-wrapper{padding:0}
.colorInput::-webkit-color-swatch{border:none;border-radius:6px}
.colorField .hex{
  flex:1;
  margin:0;
  padding:8px 10px;
  border:1px solid #E6ECF2;
  border-radius:8px;
  background:#fff;
  font-family:monospace;
  font-size:13px;
}

.actions{margin-top:16px;display:flex;justify-content:flex-end;gap:10px}
.btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  padding:11px 18px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:all 0.2s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
  box-shadow:0 2px 8px rgba(25,178,107,0.2);
}
.btn-primary:hover{
  background:#0D8A4F;
  border-color:#0D8A4F;
  box-shadow:0 4px 12px rgba(25,178,107,0.3);
  transform:translateY(-1px);
}
.btn-primary:active{
  transform:translateY(0);
}
.btn-secondary:hover{border-color:rgba(25,178,107,.35)}

/* result */
.result{margin-top:14px}
.result h2{margin:0 0 10px;font-size:14px}
.preview-wrap{
  background:#F8FAFC;
  border:1px solid #EEF2F6;
  border-radius:14px;
  padding:12px;
  display:grid;
  place-items:center;
}
.preview{width:100%;height:auto;max-width:320px}
.result-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.resultCard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.resultCard__title{margin:0 0 16px;font-weight:800;font-size:18px}
.resultCard .preview-wrap{margin-bottom:16px}
.resultCard .result-actions{margin-bottom:12px}
.finish-new{display:inline-block;margin-top:8px}
.emptyState{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.emptyState__text{margin:0 0 8px;font-weight:700;font-size:16px}
.emptyState__sub{margin:0 0 16px;color:var(--muted);font-size:14px}
.emptyState .btn{margin-right:8px;margin-bottom:8px}

.loading{
  margin-top:12px;
  display:flex;align-items:center;gap:10px;
  color:var(--muted);
  font-weight:600;
}
.spinner{
  width:18px;height:18px;border-radius:999px;
  border:2px solid #E6ECF2;
  border-top-color: var(--green);
  animation: spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.error{
  margin-top:12px;
  background:#FFF4F4;
  border:1px solid #FECACA;
  color:#B42318;
  border-radius:10px;
  padding:12px 14px;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}
.error:before{
  content:"⚠";
  font-size:16px;
  flex-shrink:0;
}
.error[hidden],
.error--inline[hidden]{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  border:none !important;
}

.file-warning{
  background:#FFFBEB;
  border:1px solid #FED7AA;
  color:#92400E;
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:12px;
}
.file-warning[hidden]{display:none}
.file-warning code{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:6px}

/* responsive */
@media (max-width: 1100px){
  .layout{grid-template-columns: 1fr}
  .typeGrid{padding-left:0;grid-template-columns: repeat(2, 1fr)}
  .callout{display:none}
  .right{align-items:center}
  .panel{width:min(560px,100%)}
}
@media (max-width: 640px){
  .typeGrid{grid-template-columns: 1fr}
  .headline{font-size:22px}
  .stepper{justify-content:flex-start}
}

@media (max-width: 640px){
  /* Sur mobile, on réduit le padding de topbar inner */
  .topbar__inner{width:min(1200px,94%); gap:10px;}
  .brand{min-width:0}
  .brand__text{display:none}
}

/* Responsive: Step 3 (appearance) - phone preview always bottom on mobile */
@media (max-width: 1100px){
  .layout.step3{
    grid-template-columns: 1fr;
  }
  .layout.step3 .left{order:1}
  .layout.step3 .right{order:2}
  .layout.step3 .phone__screen{
    width:min(360px, 92vw);
    height:auto;
    aspect-ratio: 360 / 740;
  }
}

/* Dashboard pages (Tailwind) - reduce font/padding on small screens */
@media (max-width: 640px){
  .stat-card{padding:16px}
}
/* ===== Step 2 page layout ===== */
.stepTitle h1{
  margin: 20px 0 20px;
  font-size: 28px;
  font-weight: 800;
  color: #101828;
  letter-spacing:-0.02em;
}

.layout.step2{
  grid-template-columns: 1.05fr .95fr;
}

/* Accordion */
.accordion{display:flex;flex-direction:column;gap:16px}
.accItem{
  background:var(--card);
  border:2px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  transition:all 0.2s;
}
.accItem:hover{
  border-color:#A8B3C0;
  box-shadow: 0 4px 14px rgba(16,24,40,0.1);
}
.accItem[open]{
  border-color:#19B26B;
  box-shadow: 0 6px 18px rgba(25,178,107,0.15);
}
.accHead{
  list-style:none;
  cursor:pointer;
  display:flex;
  gap:14px;
  align-items:center;
  padding:18px 20px;
  transition:background 0.2s;
  background:#fff;
  border-bottom:1px solid var(--borderLight);
  width:100%;
  position:relative;
  user-select:none;
}
.accItem[open] .accHead{
  border-bottom-color:var(--borderLight);
}
.accHead:hover{
  background:#F8FAFC;
}
.accHead::-webkit-details-marker{display:none}
.accHead::marker{display:none}
/* Flèche déroulante visible */
.accChevron{
  margin-left:auto;
  flex-shrink:0;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:transform 0.25s ease;
}
.accChevron svg{
  width:20px;
  height:20px;
}
.accItem[open] .accChevron{
  transform:rotate(180deg);
  color:var(--green);
}
.accIcon{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg, #19B26B 0%, #0D8A4F 100%);
  display:grid;place-items:center;
  color:#fff;
  flex-shrink:0;
}
.accIcon svg{width:20px;height:20px}
.accText{display:flex;flex-direction:column;gap:2px}
.accTitle{font-weight:800}
.accSub{font-size:12px;color:var(--muted)}
.req{color:#E11D48;font-weight:900}
.accBody{
  padding:20px;
  background:#FAFBFD;
  border-top:1px solid var(--borderLight);
}
.typeBadge{
  margin:0 0 16px;
  padding:10px 14px;
  background:linear-gradient(135deg, #E9F7EF 0%, #D1F2E0 100%);
  border:1px solid rgba(25,178,107,0.2);
  border-radius:10px;
  font-size:13px;
  color:var(--text);
  font-weight:600;
}
.typeBadge strong{
  color:var(--green);
  font-weight:800;
}

/* Sub accordion (like blocks “Nom”, “Mot de passe”) */
.subAcc{
  border:2px solid var(--border);
  border-radius:12px;
  margin-top:14px;
  overflow:hidden;
  background:var(--inputBg);
}
.subAcc[open]{
  background:var(--inputBg);
  border-color:#B3BDC8;
}
.subAcc__head{
  padding:14px 16px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  background:var(--inputBg);
  transition:background 0.2s;
  color:#344054;
  border-bottom:1px solid var(--borderLight);
}
.subAcc[open] .subAcc__head{
  border-bottom:1px solid var(--borderLight);
}
.subAcc__head:hover{
  background:#F2F4F7;
}
.subAcc__head::-webkit-details-marker{display:none}
.subAcc__body{padding:16px;background:#fff;border-top:1px solid var(--borderLight)}

/* Form in step 2 */
.form--flat input:not([type="file"]):not([type="color"]), .form--flat select, .form--flat textarea{
  background:#fff;
}
.form--flat select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
  appearance:none;
}

/* Buttons bottom like the screenshot */
.actions--between{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #F2F4F7;
}
.btn-ghost{
  background:#fff;
  border:1px solid var(--border);
  color:#667085;
  transition:all 0.2s;
}
.btn-ghost:hover{
  background:#F9FAFB;
  border-color:#D0D5DD;
  color:#344054;
}

/* Preview tabs */
.previewTabs{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-bottom:10px;
}
.tab{
  border:1px solid var(--border);
  background:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.tab--active{
  background:#19B26B;
  border-color:#19B26B;
  color:#fff;
}

/* Phone orange header in step2 */
.phone__screen--orange{
  background: linear-gradient(180deg, #F59E0B 0%, #F59E0B 32%, #fff 32%, #fff 100%);
}
.phone__screen--orange:before{background:#111827}

/* Skeleton inside phone */
.skeleton{width:100%}
.skTop{
  height:18px;border-radius:999px;
  background:rgba(255,255,255,.25);
  margin-bottom:14px;
}
.skBox{
  height:180px;border-radius:14px;
  background:#E5E7EB;
  margin-bottom:14px;
}
.skLine{
  height:10px;border-radius:999px;
  background:#E5E7EB;
  margin-bottom:10px;
}
.skLine.short{width:60%}
.skFooter{
  height:46px;border-radius:10px;
  background:#E5E7EB;
  margin-top:18px;
}

/* Responsive step2 */
@media (max-width: 1100px){
  .layout.step2{grid-template-columns:1fr}
}
.layout.step3{grid-template-columns: 1.15fr .85fr;}
.miniTitle{font-weight:800;font-size:12px;color:#344054;margin:10px 0 10px}
.pickGrid{display:flex;flex-wrap:wrap;gap:12px}
.pickCard{
  width:64px;height:64px;border-radius:12px;
  background:var(--inputBg);
  border:2px solid var(--border);
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
  cursor:pointer;
  font-weight:800;
  font-size:20px;
  color:#344054;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  transition:all 0.2s;
}
.pickCard:hover{
  border-color:#19B26B;
  background:#E9F7EF;
  color:#19B26B;
}
.pickCard.is-selected{
  border:2px solid #19B26B;
  background:#E9F7EF;
  color:#19B26B;
  box-shadow: 0 0 0 3px rgba(25,178,107,0.2);
}
.pickCard__symbol{
  font-size:22px;
  line-height:1;
}
.pickCard .pickCard__label,
.pickCard__label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.twoCols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mt16{margin-top:16px}
.mt12{margin-top:12px}
.mt8{margin-top:8px}

.colorRow{display:flex;gap:10px;align-items:center}
.colorRow input[type="color"]{width:46px;height:42px;border:1px solid #E6ECF2;border-radius:10px;padding:0;background:#fff}
.hint{font-size:12px;color:#667085}
.hintBox{
  border:1px solid #E6ECF2;
  background:#F9FAFB;
  border-radius:12px;
  padding:12px;
  color:#667085;
  font-size:12px;
}

.bottomBar{
  position:sticky;
  bottom:0;
  background:#fff;
  border-top:1px solid #E6ECF2;
  padding:14px 0;
}
.bottomBar__inner{
  width:min(1200px,92%);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
/* ================================
   VCARD STEP (Etape 2) - styles
   Ajoute à la fin de style.css
================================ */
.vcardStep .left { min-width: 520px; }
.vcardStep .right { min-width: 380px; }

.vRow{display:flex;gap:14px;flex-wrap:wrap}
.vRow--gap{gap:14px}
.vRow--between{justify-content:space-between}
.vRow--center{align-items:center}
.vHalf{flex:1;min-width:240px}
.vThird{flex:1;min-width:180px}
.vTwoThird{flex:2;min-width:260px}

.vPalette{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.swatch{border:2px solid #e7eef0;border-radius:12px;padding:6px;background:#fff;display:flex;gap:6px;cursor:pointer}
.swatch span{width:32px;height:24px;border-radius:8px;display:block}
.swatch.is-active{border-color:#19B26B}

.vColorLine{display:flex;gap:10px;align-items:center}
.vColorLine input[type="color"]{width:44px;height:40px;border:none;background:transparent;padding:0}
.vColorLine .hex{flex:1;min-width:120px}

.vUpload{display:inline-block}
.vUploadBox{width:90px;height:90px;border:2px dashed #7dd8ac;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#19B26B;background:#fff;cursor:pointer}
.vUploadIcon{font-size:24px}
.vAvatarField{max-width:130px}

.vBlock{margin-top:12px;padding-top:8px}
.vBlockHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.vBlockTitle{font-weight:700;color:#1b2b2a}
.vAddBtn{width:34px;height:34px;border-radius:10px;border:1px solid #19B26B;background:#19B26B;color:#fff;font-weight:800;cursor:pointer}
.vRepeater{display:flex;flex-direction:column;gap:10px}

.vRepRow{background:#fff;border:1px solid #edf2f4;border-radius:14px;padding:12px;position:relative}
.vRepCols{display:flex;gap:12px;flex-wrap:wrap}
.vDelBtn{position:absolute;right:10px;top:10px;border:1px solid #ffb4b4;background:#fff;color:#e63946;border-radius:10px;padding:6px 8px;cursor:pointer}

.vCheck{display:flex;gap:10px;align-items:center;margin-top:10px;color:#3b4b4a}
.vCheck input{width:18px;height:18px}

.vSocialGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin:10px 0}
.soc{height:42px;border-radius:12px;border:1px solid #eef2f4;background:#fff;cursor:pointer;font-weight:800;color:#263a39}
@media (max-width: 1100px){
  .vSocialGrid{grid-template-columns:repeat(6,1fr)}
}

.vMuted{color:#7a8b8a;font-size:14px}

/* Phone vCard preview */
.phone__screen--vcard{
  padding:0;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
}
.vPhoneTop{padding:26px 16px 18px;text-align:center;color:#fff;position:relative}
.vAvatar{width:92px;height:92px;border-radius:999px;background:rgba(255,255,255,.18);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border:6px solid rgba(255,255,255,.85)}
.vAvatar img{width:100%;height:100%;object-fit:cover;border-radius:999px;display:none}
.vName{font-size:28px;font-weight:800;letter-spacing:-0.02em}
.vRole{font-size:18px;opacity:.85;margin-top:4px}
.vQuick{display:flex;justify-content:center;gap:18px;margin-top:18px;transform:translateY(16px)}
.vQuickBtn{width:64px;height:64px;border-radius:999px;border:none;background:rgba(255,255,255,.9);color:#0b1a16;font-size:20px;cursor:pointer}

.vPhoneBody{
  padding:30px 18px 16px;
  color:#1b2b2a;
  flex:1;
  overflow-y:auto;
}
.vSummary{color:#7a8b8a;font-size:18px;line-height:1.6;margin:0 0 16px;text-align:center}
.vList{background:#fff;border-radius:18px}
.vRowItem{display:flex;gap:12px;align-items:flex-start;padding:12px 10px;border-top:1px solid #eef2f4}
.vRowItem:first-child{border-top:none}
.vRowIcon{width:44px;height:44px;border-radius:999px;background:#f3f6f7;display:flex;align-items:center;justify-content:center;font-size:18px}
.vRowLabel{font-size:13px;color:#8a9a99}
.vRowValue{font-size:18px;font-weight:600;color:#1b2b2a;margin-top:2px}
.vMapBtn{display:inline-block;margin-top:10px;background:#e8f2ee;color:#1b2b2a;border-radius:999px;padding:10px 14px;text-decoration:none;font-weight:600;font-size:14px}

.vSocialTitle{font-size:28px;font-weight:900;margin:18px 0 10px}
.vSocialList{display:flex;flex-direction:column;gap:12px}
.vSocialItem{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1px solid #eef2f4;border-radius:16px;padding:14px;color:#1b2b2a}
.vSocialIcon{width:46px;height:46px;border-radius:12px;background:#eaf2ff;display:flex;align-items:center;justify-content:center;font-weight:900}
.vSocialName{font-weight:800}
.vSocialSub{color:#8a9a99;font-size:14px;margin-top:2px}
.vSocialArrow{margin-left:auto;color:#7a8b8a;font-weight:900}

.vAddContact{width:100%;margin-top:14px;background:#0b1a16;color:#fff;border:none;border-radius:14px;padding:14px 16px;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.vAddContact.is-top{position:absolute;left:18px;right:18px;bottom:auto;top:220px}

.vActionsSticky{position:sticky;bottom:0;background:transparent;padding-top:10px}

/* helper: hide phone when QR tab selected */
.phone.is-hidden{display:none}