/* ============================================================
   afif.pro — Espace client · Design system beige
   Supreme, cartes beige #DED6CB, angles 20 px,
   aucune icône décorative, un seul accent discret.
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-raised: #FFFFFF;
  --surface: #DED6CB;        /* la carte beige, composant signature */
  --surface-2: #D4CABD;      /* survol, zones creuses */
  --surface-3: #C7BBAC;
  --border: #C9BFB2;
  --border-strong: #AFA394;
  --line: #C9BFB2;

  /* Encre */
  --fg: #1A1A1A;
  --muted: #5C5C5C;
  --faint: #857D74;
  --dark: #1A1A1A;

  /* Accent : discret, jamais en aplat massif */
  --accent: #8A5A3B;
  --accent-2: #6F4830;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(138, 90, 59, .10);
  --accent-glow: transparent;
  --mint: #7FA88C;

  /* Etats */
  --danger: #A33529;
  --danger-soft: rgba(163, 53, 41, .10);
  --warning: #8A5B08;
  --warning-soft: rgba(138, 91, 8, .10);
  --info: #3C5A7A;
  --info-soft: rgba(60, 90, 122, .10);
  --success: #4A6F52;
  --success-soft: rgba(74, 111, 82, .10);
  --purple: #6B5B8A;
  --purple-soft: rgba(107, 91, 138, .10);

  /* Rayons : 20px sur les cartes, plus serre sur les controles */
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;
  --r-xl: 20px;
  --r-pill: 999px;

  --shadow: 0 1px 0 rgba(26, 26, 26, .04);
  --shadow-lg: 0 24px 50px -30px rgba(26, 26, 26, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: 'Supreme', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: 'Supreme', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--fg); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: var(--r); }
::selection { background: var(--fg); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(17,20,23,.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(17,20,23,.18); }
*::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Layout ──────────────────────────────────────────────────── */
.app-wrapper { display: flex; min-height: 100dvh; }
.sidebar {
  width: 240px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  min-height: 100dvh;
  position: sticky; top: 0; height: 100dvh;
  overflow-y: auto; flex-shrink: 0;
  display: flex; flex-direction: column;
  z-index: 50;
}
.main-content, .content { flex: 1; min-width: 0; padding: 1.5rem 2.6rem 4rem; position: relative; }
.main-content::before { content: none; }
.main-content > * { position: relative; }
.content-grid, .grid { display: grid; gap: 1.25rem; }
.grid-2, .grid-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.content-grid--sidebar { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; }
.content-main, .content-sidebar { min-width: 0; }
@media (max-width: 1024px) { .grid-2, .grid-two-cols, .content-grid--sidebar { grid-template-columns: 1fr; } }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar-logo { padding: 1.35rem 1.25rem 1rem; }
.sidebar-logo .logo-link { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--fg); }
.sidebar-logo img { height: 26px; width: auto; filter: invert(1) brightness(.15); }
.logo-text { font-family: var(--display); font-size: 1rem; font-weight: 500; letter-spacing: -.02em; color: var(--fg); }
.logo-text em, .logo-text span { color: inherit; font-style: normal; }

.sidebar-nav { flex: 1; padding: .4rem 0 1rem; }
.sidebar-nav ul { list-style: none; }
.sidebar-nav a {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1.25rem .55rem calc(1.25rem - 2px);
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem; font-weight: 400;
  border-radius: var(--r);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.sidebar-nav a:hover { color: var(--fg); background: var(--surface-2); }
.sidebar-nav a.active { color: var(--fg); font-weight: 500; border-left-color: var(--fg); background: transparent; }
.sidebar-nav a .icon, .sidebar-nav a svg { display: none; }
.sidebar-separator {
  margin: 1.1rem 1.25rem .2rem; padding: .9rem 0 .35rem;
  border-top: 1px solid var(--border);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); font-weight: 500;
}
.sidebar-separator span { display: block; }
.badge-count {
  margin-left: auto;
  background: var(--fg); color: #fff;
  font-size: .66rem; font-weight: 500; letter-spacing: .02em;
  border-radius: var(--r); padding: .1rem .4rem; min-width: 18px; text-align: center; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.sidebar-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; }
.user-info { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; text-decoration: none; }
.user-avatar {
  width: 30px; height: 30px; border-radius: var(--r);
  background: var(--fg); color: #fff;
  font-family: var(--display); font-weight: 500; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-details { display: flex; flex-direction: column; min-width: 0; }
.user-name { color: var(--fg); font-size: .86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: var(--faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.logout-link {
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid transparent; border-radius: var(--r); flex-shrink: 0;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.logout-link:hover { border-color: var(--border-strong); color: var(--fg); background: transparent; }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .3rem 0 1.1rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}
.topbar-context { min-width: 0; }
.topbar-hello { font-size: .78rem; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
.topbar-section { font-family: var(--display); font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.topbar-divider { width: 1px; height: 24px; background: var(--border-strong); margin: 0 .25rem; }
.topbar-user {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--fg);
  padding: .25rem .6rem .25rem .25rem; border-radius: var(--r); border: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.topbar-user:hover { background: transparent; border-color: var(--border-strong); }
.topbar-user .user-avatar { width: 30px; height: 30px; font-size: .85rem; }
.topbar-user-name { font-size: .86rem; font-weight: 500; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cloche notifications */
.notif-wrap { position: relative; }
.notif-btn {
  position: relative; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r);
  color: var(--fg); cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.notif-btn svg { width: 16px; height: 16px; stroke-width: 1.6; }
.notif-btn:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.notif-dot {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--fg); color: #fff; font-size: .62rem; font-weight: 500; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg);
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-width: calc(100vw - 32px);
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r);
  box-shadow: var(--shadow-lg); z-index: 300; overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--border);
  font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--faint);
}
.notif-head a { font-size: .78rem; font-weight: 500; text-decoration: none; color: var(--fg); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--fg); }
.notif-list { list-style: none; max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: .75rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); font-size: .84rem; }
.notif-item:last-child { border-bottom: none; }
.notif-ico { display: none; }
.notif-body { min-width: 0; flex: 1; }
.notif-text { color: var(--fg); line-height: 1.45; }
.notif-text strong { font-weight: 500; }
.notif-time { color: var(--faint); font-size: .72rem; margin-top: .15rem; }
.notif-empty { padding: 2rem 1.2rem; text-align: center; color: var(--muted); font-size: .85rem; }

