/* ============================================
   Peef — feuille de style partagée
   Esprit : content-first, refined minimalism
   ============================================ */

@font-face {
  font-family: 'Inter';
  src: url('/static/assets/css/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/assets/css/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-alt: #f0f4ff;
  --ink: #1f2532;
  --ink-soft: #3d4560;
  --ink-muted: #6b7394;
  --rule: #dde3f0;
  --accent: #0d6efd;
  --accent-soft: #e7f0ff;
  --max-w: 860px;
  --max-w-wide: 1100px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

.sans, nav, .meta, button, .btn, .tag, .kicker, footer, input, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 24px; }

.section { padding: 64px 0; }
.section-tight { padding: 32px 0; }

/* Space above main content (used when there is no hero section) */
.content-top { margin-top: 48px; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}

/* ---------- Header / Nav ---------- */
.site-header {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .wrap-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: var(--accent); }

nav.primary {
  display: flex;
  gap: 28px;
  font-size: 14px;
}
nav.primary a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
}
nav.primary a:hover { color: var(--ink); }
nav.primary a.active { color: var(--accent); }

/* ---------- Typo ---------- */
h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 14px; }
h3 { font-size: 1.25rem; margin-bottom: 10px; }
h4 { font-size: 1rem; }

p { margin-bottom: 1em; color: var(--ink-soft); }
p.lead { font-size: 1.2rem; color: var(--ink); line-height: 1.55; }

.kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.meta {
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* ---------- Inputs ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: white;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus { outline: none; border-color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: white; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- Tags ---------- */
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  border-radius: 2px;
  text-decoration: none;
}
.tag:hover { background: var(--accent-soft); color: var(--accent); }
.tag.tag--accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Article list ---------- */
.article-list { list-style: none; }
.article-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.article-item:last-child { border-bottom: none; }
.article-item .meta { margin-bottom: 6px; }
.article-item h2, .article-item h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.article-item h2 a, .article-item h3 a { text-decoration: none; }
.article-item h2 a:hover, .article-item h3 a:hover { color: var(--accent); }
.article-item p { font-size: 0.95rem; margin: 0; }

/* ---------- Page spacing ---------- */
/* Space between sticky header and first content block */
.wrap > *:first-child,
.wrap-wide > *:first-child { margin-top: 0; }
.hero + .wrap > *:first-child { margin-top: 0; }

/* Admin / dashboard pages */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  padding: 40px 0 0;
}
.page-header h1 {
  font-size: 1.4rem;
  margin: 0;
}
.page-header .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table thead th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  background: var(--bg-alt);
  border-bottom: 2px solid var(--rule);
  white-space: nowrap;
  color: var(--ink-soft);
}
.admin-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  font-size: 14px;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--bg-alt); }

