/* ==========================================
BALBUSSE OS V2
COMPLETE SYSTEM CSS
SOLID CLOCK VERSION
========================================== */


/* RESET */

* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html,
body {

    width:100%;
    height:100%;
    overflow:hidden;

    background:#ffffff;
    color:#000000;

    font-family:"IBM Plex Mono", monospace;

}



/* ==========================================
DESKTOP
========================================== */


.desktop-background {

    position:absolute;

    inset:0;

    background-image:url("https://www.balbusse.fr/images/boutique.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:1;

}


/* ==========================================
BALBUSSE TITLE
========================================== */


header {

    position:absolute;

    top:55px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    z-index:300;

}


header h1 {

    font-family:"Cormorant Garamond", serif;

    font-size:2.4rem;

    font-weight:400;

    letter-spacing:.42em;

    margin-left:.42em;

    color:#ffffff;

}


/* ==========================================
APPLICATION SYSTEM
========================================== */


.application-layer {

    position:absolute;

    inset:0;

    z-index:50;

    pointer-events:none;

}



.application {

    position:absolute;

    inset:0;

    bottom:42px;

    background:rgba(0,0,0,.96);

    color:#ffffff;

    display:none;

    pointer-events:none;

}



.application.active {

    display:block;

    pointer-events:auto;

}





.window-controls {

    position:absolute;

    top:28px;

    right:40px;

    display:flex;

    gap:20px;

}



.window-controls button {

    background:none;

    border:none;

    color:#ffffff;

    cursor:pointer;

    font-family:"IBM Plex Mono", monospace;

}



.window-controls button:hover {

    color:#B3D7EA;

}





.application-content {

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

}



.application-content h2 {

    font-family:"IBM Plex Mono", monospace;

    font-size:.85rem;

    font-weight:300;

    letter-spacing:.25em;

}



/* ==========================================
DESKTOP INTERFACE
========================================== */


.desktop-interface {

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    z-index:200;

}



/* ==========================================
MAIN LAUNCHER
========================================== */


.launcher-menu {

    position:absolute;

    bottom:42px;

    left:0;

    width:380px;

    background:#000000;

    padding:45px 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    opacity:0;

    pointer-events:none;

}



.desktop-interface.menu-open .launcher-menu {

    opacity:1;

    pointer-events:auto;

}



.launcher-menu a {

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#ffffff;

    text-decoration:none;

}



.launcher-menu a:hover {

    color:#B3D7EA;

}

/* ==========================================
LAUNCHER DIVIDER
========================================== */

.launcher-divider {

    width:100%;

    height:1px;

    background:#ffffff;

    margin:22px 0 22px 0;

}

/* ==========================================
LA MAISON BALBUSSE MENUS
========================================== */

.maison-container,
.univers-container {

    position:relative;

}

.products-container {

    position:relative;

    margin-top:18px;

}


/* ==========================================
FIRST LEVEL (BLUE)
========================================== */

.maison-submenu {

    position:absolute;

    left:340px;
    top:-45px;

    width:360px;

    background:#B3D7EA;

    padding:45px 40px;

    display:flex;
    flex-direction:column;
    gap:22px;

    opacity:0;
    pointer-events:none;

}

.maison-container.open .maison-submenu {

    opacity:1;
    pointer-events:auto;

}

.maison-container.open .maison-trigger {

    color:#B3D7EA;

}


/* ==========================================
SECOND LEVEL (WHITE)
========================================== */

.univers-submenu {

    position:absolute;

    left:calc(100% + 40px);
    top:-45px;

    width:360px;

    background:#ffffff;

    padding:45px 40px;

    display:flex;
    flex-direction:column;
    gap:22px;

    opacity:0;
    pointer-events:none;

    align-self:stretch;

}

.univers-container.open .univers-submenu {

    opacity:1;
    pointer-events:auto;

}

.univers-container.open .univers-trigger {

    color:#000000;

}

/* ==========================================
MENU LINKS
========================================== */

.maison-submenu a,
.univers-submenu a {

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-family:"IBM Plex Mono", monospace;
    font-size:.68rem;
    font-weight:300;
    letter-spacing:.16em;
    text-transform:uppercase;

    text-decoration:none;

}


/* BLUE MENU */

.maison-submenu a {

    color:#ffffff;

}

.maison-submenu a:hover {

    color:#000000;

}


/* WHITE MENU */

.univers-submenu a {

    color:#000000;

}

.univers-submenu a:hover {

    color:#B3D7EA;

}

/* ==========================================
LES HAUTS ARTS DE LA CRÉATION SUBMENU
========================================== */


.hauts-arts-trigger {

    position:relative;

}


.hauts-arts-submenu {

    position:absolute;

    left:calc(100% + 40px);

    top:-81.5px;

    width:360px;

    background:#ffffff;

    padding:45px 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    opacity:0;

    pointer-events:none;

}


.hauts-arts-container.open .hauts-arts-submenu {

    opacity:1;

    pointer-events:auto;

}



.hauts-arts-container.open .hauts-arts-trigger {

    color:#000000;

}



.hauts-arts-submenu a {

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.16em;

    text-transform:uppercase;

    text-decoration:none;

    color:#000000;

}



.hauts-arts-submenu a:hover {

    color:#C9A227;

}

.hauts-arts-container {

    position:relative;

}

/* ==========================================
LES HAUTS ARTS DE LA MODE SUBMENU
========================================== */


.mode-container {

    position:relative;

}


.mode-trigger {

    position:relative;

}


.mode-submenu {

    position:absolute;

    left:calc(100% + 40px);

    top:-81.5px;

    width:360px;

    background:#C9A227;

    padding:45px 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    opacity:0;

    pointer-events:none;

}



.mode-container.open .mode-submenu {

    opacity:1;

    pointer-events:auto;

}



.mode-container.open .mode-trigger {

    color:#C9A227;

}



.mode-submenu a {

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.16em;

    text-transform:uppercase;

    text-decoration:none;

    color:#ffffff;

}

.mode-submenu a:hover {

    color:#000000;

}

/* ==========================================
L'ART DE VIVRE SUBMENU
========================================== */


.art-vivre-container {

    position:relative;

}


.art-vivre-trigger {

    position:relative;

}



.art-vivre-submenu {

    position:absolute;

    left:calc(100% + 40px);

    top:-227px;

    width:360px;

    background:#ffffff;

    padding:45px 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    opacity:0;

    pointer-events:none;

}



.art-vivre-container.open .art-vivre-submenu {

    opacity:1;

    pointer-events:auto;

}



.art-vivre-container.open .art-vivre-trigger {

    color:#000000;

}



.art-vivre-submenu a {

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.16em;

    text-transform:uppercase;

    text-decoration:none;

    color:#000000;

}



.art-vivre-submenu a:hover {

     color:#B3D7EA;

}

/* ==========================================
PRODUCT SUBMENU
========================================== */


.products-container {

    position:relative;

}



.products-submenu {

    position:fixed;

    left:380px;

    bottom:42px;

    width:360px;

    background:#B3D7EA;

    padding:45px 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    opacity:0;

    pointer-events:none;

}



.products-container.open .products-submenu {

    opacity:1;

    pointer-events:auto;

}



.products-container.open .products-trigger {

    color:#B3D7EA;

}



.products-submenu a {

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#ffffff;

    text-decoration:none;

}



.products-submenu a:hover {

    color:#000000;

}



/* ==========================================
TASKBAR
========================================== */


.taskbar {

    height:42px;

    width:100%;

    background:#000000;

    display:flex;

    align-items:center;

}



/* DÉCOUVRIR */


.discover-button {

    height:42px;

    padding:0 32px;

    background:#000000;

    color:#ffffff;

    border:none;

    border-right:1px solid #ffffff;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.18em;

    cursor:pointer;

}



.discover-button:hover {

    color:#B3D7EA;

}



/* OPEN APPLICATIONS */


.taskbar-applications {

    height:42px;

    display:flex;

}



.taskbar-tab {

    height:42px;

    padding:0 18px 0 25px;

    display:flex;

    align-items:center;

    gap:16px;

    background:#000000;

    color:#ffffff;

    border-right:1px solid #333333;

    font-family:"IBM Plex Mono", monospace;

    font-size:.65rem;

    letter-spacing:.15em;

    cursor:pointer;

}



.taskbar-tab span {

    color:#ffffff;

}



.taskbar-tab:hover span {

    color:#B3D7EA;

}



.taskbar-tab:hover .taskbar-close {

    color:#B3D7EA;

}



.taskbar-tab.active span {

    color:#B3D7EA;

}



.taskbar-tab.active .taskbar-close {

    color:#B3D7EA;

}



.taskbar-close {

    background:none;

    border:none;

    color:#ffffff;

    cursor:pointer;

    font-family:"IBM Plex Mono", monospace;

    font-size:.8rem;

}



.taskbar-close:hover {

    color:#B3D7EA;

}



/* ==========================================
SYSTEM TRAY
========================================== */


.system-tray {

    margin-left:auto;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:0 26px;

    background:#000000;

    border-left:1px solid #ffffff;

}



.language-button {

    background:none;

    border:none;

    color:#ffffff;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    letter-spacing:.16em;

    cursor:pointer;

}



.language-button:hover {

    color:#B3D7EA;

}



.system-icon {

    width:22px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:none;

    border:none;

    color:#ffffff;

    cursor:pointer;

}



.system-icon i {

    font-size:14px;

}



.system-icon:hover {

    color:#B3D7EA;

}



/* ==========================================
CLOCK PANEL
========================================== */


.clock-panel {

    height:42px;

    width:90px;

    background:#B3D7EA;

    color:#000000;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    letter-spacing:.16em;

}



.clock-window {

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}



.clock-display {

    color:#000000;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:400;

    letter-spacing:.16em;

}



/* ==========================================
ACTIVE APPLICATION TITLE
========================================== */


body.application-open header h1 {

    color:#ffffff;

}

/* ==========================================
LAUNCHER MENU GROUPS
========================================== */


.menu-primary,
.menu-secondary {

    display:flex;

    flex-direction:column;

    gap:30px;
  

}



.menu-divider {

    width:100%;

    height:1px;

    background:#ffffff;

    margin:12px 0;

}

/* ==========================================
CONTACT APPLICATION
========================================== */


#contact .application-content {

    display:flex;

    justify-content:center;

}



