/**
 * Assistant de configuration (OOBE) — moteur « cros-oobe ». Vérité VM : VM A1.6 (image de récupération officielle
 * 16765.41.0, VMID 1938, 1280×800, 2026-10-26), root/docs/inventaires/captures/chromeos/visual-fidelity/install/vm/.
 * Carte 1040 × 624 en (120, 64), rayon 24 ; icône en (162, 144) ; titre 32 px / 40 ; colonne droite x 586 → 1120 ;
 * bouton principal en pilule 32 px de haut, bas de la carte à 24 px ; étagère : puces date / heure en bas à droite.
 * Couleurs du thème dynamique relevées sur la VM (fond par défaut) ; police fournie par la peau (--cros-font).
 */
.coobe-stage {
    background: #000000;
}

.coobe-host {
    position: absolute;
    inset: 0;
}

.cros-oobe,
.cros-oobe * {
    box-sizing: border-box;
}

.cros-oobe {
    --font: var(--cros-font, sans-serif);
    position: absolute;
    inset: 0;
    font: 400 15px/20px var(--cros-font, sans-serif);
    color: #211a14;
    background: #c9b49f center / cover no-repeat;
    overflow: hidden;
    user-select: none;
}

.coobe-card {
    position: absolute;
    top: 64px;
    left: 120px;
    width: 1040px;
    height: 624px;
    border-radius: 24px;
    background: #ffeee0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.coobe-back {
    position: absolute;
    top: 27px;
    left: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #89510b;
}

.coobe-back__icon {
    width: 20px;
    height: 20px;
}

.coobe-left {
    position: absolute;
    top: 80px;
    left: 40px;
    width: 345px;
}

.coobe-icon {
    display: block;
    width: 48px;
    height: 48px;
}

.coobe-icon.is-40 {
    width: 40px;
    height: 40px;
    margin: 2px 0 6px 4px;
}

.coobe-title {
    margin: 20px 0 0;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    color: #211a14;
}

.coobe-card.is-welcome .coobe-left {
    top: 66px;
    width: 900px;
}

.coobe-title.is-welcome {
    margin: 0;
    font-size: 51.5px;
    line-height: 64px;
}

.coobe-subtitle {
    margin-top: 15px;
    font-size: 21.5px;
    line-height: 28px;
    color: #51453a;
}

.coobe-body {
    margin-top: 28px;
    font-size: 16px;
    line-height: 24px;
    color: #51453a;
}

.coobe-body p {
    margin: 0 0 16px;
}

.coobe-link {
    text-decoration: underline;
    color: #89510b;
}

.coobe-illo {
    position: absolute;
    pointer-events: none;
}

.coobe-links {
    position: absolute;
    top: 240px;
    left: 60px;
    width: 400px;
}

.coobe-links__item {
    display: flex;
    height: 50px;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #51453a;
}

.coobe-links__icon {
    width: 20px;
    height: 20px;
}

/* Boutons en pilule */
.coobe-buttons {
    position: absolute;
    right: 40px;
    bottom: 24px;
    display: flex;
    gap: 8px;
}

.coobe-buttons.is-left {
    right: auto;
    left: 44px;
}

.coobe-btn {
    display: inline-flex;
    height: 32px;
    align-items: center;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
}

.coobe-btn--primary {
    color: #ffffff;
    background: #89510b;
}

.coobe-btn--tonal {
    color: #2c1600;
    background: #ffdcbe;
}

.coobe-btn--text {
    color: #89510b;
}

.coobe-btn.is-disabled {
    color: rgba(33, 26, 20, 0.38);
    background: rgba(33, 26, 20, 0.12);
}

.coobe-btn__arrow {
    width: 20px;
    height: 20px;
    margin: 0 -6px 0 6px;
}

/* Cartes à choisir */
.coobe-choices {
    position: absolute;
    top: 188px;
    left: 466px;
    width: 534px;
}

.coobe-choice {
    position: relative;
    display: flex;
    height: 120px;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 22px;
    border-radius: 16px;
    background: #fffbff;
}

