/*
 ██████  ██████  ███████ ██    ██ ██████  
██      ██    ██ ██      ██    ██ ██   ██ 
██      ██    ██ █████   ██    ██ ██████  
██      ██    ██ ██      ██    ██ ██   ██ 
 ██████  ██████  ███████  ██████  ██   ██ 
*/


html {
  scroll-behavior: smooth;
}

body{
	margin: 0; 
	overflow: hidden; 
	width: 100vw; 
	height: 100vh; 
	display: flex; 
	justify-content: center;
}

div, header, nav, main, footer, form{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

h1, h2, h3, h4, p, span{
	margin: 0;
}

a, button, select {
  padding: 0;
  margin: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  text-decoration: none;

  border: none;
  background: none;
  box-sizing: border-box;
}

span{
	text-decoration: none;
}

hr{
  border: solid 0.1vh var(--CouleurSombreText); 
  margin: 0.2vh 0; 
  width: 100%
}

body.vw-lt80 #MenuVertical{
  height: 5.5svh;
  width: 100%;
}

body.vw-lt80 #ContentContainer{
  height: 92.5svh;
}

body.vw-gt80 #MenuHorizontal{
  width: 5.5vh;
  height: 100%;
}

body.vw-gt80 #ContentContainer{
  height: 100svh;
}

.Initial{
	display: block;
	flex-direction: inherit;
}

+


/*
 ██████  █████  ██       ██████  ██    ██ ███████ ███████ 
██      ██   ██ ██      ██    ██ ██    ██ ██      ██      
██      ███████ ██      ██    ██ ██    ██ █████   ███████ 
██      ██   ██ ██      ██ ▄▄ ██ ██    ██ ██           ██ 
 ██████ ██   ██ ███████  ██████   ██████  ███████ ███████ 
*/


.CorpDuSite{
	position: absolute; 
	height: 100vh; 
	width: 100vw; 
	max-width: 220vh;
	flex-direction: row;
}

body.vw-lt80 #Structure {
  flex-direction: column;
  overflow: hidden;
  justify-content: flex-start;
}

body.vw-gt80 #Structure {
  flex-direction: row;
  overflow: hidden;
  justify-content: flex-start;
  width: 100%;
  max-width: 220vh;
}

  body.vw-gt80 #Content {
    width: 100%;
    height: 100svh;
  }

body.vw-lt80 #Content {
    width: 100%;
    height: 92svh;
  }


    body.vw-lt80 #Content-container {
    width: calc(100% - 2vh);
    height: calc(100% - 1vh);
    margin-bottom: 1vh;
    overflow: hidden;
  }

  body.vw-gt80 #Content-container {
    width: calc(100% - 1vh);
    height: calc(100% - 2vh);
    margin-right: 1vh;
    overflow: hidden;
  }

#OOB{
	display: none;
}

body.vw-gt80 #OOB{
	display: flex;
	position: absolute; 
	z-index: 999; 
	pointer-events: none;
	width: 100vw;
	overflow: hidden;
}

.Debordement{
	flex: 1; 
	height: 100vh;
  height: 100vh;
}

.DebordementMid{
	width: 200vw; 
	max-width: 220vh; 
	background: none; 
	height: 100vh
}

#TooSmall{
	position: absolute; 
	z-index: 9999; 
	background-color: #000; 
	height: 100vh; 
	width: 100vw
}

#TooSmall, #Menu-Horizontal, #Menu-Vertical {
  display: none;
}

.TS-container{
	height: 50%; 
	width: 90%; 
	text-align: center; 
	color: white
}

body.vw-lt20 #TooSmall {
  display: flex;
  overflow: hidden;
}

body.vw-lt80 #TooSmall {
  display: none;
}

body.vw-gt80 #TooSmall {
  display: none;
}

.loaderpage {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter:  blur(2vh);
  flex-direction: column;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.8s ease;
  }

.loaderpage.hidden {
  opacity: 0;
  pointer-events: none;
}

.with-loader {
  cursor: pointer;
}

.progress-container {
  width: 80%;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
  margin: 20px auto;
  overflow: hidden;
}
        
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #45a049);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

  body.vw-lt20 #Menu-Horizontal,
  body.vw-lt20 #Menu-Vertical,
  body.vw-lt20 #OOB,
  body.vw-lt20 #Structure {
    display: none;
  }


/*
███    ███ ███████ ███    ██ ██    ██ 
████  ████ ██      ████   ██ ██    ██ 
██ ████ ██ █████   ██ ██  ██ ██    ██ 
██  ██  ██ ██      ██  ██ ██ ██    ██ 
██      ██ ███████ ██   ████  ██████  
*/                                       

  body.vw-lt80 #Menu-Horizontal {
    display: none;
  }
  body.vw-lt80 #Menu-Vertical {
    display: flex;
  }
  body.vw-gt80 #Menu-Horizontal {
    display: flex;
  }

  body.vw-gt80 #Menu-Vertical {
    display: none;
  }
               
.Menu{
	width: 100%;
	gap: 0.5vh;
}

#Menu-Vertical{
	height: 6vh; 
	width: 100%;
	padding: 1vh;
	transition: height 1s ease;
}

#Menu-Horizontal{
	height: 100%; 
	width: 40vh; 
	flex-direction: column; 
	padding: 1vh;
	transition: width 1s ease;
}

.EncocheMenuExterieur{
	position: relative; 
	transform: translateX(4.2vh); 
	margin-left: -4.3vh; 
	height: 16vh; 
	width: 4vh; 
	z-index: 5;
}

.EncocheMenuInterieur{
	cursor: pointer; 
	margin-left: -0.8vh;
    width: calc(100% - 0.8vh);
    height: calc(100% - 1.7vh);
}

.BoutonMenu{
	height: 4.5svh; 
	width: calc(100% - 1vh); 
	justify-content: flex-start; 
	flex-direction: row;
	overflow: hidden;
	text-decoration: none;
	user-select: none;
}

.BoutonMenuIndex{
	height: 6.5svh; 
	width: 100%; 
	justify-content: flex-start; 
	flex-direction: row;
	overflow: hidden;
	text-decoration: none;
	user-select: none;
}

.TextMenu{
	margin-left: 1.5vh; 
	font-weight: bolder;
	width: 100%;
	white-space: nowrap;
	text-align: left;
}

.Panneau {
	width: 100%;
	height: 20.5vh;
	margin-top: 0;
	transition: margin-top 0.6s ease;
	display: none;
	background-color: white;
	padding-top: 1vh;
	gap: 1vh
}

.TextPanneau{
	width: calc(100% - 2vh)
}

.TextClosePanneau{
	height: 3vh; 
	margin-top: -1vh
}

.BoutonsPanneau{
	width: 33%; 
	height: 100%; 
	justify-content: center
}


/*
███████ ████████ ██████  ██    ██  ██████ ████████ ██    ██ ██████  ███████ 
██         ██    ██   ██ ██    ██ ██         ██    ██    ██ ██   ██ ██      
███████    ██    ██████  ██    ██ ██         ██    ██    ██ ██████  █████   
     ██    ██    ██   ██ ██    ██ ██         ██    ██    ██ ██   ██ ██      
███████    ██    ██   ██  ██████   ██████    ██     ██████  ██   ██ ███████ 
*/


.SectionFlex{
	flex-wrap: wrap; 
	justify-content: flex-start; 
	align-items: flex-start; 
	flex-direction: row;
	min-height: 50vh;
}
body.vw-lt80 .SectionFlex{
	min-width: 36vh;
	width: 100%;
}
body.vw-gt80 .SectionFlex{
	min-width: 76vh;
	width: calc(100% - 3vh);
	margin-left: 3vh;
}

.SectionContent{
	padding: 2vh 0;
	min-width: 37vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 4vh;
}

body.vw-lt80 .SectionContent {
	width: calc(100% - 1vh);
}

body.vw-gt80 .SectionContent {
	width: calc(50% - 1vh);
}

body.vw-lt80 .Separator{
	display: none;
}
body.vw-gt80 .Separator{
	display: flex;
}




.letter-bounce {
  display: inline-block;
  animation: bounceLoop 2s ease-in-out infinite;
}

@keyframes bounceLoop {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}


/*
███████ ███████ ███    ██ ███████ ████████ ██████  ███████ ███████ 
██      ██      ████   ██ ██         ██    ██   ██ ██      ██      
█████   █████   ██ ██  ██ █████      ██    ██████  █████   ███████ 
██      ██      ██  ██ ██ ██         ██    ██   ██ ██           ██ 
██      ███████ ██   ████ ███████    ██    ██   ██ ███████ ███████ 
*/


.FenetreHeader{
	height: 3vh; 
	flex-direction: row; 
	justify-content: space-between; 
	width: calc(100% - 4vh);
	cursor: pointer;
}

.BFContainer{
	flex-direction: row; 
	gap: 1vh
}

.BoiteExterieur{
	min-width: 30vh;
	width: 90%;
}

.BoiteInterieur{
	overflow: hidden;
}

.FenetreText{
	overflow-y: scroll; 
	overflow-x: hidden;
	justify-content: flex-start; 
	padding: 2vh 1vh 2vh 0; 
	max-height: 65vh;
	width: calc(100% - 1vh);
}
body.vw-gt80 .FenetreText{
	max-height: 65vh;
}
body.vw-lt80 .FenetreText{
	max-height: 55vh;
}



/*
██ ███    ██ ██████  ███████ ██   ██ 
██ ████   ██ ██   ██ ██       ██ ██  
██ ██ ██  ██ ██   ██ █████     ███   
██ ██  ██ ██ ██   ██ ██       ██ ██  
██ ██   ████ ██████  ███████ ██   ██ 
*/

body.vw-lt80 .BigTitleContainer{
  width: 100%; height: 9vh; margin: 2vh 0 2vh 0
}
body.vw-gt80 .BigTitleContainer{
  width: 100%; height: 18vh; margin: 4vh 0 2vh 0
}

.PremierePage{
	width: 100%; 
	flex-direction: row; 
	flex-wrap: wrap;
}

.PremierePageCote{
	height: 100%;
	 width: 50vh; 
	 margin: 7vh 0
}

.PpcTitleContainer{
	height: 10%; 
	width: 100%; 
	margin-bottom: 1vh
}

body.vw-lt80 .Weel-container{
	width: 35vh; 
	height: 35vh
}
body.vw-gt80 .Weel-container{
	width: 45vh; 
	height: 45vh
}

body.vw-gt80 .carousel-wrapper {
  width: calc(100% - 2vh);
  height: 50vh;
  overflow: hidden;
  justify-content: flex-start;
}
body.vw-lt80 .carousel-wrapper {
  width: 80vw;
  height: 50vh;
  overflow: hidden;
  justify-content: flex-start;
}

.Carousel {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
  justify-content: flex-start;
}

.carousel-slide {
  height: 48vh;
  width: 100%;
  margin-right: 1vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 1vh;
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
}

.carousel-slideContent{
  height: 100%;
  width: 100%;
  padding: 1vh;
  padding-left: 0;
  justify-content: flex-start;
}

.carousel-actions{
	width: 100%; 
	height: 3vh; 
	margin-top: 3vh; 
	gap: 3vh; 
	flex-direction: row;
}

.carousel-indicator{
	height: 2vh;
	width: 2vh;
	border-radius: 1vh;
}

.Sommaire-childs{
	margin-top: 2vh; 
	width: 100%; 
	gap: 2vh; 
	flex-direction: row
}

.Sommaire-boutons{
	width: 50%;
	padding: 1vh;
	white-space: nowrap;
	text-decoration: none;
}






























/*
██       ██████   ██████  ██ ███    ██ 
██      ██    ██ ██       ██ ████   ██ 
██      ██    ██ ██   ███ ██ ██ ██  ██ 
██      ██    ██ ██    ██ ██ ██  ██ ██ 
███████  ██████   ██████  ██ ██   ████ 
*/


.RayRight {
    width: 170vh;
    height: 170vh;
    position: relative;
    z-index: 0;
    transform: translateY(-52vh);
    animation: RayRight 120s infinite linear;
}

.RayLeft {
    width: 170vh;
    height: 170vh;
    position: relative;
    z-index: 0;
    transform: translateY(-252vh);
    animation: RayLeft 120s infinite linear;
}

@keyframes RayRight {
	from {
		transform: translateY(52vh) rotate(0deg);
	}
	to {
		transform: translateY(52vh) rotate(360deg);
	}
}

@keyframes RayLeft {
	from {
		transform: translateY(-222vh) rotate(0deg);
	}
	to {
		transform: translateY(-222vh) rotate(-360deg);
	}
}

