/* Morituri — feuille de style. Pensée d'abord pour le téléphone, puis élargie pour les grands écrans. */

:root {
    --fond: #f6efe0;
    --carte: #fffaf0;
    --texte: #2b1d0e;
    --discret: #6e5a43;
    --bronze: #8c5a2b;
    --bronze-fonce: #6b4220;
    --bordure: #dccbad;
    --succes: #2f6b3a;
    --succes-fond: #e3f1e4;
    --erreur: #9b2226;
    --erreur-fond: #f8e1df;
    --info-fond: #f1e8d4;
    --rayon: 10px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #1b150f;
        --carte: #261e16;
        --texte: #f1e6d3;
        --discret: #b9a68b;
        --bronze: #d49a5f;
        --bronze-fonce: #e8b47e;
        --bordure: #4a3a2a;
        --succes: #8fd19b;
        --succes-fond: #1f3324;
        --erreur: #f2a19c;
        --erreur-fond: #3d1f1d;
        --info-fond: #2f261b;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, .marque { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; }
h1 { font-size: 1.7rem; margin: 0.6rem 0 1rem; }
h2 { font-size: 1.3rem; margin: 1.8rem 0 0.7rem; }
h3 { font-size: 1.1rem; margin: 0.2rem 0 0.4rem; }

a { color: var(--bronze); }
a:hover { color: var(--bronze-fonce); }

main, footer { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
main { padding-bottom: 2rem; }

/* --- En-tête et menu ---------------------------------------------------- */

.entete {
    background: var(--bronze-fonce);
    color: #fff8ec;
    padding: 0.6rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.2rem;
}
@media (prefers-color-scheme: dark) { .entete { background: #3a2716; } }
.marque { color: inherit; text-decoration: none; font-size: 1.4rem; font-weight: bold; }
.marque span { display: block; font-size: 0.75rem; font-weight: normal; font-family: system-ui, sans-serif; opacity: 0.85; }
.entete nav { display: flex; flex-wrap: wrap; gap: 0.2rem; align-items: center; }
.entete nav a, .entete nav .lien {
    color: inherit; text-decoration: none; padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.95rem;
}
.entete nav a[aria-current="page"], .entete nav a:hover, .entete nav .lien:hover { background: rgba(255, 255, 255, 0.15); }

footer { color: var(--discret); font-size: 0.9rem; border-top: 1px solid var(--bordure); padding-top: 0.8rem; padding-bottom: 2rem; }

/* --- Blocs ------------------------------------------------------------------- */

.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 0.9rem 1rem;
    margin: 0 0 1rem;
}
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }
.carte.alerte { border-color: var(--bronze); border-width: 2px; }
.carte.moi { border-left: 5px solid var(--bronze); }
.carte.deuil { border-left: 5px solid var(--erreur); }
.carte.vainqueur { border-color: var(--succes); border-width: 2px; }

.grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.deux-colonnes { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
    .grille { grid-template-columns: repeat(2, 1fr); }
    .deux-colonnes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 62rem) { .grille { grid-template-columns: repeat(3, 1fr); } }
.grille .carte { margin: 0; }

.chapeau { font-size: 1.05rem; }
.discret { color: var(--discret); }
small { font-size: 0.85rem; }
.pastille {
    display: inline-block; font-size: 0.75rem; padding: 0.05rem 0.5rem; border-radius: 999px;
    background: var(--info-fond); border: 1px solid var(--bordure); color: var(--discret); vertical-align: middle;
}
.pastille.fait { background: var(--succes-fond); color: var(--succes); border-color: transparent; }
.pastille.a-faire { background: var(--erreur-fond); color: var(--erreur); border-color: transparent; }

.message { padding: 0.7rem 0.9rem; border-radius: var(--rayon); margin: 0 0 1rem; }
.message.succes { background: var(--succes-fond); color: var(--succes); }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); }
.message.info { background: var(--info-fond); }

.liste-simple { padding-left: 1.2rem; }
.liste-simple li { margin: 0.3rem 0; }

/* --- Tableaux ------------------------------------------------------------- */

