/**
 * SOLVYLA COU
 * Base CSS desktop
 * Version 0.4
 * Socle WIDE / TALL. Identite visuelle centralisee dans solvyla-signature.css.
 */
@media (min-device-width: 1024px){

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

:root {
    --cou-sidebar-width: max(45.15mm, 10.3vw);
}

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

/* =========================================================
   CORPS COU
   ========================================================= */
.solvyla-cou .cou-body {
    position: relative;
    display: grid;

    grid-template-columns:
        var(--cou-sidebar-width)
        minmax(0, 1fr);

    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;
}


/* =========================================================
   SIDEBAR / MENU PRINCIPAL
   ========================================================= */
.solvyla-cou .cou-sidebar {
    min-width: 0;
    min-height: 0;
    padding-inline: 0;

    background: var(--solvyla-blue-signature);
    color: var(--solvyla-white-royal-text, #ffffff);

    overflow-x: hidden;
    overflow-y: auto;
}

/* Premier menu descendu de 15vh */
.solvyla-cou .cou-navigation {
    width: 100%;
    padding-top: 15vh;
    color: inherit;
}

.solvyla-cou .cou-menu-group {
    width: 100%;
    margin-block: 0.6vh;
    border-radius: 0;

    transition:
    background 0.22s ease,
    box-shadow 0.22s ease;
}

/* =========================================================
   SYNCHRONISATION
   ========================================================= */

.solvyla-cou .cou-sync-button {
    display: flex;
    align-items: center;
    gap: 0.8vmin;

    width: 100%;
    margin-top: 10vh;
    padding: 1vh 1.5vw;

    border: 0;
    border-radius: 0;
    background: var(--solvyla-blue-turquoise-royal);
    color: var(--solvyla-white-rose);

    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-size: 1.04em;
    font-weight: var(--solvyla-weight-bold, 700);
    line-height: 1;

    text-align: left;

    cursor: pointer;

    transition:
        filter 0.33s ease,
        box-shadow 0.33s ease;

}

.solvyla-cou .cou-sync-icon {
    width: 3.4vmin;
    height: 3.4vmin;
    flex: 0 0 3.4vmin;

    object-fit: contain;
}

.solvyla-cou .cou-sync-button:hover {
    opacity: 0.85;
}

/* =========================================================
   TITRE PRINCIPAL
   Le titre reste sur le Bleu Signature.
   ========================================================= */
.solvyla-cou .cou-menu-title {
    position: relative;
    z-index: 2;

    width: 100%;
    padding: 1vh 1.5vw;

    border: 0;
    background: var(--solvyla-blue-signature);
    color: var(--solvyla-white-rose);

    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-size: 1.04em;
    font-weight: var(--solvyla-weight-bold, 700);
    text-align: left;
    text-transform: uppercase;

    text-shadow: 0 0.2vh 0.3vh rgba(0, 0, 0, 0.20);
    cursor: pointer;
}

/* =========================================================
   GROUPE OUVERT
   Turquoise Royal uniquement derriere le sous-menu.
   ========================================================= */
.solvyla-cou .cou-menu-group.is-open {
    background: transparent;
    box-shadow: none;
}

.solvyla-cou .cou-menu-content {
    width: 100%;
    padding: 0 0 1vh;

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

    box-shadow:
        var(--solvyla-gloss-shadow),
        inset 0 0.35vh 0.7vh rgba(0, 30, 80, 0.14);
}

/* =========================================================
   TRANSITIONS INTERACTIVES MENU
   ========================================================= */

.solvyla-cou .cou-menu-title,
.solvyla-cou .cou-menu-content button,
.solvyla-cou .cou-sync-button {
    transition:
        filter 0.33s ease,
        background 0.33s ease,
        color 0.33s ease,
        box-shadow 0.33s ease,
        transform 0.33s ease;
}

.solvyla-cou .cou-menu-title:hover,
.solvyla-cou .cou-sync-button:hover {
    filter: brightness(1.08);
}

.solvyla-cou .cou-menu-content button:hover {
    filter: brightness(1.12);

    transform: translateX(0.25vw);

    box-shadow:
        inset 0.22vw 0 0 var(--solvyla-white-rose),
        inset 0 0 1.2vmin rgba(255, 255, 255, 0.14);
}

.solvyla-cou .cou-menu-title:hover,
.solvyla-cou .cou-menu-content button:hover,
.solvyla-cou .cou-sync-button:hover {
    filter: brightness(1.2);
}

/* Sous-menus */
.solvyla-cou .cou-menu-content button {
    width: 100%;
    padding: 0.7vh 1.5vw;

    border: 0;
    background: transparent;
    color: var(--solvyla-white-signature-text, #ffffff);

    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);
    font-size: 0.80em;
    font-weight: var(--solvyla-weight-regular, 400);
    text-align: left;

    cursor: pointer;
}

}