/* Shell ChromeOS (Ash) — étagère, lanceur, réglages rapides, calendrier, fenêtres.
 * Géométrie et couleurs : root/docs/inventaires/chromeos-vm.json (VM ChromeOS Flex 16765, 1280 × 800, thème sombre).
 * Polices : vendors/google/chromeos/fonts/ (tirées de la VM). Pictogrammes : masques .cros-i (system-icons.css). */

@font-face {
    font-family: "Capsule Google Sans ChromeOS";
    src: url("../../assets/images/vendors/google/chromeos/fonts/GoogleSans[opsz,wght]-v3.003.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: "Capsule Roboto ChromeOS";
    src: url("../../assets/images/vendors/google/chromeos/fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Capsule Roboto ChromeOS";
    src: url("../../assets/images/vendors/google/chromeos/fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
}

body#chromeos {
    --cros-font: "Capsule Google Sans ChromeOS", "Capsule Roboto ChromeOS", sans-serif;
    --cros-font-text: "Capsule Roboto ChromeOS", sans-serif;
    /* Thème sombre (valeurs relevées sur la VM ; clair : body#chromeos.cros-theme-light) */
    --cros-on-surface: #e5e1e9;
    --cros-on-surface-variant: #c8c5d0;
    --cros-primary: #c6bfff;
    --cros-on-primary: #2e2767;
    --cros-primary-container: #c6bfff;
    --cros-on-primary-container: #180f51;
    --cros-shelf: #2d2b36;
    --cros-shelf-line: #393742;
    --cros-shelf-max: #000000;
    --cros-shelf-max-line: #0f0f0f;
    --cros-shelf-sep: #5f5d67;
    --cros-chip: #46444e;
    --cros-bubble: #2e2b36;
    --cros-qs-bg: #2d2b36;
    --cros-qs-tile: #46444e;
    --cros-qs-track: #44414b;
    --cros-calendar: #2f2e38;
    --cros-divider: #484751;
    --cros-nudge: #47454f;
    --cros-nudge-btn: #53515b;
    --cros-frame: #1f1d30;
    --cros-window-border: #2c2d30;
    --cros-app-bg: #000000;
    --cros-settings-bg: #000000;
    --cros-settings-panel: #18171c;
    --cros-panel: #18171c;
    --cros-card: #24232a;
    --cros-card-line: #3a393f;
    --cros-search: #31303b;
    --cros-btn: #47445c;
    --cros-files-hr: #1f1f20;
    --cros-files-hsep: #333238;
    --cros-files-colbar: #55535b;
    --cros-files-pin: #474459;
    --cros-files-pin-icon: #c6bfff;
    --cros-print-clear: #1f1e22;
    --cros-print-clear-text: #666568;
    --cros-keys-sep: #2f2e33;
    --cros-key: #474459;
    --cros-key-plain: #34333a;
    --cros-help-frame: #32303c;
    --cros-help-title-bg: #18171c;
    --cros-help-new: #20314e;
    --cros-help-new-text: #aecbfa;
    --cros-help-help: #4d2726;
    --cros-help-help-text: #f6aea9;
    --cros-overview-bg: #000000;
    --cros-overview-desk: #2f2e33;
    --cros-chrome-ntp: #35363a;
    --cros-chrome-ntp-text: #e8eaed;
    --cros-chrome-toolbar: #3b394d;
    --cros-chrome-text: #e4dfff;
    --cros-chrome-icon: #c8c3dc;
    --cros-chrome-disabled: #6a6879;
    --cros-chrome-placeholder: #a9a5bc;
    --cros-chrome-aimode: #4a475e;
    --cros-chrome-aimode-text: #e4dfff;
    --cros-chrome-profile: #807ca6;
    --cros-chrome-profile-border: #5e5a79;
    --cros-chrome-link: #8ab4f8;
    --cros-chrome-idle: #252436;
    --cros-chrome-idle-text: #e3e1ec;
    --cros-perso-btn: #47464f;
    --cros-switch-off: #c8c3dc;
    --cros-chip-max: #2f2e33;
    --cros-files-selected: #47464f;
    --cros-files-menu: #31303b;
    --cros-files-search: #09090b;
    --cros-files-search-icon: #212122;
    --cros-files-menu-line: #494852;
    --cros-files-done: #64c07c;
    --cros-switch-off-knob: #302e41;
    --cros-switch-inert: #62606e;
    --cros-switch-inert-knob: #282732;
    --cros-select: #0e0e10;
    --cros-menu-bg: #31303b;
    --cros-menu-sel: #99c8ff;
    --cros-menu-border: #858585;
    --cros-bubble-highlight: #393742;
    --cros-bubble-edge: #292732;
    --cros-sys-primary_container: #47445c;
    --cros-shelf-h: 48px;
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font: 400 13px/1.25 var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-overview-bg);
    overflow: hidden;
    user-select: none;
}

body#chromeos * {
    box-sizing: border-box;
}

body#chromeos .cros-i {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--cros-ico) center / contain no-repeat;
    mask: var(--cros-ico) center / contain no-repeat;
}

/* Bureau */
body#chromeos .cros-desktop {
    position: absolute;
    inset: 0;
    background: var(--cros-wallpaper) center / cover no-repeat;
}

/* Étagère : 48 px, filet clair en haut ; noire quand une fenêtre est agrandie */
body#chromeos .cros-shelf {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: var(--cros-shelf-h);
    border-top: 1px solid var(--cros-shelf-line);
    background: var(--cros-shelf);
    z-index: 900;
}

body#chromeos.is-maximized .cros-shelf {
    border-top-color: var(--cros-shelf-max-line);
    background: var(--cros-shelf-max);
}

body#chromeos .cros-shelf__launcher {
    position: absolute;
    top: 5px;
    left: 3px;
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cros-chip);
    cursor: default;
}

body#chromeos .cros-shelf__launcher::after {
    position: absolute;
    top: 11px;
    left: 11px;
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--cros-on-surface);
    border-radius: 50%;
    content: "";
}

body#chromeos .cros-shelf__launcher.is-open {
    background: var(--cros-primary-container);
}

body#chromeos .cros-shelf__launcher.is-open::after {
    border-color: var(--cros-on-primary-container);
}

body#chromeos .cros-shelf__apps {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    height: 100%;
    transform: translateX(-50%);
}

body#chromeos .cros-shelf__app {
    position: relative;
    display: block;
    width: 56px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

body#chromeos .cros-shelf__app img {
    position: absolute;
    top: 6px;
    left: 12px;
    width: 32px;
    height: 32px;
}

body#chromeos .cros-shelf__app.is-running::after {
    position: absolute;
    bottom: 3px;
    left: 22px;
    display: block;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: var(--cros-on-surface);
    content: "";
}

body#chromeos .cros-shelf__pill {
    position: absolute;
    top: 5px;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 18px;
    font: 400 13px/1 var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-chip);
    cursor: default;
}

body#chromeos .cros-shelf__pill.is-open {
    color: var(--cros-on-primary-container);
    background: var(--cros-primary-container);
}

body#chromeos .cros-shelf__date {
    right: 120px;
    width: 68px;
    justify-content: center;
}

body#chromeos .cros-shelf__status {
    right: 6px;
    gap: 6px;
    width: 111px;
    justify-content: flex-end;
}

body#chromeos .cros-shelf__status .cros-i {
    width: 18px;
    height: 18px;
}

/* Bulles (lanceur, réglages rapides, calendrier) */
body#chromeos .cros-bubble {
    position: absolute;
    display: none;
    border-radius: 16px;
    background: var(--cros-bubble);
    box-shadow: inset 0 0 0 1px var(--cros-bubble-highlight), 0 0 0 1px var(--cros-bubble-edge);
    z-index: 950;
}

body#chromeos .cros-bubble.is-open {
    display: block;
}

body#chromeos .cros-launcher {
    bottom: 56px;
    left: 8px;
    width: 640px;
    height: 688px;
    overflow: hidden;
}

body#chromeos .cros-launcher__search {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid var(--cros-divider);
    font: 400 15px/1 var(--cros-font);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-launcher__search .cros-i {
    color: var(--cros-on-surface);
}

body#chromeos .cros-launcher__g svg {
    display: block;
    width: 18px;
    height: 18px;
}

body#chromeos .cros-launcher__continue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 26px 0 25px;
    font: 400 12px/1 var(--cros-font);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-launcher__row,
body#chromeos .cros-launcher__grid {
    display: grid;
    grid-template-columns: repeat(5, 130px);
    padding: 0 0 0 0;
}

body#chromeos .cros-launcher__row {
    margin: 0 0 0 -9px;
    padding-bottom: 4px;
}

body#chromeos .cros-launcher__row::after {
    display: block;
    height: 1px;
    margin: 0 41px 0 33px;
    background: var(--cros-divider);
    content: "";
    grid-column: 1 / -1;
}

body#chromeos .cros-launcher__app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    height: 104px;
    padding: 8px 0 0;
    border: 0;
    font: 400 12px/1.2 var(--cros-font);
    color: var(--cros-on-surface);
    background: transparent;
    cursor: default;
}

body#chromeos .cros-launcher__app img {
    width: 44px;
    height: 44px;
}

body#chromeos .cros-launcher__app span {
    max-width: 72px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-launcher__nudge {
    position: relative;
    display: block;
    height: 63px;
    margin: 10px 73px 19px 73px;
    padding: 13px 0 0 72px;
    border-radius: 12px;
    font: 400 12px/1.4 var(--cros-font);
    color: var(--cros-on-surface-variant);
    background: var(--cros-nudge);
}

body#chromeos .cros-launcher__nudge b {
    display: block;
    font: 400 13px/1.4 var(--cros-font);
    color: var(--cros-on-surface);
}

body#chromeos .cros-launcher__nudge button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 56px;
    height: 32px;
    border: 0;
    border-radius: 16px;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-nudge-btn);
}

body#chromeos .cros-launcher__grid {
    margin: 0 0 0 -9px;
}

body#chromeos .cros-launcher__row + .cros-launcher__grid {
    margin-top: 12px;
}

/* Réglages rapides */
body#chromeos .cros-qs {
    right: 9px;
    bottom: 56px;
    width: 400px;
    height: calc(180px + 72px * var(--cros-qs-rows, 2));
    padding: 16px;
    background: var(--cros-qs-bg);
}

body#chromeos .cros-qs__tiles {
    display: grid;
    grid-template-columns: 180px 88px 88px;
    gap: 8px 6px;
}

body#chromeos .cros-qs__tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 12px 0 16px;
    border: 0;
    border-radius: 16px;
    font: 500 13px/1.3 var(--cros-font);
    color: var(--cros-on-surface);
    text-align: left;
    background: var(--cros-qs-tile);
    cursor: default;
}

body#chromeos .cros-qs__tile--small {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    font-size: 11px;
    text-align: center;
}

body#chromeos .cros-qs__tile--wide {
    grid-column: span 2;
}

body#chromeos .cros-qs__tile.is-active {
    color: var(--cros-on-primary-container);
    background: var(--cros-primary-container);
}

body#chromeos .cros-qs__tile small {
    display: block;
    font: 400 12px/1.3 var(--cros-font);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-qs__tile .cros-qs__label {
    flex: 1;
    min-width: 0;
}

body#chromeos .cros-qs__slider {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    margin-top: 22px;
}

body#chromeos .cros-qs__slider + .cros-qs__slider {
    margin-top: 8px;
}

body#chromeos .cros-qs__round {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cros-qs-tile);
}

body#chromeos .cros-qs__round.is-active {
    color: var(--cros-on-primary);
    background: var(--cros-primary);
}

body#chromeos .cros-qs__round .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-qs__track {
    position: relative;
    flex: 1;
    height: 36px;
    margin-right: 20px;
}

body#chromeos .cros-qs__track::before {
    position: absolute;
    top: 16px;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--cros-qs-track);
    content: "";
}

body#chromeos .cros-qs__track.is-full::before {
    top: 0;
    height: 36px;
    border-radius: 18px;
    background: var(--cros-primary-container);
}

body#chromeos .cros-qs__knob {
    position: absolute;
    top: 2px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--cros-on-surface);
    background: var(--cros-qs-tile);
}

body#chromeos .cros-qs__track.is-full .cros-qs__knob {
    color: var(--cros-on-primary-container);
    background: transparent;
}

body#chromeos .cros-qs__knob .cros-i {
    width: 16px;
    height: 16px;
}

body#chromeos .cros-qs__side {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 64px;
    color: var(--cros-on-surface);
}

body#chromeos .cros-qs__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 21px;
}

body#chromeos .cros-qs__chip {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-qs-tile);
}

body#chromeos .cros-qs__chip--icon {
    justify-content: center;
    width: 32px;
    padding: 0;
    margin-left: auto;
}

/* Calendrier */
body#chromeos .cros-calendar {
    right: 9px;
    bottom: 56px;
    width: 399px;
    height: 463px;
    padding: 18px 16px 0 3px;
    background: var(--cros-calendar);
    overflow: hidden;
}

body#chromeos .cros-calendar__head {
    display: flex;
    align-items: center;
    height: 26px;
    padding-left: 23px;
    font: 400 18px/1 var(--cros-font);
}

body#chromeos .cros-calendar__head span:first-child {
    flex: 1;
}

body#chromeos .cros-calendar__head .cros-i {
    width: 20px;
    height: 20px;
    margin-left: 24px;
}

body#chromeos .cros-calendar__head .cros-i:last-child {
    margin-right: 6px;
}

body#chromeos .cros-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 56px);
    margin-top: 10px;
    font: 400 14px/40px var(--cros-font);
    text-align: center;
}

body#chromeos .cros-calendar__wd,
body#chromeos .cros-calendar__day {
    height: 40px;
}

body#chromeos .cros-calendar__wd {
    font-weight: 500;
}

body#chromeos .cros-calendar__day.is-other {
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-calendar__day.is-today span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--cros-on-primary-container);
    background: var(--cros-primary-container);
}

body#chromeos .cros-calendar__month {
    height: 60px;
    padding-top: 16px;
    padding-left: 15px;
    grid-column: 1 / -1;
    font: 400 17px/40px var(--cros-font);
    text-align: left;
}

/* Fenêtres (cadre Ash) */
body#chromeos .cros-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cros-window-border);
    background: var(--cros-app-bg);
    overflow: hidden;
    z-index: 100;
}

body#chromeos .cros-window.is-maximized {
    border: 0;
}

/* Ombre des fenêtres non agrandies : décalée vers le bas (~40 px sous la fenêtre, ~13 px sur les côtés, relevé) */
body#chromeos .cros-window:not(.is-maximized) {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 0 10px rgba(0, 0, 0, 0.08);
}

