@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

@font-face{
  font-family: Garet;
  src: url(Garet/Garet-Book.ttf);
}
@font-face{
  font-family: SourceSansPro;
  src: url(SourceSansPro-Regular.otf);
}
@font-face{
  font-family: Microsoft;
  src: url(microsoft\ font/msjh.ttc);
}
@font-face{
  font-family: Segoe UI;
  src: url(Segoe\ UI.ttf);
}
body{
  --font-microsoft : Microsoft;
  --font-sourcesanspro : SourceSansPro;
  --font-family-perso : "Garet";
  --font-family-segoe : "Segoe UI";
  background-color: #041127;
  cursor: none;
  /* opacity: 0.8; */
  /* background-image:  linear-gradient(#000f2a 1px, transparent 1px), linear-gradient(to right, #000F2A 1px, #000 1px); */
  /* background-size: 20px 20px; */
}
body {
    background-color: #041127;
    transition: background 0.3s ease;
  }


  .bg-cube {
    background: #041127;
    opacity: 0.8;
    background-image:
      linear-gradient(30deg, #314d7b 12%, transparent 12.5%, transparent 87%, #314d7b 87.5%, #314d7b),
      linear-gradient(150deg, #314d7b 12%, transparent 12.5%, transparent 87%, #314d7b 87.5%, #314d7b),
      linear-gradient(30deg, #314d7b 12%, transparent 12.5%, transparent 87%, #314d7b 87.5%, #314d7b),
      linear-gradient(150deg, #314d7b 12%, transparent 12.5%, transparent 87%, #314d7b 87.5%, #314d7b),
      linear-gradient(60deg, #314d7b77 25%, transparent 25.5%, transparent 75%, #314d7b77 75%, #314d7b77),
      linear-gradient(60deg, #314d7b77 25%, transparent 25.5%, transparent 75%, #314d7b77 75%, #314d7b77);
    background-size: 20px 35px;
    background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
  }

  .bg-boxes {
    background: #041127;
    opacity: 0.8;
    background-image: linear-gradient(#314d7b 1px, transparent 1px),
                      linear-gradient(to right, #314d7b 1px, #041127 1px);
    background-size: 20px 20px;
  }

  .bg-vertical {
    background: #041127;
    opacity: 0.8;
    background-image: repeating-linear-gradient(to right, #314d7b, #314d7b 1px, #041127 1px, #041127);
    background-size: 20px 20px;
  }

  .bg-nothing {
    background: #041127;
    opacity: 1;
    background-image: none;
  }
.cursorr {
  width: 20px;
  height: 20px;
  border: 1px solid white;
  background-color: #ffffff49;
  border-radius: 50%;
  position: absolute;
  transition-duration: 0s;
  transition-timing-function: ease-out;
  animation: cursorAnim .5s infinite alternate;
  pointer-events: none;
  z-index: 9999;
}

.cursorr::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  border: 8px solid gray;
  border-radius: 50%;
  opacity: .5;
  top: -8px;
  left: -8px;
  animation: cursorAnim2 .5s infinite alternate;
}
@keyframes cursorAnim {
  from {
      transform: scale(1);
  }
  to {
      transform: scale(.7);
  }
}

@keyframes cursorAnim2 {
  from {
      transform: scale(1);
  }
  to {
      transform: scale(.4);
  }
}

@keyframes cursorAnim3 {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(3);
  }
  100% {
      transform: scale(1);
      opacity: 0;
  }
}

.expand {
  animation: cursorAnim3 .5s forwards;
  border: 1px solid red;
}
.colorselect{
  color: #2272FF;
}
.container{
	position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
	.check{
		display:none;
	}
	.btn{
		text-transform: uppercase;
		color: #fff;
		border: 2px solid #cb134e;
		display: inline-block;
		padding: 15px;
		padding-right: 50px;
		padding-left: 50px;
		border-radius: 3px;
		cursor: none;
		overflow: hidden;
		box-sizing: border-box;
		font-size:20px;
		transition: all .3s ease;
		.mo{
			position:relative;
			overflow:hidden;
			bottom: -150px;
			width:0px;
			height:0px;
			text-align:center;
			display: inline-block;
		   opacity:0;
			color: #272727;
		}
		&:before{
			width:0%;
			position: absolute;
			left:0;
			bottom:3px;
			height: 5px;
			background-color: #cb134e;
			content: "";		
		}
		&:after{
			width:100%;
			height:0%;
			position:absolute;
			bottom:3px;
			left:0;
			background-color: #cb134e;
			content: "Download complete";
			overflow:hidden;
			text-align:center;
			line-height: 180px;
		}
		
		&:hover{
			background-color: #cb134e;
			color: #060e33;
		}
	}
	input[type=checkbox]:checked ~ .btn{
			background: #ddced9;
			border-radius: 0px;
			border: none;
			padding-top: 70px;
			padding-bottom: 70px;
			padding-left: 200px;
			padding-right: 200px;
			transition: all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
			
			&:before{
				width:100%;
				content: "";
				color: #fff;
				text-align: center;
				line-height: 70px;
				transition: all 3.5s linear;
			}
			&:after{
				height:calc(100% - 3px);
				color: #060e33;
				transition: all .3s ease-in-out;
				transition-delay: 3.5s;
			}
			.me{
				display:none;
			}
			.mo{
				transition:bottom .4s ease, opacity 1s ease;
				transition-delay:.3s;
				height: auto;
				width:auto;
				bottom: 0px;
				opacity: 1;
			}
		}
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
    color: white;
}
button{
    font-size: large;
    font-family: 'rubik mono one';
    background-color: transparent;
    color: #000;
    border: 0px solid black;
    border-radius: 10px;
    height: 60px;
}
button:hover{
  text-decoration: underline;
 color: #26b6da;
}
.trans:hover{
  color: white;
  text-decoration: none;
}
 .titre{
    color: white;
 }
 .prev, .next {
    cursor : none;
    position: absolute;
    top: 30%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  
  .next{
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  
  .avant:hover, .apres:hover {
    background-color: rgba(0,0,0,0.8);
  }
  .fade:hover{
    opacity: 0.86;
  }
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: left;
    font-family: 'Rubik', sans-serif;
    cursor : none;
    
  }
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }
  
  .trending{
      color: #2272FF;
      font-family: "Rubik", sans-serif;
      cursor: none;
      align-items: center;
  }
  #trend{
    display: inline-block;
background: linear-gradient(to right, rgb(252, 22, 22), rgb(118, 118, 255));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }
  .bravo{
    font-size: 23px;
    display: inline-block;
background: linear-gradient(to right, rgb(252, 22, 22), rgb(118, 118, 255));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }
  #trend .arrow{
    color: rgb(118, 118, 255);
  }
  .column{
      float: left;
      width: 16.665%;
      padding: 5px;
      cursor : none;
  }
  .row::after{
      content: "";
      clear: both;
      display: table;
  }
  
  .A{
      font-family: 'Rubik', sans-serif;
      color: white;
      text-align: center;
  }
  .lecteur1{
    width: auto;
    height: 50px;
    color : #fff;
 }
 .lecteur1:hover{
    background-color: blue;
 }
 .lecteur2{
    width: auto;
    height: 50px;
    color : #fff;
 }
 .lecteur2:hover{
    background-color: yellow;
    color : black;
 }
 .dslogo{
    width: 50px;
    position: relative;
    bottom: -25px;
 }
 #instalogo{
    position: relative;
    left: -1px;
    bottom: -20px;
 }
 #instalogo:hover{
  color: #26b6da;
 }
 h3{
   color: burlywood;
   font-family: 'rubik mono one';
 }
 img{
  border-radius: 14px;
  width: 200px;
  transition: ease;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
  object-fit: cover;
  cursor: none;
 }
 img:hover{
  /* opacity: 0.7; */
  transform: scale(1.5);
 }
 h1{
   color: burlywood;
   font-family: 'rubik mono one';
 }
 h4{
   color: burlywood;
   font-family: 'rubik mono one';
 }
 .iconani{
  float: right;
}
 #dslog{
  position: relative;
  bottom: -20px;
 }
.icons{
  font-size: 2.8rem;
  color: #fff;
  cursor : none;
  display: none;
  float: right;
}
 #mobile{display: none;}
 .mobile{display: none;}
 .navmob{display: none;}
 address{color: #fff;}
 .container{
  justify-content: center;
}
p{
  font-family: 'rubik', sans-serif;
  color: #fff;
  font-size: 20px;
}
nav{
  height: 100px;
  top: 0px;
  border-color: blue;
  border-radius: 10px;

}
.box{
  position: relative;
  top: auto;
}
.boxinbox{
  position: relative;
  left: 0;
}
.cursor:hover .sec{
  transition: 0.5s ease;
  color: #005eff;
}
.sec{
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: #888;
  /* text-shadow: #ffffff -1px -1px 0px, #ffffff -1px 1px 0px, #ffffff 1px 1px 0px, #ffffff 1px -1px 0px; */
  font-weight: 700;
  font-style: bold;
  max-width: 390px;
}
.trans img:hover{
  opacity: 0.7;
  transform: none;
}
.trans:hover .secc{
  transition: 0.5s ease;
  color: #005eff;
}
.secc{
  margin-top: 0px;
  opacity: 0.7;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: rgb(255, 255, 255);
  /* text-shadow: #ffffff -1px -1px 0px, #ffffff -1px 1px 0px, #ffffff 1px 1px 0px, #ffffff 1px -1px 0px; */
  font-weight: 700;
  font-style: bold;
}
.trans{
  background-color: transparent;
}
.secc#orange, .secc#red{
  opacity: 0.9;
}
.trans:hover{background-color: transparent;}
.trailer{width: 1000px; height: 200px;}
select{
  border: 1px solid #fff;
  background-color: black;
  color:#b7b7b7 ;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 23px;
  border-radius: 5px;
  cursor: none;
}
.anime-element img:hover{
  transform: none;
  opacity: 0.7;
}
select::-webkit-scrollbar{
  width: 15px;
}
select::-webkit-scrollbar-track{
  background-color: #293245;
  border-radius: 10px;
}
select::-webkit-scrollbar-thumb{
  background-color: #5c2a9d;
  border-radius: 15px;
  transition-duration: 2s;
}
select:focus{
  outline: none;
  box-shadow: 0 0 10px #fff;
  border-color: #fff;
  background-color: #000;
}
option:hover{
  background-color: #6457A6;
}
.ep{
  display: none;
}
  iframe{
    width: 1000px;
    height: 500px;
  }
  .der{
    width: 100%;
    margin: 0 auto;
    background-color:  transparent;
    border-radius: 10px ;
    position: sticky;
    top: 0px;
    font-family: 'rubik mono one';
  }
  .der ul{
    list-style-type: none;
  }
  .der ul li{
    float: left;
    width: 25%;
    text-align: center;
  }
  .der ul::after{
    content:  "";
    display: table;
    clear: both;
  }
  .der a{
    display: block;
    text-decoration: none;
    color:  white;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
  }
  .der a:hover{
    color: rgb(9, 66, 172);
    border-bottom: 2px solid #04286b;
  }
.der .deroulant{
  font-family: 'rubik mono one';
  font-size: large;
}
h1{
  color: #fff;
}
h2{
  font-family: 'rubik mono one';
  color: #0942ac;
}
#red{
  color: red;
}

.entexte{
  color: gold;
}
.white{
  color: #fff;
}
body::-webkit-scrollbar{
  width: 15px;
}
body::-webkit-scrollbar-track{
  background-color: #131721;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb{
  background: linear-gradient(to bottom, #6f00af, #005eff);
  border-radius: 15px;
  transition-duration: 2s;
}
body::-webkit-scrollbar-thumb:hover{
  background-color: #0c47ad;
  cursor : none;
}
button:hover{
  cursor : none;
}
#searchbutton{
  cursor : none;
}
.plaestine{
  width: 70px;
  position: relative;
  left: 25px;
  bottom: -17px;
  display: none;
}
.palestine{
  width: 70px;
  position: relative;
  left: 25px;
  bottom: -17px;
}
.goback{
  color: #93fad7;
  text-decoration: underline;
  font-size: 25px;
  align-items: center;
}
.ionicon{
  color: #93fad7;
  font-size: 20px;
}
.plaestine:hover{
  width: 70px;
}
p{
  cursor : none;
}
#why{
  transition-duration: 0s;
  background-color: transparent;
  border-radius: 50%;
}
#why:hover{
  background-color: #ff0000;
}
.yellow{
  color: yellow;
}
.blue{
  color: blue;
}
.orange{
  color: #ff6600;
}
#orange{
  color: #ff6600;
}
#gold{ 
  color: #ffd700 ;
}
#goldbiengold{
  color:  #ffd700;
}
#colorfor{
  color: #FFF;
}
.plaestine{
  border-radius: 0px;
}
.palestine{
  border-radius: 0px;
}
#scrollbar{
  overflow: auto;
  white-space: nowrap;
}
.seea{
  border-radius: 5px;
  align-items: center;
}
.newfont{
  color: #0942ac;
  border-top: 2px solid #0942ac;
}
.boxinboxinbox{
  justify-content: center;
  border-radius: 10px;
  width: auto;
}
#dslog{
  display: none;
}
#blueh2{
  color: #0942ac;
  font-size: 40px;
  padding: 1.5%;
  background: rgba(0, 63, 173, 0.2);
  border-radius: 35px;
  border: 1.5px solid #6967676b;
}
.pc-portable{
  display: none;
} 
.cursor{
  cursor : none;
  opacity: 0.8;
  transition-duration: 1s;
}
.cursor:hover{
  color: #0942ac;
  opacity: 0.6;
}
.cursor img:hover{
  transform: none;
}
  p{
    font-family: "rubik", sans-serif;
  }

  .navv{
    float: right;
    font-family: 'Kanit', sans-serif;
    font-weight: 800;
    font-style: bold;
}
.navvmli, .pages a div{
  font-family: "Quicksand", sans-serif;
}
.navv .navvv {
  font-size: 18px;
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    cursor: none;
}
.navv .navvv:hover{
    background-color: #131313;
    border-radius: 8px;
}

