.clairvoyant{
  color: white;
  font-weight: bold;
}

.novice{
  color:  #636363;
}

.initie{
  color:  #b5b5b5;
}

.adepte{
  color:   #066364;
}

.initiateur{
  color:  #ce5757;
}

.savant{
  color: #FFC300;
}

.censure{
	text-decoration: line-through;
	text-decoration-thickness: 1em;
}


/* Styles globaux */

html, body {
    height: 100%; /* Permet de s'assurer que le body occupe toute la hauteur de la fenêtre */
    margin: 0; /* Supprime les marges par défaut */
    display: flex;
    flex-direction: column;
	min-width: 450px;
	
}

body {
    margin: 0;
    font-family: 'Georgia', serif; /* Une police classique pour un style mystérieux */
    background-color: #1b1f23; /* Fond sombre */
    color: #c5c8c6; /* Texte gris clair */
	display: flex; /* Utilise flexbox sur le body */
    flex-direction: column; /* Organise le contenu de haut en bas */
	background-image: url('/img/bg/otis-redding.png');
	
	
	
}

/* En-tête principal */
header {
    background-color: #0f0f0f; /* Noir profond */
	background-image: url('/img/bg/otis-redding.png');
    text-align: center;
    padding: 20px 0;
    position: relative;

}

main {
    flex: 1; /* Permet au contenu principal de prendre tout l'espace disponible */
	padding-top: 100px;
	padding-bottom: 100px;
	/*max-width: 64em;*/
	margin: auto;
	display: grid;
	grid-template-columns: 15em auto 15em;
	/*grid-template-rows: 1fr max-content;*/
	column-gap: 1em;
	/*width: 100%; ne pas réactiver ça casse la page*/
	
}

* {
  box-sizing: border-box;
  
}

.wrapper{
	/*background-color: #1f2428; normalement ça sert plus */
	width: 64em; /* pour grid*/
	/*margin:auto; ne pas réactiver inutile si width forcé */
}


a {
    color: inherit;
    text-decoration: none; /* Supprime le soulignement */
    font-weight: inherit;
   
}

a:hover {

    text-shadow: 0 0 5px #8a7fa6;
}



.header-title {
    font-size: 4em; /* Taille du titre */
    font-weight: bold;
     /* color: #8a7fa6; /* Violet sombre */
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8), 
                 0px 0px 10px #5f5e84; /* Ombre sombre avec une légère lueur */
    letter-spacing: 0.2em; /* Espacement entre les lettres pour "N O M" */
    text-align: center; /* Centré */
}




footer {
    background-color: #0f0f0f;
    text-align: center;
    margin-top: 20px;
	
}

hr{

	width: 50%;
	border: 1px dashed;
	
}

/* Section diaporama */
#slideshow {
    position: relative;
    width: 100%;
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
    background-color: #15191e; /* Fond de secours */
	flex: 2;
}

.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.slides {
    display: flex;
    transition: transform 1s ease-in-out;
    width: 100%; /* Sera ajusté dynamiquement en JS */
    height: 100%;
}

.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Sections carrées */
.content {
	display: flex;
    justify-content: space-between; /* Aligne les éléments horizontalement */
    /* width: 50%; /*Largeur globale de la section */
    margin: 20px auto; /* Garde une marge générale verticale */
    gap: 25px; /* Ajoute exactement 10 pixels d'espace entre les enfants */
	align-items: flex-end;
}

.square {
  
    background-color: #1f2428; /*ancien fond*/ 
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8); /* ombre */
    margin-top: 0;
    padding: 20px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.additional-content {
    display: flex;
    justify-content: space-between; /* Espace égal entre les éléments */
    /*width: 50%; /* Même largeur que .content */
	max-width: 75em;
    margin: 20px auto; /* Centré avec une marge verticale */
    gap: 25px; /* Espacement entre les squares */
	
}

.square h2 {
    color: #8a7fa6; /* Violet sombre */
}

.square p {
    color: #c5c8c6; /* Texte gris clair */
	font-size: 1.2em;
	/* margin: auto; */
	text-align: justify;
}

/* Page login */
.register-box {
    width: 32em;
    text-align: center;
	margin: auto;
}

