/* Pour enlever les bordures blanches pour les appareils mobile (à mettre tout en haut du code)*/
*, *::before, *::after {
    box-sizing: border-box;
    /* margin: 0; */
    padding: 0;
}


/* ===== CACHER SCROLLBAR PAGE COMPLETE ===== */

html, body {
      overflow-x: hidden;
    overflow-y: scroll; /* garde le scroll actif */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge ancien */
    width: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}



/* BODY */
body {
    background: radial-gradient(
        circle at top, 
        #062451 0%, 
        #020100 60%, 
        #750202 100%);
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;  /* Crutial si on veut que notre page soit beau jusq'en bas */
    max-height: 1000vh; /* pour le test de zoom */
}





/* ------ Barre de Navigation ----- */
/* Bare de navigation Tout Cours */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
    to bottom,
    #000000 0%,
    #133466 100%  
    ); 
    border-bottom: 2px solid rgb(0, 0, 0);
    height: 60px
}


/* --- Gauche du header: Icon du site + titre --- */
.nav-left {
    display: flex;
    align-items: center;
    padding-left: 20px;
    flex-wrap: wrap;  
}

.nav-left a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.search-and-filters {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

.logo-icon {
    width: 32px;
}

.site-title {
    font-size: 22px;
    font-weight: bold;
    color: gold;
}



/* -- Partie HP du header (entre nav left et center) -- */
.nav-health {
    display: flex;
    justify-content: flex-end;
    width: 20%;
    padding-right: 10px;
}

/* Barre de vie dans le header */
.hp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hp-texte {
    font-size: 13px;
    color: #f5e6c8;
    white-space: nowrap;
}

/* Fond gris de la barre */
.hp-barre-fond {
    width: 120px;
    height: 10px;
    background: #3a0000;
    border-radius: 6px;
    border: 1px solid #7a0000;
    overflow: hidden;
}

/* Remplissage rouge de la barre */
.hp-barre-rempli {
    height: 100%;
    background: linear-gradient(to right, #ff2200, #ff6644);
    border-radius: 6px;
    transition: width 0.3s ease;
}



/* --- Le centre du header: Affichage des monnaies --- */
.nav-center {
    display: flex;
    justify-content: flex-end;
    width: 40%;
    padding-right: 10px;
}

.currency {
    display: flex;
    gap: 20px;
    font-size: 16px;
}

.currencyImg{
    width: 30px;
    height: 30px;
}

.gold {
    color: gold;
}

.silver {
    color: silver;
}

.bronze {
    color: #cd7f32;
}



/* --- Droite du header: Bouton connection, etc... --- */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 20px;
}

.nav-btn {
    border-radius: 15px;
    cursor: pointer;
    transition: 0.2s;
    padding: 10px 14px;
    color: #000;
    font-weight: bold;
}

.nav-btn:hover {
    background: #3f5f8c;
    transform: scale(1.05);
    font-weight: bold;
}



/* -- Bouton dans le navbar --*/
/* Login */
.login {
    background: linear-gradient(
    to bottom,
    #ffa600 0%, 
    #ff8706 100%  
    );   
    border: 3px solid #292929;
}

.login:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #ff9100;
    color: #ff9100;
    font-weight: bold;
}


/* Profil */
.profil {
    background: linear-gradient(
    to bottom,
    #ff5900 0%, 
    #fff700 100%  
    );   
    border: 3px solid #292929;
}

.profil:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #ffcc00;
    color: #ffcc00;
    font-weight: bold;
}


/* Administrateur */
.admin {
    background: linear-gradient(
    to bottom,
    #d90000 0%, 
    #dd0046 100%  
    );   
    border: 3px solid #292929;
}

.admin:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #dd002c;
    color: #dd002c;
    font-weight: bold;
}


/* Inventaire */
.inventory {
    background: linear-gradient(
    to bottom,
    #002aff 0%, 
    #00aeff 100%  
    );   
    border: 3px solid #292929;
}

.inventory:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #0062f4;
    color: #0062f4;
    font-weight: bold;
}


