/**
 * SOLVYLA PRO - SIGNATURE
 * Version 0.1
 * Identite visuelle commune des espaces professionnels.
 * Les valeurs dynamiques ACF pourront etre injectees ensuite par PHP.
 */

/* Fond signature applique uniquement a l'espace de travail COU. */
.solvyla-cou .cou-workspace {
    position: relative;
    isolation: isolate;

    background-image: var(--cou-signature-bg);
    background-blend-mode: var(--cou-signature-blend);
}

/* Image ACF future, separee des degradés pour regler son opacite proprement. */
.solvyla-cou .cou-workspace::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

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

    opacity: var(--solvyla-signature-image-opacity);
}

/* =========================================================
   SOLVYLA SIGNATURE
   Identité visuelle commune
   ========================================================= */
:root {
    /* =====================================================
       TYPOGRAPHIE
       ===================================================== */

    --solvyla-font: "Inter", Arial, sans-serif;
    --solvyla-weight-regular: 400;
    --solvyla-weight-medium: 500;
    --solvyla-weight-semibold: 600;
    --solvyla-weight-bold: 700;

    --solvyla-text-blue-deep: #031c54;
    --solvyla-text-blue-royal: #063cae;
    }

    /* =====================================================
       BLEU SIGNATURE
       ===================================================== */
:root{
    --solvyla-blue-signature:
        linear-gradient(
            45deg,
            #075ee8 0%,
            #087cff 18%,
            #2498ff 34%,
            #1267eb 52%,
            #0754d8 72%,
            #168cff 88%,
            #075ee8 100%
        );


    /* =====================================================
       BLEU ROYAL
       ===================================================== */

    --solvyla-blue-royal:
        linear-gradient(
            45deg,
            #063cae 0%,
            #0759d9 18%,
            #0b7cff 36%,
            #0754ca 55%,
            #043fa9 73%,
            #126ee8 88%,
            #063cae 100%
        );


    /* =====================================================
       BLEU PROFOND
       ===================================================== */

    --solvyla-blue-deep:
        linear-gradient(
            45deg,
            #031c54 0%,
            #063b82 18%,
            #0871be 35%,
            #06366f 52%,
            #021b4a 70%,
            #075a9f 87%,
            #031c54 100%
        );


    /* =====================================================
       BLEU LAGON
       ===================================================== */

    --solvyla-blue-lagoon:
        linear-gradient(
            45deg,
            #0079b8 0%,
            #00a6d7 18%,
            #19d4e7 35%,
            #009ac8 52%,
            #007baa 70%,
            #14cce3 88%,
            #0079b8 100%
        );
        /* =====================================================
         BLEU TURQUOISE ROYAL
        ===================================================== */

    --solvyla-blue-turquoise-royal:
        linear-gradient(
            45deg,
         #0470c0 0%,
         #0593df 18%,
         #15bbe3 35%,
         #0876c7 52%,
         #045fae 70%,
         #12a9dd 88%,
         #0470c0 100%
        );

    /* =====================================================
       BLANC ROYAL
       ===================================================== */

    --solvyla-white-royal:
        linear-gradient(
            45deg,
            #ffffff 0%,
            #f7fbff 18%,
            #eaf4ff 34%,
            #ffffff 52%,
            #f4efff 68%,
            #fff8f1 84%,
            #ffffff 100%
        );


    /* =====================================================
       BLANC SIGNATURE
       ===================================================== */

    --solvyla-white-signature:
        linear-gradient(
            45deg,
            #ffffff 0%,
            #edfaff 16%,
            #f7f4ff 32%,
            #fffaf4 48%,
            #f5fff9 64%,
            #fff2f7 82%,
            #ffffff 100%
        );


    /* =====================================================
       BLANC ROSE NACRE
       ===================================================== */

    --solvyla-white-rose:
        linear-gradient(
            45deg,
            #ffffff 0%,
            #fff1f5 17%,
            #f9e9ef 34%,
            #fff9f4 51%,
            #f4faff 68%,
            #ffeef4 84%,
            #ffffff 100%
        );


    /* =====================================================
       BLANC LAGON
       ===================================================== */

    --solvyla-white-lagoon:
        linear-gradient(
            45deg,
            #ffffff 0%,
            #ecffff 16%,
            #dffafa 31%,
            #f4ffff 48%,
            #e8f7ff 65%,
            #f5fffc 82%,
            #ffffff 100%
        );


    /* =====================================================
       EFFETS DE MATIERE COMMUNS
       ===================================================== */

    --solvyla-gloss-highlight:
        linear-gradient(
            125deg,
            rgba(255,255,255,0.70) 0%,
            rgba(255,255,255,0.15) 24%,
            rgba(255,255,255,0.65) 43%,
            rgba(255,255,255,0.05) 57%,
            rgba(255,255,255,0.35) 78%,
            transparent 100%
        );

    --solvyla-gloss-shadow:
        inset 0 1px 1px rgba(255,255,255,0.80),
        inset 0 -3px 8px rgba(0,30,80,0.18),
        0 3px 8px rgba(0,40,100,0.18);

}