.register-box h2 {
    color: #8a7fa6; 
    margin-bottom: 20px;
}

/* Styles du formulaire */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}

form label {
    text-align: left;
    font-weight: bold;
    color: #c5c8c6; /* Texte gris clair */
}

form input {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #252b30; /* Bordure initiale */
    border-radius: 5px;
    background-color: #252b30; /* Fond sombre */
    color: #ffffff;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5); /* Ombre subtile */
    transition: border 0.2s ease-in-out;
}

form input:focus {
    outline: none;
    border: 1px solid #39434a; /* Accentuation au focus */
}

/* Bouton de soumission */
form button {
    padding: 10px;
    font-size: 1em;
    font-weight: bold;
    color: inherit;
    background-color: inherit;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
	width: fit-content;
	margin: auto;
}

form button:hover {
    transform: translateY(2px);
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.8);
}

/* Messages d'erreur */
#error-message {
    color: #ff6666;
    font-size: 0.9em;
    margin-top: 10px;
}

input.error {
    border: 2px solid #ff6666; /* Bordure rouge en cas d'erreur */
}
/* Bouton Minecraft (skin + pseudo) */
.minecraft-profile a {
    display: flex; /* Aligne le skin et le pseudo horizontalement */
    align-items: center; /* Centre verticalement le skin et le pseudo */
    gap: 10px; /* Espace entre l'image et le pseudo */
    height: 50px; /* Assure la même hauteur que les autres boutons */
    line-height: 50px;
    padding: 0 20px;
    background-color: #252b30;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    color: #c5c8c6;
    box-shadow: 10px 10px 0px 0px #0f0f0f; /* Ombre par défaut (effet 3D) */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.minecraft-profile a:hover {
    background-color: #39434a;
    transform: translate(5px, 5px); /* Revenir à un plan 2D */
    box-shadow: none; /* Supprime l'ombre pour effet 2D */
}

.minecraft-profile img {
    width: 32px;
    height: 32px;
    border-radius: 5px; 
  
}

.minecraft-profile span {
    font-weight: bold;
    color: #c5c8c6;
    font-size: 1em;
}

#chat-container {

    max-width: 50em;
    margin: 100px auto 0 auto;
    background-color: #252b30;
    border-radius: 10px;
    /*padding: 15px;*/
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
	grid-row: 2;
	grid-column: 2;
	width: 100%;
}

#chat-messages {
    /*max-height: 300px;*/
    /*overflow-y: auto;*/
    margin-bottom: 10px;
    padding: 10px;
    background-color: #1f2428;
    border-radius: 5px;
}

#chat-messages div {
    margin-bottom: 10px;
    color: #c5c8c6;
}

#chat-messages .time {
    color: #8a7fa6;
    font-size: 0.8em;
}

#chat-messages .name {
    font-weight: bold;
    color: #c5c8c6;
}

#chat-input {
    padding: 10px;
    border: 1px solid #39434a;
    border-radius: 5px;
    background-color: #1f2428;
    color: #c5c8c6;
	width: 100%;
}

#chat-form {
    display: flex;
	flex-direction: row;
    gap: 10px;
}

.chat-delete {
	background: none;
	border: none;
	color: red;
}

.chat-avatar {
    width: auto;
    height: 1em;
    border-radius: 5px;
    vertical-align: middle;
}

/* Conteneur principal */
.forums-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  
}

/* Carte du forum */
.forum-card {
    background-color: #252b30;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
    padding: 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Titre centré */
.forum-title {
    font-size: 3em; /* Plus grand */
    font-weight: bold;
    color: #8a7fa6;
    margin-bottom: 10px;
}

/* Description en italique */
.forum-description {
    font-size: 1.5em;
    font-style: italic;
    color: #c5c8c6;
    margin-bottom: 20px;
}

/* Image en grand au format 21:9 */
.forum-image-container {
    width: 100%;
    aspect-ratio: 21 / 5; /* Format 21:9 */
    overflow: hidden;
    margin-bottom: 20px;
}

.forum-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajuste l'image pour remplir le conteneur */
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}

/* Liste des discussions */
.forum-discussions {
    width: 100%;
    margin-top: 20px;
}