body#chromeos .cros-window__frame {
    display: flex;
    flex: none;
    align-items: center;
    height: 31px;
    padding-left: 10px;
    font: 400 12px/1 var(--cros-font-text);
    color: var(--cros-on-surface);
    background: var(--cros-frame);
}

body#chromeos .cros-window__title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

body#chromeos .cros-window__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 31px;
    padding: 0;
    border: 0;
    color: var(--cros-on-surface);
    background: transparent;
}

body#chromeos .cros-window__btn .cros-i {
    width: 16px;
    height: 16px;
}

body#chromeos .cros-window__body {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Chrome (nouvel onglet invité) */
body#chromeos .cros-chrome {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--cros-font-text);
    color: var(--cros-on-surface);
    background: var(--cros-chrome-ntp);
}

body#chromeos .cros-chrome__tabs {
    display: flex;
    align-items: flex-end;
    height: 40px;
    padding: 0 0 0 6px;
    background: var(--cros-frame);
}

body#chromeos .cros-chrome__tabsearch {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    border-radius: 8px;
    color: var(--cros-chrome-text);
    background: var(--cros-chrome-toolbar);
    -webkit-mask: none;
    mask: none;
}

body#chromeos .cros-chrome__tabsearch::before {
    display: block;
    width: 28px;
    height: 28px;
    background: currentColor;
    -webkit-mask: var(--cros-ico) center / 18px no-repeat;
    mask: var(--cros-ico) center / 18px no-repeat;
    content: "";
}

body#chromeos .cros-chrome__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 232px;
    height: 34px;
    margin-left: 6px;
    padding: 0 10px 0 10px;
    border-radius: 8px 8px 0 0;
    font: 400 12px/1 var(--cros-font-text);
    color: var(--cros-chrome-text);
    background: var(--cros-chrome-toolbar);
}

body#chromeos .cros-chrome__tab .cros-i {
    width: 16px;
    height: 16px;
}

body#chromeos .cros-chrome__favicon {
    color: var(--cros-chrome-icon);
}

body#chromeos .cros-chrome__tabtitle {
    flex: 1;
}

body#chromeos .cros-chrome__newtab {
    width: 20px;
    height: 20px;
    margin: 0 0 10px 10px;
    color: var(--cros-chrome-text);
}

body#chromeos .cros-chrome__caption {
    display: flex;
    align-self: stretch;
    margin-left: auto;
    padding-right: 0;
}

body#chromeos .cros-chrome__caption .cros-window__btn {
    height: 40px;
}

body#chromeos .cros-chrome__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 46px;
    padding: 0 12px 0 14px;
    color: var(--cros-chrome-icon);
    background: var(--cros-chrome-toolbar);
}

body#chromeos .cros-chrome__nav {
    width: 20px;
    height: 20px;
}

body#chromeos .cros-chrome__nav.is-disabled {
    color: var(--cros-chrome-disabled);
}

body#chromeos .cros-chrome__omnibox {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 13px;
    height: 36px;
    margin-left: 2px;
    padding: 0 6px 0 8px;
    border: 2px solid var(--cros-primary);
    border-radius: 18px;
    font: 400 14px/1 var(--cros-font-text);
    color: var(--cros-chrome-placeholder);
    background: var(--cros-chrome-toolbar);
}

body#chromeos .cros-chrome__g {
    color: var(--cros-chrome-text);
}

body#chromeos .cros-chrome__placeholder {
    flex: 1;
}

body#chromeos .cros-chrome__aimode {
    padding: 6px 10px;
    border-radius: 13px;
    font: 500 13px/1 var(--cros-font-text);
    color: var(--cros-chrome-aimode-text);
    background: var(--cros-chrome-aimode);
}

body#chromeos .cros-chrome__profile {
    width: 82px;
    height: 32px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--cros-chrome-profile-border);
    border-radius: 16px;
    font: 400 14px/30px var(--cros-font-text);
    color: var(--cros-chrome-profile);
}

body#chromeos .cros-chrome__page {
    flex: 1;
    padding-top: 92px;
    font: 400 13px/1.6 var(--cros-font-text);
    color: var(--cros-chrome-ntp-text);
}

body#chromeos .cros-chrome__page h1 {
    margin: 0 0 22px;
    font: 400 26px/1.2 var(--cros-font-text);
    text-align: center;
}

body#chromeos .cros-chrome__page p {
    width: 400px;
    margin: 0 auto;
}

body#chromeos .cros-chrome__page a {
    color: var(--cros-chrome-link);
}

/* Paramètres */
body#chromeos .cros-settings {
    position: relative;
    height: 100%;
    container-type: inline-size;
    font-family: var(--cros-font);
    background: var(--cros-settings-bg);
}

body#chromeos .cros-settings__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 290px;
}

body#chromeos .cros-settings__nav h2 {
    margin: 0;
    padding: 24px 0 0 40px;
    font: 500 16px/1.5 var(--cros-font);
    color: var(--cros-primary);
}

body#chromeos .cros-settings__navitem {
    position: relative;
    display: block;
    height: 68px;
    padding: 0 0 0 60px;
    font: 400 14px/20px var(--cros-font);
}

body#chromeos .cros-settings__nav h2 + .cros-settings__navitem {
    margin-top: 48px;
}

body#chromeos .cros-settings__navitem .cros-i {
    position: absolute;
    top: 6px;
    left: 28px;
}

body#chromeos .cros-settings__navitem b {
    display: block;
    font-weight: 400;
}

body#chromeos .cros-settings__navitem small {
    display: block;
    max-width: 200px;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-settings__search {
    position: absolute;
    top: 11px;
    left: 456px;
    display: flex;
    align-items: center;
    gap: 22px;
    width: 480px;
    height: 48px;
    padding: 0 26px;
    border-radius: 24px;
    font: 400 13px/1 var(--cros-font-text);
    color: var(--cros-on-surface);
    background: var(--cros-search);
}

/* Le panneau défile (molette, mise en scène settingsscroll) ; barre en surimpression d'Ash invisible au repos (relevé) */
body#chromeos .cros-settings__panel {
    position: absolute;
    top: 81px;
    right: 15px;
    bottom: 15px;
    left: 304px;
    padding: 16px;
    border-radius: 16px;
    background: var(--cros-settings-panel);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

body#chromeos .cros-settings__panel h3 {
    margin: 0 0 11px 8px;
    font: 500 13px/1.5 var(--cros-font);
    color: var(--cros-primary);
}

body#chromeos .cros-settings__card {
    border-radius: 12px;
    background: var(--cros-card);
}

body#chromeos .cros-settings__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 12px 20px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-settings__row + .cros-settings__row {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-settings__row > span:nth-child(2),
body#chromeos .cros-settings__row > span:first-child:not(.cros-i) {
    flex: 1;
}

body#chromeos .cros-settings__row b {
    display: block;
    font-weight: 400;
}

body#chromeos .cros-settings__row small {
    display: block;
    font-size: 13px;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-settings__caret {
    transform: rotate(-90deg);
}

/* Fichiers */
body#chromeos .cros-files {
    position: relative;
    height: 100%;
    font-family: var(--cros-font);
    background: var(--cros-app-bg);
}

body#chromeos .cros-files__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 264px;
    padding: 18px 24px 0 16px;
}

body#chromeos .cros-files__nav hr {
    height: 1px;
    margin: 13px 0 11px;
    border: 0;
    background: var(--cros-files-hr);
}

body#chromeos .cros-files__navitem {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding-left: 32px;
    border-radius: 20px;
    font: 500 13px/1 var(--cros-font);
}

body#chromeos .cros-files__navitem.is-selected {
    padding-left: 12px;
    color: var(--cros-on-primary);
    background: var(--cros-primary);
}

body#chromeos .cros-files__navitem--sub {
    margin-top: 7px;
    padding-left: 52px;
}

body#chromeos .cros-files__main {
    position: absolute;
    top: 16px;
    right: 15px;
    bottom: 0;
    left: 264px;
    padding: 0 0 0 0;
    border-radius: 16px 16px 0 0;
    background: var(--cros-panel);
}

body#chromeos .cros-files__header {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 56px;
    padding: 0 14px 0 20px;
}

body#chromeos .cros-files__header h2 {
    flex: 1;
    margin: 0;
    font: 500 16px/1 var(--cros-font);
}

body#chromeos .cros-files__banner {
    position: relative;
    display: block;
    height: 131px;
    margin: 0 15px 0 16px;
    padding: 22px 0 0 68px;
    border-radius: 12px;
    font: 400 13px/20px var(--cros-font-text);
    background: var(--cros-app-bg);
}

body#chromeos .cros-files__banner strong {
    display: block;
    font: 500 15px/22px var(--cros-font);
}

body#chromeos .cros-files__banner button {
    position: absolute;
    right: 28px;
    bottom: 26px;
    border: 0;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-primary);
    background: transparent;
}

body#chromeos .cros-files__pin {
    position: absolute;
    top: 25px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--cros-files-pin-icon);
    background: var(--cros-files-pin);
}

body#chromeos .cros-files__table {
    margin-top: 0;
}

body#chromeos .cros-files__row {
    display: grid;
    grid-template-columns: 418px 118px 122px 1fr;
    align-items: center;
    height: 48px;
    padding-left: 20px;
    font: 400 13px/1 var(--cros-font-text);
}

body#chromeos .cros-files__row--head {
    border-bottom: 1px solid var(--cros-files-hsep);
    font: 500 13px/1 var(--cros-font);
}

body#chromeos .cros-files__row--head span + span {
    padding-left: 15px;
    border-left: 1px solid var(--cros-files-colbar);
}

body#chromeos .cros-files__row > span:first-child {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Aperçu des bureaux (F5) */
body#chromeos .cros-overview {
    position: absolute;
    inset: 0 0 var(--cros-shelf-h) 0;
    display: none;
    background: var(--cros-overview-bg);
    z-index: 800;
}

body#chromeos .cros-overview.is-open {
    display: block;
}

body#chromeos .cros-overview__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
}

body#chromeos .cros-overview__desk {
    height: 22px;
    padding: 0 14px;
    border-radius: 11px;
    font: 400 12px/22px var(--cros-font);
    background: var(--cros-overview-desk);
}

body#chromeos .cros-overview__new {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--cros-on-primary);
    background: var(--cros-primary);
}

body#chromeos .cros-overview__stage {
    position: absolute;
    top: 40px;
    right: 28px;
    bottom: 16px;
    left: 32px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding-top: 114px;
    border-radius: 16px;
    background: var(--cros-wallpaper) center / cover no-repeat fixed;
    overflow: hidden;
}

body#chromeos .cros-overview__item {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: var(--cros-frame);
    overflow: hidden;
}

body#chromeos .cros-overview__item header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 10px 0 10px;
    font: 400 16px/1 var(--cros-font);
}

body#chromeos .cros-overview__item header img {
    width: 24px;
    height: 24px;
}

body#chromeos .cros-overview__item header span {
    flex: 1;
}

body#chromeos .cros-overview__thumb {
    position: relative;
    height: 348px;
    background: var(--cros-app-bg);
    overflow: hidden;
    pointer-events: none;
}

body#chromeos .cros-overview__thumb > .cros-window__body {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

/* Séparateur de l'étagère : apps épinglées | apps ouvertes non épinglées */
body#chromeos .cros-shelf__sep {
    display: block;
    width: 1px;
    height: 20px;
    margin: 14px 6px 0;
    background: var(--cros-shelf-sep);
}

/* Chrome au second plan : omnibox inactive (texte d'invite, sans bordure ni « Mode IA ») */
body#chromeos .cros-chrome__placeholder--idle {
    display: none;
}

body#chromeos .cros-window:not(.windowElementActive) .cros-chrome__omnibox {
    border-color: var(--cros-chrome-idle);
    color: var(--cros-chrome-idle-text);
    background: var(--cros-chrome-idle);
}

body#chromeos .cros-window:not(.windowElementActive) .cros-chrome__placeholder {
    display: none;
}

body#chromeos .cros-window:not(.windowElementActive) .cros-chrome__placeholder--idle {
    display: block;
}

body#chromeos .cros-window:not(.windowElementActive) .cros-chrome__aimode {
    display: none;
}

/* Palette des illustrations : variables --cros-sys-illo-* relevées sur la VM
   (root/tools/lab/measure-chromeos-illo-colors.mjs → chromeos-vm.json § illustrationPalette) */
body#chromeos {
    --cros-sys-illo-color1: #c6bfff;
    --cros-sys-illo-color1-1: #5f5c71;
    --cros-sys-illo-color1-2: #474459;
    --cros-sys-illo-color2: #4fbf8f;
    --cros-sys-illo-color3: #ffb94f;
    --cros-sys-illo-color4: #ff5167;
    --cros-sys-illo-color5: #7b5266;
    --cros-sys-illo-base: #000000;
    --cros-sys-illo-secondary: #5f5d67;
    --cros-sys-app_base_shaded: #000000;
}

/* Thème clair (réglage « Clair », ou « Auto » quand Ash passe en clair) — relevé sur les captures *-clair
   (root/docs/inventaires/chromeos-vm.json § lightTheme). Terminal et Caméra gardent leurs couleurs sombres. */
