/* W4 (30/09) : harmonisation visuelle (Réunions, Agenda, Parler à Runflow) : bloc « W4 » après « Réunions (28/09) ». */
/* Lot 2 : polices WOFF2 (repli TTF) et affichage immédiat du texte (swap). */
@font-face {
  font-family: Instrument;
  src: url("/brand/Instrument-400.woff2?v=e36bf672ff1c7462") format("woff2"), url("/brand/Instrument-400.ttf?v=3a2d21ae04ed4cfc") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Instrument;
  src: url("/brand/Instrument-650.woff2?v=cb9aa10b426bbf96") format("woff2"), url("/brand/Instrument-650.ttf?v=8fe2ad9f6905e36e") format("truetype");
  font-display: swap;
  font-weight: 650;
}
@font-face {
  font-family: Archivo;
  src: url("/brand/Archivo-600.woff2?v=d0ba98660e70f4d1") format("woff2"), url("/brand/Archivo-600.ttf?v=1ea5bb7c1d6b16c0") format("truetype");
  font-display: swap;
  font-weight: 600;
}
/* R1 (10/10, ticket #93) : couleurs et thèmes dans /jetons.css (seule source), chargée en premier. */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    var(--rf-t-m)/1.55 Instrument,
    Arial,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button,
.button {
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  background: var(--raised);
  padding: 10px 15px;
  color: var(--text);
  cursor: pointer;
  min-height: 42px;
}
button:hover,
.button:hover {
  border-color: var(--accent);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  font-weight: 650;
}
.quiet {
  background: transparent;
}
.danger {
  color: var(--red);
}
h1,
h2,
h3 {
  font-family: Archivo, Arial, sans-serif;
  line-height: 1.18;
  margin: 0 0 14px;
}
h1 {
  font-size: clamp(28px, 3.1vw, 44px);
  letter-spacing: -1.2px;
}
h2 {
  font-size: var(--rf-t-2xl);
}
h3 {
  font-size: var(--rf-t-xl);
}
p {
  margin: 0 0 16px;
}
.muted,
small {
  color: var(--muted);
}
small {
  font-size: var(--rf-t-xs);
  display: block;
}
strong {
  font-weight: 650;
}
.eyebrow {
  font-size: var(--rf-t-micro);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
  margin-bottom: 12px;
}
.shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 28px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.logo {
  width: 140px;
  display: block;
}
.logo.light {
  display: none;
}
[data-theme="light"] .logo.dark {
  display: none;
}
[data-theme="light"] .logo.light {
  display: block;
}
.sidebar nav {
  display: grid;
  gap: 5px;
  overflow: auto;
  flex: 1;
  align-content: start;
}
.space-label {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 10px;
}
.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--rf-rayon);
  background: var(--raised);
  color: var(--accent);
  font-weight: 650;
}
/* 14/10 : même rendu que les vignettes de l'administration (.vg-avec-image) : image entière, sans marge, fond papier. */
.company-mark { object-fit: contain; padding: 0; background: var(--rf-papier-fond); overflow: hidden; }
.company-mark-large { width: 64px; height: 64px; border-radius: var(--rf-rayon); font-size: var(--rf-t-2xl); }
.profile-logo-preview { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.profile-logo-preview small { display: block; color: var(--muted); }
.explorer-search { margin-bottom: 18px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: var(--rf-t-sm); }
.breadcrumbs a[aria-current="location"] { color: var(--text); font-weight: 650; }
.explorer-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.explorer-toolbar .breadcrumbs { margin-bottom: 0; }
.explorer-view { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); }
.explorer-view button { border: 0; background: transparent; padding: 9px 14px; border-radius: var(--rf-rayon); color: var(--muted); }
.explorer-view button[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.explorer-view button span { margin-right: 5px; }
.explorer-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.explorer-layout.has-preview { grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); }
.explorer-folders { display: contents; }
.explorer-items.is-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.explorer-items.is-cards .explorer-item { flex-direction: column; align-items: flex-start; margin: 0; padding: 20px; }
.explorer-items.is-cards .explorer-folder { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
.explorer-items.is-cards .explorer-folder .doc-icon { grid-column: 1 / -1; }
.explorer-items.is-cards .explorer-actions { justify-content: flex-start; margin-top: 8px; }
.explorer-details { margin-bottom: 18px; }
.explorer-content, .explorer-preview { min-width: 0; }
.explorer-item { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--rf-rayon); margin-bottom: 8px; background: var(--surface); }
.explorer-item.selected { border-color: var(--accent); }
.explorer-folder:hover, .explorer-folder:focus-visible { background: var(--raised); }
.explorer-folder strong, .explorer-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.explorer-name small { display: block; color: var(--muted); margin-top: 4px; }
.explorer-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.explorer-actions button { padding: 8px 10px; }
.explorer-preview { position: sticky; top: 20px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); padding: 18px; min-height: 420px; }
.explorer-preview h2 { margin: 4px 0 0; overflow-wrap: anywhere; }
.document-frame { width: 100%; height: min(62vh, 650px); min-height: 320px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--rf-papier-fond); }
.document-image-wrap { display: grid; place-items: center; min-height: 300px; max-height: min(62vh, 650px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--rf-papier-fond); }
.document-image { display: block; max-width: 100%; max-height: min(62vh, 650px); object-fit: contain; }
.document-video { display: block; width: 100%; max-height: min(62vh, 650px); border-radius: var(--rf-rayon); background: var(--rf-nuit); }
.preview-empty { display: grid; place-content: center; text-align: center; min-height: 360px; color: var(--muted); }
.preview-empty .doc-icon { font-size: var(--rf-t-5xl); }
.share-link { width: 100%; }
.newsletter-connection { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 18px 0; }
.newsletter-connection .button { margin-left: 10px; }
.resend-card { margin: 22px 0; }
.resend-card h2 { margin: 6px 0; }
.resend-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; margin: 24px 0; gap: 16px; }
.resend-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); min-width: 0; }
.resend-steps li > div { min-width: 0; }
.resend-step-number { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 650; }
.resend-steps h3 { margin: 4px 0 12px; font-size: var(--rf-t-l); }
.resend-steps p { color: var(--muted); font-size: var(--rf-t-sm); overflow-wrap: anywhere; line-height: 1.5; }
.resend-steps button { margin-top: 8px; }
.resend-check { font-size: var(--rf-t-xs) !important; }
.resend-feedback { padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--raised); line-height: 1.5; }
.resend-help { margin: 18px 0 0; color: var(--muted); line-height: 1.6; font-size: var(--rf-t-sm); }
.resend-help summary { cursor: pointer; color: var(--text); font-weight: 650; }
.resend-help a { text-decoration: underline; color: var(--text); }
@media (max-width: 1000px) { .resend-steps { grid-template-columns: 1fr; } }
.effective-rights { margin: 22px 0; padding: 18px; background: var(--raised); border-radius: var(--rf-rayon); }
.rights-total { display: inline-grid; place-items: center; border-radius: var(--rf-rayon-rond); background: var(--accent); color: var(--ink); min-width: 34px; height: 34px; font-weight: 650; }
.rights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.rights-group { padding: 14px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); }
.rights-group h4 { margin: 0 0 10px; }
.rights-group h4 small { color: var(--muted); }
.rights-group ul { margin: 0; padding-left: 19px; line-height: 1.65; }
@media (max-width: 1100px) {
  .explorer-layout.has-preview { grid-template-columns: 1fr; }
  .explorer-preview { position: static; }
}
@media (max-width: 620px) {
  .explorer-item { flex-wrap: wrap; }
  .explorer-actions { width: 100%; justify-content: flex-start; }
  .newsletter-connection { align-items: flex-start; flex-direction: column; }
}
.account {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.account > button:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 6px;
  background: none;
}
.account .theme-toggle {
  flex: 1;
}
.topbar {
  padding: 18px 40px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: var(--rf-t-s);
}
.topbar strong {
  color: var(--text);
}
/* Notifications en haut à droite (remontées de l'équipe, 28/09) */
.topbar-notifications { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--rf-rayon); color: var(--muted); flex-shrink: 0; }
.topbar-notifications:hover, .topbar-notifications[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
.topbar-notifications svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topbar-notifications .nav-count { position: absolute; top: -6px; right: -6px; min-width: 1.25rem; padding: 0.05rem 0.3rem; border-radius: var(--rf-rayon-rond); background: var(--accent); color: var(--ink); font-size: var(--rf-t-xs); text-align: center; }
.workspace { min-width: 0; }
.client-context { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 18px 40px; background: var(--surface); border-bottom: 1px solid var(--line); }
.client-back { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; border: 1px solid var(--line); border-radius: var(--rf-rayon); font-size: var(--rf-t-sm); font-weight: 600; background: var(--raised); flex-shrink: 0; }
.client-back:hover { border-color: var(--accent); color: var(--accent); }
.client-context-name { display: grid; gap: 4px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.client-context-name strong { font-size: var(--rf-t-xl); }
.client-mode { font-size: var(--rf-t-micro); letter-spacing: 1.4px; color: var(--accent); font-weight: 650; }
.client-new-tab { flex-shrink: 0; font-size: var(--rf-t-xs); }
.client-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.client-breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.client-breadcrumbs [aria-current] { color: var(--text); }
.client-exit { display: grid; gap: 10px; border-top: 1px solid var(--line); padding: 15px 10px 0; font-size: var(--rf-t-xs); color: var(--muted); }
.client-exit a:hover { color: var(--text); }
.client-shell .sidebar { gap: 22px; }
@media (max-width: 760px) {
  .client-context { padding: 14px 20px; gap: 12px; }
  .client-back { width: 100%; justify-content: center; }
  .client-context-name strong { font-size: var(--rf-t-m); }
  .client-new-tab { padding: 9px; }
  .client-exit { display: flex; justify-content: space-between; padding: 12px 0 0; }
}
.demo-banner {
  font-size: var(--rf-t-micro);
  background: var(--raised);
  color: var(--muted);
  padding: 7px 40px;
}
.main {
  padding: 35px 40px 60px;
  max-width: 1500px;
  width: 100%;
  margin: auto;
  min-width: 0;
}
.heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.heading p {
  max-width: 680px;
  color: var(--muted);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  padding: 23px;
}
.hero {
  padding: 30px;
  background: linear-gradient(115deg, var(--raised), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  display: flex;
  align-items: center;
  gap: 24px;
}
.company-logo {
  width: 74px;
  height: 74px;
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  background: var(--bg);
  display: grid;
  place-items: center;
  font: 600 var(--rf-t-3xl) Archivo;
  color: var(--accent);
  flex-shrink: 0;
  object-fit: contain;
}
.hero > div:nth-child(2) {
  flex: 1;
}
.hero h2 {
  font-size: var(--rf-t-3xl);
  margin-bottom: 8px;
}
.hero p {
  margin: 0;
  color: var(--muted);
}
.grid {
  display: grid;
  gap: 18px;
}
.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section {
  margin-top: 25px;
}
.metric strong {
  font: 600 var(--rf-t-3xl) Archivo;
  display: block;
  margin: 14px 0 4px;
  color: var(--accent);
}
.metric span {
  font-size: var(--rf-t-s);
  color: var(--muted);
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.section-title h2 {
  margin: 0;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child {
  border-bottom: 0;
}
.row p {
  margin: 0;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  font-size: var(--rf-t-micro);
  line-height: 1.2;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  white-space: nowrap;
  color: var(--muted);
}
.badge.green {
  color: var(--accent);
  background: var(--raised);
}
.filters {
  display: flex;
  gap: 14px;
  align-items: end;
  margin: 22px 0;
}
.filters > label:first-child {
  flex: 1;
}
.filters select {
  min-width: 120px;
}
.pager {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 18px;
  font-size: var(--rf-t-xs);
  color: var(--muted);
}
label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--rf-t-s);
}
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  color: var(--text);
  padding: 11px 12px;
}
textarea {
  min-height: 120px;
  resize: vertical;
}
form {
  display: grid;
  gap: 18px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.wide {
  grid-column: 1/-1;
}
.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.permission-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.permission-toolbar strong { font-size: var(--rf-t-sm); }
.permission-picker .toolbar { flex-wrap: wrap; }
.permission-picker button { font-size: var(--rf-t-s); padding: 9px 12px; }
.permission-hint { font-size: var(--rf-t-s); margin: 12px 0 18px; }
.permission-sections { display: grid; gap: 10px; }
.permission-section { border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--bg); overflow: hidden; }
.permission-section summary { display: flex; align-items: center; gap: 10px; padding: 15px; cursor: pointer; font-weight: 600; list-style: none; }
.permission-section summary::-webkit-details-marker { display: none; }
.permission-section summary::before { content: '›'; color: var(--muted); font-size: var(--rf-t-2xl); line-height: 1; transition: transform .15s; }
.permission-section[open] summary::before { transform: rotate(90deg); }
.permission-section summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.permission-count { margin-left: auto; flex-shrink: 0; font-size: var(--rf-t-xs); color: var(--muted); background: var(--surface); padding: 4px 9px; border-radius: var(--rf-rayon); font-variant-numeric: tabular-nums; }
.permission-section[open] summary { border-bottom: 1px solid var(--line); }
.permission-body { padding: 14px; }
.permission-section-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.permission-body .check { align-items: flex-start; padding: 10px; border-radius: var(--rf-rayon); margin: 0; line-height: 1.5; }
.permission-body .check:has(input:checked) { background: var(--surface); }
.permission-body .check:hover { outline: 1px solid var(--line); }
.permission-body .check input { margin-top: 2px; }
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
fieldset {
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  padding: 18px;
}
legend {
  padding: 0 8px;
  color: var(--muted);
}
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 13px;
  overflow: auto;
  margin: 10px 0 24px;
}
.tabs a,
.tabs button {
  white-space: nowrap;
  border-radius: var(--rf-rayon);
  padding: 10px 13px;
  color: var(--muted);
}
.tabs .selected {
  background: var(--raised);
  color: var(--accent);
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--rf-t-s);
}
th {
  text-align: left;
  color: var(--muted);
  font-size: var(--rf-t-micro);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--raised);
}
th,
td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
td strong {
  display: block;
}
/* Ticket #62 (07/10) : dans un tableau de l'aide, le gras reste dans la phrase (« Ce qu'il ouvre »). */
.aide-tableau td strong {
  display: inline;
}
td:last-child .toolbar {
  justify-content: flex-end;
}
tr:last-child td {
  border: 0;
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px;
}
.notice {
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--rf-rayon);
  background: var(--raised);
  font-size: var(--rf-t-s);
  margin: 15px 0;
}
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-card h3 {
  font: 650 var(--rf-t-m) Instrument;
  overflow-wrap: anywhere;
  margin: 0;
}
.doc-icon {
  font-size: var(--rf-t-3xl);
  color: var(--accent);
}
.doc-card button {
  margin-top: auto;
  align-self: flex-start;
}
.setting-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setting-card p {
  color: var(--muted);
  flex: 1;
}
.setting-card .badge {
  align-self: flex-start;
}
.price {
  font: 600 var(--rf-t-3xl) Archivo;
  margin: 20px 0;
}
.prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.email-preview {
  background: var(--rf-papier);
  color: var(--rf-papier-accent);
  padding: 30px;
  border-radius: var(--rf-rayon);
}
.email-preview h2 {
  border-bottom: 1px solid var(--rf-papier-ligne);
  padding-bottom: 20px;
}
.email-preview footer {
  font-size: var(--rf-t-xs);
  color: var(--rf-papier-doux);
  border-top: 1px solid var(--rf-papier-ligne);
  padding-top: 18px;
  margin-top: 25px;
}
.code {
  font-family: monospace;
  word-break: break-all;
  background: var(--bg);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
}
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-brand {
  padding: 60px 12%;
  background: radial-gradient(ellipse at 10% 80%, var(--raised), var(--bg));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
}
.login-brand h1 {
  font-size: clamp(40px, 5vw, 68px);
}
.login-brand h1 span {
  color: var(--accent);
}
.login-form {
  display: grid;
  align-content: center;
  padding: 60px 14%;
  gap: 20px;
}
.login-card { width:100%; max-width:410px; margin:auto; }
.login-card h2 { margin:16px 0; font-size:var(--rf-t-3xl); }
.login-card p { line-height:1.6; }
.login-card form { display:grid; gap:18px; margin-top:18px; }
.login-card form button { width:100%; min-height:44px; }
.login-card .eyebrow { font-size:var(--rf-t-micro); letter-spacing:1.7px; }
/* Connexion commune (I1) : bouton de la porte Runflow, puis l'ancienne connexion par code. */
.login-card .login-commune { display:flex; justify-content:center; align-items:center; width:100%; min-height:44px; margin-top:18px; }
.login-ou { display:flex; align-items:center; gap:12px; margin:22px 0 0; color:var(--muted); font-size:var(--rf-t-s); }
.login-ou::before, .login-ou::after { content:""; flex:1; border-top:1px solid var(--line); }
.account-admin { display:block; padding:8px 4px 0; font-size:var(--rf-t-xs); color:var(--muted); }
.account-admin:hover { color:var(--text); }
.login-demo {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.login-demo button {
  margin: 6px 0;
  width: 100%;
  text-align: left;
}
.chooser {
  max-width: 900px;
  margin: 100px auto;
  padding: 24px;
}
.chooser a {
  display: block;
}
.chooser .panel:hover {
  border-color: var(--accent);
}
dialog {
  width: min(790px, calc(100vw - 28px));
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--rf-rayon);
  background: var(--surface);
  color: var(--text);
  padding: 28px;
  box-shadow: 0 25px 80px var(--shadow);
}
dialog:has(.campaign-composer) { width: min(980px, calc(100vw - 28px)); }
.campaign-meta, .campaign-preview-toolbar, .campaign-footer, .campaign-footer > div { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.campaign-meta { justify-content:flex-start; color:var(--muted); font-size:var(--rf-t-s); }
.campaign-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0; }
.campaign-steps button { display:flex; align-items:center; justify-content:center; gap:10px; }
.campaign-steps button span { border:1px solid currentColor; border-radius:50%; width:26px; height:26px; display:grid; place-items:center; flex-shrink:0; }
.campaign-steps [aria-current="step"] { background:var(--accent); color:var(--ink); border-color:var(--accent); }
.campaign-composer [hidden] { display:none !important; }
.campaign-composer label { margin-top:18px; }
.campaign-composer small { display:block; color:var(--muted); line-height:1.6; margin:6px 0; }
.campaign-composer textarea { min-height:260px; resize:vertical; }
.campaign-summary { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px; border:1px solid var(--line); border-radius:var(--rf-rayon); margin:24px 0; }
.campaign-summary p { margin:8px 0; }
.campaign-help { border-top:1px solid var(--line); margin:22px 0; padding-top:16px; line-height:1.7; }
.campaign-help summary { cursor:pointer; font-weight:600; }
.campaign-template { display:flex; align-items:end; gap:12px; }
.campaign-template label { flex:1; }
.campaign-template button { margin-bottom:0; }
.campaign-checklist { display:flex; flex-wrap:wrap; list-style:none; padding:0; gap:10px 22px; font-size:var(--rf-t-sm); }
.campaign-preview-toolbar { margin:24px 0 12px; }
.campaign-preview-toolbar [aria-pressed="true"] { border-color:var(--accent); }
.campaign-preview { background:var(--bg); border:1px solid var(--line); border-radius:var(--rf-rayon); padding:24px; margin:0 auto; overflow-wrap:anywhere; width:100%; max-width:100%; }
.campaign-preview.is-mobile { max-width:375px; }
.campaign-preview h4 { font-size:var(--rf-t-2xl); margin:12px 0 24px; }
.campaign-preview p { line-height:1.7; }
.campaign-footer { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; }
.campaign-composer [data-campaign-error] { border:1px solid var(--line); padding:12px; }
@media(max-width:640px) {
  .campaign-steps button { flex-direction:column; padding:10px 6px; font-size:var(--rf-t-xs); }
  .campaign-summary { grid-template-columns:1fr; padding:16px; }
  .campaign-template { display:block; }
  .campaign-footer > div { width:100%; }
  .campaign-footer > div button { flex:1; }
}
dialog::backdrop {
  background: var(--rf-voile);
  backdrop-filter: blur(5px);
}
dialog header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
dialog header h2 {
  margin: 5px 0;
}
.dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  background: var(--accent);
  color: var(--ink);
  padding: 12px;
}
.skip:focus {
  top: 12px;
}
#toast {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 30;
  max-width: min(460px, 90vw);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--rf-rayon);
  box-shadow: 0 8px 40px var(--shadow);
}
#toast.visible {
  display: block;
}
#toast.error {
  border-color: var(--red);
}
.mobile-title {
  display: none;
}
button.icon {
  width: 43px;
  padding: 0;
}
.audit-actor {
  font-size: var(--rf-t-xs);
  color: var(--muted);
}
.loading {
  padding: 60px;
  color: var(--muted);
  text-align: center;
}
a.text-link {
  color: var(--accent);
  text-decoration: underline;
}
.sidebar {
  gap: 22px;
}
.sidebar nav {
  gap: 3px;
}
.code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 218px minmax(0, 1fr);
  }
  .main {
    padding: 28px 24px;
  }
  .topbar,
  .demo-banner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .shell {
    display: block;
  }
  .account {
    padding: 0;
    border: 0;
    flex-wrap: nowrap;
    align-items: center;
  }
  .account > button:first-child {
    flex: 1;
  }
  .account .theme-toggle {
    flex: none;
  }
  .account small {
    font-size: var(--rf-t-micro);
  }
  .topbar {
    padding: 14px 20px;
  }
  .demo-banner {
    padding: 8px 20px;
  }
  .main {
    padding: 26px 20px 40px;
  }
  .heading {
    flex-direction: column;
  }
  .hero {
    padding: 20px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .hero h2 {
    font-size: var(--rf-t-2xl);
  }
  .company-logo {
    width: 55px;
    height: 55px;
  }
  .hero > button {
    width: 100%;
  }
  .three,
  .two {
    grid-template-columns: 1fr;
  }
  .four {
    gap: 10px;
  }
  .metric {
    padding: 17px;
  }
  .metric strong {
    font-size: var(--rf-t-3xl);
  }
  .form-grid,
  .checks {
    grid-template-columns: 1fr;
  }
  .filters {
    flex-wrap: wrap;
  }
  .filters > label:first-child {
    flex-basis: 100%;
  }
  .filters > label {
    flex: 1;
  }
  .filters button {
    flex: 1;
  }
  .panel {
    padding: 20px;
  }
  .row {
    flex-wrap: wrap;
  }
  .pager {
    justify-content: space-between;
    gap: 8px;
  }
  .pager button {
    padding: 9px;
  }
  .login {
    display: block;
  }
  .login-brand {
    min-height: 280px;
    padding: 30px;
  }
  .login-brand h1 {
    font-size: var(--rf-t-4xl);
    margin-top: 30px;
  }
  .login-brand > small {
    display: none;
  }
  .login-form {
    padding: 30px;
  }
  .login-brand .logo {
    width: 125px;
  }
  dialog {
    padding: 20px;
  }
  .dialog-actions {
    flex-wrap: wrap;
  }
  .chooser {
    margin: 30px auto;
  }
  .toolbar {
    gap: 7px;
  }
  th,
  td {
    padding: 12px;
  }
  .email-preview {
    padding: 20px;
  }
  .account .avatar {
    width: 32px;
    height: 32px;
  }
  .account > button {
    font-size: var(--rf-t-xs);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
.account.account-card { display:block; border:1px solid var(--line); border-radius:var(--rf-rayon); background:var(--surface); padding:6px; }
.account-card .profile-link { display:flex; align-items:center; gap:10px; width:100%; padding:10px 7px; border:0; background:transparent; text-align:left; }
.account-card .profile-link:hover { background:var(--raised); }
.account-card .avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; font-size:var(--rf-t-s); }
.account-card .profile-name { min-width:0; flex:1; }
.account-card .profile-name strong { display:block; font-size:var(--rf-t-s); overflow-wrap:anywhere; }
.account-card .profile-name small { display:block; font-size:var(--rf-t-micro); margin-top:3px; color:var(--muted); }
.account-card .account-controls { border-top:1px solid var(--line); margin:4px 2px 0; padding-top:8px; display:flex; gap:6px; }
.account-card .theme-segment { display:flex; flex:1; background:var(--bg); border:1px solid var(--line); border-radius:var(--rf-rayon); padding:3px; gap:2px; }
.account-card .theme-segment button { flex:1; min-height:34px; padding:5px; font-size:var(--rf-t-micro); border:0; background:transparent; color:var(--muted); }
.account-card .theme-segment button[aria-pressed="true"] { background:var(--raised); color:var(--text); box-shadow:0 1px 4px var(--rf-ombre-douce); }
.account-card .logout-icon { width:36px; min-height:40px; padding:8px; flex-shrink:0; display:grid; place-items:center; background:transparent; color:var(--muted); }
.account-card .logout-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-card .logout-icon:hover { color:var(--red); background:var(--raised); }
.pdf-preview { border:1px solid var(--line); border-radius:var(--rf-rayon); overflow:hidden; }
.pdf-controls { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px; background:var(--raised); font-size:var(--rf-t-xs); }
.pdf-controls [role="status"] { text-align:center; }
.pdf-controls button { padding:8px 12px; }
.pdf-sheet { min-height:140px; max-height:70vh; overflow:auto; background:var(--rf-papier); }
.pdf-sheet canvas { display:block; width:100%; height:auto; background:var(--rf-papier-fond); }
.pdf-sheet canvas[hidden] { display:none; }
@media(max-width:700px) { .account.account-card { width:100%; } .login-card { max-width:410px; } }
/* Lot 1 : blocs secondaires chargés après le contenu principal. */
.block[aria-busy="true"] { min-height:48px; }
.block-state { margin:12px 0; }
.block-state button { margin-left:8px; }
/* Vitrine des services (28/09) : diagnostic, conseils expliqués, formules, options filtrées. */
:root { --vt-moyen: var(--rf-attention); --vt-conseil: var(--accent); }
.vt-diag { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.vt-diag-score { display: flex; gap: 20px; align-items: center; }
.vt-diag-score h2 { margin-bottom: 6px; }
.vt-diag-score p { margin: 0; }
.vt-anneau { width: 108px; height: 108px; flex-shrink: 0; }
.vt-anneau-fond { fill: none; stroke: var(--raised); stroke-width: 9; }
.vt-anneau-val { fill: none; stroke-width: 9; stroke-linecap: round; }
.vt-anneau-val.bon { stroke: var(--accent); }
.vt-anneau-val.moyen { stroke: var(--vt-moyen); }
.vt-anneau-val.faible { stroke: var(--red); }
.vt-anneau text { fill: var(--text); font: 600 var(--rf-t-3xl) Archivo, Arial, sans-serif; }
.vt-axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vt-axes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: var(--rf-t-s); }
.vt-axes li strong { font-variant-numeric: tabular-nums; }
.vt-jauge { grid-column: 1 / -1; width: 100%; height: 6px; display: block; }
.vt-jauge-fond { fill: var(--raised); }
.vt-jauge-val.bon { fill: var(--accent); }
.vt-jauge-val.moyen { fill: var(--vt-moyen); }
.vt-jauge-val.faible { fill: var(--red); }
.vt-conseils .panel, .vt-formules .panel, .vt-options .panel { display: flex; flex-direction: column; gap: 12px; }
.vt-carte-conseil { border-color: var(--vt-conseil); }
.vt-carte-conseil h3, .vt-formule h3, .vt-option h3 { margin: 0; }
.vt-benefice { margin: 0; }
.vt-badge-conseil { color: var(--vt-conseil); border-color: var(--vt-conseil); }
.vt-releve { background: var(--raised); border-radius: var(--rf-rayon); padding: 12px 14px; }
.vt-releve small { text-transform: uppercase; letter-spacing: 1px; font-size: var(--rf-t-micro); margin-bottom: 6px; }
.vt-releve ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--rf-t-s); }
.vt-gains { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-gains span { border: 1px solid var(--line); border-radius: var(--rf-rayon); padding: 6px 10px; display: grid; gap: 2px; }
.vt-gains strong { color: var(--vt-conseil); font-variant-numeric: tabular-nums; }
.vt-note { margin-top: -6px; }
.vt-pied { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.vt-prix { font: 600 var(--rf-t-xl) Archivo, Arial, sans-serif; }
.vt-formule { position: relative; }
.vt-formule.conseillee { border-color: var(--vt-conseil); }
.vt-formule.actuelle { border-color: var(--accent); background: var(--raised); }
.vt-ruban { align-self: flex-start; font-size: var(--rf-t-micro); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); background: var(--vt-conseil); border-radius: var(--rf-rayon); padding: 5px 10px; }
.vt-formule.actuelle .vt-ruban { background: var(--accent); }
.vt-prix-grand { font: 600 var(--rf-t-3xl) Archivo, Arial, sans-serif; margin-top: -4px; }
.vt-inclus { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--rf-t-s); color: var(--muted); }
.vt-option.conseillee { border-color: var(--vt-conseil); }
.vt-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vt-filtres button { min-height: 36px; padding: 6px 12px; border-radius: var(--rf-rayon); font-size: var(--rf-t-s); }
.vt-filtres button[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.vt-invite { border-left: 3px solid var(--vt-conseil); }
@media (max-width: 900px) { .vt-diag { grid-template-columns: minmax(0, 1fr); } .vt-formules, .vt-options { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) and (max-width: 1180px) { .vt-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- W3 (30/09) : pages restantes du portail dans le langage du kit (ui-kit.css) ----------------------------------- */
/* Accueil : carte entreprise (vignette, trois chiffres), prochaines étapes et vos outils en lignes à vignette. */
.acc-entreprise { display: grid; gap: 18px; }
.acc-entreprise-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-entreprise-tete > .toolbar { margin-left: auto; }
.acc-logo { width: 56px; height: 56px; border-radius: var(--rf-rayon); font-size: var(--rf-t-2xl); }
img.acc-logo { object-fit: contain; padding: 0; background: var(--rf-papier-fond); overflow: hidden; }
.acc-entreprise-nom { display: grid; gap: 4px; justify-items: start; min-width: 0; flex: 1 1 220px; }
.acc-entreprise-nom h2 { margin: 0; font-size: var(--rf-t-2xl); overflow-wrap: anywhere; }
.acc-entreprise-nom p { margin: 0; color: var(--muted); font-size: var(--rf-t-s); }
.acc-entreprise .uk-chiffres { margin: 0; }
.acc-entreprise .block-state { margin: 0; }
.acc-bloc { display: grid; align-content: start; gap: 4px; }
.acc-bloc .section-title { margin-bottom: 8px; }
.acc-bloc .uk-liste { border: 0; background: transparent; }
.acc-bloc .uk-liste .vg-ligne { padding-left: 0; padding-right: 0; }
.acc-bloc .uk-vide { padding: 22px 16px; }
/* --- Brief du matin (ticket n° 141, lot 2, 14/10) : haut de l'Accueil (portal-v2/brief-ui.js). Mobile d'abord : une colonne
   à 390 px, deux colonnes dès 760 px, trois dès 1100 px ; planning en lignes « jour | éléments » dès 700 px. Jetons seulement. */
.bf { display: grid; gap: 16px; margin-bottom: 24px; }
.bf-phrase { display: grid; gap: 8px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--rf-rayon); }
.bf-phrase.bf-repos { border-left-color: var(--line); }
.bf-surtitre { margin: 0; color: var(--muted); font-size: var(--rf-t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bf-phrase h2 { margin: 0; font-size: var(--rf-t-xl); line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.bf-phrase-detail { margin: 0; color: var(--muted); font-size: var(--rf-t-sm); }
.bf-blocs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.bf-bloc { display: grid; align-content: start; gap: 4px; min-width: 0; }
.bf-bloc .section-title, .bf-planning .section-title { margin-bottom: 8px; }
.bf-bloc .uk-liste, .bf-jour .uk-liste { border: 0; background: transparent; }
.bf-bloc .uk-liste .vg-ligne, .bf-jour .uk-liste .vg-ligne { padding-left: 0; padding-right: 0; }
.bf-bloc .uk-vide, .bf-planning .uk-vide { padding: 20px 12px; }
/* Titres du brief en entier (sur deux lignes au besoin) : la phrase d'une action ne se coupe pas en plein mot. */
.bf .vg-corps strong, .bf .vg-corps small { white-space: normal; overflow-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.bf-chiffres { margin: 0 0 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.bf-reste { margin: 6px 0 0; color: var(--muted); font-size: var(--rf-t-s); }
.bf-panne { margin: 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--rf-attention); border-radius: var(--rf-rayon); font-size: var(--rf-t-s); }
.bf-planning { display: grid; gap: 4px; min-width: 0; }
.bf-planning-tete { flex-wrap: wrap; }
.bf-jours { list-style: none; margin: 0; padding: 0; display: grid; }
.bf-jour { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.bf-jour:first-child { border-top: 0; padding-top: 4px; }
.bf-jour-date { margin: 0; font-size: var(--rf-t-sm); font-variant-numeric: tabular-nums; }
.acc-dessous { margin-top: 16px; }
/* Brief de l'équipe (ticket n° 141, lot 3) : quatre blocs, deux colonnes dès 760 px (jamais trois : lignes plus longues). */
.bfe-familles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
/* Mon compte › E-mails (ticket n° 141, lot 4) : le choix passe sous le texte sur téléphone, à droite dès 700 px. */
.bm-frequence { max-width: 100%; min-height: 44px; }
@media (max-width: 699px) { .vg-ligne.bm-ligne { flex-wrap: wrap; } .bm-ligne .vg-action { flex-basis: 100%; } .bm-ligne .bm-frequence { width: 100%; } }
@media (min-width: 700px) {
  .bf-jour { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
  .bf-jour-date { padding-top: 12px; }
}
@media (min-width: 760px) {
  .bf-phrase h2 { font-size: var(--rf-t-2xl); }
  .bf-blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-blocs > .bf-bloc:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bf-blocs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-blocs > .bf-bloc:last-child { grid-column: auto; }
}
@media (min-width: 760px) {
  .bf-blocs.bfe-blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-blocs.bfe-blocs > .bf-bloc:last-child { grid-column: auto; }
}
/* Documents : vignettes par rubrique et par fichier, nombre de documents, bascule Cartes / Liste à pictogrammes. */
.explorer-lieu { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.explorer-view button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.explorer-view button .vg-picto { width: 16px; height: 16px; }
.explorer-item .doc-chevron { width: 18px; height: 18px; color: var(--muted); flex: none; }
.explorer-rubrique .explorer-name small.doc-compte { margin-top: 2px; }
.explorer-items.is-cards .explorer-rubrique { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.explorer-items.is-cards .explorer-folder:not(.explorer-rubrique) { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.explorer-items.is-cards .explorer-item:not(.explorer-folder) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.explorer-items.is-cards .explorer-item:not(.explorer-folder) .explorer-actions { grid-column: 1 / -1; }
.explorer-items.is-list .explorer-item { margin-bottom: 6px; padding: 10px 12px; }
.explorer-search { max-width: none; margin-bottom: 18px; }
.doc-fermer { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0; }
.doc-fermer .vg-picto { width: 18px; height: 18px; }
/* Actions : onglets d'affichage et liens sur une ligne ; groupes « par projet ». */
.act-barre { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 16px; border-bottom: 1px solid var(--line); }
.act-barre .uk-onglets { margin: 0; border-bottom: 0; }
.act-barre > .toolbar { padding-bottom: 8px; }
.act-projet h2 { display: flex; align-items: center; gap: 10px; font-size: var(--rf-t-xl); }
/* Fiche site : en-tête à vignette, bande des incidents, vitesse ressentie. */
.site-entete .uk-entete-actions { align-items: center; }
.site-bande .section-title { flex-wrap: wrap; }
.site-bande .section-title small { max-width: 60ch; text-align: right; }
.site-vitesse { display: grid; gap: 8px; align-content: start; }
.site-vitesse .ms-chiffre { margin: 0; }
.site-vitesse .badge, .site-vitesse .uk-etat { justify-self: start; }
.site-grille .gr-legende, .site-vitesse .gr-legende { margin-top: 6px; }
.site-grille .uk-liste { border: 0; background: transparent; }
.site-grille .uk-liste .vg-ligne { padding-left: 0; padding-right: 0; }
.site-choix .uk-site-pied .button { min-height: 36px; padding: 6px 12px; }
/* Sécurité et incidents : le texte d'un point est lu en entier (pas de coupure à deux lignes). */
.site-securite .vg-corps small, .site-grille .vg-corps small { display: block; -webkit-line-clamp: unset; overflow: visible; }
.site-securite .uk-liste { border: 0; background: transparent; }
.site-securite .uk-liste .vg-ligne { padding-left: 0; padding-right: 0; }
/* Fiche latérale (portail) : blocs, prix, liste. */
.uk-fiche-corps .fiche-bloc h3 { margin: 0 0 6px; font-size: var(--rf-t-s); color: var(--muted); font-family: Instrument, Arial, sans-serif; font-weight: 650; }
.uk-fiche-corps .fiche-bloc p { margin: 0 0 6px; }
.uk-fiche-corps .fiche-prix { font: 650 var(--rf-t-2xl)/1.2 Archivo, Arial, sans-serif; }
.uk-fiche-corps .fiche-liste { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.uk-fiche-corps .notice { margin: 0; }
.uk-fiche-actions .button, .uk-fiche-actions button { min-height: 40px; }
/* Paramètres : pilules (outils d'un agent), thème. Mon entreprise : bloc « Mon entreprise (ticket #37) » plus bas. */
.reg-manque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.reg-manque > span:first-child { font-size: var(--rf-t-xs); color: var(--muted); margin-right: 4px; }
.reg-manque > button { margin-left: 6px; min-height: 32px; padding: 5px 11px; font-size: var(--rf-t-s); }
.reg-theme { display: inline-flex; gap: 2px; padding: 3px; margin: 4px 0 8px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--bg); }
.reg-theme button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 0; background: transparent; color: var(--muted); }
.reg-theme button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.reg-theme .vg-picto { width: 15px; height: 15px; }
/* Actions : liens secondaires plus discrets que les boutons ; boutons des fichiers compacts. */
.act-lien { min-height: 36px; padding: 6px 12px; font-size: var(--rf-t-s); }
.explorer-actions button { min-height: 34px; padding: 6px 10px; font-size: var(--rf-t-s); }
.reg-titre > button { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  /* Accueil en mobile : les trois chiffres sur une ligne, sans vignette ni sous-texte. */
  .acc-entreprise .uk-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .acc-entreprise .uk-chiffre { padding: 12px; }
  .acc-entreprise .uk-chiffre .vg, .acc-entreprise .uk-chiffre-sous { display: none; }
  .acc-entreprise .uk-chiffre-valeur { font-size: var(--rf-t-2xl); }
  .reg-titre { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .acc-entreprise-tete > .toolbar { margin-left: 0; }
  .act-barre { align-items: stretch; }
  .site-bande .section-title small { text-align: left; }
}
.vt-plus { display: flex; justify-content: center; margin-top: 18px; }
/* « Mes services » (P1, 28/09) : une carte par service utilisé. */
.ms-grille { align-items: stretch; }
.ms-carte { display: flex; flex-direction: column; }
.ms-carte .section-title { align-items: flex-start; }
.ms-carte .section-title small { display: block; margin-top: 2px; }
.ms-chiffre { font: 650 var(--rf-t-4xl)/1.1 Archivo, Arial, sans-serif; margin: 6px 0 2px; }
.ms-lignes { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: var(--rf-t-s); color: var(--muted); }
.ms-lignes li::before { content: "·"; margin-right: 8px; color: var(--accent); }
.ms-action { margin-top: auto; padding-top: 18px; }
.ms-decouvrir { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-style: dashed; }
.ms-decouvrir small { display: block; margin-top: 4px; }
.ms-decouvrir:hover { border-color: var(--accent); }
a.text-link.retour-services { display: inline-block; margin-bottom: 10px; font-size: var(--rf-t-s); }

/* Réunions (28/09) : récapitulatif compact (date, format, participants, présences). */
.recap-reunion { display: grid; gap: 10px; margin-bottom: 16px; }
.recap-reunion p { margin: 0; }
.recap-grille { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.recap-grille dt { color: var(--muted); font-size: 0.85em; padding-top: 2px; }
.recap-grille dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .recap-grille { grid-template-columns: 1fr; gap: 2px; } .recap-grille dd { margin-bottom: 6px; } }
.reunion-masque { display: none !important; }
/* W4 (30/09) : harmonisation visuelle des écrans Runflow Live (Réunions, Agenda, Parler à Runflow) avec le kit commun :
   barre de filtres (pastilles + recherche), cartes de réunion à vignette, fil d'une demande dans la fiche latérale. */
.reunions-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 16px; }
.reunions-barre .uk-filtres { margin: 0; }
.reunions-recherche { display: block; flex: 0 1 300px; min-width: min(100%, 220px); }
.reunions-recherche label { display: block; }
.reunions-recherche input { width: 100%; min-height: 38px; }
.reunions-compte { margin: 0 0 10px; color: var(--muted); font-size: var(--rf-t-s); }
.reunion-carte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.reunion-carte-tete { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.reunion-carte-titre { display: grid; gap: 2px; flex: 1; min-width: 0; }
.reunion-carte-titre small { color: var(--muted); }
.reunion-carte-titre h2 { margin: 0; font-size: var(--rf-t-2xl); overflow-wrap: anywhere; }
.reunion-carte-etat { flex: none; }
.reunion-carte > p { margin: 0; }
.reunion-carte-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.reunion-carte-pied small { color: var(--muted); }
.parler-carte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.parler-carte-tete { display: flex; align-items: center; gap: 12px; }
.parler-carte-tete h3, .parler-carte p { margin: 0; }
.parler-carte .toolbar { margin-top: auto; padding-top: 4px; }
.parler-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.parler-message { display: grid; gap: 4px; max-width: 88%; justify-self: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon) var(--rf-rayon) var(--rf-rayon) var(--rf-rayon); background: var(--raised); }
.parler-message.est-vous { justify-self: end; border-radius: var(--rf-rayon) var(--rf-rayon) var(--rf-rayon) var(--rf-rayon); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.parler-message small { color: var(--muted); font-size: var(--rf-t-xs); }
.parler-message p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .reunions-recherche { flex-basis: 100%; } }
/* Fiche latérale du kit : la règle « dialog header » du portail ne lui ajoute pas de marge sous l'en-tête. */
.uk-fiche .uk-fiche-tete { margin-bottom: 0; }
/* --- X3 (01/10) : harmonisation visuelle des Échanges (file de l'équipe, dossier client) ------------------------------
   Lignes à vignette du canal (extrait et informations sur une ligne chacun), fil en bulles dans la fiche latérale
   (mêmes bulles que « Parler à Runflow », W4), note privée en pointillés, activité centrée, réponse ou note. */
.ech-compte { margin: 6px 0 10px; font-size: var(--rf-t-s); }
.ech-liste .vg-corps small { -webkit-line-clamp: 1; line-clamp: 1; }
.ech-liste .vg-etat { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .ech-liste .vg-ligne { flex-wrap: wrap; row-gap: 8px; }
  .ech-liste .vg-corps { flex-basis: calc(100% - 52px); }
  .ech-liste .vg-etat { margin-left: 52px; justify-content: flex-start; }
  .ech-liste .vg-action { margin-left: auto; }
}
.ech-fil { display: grid; gap: 16px; min-width: 0; }
.ech-picto { width: 14px; height: 14px; flex: none; vertical-align: -2px; margin-right: 4px; }
.ech-statut { display: flex; align-items: center; gap: 4px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); color: var(--text); font-size: var(--rf-t-s); }
.ech-statut .ech-picto { color: var(--accent); }
.uk-fiche-corps .ech-erreur { margin: 0; border-left-color: var(--red); }
.ech-erreur[hidden] { display: none; }
.ech-proposition { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--rf-rayon); background: var(--raised); font-size: var(--rf-t-s); }
.ech-proposition-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ech-proposition-tete h3 { margin: 0; font-size: var(--rf-t-sm); }
.ech-proposition p { margin: 0; }
.ech-proposition .toolbar { margin: 2px 0 0; }
.ech-brouillon { margin: 0; padding: 8px 12px; border-left: 2px solid var(--line); color: var(--muted); overflow-wrap: anywhere; }
.ech-section > h3 { margin: 0; }
.ech-messages .ech-activite { justify-self: center; max-width: 100%; text-align: center; }
.ech-messages .ech-activite small { color: var(--muted); font-size: var(--rf-t-xs); }
.parler-message.ech-note { border-style: dashed; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.ech-bulle .ech-pieces { font-size: var(--rf-t-xs); overflow-wrap: anywhere; }
.ech-reponse { display: grid; gap: 12px; margin: 0; }
.ech-mode { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; border: 0; }
.ech-mode legend { padding: 0; margin-bottom: 6px; font-size: var(--rf-t-s); }
.ech-mode .check { display: inline-flex; min-height: 24px; font-size: var(--rf-t-sm); cursor: pointer; }
.ech-mode input[type="radio"] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); flex: none; }
.ech-reponse textarea { min-height: 110px; }
.ech-aide { margin: 0; font-size: var(--rf-t-s); }
.ech-reponse .dialog-actions { margin: 0; }
.ech-externe { display: inline-flex; align-items: center; gap: 2px; }
.ech-externe .ech-picto { margin: 0 0 0 4px; }
/* Espace Site (P2, 28/09) : rubriques, feux, barres et courbe en SVG (aucun style en ligne, CSP). */
:root { --site-vert: var(--accent); --site-orange: var(--rf-attention); --site-rouge: var(--red); --site-gris: var(--muted); }
.site-vues { flex-wrap: wrap; margin: 4px 0 22px; width: fit-content; max-width: 100%; }
.site-vues a { padding: 9px 14px; border-radius: var(--rf-rayon); color: var(--muted); text-decoration: none; }
.site-vues a[aria-current="page"] { background: var(--accent); color: var(--ink); }
.site-grille { align-items: stretch; }
.site-tuile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.site-tuile:hover { border-color: var(--accent); }
.site-tuile .ms-chiffre { font-size: var(--rf-t-3xl); }
.site-feu { display: inline-flex; align-items: center; gap: 8px; font-size: var(--rf-t-s); font-weight: 600; }
.site-feu-point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--site-gris); }
.site-feu-vert .site-feu-point { background: var(--site-vert); }
.site-feu-orange .site-feu-point { background: var(--site-orange); }
.site-feu-rouge .site-feu-point { background: var(--site-rouge); }
.site-feu-vert { color: var(--site-vert); }
.site-feu-orange { color: var(--site-orange); }
.site-feu-rouge { color: var(--site-rouge); }
.site-feu-gris { color: var(--site-gris); }
.site-feux { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.site-feux li { display: flex; gap: 14px; align-items: flex-start; color: var(--text); }
.site-feux li .site-feu-point { margin-top: 5px; }
.site-feux small { display: block; margin-top: 2px; }
.site-barres { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.site-barres li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 4.5em; gap: 12px; align-items: center; font-size: var(--rf-t-s); }
.site-barre-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-barre { width: 100%; height: 6px; }
.site-barre .fond { fill: var(--raised); }
.site-barre .plein { fill: var(--accent); }
.site-barre-valeur { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.site-courbe { width: 100%; height: 160px; margin-top: 10px; }
.site-courbe rect { fill: var(--accent); }
.site-courbe-axe { display: flex; justify-content: space-between; font-size: var(--rf-t-xs); color: var(--muted); margin-top: 6px; }
.site-incidents { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.site-incidents li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; }
.site-incidents small { grid-column: 1 / -1; }
.site-vitesse { display: flex; flex-direction: column; gap: 8px; }
.site-note { font-size: var(--rf-t-xs); margin-top: 14px; }
.ms-action .button + .button { margin-left: 8px; }
/* Versions & mises en ligne (P3 + R4) */
.site-versions { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.site-version { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.site-version-active { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.site-version small { display: block; margin-top: 2px; }
.site-version-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
/* Ticket n° 169 (lot 2) : maquettes d'un site en recette (Mes services › Site › Maquettes). */
.mq-pistes { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mq-piste { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 8px 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.mq-piste h3 { margin: 2px 0 0; font-size: var(--rf-t-l); }
.mq-piste .eyebrow { margin: 0; }
.mq-piste > :nth-child(2) { align-self: start; }
.mq-piste-choisie { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mq-piste-ecartee { opacity: .72; }
.mq-intention { margin: 6px 0 0; padding-left: 18px; }
.mq-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.mq-refus { margin: 12px 0 0; }
@media (max-width: 640px) { .mq-actions > .button, .mq-actions > button { flex: 1 1 100%; } }
.site-programmees li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.site-programmees li::before { content: none; }
/* U3 (01/10) : « Déplacer… » et « Annuler » restent côte à côte ; sur téléphone, ils passent sous la ligne. */
.site-programmees li { flex-wrap: wrap; }
.site-programmees .site-version-actions { flex-wrap: nowrap; grid-column: auto; }
/* Plusieurs sites par espace (V1, 30/09) : vignette d'initiale, cartes de choix, sélecteur en haut de la page Site. */
.site-initiale { background: color-mix(in srgb, var(--accent) 16%, var(--raised)); color: var(--accent); font-size: var(--rf-t-xl); }
.site-initiale.petite { width: 26px; height: 26px; border-radius: var(--rf-rayon); font-size: var(--rf-t-xs); }
.ms-titre-vignette { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ms-titre-vignette h2 { overflow-wrap: anywhere; }
.site-selecteur { display: flex; gap: 4px; width: fit-content; max-width: 100%; overflow-x: auto; margin: 0 0 16px; padding: 4px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); }
.site-selecteur a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 5px; border-radius: var(--rf-rayon); color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-selecteur a:hover { color: var(--text); }
.site-selecteur a[aria-current="page"] { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.site-choix { align-items: stretch; }
.site-choix-carte { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.site-choix-carte:hover { border-color: var(--accent); }
.site-choix-nom { display: grid; flex: 1; min-width: 0; }
.site-choix-nom strong, .site-choix-nom small { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .site-vues { width: 100%; }
  .site-vues a { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
  .site-barres li { grid-template-columns: minmax(0, 1fr) 70px 4em; }
}
.a-traiter-filtres { flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.a-traiter-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.a-traiter-liste li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.a-traiter-liste li:last-child { border-bottom: 0; }
.a-traiter-liste li > div { display: grid; gap: 2px; min-width: 0; }
.a-traiter-liste strong { overflow-wrap: anywhere; }
.a-traiter-alerte-site .eyebrow { color: var(--red); }
@media (max-width: 720px) { .a-traiter-liste li { align-items: flex-start; flex-direction: column; } }
.sidebar nav { min-height: 0; }
/* Lentilles du dossier client (R3, 28/09) : Vue client / Gestion. */
.lentilles { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); }
.lentilles button { border: 0; background: transparent; padding: 7px 12px; border-radius: var(--rf-rayon); color: var(--muted); font-size: var(--rf-t-s); }
.lentilles button[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: 650; } /* R1 : une bascule n'est jamais en accent plein. */

/* Kanban des actions (S4, 28/09) : colonnes par état, défilement horizontal sur petit écran. */
.toolbar.segmente { gap: 0; }
.toolbar.segmente .button { border-radius: 0; }
.toolbar.segmente .button:first-child { border-radius: var(--rf-rayon) 0 0 var(--rf-rayon); }
.toolbar.segmente .button:last-child { border-radius: 0 var(--rf-rayon) var(--rf-rayon) 0; }
.toolbar.segmente .button + .button { margin-left: -1px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(188px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kanban-colonne { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rf-rayon); padding: 10px; min-height: 140px; }
.kanban-colonne.cible { outline: 2px dashed var(--accent); outline-offset: 2px; }
.kanban-colonne > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kanban-colonne > header h2 { font-size: var(--rf-t-m); margin: 0; }
.kanban-compte { font-size: var(--rf-t-s); color: var(--muted); border: 1px solid var(--line); border-radius: var(--rf-rayon-rond); padding: 1px 8px; }
.kanban-cartes { display: grid; gap: 8px; }
.kanban-carte { background: var(--raised); border: 1px solid var(--line); border-radius: var(--rf-rayon); padding: 10px; display: grid; gap: 6px; }
.kanban-carte[draggable="true"] { cursor: grab; }
.kanban-carte.glisse { opacity: 0.5; }
.kanban-carte.en-retard { border-color: var(--red); }
.kanban-carte .toolbar { gap: 4px; flex-wrap: wrap; }
.kanban-carte .toolbar button { font-size: var(--rf-t-s); padding: 3px 9px; min-height: 30px; }
.kanban-carte strong { font-size: var(--rf-t-m); line-height: 1.3; }
.kanban-pied { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: var(--rf-t-s); }
.en-retard .kanban-echeance { color: var(--red); font-weight: 650; }
.kanban-vide { font-size: var(--rf-t-s); margin: 4px 0; }
/* Kanban (V1, 30/09) : colonnes à hauteur bornée et défilement interne, en-tête collant avec compteur ;
   « Terminé » limité aux plus récentes, lien vers la liste ; sur mobile, une colonne à la fois (défilement
   horizontal aimanté) et une pastille par colonne pour y aller. */
.kanban-colonne { max-height: min(72vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 10px; scroll-margin: 12px; }
.kanban-colonne:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kanban-colonne > header { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 8px; margin: 0 0 4px; padding: 10px 0 8px; background: var(--surface); }
.kanban-colonne > header .kanban-compte { margin-top: 1px; }
.kanban-periode { grid-column: 1 / -1; font-size: var(--rf-t-xs); color: var(--muted); }
/* Lien vers la liste des terminées : toujours visible en pied de colonne, même quand la colonne défile. */
.kanban-voir { position: sticky; bottom: -10px; z-index: 1; display: flex; align-items: center; gap: 4px; min-height: 36px; margin: 8px 0 -10px; padding: 6px 0 10px; background: var(--surface); font-size: var(--rf-t-s); font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.kanban-carte .toolbar button { min-height: 32px; }
.kanban-onglets { display: none; }
@media (max-width: 760px) {
  .kanban { grid-auto-columns: calc(100% - 44px); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .kanban-colonne { scroll-snap-align: start; max-height: 68vh; }
  .kanban-onglets { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding: 2px 2px 6px; }
  .kanban-onglets button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: var(--rf-rayon); font-size: var(--rf-t-s); }
  .kanban-onglets .kanban-compte { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .kanban { scroll-snap-type: none; } }

/* Planning des projets (Gantt, S4, 28/09) : libellés à gauche, piste datée à droite, défilement horizontal. */
.gantt { border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); overflow-x: auto; margin-top: 14px; }
.gantt-defile { min-width: 760px; }
.gantt-ligne { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid var(--line); min-height: 44px; }
.gantt-ligne:last-child { border-bottom: 0; }
.gantt-libelle { padding: 8px 10px; display: grid; gap: 2px; align-content: center; border-right: 1px solid var(--line); position: sticky; left: 0; z-index: 3; background: var(--surface); }
.gantt-echelle .gantt-libelle { background: var(--raised); }
.gantt-libelle small { font-size: var(--rf-t-xs); }
.gantt-libelle button { justify-self: start; font-size: var(--rf-t-xs); min-height: 30px; padding: 3px 8px; }
.gantt-etape .gantt-libelle { padding-left: 24px; }
.gantt-piste { position: relative; }
.gantt-echelle { min-height: 30px; background: var(--raised); }
.gantt-echelle .gantt-piste span { position: absolute; top: 7px; font-size: var(--rf-t-xs); color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line); white-space: nowrap; }
.gantt-barre { position: absolute; top: 50%; transform: translateY(-50%); height: 14px; border-radius: var(--rf-rayon); }
.gantt-barre.projet { background: color-mix(in srgb, var(--accent) 35%, transparent); border: 1px solid var(--accent); height: 18px; }
.gantt-barre.etape { background: var(--raised); border: 1px solid var(--muted); }
.gantt-barre.etape.fait { background: var(--accent); border-color: var(--accent); }
.gantt-barre.retard, .gantt-jalon.retard { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.gantt-jalon { position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); background: var(--raised); border: 2px solid var(--text); }
.gantt-jalon.fait { background: var(--accent); border-color: var(--accent); }
.gantt-point { position: absolute; top: 50%; width: 12px; height: 12px; min-height: 0; padding: 0; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 2px solid var(--muted); z-index: 2; }
.gantt-point.fait { background: var(--accent); border-color: var(--accent); }
.gantt-point.retard { background: var(--red); border-color: var(--red); }
.gantt-point:hover, .gantt-point:focus-visible { transform: translate(-50%, -50%) scale(1.35); }
.gantt-aujourdhui { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--accent); z-index: 1; pointer-events: none; }
.gantt-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--rf-t-s); }
.gantt-legende .gantt-barre, .gantt-legende .gantt-jalon, .gantt-legende .gantt-point { position: static; transform: none; display: inline-block; width: 22px; }
.gantt-legende .gantt-jalon { width: 10px; height: 10px; transform: rotate(45deg); }
.gantt-legende .gantt-point { width: 10px; height: 10px; }
.gantt-aujourdhui-legende { display: inline-block; width: 0; height: 14px; border-left: 2px dashed var(--accent); }
.gantt-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.gantt-liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gantt-liste li button { min-height: 32px; padding: 4px 8px; text-align: left; }
.gantt-resume h2 { font-size: var(--rf-t-l); }
.etape-ligne { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto auto; gap: 8px; align-items: end; padding: 6px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .gantt-ligne { grid-template-columns: 150px 1fr; }
  .etape-ligne { grid-template-columns: 1fr 1fr; }
}
/* X1 (01/10) : page Projets dans le langage du kit (portal-v2/planning.js). Le planning est un SVG par ligne : positions
   en attributs SVG (x, width, cx… en % de la piste), aucun style en ligne (CSP « style-src 'self' »). Couleur = état,
   jamais seule (badge, infobulle, tableau) : à venir ou en cours = info, en retard = critique, terminé = gris atténué.
   La piste défile horizontalement (.pl-cadre, classe « uk-defile » du lot X0) ; en mobile, liste chronologique. */
.pl-planning { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); }
.pl-planning-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.pl-planning-tete h2 { margin: 0; font-size: var(--rf-t-l); }
.pl-planning-tete .gr-legende { margin: 0; }
.pl-cadre { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.pl-grille { display: grid; width: max-content; min-width: 100%; }
.pl-ligne { display: flex; border-bottom: 1px solid var(--line); }
.pl-ligne:last-child { border-bottom: 0; }
.pl-libelle { position: sticky; left: 0; z-index: 2; flex: 0 0 340px; width: 340px; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 12px; border-right: 1px solid var(--line); background: var(--surface); }
.pl-libelle > .uk-etat { flex: none; }
.pl-libelle-etape { padding-left: 46px; }
.pl-ligne-echelle, .pl-ligne-echelle .pl-libelle { background: var(--raised); }
.pl-ligne-echelle small { color: var(--muted); font-size: var(--rf-t-xs); }
.pl-nom { display: grid; flex: 1; min-width: 0; }
.pl-nom > span, .pl-nom > button, .pl-nom small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-nom > span { font-size: var(--rf-t-sm); }
.pl-nom small { color: var(--muted); font-size: var(--rf-t-xs); }
.pl-ouvrir { min-height: 24px; padding: 0; border: 0; border-radius: var(--rf-rayon); background: none; color: var(--text); font-weight: 650; text-align: left; cursor: pointer; }
.pl-ouvrir:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-ouvrir:focus-visible { outline-offset: 2px; }
.pl-piste { display: block; flex: 1 0 auto; }
.pl-trait { stroke: var(--line); stroke-width: 1; }
.pl-auj { stroke: var(--text); stroke-width: 2; }
.pl-axe { fill: var(--muted); font-size: var(--rf-t-micro); font-variant-numeric: tabular-nums; }
.pl-auj-texte { fill: var(--text); font-size: var(--rf-t-micro); font-weight: 650; }
.pl-enveloppe { fill: var(--muted); fill-opacity: .12; stroke: var(--muted); stroke-opacity: .7; stroke-width: 1; }
.pl-barre, .pl-point, .pl-jalon path { fill: currentColor; }
.pl-point, .pl-jalon path { stroke: var(--surface); stroke-width: 2; }
.pl-avenir, .pl-encours { color: var(--gr-info); }
.pl-retard { color: var(--gr-critique); }
.pl-fait { color: var(--muted); }
.pl-barre.pl-fait, .pl-point.pl-fait, .pl-jalon.pl-fait path { fill-opacity: .7; }
.pl-cible { fill: var(--text); fill-opacity: 0; cursor: pointer; outline: none; }
.pl-cible:hover, .pl-cible:focus { fill-opacity: .08; }
.pl-cible:focus-visible { stroke: var(--accent); stroke-width: 2; }
/* Clés de l'infobulle (trait de couleur) et de la légende (formes CSS). */
.gr-trait.pl-c-avenir, .gr-trait.pl-c-encours { color: var(--gr-info); }
.gr-trait.pl-c-retard { color: var(--gr-critique); }
.gr-trait.pl-c-fait { color: var(--muted); }
.pl-cle { display: inline-block; flex: none; width: 18px; height: 8px; border-radius: var(--rf-rayon); background: currentColor; color: var(--muted); }
.pl-cle.pl-avenir { color: var(--gr-info); } .pl-cle.pl-retard { color: var(--gr-critique); } .pl-cle.pl-fait { opacity: .7; }
.pl-cle-losange { width: 10px; height: 10px; border-radius: var(--rf-rayon-fin); transform: rotate(45deg); color: var(--text); }
.pl-cle-point { width: 10px; height: 10px; border-radius: 50%; color: var(--text); }
.pl-cle-enveloppe { height: 8px; border: 1px solid var(--muted); background: transparent; }
.pl-cle-auj { width: 0; height: 14px; border-left: 2px solid var(--text); border-radius: 0; background: none; }
/* Forme d'une étape ou d'un jalon devant son nom (même couleur que sa marque). */
.pl-forme { display: inline-block; flex: none; width: 14px; height: 6px; border-radius: var(--rf-rayon); background: currentColor; }
.pl-forme-jalon { width: 9px; height: 9px; margin: 0 2px; border-radius: var(--rf-rayon-fin); transform: rotate(45deg); }
.pl-forme.pl-fait { opacity: .7; }
.pl-chrono { display: none; }
.pl-donnees .gr-donnees { margin-top: 12px; }
.pl-mois { display: grid; gap: 8px; }
.pl-mois h3 { margin: 0; font-size: var(--rf-t-s); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pl-chrono-auj { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; color: var(--text); font-size: var(--rf-t-xs); font-weight: 650; }
.pl-chrono-auj::after { content: ""; flex: 1; border-top: 2px solid var(--text); }
.pl-chrono > .pl-chrono-auj { padding: 0; }
.pl-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-top: 24px; }
.pl-bloc .uk-rubrique { margin-top: 0; align-items: center; }
.pl-note { margin: 8px 0 0; color: var(--muted); font-size: var(--rf-t-s); }
.uk-fiche-section .pl-note { margin: 0; }
.pl-carte-nom { font-size: var(--rf-t-m); overflow-wrap: anywhere; }
.pl-cartes .uk-carte-html { display: grid; gap: 6px; }
.pl-cartes .uk-carte-html .gr-jauge { max-width: 120px; }
@media (max-width: 1279px) {
  .pl-libelle { flex-basis: 280px; width: 280px; }
  .pl-libelle-etape { padding-left: 36px; }
}
@media (max-width: 1100px) {
  .pl-libelle { flex-basis: 250px; width: 250px; }
  .pl-libelle-etape { padding-left: 24px; }
  .pl-libelle-projet .vg { display: none; }
}
@media (max-width: 640px) {
  .pl-cadre, .pl-donnees, .pl-planning-tete .gr-legende { display: none; }
  .pl-planning { padding: 14px; }
  .pl-chrono { display: grid; gap: 16px; margin-top: 12px; }
}
/* Projets et réunions (02/10) : réunions à venir et passées dans la fiche d'un projet. */
.pl-reunions .pl-sous-titre { margin: 2px 0 -4px; color: var(--text); font-size: var(--rf-t-s); font-weight: 650; }
.pl-reunions .toolbar { margin: 0; }
/* Fil d'un projet (02/10) : sections vides repliées (titre, pastille « Vide » ; contenu au clic), boutons, sélecteur. */
.pl-fil .toolbar, details.pl-fil-vide .toolbar { margin: 0; }
details.pl-fil-vide { display: block; }
details.pl-fil-vide > summary { display: flex; align-items: center; gap: 10px; min-height: 24px; cursor: pointer; list-style: none; }
details.pl-fil-vide > summary::-webkit-details-marker { display: none; }
details.pl-fil-vide > summary::before { content: '›'; color: var(--muted); font-size: var(--rf-t-xl); line-height: 1; transition: transform .15s; }
details.pl-fil-vide[open] > summary::before { transform: rotate(90deg); }
details.pl-fil-vide > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--rf-rayon); }
details.pl-fil-vide .pl-fil-titre { font-size: var(--rf-t-s); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
details.pl-fil-vide[open] > summary { margin-bottom: 10px; }
details.pl-fil-vide > .pl-note { margin: 0 0 10px; }
.pl-candidats { margin-top: 12px; max-height: 50vh; overflow: auto; }
/* Filtre « projet » des réunions (02/10) : en mobile, les pastilles défilent dans leur ligne sans élargir la page. */
.reunions-barre .uk-filtres { min-width: 0; max-width: 100%; }
/* Visibilité des projets (02/10) : marque « Interne » (équipe seulement) et case de l'éditeur. */
.pl-interne { margin-left: 6px; }
.pl-visible { margin-top: 6px; }
/* Ticket #43 (05/10) : « Actions & coûts » d'un projet (fiche large), fenêtre « Rattacher une action », sélecteur « Projet »
   d'une campagne ou d'un e-mail. Composants du kit ; ici, seulement l'espacement propre à ces blocs. */
.pa-section .uk-chiffres { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 14px; }
.pa-section .uk-chiffre { padding: 12px 14px; }
.pa-groupe { margin: 0 0 14px; }
.pa-groupe h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--rf-t-s); font-weight: 650; color: var(--muted); }
.pa-section .toolbar { margin: 4px 0 0; }
.pa-candidats { margin-top: 12px; }
/* Fenêtre « Rattacher une action » : le corps de la fiche est une grille ; sans largeur minimale nulle, la recherche et
   les pastilles l'élargissaient en mobile (défilement horizontal). Les pastilles défilent dans leur ligne. */
.pa-rattacher, .pa-rattacher .uk-filtres, .pa-rattacher .uk-pastilles, .pa-rattacher .uk-recherche-champ { min-width: 0; max-width: 100%; }
.pa-rattacher .uk-recherche-champ input { width: 100%; min-width: 0; }
.pa-projet-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; max-width: 720px; }
.pa-projet-champ { flex: 1 1 260px; min-width: 0; margin: 0; }
.pa-projet-champ select { width: 100%; }
.pa-projet-aide { flex-basis: 100%; margin: 0; }
/* Mobile : le total sur toute la largeur, services et actions côte à côte (montants lisibles, pas de colonne de 100 px). */
@media (max-width: 640px) {
  .pa-section .uk-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-section .uk-chiffre:first-child { grid-column: 1 / -1; }
}
.pa-projet p { margin: 0 0 6px; }
.rs-camp-projet { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--uk-rayon); background: var(--surface); }
.rs-camp-projet h3 { margin: 0 0 8px; font-size: var(--rf-t-m); }
.dp-total { margin: 0 0 12px; }
/* MCP personnel (I4) : adresse à copier dans l'assistant. */
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.copy-line code { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--bg); font-size: var(--rf-t-xs); }
.assistants-ia .notice p { margin: 6px 0 0; }
/* --- X2 (01/10) : Clients › Activités / Opportunités / Abonnements (équipe), Services du dossier, Mon compte ---------
   Composants du kit (ui-kit.css, vignette.css) ; ici, seulement ce qui est propre à ces écrans. */
/* Nombre d'éléments en tête de liste (le pager du kit ne le dit plus). */
.suivi-compte { margin: 0 0 10px; color: var(--muted); font-size: var(--rf-t-s); }
/* Mon compte : carte d'identité (vignette, nom, e-mail, rôle), puis Affichage et Accès en lignes, réglages à droite. */
.x2-identite { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.x2-identite h2 { margin: 0 0 4px; overflow-wrap: anywhere; }
.x2-identite p { margin: 0; overflow-wrap: anywhere; }
.x2-compte .reg-theme { margin: 0; }
.x2-compte .vg-action > button:not(.uk-interrupteur), .x2-compte .vg-action > .button { min-height: 36px; padding: 7px 12px; font-size: var(--rf-t-s); }
/* Ticket #77 (09/10) : Mon compte › Mes données (RGPD). */
.x2-compte .md-formats { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.x2-compte .md-formats > button, .x2-compte .vg-action > button.danger { min-height: 36px; padding: 7px 12px; font-size: var(--rf-t-s); }
.x2-compte .md-aide { margin: 8px 0 0; }
.md-form { display: grid; gap: 14px; }
.md-form fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.md-form fieldset legend { margin-bottom: 6px; font-weight: 650; }
.md-form .check { align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--rf-rayon); cursor: pointer; }
.md-form .check:has(input:checked) { background: var(--surface); }
.md-form .check > input { margin: 2px 0 0; }
.md-form input[type="radio"] { width: 18px; height: 18px; padding: 0; accent-color: var(--accent); flex: none; }
.md-form .check > span { display: grid; gap: 2px; }
.md-form .check small { color: var(--muted); }
/* Fiche « Connecter un assistant » : résultat de la copie de l'adresse (le toast passe sous la fiche). */
.x2-copie { margin: 8px 0 0; font-weight: 650; }
.x2-copie:empty { display: none; }
/* U1 (30/09) : en-tête « où suis-je » (fil d'Ariane, pastille de lentille), recherche Ctrl+K, écrans vides. */
.topbar-lieu { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fil-ariane { min-width: 0; }
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.fil-ariane li { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.fil-ariane li + li::before { content: "›"; content: "›" / ""; margin: 0 9px; color: var(--muted); }
.fil-ariane a { color: var(--muted); }
.fil-ariane a:hover { color: var(--accent); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--text); font-weight: 600; }
.pastille-lentille { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid var(--line); border-radius: var(--rf-rayon); color: var(--text); font-size: var(--rf-t-xs); font-weight: 600; white-space: nowrap; }
.pastille-lentille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pastille-lentille.est-client { background: var(--vue-client); border-color: var(--vue-client); color: var(--vue-client-ink); }
.pastille-lentille.est-client::before { background: var(--vue-client-ink); }
.lentilles button[data-id="client"][aria-pressed="true"] { background: var(--vue-client); color: var(--vue-client-ink); }
.shell.vue-client .client-context { box-shadow: inset 0 3px 0 var(--vue-client); }
.shell.vue-client .client-mode { color: var(--vue-client); }
.vide { padding: 36px 24px; }
.vide h2 { margin: 0 0 8px; color: var(--text); font-size: var(--rf-t-2xl); }
.vide p { max-width: 56ch; margin: 0 auto; }
.vide .toolbar { justify-content: center; margin-top: 18px; }
.explorer-items > .vide { grid-column: 1 / -1; }
/* Palette de recherche : mêmes règles dans admin-console.css (jetons de repli --line / --border). */
.palette-bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); color: var(--muted); font-size: var(--rf-t-s); white-space: nowrap; }
.palette-bouton:hover { color: var(--text); border-color: var(--accent); }
.palette-bouton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.palette-bouton kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--rf-rayon); font: var(--rf-t-micro) Instrument, Arial, sans-serif; }
dialog.palette { width: min(640px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 40px)); margin: 10vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); color: var(--text); box-shadow: 0 25px 80px var(--shadow); }
.palette-cadre { display: flex; flex-direction: column; max-height: inherit; }
.palette-champ { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.palette-champ:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
/* Le trait sous le champ tient lieu d’indicateur de focus (le cadre global ferait doublon). */
.palette .palette-champ input:focus-visible { outline: none; }
.palette-champ svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.palette-champ input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: transparent; color: var(--text); font-size: var(--rf-t-l); outline: none; }
.palette-fermer { flex-shrink: 0; min-height: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: transparent; color: var(--muted); font-size: var(--rf-t-micro); }
#palette-liste { flex: 1; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.palette [role="option"] { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--rf-rayon); cursor: pointer; }
.palette [role="option"][aria-selected="true"] { background: var(--raised); box-shadow: inset 3px 0 0 var(--accent); }
.palette-type { flex: 0 0 92px; color: var(--muted); font-size: var(--rf-t-micro); letter-spacing: 0.4px; text-transform: uppercase; }
.palette-libelle { display: grid; flex: 1; min-width: 0; }
.palette-libelle strong, .palette-libelle small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-libelle strong { font-weight: 600; }
.palette-libelle small { color: var(--muted); font-size: var(--rf-t-xs); }
.palette-onglet { color: var(--muted); }
.palette-rien { padding: 18px 12px; color: var(--muted); text-align: center; }
.palette-aide { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--rf-t-xs); }
.palette-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .palette-bouton { padding: 8px 10px; }
  .palette-bouton-texte, .palette-bouton kbd, .palette-aide { display: none; }
  .palette-type { flex-basis: 70px; font-size: var(--rf-t-micro); }
  dialog.palette { margin-top: 12px; }
  .topbar { align-items: flex-start; }
  /* Dossier client : le nom prend sa ligne, les lentilles et les liens passent dessous (plus de colonne écrasée). */
  .client-context-name { flex: 1 1 100%; }
}

/* --- Barre latérale (W0, 30/09) : menu commun (ui-kit.css), réduction au bureau, tiroir en mobile (R1) ------------ */
.shell { transition: grid-template-columns .2s ease; }
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } }
.sidebar .uk-barre-tete .brand { padding: 2px 4px 0; }
.account-card .theme-segment button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.account-card .theme-segment svg { width: 14px; height: 14px; }
.ms-carte[data-ms-cible] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ms-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 761px) {
  .menu-reduit .shell { grid-template-columns: 68px minmax(0, 1fr); }
  /* Ticket #34 (05/10) : la barre défile aussi en menu réduit (ui-kit.css › « Barre latérale ») ; le sous-menu flottant
     et les infobulles sont placés en position fixe par le kit. */
  .menu-reduit .sidebar { padding: 20px 8px 12px; gap: 16px; }
  .menu-reduit .space-label { justify-content: center; }
  .menu-reduit .client-exit { display: none; }
  .menu-reduit .account.account-card { padding: 4px; }
  .menu-reduit .account-card .profile-link { justify-content: center; padding: 8px 0; position: relative; }
  .menu-reduit .account-card .profile-name, .menu-reduit .account-card .profile-link > span[aria-hidden="true"]:last-child, .menu-reduit .account-admin, .menu-reduit .account-card .theme-segment { display: none; }
  .menu-reduit .account-card .account-controls { justify-content: center; }
}
/* R1 (10/10) : entre 761 et 980 px, la barre latérale prend sa place : deux colonnes de 240 px débordaient (Accueil). */
@media (max-width: 980px) { .grid.two { grid-template-columns: minmax(0, 1fr); } }
.grid > * { min-width: 0; }
/* R1 (10/10, ticket #93) : en mobile, la barre est un tiroir (ui-kit.css › « Menu en tiroir ») : plus de bande de menu. */

