/* Se connecter, s'inscrire, créer son personnage (29/09) : la charte du jeu — nuit chaude, Cinzel, Cormorant, losanges. */
:root { --sans: Lato, system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif; --titre: Cinzel, serif;
  --acajou: #a8471f; --acajou-clair: #d07a45; --or: #d19a55; --texte: #efe4cf; --gris: #b3a288; --ligne: #6b5234; --champ: #0006; }
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--texte); font: 300 16px/1.5 var(--sans); background: radial-gradient(ellipse at 50% 30%, #2a1c12 0%, #0a0806 75%) fixed, #0a0806; }
.compte { max-width: 520px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 22px calc(32px + env(safe-area-inset-bottom)); min-height: 100vh; display: flex; flex-direction: column; }
.marque { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.marque .losange { width: 12px; height: 12px; transform: rotate(45deg); border: 1.5px solid var(--or); }
.marque h1 { margin: 0; font: 600 13px var(--titre); letter-spacing: .3em; text-transform: uppercase; color: var(--or); text-align: center; }
.etapes { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.etapes i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--ligne); }
.etapes i.fait { background: var(--or); border-color: var(--or); }
.etapes i.ici { background: var(--acajou-clair); border-color: var(--acajou-clair); box-shadow: 0 0 8px #d07a4588; }

.ecran { flex: 1; display: flex; flex-direction: column; animation: monte .45s ease-out both; }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ecran h2 { margin: 0 0 6px; font: italic 500 clamp(26px, 7vw, 34px)/1.2 var(--serif); color: #f3e6cf; text-align: center; }
.ecran .chapeau { margin: 0 0 22px; text-align: center; color: var(--gris); font: italic 500 18px/1.45 var(--serif); }
.ecran .aide { margin: 6px 0 0; color: var(--gris); font-size: 13px; }
label.champ { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
input, textarea { width: 100%; font: 400 16px/1.45 var(--sans); color: var(--texte); background: var(--champ); border: 1px solid var(--ligne); padding: 12px 14px; border-radius: 0; outline: none; text-transform: none; letter-spacing: 0; }
textarea { min-height: 96px; resize: vertical; font: 500 18px/1.45 var(--serif); }
input:focus, textarea:focus { border-color: var(--or); }
.choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.choix button { border: 1px solid var(--ligne); background: #0004; color: var(--texte); padding: 14px 10px; font: 500 19px var(--serif); cursor: pointer; }
.choix button.pris { border-color: var(--acajou-clair); background: #a8471f33; color: #fff3e6; box-shadow: 0 0 14px #d07a4533; }
.lieux { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; margin: 10px 0 14px; padding-right: 4px; }
.lieux .groupe { margin: 10px 0 2px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--or); }
.lieux button { text-align: left; border: 1px solid var(--ligne); background: #0004; color: var(--texte); padding: 10px 12px; cursor: pointer; }
.lieux button b { display: block; font: 600 17px var(--serif); }
.lieux button small { display: block; color: var(--gris); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.lieux button.pris { border-color: var(--acajou-clair); background: #a8471f33; }
.recap { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: 14px 0; margin-bottom: 18px; font: 500 18px/1.5 var(--serif); }
.recap p { margin: 0 0 6px; }
.recap b { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-right: 8px; }
.boutons { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; }
.boutons button { flex: 1; border: 1px solid var(--ligne); background: #0004; color: var(--texte); padding: 13px 14px; font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.boutons button.principal { border-color: transparent; background: linear-gradient(#a8471f, #7e3519); color: #fff3e6; }
.boutons button.retour { flex: 0 0 auto; }
.boutons button:disabled { opacity: .4; cursor: default; }
.erreur { color: #e8927e; margin: 0 0 12px; font-size: 14px; min-height: 1em; }
.lien { background: none; border: 0; color: var(--or); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }
.attente { display: flex; justify-content: center; gap: 10px; margin: 60px 0; }
.attente span { width: 8px; height: 8px; transform: rotate(45deg); background: var(--or); animation: respire 1.2s ease-in-out infinite; }
.attente span:nth-child(2) { animation-delay: .2s; } .attente span:nth-child(3) { animation-delay: .4s; }
@keyframes respire { 50% { opacity: .25; } }