body{
    background: ghostwhite;
    margin: 0 auto 2em;
    padding: 0 clamp(0.8rem, 5vw, 4rem) 1em;
    font-family: sans-serif;
    max-width: 700px;
}
ul.separated {list-style-type: none; padding: 0;}
ul.separated > li {
    border: 1px solid #b7b7e5;
    background:rgba(183, 183, 229, .1);
    padding: .5em;
    margin: .5em 0;
    border-radius: 5px;
}

button, select {
    cursor: pointer;
    font: inherit;
    background: #fff;
    border: 1px solid #b7b7e5;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center; gap: .5em;
    padding: 5px 10px;
    min-width: 50px;
    min-height: 45px;
}
button.current {font-weight: bold; border-width: 4px;}

input, textarea {
    font: inherit;
    border: 1px solid #b7b7e5;
    border-radius: 5px;
    min-height: 45px;
    width: 100%;
    padding: 5px 10px;
}
textarea {
    resize: vertical;
}
code {
    background: #e8e8fb;
    font-size: 1.2em;
}

.m{font-size: 1.7em}
.l{font-size: 3em}
.xl{font-size: 5em}
.cloze{border-bottom: 2px solid red; width: 2em; display: inline-block;}
mark {background: #ffdcdc}
img {max-width: 100%}

.sticky {
    position: sticky;
    top: 0;          /* distance du haut de la fenêtre */
    background: linear-gradient(to bottom, ghostwhite 0%, ghostwhite 80%, transparent 100%);
    z-index: 10;
}

.flex {display: flex}
.gap {gap: .5em}
.gap1 {gap: 1em}
.aic {align-items: center}
.jcc {justify-content: center}
.jcb {justify-content: space-between}
.col {flex-direction: column}
.fww {flex-wrap: wrap;}

/* Vokoj */
::backdrop{background:#fff;opacity:.6}
dialog{max-width:40rem;border:none;background:rgba(0,0,0,0);padding:1rem;position:relative}
dialog>div {
    background: #f8f2ff;
    border-radius: .3rem;
    box-shadow: 0 0 .6rem rgba(27, 3, 52, 0.3);
    padding: 1rem;
}
dialog>div>*:first-child{margin-top:0}
dialog .bts{display:flex;gap:.5rem;justify-content:center;margin-top:2rem}