/* ScapeStory — feuille de style du site (accueil, connexion, espace joueur) */
:root {
  --nuit: #0b0806; --fond: #120d09; --carte: #19120c; --carte2: #211810; --trait: #3a2b1b; --trait2: #5a4126;
  --or: #e7b85c; --or-clair: #f8dc94; --or-fonce: #a8722b; --argent: #cfd4da; --argent-fonce: #8d939b;
  --texte: #f3eadb; --doux: #b3a284; --pale: #7d6d55;
  --ok: #8fd18a; --ko: #e2836f; --encours: #8fb5e6;
  --rayon: 14px; --ombre: 0 18px 50px rgba(0, 0, 0, .55);
  --titre: "Cinzel", "Trajan Pro", Georgia, serif; --corps: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--nuit); }
body {
  margin: 0; min-height: 100vh; color: var(--texte); font: 400 16px/1.55 var(--corps);
  background:
    radial-gradient(1200px 600px at 50% -180px, rgba(231, 184, 92, .16), transparent 70%),
    radial-gradient(900px 500px at 100% 30%, rgba(207, 212, 218, .05), transparent 70%),
    linear-gradient(var(--nuit), var(--fond) 40%, var(--nuit));
  -webkit-font-smoothing: antialiased;
}
a { color: var(--or-clair); }
img { max-width: 100%; display: block; }
.enveloppe { width: min(1180px, 100% - 32px); margin-inline: auto; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- barre du haut ---------- */
.barre { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: rgba(11, 8, 6, .78); border-bottom: 1px solid rgba(231, 184, 92, .14); }
.barre .enveloppe { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.barre .marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); font: 700 17px/1 var(--titre); letter-spacing: .12em; }
.barre .marque img { width: 34px; height: 34px; }
.barre nav { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.barre nav a, .barre nav button { font: 600 14px/1 var(--corps); }
.qui { color: var(--doux); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.qui b { color: var(--texte); }
.pastille { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--titre); color: #1a1206; background: linear-gradient(145deg, var(--or-clair), var(--or-fonce)); }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 10px; cursor: pointer;
  font: 700 15px/1 var(--corps); text-decoration: none; letter-spacing: .01em; border: 1px solid var(--trait2); color: var(--texte); background: rgba(255, 255, 255, .03);
  transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--or); background: rgba(231, 184, 92, .08); }
.btn:active { transform: translateY(1px); }
.btn.or { color: #1b1206; border-color: #f2cf82; background: linear-gradient(180deg, var(--or-clair), var(--or) 45%, var(--or-fonce)); box-shadow: 0 6px 18px rgba(231, 184, 92, .22), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.or:hover { box-shadow: 0 8px 26px rgba(231, 184, 92, .38), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.petit { min-height: 34px; padding: 0 12px; font-size: 14px; }
.btn.lien { border-color: transparent; background: none; color: var(--doux); }
.btn.lien:hover { color: var(--texte); background: rgba(255, 255, 255, .04); }
.btn[disabled] { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 6px; }

/* ---------- accueil ---------- */
.heros { text-align: center; padding: clamp(34px, 7vw, 72px) 0 26px; position: relative; }
.heros .logo { width: min(620px, 92%); margin: 0 auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .7)) drop-shadow(0 0 60px rgba(231, 184, 92, .14)); }
.heros .accroche { font: 600 clamp(15px, 2.4vw, 19px)/1.5 var(--titre); letter-spacing: .18em; text-transform: uppercase; color: var(--argent); margin: 18px 0 6px; }
.heros p.sous { color: var(--doux); max-width: 620px; margin: 0 auto; }
.heros .actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.chiffres { display: flex; justify-content: center; gap: clamp(16px, 5vw, 48px); margin-top: 26px; flex-wrap: wrap; }
.chiffres div { text-align: center; }
.chiffres b { display: block; font: 700 clamp(26px, 4vw, 34px)/1 var(--titre); color: var(--or-clair); }
.chiffres span { font-size: 13px; color: var(--doux); text-transform: uppercase; letter-spacing: .12em; }

.filet { display: flex; align-items: center; gap: 14px; margin: 44px 0 18px; }
.filet::before, .filet::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--trait2), transparent); }
.filet h2 { margin: 0; font: 700 clamp(20px, 3vw, 26px)/1.2 var(--titre); letter-spacing: .12em; text-transform: uppercase; color: var(--texte); text-align: center; }
.intro-section { color: var(--doux); text-align: center; max-width: 720px; margin: -6px auto 20px; }

.filtres { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 0; }
.filtres button { font: 600 14px/1 var(--corps); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--trait2); background: transparent; color: var(--doux); cursor: pointer; }
.filtres button[aria-pressed="true"] { color: #1b1206; background: var(--or); border-color: var(--or); }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.jeu {
  position: relative; display: flex; flex-direction: column; border-radius: var(--rayon); overflow: hidden; background: linear-gradient(180deg, var(--carte2), var(--carte));
  border: 1px solid var(--trait); box-shadow: var(--ombre); transition: transform .2s, border-color .2s;
}
.jeu:hover { transform: translateY(-3px); border-color: rgba(231, 184, 92, .45); }
.jeu .art { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid var(--trait); }
.jeu .art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jeu .art .etiquette { position: absolute; left: 12px; bottom: 10px; font: 700 11px/1 var(--corps); letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: var(--argent); border: 1px solid rgba(255, 255, 255, .12); }
.jeu .art .etat { position: absolute; right: 12px; top: 12px; }
.jeu .corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jeu h3 { margin: 0; font: 700 19px/1.25 var(--titre); letter-spacing: .02em; }
.jeu h3 .pre { display: block; font: 700 12px/1.2 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin-bottom: 4px; }
.jeu .genre { font-size: 13px; color: var(--doux); text-transform: uppercase; letter-spacing: .08em; }
.jeu p { margin: 0; color: #d9ccb4; font-size: 15px; }
.jeu .note { color: var(--doux); font-size: 14px; }
.puces { display: flex; gap: 6px; flex-wrap: wrap; }
.puce { font: 600 12px/1 var(--corps); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--trait2); color: var(--argent); white-space: nowrap; }
.puce.or { color: var(--or-clair); border-color: rgba(231, 184, 92, .5); }
.jeu .pied { margin-top: auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding-top: 6px; flex-wrap: wrap; }
.jeu .bilan { font-size: 13px; color: var(--doux); }
.jeu .bilan b { color: var(--texte); }

.badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; font: 700 12px/1 var(--corps); padding: 6px 9px; border-radius: 999px; letter-spacing: .02em; border: 1px solid; background: rgba(0, 0, 0, .6); }
.badge.reussi { color: var(--ok); border-color: rgba(143, 209, 138, .5); }
.badge.termine { color: var(--or-clair); border-color: rgba(231, 184, 92, .5); }
.badge.encours { color: var(--encours); border-color: rgba(143, 181, 230, .5); }
.badge.echec { color: var(--ko); border-color: rgba(226, 131, 111, .5); }

.cadre { border: 1px solid var(--trait); background: linear-gradient(180deg, var(--carte2), var(--carte)); border-radius: var(--rayon); box-shadow: var(--ombre); }
.encart { padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: 18px; }
.encart p { margin: 0; color: var(--doux); }

footer.pied-site { margin-top: 60px; padding: 26px 0 40px; border-top: 1px solid var(--trait); color: var(--pale); font-size: 14px; }
footer.pied-site .enveloppe { display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: space-between; }
footer.pied-site a { color: var(--doux); }

/* ---------- connexion ---------- */
.page-centree { min-height: calc(100vh - 61px); display: grid; place-items: center; padding: 28px 0 60px; }
.boite { width: min(460px, 100%); padding: clamp(20px, 4vw, 30px); }
.boite .logo { width: 260px; margin: 0 auto 8px; }
.boite h1 { font: 700 22px/1.25 var(--titre); text-align: center; margin: 6px 0 4px; letter-spacing: .06em; }
.boite .info { text-align: center; color: var(--doux); font-size: 14px; margin: 0 0 18px; }
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--trait); margin-bottom: 18px; }
.onglets button { min-height: 40px; border: 0; border-radius: 9px; background: none; color: var(--doux); font: 700 14px/1 var(--corps); cursor: pointer; }
.onglets button[aria-selected="true"] { background: var(--carte2); color: var(--or-clair); box-shadow: inset 0 0 0 1px var(--trait2); }
form.champs { display: flex; flex-direction: column; gap: 14px; }
.champ label { display: block; font: 600 13px/1.2 var(--corps); color: var(--argent); margin-bottom: 6px; letter-spacing: .02em; }
.champ input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--trait2); background: #0e0a07; color: var(--texte); font: 500 16px/1 var(--corps); }
.champ input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(231, 184, 92, .18); }
.champ small { display: block; color: var(--pale); font-size: 12.5px; margin-top: 5px; }
.message { min-height: 22px; font-size: 14px; text-align: center; color: var(--ko); margin: 0; }
.message.ok { color: var(--ok); }
.mention { color: var(--pale); font-size: 12.5px; text-align: center; margin: 16px 0 0; }

/* ---------- espace joueur ---------- */
.entete-espace { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 34px 0 8px; }
.entete-espace .grand { width: 64px; height: 64px; font-size: 26px; }
.entete-espace h1 { margin: 0; font: 700 clamp(24px, 4vw, 32px)/1.15 var(--titre); letter-spacing: .04em; }
.entete-espace p { margin: 2px 0 0; color: var(--doux); }
.entete-espace .actions { margin-left: auto; display: flex; gap: 8px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-top: 22px; }
.tuile { padding: 16px 18px; }
.tuile span { display: block; color: var(--doux); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.tuile b { display: block; font: 700 30px/1.15 var(--titre); color: var(--or-clair); margin-top: 6px; }
.tuile small { color: var(--pale); }
.jauge { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); margin-top: 10px; overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--or-fonce), var(--or-clair)); }

.liste-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.ligne-jeu { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ligne-jeu .haut { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.ligne-jeu h3 { margin: 0; font: 700 17px/1.3 var(--titre); }
.ligne-jeu dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.ligne-jeu dt { font-size: 12px; color: var(--pale); text-transform: uppercase; letter-spacing: .08em; }
.ligne-jeu dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fins { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--doux); }
.fin { font: 600 12px/1 var(--corps); padding: 5px 8px; border-radius: 6px; border: 1px dashed var(--trait2); color: var(--pale); }
.fin.vue { border-style: solid; color: var(--or-clair); border-color: rgba(231, 184, 92, .5); }

.tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tableau th, .tableau td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { font: 700 12px/1.2 var(--corps); color: var(--doux); text-transform: uppercase; letter-spacing: .08em; }
.tableau td.nb { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .detail { color: var(--pale); font-size: 13px; }
.defile { overflow-x: auto; }
.vide { padding: 30px; text-align: center; color: var(--doux); }

@media (max-width: 640px) {
  .barre .marque span { display: none; }
  .qui .nom { display: none; }
  .tableau thead { display: none; }
  .tableau tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
  .tableau td { border: 0; padding: 2px 4px; }
  .tableau td.j { grid-column: 1 / -1; font-weight: 700; }
  .entete-espace .actions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }