.wrapper-nav{position:fixed;top:0;z-index:2;width:100%}.nav{position:absolute;z-index:1;top:3.8rem;left:-174px;transition:all .5s ease-in-out}.nav .btn-primary{background-color:#3a3a3c;border-color:#3a3a3c}.box{height:75px;width:75px;background:#f8f8f8;margin-left:5px;margin-right:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center;top:1px}.box,.contLigne{position:relative}.contLigne{width:22.5px;height:15.75px;cursor:pointer}.lignes{width:100%;height:2px;border-radius:5px;background:#000;position:absolute;transition:all .5s ease-in-out}.lignes:first-child{top:0}.lignes:nth-child(2){top:6.75px}.lignes:nth-child(3){top:13.5px}.btn1.active .lignes:first-child{top:4.5px;transform:rotate(135deg)}.btn1.active .lignes:nth-child(2){transform:translateX(-7px);opacity:0}.btn1.active .lignes:nth-child(3){top:4.5px;transform:rotate(-135deg)}.nav.active{transform:translateX(173px)}.to-scroll{margin:1.5rem auto;width:95%}.btnnav{margin:5px}.btn-nav a,.btn-nav a:hover{color:#fff;text-decoration:none}.form{margin:0 auto}.form li .uppercase{text-transform:uppercase}.form-control{width:60%!important;margin:0 auto!important}.display-keyboard-letters ul{margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center}.display-keyboard-letters li{position:relative;display:inline-block;width:2.5rem;border:1px solid #fff;color:#fff;font-size:1.5em;background-color:#555;border-radius:.3rem;display:flex;justify-content:center;align-items:center}.display-keyboard-letters li.isActive{background-color:#222}.display-keyboard-letters li.isGoodPlaced{background-color:#e7002a}.display-keyboard-letters li.isBadPlaced{background-color:#ffbd00}.display-keyboard-letters li.isBadPlaced.isGoodPlaced{background-image:linear-gradient(45deg,#fd1d1d 50%,#ffbd00 0)}.wordle .display-keyboard-letters li.isGoodPlaced{background-color:#3eaa42}.wordle .display-keyboard-letters li.isBadPlaced{background-color:#d3952a}.wordle .display-keyboard-letters li.isBadPlaced.isGoodPlaced{background-image:linear-gradient(45deg,#3eaa42 50%,#d3952a 0)}.display-keyboard-letters li a{text-decoration:none;color:#fff;display:block;width:100%}.display-keyboard-letters li.maj{width:6rem;font-size:1.5em}.display-keyboard-letters li.backspace{width:6rem}.display-keyboard-letters li.exclude{width:50%;font-size:1.1em;background-color:#0077c7;line-height:1.3rem;height:60px}.display-keyboard-letters li.validate{width:50%;font-size:1.1em;background-color:#fff;line-height:40px;height:40px;border:2px solid #e7002a;margin:1rem 0 .5rem}.display-keyboard-letters li.validate a{color:#e7002a}.display-keyboard-letters li.validate:active{background-color:#e7002a;border:2px solid #fff}.display-keyboard-letters li.validate:active a{color:#fff}.wordle .display-keyboard-letters li.validate{background-color:#fff;border:2px solid #3eaa42}.wordle .display-keyboard-letters li.validate a{color:#3eaa42}.wordle .display-keyboard-letters li.validate:active{background-color:#3eaa42;border:2px solid #fff}.wordle .display-keyboard-letters li.validate:active a{color:#fff}.display-keyboard-letters li.excludeActive{background-color:#0077c7;opacity:1}.wordle .display-keyboard-letters li.excludeActive{background-color:#3a3a3c}.display-keyboard-letters li.notinword,.wordle .display-keyboard-letters li.notinword{opacity:.7}.display-keyboard-letters li.notinword a:before{content:"X";color:red;font-size:2rem;position:absolute;left:8px;top:-4px;opacity:.6}.display-keyboard-letters li.reset{width:50%;font-size:1.1em;line-height:1.3rem;height:60px}.display-control-letter{display:none;position:absolute;top:-4rem;left:.5rem;width:2.5rem;border:1px solid #fff;color:#555;font-size:1.5em;background-color:#fff;border:1px solid #555;border-radius:.3rem;z-index:1}.isActive .display-control-letter{display:block}.display-keyboard-letters li.notplaces{background-color:#e7002a;background-color:#555}.display-keyboard-letters li.goodplaces{background-color:#ffbd00}.input-letters ul{padding:0}.input-letters li{display:inline-block;width:2.3rem;border:1px solid #fff;color:#fff;font-size:1.5em;border-radius:4px}.possible-letters .nb-words{font-weight:700;font-size:1.2rem}.possible-letters .oneLengthWord,.possible-letters .oneLengthWord p{margin:1rem}.possible-letters .oneLengthWord span{font-size:1.1rem;text-transform:uppercase;margin:1rem;padding:.5rem;border-radius:.5rem;display:inline-block;box-shadow:0 1px 1px rgba(0,0,0,.07),0 2px 2px rgba(0,0,0,.07),0 4px 4px rgba(0,0,0,.07),0 8px 8px rgba(0,0,0,.07),0 16px 16px rgba(0,0,0,.07)}@font-face{font-family:"Arista 2.0";src:url(/sutom/fonts/Arista2.0.0d211bd1.ttf)}.color-letter-nok{color:#0077c7}.color-letter-good-place{color:#e7002a}.color-letter-bad-place{color:#ffbd00;border-radius:2rem}.color-letter-nok{color:#3a3a3c}.fieldset-container-component{border:2px solid #deb887;max-width:744px;margin:1rem auto;padding:1rem;border-radius:4px;position:relative}.legend{position:absolute;width:auto;left:1rem;top:-20px;background-color:#fff;display:inline-block;font-size:1.5rem;font-weight:700;color:#8a5e25}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem}.color-grid{background-color:#0077c7;border-radius:4px}.color-good-place{background-color:#e7002a;border-radius:4px}.color-bad-place{background-color:#0077c7;border-radius:4px}.bad-place{background-color:#ffbd00;border-radius:4px}.color-bad-place span{background-color:#ffbd00;border-radius:2rem;width:2.3rem;display:inline-block}.color-border{background-color:#fff}.tusmo .input-letters li{border-radius:.5rem}.tusmo .color-grid{background-color:#3a3a3c}.tusmo .color-good-place{background-color:#e7002a}.tusmo .color-bad-place{background-color:#ffbd00}.tusmo .color-bad-place span{background-color:#ffbd00;border-radius:0}.wordle .input-letters li{border-radius:.5rem}.wordle .color-grid{background-color:#3a3a3c}.wordle .color-good-place{background-color:#3eaa42}.wordle .color-bad-place{background-color:#d3952a}.wordle .color-bad-place span{background-color:#d3952a;border-radius:0}.sutom .color-letter-nok{color:#0077c7}.sutom .color-letter-good-place{color:#e7002a}.sutom.color-letter-bad-place{color:#ffbd00;border-radius:2rem}.wordle .color-letter-nok{color:#3a3a3c}.wordle .color-letter-good-place{color:#3eaa42}.wordle .color-letter-bad-place{color:#d3952a;border-radius:none}header{text-align:center;margin-bottom:20px}.game-selector{display:flex;justify-content:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}.game-selector button{padding:10px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px}.game-selector button:hover{background-color:#45a049}.game-selector button.active{background-color:#2e7d32;font-weight:700}.game-container{display:flex;flex-direction:column;align-content:center;justify-content:center;margin:0 auto}.game-iframe-container{width:100%;height:60vh;min-height:500px;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1);overflow:hidden}.game-iframe-container iframe{width:100%;height:100%;border:none}@media (min-width:768px){.game-container{flex-direction:row}}.intro{margin-top:6.5rem;width:90%}.intro p{padding:0 .8rem;margin:0;white-space:inherit}.intro ul{margin-top:.5rem;padding:0;display:flex;flex-direction:column;flex-wrap:nowrap;justify-self:center}.intro ul li{margin-bottom:.3rem;justify-content:space-around}:is(.change-color,.with-color-transition){list-style-type:circle}.change-color li.first::marker{color:red}.change-color li.second::marker{color:#d2bc3e}.change-color li.third::marker{color:#0077c7}.change-color li.fourth::marker{color:#0077c7}.change-color li.fifth::marker{color:red}.change-color li.sixth::marker{color:#277d32}.intro a{padding:0;color:#fff;border-radius:4px;font-weight:700;margin-top:.1rem;margin-bottom:0;&.anchor{color:inherit;font-weight:400;padding:inherit;margin-top:inherit;color:#deb887;font-weight:700;padding:0;margin-top:0}}.intro span.tile{display:inline-block;padding:.1rem .5rem;color:#fff;border-radius:4px;text-decoration:none;font-weight:700;margin-top:.1rem}span.search-button{color:crimson;border:1px solid crimson;border-radius:4px;font-weight:700}span.search-button,span.select-game{display:inline-block;padding:.3rem .5rem;padding:.5rem 1rem;text-decoration:none}span.select-game{background-color:#4caf50;color:#fff;border:1px solid #4caf50;border-radius:4px;font-weight:400;&.active{background-color:#2e7d32;color:#fff;font-weight:700}}.font-smaller{font-size:.9rem}details.details-infos{margin:0 auto;max-width:744px;summary{cursor:pointer;list-style:none}summary::marker{content:"\23F5";font-size:1rem;color:#deb887}&[open] summary::marker{content:"\23F7";color:#deb887}summary span{display:inline-block;border-radius:25px 25px 25px 0;font-size:.9rem}}.more-infos li{&.first::marker{color:#4caf50}&.second::marker{color:red}&.third::marker{color:#0077c7}}.header-top{width:100%}h1>span{background-color:#0077c7}.wordle .intro a{color:#3eaa42}.intro img{width:20%}.header-top{z-index:0;top:0;background:#fff;width:95%;margin:0 auto;position:static}.h1,h1{text-align:center;text-transform:uppercase;margin:0;background-color:#f8f8f8;border:1px solid #ccc;box-shadow:0 2px 5px #ddd;text-shadow:0 2px 4px #000;color:#fff;font-size:1.5rem!important;font-family:"Arista 2.0";width:100%;position:fixed;top:0;z-index:1}h1>span{display:inline-block;width:2rem;border:1px solid #fff;background-color:#0a5566}.sound-element{position:fixed;top:26px;right:3%;z-index:2;display:block}.sound-element img{width:36px}.intro{margin-top:5.5rem}.tusmo .intro a{color:#0a5566}.intro a.sutom-color{color:#fff;background-color:#0077c7}.intro a.tuzmo-color{color:#fff;background-color:#0a5566}.intro a.wordle-color{color:#fff;background-color:#277d32}.intro img{width:30%;display:inline-block}summary span{display:inline-block;font-size:1rem;font-weight:700;background-color:#deb887;color:#fff;border-radius:25px 25px 25px 0}