.sort-destruction{
    display:flex;
    flex-direction:row;
    justify-content:center;
}
body{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
#zone-affichage{
    position:relative;
    background-color:rgba(255, 255, 255, 0.7);
    padding-left:50px;
    width:700px;
    height:500px;
    margin-left:-375px;
    left:50%;
    margin-top:10px;
    border:solid 3px #333333;
    border-radius:30px;
}
#vignettes{
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.titre-page{
    background: linear-gradient(135deg, var(--couleur-parchemin) 0%, var(--couleur-parchemin-fonce) 100%);
    border: 3px solid var(--couleur-bordure);
    border-radius: var(--bordure-radius);
    padding: 1.25rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.1),
        0 4px 15px rgba(0,0,0,0.3);
    width: 34%;
    margin-left:50px;
    margin-top:30px;
    margin-bottom:20px;
}
.intro{
    background: linear-gradient(135deg, var(--couleur-parchemin) 0%, var(--couleur-parchemin-fonce) 100%);
    border: 3px solid var(--couleur-bordure);
    border-radius: var(--bordure-radius);
    padding: 1.25rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.1),
        0 4px 15px rgba(0,0,0,0.3);
    margin-top:30px;
    margin-bottom:20px;
    width:83%;
}
.sort-nom{
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid purple;
    border-radius: 20px;
    padding: 15px;
    margin-left: 10px;
    color: purple;
    display:inline-block;
}
.description-sort{
    display:none;
    width:700px;
    height:700px;

}
.sort-explication{
    float:left;
    width:300px;
    color: purple;
}
.nom-sort{
    color: crimson;
}