[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
   Prynko — Agent commercial · Design system
   Palette encre & papier, vert Prynko, esthétique "bon de travail"
   Type : Space Grotesk (display) · Inter (texte) · JetBrains Mono (données)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #131A16;
  --ink-soft: #3A443E;
  --muted: #6E7871;
  --paper: #F5F6F2;
  --card: #FFFFFF;
  --line: #E2E6DF;
  --line-strong: #CDD4CB;
  --brand: #00A63E;
  --brand-deep: #0B3B20;
  --brand-tint: #E7F7EC;
  --amber: #A8650A;
  --amber-tint: #FBF1E0;
  --red: #B3402F;
  --red-tint: #FBEAE7;
  --blue: #1F5E8F;
  --blue-tint: #E7F0F7;
  --side: #0E1A12;
  --side-hover: #1A2B1F;
  --radius: 14px;
  --radius-s: 9px;
  --shadow: 0 1px 2px rgba(19,26,22,.05), 0 8px 28px rgba(19,26,22,.06);
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: 236px;
  background: var(--side);
  color: #E6EDE7;
  padding: 22px 14px;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.brand { display: flex; gap: 11px; align-items: center; margin: 2px 8px 26px; }
.brand strong { font-family: var(--font-display); font-size: 16.5px; letter-spacing: .01em; display: block; }
.brand span { display: block; color: #7E9285; font-size: 12px; margin-top: 1px; }
.logo {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: var(--brand);
  display: grid; place-items: center;
  color: #05230F; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.navGroup {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #5F7266; margin: 16px 10px 6px;
}
.nav {
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: transparent;
  color: #B9C6BC; text-align: left;
  padding: 10px 12px; border-radius: 10px; margin: 2px 0;
  cursor: pointer; font: inherit; font-size: 14px;
  transition: background .15s, color .15s;
}
.nav:hover { background: var(--side-hover); color: #fff; }
.nav.active { background: var(--side-hover); color: #fff; font-weight: 600; }
.navDot { width: 6px; height: 6px; border-radius: 50%; background: #44584B; flex: none; transition: background .15s; }
.nav.active .navDot { background: var(--brand); box-shadow: 0 0 0 3px rgba(0,166,62,.22); }
.sidebarFoot { margin-top: 18px; padding: 12px 10px 4px; border-top: 1px solid #22332A; flex: none; }
.ghostLink { color: #8FA396; text-decoration: none; font-size: 13px; }
.ghostLink:hover { color: #fff; }

/* ── Layout principal ────────────────────────────────────── */
main {
  margin-left: 236px;
  padding: 34px 40px 60px;
  width: calc(100% - 236px);
  max-width: none;
}
.view { display: none; animation: fadeUp .25s ease; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pageHead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
h1 { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.hint { color: var(--muted); font-size: 12.5px; }

/* ── KPIs ────────────────────────────────────────────────── */
.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpis.standalone { margin-bottom: 20px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 18px 12px; min-width: 108px;
}
.kpi span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; }
.kpi strong { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.brandNum { color: var(--brand-deep); }

/* ── Panels & cartes ─────────────────────────────────────── */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.panelHead { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.notice { border-left: 3px solid var(--brand); font-size: 13.5px; color: var(--ink-soft); }
.notice code, td code { font-family: var(--font-mono); font-size: 12px; background: var(--brand-tint); color: var(--brand-deep); border-radius: 5px; padding: 1px 5px; }

.twoCol { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }

/* ── Signature : panneau "bon de travail" avec repères de coupe ── */
.ticketPanel { position: relative; }
.ticketPanel::before, .ticketPanel::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--line-strong); border-style: solid;
}
.ticketPanel::before { top: 9px; left: 9px; border-width: 1.5px 0 0 1.5px; }
.ticketPanel::after { bottom: 9px; right: 9px; border-width: 0 1.5px 1.5px 0; }

/* File d'action : tickets de job */
.queue { display: flex; flex-direction: column; gap: 10px; }
.ticket {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 16px 12px 0; background: var(--card);
  cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
  overflow: hidden;
}
.ticket:hover { border-color: var(--brand); transform: translateX(2px); box-shadow: var(--shadow); }
.ticketEdge {
  width: 34px; align-self: stretch; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  border-right: 1px dashed var(--line-strong);
  color: var(--muted);
}
.ticket.due .ticketEdge { background: var(--amber-tint); color: var(--amber); border-right-color: #E5CFA7; }
.ticket.fresh .ticketEdge { background: var(--brand-tint); color: var(--brand-deep); border-right-color: #BCE3C8; }
.ticketBody strong { display: block; font-size: 14px; }
.ticketBody span { color: var(--muted); font-size: 12.5px; }
.ticketAction { font-size: 12.5px; color: var(--brand-deep); font-weight: 600; white-space: nowrap; }
.queueEmpty { color: var(--muted); font-size: 13.5px; padding: 18px 4px; text-align: center; }
.queueEmpty strong { color: var(--brand-deep); }

/* Pipeline */
.pipeline { display: flex; flex-direction: column; gap: 7px; }
.pipeRow {
  display: grid; grid-template-columns: 96px 1fr 34px; gap: 12px; align-items: center;
  border: 0; background: transparent; padding: 4px 6px; border-radius: 7px;
  cursor: pointer; font: inherit; text-align: left; color: var(--ink);
}
.pipeRow:hover { background: var(--paper); }
.pipeRow span { font-size: 12.5px; color: var(--ink-soft); }
.pipeBar { height: 9px; background: var(--paper); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.pipeBar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; min-width: 0; transition: width .4s ease; }
.pipeRow.lost .pipeBar i { background: var(--line-strong); }
.pipeRow strong { font-family: var(--font-mono); font-size: 13px; text-align: right; }

/* Interactions récentes */
.interList { display: flex; flex-direction: column; gap: 2px; }
.interItem { display: flex; gap: 10px; align-items: baseline; padding: 7px 6px; border-radius: 7px; font-size: 13px; }
.interItem:hover { background: var(--paper); }
.interType {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px; flex: none;
  background: var(--blue-tint); color: var(--blue);
}
.interType.call { background: var(--amber-tint); color: var(--amber); }
.interType.note { background: var(--paper); color: var(--muted); }
.interItem span { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }

/* ── Boutons & champs ────────────────────────────────────── */
.actions, .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
button, .button, select, input, textarea {
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: var(--radius-s); padding: 9px 14px;
  font: inherit; color: var(--ink);
}
input, textarea, select { transition: border-color .15s, box-shadow .15s; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, .button:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,166,62,.16);
}
button, .button { cursor: pointer; text-decoration: none; font-weight: 500; transition: background .15s, border-color .15s; }
button:hover, .button:hover { background: var(--paper); }
button.primary, .primary {
  background: var(--brand); border-color: var(--brand);
  font-weight: 600; color: #fff;
}
button.primary:hover, .primary:hover { background: #059238; border-color: #059238; }
.iconBtn { border: 0; background: transparent; font-size: 26px; line-height: 1; padding: 4px 10px; color: var(--muted); }
.iconBtn:hover { color: var(--ink); background: transparent; }
.toolbar input { flex: 1; min-width: 220px; }

/* Étapes agent */
.stepsRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stepCard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 16px 18px; text-align: left;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow);
}
.stepCard:hover { border-color: var(--brand); background: var(--card); }
.stepCard strong { font-family: var(--font-display); font-size: 15px; }
.stepCard span:last-child { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.stepNo {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--brand-deep); background: var(--brand-tint);
  border-radius: 6px; padding: 2px 8px; margin-bottom: 5px;
}
.stepCard.prime { background: var(--brand-deep); border-color: var(--brand-deep); }
.stepCard.prime strong, .stepCard.prime span:last-child { color: #fff; }
.stepCard.prime span:last-child { color: #9FC6AC; }
.stepCard.prime .stepNo { background: rgba(255,255,255,.14); color: #C9EBD4; }
.stepCard.prime:hover { background: #0F4A29; }

/* Logs */
#logs {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  background: var(--side); color: #C9E8D2;
  border-radius: var(--radius-s); padding: 16px; margin: 0;
  min-height: 240px; max-height: 420px; overflow: auto; white-space: pre-wrap;
}

/* ── Tableaux ────────────────────────────────────────────── */
.tableWrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
.tableWrap.inset { box-shadow: none; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #FAFBF8; }
th {
  font-size: 11px; color: var(--muted); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  background: #FAFBF8; position: sticky; top: 0;
}
.scoreCell { display: flex; align-items: center; gap: 9px; }
.scoreNum { font-family: var(--font-mono); font-weight: 600; font-size: 15px; min-width: 26px; }
.badge {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.badge.A { background: var(--brand-tint); color: var(--brand-deep); }
.badge.B { background: var(--blue-tint); color: var(--blue); }
.badge.C { background: var(--amber-tint); color: var(--amber); }
.badge.D { background: var(--red-tint); color: var(--red); }
.muted { color: var(--muted); font-size: 12.5px; }
td a { color: var(--brand-deep); }
select.status { min-width: 128px; padding: 6px 8px; font-size: 13px; }
.fuTag { font-size: 12px; font-family: var(--font-mono); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.fuTag.due { background: var(--amber-tint); color: var(--amber); font-weight: 600; }
.fuTag.later { background: var(--paper); color: var(--muted); }
.rowBtn { padding: 7px 13px; font-size: 13px; }
.rowBtn.ghost { background: transparent; border: 1px solid var(--line, #d9e0d8); color: var(--muted); }
.rowBtn.ghost:hover { color: var(--ink, #1c2620); border-color: var(--muted); }

/* ── Prospects écartés (hors cible) ──────────────────────── */
tr.leadExcluded { opacity: .62; }
tr.leadExcluded:hover { opacity: .85; }
.excludedTag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: #8a5a00; background: var(--amber-tint, #fdf2dc);
  border-radius: 5px; padding: 1px 7px; vertical-align: middle; margin-left: 4px;
}
.smallLine { font-size: 12px; }

/* ── Formulaires ─────────────────────────────────────────── */
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; }
.formGrid label { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.formGrid .wide { grid-column: 1 / -1; }
.formGrid input, .formGrid textarea { display: block; width: 100%; margin-top: 6px; font-weight: 400; font-size: 14px; }
.formGrid textarea { min-height: 96px; resize: vertical; }

/* Tabs tables */
.tableTabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 4px 0 14px; }
.tableTab {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: 8px; padding: 7px 11px;
}
.tableTab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
#schemaPreview {
  font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap;
  max-height: 340px; overflow: auto; margin: 0;
  background: var(--paper); border-radius: var(--radius-s); padding: 14px;
}

/* Documents générés */
.generated h3 { font-family: var(--font-display); font-size: 14px; margin: 20px 0 8px; }
.copyBlock {
  position: relative;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 14px 15px;
  white-space: pre-wrap; margin: 8px 0; font-size: 13.5px; line-height: 1.6;
}
.copyBtn {
  position: absolute; top: 8px; right: 8px;
  font-size: 12px; padding: 5px 10px; border-radius: 7px;
  background: var(--card);
}
.emptyHint { color: var(--muted); font-size: 13.5px; margin: 4px 0; }

/* Email : brouillon éditable avant envoi. Cette UI n'intervient jamais dans le scoring métier. */
.emailSubjectEditor, .emailBodyEditor {
  display: block; width: 100%; box-sizing: border-box; background: var(--card);
  font-size: 13.5px; line-height: 1.55;
}
.emailSubjectEditor { margin: 8px 0 14px; font-weight: 500; }
.emailEditorWrap { position: relative; margin: 8px 0; }
.emailBodyEditor { min-height: 310px; resize: vertical; padding: 14px 72px 14px 15px; }
.emailEditorWrap .copyBtn { z-index: 1; }
.emailDraftTools {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 6px 0 14px;
}
.emailDraftTools .hint { margin: 0; }
.emailDraftTools button { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
@media (max-width: 620px) {
  .emailDraftTools { align-items: flex-start; flex-direction: column; }
  .emailBodyEditor { min-height: 260px; }
}

/* ── Drawer prospect ─────────────────────────────────────── */
.drawerOverlay {
  position: fixed; inset: 0; background: rgba(14,26,18,.4);
  z-index: 40; animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 94vw);
  background: var(--card); z-index: 50;
  box-shadow: -18px 0 60px rgba(14,26,18,.22);
  display: flex; flex-direction: column;
  animation: slideIn .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawerHead {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 24px 14px; border-bottom: 1px solid var(--line);
}
.drawerHead h2 { font-size: 19px; }
.ticketNo {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--brand-deep); background: var(--brand-tint);
  display: inline-block; border-radius: 6px; padding: 2px 8px; margin-bottom: 7px;
}
.drawerTabs { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.dTab {
  border: 0; background: transparent; border-radius: 0;
  padding: 11px 13px; font-size: 13.5px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dTab:hover { background: transparent; color: var(--ink); }
.dTab.active { color: var(--brand-deep); font-weight: 600; border-bottom-color: var(--brand); }
.drawerBody { padding: 20px 24px; overflow: auto; flex: 1; }
.drawerBody h3 { font-family: var(--font-display); font-size: 13.5px; margin: 16px 0 6px; }
.drawerBody h3:first-child { margin-top: 0; }
.ficheGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 6px; }
.ficheItem span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.ficheItem strong, .ficheItem a { font-size: 13.5px; font-weight: 500; word-break: break-word; }
.drawerFoot {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid var(--line); background: #FAFBF8;
}
.noteRow { display: flex; gap: 8px; margin-top: 10px; }
.noteRow input { flex: 1; }

/* ── Toasts ──────────────────────────────────────────────── */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: #fff;
  border-radius: 10px; padding: 11px 16px; font-size: 13.5px;
  box-shadow: 0 12px 36px rgba(14,26,18,.3);
  animation: toastIn .25s ease;
}
.toast.err { background: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) { .twoCol { grid-template-columns: 1fr; } .stepsRow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  body { display: block; }
  .sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 14px; }
  .brand { margin: 0 14px 0 0; }
  .navGroup, .sidebarFoot { display: none; }
  nav { display: flex; gap: 4px; flex-wrap: wrap; }
  .nav { width: auto; padding: 8px 11px; }
  main { margin: 0; width: 100%; padding: 20px 16px 50px; }
  .pageHead { flex-direction: column; align-items: flex-start; }
  .formGrid, .stepsRow { grid-template-columns: 1fr; }
  .kpi { flex: 1; min-width: 96px; }
}

/* ── Campagnes & sources ─────────────────────────────────── */
.sourceGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sourceCard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.sourceCard.off { opacity: .62; }
.sourceTop { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.sourceTop strong { font-family: var(--font-display); }
.sourceTop span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-deep); background: var(--brand-tint); border-radius: 99px; padding: 3px 8px; }
.sourceCard p { margin: 0 0 8px; color: var(--ink-soft); font-size: 13px; }
.sourceCard small { display: block; color: var(--muted); line-height: 1.45; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.chips i { font-style: normal; font-size: 11px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 3px 7px; }
.sourceLinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.sourceLink { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; }
.sourceLink:hover { border-color: var(--brand); background: var(--brand-tint); }
.sourceLink span { color: var(--muted); font-size: 12px; text-align: right; }
.schemaMini { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; }
@media (max-width: 1050px) { .sourceGrid { grid-template-columns: 1fr; } .sourceLinks { grid-template-columns: 1fr; } }
button.alt, .button.alt { background:#173b27; color:#fff; border-color:#173b27; }
.campaignList{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.campaignPill{border:1px solid var(--border);background:#fff;border-radius:14px;padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:5px;}
.campaignPill.active{border-color:var(--green);box-shadow:0 0 0 2px rgba(35,196,89,.12);}
.campaignPill strong{font-size:14px;}
.campaignPill span,.campaignPill i{font-size:12px;color:var(--muted);font-style:normal;}
.smallLine{font-size:12px;margin-top:2px;}

/* ── Diagnostic fondé sur preuves ───────────────────────── */
.verdictBox { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius-s); padding: 14px 16px; background: #FAFDF9; margin-bottom: 16px; }
.verdictBox.conf-moyenne { border-left-color: var(--amber); background: #FDFBF5; }
.verdictBox.conf-faible { border-left-color: var(--line-strong); background: var(--paper); }
.verdictHead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.verdictBox p { margin: 6px 0; font-size: 13.5px; line-height: 1.6; }
.verdictBox .opening { color: var(--brand-deep); font-weight: 500; }
.confBadge { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--brand-tint); color: var(--brand-deep); border-radius: 6px; padding: 3px 8px; }
.conf-moyenne .confBadge { background: var(--amber-tint); color: var(--amber); }
.conf-faible .confBadge { background: var(--paper); color: var(--muted); }
.evidenceCat { margin: 10px 0 14px; }
.evidenceCat > strong { display: block; font-size: 12.5px; margin-bottom: 5px; color: var(--ink-soft); }
.evidenceItem { border-left: 3px solid var(--line-strong); padding: 6px 12px; margin: 5px 0; font-size: 13px; font-style: italic; color: var(--ink-soft); background: var(--paper); border-radius: 0 8px 8px 0; }
.evidenceItem a { display: block; font-style: normal; font-size: 11.5px; margin-top: 3px; font-family: var(--font-mono); }

/* Bouton désinscription discret */
.ghostDanger { border-color: transparent; color: var(--red); background: transparent; font-size: 13px; }
.ghostDanger:hover { background: var(--red-tint); }

/* Conversion cockpit */
.conversionPanel { margin-bottom: 18px; }
.conversionPanel .ticketAction { max-width: 360px; text-align: right; }
.conversionPanel small { font-weight: 600; opacity: .65; }
@media (max-width: 900px) {
  .conversionPanel .ticketAction { max-width: none; text-align: left; }
}
.campaignPager{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 0 2px;color:var(--muted);font-size:12px;}
.campaignPill .copyBtn,.campaignPager .copyBtn{position:static;top:auto;right:auto;}
.campaignPager button:disabled{opacity:.4;cursor:not-allowed;}

/* v1.8.6 - pagination de campagnes explicite et non dépendante de .copyBtn */
.campaignPager{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 0;color:var(--muted);font-size:12px;}
.campaignPager + .campaignPill{margin-top:2px;}
.pagerBtn{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 11px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;}
.pagerBtn:hover:not(:disabled){border-color:var(--brand);color:var(--brand-deep);background:var(--brand-tint);}
.pagerBtn.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.pagerBtn:disabled{opacity:.35;cursor:not-allowed;}
.pagerInfo{white-space:nowrap;margin:0 4px;}
.inlineLinkBtn{border:0;background:transparent;color:var(--brand-deep);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0;}

/* v1.9.4 — Qualification partenaire multidimensionnelle avec code couleur */
.qualificationGrid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:8px 0 10px;
}
.qualMetric {
  border:1px solid var(--line);
  border-left:4px solid var(--line-strong);
  border-radius:10px;
  padding:10px 12px;
  background:var(--card);
  min-height:92px;
}
.qualMetric > span {
  display:block;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.qualMetric > strong {
  display:block;
  margin:3px 0 5px;
  font-family:var(--font-mono);
  font-size:21px;
  line-height:1.1;
}
.qualMetric small { display:block; margin-top:5px; color:var(--muted); font-size:11.5px; line-height:1.35; }
.metricBar { height:6px; border-radius:99px; background:var(--paper); overflow:hidden; }
.metricBar i { display:block; height:100%; border-radius:inherit; background:var(--line-strong); }
.tone-green { border-left-color:var(--brand)!important; }
.tone-green > strong, .inlineScore.tone-green { color:var(--brand-deep); }
.tone-green .metricBar i { background:var(--brand); }
.tone-amber { border-left-color:var(--amber)!important; }
.tone-amber > strong, .inlineScore.tone-amber { color:var(--amber); }
.tone-amber .metricBar i { background:var(--amber); }
.tone-red { border-left-color:var(--red)!important; }
.tone-red > strong, .inlineScore.tone-red { color:var(--red); }
.tone-red .metricBar i { background:var(--red); }
.tone-blue { border-left-color:var(--blue)!important; }
.tone-blue > strong, .inlineScore.tone-blue { color:var(--blue); }
.tone-blue .metricBar i { background:var(--blue); }
.tone-neutral { border-left-color:var(--line-strong)!important; }
.tone-neutral > strong, .inlineScore.tone-neutral { color:var(--ink-soft); }
.tone-neutral .metricBar i { background:var(--line-strong); }
.inlineScore { display:inline-flex; align-items:center; border-radius:7px; padding:2px 7px; background:var(--paper); font-family:var(--font-mono); }
.qualificationLegend { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.qualificationLegend span { font-size:10.5px; border-radius:99px; padding:3px 7px; border:1px solid var(--line); background:var(--card); }
.legendGreen { color:var(--brand-deep); background:var(--brand-tint)!important; }
.legendAmber { color:var(--amber); background:var(--amber-tint)!important; }
.legendRed { color:var(--red); background:var(--red-tint)!important; }
.legendBlue { color:var(--blue); background:var(--blue-tint)!important; }
@media (max-width:640px) { .qualificationGrid { grid-template-columns:1fr; } }
.scoreNum.tone-green{color:var(--brand-deep);font-weight:800}.scoreNum.tone-amber{color:var(--amber);font-weight:800}.scoreNum.tone-red{color:var(--red);font-weight:800}

/* Multi-agent authentication */
.loginPage{min-height:100vh;display:grid;place-items:center;background:#f6f8f7}.loginShell{width:min(440px,92vw)}.loginCard{background:#fff;border:1px solid #e6ebe8;border-radius:18px;padding:30px;box-shadow:0 18px 60px rgba(14,30,20,.08)}.loginBrand{margin-bottom:28px}.loginCard form{display:grid;gap:16px}.loginCard label{display:grid;gap:7px}.loginCard input{width:100%;box-sizing:border-box}.loginError{min-height:20px;color:#b42318;font-size:14px}.userBadge{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-top:10px;border:1px solid #e5e7eb;border-radius:10px;font-size:12px}.userBadge strong{display:block}.userBadge span{opacity:.7}.agentsGrid{display:grid;gap:10px}.agentRow{display:grid;grid-template-columns:1.3fr 1fr .8fr auto;gap:10px;align-items:center;padding:12px;border:1px solid #e5e7eb;border-radius:10px}.adminOnly { display:none !important; flex:none; }
.adminOnly.adminVisible { display:revert !important; }

/* v2.0.1 — garde le menu Administration accessible sur les écrans bas. */
.sidebar > nav { flex: none; }



/* v2.1.1 — language flags next to Refresh */
.dashboardHead .kpis{flex-basis:100%}
.dashboardTopActions{display:flex;align-items:center;gap:8px;margin-left:auto;align-self:flex-start}
.languageFlags{display:flex;align-items:center;gap:4px;padding:3px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.languageFlagBtn{width:37px;height:31px;padding:0;border:0;background:transparent;border-radius:7px;font-size:20px;line-height:1;display:grid;place-items:center;opacity:.55}
.languageFlagBtn:hover{background:var(--paper);opacity:1}
.languageFlagBtn.active{background:var(--brand-tint);box-shadow:inset 0 0 0 1px #BCE3C8;opacity:1}
.topRefreshBtn{position:static!important;top:auto!important;right:auto!important;height:37px}
@media(max-width:700px){.dashboardTopActions{width:100%;justify-content:flex-end}.dashboardHead .kpis{order:3}}

/* Agent account management */
.agentActions{margin:0;justify-content:flex-end}
.agentDialog{width:min(720px,92vw);border:0;border-radius:16px;padding:0;box-shadow:0 24px 80px rgba(14,26,18,.28);color:var(--ink)}
.agentDialog::backdrop{background:rgba(14,26,18,.48)}
.agentDialog form{padding:22px;background:var(--card)}
.agentDialog .panelHead{align-items:flex-start}
.agentDialog .actions{margin-bottom:0}
@media(max-width:900px){.agentRow{grid-template-columns:1fr}.agentActions{justify-content:flex-start}}

/* v2.1.2 — global language flags */
.loginLanguageFlags{position:fixed;top:18px;right:18px;z-index:100}

/* v2.2.0 — segmentation pays super admin */
.countryTopFilter{
  min-width:150px;
  max-width:210px;
  height:37px;
  padding:6px 30px 6px 10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--ink);
  font-size:12.5px;
}
.countryBadge{font-weight:700;color:var(--brand-deep);white-space:nowrap}
@media(max-width:760px){.countryTopFilter{min-width:120px;max-width:150px}}


/* v2.2.2 — gestion des comptes agents
   .copyBtn est position:absolute globalement pour les blocs copiables.
   Dans .agentActions cela superposait les boutons et faisait disparaître visuellement
   Mettre à jour / Activer / Mot de passe. */
.agentActions{
  display:flex!important;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  justify-content:flex-end;
  position:static!important;
  overflow:visible;
}
.agentActions .copyBtn,
.agentActions .agentEditBtn{
  position:static!important;
  top:auto!important;
  right:auto!important;
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center;
  justify-content:center;
  min-height:34px;
  white-space:nowrap;
}
.agentEditBtn{
  border-color:#9edbb0!important;
  background:var(--brand-tint)!important;
  color:var(--brand-deep)!important;
  font-weight:700;
}
.agentEditBtn:hover{background:#d8f2df!important}
.agentRow{
  grid-template-columns:minmax(180px,1.3fr) minmax(110px,.7fr) minmax(145px,.75fr) minmax(330px,auto);
  overflow:visible;
}
@media(max-width:1180px){
  .agentRow{grid-template-columns:1fr 1fr}
  .agentActions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:720px){
  .agentRow{grid-template-columns:1fr}
  .agentActions{grid-column:auto}
}

/* Tableau de bord — activité agents */
.agentPerfHead{align-items:center}
.agentPerfTotals{display:flex;gap:10px;flex-wrap:wrap}
.agentPerfTotals span{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);font-size:12px;color:var(--muted)
}
.agentPerfTotals strong{font-family:var(--font-mono);font-size:15px;color:var(--ink)}
.agentPerformanceList{display:grid;gap:8px}
.agentPerfRow{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 150px 180px;
  gap:12px;align-items:center;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card)
}
.agentPerfIdentity strong{display:block;font-size:13.5px}
.agentPerfIdentity span{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}
.agentPerfMetric{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 10px;border-left:1px solid var(--line)
}
.agentPerfMetric span{font-size:11.5px;color:var(--muted)}
.agentPerfMetric strong{font-family:var(--font-mono);font-size:20px}
@media(max-width:850px){
  .agentPerfRow{grid-template-columns:1fr 1fr}
  .agentPerfIdentity{grid-column:1/-1}
}


/* v2.2.3 — barre supérieure unique sur toutes les vues */
.globalTopBar{
  position:fixed;
  top:90px;
  right:36px;
  z-index:45;
  display:flex;
  align-items:center;
  gap:8px;
}
.globalTopBar .copyBtn,
.globalTopBar .topRefreshBtn{
  position:static!important;
  top:auto!important;
  right:auto!important;
}
.globalTopBar .languageFlags{background:var(--card);box-shadow:0 1px 4px rgba(19,26,22,.05)}
.globalTopBar .languageFlagBtn{
  width:38px;height:32px;font-size:12px;font-weight:700;
}
.globalTopBar .countryTopFilter{height:38px}
.view > .pageHead{padding-right:330px;min-height:54px}
@media(max-width:980px){
  .globalTopBar{
    position:sticky;
    top:8px;
    right:auto;
    justify-content:flex-end;
    margin:0 0 16px;
  }
  .view > .pageHead{padding-right:0}
}
@media(max-width:620px){
  .globalTopBar{flex-wrap:wrap}
  .globalTopBar .countryTopFilter{min-width:130px}
}

/* v2.2.3 — gestion agents compacte */
.agentRow{
  grid-template-columns:minmax(220px,1.35fr) minmax(100px,.55fr) minmax(160px,.75fr) minmax(145px,.65fr) auto!important;
  gap:12px;
  overflow:visible;
}
.agentIdentity strong{display:block}
.agentIdentity small{display:block;color:var(--muted);margin-top:2px}
.agentLogin{font-family:var(--font-mono);font-size:12.5px}
.agentMeta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.agentInlineStats{display:flex;align-items:center;gap:7px}
.agentInlineStats > span{
  min-width:62px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);text-align:center;
}
.agentInlineStats small{display:block;font-size:9.5px;color:var(--muted)}
.agentInlineStats strong{display:block;font-family:var(--font-mono);font-size:15px}

.agentActionMenu{position:relative;justify-self:end}
.agentActionMenu > summary{
  list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:7px;
  min-height:35px;padding:7px 11px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--card);color:var(--ink);font-size:12.5px;font-weight:700;white-space:nowrap;
}
.agentActionMenu > summary::-webkit-details-marker{display:none}
.agentActionMenu[open] > summary{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,166,62,.10)
}
.agentActionDropdown{
  position:absolute;right:0;top:calc(100% + 6px);z-index:80;min-width:190px;padding:6px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  box-shadow:0 14px 34px rgba(19,26,22,.16);
}
.agentActionDropdown button{
  position:static!important;display:flex!important;width:100%;align-items:center;justify-content:flex-start;
  padding:9px 10px;border:0;border-radius:7px;background:transparent;color:var(--ink);
  font:inherit;font-size:12.5px;cursor:pointer;
}
.agentActionDropdown button:hover{background:var(--paper)}
.agentActionDropdown button:disabled{opacity:.45;cursor:not-allowed}
.agentActionDropdown .dangerAction{color:var(--red)}
.agentActionDropdown .dangerAction:hover{background:var(--red-tint)}

.agentListTotals{display:flex;gap:8px;flex-wrap:wrap}
.agentListTotals span{
  display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--paper);color:var(--muted);font-size:11px;
}
.agentListTotals strong{font-family:var(--font-mono);font-size:14px;color:var(--ink)}

@media(max-width:1180px){
  .agentRow{grid-template-columns:1fr 1fr 1fr!important}
  .agentIdentity{grid-column:1/3}
}
@media(max-width:760px){
  .agentRow{grid-template-columns:1fr!important}
  .agentIdentity{grid-column:auto}
  .agentActionMenu{justify-self:start}
}


/* v2.2.4 — top bar à 30px + responsive */
.globalTopBar{
  top:30px!important;
  right:36px;
  z-index:60;
  max-width:calc(100vw - 280px);
}
.view > .pageHead{padding-right:330px}

.profilesEmbedShell{
  width:100%;min-width:0;border:1px solid var(--line);border-radius:14px;
  background:var(--card);overflow:hidden
}
.profilesFrame{
  display:block;width:100%;height:calc(100vh - 185px);min-height:650px;border:0;background:transparent
}

@media(max-width:1100px){
  main{padding-left:26px;padding-right:26px}
  .globalTopBar{
    top:18px!important;right:24px;max-width:calc(100vw - 285px)
  }
  .globalTopBar .countryTopFilter{min-width:130px;max-width:170px}
  .view > .pageHead{padding-right:300px}
  .profilesFrame{height:calc(100vh - 170px);min-height:600px}
}

@media(max-width:820px){
  main{
    margin-left:0;width:100%;max-width:none;padding:16px 14px 40px
  }
  .globalTopBar{
    position:relative!important;top:auto!important;right:auto!important;
    width:100%;max-width:none;justify-content:flex-end;margin:0 0 16px;flex-wrap:wrap
  }
  .view > .pageHead{padding-right:0!important;min-height:0;margin-bottom:18px}
  .globalTopBar .countryTopFilter{
    flex:1 1 150px;min-width:130px;max-width:220px
  }
  .profilesFrame{height:900px;min-height:0}
}

@media(max-width:560px){
  .globalTopBar{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center
  }
  .globalTopBar .countryTopFilter{width:100%;max-width:none;min-width:0}
  .globalTopBar .languageFlags{justify-self:end}
  .globalTopBar .topRefreshBtn{grid-column:1/-1;width:100%}
  .profilesEmbedShell{border-radius:10px}
  .profilesFrame{height:1050px}
}

@media(max-width:380px){
  main{padding-left:10px;padding-right:10px}
  .globalTopBar{grid-template-columns:1fr}
  .globalTopBar .languageFlags,.globalTopBar .topRefreshBtn{width:100%;justify-self:stretch}
  .globalTopBar .languageFlags{justify-content:center}
}


/* v2.2.5 — multi-campagne / multi-agent */
.runControlPanel select{width:100%;max-width:760px}
.runCapacity{
  display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);
  color:var(--muted);font-size:11.5px;white-space:nowrap
}
.runList{display:grid;gap:7px}
.runRow{
  display:grid;grid-template-columns:120px minmax(220px,1fr) 150px auto;
  gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);cursor:pointer
}
.runRow:hover,.runRow.active{border-color:#a8dcb7;background:#fbfefc}
.runState{display:flex;align-items:center;gap:7px;font-size:12px}
.runStatusDot{width:8px;height:8px;border-radius:50%;background:#9ca3af;flex:none}
.runStatusDot.running{background:var(--brand)}
.runStatusDot.queued{background:#d99b23}
.runStatusDot.success{background:#1f9d55}
.runStatusDot.error,.runStatusDot.timeout{background:var(--red)}
.runStatusDot.cancelled,.runStatusDot.interrupted{background:#7b8790}
.runCampaign strong{display:block;font-size:12.5px}
.runCampaign span{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
.runTime{font-size:10.5px;color:var(--muted)}
.runStopBtn{
  position:static!important;padding:6px 9px;border:1px solid #e5b4ae;border-radius:7px;
  background:var(--red-tint);color:var(--red);font-size:11px;cursor:pointer
}
@media(max-width:900px){
  .runRow{grid-template-columns:110px minmax(0,1fr) auto}
  .runTime{display:none}
}
@media(max-width:620px){
  .runRow{grid-template-columns:1fr auto;gap:7px}
  .runState{grid-column:1}
  .runCampaign{grid-column:1/-1}
  .runStopBtn{grid-column:2;grid-row:1}
  .runCapacity{white-space:normal}
}

/* v2.2.6 — état de sourcing explicite */
.campaignRunState{display:block;margin-top:5px;font-size:11.5px;font-weight:700}
.campaignRunState.ok{color:#157A35}
.campaignRunState.warn{color:#9A5C00}
.campaignRunState.neutral{color:var(--muted)}

/* v2.4.0 — statistiques email séparées de la qualification métier */
.agentPerfRow{grid-template-columns:minmax(220px,1fr) repeat(4,minmax(120px,.55fr))}
.agentInlineStats{flex-wrap:wrap}
.agentRow{grid-template-columns:minmax(220px,1.2fr) minmax(100px,.5fr) minmax(160px,.7fr) minmax(250px,1fr) auto!important}
.emailEngagementKpis .kpi{min-width:130px}
@media(max-width:1000px){
  .agentPerfRow{grid-template-columns:1fr 1fr}
  .agentPerfIdentity{grid-column:1/-1}
}

/* ── Signature / pied de page email v2.4.3 ───────────────────────── */
.emailSignaturePanel { margin-top: 18px; }
.inlineCheck { display:flex !important; flex-direction:row !important; align-items:center; gap:10px; }
.inlineCheck input[type="checkbox"] { width:auto; margin:0; }
.emailImageActions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.emailSignatureImagePreview { width:100%; min-height:42px; display:flex; align-items:center; margin-top:4px; }
.emailSignatureImagePreview img { max-width:180px; max-height:90px; object-fit:contain; border:1px solid #e5e7eb; border-radius:8px; background:#fff; padding:8px; }
.emailSignaturePreviewWrap { margin-top:16px; }
.emailSignaturePreview { margin-top:8px; padding:16px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.emailSignaturePreviewStack { width:100%; display:flex; flex-direction:column; align-items:stretch; font-size:13px; line-height:1.45; color:#1f2937; }
.emailSignatureIdentityRow { width:100%; padding:0 0 12px; }
.emailSignatureImageRow { width:100%; padding:2px 0 14px; }
.emailSignaturePreviewLogo { display:block; max-width:min(320px,100%); max-height:110px; width:auto; height:auto; object-fit:contain; }
.signatureCompany { color:#166534; font-weight:700; }
.signatureContacts { margin-top:4px; color:#4b5563; font-size:12px; }
.signatureSocials { margin-top:4px; font-size:12px; }
.signatureSocials a { color:#166534; text-decoration:none; }
.emailFooterPreview { width:100%; margin-top:0; padding-top:10px; border-top:1px solid #e5e7eb; color:#6b7280; font-size:11px; line-height:1.45; }
.fakeUnsubscribeLink { text-decoration:underline; color:#4b5563; }
.drawerSignaturePreview { margin:14px 0 18px; padding:13px; border:1px solid #dbe5dd; border-radius:10px; background:#fbfdfb; }
.drawerSignatureTitle { margin-bottom:10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#5f6f63; }
@media (max-width: 720px) {
  .emailSignaturePreviewLogo { max-width:100%; max-height:100px; }
}

/* v2.4.5 — journal technique réservé au Super Admin */
.technicalLogPanel { margin-top: 18px; }
.compactActions { margin: 0; gap: 8px; }
.adminTechnicalLogs {
  margin: 12px 0 0;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.45;
  background: #0f1720;
  color: #d8e2ea;
  border-radius: 10px;
  padding: 14px;
}