#contact .contact-list {

    display:flex;

    margin-top:35px;

    width:360px;

    transform:translateX(75px);

    position:relative;

}



#contact .contact-rule {

    width:1px;

    height:340px;

    background:#ffffff;

    margin-right:28px;

}



#contact .contact-content {

    text-align:left;

}



#contact .contact-section {

    margin-bottom:45px;

}



#contact .contact-section p {

    font-family:"IBM Plex Mono", monospace;

    font-size:.75rem;

    font-weight:400;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin:0 0 12px 0;

}



#contact .contact-section span {

    font-family:"IBM Plex Mono", monospace;

    font-size:.70rem;

    font-weight:300;

    letter-spacing:.12em;

    color:#ffffff;

}

#contact .contact-section span:hover {

    color:#B3D7EA;

    cursor:pointer;

}

/* ==========================================
PRODUCT APPLICATIONS
WHITE ARCHIVE WINDOWS
========================================== */


#sacs,
#canons,
#pret-a-porter,
#souliers,
#accessoires,
#joaillerie,
#beaute,
#voyages,
#demeure {

    background:#ffffff;

}


/* ==========================================
PRODUCT APPLICATION TEXT
========================================== */


#sacs .application-content,
#canons .application-content,
#pret-a-porter .application-content,
#souliers .application-content,
#accessoires .application-content,
#joaillerie .application-content,
#beaute .application-content,
#voyages .application-content,
#demeure .application-content {

    color:#000000;

}