body#chromeos.cros-theme-light {
    --cros-on-surface: #1c1b20;
    --cros-on-surface-variant: #47464f;
    --cros-primary: #5c5698;
    --cros-on-primary: #ffffff;
    --cros-primary-container: #c6bfff;
    --cros-on-primary-container: #180f51;
    --cros-shelf: #d8d4df;
    --cros-shelf-line: #dedbe3;
    --cros-shelf-max: #e5e1ec;
    --cros-shelf-max-line: #d3cfd9;
    --cros-shelf-sep: #cac6d0;
    --cros-chip: #efecf2;
    --cros-bubble: #efebf5;
    --cros-qs-bg: #efebf5;
    --cros-qs-tile: #f8f5fb;
    --cros-qs-track: #d6d2dc;
    --cros-calendar: #efebf5;
    --cros-divider: #d2ced7;
    --cros-nudge: #f8f5fb;
    --cros-nudge-btn: #fcf9fd;
    --cros-frame: #e4dff9;
    --cros-window-border: #dedede;
    --cros-app-bg: #f3effa;
    --cros-settings-bg: #ede9f4;
    --cros-settings-panel: #f7f3fa;
    --cros-panel: #fffbff;
    --cros-card: #fffbff;
    --cros-card-line: #f0ecf0;
    --cros-search: #ffffff;
    --cros-btn: #e4dfff;
    --cros-files-hr: #d5d2db;
    --cros-files-hsep: #e0dce0;
    --cros-files-search: #f4eff7;
    --cros-files-search-icon: #e7e2ea;
    --cros-files-chip-open: #f2eef2;
    --cros-files-colbar: #bbb8bf;
    --cros-files-pin: #e4dfff;
    --cros-files-pin-icon: #5c5698;
    --cros-print-clear: #d9d5e0;
    --cros-print-clear-text: #928f98;
    --cros-keys-sep: #f0ecf0;
    --cros-key: #e6e1f9;
    --cros-key-plain: #e5e1ec;
    --cros-help-frame: #ffffff;
    --cros-help-title-bg: #fffbff;
    --cros-help-new: #d6e5fc;
    --cros-help-new-text: #185abc;
    --cros-help-help: #fce3e0;
    --cros-help-help-text: #a50e0e;
    --cros-overview-bg: #e5e1ec;
    --cros-overview-desk: #f5f1f7;
    --cros-chrome-ntp: #ffffff;
    --cros-chrome-ntp-text: #000000;
    --cros-chrome-toolbar: #fcf8ff;
    --cros-chrome-text: #1c1b20;
    --cros-chrome-icon: #474459;
    --cros-chrome-disabled: #a8a5ab;
    --cros-chrome-placeholder: #a8a5ab;
    --cros-chrome-aimode: #efebf2;
    --cros-chrome-aimode-text: #180f51;
    --cros-chrome-profile: #5f6368;
    --cros-chrome-profile-border: #787680;
    --cros-chrome-link: #3367d6;
    --cros-chrome-idle: #ece8f3;
    --cros-chrome-idle-text: #1c1b20;
    --cros-perso-btn: #e5e1ec;
    --cros-switch-off: #5f5c71;
    --cros-chip-max: #f5f1f7;
    /* opérations de Fichiers en clair : non relevées, repli sur les teintes homologues mesurées */
    --cros-files-selected: #e5e1ec;
    --cros-files-menu: #ffffff;
    --cros-files-menu-line: #d2ced7;
    --cros-files-done: #146c2e;
    --cros-switch-off-knob: #ffffff;
    --cros-switch-inert: #c1bec8;
    --cros-switch-inert-knob: #fffcff;
    --cros-select: #f4eff7;
    --cros-menu-bg: #ffffff;
    --cros-menu-sel: #cbe4fa;
    --cros-menu-border: #767676;
    --cros-bubble-highlight: #f1eef6;
    --cros-bubble-edge: #e1dde7;
    --cros-sys-primary_container: #e4dfff;
    --cros-sys-illo-color1: #5c5698;
    --cros-sys-illo-color1-1: #c6bfff;
    --cros-sys-illo-color1-2: #e4dfff;
    --cros-sys-illo-color2: #2ea376;
    --cros-sys-illo-color3: #e89c00;
    --cros-sys-illo-color4: #ff5167;
    --cros-sys-illo-color5: #ce9eb4;
    --cros-sys-illo-base: #ffffff;
    --cros-sys-illo-secondary: #e5e1ec;
    --cros-sys-app_base_shaded: #f3effa;
}

/* Cadres d'apps : neutre (Caméra), onglets (Terminal) */
body#chromeos .cros-window--frame-neutral .cros-window__frame {
    background: #202124;
}

body#chromeos .cros-window--frame-tabs .cros-window__frame {
    height: 38px;
    padding-left: 11px;
    background: #343538;
}

body#chromeos .cros-window--frame-tabs .cros-window__title {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 100%;
}

body#chromeos .cros-window--frame-tabs .cros-window__title > .cros-i {
    width: 18px;
    height: 18px;
    margin-bottom: 10px;
}

body#chromeos .cros-window__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border-radius: 8px 8px 0 0;
    font: 700 11px/1 var(--cros-font-text);
    background: #202124;
}

body#chromeos .cros-window--frame-tabs .cros-window__btn {
    height: 38px;
}

/* Boutons communs */
body#chromeos .cros-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-btn);
    cursor: default;
}

body#chromeos .cros-btn--primary {
    color: var(--cros-on-primary);
    background: var(--cros-primary);
}

body#chromeos .cros-btn--pill {
    height: 36px;
    border-radius: 18px;
}

/* États vides (Scanner, Tâches d'impression) */
body#chromeos .cros-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body#chromeos .cros-empty__illo {
    display: block;
    width: 257px;
    height: 256px;
}

body#chromeos .cros-empty__illo svg {
    display: block;
    width: 100%;
    height: 100%;
}

body#chromeos .cros-empty h2 {
    margin: 34px 0 0;
    font: 500 22px/28px var(--cros-font);
}

body#chromeos .cros-empty p {
    margin: 16px 0 0;
    font: 400 14px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-empty__actions {
    display: flex;
    gap: 8px;
    margin-top: 33px;
}

body#chromeos .cros-scanner {
    height: 100%;
    padding-top: 116px;
    background: var(--cros-panel);
}

/* Caméra */
body#chromeos .cros-camera {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font: 400 16px/24px var(--cros-font-text);
    color: #e3e3e3;
    text-align: center;
    background: #18171c; /* la Caméra garde son thème sombre en clair (relevé) */
}

body#chromeos .cros-camera p {
    margin: 0;
}

/* Tâches d'impression */
body#chromeos .cros-print {
    position: relative;
    height: 100%;
    background: var(--cros-app-bg);
}

body#chromeos .cros-print__head {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 47px 0 47px;
}

body#chromeos .cros-print__head h2 {
    flex: 1;
    margin: 0;
    font: 500 22px/28px var(--cros-font);
}

body#chromeos .cros-print__clear {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 20px 0 14px;
    border: 0;
    border-radius: 18px;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-print-clear-text);
    background: var(--cros-print-clear);
}

body#chromeos .cros-print__panel {
    position: absolute;
    top: 80px;
    right: 31px;
    bottom: 0;
    left: 31px;
    border-radius: 16px 16px 0 0;
    background: var(--cros-panel);
}

body#chromeos .cros-print__cols {
    display: grid;
    grid-template-columns: 368px 200px 130px 1fr;
    height: 46px;
    padding: 16px 0 0 16px;
    font: 500 13px/14px var(--cros-font);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-print__panel .cros-empty {
    margin-top: 18px;
}

body#chromeos .cros-print__illo {
    width: 268px;
    height: 200px;
}

body#chromeos .cros-print__panel .cros-empty h3 {
    margin: 16px 0 0;
    font: 500 18px/24px var(--cros-font);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-print__panel .cros-empty p {
    margin-top: 8px;
}

body#chromeos .cros-print__panel .cros-btn {
    margin-top: 16px;
    padding: 0 16px;
}

/* Galerie (écran d'accueil sans fichier) */
body#chromeos .cros-gallery {
    position: relative;
    height: 100%;
    color: var(--cros-on-surface);
    text-align: center;
    background: var(--cros-app-bg);
}

body#chromeos .cros-gallery__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    padding: 9px 13px 0 16px;
}

body#chromeos .cros-gallery h2 {
    margin: 57px 0 0;
    font: 400 28px/36px var(--cros-font);
}

body#chromeos .cros-gallery > p {
    margin: 15px 0 0;
    font: 400 14px/21px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-gallery__cards {
    position: absolute;
    top: 328px;
    left: 93px;
    display: grid;
    grid-template-columns: repeat(4, 216px);
    gap: 16px;
    text-align: left;
}

body#chromeos .cros-gallery__cards section {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 314px;
    padding: 148px 24px 0;
    border-radius: 12px;
    background: var(--cros-panel);
}

body#chromeos .cros-gallery__illo {
    position: absolute;
    top: 0;
    left: 38px;
    width: 140px;
    height: 140px;
}

body#chromeos .cros-gallery__illo svg {
    display: block;
}

body#chromeos .cros-gallery__cards b {
    font: 500 15px/22px var(--cros-font);
}

body#chromeos .cros-gallery__cards span {
    margin-top: 4px;
    font: 400 14px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-gallery__cards a {
    position: absolute;
    bottom: 19px;
    left: 24px;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-primary);
}

/* Raccourcis clavier */
body#chromeos .cros-keys {
    position: relative;
    height: 100%;
    background: var(--cros-app-bg);
}

body#chromeos .cros-keys h2 {
    position: absolute;
    top: 21px;
    left: 28px;
    margin: 0;
    font: 400 18px/24px var(--cros-font);
}

body#chromeos .cros-keys__search {
    position: absolute;
    top: 12px;
    left: 364px;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 620px;
    height: 40px;
    padding: 0 24px;
    border-radius: 20px;
    font: 400 13px/1 var(--cros-font-text);
    background: var(--cros-search);
}

body#chromeos .cros-keys__nav {
    position: absolute;
    top: 94px;
    left: 8px;
    width: 238px;
}

body#chromeos .cros-keys__nav span {
    display: block;
    height: 40px;
    margin-bottom: 8px;
    padding-left: 28px;
    border-radius: 20px;
    font: 500 13px/40px var(--cros-font);
}

body#chromeos .cros-keys__nav .is-selected {
    color: var(--cros-on-primary);
    background: var(--cros-primary);
}

body#chromeos .cros-keys__settings {
    position: absolute;
    bottom: 22px;
    left: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/1 var(--cros-font);
}

body#chromeos .cros-keys__panel {
    position: absolute;
    top: 72px;
    right: 48px;
    bottom: 20px;
    left: 296px;
    padding: 33px 68px 0 68px;
    border-radius: 16px;
    background: var(--cros-panel);
    overflow: hidden;
}

body#chromeos .cros-keys__panel h3 {
    margin: 0 0 13px;
    font: 700 13px/20px var(--cros-font);
}

body#chromeos .cros-keys__row {
    display: grid;
    grid-template-columns: 305px 1fr;
    align-items: center;
    height: 63px;
    padding-right: 0;
    border-top: 1px solid var(--cros-keys-sep);
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-keys__panel h3 + .cros-keys__row {
    border-top: 0;
}

body#chromeos .cros-keys__row > span:first-child {
    max-width: 268px;
}

body#chromeos .cros-keys__row > span:last-child {
    display: flex;
    align-items: center;
}

body#chromeos .cros-keys__row kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin-right: 7px;
    padding: 0 13px;
    border-radius: 8px;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-on-surface-variant);
    background: var(--cros-key);
}

body#chromeos .cros-keys__row .cros-kbd--key {
    background: var(--cros-key-plain);
}

body#chromeos .cros-keys__row .cros-kbd--icon {
    padding: 0 6px;
}

body#chromeos .cros-keys__row .cros-kbd--icon .cros-i {
    width: 16px;
    height: 16px;
}

/* Explorer (app d'aide) */
body#chromeos .cros-help {
    position: relative;
    height: 100%;
    background: var(--cros-app-bg);
}

body#chromeos .cros-help__nav {
    position: absolute;
    top: 32px;
    left: 16px;
    width: 200px;
}

body#chromeos .cros-help__nav > span {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    margin-bottom: 8px;
    padding-left: 28px;
    border-radius: 20px;
    font: 500 13px/1 var(--cros-font);
}

body#chromeos .cros-help__nav .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-help__nav .is-selected {
    color: var(--cros-on-primary);
    background: var(--cros-primary);
}

body#chromeos .cros-help__nav .cros-help__aide {
    gap: 4px;
    padding-left: 10px;
}

body#chromeos .cros-help__nav .cros-help__aide .cros-i:first-child {
    width: 14px;
    transform: rotate(-90deg);
}

body#chromeos .cros-help__foot {
    position: absolute;
    top: 423px;
    left: 28px;
    width: 200px;
}

body#chromeos .cros-help__foot b {
    display: block;
    margin-top: 20px;
    font: 500 14px/20px var(--cros-font);
}

body#chromeos .cros-help__foot small {
    display: block;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-help__foot .cros-btn {
    gap: 6px;
    padding: 0 14px 0 14px;
    background: var(--cros-btn);
}

body#chromeos .cros-help__foot .cros-btn .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-help__banner {
    position: absolute;
    top: 33px;
    left: 248px;
    width: 688px;
    height: 344px;
    border: 32px solid var(--cros-help-frame);
    border-radius: 64px;
    background: var(--cros-app-bg);
    overflow: hidden;
}

body#chromeos .cros-help__banner-bg {
    position: absolute;
    inset: 0;
}

body#chromeos .cros-help__banner-bg svg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 743px;
    height: 280px;
    transform: translateX(-50%);
}

body#chromeos .cros-help__welcome {
    position: absolute;
    top: 2px;
    left: 322px;
    width: 251px;
    height: 276px;
}

body#chromeos .cros-help__welcome svg {
    width: 100%;
    height: 100%;
}

body#chromeos .cros-help__banner h2 {
    position: absolute;
    top: 106px;
    left: 32px;
    margin: 0;
    font: 400 24px/32px var(--cros-font);
}

body#chromeos .cros-help__banner h2 span {
    padding: 0 6px;
    background: var(--cros-help-title-bg);
}

body#chromeos .cros-help__discover {
    position: absolute;
    top: 409px;
    left: 248px;
    width: 688px;
    height: 220px;
    padding: 30px 32px 0;
    border-radius: 32px 32px 0 0;
    background: var(--cros-help-frame);
}

body#chromeos .cros-help__discover h3 {
    margin: 0 0 26px;
    font: 500 16px/24px var(--cros-font);
}

body#chromeos .cros-help__discover > div {
    display: grid;
    grid-template-columns: 304px 304px;
    gap: 16px;
}

body#chromeos .cros-help__card {
    height: 120px;
    padding: 12px 16px;
    border-radius: 16px;
    font: 500 16px/24px var(--cros-font);
}

body#chromeos .cros-help__card small {
    display: block;
    margin-bottom: 6px;
    font: 500 10px/16px var(--cros-font);
}

body#chromeos .cros-help__card--new {
    color: var(--cros-help-new-text);
    background: var(--cros-help-new);
}

body#chromeos .cros-help__card--help {
    color: var(--cros-help-help-text);
    background: var(--cros-help-help);
}

/* Terminal (écran d'accueil sans Linux) */
body#chromeos .cros-term {
    height: 100%;
    padding: 41px 19px 0;
    font: 400 13px/20px var(--cros-font-text);
    color: #e8eaed;
    background: #202124;
}

body#chromeos .cros-term__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    margin-bottom: 17px;
    padding: 0 19px 0 20px;
    border-radius: 8px;
    background: #2d2e30;
}

body#chromeos .cros-term__card b {
    display: block;
    margin-bottom: 9px;
}

