/* =========================================================
   SOLVYLA COU - WORKSPACE
   Version 0.1
   Coque commune des pages COU
   ========================================================= */

/* =========================================================
   ZONE HOTE DU WORKSPACE
   Centre la page dans l'espace disponible
   ========================================================= */
.solvyla-cou .cou-workspace {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* =========================================================
   PAGE WORKSPACE
   85 % de l'espace disponible = 7.5 % de marge par cote
   ========================================================= */

    /* Workspace fermé par défaut */
.solvyla-cou .cou-workspace-page[hidden] {
    display: none;
}   

   .solvyla-cou .cou-workspace-page {
    position: relative;
    box-sizing: border-box;
    z-index: 10;

    width: 85%;
    height: 85%;

    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 2.7vmin 2.7vmin 0 0;

    background-image:
    radial-gradient(
        ellipse at 50% 115%,
        rgba(255,255,255,0.70) 0%,
        rgba(210,245,255,0.30) 28%,
        rgba(100,190,255,0.12) 48%,
        transparent 68%
    ),
    var(--solvyla-white-rose);

    background:
        var(--solvyla-blue-turquoise-royal),
        var(--solvyla-blue-signature),
        var(--solvyla-white-rose);
        
    background-blend-mode:
        lighten,
        lighten,
        multiply;
       
    box-shadow:
        inset 0 -18px 35px rgba(4, 80, 170, 0.08),
        inset 0 18px 35px rgba(255,255,255,0.55);

    color: var(--solvyla-blue-deep);
    font-family: var(--solvyla-font, Inter, system-ui, Arial, sans-serif);

    overflow: hidden;

    /* Les adaptations internes pourront dependre du workspace lui-meme. */
    container-type: inline-size;
    container-name: cou-workspace-page;
}

/* =========================================================
   BANDEAU SUPERIEUR FIXE
   Titre centre / sous-titre gauche / Actions droite
   ========================================================= */

   .solvyla-cou .cou-workspace-header {
    position: relative;
    z-index: 5;

    box-sizing: border-box;
    width: 100%;

    padding: clamp(0.8rem, 1.6vmin, 1.5rem)
             clamp(1rem, 2.2vmin, 2rem)
             clamp(0.65rem, 1.2vmin, 1.15rem);

    border-bottom: 1px solid rgba(8, 124, 255, 0.20);
    border-radius: 2.7vmin 2.7vmin 0 0;

background: linear-gradient(
    90deg,

    rgba(160, 226, 232, 0.78) 0%,
    rgba(105, 190, 230, 0.76) 15%,
    rgba(55, 145, 225, 0.78) 30%,
    rgba(55, 145, 225, 0.78) 70%,
    rgba(105, 190, 230, 0.76) 85%,
    rgba(160, 226, 232, 0.78) 100%
) !important;

    box-shadow:
        inset 0 1px 0 var(--solvyla-gloss-highlight),
        0 0.35vmin 1.2vmin rgba(4, 74, 150, 0.08);
}
/* Logo SOLVYLA du Workspace */
        .solvyla-cou .cou-workspace-logo {
            display: block;
        width: auto;
        height: clamp(28px, 3.2vmin, 42px);
        flex: 0 0 auto;
        object-fit: contain;
}

/* Logo + titre */
        .solvyla-cou .cou-workspace-brand {
            display: flex;
            align-items: center;
            gap: clamp(10px, 1.4vmin, 18px);
}

        .solvyla-cou .cou-workspace-heading {
            flex: 1 1 auto;
            min-width: 0;
}

/* =========================================================
   TITRE PRINCIPAL
   Centre sur la largeur reelle du workspace
   ========================================================= */

.solvyla-cou .cou-workspace-title {
    position: absolute;
    left: 50%;
    top: clamp(0.8rem, 1.6vmin, 1.5rem);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;

    white-space: nowrap;

    max-width: 68%;

    overflow: hidden;
    text-overflow: ellipsis;

    font-size: clamp(1.8rem, 2.2vw, 3rem);
    line-height: 1.05;
}

/* =========================================================
   DEUXIEME LIGNE DU BANDEAU
   Sous-titre a gauche / Actions a droite
   ========================================================= */
.solvyla-cou .cou-workspace-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 1.5vmin, 1.5rem);

    min-width: 0;
    transform: translateY(-0.6rem)
}