/* Panier */
.basket {
    background: linear-gradient(
    to bottom,
    #7bff00 000 0%, 
    #00ff88 100%  
    );   
    border: 3px solid #292929;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

.basket:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #00ff26;
    color: #00ff26;
    font-weight: bold;
}


/* Quêtes */
.quest {
    background: linear-gradient(
    to bottom,
    #8800ff 0%, 
    #ff008c 100%  
    );   
    border: 3px solid #292929;
}

.quest:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #b700ff;
    color: #b700ff;
    font-weight: bold;
}




/* ----- L'équivalent du Main: Hero -----*/
.hero {
    position: relative;
    text-align: center;
    padding: 60px 20px;
    min-height: 100vh;
    max-height: 1000vh;
}

/* Overlay Hero */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Contenu au-dessus de l'image */
.hero * {
    position: relative;
    z-index: 2;
}


.titreAccueil{
    /* font-family: "Bungee Spice", sans-serif;     Plus besoin de ce font car celui-ci ne s'affiche pas bien sur Mobile*/ 
    font-size: 40px;
    color: rgb(255, 187, 0);

    /* Effet glow pour le titre */
    text-shadow: 
    0 0 10px rgb(255, 94, 0),
    0 0 20px rgb(255, 94, 0),
    0 0 40px rgb(255, 60, 0),
    0 0 80px rgba(255, 40, 0, 0.5);
}

.hero p {
    color: #c7d3e6;
}




/* --- Barre de Recherche (search bar) --- */
.search {
    display: flex;
    justify-content: center;
}

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-btn {
    padding: 10px 16px;
    border: 3px solid #292929;
    border-radius: 5px;
    background: #ff9b00;
    color: #292929;
    cursor: pointer;
    transition: 0.2s;
    font-weight: bold;
}

.search-btn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #ffa51f;
    color: #ffa51f;
}

.search input {
    font-family: "Asimovian", sans-serif;
    font-size: 14px;
    width: 350px;
    padding: 10px;
    border: none;
}



/*  --- Barre de Filtrage --- */
/* Pour filtrer la page selon le type ou rareté */
.filters {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;
    flex-wrap: wrap;
}


/* Pour chaque ligne de filtre "ligne Rareté et ligne des Types */
.filter-group {
    display: flex;
    gap: 10px;
    align-items: center;

    flex-wrap: wrap;
    justify-content: center;
}

/* Pour les titre des catégories des filtre (Rareté et Type) */
.filter-strong{
    color: gold;
    font-weight: bold;
    width: 100%; /* Force le label sur sa propre ligne */
    text-align: center;
}

.filter-group button {
    font-family: "Asimovian", sans-serif;
    margin: 5px;
    padding: 12px 16px;
    border: none;
    border-radius: 6px;
    background: #243a5c;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    font-size: 14px;
}

.filter-group button:hover {
    background: #3f5f8c;
}

.filter-group button:active {
    background: #d48a00;
}



/* ----- Bouton pour les raretées (filters) (pas nécessaire pour le moments) -----*/
/* Common -> bleu pâle */
.filters button[name="rarete"][value="Common"]:hover,
.filters button[name="rarete"][value="Common"]:focus {
    background-color: #63acff;
    color: black;
}

/* Rare -> vert */
.filters button[name="rarete"][value="Rare"]:hover,
.filters button[name="rarete"][value="Rare"]:focus {
    background-color: #79ff50;
    color: black;
}

/* Epic - mauve */
.filters button[name="rarete"][value="Epic"]:hover,
.filters button[name="rarete"][value="Epic"]:focus {
    background-color: #ac2fff;
    color: white;
}

/* Legendary - orange/or */
.filters button[name="rarete"][value="Legendary"]:hover,
.filters button[name="rarete"][value="Legendary"]:focus {
    background-color: #ff7011;
    color: white;
}


/* ----- Bouton pour les types d'item (filters) -----*/
/* ARMES - rouge */
.filters button[name="type"][value="Arme"]:hover,
.filters button[name="type"][value="Arme"]:focus {
    background-color: #ff3b3b;
}

