/* CADRE COMPLET */
    .cadre-eo {
        position: fixed;
        min-width: 600px;
        /* right: 1000px; */
        left: 300px;
        top: 200px;
        width: 800px;
        height: 550px;
        /* bottom: 250px; */
        margin: auto;
        text-align: justify;
        z-index: 1000;
        border-radius: 20px;
        background-size: cover;
        background-position: center;
        box-shadow: 0px 4px 10px rgba(196, 196, 196, 0.69);
        background-color: rgba(255, 255, 255, 0.9);
        padding: 20px;
        display: flex;
        flex-direction: column;
        /*🔑 état caché */
        opacity: 0;
        /* visibility: hidden; */
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        width: auto;
        max-width: 100%;
        cursor: default;
    }

    .cadre-eo.is-visible {
        opacity: 1;
        /* visibility: visible; */
        pointer-events: auto;
    }

    /* HEADER */

    .header-eo {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-bottom: 10px;
        cursor: move;
        /* curseur en forme de croix */
        user-select: none;
        /* standard */
        -webkit-user-select: none;
        /* Chrome / Safari */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* ancien Edge */
    }

    .header-title {
        margin-right: auto;
        /* pousse tout le reste à droite */
    }

    .header-eo-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header-eo-right:hover {
        cursor: pointer;
        color: red;
    }

    .header-eo-texte {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        opacity: 1;
        letter-spacing: 0.05em;
    }