a,input { position: relative; z-index: 1; text-decoration: none; } a,input { outline: none; -moz-outline-style: none; text-decoration: none; } input:focus,input:active{ outline: none!important;} a, img { outline: none; } body { margin: 0; overflow: auto; background-color: #f9f9f9; background-position: top center; background-repeat: no-repeat; overflow-y: scroll; font-family: "Arial"; } * { margin: 0; padding: 0; text-decoration: none; font-weight: normal; outline: 0; } @font-face { font-family: 'lt'; src: url('medias/LT.eot'); src: url('medias/LT.eot?#iefix') format('embedded-opentype'), url('medias/LT.woff2') format('woff2'), url('medias/LT.woff') format('woff'), url('medias/LT.ttf') format('truetype'), url('medias/LT.svg#sui_generisregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MinecraftTen'; src: url('medias/minecraft.woff2') format('woff2'), /* Adjust path if needed */ } #menu { position: fixed; top: 0; z-index: 1000; padding: 0 10px 0 10px; width: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(38, 36, 35, .9); box-shadow: 0 4px 0 0 rgba(0, 0, 0, .25); height: 56px; } #menuc { width: clamp(300px, 100% - 20px, 1200px); margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 20px; } #menuc nav { width: auto; height: auto; display: flex; } #log { margin-top: 20px; filter: url(#plasmaEdge) drop-shadow(0 0 20px rgb(155 197 224 / 95%)) drop-shadow(0 0 8px #0091ff) drop-shadow(0 0 8px rgb(33 85 144 / 55%)); } .c0 { position: relative; z-index: 2; height: 100%; width: clamp(300px, 100%, 1240px); margin: 0 auto; overflow: hidden; } .c1,.c1se,.c1sb { position: relative; z-index: 2; width: clamp(300px, 100%, 1240px); margin: 0 auto; height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .c1se { justify-content: space-evenly; gap: 20px; } .c1sb { justify-content: space-between; } .c1p { position: relative; z-index: 2; width: clamp(300px, 100%, 1240px); margin: 0 auto; height: 100%; } /*.c1p{position: relative;z-index: 2;top: 0px;width: 1240px;height: auto;left: 50%;margin-left: -620px;}*/ #header { position: relative; width: 100%; height: 560px; background: #090706 -webkit-image-set(url(medias/headerhg_768a.avif) 1x, url(medias/headerhg_768.avif) 2x) top center repeat-x; background: #090706 image-set(url(medias/headerhgs.avif) 1x, url(medias/headerhg.avif) 2x) top center repeat-x; } #header .c0 { top: 80px; } #logo { position: relative; z-index: 10; margin: 0 auto; width: auto; height: auto; display: flex; justify-content: center; align-content: center; flex-direction: row; flex-wrap: wrap; } #logo a { height: 140px; align-content: center; } #logo h1 { width: 100%; font-size: 26px; font-family: lt; font-weight: bold; color: #fff; text-align: center; margin-top: -5px; } #cloud1 { position: absolute; z-index: 2; top: 30px; left: -100px; transform: translate3d(200px, 0px, 0px); width: 606px; height: 109px; background: url('medias/cloud1.avif') no-repeat center center; animation: movecls1 60s linear infinite; transition: transform .2s ease-in-out; } #cloud2 { position: absolute; z-index: 2; top: 25px; left: 600px; transform: translate3d(150px, 0px, 0px); width: 550px; height: 136px; background: url('medias/cloud2.avif') no-repeat center center; animation: movecls2 80s linear infinite; transition: transform .2s ease-in-out; } @keyframes movecls1 { 0% { transform: translate3d(0px, 0px, 0px); } 50% { transform: translate3d(200px, 0px, 0px); } 100% { transform: translate3d(0px, 0px, 0px); } } @keyframes movecls2 { 0% { transform: translate3d(100px, 0px, 0px); } 50% { transform: translate3d(0px, 0px, 0px); } 100% { transform: translate3d(100px, 0px, 0px); } } #lgc { width: auto; height: auto; font-family: Arial; font-size: 14px; color: #bebebe; text-align: center; display: inline; margin: 6px 20px 0 0; } #co1 a, #co4 a { font-weight: bold; color: #f4f4f4; text-decoration: none; } #co1 a:hover, #co4 a:hover { color: #ffffff; } #co4 { margin: 0px 0px 0px 20px; } #co2 a, #co3 a, #co5 a { font-weight: bold; color: #efb589; text-decoration: none; } #co3 a { padding: 0px 0px 0px 20px; } #co2 a:hover, #co3 a:hover, #co5 a:hover { color: #ffd200; } #lgc label { display: none; } .mc { position: absolute; top: 172px; left: 0px; width: 100%; height: 250px; padding-top: 50px; margin-top: -50px; scroll-snap-type: x proximity; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; display: flex; flex-direction: row; } .mc1, .mc1s, .mc1b, .mc1bs { float: left; width: 202px; height: 224px; margin: 0px 0px 0px 20px; } .mc1b, .mc1bs { position: absolute; left: 0px; margin: 0px 0px 0px -101px; } .mc1 a, .mc1s a, .mc1b a, .mc1bs a { float: left; position: relative; width: 202px; height: 224px; } .mc1i, .mc1x, .mc1h { position: absolute; left: 0px; width: 197px; height: 224px; } .mc1i { z-index: 2; top: 0px; background: -webkit-image-set(url(medias/mc1a.avif) 1x, url(medias/mc1ab.avif) 2x); background: image-set(url(medias/mc1a.avif) 1x, url(medias/mc1ab.avif) 2x); } .mc1 a:hover .mc1i, .mc1b a:hover .mc1i, .mc1s a .mc1i, .mc1bs a .mc1i {} .mc1x { z-index: 3; top: 175px; left: 10px; width: 157px; height: 55px;background: image-set(url(medias/mc1.avif) 1x, url(medias/mc1db.avif) 2x) center top no-repeat;} .mc1h { z-index: 0; bottom: -20px; left: 20px; width: 198px; height: 63px; } .mc1v, .mc2v, .mc3v, .mc4v, .mc5v { position: absolute; z-index: 3; top: 202px; left: 10px; width: 182px; height: 29px; background: url("medias/mcb.png"); } .mc2v { top: 187px; left: 30px; } .mc3v { top: 167px; left: -25px; } .mc4v { top: 222px; left: 28px; } .mc5v { top: 222px; left: 0px; } .mcvi { float: left; width: 26px; height: 17px; margin: 6px 0px 0px 6px; } .mcvx { float: left; width: 170px; height: 14px; text-align: center; font-size: 15px; color: #fff; margin: 5px 0px 0px 6px; font-family: lt; } .mc2, .mc2s, .mc2b, .mc2bs { float: left; width: 200px; height: 202px; margin: 15px 0px 0px 0px; } .mc2b, .mc2bs { position: absolute; left: 0px; margin: 15px 0px 0px -115px; } .mc2 a, .mc2s a, .mc2b a, .mc2bs a { float: left; position: relative; width: 200px; height: 202px; } .mc2i, .mc2x, .mc2h { position: absolute; left: 0px; width: 230px; height: 200px; } .mc2i { z-index: 2; top: 0px; background: -webkit-image-set(url(medias/mc2a.avif) 1x, url(medias/mc2ab.avif) 2x); background: image-set(url(medias/mc2a.avif) 1x, url(medias/mc2ab.avif) 2x); } .mc2 a:hover .mc2i, .mc2b a:hover .mc2i, .mc2s a .mc2i, .mc2bs a .mc2i {} .mc2x { z-index: 3; top: 160px; left: 40px; width: 186px; height: 55px; background: image-set(url(medias/mc2.avif) 1x, url(medias/mc2db.avif) 2x) center top no-repeat;} .mc2h { z-index: 0; bottom: -26px; left: 0px; width: 198px; height: 63px; } .mc3, .mc3s, .mc3b, .mc3bs { float: left; width: 131px; height: 171px; margin: 35px 0px 0px 80px; } .mc3b, .mc3bs { position: absolute; left: 0px; margin: 35px 0px 0px -66px; } .mc3 a, .mc3s a, .mc3b a, .mc3bs a { float: left; position: relative; width: 131px; height: 171px; } .mc3i, .mc3x, .mc3h { position: absolute; left: 0px; width: 132px; height: 182px; } .mc3i { z-index: 2; top: 0px; background: -webkit-image-set(url(medias/mc3a.avif) 1x, url(medias/mc3ab.avif) 2x); background: image-set(url(medias/mc3a.avif) 1x, url(medias/mc3ab.avif) 2x); } .mc3 a:hover .mc3i, .mc3b a:hover .mc3i, .mc3s a .mc3i, .mc3bs a .mc3i {} .mc3x { z-index: 3; top: 141px; left: -12px; width: 178px; height: 55px; background: image-set(url(medias/mc3.avif) 1x, url(medias/mc3db.avif) 2x) center top no-repeat;} .mc3h { z-index: 0; bottom: -25px; left: -20px; width: 198px; height: 63px; } .mc4, .mc4s, .mc4b, .mc4bs { float: left; width: 255px; height: 245px; margin: -20px 0px 0px 80px; } .mc4b, .mc4bs { position: absolute; left: 0px; margin: -20px 0px 0px -128px; } .mc4 a, .mc4s a, .mc4b a, .mc4bs a { float: left; position: relative; width: 255px; height: 245px; } .mc4i, .mc4x, .mc4h { position: absolute; left: 0px; width: 255px; height: 248px; } .mc4i { z-index: 2; top: 6px; background: -webkit-image-set(url(medias/mc4a.avif) 1x, url(medias/mc4ab.avif) 2x); background: image-set(url(medias/mc4a.avif) 1x, url(medias/mc4ab.avif) 2x); } .mc4 a:hover .mc4i, .mc4b a:hover .mc4i, .mc4s a .mc4i, .mc4bs a .mc4i {} .mc4x { z-index: 3; top: 195px; left: 22px; width: 200px; height: 55px;background: image-set(url(medias/mc4.avif) 1x, url(medias/mc4db.avif) 2x) center top no-repeat; } .mc4h { z-index: 0; bottom: -20px; left: -10px; width: 246px; height: 67px; } .mc5, .mc5s, .mc5b, .mc5bs { float: left; width: 182px; height: 220px; margin: -20px 0px 0px 20px; } .mc5b, .mc5bs { position: absolute; left: 0px; margin: -20px 0px 0px -128px; } .mc5 a, .mc5s a, .mc5b a, .mc5bs a { float: left; position: relative; width: 182px; height: 220px; } .mc5i, .mc5x, .mc5h { position: absolute; left: 0px; width: 182px; height: 220px; } .mc5i { z-index: 2; top: 30px; background: -webkit-image-set(url(medias/mc5a.avif) 1x, url(medias/mc5ab.avif) 2x); background: image-set(url(medias/mc5a.avif) 1x, url(medias/mc5ab.avif) 2x); } .mc5 a:hover .mc5i, .mc5b a:hover .mc5i, .mc5s a .mc5i, .mc5bs a .mc5i {} .mc5x { z-index: 3; top: 195px; left: 22px; width: 200px; height: 55px; background: image-set(url(medias/mc5.avif) 1x, url(medias/mc5db.avif) 2x) center top no-repeat;} .mc5h { z-index: 0; bottom: -20px; left: -10px; width: 246px; height: 67px; } .mc1j, .mc2j, .mc3j, .mc4j, .mc5j { position: absolute; z-index: 3; width: 64px; height: 59px; } .mc1j { top: 55px; left: -5px; } .mc2j { top: 40px; right: -55px; } .mc3j { top: 20px; right: -35px; } .mc4j { top: 75px; right: 0px; } .mc5j { top: 75px; right: -35px; } .soldout { position: absolute; z-index: 10; bottom: 20px; left: 50%; margin-left: -55px; width: 110px; height: 46px; } .mcsrv { position: absolute; left: 0px; z-index: 4; width: 178px; height: 199px; margin: 30px 0px 0px -89px; } .mcsv { float: left; width: 178px; height: 199px; } .mcsv a { float: left; width: 178px; height: 199px; background: url("medias/new_servera.avif"); } .mcsv a:hover { background: url("medias/new_serverb.avif"); filter: drop-shadow(0 0 2px #a841ff) drop-shadow(0 0 2px #794aff) drop-shadow(0 0 3px #ef78ff); transition: filter .12s ease; } .mcsh { position: absolute; z-index: 0; bottom: -18px; left: 25px; width: 198px; height: 63px; } .mcx0 { left: 140px; } .mcx1 { left: 395px; } .mcx2 { left: 635px; } .mcx3 { left: 880px; } .mcx4 { left: 1128px; } /* Couleurs par carte */ .mc a,.mc1s a,.mc2s a { --glow: #00ffe1; --bloom: rgba(0,255,225,.55); --edge: rgba(255,255,255,.95); } .mc3 a,.mc3s a { --glow: #20ff73; --bloom: rgba(32,255,115,.55); } /* Creeper */ .mc4 a,.mc4s a { --glow: #b37aff; --bloom: rgba(179,122,255,.55); } /* Dragon */ .mc5 a,.mc5s a { --glow: #00b8ff; --bloom: rgba(0,184,255,.55); } /* Wither */ .mc a { position: relative; } /* Applique le plasma serré sur l’illustration du perso */ .mc a:hover .mc1i,.mc1s .mc1i, .mc a:hover .mc2i,.mc2s .mc2i, .mc a:hover .mc3i,.mc3s .mc3i, .mc a:hover .mc4i,.mc4s .mc4i, .mc a:hover .mc5i,.mc5s .mc5i { filter: url(#plasmaEdge) drop-shadow(0 0 2px var(--edge)) drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 18px var(--bloom)); transition: filter .12s ease; } /* Halo très proche du corps, sans anneau */ .aura { position: absolute; inset: -7% -4% -6% -4%; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(45% 40% at 50% 46%, var(--bloom), transparent 62%), radial-gradient(65% 55% at 50% 50%, rgba(255,255,255,.25), transparent 70%); animation: breathe 1.6s ease-in-out infinite; filter: blur(0.4px); } .mc a:hover .aura { opacity: .9; } @keyframes breathe { 0% { opacity: .78; transform: scale(1); } 50% { opacity: .62; transform: scale(.992); } 100% { opacity: .78; transform: scale(1); } } /* Micro éclats qui jaillissent autour du perso, pas d’anneau */ .burst { position: absolute; inset: -10% -6% -8% -6%; pointer-events: none; opacity: 0; transform: scale(.96); mix-blend-mode: screen; filter: blur(.3px); background: radial-gradient(10px 10px at 20% 20%, var(--edge), transparent 60%), radial-gradient(8px 8px at 80% 25%, var(--glow), transparent 60%), radial-gradient(9px 9px at 25% 80%, var(--glow), transparent 60%), radial-gradient(7px 7px at 70% 75%, var(--edge), transparent 60%), radial-gradient(8px 8px at 50% 10%, var(--glow), transparent 60%), radial-gradient(9px 9px at 90% 55%, var(--edge), transparent 60%); } .mc a:hover .burst { animation: burst 700ms ease-out forwards; } @keyframes burst { 0% { opacity: .0; transform: scale(.94); filter: blur(1.2px); } 18% { opacity: .95; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.20); filter: blur(2px); } } /* Motion safe */ @media (prefers-reduced-motion: reduce) { .aura, .burst { animation: none !important; } } #mn { position: relative; width: 100%; height: 53px; margin-top: -53px; } .mnc { float: left; width: 1240px; height: 53px; } .mn1 a, .mn1s a, .mnc a, #cmbx a { float: left; width: auto; height: 53px; margin: 0 15px 0 15px; align-content: center; font: 21px MinecraftTen; color: #fff; text-align: center; } .mn1 a:hover, .mn1s a { color: #ffe8b3; } .mnc a { float: right; width: 180px; display: flex; justify-content: space-evenly; align-items: center; color: #fff; font-size: 26px; font-family: lt; } .mnc a:hover { color: #ffe8b3; } #cm { position: relative; z-index: 2; width: 100%; height: auto; background: url("medias/mm1.avif") top center; background-size: contain; } #cmg { height: auto; padding-bottom: 20px; } #cmgh { display: flex; justify-content: center; flex-wrap: wrap; flex-direction: row; } .cmghc { background: #00000036; display: flex; flex-direction: column; width: 50%; min-width: 348px; flex: 1; align-items: center; } .cmghp { height: 32px; font-family: Arial; margin: 15px 0px 5px 0px; } .cmghp:hover { cursor: pointer; } .cmghp:hover .cmghpi, .cmghp:hover .cmghpxb { opacity: 1; color: #bdbdbd; } .cmghpi { float: left; width: 32px; height: 32px; padding: 0 15px 0 15px; opacity: 0.4; } .cmghpx { float: left; width: 284px; height: 32px; } .cmghpxh { width: 100%; height: 20px; font-size: 18px; font-weight: bold; color: #ededed; text-align: right; padding: 0px 13px 0px 0px; } .cmghpxh h1 { margin-top: 0px; font-size: 18px; font-weight: bold; color: #ededed; } .cmghpxb { width: 100%; height: 12px; font-size: 12px; color: #8d8d8d; text-align: right; } #cmd { background: url("medias/gr1.avif"); background-size: cover; position: relative; z-index: 2; font-family: Arial; font-size: 17px; color: #dfdfdf; padding: 10px 10px 10px 10px; display: flex; flex-direction: column; justify-content: center; } #cmd p { margin-bottom: 20px; } .cmb { height: 30px; background: linear-gradient(0deg,rgba(33, 33, 33, 1) 0%, rgba(40, 40, 40, 1) 50%, rgba(33, 33, 33, 1) 100%); } /* Layout du bloc #cm en grille avec zones nommées */ #cm .c1 { display: grid; grid-template-columns: 720px auto; grid-template-areas: "cmg cmd" "cmb cmb"; align-content: start; column-gap: 0; } /* Attribution des zones */ #cmg { grid-area: cmg; } #cmd { grid-area: cmd; } #cm .cmb { grid-area: cmb; } /* Nettoyage d’éventuels floats hérités */ #cmg, #cmd, #cm .cmb { float: none; } @media (max-width:1100px) { #cm { height: auto; } #cm .c1 { grid-template-columns: 1fr; grid-template-areas: "cmd" "cmg" "cmb"; row-gap: 16px; } .cmghc { background: none; } /* #cmd en pleine largeur */ #cmd { grid-column: 1 / -1; width: calc(100% - 20px); max-width: none; height: auto; margin: 0; } /* si un style fixe existe sur l’intérieur, on le rend fluide aussi */ #cmd > div { width: 100%; max-width: none; height: auto; } /* Les autres blocs s’étirent aussi sur la colonne */ #cmg, #cm .cmb { grid-column: 1 / -1; } } /* Container du bouton */ #cmbx, .cmbx { position: relative; z-index: 10; width: 456px; height: 41px; margin: -10px 25px 0 auto; display: flex; align-items: center; justify-content: center; } /* Trapèze (fond) */ #cmbx::before, .cmbx::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #262626, #1d1d1d); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%); box-shadow: inset 0 1px 0 rgb(107 107 107 / 20%), inset 0 -1px 0 rgba(0, 0, 0, .4); z-index: 0; } /* Texte au centre */ #cmbx::after, .cmbx::after { content: "COMMANDEZ VOTRE SERVEUR"; position: relative; z-index: 1; display: block; font-family: 'lt'; font-weight: 700; font-size: 32px; letter-spacing: .02em; color: #fff; text-transform: uppercase; text-shadow: 0 1px 0 rgba(26,26,26,.6); line-height: 1; pointer-events: none; } /* Hover plus clair */ #cmbx:hover::before, .cmbx:hover::before { background: linear-gradient(to bottom, #4a4a4a, #222); } /* Responsive : largeur fluide, reste aligné à droite */ @media (max-width: 520px) { #cmbx, .cmbx { width: clamp(240px, 86vw, 456px); } #cmbx::after, .cmbx::after { font-size: clamp(22px, 4vw, 16px); } } #cb1, #cb1b { position: relative; z-index: 1; width: 100%; height: auto; background: url("medias/mm2.avif") top center; } #cb1b { height: 620px; } #cpp, #cpp2, #cpp3, #cpp4 { width: 100%; height: auto; min-height: 440px; background: url("medias/cc2.png") 0px 0px repeat-x; padding: 0px 0px 0px 0px; } #cpp { display: flex; align-items: flex-end; flex-direction: row; flex-wrap: wrap; justify-content: space-around; background: url("medias/c7.avif") center center no-repeat; row-gap: 20px; padding: 40px 0px 40px 0px; } #cpp3 { height: auto; } #cpp4 { background: none; height: auto; min-height: 340px; } .cppc { position: relative; width: 100%; height: auto; font-family: Arial; font-size: 17px; color: #c1c1c1; padding: 10px 10px 10px 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(18 18 18) 80%); } .cppc h2, #cb3mx h2, #cb4mx h2 { font-size: 32px; line-height: 36px; padding-bottom: 6px; color: #fff; font-family: "lt"; font-weight: normal; } .row { display: grid; margin: 0 auto; padding: 0 10px 0 10px; width: clamp(300px,100% - 20px,1240px); height: 100%; } #s4b { position: relative; z-index: 4; background: #133342; width: 100%; height: auto; padding: 20px 0 20px 0!important; } #s4bct { display: flex; align-items: center; width: 100%; height: 100%; justify-content: space-around; flex-wrap: wrap; row-gap: 20px; } /**/ /* === Grille des cartes === */ .circles-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 600px; min-width: 380px; margin: 0 auto; box-sizing: border-box; } /* 2 colonnes sous 600 px */ @media (max-width: 599px) { .circles-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; min-width: 0; } } /* === Carte CPU === */ .cpu-card { position: relative; font-family: lt, system-ui, Arial, sans-serif; width: auto; min-width: 0; overflow: hidden; } /* Titre */ .cpu-name { color: #89a3aa; font-size: 20px; line-height: 1.2; text-align: center; min-height: 1.5em; } .is-best .cpu-name { color: #6aecff; } /* === Cercle responsive === */ .ring-stack { position: relative; width: 100%; max-width: 120px; margin: 0 auto 0; aspect-ratio: 1 / 1; } .ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .ring circle.track { fill: none; stroke: #173845; stroke-width: 10; opacity: .9; } .ring circle.progress { fill: none; stroke: #00e4ff; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(0,228,255,.35)); stroke-dasharray: 326; stroke-dashoffset: 326; transition: stroke-dashoffset 1600ms cubic-bezier(.2,.8,.2,1); } /* Les autres CPU en doré */ .cpu-card:not(.is-best) .ring circle.progress { stroke: #ffca55; filter: drop-shadow(0 0 10px rgba(255,202,85,.35)); } /* Centre du cercle */ .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } /* Icône CPU */ .cpu-icon { width: 44px; height: 44px; margin-bottom: 6px; opacity: .95; filter: drop-shadow(0 1px 2px rgba(26,26,26,.35)); } /* Valeurs */ .cpu-score { color: #a2b8ba; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: .2px; } .is-best .cpu-score { color: #f1feff; } .cpu-percent { color: #98d1df; font-size: 12px; margin-top: 4px; } /* Badge meilleur score */ .best-badge { position: absolute; top: 10px; right: 10px; background: #02242c; border: 1px solid #0c4c59; color: #9df2ff; font-size: 11px; padding: 4px 8px; border-radius: 999px; box-shadow: 0 0 10px rgba(0,228,255,.25); } /* Sécurité: empêche tout élément interne d'imposer une largeur mini */ .circles-wrap *, .circles-wrap *::before, .circles-wrap *::after { box-sizing: border-box; min-width: 0; } /**/ .filter-buttons { display: flex; flex-wrap: wrap; gap: 12px; z-index: 5; flex: 1 1 auto; min-width: 0; padding: 0 10px; margin-bottom: 0; } .filter-button { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background-color: #1a1d299e; border: 2px solid #173441; border-radius: 10px; color: #b1c1cb; font-family: sans-serif; font-size: 17px; font-weight: bold; cursor: pointer; transition: background 0.2s, color 0.2s, border 0.2s; flex: 1 1 auto; } .filter-button span { float: right; font-weight: normal; color: #6e8da1; } .filter-button img { width: auto; height: 32px; } .filter-button:hover { background-color: #12141b; border: 2px solid #0096ff; color: #fff; } .filter-button.active { background-color: #113d51; } /* Sprites */ .sp-sponge,.sp-quilt,.sp-purpur,.sp-mohist,.sp-proxies,.sp-other, .sp-bedrock,.sp-ftb,.sp-craftbukkit,.sp-fabric,.sp-neoforge, .sp-forge,.sp-spigotmc,.sp-papermc,.sp-modrinth,.sp-vanilla, .sp-curse,.sp-latest { width: auto; height: 32px; background-image: url('medias/versions_sprites.webp'); } .sp-sponge { width: 27px; background-position: -347px -166px; } .sp-quilt { width: 32px; background-position: -240px -195px; } .sp-purpur { width: 32px; background-position: -292px -195px; } .sp-mohist { width: 32px; background-position: -10px -247px; } .sp-proxies { width: 32px; background-position: -62px -247px; } .sp-other { width: 30px; background-position: -347px -10px; } .sp-bedrock { width: 33px; background-position: -134px -195px; } .sp-ftb { width: 42px; background-position: -10px -195px; } .sp-craftbukkit { width: 32px; background-position: -114px -247px; } .sp-fabric { width: 30px; background-position: -347px -62px; } .sp-neoforge { width: 29px; background-position: -347px -114px; } .sp-forge { width: 42px; background-position: -72px -195px; } .sp-spigotmc { width: 45px; background-position: -234px -116px; } .sp-papermc { width: 32px; background-position: -166px -247px; } .sp-modrinth { width: 32px; background-position: -218px -247px; } .sp-vanilla { width: 33px; background-position: -187px -195px; } .sp-curse { width: 22px; background-position: -347px -218px; } @media(max-width:480px) { .bb { max-width: calc(100% - 157px); } .bb1 { max-width: calc(100% - 157px - 15%); } .bb2 { max-width: calc(100% - 157px - 19%); } .bb3 { max-width: calc(100% - 157px - 20%); } .bb4 { max-width: calc(100% - 157px - 26%); } } @media(min-width:480.01px) and (max-width:768px) { .bb { max-width: calc(100% - 227px); } .bb1 { max-width: calc(100% - 227px - 15%); } .bb2 { max-width: calc(100% - 227px - 19%); } .bb3 { max-width: calc(100% - 227px - 20%); } .bb4 { max-width: calc(100% - 227px - 26%); } } @media(min-width:768.01px) and (max-width:992px) { .bb { max-width: calc(100% - 228px); } .bb1 { max-width: calc(100% - 228px - 15%); } .bb2 { max-width: calc(100% - 228px - 19%); } .bb3 { max-width: calc(100% - 228px - 20%); } .bb4 { max-width: calc(100% - 228px - 26%); } } @media(min-width:992.01px) and (max-width:1200px) { .bb { max-width: calc(100% - 227px); } .bb1 { max-width: calc(100% - 227px - 15%); } .bb2 { max-width: calc(100% - 227px - 19%); } .bb3 { max-width: calc(100% - 227px - 20%); } .bb4 { max-width: calc(100% - 227px - 26%); } } @media(min-width:1200.01px) { .bb { max-width: calc(100% - 227px); } .bb1 { max-width: calc(100% - 227px - 15%); } .bb2 { max-width: calc(100% - 227px - 19%); } .bb3 { max-width: calc(100% - 227px - 20%); } .bb4 { max-width: calc(100% - 227px - 26%); } } @media(min-width:1680.01px) { .bb { max-width: calc(100% - 227px); } .bb1 { max-width: calc(100% - 227px - 15%); } .bb2 { max-width: calc(100% - 227px - 19%); } .bb3 { max-width: calc(100% - 227px - 20%); } .bb4 { max-width: calc(100% - 227px - 26%); } } #cb2, #cb2b { position: relative; z-index: 2; width: 100%; height: auto; background: url("medias/d1.png") top center; } .cbm { display: flex; width: 100%; height: auto; background-color: #131313a3; align-items: center; justify-content: space-around; flex-direction: row; flex-wrap: wrap; gap: 40px; padding: 40px 0 40px 0; } .cbm2 { display: flex; background-color: #131313a3; width: 100%; height: auto; flex-direction: column; flex-wrap: wrap; justify-content: center; } .cb2m, .cb2m2 { z-index: 3; width: 100%; height: 344px; background: url("medias/c5.avif") center top no-repeat; display: flex; align-items: flex-end; justify-content: center; } .cb2m2 { background: url("medias/c6.avif") center top no-repeat; } .cb2mx { width: 100%; height: auto; font-family: Arial; font-size: 17px; color: #c1c1c1; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(19, 19, 19, 1) 100%); padding: 0 10px 0 10px; } .cb2mx h2 { font-size: 32px; line-height: 36px; padding-bottom: 6px; font-family: "lt"; color: #fff; font-weight: normal; } #cb3, #cb5, #cb7, #cb8, #cb10 { position: relative; z-index: 1; width: 100%; height: auto; background: url("medias/d2.png") top center; padding: 0px 0 40px 0; } #cb8 { padding: 40px 0 60px 0; background: #151614; } #cb10 { padding: 40px 0 60px 0; background: #0b1720; } #cb5 { height: auto; padding: 40px 0 40px 0; } #cb3m,#cb9m { width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: center; flex-direction: row; flex-wrap: wrap; } #cb3mx,#cb4mx,#cb6mx,#cb7mx,#cb8mx,#cb9mx,#cb10mx,#cb11mx { position: relative; z-index: 3; width: 100%; height: auto; font-size: 17px; color: #c1c1c1; padding: 20px 10px 0 10px; } #cb4mx,#cb7mx { padding-left: 40px; } #cb7mx { margin-top: -60px; } #cb8mx,#cb10mx,#cb11mx { width: calc(100% - 20px); } #cb6mx { font-size: 50px; font-family: "lt"; color: #fff; margin-top: -144px; text-align: center; } #cb6mx p { line-height: 48px; } #cb6mx h2 { font-size: 46px; line-height: 48px; } #cb6mx b { font-size: 46px; font-family: "MinecraftTen"; color: #6fe900; line-height: 40px; } #cb6mx br { line-height: 0px; } #cb6mx span { color: #cfddeb; } #cb6mx label { display: block; margin: 40px 0 40px 0; } #cb6mx label p { font-size: 24px; line-height: 26px; color: #ededed; } #cb3mi { position: relative; top: 0; left: 0; width: 794px; height: 485px; background: url(medias/c3.avif)left top no-repeat; margin-left: -100px; } #cb6mi { position: relative; top: 0; left: 0; width: 100%; height: 495px; background: url(medias/mi1.avif)center top no-repeat; margin-left: -100px; } #cb7mx h3,#cb8mx h3,#cb9mx h3,#cb10mx h3,#cb11mx h3 { font-size: clamp(32px, 5vw, 46px); line-height: 44px; margin-bottom: 20px; text-align: center; font-family: lt; color: #fff; font-weight: bold; } #cb8mx h3 { text-align: center; } #cb7mx h3 span,#cb9mx h3 span,#cb10mx h3 span,#cb11mx h3 span { color: #6fe900; } #cb9mx { position: relative; padding: 0px 20px; color: #fff; border-radius: 16px; isolation: isolate; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; } .quotes-lines { display: grid; gap: 14px; margin: 0; padding: 0; text-align: center; } .quotes-lines .q { margin: 0; color: #ffdcc4; font-weight: 700; font-size: clamp(16px, 1.1vw + 12px, 22px); line-height: 1.5; text-wrap: balance; } .quotes-lines .q::before, .quotes-lines .q::after { font-weight: 900; font-size: 1.4em; line-height: 0; color: #ffdc67; text-shadow: 0 0 8px rgba(175,58,0,.35); vertical-align: -0.35em; } .quotes-lines .q::before { content: "“"; margin-right: .18em; } .quotes-lines .q::after { content: "”"; margin-left: .18em; } /* Halo de brume progressive */ #cb9mx::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( circle at center, rgba(26,26,26,0.9) 0%, rgba(26,26,26,0.9) 40%, rgba(26,26,26,0.8) 70%, rgba(26,26,26,0) 88% ); filter: blur(12px); } /* Le texte passe au-dessus */ #cb9mx > * { position: relative; z-index: 1; } /* Liste minimaliste, sans cadre */ /* Liste minimaliste 2 colonnes sans trous */ .ill-min { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 36px; } /* Item + espace pour l'icône */ .ill-min li { position: relative; padding-left: 28px; margin: 0 0 14px 0; line-height: 1.65; color: #cfeef5; font-size: clamp(18px, 3vw, 18px); break-inside: avoid; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; } .ill-min li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 12px; height: 12px; transform: rotate(45deg); border: 2px solid #00e4ff; border-radius: 3px; box-shadow: 0 0 0 2px rgba(0,228,255,.08), 0 0 10px rgba(0,228,255,.25); } .ill-min em { color: #9fd8e4; font-style: normal; } @media (max-width: 720px) { .ill-min { column-count: 1; column-gap: 0; } } #cb4, #cb6, #cb9 { position: relative; z-index: 1; width: 100%; height: auto; background: url("medias/d1.png") top center; } .cb6 { background: url(medias/mm1.png) top center!important; background-size: contain!important; padding: 20px 0 0 0; } .cb4m,.cb6m,.cb7m { float: left; width: 100%; height: auto; background-color: #131313a3; display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; } .cb6m { background: none; justify-content: flex-end; } .cb7m { background: none; } #cb4mi { position: relative; z-index: 0; top: 0px; right: 0px; width: 100%; height: 440px; background: url("medias/c10.avif")center top no-repeat; } #cb4me { position: absolute; z-index: 3; top: 388px; left: 400px; width: 142px; height: 28px; } #cb7mi { position: relative; z-index: 0; top: 0px; right: 0px; width: 100%; height: 502px; background: url("medias/mi2.avif")center top no-repeat; } #cb9mi { position: relative; z-index: 0; top: 0px; left: 0px; width: 100%; height: 413px; background: url("medias/mi3.avif")center top no-repeat; } #cf, #cf2, #cf3, #cf5 { float: left; position: relative; width: 100%; height: auto; background: url("medias/ftb.png") top center; background-size: contain; font-family: lt; } #cf2 { height: 340px; background: url("medias/ftbi.webp") top center; } #cf3 { height: 173px; background: url("medias/pmfb.png") top center; } #oms { float: left; width: 100%; height: 97px; margin: 85px 0px 0px 0px; font-family: lt; font-size: 30px; font-weight: normal; color: #fff; text-align: center; } #fcr, #fcr2,#fcr3 { float: left; width: 100%; height: 18px; } .c1 #fcr2 { margin: 76px 0px 0px 0px; } .c1p #fcr2 { margin: 88px 0px 0px 0px; } #fcr3 { margin-top: -30px; } #fcr a, #fcr2 a { color: #717171; } #fcr a:hover, #fcr2 a:hover { color: #000; } #fcrg { float: left; width: 100%; font-family: Arial; font-size: 12px; color: #000; display: flex; flex-direction: row; align-content: center; justify-content: center; align-items: center; flex-wrap: wrap; background: #f5f5f5; } #fcrgx { float: left; width: 168px; height: 14px; text-align: center; margin: 11px 0px 0px 5px; } #fcrgi { float: left; width: 384px; height: 22px; margin: 6px 0px 0px 0px; transform: scale(0.8); } #fcrd { float: left; width: 100%; height: 16px; font-family: Arial; font-size: 13px; color: #000; text-align: center; margin: 7px 0px 0px 0px; } #cf5 { height: auto; background: url("medias/ft3.png") bottom center; background-size: contain; } /* ========================= Overdiv Login – Minecraft Illimity ========================= */ :root { --mi-bg-1: #171b22; --mi-bg-2: #232c39; --mi-card: #121722; --mi-stroke: rgba(255,255,255,.08); --mi-soft: rgba(26,26,26,.35); --mi-text: #e7eef7; --mi-muted: #b9c4d1; --mi-accent: #007c3a; --mi-accent-2: #1dd1ff; --login-h: 46px; } /* ---------- Container (kills old sprite background) ---------- */ #fmgc { position: absolute; z-index: 10000; top: 72px; right: 0; width: 520px; box-sizing: border-box; padding: 14px; border-radius: 14px; background: radial-gradient(120% 110% at 0% 0%, rgba(255,255,255,.06), transparent 50%), linear-gradient(180deg, var(--mi-bg-1), var(--mi-bg-2)); box-shadow: 0 0px 40px rgba(26,26,26,.45), inset 0 1px 0 rgba(255,255,255,.05); color: var(--mi-text); backdrop-filter: blur(6px); border: 2px solid #4b5873; } /* ---------- NUKE old float-based layout that was breaking things ---------- */ #fmgh, #fmgcl, #fmgcp, #fmgbt, #fmgrm, #fmgcr { float: none !important; } #fmgc * { box-sizing: border-box; } /* ---------- Top row (inputs + button) ---------- */ #fmgh { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; } /* Inputs */ #fmgc .LoginInputClass { display: block; width: 100%; height: var(--login-h); padding: 0 14px; border-radius: 12px; border: 2px solid var(--mi-stroke); background: #171d25; color: var(--mi-text); font: 600 15px/var(--login-h) Arial, Helvetica, sans-serif; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } #fmgc .LoginInputClass::placeholder { color: #93a0b2; font-weight: 600; } #fmgc .LoginInputClass:focus { border-color: color-mix(in srgb, #1b3b45 60%, #fff); } /* Login button */ #fmgbt { display: flex; align-items: center; } #fmgbt .LoginClass { display: inline-flex; align-items: center; justify-content: center; height: var(--login-h); padding: 0 16px; border-radius: 12px; text-decoration: none; position: relative; font: 18px MinecraftTen; color: #0c2209; background: linear-gradient(180deg, #5cd653, #54c94b 55%, #4eb746); box-shadow: 0 6px 18px rgb(64 64 64), inset 0 1px 0 rgb(0 0 0 / 25%); border: 1px solid color-mix(in srgb, #00ff62 60%, #61ca53); transition: transform .12s ease, filter .2s ease, box-shadow .2s ease; white-space: nowrap; } #fmgbt .LoginClass:hover { filter: brightness(1.06); } #fmgbt .LoginClass:active { transform: translateY(1px); } /* ---------- Bottom row (stay connected + forgot) ---------- */ #fmgr { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 12px; flex-wrap: wrap; color: var(--mi-muted); font: 600 15px/1 Arial, Helvetica, sans-serif; padding-top: 8px; border-top: 1px solid var(--mi-stroke); } /* custom checkbox using your #LoginStay anchor */ #fmgrm { display: flex; align-items: center; gap: 10px; } #fmgrm a { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(180deg,#242a35,#1a1f2a); border: 1px solid var(--mi-stroke); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); position: relative; } #fmgrm a.insc4cOK { border-color: color-mix(in srgb, var(--mi-accent) 65%, #0a0); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mi-accent) 25%, transparent); } #fmgrm a { width: 10px!important; height: 30px!important; } #fmgrm a.insc4cOK::after { content: ""; position: absolute; inset: 4px; background: #94a1b1; border-radius: 4px; } #fmgrm label { cursor: pointer; user-select: none; color: var(--mi-text); opacity: .9; } /* forgot link */ #fmgcr a { color: var(--mi-text); opacity: .85; text-decoration: none; font-weight: 700; } #fmgcr a:hover { opacity: 1; color: var(--mi-accent-2); } /* ---------- Responsive: full-width sheet on mobile ---------- */ @media (max-width: 600px) { #fmgc { position: fixed; left: 0; right: 0; top: 56px; width: 100vw; border-radius: 0 0 16px 16px; padding: 14px 12px 16px; } #fmgh { grid-template-columns: 1fr; } #fmgbt .LoginClass { width: 100%; } #fmgr { justify-content: space-between; } } /* Offres */ #cc { float: left; position: relative; width: 100%; height: auto; background: url(medias/d1.png) top center; } #ch { float: left; position: relative; width: 100%; height: auto; background: url("medias/ofh.png"); background-size: contain; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 20px; padding: 20px 0 20px 0; } .chc { float: left; width: auto; height: auto; font-family: lt; transform: scale(0.9); margin: -5px; } .chcx { float: left; width: auto; min-width: 114px; height: auto; font-size: 28px; color: #cdcdcd; line-height: 20px; text-align: right; } .chcx span { font-size: 18px; color: #fff; } .chci { float: left; width: 40px; height: 41px; margin: -1px 0px 0px 8px; } #ccm { float: left; width: 100%; height: auto; font-family: lt; background: #0f0f0f96; } .ccline,.ccline2 { width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; background: #20141280; } .ccline2 { background: url(medias/ofnb.png) repeat-x; justify-content: space-between; padding: 20px 0 20px 0; row-gap: 20px; } #ccmg, #ccmg1, #ccmg2, #ccmg3,#ccmg4 { width: 280px; background: url(medias/gr1.avif); background-size: cover; } #ccmg1,#ccmg2,#ccmg3,#ccmg4 { height: auto; min-height: 95px; display: flex; flex-direction: row; align-items: center; padding: 20px 0 20px 0; } #ccmg2 { min-height: 35px; background: none; padding: 0; } #ccmg3 { padding: 10px 0 10px 0; } #ccmg4 { min-height: 124px; } .ccmgc1, .ccmgc2, .ccmgc3, .ccmgc4 { width: 280px; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; padding-left: 20px; align-items: center; align-content: center; } .ccmgi { float: left; height: 36px; font: 33px MinecraftTen; color: #ffffff; } .ccmgx, .ccmgx2,.ccmgx4 { width: 100%; height: 14px; font-family: lt; font-size: 15px; color: #d0d0d0; } .ccmgx2 { color: #d0d0d0; } .ccmgd { float: left; width: 420px; height: 23px; margin: 60px 0px 0px 0px; } .ccmgdi { float: left; width: 30px; height: 23px; } .ccmgdx { float: left; width: 320px; height: 14px; font-family: lt; font-size: 15px; margin: 3px 0px 0px 6px; } .ccmgdx a { float: left; width: 320px; height: 14px; color: #7d7d7d; } .ccmgdx a:hover { color: #4f4f4f; } .ccmgr { min-width: 300px; height: 32px; padding: 0 20px 0px 20px; display: flex; flex-direction: row; justify-content: flex-end; } .ccmgrx { float: left; width: 80px; height: 32px; font-family: lt; font-size: 17px; color: #d0d0d0; padding-top: 8px; } .ccmgri { float: left; width: 239px; height: 33px; } .ccmgri input { float: left; width: 231px; height: 32px; border: 1px solid #272727; border-radius: 9px; background: #2e2e2e52; padding: 4px 4px 2px 4px; font-family: 'lt'; font-size: 19px; color: #f0f0f0; text-align: center; } .ccmgri input:active,.ccmgri input:focus{border: 1px solid #6ba327;} #ccmd1 { height: 100%; min-height: 95px; min-width: 300px; padding: 20px 25px 20px 25px; background: #671f0b29; display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; width: calc(100% - 330px); } #ccmd2 { width: 100%; height: 701px; background: none; } #ccmd3 { min-width: 310px; height: auto; min-height: 95px; background: #546a5533; width: calc(100% - 320px); padding: 10px 20px 10px 20px; align-content: center; } #ccmd4 { width: calc(100% - 300px); height: auto; padding: 20px 10px 10px 10px; background: #222a356e; } @media (max-width:644px) { #ccmg1,#ccmd1,#ccmg2,#ccmg3,.ccmgr,#ccmd3 { width: 100%; justify-content: center; } #ccmg1 { padding: 10px 0 10px 0; } .ccmgx, .ccmgx2 { text-align: center; } .ccmgri { width: calc(100% - 80px); } .ccmgri input { width: 100%; } .ccmgc1, .ccmgc2, .ccmgc3 { width: calc(100% - 20px); flex-direction: column; align-content: center; } .ccmgc2 { margin-bottom: 30px; } #ccbh { padding-top: 20px; height: 70px; } } @media (max-width:752px) { #ccmd4 { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; } #ccmg4 { width: 100%; min-height: 55px; justify-content: center; } .ccmgc4 { width: 100%; flex-direction: column; align-content: center; } .ccmgc4 { width: 100%; flex-direction: column; align-content: center; } .ccmgx4 { text-align: center; } } #ccmdi input { float: left; width: clamp(200px, 50vw, 100%); height: 28px; background-color: #3b2926; border-radius: 9px; border: 1px solid #5d322d; padding: 6px 6px 6px 6px; font-family: 'lt'; font-size: 26px; color: #fff7e4; text-align: center; } #ccmdi input:active,#ccmdi input:focus { filter: url(#plasmaEdge) drop-shadow(0 0 1px rgb(155 125 25 / 95%)) drop-shadow(0 0 1px #ff4500) drop-shadow(0 0 1px rgb(154 84 55 / 55%)); } #ccmdx { float: left; width: 300px; font-size: 0px; color: #f0f0f0; margin: 0px 0px 0px 10px; background: #2d1e1c; border-radius: 9px; border: 1px solid #39211e; } #ccmdv { float: left; width: 100%; height: 696px; padding: 5px 0px 0px 0px; } .ccmdc, .ccmdcs { float: left; width: 105px; height: 106px; margin: 0px 5px 5px 0px; } .ccmdc a, .ccmdcs a { float: left; width: 105px; height: 88px; background: url("medias/cs.png") 0px 0px; padding-top: 18px; text-align: center; } .ccmdc a:hover, .ccmdcs a { background: url("medias/cs.png") 0px -106px; } #ccmdd { float: left; width: calc(100% - 20px); height: auto; padding: 8px; background: #111; border-radius: 9px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; column-gap: 20px; row-gap: 10px; } .ictc, .ictcs { width: auto; height: auto; } .ictc a, .ictcs a { width: auto; height: auto; font-size: 22px; font-weight: normal; color: #a7a7a7; text-align: center; } .ictc a:hover, .ictcs a { color: #e7cdb3; } #ict { float: left; width: 100%; height: auto; padding: 8px; background: #111; border-radius: 9px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; column-gap: 20px; row-gap: 10px; } #ict .ictc a, #ict .ictcs a { font-family: lt; font-size: 22px; } #ict2 { float: left; width: auto; min-width: 210px; height: 29px; padding: 0px 0px 0px 15px; } #opt { float: right; width: 100%min-width: 350px; height: auto; } .optc, .optcs, .optco, .optcos { float: left; width: 107px; height: 128px; } .optc a .optci, .optcs a .optci, .optcos a .optci, .optco a .optci { float: left; width: 107px; height: 84px; padding: 9px 0px 0px 0px; border-radius: 12px; text-align: center; } .optc a .optci img { opacity: 0.8; filter: alpha(opacity=80); } .optco a { cursor: default; } .optco a .optci { opacity: 0.2; filter: alpha(opacity=20); } .optco a .optcx { color: #304a5c; } .optc a:hover .optci, .optcs a .optci, .optcos a .optci { border-radius: 12px; filter: url(#plasmaEdge) drop-shadow(0 0 2px rgb(155 125 25 / 95%)) drop-shadow(0 0 2px #ff4500) drop-shadow(0 0 2px rgb(154 84 55 / 55%)); } .optc a:hover .optci img, .optcs a .optci img, .optcos a .optci img { opacity: 1; filter: alpha(opacity=100); border-radius: 12px; } .optcs a .optcx, .optcos a .optcx { color: #9fc8c8; text-shadow: 0 0 8px #4a4a4a, 0 0 8px #4a4a4a; } .optci { float: left; position: relative; width: 107px; height: 91px; text-align: center; } .opr { position: absolute; z-index: 4; bottom: 3px; right: 8px; width: 27px; height: 27px; } .oprlf { position: absolute; z-index: 4; top: 30px; left: 12px; width: 83px; height: 54px; text-align: center; color: #ffd500; font-family: lt; line-height: 18px; font-size: 20px; text-shadow: 0 0 8px #de0000, 0 0 8px #de0000; } .optcx { float: left; width: 107px; height: 30px; text-align: center; font-size: 12px; line-height: 13px; color: #456a84; margin-top: 6px; } .optc a:hover .optci span, .optcs a .optci span { opacity: 1; transition: opacity 0.5s ease-in-out; } #ccb { float: left; width: 100%; height: auto; background: url("medias/ofnb.png") repeat-x; } #ccbh { float: left; width: 100%; height: 90px; display: flex; align-items: center; } #ccbm { width: calc(100% - 40px); height: auto; padding: 20px 20px 40px 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 5px; } .ccbmc { max-width: calc(33% - 12px); min-width: 288px; } .ccbmci { float: left; width: 28px; height: 27px; } .ccbmcx { float: left; width: auto; height: 27px; margin: 5px 0px 0px 4px; font-family: lt; font-size: 19px; color: #cdcdcd; } .ccodn, .ccodns, .ccodno, .ccodnos { float: left; width: 91px; height: 134px; transform: scale(0.9); margin: -5px 0px -5px 0px; } .ccodni { float: left; width: 91px; height: 82px; background: #0a0b0d; border-radius: 12px; } .ccodni img { border-radius: 12px; } .ccodn a, .ccodns a, ccodno a, .ccodnos a { float: left; width: 91px; height: 134px; opacity: 0.8; filter: alpha(opacity=80); } .ccodno a .ccodni { opacity: 0.2; filter: alpha(opacity=20); } .ccodno a .ccodnx { color: #333; } .ccodn a:hover, .ccodns a { opacity: 1; filter: alpha(opacity=100); } .ccodn a:hover .ccodni, .ccodns .ccodni { filter: url(#plasmaEdge) drop-shadow(0 0 2px rgb(155 125 25 / 95%)) drop-shadow(0 0 2px #ff4500) drop-shadow(0 0 2px rgb(154 84 55 / 55%)); } .ccodnx { float: left; position: relative; z-index: 4; width: 91px; height: 32px; font-size: 13px; font-weight: bold; color: #cdcdcd; text-align: center; margin-top: 10px; } .ccodns .ccodnx { color: #fbd32d; } #fto { float: left; width: 100%; height: 246px; background: url("medias/fto.png") repeat-x; } #cfo { float: left; width: 100%; height: 30px; font-family: lt; font-size: 26px; color: #c5c5c5; text-align: center; margin-top: 44px; } #cfp { float: left; width: 100%; height: 70px; margin: 28px 0px 0px 0px; } .cfpc { width: 100%; height: 41px; margin: 0; justify-self: center; justify-content: center; display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; background: linear-gradient(0deg, rgba(41, 41, 41, 1) 0%, rgba(38, 38, 38, 1) 50%, rgba(32, 32, 32, 1) 100%); border-top: 14px solid #080808; } .cfpc a { float: left; width: 299px; height: 41px; background: url("medias/coma.png"); } .cfpc a:hover { background: url("medias/comb.png"); } .cfpx { justify-self: center; width: 270px; height: 72px; background: url("medias/ftpr.png") center top no-repeat; font-family: lt; font-size: 32px; font-weight: bold; padding: 14px 0px 0px 60px; text-align: center; margin: 0; } .cfpp { float: left; width: 160px; height: 34px; color: #bdd8dc; text-align: center; } .cfpp span { color: #fff; } .cfpr { float: left; width: auto; height: 32px; font-size: 32px; font-weight: bold; color: #ffba00; margin: 0px 0px 0px 42px; } .cfibt { width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 60px; row-gap: 40px; } .cfis { float: left; width: 265px; height: 48px; margin: -10px 0 60px 0; } .cfis a { float: left; width: 265px; height: 48px; background: url("medias/insc.png") 0px 0px; } .cfis a:hover { background: url("medias/insc.png") 0px -48px; } .cfcn { float: left; width: 265px; height: 48px; margin: -10px 0 0 0; } .cfcn a { float: left; width: 265px; height: 48px; background: url("medias/cnx.png") 0px 0px; } .cfcn a:hover { background: url("medias/cnx.png") 0px -48px; } .cfrg { float: left; width: 100%; height: 48px; margin: -10px 0 80px 0; display: flex; justify-content: center; } .cfrg a { float: left; width: 341px; height: 48px; background: url("medias/valider.png") 0px 0px; } .cfrg a:hover { background: url("medias/valider.png") 0px -48px; } /* Tutoriels */ #cc2,#cc2b { float: left; position: relative; width: 100%; height: auto; background: #171717 url(medias/oc2.png) top center repeat-x; } #cc2b{background: url(medias/pah10.avif) top center repeat-x;} #cctc { width: 100%; height: auto; background: url("medias/tcg.png"); background-size: cover; padding-bottom: 10px; } .cctc1 { width: 100%; height: auto; background: url("medias/tch.png"); background-size: cover; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-around; align-items: center; } .cctci { width: 100%; height: 28px; margin: 26px 0px 0px 12px; } .cctcx { width: 100%; height: 14px; font-family: lt; font-size: 15px; color: #4f4f4f; margin: 0 0 20px 12px; } .cctcm, .cctcm2 { width: auto; height: 29px; padding: 2px 20px 0 20px; } .cctcm2 { height: 5px; background: none; visibility: hidden; } .cctcmi { float: left; width: 20px; height: 20px; margin: 2px 6px 0px 6px; } .cctcmx, .cctcmxs { float: left; width: auto; height: 16px; font-family: lt; font-size: 20px; font-weight: bold; color: #64514c; } .cctcmx a, .cctcmxs a { float: left; width: auto; height: 16px; color: #64514c; } .cctcmx a:hover, .cctcmxs a { color: #446db2; } #cctcb { position: absolute; z-index: 4; top: 440px; left: -21px; height: 350px; display: none; } #cctd,#cctd2,#cctd3 { float: left; width: 100%; height: auto; background: #0000003b; } #cctd2{max-width:900px;background:none;} #cctd3{max-width:auto;background:none;} #cctdh,#cctdh2 { float: left; width: 100%; height: auto; min-height: 79px; background: url("medias/th.png"); } #cctdh2{background:none;} #cctdhi { float: right; width: auto; height: 40px; margin: 20px 15px 0px 0px; } #cctdhi input { float: left; width: 320px; height: 28px; background: #0a0a0a; border: 1px solid #1f1f1f; border-radius: 12px; padding: 6px 6px 6px 6px; font-family: 'lt'; font-size: 26px; color: #b3b3b3; text-align: center; } #cctdhi input::placeholder { color: #373737; } #cctdhm { float: left; width:calc(100% - 20px); height: 34px; margin: 30px 0px 0px 20px; } .cctrc { float: left; width: auto; height: 18px; margin: 0px 20px 0px 0px; } .cctrci { float: left; width: 26px; height: 18px; margin: 1px 4px 0px 0px; } .cctrcx { float: left; width: auto; height: 14px; font-family: lt; font-size: 19px; font-weight: bold; } .cctrc a { float: left; width: auto; height: 14px; color: #e1e1e1; opacity: 0.9; filter: alpha(opacity=90); } .cctrc a:hover { color: #fff; opacity: 1; filter: alpha(opacity=100); } #cctdm { float: left; width: calc(100% - 40px); height: auto; min-height: 640px; padding: 20px; font-family: Arial; } .faqs { float: left; height: auto; margin: 10px 0px 15px 18px; font-family: lt; } .faqsk { float: left; width: 100%; margin-right: 15px; height: auto; padding: 14px 0px 0px 0px; font-family: lt; font-size: 17px; color: #ffae00; text-shadow: 0 0 32px #ff1800, 0 0 32px #ff1800; } .faqsr { float: left; width: calc(100% - 24px); height: auto; padding: 16px 12px 16px 12px; font-size: normal; color: #cdcdcd; line-height: 17px; background-color: #121111; border-left: 2px solid #3a3a3a; font-family: arial; } .faqsr span { color: #3ed0ff; } .faqsr a { color: #8be3ff; } .faqsr a:hover { color: #ffc000; } .faqsr p { margin: 0px; } .blogc{position: relative;display: grid;grid-template-columns: repeat(12, 1fr);padding: 0 10px 0 10px;width:calc(100% - 20px);height: 100%;gap:0px;} .blogc a{grid-column-end: span 12;margin-top:20px;background: url(medias/d1.png) top center;border-radius:12px;overflow:hidden;} .blogc a:hover{text-shadow:0 0 50px #fff;} .blogc a:hover img{transform: translate3d(0px, -6px, 0) scale(1.05);filter: contrast(110%); } .blogc h2{font: 400 34px MinecraftTen;color: #fff;text-shadow: 0 0 2px #007cca;text-align:left;padding:5px 10px 5px 10px} .blogc p{font: 17px lt;color: #c4c4c4;text-align:left;padding:0 10px 10px 10px;} .blogc a img{ transition: transform 0.3s ease;} #bloghd{width:100%;font:400 52px MinecraftTen;height:auto;color:#ffe8b3;padding:40px 0 0 0;text-align:center;} #bloghd span{position:absolute;font:400 30px lt;color: #fff;padding:0 10px;border-radius:12px;transform: rotate(-17deg);margin: 12px 0 0 0;border: 2px solid #b5461b;background: #912e00;} /* =============== LISTE DES TUTORIELS =============== */ /* Conteneur : grille responsive en Flex */ #listTutorials { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: stretch; justify-content: flex-start; width: 100%; } /* Cartes : on supprime l'ancien layout et on laisse flex gérer */ #listTutorials .cctq { float: none; flex: 1 1 clamp(300px, calc(50% - 12px), 600px); min-width: 0; display: block; } /* Carte cliquable */ #listTutorials .cctq a { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 14px; width: 100%; box-sizing: border-box; border: 2px solid #343434; border-radius: 12px; background: linear-gradient(to bottom, rgba(1, 1, 1, .82) 0%, rgba(30, 30, 30, .82) 10%, rgba(26, 26, 26, .82) 50%, rgba(30, 30, 30, .82) 90%, rgba(1, 1, 1, .82) 100%), radial-gradient(circle at center, rgba(67, 49, 49, .80) 0%, rgba(34, 28, 28, .80) 70%, rgba(0, 0, 0, .80) 100%); text-decoration: none; transition: border-color .25s ease, box-shadow .25s ease, transform .06s ease; } #listTutorials .cctq a:hover { border-color: #135a00; box-shadow: 0 0 0 1px rgba(19,90,0,.25) inset, 0 4px 18px rgba(26,26,26,.35); } #listTutorials .cctq a:active { transform: translateY(1px); } /* Icône */ #listTutorials .cctqi { flex: 0 0 36px; height: 36px; display: flex; align-items: center; justify-content: center; } #listTutorials .cctqi img { width: 36px; height: 36px; display: block; } /* Titre */ #listTutorials .cctqx { flex: 1 1 auto; min-width: 0; color: #cdcdcd; font-weight: 700; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --------- Styles existants (facultatif, conservés) ---------- */ .cctdmt, .cctdmt2, .cctdmt3 { width: 100%; height: auto; font-family: 'MinecraftTen'; font-size: 26px; color: #f5f5f5; } .cctdmt2 { text-align: center; font-family: lt; } .cctdmt3 {font-size:42px;} #cctdmc { width: 100%; height: auto; font-size: 13px; color: #cbcbcb; margin: 0 0 0 18px; } #cctdme,#cctdme2 { position: relative; width:100%; height: auto; margin: 20px 0 0 0; } #cctdme div { width: 100%; min-height: 580px; font-family: Arial; font-size: 17px; line-height: 20px; color: #cbcbcb; } #cctdme2 div{margin-top: 15px;font-size: 1.25rem;line-height: 1.8;color: #cbcbcb;} #cctdme img { width: 100%!important; height: auto!important; max-width: 680px; border-radius: 12px; } #cctdme2 h1{color: #fff;text-shadow: 0 0 2px #007cca;margin:0 0 40px 0;} #cctdme2 h2{color: #fff;text-shadow: 0 0 2px #007cca;padding:30px 0 0 0;line-height:38px;} #blcontents,#modcontents { margin-top:15px; font-size: 1.25rem;line-height: 1.8; color:#98d1df;} #cctdme2 h2,#cctdme2 h3{font-family:"MinecraftTen";color:#e6e6e6;font-size:36px;padding:20px 0 20px 0;} #cctdme2 h3,#bgg h3{font:32px lt;color:#2ecc71;line-height: 34px;} #cctdme2 strong,#bgg strong{color:#fff6e1;} #cctdme2 i{border:none;padding:0;opacity:1;} #cctdme2 ol,#cctdme2 ul{margin-left:30px;} #cctdme2 li{list-style-type: square;} #cctdme2 h1{font-size:44px;} #cctdme2 hr{margin:10px 0;} #cctdme2 a{font:400 22px lt;color:#fff;margin:10px 0;} /* Palette (adapter si besoin) */ :root { --mi-cyan: #00e59b; --mi-sky: #58d7ff; } /* Images du blog */ #cctdme img,#cctdme2 img { display: block; width: 100% !important; height: auto !important; max-width: 680px; justify-self: center; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(26,26,26,.18), 0 10px 30px rgba(26,26,26,.55), 0 0 0 0 rgba(0,229,155,0); transform: translateZ(0); filter: saturate(1.02) contrast(1.01); transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, opacity .25s ease; opacity: 0; animation: mi-img-in .45s ease-out .05s forwards; } #cctdme2 img {margin:20px 0;} #cctdme img:hover,#cctdme2 img:hover { transform: translateY(-4px) scale(1.015); filter: saturate(1.08) contrast(1.03) brightness(1.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px rgba(26,26,26,.6), 0 0 28px rgba(0,229,155,.15), 0 0 8px rgba(88,215,255,.10); } @keyframes mi-img-in { from { opacity: 0; transform: translateY(8px) scale(.98); filter: saturate(.92); } to { opacity: 1; transform: none; } } .cctdmv { float: left; width: 265px; height: 48px; margin: 20px 0 0 307px; } .cctdmv a { float: left; width: 265px; height: 48px; background: url("medias/valider2.png") 0 0; } .cctdmv a:hover { background-position: 0 -48px; } #cctdmh { float: left; width: 880px; height: auto; border-bottom: 4px solid #1f1e1e; padding-bottom: 30px; margin: 0 0 20px 0; } .cctmn { float: left; width: 880px; height: 40px; margin: 20px 0 0 18px; } .cctmnx { float: left; width: 210px; height: 26px; font-family: lt; font-size: 19px; color: #f5f5f5; margin-top: 10px; } .cctmni, .cctmns { float: left; width: 401px; height: 40px; } .cctmni input { float: left; width: 635px; height: 25px; background: url("medias/tui.png"); background-color: transparent; border: 0; padding: 9px 6px 6px 10px; font-family: lt; font-size: 19px; color: #f5f5f5; text-align: left; } .cctmns { float: left; width: 385px; height: 25px; background: url("medias/tus.png"); background-color: transparent; border: 0; padding: 9px 6px 6px 10px; font-family: lt; font-size: 19px; color: #f5f5f5; text-align: left; } /* Petit affinage mobile */ @media (max-width:420px) { #listTutorials { gap: 12px 16px; } #listTutorials .cctqx { font-size: 13px; } } a:focus-visible, input:focus-visible { outline: 2px solid #00e4ff; outline-offset: 2px; } /* Signup */ #sn, #sn2, #sn3 { float: left; position: relative; width: 100%; height: auto; background: url("medias/og.png") top center; } #sn { background: url(medias/og.png) 0 -60px; background-size: contain; } .isi { float: left; width: 100%; height: 140px; margin: 62px 0px 0px 0px; } .isih { float: left; width: 100%; height: 50px; text-align: center; font: 42px MinecraftTen; color: #fff; } .isib { float: left; width: 100%; height: 14px; text-align: center; font-family: lt; font-size: 15px; color: #d5d5d5; } .ins2 input:hover,.ins2 input:active,.ins1 input:hover,.ins1 input:active { filter: url(#plasmaEdge) drop-shadow(0 0 0px rgb(155 125 25 / 95%)) drop-shadow(0 0 0px #ff4500) drop-shadow(0 0 0px rgb(154 84 55 / 55%)); } .insc1 { float: left; position: relative; width: auto; height: 80px; } .insc { float: left; width: 43px; height: 41px; margin: 7px 4px 0px 0px; } .ins1i { float: left; width: auto; height: 57px; } .ins1i input { float: left; width: clamp(250px, 50vw, 347px); height: 52px; border: 0px solid black; background: url("medias/ipt9.png"); background-size: cover; background-color: transparent; font-family: "lt"; font-size: 22px; font-weight: bold; color: #e7cdb3; text-align: center; padding: 5px 6px 0px 6px; } .insx { position: absolute; z-index: 6; top: -12px; left: 70px; width: auto; height: 16px; font-family: lt; font-size: 19px; color: #dacbbd; } .insc2, .insc3 { position: relative; width: auto; height: 80px; } .ins2i { float: left; width: auto; height: 57px; } .ins2i input { float: left; width: clamp(300px,50vw,517px); height: 52px; border: 0px solid black; background: url("medias/ipt10.png") center center; background-size: cover; background-color: transparent; font-family: "Arial"; font-size: 16px; font-weight: bold; color: #bfbfbf; text-align: center; padding: 5px 6px 0px 6px; } .ins3i { float: left; width: auto; height: 57px; } .ins3i input { float: left; width: clamp(300px,50vw,797px); height: 52px; border: 0px solid black; background: url("medias/ipt11.png") center center; background-size: cover; background-color: transparent; font-family: "Arial"; font-size: 16px; font-weight: bold; color: #bfbfbf; text-align: center; padding: 5px 6px 0px 6px; } .insc4 { float: left; width: auto; height: 27px; margin: 15px 0 50px 0; display: flex; } .insc4c { float: left; width: 30px; height: 27px; margin: -6px 5px 0px 0px; } .insc4c a { float: left; width: 30px; height: 27px; background: url("medias/chk.png") 0px 0px; text-decoration: none; } .insc4c a:hover, .insc4c a.insc4cOK { background: url("medias/chk.png") 0px -27px; } .insc4n { float: left; width: auto; height: 14px; font-family: lt; font-size: 17px; color: #d5d5d5; margin-top: -2px; } .cnt { float: left; width: 288px; height: 58px; margin: 20px 0px 20px 466px; } .cnt a { float: left; width: 313px; height: 47px; background: url("medias/create.png") 0px 0px; font-size: 16px; color: #c5a9a1; text-align: center; padding: 20px 0px 0px 0px; } .cnt a:hover { background: url("medias/create.png") 0px -67px; } .ins1,.ins2 { padding: 40px 0; width: 100%; max-width: 900px; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 20px; align-content: flex-start; justify-content: center; } .insp { position: absolute; z-index: 6; bottom: 5px; right: 50px; width: 138px; height: 18px; } .insp a { float: left; width: 138px; height: 18px; font-family: lt; font-size: 17px; color: #cdcdcd; } .insp a:hover { color: #fff; } .insc5 { float: left; width: 100%; height: 27px; margin-top: 20px; display: flex; justify-content: center; } /* Login */ #sn2 { height: 520px; } /* Recovery */ #sn3 { height: 375px; } .pwf { float: left; width: 100%; height: 42px; margin: 15px 0px 22px 0; font-family: Arial; font-weight: bold; font-size: 12px; display: flex; justify-content: center; } .pwfi { float: left; width: 29px; height: 27px; } .pwfx1, .pwfx2 { float: left; width: 300px; height: 14px; margin: 8px 0px 0px 4px; color: #d1d1d1; } .pwfx2 { color: #ffe0c1; } /* Tutorials */ #fqbg { position: absolute; margin-top: -411px; left: 20px; z-index: 1; width: 295px; height: 405px; } #fqbd { position: absolute; margin-top: -215px; right: 18px; z-index: 1; width: 192px; height: 210px; } .ctuto { float: left; position: relative; width: 1050px; height: 530px; font-family: Arial; margin: 30px 0px 0px 81px; } .yc { float: left; width: 185px; height: 168px; margin: 6px 0px 0px 18px; } .ycv { float: left; width: 185px; height: 110px; } .ycv a { float: left; width: 185px; height: 104px; margin: 3px 0 0 6px; opacity: 0.9; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); filter: alpha(opacity=90); } .ycv a:hover { opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); } .ycx { float: left; width: 185px; height: auto; margin: 4px 0px 2px 0px; } .ycx a { float: left; width: 169px; height: 30px; font-size: 12px; overflow: hidden; font-weight: bold; color: #02b7d6; padding: 0px 8px 0px 8px; } .ycx a:hover { color: #ff7e00; } .ycy { float: left; width: 169px; height: 14px; font-size: 11px; padding: 0px 8px 0px 8px; } .ycyg { float: left; width: auto; height: 14px; color: #748c9f; } .ycyd { float: right; width: auto; height: 14px; } .ycyd a { float: left; width: auto; height: 14px; color: #748c9f; } .ycyd a:hover { color: #fff; } .youtb { float: left; width: 365px; height: 60px; margin: 32px 0px 10px 435px; } .youtbi { float: left; width: 135px; height: 47px; } .youtbx { float: left; width: 215px; height: 24px; margin: 19px 0px 0px 12px; } .youtbx a { float: left; width: 215px; height: 24px; font-size: 13px; color: #98d1df; } .youtbx a:hover { color: #fff; } .sg2, .sg2b, .sg2c { float: left; position: relative; width: 100%; height: 595px; background: url("medias/siobg2.png"); } .sg2b { height: 300px; } .sg2c { height: 455px; } .sgo { position: absolute; z-index: 0; top: -7px; left: 50%; width: 582px; height: 24px; margin-left: -291px; background: url("medias/sgo.png"); } .sg3 { float: left; position: relative; width: 100%; height: 120px; background: url("medias/sg3.png"); } .fbr2 { position: absolute; z-index: 10; top: -15px; left: 403px; width: 414px; height: 7px; } .sg4 { float: left; position: relative; width: 100%; height: 128px; background: url("medias/siobgh.png"); } #wclh, .wclh { float: left; width: 100%; height: 50px; font-size: 42px; font-weight: bold; text-align: center; color: #fff; margin-top: 28px; } #wclb, .wclb { margin-top: 6px; } #wclb span, .wclb span { color: #ffba00; } .wclb a { font-size: 16px; font-weight: bold; color: #3eb1c4; text-align: center; } .wclb a:hover { color: #d1d1d1; } .cotx, .cotx2 { float: left; width: 100%; height: 93px; padding: 18px 0px 0px 0px; overflow: hidden; font-family: Arial; text-align: center; font-size: 12px; color: #b7b7b7; margin: 20px 0 0 0; } .cotx2 { height: 53px; padding: 18px 0px 0px 0px; } .cotm, .cotm2, .cotm3 { float: left; width: 100%; height: 66px; display: flex; justify-content: center; margin: 30px 0 0 0; } .cotm2 { margin: 75px 0 0 0; } .cotm3 { margin: 55px 0 0 0; } .cotm input, .cotm2 input, .cotm3 input { float: left; width: clamp(300px,50vw,461px); height: 60px; border: 0px solid black; background: url("medias/cdim.png")center center; background-size: cover; background-color: transparent; font-family: lt; font-size: 18px; font-weight: bold; color: #e3e3e3; text-align: center; padding: 6px 6px 0px 6px; filter: url(#plasmaEdge) drop-shadow(0 0 2px rgb(155 125 25 / 95%)) drop-shadow(0 0 2px #ff4500) drop-shadow(0 0 2px rgb(154 84 55 / 55%)); } .cots { float: left; position: relative; z-index: 4; width: 100%; height: 20px; font-size: 18px; text-align: center; color: #FFC000; margin: 20px 0px 0px 0px; } .cotp { float: left; width: 100%; height: 110px; text-align: center; } .cotpc { width: 154px; height: 77px; margin: 20px 7px 0px 7px; display: inline-block; } .cotpc a { float: left; width: 154px; height: 64px; background: url("medias/cdc.png"); text-align: center; padding: 13px 0px 0px 0px; opacity: 0.90; filter: alpha(opacity=90); } .cotpc a:hover { opacity: 1; filter: alpha(opacity=100); } #nc2 { float: left; width: 1190px; height: 53px; margin: -82px 0px 0px 27px; } .srv, .srv2 { float: left; width: 150px; height: 75px; margin: 4px 9px 0px 8px; } .srv a, .srv2 a { float: left; width: 150px; height: 75px; opacity: 0.8; filter: alpha(opacity=80); font-size: 13px; line-height: 14px; color: #98d1df; text-align: center; } .srv a:hover, .srv2 a:hover { opacity: 1; filter: alpha(opacity=100); } .srv span, .srv2 span { color: #357f8b; font-size: 11px; } .srv img, .srv2 img { margin: 0px 0px 11px 0px; } .srv2 img { margin: 0px 0px 18px 0px; } #f4a { position: relative; z-index: 2; top: 8px; width: 1220px; height: auto; left: 50%; margin-left: -610px; background-position: top center; } .ctfq { position: relative; z-index: 4; width: 1220px; height: auto; } #nsc2 a { color: #d9d9d9; } #nsc2 a:hover { color: #fff; } .cfaq { float: left; position: relative; width: 1100px; height: auto; font-family: Arial; margin: 12px 0px 20px 51px; } .fc { float: left; width: 1239px; position: relative; height: auto; margin: -20px 0px 0px -60px; padding-bottom: 20px; background: url("medias/ttb.png"); } .fcg, .fcg2 { float: left; position: relative; z-index: 4; width: 316px; height: 356px; min-height: 700px; background: url("medias/fqmn.png"); padding: 0px; margin: 6px 10px 0px 0px; font-family: lt; } .fcg2 { margin: 6px 10px 0px 0px; } .fcgt { float: left; width: 316px; height: 89px; background: url("medias/tch.png"); } .fcgti { float: left; width: 316px; height: 28px; margin: 26px 0px 0px 12px; } .fcgtx { float: left; width: 316px; height: 14px; font-size: 12px; color: #4f4f4f; margin: 0px 0px 15px 12px; } .fm, .fmo { float: left; width: 304px; height: 34px; background: url("medias/tcbr.png") 0px 0px; font-size: 15px; color: #64514c; margin: 0px 0px 8px 10px; } .fm a, .fmo a { float: left; width: 294px; margin-left: 10px; height: 20px; margin-top: 10px; color: #64514c; } .fm a:hover, .fmo a { color: #446db2; } .fme, .fmeo { float: left; width: 304px; height: 34px; background: url("medias/tcbr.png") 0px 0px; margin: 0px 0px 8px 10px; } .fme a, .fmeo a { float: left; width: 294px; margin-left: 10px; height: 34px; font-size: 13px; color: #217a89; padding: 4px 0px 0px 0px; } .fme a:hover .fmex, .fmeo a .fmex { color: #446db2; } .fmei { float: left; width: 19px; height: 18px; opacity: 0.7; filter: alpha(opacity=70); } .fme a:hover .fmei, .fmeo a .fmei { opacity: 1; filter: alpha(opacity=100); } .fmex { float: left; width: 136px; height: 15px; font-size: 13px; color: #64514c; margin: 1px 0px 0px 5px; } .fcgtb { position: absolute; width: 367px; z-index: 5; height: 350px; bottom: -100px; left: -21px; } .fcd { float: left; width: 900px; height: auto; } .fcdx { position: absolute; width: 921px; height: 79px; margin-left: -8px; background: url("medias/th.png"); } .fcdh { float: left; width: 900px; height: 52px; margin-top: 35px; } .fcdhg { float: left; width: 400px; height: 33px; } .fe { float: left; width: auto; height: 26px; margin: 0px 15px 0px 0px; font-family: lt; } .fe a { float: left; width: auto; height: 26px; font-size: 13px; color: #e1e1e1; } .fe a:hover, .fexb { color: #fff; } .feia, .feib { float: left; width: 28px; height: 18px; opacity: 0.7; filter: alpha(opacity=70); } .feib, .fe a:hover .feia { opacity: 1; filter: alpha(opacity=100); } .fexa, .fexb { float: left; width: auto; height: 14px; margin: 2px 0px 0px 3px; } .fcdhd, .fcdhd2 { float: right; width: 404px; height: 50px; margin: -10px -27px 0px 0px; } .fcdhd2 { margin: -10px -27px 0px 0px; } .fsi { float: left; width: 406px; height: 45px; } .fsi input { float: left; width: 369px; height: 28px; background: url("medias/fsc.png"); font-family: lt; font-size: 14px; color: #b3b3b3; text-align: center; border: 0px solid black; padding: 6px; } .fcdm { float: left; position: relative; z-index: 4; width: 910px; height: auto; margin-top: 12px; margin-left: 6px; } .fcdmt { float: left; width: 916px; height: 24px; font-family: Arial; font-size: 18px; color: #f5f5f5; text-align: center; } .fcdmx { float: left; width: 916px; height: auto; margin-top: 10px; } .fw { float: left; width: 433px; height: 63px; margin: 12px 25px 0px 0px; } .fw a { float: left; width: 433px; height: 63px; background: url("medias/fbg.png"); } .fw a:hover { background: url("medias/fbg.png") 0px -63px; } .fwi, .fwio { float: left; width: 64px; height: 54px; } .fwi img { margin: 15px 0 0 20px; } .fwio { visibility: hidden; margin: 0px 0 0 -64px; } .fwx { float: left; width: 350px; height: 38px; display: flex; align-items: center; font-family: Arial; font-size: 13px; color: #cdcdcd; font-weight: bold; margin: 13px 0px 0px 8px; } .fw a:hover .fwx { color: #cdcdcd; } .fp { float: left; width: 850px; height: 45px; margin: 10px 0px 0px 10px; } .fpt1, .fpt1b { float: left; width: 850px; height: 32px; font-size: 26px; color: #f5f5f5; overflow: hidden; } .fpt1b { height: 90px; display: flex; align-items: center; } .fpt2 { float: left; width: 850px; height: 38px; font-size: 15px; font-weight: bold; color: #a6cbd3; overflow: hidden; } .fpx { float: left; width: 850px; height: auto; font-size: 15px; color: #cbcbcb; padding: 10px 10px 10px 10px; border: 2px solid #383736; background-color: #1f1f1e; } .fpc1 { color: #00bcdc; } .fpc2 { color: #032230; background-color: #5ad4ed; } .fcdmq { float: left; width: 904px; height: auto; margin-top: 12px; } .fpt1b { height: 90px; display: flex; align-items: center; } .fpt2 { float: left; width: 850px; height: 38px; font-size: 15px; font-weight: bold; color: #a6cbd3; overflow: hidden; } .fpx { float: left; width: 850px; height: auto; min-height: 400px; font-size: 15px; color: #cbcbcb; margin: 0px 0px 0px 10px; } .fpx ol li { list-style-type: none; counter-increment: list; position: relative; } .fpx ol li:before { content: counter(list) "."; position: absolute; left: -2.5em; width: 2em; text-align: right; color: #00bcdc; } .fpx ul li { list-style-type: none; position: relative; } .fpx ul li:before { content: "•"; position: absolute; left: -2.5em; width: 2em; font-size: 18px; text-align: right; color: #00bcdc; } .fpx a { text-decoration: none; color: #00bcdc; cursor: pointer; } .fpx a:hover { color: #FFF; } .fpx p { margin: 0; padding: 0; } .tutorialView span.highlight { color: #032230; background-color: #5ad4ed; } .fqa, .fqas { float: left; width: 860px; height: 70px; margin: 0px 0px 0px 10px; } .fqas { height: 400px; } .fqax { float: left; width: 150px; height: 24px; font-family: 20px; color: #f5f5f5; margin-top: 16px; } .fqa1 { float: left; width: 690px; height: 52px; } .fqa1 input { float: left; width: 635px; height: 25px; background: url("medias/fp1.png"); font-size: 14px; color: #f5f5f5; border: 1px solid black; padding: 9px 6px 6px 10px; } .fqa2 { float: left; width: 381px; height: 29px; background: url("medias/fp2.png"); padding: 10px 10px 0 10px; } .fqa2 select { float: left; width: 361px; height: 25px; background: url("medias/fp2.png"); font-size: 14px; color: #f5f5f5; border: 1px solid black; } .fqa .ui-selectmenu-button { color: #f5f5f5; } .fqa3 { float: left; width: 700px; height: 400px; font-size: 13px; color: #7798a0; background-color: #01131c; border: 1px solid #1b3a49; } .fqbt { float: right; width: 265px; height: 32px; margin: 15px 313px 0px 0px; } .fqbt a { float: left; width: 265px; height: 32px; background: url("medias/vd1z.png") 0px 0px; overflow: hidden; font-size: 16px; font-weight: bold; color: #c5a9a1; text-align: center; padding: 16px 0px 0px 0px; } .fqbt a:hover { background: url("medias/vd1z.png") 0px -48px; color: #b9f5ff; } .fbtr { float: left; width: 860px; height: 4px; background-color: #1f1e1e; margin: 10px 0px 10px 5px; } #nsc2 { float: left; width: 1212px; height: 21px; background: url("medias/fqft.png"); font-family: Arial; font-size: 15px; font-weight: bold; color: #a8a8a8; text-align: center; margin: 32px 0px 0px 0px; padding-top: 6px; } #rnw1 { float: left; position: relative; width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; } #rnw2 { float: left; position: relative; width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: flex-start; } #rnw3 { float: left; position: relative; width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; } /*Version*/ .ofgahb { float: left; width: calc(100% - 10px); height: 20px; margin: 5px 0px 2px 10px; font-family: lt; } .ofgahi { float: left; width: 86px; height: 42px; } .ofgahi a { float: left; width: 120px; height: 22px; font-size: 22px; font-weight: bold; color: #e6e6e6; margin: -5px 0px 0px 0px; } .ofgahi a:hover { color: #fff; } .ofgapc, .ofgapc2, .ofgapc3, .ofgapc4 { float: left; width: 100%; height: 620px; overflow: auto; scrollbar-face-color: #010c13; scrollbar-shadow-color: #1a1d1c; scrollbar-highlight-color: #475a4f; scrollbar-3dlight-color: #7D7E94; scrollbar-darkshadow-color: #080908; scrollbar-track-color: #021622; scrollbar-arrow-color: #44e9ff; } .ofgapc,.ofgapc2, .ofgapc4 { height: 648px; margin-top: -20px; text-align: center; overflow: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; gap: 4px; padding: 0 20px 0 20px; width: calc(100% - 40px); } .ofgapc4 { height: auto; } .ofgapc { margin-top: 10px; padding-top: 10px; } .ofgapc3 { height: auto; min-height: 282px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; } .ofgaps, .ofgapso { float: left; width: 223px; height: 55px; transform: scale(1.5); margin: 14px 0 14px 0; } .ofgapso,.ofgaps:hover,.ofgapso:hover { filter: url(#plasmaEdge) drop-shadow(0 0 2px rgb(155 125 25 / 95%)) drop-shadow(0 0 2px #ff4500) drop-shadow(0 0 2px rgb(154 84 55 / 55%)); } .ofgaps:hover,.ofgapso:hover { cursor: pointer; } .ofgaps a, .ofgapso a { float: left; width: 218px; height: 48px; border: 2px solid #302823; border-radius: 12px; background-blend-mode: overlay; background: linear-gradient(to bottom, rgba(1, 1, 1, 0.8) 0%, rgba(30, 30, 30, 0.8) 10%, rgba(26, 26, 26, 0.8) 50%, rgba(30, 30, 30, 0.8) 90%, rgba(1, 1, 1, 0.8) 100%), radial-gradient(circle at center, rgb(67 49 49 / 80%) 0%, rgb(34 28 28 / 80%) 70%, rgb(0 0 0 / 80%) 100%); } .ofgaps a:hover, .ofgapso a { border: 2px solid #4e433d; background: linear-gradient(to bottom,#1a1a1a 0%,#2a2a2a 10%,#2c2c2c 50%,#2a2a2a 90%,#1a1a1a 100%), radial-gradient(circle at center,#8a6a6a 0%,#5a4a4a 70%,#1a1a1a 100%); } .ofgapsi { float: left; width: 36px; height: 36px; overflow: hidden; margin: 6px 0 0 7px; } .ofgapsi img { width: 36px; height: 36px; } .ofgapsn { position: absolute; top: 50%; left: 48px; margin-top: -18px; width: 160px; height: 36px; font: 13px arial; font-weight: bold; color: #e6e6e6; overflow: hidden; text-align: left; } .ofgapsn div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; } .ofgapsn span { font: 15px lt; color: #a7a7a7; } /* Offres */ .com { float: left; width: 480px; height: auto; margin: 5px 0 0 10px; padding: 10px 10px 12px 10px; background: rgba(35, 35, 35, .90); box-shadow: 0px 0px 4px 1px rgba(11, 11, 11, 1) inset; border-radius: 8px; } .comt { float: left; width: 480px; height: 26px; font-size: 24px; font-family: lt; color: #ffae00; text-shadow: 0 0 32px #ff1800, 0 0 32px #ff1800; } .comx { float: left; width: 480px; height: auto; font-family: lt; font-size: 17px; color: #dac7be; line-height: 19px; } .comx ul { margin: 5px 0 0 12px; } .comx li { list-style-type: square; color: #b3a49d; } .comx b { color: #dac7be; font-weight: normal; } .comx span { color: #786f6b; } .comx i { color: #b3a49d; font-style: normal; } .comxvw1 { float: left; width: 480px; height: 102px; color: #dac7be; } .comxvw1l, .comxvw1r { float: left; height: 102px; width: 179px; } .comxvw1r { width: 291px; margin-left: 10px; height: 87px; padding-top: 15px; } .comxvw2 { float: left; width: 480px; height: 120px; margin-top: -10px; color: #b3a49d; } .comxvw2l, .comxvw2r { float: left; height: 120px; width: 291px; padding-top: 30px; } .comxvw2r { width: 179px; margin-left: 10px; padding-top: 0px; } #wclh, .wclh { float: left; width: 100%; height: 50px; font-size: 42px; font-family: "MinecraftTen"; font-weight: bold; text-align: center; color: #fff; margin-top: 28px; } .wclh h1 { font-size: 32px; font-weight: bold; text-align: center; color: #fff; margin-top: 0px; } #wclb, .wclb { float: left; width: 100%; height: auto; font-size: 20px; font-family: 'lt'; text-align: center; color: #cecece; } #wclb span, .wclb span { color: #ffba00; } .wclb a { font-size: 16px; font-weight: bold; color: #3eb1c4; text-align: center; } .wclb a:hover { color: #d1d1d1; } /* My Orders */ .myo { float: left; width: 100%; height: auto; font-size: 10px; color: #d1d1d1; margin-top: 20px; display: none; } .myo1, .myo2, .myo2b, .myo2c, .myo3, .myo4, .myo4b { float: left; width: 140px; height: 12px; text-align: center; margin-bottom: 10px; } .myo2 { width: 180px; } .myo2b { width: 240px; } .myo2c { width: 100px; } .myo3 { width: 250px; text-align: left; margin: 0px 0px 0px 20px; } .myo4 { width: 130px; } .myo4b { width: 108px; } .myoc, .myoc2, .myoc3 { position: relative; width: 100%; height: 515px; overflow-x: hidden; overflow-y: auto; scrollbar-face-color: #0d3546; scrollbar-shadow-color: #13100f; scrollbar-highlight-color: #09364d; scrollbar-3dlight-color: #09364d; scrollbar-darkshadow-color: #0b2e3d; scrollbar-track-color: #011b26; scrollbar-arrow-color: #4df0fc; } .myoc2 { height: auto; min-height: 400px; } .myoc3 { height: 320px; } .myf, .myfs { width: calc(100% - 20px); column-gap: 20px;row-gap:5px; margin-bottom: 10px; height: auto; padding: 10px; background: linear-gradient(0deg, rgba(46, 38, 35, 1) 0%, rgba(68, 59, 56, 1) 50%, rgba(55, 46, 42, 1) 100%); border-radius: 12px; border-top: 1px solid #151310; border-bottom: 1px solid #3f322e; font-family: lt; font-size: 20px; font-weight: bold; color: #c1c1c1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .myf:hover, .myfs { background: linear-gradient(0deg, rgb(2 74 9) 0%, rgb(12 103 0) 50%, rgb(12 129 0) 100%); color: #fff; } .myf1, .myf2, .myf2b, .myf2c, .myf2d, .myf3, .myf4, .myf4b, .myf5, .myf5b, .myf6 { float: left; width: auto; height: auto; text-align: center; } .myf2,.myf3,.myf4,.myf2c { width: auto; } .myf2b, .myf2d { width: 100%; height: auto; padding-left: 18px; display: flex; justify-content: center; } .myf2d { margin-top: 28px; width: 220px; padding-left: 0px; } .myf3i, .myf3ix, .myf3ia { float: left; width: 88px; height: auto; text-align: center; } .myf3ix { margin: 12px -5px 0px -15px; } .myf3n { float: left; width: 180px; height: 14px; margin: 28px 0px 0px 0px; color: #38e2ff; text-align: left; } .myf4b { width: 90px; color: #efefef; } .myf5b { width: 100px; margin-left: auto; } .myf5b a { color: #d1d1d1; } .myf5b a:hover { color: #fff; } .cbrb2 { width: 100%; max-width: 684px; height: 21px; margin: 0px 0px 0px -15px; background: url("./medias/brw.png"); } .pagn, .pagnj, .pagnt { float: left; width: 100px; height: 21px; margin: 15px 0px 0px 450px; } .pagnj { margin: 5px 0px 0px 450px; } .pagnt { margin: 15px 0px 0px 551px; } .pagn1, .pagn2 { float: left; width: 23px; height: 21px; } .pagn1 a { float: left; width: 23px; height: 21px; background: url("medias/arw1.png") 0px 0px; } .pagn1 a:hover { background: url("medias/arw1.png") 0px -21px; } .pagn2 a { float: left; width: 23px; height: 21px; background: url("medias/arw2.png") 0px 0px; } .pagn2 a:hover { background: url("medias/arw2.png") 0px -21px; } .pagnx { float: left; width: 54px; height: 14px; font-size: 13px; color: #d1d1d1; text-align: center; margin-top: 2px; } .stio1, .stio2, .stio3, .stio4, .stio5, .stio6, .stio1s, .stio2s, .stio3s, .stio4s, .stio5s, .stio6s { float: left; width: 28px; height: 27px; margin: 0px 3px 0px 0px; } .stio1 a, .stio2 a, .stio3 a, .stio4 a, .stio5 a, .stio6 a, .stio1s a, .stio2s a, .stio3s a, .stio4s a, .stio5s a, .stio6s a { float: left; width: 28px; height: 27px; background: url("medias/o1s.png") 0px 0px; } .stio2 a, .stio2s a { background: url("medias/o2s.png") 0px 0px; } .stio3 a, .stio3s a { background: url("medias/o3s.png") 0px 0px; } .stio4 a, .stio4s a { background: url("medias/o4s.png") 0px 0px; } .stio5 a, .stio5s a { background: url("medias/o5s.png") 0px 0px; } .stio6 a, .stio6s a { background: url("medias/o6s.png") 0px 0px; } .stio1 a:hover, .stio1s a { background: url("medias/o1s.png") 0px 27px; } .stio2 a:hover, .stio2s a { background: url("medias/o2s.png") 0px 27px; } .stio3 a:hover, .stio3s a { background: url("medias/o3s.png") 0px 27px; } .stio4 a:hover, .stio4s a { background: url("medias/o4s.png") 0px 27px; } .stio5 a:hover, .stio5s a { background: url("medias/o5s.png") 0px 27px; } .stio6 a:hover, .stio6s a { background: url("medias/o6s.png") 0px 27px; } /* cart */ .crt, .crtrnw { float: left; width: 100%; height: auto; margin: 30px 0px 0px 0px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 20px; } .crtr, .crtr2 { float: left; width: auto; height: auto; font-family: lt; font-size: 38px; color: #9ff300; text-shadow: 0px 0px 14px #0d8200; } .crts { float: left; height: 27px; margin: 0px 0px 12px 10px; display: flex; } .crtsc, .crtsc2 { float: left; width: 28px; height: 27px; margin: -5px 5px 0px 0px; } .crtsc a, .crtsc2 a { float: left; width: 28px; height: 27px; background: url("medias/chk2.png") 0px 0px;margin-top: 4px; } .crtsc a:hover, .crtsc2 a, a.crtsc2OK { background: url("medias/chk2.png") 0px -27px; } .crtsn { float: left; width: auto; height: 14px; font-size: 13px; color: #c1c1c1; margin-top: 4px; } .crtx { width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; margin-bottom: 30px; } .crtb { float: left; width: 208px; height: 67px; } .crtcp, .crtcp2 { float: left; width: auto; height: 42px; } .crtcp a, .crtcp2 a { float: right; width: 210px; height: 42px; background: url("medias/discounta.png"); opacity: 0.5; transition: opacity 0.3s ease-in-out; } .crtcp2 a { background: url("medias/discountb.png"); } .crtcp a:hover, .crtcp2 a:hover { opacity: 1.0; transition: opacity 0.3s ease-in-out; } .crtb a { float: left; width: 208px; height: 67px; background: url("medias/chout.png") 0px 0px; } .crtb a:hover { background: url("medias/chout.png") 0px -67px; } .crtv, .crtvcp, .crtv2, .crtv3 { float: left; width: 156px; height: 45px; background: url("medias/chv.png"); font-size: 24px; font-weight: bold; color: #fff; text-align: center; padding: 16px 0px 0px 0px; margin-top: 3px; } .crtvcp { font-size: 21px; } .crtv2 { color: #c1c1c1; } .crtv3 { color: #fff; } .crtvcp { height: 54px; padding: 7px 0px 0px 0px; line-height: 20px; } .crtvcp s { position: relative; font-size: 16px; text-decoration: none; } .crtvcp s::after { content: ""; position: absolute; top: 50%; left: -10%; width: 125%; height: 3px; background: red; transform: rotate(-9deg); } .myo8, .myo8b, .myo8s, .myo9 { float: left; width: 220px; height: 12px; text-align: center; margin-bottom: 10px; } .myo8, .myo8b, .myo8s { width: 250px; text-align: left; margin: 0px 0px 0px 20px; } .myo8,.myo8s { width: 100%; font-family: "lt"; font-size: 26px; height: 40px; } .myo8b { width: 180px; } .myf8, .myf8b, .myf9 { width: 100%; text-align: center; } .myf8, .myf8b { width: 250px; margin: 0px 0px 0px 20px; } .myf8b { width: 100%; display: flex; align-items: center; justify-content: center; } .myf8n, .myf8nb { float: left; width: 130px; height: auto; color: #fff; text-align: left; } .myf8nb { width: 80px; } .myf10 { width: 110px; margin-left: auto; } .myf10 a { float: left; width: 100px; height: auto; color: #a6babe; } .myf10 a:hover { color: #fff; cursor: pointer; } .myf10 a:hover .myf10g { opacity: 1; filter: alpha(opacity=100); } .myf10g { float: left; width: 27px; height: 28px; opacity: 0.90; filter: alpha(opacity=90); } .myf10g img { margin-top: 4px; } .myf10d { float: left; width: 64px; height: 14px; text-align: left; margin: 6px 0px 0px 6px; } /* Checkout */ .ct { position: absolute; z-index: 2; top: 0px; width: 1220px; height: auto; left: 50%; margin-left: -570px; } .ctnofix { float: left; width: 100%; height: auto; margin: -10px 0 0 -43px; } .ckg,.ckd { position: relative; z-index: 6; width: 360px; height: 184px; background: #33323285; border-radius: 12px; padding: 10px; } .ckgo { float: left; width: 360px; height: 42px; background: #3d3d3d; border: 1px solid #505050; border-radius: 12px; font-size: 12px; font-weight: bold; margin: 0px 0px 5px 0px; } .ckgo:hover { background: #464646; } .ckgo1 { float: left; width: 88px; height: 40px; text-align: center; } .ckgo2 { float: left; width: 90px; height: 14px; margin: 13px 0px 0px 0px; color: #fff; font-family: Arial; } .ckgo3 { float: left; width: 60px; height: 14px; margin: 13px 0px 0px 0px; color: #c1c1c1; font-family: Arial; } .ckgo4 { float: left; width: 48px; height: 14px; margin: 13px 0px 0px 0px; color: #c1c1c1; font-family: Arial; } .ckgo5 { float: left; width: 68px; height: 14px; margin: 11px 0px 0px 0px; color: #fff; font-size: 14px; font-weight: normal; } .ckgo5 span { color: #c1c1c1; } .ckgoa { position: absolute; z-index: 6; bottom: 12px; right: 10px; width: 110px; height: 24px; font-family: Arial; font-size: 12px; font-weight: bold; } .ckgoa a { float: left; width: 125px; height: 24px; color: #e1e1e1; } .ckgoa a:hover { color: #fff; cursor: pointer; } .ckgoai { float: left; width: 13px; height: 16px; } .ckgoan { float: left; width: auto; height: 14px; margin: 1px 0px 0px 4px; } .ckgr { position: absolute; z-index: 2; top: 20px; left: 30px; width: 226px; height: 171px; background: url("medias/ar.png"); } .ckdv { float: left; width: 370px; height: 14px; margin: 10px 0px 0px 0px; } .ckdvg { float: left; width: 110px; height: 14px; color: #dbdbdb; } .ckdvd { float: left; width: 260px; height: 14px; color: #fff; } .ckp { z-index: 6; width: 100%; height: 16px; font-size: 16px; color: #c1c1c1; text-align: center; } .cky { z-index: 2; width: 100%; height: auto; background: url("medias/ovch.png")center top no-repeat; text-align: center; padding: 0px 25px 40px 25px; gap: 20px; } .ckyc { width: 154px; height: 77px; display: inline-block; } .ckyc a { float: left; width: 154px; height: 64px; background: url("medias/cdc.png"); text-align: center; padding: 13px 0px 0px 0px; opacity: 0.90; filter: alpha(opacity=90); } .ckyc a:hover { opacity: 1; filter: alpha(opacity=100); } .ckt { z-index: 2; width: 100%; height: 60px; display: flex; justify-content: center; } .cktg { float: left; width: 130px; height: 32px; font-size: 24px; color: #c1c1c1; margin: 16px 0px 0px 0px; } /** Misc **/ .ap-payment-button,.ap-payment-button img { border: none; outline: none } #ap-modal div { padding: 0 } #ap-modal { position: absolute; display: none; z-index: 9999; padding: 0;width:calc(100% - 20px)!important;max-width:950px!important;left: 50%!important;transform: translate(-50%, 0%); } .ace_content{width:100%!important;max-width:890px!important;} #ap-bc,#ap-tc,.ace_editor{width:calc(100% - 20px)!important;max-width:930px!important;} .ap-iframe{width:100%!important;height:580px;} #ap-mask, .ap-mask { position: absolute; display: none; top: 0; left: 0; min-height: 100%; width: 100%; filter: alpha(opacity=40); opacity: 0.40; -khtml-opacity: 0.40; -moz-opacity: 0.40; background-color: #2d2d2d; z-index: 9000 } a#ap-close, a.ap-close { display: block; height: 30px; width: 30px; position: absolute; top: -10px; right: -10px; font-size: 0; text-indent: -9999px; z-index: 19999; background: url(medias/ovb-close.png) left top no-repeat; outline: none; text-decoration: none; border: 0; } a#ap-submit { display: block; height: 64px; width: 64px; position: absolute; bottom: 10px; right: 20px; font-size: 0; text-indent: -9999px; z-index: 19999; background: url(medias/ovb-submit.png) left top no-repeat; outline: none; text-decoration: none; border: 0; } a#ap-close,a.ap-close,a#ap-submit { opacity: 0.9; -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90); filter: alpha(opacity=90); } a#ap-close:hover,a.ap-close:hover,a#ap-submit:hover { opacity: 1; -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); } #ap-inside { background: #171717 url(medias/ovb-preload.gif) no-repeat 50% 50% } #ap-inside-default { background: #fff url(medias/ovb-preload-default.gif) no-repeat 50% 50% } #ap-t,#ap-b { height: 10px; font-size: 0 } #ap-tl,#ap-bl,#ap-tc,#ap-bc { float: left; font-size: 0 } #ap-tc,#ap-bc { display: block; background: url(medias/ovb-alpha-border.png) left bottom; height: 10px; width: 10px } #ap-tr,#ap-br { float: right } #ap-tl { background: url(medias/ovb-alpha-corner.png) right bottom } #ap-tr { background: url(medias/ovb-alpha-corner.png) left bottom } #ap-bl { background: url(medias/ovb-alpha-corner.png) right top } #ap-br { background: url(medias/ovb-alpha-corner.png) left top } #ap-l { background: url(medias/ovb-alpha-border.png) repeat-y } #ap-r { background: url(medias/ovb-alpha-border.png) right top repeat-y; margin-left: 10px!important; padding-right: 10px!important } #ap-tl,#ap-tr,#ap-bl,#ap-br { display: block; height: 10px; width: 10px; font-size: 0 } .ap-iframe { border: 0 } .ui-helper-hidden { display: none } .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px) } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none } .ui-helper-clearfix:before,.ui-helper-clearfix:after { content: ""; display: table } .ui-helper-clearfix:after { clear: both } .ui-helper-clearfix { zoom: 1 } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0) } .ui-front { z-index: 100 } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; text-align: center; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px } .ui-selectmenu-open { display: block } .ui-selectmenu-button { display: inline-block; overflow: hidden; position: relative; border: 1px solid transparent; text-decoration: none; cursor: pointer; outline: 0; color: #9cb8ba; padding-top: 2px; font-size: 15px; } .ui-selectmenu-button.ui-state-hover { background-color: #3b2926; border: 1px solid #5d322d; border-radius: 9px; color: #eaf2f6 } .ui-selectmenu-button span.ui-icon { right: .5em; left: auto; margin-top: -7px; position: absolute; top: 50% } .ui-selectmenu-button span.ui-selectmenu-text { text-align: left; height: 25px; padding: 6px 0 9px 5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } div.ui-selectmenu-open { position: absolute; z-index: 65535; } .ui-dialog.ui-widget { font-size: 13px } .ui-widget .ui-widget { font-size: 13px } .ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button { font-size: 1em } .ui-widget-content { border: 0 solid #000; border-radius: 3px; background: url(medias/dm.png); color: #b1b8ba } .ui-widget-content a { color: #fff } .ui-widget-header { border: 0 solid #000; color: #fff; font-weight: 700 } .ui-widget-header a { color: #fff } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: none; font-size: 15px; } .ui-menu .ui-menu { position: absolute } .ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em 3px .4em; cursor: pointer; min-height: 0; list-style-image: url(data: image/gif; base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) } .ui-menu .ui-menu-item.ui-state-focus { background-color: #503a37; color: #fff7e4 } .ui-menu .ui-menu-divider { text-align: center; } .ui-menu-icons { position: relative } .ui-menu-icons .ui-menu-item { padding-left: 2em } .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0 } .ui-menu .ui-menu-icon { left: auto; right: 0 } .ui-icon { width: 16px; height: 16px } .ui-icon.ui-icon-triangle-1-s { background: url(medias/sarw.png) no-repeat } .ui-selectmenu-menu .ui-menu { max-height: 260px } .qtip { position: absolute; left: -28000px; top: -28000px; display: none; min-width: 50px; font-size: 20px; line-height: 12px; direction: ltr; box-shadow: none; padding: 0 } .qtip-content { position: relative; overflow: hidden; text-align: left; word-wrap: break-word; padding: 10px; border-radius: 12px; color: #ffffff; font-weight: bold; font-family: 'lt'; } .qtip-titlebar { position: relative; overflow: hidden; font-weight: 700; border-width: 0 0 1px; padding: 5px 35px 5px 10px } .qtip-titlebar+.qtip-content { border-top-width: 0 !important } .qtip-close { position: absolute; right: -9px; top: -9px; cursor: pointer; outline: medium none; border-color: transparent; border-style: solid; border-width: 1px } .qtip-titlebar .qtip-close { right: 4px; top: 50%; margin-top: -9px } .html .qtip-titlebar .qtip-close { top: 16px } .qtip-titlebar .ui-icon,.qtip-icon .ui-icon { display: block; text-indent: -1000em; direction: ltr } .qtip-icon,.qtip-icon .ui-icon { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-decoration: none } .qtip-icon .ui-icon { width: 18px; height: 14px; line-height: 14px; text-align: center; text-indent: 0; font: 400 bold 10px/13px Tahoma,sans-serif; color: inherit; background: transparent none no-repeat -100em -100em } .qtip-default { background-color: transparent; border: none; padding: 0; width: auto; } .qtip-default .qtip-titlebar { background-color: #ffef93 } .qtip-default .qtip-icon { background: #f1f1f1; color: #777; border-color: #CCC } .qtip-default .qtip-titlebar .qtip-close { color: #111; border-color: #AAA } .qtip-rounded,.qtip-tipsy,.qtip-bootstrap { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px } .qtip-rounded .qtip-titlebar { -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0 } .qtip-red { background-color: #8f121b; color: #912323; border-color: #d95252 } .qtip-red .qtip-close .qtip-icon { background-position: -102px 0 } .qtip-red .qtip-icon,.qtip-red .qtip-titlebar .ui-state-hover { border-color: #d95252 } .qtip .qtip-tip { overflow: hidden; z-index: 10; margin: 0 auto } .qtip .qtip-tip { visibility: hidden } .qtip .qtip-tip,.qtip .qtip-tip .qtip-vml,.qtip .qtip-tip canvas { position: absolute; color: #123456; background: transparent; border: 0 dashed transparent } .qtip .qtip-tip canvas { top: 0; left: 0 } .qtip .qtip-tip .qtip-vml { behavior: url(#default#VML); display: inline-block; visibility: visible } .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative } .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0 } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -13px 0 0 0; padding: 0px; height: 18px; opacity: 0.9; -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90); filter: alpha(opacity=90); } .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px 0 0 -1px; } .ui-dialog .ui-dialog-titlebar-close:hover,.ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; opacity: 1; -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: 0; overflow: hidden; zoom: 1 } .ui-dialog .ui-dialog-buttonpane { text-align: left; border: none; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right } .ui-dialog .ui-dialog-buttonpane button { margin: .6em .4em 0 0; float: left; cursor: pointer; height: 25px; padding: 0px; border: 0px solid #000; } .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px } .ui-dialog-titlebar { color: #d1d1d1; font-weight: bold; } .ui-dialog-content { font-family: Arial; font-size: 12px; font-weight: bold; color: #9cb8ba; } .ui-dialog-buttonpane { border: 1px transparent; } .ui-dialog-buttonset .ui-state-default { width: 146px; height: 22px; background: url("medias/ax.png") 0px 3px; overflow: hidden; background-repeat: no-repeat; font-weight: normal; text-transform: uppercase; font-size: 13px; color: #90a6a8; text-align: center; } .ui-dialog-buttonset .ui-state-default:hover { background: url("medias/ax.png") 0px -20px; background-repeat: no-repeat; color: #171717; } .ui-widget-content .ui-dialog-buttonset .ui-state-default { font-family: lt; } .ui-icon { width: 16px; height: 16px; background-image: url(medias/ui-icons_cc0000_256x240.png) } .ui-icon-closethick { background-position: -96px -128px; } .ui-button .ui-button-text { display: block; line-height: 1.4; padding-left: 5px } .ui-button-text-only .ui-button-text { padding: .3em 1.3em } .ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px } .ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em } .ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em } .ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary { left: 0; top: 0 } button.ui-dialog-titlebar-close .ui-button-text { display: none; } .ui-dialog-titlebar button.ui-button { cursor: pointer; background: transparent; border: 0px solid; } .ui-widget { outline: 0 } .hidden { display: none; } .ui-state-disabled { cursor: default !important } .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; filter: alpha(opacity=40); opacity: 0.40; -khtml-opacity: 0.40; -moz-opacity: 0.40; background-color: #2d2d2d; } .reinstallDialog { border: 0px solid #000; background: url(medias/slcbg1.png); width: 782px; height: 518px; } .backupDialog { border: 0px solid #000; background: url(medias/slcbg2.png); width: 330px; height: 155px; } .restoreDialog { border: 0px solid #000; background: url(medias/slcbg3.png); width: 330px; height: 185px; } .restoreTwoDialog { border: 0px solid #000; background: url(medias/slcbg2.png); width: 330px; height: 155px; } .over_loading { position: absolute; z-index: 9001; top: 50%; margin-top: -35px; left: 50%; margin-left: -184px; width: 368px; height: 70px; background-image: url("medias/overloading.png"); font-size: 12px; font-weight: bold; color: #e8e8e8; } .over_loading_title { position: absolute; z-index: 10; top: 15px; left: 70px; width: 280px; height: auto; } .over_loading_bar span { height: 10px; position: absolute; border-radius: 10px; -moz-box-shadow: 0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9; -webkit-box-shadow: 0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9; box-shadow: 0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9; background: #000; margin: 1px 2px } .over_loading_bar { position: absolute; z-index: 10; top: 38px; left: 70px; width: 275px; height: 12px; background: #FFF; filter: alpha(opacity=40); opacity: 0.40; -khtml-opacity: 0.40; -moz-opacity: 0.40; border-radius: 10px; -moz-box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc; -webkit-box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc; box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc } .input_error, .input_error2 { background-color: #FCE2E4; } #ccmdx .ui-selectmenu-text { font-size: 21px; } #divComboOffers .ui-menu { font-size: 20px; } .ui-menu { font-family: lt; } .tksvspe { float: left; width: 266px; height: 37px; border: 0px solid black; background: url("medias/ipt13.png") no-repeat; font-family: Arial; font-size: 16px; font-weight: bold; color: #c1c1c1; padding: 16px 7px 0px 8px; } .tksvspec { float: left; width: 260px; margin: -5px 0 0 3px; } .ct4px { width: 327px; height: 29px; padding: 7px 7px 0px 8px; } .ct4pxc { float: left; width: 321px; margin: 1px 0 0 3px; color: #F0F0F0; font-size: 24px; font-family: lt; background: linear-gradient(0deg, rgba(52, 56, 57, 1) 1%, rgba(61, 73, 79, 1) 50%, rgba(54, 62, 65, 1)); border-radius: 9px; } .dftpl2 { float: left; margin-top: 8px; } .dftpl3 { float: left; margin-top: 3px; width: 100%; max-width: 453px; height: 530px; overflow: auto; } .dftpl3a, .dftpl3b { float: left; width: calc(100% - 4px); max-width: 424px; font-size: 12px; height: 16px; padding: 3px 0 3px 4px; } .dftpl4a { float: left; width: 20px; height: 16px; line-height: 16px; } .dftpl4b { float: left; width: calc(100% - 20px); max-width: 368px; height: 16px; line-height: 16px; overflow: hidden; } .dftpl4c { float: right; width: 20px; height: 16px; } .ctm7 a { font-family: Arial; color: #c1c1c1; text-decoration: none; } .ctm7 a:hover { color: #c9a797; } .severe { float: left; width: 100%; height: auto; font-family: Arial; color: #FF3300; padding: 1px 0px 1px 0px; } .eri { float: left; width: 17px; height: 14px; text-align: center; } .erx { float: left; width: 100%; height: 12px; margin: 0px 0px 0px 0px; font-family: Arial; } .info { float: left; width: 100%; height: auto; font-family: Arial; color: #c1c1c1; padding: 1px 0px 1px 0px; } .warning { float: left; width: 100%; height: auto; font-family: Arial; color: #fff000; padding: 1px 0px 1px 0px; } .hidden { display: none; } .over_payment { position: absolute; z-index: 9001; top: 50%; margin-top: -46px; left: 50%; margin-left: -312px; width: 624px; height: 92px; background-image: url("medias/overpannier.png"); font-size: 12px; font-weight: bold; color: #e8e8e8; } .over_txt { position: absolute; z-index: 10; top: 15px; left: 110px; width: 500px; height: auto; font-size: 13px; font-weight: normal; } .over_payment span { color: #3be500; } .over_payment b { color: #fff; font-weight: bold; } .over_bt { position: absolute; z-index: 10; bottom: 5px; right: 5px; width: auto; height: auto; } button.overclose { width: 146px; height: 22px; cursor: pointer; background: url("medias/ax.png") 0px 0px; border: 0px; font-family: lt; padding-top: 3px; text-transform: uppercase; font-weight: normal; font-size: 13px; color: #94847f; text-align: center; } button.overclose:hover { background: url("medias/ax.png") 0px -22px; background-repeat: no-repeat; color: #e3c6bc; } #ctpma { float: left; width: 100%; padding-top: 5px; } .svsma { float: left; width: 100%; height: auto; padding: 10px 0 10px 0; } .ot3p { float: left; width: 340px; height: 41px; margin-bottom: 20px; } #otsrp { float: right; width: 253px; height: 51px; margin-right: 15px; } #otsrp input { float: left; width: 241px; height: 40px; border: 0px solid black; background: url("medias/ipt2c.png"); background-color: transparent; font-family: lt; font-size: 14px; font-weight: bold; color: #98d1df; text-align: center; padding: 11px 6px 0px 6px; } .ot4, .ot5 { z-index: 8; width: auto; max-width: 228px; height: 41px; margin-bottom: 25px; } .ot5 { top: 60px; } #ictx { float: left; width: 658px; height: 40px; background: url("medias/ipt2.png"); margin: 52px 0px 0px 420px; padding: 0px 0px 0px 3px; } .ictcx, .ictcxs { float: left; width: auto; height: 16px; } .ictcx a, .ictcxs a { float: left; width: auto; height: 16px; font-size: 15px; font-weight: bold; color: #a7a7a7; margin: 12px 14px 0px 19px; } .ictcx a:hover, .ictcxs a { color: #f0f0f0; } .crtrx2 { float: left; width: 175px; height: 32px; font-size: 20px; color: #ffba00; margin: 18px 0px 0px 12px; } .oti { float: left; width: 53px; height: 41px; } .otx { float: left; width: 175px; height: 41px; } .otxh { float: left; width: auto; height: 26px; font-size: 23px; font-family: lt; font-weight: bold; color: #fff; margin: 2px 0px 0px 0px; } .otxh span { color: #ffba00; } .otxb { float: left; width: auto; height: 14px; font-size: 12px; color: #a3a3a3; } .otxb a { float: left; width: auto; height: auto; font-size: 10px; font-weight: normal; color: #71a0ab; } .otxb a:hover { color: #98d1df; } .otxc { float: left; width: 267px; height: 14px; font-size: 12px; margin: 35px 0 0 15px; } .otxc a { float: left; width: auto; height: auto; font-size: 12px; font-weight: normal; color: #98d1df; } .otxc a:hover { color: #dff9ff; } .otxc a div { float: left; margin-right: 7px; } .otxc a img { opacity: 0.8 } .otxc a:hover img { opacity: 1 } #rzn2c { position: relative; z-index: 1; grid-area: b; width: auto; height: 160px; margin-left: 0px; align-self: center; } .rzncx { height: 26px; font-family: lt; font-size: 26px; color: #fff; text-shadow: 0 0 1px #007cca; text-align: center; } .rzncb { float: left; height: 115px; padding: 25px 0px 0px 10px; display: flex; flex-direction: column; justify-content: center; } .rzncn { float: left; width: auto; height: 32px; margin: 2px 0px 0px 8px; } #rznc1,#rznc2,#rznc3,#rznc4,#rznc5,#rznc6 { float: left; width: 30px; height: 30px; background-image: url("medias/ris3.avif"); background-repeat: no-repeat; display: block; background-position: 0px 0px; } #rznc2 { background-position: -32px 0px; } #rznc3 { background-position: -64px 0px; } #rznc4 { background-position: 0px -30px; } #rznc5 { background-position: -32px -30px; } #rznc6 { background-position: -64px -30px; } .rzncnx, .rzncns { float: left; height: 20px; font-family: "lt"; font-size: 22px; color: #48e0fa; margin: 2px 0px 0px 10px; text-shadow: 0 0 2px #007cca; } .rzncns { color: #ffdb4b; text-shadow: 0px 0px 6px #de0000, 0px 0px 12px rgba(222,0,0, 0.8); font-family: lt; font-size: 20px; margin-top: 2px; } #c1,#c2 { position: absolute; z-index: 0; grid-area: c; width: 100%; height: 341px; background: url("medias/c1.avif") no-repeat; bottom: 0; } #c2 { width: 100%; order: 2; position: relative; height: 378px; background: url("medias/c2.avif"); margin-top: -50px; } .sd4b { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; } .rznsp, .rznpp { width: 220px; height: 60px; margin: 0 10px 0 10px; } .rznpp { left: 260px; } .rznsc { float: left; width: 230px; height: 30px; } .rznst { float: left; width: auto; height: 28px; font-family: "lt"; font-size: 28px; color: #fff; text-shadow: 0 0 1px #007cca; } .rznst span { color: #67e9ff } .rznscx { float: left; width: auto; height: 30px; font-family: "lt"; font-size: 26px; color: #c3f9ff; margin: 0px 6px 0px 0px; } .rznsci { float: left; width: auto; height: 22px; margin-top: 4px; } .rznsci img { margin-left: -4px; } #cpptitr { position: relative; z-index: 1; grid-area: a; height: auto; padding: 40px 0 0 0; } #cpptitr h2 { font-size: 30px; line-height: 30px; color: #fff; font-family: "lt"; font-weight: normal; margin: 0px; padding: 0px; text-align: center; } #cmdsrx { position: relative; z-index: 2; order: 1; width: calc(100%-30px); font-family: Arial; font-size: 17px; color: #dfdfdf; padding: 40px 20px 0px 10px; align-self: center; margin-left: auto; } #cmdsrx a { text-decoration: none; font-weight: bold; color: #fcd857; } #cmdsrx a:hover { color: #fff; } .fqo3 { float: left; width: 100%; height: auto; } .fqh4 { width: 100%; height: auto; text-align: center; padding-top: 40px; color: #fff; } .fqh4 h2 { font-size: 36px; line-height: 40px; color: #fff; font-family: "lt"; font-weight: normal; } .fqs3 { width: 100%; height: 60px; font-size: 17px; color: #9a9a9a; font-weight: normal; text-align: center; } /* --------- FAQ container & grid --------- */ /* Container */ #faq { width: min(1200px,calc(100% - 40px)); margin: 0 auto; padding: 0 20px } /* 2 colonnes indépendantes (hauteurs non liées) */ .faq-grid { display: flex; flex-wrap: wrap; gap: 22px 32px; align-items: flex-start; } /* Carte FAQ */ .faq-item { flex: 1 1 calc(50% - 18px); min-width: 280px; background: linear-gradient(180deg,#141a24 0%,#0f151f 100%); border: 1px solid #222b38; border-radius: 14px; box-shadow: 0 10px 28px rgba(26,26,26,.35); transition: all 0.25s ease;overflow: hidden; } .faq-item:hover{background: linear-gradient(180deg, #222c3d 0%, #192232 100%);border: 1px solid #37455a;} @media (max-width:768px) { .faq-item { flex: 1 1 100% } } /* Titre cliquable */ .faq-q { position: relative; cursor: pointer; user-select: none; font-family: "lt",Arial,sans-serif; font-size: 22px; line-height: 1.25; color: #fcd857; margin: 0; padding: 16px 44px 16px 16px; } .faq-q::after { content: ""; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; border-right: 2px solid #7fdff0; border-bottom: 2px solid #7fdff0; transform: translateY(-60%) rotate(45deg); transition: transform .25s ease,opacity .25s; opacity: .9; } /* Réponse (fermée par défaut) */ .faq-a { font: normal 17px/1.55 Arial,sans-serif; color: #b9c4d1; margin: 0; max-height: 0; opacity: 0; overflow: hidden; padding: 0 16px; transition: max-height .35s ease, opacity .25s ease, padding .25s ease; } /* États ouverts */ .faq-item.open { border-color: #2aa9c9; box-shadow: 0 12px 30px rgba(0,200,255,.12) } .faq-item.open .faq-q::after { transform: translateY(-40%) rotate(-135deg) } .faq-item.open .faq-a { opacity: 1; padding: 10px 16px 16px } /* tailles responsives du texte */ @media (max-width:768px) { .faq-q { font-size: 18px } .faq-a { font-size: 15px } } @media (max-width:420px) { .faq-q { font-size: 16px } .faq-a { font-size: 14px } } .mdlco { float: none; display: inline-block; text-align: left; flex: 1 1 520px; height: auto; } .mdlci { float: left; position: relative; width: 92px; height: 70px; background: url(medias/mvs.png) 0 0 no-repeat; text-align: center; padding: 12px 0 0; color: #000; transform: scale(0.8); margin: -5px 0px 0 -10px; } .mdlco:hover .mdlci { background: url(medias/mvs.png) 0 -82px } .mdlco:hover .mdlcx { border: 2px solid #7a6d67; } .mdlcx { float: left; width: calc(100% - 94px); height: 68px; background: #111111; border: 2px solid #2a2a2a; border-radius: 12px; padding: 2px 4px 0 4px; } .mdlcx span { font-size: 18px; color: #ffba1b } .mdlcxh { float: left; width: 100%; height: 20px; font: 17px lt; color: #d6ceca; } .mdlcxb { float: left; width: 100%; height: 48px; font: 11px arial; font-weight: normal; color: #a7a7a7; align-content: center; } .rcmd { position: absolute; top: 12px; right: 8px; z-index: 4; width: 27px; height: 19px; } #stripe-bg { position: absolute; z-index: 9999; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; height: 100%; width: 100%; background: #000; opacity: 0.25; -moz-opacity: 0.25; -ms-filter: "alpha(opacity=25)"; filter: alpha(opacity=25); } #stripe-form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: linear-gradient(0deg, rgba(2,51,65,1) 0%, rgb(5 28 38) 80%); border: 3px solid #5469d4; width: 30vw; min-width: 500px; box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07); border-radius: 7px; padding: 40px; } #stripe-element { margin-bottom: 24px; } #stripe-button { background: #5469d4; font-family: Arial, sans-serif; color: #ffffff; border-radius: 4px; border: 0; padding: 12px 16px; font-size: 16px; font-weight: 600; cursor: pointer; display: block; transition: all 0.2s ease; box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07); width: 100%; } #stripe-button:hover { filter: contrast(115%); cursor: pointer; background: #199849; } #stripe-form:has(#stripe-button:hover) { border: 3px solid #199849; } #stripe-button:disabled { opacity: 0.5; cursor: default; } #stripe-spinner,#stripe-spinner:before,#stripe-spinner:after { border-radius: 50% } #stripe-spinner { color: #fff; font-size: 22px; text-indent: -99999px; margin: 0 auto; position: relative; width: 20px; height: 20px; box-shadow: inset 0 0 0 2px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0) } #stripe-spinner:before,.spinner:after { position: absolute; content: "" } #stripe-spinner:before { width: 10.4px; height: 20.4px; background: #5469d4; border-radius: 20.4px 0 0 20.4px; top: -.2px; left: -.2px; -webkit-transform-origin: 10.4px 10.2px; transform-origin: 10.4px 10.2px; -webkit-animation: loading 2s infinite ease 1.5s; animation: loading 2s infinite ease 1.5s } #stripe-spinner:after { width: 10.4px; height: 10.2px; background: #5469d4; border-radius: 0 10.2px 10.2px 0; top: -.1px; left: 10.2px; -webkit-transform-origin: 0 10.2px; transform-origin: 0 10.2px; -webkit-animation: loading 2s infinite ease; animation: loading 2s infinite ease } #stripe-payment-message { color: rgb(105, 115, 134); font-size: 16px; line-height: 20px; padding-top: 12px; text-align: center; } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @media only screen and (max-width: 600px) { #stripe-form { width: 80vw; min-width: initial } } .hidden { display: none; } /*Responsive*/ #cpp2 { height: 440px; display: grid; grid-template: "a" 120px "b" 400px "c" 200px / 1fr; } #rzn2c { align-self: flex-start; } @media (min-width:480px) { #cpp2 { grid-template: "a" 120px "b" 400px "c" 200px / 1fr; } #c1 { background-position: 0; } #cb1b { height: 580px; } #rzn2c { margin-left: 40px; } .rzncns { font-size: 24px; margin-top: 0px; } #cpptitr h2 { font-size: 36px; line-height: 32px; } .rzncx { font-size: 32px; text-align: left; } #fcrgi { transform: scale(1); } .mdlcxb { font-size: 14px; align-content: flex-start; } .ofgaps, .ofgapso { transform: none; margin: 0; } .ccodn, .ccodns, .ccodno, .ccodnos { transform: none; margin: 0px 9px 0px 9px; } .chc { transform: none; margin: 0; } #fcrgi { margin: 12px 0 0 0; } .myf2b, .myf2d { width: 212px } .myf8b { width: 160px; } .myf8, .myf8b, .myf9 { width: 150px; display: flex; flex-direction: row; justify-content: center; align-items: center; } #lgc label,#co1 { display: inline; } #cb6mx h2 { font-size: 58px; } .tksb .tksx { display: inline; } #cb7mx { margin-top: 0; } .ct1, .ct2, .ct3, .ct6, .ct7 { width: 100%; max-width: calc(50% - 10px); } .ct1p, .ct2p, .ct2pr, .ct3p, .ct4p, .ct2px, .ct3px, .ct4px { max-width: 100%; } .ct2p input, .ct2pr input { width: 100%; } .ct2px { width: 176px; } .ct2pxc { width: 178px; } .mpy, .mpys, .mpv { transform: none; margin: 0; } .ct4b .ct2p { max-width: 182px; } .ct1nc { margin: -2px 0 0 25px; } #header{background: #090706 -webkit-image-set(url(medias/headerhgs.avif) 1x, url(medias/headerhg.avif) 2x) top center repeat-x;} #bloghd{font-size:64px;} #bloghd span{margin: 18px 0 0 0;} } @media (min-width:840px) { #cpp2 { grid-template: "a a" 160px "c b" auto "c b" auto / 0.5fr 1fr; } #c1 { width: 730px; background-position: -120px; } #cb1b,#cb2b { height: 440px; } .rzncns { font-size: 30px; margin-top: -3px; } #logo h1 { font-size: 32px; margin-top: -10px } #c2 { width: 902px; position: absolute; order: 1; margin-left: -100px; margin-top: 0px; } #cmdsrx { width: auto; margin-left: 200px; order: 2; padding: 10px 20px 1px 10px; } .cbm2 { height: 440px; } #fcrg { float: left; width: 630px; height: 41px; background: url("medias/ftm.avif"); background-size: cover; margin: -20px 0px 0px 0px; } #rzn2c { margin-left: 80px; } #s4g3 { width: 483px } #fto { height: 197px; } #cf2 { height: 239px; background: url("medias/ft.png") top center; } .cfpc { width: 299px; height: 41px; margin: 19px 60px 0px 0px; justify-self: right; border-top: none; } .cfpx { float: left; width: 274px; padding: 18px 0 0 70px; margin: 0px 0px 0px 36px; } .mdlcx { padding: 6px 12px 0 30px; width: calc(100% - 138px); } .mdlcxh { height: 26px; font: 20px lt; } .mdlci { transform: none; margin: 0; } .myo { display: block; } .crtx { width: 410px; } .faqsk { float: left; width: 240px; } .faqsr { float: left; width: calc(100% - 290px); } .insc1 { justify-content: flex-start; } #sn { background: url(medias/og.png) top center } .insc4 { ; margin: 15px 0 0 0; } .cky { padding: 50px 25px 40px 25px; } .wclh h1 { font-size: 42px; } .wclb { font-size: 26px; } #opt { width: calc(100% - 228px); } #ict { width: calc(100% - 244px); } .ctm10 { width: calc(100% - 20px); } .blogc a{grid-column-end: span 6;} .blogc{gap:40px} } @media (min-width:605px) { .cfcn { order: 0; } .cfis { order: -1; } .ifca { max-width: 50%; } } @media (min-width:980px) { #cpp2 { grid-template: "a a" 160px "c b" auto "c b" auto / 0.7fr 1fr; } #c1 { background-position: 0; } #c2 { margin-left: 0; } #cmdsrx { margin-left: 400px } .filter-buttons { margin-bottom: -30px; } .cppc { width: 440px; } #cb3 { height: 485px; padding: 0; } #cb6 { height: 495px; } #cb9 { height: 413px; } #cb3mx { width: 583px; } #cb4mx { width: 483px; } #cb7mx { width: 583px; } #cb9mx { width: 683px; padding: 0px 60px; } #cb6mx { width: 520px; margin-top: 0; text-align: left; } #cb3mi,#cb4mi,#cb6mi,#cb7mi,#cb9mi { position: absolute; } #cb4mi { width: 688px; background-position: right top; } #cb7mi { width: 955px; background-position: right top; } #cb9mi { width: 798px; background-position: right top; } #cb6mi { width: 692px; background-position: left top; } #cb7mx h3, #cb8mx h3, #cb9mx h3 { text-align: left; } .cb4m { height: 443px } .cb7m { height: 502px } .c0 { overflow: hidden; } .mc { overflow-x: visible; } .cfpx { float: left; width: 346px; padding: 18px 0 0 75px; margin: 0px 0px 0px 36px; } .pfx { margin: 64px 80px 0px 20px; } .ctpa3 { grid-template-columns: 1fr 1fr; } } @media (min-width:1074px) { .cb2m { width: 471px; } .cb2m2 { width: 528px; } #cb3mi,#cb6mi { margin-left: 0; } .blogc a{grid-column-end: span 4;} } @media (min-width:1144px) { .pnsi a,.pnsis a { border-radius: 0px; border-top-left-radius: 12px; border-top-right-radius: 12px; } #pnsm { padding: 0px; } } @media (min-width:1260px) { #cctcb { display: block; } #cctc { width: 316px; height: 500px; } .cctc1 { justify-content: left; } #cctd { max-width: 924px; } .sts2 { margin: 10px 20px 0px 20px; } } /*Buger Menu*/ /* ========================================================= Minecraft Illimity — Burger menu plein écran (mobile) ========================================================= */ #menu, #menuc, #lgc { list-style: none; } #menu *::marker { content: none; } /* corrige le “point blanc” */ .mi-burger, .mi-scrim { display: none; } /* cachés en desktop */ /* Animation d’ouverture */ @keyframes mi-quantumRift { 0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(.98) rotateX(-10deg); } 60% { clip-path: inset(0 0 0 0); transform: scale(1.01) rotateX(3deg); } 100% { opacity: 1; transform: none; } } /* ========================== MOBILE ========================== */ @media (max-width:1200px) { #menu { z-index: 3000; } /* --------- Verrouillage global sans JS (fallback) --------- Cache la barre de scroll du document quand #menu est ouvert */ html:has(#menu.mi-open) { overflow: hidden; height: 100dvh; } /* si ton JS ajoute body.mi-lock, on garde aussi ce verrouillage */ body.mi-lock { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; } /* Liens "Connectez-vous / Créer..." centrés */ #lgc { font-size: 0; /* tue tout caractère orphelin */ position: absolute; top: 0; left: 0; right: 66px; /* 46px + 10px d'espace burger */ z-index: 10006; display: flex; justify-content: center; align-items: center; line-height: 46px; padding: 0 12px; color: #cfd8e3; text-align: center; pointer-events: auto; font-size: 14px; margin: 6px 0 0 0; } #fmgc { display: none !important; } /* Burger (10px du bord droit) */ .mi-burger { display: block; position: absolute; top: 5px; right: 20px; width: 46px; height: 46px; border: 0; border-radius: 12px; cursor: pointer; background: rgba(35,40,46,.85); backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(26,26,26,.35), inset 0 1px 0 var(--mi-sep); z-index: 10010; } .mi-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s ease, top .35s ease, bottom .35s ease, opacity .25s ease; } .mi-burger span:nth-child(1) { top: 14px; } .mi-burger span:nth-child(2) { top: 22px; } .mi-burger span:nth-child(3) { bottom: 14px; } /* État “croix” quand ouvert */ #menu.mi-open .mi-burger span:nth-child(1) { top: 22px; transform: rotate(45deg); } #menu.mi-open .mi-burger span:nth-child(2) { opacity: 0; transform: translateX(8px); } #menu.mi-open .mi-burger span:nth-child(3) { bottom: auto; top: 22px; transform: rotate(-45deg); } /* Overlay */ .mi-scrim { display: block; position: fixed; inset: 0; background: rgba(26,26,26,0); pointer-events: none; transition: background .3s ease; z-index: 10004; } #menu.mi-open .mi-scrim { background: rgba(26,26,26,.55); pointer-events: auto; } /* --------- Panneau NAV plein écran & scroll interne UNIQUEMENT --------- */ #menuc { min-height: 92px; } #menuc nav { position: fixed; top: 0; left: 0; width: 100vw; /* couvre aussi la gouttière de scroll */ height: 100dvh; min-height: 100vh; /* viewport dynamique */ box-sizing: border-box; padding: 92px 0 24px; /* espace sous l’entête */ display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(180deg, rgb(35 40 46), rgb(20 23 26)); backdrop-filter: blur(8px); overflow-y: auto; overflow-x: hidden; /* un seul scroll (interne) */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: none; opacity: 0; pointer-events: none; visibility: hidden; z-index: 10008; /* au-dessus de l’overlay, sous le burger */ } #menuc nav.mi-show, #menu.mi-open #menuc nav { animation: mi-quantumRift .55s cubic-bezier(.25,.1,.25,1) forwards; opacity: 1 !important; pointer-events: auto; visibility: visible; } /* Items de menu (pas de 100vw ici => évite le débordement horizontal) */ #menuc nav > div + div { margin-top: 8px; } #menuc nav > div > a { position: relative; display: block; width: 100%; margin: 0; height: 72px; line-height: 72px; padding: 0 28px; font-size: 24px; color: #b0c0cb; text-decoration: none; text-align: left; background: transparent; box-shadow: inset 0 -1px 0 var(--mi-sep); } #menuc nav > div > a:hover { color: #fff; background: rgba(255,255,255,.05); } #menuc nav > div > a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: #00e59b; transition: width .25s ease; } #menuc nav > div > a:hover::before { width: 6px; } #menuc nav .mn1s > a { color: #fff; background: rgba(255,255,255,.06); } #menuc nav .mn1s > a::before { width: 6px; } /* Moins d’animations si demandé */ @media (prefers-reduced-motion:reduce) { #menuc nav, .mi-burger span, .mi-scrim { transition: none; animation: none; } } } #ctpannel3 .ui-selectmenu-button { display: inline-block; overflow: hidden; border: 0px solid transparent; position: relative; text-decoration: none; cursor: pointer; outline: 0; color: #9cb8ba; padding-top: 2px; font-size: 15px; } #ctpannel3 .ui-selectmenu-button.ui-state-hover { background-color: #455155; border: 0 solid #000; border-radius: 3px; color: #eaf2f6 } #ctpannel3 .ui-selectmenu-button span.ui-icon { margin-top: -8px; } #ctpannel3 .ui-selectmenu-button span.ui-selectmenu-text { height: auto; padding: 0 0 0 5px; } @supports (-webkit-touch-callout: none) { .ofgapso,.ofgaps:hover,.ofgapso:hover,#ccmdi input:active,#ccmdi input:focus,.ccodn a:hover .ccodni, .ccodns .ccodni,.ins2 input:hover,.ins2 input:active,.ins1 input:hover,.ins1 input:active { filter: none; } #log { filter: drop-shadow(0 0 20px rgb(155 197 224 / 95%)) drop-shadow(0 0 8px #0091ff) drop-shadow(0 0 8px rgb(33 85 144 / 55%)); } }