/* Thème « Temple de la jungle » : couleurs, polices et composants communs. */
@font-face {
  font-family: "Cinzel";
  font-weight: 600;
  font-display: swap;
  src: url("/static/vendor/polices/cinzel-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-weight: 800;
  font-display: swap;
  src: url("/static/vendor/polices/cinzel-latin-800-normal.woff2") format("woff2");
}

:root {
  --jungle-clair: #1f5b3a;
  --jungle: #123a26;
  --jungle-fonce: #0b2417;
  --pierre-clair: #b9ab8f;
  --pierre: #8a7c60;
  --pierre-fonce: #5e5340;
  --pierre-noire: #3d3528;
  --or-clair: #ffe08a;
  --or: #c8891e;
  --or-fonce: #6b4a0f;
  --emeraude: #2fd17a;
  --emeraude-fonce: #1f9e5a;
  --emeraude-noir: #06301a;
  --texte: #f3e6c4;
  --discret: #c3b48f;
  --rouge: #e5604d;
  --police-titre: "Cinzel", Georgia, "Times New Roman", serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--police-texte);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texte);
  background-color: var(--jungle-fonce);
  background-image:
    radial-gradient(ellipse 60% 40% at 0% 10%, rgba(63, 163, 106, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 35% at 100% 80%, rgba(63, 163, 106, 0.14), transparent 70%),
    radial-gradient(ellipse at 50% 0%, var(--jungle-clair), var(--jungle-fonce) 75%);
  background-attachment: fixed;
}

a { color: var(--or-clair); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 800; letter-spacing: 0.04em; }

.icone { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }

/* --- Barre du haut : une frise de pierre ---------------------------------- */
.barre {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: linear-gradient(var(--pierre), var(--pierre-fonce));
  border-bottom: 3px solid var(--pierre-noire);
  box-shadow: inset 0 2px 0 var(--pierre-clair), 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 5;
}
.barre .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--or-clair);
  text-shadow: 0 2px 0 var(--pierre-noire);
}
.barre .logo .icone { width: 1.5em; height: 1.5em; }
.barre .lien-cours { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--police-titre); font-weight: 600; text-decoration: none; }
.barre .lien-cours + .pseudo, .barre .lien-cours + .lien-cours { margin-left: 0; }
.barre .pseudo { margin-left: auto; color: var(--texte); font-weight: 600; text-shadow: 0 1px 0 var(--pierre-noire); }
.barre form { margin: 0; }

.page { max-width: 960px; margin: 0 auto; padding: 24px 16px; }

/* --- Cadre de pierre (panneaux) ------------------------------------------- */
.panneau, .cadre {
  background: linear-gradient(#22382b, #16241b);
  border: 3px solid var(--pierre);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--pierre-noire), inset 0 0 24px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);
  padding: 20px;
}
.cadre-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -20px -20px 16px;
  padding: 7px 14px;
  background: var(--pierre-noire);
  color: var(--discret);
  font-family: var(--police-titre);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Stèle : formulaires de connexion / inscription ----------------------- */
.stele {
  max-width: 420px;
  margin: 48px auto;
  padding: 28px 28px 22px;
  color: var(--pierre-noire);
  background: linear-gradient(var(--pierre-clair), var(--pierre) 85%);
  border: 4px solid var(--pierre-noire);
  border-radius: 120px 120px 12px 12px / 60px 60px 12px 12px;
  box-shadow: inset 0 3px 0 #d8ccb0, inset 0 -6px 0 var(--pierre-fonce), 0 14px 30px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.stele h1 { margin: 6px 0 18px; color: var(--pierre-noire); text-shadow: 0 1px 0 #d8ccb0; font-size: 1.6rem; }
.stele .sceau {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--or-fonce);
  background: radial-gradient(circle at 35% 30%, var(--or-clair), var(--or));
  border: 3px solid var(--or-fonce);
}
.stele .sceau .icone { width: 34px; height: 34px; }
.stele p { text-align: left; margin: 10px 0; }
.stele label { font-weight: 700; display: block; margin-bottom: 4px; }
.stele input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 2px solid var(--pierre-noire);
  background: #efe5cc;
  color: #2a2418;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}
.stele input:focus { outline: 3px solid var(--or); outline-offset: 1px; }
.stele .helptext, .stele .discret { color: #3f3727; font-size: 0.88rem; }
.stele a { color: var(--or-fonce); font-weight: 700; }
.stele .bouton { width: 100%; margin-top: 10px; }
.stele ul { text-align: left; padding-left: 18px; font-size: 0.88rem; }
.errorlist, .erreur-formulaire { color: #8f1f12; font-weight: 700; }

/* --- Boutons : médaillons ------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s, box-shadow 0.1s;
}
.bouton:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.7); }
.bouton:hover:not(:disabled) { filter: brightness(1.1); }
.bouton:active:not(:disabled) { transform: translateY(2px); }
.bouton.principal {
  color: var(--emeraude-noir);
  background: linear-gradient(#6ff5ad, var(--emeraude) 45%, var(--emeraude-fonce));
  border: 3px solid var(--or-clair);
  box-shadow: 0 0 0 2px var(--or-fonce), 0 4px 0 var(--or-fonce), 0 6px 14px rgba(0, 0, 0, 0.4);
}
.bouton.principal:active:not(:disabled) { box-shadow: 0 0 0 2px var(--or-fonce), 0 2px 0 var(--or-fonce); }
.bouton.secondaire {
  color: var(--texte);
  background: linear-gradient(var(--pierre-fonce), var(--pierre-noire));
  border: 2px solid var(--pierre);
  box-shadow: 0 3px 0 #241f17;
}
.bouton.dore {
  color: #4a3005;
  background: linear-gradient(var(--or-clair), var(--or));
  border: 2px solid var(--or-fonce);
  box-shadow: 0 3px 0 var(--or-fonce);
}
.bouton-lien {
  background: none;
  border: 0;
  color: var(--or-clair);
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: underline;
}

/* --- Cartouche doré (score) ----------------------------------------------- */
.cartouche {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  color: #4a3005;
  background: linear-gradient(var(--or-clair), var(--or));
  border: 2px solid var(--or-fonce);
  font-family: var(--police-titre);
  font-weight: 800;
  white-space: nowrap;
}

/* --- Étoiles -------------------------------------------------------------- */
.etoiles { display: inline-flex; gap: 2px; color: var(--pierre); }
.etoiles .etoile.pleine { color: var(--or-clair); filter: drop-shadow(0 1px 0 var(--or-fonce)); }


@media (max-width: 480px) {
  .barre { gap: 10px; padding: 8px 12px; }
  .barre .logo { font-size: 0.95rem; }
  .barre .logo .icone { width: 1.3em; height: 1.3em; }
}

/* --- Le python de la barre : le canvas 3D remplace l'icône une fois prêt -------- */
.python-avatar { position: relative; display: inline-grid; place-items: center; }
.barre .python-avatar { width: 52px; height: 52px; margin: -10px -4px -10px -8px; }
.barre .python-avatar .python-3d { width: 52px; height: 52px; }
.python-avatar .python-3d { display: none; }
.python-avatar.python-pret .python-3d { display: block; }
.python-avatar.python-pret .python-repli { display: none; }

/* --- Messages après une action (compte créé, erreur…) ------------------------ */
.messages { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.message { padding: 10px 14px; border-radius: 10px; font-weight: 600; background: var(--emeraude-noir); border: 2px solid var(--emeraude-fonce); }
.message.error { background: #3a1410; border-color: var(--rouge); }