.coobe-choice.is-selected {
    background: #ffdcbe;
}

.coobe-choices.is-setup {
    top: 120px;
}

.coobe-choice.is-selected:hover,
.coobe-choice.is-selected.is-hover {
    background: #edc194;
}

.coobe-choice__icon {
    width: 36px;
    height: 36px;
    margin-right: 22px;
}

.coobe-choice__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.coobe-choice__desc {
    font-size: 13px;
    line-height: 20px;
    color: #51453a;
}

.coobe-choice.is-selected .coobe-choice__desc,
.coobe-choice.is-selected .coobe-choice__title {
    color: #2c1600;
}

.coobe-choice__check {
    position: absolute;
    top: 49px;
    right: 24px;
    width: 20px;
    height: 20px;
}

.coobe-choice.is-hover .coobe-choice__title,
.coobe-choice.is-hover .coobe-choice__desc {
    color: #66411a;
}

/* Réglages en lignes */
.coobe-selects {
    position: absolute;
    top: 151px;
    left: 466px;
    width: 534px;
    border-top: 1px solid #dacbbe;
}

.coobe-selects__row {
    display: flex;
    height: 61px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dacbbe;
    font-size: 13px;
}

.coobe-select {
    position: relative;
    display: flex;
    width: 240px;
    height: 32px;
    align-items: center;
    padding: 0 30px 0 8px;
    border-radius: 4px;
    font-size: 13px;
    background: #fffbff;
}

.coobe-select.is-focus {
    box-shadow: 0 0 0 2px #89510b;
}

.coobe-select__arrow {
    position: absolute;
    top: 13px;
    right: 9px;
    border-top: 5px solid #51453a;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.coobe-text {
    position: absolute;
    font-size: 13px;
    line-height: 20px;
}

.coobe-text p {
    margin: 0 0 22px;
}

/* Liste déroulante ouverte (fenêtre native du sélecteur) */
.coobe-dropdown {
    position: absolute;
    border: 1px solid #767676;
    font-size: 13px;
    color: #000000;
    background: #ffffff;
    overflow: hidden;
    z-index: 5;
}

.coobe-dropdown__item {
    height: 25px;
    padding: 0 8px;
    line-height: 25px;
    white-space: nowrap;
}

.coobe-dropdown__item.is-selected {
    background: #cce1fa;
}

.coobe-dropdown__item.is-group {
    font-weight: 700;
}

.coobe-dropdown__item.is-indent {
    padding-left: 28px;
}

.coobe-dropdown__bar {
    position: absolute;
    right: 0;
    width: 10px;
    background: #6e6e6e;
}

/* Dialogue de confirmation */
.coobe-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 4;
}

.coobe-dialog {
    width: 552px;
    padding: 32px 32px 28px;
    border-radius: 20px;
    background: #ffffff;
}

.coobe-dialog__title {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 24px;
}

.coobe-dialog__text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 20px;
    color: #51453a;
}

.coobe-dialog__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 44px;
}

/* Roulette */
.coobe-spinner {
    position: absolute;
    width: 286px;
    height: 286px;
    background-repeat: no-repeat;
}

/* Carrousel de la mise à jour */
.coobe-carousel {
    position: absolute;
    width: 380px;
    height: 360px;
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
}

.coobe-carousel__view {
    height: 323px;
    padding: 14px 28px 0;
    text-align: center;
    overflow: hidden;
}

.coobe-carousel__img {
    width: 182px;
    height: 182px;
}

.coobe-carousel__title {
    margin-top: 14px;
    font-size: 18px;
    line-height: 24px;
}

.coobe-carousel__text {
    margin-top: 15px;
    font-size: 13px;
    line-height: 20px;
    color: #51453a;
}

.coobe-carousel__nav {
    display: flex;
    height: 37px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-top: 1px solid #e1e0df;
}

.coobe-carousel__dot {
    width: 8px;
    height: 8px;
    border: 1px solid #89510b;
    border-radius: 50%;
}

.coobe-carousel__dot.is-on {
    background: #89510b;
}