.solvyla-cou .cou-workspace-subtitle {
    min-width: 0;

    color: #ffffff;
    font-size: clamp(0.82rem, 1.45vmin, 1.12rem);
    font-weight: var(--solvyla-weight-semibold, 600);
    line-height: 1.25;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   MENU ACTIONS
   Centre verticalement / Bleu Solvyla / Menu deroulant
   ========================================================= */

.solvyla-cou .cou-workspace-actions-wrap {
    position: absolute;
    z-index: 30;

    top: 50%;
    right: clamp(1rem, 2.2vmin, 2rem);

    transform: translateY(-50%);
}


/* =========================================================
   BOUTON ACTIONS
   ========================================================= */

.solvyla-cou .cou-workspace-actions-trigger{
    position: relative;

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

    box-sizing: border-box;

    min-height: 2.8rem;

    padding:
        clamp(0.5rem, 0.8vmin, 0.75rem)
        clamp(2.8rem, 3.2vmin, 3.4rem)
        clamp(0.5rem, 0.8vmin, 0.75rem)
        clamp(1rem, 1.5vmin, 1.4rem);

    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 0.75rem;

    background: rgba(255, 255, 255, 0.32);

    color: var(--solvyla-text-blue-royal);

    font-family: inherit;
    font-size: clamp(0.78rem, 1.2vmin, 1rem);
    font-weight: var(--solvyla-weight-bold, 700);
    line-height: 1;

    text-shadow:
        0 1px 1px rgba(255, 255, 255, 0.85),
        0 0.1rem 0.2rem rgba(4, 74, 150, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        0 0.3rem 0.7rem rgba(4, 74, 150, 0.10);

    cursor: pointer;

    transition:
        background 0.20s ease,
        border-color 0.20s ease,
        box-shadow 0.20s ease,
        transform 0.20s ease;
}


.solvyla-cou .cou-workspace-actions-trigger:hover{
    background: rgba(255, 255, 255, 0.48);

    border-color: rgba(255, 255, 255, 1);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0.4rem 0.9rem rgba(4, 74, 150, 0.14);
}


/* =========================================================
   FLECHE ACTIONS
   Forme triangulaire adoucie
   ========================================================= */

.solvyla-cou .cou-workspace-actions-trigger::after {
    content: "";

    position: absolute;

    top: 50%;
    right: clamp(0.9rem, 1.2vmin, 1.2rem);

    width: 0.72rem;
    height: 0.52rem;

    transform: translateY(-42%);

    background: var(--solvyla-blue-lagoon);

    clip-path: polygon(
        7% 12%,
        93% 12%,
        56% 88%,
        44% 88%
    );

    border-radius: 40%;

    filter:
        drop-shadow(
            0 0.08rem 0.12rem
            rgba(4, 74, 150, 0.24)
        );

    transition: transform 0.22s ease;
}


/* Rotation lorsque le menu est ouvert */

.solvyla-cou .cou-workspace-actions-trigger[aria-expanded="true"]::after {
    transform:
        translateY(-55%)
        rotate(180deg);
}

/* =========================================================
   MENU DEROULANT ACTIONS
   ========================================================= */

.solvyla-cou .cou-workspace-actions-menu {
    position: absolute;
    z-index: 40;

    top: calc(100% + 0.5rem);
    right: 0;

    min-width: max-content;

    padding: 0.35rem;

    border: 1px solid rgba(8, 124, 255, 0.28);
    border-radius: 0.8rem;

    background: rgba(250, 253, 255, 0.96);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0.55rem 1.4rem rgba(4, 74, 150, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-0.45rem);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
}


/* =========================================================
   MENU OUVERT
   ========================================================= */

.solvyla-cou .cou-workspace-actions-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0s;
}


/* =========================================================
   OPTIONS DU MENU
   ========================================================= */

.solvyla-cou .cou-workspace-actions-menu button {
    display: block;

    width: 100%;

    padding:
        clamp(0.55rem, 0.8vmin, 0.75rem)
        clamp(0.9rem, 1.2vmin, 1.2rem);

    border: 0;
    border-bottom: 1px solid rgba(8, 124, 255, 0.13);

    border-radius: 0.45rem;

    background: transparent;

    color: var(--solvyla-text-blue-royal);

    font-family: inherit;
    font-size: clamp(0.76rem, 1.08vmin, 0.95rem);
    font-weight: var(--solvyla-weight-semibold, 600);

    text-align: left;
    white-space: nowrap;

    cursor: pointer;

    transition:
    background 0.18s ease,
    color 0.18s ease;
}

.solvyla-cou .cou-workspace-actions-menu button:last-child {
    border-bottom: 0;
}

.solvyla-cou .cou-workspace-actions-menu button:hover {
    background: rgba(105, 190, 230, 0.16);

    color: var(--solvyla-text-blue-deep);
}

/* =========================================================
   ZONE SCROLLABLE
   Seule cette zone defile. Le bandeau reste immobile.
   ========================================================= */
.solvyla-cou .cou-workspace-scroll {
    box-sizing: border-box;

    min-width: 0;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: clamp(1rem, 2vmin, 2rem);

    scrollbar-width: thin;
    scrollbar-color:
        color-mix(in srgb, var(--solvyla-blue-lagoon) 55%, transparent)
        rgba(255, 255, 255, 0.20);
}

.solvyla-cou .cou-workspace-content {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
/* =========================================================
   ACTIONS BAS DE PAGE
   ========================================================= */

.solvyla-cou .cou-workspace-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    width: 100%;

    margin-top: clamp(1.2rem, 2.5vmin, 2.5rem);
    padding-top: clamp(0.8rem, 1.5vmin, 1.5rem);
}

.solvyla-cou .cou-workspace-bottom-left,
.solvyla-cou .cou-workspace-bottom-right {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vmin, 0.9rem);
}