/* ── Page header : titre nu sur un filet ─────────────────────── */
.page-header {
  position: relative; overflow: visible;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.8rem; padding: 0 0 1.2rem;
  border: 0; border-bottom: 1px solid var(--fg); border-radius: var(--r); background: transparent;
}
.page-header::before, .page-header::after { content: none; }
.page-header > * { position: relative; z-index: 1; }
.page-title { font-family: var(--display); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; color: var(--fg); }
.page-title em { color: inherit; font-style: normal; }
.page-subtitle { color: var(--muted); font-size: .92rem; margin-top: .5rem; max-width: 62ch; }
.page-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.page-header-filter { display: flex; gap: .6rem; align-items: center; }
.breadcrumb, .back-link {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--faint);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; margin-bottom: 1rem;
}
.breadcrumb a, .back-link:hover { color: var(--fg); }
.breadcrumb a { text-decoration: none; }

/* ── Stat cards ──────────────────────────────────────────────── */
.stats-grid, .stat-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 1.6rem;
}
.stat-card {
  background: var(--surface); border: 0; border-radius: var(--r);
  padding: 1.1rem 1.2rem 1.2rem; display: flex; align-items: center; gap: .9rem; position: relative;
  transition: background .3s var(--ease);
}
.stat-card::before, .stat-card::after { content: none; }
.stat-card:hover { border-color: transparent; background: var(--surface-2); }
.stat-card--alert { border-color: transparent; }
.stat-card--alert .stat-card__value, .stat-card--alert .stat-value { color: var(--danger); }
.stat-card__body, .stat-body { display: flex; flex-direction: column-reverse; min-width: 0; }
.stat-card__icon, .stat-icon { display: none; }
.stat-card__value, .stat-value {
  font-family: var(--display); font-size: 2.1rem; font-weight: 400; letter-spacing: -.035em; line-height: 1;
  color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-card__label, .stat-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--faint);
  margin: 0 0 .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Hero de page ────────────────────────────────────────────── */
.dash-hero {
  position: relative; overflow: visible; border: 0; border-bottom: 1px solid var(--fg); border-radius: var(--r);
  padding: 0 0 1.4rem; margin-bottom: 1.6rem; background: transparent;
}
.dash-hero::before, .dash-hero::after { content: none; }
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero__title { font-family: var(--display); font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; }
.dash-hero__title em { color: inherit; font-style: normal; }
.dash-hero__sub { color: var(--muted); margin-top: .7rem; font-size: .95rem; line-height: 1.6; max-width: 58ch; }
.dash-hero__actions { margin-top: 1.2rem; display: flex; gap: .6rem; flex-wrap: wrap; }

/* ── Cards ───────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 1.25rem; overflow: hidden; }
.card-header, .card__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--border); }
.card-title, .card__title { font-family: var(--display); font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; color: var(--fg); display: flex; align-items: center; gap: .5rem; }
.card-title svg, .card__title svg { display: none; }
.card-link { font-size: .8rem; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--fg); border-bottom: 1px solid var(--fg); padding-bottom: 1px; }
.card-link:hover { color: var(--accent); border-color: var(--accent); }
.card-body, .card__body { padding: 1.3rem; }
.card__body--flush, .card-body.p-0 { padding: 0; }
.card > .card-title:first-child { padding: 1rem 1.3rem 0; }
.card > .card-title:first-child + * { margin-top: .9rem; }

/* ── Progress ────────────────────────────────────────────────── */
.progress-wrap { display: flex; align-items: center; gap: .7rem; }
.progress { flex: 1; height: 4px; background: var(--surface-3); border-radius: var(--r); overflow: hidden; }
.progress-bar { height: 100%; background: var(--fg); border-radius: var(--r); transition: width .9s var(--ease); min-width: 2px; }
.progress-label { font-size: .78rem; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── Jalons projet ───────────────────────────────────────────── */
.steps { display: flex; align-items: flex-start; margin: .4rem 0 .2rem; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; text-align: center; }
.step::before { content: ''; position: absolute; top: 5px; left: -50%; width: 100%; height: 1px; background: var(--border-strong); }
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--fg); }
.step-dot { width: 11px; height: 11px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border-strong); position: relative; z-index: 1; }
.step.done .step-dot { background: var(--fg); border-color: var(--fg); }
.step.current .step-dot { background: var(--surface); border-color: var(--fg); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 5px var(--fg); }
.step-label { font-size: .68rem; color: var(--faint); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.step.done .step-label { color: var(--muted); }
.step.current .step-label { color: var(--fg); }

/* ── Cartes projets ──────────────────────────────────────────── */
.project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.project-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.3rem 1.4rem;
  display: flex; flex-direction: column; gap: .9rem; text-decoration: none; color: var(--fg); position: relative; overflow: hidden;
  transition: border-color .4s var(--ease);
}
.project-card::after { content: none; }
.project-card:hover { border-color: var(--fg); transform: none; }
.project-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.project-card-title { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.project-card-client { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.project-card-desc { font-size: .85rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-card-meta { display: flex; justify-content: space-between; align-items: center; gap: .8rem; font-size: .74rem; color: var(--faint); margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--border); }
.project-card-meta svg { display: none; }

/* ── Tables ──────────────────────────────────────────────────── */
.table-responsive, .table-wrapper { overflow-x: auto; }
table.table, table.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.table thead th, table.data-table thead th {
  padding: .7rem 1.1rem; text-align: left; font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); background: transparent; border-bottom: 1px solid var(--fg); white-space: nowrap;
}
table.table td, table.data-table td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); color: var(--fg); vertical-align: middle; }
table.table tbody tr:last-child td, table.data-table tbody tr:last-child td { border-bottom: none; }
table.table tbody tr:hover td, table.data-table tbody tr:hover td { background: var(--surface-2); }
.table-empty { text-align: center; color: var(--muted); padding: 2.4rem 1rem !important; }
.actions-cell, .action-buttons, .action-group { display: flex; gap: .45rem; align-items: center; }
.fw-medium { font-weight: 500; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.amount { font-variant-numeric: tabular-nums; font-weight: 500; }
.table-link { color: var(--fg); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--border-strong); }
.table-link:hover { color: var(--fg); border-color: var(--fg); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge, .badge-pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem;
  border-radius: var(--r); font-size: .66rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; border: 1px solid var(--border-strong); background: transparent; color: var(--muted);
}
.badge::before { content: none; }
.badge-warning { color: var(--warning); border-color: rgba(138,91,8,.35); }
.badge-info { color: var(--info); border-color: rgba(31,79,159,.35); }
.badge-purple { color: var(--purple); border-color: rgba(90,70,176,.35); }
.badge-success { color: var(--success); border-color: rgba(18,128,90,.4); }
.badge-secondary { color: var(--muted); border-color: var(--border-strong); }
.badge-danger { color: var(--danger); border-color: rgba(179,52,42,.4); }
.badge.devis { color: var(--info); border-color: rgba(31,79,159,.35); background: transparent; }
.badge.facture { color: var(--fg); border-color: var(--fg); background: transparent; }
.tag { display: inline-block; font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: var(--r); padding: .12rem .45rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.15rem; border-radius: var(--r); border: 1px solid var(--fg); cursor: pointer;
  font-family: var(--font); font-size: .86rem; font-weight: 500; text-decoration: none; line-height: 1.3;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  min-height: 40px; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; stroke-width: 1.7; }