.navvv {
    display: block;
    padding: 8px;
    background-color: transparent;
}
.navi{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}
.logo{
    float : left;
}
.logo:hover{
  transform: none;
}
#searchbutton:hover{
  color: #a5a5a5;
 }
  #search:hover{
    background-color: #222a3b;
  }
.navbar{
  border-radius: 10px;
  background: #000;
  position: relative;
  width: 100.8%;
  z-index: 100;
  bottom: 10px;
  margin-left: -10px;
}
.navvi{
  float: right;
  font-family: 'Rubik', sans-serif;
}
.navvi .navvvi {
font-size: 18px;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  box-shadow: #fff 10px;
  cursor: none;
}
.navvi .navvvi:hover{
  color: #26b6da;
  border-radius: 8px;
}

.navvvi {
  display: block;
  padding: 8px;
  background-color: transparent;
}

.checkbtn, .checkbtnn{
  margin-top: 15px;
  font-size: 35px;
  color: #FFF;
  position: relative;
  float: right;
  right: 11px;
  top: 0px;
  display: none;
  cursor : none;
}
#check{
  display: none;
}
.logoo{
  position: relative;
  top: -1px;
float : left;
}
img.logoo:hover{
  opacity: 0.6;
  transform: none;
}
.titre{
  position: relative;
  top: 1px;
}
.navbar-mobile{
  display: none;
}
.link-logo:hover{
  background-color: transparent;
  color: #26b6da;
}
.vf{
  background-image: url('https://media.cdnws.com/_i/4335/RAW-290/359/92/drapeau-france-2.png');
}
.kanit{
  font-family: "Kanit", sans-serif;
}
#trailer2,#trailer3,#trailer4{
  display: none;
}
.red{
  color: #806ce4;
}
.password{
  background-color: #2c3e50;
  border: none;
  padding: 10px;
  font-family: "Kanit", sans-serif;
  border-radius: 10px;
  font-size: 20px;
  color: #fff;
}
.sub{
  background-color: #2c3e50;
  border: none;
  padding: 10px;
  font-family: "Kanit", sans-serif;
  border-radius: 10px;
  font-size: 20px;
  color: #fff;
  cursor : none;
}
.sub:hover{
  opacity: 0.7;
}