/* ARMURES - turquoise */
.filters button[name="type"][value="Armure"]:hover,
.filters button[name="type"][value="Armure"]:focus {
    background-color: #40e095;
    color: black;
}

/* POTIONS - bleu foncé */
.filters button[name="type"][value="Potion"]:hover,
.filters button[name="type"][value="Potion"]:focus {
    background-color: #002fc9;
}

/* SORTS - mauve */
.filters button[name="type"][value="Sort"]:hover,
.filters button[name="type"][value="Sort"]:focus {
    background-color: #d12b92;
}











/* ------ Affichage d'items ----- */
/* Alignement des Items (annonces) */
.items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    padding: 20px;
}


/* --- Carte des items (annonces) ---*/
.card {
    /* On enlève l'effet à chier des lien <a>*/
    display: block; /* Fait en sorte que l'annonce reste cliquable */
    text-decoration: none;
    color: inherit;
    border: 3px solid #1e3f6a;
    background: linear-gradient( to bottom, #081c3a, #300000);
    border-radius: 15px;
    width: 20%;
    margin: 1%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    transition: 0.2s;
    min-height: 40vh;
}

.card img{
    max-width: 60%;
    height: auto;
    margin-bottom: 10px;
    border: 3px solid #1e3f6a;
    border-radius: 20px;
    background: linear-gradient( to bottom, #081c3a, #300000);
}


.card:hover {
    transform: scale(1.05);
    border-color: #ff4949;;
}

.card h3 {
    color: #ffad42;
}

.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.price {
    margin-top: 10px;
    color: rgb(255, 187, 0);
    font-weight: bold;
}
.img-panier {
    width: 30px;
    height: 30px;
}





/*----- PAGE CONNECTION ET INSCRIPTION -----*/
.connection-btn {
    border-radius: 15px;
    cursor: pointer;
    transition: 0.2s;
    padding: 10px 14px;
    color: #000;
    font-weight: bold;
    background: #d48a00;
    border: 3px solid #292929;
    width: 95%;
}

.connection-btn:hover {
    background: rgb(230, 230, 230);
    transform: scale(1.05);
    border-color: #d48a00;
    color: #d48a00;
    font-weight: bold;
}


/* --- Connection --- */
#formLogin
{
    background: radial-gradient( 
    #7e0000 0%, 
    #200 100% 
    );
    color: #f5e6c8;
    font-weight: bold;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    width: 30%;
}

#formLogin a{
    color: #f5e6c8;
    font-weight: bold;
}


/*--- Inscription ---*/
#formInscription
{
    background: radial-gradient( 
    #7e0000 0%, 
    #200 100% 
    );
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    width: 50%; 
}

.retourConnect{
    color: #f5e6c8;
    font-weight: bold;
}




/* --- PAGE DÉTAIL --- */
.detail-card{
    /* On enlève l'effet à chier des lien <a>*/
    display: block; /* Fait en sorte que l'annonce reste cliquable */
    text-decoration: none;
    color: inherit;
    background: linear-gradient(
        to bottom,
        #0e3166, 
        #5b0000);
    border: 3px solid #336abc;
    border-radius: 15px;
    width: 60%;
    margin: 1%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    transition: 0.2s;
    min-height: 85vh;
}

.detail-card img{
    max-width: 20%;
    height: auto;
    border: 3px solid #3470be;
    border-radius: 20px;
    background: linear-gradient( to bottom, #081c3a, #300000);
}


.detail-card h1{
    color: #ffad42;
}

.detail-card h2 {
    color: #ff4242;
}


/*-- Pour le bouton acheter (détail) --*/
.ajouterBtn {
    background: radial-gradient(
    #00ff88 0%, 
    #00a558 100%  
    );   
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 8px 50px;
    font-weight: bold;
}


.ajouterBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: rgb(0, 175, 58);
    color: #00d15e;
    font-weight: bold;
    
}

/*-- Pour les boutons si refuser (détail) --*/
.refusBtn {
    background: radial-gradient(
    #ff0000 0%, 
    #d95c5c 100%  
    );   
    border: 3px solid #000000;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
    padding: 8px 50px;
    font-weight: bold;
}

.refusBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: rgb(175, 0, 0);
    color: #f60a0a;
    font-weight: bold;
}

/*-- Pour le bouton commentaire (détail) --*/
.commentaireBtn {
    background: radial-gradient(
        #fff200 0%, 
        #f7cf1d 100%  
    );   
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 8px 50px;
    font-weight: bold;
}

.commentaireBtn:hover {
    background: radial-gradient(
        #ffffff 0%, 
        #9dd8ff 100%  
    );   
    transform: scale(1.05);
    border-color: rgb(164, 220, 255);
    color: #000000;
    font-weight: bold;
}


/* Conteneur des boutons de la page détail (ajouter + commenter) */
.detail-btn-groupe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* Empêche le refusBtn de dépasser sur mobile */
.detail-btn-groupe .refusBtn {
    word-break: break-word;
    text-align: center;
    width: auto;
    max-width: 100%;
    padding: 10px 20px;
}

/* Taille uniforme des boutons dans le groupe */
.detail-btn-groupe .ajouterBtn,
.detail-btn-groupe .commentaireBtn {
    width: 200px;
}

/* Champ quantité de la page détail */
.quantite-item {
    width: 80px;
    padding: 8px;
    border-radius: 8px;
    background: #000;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    text-align: center;
    margin-left: 10px;
}

.quantite-item:focus {
    outline: 2px solid #1e3f6a; 
}

/* Conteneur label + input quantité centré sur la même ligne */
.quantite-groupe {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}



/*--- PAGE COMMENTAIRE ---*/
/* Textarea du commentaire */
.add-to-cart-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #1e3f6a;
    background: #1a1a2e;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    margin-top: 6px;
}

.add-to-cart-form textarea:focus {
    outline: none;
    border-color: #ffbf00;
}

/* Select de la note */
.add-to-cart-form select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid #1e3f6a;
    background: #1a1a2e;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    margin-top: 6px;
    cursor: pointer;
}

.add-to-cart-form select:focus {
    outline: none;
    border-color: #ffbf00;
}

/* Labels du formulaire commentaire */
.add-to-cart-form label {
    color: #f5e6c8;
    font-weight: bold;
    display: block;
    margin-top: 14px;
    margin-bottom: 4px;
}


/* Espacement général du formulaire commentaire */
.add-to-cart-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center; /* garde le texte à gauche dans le formulaire commentaire */
}

/* Remet le texte à gauche seulement pour le textarea de la page commentaire */
.add-to-cart-form textarea,
.add-to-cart-form label {
    text-align: left;
}

/* Label du commentaire aussi à gauche */
.add-to-cart-form label[for="commentaire"] {
    text-align: left;
    display: block;
}



/* Boutons retour au bas de la page commentaire */
.choix-apres-ajout {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.choix-apres-ajout .btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    color: white;
    background: linear-gradient(to bottom, #a60000, #600);
    text-decoration: none;
    transition: 0.2s;
}

.choix-apres-ajout .btn:hover {
    background: #ffffff;
    color: #8b0000;
}

/* Carte d'un commentaire individuel */
.commentaire-carte {
    width: 100%;
    min-height: auto;
    margin: 15px 0;
    text-align: left;
    background: linear-gradient(to bottom, #0e3166, #3b0000);
    border: 2px solid #336abc;
    border-radius: 12px;
    padding: 15px 20px;
}

.commentaire-carte p {
    margin: 6px 0;
}

/* Note + select + bouton sur la même ligne */
.commentaire-note-groupe {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
    text-align: left;
}

/* Empêche le label Note de prendre toute la largeur */
.commentaire-note-groupe label {
    display: inline;
    margin: 0;
    white-space: nowrap;
}




/*----- PAGE D'INVENTAIRE -----*/
.titreInventaire{
    font-size: 40px;
    color: rgb(0, 153, 255);
  
    /* Effet glow pour le titre */
    text-shadow: 
    0 0 10px rgb(0, 110, 255),
    0 0 20px rgb(0, 60, 255),
    0 0 40px rgb(0, 4, 255),
    0 0 80px rgb(68, 0, 255);
}


.cardInventaire {
    /* On enlève l'effet à chier des lien <a>*/
    display: block; /* Fait en sorte que l'annonce reste cliquable */
    text-decoration: none;
    color: inherit;
    border: 3px solid #1e3f6a;
    background: linear-gradient( to bottom, #081c3a, #300000);
    border-radius: 15px;
    width: 20%;
    margin: 1%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    transition: 0.2s;
    min-height: 40vh;
}

.cardInventaire:hover {
    transform: scale(1.05);
    border-color: #4954ff;;;
}

.cardInventaire img{
    max-width: 60%;
    height: auto;
    margin-bottom: 10px;
    border: 3px solid #1e3f6a;
    border-radius: 20px;
    background: linear-gradient( to bottom, #081c3a, #300000);
}

.cardInventaire h3 {
    color: #ffad42;
}


.vendreBtn {
    background: linear-gradient( 
    to bottom, 
    #4babff, 
    #5000ff
    );
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 6% 15%;
    margin-top: 1em;
    font-weight: bold;
}

.vendreBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #4babff;
    color: #4116ff;
    font-weight: bold;
}

.quantite-inventaire {
    width: 80px;
    padding: 8px;
    border-radius: 8px;
    background: #000;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    text-align: center;
    margin-left: 10px;
}

.quantite-item:focus {
    outline: 2px solid #4b75ff; 
}










/* ----- PAGE PANIER -----*/
.titrePanier{
    font-size: 40px;
    color: #36fe72;

    /* Effet glow pour le titre */
    text-shadow: 
    0 0 10px #000000,
    0 0 20px #09ff00,
    0 0 40px #66ff00,
    0 0 80px #9dff00;
}


/* Grid pour organiser les blocs du panier */
.grid-Achat{
    display: grid;
    grid-template-columns: 55% 45%; /* nombre de colonne */
    gap: 20px; /* Gap entre item */
}

/*--- Section des item ---*/
.listItemsPanier {
    padding: 20px;
}

.itemPanier{
    display: grid;
    text-decoration: none;
    color: inherit;
    border: 3px solid #1e3f6a;
    background: linear-gradient(to bottom, #081c3a85, #30000085);
    border-radius: 15px;
    margin: 1%;
    text-align: center;
    padding: 10px;
    transition: 0.2s;
    grid-template-columns: 30% 40% 30%;
    align-items: center;
    margin-bottom: 20px;
}

.itemPanier:hover {
    transform: scale(1.05);
    border-color: #00c378;;
}

.itemPanier h4{
    color: #f4d826;
}

.price {
    margin-top: 10px;
    color: #f4ce26;
    font-weight: bold;
}


/* Champ quantité de la page panier */
.quantite-panier {
    width: 80px;
    padding: 8px;
    border-radius: 8px;
    background: #000;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    text-align: center;
    margin-left: 10px;
}

.quantite-panier:focus {
    outline: 2px solid #50c87e; 
}


/* Bouton pour modifier la quantité de l'item */
.modifierQTBtn {
    background: linear-gradient(
    to bottom,
    #00e6ff 0%,
    #003fff 100%
    );
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 5% 15%;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.modifierQTBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #009dff;
    color: #0087ff;
    font-weight: bold;
}

/* Bouton pour supprimer l'item */
.supprimerBtn {
    background: linear-gradient(
    to bottom,
    #ff6060 0%, 
    #ff0a0a 100%  
    );   
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 5% 15%;
    font-weight: bold;
}

.supprimerBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #ff4444;
    color: #ff1e1e;
    font-weight: bold;
}




/* Récapitulatif des prix */
.titreRecap{
    color: rgb(255, 187, 0);
}

.recapitulatif{
    border: 3px solid #36fe72;
    border-radius: 15px;
    background: #0000005f;
    font-weight: bold;
    text-align: left;
    padding: 1.5em;
}

/* Bouton acheter les items */
.acheterBtn {
    background: linear-gradient(to bottom, 
    #00ff88 0%, 
    #00a558 100%
    );
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 1% 45%;
    font-weight: bold;
}

.acheterBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #00ff88;
    color: #00a558;
    font-weight: bold;
}





/*----- PAGE DE PROFIL -----*/
.profil-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 25px;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #b8860b;
    border-radius: 14px;
    box-shadow: 0 0 18px rgba(0,0,0,0.35);
}


.titreProfil{
    text-align: center;
    margin-bottom: 30px;
    font-size: 40px;
    color: #ffbf00;

    /* Effet glow pour le titre */
    text-shadow: 
    0 0 10px rgb(0, 0, 0),
    0 0 20px rgb(255, 143, 0), 
    0 0 40px rgb(255, 167, 0), 
    0 0 80px rgb(255, 120, 0);
}

.titreProfil h1 {
    margin-bottom: 10px;
}

.profil-grid {
    display: grid;
    gap: 20px;
}

.profil-carte {
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
}

.profil-carte h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

.profil-ligne {
    margin-bottom: 10px;
    font-size: 1rem;
}

.profil-ligne strong {
    display: inline-block;
    min-width: 130px;
}

.profil-badges {
    margin-top: 15px;
}

.profil-badge {
    display: inline-block;
    padding: 8px 14px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #b8860b;
    color: #fff;
    font-weight: bold;
}

.profil-actions {
    margin-top: 30px;
    text-align: center;
}

.profil-btn {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 8px;
    margin: 0 8px;
    font-weight: bold;
    color: white;
    background: linear-gradient(to bottom, #f47200, #700000);
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.profil-btn:hover {
    background: #ffffff;
    color: #f47200;
    border-color: #700000;
    transform: scale(1.05);
}



/*-- Page pour modifier le profil --*/
.modif-form {
    max-width: 550px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chaque champ label + input */
.modif-groupe {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modif-groupe label {
    font-weight: bold;
    color: #f5e6c8;
}

.modif-groupe small {
    color: #a0a0a0;
    font-size: 12px;
}

.modif-groupe input {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #1a1a2e;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    width: 100%;
}

.modif-groupe input:focus {
    outline: none;
    border-color: #ffbf00;
}

/* Boutons sauvegarder / annuler */
.modif-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.modif-btn-sauvegarder {
    background: linear-gradient(to bottom, #00c853, #007a33);
    color: #ffffff;
    cursor: pointer;
}

.modif-btn-sauvegarder:hover {
    background: #ffffff;
    color: #00c853;
    border-color: #00c853;
    transform: scale(1.05);
}

/* Message de succès */
.modif-succes {
    text-align: center;
    color: #36fe72;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

/* Liste d'erreurs */
.modif-erreurs {
    background: rgba(180, 0, 0, 0.3);
    border: 1px solid #ff4444;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 10px;
    color: #ff9999;
}





/*----- PAGE QUÊTES -----*/
.titreQuest{
    text-align: center;
    margin-bottom: 30px;
    font-size: 40px;
    color: #8800ff;

    /* Effet glow pour le titre */
    text-shadow: 
    0 0 10px #000000,
    0 0 20px #d400ff,
    0 0 40px #ff00ea,
    0 0 80px #ff0080;
}

.quest-container {
    display: grid;
    justify-items: center;
    max-width: 900px;
    margin: 40px auto;
    padding: 25px;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #9e0cc6;
    border-radius: 14px;
    box-shadow: 0 0 18px rgba(0,0,0,0.35);
}


/* -- Box du profil dans Quest -- */
.titreProfilQuest{
    text-align: left;
    margin-bottom: 30px;
    font-size: 30px;
    color: #ffbf00;

    /* Effet glow pour le titre */
    text-shadow: 
    0 0 10px rgb(0, 0, 0),
    0 0 20px rgb(255, 143, 0), 
    0 0 40px rgb(255, 167, 0), 
    0 0 80px rgb(255, 120, 0);
}

.profil-quest-container {
    padding: 20px;
    border: 2px solid #b8860b;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    text-align: left;
    width: 60%;
}

.profil-questItems {
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    text-align: left;
}


/*-- Boite de difficulté --*/
.difficulteQuest{
    margin-bottom: 30px;
}

.commencerQuestBtn {
    background: linear-gradient(
    to bottom,
    #ff7b3d 0%, 
    #ffb74b 50%,
    #ff994b 100%
    );   
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 1em 15em;
    margin-top: 1em;
    font-weight: bold;
}

.commencerQuestBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #ff7b3d;
    color: #ffb74b;
    font-weight: bold;
}


/*-- Boite de jeux --*/
.gameQuest{
    margin-bottom: 30px;
}

.validerQuestBtn {
    background: linear-gradient(
    to bottom,
    #46ff77 0%, 
    #64ff45 50%,
    #75e53d 100%
    );   
    border: 3px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    padding: 1em 15em;
    margin-top: 1em;
    font-weight: bold;
}

.validerQuestBtn:hover {
    background: #ffffff;
    transform: scale(1.05);
    border-color: #54d23a;
    color: #46ff77;
    font-weight: bold;
}





/*----- PAGE ADMIN -----*/
.admin-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 15px;
}

/* Colonnes gauche et droite */
.admin-side {
    flex: 1;
    max-width: 300px;
}

/* Colonne centrale (formulaire principal) */
.admin-center {
    flex: 2;
    max-width: 700px;
}

/* Style commun à tous les formulaires admin */
.admin-form {
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #ff0f0f;
}

/* Titre principal de la page admin (comme un h1) */
.titreAdmin {
    text-align: center;
    margin-bottom: 20px;
    font-size: 40px;
    color: #ff1138;
    text-shadow:
        0 0 10px rgb(0, 0, 0), 
        0 0 20px rgb(255, 0, 0), 
        0 0 40px rgb(255, 60, 0), 
        0 0 80px rgb(255, 0, 76);
}

/* Titre des sections/fonctions admin (comme un h2) */
.titreFonction {
    text-align: center;
    margin-bottom: 20px;
    font-size: 30px;
    color: #ff3000;
    text-shadow: 
        0 0 10px rgb(0, 0, 0), 
        0 0 20px rgb(255, 36, 0), 
        0 0 40px rgb(255, 143, 0), 
        0 0 80px rgb(255, 0, 0);
}

/* Labels des formulaires admin SEULEMENT */
.admin-form label {
    font-weight: bold;
    display: block;
    margin-top: 12px;
    margin-bottom: 6px;
    color: #f5e6c8;
}

/* Inputs, selects et textareas des formulaires admin SEULEMENT */
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #1a1a2e;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    box-sizing: border-box;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: #ff0f0f;
}

.admin-form textarea {
    min-height: 100px;
    resize: vertical;
}


/* Boutons de la page admin */
.admin-btn {
    width: 100%;
    margin-top: 16px;
    background: linear-gradient(to bottom, #a60000, #600);
    color: white;
    padding: 12px;
    border: 3px solid #000000;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    transition: 0.2s;
}

.admin-btn:hover {
    background: #ffffff;
    color: rgb(131, 0, 0);
    border-color: #a60000;
    transform: scale(1.02);
}


/* Message d'erreur admin */
.admin-form .err {
    margin-top: 15px;
    color: #ff6b6b;
    list-style: disc;
    padding-left: 20px;
}

/* Message de succès admin */
.admin-form .succes {
    margin-top: 15px;
    color: #7CFC00;
    font-weight: bold;
    text-align: center;
}







/*  MODE MOBILE */
@media (max-width: 1100px) {
    /*----- PAGE D'ACCUEIL -----*/
    /*--- Titre plus petit sur mobile ---*/
    .titreAccueil {
        font-size: 30px;
    }
    

    /*--- Navbar mobile ---*/
    .navbar {
        flex-direction: column;
        height: auto;
        padding: 10px 0;
        gap: 8px;
    }

    .nav-left {
        width: 100%;
        justify-content: center;
        padding-left: 0;
        order: 1; /* nav-left pour le logo en premier */
    }

    
    /*--- Barre de vie mobile ---*/
    .nav-health {
        width: 100%;
        justify-content: center;
        order: 2; /* Entre nav-left (order:1) et nav-center (order:3) pour le nombre d'hp du joueur*/
    }

    .hp-barre-fond {
        width: 160px;
    }


    .nav-center {
        width: 100%;
        justify-content: center;
        order: 3; /* nav-center pour la monnaies en deuxième */
    }

    .nav-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        padding-right: 0;
        order: 4; /* nav-right pour le boutons en dernier */
    }

    
    /*--- 2 cartes par rangée en portrait --- */
    .card {
        width: 44%;
        margin: 2% 3%;
        min-height: auto;
        word-break: break-word;
    }

    /* Détail des card, trop mince sur mobile */
    .detail-card {
    width: 92%;
    margin: 10px auto;
    word-break: break-word;
    }

    .detail-card img {
        max-width: 50%;
    }


    /*--- Barre de recherche ---*/
    .search-form {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0 20px;
    }

    .search input {
        width: 100%;
        max-width: 340px;
    }

    .search-btn {
        width: 100%;
        max-width: 340px;
    }

    /*--- Panier: 1 colonne ---*/
    .grid-Achat {
        grid-template-columns: 1fr;
    }


    /*--- Filtre des cards ---*/
    .filter-group {
        flex-wrap: nowrap; /* Force toute sur une seule ligne */
        justify-content: center;
        width: 100%;
        overflow-x: auto; /* Scroll horizontal si les boutons sont trop serré */
        padding-bottom: 4px;
    }

    .filter-group button {
        padding: 14px 12px;
        font-size: 11px;
        margin: 2px;
    }

    .filter-strong {
        width: 100%;
        text-align: center;
    }




    /*--- PAGE DÉTAIL ---*/

    .detail-btn-groupe {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* Boutons plus larges sur mobile */
    .detail-btn-groupe .ajouterBtn,
    .detail-btn-groupe .commentaireBtn {
        width: 80%;
        padding: 12px 0;
    }

    /* champ quantité */
    .add-to-cart-form input[type="number"] {
        width: 120px;
        font-size: 18px;
        padding: 10px;
    }


    /*--- PAGE COMMENTAIRE ---*/
    .choix-apres-ajout {
        flex-direction: column;
        align-items: center;
    }

    .choix-apres-ajout .btn {
        width: 80%;
        text-align: center;
    }

    /* Conteneur note + bouton publier sur la même ligne avec gap */
    .commentaire-note-groupe {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
        flex-wrap: wrap;
    }





    /*----- PAGE LOGIN ET INCRIPTION ----- */
    #formLogin,
    #formInscription {
        width: 92%;
        padding: 20px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"] {
        width: 100%;
    }

    button {
        width: 100%;
    }




    /*----- PAGE PROFIL -----*/
    .titreProfil{
        font-size: 30px;
    }

    .profil-grid {
        grid-template-columns: 1fr;
    }

    .profil-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .profil-btn {
        width: 80%;
        text-align: center;
    }

    /*-- Page modifier profil --*/
    .modif-actions {
        flex-direction: column;
        align-items: center;
    }

    .modif-actions .profil-btn,
    .modif-actions button {
        width: 80%;
        text-align: center;
    }




    /* ----- PAGE PANIER -----*/
    .titrePanier{
        font-size: 30px;
    }




    /*----- PAGE INVENTAIRE -----*/
    .titreInventaire{
        font-size: 30px;
    }

    .vendreBtn {
    padding: 10% 15%;
    }

    .cardInventaire {
        width: 44%;
        margin: 2% 3%;
        min-height: auto;
        word-break: break-word;
    }



    /*----- PAGE QUEST -----*/
    .titreQuest{
        font-size: 30px;
    }

    .profil-quest-container {
        width: 80%;
    }

    .commencerQuestBtn {
        padding: 5% 15%;
    }

    .validerQuestBtn {
        padding: 5% 15%;
    }



    /*----- PAGE ADMIN -----*/
    .titreAdmin {
        font-size: 30px;
    }
  
    .titreFonction {
        font-size: 20px;
    }


    .admin-section {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }

    .admin-side {
        width: 100%;
        max-width: 100%;
    }

    .admin-center {
        width: 100%;
        max-width: 100%;
    }
}