/* =========================================================
   BOUTONS ACTIONS BAS WORKSPACE
   ========================================================= */

.solvyla-cou .cou-workspace-quit,
.solvyla-cou .cou-workspace-back,
.solvyla-cou .cou-workspace-next,
.solvyla-cou .cou-workspace-save {
    box-sizing: border-box;

    min-width: 7.5rem;

    padding:
        clamp(0.32rem, 0.55vmin, 0.45rem)
        clamp(1rem, 1.5vw, 1.6rem);

    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 1.1rem;

    background: linear-gradient(
        90deg,
        rgba(160, 226, 232, 0.78) 0%,
        rgba(105, 190, 230, 0.76) 15%,
        rgba(55, 145, 225, 0.78) 30%,
        rgba(55, 145, 225, 0.78) 70%,
        rgba(105, 190, 230, 0.76) 85%,
        rgba(160, 226, 232, 0.78) 100%
    );

    color: var(--solvyla-text-blue-deep);

    font-family: inherit;
    font-size: clamp(0.78rem, 1vmin, 0.92rem);
    font-weight: var(--solvyla-weight-bold, 700);
    line-height: 1.15;

    text-align: center;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 0.25rem 0.7rem rgba(4, 74, 150, 0.10);

    cursor: pointer;
}

.solvyla-cou .cou-workspace-bottom-right {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vmin, 0.9rem);
}

.solvyla-cou .cou-workspace-back[hidden],
.solvyla-cou .cou-workspace-next[hidden] {
    display: none !important;
}

/* =========================================================
   SOLVYLA WKP - MODERNISATION DES CHAMPS
   Version 0.1
   A intégrer dans COU-workspace.css après validation.
   ========================================================= */

:root {
    --solvyla-field-border: #87b9ff;
    --solvyla-field-border-focus: var(--solvyla-blue-lagoon);
    --solvyla-field-text: #063b82;
    --solvyla-required-color: #e53935;
    --solvyla-alert-border: #ff9a9a;
    --solvyla-alert-left: #ff5c5c;
    --solvyla-alert-bg: #fff7f7;
    --solvyla-alert-text: #8b1f1f;
}

/* =========================================================
   CHAMPS WKP STANDARD
   ========================================================= */