.discussion-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.discussion-header {
    display: flex;
    font-weight: bold;
    font-size: 1.2em;
    border-bottom: 2px solid #39434a;
    padding: 10px 0;
	
}

.discussion-item {
    display: flex;
    border-bottom: 1px solid #39434a;
    padding: 10px 0;
}

.discussion-column-title {
    flex: 3; /* Plus large */
    text-align: left; /* Aligne à gauche */
}

.discussion-column-date {
    flex: 1.5; /* Largeur moyenne */
    text-align: left;
}

.discussion-column-author {
    flex: 1.5; /* Largeur moyenne */
    text-align: left; /* Alignement à gauche */
    font-size: 1em; /* Taille standard */
    font-weight: bold; /* Pour différencier des autres colonnes */
}

.discussion-title {
    font-size: 1em;
    color: #c5c8c6;
    text-decoration: none; /* Pas de soulignement */
   
}

/* Ligne "Accéder au forum" */

.forum-link {
    font-size: 1em; /* Taille du texte normale */
    font-weight: bold; /* Texte en gras pour visibilité */
    color: #8a7fa6; /* Violet sombre pour cohérence avec le thème */
    text-decoration: none; /* Pas de soulignement */
    
}


.forum-access {
		border-bottom: none;
}


.important-tag {
    font-weight: bold;
    color: #ffcc00; /* Couleur jaune pour attirer l'attention */
    margin-right: 5px; /* Espacement avec le titre */
}

/* Mention [Non lu] */
.unread-tag {
    font-weight: bold;
    color: #8a7fa6; /* Violet sombre */
    margin-right: 5px;
}

.minecraft-skin {
    height: 2em;
    width: auto; /* Conserve les proportions de l’image */
    margin-right: 8px; /* Espacement entre l’icône et le texte */
    vertical-align: middle; /* Aligne l’icône avec le texte */
    border-radius: 5px; /* Coins légèrement arrondis */
}




/* Conteneur principal des discussions */
.discussion-container {
    background-color: #252b30; /* Fond non transparent */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8); /* Ombre subtile */
    padding: 20px; 
}

/* Conteneur principal des messages */
.discussion-message {
    background-color: #252b30; /* Fond non transparent */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8); /* Ombre subtile */
    max-width: 1200px; /* Limite de largeur identique à forum-card */
    margin: 20px auto; /* Centre horizontalement et ajoute un espacement vertical */
    padding: 20px; /* Espacement interne */
}

/* En-tête de la discussion */
.discussion-header h2 {
    font-size: 2em;
    font-weight: bold;
    color: #ffffff; /* Texte en blanc */
    margin-bottom: 20px;
}

/* Messages individuels */
.message-container {
    display: flex;
    gap: 20px; /* Espace entre les colonnes */
    border-bottom: 1px solid #39434a; /* Séparation entre les messages */
    padding: 15px 0;
}

