/* L'Ange du Chaos — feuille de style (reprise de l'Atelier des héros, COF2, le 2026-11-10). */

/* Polices auto-hébergées (OFL, voir polices/LICENCES-OFL.txt) : aucune requête vers un tiers. */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/alegreya-latin-400-normal.woff") format("woff"); }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("polices/alegreya-latin-400-italic.woff") format("woff"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/alegreya-latin-500-normal.woff") format("woff"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/alegreya-latin-700-normal.woff") format("woff"); }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/alegreya-sc-latin-500-normal.woff") format("woff"); }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/alegreya-sc-latin-700-normal.woff") format("woff"); }

/* Atelier des héros — Chroniques Oubliées Fantasy 2
   Ardoise de nuit, encre claire, patine vert-de-gris pour les choix, cire rouge pour ce qui bloque.
   Alegreya pour le texte, Alegreya SC pour les titres et les sigles de caractéristiques. */

:root {
  --fond: #1e2a2d;
  --surface: #27373b;
  --surface-2: #314448;
  --trait: #3f5458;
  --encre: #ece6d6;
  --encre-douce: #a8b4ae;
  --patine: #7cb8a4;
  --patine-fonce: #4f8c79;
  --cire: #d0614b;
  --ambre: #d8b35e;
  --rayon: 6px;
  --serif: 'Alegreya', Georgia, 'Times New Roman', serif;
  --capitales: 'Alegreya SC', 'Alegreya', Georgia, serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 1.0625rem/1.6 var(--serif);
}
a { color: var(--patine); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
h1, h2, h3 { font-family: var(--capitales); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
abbr { text-decoration: none; }

main { max-width: 1320px; margin: 0 auto; padding: 1.5rem; }

/* ---- Barre ---------------------------------------------------------------------------------- */
.barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1.5rem; border-bottom: 1px solid var(--trait); background: #1a2427;
}
.marque { font-family: var(--capitales); font-size: 1.3rem; color: var(--encre); text-decoration: none; }
.barre nav { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.barre nav a { color: var(--encre-douce); text-decoration: none; }
.barre nav a:hover { color: var(--encre); }
.flash { max-width: 1320px; margin: 1rem auto 0; padding: .6rem 1.5rem; color: var(--patine); }

/* ---- Boutons et champs ------------------------------------------------------------------------ */
button, .bouton {
  font: inherit; font-size: .95rem; color: var(--encre); background: var(--surface-2);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: .45rem .9rem;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover:not(:disabled), .bouton:hover { border-color: var(--patine); color: var(--encre); }
button:disabled { opacity: .45; cursor: not-allowed; }
.principal { background: var(--patine); border-color: var(--patine); color: #10201b; font-weight: 700; }
.principal:hover:not(:disabled) { background: #93cbb8; color: #10201b; }
button.lien { background: none; border: 0; padding: 0; color: var(--patine); text-decoration: underline; text-underline-offset: 3px; }
.danger, button.lien.danger { color: var(--cire); }
form.inline { display: inline; }

input[type=text], input[type=password], input[type=number], select, textarea {
  font: inherit; color: var(--encre); background: #1a2528; border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: .45rem .6rem; width: 100%;
}
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--patine); width: 1.05rem; height: 1.05rem; }
.champ { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; color: var(--encre-douce); font-size: .95rem; }
.champ > input, .champ > select, .champ > textarea, .champ > .avec-bouton { color: var(--encre); font-size: 1.0625rem; }
.champ.court { max-width: 15rem; }
.avec-bouton { display: flex; gap: .5rem; }
.avec-bouton > button { white-space: nowrap; }
.ligne { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.ligne > .champ { flex: 1 1 10rem; }
.option { display: inline-flex; align-items: center; gap: .45rem; margin: .2rem 1.2rem .2rem 0; }
fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .8rem 1rem 1rem; margin: 0 0 1.2rem; }
legend { font-family: var(--capitales); padding: 0 .4rem; }
legend small { font-family: var(--serif); color: var(--encre-douce); margin-left: .6rem; }

.erreur, .erreur-champ { color: var(--cire); }
.erreur-champ { margin: -.4rem 0 1rem; font-size: .95rem; }
.avertissement { color: var(--ambre); }
.note { color: var(--encre-douce); font-size: .95rem; }
.etiquette { font-size: .8rem; padding: .05rem .5rem; border-radius: 99px; border: 1px solid var(--trait); color: var(--encre-douce); }
.etiquette.brouillon { border-color: var(--ambre); color: var(--ambre); }
.etiquette.termine { border-color: var(--patine); color: var(--patine); }

/* ---- Connexion ------------------------------------------------------------------------------- */
.connexion { max-width: 26rem; margin: 10vh auto; }
.connexion h1 { font-size: 2.6rem; margin-bottom: .1em; }
.soustitre { color: var(--encre-douce); margin: 0 0 2rem; }
.connexion form { display: flex; flex-direction: column; gap: 1rem; }
.connexion label { display: flex; flex-direction: column; gap: .3rem; color: var(--encre-douce); }
.connexion .aide { margin-top: 1.5rem; font-size: .95rem; color: var(--encre-douce); }

/* ---- Accueil --------------------------------------------------------------------------------- */
.accueil-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.vide { max-width: 38rem; padding: 2rem 0; }
.vide p { color: var(--encre-douce); }
.registre { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.registre li {
  display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr auto auto; gap: .4rem 1.2rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px solid var(--trait);
}
.registre-nom { font-family: var(--capitales); font-size: 1.3rem; color: var(--encre); text-decoration: none; }
.registre-desc { color: var(--encre-douce); }
.registre-actions { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .95rem; }
.import { margin-top: 2rem; color: var(--encre-douce); }
.import form { display: flex; gap: .8rem; align-items: center; margin-top: .8rem; flex-wrap: wrap; }

/* ---- Assistant de création -------------------------------------------------------------------- */
.page-atelier main { padding-bottom: 6rem; }
.atelier { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 19rem; gap: 2rem; align-items: start; }

.etapes { position: sticky; top: 1rem; }
.etapes ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--trait); }
.etapes button {
  display: flex; align-items: baseline; gap: .7rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; padding: .45rem .8rem; margin-left: -1px;
  border-left: 3px solid transparent; color: var(--encre-douce);
}
.etapes .num { font-family: var(--capitales); color: var(--encre-douce); min-width: 1.1rem; }
.etapes li.actuelle button { border-left-color: var(--patine); color: var(--encre); }
.etapes li.a-revoir .num { color: var(--cire); }
.etapes li.a-revoir button::after { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--cire); margin-left: auto; align-self: center; }

.etape { min-width: 0; }
.etape h2 { display: flex; align-items: baseline; gap: .8rem; font-size: 2rem; }
.etape h2 .num { color: var(--patine); }
.etape h2:focus { outline: none; }
.intro { color: var(--encre-douce); max-width: 46rem; margin: 0 0 1.4rem; }
.sous-titre { margin-top: 1.8rem; }

.choix-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; }
.carte {
  position: relative; display: flex; flex-direction: column; gap: .15rem; cursor: pointer;
  padding: .8rem .9rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface);
}
.carte:hover { border-color: var(--patine-fonce); }
.carte input { position: absolute; opacity: 0; pointer-events: none; }
.carte:has(input:focus-visible) { outline: 2px solid var(--ambre); outline-offset: 2px; }
.carte.choisie { border-color: var(--patine); background: #2b4441; box-shadow: inset 3px 0 0 var(--patine); }
.carte-titre { font-family: var(--capitales); font-size: 1.15rem; }
.carte-detail { color: var(--encre-douce); font-size: .93rem; line-height: 1.4; }
.caracs-conseillees { color: var(--patine); font-family: var(--capitales); font-size: .95rem; }
.famille { padding-top: .6rem; }
.series { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .7rem; }
.series legend { grid-column: 1 / -1; }
.series .carte-detail:first-of-type { font-size: 1.1rem; color: var(--encre); letter-spacing: .04em; }

.outils { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: .3rem 0 1rem; }
.restantes { color: var(--encre-douce); font-size: .95rem; }
.restantes.complet { color: var(--patine); }
.jeton { display: inline-block; min-width: 2rem; text-align: center; margin-left: .3rem; padding: 0 .3rem; border: 1px solid var(--trait); border-radius: 99px; color: var(--encre); }

.tableau-caracs { border-collapse: collapse; width: 100%; max-width: 34rem; margin-bottom: 1rem; }
.tableau-caracs th, .tableau-caracs td { padding: .35rem .6rem; border-bottom: 1px solid var(--trait); text-align: left; }
.tableau-caracs thead th { font-family: var(--capitales); font-weight: 500; color: var(--encre-douce); font-size: .95rem; }
.tableau-caracs tbody th { font-weight: 400; }
.tableau-caracs abbr { font-family: var(--capitales); color: var(--encre-douce); margin-left: .5rem; font-size: .9rem; }
.tableau-caracs tr.conseillee th { text-decoration: underline; text-decoration-color: var(--patine); text-underline-offset: 4px; }
.tableau-caracs select { width: 5.5rem; }
.tableau-caracs .mod { color: var(--patine); width: 4rem; }
.tableau-caracs .final { font-family: var(--capitales); font-size: 1.3rem; width: 5rem; }
.tableau-caracs tr.hors-limite .final { color: var(--cire); }
.mod-peuple { max-width: 34rem; }

.voies { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.voie { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .8rem 1rem; background: var(--surface); }
.voie.acquise { border-color: var(--patine); }
.voie-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.voie-tete h3 { margin: 0; flex: 1; }
.rangs, .capacites, .apercu-capacites { list-style: none; margin: 0; padding: 0; }
.rangs li { display: flex; gap: .6rem; padding: .15rem 0; color: var(--encre-douce); }
.rangs li.obtenu { color: var(--encre); }
.rg {
  display: inline-grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--trait); font-size: .8rem; font-family: var(--capitales); color: var(--encre-douce);
}
.rangs li.obtenu .rg, .capacites .rg, .apercu-capacites .rg { background: var(--patine); border-color: var(--patine); color: #10201b; }
.sort { color: var(--ambre); margin-left: .15rem; }
.bascule { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.rang2 { margin-top: 1.4rem; }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.sac { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--encre-douce); }
.tableau-armes { border-collapse: collapse; width: 100%; margin-bottom: .8rem; font-size: .95rem; }
.tableau-armes th { text-align: left; font-weight: 400; color: var(--encre-douce); padding: .3rem .4rem; }
.tableau-armes td { padding: .25rem .4rem; }
.tableau-armes .etroit { width: 5.5rem; }
.tableau-armes .resultat { white-space: nowrap; font-family: var(--capitales); }
.langues .cases { display: flex; flex-wrap: wrap; }

.a-regler h3 { color: var(--cire); }
.a-regler li { margin-bottom: .3rem; }
.pret { color: var(--patine); font-size: 1.2rem; }
.conseils h3 { color: var(--ambre); }
.capacites li { display: flex; gap: .6rem; align-items: baseline; padding: .15rem 0; }
.capacites small { color: var(--encre-douce); }

/* Aperçu : la fiche qui se remplit pendant la création */
.apercu {
  position: sticky; top: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--surface);
}
.apercu-nom { font-family: var(--capitales); font-size: 1.5rem; margin: 0; line-height: 1.2; }
.apercu-sous { margin: 0 0 1rem; color: var(--encre-douce); }
.grille-caracs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: 1rem; }
.carac { display: flex; flex-direction: column; align-items: center; padding: .4rem 0 .3rem; border-radius: var(--rayon); background: #1d292c; }
.carac .v { font-family: var(--capitales); font-size: 1.7rem; line-height: 1; }
.carac abbr { font-family: var(--capitales); font-size: .85rem; color: var(--encre-douce); }
.carac.conseillee abbr { color: var(--patine); }
.grille-derives { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem .4rem; margin-bottom: 1rem; }
.valeur { display: flex; flex-direction: column; }
.valeur .v { font-family: var(--capitales); font-size: 1.35rem; line-height: 1.1; }
.valeur .l { font-size: .85rem; color: var(--encre-douce); }
.attaques { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1rem; margin: 0 0 1rem; }
.attaques dt { color: var(--encre-douce); }
.attaques dd { margin: 0; font-family: var(--capitales); }
.apercu-capacites li { display: flex; gap: .5rem; align-items: center; font-size: .95rem; padding: .1rem 0; }
.apercu-capacites .rg { width: 1.2rem; height: 1.2rem; font-size: .7rem; }
.apercu-etat { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--trait); font-size: .9rem; color: var(--encre-douce); }