.ytbweek{
  width: 1200px;
}

.trendingg{
  color: #dddbdb;
font-family: "Kanit", sans-serif;
  cursor: none;
}
.newsbtn{
  margin-right: 10px;
}
#searchBarContainer{
  display: none;
  transition-duration: 1s;
}
#newSearchBar{
  border-radius: 15px;
  width: 96%;
  color: #FFF;
  padding: 15px;
  margin-top: 5px;
  font-size: 20px;
  font-family: "Poppins", serif;
  font-weight: 800;
  float: left;
  margin-left: 5px;
  background-color: #293245;
  border: 1px solid #586278;
}
.navbar hr.rounded.enabled{
  margin-top: 40px;
}
#searchMobile{
  margin: 10px;
  margin-left: -50px;
  width: 165px;
  height: 50px;
  font-size : 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color : white;
  border-radius: 15px;
  border: 0px solid black;
  background-color: #293245;
  cursor : none;
}
#searchbuttonMobile{
  margin-left: -10px;
  background-color: transparent;
  font-size: 30px;
  color : #2272FF;
  border-radius: 10px;
  border: 0px solid black;
  font-family: "Poetsen One", sans-serif;
  border-radius: 50%;
  position: relative;
  top: 5px;
  left: -10px;
}
#searchbutton:hover{
  color: #a5a5a5;
 }
 .searchPourMobile{
   text-align: center;
  }
  
  #password{
    background-color: #293245;
    border: none;
    width: 190px;
    height: 55px;
    font-size: 16px;
    border-radius: 8px;
    font-family: "Kanit", sans-serif;
  }
  #passwordbutton{
    background-color: #293245;
    border: 1px solid rgba(0, 0, 0, 0.6);
  height: 55px;
  width: 100px;
  font-size: 17px;
  border-radius: 8px;
  color: #fff;
  font-family: "Kanit", sans-serif;
}
.password{
  border: 1px solid rgba(0, 0, 0, 0.6);
}
#passwordbutton:hover{
  background-color: #6457A6;
  text-decoration: none;
}
#search{
  padding: 16px 17px; 
  width: 350px;
  font-size : 17px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color : white;
  border-radius: 25px;
  border: 0px solid black;
  background-color: #293245;
  cursor : none;
}
#searchbutton, #displaybutton{
  background-color: transparent;
  font-size: 35px;
  color : #2272FF;
  border-radius: 10px;
  border: 0px solid black;
  font-family: "Poetsen One", sans-serif;
  border-radius: 50%;
  position: relative;
  left : 10px;
  bottom: -10px;
}
#vo{
  display: none;
}
.about-us, .rounded{
  border-top: 3px solid  #2172FF;
  border-bottom: 3px solid  #1f5abe;
  width: 100%;
  border-radius: 15px;
}
#azul{
  color: #1f5abe;
}
.lang{
  border: 1px solid rgba(108, 149, 219, 0.3);
    background-color: rgba(0, 0, 0, 0.7);
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: color;
    text-shadow: 
                  -1px -1px 0 black,  
                   1px -1px 0 black,
                  -1px 1px 0 black,
                   1px 1px 0 black;
  color: #6457A6;
  font-family: "Kanit", sans-serif;
  font-size: 22px;
  width: 130px;
  height: 40px;
  transition-duration: 0.6s; 
}
.vf{
  background-image: url('https://media.cdnws.com/_i/4335/RAW-290/359/92/drapeau-france-2.png');
}
.vostfr{
  background-image: url('https://www.flagsonline.fr/uploads/2016-6-6/1200-0/japan.jpg');
  background-position: center;
}
.vosten{
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg/1200px-Flag_of_the_United_Kingdom_%283-5%29.svg.png');
  background-position: center;
}
.vostus{
  background-image: url('https://as2.ftcdn.net/v2/jpg/00/99/67/69/1000_F_99676995_mCAvSgDPCJ0WQ2fWs2NxPoOotQBwVhN7.jpg');
  background-position: center;
}
.vchina{
  background-image: url('china.png');
}
.flag{
  border-radius: 0px;
  position: relative;
  bottom: -5px;
  width: 13%;
}
.lang:hover{
  text-decoration: none;
  color: #FFF;
}
.selected, .s{
  border-bottom: 2px solid #767676;
}
.download{
      gap: 2px;
      align-items: center;
      background: rgba(0, 63, 173, 0.2);
      padding: 0.5%;
      border-radius: 25px;
      border: 1.5px solid #6967676b;
      width: 500px;
}
.down{
  cursor : none;
  width: 200px;
}
.down:hover{
  opacity: 0.5;
  width: 200px;
}
.neb{
  filter: grayscale(100%);
}
.btn-haut{
  z-index: 10;
  width: 50px;
  height: 50px;
  background: #6457A6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 20px;
  bottom: 80px;
  cursor : none;
}
.dl{
  font-family: "Poppins", sans-serif;
  color: #F1F1F1;
  font-weight: 600;
  border: 1px solid #FFF;
  background: #000;
}
.dl:hover{
  color: #000;
  text-decoration: none;
  background: #F1F1F1;
}
.icon-btn-haut{
  font-size: 50px;
}
.page-break{
  display: flex;
  justify-content: center;
}
.scans{
  display: flex;
  justify-content: center;
}
.grid{
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  line-height: inherit;
  -webkit-user-select: none;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  display: grid;
  place-items: center;
}
.lazy{
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  line-height: inherit;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;    
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  margin-top: 1.25rem;
  width: 50%;
  background:url('https://img1.picmix.com/output/stamp/normal/8/5/2/9/509258_fb107.gif') no-repeat center;
  border-radius: 6px;
}
.lazy:hover{
  transform: none;
}
.wp-manga-chapter-img{
  background:url('https://img1.picmix.com/output/stamp/normal/8/5/2/9/509258_fb107.gif') no-repeat center;
  border-radius: 0px;
  width: 800px;
}
.wp-manga-chapter-img:hover{
  width: 800px;
}
#color1,#color2,#color3{
  background-color: #293245;
  border: none;
  height: 55px;
  width: 100px;
  font-size: 14px;
  border-radius: 8px;
  color: #fff;
  font-family: "Kanit", sans-serif;
}
#color1:hover,#color2:hover,#color3:hover{
  background: #6457A6;
}
.color{
  display: flex;
  align-items: center;
}
.before:hover{
  text-decoration: none;
  color: #7a69cc;
}
.first{
  background-color: #000;
  color: #7a69cc;
  font-family: 'Kanit', sans-serif;
  font-size: 22px;
  width: 230px;
  height: 50px;
  transition-duration: 0.4s; 
  vertical-align: middle;
}
.first:hover{
  text-decoration: none;
  color: #7a69cc;
}
.arrow{
  font-size: 30px;
  vertical-align: middle;
}
.arrowHome{
  font-size: 40px;
  vertical-align: middle;
  margin-bottom: 0.5%;
}
.after .arrow, .before .arrow{
  font-size: 20px;
}
.after:hover{
  text-decoration: none;
  color: #7a69cc;
}
.after, .before, .first{
  background-color: rgba(118, 118, 118, 0.5);
  color: #fff;
  font-size: 16px;
  height: 40px;
  transition-duration: 0.4s; 
  vertical-align: middle;
  font-family: "Poppins", serif;
  border : 1px solid #767676;
}
.after:hover, .first:hover, .before:hover{
  background: rgba(118, 118, 118, 0.7);
  color: #fff;
}
.chap{
  width: 280px;
}
#no-color{
  color: #7a69cc;
}
.dbzf{
  width: 460px;
}
.animes{
  width: 70%;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  grid-gap: 18px;
  background: rgba(0, 63, 173, 0.2);
  padding: 2.5%;
  border-radius: 35px;
  border: 1.5px solid #6967676b;
}
.animes .anime-element img{
  object-fit: cover;
}
table{
  background: rgba(0, 63, 173, 0.2);
  border-radius: 35px;
  padding: 1.5%;
  border: 1.5px solid #6967676b;
}
.tendances{
  background: linear-gradient(to top right, rgba(197, 1, 1, 0.45), rgba(102, 68, 187, 0.45));
}
.scroll img:hover{
  transform: none;
  opacity: 0.7;
}
.anime-element:hover p{
  color: #2272FF;
}
.scroll{
  place-items: center;
  border: 1.5px solid #6967676b;
  border-radius: 35px;
  padding: 1.5%;
  transition-duration: 0.5s;
  gap: 8px;
  width: 80%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scrollbar-width: 5px;
}
.planning-container{
  overflow-x: scroll;
}
.premium{
  border: 1.5px solid #6967676b;
  border-radius: 35px;
  padding: 1.5%;
  transition-duration: 0.5s;
  width: 80%;
}
.premol{
  background: linear-gradient(to left, rgba(252, 22, 22, 0.4), rgba(118, 118, 255, 0.4));
}
.scroll::-webkit-scrollbar {
  width: 5px;
  cursor: default;
}
.container_dates-inconnues::-webkit-scrollbar, .planning-container::-webkit-scrollbar{
  width: 2px;
}
.scroll::-webkit-scrollbar-track, .planning-container::-webkit-scrollbar-track, .container_dates-inconnues::-webkit-scrollbar-track{
  background-color: #131721;
  border-radius: 5px;
}
.scroll::-webkit-scrollbar-thumb, .planning-container::-webkit-scrollbar-thumb, .container_dates-inconnues::-webkit-scrollbar-thumb{
  background: linear-gradient(to right, #6f00af, #005eff);
  border-radius: 5px;
  transition-duration: 2s;
}
.scroll::-webkit-scrollbar-thumb:hover, .planning-container::-webkit-scrollbar-thumb:hover, .container_dates-inconnues::-webkit-scrollbar-thumb:hover{
  background-color: #0c47ad;
  cursor : none;
}
.anime-element p, .trans p{
 /* text-align: center;
  /* margin-top: -2px;
  margin-bottom: 0px; */
  /* font-family: "Poppins", sans-serif;
  color: rgb(166, 166, 166); */
  /* text-shadow: #ffffff -1px -1px 0px, #ffffff -1px 1px 0px, #ffffff 1px 1px 0px, #ffffff 1px -1px 0px; */
  /* font-weight: 700;
  font-style: bold; */
  position: absolute;
  bottom: -20px;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.87));
    color: white;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    border-radius: 0px 0px 13px 13px;
    opacity: 1;
}
.banner{
  width: 100%;
    overflow: hidden;
    margin-top: -10px;
}
.anime-element p{
  width: 200px;
  font-family: "Rubik", sans-serif;
}
.trans p{
  bottom: -270px;
  border-radius: 0px 0px 13px 13px;
  width: 100%;
}
 .trans{
  margin: 7px;
  position: relative;
  display: inline-block;
}
.anime-element{
  margin: 7px;
  position: relative;
  display: inline-block;
}
.anime-element img {
  display: block;/* Ajuste la largeur selon tes besoins */
  height: auto;
  width: 200px;
}
.season-select {
  border: 0.21vh solid #FFF;
  border-radius: 15px 15px 13px 13px;
}
.pages{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 10px;
}
.pages div{
  width: 40px;
  height: 40px;
  background: #0F0F0F;
  color: #F1F1F1;
  border: 1px solid #cdcdcd;
  border-radius: 10px;
  cursor : none;
  vertical-align:middle;
  line-height: 40px;
  transition: 0.4s ease-in-out;
}
.pages div:hover{
  background: #2020d7;
}
.pages .pg{
  background: #2272FF;
}
.btn-next{
  color: #FFF;
  position: absolute; /* Exclut ce bouton du scroll */
  right: 175px;
  bottom: -75px;
  z-index: 10;
  font-size: 45px;
  cursor : none;
  display: none;
}
.da{
  bottom: -580px;
}
.f{
  bottom: -1060px;
}
.anim{
  bottom: -1510px;
}
.decou{
  bottom: -2000px;
}
.classi{
  bottom: -2510px;
}
.premium{
  background: linear-gradient(to left, rgba(252, 22, 22, 0.4), rgba(118, 118, 255, 0.4));
  height: 350px;
}
.derniers{
  background: linear-gradient(to top right, rgba(0, 123, 252, 0.4), rgba(68, 0, 255, 0.4));
}
.animation{
  background: linear-gradient(to top right, rgba(96, 246, 91, 0.284), rgba(1, 51, 16, 0.284));
}
.decouvrir{
  background: linear-gradient(to top right, rgba(255, 54, 54, 0.284), rgba(90, 0, 0, 0.284));
}
.classiques{
  background: linear-gradient(to top right, rgba(255, 238, 53, 0.284), rgba(92, 78, 0, 0.284));
}
.films{
  background: linear-gradient(to top right, rgba(117, 90, 255, 0.284), rgba(34, 3, 95, 0.284));
}
.mangasaj{
  background: linear-gradient(to top right, rgba(72, 72, 242, 0.284), rgba(78, 242, 72, 0.284));
}
.animes img:hover{
  width: 200px;
}
.filtrer{
  align-items: center;
  display: flex;
  gap: 20px;
}
.arcs{
  display: none;
}
.want p{
  border: 1px solid grey;
  border-radius: 13px;
  padding-left: 7px;
  padding-top: 2px;
  padding-bottom: 2px;
  background: rgba(185, 185, 185, 0.2);
}
.want p span, .want p a{
  color: #2272FF;
  text-decoration: underline #166cff;
  font-style: italic;
  cursor : none;
}
#filter-select{
  width: 130px;
}
.date-saiko::after{
  content: "© 2025 • Saiko-Anime";
}
#number{
  font-style: italic;
}
.register{
  color: #f1F1F1;
   border: 2px solid #fff;
  border-radius: 8px;
   background-color: #000;
   font-size: 18px;
   display: block;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   box-shadow: #fff 10px;
   transition-duration: 0.3s;
}
.register:hover{
  color: #ebb223;
  border-color: #ebB223;
}
#fan-letter{
  color: #7727c2;
}

.container-video.show-controls .wrapper{
  opacity: 0;
  bottom: 0;
  transition: all 0.13s ease;
  cursor: default;
}
.show-controls{
  cursor: default;
}
.show-cursor{
  cursor: default;
}

.video-controls, .video-timer, .options{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-video{
  width: 1000px;
  height: 500px;
  position: relative;
  background: #000;
  border-radius: 36px;
  overflow: hidden;
  border : 5.5px dashed #FAE465;
  border-style: double;
  margin: 0 auto;
  display: flex;
}
.container-video.fullscreen{
  max-width: 100%;
  width: 100%;
  height: 100vh;
  border: none;
  cursor: pointer;
}
.wrapper{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.wrapper::before{
  content: "";
  bottom: 0;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: calc(100% + 35px);
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.video-timeline{
  height: 7px;
  width: 100%;
  cursor : default;
}
.video-timeline .progress-area{
  height: 3px;
  position: relative;
  background: rgba(255,255,255,0.6);
}
.progress-area .span-video{
  position: absolute;
  left: 50px;
  top: -25px;
  font-size: 13px;
  color: #FFF;
  transform: translateX(-50%);
  font-family: var(--font-family-perso);
}
.progress-area .progress-bar{
  width: 0%;
  height: 100%;
  position: relative;
  background: #7727c2;
}
.progress-area .progress-bar::before{
  content: "";
  right: 0;
  top: 50%;
  height: 13px;
  width: 13px;
  background: inherit;
  position: absolute;
  border-radius: 50%;
  transform: translateY(-50%);
}
.progress-area .span-video, .progress-area .progress-bar::before{
  display: none;
}
.video-timeline:hover .span-video,
 .video-timeline:hover .progress-bar::before{
  display: block;
}
.video-controls{
  padding: 5px 20px 10px;
}
.video-controls .options{
  width: 100%;

}
.video-controls .options:first-child{
  justify-content: flex-start;

}
.video-controls .options:last-child{
  justify-content: flex-end;

}
.options .video-buttons{
  width: 40px;
  height: 40px;
  border: none;
  color: #FFF;
  font-size: 19px;
  background: none;
  cursor : default;
}
.options .video-buttons :where(i, span){
  width: 100%;
  height: 100%;
  line-height: 40px;
}
.options .range{
  height: 10px;
  max-width: 75px;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  cursor : none;
  border-radius: 10px;
}

::-webkit-slider-runnable-track {
  background: #ddd;
  border-radius: 5px;
}

/*
* 1. Set to 0 width and remove border for a slider without a thumb
* 2. Shadow is negative the full width of the input and has a spread 
*    of the width of the input.
*/
::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; /* 1 */
  height: 20px;
  background: #a798f2;
  box-shadow: -200px 0 0 200px #5540ba; /* 2 */
  border-radius: 50%;
  border: 2px solid #000;
}

::-moz-range-track {
  height: 40px;
  background: #ddd;
}

::-moz-range-thumb {
  background: #fff;
  height: 40px;
  width: 20px; /* 1 */
  border: 3px solid #999; /* 1 */
  border-radius: 0 !important;
  box-shadow: -200px 0 0 200px #6457A6;
  box-sizing: border-box;
}

::-ms-fill-lower { 
  background: #6457A6;
}

::-ms-thumb { 
  background: #fff;
  border: 2px solid #999; /* 1 */
  height: 40px;
  width: 20px; /* 1 */
  box-sizing: border-box;
}

::-ms-ticks-after { 
  display: none; 
}

::-ms-ticks-before { 
  display: none; 
}

::-ms-track { 
  background: #ddd;
  color: transparent;
  height: 40px;
  border: none;
}

::-ms-tooltip { 
  display: none;
}
.options .video-timer{
  font-size: 14px;
  color: #EFEFEF;
  margin-left: 15px;
}
.video-timer .separator{
  font-size: 16px;
  margin: 0 5px;
  font-family: "Open sans";
}
.playback-content{
  position: relative;
}
.playback-content .speed-options{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
  position: absolute;
  bottom: 40px;
  left: -40px;
  width: 85px;
  opacity: 0;
  pointer-events: none;
  list-style: none;
  background: #FFF;
  border-radius: 8px;
  transition: opacity 0.25s ease;
}
.playback-content .speed-options.show{
  opacity: 1;
  pointer-events: auto;
}
.speed-options .li-speed{
  cursor : none;
  font-size: 14px;
  padding: 5px 0 5px 15px;
  font-family: var(--font-family-perso);
}
.speed-options .li-speed.active{
  color: #FFF;
  background: #2289FF;
}
.container-video video{
  width: 100%;
}
.lazy:hover{
  opacity: 1;
  transform: none;
}
.text-synopsis{
  width: 90%;
  font-family: var(--font-family-perso);
}
.synopsis .trending{
  color: rgb(188, 42, 255);
}
.synopsis{
  background: rgba(135, 2, 197, 0.14);
  border-radius: 35px;
  padding: 1.1%;
  margin-top: 50px;
  width: 85%;
  border: 1.5px solid #6967676b;
}
.video-poster video{
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.1s ease-in-out;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.6);
  position: relative;
    right: 107px;
}
.video-poster .play{
  width: 65%;
  border-radius: 30px;
}
.video-poster video:hover::poster{
  transform: scale(1.5);
}
.video-poster{
  cursor : none;
  transition-duration: 1s;
  /* border-radius: 30px; */
  /* border: 2px solid rgba(102, 68, 221, 0.2); */
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 30px;
}
.video-poster button{
  color: #FFF;
  border: 2px solid #FFF;
  border-radius: 16px;
  transition-duration: 0.3s;
  position: absolute;
  top: 50%;
  left: 25%;
  background: rgba(0, 0, 0, 0.7);
}
.video-poster img{
  width: 350px;
  position: absolute;
  top: 35%;
  left: 25%;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.5%;
}
.video-poster img:hover{
  background: transparent;
  opacity: 1;
  transform: scale(1.1);
}
.video-poster button:hover{
  text-decoration: none;
  background: rgba(102, 68, 221, 0.8);
}
.video-poster .tg-poster{
  position: absolute;
  top: 30%;
  left: 25%;
  background: rgba(0, 0, 0, 0.7);
}
.video-poster .ds-poster{
  width: 230px;
  position: absolute;
  top: 25%;
}
.video-poster .gs-poster{
  width: 300px;
}

.avant, .apres{
  cursor : none;
  position: absolute;
  top: 30%;
  width: auto;
  margin-top: 44px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.avant{
  left: 0;
  margin-left: 7px;
}
.apres{
  right: 0;
  margin-right: 7px;
}
.reload{
  color: #FFF;
  border: 2px solid #FFF;
  border-radius: 16px;
  transition-duration: 0.3s;
  background: rgba(0, 0, 0, 0.3);
  width: 200px;
  height: 50px;
  font-size: 20px;
}
.reload:hover{
  color: #FFF;
  text-decoration: none;
  background: rgba(102, 68, 221, 0.3);
}
#lec{
  margin-top: 15px;
}
.ad{
  border: none;
  width: 100%;
  height: auto;
}
.playAnime{
  color: #2272FF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 45px;
  cursor : none;
  display: none;
}
.anime-element:hover .playAnime{
  display: block;
}
.navbar hr{
  border-radius: 0px;
  border-bottom: none;
  border-color: #1f5abe;
}
iframe, .container-video{
  border : 1px solid #767676;
  border-style: double;
  border-radius: 33px;
  width: 55%;
  height: 400px;
}
.sendvid{
  border-color: #FAE465;
}
.trailer{
  border: 5px dashed #806ce4;
  border-radius: 36px;
  width: 70%;
}
.oups{
  overflow: auto;
  border: none;
  scrollbar-width: none;
}
.error{
  color: #ff3d3d;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding-left: 10px;
}
.noterror{
  color: #F1F1F1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding-left: 10px;
}
.noterror a{
  color: #005eff;
  text-decoration: underline;
}
.contenu{
  display: none;
}

.grid .flex{
  display: flex;
  width: 70%;
  margin: 0;

}
.grid .flex:hover{
  width: 70%;
}
.planning{
  font-size: 50px;
  text-align: center;
  background-color: rgba(0, 94, 255, 0.589);
  border-radius: 20px;
  border: 1px solid #96bcff;
  font-family: var(--font-sourcesanspro);
}
.planning-container {
  display: flex;
  justify-content: space-between; /* Équilibre l'espace entre les colonnes */
  align-items: flex-start; /* Alignement en haut */
  gap: 10px; /* Espacement entre les colonnes */
  padding: -10px;
  padding-bottom: 20px;
}
.planning-container h2{
  font-family: var(--font-family-perso);
  font-size: 25px;
  font-weight: 900;
  border: 1px solid #ccc;
  padding: 10px;
  color: #f5F5F5;
}
[class^="column"]{
  flex: 1; /* Pour que chaque colonne ait la même largeur */
  text-align: center; /* Centrer le texte */
}
[class^="column"] div{
  margin-top: 5px;
  border: 1px solid #ccc;
}
.today{
  background-color: #0942ac;
}
.iamge{
  margin-top: 10px;
  margin-bottom: -10px;
}
.iamge:hover{
  transform: none;
}
.name{
  color: yellow;
  font-weight: 800;
}
.type{
  color: red;
  font-weight: 800;
}
.time{
  color: blue;
  font-weight: 800;
}
.language{
  color: lime;
  font-weight: 800;
}
.resize{
  width: 100%;
  height: 100%;
  position: absolute;
  clip: rect(10px, 0px, 10px, 0px);
}
#premium-movie{
  background: linear-gradient(to bottom left, rgba(252, 22, 22, 0.4), rgba(118, 118, 255, 0.4));
}
.trans img{
  border: 2px solid #F1F1F1;
}
.option-poster{
  position: absolute;
  left: 10px;
  top: 170px;
  margin-left: 100px;
}
.option-poster button.kanit{
  position: absolute;
  top: 200px;
  left: 20px;
  width: 300px;
  font-size: 27px;
}
#coverOeuvre{
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  line-height: inherit;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  vertical-align: middle;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  width: 100%;
  object-fit: cover;
  height: 370px;
  display: block;
}
.HistOeuvre{
  text-align: center;
  width: 200px;
}


.HistOeuvre{
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  line-height: inherit;
  --tw-bg-opacity: 1;
  --tw-shadow-color: #000;
  color: inherit;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  width: 50%;
  cursor: pointer;
  object-fit: cover;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
#skip-opening{
    position: absolute;
  top: -70px;
  right: 20px;
  /* padding: 10px 15px; */
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
  display: none; /* Par défaut caché, géré par JS */
  transition: 0.3s;
  width: 200px;
  font-family: var(--font-family-perso);
}
#skip-opening:hover{
  background-color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}
.smoothpre{
  border-color : #10d68a;
}
/* Version Pc Portable grand */
@media all and (max-width : 1650px) {
  iframe, .container-video{
    width: 70%;
  }
  .pc-portable{
    display: block;
  }
  .pcbr{
    display: none;
  }
  .mobile{
    display: none;
  }
}
body{
  cursor: none;
}
.search-container {
      max-width: 500px;
      margin: 0 auto;
      position: relative;
    }

    #searchInput {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      border-radius: 5px;
      border: none;
      outline: none;
    }

    .results-dropdown {
      position: absolute;
      top: 100%;
      width: 30%;
      padding: 0px 10px 30px 10px;
      border-radius: 35px;
      left: 0;
      right: 0;
      background: #1a1a1a;
      border: 1px solid #333;
      max-height: 300px;
      overflow-y: auto;
      z-index: 10;
      border-radius: 5px;
    }

    .result-item {
      font-family: Arial, sans-serif;
      font-size: 30px;
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #2a2a2a;
      color: #fff;
      text-decoration: none;
      background-position: center;
      background-size: cover;
      margin-top: 10px;
      border-radius: 20px;
    }
    .result-item {
  position: relative; /* nécessaire pour contenir le ::before */
  overflow: hidden; /* évite que le pseudo-élément déborde */
}