body#chromeos .cros-term__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 15px;
    border: 1px solid #4a4b4d;
    border-radius: 4px;
    font: 500 13px/1 var(--cros-font-text);
    color: #8ab4f8;
    background: transparent;
}

body#chromeos .cros-term__btn--strong {
    border-width: 2px;
}

body#chromeos .cros-term__btn .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-term__list {
    display: block;
    height: 96px;
    padding: 0 20px;
}

body#chromeos .cros-term__list > span {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 48px;
}

body#chromeos .cros-term__list > span + span {
    border-top: 1px solid #4a4b4d;
}

body#chromeos .cros-term__list > span > .cros-i:last-child:not(:first-child) {
    margin-left: auto;
}


/* Paramètres : section sélectionnée, panneaux masqués */
body#chromeos .cros-settings__panel[hidden] {
    display: none;
}

/* Section sélectionnée : rectangle arrondi de 60 px (x 106–361 sur la capture), sous le texte */
body#chromeos .cros-settings__navitem.is-selected {
    color: var(--cros-on-primary);
}

body#chromeos .cros-settings__navitem.is-selected::before {
    position: absolute;
    top: -9px;
    right: 19px;
    left: 16px;
    height: 60px;
    border-radius: 16px;
    background: var(--cros-primary);
    content: "";
    z-index: -1;
}

body#chromeos .cros-settings__nav {
    z-index: 0;
}

body#chromeos .cros-settings__navitem.is-selected small {
    color: var(--cros-on-primary);
}

body#chromeos .cros-settings__row[data-cros-open] > .cros-i:last-child {
    width: 18px;
    height: 18px;
}

/* Fond d'écran et style (app de personnalisation) */
body#chromeos .cros-perso {
    position: relative;
    height: 100%;
    color: var(--cros-on-surface);
    background: var(--cros-app-bg);
}

body#chromeos .cros-perso__user {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 132px;
    padding: 0 0 0 22px;
}

body#chromeos .cros-perso__avatar {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: center / cover no-repeat;
}

body#chromeos .cros-perso__avatar .cros-i {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--cros-on-primary);
    background: var(--cros-primary);
    -webkit-mask: none;
    mask: none;
}

body#chromeos .cros-perso__avatar .cros-i::before {
    display: block;
    width: 32px;
    height: 32px;
    background: currentColor;
    -webkit-mask: var(--cros-ico) center / 16px no-repeat;
    mask: var(--cros-ico) center / 16px no-repeat;
    content: "";
}

body#chromeos .cros-perso__user h2 {
    margin: 0;
    font: 400 22px/28px var(--cros-font);
}

body#chromeos .cros-perso__card {
    position: absolute;
    top: 133px;
    left: 22px;
    width: 378px;
    height: 518px;
    padding: 20px 20px 0;
    border-radius: 16px;
    background: var(--cros-panel);
}

body#chromeos .cros-perso__card--ambient {
    left: 421px;
}

body#chromeos .cros-perso__card h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    margin: 0 0 9px;
    font: 500 13px/1 var(--cros-font);
}

body#chromeos .cros-perso__card--ambient h3 {
    color: var(--cros-chrome-disabled);
}

body#chromeos .cros-perso__preview {
    display: block;
    height: 218px;
    border-radius: 12px;
    background: center / cover no-repeat;
}

/* Aperçu du fond : variante large à 371 × 246, centrée, calée en bas (recalage sur la capture) */
body#chromeos .cros-perso__preview[data-cros-wallpaper] {
    background-position: center bottom;
    background-size: 371px 246px;
}

/* Économiseur indisponible : aperçu atténué (luminance relevée à 0,61 de l'image) */
body#chromeos .cros-perso__card--ambient .cros-perso__preview {
    opacity: 0.6;
}

body#chromeos .cros-perso__card h4 {
    margin: 18px 0 0;
    font: 500 13px/24px var(--cros-font);
}

body#chromeos .cros-perso__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    font: 400 12px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-perso__toggle span:first-child {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-perso__switch {
    position: relative;
    display: block;
    flex: none;
    width: 30px;
    height: 12px;
    border-radius: 6px;
    background: var(--cros-btn);
}

body#chromeos .cros-perso__switch::after {
    position: absolute;
    top: -3px;
    right: -2px;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cros-primary);
    content: "";
}

body#chromeos .cros-perso__swatches {
    display: grid;
    grid-template-columns: repeat(4, 76px);
    gap: 12px;
    margin-top: 14px;
}

body#chromeos .cros-perso__swatches span {
    position: relative;
    display: block;
    height: 76px;
    border-radius: 12px;
    background: var(--cros-app-bg);
}

body#chromeos .cros-perso__swatches span::before {
    position: absolute;
    top: 15px;
    left: 15px;
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--q1) 50%, transparent 50%), linear-gradient(to right, var(--q2) 50%, var(--q3) 50%);
    content: "";
}

body#chromeos .cros-perso__swatches span.is-selected::after {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cros-app-bg);
    border-radius: 50%;
    background: var(--cros-primary);
    content: "";
}

body#chromeos .cros-perso__themes {
    display: grid;
    grid-template-columns: 103px 114px 103px;
    gap: 9px;
    margin-top: 13px;
}

body#chromeos .cros-perso__themes button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 59px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-perso-btn);
    cursor: default;
}

body#chromeos .cros-perso__themes button.is-selected {
    color: var(--cros-on-primary);
    background: var(--cros-primary);
}

body#chromeos .cros-perso__themes .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-perso__unavailable {
    position: relative;
    width: 192px;
    height: 190px;
    margin: 24px auto 0;
    text-align: center;
}

body#chromeos .cros-perso__unavailable > span {
    position: absolute;
    inset: 0;
}

/* Règle de l'app d'origine (resources.pak 32336) : la forme prend la couleur primary_container */
body#chromeos .cros-perso__unavailable svg path {
    fill: var(--cros-sys-primary_container);
}

body#chromeos .cros-perso__unavailable p {
    position: relative;
    margin: 0;
    padding-top: 52px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-perso__unavailable .cros-btn {
    position: relative;
    margin-top: 16px;
    height: 32px;
}


/* Paramètres : groupes, rangées hautes, interrupteurs, DNS, À propos */
body#chromeos .cros-settings__card + h3 {
    margin-top: 24px;
}

body#chromeos .cros-settings__panel h3.cros-settings__subtitle {
    margin: 10px 0 18px 20px;
    font: 500 16px/1.5 var(--cros-font);
}

body#chromeos .cros-settings__row--noicon {
    padding-left: 20px;
}

body#chromeos .cros-settings__row > .cros-i:first-child {
    color: var(--cros-primary);
}

body#chromeos .cros-settings__row--ok > .cros-i:first-child {
    color: #6cdba9;
}

body#chromeos .cros-settings__managed {
    width: 18px;
    height: 18px;
    margin-right: 14px;
}

body#chromeos .cros-switch {
    position: relative;
    display: block;
    flex: none;
    width: 32px;
    height: 16px;
    border-radius: 8px;
    background: var(--cros-switch-off);
}

body#chromeos .cros-switch::after {
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cros-switch-off-knob);
    content: "";
}

body#chromeos .cros-switch.is-on {
    background: var(--cros-primary);
}

body#chromeos .cros-switch.is-on::after {
    left: 18px;
    background: var(--cros-on-primary);
}

body#chromeos .cros-switch.is-disabled {
    opacity: 0.6;
}

body#chromeos .cros-settings__dns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 0 20px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-settings__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 352px;
    height: 36px;
    padding: 0 12px 0 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--cros-select);
}

body#chromeos .cros-settings__select.is-open {
    border-color: var(--cros-primary);
}

body#chromeos .cros-settings__note {
    display: block;
    padding: 14px 20px 20px;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-settings__product {
    min-height: 76px;
    gap: 16px;
}

body#chromeos .cros-settings__row.cros-settings__product > span.cros-settings__logo:first-child {
    flex: none;
}

body#chromeos .cros-settings__product b {
    flex: 1;
    font: 500 18px/24px var(--cros-font);
}

body#chromeos .cros-settings__logo {
    display: block;
    width: 40px;
    height: 40px;
    background: center / contain no-repeat;
}


/* Fichiers : vues (Récents, Téléchargements, Corbeille) */
body#chromeos .cros-files [hidden] {
    display: none !important;
}

body#chromeos .cros-files {
    --empty-folder-svg-dot-color: var(--cros-sys-illo-color1-1);
    --empty-folder-svg-ellipse-color: var(--cros-sys-illo-color1);
    --empty-folder-svg-file-color: var(--cros-sys-illo-secondary);
    --empty-folder-svg-folder-color: var(--cros-sys-illo-color1-2);
}

body#chromeos .cros-files__crumbs {
    display: flex;
    align-items: center;
    gap: 14px;
}

body#chromeos .cros-files__crumbs > span:first-child {
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-files__crumbs .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-files__banner--trash {
    height: 90px;
    padding-top: 26px;
}

body#chromeos .cros-files__banner--trash .cros-files__pin {
    top: 11px;
}

body#chromeos .cros-files__banner--trash button {
    bottom: 22px;
}

body#chromeos .cros-files__chips {
    display: flex;
    gap: 8px;
    height: 46px;
    padding: 13px 0 0 20px;
}

body#chromeos .cros-files__chips span {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--cros-divider);
    border-radius: 8px;
    font: 500 14px/30px var(--cros-font);
}

body#chromeos .cros-files__chips .is-selected {
    border-color: transparent;
    background: var(--cros-key);
}

body#chromeos .cros-files__row--head span:last-child {
    white-space: nowrap;
}

body#chromeos .cros-files__row--head .cros-i {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    vertical-align: -3px;
}

body#chromeos .cros-files__empty {
    position: relative;
    margin-top: 58px;
    font: 400 13px/20px var(--cros-font-text);
    text-align: center;
}

body#chromeos .cros-files__empty--trash {
    margin-top: 74px;
}

body#chromeos .cros-files__illo {
    display: block;
    width: 300px;
    height: 150px;
    margin: 0 auto;
}

body#chromeos .cros-files__illo svg {
    display: block;
    width: 100%;
    height: 100%;
}

body#chromeos .cros-files__empty p {
    width: 340px;
    margin: 36px auto 0;
}

body#chromeos .cros-files__empty--trash p {
    margin-top: 32px;
}

body#chromeos .cros-files__empty b {
    display: block;
    font: 500 13px/20px var(--cros-font);
}

/* Paramètres : sous-pages (en-tête avec retour, groupes, curseurs, listes) — relevés sur les captures sp-* */
body#chromeos .cros-settings__row.is-link {
    cursor: default;
}

body#chromeos .cros-settings__subhead {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    margin: -7px 0 8px;
    padding: 0 4px 0 18px;
}

body#chromeos .cros-settings__subhead h3 {
    flex: 1;
    margin: 0;
    font: 500 14px/20px var(--cros-font);
    color: var(--cros-primary);
}

body#chromeos .cros-settings__subhead > .cros-i {
    width: 18px;
    height: 18px;
    color: var(--cros-primary);
}

body#chromeos .cros-settings__subhead > .cros-i:last-child:not(:first-child) {
    color: var(--cros-on-surface);
}

body#chromeos .cros-settings__subsearch {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 200px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font: 400 13px/1 var(--cros-font-text);
    color: var(--cros-on-surface-variant);
    background: var(--cros-chip);
}

body#chromeos .cros-settings__subsearch .cros-i {
    width: 16px;
    height: 16px;
}

body#chromeos .cros-settings__group {
    display: block;
    padding: 14px 20px 12px;
    font: 500 13px/16px var(--cros-font);
    color: var(--cros-on-surface);
}

body#chromeos .cros-settings__group + .cros-settings__row {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-settings__row.is-indent {
    padding-left: 40px;
}

body#chromeos .cros-settings__row.is-indent2 {
    padding-left: 60px;
}

body#chromeos .cros-settings__row.is-nosep,
body#chromeos .cros-settings__row.is-nosep + .cros-settings__row.cros-settings__row--plain {
    border-top: 0;
}

body#chromeos .cros-settings__row--strong b {
    font-weight: 500;
}

body#chromeos .cros-settings__row--compact {
    min-height: 48px;
    padding-top: 6px;
    padding-bottom: 6px;
}

body#chromeos .cros-settings__row a,
body#chromeos .cros-settings__block a,
body#chromeos .cros-settings__printer-tip a {
    color: var(--cros-primary);
    text-decoration: underline;
}

body#chromeos .cros-settings__vsep {
    display: block;
    flex: none;
    width: 1px;
    height: 32px;
    margin: 0 4px;
    background: var(--cros-card-line);
}

/* Curseur : piste de 168 px, partie remplie et bouton à la couleur principale, graduations en points */
body#chromeos .cros-slider {
    position: relative;
    display: block;
    flex: none;
    width: 168px;
    height: 20px;
}

body#chromeos .cros-slider::before {
    position: absolute;
    top: 9px;
    right: 0;
    left: 0;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(to right, var(--cros-primary) var(--v), var(--cros-btn) var(--v));
    content: "";
}

body#chromeos .cros-slider i {
    position: absolute;
    top: 4px;
    left: calc(var(--v) - 6px);
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cros-primary);
}

body#chromeos .cros-slider__labels {
    position: absolute;
    top: 22px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    font: 400 12px/16px var(--cros-font-text);
    color: var(--cros-on-surface);
}

body#chromeos .cros-slider--ticks {
    margin-bottom: 18px;
}

/* Ethernet : état connecté et bouton « Configurer » */
body#chromeos .cros-settings__netstate b {
    flex: 1;
    font: 500 14px/20px var(--cros-font);
    color: #6cdba9;
}

body#chromeos .cros-settings__netstate .cros-btn {
    height: 36px;
    padding: 0 16px;
}

/* Clavier intégré : pastille de l'appareil */
body#chromeos .cros-settings__kbdicon {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cros-btn);
}

/* Gérer vos applications */
body#chromeos .cros-settings__approw b {
    flex: 1;
}

body#chromeos .cros-settings__approw .cros-settings__logo {
    width: 32px;
    height: 32px;
}

/* Gestion du stockage */
body#chromeos .cros-settings__storage {
    display: block;
    height: 158px;
    padding: 24px 20px 0;
}

body#chromeos .cros-settings__bar {
    display: block;
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--cros-primary-container) var(--v), var(--cros-qs-tile) var(--v));
}

body#chromeos .cros-settings__legend {
    display: grid;
    grid-template-columns: 31% 69%;
    margin-top: 12px;
    font: 400 13px/20px var(--cros-font-text);
    text-align: center;
}