.defilant { overflow-x: auto; }
.tableau { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
.tableau th, .tableau td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau.compact { width: auto; font-variant-numeric: tabular-nums; }
.tableau.compact th, .tableau.compact td { text-align: center; padding: 0.25rem 0.45rem; }

/* --- Formulaires ----------------------------------------------------------- */

.formulaire label, .ordres label { display: block; margin: 0 0 1rem; font-weight: 600; }
.formulaire small, .ordres small { display: block; font-weight: normal; color: var(--discret); margin-top: 0.2rem; }
input, select, button, textarea { font: inherit; }
input:not([type="radio"]):not([type="range"]):not([type="checkbox"]), select {
    display: block; width: 100%; margin-top: 0.25rem; padding: 0.6rem 0.7rem; min-height: 2.75rem;
    border: 1px solid var(--bordure); border-radius: 8px; background: var(--carte); color: var(--texte);
}
input[type="range"] { width: 100%; margin: 0.5rem 0 0.1rem; accent-color: var(--bronze); min-height: 2rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }
fieldset { min-width: 0; }
legend { font-weight: bold; font-family: Georgia, serif; font-size: 1.1rem; padding: 0 0.3rem; }

button, .bouton {
    display: inline-block; padding: 0.65rem 1.1rem; min-height: 2.75rem; border-radius: 8px; border: 1px solid var(--bronze-fonce);
    background: var(--bronze); color: #fffaf0; font-weight: 600; text-decoration: none; cursor: pointer;
}
button:hover, .bouton:hover { background: var(--bronze-fonce); color: #fffaf0; }
@media (prefers-color-scheme: dark) { button, .bouton, button:hover, .bouton:hover { color: #1b150f; } }
button.secondaire, .bouton.secondaire { background: transparent; color: var(--bronze); }
button.secondaire:hover, .bouton.secondaire:hover { background: var(--info-fond); color: var(--bronze-fonce); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
button.lien { background: none; border: none; min-height: 0; font-weight: normal; }
.en-ligne { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.curseur span { display: flex; justify-content: space-between; }
.curseur output { font-size: 1.2rem; font-weight: bold; color: var(--bronze); min-width: 2ch; text-align: right; }

/* --- Création d'écurie ---------------------------------------------------------- */

.choix-tirage { display: flex; gap: 0.5rem; align-items: center; font-weight: bold; margin-bottom: 0.4rem; }
.choix-tirage input { width: 1.3rem; height: 1.3rem; accent-color: var(--bronze); }
.bonus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 0.8rem; }
@media (min-width: 40rem) { .bonus { grid-template-columns: repeat(4, 1fr); } }
.bonus label span { display: flex; justify-content: space-between; font-weight: normal; }
.bonus output { font-weight: bold; color: var(--bronze); }
.bonus output.trop { color: var(--erreur); }
.reste { font-weight: bold; margin: 0; }
.reste.faux { color: var(--erreur); }
details.aide { margin: 0 0 1rem; }
details.aide dd { margin: 0 0 0.6rem; }

/* --- Gladiateurs, marchand, ordres --------------------------------------------- */

.caracs { list-style: none; padding: 0; margin: 0.4rem 0; }
.caracs li { display: grid; grid-template-columns: 7.5rem 1fr 4.2rem; align-items: center; gap: 0.5rem; }
/* Jauges des caractéristiques : de simples barres (pas de <meter>, dessiné différemment par chaque navigateur).
   Largeur par classe .p0 à .p100 (pas de 2 %), car la politique de sécurité interdit les styles en ligne. */
.jauge {
    display: block; height: 0.8rem; border: 1px solid var(--bordure); border-radius: 999px;
    background: var(--succes-fond); overflow: hidden;
}
.jauge { display: flex; }
.jauge > span { display: block; flex: none; height: 100%; background: var(--succes); border-radius: 999px; }
.jauge > span:has(+ .gagne) { border-radius: 999px 0 0 999px; }
.jauge > .gagne { background: var(--or); border-radius: 0 999px 999px 0; }
.jauge .p0{width:0%} .jauge .p2{width:2%} .jauge .p4{width:4%} .jauge .p6{width:6%} .jauge .p8{width:8%} .jauge .p10{width:10%} .jauge .p12{width:12%} .jauge .p14{width:14%} .jauge .p16{width:16%} .jauge .p18{width:18%} .jauge .p20{width:20%} .jauge .p22{width:22%} .jauge .p24{width:24%} .jauge .p26{width:26%} .jauge .p28{width:28%} .jauge .p30{width:30%} .jauge .p32{width:32%} .jauge .p34{width:34%} .jauge .p36{width:36%} .jauge .p38{width:38%} .jauge .p40{width:40%} .jauge .p42{width:42%} .jauge .p44{width:44%} .jauge .p46{width:46%} .jauge .p48{width:48%} .jauge .p50{width:50%} .jauge .p52{width:52%} .jauge .p54{width:54%} .jauge .p56{width:56%} .jauge .p58{width:58%} .jauge .p60{width:60%} .jauge .p62{width:62%} .jauge .p64{width:64%} .jauge .p66{width:66%} .jauge .p68{width:68%} .jauge .p70{width:70%} .jauge .p72{width:72%} .jauge .p74{width:74%} .jauge .p76{width:76%} .jauge .p78{width:78%} .jauge .p80{width:80%} .jauge .p82{width:82%} .jauge .p84{width:84%} .jauge .p86{width:86%} .jauge .p88{width:88%} .jauge .p90{width:90%} .jauge .p92{width:92%} .jauge .p94{width:94%} .jauge .p96{width:96%} .jauge .p98{width:98%} .jauge .p100{width:100%}
.caracs .gain { color: var(--or); font-weight: 700; }
.caracs strong { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

details.carte summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 2rem; }
.ligne-achat {
    display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem; align-items: center;
    padding: 0.4rem 0; border-bottom: 1px solid var(--bordure); margin: 0;
}
.ligne-achat:last-child { border-bottom: none; }
.resume-ordres .phase { display: inline-block; margin-right: 0.8rem; font-variant-numeric: tabular-nums; }
.defi { margin-bottom: 1rem; }
.defi button { margin-right: 0.5rem; }

/* --- Résultats et gazette ---------------------------------------------------------- */

.combats { list-style: none; padding: 0; }
.combats a { color: inherit; text-decoration: none; display: block; }
.choix-tour { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.choix-tour a { padding: 0.3rem 0.65rem; border: 1px solid var(--bordure); border-radius: 6px; text-decoration: none; }
.choix-tour a[aria-current="page"] { background: var(--bronze); color: #fffaf0; border-color: var(--bronze); }
details.minute { border-bottom: 1px solid var(--bordure); padding: 0.4rem 0; }
details.minute summary { cursor: pointer; font-weight: 600; }
details.minute ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.gazette { font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; max-width: 40rem; }
.gazette blockquote { border-left: 4px solid var(--bronze); margin: 1rem 0; padding: 0.2rem 1rem; font-style: italic; }
.memorial, .journal { list-style: none; padding: 0; }
.journal li { padding: 0.5rem 0; border-bottom: 1px solid var(--bordure); }
pre.details { white-space: pre-wrap; font-size: 0.8rem; background: var(--carte); padding: 1rem; border-radius: var(--rayon); }

/* --- Étape 4 : classements, gains, récits ------------------------------------------ */

.classement { padding-left: 1.6rem; }
.classement li { margin: 0.35rem 0; }
.gains { color: var(--succes); }
.recit { margin: 1rem 0 1.5rem; }

/* --- Résultats : récit dans un cadre, gains révélés à la fin de la lecture ------------ */

.recit-cadre {
    max-height: 15rem; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--bordure); border-radius: 8px; padding: 0.4rem 0.9rem; margin: 0.6rem 0;
    background: var(--fond); font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem;
}
.recit-cadre:focus-visible { outline: 3px solid var(--bronze); }
.fin-recit { display: block; height: 1px; }
.issue { margin: 0.5rem 0 0.2rem; }
.bouton-reveler { display: none; }
/* Avec JavaScript : l'issue et les gains d'un combat non lu restent cachés jusqu'à la fin du récit. */
.js .a-reveler[data-lu="0"] { display: none; }
.js .a-reveler[data-lu="0"] ~ .bouton-reveler { display: inline-block; }
.js .apres-lecture[data-tout-lu="0"] { display: none; }
.a-reveler.revele, .apres-lecture.revele { animation: apparition 0.7s ease-out; }
.a-reveler.mort .issue { color: var(--erreur); }
.tout-reveler-zone { display: none; }
.js .tout-reveler-zone:not([hidden]) { display: block; }
.message-joueur p { white-space: normal; }
@keyframes apparition {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .a-reveler.revele, .apres-lecture.revele { animation: none; }
}

.genre { border: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 1.2rem; }
.genre label { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 600; margin: 0; }
.genre input { width: 1.2rem; height: 1.2rem; accent-color: var(--bronze); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
textarea { display: block; width: 100%; margin-top: 0.25rem; padding: 0.6rem 0.7rem; border: 1px solid var(--bordure);
           border-radius: 8px; background: var(--carte); color: var(--texte); font: inherit; resize: vertical; }

/* --- Icônes et niveaux de qualité ---------------------------------------------------------------------
   Couleur par niveau : 1 gris, 2 brun, 3 vert, 4 bleu, 5 or. Jamais seule : étoiles et nom l'accompagnent. */
:root { --q1: #77736c; --q2: #8a5a2e; --q3: #2e7d32; --q4: #1f5fae; --q5: #7e2a90; --or: #b8860b; }  /* légendaire : pourpre impérial (l'or reste aux étoiles) */
@media (prefers-color-scheme: dark) {
    :root { --q1: #aaa49a; --q2: #c99561; --q3: #7ccf82; --q4: #7fb0f0; --q5: #d79be6; --or: #f0c541; }
}
.icone { width: 1.35em; height: 1.35em; vertical-align: -0.3em; flex: none; }
.objet { white-space: normal; }
.objet .icone { color: var(--texte); }
.q1 .icone, .qualite.q1 { color: var(--q1); }
.q2 .icone, .qualite.q2 { color: var(--q2); }
.q3 .icone, .qualite.q3 { color: var(--q3); }
.q4 .icone, .qualite.q4 { color: var(--q4); }
.q5 .icone, .qualite.q5 { color: var(--q5); }
.qualite { font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.qualite .etoiles { letter-spacing: 0.05em; }
.q5 .icone { filter: drop-shadow(0 0 2px rgba(160, 70, 190, 0.55)); }
.style-combat { white-space: nowrap; }
.style-combat .icone { color: var(--bronze); }
.liste-icones { list-style: none; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.liste-icones li { display: flex; gap: 0.5rem; align-items: flex-start; }
.liste-icones .icone { width: 2rem; height: 2rem; color: var(--bronze); }
.equipement { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.equipement li { margin: 0.15rem 0; }
.sommaire { margin: 0 0 1rem; line-height: 1.8; }

/* --- Poupée d'équipement ------------------------------------------------- */

.poupee { margin: 0.75rem 0; }
.poupee-scene { position: relative; width: min(100%, 21rem); aspect-ratio: 9 / 10; margin: 0 auto; }
.poupee-scene .silhouette { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--bordure); vertical-align: 0; }
.emplacement {
    position: absolute; transform: translate(-50%, -50%); width: 3.6rem; min-height: 3.6rem; padding: 0.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem;
    background: var(--carte); border: 2px solid currentColor; border-radius: var(--rayon); color: var(--texte);
    font: inherit; font-size: 0.7rem; font-weight: normal; line-height: 1.1;
}
button.emplacement:hover, button.emplacement[aria-expanded="true"] { background: var(--info-fond); color: inherit; }
button.emplacement[aria-expanded="true"] { outline: 3px solid var(--bronze); outline-offset: 1px; }
.emplacement.vide { border-style: dashed; color: var(--discret); }
.emplacement.q1 { color: var(--q1); } .emplacement.q2 { color: var(--q2); } .emplacement.q3 { color: var(--q3); }
.emplacement.q4 { color: var(--q4); } .emplacement.q5 { color: var(--q5); }
.emplacement .apercu { display: flex; flex-direction: column; align-items: center; }
.emplacement .icone { width: 1.7rem; height: 1.7rem; vertical-align: 0; }
.emplacement .etoiles { font-size: 0.55rem; letter-spacing: 0; }
.emplacement .nom-emp { font-size: 0.62rem; color: var(--discret); }
/* Les emplacements en deux colonnes, de part et d'autre du gladiateur, pour laisser voir son équipement. */
.e-tete { left: 9%; top: 12%; } .e-torse { left: 9%; top: 41%; } .e-jambes { left: 9%; top: 70%; }
.e-arme { left: 91%; top: 26%; } .e-bras { left: 91%; top: 55%; } .e-pieds { left: 91%; top: 84%; }

/* L'équipement dessiné sur la silhouette (www/tenue.svg) : couleur de sa qualité, contour doré à 2 étoiles, or vif et halo à 3 ;
   une pièce brisée est grise et en pointillés. */
.poupee-scene .tenue { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tenue { --peau: color-mix(in srgb, var(--bordure) 78%, var(--carte)); --peau-trait: color-mix(in srgb, var(--discret) 45%, transparent);
         --cheveux: color-mix(in srgb, var(--bronze) 55%, var(--texte)); }
.tenue use { color: var(--q1); }
.tenue .q2 { color: var(--q2); } .tenue .q3 { color: var(--q3); } .tenue .q4 { color: var(--q4); } .tenue .q5 { color: var(--q5); }
.tenue .e2 { --contour: #c9a227; }
.tenue .e3 { --contour: #f6c624; --trait: 1.7; --etincelles: inline; --opacite: 0.62;
             filter: drop-shadow(0 0 1.3px rgba(246, 198, 36, 0.95)) drop-shadow(0 0 3px rgba(246, 198, 36, 0.3)); }
.tenue .brise { color: var(--discret); --contour: var(--discret); --etincelles: none; filter: none; opacity: 0.6; stroke-dasharray: 2 1.5; }
/* Panoplie complète : sa médaille (aile, aigle, lion) sur le torse. */
.tenue.panoplie-complete use { --motif: inline; }
/* Les accessoires de style (www/tenue.svg, s-STYLE). */
.tenue { --cuir: #7a5230; --cuir-sombre: #4a3020; --etoffe: #a3322a; --metal: #9aa0a8; --fourrure: #8a6440; --or-acc: #c9a227;
         --trait-acc: color-mix(in srgb, var(--texte) 70%, transparent); }
@media (prefers-color-scheme: dark) { .tenue { --cuir: #a8784c; --cuir-sombre: #6e4a32; --etoffe: #c95a4e; --metal: #b9bfc6; --fourrure: #a98258; } }
@media (prefers-reduced-motion: reduce) { .tenue animate { display: none; } }
.tenue .vide { display: none; }

.poupee-bilan { text-align: center; font-size: 0.9rem; margin: 0.5rem 0; }
/* Les emplacements en petits écus, translucides : la silhouette du gladiateur transparaît. */
.poupee-scene .emplacement {
    border-radius: 0.5rem 0.5rem 50% 50% / 0.5rem 0.5rem 35% 35%;
    background: color-mix(in srgb, var(--carte) 82%, transparent);
    box-shadow: inset 0 0 0 2px var(--carte), 0 1px 3px rgba(60, 40, 20, 0.18);
    padding-bottom: 0.45rem;
}

.poupee-choix ul { list-style: none; padding: 0; margin: 0.25rem 0; display: grid; gap: 0.35rem; }
.poupee-choix > p:first-child { display: flex; justify-content: space-between; align-items: center; margin: 0; }
.choix {
    width: 100%; display: flex; gap: 0.6rem; align-items: center; text-align: left; min-height: 3rem;
    background: var(--carte); color: var(--texte); border: 1px solid var(--bordure); font-weight: normal;
}
.choix:hover { background: var(--info-fond); color: var(--texte); }
.choix .apercu { display: flex; flex-direction: column; align-items: center; min-width: 2.2rem; }
.choix .icone { width: 1.6rem; height: 1.6rem; }
.choix .etoiles { font-size: 0.55rem; }
.choix-texte { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; align-items: center; }
.choix-texte small { flex-basis: 100%; }
.choix .manque { color: var(--erreur); }
.choix.porte-deja { border: 2px solid var(--bronze); }

/* Avec JavaScript, les emplacements remplacent les menus ; sans, les menus restent (et le bouton « Équiper »). */
.poupee-menus { display: grid; gap: 0.4rem; }
.js .poupee-menus { display: none; }
html:not(.js) button.emplacement { pointer-events: none; }

/* Écrans larges : on vise à la souris, la poupée peut être plus petite. */
@media (min-width: 40rem) {
    .poupee-scene { width: min(100%, 17rem); }
    .emplacement { width: 3rem; min-height: 3rem; }
    .emplacement .icone { width: 1.4rem; height: 1.4rem; }
}

/* Très petits écrans : une simple liste d'emplacements, sans la silhouette. */
@media (max-width: 22rem) {
    .poupee-scene { aspect-ratio: auto; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .poupee-scene .silhouette, .poupee-scene .tenue { display: none; }
    .emplacement { position: static; transform: none; width: auto; }
}

/* --- Marques de gloire ---------------------------------------------------- */

.marques { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; vertical-align: middle; }
button.marque {
    position: relative; display: inline-flex; align-items: center; gap: 0.2rem; min-height: 0; padding: 0.1rem 0.45rem;
    border: 1px solid var(--bordure); border-radius: 999px; background: var(--carte); color: var(--texte);
    font-size: 0.8rem; font-weight: 600; line-height: 1.4; cursor: help;
}
button.marque:hover, button.marque:focus { background: var(--info-fond); color: var(--texte); }
.marque .icone { width: 1.5em; height: 1.5em; vertical-align: 0; color: var(--bronze); }
.marque.niveau { font-family: Georgia, serif; letter-spacing: 0.02em; }
.marque.actuel { border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
.marque.actuel .icone { color: var(--or); }
.glyphe {
    display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%;
    background: #1b1209; color: #fff; font-family: Georgia, serif; font-size: 0.85em; line-height: 1;
}
@media (prefers-color-scheme: dark) { .glyphe { box-shadow: 0 0 0 1px var(--texte); } }
/* Info-bulle : au survol, ou quand on touche la marque (elle prend alors le focus). */
.marque[data-info]:hover::after, .marque[data-info]:focus::after {
    content: attr(data-info); position: absolute; z-index: 20; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 15rem; padding: 0.35rem 0.55rem; border-radius: 6px;
    background: var(--texte); color: var(--carte); font-family: system-ui, sans-serif; font-size: 0.8rem; font-weight: normal;
    line-height: 1.3; text-align: center; white-space: normal; pointer-events: none;
}
.barre-xp { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--discret); }
.barre-xp progress { flex: 1 1 6rem; min-width: 6rem; height: 0.6rem; accent-color: var(--bronze); }
.barre-xp span { white-space: nowrap; }
.records { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0; }
.records dt { color: var(--discret); }
.records dd { margin: 0; }
.palmares { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; }
.palmares li { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 0.6rem; text-align: center; }
.palmares strong { display: block; font-size: 1.6rem; font-family: Georgia, serif; }
.marques-combat { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.9rem; margin: 0 0 0.5rem; }

/* --- Usure de l'équipement ------------------------------------------------ */

.usure { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--discret); white-space: nowrap; }
.usure .barre { display: inline-block; width: 3rem; height: 0.4rem; border-radius: 999px; background: var(--bordure); overflow: hidden; }
.usure .barre span { display: block; height: 100%; background: var(--succes); }
.usure.moyen .barre span { background: #c58a1d; }
.usure.danger .barre span { background: var(--erreur); }
.usure.danger { color: var(--erreur); font-weight: 600; }
.etat-brise { font-size: 0.8rem; font-weight: 700; color: var(--erreur); text-transform: uppercase; letter-spacing: 0.03em; }
.emplacement .usure .barre { width: 2.2rem; height: 0.3rem; }
.emplacement.brise { border-color: var(--erreur); border-style: solid; background: repeating-linear-gradient(135deg, var(--carte) 0 6px, var(--erreur-fond) 6px 9px); }
.alertes-usure { margin: 0.5rem 0; }
.message.attention { background: #fbecd2; color: #7a4b05; }
@media (prefers-color-scheme: dark) { .message.attention { background: #3b2a10; color: #f0c27a; } }
.entete .compte { margin: 0; font-size: 0.85rem; opacity: 0.9; order: 3; flex-basis: 100%; }
@media (min-width: 48rem) { .entete .compte { order: 0; flex-basis: auto; margin-left: auto; } }

/* --- Modèles d'ordres ------------------------------------------------------ */

.modeles li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.modeles .bouton { padding: 0.35rem 0.8rem; min-height: 2.25rem; }
.enregistrer-modele { margin-top: 1rem; display: grid; gap: 0.5rem; }
label.case { display: flex; align-items: center; gap: 0.4rem; }
.source-ordres { margin: 0.25rem 0 0.75rem; }
.modeles button.lien { color: var(--erreur); text-decoration: underline; padding: 0.35rem 0.4rem; }

/* --- Filigranes : temple, scène de combat et Colisée, dessinés au trait, très pâles, derrière le contenu --- */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--bronze);
    opacity: 0.16;
    -webkit-mask:
        url("filigranes/temple.svg") left 1.5vw top 7rem / min(30vw, 330px) auto no-repeat,
        url("filigranes/combat.svg") right 0 top 36vh / min(22vw, 300px) auto no-repeat,
        url("filigranes/colisee.svg") left 50% bottom -0.5rem / min(70vw, 680px) auto no-repeat;
    mask:
        url("filigranes/temple.svg") left 1.5vw top 7rem / min(30vw, 330px) auto no-repeat,
        url("filigranes/combat.svg") right 0 top 36vh / min(22vw, 300px) auto no-repeat,
        url("filigranes/colisee.svg") left 50% bottom -0.5rem / min(70vw, 680px) auto no-repeat;
}
@media (prefers-color-scheme: dark) { body::before { opacity: 0.2; } }
@media print { body::before { display: none; } }

/* --- Codes d'invitation libres (page d'accueil) --- */
.codes-libres ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.codes-libres code { font-size: 1.1rem; font-weight: bold; letter-spacing: 0.05em; user-select: all; }
.codes-libres del { color: var(--discret); }
.codes-libres del code { font-weight: normal; }

/* --- Le forgeron, gladiateur par gladiateur --- */
.forge-groupe h3 small { font-family: system-ui, sans-serif; font-weight: normal; font-size: 0.85rem; }
.ligne-forge { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--bordure); }
.ligne-forge:last-child { border-bottom: none; }
.ligne-forge .forge-objet { flex: 1 1 14rem; }
.ligne-forge.a-reparer .forge-objet { font-weight: 600; }
.ligne-forge button { min-height: 2.4rem; padding: 0.3rem 0.7rem; font-size: 0.9rem; }

/* --- Le marchand, gladiateur par gladiateur --- */
.marchand-groupe h3 small { font-family: system-ui, sans-serif; font-weight: normal; font-size: 0.85rem; }
.ligne-marchand { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--bordure); margin: 0; }
.ligne-marchand:last-child { border-bottom: none; }
.ligne-marchand .marchand-porte { flex: 1 1 13rem; display: flex; flex-direction: column; }
.ligne-marchand select { flex: 1 1 14rem; max-width: 100%; }
.ligne-marchand button { min-height: 2.4rem; padding: 0.3rem 0.7rem; font-size: 0.9rem; }