/* =============================================================================
   Fredo CRM — feuille de style de l'interface privée
   Direction artistique : poste de pilotage haut de gamme.
   Vert profond · ivoire · touches d'or discrètes. Dense mais lisible.
   Sommaire :
     1. Tokens & base            6. Cartes, rangées, tableaux
     2. Authentification         7. Formulaire & composants
     3. Structure (sidebar/top)  8. Tableau de bord
     9. Timeline & visites      10. File d'envoi & suivi
     11. Calendrier             12. Erreurs & utilitaires
     13. Responsive             14. Impression
   ========================================================================== */

/* ============================================================ 1. TOKENS */
:root {
  /* verts profonds */
  --forest-900: #07231d;
  --forest-800: #0b2f27;
  --forest-700: #0e3b32;
  --forest-600: #14544a;
  --forest-500: #1b6a5b;
  --forest-400: #2f8471;
  --forest-100: #d9e8e2;
  --forest-050: #eef5f2;

  /* ivoires */
  --ivory-000: #fffdf8;
  --ivory-050: #fdfaf3;
  --ivory-100: #f7f3ea;
  --ivory-200: #efe9db;
  --ivory-300: #e2dac7;
  --ivory-400: #cfc5ac;

  /* ors discrets */
  --gold-700: #8a6a2f;
  --gold-600: #a7823d;
  --gold-500: #b3894a;
  --gold-400: #c9a469;
  --gold-100: #f0e4cd;

  /* encres & auxiliaires */
  --ink-900: #10201c;
  --ink-700: #24322d;
  --ink-500: #4a5a54;
  --ink-400: #6b7a74;
  --ink-300: #93a09a;
  --danger: #a83232;
  --danger-soft: #fbeceb;
  --warn: #96662a;
  --warn-soft: #fbf1e1;
  --ok: #1f6f4a;
  --ok-soft: #e6f2ec;
  --info: #2b5a72;
  --info-soft: #e7f0f4;

  --shadow-sm: 0 1px 2px rgba(7, 35, 29, .06), 0 1px 1px rgba(7, 35, 29, .04);
  --shadow-md: 0 4px 16px rgba(7, 35, 29, .08);
  --shadow-lg: 0 18px 44px rgba(7, 35, 29, .16);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --sidebar-w: 236px;
  --topbar-h: 58px;
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--ivory-100);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: .1px; margin: 0 0 .35em; }
h1 { font-size: 1.32rem; }
h2 { font-size: 1.06rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .7em; }
a { color: var(--forest-600); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); font-size: .86em; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--forest-700); color: #fff; padding: 10px 16px; z-index: 99; }
.skip-link:focus { left: 8px; top: 8px; }
hr { border: 0; border-top: 1px solid var(--ivory-300); margin: 18px 0; }

.muted { color: var(--ink-400); }
.small { font-size: .82rem; }
.strong { font-weight: 600; }
.pad { padding: 14px; }
.pre { white-space: pre-wrap; }
.req { color: var(--gold-600); font-style: normal; }
.link-danger { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: .78rem; padding: 0; text-decoration: underline; }
.inline { display: inline-flex; gap: 6px; align-items: center; }

/* ============================================================= 2. AUTH */
.auth-body { margin: 0; background: var(--forest-800); }
.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1080px; margin: 0 auto; background: var(--ivory-000);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 0) and (max-width: 780px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }
.auth-aside {
  background: linear-gradient(160deg, var(--forest-700), var(--forest-900) 70%);
  color: var(--ivory-100); padding: 48px 40px; display: flex; flex-direction: column;
}
.auth-kicker { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 18px; }
.auth-aside h2 { font-size: 2.4rem; color: var(--ivory-000); margin-bottom: 14px; }
.auth-aside p { color: rgba(247, 243, 234, .78); font-size: .95rem; }
.auth-foot { margin-top: auto; font-size: .78rem; color: rgba(247, 243, 234, .5); }
.auth-main { padding: 52px 46px; display: flex; flex-direction: column; justify-content: center; }
.auth-main h1 { font-size: 1.7rem; }
.auth-form { max-width: 340px; margin-top: 22px; }