.result-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1; /* s'assurer qu'il ne couvre pas le texte */
  pointer-events: none; /* évite qu’il bloque l’interaction utilisateur */
}

.result-item > * {
  position: relative;
  z-index: 2; /* pour que le texte soit au-dessus du ::before */
}
    .result-item:hover {
      background-color: #333;
    }

    .result-item img {
      width: 140px;
      object-fit: cover;
      border-radius: 4px;
      margin-right: 10px;
      z-index: 2;
    }
    .result-item img:hover{
      transform: none;
    }

    .result-text {
      display: flex;
      flex-direction: column;
      position: relative;
      /* top: -40px; */
      z-index: 2;
    }

    .result-text strong {
      font-size: 23px;
    }

    .result-text small {
      font-size: 17px;
      color: #bbb;
    }
    .small-synopsis{
      font-size: 15px;
    }
    .send-message{
      background: linear-gradient(to bottom right, #060e33, #0942ac);
    }
    .send-message::before{
     background: rgba(0,0,0,0);
    }
    .hide{
      float: left;
      margin-top: 0.68%;
      margin-left: 10px;
    }
    .iframeScan{
      border: 0;
      width: 21%;
      border-radius: 0px;
      transform: scale(3.5);
      margin-bottom: 56%;
      border-radius: 6px;
      pointer-events: none;
      clip-path: inset(0px 60px 0px 60px);
    }
    .iframePlacement{
      -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  line-height: inherit;
  -webkit-user-select: none;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  display: grid;
  place-items: center;
      margin-top: 30%;
    }
    .delete-cursor {
  cursor: none;
}

/* .container-video.fullscreen.delete-cursor {
  cursor: default !important;
} */
.fullscreen {
  cursor: pointer;
}
.notCursor{
  cursor: none;
}
.card-info {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  border: 0px;
}
@media all and (max-width : 1800px){
  .iframeScan{
    margin-bottom: 65%;
    clip-path: inset(0px 10px 0px 10px);
    transform: scale(3);
  }
  .iframePlacement{
    margin-top: 35%;
  }
}
/* Version mobile */
@media all and (max-width : 984px) {
  .liHistorique{
    width: 300px;
  }
    .planning {
    display: inline-block; 
    width: 90%;
    font-size: 32px;
    text-align: center;
    background-color: #004aad;
    color: white;
    border-radius: 10px;
    padding: 4px 12px;                /* petit padding */
    margin: 20px auto 10px auto;
    line-height: 1.1;
    border: 1px solid #FFF;
  }
  .cursorr{
    display: none;
  }
  .synopsis{
    padding-left: 5%;
  }
  .animes{
    width: 90%;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    grid-gap: 2px;
  }
.animes img:hover{
  width: 150px;
}
  .first{
    width: 200px;
  }
  #gold{
    color: #6457A6;
  }
  .wp-manga-chapter-img{
    border-radius: 0px;
    width: 370px;
  }
  .wp-manga-chapter-img:hover{
    width: 370px;
  }
  .navi{
    display: none;
  }
  .ytbweek{
    width: 460px;
  }
  .navbar-mobile{
    background: #000;
    display: block;
    position: absolute;
    top: 0px;
    height: 65px;
    width: 95%;
    z-index: 200;
  }
  .navbar hr.rounded{
    margin-top: 50px;
  }
  .checkbtn{display: block;}
  .navmul{
    position: fixed;
    width: 75%;
    height: 100vh;
    background-color: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
    border-radius: 10px;
    opacity: 0.99;
    z-index: 10;
  }
  .navmli:hover{
    opacity: 1;
  background-color: #6457A6;
  }
  .navbar-mobile .navmul .navmli{
    display: block;
    gap: 8px;
  }
  .navbar-mobile .navmul .navmli .navma{
    font-size: 20px;
  }
  #check:checked ~ .navmul{
    left: 0;
  }
  #check:checked ~ .checkbtn{
    display: none;
  }
  #check:checked ~ .checkbtnn{
    display: block;
  }
  .planning{
    font-size: 30px;
    font-family: "Kanit", sans-serif;
  }
  p{
    font-family: "Kanit", sans-serif;
  }
  .navv{display: none;}
  .navvi{display: none;}
  .pcbr{
    display: none;
  }
  .pc-portable{display: none;}
  body{
    width: auto;
  }
  #pc{display: none;}
  .plaestine{
    display: none;
  }
  .trailer{
    float: left;
  }
  .box{
    width: 2000px;
  }
  .boxinbox{
    position: relative;
    left: 0px;
  }
  .trailer{width: 360px; height: 200px;}
  .icons{
    display: inline-flex;
  }
  .icons{
    display: block;
  }
  #dslog{
    position: relative;
    left: auto;
    bottom: auto;
  }
  .pc{display: none;}
  #search{width: 180px;}
  .iconani{display: none;}
  h1{width: 300px; font-size: 20px;}
  iframe, video, .container-video{width: 350px; height: 240px;}
  #icon{width : 70px;}
  .dslogo{width: 50px;}
  .instalogo{width: 50px;}
  .tkt1{display: none;}
  .tkt{display: block;}
  .capturedecran{width: 500px;}
  .pasmobile { display: none; }
  .mobile {display: block;}
 #mobile { display: block; }
  img{
     width: 150px;
  }
  li{
     font-size: 12px;
  }
  .trans img{
    width: 130px;
  }
  .trans .secc {
    font-size: 15px;
  }
  .trans img:hover{
    width: 130px;
  }