.commandes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: .8rem; align-items: center;
  padding: .7rem 1.5rem; background: #1a2427; border-top: 1px solid var(--trait);
}
.etat-sauvegarde { flex: 1; text-align: right; color: var(--encre-douce); font-size: .9rem; }

/* ---- Fiche ---------------------------------------------------------------------------------- */
.fiche { max-width: 62rem; }
.fiche-tete { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.fiche-tete h1 { font-size: 2.6rem; margin: 0; }
.fiche-sous { color: var(--encre-douce); margin: 0; }
.concept { font-style: italic; max-width: 40rem; }
.fiche-actions { display: flex; gap: .6rem; align-items: flex-start; }
.bloc { margin-bottom: 1.8rem; }
.bloc.caracs { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.bloc.caracs .carac { background: var(--surface); padding: .7rem 0 .5rem; }
.bloc.caracs .v { font-size: 2.2rem; }
.bloc.derives { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; padding: 1rem 0; border-block: 1px solid var(--trait); }
.valeur.grande .v { font-size: 2rem; }
.bloc.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.tableau { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
.tableau th, .tableau td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--trait); }
.tableau th { font-weight: 400; color: var(--encre-douce); }
.perso { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; }
.perso dt { color: var(--encre-douce); }
.perso dd { margin: 0; }
.texte { max-width: 38rem; }

/* ---- Administration ------------------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.filtres a { padding: .2rem .7rem; border: 1px solid var(--trait); border-radius: 99px; text-decoration: none; color: var(--encre-douce); font-size: .95rem; }
.filtres a.actif { border-color: var(--patine); color: var(--encre); }
.filtres a.incomplet small, td.incomplet { color: var(--ambre); }
.edition-voie { padding: 1.2rem; border: 1px solid var(--patine-fonce); border-radius: var(--rayon); background: var(--surface); margin-bottom: 1rem; }
.capacites-edition td.rg { width: 2.5rem; border: 0; }
.capacites-edition td:nth-child(3) { width: 4rem; text-align: center; }

.liste-voies { margin-top: 2rem; }

/* ---- Écrans étroits ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .atelier { grid-template-columns: minmax(0, 1fr) 17rem; }
  .etapes { grid-column: 1 / -1; position: static; overflow-x: auto; }
  .etapes ol { display: flex; border-left: 0; border-bottom: 1px solid var(--trait); }
  .etapes button { border-left: 0; border-bottom: 3px solid transparent; margin: 0 0 -1px; white-space: nowrap; }
  .etapes li.actuelle button { border-bottom-color: var(--patine); }
}
@media (max-width: 760px) {
  main { padding: 1rem; }
  .atelier { grid-template-columns: 1fr; }
  .apercu { position: static; }
  .commandes { padding: .5rem .8rem; gap: .5rem; }
  .commandes button { padding: .4rem .6rem; font-size: .9rem; }
  .deux-colonnes, .bloc.deux { grid-template-columns: 1fr; }
  .bloc.caracs { grid-template-columns: repeat(4, 1fr); }
  .bloc.derives { grid-template-columns: repeat(3, 1fr); }
  .registre li { grid-template-columns: 1fr; }
  .tableau-armes { display: block; overflow-x: auto; }
  .commandes { flex-wrap: wrap; }
  .etat-sauvegarde { order: -1; flex-basis: 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---- Impression ----------------------------------------------------------------------------- */
@media print {
  :root { --encre: #111; --encre-douce: #555; --trait: #bbb; --surface: #fff; --patine: #2f6b5a; }
  body { background: #fff; color: #111; font-size: 10.5pt; }
  .barre, .fiche-actions, .flash { display: none; }
  main { padding: 0; }
  .bloc.caracs .carac { border: 1px solid #bbb; background: #fff; }
  .capacites .rg { background: #fff; color: #111; border-color: #111; }
  .bloc { break-inside: avoid; }
}

/* Ajustements fiche */
.fiche h3 { margin: 1rem 0 .3rem; font-size: 1.05rem; color: var(--encre-douce); }
.fiche .capacites { margin-bottom: .4rem; }

/* ---- Campagnes ------------------------------------------------------------------------------ */
.espace { margin-top: 2.5rem; }
.panneau { padding: 1.1rem 1.2rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.campagne-lien { font-size: .93rem; }
.defile { overflow-x: auto; margin-bottom: 1rem; }
.table-mj td, .table-mj th { white-space: nowrap; vertical-align: top; }
.table-mj td:first-child small { display: block; color: var(--encre-douce); }
.table-mj td:first-child a { font-family: var(--capitales); font-size: 1.1rem; }
.table-mj .nb { font-family: var(--capitales); font-size: 1.1rem; text-align: center; }
.table-mj th[title] { text-align: center; cursor: help; }
.caracs-ligne { display: flex; gap: .7rem; }
.caracs-ligne abbr { font-family: var(--capitales); color: var(--encre-douce); font-size: .85rem; }
.rattacher { margin-top: 1rem; max-width: 40rem; }
.membres { list-style: none; padding: 0; margin: 0 0 1rem; }
.membres li { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.membres li > span:first-child { flex: 1; }
.code { font-family: var(--capitales); font-size: 1.2rem; letter-spacing: .08em; color: var(--ambre); }
.parametres { margin-top: 2.5rem; }
.parametres summary { cursor: pointer; font-family: var(--capitales); font-size: 1.15rem; }
.parametres form { max-width: 38rem; margin-top: 1rem; }
.zone-danger { padding-top: 1rem; border-top: 1px solid var(--trait); }
.zone-danger h3 { color: var(--cire); }
button.danger { border-color: var(--cire); }
.ligne > button { margin-bottom: 1rem; }

/* ---- Types d'action et effets des capacités -------------------------------------------------- */
.cap { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.action {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.25rem; padding: 0 .25rem;
  border-radius: 3px; font-family: var(--capitales); font-size: .78rem; font-weight: 700; line-height: 1;
  cursor: help; border: 1px solid currentColor;
}
.action-L { color: #e0896f; }   /* limitée : la plus lente */
.action-A { color: var(--ambre); }
.action-M { color: var(--patine); }
.action-G { color: #a9b9d6; }   /* gratuite */
.effets { font-size: .85rem; color: var(--patine); }
.legende-actions { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .9rem; color: var(--encre-douce); margin: .8rem 0 1.2rem; }
.intro + .legende-actions { margin-top: -.6rem; }   /* collée à l'introduction de l'étape Voies seulement */
.legende-actions > span { display: inline-flex; align-items: center; gap: .35rem; cursor: help; }
.carac-bonus { display: block; font-size: .72rem; color: var(--patine); line-height: 1; }
@media print {
  .action { border-color: #111; color: #111; }
  .effets, .carac-bonus { color: #333; }
}
.legende-fiche { margin: .8rem 0 0; }

/* ---- Progression ---------------------------------------------------------------------------- */
.niv-acquis { color: var(--encre-douce); font-size: .8rem; }
.progression-grille { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.constructeur h2 { font-size: 1.8rem; }
.jauge { display: flex; align-items: baseline; gap: .2rem; flex-wrap: wrap; margin-bottom: .3rem; }
.jauge-v { font-family: var(--capitales); font-size: 2.4rem; line-height: 1; color: var(--ambre); margin-right: .3rem; }
.jauge.complete .jauge-v { color: var(--patine); }
.choisis { list-style: none; padding: .7rem 1rem; margin: 1rem 0; border: 1px solid var(--patine-fonce); border-radius: var(--rayon); background: #263f3b; }
.choisis li { padding: .2rem 0; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.choisis li.oubli, .journal li.oubli { color: #e0a08f; }
.choisis small { color: var(--encre-douce); }
.groupe-options { margin: 1.4rem 0; }
.groupe-options summary { cursor: pointer; font-family: var(--capitales); font-size: 1.1rem; }
.groupe-options summary small { font-family: var(--serif); color: var(--encre-douce); font-size: .9rem; }
.groupe-options h3 { margin-bottom: .6rem; }
.options-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .5rem; margin-top: .6rem; }
.option-cap {
  display: flex; align-items: flex-start; gap: .6rem; text-align: left; width: 100%;
  background: var(--surface); padding: .6rem .7rem; line-height: 1.35;
}
.option-cap:hover:not(:disabled) { border-color: var(--patine); background: #2b4441; }
.option-cap.bloquee { opacity: .55; }
.option-cap .rg { margin-top: .1rem; }
.option-cap.oubli .rg { background: none; border-color: #e0a08f; color: #e0a08f; }
.option-corps { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.option-nom { display: flex; gap: .35rem; align-items: baseline; flex-wrap: wrap; color: var(--encre); }
.option-voie { font-size: .85rem; color: var(--encre-douce); }
.option-raison { font-size: .82rem; color: var(--ambre); }
.cout { font-family: var(--capitales); font-size: .9rem; color: var(--ambre); white-space: nowrap; }
.comparatif { max-width: 26rem; margin: 1.2rem 0; }
.comparatif td { font-family: var(--capitales); }
.comparatif tr.change td:last-child { color: var(--patine); font-weight: 700; }
.historique h2 { margin-top: .3rem; }
.journal { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--trait); }
.journal > li { padding: 0 0 1.1rem 1rem; position: relative; }
.journal > li::before { content: ''; position: absolute; left: -5px; top: .5rem; width: 9px; height: 9px; border-radius: 50%; background: var(--patine); }
.journal > li.a-revoir::before { background: var(--cire); }
.journal-tete { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.journal-tete h3 { margin: 0; }
.journal-tete .lien { margin-left: auto; font-size: .9rem; }
.journal ul { list-style: none; padding: 0; margin: .3rem 0 0; }
.journal ul li { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; padding: .1rem 0; }
.journal small { color: var(--encre-douce); }
.journal .rg { width: 1.2rem; height: 1.2rem; font-size: .7rem; background: var(--patine); border-color: var(--patine); color: #10201b; }
@media (max-width: 1000px) { .progression-grille { grid-template-columns: 1fr; } }
.actions { display: inline-flex; gap: 2px; }
.actions .action:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.actions .action:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---- Créatures ------------------------------------------------------------------------------ */
.titre-avec-action { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.creatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.creature { border: 1px solid var(--trait); border-left: 3px solid var(--patine); border-radius: var(--rayon); padding: .9rem 1rem; background: var(--surface); }
.creature-invocation { border-left-color: #a9b9d6; }
.creature-golem { border-left-color: var(--ambre); }
.creature-familier { border-left-color: #c9a0d8; }
.creature-tete { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.creature-tete h3 { margin: 0; font-size: 1.25rem; }
.creature-tete h3 small { font-family: var(--serif); font-size: .9rem; color: var(--encre-douce); }
.creature-source { margin: .1rem 0 .6rem; font-size: .88rem; color: var(--encre-douce); }
.creature-caracs { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-bottom: .6rem; font-family: var(--capitales); }
.creature-caracs abbr { color: var(--encre-douce); font-size: .8rem; }
.creature-stats { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0 0 .5rem; }
.creature-stats div { display: flex; flex-direction: column; }
.creature-stats dt { font-size: .8rem; color: var(--encre-douce); order: 2; }
.creature-stats dd { margin: 0; font-family: var(--capitales); font-size: 1.35rem; line-height: 1.1; }
.creature-attaques { margin: .2rem 0 .5rem; font-size: .95rem; }
.creature-attaques th { color: var(--encre); }
.creature-attaques td { font-family: var(--capitales); white-space: nowrap; }
.creature-options { font-size: .9rem; color: var(--patine); margin: .3rem 0; }
.creature-notes { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--encre-douce); }
.creature-notes li { margin-bottom: .15rem; }
.mj-creature { display: block; color: var(--encre-douce); white-space: normal; max-width: 26rem; }
.creatures-edition { display: flex; flex-direction: column; gap: 1.5rem; }
.creature-ligne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.groupe-choix { margin-top: .6rem; }
.groupe-choix p { margin: 0 0 .3rem; }
.groupe-choix .option { display: flex; margin: .25rem 0; }
@media (max-width: 800px) { .creature-ligne { grid-template-columns: 1fr; } }
@media print { .creature { border-color: #999; } .titre-avec-action a { display: none; } }
.cases-action { white-space: nowrap; }
.cases-action label { margin-right: .35rem; font-family: var(--capitales); font-size: .9rem; cursor: help; }
.ligne-creature td { padding-top: 0; }
.ligne-creature summary { cursor: pointer; font-size: .9rem; color: var(--encre-douce); }
.ligne-creature textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; color: var(--encre); }

/* ---- Capacités dépliables (fiche) ----------------------------------------------------------- */
.cap-ligne { display: block; padding: .15rem 0; }
.capacites > .cap-ligne:not(:has(details)) { display: flex; gap: .6rem; align-items: baseline; }
.cap-details summary { display: flex; gap: .6rem; align-items: baseline; cursor: pointer; list-style: none; border-radius: var(--rayon); }
.cap-details summary::-webkit-details-marker { display: none; }
.cap-details summary:hover .cap { color: var(--patine); }
.cap-deplier { margin-left: auto; width: .55rem; height: .55rem; flex: none; align-self: center;
  border-right: 2px solid var(--encre-douce); border-bottom: 2px solid var(--encre-douce); transform: rotate(45deg); transition: transform .15s; }
.cap-details[open] .cap-deplier { transform: rotate(-135deg); }
.cap-texte { margin: .35rem 0 .7rem 2rem; padding: .5rem .8rem; border-left: 2px solid var(--patine-fonce);
  background: #22323600; font-size: .95rem; color: var(--encre); max-width: 40rem; }
.cap-texte p { margin: 0 0 .4rem; }
.cap-texte p:last-child { margin-bottom: 0; }
.cap-meta { font-size: .85rem; color: var(--encre-douce); }
.de-evo { border-bottom: 1px dotted var(--ambre); cursor: help; }
textarea.notes-cap { min-width: 14rem; resize: vertical; field-sizing: content; max-height: 12rem; }
@media (prefers-reduced-motion: reduce) { .cap-deplier { transition: none; } }
@media print {
  .cap-deplier, #tout-deplier { display: none; }
  .cap-texte { border-left-color: #999; margin-left: 1.6rem; font-size: 9.5pt; }
}
.capacites > li.cap-ligne:has(> details) { display: block; }
.cap-details, .cap-details > summary { width: 100%; }

/* ---- Notes dans l'assistant et la progression ----------------------------------------------- */
.calc-v { color: var(--patine); font-weight: 700; font-family: var(--capitales); white-space: nowrap; }
.calc { cursor: help; }
.rangs li.avec-notes { display: block; padding: 0; }
.cap-bascule { display: flex; gap: .6rem; align-items: baseline; width: 100%; background: none; border: 0; border-radius: var(--rayon);
  padding: .15rem 0; text-align: left; color: inherit; font-size: inherit; }
.cap-bascule:hover:not(:disabled) .cap { color: var(--patine); }
.cap-bascule .cap-deplier { margin-left: auto; }
.cap-bascule[aria-expanded="true"] .cap-deplier { transform: rotate(-135deg); }
.rangs .cap-texte { margin: .2rem 0 .5rem 1.9rem; font-size: .9rem; }
.option-carte { display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.option-carte .option-cap { border: 0; border-radius: var(--rayon) var(--rayon) 0 0; }
.option-carte.bloquee .option-cap { opacity: .55; }
.option-carte .option-info { align-self: flex-start; font-size: .82rem; margin: 0 .7rem .5rem 2.6rem; }
.option-carte.ouverte { grid-column: 1 / -1; }
.option-carte .cap-texte { margin: 0 .8rem .7rem 2.6rem; font-size: .9rem; }
.option-cap.bloquee { opacity: .55; }
.choix-capacites { margin-bottom: 2rem; }
.choix-capacites .groupe-choix { max-width: 40rem; }
.groupe-choix.a-faire { border-color: var(--ambre); }
.groupe-choix legend small { font-family: var(--serif); color: var(--encre-douce); margin-left: .5rem; }
.choix-a-faire { color: var(--ambre); }
.choix-voie-peuple { margin-top: 1.4rem; }
.emprunt { color: #c9a0d8; }
.situations ul { margin: 0; padding-left: 1.2rem; }
.situations li { margin-bottom: .25rem; }
.situations small { color: var(--encre-douce); }
.voie-mage { margin: 1rem 0; padding: .6rem .8rem; border: 1px dashed var(--ambre); border-radius: var(--rayon); }
.menu-pdf { position: relative; }
.menu-pdf summary { list-style: none; cursor: pointer; }
.menu-pdf summary::-webkit-details-marker { display: none; }
.panneau-pdf { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10; width: 20rem; padding: 1rem;
  background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.panneau-pdf fieldset { margin-bottom: .6rem; }
.panneau-pdf .option { display: flex; margin: .3rem 0; }
@media print { .menu-pdf { display: none; } }
.decisions { border-color: var(--ambre); margin: 1rem 0; }
.decisions .champ select { max-width: 40rem; }
.decisions .cases { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.tableau-armes .deux-mains { display: flex; font-size: .82rem; margin: .2rem 0 0; white-space: nowrap; }
.tableau-armes tr.notes-arme td { font-size: .82rem; color: var(--ambre); padding-top: 0; }
.saisie-libre { margin-top: .4rem; }
.saisie-libre summary { cursor: pointer; font-size: .9rem; color: var(--encre-douce); }
.carac-bonus.limitee { color: var(--ambre); }
.tableau tr.notes-arme td { font-size: .85rem; color: var(--encre-douce); padding-top: 0; border-bottom-style: dashed; }
.tableau-armes select { min-width: 6.8rem; }

/* ---- Tests de caractéristique ---------------------------------------------------------------- */
.table-tests th { width: 11rem; white-space: nowrap; color: var(--encre); font-weight: 500; vertical-align: top; }
.table-tests th .v { font-family: var(--capitales); color: var(--patine); margin-left: .3rem; }
.table-tests td .liste { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.competence { padding: .05rem .5rem; border: 1px solid var(--trait); border-radius: 99px; font-size: .92rem; cursor: help; }
.competence b { font-family: var(--capitales); color: var(--patine); }
.competence small { color: var(--ambre); }
.de-bonus { padding: .05rem .5rem; border-radius: 99px; background: #4a3f22; color: var(--ambre); font-size: .85rem; cursor: help; }
.malus-armure { padding: .05rem .5rem; border-radius: 99px; background: #4a2a24; color: #e0a08f; font-size: .85rem; }
@media print { .competence, .de-bonus, .malus-armure { border-color: #999; background: none; color: #111; } }

/* ---- Fiche de jeu ----------------------------------------------------------------------------- */
.reserves { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.reserve { padding: .8rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.reserve-tete { display: flex; justify-content: space-between; align-items: baseline; }
.reserve-titre { font-family: var(--capitales); color: var(--encre-douce); }
.reserve-valeur { font-family: var(--capitales); color: var(--encre-douce); }
.reserve-valeur b { font-size: 2rem; color: var(--encre); }
.barre-jauge { height: .45rem; border-radius: 99px; background: #1a2427; overflow: hidden; margin: .3rem 0 .6rem; }
.barre-jauge span { display: block; height: 100%; background: var(--patine); transition: width .3s; }
.reserve-pv .barre-jauge span { background: #6fae6a; }
.reserve-pc .barre-jauge span { background: var(--ambre); }
.reserve-pm .barre-jauge span { background: #7c9fd8; }
.reserve.vide .reserve-valeur b { color: var(--cire); }
.ligne-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ligne-actions input[type=number] { width: 5rem; }
.options-degats { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: .3rem; font-size: .9rem; }
.dm-temp { color: var(--ambre); margin: 0 0 .4rem; }
.danger-plein { background: #6b2c22; border-color: var(--cire); }
.valeurs-jeu { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); }
.valeurs-jeu .valeur.modifiee .v { color: var(--cire); }
.jeu-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.bloc-jeu { margin-bottom: 1.4rem; }
.bloc-jeu h2 { font-size: 1.3rem; }
.etats, .etats-auto { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.etat { font-size: .9rem; padding: .25rem .7rem; border-radius: 99px; background: var(--surface); }
.etat.actif { background: #6b2c22; border-color: var(--cire); color: #fff; }
.etat.auto { cursor: help; }
.effets-etats { font-size: .9rem; color: var(--encre-douce); padding-left: 1.1rem; }
.sorts { list-style: none; padding: 0; margin: .5rem 0 0; }
.sorts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; padding: .4rem 0; border-bottom: 1px solid var(--trait); }
.sort-nom small { color: var(--encre-douce); }
.sort-actions { display: flex; gap: .6rem; align-items: center; }
.des .lancer { margin: .3rem 0 .8rem; padding: .6rem 1.6rem; font-size: 1.05rem; }
.resultat-jet { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .8rem 1rem; border: 1px solid var(--trait);
  border-left: 4px solid var(--patine); border-radius: var(--rayon); background: var(--surface); }
.resultat-jet .total { font-family: var(--capitales); font-size: 2.4rem; line-height: 1; }
.resultat-jet .detail { flex: 1; min-width: 12rem; font-size: .92rem; color: var(--encre-douce); }
.resultat-jet.critique { border-left-color: var(--ambre); }
.resultat-jet.critique .total { color: var(--ambre); }
.resultat-jet.echec { border-left-color: var(--cire); }
.journal-jeu { list-style: none; padding: 0; margin: 0; max-height: 26rem; overflow-y: auto; font-size: .9rem; }
.journal-jeu li { display: grid; grid-template-columns: 3rem 5.5rem 1fr; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--trait); }
.journal-jeu time { color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.journal-jeu .auteur { color: var(--patine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-jeu .j-degats span:last-child { color: #e0a08f; }
.journal-jeu .j-soins span:last-child, .journal-jeu .j-recuperation span:last-child { color: #9fd39a; }
.reglages summary { cursor: pointer; font-family: var(--capitales); }
@media (max-width: 900px) { .jeu-colonnes { grid-template-columns: 1fr; } .journal-jeu li { grid-template-columns: 3rem 1fr; } .journal-jeu .auteur { display: none; } }
.mj-etats { display: block; color: #e0a08f; font-family: var(--serif); font-size: .8rem; white-space: normal; }
@media (max-width: 600px) {
  .reserves { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .reserve { padding: .6rem .7rem; }
  .reserve-pv { grid-column: 1 / -1; }
  .reserve-titre { font-size: .85rem; }
  .reserve-valeur b { font-size: 1.6rem; }
}

/* ---- Suivi de jeu intégré à la fiche ----------------------------------------------------------- */
.jeu-panneau { margin: 0 0 1.8rem; padding: 1rem 1.1rem; border: 1px solid var(--patine-fonce); border-radius: var(--rayon); background: #1d2c2e; }
.jeu-tete { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.jeu-tete h2 { margin: 0; font-size: 1.3rem; color: var(--patine); }
.jeu-panneau .reserves { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.jeu-panneau .reserve { padding: .55rem .75rem; }
.jeu-panneau .reserve-valeur b { font-size: 1.6rem; }
.jeu-panneau .barre-jauge { margin: .2rem 0 .45rem; }
.jeu-panneau .ligne-actions input[type=number] { width: 4.2rem; padding: .3rem .4rem; }
.jeu-panneau .ligne-actions button { padding: .3rem .6rem; font-size: .88rem; }
.jeu-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: .6rem; }
.jeu-panneau .etats { margin: 0; }
.jeu-panneau .etat { font-size: .82rem; padding: .15rem .55rem; }
.valeurs-modifiees { margin: 0; color: #e0a08f; font-size: .9rem; }
.options-jet { font-size: .9rem; }
.options-jet input[type=number] { width: 4.2rem; padding: .25rem .4rem; margin-left: .3rem; }
.etiquette-ligne { font-family: var(--capitales); color: var(--encre-douce); }
.option.petite { font-size: .85rem; }
.resultat-jet.compact { padding: .5rem .8rem; border: 0; background: none; }
.resultat-jet.compact .total { font-size: 1.9rem; }
.journal-replie { margin-top: .6rem; }
.journal-replie > summary { cursor: pointer; font-family: var(--capitales); }
.journal-replie > summary small { font-family: var(--serif); color: var(--encre-douce); }
.journal-replie .journal-jeu { margin-top: .5rem; max-height: 18rem; }
.reglages { margin-top: .6rem; }

/* boutons d20 dans la fiche */
button.jet { font: 700 .72rem/1 var(--capitales); padding: .2rem .38rem; margin-left: .4rem; border-radius: 4px; vertical-align: middle;
  background: #263f3b; border-color: var(--patine-fonce); color: var(--patine); }
button.jet:hover { background: var(--patine); color: #10201b; }
.competence button.jet { margin-left: .3rem; font-size: .66rem; padding: .12rem .3rem; }
.lancer-sort { display: inline-flex; gap: .5rem; align-items: center; margin-left: .6rem; }
.lancer-sort button { font-size: .8rem; padding: .15rem .5rem; }
.lancer-sort button.trop-cher:not(.lien) { border-color: var(--cire); color: #e0a08f; }
.cap-details summary .lancer-sort { order: 2; }

/* résultat flottant et barre résumée */
.toast-jet { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; max-width: min(34rem, calc(100vw - 2rem)); display: none;
  align-items: center; gap: .3rem; padding: .3rem .4rem .3rem .2rem; border: 1px solid var(--patine); border-radius: var(--rayon);
  background: var(--surface-2); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.toast-jet.visible { display: flex; }
.toast-jet .fermer { font-size: 1.4rem; text-decoration: none; padding: 0 .4rem; align-self: flex-start; }
.barre-jeu { position: fixed; top: 0; left: 0; right: 0; z-index: 25; display: none; gap: 1.2rem; align-items: baseline; flex-wrap: wrap;
  padding: .45rem 1.5rem; background: #1a2427ee; border-bottom: 1px solid var(--patine-fonce); font-family: var(--capitales); font-size: .95rem; }
.barre-jeu.visible { display: flex; }
.barre-jeu a { color: var(--encre); text-decoration: none; }
.barre-jeu b { font-size: 1.15rem; }
.barre-jeu .etats-barre { color: #e0a08f; font-family: var(--serif); }
@media print { .jeu-panneau, button.jet, .lancer-sort, .toast-jet, .barre-jeu { display: none !important; } }
/* Les maxima PV / PC / PM / DR figurent déjà dans le bandeau « En jeu » : masqués à l'écran, gardés à l'impression */
@media screen { .bloc.derives .doublon-jeu { display: none; } }

/* d20 dans les cases des caractéristiques */
.bloc.caracs .carac button.jet { margin: .35rem 0 0; }
.bloc.caracs .carac { gap: 0; }
/* Tests de caractéristique repliables */
details.bloc.tests > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; cursor: pointer; list-style: none; }
details.bloc.tests > summary::-webkit-details-marker { display: none; }
details.bloc.tests > summary h2 { margin: 0; }
details.bloc.tests > summary h2::before { content: '▸'; display: inline-block; width: 1.1rem; color: var(--patine); transition: transform .15s; }
details.bloc.tests[open] > summary h2::before { transform: rotate(90deg); }
details.bloc.tests > summary .resume-tests { color: var(--encre-douce); font-size: .92rem; }
details.bloc.tests[open] > summary { margin-bottom: .6rem; }
@media print { details.bloc.tests > summary h2::before, details.bloc.tests > summary .resume-tests { display: none; } }
.bloc.caracs .carac button.jet { margin-top: auto; }

/* ---- Voies repliables -------------------------------------------------------------------------- */
.actions-voies { display: inline-flex; flex-wrap: wrap; gap: .2rem .9rem; }
.voie-fiche { border-bottom: 1px solid var(--trait); }
.voie-fiche > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; padding: .55rem 0; cursor: pointer; list-style: none; }
.voie-fiche > summary::-webkit-details-marker { display: none; }
.voie-fiche > summary h3 { margin: 0; }
.voie-fiche > summary h3::before { content: '▸'; display: inline-block; width: 1rem; color: var(--patine); transition: transform .15s; }
.voie-fiche[open] > summary h3::before { transform: rotate(90deg); }
.voie-fiche > summary:hover h3 { color: var(--patine); }
.voie-meta { font-size: .88rem; color: var(--encre-douce); }
.voie-apercu { flex-basis: 100%; padding-left: 1rem; font-size: .88rem; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voie-fiche[open] .voie-apercu { display: none; }
.voie-fiche > .capacites { margin: 0 0 .6rem; }
/* boutons de sort : sur une ligne, chevron du texte tout à droite */
.lancer-sort { flex: none; margin-left: auto; }
.lancer-sort button { white-space: nowrap; }
.cap-details summary .lancer-sort { order: 2; }
.cap-details summary .cap-deplier { order: 3; margin-left: .6rem; }
.cap-details summary .lancer-sort + .cap-deplier, .cap-details summary .lancer-sort ~ .cap-deplier { margin-left: .6rem; }
.capacites > li.cap-ligne:not(:has(details)) .lancer-sort { margin-left: auto; }
@media print {
  .voie-fiche > summary h3::before, .voie-meta, .voie-apercu, .actions-voies { display: none; }
  .voie-fiche { border: 0; }
}
.jeu-ligne.combat input[type=number] { width: 4rem; padding: .25rem .4rem; margin: 0 .3rem; }
.etat .duree { display: inline-block; min-width: 1.2rem; margin-left: .35rem; padding: 0 .3rem; border-radius: 99px; background: #0005; font-size: .75rem; }
.etat.effet.actif { background: #2f5b45; border-color: var(--patine); }
.usage { display: inline-flex; align-items: baseline; gap: .1rem; padding: .1rem .55rem; border: 1px solid var(--trait); border-radius: 99px; font-size: .88rem; }
.usage small { color: var(--encre-douce); }
.usage.epuise { opacity: .5; }
.usage.epuise button.lien { text-decoration: line-through; }
.usage .rendre { text-decoration: none; margin-left: .3rem; }
.tableau-armes tr.arme-options td { padding-top: 0; font-size: .85rem; color: var(--encre-douce); }
.tableau-armes tr.arme-options .option { display: inline-flex; align-items: center; gap: .3rem; margin-right: 1rem; }
.tableau-armes tr.arme-options input.etroit { width: 4.5rem; }
.situations-arme { display: inline-flex; flex-wrap: wrap; gap: 0 .8rem; align-items: center; }
.objets-magiques { margin-top: 1.4rem; }
.tableau-objets td { padding: .25rem .4rem .25rem 0; vertical-align: middle; }
.tableau-objets input[type=text] { min-width: 9rem; }
.tableau-objets input.etroit { width: 4.5rem; min-width: 0; }
.usage-badge { padding: 0 .4rem; border: 1px solid var(--ambre); border-radius: 99px; color: var(--ambre); font-size: .72rem; white-space: nowrap; }
.objets-fiche { margin: .3rem 0 .4rem; padding-left: 1.1rem; }
.objets-fiche small { color: var(--encre-douce); }
.jeu-panneau .jeu-ligne button:not(.etat):not(.lien) { padding: .3rem .7rem; font-size: .88rem; }
small.interdite, .sort-impossible { color: #e0a08f; font-size: .78rem; }
.cap-ligne:has(small.interdite) .cap { opacity: .75; }
.voie-hybride { border-style: dashed; } .hybride-creation { margin: .4rem 0 1rem; }
.depart { margin: 0 0 1.4rem; padding: .8rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); }
.depart h3 { margin-top: 0; }
.liste-depart { margin: 0 0 .7rem; padding-left: 1.2rem; }
.liste-depart li .option { display: inline-flex; margin-right: 1rem; }
fieldset.bourse { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
fieldset.bourse input { width: 6rem; }
.bourse-jeu input[type=number] { width: 6rem; padding: .25rem .4rem; } .bourse-jeu input.motif { width: 10rem; padding: .25rem .4rem; } .bourse-jeu select { padding: .25rem; }
/* Portrait */
.fiche-tete { align-items: flex-start; }
.medaillon-bloc { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-right: 1.2rem; }
.medaillon { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--ambre);
  box-shadow: 0 0 0 2px var(--cire); background: var(--surface); }
.medaillon.vide { display: flex; align-items: center; justify-content: center; font: 2.6rem var(--capitales); color: var(--encre-douce); }
.portrait-edition { font-size: .85rem; text-align: center; }
.portrait-edition summary { cursor: pointer; color: var(--patine); }
.portrait-edition form { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; text-align: left; }
.portrait-edition input[type=file] { max-width: 14rem; font-size: .8rem; }
@media print { .portrait-edition, .medaillon.vide { display: none; } }
.journal-actions { margin: .5rem 0; gap: 1rem; font-size: .9rem; }

/* ---- Écran du MJ ------------------------------------------------------------------------------- */
.page-mj main { max-width: 96rem; }
.mj-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: 1rem; }
.mj-tete h1 { margin: 0; }
.choix-campagne { display: flex; align-items: flex-end; gap: 1rem; }
.mj-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem); gap: 1.5rem; align-items: start; }
.mj-journal { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column;
  padding: .8rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.mj-journal .journal-jeu { max-height: none; overflow-y: auto; flex: 1; }
.journal-mj li { grid-template-columns: 2.8rem 6.5rem 1fr; }
.journal-mj .qui { color: var(--patine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-mj .j-mj .qui { color: var(--ambre); }
.mj-combat { margin-bottom: 1.2rem; padding: .7rem 1rem; border: 1px solid var(--patine-fonce); border-radius: var(--rayon); background: #1d2c2e; }
.mj-combat .round { font-family: var(--capitales); font-size: 1.2rem; margin-right: .5rem; }
.initiative { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .7rem 0 0; counter-reset: ini; }
.initiative li { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem .15rem .2rem; border-radius: 99px; font-size: .9rem;
  background: #263f3b; border: 1px solid var(--patine-fonce); }
.initiative li.monstre { background: #42292a; border-color: var(--cire); }
.initiative li.hors { opacity: .45; text-decoration: line-through; }
.initiative .init { min-width: 1.6rem; text-align: center; border-radius: 99px; background: #0005; font-family: var(--capitales); font-size: .8rem; }
.tableau-defilant { overflow-x: auto; }
.mj-table td, .mj-table th { white-space: nowrap; vertical-align: middle; }
.mj-table .sous { display: block; color: var(--encre-douce); font-size: .8rem; }
.mj-table tr.hors td { opacity: .55; }
.mj-table .etats-mj { white-space: normal; color: #e0a08f; font-size: .85rem; max-width: 12rem; }
.actions-pj { display: flex; gap: .25rem; align-items: center; }
.actions-pj input { width: 4rem; padding: .25rem .35rem; }
.actions-pj button { padding: .25rem .6rem; }
.actions-pj select { padding: .25rem; max-width: 7rem; }
.mini-jauge { display: block; height: .3rem; width: 4.5rem; margin-top: .15rem; border-radius: 99px; background: #1a2427; overflow: hidden; }
.mini-jauge span { display: block; height: 100%; background: var(--patine); }
.mini-jauge.pv span { background: #6fae6a; }
.mini-jauge.pm span { background: #7c9fd8; }
.mj-ajout { padding: .7rem .9rem; margin-bottom: 1rem; border: 1px dashed var(--trait); border-radius: var(--rayon); }
.resultats-bestiaire { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.resultats-bestiaire .choisi { font-weight: 700; color: var(--ambre); }
.creature-libre summary { cursor: pointer; color: var(--patine); }
.creature-libre textarea { min-width: 18rem; }
.cartes-monstres { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.carte-monstre { position: relative; padding: .7rem .8rem; border: 1px solid var(--cire); border-left: 4px solid var(--cire); border-radius: var(--rayon); background: var(--surface); }
.carte-monstre.hors { opacity: .55; border-left-color: #555; }
.carte-monstre header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding-right: 1.4rem; }
.carte-monstre h3 { margin: 0; font-size: 1.1rem; cursor: text; }
.carte-monstre header small { color: var(--encre-douce); }
.carte-monstre .fermer { position: absolute; top: .3rem; right: .5rem; font-size: 1.3rem; text-decoration: none; }
.stats-monstre { display: flex; gap: 1rem; margin: .3rem 0; font-size: .92rem; }
.pv-monstre .pv { cursor: text; }
.pv-monstre .mini-jauge { width: 100%; margin: .2rem 0 .4rem; }
.pv-monstre input { width: 4.2rem; padding: .25rem .35rem; }
.pv-monstre button { padding: .25rem .6rem; font-size: .88rem; }
.attaques-monstre, .capacites-monstre { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .9rem; }
.attaques-monstre li { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .15rem 0; border-bottom: 1px solid var(--trait); }
.capacites-monstre li { padding: .15rem 0; color: var(--encre-douce); }
.capacites-monstre b { color: var(--encre); }
.caracs-monstre { margin: .4rem 0; font-size: .82rem; color: var(--encre-douce); }
.carte-monstre .etats { margin: .4rem 0; gap: .2rem; }
.carte-monstre .etat { font-size: .72rem; padding: .05rem .4rem; }
.carte-monstre .cible select { padding: .15rem; font-size: .82rem; }
.notes-monstre { width: 100%; padding: .25rem .4rem; font-size: .85rem; }
@media (max-width: 1100px) { .mj-grille { grid-template-columns: 1fr; } .mj-journal { position: static; max-height: 30rem; } }
.boutons-dm { display: inline-flex; gap: .2rem; margin-left: .3rem; }
.boutons-dm button.jet { margin-left: 0; }
button.jet.crit { color: var(--ambre); border-color: #6b5420; }
button.jet.des-cap { font-family: var(--serif); font-weight: 500; font-size: .72rem; margin: 0 .2rem 0 .3rem; }
.source-livre { display: inline-block; margin-top: .2rem; padding: 0 .4rem; border: 1px solid var(--patine-fonce); border-radius: 99px; font-size: .72rem; color: var(--patine); }
.traits-peuple { display: block; font-size: .8rem; color: var(--encre-douce); }
.famille-choix { margin-top: 1rem; }


/* ---- Ajouts ADC -------------------------------------------------------------------------------- */
.options-campagne .option { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.options-campagne .option small { display: block; color: var(--encre-douce); }
.bientot { opacity: .6; cursor: not-allowed; }

/* ---- Assistant de création (phase 3) ----------------------------------------------------------------- */
.assistant { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "nav nav" "etape apercu" "actions actions"; gap: 1rem 1.5rem; }
.assistant .assistant-etapes { grid-area: nav; display: flex; flex-wrap: wrap; gap: .35rem; position: static; }
.assistant .assistant-etape { grid-area: etape; min-width: 0; }
.assistant-etape h2 { font-size: 1.6rem; }
.assistant .apercu { grid-area: apercu; position: sticky; top: 1rem; z-index: 1; background: var(--surface, #263336); align-self: start; padding: .75rem 1rem; border: 1px solid var(--trait, #444); border-radius: .4rem; }
.assistant .barre-actions { grid-area: actions; display: flex; gap: .75rem; align-items: center; justify-content: flex-end; position: sticky; bottom: 0; z-index: 2; padding: .6rem 0; background: var(--fond, #1e292c); border-top: 1px solid var(--trait); }
.carte .etiquette { align-self: flex-start; }
.assistant .barre-actions #etat-sauvegarde { margin-right: auto; }
.etape-lien { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; width: auto; padding: .35rem .7rem;
  border: 1px solid var(--trait); border-radius: var(--rayon, .4rem); background: transparent; color: var(--encre-douce); white-space: nowrap; }
.etape-lien .num { font-weight: 700; }
.etape-lien.actif { border-color: var(--patine); color: var(--encre); box-shadow: inset 0 -3px 0 var(--patine); }
.etape-lien.ok .num::after { content: " ✓"; }
.etape-lien .pastille { background: #b3432f; color: #fff; border-radius: 1em; padding: 0 .45em; font-size: .75rem; }
.budget { font-weight: 600; } .budget.ok { color: #5c9a7d; } .budget.danger, .danger { color: #d0614b; }
.allocs { display: grid; gap: .3rem; margin: .5rem 0; }
.alloc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.alloc-nom { min-width: 11rem; }
.alloc.alternative { border-left: 3px solid var(--trait, #666); padding-left: .5rem; }
.alloc .ou { font-style: italic; opacity: .7; }
.compteur { display: inline-flex; align-items: center; gap: .25rem; }
.compteur output { min-width: 1.8rem; text-align: center; font-weight: 700; }
.compteur .petit { width: 1.8rem; height: 1.8rem; padding: 0; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; margin: .5rem 0; }
.cartes.larges { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.assistant .carte { display: flex; flex-direction: column; gap: .25rem; padding: .6rem .75rem; border: 1px solid var(--trait, #555); border-radius: .4rem; cursor: pointer; position: relative; }
.assistant .carte.choisie { border-color: var(--patine); background: #2b4441; }
.groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.assistant .caracs, .fiche .caracs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; text-align: center; }
.assistant .carac span, .fiche .carac span { display: block; font-size: .8rem; opacity: .8; } .assistant .carac strong, .fiche .carac strong { font-size: 1.3rem; }
.traits { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .75rem; font-size: .92rem; }
.trait { display: flex; justify-content: space-between; }
.compact { margin: .25rem 0; padding-left: 1.1rem; font-size: .9rem; }
.tableau-choix { display: grid; gap: .25rem; max-height: 22rem; overflow-y: auto; padding-right: .5rem; }
.precision { margin: .5rem 0; } .detail { margin: .4rem 0; }
.liste-achats li { margin: .15rem 0; }
.ok { color: #5c9a7d; }
@media (max-width: 52rem) {
  .assistant { grid-template-columns: 1fr; grid-template-areas: "nav" "etape" "apercu" "actions"; }
  .assistant .apercu { position: static; }
  .caracs { grid-template-columns: repeat(3, 1fr); }
}
.assistant .carte.indisponible { opacity: .45; cursor: not-allowed; }
.actions-fiche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }

/* ---- Progression et groupe (phase 6) ------------------------------------------------------------------ */
.bilan-merite { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 .5rem; }
.bilan-merite > div { flex: 1 1 9rem; padding: .6rem .9rem; border: 1px solid var(--trait); border-radius: var(--rayon, .4rem); background: var(--surface); }
.bilan-merite span, .bilan-merite small { display: block; color: var(--encre-douce); font-size: .85rem; }
.bilan-merite strong { font-size: 1.4rem; }
.cadre { padding: .8rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon, .4rem); margin-bottom: 1rem; }
.cadre .ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.defile { overflow-x: auto; }
.tableau.groupe td, .tableau.groupe th { text-align: center; white-space: nowrap; }
.tableau.groupe td:first-child, .tableau.groupe th:first-child { text-align: left; white-space: normal; }
.merite-groupe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-top: .75rem; }