/* ── Variables ─────────────────────────────────── */
:root {
  --c1: #C5000B;
  --c2: #006400;
  --c3: #3771C8;
  --c4: #FF9900;
  --c5: #FF6699;
  --blue:   #2563eb;
  --border: #e2e8f0;
  --bg:     #f1f5f9;
  --card:   #ffffff;
  --text:   #1e293b;
  --muted:  #64748b;
  --radius: 10px;
  --shadow: 0 1px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* ── Header ─────────────────────────────────────── */
header { background: linear-gradient(135deg,#1e40af,#2563eb); color:#fff; padding:1rem 2rem; display:flex; align-items:center; gap:.9rem; }
.header-icon { font-size:1.8rem; }
header h1 { font-size:1.2rem; font-weight:700; }
header p  { font-size:.78rem; opacity:.75; margin-top:.1rem; }

/* ── Page ─────────────────────────────────────── */
.page { max-width:920px; margin:0 auto; padding:1.25rem 1.1rem 3rem; }

/* ── Settings panel ──────────────────────────── */
.settings-panel { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.2rem; margin-bottom:1.25rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.8rem; }
.settings-row { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.settings-row + .settings-row { border-top:1px solid var(--border); padding-top:.75rem; }

.sg { display:flex; flex-direction:column; gap:.25rem; }
.sg > label { font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.sg input[type=text], .sg input[type=number] {
  padding:.3rem .5rem; border:1.5px solid var(--border); border-radius:6px;
  font-size:.85rem; font-family:inherit; color:var(--text); background:white;
  transition:border-color .15s;
}
.sg input:focus { outline:none; border-color:var(--blue); }
.sg .w50 { width:56px; }
.sg .w72 { width:72px; }
.sg .font-fam { width:140px; }

.cg { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.cg > label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.cg input[type=color] { width:38px; height:28px; padding:1px 2px; border:1.5px solid var(--border); border-radius:5px; cursor:pointer; }

.chk-label { display:flex; align-items:center; gap:.45rem; font-size:.84rem; font-weight:500; cursor:pointer; user-select:none; }
.chk-label input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--blue); }

/* ── Tabs ──────────────────────────────────────── */
.tab-nav { display:flex; border-bottom:2px solid var(--border); margin-bottom:1.25rem; overflow-x:auto; scrollbar-width:none; }
.tab-nav::-webkit-scrollbar { display:none; }
.tab-btn {
  flex-shrink:0;
  /* padding:.55rem 1.1rem; */
  padding: 0.6rem 0.9rem;
  background:none;
  border:none;
  border-bottom:2.5px solid transparent;
  margin-bottom:-2px;
  cursor:pointer;
  font-size:.82rem;
  font-weight:500;
  color:var(--muted);
  transition:color .15s,border-color .15s;
  white-space:nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;  /* Positionner sous le bouton */
  left: 0;
  right: 0;
  height: 3.5px;
  background: transparent;
  transition: background .15s;
}

.tab-btn.active::after {
  background: var(--blue);
}

.tab-btn.active {
  color: var(--blue);
  font-weight: 600;
}

.tab-icon {
  flex-shrink: 0;
  width: 64px;
  height: auto;
}

.tab-text {
  line-height: 1.25;
  text-align: left;
  font-size: 0.78rem;
}

/* .tab-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue) !important;
  font-weight: 600;
} */

.tab-btn:hover { color:var(--blue); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }



/* ── Card ──────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); }
.card-title { font-size:.975rem; font-weight:700; }
.card-sub   { font-size:.78rem; color:var(--muted); margin-top:.15rem; margin-bottom:1.2rem; }

/* ── Steps ─────────────────────────────────────── */
.steps { display:flex; flex-direction:column; gap:.55rem; }
.step { display:flex; align-items:center; gap:.75rem; border-radius:7px; padding:.55rem .9rem; border-left:3.5px solid; background:#fafafa; }
.step-1 { border-left-color:var(--c1); }
.step-2 { border-left-color:var(--c2); }
.step-3 { border-left-color:var(--c3); }
.step-4 { border-left-color:var(--c4); }
.step-5 { border-left-color:var(--c5); }
.step-1 .step-n { color:var(--c1); }
.step-2 .step-n { color:var(--c2); }
.step-3 .step-n { color:var(--c3); }
.step-4 .step-n { color:var(--c4); }
.step-5 .step-n { color:var(--c5); }
.step-1 .step-body { color:var(--c1); }
.step-2 .step-body { color:var(--c2); }
.step-3 .step-body { color:var(--c3); }
.step-4 .step-body { color:var(--c4); }
.step-5 .step-body { color:var(--c5); }
.step-n { flex-shrink:0; width:1.4rem; height:1.4rem; border-radius:50%; border:2px solid currentColor; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.step-body { font-size:.875rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; line-height:1.7; }
.dyn { display:inline-flex; align-items:center; justify-content:center; padding:0 .35rem; min-width:1.3rem; height:1.3rem; background:rgba(0,0,0,.07); border-radius:3px; font-size:.78rem; font-weight:700; }

/* Champs des étapes */
.f-seg  { width:62px; text-align:center; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text) !important; }
.f-name { width:44px; text-align:center; font-weight:700; text-transform:uppercase; color:var(--text) !important; }
.f-num  { width:64px; text-align:center; color:var(--text) !important; }
.step input[type=text], .step input[type=number] {
  padding:.26rem .45rem; border:1.5px solid #cbd5e1; border-radius:5px;
  font-size:.875rem; font-family:inherit; background:white;
  transition:border-color .15s;
}
.step input:focus { outline:none; border-color:#64748b; box-shadow:0 0 0 2px rgba(100,116,139,.12); }

/* ── Erreur ────────────────────────────────────── */
.err { font-size:.8rem; color:#dc2626; background:#fef2f2; border:1px solid #fecaca; border-radius:5px; padding:.4rem .7rem; margin-top:.7rem; display:none; align-items:center; gap:.4rem; }
.err.on { display:flex; }

/* ── Actions ───────────────────────────────────── */
.actions { margin-top:1.2rem; display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.btn-gen { background:var(--blue); color:white; border:none; padding:.55rem 1.3rem; border-radius:7px; font-size:.875rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:.4rem; transition:background .15s; }
.btn-gen:hover { background:#1d4ed8; }
.btn-sec { background:white; color:var(--text); border:1.5px solid var(--border); padding:.5rem 1rem; border-radius:7px; font-size:.82rem; cursor:pointer; display:flex; align-items:center; gap:.35rem; transition:border-color .15s,color .15s; }
.btn-sec:hover { border-color:var(--blue); color:var(--blue); }

/* ── Coming soon ───────────────────────────────── */
.coming { padding:3.5rem 1rem; text-align:center; color:var(--muted); }
.coming-icon { font-size:2rem; margin-bottom:.5rem; }
.coming p { font-size:.875rem; }
.coming strong { color:var(--text); }

/* ── Aperçu SVG ────────────────────────────────── */
.preview-section { margin-top:1.4rem; }
.preview-title { font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }
.preview-title::after { content:''; flex:1; height:1px; background:var(--border); }
.svg-host {
  display:flex; justify-content:center;
  align-items: flex-start;
  background: repeating-conic-gradient(#e5e7eb 0% 25%, white 0% 50%) 0 0/20px 20px;
  border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem;
  overflow:auto;
}
/* .svg-host svg { display:block; overflow: visible !important; max-width: 100%; height: auto;} */
.svg-host svg { display:block; overflow: visible !important; }


#toast-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #16a34a;
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 9999;
}

#toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}