#sacs .application-content h2,
#canons .application-content h2,
#pret-a-porter .application-content h2,
#souliers .application-content h2,
#accessoires .application-content h2,
#joaillerie .application-content h2,
#beaute .application-content h2,
#voyages .application-content h2,
#demeure .application-content h2 {

    color:#000000;

}



/* ==========================================
PRODUCT WINDOW CONTENT
========================================== */


.product-window-content {

    display:flex;

    align-items:center;

    gap:80px;

    margin-top:60px;

}



/* ==========================================
PRODUCT IMAGE
========================================== */


.product-image img {

    width:420px;

    height:auto;

}



/* ==========================================
PRODUCT LIST
========================================== */


.product-list {

    font-family:"IBM Plex Mono", monospace;

    font-size:.75rem;

    font-weight:300;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#000000;

}



.product-list p {

    margin:0 0 28px 0;

}

/* ==========================================
PRODUCT APPLICATION BALBUSSE TITLE
========================================== */


#sacs.active ~ header h1,
#canons.active ~ header h1,
#pret-a-porter.active ~ header h1,
#souliers.active ~ header h1,
#accessoires.active ~ header h1,
#joaillerie.active ~ header h1,
#beaute.active ~ header h1,
#voyages.active ~ header h1,
#demeure.active ~ header h1 {

    color:#000000;

}

/* ==========================================
PRODUCT MODE TITLE COLOR
========================================== */


body.product-open header h1 {

    color:#000000;

}

/* ==========================================
PRODUCT WINDOW CONTROLS
========================================== */

body.product-open .window-controls button{

    color:#000000;

}

body.product-open .window-controls button:hover{

    color:#B3D7EA;

}

/* ==========================================
PRODUCT DISPLAY CONTROLS
========================================== */


.application-divider {

width:100%;

height:1px;

background:#000000;

margin-bottom:25px;

}


.icons-section {

width:100%;

text-align:center;

}


.icons-section h3 {

font-size:13px;

font-weight:600;

margin:0 0 18px 0;

}


