/* Légende de: :root
Permet de stocker sous forme de variable différentes valeurs.
Leurs nom devrais ce suffire à eux même, hésitez pas à jouer avec ces couleurs pour voir ce que ca modifie !
Vous retrouverez ces variables utiliser plusieurs fois dans cette feuille de style uniquement.
*/

:root{
	--OOB: #110e18;
	--Body: #2a2a40;
	--CouleurPrincipal: #6245bb;
	--CouleurElements: #938be5;
	--CouleurDeFont: #110e18;

	--CouleurPT: rgba(18, 14, 33, 0.5); /*Interieur fenetre */
	--CouleurPT2: rgba(80, 49, 153, 0.5); /*Interieur fenetre */
	--CouleurPB: rgb(10, 10, 10, 0.65); /*Exterieur fenetre */

	--CouleurAlt1: #ccb1ff;
	--CouleurAlt2: #8985cd;
	--CouleurAlt3: #99afff;

	--CouleurLumineuse: #514e66; /* Menu */
	--CouleurFontMenu: #141421; /* Menu */
	--CouleurSombre: #595959; /*Fines bordures*/

	--CouleurLumineuseText: #dedae7;
	--CouleurSombreText: #c8c1d6;
	--CouleurTransparance: rgba(0,0,0,0.5);

	--CouleurRefus: #832424;
	--CouleurRefusClair: #533131;
	--CouleurAccepter: #30E697;

	--CouleurMid: #323047; /* Scrollbar et footer*/
	--CouleurHover: #996f21; /* Scrollbar et boutons */
	--CouleurHover2: #6B6819; /* Scrollbar et boutons */

	--CouleurFoot:  #1c1d29; /* Footer */
}

