/* Grafen — démonstration, acte 1 : interfaces des outils du quotidien (Outlook, Excel, Word, ERP, stock, CRM,
   gestion du courtier, extranet, TMS, planning, téléphone). Dessinées à 600 × 440 px, mises à l'échelle par --s. */

/* --- la fenêtre : légende, cadre mis à l'échelle, note --- */
.win { position: sticky; top: calc(50vh - 260px); }
/* l'interface fait 600 px de large : sans min-width 0, elle élargirait la colonne au lieu d'être réduite */
.today > *, .win__frame { min-width: 0; }
.win__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.win__step { opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__tool { opacity: 0.45; white-space: nowrap; }
.win.is-judgment .win__step { color: var(--accent); opacity: 1; }
.win__frame {
  height: calc(440px * var(--s, 1)); overflow: hidden; border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb), 0.18); background: #fff;
  box-shadow: 0 30px 80px rgba(18, 38, 46, 0.12), 0 4px 14px rgba(18, 38, 46, 0.06);
  transition: border-color 0.35s; /* l'ombre change sans transition : moins de repeint */
}
.win.is-judgment .win__frame { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 30px 80px rgba(201, 110, 185, 0.22); }
.win__app { width: 600px; height: 440px; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.win__app > .ui { animation: winin 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes winin { from { opacity: 0.2; } to { opacity: 1; } }
.win__note { margin-top: 14px; padding-left: 14px; border-left: 1px solid var(--accent); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; line-height: 1.55; opacity: 0.75; min-height: 2.6em; }

@media (max-width: 880px) {
  /* le fond de la fenêtre collée couvre toute la largeur, pour masquer les cartes qui passent dessous */
  .win { top: 64px; z-index: 5; background: var(--bg); padding: 8px var(--gutter) 10px; margin: -8px calc(-1 * var(--gutter)) 0; }
  .win__cap { margin-bottom: 6px; font-size: 9.5px; letter-spacing: 0.06em; }
  .win__frame { border-radius: 6px; }
  .win__note { margin-top: 8px; font-size: 10.5px; height: 4.65em; overflow: hidden; padding-left: 10px; }
}

/* --- socle commun des interfaces --- */
.ui {
  position: relative; display: flex; flex-direction: column; width: 600px; height: 440px; overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif; font-size: 12px; line-height: 1.35;
  color: #242424; background: #fff; text-align: left; letter-spacing: 0;
}
.ui svg { width: 14px; height: 14px; display: block; flex: none; }
.ui-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: #111; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ui-file { display: inline-grid; place-items: center; width: 24px; height: 28px; border-radius: 3px; color: #fff; font-size: 8px; font-weight: 700; flex: none; }
.ui-file--pdf { background: #c4262e; }
.ui-file--xlsx { background: #107c41; font-size: 12px; }
.ui-file--docx { background: #185abd; font-size: 12px; }
.ui-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ui-table th { text-align: left; font-weight: 600; white-space: nowrap; }
.ui-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-facts { margin: 0; }
.ui-facts div { display: grid; grid-template-columns: 44% 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eceff2; }
.ui-facts dt { color: #6b7280; }
.ui-facts dd { margin: 0; font-weight: 600; }
.ui-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ui-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #555; }
.ui-input { display: block; height: 26px; padding: 4px 8px; border: 1px solid #c8ccd2; border-radius: 3px; background: #fff; color: #111; font-size: 12px; white-space: nowrap; overflow: hidden; }
.ui-field.is-active .ui-input { border-color: #2f6db5; box-shadow: 0 0 0 2px rgba(47, 109, 181, 0.2); }
.ui-postit {
  position: absolute; right: 22px; bottom: 26px; width: 178px; padding: 14px 14px 16px; background: #fff3a0; color: #3d3300;
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 13.5px; line-height: 1.35;
  transform: rotate(-3deg); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16); z-index: 3;
}
.ui-postit::before { content: ''; position: absolute; top: -8px; left: 50%; width: 56px; height: 16px; margin-left: -28px; background: rgba(255, 255, 255, 0.6); transform: rotate(2deg); }

/* barre de titre Windows */
.ui-title { display: flex; align-items: center; gap: 10px; height: 30px; flex: none; padding-left: 10px; color: #fff; font-size: 11.5px; }
.ui-title--excel { background: #107c41; }
.ui-title--word { background: #185abd; }
.ui-title--erp { background: #2e3b4e; }
.ui-title__icon { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 2px; background: rgba(255, 255, 255, 0.95); font-size: 10px; font-weight: 700; }
.ui-title--excel .ui-title__icon { color: #107c41; }
.ui-title--word .ui-title__icon { color: #185abd; }
.ui-title--erp .ui-title__icon { color: #2e3b4e; }
.ui-title__text { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-title__controls { display: flex; height: 100%; }
.ui-title__controls i { position: relative; width: 40px; height: 100%; }
.ui-title__controls i::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ui-title__controls .is-min::before { width: 10px; height: 1px; background: currentColor; }
.ui-title__controls .is-max::before { width: 9px; height: 9px; border: 1px solid currentColor; }
.ui-title__controls .is-close::before { content: '\00d7'; font-size: 16px; font-style: normal; line-height: 1; }
.ms-autosave { display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: 0.9; white-space: nowrap; }
.ms-autosave i { width: 22px; height: 11px; border-radius: 6px; border: 1px solid #fff; position: relative; }
.ms-autosave i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }

/* ruban Office */
.ms-tabs { display: flex; gap: 2px; height: 28px; align-items: flex-end; padding: 0 8px; background: #fff; flex: none; font-size: 11.5px; color: #444; }
.ms-tabs span { padding: 5px 9px 6px; border-bottom: 2px solid transparent; }
.xl .ms-tabs .is-on { color: #107c41; border-color: #107c41; font-weight: 600; }
.wd .ms-tabs .is-on { color: #185abd; border-color: #185abd; font-weight: 600; }
.ms-ribbon { display: flex; height: 62px; flex: none; background: #f5f5f5; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #dcdcdc; padding: 5px 4px 0; }
.ms-group { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 10px 14px; border-right: 1px solid #dedede; }
.ms-group small { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 9.5px; color: #777; white-space: nowrap; }
.ms-big { display: flex; align-items: flex-end; justify-content: center; width: 38px; height: 36px; padding-bottom: 2px; font-size: 10px; border-radius: 3px; background: linear-gradient(#fff 0 55%, transparent 55%); border: 1px solid #ddd; }
.ms-row { display: flex; align-items: center; gap: 5px; height: 18px; font-size: 11px; }
.ms-row b, .ms-row i, .ms-row u { width: 16px; text-align: center; font-family: Georgia, serif; }
.ms-select { display: inline-block; height: 18px; padding: 1px 16px 0 5px; border: 1px solid #c8c8c8; background: #fff; font-size: 10.5px; white-space: nowrap; position: relative; }
.ms-select::after { content: '⌄'; position: absolute; right: 4px; top: -2px; font-size: 10px; color: #777; }
.ms-select--s { padding-right: 14px; }
.ms-fill { width: 16px; height: 12px; border-bottom: 3px solid #ffd400; }
.ms-fill--hl { border-color: #f5e400; }
.ms-lines { width: 16px; height: 12px; background: repeating-linear-gradient(#888 0 1px, transparent 1px 4px); }
.ms-style { display: inline-block; padding: 2px 6px; border: 1px solid #d6d6d6; background: #fff; font-size: 10px; }
.ms-gal { display: inline-block; width: 64px; height: 30px; padding: 3px 5px; border: 1px solid #d6d6d6; background: #fff; font-size: 10px; }
.ms-gal.is-on { border-color: #185abd; box-shadow: inset 0 0 0 1px #185abd; }
.ms-gal--h { color: #185abd; font-size: 11.5px; }
.ms-group--styles .ms-row { height: 32px; }
.ms-status { display: flex; align-items: center; gap: 18px; height: 22px; flex: none; padding: 0 10px; background: #f3f3f3; border-top: 1px solid #dcdcdc; font-size: 10.5px; color: #555; }
.ms-zoom { margin-left: auto; }

/* --- Excel --- */
.xl__fx { display: flex; align-items: center; height: 26px; flex: none; border-bottom: 1px solid #d4d4d4; font-size: 11.5px; }
.xl__name { width: 64px; height: 100%; display: grid; place-items: center; border-right: 1px solid #d4d4d4; }
.xl__fxicons { padding: 0 10px; color: #888; border-right: 1px solid #d4d4d4; height: 100%; display: flex; align-items: center; gap: 4px; }
.xl__fxicons i { font-family: Georgia, serif; }
.xl__fxval { padding: 0 10px; font-family: 'Aptos', 'Calibri', 'Segoe UI', sans-serif; }
.xl__grid { flex: 1; overflow: hidden; background: #fff; }
.xl__grid table { table-layout: fixed; border-collapse: collapse; font-family: 'Aptos Narrow', 'Calibri', 'Segoe UI', sans-serif; font-size: 11.5px; }
.xl__grid th { height: 20px; background: #f3f3f3; color: #555; font-weight: 400; font-size: 10.5px; border: 1px solid #dadada; text-align: center; }
.xl__grid th.is-on { background: #d3eadd; color: #0a5c30; box-shadow: inset 0 -2px 0 #107c41; }
.xl__grid tbody th.is-on { box-shadow: inset -2px 0 0 #107c41; }
.xl__grid td { height: 20px; padding: 0 5px; border: 1px solid #e3e3e3; white-space: nowrap; overflow: hidden; }
.xl__grid td.is-num { text-align: right; }
.xl__grid td.is-head { background: #e2efda; font-weight: 700; }
.xl__grid td.is-cell { position: relative; outline: 2px solid #107c41; outline-offset: -1px; }
.xl__grid td.is-cell::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 6px; height: 6px; background: #107c41; border: 1px solid #fff; }
.xl__corner { background: #e8e8e8 !important; }
.xl__sheets { display: flex; align-items: stretch; height: 26px; flex: none; background: #f3f3f3; border-top: 1px solid #d4d4d4; font-size: 11px; color: #444; }
.xl__sheets span { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid #dcdcdc; }
.xl__sheets .is-on { background: #fff; color: #107c41; font-weight: 600; box-shadow: inset 0 -2px 0 #107c41; }
.xl__nav { color: #999; font-size: 9px; gap: 6px; }
.xl__add { font-size: 15px; color: #666; border-right: 0 !important; }

/* --- Word --- */
.wd__ruler { height: 16px; flex: none; background: #fff repeating-linear-gradient(90deg, transparent 0 11px, #bbb 11px 12px) 0 10px / 100% 6px no-repeat; border-bottom: 1px solid #e1e1e1; }
.wd__canvas { flex: 1; overflow: hidden; background: #e8e8e8; padding: 16px 0 0; }
.wd__page { width: 430px; min-height: 100%; margin: 0 auto; background: #fff; padding: 26px 38px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); font-family: 'Aptos', 'Calibri', 'Segoe UI', sans-serif; }
.wd__letterhead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid #0f6e66; }
.wd__letterhead b { font-size: 13px; letter-spacing: 0.08em; color: #0f6e66; }
.wd__letterhead span { font-size: 9.5px; color: #777; }
.wd__heading { margin-top: 16px; font-size: 17px; font-weight: 600; color: #1f3864; }
.wd__p { margin-top: 10px; font-size: 11px; color: #333; }
.wd__table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 11px; }
.wd__table td { padding: 5px 6px; border: 1px solid #bfbfbf; }
.wd__table td:first-child { width: 36%; background: #f2f2f2; font-weight: 600; }

/* --- Outlook --- */
.ol__top { display: flex; align-items: center; gap: 12px; height: 40px; flex: none; padding: 0 12px; background: #0f6cbd; color: #fff; }
.ol__waffle svg { width: 16px; height: 16px; }
.ol__brand { font-weight: 600; font-size: 14px; }
.ol__search { display: flex; align-items: center; gap: 8px; width: 240px; height: 26px; margin: 0 auto; padding: 0 10px; border-radius: 4px; background: #fff; color: #616161; font-size: 11.5px; }
.ol__me { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #c2e0ff; color: #0f548c; font-size: 10px; font-weight: 700; }
.ol__body { display: flex; flex: 1; min-height: 0; }
.ol__rail { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 40px; padding-top: 12px; background: #f0f0f0; color: #616161; flex: none; }
.ol__rail span { padding: 4px; border-radius: 4px; }
.ol__rail svg { width: 17px; height: 17px; }
.ol__rail .is-on { color: #0f6cbd; background: #fff; }
.ol__folders { width: 128px; flex: none; padding: 10px 0; background: #fafafa; border-right: 1px solid #e6e6e6; font-size: 11.5px; }
.ol__account { padding: 0 10px 8px; font-weight: 600; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol__folder { display: flex; justify-content: space-between; padding: 5px 10px; white-space: nowrap; }
.ol__folder span { overflow: hidden; text-overflow: ellipsis; }
.ol__folder.is-on { background: #e1effa; font-weight: 600; }
.ol__folder b { color: #0f6cbd; }
.ol__list { width: 196px; flex: none; border-right: 1px solid #e6e6e6; overflow: hidden; }
.ol__tabs { display: flex; gap: 14px; padding: 8px 12px 0; border-bottom: 1px solid #eee; font-size: 11.5px; color: #616161; }
.ol__tabs span { padding-bottom: 6px; }
.ol__tabs .is-on { color: #242424; font-weight: 600; box-shadow: inset 0 -2px 0 #0f6cbd; }
.ol__list ul { list-style: none; margin: 0; padding: 0; }
.ol__item { display: grid; grid-template-columns: 26px 1fr auto; gap: 0 8px; padding: 7px 10px 7px 8px; border-bottom: 1px solid #f0f0f0; border-left: 3px solid transparent; }
.ol__item .ol__avatar { grid-row: span 3; }
.ol__avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e6e1f5; color: #4f3c9b; font-size: 9.5px; font-weight: 700; }
.ol__avatar--lg { width: 32px; height: 32px; font-size: 11px; }
.ol__from { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol__time { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #616161; }
.ol__time svg { width: 11px; height: 11px; }
.ol__subject, .ol__preview { grid-column: 2 / -1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol__preview { color: #707070; }
.ol__item.is-unread { border-left-color: #0f6cbd; }
.ol__item.is-unread .ol__from { font-weight: 700; }
.ol__item.is-unread .ol__subject { color: #0f6cbd; font-weight: 600; }
.ol__item.is-active { background: #cfe4fa; border-left-color: #0f6cbd; }
.ol__read { flex: 1; min-width: 0; padding: 14px 16px; overflow: hidden; }
.ol__read--empty { display: grid; place-items: center; color: #8a8a8a; font-size: 12px; background: #fafafa; }
.ol__rsubject { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ol__rhead { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 11px; }
.ol__rhead strong { font-weight: 600; }
.ol__rhead small { display: block; color: #616161; margin-top: 1px; }
.ol__rtime { margin-left: auto; color: #616161; white-space: nowrap; }
.ol__att { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 11px; max-width: 100%; }
.ol__att strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol__att small { display: block; color: #616161; }
.ol__rbody { margin-top: 12px; font-size: 12px; color: #242424; }
.ol__rbody p + p { margin-top: 8px; }
.ol__toast { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 10px; align-items: center; width: 270px; padding: 12px; background: #fff; border-radius: 6px; border-left: 3px solid #0f6cbd; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); font-size: 11.5px; animation: toast 0.5s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ol__toast strong { display: block; }
@keyframes toast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Outlook, nouveau message */
.ol__compose { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ol__cbar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-bottom: 1px solid #e6e6e6; font-size: 11.5px; color: #424242; }
.ol__send { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 4px; background: #0f6cbd; color: #fff; font-weight: 600; }
.ol__send svg { width: 12px; height: 12px; }
.ol__cbtn { display: flex; align-items: center; gap: 4px; }
.ol__draft { margin-left: auto; color: #8a8a8a; font-size: 10.5px; }
.ol__crow { display: grid; grid-template-columns: 42px 1fr; align-items: center; min-height: 30px; padding: 0 12px; border-bottom: 1px solid #efefef; font-size: 11.5px; }
.ol__crow > span:first-child { color: #616161; }
.ol__crow--subject { grid-template-columns: 0 1fr; font-weight: 600; font-size: 12.5px; }
.ol__chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 12px; background: #e8f1fb; }
.ol__chip i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0f6cbd; color: #fff; font-size: 8.5px; font-style: normal; font-weight: 700; }
.ol__catt { padding: 0 12px; }
.ol__cbody { flex: 1; padding: 14px 12px; font-size: 12px; }
.ol__cbody p + p { margin-top: 8px; }
.ol__quote { margin-top: 16px; padding-top: 10px; border-top: 1px solid #e1e1e1; font-size: 11px; color: #616161; }
.ol__quote p { margin-top: 6px; }

/* --- ERP --- */
.erp { background: #eef2f6; }
.erp__menu { display: flex; gap: 14px; height: 22px; align-items: center; padding: 0 10px; background: #f7f7f7; border-bottom: 1px solid #d5d9df; font-size: 11px; flex: none; }
.erp__bar { height: 30px; display: flex; align-items: center; padding: 0 8px; background: linear-gradient(#fdfdfd, #e9edf2); border-bottom: 1px solid #c9d1db; flex: none; }
.erp__tools { display: flex; align-items: center; gap: 4px; }
.erp__tools i { width: 20px; height: 20px; border-radius: 3px; border: 1px solid #b9c4d1; background: linear-gradient(#fff, #dfe6ee); }
.erp__tools b { width: 1px; height: 18px; margin: 0 4px; background: #c2cad4; }
.erp__doctab { display: flex; padding: 4px 8px 0; background: #d9e1ea; flex: none; }
.erp__doctab span { padding: 5px 14px; background: #fff; border: 1px solid #b7c3d1; border-bottom: 0; border-top: 2px solid #2f6db5; font-size: 11px; font-weight: 600; border-radius: 3px 3px 0 0; }
.erp__main:has(.erp__preview) { padding: 0; }
.erp__main { flex: 1; min-height: 0; padding: 10px; overflow: hidden; background: #fff; border-top: 1px solid #b7c3d1; }
.erp__head { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 8px 10px; margin-bottom: 10px; background: #f3f6f9; border: 1px solid #d5dde6; }
.erp__head label { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 6px; font-size: 11px; color: #3a4452; }
.erp__in { height: 20px; padding: 2px 6px; background: #fff; border: 1px solid #9fb2c8; font-size: 11px; color: #111; white-space: nowrap; overflow: hidden; }
.erp__table { font-size: 11px; border: 1px solid #b7c7da; }
.erp__table th { padding: 3px 6px; background: linear-gradient(#e8eef6, #d4dfec); border: 1px solid #b7c7da; font-weight: 600; color: #26334a; }
.erp__table td { height: 21px; padding: 0 6px; border: 1px solid #e0e6ee; }
.erp__table tbody tr:nth-child(even) td { background: #f7f9fc; }
.erp__table tr.is-active td { background: #fff4c2; border-color: #e7cf6c; }
.erp__table th:first-child, .erp__table td:first-child { width: 28px; text-align: center; color: #7a8594; }
.erp__status { display: flex; height: 22px; flex: none; background: #dfe6ee; border-top: 1px solid #b7c3d1; font-size: 10.5px; color: #33404f; }
.erp__status span { padding: 3px 10px; border-right: 1px solid #b7c3d1; }
.erp__status span:last-child { margin-left: auto; border-right: 0; font-weight: 600; }
.erp__preview { height: 100%; display: flex; flex-direction: column; background: #8a939e; }
.erp__pbar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; background: #eef2f6; border-bottom: 1px solid #b7c3d1; }
.erp__btn { padding: 3px 10px; border: 1px solid #a9b6c5; border-radius: 2px; background: linear-gradient(#fff, #e2e8ef); font-size: 10.5px; }
.erp__zoom { margin-left: auto; font-size: 10.5px; color: #555; }
.erp__paper .ui-facts div { padding: 4px 0; }
.erp__paper { width: 400px; margin: 12px auto 0; flex: 1; padding: 16px 24px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); font-size: 11px; }
.erp__ptop { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid #333; }
.erp__ptop b { letter-spacing: 0.08em; font-size: 12px; }
.erp__ptop span { font-size: 9.5px; color: #666; }
.erp__ptitle { margin: 10px 0 6px; font-weight: 700; font-size: 11.5px; letter-spacing: 0.03em; }

/* --- logiciel de stock, Windows classique --- */
.lg { background: #d4d0c8; font-family: Tahoma, 'MS Sans Serif', 'Segoe UI', sans-serif; font-size: 11px; color: #000; }
.lg__title { display: flex; align-items: center; justify-content: space-between; height: 22px; flex: none; padding: 0 3px 0 6px; background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; font-weight: 700; }
.lg__ctl { display: flex; gap: 2px; }
.lg__ctl i { display: grid; place-items: center; width: 16px; height: 14px; background: #d4d0c8; color: #000; font-style: normal; font-size: 10px; line-height: 1; border: 1px solid; border-color: #fff #404040 #404040 #fff; }
.lg__menu { display: flex; gap: 14px; height: 20px; align-items: center; padding: 0 8px; flex: none; }
.lg__box { display: flex; align-items: center; gap: 8px; margin: 6px 8px; padding: 8px 10px 10px; border: 2px groove #fff; }
.lg__box legend { padding: 0 4px; }
.lg__input { width: 150px; height: 20px; padding: 2px 4px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.lg__btn { padding: 2px 14px; border: 2px solid; border-color: #fff #404040 #404040 #fff; background: #d4d0c8; }
.lg__check { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.lg__check i { display: grid; place-items: center; width: 13px; height: 13px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; font-style: normal; font-size: 9px; }
.lg__list { flex: 1; margin: 0 8px 6px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; overflow: hidden; }
.lg__table { font-size: 11px; }
.lg__table th { padding: 2px 6px; background: #d4d0c8; font-weight: 400; border: 1px solid; border-color: #fff #808080 #808080 #fff; }
.lg__table td { padding: 2px 6px; height: 19px; }
.lg__table tr.is-active td { background: #0a246a; color: #fff; }
.lg__table tr.is-active .ui-caret { background: #fff; }
.lg__status { display: flex; gap: 3px; height: 22px; flex: none; padding: 2px 3px; }
.lg__status span { flex: 1; padding: 1px 6px; border: 1px solid; border-color: #808080 #fff #fff #808080; }

/* --- CRM web --- */
.crm { background: #f3f4f6; }
.crm__top { display: flex; align-items: center; gap: 14px; height: 40px; flex: none; padding: 0 14px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.crm__logo { font-weight: 700; color: #5b4fcf; white-space: nowrap; }
.crm__search { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 260px; margin: 0 auto; height: 26px; padding: 0 10px; border-radius: 13px; background: #f3f4f6; color: #9ca3af; font-size: 11px; }
.crm__me { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #5b4fcf; color: #fff; font-size: 10px; font-weight: 700; }
.crm__nav { display: flex; gap: 18px; height: 32px; align-items: stretch; padding: 0 14px; flex: none; background: #fff; border-bottom: 1px solid #e5e7eb; color: #4b5563; font-size: 11.5px; }
.crm__nav span { display: flex; align-items: center; }
.crm__nav .is-on { color: #5b4fcf; font-weight: 600; box-shadow: inset 0 -2px 0 #5b4fcf; }
.crm__account { display: flex; align-items: center; gap: 12px; margin: 10px 12px 0; padding: 12px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }
.crm__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #ede9fe; color: #5b4fcf; font-weight: 700; }
.crm__account small { display: block; font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; }
.crm__account strong { display: block; font-size: 15px; }
.crm__account em { display: block; font-style: normal; font-size: 11px; color: #6b7280; }
.crm__actions { margin-left: auto; display: flex; gap: 6px; }
.crm__actions span { padding: 5px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 11px; background: #fff; }
.crm__actions .is-primary { background: #5b4fcf; border-color: #5b4fcf; color: #fff; }
.crm__tabs { display: flex; gap: 16px; margin: 8px 12px 0; padding: 0 4px; font-size: 11.5px; color: #6b7280; }
.crm__tabs span { padding: 6px 0; }
.crm__tabs .is-on { color: #111; font-weight: 600; box-shadow: inset 0 -2px 0 #5b4fcf; }
.crm__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 12px 0; }
.crm__card { padding: 10px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 11.5px; }
.crm__card h4 { margin: 0 0 6px; font-size: 12px; }
.crm__table th, .crm__table td { padding: 5px 4px; border-bottom: 1px solid #eef0f3; font-size: 11px; }
.crm__table th { color: #6b7280; font-weight: 500; }
.crm .ui-postit { bottom: 16px; right: 18px; }

/* --- logiciel de gestion du courtier --- */
.wa { background: #f7f8fa; }
.wa__top { display: flex; align-items: center; gap: 14px; height: 38px; flex: none; padding: 0 14px; background: #1d2b4f; color: #fff; }
.wa__logo { font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.wa__gsearch { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 250px; height: 24px; margin: 0 auto; padding: 0 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); font-size: 11px; }
.wa__user { font-size: 11px; opacity: 0.85; white-space: nowrap; }
.wa__body { display: flex; flex: 1; min-height: 0; }
.wa__side { display: flex; flex-direction: column; width: 130px; flex: none; padding-top: 8px; background: #fff; border-right: 1px solid #e3e6eb; font-size: 11.5px; color: #4a5568; }
.wa__side span { padding: 7px 14px; border-left: 3px solid transparent; }
.wa__side .is-on { background: #eef2fb; color: #1d2b4f; font-weight: 600; border-left-color: #1d2b4f; }
.wa__main { flex: 1; min-width: 0; padding: 12px 16px; }
.wa__crumb { font-size: 10.5px; color: #8a94a6; }
.wa__title { margin: 4px 0 12px; font-size: 15px; font-weight: 600; }
.wa__search { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; margin-bottom: 10px; background: #fff; border: 1px solid #2f6db5; border-radius: 3px; box-shadow: 0 0 0 2px rgba(47, 109, 181, 0.15); }
.wa__count { margin-left: auto; font-size: 10.5px; color: #8a94a6; }
.wa__table { background: #fff; border: 1px solid #e3e6eb; font-size: 11px; }
.wa__table th { padding: 6px 8px; background: #f3f5f8; color: #5a6475; border-bottom: 1px solid #e3e6eb; font-weight: 600; }
.wa__table td { padding: 6px 8px; border-bottom: 1px solid #eef0f3; }
.wa__table tr.is-active td { background: #fff8e1; }
.wa__table tr.is-active td:first-child { box-shadow: inset 3px 0 0 #e0a800; font-weight: 600; }
.wa__form { padding: 12px; background: #fff; border: 1px solid #e3e6eb; border-radius: 4px; }
.wa__buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.wa__buttons span { padding: 5px 14px; border: 1px solid #cfd5de; border-radius: 3px; background: #fff; font-size: 11px; }
.wa__buttons .is-primary { background: #1d2b4f; border-color: #1d2b4f; color: #fff; }
.wa__card { padding: 8px 14px; background: #fff; border: 1px solid #e3e6eb; border-radius: 4px; width: 330px; }

/* --- extranet assureur dans un navigateur --- */
.br__tabs { display: flex; align-items: flex-end; height: 34px; flex: none; padding-left: 8px; background: #dee1e6; color: #3c4043; }
.br__tab { display: flex; align-items: center; gap: 8px; width: 230px; height: 28px; padding: 0 10px; border-radius: 8px 8px 0 0; background: #fff; font-size: 11px; white-space: nowrap; overflow: hidden; }
.br__tab i { width: 12px; height: 12px; border-radius: 50%; background: #00798a; flex: none; }
.br__tab b { margin-left: auto; font-weight: 400; color: #666; }
.br__new { padding: 0 12px 7px; font-size: 16px; }
.br__tabs .ui-title__controls { margin-left: auto; height: 34px; align-self: flex-start; }
.br__bar { display: flex; align-items: center; gap: 10px; height: 34px; flex: none; padding: 0 10px; background: #fff; border-bottom: 1px solid #dadce0; color: #5f6368; }
.br__nav { display: flex; gap: 8px; }
.br__url { display: flex; align-items: center; gap: 8px; flex: 1; height: 24px; padding: 0 12px; border-radius: 12px; background: #f1f3f4; font-size: 11px; color: #202124; white-space: nowrap; overflow: hidden; }
.br__url svg { width: 11px; height: 11px; color: #5f6368; }
.br__page { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #f4f4f4; font-family: Verdana, Arial, sans-serif; font-size: 10.5px; }
.br__portal { display: flex; justify-content: space-between; align-items: center; height: 38px; flex: none; padding: 0 14px; background: #fff; }
.br__portal b { color: #00798a; letter-spacing: 0.12em; font-size: 12.5px; }
.br__portal span { color: #666; font-size: 9.5px; }
.br__menu { display: flex; height: 24px; flex: none; background: #00798a; color: #fff; }
.br__menu span { display: flex; align-items: center; padding: 0 12px; border-right: 1px solid rgba(255, 255, 255, 0.25); }
.br__menu .is-on { background: #005a66; font-weight: 700; }
.br__content { flex: 1; margin: 8px 14px; padding: 10px 14px; background: #fff; border: 1px solid #d0d0d0; }
.br__content h4 { margin: 0 0 8px; color: #00798a; font-size: 13px; }
.br__steps { display: flex; gap: 14px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dotted #bbb; color: #999; }
.br__steps span { display: flex; align-items: center; gap: 4px; }
.br__steps i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #ccc; color: #fff; font-style: normal; font-size: 9px; }
.br__steps .is-done { color: #00798a; }
.br__steps .is-done i, .br__steps .is-on i { background: #00798a; }
.br__steps .is-on { color: #000; font-weight: 700; }
.br__form { gap: 4px 16px; }
.br__form .ui-field { font-size: 10px; color: #333; font-weight: 700; }
.br__form .ui-field span:first-child::after { content: ' *'; color: #c00; }
.br__form .ui-input { height: 22px; border-radius: 0; border-color: #999; font-family: Verdana, Arial, sans-serif; font-size: 10.5px; padding: 3px 5px; }
.br__form .ui-field.is-active .ui-input { border-color: #00798a; box-shadow: none; background: #fffde7; }
.br__buttons { display: flex; justify-content: space-between; margin-top: 8px; }
.br__buttons span { padding: 3px 12px; border: 1px solid #888; background: linear-gradient(#fafafa, #ddd); }
.br__buttons .is-primary { background: #00798a; color: #fff; border-color: #005a66; }
.br__req { margin-top: 8px; font-size: 9px; color: #888; }

/* --- TMS et planning --- */
.tms { background: #f4f6f9; }
.tms__top { display: flex; align-items: center; gap: 12px; height: 38px; flex: none; padding: 0 12px; background: #0e1a2b; color: #fff; }
.tms__logo { padding: 3px 7px; border-radius: 3px; background: #f28c28; font-weight: 800; font-size: 11px; letter-spacing: 0.06em; }
.tms__title { font-weight: 600; }
.tms__date { margin-left: auto; padding: 4px 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); font-size: 11px; }
.tms__me { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2c3e5a; font-size: 10px; font-weight: 700; }
.tms__body { display: flex; flex: 1; min-height: 0; }
.tms__side { display: flex; flex-direction: column; width: 84px; flex: none; padding-top: 8px; background: #16243a; color: #9fb0c8; font-size: 11px; }
.tms__side span { padding: 8px 12px; border-left: 3px solid transparent; }
.tms__side .is-on { color: #fff; background: rgba(255, 255, 255, 0.06); border-left-color: #f28c28; }
.pl .tms__side .is-on { color: #9fb0c8; background: none; border-left-color: transparent; }
.pl .tms__side span:nth-child(2) { color: #fff; background: rgba(255, 255, 255, 0.06); border-left-color: #f28c28; }
.tms__main { flex: 1; min-width: 0; padding: 12px; }
.tms__filters { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 11px; }
.tms__filters span { padding: 4px 10px; border-radius: 12px; background: #fff; border: 1px solid #d8dee8; }
.tms__filters .is-on { background: #0e1a2b; color: #fff; border-color: #0e1a2b; }
.tms__filters .tms__need { margin-left: auto; border-color: #f28c28; color: #b35c0e; background: #fff7ef; }
.tms__table { background: #fff; border: 1px solid #dfe4ec; font-size: 11.5px; }
.tms__table th { padding: 7px 10px; background: #f0f3f8; color: #56637a; font-weight: 600; border-bottom: 1px solid #dfe4ec; }
.tms__table td { padding: 8px 10px; border-bottom: 1px solid #edf0f5; }
.tms__table tr.is-active td { background: #fff7ec; }
.tms__table tr.is-active td:first-child { box-shadow: inset 3px 0 0 #f28c28; font-weight: 700; }
.tms__chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; }
.tms__chip--busy { background: #e3edfb; color: #1f5fbf; }
.tms__chip--free { background: #e2f5e9; color: #1e7a45; }
.tms__chip--off { background: #eceef1; color: #6b7280; }
.pl__legend { display: flex; gap: 14px; margin-bottom: 10px; font-size: 10.5px; color: #56637a; }
.pl__key::before { content: ''; display: inline-block; width: 12px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }
.pl__key--busy::before { background: #3b6fd1; }
.pl__key--conflict::before { background: #fde4e4; border: 1px dashed #d13438; }
.pl__key--off::before { background: repeating-linear-gradient(45deg, #c9ced6 0 2px, #eef0f3 2px 4px); }
.pl__scale { position: relative; height: 16px; margin-left: 76px; font-size: 9.5px; color: #8a94a6; }
.pl__scale span { position: absolute; transform: translateX(-50%); }
.pl__scale span.is-last { transform: translateX(-100%); }
.pl__scale span:first-child { transform: none; }
.pl__rows { display: flex; flex-direction: column; gap: 4px; }
.pl__row { display: grid; grid-template-columns: 70px 1fr; gap: 6px; align-items: center; }
.pl__name { font-size: 11px; font-weight: 600; }
.pl__track { position: relative; height: 42px; background: #fff repeating-linear-gradient(90deg, #edf0f5 0 1px, transparent 1px 12.5%); border: 1px solid #e3e7ee; border-radius: 3px; }
.pl__bar { position: absolute; top: 5px; height: 16px; padding: 0 6px; border-radius: 3px; color: #fff; font-style: normal; font-size: 10px; line-height: 16px; white-space: nowrap; overflow: hidden; }
.pl__bar--busy { background: #3b6fd1; }
.pl__bar--conflict { top: 22px; background: #fde4e4; color: #a1181f; border: 1px dashed #d13438; line-height: 14px; font-weight: 600; animation: blink 1.6s ease-in-out infinite; }
.pl__bar--off { background: repeating-linear-gradient(45deg, #c9ced6 0 3px, #eef0f3 3px 6px); color: #6b7280; }
@keyframes blink { 50% { background: #f9c9c9; } }
.pl .ui-postit { bottom: 20px; right: 20px; }

/* --- téléphone sur le bureau --- */
.ph { flex-direction: row; background: radial-gradient(circle at 30% 20%, #efece7, #dcd7cf); }
.ph__desk { flex: 1; min-width: 0; padding: 22px 10px 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.ph__sheet { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; background: #fff; transform: rotate(-2deg); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); font-size: 10px; }
.ph__sheet b { letter-spacing: 0.06em; font-size: 10.5px; margin-bottom: 4px; }
.ph__line { display: block; height: 6px; border-radius: 2px; background: #e3e5e8; }
.ph__line--s { width: 60%; }
.ph__line--hl { height: auto; padding: 2px 4px; background: #fff176; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; outline: 2px solid #d13438; outline-offset: 2px; border-radius: 40% 10% 40% 10%; }
.ph__talk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ph__talk li { max-width: 88%; padding: 8px 10px; border-radius: 12px 12px 12px 3px; background: #fff; font-size: 11.5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ph__talk li span { display: block; font-size: 9.5px; color: #8a8a8a; margin-bottom: 1px; }
.ph__talk li.is-them { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: #dcf3e3; }
.ph__result { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 12px; background: #1f8a4c; color: #fff; font-size: 11px; font-weight: 600; }
.ph__result svg { width: 12px; height: 12px; }
.ph__device { position: relative; width: 190px; margin: 22px 26px 22px 6px; padding: 38px 14px 16px; border-radius: 30px; background: #111; color: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 2px #333; display: flex; flex-direction: column; align-items: center; flex: none; }
.ph__notch { position: absolute; top: 10px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #000; }
.ph__who { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ph__avatar { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: #5b5b5f; font-size: 22px; }
.ph__who strong { font-size: 15px; font-weight: 500; }
.ph__who small { font-size: 10.5px; color: #aaa; }
.ph__who em { margin-top: 4px; font-style: normal; font-size: 12px; color: #9be3b0; font-variant-numeric: tabular-nums; }
.ph__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; margin-top: 24px; }
.ph__keys span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8.5px; color: #ccc; }
.ph__keys i { width: 40px; height: 40px; border-radius: 50%; background: #333; }
.ph__hang { display: grid; place-items: center; width: 48px; height: 48px; margin-top: auto; border-radius: 50%; background: #e0352b; }
.ph__hang svg { width: 20px; height: 20px; transform: rotate(135deg); }