.Entrees {
    width: 100%;
    height: 4vh;
    padding: 0.5vh;
    font-size: 1.5vh;
    transition: border-color 0.3s ease;
}



.Entrees:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.preview-image {
    height: 5vh;
    width: 5vh;
    border-radius: 1vh;
    display: none;
    justify-content: flex-start;
}

.file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.file-input-wrapper input[type=file] {
    margin-top: -5vh;
}


.preview-imageContainer{
    height: 5vh;
    width: 100%;
    z-index: 2;
    margin-top: -5vh;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}



















.arrow-icone {
  height: 10vh;
  width: 10vh; /* Vous devrez définir une largeur fixe avec mask */
  z-index: 999;
  margin-right: -0.5vh;
  opacity: 0.5;
  background-color: var(--CouleurPrincipal);
  -webkit-mask: url('/Medias/Images/arrow.svg') no-repeat center / contain;
  mask: url('/Medias/Images/arrow.svg') no-repeat center / contain;
}




body.vw-gt80 .Kofi{
  border:none;
  width:45vh;
  padding: 0.5vh;
  background: var(--CouleurPB);
  border-radius: 2vh; 
  height: 100%
}

body.vw-lt80 .Kofi{
    border: none;
    padding: 0.5vh;
    background: var(--CouleurPB);
    border-radius: 2vh;
    transform: scale(2);
    width: 44vw;
    max-width: 40vh;
    height: 40%;
}

.KofiBtn{
  height: 5.7vh; 
  width: 26vh; 
  background-image: url(../Medias/Images/Kofi.webp); 
  background-size: cover; 
  background-position: center; 
  border-radius: 1.2vh;
}

.KofiBtn:hover{
  height: 5.7vh; 
  width: 26vh; 
  background-image: url(../Medias/Images/Kofi.webp); 
  background-size: cover; 
  background-position: center; 
  border-radius: 1.2vh;
  filter: brightness(0.8);
}













body.vw-gt80 #CV-Contenue{
	flex-direction: row;
	min-height: 98vh; 
	width: calc(100% - 14vh); 
	flex-wrap: wrap;
	gap: 4vh;
}

body.vw-lt80 #CV-Contenue{
	flex-direction: column;
	min-height: 98vh; 
	width: 100%; 
	flex-wrap: wrap;
	gap: 2vh;
}

body.vw-gt80 #CV-Doc{
	border:none; height: 98vh; width: calc(98vh / 1.4142)
}

body.vw-lt80 #CV-Doc{
	border:none; height: 60vh; width: calc(60vh / 1.4142)
}

body.vw-gt80 #CV-Info{
	min-width: 60vh;
}

