/**
 * SOLVYLA COU
 * Base CSS MOTABLE
 * Version 0.2
 * Socle Mobile / Tablette / Foldable. Aucun CSS Grand Public.
 * Identite visuelle centralisee dans solvyla-signature.css.
 */

@media (max-device-width: 1023px) {
  html, body {
  cursor: default !important;
  } 

.solvyla-cou,
.solvyla-cou * {
    box-sizing: border-box;
}

:root {
    --cou-topbar-height: 8vh;
}

.solvyla-cou {
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
}

/* TOPBAR : BLEU ROYAL */
.solvyla-cou .cou-topbar {
    position: relative;
    z-index: 10;

    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;

    width: 100%;
    height: var(--cou-topbar-height);
    min-height: var(--cou-topbar-height);

    background: var(--solvyla-blue-royal);
}

/* LOGO SOLVYLA : FOND SIGNATURE */
.solvyla-cou .cou-logo {
    position: relative;
    z-index: 5;

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

    width: clamp(110px, 10vw, 165px);
    height: 72px;

    background-image: var(--cou-signature-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    overflow: visible;
}

.solvyla-cou .cou-logo img {
    display: block;
    width: 92%;
    height: 82px;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 2;
}

.solvyla-cou .cou-title {
    color: var(--solvyla-white-royal-text, #f7fbff);
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-size: 16px;
    font-weight: var(--solvyla-weight-bold, 700);
    line-height: 1.2;
    text-align: center;
}

.solvyla-cou .cou-language-wrap {
    justify-self: end;
    align-self: center;
    margin: 0;
}

.solvyla-cou .cou-language {
    max-width: 92px;
    padding: 4px 6px;
    border: 0;
    border-radius: 7px;
    background: var(--solvyla-white-signature);
    color: var(--solvyla-blue-royal-text, #0754ca);
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-size: 10px;
    font-weight: var(--solvyla-weight-semibold, 600);
    cursor: pointer;
}

.solvyla-cou .cou-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
    white-space: nowrap;
    color: var(--solvyla-white-royal-text, #f7fbff);
}

.solvyla-cou .cou-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    border: 2px solid var(--solvyla-white-royal-text, #f7fbff);
    border-radius: 50%;
    background: var(--solvyla-white-signature);
}

.solvyla-cou .cou-user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solvyla-cou .cou-user-identity {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

.solvyla-cou .cou-user-welcome {
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-size: 12px;
    font-weight: var(--solvyla-weight-medium, 500);
    line-height: 1.2;
}

.solvyla-cou .cou-user-name {
    overflow: hidden;
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-size: 12px;
    font-weight: var(--solvyla-weight-bold, 700);
    line-height: 1.2;
    text-overflow: ellipsis;
}

/* FOND GENERAL COU */
.solvyla-cou .cou-body {
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--cou-topbar-height));
    min-height: 0;

    background-color: #ffffff;
    background-image: var(--cou-signature-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;
}

/* MENU MOTABLE : BLEU SIGNATURE, y compris lorsqu'il passe en haut */
.solvyla-cou .cou-sidebar,
.solvyla-cou .cou-sidebar-motable {
    color: var(--solvyla-white-royal-text, #f7fbff);
    background: var(--solvyla-blue-signature);
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
}

.solvyla-cou .cou-navigation {
    color: inherit;
}

/* TITRES PRINCIPAUX : BLANC ROYAL, GRAS */
.solvyla-cou .cou-menu-title {
    color: var(--solvyla-white-royal-text, #f7fbff);
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-weight: var(--solvyla-weight-bold, 700);
}

/* GROUPE OUVERT : BLEU LAGON */
.solvyla-cou .cou-menu-group.is-open {
    background: var(--solvyla-blue-lagoon);
    box-shadow:
        var(--solvyla-gloss-shadow),
        inset 0 0.35vh 0.7vh rgba(0, 0, 0, 0.18);
}

/* SOUS-MENUS : BLANC SIGNATURE, SANS GRAS */
.solvyla-cou .cou-menu-content button {
    color: var(--solvyla-white-signature-text, #ffffff);
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-weight: var(--solvyla-weight-regular, 400);
}

.solvyla-cou .cou-workspace {
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
}
}