@font-face {
  font-family: 'Itim';
  src: url('../Themes/Fonts/Itim-Regular.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  x-height: 2vh;
}

@font-face {
  font-family: 'NerkoOne';
  src: url('../Themes/Fonts/NerkoOne-Regular.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

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

body.vw-lt80 .SmallText{
  font-size: 1.8vh;
  line-height: 1.8vh;
}
body.vw-gt80 .SmallText{
  font-size: 2vh;
  line-height: 2vh;
}
body.vw-lt80 .SmallTextAlt{
  font-size: 1.8vh;
  line-height: 1.8vh;
}
body.vw-gt80 .SmallTextAlt{
  font-size: 2vh;
  line-height: 2vh;
}


body.vw-lt80 .StandartText{
	font-size: 2.2vh;
	line-height: 2.2vh;
}
body.vw-gt80 .StandartText{
	font-size: 2.6vh;
	line-height: 2.6vh;
}
body.vw-lt80 .StandartTextAlt{
	font-size: 2.2vh;
	line-height: 2.2vh;
}
body.vw-gt80 .StandartTextAlt{
	font-size: 2.6vh;
	line-height: 2.6vh;
}


body.vw-lt80 .TitleText{
	font-size: 4.1vh;
	text-decoration: none;
}
body.vw-gt80 .TitleText{
	font-size: 4.8vh;
	text-decoration: none;
}
body.vw-lt80 .TitleTextAlt{
	font-size: 5.1vh;
	text-decoration: none;
}
body.vw-gt80 .TitleTextAlt{
	font-size: 5.8vh;
	text-decoration: none;
}


body.vw-lt80 .BigTitle{
	font-size: 8vh;
	text-decoration: none;
	white-space: nowrap;
}
body.vw-gt80 .BigTitle{
	font-size: 13vh;
	text-decoration: none;
	white-space: nowrap;
}


.StandartText, .SmallText{
	color: var(--CouleurSombreText);
	font-family: 'Itim', sans-serif;
	font-weight: normal;
}

.StandartTextAlt, .SmallTextAlt{
	color: var(--CouleurLumineuseText);
	font-family: 'Itim', sans-serif;
	font-weight: normal;
}

.LinkText{
	color: var(--CouleurElements);
	font-family: 'Itim', sans-serif;
	font-weight: normal;
	text-decoration: underline;
}

.TitleText{
	color: var(--CouleurElements);
  font-family: 'NerkoOne', sans-serif;
  white-space: nowrap
}

.TitleTextAlt{
	color: var(--CouleurLumineuseText);
  font-family: 'NerkoOne', sans-serif;
  text-shadow: 0px 0px 0.5vh #000000;
  white-space: nowrap
}

.BigTitle{
	color: var(--CouleurLumineuseText);
	text-shadow: -3px -3px 0px var(--CouleurElements), -3px 3px 0px var(--CouleurPrincipal), 3px 3px 0px var(--CouleurPrincipal), 3px -3px 0px var(--CouleurPrincipal), 3px 10px 0px var(--CouleurFoot), -3px 10px 0px var(--CouleurFoot);
	font-family: 'NerkoOne', sans-serif;
	white-space: nowrap
}

.OptionsClose{
	color: var(--CouleurSombreText);
	font-family: 'Itim', sans-serif;
	font-weight: normal;
}
.OptionsClose:hover{
	color: var(--CouleurRefus);
	font-family: 'Itim', sans-serif;
	font-weight: normal;
}


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

Légende de: Structure
CorpDuSite: C'est toute la partie à l'exterieur de la fenêtre principal et du menu, le "premier calque" que le navigateur génère
Debordement: C'est les parties en dehors du champ de vision, sauf si vous avez un écran super-large, ils apparaisse lorsque le site atteint sa largeur maximal.
Menu: Correspond aux 3 "bulles" regroupant les différents boutons.
EncocheMenu: Altère l'encoche qui déroule le menu horizontal uniquement.
FenetrePrincipal: Modifie la "fenetre" qui inclut tout le contenue de la page. C'est comme une écran de télévision !
PremierePage: Sert à stylisé la premiere page/banière de chaque page.
DernierePage: Sert à stylisé la derniere page/banière si elle est présente.
ArrierePlan: Permet de crée un arrière plan où vas ce positioner tout le contenue de la page.
*/


.CorpDuSite{
	background-color: var(--Body);
}

.Debordement{
	background-color: var(--OOB);
	border: solid 0.1vh var(--CouleurSombre);
	box-shadow: 0vh 0vh 0.5vh 0 rgba(0, 0, 0, 0.5);
}

.Menu{
	border-radius: 1.25vh;
	background-color: var(--CouleurFontMenu);
	border: solid 0.2vh var(--CouleurSombre);
}

.Panneau{
	background-color: var(--CouleurFontMenu);
	border: solid 0.2vh var(--Body);
}

.EncocheMenuExterieur{
	border-radius: 0 2.4vh 2.4vh 0; 
	background-color: var(--CouleurFontMenu); 
	border: solid 0.2vh var(--CouleurSombre);
}

.EncocheMenuInterieur{
	background-color: var(--CouleurLumineuse);
	border: solid 0.2vh var(--CouleurSombre); 
	border-left: none;
	border-radius: 0 1.6vh 1.6vh 0;
}

.EncocheMenuInterieur:hover{
	background-color: var(--CouleurHover);
}

.FenetrePrincipal{
	border: solid 0.2vh var(--CouleurSombre);
	border-radius: 2vh;
}

.PremierePage{
background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 20%,
      var(--CouleurPrincipal) 100%
    ),
    linear-gradient(
      to right,
      var(--CouleurAlt1),
      var(--CouleurAlt2),
      var(--CouleurAlt3)
    );
}

.DernierePage{
	
}

.ArrierePlan{
  background-image: url(Images/FontAlt.png);
  background-size: 30vh;
  background-repeat: repeat;
}


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

Légende de: Boutons
BoutonPrincipal: Modifie le style des boutons les plus utiliser sur le site.
BoutonMenu: Modifie uniquement les boutons présent dans le menu.
BoutonInterdit: Lorsqu'une page/action n'est pas disponible ou désactiver, utiliser ce bouton.
Astuce: 
:hover signifie "en survol". Lorsque vous passerez la sourie sur le bouton, les styles re-définie serons écraser.
::active signifie.... "actif" ! Lorsque vous cliquez sur un bouton, les styles re-définie serons écraser.
*/


.BoutonPrincipal{
	border-radius: 1vh;
	background: linear-gradient(45deg,var(--CouleurTransparance),var(--CouleurTransparance));
	border: solid 0.1vh var(--CouleurSombre);
	transition: all 0.4s ease;
	box-shadow: none;
}

.BoutonPrincipal:hover{
	background: linear-gradient(45deg,var(--CouleurHover),var(--CouleurHover2));
	border: solid 0.1vh var(--CouleurSombre);
	transition: all 0s ease;

	box-shadow: 0 0.2vh 0.2vh 0.1vh rgba(0, 0, 0, 0.3);
	transform: translateY(-0.2vh);
	animation: rainbow 5s infinite linear;
}

.BoutonPrincipal::active{
	background: linear-gradient(45deg,#EFEFEF,#FEFEFE);
	border: solid 0.1vh var(--CouleurSombre);
	transition: all 3s ease;
}

@keyframes rainbow{
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(-360deg);
  }
}

.BoutonSecondaire{
	border-radius: 1vh;
	background-color: var(--CouleurPrincipal);
	border: solid 0.1vh var(--CouleurSombre);
	transition: all 0.4s ease;
	box-shadow: none;
	padding: 0.5vh 2vh;
}

.BoutonSecondaire:hover{
	background-color: var(--CouleurHover);
	border: solid 0.1vh var(--CouleurSombre);
	transition: all 0s ease;

	box-shadow: 0 0.2vh 0.2vh 0.1vh rgba(0, 0, 0, 0.3);
	transform: translateY(-0.2vh);
	animation: rainbowAlt 5s infinite linear;
}

.BoutonSecondaire::active{
	background: linear-gradient(45deg,var(--CouleurAlt1),var(--CouleurAlt2));
	border: solid 0.1vh var(--CouleurSombre);
	transition: all 3s ease;
}

.BoutonMenu{
	border-radius: 1vh; 
 	border: solid 0.2vh var(--CouleurSombre);
 	background-color: var(--CouleurLumineuse); 
}

.BoutonMenu:hover{
	background-color: var(--CouleurHover); 
}

.BoutonMenu::active{
	background-color: var(--CouleurPrincipal); 
}

.BoutonInterdit{
	background-color: var(--CouleurRefusClair); 
}

.BoutonInterdit:hover{
	background-color: var(--CouleurRefus); 
	cursor: not-allowed;
}

.BoutonFenetre{
	border: solid 0.1vh grey; 
	width: 4vh; 
	height: 2vh; 
	border-radius: 1vh;
	font-family: sans-serif;
}

.BoutonFenetre.FenetreTaille{
	background-color: rgba(255, 205, 0, 0.1);
}
.BoutonFenetre.FenetreFermer{
	background-color: rgba(255, 0, 0, 0.1);
}
.BoutonFenetre.FenetreTaille:hover{
	background-color: rgba(255, 205, 0, 0.6);
}

.BoutonFenetre.FenetreFermer:hover{
	background-color: rgba(255, 0, 0, 0.6);
}

.BoutonClose{
	padding: 0.5vh 2vh;
	border-radius: 1vh;
	background-color: var(--CouleurRefus);
	border: solid 0.1vh var(--CouleurSombre);
	backdrop-filter:  blur(1vh);
	opacity: 0.7;
	transition: all 0.4s ease;
	box-shadow: none;
}

.BoutonClose:hover{
	background-color: var(--CouleurRefus);
	border: solid 0.1vh var(--CouleurSombre);
	backdrop-filter:  blur(1vh);
	opacity: 1;
	transition: all 0s ease;
	box-shadow: 0 0.2vh 0.2vh 0.1vh rgba(0, 0, 0, 0.3);
}

.BoutonClose::active{
	background: linear-gradient(45deg,var(--CouleurAlt1),var(--CouleurAlt2));
	border: solid 0.1vh var(--CouleurSombre);
	transition: all 3s ease;
}


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

Légende de: Contenue
BoiteExterieur: Modifie l'envollope entourant les différentes boites de contenus.
BoiteInterieur: Modifie les boites de contenus.
*/

.BoiteSimple{
	background-color: var(--CouleurLumineuse);
	border-radius: 1vh;
	border: solid 0.2vh var(--CouleurSombre);
	flex-direction: row;
	overflow: hidden;
}

.BoiteExterieur{
	background: linear-gradient(45deg, var(--CouleurPT2) 0%, var(--CouleurPT) 50%, var(--CouleurPT2) 100%);
  border-radius: 3vh;
  border: solid 0.2vh var(--CouleurSombre);
  backdrop-filter:  blur(0.4vh);
  padding: 1vh;
  padding-top: 0;
  box-shadow: 0 0.5vh 1vh 0 rgba(0,0,0,0.2);
}

.BoiteInterieur{
	background-color: var(--CouleurPB);
	border-radius: 2vh;
	border: solid 0.2vh var(--CouleurSombre);
	padding: 1vh;
	width: calc(100% - 2vh);
}

.Entrees{
	background-color: var(--CouleurLumineuse);
	box-shadow: 0px 0px 0.5vh -0.2vh rgba(0, 0, 0, 1);
	border: 2px solid var(--CouleurSombre);
   border-radius: 10px;
}


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


::-webkit-scrollbar {
  width: 1.5vh; /* scrollbar verticale */
}

::-webkit-scrollbar-thumb {
  background-color: var(--CouleurPrincipal); /* couleur de la poignée */
  border-radius: 0.5vh; /* coins arrondis */
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background: var(--CouleurMid); /* couleur de fond de la track */
  border-radius: 0.5vh;
}

/* Au survol */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--CouleurHover); /* couleur plus foncée de la poignée */
}

scrollbar-width: thin; /* Contrôle la largeur de la scrollbar */
scrollbar-color: var(--CouleurPrincipal) var(--CouleurMid); /* Couleur de la poignée et de la track */