.icon-grid {

display:flex;

justify-content:center;

gap:45px;

align-items:center;

}


.icon-item p {

font-size:11px;

margin:0;

cursor:pointer;

}


.icon-item p:hover {

color:#B3D7EA;

}
/* ==========================================
SACS APPLICATION POSITION
========================================== */

#sacs .application-content {

    top:23%;

}

/* ==========================================
CATEGORY DISPLAY
========================================== */


.categories-section {

width:100%;

text-align:center;

transform:translateY(-25px);

}



.categories-section h3 {

font-size:13px;

font-weight:600;

margin:0 0 18px 0;

}



.category-grid {

display:flex;

justify-content:center;

gap:45px;

align-items:center;

flex-wrap:wrap;

}



.category-item p {

font-size:11px;

margin:0;

cursor:pointer;

}



.category-item p:hover {

color:#B3D7EA;

}


/* ==========================================
LE CREATEUR APPLICATION
========================================== */

#createur {

    background:#ffffff !important;

    color:#000000 !important;

}


/* ==========================================
LE CREATEUR SCROLL WRAPPER
========================================== */

#createur .application-scroll-wrapper {

    position:absolute;

    top:125px;

    left:50%;

    transform:translateX(-50%);

    width:70vw;

    height:calc(100vh - 197px);

}


/* ==========================================
   LE CREATEUR CONTENT
========================================== */

#createur .application-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    padding-left: 0;
    padding-right: 35px;
    box-sizing: border-box;
    color: #000000 !important;
}


/* ==========================================
   LE CREATEUR BODY TEXT
========================================== */

#createur .creator-section p {
    color: #000000 !important;
    font-family: "IBM Plex Mono", monospace;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .08em;
    margin-bottom: 1.4rem;
}

#createur .creator-section p:first-of-type {
    margin-top: 1.50rem;
}

#createur .creator-section p strong {
    font-weight: 600;
}


/* ==========================================
   LE CREATEUR PROFILE
========================================== */

#createur .creator-profile {
    display: grid;
    grid-template-columns: 280px 1fr;
    column-gap: 2rem;
    align-items: start;
}

#createur .creator-profile-image {
    margin-top: 1.75rem;
}

#createur .creator-profile-image img {
    display: block;
    width: 280px;
    height: auto;
}

#createur .creator-profile-caption {
    margin-top: .6rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: .58rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .06em;
    color: #000000;
}

/* ==========================================
LE CREATEUR HEADINGS
========================================== */

#createur .application-content h2 {

    color:#000000 !important;

}


#createur .creator-content {

    color:#000000 !important;

}


#createur .creator-section {

    color:#000000 !important;

}


#createur .creator-section h3 {

    color:#000000 !important;

}

/* ==========================================
   LE CREATEUR SUBTITLE
========================================== */

#createur .creator-section h4 {
    font-style: italic;
    font-weight: 400;
}


/* ==========================================
HIDE BROWSER SCROLLBAR
========================================== */

#createur .application-content::-webkit-scrollbar {

    display:none;

}


#createur .application-content {

    scrollbar-width:none;

}


/* ==========================================
LE CREATEUR MODE
========================================== */

body.creator-open header h1 {

    color:#000000;

}


body.creator-open .window-controls button {

    color:#000000;

}


body.creator-open .window-controls button:hover {

    color:#B3D7EA;

}


/* ==========================================
CUSTOM SCROLLBAR
========================================== */

#createur .custom-scrollbar {

    position:absolute;

    top:0;

    right:calc((70vw - 100vw) / 2 + 25px);

    width:16px;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    background:transparent;

    z-index:20;

}


/* ==========================================
SCROLL ARROWS
========================================== */

#createur .scroll-arrow {

    width:16px;

    height:24px;

    padding:0;

    background:transparent;

    border:none;

    color:#000000;

    font-family:"IBM Plex Mono", monospace;

    font-size:9px;

    line-height:24px;

    text-align:center;

    cursor:pointer;

}


#createur .scroll-arrow:hover {

    color:#B3D7EA;

}

#createur .scroll-arrow-up {

    transform:rotate(-90deg);

}


#createur .scroll-arrow-down {

    transform:rotate(90deg);

}


/* ==========================================
SCROLL TRACK
========================================== */

#createur .scroll-track {

    position:relative;

    width:1px;

    flex:1;

    background:#000000;

}


/* ==========================================
SCROLL THUMB
========================================== */

#createur .scroll-thumb {

    position:absolute;

    top:0;

    left:-2px;

    width:5px;

    height:80px;

    background:#000000;

    cursor:default;

}


#createur .scroll-thumb:active {

    cursor:default;

}