.matrix10 { margin: auto; border: 3px solid black; width: 100%; text-align: center; font-size:14px; } .titre { text-align: center; font-size: 40px; padding: 2%; } .sous_titre { width: 100%; margin: 0 auto; text-align: center; } .consigne_prez { width: 100%; margin: 0 auto; text-align: center; border: 5px solid black; border-radius: 20px; padding: 5%; text-align: justify; font-size: 18px; } .consigne_tache { width: 100%; margin: 0 auto; text-align: center; border: 5px solid black; border-radius: 20px; padding: 5%; text-align: justify; font-size: 14px; } .consigne { width: 100%; margin: 0 auto; text-align: center; border: 5px solid black; border-radius: 20px; padding: 2%; text-align: justify; font-size: 15px; } .violet1 { color: #EE82EE; font-size: 50px; } .bleu1 { color: blue; font-size: 50px; } .violet2 { color: #EE82EE; font-size: 50px; } .bleu2 { color: blue; font-size: 50px; } .violet3 { color: #EE82EE; font-size: 50px; } .bleu3 { color: blue; font-size: 50px; } .suivant { padding: 5%; } .range-wrap { position: relative; margin: 0 auto 3rem; } .range { width: 100%; } .bubble { background: red; color: white; padding: 4px 12px; position: absolute; border-radius: 4px; left: 50%; transform: translateX(-50%); } .bubble::after { content: ""; position: absolute; width: 2px; height: 2px; background: red; top: -1px; left: 50%; } input[type=radio] { border: 0px solid black; width: 1em; height: 1em; padding: 70px; margin-left: -30px; } kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset; color: #333; display: inline-block; font-size: .85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; }