.coobe-carousel__arrow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.coobe-carousel__arrow::before {
    display: block;
    width: 6px;
    height: 6px;
    margin: 7px 0 0 8px;
    border-bottom: 2px solid #51453a;
    border-left: 2px solid #51453a;
    transform: rotate(45deg);
    content: "";
}

.coobe-carousel__arrow.is-next::before {
    margin-left: 6px;
    transform: rotate(-135deg);
}

.coobe-carousel__arrow.is-hover {
    background: #e4dcd5;
}

/* Page de connexion en ligne (carte blanche intérieure) */
.coobe-inner {
    position: absolute;
    top: 79px;
    left: 20px;
    width: 1000px;
    height: 466px;
    border-radius: 24px;
    background: #ffffff;
}

.coobe-inner .coobe-left {
    top: 27px;
    left: 20px;
    width: 400px;
}

.coobe-field {
    position: absolute;
    top: 104px;
    left: 444px;
    width: 536px;
    height: 56px;
    border: 1px solid #747775;
    border-radius: 4px;
}

.coobe-field.is-focus {
    border: 2px solid #0b57d0;
}

.coobe-field__label {
    position: absolute;
    top: 16px;
    left: 15px;
    font-size: 16px;
    color: #444746;
}

.coobe-field.is-focus .coobe-field__label {
    top: -10px;
    left: 10px;
    padding: 0 4px;
    font-size: 12px;
    color: #0b57d0;
    background: #ffffff;
}

.coobe-field__input {
    position: absolute;
    inset: 0;
    border: 0;
    outline: none;
    background: transparent;
}

.coobe-field__caret {
    position: absolute;
    top: 17px;
    left: 15px;
    width: 1px;
    height: 20px;
    background: #1f1f1f;
}

.coobe-gaia-link {
    position: absolute;
    font-size: 14px;
    font-weight: 500;
    color: #0b57d0;
}

.coobe-gaia-link.is-pill {
    padding: 10px 16px;
    border-radius: 20px;
    background: #f3f6fc;
}

.coobe-menu {
    position: absolute;
    padding: 8px 0;
    border-radius: 12px;
    background: #f0f4f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.coobe-menu__item {
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 48px;
    color: #1f1f1f;
}

/* Conditions du mode Invité */
.coobe-terms {
    position: absolute;
    top: 155px;
    left: 466px;
    width: 534px;
    font-size: 13px;
    line-height: 20px;
}

.coobe-terms__title {
    font-weight: 500;
}

.coobe-terms__text {
    margin: 0;
}

.coobe-terms .coobe-link {
    color: #89510b;
}

.coobe-terms__row {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dacbbe;
}

.coobe-terms__row strong {
    font-weight: 500;
}

.coobe-switch {
    position: relative;
    flex: none;
    width: 30px;
    height: 12px;
    border-radius: 6px;
    background: #ffdcbe;
}

.coobe-switch::after {
    position: absolute;
    top: -3px;
    left: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #a08d7d;
    content: "";
}

.coobe-switch.is-on::after {
    left: 14px;
    background: #89510b;
}

/* Étagère */
.coobe-shelf {
    z-index: 6;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 48px;
}

.coobe-shelf__left {
    position: absolute;
    bottom: 6px;
    left: 8px;
    display: flex;
    gap: 9px;
}

.coobe-shelf__right {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    gap: 5px;
}

.coobe-chip {
    display: inline-flex;
    height: 36px;
    align-items: center;
    padding: 0 12px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    color: #211a14;
    background: #f0e3dd;
}

.coobe-chip__icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.coobe-chip--date {
    border-radius: 18px 4px 4px 18px;
}

.coobe-chip--time {
    gap: 6px;
    border-radius: 4px 18px 18px 4px;
}

.coobe-chip__net {
    width: 20px;
    height: 20px;
}

/* Logo de démarrage */
.coobe-splash {
    position: absolute;
    inset: 0;
    background: #000000;
}

.coobe-splash__img {
    position: absolute;
    top: 360px;
    left: 427px;
    width: 425px;
    height: 80px;
}