body.vw-lt80 #CV-Info{
	min-width: none;
}


    .Container{
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .CV-Title{
      white-space: nowrap;
      font-size: 3vh;
      font-weight: 700;
    }

    .CV-SubTitle{
      white-space: nowrap;
      font-size: 1.7vh;
      font-weight: 500;
    }

    .CV-SubTitle2{
      white-space: nowrap;
      font-size: 1.5vh;
      font-weight: 100;
    }

    .CV-Text{
      font-size: 1.3vh;
      font-weight: 300;
      text-shadow: 0.05px 0.05px 0px #000000, 0.05px -0.05px 0px #000000, -0.05px 0.05px 0px #000000, -0.05px -0.05px 0px #000000;
    }

    .EXP{
      height: auto; 
      width: 100%; 
      margin: 1.1vh 0;
    }

    .BLOC{
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 1vh;
      border: solid 0.1vh #BAB8C2;
    }

    .T1{
      font-size: 2.3vh;
      font-family: Rubik;
    }

    .T2{
      margin-top: -0.2vh;
      margin-bottom: 0.3vh;
      font-family: Rubik;
    }

    .T3{
      text-align: left;
      width: 100%;
      line-height: 1.3vh;
      margin: 0.2vh 0;
    }

    .BG{
background: #CDC1FF;
background: -moz-linear-gradient(-45deg, #CDC1FF 0%, #ACCAFF 100%);
background: -webkit-linear-gradient(-45deg, #CDC1FF 0%, #ACCAFF 100%);
background: linear-gradient(135deg, #CDC1FF 0%, #ACCAFF 100%);
border: solid 0.1vh rgba(0, 0, 0, 0.2);
    }





























/* État normal */
.interactive-card {
    position: relative;
    width: 32vh;
    height: 45vh;
    transform-origin: center;
    transition: transform 0.4s ease, width 0.4s ease, height 0.4s ease;
    margin: 1.5vh; 
    flex-direction: column; 
    cursor: pointer; 
    border-radius: 2vh; 
    box-shadow: 0 0.3vh 0 0 black
}

/* Quand la carte est ouverte */
.interactive-card.open {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, -50%) rotateY(180deg);
    border-radius: 2vh;
}


/* On masque les autres contenus lors du flip */
.interactive-card .Front-Content {
    transition: opacity 0.3s ease;
}
.interactive-card.open .Front-Content {
    opacity: 0;
    pointer-events: none;
}

.CardFront {
  background-color: #414141; 
  background-size: cover; 
  height: 100%; 
  width: 100%; 
  border-radius: 2vh;
}

.CardFront-Content {
  width: 100%; 
  height: 100%; 
  backdrop-filter: blur(10vh) saturate(2) brightness(2); 
  flex-direction: column; 
  border-radius: 2vh; 
}

.CardFront-Image {
  width: calc(100% - 2vh); 
  aspect-ratio: 1/1; 
  background-color: grey; 
  background-size: cover; 
  border-radius: 1vh 1vh 0 0;
  overflow: hidden;
}

.CardFront-Info {
  width: calc(100% - 2vh); 
  height: 29%; 
  background-color: transparent; 
  background-image: url(../Medias/Images/Noise.png); 
  background-size: cover; 
  border-radius: 0 0 1vh 1vh
}

.CardFront-Logiciels{
  height: 30%;
  width: 100%;
  margin: 0.5vh 0;
  flex-direction: row;
}

.CardFront-LogicielsImages{
  height: 3vh; 
  margin: 0.5vh
}



/* Le contenu interne apparaît avec un fade + flip */
.CardBack {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1vh);
    display: none;
    z-index: 9;
    transition: opacity 0.3s ease;
    background-color: #F5F0FF; 
    flex-direction: column;
    box-shadow: 0px 0px 4vh 0vh black;
}

.interactive-card.open .CardBack {
    display: flex !important;
    opacity: 1;
}

.close-card{
  height: 5vh; 
  width: 100%; 
  max-width: 40vh; 
  background-color: rgba(255, 0, 0, 0.2); 
  border-radius: 2vh; 
  cursor: pointer; 
  z-index: 8;
  transform: scaleX(-1);
  backdrop-filter: blur(1vh);
}

.CardBack-Content{
  height: 100svh; 
  margin-top: -8vh; 
  width: 100%; 
  max-width: 100vw; 
  flex-direction: column; 
  overflow-y: scroll; 
  overflow-x: hidden; 
  justify-content: flex-start; 
  transform: scaleX(-1);
}

.CardBack-Notes{
  width: calc(100% - 2vh);  
  height: 6vh; 
  border-radius: 0 0 3vh 3vh;
}

.CardBack-Description{
  width: calc(100% - 4vh); 
  max-width: 120vh;
  min-height: 8vh;
  margin-top: 2vh;
  margin-bottom: 8vh;
}

.CardBack-Videos{
  width: calc(100% - 2vh);  
  max-height: 84vh; 
  object-fit: contain;
}

.CardBack-Images{
  width: calc(100% - 2vh); 
  max-height: 84vh; 
  object-fit: contain;
  cursor: pointer;
  align-items: center;
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
}

.CardBack-Musiques{
 display: flex; 
 align-items: center; 
  width: calc(100% - 2vh); 
}


/* Fond sombre quand une carte est ouverte */
#card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0.5vh);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#card-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Placeholder qui évite que le layout bouge */
.card-placeholder {
    visibility: hidden;
}


.AudioVisualizer {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    gap: 0.2vh;
    margin: 0 0.5vh;
}

.Music-PlayPause{
    height: 5vh;
    width: 24vh;
    margin-top: 0.5vh;
    border-radius: 1vh;
    border: none;
    cursor: pointer;
    justify-content: flex-start;
}

.Music-PlayBack{
    height: 5vh;
    width: 5vh;
    margin: 0.5vh 0.5vh 0 0.5vh;
    border-radius: 1vh;
    border: none;
    cursor: pointer;
}

.AudioVisualizer-bar {
    background: lime;
    width: 1.5vh;
    min-width: 1vh;
    max-width: 2vh;
    height: 1vh;
    opacity: 0.5;
    min-height: 1vh;
    transition: height 0.05s linear, background 0.05s;
    border-radius: 3px 3px 0 0;
}















/* stats_styles.css - Styles pour le top des utilisateurs */

/* Conteneur du top utilisateurs */
#top-users-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

/* Item individuel d'utilisateur */
.top-user-item {
    display: flex;
    align-items: center;
    gap: 1.5vh;
    padding: 1.5vh;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.top-user-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

/* Rang de l'utilisateur */
.user-rank {
    font-weight: bold;
    font-size: 1.2em;
    min-width: 40px;
    text-align: center;
}

/* Couleurs pour les 3 premiers */
.top-user-item:nth-child(1) .user-rank {
    color: #FFD700; /* Or */
}

.top-user-item:nth-child(2) .user-rank {
    color: #C0C0C0; /* Argent */
}

.top-user-item:nth-child(3) .user-rank {
    color: #CD7F32; /* Bronze */
}

.top-user-item:nth-child(n+4) .user-rank {
    color: #888; /* Gris pour les autres */
}

/* Photo de profil */
.top-user-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.top-user-item:nth-child(1) img {
    border-color: #FFD700;
}

.top-user-item:nth-child(2) img {
    border-color: #C0C0C0;
}

.top-user-item:nth-child(3) img {
    border-color: #CD7F32;
}

/* Pseudo de l'utilisateur */
.user-pseudo {
    flex: 1;
    color: white;
    font-weight: 500;
    font-size: 1em;
}

/* Niveau */
.user-level {
    font-weight: bold;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    padding: 0.5vh 1vh;
    border-radius: 5px;
}

/* Points */
.user-points {
    color: #2196F3;
    font-size: 0.9em;
    margin-left: 1vh;
}

/* Responsive */
@media (max-width: 600px) {
    .top-user-item {
        gap: 1vh;
        padding: 1vh;
    }
    
    .top-user-item img {
        width: 40px;
        height: 40px;
    }
    
    .user-rank {
        min-width: 30px;
        font-size: 1em;
    }
    
    .user-pseudo {
        font-size: 0.9em;
    }
    
    .user-points {
        display: none; /* Masquer les points sur mobile */
    }
}














.chat-box{
  width: 100%; gap: 2vh; flex-direction: column; border-radius: 1.1vh; border: solid 0.3vh rgba(100, 100, 255, 0.1);
}

.chat-userPing{
  background-color: rgba(255, 150, 0, 0.18);
}

.chat-header{
  justify-content: flex-start; width: 100%; border-radius: 1vh 1vh 0 1vh; height: 4vh; background: linear-gradient(135deg, rgba(100, 100, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); flex-direction: row
}

.chat-userProfil{
  justify-content: center; flex: auto; gap: 0.5vh; overflow: hidden; flex-direction: row
}

.chat-avatar{
  width: 4vh; height: 4vh; border-radius: 1vh; object-fit: cover;
}

.chat-userPseudo{
  font-size: 2vh; flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; justify-content: flex-start;
}

.chat-userInfos{
  justify-content: right; width: 15vh; gap: 0.5vh; margin-right: 0.5vh; flex-direction: row
}

.chat-reply{
  width: 90%; text-align: left; background-color: rgba(0, 0, 0, 0.1); padding: 0.5vh; border-radius: 1vh; overflow-x: hidden;
}

.chat-message{
  width: 95%; text-align: left; overflow-x: hidden;
}

.chat-footer{
  width: 100%; border-radius: 1vh; height: 4vh; flex-direction: row
}

.chat-messageInfo{
  justify-content: center; gap: 0.5vh; overflow: hidden; flex-direction: row
}

.chat-badge {
    border-radius: 0.75vh;
    padding: 0 1vh;
    height: 3vh; 
    width: auto;
    border: none;
    white-space: nowrap;
}

.chat-btnOption, .chat-btnUp, .chat-btnReply, .chat-btnDown {
  background-color: rgba(100, 100, 255, 0.1);
  transition: background-color 0.2s ease;
}

.chat-btnOption:hover{
  background-color: rgba(0, 0, 255, 0.2);
}

.chat-btnUp:hover{
  background-color: rgba(0, 155, 0, 0.2);
}

.chat-btnReply:hover{
  background-color: rgba(155, 155, 0, 0.2);
}

.chat-btnDown:hover{
  background-color: rgba(155, 0, 0, 0.2);
}

.chat-btnOption.active{
  background-color: rgba(0, 0, 255, 0.3);
}

.chat-btnUp.active{
  background-color: rgba(0, 155, 0, 0.3);
}

.chat-btnReply.active{
  background-color: rgba(155, 155, 0, 0.3);
}

.chat-btnDown.active{
  background-color: rgba(155, 0, 0, 0.3);
}

.chat-btnDisable{
  background: none;
}

.chat-btnDisable:hover{
  background: none;
}

.chat-btnSend{
  border-radius: 0.75vh;
  padding: 0 1vh;
  background: #aaaeee;
  color: white; 
  border: none; 
  cursor: pointer;
  transition: background-color 0.3s;
  height: 13vh;
}

.chat-btnSend:hover{
  background: #667eea; 
}

.chat-btnToOriginal{
  display: none;
  background-color: blue;
}

.chat-btnToDown{
  display: none;
  background-color: orange;
}

.SpacingH{
  height: 98vh;
  flex: 1 1 50%;
}
  body.vw-lt80 .SpacingA {
    flex-direction: column;
  }

  body.vw-lt80 .SpacingH {
   width: 100vw;
    height: 93svh;
  }
    body.vw-gt80 .SpacingA {
    flex-direction: row;
  }

  body.vw-gt80 .SpacingH {
    width: 40vh;
    height: 98vh;
  }















.demos {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%
}



.Notes{
  height: 4vh; 
  width: 100%;
}

.NoteGray {
  filter: saturate(50%) brightness(700%);
  opacity: 0.3;
  cursor: pointer;
}

.NoteColor {
  filter: none;
  opacity: 1;
  cursor: pointer;
}



.G-6 {
  border: ;
  background: linear-gradient(90deg, #FF8080, #FFEB8A, #87FFC3, #8FCEFF, #C191FF, #FF8080);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-5 {
  background: linear-gradient(45deg, #FFBB00, #FFC300, #FFD700, #FFD700, #FFF9D1, #FFD700, #FFC300, #FFBB00);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-4 {
  background: linear-gradient(45deg, #CCF5FF, #CCF5FF, #EBFFFE, #CCF5FF, #CCF5FF);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-3 {
  background: linear-gradient(45deg, #E8CCCC, #E8CCCC, #E8D9D1, #E8CCCC, #E8CCCC);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

.G-2 {
  background: linear-gradient(90deg, #DCD8E8, #E8E8E8, #DCD8E8);
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.G-1 {
  background: #D6D6D6;
  background-size: 200% auto;
  color: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes shine {
  to {
    background-position: -200% center;
  }
}
































.contact-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 700px;
            width: 100%;
            padding: 40px;
        }
        
        .contact-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .contact-header h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .contact-header p {
            color: #666;
            font-size: 14px;
        }
        
        .user-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: <?php echo e($user['favorite_color']); ?>;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }
        
        .user-details {
            flex: 1;
        }
        
        .user-details strong {
            display: block;
            color: #333;
            margin-bottom: 3px;
        }
        
        .user-details small {
            color: #666;
        }
        
        .alert {
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            color: #333;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .required {
            color: #e74c3c;
        }
        
        
        .file-upload-area {
            border: 2px dashed #e0e0e0;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .file-upload-area:hover {
            border-color: #667eea;
            background: #f8f9ff;
        }
        
        .file-upload-area.dragover {
            border-color: #667eea;
            background: #f0f2ff;
        }
        
        #attachments {
            display: none;
        }
        
        .upload-icon {
            font-size: 48px;
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .upload-text {
            color: #666;
            margin-bottom: 5px;
        }
        
        .upload-limits {
            font-size: 12px;
            color: #999;
        }
        
        .selected-files {
            margin-top: 15px;
        }
        
        .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
            margin-bottom: 8px;
        }
        
        .file-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .file-icon {
            font-size: 20px;
        }
        
        .file-name {
            color: #333;
            font-size: 14px;
        }
        
        .file-size {
            color: #999;
            font-size: 12px;
        }
        
        .remove-file {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .remove-file:hover {
            background: #c0392b;
        }
        
        .back-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: #667eea;
            text-decoration: none;
            font-size: 14px;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }














.profile-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 60px 20px;
        text-align: center;
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .profile-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,0 L1200,0 L1200,120 Q600,60 0,120 Z" fill="rgba(255,255,255,0.1)"/></svg>') no-repeat bottom;
        background-size: cover;
    }
    
    .profile-avatar-large {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 5px solid white;
        object-fit: cover;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;
        margin: 0 auto 20px;
    }
    
    .profile-avatar-placeholder {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 5px solid white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 60px;
        font-weight: bold;
        color: white;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;
        margin: 0 auto 20px;
    }
    
    .profile-name {
        font-size: 2.5em;
        font-weight: bold;
        margin: 10px 0;
        position: relative;
        z-index: 1;
    }
    
    .profile-status {
        font-size: 1.1em;
        opacity: 0.9;
        position: relative;
        z-index: 1;
    }
    
    .moderator-badge {
        background: #ffd700;
        color: #333;
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: bold;
        display: inline-block;
        margin-top: 10px;
        font-size: 0.9em;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }
    
    .stat-card {
        background: white;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        text-align: center;
        transition: transform 0.3s;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    
    .stat-number {
        font-size: 2.5em;
        font-weight: bold;
        color: #667eea;
        margin: 10px 0;
    }
    
    .stat-label {
        color: #666;
        font-size: 0.9em;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .level-section {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin: 30px 0;
    }
    
    .level-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .level-badge {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 10px 25px;
        border-radius: 25px;
        font-size: 1.2em;
        font-weight: bold;
    }
    
    .progress-bar {
        width: 100%;
        height: 30px;
        background: #e0e0e0;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
    }
    
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        transition: width 0.5s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    
    .info-section {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin: 30px 0;
    }
    
    .info-row {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }
    
    .info-row:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: bold;
        color: #333;
    }
    
    .info-value {
        color: #666;
    }
    
    .not-found-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        text-align: center;
        padding: 40px;
    }
    
    .not-found-icon {
        font-size: 100px;
        margin-bottom: 20px;
    }
    
    .not-found-title {
        font-size: 2em;
        color: #333;
        margin-bottom: 10px;
    }
    
    .not-found-text {
        color: #666;
        margin-bottom: 30px;
    }
    
    .btn-back {
        display: inline-block;
        padding: 12px 30px;
        background: #667eea;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: background 0.3s;
    }
    
    .btn-back:hover {
        background: #5568d3;
    }
    
    .suspended-warning {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
        padding: 20px;
        border-radius: 10px;
        margin: 20px 0;
        text-align: center;
        font-size: 1.1em;
        box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
    }
    
    .suspended-warning h3 {
        margin: 0 0 10px 0;
        font-size: 1.5em;
    }
    
    .censored-text {
        background: #333;
        color: #333;
        padding: 2px 10px;
        border-radius: 3px;
        user-select: none;
        display: inline-block;
    }
    
    .moderator-actions {
        background: #fff3cd;
        border: 2px solid #ffc107;
        padding: 20px;
        border-radius: 10px;
        margin: 20px 0;
    }
    
    .moderator-actions h3 {
        margin: 0 0 15px 0;
        color: #856404;
    }
    
    .btn-suspend {
        background: #e74c3c;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em;
        transition: background 0.3s;
    }
    
    .btn-suspend:hover {
        background: #c0392b;
    }
    
    .btn-restore {
        background: #27ae60;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em;
        transition: background 0.3s;
    }
    
    .btn-restore:hover {
        background: #229954;
    }







/*
 █████  ██    ██ ████████ ██████  ███████ 
██   ██ ██    ██    ██    ██   ██ ██      
███████ ██    ██    ██    ██████  █████   
██   ██ ██    ██    ██    ██   ██ ██      
██   ██  ██████     ██    ██   ██ ███████ 
*/

.goog-te-banner-frame,
.goog-logo-link,
.goog-te-gadget {
  display: none !important;
}
.lang-btn {
  opacity: 0.3;
  font-size: 4vh;
  transition: opacity 0.2s ease;
}
.lang-btn.active {
  opacity: 1;
}