/* Styles généraux pour le volet */
.openframe-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Couleur de l'overlay, personnalisable */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease; /* Durée de l'animation */
}

/* Affichage de l'overlay lorsque le volet est ouvert */
.openframe-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Styles pour le volet lui-même */
.openframe-panel {
    position: fixed;
    top: 0;
    height: 100%; /* Toujours pleine hauteur */
    background-color: #ffffff; /* Couleur de fond par défaut, personnalisable */
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /*transition: transform 300ms ease; /* Animation pour l'ouverture/fermeture */
}

/* Volet à gauche */
.openframe-panel.left {
    left: 0;
    transform: translateX(-100%); /* Position initiale hors de la vue */
}

/* Volet à droite */
.openframe-panel.right {
    right: 0;
    transform: translateX(100%); /* Position initiale hors de la vue */
}

/* Volet ouvert */
.openframe-panel.active {
    transform: translateX(0); /* Animation pour ramener le volet dans la vue */
}

/* Bouton de fermeture */
.openframe-close {
    position: absolute;
    top: 0px;
    right: 15px;
    width: 30px;
    height: 30px;
    /* background-color: #333; /* Couleur par défaut */
    color: #fff;
    border: none;
    /*border-radius: 15px;*/
    cursor: pointer;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 1;
}

.openframe-close:hover {
    background-color: #555; /* Couleur au survol */
}

/* Zone non occupée (clic pour fermer) */
.openframe-overlay .close-area {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15px; /* L'espace minimum inoccupé pour le bouton de fermeture */
}


/* Disable scroll on body when panel is active */
body.openframe-no-scroll {
    overflow: hidden;
}