/* -- DÉBUT EN COMMUN -- */
select, button {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #cec9b3;
    background-color: #ecebe3;
    color: #7b7873;
    cursor: pointer;
    transition: all 0.3s;
    font-size: clamp(1.031rem, 0.865rem + 0.347vw, 1.125rem);
}

select:hover, button:hover {
    background: rgb(255, 90, 0);
    color: #ebe8db!important;
}

.flexdir-all, .justify-all, .align-all, .flexwrap-all, .aligncontent-all {
    margin-top: -1em;
}

.flexdir-controls, .justify-controls, .align-controls, .flexwrap-controls, .aligncontent-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
}

.flexdir-control-group, .justify-control-group, .align-control-group, .flexwrap-control-group, .aligncontent-control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.flexdir-control-group label, .justify-control-group label, .align-control-group label, .flexwrap-control-group label, .aligncontent-control-group label {
    font-size: 0.9em;
}

.flexdir-container, .justify-container, .align-container, .flexwrap-container {
    display: flex;
    justify-content: flex-start; /* garde les enfants à gauche */
    align-items: center;
    gap: 10px;
    padding: 15px;
    font-size: clamp(1.2rem, 0.844rem + 0.741vw, 1.4rem);
    color: #7b5965;
    background-color: #d5bac5;
    min-height: 150px;
}

.flexwrap-container { width: 500px; height: 260px; overflow: hidden; }

.aligncontent-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 15px;
    font-size: clamp(1.2rem, 0.844rem + 0.741vw, 1.4rem);
    color: #7b5965;
    background-color: #d5bac5;
    width: 500px;   
    height: 450px;
}

.flexdir-item, .justify-item, .align-item, .flexwrap-item, .aligncontent-item {
    position: relative;
    z-index: 2; /* assure que les enfants seront devant le parent */
    color: #e0ebf1;
    background-color: #7d94a2;
    padding: 16px;
    font-size: clamp(0.8rem, 0.444rem + 0.741vw, 1rem);
    font-weight: 300;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
}

.texte-enplus { color: #6d6f6c; }

/* -- FIN EN COMMUN -- */


/* -- DÉBUT MEDIA QUERIES EN COMMUN -- */
@media screen and (max-width: 767px) { 
    select, button { border: 1px solid #6b6861!important; background-color: #3e3c37!important; color: #aba89e!important; } 
    
    select:hover, button:hover { background: rgb(255, 90, 0)!important; color: #ebe8db!important; } 
    
    .flexdir-container, .justify-container, .align-container { gap: 8px; height: 100px; padding: 8px; } 
    
    .flexwrap-container { gap: 8px; height: 200px; padding: 8px; } 
    
    .flexdir-item, .justify-item, .align-item, .flexwrap-item, .aligncontent-item { width: 70px!important; height: 70px!important; padding: 8px; } 
    
    .flexwrap-container, .aligncontent-container { width: 290px; }

    .aligncontent-container { height: 360px; }
}
/* -- FIN MEDIA QUERIES EN COMMUN -- */