/* Interface du jeu, deuxième version : cadres de cuir sombre et filets d'or, rivets aux coins,
   barres lisibles d'un coup d'œil. Ce fichier se charge après style.css et n'en change que l'habillage. */

:root {
  --cuir: #1b1611;
  --cuir-fonce: #0f0c09;
  --filet: #6b5328;
  --filet-sombre: #2e2418;
  --or: #e0bd6e;
  --or-vif: #f6dc98;
  --vert-vie: #7fd06a;
  --rivets:
    radial-gradient(circle at 7px 7px, var(--or) 1.4px, #6b5328 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--or) 1.4px, #6b5328 2.2px, transparent 2.8px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--or) 1.4px, #6b5328 2.2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--or) 1.4px, #6b5328 2.2px, transparent 2.8px);
  --fond-cadre: linear-gradient(180deg, #211a13f2, #120e0af2);
  --cadre-ombre: 0 0 0 1px #070605, inset 0 0 0 1px #00000099, inset 0 1px 0 #ffffff14, 0 12px 28px #000000a8;
}

/* --- Le cadre commun : cuir, filet d'or, rivets --- */
.hud, .chrono, .carte, .poids, .premiers-pas, .hud-base p, .hud-base button, .barre-rapide, .modal, .fenetre-jeu,
.panneau-reglable, .panneau-groupe, .invitation-groupe, .dialogue, .toast, .invite, .camp.dans-base .joueur-camp,
.camp.dans-base .raccourcis button, .extraction, .vie-boss, .fouille {
  background: var(--rivets), var(--fond-cadre);
  border: 1px solid var(--filet);
  border-radius: 4px;
  box-shadow: var(--cadre-ombre);
}

/* --- Boutons --- */
button, .ecran-boutons a {
  border-radius: 3px;
  background: linear-gradient(180deg, #2a2118, #18130e);
  border: 1px solid var(--filet-sombre);
  box-shadow: inset 0 1px 0 #ffffff10, 0 1px 0 #00000080;
  transition: border-color .12s, color .12s, box-shadow .12s, filter .12s;
}
button:hover:not(:disabled), .ecran-boutons a:hover { color: var(--or-vif); border-color: var(--filet); box-shadow: inset 0 1px 0 #ffffff18, 0 0 10px #e0bd6e33; }
button:active:not(:disabled) { filter: brightness(.9); transform: translateY(1px); }
button.principal {
  color: #2a1606; font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .03em;
  background: linear-gradient(180deg, #f6dc98, #c99a45 55%, #9c7230);
  border: 1px solid #f6dc98; box-shadow: 0 0 0 1px #3d2a10, inset 0 1px 0 #fff6, 0 6px 18px #00000099;
  text-shadow: 0 1px 0 #ffe9b866;
}
button.principal:hover:not(:disabled) { color: #1c0e02; filter: brightness(1.08); box-shadow: 0 0 0 1px #3d2a10, inset 0 1px 0 #fff8, 0 0 18px #e0bd6e88; }
.bouton-croix { border-radius: 50%; }

/* --- Le haut de l'écran en ville et à la base : la plaque du héros, et les raccourcis --- */
.camp.dans-base .camp-haut { padding: 12px 14px; }
.camp.dans-base .joueur-camp { order: -1; margin-left: 0; gap: 14px; padding: 10px 16px 10px 12px; pointer-events: auto; }
/* Le niveau dans un blason rond ; à sa droite, l'expérience et sa barre, centrées ensemble sur le blason. */
.camp.dans-base .joueur-camp > div {
  display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 5px; align-items: center;
}
.camp.dans-base #enteteNiveau {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px;
  overflow: hidden; color: var(--or-vif); font-size: 0; line-height: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3a22, #16110b 70%); box-shadow: 0 0 0 2px var(--filet), 0 0 0 3px #070605, 0 3px 8px #000;
}
.camp.dans-base #enteteNiveau::after { content: attr(data-niveau); font-family: "Cinzel", Georgia, serif; font-size: 17px; font-weight: 700; line-height: 1; transform: translateY(-4.5px); }
.camp.dans-base #enteteXp { grid-column: 2; align-self: end; line-height: 1; }
.camp.dans-base .joueur-camp .barre-xp { grid-column: 2; align-self: start; }
.camp.dans-base #enteteXp { color: var(--doux); font-size: 13px; font-variant-numeric: lining-nums; }
.camp.dans-base .joueur-camp .barre-xp { width: 170px; height: 7px; margin-top: 0; border-radius: 4px; background: #050403; box-shadow: inset 0 0 0 1px #3a2c18; }
.camp.dans-base .joueur-camp .barre-xp i { border-radius: 4px; background: linear-gradient(180deg, #ffe7a6, #c99a45 60%, #7d5a22); box-shadow: 0 0 8px #e0bd6e66; }
.camp.dans-base #enteteOr { display: flex; align-items: center; gap: 7px; color: var(--or-vif); font-family: "Cinzel", Georgia, serif; font-size: 17px; font-variant-numeric: lining-nums; }
.camp.dans-base #enteteOr::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #e0bd6e 45%, #8a6424); box-shadow: 0 0 0 1px #4a3410, 0 0 6px #e0bd6e88; }
.camp.dans-base .raccourcis { display: flex; gap: 6px; margin-left: auto; }
.camp.dans-base .raccourcis button { padding: 9px 16px; color: var(--texte); font-family: "Cinzel", Georgia, serif; font-size: 13px; letter-spacing: .04em; pointer-events: auto; }
.camp.dans-base .raccourcis button:hover { color: var(--or-vif); }

/* --- La colonne de gauche : réseau, zone, ce qu'on porte, la carte --- */
.hud-base { gap: 6px; margin: 4px 14px; }
.hud-base p { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; font-size: 13px; letter-spacing: .04em; }
.hud-base p::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
#etatZone.zone-pvp { border-color: #b8463a; box-shadow: var(--cadre-ombre), 0 0 14px #c23a2e55; }
#etatAgressif { background: linear-gradient(180deg, #7a1c15f2, #4a0f0bf2); border-color: #ff6a55; }
/* Le même cadre que les plaques au-dessus : même écart entre tous les éléments de la colonne. Un clic l'ouvre en grand (M). */
.carte-ville { border: 1px solid var(--filet); border-radius: 4px; box-shadow: var(--cadre-ombre); cursor: zoom-in; pointer-events: auto; }

/* --- L'objectif en cours : une bannière suspendue au milieu, avec son chapitre --- */
.premiers-pas { top: 14px; width: min(420px, calc(100% - 32px)); padding: 10px 18px 12px; text-align: center; border-color: var(--filet); }
.premiers-pas::before {
  content: ""; position: absolute; left: 50%; top: -1px; width: 70px; height: 2px; margin-left: -35px;
  background: linear-gradient(90deg, transparent, var(--or-vif), transparent);
}
.premiers-pas small { color: var(--accent); font-family: "Cinzel", Georgia, serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.premiers-pas strong { margin: 3px 0 2px; color: var(--or-vif); font-size: 17px; text-shadow: 0 0 12px #e0bd6e55; }
.premiers-pas span { color: #cfc4ae; font-size: 13.5px; line-height: 1.45; text-align: left; }
/* L'aide d'une étape se centre sous son titre ; une liste de contrats s'aligne à gauche, une ligne par contrat. */
.premiers-pas strong + span { text-align: center; }
.premiers-pas small + span { margin-top: 4px; }
.premiers-pas em { font-variant-numeric: lining-nums; }

/* --- Le chat et les listes de joueurs : verre fumé, on voit le monde à travers --- */
.panneau-reglable { background: var(--rivets), linear-gradient(180deg, #19140fe0, #0e0b08e6); backdrop-filter: blur(4px); }
.journal-chat p, .journal-chat div { line-height: 1.4; }
#champChat { border-radius: 3px; background: #0a0806; border: 1px solid var(--filet-sombre); }
#champChat:focus { outline: none; border-color: var(--filet); box-shadow: 0 0 10px #e0bd6e33; }
.onglets-sociaux button.actif, .onglets-sociaux button.choisi { color: var(--or-vif); border-color: var(--filet); box-shadow: inset 0 -2px 0 var(--or); }

/* --- La barre d'objets : des alvéoles serties, la touche gravée dans le coin --- */
.bas { bottom: 12px; gap: 6px; }
.barre-rapide { gap: 5px; padding: 7px; border-radius: 6px; }
.case-barre, .case-pouvoir {
  border-radius: 4px;
  background: radial-gradient(circle at 50% 35%, #2a2219, #0d0a07 75%);
  box-shadow: inset 0 0 0 1px var(--couleur, #3a2c18), inset 0 0 0 2px #000, inset 0 -6px 12px #0008;
}
.case-barre small, .case-pouvoir small { top: 2px; left: 5px; color: var(--or); font-family: "Cinzel", Georgia, serif; font-size: 10px; text-shadow: 0 1px 2px #000; }
.case-barre b { font-family: "Cinzel", Georgia, serif; font-size: 13px; }
.case-pouvoir { box-shadow: inset 0 0 0 1px var(--or), inset 0 0 0 2px #000, 0 0 12px #e0bd6e44; }
.endurance { height: 9px; border-radius: 5px; box-shadow: inset 0 0 0 1px #3a2c18, 0 0 0 1px #070605; }
.endurance i { border-radius: 5px; background: linear-gradient(180deg, #e6f59a, #9cbb3c 55%, #4f6a1c); box-shadow: 0 0 8px #b5c94a66; }

/* --- Le bandeau du raid : palier, vie, butin --- */
.hud { min-width: 280px; padding: 12px 18px 12px; }
.hud h1 { color: var(--or-vif); font-size: 15px; letter-spacing: .1em; text-shadow: 0 0 12px #e0bd6e44; }
.vie { height: 22px; margin: 8px 0 7px; border-radius: 4px; background: #070505; box-shadow: inset 0 0 0 1px #4a1d16, 0 0 0 1px #070605; }
.vie i { border-radius: 4px; background: linear-gradient(180deg, #ff8a6e, #c3362a 45%, #6e1410); box-shadow: inset 0 1px 0 #ffffff55, 0 0 12px #c23a2e66; }
.vie span { font-family: "Cinzel", Georgia, serif; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#gain { color: var(--or-vif); font-variant-numeric: lining-nums; }

/* Le chrono dans un médaillon ; il rougit dans la dernière minute. */
.chrono { top: 12px; min-width: 96px; padding: 7px 22px 6px; text-align: center; border-radius: 0 0 14px 14px; border-top-width: 0; font-size: 26px; letter-spacing: .06em; text-shadow: 0 0 14px #e0bd6e55; }
.chrono.urgent { color: #ff7a66; border-color: #b8463a; box-shadow: var(--cadre-ombre), 0 0 18px #c23a2e77; }

/* La carte du donjon, sertie comme un parchemin. */
.carte { top: 12px; right: 12px; width: 200px; height: 200px; padding: 6px; box-sizing: border-box; background: #0b0907; }
.poids { bottom: 12px; left: 12px; padding: 7px 14px; font-family: "Cinzel", Georgia, serif; font-size: 13px; }

/* --- Ce qu'on peut faire ici : la touche dans une pastille gravée, au-dessus de la barre --- */
.invite { bottom: 140px; padding: 8px 18px; color: var(--or-vif); font-family: "Cinzel", Georgia, serif; font-size: 14px; letter-spacing: .03em; border-radius: 20px; }
.toast { top: 64px; padding: 9px 22px; border-radius: 4px; color: var(--or-vif); text-shadow: 0 0 10px #e0bd6e55; }

/* --- Les fenêtres : un grand cadre, un titre sur un bandeau, des sections soulignées d'un filet --- */
.fenetre-jeu, .modal { border-color: var(--filet); box-shadow: var(--cadre-ombre), 0 30px 80px #000; }
.modal-haut, .fenetre-jeu .modal-haut {
  position: relative; padding: 14px 22px; border-bottom: 1px solid var(--filet-sombre);
  background: linear-gradient(180deg, #2b2218, #16110c);
}
.modal-haut::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--or), transparent); }
.modal-haut h1, #titreFenetre { color: var(--or-vif); letter-spacing: .1em; text-shadow: 0 0 14px #e0bd6e44; }
.contenu-camp h2, .fenetre-corps h2, .modal h2 { display: flex; align-items: center; gap: 12px; color: var(--or); letter-spacing: .12em; }
.contenu-camp h2::after, .fenetre-corps h2::after, .modal h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--filet), transparent); }

/* Cartes (classes, modes, caisses) : relief, et un halo doré quand on les choisit. */
.classe, .carte-mode, .carte-caisse, .choix-defis button, .case-sac, .case {
  border-radius: 4px;
  transition: box-shadow .15s, transform .15s, filter .15s;
}
.classe, .carte-mode, .carte-caisse { background: radial-gradient(ellipse at 50% 0%, #2a2117, #120e0a 70%); border: 1px solid var(--filet-sombre); box-shadow: inset 0 1px 0 #ffffff0d, 0 6px 16px #0007; }
.classe:hover:not(.verrouille), .carte-mode:hover:not(.verrouille), .carte-caisse:hover { transform: translateY(-2px); border-color: var(--filet); box-shadow: inset 0 1px 0 #ffffff12, 0 10px 22px #000a, 0 0 14px #e0bd6e2a; }
.classe.choisi, .carte-mode.choisi, .carte-caisse.choisi { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 22px #e0bd6e55, inset 0 0 30px #e0bd6e14; }
.classe.verrouille, .carte-mode.verrouille { filter: saturate(.4) brightness(.8); }
.choix-defis button { background: linear-gradient(180deg, #1f1912, #120e0a); }
.choix-defis button.choisi { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 14px #e0bd6e44; }
.case:hover { box-shadow: inset 0 0 0 1px var(--or-vif), inset 0 -2px 0 var(--couleur), 0 0 10px #e0bd6e33; }

/* --- Le dialogue des personnages : une page sur un pupitre --- */
.dialogue { padding: 18px 26px 12px; border-color: var(--filet); }
.dialogue strong { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.dialogue strong::before { content: "❧ "; color: var(--accent); }

/* --- L'écran de chargement --- */
.ecran-chargement h1 { font-size: 34px; letter-spacing: .3em; text-shadow: 0 0 24px #e0bd6e55; }
.barre-chargement { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--filet-sombre); }
.barre-chargement i { border-radius: 4px; background: linear-gradient(180deg, #ffe7a6, #c99a45 60%, #7d5a22); box-shadow: 0 0 12px #e0bd6e66; }

/* Sur petit écran, les cadres se resserrent. */
@media (max-width: 900px) {
  .camp.dans-base .joueur-camp .barre-xp { width: 110px; }
  .premiers-pas { width: min(340px, calc(100% - 24px)); }
  .carte { width: 140px; height: 140px; }
}

/* Une fenêtre ouverte est opaque : le monde ne se mélange pas au texte. La barre d'objets passe dessous. */
.fenetre-jeu, .modal { background: var(--rivets), linear-gradient(180deg, #1d1711, #100c09); }
.bas { z-index: 4; }

/* --- Champs de saisie : sombres, filet d'or au focus --- */
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  box-sizing: border-box; padding: 8px 11px; color: var(--texte); font: inherit; font-size: 15px;
  background: #0a0806; border: 1px solid var(--filet-sombre); border-radius: 3px; box-shadow: inset 0 2px 6px #0009;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--filet); box-shadow: inset 0 2px 6px #0009, 0 0 10px #e0bd6e33; }
input::placeholder, textarea::placeholder { color: #6f6553; }
input[type="range"] { accent-color: var(--or); }

/* --- Le menu de pause : trois cadres côte à côte --- */
.menu-section { padding: 16px 18px 18px; background: var(--rivets), var(--fond-cadre); border: 1px solid var(--filet); border-radius: 4px; box-shadow: var(--cadre-ombre); }
.menu-section h2 { margin-top: 0; color: var(--or-vif); letter-spacing: .1em; }
.menu-section > button, .menu-section .ecran-boutons button { width: 100%; }

/* --- Le panneau des missions : une feuille de parchemin, des flèches pour feuilleter --- */
.feuilles-missions { position: fixed; z-index: 21; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 20px; background: #0a0908b0; backdrop-filter: blur(2px); }
.feuille {
  position: relative; width: min(440px, calc(100vw - 150px)); min-height: 380px; padding: 34px 36px 22px; box-sizing: border-box;
  color: #3b2a16; font-family: "Spectral", Georgia, serif; text-align: center;
  background:
    radial-gradient(ellipse at 20% 15%, #fff6dc88, transparent 55%),
    radial-gradient(ellipse at 80% 90%, #b8955a55, transparent 60%),
    linear-gradient(180deg, #efe1bd, #dcc58f);
  border-radius: 3px;
  box-shadow: inset 0 0 40px #8a6a3355, inset 0 0 0 1px #b8955a, 0 0 0 1px #3b2a16, 0 24px 60px #000c;
  transform: rotate(-.6deg);
}
.feuille article small { color: #7a5a2c; font-family: "Cinzel", Georgia, serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.feuille article h2 { margin: 8px 0 18px; color: #4a2c10; font-family: "Cinzel", Georgia, serif; font-size: 22px; line-height: 1.25; }
.feuille article h2::after { content: ""; display: block; width: 90px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, #7a5a2c, transparent); }
.feuille article p { margin: 10px 0; font-size: 16px; line-height: 1.5; }
.feuille-prime strong { color: #7a3d0c; font-family: "Cinzel", Georgia, serif; font-size: 18px; }
.feuille-etat { color: #6b4f2a; font-style: italic; }
.feuille-vide { margin-top: 40px !important; font-style: italic; }
.feuille-note { color: #6b4f2a; font-size: 14px !important; }
.feuille-actions { margin-top: 18px; }
.feuille footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 12px; border-top: 1px solid #b8955a; }
.feuille footer span { color: #7a5a2c; font-family: "Cinzel", Georgia, serif; font-variant-numeric: lining-nums; }
.feuille button { color: #f3e6c4; }
.feuille .bouton-croix { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }
.feuille-encours { margin: 10px 0 0; color: #7a3d0c; font-size: 13px; }
.fleche-feuille { flex: none; width: 54px; height: 54px; padding: 0; color: var(--or-vif); font-size: 22px; border-radius: 50%; border-color: var(--filet); }
.fleche-feuille:disabled { opacity: .25; }

/* Une potion préparée pour être donnée : sa case luit, et le curseur devient une croix de soin. */
.case-barre.preparee { box-shadow: inset 0 0 0 2px #8fe08a, 0 0 16px #8fe08a99; animation: luitPotion 1s ease-in-out infinite alternate; }
@keyframes luitPotion { to { box-shadow: inset 0 0 0 2px #c8ffbf, 0 0 24px #8fe08acc; } }
body.potion-preparee canvas { cursor: copy !important; }

/* Sous les icônes du bilan de fin, les noms en clair. */
.noms-bilan { flex-basis: 100%; margin: 8px 0 0; color: var(--texte-doux, #c9b99a); font-size: 13px; line-height: 1.5; text-align: center; }

/* Les IA du serveur : une petite étiquette à côté de leur nom, dans les listes et le menu. */
.badge-ia { display: inline-block; margin: 0 6px; padding: 0 5px; border: 1px solid #7fd8e8; border-radius: 3px; color: #7fd8e8; font: 600 10px/16px "Cinzel", Georgia, serif; font-style: normal; letter-spacing: .08em; vertical-align: middle; }

/* --- Les pierres de voyage : la liste des destinations débloquées --- */
.fenetre-voyage { position: fixed; z-index: 21; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: #0a0908a0; }
.fenetre-voyage[hidden] { display: none; }
.fenetre-voyage h2 { padding-right: 36px; }

/* La grande carte (M) : tout l'écran, zoom à la molette, glisser pour se déplacer. */
.grande-carte { position: fixed; z-index: 23; inset: 0; background: #0a0908; }
.grande-carte[hidden] { display: none; }
.grande-carte canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.grande-carte canvas:active { cursor: grabbing; }
.grande-carte-haut { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--rivets), var(--fond-cadre); border: 1px solid var(--filet); border-radius: 4px; box-shadow: var(--cadre-ombre); }
.grande-carte-haut h2 { margin: 0 12px 0 0; color: var(--or-vif); font-family: "Cinzel", Georgia, serif; font-size: 18px; }
.grande-carte-haut .doux { flex: 1; font-size: 13px; }
.grande-carte-haut button { min-width: 36px; padding: 6px 10px; }
.legende-carte { position: absolute; left: 12px; bottom: 12px; margin: 0; padding: 10px 14px; list-style: none; display: grid; gap: 5px; font-size: 13px; background: var(--rivets), var(--fond-cadre); border: 1px solid var(--filet); border-radius: 4px; box-shadow: var(--cadre-ombre); }
.legende-carte li { display: flex; align-items: center; gap: 8px; }
.legende-carte i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.legende-carte i.losange { border-radius: 1px; transform: rotate(45deg); }
.legende-carte i.anneau { border: 2px solid #e2584a; background: #c23a2e44; }
@media (max-width: 700px) { .legende-carte { display: none; } .grande-carte-haut .doux { display: none; } }
.carte-voyage { position: relative; width: min(460px, 100%); max-height: 80vh; overflow: auto; padding: 22px 24px; box-sizing: border-box; background: var(--fond-panneau, #1c1814); border: 1px solid var(--filet, #6b5a3a); border-radius: 4px; box-shadow: 0 20px 50px #000b; }
.carte-voyage h2 { margin: 0 0 6px; color: var(--or-vif, #e8c56e); font: 600 18px "Cinzel", Georgia, serif; }
.carte-voyage ul { margin: 14px 0 0; padding: 0; list-style: none; }
.carte-voyage li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #ffffff14; }
.carte-voyage li span { display: flex; flex-direction: column; }
.carte-voyage li em { color: var(--texte-doux, #c9b99a); font-size: 13px; font-style: normal; }
.carte-voyage .bouton-croix { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; }

/* En combat (et toujours en donjon), les noms au-dessus des têtes laissent passer les clics jusqu'au monstre. */
.en-combat .etiquette button, .en-jeu .etiquette button { pointer-events: none; opacity: .75; }

/* Options : une touche déjà prise, on prévient avant de rien changer. */
.conflit-touche { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e0a040; border-radius: 4px; background: #3a2a1488; }
.conflit-touche p { margin: 0 0 8px; }
.conflit-touche button { margin-right: 8px; }

/* Le choix du contenu d'une case de la barre rapide. */
.choix-barre { position: fixed; z-index: 22; width: 300px; padding: 12px; box-sizing: border-box; background: var(--fond-panneau, #1c1814); border: 1px solid var(--filet, #6b5a3a); border-radius: 4px; box-shadow: 0 12px 30px #000b; }
.choix-barre[hidden] { display: none; }
.choix-barre p { margin: 0 0 8px; color: var(--or-vif, #e8c56e); font-size: 14px; }
.choix-barre .grille-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 260px; overflow: auto; }
.choix-barre .grille-choix button { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 12px; text-align: left; }
.choix-barre .grille-choix svg, .choix-barre .grille-choix .icone-arme { width: 26px; height: 26px; flex: none; }
.choix-barre .vider { width: 100%; margin-top: 8px; }
.choix-barre small { display: block; margin-top: 8px; color: var(--texte-doux, #c9b99a); }

/* --- Le signalement de bug --- */
.bouton-bug { min-width: 0; padding-inline: 12px; font-size: 1.05rem; }
.modal-bug { width: min(620px, 100%); }
.modal-bug label { display: grid; gap: 6px; margin: 14px 0 0; color: var(--or-vif, #e0bd6e); font-size: .92rem; }
.modal-bug select, .modal-bug textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--filet, #5a4a35); background: #0c0a08; color: #efe6d6; font: inherit; resize: vertical; }
.modal-bug textarea:focus, .modal-bug select:focus { outline: 2px solid #e0bd6e66; outline-offset: 1px; }
.modal-bug label { position: relative; }
.modal-bug .compte-bug { position: absolute; right: 0; top: 0; color: #8f8370; font-size: .8rem; }
.modal-bug .ligne-capture-bug { grid-template-columns: auto 1fr; align-items: center; color: #d8ccb6; }
.modal-bug .ligne-capture-bug img { grid-column: 1 / -1; width: 100%; max-height: 190px; object-fit: cover; border-radius: 8px; border: 1px solid var(--filet, #5a4a35); }
.message-bug { min-height: 1.3em; margin: 12px 0 0; }
.message-bug.erreur { color: #ff8a7d; }
.message-bug.ok { color: #6fce7a; }

/* --- Le menu : sa croix en haut à droite, et la déconnexion en dernier --- */
#ecranPause .croix-menu { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; font-size: 28px; z-index: 2; }
#ecranPause .bouton-deconnexion { color: #ff9a8c; }
#ecranPause .bouton-deconnexion:hover { color: #ffc2b8; }