body#chromeos .cros-settings__legend b {
    display: block;
    font-weight: 400;
}

/* Langues */
body#chromeos .cros-settings__block {
    display: block;
    padding: 28px 20px 12px;
    border-top: 1px solid var(--cros-card-line);
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-settings__block b {
    display: block;
    margin-bottom: 16px;
    font-weight: 500;
}

body#chromeos .cros-settings__langs {
    display: block;
    padding: 18px 20px 0 60px;
}

body#chromeos .cros-settings__langs .cros-settings__row {
    min-height: 49px;
    padding: 4px 0;
}

body#chromeos .cros-settings__langs .cros-settings__row + .cros-settings__row {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-settings__addlang {
    display: block;
    padding: 16px 20px 22px 60px;
    border-top: 1px solid var(--cros-card-line);
    margin-left: 60px;
    padding-left: 0;
}

/* Imprimer : conseil « Vous ne voyez pas votre imprimante ? » et ajout manuel */
body#chromeos .cros-settings__row--open {
    border-bottom: 0;
}

body#chromeos .cros-settings__printer-tip {
    display: flex;
    gap: 14px;
    margin: 2px 14px 0;
    padding: 16px 16px 18px 18px;
    border-radius: 8px;
    font: 400 13px/20px var(--cros-font-text);
    background: var(--cros-app-bg);
}

body#chromeos .cros-settings__printer-tip > span:first-child {
    display: block;
    flex: none;
    width: 40px;
    height: 40px;
    margin-top: 6px;
}

body#chromeos .cros-settings__printer-tip svg {
    width: 40px;
    height: 40px;
}

body#chromeos .cros-settings__printer-tip b {
    display: block;
    margin-bottom: 4px;
    font: 500 15px/22px var(--cros-font);
}

body#chromeos .cros-settings__add {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 80px;
    padding-left: 44px;
    font: 500 13px/1 var(--cros-font);
}

/* Fuseau horaire : boutons radio (désactivés en session invité) */
body#chromeos .cros-settings__radios {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    row-gap: 6px;
    padding: 14px 20px 20px;
    font: 400 13px/20px var(--cros-font);
}

body#chromeos .cros-settings__radios .cros-settings__select {
    grid-column: 2;
    margin-bottom: 4px;
    font: 400 13px/1 var(--cros-font-text);
}

body#chromeos .cros-settings__radios.is-disabled {
    opacity: 0.45;
}

body#chromeos .cros-radio {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cros-on-surface);
    border-radius: 50%;
}

body#chromeos .cros-radio.is-on {
    box-shadow: inset 0 0 0 2px var(--cros-settings-panel), inset 0 0 0 8px var(--cros-on-surface);
}

/* Composants de fin de rangée : jamais étirés (la règle d'étirement vise le texte) */
body#chromeos .cros-settings__row > span.cros-switch:nth-child(n),
body#chromeos .cros-settings__row > span.cros-slider:nth-child(n),
body#chromeos .cros-settings__row > span.cros-settings__select:nth-child(n),
body#chromeos .cros-settings__row > span.cros-settings__vsep:nth-child(n),
body#chromeos .cros-settings__row > span.cros-settings__logo:nth-child(n),
body#chromeos .cros-settings__row > span.cros-settings__kbdicon:nth-child(n),
body#chromeos .cros-settings__row > span.cros-i:nth-child(n) {
    flex: none;
}

body#chromeos .cros-settings__kbd b,
body#chromeos .cros-settings__approw b {
    flex: 1;
}


/* Étagère noire (fenêtre agrandie) : pastilles plus sombres, bouton du lanceur sans disque (relevé) */
body#chromeos.is-maximized .cros-shelf__pill:not(.is-open) {
    background: var(--cros-chip-max);
}

body#chromeos.is-maximized .cros-shelf__launcher:not(.is-open) {
    background: transparent;
}

/* Pastille « Ne pas déranger » de l'étagère */
body#chromeos .cros-shelf__dnd {
    right: 186px;
    justify-content: center;
    width: 44px;
    padding: 0;
}

body#chromeos .cros-shelf__dnd[hidden] {
    display: none;
}

body#chromeos .cros-shelf__dnd .cros-i {
    width: 20px;
    height: 20px;
}


/* Interrupteur inactif (Bluetooth sans adaptateur, relevé) */
body#chromeos .cros-switch.is-inert {
    background: var(--cros-switch-inert);
}

body#chromeos .cros-switch.is-inert::after {
    background: var(--cros-switch-inert-knob);
}

/* Menu d'une liste déroulante (menu natif de Chromium : rangées de 25 px, surlignage bleu) */
body#chromeos .cros-select-menu {
    position: fixed;
    display: block;
    padding: 0;
    border: 1px solid var(--cros-menu-border);
    font: 400 13px/25px var(--cros-font-text);
    color: var(--cros-on-surface);
    background: var(--cros-menu-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 2000;
}

body#chromeos .cros-select-menu span {
    display: block;
    height: 25px;
    padding: 0 16px;
    white-space: nowrap;
}

body#chromeos .cros-select-menu span.is-selected,
body#chromeos .cros-select-menu span:hover {
    color: #000000;
    background: var(--cros-menu-sel);
}


/* Fichiers : opérations (sélection, renommage, menu ⋮, notification, confirmation) — relevés sur la VM */
body#chromeos .cros-files__row:not(.cros-files__row--head) {
    cursor: default;
}

body#chromeos .cros-files__row.is-selected {
    background: var(--cros-files-selected);
}

body#chromeos .cros-files__row .cros-i--folder {
    width: 20px;
    height: 20px;
}

body#chromeos .cros-files__rename {
    width: 346px;
    height: 24px;
    margin-left: -2px;
    padding: 0 2px;
    border: 2px solid var(--cros-primary);
    border-radius: 4px;
    font: 400 13px/1 var(--cros-font-text);
    color: var(--cros-on-surface);
    background: var(--cros-panel);
    outline: none;
}

body#chromeos .cros-files__empty.is-gone {
    display: none;
}

body#chromeos .cros-files__header .cros-i.is-open {
    border-radius: 8px;
    box-shadow: 0 0 0 8px var(--cros-btn);
    background: currentColor;
}

body#chromeos .cros-files__menu {
    position: absolute;
    top: 56px;
    right: 4px;
    display: block;
    width: 256px;
    padding: 8px 0;
    border-radius: 8px;
    font: 400 13px/36px var(--cros-font-text);
    background: var(--cros-files-menu);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

body#chromeos .cros-files__menu > span {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
}

body#chromeos .cros-files__menu > span.is-off {
    color: var(--cros-chrome-disabled);
}

body#chromeos .cros-files__menu kbd {
    margin-left: auto;
    font: inherit;
}

body#chromeos .cros-files__menu hr {
    height: 1px;
    margin: 8px 0;
    border: 0;
    background: var(--cros-files-menu-line);
}

body#chromeos .cros-files__menu-sub .cros-i {
    width: 16px;
    height: 16px;
    margin-left: auto;
}

body#chromeos .cros-files__menu .cros-files__space {
    display: block;
    height: auto;
    padding-bottom: 6px;
    line-height: 20px;
}

body#chromeos .cros-files__space i {
    display: block;
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--cros-primary) 3%, var(--cros-btn) 3%);
}

body#chromeos .cros-files__toast {
    position: absolute;
    right: 39px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 504px;
    height: 68px;
    padding: 0 28px 0 24px;
    border-radius: 12px;
    font: 400 13px/20px var(--cros-font-text);
    background: var(--cros-files-menu);
    z-index: 10;
}

body#chromeos .cros-files__toast > span {
    flex: 1;
}

body#chromeos .cros-files__toast b {
    display: block;
    font-weight: 400;
}

body#chromeos .cros-files__toast small {
    display: block;
    font-size: 13px;
    color: var(--cros-files-done);
}

body#chromeos .cros-files__toast button {
    border: 0;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-primary);
    background: transparent;
}

body#chromeos .cros-files__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.64);
    z-index: 20;
}

body#chromeos .cros-files__dialog {
    width: 512px;
    padding: 28px 32px 28px;
    border-radius: 20px;
    background: var(--cros-files-menu);
}

body#chromeos .cros-files__dialog h3 {
    margin: 0 0 12px;
    font: 500 18px/24px var(--cros-font);
}

body#chromeos .cros-files__dialog p {
    margin: 0;
    font: 400 14px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-files__dialog > span {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 32px;
}

/* Calques d'effet des réglages d'affichage (relevés pixel à pixel, voir chromeos-shell.js) */
body#chromeos .cros-fx {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
}

body#chromeos .cros-fx[hidden] {
    display: none;
}

body#chromeos .cros-fx--night {
    mix-blend-mode: multiply;
}

body#chromeos .cros-fx--invert {
    background: #ffffff;
    mix-blend-mode: difference;
}

body#chromeos .cros-settings__row[hidden],
body#chromeos .cros-mag[hidden],
body#chromeos .cros-cc-preview[hidden],
body#chromeos .cros-qs__tile[hidden],
body#chromeos .cros-qs__tile small[hidden] {
    display: none;
}

/* Correction des couleurs : nuancier (os-settings, resources.pak : .color-preview-holder, Google *-600 vers transparent) */
body#chromeos .cros-cc-svg {
    position: absolute;
    width: 0;
    height: 0;
}

/* curseur et graduations centrés ensemble dans la ligne (settings-slider) : piste 7 px au-dessus du centre (relevé) */
body#chromeos .cros-slider[data-cros-cc-amount] {
    margin-bottom: 14px;
}

body#chromeos .cros-cc-preview {
    display: block;
    margin: 0 20px 16px 62px;
    padding: 16px 0;
    border: 1px solid var(--cros-card-line);
    border-radius: 8px;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface);
    text-align: center;
}

body#chromeos .cros-cc-preview__table {
    display: grid;
    grid-template-columns: repeat(8, 65.5px);
    justify-content: center;
}

body#chromeos .cros-cc-preview__table b {
    padding: 16px 0 4px;
    font-weight: 400;
}

body#chromeos .cros-cc-preview__table i {
    height: 92px;
}

body#chromeos .cros-cc-preview--red {
    background: linear-gradient(180deg, #d93025, transparent);
}

body#chromeos .cros-cc-preview--orange {
    background: linear-gradient(180deg, #e8710a, transparent);
}

body#chromeos .cros-cc-preview--yellow {
    background: linear-gradient(180deg, #f9ab00, transparent);
}

body#chromeos .cros-cc-preview--green {
    background: linear-gradient(180deg, #1e8e3e, transparent);
}

body#chromeos .cros-cc-preview--cyan {
    background: linear-gradient(180deg, #12b5cb, transparent);
}

body#chromeos .cros-cc-preview--blue {
    background: linear-gradient(180deg, #1a73e8, transparent);
}

body#chromeos .cros-cc-preview--purple {
    background: linear-gradient(180deg, #9334e6, transparent);
}

body#chromeos .cros-cc-preview--grey {
    background: linear-gradient(180deg, #80868b, transparent);
}

body#chromeos .cros-cc-preview + .cros-settings__row {
    border-top: 1px solid var(--cros-card-line);
}

/* Bulle de valeur du curseur de taille d'affichage (« 105 % »), visible au survol comme sur la VM */
body#chromeos .cros-slider__bubble {
    position: absolute;
    bottom: 16px;
    left: var(--v);
    display: none;
    padding: 1px 8px;
    border-radius: 10px;
    font: 500 12px/16px var(--cros-font-text);
    color: var(--cros-on-primary);
    background: var(--cros-primary);
    transform: translateX(-50%);
    white-space: nowrap;
}

body#chromeos .cros-slider:hover .cros-slider__bubble,
body#chromeos .cros-slider.is-dragging .cros-slider__bubble {
    display: block;
}

/* Paramètres en mise en page étroite : fenêtre ≤ 980 px (os-settings, narrowThreshold_ = 980 dans resources.pak) —
   barre latérale masquée, bouton ☰, recherche réduite à sa loupe, panneau sur toute la largeur (relevé à 150 %) */
body#chromeos .cros-settings__menu {
    display: none;
}

body#chromeos .cros-settings__scrim {
    display: none;
}

@container (max-width: 980px) {
    body#chromeos .cros-settings__menu {
        position: absolute;
        top: 26px;
        left: 22px;
        display: block;
        color: var(--cros-on-surface);
        z-index: 1;
    }

    body#chromeos .cros-settings__menu .cros-i {
        width: 20px;
        height: 20px;
    }

    body#chromeos .cros-settings__nav h2 {
        padding-left: 56px;
    }

    body#chromeos .cros-settings__navitem {
        display: none;
    }

    body#chromeos .cros-settings__search {
        right: 16px;
        left: auto;
        width: 24px;
        padding: 0;
        font-size: 0;
        background: none;
    }

    body#chromeos .cros-settings__panel {
        right: 18px;
        left: 19px;
        top: 72px;
    }

    /* Tiroir du ☰ (cr-drawer d'os-settings), relevé à 150 % : 288 px, fond de Paramètres, titre en couleur de texte */
    body#chromeos .cros-settings.is-drawer-open .cros-settings__nav {
        bottom: 0;
        width: 288px;
        background: var(--cros-settings-bg);
        z-index: 2;
    }

    body#chromeos .cros-settings.is-drawer-open .cros-settings__nav h2 {
        padding: 15px 0 0 61px;
        font-weight: 400;
        color: var(--cros-on-surface);
    }

    body#chromeos .cros-settings.is-drawer-open .cros-settings__navitem {
        display: block;
    }

    body#chromeos .cros-settings.is-drawer-open .cros-settings__nav h2 + .cros-settings__navitem {
        margin-top: 44px;
    }

    body#chromeos .cros-settings.is-drawer-open .cros-settings__navitem .cros-i {
        color: var(--cros-primary);
    }

    body#chromeos .cros-settings.is-drawer-open .cros-settings__menu {
        left: 28px;
        color: var(--cros-primary);
        z-index: 3;
    }

    body#chromeos .cros-settings.is-drawer-open .cros-settings__scrim {
        position: absolute;
        inset: 0 0 0 288px;
        display: block;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2;
    }
}

/* Écran tourné : la racine porte la rotation ; rien ne déborde ni ne défile */
html:has(#chromeos) {
    background: #000000;
    overflow: hidden;
}

/* Loupe plein écran : sous-réglages (os-settings, relevés à ×2) — retrait aligné sur le texte de la description */
body#chromeos .cros-mag {
    display: block;
    margin-left: 56px;
}