.btn:active { transform: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--fg); color: #fff; border-color: var(--fg); }
.btn-primary:hover { background: #2A3037; border-color: #2A3037; }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover { background: transparent; border-color: var(--fg); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-outline:hover { background: var(--fg); color: #fff; border-color: var(--fg); }
.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--fg); }
.btn-success { background: transparent; color: var(--success); border-color: rgba(18,128,90,.5); }
.btn-success:hover { background: var(--success); color: #fff; border-color: var(--success); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #96271F; border-color: #96271F; }
.btn-danger-outline { background: transparent; color: var(--danger); border-color: rgba(179,52,42,.5); }
.btn-danger-outline:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-sm { padding: .4rem .8rem; font-size: .8rem; min-height: 32px; border-radius: var(--r); }
.btn-full { width: 100%; }
.btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-icon { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.15rem; }
.form-group--full { grid-column: 1 / -1; }
.form-group-action { display: flex; align-items: flex-end; }
.form-group label, .form-label, .field-label, .filter-group label {
  display: block; font-size: .68rem; font-weight: 500; letter-spacing: .12em; color: var(--faint); margin-bottom: .45rem; text-transform: uppercase;
}
.required::after { content: " *"; color: var(--danger); }
.form-control, .form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"], select, textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--r);
  font-family: inherit; font-size: 16px; color: var(--fg); background: var(--surface);
  transition: border-color .35s var(--ease); -webkit-appearance: none; appearance: none;
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--fg); }
input[type="file"] { padding: .5rem 0; background: transparent; border: none; color: var(--muted); }
.form-control:focus, .form-input:focus, .form-select:focus, .form-textarea:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--fg); outline: none; box-shadow: none; background: var(--surface);
}
select, .form-select, select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111417' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.3rem;
}
select option { background: #fff; color: var(--fg); }
textarea, .form-textarea, textarea.form-control { resize: vertical; min-height: 110px; }
.form-control-sm { padding: .45rem .7rem; font-size: .85rem; }
::placeholder { color: var(--faint); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
.form-row, .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.form-hint { font-size: .78rem; color: var(--muted); margin-top: .35rem; text-transform: none; letter-spacing: 0; }
.form-error { font-size: .8rem; color: var(--danger); margin-top: .35rem; }
.is-invalid { border-color: var(--danger) !important; }
.error-list { list-style: none; }
.error-list li { color: var(--danger); font-size: .85rem; margin-bottom: .25rem; }
.form-actions { display: flex; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap; }
.form-inline, .form-inline-upload, .form-filters, .filters-bar, .filters-group { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; }
.filters-bar { margin-bottom: 1.3rem; }
.radio-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.radio-label { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--fg); cursor: pointer; }
.field-group { margin-bottom: 1rem; }
.field-value { color: var(--fg); font-size: .92rem; }

/* ── Alerts / flash ──────────────────────────────────────────── */
.flash-messages { margin-bottom: 1.2rem; }
.alert {
  padding: .85rem 1.1rem; border-radius: var(--r); margin-bottom: .8rem; font-size: .88rem;
  display: flex; align-items: center; gap: .7rem; border: 1px solid var(--border); border-left-width: 2px; background: var(--surface-2); color: var(--fg);
  transition: opacity .4s var(--ease);
}
.alert svg { display: none; }
.alert-success { border-left-color: var(--success); color: var(--fg); }
.alert-error { border-left-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.alert-info { border-left-color: var(--fg); }

/* ── Empty states ────────────────────────────────────────────── */
.empty-state, .empty-state-center { text-align: center; padding: 2.8rem 1.4rem; color: var(--muted); font-size: .9rem; }
.empty-state svg, .empty-state-center svg { display: none; }
.empty-state .btn, .empty-state-center .btn { margin-top: 1rem; }

/* ── Quick links ─────────────────────────────────────────────── */
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.quick-link {
  display: flex; align-items: center; gap: .65rem; padding: .95rem 1.05rem;
  background: var(--surface); border: 0; border-radius: var(--r); color: var(--fg); font-size: .86rem; font-weight: 500; text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.quick-link svg { display: none; }
.quick-link::after { content: '→'; margin-left: auto; color: var(--faint); transition: transform .4s var(--ease), color .4s var(--ease); }
.quick-link:hover { background: var(--surface-2); color: var(--fg); border-color: transparent; }
.quick-link:hover::after { transform: translateX(4px); color: var(--fg); }

/* ── Flux d'activité ─────────────────────────────────────────── */
.activity-feed { list-style: none; }
.activity-item { display: flex; gap: .8rem; padding: .85rem 1.3rem; border-bottom: 1px solid var(--border); font-size: .86rem; }
.activity-item:last-child { border-bottom: none; }
.activity-icon { display: none; }
.activity-body { flex: 1; min-width: 0; }
.activity-text { color: var(--fg); line-height: 1.45; }
.activity-time { color: var(--faint); font-size: .72rem; margin-top: .1rem; }

/* ── Détails projet ──────────────────────────────────────────── */
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.detail-item { background: var(--surface); border: 0; border-radius: var(--r); padding: .9rem 1.05rem; }
.detail-item .field-label { margin-bottom: .3rem; }
.detail-item .field-value { font-weight: 500; }
.status-pills { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Fichiers ────────────────────────────────────────────────── */
.file-list, .doc-list { list-style: none; }
.file-item, .doc-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.3rem; border-bottom: 1px solid var(--border); }
.file-item:last-child, .doc-item:last-child { border-bottom: none; }
.file-info, .doc-info { display: flex; align-items: center; gap: .8rem; min-width: 0; flex: 1; }
.file-text { display: flex; flex-direction: column; min-width: 0; }
.file-name, .doc-number { font-weight: 500; font-size: .88rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta, .doc-meta, .doc-date { font-size: .75rem; color: var(--muted); }
.file-type-icon {
  width: 38px; height: 38px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: .6rem; font-weight: 500; letter-spacing: .08em; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); text-transform: uppercase;
}
.ft-img, .ft-pdf, .ft-vid, .ft-zip, .ft-doc { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.upload-zone, .dropzone {
  border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 2.2rem 1.5rem; text-align: center; cursor: pointer; color: var(--muted);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.upload-zone:hover, .dropzone:hover, .upload-zone.dragover, .dropzone.dragover { border-color: var(--fg); background: var(--surface-2); color: var(--fg); }
.dropzone svg { display: none; }
.dropzone-title { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--fg); }
.dropzone.dragover .dropzone-title { color: var(--fg); }
.dropzone-hint { font-size: .78rem; margin-top: .3rem; }
.dropzone input[type="file"] { display: none; }
#file-preview { display: none; margin-top: .8rem; font-size: .84rem; font-weight: 500; color: var(--fg); }

/* ── Messagerie ──────────────────────────────────────────────── */
.messages-layout { display: grid; grid-template-columns: 310px 1fr; gap: 1rem; align-items: start; }
.conversations-list, .conversation-list, .conv-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; max-height: 72vh; overflow-y: auto; }
.conversation-item, .conv-item { border-bottom: 1px solid var(--border); }
.conversation-item:last-child, .conv-item:last-child { border-bottom: none; }
.conversation-link { display: flex; gap: .7rem; padding: .9rem 1rem; text-decoration: none; color: var(--fg); transition: background .3s var(--ease); border-left: 2px solid transparent; }
.conversation-link:hover { background: var(--surface-2); }
.conversation-item--unread .conversation-link { background: transparent; border-left-color: var(--fg); }
.conversation-item.active .conversation-link, .conv-item.active .conversation-link { background: var(--surface-2); border-left-color: var(--fg); }
.conv-avatar { width: 36px; height: 36px; border-radius: var(--r); background: var(--fg); color: #fff; font-family: var(--display); font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .95rem; }
.conv-body, .conv-info { flex: 1; min-width: 0; }
.conv-header { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.conv-name { font-weight: 500; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-company { font-size: .74rem; color: var(--muted); }
.conv-date { font-size: .7rem; color: var(--faint); flex-shrink: 0; }
.conv-preview { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }
.conv-you { color: var(--faint); }
.conv-badge { background: var(--fg); color: #fff; font-size: .66rem; font-weight: 500; border-radius: var(--r); padding: .1rem .4rem; flex-shrink: 0; }
.chat-panel, .chat-panel--full { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; min-height: 62vh; max-height: 72vh; }
.chat-panel--full { grid-column: 1 / -1; }
.chat-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.chat-header-info { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.chat-header-info .conv-avatar { width: 40px; height: 40px; }
.chat-title { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.chat-subtitle { font-size: .75rem; color: var(--muted); }
.chat-filter-form { display: flex; gap: .5rem; align-items: center; }
.chat-messages, .messages-container, .message-list { flex: 1; display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; padding: 1.25rem; list-style: none; }
.message-item { display: flex; gap: .6rem; max-width: 78%; }
.message-mine { margin-left: auto; flex-direction: row-reverse; }
.message-avatar { width: 30px; height: 30px; border-radius: var(--r); background: var(--surface-3); color: var(--muted); font-size: .78rem; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.message-mine .message-avatar { background: var(--fg); color: #fff; }
.message-body { min-width: 0; }
.message-bubble, .message-content { padding: .7rem .95rem; border-radius: var(--r); font-size: .88rem; line-height: 1.5; word-wrap: break-word; }
.message-mine .message-bubble, .message-mine .message-content { background: var(--fg); color: #fff; border-radius: var(--r); }
.message-theirs .message-bubble, .message-theirs .message-content { background: var(--surface-2); color: var(--fg); border: 0; border-radius: var(--r); }
.message-meta, .message-time { font-size: .68rem; color: var(--faint); margin-top: .3rem; }
.message-mine .message-meta { text-align: right; }
.message-sender { font-weight: 500; }
.message-project-tag { display: inline-block; font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: var(--r); padding: .08rem .4rem; margin-bottom: .35rem; }
.message-mine .message-project-tag { background: transparent; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.35); }
.chat-composer, .composer-form { border-top: 1px solid var(--border); padding: .9rem 1.1rem; }
.composer-form { display: flex; flex-direction: column; gap: .6rem; border-top: none; padding: 0; }
.composer-textarea { min-height: 60px; border-radius: var(--r); }
.composer-actions { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-wrap: wrap; }
.composer-project-select { max-width: 240px; }
.day-divider { text-align: center; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: .4rem 0; display: flex; align-items: center; gap: .8rem; }
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
@media (max-width: 900px) { .messages-layout { grid-template-columns: 1fr; } .conversations-list, .conversation-list, .conv-list { max-height: 36vh; } }

/* ── Modals ──────────────────────────────────────────────────── */
.modal, .modal-overlay, .modal-backdrop { position: fixed; inset: 0; background: rgba(14, 17, 19, .6); backdrop-filter: none; display: flex; align-items: center; justify-content: center; padding: 1.2rem; z-index: 1000; }
.modal[hidden], .modal-overlay[hidden], .modal-backdrop[hidden] { display: none; }
.modal-content, .modal-dialog { background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r); width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); max-height: 90dvh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid var(--border); }
.modal-title { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; }
.modal-close, .modal-close-btn { background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; }
.modal-close:hover, .modal-close-btn:hover { background: transparent; border-color: var(--border-strong); color: var(--fg); }
.modal-body { padding: 1.3rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.3rem; border-top: 1px solid var(--border); }
.modal-overlay > .modal { position: static; inset: auto; display: block; background: var(--bg-raised); backdrop-filter: none; border: 1px solid var(--border-strong); border-radius: var(--r); width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); padding: 0; max-height: 90dvh; overflow-y: auto; }
.modal > .modal-backdrop { position: absolute; inset: 0; background: transparent; backdrop-filter: none; padding: 0; }
.modal .modal-dialog { position: relative; z-index: 1; }
.modal-dialog > .modal-content { background: transparent; border: none; box-shadow: none; max-height: none; }

/* ── Login (variante carte, pages secondaires) ───────────────── */
.login-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 1.5rem; width: 100%; }
.login-card { background: var(--surface); border: 1px solid var(--border); backdrop-filter: none; border-radius: var(--r); padding: 2.6rem 2.2rem; width: 100%; max-width: 420px; box-shadow: none; }
.login-logo { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1.9rem; }
.login-logo img { height: 34px; width: auto; filter: invert(1) brightness(.15); }
.login-logo-text { font-family: var(--display); font-size: 1.3rem; font-weight: 500; color: var(--fg); letter-spacing: -.02em; }
.login-logo-text em, .login-logo-text span { color: inherit; font-style: normal; }
.login-title { font-family: var(--display); font-size: 1.7rem; font-weight: 400; letter-spacing: -.03em; color: var(--fg); margin-bottom: .3rem; text-align: center; }
.login-subtitle { color: var(--muted); font-size: .9rem; text-align: center; margin-bottom: 1.8rem; }
.form-footer-links { text-align: right; margin-bottom: 1.25rem; }
.link-subtle { font-size: .82rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.link-subtle:hover { color: var(--fg); border-color: var(--fg); }
.link-strong { color: var(--fg); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--fg); }
.link-strong:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.link-container { text-align: center; margin-top: 1.2rem; font-size: .85rem; color: var(--muted); }
.login-footer-brand { text-align: center; margin-top: 1.8rem; font-size: .8rem; color: var(--faint); }
.login-footer-brand a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.login-footer-brand a:hover { border-color: var(--fg); }

/* ── Login split : photo plein cadre à gauche, formulaire à droite ── */
.login-split { flex: 1; width: 100%; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr .9fr; }
.login-brand {
  position: relative; overflow: hidden; padding: 2.6rem 3rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  background: var(--dark) url('../img/login-hero.webp') center/cover no-repeat;
  border-right: 0; color: #fff;
}
.login-brand::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,19,.35) 0%, rgba(14,17,19,.15) 40%, rgba(14,17,19,.85) 100%); animation: none; pointer-events: none; }
.login-brand::after { content: none; }
.login-brand > * { position: relative; z-index: 1; }
.login-brand-logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
.login-brand-logo img { height: 32px; width: auto; }
.login-brand-logo span { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; }
.login-brand-logo em { color: inherit; font-style: normal; }
.login-brand-hero h1 { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; color: #fff; max-width: 12ch; }
.login-brand-hero h1 em { color: inherit; font-style: normal; }
.login-brand-hero p { color: rgba(255,255,255,.8); margin-top: 1.2rem; max-width: 38ch; font-size: 1rem; line-height: 1.6; }
.login-features { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 2rem; max-width: 420px; border-top: 1px solid rgba(255,255,255,.25); }
.login-feature { display: flex; gap: .85rem; align-items: center; font-size: .9rem; color: rgba(255,255,255,.9); padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.login-feature-ico { display: none; }
.login-brand-foot { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.login-brand-foot a { color: rgba(255,255,255,.75); text-decoration: none; }
.login-brand-foot a:hover { color: #fff; }
.login-form-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem; background: var(--bg); }
.login-form-inner { width: 100%; max-width: 380px; }
.login-form-inner .login-mobile-logo { display: none; }
.login-form-inner h2 { font-family: var(--display); font-size: 2rem; font-weight: 400; letter-spacing: -.03em; margin-bottom: .4rem; }
.login-form-inner .login-sub { color: var(--muted); font-size: .92rem; margin-bottom: 2rem; }
@media (max-width: 880px) {
  .login-split { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-form-inner .login-mobile-logo { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-bottom: 1.8rem; }
  .login-form-inner .login-mobile-logo img { height: 32px; filter: invert(1) brightness(.15); }
}

/* ── Utilitaires ─────────────────────────────────────────────── */
.mb-3 { margin-bottom: .9rem; }
.mb-4 { margin-bottom: 1.4rem; }
.p-0 { padding: 0 !important; }
.p-4 { padding: 1.4rem; }
.divider { height: 1px; background: var(--border); margin: 1.2rem 0; border: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-wrapper { flex-direction: column; }
  .sidebar { width: 100%; height: auto; min-height: 0; position: static; flex-direction: column; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-logo { padding: .9rem 1rem; border-bottom: none; }
  .sidebar-nav { padding: 0 .6rem .6rem; overflow-x: auto; scrollbar-width: none; }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav ul { display: flex; gap: 0; }
  .sidebar-nav a { white-space: nowrap; padding: .5rem .7rem; border-left: none; border-bottom: 2px solid transparent; }
  .sidebar-nav a.active { border-left: none; border-bottom-color: var(--fg); }
  .sidebar-separator { display: none; }
  .sidebar-footer { padding: .6rem 1rem; }
  .main-content, .content { padding: 1rem 1rem 2.5rem; }
  .topbar { padding: .2rem 0 .9rem; margin-bottom: 1.1rem; }
  .topbar-hello, .topbar-user-name { display: none; }
  .stats-grid, .stat-cards { grid-template-columns: 1fr 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .page-title { font-size: 1.8rem; }
  .project-cards { grid-template-columns: 1fr; }
  .steps { flex-wrap: wrap; gap: .6rem .2rem; }
}
@media (max-width: 460px) { .stats-grid, .stat-cards { grid-template-columns: 1fr; } }

/* ===== Espace SEO ===== */
.seo-tabs { display: inline-flex; gap: 0; padding: 0; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r); }
.seo-tab { position: relative; cursor: pointer; text-decoration: none; }
.seo-tab + .seo-tab { border-left: 1px solid var(--border-strong); }
.seo-tab span { display: block; padding: .5rem 1.1rem; border-radius: var(--r); font-size: .85rem; font-weight: 500; color: var(--muted); transition: color .3s var(--ease), background .3s var(--ease); }
.seo-tab.active span { background: var(--fg); color: #fff; }
.seo-tab:not(.active):hover span { color: var(--fg); }
.seo-search .form-actions { justify-content: flex-start; }

/* ── Pied de page applicatif ─────────────────────────────────── */
.app-footer { text-align: center; padding: 18px 14px 26px; font-size: .74rem; color: var(--faint); border-top: 1px solid var(--border); }
.app-footer a { color: inherit; text-decoration: none; }
.app-footer a:hover { color: var(--fg); }

/* ── Tableau de bord ─────────────────────────────────────────── */
a.stat-card { text-decoration: none; color: inherit; }
.dash-analytics { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1rem; margin-bottom: 1.6rem; }
@media (max-width: 1024px) { .dash-analytics { grid-template-columns: 1fr; } }
.card-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-top: 1px solid var(--border); }
.card-actions .btn svg { display: none; }

/* ── En-tête de page compact ─────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--fg); }
.page-head h1 { font-family: var(--display); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
.page-head h1 em { color: inherit; font-style: normal; }
.page-head p { color: var(--muted); font-size: .92rem; margin-top: .5rem; max-width: 62ch; }
.page-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Bandeau de chiffres clés : filets 1 px ──────────────────── */
.kpi-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 1.1rem; }
.kpi { background: var(--bg-raised); padding: 1.1rem 1.2rem 1.2rem; display: block; text-decoration: none; color: inherit; transition: background .3s var(--ease); }
a.kpi:hover { background: var(--surface-2); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.kpi-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-ic { display: none; }
.kpi-value { font-family: var(--display); font-size: 2.1rem; font-weight: 400; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi--alert .kpi-value { color: var(--danger); }
.kpi--accent .kpi-value { color: var(--fg); }
@media (max-width: 560px) { .kpi-bar { grid-template-columns: 1fr 1fr; } }

/* ── Cellules de graphique ───────────────────────────────────── */
.chart-cell { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.chart-cell .card-title { margin-bottom: .2rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; justify-content: center; margin-top: .35rem; font-size: .74rem; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 8px; height: 8px; border-radius: var(--r); flex-shrink: 0; }
.chart-kpi { font-size: .78rem; color: var(--faint); white-space: nowrap; }
.chart-kpi strong { color: var(--fg); font-weight: 500; }
.bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 156px; border-bottom: 1px solid var(--border-strong); }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; height: 100%; justify-content: flex-end; }
.bar-col .bar { width: 100%; max-width: 38px; border-radius: var(--r); background: var(--fg); transition: opacity .3s var(--ease); }
.bar-col:hover .bar { filter: none; opacity: .7; }
.bar-col span { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.row-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.3rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.row-line:last-child { border-bottom: none; }

/* Documents (admin) : rattachement d'un document à un projet */
.doc-project-form { margin: 0; }
.doc-project-form select { min-width: 10rem; max-width: 16rem; }

/* Fiche projet (admin) : envoi d'un devis / d'une facture */
.send-doc-form .form-group { margin-bottom: .85rem; }
.send-doc-form .form-row { grid-template-columns: 1fr 1fr; gap: .75rem; }
.send-doc-form input[type="file"] { padding: .45rem .6rem; font-size: .85rem; }

/* Fiche projet (admin) : échelle des étapes sous le curseur d'avancement */
.progress-scale { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line, #E3E6E8); margin-top: .5rem; }
.progress-scale span { padding: .55rem .6rem 0 0; border-left: 1px solid var(--line, #E3E6E8); padding-left: .6rem; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6B7075); line-height: 1.35; }
.progress-scale span:last-child { text-align: right; border-left: 0; border-right: 1px solid var(--line, #E3E6E8); padding-right: .6rem; }
.progress-scale span b { display: block; font-weight: 500; color: var(--fg, #111417); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.progress-scale span.on { color: var(--fg, #111417); border-color: var(--fg, #111417); }
.progress-scale span.on b { text-decoration: underline; text-underline-offset: 3px; }

/* Équipe & permissions (admin/equipe.php) */
.team-row { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line, #E3E6E8); }
.team-row:last-child { border-bottom: 0; }
.team-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.team-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.team-perms { margin-top: .9rem; }
.team-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.team-actions--end { justify-content: flex-end; border-top: 1px solid var(--line, #E3E6E8); padding-top: .8rem; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); border-top: 1px solid var(--line, #E3E6E8); border-left: 1px solid var(--line, #E3E6E8); }
.perm-item { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .7rem; font-size: .86rem; cursor: pointer; border-right: 1px solid var(--line, #E3E6E8); border-bottom: 1px solid var(--line, #E3E6E8); }
.perm-item:hover { background: var(--bg-2, #F4F5F5); }
.perm-item input { margin-top: .15rem; flex-shrink: 0; }
.perm-item small { display: block; color: var(--muted, #6B7075); font-size: .76rem; line-height: 1.35; margin-top: .15rem; }
.perm-grid--detail { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: .4rem; }

/* ============================================================
   Ajustements identite afif.pro
   Le socle ci-dessus vient du systeme d'origine : structure,
   espacements et points de rupture inchanges. Ce bloc ne touche
   qu'aux rayons par composant et aux details propres au beige.
   ============================================================ */

/* Rayons par composant */
.card,
.login-card,
.modal-content, .modal-dialog, .modal-overlay > .modal,
.notif-panel,
.conversations-list, .conversation-list, .conv-list,
.chat-panel, .chat-panel--full,
.stats-grid, .stat-cards,
.kpi-bar,
.quick-links,
.details-grid,
.perm-grid,
.project-card,
.upload-zone, .dropzone { border-radius: var(--r-lg); }

.badge, .badge-pill, .tag, .badge-count, .conv-badge, .notif-dot,
.message-project-tag { border-radius: var(--r-pill); }

.btn, .form-control, .form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="tel"],
input[type="search"], select, textarea { border-radius: var(--r); }

.btn-sm, .btn-icon, .file-type-icon, .user-avatar, .conv-avatar,
.message-avatar, .modal-close, .modal-close-btn, .notif-btn,
.logout-link { border-radius: var(--r-sm); }

.message-bubble, .message-content { border-radius: var(--r-lg); }
.message-mine .message-bubble, .message-mine .message-content { border-bottom-right-radius: var(--r-sm); }
.message-theirs .message-bubble, .message-theirs .message-content { border-bottom-left-radius: var(--r-sm); }

.progress, .progress-bar { border-radius: var(--r-pill); }
.step-dot { border-radius: var(--r-pill); }
.alert { border-radius: var(--r); }
.seo-tabs { border-radius: var(--r); overflow: hidden; }

/* Les grilles a filet 1 px : le fond beige passe en separateur */
.stats-grid, .stat-cards, .kpi-bar, .quick-links, .details-grid { overflow: hidden; }

/* Labels : majuscules, graisse 600 — regle de l'identite */
.form-group label, .form-label, .field-label, .filter-group label,
.stat-card__label, .stat-label, .kpi-label, .sidebar-separator,
.user-role, .step-label { font-weight: 600; }

/* Ascenseurs accordes au beige */
* { scrollbar-color: rgba(26, 26, 26, .18) transparent; }
*::-webkit-scrollbar-thumb { background: rgba(26, 26, 26, .18); border-radius: var(--r-pill); }

/* Le logo est deja sombre : pas d'inversion */
.sidebar-logo img, .login-logo img, .login-form-inner .login-mobile-logo img { filter: none; }

/* Selects : la fleche reprend l'encre */
select, .form-select, select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Cartes beige : les zones internes se creusent au lieu de s'eclaircir */
.card-header, .card__header { background: transparent; }
table.table tbody tr:hover td, table.data-table tbody tr:hover td { background: var(--surface-2); }
.stat-card, .kpi, .quick-link, .detail-item { background: var(--surface); }
.stats-grid, .stat-cards, .kpi-bar, .quick-links, .details-grid,
.perm-grid { background: var(--border); }

/* Panneau de connexion : la colonne formulaire reste blanche */
.login-form-panel { background: var(--bg); }
.login-card { background: var(--surface); }

/* Bouton primaire : encre pleine, pas d'accent en aplat */
.btn-primary { background: var(--fg); color: #fff; border-color: var(--fg); }
.btn-primary:hover { background: #333; border-color: #333; }

/* Focus visible sur fond beige */
:focus-visible { outline-color: var(--fg); }

/* Noms de fichiers : sur petit écran, on coupe plutôt que de tronquer */
@media (max-width: 560px) {
  .file-item, .doc-item { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .file-item .action-group, .doc-item .action-group { width: 100%; justify-content: flex-start; }
  .file-name, .doc-number { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
  .file-info, .doc-info { width: 100%; }
}

/* Anneaux de graphique : un filet, pas un aplat */
.chart-cell svg circle { stroke-width: 9; }

/* ============================================================
   Colonne de marque (connexion, erreurs) sans photo
   Par defaut : aplat beige, encre foncee — coherent avec l'identite.
   Ajoutez assets/img/login-hero.webp et la classe .login-brand--photo
   sur l'aside pour repasser au traitement photo sombre.
   ============================================================ */
.login-brand {
  background: var(--surface);
  color: var(--fg);
}
.login-brand::before { content: none; }
.login-brand-logo { color: var(--fg); }
.login-brand-hero h1 { color: var(--fg); }
.login-brand-hero p { color: var(--muted); }
.login-features { border-top-color: var(--border-strong); }
.login-feature { color: var(--fg); border-bottom-color: var(--border); }
.login-brand-foot { color: var(--faint); }
.login-brand-foot a { color: var(--muted); }
.login-brand-foot a:hover { color: var(--fg); }

/* Variante photo : on retrouve le traitement sombre d'origine */
.login-brand--photo {
  background: var(--dark) url('../img/login-hero.webp') center/cover no-repeat;
  color: #fff;
}
.login-brand--photo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,26,.35) 0%, rgba(26,26,26,.15) 40%, rgba(26,26,26,.85) 100%);
}
.login-brand--photo .login-brand-logo,
.login-brand--photo .login-brand-hero h1 { color: #fff; }
.login-brand--photo .login-brand-hero p { color: rgba(255,255,255,.8); }
.login-brand--photo .login-features { border-top-color: rgba(255,255,255,.25); }
.login-brand--photo .login-feature { color: rgba(255,255,255,.9); border-bottom-color: rgba(255,255,255,.18); }
.login-brand--photo .login-brand-foot { color: rgba(255,255,255,.6); }
.login-brand--photo .login-brand-foot a { color: rgba(255,255,255,.75); }
.login-brand--photo .login-brand-foot a:hover { color: #fff; }

/* Champs de saisie : fond blanc, pour se detacher des cartes beige */
.form-control, .form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], select, textarea { background: var(--bg); }
.form-control:focus, .form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus { background: var(--bg); }
.upload-zone, .dropzone { background: var(--bg); }
.upload-zone:hover, .dropzone:hover, .dropzone.dragover { background: var(--surface-2); }

/* Les filets sous les titres sont des traits, pas des boites :
   pas de rayon, sinon les extremites se courbent. */
.page-header, .page-head, .dash-hero, .topbar,
.divider, .day-divider, .sidebar-separator { border-radius: 0; }

/* ── Pagination ──────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
}
.pager-summary { font-size: .82rem; color: var(--muted); }
.pager-links { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pager-pos { font-size: .82rem; color: var(--muted); padding: 0 .3rem; white-space: nowrap; }
.pager [aria-disabled="true"] { opacity: .4; pointer-events: none; }
@media (max-width: 560px) { .pager { flex-direction: column; align-items: stretch; } }

/* Bouton de suppression : discret au repos, net au survol */
.btn-delete {
  background: transparent; color: var(--muted);
  border-color: transparent;
}
.btn-delete:hover { color: var(--danger); border-color: rgba(163, 53, 41, .45); background: transparent; }

/* Carte projet : le lien couvre la carte, les actions admin vivent dessous */
.project-card-wrap { display: flex; flex-direction: column; }
.project-card-wrap .project-card { flex: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.project-card-admin {
  display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end;
  padding: .55rem .8rem; background: var(--surface);
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.project-card-wrap:hover .project-card { border-color: var(--fg); }

.text-faint { color: var(--faint); }

/* Colonne des conversations : recherche */
.conv-search { padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.conv-search input { width: 100%; }

/* Fil : lien vers les messages plus anciens */
.thread-more { text-align: center; padding: .6rem 0 1rem; }
.thread-more a {
  font-size: .78rem; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.thread-more a:hover { color: var(--fg); }

/* Fil : suppression discrète, révélée au survol du message */
.message-delete { display: inline; }
.message-delete button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: inherit; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
  opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.message-item:hover .message-delete button,
.message-delete button:focus-visible { opacity: 1; }
.message-delete button:hover { color: var(--danger); }
@media (hover: none) { .message-delete button { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════
   Pages légales
   Une colonne, du texte, rien qui distraie. Ces pages sont
   lues par des gens contrariés ou par un juriste : la seule
   qualité qui compte ici est la lisibilité.
   ═══════════════════════════════════════════════════════════ */

.legal-body { background: var(--bg); }

.legal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.legal-home {
  font-weight: 600; font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg); text-decoration: none;
}
.legal-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.legal-nav a {
  font-size: .8rem; color: var(--muted); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.legal-nav a:hover { color: var(--fg); }
.legal-nav a.is-active { color: var(--fg); border-bottom-color: var(--fg); }

.legal-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.2rem 2rem 4rem;
}

.legal-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
  color: var(--fg); margin: 0 0 .5rem;
}
.legal-maj { font-size: .78rem; color: var(--faint); margin: 0 0 2.4rem; }

.legal-intro {
  font-size: 1rem; line-height: 1.7; color: var(--fg);
  padding: 1.1rem 1.3rem; margin: 0 0 2.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.legal-page h2 {
  font-family: var(--display);
  font-size: 1.12rem; font-weight: 600; color: var(--fg);
  margin: 2.6rem 0 .8rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.legal-page p  { font-size: .93rem; line-height: 1.75; color: var(--fg); margin: 0 0 1.05rem; }
.legal-page a  { color: var(--accent); text-underline-offset: 3px; }
.legal-page a:hover { color: var(--fg); }
.legal-page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; background: var(--surface-2);
  padding: .1em .38em; border-radius: var(--r-sm);
}
.legal-page strong { font-weight: 600; }

.legal-dl {
  display: grid; grid-template-columns: 13rem 1fr;
  gap: .05rem 1.4rem; margin: 0 0 1.4rem;
}
.legal-dl dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  padding: .55rem 0; border-top: 1px solid var(--line);
}
.legal-dl dd {
  font-size: .93rem; color: var(--fg); margin: 0;
  padding: .55rem 0; border-top: 1px solid var(--line);
}

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: .84rem; }
.legal-table th {
  text-align: left; font-size: .7rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  padding: .6rem .7rem; border-bottom: 1px solid var(--border-strong);
}
.legal-table td {
  padding: .7rem; vertical-align: top; line-height: 1.55;
  color: var(--fg); border-bottom: 1px solid var(--line);
}
.legal-table tr:last-child td { border-bottom: 0; }

.legal-warning {
  background: var(--surface-2);
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: 1rem 1.2rem; margin: 0 0 2rem;
  font-size: .88rem; line-height: 1.65; color: var(--fg);
}

.legal-footer {
  max-width: 44rem; margin: 0 auto;
  padding: 2rem 2rem 3rem;
  border-top: 1px solid var(--border);
  border-radius: 0;
  font-size: .78rem; color: var(--muted); text-align: center;
}
.legal-footer p { margin: 0 0 .45rem; }
.legal-footer a { color: var(--muted); }
.legal-footer a:hover { color: var(--fg); }

@media (max-width: 640px) {
  .legal-topbar { padding: .9rem 1.2rem; }
  .legal-page   { padding: 2.2rem 1.2rem 3rem; }
  .legal-footer { padding: 1.6rem 1.2rem 2.4rem; }
  .legal-dl     { grid-template-columns: 1fr; gap: 0; }
  .legal-dl dt  { padding-bottom: .1rem; }
  .legal-dl dd  { border-top: 0; padding-top: 0; padding-bottom: .7rem; }
  .legal-table  { font-size: .8rem; }
  .legal-table th, .legal-table td { padding: .5rem .4rem; }
}

/* Connexion : rappel légal discret */
.login-legal { margin-top: 1.4rem; font-size: .74rem; color: var(--faint); text-align: center; }
.login-legal a { color: var(--faint); text-decoration: none; }
.login-legal a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Acceptation des conditions, à la création du mot de passe */
.cgu-accept {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 1.3rem 0 1.4rem;
  font-size: .82rem; line-height: 1.55; color: var(--muted);
  text-transform: none; letter-spacing: 0; font-weight: 400;
  cursor: pointer;
}
.cgu-accept input { width: 16px; height: 16px; margin-top: .15rem; flex-shrink: 0; cursor: pointer; }
.cgu-accept a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Référencement ═══ */
.seo-audit-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }

.seo-score-row {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  padding-bottom: 1.2rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.seo-score {
  display: flex; align-items: baseline; gap: .12rem;
  padding: .7rem 1.1rem; border-radius: var(--r-lg);
  border: 1px solid var(--border-strong); background: var(--surface-2);
  flex-shrink: 0;
}
.seo-score-value { font-family: var(--display); font-size: 2rem; font-weight: 500; line-height: 1; }
.seo-score-unit  { font-size: .8rem; color: var(--muted); }
.seo-score--success { border-color: var(--success); }
.seo-score--warning { border-color: var(--warning); }
.seo-score--danger  { border-color: var(--danger); }
.seo-score--success .seo-score-value { color: var(--success); }
.seo-score--warning .seo-score-value { color: var(--warning); }
.seo-score--danger  .seo-score-value { color: var(--danger); }

.seo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .1rem 1.6rem;
}
.seo-field { padding: .6rem 0; border-top: 1px solid var(--line); min-width: 0; }
.seo-field-label {
  display: block; font-size: .68rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .22rem;
}
.seo-field-value { display: block; font-size: .88rem; line-height: 1.5; color: var(--fg); }
.seo-field-value em { color: var(--faint); font-style: italic; }

.seo-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.seo-finding {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .87rem; line-height: 1.55;
  padding: .65rem .85rem; border-radius: var(--r);
  background: var(--surface-2); border-left: 3px solid var(--border-strong);
}
.seo-finding-tag {
  flex-shrink: 0; font-size: .66rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: .18rem .45rem; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--muted); white-space: nowrap;
}
.seo-finding--danger  { border-left-color: var(--danger); }
.seo-finding--warning { border-left-color: var(--warning); }
.seo-finding--info    { border-left-color: var(--info); }
.seo-finding--danger  .seo-finding-tag { color: var(--danger); }
.seo-finding--warning .seo-finding-tag { color: var(--warning); }

.seo-pos { font-variant-numeric: tabular-nums; font-weight: 500; }
.seo-pos--top { color: var(--success); }
.seo-delta { font-size: .72rem; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.seo-delta--up   { color: var(--success); }
.seo-delta--down { color: var(--danger); }

.seo-pos-form { display: flex; gap: .3rem; align-items: center; }
.seo-pos-form input { width: 4.5rem; text-align: right; }

.seo-pill {
  font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: .22rem .5rem; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  white-space: nowrap;
}
.seo-pill--success { color: var(--success); border-color: var(--success); }
.seo-pill--warning { color: var(--warning); border-color: var(--warning); }
.seo-pill--danger  { color: var(--danger);  border-color: var(--danger); }

@media (max-width: 640px) {
  .seo-audit-form { flex-direction: column; align-items: stretch; }
  .seo-pos-form   { width: 100%; }
}

/* ═══ Assistant du site ═══ */
.bot-flags {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: .2rem 0 1.2rem;
}
.bot-flags label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 400; color: var(--fg);
  text-transform: none; letter-spacing: 0; cursor: pointer; margin: 0;
}
.bot-flags input { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }

.bot-embed {
  margin: .2rem 0 1rem; padding: .8rem 1rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); overflow-x: auto;
}
.bot-embed code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; color: var(--fg); white-space: pre;
}

/* Tableau des réponses : la colonne de mots-clés ne doit pas
   écraser les autres, et l'extrait respire sous l'intitulé. */
.table--bot { table-layout: fixed; min-width: 760px; }
.table--bot col.bot-c-label { width: 28%; }
.table--bot col.bot-c-kw    { width: 34%; }
.table--bot col.bot-c-hits  { width: 7%; }
.table--bot col.bot-c-state { width: 9%; }
.table--bot col.bot-c-act   { width: 22%; }
.table--bot td { vertical-align: top; }
.bot-kw-cell { line-height: 1.6; overflow-wrap: break-word; }
.bot-excerpt { display: block; margin-top: .25rem; line-height: 1.45; }

.bot-thread { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.bot-turn {
  max-width: 78%; padding: .6rem .8rem; border-radius: 14px;
  font-size: .87rem; line-height: 1.55;
}
.bot-turn--visiteur {
  align-self: flex-start; background: var(--surface-2);
  border-bottom-left-radius: 4px;
}
.bot-turn--bot {
  align-self: flex-end; background: var(--dark); color: #FFF;
  border-bottom-right-radius: 4px;
}
.bot-turn-who {
  display: block; font-size: .66rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; opacity: .65;
  margin-bottom: .2rem;
}
.bot-turn-body { display: block; }
.bot-turn-flag {
  display: inline-block; margin-top: .3rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--danger);
}

/* Le formulaire de purge : une phrase, pas une étiquette de champ */
.bot-purge label {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .85rem; color: var(--fg);
}

@media (max-width: 640px) {
  .bot-turn { max-width: 92%; }
}