.anime-element img{
  width: 150px;
}
.anime-element p{
  width: 100%;
  font-size: 20px;
  font-family: "Poppins", sans-serif;
}
  .wrapper .video-controls{
    padding: 3px 10px 7px;
  }
  .options .range, .progress-area span{
    display: none!important;
  }
  .options .video-buttons{
    height: 30px;
    width: 30px;
    font-size: 17px;
  }
  .options .video-timer{
    margin-left: 5px;
  }
  .video-timer .separator{
    font-size: 14px;
    margin: 0 2px;
  }
  .options .video-buttons :where(i, span) {
    line-height: 30px;
  }
  .options .video-buttons span{
    font-size: 21px;
  }
  .options .video-timer, .progress-area span, .speed-options .li-speed{
    font-size: 12px;
  }
  .playback-content .speed-options{
    width: 75px;
    left: -30px;
    bottom: 30px;
  }
  .speed-options .li-speed{
    margin: 1px 0;
    padding: 3px 0 3px 10px;
  }
  .right .pic-in-pic{
    display: none;
  }
  .time1{
    font-size: small;
  }
  .lazy{
    width: 99%;
  }
  .lazy:hover{
    width: 99%;
  }
  .download{
    width: 350px;
  }
  .video-poster video{
    height: 250px;
    width: 80%;
  }
  .video-poster img{
    width: 200px;
    top: 30%;
    left: 15%;
  }
  .video-poster button{
    width: 170px;
    height: 50px;
    font-size: 13px;
    top: 40%;
    left: 15%;
  }
  .tg-poster{
    position: absolute;
    left: 20%;
  }
  .video-poster .ds-poster{
    width: 150px;
  }
  .navbar{
    background: rgba(0, 0, 0, 0);
  }
  .btn-next{
    color: #FFF;
    position: absolute; /* Exclut ce bouton du scroll */
    right: 55px;
    bottom: 60px;
    z-index: 10;
    font-size: 45px;
    cursor : none;
  }
  .da{
    bottom: -380px;
  }
  .f{
    bottom: -760px;
  }
  .anim{
    bottom: -1165px;
  }
  .decou{
    bottom: -1600px;
  }
  .classi{
    bottom: -2000px;
  }
  .scroll, .premium, .premol{
    width: 95%;
    padding-top: 3%;
    border-radius: 25px;
  }
  .logo{
    width: 17%;
  }
  .video-poster .gs-poster{
    width: 170px;
  }
  .want p span{
    text-decoration: underline #166cff;
  }
  #searchBarContainer{
    display: none;
  }
  #newSearchBar{
    display: none;
  }
  #searchResults{
    display: none;
  }
  .result-item{
    width: 75%;
    height: 120px;
  }
  .small-synopsis{
    font-size: 10px;
  }
  .result-item img{
    width: 190px;
  }
  .results-dropdown-mob{
    position: absolute;
      padding: 0px 10px 30px 10px;
      border-radius: 35px;
      left: 0;
      right: 0;
      background: #1a1a1a;
      border: 1px solid #333;
      max-height: 300px;
      overflow-y: auto;
      z-index: 10;
      border-radius: 5px;
  }
  #coverOeuvre{
    height: 220px;
  }
  .iframeScan{
    transform: scale(2.2);
    margin-bottom: 85%;
    border-radius: 3px;
    clip-path: inset(0px 90px 0px 90px);
    width: 100%;
  }
  .iframePlacement{
    margin-top: 0%;
    overflow-x: hidden;
  }
}