/* structure du formulaire (ex popup) */

.form-votes-sujet{
    display:flex;
    justify-content: center;
    
    }
 
    .popup {
    position: fixed;
    inset: 0;
    bottom: 70px;
    display: none;
    justify-content: center;
    align-items: flex-end; 
    }

    #ouvrir-popup:checked + label + .popup {
        display: flex;
        }

    .popup-content-form-votes-sujet {
        position: relative;
        z-index: 2;
        background: rgb(64, 96, 130);
        padding: 20px;
        border-radius: 8px;
        display:flex ; 
        width: 300px;
        }

    .fermer-popup {
        position: absolute;
        inset: 0;
        z-index: 1;
        }


/************************************** popup*/

    /* .popup-messages {
        position: fixed;
        inset: 0;
        bottom: 70px;
        top:70px;
        justify-content: center;
        align-items: center; 
        }
    .popup-messages-content-test {
        display: none;

        position: fixed;   
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        z-index: 9999;     
        background: rgb(182, 194, 206);
        padding: 20px;
        border-radius: 8px;

        width: 300px;
        flex-direction: column;
    } 
    .popup-messages-content {
        display: none;
            position: fixed;
            z-index: 9999;
            background: rgb(182, 194, 206);
            padding: 20px;
            border-radius: 8px; 
            
            flex-direction: column;
            width: 300px;
            }

    .popup-messages-content textarea {
        width: 100%;          
        max-width: 100%;     
        box-sizing: border-box; 
        resize: none;  
        display: none;       
    }

    #ouvrir-popup-messages:checked + label + .popup-messages-content {
        display: flex;
    }

    .fermer-popup-messages {
            position: absolute;
            inset: 0;
            z-index: 1;
            } */

.form-avis{
    display: inline-block;
    text-align: center;
    }

.zone-vote-vue{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    }
.image.zone-vote-vue{
    
}
.form-vote-vue{
    background-image: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
.form-vote-vue-sujet{
    background-image: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

.form-contenu-message {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
    font: inherit;  
    }

.form-contenu{ 
    
        overflow-wrap: break-word;
    word-break: break-all; 
    min-width: 0;
    /* max-width: 100%; */

    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    margin: 10px;
    padding: 10px;
    }
.form-contenu textarea {
    width: 100%;          /* prend toute la largeur dispo */
    max-width: 100%;      /* ne dépasse jamais */
    box-sizing: border-box; /* inclut padding dans largeur */
    resize: vertical;;         /* empêche l'utilisateur d'agrandir */
}
.form-connexion{
    background-color: #cec1c1;
    
    }


/* .form-lier{  
        display: flex;
        justify-content: center; 
        align-items: center; 
        gap: 60px;     }
    .lien {
            display: flex;
            height: 80px;
            width: 60px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            appearance: none;
            cursor: pointer;
            border-color:transparent;
            background-color: transparent;}
    .lien:hover{
            display: inline-block; 
            background-image: none;
            font-size: 1.2em;
            font-weight: 600;    
            color: rgb(12, 16, 47);
            background-color: rgb(216, 153, 5);}
    .valider-lien{ 
            display: inline-block; 
            background-image: url("img/icn/lien_ok.png");
            font-size: 0;}
    .valider-lien:hover{
            display: inline-block; 
            background-image: none;
            font-size: 1.2em;
            font-weight: 600;    
            color: rgb(12, 16, 47);
            background-color: rgb(216, 153, 5);}
    .couper{
            display: inline-block; 
            background-image: url("img/icn/couper.png"); 
            font-size: 0;}  
    .couper:hover{
            width: 100px;
            background-image: none;
            font-size: 1.2em;
            font-weight: 300;    
            color: rgb(204, 207, 229);
            background-color: rgb(30, 22, 64);}

    .lier{
            display: inline-block; 
            background-image: url("img/icn/lien_ok.png"); 
            font-size: 0;}

  */