body#chromeos .cros-mag__modes {
    grid-auto-rows: 48px;
    row-gap: 0;
    padding: 0 0 0 0;
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-mag__modes b {
    font-weight: 400;
    cursor: default;
}

body#chromeos .cros-mag .cros-mag__row {
    min-height: 65px;
    padding-left: 0;
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-mag + .cros-settings__row {
    border-top: 1px solid var(--cros-card-line);
}

/* Fichiers : arborescence de Téléchargements (20 px par niveau, pas de 48 px), relevé fx-files-dossier-vide / grille */
body#chromeos .cros-files__navitem--sub {
    position: relative;
}

body#chromeos .cros-files__twisty {
    position: absolute;
    top: 10px;
    left: 31px;
    display: none;
}

body#chromeos .cros-files__navitem--sub.has-children .cros-files__twisty {
    display: block;
}

body#chromeos .cros-files__navitem--sub.is-collapsed .cros-files__twisty {
    transform: rotate(-90deg);
}

/* le retrait d'une entrée ne change pas quand elle est sélectionnée (relevé) : Téléchargements garde 52 px,
   « Mes fichiers » (flèche en tête) 12 px dans les deux états */
body#chromeos .cros-files__navitem--sub.is-selected {
    padding-left: 52px;
}

body#chromeos .cros-files__navitem[data-cros-files-go="my-files"] {
    padding-left: 12px;
}

body#chromeos .cros-files__navitem[data-cros-files-go="my-files"] > .cros-i--arrow-drop-down {
    margin-right: -10px;
}

body#chromeos .cros-files__tree {
    display: block;
}

body#chromeos .cros-files__navitem--tree {
    margin-top: 8px;
    padding-left: calc(72px + 20px * var(--depth));
}

body#chromeos .cros-files__navitem--tree.is-selected {
    padding-left: calc(72px + 20px * var(--depth));
}

body#chromeos .cros-files__navname {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-files__crumbs .is-link {
    color: var(--cros-on-surface-variant);
    cursor: default;
}

/* Recherche : champ 288 × 48, loupe dans un carré arrondi, filtres en pastilles, « Ouvrir » (relevé fx-files-recherche-*) */
body#chromeos .cros-files__search,
body#chromeos .cros-files__results,
body#chromeos .cros-files__searchchips {
    display: none;
}

body#chromeos .cros-files.is-searching .cros-files__search {
    display: flex;
    align-items: center;
    flex: none;
    width: 288px;
    height: 48px;
    margin: 0 -8px 0 -2px;
    padding: 0 12px 0 5px;
    border-radius: 12px;
    background: var(--cros-files-search);
}

body#chromeos .cros-files.is-searching .cros-files__header > [data-cros-files-act="search"] {
    display: none;
}

body#chromeos .cros-files__searchbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    border-radius: 12px;
}

/* le carré de la loupe signale le focus du champ (relevé : absent quand un menu de filtre l'a pris) */
body#chromeos .cros-files__search:focus-within .cros-files__searchbtn {
    background: var(--cros-files-search-icon);
}

body#chromeos .cros-files__searchbtn .cros-i {
    width: 20px;
    height: 20px;
}

body#chromeos .cros-files__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    font: 400 13px/1 var(--cros-font-text);
    color: var(--cros-on-surface);
    background: transparent;
    outline: none;
}

body#chromeos .cros-files__search input::placeholder {
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-files__search .cros-i--search-clear {
    flex: none;
    width: 20px;
    height: 20px;
}

body#chromeos .cros-files.has-results [data-cros-files-act="delete"],
body#chromeos .cros-files.has-results [data-cros-crumbs],
body#chromeos .cros-files.has-results .cros-files__header > h2:not(.cros-files__results) {
    display: none;
}

body#chromeos .cros-files.has-results .cros-files__results {
    display: block;
}

body#chromeos .cros-files__openbtn {
    border: 0;
    font: 500 13px/1 var(--cros-font);
    color: var(--cros-primary);
    background: transparent;
}

body#chromeos .cros-files.has-results .cros-files__searchchips {
    display: flex;
    gap: 12px;
    height: 57px;
    padding: 14px 0 0 20px;
}

body#chromeos .cros-files__searchchips > span {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--cros-files-hsep);
    border-radius: 8px;
    font: 500 14px/1 var(--cros-font);
}

body#chromeos .cros-files__searchchips .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-files__searchchips .cros-i--drop-small {
    width: 20px;
    height: 20px;
}

/* Vue grille : titre de section « Dossiers », cartes 162 × 48 bordées, pas de ligne d'en-tête (relevé fx-files-grille) */
body#chromeos .cros-files__list.is-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 20px;
}

body#chromeos .cros-files__table:has(.cros-files__list.is-grid:not(:empty)) .cros-files__row--head {
    display: none;
}

body#chromeos .cros-files__gridhead {
    flex: 0 0 100%;
    margin: 18px 0 12px;
    font: 500 13px/20px var(--cros-font);
}

body#chromeos .cros-files__tile {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 162px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--cros-files-hsep);
    border-radius: 12px;
    font: 400 13px/1 var(--cros-font-text);
}

body#chromeos .cros-files__tile.is-selected {
    border-color: transparent;
    background: var(--cros-files-selected);
}

body#chromeos .cros-files__tile .cros-i--folder {
    flex: none;
    width: 20px;
    height: 20px;
}

body#chromeos .cros-files__tile .cros-files__name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-files__sortmenu {
    right: 52px;
    width: 180px;
}

body#chromeos .cros-files__sortmenu > span {
    justify-content: space-between;
}

body#chromeos .cros-files__sortmenu .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-files__row--head [data-cros-sort] {
    cursor: default;
}

body#chromeos .cros-files__row--head > span:first-child {
    display: block;
}

/* Menus des filtres de recherche (relevés fx-files3-*) : 168 px, lignes de 36 px, libellé tronqué, coche à droite ;
   pastille enfoncée tant que le menu est ouvert (clair #f2eef2 ; sombre non relevé) */
body#chromeos .cros-files__searchchips > span {
    cursor: default;
}

body#chromeos .cros-files__searchchips > span.is-open {
    background: var(--cros-files-chip-open, transparent);
}

body#chromeos .cros-files__chipmenu {
    right: auto;
    width: 168px;
}

body#chromeos .cros-files__chipmenu > span {
    justify-content: space-between;
    gap: 8px;
}

body#chromeos .cros-files__chipopt {
    max-width: 97px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-files__chipmenu .cros-i {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Menu contextuel de Fichiers (relevé fx-files4-ctx-*) : 270 px, lignes de 36 px (Terminal 40 px), séparateurs à 8 px,
   texte à 16 px, raccourcis alignés à droite ; ouvert au clavier, premier élément actif cerné */
body#chromeos .cros-files__ctx {
    position: absolute;
    display: block;
    width: 270px;
    padding: 7px 0 8px;
    border-radius: 8px;
    font: 400 13px/1 var(--cros-font-text);
    background: var(--cros-files-menu);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 12;
}

body#chromeos .cros-files__ctx.is-empty {
    width: 254px;
}

body#chromeos .cros-files__ctx > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    margin: 0 4px;
    padding: 0 12px;
    border-radius: 8px;
    cursor: default;
}

body#chromeos .cros-files__ctx > span:first-child {
    height: 40px;
}

body#chromeos .cros-files__ctx > span b {
    font-weight: 400;
}

body#chromeos .cros-files__ctx kbd {
    font: 400 13px/1 var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-files__ctx img {
    width: 16px;
    height: 16px;
}

body#chromeos .cros-files__ctx .is-off {
    opacity: 0.38;
}

body#chromeos .cros-files__ctx .is-focus {
    box-shadow: inset 0 0 0 2px var(--cros-primary);
}

body#chromeos .cros-files__ctx hr {
    height: 1px;
    margin: 6px 0 8px;
    border: 0;
    background: var(--cros-files-menu-line);
}

/* Aperçu « Lire les informations » (relevé fx-files4-infos) : barre de 56 px, voile noir 30 %, panneau de 320 px */
body#chromeos .cros-files__qv {
    position: absolute;
    top: 32px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(0, 0, 0, 0.3);
    z-index: 20;
}

body#chromeos .cros-files__qv header {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 56px;
    padding: 0 18px 0 18px;
    font: 400 16px/1 var(--cros-font);
    background: var(--cros-panel);
}

body#chromeos .cros-files__qv header b {
    flex: 1;
    font-weight: 400;
}

body#chromeos .cros-files__qvinfo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -12px;
    border-radius: 12px;
    color: var(--cros-on-primary-container);
    background: var(--cros-primary-container);
}

body#chromeos .cros-files__qv aside {
    position: absolute;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 320px;
    padding: 30px 24px;
    font: 400 13px/18px var(--cros-font-text);
    background: var(--cros-panel);
}

body#chromeos .cros-files__qv aside h4 {
    margin: 0 0 26px;
    font: 500 14px/20px var(--cros-font);
}

body#chromeos .cros-files__qv dl {
    display: grid;
    grid-template-columns: 112px 1fr;
    row-gap: 12px;
    margin: 0;
}

body#chromeos .cros-files__qv dt {
    width: 80px;
}

body#chromeos .cros-files__qv dd {
    margin: 0;
}

body#chromeos .cros-files__qvstage {
    position: absolute;
    top: 381px;
    left: 390px;
    width: 224px;
    height: 240px;
    color: var(--cros-on-primary-container);
    text-align: center;
    transform: translate(-50%, -50%);
}

/* la forme prend primary_container, comme dans l'app d'origine (mesuré : #e4dfff en clair) */
body#chromeos .cros-files__qvblob svg path {
    fill: var(--cros-sys-primary_container);
}

body#chromeos .cros-files__qvblob {
    position: absolute;
    inset: 0;
    display: block;
}

body#chromeos .cros-files__qvblob svg {
    width: 100%;
    height: 100%;
}

body#chromeos .cros-files__qvicon {
    position: relative;
    display: block;
    padding-top: 66px;
}

body#chromeos .cros-files__qvicon .cros-i {
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

body#chromeos .cros-files__qvstage p {
    position: relative;
    margin: 4px 0 0;
    font: 400 13px/20px var(--cros-font-text);
}

/* Fichiers épinglés : bouton rond dans l'étagère, bulle du même matériau que les réglages rapides (relevé) */
body#chromeos .cros-shelf__holding {
    right: 199px;
    justify-content: center;
    width: 34px;
    padding: 0;
    border-radius: 50%;
}

body#chromeos .cros-shelf__dnd:not([hidden]) ~ .cros-shelf__holding {
    right: 247px;
}

body#chromeos .cros-shelf__holding[hidden] {
    display: none;
}

body#chromeos .cros-shelf__holding .cros-i {
    width: 20px;
    height: 20px;
}

body#chromeos .cros-shelf__holding.is-open {
    box-shadow: inset 0 0 0 2px var(--cros-primary);
}

body#chromeos .cros-holding {
    right: 9px;
    bottom: 56px;
    width: 360px;
    height: 112px;
    padding: 16px;
    background: var(--cros-qs-bg);
}

body#chromeos .cros-holding h3 {
    margin: 0 0 18px;
    font: 500 15px/24px var(--cros-font);
}

body#chromeos .cros-holding__chips {
    display: flex;
    gap: 8px;
}

body#chromeos .cros-holding__chip {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 40px;
    padding: 0 18px 0 12px;
    border-radius: 8px;
    font: 500 13px/1 var(--cros-font);
    background: var(--cros-qs-tile);
}

body#chromeos .cros-holding__chip .cros-i {
    width: 16px;
    height: 16px;
}

/* Chrome : onglets multiples, barre d'adresse, suggestions, menu ⋮, page hors connexion (relevés fx-chrome-*) */
body#chromeos .cros-chrome__tablist {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

body#chromeos .cros-chrome__tab:not(.is-active) {
    background: transparent;
}

body#chromeos .cros-chrome__tab .cros-i--close {
    cursor: default;
}

body#chromeos .cros-chrome__omnibox {
    position: relative;
}

body#chromeos .cros-chrome__input {
    position: absolute;
    top: 0;
    right: 120px;
    bottom: 0;
    left: 44px;
    border: 0;
    font: 400 14px/1 var(--cros-font-text);
    color: var(--cros-chrome-text);
    background: transparent;
    outline: none;
    z-index: 2;
}

/* pendant la saisie : les invites disparaissent, « G » et « Mode IA → » passent au-dessus de la carte */
body#chromeos .cros-chrome.is-typing .cros-chrome__placeholder {
    visibility: hidden;
}

body#chromeos .cros-chrome__g,
body#chromeos .cros-chrome__aimode {
    position: relative;
    z-index: 2;
}

body#chromeos .cros-chrome__aimode .cros-i {
    display: none;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: -3px;
}

body#chromeos .cros-chrome.is-typing .cros-chrome__aimode .cros-i {
    display: inline-block;
}

body#chromeos .cros-chrome__siteinfo,
body#chromeos .cros-chrome__url,
body#chromeos .cros-chrome__zoomind[hidden] {
    display: none;
}

body#chromeos .cros-chrome__zoomind {
    width: 18px;
    height: 18px;
    z-index: 3;
}

/* page de site : ⓘ et adresse à la place du « G » et de l'invite, omnibox sans bordure */
body#chromeos .cros-chrome.is-site .cros-chrome__g,
body#chromeos .cros-chrome.is-site .cros-chrome__placeholder,
body#chromeos .cros-chrome.is-site .cros-chrome__aimode {
    display: none;
}

body#chromeos .cros-chrome.is-site .cros-chrome__siteinfo {
    display: block;
    width: 18px;
    height: 18px;
}

body#chromeos .cros-chrome.is-site .cros-chrome__url {
    display: block;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cros-chrome-text);
}

body#chromeos .cros-chrome.is-site .cros-chrome__url span {
    color: var(--cros-chrome-icon);
}

body#chromeos .cros-chrome.is-site .cros-chrome__omnibox {
    border-color: transparent;
    background: var(--cros-chrome-idle);
}

body#chromeos .cros-chrome__suggest {
    position: absolute;
    top: -10px;
    right: -14px;
    left: -16px;
    display: block;
    padding: 46px 0 8px;
    border-radius: 18px;
    font: 400 14px/1 var(--cros-font-text);
    color: var(--cros-chrome-text);
    background: var(--cros-chrome-toolbar);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 1;
}

body#chromeos .cros-chrome__omnibox.is-open {
    border-color: transparent;
}