.wkp-form input,
.wkp-form textarea,
.wkp-form select {
    background: #ffffff;
    color: var(--solvyla-field-text);

    border-style: solid;
    border-width: 0.08vw;
    border-color: var(--solvyla-field-border);

    border-radius: clamp(8px, 0.6vw, 12px);

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

/* =========================================================
   AJUSTEMENT CHAMPS DATE
   ========================================================= */

.solvyla-cou .wkp-form input[type="date"] {
    line-height: 1;
}

.wkp-form input:focus,
.wkp-form textarea:focus,
.wkp-form select:focus {
    outline: none;
    border-color: var(--solvyla-field-border-focus);
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 0 0 2px rgba(8, 124, 255, 0.10);
}

/* =========================================================
   LABELS WKP
   ========================================================= */

.wkp-field,
.wkp-field label,
.wkp-field > span {
    color: var(--solvyla-field-text);
}

/* =========================================================
   ASTERISQUES CHAMPS OBLIGATOIRES
   Le JS ajoutera automatiquement la classe
   .wkp-required-label
   ========================================================= */

.wkp-required-label::after {
    content: " *";
    color: var(--solvyla-required-color);
    font-weight: 700;
}

/* =========================================================
   BANDEAU CHAMPS MANQUANTS
   Prévu pour le futur moteur JS WKP.
   ========================================================= */

.wkp-required-alert {
    display: block;

    margin: 1vw 0;
    padding: 1vw 1.2vw;

    background: var(--solvyla-alert-bg);

    border: 0.08vw solid var(--solvyla-alert-border);
    border-left: 0.35vw solid var(--solvyla-alert-left);

    border-radius: clamp(8px, 0.6vw, 12px);

    color: var(--solvyla-alert-text);
}

.wkp-required-alert-title {
    font-weight: 700;
    margin-bottom: 0.5vw;
}

.wkp-required-alert ul {
    margin: 0;
    padding-left: 1.4vw;
}

.wkp-required-alert li {
    margin-bottom: 0.2vw;
}

/* =========================================================
   CHAMP EN ERREUR
   Prévu pour les futurs contrôles JS.
   ========================================================= */

.wkp-field-error,
.wkp-form input.wkp-field-error,
.wkp-form textarea.wkp-field-error,
.wkp-form select.wkp-field-error {
    border-color: var(--solvyla-alert-left) !important;

    box-shadow:
        0 0 0 0.18vw rgba(255,92,92,.12);
}

/* =========================================================
   ADAPTATION INTERMEDIAIRE
   Le contenu se resserre avant le futur basculement portrait.
   ========================================================= */
@container cou-workspace-page (max-width: 900px) {
    .cou-workspace-header {
        padding-inline: clamp(0.8rem, 2.5cqi, 1.4rem);
    }

    .cou-workspace-scroll {
        padding: clamp(0.8rem, 2.5cqi, 1.4rem);
    }

    .cou-workspace-title {
        font-size: clamp(0.95rem, 2.8cqi, 1.35rem);
    }

    .cou-workspace-subtitle {
        font-size: clamp(0.76rem, 2.1cqi, 1rem);
    }
}

/* =========================================================
   SEUIL COMPACT
   Dernier niveau avant une reorganisation Motable portrait.
   On compacte mais on ne cherche pas a faire survivre le layout
   desktop indefiniment.
   ========================================================= */
@container cou-workspace-page (max-width: 620px) {
    .cou-workspace-header-line {
        margin-top: -0.6rem;
    }

    .cou-workspace-title {
        font-size: clamp(0.85rem, 3.5cqi, 1.1rem);
    }

    .cou-workspace-subtitle,
    .cou-workspace-actions-trigger,
    .cou-workspace-save,
    .cou-workspace-actions-menu button {
        font-size: clamp(0.72rem, 2.7cqi, 0.9rem);
    }
}

/* =========================================================
   SOLVYLA - WORKSPACE BUTTON
   Bouton sous-menu Workspace
   ========================================================= */

.solvyla-workspace-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 58px;
    padding:
        0.70rem
        2.20rem;
    box-sizing: border-box;
    border: 1px solid rgba(125,185,255,.85);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1846a3;
    font-family:
        var(
            --solvyla-font,
            Inter,
            system-ui,
            Arial,
            sans-serif
        );
    font-size: clamp(1rem, 1.25vmin, 1.15rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -1px 0 rgba(255,255,255,.10),
        0 5px 12px rgba(41,65,105,.16),
        0 1px 2px rgba(255,255,255,.28);
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}
/* Reflet supérieur premium */
.solvyla-workspace-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 46%;
    border-radius:
        10px
        10px
        50%
        50%;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,0)
        );
    pointer-events: none;
}
/* Hover */
.solvyla-workspace-button:hover,
.solvyla-workspace-button:focus-visible {
    background: rgba(255,255,255,.12);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(255,255,255,.12),
        0 8px 18px rgba(41,65,105,.22);
    outline: none;
}
/* Active */
.solvyla-workspace-button:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 5px rgba(30,50,85,.18),
        0 2px 6px rgba(41,65,105,.14);
}
/* Désactivé */
.solvyla-workspace-button:disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}