/* Jetons de couleur des écrans imités : clair par défaut, sombre avec le thème sombre (bouton « Sombre » ou réglage
   du système). Les couleurs d'état (vert / rouge / feux SAP, vert Adyen) restent celles des applications. */
.sap { --s-chrome: #f3f5f7; --s-chrome-bord: #c9d1d9; --s-titre1: #f2f5f8; --s-titre2: #dce4eb; --s-titre-fg: #1f2d3d; --s-atb: #e8eef3; --s-corps: #f7f9fa; --s-grp-h: #e1e8ee; --s-grp-bord: #c3ccd5; --s-grp-bg: #fff; --s-ligne: #e6ebf0; --s-fg: #32363a; --s-mut: #5b6670; --s-in-bg: #fff; --s-in-bord: #8d9aa7; --s-focus: #fff3b5; --s-focus-bord: #e07b00; --s-multi: #ffe28a; --s-multi-bord: #c9a227; --s-th: #e6ecf1; --s-th-bord: #c7d0d8; --s-cell: #e1e6eb; --s-cle: #d9eaf8; --s-sel: #ffe7a0; --s-st: #fff5c4; --s-hover: #eef4fb; --s-plus: #f6f7f8; --s-pop-t1: #f0f4f7; --s-pop-t2: #d9e2ea; --s-pop-bord: #7d8b99; --s-sb: #e9edf1; --s-sb-bord: #c9d1d9; --s-win: #1d4a78; --s-btn-hover: #dfe8f0; --s-actif: #ffe9a3; --s-actif-bord: #e0a800; --s-ro: #f2f4f6; --s-arbre-sel: #cfe3f7; }
.xl, .xl-filtre { --x-vert-txt: #217346; --x-bg: #fff; --x-bon: #c6efce; --x-bon-fg: #006100; --x-bord: #e1dfdd; --x-bord0: #c8c8c8; --x-bord2: #c8c6c4; --x-fg: #222; --x-fg2: #444; --x-gris: #f3f2f1; --x-h: #fafafa; --x-mut: #777; --x-neuf: #fff2b3; --x-vert: #217346; }
.ady { --a-at: #fff3d6; --a-at-fg: #8a5a00; --a-bg: #f3f6f9; --a-bord: #e3e8ee; --a-bord0: #c9d1da; --a-bord2: #d5dde6; --a-card: #fff; --a-cell: #f0f3f6; --a-chip: #eef2f6; --a-fg: #00112c; --a-hover: #f3f7fb; --a-ko: #ffe5e5; --a-ko-fg: #b00020; --a-ligne: #c5e9d4; --a-mut: #6b7a8c; --a-mut2: #4b5b6e; --a-mut3: #8796a8; --a-nv: #eef0ff; --a-ok: #e3f7eb; --a-ok-fg: #08793a; --a-on: #eaf8f0; --a-rb: #e8ecff; --a-rb-fg: #2f43c9; }
.ol { --o-band: #fff4ce; --o-band-bord: #f2d575; --o-bg: #fff; --o-bord: #e0e0e0; --o-bord0: #c8c8c8; --o-bord2: #d1d1d1; --o-cell: #efefef; --o-dos: #f5f5f5; --o-fg: #242424; --o-mut: #616161; --o-rouge: #c50f1f; --o-sel: #e0ebf7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sap { --s-chrome: #232a31; --s-chrome-bord: #3a444e; --s-titre1: #2b343d; --s-titre2: #222a32; --s-titre-fg: #e8edf2; --s-atb: #262e36; --s-corps: #1c2228; --s-grp-h: #2b343d; --s-grp-bord: #3a444e; --s-grp-bg: #20272e; --s-ligne: #2e3740; --s-fg: #e3e8ee; --s-mut: #9aa6b2; --s-in-bg: #29313a; --s-in-bord: #56626e; --s-focus: #4d4318; --s-focus-bord: #d39d00; --s-multi: #4d4318; --s-multi-bord: #8a6d00; --s-th: #2f3842; --s-th-bord: #3a444e; --s-cell: #333d47; --s-cle: #23384d; --s-sel: #5a4a17; --s-st: #433d1d; --s-hover: #2a3a4c; --s-plus: #262d35; --s-pop-t1: #2b343d; --s-pop-t2: #222a32; --s-pop-bord: #56626e; --s-sb: #232a31; --s-sb-bord: #3a444e; --s-win: #0f2a47; --s-btn-hover: #2f3a45; --s-actif: #4d4318; --s-actif-bord: #d39d00; --s-ro: #2b333c; --s-arbre-sel: #23384d; }
  :root:not([data-theme="light"]) .xl { --x-vert-txt: #6fcf97; --x-bg: #1f1f1f; --x-bon: #1e4d2b; --x-bon-fg: #b6e6c0; --x-bord: #3a3a3a; --x-bord0: #3a3a3a; --x-bord2: #4a4a4a; --x-fg: #e8e8e8; --x-fg2: #cfcfcf; --x-gris: #292929; --x-h: #262626; --x-mut: #a9a9a9; --x-neuf: #4d4318; --x-vert: #185c37; }
  :root:not([data-theme="light"]) .xl-filtre { --x-bg: #1f1f1f; --x-bon: #1e4d2b; --x-bon-fg: #b6e6c0; --x-bord: #3a3a3a; --x-bord0: #3a3a3a; --x-bord2: #4a4a4a; --x-fg: #e8e8e8; --x-fg2: #cfcfcf; --x-gris: #292929; --x-h: #262626; --x-mut: #a9a9a9; --x-neuf: #4d4318; --x-vert: #185c37; }
  :root:not([data-theme="light"]) .ady { --a-at: #3d2f0f; --a-at-fg: #f3c86a; --a-bg: #0b1626; --a-bord: #22344f; --a-bord0: #22344f; --a-bord2: #2c4262; --a-card: #13223a; --a-cell: #1a2a42; --a-chip: #1d2f4a; --a-fg: #e6edf6; --a-hover: #17283f; --a-ko: #4a1b1b; --a-ko-fg: #ff9c9c; --a-ligne: #2b5a40; --a-mut: #93a4ba; --a-mut2: #a9b8cb; --a-mut3: #7d8ea6; --a-nv: #1b2550; --a-ok: #123d27; --a-ok-fg: #7fe0a6; --a-on: #143a28; --a-rb: #1f2a5c; --a-rb-fg: #aab6ff; }
  :root:not([data-theme="light"]) .ol { --o-band: #3d3519; --o-band-bord: #7a6a2c; --o-bg: #1f1f1f; --o-bord: #3a3a3a; --o-bord0: #3a3a3a; --o-bord2: #4a4a4a; --o-cell: #303030; --o-dos: #262626; --o-fg: #e6e6e6; --o-mut: #a7a7a7; --o-rouge: #ff8a8a; --o-sel: #1f3550; }
}
:root[data-theme="dark"] .sap { --s-chrome: #232a31; --s-chrome-bord: #3a444e; --s-titre1: #2b343d; --s-titre2: #222a32; --s-titre-fg: #e8edf2; --s-atb: #262e36; --s-corps: #1c2228; --s-grp-h: #2b343d; --s-grp-bord: #3a444e; --s-grp-bg: #20272e; --s-ligne: #2e3740; --s-fg: #e3e8ee; --s-mut: #9aa6b2; --s-in-bg: #29313a; --s-in-bord: #56626e; --s-focus: #4d4318; --s-focus-bord: #d39d00; --s-multi: #4d4318; --s-multi-bord: #8a6d00; --s-th: #2f3842; --s-th-bord: #3a444e; --s-cell: #333d47; --s-cle: #23384d; --s-sel: #5a4a17; --s-st: #433d1d; --s-hover: #2a3a4c; --s-plus: #262d35; --s-pop-t1: #2b343d; --s-pop-t2: #222a32; --s-pop-bord: #56626e; --s-sb: #232a31; --s-sb-bord: #3a444e; --s-win: #0f2a47; --s-btn-hover: #2f3a45; --s-actif: #4d4318; --s-actif-bord: #d39d00; --s-ro: #2b333c; --s-arbre-sel: #23384d; }
:root[data-theme="dark"] .xl { --x-vert-txt: #6fcf97; --x-bg: #1f1f1f; --x-bon: #1e4d2b; --x-bon-fg: #b6e6c0; --x-bord: #3a3a3a; --x-bord0: #3a3a3a; --x-bord2: #4a4a4a; --x-fg: #e8e8e8; --x-fg2: #cfcfcf; --x-gris: #292929; --x-h: #262626; --x-mut: #a9a9a9; --x-neuf: #4d4318; --x-vert: #185c37; }
:root[data-theme="dark"] .xl-filtre { --x-bg: #1f1f1f; --x-bon: #1e4d2b; --x-bon-fg: #b6e6c0; --x-bord: #3a3a3a; --x-bord0: #3a3a3a; --x-bord2: #4a4a4a; --x-fg: #e8e8e8; --x-fg2: #cfcfcf; --x-gris: #292929; --x-h: #262626; --x-mut: #a9a9a9; --x-neuf: #4d4318; --x-vert: #185c37; }
:root[data-theme="dark"] .ady { --a-at: #3d2f0f; --a-at-fg: #f3c86a; --a-bg: #0b1626; --a-bord: #22344f; --a-bord0: #22344f; --a-bord2: #2c4262; --a-card: #13223a; --a-cell: #1a2a42; --a-chip: #1d2f4a; --a-fg: #e6edf6; --a-hover: #17283f; --a-ko: #4a1b1b; --a-ko-fg: #ff9c9c; --a-ligne: #2b5a40; --a-mut: #93a4ba; --a-mut2: #a9b8cb; --a-mut3: #7d8ea6; --a-nv: #1b2550; --a-ok: #123d27; --a-ok-fg: #7fe0a6; --a-on: #143a28; --a-rb: #1f2a5c; --a-rb-fg: #aab6ff; }
:root[data-theme="dark"] .ol { --o-band: #3d3519; --o-band-bord: #7a6a2c; --o-bg: #1f1f1f; --o-bord: #3a3a3a; --o-bord0: #3a3a3a; --o-bord2: #4a4a4a; --o-cell: #303030; --o-dos: #262626; --o-fg: #e6e6e6; --o-mut: #a7a7a7; --o-rouge: #ff8a8a; --o-sel: #1f3550; }

/* Les écrans des systèmes, imités (SAP GUI, Excel, Customer Area Adyen, Outlook) — partagés par le déroulé et la console.
   Toutes les tailles sont en em : la taille de police du conteneur règle l'échelle (colonne active plus grande). */

/* ---------------------------------------------------------------- SAP GUI */
/* D'après les écrans relevés sur C93 le 15/10 (SAP GUI 8.00, thème clair) : barre de menus aux initiales soulignées,
   barre standard à icônes rondes (coche verte, retour vert, quitter orange, interrompre rouge), bandeau de titre en
   italique gras, barre d'application, cadres à bandeau, champs à bord gris (jaune au focus), bouton de sélection
   multiple, liste ALV avec sa barre d'outils, fenêtres à bandeau, barre d'état avec le logo SAP. */
.sap { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--s-corps); color: var(--s-fg);
  font-family: "72", "Segoe UI", Arial, "Helvetica Neue", sans-serif; border: 1px solid var(--s-chrome-bord); border-radius: 0.3em; overflow: hidden; }
.sap-svg { width: 1.15em; height: 1.15em; flex: none; display: block; }
.sap-menu { display: flex; align-items: center; gap: 1.05em; padding: 0.22em 0.55em; background: var(--s-chrome); font-size: 0.9em; color: var(--s-fg); white-space: nowrap; overflow: hidden; }
.sap-menu > .sap-svg { width: 1.05em; height: 1.05em; }
.sap-menu u { text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.sap-win { margin-left: auto; display: inline-flex; gap: 0.15em; padding: 0.1em 0.35em; background: var(--s-win); border-radius: 0 0 0.35em 0.35em; margin-top: -0.25em; }
.sap-win i { font-style: normal; color: #fff; font-size: 0.82em; width: 1.4em; text-align: center; line-height: 1.5; }
.sap-win i.x { background: #c4314b; border-radius: 0.2em; }
.sap-tb { display: flex; align-items: center; gap: 0.2em; padding: 0.22em 0.5em 0.3em; background: var(--s-chrome); border-bottom: 1px solid var(--s-chrome-bord); overflow: hidden; }
.sap-tb-plus { display: contents; }
.sap-ic { display: inline-flex; align-items: center; justify-content: center; gap: 0.1em; min-width: 1.55em; height: 1.55em; padding: 0 0.12em; border-radius: 0.2em; flex: none; color: var(--s-mut); border: 1px solid transparent; }
.sap-ic.gris { opacity: 0.55; }
.sap-ic.plat { color: var(--s-mut); }
.sap-ic.ch { font-size: 0.95em; font-weight: 700; width: 1em; min-width: 1em; }
.sap-ic.actif { background: var(--s-actif); border-color: var(--s-actif-bord); box-shadow: 0 0 0 0.16em rgba(224, 168, 0, 0.3); }
.sap-ic .dd { font-size: 0.6em; font-weight: 400; }
.sap-cmd { display: inline-flex; align-items: stretch; margin: 0 0.1em; border: 1px solid var(--s-in-bord); border-radius: 0.12em; background: var(--s-in-bg); }
.sap-cmd b { display: grid; place-items: center; width: 1.2em; font-size: 0.7em; font-weight: 400; color: var(--s-mut); border-left: 1px solid var(--s-ligne); }
.sap-okcd { min-width: 8.5em; padding: 0.12em 0.35em; font-family: "Courier New", monospace; font-size: 0.92em; white-space: nowrap; overflow: hidden; background: transparent; border: 0; }
.sap-okcd.tape { background: var(--s-focus); box-shadow: inset 0 0 0 1px var(--s-focus-bord); }
input.sap-okcd { font-family: "Courier New", monospace; color: var(--s-fg); outline: none; }
.sap-sep { width: 1px; height: 1.25em; background: var(--s-chrome-bord); margin: 0 0.2em; flex: none; }
.sap-titre { padding: 0.4em 0.75em 0.35em; font-size: 1.12em; font-weight: 700; font-style: italic; color: var(--s-titre-fg);
  background: linear-gradient(var(--s-titre1), var(--s-titre2)); border-bottom: 1px solid var(--s-chrome-bord); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-atb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15em 0.25em; padding: 0.22em 0.55em; min-height: 1.95em; background: var(--s-atb); border-bottom: 1px solid var(--s-chrome-bord); }
.sap-btn { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.14em 0.45em; font-size: 0.88em; border: 1px solid transparent; border-radius: 0.2em; color: var(--s-fg); white-space: nowrap; }
.sap-btn.seul { padding: 0.14em 0.2em; }
.sap-btn[data-cle] { cursor: pointer; }
.sap-btn[data-cle]:hover { background: var(--s-btn-hover); border-color: var(--s-chrome-bord); }
.sap-btn.actif { background: var(--s-actif); border-color: var(--s-actif-bord); box-shadow: 0 0 0 0.18em rgba(224, 168, 0, 0.35); }
.sap-corps { flex: 1; min-height: 0; overflow: auto; padding: 0.55em 0.65em; background: var(--s-corps); }
.sap-corps.fond { background: var(--s-corps); }
.sap-grp { border: 1px solid var(--s-grp-bord); border-radius: 0.15em; margin: 0 0 0.55em; background: var(--s-grp-bg); }
.sap-grp > header { padding: 0.2em 0.55em; font-size: 0.88em; background: var(--s-grp-h); border-bottom: 1px solid var(--s-grp-bord); color: var(--s-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-grp.nu { border-color: transparent; background: transparent; }
.sap-grp-c { padding: 0.3em 0.6em 0.4em; }
.sap-sous { margin: 0.45em 0 0.15em; font-size: 0.84em; color: var(--s-mut); font-weight: 600; }
.sap-ligne { display: grid; grid-template-columns: minmax(8em, 14em) minmax(5em, 9.5em) auto minmax(5em, 9.5em) auto; justify-content: start; align-items: center; gap: 0.2em 0.45em; padding: 0.12em 0; }
.sap-lib { font-size: 0.9em; color: var(--s-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--s-ligne); padding-bottom: 0.1em; }
.sap-in { min-height: 1.45em; padding: 0.12em 0.35em; background: var(--s-in-bg); border: 1px solid var(--s-in-bord); border-radius: 0.1em; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input.sap-in { width: 100%; box-sizing: border-box; min-width: 0; font: inherit; font-size: 0.9em; color: var(--s-fg); outline: none; }
input.sap-in:focus { background: var(--s-focus); border-color: var(--s-focus-bord); }
.sap-in.ro { background: var(--s-ro); color: var(--s-mut); }
.sap-in.focus { background: var(--s-focus); border-color: var(--s-focus-bord); box-shadow: 0 0 0 0.16em rgba(224, 123, 0, 0.3); animation: sap-pulse 0.9s ease-out 1; }
@keyframes sap-pulse { from { box-shadow: 0 0 0 0.5em rgba(224, 123, 0, 0.5); } to { box-shadow: 0 0 0 0.16em rgba(224, 123, 0, 0.3); } }
.sap-a { font-size: 0.86em; color: var(--s-mut); }
.sap-multi { display: inline-grid; place-items: center; width: 1.45em; height: 1.35em; background: var(--s-multi); border: 1px solid var(--s-multi-bord); border-radius: 0.15em; }
.sap-multi .sap-svg { width: 0.95em; height: 0.95em; }
.sap-cases { display: flex; flex-wrap: wrap; gap: 0.25em 1.1em; padding: 0.2em 0; }
.sap-case { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.9em; white-space: nowrap; }
.sap-case i { display: inline-grid; place-items: center; width: 1em; height: 1em; border: 1px solid var(--s-in-bord); border-radius: 0.1em; background: var(--s-in-bg); font-style: normal; font-size: 0.82em; color: #1f5fa6; }
.sap-case.radio i { border-radius: 50%; }
.sap-case input { margin: 0; }
.sap-case.focus i { box-shadow: 0 0 0 0.18em rgba(224, 123, 0, 0.45); background: var(--s-focus); }
.sap-ubtn { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.35em; }
.sap-ubtn .sap-btn { border-color: var(--s-grp-bord); background: var(--s-chrome); }
.sap-alvbox { border: 1px solid var(--s-grp-bord); background: var(--s-grp-bg); overflow: auto; max-width: 100%; }
.sap-alvtb { display: flex; align-items: center; gap: 0.05em; padding: 0.15em 0.3em; background: var(--s-chrome); border-bottom: 1px solid var(--s-grp-bord); position: sticky; left: 0; }
.sap-alvtb .sep { width: 1px; height: 1.1em; background: var(--s-chrome-bord); margin: 0 0.2em; }
.sap-alv { border-collapse: collapse; font-size: 0.86em; background: var(--s-grp-bg); min-width: 100%; }
.sap-alv th { position: sticky; top: 0; background: var(--s-th); color: var(--s-fg); font-weight: 700; text-align: left; padding: 0.22em 0.45em; border: 1px solid var(--s-th-bord); white-space: nowrap; }
.sap-alv td { padding: 0.18em 0.45em; border: 1px solid var(--s-cell); white-space: nowrap; max-width: 22em; overflow: hidden; text-overflow: ellipsis; }
.sap-alv td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sap-alv td.cle { background: var(--s-cle); }
.sap-alv tr.st td { background: var(--s-st); font-weight: 700; }
.sap-alv tr.sel td { background: var(--s-sel); }
.sap-alv tr.sel td:first-child { box-shadow: inset 0.25em 0 0 var(--s-actif-bord); }
.sap-alv tr.plus td { color: var(--s-mut); font-style: italic; background: var(--s-plus); }
.sap-alv.clic tbody tr:not(.plus) { cursor: pointer; }
.sap-alv.clic tbody tr:not(.plus):hover td { background: var(--s-hover); }
.feu { display: inline-flex; gap: 0.12em; padding: 0.12em 0.2em; background: #3d4650; border-radius: 0.3em; vertical-align: middle; }
.feu i { width: 0.55em; height: 0.55em; border-radius: 50%; background: #5d6772; }
.feu.rouge i:nth-child(1) { background: #ff3b30; box-shadow: 0 0 0.3em #ff3b30; }
.feu.jaune i:nth-child(2) { background: #ffcc00; box-shadow: 0 0 0.3em #ffcc00; }
.feu.vert i:nth-child(3) { background: #34c759; box-shadow: 0 0 0.3em #34c759; }
.feu + span { margin-left: 0.35em; }
.sap-arbre { font-size: 0.88em; background: var(--s-grp-bg); border: 1px solid var(--s-grp-bord); }
.sap-arbre .tete { padding: 0.2em 0.5em; background: var(--s-th); font-weight: 700; border-bottom: 1px solid var(--s-th-bord); }
.sap-arbre > div:not(.tete) { display: flex; align-items: center; gap: 0.3em; padding: 0.14em 0.4em; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--s-cell); }
.sap-arbre .tx { overflow: hidden; text-overflow: ellipsis; }
.sap-arbre .pli { display: inline-block; width: 0.8em; color: var(--s-mut); font-size: 0.85em; }
.sap-arbre div.n0 { font-weight: 600; }
.sap-arbre div.sel { background: var(--s-arbre-sel); box-shadow: inset 0.25em 0 0 #1f6fbf; }
.sap-arbre .plus { color: var(--s-mut); font-style: italic; }
.sap-arbre.accueil { border: 0; background: transparent; }
.sap-arbre.accueil > div { border-bottom: 0; }
.sap-note { margin: 0.8em 0.4em; color: var(--s-mut); font-size: 0.9em; }
.sap-doc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35em 0.8em; }
.sap-doc label { display: block; font-size: 0.82em; color: var(--s-mut); margin-bottom: 0.1em; }
.sap-vide { display: grid; place-items: center; height: 100%; color: var(--s-mut); font-size: 0.95em; text-align: center; padding: 1em; }
.sap-sb { display: flex; align-items: center; gap: 0.45em; padding: 0.25em 0.6em; background: var(--s-sb); border-top: 1px solid var(--s-sb-bord); font-size: 0.86em; min-height: 1.85em; }
.sap-sb .ico { display: inline-flex; width: 1.15em; flex: none; }
.sap-sb .msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-sb .logo { flex: none; padding: 0 0.55em 0 0.4em; font: italic 700 0.82em/1.45 Arial, sans-serif; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(#00aeef, #0070c0); clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.sap-sb .sys { color: var(--s-mut); white-space: nowrap; }
.sap-sb.neuf { animation: sap-sb 1.2s ease-out 1; }
@keyframes sap-sb { from { background: var(--s-actif); } to { background: var(--s-sb); } }
.sap-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30em, 88%); max-height: 86%; display: flex; flex-direction: column;
  background: var(--s-grp-bg); border: 1px solid var(--s-pop-bord); border-radius: 0.2em; box-shadow: 0 0.6em 2em rgba(0, 0, 0, 0.3); z-index: 3; animation: sap-pop 0.25s ease-out 1; }
.sap-pop.large { width: min(40em, 94%); }
.sap-pop.selection { top: 5.3em; bottom: 2.3em; transform: translateX(-50%); max-height: none; animation-name: sap-fondu; }
@keyframes sap-fondu { from { opacity: 0; } }
.sap-in.large { grid-column: span 3; }
@keyframes sap-pop { from { transform: translate(-50%, -46%); opacity: 0; } }
.sap-pop .t { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0.3em 0.3em 0.6em; font-size: 0.92em; font-weight: 700; color: var(--s-titre-fg);
  background: linear-gradient(var(--s-pop-t1), var(--s-pop-t2)); border-bottom: 1px solid var(--s-chrome-bord); }
.sap-pop .t span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-pop .t .x { flex: none; color: #fff; background: #c4314b; border-radius: 0.2em; padding: 0 0.35em; font-weight: 400; font-size: 0.85em; }
.sap-pop .c { padding: 0.55em 0.65em; overflow: auto; min-height: 0; }
.sap-pop .c .sap-grp { margin-bottom: 0.45em; }
.sap-pop .opt { display: flex; align-items: center; gap: 0.45em; padding: 0.12em 0; font-size: 0.9em; }
.sap-pop .opt i { width: 0.9em; height: 0.9em; border-radius: 50%; border: 1px solid var(--s-in-bord); display: inline-block; flex: none; }
.sap-pop .opt.on i { background: radial-gradient(circle, #1f5fa6 40%, var(--s-in-bg) 45%); }
.sap-pop .b { display: flex; gap: 0.25em; padding: 0.3em 0.55em; border-top: 1px solid var(--s-chrome-bord); background: var(--s-chrome); }
/* colonne étroite du déroulé : la barre standard garde l'essentiel, le titre et les cadres se replient */
@container (max-width: 34em) {
  .sap-tb-plus { display: none; }
  .sap-menu > span:not(.sap-win):nth-child(n+5) { display: none; }
  .sap-ligne { grid-template-columns: minmax(6em, 1fr) minmax(4.5em, 1fr) auto minmax(4.5em, 1fr) auto; }
  .sap-sb .sys { display: none; }
}
@container (max-width: 24em) {
  .sap-menu > span:not(.sap-win):nth-child(n+3) { display: none; }
  .sap-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sap-ligne .sap-a, .sap-ligne .sap-multi, .sap-ligne > span:empty { display: none; }
  .sap-ligne > .sap-in:nth-of-type(2) { display: none; }
  .sap-sb .logo { display: none; }
}

/* ---------------------------------------------------------------- Excel */
.xl { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--x-bg); color: var(--x-fg); font-family: "Segoe UI", Calibri, Arial, sans-serif; border: 1px solid var(--x-bord0); border-radius: 0.3em; overflow: hidden; }
.xl-t { display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.7em; background: var(--x-vert); color: #fff; font-size: 0.95em; white-space: nowrap; overflow: hidden; }
.xl-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.xl-t .ch { margin-left: auto; opacity: 0.85; font-size: 0.88em; overflow: hidden; text-overflow: ellipsis; }
.xl-r { display: flex; gap: 1.1em; padding: 0.3em 0.8em 0; background: var(--x-gris); border-bottom: 1px solid var(--x-bord); font-size: 0.86em; color: var(--x-fg2); white-space: nowrap; overflow: hidden; }
.xl-r span { padding-bottom: 0.25em; }
.xl-r span.on { color: var(--x-vert-txt); border-bottom: 0.18em solid var(--x-vert-txt); font-weight: 600; }
.xl-f { display: flex; align-items: center; gap: 0.5em; padding: 0.25em 0.5em; border-bottom: 1px solid var(--x-bord); font-size: 0.88em; }
.xl-f .nb { width: 4.5em; padding: 0.1em 0.3em; border: 1px solid var(--x-bord2); }
.xl-f .fx { color: var(--x-mut); font-style: italic; }
.xl-f .v { flex: 1; padding: 0.1em 0.3em; border: 1px solid var(--x-bord2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-g { flex: 1; min-height: 0; overflow: auto; }
.xl-g table { border-collapse: collapse; font-size: 0.86em; }
.xl-g th, .xl-g td { border: 1px solid var(--x-bord); padding: 0.16em 0.4em; white-space: nowrap; max-width: 16em; overflow: hidden; text-overflow: ellipsis; height: 1.5em; }
.xl-g thead th { position: sticky; top: 0; background: var(--x-gris); color: var(--x-mut); font-weight: 400; text-align: center; min-width: 4.5em; z-index: 1; }
.xl-g td.rn, .xl-g th.rn { background: var(--x-gris); color: var(--x-mut); text-align: center; min-width: 2.6em; position: sticky; left: 0; }
.xl-g tr.h td:not(.rn) { font-weight: 700; background: var(--x-h); }
.xl-g tr.h td .ff { float: right; margin-left: 0.4em; width: 1.05em; height: 1.05em; line-height: 1em; text-align: center; border: 1px solid var(--x-bord2); border-radius: 0.12em; font-size: 0.75em; font-weight: 400; color: var(--x-mut); background: var(--x-bg); cursor: default; }
.xl-g tr.h td .ff.on { background: var(--x-vert); color: #fff; border-color: var(--x-vert); }
.xl-g td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xl-g td.bon { background: var(--x-bon); color: var(--x-bon-fg); font-weight: 600; }
.xl-g td.sel { outline: 0.15em solid var(--x-vert-txt); outline-offset: -0.15em; }
.xl-g tr.plus td { color: var(--x-mut); font-style: italic; }
.xl-g tr.neuf td:not(.rn) { animation: xl-neuf 1.3s ease-out 1; }
@keyframes xl-neuf { from { background: var(--x-neuf); } }
.xl-o { display: flex; align-items: stretch; gap: 0.1em; padding: 0 0.5em; background: var(--x-gris); border-top: 1px solid var(--x-bord); font-size: 0.86em; overflow-x: auto; white-space: nowrap; }
.xl-o span { padding: 0.3em 0.8em; color: var(--x-fg2); cursor: pointer; }
.xl-o span.on { background: var(--x-bg); color: var(--x-vert-txt); font-weight: 700; border-bottom: 0.2em solid var(--x-vert-txt); }
.xl-s { display: flex; justify-content: space-between; gap: 1em; padding: 0.2em 0.7em; background: var(--x-vert); color: #fff; font-size: 0.82em; white-space: nowrap; }
.xl-filtre { position: absolute; z-index: 5; min-width: 14em; max-height: 20em; overflow: auto; background: var(--x-bg); color: var(--x-fg); border: 1px solid var(--x-bord2); box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.25); font-size: 0.86rem; padding: 0.4em; }
.xl-filtre input[type=search] { width: 100%; margin-bottom: 0.3em; padding: 0.2em 0.3em; border: 1px solid var(--x-bord2); }
.xl-filtre label { display: flex; gap: 0.4em; align-items: center; padding: 0.1em 0; white-space: nowrap; }
.xl-filtre .b { display: flex; gap: 0.3em; justify-content: flex-end; margin-top: 0.4em; }
.xl-filtre button { font: inherit; padding: 0.15em 0.6em; border: 1px solid var(--x-bord2); background: var(--x-gris); cursor: pointer; }
.xl-filtre button.p { background: var(--x-vert); color: #fff; border-color: var(--x-vert); }

/* ---------------------------------------------------------------- Adyen Customer Area */
.ady { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); height: 100%; min-height: 0; background: var(--a-bg); color: var(--a-fg); font-family: Inter, "Segoe UI", Arial, sans-serif; border: 1px solid var(--a-bord0); border-radius: 0.3em; overflow: hidden; }
.ady-nav { background: #00112c; color: #c6d0dc; padding: 0.7em 0; font-size: 0.9em; display: flex; flex-direction: column; gap: 0.1em; }
.ady-nav .m { padding: 0 0.9em 0.7em; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.ady-nav .m small { display: block; font-weight: 400; color: #8a9bb0; font-size: 0.8em; }
.ady-nav span { padding: 0.35em 0.9em; border-left: 0.22em solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ady-nav span.sous { padding-left: 1.8em; font-size: 0.92em; }
.ady-nav span.on { color: #fff; background: rgba(255, 255, 255, 0.08); border-left-color: #0abf53; }
.ady-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ady-top { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.8em; background: var(--a-card); border-bottom: 1px solid var(--a-bord); }
.ady-cpt { padding: 0.2em 0.6em; border: 1px solid var(--a-bord2); border-radius: 0.4em; font-size: 0.9em; white-space: nowrap; }
.ady-cpt b { font-weight: 600; }
.ady-q { flex: 1; padding: 0.22em 0.6em; border: 1px solid var(--a-bord2); border-radius: 0.4em; color: var(--a-mut); font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ady-q b { color: var(--a-fg); font-weight: 500; }
.ady-api { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; padding: 0.4em 0.8em; background: #0c1b33; color: #d8e1ec; font-size: 0.86em; }
.ady-api code { font-family: "IBM Plex Mono", Consolas, monospace; color: #fff; overflow-wrap: anywhere; }
.ady-api .tag { padding: 0.05em 0.45em; border-radius: 0.3em; background: #0abf53; color: #00112c; font-weight: 700; font-size: 0.85em; }
.ady-api .code { padding: 0.05em 0.45em; border-radius: 0.3em; font-weight: 700; font-family: "IBM Plex Mono", Consolas, monospace; }
.ady-api .c2 { background: #0abf53; color: #00112c; } .ady-api .c4 { background: #ffb020; color: #00112c; } .ady-api .c0 { background: #ff5d5d; color: #fff; }
.ady-api .note { color: #8fa3ba; }
.ady-c { flex: 1; min-height: 0; overflow: auto; padding: 0.8em; }
.ady-card { background: var(--a-card); border: 1px solid var(--a-bord); border-radius: 0.6em; padding: 0.7em 0.9em; margin-bottom: 0.7em; }
.ady-card h4 { margin: 0 0 0.5em; font-size: 0.95em; }
.ady-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em 0.8em; margin-bottom: 0.6em; }
.ady-h .mt { font-size: 1.5em; font-weight: 700; }
.ady-h .psp { font-family: "IBM Plex Mono", Consolas, monospace; color: var(--a-mut2); font-size: 0.9em; }
.ady-pill { display: inline-block; padding: 0.1em 0.55em; border-radius: 1em; font-size: 0.82em; font-weight: 600; white-space: nowrap; }
.ady-pill.ok { background: var(--a-ok); color: var(--a-ok-fg); } .ady-pill.rb { background: var(--a-rb); color: var(--a-rb-fg); } .ady-pill.at { background: var(--a-at); color: var(--a-at-fg); } .ady-pill.ko { background: var(--a-ko); color: var(--a-ko-fg); }
.ady-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45em 1em; font-size: 0.88em; }
.ady-kv div span { display: block; color: var(--a-mut); font-size: 0.85em; }
.ady-kv div b { font-weight: 500; overflow-wrap: anywhere; }
.ady-cyc { display: flex; align-items: flex-start; gap: 0; font-size: 0.82em; overflow-x: auto; padding-bottom: 0.2em; }
.ady-cyc div { flex: 1; min-width: 6.5em; position: relative; padding-top: 1.2em; text-align: center; color: var(--a-mut2); }
.ady-cyc div::before { content: ""; position: absolute; top: 0.35em; left: 50%; width: 0.75em; height: 0.75em; margin-left: -0.375em; border-radius: 50%; background: #0abf53; z-index: 1; }
.ady-cyc div::after { content: ""; position: absolute; top: 0.68em; left: -50%; width: 100%; height: 0.12em; background: var(--a-ligne); }
.ady-cyc div:first-child::after { display: none; }
.ady-cyc div b { display: block; color: var(--a-fg); }
.ady-cyc div.nv::before { background: var(--a-rb-fg); box-shadow: 0 0 0 0.35em rgba(47, 67, 201, 0.25); animation: ady-nv 1.2s ease-out 2; }
.ady-cyc div.nv b { color: var(--a-rb-fg); }
@keyframes ady-nv { 50% { box-shadow: 0 0 0 0.7em rgba(47, 67, 201, 0.1); } }
.ady-t { width: 100%; border-collapse: collapse; font-size: 0.86em; }
.ady-t th { text-align: left; color: var(--a-mut); font-weight: 500; padding: 0.25em 0.4em; border-bottom: 1px solid var(--a-bord); white-space: nowrap; }
.ady-t td { padding: 0.3em 0.4em; border-bottom: 1px solid var(--a-cell); white-space: nowrap; max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.ady-t td.mono { font-family: "IBM Plex Mono", Consolas, monospace; font-size: 0.92em; }
.ady-t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ady-t tr.on td { background: var(--a-on); font-weight: 600; }
.ady-t tr.nv td { background: var(--a-nv); }
.ady-t.clic tbody tr { cursor: pointer; } .ady-t.clic tbody tr:hover td { background: var(--a-hover); }
.ady-btn { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 0.9em; border-radius: 0.45em; border: 1px solid var(--a-bord0); background: var(--a-bg); color: var(--a-mut3); font-size: 0.88em; font-weight: 600; }
.ady-btn.vert { background: #0abf53; border-color: #0abf53; color: #00112c; }
.ady-note { font-size: 0.82em; color: var(--a-mut); margin-top: 0.3em; }
.ady-roles { display: flex; flex-wrap: wrap; gap: 0.3em; }
.ady-roles span { padding: 0.12em 0.55em; border-radius: 1em; background: var(--a-chip); font-size: 0.82em; }
.ady-filtres { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.6em; }
.ady-filtres select, .ady-filtres input { font: inherit; font-size: 0.86em; padding: 0.25em 0.5em; border: 1px solid var(--a-bord2); border-radius: 0.4em; background: var(--a-card); color: var(--a-fg); }

/* ---------------------------------------------------------------- Outlook */
.ol { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; background: var(--o-bg); color: var(--o-fg); font-family: "Segoe UI", Arial, sans-serif; border: 1px solid var(--o-bord0); border-radius: 0.3em; overflow: hidden; }
.ol-t { display: flex; align-items: center; gap: 0.7em; padding: 0.35em 0.8em; background: #0f6cbd; color: #fff; font-size: 0.95em; }
.ol-t .q { flex: 1; max-width: 22em; padding: 0.15em 0.6em; border-radius: 0.3em; background: rgba(255, 255, 255, 0.18); color: #e6f0fa; font-size: 0.88em; }
.ol-b { display: grid; grid-template-columns: 7.5em minmax(10em, 15em) minmax(0, 1fr); min-height: 0; }
.ol-dos { background: var(--o-dos); border-right: 1px solid var(--o-bord); padding: 0.5em 0; font-size: 0.86em; }
.ol-dos span { display: block; padding: 0.3em 0.8em; white-space: nowrap; }
.ol-dos span.on { background: var(--o-sel); font-weight: 600; border-left: 0.2em solid #0f6cbd; }
.ol-l { border-right: 1px solid var(--o-bord); overflow: auto; }
.ol-l div { padding: 0.45em 0.7em; border-bottom: 1px solid var(--o-cell); font-size: 0.86em; cursor: pointer; }
.ol-l div b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-l div small { display: block; color: var(--o-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-l div em { color: var(--o-rouge); font-style: normal; font-size: 0.85em; }
.ol-l div.on { background: var(--o-sel); }
.ol-l div.nv { animation: xl-neuf 1.3s ease-out 1; }
.ol-m { overflow: auto; padding: 0.8em 1em; font-size: 0.9em; }
.ol-m .bandeau { padding: 0.35em 0.6em; margin-bottom: 0.6em; background: var(--o-band); border: 1px solid var(--o-band-bord); border-radius: 0.3em; font-size: 0.9em; }
.ol-m h4 { margin: 0 0 0.4em; font-size: 1.1em; }
.ol-m .ent { color: var(--o-mut); font-size: 0.9em; margin-bottom: 0.15em; }
.ol-m pre { white-space: pre-wrap; font-family: inherit; margin: 0.7em 0 0; line-height: 1.45; }
.ol-m .pj { display: inline-block; margin-top: 0.3em; padding: 0.15em 0.6em; border: 1px solid var(--o-bord2); border-radius: 0.3em; font-size: 0.86em; }
.vide-sys { display: grid; place-items: center; height: 100%; color: var(--o-mut); font-size: 0.95em; text-align: center; padding: 1em; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sap-sb .S { color: #6cc070; } :root:not([data-theme="light"]) .sap-sb .E { color: #ff6b6b; } :root:not([data-theme="light"]) .sap-sb .W { color: #f0b429; } }
:root[data-theme="dark"] .sap-sb .S { color: #6cc070; } :root[data-theme="dark"] .sap-sb .E { color: #ff6b6b; } :root[data-theme="dark"] .sap-sb .W { color: #f0b429; }

/* ---------------------------------------------------------------- écrans étroits (12/10 : « some texts are overlapping »)
   Dans le déroulé, les colonnes où le script n'agit pas sont étroites (≈ 20 em). Chaque écran s'adapte à SA propre largeur
   (requêtes de conteneur, en em de l'écran) et replie ses volets comme le ferait l'application, plutôt que de laisser les
   textes se chevaucher ; les mots trop longs (noms de fichiers, adresses) peuvent se couper. */
.sap, .xl, .ady, .ol { container-type: inline-size; }
.vide-sys { overflow-wrap: anywhere; }
.xl-t b { min-width: 0; }
.ady-card { overflow-x: auto; }
.ady-card h4, .ady-note, .ady-h { overflow-wrap: anywhere; }
.ady-nav .m small { white-space: normal; }
.ady-cpt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ady-cyc div { min-width: 0; padding-left: 0.15em; padding-right: 0.15em; overflow-wrap: anywhere; }
.ol-t { white-space: nowrap; overflow: hidden; }
.ol-t > span:last-child { margin-left: auto; }
.ol-dos span { overflow: hidden; text-overflow: ellipsis; }
.ol-l { min-width: 0; }
.ol-m { min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 32em) {
  .xl-t .ch, .xl-t > span:not(.ch) { display: none; }
}
@container (max-width: 30em) {             /* l'écran est son propre conteneur : on replace son contenu, pas sa grille */
  .ady-nav, .ady-q { display: none; }
  .ady-main { grid-column: 1 / -1; }
  .ady-kv { grid-template-columns: minmax(0, 1fr); }
  .ady-h .ady-pill { white-space: normal; }
}
@container (max-width: 36em) {
  .ol-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .ol-dos, .ol-t .q { display: none; }
}
@container (max-width: 22em) {
  .ol-b { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .ol-l { border-right: 0; border-bottom: 1px solid var(--o-bord); }
}