body#chromeos .cros-chrome__suggest > span {
    display: flex;
    align-items: center;
    gap: 0;
    height: 38px;
    margin-right: 16px;
    padding-left: 22px;
    border-radius: 0 19px 19px 0;
}

body#chromeos .cros-chrome__suggest > span.is-selected {
    box-shadow: inset 4px 0 0 var(--cros-primary);
    background: var(--cros-chrome-aimode);
}

body#chromeos .cros-chrome__suggest b {
    font-weight: 400;
}

body#chromeos .cros-chrome__suggest i {
    font-style: normal;
    color: var(--cros-chrome-icon);
}

body#chromeos .cros-chrome__suggest .cros-i {
    width: 16px;
    height: 16px;
    margin-right: 20px;
}

body#chromeos .cros-chrome__suggestadd .cros-i {
    margin-right: 0;
}

body#chromeos .cros-chrome__suggestadd b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--cros-chrome-aimode);
}

body#chromeos .cros-chrome__menu {
    position: absolute;
    top: 80px;
    right: 8px;
    display: block;
    width: 418px;
    padding: 8px 0;
    border-radius: 8px;
    font: 400 13px/1 var(--cros-font-text);
    color: var(--cros-chrome-text);
    background: var(--cros-panel);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

body#chromeos .cros-chrome__menu > span {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 29px;
    padding: 0 16px 0 20px;
}

body#chromeos .cros-chrome__noicon {
    flex: none;
    width: 16px;
}

body#chromeos .cros-chrome__menu > span > .cros-i:first-child {
    flex: none;
    width: 16px;
    height: 16px;
}

body#chromeos .cros-chrome__menu b {
    flex: 1;
    font-weight: 400;
}

body#chromeos .cros-chrome__menu kbd {
    font: 400 13px/1 var(--cros-font-text);
    color: var(--cros-chrome-icon);
}

body#chromeos .cros-chrome__menu .is-off {
    color: var(--cros-chrome-disabled);
}

body#chromeos .cros-chrome__menu hr {
    height: 1px;
    margin: 4px 0;
    border: 0;
    background: var(--cros-sys-primary_container);
}

body#chromeos .cros-chrome__zoomrow {
    height: 34px;
}

body#chromeos .cros-chrome__zoomrow button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--cros-chrome-text);
    background: var(--cros-chrome-aimode);
}

body#chromeos .cros-chrome__zoomrow em {
    width: 82px;
    font-style: normal;
    text-align: center;
}

body#chromeos .cros-chrome__zoomrow i {
    width: 1px;
    height: 26px;
    margin: 0 8px 0 18px;
    background: var(--cros-sys-primary_container);
}

body#chromeos .cros-chrome__zoomrow .cros-i {
    width: 16px;
    height: 16px;
}

body#chromeos .cros-chrome__offline {
    width: 600px;
    margin: 0 auto;
    padding-top: 139px;
    font: 400 15px/23px var(--cros-font-text);
    color: #5f6368;
}

body#chromeos .cros-chrome__offline[hidden],
body#chromeos .cros-chrome__ntp[hidden] {
    display: none;
}

body#chromeos .cros-chrome__dino {
    display: block;
    width: 44px;
    height: 44px;
    background-position: -40px -5px;
    background-repeat: no-repeat;
}

body#chromeos .cros-chrome__offline h1 {
    margin: 30px 0 22px;
    font: 500 24px/1.2 var(--cros-font-text);
    color: #202124;
    text-align: left;
}

body#chromeos .cros-chrome__offline p {
    width: auto;
    margin: 0;
}

body#chromeos .cros-chrome__offline ul {
    margin: 0;
    padding-left: 40px;
}

body#chromeos .cros-chrome__offline a {
    color: #1a73e8;
    text-decoration: none;
}

body#chromeos .cros-chrome__offline small {
    display: block;
    margin-top: 22px;
    font: 400 12px/1 var(--cros-font-text);
    text-transform: uppercase;
}

/* Sélectionner pour écouter : bouton de l'étagère (même place que Fichiers épinglés, relevé), armé = primary_container */
body#chromeos .cros-shelf__sts {
    right: 199px;
    justify-content: center;
    width: 34px;
    padding: 0;
    border-radius: 50%;
}

body#chromeos .cros-shelf__sts[hidden] {
    display: none;
}

body#chromeos .cros-shelf__sts .cros-i {
    width: 20px;
    height: 20px;
}

body#chromeos .cros-shelf__sts.is-active {
    color: var(--cros-on-primary-container);
    background: var(--cros-primary-container);
}

body#chromeos .cros-shelf__sts:not([hidden]) ~ .cros-shelf__holding {
    right: 247px;
}

/* ChromeVox : barre noire de 44 px (relevée), fenêtres agrandies dessous, cadre orange #f79839 sur l'élément visé */
body#chromeos .cros-cvpanel {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 0 12px 0 13px;
    color: #ffffff;
    background: #000000;
    z-index: 960;
}

body#chromeos .cros-cvpanel[hidden] {
    display: none;
}

body#chromeos .cros-cvpanel > span:not(.cros-i) {
    flex: 1;
}

body#chromeos .cros-cvpanel .cros-i {
    width: 18px;
    height: 18px;
}

body#chromeos .cros-cvpanel .cros-i--settings {
    margin-right: 22px;
}

body#chromeos.has-cvpanel .cros-window.is-maximized {
    top: 44px !important;
    height: calc(100% - 92px) !important;
}

body#chromeos .cros-cv-focus {
    outline: 2px solid #f79839;
    outline-offset: 6px;
}

/* Sous-pages d'Accessibilité (relevées fx-a11y-*) : retraits, aperçu des sous-titres, champs et boutons de voix,
   aperçu du surlignage de Sélectionner pour écouter */
body#chromeos .cros-settings__row.is-indent3 {
    padding-left: 80px;
}

body#chromeos .cros-settings__row small a,
body#chromeos .cros-settings__row > span > a {
    color: var(--cros-primary);
    text-decoration: underline;
}

body#chromeos .cros-settings__caret--split {
    padding-right: 20px;
    border-right: 1px solid var(--cros-card-line);
}

body#chromeos .cros-settings__captions {
    display: block;
    padding: 30px 20px 0;
    border-top: 1px solid var(--cros-card-line);
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-settings__captions b {
    display: block;
    margin-bottom: 14px;
    font-weight: 500;
}

body#chromeos .cros-settings__captionpreview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 152px;
    margin: 22px 0 0 40px;
    border-radius: 4px;
    background-position: center;
    background-size: cover;
}

/* Listes des sous-titres : lignes de 48 px, séparateur en retrait sous chacune sauf la dernière (relevé) */
body#chromeos .cros-settings__row.cros-settings__row--caption {
    min-height: 48px;
    margin-left: 60px;
    padding: 6px 20px 6px 0;
}

body#chromeos .cros-settings__row.cros-settings__row--caption + .cros-settings__row--caption {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-settings__captions + .cros-settings__row--caption {
    margin-top: 20px;
    border-top: 0;
}

body#chromeos .cros-settings__captionpreview em {
    padding: 4px 6px;
    font: 400 16px/1.2 var(--cros-font-text);
    font-style: normal;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.8);
}

body#chromeos .cros-settings__field {
    width: 389px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font: 400 13px/36px var(--cros-font-text);
    background: var(--cros-select);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body#chromeos .cros-settings__row:has(.cros-settings__btn) .cros-settings__field {
    width: 236px;
}

body#chromeos .cros-settings__btn {
    flex: none;
    width: 67px;
    height: 36px;
    margin-left: -4px;
    border-radius: 18px;
    font: 500 13px/36px var(--cros-font);
    color: var(--cros-on-primary-container);
    text-align: center;
    background: var(--cros-primary-container);
}

body#chromeos .cros-settings__btn.is-disabled {
    color: var(--cros-chrome-disabled);
    background: var(--cros-switch-disabled-track, #ccc8ce);
}

body#chromeos .cros-settings__select.is-disabled {
    opacity: 0.38;
}

body#chromeos .cros-settings__highlight {
    display: flex;
    height: 60px;
    margin: 0 20px 8px 60px;
    font: 400 13px/60px var(--cros-font-text);
    text-align: center;
}

body#chromeos .cros-settings__highlight > span {
    flex: 1;
    color: #3c4043;
    background: #ffffff;
}

body#chromeos .cros-settings__highlight > span + span {
    color: #e8eaed;
    background: #202124;
}

body#chromeos .cros-settings__highlight mark {
    color: inherit;
    background: rgba(94, 155, 255, 0.3);
}

/* Touches rémanentes : panneau en haut à gauche, gris 85 à 70 % (relevé par différence), Roboto 20 px, lignes de 34 px ;
   touche enclenchée en blanc, verrouillée soulignée (1 px, 3 px sous la ligne de base) — captures fx-sticky-* */
body#chromeos .cros-sticky {
    position: fixed;
    top: 18px;
    left: 18px;
    display: block;
    padding: 0 10px;
    font: 400 20px/34px var(--cros-font-text);
    color: rgba(255, 255, 255, 0.55);
    background: rgba(85, 85, 85, 0.7);
    pointer-events: none;
    z-index: 9500;
}

body#chromeos .cros-sticky[hidden] {
    display: none;
}

body#chromeos .cros-sticky span {
    display: block;
}

body#chromeos .cros-sticky span.is-latched,
body#chromeos .cros-sticky span.is-locked {
    color: #ffffff;
}

body#chromeos .cros-sticky span.is-locked {
    text-decoration: underline 1px;
    text-underline-offset: 3px;
}

/* Confidentialité › Accès à la position / à l'appareil photo / au micro (relevés 2026-10-21, captures fx-privacy-*) :
   sections de 65 px séparées par un trait, services système en lignes de 49 px (icône d'appli ronde de 32 px) */
body#chromeos .cros-priv__sec {
    display: block;
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-priv__sec > b {
    display: block;
    padding: 32px 20px 13px;
    font: 500 13px/20px var(--cros-font-text);
}

body#chromeos .cros-priv__note,
body#chromeos .cros-priv__none {
    display: block;
    padding: 11px 20px 13px 60px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-priv__none {
    padding-top: 15px;
    padding-bottom: 15px;
}

body#chromeos .cros-priv__note[hidden],
body#chromeos .cros-priv__link[hidden] {
    display: none;
}

body#chromeos .cros-priv__link {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 64px;
    padding: 0 20px 0 62px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-priv__link > span:nth-child(2) {
    flex: 1;
}

body#chromeos .cros-priv__link .cros-i--about-chrome {
    width: 16px;
    height: 16px;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-priv__svc {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 48px;
    margin: 0 20px 0 60px;
    padding: 4px 0;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-priv__svc + .cros-priv__svc {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-priv__svc small {
    display: block;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-priv__appicon {
    flex: none;
    width: 32px;
    height: 32px;
    background-size: contain;
}

body#chromeos .cros-priv__sec + .cros-settings__row {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-priv__state {
    padding-bottom: 0;
}

body#chromeos .cros-priv__edit {
    flex: none;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    font: 500 13px/36px var(--cros-font);
    color: var(--cros-on-primary-container);
    background: var(--cros-primary-container);
    cursor: default;
}

body#chromeos .cros-priv__edit.is-disabled {
    color: var(--cros-chrome-disabled);
    background: var(--cros-switch-disabled-track, #ccc8ce);
}

body#chromeos .cros-priv__managed {
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-priv__iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: -6px;
    border-radius: 50%;
}

body#chromeos .cros-priv__iconbtn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body#chromeos .cros-priv__open {
    margin-left: 4px;
}

/* Boîte « Modifier l'accès » : voile noir 60 % sur le contenu de la fenêtre (barre de titre exclue), carte de 512 px */
body#chromeos .cros-priv__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 30;
}

body#chromeos .cros-priv__dialog {
    width: 512px;
    padding: 36px 32px 32px;
    border-radius: 20px;
    background: var(--cros-files-menu);
}

body#chromeos .cros-priv__dialog > .cros-i {
    display: block;
    color: var(--cros-primary);
}

body#chromeos .cros-priv__dialog h3 {
    margin: 15px 0 26px;
    font: 400 18px/24px var(--cros-font);
}

body#chromeos .cros-priv__radio {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-priv__radio i {
    flex: none;
    width: 12px;
    height: 12px;
    margin: 4px 0 0 2px;
    border: 2px solid var(--cros-on-surface-variant);
    border-radius: 50%;
}

body#chromeos .cros-priv__radio.is-checked i {
    border-color: var(--cros-primary);
    background: radial-gradient(circle, var(--cros-primary) 0 3px, transparent 3.5px);
}

body#chromeos .cros-priv__radio b {
    display: block;
    font: 500 14px/20px var(--cros-font);
}

body#chromeos .cros-priv__radio small {
    display: block;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-priv__radio a {
    color: var(--cros-primary);
    text-decoration: underline;
}

body#chromeos .cros-priv__btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

body#chromeos .cros-priv__btns span {
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    font: 500 13px/36px var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-search);
}

body#chromeos .cros-priv__btns span[data-a="ok"] {
    color: var(--cros-on-primary-container);
    background: var(--cros-primary-container);
}

/* Infobulle d'un bouton d'icône (À propos › Informations sur le build) */
body#chromeos .cros-tip {
    position: fixed;
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    font: 400 12px/18px var(--cros-font-text);
    color: #1f1f1f;
    background: #e3e3e3;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9000;
}

body#chromeos .cros-settings__row > .cros-priv__edit {
    flex: none;
}

body#chromeos .cros-priv__svc b {
    display: block;
    font-weight: 400;
}

body#chromeos .cros-priv__svc small {
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-priv__link .cros-i--about-chrome {
    color: var(--cros-primary);
}

body#chromeos .cros-settings__row > span.cros-priv__edit {
    flex: none;
}

body#chromeos .cros-priv__dialog > .cros-i {
    width: 24px;
    height: 24px;
}

body#chromeos .cros-priv__radio i {
    width: 20px;
    height: 20px;
    margin: 0;
    background-clip: content-box;
}

body#chromeos .cros-priv__radio.is-checked i {
    background: radial-gradient(circle, var(--cros-primary) 0 4.5px, transparent 5px);
}

body#chromeos .cros-priv__radio small {
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-priv__btns span[data-a="cancel"] {
    color: var(--cros-on-surface);
    background: var(--cros-btn);
}

body#chromeos .cros-priv__radio {
    gap: 16px;
}

body#chromeos .cros-priv__btns {
    margin-top: 12px;
}

body#chromeos .cros-priv__dialog {
    padding-top: 32px;
}

body#chromeos .cros-priv__dialog > .cros-i {
    width: 32px;
    height: 32px;
}

