/* =====================================================================
   LE SANCTUAIRE — feuille de style
   Thème : Chevaliers du Zodiaque. Fond nuit, or, marbre.
   ===================================================================== */

:root {
  --nuit:      #0e1018;
  --nuit-2:    #161a26;
  --marbre:    #1e2231;
  --marbre-2:  #272c3d;
  --trait:     #333a4f;
  --texte:     #e6e8ef;
  --texte-2:   #98a0b5;
  --or:        #d4af37;
  --or-clair:  #f0d878;
  --bronze:    #e08a3c;
  --argent:    #c9cdd6;
  --rouge:     #d94f4f;
  --vert:      #4caf7d;
  --violet:    #9b7fe8;
  --rayon:     14px;
  --ombre:     0 8px 28px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(ellipse at 85% 110%, rgba(155,127,232,.10), transparent 55%);
  pointer-events: none;
}

a { color: var(--or-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 600; letter-spacing: .3px; margin: 0 0 .6em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; color: var(--or-clair); }
h3 { font-size: 1rem; }

.conteneur { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.conteneur.etroit { max-width: 720px; }

/* ---------------------------------------------------------- En-tête */
.bandeau {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px;
  background: linear-gradient(180deg, var(--nuit-2), rgba(22,26,38,.6));
  border-bottom: 1px solid var(--trait);
}
.bandeau .marque { font-size: 1.15rem; font-weight: 600; color: var(--or); letter-spacing: 1px; }
.bandeau nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.bandeau nav a {
  padding: 7px 14px; border-radius: 999px; color: var(--texte-2);
  font-size: .92rem; border: 1px solid transparent;
}
.bandeau nav a:hover { background: var(--marbre); color: var(--texte); text-decoration: none; }
.bandeau nav a.actif { background: rgba(212,175,55,.14); color: var(--or-clair); border-color: rgba(212,175,55,.35); }

.cosmos-jauge {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--or-clair);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(212,175,55,.10); border: 1px solid rgba(212,175,55,.28);
}

/* ---------------------------------------------------------- Cartes */
.carte {
  background: var(--marbre);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--ombre);
}
.carte h2 { margin-top: 0; }
.carte.mince { padding: 14px 16px; }