.message-author {
    flex: 1; /* Colonne pour l'auteur */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.avatar img{

	height:64px;

}



.author-info {
    text-align: center;
    color: #c5c8c6;
}

/* Contenu du message */
.message-content {
    flex: 3; /* Colonne pour le texte du message */
    text-align: left;
    color: #ffffff; /* Texte blanc */
    font-size: 1em;
    line-height: 1.6; /* Espacement des lignes */
}


.message-date {
    font-size: 0.9em;
    color: #8a7fa6;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    padding: 8px 15px;
    margin: 0 5px;
    text-decoration: none;
    color: #ffffff;
    background-color: #39434a;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.pagination a:hover {
    background-color: #8a7fa6;
    transform: translateY(-2px);
}

.pagination a.active {
    background-color: #8a7fa6;
    font-weight: bold;
}

.response-form textarea{
		resize: vertical;
		min-height: 20em;
}

/* PROFILES PESONNAGES JOUEURS */


.profile-container {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.profile-main-block {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
	align-items: flex-end;
}

.profile-left {
    width: 22%;
    background-color: #1f2428;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    text-align: center;
    font-size: 0.9em;
	display: flex;
	flex-direction: column;
}

.profile-left img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 auto 10px auto;
}

.profile-left h2 {
    font-size: 1.2em;
    color: #8a7fa6;
    margin-bottom: 8px;
}

.profile-right {
    flex: 1;
    background-color: #1f2428;
    padding: 20px;
    border-radius: 10px;
 
}

.profile-right p {
    display: -webkit-box;
    -webkit-line-clamp: 3;       /* Nombre max de lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;     /* Ajoute "..." si le texte est tronqué */
}

.profile-full-description {
    background-color: #1f2428;
    padding: 20px;
    border-radius: 10px;
   
    color: #c5c8c6;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* ou 'flex-start' selon l'effet souhaité */
    margin-top: 10px;
}

.profile-badges .badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.profile-badges .badge img {
    height: 16px;
    width: 16px;
    object-fit: contain;
}

.profil-description {
	position: relative;
}

.certification-ribbon {
	position: absolute;
	top: -12px;
	right: -25px;
	background-color: #000;
	color: white;
	padding: 5px 10px;
	transform: rotate(45deg);
	font-weight: bold;
	font-size: 0.85em;
	box-shadow: 0 2px 6px rgba(0,0,0,0.6);
	z-index: 10;

}

.profile-edit-button{
	margin-bottom: 15px;
	
}

.connected-users {
    position: absolute;
    top: 150px; /* ajuste en fonction de ton header/nav */
    left: 20px;
    width: 220px;
    background-color: #1f2428;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(138, 127, 166, 0.3);
    z-index: 100;
}

.connected-users h3 {
    color: #8a7fa6;
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: center;
}

.connected-users ul {
    list-style: none;
    padding-left: 0;
}

.connected-users li {
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
    color: #c5c8c6;
}

.unapproved-message{
	display: flex;
	flex-direction: row;
	font-style: italic;
	
}

.left-block {
    flex: 2;
	display: flex;
	padding: 20px;
	flex-direction: column;
}

.right-block {
    flex: 1;
	display: flex;
	padding: 20px;
	flex-direction: column;
}

.italic{
	
font-style: italic;
	
}

.quote{
	font-style: italic;
	quotes: "«" "»" "'" "'";
	text-align: justify;
	padding: 15px;
	font-size: 1em;
	font-family: 'Courier New', monospace;
	border-left: 1px solid;

}

#author{
	text-align: right;
	font-weight: bold;
	font-style: italic;
	font-size: 1em;
}


nav.side-nav{
  /*position: absolute;
	--a : 64em;
	--b: 15em;
	left: calc((100vw - 2 * var(--b) - var(--a) ) / 4);
	--b: 15em;*/
	width: var(--b);
}

ul.side-nav{
  list-style:none;
  font-size: 1.2em;
  /*margin-bottom: 50px;*/
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
  padding: 0;
  border-radius: 5px 5px 0 0;
  margin-top: 0;
  /*border: 1px solid #c5c8c650;*/
  display: flex;
	flex-direction: column;
  
  
  
  
}

ul.side-nav li:first-child{
  /*background-color: #1f2428;*/
  font-weight: bold;
  border-radius: 0 5px 0 0;
  margin: auto;
  height: 2em;
  
  
  
  
}

ul.side-nav li:last-child{
  border-radius: 0 0 5px 0;
  
  
  
}

ul.side-nav li{
  display: flex;
  align-items: center;
 
  
}

ul.side-nav li:not(:first-child){
  background-color: #252b30;
  cursor: pointer;
  border-top: 1px solid #c5c8c650;
  
}

ul.side-nav li:not(:first-child):hover{
  background-color: #39434a;
  display: flex;
  
}

ul.side-nav li a{

	padding: 20px;
	width: 100%;
	text-align: left;
	
}

ul.side-nav img{
	
	height: 2em;
	padding: 5px;
}

@media (max-width: 96em){

main{
	grid-template-columns: 15em auto;
    gap: 1em;
}

#chat-container{
	grid-column: 1 / span 2;
	
}
	
}


@media (max-width: 80em){

main{
	display:flex;
	flex-direction: column;
	width:100%;
}

.wrapper{
	width: 100%;
	
}


nav.side-nav{

	display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  grid-template-rows: 1fr auto 1fr;
	
}

	
}


@media (max-width : 50em){
	
	.header-title{
	font-size: 2em;
	}
	
}