body#chromeos .cros-priv__dialog h3 {
    margin-top: 11px;
}

body#chromeos .cros-priv__radio > span {
    max-width: 404px;
}

/* Fenêtre système « Vérifier l'heure du système » (Définir la date et l'heure) : 546 × 302 px centrée sur l'écran,
   sans voile, bord 1 px et ombre ; champs date / heure natifs (relevé clair, capture fx-datetime-dialogue) */
body#chromeos .cros-datetime {
    position: fixed;
    top: 247px;
    left: 367px;
    display: block;
    width: 546px;
    height: 302px;
    padding: 56px 20px 0;
    border: 1px solid var(--cros-card-line);
    border-radius: 12px;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface);
    background: var(--cros-files-menu);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 900;
}

body#chromeos .cros-datetime__close {
    position: absolute;
    top: 22px;
    right: 22px;
}

body#chromeos .cros-datetime h3 {
    margin: 0 0 18px;
    font: 400 18px/26px var(--cros-font);
}

body#chromeos .cros-datetime p {
    margin: 0 0 16px;
}

body#chromeos .cros-datetime__fields {
    display: flex;
    gap: 20px;
}

body#chromeos .cros-datetime__fields label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

body#chromeos .cros-datetime__fields input {
    height: 36px;
    padding: 0 12px 0 16px;
    border: 0;
    border-radius: 8px;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface);
    background: var(--cros-select);
    color-scheme: light dark;
}

body#chromeos .cros-datetime__ok {
    display: block;
    width: 67px;
    height: 36px;
    margin: 19px 0 0 auto;
    border-radius: 18px;
    font: 500 13px/36px var(--cros-font);
    color: var(--cros-on-primary, #ffffff);
    text-align: center;
    background: var(--cros-primary);
}

body#chromeos .cros-datetime {
    padding-top: 60px;
}

body#chromeos .cros-datetime h3 {
    margin-bottom: 16px;
    font-weight: 500;
}

body#chromeos .cros-datetime__close {
    color: var(--cros-on-surface-variant);
}

/* Appareil › Clavier › Personnaliser les touches du clavier (relevé sombre, captures fx-touches-*) : pastilles de touche
   noires de 26 px, éclaircies (#4c4963, mesuré) quand la touche est réassignée ; lignes de 64 px + séparateur ; bouton
   « Réinitialiser les touches » tonal de 205 × 34 px dans l'en-tête */
body#chromeos .cros-remap {
    display: block;
}

body#chromeos .cros-remap__title {
    display: block;
    padding: 11px 20px 10px;
    font: 500 13px/20px var(--cros-font-text);
}

body#chromeos .cros-remap__hint {
    display: block;
    padding: 20px 20px 8px 40px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-remap__hint--actions {
    padding-top: 25px;
    padding-bottom: 21px;
}

body#chromeos .cros-remap__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    margin-left: 40px;
    padding-right: 20px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-remap__row + .cros-remap__row {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-remap__row--action {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-remap__row--action > span:first-child {
    padding-left: 12px;
}

body#chromeos .cros-remap__key {
    display: flex;
    align-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    background: #000000;
}

body#chromeos .cros-remap__key .cros-i {
    width: 18px;
    height: 18px;
    margin: 0 -8px;
}

body#chromeos .cros-remap__row.is-remapped .cros-remap__key {
    background: #4c4963;
}

body#chromeos .cros-remap__row .cros-settings__select {
    overflow: hidden;
    white-space: nowrap;
}

body#chromeos .cros-remap__reset {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    margin-left: auto;
    padding: 0 16px 0 17px;
    border-radius: 17px;
    font: 500 13px/34px var(--cros-font);
    color: var(--cros-on-surface);
    background: var(--cros-btn);
    cursor: default;
}

body#chromeos .cros-remap__row {
    box-sizing: content-box;
}

body#chromeos .cros-remap__key {
    min-width: 30px;
    height: 30px;
    border-radius: 15px;
    font: 400 13px/20px var(--cros-font-text);
}

/* Accessibilité › Synthèse vocale › Paramètres ChromeVox (relevé sombre, captures fx-cvset-*) : sections Général, Voix,
   Braille ; lignes de 64 px + séparateur décalées de 60 px ; listes dont les valeurs dépendent du système (voix, tables
   braille, plages Bluetooth) reproduites figées (is-static) */
body#chromeos .cros-cvs {
    display: block;
}

body#chromeos .cros-cvs__head {
    display: block;
    padding: 31px 20px 12px;
    font: 500 13px/20px var(--cros-font-text);
}

body#chromeos .cros-cvs__row {
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: content-box;
    height: 64px;
    margin-left: 60px;
    padding-right: 20px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-cvs__row + .cros-cvs__row {
    border-top: 1px solid var(--cros-card-line);
}

body#chromeos .cros-cvs__row > span:first-child {
    flex: 1;
}

body#chromeos .cros-cvs__row small {
    display: block;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-cvs__row--table > span:first-child {
    flex: none;
    width: 156px;
}

body#chromeos .cros-cvs__row--table .cros-settings__select:last-child {
    margin-left: auto;
}

body#chromeos .cros-cvs__btn {
    flex: none;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    font: 500 13px/36px var(--cros-font);
    background: var(--cros-btn);
}

body#chromeos .cros-cvs__virtual {
    display: block;
    margin-left: 60px;
    padding: 12px 20px 20px 0;
    border-top: 1px solid var(--cros-card-line);
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-cvs__virtual b {
    display: block;
    font-weight: 400;
}

body#chromeos .cros-cvs__virtual small {
    display: block;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-cvs__row--sub {
    margin-left: 92px;
}

body#chromeos .cros-cvs__virtual + .cros-cvs__row--sub {
    border-top: 0;
}

body#chromeos .cros-cvs__num {
    flex: none;
    box-sizing: border-box;
    width: 80px;
    height: 36px;
    padding: 0 17px;
    border-radius: 8px;
    font: 400 13px/36px var(--cros-font-text);
    background: var(--cros-select);
}

body#chromeos .cros-cvs__dev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 20px;
    border-top: 1px solid var(--cros-card-line);
    font: 500 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-settings__select.is-static {
    overflow: hidden;
    white-space: nowrap;
}

body#chromeos .cros-cvs .cros-settings__select {
    flex: none;
    overflow: hidden;
    white-space: nowrap;
}

body#chromeos .cros-cvs__row--bt .cros-settings__select {
    justify-content: flex-end;
}

/* Clavier à l'écran (relevé sombre, captures fx-osk-*) : 1280 × 363 px en bas de l'écran, barre d'outils noire de 36 px
   à coins arrondis (onglet actif souligné), zone des touches #31303b, touches #000 de 51 px, touches spéciales #47445c,
   Entrée en couleur principale ; positions des touches dans cfg.osk */
body#chromeos .cros-osk {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    border-top: 1px solid #2f2e35;
    border-radius: 20px 20px 0 0;
    font: 400 20px/1 var(--cros-font-text);
    color: #e3e1e9;
    background: linear-gradient(#000000 0 36px, #31303b 36px);
    user-select: none;
    z-index: 950;
}

body#chromeos .cros-osk[hidden] {
    display: none;
}

body#chromeos .cros-osk__bar {
    position: relative;
    display: block;
    height: 36px;
}

body#chromeos .cros-osk__tool {
    position: absolute;
    top: 8px;
    display: block;
    width: 20px;
    height: 20px;
    margin-left: -10px;
}

body#chromeos .cros-osk__tool.is-active {
    color: #c6bfff;
}

body#chromeos .cros-osk__tool.is-active::after {
    position: absolute;
    top: 25px;
    left: -6px;
    width: 32px;
    height: 2px;
    background: #c6bfff;
    content: '';
}

body#chromeos .cros-osk__sep {
    position: absolute;
    top: 8px;
    width: 1px;
    height: 20px;
    background: #47464f;
}

body#chromeos .cros-osk__key {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #000000;
    cursor: default;
}

body#chromeos .cros-osk__key b {
    font-weight: 400;
}

body#chromeos .cros-osk__key i {
    position: absolute;
    top: 6px;
    right: 10px;
    font: 400 13px/1 var(--cros-font-text);
    font-style: normal;
}

body#chromeos .cros-osk__key.is-special {
    background: #47445c;
}

body#chromeos .cros-osk__key.is-enter {
    color: #2e2767;
    background: #c6bfff;
}

body#chromeos .cros-osk__key.is-on {
    background: #5d5a74;
}

body#chromeos .cros-osk__key .cros-i {
    width: 24px;
    height: 24px;
}

body#chromeos .cros-osk__key:active {
    filter: brightness(1.4);
}

body#chromeos .cros-shelf__osk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding: 0;
}

body#chromeos .cros-shelf__osk[hidden] {
    display: none;
}

body#chromeos .cros-osk__tool {
    top: 6px;
    width: 24px;
    height: 24px;
    margin-left: -12px;
}

body#chromeos .cros-osk__tool .cros-i {
    width: 24px;
    height: 24px;
}

body#chromeos .cros-shelf__pill.cros-shelf__osk {
    right: 197px;
    left: auto;
}

/* Dictée et centre de notifications (relevé sombre, captures fx-dictee-*) */
body#chromeos .cros-settings__row.cros-dict__lang {
    padding-left: 80px;
}

body#chromeos .cros-settings__row > span.cros-dict__edit {
    flex: none;
    color: var(--cros-on-surface);
    background: var(--cros-btn);
}

body#chromeos .cros-shelf__pill.cros-shelf__round {
    justify-content: center;
    width: 36px;
    padding: 0;
    color: var(--cros-primary);
}

body#chromeos .cros-shelf__pill.cros-shelf__notif {
    justify-content: center;
    width: 36px;
    padding: 0;
    border-radius: 18px 4px 4px 18px;
}

body#chromeos .cros-shelf__pill.cros-shelf__notif.is-open {
    color: #2e2767;
    background: var(--cros-primary-container);
}

body#chromeos .cros-shelf.has-notifs .cros-shelf__date {
    border-radius: 4px 18px 18px 4px;
}

body#chromeos .cros-shelf__dict[hidden],
body#chromeos .cros-shelf__notif[hidden] {
    display: none;
}

body#chromeos .cros-dict__veil {
    position: fixed;
    inset: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 960;
}

body#chromeos .cros-dict__dialog {
    width: 449px;
    padding: 24px 20px 20px;
    border: 1px solid #47464f;
    border-radius: 16px;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface);
    background: #1c1b20;
}

body#chromeos .cros-dict__dialog h3 {
    margin: 0 0 12px;
    font: 500 16px/24px var(--cros-font);
}

body#chromeos .cros-dict__dialog p {
    margin: 0;
}

body#chromeos .cros-dict__btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

body#chromeos .cros-dict__btns span {
    height: 36px;
    padding: 0 20px;
    border-radius: 18px;
    font: 500 13px/36px var(--cros-font);
    color: var(--cros-on-surface);
    background: #4c4782;
}

body#chromeos .cros-dict__btns span[data-a="ok"] {
    color: #2e2767;
    background: var(--cros-primary-container);
}

body#chromeos .cros-notifs {
    position: fixed;
    right: 9px;
    bottom: 58px;
    display: block;
    width: 398px;
    padding: 8px 8px 0;
    border-radius: 24px;
    font: 400 13px/20px var(--cros-font-text);
    color: var(--cros-on-surface);
    background: #2a2930;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 940;
}

body#chromeos .cros-notifs__card {
    position: relative;
    display: block;
    padding: 18px 16px 16px 52px;
    border-radius: 16px;
    background: #36353c;
}

body#chromeos .cros-notifs__app {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #601410;
    background: #f2b8b5;
}

body#chromeos .cros-notifs__app .cros-i {
    width: 16px;
    height: 16px;
}

body#chromeos .cros-notifs__head {
    display: block;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-notifs__more {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #47464f;
}

body#chromeos .cros-notifs__card b {
    display: block;
    margin-top: 12px;
    font-weight: 500;
}

body#chromeos .cros-notifs__card p {
    margin: 8px 0 0;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-notifs__clear {
    display: block;
    padding: 14px 16px 16px;
    color: var(--cros-primary);
    text-align: right;
}

/* Accessibilité › Curseur › Touches pour la souris (relevé sombre, captures fx-mousekeys-*) : la page est plus large que la
   fenêtre et coupée à droite (relevé) ; schémas os-settings-illo de 345 px, légendes dessous, pas de 211 px */
body#chromeos .cros-settings__panel.cros-mk {
    right: auto;
    width: 1042px;
}

body#chromeos .cros-mk .cros-settings__card + .cros-settings__card {
    margin-top: 18px;
}

body#chromeos .cros-mk__card2 .cros-mk__shortcut {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 75px;
    margin: 0 0 4px 4px;
    padding: 0 20px;
    border: 1px solid var(--cros-card-line);
    border-radius: 12px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-mk__kbd {
    width: 32px;
    height: 32px;
    color: var(--cros-on-surface-variant);
}

body#chromeos .cros-mk__shortcut b {
    display: block;
    font: 500 15px/22px var(--cros-font);
}

body#chromeos .cros-mk__shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 20px;
    margin-left: 4px;
    padding: 0 10px;
    border-radius: 10px;
    font: 500 12px/20px var(--cros-font-text);
    background: var(--cros-btn);
}

body#chromeos .cros-mk__shortcut kbd.is-icon {
    padding: 0 6px;
}

body#chromeos .cros-mk__shortcut kbd .cros-i {
    width: 14px;
    height: 14px;
}

body#chromeos .cros-mk__card {
    position: relative;
    height: 1515px;
}

body#chromeos .cros-mk__head {
    position: absolute;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-mk__side[hidden] {
    display: none;
}

body#chromeos .cros-mk__cell {
    position: absolute;
    display: block;
    width: 345px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-mk__illo {
    display: flex;
    align-items: center;
    height: 135px;
}

body#chromeos .cros-mk__illo svg {
    display: block;
    width: 100%;
    height: auto;
}

body#chromeos .cros-mk__cap {
    display: block;
    margin-top: 12px;
}

body#chromeos .cros-mk__which {
    position: absolute;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 13px/20px var(--cros-font-text);
}

body#chromeos .cros-mk__which > span:first-child {
    width: 60px;
}

body#chromeos .cros-mk__card {
    height: 1540px;
}

body#chromeos .cros-mk__which > span:first-child {
    width: 46px;
}

body#chromeos .cros-mk__line {
    position: absolute;
    right: 0;
    left: 310px;
    height: 1px;
    background: var(--cros-card-line);
}