/* =========================================================
   MENU DEROULANT SIGNATURE
   Composant transversal SOLVYLA
   ========================================================= */


/* =========================================================
   CONTENEUR
   Referentiel du menu ouvert
   ========================================================= */

.solvyla-signature-menu-wrap {
    position: relative;

    display: block;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* =========================================================
   DECLENCHEUR
   ========================================================= */

.solvyla-signature-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding:
        clamp(0.5rem, 0.8vmin, 0.7rem)
        clamp(0.8rem, 1.3vmin, 1.2rem);

    border: 1px solid rgba(8, 124, 255, 0.32);
    border-radius: 0.7vmin;

    background: transparent;

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

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

    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55);

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


/* =========================================================
   DECLENCHEUR : SURVOL / OUVERT
   ========================================================= */

.solvyla-signature-menu-trigger:hover,
.solvyla-signature-menu-trigger[aria-expanded="true"] {
    border-color: rgba(8, 124, 255, 0.55);

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

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


/* =========================================================
   VALEUR COURANTE
   ========================================================= */

.solvyla-signature-menu-current {
    flex: 1 1 auto;

    min-width: 0;

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


/* =========================================================
   FLECHE
   ========================================================= */

.solvyla-signature-menu-arrow {
    flex: 0 0 auto;

    font-size: 0.78em;
    line-height: 1;

    transition: transform 0.2s ease;
}

.solvyla-signature-menu-trigger[aria-expanded="true"]
.solvyla-signature-menu-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   PANNEAU OUVERT

   IMPORTANT :
   - absolute = ne decale jamais le contenu
   - largeur = exactement celle du wrapper
   - passe au-dessus du formulaire
   ========================================================= */

.solvyla-signature-menu {
    position: absolute;

    z-index: 1000;

    top: calc(100% + 0.3rem);
    left: 0;

    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0.25rem;

    overflow: hidden;

    border: 1px solid rgba(8, 124, 255, 0.30);
    border-radius: 0.7vmin;

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

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


/* =========================================================
   MENU FERME
   ========================================================= */

.solvyla-signature-menu[hidden] {
    display: none !important;
}


/* =========================================================
   OPTIONS
   ========================================================= */

.solvyla-signature-menu-item {
    display: block;

    box-sizing: border-box;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding:
        clamp(0.5rem, 0.8vmin, 0.7rem)
        clamp(0.8rem, 1.3vmin, 1.2rem);

    border: 0;
    border-radius: 0.45vmin;

    background: transparent;

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

    font-family: var(--solvyla-font);
    font-size: clamp(0.82rem, 1.2vmin, 1rem);
    font-weight: var(--solvyla-weight-semibold, 600);
    line-height: 1.2;

    text-align: left;

    cursor: pointer;
}


/* =========================================================
   OPTION : SURVOL / FOCUS
   ========================================================= */

.solvyla-signature-menu-item:hover,
.solvyla-signature-menu-item:focus {
    outline: none;

    background: rgba(105, 190, 230, 0.20);

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


/* =========================================================
   OPTION ACTIVE
   ========================================================= */

.solvyla-signature-menu-item.is-active,
.solvyla-signature-menu-item[aria-selected="true"] {
    background: rgba(105, 190, 230, 0.28);

    font-weight: var(--solvyla-weight-bold, 700);
}