/* Mon entreprise (05/10, ticket #37) : en-tête de l'entreprise (un seul bouton principal), complétude en une ligne,
   sections Identité / Coordonnées / Réseaux (deux colonnes au plus, valeur en graisse normale), charte des e-mails en
   aperçu d'e-mail (couleurs repliées). Rendu : portal-v2/mon-entreprise.js. */
.ent { display: grid; gap: 18px; }
.ent .panel { min-width: 0; }
.ent-tete { display: grid; gap: 16px; }
.ent-tete-haut { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 16px; }
.ent-tete-logo { display: inline-flex; flex: none; }
.ent-tete-texte { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }
.ent-tete-texte h2 { margin: 0; font-size: var(--rf-t-2xl); overflow-wrap: break-word; }
.ent-tete-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--muted); font-size: var(--rf-t-s); }
.ent-tete-actions { display: flex; gap: 10px; margin-left: auto; }
.ent-completude { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ent-completude .ent-jauge { flex: none; width: 96px; height: 6px; }
.ent-completude p { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--muted); font-size: var(--rf-t-s); line-height: 1.75; }
.ent-completude strong { color: var(--text); font-weight: 650; }
.ent-insecable { white-space: nowrap; }
.ent-lien {
  display: inline-flex; align-items: center; min-height: 24px; margin: 0; padding: 0 1px; border: 0; border-radius: var(--rf-rayon); background: none;
  color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; vertical-align: baseline;
}
.ent-lien:hover { text-decoration-thickness: 2px; }
.ent-ajouter { margin-left: 4px; font-size: var(--rf-t-s); }
.ent-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.ent-bloc { display: grid; align-content: start; gap: 12px; container-type: inline-size; }
.ent-bloc-titre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--rf-t-l); }
.ent-bloc-titre small { margin-left: auto; color: var(--muted); font-family: inherit; font-size: var(--rf-t-s); font-weight: 400; }
.ent-faits { display: grid; margin: 0; }
.ent-faits > div { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); align-items: baseline; gap: 2px 14px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--line); }
.ent-faits > div:first-child { padding-top: 2px; border-top: 0; }
.ent-faits dt { color: var(--muted); font-size: var(--rf-t-s); }
.ent-faits dd { min-width: 0; margin: 0; font-size: var(--rf-t-sm); font-weight: 400; overflow-wrap: break-word; }
.ent-vide { color: var(--muted); }
@container (max-width: 360px) { .ent-faits > div { grid-template-columns: minmax(0, 1fr); } }
.ent-reseaux .uk-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border: 0; border-radius: 0; background: transparent; }
.ent-reseaux .uk-liste > li + li { border-top: 0; }
@container (max-width: 600px) { .ent-reseaux .uk-liste { grid-template-columns: minmax(0, 1fr); } }
.ent-reseau .vg-corps { gap: 2px; }
.ent-reseau .uk-lien-court, .ent-reseau-vide { font-size: var(--rf-t-s); }
.ent-reseau-absent .vg { opacity: .55; }
.ent-reseau-absent .vg-corps strong { color: var(--muted); font-weight: 600; }
.ent-charte { display: grid; gap: 16px; container-type: inline-size; }
.ent-charte .ent-charte-tete { justify-content: flex-start; align-items: center; margin: 0; }
.ent-charte-tete h2 { font-size: var(--rf-t-l); }
.ent-charte-action { margin-left: auto; }
.ent-charte-corps { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); align-items: start; gap: 24px; }
.ent-charte-corps.ent-charte-sans-apercu { grid-template-columns: minmax(0, 1fr); }
@container (max-width: 760px) { .ent-charte-corps { grid-template-columns: minmax(0, 1fr); } }
.ent-apercu { display: grid; gap: 8px; min-width: 0; max-width: 420px; margin: 0; }
.ent-apercu rf-apercu-email { border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.ent-apercu figcaption { color: var(--muted); font-size: var(--rf-t-xs); }
.ent-charte-infos { display: grid; gap: 14px; min-width: 0; }
.ent-couleurs { border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.ent-couleurs summary { min-height: 40px; padding: 9px 12px; border-radius: var(--rf-rayon); font-size: var(--rf-t-s); font-weight: 600; cursor: pointer; }
.ent-couleurs summary .uk-compte { margin-left: 8px; }
.ent-couleurs summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ent-couleurs[open] summary { border-bottom: 1px solid var(--line); border-radius: var(--rf-rayon) var(--rf-rayon) 0 0; }
.ent-couleurs-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px 14px; margin: 0; padding: 12px; list-style: none; }
.ent-couleurs-liste li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ent-couleurs-liste li > span { display: grid; min-width: 0; }
.ent-couleur-nom { font-size: var(--rf-t-s); }
.ent-couleurs-liste small { color: var(--muted); font-size: var(--rf-t-xs); font-variant-numeric: tabular-nums; }
.ent-teinte { width: 24px; height: 24px; flex: none; }
@media (max-width: 640px) {
  .ent-tete-actions { width: 100%; margin-left: 0; }
  .ent-tete-actions .primary { flex: 1; }
  .ent-charte-action { width: 100%; margin-left: 0; order: 3; }
}

/* R1 (01/10) : réseaux sociaux — comptes connectés et boutons « Connecter un réseau ». */
.rs-comptes { display: grid; gap: 8px; }
.rs-reseaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.rs-reseau { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--panel, transparent); color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.rs-reseau:hover { border-color: var(--accent); }
.rs-reseau:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-reseau:disabled { opacity: .6; cursor: progress; }

/* R2 (01/10) : calendrier des publications (réseaux sociaux). */
.rs-mois { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.rs-mois strong { min-width: 150px; text-align: center; text-transform: capitalize; }
.rs-calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rs-entete { padding: 4px 6px; color: var(--muted); font-size: var(--rf-t-xs); font-weight: 650; }
.rs-jour { min-height: 92px; padding: 6px; border: 1px solid var(--line); border-radius: var(--rf-rayon); display: grid; align-content: start; gap: 4px; min-width: 0; }
.rs-jour.rs-hors { opacity: .45; }
.rs-jour.rs-aujourdhui { border-color: var(--accent); }
.rs-num { font-size: var(--rf-t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rs-jsem { display: none; }
.rs-pub { display: grid; gap: 2px; width: 100%; min-width: 0; padding: 5px 6px; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--rf-rayon); background: var(--raised); color: inherit; font: inherit; font-size: var(--rf-t-xs); text-align: left; cursor: pointer; overflow: hidden; }
.rs-pub small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-pub:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rs-fuseau { margin-top: 10px; font-size: var(--rf-t-xs); }
/* Stories (01/10) : pastille marquée, aide du format ; réglage du fuseau horaire. */
.rs-pub b { font-weight: 650; font-size: var(--rf-t-micro); text-transform: uppercase; letter-spacing: .04em; }
.rs-format { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rs-format small[data-rs-story-aide] { flex-basis: 100%; }
.rs-reglage { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.rs-reglage label { flex: 1 1 260px; min-width: 0; }
/* R3 (01/10) : onglets de l'écran Réseaux, statistiques, commentaires, résultats d'une publication. */
.rs-onglets { margin: 4px 0 14px; }
.rs-periodes { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-stats h3, .rs-chiffres h3 { margin: 18px 0 8px; font-size: var(--rf-t-m); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rs-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rs-liste li { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rf-rayon); min-width: 0; overflow-wrap: anywhere; }
.rs-meilleures li { display: flex; gap: 10px; align-items: flex-start; }
.rs-vignette-pub { width: 56px; height: 56px; object-fit: cover; border-radius: var(--rf-rayon); flex: none; }
.rs-extrait { margin: 4px 0; font-size: var(--rf-t-s); }
.rs-pub b.rs-viral { color: var(--accent); }
.rs-com { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.rs-com:last-of-type { border-bottom: 0; }
.rs-com-fait { opacity: .78; }
.rs-com-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rs-com-etiquettes { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.rs-com-texte { margin: 6px 0; overflow-wrap: anywhere; }
.rs-com-pub { font-size: var(--rf-t-xs); margin: 0 0 6px; }
.rs-com-reponses { margin: 6px 0; padding-left: 14px; border-left: 2px solid var(--line); list-style: none; font-size: var(--rf-t-s); }
.rs-com-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-com-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-com-cite { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--line); overflow-wrap: anywhere; }
.rs-pages { display: flex; gap: 8px; justify-content: space-between; margin-top: 10px; }
.rs-accord { margin: 10px 0; }
/* Statistiques par réseau, publications sponsorisées. */
.rs-segments { margin: 0 0 12px; }
.rs-tableau { overflow-x: auto; max-width: 100%; }
.rs-tableau table { width: 100%; border-collapse: collapse; font-size: var(--rf-t-s); }
.rs-tableau th, .rs-tableau td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.rs-tableau th:first-child, .rs-tableau td:first-child { text-align: left; }
@media (max-width: 640px) { .rs-com-etiquettes { margin-left: 0; } }
.rs-texte { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); }
.rs-medias { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.rs-historique { margin: 6px 0 0; padding-left: 18px; font-size: var(--rf-t-s); color: var(--muted); }
@media (max-width: 760px) {
  .rs-calendrier { grid-template-columns: minmax(0, 1fr); }
  .rs-entete, .rs-jour:not(.rs-plein) { display: none; }
  .rs-jour { min-height: 0; }
  .rs-jsem { display: inline; }
}
/* C1 (01/10) : import et bibliothèque des médias publiés (publications). */
.rs-import { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 10px; }
.rs-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.rs-import label.button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 12px; max-height: 260px; overflow: auto; }
.rs-vignette { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); color: inherit; cursor: pointer; }
.rs-vignette img { display: block; width: 100%; height: 72px; object-fit: cover; border-radius: var(--rf-rayon); }
.rs-vignette small { font-size: var(--rf-t-micro); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* U2 (01/10) : fiche « Suivi » d'un élément À traiter (attribution partagée, report personnel). */
.a-traiter-suivi { display: grid; gap: 10px; margin-bottom: 18px; }
.a-traiter-suivi h3 { margin: 0; font-size: var(--rf-t-l); }
.a-traiter-suivi p { margin: 0; }
.a-traiter-suivi form, form.a-traiter-suivi { display: grid; gap: 8px; }
.a-traiter-reports { display: flex; flex-wrap: wrap; gap: 8px; }

/* Campagnes (02/10/2026) : couleur de la campagne en liseré haut des pastilles (le liseré gauche reste l'état),
   filtre du calendrier, liste, chronologie et choix de couleur (teintes vg-t-* de vignette.css). */
.rs-pub.rs-camp { box-shadow: inset 0 3px 0 var(--vg-encre); }
.rs-filtre { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: var(--rf-t-sm); }
.rs-filtre select { min-width: 200px; }
.rs-camp-liste { margin: 10px 0; }
.rs-camp-archives { margin-top: 14px; }
.rs-camp-tete { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.rs-camp-tete h2 { margin: 0; }
.rs-camp-tete p { margin: 2px 0 0; }
.rs-camp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.rs-camp-jour h3 { margin: 18px 0 6px; font-size: var(--rf-t-sm); text-transform: capitalize; color: var(--muted); }
.rs-camp-chrono { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rs-camp-ligne { display: grid; grid-template-columns: 56px 92px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); }
.rs-camp-heure { font-weight: 650; font-variant-numeric: tabular-nums; }
.rs-camp-type { font-size: var(--rf-t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rs-camp-corps { display: grid; gap: 2px; min-width: 0; }
.rs-camp-corps > button, .rs-camp-corps > a { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-camp-corps > button.lien { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.rs-camp-corps > button.lien:hover { text-decoration: underline; }
.rs-camp-etat { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.rs-camp-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-camp-couleur { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--rf-rayon-rond); background: var(--vg-fond); color: var(--vg-encre); cursor: pointer; }
.rs-camp-couleur:has(input:checked) { outline: 2px solid var(--vg-encre); }
.rs-camp-a-valider { display: grid; gap: 6px; max-height: 45vh; overflow: auto; }
@media (max-width: 720px) {
  .rs-camp-ligne { grid-template-columns: 48px minmax(0, 1fr); }
  .rs-camp-type { grid-column: 1; }
  .rs-camp-corps, .rs-camp-etat { grid-column: 2; justify-content: flex-start; }
  .rs-camp-ligne > button.small { grid-column: 2; justify-self: start; }
}

/* Objectifs de campagne (04/10) : barre SVG (réel, repères cible basse et attendu à date). */
.rs-objectifs { margin: 14px 0; }
.rs-objectifs .section-title h3 { margin: 0; }
.rs-obj-liste { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 12px; }
.rs-obj-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rs-obj-barre { display: block; width: 100%; height: 12px; margin: 6px 0 2px; }
.rs-obj-fond { fill: var(--line); }
.rs-obj-reel { fill: var(--gr-bon); }
.rs-obj-reel.rs-obj-attention { fill: var(--gr-attention); }
.rs-obj-reel.rs-obj-critique { fill: var(--gr-critique); }
.rs-obj-reel.rs-obj-neutre, .rs-obj-reel.rs-obj-info { fill: var(--muted); }
.rs-obj-attendu { fill: var(--text); opacity: .55; }
.rs-obj-bas { fill: var(--text); }
.rs-obj-form { display: grid; gap: 10px; }
.rs-obj-ligne { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 1fr; gap: 8px; align-items: end; margin: 0; }
@media (max-width: 720px) { .rs-obj-ligne { grid-template-columns: 1fr 1fr; } }

/* Ticket #31 (04/10) : états des publications par familles (publications-etats.js) et aperçu des supports
   (publications-apercu.js). Teintes du kit ; encre plus foncée en thème clair pour le contraste des pictogrammes.
   L'état est toujours écrit en clair à côté (la couleur ne porte jamais seule l'information). */
:root { --rs-vert: var(--rf-bon); --rs-ambre: var(--rf-attention); --rs-orange: var(--rf-serieux); }
.rs-e-brouillon, .rs-e-annulee, .rs-e-retiree { --rs-teinte: var(--muted); }
.rs-e-a-reprendre { --rs-teinte: var(--rs-orange); }
.rs-e-a-valider, .rs-e-a-revalider, .rs-e-en-attente-envoi, .rs-e-a-faire { --rs-teinte: var(--rs-ambre); }
.rs-e-programmee, .rs-e-publiee, .rs-e-partielle { --rs-teinte: var(--rs-vert); }
.rs-e-echec, .rs-e-programmation-bloquee { --rs-teinte: var(--red); }
.rs-etat-picto { width: 14px; height: 14px; flex: none; color: var(--rs-teinte); }
.rs-etat { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.rs-etat-detail { color: var(--muted); }
.rs-badge-etat { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.rs-fiche-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-revalidation { display: flex; align-items: center; gap: 8px; }
.rs-revalidation .rs-etat-picto { --rs-teinte: var(--rs-ambre); width: 16px; height: 16px; }
/* Pastilles du calendrier : brouillon en pointillés, à valider ambre plein, à revalider ambre en contour, programmée
   verte en contour, publiée verte pleine, partielle verte puis ambre, échec rouge, inactives estompées et barrées. */
.rs-pub { border-left-color: var(--rs-teinte); }
.rs-pub-tete { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rs-pub-heure { font-weight: 650; }
.rs-pub-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-pub.rs-e-brouillon { border-style: dashed; background: transparent; }
.rs-pub.rs-e-a-valider { background: color-mix(in srgb, var(--gr-attention) 20%, var(--raised)); border-color: color-mix(in srgb, var(--gr-attention) 55%, var(--line)); border-left-color: var(--rs-ambre); }
.rs-pub.rs-e-a-revalider { background: var(--surface); border-color: var(--rs-ambre); }
.rs-pub.rs-e-programmee { background: var(--surface); border-color: var(--rs-vert); }
.rs-pub.rs-e-publiee { background: color-mix(in srgb, var(--gr-bon) 20%, var(--raised)); border-color: color-mix(in srgb, var(--gr-bon) 55%, var(--line)); border-left-color: var(--rs-vert); }
.rs-pub.rs-e-partielle { background: linear-gradient(90deg, color-mix(in srgb, var(--gr-bon) 20%, var(--raised)) 55%, color-mix(in srgb, var(--gr-attention) 24%, var(--raised))); border-color: color-mix(in srgb, var(--gr-attention) 55%, var(--line)); border-left-color: var(--rs-vert); }
.rs-pub.rs-e-a-faire { background: var(--surface); border-color: var(--rs-ambre); border-left-width: 3px; }
.rs-pub.rs-e-en-attente-envoi { background: var(--surface); border-color: var(--rs-ambre); border-style: dashed; border-left-style: solid; }
.rs-pub.rs-e-echec, .rs-pub.rs-e-programmation-bloquee { background: color-mix(in srgb, var(--gr-critique) 18%, var(--raised)); border-color: var(--red); }
.rs-pub.rs-e-annulee, .rs-pub.rs-e-retiree { opacity: .62; }
.rs-pub.rs-e-annulee .rs-pub-texte, .rs-pub.rs-e-retiree .rs-pub-texte { text-decoration: line-through; }
.rs-pub.rs-story { border-style: dashed; border-left-style: solid; }
/* Légende : pastilles cliquables (filtre combinable), échantillon de la pastille, compteur du mois. */
.rs-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.rs-legende-pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); color: var(--text); font: inherit; font-size: var(--rf-t-s); cursor: pointer; }
.rs-legende-pastille:hover { border-color: var(--muted); }
.rs-legende-pastille:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-legende-pastille[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--raised); }
.rs-legende-pastille[data-vide] { color: var(--muted); }
.rs-legende-pastille .rs-etat::before { content: ""; width: 12px; height: 12px; flex: none; border: 1px solid var(--rs-teinte); border-radius: var(--rf-rayon); }
.rs-legende-pastille .rs-e-brouillon::before { border-style: dashed; }
.rs-legende-pastille .rs-e-a-valider::before { background: color-mix(in srgb, var(--gr-attention) 45%, var(--surface)); }
.rs-legende-pastille .rs-e-publiee::before { background: color-mix(in srgb, var(--gr-bon) 45%, var(--surface)); }
.rs-legende-pastille .rs-e-partielle::before { background: linear-gradient(90deg, color-mix(in srgb, var(--gr-bon) 45%, var(--surface)) 50%, color-mix(in srgb, var(--gr-attention) 45%, var(--surface)) 50%); }
.rs-legende-pastille .rs-e-en-attente-envoi::before { border-style: dashed; }
.rs-legende-pastille .rs-e-echec::before, .rs-legende-pastille .rs-e-programmation-bloquee::before { background: color-mix(in srgb, var(--gr-critique) 40%, var(--surface)); }
.rs-legende-pastille .rs-e-annulee::before, .rs-legende-pastille .rs-e-retiree::before { opacity: .6; }
.rs-legende-pastille .rs-e-annulee .rs-etat-libelle, .rs-legende-pastille .rs-e-retiree .rs-etat-libelle { text-decoration: line-through; }
/* Résumé annoncé aux lecteurs d'écran (« 4 publications affichées »), masqué à l'écran. */
.rs-pub-resume { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rs-legende-n { min-width: 22px; padding: 0 6px; border-radius: var(--rf-rayon-rond); background: var(--raised); font-variant-numeric: tabular-nums; font-weight: 650; text-align: center; }
.rs-legende-tout { margin-left: 2px; }
/* Vignettes des supports : carré, image entière sur fond neutre (texte des visuels jamais coupé), numéro, vidéo. */
.rs-media-btn { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--bg); color: var(--text); overflow: hidden; cursor: zoom-in; }
.rs-media-btn:hover { border-color: var(--accent); }
.rs-media-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-media-btn .rs-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.rs-media-cadre { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 10px; color: var(--muted); font-size: var(--rf-t-xs); }
.rs-media-lecture { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--text); }
.rs-media-lecture svg { width: 20px; height: 20px; }
.rs-media-video { cursor: pointer; }
.rs-media-num { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--rf-rayon-rond); background: var(--surface); color: var(--text); font-size: var(--rf-t-xs); font-weight: 650; line-height: 20px; text-align: center; }
.rs-media-btn.rs-couverture { width: 112px; aspect-ratio: 9 / 16; margin-bottom: 10px; }
/* Visionneuse : couche plein cadre dans la fiche (#dialog), le reste de la fiche inerte pendant l'aperçu. */
dialog.rs-apercu-ouvert { overflow: hidden; }
.rs-visionneuse { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-rows: auto minmax(0, 78vh) auto; align-content: center; gap: 10px; padding: 16px; background: var(--bg); color: var(--text); }
.rs-vis-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rs-vis-titre { margin: 0; }
.rs-vis-compteur { font-variant-numeric: tabular-nums; }
.rs-vis-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rs-vis-scene { position: relative; min-height: 0; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); overflow: hidden; }
/* Média centré, entier, jamais agrandi au-delà de sa taille ni de la scène (pourcentages résolus sur la scène). */
.rs-vis-media { position: absolute; top: 50%; left: 50%; display: block; max-width: calc(100% - 16px); max-height: calc(100% - 16px); object-fit: contain; transform: translate(-50%, -50%); }
.rs-vis-alerte { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); text-align: center; }
.rs-vis-nav { display: flex; justify-content: center; gap: 10px; }
.rs-vis-nav button { display: inline-flex; align-items: center; gap: 4px; }
.rs-vis-nav svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .rs-visionneuse { padding: 10px; } .rs-vis-actions { margin-left: 0; } }
/* Ticket #32 (04/10) : tentatives bloquées (espace Site › Sécurité) et rapport du mois imprimable. */
.site-attaques .uk-liste { border: 0; background: transparent; }
.site-attaques .uk-liste .vg-ligne { padding-left: 0; padding-right: 0; }
.site-attaques .vg-corps small, .site-rapport .vg-corps small { display: block; -webkit-line-clamp: unset; overflow: visible; }
.site-rapport { display: grid; gap: 14px; }
.site-rapport h2 { margin: 8px 0 0; font-size: var(--rf-t-xl); }
.site-rapport .uk-liste { border: 0; background: transparent; }
.site-rapport .uk-liste .vg-ligne { padding-left: 0; padding-right: 0; }
.site-rapport-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.site-rapport-tete h1 { margin: 2px 0; }
.site-rapport-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.site-rapport-actions .is-actif { border-color: var(--accent); }
.site-rapport-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.site-rapport-chiffres div { padding: 14px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.site-rapport-chiffres dt { font-size: var(--rf-t-xs); color: var(--muted); }
.site-rapport-chiffres dd { margin: 4px 0 0; font: 600 var(--rf-t-3xl) Archivo, Arial, sans-serif; }
.site-rapport-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .site-rapport-duo { grid-template-columns: 1fr; } }
@media print {
  @page { margin: 14mm; }
  body { background: var(--rf-papier-fond) !important; }
  body * { visibility: hidden; }
  .site-rapport, .site-rapport * { visibility: visible; }
  .site-rapport { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0 !important; box-shadow: none !important; background: var(--rf-papier-fond) !important; color: var(--rf-papier-texte) !important; }
  .site-rapport .muted, .site-rapport dt, .site-rapport small { color: var(--rf-papier-doux) !important; }
  .site-rapport-chiffres div { border-color: var(--rf-papier-ligne) !important; }
  .site-rapport-actions { display: none !important; }
  .site-rapport .gr-jauge .gr-piste { fill: var(--rf-papier-ligne) !important; }
  .site-rapport .gr-barres .gr-serie { color: var(--rf-papier-accent) !important; }
  .site-rapport .gr-barre-valeur { color: var(--rf-papier-texte) !important; }
  .site-rapport .uk-pilule, .site-rapport .uk-etat { color: var(--rf-papier-texte) !important; background: var(--rf-papier-fond) !important; border-color: var(--rf-papier-ligne) !important; }
  .site-rapport .gr-barres li, .site-rapport .vg-ligne, .site-rapport-chiffres div { break-inside: avoid; }
}
/* Ticket #34 (05/10) : fiche d'une publication au kit (fiche latérale) : sections, chiffres clés des résultats, une ligne
   par réseau (« Voir ↗ » et menu « ⋯ »), historique replié. */
.uk-fenetre-corps > .uk-fiche-section { margin: 0 0 16px; }
.uk-fenetre-corps > .uk-fiche-section:last-child { margin-bottom: 0; }
.rs-contenu .rs-texte { margin: 0; }
.rs-chiffres h3, .rs-fiche-reseaux h3 { margin: 0; }
/* #35 : repère à côté du titre « Résultats », écrit normalement (le titre de section est en capitales). */
.rs-chiffres > h3 .uk-etat { text-transform: none; letter-spacing: normal; font-size: var(--rf-t-xs); }
.rs-chiffres .uk-chiffres { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 0; }
.rs-chiffres .uk-chiffre { padding: 12px 14px; }
.rs-chiffres .uk-chiffre-valeur { font-size: var(--rf-t-2xl); }
.rs-fiche-reseaux .uk-liste .vg-ligne { padding: 10px 12px; }
.rs-fiche-reseaux .vg-corps small { display: block; white-space: normal; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.rs-reseau-actions { display: inline-flex; align-items: center; gap: 4px; }
.rs-reseau-actions .button.small { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.rs-voir-picto { width: 14px; height: 14px; }
.rs-reseau-retire .vg-corps strong { color: var(--muted); }
.rs-historique-repli { border-bottom: 0; padding-bottom: 0; }
.rs-historique-repli > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-weight: 650; }
.rs-comptes-prevus { margin: 0 0 14px; }
.rs-fiche-reseaux .vg-corps small { color: var(--muted); font-size: var(--rf-t-s); font-weight: 400; }

/* Boosts dans les publications (05/10) : marque fusée de la pastille, section Publicité de la fiche, réglages. */
.rs-boost-marque { display: inline-flex; align-items: center; color: var(--accent, currentColor); }
.rs-boost-marque.rs-boost-pause, .rs-boost-marque.rs-boost-a-lancer { opacity: .75; }
.rs-boost-marque.rs-boost-prevu { opacity: .55; }
.rs-boost-picto { width: 14px; height: 14px; flex: none; }
.rs-boost-badge-fusee { display: inline-flex; align-items: center; gap: 4px; color: var(--accent, currentColor); }
.rs-boost-badge-fusee .rs-boost-badge { margin-left: 0; }
.rs-lecteur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rs-boost-badge { margin-left: 6px; }
.rs-publicite .rs-boost-reglage { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.rs-publicite .rs-boost-reglage > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rs-boost-prevu .rs-boost-champs { display: grid; gap: 8px; margin-top: 6px; }
/* Ciblage granulaire (26/10, #243) : cartes de gabarit, « Affiner », communes en colonnes, résumé. */
.rs-gabarits { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.rs-gabarit { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); cursor: pointer; }
.rs-gabarit:has(input:checked) { border-color: var(--accent, currentColor); box-shadow: 0 0 0 1px var(--accent, currentColor) inset; }
.rs-gabarit input { margin-top: 3px; }
.rs-gabarit small { grid-column: 2; display: block; font-weight: 400; }
.rs-affiner { margin: 10px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.rs-affiner > summary { cursor: pointer; font-weight: 600; }
.rs-affiner fieldset { margin-top: 8px; }
.rs-zone-communes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; margin-top: 6px; }
.rs-zone-communes small { grid-column: 1 / -1; }
.rs-tranches { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rs-boost-resume { font-weight: 500; }
.rs-boost-prevu .rs-erreur { color: var(--danger); }
.rs-filtre-boost { margin: 6px 0; }
.rs-filtre-boost .button { display: inline-flex; align-items: center; gap: 6px; }
/* Ticket #63 (07/10) : Services & facturation resserrée. En haut, « Mes services » et « Mes paiements » côte à côte
   (une colonne sous 900 px) ; « Pour vous » ; catalogue en onglets. Les pastilles défilent dans leur ligne (barre du kit). */
.sf-haut { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-bottom: 18px; }
.sf-colonne { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sf-colonne .section-title { margin: 0; }
.sf-colonne .uk-liste + .block .uk-liste, .sf-colonne .block + .block .uk-liste { margin-top: 0; }
.sf-colonne .block-state { margin: 0; }
.sf-plus { margin: 0; display: flex; justify-content: flex-end; }
.sf-reco { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; border-left: 3px solid var(--vt-conseil); }
.sf-reco .section-title { margin: 0; align-items: flex-start; }
.sf-reco .section-title small { display: block; margin-top: 2px; }
.sf-reco .vg-ligne { min-width: 0; }
.sf-catalogue .uk-onglets { margin-bottom: 12px; }
.sf-catalogue .uk-panneau:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sf-note { margin: 0 0 8px; }
.sf-pastilles { overflow-x: auto; margin-bottom: 6px; }
.sf-pastilles .uk-pastilles { flex-wrap: nowrap; }
.sf-pastilles .uk-pastille { white-space: nowrap; }
.vt-options-liste .vg-ligne.sf-pris { opacity: .82; }
.sf-diag .vt-anneau { margin-top: 6px; }
@media (max-width: 900px) { .sf-haut { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  /* Les deux chiffres côte à côte, sans vignette. */
  .sf-chiffres .uk-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sf-chiffres .uk-chiffre { padding: 12px; }
  .sf-chiffres .uk-chiffre .vg { display: none; }
  .sf-reco .section-title { flex-wrap: wrap; }
  /* Ligne d'offre en mobile : nom et bénéfice sur toute la largeur, prix puis bouton dessous (rien de coupé à 390 px). */
  .sf-reco .vg-ligne, .sf-catalogue .vg-ligne { flex-wrap: wrap; }
  .sf-reco .vg-ligne .vg-corps, .sf-catalogue .vg-ligne .vg-corps { flex: 1 1 calc(100% - 56px); }
  .sf-reco .vg-ligne .vg-etat, .sf-catalogue .vg-ligne .vg-etat { margin-left: 50px; }
  .sf-reco .vg-ligne .vg-action, .sf-catalogue .vg-ligne .vg-action { margin-left: auto; }
  .sf-haut .vg-corps strong, .sf-reco .vg-corps strong, .sf-catalogue .vg-corps strong { white-space: normal; }
}

/* Kit de démarrage (ticket #79) : carte de Mes services sur toute la largeur, liste des contenus, compte à rebours. */
.kit-grille { grid-template-columns: 1fr; margin-bottom: 18px; }
.kit-carte .kit-resume { margin: 10px 0 0; font-size: var(--rf-t-s); color: var(--muted); }
.kit-rebours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--gr-bon); border-radius: var(--rf-rayon); background: var(--surface); }
.kit-rebours strong { font-size: var(--rf-t-l); }
.kit-rebours span { color: var(--muted); font-size: var(--rf-t-s); }
.kit-rebours-attention { border-left-color: var(--gr-attention); }
.kit-rebours-critique { border-left-color: var(--gr-critique); }
.kit-elements { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.kit-element { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); min-width: 0; }
.kit-element-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kit-element-tete > div { min-width: 0; }
.kit-aide { display: block; margin-top: 2px; }
.kit-detail { margin: 6px 0 0; font-size: var(--rf-t-s); color: var(--muted); overflow-wrap: anywhere; }
.kit-texte { white-space: pre-line; }
.kit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kit-depot { position: relative; overflow: hidden; cursor: pointer; }
.kit-fichier { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kit-equipe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-zone textarea { min-height: 180px; }
@media (max-width: 640px) { .kit-element-tete { flex-direction: column; } }
.kit-facultatif { font-size: var(--rf-t-s); }

/* Parrainage (ticket #83) : lien à partager, frise d'avancement de chaque filleul. */
.pa-partage .pa-code { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 6px; }
.pa-partage .pa-code strong { font-size: var(--rf-t-xl); letter-spacing: .04em; }
.pa-partage .pa-lien input { width: 100%; max-width: 560px; }
.pa-partage .pa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-filleul { padding-bottom: 8px; }
.pa-frise { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 52px; padding: 0; list-style: none; }
.pa-etape { display: flex; flex-direction: column; min-width: 92px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--rf-rayon); color: var(--muted); font-size: var(--rf-t-xs); }
.pa-etape small { font-size: var(--rf-t-micro); }
.pa-etape.pa-faite { color: var(--text); border-color: var(--gr-bon); }
.pa-etape.pa-courante { border-width: 2px; font-weight: 600; }
@media (max-width: 640px) { .pa-frise { margin-left: 0; } .pa-etape { min-width: 0; flex: 1 1 40%; } }
/* Bilans (ticket #42) : page « Mes services › Bilans ». Les deux colonnes (sites, flux) se resserrent sur petit écran
   (le tableau défile dans son cadre) ; recommandations en liste aérée ; aucune couleur ici (jetons du kit). */
.bl-grille > .panel { min-width: 0; }
.bl-recos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bl-reco { border-top: 1px solid var(--line); padding-top: 12px; }
.bl-reco:first-child { border-top: 0; padding-top: 0; }
.bl-reco p { margin: 0 0 4px; }
.bl-synthese { white-space: pre-line; }
.bl-champs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bl-champ { min-width: 0; }
.bl-titre { flex-wrap: wrap; gap: 8px; }

/* Accompagnement, refonte R2b (ticket #96, maquettes Main, Accompagnement-equipe, Accompagnement-mobile) : en-tête variante C,
   bandeau du dossier, parcours, colonnes « Où vous en êtes » / « À suivre », journal, tableaux de l'équipe, Map en cartes.
   Composants : le kit (schemaEtapes, aVousDeJouer, tuileObjectif, carte) ; ici la mise en page seulement, jetons du kit. */
.acc-entete h1 { font-size: var(--rf-t-4xl); letter-spacing: -.01em; }
.acc-dossier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 20px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); font-size: var(--rf-t-sm); color: var(--muted); }
.acc-dossier p { margin: 0; }
.acc-dossier strong { color: var(--text); }
.acc-parcours { display: grid; gap: 18px; margin: 0 0 24px; padding: 24px 28px; }
.acc-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.acc-tete h2, .acc-tete h3 { margin: 0; font: 600 var(--rf-t-xl)/1.3 var(--rf-police-titre); }
.acc-tete > p { margin: 0; font-size: var(--rf-t-s); }
.acc-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.acc-onglets { margin-bottom: 20px; }
.acc-onglet { display: grid; gap: 24px; }
.acc-onglet > .uk-aide-contexte { margin: -8px 0 -12px; }
.acc-colonnes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.acc-principal { flex: 2 1 540px; min-width: 0; display: grid; gap: 24px; }
.acc-suivre { flex: 1 1 300px; min-width: 0; display: grid; gap: 14px; }
.acc-suivre > h2 { margin: 0; font: 600 var(--rf-t-xl)/1.3 var(--rf-police-titre); }
.acc-section { display: grid; gap: 14px; min-width: 0; }
.acc-section.panel { padding: 18px 20px; }
.acc-carte { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); }
.acc-carte h3 { margin: 0; font-size: var(--rf-t-m); font-weight: 650; }
.acc-carte p { margin: 0; }
.acc-surtitre { color: var(--muted); font-size: var(--rf-t-xs); letter-spacing: .06em; text-transform: uppercase; }
.acc-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-rdv { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.acc-calendrier { display: grid; justify-items: center; width: 48px; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--rf-rayon); line-height: 1.1; }
.acc-calendrier small { color: var(--muted); font-size: var(--rf-t-micro); text-transform: uppercase; }
.acc-calendrier strong { font: 650 var(--rf-t-xl)/1.1 var(--rf-police-titre); }
.acc-faits { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-faits > li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.acc-faits > li:first-child { border-top: 0; }
.acc-date { flex: none; width: 72px; color: var(--muted); font-size: var(--rf-t-s); }
.acc-criteres { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
/* Six tuiles de l'audit : 3 × 2 au bureau, 2 × 3 sur tablette, une colonne sur téléphone (relecture de !132). */
.uk-objectifs.acc-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .uk-objectifs.acc-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uk-objectifs.acc-six { grid-template-columns: minmax(0, 1fr); } }
/* Le texte réservé aux lecteurs d'écran (position absolue) reste dans la zone qui défile : pas de débordement à 390 px. */
.acc-section .table-wrap { position: relative; }
.acc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.acc-table th, .acc-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.acc-table thead th { color: var(--muted); font-size: var(--rf-t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.acc-table tbody th { background: transparent; color: var(--text); font-size: var(--rf-t-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
.acc-table td { font-size: var(--rf-t-sm); }
.acc-section .uk-liste .vg-corps strong { white-space: normal; overflow: visible; }
.acc-table tbody th small { display: block; font-weight: 400; }
.acc-cellule-action { text-align: right; white-space: nowrap; }
.acc-form { display: grid; gap: 14px; }
.acc-champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.acc-champs-2 > legend { grid-column: 1 / -1; padding: 0; font-weight: 600; }
.acc-fil { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-commentaire { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.acc-commentaire.acc-client { border-left: 3px solid var(--accent); }
.acc-commentaire p { margin: 0 0 4px; white-space: pre-line; }
.acc-etat-map { margin: -6px 0 0; color: var(--muted); }
.acc-choisir { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--rf-rayon); cursor: pointer; font-weight: 600; font-size: var(--rf-t-sm); }
.acc-choisir:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.acc-choisir:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-barre-choix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); }
.acc-barre-choix p { margin: 0; flex: 1 1 320px; color: var(--muted); font-size: var(--rf-t-sm); }
.acc-provisoire { font-size: var(--rf-t-s); }
@media (max-width: 760px) {
  .acc-entete h1 { font-size: var(--rf-t-3xl); }
  .acc-parcours { padding: 16px; }
  .acc-onglets .uk-onglets { gap: 6px; }
  .acc-champs-2 { grid-template-columns: 1fr; }
  .acc-gestes { margin-left: 0; }
  .acc-barre-choix .primary { width: 100%; }
}
.acc-donnees > summary { cursor: pointer; color: var(--muted); font-size: var(--rf-t-sm); }
.acc-donnees[open] > summary { margin-bottom: 10px; }

/* R3 (10/10, ticket #95) : rubrique Offres (maquettes Offres et Fiche-offre), Services & paiements, Demandes & devis.
   Composants du kit (carte, grilleCartes, onglets « uk-segmente », pastilles, tableau, encart, schemaEtapes) ; ici la mise
   en page seulement, jetons de /jetons.css. */
.of-entete .uk-entete-actions { align-self: flex-end; min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .of-entete .uk-entete-actions { width: 100%; } }
.of-note { margin: 0 0 12px; font-size: var(--rf-t-s); }
.uk-grille-cartes.of-grille { margin: 0 0 28px; }
.of-carte .uk-objet-texte { flex: 1 1 auto; }
.uk-objet.of-formule { gap: 12px; padding: 24px; }
/* Maquette : nom et « Votre formule » sur la même ligne (la pastille d'état se place en haut à droite). */
.of-formule .uk-objet-tete, .of-accompagnement .uk-objet-tete { position: absolute; top: 22px; right: 20px; }
.of-formule .uk-objet-titre, .of-accompagnement .uk-objet-surtitre { padding-right: 132px; }
.of-formule .uk-objet-titre { font-size: var(--rf-t-2xl); font-weight: 700; }
.of-formule .uk-objet-pied { flex-direction: column; align-items: stretch; gap: 14px; }
.of-formule .uk-objet-mesure { font-size: var(--rf-t-3xl); font-weight: 800; }
.of-formule .uk-objet-actions { justify-content: stretch; }
.of-formule .uk-objet-actions > :is(button, a) { flex: 1 1 auto; min-height: 44px; }
.of-option .uk-objet-mesure, .of-accompagnement .uk-objet-mesure { font-size: var(--rf-t-xl); font-weight: 700; }
.of-comparer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.of-comparer h2, .of-parcours h2 { margin: 0; font: 600 var(--rf-t-xl)/1.3 var(--rf-police-titre); }
.of-comparatif .uk-tableau { min-width: 640px; }
.of-comparatif .uk-tableau thead th:not(:first-child) { text-align: center; color: var(--text); font-family: var(--rf-police-titre); letter-spacing: 0; text-transform: none; font-size: var(--rf-t-sm); }
.of-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
.of-filtres .uk-filtres { flex: 1 1 420px; min-width: 0; }
.of-filtres .of-note { margin: 0 0 0 auto; }
.of-plus { display: flex; justify-content: center; margin: 0 0 24px; }
.of-echelle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; font-size: var(--rf-t-s); }
.of-parcours { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--surface); }
.of-parcours p { margin: 0; }
.of-lecture { margin: 0 0 16px; }
/* Fiche d'une offre : prix, mise en place et engagement en grand, puis l'encart des prérequis. */
.uk-faits.of-chiffres { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 28px; margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.uk-faits.of-chiffres > div { display: grid; justify-content: start; gap: 2px; }
.uk-faits.of-chiffres dt { font-size: var(--rf-t-xs); }
.uk-faits.of-chiffres dd { text-align: left; font: 800 var(--rf-t-3xl)/1.1 var(--rf-police-titre); }
.of-fiche-intro { margin: 0 0 18px; font-size: var(--rf-t-m); }
dialog .uk-encart { margin: 0 0 22px; }
.of-compris .fiche-liste li::marker { color: var(--accent); }
.uk-fiche-corps :is(.of-compris, .of-bon, .of-etapes) h3 { margin: 0 0 10px; color: var(--text); font: 600 var(--rf-t-l)/1.3 var(--rf-police-titre); letter-spacing: 0; text-transform: none; }
@media (max-width: 640px) { .uk-faits.of-chiffres dd { font-size: var(--rf-t-2xl); } }
.of-etapes .uk-schema { margin-top: 8px; }
/* Services & paiements : services en cartes, historique en tableau ; paiements et « Pour vous » côte à côte. */
.sf-services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 24px; }
.sf-services .section-title { margin: 0; }
.sf-services .sf-historique { margin-top: 10px; }
.sf-bas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.sf-bas .sf-reco { margin-bottom: 0; border-left: 1px solid var(--line); }
/* Demandes & devis : parcours du devis en tête, demandes en cours puis historique. */
.dv-parcours { display: grid; gap: 16px; margin-bottom: 18px; }
.dv-parcours h2 { margin: 0; font: 600 var(--rf-t-l)/1.3 var(--rf-police-titre); }
.dv-titre { margin: 22px 0 10px; font: 600 var(--rf-t-l)/1.3 var(--rf-police-titre); }
.dv-fiche-etapes .uk-schema { margin-top: 8px; }

/* Équipe › Prospects (refonte du cycle commercial, 11/10/2026) : pipeline, fiche, journal, formulaires. Variables du kit. */
.pr-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0; }
.pr-pipeline { grid-auto-columns: minmax(200px, 1fr); }
.pr-carte-nom { color: inherit; text-decoration: none; }
.pr-carte-nom:hover strong, .pr-carte-nom:focus-visible strong { text-decoration: underline; }
.pr-sorties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; font-size: var(--rf-t-s); }
.pr-sorties .kanban-colonne.pr-sortie { min-height: 0; max-height: none; padding: 6px 12px; overflow: visible; }
.pr-fil { margin: 0 0 6px; font-size: var(--rf-t-s); }
.pr-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.pr-grille > div { display: grid; gap: 16px; min-width: 0; }
.pr-bloc { display: grid; gap: 10px; min-width: 0; }
.pr-bloc h3 { margin: 12px 0 4px; font-size: var(--rf-t-m); }
.pr-faits { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.pr-faits dt { color: var(--muted); }
.pr-faits dd { margin: 0; overflow-wrap: anywhere; }
.pr-axes { columns: 2 180px; margin: 0; padding-left: 18px; }
.pr-journal { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 12px; }
.pr-entree { position: relative; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); display: grid; gap: 6px; min-width: 0; }
.pr-entree::before { content: ""; position: absolute; left: -21px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.pr-entree.pr-a-venir { border-color: var(--accent); }
.pr-entree.pr-a-venir::before { background: var(--accent); }
.pr-entree-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pr-entree-tete .muted { font-size: var(--rf-t-s); }
.pr-entree p { margin: 0; overflow-wrap: anywhere; }
.pr-notes { white-space: pre-line; }
/* Journal prospect : descriptions complètes, contrairement aux filtres horizontaux du kit. */
.pr-entree > .uk-pastilles { min-width: 0; flex-wrap: wrap; }
.pr-entree .uk-pilule { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.pr-form fieldset.pr-cases { border: 1px solid var(--line); border-radius: var(--rf-rayon); padding: 8px 12px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.pr-form fieldset.pr-cases legend { padding: 0 4px; font-size: var(--rf-t-s); color: var(--muted); }
.pr-form fieldset.pr-cases > label:not(.pr-case) { flex: 1 1 200px; }
.pr-case { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
/* Ticket n° 132 : boutons radio des fiches de Prospects (point d'entrée, type d'échange, étape) à leur taille, collés au libellé. */
.pr-case input[type="radio"] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); flex: none; }
.pr-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.pr-registre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; align-items: end; }
.pr-candidats { display: grid; gap: 8px; }
.pr-candidats:empty { display: none; }
.pr-candidat { display: grid; gap: 2px; text-align: left; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: transparent; }
.pr-candidat small { color: var(--muted); }
.pr-candidat:hover, .pr-candidat:focus-visible { border-color: var(--accent); }
.pr-offres { display: grid; gap: 10px; }
.pr-offre { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.pr-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.pr-lien-texte code { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); overflow-wrap: anywhere; user-select: all; }
.pr-carte-pastilles { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-carte-pastilles:empty { display: none; }
/* Ticket n° 132 : point d'entrée en haut de la fiche prospect (alerte discrète quand il est à préciser). */
.pr-origine { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); background: var(--raised); }
.pr-origine.pr-origine-a-preciser { border-color: var(--rf-attention); background: color-mix(in srgb, var(--rf-attention) 6%, var(--surface)); }
.pr-origine-choix { display: grid; gap: 12px; }
/* Ticket #140 : état de l'espace client du prospect (onglet « Espace client » de la fiche). */
.pr-etat-espace { margin: 8px 0; padding-left: 1.2em; display: grid; gap: 2px; }
.pr-doc .vg-action { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
.pr-form .pr-origine-choix fieldset.pr-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 2px 14px; }
.pr-outils > .uk-filtres { flex: 1 1 320px; min-width: 0; }
.pr-outils .uk-pastilles { flex-wrap: wrap; }
.pr-sorties .pr-sortie { display: inline-flex; align-items: center; gap: 12px; min-width: 150px; justify-content: space-between; border-style: dashed; }
.pr-import { display: grid; gap: 16px; margin-top: 18px; min-width: 0; }
.member-agents-header > button { flex-shrink: 0; }
@media (max-width: 640px) {
  .member-agents-header { flex-direction: column; align-items: stretch; }
}

/* Identité visuelle (lot V1, 12/10/2026) : Réglages › Mon entreprise (mon-entreprise.js, sectionIdentite). */
.ent-iv-partie { display: grid; gap: 10px; min-width: 0; }
.ent-iv-partie h3 { margin: 0; font-size: var(--rf-t-m); }
.ent-iv-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ent-iv-logo { display: grid; border: 1px solid var(--line); border-radius: var(--rf-rayon); overflow: hidden; }
.ent-iv-vignette { display: grid; place-items: center; height: 120px; padding: 12px; }
.ent-iv-vignette img { max-width: 80%; max-height: 88px; object-fit: contain; }
.ent-iv-fond-sombre { background: var(--rf-nuit); }
.ent-iv-fond-clair { background: var(--rf-papier-fond); border-bottom: 1px solid var(--line); }
.ent-iv-logo-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.ent-iv-logo-bas span { display: grid; }
.ent-iv-logo-bas small { color: var(--muted); }
.ent-iv-couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ent-iv-couleurs li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.ent-iv-couleurs .ent-teinte { width: 32px; height: 32px; }
.ent-iv-couleur-nom { display: grid; flex: 1; min-width: 0; }
.ent-iv-couleur-nom small { color: var(--muted); overflow-wrap: anywhere; }
.ent-iv-code { flex: none; min-height: 32px; font-variant-numeric: tabular-nums; }
.ent-iv-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: start; }
.ent-iv-regles-grille { display: grid; gap: 12px; }
.ent-iv-regles h4 { margin: 0 0 4px; font-size: var(--rf-t-s); }
.ent-iv-regles ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--rf-t-sm); }
.iv-parties { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; padding: 0; border: 0; }
.iv-parties legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
/* Ticket #102 : notes Lighthouse du client (Mon site › Visibilité, 4 chiffres) : deux par ligne, même sur téléphone. */
.vis-seo-client .vis-lh-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Identité visuelle, pages web (14/10/2026, ticket #117) : lecture seule de la partie web publiée. */
.ent-iv-web { gap: 14px; }
.ent-iv-web-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ent-iv-web-theme { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ent-iv-web-theme h4 { margin: 0; font-size: var(--rf-t-s); }
.ent-iv-web-apercu { margin: 0; }
.ent-iv-web-apercu svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.ent-iv-web-couleurs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }

/* Moteur de prospection (lot P0, 14/10) : lots à valider, score, grille des poids. Couleurs par jetons seulement. */
.pr-score { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 24px; padding: 0 6px; border-radius: var(--rf-rayon); border: 1px solid var(--rf-ligne-forte); font-family: var(--rf-police-titre); font-weight: 600; font-size: var(--rf-t-s); }
.pr-score-fort { background: var(--rf-accent); border-color: var(--rf-accent); color: var(--rf-sur-accent); }
.pr-lot { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-candidat-lot { border: 1px solid var(--rf-ligne); border-radius: var(--rf-rayon); padding: 8px 12px; }
.pr-candidat-lot .pr-case { align-items: flex-start; }
.pr-attention { color: var(--rf-attention); }
.pr-poids { display: grid; grid-template-columns: 1fr 88px auto; gap: 8px; align-items: center; }
.pr-poids input { width: 80px; }
.pr-grille-score { margin-top: 12px; }
.pr-grille-score summary { cursor: pointer; font-weight: 600; }

/* --- Accueil en widgets (ticket n° 141, 15/10/2026) ------------------------------------------------------------------------
   Grille de 2 colonnes (téléphone), 4 dès que la zone mesure 720 px (requête de conteneur : le menu réduit compte) ; rangées
   de hauteur fixe, comme sur un téléphone : petite = 1 × 1, moyenne = 2 × 1, grande = 2 × 2. Ordre du DOM = ordre de
   l'écran (pas de « dense »). Contenu borné par taille (accueil-ui.js), débordement masqué ; planning et brief de l'équipe
   défilent dans leur grand widget. Mode « Personnaliser » : réglages posés sur chaque widget (cibles de 44 px), widgets
   qui bougent légèrement (sauf prefers-reduced-motion), emplacement fantôme pendant le glisser. Aucun style en ligne. */
.aw { container-type: inline-size; display: grid; gap: 12px; margin-bottom: 24px; --aw-rangee: 11.5rem; --aw-ecart: 12px; }
.aw-barre { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-height: 44px; }
.aw-personnaliser, .aw-barre-actions button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.aw-personnaliser .vg-picto, .aw-barre-actions .vg-picto { width: 18px; height: 18px; }
.aw-barre-edition { position: sticky; top: 0; z-index: 5; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--rf-rayon); box-shadow: 0 6px 18px var(--rf-ombre-douce); }
.aw-barre-texte { min-width: 0; flex: 1 1 260px; }
.aw-barre-titre { margin: 0; font-weight: 650; }
.aw-barre-aide { margin: 2px 0 0; color: var(--muted); font-size: var(--rf-t-s); }
.aw-barre-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.aw-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--aw-rangee); gap: var(--aw-ecart); }
@container (min-width: 720px) { .aw-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aw { --aw-rangee: 12rem; --aw-ecart: 16px; } }
.aw-t-petite { grid-column: span 1; grid-row: span 1; }
.aw-t-moyenne { grid-column: span 2; grid-row: span 1; }
.aw-t-grande { grid-column: span 2; grid-row: span 2; }
.aw-widget { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 12px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rf-rayon); -webkit-touch-callout: none; }
.aw-tete { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 4px; flex: 0 0 auto; }
.aw-tete .vg { flex: 0 0 auto; }
.aw-titre { margin: 0; flex: 1 1 auto; min-width: 0; font: 600 var(--rf-t-sm)/1.25 Archivo, Arial, sans-serif; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-t-petite .aw-titre { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.aw-ouvrir { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -10px -8px 0; border-radius: var(--rf-rayon); color: var(--muted); }
.aw-ouvrir:hover { color: var(--text); background: var(--raised); }
.aw-ouvrir .vg-picto { width: 20px; height: 20px; }
.aw-corps { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; font-size: var(--rf-t-s); }
.aw-corps > .block { display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 1 1 auto; }
.aw-corps > :not(.block):not(.aw-defile), .aw-corps > .block > :not(.aw-defile):not(.uk-panneau) { flex: 0 0 auto; }
.aw-corps .uk-panneau:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.aw-corps .block-state { margin: 0; font-size: var(--rf-t-s); }
.aw-corps .uk-liste { border: 0; background: transparent; }
.aw-corps .uk-liste .vg-ligne { padding: 4px 0; min-height: 0; }
.aw-corps .vg-corps strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.aw-corps .vg-corps small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.aw-gros { margin: 0; display: grid; gap: 0; }
.aw-gros strong { font: 650 var(--rf-t-2xl)/1.1 Archivo, Arial, sans-serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.aw-gros span { color: var(--muted); font-size: var(--rf-t-s); }
.aw-gros span:empty { display: none; }
.aw-sous { margin: 0; color: var(--muted); font-size: var(--rf-t-s); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.aw-sous .uk-badge, .aw-sous .badge { margin-right: 4px; }
.aw-lien { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; background: none; border: 0; padding: 0; min-height: 0; font: inherit; cursor: pointer; text-align: left; }
.aw-lien:hover { text-decoration-color: currentColor; }
.aw-reste { margin: auto 0 0; color: var(--muted); font-size: var(--rf-t-xs); text-decoration: underline; text-underline-offset: 3px; }
.aw-vide { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.aw-vide .vg { flex: 0 0 auto; }
.aw-vide-titre { margin: 0; color: var(--text); font-weight: 600; font-size: var(--rf-t-s); }
.aw-vide-texte { margin: 2px 0 6px; font-size: var(--rf-t-s); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.aw-vide .button { min-height: 44px; }
.aw-phrase { display: grid; gap: 6px; align-content: start; padding-left: 12px; border-left: 3px solid var(--accent); }
.aw-phrase.aw-repos { border-left-color: var(--line); }
.aw-phrase .bf-surtitre { margin: 0; }
.aw-phrase-texte { margin: 0; font: 650 var(--rf-t-l)/1.3 Archivo, Arial, sans-serif; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.aw-t-grande .aw-phrase-texte { font-size: var(--rf-t-2xl); -webkit-line-clamp: 6; }
.aw-phrase-detail { margin: 0; color: var(--muted); font-size: var(--rf-t-s); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.aw-phrase-action { margin: 4px 0 0; }
.aw-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.aw-stats a, .aw-stats li > :not(a) { min-width: 0; }
.aw-stats a, .aw-stats li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.aw-stats li > a { grid-column: 1 / -1; padding: 4px; margin: -4px; border-radius: var(--rf-rayon); }
.aw-stats li > a:hover { background: var(--raised); }
.aw-stats .vg { grid-row: span 2; }
.aw-stats strong { font: 650 var(--rf-t-l)/1.1 Archivo, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.aw-stats span { color: var(--muted); font-size: var(--rf-t-xs); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.aw-courbe { display: block; color: var(--accent); }
.aw-courbe .gr-spark { width: 100%; max-width: 220px; height: 40px; }
.aw-onglets { margin: 0 0 4px; }
.aw-onglets button { min-height: 36px; }
.aw-jours-courts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aw-jours-courts li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.aw-jours-courts li > :nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-jour { flex: 0 0 auto; min-width: 5.5rem; color: var(--muted); font-size: var(--rf-t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.aw-plus { flex: 0 0 auto; color: var(--muted); font-size: var(--rf-t-xs); }
.aw-defile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.aw-defile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aw-defile .bf { margin: 0; gap: 12px; }
.aw-defile .bf-blocs, .aw-defile .bf-blocs.bfe-blocs { grid-template-columns: minmax(0, 1fr); }
.aw-defile .bf-blocs > .bf-bloc:last-child { grid-column: auto; }
.aw-defile .bf-phrase { padding: 12px 14px; }
.aw-defile .bf-phrase h2 { font-size: var(--rf-t-l); }
.aw-defile .panel { padding: 12px 14px; }
.aw-defile .bf-bloc h2, .aw-defile .bf-planning h2 { font-size: var(--rf-t-m); }
.aw-jours .bf-jour { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
.aw-jours .bf-jour-date { padding-top: 0; }
.aw-entreprise { display: grid; gap: 10px; align-content: start; }
.aw-entreprise .acc-entreprise-tete { gap: 10px; flex-wrap: nowrap; }
.aw-entreprise .acc-logo { width: 44px; height: 44px; font-size: var(--rf-t-l); flex: 0 0 auto; }
.aw-entreprise-nom { margin: 0; font-weight: 650; font-size: var(--rf-t-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.aw-entreprise .acc-entreprise-nom { gap: 2px; flex: 1 1 auto; }
.aw-entreprise .acc-entreprise-nom p:not(.aw-entreprise-nom) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.aw-entreprise-outils { margin: 0; gap: 6px; flex-wrap: wrap; }
.aw-entreprise-outils .button, .aw-entreprise-outils button { min-height: 44px; padding: 8px 12px; }
.aw-compteurs { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 0; }
.aw-compteurs .uk-chiffre { padding: 10px; }
.aw-compteurs .uk-chiffre-sous { display: none; }
.aw-grille-vide .uk-vide { padding: 32px 16px; }
/* Mode « Personnaliser ». */
.aw-edition .aw-widget { border-style: dashed; border-color: var(--rf-ligne-forte); animation: aw-trembler .28s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.aw-edition .aw-widget:nth-child(even) { animation-delay: -.14s; animation-direction: alternate-reverse; }
.aw-edition .aw-widget:focus-within { animation: none; border-color: var(--accent); border-style: solid; }
.aw-edition .aw-widget:hover { animation-play-state: paused; }
@keyframes aw-trembler { from { rotate: -.45deg; } to { rotate: .45deg; } }
@media (prefers-reduced-motion: reduce) { .aw-edition .aw-widget { animation: none; } }
.aw-modifiable .aw-corps { opacity: .3; }
.aw-modifiable .aw-tete { opacity: 0; }
.aw-reglages { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 8px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.aw-reglages-haut, .aw-reglages-bas { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aw-reglages-bas { flex-wrap: wrap; justify-content: flex-start; }
.aw-reglages-titre { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 650; font-size: var(--rf-t-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-reglages button, .aw-taille { flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--rf-rayon-rond); background: var(--raised); border: 1px solid var(--rf-ligne-forte); color: var(--text); }
.aw-reglages .vg-picto { width: 20px; height: 20px; }
.aw-reglages .aw-retirer { background: var(--rf-critique); border-color: var(--rf-critique); color: var(--rf-sur-accent); }
.aw-reglages .aw-poignee { cursor: grab; touch-action: none; background: var(--accent); border-color: var(--accent); color: var(--rf-sur-accent); }
.aw-reglages .aw-poignee:active { cursor: grabbing; }
.aw-reglages button:disabled { opacity: .45; cursor: default; }
.aw-taille { width: auto; flex: 1 1 88px; max-width: 160px; padding: 0 10px; border-radius: var(--rf-rayon); font-size: var(--rf-t-s); }
.aw-taille-unique { flex: 1 1 auto; color: var(--muted); font-size: var(--rf-t-xs); text-align: right; }
.aw-reglages button:focus-visible, .aw-taille:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.aw-reglages .aw-poignee:focus-visible, .aw-reglages .aw-retirer:focus-visible { outline-color: var(--text); }
.aw-souleve { position: fixed; z-index: 50; margin: 0; pointer-events: none; animation: none !important; box-shadow: 0 18px 40px var(--rf-ombre-forte); border-style: solid; border-color: var(--accent); }
.aw-fantome { border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); animation: none !important; }
/* Galerie « Ajouter un widget ». */
.aw-galerie { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.aw-galerie-carte { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.aw-galerie-texte h3 { margin: 0 0 4px; font-size: var(--rf-t-m); }
.aw-galerie-texte p { margin: 0; color: var(--muted); font-size: var(--rf-t-s); }
.aw-galerie-texte .aw-galerie-tailles { margin-top: 6px; font-size: var(--rf-t-xs); }
.aw-ajouter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.aw-ajouter .vg-picto { width: 18px; height: 18px; }
.aw-galerie-vide { margin: 0; color: var(--muted); }
.aw-apercu { height: 140px; overflow: hidden; border-radius: var(--rf-rayon); background: var(--bg); padding: 8px; pointer-events: none; }
.aw-apercu-cadre { zoom: .62; }
.aw-apercu .aw-widget { width: 392px; height: 11rem; }
.aw-apercu-petite .aw-widget { width: 188px; }
.aw-apercu-grande .aw-widget { height: 23.5rem; }
/* Widgets : une ligne garde son état à droite (pas de retour à la ligne sur téléphone), l'en-tête d'une petite garde la place
   pour son titre sur deux colonnes. */
.aw-corps .vg-ligne { flex-wrap: nowrap; }
.aw-corps .vg-ligne .vg-corps { flex-basis: auto; min-width: 0; }
.aw-corps .vg-ligne > .vg + .vg-corps + .vg-etat { margin-left: auto; }
.aw-corps .vg-etat { flex: 0 0 auto; }
@container (max-width: 719px) { .aw-t-petite .aw-tete > .vg { display: none; } .aw-corps .vg-etat .uk-badge { font-size: var(--rf-t-xs); } }

/* À traiter : lecture et actions séparées, commandes adaptées aux petits écrans. */
.info-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:1.5rem 0; }
.info-section { margin:1.5rem 0 2rem; padding:1.5rem; border:1px solid var(--rf-ligne); border-radius:var(--rf-rayon); background:var(--rf-surface); }
.info-section h2 { margin:0 0 .5rem; font-size:var(--rf-t-xl); }
.info-section h2 small { display:inline; color:var(--rf-texte-doux); font-weight:400; }
.info-section > .muted { margin:0 0 1.25rem; }
.info-events { margin:0 1rem 1rem; padding:.75rem 0; border-top:1px solid var(--rf-ligne); }
.info-events summary { cursor:pointer; color:var(--rf-texte-doux); }
@media(max-width:600px) { .info-section { padding:1rem .75rem; } .info-toolbar > button { width:100%; } .info-section .button { white-space:normal; } }
/* Composeur de devis commun aux prospects et clients (#152). */
.dl-editeur { display: grid; gap: 16px; min-width: 0; }
.dl-ajouter { display: grid; gap: 12px; }
.dl-ajouter > details, .dl-carte, .dl-recap { border: 1px solid var(--line); border-radius: var(--rf-rayon); padding: 14px; min-width: 0; }
.dl-carte { margin-block: 10px; }
.dl-carte > summary { font-weight: 650; cursor: pointer; overflow-wrap: anywhere; }
.dl-ligne { border: 0; padding: 16px 0 0; min-width: 0; }
.dl-ligne legend { font-size: var(--rf-t-xs); color: var(--muted); }
.dl-resultats { list-style: none; padding: 0; display: grid; gap: 8px; }
.dl-resultats li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.dl-resultats span { min-width: 0; overflow-wrap: anywhere; }
.dl-resultats small { display: block; color: var(--muted); }
.dl-recap { background: var(--raised); }
.dl-recap h4 { margin: 0; }
.dl-offert [hidden], .dl-editeur [hidden] { display: none; }
@media (max-width: 600px) { .dl-editeur .form-grid { grid-template-columns: minmax(0, 1fr); } .dl-carte, .dl-recap { padding: 12px; } }

/* Ticket n° 211 : instructions de virement (espace client) et cases des moyens de paiement (éditeurs de devis). */
.virement-instructions { margin: 8px 0; display: grid; gap: 6px; }
.virement-ligne { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: 8px; align-items: center; }
.virement-ligne dt { color: var(--muted); }
.virement-ligne dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; word-break: break-all; }
.pr-moyens { border: 0; padding: 0; margin: 10px 0; display: grid; gap: 4px; }
.pr-moyens legend { font-weight: 600; margin-bottom: 4px; }
@media (max-width: 520px) { .virement-ligne { grid-template-columns: 1fr; } }
.suivi-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.suivi-etape { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rf-rayon); }
.suivi-etape p { margin: 4px 0 0; }
.suivi-tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.suivi-resume { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--rf-rayon); background: var(--raised); }
.suivi-resume p { margin: 4px 0 0; }
.aw-commande p { margin: 0 0 4px; }

/* #233 : fiches de travail — action, contexte puis organisation. */
.travail-outils { display:grid; grid-template-columns:minmax(240px,1fr) minmax(220px,1fr); gap:24px; margin:24px 0; align-items:end; }
.travail-outils form { margin:0; }
.travail-outils label { display:block; margin-bottom:8px; font-weight:650; }
.travail-outils form > div { display:flex; gap:8px; }
.travail-outils input { min-width:0; flex:1; }
.travail-outils p { margin:0; }
.travail-ligne-suite { margin:0; padding:0 16px 12px 60px; color:var(--rf-texte-doux); font-size:var(--rf-t-s); }
.travail-fiche { display:grid; gap:24px; }
.travail-fiche h3 { margin:0 0 12px; font-size:var(--rf-t-l); }
.travail-prochaine { padding:20px; background:var(--rf-releve); border-left:3px solid var(--rf-accent); border-radius:var(--rf-rayon); }
.travail-prochaine p { margin:0; }
.travail-prochaine .travail-surtitre { color:var(--rf-accent); font-size:var(--rf-t-s); margin-bottom:8px; font-weight:650; }
.travail-prochaine h3 { font-size:var(--rf-t-xl); line-height:1.3; }
.travail-faits { margin:0; display:grid; gap:12px; }
.travail-faits > div { display:grid; grid-template-columns:minmax(100px,1fr) minmax(0,2fr); gap:16px; }
.travail-faits dt { color:var(--rf-texte-doux); }
.travail-faits dd { margin:0; overflow-wrap:anywhere; }
.travail-details { border:1px solid var(--rf-ligne); border-radius:var(--rf-rayon); }
.travail-details summary { padding:14px 16px; cursor:pointer; }
.travail-details summary > span { font-weight:650; }
.travail-details summary small { display:block; color:var(--rf-texte-doux); margin:4px 0 0 18px; }
.travail-details summary:focus-visible { outline:2px solid var(--rf-accent); outline-offset:2px; }
.travail-details-corps { padding:0 16px 16px; }
.travail-details-corps > :last-child { margin-bottom:0; }
.travail-organisation { display:grid; gap:8px; }
.travail-organisation h3 { margin-bottom:4px; }
.travail-etapes { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.travail-etapes li { display:grid; justify-items:start; align-content:start; gap:6px; font-size:var(--rf-t-s); padding:12px 8px; border-bottom:2px solid var(--rf-ligne); }
.travail-etapes li > span { color:var(--rf-texte-doux); }
.travail-etapes li[aria-current] { border-color:var(--rf-accent); font-weight:650; }
.travail-etapes small { color:var(--rf-texte-doux); font-weight:400; }
.travail-priorites { margin:0; padding-left:20px; }
.travail-priorites li + li { margin-top:8px; }
.travail-note { color:var(--rf-texte-doux); font-size:var(--rf-t-s); margin:0; }
@media(max-width:600px) {
  .travail-outils { grid-template-columns:1fr; gap:12px; }
  .travail-outils form > div { flex-wrap:wrap; }
  .travail-faits > div { grid-template-columns:1fr; gap:2px; }
  .travail-prochaine { padding:16px; }
  .travail-ligne-suite { padding-left:16px; }
  .travail-etapes li { padding:8px 4px; overflow-wrap:anywhere; }
}

/* #245 : espace courant et préparation publicitaire lisibles. */
.space-switch { width:100%; text-align:left; display:flex; gap:10px; align-items:center; background:transparent; border:1px solid transparent; border-radius:var(--rf-rayon); padding:12px; color:var(--text); }
.space-switch:hover,.space-switch:focus-visible { background:var(--surface); border-color:var(--line); }
.space-switch .uk-barre-texte { flex:1; min-width:0; }
.space-switch small { display:block; color:var(--muted); }
.space-switch .espace-chevron { width:16px; flex:none; }
.espace-liste { display:grid; gap:8px; margin-block:12px; }
.espace-choix { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px; }
.espace-choix>span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.espace-choix small { display:block; color:var(--muted); }
.espace-choix[aria-current] { border-color:var(--accent); }
.rs-boost-interrupteur { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.rs-boost-interrupteur small { display:block; color:var(--muted); margin-top:4px; }
.rs-boost-prevu .rs-boost-champs[hidden], .rs-zone [data-rs-zone-bloc][hidden] { display:none; }
.rs-boost-prevu fieldset.rs-boost-champs { border:0; padding:12px 0 0; }
.rs-accord .rs-accord-options { display:grid; gap:10px; padding-block:12px; }
.rs-accord .rs-accord-confirmation { border-top:1px solid var(--line); padding-top:14px; margin-top:8px; }
@media(min-width:761px) { .menu-reduit .space-switch .uk-barre-texte,.menu-reduit .space-switch .espace-chevron { display:none; } }

.rs-format[hidden] { display: none; }
.rs-format.rs-accord:not([hidden]), .rs-format.rs-boost-prevu:not([hidden]) { display: block; }
.rs-accord-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }