/* Le Grand Jeu — fondation mobile-first « dossier céleste » (sobre, §11
   post-MVP pour l'esthétique complète). Zéro framework, zéro Node. */

:root {
    --encre: #d8cdb4;
    --encre-pale: #9a8f78;
    --papier: #171410;
    --papier-carte: #201c15;
    --liseret: #3a332a;
    --ange: #c9a227;
    --or-vif: #e3bc45; /* liens survolés, accents actionnables */
    --demon: #a03123;
    --succes: #5a7d4a;
    --erreur: #a03123;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.5;
}

.entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--liseret);
}

.entete__marque {
    color: var(--encre);
    text-decoration: none;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 1.15rem;
}

.entete__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}
.entete__nav a {
    color: var(--encre-pale);
    text-decoration: none;
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
}
.entete__nav a:hover { color: var(--encre); background: var(--papier-carte); }
.entete__nav a.actif {
    color: var(--encre);
    border-bottom-color: var(--ange);
    border-radius: 4px 4px 0 0;
}

.conteneur {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem;
}

/* L'admin travaille sur des tableaux : toute la largeur, toujours fluide. */
.conteneur--pleine { max-width: none; }

h1, h2, h3 {
    font-weight: normal;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}
h1 { font-size: 1.5rem; }
h2 {
    font-size: 1.2rem;
    margin-top: 2rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--liseret);
}

/* Un lien se reconnaît : doré ET souligné. Ce qui n'est pas souligné
   n'emmène nulle part ; ce qui est en relief (bouton) agit. */
a {
    color: var(--ange);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ange) 45%, transparent);
    text-underline-offset: 0.2em;
    transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover { color: var(--or-vif); text-decoration-color: var(--or-vif); }
.entete__nav a, .entete__marque, .admin-nav a, .pied a { text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--ange);
    outline-offset: 2px;
}

.sourdine { color: var(--encre-pale); font-size: 0.9rem; }

/* ─── Pied de page ─── */

.pied {
    max-width: 640px;
    margin: 2rem auto 0;
    padding: 1rem;
    border-top: 1px solid var(--liseret);
    color: var(--encre-pale);
    font-size: 0.8rem;
    text-align: center;
}
.pied a { color: var(--encre-pale); }

/* ─── Admin ─── */

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--liseret);
    border-radius: 6px;
    font-size: 0.9rem;
}
.admin-nav a { color: var(--encre-pale); text-decoration: none; }
.admin-nav a:hover { color: var(--encre); }

/* ─── Landing ─── */

.hero {
    text-align: center;
    padding: 2rem 0 1rem;
}
.hero h1 {
    font-size: 2.1rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}
.hero__accroche {
    color: var(--encre-pale);
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}

/* ─── Cartes / blocs ─── */

.carte {
    background: var(--papier-carte);
    border: 1px solid var(--liseret);
    border-radius: 6px;
    padding: 1rem;
    margin: 1rem 0;
}

.carte--ange { border-left: 3px solid var(--ange); }
.carte--demon { border-left: 3px solid var(--demon); }

/* ─── Flashes ─── */

.flash {
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--liseret);
    background: var(--papier-carte);
}
.flash--erreur { border-color: var(--erreur); color: #d88a80; background: rgba(160, 49, 35, 0.12); }
.flash--succes { border-color: var(--succes); color: #a9c79a; background: rgba(90, 125, 74, 0.12); }

/* ─── Formulaires ─── */

form { margin: 0; }

.champ { margin-bottom: 1rem; }

.champ label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--encre-pale);
    font-size: 0.9rem;
}

/* Tout champ de saisie porte l'habillage du dossier — jamais le style
   navigateur brut, admin compris. */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='url'],
input[type='datetime-local'],
input[type='date'],
select,
textarea,
.selecteur {
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--encre);
    background: var(--papier);
    border: 1px solid var(--liseret);
    border-radius: 6px;
    transition: border-color 0.15s;
}
.champ input, .champ select, .champ textarea, .selecteur { width: 100%; }
textarea { resize: vertical; }

select, .selecteur {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a8f78' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
}
select[multiple] { background-image: none; padding-right: 0.8rem; }