.grille { display: grid; gap: 16px; }
.grille.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grille.c3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grille.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ------------------------------------------------- Maisons du Zodiaque */
.maison {
  position: relative; overflow: hidden;
  background: var(--marbre);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 18px;
  display: block; color: inherit;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.maison:hover {
  transform: translateY(-3px);
  text-decoration: none;
  border-color: var(--accent, var(--or));
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.maison .signe {
  position: absolute; right: 10px; top: 4px;
  font-size: 4.5rem; line-height: 1; opacity: .13; color: var(--accent, var(--or));
  pointer-events: none;
}
.maison .titre { font-weight: 600; font-size: 1.02rem; margin-bottom: 2px; }
.maison .sous  { font-size: .8rem; color: var(--texte-2); margin-bottom: 12px; font-style: italic; }
.maison .chiffre { font-size: 1.9rem; font-weight: 600; color: var(--accent, var(--or)); line-height: 1.1; }
.maison .legende { font-size: .78rem; color: var(--texte-2); }

/* Barre de répartition des statuts */
.barre-statuts {
  display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  background: #11141d; margin: 12px 0 8px;
}
.barre-statuts span { display: block; height: 100%; }

.puces-statuts { display: flex; flex-wrap: wrap; gap: 10px; font-size: .76rem; color: var(--texte-2); }
.puce { display: inline-flex; align-items: center; gap: 5px; }
.puce i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ------------------------------------------------- Statuts / armures */
.etiquette {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .3px;
  border: 1px solid currentColor; background: rgba(255,255,255,.04);
}
.st-non_aborde    { color: #7a8199; }
.st-non_compris   { color: var(--rouge); }
.st-difficulte    { color: var(--bronze); }
.st-fragile       { color: var(--argent); }
.st-assure        { color: var(--or); }
.st-septieme_sens { color: var(--violet); }

.alerte-parcoeur {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; color: #ffb347;
  background: rgba(255,179,71,.10); border: 1px solid rgba(255,179,71,.35);
  padding: 3px 9px; border-radius: 999px;
}

/* ---------------------------------------------------------- Boutons */
.bouton, button.bouton, a.bouton {
  display: inline-block; cursor: pointer;
  padding: 11px 22px; border-radius: 999px;
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  color: #241c00; font-weight: 600; font-size: .95rem;
  border: none; font-family: inherit;
  transition: filter .15s ease, transform .1s ease;
}
.bouton:hover { filter: brightness(1.08); text-decoration: none; }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }
.bouton.discret {
  background: transparent; color: var(--texte-2);
  border: 1px solid var(--trait);
}
.bouton.discret:hover { color: var(--texte); border-color: var(--or); }
.bouton.petit { padding: 6px 14px; font-size: .85rem; }

/* ------------------------------------------------------ Formulaires */
label { display: block; margin-bottom: 14px; font-size: .9rem; color: var(--texte-2); }
label.radio { display: flex; gap: 10px; align-items: flex-start; color: var(--texte); }
label.radio input { margin-top: 5px; }

input[type=text], input[type=password], input[type=number], input[type=date],
select, textarea {
  width: 100%; margin-top: 6px;
  padding: 10px 13px;
  background: var(--nuit-2); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 9px;
  font-family: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(212,175,55,.15);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
fieldset { border: 1px solid var(--trait); border-radius: 10px; padding: 14px 16px; margin: 0 0 18px; }
legend { color: var(--or-clair); font-size: .85rem; padding: 0 6px; }

/* --------------------------------------------------------- Alertes */
.alerte { padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: .92rem; }
.alerte.succes { background: rgba(76,175,125,.12); border: 1px solid rgba(76,175,125,.4); color: #9be0bd; }
.alerte.danger { background: rgba(217,79,79,.12);  border: 1px solid rgba(217,79,79,.4);  color: #f2a5a5; }
.alerte.info   { background: rgba(155,127,232,.12);border: 1px solid rgba(155,127,232,.4);color: #cbbcf5; }

.liste-verifs { list-style: none; padding: 0; margin: 0; }
.liste-verifs li { padding: 4px 0; font-size: .9rem; }
.liste-verifs li.ok { color: #9be0bd; }
.liste-verifs li.ko { color: #f2a5a5; }

/* ----------------------------------------------------- Le combat */
.combat { max-width: 780px; margin: 0 auto; }

.combat-entete {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  font-size: .84rem; color: var(--texte-2);
}
.progression-seance {
  flex: 1 1 180px; height: 6px; border-radius: 999px; background: #11141d; overflow: hidden;
}
.progression-seance span { display: block; height: 100%; background: linear-gradient(90deg, var(--or), var(--or-clair)); transition: width .3s; }

.palier {
  display: inline-block; font-size: .7rem; letter-spacing: .5px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--trait); color: var(--texte-2);
}
.palier.transfert { color: var(--violet); border-color: rgba(155,127,232,.5); background: rgba(155,127,232,.1); }
.palier.application { color: var(--or); border-color: rgba(212,175,55,.5); background: rgba(212,175,55,.08); }

.enonce { font-size: 1.1rem; line-height: 1.65; margin: 18px 0 22px; }

.options { display: grid; gap: 10px; }
.option {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; border-radius: 11px; cursor: pointer;
  background: var(--nuit-2); border: 1px solid var(--trait);
  transition: border-color .13s, background .13s;
}
.option:hover { border-color: var(--or); }
.option.choisie { border-color: var(--or); background: rgba(212,175,55,.10); }
.option.juste   { border-color: var(--vert); background: rgba(76,175,125,.14); }
.option.fausse  { border-color: var(--rouge); background: rgba(217,79,79,.12); }
.option .lettre {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 600;
  background: var(--marbre-2); color: var(--texte-2);
}
.option.choisie .lettre, .option.juste .lettre { background: var(--or); color: #241c00; }

.retour {
  margin-top: 20px; padding: 16px 18px; border-radius: 11px;
  border-left: 3px solid var(--or); background: var(--nuit-2);
}
.retour.juste { border-left-color: var(--vert); }
.retour.faux  { border-left-color: var(--rouge); }
.retour h3 { margin: 0 0 8px; font-size: .95rem; }
.retour p  { margin: 0 0 8px; font-size: .95rem; color: var(--texte); }

.indice-boite {
  margin-top: 14px; font-size: .9rem; color: var(--texte-2);
  background: rgba(155,127,232,.08); border: 1px dashed rgba(155,127,232,.35);
  border-radius: 10px; padding: 12px 14px;
}

.auto-eval { margin-top: 18px; }
.auto-eval .choix { display: grid; gap: 8px; }
.auto-eval .choix button {
  text-align: left; padding: 11px 15px; border-radius: 10px;
  background: var(--nuit-2); border: 1px solid var(--trait);
  color: var(--texte); font-family: inherit; font-size: .92rem; cursor: pointer;
}
.auto-eval .choix button:hover { border-color: var(--or); }

.criteres { margin: 10px 0 0; padding-left: 20px; font-size: .9rem; color: var(--texte-2); }
.criteres li { margin-bottom: 4px; }

/* -------------------------------------------------------- Tableaux */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--trait); }
th { color: var(--texte-2); font-weight: 500; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
tr:last-child td { border-bottom: none; }

.mini-barre { height: 6px; border-radius: 999px; background: #11141d; overflow: hidden; min-width: 70px; }
.mini-barre span { display: block; height: 100%; background: var(--or); }

/* -------------------------------------------------------- Objectifs */
.quete { padding: 14px 16px; border-radius: 11px; background: var(--nuit-2); border: 1px solid var(--trait); margin-bottom: 12px; }
.quete .titre { font-weight: 600; margin-bottom: 4px; }
.quete .meta { font-size: .8rem; color: var(--texte-2); margin-bottom: 9px; }
.quete .jauge { height: 8px; border-radius: 999px; background: #11141d; overflow: hidden; }
.quete .jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--or), var(--or-clair)); transition: width .4s; }
.quete.atteinte { border-color: rgba(76,175,125,.5); }
.quete.atteinte .jauge span { background: var(--vert); }

/* --------------------------------------------------------- Divers */
.vide { text-align: center; padding: 40px 20px; color: var(--texte-2); }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .86rem; }
.discret { color: var(--texte-2); font-size: .86rem; }
.centre { text-align: center; }
.sep { height: 1px; background: var(--trait); margin: 20px 0; border: 0; }

.page-install .carte { max-width: 720px; }

.page-connexion { display: grid; place-items: center; min-height: 100vh; }
.page-connexion .carte { width: min(400px, 92vw); text-align: center; }
.page-connexion .sceau { font-size: 3rem; color: var(--or); margin-bottom: 6px; }

.badge-serie {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--bronze);
  background: rgba(224,138,60,.10); border: 1px solid rgba(224,138,60,.3);
  padding: 4px 11px; border-radius: 999px;
}

@media (max-width: 640px) {
  .conteneur { padding: 16px 14px 50px; }
  h1 { font-size: 1.35rem; }
  .bandeau { padding: 10px 14px; gap: 10px; }
  .bandeau nav { width: 100%; margin-left: 0; }
  .enonce { font-size: 1rem; }
}