.tbl-wrap { overflow-x: auto; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Hyphenated legacy variants */
.badge-yes, .-yes     { background: #d4edda; color: #155724; }
.badge-no,  .-no      { background: #f8d7da; color: #721c24; }
.badge-pending, .-pending { background: #fff3cd; color: #856404; }
.badge-paid, .-paid   { background: #cfe2ff; color: #084298; }
.badge-video, .-video { background: #cfe2ff; color: #084298; }
.badge-src            { background: var(--bg-alt); color: var(--ink-soft); }
/* Legacy aliased names */
.badge-visible { background: #d4edda; color: #155724; }
.badge-hidden  { background: #f8d7da; color: #721c24; }
/* Project status alert variants */
.-success, .badge-success { background: #d1fae5; color: #065f46; }
.-danger,  .badge-danger  { background: #f8d7da; color: #721c24; }
.-warning, .badge-warning { background: #fff3cd; color: #856404; }
.-info,    .badge-info    { background: #cff4fc; color: #055160; }
.-primary, .badge-primary { background: #cfe2ff; color: #084298; }

.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  transition: all .12s ease;
}
.btn-sm:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.btn-sm.btn-sm--danger { color: #842029; border-color: #f5c2c7; }
.btn-sm.btn-sm--danger:hover { background: #f8d7da; border-color: #f5c2c7; }
.btn-sm.btn-sm--success { background: #155724; border-color: #155724; color: #fff; }
.btn-sm.btn-sm--success:hover { background: #0a3622; border-color: #0a3622; }
.btn-sm.btn-sm--primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-sm.btn-sm--primary:hover { opacity: .88; color: var(--bg); }

.action-buttons { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }

/* Admin cards */
.admin-card {
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
}
.admin-card-header {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
}
.admin-card-body { padding: 20px; }

.field-row {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.field-row:last-child { border-bottom: none; }
.field-label {
  width: 180px;
  min-width: 140px;
  color: var(--ink-muted);
  flex-shrink: 0;
  font-size: 13px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 20px;
  text-align: center;
}
.stat-card .number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-card .label { font-size: 13px; color: var(--ink-muted); }

.bar-wrap {
  height: 6px;
  background: var(--bg-alt);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  min-width: 80px;
}
.bar { height: 100%; background: var(--accent); border-radius: 3px; }

.summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
@media (max-width: 720px) { .summary-row { grid-template-columns: repeat(2, 1fr); } }
.summary-stat {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 16px 20px;
}
.summary-stat .value { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.summary-stat .label { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }

.nav-section { margin-bottom: 32px; }
.nav-section h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.nav-card {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .12s ease;
}
.nav-card:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }
.nav-card i { font-size: 1.1rem; color: var(--ink-muted); margin-bottom: 8px; display: block; }
.nav-card span { font-size: 14px; font-weight: 500; display: block; }
.nav-card small { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.cert-notice {
  font-size: 13px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 2px;
}
.cert-notice.cert-red { border: 1px solid #f5c2c7; background: #fdf0f1; }
.cert-notice.cert-blue { border: 1px solid #b6d4fe; background: #f0f6ff; }
.cert-notice.cert-green { border: 1px solid #c3e6cb; background: #f0faf3; }
.cert-notice .cert-title { font-weight: 700; margin-bottom: 2px; }
.cert-notice .cert-sub { color: var(--ink-muted); margin-bottom: 6px; font-size: 13px; }
.cert-notice a { color: var(--ink); font-weight: 600; }

.alert-bar {
  border-radius: 2px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}
.alert-bar.alert-danger { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.alert-bar.alert-danger a { color: #842029; font-weight: 600; }

.log-box {
  font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  font-size: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 12px;
  white-space: pre-wrap;
  max-height: 260px;
  overflow-y: auto;
}

.auth-box {
  max-width: 420px;
  margin: 64px auto;
}

/* Empty / confirmation states */
.state-wrap {
  max-width: 480px;
  margin: 80px auto;
  text-align: center;
  padding: 0 24px;
}
.state-wrap svg { margin-bottom: 24px; }
.state-wrap h1 { font-size: 1.6rem; margin-bottom: 12px; }
.state-wrap p { color: var(--ink-muted); margin-bottom: 24px; }

/* DataTables overrides */
#articlesTable_wrapper,
#contactTable_wrapper,
.dataTables_wrapper { font-size: 14px; }
.dataTables_wrapper .dataTables_filter label { font-weight: normal; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 8px;
  margin-left: 6px;
  outline: none;
  font-family: inherit;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ink); }
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2px 4px;
  margin: 0 4px;
  font-family: inherit;
}
.dataTables_wrapper .dataTables_info { color: var(--ink-muted); font-size: 13px; }
.dataTables_wrapper table.dataTable { width: 100% !important; border-collapse: collapse; }
.dataTables_wrapper table.dataTable thead th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  background: var(--bg-alt);
  border-bottom: 2px solid var(--rule);
  white-space: nowrap;
  cursor: pointer;
  color: var(--ink-soft);
}
.dataTables_wrapper table.dataTable tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.dataTables_wrapper table.dataTable tbody tr:last-child td { border-bottom: none; }
.dataTables_wrapper table.dataTable tbody tr:hover { background: var(--bg-alt); }
.dataTables_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.dataTables_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 3px 9px;
  margin: 0 1px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink) !important;
  text-decoration: none;
}
.dataTables_paginate .paginate_button:hover { background: var(--bg-alt); }
.dataTables_paginate .paginate_button.current { background: var(--ink); color: var(--bg) !important; border-color: var(--ink); }
.dataTables_paginate .paginate_button.disabled { color: var(--ink-muted) !important; cursor: default; }

/* ---------- Hero ---------- */
.hero { padding: 80px 0 56px; }
.hero .kicker { margin-bottom: 12px; }
.hero h1 { margin-bottom: 24px; }
.hero p.lead { max-width: 640px; margin-bottom: 32px; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 40px;
  margin: 48px 0;
  border-radius: 2px;
}
.newsletter h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.newsletter p {
  color: var(--ink-soft);
  margin-bottom: 20px;
  max-width: 560px;
}
.newsletter form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 480px;
}
.newsletter input[type="email"],
.newsletter input[type="text"] {
  flex: 1;
  min-width: 220px;
}
.newsletter .note {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 12px;
}

/* Newsletter inline (hero) — version compacte */
.newsletter-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 480px;
  margin-top: 8px;
}
.newsletter-inline input[type="email"],
.newsletter-inline input[type="text"] {
  flex: 1;
  min-width: 220px;
  border-color: var(--ink);
}

/* ---------- Cards (offres) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  border: 1px solid var(--rule);
  padding: 28px;
  background: white;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--ink); }
.card .kicker { margin-bottom: 12px; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.95rem; margin-bottom: 20px; }
.card .price {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}
.card .price-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  margin-bottom: 16px;
}
.card .status {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 16px;
  align-self: flex-start;
}
.card .status--inactive {
  background: var(--bg-alt);
  color: var(--ink-muted);
}

/* ---------- Offre détail ---------- */
.offer-header {
  padding: 56px 0 32px;
}
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.offer-grid .stat .meta { margin-bottom: 4px; }
.offer-grid .stat .value {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  counter-reset: step;
  list-style: none;
  margin: 24px 0;
}
.steps li {
  counter-increment: step;
  padding: 20px;
  background: var(--bg-alt);
  border-radius: 2px;
  font-size: 14px;
  color: var(--ink-soft);
}
.steps li::before {
  content: counter(step);
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}

.callout {
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  background: var(--accent-soft);
  margin: 24px 0;
  font-size: 0.95rem;
}
.callout strong { color: var(--accent); }

/* ---------- Article body ---------- */
.article-body { font-size: 1.05rem; line-height: 1.75; }
.article-body p { color: var(--ink); margin-bottom: 1.2em; }
.article-body h2 { margin-top: 2em; margin-bottom: 0.6em; }
.article-body h3 { margin-top: 1.6em; }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 24px 0;
  color: var(--ink-soft);
  font-style: italic;
}
.article-body code {
  font-family: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 2px;
}
.article-body ul, .article-body ol { margin: 0 0 1.2em 1.5em; color: var(--ink); }
.article-body li { margin-bottom: 0.5em; }

.article-header { padding: 56px 0 32px; }
.article-header .meta { margin-bottom: 12px; }

.related h4 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
}

/* ---------- Categories grid ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.cat-card {
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  text-decoration: none;
  transition: all .15s ease;
}
.cat-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.cat-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.cat-card p {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
  font-family: 'Inter', sans-serif;
}
.cat-card .count {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 12px;
  display: block;
  font-family: 'Inter', sans-serif;
}

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--rule);
  padding: 40px 0;
  margin-top: 80px;
  font-size: 13px;
  color: var(--ink-muted);
  background: var(--bg);
}
footer.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  margin-right: 16px;
}
footer.site-footer a:hover { color: var(--accent); }
footer.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: baseline;
}

/* ---------- Article/Post view ---------- */
.post-wrap { max-width: 720px; margin: 0 auto; }
.post-author { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
.post-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.post-author-info a { font-weight: 600; font-size: 14px; text-decoration: none; }
.post-author-info small { display: block; font-size: 12px; color: var(--ink-muted); }
.post-author-actions { margin-left: auto; }
.post-author-actions a { font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.post-author-actions a:hover { color: var(--ink); }
.post-banner { width: 100%; max-height: 380px; object-fit: cover; border-radius: 2px; margin-bottom: 1.5rem; }
.post-title { font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin: 0 0 1rem; }
.post-description { font-size: 1.05rem; color: var(--ink-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.post-community { display: inline-block; font-size: 13px; color: var(--ink-muted); margin-bottom: 1.5rem; text-decoration: none; }
.post-community:hover { color: var(--ink); }
.post-content { font-size: 15px; line-height: 1.8; }
.post-content h1, .post-content h2, .post-content h3 { margin-top: 1.75rem; margin-bottom: 0.75rem; line-height: 1.3; }
.post-content p { margin-bottom: 1rem; }
.post-content pre { background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 2px; padding: 1rem; overflow-x: auto; font-size: 13px; }
.post-content code { font-size: 13px; background: var(--bg-alt); padding: 1px 5px; border-radius: 2px; }
.post-content pre code { background: none; padding: 0; }
.post-video { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 1rem; }
.post-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2px; }
.comments-section { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 2rem; }
.comments-section h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1.5rem; }
.comment-form textarea, .reply-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 2px; font-family: inherit; font-size: 14px; resize: vertical; outline: none; }
.comment-form textarea:focus, .reply-form textarea:focus { border-color: var(--ink); }
.btn-comment { margin-top: 8px; padding: 7px 18px; background: var(--ink); color: var(--bg); border: none; border-radius: 2px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-comment:hover { opacity: .88; }
.btn-reply-toggle { background: none; border: none; font-size: 13px; color: var(--ink-muted); cursor: pointer; padding: 0; }
.btn-reply-toggle:hover { color: var(--ink); }
.comment-item { display: flex; gap: 10px; margin-bottom: 1.25rem; }
.comment-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-body { flex: 1; }
.comment-meta { font-size: 13px; margin-bottom: 4px; }
.comment-meta a { font-weight: 600; text-decoration: none; }
.comment-meta span { color: var(--ink-muted); margin-left: 8px; }
.comment-text { font-size: 14px; margin-bottom: 4px; }
.replies { margin-top: 0.75rem; padding-left: 1rem; border-left: 2px solid var(--rule); }
.reply-form-wrap { margin-top: 0.75rem; display: none; }
.login-prompt { font-size: 14px; color: var(--ink-muted); margin-bottom: 1.5rem; }

/* ---------- Form field group (article editor, etc.) ---------- */
.field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.field-group label { font-size: 14px; font-weight: 600; }
.field-group input[type="text"],
.field-group input[type="url"],
.field-group textarea,
.field-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: inherit;
  font-size: 15px;
  background: var(--bg);
  outline: none;
}
.field-group input:focus, .field-group textarea:focus, .field-group select:focus { border-color: var(--ink); }
.field-group textarea { resize: vertical; min-height: 100px; }
.field-group .field-error { font-size: 13px; color: #842029; }
.file-label { display: inline-block; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 2px; font-size: 14px; cursor: pointer; background: var(--bg-alt); }
.file-label:hover { border-color: var(--ink); }
input[type="file"] { display: none; }
.file-name { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
.form-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  body { font-size: 17px; }

  /* Nav: hide all links except .menu-essential */
  nav.primary { gap: 16px; font-size: 13px; }
  nav.primary a:not(.menu-essential) { display: none; }
  nav.primary a.menu-essential { display: inline; }

  /* Hero */
  .hero { padding: 56px 0 40px; }

  /* Newsletter forms stack vertically */
  .newsletter { padding: 28px; }
  .newsletter form,
  .newsletter-inline { flex-direction: column; }
  .newsletter form input,
  .newsletter form button,
  .newsletter-inline input,
  .newsletter-inline button { width: 100%; min-width: 0; }

  /* Grids collapse to single column */
  .offer-grid { grid-template-columns: 1fr; }

  /* Footer stacks columns */
  footer.site-footer .row { flex-direction: column; gap: 20px; }
  footer.site-footer a { margin-right: 12px; }
}

/* ============================================================
   Settings cards
   ============================================================ */
.settings-card { border: 1px solid var(--rule); border-radius: 2px; margin-bottom: 24px; }
.settings-card-header { padding: 12px 16px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; background: var(--bg-alt); }
.settings-card-body { padding: 20px 16px; }
.settings-card-footer { padding: 12px 16px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 8px; }

/* ============================================================
   Input groups (prefix / suffix)
   ============================================================ */
.ig { display: flex; align-items: stretch; }
.ig-text { padding: 7px 10px; background: var(--bg-alt); border: 1px solid var(--rule); font-size: 14px; white-space: nowrap; display: flex; align-items: center; color: var(--ink-muted); }
.ig > .ig-text:first-child { border-right: 0; border-radius: 2px 0 0 2px; }
.ig > .ig-text:last-child { border-left: 0; border-radius: 0 2px 2px 2px; }
.ig > input, .ig > select { flex: 1; min-width: 0; width: auto !important; border-radius: 0 2px 2px 0; }

/* ============================================================
   Form utilities
   ============================================================ */
.form-hint { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }

/* ============================================================
   Avatar upload
   ============================================================ */
.avatar-circle { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rule); display: block; }
.file-btn { display: inline-block; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 2px; font-size: 13px; cursor: pointer; background: var(--bg-alt); color: var(--ink); }
.file-btn:hover { background: var(--rule); }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; align-items: center; justify-content: center; }
.modal-backdrop.open { display: flex; }
.modal-box { background: var(--bg); border: 1px solid var(--rule); border-radius: 2px; padding: 28px; max-width: 440px; width: 100%; margin: 0 20px; }
.modal-box h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.modal-box p { font-size: 14px; margin: 0 0 8px; color: var(--ink-soft); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

/* ============================================================
   Benefits / feature grid (used in change_username, visibility)
   ============================================================ */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.benefit-card { padding: 14px; border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-alt); }
.benefit-card svg { color: var(--accent); margin-bottom: 8px; }
.benefit-card h4 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.benefit-card p { font-size: 12px; color: var(--ink-muted); margin: 0; }

/* ============================================================
   Workspace nav (project module shared tabs)
   ============================================================ */
.workspace-nav { border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.workspace-nav-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.workspace-tabs { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.workspace-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 14px; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.workspace-tab:hover { color: var(--ink); text-decoration: none; }
.workspace-tab:visited { color: var(--ink-muted); }
.workspace-tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.workspace-actions { display: flex; gap: 8px; align-items: center; }

/* ============================================================
   Workspace board (kanban columns)
   ============================================================ */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .board { grid-template-columns: 1fr; } }
.board-col { border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.board-col-header { padding: 10px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); background: var(--bg-alt); }
.board-col-body { padding: 10px 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-gray { background: var(--ink-muted); }
.dot-yellow { background: #b45309; }
.dot-blue { background: #0d6efd; }
.dot-red { background: #dc3545; }
.dot-green { background: #065f46; }

/* ============================================================
   Workspace task cards
   ============================================================ */
.task-card { padding: 10px; border: 1px solid var(--rule); border-radius: 2px; margin-bottom: 8px; background: var(--bg); }
.task-card:last-child { margin-bottom: 0; }
.task-type-tag { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; background: var(--bg-alt); color: var(--ink-soft); margin-bottom: 4px; }
.task-name { font-size: 14px; font-weight: 500; margin: 0 0 4px; }
.task-meta { font-size: 12px; color: var(--ink-muted); margin: 0 0 8px; }
.task-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.task-item { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.task-item:last-child { border-bottom: none; }
.empty-col { color: var(--ink-muted); font-size: 13px; padding: 4px 0; }

/* Micro action buttons (workspace board) */
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 2px; text-decoration: none; border: 1px solid; display: inline-block; cursor: pointer; font-family: inherit; background: none; }
.btn-xs:visited { color: inherit; }
.btn-xs-primary { border-color: #0d6efd; color: #0d6efd; }
.btn-xs-primary:hover { background: #0d6efd; color: #fff; }
.btn-xs-success { border-color: #065f46; color: #065f46; }
.btn-xs-success:hover { background: #065f46; color: #fff; }
.btn-xs-warn { border-color: #b45309; color: #b45309; }
.btn-xs-warn:hover { background: #b45309; color: #fff; }
.btn-xs-danger { border-color: #dc3545; color: #dc3545; }
.btn-xs-danger:hover { background: #dc3545; color: #fff; }

/* ============================================================
   Workspace overview columns (tasks view)
   ============================================================ */
.columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .columns { grid-template-columns: 1fr; } }
.col-card { border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.col-card-header { padding: 10px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); background: var(--bg-alt); }
.col-card-body { padding: 10px 14px; }
.dot-upcoming { background: var(--ink-muted); }
.dot-today { background: #065f46; }
.dot-tomorrow { background: #b45309; }
.dot-later { background: #0d6efd; }

/* Status badges (workspace) */
.status-badge { display: inline-block; padding: 2px 7px; border-radius: 2px; font-size: 11px; font-weight: 500; }
.badge-todo { background: #fff3cd; color: #856404; }
.badge-inprogress { background: #d1fae5; color: #065f46; }
.badge-blocked { background: #f8d7da; color: #842029; }
.badge-upcoming { background: var(--bg-alt); color: var(--ink-soft); }

/* Progress bar */
.progress-bar-wrap { background: var(--bg-alt); border-radius: 2px; height: 6px; margin: 0 0 1.25rem; overflow: hidden; border: 1px solid var(--rule); }
.progress-bar-fill { background: var(--ink); height: 6px; border-radius: 2px; transition: width 0.3s; }

/* ============================================================
   Workspace new-task modal (shared by tasks + calendar views)
   ============================================================ */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-wbox { background: var(--bg); border: 1px solid var(--rule); border-radius: 2px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; margin: 1rem; }
.modal-head { padding: 1.25rem 1.25rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); }
.modal-head h2 { margin: 0; font-size: 1rem; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--ink-muted); padding: 0; }
.modal-close:hover { color: var(--ink); }
.modal-wbody { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-wfooter { padding: 1rem 1.25rem; border-top: 1px solid var(--rule); display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   Project sidebar card (project_detail)
   ============================================================ */
.sidebar-card { border: 1px solid var(--rule); border-radius: 2px; padding: 1.25rem; }
.sidebar-card + .sidebar-card { margin-top: 1rem; }
.sidebar-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 0.75rem; }

/* Project detail status alerts */
.status-alert { padding: 10px 14px; border-radius: 2px; font-size: 14px; margin-bottom: 1rem; }
.alert-warning  { background: #fff3cd; border: 1px solid #ffecb5; color: #664d03; }
.alert-success  { background: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; }
.alert-info     { background: #cff4fc; border: 1px solid #b6effb; color: #055160; }
.alert-danger   { background: #f8d7da; border: 1px solid #f5c2c7; color: #842029; }
.alert-secondary{ background: var(--bg-alt); border: 1px solid var(--rule); color: var(--ink-soft); }

/* ============================================================
   Tab nav (invoices, service validation, etc.)
   ============================================================ */
.tab-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tab-link { padding: 6px 14px; border-radius: 2px; font-size: 13px; text-decoration: none; color: var(--ink-soft); border: 1px solid transparent; }
.tab-link:hover { background: var(--bg-alt); color: var(--ink); }
.tab-link.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab-link:visited { color: var(--ink-soft); }
.tab-link.active:visited { color: var(--bg); }

/* Invoice detail lines (inside modal) */
.invoice-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.invoice-meta > div { display: flex; flex-direction: column; gap: 2px; }
.invoice-meta small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.invoice-lines { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.invoice-lines li { padding: 8px 12px; display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px solid var(--rule); }
.invoice-lines li:last-child { border-bottom: none; background: var(--bg-alt); font-weight: 600; }

/* ============================================================
   User profile pages (user_articles, user_services, account)
   ============================================================ */
.user-page { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start; }
@media (max-width: 700px) { .user-page { grid-template-columns: 1fr; } .user-sidebar { order: -1; } }
.user-nav { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.75rem; flex-wrap: wrap; }
.user-nav a { font-size: 14px; color: var(--ink-muted); text-decoration: none; font-weight: 500; }
.user-nav a:hover { color: var(--ink); }
.user-nav a.active { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 0.75rem; margin-bottom: -0.77rem; }
.user-nav a:visited { color: var(--ink-muted); }
.user-nav a.active:visited { color: var(--ink); }
.user-sidebar { border: 1px solid var(--rule); border-radius: 2px; padding: 1.25rem; }
.sidebar-avatar { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.25rem; text-align: center; }
.sidebar-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; }
.sidebar-avatar a { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.sidebar-avatar a:hover { color: var(--accent); }
.avail-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; margin-top: 4px; }
.avail-yes { background: #d1fae5; color: #065f46; }
.avail-no  { background: #f8d7da; color: #842029; }
.sidebar-section { margin-bottom: 1.25rem; }
.sidebar-section h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 0.5rem; }
.sidebar-stat-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.sidebar-stat-row:last-child { border-bottom: none; }
.sidebar-stat-row span { font-weight: 600; color: var(--accent); }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); text-decoration: none; }
.social-link:hover { border-color: var(--accent); color: var(--accent); }
.social-link svg { width: 16px; height: 16px; }
.pagination-wrap { display: flex; gap: 4px; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.pagination-wrap a, .pagination-wrap span { display: inline-block; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 2px; font-size: 13px; text-decoration: none; color: var(--ink); }
.pagination-wrap a:hover { background: var(--bg-alt); }
.pagination-wrap .current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pagination-wrap .disabled { color: var(--ink-muted); }

/* Post list (user_articles) */
.post-list { border-top: 1px solid var(--rule); }
.post-item { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.post-item-meta { font-size: 13px; color: var(--ink-muted); margin-bottom: 0.3rem; }
.post-item h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; line-height: 1.4; }
.post-item h2 a { color: var(--ink); text-decoration: none; }
.post-item h2 a:hover { color: var(--accent); }
.post-item-excerpt { font-size: 14px; color: var(--ink-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-actions { font-size: 13px; margin-top: 6px; display: flex; gap: 12px; }
.post-actions a { color: var(--ink-muted); text-decoration: none; }
.post-actions a:hover { color: var(--ink); }

/* Service list (user_services) */
.service-list { display: flex; flex-direction: column; gap: 1rem; }
.service-card { border: 1px solid var(--rule); border-radius: 2px; padding: 1.25rem; transition: border-color 0.15s, box-shadow 0.15s; }
.service-card:hover { border-color: var(--ink-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.service-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
.service-header h2 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--ink); }
.service-price { font-size: 1rem; font-weight: 700; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.service-duration { font-size: 13px; color: var(--ink-muted); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 4px; }
.service-duration svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ============================================================
   Packages list / package detail (public pages)
   ============================================================ */
.pkg-header { margin-bottom: 1.25rem; }
.pkg-header h1 { margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; }
.pkg-header p { margin: 0; font-size: 14px; color: var(--ink-muted); }
.pkg-divider { border: none; border-top: 1px solid var(--rule); margin: 1.25rem 0; }

/* Filter row */
.pkg-filters { margin-bottom: 4px; }
.pkg-filter-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.pkg-filter-row:last-child { border-bottom: none; }
.pkg-filter-label { font-size: 13px; color: var(--ink-muted); width: 56px; flex-shrink: 0; padding-top: 4px; }
.pkg-filter-options { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.pkg-pill { font-size: 13px; padding: 4px 14px; border-radius: 2px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; background: var(--bg); white-space: nowrap; }
.pkg-pill:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
.pkg-pill--active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pkg-pill--active:hover { background: var(--ink); color: var(--bg); }
.pkg-pill:visited { color: var(--ink); }
.pkg-pill--active:visited { color: var(--bg); }
.pkg-sort-select { font-size: 13px; padding: 4px 10px; border-radius: 2px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); cursor: pointer; appearance: auto; }

/* Package card */
.pkg-card { border: 1px solid var(--rule); border-radius: 2px; padding: 1.25rem; margin-bottom: 12px; }
.pkg-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.pkg-badge { font-size: 12px; padding: 3px 10px; border-radius: 2px; font-weight: 500; background: var(--bg-alt); color: var(--ink-soft); }
.pkg-badge--supply-chain   { background: #dcfce7; color: #166534; }
.pkg-badge--erp-odoo       { background: #cffafe; color: #0e7490; }
.pkg-badge--erp--odoo      { background: #cffafe; color: #0e7490; }
.pkg-badge--commercial     { background: #ffedd5; color: #c2410c; }
.pkg-badge--finance        { background: #fef9c3; color: #854d0e; }
.pkg-badge--formation      { background: #fed7aa; color: #9a3412; }
.pkg-price { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.pkg-card-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.pkg-card-summary { font-size: 13px; color: var(--ink-muted); margin: 0; }
.pkg-card-sep { border: none; border-top: 1px solid var(--rule); margin: 14px 0; }
.pkg-card-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Expert mini-block inside card */
.pkg-expert { display: flex; align-items: center; gap: 8px; }
.pkg-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.pkg-avatar--0 { background: #a7f3d0; color: #065f46; }
.pkg-avatar--1 { background: #bfdbfe; color: #1e3a5f; }
.pkg-avatar--2 { background: #fde68a; color: #78350f; }
.pkg-avatar--3 { background: #fca5a5; color: #7f1d1d; }
.pkg-avatar--4 { background: #c4b5fd; color: #3b0764; }
.pkg-expert-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.pkg-expert-badge { font-size: 11px; padding: 2px 8px; border-radius: 2px; background: #dcfce7; color: #166534; font-weight: 500; }
.pkg-card-actions { display: flex; align-items: center; gap: 12px; }
.pkg-duration { font-size: 13px; color: var(--ink-muted); }

/* Pagination */
.pkg-pagination { display: flex; justify-content: center; gap: 6px; padding: 24px 0 8px; }
.pkg-page { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 2px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.pkg-page:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
.pkg-page--active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pkg-page--active:hover { background: var(--ink); color: var(--bg); }
.pkg-page--gap { border: none; color: var(--ink-muted); }
.pkg-page:visited { color: var(--ink); }
.pkg-page--active:visited { color: var(--bg); }

/* Package detail */
.pd-badge { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 2px; font-weight: 500; margin-bottom: 14px; background: var(--bg-alt); color: var(--ink-soft); }
.pd-badge--supply-chain  { background: #dcfce7; color: #166534; }
.pd-badge--erp-odoo      { background: #cffafe; color: #0e7490; }
.pd-badge--erp--odoo     { background: #cffafe; color: #0e7490; }
.pd-badge--commercial    { background: #ffedd5; color: #c2410c; }
.pd-badge--finance       { background: #fef9c3; color: #854d0e; }
.pd-badge--formation     { background: #fed7aa; color: #9a3412; }
.pd-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; line-height: 1.3; color: var(--ink); }
.pd-summary { font-size: 15px; color: var(--ink-soft); line-height: 1.75; margin: 0; }
.pd-divider { border: none; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
.pd-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pd-stat { background: var(--bg-alt); border-radius: 2px; padding: 18px; text-align: center; }
.pd-stat-value { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.pd-stat-label { font-size: 12px; color: var(--ink-muted); }
.pd-section-title { font-size: 15px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.pd-deliverables { list-style: none; padding: 0; margin: 0; }
.pd-deliverables li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; margin-bottom: 10px; color: var(--ink-soft); }
.pd-deliverables li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #16a34a; flex-shrink: 0; margin-top: 5px; }
.pd-steps { list-style: none; padding: 0; margin: 0; }
.pd-step { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.pd-step-num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; color: var(--ink-soft); }
.pd-step-body { flex: 1; }
.pd-step-title { font-size: 14px; font-weight: 600; margin: 0 0 2px; color: var(--ink); }
.pd-step-desc { font-size: 13px; color: var(--ink-muted); margin: 0; line-height: 1.5; }
.pd-expert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-expert-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.pd-expert-avatar--0 { background: #a7f3d0; color: #065f46; }
.pd-expert-avatar--1 { background: #bfdbfe; color: #1e3a5f; }
.pd-expert-avatar--2 { background: #fde68a; color: #78350f; }
.pd-expert-avatar--3 { background: #fca5a5; color: #7f1d1d; }
.pd-expert-avatar--4 { background: #c4b5fd; color: #3b0764; }
.pd-expert-info { flex: 1; min-width: 0; }
.pd-expert-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.pd-expert-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.pd-expert-badge { font-size: 11px; padding: 2px 8px; border-radius: 2px; background: #dcfce7; color: #166534; font-weight: 500; }
.pd-expert-title { font-size: 13px; color: var(--ink-muted); margin: 0; }
.pd-expert-link { font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pd-expert-link:hover { text-decoration: underline; }
.pd-not-for-you { background: var(--bg-alt); border-radius: 2px; padding: 18px 20px; }
.pd-not-for-you-title { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--ink-soft); }
.pd-not-for-you-body { font-size: 13px; color: var(--ink-muted); line-height: 1.65; margin: 0; }
.pd-cta { padding: 24px 0 8px; }
.pd-cta-price-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.pd-cta-price { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.pd-cta-delivery { font-size: 13px; color: var(--ink-muted); }
.pd-btn { display: block; width: 100%; padding: 14px; border-radius: 2px; font-size: 15px; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; border: 1px solid var(--rule); margin-bottom: 10px; background: var(--bg); color: var(--ink); box-sizing: border-box; }
.pd-btn:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
.pd-btn:visited { color: var(--ink); }
.pd-cta-note { text-align: center; font-size: 12px; color: var(--ink-muted); padding-top: 4px; }
@media (max-width: 480px) { .pd-title { font-size: 1.2rem; } .pd-cta-price { font-size: 1.2rem; } }

/* ============================================================
   Community pages
   ============================================================ */
.community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
@media (max-width: 480px) { .community-grid { grid-template-columns: 1fr; } }
.community-card { border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color 0.15s, box-shadow 0.15s; }
.community-card:hover { border-color: var(--ink-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.06); color: inherit; text-decoration: none; }
.community-card-banner { height: 140px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg-alt); }
.community-card-body { padding: 1rem 1.25rem; flex: 1; }
.community-card-body h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; color: var(--ink); }
.community-card-body p { font-size: 0.875rem; color: var(--ink-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Community home */
.community-banner { width: 100%; height: 180px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--bg-alt); border-radius: 2px; margin-bottom: 1.25rem; }
@media (max-width: 480px) { .community-banner { height: 120px; } }
.community-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
.community-meta h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--ink); }
.community-stats { font-size: 13px; color: var(--ink-muted); margin-bottom: 1.5rem; }
.community-stats a { color: var(--ink-muted); text-decoration: none; }
.community-stats a:hover { color: var(--ink); }
.btn-join { padding: 7px 18px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.btn-join:hover { opacity: .88; color: var(--bg); text-decoration: none; }
.btn-join:visited { color: var(--bg); }
.btn-leave { padding: 7px 18px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.btn-leave:hover { background: var(--bg-alt); color: var(--ink); text-decoration: none; }
.btn-leave:visited { color: var(--ink); }

/* community_home post-item-meta: author link variant */
.post-item-meta a { color: var(--ink-muted); text-decoration: none; font-weight: 500; }
.post-item-meta a:hover { color: var(--ink); }

/* ============================================================
   Admin dropdown action menu (projects_all)
   ============================================================ */
.actions-menu { position: relative; display: inline-block; }
.actions-toggle { background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 3px 10px; cursor: pointer; font-size: 14px; color: var(--ink); font-family: inherit; }
.actions-toggle:hover { background: var(--bg-alt); }
.actions-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 2px; background: var(--bg); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,.08); min-width: 140px; z-index: 100; }
.actions-dropdown.open { display: block; }
.actions-dropdown a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; text-decoration: none; color: var(--ink); }
.actions-dropdown a:hover { background: var(--bg-alt); }
.actions-dropdown a:visited { color: var(--ink); }
.actions-divider { border: none; border-top: 1px solid var(--rule); margin: 4px 0; }
.action-danger { color: #842029 !important; }
.action-danger:hover { background: #f8d7da !important; }

/* Candidate count button */
.count-btn { padding: 2px 8px; font-size: 12px; border-radius: 10px; border: 1px solid; cursor: pointer; background: none; font-family: inherit; }
.count-btn-none { border-color: var(--rule); color: var(--ink-muted); }
.count-btn-has { border-color: #f5c2c7; color: #842029; background: #fff5f5; }

/* Info grid (project detail modal) */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .info-grid { grid-template-columns: 1fr; } }
.info-item label { font-size: 12px; color: var(--ink-muted); display: block; margin-bottom: 2px; }
.info-item span { font-size: 14px; }

/* Candidate list */
.candidate-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.candidate-list li { padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; border-bottom: 1px solid var(--rule); }
.candidate-list li:last-child { border-bottom: none; }

@media (max-width: 768px) { .col-offer, .col-client { display: none; } }

/* ============================================================
   Project detail page
   ============================================================ */
.project-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .project-layout { grid-template-columns: 1fr; } }
.project-meta { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.project-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.project-title { font-size: 1.3rem; margin: 0 0 4px; font-weight: 700; }
.project-subtitle { font-size: 13px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; }
.project-subtitle li { display: flex; align-items: center; gap: 4px; }
.share-row { display: flex; justify-content: flex-end; margin-bottom: 1rem; gap: 8px; flex-wrap: wrap; }
.share-link { font-size: 13px; color: var(--ink-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 2px; }
.share-link:hover { background: var(--bg-alt); color: var(--ink); }
.share-link:visited { color: var(--ink-muted); }
.section-label { font-weight: 600; font-size: 14px; margin: 1rem 0 0.5rem; }
.info-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--ink-muted); }
.candidates-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.candidate-item { display: flex; align-items: center; justify-content: space-between; }
.btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 20px; font-size: 15px; border-radius: 2px; text-decoration: none; cursor: pointer; font-family: inherit; border: 1px solid; }
.btn-block-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-block-primary:hover { opacity: .88; color: var(--bg); text-decoration: none; }
.btn-block-primary:visited { color: var(--bg); }
.btn-block-danger { background: #842029; color: #fff; border-color: #842029; }
.btn-block-danger:hover { opacity: .88; color: #fff; text-decoration: none; }
.btn-block-disabled { background: var(--bg-alt); color: var(--ink-muted); border-color: var(--rule); cursor: not-allowed; }

/* ============================================================
   Confirm project / checkout page
   ============================================================ */
.confirm-wrap { max-width: 560px; margin: 0 auto; }
.confirm-card { border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.confirm-card-body { padding: 1.5rem; }
.confirm-title { font-size: 1.25rem; margin: 0 0 4px; }
.project-name { font-size: 1rem; color: var(--accent); margin: 0 0 1.25rem; }
.section-divider { border: none; border-top: 1px solid var(--rule); margin: 1.25rem 0; }
.content-body { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.content-body ul { padding-left: 1.25rem; margin: 0.5rem 0; }
.content-body li { margin-bottom: 4px; }
.help-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 1rem; }
.project-info-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.project-thumb { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.project-code { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.total-row { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; padding: 1rem 0 0; }
.btn-confirm { display: block; width: 100%; text-align: center; box-sizing: border-box; padding: 12px 20px; margin-top: 1.25rem; font-size: 15px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px; text-decoration: none; cursor: pointer; font-family: inherit; }
.btn-confirm:hover { opacity: .88; color: var(--bg); text-decoration: none; }
.btn-confirm:visited { color: var(--bg); }