input:focus, select:focus, textarea:focus, .selecteur:focus {
    border-color: var(--encre-pale);
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
}

input[type='checkbox'], input[type='radio'] { accent-color: var(--ange); }
input[type='number'] { min-width: 5.5rem; }

.bouton {
    display: inline-block;
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    color: var(--papier);
    background: var(--encre);
    border: 1px solid var(--encre);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.bouton:hover:not(:disabled) { background: #efe6cd; border-color: #efe6cd; }
.bouton:active:not(:disabled) { transform: translateY(1px); }
.bouton:disabled { opacity: 0.4; cursor: not-allowed; }
.bouton--secondaire {
    background: transparent;
    color: var(--encre);
    border: 1px solid var(--encre-pale);
}
.bouton--secondaire:hover:not(:disabled) {
    background: var(--papier-carte);
    border-color: var(--encre);
    color: var(--encre);
}
.bouton--inline { width: auto; padding: 0.45rem 1rem; font-size: 0.9rem; }

/* ─── Création de personnage ─── */

.choix-groupe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.choix { position: relative; }

.choix input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.choix label {
    display: block;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--liseret);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.choix label:hover { border-color: var(--encre-pale); }

.choix input:checked + label {
    border-color: var(--ange);
    background: var(--papier-carte);
    box-shadow: inset 0 0 0 1px var(--ange);
}
.choix input:focus-visible + label { outline: 2px solid var(--ange); outline-offset: 2px; }

.choix--large { grid-column: 1 / -1; }
.choix .sourdine { display: block; margin-top: 0.2rem; }

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px dotted var(--liseret);
}

.stepper__nom { flex: 1; }

.stepper__boutons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.stepper__boutons button {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.2rem;
    color: var(--encre);
    background: var(--papier-carte);
    border: 1px solid var(--liseret);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.stepper__boutons button:hover:not(:disabled) { border-color: var(--encre-pale); background: var(--papier); }
.stepper__boutons button:disabled { opacity: 0.3; }

.stepper__valeur {
    min-width: 1.4rem;
    text-align: center;
    font-size: 1.1rem;
}

.budget {
    position: sticky;
    top: 0;
    background: var(--papier);
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: var(--encre-pale);
    z-index: 2;
}
.budget strong { color: var(--encre); }

/* ─── Carte (§11) ─── */

.carte-cadre {
    position: relative;
    border: 1px solid var(--liseret);
    border-radius: 6px;
    overflow: hidden;
}

.carte-monde {
    height: 62vh;
    min-height: 320px;
    background: #e9dfc8; /* parchemin, le temps que MapLibre peigne */
}

/* Calque papier (§11, étape 7) : grain feTurbulence + vignettage, en CSS
   au-dessus du canvas — jamais de filtre SVG sur le WebGL. */
.carte-papier {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(58, 42, 18, 0.28) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.timelapse-commandes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.timelapse-commandes input[type="range"] { flex: 1; accent-color: var(--ange); }
.timelapse-commandes .bouton { width: auto; flex: none; padding: 0.5rem 1.2rem; }
.timelapse-commandes .sourdine { white-space: nowrap; }

.carte-tampon {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    transform: rotate(-8deg);
    border: 3px double rgba(160, 49, 35, 0.75);
    border-radius: 4px;
    color: rgba(160, 49, 35, 0.75);
    padding: 0.15rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant: small-caps;
    letter-spacing: 0.22em;
}

/* ─── Tableaux (aperçu, feuille) ─── */

table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--liseret);
    font-size: 0.95rem;
}
th { color: var(--encre-pale); font-weight: normal; }

.tag {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid var(--liseret);
}
.tag--ange { color: var(--ange); border-color: var(--ange); }
.tag--demon { color: var(--demon); border-color: var(--demon); }

/* ─── Aide contextuelle (feuille de personnage) ─── */

/* Un terme cliquable qui révèle sa fiche : pointillé, ni lien ni bouton. */
.terme {
    padding: 0;
    font: inherit;
    color: var(--encre);
    background: none;
    border: none;
    border-bottom: 1px dashed var(--encre-pale);
    cursor: help;
    transition: color 0.15s, border-color 0.15s;
}
.terme:hover, .terme[aria-expanded='true'] { color: var(--or-vif); border-bottom-color: var(--or-vif); }
.terme::after { content: ' ⓘ'; font-size: 0.75em; color: var(--encre-pale); }

.fiche-detail {
    margin: 0.4rem 0 0.8rem;
    padding: 0.6rem 0.9rem;
    background: var(--papier-carte);
    border-left: 2px solid var(--ange);
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
}
.fiche-detail p { margin: 0.2rem 0; }

details.fiche {
    margin: 0.4rem 0;
    padding: 0.5rem 0.8rem;
    background: var(--papier-carte);
    border: 1px solid var(--liseret);
    border-radius: 6px;
}
details.fiche summary { cursor: pointer; }
details.fiche summary:hover { color: var(--or-vif); }
details.fiche[open] { border-color: var(--encre-pale); }
details.fiche p { margin: 0.5rem 0 0.2rem; }

.profil-conseil {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    background: var(--papier-carte);
    border: 1px solid var(--liseret);
    border-left: 3px solid var(--ange);
    border-radius: 6px;
}
.profil-conseil__titre {
    margin: 0 0 0.3rem;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}
.profil-conseil p { margin: 0.3rem 0; }
.profil-conseil .bouton--inline { margin: 0.4rem 0.6rem 0.2rem 0; }

/* ─── Panneau de zone : glisse depuis la droite (mobile d'abord) ─── */

.panneau-carte {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    padding: 1rem;
    overflow-y: auto;
    background: var(--papier-carte);
    border-left: 1px solid var(--liseret);
    box-shadow: -10px 0 28px rgba(0, 0, 0, 0.5);
    transform: translateX(105%);
    transition: transform 0.25s ease;
    z-index: 60;
}
.panneau-carte--ouvert { transform: translateX(0); }
.panneau-carte--ange { border-left: 3px solid var(--ange); }
.panneau-carte--demon { border-left: 3px solid var(--demon); }

.panneau-carte__fermer {
    display: block;
    margin: 0 0 0.8rem auto;
    padding: 0.35rem 0.8rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--encre);
    background: transparent;
    border: 1px solid var(--encre-pale);
    border-radius: 6px;
    cursor: pointer;
}
.panneau-carte__fermer:hover { background: var(--papier); border-color: var(--encre); }

.panneau-carte .bouton { margin-bottom: 0.5rem; }

/* ─── Rituel d'intégration (checklist du novice) ─── */

.rituel__jauge {
    height: 6px;
    margin: 0.6rem 0 0.9rem;
    background: var(--papier);
    border: 1px solid var(--liseret);
    border-radius: 999px;
    overflow: hidden;
}
.rituel__jauge span {
    display: block;
    height: 100%;
    background: var(--ange);
    transition: width 0.3s ease;
}

.rituel__liste { margin: 0; padding: 0; list-style: none; }
.rituel__item {
    display: flex;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-top: 1px dotted var(--liseret);
}
.rituel__coche { color: var(--encre-pale); }
.rituel__item--fait .rituel__coche { color: var(--succes); }
.rituel__item--fait > span:last-child { opacity: 0.6; }

/* ─── Visite guidée du novice ─── */

.visite {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 8, 5, 0.75);
    z-index: 80;
}
.visite[hidden] { display: none; }

.visite__boite {
    width: min(520px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.2rem 1.4rem;
    background: var(--papier-carte);
    border: 1px solid var(--encre-pale);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.visite__boite h2 { margin-top: 0; border-bottom: none; }

.visite__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1.2rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--liseret);
}
.visite__points { color: var(--encre-pale); letter-spacing: 0.15em; font-size: 0.8rem; }
.visite__nav { display: flex; gap: 0.5rem; }
.visite__passer {
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--encre-pale);
    background: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
.visite__passer:hover { color: var(--encre); }

/* ─── Chronique : le fait d'abord, la plume ensuite ─── */

.chronique-entree { margin: 0.8rem 0 0; }
.chronique-entree + .chronique-entree {
    border-top: 1px dotted var(--liseret);
    padding-top: 0.8rem;
}
.chronique-entree__fait { margin: 0 0 0.15rem; }
.chronique-entree__plume { margin: 0; font-style: italic; }