/* ====================================================== 3. STRUCTURE */
body { display: block; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
  background: linear-gradient(180deg, var(--forest-800), var(--forest-900));
  color: var(--ivory-100); display: flex; flex-direction: column;
  border-right: 1px solid rgba(179, 137, 74, .22);
  overflow-y: auto;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: var(--gold-500); color: var(--forest-900); font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700; flex: none;
}
.brand-text strong { display: block; font-family: var(--font-display); font-size: 1.06rem; letter-spacing: .2px; }
.brand-text small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); }
.nav { padding: 10px 8px 20px; flex: 1; }
.nav-group {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(201, 164, 105, .75); margin: 16px 10px 5px;
}
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm); color: var(--ivory-200); font-size: .88rem;
}
.nav-link:hover { background: rgba(255, 255, 255, .06); text-decoration: none; color: #fff; }
.nav-link.is-active { background: var(--forest-600); color: #fff; box-shadow: inset 2px 0 0 var(--gold-500); }
.nav-link.small { font-size: .78rem; color: var(--ivory-300); }
.nav-badge {
  min-width: 20px; text-align: center; font-size: .7rem; font-weight: 700;
  background: var(--gold-500); color: var(--forest-900); border-radius: 99px; padding: 1px 6px;
}
.side-foot { padding: 12px 8px 16px; border-top: 1px solid rgba(255, 255, 255, .07); }

.scrim { display: none; }
.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: rgba(253, 250, 243, .93); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ivory-300);
}
.page-title { font-size: 1.16rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-sub { font-size: .78rem; color: var(--ink-400); }
.topbar-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topbar-spacer { flex: 1; }
.topsearch { display: flex; align-items: center; }
.topsearch input {
  width: 220px; padding: 6px 10px; border: 1px solid var(--ivory-300); border-radius: 99px;
  background: var(--ivory-000); font: inherit; font-size: .84rem;
}
.topsearch button { border: 0; background: none; font-size: 1.1rem; color: var(--ink-400); cursor: pointer; margin-left: -30px; }
.burger { display: none; border: 1px solid var(--ivory-300); background: var(--ivory-000); border-radius: 8px; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; }
.user-menu { position: relative; }
.avatar-btn, .avatar {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold-400);
  background: var(--forest-700); color: var(--ivory-000); font-weight: 600; cursor: pointer; font-size: .84rem;
}
.menu-pop {
  position: absolute; right: 0; top: 40px; min-width: 208px; background: var(--ivory-000);
  border: 1px solid var(--ivory-300); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; z-index: 50;
}
.menu-pop a, .menu-pop button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; border: 0; background: none; font: inherit; font-size: .86rem; color: var(--ink-700); cursor: pointer; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--forest-050); text-decoration: none; }
.menu-mail { padding: 6px 10px; font-size: .78rem; color: var(--ink-400); border-bottom: 1px solid var(--ivory-200); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.content { padding: 22px; flex: 1; max-width: 1380px; width: 100%; }
.crm-foot { padding: 14px 22px 22px; font-size: .74rem; color: var(--ink-300); }

/* ======================================================== 4. FLASH/ALERT */
.flash { margin: 0 22px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; border: 1px solid; }
.flash-ok { background: var(--ok-soft); border-color: #b9dcc9; color: #17573a; }
.flash-error { background: var(--danger-soft); border-color: #ecc9c7; color: #8a2626; }
.flash-info { background: var(--info-soft); border-color: #c5dbe4; color: #235066; }
.alert { padding: 10px 12px; border-radius: var(--radius-sm); font-size: .86rem; }
.alert-error { background: var(--danger-soft); color: #8a2626; border: 1px solid #ecc9c7; }
.alert-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #ecd9b6; }
.callout { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: .88rem; border-left: 3px solid; }
.callout-simu { background: #fbf5e8; border-color: var(--gold-500); color: #6d5320; }
.callout-warn { background: var(--warn-soft); border-color: var(--warn); }
.callout-ok { background: var(--ok-soft); border-color: var(--ok); }
.callout-danger { background: var(--danger-soft); border-color: var(--danger); }
.warn-list { color: var(--warn); font-size: .82rem; padding-left: 18px; margin: 8px 0; }

/* =========================================================== 5. BOUTONS */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--forest-600);
  background: var(--ivory-000); color: var(--forest-700); font: inherit; font-size: .86rem;
  font-weight: 600; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--forest-050); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--forest-700); border-color: var(--forest-700); color: var(--ivory-000); }
.btn-primary:hover { background: var(--forest-600); color: #fff; }
.btn-gold { background: var(--gold-500); border-color: var(--gold-600); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--forest-600); }
.btn-ghost:hover { background: var(--forest-050); }
.btn-danger { background: #fff; border-color: #d9b3b3; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 4px 9px; font-size: .78rem; }
.btn-block { width: 100%; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.page-actions { margin-top: 22px; }

/* ==================================================== 6. CARTES & TABLEAU */
.card {
  background: var(--ivory-000); border: 1px solid var(--ivory-300); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow: hidden;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 13px 16px 11px; border-bottom: 1px solid var(--ivory-200); }
.card-head h2 { margin: 0; font-size: .98rem; }
.card-sub { margin: 2px 0 0; font-size: .78rem; color: var(--ink-400); }
.card-actions { display: flex; gap: 6px; flex: none; }
.card-body { padding: 14px 16px; }
.card-flush .card-body { padding: 0; }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--ivory-200); background: var(--ivory-050); display: flex; gap: 8px; flex-wrap: wrap; }
.card-link { display: block; color: inherit; transition: box-shadow .14s, transform .14s; }
.card-link:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-danger { border-color: #e6cbca; }
.card-timeline .card-body { max-height: 720px; overflow-y: auto; }

.rows { display: flex; flex-direction: column; }
.rows-carded { background: var(--ivory-000); border: 1px solid var(--ivory-300); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.rows-lite { border-top: 1px solid var(--ivory-200); }
.row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--ivory-200); color: inherit;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--forest-050); text-decoration: none; }
.row-main { flex: 1; min-width: 0; display: block; }
.row-title { display: block; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: block; font-size: .78rem; color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-tags { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.row-meta { display: flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.row-silent { font-size: .74rem; color: var(--ink-300); }
.row-soft { border-bottom: 1px dashed var(--ivory-300); padding: 8px 0; }
.row-mail .row-title { white-space: normal; }
.row-person { align-items: flex-start; }
.row-follow .row-title { white-space: normal; }
.rows .row:nth-child(even) { background: rgba(247, 243, 234, .5); }
.rows .row:nth-child(even):hover { background: var(--forest-050); }

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); padding: 8px 10px; border-bottom: 1px solid var(--ivory-300); font-weight: 600; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--ivory-200); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--forest-050); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-compact td, .table-compact th { padding: 6px 8px; }

/* ======================================================== 7. FORMULAIRES */
.field { margin-bottom: 12px; }
.field > label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-500); margin-bottom: 4px; letter-spacing: .02em; }
.input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--ivory-400); border-radius: var(--radius-sm);
  background: var(--ivory-000); font: inherit; font-size: .88rem; color: var(--ink-900);
}
.input:focus { border-color: var(--forest-500); outline: none; box-shadow: 0 0 0 3px rgba(27, 106, 91, .12); }
textarea.input { resize: vertical; min-height: 62px; line-height: 1.5; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-400) 50%), linear-gradient(135deg, var(--ink-400) 50%, transparent 50%); background-position: right 14px top 50%, right 9px top 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.input-sm { padding: 4px 8px; font-size: .8rem; }
.input[type="search"] { border-radius: 99px; }
.hint { font-size: .76rem; color: var(--ink-400); margin: 4px 0 0; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; margin-bottom: 10px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--forest-600); }
.check small { display: block; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.grid-2 > .field:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
.form-narrow { max-width: 760px; }
.stack-form { display: flex; flex-direction: column; gap: 18px; }
.mini-form { }
.filter-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 1; }
.filter-form .field { margin-bottom: 0; min-width: 130px; flex: 1; max-width: 240px; }
.toolbar { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-inline { align-items: center; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }

/* badges, chips, tags */
.badge, .chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent;
}
.st-nouveau { background: #e8eef4; color: #2b5a72; }
.st-contacte { background: #f1ecdf; color: #7a6229; }
.st-reponse { background: #e9f2e6; color: #3d6b32; }
.st-visiter { background: #eee8f3; color: #5a4279; }
.st-actif { background: var(--forest-700); color: var(--ivory-000); }
.st-inactif { background: var(--ivory-200); color: var(--ink-500); }
.st-stop { background: #3a1414; color: #f3d3d3; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.chip-mute { background: var(--ivory-200); color: var(--ink-500); }
.chip-stop { background: #f6e2e2; color: #8a2626; }
.chip-simu { background: rgba(179, 137, 74, .18); color: var(--gold-100); border-color: rgba(201, 164, 105, .5); }
.chip-live { background: rgba(31, 111, 74, .25); color: #cfe9dc; border-color: rgba(64, 150, 110, .6); }
.chip-filter { background: var(--ivory-000); border-color: var(--ivory-300); color: var(--ink-500); }
.chip-filter b { color: var(--forest-600); }
.chip-filter:hover { border-color: var(--forest-400); text-decoration: none; }
.chip-filter.is-on { background: var(--forest-700); color: var(--ivory-000); border-color: var(--forest-700); }
.chip-filter.is-on b { color: var(--gold-400); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--forest-050); color: var(--forest-600); font-size: .74rem; }
.tag-camp { background: var(--gold-100); color: var(--gold-700); }
.tag-estimate { background: #f2efe6; color: #857a5f; font-size: .68rem; padding: 0 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.tag-reliable { background: var(--ok-soft); color: var(--ok); font-size: .68rem; padding: 0 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.sim { font-size: .68rem; color: var(--gold-700); background: repeating-linear-gradient(135deg, #fbf5e8, #fbf5e8 5px, #f5ebd7 5px, #f5ebd7 10px); padding: 1px 6px; border-radius: 3px; border: 1px dashed var(--gold-400); }

.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: .74rem; font-weight: 700; color: #fff; background: var(--forest-600); letter-spacing: .5px;
}
.avatar-circle.sm { width: 26px; height: 26px; font-size: .64rem; }
.avatar-circle.lg { width: 54px; height: 54px; font-size: 1.05rem; }
.av0 { background: var(--forest-600); } .av1 { background: #2f5d7c; } .av2 { background: #6d5a3f; }
.av3 { background: #4c6b52; } .av4 { background: #7a5566; } .av5 { background: #3f6b66; }

/* ======================================================== 8. DASHBOARD */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 1px; background: var(--ivory-200); border: 1px solid var(--ivory-300); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.stat { background: var(--ivory-000); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; color: inherit; }
a.stat:hover { background: var(--forest-050); text-decoration: none; }
.stat-v { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; font-weight: 600; color: var(--forest-700); font-variant-numeric: tabular-nums; }
.stat-l { font-size: .74rem; color: var(--ink-500); letter-spacing: .01em; }
.stat-h { font-size: .7rem; color: var(--ink-300); }
.tone-danger { color: var(--danger) !important; }
.tone-gold { color: var(--gold-600) !important; }
.tone-ok { color: var(--ok) !important; }
.stat-strip { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 14px; background: var(--ivory-000); border: 1px solid var(--ivory-300); border-radius: var(--radius); margin-bottom: 16px; font-size: .84rem; color: var(--ink-500); }
.stat-strip b { font-family: var(--font-display); font-size: 1.15rem; color: var(--forest-700); margin-right: 4px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-col { min-width: 0; }
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pipe-step { background: var(--forest-050); border: 1px solid var(--forest-100); border-radius: var(--radius-sm); padding: 8px; text-align: center; }
.pipe-step span { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--forest-700); }
.pipe-step small { font-size: .68rem; color: var(--ink-400); text-transform: uppercase; letter-spacing: .05em; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 62px; padding: 6px 0 0; }
.spark-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; gap: 3px; }
.spark-bar { display: block; width: 100%; max-width: 16px; background: linear-gradient(180deg, var(--forest-500), var(--forest-700)); border-radius: 2px 2px 0 0; min-height: 2px; }
.spark-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); }
.section-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-400); margin: 24px 0 10px; font-family: var(--font-ui); font-weight: 700; }

/* =============================================== 9. TIMELINE & VISITES */
.contact-head { background: var(--ivory-000); border: 1px solid var(--ivory-300); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.profile { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.profile-compact { align-items: center; justify-content: space-between; background: var(--ivory-000); border: 1px solid var(--ivory-300); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.profile-main { flex: 1; min-width: 220px; }
.profile-name { font-size: 1.45rem; margin-bottom: 2px; }
.profile-sub { color: var(--ink-500); font-size: .88rem; margin-bottom: 8px; }
.profile-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: .84rem; margin-bottom: 8px; }
.profile-links a { border-bottom: 1px solid transparent; }
.profile-links a:hover { border-bottom-color: var(--gold-500); text-decoration: none; }
.profile-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.profile-side { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.mini-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ivory-200); font-size: .8rem; color: var(--ink-400); }
.mini-stats b { font-family: var(--font-display); font-size: 1.05rem; color: var(--forest-700); margin-right: 3px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.inter { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ivory-200); position: relative; }
.inter:last-child { border-bottom: 0; }
.inter-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--forest-050); border: 1px solid var(--forest-100); display: grid; place-items: center; font-size: .78rem; flex: none; }
.inter-main { flex: 1; min-width: 0; }
.inter-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.inter-head strong { font-size: .88rem; }
.inter-time { font-size: .74rem; color: var(--ink-300); margin-left: auto; white-space: nowrap; }
.inter-body { font-size: .84rem; color: var(--ink-500); margin-top: 3px; overflow-wrap: anywhere; }
.inter-body p { margin: 0 0 .5em; }
.inter-body blockquote { border-left: 2px solid var(--ivory-300); margin: 6px 0; padding-left: 10px; color: var(--ink-400); }
.inter-del { margin-top: 4px; }
.inter[data-sim="1"] { background: repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(179, 137, 74, .05) 12px, rgba(179, 137, 74, .05) 24px); }
.inter-visite .inter-icon { background: var(--gold-100); border-color: #e3d1ab; }
.inter-reponse .inter-icon { background: var(--ok-soft); border-color: #bcd9c9; }
.inter-email .inter-icon { background: var(--info-soft); }
.msg-preview { max-height: 180px; overflow: auto; background: var(--ivory-050); border: 1px solid var(--ivory-200); border-radius: var(--radius-sm); padding: 10px; }

.visit-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; background: var(--ivory-000); border: 1px solid var(--ivory-300); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; }
.visit-title { font-size: 1.3rem; margin-bottom: 2px; }
.visit-objective { font-size: .86rem; color: var(--ink-500); font-style: italic; }
.visit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vday { margin-bottom: 18px; }
.vday-head { display: flex; align-items: center; gap: 10px; font-size: .84rem; border-bottom: 2px solid var(--ivory-300); padding-bottom: 4px; margin-bottom: 6px; }
.vday-head b { font-family: var(--font-display); font-size: 1rem; }
.vday .row { border: 1px solid var(--ivory-200); border-radius: var(--radius-sm); margin-bottom: 5px; background: var(--ivory-000); }
.vtime { width: 52px; flex: none; font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--forest-600); font-weight: 600; }
.stack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .86rem; }
.stack-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dashed var(--ivory-200); }
.stack-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.prep-person { display: block; }
.steps { padding-left: 20px; font-size: .86rem; color: var(--ink-500); display: flex; flex-direction: column; gap: 6px; }

/* ==================================================== 11. CALENDRIER */
.cal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cal-head h2 { margin: 0; font-size: 1.2rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--ivory-300); border: 1px solid var(--ivory-300); border-radius: var(--radius); overflow: hidden; }
.cal-dow { background: var(--forest-700); color: var(--ivory-100); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px; text-align: center; }
.cal-cell { background: var(--ivory-000); min-height: 104px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell.is-out { background: var(--ivory-100); opacity: .55; }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--gold-400); }
.cal-day { font-size: .74rem; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.cal-event { display: block; font-size: .72rem; background: var(--forest-600); color: #fff; border-radius: 4px; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event:hover { background: var(--forest-500); text-decoration: none; }
.cal-event.is-done { background: var(--ivory-300); color: var(--ink-500); }

/* ============================================ 12. FILE D'ENVOI / SUIVI */
.prog { height: 6px; background: var(--ivory-200); border-radius: 99px; overflow: hidden; }
.prog-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--forest-500), var(--gold-500)); }
.code-block { background: var(--forest-900); color: #d8e5df; padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .78rem; overflow-x: auto; line-height: 1.6; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .84rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ivory-400); margin-right: 2px; }
.dot-ok { background: var(--ok); } .dot-no { background: var(--gold-500); }
.email-preview { border: 1px solid var(--ivory-300); border-radius: var(--radius-sm); padding: 14px; background: #fff; font-size: .86rem; max-height: 420px; overflow: auto; }
.email-preview h4 { font-size: .9rem; border-bottom: 1px solid var(--ivory-200); padding-bottom: 6px; }
.code-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.code-grid code { background: var(--forest-900); color: var(--gold-400); padding: 6px 8px; border-radius: 4px; text-align: center; font-size: .84rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.empty { padding: 26px 16px; text-align: center; color: var(--ink-400); font-size: .88rem; }
.empty p { margin-bottom: 10px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 20px 0; font-size: .82rem; color: var(--ink-400); }
.modal { border: 0; border-radius: var(--radius-lg); padding: 0; max-width: 520px; width: calc(100% - 32px); box-shadow: var(--shadow-lg); background: var(--ivory-000); color: var(--ink-900); }
.modal-wide { max-width: 760px; }
.modal::backdrop { background: rgba(7, 35, 29, .48); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ivory-200); margin: 0; }
.modal-head h2 { margin: 0; font-size: 1rem; }
.modal-head button { border: 0; background: none; font-size: 1rem; cursor: pointer; color: var(--ink-400); }
.modal-body { padding: 16px; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--ivory-200); display: flex; gap: 10px; justify-content: flex-end; }

/* ======================================================= 13. ERREURS */
.error-page { display: grid; place-items: center; min-height: 100vh; background: var(--forest-800); margin: 0; padding: 20px; }
.error-card { background: var(--ivory-000); border-radius: var(--radius-lg); padding: 34px; max-width: 460px; text-align: center; box-shadow: var(--shadow-lg); }
.error-code { font-family: var(--font-display); font-size: 3rem; color: var(--gold-500); margin: 0; line-height: 1; }

/* ====================================================== 14. RESPONSIVE */
@media (max-width: 1080px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 268px; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(7, 35, 29, .5); z-index: 35; }
  .main { margin-left: 0; }
  .burger { display: block; }
  .topsearch { display: none; }
  body.nav-open .topsearch { display: flex; }
  .content { padding: 14px; }
  .flash { margin: 0 14px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cal { font-size: .7rem; }
  .cal-cell { min-height: 68px; }
  .profile-side { align-items: flex-start; text-align: left; }
  .row-meta { justify-content: flex-start; }
  .row { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .row { gap: 8px; padding: 9px 10px; }
  .table th, .table td { padding: 6px; font-size: .8rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .filter-form .field { max-width: none; }
}


/* ====================================================== 14.5 TÂCHES, SEGMENTS, BANDEAU DÉMO */
.demo-banner {
  margin: 0 0 14px; padding: 9px 16px; font-size: .8rem; line-height: 1.45;
  background: repeating-linear-gradient(135deg, #fbf5e8, #fbf5e8 8px, #f5ebd7 8px, #f5ebd7 16px);
  border-bottom: 1px dashed var(--gold-400); color: var(--gold-700);
}
.demo-banner a { color: var(--gold-700); font-weight: 600; }
.row-task .row-main { min-width: 0; flex: 1; }
.row-task.is-done .row-title { text-decoration: line-through; color: var(--ink-400); }
.row-task.is-late { background: var(--danger-soft); }
.row-task.is-late .row-title::after { content: " · en retard"; color: var(--danger); font-size: .74rem; font-weight: 600; }
.row-actions form + form { margin-left: 2px; }
.reschedule-form input[type=date] { font-size: .78rem; padding: 3px 5px; }
.chip-prio-haute { background: #f6dede; color: #8a2222; }
.chip-prio-normale { background: var(--ivory-200); color: var(--ink-500); }
.chip-prio-basse { background: var(--ivory-100, #f3efe6); color: var(--ink-300); }
.stack-list-actions li { justify-content: space-between; }
.row-actions-inline { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.adv { margin: 8px 0; }
.adv summary { cursor: pointer; font-size: .8rem; color: var(--ink-500); }
.toolbar-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.callout-simu { margin: 0 0 14px; }
.check-list li.is-ok { color: var(--forest-700, #2c5f3c); }
.check-list li.is-no { color: #8a2222; }
.stat-strip { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-500); margin: 6px 2px 12px; }
.stat-strip b { color: var(--ink-800, #222); }
.nowrap { white-space: nowrap; }

/* ====================================================== 15. IMPRESSION */
@media print {
  .sidebar, .topbar, .burger, .form-actions, .toolbar, .crm-foot, .skip-link { display: none !important; }
  .main { margin: 0; }
  .card { break-inside: avoid; box-shadow: none; border-color: #bbb; }
  body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Fredo1 : accès directs, focus clavier et mouvement réduit. */
.daily-actions { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px; margin-bottom:22px; background:var(--card, #fffdf8); border:1px solid #d9e2d9; border-radius:16px; }
.daily-actions h2 { margin:5px 0 8px; font-size:clamp(1.15rem,2vw,1.7rem); }
.daily-actions p { margin:0; color:#52645d; }
.daily-actions .eyebrow { font-size:.7rem; letter-spacing:.13em; font-weight:700; }
.daily-buttons { display:flex; gap:8px; flex-wrap:wrap; }
:focus-visible { outline:3px solid #b27724; outline-offset:3px; }
@media(max-width:900px) { .daily-actions { align-items:flex-start; flex-direction:column; padding:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Fredo1 0.3 — actions quotidiennes, tournée et atelier de communication. */
:root { --radius:14px; --topbar-h:72px; --ivory-100:#f5f4ed; --font-display:"Segoe UI",system-ui,sans-serif; }
body { font-size:15px; }
.page-title { font-size:1.35rem;letter-spacing:-.03em; }
.sidebar { background:linear-gradient(170deg,#103d34,#092c26); }
.brand-text small { font-size:.65rem;letter-spacing:.02em; }
.nav-link { min-height:46px;margin:4px 8px;border-radius:9px; }
.section-nav { display:flex;gap:6px;flex-wrap:wrap;padding:12px 28px;border-bottom:1px solid var(--ivory-200);background:#fffdf8; }
.section-nav a { display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;border-radius:20px;font-size:.88rem; }
.section-nav a:hover { background:var(--forest-050); }
.work-hero { display:flex;justify-content:space-between;align-items:center;gap:28px;padding:32px 36px;margin-bottom:24px;border-radius:20px;background:linear-gradient(115deg,#103d34,#24594b);color:#fffdf8; }
.work-hero h2 { margin:8px 0 12px;font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1.18;letter-spacing:-.04em;color:inherit;max-width:680px; }
.work-hero p { margin:0;max-width:680px;color:#e2eee8;line-height:1.65; }
.eyebrow { font-size:.7rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase; }
.work-hero .eyebrow { color:#d9c295; }
.btn-light { background:#fffdf8;color:#123e34;border:1px solid #fffdf8;white-space:nowrap; }
.btn, .btn-sm { min-height:44px;line-height:1.3;justify-content:center; }
.btn-sm { padding:8px 12px; }
.input { min-height:46px;font-size:1rem; }
.field { margin-bottom:16px; }
textarea.input { resize:vertical;line-height:1.65; }
.card { overflow:hidden; }
.card-head h2 { font-size:1.05rem;letter-spacing:-.02em; }
.card-sub,.row-sub,.hint { line-height:1.6; }
.card-body>.mini-form,.card-body>.stack-list,.card-body>.pre { padding:20px; }
.card-body>.timeline { padding:24px; }
.today-priorities { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px; }
.today-priorities>a { display:flex;align-items:center;gap:16px;padding:22px;background:white;border:1px solid var(--ivory-200);border-radius:14px; }
.today-priorities b { font-size:2rem;letter-spacing:-.05em; }
.today-priorities span { font-size:.9rem; }
.action-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.report-details>summary { padding:20px;cursor:pointer;font-weight:650; }
.report-details[open] { border-top:1px solid var(--ivory-300);margin-top:20px; }
.contact-actions { display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0; }
.contact-tabs { display:flex;gap:8px;border-bottom:1px solid var(--ivory-300);margin:24px 0; }
.contact-tabs a { padding:15px 18px;min-height:48px; }
.contact-tabs [aria-current=page] { border-bottom:3px solid var(--forest-600);font-weight:750; }
.studio-grid { display:grid;grid-template-columns:minmax(270px,.78fr) minmax(400px,1.4fr);gap:24px;align-items:start; }
.plain-fieldset { border:0;padding:0;margin:0;min-width:0; }
.writing-tools { display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px; }
.studio-editor textarea[name=body] { min-height:350px;background:#fffefa;font-size:1.025rem; }
.studio-grid details { margin-bottom:16px; }
summary { cursor:pointer;min-height:44px;padding:12px 0; }
.draft-row { display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ivory-200); }
.draft-row small { display:block;color:var(--ink-500);margin-top:5px; }
.channel-dot { display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:var(--forest-050);color:var(--forest-600);font-weight:750; }
.tour-grid { display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px; }
.tour-stop { display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;position:relative; }
.tour-marker { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dce9e0;color:#164f40;font-weight:750;margin-top:18px; }
.tour-objective { padding:14px 18px;background:var(--forest-050);border-radius:10px;margin-top:0; }
.tour-person { border-top:1px solid var(--ivory-200);padding:18px 0 4px; }
.tour-person .hint { margin:6px 0; }
.tour-person details { background:#faf9f4;padding:0 14px;border-radius:10px; }
.is-complete .tour-marker { background:var(--forest-700);color:white; }
.copy-status { font-size:.85rem; }
.studio-editor [disabled] { opacity:1;color:var(--ink-700); }
.campaign-steps { display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 24px; }
.campaign-steps span { padding:10px 16px;border-radius:20px;background:var(--forest-050); }
.preview-variants { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.preview-variants .pre { white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;padding:16px; }
.form-actions { flex-wrap:wrap; }
[role=alert] { scroll-margin-top:100px; }
@media(max-width:1100px) { .tour-grid { grid-template-columns:1fr; }.studio-grid { grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr); }.preview-variants { grid-template-columns:1fr; } }
@media(max-width:760px) {
 .section-nav { padding:8px 12px;gap:0; }.section-nav a { padding:8px 10px;font-size:.8rem; }
 .work-hero { padding:24px 20px;display:block;border-radius:16px; }.work-hero .daily-buttons { margin-top:18px; }
 .work-hero>.btn { margin-top:18px; }
 .today-priorities { gap:8px; }.today-priorities>a { padding:14px 10px;display:block; }.today-priorities b { display:block;font-size:1.65rem; }.today-priorities span { font-size:.78rem; }
 .studio-grid { grid-template-columns:1fr;gap:0; }.studio-editor textarea[name=body] { min-height:300px; }
 .contact-tabs { gap:0; }.contact-tabs a { padding:12px 9px;font-size:.85rem;flex:1; }
 .contact-actions { display:grid;grid-template-columns:1fr 1fr; }.contact-actions .btn { padding:12px 8px; }
 .tour-stop { grid-template-columns:1fr; }.tour-marker { display:none; }.tour-stop .card-head { flex-wrap:wrap;gap:10px; }
 .draft-row { flex-wrap:wrap;padding:16px 12px; }.draft-row .chip { margin-left:50px; }
 .row-meta { flex-wrap:wrap; }.action-grid { grid-template-columns:1fr; }
 .demo-banner { font-size:.72rem;line-height:1.5;padding:8px 14px; }
 .page-sub { display:none; }.topbar { min-height:64px; }
}
@media print { .sidebar,.topbar,.section-nav,.tour-stop form,.tour-stop .writing-tools,.tour-grid aside,.crm-foot { display:none!important; }.main { margin:0; }.tour-grid { display:block; }.card { break-inside:avoid; }.work-hero { background:white;color:#123d34;padding:0; }.work-hero p { color:#123d34; } }
.grid-2>*,.studio-grid>*,.tour-grid>*,.tour-stop>* { min-width:0; }
.tour-grid { grid-template-columns:minmax(0,1fr) minmax(0,310px); }
.tour-stop .card { width:100%;min-width:0; }
.tour-stop h2 { overflow-wrap:anywhere; }
.studio-editor button:disabled { background:#e5e7df;border-color:#d6dacc;color:#67756c;cursor:not-allowed; }
@media(max-width:1100px) { .tour-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) { .tour-stop { grid-template-columns:minmax(0,1fr); }.tour-stop .card-head>div { min-width:0;max-width:100%; } }

/* Résultats : laisser les noms et leurs preuves lisibles sur petit écran. */
.acquisition-workspace .row-main > * { display: block; }
.acquisition-workspace .row-main > strong { margin-top: .25rem; }
@media (max-width: 640px) {
  .acquisition-workspace .row { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .acquisition-workspace .row-main { flex: 1 1 100%; min-width: 0; }
  .acquisition-workspace .row > .chip { white-space: normal; text-align: left; }
  .acquisition-workspace .btn-sm { min-height: 44px; }
}

/* Assistance Collab : le bouton reste un point d’entrée discret du menu. */
.support-contact { width: calc(100% - 16px); border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; flex-wrap: wrap; gap: 4px; }
.support-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #64dc91; }
.support-status { cursor: default; color: var(--ink-500); }
.support-presence-menu { width: 100%; margin-top: 6px; padding-left: 16px; }
.support-presence-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.support-presence-list[hidden] { display: none; }
.support-presence-list .collab-roster-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; padding: 2px 0; background: transparent; border-radius: 0; font-size: .76rem; }
.support-presence-list .collab-roster-entry strong { color: var(--ink-600); font-weight: 600; overflow-wrap: anywhere; }
.support-presence-list .collab-roster-entry span { color: var(--ink-400); font-size: .74rem; text-align: right; }

/* Assistance Collab : le panneau est masqué jusqu’à la connexion réelle. */
.collab-root:not([hidden]) { margin: 20px 0; }
.collab-notices { margin: 16px 0; }
.collab-notices.has-collab-request { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20; padding: 10px 12px; border: 1px solid #e3b341; border-radius: 12px; background: var(--ivory-050, #fffdf5); box-shadow: 0 8px 24px #0002; }
.collab-status:empty { display: none; }
.collab-roster { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--ivory-300); border-radius: 10px; background: #fffdf8; }
.collab-roster-empty { margin: 0; color: var(--ink-400); font-size: .85rem; }
.collab-roster-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.collab-roster-entry { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--ivory-100); }
.collab-roster-entry strong { overflow-wrap: anywhere; }
.collab-roster-entry span { color: var(--ink-500); font-size: .84rem; text-align: right; }
.collab-request { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin: 8px 0; border: 2px solid #e3b341; border-radius: 10px; background: var(--ivory-050, #faf9f4); }
.collab-request-copy { display: grid; gap: 3px; }
.collab-request-title { color: #6d4d00; }
.collab-request p { margin: 0; }
.collab-request-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media(max-width:760px) { .collab-request { display: block; }.collab-request-actions { margin-top: 10px; }.collab-roster-entry { display: grid; gap: 2px; }.collab-roster-entry span { text-align: left; } }